Refactor VoteProgress (#70)

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] })
       })
     )

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
   }
 

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(

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)
   }, [])
 

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 (
-    <Card onClick={() => history.push(`/votingRoom/${id.toString}`)}>
+    <Card onClick={() => mobileVersion && history.push(`/votingRoom/${id.toString}`)}>
       <ProposalInfo heading={heading} text={text} address={address} />
       <ProposalVote vote={vote} voteWinner={voteWinner} address={address} heading={heading} theme={theme} />
     </Card>

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<HTMLHeadingElement>(null)
+  const mobileVersion = useMobileVersion(ref, 600)
   return (
-    <List>
+    <List ref={ref}>
       {votes.map((vote) => {
         return (
           <ProposalCard
@@ -23,6 +25,7 @@ export function ProposalList({ theme, wakuVoting, votes }: ProposalListProps) {
             theme={theme}
             key={vote.id}
             id={vote.id}
+            mobileVersion={mobileVersion}
           />
         )
       })}

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<HTMLInputElement>) => {
     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
         <span>Available {addCommas(availableAmount)} ABC</span>
       </VoteProposingInfo>
       <VoteProposingAmount
-        value={displayAmount}
+        value={inputFocused ? proposingAmount.toString() : addCommas(proposingAmount) + ' ABC'}
         onInput={(e) => {
           setProposingAmount(Number(e.currentTarget.value))
-          setDisplayAmount(e.currentTarget.value)
         }}
         onBlur={onInputAmountBlur}
-        onFocus={() => setDisplayAmount(proposingAmount.toString())}
+        onFocus={() => setInputFocused(true)}
       />
       <VoteProposingRangeWrap>
         <VoteProposingRange