UI: Upgrade to WalletConnect v2

projects/ui/.env.development

@@ -5,4 +5,5 @@
 # -----------------------
 VITE_SHOW_DEV_CHAINS=true
 VITE_ALCHEMY_API_KEY="ds4ljBC_Pq-PaIQ3aHo04t27y2n8qpry"
-VITE_THEGRAPH_API_KEY="4c0b9364a121c1f2aa96fe61cb73d705"
+VITE_THEGRAPH_API_KEY="4c0b9364a121c1f2aa96fe61cb73d705"
+VITE_WALLETCONNECT_PROJECT_ID=2159ea7542f2b547554f8c85eca0cec1

projects/ui/package.json

@@ -64,7 +64,7 @@
     "react-spring": "^9.4.4",
     "typescript": "^4.7.4",
     "util": "^0.12.4",
-    "wagmi": "^0.7.7",
+    "wagmi": "0.12.16",
     "web-vitals": "^1.0.1"
   },
   "devDependencies": {

projects/ui/src/components/Common/Connection/WalletDialog.tsx

@@ -35,7 +35,12 @@ const WalletDialog: FC<{
     [connect]
   );
   return (
-    <Dialog onClose={handleClose} open={open} fullScreen={fullScreen}>
+    <Dialog
+      sx={{ zIndex: 85 }}
+      onClose={handleClose}
+      open={open}
+      fullScreen={fullScreen}
+    >
       <StyledDialogTitle onClose={handleClose}>
         Connect a wallet
       </StyledDialogTitle>

projects/ui/src/components/Common/Form/TxnSettings.tsx

@@ -69,7 +69,7 @@ const TxnSettings: FC<{
         <Popper
           anchorEl={anchorEl}
           open={menuVisible}
-          sx={{ zIndex: 999 }}
+          sx={{ zIndex: 79 }}
           placement="bottom-end"
           // Align the menu to the bottom
           // right side of the anchor button.

projects/ui/src/components/Nav/NavBar.tsx

@@ -29,6 +29,7 @@ const NavBar: FC<{}> = ({ children }) => {
         position: 'sticky',
         bgcolor: 'background.default',
         borderBottom: `${NAV_BORDER_HEIGHT}px solid ${PAGE_BORDER_COLOR}`,
+        zIndex: 80,
       }}
     >
       {children}

projects/ui/src/graph/graphql.schema.json

@@ -93712,6 +93712,18 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "flagged",
+            "description": null,
+            "type": {
+              "kind": "SCALAR",
+              "name": "Boolean",
+              "ofType": null
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "id",
             "description": null,
@@ -152215,9 +152227,7 @@
         "name": "derivedFrom",
         "description": "creates a virtual field on the entity that may be queried but cannot be set manually through the mappings API.",
         "isRepeatable": false,
-        "locations": [
-          "FIELD_DEFINITION"
-        ],
+        "locations": ["FIELD_DEFINITION"],
         "args": [
           {
             "name": "field",
@@ -152241,20 +152251,14 @@
         "name": "entity",
         "description": "Marks the GraphQL type as indexable entity.  Each type that should be an entity is required to be annotated with this directive.",
         "isRepeatable": false,
-        "locations": [
-          "OBJECT"
-        ],
+        "locations": ["OBJECT"],
         "args": []
       },
       {
         "name": "include",
         "description": "Directs the executor to include this field or fragment only when the `if` argument is true.",
         "isRepeatable": false,
-        "locations": [
-          "FIELD",
-          "FRAGMENT_SPREAD",
-          "INLINE_FRAGMENT"
-        ],
+        "locations": ["FIELD", "FRAGMENT_SPREAD", "INLINE_FRAGMENT"],
         "args": [
           {
             "name": "if",
@@ -152278,11 +152282,7 @@
         "name": "skip",
         "description": "Directs the executor to skip this field or fragment when the `if` argument is true.",
         "isRepeatable": false,
-        "locations": [
-          "FIELD",
-          "FRAGMENT_SPREAD",
-          "INLINE_FRAGMENT"
-        ],
+        "locations": ["FIELD", "FRAGMENT_SPREAD", "INLINE_FRAGMENT"],
         "args": [
           {
             "name": "if",
@@ -152306,9 +152306,7 @@
         "name": "specifiedBy",
         "description": "Exposes a URL that specifies the behavior of this scalar.",
         "isRepeatable": false,
-        "locations": [
-          "SCALAR"
-        ],
+        "locations": ["SCALAR"],
         "args": [
           {
             "name": "url",
@@ -152332,9 +152330,7 @@
         "name": "subgraphId",
         "description": "Defined a Subgraph ID for an object type",
         "isRepeatable": false,
-        "locations": [
-          "OBJECT"
-        ],
+        "locations": ["OBJECT"],
         "args": [
           {
             "name": "id",
@@ -152356,4 +152352,4 @@
       }
     ]
   }
-}
+}

projects/ui/src/util/Client.ts

@@ -1,13 +1,12 @@
 import {
   createClient as createWagmiClient,
   configureChains,
-  chain,
   Chain,
 } from 'wagmi';
 import { alchemyProvider } from 'wagmi/providers/alchemy';
 import { publicProvider } from 'wagmi/providers/public';
 import { providers } from 'ethers';
-// import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
+import { mainnet, localhost } from 'wagmi/chains';
 
 import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
 import { InjectedConnector } from 'wagmi/connectors/injected';
@@ -44,7 +43,7 @@ export function jsonRpcBatchProvider({
         ..._chain,
         rpcUrls: {
           ..._chain.rpcUrls,
-          default: rpcConfig.http,
+          default: { http: [rpcConfig.http] },
         },
       },
       provider: () => {
@@ -80,7 +79,8 @@ const makeTestnet = (_chainId: number, name: string): Chain => ({
     symbol: 'ETH',
   },
   rpcUrls: {
-    default: TESTNET_RPC_ADDRESSES[_chainId],
+    default: { http: [TESTNET_RPC_ADDRESSES[_chainId]] },
+    public: { http: [TESTNET_RPC_ADDRESSES[_chainId]] },
   },
   blockExplorers: {
     default: { name: 'Etherscan', url: 'https://etherscan.io' },
@@ -90,10 +90,10 @@ const makeTestnet = (_chainId: number, name: string): Chain => ({
 
 // ------------------------------------------------------------
 
-const baseChains = [chain.mainnet];
+const baseChains: Chain[] = [mainnet];
 if (import.meta.env.VITE_SHOW_DEV_CHAINS) {
   baseChains.push(makeTestnet(SupportedChainId.TESTNET, 'Testnet'));
-  baseChains.push(chain.localhost);
+  baseChains.push(localhost);
 }
 
 const { chains, provider } = configureChains(baseChains, [
@@ -116,6 +116,11 @@ const { chains, provider } = configureChains(baseChains, [
   }),
 ]);
 
+const WALLETCONNECT_PROJECT_ID = import.meta.env.VITE_WALLETCONNECT_PROJECT_ID;
+if (!WALLETCONNECT_PROJECT_ID) {
+  console.warn('WalletConnect project ID not set');
+}
+
 const client = createWagmiClient({
   autoConnect: true,
   provider,
@@ -133,7 +138,8 @@ const client = createWagmiClient({
     new WalletConnectConnector({
       chains,
       options: {
-        qrcode: true,
+        projectId: WALLETCONNECT_PROJECT_ID,
+        showQrModal: true,
       },
     }),
     new CoinbaseWalletConnector({

projects/ui/vite.config.ts

@@ -28,18 +28,20 @@ const CSP = buildCSP({
   'connect-src': [
     '\'self\'',
     '*.alchemyapi.io', // Alchemy RPC
+    '*.alchemy.com', // Alchemy RPC
     'https://cloudflare-eth.com', // Cloudflare RPC
     '*.infura.io', // Infura RPC
     '*.bean.money', // Beanstalk APIs
     '*.snapshot.org', // Snapshot GraphQL API
     'https://api.thegraph.com/subgraphs/name/snapshot-labs/snapshot', // Snapshot Labs GraphQL API
     'wss://*.walletconnect.org',
     'wss://*.bridge.walletconnect.org',
-    'registry.walletconnect.com',
+    'wss://relay.walletconnect.com', // WalletConnect v2
+    '*.walletconnect.com', // WalletConnect v2
     'wss://*.walletlink.org',
     '*.coinbase.com', // Wallet: Coinbase
     '*.google-analytics.com',
-    '*.doubleclick.net'
+    '*.doubleclick.net',
   ],
   'style-src': [
     '\'self\'',