error handling before send

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

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;
 }

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 />

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;
 }
 

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>

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)