diff --git a/src/pages/bridge/Issue/IssueValidationSchema.ts b/src/pages/bridge/Issue/IssueValidationSchema.ts index 0a1607bc..7abc9f2b 100644 --- a/src/pages/bridge/Issue/IssueValidationSchema.ts +++ b/src/pages/bridge/Issue/IssueValidationSchema.ts @@ -2,7 +2,7 @@ import * as Yup from 'yup'; import { IssueFormValues } from '.'; import { transformNumber } from '../../../helpers/yup'; -export function getIssueValidationSchema(maxIssuable: number) { +export function getIssueValidationSchema(maxIssuable: number, balance: number) { return Yup.object().shape({ amount: Yup.number() .typeError('Value is invalid.') @@ -10,5 +10,8 @@ export function getIssueValidationSchema(maxIssuable: number) { .positive('You need to enter a positive number.') .required('This field is required.') .max(maxIssuable, 'The vault cannot issue that amount of the selected asset.'), + securityDeposit: Yup.number() + .transform(transformNumber) + .max(balance, "You don't have enough balance to pay the deposit fees."), }); } diff --git a/src/pages/bridge/Issue/index.tsx b/src/pages/bridge/Issue/index.tsx index 96799377..7200ca9c 100644 --- a/src/pages/bridge/Issue/index.tsx +++ b/src/pages/bridge/Issue/index.tsx @@ -14,6 +14,7 @@ import { useFeePallet } from '../../../hooks/spacewalk/fee'; import { RichIssueRequest, useIssuePallet } from '../../../hooks/spacewalk/issue'; import useBridgeSettings from '../../../hooks/spacewalk/useBridgeSettings'; import { decimalToStellarNative, nativeToDecimal } from '../../../shared/parseNumbers'; +import { useAccountBalance } from '../../../shared/useAccountBalance'; import { FeeBox } from '../FeeBox'; import { ConfirmationDialog } from './ConfirmationDialog'; import Disclaimer from './Disclaimer'; @@ -27,6 +28,7 @@ interface IssueProps { export type IssueFormValues = { amount: number; + securityDeposit: number; to: number; }; @@ -42,10 +44,12 @@ function Issue(props: IssueProps): JSX.Element { const { api } = useNodeInfoState().state; const { selectedVault, selectedAsset, setSelectedAsset, wrappedAssets } = useBridgeSettings(); const { issueFee, redeemFee, issueGriefingCollateral } = useFeePallet().getFees(); + const { balance } = useAccountBalance(); + const maxIssuable = nativeToDecimal(selectedVault?.issuableTokens || 0).toNumber(); const { handleSubmit, watch, register, formState, setValue } = useForm({ - resolver: yupResolver(getIssueValidationSchema(maxIssuable)), + resolver: yupResolver(getIssueValidationSchema(maxIssuable, parseFloat(balance || '0.0'))), }); // We watch the amount because we need to re-render the FeeBox constantly @@ -140,6 +144,10 @@ function Issue(props: IssueProps): JSX.Element { [api, getIssueRequest, requestIssueExtrinsic, selectedVault, walletAccount], ); + useMemo(() => { + setValue('securityDeposit', amount * issueGriefingCollateral.toNumber()); + }, [amount, issueGriefingCollateral]); + return (
+