feat: split vote button into yeah/nay buttons on proposal page

packages/proposals/src/components/Proposal/Vote.tsx

@@ -1,5 +1,5 @@
 import { ParsedAccount } from '@oyster/common';
-import { Button, Col, Modal, Row, Switch, Radio } from 'antd';
+import { Button, Col, Modal, Row } from 'antd';
 import React from 'react';
 import {
   TimelockConfig,
@@ -16,17 +16,19 @@ import './style.less';
 
 const { useWallet } = contexts.Wallet;
 const { useConnection } = contexts.Connection;
-const { useAccountByMint, useThatState } = hooks;
+const { useAccountByMint } = hooks;
 
 const { confirm } = Modal;
 export function Vote({
   proposal,
   state,
   timelockConfig,
+  yeahVote,
 }: {
   proposal: ParsedAccount<TimelockSet>;
   state: ParsedAccount<TimelockState>;
   timelockConfig: ParsedAccount<TimelockConfig>;
+  yeahVote: boolean;
 }) {
   const wallet = useWallet();
   const connection = useConnection();
@@ -37,50 +39,37 @@ export function Vote({
 
   const userTokenAccount = useAccountByMint(proposal.info.sourceMint);
 
-  const [vote, setVote, getLatestVote] = useThatState(0);
-
   const eligibleToView =
     userTokenAccount &&
     userTokenAccount.info.amount.toNumber() > 0 &&
     state.info.status === TimelockStateStatus.Voting;
 
+  const btnLabel = yeahVote ? LABELS.VOTE_YEAH : LABELS.VOTE_NAY;
+  const title = yeahVote ? LABELS.VOTE_YEAH_QUESTION : LABELS.VOTE_NAY_QUESTION;
+  const msg = yeahVote ? LABELS.VOTE_YEAH_MSG : LABELS.VOTE_NAY_MSG;
+
   return eligibleToView ? (
     <Button
       type="primary"
       onClick={() =>
         confirm({
-          title: LABELS.VOTE,
+          title: title,
           icon: <ExclamationCircleOutlined />,
           content: (
             <Row>
               <Col span={24}>
-                <p>
-                  Use {userTokenAccount?.info.amount.toNumber()} tokens to vote
-                  in favor or against this proposal. You can refund these at any
-                  time.
-                </p>
-
-                <Radio.Group
-                  onChange={e => setVote(e.target.value)}
-                  buttonStyle="solid"
-                  className="vote-radio-group"
-                >
-                  <Radio.Button value={1}>Yea</Radio.Button>
-                  <Radio.Button value={-1}>Nay</Radio.Button>
-                </Radio.Group>
+                <p>{msg}</p>
               </Col>
             </Row>
           ),
           okText: LABELS.CONFIRM,
           cancelText: LABELS.CANCEL,
           onOk: async () => {
-            const vote = await getLatestVote();
-
-            if (userTokenAccount && vote != 0) {
+            if (userTokenAccount) {
               const voteAmount = userTokenAccount.info.amount.toNumber();
 
-              const yesTokenAmount = vote > 0 ? voteAmount : 0;
-              const noTokenAmount = vote < 0 ? voteAmount : 0;
+              const yesTokenAmount = yeahVote ? voteAmount : 0;
+              const noTokenAmount = !yeahVote ? voteAmount : 0;
 
               await depositSourceTokensAndVote(
                 connection,
@@ -100,7 +89,7 @@ export function Vote({
         })
       }
     >
-      {LABELS.VOTE}
+      {btnLabel}
     </Button>
   ) : null;
 }

packages/proposals/src/constants/labels.ts

@@ -65,7 +65,14 @@ export const LABELS = {
   ADD_GOVERNANCE_TOKENS: 'Add Governance Tokens',
   ADD_COUNCIL_TOKENS: 'Add Council Tokens',
   ACTIONS: 'Actions',
-  VOTE: 'Vote',
+
+  VOTE_YEAH: 'Yeah',
+  VOTE_NAY: 'Nay',
+  VOTE_YEAH_QUESTION: 'Vote Yeah?',
+  VOTE_YEAH_MSG: 'Vote in favour of the proposal.',
+  VOTE_NAY_QUESTION: 'Vote Nay?',
+  VOTE_NAY_MSG: 'Vote against the proposal.',
+
   EXECUTING: 'Executing...',
   EXECUTED: 'Executed.',
   WITHDRAWING_VOTING_TOKENS: 'Refunding voting tokens as Source Tokens',

packages/proposals/src/views/proposal/index.tsx

@@ -304,6 +304,13 @@ function InnerProposalView({
                 timelockConfig={timelockConfig}
                 proposal={proposal}
                 state={timelockState}
+                yeahVote={true}
+              />
+              <Vote
+                timelockConfig={timelockConfig}
+                proposal={proposal}
+                state={timelockState}
+                yeahVote={false}
               />
             </div>
           </Col>