Switch from useDapp to ethers in example

examples/mainnet-poll/package.json

@@ -15,11 +15,11 @@
     "lint:prettier": "yarn prettier './{src,test}/**/*.{ts,tsx}'"
   },
   "dependencies": {
-    "@usedapp/core": "^0.4.7",
     "@waku/poll-sdk-react-components": "^0.2.0",
     "@waku/poll-sdk-react-hooks": "^0.2.0",
     "@waku/vote-poll-sdk-react-components": "^0.2.0",
     "crypto-browserify": "^3.12.0",
+    "ethers": "5.4.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",

examples/mainnet-poll/src/components/Poll.tsx

@@ -1,9 +1,7 @@
-import React, { useState } from 'react'
-import { useConfig } from '@usedapp/core'
-import { ChainId } from '@usedapp/core/src/constants'
+import React, { useMemo, useState } from 'react'
 import styled from 'styled-components'
 import { PollCreation, PollList } from '@waku/poll-sdk-react-components'
-import { JsonRpcSigner, Web3Provider } from '@ethersproject/providers'
+import { Web3Provider } from '@ethersproject/providers'
 import { useWakuPolling } from '@waku/poll-sdk-react-hooks'
 import { CreateButton } from '@waku/vote-poll-sdk-react-components'
 import { Theme } from '@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes'
@@ -11,23 +9,20 @@ import { Theme } from '@waku/vote-poll-sdk-react-components/dist/esm/src/style/t
 type PollProps = {
   appName: string
   library: Web3Provider | undefined
-  signer: JsonRpcSigner | undefined
-  chainId: ChainId | undefined
   account: string | null | undefined
   theme: Theme
   tokenAddress: string
+  multicallAddress: string
 }
 
-export function Poll({ appName, library, signer, chainId, account, theme, tokenAddress }: PollProps) {
-  const config = useConfig()
+export function Poll({ appName, library, account, theme, tokenAddress, multicallAddress }: PollProps) {
   const [showPollCreation, setShowPollCreation] = useState(false)
-  const wakuPolling = useWakuPolling(appName, tokenAddress, library, config?.multicallAddresses?.[chainId ?? 1337])
-
-  const disabled = !signer
+  const wakuPolling = useWakuPolling(appName, tokenAddress, library, multicallAddress)
+  const disabled = useMemo(() => !account, [account])
 
   return (
     <Wrapper>
-      {showPollCreation && signer && (
+      {showPollCreation && account && (
         <PollCreation wakuPolling={wakuPolling} setShowPollCreation={setShowPollCreation} theme={theme} />
       )}
       {

examples/mainnet-poll/src/hooks/useWeb3Connect.ts

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Web3Provider } from '@ethersproject/providers'
+import { providers } from 'ethers'
+
+export function useWeb3Connect(supportedChain: number) {
+  const [provider, setProvider] = useState<Web3Provider | undefined>(undefined)
+  const [account, setAccount] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    const handleChainIdChange = async () => {
+      const ethProvider = new providers.Web3Provider((window as any).ethereum)
+      const _chainId = (await ethProvider.getNetwork()).chainId
+      if (_chainId === supportedChain) {
+        setProvider(ethProvider)
+      } else {
+        setProvider(undefined)
+        deactivate()
+      }
+    }
+    try {
+      ;(window as any).ethereum.on('chainChanged', handleChainIdChange)
+      handleChainIdChange()
+    } catch {
+      return
+    }
+    return () => {
+      try {
+        ;(window as any).ethereum.off('chainChanged', handleChainIdChange)
+      } catch {
+        return
+      }
+    }
+  }, [])
+
+  const changeSigner = useCallback(async () => {
+    if (provider) {
+      if ((await provider.listAccounts()).length > 0) {
+        const _signer = provider?.getSigner()
+        setAccount(await _signer.getAddress())
+        return
+      }
+    }
+    deactivate()
+  }, [provider])
+
+  const activate = useCallback(async () => {
+    if (provider) {
+      try {
+        await provider.send('eth_requestAccounts', [])
+        changeSigner()
+        ;(window as any).ethereum.on('accountsChanged', changeSigner)
+      } catch {
+        deactivate()
+      }
+    }
+  }, [provider])
+
+  const deactivate = useCallback(() => {
+    setAccount(undefined)
+    try {
+      ;(window as any).ethereum.off('accountsChanged', changeSigner)
+    } catch {
+      return
+    }
+  }, [])
+
+  return { activate, deactivate, account, provider }
+}

examples/mainnet-poll/src/index.tsx

@@ -1,47 +1,20 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
-import { ChainId, DAppProvider, useEthers } from '@usedapp/core'
-import { DEFAULT_CONFIG } from '@usedapp/core/dist/cjs/src/model/config/default'
 import { Poll } from './components/Poll'
 import { GlobalStyle, TopBar } from '@waku/vote-poll-sdk-react-components'
 import pollingIcon from './assets/images/pollingIcon.png'
-import { JsonRpcSigner } from '@ethersproject/providers'
 import { orangeTheme } from '@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes'
 import ReactDOM from 'react-dom'
 import { BrowserRouter, useLocation } from 'react-router-dom'
 import { Route, Switch } from 'react-router'
+import { useWeb3Connect } from './hooks/useWeb3Connect'
 
-const sntTokenAddress = '0x744d70FDBE2Ba4CF95131626614a1763DF805B9E'
+const TOKEN_ADDRESS = '0x744d70FDBE2Ba4CF95131626614a1763DF805B9E'
+const MULTICALL_ADDRESS = '0xeefba1e63905ef1d7acba5a8513c70307c1ce441'
+const SUPPORTED_CHAIN_ID = 1
 
-const config = {
-  readOnlyChainId: ChainId.Mainnet,
-  readOnlyUrls: {
-    [ChainId.Mainnet]: 'https://mainnet.infura.io/v3/b4451d780cc64a078ccf2181e872cfcf',
-  },
-  multicallAddresses: {
-    1: '0xeefba1e63905ef1d7acba5a8513c70307c1ce441',
-    3: '0x53c43764255c17bd724f74c4ef150724ac50a3ed',
-    1337: process.env.GANACHE_MULTICALL_CONTRACT ?? '0x0000000000000000000000000000000000000000',
-  },
-  supportedChains: [...DEFAULT_CONFIG.supportedChains, 1337],
-  notifications: {
-    checkInterval: 500,
-    expirationPeriod: 50000,
-  },
-}
-
-export function PollPage({ tokenAddress }: { tokenAddress: string }) {
-  const { account, library, activateBrowserWallet, deactivate, chainId } = useEthers()
-  const [signer, setSigner] = useState<undefined | JsonRpcSigner>(undefined)
-
-  useEffect(() => {
-    if (account) {
-      setSigner(library?.getSigner())
-    } else {
-      // Deactivate signer if signed out
-      setSigner(undefined)
-    }
-  }, [account])
+export function MainPage({ tokenAddress }: { tokenAddress: string }) {
+  const { activate, deactivate, account, provider } = useWeb3Connect(SUPPORTED_CHAIN_ID)
 
   return (
     <Wrapper>
@@ -50,19 +23,20 @@ export function PollPage({ tokenAddress }: { tokenAddress: string }) {
         logoWidth={84}
         title={'WakuConnect Poll Demo'}
         theme={orangeTheme}
-        activate={activateBrowserWallet}
+        activate={activate}
         account={account}
         deactivate={deactivate}
       />
+      {provider && (
         <Poll
           theme={orangeTheme}
           appName={'demo-poll-dapp'}
-        library={library}
-        signer={signer}
-        chainId={chainId}
+          library={provider}
           account={account}
           tokenAddress={tokenAddress}
+          multicallAddress={MULTICALL_ADDRESS}
         />
+      )}
     </Wrapper>
   )
 }
@@ -74,9 +48,7 @@ export function App() {
   return (
     <Wrapper>
       <GlobalStyle />
-      <DAppProvider config={config}>
-        <PollPage tokenAddress={tokenAddress ?? sntTokenAddress} />
-      </DAppProvider>
+      <MainPage tokenAddress={tokenAddress ?? TOKEN_ADDRESS} />
     </Wrapper>
   )
 }

examples/mainnet-poll/yarn.lock

@@ -6204,6 +6204,7 @@ node-addon-api@^2.0.0:
 
 "node-fetch@https://registry.npmjs.org/@achingbrain/node-fetch/-/node-fetch-2.6.7.tgz":
   version "2.6.7"
+  uid "1b5d62978f2ed07b99444f64f0df39f960a6d34d"
   resolved "https://registry.npmjs.org/@achingbrain/node-fetch/-/node-fetch-2.6.7.tgz#1b5d62978f2ed07b99444f64f0df39f960a6d34d"
 
 node-forge@^0.10.0: