fixes

src/features/Web3/components/Form/Form.tsx

@@ -1,4 +1,4 @@
-import { type ReactElement, useEffect } from 'react'
+import { type ReactElement, useEffect, useState } from 'react'
 import { useAccount } from 'wagmi'
 import { InputGroup } from '../Input'
 import styles from './Form.module.css'
@@ -16,6 +16,18 @@ export function Web3Form(): ReactElement {
 
   const isDisabled = !account
 
+  const [error, setError] = useState<string>()
+
+  useEffect(() => {
+    if (!amount || amount === '' || !selectedToken?.balance) return
+
+    if (Number(amount) > Number(selectedToken?.balance)) {
+      setError('Exceeds balance')
+    } else {
+      setError(undefined)
+    }
+  }, [amount, selectedToken?.balance])
+
   // reset amount whenever token changes
   useEffect(() => {
     if (!selectedToken) return
@@ -36,7 +48,7 @@ export function Web3Form(): ReactElement {
           }}
         >
           <RainbowKit />
-          <InputGroup isDisabled={isDisabled} />
+          <InputGroup isDisabled={isDisabled} error={error} />
           <div className={styles.disclaimer}>
             Sends tokens to my account{' '}
             <code>{siteConfig.author.ether.ens}</code>

src/features/Web3/components/Input/InputGroup.module.css

@@ -29,6 +29,11 @@
   border-color: var(--input-border-focus);
 }
 
+.inputGroup.error,
+.inputGroup.focus.error {
+  border-color: red !important;
+}
+
 .token {
   position: absolute;
   left: 0;
@@ -97,3 +102,14 @@
   color: var(--text-color-light);
   text-shadow: none;
 }
+
+.error {
+  color: red;
+  font-size: var(--font-size-small);
+  margin-left: var(--tokenWidth);
+  text-align: left;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+}

src/features/Web3/components/Input/InputGroup.tsx

@@ -7,9 +7,11 @@ import { $amount, $isInitSend, $selectedToken } from '@features/Web3/stores'
 import { useStore } from '@nanostores/react'
 
 export function InputGroup({
-  isDisabled
+  isDisabled,
+  error
 }: {
   isDisabled: boolean
+  error: string | undefined
 }): ReactElement {
   const amount = useStore($amount)
   const selectedToken = useStore($selectedToken)
@@ -22,7 +24,11 @@ export function InputGroup({
 
   return (
     <>
-      <div className={`${styles.inputGroup} ${isFocus ? styles.focus : ''}`}>
+      <div
+        className={`${styles.inputGroup} ${isFocus ? styles.focus : ''} ${
+          error ? styles.error : ''
+        }`}
+      >
         <div className={styles.token}>
           <TokenSelect />
         </div>
@@ -39,11 +45,19 @@ export function InputGroup({
         />
         <button
           className={`${styles.submit} btn btn-primary`}
-          disabled={isDisabled || !amount || !selectedToken}
+          disabled={
+            isDisabled ||
+            !amount ||
+            amount === '' ||
+            !selectedToken ||
+            Boolean(error)
+          }
           onClick={() => $isInitSend.set(true)}
         >
           Preview
         </button>
+
+        {error ? <span className={styles.error}>{error}</span> : null}
       </div>
 
       <Conversion />

src/features/Web3/components/TokenSelect/TokenSelect.tsx

@@ -16,7 +16,7 @@ import { useAccount } from 'wagmi'
 import { useEffect } from 'react'
 
 export function TokenSelect() {
-  const { address, isConnecting } = useAccount()
+  const { address } = useAccount()
   const { isLoading } = useFetchTokens()
   const tokens = useStore($tokens)
   const selectedToken = useStore($selectedToken)
@@ -37,18 +37,18 @@ export function TokenSelect() {
       $tokens.set(undefined)
       $setSelectedToken(undefined)
     }
-  }, [address, tokens, selectedToken])
+  }, [address])
 
   // Auto-select native token
   useEffect(() => {
-    if (tokens && !selectedToken && !isConnecting) {
-      $setSelectedToken(tokens[0])
-    }
-  }, [tokens, isConnecting, selectedToken])
+    if (isLoading || !tokens || selectedToken) return
+
+    handleValueChange('0x0')
+  }, [tokens, selectedToken])
 
   return tokens ? (
     <Select.Root
-      defaultValue={selectedToken?.address || tokens[0].address}
+      // defaultValue={selectedToken?.address || tokens[0].address}
       onValueChange={(value: `0x${string}`) => handleValueChange(value)}
       disabled={isLoading}
     >
@@ -57,7 +57,7 @@ export function TokenSelect() {
         disabled={isLoading}
         aria-label="Token"
       >
-        <Select.Value />
+        <Select.Value placeholder="..." />
         <Select.Icon>
           <ChevronDown />
         </Select.Icon>