Migrating to WalletConnect v2

README.md

@@ -48,7 +48,10 @@ In order to customize your specific implementation, you will need to edit the de
 
 You must specify an API key from [Infura](https://www.infura.io/) as well as a chain id in your environment file. Use
 `1` for mainnet or `5` for goerli. Alternative providers can be used by modifying the `src/components/Providers.tsx`
-file. Use multiple `.env` fiels to set up `development` or `staging` environments on `testnet` if you wish to do so.
+file. Use multiple `.env` fields to set up `development` or `staging` environments on `testnet` if you wish to do so.
+
+You must also obtain and supply a projectId from [WalletConnect Cloud](https://cloud.walletconnect.com/). This is free 
+and only takes a few minutes.
 
 Additionally, you will need to edit the default configuration in the `src/contractConfig.ts` file -
 here you will find arrays for your mainnet and testnet contracts. Further configuration values like the number of

sample.env

@@ -6,6 +6,7 @@
 REACT_APP_EXPECTED_CHAIN_ID=3
 REACT_APP_GRAPHQL_URL=https://api.thegraph.com/subgraphs/name/artblocks/art-blocks-artist-staging-goerli
 
+REACT_APP_WALLET_CONNECT_PROJECT_ID=xyz789
 REACT_APP_INFURA_KEY=abc123
 REACT_APP_MERKLE_PROOF_API_URL=https://media.plottables.io/api/getMerkleProof
 REACT_APP_HOLDER_PROOF_API_URL=https://media.plottables.io/api/getHolderProof

src/components/Providers.tsx

@@ -8,7 +8,7 @@ import { mainnet, goerli } from 'wagmi/chains'
 import { infuraProvider } from "wagmi/providers/infura"
 import { publicProvider } from "wagmi/providers/public"
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client"
-import { GRAPHQL_URL, INFURA_KEY, EXPECTED_CHAIN_ID } from "config"
+import { GRAPHQL_URL, INFURA_KEY, EXPECTED_CHAIN_ID, WALLET_CONNECT_PROJECT_ID } from "config"
 
 const client = new ApolloClient({
   uri: GRAPHQL_URL,
@@ -29,7 +29,8 @@ const { chains, provider, webSocketProvider } = configureChains(
 
 const { connectors } = getDefaultWallets({
   appName: "Engine",
-  chains
+  chains,
+  projectId: WALLET_CONNECT_PROJECT_ID
 })
 
 const wagmiClient = createClient({

src/config.ts

@@ -2,6 +2,7 @@ import { mainnetContractConfig, testnetContractConfig } from "./contractConfig";
 
 export const EXPECTED_CHAIN_ID = Number(process.env.REACT_APP_EXPECTED_CHAIN_ID)
 export const GRAPHQL_URL = process.env.REACT_APP_GRAPHQL_URL
+export const WALLET_CONNECT_PROJECT_ID = process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID || ""
 export const INFURA_KEY = process.env.REACT_APP_INFURA_KEY || ""
 export const PROJECTS_PER_PAGE = 8
 export const TOKENS_PER_PAGE = 9