diff --git a/examples/mainnet-poll/src/components/Poll.tsx b/examples/mainnet-poll/src/components/Poll.tsx index f93195d..9768970 100644 --- a/examples/mainnet-poll/src/components/Poll.tsx +++ b/examples/mainnet-poll/src/components/Poll.tsx @@ -1,53 +1,45 @@ import React, { useState } from 'react' -import { useConfig, useEthers } from '@usedapp/core' - +import { useConfig } from '@usedapp/core' +import { ChainId } from '@usedapp/core/src/constants' import styled from 'styled-components' -import { PollList, PollCreation } from '@waku/poll-sdk-react-components' -import { JsonRpcSigner } from '@ethersproject/providers' +import { PollCreation, PollList } from '@waku/poll-sdk-react-components' +import { JsonRpcSigner, Web3Provider } from '@ethersproject/providers' import { useWakuPolling } from '@waku/poll-sdk-react-hooks' -import { Modal, Networks, CreateButton } from '@waku/vote-poll-sdk-react-components' +import { CreateButton } from '@waku/vote-poll-sdk-react-components' import { Theme } from '@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes' -type WakuPollingProps = { +type PollProps = { appName: string + library: Web3Provider | undefined signer: JsonRpcSigner | undefined + chainId: ChainId | undefined + account: string | null | undefined theme: Theme tokenAddress: string } -export function Poll({ appName, signer, theme, tokenAddress }: WakuPollingProps) { - const { activateBrowserWallet, account, library, chainId } = useEthers() +export function Poll({ appName, library, signer, chainId, account, theme, tokenAddress }: PollProps) { const config = useConfig() const [showPollCreation, setShowPollCreation] = useState(false) - const [selectConnect, setSelectConnect] = useState(false) const wakuPolling = useWakuPolling(appName, tokenAddress, library, config?.multicallAddresses?.[chainId ?? 1337]) + + const disabled = !signer + return ( {showPollCreation && signer && ( )} - {account ? ( - setShowPollCreation(true)}> + { + setShowPollCreation(true)} + > Create a poll - ) : ( - { - if ((window as any)?.ethereum) { - activateBrowserWallet() - } else setSelectConnect(true) - }} - > - Connect to vote - - )} - {selectConnect && ( - - - - )} - + } ) diff --git a/examples/mainnet-poll/src/index.tsx b/examples/mainnet-poll/src/index.tsx index 94a4eab..b315b45 100644 --- a/examples/mainnet-poll/src/index.tsx +++ b/examples/mainnet-poll/src/index.tsx @@ -1,16 +1,15 @@ import React, { useEffect, useState } from 'react' import styled from 'styled-components' -import { DAppProvider, ChainId, useEthers } from '@usedapp/core' +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 { TopBar, GlobalStyle } from '@waku/vote-poll-sdk-react-components' +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 } from 'react-router-dom' +import { BrowserRouter, useLocation } from 'react-router-dom' import { Route, Switch } from 'react-router' -import { useLocation } from 'react-router-dom' const sntTokenAddress = '0x744d70FDBE2Ba4CF95131626614a1763DF805B9E' @@ -32,11 +31,16 @@ const config = { } export function PollPage({ tokenAddress }: { tokenAddress: string }) { - const { account, library, activateBrowserWallet, deactivate } = useEthers() + const { account, library, activateBrowserWallet, deactivate, chainId } = useEthers() const [signer, setSigner] = useState(undefined) useEffect(() => { - setSigner(library?.getSigner()) + if (account) { + setSigner(library?.getSigner()) + } else { + // Deactivate signer if signed out + setSigner(undefined) + } }, [account]) return ( @@ -50,7 +54,15 @@ export function PollPage({ tokenAddress }: { tokenAddress: string }) { account={account} deactivate={deactivate} /> - + ) }