From 10dc80888289d1f34a2c10a4a8d896d3cee6870c Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 5 Nov 2023 22:07:34 +0000
Subject: [PATCH] refactor, more unit tests

---
 .../Web3/components/Success/ExplorerLink.tsx  | 19 +++++++++++++++++++
 .../Web3/components/Success/Success.tsx       | 19 ++++++++++---------
 .../useFetchTokens/useFetchTokens.test.tsx    | 19 +++++++++++++++++++
 .../useSend/isUnhelpfulErrorMessage.test.ts   | 12 ++++++++++++
 .../hooks/useSend/isUnhelpfulErrorMessage.ts  | 11 +++++++++++
 src/features/Web3/hooks/useSend/useSend.tsx   | 13 ++-----------
 6 files changed, 73 insertions(+), 20 deletions(-)
 create mode 100644 src/features/Web3/components/Success/ExplorerLink.tsx
 create mode 100644 src/features/Web3/hooks/useFetchTokens/useFetchTokens.test.tsx
 create mode 100644 src/features/Web3/hooks/useSend/isUnhelpfulErrorMessage.test.ts
 create mode 100644 src/features/Web3/hooks/useSend/isUnhelpfulErrorMessage.ts

diff --git a/src/features/Web3/components/Success/ExplorerLink.tsx b/src/features/Web3/components/Success/ExplorerLink.tsx
new file mode 100644
index 00000000..63d8cd0d
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/features/Web3/components/Success/Success.tsx b/src/features/Web3/components/Success/Success.tsx
index a2251027..940e270d 100644
--- a/src/features/Web3/components/Success/Success.tsx
+++ b/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{' '}
-        <a href={explorerLink} target="_blank" rel="noopener noreferrer">
-          {explorerName}
-        </a>
-        .
+        {description}{' '}
+        <ExplorerLink url={explorerUrl}>{explorerName}</ExplorerLink>.
       </p>
       <p>
-        <a href={explorerLink} target="_blank" rel="noopener noreferrer">
+        <ExplorerLink url={explorerUrl}>
           <code>{txHash}</code>
-        </a>
+        </ExplorerLink>
       </p>
 
       <footer className={styles.actions}>
diff --git a/src/features/Web3/hooks/useFetchTokens/useFetchTokens.test.tsx b/src/features/Web3/hooks/useFetchTokens/useFetchTokens.test.tsx
new file mode 100644
index 00000000..9b9e55a1
--- /dev/null
+++ b/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()
+})
diff --git a/src/features/Web3/hooks/useSend/isUnhelpfulErrorMessage.test.ts b/src/features/Web3/hooks/useSend/isUnhelpfulErrorMessage.test.ts
new file mode 100644
index 00000000..4e405a1d
--- /dev/null
+++ b/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)
+})
diff --git a/src/features/Web3/hooks/useSend/isUnhelpfulErrorMessage.ts b/src/features/Web3/hooks/useSend/isUnhelpfulErrorMessage.ts
new file mode 100644
index 00000000..e681cfbb
--- /dev/null
+++ b/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)
+  )
+}
diff --git a/src/features/Web3/hooks/useSend/useSend.tsx b/src/features/Web3/hooks/useSend/useSend.tsx
index ff08104e..aaae533d 100644
--- a/src/features/Web3/hooks/useSend/useSend.tsx
+++ b/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 = [
-        'User rejected the request',
-        'User denied transaction signature',
-        'Cannot read properties of undefined'
-      ]
-
-      if (
-        terribleErrorMessages.some((terribleMessage) =>
-          errorMessage.includes(terribleMessage)
-        )
-      ) {
+      if (isUnhelpfulErrorMessage(errorMessage)) {
         setError(undefined)
       } else {
         setError((error as Error).message)