Skip to content

Commit

Permalink
fix: added voting
Browse files Browse the repository at this point in the history
  • Loading branch information
@Argeare5
Argeare5 committed Dec 6, 2024
1 parent 3ccf7a4 commit 6522393
Show file tree
Hide file tree
Showing 12 changed files with 1,405 additions and 112 deletions.
134 changes: 134 additions & 0 deletions src/components/GelatoSwitcher.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import { Box, useTheme } from '@mui/system';
import { useState } from 'react';

import { texts } from '../helpers/texts/texts';
import { BoxWith3D } from './BoxWith3D';

const TextBox = ({
value,
text,
isHovered,
isClicked,
isOff,
}: {
value: boolean;
text: string;
isHovered?: boolean;
isClicked?: boolean;
isOff?: boolean;
}) => {
return (
<Box
sx={{
typography: 'descriptor',
color: isClicked
? '$textDisabled'
: value
? isHovered
? '$textWhite'
: isOff
? '$text'
: '$textWhite'
: '$textDisabled',
width: 30,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
zIndex: 2,
left:
value && !isHovered && !isClicked
? isOff
? 2
: 4
: value && isHovered && !isClicked
? isOff
? 0
: 2
: 0,
bottom:
value && !isHovered && !isClicked
? 3
: value && isHovered && !isClicked
? 1
: 0,
}}>
{text}
</Box>
);
};

interface GelatoSwitcherProps {
value: boolean;
setValue?: (value: boolean) => void;
disabled?: boolean;
}

export function GelatoSwitcher({
disabled,
value,
setValue,
}: GelatoSwitcherProps) {
const theme = useTheme();

const [isHovered, setIsHoverer] = useState(false);
const [isClicked, setIsClicked] = useState(false);

const borderSize = isClicked ? 0 : isHovered ? 2 : 4;
const contentColor =
isHovered || isClicked ? '$secondary' : value ? '$mainButton' : '$light';

return (
<Box
onMouseOver={() => !disabled && !isClicked && setIsHoverer(true)}
onMouseOut={() => setIsHoverer(false)}
sx={{
display: 'flex',
alignItems: 'center',
width: 60,
height: 18,
position: 'relative',
border: `1px solid ${theme.palette.$mainBorder}`,
backgroundColor: '$mainLight',
cursor: disabled ? 'default' : 'pointer',
}}
onClick={() => {
if (!disabled && setValue) {
setIsHoverer(false);
setIsClicked(true);
setValue(!value);
setTimeout(() => setIsClicked(false), 700);
}
}}>
<BoxWith3D
wrapperCss={{
position: 'absolute',
transition: 'all 0.7s ease',
left: value ? 30 : -1,
bottom: -1,
zIndex: 1,
}}
contentColor={contentColor}
borderSize={borderSize}
leftBorderColor="$buttonBorderBottom"
bottomBorderColor="$buttonBorderLeft"
anySize>
<Box sx={{ width: 26, height: 16 }} />
</BoxWith3D>

<TextBox
text={texts.other.off}
value={!value}
isOff
isClicked={isClicked}
isHovered={isHovered}
/>
<TextBox
text={texts.other.on}
value={value}
isClicked={isClicked}
isHovered={isHovered}
/>
</Box>
);
}
15 changes: 8 additions & 7 deletions src/components/ProposalsDetails/ProposalPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { DECIMALS } from '../../configs/configs';
import { texts } from '../../helpers/texts/texts';
import { ActivateVotingOnVotingMachineModal } from '../../transactions/components/ActionModals/ActivateVotingOnVotingMachineModal';
import { ExecutePayloadModal } from '../../transactions/components/ActionModals/ExecutePayloadModal';
import { VoteModal } from '../../transactions/components/ActionModals/VoteModal';
import {
ContractsConstants,
DetailedProposalData,
Expand Down Expand Up @@ -360,13 +361,13 @@ export function ProposalPage({

<ToTopButton />

{/*{data.formattedData.isVotingActive && (*/}
{/* <VoteModal*/}
{/* isOpen={isVoteModalOpen}*/}
{/* setIsOpen={setIsVoteModalOpen}*/}
{/* proposalId={proposal.data.id}*/}
{/* />*/}
{/*)}*/}
{data.formattedData.isVotingActive && (
<VoteModal
isOpen={isVoteModalOpen}
setIsOpen={setIsVoteModalOpen}
proposalId={data.proposalData.id}
/>
)}

{/*{isProposalHistoryModalOpen && (*/}
{/* <ProposalHistoryModal*/}
Expand Down
11 changes: 11 additions & 0 deletions src/components/ProposalsList/ActiveItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@ export function ActiveItem({
);
const votingBalances = useStore((state) => state.votingBalances);
const votedData = useStore((state) => state.votedData);
const proposalDetailsLoading = useStore(
(state) => state.proposalDetailsLoading,
);

const userProposalData = selectProposalDataByUser({
votingBalances,
Expand Down Expand Up @@ -296,6 +299,11 @@ export function ActiveItem({
onClick={handleVoteButtonClick}
votingChainId={proposalData.votingChainId}
isForHelpModal={isForHelpModal}
loading={
proposalDetailsLoading[
proposalData.proposalId
]
}
/>
)}
</Box>
Expand Down Expand Up @@ -397,6 +405,9 @@ export function ActiveItem({
onClick={handleVoteButtonClick}
votingChainId={proposalData.votingChainId}
isForHelpModal={isForHelpModal}
loading={
proposalDetailsLoading[proposalData.proposalId]
}
/>
)}
</>
Expand Down
63 changes: 46 additions & 17 deletions src/components/ProposalsList/ProposalsList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
'use client';

import { useEffect } from 'react';
import React, { useEffect, useState } from 'react';

import { useStore } from '../../providers/ZustandStoreProvider';
import { selectProposalsForActivePage } from '../../store/selectors/proposalsSelector';
import { VoteModal } from '../../transactions/components/ActionModals/VoteModal';
import {
ActiveProposalOnTheList,
ContractsConstants,
Expand Down Expand Up @@ -64,6 +65,9 @@ export function ProposalsList({
selectProposalsForActivePage(store, activePage),
);

const [proposalId, setProposalId] = useState<null | number>(null);
const [isVoteModalOpen, setIsVoteModalOpen] = useState(false);

useEffect(() => {
initializeConfigs(configs);
}, [configs]);
Expand Down Expand Up @@ -95,26 +99,51 @@ export function ProposalsList({
}
}, [activeWallet?.address]);

const handleVoteButtonClick = (proposalId: number) => {
setIsVoteModalOpen(true);
setProposalId(proposalId);
};

const handleClose = (value: boolean) => {
setProposalId(null);
setIsVoteModalOpen(value);
};

if (updatedListDataLoading[activePage]) {
return <ProposalsListPageLoading />;
}

return (
<Container>
{proposalsListData.activeProposalsData.map((proposal) => {
if (!proposal.isFinished) {
return (
<ActiveItem proposalData={proposal} key={proposal.proposalId} />
);
}
})}
{proposalsListData.finishedProposalsData.map((proposal) => {
return <FinishedItem data={proposal} key={proposal.proposalId} />;
})}
<ProposalsPagination
activePage={activePage - 1}
totalItems={totalProposalsCount}
/>
</Container>
<>
<Container>
{proposalsListData.activeProposalsData.map((proposal) => {
if (!proposal.isFinished) {
return (
<ActiveItem
proposalData={proposal}
key={proposal.proposalId}
voteButtonClick={handleVoteButtonClick}
/>
);
}
})}
{proposalsListData.finishedProposalsData.map((proposal) => {
return <FinishedItem data={proposal} key={proposal.proposalId} />;
})}
<ProposalsPagination
activePage={activePage - 1}
totalItems={totalProposalsCount}
/>
</Container>

{(proposalId || proposalId === 0) && (
<VoteModal
isOpen={isVoteModalOpen}
setIsOpen={handleClose}
proposalId={proposalId}
fromList
/>
)}
</>
);
}
4 changes: 2 additions & 2 deletions src/components/ProposalsList/ProposalsListPageLoading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ export default function ProposalsListPageLoading() {
return (
<Container>
{Array.from({ length: 2 }).map((_, index) => (
<ProposalListItemWrapper key={index}>
<ProposalListItemWrapper isForHelpModal key={index}>
<Loading />
</ProposalListItemWrapper>
))}
{Array.from({ length: PAGE_SIZE - 2 }).map((_, index) => (
<ProposalListItemWrapper isFinished key={index}>
<ProposalListItemWrapper isForHelpModal isFinished key={index}>
<Loading isFinished />
</ProposalListItemWrapper>
))}
Expand Down
4 changes: 3 additions & 1 deletion src/components/ProposalsList/VoteButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ interface VoteButtonProps {
votingChainId: number;
onClick: (proposalId: number) => void;
isForHelpModal?: boolean;
loading?: boolean;
}

export function VoteButton({
Expand All @@ -29,6 +30,7 @@ export function VoteButton({
votingChainId,
onClick,
isForHelpModal,
loading,
}: VoteButtonProps) {
const transactionsPool = useStore((store) => store.transactionsPool);
const activeWallet = useStore((store) => store.activeWallet);
Expand Down Expand Up @@ -104,7 +106,7 @@ export function VoteButton({
</Box>
) : (
<SmallButton
loading={buttonLoading}
loading={loading || buttonLoading}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
Expand Down
Loading

1 comment on commit 6522393

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This commit was deployed on ipfs

Please sign in to comment.