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

@@ -33,15 +33,16 @@
   },
   "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/react-components": "2.0.5",
     "@pooltogether/utilities": "^0.7.0",
-    "@pooltogether/v4-client-js": "^0.15.5",
-    "@pooltogether/v4-pool-data": "1.11.0-beta.5",
+    "@pooltogether/v4-client-js": "1.18.1",
+    "@pooltogether/v4-pool-data": "1.11.0",
     "@pooltogether/v4-twab-delegator-js": "0.2.2",
     "@pooltogether/v4-utils-js": "0.1.7",
-    "@pooltogether/wallet-connection": "^1.0.0-beta.4",
+    "@pooltogether/wallet-connection": "1.1.0",
+    "@rainbow-me/rainbowkit": "0.12.15",
     "@reach/dialog": "^0.15.3",
     "@reach/menu-button": "^0.15.3",
     "@reach/tooltip": "^0.15.3",
@@ -90,7 +91,8 @@
     "react-tooltip": "^4.2.21",
     "recharts": "^2.5.0",
     "tailwindcss": "^2.2.19",
-    "uuid": "^8.3.2",
-    "wagmi": "0.6.4"
+    "uuid": "^9.0.0",
+    "wagmi": "0.12.17",
+    "@wagmi/chains": "1.3.0"
   }
 }

src/components/AppContainer.tsx

@@ -1,7 +1,10 @@
 import { RPC_URLS } from '@constants/config'
 import { CHAIN_ID } from '@constants/misc'
+import { Trans } from 'next-i18next'
 import { useInitCookieOptions } from '@pooltogether/hooks'
 import { ScreenSize, useScreenSize, LoadingScreen } from '@pooltogether/react-components'
+import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc'
+import { publicProvider } from '@wagmi/core/providers/public'
 import {
   useUpdateStoredPendingTransactions,
   getReadProvider,
@@ -17,13 +20,19 @@ import { useEffect } from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { ReactQueryDevtools } from 'react-query/devtools'
 import { ToastContainer, ToastContainerProps } from 'react-toastify'
-import { createClient, useAccount, useConnect, 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 { initSentry } from '../services/sentry'
 import { CustomErrorBoundary } from './CustomErrorBoundary'
+import {
+  RainbowKitProvider,
+  lightTheme,
+  darkTheme,
+  DisclaimerComponent
+} from '@rainbow-me/rainbowkit'
+import { getWalletConnectors } from '../services/walletConnection'
 
 // Initialize react-query Query Client
 const queryClient = new QueryClient({
@@ -44,45 +53,23 @@ const queryClient = new QueryClient({
 // Initialize global RPC URLs for external packages
 initRpcUrls(RPC_URLS)
 
-// Initialize WAGMI wallet connectors
-const chains = getSupportedChains().map((chain) => {
-  // console.log(chain)
-  if (!!RPC_URLS[chain.id]) {
-    chain.rpcUrls.default = RPC_URLS[chain.id]
-  }
-  return chain
-})
-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 supportedChains = getSupportedChains()
+
+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 }) => {
-    try {
-      return getReadProvider(chainId || CHAIN_ID.mainnet)
-    } catch (e) {
-      console.error(e)
-      return getReadProvider(CHAIN_ID.mainnet)
-    }
-  }
+  provider
 })
 
 /**
@@ -115,17 +102,39 @@ 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>
   )
 }
@@ -161,3 +170,17 @@ const ThemedToastContainer: React.FC<ToastContainerProps> = (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/Buttons/TxButton.tsx

@@ -3,10 +3,10 @@ import { getNetworkNiceNameByChainId } from '@pooltogether/utilities'
 import {
   TransactionState,
   TransactionStatus,
-  useConnectWallet,
   useIsWalletConnected,
   useIsWalletOnChainId
 } from '@pooltogether/wallet-connection'
+import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { useTranslation } from 'next-i18next'
 import React, { useMemo } from 'react'
 import { useSwitchNetwork } from 'wagmi'
@@ -33,7 +33,7 @@ export const TxButton = (props: TxButtonProps) => {
     ...squareButtonProps
   } = props
   const isWalletConnected = useIsWalletConnected()
-  const connectWallet = useConnectWallet()
+  const { openConnectModal } = useConnectModal()
   const { switchNetwork } = useSwitchNetwork()
 
   const { t } = useTranslation()
@@ -47,7 +47,7 @@ export const TxButton = (props: TxButtonProps) => {
 
   const [content, onClick] = useMemo(() => {
     if (!isWalletConnected) {
-      return [t('connectWallet'), connectWallet]
+      return [t('connectWallet'), openConnectModal]
     } else if (status === TransactionStatus.pendingUserConfirmation) {
       return [t('confirmInWallet'), () => null]
     } else if (status === TransactionStatus.pendingBlockchainConfirmation) {

src/components/FullWalletConnectionButtonWrapper.tsx

@@ -1,5 +1,5 @@
-import { useSupportedChains } from '@hooks/app/useSupportedChains'
-import { ButtonTheme } from '@pooltogether/react-components'
+import { getSupportedChains } from '@utils/getSupportedChains'
+import { ButtonRadius, ButtonTheme } from '@pooltogether/react-components'
 import { FullWalletConnectionButton } from '@pooltogether/wallet-connection'
 import { Trans } from 'next-i18next'
 
@@ -9,36 +9,39 @@ import { Trans } from 'next-i18next'
  * @returns
  */
 export const FullWalletConnectionButtonWrapper = (props) => {
-  const chains = useSupportedChains()
+  const chains = getSupportedChains()
 
   return (
     <FullWalletConnectionButton
       {...props}
       chains={chains}
       theme={ButtonTheme.transparent}
-      TosDisclaimer={
-        <Trans
-          i18nKey='connectWalletTermsAndDisclaimerBlurb'
-          components={{
-            termsLink: (
-              <a
-                className='text-pt-teal transition hover:opacity-70 underline'
-                href='https://pooltogether.com/terms/'
-                target='_blank'
-                rel='noreferrer'
-              />
-            ),
-            disclaimerLink: (
-              <a
-                className='text-pt-teal transition hover:opacity-70 underline'
-                href='https://pooltogether.com/protocol-disclaimer/'
-                target='_blank'
-                rel='noreferrer'
-              />
-            )
-          }}
-        />
-      }
+      radius={ButtonRadius.full}
+      TosDisclaimer={<TosDisclaimer />}
     />
   )
 }
+
+export const TosDisclaimer = () => (
+  <Trans
+    i18nKey='connectWalletTermsAndDisclaimerBlurb'
+    components={{
+      termsLink: (
+        <a
+          className='text-pt-teal transition hover:opacity-70 underline'
+          href='https://pooltogether.com/terms/'
+          target='_blank'
+          rel='noreferrer'
+        />
+      ),
+      disclaimerLink: (
+        <a
+          className='text-pt-teal transition hover:opacity-70 underline'
+          href='https://pooltogether.com/protocol-disclaimer/'
+          target='_blank'
+          rel='noreferrer'
+        />
+      )
+    }}
+  />
+)

src/pages/_app.tsx

@@ -12,6 +12,7 @@ import 'react-spring-bottom-sheet/dist/style.css'
 import '@styles/bottomSheet.css'
 import '@styles/tools.css'
 import '@styles/antd-custom.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
+}

src/tools/TwabDelegator/DelegationList/NoDelegatorState.tsx

@@ -1,12 +1,12 @@
 import { StyledInput } from '@components/Input'
 import { Button, ButtonSize } from '@pooltogether/react-components'
-import { useConnectWallet } from '@pooltogether/wallet-connection'
 import classNames from 'classnames'
 import { isAddress } from 'ethers/lib/utils'
 import { useTranslation } from 'next-i18next'
 import React from 'react'
 import { useForm } from 'react-hook-form'
 import { DelegationListProps } from '.'
+import { useConnectModal } from '@rainbow-me/rainbowkit'
 
 /**
  *
@@ -78,14 +78,10 @@ export const NoDelegatorState: React.FC<DelegationListProps> = (props) => {
 
 const ConnectWalletButton = () => {
   const { t } = useTranslation()
-  const connectWallet = useConnectWallet()
+  const { openConnectModal } = useConnectModal()
 
   return (
-    <Button
-      size={ButtonSize.sm}
-      className='flex flex-col mx-auto mt-3'
-      onClick={() => connectWallet()}
-    >
+    <Button size={ButtonSize.sm} className='flex flex-col mx-auto mt-3' onClick={openConnectModal}>
       {t('connectWallet')}
     </Button>
   )