Improve handling of displayed transaction status (#584)

Closes #553

### What

Currently, we are not displaying transaction statuses correctly. After
completing the `ensureAllowance` transaction, we display the status
`Signed` instead of `Waiting for signature`. Additionally, when the
`ensureAllowance` transaction is rejected, we do not stop the stake
transaction, let's fix it.

### Testing

Check stake and unstake transaction statuses. Please don't merge without
tests. ⚠️

- [x] `Approving` - only for the ensure allowance transaction
- [x] `Waiting for signature` - While waiting for the signature of the
main transaction
- [x] `Signed`- for signed transactions
- [x] Reject transactions. We shouldn't display the status of the
transaction but close the action.

src/redux-state/thunks/island.ts

@@ -192,6 +192,15 @@ export const ensureAllowance = createDappAsyncThunk(
         }
       )
 
+      // Update on "parent transaction" to make it possible to track them together in the UI
+      dispatch(
+        updateTransactionStatus({
+          id,
+          status: receipt
+            ? TransactionProgressStatus.Approved
+            : TransactionProgressStatus.Failed,
+        })
+      )
       return !!receipt
     }
 
@@ -209,7 +218,7 @@ export const stakeTaho = createDappAsyncThunk(
     }: { id: string; realmContractAddress: string; amount: bigint },
     { dispatch, extra: { transactionService } }
   ) => {
-    const allowanceCorrect = await dispatch(
+    const { payload } = await dispatch(
       ensureAllowance({
         id,
         tokenAddress: TAHO_ADDRESS,
@@ -218,7 +227,7 @@ export const stakeTaho = createDappAsyncThunk(
       })
     )
 
-    if (!allowanceCorrect) {
+    if (!payload) {
       return false
     }
 
@@ -252,7 +261,7 @@ export const unstakeTaho = createDappAsyncThunk(
     },
     { dispatch, extra: { transactionService } }
   ) => {
-    const allowanceCorrect = await dispatch(
+    const { payload } = await dispatch(
       ensureAllowance({
         id,
         tokenAddress: veTokenContractAddress,
@@ -261,7 +270,7 @@ export const unstakeTaho = createDappAsyncThunk(
       })
     )
 
-    if (!allowanceCorrect) {
+    if (!payload) {
       return false
     }
 

src/shared/components/Transactions/TransactionProgress.tsx

@@ -46,10 +46,12 @@ const statusToElementProps = [
     id: "signing",
     getLabel: (status: TransactionProgressStatus): string => {
       if (status === TransactionProgressStatus.Approving) return "Approving"
+      if (status === TransactionProgressStatus.Approved) return "Signed"
 
-      return status === TransactionProgressStatus.Idle
-        ? "Waiting for signature"
-        : "Signed"
+      if (status === TransactionProgressStatus.Signing)
+        return "Waiting for signature"
+
+      return "Signed"
     },
     getStatus: createGetStatusFunction(TransactionProgressStatus.Signing),
   },

src/shared/types/transaction.ts

@@ -3,6 +3,7 @@ import { ethers } from "ethers"
 export enum TransactionProgressStatus {
   Idle,
   Approving,
+  Approved,
   Signing,
   Sending,
   Done,

src/shared/utils/transactions.ts

@@ -3,6 +3,7 @@ import { TransactionProgressStatus } from "shared/types"
 // eslint-disable-next-line import/prefer-default-export
 export const isTransactionPending = (status: TransactionProgressStatus) =>
   status === TransactionProgressStatus.Approving ||
+  status === TransactionProgressStatus.Approved ||
   status === TransactionProgressStatus.Signing ||
   status === TransactionProgressStatus.Sending