CentrifugeReact: Update web3-react to support WalletConnect v2 (#1475)

* Update web3-react packages to support wallet connect v2

* Update packages

* Add env variables

* Update lock file

centrifuge-app/.env-config/.env.altair

@@ -14,4 +14,5 @@ REACT_APP_SUBSCAN_URL=https://altair.subscan.io
 REACT_APP_TINLAKE_NETWORK=goerli
 REACT_APP_INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
 REACT_APP_WHITELISTED_ACCOUNTS=
-REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALJqPUHFzDR2VkoQYWefPQyzjGzKznNny2smXGQpSf3aMw19
+REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALJqPUHFzDR2VkoQYWefPQyzjGzKznNny2smXGQpSf3aMw19
+REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a

centrifuge-app/.env-config/.env.catalyst

@@ -14,4 +14,5 @@ REACT_APP_SUBSCAN_URL=
 REACT_APP_TINLAKE_NETWORK=goerli
 REACT_APP_INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
 REACT_APP_WHITELISTED_ACCOUNTS=
-REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=4bo2vNkwZtr2PuqppWwqya6dPC8MzxqZ4kgnAoTZyKo9Kxq8
+REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=4bo2vNkwZtr2PuqppWwqya6dPC8MzxqZ4kgnAoTZyKo9Kxq8
+REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a

centrifuge-app/.env-config/.env.demo

@@ -14,4 +14,5 @@ REACT_APP_TINLAKE_NETWORK=goerli
 REACT_APP_INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
 REACT_APP_WHITELISTED_ACCOUNTS=
 REACT_APP_NETWORK=centrifuge
-REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALwmJutBq95s41U9fWnoApCUgvPqPGTh1GSmFnQh5f9fWo93
+REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALwmJutBq95s41U9fWnoApCUgvPqPGTh1GSmFnQh5f9fWo93
+REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a

centrifuge-app/.env-config/.env.development

@@ -14,4 +14,5 @@ REACT_APP_SUBSCAN_URL=
 REACT_APP_TINLAKE_NETWORK=goerli
 REACT_APP_INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
 REACT_APP_WHITELISTED_ACCOUNTS=
-REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kAMBjCY4ZJCFbs9VGD1XY1D7SJ6kfN6kkZzDhe8YgbAs26Tsh
+REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kAMBjCY4ZJCFbs9VGD1XY1D7SJ6kfN6kkZzDhe8YgbAs26Tsh
+REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a

centrifuge-app/.env-config/.env.example

@@ -14,4 +14,5 @@ REACT_APP_SUBSCAN_URL=
 REACT_APP_TINLAKE_NETWORK=goerli
 REACT_APP_INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
 REACT_APP_WHITELISTED_ACCOUNTS=''
-REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALJqPUHFzDR2VkoQYWefPQyzjGzKznNny2smXGQpSf3aMw19
+REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALJqPUHFzDR2VkoQYWefPQyzjGzKznNny2smXGQpSf3aMw19
+REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a

centrifuge-app/.env-config/.env.production

@@ -14,4 +14,5 @@ REACT_APP_SUBSCAN_URL=https://centrifuge.subscan.io
 REACT_APP_TINLAKE_NETWORK=mainnet
 REACT_APP_INFURA_KEY=bf808e7d3d924fbeb74672d9341d0550
 REACT_APP_WHITELISTED_ACCOUNTS=''
-REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALJqPUHFzDR2VkoQYWefPQyzjGzKznNny2smXGQpSf3aMw19
+REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALJqPUHFzDR2VkoQYWefPQyzjGzKznNny2smXGQpSf3aMw19
+REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a

centrifuge-app/package.json

@@ -9,7 +9,7 @@
     "start:fabric": "cd ../fabric && yarn start && cd ../centrifuge-app",
     "start:centjs": "cd ../centrifuge-js && yarn start && cd ../centrifuge-app",
     "start:centReact": "cd ../centrifuge-react && yarn start && cd ../centrifuge-app",
-    "build": "yarn build:fabric && yarn build:centjs && yarn build:types && yarn build:app && yarn build:centReact",
+    "build": "yarn build:fabric && yarn build:centjs && yarn build:types && yarn build:centReact && yarn build:app",
     "build:app": "vite build",
     "build:types": "tsc",
     "build:fabric": "cd ../fabric && yarn build && cd ../centrifuge-app",
@@ -19,7 +19,8 @@
     "lint:fix": "npm run lint -- --fix",
     "test": "vitest",
     "coverage": "vitest run --coverage",
-    "test:ci": "vitest run"
+    "test:ci": "vitest run",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@centrifuge/centrifuge-js": "workspace:*",
@@ -36,6 +37,8 @@
     "@styled-system/css": "^5.1.5",
     "@styled-system/should-forward-prop": "^5.1.5",
     "@subwallet/wallet-connect": "^0.2.3",
+    "@walletconnect/ethereum-provider": "^2.8.3",
+    "@walletconnect/modal": "^2.5.4",
     "axios": "^0.24.0",
     "bn.js": "^5.2.1",
     "form-data": "^4.0.0",

centrifuge-app/src/components/Root.tsx

@@ -121,6 +121,7 @@ export function Root() {
               evmChains={evmChains}
               subscanUrl={import.meta.env.REACT_APP_SUBSCAN_URL}
               showAdvancedAccounts={showAdvancedAccounts}
+              walletConnectId={import.meta.env.REACT_APP_WALLETCONNECT_ID}
             >
               <OnboardingAuthProvider>
                 <OnboardingProvider>

centrifuge-react/package.json

@@ -68,14 +68,16 @@
     "@polkadot/react-identicon": "^3.1.4",
     "@subwallet/wallet-connect": "^0.2.3",
     "@types/bn.js": "^5",
-    "@walletconnect/ethereum-provider": "^1",
-    "@web3-react/coinbase-wallet": "8.1.2-beta.0",
-    "@web3-react/empty": "8.1.2-beta.0",
-    "@web3-react/gnosis-safe": "8.1.2-beta.0",
-    "@web3-react/metamask": "8.1.2-beta.0",
-    "@web3-react/store": "8.1.2-beta.0",
-    "@web3-react/types": "8.1.2-beta.0",
-    "@web3-react/walletconnect": "8.1.2-beta.0",
+    "@walletconnect/ethereum-provider": "^2.8.3",
+    "@walletconnect/modal": "^2.5.4",
+    "@web3-react/coinbase-wallet": "8.2.0",
+    "@web3-react/core": "^8.2.0",
+    "@web3-react/empty": "8.2.0",
+    "@web3-react/gnosis-safe": "8.2.0",
+    "@web3-react/metamask": "8.2.1",
+    "@web3-react/store": "8.2.0",
+    "@web3-react/types": "8.2.0",
+    "@web3-react/walletconnect-v2": "8.3.4",
     "bn.js": "^5.2.1",
     "buffer": "^6.0.3",
     "decimal.js-light": "^2.5.1",

centrifuge-react/src/components/Provider/Provider.tsx

@@ -19,6 +19,7 @@ export type ProviderProps = {
   evmAdditionalConnectors?: EvmConnectorMeta[]
   subscanUrl?: string
   transactionToastPositionProps?: TransactionToastsProps['positionProps']
+  walletConnectId?: string
 }
 
 export function Provider({
@@ -27,12 +28,18 @@ export function Provider({
   evmChains,
   evmAdditionalConnectors,
   subscanUrl,
+  walletConnectId,
   transactionToastPositionProps,
 }: ProviderProps) {
   return (
     <QueryClientProvider client={queryClient}>
       <CentrifugeProvider config={centrifugeConfig}>
-        <WalletProvider evmChains={evmChains} evmAdditionalConnectors={evmAdditionalConnectors} subscanUrl={subscanUrl}>
+        <WalletProvider
+          walletConnectId={walletConnectId}
+          evmChains={evmChains}
+          evmAdditionalConnectors={evmAdditionalConnectors}
+          subscanUrl={subscanUrl}
+        >
           <TransactionProvider>
             <TransactionToasts positionProps={transactionToastPositionProps} />
             {children}

centrifuge-react/src/components/WalletProvider/WalletProvider.tsx

@@ -3,7 +3,7 @@ import { isWeb3Injected } from '@polkadot/extension-dapp'
 import { getWallets } from '@subwallet/wallet-connect/dotsama/wallets'
 import { Wallet } from '@subwallet/wallet-connect/types'
 import { Web3ReactState } from '@web3-react/types'
-import { WalletConnect } from '@web3-react/walletconnect'
+import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
 import * as React from 'react'
 import { useQuery } from 'react-query'
 import { firstValueFrom } from 'rxjs'
@@ -84,6 +84,7 @@ type WalletProviderProps = {
   evmAdditionalConnectors?: EvmConnectorMeta[]
   subscanUrl?: string
   showAdvancedAccounts?: boolean
+  walletConnectId?: string
 }
 
 let cachedEvmConnectors: EvmConnectorMeta[] | undefined = undefined
@@ -96,12 +97,17 @@ export function WalletProvider({
     },
   },
   evmAdditionalConnectors,
+  walletConnectId,
   subscanUrl,
   showAdvancedAccounts,
 }: WalletProviderProps) {
   if (!evmChains[1]?.urls[0]) throw new Error('Mainnet should be defined in EVM Chains')
   const evmConnectors =
-    cachedEvmConnectors || (cachedEvmConnectors = getEvmConnectors(getEvmUrls(evmChains), evmAdditionalConnectors))
+    cachedEvmConnectors ||
+    (cachedEvmConnectors = getEvmConnectors(getEvmUrls(evmChains), {
+      additionalConnectors: evmAdditionalConnectors,
+      walletConnectId,
+    }))
 
   const [state, dispatch] = useWalletStateInternal(evmConnectors)
 
@@ -224,7 +230,7 @@ export function WalletProvider({
     const { connector } = wallet
     try {
       const accounts = await setPendingConnect(wallet, async () => {
-        await (connector instanceof WalletConnect
+        await (connector instanceof WalletConnectV2
           ? connector.activate(chainId)
           : connector.activate(chainId ? getAddChainParameters(evmChains, chainId) : undefined))
         return getStore(wallet.connector).getState().accounts

centrifuge-react/src/components/WalletProvider/evm/connectors.ts

@@ -5,7 +5,7 @@ import { CoinbaseWallet } from '@web3-react/coinbase-wallet'
 import { GnosisSafe } from '@web3-react/gnosis-safe'
 import { MetaMask } from '@web3-react/metamask'
 import { Connector } from '@web3-react/types'
-import { WalletConnect } from '@web3-react/walletconnect'
+import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
 import { isMobile } from '../../../utils/device'
 import { createConnector, isCoinbaseWallet, isInjected } from './utils'
 
@@ -24,15 +24,31 @@ export type EvmConnectorMeta = {
 
 export function getEvmConnectors(
   urls: { [chainId: number]: string[] },
-  additionalConnectors?: EvmConnectorMeta[]
+  {
+    walletConnectId,
+    additionalConnectors,
+  }: {
+    walletConnectId?: string
+    additionalConnectors?: EvmConnectorMeta[]
+    substrateEvmChainId?: number
+  } = {}
 ): EvmConnectorMeta[] {
   const [metaMask] = createConnector((actions) => new MetaMask({ actions }))
+  const { ['1']: _, ...optional } = urls
+  const chains = [1, ...Object.keys(optional).map(Number)]
+  if (!walletConnectId) {
+    throw new Error('WalletConnect ID is required')
+  }
   const [walletConnect] = createConnector(
     (actions) =>
-      new WalletConnect({
+      new WalletConnectV2({
         actions,
         options: {
-          rpc: urls,
+          projectId: walletConnectId,
+          chains: chains,
+          optionalChains: chains.slice(1),
+          showQrModal: true,
+          rpcMap: urls,
         },
       })
   )

fabric/src/theme/tokens/baseTheme.ts

@@ -30,8 +30,8 @@ export const baseTheme: Omit<FabricTheme, 'colors' | 'scheme'> = {
     buttonActive: `4px 4px 1px var(--fabric-color-focus)`,
   },
   zIndices: {
-    sticky: 100,
-    overlay: 200,
+    sticky: 10,
+    overlay: 50,
     onTopOfTheWorld: 1000, // use sparingly, only for edge cases
   },
 }