package updates, SVG fixes

.env.sample

@@ -1,6 +1,7 @@
-GITHUB_TOKEN=your_token
-GATSBY_MAPBOX_ACCESS_TOKEN=
+GITHUB_TOKEN=xxx
+GATSBY_MAPBOX_ACCESS_TOKEN=xxx
 GATSBY_TYPEKIT_ID=xxx
 GATSBY_UMAMI_SCRIPT_URL=xxx
 GATSBY_UMAMI_WEBSITE_ID=xxx
 GATSBY_INFURA_ID=xxx
+GATSBY_WALLETCONNECT_ID="xxx"

.jest/jest.config.js

@@ -27,7 +27,9 @@ const esModules = [
   'wagmi',
   '@wagmi/chains',
   '@wagmi/core',
-  '@wagmi/connectors'
+  '@wagmi/connectors',
+  'viem',
+  'devlop'
 ].join('|')
 
 module.exports = {

.jest/setup-test-env.ts

@@ -1,11 +1,15 @@
 import * as Gatsby from 'gatsby'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import avatar from './__fixtures__/avatar.json'
 import github from './__fixtures__/github.json'
 import meta from './__fixtures__/meta.json'
 import posts from './__fixtures__/posts.json'
 import './__mocks__/matchMedia'
 
+// viem uses TextEncoder and TextDecoder which are not available with jsdom 16+
+import { TextEncoder, TextDecoder } from 'util'
+Object.assign(global, { TextDecoder, TextEncoder })
+
 const useStaticQuery = jest.spyOn(Gatsby, 'useStaticQuery')
 
 beforeAll(() => {

gatsby-config.ts

@@ -85,9 +85,14 @@ const config: GatsbyConfig = {
     {
       resolve: 'gatsby-plugin-svgr',
       options: {
-        icon: false,
+        icon: true,
         svgoConfig: {
-          plugins: [{ name: 'removeViewBox', active: false }]
+          plugins: [
+            {
+              name: 'preset-default',
+              params: { overrides: { removeViewBox: false } }
+            }
+          ]
         }
       }
     },

package.json

@@ -27,37 +27,37 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@rainbow-me/rainbowkit": "^0.12.5",
-    "axios": "^1.3.4",
+    "@rainbow-me/rainbowkit": "^1.0.8",
+    "axios": "^1.4.0",
     "classnames": "^2.3.2",
-    "date-fns": "^2.29.3",
+    "date-fns": "^2.30.0",
     "dms2dec": "^1.1.0",
-    "ethers": "^5.7.2",
     "fast-exif": "^2.0.1",
+    "fastestsmallesttextencoderdecoder": "^1.0.22",
     "feather-icons": "^4.29.0",
     "fraction.js": "^4.2.0",
-    "framer-motion": "^10.10.0",
-    "gatsby": "^5.8.1",
-    "gatsby-plugin-catch-links": "^5.8.0",
-    "gatsby-plugin-feed": "^5.8.0",
-    "gatsby-plugin-image": "^3.8.0",
+    "framer-motion": "^10.16.0",
+    "gatsby": "^5.11.0",
+    "gatsby-plugin-catch-links": "^5.11.0",
+    "gatsby-plugin-feed": "^5.11.0",
+    "gatsby-plugin-image": "^3.11.0",
     "gatsby-plugin-lunr": "^1.5.2",
-    "gatsby-plugin-manifest": "^5.8.0",
+    "gatsby-plugin-manifest": "^5.11.0",
     "gatsby-plugin-meta-redirect": "^1.1.1",
-    "gatsby-plugin-sharp": "^5.8.1",
-    "gatsby-plugin-sitemap": "^6.8.0",
+    "gatsby-plugin-sharp": "^5.11.0",
+    "gatsby-plugin-sitemap": "^6.11.0",
     "gatsby-plugin-svgr": "^3.0.0-beta.0",
-    "gatsby-redirect-from": "^1.0.3",
-    "gatsby-remark-autolink-headers": "^6.8.0",
-    "gatsby-remark-copy-linked-files": "^6.8.0",
-    "gatsby-remark-images": "^7.8.0",
+    "gatsby-redirect-from": "^1.0.4",
+    "gatsby-remark-autolink-headers": "^6.11.0",
+    "gatsby-remark-copy-linked-files": "^6.11.0",
+    "gatsby-remark-images": "^7.11.0",
     "gatsby-remark-images-medium-zoom": "^1.7.0",
-    "gatsby-remark-smartypants": "^6.8.0",
+    "gatsby-remark-smartypants": "^6.11.0",
     "gatsby-remark-vscode": "^3.3.1",
-    "gatsby-source-filesystem": "^5.8.0",
-    "gatsby-source-graphql": "^5.8.0",
-    "gatsby-transformer-remark": "^6.8.0",
-    "gatsby-transformer-sharp": "^5.8.0",
+    "gatsby-source-filesystem": "^5.11.0",
+    "gatsby-source-graphql": "^5.11.0",
+    "gatsby-transformer-remark": "^6.11.0",
+    "gatsby-transformer-sharp": "^5.11.0",
     "nord-visual-studio-code": "github:arcticicestudio/nord-visual-studio-code",
     "pigeon-maps": "^0.21.3",
     "pigeon-marker": "^0.3.4",
@@ -65,52 +65,52 @@
     "react-clipboard.js": "^2.0.16",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
-    "rehype-react": "^7.1.2",
-    "remark-parse": "^10.0.1",
+    "rehype-react": "^7.2.0",
+    "remark-parse": "^10.0.2",
     "remark-rehype": "^10.1.0",
     "slugify": "^1.6.6",
-    "unified": "^10.1.2",
-    "use-debounce": "^9.0.3",
-    "wagmi": "^0.12.8"
+    "unified": "^11.0.0",
+    "use-debounce": "^9.0.4",
+    "viem": "^1.6.0",
+    "wagmi": "^1.3.10"
   },
   "devDependencies": {
-    "@svgr/webpack": "^7.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
-    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/fs-extra": "^11.0.1",
-    "@types/jest": "^29.5.0",
+    "@types/jest": "^29.5.3",
     "@types/lunr": "^2.3.4",
-    "@types/node": "^18.15.11",
-    "@types/react": "^18.0.31",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.57.0",
-    "@typescript-eslint/parser": "^5.57.0",
-    "babel-preset-gatsby": "^3.8.0",
-    "eslint": "^8.37.0",
-    "eslint-config-prettier": "^8.8.0",
+    "@types/node": "^20.5.0",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@typescript-eslint/parser": "^6.4.0",
+    "babel-preset-gatsby": "^3.11.0",
+    "eslint": "^8.47.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-graphql": "^4.0.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-testing-library": "^5.10.2",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-testing-library": "^6.0.0",
     "fs-extra": "^11.1.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "markdownlint-cli": "^0.33.0",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.2",
+    "markdownlint-cli": "^0.35.0",
     "node-iptc": "^1.0.5",
     "npm-run-all": "^4.1.5",
-    "ora": "^6.3.0",
-    "postcss": "^8.4.21",
-    "prettier": "^2.8.7",
-    "stylelint": "^15.4.0",
-    "stylelint-config-css-modules": "^4.2.0",
-    "stylelint-config-standard": "^32.0.0",
-    "stylelint-prettier": "^3.0.0",
+    "ora": "^7.0.1",
+    "postcss": "^8.4.28",
+    "prettier": "^3.0.2",
+    "stylelint": "^15.10.2",
+    "stylelint-config-css-modules": "^4.3.0",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-prettier": "^4.0.2",
     "ts-node": "^10.9.1",
-    "typescript": "^5.0.3",
-    "typescript-plugin-css-modules": "^5.0.0"
+    "typescript": "^5.1.6",
+    "typescript-plugin-css-modules": "^5.0.1"
   },
   "overrides": {
     "graphql": "^16.6.0"

src/components/Layout.module.css

@@ -19,7 +19,9 @@
   transition: 0.4s var(--easing);
   transition-property: transform, background, border, box-shadow;
   border-top: 1px solid rgba(255 255 255 / 85%);
-  box-shadow: 0 1px 10px rgba(1 85 101 / 10%), 0 -1px 4px rgba(1 85 101 / 5%);
+  box-shadow:
+    0 1px 10px rgba(1 85 101 / 10%),
+    0 -1px 4px rgba(1 85 101 / 5%);
 }
 
 :global(.has-menu-open) .document {
@@ -28,7 +30,9 @@
 
 :global(.dark) .document {
   border-top-color: rgba(255 255 255 / 5%);
-  box-shadow: 0 1px 8px rgba(0 7 8 / 30%), 0 -1px 4px rgba(0 21 25 / 80%);
+  box-shadow:
+    0 1px 8px rgba(0 7 8 / 30%),
+    0 -1px 4px rgba(0 21 25 / 80%);
 }
 
 @media (min-width: 60rem) {

src/components/molecules/Web3Donation/index.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, useState } from 'react'
-import { parseEther } from '@ethersproject/units'
+import { parseEther } from 'viem'
 import { ConnectButton } from '@rainbow-me/rainbowkit'
 import { useDebounce } from 'use-debounce'
 import { usePrepareSendTransaction, useSendTransaction } from 'wagmi'
@@ -16,12 +16,11 @@ export default function Web3Donation({
   const [debouncedAmount] = useDebounce(amount, 500)
 
   const { config } = usePrepareSendTransaction({
-    request: {
-      to: address,
-      value: debouncedAmount ? parseEther(debouncedAmount) : undefined
-    }
+    to: address,
+    value: debouncedAmount ? parseEther(debouncedAmount) : undefined
   })
-  const { sendTransactionAsync } = useSendTransaction(config)
+  const { sendTransactionAsync, isError, isSuccess } =
+    useSendTransaction(config)
 
   const [message, setMessage] = useState<{ status: string; text: string }>()
   const [transactionHash, setTransactionHash] = useState<string>()
@@ -33,19 +32,24 @@ export default function Web3Donation({
     })
 
     try {
-      const tx = await sendTransactionAsync()
-      setTransactionHash(tx.hash)
+      const result = await sendTransactionAsync()
+
+      if (isError) {
+        throw new Error(null)
+      }
+
+      setTransactionHash(result?.hash)
       setMessage({
         status: 'loading',
         text: getTransactionMessage().waitingConfirmation
       })
 
-      await tx.wait()
-
-      setMessage({
-        status: 'success',
-        text: getTransactionMessage().success
-      })
+      if (isSuccess) {
+        setMessage({
+          status: 'success',
+          text: getTransactionMessage().success
+        })
+      }
     } catch (error) {
       setMessage(null)
     }

src/helpers/rainbowkit.ts

@@ -1,23 +1,24 @@
 import { Theme, getDefaultWallets } from '@rainbow-me/rainbowkit'
-import { configureChains, createClient } from 'wagmi'
+import { configureChains, createConfig } from 'wagmi'
 import { arbitrum, mainnet, optimism, polygon } from 'wagmi/chains'
 import { infuraProvider } from 'wagmi/providers/infura'
 import { publicProvider } from 'wagmi/providers/public'
 
-export const { chains, provider } = configureChains(
+export const { chains, publicClient } = configureChains(
   [mainnet, polygon, optimism, arbitrum],
   [infuraProvider({ apiKey: process.env.GATSBY_INFURA_ID }), publicProvider()]
 )
 
 export const { connectors } = getDefaultWallets({
   appName: 'kremalicious.com',
+  projectId: process.env.GATSBY_WALLETCONNECT_ID,
   chains
 })
 
-export const wagmiClient = createClient({
+export const wagmiConfig = createConfig({
   autoConnect: true,
   connectors,
-  provider
+  publicClient
 })
 
 export const theme = {

src/images/mastodon.svg

@@ -1,7 +1,7 @@
 <svg
-  width="23px"
-  height="24px"
-  viewBox="0 0 23 24"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"

src/pages/404.module.css

@@ -39,8 +39,14 @@
   border-radius: 100%;
   display: block;
   background: red;
-  box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red,
-    0 0 25px red, 0 0 30px red, 0 0 40px red;
+  box-shadow:
+    0 0 5px red,
+    0 0 10px red,
+    0 0 15px red,
+    0 0 20px red,
+    0 0 25px red,
+    0 0 30px red,
+    0 0 40px red;
   animation: halpulse 7s infinite;
 }
 

src/pages/thanks.tsx

@@ -6,7 +6,7 @@ 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, wagmiClient } from '../helpers/rainbowkit'
+import { chains, theme, wagmiConfig } from '../helpers/rainbowkit'
 import { useSiteMetadata } from '../hooks/useSiteMetadata'
 import * as styles from './thanks.module.css'
 
@@ -48,7 +48,7 @@ export default function Thanks(): ReactElement {
         <h1 className={styles.title}>{meta.title}</h1>
       </header>
 
-      <WagmiConfig client={wagmiClient}>
+      <WagmiConfig config={wagmiConfig}>
         <RainbowKitProvider chains={chains} theme={theme}>
           <Web3Donation address={author.ether} />
         </RainbowKitProvider>
@@ -59,7 +59,7 @@ export default function Thanks(): ReactElement {
           Send Bitcoin or ERC-20 tokens from any wallet.
         </h3>
 
-        {coins.map(([key, value]) => (
+        {coins.map(([key, value]: [key: string, value: string]) => (
           <Coin key={key} title={key} address={value} />
         ))}
       </div>