refactor

package-lock.json

@@ -35,7 +35,6 @@
         "react-dom": "^18.2.0",
         "slugify": "^1.6.6",
         "swr": "^2.2.4",
-        "use-debounce": "^9.0.4",
         "viem": "^1.18.2",
         "wagmi": "^1.4.5"
       },
@@ -18987,17 +18986,6 @@
         }
       }
     },
-    "node_modules/use-debounce": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-9.0.4.tgz",
-      "integrity": "sha512-6X8H/mikbrt0XE8e+JXRtZ8yYVvKkdYRfmIhWZYsP8rcNs9hk3APV8Ua2mFkKRLcJKVdnX2/Vwrmg2GWKUQEaQ==",
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
     "node_modules/use-sidecar": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",

package.json

@@ -74,7 +74,6 @@
     "react-dom": "^18.2.0",
     "slugify": "^1.6.6",
     "swr": "^2.2.4",
-    "use-debounce": "^9.0.4",
     "viem": "^1.18.2",
     "wagmi": "^1.4.5"
   },

src/features/Web3/components/Conversion/Conversion.tsx

@@ -2,9 +2,11 @@ import { useEffect, type ReactElement, useState } from 'react'
 import styles from './Conversion.module.css'
 import { useStore } from '@nanostores/react'
 import { $selectedToken } from '@features/Web3/stores/selectedToken'
+import { $amount } from '@features/Web3/stores'
 
-export function Conversion({ amount }: { amount: string }): ReactElement {
+export function Conversion(): ReactElement {
   const selectedToken = useStore($selectedToken)
+  const amount = useStore($amount)
 
   const [dollar, setDollar] = useState('0.00')
   const [euro, setEuro] = useState('0.00')

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

@@ -1,11 +1,10 @@
-import { type ReactElement, useState, useEffect } from 'react'
-import { useDebounce } from 'use-debounce'
+import { type ReactElement, useEffect } from 'react'
 import { useAccount } from 'wagmi'
 import { ConnectButton } from '@rainbow-me/rainbowkit'
 import { InputGroup } from '../Input'
 import styles from './index.module.css'
 import { useStore } from '@nanostores/react'
-import { $selectedToken, $isInitSend } from '@features/Web3/stores'
+import { $selectedToken, $isInitSend, $amount } from '@features/Web3/stores'
 import siteConfig from '@config/blog.config'
 import { Send } from '../Send'
 
@@ -13,42 +12,34 @@ export default function Web3Form(): ReactElement {
   const { address: account } = useAccount()
   const selectedToken = useStore($selectedToken)
   const isInitSend = useStore($isInitSend)
-
-  const [amount, setAmount] = useState('')
-  const [debouncedAmount] = useDebounce(amount, 500)
+  const amount = useStore($amount)
 
   const isDisabled = !account
 
   // reset amount whenever token changes
   useEffect(() => {
     if (!selectedToken) return
-    setAmount('')
+    $amount.set('')
   }, [selectedToken])
 
   return isInitSend ? (
-    <Send amount={debouncedAmount} />
+    <Send />
   ) : (
     <form
       className={styles.web3}
       onSubmit={(e) => {
         e.preventDefault()
-        if (debouncedAmount === '' || debouncedAmount === '0') return
+        if (amount === '' || amount === '0') return
         $isInitSend.set(true)
       }}
     >
-      <>
       <div className={styles.rainbowkit}>
         <ConnectButton chainStatus="full" showBalance={false} />
       </div>
-        <InputGroup
-          amount={amount}
-          setAmount={setAmount}
-          isDisabled={isDisabled}
-        />
+      <InputGroup isDisabled={isDisabled} />
       <div className={styles.disclaimer}>
         Sends tokens to my account <code>{siteConfig.author.ether.ens}</code>
       </div>
-      </>
     </form>
   )
 }

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

@@ -3,17 +3,20 @@ import Input from '@components/Input'
 import { Conversion } from '../Conversion'
 import styles from './InputGroup.module.css'
 import { TokenSelect } from '../TokenSelect'
-import { $isInitSend } from '@features/Web3/stores'
+import { $amount, $isInitSend } from '@features/Web3/stores'
+import { useStore } from '@nanostores/react'
 
 export function InputGroup({
-  amount,
-  isDisabled,
-  setAmount
+  isDisabled
 }: {
-  amount: string
   isDisabled: boolean
-  setAmount: React.Dispatch<React.SetStateAction<string>>
 }): ReactElement {
+  const amount = useStore($amount)
+
+  function handleChange(newAmount: string) {
+    $amount.set(newAmount)
+  }
+
   return (
     <>
       <div className={styles.inputGroup}>
@@ -27,7 +30,7 @@ export function InputGroup({
             pattern="[0-9.]*"
             value={amount}
             placeholder="0.00"
-            onChange={(e) => setAmount(e.target.value)}
+            onChange={(e) => handleChange(e.target.value)}
             className={styles.inputInput}
           />
         </div>
@@ -40,7 +43,7 @@ export function InputGroup({
           Preview
         </button>
       </div>
-      <Conversion amount={amount} />
+      <Conversion />
     </>
   )
 }

src/features/Web3/components/Preview/Data.module.css

@@ -1,9 +1,3 @@
-.amount,
-.network,
-.to {
-  /* font-weight: var(--font-weight-bold); */
-}
-
 .to,
 .from {
   display: block;
@@ -23,7 +17,7 @@
   margin-left: -14px;
 }
 
-.from .table {
+.table {
   /* max-width: 386px; */
   margin-bottom: calc(var(--spacer) / 1.5);
 }

src/features/Web3/components/Preview/Data.tsx

@@ -4,11 +4,11 @@ import type {
   SendTransactionArgs,
   WriteContractPreparedArgs
 } from 'wagmi/actions'
-import styles from './SendTable.module.css'
+import styles from './Data.module.css'
 import { useStore } from '@nanostores/react'
 import { $selectedToken } from '@features/Web3/stores'
 
-export function SendTable({
+export function Data({
   to,
   ensResolved,
   txConfig,

src/features/Web3/components/Preview/Preview.module.css

@@ -0,0 +1,21 @@
+.actions {
+  display: flex;
+  justify-content: center;
+}
+
+.actions button {
+  line-height: 1;
+}
+
+.actions button:first-child {
+  margin-right: var(--spacer);
+  width: 115px;
+  height: 50px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.alert {
+  font-size: var(--font-size-small);
+  display: inline-block;
+}

src/features/Web3/components/Preview/Preview.tsx

@@ -0,0 +1,67 @@
+import { Loader } from '@components/Loader'
+import { usePrepareSend } from '@features/Web3/hooks/usePrepareSend'
+import { useSend } from '@features/Web3/hooks/useSend'
+import { $isInitSend } from '@features/Web3/stores'
+import { useEnsAddress, useEnsName } from 'wagmi'
+import { Data } from './Data'
+import siteConfig from '@config/blog.config'
+import styles from './Preview.module.css'
+
+export function Preview() {
+  // Always resolve to address from ENS name and vice versa
+  // so nobody has to trust my config values.
+  const { ens } = siteConfig.author.ether
+  const { data: to } = useEnsAddress({ name: ens, chainId: 1 })
+  const { data: ensResolved } = useEnsName({
+    address: to as `0x${string}` | undefined,
+    chainId: 1
+  })
+
+  const {
+    data: txConfig,
+    error: prepareError,
+    isError: isPrepareError
+  } = usePrepareSend({ to })
+  const { handleSend, isLoading, error } = useSend({ txConfig })
+
+  // TODO: Cancel flow if chain changes in preview as this can mess with token selection
+  // useEffect(() => {
+  //   if (!chain?.id || $isInitSend.get() === false) return
+  //   $isInitSend.set(false)
+  // }, [chain?.id])
+
+  return (
+    <>
+      <Data
+        to={to}
+        ensResolved={ensResolved}
+        txConfig={txConfig}
+        isDisabled={isLoading}
+      />
+
+      {error || prepareError ? (
+        <div className={styles.alert}>{error || prepareError}</div>
+      ) : null}
+
+      <footer className={styles.actions}>
+        <button
+          onClick={async (e) => {
+            e?.preventDefault()
+            await handleSend()
+          }}
+          className="btn btn-primary"
+          disabled={isLoading || !txConfig || isPrepareError}
+        >
+          {isLoading ? <Loader /> : 'Make it rain'}
+        </button>
+        <button
+          onClick={() => $isInitSend.set(false)}
+          className="link"
+          disabled={isLoading}
+        >
+          Cancel
+        </button>
+      </footer>
+    </>
+  )
+}

src/features/Web3/components/Preview/index.tsx

@@ -0,0 +1 @@
+export * from './Preview'

src/features/Web3/components/Send/Send.module.css

@@ -1,29 +1,3 @@
 .send {
   margin-top: calc(var(--spacer) / 2);
 }
-
-.title {
-  text-align: center;
-}
-
-.actions {
-  display: flex;
-  justify-content: center;
-}
-
-.actions button {
-  line-height: 1;
-}
-
-.actions button:first-child {
-  margin-right: var(--spacer);
-  width: 115px;
-  height: 50px;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.alert {
-  font-size: var(--font-size-small);
-  display: inline-block;
-}

src/features/Web3/components/Send/Send.tsx

@@ -1,71 +1,11 @@
 import { useStore } from '@nanostores/react'
-import { useEnsAddress, useEnsName } from 'wagmi'
-import { $isInitSend, $txHash } from '@features/Web3/stores'
-import siteConfig from '@config/blog.config'
+import { $txHash } from '@features/Web3/stores'
 import styles from './Send.module.css'
-import { SendTable } from './SendTable'
-import { Loader } from '@components/Loader'
-import { usePrepareSend } from '@features/Web3/hooks/usePrepareSend'
-import { useSend } from '@features/Web3/hooks/useSend'
+import { Success } from '../Success'
+import { Preview } from '../Preview'
 
-export function Send({ amount }: { amount: string }) {
+export function Send() {
   const txHash = useStore($txHash)
 
-  // Always resolve to address from ENS name and vice versa
-  // so nobody has to trust my config values.
-  const { ens } = siteConfig.author.ether
-  const { data: to } = useEnsAddress({ name: ens, chainId: 1 })
-  const { data: ensResolved } = useEnsName({
-    address: to as `0x${string}` | undefined,
-    chainId: 1
-  })
-
-  const {
-    data: txConfig,
-    error: prepareError,
-    isError: isPrepareError
-  } = usePrepareSend({ amount, to })
-  const { handleSend, isLoading, error } = useSend({ txConfig })
-
-  // Cancel send flow if chain changes as this can mess with token selection
-  // useEffect(() => {
-  //   if (!chain?.id || $isInitSend.get() === false) return
-  //   $isInitSend.set(false)
-  // }, [chain?.id])
-
-  console.log(txHash)
-
-  return (
-    <>
-      <div className={styles.send}>
-        {/* <h5 className={styles.title}>You are sending</h5> */}
-
-        <SendTable
-          to={to}
-          ensResolved={ensResolved}
-          txConfig={txConfig}
-          isDisabled={isLoading}
-        />
-
-        <div className={styles.alert}>{error || prepareError}</div>
-
-        <footer className={styles.actions}>
-          <button
-            onClick={(e) => handleSend(e)}
-            className="btn btn-primary"
-            disabled={isLoading || !txConfig || isPrepareError}
-          >
-            {isLoading ? <Loader /> : 'Make it rain'}
-          </button>
-          <button
-            onClick={() => $isInitSend.set(false)}
-            className="link"
-            disabled={isLoading}
-          >
-            Cancel
-          </button>
-        </footer>
-      </div>
-    </>
-  )
+  return <div className={styles.send}>{txHash ? <Success /> : <Preview />}</div>
 }

src/features/Web3/components/Success/Success.module.css

@@ -0,0 +1,8 @@
+.success {
+  text-align: center;
+  margin-top: var(--spacer);
+}
+
+.title {
+  font-size: var(--font-size-h3);
+}

src/features/Web3/components/Success/Success.tsx

@@ -0,0 +1,37 @@
+import { $txHash, $isInitSend } from '@features/Web3/stores'
+import { useStore } from '@nanostores/react'
+import styles from './Success.module.css'
+
+export function Success() {
+  const txHash = useStore($txHash)
+
+  return (
+    <div className={styles.success}>
+      <h5 className={styles.title}>You're amazing!</h5>
+
+      <p>
+        Your transaction has been sent. You can check the status on{' '}
+        <a
+          href={`https://etherscan.io/tx/${txHash}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Etherscan
+        </a>
+        .
+      </p>
+      <p>
+        <code>0xxxx{txHash}</code>
+      </p>
+
+      <footer className={styles.actions}>
+        <button
+          onClick={() => $isInitSend.set(false)}
+          className="btn btn-primary"
+        >
+          Reset
+        </button>
+      </footer>
+    </div>
+  )
+}

src/features/Web3/components/Success/index.tsx

@@ -0,0 +1 @@
+export * from './Success'

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

@@ -6,14 +6,17 @@ import { Icon as ChevronsDown } from '@images/components/react/ChevronsDown'
 import { Icon as ChevronsUp } from '@images/components/react/ChevronsUp'
 import { useFetchTokens } from '@features/Web3/hooks/useFetchTokens'
 import { useStore } from '@nanostores/react'
-import { $tokens } from '@features/Web3/stores/tokens'
+import { $setTokens, $tokens } from '@features/Web3/stores'
 import {
   $selectedToken,
   $setSelectedToken
 } from '@features/Web3/stores/selectedToken'
 import { Loader } from '@components/Loader'
+import { useAccount } from 'wagmi'
+import { useEffect } from 'react'
 
 export function TokenSelect() {
+  const { address } = useAccount()
   const { isLoading } = useFetchTokens()
   const tokens = useStore($tokens)
   const selectedToken = useStore($selectedToken)
@@ -28,6 +31,13 @@ export function TokenSelect() {
     $setSelectedToken(token)
   }
 
+  // reset when no account connected
+  useEffect(() => {
+    if (!address && tokens?.length) {
+      $setTokens(undefined)
+    }
+  }, [address])
+
   return tokens && selectedToken ? (
     <Select.Root
       defaultValue={selectedToken?.address}
@@ -38,7 +48,6 @@ export function TokenSelect() {
         className="SelectTrigger"
         disabled={isLoading}
         aria-label="Token"
-        placeholder="..."
       >
         <Select.Value />
         <Select.Icon>

src/features/Web3/hooks/usePrepareSend/usePrepareSend.tsx

@@ -5,18 +5,17 @@ import type {
   SendTransactionArgs,
   WriteContractPreparedArgs
 } from 'wagmi/actions'
-import { $selectedToken } from '@features/Web3/stores'
+import { $amount, $selectedToken } from '@features/Web3/stores'
 import { prepare } from './prepare'
 
 export function usePrepareSend({
-  amount,
   to
 }: {
-  amount: string
   to: `0x${string}` | null | undefined
 }) {
-  const { chain } = useNetwork()
   const selectedToken = useStore($selectedToken)
+  const amount = useStore($amount)
+  const { chain } = useNetwork()
 
   const [txConfig, setTxConfig] = useState<
     SendTransactionArgs | WriteContractPreparedArgs

src/features/Web3/hooks/useSend/useSend.tsx

@@ -1,6 +1,6 @@
 import { $txHash, $selectedToken } from '@features/Web3/stores'
 import { useStore } from '@nanostores/react'
-import { useState, type FormEvent } from 'react'
+import { useState } from 'react'
 import type {
   SendTransactionArgs,
   WriteContractPreparedArgs
@@ -18,9 +18,7 @@ export function useSend({
   const [isError, setIsError] = useState(false)
   const [error, setError] = useState<string | undefined>()
 
-  async function handleSend(event: FormEvent<HTMLButtonElement>) {
-    event?.preventDefault()
-
+  async function handleSend() {
     try {
       setIsError(false)
       setError(undefined)

src/features/Web3/stores/send.ts

@@ -1,4 +1,5 @@
 import { atom } from 'nanostores'
 
 export const $isInitSend = atom<boolean>(false)
+export const $amount = atom<string>('')
 export const $txHash = atom<string | undefined>()

src/features/Web3/stores/tokens/tokens.ts

@@ -6,7 +6,7 @@ export const $tokens = atom<GetToken[] | undefined>()
 export const $setTokens = action(
   $tokens,
   'setTokens',
-  (store, tokens: GetToken[]) => {
+  (store, tokens: GetToken[] | undefined) => {
     store.set(tokens)
     return store.get()
   }