From 499a41440ebe20bbd6ffef35ddb0de3b2c2b8f40 Mon Sep 17 00:00:00 2001
From: sophian <littlejohn.sophia@gmail.com>
Date: Fri, 9 Aug 2024 11:44:34 -0400
Subject: [PATCH] Add reserve info box to finance forms

---
 .../src/pages/Loan/ExternalFinanceForm.tsx      | 17 +++++++++++++++++
 centrifuge-app/src/pages/Loan/FinanceForm.tsx   | 17 +++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/centrifuge-app/src/pages/Loan/ExternalFinanceForm.tsx b/centrifuge-app/src/pages/Loan/ExternalFinanceForm.tsx
index 9048b227f..79ee0759c 100644
--- 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
index 62c12ace4..58d95c2c9 100644
--- 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}>