From 324d032326c4d699744bc8df495841fea5c09efb Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 5 Nov 2023 15:54:17 +0000
Subject: [PATCH] error handling before send

---
 src/features/Web3/components/Form/Form.tsx        |  5 ++++-
 .../Web3/components/Input/InputGroup.module.css   | 10 +++++-----
 src/features/Web3/components/Input/InputGroup.tsx |  2 +-
 .../Web3/components/Preview/Data.module.css       | 10 ++++++----
 src/features/Web3/components/Preview/Data.tsx     |  5 ++---
 src/features/Web3/hooks/useSend/useSend.tsx       | 15 +++++++++++++--
 6 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/features/Web3/components/Form/Form.tsx b/src/features/Web3/components/Form/Form.tsx
index b8d9c41d..59eb8f60 100644
--- a/src/features/Web3/components/Form/Form.tsx
+++ b/src/features/Web3/components/Form/Form.tsx
@@ -19,7 +19,10 @@ export function Web3Form(): ReactElement {
   const [error, setError] = useState<string>()
 
   useEffect(() => {
-    if (!amount || amount === '' || !selectedToken?.balance) return
+    if (!amount || amount === '' || !selectedToken?.balance) {
+      setError(undefined)
+      return
+    }
 
     if (Number(amount) > Number(selectedToken?.balance)) {
       setError('Exceeds balance')
diff --git a/src/features/Web3/components/Input/InputGroup.module.css b/src/features/Web3/components/Input/InputGroup.module.css
index e8fe1f65..4330d333 100644
--- a/src/features/Web3/components/Input/InputGroup.module.css
+++ b/src/features/Web3/components/Input/InputGroup.module.css
@@ -103,13 +103,13 @@
   text-shadow: none;
 }
 
-.error {
+.errorOutput {
   color: red;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-mini);
   margin-left: var(--tokenWidth);
-  text-align: left;
   position: absolute;
-  left: 0;
-  bottom: 0;
+  right: calc(var(--spacer) / 3);
+  bottom: -3px;
   width: 100%;
+  text-align: right;
 }
diff --git a/src/features/Web3/components/Input/InputGroup.tsx b/src/features/Web3/components/Input/InputGroup.tsx
index 86744ad9..2652dbf2 100644
--- a/src/features/Web3/components/Input/InputGroup.tsx
+++ b/src/features/Web3/components/Input/InputGroup.tsx
@@ -57,7 +57,7 @@ export function InputGroup({
           Preview
         </button>
 
-        {error ? <span className={styles.error}>{error}</span> : null}
+        {error ? <span className={styles.errorOutput}>{error}</span> : null}
       </div>
 
       <Conversion />
diff --git a/src/features/Web3/components/Preview/Data.module.css b/src/features/Web3/components/Preview/Data.module.css
index 84d86b9f..bf65ce0f 100644
--- a/src/features/Web3/components/Preview/Data.module.css
+++ b/src/features/Web3/components/Preview/Data.module.css
@@ -4,16 +4,18 @@
   word-break: break-all;
   background: none;
   padding: 0;
+}
+
+code.to,
+code.from {
   font-size: var(--font-size-mini);
 }
 
-.to:last-child:not(:only-child),
-.from:last-child:not(:only-child) {
+.to:last-child {
   padding-left: 14px;
 }
 
-.to:last-child:not(:only-child)::first-letter,
-.from:last-child:not(:only-child)::first-letter {
+.to:last-child::first-letter {
   margin-left: -14px;
 }
 
diff --git a/src/features/Web3/components/Preview/Data.tsx b/src/features/Web3/components/Preview/Data.tsx
index 2e31efd9..f6728275 100644
--- a/src/features/Web3/components/Preview/Data.tsx
+++ b/src/features/Web3/components/Preview/Data.tsx
@@ -44,8 +44,7 @@ export function Data({
           <td className={styles.label}>You are</td>
           {ensFrom ? (
             <td title={`${ensFrom} successfully resolved to ${from}`}>
-              <code className={styles.from}>{ensFrom}</code>
-              <code className={styles.from}>{`→ ${from}`}</code>
+              <span className={styles.from}>{ensFrom}</span>
             </td>
           ) : (
             <td>
@@ -73,7 +72,7 @@ export function Data({
         <tr>
           <td className={styles.label}>to</td>
           <td title={`${ensResolved} successfully resolved to ${to}`}>
-            <code className={styles.to}>{ensResolved}</code>
+            <span className={styles.to}>{ensResolved}</span>
             <code className={styles.to}>{`→ ${to}`}</code>
           </td>
         </tr>
diff --git a/src/features/Web3/hooks/useSend/useSend.tsx b/src/features/Web3/hooks/useSend/useSend.tsx
index 53c0d6eb..9aea35f3 100644
--- a/src/features/Web3/hooks/useSend/useSend.tsx
+++ b/src/features/Web3/hooks/useSend/useSend.tsx
@@ -26,10 +26,21 @@ export function useSend({
       const result = await send(selectedToken, txConfig)
       $txHash.set(result?.hash)
     } catch (error: unknown) {
-      console.error((error as Error).message)
+      const errorMessage = (error as Error).message
+      console.error(errorMessage)
 
       // only expose useful errors in UI
-      if ((error as Error).message.includes('User rejected the request.')) {
+      const terribleErrorMessages = [
+        'User rejected the request.',
+        'User denied transaction signature.',
+        'Cannot read properties of undefined'
+      ]
+
+      if (
+        terribleErrorMessages.some((terribleMessage) =>
+          errorMessage.includes(terribleMessage)
+        )
+      ) {
         setError(undefined)
       } else {
         setError((error as Error).message)