From 98fb2ea51588fe15da23c3588646d72daa0d843f Mon Sep 17 00:00:00 2001 From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> Date: Tue, 14 Sep 2021 21:40:13 +0200 Subject: [PATCH] Refactor VoteProgress (#70) --- packages/core/src/classes/WakuMessaging.ts | 12 +++--- packages/core/src/classes/WakuPolling.ts | 15 ++------ packages/core/src/classes/WakuVoting.ts | 17 +++------ .../src/components/Proposal.tsx | 1 + .../src/components/ProposalCard.tsx | 14 ++++++- .../src/components/ProposalList.tsx | 9 +++-- .../src/components/VotePropose.tsx | 37 +++++++------------ 7 files changed, 48 insertions(+), 57 deletions(-) diff --git a/packages/core/src/classes/WakuMessaging.ts b/packages/core/src/classes/WakuMessaging.ts index b289375..21bb031 100644 --- a/packages/core/src/classes/WakuMessaging.ts +++ b/packages/core/src/classes/WakuMessaging.ts @@ -5,6 +5,7 @@ import { Provider } from '@ethersproject/providers' import { Contract } from '@ethersproject/contracts' import { Interface } from '@ethersproject/abi' import { ERC20 } from '../abi' +import { createWaku } from '../utils/createWaku' const ABI = [ 'function aggregate(tuple(address target, bytes callData)[] calls) view returns (uint256 blockNumber, bytes[] returnData)', ] @@ -23,7 +24,7 @@ type WakuMessageStores = { export class WakuMessaging { protected appName: string - protected waku: Waku + protected waku: Waku | undefined public tokenAddress: string protected provider: Provider protected chainId = 0 @@ -34,10 +35,10 @@ export class WakuMessaging { protected constructor( appName: string, tokenAddress: string, - waku: Waku, provider: Provider, chainId: number, - multicall: string + multicall: string, + waku?: Waku ) { this.appName = appName this.tokenAddress = tokenAddress @@ -48,18 +49,19 @@ export class WakuMessaging { } public cleanUp() { - this.observers.forEach((observer) => this.waku.relay.deleteObserver(observer.callback, observer.topics)) + this.observers.forEach((observer) => this?.waku?.relay.deleteObserver(observer.callback, observer.topics)) this.wakuMessages = {} } protected async setObserver() { + this.waku = await createWaku(this.waku) await Promise.all( Object.values(this.wakuMessages).map(async (msgObj) => { const storeMessages = await this.waku?.store.queryHistory([msgObj.topic]) if (storeMessages) { msgObj.updateFunction(storeMessages) } - this.waku.relay.addObserver((msg) => msgObj.updateFunction([msg]), [msgObj.topic]) + this?.waku?.relay.addObserver((msg) => msgObj.updateFunction([msg]), [msgObj.topic]) this.observers.push({ callback: (msg) => msgObj.updateFunction([msg]), topics: [msgObj.topic] }) }) ) diff --git a/packages/core/src/classes/WakuPolling.ts b/packages/core/src/classes/WakuPolling.ts index a9de023..3b17425 100644 --- a/packages/core/src/classes/WakuPolling.ts +++ b/packages/core/src/classes/WakuPolling.ts @@ -21,12 +21,12 @@ export class WakuPolling extends WakuMessaging { protected constructor( appName: string, tokenAddress: string, - waku: Waku, provider: Provider, chainId: number, - multicall: string + multicall: string, + waku?: Waku ) { - super(appName, tokenAddress, waku, provider, chainId, multicall) + super(appName, tokenAddress, provider, chainId, multicall, waku) this.wakuMessages['pollInit'] = { topic: `/${this.appName}/waku-polling/timed-polls-init/proto/`, hashMap: {}, @@ -59,14 +59,7 @@ export class WakuPolling extends WakuMessaging { waku?: Waku ) { const network = await provider.getNetwork() - const wakuPolling = new WakuPolling( - appName, - tokenAddress, - await createWaku(waku), - provider, - network.chainId, - multicall - ) + const wakuPolling = new WakuPolling(appName, tokenAddress, provider, network.chainId, multicall, waku) return wakuPolling } diff --git a/packages/core/src/classes/WakuVoting.ts b/packages/core/src/classes/WakuVoting.ts index 4499b40..d37cffa 100644 --- a/packages/core/src/classes/WakuVoting.ts +++ b/packages/core/src/classes/WakuVoting.ts @@ -19,12 +19,12 @@ export class WakuVoting extends WakuMessaging { appName: string, votingContract: Contract, token: string, - waku: Waku, provider: Provider, chainId: number, - multicallAddress: string + multicallAddress: string, + waku?: Waku ) { - super(appName, token, waku, provider, chainId, multicallAddress) + super(appName, token, provider, chainId, multicallAddress, waku) this.votingContract = votingContract this.wakuMessages['vote'] = { topic: `/${this.appName}/waku-voting/votes/proto/`, @@ -38,6 +38,7 @@ export class WakuVoting extends WakuMessaging { this.wakuMessages['vote'] ), } + this.setObserver() } public static async create( @@ -50,15 +51,7 @@ export class WakuVoting extends WakuMessaging { const network = await provider.getNetwork() const votingContract = new Contract(contractAddress, VotingContract.abi, provider) const tokenAddress = await votingContract.token() - return new WakuVoting( - appName, - votingContract, - tokenAddress, - await createWaku(waku), - provider, - network.chainId, - multicall - ) + return new WakuVoting(appName, votingContract, tokenAddress, provider, network.chainId, multicall, waku) } public async createVote( diff --git a/packages/proposal-components/src/components/Proposal.tsx b/packages/proposal-components/src/components/Proposal.tsx index a582ffe..6f47713 100644 --- a/packages/proposal-components/src/components/Proposal.tsx +++ b/packages/proposal-components/src/components/Proposal.tsx @@ -19,6 +19,7 @@ export function Proposal({ wakuVoting }: ProposalProps) { const interval = setInterval(async () => { setVotes(await wakuVoting.getVotingRooms()) }, 10000) + wakuVoting.getVotingRooms().then((e) => setVotes(e)) return () => clearInterval(interval) }, []) diff --git a/packages/proposal-components/src/components/ProposalCard.tsx b/packages/proposal-components/src/components/ProposalCard.tsx index 70625a6..d5faebd 100644 --- a/packages/proposal-components/src/components/ProposalCard.tsx +++ b/packages/proposal-components/src/components/ProposalCard.tsx @@ -11,16 +11,26 @@ interface ProposalCardProps { heading: string text: string address: string + mobileVersion?: boolean vote?: number voteWinner?: number hideModalFunction?: (val: boolean) => void } -export function ProposalCard({ id, heading, text, address, vote, voteWinner, theme }: ProposalCardProps) { +export function ProposalCard({ + id, + heading, + text, + address, + vote, + voteWinner, + theme, + mobileVersion, +}: ProposalCardProps) { const history = useHistory() return ( - history.push(`/votingRoom/${id.toString}`)}> + mobileVersion && history.push(`/votingRoom/${id.toString}`)}> diff --git a/packages/proposal-components/src/components/ProposalList.tsx b/packages/proposal-components/src/components/ProposalList.tsx index ec923b5..254b140 100644 --- a/packages/proposal-components/src/components/ProposalList.tsx +++ b/packages/proposal-components/src/components/ProposalList.tsx @@ -1,6 +1,6 @@ -import React from 'react' +import React, { useRef } from 'react' import styled from 'styled-components' -import { Theme } from '@status-waku-voting/react-components' +import { Theme, useMobileVersion } from '@status-waku-voting/react-components' import { ProposalCard } from './ProposalCard' import { WakuVoting } from '@status-waku-voting/core' import { VotingEmpty } from './VotingEmpty' @@ -12,8 +12,10 @@ type ProposalListProps = { votes: VotingRoom[] } export function ProposalList({ theme, wakuVoting, votes }: ProposalListProps) { + const ref = useRef(null) + const mobileVersion = useMobileVersion(ref, 600) return ( - + {votes.map((vote) => { return ( ) })} diff --git a/packages/proposal-components/src/components/VotePropose.tsx b/packages/proposal-components/src/components/VotePropose.tsx index 6cd871f..920540b 100644 --- a/packages/proposal-components/src/components/VotePropose.tsx +++ b/packages/proposal-components/src/components/VotePropose.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useCallback, useMemo } from 'react' import { useState } from 'react' import styled from 'styled-components' import { addCommas } from '../helpers/addCommas' @@ -11,36 +11,26 @@ export interface VoteProposingProps { } export function VotePropose({ availableAmount, proposingAmount, setProposingAmount }: VoteProposingProps) { - const [displayAmount, setDisplayAmount] = useState(addCommas(proposingAmount) + ' ABC') - const disabled = availableAmount === 0 - - let step = 10 ** (Math.floor(Math.log10(availableAmount)) - 2) - - if (availableAmount < 100) { - step = 1 - } - - const setAvailableAmount = () => { - setProposingAmount(availableAmount) - setDisplayAmount(addCommas(availableAmount) + ' ABC') - } + const [inputFocused, setInputFocused] = useState(false) + const disabled = useMemo(() => availableAmount === 0, [availableAmount]) + const step = useMemo( + () => (availableAmount < 100 ? 1 : 10 ** (Math.floor(Math.log10(availableAmount)) - 2)), + [availableAmount] + ) + const progress = useMemo(() => (proposingAmount / availableAmount) * 100 + '%', [proposingAmount, availableAmount]) const sliderChange = (e: React.ChangeEvent) => { if (Number(e.target.value) == step * Math.floor(availableAmount / step)) { - setAvailableAmount() + setProposingAmount(availableAmount) } else { setProposingAmount(Number(e.target.value)) - setDisplayAmount(addCommas(Number(e.target.value)) + ' ABC') } } - const progress = (proposingAmount / availableAmount) * 100 + '%' - const onInputAmountBlur = () => { + setInputFocused(false) if (proposingAmount > availableAmount) { - setAvailableAmount() - } else { - setDisplayAmount(addCommas(proposingAmount) + ' ABC') + setProposingAmount(availableAmount) } } @@ -51,13 +41,12 @@ export function VotePropose({ availableAmount, proposingAmount, setProposingAmou Available {addCommas(availableAmount)} ABC { setProposingAmount(Number(e.currentTarget.value)) - setDisplayAmount(e.currentTarget.value) }} onBlur={onInputAmountBlur} - onFocus={() => setDisplayAmount(proposingAmount.toString())} + onFocus={() => setInputFocused(true)} />