Support for WalletConnect v2

.envrc.example

@@ -3,6 +3,9 @@ export NEXT_PUBLIC_PT_ENV=dev
 # Blank if development. Domain if production.
 export NEXT_PUBLIC_DOMAIN_NAME=
 
+# WalletConnect Project ID
+export NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=''
+
 # Locize API keys for localization.
 export NEXT_PUBLIC_LOCIZE_PROJECT_ID=4436efaa-7b18-4332-a5e2-57437e041619
 export LOCIZE_PROJECTID=$NEXT_PUBLIC_LOCIZE_PROJECT_ID

package.json

@@ -34,11 +34,13 @@
   },
   "dependencies": {
     "@pooltogether/etherplex": "^1.1.4",
-    "@pooltogether/hooks": "^2.0.0-beta.6",
+    "@pooltogether/hooks": "^2.1.0",
     "@pooltogether/pooltogether-contracts": "^3.4.4",
-    "@pooltogether/react-components": "2.0.4",
-    "@pooltogether/utilities": "^0.6.3",
-    "@pooltogether/wallet-connection": "^1.0.0-beta.4",
+    "@pooltogether/react-components": "2.0.5",
+    "@pooltogether/utilities": "^0.7.0",
+    "@pooltogether/wallet-connection": "1.1.0",
+    "@rainbow-me/rainbowkit": "0.12.15",
+    "uuid": "^9.0.0",
     "@reach/dialog": "^0.15.3",
     "@reach/menu-button": "^0.15.3",
     "@reach/tooltip": "^0.15.3",
@@ -94,6 +96,7 @@
     "solidity-validator": "^0.5.2",
     "tailwindcss": "^2.2.19",
     "typescript": "^4.8.3",
-    "wagmi": "0.6.4"
+    "wagmi": "0.12.17",
+    "@wagmi/chains": "1.3.0"
   }
 }

src/components/AppContainer.tsx

@@ -6,6 +6,9 @@ import {
   getReadProvider,
   initRpcUrls
 } from '@pooltogether/wallet-connection'
+import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc'
+import { publicProvider } from '@wagmi/core/providers/public'
+import { Trans } from 'next-i18next'
 import { Provider as JotaiProvider } from 'jotai'
 import { useTranslation } from 'next-i18next'
 import { ThemeProvider, useTheme } from 'next-themes'
@@ -14,13 +17,21 @@ import React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { ReactQueryDevtools } from 'react-query/devtools'
 import { ToastContainer } from 'react-toastify'
-import { createClient, useAccount, WagmiConfig } from 'wagmi'
+import { configureChains, Connector, createClient, useAccount, WagmiConfig } from 'wagmi'
 import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'
 import { InjectedConnector } from 'wagmi/connectors/injected'
 import { MetaMaskConnector } from 'wagmi/connectors/metaMask'
 import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
 import { RPC_URLS, SUPPORTED_CHAINS } from '../constants'
 import { CustomErrorBoundary } from './CustomErrorBoundary'
+import {
+  RainbowKitProvider,
+  lightTheme,
+  darkTheme,
+  DisclaimerComponent
+} from '@rainbow-me/rainbowkit'
+import { getSupportedChains } from '../utils/getSupportedChains'
+import { getWalletConnectors } from '../services/walletConnection'
 
 // Initialize react-query Query Client
 const queryClient = new QueryClient({
@@ -38,40 +49,23 @@ const queryClient = new QueryClient({
 // Initialize global RPC URLs for external packages
 initRpcUrls(RPC_URLS)
 
-// Initialize WAGMI wallet connectors
-const chains = SUPPORTED_CHAINS[getAppEnvString()].map((chain) => {
-  if (!!RPC_URLS[chain.id]) {
-    chain.rpcUrls.default = RPC_URLS[chain.id]
-  }
-  return chain
-})
+const supportedChains = getSupportedChains()
 
-const connectors = () => {
-  return [
-    new MetaMaskConnector({ chains, options: {} }),
-    new WalletConnectConnector({
-      chains,
-      options: {
-        bridge: 'https://pooltogether.bridge.walletconnect.org/',
-        qrcode: true
-      }
-    }),
-    new CoinbaseWalletConnector({
-      chains,
-      options: {
-        appName: 'PoolTogether'
-      }
-    }),
-    new InjectedConnector({ chains, options: {} })
-  ]
-}
+const { chains, provider } = configureChains(supportedChains, [
+  jsonRpcProvider({
+    rpc: (chain) => ({
+      http: RPC_URLS[chain.id]
+    })
+  }),
+  publicProvider()
+])
+
+const connectors: () => Connector[] = getWalletConnectors(supportedChains)
 
 const wagmiClient = createClient({
   autoConnect: true,
   connectors,
-  provider: ({ chainId }) => {
-    return getReadProvider(chainId || CHAIN_ID.mainnet)
-  }
+  provider
 })
 
 /**
@@ -82,17 +76,39 @@ const wagmiClient = createClient({
 export const AppContainer: React.FC<AppProps> = (props) => {
   return (
     <WagmiConfig client={wagmiClient}>
-      <JotaiProvider>
-        <QueryClientProvider client={queryClient}>
-          <ReactQueryDevtools />
-          <ThemeProvider attribute='class' defaultTheme='dark'>
-            <ThemedToastContainer />
-            <CustomErrorBoundary>
-              <Content {...props} />
-            </CustomErrorBoundary>
-          </ThemeProvider>
-        </QueryClientProvider>
-      </JotaiProvider>
+      <RainbowKitProvider
+        theme={{
+          lightMode: lightTheme({
+            accentColor: '#ff77e1',
+            accentColorForeground: '#1A1B1F',
+            borderRadius: 'small',
+            overlayBlur: 'small'
+          }),
+          darkMode: darkTheme({
+            accentColor: '#35f0d0',
+            accentColorForeground: '#1A1B1F',
+            borderRadius: 'small',
+            overlayBlur: 'small'
+          })
+        }}
+        chains={chains}
+        appInfo={{
+          appName: 'PoolTogether',
+          disclaimer: Disclaimer
+        }}
+      >
+        <JotaiProvider>
+          <QueryClientProvider client={queryClient}>
+            <ReactQueryDevtools />
+            <ThemeProvider attribute='class' defaultTheme='dark'>
+              <ThemedToastContainer />
+              <CustomErrorBoundary>
+                <Content {...props} />
+              </CustomErrorBoundary>
+            </ThemeProvider>
+          </QueryClientProvider>
+        </JotaiProvider>
+      </RainbowKitProvider>
     </WagmiConfig>
   )
 }
@@ -128,3 +144,17 @@ const ThemedToastContainer = (props) => {
     />
   )
 }
+
+const Disclaimer: DisclaimerComponent = ({ Text, Link }) => (
+  <Text>
+    <Trans
+      i18nKey='connectWalletTermsAndDisclaimerBlurb'
+      components={{
+        termsLink: <Link href='https://pooltogether.com/terms/' children={undefined} />,
+        disclaimerLink: (
+          <Link href='https://pooltogether.com/protocol-disclaimer/' children={undefined} />
+        )
+      }}
+    />
+  </Text>
+)

src/components/Layout/FullWalletConnectionButtonWrapper.tsx

@@ -1,6 +1,6 @@
-import { ButtonTheme } from '@pooltogether/react-components'
-import { FullWalletConnectionButton } from '@pooltogether/wallet-connection'
 import { getSupportedChains } from '@utils/getSupportedChains'
+import { ButtonRadius, ButtonTheme } from '@pooltogether/react-components'
+import { FullWalletConnectionButton } from '@pooltogether/wallet-connection'
 import { Trans } from 'next-i18next'
 
 /**
@@ -14,8 +14,9 @@ export const FullWalletConnectionButtonWrapper = (props) => {
   return (
     <FullWalletConnectionButton
       {...props}
-      theme={ButtonTheme.transparent}
       chains={chains}
+      theme={ButtonTheme.transparent}
+      radius={ButtonRadius.full}
       TosDisclaimer={<TosDisclaimer />}
     />
   )

src/components/ProposalCreation/ProposalCreationUI.tsx

@@ -5,7 +5,7 @@ import {
   ButtonSize
 } from '@pooltogether/react-components'
 import { numberWithCommas } from '@pooltogether/utilities'
-import { useConnectWallet, useUsersAddress } from '@pooltogether/wallet-connection'
+import { useUsersAddress } from '@pooltogether/wallet-connection'
 import classnames from 'classnames'
 import { ethers } from 'ethers'
 import { useTranslation } from 'next-i18next'
@@ -16,6 +16,7 @@ import { ProposalCreationForm } from '../../components/ProposalCreation/Proposal
 import { DEFAULT_TOKEN_PRECISION } from '../../constants'
 import { useGovernorAlpha } from '../../hooks/useGovernorAlpha'
 import { useUserCanCreateProposal } from '../../hooks/useUserCanCreateProposal'
+import { useConnectModal } from '@rainbow-me/rainbowkit'
 
 export const ProposalCreationUI = (props) => {
   const { t } = useTranslation()
@@ -58,7 +59,7 @@ const ProposalCreationMinimumRequirementBanner = () => {
   const { t } = useTranslation()
 
   const usersAddress = useUsersAddress()
-  const connectWallet = useConnectWallet()
+  const { openConnectModal } = useConnectModal()
   const { isFetched, userCanCreateProposal } = useUserCanCreateProposal()
   const { data: governorAlpha } = useGovernorAlpha()
 
@@ -84,7 +85,7 @@ const ProposalCreationMinimumRequirementBanner = () => {
           type='button'
           className='mx-auto mt-4 xs:w-5/12 sm:w-1/3 lg:w-1/4'
           size={ButtonSize.sm}
-          onClick={() => connectWallet()}
+          onClick={openConnectModal}
         >
           {t('connectWallet')}
         </Button>

src/pages/_app.tsx

@@ -11,6 +11,7 @@ import '@styles/proposalDescription.css'
 import '@pooltogether/react-components/dist/globals.css'
 import 'react-toastify/dist/ReactToastify.css'
 import 'react-spring-bottom-sheet/dist/style.css'
+import '@rainbow-me/rainbowkit/styles.css'
 
 const App = (props: AppProps) => {
   return <AppContainer {...props} />

src/services/walletConnection.ts

@@ -0,0 +1,53 @@
+import { connectorsForWallets, Wallet } from '@rainbow-me/rainbowkit'
+import {
+  injectedWallet,
+  rainbowWallet,
+  walletConnectWallet,
+  argentWallet,
+  coinbaseWallet,
+  ledgerWallet,
+  metaMaskWallet,
+  tahoWallet,
+  trustWallet,
+  zerionWallet
+} from '@rainbow-me/rainbowkit/wallets'
+import { Connector, Chain } from 'wagmi'
+
+const WALLETS = Object.freeze({
+  metamask: metaMaskWallet,
+  walletconnect: walletConnectWallet,
+  rainbow: rainbowWallet,
+  injected: injectedWallet,
+  argent: argentWallet,
+  coinbase: coinbaseWallet,
+  ledger: ledgerWallet,
+  taho: tahoWallet,
+  trust: trustWallet,
+  zerion: zerionWallet
+})
+
+export const getWalletConnectors = (chains: Chain[]): (() => Connector[]) => {
+  const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
+  const appName = 'PoolTogether'
+  const walletGroups: {
+    groupName: string
+    wallets: Wallet[]
+  }[] = []
+
+  const defaultWallets = ['metamask', 'walletconnect', 'rainbow', 'injected', 'coinbase']
+  const moreWallets = ['argent', 'ledger', 'taho', 'trust', 'zerion']
+
+  walletGroups.push({
+    groupName: 'Recommended',
+    wallets: defaultWallets.map((wallet) => WALLETS[wallet]({ appName, chains, projectId }))
+  })
+
+  walletGroups.push({
+    groupName: 'More',
+    wallets: moreWallets.map((wallet) => WALLETS[wallet]({ appName, chains, projectId }))
+  })
+
+  const connectors = connectorsForWallets(walletGroups)
+
+  return connectors
+}