Fix: Prevented clicks on 'Swap' button when it's not ready to send txs (#196)

### Description

It prevents clicking the 'Swap' button on the 'Confirm Swap' state by
adding a button disable condition that checks if the txs (approval &
swap or swap only) are ready to be confirmed. When it's not ready, the
button is disabled and has the grey colour as we do for the 'Continue'
button on the 'Swap' state.

### Other changes
Fixed this case:
Sometimes, it shows the 'Sending swap transaction' text when there's no
allowance to skip approval tx (therefore, there should be two TXs,
approval and swap, and corresponding the 'Sending two transactions:
Approval and Swap' text)

### Tested
**Description:**
There are two cases to test:
1. When there are two txs - an approval and a swap.
2. When there is only one tx - a swap one.

**STR:**
1. Navigate the app and connect your wallet.
3. Fill out the form with any amount.
4. Click the 'Continue' button as soon as it's enabled.
5. Click the 'Swap' button as soon as it's enabled.

**Expected result:**
1. The tx/s are sent as soon as you click the 'Swap' button.
2. It displays the 'Sending swap transaction', with only one tx to swap
directly.
3. It displays the 'Sending two transactions: Approval and Swap', with
two txs to approve and swap.
4. Swapped successfully; the balances are updated.

### Related issues

- Fixes #issue number here

### Checklist before requesting a review

- [ ] I have performed a self-review of my own code
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] The PR title follows the
[conventions](https://www.notion.so/Git-Branching-and-Commit-Message-Conventions-18f66f7d06444cfcbac5725ffbc7c04a?pvs=4#9355048863c549ef92fe210a8a1298aa)
- [ ] I have run the [regression
tests](https://www.notion.so/Mento-Web-App-Regression-Tests-37bd43a7da8d4e38b65993320a33d557)

---------

Co-authored-by: Andrew718PLTS <[email protected]>

Author: Andrew718PLTS

src/components/buttons/3DButton.tsx

@@ -35,7 +35,7 @@ export const Button3D = ({
       disabled={isDisabled}
     >
       <span
-        className={`group font-inter outline-offset-4 cursor-pointer ${getSubstrateButtonColor({
+        className={`group font-inter outline-offset-4 cursor-pointer ${getShadowButtonColor({
           isDisabled,
           isWalletConnected,
           isError,
@@ -63,7 +63,7 @@ export const Button3D = ({
   )
 }
 
-function getSubstrateButtonColor({
+function getShadowButtonColor({
   isDisabled,
   isWalletConnected,
   isError,

src/features/swap/SwapConfirm.tsx

@@ -147,21 +147,22 @@ export function SwapConfirmCard({ formValues }: Props) {
       return
     }
 
-    if (!sendApproveTx || isApproveTxSuccess || isApproveTxLoading) {
-      logger.debug('Approve already started or finished, ignoring submit')
-      return
-    }
-
-    try {
-      logger.info('Sending approve tx')
-      const approveResult = await sendApproveTx()
-      const approveReceipt = await approveResult.wait(1)
-      toastToYourSuccess('Approve complete, starting swap', approveReceipt.transactionHash, chainId)
-      setApproveConfirmed(true)
-      logger.info(`Tx receipt received for approve: ${approveReceipt.transactionHash}`)
-    } catch (error) {
-      logger.error('Failed to approve token', error)
-      setIsModalOpen(false)
+    if (!skipApprove && sendApproveTx) {
+      try {
+        logger.info('Sending approve tx')
+        const approveResult = await sendApproveTx()
+        const approveReceipt = await approveResult.wait(1)
+        toastToYourSuccess(
+          'Approve complete, starting swap',
+          approveReceipt.transactionHash,
+          chainId
+        )
+        setApproveConfirmed(true)
+        logger.info(`Tx receipt received for approve: ${approveReceipt.transactionHash}`)
+      } catch (error) {
+        logger.error('Failed to approve token', error)
+        setIsModalOpen(false)
+      }
     }
   }
 
@@ -191,6 +192,8 @@ export function SwapConfirmCard({ formValues }: Props) {
     refetch().catch((e) => logger.error('Failed to refetch quote:', e))
   }
 
+  const isSwapReady = !sendApproveTx || isApproveTxSuccess || isApproveTxLoading
+
   return (
     <FloatingBox
       width="w-screen md:w-[432px] "
@@ -238,7 +241,7 @@ export function SwapConfirmCard({ formValues }: Props) {
       </div>
 
       <div className="flex w-full px-6 pb-6 mt-6">
-        <Button3D isFullWidth onClick={onSubmit}>
+        <Button3D isFullWidth onClick={onSubmit} isDisabled={isSwapReady}>
           Swap
         </Button3D>
       </div>
@@ -248,7 +251,7 @@ export function SwapConfirmCard({ formValues }: Props) {
         close={() => setIsModalOpen(false)}
         width="max-w-[432px]"
       >
-        <MentoLogoLoader needsApproval={needsApproval} />
+        <MentoLogoLoader skipApprove={skipApprove} />
       </Modal>
     </FloatingBox>
   )
@@ -326,7 +329,7 @@ const ChevronRight = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 )
 
-const MentoLogoLoader = ({ needsApproval }: { needsApproval: boolean }) => {
+const MentoLogoLoader = ({ skipApprove }: { skipApprove: boolean }) => {
   const { connector } = useAccount()
 
   return (
@@ -342,9 +345,7 @@ const MentoLogoLoader = ({ needsApproval }: { needsApproval: boolean }) => {
 
       <div className="my-6">
         <div className="text-sm text-center text-[#636768] dark:text-[#AAB3B6]">
-          {needsApproval
-            ? 'Sending two transactions: Approve and Swap'
-            : 'Sending swap transaction'}
+          {skipApprove ? 'Sending swap transaction' : 'Sending two transactions: Approve and Swap'}
         </div>
         <div className="mt-3 text-sm text-center text-[#636768] dark:text-[#AAB3B6]">
           {`Sign with ${connector?.name || 'wallet'} to proceed`}