Reverse list and ui fixes (#82)

packages/core/src/classes/WakuVoting.ts

@@ -109,12 +109,13 @@ export class WakuVoting extends WakuMessaging {
         })
       )
     }
-    return this.lastPolls
+    return this.lastPolls.slice().reverse()
   }
 
   public async getVotingRoom(id: number) {
     try {
-      return (await this.getVotingRooms())[id]
+      await this.getVotingRooms()
+      return this.lastPolls[id]
     } catch {
       return undefined
     }

packages/proposal-components/src/components/Proposal.tsx

@@ -83,7 +83,13 @@ export function Proposal({ wakuVoting, account }: ProposalProps) {
           wakuVoting={wakuVoting}
         />
         {votes.length > 0 && (
-          <ProposalList theme={blueTheme} wakuVoting={wakuVoting} votes={votes} availableAmount={tokenBalance} />
+          <ProposalList
+            account={account}
+            theme={blueTheme}
+            wakuVoting={wakuVoting}
+            votes={votes}
+            availableAmount={tokenBalance}
+          />
         )}
       </ProposalVotesWrapper>
 

packages/proposal-components/src/components/ProposalCard.tsx

@@ -14,15 +14,29 @@ interface ProposalCardProps {
   hideModalFunction?: (val: boolean) => void
   availableAmount: number
   wakuVoting: WakuVoting
+  account: string | null | undefined
 }
 
-export function ProposalCard({ theme, votingRoom, mobileVersion, availableAmount, wakuVoting }: ProposalCardProps) {
+export function ProposalCard({
+  account,
+  theme,
+  votingRoom,
+  mobileVersion,
+  availableAmount,
+  wakuVoting,
+}: ProposalCardProps) {
   const history = useHistory()
 
   return (
     <Card onClick={() => mobileVersion && history.push(`/votingRoom/${votingRoom.id.toString()}`)}>
       <ProposalInfo votingRoom={votingRoom} providerName={wakuVoting.providerName} />
-      <ProposalVote votingRoom={votingRoom} theme={theme} availableAmount={availableAmount} wakuVoting={wakuVoting} />
+      <ProposalVote
+        votingRoom={votingRoom}
+        theme={theme}
+        availableAmount={availableAmount}
+        wakuVoting={wakuVoting}
+        account={account}
+      />
     </Card>
   )
 }

packages/proposal-components/src/components/ProposalList.tsx

@@ -11,8 +11,9 @@ type ProposalListProps = {
   wakuVoting: WakuVoting
   votes: VotingRoom[]
   availableAmount: number
+  account: string | null | undefined
 }
-export function ProposalList({ theme, wakuVoting, votes, availableAmount }: ProposalListProps) {
+export function ProposalList({ theme, wakuVoting, votes, availableAmount, account }: ProposalListProps) {
   const ref = useRef<HTMLHeadingElement>(null)
   const mobileVersion = useMobileVersion(ref, 600)
   return (
@@ -20,6 +21,7 @@ export function ProposalList({ theme, wakuVoting, votes, availableAmount }: Prop
       {votes.map((votingRoom) => {
         return (
           <ProposalCard
+            account={account}
             votingRoom={votingRoom}
             theme={theme}
             key={votingRoom.id}

packages/proposal-components/src/components/ProposalVoteCard/ProposalVote.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
-import { useEthers } from '@usedapp/core'
 import { FinalBtn, VoteBtnAgainst, VoteBtnFor } from '../Buttons'
 import { VoteSubmitButton } from './VoteSubmitButton'
 import { VoteChart } from './VoteChart'
@@ -18,14 +17,30 @@ interface ProposalVoteProps {
   availableAmount: number
   hideModalFunction?: (val: boolean) => void
   wakuVoting: WakuVoting
+  account: string | null | undefined
 }
 
-export function ProposalVote({ votingRoom, theme, availableAmount, hideModalFunction, wakuVoting }: ProposalVoteProps) {
-  const { account } = useEthers()
+export function ProposalVote({
+  account,
+  votingRoom,
+  theme,
+  availableAmount,
+  hideModalFunction,
+  wakuVoting,
+}: ProposalVoteProps) {
   const [showVoteModal, setShowVoteModal] = useState(false)
   const [showConfirmModal, setShowConfirmModal] = useState(false)
   const [proposingAmount, setProposingAmount] = useState(0)
   const [selectedVoted, setSelectedVoted] = useState(0)
+  const [alreadyVoted, setAlreadyVoted] = useState(false)
+
+  useEffect(() => {
+    if (votingRoom.voters.findIndex((e) => e === account) >= 0) {
+      setAlreadyVoted(true)
+    } else {
+      setAlreadyVoted(false)
+    }
+  }, [account, votingRoom])
 
   const setNext = (val: boolean) => {
     setShowConfirmModal(val)
@@ -59,7 +74,7 @@ export function ProposalVote({ votingRoom, theme, availableAmount, hideModalFunc
       {showConfirmModal && (
         <Modal heading={votingRoom.question} setShowModal={hideConfirm} theme={theme}>
           <VoteAnimatedModal
-            votingRoom={modifiedVotingRoom ?? votingRoom}
+            votingRoom={votingRoom}
             selectedVote={selectedVoted}
             setShowModal={hideConfirm}
             proposingAmount={proposingAmount}
@@ -80,7 +95,7 @@ export function ProposalVote({ votingRoom, theme, availableAmount, hideModalFunc
         ) : (
           <VotesBtns>
             <VoteBtnAgainst
-              disabled={!account}
+              disabled={!account || alreadyVoted}
               onClick={() => {
                 setSelectedVoted(0)
                 setShowVoteModal(true)
@@ -89,7 +104,7 @@ export function ProposalVote({ votingRoom, theme, availableAmount, hideModalFunc
               Vote Against
             </VoteBtnAgainst>
             <VoteBtnFor
-              disabled={!account}
+              disabled={!account || alreadyVoted}
               onClick={() => {
                 setSelectedVoted(1)
                 setShowVoteModal(true)

packages/proposal-components/src/components/VoteModal.tsx

@@ -29,7 +29,7 @@ export function VoteModal({
   const disabled = proposingAmount === 0
   const funds = availableAmount > 0
   const onClick = useCallback(async () => {
-    wakuVoting.sendVote(votingRoom.id, selectedVote, BigNumber.from(proposingAmount))
+    await wakuVoting.sendVote(votingRoom.id, selectedVote, BigNumber.from(proposingAmount))
     setShowConfirmModal(true)
   }, [votingRoom, selectedVote, proposingAmount, wakuVoting])
   return (

packages/proposal-hooks/src/hooks/useWakuProposal.ts

@@ -11,22 +11,39 @@ export function useWakuProposal(
   const [waku, setWaku] = useState<WakuVoting | undefined>(undefined)
   const queuePos = useRef(0)
   const queueSize = useRef(0)
+  const [chainId, setChainId] = useState(0)
+
+  useEffect(() => {
+    const updateChainId = async () => {
+      const network = await provider?.getNetwork()
+      setChainId(network?.chainId ?? 0)
+    }
+    ;(window as any).ethereum.on('chainChanged', updateChainId)
+    return () => (window as any).ethereum.removeListener('chainChanged', updateChainId)
+  }, [])
+
   useEffect(() => {
-    ;(window as any).ethereum.on('chainChanged', () => window.location.reload())
     const createWaku = async (queue: number) => {
       while (queue != queuePos.current) {
         await new Promise((r) => setTimeout(r, 1000))
       }
       if (provider && multicallAddress) {
-        const wak = await WakuVoting.create(appName, contractAddress, provider, multicallAddress)
-        setWaku(wak)
+        if (waku) {
+          waku.cleanUp()
+        }
+        try {
+          const wak = await WakuVoting.create(appName, contractAddress, provider, multicallAddress)
+          setWaku(wak)
+        } catch {
+          setWaku(undefined)
+        }
+      } else {
+        setWaku(undefined)
       }
       queuePos.current++
     }
     createWaku(queueSize.current++)
-
-    return () => (window as any).ethereum.removeListener('chainChanged', () => window.location.reload())
-  }, [provider, multicallAddress, contractAddress])
+  }, [provider, multicallAddress, contractAddress, chainId])
 
   return waku
 }

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

@@ -68,6 +68,13 @@ const PopUpWindow = styled.div`
   overflow: scroll;
   z-index: 9998;
 
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  $::-webkit-scrollbar {
+    display: none;
+  }
+
   @media (max-width: 600px) {
     padding: 16px 16px 32px;
     margin: 0;