From f13b63b0b288738ddc42ce1b869e6081b2ccadd7 Mon Sep 17 00:00:00 2001
From: "Sebastian.Bor" <sebastian_bor@hotmail.com>
Date: Fri, 2 Apr 2021 10:46:28 +0100
Subject: [PATCH 01/12] feat: add quick vote

---
 .../src/actions/depositSourceTokens.ts        |  18 ++-
 .../src/actions/depositSourceTokensAndVote.ts |  52 ++++++++
 .../src/components/Proposal/QuickVote.tsx     | 118 ++++++++++++++++++
 packages/proposals/src/constants/labels.ts    |   1 +
 .../proposals/src/views/proposal/index.tsx    |   6 +
 5 files changed, 192 insertions(+), 3 deletions(-)
 create mode 100644 packages/proposals/src/actions/depositSourceTokensAndVote.ts
 create mode 100644 packages/proposals/src/components/Proposal/QuickVote.tsx

diff --git a/packages/proposals/src/actions/depositSourceTokens.ts b/packages/proposals/src/actions/depositSourceTokens.ts
index 7bda08b..09a8fe8 100644
--- a/packages/proposals/src/actions/depositSourceTokens.ts
+++ b/packages/proposals/src/actions/depositSourceTokens.ts
@@ -13,10 +13,12 @@ import {
 } from '@oyster/common';
 
 import { TimelockSet } from '../models/timelock';
+
 import { AccountLayout } from '@solana/spl-token';
 import { depositSourceTokensInstruction } from '../models/depositSourceTokens';
 import { LABELS } from '../constants';
 import { createEmptyGovernanceVotingRecordInstruction } from '../models/createEmptyGovernanceVotingRecord';
+
 const { createTokenAccount } = actions;
 const { sendTransaction } = contexts.Connection;
 const { notify } = utils;
@@ -31,7 +33,11 @@ export const depositSourceTokens = async (
   existingNoVoteAccount: PublicKey | undefined,
   sourceAccount: PublicKey,
   votingTokenAmount: number,
-) => {
+): Promise<{
+  voteAccount: PublicKey;
+  yesVoteAccount: PublicKey;
+  noVoteAccount: PublicKey;
+}> => {
   const PROGRAM_IDS = utils.programIds();
 
   let signers: Account[] = [];
@@ -74,7 +80,7 @@ export const depositSourceTokens = async (
   }
 
   if (!existingYesVoteAccount) {
-    createTokenAccount(
+    existingYesVoteAccount = createTokenAccount(
       instructions,
       wallet.publicKey,
       accountRentExempt,
@@ -85,7 +91,7 @@ export const depositSourceTokens = async (
   }
 
   if (!existingNoVoteAccount) {
-    createTokenAccount(
+    existingNoVoteAccount = createTokenAccount(
       instructions,
       wallet.publicKey,
       accountRentExempt,
@@ -148,4 +154,10 @@ export const depositSourceTokens = async (
     console.error(ex);
     throw new Error();
   }
+
+  return {
+    voteAccount: existingVoteAccount,
+    yesVoteAccount: existingYesVoteAccount,
+    noVoteAccount: existingNoVoteAccount,
+  };
 };
diff --git a/packages/proposals/src/actions/depositSourceTokensAndVote.ts b/packages/proposals/src/actions/depositSourceTokensAndVote.ts
new file mode 100644
index 0000000..b675b49
--- /dev/null
+++ b/packages/proposals/src/actions/depositSourceTokensAndVote.ts
@@ -0,0 +1,52 @@
+import { Connection, PublicKey } from '@solana/web3.js';
+import { ParsedAccount } from '@oyster/common';
+
+import { TimelockConfig, TimelockSet, TimelockState } from '../models/timelock';
+
+import { vote } from './vote';
+import { depositSourceTokens } from './depositSourceTokens';
+
+export const depositSourceTokensAndVote = async (
+  connection: Connection,
+  wallet: any,
+  proposal: ParsedAccount<TimelockSet>,
+  existingVoteAccount: PublicKey | undefined,
+  existingYesVoteAccount: PublicKey | undefined,
+  existingNoVoteAccount: PublicKey | undefined,
+  sourceAccount: PublicKey,
+  timelockConfig: ParsedAccount<TimelockConfig>,
+  state: ParsedAccount<TimelockState>,
+  yesVotingTokenAmount: number,
+  noVotingTokenAmount: number,
+) => {
+  const votingTokenAmount =
+    yesVotingTokenAmount > 0 ? yesVotingTokenAmount : noVotingTokenAmount;
+
+  const {
+    voteAccount,
+    yesVoteAccount,
+    noVoteAccount,
+  } = await depositSourceTokens(
+    connection,
+    wallet,
+    proposal,
+    existingVoteAccount,
+    existingYesVoteAccount,
+    existingNoVoteAccount,
+    sourceAccount,
+    votingTokenAmount,
+  );
+
+  await vote(
+    connection,
+    wallet,
+    proposal,
+    timelockConfig,
+    state,
+    voteAccount,
+    yesVoteAccount,
+    noVoteAccount,
+    yesVotingTokenAmount,
+    noVotingTokenAmount,
+  );
+};
diff --git a/packages/proposals/src/components/Proposal/QuickVote.tsx b/packages/proposals/src/components/Proposal/QuickVote.tsx
new file mode 100644
index 0000000..16c1e74
--- /dev/null
+++ b/packages/proposals/src/components/Proposal/QuickVote.tsx
@@ -0,0 +1,118 @@
+import { ParsedAccount } from '@oyster/common';
+import { Button, Col, Modal, Row, Switch } from 'antd';
+import React, { useState } from 'react';
+import {
+  TimelockConfig,
+  TimelockSet,
+  TimelockState,
+  TimelockStateStatus,
+  VotingEntryRule,
+} from '../../models/timelock';
+import { LABELS } from '../../constants';
+import { depositSourceTokensAndVote } from '../../actions/depositSourceTokensAndVote';
+import { contexts, hooks } from '@oyster/common';
+import {
+  CheckOutlined,
+  CloseOutlined,
+  ExclamationCircleOutlined,
+} from '@ant-design/icons';
+
+const { useWallet } = contexts.Wallet;
+const { useConnection } = contexts.Connection;
+const { useAccountByMint } = hooks;
+
+const { cache } = contexts.Accounts;
+
+const { confirm } = Modal;
+export function QuickVote({
+  proposal,
+  state,
+  timelockConfig,
+}: {
+  proposal: ParsedAccount<TimelockSet>;
+  state: ParsedAccount<TimelockState>;
+  timelockConfig: ParsedAccount<TimelockConfig>;
+}) {
+  const wallet = useWallet();
+  const connection = useConnection();
+
+  const voteAccount = useAccountByMint(proposal.info.votingMint);
+  const yesVoteAccount = useAccountByMint(proposal.info.yesVotingMint);
+  const noVoteAccount = useAccountByMint(proposal.info.noVotingMint);
+
+  const userTokenAccount = useAccountByMint(proposal.info.sourceMint);
+  const alreadyHaveTokens =
+    (voteAccount && voteAccount.info.amount.toNumber() > 0) ||
+    (yesVoteAccount && yesVoteAccount.info.amount.toNumber() > 0) ||
+    (noVoteAccount && noVoteAccount.info.amount.toNumber() > 0);
+
+  const [mode, setMode] = useState(true);
+
+  const eligibleToView =
+    timelockConfig.info.votingEntryRule == VotingEntryRule.Anytime &&
+    [TimelockStateStatus.Draft, TimelockStateStatus.Voting].includes(
+      state.info.status,
+    );
+
+  return eligibleToView ? (
+    <Button
+      type="primary"
+      onClick={() =>
+        confirm({
+          title: 'Confirm',
+          icon: <ExclamationCircleOutlined />,
+          content: (
+            <Row>
+              <Col span={24}>
+                <p>
+                  Use {userTokenAccount?.info.amount.toNumber() || 0} tokens to
+                  vote in favor OR against this proposal. You can refund these
+                  at any time. Use the switch to indicate preference.
+                </p>
+                <Switch
+                  checkedChildren={<CheckOutlined />}
+                  unCheckedChildren={<CloseOutlined />}
+                  defaultChecked
+                  onChange={setMode}
+                />
+              </Col>
+            </Row>
+          ),
+          okText: LABELS.CONFIRM,
+          cancelText: LABELS.CANCEL,
+          onOk: async () => {
+            if (userTokenAccount) {
+              // mode is out of date in this scope, so we use a trick to get it here.
+              const valueHolder = { mode: true };
+              await setMode(mode => {
+                valueHolder.mode = mode;
+                return mode;
+              });
+
+              const voteAmount = userTokenAccount.info.amount.toNumber();
+
+              const yesTokenAmount = valueHolder.mode ? voteAmount : 0;
+              const noTokenAmount = !valueHolder.mode ? voteAmount : 0;
+
+              await depositSourceTokensAndVote(
+                connection,
+                wallet.wallet,
+                proposal,
+                voteAccount?.pubkey,
+                yesVoteAccount?.pubkey,
+                noVoteAccount?.pubkey,
+                userTokenAccount.pubkey,
+                timelockConfig,
+                state,
+                yesTokenAmount,
+                noTokenAmount,
+              );
+            }
+          },
+        })
+      }
+    >
+      {LABELS.QUICK_VOTE}
+    </Button>
+  ) : null;
+}
diff --git a/packages/proposals/src/constants/labels.ts b/packages/proposals/src/constants/labels.ts
index b87ffd8..e03fe79 100644
--- a/packages/proposals/src/constants/labels.ts
+++ b/packages/proposals/src/constants/labels.ts
@@ -69,6 +69,7 @@ export const LABELS = {
   WITHDRAWING_VOTING_TOKENS: 'Refunding voting tokens as Source Tokens',
   TOKENS_WITHDRAWN: 'Voting tokens refunded as Source Tokens',
   REGISTER_TO_VOTE: 'Register to Vote',
+  QUICK_VOTE: 'Quick Vote',
   CONFIRM: 'Confirm',
   CANCEL: 'Cancel',
   ADD_MORE_VOTES: 'Add More Votes',
diff --git a/packages/proposals/src/views/proposal/index.tsx b/packages/proposals/src/views/proposal/index.tsx
index b79d379..4906e99 100644
--- a/packages/proposals/src/views/proposal/index.tsx
+++ b/packages/proposals/src/views/proposal/index.tsx
@@ -25,6 +25,7 @@ import AddSigners from '../../components/Proposal/AddSigners';
 import MintSourceTokens from '../../components/Proposal/MintSourceTokens';
 import { Vote } from '../../components/Proposal/Vote';
 import { RegisterToVote } from '../../components/Proposal/RegisterToVote';
+import { QuickVote } from '../../components/Proposal/QuickVote';
 import { WithdrawTokens } from '../../components/Proposal/WithdrawTokens';
 import './style.less';
 import { getGovernanceVotingRecords } from '../../utils/lookups';
@@ -306,6 +307,11 @@ function InnerProposalView({
                 proposal={proposal}
                 state={timelockState}
               />
+              <QuickVote
+                timelockConfig={timelockConfig}
+                proposal={proposal}
+                state={timelockState}
+              />
               <Vote
                 proposal={proposal}
                 timelockConfig={timelockConfig}

From 6c75998abe6ea26802c9d06d01a882943c66ec9e Mon Sep 17 00:00:00 2001
From: "Sebastian.Bor" <sebastian_bor@hotmail.com>
Date: Fri, 2 Apr 2021 16:59:51 +0100
Subject: [PATCH 02/12] feat: remove register/vote workflow

---
 .../components/Proposal/RegisterToVote.tsx    | 106 -----------------
 .../src/components/Proposal/Vote.tsx          | 111 ------------------
 packages/proposals/src/constants/labels.ts    |   2 -
 .../proposals/src/views/proposal/index.tsx    |  12 --
 4 files changed, 231 deletions(-)
 delete mode 100644 packages/proposals/src/components/Proposal/RegisterToVote.tsx
 delete mode 100644 packages/proposals/src/components/Proposal/Vote.tsx

diff --git a/packages/proposals/src/components/Proposal/RegisterToVote.tsx b/packages/proposals/src/components/Proposal/RegisterToVote.tsx
deleted file mode 100644
index 9f104a7..0000000
--- a/packages/proposals/src/components/Proposal/RegisterToVote.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { ParsedAccount } from '@oyster/common';
-import { Button, Col, Modal, Row, Slider } from 'antd';
-import React, { useState } from 'react';
-import {
-  TimelockConfig,
-  TimelockSet,
-  TimelockState,
-  TimelockStateStatus,
-  VotingEntryRule,
-} from '../../models/timelock';
-import { LABELS } from '../../constants';
-import { depositSourceTokens } from '../../actions/depositSourceTokens';
-import { contexts, hooks } from '@oyster/common';
-import { ExclamationCircleOutlined } from '@ant-design/icons';
-
-const { useWallet } = contexts.Wallet;
-const { useConnection } = contexts.Connection;
-const { useAccountByMint } = hooks;
-
-const { confirm } = Modal;
-export function RegisterToVote({
-  proposal,
-  state,
-  timelockConfig,
-}: {
-  proposal: ParsedAccount<TimelockSet>;
-  state: ParsedAccount<TimelockState>;
-  timelockConfig: ParsedAccount<TimelockConfig>;
-}) {
-  const wallet = useWallet();
-  const connection = useConnection();
-  const voteAccount = useAccountByMint(proposal.info.votingMint);
-  const yesVoteAccount = useAccountByMint(proposal.info.yesVotingMint);
-  const noVoteAccount = useAccountByMint(proposal.info.noVotingMint);
-
-  const userTokenAccount = useAccountByMint(proposal.info.sourceMint);
-  const alreadyHaveTokens =
-    (voteAccount && voteAccount.info.amount.toNumber() > 0) ||
-    (yesVoteAccount && yesVoteAccount.info.amount.toNumber() > 0) ||
-    (noVoteAccount && noVoteAccount.info.amount.toNumber() > 0);
-
-  const eligibleToView =
-    timelockConfig.info.votingEntryRule == VotingEntryRule.Anytime &&
-    [TimelockStateStatus.Draft, TimelockStateStatus.Voting].includes(
-      state.info.status,
-    );
-
-  const [_, setTokenAmount] = useState(1);
-  return eligibleToView ? (
-    <Button
-      type="primary"
-      onClick={() =>
-        confirm({
-          title: 'Confirm',
-          icon: <ExclamationCircleOutlined />,
-          content: (
-            <Row>
-              <Col span={24}>
-                <p>
-                  You can convert up to{' '}
-                  {userTokenAccount?.info.amount.toNumber() || 0} tokens to
-                  voting tokens to vote on this proposal. You can refund these
-                  at any time.
-                </p>
-                {userTokenAccount?.info.amount.toNumber() && (
-                  <Slider
-                    min={1}
-                    max={userTokenAccount?.info.amount.toNumber() || 0}
-                    onChange={setTokenAmount}
-                  />
-                )}
-              </Col>
-            </Row>
-          ),
-          okText: LABELS.CONFIRM,
-          cancelText: LABELS.CANCEL,
-          onOk: async () => {
-            if (userTokenAccount) {
-              // tokenAmount is out of date in this scope, so we use a trick to get it here.
-              const valueHolder = { value: 0 };
-              await setTokenAmount(amount => {
-                valueHolder.value = amount;
-                return amount;
-              });
-
-              await depositSourceTokens(
-                connection,
-                wallet.wallet,
-                proposal,
-                voteAccount?.pubkey,
-                yesVoteAccount?.pubkey,
-                noVoteAccount?.pubkey,
-                userTokenAccount.pubkey,
-                valueHolder.value,
-              );
-              // reset
-              setTokenAmount(1);
-            }
-          },
-        })
-      }
-    >
-      {alreadyHaveTokens ? LABELS.ADD_MORE_VOTES : LABELS.REGISTER_TO_VOTE}
-    </Button>
-  ) : null;
-}
diff --git a/packages/proposals/src/components/Proposal/Vote.tsx b/packages/proposals/src/components/Proposal/Vote.tsx
deleted file mode 100644
index 24cbe0c..0000000
--- a/packages/proposals/src/components/Proposal/Vote.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { ParsedAccount } from '@oyster/common';
-import { Button, Col, Modal, Row, Slider, Switch } from 'antd';
-import React, { useState } from 'react';
-import {
-  TimelockConfig,
-  TimelockSet,
-  TimelockState,
-  TimelockStateStatus,
-} from '../../models/timelock';
-import { LABELS } from '../../constants';
-import { vote } from '../../actions/vote';
-import { contexts, hooks } from '@oyster/common';
-import {
-  CheckOutlined,
-  CloseOutlined,
-  ExclamationCircleOutlined,
-} from '@ant-design/icons';
-
-const { useWallet } = contexts.Wallet;
-const { useConnection } = contexts.Connection;
-const { useAccountByMint } = hooks;
-
-const { confirm } = Modal;
-export function Vote({
-  proposal,
-  state,
-  timelockConfig,
-}: {
-  proposal: ParsedAccount<TimelockSet>;
-  state: ParsedAccount<TimelockState>;
-  timelockConfig: ParsedAccount<TimelockConfig>;
-}) {
-  const wallet = useWallet();
-  const connection = useConnection();
-  const voteAccount = useAccountByMint(proposal.info.votingMint);
-  const yesVoteAccount = useAccountByMint(proposal.info.yesVotingMint);
-  const noVoteAccount = useAccountByMint(proposal.info.noVotingMint);
-  const [mode, setMode] = useState(true);
-  const [_, setTokenAmount] = useState(1);
-  const eligibleToView =
-    voteAccount &&
-    voteAccount.info.amount.toNumber() > 0 &&
-    state.info.status === TimelockStateStatus.Voting;
-  return eligibleToView ? (
-    <Button
-      type="primary"
-      onClick={() =>
-        confirm({
-          title: 'Confirm',
-          icon: <ExclamationCircleOutlined />,
-          content: (
-            <Row>
-              <Col span={24}>
-                <p>
-                  Burning your {voteAccount?.info.amount.toNumber()} tokens is
-                  an irreversible action. Choose how many to burn in favor OR
-                  against this proposal. Use the switch to indicate preference.
-                </p>
-                <Slider
-                  min={1}
-                  max={voteAccount?.info.amount.toNumber()}
-                  onChange={setTokenAmount}
-                />
-                <Switch
-                  checkedChildren={<CheckOutlined />}
-                  unCheckedChildren={<CloseOutlined />}
-                  defaultChecked
-                  onChange={setMode}
-                />
-              </Col>
-            </Row>
-          ),
-          okText: LABELS.CONFIRM,
-          cancelText: LABELS.CANCEL,
-          onOk: async () => {
-            if (voteAccount && yesVoteAccount && noVoteAccount) {
-              // tokenAmount and mode is out of date in this scope, so we use a trick to get it here.
-              const valueHolder = { value: 0, mode: true };
-              await setTokenAmount(amount => {
-                valueHolder.value = amount;
-                return amount;
-              });
-              await setMode(mode => {
-                valueHolder.mode = mode;
-                return mode;
-              });
-              const yesTokenAmount = valueHolder.mode ? valueHolder.value : 0;
-              const noTokenAmount = !valueHolder.mode ? valueHolder.value : 0;
-              await vote(
-                connection,
-                wallet.wallet,
-                proposal,
-                timelockConfig,
-                state,
-                voteAccount.pubkey,
-                yesVoteAccount.pubkey,
-                noVoteAccount.pubkey,
-                yesTokenAmount,
-                noTokenAmount,
-              );
-              // reset
-              setTokenAmount(1);
-            }
-          },
-        })
-      }
-    >
-      {LABELS.VOTE}
-    </Button>
-  ) : null;
-}
diff --git a/packages/proposals/src/constants/labels.ts b/packages/proposals/src/constants/labels.ts
index e03fe79..d05e8ee 100644
--- a/packages/proposals/src/constants/labels.ts
+++ b/packages/proposals/src/constants/labels.ts
@@ -68,11 +68,9 @@ export const LABELS = {
   EXECUTED: 'Executed.',
   WITHDRAWING_VOTING_TOKENS: 'Refunding voting tokens as Source Tokens',
   TOKENS_WITHDRAWN: 'Voting tokens refunded as Source Tokens',
-  REGISTER_TO_VOTE: 'Register to Vote',
   QUICK_VOTE: 'Quick Vote',
   CONFIRM: 'Confirm',
   CANCEL: 'Cancel',
-  ADD_MORE_VOTES: 'Add More Votes',
   REFUND_TOKENS: 'Refund My Tokens',
   REGISTER_GOVERNANCE: 'Register',
   PROGRAM: 'Program ID',
diff --git a/packages/proposals/src/views/proposal/index.tsx b/packages/proposals/src/views/proposal/index.tsx
index 4906e99..982058e 100644
--- a/packages/proposals/src/views/proposal/index.tsx
+++ b/packages/proposals/src/views/proposal/index.tsx
@@ -23,8 +23,6 @@ import { NewInstructionCard } from '../../components/Proposal/NewInstructionCard
 import SignButton from '../../components/Proposal/SignButton';
 import AddSigners from '../../components/Proposal/AddSigners';
 import MintSourceTokens from '../../components/Proposal/MintSourceTokens';
-import { Vote } from '../../components/Proposal/Vote';
-import { RegisterToVote } from '../../components/Proposal/RegisterToVote';
 import { QuickVote } from '../../components/Proposal/QuickVote';
 import { WithdrawTokens } from '../../components/Proposal/WithdrawTokens';
 import './style.less';
@@ -297,11 +295,6 @@ function InnerProposalView({
                   timelockConfig.info.governanceMint.toBase58()
                 }
               />
-              <RegisterToVote
-                timelockConfig={timelockConfig}
-                proposal={proposal}
-                state={timelockState}
-              />
               <WithdrawTokens
                 timelockConfig={timelockConfig}
                 proposal={proposal}
@@ -312,11 +305,6 @@ function InnerProposalView({
                 proposal={proposal}
                 state={timelockState}
               />
-              <Vote
-                proposal={proposal}
-                timelockConfig={timelockConfig}
-                state={timelockState}
-              />
             </div>
           </Col>
         </Row>

From a332d6a69bf21ff27a873722d6b6803f27233679 Mon Sep 17 00:00:00 2001
From: "Sebastian.Bor" <sebastian_bor@hotmail.com>
Date: Fri, 2 Apr 2021 17:45:43 +0100
Subject: [PATCH 03/12] choore: rename QuickVote to Vote

---
 .../components/Proposal/{QuickVote.tsx => Vote.tsx}    | 10 ++--------
 packages/proposals/src/constants/labels.ts             |  1 -
 packages/proposals/src/views/proposal/index.tsx        |  4 ++--
 3 files changed, 4 insertions(+), 11 deletions(-)
 rename packages/proposals/src/components/Proposal/{QuickVote.tsx => Vote.tsx} (91%)

diff --git a/packages/proposals/src/components/Proposal/QuickVote.tsx b/packages/proposals/src/components/Proposal/Vote.tsx
similarity index 91%
rename from packages/proposals/src/components/Proposal/QuickVote.tsx
rename to packages/proposals/src/components/Proposal/Vote.tsx
index 16c1e74..4ab147d 100644
--- a/packages/proposals/src/components/Proposal/QuickVote.tsx
+++ b/packages/proposals/src/components/Proposal/Vote.tsx
@@ -21,10 +21,8 @@ const { useWallet } = contexts.Wallet;
 const { useConnection } = contexts.Connection;
 const { useAccountByMint } = hooks;
 
-const { cache } = contexts.Accounts;
-
 const { confirm } = Modal;
-export function QuickVote({
+export function Vote({
   proposal,
   state,
   timelockConfig,
@@ -41,10 +39,6 @@ export function QuickVote({
   const noVoteAccount = useAccountByMint(proposal.info.noVotingMint);
 
   const userTokenAccount = useAccountByMint(proposal.info.sourceMint);
-  const alreadyHaveTokens =
-    (voteAccount && voteAccount.info.amount.toNumber() > 0) ||
-    (yesVoteAccount && yesVoteAccount.info.amount.toNumber() > 0) ||
-    (noVoteAccount && noVoteAccount.info.amount.toNumber() > 0);
 
   const [mode, setMode] = useState(true);
 
@@ -112,7 +106,7 @@ export function QuickVote({
         })
       }
     >
-      {LABELS.QUICK_VOTE}
+      {LABELS.VOTE}
     </Button>
   ) : null;
 }
diff --git a/packages/proposals/src/constants/labels.ts b/packages/proposals/src/constants/labels.ts
index d05e8ee..9e33f27 100644
--- a/packages/proposals/src/constants/labels.ts
+++ b/packages/proposals/src/constants/labels.ts
@@ -68,7 +68,6 @@ export const LABELS = {
   EXECUTED: 'Executed.',
   WITHDRAWING_VOTING_TOKENS: 'Refunding voting tokens as Source Tokens',
   TOKENS_WITHDRAWN: 'Voting tokens refunded as Source Tokens',
-  QUICK_VOTE: 'Quick Vote',
   CONFIRM: 'Confirm',
   CANCEL: 'Cancel',
   REFUND_TOKENS: 'Refund My Tokens',
diff --git a/packages/proposals/src/views/proposal/index.tsx b/packages/proposals/src/views/proposal/index.tsx
index 982058e..d858064 100644
--- a/packages/proposals/src/views/proposal/index.tsx
+++ b/packages/proposals/src/views/proposal/index.tsx
@@ -23,7 +23,7 @@ import { NewInstructionCard } from '../../components/Proposal/NewInstructionCard
 import SignButton from '../../components/Proposal/SignButton';
 import AddSigners from '../../components/Proposal/AddSigners';
 import MintSourceTokens from '../../components/Proposal/MintSourceTokens';
-import { QuickVote } from '../../components/Proposal/QuickVote';
+import { Vote } from '../../components/Proposal/Vote';
 import { WithdrawTokens } from '../../components/Proposal/WithdrawTokens';
 import './style.less';
 import { getGovernanceVotingRecords } from '../../utils/lookups';
@@ -300,7 +300,7 @@ function InnerProposalView({
                 proposal={proposal}
                 state={timelockState}
               />
-              <QuickVote
+              <Vote
                 timelockConfig={timelockConfig}
                 proposal={proposal}
                 state={timelockState}

From a47b1043b69af4ee69a4bb5d52bc79e5ea8cfc87 Mon Sep 17 00:00:00 2001
From: "Sebastian.Bor" <sebastian_bor@hotmail.com>
Date: Fri, 2 Apr 2021 18:49:12 +0100
Subject: [PATCH 04/12] fix: create and use useLatestState hook to get up to
 date useState hook state

---
 .../proposals/src/components/Proposal/Vote.tsx    | 15 +++++----------
 packages/proposals/src/hooks/useLatestState.ts    | 15 +++++++++++++++
 2 files changed, 20 insertions(+), 10 deletions(-)
 create mode 100644 packages/proposals/src/hooks/useLatestState.ts

diff --git a/packages/proposals/src/components/Proposal/Vote.tsx b/packages/proposals/src/components/Proposal/Vote.tsx
index 4ab147d..739c5cb 100644
--- a/packages/proposals/src/components/Proposal/Vote.tsx
+++ b/packages/proposals/src/components/Proposal/Vote.tsx
@@ -16,6 +16,7 @@ import {
   CloseOutlined,
   ExclamationCircleOutlined,
 } from '@ant-design/icons';
+import { useLatestState } from '../../hooks/useLatestState';
 
 const { useWallet } = contexts.Wallet;
 const { useConnection } = contexts.Connection;
@@ -40,7 +41,7 @@ export function Vote({
 
   const userTokenAccount = useAccountByMint(proposal.info.sourceMint);
 
-  const [mode, setMode] = useState(true);
+  const [_, setMode, getLatestMode] = useLatestState(true);
 
   const eligibleToView =
     timelockConfig.info.votingEntryRule == VotingEntryRule.Anytime &&
@@ -76,17 +77,11 @@ export function Vote({
           cancelText: LABELS.CANCEL,
           onOk: async () => {
             if (userTokenAccount) {
-              // mode is out of date in this scope, so we use a trick to get it here.
-              const valueHolder = { mode: true };
-              await setMode(mode => {
-                valueHolder.mode = mode;
-                return mode;
-              });
-
+              const modeValue = await getLatestMode();
               const voteAmount = userTokenAccount.info.amount.toNumber();
 
-              const yesTokenAmount = valueHolder.mode ? voteAmount : 0;
-              const noTokenAmount = !valueHolder.mode ? voteAmount : 0;
+              const yesTokenAmount = modeValue ? voteAmount : 0;
+              const noTokenAmount = !modeValue ? voteAmount : 0;
 
               await depositSourceTokensAndVote(
                 connection,
diff --git a/packages/proposals/src/hooks/useLatestState.ts b/packages/proposals/src/hooks/useLatestState.ts
new file mode 100644
index 0000000..cb7ae91
--- /dev/null
+++ b/packages/proposals/src/hooks/useLatestState.ts
@@ -0,0 +1,15 @@
+import { useState } from 'react';
+
+// Extends useState() hook with async getLatestState which can be used in async callbacks where state property would be stale
+export function useLatestState<T>(initialState: T) {
+  const [state, setState] = useState<T>(initialState);
+  const getLatestState = () =>
+    new Promise<T>(resolve => {
+      setState(s => {
+        resolve(s);
+        return s;
+      });
+    });
+
+  return [state, setState, getLatestState] as const;
+}

From 5816cbda5e6e80cd93e281d480c477f2cad0f089 Mon Sep 17 00:00:00 2001
From: "Sebastian.Bor" <sebastian_bor@hotmail.com>
Date: Fri, 2 Apr 2021 19:08:13 +0100
Subject: [PATCH 05/12] fix: restrict voting to Voting state and governance
 token avaliability

---
 packages/proposals/src/components/Proposal/Vote.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/proposals/src/components/Proposal/Vote.tsx b/packages/proposals/src/components/Proposal/Vote.tsx
index 739c5cb..46ce16b 100644
--- a/packages/proposals/src/components/Proposal/Vote.tsx
+++ b/packages/proposals/src/components/Proposal/Vote.tsx
@@ -44,10 +44,9 @@ export function Vote({
   const [_, setMode, getLatestMode] = useLatestState(true);
 
   const eligibleToView =
-    timelockConfig.info.votingEntryRule == VotingEntryRule.Anytime &&
-    [TimelockStateStatus.Draft, TimelockStateStatus.Voting].includes(
-      state.info.status,
-    );
+    userTokenAccount &&
+    userTokenAccount.info.amount.toNumber() > 0 &&
+    state.info.status === TimelockStateStatus.Voting;
 
   return eligibleToView ? (
     <Button

From 15958d211a86bc4d3e52478f017e52397dfdd90f Mon Sep 17 00:00:00 2001
From: "Sebastian.Bor" <sebastian_bor@hotmail.com>
Date: Fri, 2 Apr 2021 22:01:54 +0100
Subject: [PATCH 06/12] feat: change votting on/off toggle to radio buttons

---
 .../src/components/Proposal/Vote.tsx          | 45 +++++++++----------
 .../src/components/Proposal/style.less        | 10 +++++
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/packages/proposals/src/components/Proposal/Vote.tsx b/packages/proposals/src/components/Proposal/Vote.tsx
index 46ce16b..df1273f 100644
--- a/packages/proposals/src/components/Proposal/Vote.tsx
+++ b/packages/proposals/src/components/Proposal/Vote.tsx
@@ -1,22 +1,18 @@
 import { ParsedAccount } from '@oyster/common';
-import { Button, Col, Modal, Row, Switch } from 'antd';
-import React, { useState } from 'react';
+import { Button, Col, Modal, Row, Switch, Radio } from 'antd';
+import React from 'react';
 import {
   TimelockConfig,
   TimelockSet,
   TimelockState,
   TimelockStateStatus,
-  VotingEntryRule,
 } from '../../models/timelock';
 import { LABELS } from '../../constants';
 import { depositSourceTokensAndVote } from '../../actions/depositSourceTokensAndVote';
 import { contexts, hooks } from '@oyster/common';
-import {
-  CheckOutlined,
-  CloseOutlined,
-  ExclamationCircleOutlined,
-} from '@ant-design/icons';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
 import { useLatestState } from '../../hooks/useLatestState';
+import './style.less';
 
 const { useWallet } = contexts.Wallet;
 const { useConnection } = contexts.Connection;
@@ -41,7 +37,7 @@ export function Vote({
 
   const userTokenAccount = useAccountByMint(proposal.info.sourceMint);
 
-  const [_, setMode, getLatestMode] = useLatestState(true);
+  const [vote, setVote, getLatestVote] = useLatestState(0);
 
   const eligibleToView =
     userTokenAccount &&
@@ -53,34 +49,37 @@ export function Vote({
       type="primary"
       onClick={() =>
         confirm({
-          title: 'Confirm',
+          title: LABELS.VOTE,
           icon: <ExclamationCircleOutlined />,
           content: (
             <Row>
               <Col span={24}>
                 <p>
-                  Use {userTokenAccount?.info.amount.toNumber() || 0} tokens to
-                  vote in favor OR against this proposal. You can refund these
-                  at any time. Use the switch to indicate preference.
+                  Use {userTokenAccount?.info.amount.toNumber()} tokens to vote
+                  in favor or against this proposal. You can refund these at any
+                  time.
                 </p>
-                <Switch
-                  checkedChildren={<CheckOutlined />}
-                  unCheckedChildren={<CloseOutlined />}
-                  defaultChecked
-                  onChange={setMode}
-                />
+
+                <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>
               </Col>
             </Row>
           ),
           okText: LABELS.CONFIRM,
           cancelText: LABELS.CANCEL,
           onOk: async () => {
-            if (userTokenAccount) {
-              const modeValue = await getLatestMode();
+            if (userTokenAccount && vote != 0) {
+              const vote = await getLatestVote();
               const voteAmount = userTokenAccount.info.amount.toNumber();
 
-              const yesTokenAmount = modeValue ? voteAmount : 0;
-              const noTokenAmount = !modeValue ? voteAmount : 0;
+              const yesTokenAmount = vote > 0 ? voteAmount : 0;
+              const noTokenAmount = vote < 0 ? voteAmount : 0;
 
               await depositSourceTokensAndVote(
                 connection,
diff --git a/packages/proposals/src/components/Proposal/style.less b/packages/proposals/src/components/Proposal/style.less
index c971ed2..6a39396 100644
--- a/packages/proposals/src/components/Proposal/style.less
+++ b/packages/proposals/src/components/Proposal/style.less
@@ -5,3 +5,13 @@
   white-space: -o-pre-wrap; /* Opera 7 */
   word-wrap: break-word; /* IE */
 }
+
+.vote-radio-group {
+  width: 100%;
+  user-select: none;
+  padding: 10px;
+  .ant-radio-button-wrapper {
+    width: 50%;
+    text-align: center;
+  }
+}

From 63467f1acbcdfc03c93476ba2fcee8147624a632 Mon Sep 17 00:00:00 2001
From: "Sebastian.Bor" <sebastian_bor@hotmail.com>
Date: Sat, 3 Apr 2021 00:50:15 +0100
Subject: [PATCH 07/12] fix: combine deposit source toenas and vote into a
 single transaction

---
 .../src/actions/depositSourceTokens.ts        | 163 --------------
 .../src/actions/depositSourceTokensAndVote.ts | 198 +++++++++++++++---
 packages/proposals/src/actions/vote.ts        | 108 ----------
 .../src/components/Proposal/Vote.tsx          |   3 +-
 packages/proposals/src/constants/labels.ts    |  10 +-
 5 files changed, 180 insertions(+), 302 deletions(-)
 delete mode 100644 packages/proposals/src/actions/depositSourceTokens.ts
 delete mode 100644 packages/proposals/src/actions/vote.ts

diff --git a/packages/proposals/src/actions/depositSourceTokens.ts b/packages/proposals/src/actions/depositSourceTokens.ts
deleted file mode 100644
index 09a8fe8..0000000
--- a/packages/proposals/src/actions/depositSourceTokens.ts
+++ /dev/null
@@ -1,163 +0,0 @@
-import {
-  Account,
-  Connection,
-  PublicKey,
-  TransactionInstruction,
-} from '@solana/web3.js';
-import {
-  contexts,
-  utils,
-  models,
-  ParsedAccount,
-  actions,
-} from '@oyster/common';
-
-import { TimelockSet } from '../models/timelock';
-
-import { AccountLayout } from '@solana/spl-token';
-import { depositSourceTokensInstruction } from '../models/depositSourceTokens';
-import { LABELS } from '../constants';
-import { createEmptyGovernanceVotingRecordInstruction } from '../models/createEmptyGovernanceVotingRecord';
-
-const { createTokenAccount } = actions;
-const { sendTransaction } = contexts.Connection;
-const { notify } = utils;
-const { approve } = models;
-
-export const depositSourceTokens = async (
-  connection: Connection,
-  wallet: any,
-  proposal: ParsedAccount<TimelockSet>,
-  existingVoteAccount: PublicKey | undefined,
-  existingYesVoteAccount: PublicKey | undefined,
-  existingNoVoteAccount: PublicKey | undefined,
-  sourceAccount: PublicKey,
-  votingTokenAmount: number,
-): Promise<{
-  voteAccount: PublicKey;
-  yesVoteAccount: PublicKey;
-  noVoteAccount: PublicKey;
-}> => {
-  const PROGRAM_IDS = utils.programIds();
-
-  let signers: Account[] = [];
-  let instructions: TransactionInstruction[] = [];
-
-  const accountRentExempt = await connection.getMinimumBalanceForRentExemption(
-    AccountLayout.span,
-  );
-
-  let needToCreateGovAccountToo = !existingVoteAccount;
-  if (!existingVoteAccount) {
-    existingVoteAccount = createTokenAccount(
-      instructions,
-      wallet.publicKey,
-      accountRentExempt,
-      proposal.info.votingMint,
-      wallet.publicKey,
-      signers,
-    );
-  }
-
-  const [governanceVotingRecord] = await PublicKey.findProgramAddress(
-    [
-      PROGRAM_IDS.timelock.programAccountId.toBuffer(),
-      proposal.pubkey.toBuffer(),
-      existingVoteAccount.toBuffer(),
-    ],
-    PROGRAM_IDS.timelock.programId,
-  );
-
-  if (needToCreateGovAccountToo) {
-    instructions.push(
-      createEmptyGovernanceVotingRecordInstruction(
-        governanceVotingRecord,
-        proposal.pubkey,
-        existingVoteAccount,
-        wallet.publicKey,
-      ),
-    );
-  }
-
-  if (!existingYesVoteAccount) {
-    existingYesVoteAccount = createTokenAccount(
-      instructions,
-      wallet.publicKey,
-      accountRentExempt,
-      proposal.info.yesVotingMint,
-      wallet.publicKey,
-      signers,
-    );
-  }
-
-  if (!existingNoVoteAccount) {
-    existingNoVoteAccount = createTokenAccount(
-      instructions,
-      wallet.publicKey,
-      accountRentExempt,
-      proposal.info.noVotingMint,
-      wallet.publicKey,
-      signers,
-    );
-  }
-
-  const [mintAuthority] = await PublicKey.findProgramAddress(
-    [PROGRAM_IDS.timelock.programAccountId.toBuffer()],
-    PROGRAM_IDS.timelock.programId,
-  );
-
-  const transferAuthority = approve(
-    instructions,
-    [],
-    sourceAccount,
-    wallet.publicKey,
-    votingTokenAmount,
-  );
-
-  signers.push(transferAuthority);
-
-  instructions.push(
-    depositSourceTokensInstruction(
-      governanceVotingRecord,
-      existingVoteAccount,
-      sourceAccount,
-      proposal.info.sourceHolding,
-      proposal.info.votingMint,
-      proposal.pubkey,
-      transferAuthority.publicKey,
-      mintAuthority,
-      votingTokenAmount,
-    ),
-  );
-
-  notify({
-    message: LABELS.ADDING_VOTES_TO_VOTER,
-    description: LABELS.PLEASE_WAIT,
-    type: 'warn',
-  });
-
-  try {
-    let tx = await sendTransaction(
-      connection,
-      wallet,
-      instructions,
-      signers,
-      true,
-    );
-
-    notify({
-      message: LABELS.VOTES_ADDED,
-      type: 'success',
-      description: LABELS.TRANSACTION + ` ${tx}`,
-    });
-  } catch (ex) {
-    console.error(ex);
-    throw new Error();
-  }
-
-  return {
-    voteAccount: existingVoteAccount,
-    yesVoteAccount: existingYesVoteAccount,
-    noVoteAccount: existingNoVoteAccount,
-  };
-};
diff --git a/packages/proposals/src/actions/depositSourceTokensAndVote.ts b/packages/proposals/src/actions/depositSourceTokensAndVote.ts
index b675b49..41309ab 100644
--- a/packages/proposals/src/actions/depositSourceTokensAndVote.ts
+++ b/packages/proposals/src/actions/depositSourceTokensAndVote.ts
@@ -1,10 +1,31 @@
-import { Connection, PublicKey } from '@solana/web3.js';
-import { ParsedAccount } from '@oyster/common';
+import {
+  Account,
+  Connection,
+  PublicKey,
+  TransactionInstruction,
+} from '@solana/web3.js';
+import {
+  contexts,
+  utils,
+  models,
+  ParsedAccount,
+  actions,
+} from '@oyster/common';
 
 import { TimelockConfig, TimelockSet, TimelockState } from '../models/timelock';
 
-import { vote } from './vote';
-import { depositSourceTokens } from './depositSourceTokens';
+import { AccountLayout } from '@solana/spl-token';
+
+import { LABELS } from '../constants';
+
+import { depositSourceTokensInstruction } from '../models/depositSourceTokens';
+import { createEmptyGovernanceVotingRecordInstruction } from '../models/createEmptyGovernanceVotingRecord';
+import { voteInstruction } from '../models/vote';
+
+const { createTokenAccount } = actions;
+const { sendTransactions } = contexts.Connection;
+const { notify } = utils;
+const { approve } = models;
 
 export const depositSourceTokensAndVote = async (
   connection: Connection,
@@ -22,31 +43,156 @@ export const depositSourceTokensAndVote = async (
   const votingTokenAmount =
     yesVotingTokenAmount > 0 ? yesVotingTokenAmount : noVotingTokenAmount;
 
-  const {
-    voteAccount,
-    yesVoteAccount,
-    noVoteAccount,
-  } = await depositSourceTokens(
-    connection,
-    wallet,
-    proposal,
-    existingVoteAccount,
-    existingYesVoteAccount,
-    existingNoVoteAccount,
+  const PROGRAM_IDS = utils.programIds();
+
+  let depositSigners: Account[] = [];
+  let depositInstructions: TransactionInstruction[] = [];
+
+  const accountRentExempt = await connection.getMinimumBalanceForRentExemption(
+    AccountLayout.span,
+  );
+
+  let needToCreateGovAccountToo = !existingVoteAccount;
+  if (!existingVoteAccount) {
+    existingVoteAccount = createTokenAccount(
+      depositInstructions,
+      wallet.publicKey,
+      accountRentExempt,
+      proposal.info.votingMint,
+      wallet.publicKey,
+      depositSigners,
+    );
+  }
+
+  const [governanceVotingRecord] = await PublicKey.findProgramAddress(
+    [
+      PROGRAM_IDS.timelock.programAccountId.toBuffer(),
+      proposal.pubkey.toBuffer(),
+      existingVoteAccount.toBuffer(),
+    ],
+    PROGRAM_IDS.timelock.programId,
+  );
+
+  if (needToCreateGovAccountToo) {
+    depositInstructions.push(
+      createEmptyGovernanceVotingRecordInstruction(
+        governanceVotingRecord,
+        proposal.pubkey,
+        existingVoteAccount,
+        wallet.publicKey,
+      ),
+    );
+  }
+
+  if (!existingYesVoteAccount) {
+    existingYesVoteAccount = createTokenAccount(
+      depositInstructions,
+      wallet.publicKey,
+      accountRentExempt,
+      proposal.info.yesVotingMint,
+      wallet.publicKey,
+      depositSigners,
+    );
+  }
+
+  if (!existingNoVoteAccount) {
+    existingNoVoteAccount = createTokenAccount(
+      depositInstructions,
+      wallet.publicKey,
+      accountRentExempt,
+      proposal.info.noVotingMint,
+      wallet.publicKey,
+      depositSigners,
+    );
+  }
+
+  const [mintAuthority] = await PublicKey.findProgramAddress(
+    [PROGRAM_IDS.timelock.programAccountId.toBuffer()],
+    PROGRAM_IDS.timelock.programId,
+  );
+
+  const depositAuthority = approve(
+    depositInstructions,
+    [],
     sourceAccount,
+    wallet.publicKey,
     votingTokenAmount,
   );
 
-  await vote(
-    connection,
-    wallet,
-    proposal,
-    timelockConfig,
-    state,
-    voteAccount,
-    yesVoteAccount,
-    noVoteAccount,
-    yesVotingTokenAmount,
-    noVotingTokenAmount,
+  depositSigners.push(depositAuthority);
+
+  depositInstructions.push(
+    depositSourceTokensInstruction(
+      governanceVotingRecord,
+      existingVoteAccount,
+      sourceAccount,
+      proposal.info.sourceHolding,
+      proposal.info.votingMint,
+      proposal.pubkey,
+      depositAuthority.publicKey,
+      mintAuthority,
+      votingTokenAmount,
+    ),
   );
+
+  let voteSigners: Account[] = [];
+  let voteInstructions: TransactionInstruction[] = [];
+
+  const voteAuthority = approve(
+    voteInstructions,
+    [],
+    existingVoteAccount,
+    wallet.publicKey,
+    yesVotingTokenAmount + noVotingTokenAmount,
+  );
+
+  voteSigners.push(voteAuthority);
+
+  voteInstructions.push(
+    voteInstruction(
+      governanceVotingRecord,
+      state.pubkey,
+      existingVoteAccount,
+      existingYesVoteAccount,
+      existingNoVoteAccount,
+      proposal.info.votingMint,
+      proposal.info.yesVotingMint,
+      proposal.info.noVotingMint,
+      proposal.info.sourceMint,
+      proposal.pubkey,
+      timelockConfig.pubkey,
+      voteAuthority.publicKey,
+      mintAuthority,
+      yesVotingTokenAmount,
+      noVotingTokenAmount,
+    ),
+  );
+
+  notify({
+    message: LABELS.VOTING_FOR_PROPOSAL,
+    description: LABELS.PLEASE_WAIT,
+    type: 'warn',
+  });
+
+  try {
+    await sendTransactions(
+      connection,
+      wallet,
+      [depositInstructions, voteInstructions],
+      [depositSigners, voteSigners],
+      true,
+    );
+
+    notify({
+      message: LABELS.PROPOSAL_VOTED,
+      type: 'success',
+      description:
+        yesVotingTokenAmount > 0
+          ? `${yesVotingTokenAmount} ${LABELS.TOKENS_VOTED_FOR_THE_PROPOSAL}.`
+          : `${noVotingTokenAmount} ${LABELS.TOKENS_VOTED_AGAINST_THE_PROPOSAL}.`,
+    });
+  } catch (ex) {
+    console.error(ex);
+    throw new Error();
+  }
 };
diff --git a/packages/proposals/src/actions/vote.ts b/packages/proposals/src/actions/vote.ts
deleted file mode 100644
index 0a02074..0000000
--- a/packages/proposals/src/actions/vote.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import {
-  Account,
-  Connection,
-  PublicKey,
-  TransactionInstruction,
-} from '@solana/web3.js';
-import {
-  contexts,
-  utils,
-  models,
-  ParsedAccount,
-  actions,
-} from '@oyster/common';
-
-import { TimelockConfig, TimelockSet, TimelockState } from '../models/timelock';
-import { LABELS } from '../constants';
-import { voteInstruction } from '../models/vote';
-const { createTokenAccount } = actions;
-const { sendTransaction } = contexts.Connection;
-const { notify } = utils;
-const { approve } = models;
-
-export const vote = async (
-  connection: Connection,
-  wallet: any,
-  proposal: ParsedAccount<TimelockSet>,
-  timelockConfig: ParsedAccount<TimelockConfig>,
-  state: ParsedAccount<TimelockState>,
-  votingAccount: PublicKey,
-  yesVotingAccount: PublicKey,
-  noVotingAccount: PublicKey,
-  yesVotingTokenAmount: number,
-  noVotingTokenAmount: number,
-) => {
-  const PROGRAM_IDS = utils.programIds();
-
-  let signers: Account[] = [];
-  let instructions: TransactionInstruction[] = [];
-
-  const [mintAuthority] = await PublicKey.findProgramAddress(
-    [PROGRAM_IDS.timelock.programAccountId.toBuffer()],
-    PROGRAM_IDS.timelock.programId,
-  );
-
-  const [governanceVotingRecord] = await PublicKey.findProgramAddress(
-    [
-      PROGRAM_IDS.timelock.programAccountId.toBuffer(),
-      proposal.pubkey.toBuffer(),
-      votingAccount.toBuffer(),
-    ],
-    PROGRAM_IDS.timelock.programId,
-  );
-
-  const transferAuthority = approve(
-    instructions,
-    [],
-    votingAccount,
-    wallet.publicKey,
-    yesVotingTokenAmount + noVotingTokenAmount,
-  );
-
-  signers.push(transferAuthority);
-
-  instructions.push(
-    voteInstruction(
-      governanceVotingRecord,
-      state.pubkey,
-      votingAccount,
-      yesVotingAccount,
-      noVotingAccount,
-      proposal.info.votingMint,
-      proposal.info.yesVotingMint,
-      proposal.info.noVotingMint,
-      proposal.info.sourceMint,
-      proposal.pubkey,
-      timelockConfig.pubkey,
-      transferAuthority.publicKey,
-      mintAuthority,
-      yesVotingTokenAmount,
-      noVotingTokenAmount,
-    ),
-  );
-
-  notify({
-    message: LABELS.BURNING_VOTES,
-    description: LABELS.PLEASE_WAIT,
-    type: 'warn',
-  });
-
-  try {
-    let tx = await sendTransaction(
-      connection,
-      wallet,
-      instructions,
-      signers,
-      true,
-    );
-
-    notify({
-      message: LABELS.VOTES_BURNED,
-      type: 'success',
-      description: LABELS.TRANSACTION + ` ${tx}`,
-    });
-  } catch (ex) {
-    console.error(ex);
-    throw new Error();
-  }
-};
diff --git a/packages/proposals/src/components/Proposal/Vote.tsx b/packages/proposals/src/components/Proposal/Vote.tsx
index df1273f..868725e 100644
--- a/packages/proposals/src/components/Proposal/Vote.tsx
+++ b/packages/proposals/src/components/Proposal/Vote.tsx
@@ -74,8 +74,9 @@ export function Vote({
           okText: LABELS.CONFIRM,
           cancelText: LABELS.CANCEL,
           onOk: async () => {
+            const vote = await getLatestVote();
+
             if (userTokenAccount && vote != 0) {
-              const vote = await getLatestVote();
               const voteAmount = userTokenAccount.info.amount.toNumber();
 
               const yesTokenAmount = vote > 0 ? voteAmount : 0;
diff --git a/packages/proposals/src/constants/labels.ts b/packages/proposals/src/constants/labels.ts
index 9e33f27..90f4c3d 100644
--- a/packages/proposals/src/constants/labels.ts
+++ b/packages/proposals/src/constants/labels.ts
@@ -39,8 +39,12 @@ export const LABELS = {
   ADD: 'Add',
   REMOVE: 'Remove',
   ADDING_OR_REMOVING: 'Type',
-  ADDING_VOTES_TO_VOTER: 'Converting governance tokens to voting tokens',
-  VOTES_ADDED: 'Governance tokens converted.',
+
+  VOTING_FOR_PROPOSAL: 'Voting for proposal.',
+  PROPOSAL_VOTED: 'Proposal voted.',
+  TOKENS_VOTED_FOR_THE_PROPOSAL: 'tokens voted for the proposal',
+  TOKENS_VOTED_AGAINST_THE_PROPOSAL: 'tokens voted against the proposal',
+
   ADDING_GOVERNANCE_TOKENS: 'Adding governance tokens',
   PLEASE_WAIT: 'Please wait...',
   GOVERNANCE_TOKENS_ADDED: 'Governance tokens added.',
@@ -61,8 +65,6 @@ export const LABELS = {
   ADD_GOVERNANCE_TOKENS: 'Add Governance Tokens',
   ADD_COUNCIL_TOKENS: 'Add Council Tokens',
   ACTIONS: 'Actions',
-  BURNING_VOTES: 'Burning your votes...',
-  VOTES_BURNED: 'Votes burned',
   VOTE: 'Vote',
   EXECUTING: 'Executing...',
   EXECUTED: 'Executed.',

From 8f76caf7ed26b1ba24413322c83ed98e1833f7b0 Mon Sep 17 00:00:00 2001
From: "Sebastian.Bor" <sebastian_bor@hotmail.com>
Date: Mon, 5 Apr 2021 19:41:24 +0100
Subject: [PATCH 08/12] feat: simplified withdraw vote workflow

---
 .../{WithdrawTokens.tsx => WithdrawVote.tsx}  | 40 ++++++-------------
 packages/proposals/src/constants/labels.ts    |  9 ++++-
 .../proposals/src/views/proposal/index.tsx    |  4 +-
 3 files changed, 23 insertions(+), 30 deletions(-)
 rename packages/proposals/src/components/Proposal/{WithdrawTokens.tsx => WithdrawVote.tsx} (66%)

diff --git a/packages/proposals/src/components/Proposal/WithdrawTokens.tsx b/packages/proposals/src/components/Proposal/WithdrawVote.tsx
similarity index 66%
rename from packages/proposals/src/components/Proposal/WithdrawTokens.tsx
rename to packages/proposals/src/components/Proposal/WithdrawVote.tsx
index faa1dfd..cf7c4e2 100644
--- a/packages/proposals/src/components/Proposal/WithdrawTokens.tsx
+++ b/packages/proposals/src/components/Proposal/WithdrawVote.tsx
@@ -1,6 +1,6 @@
 import { ParsedAccount } from '@oyster/common';
-import { Button, Col, Modal, Row, Slider } from 'antd';
-import React, { useState } from 'react';
+import { Button, Col, Modal, Row } from 'antd';
+import React from 'react';
 import {
   TimelockConfig,
   TimelockSet,
@@ -17,9 +17,8 @@ const { useConnection } = contexts.Connection;
 const { useAccountByMint } = hooks;
 
 const { confirm } = Modal;
-export function WithdrawTokens({
+export function WithdrawVote({
   proposal,
-  timelockConfig,
   state,
 }: {
   proposal: ParsedAccount<TimelockSet>;
@@ -33,45 +32,34 @@ export function WithdrawTokens({
   const noVoteAccount = useAccountByMint(proposal.info.noVotingMint);
 
   const userAccount = useAccountByMint(proposal.info.sourceMint);
+
   const votingTokens =
     (voteAccount && voteAccount.info.amount.toNumber()) ||
     0 +
       ((yesVoteAccount && yesVoteAccount.info.amount.toNumber()) || 0) +
       ((noVoteAccount && noVoteAccount.info.amount.toNumber()) || 0);
-  let additionalMsg =
-    state.info.status !== TimelockStateStatus.Voting
-      ? ''
-      : LABELS.ADDITIONAL_VOTING_MSG;
 
-  const [_, setTokenAmount] = useState(1);
-  return votingTokens > 0 ? (
+  const eligibleToView =
+    votingTokens > 0 && state.info.status === TimelockStateStatus.Voting;
+
+  return eligibleToView ? (
     <Button
       type="primary"
       onClick={() =>
         confirm({
-          title: 'Confirm',
+          title: LABELS.WITHDRAW_YOUR_VOTE_QUESTION,
           icon: <ExclamationCircleOutlined />,
           content: (
             <Row>
               <Col span={24}>
-                <p>You can withdraw up to {votingTokens} voting tokens. </p>
-                {additionalMsg && <p>{additionalMsg}</p>}
-
-                <Slider min={1} max={votingTokens} onChange={setTokenAmount} />
+                <p>{LABELS.WITHDRAW_YOUR_VOTE_MSG}</p>
               </Col>
             </Row>
           ),
-          okText: LABELS.CONFIRM,
+          okText: LABELS.WITHDRAW,
           cancelText: LABELS.CANCEL,
           onOk: async () => {
             if (userAccount) {
-              // tokenAmount is out of date in this scope, so we use a trick to get it here.
-              const valueHolder = { value: 0 };
-              await setTokenAmount(amount => {
-                valueHolder.value = amount;
-                return amount;
-              });
-
               await withdrawVotingTokens(
                 connection,
                 wallet.wallet,
@@ -81,16 +69,14 @@ export function WithdrawTokens({
                 yesVoteAccount?.pubkey,
                 noVoteAccount?.pubkey,
                 userAccount.pubkey,
-                valueHolder.value,
+                votingTokens,
               );
-              // reset
-              setTokenAmount(1);
             }
           },
         })
       }
     >
-      {LABELS.REFUND_TOKENS}
+      {LABELS.WITHDRAW_VOTE}
     </Button>
   ) : null;
 }
diff --git a/packages/proposals/src/constants/labels.ts b/packages/proposals/src/constants/labels.ts
index 90f4c3d..25f5c86 100644
--- a/packages/proposals/src/constants/labels.ts
+++ b/packages/proposals/src/constants/labels.ts
@@ -72,7 +72,14 @@ export const LABELS = {
   TOKENS_WITHDRAWN: 'Voting tokens refunded as Source Tokens',
   CONFIRM: 'Confirm',
   CANCEL: 'Cancel',
-  REFUND_TOKENS: 'Refund My Tokens',
+
+  WITHDRAW_VOTE: 'Withdraw My Vote',
+  WITHDRAW: 'Withdraw',
+
+  WITHDRAW_YOUR_VOTE_QUESTION: 'Withdraw your vote?',
+  WITHDRAW_YOUR_VOTE_MSG:
+    'Once you withdraw your vote it won’t count towards the proposal voting outcome.',
+
   REGISTER_GOVERNANCE: 'Register',
   PROGRAM: 'Program ID',
   GOVERNANCE: 'Governance Token Holders',
diff --git a/packages/proposals/src/views/proposal/index.tsx b/packages/proposals/src/views/proposal/index.tsx
index d858064..7eaec8a 100644
--- a/packages/proposals/src/views/proposal/index.tsx
+++ b/packages/proposals/src/views/proposal/index.tsx
@@ -24,7 +24,7 @@ import SignButton from '../../components/Proposal/SignButton';
 import AddSigners from '../../components/Proposal/AddSigners';
 import MintSourceTokens from '../../components/Proposal/MintSourceTokens';
 import { Vote } from '../../components/Proposal/Vote';
-import { WithdrawTokens } from '../../components/Proposal/WithdrawTokens';
+import { WithdrawVote } from '../../components/Proposal/WithdrawVote';
 import './style.less';
 import { getGovernanceVotingRecords } from '../../utils/lookups';
 import BN from 'bn.js';
@@ -295,7 +295,7 @@ function InnerProposalView({
                   timelockConfig.info.governanceMint.toBase58()
                 }
               />
-              <WithdrawTokens
+              <WithdrawVote
                 timelockConfig={timelockConfig}
                 proposal={proposal}
                 state={timelockState}

From 4524838aa2d2096eab5c7919cf0409b3e9bd8d80 Mon Sep 17 00:00:00 2001
From: "Sebastian.Bor" <sebastian_bor@hotmail.com>
Date: Mon, 5 Apr 2021 20:50:17 +0100
Subject: [PATCH 09/12] choore: move useThatState hook to commom package

---
 packages/common/src/hooks/index.ts               |  1 +
 packages/common/src/hooks/useThatState.ts        | 16 ++++++++++++++++
 .../proposals/src/components/Proposal/Vote.tsx   |  6 +++---
 packages/proposals/src/hooks/useLatestState.ts   | 15 ---------------
 4 files changed, 20 insertions(+), 18 deletions(-)
 create mode 100644 packages/common/src/hooks/useThatState.ts
 delete mode 100644 packages/proposals/src/hooks/useLatestState.ts

diff --git a/packages/common/src/hooks/index.ts b/packages/common/src/hooks/index.ts
index 15ecc00..24aa229 100644
--- a/packages/common/src/hooks/index.ts
+++ b/packages/common/src/hooks/index.ts
@@ -1,3 +1,4 @@
 export * from './useUserAccounts';
 export * from './useAccountByMint';
 export * from './useTokenName';
+export * from './useThatState';
diff --git a/packages/common/src/hooks/useThatState.ts b/packages/common/src/hooks/useThatState.ts
new file mode 100644
index 0000000..86ecf10
--- /dev/null
+++ b/packages/common/src/hooks/useThatState.ts
@@ -0,0 +1,16 @@
+import { useState } from 'react';
+
+// Extends useState() hook with async getThatState getter which can be used to get state value in contexts (ex. async callbacks) where up to date state is not available
+export function useThatState<T>(initialState: T) {
+  const [state, setState] = useState<T>(initialState);
+  const getThatState = () =>
+    new Promise<T>(resolve => {
+      // Use NOP setState call to retrieve current state value
+      setState(s => {
+        resolve(s);
+        return s;
+      });
+    });
+
+  return [state, setState, getThatState] as const;
+}
diff --git a/packages/proposals/src/components/Proposal/Vote.tsx b/packages/proposals/src/components/Proposal/Vote.tsx
index 868725e..cc18b0b 100644
--- a/packages/proposals/src/components/Proposal/Vote.tsx
+++ b/packages/proposals/src/components/Proposal/Vote.tsx
@@ -11,12 +11,12 @@ import { LABELS } from '../../constants';
 import { depositSourceTokensAndVote } from '../../actions/depositSourceTokensAndVote';
 import { contexts, hooks } from '@oyster/common';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
-import { useLatestState } from '../../hooks/useLatestState';
+
 import './style.less';
 
 const { useWallet } = contexts.Wallet;
 const { useConnection } = contexts.Connection;
-const { useAccountByMint } = hooks;
+const { useAccountByMint, useThatState } = hooks;
 
 const { confirm } = Modal;
 export function Vote({
@@ -37,7 +37,7 @@ export function Vote({
 
   const userTokenAccount = useAccountByMint(proposal.info.sourceMint);
 
-  const [vote, setVote, getLatestVote] = useLatestState(0);
+  const [vote, setVote, getLatestVote] = useThatState(0);
 
   const eligibleToView =
     userTokenAccount &&
diff --git a/packages/proposals/src/hooks/useLatestState.ts b/packages/proposals/src/hooks/useLatestState.ts
deleted file mode 100644
index cb7ae91..0000000
--- a/packages/proposals/src/hooks/useLatestState.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useState } from 'react';
-
-// Extends useState() hook with async getLatestState which can be used in async callbacks where state property would be stale
-export function useLatestState<T>(initialState: T) {
-  const [state, setState] = useState<T>(initialState);
-  const getLatestState = () =>
-    new Promise<T>(resolve => {
-      setState(s => {
-        resolve(s);
-        return s;
-      });
-    });
-
-  return [state, setState, getLatestState] as const;
-}

From a3129aaab7055a634ae5391a591833325ada330b Mon Sep 17 00:00:00 2001
From: "Sebastian.Bor" <sebastian_bor@hotmail.com>
Date: Mon, 5 Apr 2021 22:11:22 +0100
Subject: [PATCH 10/12] feat: split vote button into yeah/nay buttons on
 proposal page

---
 .../src/components/Proposal/Vote.tsx          | 39 +++++++------------
 packages/proposals/src/constants/labels.ts    |  9 ++++-
 .../proposals/src/views/proposal/index.tsx    |  7 ++++
 3 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/packages/proposals/src/components/Proposal/Vote.tsx b/packages/proposals/src/components/Proposal/Vote.tsx
index cc18b0b..69892da 100644
--- a/packages/proposals/src/components/Proposal/Vote.tsx
+++ b/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;
 }
diff --git a/packages/proposals/src/constants/labels.ts b/packages/proposals/src/constants/labels.ts
index 25f5c86..f2a6f3e 100644
--- a/packages/proposals/src/constants/labels.ts
+++ b/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',
diff --git a/packages/proposals/src/views/proposal/index.tsx b/packages/proposals/src/views/proposal/index.tsx
index 7eaec8a..d2ebbfb 100644
--- a/packages/proposals/src/views/proposal/index.tsx
+++ b/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>

From af2969ea35499d5333fd243055fdd743fce6052a Mon Sep 17 00:00:00 2001
From: "Sebastian.Bor" <sebastian_bor@hotmail.com>
Date: Tue, 6 Apr 2021 10:19:58 +0100
Subject: [PATCH 11/12] fix: update voting messages and icons

---
 .../src/actions/depositSourceTokensAndVote.ts | 22 +++++++++++-----
 .../src/components/Proposal/Vote.tsx          | 25 +++++++++++++++----
 packages/proposals/src/constants/labels.ts    | 15 ++++++-----
 3 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/packages/proposals/src/actions/depositSourceTokensAndVote.ts b/packages/proposals/src/actions/depositSourceTokensAndVote.ts
index 41309ab..6246bae 100644
--- a/packages/proposals/src/actions/depositSourceTokensAndVote.ts
+++ b/packages/proposals/src/actions/depositSourceTokensAndVote.ts
@@ -168,8 +168,21 @@ export const depositSourceTokensAndVote = async (
     ),
   );
 
+  const [votingMsg, votedMsg, voteTokensMsg] =
+    yesVotingTokenAmount > 0
+      ? [
+          LABELS.VOTING_YEAH,
+          LABELS.VOTED_YEAH,
+          `${yesVotingTokenAmount} ${LABELS.TOKENS_VOTED_FOR_THE_PROPOSAL}.`,
+        ]
+      : [
+          LABELS.VOTING_NAY,
+          LABELS.VOTED_NAY,
+          `${noVotingTokenAmount} ${LABELS.TOKENS_VOTED_AGAINST_THE_PROPOSAL}.`,
+        ];
+
   notify({
-    message: LABELS.VOTING_FOR_PROPOSAL,
+    message: votingMsg,
     description: LABELS.PLEASE_WAIT,
     type: 'warn',
   });
@@ -184,12 +197,9 @@ export const depositSourceTokensAndVote = async (
     );
 
     notify({
-      message: LABELS.PROPOSAL_VOTED,
+      message: votedMsg,
       type: 'success',
-      description:
-        yesVotingTokenAmount > 0
-          ? `${yesVotingTokenAmount} ${LABELS.TOKENS_VOTED_FOR_THE_PROPOSAL}.`
-          : `${noVotingTokenAmount} ${LABELS.TOKENS_VOTED_AGAINST_THE_PROPOSAL}.`,
+      description: voteTokensMsg,
     });
   } catch (ex) {
     console.error(ex);
diff --git a/packages/proposals/src/components/Proposal/Vote.tsx b/packages/proposals/src/components/Proposal/Vote.tsx
index 69892da..c528b04 100644
--- a/packages/proposals/src/components/Proposal/Vote.tsx
+++ b/packages/proposals/src/components/Proposal/Vote.tsx
@@ -10,7 +10,11 @@ import {
 import { LABELS } from '../../constants';
 import { depositSourceTokensAndVote } from '../../actions/depositSourceTokensAndVote';
 import { contexts, hooks } from '@oyster/common';
-import { ExclamationCircleOutlined } from '@ant-design/icons';
+import {
+  ExclamationCircleOutlined,
+  CheckOutlined,
+  CloseOutlined,
+} from '@ant-design/icons';
 
 import './style.less';
 
@@ -44,17 +48,28 @@ export function Vote({
     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;
+  const [btnLabel, title, msg, icon] = yeahVote
+    ? [
+        LABELS.VOTE_YEAH,
+        LABELS.VOTE_YEAH_QUESTION,
+        LABELS.VOTE_YEAH_MSG,
+        <CheckOutlined />,
+      ]
+    : [
+        LABELS.VOTE_NAY,
+        LABELS.VOTE_NAY_QUESTION,
+        LABELS.VOTE_NAY_MSG,
+        <CloseOutlined />,
+      ];
 
   return eligibleToView ? (
     <Button
       type="primary"
+      icon={icon}
       onClick={() =>
         confirm({
           title: title,
-          icon: <ExclamationCircleOutlined />,
+          icon: icon,
           content: (
             <Row>
               <Col span={24}>
diff --git a/packages/proposals/src/constants/labels.ts b/packages/proposals/src/constants/labels.ts
index f2a6f3e..3727cf0 100644
--- a/packages/proposals/src/constants/labels.ts
+++ b/packages/proposals/src/constants/labels.ts
@@ -40,11 +40,6 @@ export const LABELS = {
   REMOVE: 'Remove',
   ADDING_OR_REMOVING: 'Type',
 
-  VOTING_FOR_PROPOSAL: 'Voting for proposal.',
-  PROPOSAL_VOTED: 'Proposal voted.',
-  TOKENS_VOTED_FOR_THE_PROPOSAL: 'tokens voted for the proposal',
-  TOKENS_VOTED_AGAINST_THE_PROPOSAL: 'tokens voted against the proposal',
-
   ADDING_GOVERNANCE_TOKENS: 'Adding governance tokens',
   PLEASE_WAIT: 'Please wait...',
   GOVERNANCE_TOKENS_ADDED: 'Governance tokens added.',
@@ -67,11 +62,19 @@ export const LABELS = {
   ACTIONS: 'Actions',
 
   VOTE_YEAH: 'Yeah',
-  VOTE_NAY: 'Nay',
   VOTE_YEAH_QUESTION: 'Vote Yeah?',
   VOTE_YEAH_MSG: 'Vote in favour of the proposal.',
+  VOTING_YEAH: 'Voting for the proposal.',
+  VOTED_YEAH: 'Voted for the proposal.',
+
+  VOTE_NAY: 'Nay',
   VOTE_NAY_QUESTION: 'Vote Nay?',
   VOTE_NAY_MSG: 'Vote against the proposal.',
+  VOTING_NAY: 'Voting against the proposal.',
+  VOTED_NAY: 'Voted against the proposal.',
+
+  TOKENS_VOTED_FOR_THE_PROPOSAL: 'tokens voted for the proposal',
+  TOKENS_VOTED_AGAINST_THE_PROPOSAL: 'tokens voted against the proposal',
 
   EXECUTING: 'Executing...',
   EXECUTED: 'Executed.',

From e6a6122142c0621df57c90cabd74e52246639914 Mon Sep 17 00:00:00 2001
From: "Sebastian.Bor" <sebastian_bor@hotmail.com>
Date: Tue, 6 Apr 2021 11:00:57 +0100
Subject: [PATCH 12/12] fix: fix vote refund and token withdrawal messages

---
 .../src/actions/withdrawVotingTokens.ts       | 15 ++++++++--
 .../src/components/Proposal/Vote.tsx          |  6 +---
 .../src/components/Proposal/WithdrawVote.tsx  | 28 +++++++++++++++----
 packages/proposals/src/constants/labels.ts    | 24 ++++++++++------
 4 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/packages/proposals/src/actions/withdrawVotingTokens.ts b/packages/proposals/src/actions/withdrawVotingTokens.ts
index 64478eb..f8ff4ca 100644
--- a/packages/proposals/src/actions/withdrawVotingTokens.ts
+++ b/packages/proposals/src/actions/withdrawVotingTokens.ts
@@ -12,7 +12,11 @@ import {
   actions,
 } from '@oyster/common';
 
-import { TimelockSet, TimelockState } from '../models/timelock';
+import {
+  TimelockSet,
+  TimelockState,
+  TimelockStateStatus,
+} from '../models/timelock';
 import { AccountLayout } from '@solana/spl-token';
 import { withdrawVotingTokensInstruction } from '../models/withdrawVotingTokens';
 import { LABELS } from '../constants';
@@ -141,8 +145,13 @@ export const withdrawVotingTokens = async (
     ),
   );
 
+  const [msg, completedMsg] =
+    state.info.status === TimelockStateStatus.Voting
+      ? [LABELS.WITHDRAWING_YOUR_VOTE, LABELS.VOTE_WITHDRAWN]
+      : [LABELS.REFUNDING_YOUR_TOKENS, LABELS.TOKENS_REFUNDED];
+
   notify({
-    message: LABELS.WITHDRAWING_VOTING_TOKENS,
+    message: msg,
     description: LABELS.PLEASE_WAIT,
     type: 'warn',
   });
@@ -157,7 +166,7 @@ export const withdrawVotingTokens = async (
     );
 
     notify({
-      message: LABELS.TOKENS_WITHDRAWN,
+      message: completedMsg,
       type: 'success',
       description: LABELS.TRANSACTION + ` ${tx}`,
     });
diff --git a/packages/proposals/src/components/Proposal/Vote.tsx b/packages/proposals/src/components/Proposal/Vote.tsx
index c528b04..630eb0e 100644
--- a/packages/proposals/src/components/Proposal/Vote.tsx
+++ b/packages/proposals/src/components/Proposal/Vote.tsx
@@ -10,11 +10,7 @@ import {
 import { LABELS } from '../../constants';
 import { depositSourceTokensAndVote } from '../../actions/depositSourceTokensAndVote';
 import { contexts, hooks } from '@oyster/common';
-import {
-  ExclamationCircleOutlined,
-  CheckOutlined,
-  CloseOutlined,
-} from '@ant-design/icons';
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
 
 import './style.less';
 
diff --git a/packages/proposals/src/components/Proposal/WithdrawVote.tsx b/packages/proposals/src/components/Proposal/WithdrawVote.tsx
index cf7c4e2..dd12858 100644
--- a/packages/proposals/src/components/Proposal/WithdrawVote.tsx
+++ b/packages/proposals/src/components/Proposal/WithdrawVote.tsx
@@ -40,23 +40,41 @@ export function WithdrawVote({
       ((noVoteAccount && noVoteAccount.info.amount.toNumber()) || 0);
 
   const eligibleToView =
-    votingTokens > 0 && state.info.status === TimelockStateStatus.Voting;
+    votingTokens > 0 &&
+    (state.info.status === TimelockStateStatus.Voting ||
+      state.info.status === TimelockStateStatus.Completed ||
+      state.info.status === TimelockStateStatus.Defeated);
+
+  const [btnLabel, title, msg, action] =
+    state.info.status === TimelockStateStatus.Voting
+      ? [
+          LABELS.WITHDRAW_VOTE,
+          LABELS.WITHDRAW_YOUR_VOTE_QUESTION,
+          LABELS.WITHDRAW_YOUR_VOTE_MSG,
+          LABELS.WITHDRAW,
+        ]
+      : [
+          LABELS.REFUND_TOKENS,
+          LABELS.REFUND_YOUR_TOKENS_QUESTION,
+          LABELS.REFUND_YOUR_TOKENS_MSG,
+          LABELS.REFUND,
+        ];
 
   return eligibleToView ? (
     <Button
       type="primary"
       onClick={() =>
         confirm({
-          title: LABELS.WITHDRAW_YOUR_VOTE_QUESTION,
+          title: title,
           icon: <ExclamationCircleOutlined />,
           content: (
             <Row>
               <Col span={24}>
-                <p>{LABELS.WITHDRAW_YOUR_VOTE_MSG}</p>
+                <p>{msg}</p>
               </Col>
             </Row>
           ),
-          okText: LABELS.WITHDRAW,
+          okText: action,
           cancelText: LABELS.CANCEL,
           onOk: async () => {
             if (userAccount) {
@@ -76,7 +94,7 @@ export function WithdrawVote({
         })
       }
     >
-      {LABELS.WITHDRAW_VOTE}
+      {btnLabel}
     </Button>
   ) : null;
 }
diff --git a/packages/proposals/src/constants/labels.ts b/packages/proposals/src/constants/labels.ts
index 3727cf0..f0e3d71 100644
--- a/packages/proposals/src/constants/labels.ts
+++ b/packages/proposals/src/constants/labels.ts
@@ -64,31 +64,39 @@ export const LABELS = {
   VOTE_YEAH: 'Yeah',
   VOTE_YEAH_QUESTION: 'Vote Yeah?',
   VOTE_YEAH_MSG: 'Vote in favour of the proposal.',
-  VOTING_YEAH: 'Voting for the proposal.',
-  VOTED_YEAH: 'Voted for the proposal.',
+  VOTING_YEAH: 'Voting for the proposal',
+  VOTED_YEAH: 'Voted for the proposal',
 
   VOTE_NAY: 'Nay',
   VOTE_NAY_QUESTION: 'Vote Nay?',
   VOTE_NAY_MSG: 'Vote against the proposal.',
-  VOTING_NAY: 'Voting against the proposal.',
-  VOTED_NAY: 'Voted against the proposal.',
+  VOTING_NAY: 'Voting against the proposal',
+  VOTED_NAY: 'Voted against the proposal',
 
   TOKENS_VOTED_FOR_THE_PROPOSAL: 'tokens voted for the proposal',
   TOKENS_VOTED_AGAINST_THE_PROPOSAL: 'tokens voted against the proposal',
 
   EXECUTING: 'Executing...',
   EXECUTED: 'Executed.',
-  WITHDRAWING_VOTING_TOKENS: 'Refunding voting tokens as Source Tokens',
-  TOKENS_WITHDRAWN: 'Voting tokens refunded as Source Tokens',
+
   CONFIRM: 'Confirm',
   CANCEL: 'Cancel',
 
   WITHDRAW_VOTE: 'Withdraw My Vote',
-  WITHDRAW: 'Withdraw',
-
   WITHDRAW_YOUR_VOTE_QUESTION: 'Withdraw your vote?',
   WITHDRAW_YOUR_VOTE_MSG:
     'Once you withdraw your vote it won’t count towards the proposal voting outcome.',
+  WITHDRAW: 'Withdraw',
+  WITHDRAWING_YOUR_VOTE: 'Withdrawing your vote',
+  VOTE_WITHDRAWN: 'Your vote has been withdrawn',
+
+  REFUND_TOKENS: 'Refund My Tokens',
+  REFUND_YOUR_TOKENS_QUESTION: 'Refund your tokens?',
+  REFUND_YOUR_TOKENS_MSG:
+    'The proposal has been voted. Refunding your tokens won’t change the outcome.',
+  REFUND: 'Refund',
+  REFUNDING_YOUR_TOKENS: 'Refunding your tokens',
+  TOKENS_REFUNDED: 'Your voting tokens have been refunded',
 
   REGISTER_GOVERNANCE: 'Register',
   PROGRAM: 'Program ID',