Add Vote/Redeem Process

app/src/components/common/icons/IconGrowth.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const IconGrowth = () => (
+  <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      clipRule="evenodd"
+      d="M10.1041 21.8205C11.6764 20.252 12.0034 17.9251 11.3335 16.3866C9.92843 16.6269 8.77084 16.4376 7.85061 15.9025C6.89353 15.3461 6.3203 14.4894 5.97816 13.6736C5.63727 12.8607 5.50093 12.0322 5.44594 11.4273C5.41806 11.1206 5.41018 10.8607 5.40939 10.6747C5.40899 10.5814 5.41037 10.506 5.41197 10.4519C5.41278 10.4248 5.41364 10.4029 5.41436 10.3868L5.41532 10.3667L5.41568 10.36L5.41582 10.3575L5.41589 10.3564C5.41591 10.3559 5.41594 10.3555 6.41421 10.4142C6.35549 9.41594 6.35594 9.41592 6.35641 9.41589L6.35747 9.41583L6.36 9.41569L6.36674 9.41532L6.38675 9.41436C6.40294 9.41364 6.42478 9.41278 6.45188 9.41198C6.50604 9.41038 6.5814 9.409 6.67466 9.40939C6.86072 9.41018 7.12057 9.41806 7.4273 9.44594C8.03221 9.50094 8.86067 9.63727 9.67356 9.97816C10.1826 10.1916 10.7076 10.4951 11.1656 10.9256C11.194 10.8756 11.2233 10.826 11.2535 10.777C11.9168 9.6991 12.9341 8.97311 13.9118 8.48425C14.8954 7.99245 15.9101 7.70499 16.6644 7.54C17.0448 7.45678 17.367 7.40301 17.5966 7.36977C17.7116 7.35312 17.8039 7.34156 17.8693 7.33399C17.9019 7.3302 17.9279 7.32741 17.9467 7.32548L17.9693 7.32321L17.9765 7.32253L17.979 7.32229L17.98 7.3222C17.9804 7.32217 17.9808 7.32213 18.0713 8.31802C19.0672 8.40856 19.0672 8.40895 19.0672 8.40937L19.0671 8.41035L19.0668 8.41287L19.0662 8.42002L19.0639 8.44269C19.062 8.46145 19.0592 8.48743 19.0554 8.52011C19.0478 8.58545 19.0362 8.67773 19.0196 8.79272C18.9864 9.02238 18.9326 9.34453 18.8494 9.72496C18.6844 10.4792 18.3969 11.4939 17.9051 12.4775C17.4163 13.4553 16.6903 14.4725 15.6123 15.1359C14.9341 15.5533 14.1536 15.8074 13.2724 15.848C13.9708 17.7045 13.7364 20.0643 12.5192 21.9868C17.8007 21.7166 22 17.3487 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 16.8746 5.48785 20.9346 10.1041 21.8205ZM18.0713 8.31802L17.9808 7.32213C18.2764 7.29526 18.5686 7.40106 18.7785 7.61092C18.9883 7.82077 19.0941 8.113 19.0672 8.40856L18.0713 8.31802ZM6.41421 10.4142L5.41594 10.3555C5.44571 9.84944 5.84943 9.44571 6.35549 9.41594L6.41421 10.4142ZM24 12C24 18.6274 18.6274 24 12 24C11.5645 24 11.1344 23.9768 10.7109 23.9316C10.6309 23.923 10.5511 23.9137 10.4716 23.9036C9.55525 23.7871 8.67112 23.5673 7.8313 23.2561C3.25886 21.5621 0 17.1616 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM7.46053 11.4605C7.90621 11.5149 8.42185 11.622 8.90011 11.8225C9.45425 12.0549 9.90133 12.3877 10.1735 12.8559C10.3808 13.2124 10.5321 13.7254 10.4789 14.4789C9.72536 14.5321 9.21238 14.3808 8.85585 14.1735C8.38768 13.9013 8.05493 13.4543 7.82254 12.9001C7.62198 12.4219 7.51494 11.9062 7.46053 11.4605ZM14.8063 10.2731C15.4926 9.92994 16.2228 9.70107 16.8369 9.55251C16.6883 10.1665 16.4594 10.8968 16.1163 11.5831C15.7212 12.3732 15.2098 13.0353 14.5641 13.4326C14.0637 13.7405 13.4221 13.9278 12.5632 13.8262C12.4616 12.9673 12.6489 12.3256 12.9568 11.8252C13.3541 11.1796 14.0162 10.6681 14.8063 10.2731Z"
+      fill="#4B9E98"
+      fillRule="evenodd"
+    />
+  </svg>
+)

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'

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}
         />
+        <ModalVoteWrapper context={context} isOpen={true} onClose={() => setModalLockTokensState(false)} yes />
         <ModalYourConnectionWrapper
           arrayOfClaimableBalances={arrayOfClaimableTokenBalances}
           changeWallet={() => {

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'

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<HTMLDivElement> {
+  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<boolean>(false)
+  const [transactionMessage, setTransactionMessage] = useState<string>('')
+
+  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 (
+    <>
+      <Modal isOpen={!isTransactionModalOpen} style={theme.fluidHeightModal}>
+        <ContentWrapper>
+          <ModalNavigation style={{ padding: '0', marginBottom: '24px' }}>
+            <NavLeft>
+              <HeaderText>Vote for {yes ? 'Yes' : 'No'}</HeaderText>
+            </NavLeft>
+            <IconClose hoverEffect={true} onClick={onClose} />
+          </ModalNavigation>
+          <ModalMain>
+            <TopRow>
+              <IconJazz account={account} size={24} />{' '}
+              <TopRowText>{truncateStringInTheMiddle(account, 5, 3)}</TopRowText>
+            </TopRow>
+            <DataRow>
+              <LightDataItem>Locked in Guild</LightDataItem>
+              <DarkDataItem>543.43 OMN</DarkDataItem>
+            </DataRow>
+            <DataRow style={{ marginTop: '12px' }}>
+              <LightDataItem>Voting Power</LightDataItem>
+              <DarkDataItem>0.64%</DarkDataItem>
+            </DataRow>
+            <DataRow>
+              <LightDataItem>Vote Impact</LightDataItem>
+              <DarkDataItem>
+                <PercentageText lightColor>30.54%</PercentageText>
+                <>
+                  <ArrowIcon color={theme.colors.textColorDark} style={{ margin: '0 10px' }} />
+                  31.18%
+                </>
+              </DarkDataItem>
+            </DataRow>
+          </ModalMain>
+        </ContentWrapper>
+        <>
+          <Divider />
+          <ModalMain>
+            <ContentWrapper>
+              <TopRow>
+                <IconGrowth />
+                <TopRowText green>You earn</TopRowText>
+              </TopRow>
+              <DataRow>
+                <LightDataItem>For Voting</LightDataItem>
+                <GreenDataItem>450.00 OMN</GreenDataItem>
+              </DataRow>
+              <DataRow>
+                <LightDataItem>If Proposal Passes</LightDataItem>
+                <GreenDataItem>+50.00 OMN</GreenDataItem>
+              </DataRow>
+              <VoteButton buttonType={ButtonType.primary} onClick={vote}>
+                Vote for {yes ? 'Yes' : 'No'}
+              </VoteButton>
+            </ContentWrapper>
+          </ModalMain>
+        </>
+      </Modal>
+      <ModalTransactionWrapper
+        confirmations={0}
+        confirmationsRequired={0}
+        isOpen={isTransactionModalOpen}
+        message={transactionMessage}
+        onClose={onClose}
+        txHash={txHash}
+        txState={txState}
+      />
+    </>
+  )
+}
+
+export const ModalVoteWrapper = withTheme(ModalVote)