From e45a4d04aee0ca51305876dee0f624aa84bc6723 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Thu, 31 Oct 2024 11:45:58 +0100 Subject: [PATCH] Add loading buttons to side drawer --- .../src/pages/Loan/CorrectionForm.tsx | 36 +++++++++----- .../src/pages/Loan/ExternalFinanceForm.tsx | 2 +- .../src/pages/Loan/ExternalRepayForm.tsx | 47 ++++++++++++------- centrifuge-app/src/pages/Loan/RepayForm.tsx | 45 ++++++++++++------ 4 files changed, 88 insertions(+), 42 deletions(-) diff --git a/centrifuge-app/src/pages/Loan/CorrectionForm.tsx b/centrifuge-app/src/pages/Loan/CorrectionForm.tsx index f7045e356b..24b838db41 100644 --- 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 }) { {poolFees.renderSummary()} - - + {transactionSuccess ? ( + }>Transaction successful + ) : ( + + )} diff --git a/centrifuge-app/src/pages/Loan/ExternalFinanceForm.tsx b/centrifuge-app/src/pages/Loan/ExternalFinanceForm.tsx index b9f1da851a..da9a58140f 100644 --- 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 index cae51709c2..c286192fda 100644 --- 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({ - + {transactionSuccess ? ( + }>Transaction successful + ) : ( + + )} diff --git a/centrifuge-app/src/pages/Loan/RepayForm.tsx b/centrifuge-app/src/pages/Loan/RepayForm.tsx index 7b8bfae6d1..1c31332001 100644 --- 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({ - + {transactionSuccess ? ( + }>Transaction successful + ) : ( + + )}