fix: tx req fee error, closes #4231

leather-io · Oct 26, 2023 · 190868a · 190868a
1 parent 733e503
commit 190868a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 23 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
@@ -2,10 +2,13 @@ import { useMemo } from 'react';
 
 import { ContractCallPayload, TransactionTypes } from '@stacks/connect';
 import BigNumber from 'bignumber.js';
+import { useFormikContext } from 'formik';
+
+import { StacksTransactionFormValues } from '@shared/models/form.model';
 
 import { useDefaultRequestParams } from '@app/common/hooks/use-default-request-search-params';
 import { initialSearchParams } from '@app/common/initial-search-params';
-import { microStxToStx } from '@app/common/money/unit-conversion';
+import { stxToMicroStx } from '@app/common/money/unit-conversion';
 import { validateStacksAddress } from '@app/common/stacks-utils';
 import { TransactionErrorReason } from '@app/features/stacks-transaction-request/transaction-error/transaction-error';
 import { useCurrentStacksAccountAnchoredBalances } from '@app/query/stacks/balance/stx-balance.hooks';
@@ -21,6 +24,7 @@ export function useTransactionError() {
   const transactionRequest = useTransactionRequestState();
   const contractInterface = useContractInterface(transactionRequest as ContractCallPayload);
   const { origin } = useDefaultRequestParams();
+  const { values } = useFormikContext<StacksTransactionFormValues>();
 
   const currentAccount = useCurrentStacksAccount();
   const { data: balances } = useCurrentStacksAccountAnchoredBalances();
@@ -52,13 +56,11 @@ export function useTransactionError() {
       if (!transactionRequest.sponsored) {
         if (zeroBalance) return TransactionErrorReason.FeeInsufficientFunds;
 
-        if (transactionRequest.fee) {
-          const feeValue = microStxToStx(transactionRequest.fee);
-          if (feeValue.gte(balances?.stx.unlockedStx.amount))
-            return TransactionErrorReason.FeeInsufficientFunds;
-        }
+        const feeValue = stxToMicroStx(values.fee);
+        if (feeValue.gte(balances?.stx.unlockedStx.amount))
+          return TransactionErrorReason.FeeInsufficientFunds;
       }
     }
     return;
-  }, [contractInterface, balances, currentAccount, transactionRequest, origin]);
+  }, [origin, transactionRequest, balances, currentAccount, contractInterface, values.fee]);
 }
diff --git a/src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx b/src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx
@@ -93,14 +93,6 @@ export function StacksTransactionSigner({
 
   return (
     <Flex alignItems="center" flexDirection="column" p="loose" width="100%">
-      <PageTop />
-      <RequestingTabClosedWarningMessage />
-      <PostConditionModeWarning />
-      <TransactionError />
-      <PostConditions />
-      {transactionRequest.txType === 'contract_call' && <ContractCallDetails />}
-      {transactionRequest.txType === 'token_transfer' && <StxTransferDetails />}
-      {transactionRequest.txType === 'smart_contract' && <ContractDeployDetails />}
       <Formik
         initialValues={initialValues}
         onSubmit={onSubmit}
@@ -111,6 +103,15 @@ export function StacksTransactionSigner({
       >
         {() => (
           <>
+            <PageTop />
+            <RequestingTabClosedWarningMessage />
+            <PostConditionModeWarning />
+            <TransactionError />
+            <PostConditions />
+            {transactionRequest.txType === 'contract_call' && <ContractCallDetails />}
+            {transactionRequest.txType === 'token_transfer' && <StxTransferDetails />}
+            {transactionRequest.txType === 'smart_contract' && <ContractDeployDetails />}
+
             {!isNonceAlreadySet && <NonceSetter />}
             <FeeForm
               fees={stxFees}

diff --git a/src/app/pages/transaction-request/transaction-request.tsx b/src/app/pages/transaction-request/transaction-request.tsx
@@ -106,14 +106,6 @@ function TransactionRequestBase() {
 
   return (
     <Flex alignItems="center" flexDirection="column" p="loose" width="100%">
-      <PageTop />
-      <RequestingTabClosedWarningMessage />
-      <PostConditionModeWarning />
-      <TransactionError />
-      <PostConditions />
-      {transactionRequest.txType === 'contract_call' && <ContractCallDetails />}
-      {transactionRequest.txType === 'token_transfer' && <StxTransferDetails />}
-      {transactionRequest.txType === 'smart_contract' && <ContractDeployDetails />}
       <Formik
         initialValues={initialValues}
         onSubmit={onSubmit}
@@ -124,6 +116,15 @@ function TransactionRequestBase() {
       >
         {() => (
           <>
+            <PageTop />
+            <RequestingTabClosedWarningMessage />
+            <PostConditionModeWarning />
+            <TransactionError />
+            <PostConditions />
+            {transactionRequest.txType === 'contract_call' && <ContractCallDetails />}
+            {transactionRequest.txType === 'token_transfer' && <StxTransferDetails />}
+            {transactionRequest.txType === 'smart_contract' && <ContractDeployDetails />}
+
             <NonceSetter />
             <FeeForm fees={stxFees} />
             <EditNonceButton