Refactor voting modal (#84)

packages/core/src/classes/WakuMessaging.ts

@@ -33,6 +33,7 @@ export class WakuMessaging {
   protected observers: { callback: (msg: WakuMessage) => void; topics: string[] }[] = []
   protected multicall: Contract
   public tokenDecimals: number | undefined
+  public tokenSymbol: string | undefined
 
   protected constructor(
     appName: string,
@@ -69,7 +70,8 @@ export class WakuMessaging {
 
   protected async setObserver() {
     this.tokenDecimals = await this.token.decimals()
-
+    this.tokenSymbol = await this.token.symbol()
+    console.log(this.tokenSymbol)
     this.waku = await createWaku(this.waku)
     await Promise.all(
       Object.values(this.wakuMessages).map(async (msgObj) => {

packages/example/package.json

@@ -15,8 +15,8 @@
     "lint:prettier": "yarn prettier './{src,test}/**/*.{ts,tsx}'"
   },
   "dependencies": {
-    "@status-waku-voting/polling-page": "^0.1.0",
+    "@status-waku-voting/polling-example": "^0.1.0",
-    "@status-waku-voting/proposal-page": "^0.1.0",
+    "@status-waku-voting/proposal-example": "^0.1.0",
     "assert": "^2.0.0",
     "buffer": "^6.0.3",
     "crypto-browserify": "^3.12.0",

packages/example/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { PollingPage } from '@status-waku-voting/polling-page'
+import { PollingPage } from '@status-waku-voting/polling-example'
-import { ProposalPage } from '@status-waku-voting/proposal-page'
+import { ProposalPage } from '@status-waku-voting/proposal-example'
 import { BrowserRouter } from 'react-router-dom'
 import { Route, Switch } from 'react-router'
 

packages/polling-example/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@status-waku-voting/polling-page",
+  "name": "@status-waku-voting/polling-example",
   "version": "0.1.0",
   "main": "dist/cjs/src/index.js",
   "module": "dist/esm/src/index.js",

packages/proposal-components/package.json

@@ -35,7 +35,6 @@
     "@status-waku-voting/core": "^0.1.0",
     "@status-waku-voting/proposal-hooks": "^0.1.0",
     "@status-waku-voting/react-components": "^0.1.0",
-    "@usedapp/core": "^0.4.7",
     "ethers": "^5.4.4",
     "humanize-duration": "^3.27.0",
     "react": "^17.0.2",

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

@@ -1,12 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import styled from 'styled-components'
 import { ProposalHeader } from './ProposalHeader'
 import { blueTheme } from '@status-waku-voting/react-components/dist/esm/src/style/themes'
 import { ProposalList } from './ProposalList'
-import { NotificationItem } from './NotificationItem'
 import { WakuVoting } from '@status-waku-voting/core'
 import { VotingEmpty } from './VotingEmpty'
-import { VotingRoom } from '@status-waku-voting/core/dist/esm/src/types/PollType'
 import { useTokenBalance } from '@status-waku-voting/react-components'
 import { NewVoteModal } from './newVoteModal/NewVoteModal'
 import { useEthers } from '@usedapp/core'

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

@@ -1,12 +1,12 @@
-import React from 'react'
+import React, { ReactElement, useCallback, useState } from 'react'
 import { useHistory } from 'react-router'
 import styled from 'styled-components'
 import { Theme } from '@status-waku-voting/react-components'
 import { ProposalInfo } from './ProposalInfo'
 import { ProposalVote } from './ProposalVoteCard/ProposalVote'
-import { VotingRoom } from '@status-waku-voting/core/dist/esm/src/types/PollType'
 import { WakuVoting } from '@status-waku-voting/core'
 import { useVotingRoom } from '@status-waku-voting/proposal-hooks'
+import { VoteModal, VoteModalProps } from './VoteModal/VoteModal'
 
 interface ProposalCardProps {
   votingRoomId: number
@@ -16,6 +16,9 @@ interface ProposalCardProps {
   availableAmount: number
   wakuVoting: WakuVoting
   account: string | null | undefined
+  CustomVoteModal?: (props: VoteModalProps) => ReactElement
+  customAgainstClick?: () => void
+  customForClick?: () => void
 }
 
 export function ProposalCard({
@@ -25,22 +28,61 @@ export function ProposalCard({
   mobileVersion,
   availableAmount,
   wakuVoting,
+  CustomVoteModal,
+  customAgainstClick,
+  customForClick,
 }: ProposalCardProps) {
   const history = useHistory()
   const votingRoom = useVotingRoom(votingRoomId, wakuVoting)
+
+  const [showVoteModal, setShowVoteModal] = useState(false)
+  const [selectedVote, setSelectedVote] = useState(0)
+
+  const againstClick = useCallback(() => {
+    setSelectedVote(0)
+    setShowVoteModal(true)
+  }, [])
+
+  const forClick = useCallback(() => {
+    setSelectedVote(1)
+    setShowVoteModal(true)
+  }, [])
+
   if (!votingRoom) {
     return <></>
   }
 
   return (
     <Card onClick={() => mobileVersion && history.push(`/votingRoom/${votingRoom.id.toString()}`)}>
+      {CustomVoteModal ? (
+        <CustomVoteModal
+          setShowModal={setShowVoteModal}
+          showModal={showVoteModal}
+          votingRoom={votingRoom}
+          availableAmount={availableAmount}
+          selectedVote={selectedVote}
+          wakuVoting={wakuVoting}
+          theme={theme}
+        />
+      ) : (
+        <VoteModal
+          setShowModal={setShowVoteModal}
+          showModal={showVoteModal}
+          votingRoom={votingRoom}
+          availableAmount={availableAmount}
+          selectedVote={selectedVote}
+          wakuVoting={wakuVoting}
+          theme={theme}
+        />
+      )}
       <ProposalInfo votingRoom={votingRoom} providerName={wakuVoting.providerName} />
       <ProposalVote
         votingRoom={votingRoom}
-        theme={theme}
+        selectedVote={selectedVote}
-        availableAmount={availableAmount}
         wakuVoting={wakuVoting}
         account={account}
+        againstClick={customAgainstClick ?? againstClick}
+        forClick={customForClick ?? forClick}
       />
     </Card>
   )

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

@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
-import { useEthers } from '@usedapp/core'
+import { CreateButton } from '@status-waku-voting/react-components'
-import { Modal, Networks, CreateButton } from '@status-waku-voting/react-components'
 import { Theme } from '@status-waku-voting/react-components/dist/esm/src/style/themes'
 
 type ProposalHeaderProps = {

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

@@ -1,4 +1,3 @@
-import { WakuVoting } from '@status-waku-voting/core'
 import { VotingRoom } from '@status-waku-voting/core/dist/esm/src/types/PollType'
 import React from 'react'
 import styled from 'styled-components'

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

@@ -3,8 +3,6 @@ import styled from 'styled-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'
-import { VotingRoom } from '@status-waku-voting/core/dist/esm/src/types/PollType'
 
 type ProposalListProps = {
   theme: Theme

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

@@ -4,33 +4,26 @@ import { FinalBtn, VoteBtnAgainst, VoteBtnFor } from '../Buttons'
 import { VoteSubmitButton } from './VoteSubmitButton'
 import { VoteChart } from './VoteChart'
 import { ViewLink } from '../ViewLink'
-import { Modal, Theme } from '@status-waku-voting/react-components'
-import { VoteModal } from '../VoteModal'
-import { VoteAnimatedModal } from '../VoteAnimatedModal'
 import { VotingRoom } from '@status-waku-voting/core/dist/esm/src/types/PollType'
 import { WakuVoting } from '@status-waku-voting/core'
 
 interface ProposalVoteProps {
-  theme: Theme
   votingRoom: VotingRoom
-  availableAmount: number
+  selectedVote: number
-  hideModalFunction?: (val: boolean) => void
   wakuVoting: WakuVoting
   account: string | null | undefined
+  againstClick: () => void
+  forClick: () => void
 }
 
 export function ProposalVote({
   account,
   votingRoom,
-  theme,
+  selectedVote,
-  availableAmount,
-  hideModalFunction,
   wakuVoting,
+  againstClick,
+  forClick,
 }: 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(() => {
@@ -41,72 +34,25 @@ export function ProposalVote({
     }
   }, [account, votingRoom])
 
-  const setNext = (val: boolean) => {
-    setShowConfirmModal(val)
-    setShowVoteModal(false)
-  }
-
-  const hideConfirm = (val: boolean) => {
-    if (hideModalFunction) {
-      hideModalFunction(false)
-    }
-    setShowConfirmModal(val)
-  }
-
   return (
     <Card>
-      {showVoteModal && (
-        <Modal heading={votingRoom.question} setShowModal={setShowVoteModal} theme={theme}>
-          <VoteModal
-            votingRoom={votingRoom}
-            availableAmount={availableAmount}
-            selectedVote={selectedVoted}
-            proposingAmount={proposingAmount}
-            setShowConfirmModal={setNext}
-            setProposingAmount={setProposingAmount}
-            wakuVoting={wakuVoting}
-          />{' '}
-        </Modal>
-      )}
-      {showConfirmModal && (
-        <Modal heading={votingRoom.question} setShowModal={hideConfirm} theme={theme}>
-          <VoteAnimatedModal
-            votingRoom={votingRoom}
-            selectedVote={selectedVoted}
-            setShowModal={hideConfirm}
-            proposingAmount={proposingAmount}
-          />
-        </Modal>
-      )}
       {votingRoom.voteWinner ? (
         <CardHeading>Proposal {votingRoom.voteWinner == 1 ? 'rejected' : 'passed'}</CardHeading>
       ) : (
         <CardHeading />
       )}
 
-      <VoteChart votingRoom={votingRoom} selectedVote={selectedVoted} />
+      <VoteChart votingRoom={votingRoom} selectedVote={selectedVote} wakuVoting={wakuVoting} />
 
       <CardButtons>
         {votingRoom.voteWinner ? (
           <></>
         ) : (
           <VotesBtns>
-            <VoteBtnAgainst
+            <VoteBtnAgainst disabled={!account || alreadyVoted} onClick={againstClick}>
-              disabled={!account || alreadyVoted}
-              onClick={() => {
-                setSelectedVoted(0)
-                setShowVoteModal(true)
-              }}
-            >
               Vote Against
             </VoteBtnAgainst>
-            <VoteBtnFor
+            <VoteBtnFor disabled={!account || alreadyVoted} onClick={forClick}>
-              disabled={!account || alreadyVoted}
-              onClick={() => {
-                setSelectedVoted(1)
-                setShowVoteModal(true)
-              }}
-            >
               Vote For
             </VoteBtnFor>
           </VotesBtns>

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

@@ -10,24 +10,43 @@ import checkIcon from '../../assets/svg/check.svg'
 import checkWinnerIcon from '../../assets/svg/checkWinner.svg'
 import { useMobileVersion } from '@status-waku-voting/react-components'
 import { VotingRoom } from '@status-waku-voting/core/dist/esm/src/types/PollType'
+import { WakuVoting } from '@status-waku-voting/core'
 
 export interface VoteChartProps {
   votingRoom: VotingRoom
+  wakuVoting: WakuVoting
   proposingAmount?: number
   selectedVote?: number
   isAnimation?: boolean
   tabletMode?: (val: boolean) => void
 }
 
-export function VoteChart({ votingRoom, proposingAmount, selectedVote, isAnimation, tabletMode }: VoteChartProps) {
+export function VoteChart({
+  votingRoom,
+  wakuVoting,
+  proposingAmount,
+  selectedVote,
+  isAnimation,
+  tabletMode,
+}: VoteChartProps) {
   const ref = useRef<HTMLHeadingElement>(null)
   const mobileVersion = useMobileVersion(ref, 600)
 
-  const voteSum = useMemo(
+  const totalVotesFor = useMemo(
-    () => votingRoom.wakuTotalVotesFor.add(votingRoom.wakuTotalVotesAgainst),
+    () => (isAnimation ? votingRoom.totalVotesFor : votingRoom.wakuTotalVotesFor),
-    [votingRoom.wakuTotalVotesFor.toString(), votingRoom.wakuTotalVotesAgainst.toString()]
+    [votingRoom, proposingAmount]
   )
-  const graphWidth = useMemo(() => votingRoom.wakuTotalVotesAgainst.mul(100).div(voteSum).toNumber(), [voteSum])
+
+  const totalVotesAgainst = useMemo(
+    () => (isAnimation ? votingRoom.totalVotesAgainst : votingRoom.wakuTotalVotesAgainst),
+    [votingRoom, proposingAmount]
+  )
+
+  const voteSum = useMemo(
+    () => totalVotesFor.add(totalVotesAgainst),
+    [totalVotesFor.toString(), totalVotesAgainst.toString()]
+  )
+  const graphWidth = useMemo(() => totalVotesAgainst.mul(100).div(voteSum).toNumber(), [voteSum])
 
   const balanceWidth = useMemo(() => {
     if (!proposingAmount) {
@@ -35,8 +54,8 @@ export function VoteChart({ votingRoom, proposingAmount, selectedVote, isAnimati
     } else {
       const divider = voteSum.add(proposingAmount)
       return selectedVote === 0
-        ? votingRoom.wakuTotalVotesAgainst.add(proposingAmount).mul(100).div(divider).toNumber()
+        ? totalVotesAgainst.add(proposingAmount).mul(100).div(divider).toNumber()
-        : votingRoom.wakuTotalVotesAgainst.mul(100).div(divider).toNumber()
+        : totalVotesAgainst.mul(100).div(divider).toNumber()
     }
   }, [graphWidth, voteSum, proposingAmount])
 
@@ -47,10 +66,11 @@ export function VoteChart({ votingRoom, proposingAmount, selectedVote, isAnimati
         <VoteBox
           voteType={2}
           mobileVersion={mobileVersion}
-          totalVotes={votingRoom.wakuTotalVotesAgainst.toNumber()}
+          totalVotes={totalVotesAgainst.toNumber()}
           won={voteWinner === 2}
           selected={isAnimation && selectedVote === 0}
           proposingAmount={proposingAmount}
+          wakuVoting={wakuVoting}
         />
         {!voteWinner && (
           <TimeLeft className={selectedVote ? '' : 'notModal'}>{formatTimeLeft(votingRoom.timeLeft)}</TimeLeft>
@@ -58,10 +78,11 @@ export function VoteChart({ votingRoom, proposingAmount, selectedVote, isAnimati
         <VoteBox
           voteType={1}
           mobileVersion={mobileVersion}
-          totalVotes={votingRoom.wakuTotalVotesFor.toNumber()}
+          totalVotes={totalVotesFor.toNumber()}
           won={voteWinner === 1}
           selected={isAnimation && selectedVote === 1}
           proposingAmount={proposingAmount}
+          wakuVoting={wakuVoting}
         />
       </VotesChart>
       <VoteGraphBarWrap className={selectedVote || tabletMode ? '' : 'notModal'}>
@@ -84,11 +105,12 @@ type VoteBoxProps = {
   mobileVersion: boolean
   voteType: number
   totalVotes: number
+  wakuVoting: WakuVoting
   selected?: boolean
   proposingAmount?: number
 }
 
-function VoteBox({ won, mobileVersion, voteType, totalVotes, proposingAmount, selected }: VoteBoxProps) {
+function VoteBox({ won, mobileVersion, voteType, totalVotes, proposingAmount, selected, wakuVoting }: VoteBoxProps) {
   return (
     <VoteBoxWrapper
       style={{
@@ -110,7 +132,7 @@ function VoteBox({ won, mobileVersion, voteType, totalVotes, proposingAmount, se
         ) : (
           addCommas(totalVotes)
         )}{' '}
-        <span style={{ fontWeight: 'normal' }}>ABC</span>
+        <span style={{ fontWeight: 'normal' }}>{wakuVoting.tokenSymbol}</span>
       </span>
     </VoteBoxWrapper>
   )

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

@@ -1,13 +1,13 @@
 import React, { useCallback } from 'react'
 import styled from 'styled-components'
-import { VoteChart } from './ProposalVoteCard/VoteChart'
+import { VoteChart } from '../ProposalVoteCard/VoteChart'
-import { DisabledButton, VoteBtnAgainst, VoteBtnFor } from './Buttons'
+import { DisabledButton, VoteBtnAgainst, VoteBtnFor } from '../Buttons'
-import { VotePropose } from './VotePropose'
+import { VotePropose } from '../VotePropose'
 import { VotingRoom } from '@status-waku-voting/core/dist/esm/src/types/PollType'
 import { WakuVoting } from '@status-waku-voting/core'
 import { BigNumber } from 'ethers'
 
-export interface VoteModalProps {
+export interface AmountModalProps {
   votingRoom: VotingRoom
   availableAmount: number
   selectedVote: number
@@ -17,7 +17,7 @@ export interface VoteModalProps {
   wakuVoting: WakuVoting
 }
 
-export function VoteModal({
+export function AmountModal({
   votingRoom,
   selectedVote,
   availableAmount,
@@ -25,7 +25,7 @@ export function VoteModal({
   setShowConfirmModal,
   setProposingAmount,
   wakuVoting,
-}: VoteModalProps) {
+}: AmountModalProps) {
   const disabled = proposingAmount === 0
   const funds = availableAmount > 0
   const onClick = useCallback(async () => {
@@ -34,14 +34,20 @@ export function VoteModal({
   }, [votingRoom, selectedVote, proposingAmount, wakuVoting])
   return (
     <Column>
-      <VoteChart votingRoom={votingRoom} proposingAmount={proposingAmount} selectedVote={selectedVote} />
+      <VoteChart
+        votingRoom={votingRoom}
+        proposingAmount={proposingAmount}
+        selectedVote={selectedVote}
+        wakuVoting={wakuVoting}
+      />
       <VotePropose
         availableAmount={availableAmount}
         setProposingAmount={setProposingAmount}
         proposingAmount={proposingAmount}
+        wakuVoting={wakuVoting}
       />
 
-      {!funds && <DisabledButton>Not enought ABC to vote</DisabledButton>}
+      {!funds && <DisabledButton>Not enough {wakuVoting.tokenSymbol} to vote</DisabledButton>}
 
       {funds && selectedVote === 0 ? (
         <BtnAgainst disabled={disabled} onClick={onClick}>

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

@@ -1,17 +1,25 @@
+import { WakuVoting } from '@status-waku-voting/core'
 import { VotingRoom } from '@status-waku-voting/core/dist/esm/src/types/PollType'
 import React from 'react'
 import styled from 'styled-components'
-import { FinalBtn } from './Buttons'
+import { FinalBtn } from '../Buttons'
-import { VoteChart } from './ProposalVoteCard/VoteChart'
+import { VoteChart } from '../ProposalVoteCard/VoteChart'
 
-interface VoteAnimatedModalProps {
+interface ConfirmModalProps {
   votingRoom: VotingRoom
   proposingAmount: number
   selectedVote: number
   setShowModal: (val: boolean) => void
+  wakuVoting: WakuVoting
 }
 
-export function VoteAnimatedModal({ votingRoom, selectedVote, proposingAmount, setShowModal }: VoteAnimatedModalProps) {
+export function ConfirmModal({
+  votingRoom,
+  selectedVote,
+  proposingAmount,
+  setShowModal,
+  wakuVoting,
+}: ConfirmModalProps) {
   return (
     <VoteConfirm>
       <ConfirmText>Your vote {selectedVote === 0 ? 'against' : 'for'} this proposal has been cast!</ConfirmText>
@@ -20,6 +28,7 @@ export function VoteAnimatedModal({ votingRoom, selectedVote, proposingAmount, s
         proposingAmount={proposingAmount}
         selectedVote={selectedVote}
         isAnimation={true}
+        wakuVoting={wakuVoting}
       />
 
       <FinalBtn onClick={() => setShowModal(false)}>Close</FinalBtn>

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

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react'
+import { VotingRoom } from '@status-waku-voting/core/dist/esm/src/types/PollType'
+import { Modal, Theme } from '@status-waku-voting/react-components'
+import { AmountModal } from './AmountModal'
+import { ConfirmModal } from './ConfirmModal'
+import { WakuVoting } from '@status-waku-voting/core'
+
+export interface VoteModalProps {
+  setShowModal: (val: boolean) => void
+  showModal: boolean
+  votingRoom: VotingRoom
+  availableAmount: number
+  selectedVote: number
+  wakuVoting: WakuVoting
+  theme: Theme
+}
+
+export function VoteModal({
+  setShowModal,
+  showModal,
+  votingRoom,
+  availableAmount,
+  selectedVote,
+  wakuVoting,
+  theme,
+}: VoteModalProps) {
+  const [screen, setScreen] = useState(0)
+  useEffect(() => setScreen(0), [])
+  const [proposingAmount, setProposingAmount] = useState(0)
+  useEffect(() => {
+    setScreen(0)
+    setProposingAmount(0)
+  }, [showModal])
+  return (
+    <>
+      {showModal && (
+        <Modal heading={votingRoom.question} setShowModal={setShowModal} theme={theme}>
+          {screen == 0 ? (
+            <AmountModal
+              votingRoom={votingRoom}
+              availableAmount={availableAmount}
+              selectedVote={selectedVote}
+              proposingAmount={proposingAmount}
+              setShowConfirmModal={() => setScreen(1)}
+              setProposingAmount={setProposingAmount}
+              wakuVoting={wakuVoting}
+            />
+          ) : (
+            <ConfirmModal
+              votingRoom={votingRoom}
+              selectedVote={selectedVote}
+              setShowModal={() => {
+                setShowModal(false)
+              }}
+              wakuVoting={wakuVoting}
+              proposingAmount={proposingAmount}
+            />
+          )}
+        </Modal>
+      )}
+    </>
+  )
+}

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

@@ -1,3 +1,4 @@
+import { WakuVoting } from '@status-waku-voting/core'
 import React, { useCallback, useMemo } from 'react'
 import { useState } from 'react'
 import styled from 'styled-components'
@@ -8,9 +9,10 @@ export interface VoteProposingProps {
   availableAmount: number
   setProposingAmount: (show: number) => void
   proposingAmount: number
+  wakuVoting: WakuVoting
 }
 
-export function VotePropose({ availableAmount, proposingAmount, setProposingAmount }: VoteProposingProps) {
+export function VotePropose({ availableAmount, proposingAmount, setProposingAmount, wakuVoting }: VoteProposingProps) {
   const [inputFocused, setInputFocused] = useState(false)
   const step = useMemo(
     () => (availableAmount < 100 ? 1 : 10 ** (Math.floor(Math.log10(availableAmount)) - 2)),
@@ -37,10 +39,12 @@ export function VotePropose({ availableAmount, proposingAmount, setProposingAmou
     <VoteProposing>
       <VoteProposingInfo>
         <p>My vote</p>
-        <span>Available {addCommas(availableAmount)} ABC</span>
+        <span>
+          Available {addCommas(availableAmount)} {wakuVoting.tokenSymbol}
+        </span>
       </VoteProposingInfo>
       <VoteProposingAmount
-        value={inputFocused ? proposingAmount.toString() : addCommas(proposingAmount) + ' ABC'}
+        value={inputFocused ? proposingAmount.toString() : addCommas(proposingAmount) + ` wakuVoting.tokenSymbol`}
         onInput={(e) => {
           setProposingAmount(Number(e.currentTarget.value))
         }}

packages/proposal-components/src/components/mobile/ProposalVoteMobile.tsx

@@ -33,13 +33,14 @@ export function ProposalVoteMobile({ wakuVoting, availableAmount }: ProposalVote
     <Card>
       <ProposalInfo votingRoom={votingRoom} mobileMode={true} providerName={wakuVoting.providerName} />
       <VoteChartWrap>
-        <VoteChart votingRoom={votingRoom} selectedVote={selectedVoted} />
+        <VoteChart votingRoom={votingRoom} selectedVote={selectedVoted} wakuVoting={wakuVoting} />
       </VoteChartWrap>
       {!voteWinner && (
         <VotePropose
           availableAmount={availableAmount}
           setProposingAmount={setProposingAmount}
           proposingAmount={proposingAmount}
+          wakuVoting={wakuVoting}
         />
       )}
 

packages/proposal-components/src/components/mobile/ProposeMobile.tsx

@@ -34,7 +34,7 @@ export function ProposeMobile({ availableAmount, wakuVoting }: ProposeVoteModalP
       {insufficientFunds && (
         <ProposingInfo>
           <span>⚠️</span>
-          <InfoText>You need at least 10,000 ABC to create a proposal!</InfoText>
+          <InfoText>You need at least 10,000 {wakuVoting.tokenSymbol} to create a proposal!</InfoText>
         </ProposingInfo>
       )}
       <ProposingCardHeading>Create proposal</ProposingCardHeading>
@@ -88,6 +88,7 @@ export function ProposeMobile({ availableAmount, wakuVoting }: ProposeVoteModalP
               availableAmount={availableAmount}
               setProposingAmount={setProposingAmount}
               proposingAmount={proposingAmount}
+              wakuVoting={wakuVoting}
             />
           </VoteProposeWrap>
 

packages/proposal-components/src/components/newVoteModal/NewVoteModal.tsx

@@ -39,6 +39,7 @@ export function NewVoteModal({ theme, showModal, setShowModal, availableAmount,
           setTitle={setTitle}
           availableAmount={availableAmount}
           setShowProposeVoteModal={() => setScreen(2)}
+          wakuVoting={wakuVoting}
         />
       )}
       {screen === 2 && (

packages/proposal-components/src/components/newVoteModal/ProposeModal.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { ProposingBtn } from '../Buttons'
 import { TextArea } from '../Input'
 import { blueTheme } from '@status-waku-voting/react-components/dist/esm/src/style/themes'
-import { BigNumber } from 'ethers'
+import { WakuVoting } from '@status-waku-voting/core'
 
 interface ProposeModalProps {
   availableAmount: number
@@ -12,6 +12,7 @@ interface ProposeModalProps {
   setShowProposeVoteModal: (val: boolean) => void
   setTitle: (val: string) => void
   setText: (val: string) => void
+  wakuVoting: WakuVoting
 }
 
 export function ProposeModal({
@@ -21,6 +22,7 @@ export function ProposeModal({
   setShowProposeVoteModal,
   setTitle,
   setText,
+  wakuVoting,
 }: ProposeModalProps) {
   const insufficientFunds = useMemo(() => availableAmount < 10000, [availableAmount])
 
@@ -29,7 +31,7 @@ export function ProposeModal({
       {availableAmount < 10000 && (
         <ProposingInfo>
           <span>⚠️</span>
-          <InfoText>You need at least 10,000 ABC to create a proposal!</InfoText>
+          <InfoText>You need at least 10,000 {wakuVoting.tokenSymbol} to create a proposal!</InfoText>
         </ProposingInfo>
       )}
       <Label>

packages/proposal-components/src/components/newVoteModal/ProposeVoteModal.tsx

@@ -38,6 +38,7 @@ export function ProposeVoteModal({
           availableAmount={availableAmount}
           setProposingAmount={setProposingAmount}
           proposingAmount={proposingAmount}
+          wakuVoting={wakuVoting}
         />
       </VoteProposeWrap>
 

packages/proposal-example/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@status-waku-voting/proposal-page",
+  "name": "@status-waku-voting/proposal-example",
   "version": "0.1.0",
   "main": "dist/cjs/src/index.js",
   "module": "dist/esm/src/index.js",