Remove wallet logic for Poll component

To keep it simple.
This commit is contained in:
Franck 2022-01-04 16:36:00 +11:00
parent 415be0a8cc
commit 7203020317
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
2 changed files with 40 additions and 36 deletions

View File

@ -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 (
<Wrapper>
{showPollCreation && signer && (
<PollCreation wakuPolling={wakuPolling} setShowPollCreation={setShowPollCreation} theme={theme} />
)}
{account ? (
<CreateButton theme={theme} disabled={!signer} onClick={() => setShowPollCreation(true)}>
{
<CreateButton
style={{ backgroundColor: disabled ? 'lightgrey' : theme.primaryColor }}
theme={theme}
disabled={disabled}
onClick={() => setShowPollCreation(true)}
>
Create a poll
</CreateButton>
) : (
<CreateButton
theme={theme}
onClick={() => {
if ((window as any)?.ethereum) {
activateBrowserWallet()
} else setSelectConnect(true)
}}
>
Connect to vote
</CreateButton>
)}
{selectConnect && (
<Modal heading="Connect" theme={theme} setShowModal={setSelectConnect}>
<Networks />
</Modal>
)}
}
<PollList wakuPolling={wakuPolling} account={account} theme={theme} />
</Wrapper>
)

View File

@ -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 | JsonRpcSigner>(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}
/>
<Poll theme={orangeTheme} appName={'testApp_'} signer={signer} tokenAddress={tokenAddress} />
<Poll
theme={orangeTheme}
appName={'demo-poll-dapp'}
library={library}
signer={signer}
chainId={chainId}
account={account}
tokenAddress={tokenAddress}
/>
</Wrapper>
)
}