status-im
/
dappconnect-voting-sdk
mirror of https://github.com/status-im/dappconnect-voting-sdk.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix vote chart (#77)

This commit is contained in:
Szymon Szlachtowicz 2021-09-17 11:08:42 +02:00 committed by GitHub
parent 4c29f56329
commit 9502bc67b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx
View File

@ -46,52 +46,22 @@ export function VoteChart({ votingRoom, proposingAmount, selectedVote, isAnimati
<Votes ref={ref}> <Votes ref={ref}>
<VotesChart className={selectedVote || tabletMode ? '' : 'notModal'}> <VotesChart className={selectedVote || tabletMode ? '' : 'notModal'}>
<VoteBox <VoteBox
style={{ voteType={2}
filter: voteWinner && voteWinner === 2 ? 'grayscale(1)' : 'none', mobileVersion={mobileVersion}
alignItems: mobileVersion ? 'flex-start' : 'center', totalVotes={votingRoom.totalVotesAgainst.toNumber()}
}} won={voteWinner === 2}
> selected={isAnimation && selectedVote === 0}
<VoteIcon proposingAmount={proposingAmount}
src={voteWinner === 1 ? crossWinnerIcon : crossIcon}
width={voteWinner === 1 ? '18px' : '14px'}
style={{
marginLeft: mobileVersion ? '10px' : '0',
}}
/> />
<span>
{' '}
{isAnimation && proposingAmount && selectedVote && selectedVote === 0 ? (
<CountUp end={votingRoom.totalVotesAgainst.toNumber() + proposingAmount} separator="," />
) : (
addCommas(votingRoom.totalVotesAgainst.toNumber())
)}{' '}
<span style={{ fontWeight: 'normal' }}>ABC</span>
</span>
</VoteBox>
{!voteWinner && <TimeLeft className={selectedVote ? '' : 'notModal'}>{formatTimeLeft(timeLeft)}</TimeLeft>} {!voteWinner && <TimeLeft className={selectedVote ? '' : 'notModal'}>{formatTimeLeft(timeLeft)}</TimeLeft>}
<VoteBox <VoteBox
style={{ voteType={1}
filter: voteWinner && voteWinner === 1 ? 'grayscale(1)' : 'none', mobileVersion={mobileVersion}
alignItems: mobileVersion ? 'flex-end' : 'center', totalVotes={votingRoom.totalVotesFor.toNumber()}
}} won={voteWinner === 1}
> selected={isAnimation && selectedVote === 1}
<VoteIcon proposingAmount={proposingAmount}
src={voteWinner === 2 ? checkWinnerIcon : checkIcon}
width={voteWinner === 2 ? '24px' : '18px'}
style={{
marginRight: mobileVersion ? '10px' : '0',
}}
/> />
<span>
{' '}
{isAnimation && proposingAmount && selectedVote && selectedVote === 1 ? (
<CountUp end={votingRoom.totalVotesFor.toNumber() + proposingAmount} separator="," />
) : (
addCommas(votingRoom.totalVotesFor.toNumber())
)}{' '}
<span style={{ fontWeight: 'normal' }}>ABC</span>
</span>
</VoteBox>
</VotesChart> </VotesChart>
<VoteGraphBarWrap className={selectedVote || tabletMode ? '' : 'notModal'}> <VoteGraphBarWrap className={selectedVote || tabletMode ? '' : 'notModal'}>
<VoteGraphBar <VoteGraphBar
@ -106,6 +76,43 @@ export function VoteChart({ votingRoom, proposingAmount, selectedVote, isAnimati
) )
} }
type VoteBoxProps = {
won: boolean
mobileVersion: boolean
voteType: number
totalVotes: number
selected?: boolean
proposingAmount?: number
}
function VoteBox({ won, mobileVersion, voteType, totalVotes, proposingAmount, selected }: VoteBoxProps) {
return (
<VoteBoxWrapper
style={{
filter: won ? 'grayscale(1)' : 'none',
alignItems: mobileVersion ? (voteType == 1 ? 'flex-start' : 'flex-end') : 'center',
}}
>
<VoteIcon
src={voteType === 1 ? (!won ? checkWinnerIcon : checkIcon) : !won ? crossWinnerIcon : crossIcon}
width={!won ? '18px' : '14px'}
style={{
marginLeft: mobileVersion ? '10px' : '0',
}}
/>
<span>
{' '}
{proposingAmount && selected ? (
<CountUp end={totalVotes + proposingAmount} separator="," start={totalVotes} duration={2} useEasing={false} />
) : (
addCommas(totalVotes)
)}{' '}
<span style={{ fontWeight: 'normal' }}>ABC</span>
</span>
</VoteBoxWrapper>
)
}
const Votes = styled.div` const Votes = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -135,7 +142,7 @@ const VotesChart = styled.div`
} }
` `
const VoteBox = styled.div` const VoteBoxWrapper = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;

4
packages/proposal-components/src/components/VotePropose.tsx
View File

@ -12,7 +12,6 @@ export interface VoteProposingProps {
export function VotePropose({ availableAmount, proposingAmount, setProposingAmount }: VoteProposingProps) { export function VotePropose({ availableAmount, proposingAmount, setProposingAmount }: VoteProposingProps) {
const [inputFocused, setInputFocused] = useState(false) const [inputFocused, setInputFocused] = useState(false)
const disabled = useMemo(() => availableAmount === 0, [availableAmount])
const step = useMemo( const step = useMemo(
() => (availableAmount < 100 ? 1 : 10 ** (Math.floor(Math.log10(availableAmount)) - 2)), () => (availableAmount < 100 ? 1 : 10 ** (Math.floor(Math.log10(availableAmount)) - 2)),
[availableAmount] [availableAmount]
@ -57,7 +56,8 @@ export function VotePropose({ availableAmount, proposingAmount, setProposingAmou
value={proposingAmount} value={proposingAmount}
onChange={sliderChange} onChange={sliderChange}
style={{ style={{
background: disabled background:
availableAmount === 0
? '#EDF1FF' ? '#EDF1FF'
: `linear-gradient(90deg, #0F3595 0% ${progress}, #EDF1FF ${progress} 100%)`, : `linear-gradient(90deg, #0F3595 0% ${progress}, #EDF1FF ${progress} 100%)`,
}} }}