Add loading buttons to side drawer

centrifuge · Oct 31, 2024 · e45a4d0 · e45a4d0
1 parent 5473435
commit e45a4d0
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 42 deletions.
diff --git a/centrifuge-app/src/pages/Loan/CorrectionForm.tsx b/centrifuge-app/src/pages/Loan/CorrectionForm.tsx
@@ -1,6 +1,16 @@
 import { ActiveLoan, CurrencyBalance, Pool, Price } from '@centrifuge/centrifuge-js'
 import { useCentrifugeApi, useCentrifugeTransaction, wrapProxyCallsForAccount } from '@centrifuge/centrifuge-react'
-import { Box, Button, CurrencyInput, Shelf, Stack, Text, TextInput } from '@centrifuge/fabric'
+import {
+  Box,
+  Button,
+  CurrencyInput,
+  IconCheckCircle,
+  IconClock,
+  Shelf,
+  Stack,
+  Text,
+  TextInput,
+} from '@centrifuge/fabric'
 import Decimal from 'decimal.js-light'
 import { Field, FieldProps, Form, FormikProvider, useFormik } from 'formik'
 import * as React from 'react'
@@ -15,6 +25,7 @@ import { useBorrower } from '../../utils/usePermissions'
 import { usePool } from '../../utils/usePools'
 import { combine, max, maxPriceVariance, positiveNumber, required } from '../../utils/validation'
 import { useChargePoolFees } from './ChargeFeesFields'
+import { StyledSuccessButton } from './ExternalFinanceForm'
 import { isCashLoan, isExternalLoan, isInternalLoan } from './utils'
 
 export type CorrectionValues = {
@@ -30,6 +41,7 @@ export function CorrectionForm({ loan }: { loan: ActiveLoan }) {
   const pool = usePool(loan.poolId) as Pool
   const account = useBorrower(loan.poolId, loan.id)
   const poolFees = useChargePoolFees(loan.poolId, loan.id)
+  const [transactionSuccess, setTransactionSuccess] = React.useState(false)
   const { initial: availableFinancing } = useAvailableFinancing(loan.poolId, loan.id)
   const api = useCentrifugeApi()
   const { execute: doFinanceTransaction, isLoading: isFinanceLoading } = useCentrifugeTransaction(
@@ -82,8 +94,7 @@ export function CorrectionForm({ loan }: { loan: ActiveLoan }) {
     },
     {
       onSuccess: () => {
-        correctionForm.setFieldValue('fees', [], false)
-        correctionForm.setFieldValue('reason', '', false)
+        setTransactionSuccess(true)
       },
     }
   )
@@ -235,15 +246,18 @@ export function CorrectionForm({ loan }: { loan: ActiveLoan }) {
           </Stack>
           {poolFees.renderSummary()}
         </Stack>
-
         <Stack>
-          <Button
-            type="submit"
-            loading={isFinanceLoading}
-            disabled={!poolFees.isValid(correctionForm) || !correctionForm.isValid}
-          >
-            Adjust
-          </Button>
+          {transactionSuccess ? (
+            <StyledSuccessButton icon={<IconCheckCircle size={24} />}>Transaction successful</StyledSuccessButton>
+          ) : (
+            <Button
+              type="submit"
+              disabled={!poolFees.isValid(correctionForm) || !correctionForm.isValid}
+              icon={isFinanceLoading ? <IconClock size={24} /> : undefined}
+            >
+              {isFinanceLoading ? 'Transaction Pending' : 'Adjust'}
+            </Button>
+          )}
         </Stack>
       </Stack>
     </FormikProvider>

diff --git a/centrifuge-app/src/pages/Loan/ExternalFinanceForm.tsx b/centrifuge-app/src/pages/Loan/ExternalFinanceForm.tsx
@@ -46,7 +46,7 @@ export type FinanceValues = {
   fees: { id: string; amount: '' | number | Decimal }[]
 }
 
-const StyledSuccessButton = styled(Button)`
+export const StyledSuccessButton = styled(Button)`
   span {
     color: ${({ theme }) => theme.colors.textPrimary};
     background-color: ${({ theme }) => theme.colors.statusOkBg};

diff --git a/centrifuge-app/src/pages/Loan/ExternalRepayForm.tsx b/centrifuge-app/src/pages/Loan/ExternalRepayForm.tsx
@@ -5,7 +5,17 @@ import {
   useCentrifugeUtils,
   wrapProxyCallsForAccount,
 } from '@centrifuge/centrifuge-react'
-import { Box, Button, CurrencyInput, InlineFeedback, Shelf, Stack, Text } from '@centrifuge/fabric'
+import {
+  Box,
+  Button,
+  CurrencyInput,
+  IconCheckCircle,
+  IconClock,
+  InlineFeedback,
+  Shelf,
+  Stack,
+  Text,
+} from '@centrifuge/fabric'
 import { BN } from 'bn.js'
 import Decimal from 'decimal.js-light'
 import { Field, FieldProps, Form, FormikProvider, useFormik } from 'formik'
@@ -23,6 +33,7 @@ import { usePool } from '../../utils/usePools'
 import { combine, maxNotRequired, nonNegativeNumberNotRequired } from '../../utils/validation'
 import { useChargePoolFees } from './ChargeFeesFields'
 import { ErrorMessage } from './ErrorMessage'
+import { StyledSuccessButton } from './ExternalFinanceForm'
 import { SourceSelect } from './SourceSelect'
 
 type RepayValues = {
@@ -57,6 +68,7 @@ export function ExternalRepayForm({
   const destinationLoan = loans?.find((l) => l.id === destination) as ActiveLoan
   const displayCurrency = destination === 'reserve' ? pool.currency.symbol : 'USD'
   const utils = useCentrifugeUtils()
+  const [transactionSuccess, setTransactionSuccess] = React.useState(false)
 
   const { execute: doRepayTransaction, isLoading: isRepayLoading } = useCentrifugeTransaction(
     'Sell asset',
@@ -101,7 +113,7 @@ export function ExternalRepayForm({
       },
     {
       onSuccess: () => {
-        repayForm.resetForm()
+        setTransactionSuccess(true)
       },
     }
   )
@@ -356,20 +368,23 @@ export function ExternalRepayForm({
         </Stack>
 
         <Stack gap={1}>
-          <Button
-            type="submit"
-            disabled={
-              isRepayLoading ||
-              !poolFees.isValid(repayForm) ||
-              !repayForm.isValid ||
-              totalRepay.greaterThan(maxAvailable) ||
-              maxAvailable.eq(0) ||
-              (destination === 'reserve' && balance.lt(totalRepay))
-            }
-            loading={isRepayLoading}
-          >
-            Sell
-          </Button>
+          {transactionSuccess ? (
+            <StyledSuccessButton icon={<IconCheckCircle size={24} />}>Transaction successful</StyledSuccessButton>
+          ) : (
+            <Button
+              type="submit"
+              disabled={
+                !poolFees.isValid(repayForm) ||
+                !repayForm.isValid ||
+                totalRepay.greaterThan(maxAvailable) ||
+                maxAvailable.eq(0) ||
+                (destination === 'reserve' && balance.lt(totalRepay))
+              }
+              icon={isRepayLoading ? <IconClock size={24} /> : undefined}
+            >
+              {isRepayLoading ? 'Transaction Pending' : 'Sell'}
+            </Button>
+          )}
         </Stack>
       </Stack>
     </FormikProvider>

diff --git a/centrifuge-app/src/pages/Loan/RepayForm.tsx b/centrifuge-app/src/pages/Loan/RepayForm.tsx
@@ -14,7 +14,18 @@ import {
   useCentrifugeUtils,
   wrapProxyCallsForAccount,
 } from '@centrifuge/centrifuge-react'
-import { Box, Button, CurrencyInput, InlineFeedback, Select, Shelf, Stack, Text } from '@centrifuge/fabric'
+import {
+  Box,
+  Button,
+  CurrencyInput,
+  IconCheckCircle,
+  IconClock,
+  InlineFeedback,
+  Select,
+  Shelf,
+  Stack,
+  Text,
+} from '@centrifuge/fabric'
 import Decimal from 'decimal.js-light'
 import { Field, FieldProps, Form, FormikProvider, useFormik } from 'formik'
 import * as React from 'react'
@@ -36,6 +47,7 @@ import {
 } from '../../utils/validation'
 import { useChargePoolFees } from './ChargeFeesFields'
 import { ErrorMessage } from './ErrorMessage'
+import { StyledSuccessButton } from './ExternalFinanceForm'
 import { ExternalRepayForm } from './ExternalRepayForm'
 import { SourceSelect } from './SourceSelect'
 import { isCashLoan, isExternalLoan } from './utils'
@@ -92,6 +104,7 @@ function InternalRepayForm({
   const destinationLoan = loans?.find((l) => l.id === destination) as Loan
   const displayCurrency = destination === 'reserve' ? pool.currency.symbol : 'USD'
   const utils = useCentrifugeUtils()
+  const [transactionSuccess, setTransactionSuccess] = React.useState(false)
 
   const { execute: doRepayTransaction, isLoading: isRepayLoading } = useCentrifugeTransaction(
     isCashLoan(loan) ? 'Withdraw funds' : 'Repay asset',
@@ -137,7 +150,7 @@ function InternalRepayForm({
       },
     {
       onSuccess: () => {
-        repayForm.resetForm()
+        setTransactionSuccess(true)
       },
     }
   )
@@ -409,18 +422,22 @@ function InternalRepayForm({
           </Stack>
 
           <Stack gap={1}>
-            <Button
-              type="submit"
-              disabled={
-                !poolFees.isValid(repayForm) ||
-                !repayForm.isValid ||
-                maxAvailable.eq(0) ||
-                (destination === 'reserve' && balance.lt(totalRepay))
-              }
-              loading={isRepayLoading}
-            >
-              {isCashLoan(loan) ? 'Withdraw' : 'Repay'}
-            </Button>
+            {transactionSuccess ? (
+              <StyledSuccessButton icon={<IconCheckCircle size={24} />}>Transaction successful</StyledSuccessButton>
+            ) : (
+              <Button
+                type="submit"
+                disabled={
+                  !poolFees.isValid(repayForm) ||
+                  !repayForm.isValid ||
+                  maxAvailable.eq(0) ||
+                  (destination === 'reserve' && balance.lt(totalRepay))
+                }
+                icon={isRepayLoading ? <IconClock size={24} /> : undefined}
+              >
+                {isRepayLoading ? 'Transaction Pending' : isCashLoan(loan) ? 'Withdraw' : 'Repay'}
+              </Button>
+            )}
           </Stack>
         </Stack>
       </FormikProvider>