+
(swiper ? setActiveIndex(swiper.realIndex) : null)}
+ onSlideChange={() => (swiper ? setActiveIndex(swiper.realIndex) : undefined)}
slidesPerView={1}
navigation={false}
autoplay={{
@@ -50,6 +42,7 @@ const IntroSlides = ({ items }: SlideProps) => {
columnSpacing="46px"
>
{
>
{slide.title}
@@ -79,14 +65,7 @@ const IntroSlides = ({ items }: SlideProps) => {
{slide.description}
@@ -94,21 +73,8 @@ const IntroSlides = ({ items }: SlideProps) => {
size="large"
component={Link}
variant="contained"
+ className={styles.button}
to={{ pathname: ROUTES.VOTE }}
- sx={{
- color: '#F5F9FF !important',
- fontFamily: 'Roboto',
- fontSize: '16px',
- fontStyle: 'normal',
- fontWeight: '600',
- lineHeight: 'normal',
- borderRadius: '8px',
- background: '#1D439B',
- height: '49px',
- width: '131px',
- textTransform: 'unset',
- whiteSpace: 'nowrap',
- }}
>
Get started
@@ -117,7 +83,8 @@ const IntroSlides = ({ items }: SlideProps) => {
item
xs={6}
>
-
@@ -140,5 +107,3 @@ const IntroSlides = ({ items }: SlideProps) => {
);
};
-
-export default IntroSlides;
diff --git a/ui/cip-1694/src/components/IntroSlides/IntroSlides.types.ts b/ui/cip-1694/src/components/common/Slides/Slides.types.ts
similarity index 100%
rename from ui/cip-1694/src/components/IntroSlides/IntroSlides.types.ts
rename to ui/cip-1694/src/components/common/Slides/Slides.types.ts
diff --git a/ui/cip-1694/src/index.tsx b/ui/cip-1694/src/index.tsx
index 724f47d9e..7af3cd000 100644
--- a/ui/cip-1694/src/index.tsx
+++ b/ui/cip-1694/src/index.tsx
@@ -1,12 +1,25 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { ThemeProvider } from '@mui/material/styles';
import reportWebVitals from './reportWebVitals';
import { App } from './App';
+import theme from './common/styles/theme';
+import { store } from './common/store/index';
const container = document.getElementById('root')!;
const root = createRoot(container);
-root.render(
);
+root.render(
+
+
+
+
+
+
+
+);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
diff --git a/ui/cip-1694/src/pages/Introduction/Introduction.scss b/ui/cip-1694/src/pages/Introduction/Introduction.scss
index 7651e8743..aa206a4fb 100644
--- a/ui/cip-1694/src/pages/Introduction/Introduction.scss
+++ b/ui/cip-1694/src/pages/Introduction/Introduction.scss
@@ -1,8 +1,2 @@
-@import "swiper/css";
-@import "swiper/css/autoplay";
-
-.introduction {
- .swiper {
- padding-top: 2.5rem;
- }
-}
+@import 'swiper/css';
+@import 'swiper/css/autoplay';
diff --git a/ui/cip-1694/src/pages/Introduction/Introduction.tsx b/ui/cip-1694/src/pages/Introduction/Introduction.tsx
index 4f791bc50..fdf35edc0 100644
--- a/ui/cip-1694/src/pages/Introduction/Introduction.tsx
+++ b/ui/cip-1694/src/pages/Introduction/Introduction.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import IntroSlides from '../../components/IntroSlides/IntroSlides';
-import { SlideItem } from '../../components/IntroSlides/IntroSlides.types';
+import { Slides } from '../../components/common/Slides/Slides';
+import { SlideItem } from '../../components/common/Slides/Slides.types';
import './Introduction.scss';
const Introduction = () => {
@@ -10,10 +10,10 @@ const Introduction = () => {
title: 'What is CIP-1694 voting?',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnaaliqua. Sit amet justo donec enim diam vulputate.',
- }
+ },
];
- return
;
+ return
;
};
export default Introduction;
diff --git a/ui/cip-1694/src/pages/Vote/Vote.module.scss b/ui/cip-1694/src/pages/Vote/Vote.module.scss
new file mode 100644
index 000000000..65b01d235
--- /dev/null
+++ b/ui/cip-1694/src/pages/Vote/Vote.module.scss
@@ -0,0 +1,47 @@
+.vote {
+ padding-top: 30px;
+ .title {
+ color: #061d3c;
+ font-size: 56px;
+ font-weight: 600;
+ line-height: normal;
+ margin-bottom: 12px;
+ text-align: left;
+ }
+
+ .description {
+ color: #061d3c;
+ font-size: 28px;
+ font-weight: 600;
+ line-height: 36px;
+ }
+
+ .button {
+ background: #1d439b;
+ border-radius: 8px;
+ color: #f5f9ff !important;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 600;
+ height: 49px;
+ line-height: normal;
+ text-transform: unset;
+ white-space: nowrap;
+ width: 348px;
+ box-shadow: none;
+ &.secondary {
+ border: 1px solid #bbb;
+ color: #39486c !important;
+ background: #f5f9ff;
+ &:hover {
+ border: 1px solid #1d439b;
+ background: rgba(29, 67, 155, 0.1);
+ box-shadow: 2px 2px 5px 0px rgba(29, 67, 155, 0.25);
+ }
+ }
+ &.disabled {
+ background: #bbbbbb;
+ color: #39486c !important;
+ }
+ }
+}
diff --git a/ui/cip-1694/src/pages/Vote/Vote.scss b/ui/cip-1694/src/pages/Vote/Vote.scss
deleted file mode 100644
index c558bdb5a..000000000
--- a/ui/cip-1694/src/pages/Vote/Vote.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.vote {
-}
diff --git a/ui/cip-1694/src/pages/Vote/Vote.tsx b/ui/cip-1694/src/pages/Vote/Vote.tsx
index 817ef97ec..7aae499f5 100644
--- a/ui/cip-1694/src/pages/Vote/Vote.tsx
+++ b/ui/cip-1694/src/pages/Vote/Vote.tsx
@@ -1,26 +1,27 @@
import React, { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
import { v4 as uuidv4 } from 'uuid';
-import { useTheme } from '@mui/material/styles';
-import { Grid, Container, Typography, Button } from '@mui/material';
-import { useCardano } from '@cardano-foundation/cardano-connect-with-wallet';
+import toast from 'react-hot-toast';
+import cn from 'classnames';
+import { Grid, Typography, Button } from '@mui/material';
import DoneIcon from '@mui/icons-material/Done';
import CloseIcon from '@mui/icons-material/Close';
import DoDisturbIcon from '@mui/icons-material/DoDisturb';
-import ReceiptIcon from '@mui/icons-material/Receipt';
-import toast from 'react-hot-toast';
+import ReceiptIcon from '@mui/icons-material/ReceiptLongOutlined';
+import { useCardano } from '@cardano-foundation/cardano-connect-with-wallet';
import CountDownTimer from 'components/CountDownTimer/CountDownTimer';
-import OptionCard from '../../components/OptionCard/OptionCard';
+import { setIsConnectWalletModalVisible, setIsVoteSubmittedModalVisible } from 'common/store/userSlice';
+import { Account, ChainTip } from 'types/backend-services-types';
+import { OptionCard } from '../../components/OptionCard/OptionCard';
import { OptionItem } from '../../components/OptionCard/OptionCard.types';
import SidePage from '../../components/common/SidePage/SidePage';
import { buildCanonicalVoteInputJson } from '../../common/utils/voteUtils';
import { voteService } from '../../common/api/voteService';
-import VoteReceipt from './VoteReceipt';
-import './Vote.scss';
import { EVENT_ID } from '../../common/constants/appConstants';
import { useToggle } from '../../common/hooks/useToggle';
-import { ChainTip } from '../../types/backend-services-types';
import { HttpError } from '../../common/handlers/httpHandler';
-import ConnectWalletModal from '../../components/ConnectWalletModal/ConnectWalletModal';
+import VoteReceipt from './VoteReceipt';
+import styles from './Vote.module.scss';
const errorsMap = {
INVALID_VOTING_POWER: 'To cast a vote, Voting Power should be more than 0',
@@ -31,26 +32,25 @@ const errorsMap = {
const items: OptionItem[] = [
{
label: 'Yes',
- icon:
,
+ icon:
,
},
{
label: 'No',
- icon:
,
+ icon:
,
},
{
label: 'Abstain',
- icon:
,
+ icon:
,
},
];
const Vote = () => {
- const theme = useTheme();
const { stakeAddress, isConnected, signMessage } = useCardano();
const [isDisabled, setIsDisabled] = useState
(false);
const [showVoteReceipt, setShowVoteReceipt] = useState(false);
- const [openAuthDialog, setOpenAuthDialog] = useState(false);
const [optionId, setOptionId] = useState('');
const [isToggledReceipt, toggleReceipt] = useToggle(false);
+ const dispatch = useDispatch();
const initialise = () => {
optionId === '' && setIsDisabled(true);
@@ -73,15 +73,6 @@ const Vote = () => {
}
};
- const handleCloseAuthDialog = () => {
- setOpenAuthDialog(false);
- };
-
- const onConnectWallet = () => {
- setOpenAuthDialog(false);
- notify('Wallet Connected!');
- };
-
const handleSubmit = async () => {
if (!EVENT_ID) {
console.log('EVENT_ID is not provided');
@@ -89,44 +80,43 @@ const Vote = () => {
}
if (!isConnected) {
- setOpenAuthDialog(true);
+ dispatch(setIsConnectWalletModalVisible({ isVisible: true }));
return;
}
- const slotNumberResponse = (await voteService.getSlotNumber()) as ChainTip;
- const absoluteSlot = slotNumberResponse?.absoluteSlot.toString();
- if (!isConnected || !stakeAddress) return;
+ let absoluteSlot: ChainTip['absoluteSlot'];
+ try {
+ ({ absoluteSlot } = await voteService.getSlotNumber());
+ } catch (error) {
+ console.log('Failed to fecth slot number', error?.message);
+ }
- let votingPower;
+ let votingPower: Account['votingPower'];
try {
- votingPower = (await voteService.getVotingPower(EVENT_ID, stakeAddress)) as number;
+ ({ votingPower } = await voteService.getVotingPower(EVENT_ID, stakeAddress));
} catch (error) {
if (error instanceof Error || error instanceof HttpError) {
console.log('Failed to fetch votingPower', error?.message);
} else console.log('Failed to fetch votingPower', error);
return;
}
- if (absoluteSlot === '') return;
const canonicalVoteInput = buildCanonicalVoteInputJson({
option: optionId?.toUpperCase(),
voter: stakeAddress,
voteId: uuidv4(),
- slotNumber: absoluteSlot,
+ slotNumber: absoluteSlot.toString(),
votePower: votingPower,
});
signMessage(canonicalVoteInput, async (signature, key) => {
- // FIXME: castAVoteWithDigitalSignature are incompatible with requestVoteObject
- if (typeof key === 'undefined') return;
-
const requestVoteObject = {
- cosePublicKey: key,
- coseSignature: isConnected && signature,
+ cosePublicKey: key || '',
+ coseSignature: signature,
};
try {
await voteService.castAVoteWithDigitalSignature(requestVoteObject);
- notify('You vote has been successfully submitted!');
+ dispatch(setIsVoteSubmittedModalVisible({ isVisible: true }));
setOptionId('');
setShowVoteReceipt(true);
} catch (error) {
@@ -143,110 +133,79 @@ const Vote = () => {
};
return (
-
-
-
-
-
- Do you want CIP-1694 that will allow On-Chain Governance, implemented on the Cardano Blockchain?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {!showVoteReceipt && (
-
- )}
-
-
- {showVoteReceipt && (
-
- )}
-
+
+
+
+
+ CIP-1694 vote
+
+
+
+
+
+
+
+
+
+ Do you want CIP-1694 that will allow On-Chain Governance, implemented on the Cardano Blockchain?
+
+
+
+
+
+
+
+
+ {!showVoteReceipt ? (
+
+ ) : (
+
+ )}
-
+
{
>
-
);
};