Merge pull request #68 from pooltogether/main

Deploy staging to production

.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,20 +6,31 @@ import {
   getReadProvider,
   initRpcUrls
 } from '@pooltogether/wallet-connection'
+import {
+  RainbowKitProvider,
+  lightTheme,
+  darkTheme,
+  DisclaimerComponent
+} from '@rainbow-me/rainbowkit'
+import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc'
+import { publicProvider } from '@wagmi/core/providers/public'
 import { Provider as JotaiProvider } from 'jotai'
+import { Trans } from 'next-i18next'
 import { useTranslation } from 'next-i18next'
 import { ThemeProvider, useTheme } from 'next-themes'
 import { AppProps } from 'next/app'
 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 { getWalletConnectors } from '../services/walletConnection'
+import { getSupportedChains } from '../utils/getSupportedChains'
 import { CustomErrorBoundary } from './CustomErrorBoundary'
 
 // Initialize react-query Query Client
@@ -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,4 +1,4 @@
-import { ButtonTheme } from '@pooltogether/react-components'
+import { ButtonRadius, ButtonTheme } from '@pooltogether/react-components'
 import { FullWalletConnectionButton } from '@pooltogether/wallet-connection'
 import { getSupportedChains } from '@utils/getSupportedChains'
 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/Layout/PageHeader.tsx

@@ -11,6 +11,8 @@ import { useTranslation } from 'next-i18next'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
+import { SUPPORTED_CURRENCIES } from '../../constants/currencies'
+import { useSelectedCurrency } from '../../hooks/useSelectedCurrency'
 import { SUPPORTED_LANGUAGES } from '../../languages'
 import { FullWalletConnectionButtonWrapper } from './FullWalletConnectionButtonWrapper'
 
@@ -45,6 +47,7 @@ const Settings = () => {
   const walletChainId = useWalletChainId()
   const [currentLang, setCurrentLang] = useState(i18next.language)
   const router = useRouter()
+  const { currency, setCurrency } = useSelectedCurrency()
 
   return (
     <>
@@ -74,6 +77,9 @@ const Settings = () => {
           title: t('coreApp', 'Core App'),
           description: t('pooltogetherCoreApp', 'PoolTogether App')
         }}
+        currencies={SUPPORTED_CURRENCIES}
+        currentCurrency={currency}
+        changeCurrency={setCurrency}
       />
     </>
   )

src/components/ProposalCreation/ProposalCreationUI.tsx

@@ -5,7 +5,8 @@ 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 { useConnectModal } from '@rainbow-me/rainbowkit'
 import classnames from 'classnames'
 import { ethers } from 'ethers'
 import { useTranslation } from 'next-i18next'
@@ -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>