build fixes

gatsby-node.js

@@ -147,7 +147,7 @@ exports.onPostBuild = async ({ graphql }) => {
   return Promise.resolve()
 }
 
-exports.onCreateWebpackConfig = ({ actions, stage, loaders }) => {
+exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {
       fallback: {
@@ -155,17 +155,4 @@ exports.onCreateWebpackConfig = ({ actions, stage, loaders }) => {
       }
     }
   })
-
-  if (stage === 'build-html') {
-    actions.setWebpackConfig({
-      module: {
-        rules: [
-          {
-            test: /@ethersproject/,
-            use: loaders.null()
-          }
-        ]
-      }
-    })
-  }
 }

package.json

@@ -29,12 +29,12 @@
   ],
   "dependencies": {
     "@kremalicious/react-feather": "^2.1.0",
-    "@rainbow-me/rainbowkit": "^0.5.3",
+    "@rainbow-me/rainbowkit": "^0.6.0",
     "axios": "^0.27.2",
-    "classnames": "^2.3.1",
-    "date-fns": "^2.29.2",
+    "classnames": "^2.3.2",
+    "date-fns": "^2.29.3",
     "dms2dec": "^1.1.0",
-    "ethers": "^5.7.0",
+    "ethers": "^5.7.1",
     "fast-exif": "^1.0.1",
     "feather-icons": "^4.29.0",
     "fraction.js": "^4.2.0",
@@ -75,17 +75,17 @@
     "remark-rehype": "^10.1.0",
     "slugify": "^1.6.5",
     "unified": "^10.1.2",
-    "wagmi": "^0.6.5"
+    "use-debounce": "^8.0.4",
+    "wagmi": "^0.6.6"
   },
   "devDependencies": {
     "@svgr/webpack": "^6.3.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/fs-extra": "^9.0.13",
-    "@types/jest": "^29.0.0",
-    "@types/loadable__component": "^5.13.4",
+    "@types/jest": "^29.0.3",
     "@types/lunr": "^2.3.4",
-    "@types/node": "^18.7.16",
+    "@types/node": "^18.7.18",
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
     "@types/react-helmet": "^6.1.5",
@@ -94,13 +94,13 @@
     "@typescript-eslint/parser": "^5.36.2",
     "@welldone-software/why-did-you-render": "^7.0.1",
     "babel-preset-gatsby": "^2.23.0",
-    "eslint": "^8.23.0",
+    "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-graphql": "^4.0.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.8",
-    "eslint-plugin-testing-library": "^5.6.3",
+    "eslint-plugin-testing-library": "^5.6.4",
     "fs-extra": "^10.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.0.3",

src/components/molecules/Web3Donation/InputGroup.test.tsx

@@ -3,12 +3,12 @@ import { render, fireEvent } from '@testing-library/react'
 
 import InputGroup from './InputGroup'
 
-const sendTransaction = jest.fn()
+const setAmount = jest.fn()
 
 describe('InputGroup', () => {
   it('renders without crashing', async () => {
     const { container } = render(
-      <InputGroup sendTransaction={sendTransaction} />
+      <InputGroup amount="1" setAmount={setAmount} />
     )
     expect(container.firstChild).toBeInTheDocument()
 
@@ -16,6 +16,6 @@ describe('InputGroup', () => {
     const button = container.querySelector('button')
     fireEvent.change(input, { target: { value: '3' } })
     fireEvent.click(button)
-    expect(sendTransaction).toHaveBeenCalled()
+    expect(setAmount).toHaveBeenCalled()
   })
 })

src/components/molecules/Web3Donation/InputGroup.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from 'react'
+import React, { ReactElement } from 'react'
 import { useAccount, useNetwork } from 'wagmi'
 import Input from '../../atoms/Input'
 import Conversion from './Conversion'
@@ -10,17 +10,14 @@ import {
 } from './InputGroup.module.css'
 
 export default function InputGroup({
-  sendTransaction
+  amount,
+  setAmount
 }: {
-  sendTransaction(amount: string): void
+  amount: string
+  setAmount(amount: string): void
 }): ReactElement {
-  const { data: account } = useAccount()
-  const { activeChain } = useNetwork()
-  const [amount, setAmount] = useState('0.01')
-
-  const onAmountChange = ({ target }: { target: any }) => {
-    setAmount(target.value)
-  }
+  const { address } = useAccount()
+  const { chain } = useNetwork()
 
   return (
     <>
@@ -31,19 +28,15 @@ export default function InputGroup({
             inputMode="decimal"
             pattern="[0-9.]*"
             value={amount}
-            onChange={onAmountChange}
+            onChange={(e) => setAmount(e.target.value)}
             className={inputInput}
-            disabled={!account}
+            disabled={!address}
           />
           <div className={currency}>
-            <span>{activeChain?.nativeCurrency?.symbol || 'ETH'}</span>
+            <span>{chain?.nativeCurrency?.symbol || 'ETH'}</span>
           </div>
         </div>
-        <button
-          className="btn btn-primary"
-          onClick={() => sendTransaction(amount)}
-          disabled={!account}
-        >
+        <button className="btn btn-primary" disabled={!address}>
           Make it rain
         </button>
       </div>

src/components/molecules/Web3Donation/index.tsx

@@ -1,5 +1,6 @@
 import React, { ReactElement, useState } from 'react'
 import { parseEther } from '@ethersproject/units'
+import { useDebounce } from 'use-debounce'
 import InputGroup from './InputGroup'
 import Alert, { getTransactionMessage } from './Alert'
 import { web3 as styleWeb3 } from './index.module.css'
@@ -11,25 +12,28 @@ export default function Web3Donation({
 }: {
   address: string
 }): ReactElement {
-  const { config } = usePrepareSendTransaction({ request: {} })
+  const [amount, setAmount] = useState('0.01')
+  const [debouncedAmount] = useDebounce(amount, 500)
+
+  const { config } = usePrepareSendTransaction({
+    request: {
+      to: address,
+      value: debouncedAmount ? parseEther(debouncedAmount) : undefined
+    }
+  })
   const { sendTransactionAsync } = useSendTransaction(config)
 
   const [message, setMessage] = useState<{ status: string; text: string }>()
   const [transactionHash, setTransactionHash] = useState<string>()
 
-  async function handleSendTransaction(amount: string) {
+  async function handleSendTransaction() {
     setMessage({
       status: 'loading',
       text: getTransactionMessage().waitingForUser
     })
 
     try {
-      const tx = await sendTransactionAsync({
-        recklesslySetUnpreparedRequest: {
-          to: address,
-          value: parseEther(amount) // ETH -> Wei
-        }
-      })
+      const tx = await sendTransactionAsync()
       setTransactionHash(tx.hash)
       setMessage({
         status: 'loading',
@@ -48,14 +52,20 @@ export default function Web3Donation({
   }
 
   return (
-    <div className={styleWeb3}>
+    <form
+      className={styleWeb3}
+      onSubmit={(e) => {
+        e.preventDefault()
+        handleSendTransaction()
+      }}
+    >
       <ConnectButton chainStatus="icon" showBalance={false} />
 
       {message ? (
         <Alert message={message} transactionHash={transactionHash} />
       ) : (
-        <InputGroup sendTransaction={handleSendTransaction} />
+        <InputGroup amount={amount} setAmount={setAmount} />
       )}
-    </div>
+    </form>
   )
 }