From 6db85030b86478b0686e160bc4840cf325fa30c0 Mon Sep 17 00:00:00 2001 From: hexyls Date: Fri, 13 Aug 2021 15:48:33 +1000 Subject: [PATCH] feature: initial vote modal --- .../components/common/icons/IconGrowth.tsx | 12 ++ app/src/components/common/icons/index.ts | 2 + .../components/common/layout/header/index.tsx | 2 + app/src/components/modal/index.ts | 1 + app/src/components/modal/modal_vote/index.tsx | 204 ++++++++++++++++++ 5 files changed, 221 insertions(+) create mode 100644 app/src/components/common/icons/IconGrowth.tsx create mode 100644 app/src/components/modal/modal_vote/index.tsx diff --git a/app/src/components/common/icons/IconGrowth.tsx b/app/src/components/common/icons/IconGrowth.tsx new file mode 100644 index 000000000..f70b367eb --- /dev/null +++ b/app/src/components/common/icons/IconGrowth.tsx @@ -0,0 +1,12 @@ +import React from 'react' + +export const IconGrowth = () => ( + + + +) diff --git a/app/src/components/common/icons/index.ts b/app/src/components/common/icons/index.ts index 3a4e8329a..352919287 100644 --- a/app/src/components/common/icons/index.ts +++ b/app/src/components/common/icons/index.ts @@ -42,3 +42,5 @@ export { IconFail } from './IconFail' export { IconInfo } from './IconInfo' export { IconPokt } from './IconPokt' export { IconXdai } from './IconXdai' +export { IconJazz } from './IconJazz' +export { IconGrowth } from './IconGrowth' diff --git a/app/src/components/common/layout/header/index.tsx b/app/src/components/common/layout/header/index.tsx index e219b0f0e..98ecc2342 100644 --- a/app/src/components/common/layout/header/index.tsx +++ b/app/src/components/common/layout/header/index.tsx @@ -15,6 +15,7 @@ import { ModalConnectWalletWrapper, ModalDepositWithdrawWrapper, ModalLockYoTokens, + ModalVoteWrapper, ModalYourConnectionWrapper, } from '../../../modal' import { Dropdown, DropdownItemProps, DropdownPosition } from '../../form/dropdown' @@ -373,6 +374,7 @@ const HeaderContainer: React.FC = (props: any) => { onClose={() => setModalLockTokensState(false)} setIsModalLockTokensOpen={setModalLockTokensState} /> + setModalLockTokensState(false)} yes /> { diff --git a/app/src/components/modal/index.ts b/app/src/components/modal/index.ts index 16fa79cf7..235aa4648 100644 --- a/app/src/components/modal/index.ts +++ b/app/src/components/modal/index.ts @@ -5,3 +5,4 @@ export { ModalDepositWithdrawWrapper } from './modal_deposit_withdraw' export { ModalTransactionWrapper } from './modal_transaction' export { ModalAirdropWrapper } from './modal_airdrop' export { ModalLockYoTokens } from './modal_lock_yo_tokens' +export { ModalVoteWrapper } from './modal_vote' diff --git a/app/src/components/modal/modal_vote/index.tsx b/app/src/components/modal/modal_vote/index.tsx new file mode 100644 index 000000000..64aa9b8ff --- /dev/null +++ b/app/src/components/modal/modal_vote/index.tsx @@ -0,0 +1,204 @@ +import React, { HTMLAttributes, useState } from 'react' +import Modal from 'react-modal' +import styled, { withTheme } from 'styled-components' + +import { truncateStringInTheMiddle } from '../../../util/tools' +import { TransactionStep } from '../../../util/types' +import { Button } from '../../button/button' +import { ButtonType } from '../../button/button_styling_types' +import { IconClose, IconGrowth, IconJazz } from '../../common/icons' +import { ArrowIcon } from '../../market/common_sections/tables/new_value/img/ArrowIcon' +import { ContentWrapper, ModalNavigation } from '../common_styled' +import { ModalTransactionWrapper } from '../modal_transaction' + +interface Props extends HTMLAttributes { + isOpen: boolean + theme?: any + context: any + onClose: () => void + yes: boolean +} + +const NavLeft = styled.div` + display: flex; + align-items: center; +` +const HeaderText = styled.div` + font-family: Roboto; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 19px; + letter-spacing: 0.2px; + text-align: left; + color: #37474f; +` + +const TopRow = styled.div` + margin-bottom: 16px; + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + line-height: ${props => props.theme.fonts.defaultLineHeight}; +` + +const TopRowText = styled.div<{ green?: boolean }>` + margin-left: 10px; + font-family: Roboto; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 18px; + letter-spacing: 0.2px; + color: ${props => (props.green ? props.theme.colors.green : props.theme.colors.textColorDark)}; +` + +const DataRow = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + line-height: ${props => props.theme.fonts.defaultLineHeight}; +` + +const ModalMain = styled.div` + width: 100%; + + & ${DataRow}:not(:last-child) { + margin-bottom: 12px; + } +` +const LightDataItem = styled.div` + color: ${props => props.theme.textfield.placeholderColor}; +` + +const GreenDataItem = styled.div` + display: flex; + color: ${props => props.theme.colors.green}; + align-items: center; + font-weight: ${props => props.theme.textfield.fontWeight}; +` + +const DarkDataItem = styled.div` + display: flex; + align-items: center; + color: ${props => props.theme.colors.textColorDark}; + font-weight: ${props => props.theme.textfield.fontWeight}; +` + +const VoteButton = styled(Button)` + margin-top: 12px; + width: 100%; +` + +const Divider = styled.div` + border-top: ${props => props.theme.borders.borderLineDisabled}; + margin: 24px 0; +` +const PercentageText = styled.span<{ lightColor?: boolean }>` + ${props => props.lightColor && `color:${props.theme.colors.textColorLighter}`}; +` + +const ModalVote = (props: Props) => { + const { context, theme, yes } = props + const { account, balances, cpk, setTxState, txHash, txState } = context + + const { fetchBalances } = balances + + const [isTransactionModalOpen, setIsTransactionModalOpen] = useState(false) + const [transactionMessage, setTransactionMessage] = useState('') + + const vote = async () => { + if (!cpk || !account) { + return + } + + try { + setTransactionMessage(`Vote for Yes`) + setTxState(TransactionStep.waitingConfirmation) + setIsTransactionModalOpen(true) + // await cpk.claimAirdrop({ account }) + await fetchBalances() + } catch (e) { + setIsTransactionModalOpen(false) + } + } + + const onClose = () => { + setIsTransactionModalOpen(false) + props.onClose() + } + + return ( + <> + + + + + Vote for {yes ? 'Yes' : 'No'} + + + + + + {' '} + {truncateStringInTheMiddle(account, 5, 3)} + + + Locked in Guild + 543.43 OMN + + + Voting Power + 0.64% + + + Vote Impact + + 30.54% + <> + + 31.18% + + + + + + <> + + + + + + You earn + + + For Voting + 450.00 OMN + + + If Proposal Passes + +50.00 OMN + + + Vote for {yes ? 'Yes' : 'No'} + + + + + + + + ) +} + +export const ModalVoteWrapper = withTheme(ModalVote)