Lift topbar connect function (#47)

packages/polling-page/src/index.tsx

@@ -1,12 +1,11 @@
 import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
-import { DAppProvider, ChainId } from '@usedapp/core'
+import { DAppProvider, ChainId, useEthers } from '@usedapp/core'
 import { DEFAULT_CONFIG } from '@usedapp/core/dist/cjs/src/model/config/default'
 import { WakuPolling } from './components/WakuPolling'
 import { TopBar, GlobalStyle } from '@status-waku-voting/react-components'
 import pollingIcon from './assets/images/pollingIcon.svg'
 import { JsonRpcSigner } from '@ethersproject/providers'
-import { useEthers } from '@usedapp/core'
 import { orangeTheme } from '@status-waku-voting/react-components/dist/esm/src/style/themes'
 
 const config = {
@@ -26,7 +25,7 @@ const config = {
 }
 
 export function Polling() {
-  const { account, library } = useEthers()
+  const { account, library, activateBrowserWallet, deactivate } = useEthers()
   const [signer, setSigner] = useState<undefined | JsonRpcSigner>(undefined)
 
   useEffect(() => {
@@ -35,7 +34,14 @@ export function Polling() {
 
   return (
     <Wrapper>
-      <TopBar logo={pollingIcon} title={'Polling Dapp'} theme={orangeTheme} />
+      <TopBar
+        logo={pollingIcon}
+        title={'Polling Dapp'}
+        theme={orangeTheme}
+        activate={activateBrowserWallet}
+        account={account}
+        deactivate={deactivate}
+      />
       <WakuPolling appName={'testApp_'} signer={signer} />
     </Wrapper>
   )

packages/proposal-page/package.json

@@ -7,7 +7,9 @@
   "license": "MIT",
   "watch": {
     "build": {
-      "patterns": ["src"],
+      "patterns": [
+        "src"
+      ],
       "extensions": "ts,tsx",
       "runOnChangeOnly": false
     }
@@ -30,10 +32,11 @@
     "lint:prettier": "yarn prettier './{src,test}/**/*.{ts,tsx}'"
   },
   "dependencies": {
+    "@status-waku-voting/core": "^0.1.0",
     "@status-waku-voting/proposal-components": "^0.1.0",
     "@status-waku-voting/proposal-hooks": "^0.1.0",
     "@status-waku-voting/react-components": "^0.1.0",
-    "@status-waku-voting/core": "^0.1.0",
+    "@usedapp/core": "^0.4.7",
     "ethers": "^5.4.4",
     "react": "^17.0.2",
     "styled-components": "^5.3.0"

packages/proposal-page/src/index.tsx

@@ -5,14 +5,49 @@ import { TopBar, GlobalStyle } from '@status-waku-voting/react-components'
 import votingIcon from './assets/images/voting.svg'
 import styled from 'styled-components'
 import { blueTheme } from '@status-waku-voting/react-components/dist/esm/src/style/themes'
+import { DAppProvider, ChainId, useEthers } from '@usedapp/core'
+import { DEFAULT_CONFIG } from '@usedapp/core/dist/cjs/src/model/config/default'
+
+const config = {
+  readOnlyChainId: ChainId.Ropsten,
+  readOnlyUrls: {
+    [ChainId.Ropsten]: 'https://ropsten.infura.io/v3/b4451d780cc64a078ccf2181e872cfcf',
+  },
+  multicallAddresses: {
+    ...DEFAULT_CONFIG.multicallAddresses,
+    1337: process.env.GANACHE_MULTICALL_CONTRACT ?? '0x0000000000000000000000000000000000000000',
+  },
+  supportedChains: [...DEFAULT_CONFIG.supportedChains, 1337],
+  notifications: {
+    checkInterval: 500,
+    expirationPeriod: 50000,
+  },
+}
+
+function Proposals() {
+  const { account, library, activateBrowserWallet, deactivate } = useEthers()
+  return (
+    <Wrapper>
+      <TopBar
+        logo={votingIcon}
+        title={'Proposals Dapp'}
+        theme={blueTheme}
+        activate={activateBrowserWallet}
+        account={account}
+        deactivate={deactivate}
+      />
+      <Proposal />
+    </Wrapper>
+  )
+}
 
 export function ProposalPage() {
-  useTest()
   return (
     <Wrapper>
       <GlobalStyle />
-      <TopBar logo={votingIcon} title={'Proposals Dapp'} theme={blueTheme} />
+      <DAppProvider config={config}>
-      <Proposal />
+        <Proposals />
+      </DAppProvider>
     </Wrapper>
   )
 }

packages/react-components/src/components/TopBar.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { useEthers, shortenAddress } from '@usedapp/core'
+import { shortenAddress } from '@usedapp/core'
 import { Modal } from './Modal'
 import { ConnectButton, Account, ButtonDisconnect } from './misc/Buttons'
 import { Networks } from './Networks'
@@ -10,10 +10,12 @@ type TopBarProps = {
   logo: string
   title: string
   theme: Theme
+  activate: () => void
+  deactivate: () => void
+  account: string | undefined | null
 }
 
-export function TopBar({ logo, title, theme }: TopBarProps) {
+export function TopBar({ logo, title, theme, activate, deactivate, account }: TopBarProps) {
-  const { activateBrowserWallet, deactivate, account } = useEthers()
   const [isOpened, setIsOpened] = useState(false)
   const [selectConnect, setSelectConnect] = useState(false)
 
@@ -47,7 +49,7 @@ export function TopBar({ logo, title, theme }: TopBarProps) {
             theme={theme}
             onClick={() => {
               if ((window as any).ethereum) {
-                activateBrowserWallet()
+                activate()
               } else setSelectConnect(true)
             }}
           >