fix: disable stx transfer if form is not valid

leather-io · Aug 5, 2024 · 8c9dc16 · 8c9dc16
1 parent 17d71a8
commit 8c9dc16
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
diff --git a/src/app/features/stacks-transaction-request/hooks/use-transaction-error.ts b/src/app/features/stacks-transaction-request/hooks/use-transaction-error.ts
@@ -4,7 +4,7 @@ import { TransactionTypes } from '@stacks/connect';
 import BigNumber from 'bignumber.js';
 import { useFormikContext } from 'formik';
 
-import { useGetContractInterfaceQuery, useStxAvailableUnlockedBalance } from '@leather.io/query';
+import { useGetContractInterfaceQuery, useStxCryptoAssetBalance } from '@leather.io/query';
 import { stxToMicroStx } from '@leather.io/utils';
 
 import { StacksTransactionFormValues } from '@shared/models/form.model';
@@ -27,11 +27,16 @@ export function useTransactionError() {
   const { values } = useFormikContext<StacksTransactionFormValues>();
 
   const currentAccount = useCurrentStacksAccount();
-  const availableUnlockedBalance = useStxAvailableUnlockedBalance(currentAccount?.address ?? '');
+  const { data, isLoading: isLoadingStxBalance } = useStxCryptoAssetBalance(
+    currentAccount?.address ?? ''
+  );
+  const availableUnlockedBalance = data?.unlockedBalance;
 
   return useMemo<TransactionErrorReason | void>(() => {
     if (!origin) return TransactionErrorReason.ExpiredRequest;
 
+    if (isLoadingStxBalance) return;
+
     if (!transactionRequest || !availableUnlockedBalance || !currentAccount) {
       return TransactionErrorReason.Generic;
     }
@@ -63,6 +68,7 @@ export function useTransactionError() {
     }
     return;
   }, [
+    isLoadingStxBalance,
     origin,
     transactionRequest,
     availableUnlockedBalance,

diff --git a/src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx b/src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx
@@ -10,7 +10,7 @@ import { FeeTypes } from '@leather.io/models';
 import {
   useCalculateStacksTxFees,
   useNextNonce,
-  useStxAvailableUnlockedBalance,
+  useStxCryptoAssetBalance,
 } from '@leather.io/query';
 import { Link } from '@leather.io/ui';
 import { stxToMicroStx } from '@leather.io/utils';
@@ -58,9 +58,12 @@ export function StacksTransactionSigner({
   const { data: stxFees } = useCalculateStacksTxFees(stacksTransaction);
 
   const stxAddress = useCurrentStacksAccountAddress();
-  const availableUnlockedBalance = useStxAvailableUnlockedBalance(stxAddress);
+  const { data, status: balanceQueryStatus } = useStxCryptoAssetBalance(stxAddress);
+  const availableUnlockedBalance = data?.availableUnlockedBalance;
   const navigate = useNavigate();
-  const { data: nextNonce } = useNextNonce(stxAddress);
+  const { data: nextNonce, status: nonceQueryStatus } = useNextNonce(stxAddress);
+  const canSubmit = balanceQueryStatus === 'success' && nonceQueryStatus === 'success';
+
   const { search } = useLocation();
 
   useOnMount(() => {
@@ -134,7 +137,7 @@ export function StacksTransactionSigner({
               </Link>
             )}
             <MinimalErrorMessage />
-            <StacksTxSubmitAction />
+            <StacksTxSubmitAction canSubmit={canSubmit} />
             <HighFeeDialog learnMoreUrl={HIGH_FEE_WARNING_LEARN_MORE_URL_STX} />
             <Outlet />
           </>

diff --git a/src/app/features/stacks-transaction-request/submit-action.tsx b/src/app/features/stacks-transaction-request/submit-action.tsx
@@ -9,15 +9,19 @@ import { useTransactionError } from '@app/features/stacks-transaction-request/ho
 
 import { useStacksHighFeeWarningContext } from '../stacks-high-fee-warning/stacks-high-fee-warning-container';
 
-export function StacksTxSubmitAction() {
+interface Props {
+  canSubmit: boolean;
+}
+
+export function StacksTxSubmitAction({ canSubmit }: Props) {
   const { handleSubmit, values, validateForm, isSubmitting } =
     useFormikContext<StacksTransactionFormValues>();
 
   const context = useStacksHighFeeWarningContext();
 
   const error = useTransactionError();
 
-  const isDisabled = !!error || Number(values.fee) < 0;
+  const isDisabled = !!error || Number(values.fee) < 0 || !canSubmit;
 
   async function onConfirmTransaction() {
     const formErrors = await validateForm();

diff --git a/src/app/pages/transaction-request/transaction-request.tsx b/src/app/pages/transaction-request/transaction-request.tsx
@@ -10,7 +10,7 @@ import { FeeTypes } from '@leather.io/models';
 import {
   useCalculateStacksTxFees,
   useNextNonce,
-  useStxAvailableUnlockedBalance,
+  useStxCryptoAssetBalance,
 } from '@leather.io/query';
 import { Link } from '@leather.io/ui';
 
@@ -51,8 +51,12 @@ function TransactionRequestBase() {
 
   const generateUnsignedTx = useGenerateUnsignedStacksTransaction();
   const stxAddress = useCurrentStacksAccountAddress();
-  const availableUnlockedBalance = useStxAvailableUnlockedBalance(stxAddress);
-  const { data: nextNonce } = useNextNonce(stxAddress);
+  const { data, status: balanceQueryStatus } = useStxCryptoAssetBalance(stxAddress);
+  const availableUnlockedBalance = data?.availableUnlockedBalance;
+
+  const { data: nextNonce, status: nonceQueryStatus } = useNextNonce(stxAddress);
+  const canSubmit = balanceQueryStatus === 'success' && nonceQueryStatus === 'success';
+
   const navigate = useNavigate();
   const { stacksBroadcastTransaction } = useStacksBroadcastTransaction({ token: 'STX' });
 
@@ -108,8 +112,8 @@ function TransactionRequestBase() {
           initialValues={initialValues}
           onSubmit={onSubmit}
           validateOnChange={false}
-          validateOnBlur={false}
           validateOnMount={false}
+          validateOnBlur={false}
           validationSchema={validationSchema}
         >
           {() => (
@@ -133,7 +137,7 @@ function TransactionRequestBase() {
                 Edit nonce
               </Link>
               <MinimalErrorMessage />
-              <StacksTxSubmitAction />
+              <StacksTxSubmitAction canSubmit={canSubmit} />
 
               <HighFeeDialog learnMoreUrl={HIGH_FEE_WARNING_LEARN_MORE_URL_STX} />
               <Outlet />