Add security deposit validation when issuing (#342)

src/pages/bridge/Issue/IssueValidationSchema.ts

@@ -2,13 +2,16 @@ 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<IssueFormValues>().shape({
     amount: Yup.number()
       .typeError('Value is invalid.')
       .transform(transformNumber)
       .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."),
   });
 }

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<IssueFormValues>({
-    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 (
     <div className="flex items-center justify-center h-full space-walk py-4">
       <ConfirmationDialog
@@ -156,8 +164,11 @@ function Issue(props: IssueProps): JSX.Element {
             setSelectedAsset={setSelectedAsset}
             selectedAsset={selectedAsset}
             network="Stellar"
-            error={formState.errors.amount?.message?.toString()}
+            error={
+              formState.errors.amount?.message?.toString() || formState.errors.securityDeposit?.message?.toString()
+            }
           />
+          <input type="hidden" {...register('securityDeposit')} />
           <label className="label flex align-center">
             <span className="text-sm">{`Max issuable: ${nativeToDecimal(
               selectedVault?.issuableTokens?.toString() || 0,