Add reserve info box to finance forms

centrifuge · Aug 9, 2024 · 499a414 · 499a414
1 parent 32f1b55
commit 499a414
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/centrifuge-app/src/pages/Loan/ExternalFinanceForm.tsx b/centrifuge-app/src/pages/Loan/ExternalFinanceForm.tsx
@@ -14,6 +14,7 @@ import Decimal from 'decimal.js-light'
 import { Field, FieldProps, Form, FormikProvider, useFormik } from 'formik'
 import * as React from 'react'
 import { combineLatest, switchMap } from 'rxjs'
+import { AnchorTextLink } from '../../components/TextLink'
 import { Dec } from '../../utils/Decimal'
 import { formatBalance } from '../../utils/formatting'
 import { useFocusInvalidInput } from '../../utils/useFocusInvalidInput'
@@ -173,6 +174,22 @@ export function ExternalFinanceForm({ loan, source }: { loan: ExternalLoan; sour
               </Box>
             )}
 
+            {source === 'reserve' && totalFinance.gt(maxAvailable) && pool.reserve.total.gt(pool.reserve.available) && (
+              <Box bg="statusDefaultBg" p={1}>
+                <InlineFeedback status="default">
+                  <Text color="statusDefault">
+                    There is an additional{' '}
+                    {formatBalance(
+                      new CurrencyBalance(pool.reserve.total.sub(pool.reserve.available), pool.currency.decimals),
+                      displayCurrency
+                    )}{' '}
+                    available from repayments or deposits. This requires first executing the orders on the{' '}
+                    <AnchorTextLink href={`#/pools/${pool.id}/liquidity`}>Liquidity tab</AnchorTextLink>.
+                  </Text>
+                </InlineFeedback>
+              </Box>
+            )}
+
             <Stack p={2} maxWidth="444px" bg="backgroundTertiary" gap={2} mt={2}>
               <Text variant="heading4">Transaction summary</Text>
               <Stack gap={1}>

diff --git a/centrifuge-app/src/pages/Loan/FinanceForm.tsx b/centrifuge-app/src/pages/Loan/FinanceForm.tsx
@@ -42,6 +42,7 @@ import Decimal from 'decimal.js-light'
 import { Field, FieldProps, Form, FormikProvider, useField, useFormik, useFormikContext } from 'formik'
 import * as React from 'react'
 import { combineLatest, map, of, switchMap } from 'rxjs'
+import { AnchorTextLink } from '../../components/TextLink'
 import { parachainIcons, parachainNames } from '../../config'
 import { Dec, min } from '../../utils/Decimal'
 import { formatBalance } from '../../utils/formatting'
@@ -242,6 +243,22 @@ function InternalFinanceForm({ loan, source }: { loan: LoanType; source: string
               </Box>
             )}
 
+            {source === 'reserve' && totalFinance.gt(maxAvailable) && pool.reserve.total.gt(pool.reserve.available) && (
+              <Box bg="statusDefaultBg" p={1}>
+                <InlineFeedback status="default">
+                  <Text color="statusDefault">
+                    There is an additional{' '}
+                    {formatBalance(
+                      new CurrencyBalance(pool.reserve.total.sub(pool.reserve.available), pool.currency.decimals),
+                      displayCurrency
+                    )}{' '}
+                    available from repayments or deposits. This requires first executing the orders on the{' '}
+                    <AnchorTextLink href={`#/pools/${pool.id}/liquidity`}>Liquidity tab</AnchorTextLink>.
+                  </Text>
+                </InlineFeedback>
+              </Box>
+            )}
+
             <Stack p={2} maxWidth="444px" bg="backgroundTertiary" gap={2} mt={2}>
               <Text variant="heading4">Transaction summary</Text>
               <Stack gap={1}>