fix: new trade flow loading states

[gomesalexandre]

Description

Two birds, one stone:

1. Removes hasClickedButton heuristics in profit of poor man's form control submission state. Since we're dealing with async flows in mutations, we are actually capable of properly detecting submission states, without needing to resort to button click hacks.
2. Adds some logic to allowance/reset loading states so that we consider Tx complete a loading state, avoiding a weird transitive state where the approval Tx is complete, but the allowance hasn't been refetched and we haven't transitioned to the next step yet, meaning "Approve" button would be shown and enabled in that interim, vs. disabled and loading.

In effect, this allows for Txs to be retried as a direct side-effect of having a form submission of sorts.

Issue (if applicable)

closes #8523

Risk

High Risk PRs Require 2 approvals

What protocols, transaction types, wallets or contract interactions might be affected by this PR?

Low - new swapper flow only, and changeset pretty much aligns the logic to that of old swapper flow.

Testing

• Test with 0x as it is the one with the most stages (permit2 contract approval, permit2 EIP712 signing, sign message)
• Ensure all of the three steps, when cancelled in the wallet, can be triggered again
• Ensure loading/transition states are happy
• Additionally, test me with another swapper (say CoW) and USDT mainnet allowance reset to ensure it is also handled gracefully

Engineering

• ^

Operations

• 🏁 My feature is behind a flag and doesn't require operations testing (yet)

• ^

Screenshots (if applicable)

ZRX - all 3 steps are retry-able and loading states are happy

https://jam.dev/c/c5bc81e4-a931-4cc8-be0f-7b406d417abf

CoW USDT allowance/reset steps are happy

https://jam.dev/c/f94c1e9f-acde-43c2-a93a-4f782d18c7b4

[0xApotheosis]

One blocking comment, otherwise functionally excellent!

Can happily continue after an error at any stage:

[0xApotheosis]

🧠

[0xApotheosis]

Blocking:

Since we aren't using these anymore we'll want to remove them from the TradeFooterButtonProps and all remove all related parent logic:

diff --git a/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooter.tsx b/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooter.tsx
index 280ed52e20..1a4d655de6 100644
--- a/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooter.tsx
+++ b/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooter.tsx
@@ -1,7 +1,7 @@
 import { HStack, Skeleton, Stack, Switch } from '@chakra-ui/react'
 import type { TradeQuoteStep } from '@shapeshiftoss/swapper'
 import type { FC } from 'react'
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { Amount } from 'components/Amount/Amount'
 import { Row } from 'components/Row/Row'
 import { Text } from 'components/Text/Text'
@@ -33,7 +33,6 @@ export const TradeConfirmFooter: FC<TradeConfirmFooterProps> = ({
   activeTradeId,
 }) => {
   const [isExactAllowance, toggleIsExactAllowance] = useToggle(true)
-  const [hasClickedButton, setHasClickedButton] = useState(false)
   const { currentTradeStep } = useStepperSteps()
   const currentHopIndex = useCurrentHopIndex()
   const quoteNetworkFeeCryptoBaseUnit = tradeQuoteStep.feeData.networkFeeCryptoBaseUnit
@@ -140,8 +139,8 @@ export const TradeConfirmFooter: FC<TradeConfirmFooterProps> = ({
   }, [tradeQuoteStep])

   const isApprovalButtonDisabled = useMemo(() => {
-    return isAllowanceApprovalLoading || hasClickedButton
-  }, [isAllowanceApprovalLoading, hasClickedButton])
+    return isAllowanceApprovalLoading
+  }, [isAllowanceApprovalLoading])

   const tradeAllowanceStepSummary = useMemo(() => {
     return (
@@ -276,8 +275,6 @@ export const TradeConfirmFooter: FC<TradeConfirmFooterProps> = ({
         currentHopIndex={currentHopIndex}
         activeTradeId={activeTradeId}
         isExactAllowance={isExactAllowance}
-        hasClickedButton={hasClickedButton}
-        setHasClickedButton={setHasClickedButton}
         isLoading={isNetworkFeeCryptoBaseUnitLoading || isNetworkFeeCryptoBaseUnitRefetching}
       />
     )
@@ -286,7 +283,6 @@ export const TradeConfirmFooter: FC<TradeConfirmFooterProps> = ({
     currentHopIndex,
     activeTradeId,
     isExactAllowance,
-    hasClickedButton,
     isNetworkFeeCryptoBaseUnitLoading,
     isNetworkFeeCryptoBaseUnitRefetching,
   ])
diff --git a/src/components/MultiHopTrade/components/TradeConfirm/TradeFooterButton.tsx b/src/components/MultiHopTrade/components/TradeConfirm/TradeFooterButton.tsx
index c00a694dda..0e2e616dd6 100644
--- a/src/components/MultiHopTrade/components/TradeConfirm/TradeFooterButton.tsx
+++ b/src/components/MultiHopTrade/components/TradeConfirm/TradeFooterButton.tsx
@@ -42,8 +42,6 @@ type TradeFooterButtonProps = {
   currentHopIndex: SupportedTradeQuoteStepIndex
   activeTradeId: string
   isExactAllowance: boolean
-  hasClickedButton: boolean
-  setHasClickedButton: (hasClickedButton: boolean) => void
   isLoading?: boolean
 }

[gomesalexandre]

Nice one @0xApotheosis! Cleaned up in cab6ce3, and retested:
https://jam.dev/c/0aa3d29f-4776-4b48-a2bd-d2c930e5d195