refactor, more unit tests

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

@@ -0,0 +1,19 @@
+import { $txHash } from '@features/Web3/stores'
+import { useStore } from '@nanostores/react'
+
+export function ExplorerLink({
+  url,
+  children
+}: {
+  url: string | undefined
+  children: React.ReactNode
+}) {
+  const txHash = useStore($txHash)
+  const explorerLink = `${url}/tx/${txHash}`
+
+  return (
+    <a href={explorerLink} target="_blank" rel="noopener noreferrer">
+      {children}
+    </a>
+  )
+}

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

@@ -2,29 +2,30 @@ import { $txHash, $isInitSend } from '@features/Web3/stores'
 import { useStore } from '@nanostores/react'
 import styles from './Success.module.css'
 import { useNetwork } from 'wagmi'
+import { ExplorerLink } from './ExplorerLink'
+
+const title = `You're amazing, thanks!`
+const description = `Your transaction is on its way. You can check the status on`
 
 export function Success() {
   const { chain } = useNetwork()
   const txHash = useStore($txHash)
 
   const explorerName = chain?.blockExplorers?.default.name
-  const explorerLink = `${chain?.blockExplorers?.default.url}/tx/${txHash}`
+  const explorerUrl = chain?.blockExplorers?.default.url
 
   return (
     <div className={styles.success}>
-      <h5 className={styles.title}>You're amazing, thanks!</h5>
+      <h5 className={styles.title}>{title}</h5>
 
       <p>
-        Your transaction is on its way. You can check the status on{' '}
+        {description}{' '}
-        <a href={explorerLink} target="_blank" rel="noopener noreferrer">
+        <ExplorerLink url={explorerUrl}>{explorerName}</ExplorerLink>.
-          {explorerName}
-        </a>
-        .
       </p>
       <p>
-        <a href={explorerLink} target="_blank" rel="noopener noreferrer">
+        <ExplorerLink url={explorerUrl}>
           <code>{txHash}</code>
-        </a>
+        </ExplorerLink>
       </p>
 
       <footer className={styles.actions}>

src/features/Web3/hooks/useFetchTokens/useFetchTokens.test.tsx

@@ -0,0 +1,19 @@
+import { test, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { useFetchTokens } from './useFetchTokens'
+
+test('useFetchTokens does not fetch anything when no chain or address are present', async () => {
+  vi.mock('wagmi', () => ({
+    useNetwork: () => ({ chain: undefined }),
+    useAccount: () => ({ address: undefined })
+  }))
+
+  function TestComponent() {
+    const fetchResults = useFetchTokens()
+    return <div>{fetchResults?.data ? 'Fetched' : 'Not fetched'}</div>
+  }
+
+  render(<TestComponent />)
+
+  expect(screen.queryByText('Fetched')).toBeNull()
+})

src/features/Web3/hooks/useSend/isUnhelpfulErrorMessage.test.ts

@@ -0,0 +1,12 @@
+import { test, expect } from 'vitest'
+import { isUnhelpfulErrorMessage } from './isUnhelpfulErrorMessage'
+
+test('returns true for unhelpful error messages', () => {
+  const unhelpfulMessage = 'User rejected the request'
+  expect(isUnhelpfulErrorMessage(unhelpfulMessage)).toBe(true)
+})
+
+test('returns false for helpful error messages', () => {
+  const helpfulMessage = 'Error: Transaction has been reverted by the EVM'
+  expect(isUnhelpfulErrorMessage(helpfulMessage)).toBe(false)
+})

src/features/Web3/hooks/useSend/isUnhelpfulErrorMessage.ts

@@ -0,0 +1,11 @@
+const terribleErrorMessages = [
+  'User rejected the request',
+  'User denied transaction signature',
+  'Cannot read properties of undefined'
+]
+
+export function isUnhelpfulErrorMessage(message: string) {
+  return terribleErrorMessages.some((terribleMessage) =>
+    message.includes(terribleMessage)
+  )
+}

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

@@ -6,6 +6,7 @@ import type {
   WriteContractPreparedArgs
 } from 'wagmi/actions'
 import { send } from './send'
+import { isUnhelpfulErrorMessage } from './isUnhelpfulErrorMessage'
 
 export function useSend({
   txConfig
@@ -30,17 +31,7 @@ export function useSend({
       console.error(errorMessage)
 
       // only expose useful errors in UI
-      const terribleErrorMessages = [
+      if (isUnhelpfulErrorMessage(errorMessage)) {
-        '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)