diff --git a/packages/proposal-components/src/components/Buttons.tsx b/packages/proposal-components/src/components/Buttons.tsx index 6d7b3ce..de0bb12 100644 --- a/packages/proposal-components/src/components/Buttons.tsx +++ b/packages/proposal-components/src/components/Buttons.tsx @@ -110,3 +110,11 @@ export const ProposingBtn = styled(Btn)` filter: grayscale(1); } ` + +export const DisabledButton = styled(Btn)` + width: 100%; + background-color: #f3f3f3; + color: #676868; + font-size: 15px; + margin-top: 32px; +` diff --git a/packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx b/packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx index a5d1ea2..e77ade4 100644 --- a/packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx +++ b/packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx @@ -50,7 +50,7 @@ export function VoteChart({ let balanceWidth = graphWidth - if (proposingAmount && selectedVote) { + if (proposingAmount) { balanceWidth = selectedVote === 0 ? (100 * (votesAgainst + proposingAmount)) / (voteSum + proposingAmount) diff --git a/packages/proposal-components/src/components/ProposeVoteModal.tsx b/packages/proposal-components/src/components/ProposeVoteModal.tsx index a17687f..00318c0 100644 --- a/packages/proposal-components/src/components/ProposeVoteModal.tsx +++ b/packages/proposal-components/src/components/ProposeVoteModal.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import styled from 'styled-components' import { ProposingBtn } from './Buttons' -import { Card, CardHeading, CardText } from './ProposalInfo' +import { CardHeading, CardText } from './ProposalInfo' import { ProposingData } from './ProposeModal' import { VotePropose } from './VotePropose' diff --git a/packages/proposal-components/src/components/VoteAnimatedModal.tsx b/packages/proposal-components/src/components/VoteAnimatedModal.tsx index e83d9ff..33c73f9 100644 --- a/packages/proposal-components/src/components/VoteAnimatedModal.tsx +++ b/packages/proposal-components/src/components/VoteAnimatedModal.tsx @@ -22,7 +22,8 @@ export function VoteAnimatedModal({ }: VoteAnimatedModalProps) { return ( - Your vote for this proposal has been cast! + Your vote {selectedVote === 0 ? 'against' : 'for'} this proposal has been cast! + 0 return ( @@ -45,15 +46,18 @@ export function VoteModal({ proposingAmount={proposingAmount} /> - {selectedVote === 0 ? ( - setShowConfirmModal(true)}> - Vote Against - - ) : ( - setShowConfirmModal(true)}> - Vote For - - )} + {!funds && Not enought ABC to vote} + + {funds && + (selectedVote === 0 ? ( + setShowConfirmModal(true)}> + Vote Against + + ) : ( + setShowConfirmModal(true)}> + Vote For + + ))} ) } diff --git a/packages/proposal-components/src/components/VotePropose.tsx b/packages/proposal-components/src/components/VotePropose.tsx index db3a24f..1f88351 100644 --- a/packages/proposal-components/src/components/VotePropose.tsx +++ b/packages/proposal-components/src/components/VotePropose.tsx @@ -8,20 +8,20 @@ export interface VoteProposingProps { availableAmount: number setProposingAmount: (show: number) => void proposingAmount: number - disabled?: boolean } export function VotePropose({ availableAmount, proposingAmount, setProposingAmount }: VoteProposingProps) { - const [displayAmount, setDisplayAmount] = useState(addCommas(proposingAmount) + ' SNT') - + 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) + ' SNT') + setDisplayAmount(addCommas(availableAmount) + ' ABC') } const sliderChange = (e: React.ChangeEvent) => { @@ -29,7 +29,7 @@ export function VotePropose({ availableAmount, proposingAmount, setProposingAmou setAvailableAmount() } else { setProposingAmount(Number(e.target.value)) - setDisplayAmount(addCommas(Number(e.target.value)) + ' SNT') + setDisplayAmount(addCommas(Number(e.target.value)) + ' ABC') } } @@ -39,7 +39,7 @@ export function VotePropose({ availableAmount, proposingAmount, setProposingAmou if (proposingAmount > availableAmount) { setAvailableAmount() } else { - setDisplayAmount(addCommas(proposingAmount) + ' SNT') + setDisplayAmount(addCommas(proposingAmount) + ' ABC') } } @@ -67,7 +67,9 @@ export function VotePropose({ availableAmount, proposingAmount, setProposingAmou value={proposingAmount} onChange={sliderChange} style={{ - background: `linear-gradient(90deg, #0F3595 0% ${progress}, #EDF1FF ${progress} 100%)`, + background: disabled + ? '#EDF1FF' + : `linear-gradient(90deg, #0F3595 0% ${progress}, #EDF1FF ${progress} 100%)`, }} /> diff --git a/packages/proposal-components/src/components/VotingEmpty.tsx b/packages/proposal-components/src/components/VotingEmpty.tsx index 07460f3..bba225c 100644 --- a/packages/proposal-components/src/components/VotingEmpty.tsx +++ b/packages/proposal-components/src/components/VotingEmpty.tsx @@ -1,6 +1,5 @@ -import React, { useEffect, useState } from 'react' +import React, { useState } from 'react' import { useEthers } from '@usedapp/core' - import styled from 'styled-components' import { CreateButton, Modal, Networks, Theme } from '@status-waku-voting/react-components' import { ProposeModal } from './ProposeModal'