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 index 13c3801ced7..c9441d95680 100644 --- 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(); const currentAccount = useCurrentStacksAccount(); - const availableUnlockedBalance = useStxAvailableUnlockedBalance(currentAccount?.address ?? ''); + const { data, isLoading: isLoadingStxBalance } = useStxCryptoAssetBalance( + currentAccount?.address ?? '' + ); + const availableUnlockedBalance = data?.unlockedBalance; return useMemo(() => { 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 index ce6e5a6b2a1..0db9930b038 100644 --- 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({ )} - + diff --git a/src/app/features/stacks-transaction-request/submit-action.tsx b/src/app/features/stacks-transaction-request/submit-action.tsx index e42728c219a..df4810b0077 100644 --- a/src/app/features/stacks-transaction-request/submit-action.tsx +++ b/src/app/features/stacks-transaction-request/submit-action.tsx @@ -9,7 +9,11 @@ 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(); @@ -17,7 +21,7 @@ export function StacksTxSubmitAction() { 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 index d598b830ac4..a549c5e79a1 100644 --- 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 - +