diff --git a/packages/e2e-contract-tests/playwright/e2e/DepositHalfEth.test.ts b/packages/e2e-contract-tests/playwright/e2e/DepositHalfEth.test.ts
index bafec20f3f..d3c64e89f9 100644
--- a/packages/e2e-contract-tests/playwright/e2e/DepositHalfEth.test.ts
+++ b/packages/e2e-contract-tests/playwright/e2e/DepositHalfEth.test.ts
@@ -54,7 +54,11 @@ test.describe('Deposit Half ETH', () => {
 
     const depositHalfButton = getButtonByText(page, 'Deposit Half ETH', true);
 
-    await page.waitForTimeout(3000);
+    await expect
+      .poll(() => depositHalfButton.isEnabled().catch(() => false), {
+        timeout: 15000,
+      })
+      .toBeTruthy();
     await depositHalfButton.click();
 
     const walletNotificationPage =
diff --git a/packages/e2e-contract-tests/playwright/e2e/ForwardAndMintMulticall.test.ts b/packages/e2e-contract-tests/playwright/e2e/ForwardAndMintMulticall.test.ts
index 76ccba6979..25913e97ab 100644
--- a/packages/e2e-contract-tests/playwright/e2e/ForwardAndMintMulticall.test.ts
+++ b/packages/e2e-contract-tests/playwright/e2e/ForwardAndMintMulticall.test.ts
@@ -62,7 +62,11 @@ test.describe('Forward and Mint Multicall', () => {
       page,
       'Deposit And Mint Multicall'
     );
-    await page.waitForTimeout(2500);
+    await expect
+      .poll(() => forwardHalfAndMintButton.isEnabled().catch(() => false), {
+        timeout: 15000,
+      })
+      .toBeTruthy();
     await forwardHalfAndMintButton.click();
 
     const walletNotificationPage =
diff --git a/packages/e2e-contract-tests/playwright/e2e/ForwardEth.test.ts b/packages/e2e-contract-tests/playwright/e2e/ForwardEth.test.ts
index 0b499bbe0f..2a81145f02 100644
--- a/packages/e2e-contract-tests/playwright/e2e/ForwardEth.test.ts
+++ b/packages/e2e-contract-tests/playwright/e2e/ForwardEth.test.ts
@@ -52,7 +52,11 @@ test.describe('Forward Eth', () => {
     await forwardEthInput.fill(forwardEthAmount);
 
     const forwardEthButton = getButtonByText(page, 'Forward ETH');
-    await page.waitForTimeout(2500);
+    await expect
+      .poll(() => forwardEthButton.isEnabled().catch(() => false), {
+        timeout: 15000,
+      })
+      .toBeTruthy();
     await forwardEthButton.click();
 
     const walletNotificationPage =
diff --git a/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndExternalMint.test.ts b/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndExternalMint.test.ts
index 3f3aa981d7..cf409fc7e5 100644
--- a/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndExternalMint.test.ts
+++ b/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndExternalMint.test.ts
@@ -65,7 +65,11 @@ test.describe('Forward Half ETH and Mint External Custom Asset', () => {
       page,
       'Forward Half And External Mint'
     );
-    await page.waitForTimeout(2500);
+    await expect
+      .poll(() => forwardHalfAndMintButton.isEnabled().catch(() => false), {
+        timeout: 15000,
+      })
+      .toBeTruthy();
     await forwardHalfAndMintButton.click();
 
     const walletNotificationPage =
diff --git a/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndMint.test.ts b/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndMint.test.ts
index c11e69ed40..9fee610d35 100644
--- a/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndMint.test.ts
+++ b/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndMint.test.ts
@@ -63,7 +63,11 @@ test.describe('Forward Half ETH and Mint Custom Asset', () => {
       page,
       'Forward Half And Mint'
     );
-    await page.waitForTimeout(2500);
+    await expect
+      .poll(() => forwardHalfAndMintButton.isEnabled().catch(() => false), {
+        timeout: 15000,
+      })
+      .toBeTruthy();
     await forwardHalfAndMintButton.click();
 
     const walletNotificationPage =
diff --git a/packages/e2e-contract-tests/playwright/e2e/ForwardHalfCustomAsset.test.ts b/packages/e2e-contract-tests/playwright/e2e/ForwardHalfCustomAsset.test.ts
index d9d2f978df..64b6e3df60 100644
--- a/packages/e2e-contract-tests/playwright/e2e/ForwardHalfCustomAsset.test.ts
+++ b/packages/e2e-contract-tests/playwright/e2e/ForwardHalfCustomAsset.test.ts
@@ -76,7 +76,11 @@ test.describe('Forward Half Custom Asset', () => {
       page,
       'Forward Half Custom Asset'
     );
-    await page.waitForTimeout(2500);
+    await expect
+      .poll(() => forwardHalfCustomAssetButton.isEnabled().catch(() => false), {
+        timeout: 15000,
+      })
+      .toBeTruthy();
     await forwardHalfCustomAssetButton.click();
 
     const walletNotificationPage =
diff --git a/packages/e2e-contract-tests/playwright/e2e/MintAsset.test.ts b/packages/e2e-contract-tests/playwright/e2e/MintAsset.test.ts
index 56cc1ec8bb..6fabe8752c 100644
--- a/packages/e2e-contract-tests/playwright/e2e/MintAsset.test.ts
+++ b/packages/e2e-contract-tests/playwright/e2e/MintAsset.test.ts
@@ -54,7 +54,9 @@ test.describe('Mint Assets', () => {
     await mintInput.fill(mintAmount);
 
     const mintButton = getButtonByText(page, 'Mint', true);
-    await page.waitForTimeout(3000);
+    await expect
+      .poll(() => mintButton.isEnabled().catch(() => false), { timeout: 15000 })
+      .toBeTruthy();
     await mintButton.click();
 
     // test asset is correct
@@ -126,7 +128,9 @@ test.describe('Mint Assets', () => {
     await decimalsInput.fill(decimals);
 
     const mintButton = getButtonByText(page, 'Mint Asset configuration');
-    await page.waitForTimeout(3000);
+    await expect
+      .poll(() => mintButton.isEnabled().catch(() => false), { timeout: 15000 })
+      .toBeTruthy();
     await mintButton.click();
 
     // test asset is correct
diff --git a/packages/e2e-contract-tests/playwright/e2e/utils/contract.ts b/packages/e2e-contract-tests/playwright/e2e/utils/contract.ts
index b877da6b37..ee450339ba 100644
--- a/packages/e2e-contract-tests/playwright/e2e/utils/contract.ts
+++ b/packages/e2e-contract-tests/playwright/e2e/utils/contract.ts
@@ -1,5 +1,10 @@
 import type { FuelWalletTestHelper } from '@fuels/playwright-utils';
-import { getButtonByText, getByAriaLabel } from '@fuels/playwright-utils';
+import {
+  expect,
+  getButtonByText,
+  getByAriaLabel,
+  hasText,
+} from '@fuels/playwright-utils';
 import type { Page } from '@playwright/test';
 
 export const connect = async (
@@ -12,5 +17,14 @@ export const connect = async (
   await getByAriaLabel(page, `Connect to ${walletName}`, true).click();
   await fuelWalletTestHelper.walletConnect();
 
+  await expect
+    .poll(
+      () =>
+        hasText(page, 'Status: Connected')
+          .then(() => true)
+          .catch(() => false),
+      { timeout: 15000 }
+    )
+    .toBeTruthy();
   await page.waitForTimeout(3000);
 };
diff --git a/packages/e2e-contract-tests/src/components/AssetConfigurationCard.tsx b/packages/e2e-contract-tests/src/components/AssetConfigurationCard.tsx
index 0bf91f9c19..b1a54b31bf 100644
--- a/packages/e2e-contract-tests/src/components/AssetConfigurationCard.tsx
+++ b/packages/e2e-contract-tests/src/components/AssetConfigurationCard.tsx
@@ -3,6 +3,7 @@ import { bn } from 'fuels';
 import { useState } from 'react';
 
 import { mint } from '../contract_interactions';
+import { useAction } from '../hooks/useAction';
 
 export const AssetConfigurationCard = () => {
   const [assetData, setAssetData] = useState({
@@ -11,7 +12,28 @@ export const AssetConfigurationCard = () => {
     decimals: '',
   });
   const { account } = useAccount();
-  const wallet = useWallet(account);
+  const wallet = useWallet({ account });
+  const { disabled, execute, error } = useAction({
+    isValid:
+      !!wallet &&
+      !!assetData.amount &&
+      !!assetData.subId &&
+      !!assetData.decimals,
+    action: async () => {
+      if (
+        wallet.wallet &&
+        assetData.amount &&
+        assetData.subId &&
+        assetData.decimals
+      ) {
+        await mint({
+          wallet: wallet.wallet!,
+          amount: bn.parseUnits(assetData.amount, Number(assetData.decimals)),
+          subId: assetData.subId,
+        });
+      }
+    },
+  });
 
   return (
     <div>
@@ -47,23 +69,10 @@ export const AssetConfigurationCard = () => {
           }
         />
         <br />
-        <button
-          type="button"
-          onClick={async () => {
-            if (wallet.wallet) {
-              await mint({
-                wallet: wallet.wallet,
-                amount: bn.parseUnits(
-                  assetData.amount,
-                  Number(assetData.decimals)
-                ),
-                subId: assetData.subId,
-              });
-            }
-          }}
-        >
+        <button type="button" disabled={disabled} onClick={execute}>
           Mint Asset configuration
         </button>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
         <hr />
       </div>
     </div>
diff --git a/packages/e2e-contract-tests/src/components/DepositAndMintMultiCall.tsx b/packages/e2e-contract-tests/src/components/DepositAndMintMultiCall.tsx
index 0176234781..71e00b4f8e 100644
--- a/packages/e2e-contract-tests/src/components/DepositAndMintMultiCall.tsx
+++ b/packages/e2e-contract-tests/src/components/DepositAndMintMultiCall.tsx
@@ -3,14 +3,29 @@ import { bn } from 'fuels';
 import { useState } from 'react';
 
 import { depositAndMintMultiCall } from '../contract_interactions';
+import { useAction } from '../hooks/useAction';
 import { useBaseAssetId } from '../hooks/useBaseAssetId';
 
 export const DepositAndMintMultiCalls = () => {
   const [forwardAmount, setForwardAmount] = useState<string>('');
   const [mintAmount, setMintAmount] = useState<string>('');
   const { account } = useAccount();
-  const wallet = useWallet(account);
+  const wallet = useWallet({ account });
   const baseAssetId = useBaseAssetId();
+  const { disabled, execute, error } = useAction({
+    isValid: !!baseAssetId && !!wallet && !!forwardAmount && !!mintAmount,
+    action: async () => {
+      if (baseAssetId && wallet.wallet && mintAmount && forwardAmount) {
+        await depositAndMintMultiCall({
+          wallet: wallet.wallet!,
+          forwardAmount: bn.parseUnits(forwardAmount),
+          mintAmount: bn.parseUnits(mintAmount, 1).div(10),
+          assetId: baseAssetId,
+          baseAssetId,
+        });
+      }
+    },
+  });
 
   return (
     <div>
@@ -36,23 +51,10 @@ export const DepositAndMintMultiCalls = () => {
           value={mintAmount}
         />
         <br />
-        <button
-          type="button"
-          disabled={!baseAssetId}
-          onClick={async () => {
-            if (baseAssetId && wallet.wallet && mintAmount && forwardAmount) {
-              await depositAndMintMultiCall({
-                wallet: wallet.wallet,
-                forwardAmount: bn.parseUnits(forwardAmount),
-                mintAmount: bn.parseUnits(mintAmount, 1).div(10),
-                assetId: baseAssetId,
-                baseAssetId,
-              });
-            }
-          }}
-        >
+        <button type="button" disabled={disabled} onClick={execute}>
           Deposit And Mint Multicall
         </button>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
         <hr />
       </div>
     </div>
diff --git a/packages/e2e-contract-tests/src/components/DepositHalfEthCard.tsx b/packages/e2e-contract-tests/src/components/DepositHalfEthCard.tsx
index afdd4c4d30..59b4eb5574 100644
--- a/packages/e2e-contract-tests/src/components/DepositHalfEthCard.tsx
+++ b/packages/e2e-contract-tests/src/components/DepositHalfEthCard.tsx
@@ -3,13 +3,26 @@ import { bn } from 'fuels';
 import { useState } from 'react';
 
 import { depositHalf } from '../contract_interactions';
+import { useAction } from '../hooks/useAction';
 import { useBaseAssetId } from '../hooks/useBaseAssetId';
 
 export const DepositHalfEthCard = () => {
   const [amount, setAmount] = useState<string>('');
   const { account } = useAccount();
-  const wallet = useWallet(account);
+  const wallet = useWallet({ account });
   const baseAssetId = useBaseAssetId();
+  const { disabled, execute, error } = useAction({
+    isValid: !!baseAssetId && !!wallet && !!amount,
+    action: async () => {
+      if (baseAssetId && wallet.wallet && amount) {
+        await depositHalf({
+          wallet: wallet.wallet!,
+          amount: bn.parseUnits(amount),
+          assetId: baseAssetId,
+        });
+      }
+    },
+  });
 
   return (
     <div>
@@ -24,21 +37,10 @@ export const DepositHalfEthCard = () => {
           value={amount}
         />
         <br />
-        <button
-          type="button"
-          disabled={!baseAssetId}
-          onClick={async () => {
-            if (baseAssetId && wallet.wallet && amount) {
-              await depositHalf({
-                wallet: wallet.wallet,
-                amount: bn.parseUnits(amount),
-                assetId: baseAssetId,
-              });
-            }
-          }}
-        >
+        <button type="button" disabled={disabled} onClick={execute}>
           Deposit Half ETH
         </button>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
         <hr />
       </div>
     </div>
diff --git a/packages/e2e-contract-tests/src/components/ForwardCustomAssetCard.tsx b/packages/e2e-contract-tests/src/components/ForwardCustomAssetCard.tsx
index e082463434..9e4ee1e630 100644
--- a/packages/e2e-contract-tests/src/components/ForwardCustomAssetCard.tsx
+++ b/packages/e2e-contract-tests/src/components/ForwardCustomAssetCard.tsx
@@ -4,17 +4,30 @@ import { useState } from 'react';
 
 import { MAIN_CONTRACT_ID } from '../config';
 import { deposit } from '../contract_interactions';
+import { useAction } from '../hooks/useAction';
 import { useBaseAssetId } from '../hooks/useBaseAssetId';
 import { calculateAssetId } from '../utils';
 
 export const ForwardCustomAssetCard = () => {
   const [amount, setAmount] = useState<string>('');
   const { account } = useAccount();
-  const wallet = useWallet(account);
+  const wallet = useWallet({ account });
 
   const baseAssetId = useBaseAssetId();
   const assetId =
     !!baseAssetId && calculateAssetId(MAIN_CONTRACT_ID, baseAssetId);
+  const { disabled, execute, error } = useAction({
+    isValid: !!baseAssetId && !!wallet && !!amount,
+    action: async () => {
+      if (assetId && wallet.wallet && amount) {
+        await deposit({
+          wallet: wallet.wallet!,
+          amount: bn.parseUnits(amount, 1).div(10),
+          assetId,
+        });
+      }
+    },
+  });
 
   return (
     <div>
@@ -27,21 +40,10 @@ export const ForwardCustomAssetCard = () => {
           value={amount}
         />
         <br />
-        <button
-          type="button"
-          disabled={!assetId}
-          onClick={async () => {
-            if (assetId && wallet.wallet && amount) {
-              await deposit({
-                wallet: wallet.wallet,
-                amount: bn.parseUnits(amount, 1).div(10),
-                assetId,
-              });
-            }
-          }}
-        >
+        <button type="button" disabled={disabled} onClick={execute}>
           Forward Custom Asset
         </button>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
         <hr />
       </div>
     </div>
diff --git a/packages/e2e-contract-tests/src/components/ForwardEthCard.tsx b/packages/e2e-contract-tests/src/components/ForwardEthCard.tsx
index 0d1dc095fc..99002ee509 100644
--- a/packages/e2e-contract-tests/src/components/ForwardEthCard.tsx
+++ b/packages/e2e-contract-tests/src/components/ForwardEthCard.tsx
@@ -3,14 +3,26 @@ import { bn } from 'fuels';
 import { useState } from 'react';
 
 import { deposit } from '../contract_interactions';
+import { useAction } from '../hooks/useAction';
 import { useBaseAssetId } from '../hooks/useBaseAssetId';
 
 export const ForwardEthCard = () => {
   const [amount, setAmount] = useState<string>('');
   const { account } = useAccount();
-  const wallet = useWallet(account);
+  const wallet = useWallet({ account });
   const baseAssetId = useBaseAssetId();
 
+  const { disabled, execute, error } = useAction({
+    isValid: !!baseAssetId && !!wallet && !!amount,
+    action: async () => {
+      await deposit({
+        wallet: wallet.wallet!,
+        amount: bn.parseUnits(amount),
+        assetId: baseAssetId,
+      });
+    },
+  });
+
   return (
     <div>
       <p>Forward ETH</p>
@@ -22,21 +34,10 @@ export const ForwardEthCard = () => {
           value={amount}
         />
         <br />
-        <button
-          type="button"
-          disabled={!baseAssetId}
-          onClick={async () => {
-            if (baseAssetId && wallet.wallet && amount) {
-              await deposit({
-                wallet: wallet.wallet,
-                amount: bn.parseUnits(amount),
-                assetId: baseAssetId,
-              });
-            }
-          }}
-        >
+        <button type="button" disabled={disabled} onClick={execute}>
           Forward ETH
         </button>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
         <hr />
       </div>
     </div>
diff --git a/packages/e2e-contract-tests/src/components/ForwardHalfAndExternalMintCard.tsx b/packages/e2e-contract-tests/src/components/ForwardHalfAndExternalMintCard.tsx
index 4ee6f831f9..a5e7b08f6e 100644
--- a/packages/e2e-contract-tests/src/components/ForwardHalfAndExternalMintCard.tsx
+++ b/packages/e2e-contract-tests/src/components/ForwardHalfAndExternalMintCard.tsx
@@ -3,15 +3,29 @@ import { bn } from 'fuels';
 import { useState } from 'react';
 
 import { depositHalfAndExternalMint } from '../contract_interactions';
+import { useAction } from '../hooks/useAction';
 import { useBaseAssetId } from '../hooks/useBaseAssetId';
 
 export const ForwardHalfAndExternalMintCard = () => {
   const [forwardAmount, setForwardAmount] = useState<string>('');
   const [mintAmount, setMintAmount] = useState<string>('');
   const { account } = useAccount();
-  const wallet = useWallet(account);
+  const wallet = useWallet({ account });
   const baseAssetId = useBaseAssetId();
 
+  const { disabled, execute, error } = useAction({
+    isValid: !!baseAssetId && !!wallet && !!forwardAmount && !!mintAmount,
+    action: async () => {
+      await depositHalfAndExternalMint({
+        wallet: wallet.wallet!,
+        forwardAmount: bn.parseUnits(forwardAmount),
+        mintAmount: bn.parseUnits(mintAmount, 1).div(10),
+        assetId: baseAssetId,
+        baseAssetId,
+      });
+    },
+  });
+
   return (
     <div>
       <p>Forward Half and External Mint</p>
@@ -32,23 +46,10 @@ export const ForwardHalfAndExternalMintCard = () => {
           value={mintAmount}
         />
         <br />
-        <button
-          type="button"
-          disabled={!baseAssetId}
-          onClick={async () => {
-            if (baseAssetId && wallet.wallet && mintAmount && forwardAmount) {
-              await depositHalfAndExternalMint({
-                wallet: wallet.wallet,
-                forwardAmount: bn.parseUnits(forwardAmount),
-                mintAmount: bn.parseUnits(mintAmount, 1).div(10),
-                assetId: baseAssetId,
-                baseAssetId,
-              });
-            }
-          }}
-        >
+        <button type="button" disabled={disabled} onClick={execute}>
           Forward Half And External Mint
         </button>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
         <hr />
       </div>
     </div>
diff --git a/packages/e2e-contract-tests/src/components/ForwardHalfAndMintCard.tsx b/packages/e2e-contract-tests/src/components/ForwardHalfAndMintCard.tsx
index b345f74418..413b895fea 100644
--- a/packages/e2e-contract-tests/src/components/ForwardHalfAndMintCard.tsx
+++ b/packages/e2e-contract-tests/src/components/ForwardHalfAndMintCard.tsx
@@ -3,15 +3,29 @@ import { bn } from 'fuels';
 import { useState } from 'react';
 
 import { depositHalfAndMint } from '../contract_interactions';
+import { useAction } from '../hooks/useAction';
 import { useBaseAssetId } from '../hooks/useBaseAssetId';
 
 export const ForwardHalfAndMintCard = () => {
   const [forwardAmount, setForwardAmount] = useState<string>('');
   const [mintAmount, setMintAmount] = useState<string>('');
   const { account } = useAccount();
-  const wallet = useWallet(account);
+  const wallet = useWallet({ account });
   const baseAssetId = useBaseAssetId();
 
+  const { disabled, execute, error } = useAction({
+    isValid: !!baseAssetId && !!wallet && !!forwardAmount && !!mintAmount,
+    action: async () => {
+      await depositHalfAndMint({
+        wallet: wallet.wallet!,
+        forwardAmount: bn.parseUnits(forwardAmount),
+        mintAmount: bn.parseUnits(mintAmount, 1).div(10),
+        assetId: baseAssetId,
+        baseAssetId,
+      });
+    },
+  });
+
   return (
     <div>
       <p>Forward Half and Mint</p>
@@ -32,23 +46,10 @@ export const ForwardHalfAndMintCard = () => {
           value={mintAmount}
         />
         <br />
-        <button
-          type="button"
-          disabled={!baseAssetId}
-          onClick={async () => {
-            if (baseAssetId && wallet.wallet && mintAmount && forwardAmount) {
-              await depositHalfAndMint({
-                wallet: wallet.wallet,
-                forwardAmount: bn.parseUnits(forwardAmount),
-                mintAmount: bn.parseUnits(mintAmount, 1).div(10),
-                assetId: baseAssetId,
-                baseAssetId,
-              });
-            }
-          }}
-        >
+        <button type="button" disabled={disabled} onClick={execute}>
           Forward Half And Mint
         </button>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
         <hr />
       </div>
     </div>
diff --git a/packages/e2e-contract-tests/src/components/ForwardHalfCustomAssetCard.tsx b/packages/e2e-contract-tests/src/components/ForwardHalfCustomAssetCard.tsx
index a27b660502..f1656ad2f8 100644
--- a/packages/e2e-contract-tests/src/components/ForwardHalfCustomAssetCard.tsx
+++ b/packages/e2e-contract-tests/src/components/ForwardHalfCustomAssetCard.tsx
@@ -4,15 +4,28 @@ import { useState } from 'react';
 
 import { MAIN_CONTRACT_ID } from '../config';
 import { depositHalf } from '../contract_interactions';
+import { useAction } from '../hooks/useAction';
 import { useBaseAssetId } from '../hooks/useBaseAssetId';
 import { calculateAssetId } from '../utils';
 
 export const ForwardHalfCustomAssetCard = () => {
   const [amount, setAmount] = useState<string>('');
   const { account } = useAccount();
-  const wallet = useWallet(account);
+  const wallet = useWallet({ account });
 
   const baseAssetId = useBaseAssetId();
+  const { disabled, execute, error } = useAction({
+    isValid: !!baseAssetId && !!wallet && !!amount,
+    action: async () => {
+      if (assetId && wallet.wallet && amount) {
+        await depositHalf({
+          wallet: wallet.wallet!,
+          amount: bn.parseUnits(amount, 1).div(10),
+          assetId,
+        });
+      }
+    },
+  });
 
   const assetId =
     !!baseAssetId && calculateAssetId(MAIN_CONTRACT_ID, baseAssetId);
@@ -28,21 +41,10 @@ export const ForwardHalfCustomAssetCard = () => {
           value={amount}
         />
         <br />
-        <button
-          type="button"
-          disabled={!baseAssetId}
-          onClick={async () => {
-            if (assetId && wallet.wallet && amount) {
-              await depositHalf({
-                wallet: wallet.wallet,
-                amount: bn.parseUnits(amount, 1).div(10),
-                assetId,
-              });
-            }
-          }}
-        >
+        <button type="button" disabled={disabled} onClick={execute}>
           Forward Half Custom Asset
         </button>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
         <hr />
       </div>
     </div>
diff --git a/packages/e2e-contract-tests/src/components/Header.tsx b/packages/e2e-contract-tests/src/components/Header.tsx
index 485ad95e0d..f6b597f571 100644
--- a/packages/e2e-contract-tests/src/components/Header.tsx
+++ b/packages/e2e-contract-tests/src/components/Header.tsx
@@ -1,11 +1,14 @@
 import { useConnectUI } from '@fuels/react';
 
 export const Header = () => {
-  const { connect } = useConnectUI();
+  const { connect, isConnected } = useConnectUI();
 
   return (
-    <button type="button" onClick={connect}>
-      Connect
-    </button>
+    <>
+      <button type="button" onClick={connect}>
+        {isConnected ? 'Reconnect' : 'Connect'}
+      </button>
+      <p>Status: {isConnected ? 'Connected' : 'Disconnected'}</p>
+    </>
   );
 };
diff --git a/packages/e2e-contract-tests/src/components/MintAssetCard.tsx b/packages/e2e-contract-tests/src/components/MintAssetCard.tsx
index 14087fab06..090bee8b12 100644
--- a/packages/e2e-contract-tests/src/components/MintAssetCard.tsx
+++ b/packages/e2e-contract-tests/src/components/MintAssetCard.tsx
@@ -3,14 +3,26 @@ import { bn } from 'fuels';
 import { useState } from 'react';
 
 import { mint } from '../contract_interactions';
+import { useAction } from '../hooks/useAction';
 import { useBaseAssetId } from '../hooks/useBaseAssetId';
 
 export const MintAssetCard = () => {
   const [amount, setAmount] = useState<string>('');
   const { account } = useAccount();
-  const { wallet } = useWallet(account);
+  const { wallet } = useWallet({ account });
   const baseAssetId = useBaseAssetId();
 
+  const { disabled, execute, error } = useAction({
+    isValid: !!baseAssetId && !!wallet && !!amount,
+    action: async () => {
+      await mint({
+        wallet: wallet!,
+        amount: bn.parseUnits(amount, 1).div(10),
+        subId: baseAssetId,
+      });
+    },
+  });
+
   return (
     <div>
       <p>Mint Custom Asset</p>
@@ -24,21 +36,10 @@ export const MintAssetCard = () => {
           value={amount}
         />
         <br />
-        <button
-          type="button"
-          disabled={!baseAssetId}
-          onClick={async () => {
-            if (baseAssetId && wallet && amount) {
-              await mint({
-                wallet,
-                amount: bn.parseUnits(amount, 1).div(10),
-                subId: baseAssetId,
-              });
-            }
-          }}
-        >
+        <button type="button" disabled={disabled} onClick={execute}>
           Mint
         </button>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
         <hr />
       </div>
     </div>
diff --git a/packages/e2e-contract-tests/src/hooks/useAction.ts b/packages/e2e-contract-tests/src/hooks/useAction.ts
new file mode 100644
index 0000000000..1985bfcf54
--- /dev/null
+++ b/packages/e2e-contract-tests/src/hooks/useAction.ts
@@ -0,0 +1,32 @@
+import { useCallback, useState } from 'react';
+
+type UseActionParams = {
+  isValid: boolean;
+  action: () => Promise<void>;
+};
+
+export const useAction = ({ isValid, action }: UseActionParams) => {
+  const [error, setError] = useState<string | null>(null);
+  const [isExecuting, setIsExecuting] = useState<boolean>(false);
+
+  const execute = useCallback(async () => {
+    if (!isValid) return;
+    setIsExecuting(true);
+    setError(null);
+    try {
+      await action();
+    } catch (err) {
+      setError(
+        (err as Error | undefined)?.message || 'An unexpected error occurred.'
+      );
+    } finally {
+      setIsExecuting(false);
+    }
+  }, [isValid, action]);
+
+  return {
+    disabled: !isValid || isExecuting,
+    execute,
+    error,
+  };
+};