Fix: Prevented infinity swap tx sending on user rejection (#204)

### Description

It prevents infinity swap tx sending on user rejection by adding the
`swapRejectedRef` setting when it's been rejected by the user (checking
via error message).

**Additionally, to read:**
The `useState` doesn't work in this case because the React state updates
asynchronously, so useEffect does not immediately pick up the change in
isSwapRejected during the first rejection (that's why I had a case when
the first rejection is ignored).

### Other changes
None

### Tested
Reject when there's an approval and a swap TXs.
1. Select tokens to have an approval TX first (the eXOF would be a good
choice).
2. Click the 'Continue' button.
3. Wait until the 'Approve ${token}' button is enabled to click.
4. Click the  'Approve ${token}' button.
5. Approve the approval TX.
6. Reject the swap TX.

Reject when there's no approval TX.
1. Select tokens to avoid an approval TX (a precondition is to swap some
tokens before).
2. Click the 'Continue' button.
3. Wait until the 'Swap' button is enabled to click.
4. Click the  'Swap' button.
5. Reject the swap TX.


### 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)

Author: Andrew718PLTS

src/features/swap/SwapConfirm.tsx

@@ -1,5 +1,5 @@
 import Lottie from 'lottie-react'
-import { SVGProps, useEffect, useState } from 'react'
+import { SVGProps, useEffect, useRef, useState } from 'react'
 import mentoLoaderBlue from 'src/animations/Mentoloader_blue.json'
 import mentoLoaderGreen from 'src/animations/Mentoloader_green.json'
 import { toastToYourSuccess } from 'src/components/TxSuccessToast'
@@ -150,7 +150,7 @@ export function SwapConfirmCard({ formValues }: Props) {
         const approveResult = await sendApproveTx()
         const approveReceipt = await approveResult.wait(1)
         toastToYourSuccess(
-          'Approve complete, starting swap',
+          'Approve complete! Sending swap tx',
           approveReceipt.transactionHash,
           chainId
         )
@@ -163,19 +163,32 @@ export function SwapConfirmCard({ formValues }: Props) {
     }
   }
 
+  const swapRejectedRef = useRef(false)
+
   // TODO find a way to have this trigger from the onSubmit
   useEffect(() => {
-    if (isSwapTxLoading || isSwapTxSuccess || !isApproveTxSuccess || !sendSwapTx) return
+    if (
+      isSwapTxLoading ||
+      isSwapTxSuccess ||
+      !isApproveTxSuccess ||
+      !sendSwapTx ||
+      swapRejectedRef.current
+    )
+      return
     logger.info('Sending swap tx')
     sendSwapTx()
       .then((swapResult) => swapResult.wait(1))
       .then((swapReceipt) => {
         logger.info(`Tx receipt received for swap: ${swapReceipt.transactionHash}`)
         toastToYourSuccess('Swap Complete!', swapReceipt.transactionHash, chainId)
         dispatch(setFormValues(null))
+        swapRejectedRef.current = false
       })
-      .catch((e) => {
-        logger.error('Swap failure:', e)
+      .catch((error) => {
+        logger.error('Swap failure:', error)
+        if (error.message === 'User rejected request') {
+          swapRejectedRef.current = true
+        }
       })
       .finally(() => setIsModalOpen(false))
   }, [isApproveTxSuccess, isSwapTxLoading, isSwapTxSuccess, sendSwapTx, chainId, dispatch])