import { Suspense } from 'react' ; import { useFormikContext } from 'formik' ; import { Button , ButtonProps } from '@stacks/ui' ; import { HIGH_FEE_AMOUNT_STX } from '@shared/constants' ; import { useDrawers } from '@app/common/hooks/use-drawers' ; import { LoadingKeys , useLoading } from '@app/common/hooks/use-loading' ; import { TransactionFormValues } from '@app/common/transactions/transaction-utils' ; import { isEmpty } from '@app/common/utils' ; import { ShowEditNonceAction , ShowEditNoncePlaceholder } from '@app/components/show-edit-nonce' ; import { useTransactionError } from '@app/pages/sign-transaction/hooks/use-transaction-error' ; import { TransactionSigningSelectors } from '@tests/page-objects/transaction-signing.selectors' ; function BaseConfirmButton ( props ) { return ( < Button borderRadius = "10px" py = "base" type = "submit" width = "100%" { ... props } > Confirm < /Button>); } function SubmitActionSuspense ( ) { const { handleSubmit , values , validateForm } = useFormikContext < TransactionFormValues > ( ) ; const { showHighFeeConfirmation , setShowHighFeeConfirmation } = useDrawers ( ) ; const { isLoading } = useLoading ( LoadingKeys . SUBMIT_TRANSACTION ) ; const error = useTransactionError ( ) ; const isDisabled = ! ! error ; return ( < BaseConfirmButton data - testid = { TransactionSigningSelectors . BtnConfirmTransaction } onClick = { async ( ) => { const formErrors = await validateForm ( ) ; if ( isEmpty ( formErrors ) && values . fee > HIGH_FEE_AMOUNT_STX ) { return setShowHighFeeConfirmation ( ! showHighFeeConfirmation ) ; } handleSubmit ( ) ; } } isLoading = { isLoading } isDisabled = { isDisabled } > Confirm < /BaseConfirmButton>); } export function SubmitAction ( ) { return ( < > < Suspense fallback = { < BaseConfirmButton isLoading isDisabled / > } > < SubmitActionSuspense /> < /Suspense> < Suspense fallback = { < ShowEditNoncePlaceholder / > } > < ShowEditNonceAction /> < /Suspense> < />); }