WIP: wagmi@2

codegen.ts

@@ -9,6 +9,9 @@ const config: CodegenConfig = {
   generates: {
     'src/gql/graphql.ts': {
       plugins: ['typescript', 'typescript-operations'],
+      config: {
+        ignoreEnumValuesFromSchema: true,
+      },
     },
   },
 }

package.json

@@ -43,17 +43,18 @@
     "@apollo/react-hooks": "^3.1.3",
     "@apollo/react-ssr": "^3.1.3",
     "@artsy/fresnel": "^6.1.0",
-    "@ensdomains/content-hash": "^2.5.7",
+    "@ensdomains/content-hash": "^3.0.0",
     "@matters/apollo-upload-client": "^11.1.0",
-    "@matters/matters-editor": "^0.3.0-alpha.4",
-    "@next/bundle-analyzer": "^13.4.9",
+    "@matters/matters-editor": "^0.3.0",
+    "@next/bundle-analyzer": "^14.2.5",
     "@reach/alert": "^0.18.0",
     "@reach/dialog": "^0.18.0",
     "@reach/visually-hidden": "^0.18.0",
-    "@sentry/browser": "^7.57.0",
-    "@storybook/addon-styling-webpack": "^0.0.5",
-    "@stripe/react-stripe-js": "^2.1.1",
-    "@stripe/stripe-js": "^1.54.1",
+    "@sentry/browser": "^7.119.0",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@stripe/react-stripe-js": "^2.8.0",
+    "@stripe/stripe-js": "^4.3.0",
+    "@tanstack/react-query": "^5.51.23",
     "@tippyjs/react": "^4.2.6",
     "@use-gesture/react": "^10.3.1",
     "apollo-cache-inmemory": "^1.6.6",
@@ -64,8 +65,8 @@
     "apollo-link-persisted-queries": "^0.2.5",
     "apollo-utilities": "^1.3.4",
     "autosize": "^6.0.1",
-    "classnames": "^2.3.2",
-    "clipboard-polyfill": "^4.0.2",
+    "classnames": "^2.5.1",
+    "clipboard-polyfill": "^4.1.0",
     "colorthief": "^2.4.0",
     "cross-env": "^7.0.3",
     "d3-array": "^2.12.1",
@@ -80,16 +81,15 @@
     "d3-transition": "^3.0.1",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",
-    "embla-carousel-react": "^7.1.0",
-    "express": "^4.17.1",
-    "file-type": "^16.5.4",
+    "embla-carousel-react": "^8.1.8",
+    "file-type": "^19.4.1",
     "fingerprintjs2": "^2.1.4",
-    "firebase": "^10.12.4",
-    "formik": "^2.4.2",
+    "firebase": "^10.13.0",
+    "formik": "^2.4.6",
     "graphql": "^14.7.0",
     "graphql-tag": "^2.12.6",
-    "husky": "^8.0.3",
-    "js-base64": "^3.7.5",
+    "husky": "^9.1.4",
+    "js-base64": "^3.7.7",
     "js-cookie": "^3.0.5",
     "jump.js": "^1.0.2",
     "lodash": "^4.17.21",
@@ -105,96 +105,86 @@
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^17.0.2",
-    "react-focus-lock": "^2.9.4",
+    "react-focus-lock": "^2.12.1",
     "react-hot-toast": "^2.4.1",
-    "react-intl": "^6.4.4",
+    "react-intl": "^6.6.8",
     "react-markdown": "^8.0.7",
-    "react-movable": "^3.0.4",
-    "react-photoswipe-gallery": "^3.0.1",
-    "react-spring": "^9.7.2",
+    "react-movable": "^3.3.1",
+    "react-photoswipe-gallery": "^3.0.2",
+    "react-spring": "^9.7.4",
     "react-stickynode": "^4.1.1",
     "url-loader": "^4.1.1",
-    "use-debounce": "^9.0.4",
-    "validator": "^13.11.0",
-    "viem": "^1.21.4",
-    "wagmi": "^1.4.13"
+    "use-debounce": "^10.0.2",
+    "validator": "^13.12.0",
+    "viem": "^2.19.7",
+    "wagmi": "^2.12.5"
   },
   "devDependencies": {
     "@apollo/react-testing": "^3.1.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.22.20",
-    "@csstools/postcss-global-data": "^2.0.0",
-    "@formatjs/cli": "^6.1.3",
-    "@graphql-codegen/cli": "3.3.1",
-    "@graphql-codegen/client-preset": "3.0.1",
-    "@playwright/test": "^1.35.1",
+    "@csstools/postcss-global-data": "^3.0.0",
+    "@formatjs/cli": "^6.2.12",
+    "@graphql-codegen/cli": "^5.0.2",
+    "@graphql-codegen/client-preset": "^4.3.3",
+    "@playwright/test": "^1.46.0",
     "@storybook/addon-a11y": "^7.6.1",
     "@storybook/addon-actions": "^7.6.1",
     "@storybook/addon-essentials": "^7.6.1",
     "@storybook/addon-links": "^7.6.1",
     "@storybook/addon-mdx-gfm": "^7.6.1",
     "@storybook/nextjs": "^7.6.1",
     "@storybook/react": "^7.6.1",
-    "@svgr/webpack": "^8.0.1",
-    "@synthetixio/synpress": "^3.7.1",
-    "@testing-library/jest-dom": "^6.1.4",
+    "@svgr/webpack": "^8.1.0",
+    "@synthetixio/synpress": "^3.7.3",
+    "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/autosize": "^4.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/autosize": "^4.0.3",
     "@types/d3": "^7.0.0",
-    "@types/express": "^4.17.9",
     "@types/fingerprintjs2": "^2.0.0",
-    "@types/js-cookie": "^3.0.3",
-    "@types/jump.js": "^1.0.4",
-    "@types/lodash": "^4.14.195",
-    "@types/nprogress": "0.2.0",
+    "@types/js-cookie": "^3.0.6",
+    "@types/jump.js": "^1.0.6",
+    "@types/lodash": "^4.17.7",
+    "@types/nprogress": "0.2.3",
     "@types/react": "^18.0.26",
-    "@types/react-beautiful-dnd": "^13.1.4",
+    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.0.10",
-    "@types/react-responsive": "^8.0.5",
-    "@types/react-stickynode": "^4.0.0",
-    "@types/react-window": "^1.8.5",
-    "@types/segment-analytics": "0.0.34",
-    "@types/validator": "^13.7.17",
-    "@types/webpack-env": "^1.18.1",
-    "@vitejs/plugin-react": "^4.1.0",
-    "@vitest/coverage-v8": "^0.34.6",
-    "@vitest/ui": "^0.34.6",
-    "babel-loader": "^9.1.3",
-    "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-polyfill": "^6.26.0",
+    "@types/react-stickynode": "^4.0.3",
+    "@types/validator": "^13.12.0",
+    "@types/webpack-env": "^1.18.5",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.0.5",
+    "@vitest/ui": "^2.0.5",
     "concurrently": "^8.2.2",
-    "css-has-pseudo": "^6.0.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.47.0",
-    "eslint-config-next": "^13.4.9",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-formatjs": "^4.10.3",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-testing-library": "^6.1.0",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.5",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-formatjs": "^4.13.3",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-testing-library": "^6.3.0",
     "file-loader": "^6.2.0",
-    "jsdom": "^22.1.0",
+    "jsdom": "^24.1.1",
     "lorem-ipsum": "^2.0.8",
-    "next-router-mock": "^0.9.10",
-    "postcss-calc": "^9.0.1",
+    "next-router-mock": "^0.9.13",
+    "postcss-calc": "^10.0.1",
     "postcss-color-function": "^4.1.0",
-    "postcss-mixins": "^9.0.4",
-    "postcss-preset-env": "^9.0.0",
-    "prettier": "^3.0.0",
+    "postcss-mixins": "^10.0.1",
+    "postcss-preset-env": "^10.0.1",
+    "prettier": "^3.3.3",
     "storybook": "^7.6.1",
     "storybook-css-modules": "^1.0.8",
-    "stylelint": "^15.10.1",
+    "stylelint": "^15.11.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recess-order": "^4.2.0",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-prettier": "^4.0.0",
-    "typescript": "^5.1.6",
+    "typescript": "^5.5.4",
     "vite-plugin-svgr": "^3.3.0",
-    "vitest": "^0.34.6",
+    "vitest": "^2.0.5",
     "vitest-canvas-mock": "^0.3.3",
-    "webpack-merge": "^5.9.0"
+    "webpack-merge": "^6.0.1"
   },
   "overrides": {
     "@synthetixio/synpress": {

src/common/utils/form/image.tsx

@@ -1,4 +1,4 @@
-import FileType from 'file-type/browser'
+import { fileTypeFromBlob, type FileTypeResult } from 'file-type'
 import { FormattedMessage } from 'react-intl'
 
 import {
@@ -10,9 +10,8 @@ import {
 } from '~/common/enums'
 import { toast } from '~/components'
 
-export const getFileType = (
-  file: File
-): Promise<FileType.FileTypeResult | undefined> => FileType.fromBlob(file)
+export const getFileType = (file: File): Promise<FileTypeResult | undefined> =>
+  fileTypeFromBlob(file)
 
 // return meme type or null if not valid
 export const validateImage = (image: File, isAvatar: boolean = false) =>

src/common/utils/wallet.ts

@@ -1,15 +1,13 @@
-import { Chain, configureChains, createConfig } from 'wagmi'
+import { createConfig, http } from 'wagmi'
 import {
-  goerli,
   mainnet,
   optimism,
   optimismSepolia,
   polygon,
   polygonMumbai,
+  sepolia,
 } from 'wagmi/chains'
-import { MetaMaskConnector } from 'wagmi/connectors/metaMask'
-import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
-import { alchemyProvider } from 'wagmi/providers/alchemy'
+import { injected, walletConnect } from 'wagmi/connectors'
 
 import { Chain as GQLChain } from '~/gql/graphql'
 
@@ -20,51 +18,54 @@ const alchemyId = process.env.NEXT_PUBLIC_ALCHEMY_KEY!
 export const featureSupportedChains = {
   billboard: isProd ? [optimism] : [optimismSepolia],
   curation: isProd ? [optimism] : [optimismSepolia],
-  ens: isProd ? [mainnet] : [goerli],
+  ens: isProd ? [mainnet] : [sepolia],
 }
 
 export const explorers = {
   [GQLChain.Polygon]: isProd
-    ? polygon.blockExplorers.etherscan
-    : polygonMumbai.blockExplorers.etherscan,
+    ? polygon.blockExplorers.default.url
+    : polygonMumbai.blockExplorers.default.url,
   [GQLChain.Optimism]: isProd
-    ? optimism.blockExplorers.etherscan
-    : optimismSepolia.blockExplorers.default, // TODO: update to etherscan
+    ? optimism.blockExplorers.default.url
+    : optimismSepolia.blockExplorers.default.url,
 }
 
-const defaultChains: Chain[] = isProd
-  ? [mainnet, optimism]
-  : [goerli, optimismSepolia]
+const connectors = [
+  injected({
+    target: 'metaMask',
+    shimDisconnect: true,
+  }),
+  ...(isTest
+    ? []
+    : [
+        walletConnect({
+          projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_ID!,
+          showQrModal: true,
+        }),
+      ]),
+]
 
-export const { publicClient, chains } = configureChains(defaultChains, [
-  alchemyProvider({ apiKey: alchemyId }),
-])
-
-export const wagmiConfig = createConfig({
-  autoConnect: true,
-  connectors: [
-    new MetaMaskConnector({
-      chains,
-      options: {
-        // For disconnecting from metamask
-        shimDisconnect: true,
-        UNSTABLE_shimOnConnectSelectAccount: true,
+export const wagmiConfig = isProd
+  ? createConfig({
+      chains: [mainnet, optimism],
+      transports: {
+        [mainnet.id]: http(`https://eth-mainnet.g.alchemy.com/v2/${alchemyId}`),
+        [optimism.id]: http(
+          `https://opt-mainnet.g.alchemy.com/v2/${alchemyId}`
+        ),
+      },
+      connectors,
+    })
+  : createConfig({
+      chains: [sepolia, optimismSepolia],
+      transports: {
+        [sepolia.id]: http(`https://eth-sepolia.g.alchemy.com/v2/${alchemyId}`),
+        [optimismSepolia.id]: http(
+          `https://opt-sepolia.g.alchemy.com/v2/${alchemyId}`
+        ),
       },
-    }),
-    ...(isTest
-      ? []
-      : [
-          new WalletConnectConnector({
-            chains,
-            options: {
-              projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_ID!,
-              showQrModal: true,
-            },
-          }),
-        ]),
-  ],
-  publicClient,
-})
+      connectors,
+    })
 
 export const MaxUint256 = BigInt(
   '0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff'