load web3 stuff client-side only

gatsby-node.ts

@@ -172,8 +172,7 @@ export const onCreateWebpackConfig: GatsbyNode['onCreateWebpackConfig'] =
           util: false,
           crypto: false,
           path: false,
-          url: false,
-          process: false
+          url: false
         }
       }
     })

src/components/molecules/Web3Donation/index.tsx

@@ -1,8 +1,9 @@
 import React, { ReactElement, useState } from 'react'
-import { parseEther } from 'viem'
-import { ConnectButton } from '@rainbow-me/rainbowkit'
 import { useDebounce } from 'use-debounce'
+import { parseEther } from 'viem'
 import { usePrepareSendTransaction, useSendTransaction } from 'wagmi'
+import { ConnectButton } from '@rainbow-me/rainbowkit'
+
 import Alert, { getTransactionMessage } from './Alert'
 import InputGroup from './InputGroup'
 import * as styles from './index.module.css'

src/pages/thanks.tsx

@@ -1,12 +1,11 @@
 import React, { ReactElement } from 'react'
 import { HeadProps } from 'gatsby'
-import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
 import { WagmiConfig } from 'wagmi'
+import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
+import { chains, theme, wagmiConfig } from '../helpers/rainbowkit'
 import Copy from '../components/atoms/Copy'
 import Meta, { HeadMetaProps } from '../components/atoms/HeadMeta'
 import Icon from '../components/atoms/Icon'
-import Web3Donation from '../components/molecules/Web3Donation'
-import { chains, theme, wagmiConfig } from '../helpers/rainbowkit'
 import { useSiteMetadata } from '../hooks/useSiteMetadata'
 import * as styles from './thanks.module.css'
 
@@ -14,6 +13,10 @@ const meta: Partial<HeadMetaProps> = {
   title: `Say Thanks`
 }
 
+const Web3Donation = React.lazy(
+  () => import('../components/molecules/Web3Donation')
+)
+
 function Coin({ address, title }: { address: string; title: string }) {
   return (
     <div className={styles.coin}>
@@ -36,6 +39,7 @@ const BackButton = () => (
 )
 
 export default function Thanks(): ReactElement {
+  const isSSR = typeof window === 'undefined'
   const { author } = useSiteMetadata()
   const coins = Object.entries(author).filter(
     ([key]) => key === 'bitcoin' || key === 'ether'
@@ -50,7 +54,11 @@ export default function Thanks(): ReactElement {
 
       <WagmiConfig config={wagmiConfig}>
         <RainbowKitProvider chains={chains} theme={theme}>
+          {!isSSR && (
+            <React.Suspense fallback={<div />}>
               <Web3Donation address={author.ether} />
+            </React.Suspense>
+          )}
         </RainbowKitProvider>
       </WagmiConfig>