fix(wagmi-connectors,web3-modal,forge-web3,skillforge-widget,skillfor…

…ge-ui): Update wagmi/viem/react-query versions and fix issues (#100) * fix(wagmi-connectors): remove custom PstlWeb3AuthConnector in favour of new official wagmi Web3AuthConnector * fix(web3-modal): fixes from viem/wagmi update 1. remove deprecated code 2. update api 3. fix fixtures * fix(skillforge-widget): fixes from viem/wagmi update * fix(forge-web3): fixes from viem/wagmi update * fix(skillforge-ui): viem/wagmi update fixes * chore(root,skillforge-ui,forge-web3,skillforge-widget,wagmi-connectors,web3-modal): update viem/wagmi and set resolutions and peerDeps * chore: update yarn.lock * fix(skillforge-ui): update craco and rewire overrides * fix(skillforge-ui): fix fixture * fix(web3-modal): disable focus lock * fix(web3-modal): fix fixed import path * styles(web3-modal): mobile updates * chore(skillforge-ui): set satisfying type to config obj * styles(web3-modal): remove magic number * chore(skillforge-widget): fix cosmos test env webpack * fix(web3-modal): disable structural sharing [to be reverted] * chore(forge-web3,web3-modal,skillforge-ui,root): fix webpack config files, update react-query version and update root yarn.lock * chore(forge-web3,wagmi-connectors): lint * chore: update yarn.lock * chore: revert @tanstack/react-query update
PAST3LLE · Sep 3, 2024 · 44dac72 · 44dac72
1 parent 282d818
commit 44dac72
Show file tree

Hide file tree

Showing 39 changed files with 3,772 additions and 4,521 deletions.
diff --git a/apps/skillforge-ui/config-overrides.js b/apps/skillforge-ui/config-overrides.js
@@ -16,6 +16,7 @@ module.exports = {
       http: require.resolve('stream-http'),
       os: require.resolve('os-browserify'),
       url: require.resolve('url'),
+      vm: require.resolve("vm-browserify"),
       zlib: require.resolve('browserify-zlib')
     })
     config.resolve.fallback = fallback
@@ -35,6 +36,14 @@ module.exports = {
       }
     })
 
+    // fixes "Uncaught TypeError: (0 , superstruct_1.boolean) is not a function" error
+    config.module.rules.map(rule => {
+      if (rule.oneOf instanceof Array) {
+        rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/];
+      }
+      return rule;
+    });
+
     // Bundle size warning bypass
     config.plugins.forEach((plugin) => {
       if ('config' in plugin) {

diff --git a/apps/skillforge-ui/craco.config.js b/apps/skillforge-ui/craco.config.js
@@ -21,6 +21,7 @@ module.exports = {
         http: require.resolve('stream-http'),
         os: require.resolve('os-browserify'),
         url: require.resolve('url'),
+        vm: require.resolve("vm-browserify"),
         zlib: require.resolve('browserify-zlib')
       })
       config.resolve.fallback = fallback

diff --git a/apps/skillforge-ui/package.json b/apps/skillforge-ui/package.json
@@ -37,10 +37,10 @@
   },
   "resolutions": {
     "**/*/@tanstack/react-query": "^5.x",
-    "**/*/viem": "^2.x",
-    "viem": "^2.x",
-    "**/*/wagmi": "^2.x",
-    "wagmi": "^2.x",
+    "**/*/viem": ">=2.10.0 < 3",
+    "viem": ">=2.10.0 < 3",
+    "**/*/wagmi": ">=2.5.5 < 3",
+    "wagmi": ">=2.5.5 < 3",
     "styled-components": "^5.x"
   },
   "dependencies": {
@@ -50,11 +50,10 @@
     "@past3lle/theme": "^2.1.0",
     "@past3lle/utils": "^2.1.0",
     "@tanstack/react-query": "^5.17.15",
-    "@web3auth/torus-wallet-connector-plugin": "7.2.1",
     "react-helmet-async": "^1.3.0",
     "styled-components": "^5.3.5",
-    "viem": "^2.3.1",
-    "wagmi": "^2.2.1"
+    "viem": "^2.21.1",
+    "wagmi": "^2.12.8"
   },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
@@ -92,6 +91,7 @@
     "source-map-explorer": "^2.5.3",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
+    "vm-browserify": "^1.1.2",
     "url": "^0.11.0",
     "web-vitals": "^3.1.0",
     "workbox-webpack-plugin": "^7.0.0"

diff --git a/apps/skillforge-ui/src/web3/config/chains.ts b/apps/skillforge-ui/src/web3/config/chains.ts
@@ -1,31 +1,4 @@
-import { polygon, sepolia } from 'viem/chains'
-import { defineChain } from 'viem/utils'
-
-// TODO: remove when viem adds amoy polygon
-const amoy = defineChain({
-  id: 80002,
-  name: 'Amoy',
-  nativeCurrency: {
-    decimals: 18,
-    name: 'Matic',
-    symbol: 'MATIC'
-  },
-  rpcUrls: {
-    default: {
-      http: ['https://rpc-amoy.polygon.technology/'],
-      webSocket: ['wss://rpc-amoy.polygon.technology/']
-    }
-  },
-  blockExplorers: {
-    default: { name: 'Explorer', url: 'https://amoy.polygonscan.com/' }
-  },
-  contracts: {
-    multicall3: {
-      address: '0xcA11bde05977b3631167028862bE2a173976CA11',
-      blockCreated: 3127388
-    }
-  }
-})
+import { polygon, sepolia, polygonAmoy as amoy } from 'viem/chains'
 
 // Sepolia, Polygon, Amoy Polygon (test)
 export type SupportedChainsDevelop = 11155111 | 137 | 80002

diff --git a/apps/skillforge-ui/src/web3/connectors/index.ts b/apps/skillforge-ui/src/web3/connectors/index.ts
@@ -1,5 +1,6 @@
 import METAMASK_ICON from '../../assets/png/metamask.png'
-import { ledgerHid, ledgerLive, pstlWeb3Auth, PstlWeb3AuthParameters } from '@past3lle/wagmi-connectors'
+import { ledgerHid, ledgerLive, web3Auth, Web3AuthParameters } from '@past3lle/wagmi-connectors'
+import { PstlWeb3ModalProps } from '@past3lle/web3-modal'
 import { ASSETS_MAP } from 'assets'
 import GOOGLE_APPLE_LOGO from 'assets/png/google-apple.png'
 import { skillforgeTheme } from 'theme/skillforge'
@@ -8,7 +9,7 @@ import { injected } from 'wagmi/connectors'
 
 const IS_SERVER = typeof globalThis?.window === 'undefined'
 
-function _getWhitelistTheme(): PstlWeb3AuthParameters['uiConfig'] {
+function _getWhitelistTheme(): Web3AuthParameters['uiConfig'] {
   if (!JSON.parse(process.env.REACT_APP_WEB3AUTH_WHITELIST_ENABLED || 'false')) return
 
   return {
@@ -48,14 +49,13 @@ const connectors = {
         }
       }
     }),
-    pstlWeb3Auth({
-      network: process.env.REACT_APP_WEB3_AUTH_NETWORK as PstlWeb3AuthParameters['network'],
+    web3Auth({
+      network: process.env.REACT_APP_WEB3_AUTH_NETWORK as Web3AuthParameters['network'],
       projectId: process.env.REACT_APP_WEB3AUTH_ID as string,
       storageKey: 'session',
-      preset: 'DISALLOW_EXTERNAL_WALLETS',
       mfaLevel: 'none',
       uxMode: 'popup',
-      ..._getWhitelistTheme()
+      uiConfig: _getWhitelistTheme()
     })
   ],
   overrides: {
@@ -82,6 +82,6 @@ const connectors = {
       rank: 0
     }
   }
-}
+} satisfies PstlWeb3ModalProps['connectors']
 const frameConnectors = [ledgerLive()]
 export { connectors, frameConnectors }
diff --git a/apps/skillforge-ui/src/web3/connectors/web3authPlugins.ts b/apps/skillforge-ui/src/web3/connectors/web3authPlugins.ts
diff --git a/package.json b/package.json
@@ -40,14 +40,6 @@
     "version:ci": "yarn version:cc --yes",
     "version:update": "node scripts/updateVersions.mjs"
   },
-  "resolutions": {
-    "@tanstack/react-query": "^5.x",
-    "**/*/@tanstack/react-query": "^5.x",
-    "**/*/viem": "^2.x",
-    "viem": "^2.x",
-    "**/*/wagmi": ">=2.5.5 < 3",
-    "wagmi": ">=2.5.5 < 3"
-  },
   "devDependencies": {
     "@babel/preset-typescript": "^7.18.6",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",
@@ -68,6 +60,14 @@
     "@babel/preset-env": "^7.20.2"
   },
   "dependencies": {},
+  "resolutions": {
+    "@tanstack/react-query": "^5.x",
+    "**/*/@tanstack/react-query": "^5.x",
+    "**/*/viem": ">=2.10.0 < 3",
+    "viem": ">=2.10.0 < 3",
+    "**/*/wagmi": ">=2.5.5 < 3",
+    "wagmi": ">=2.5.5 < 3"
+  },
   "workspaces": [
     "packages/*",
     "apps/*"

diff --git a/packages/forge-web3/package.json b/packages/forge-web3/package.json
@@ -66,21 +66,12 @@
   "bugs": {
     "url": "https://github.com/PAST3LLE/past3lle-monorepo/issues"
   },
-  "resolutions": {
-    "@wagmi/core": ">2 < 3",
-    "**/*/@wagmi/core": ">2 < 3",
-    "**/*/@tanstack/react-query": "^5.x",
-    "**/*/viem": "^2.x",
-    "viem": "^2.x",
-    "**/*/wagmi": "^2.x",
-    "wagmi": "^2.x"
-  },
   "peerDependencies": {
     "@tanstack/react-query": "^5.x",
     "react": ">=16",
     "styled-components": ">=5",
-    "viem": "^2.x",
-    "wagmi": "^2.x"
+    "viem": ">=2.10.0 <3",
+    "wagmi": ">=2.5.5 < 3"
   },
   "dependencies": {
     "@past3lle/hooks": "^2.1.0",
@@ -101,8 +92,15 @@
     "react-cosmos": "^5.7.2",
     "react-dom": "^18.2.0",
     "styled-components": "^5.3.6",
-    "viem": "^2.3.1",
-    "wagmi": "^2.2.1"
+    "viem": "^2.21.1",
+    "wagmi": "^2.12.8"
+  },
+  "resolutions": {
+    "**/*/@tanstack/react-query": "^5.x",
+    "**/*/viem": ">=2.10.0 < 3",
+    "viem": ">=2.10.0 < 3",
+    "**/*/wagmi": ">=2.5.5 < 3",
+    "wagmi": ">=2.5.5 < 3"
   },
   "browserslist": {
     "production": [

diff --git a/packages/forge-web3/src/constants/chains.ts b/packages/forge-web3/src/constants/chains.ts
@@ -1,30 +1,3 @@
-import { defineChain } from 'viem'
-import { Chain, polygon, sepolia } from 'viem/chains'
+import { Chain, polygon, polygonAmoy, sepolia } from 'viem/chains'
 
-// TODO: remove when viem adds amoy polygon
-export const amoy = defineChain({
-  id: 80002,
-  name: 'Amoy',
-  nativeCurrency: {
-    decimals: 18,
-    name: 'Matic',
-    symbol: 'MATIC'
-  },
-  rpcUrls: {
-    default: {
-      http: ['https://rpc-amoy.polygon.technology/'],
-      webSocket: ['wss://rpc-amoy.polygon.technology/']
-    }
-  },
-  blockExplorers: {
-    default: { name: 'Explorer', url: 'https://amoy.polygonscan.com/' }
-  },
-  contracts: {
-    multicall3: {
-      address: '0xcA11bde05977b3631167028862bE2a173976CA11',
-      blockCreated: 3127388
-    }
-  }
-})
-
-export const FORGE_SUPPORTED_CHAINS = [sepolia, polygon, amoy] as const satisfies readonly [Chain, ...Chain[]]
+export const FORGE_SUPPORTED_CHAINS = [sepolia, polygon, polygonAmoy] as const satisfies readonly [Chain, ...Chain[]]
diff --git a/packages/forge-web3/src/fixtures/chains.ts b/packages/forge-web3/src/fixtures/chains.ts
@@ -1,3 +1,5 @@
-import { sepolia } from 'viem/chains'
+import { polygonAmoy, sepolia } from 'viem/chains'
 
-export const chains = [sepolia] as const
+import { ForgeChainsMinimum } from '..'
+
+export const chains = [sepolia, polygonAmoy] as const satisfies ForgeChainsMinimum
diff --git a/packages/forge-web3/src/hooks/contracts/useForgeClaimLockedSkill.ts b/packages/forge-web3/src/hooks/contracts/useForgeClaimLockedSkill.ts
@@ -64,7 +64,7 @@ export function useForgeClaimLockedSkillCallback() {
         address: mergeManager,
         abi: MergeManager__factory.abi,
         functionName: 'claimLockedSkill',
-        args: [formattedArgs]
+        args: [formattedArgs as never]
       }).then((hash) => {
         addPending(hash as Hash, { metadata: { forgeSkillId: skill?.properties.id, forgeTransactionType: 'claim' } })
         return hash

diff --git a/packages/forge-web3/src/types/addresses.ts b/packages/forge-web3/src/types/addresses.ts
@@ -1,4 +1,4 @@
-import { Address } from 'abitype'
+import { Address } from 'viem'
 
 import { ForgeChainsMinimum } from './appConfig'
 

diff --git a/packages/forge-web3/webpack.override.js b/packages/forge-web3/webpack.override.js
@@ -48,6 +48,7 @@ module.exports = (webpackConfig) => (
                 https: require.resolve("https-browserify"),
                 os: require.resolve("os-browserify"),
                 url: require.resolve("url"),
+                vm: require.resolve("vm-browserify"),
                 zlib: require.resolve("browserify-zlib")
             },
         },

diff --git a/packages/skillforge-widget/package.json b/packages/skillforge-widget/package.json
@@ -62,20 +62,13 @@
       "<rootDir>src/**/__tests__/*.{ts,tsx}"
     ]
   },
-  "resolutions": {
-    "**/*/@tanstack/react-query": "^5.x",
-    "**/*/viem": "^2.x",
-    "viem": "^2.x",
-    "**/*/wagmi": "^2.x",
-    "wagmi": "^2.x"
-  },
   "peerDependencies": {
     "@tanstack/react-query": "^5.x",
     "jotai": ">=2",
     "react": ">=16",
     "styled-components": ">=5",
-    "viem": "^2.x",
-    "wagmi": "^2.x"
+    "viem": ">=2.10.0 < 3",
+    "wagmi": ">=2.5.5 < 3"
   },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
@@ -95,8 +88,8 @@
     "react-cosmos": "^5.7.2",
     "react-dom": "^18.2.0",
     "styled-components": "^5.3.5",
-    "viem": "^2.3.1",
-    "wagmi": "^2.2.1"
+    "viem": "^2.21.1",
+    "wagmi": "^2.12.8"
   },
   "dependencies": {
     "@past3lle/components": "^2.1.0",
@@ -108,6 +101,14 @@
     "jotai": "^2.6.0",
     "polished": "^4.2.2"
   },
+  "resolutions": {
+    "**/*/@tanstack/react-query": "^5.x",
+    "**/*/viem": ">=2.10.0 < 3",
+    "viem": ">=2.10.0 < 3",
+    "**/*/wagmi": ">=2.5.5 < 3",
+    "wagmi": ">=2.5.5 < 3"
+  },
+
   "bugs": {
     "url": "https://github.com/PAST3LLE/past3lle-monorepo/issues"
   },