From 94670947c5b366e543da609dee5b3fc320b19e2e Mon Sep 17 00:00:00 2001
From: Junichi Sugiura <jun.sugiura.jp@gmail.com>
Date: Tue, 2 Jul 2024 20:49:30 +0200
Subject: [PATCH] Show insufficient funds page when fee estimation fail due to
 exceeding amount (#437)

---
 .../keychain/src/components/Execute/index.tsx  | 18 ++++++++++++++----
 packages/keychain/src/errors.ts                |  9 +++++++++
 2 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 packages/keychain/src/errors.ts

diff --git a/packages/keychain/src/components/Execute/index.tsx b/packages/keychain/src/components/Execute/index.tsx
index 9b324327f..2c666e492 100644
--- a/packages/keychain/src/components/Execute/index.tsx
+++ b/packages/keychain/src/components/Execute/index.tsx
@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Button } from "@chakra-ui/react";
 import { formatEther } from "viem";
-import { Policy, ResponseCodes } from "@cartridge/controller";
-import {
+import { Policy, ResponseCodes } from "@cartridge/controller"; import {
   Container,
   Content,
   FOOTER_MIN_HEIGHT,
@@ -16,6 +15,7 @@ import { ErrorAlert } from "components/ErrorAlert";
 import { Policies } from "Policies";
 import { Fees } from "./Fees";
 import { ExecuteCtx } from "utils/connection";
+import { TransferAmountExceedsBalance } from "errors";
 
 export const CONTRACT_ETH =
   "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7";
@@ -88,6 +88,12 @@ export function Execute() {
         setFees({ base: fees.overall_fee, max: fees.suggestedMaxFee });
       })
       .catch((e) => {
+        if (e.message.includes("ERC20: transfer amount exceeds balance")) {
+          setIsInsufficient(true)
+          setError(new TransferAmountExceedsBalance())
+          return
+        }
+
         setError(e);
       });
   }, [account, controller, setError, setFees, calls, chainId, ctx]);
@@ -139,9 +145,13 @@ export function Execute() {
       </Content>
 
       <Footer>
-        {error ? (
+        {error ? error.name === "TransferAmountExceedsBalance" ? (
+          <ErrorAlert
+            title={error.message}
+          />
+        ) : (
           <ErrorAlert
-            title="Fee estimation failed"
+            title="Something went wrong"
             description={error.message}
           />
         ) : (
diff --git a/packages/keychain/src/errors.ts b/packages/keychain/src/errors.ts
new file mode 100644
index 000000000..8c054ee14
--- /dev/null
+++ b/packages/keychain/src/errors.ts
@@ -0,0 +1,9 @@
+export class TransferAmountExceedsBalance extends Error {
+  constructor() {
+    super("Transfer amount exceeds balance");
+
+    this.name = "TransferAmountExceedsBalance";
+
+    Object.setPrototypeOf(this, TransferAmountExceedsBalance.prototype);
+  }
+}