mirror of https://github.com/certusone/oyster.git
feat: split vote button into yeah/nay buttons on proposal page
This commit is contained in:
parent
4524838aa2
commit
a3129aaab7
|
@ -1,5 +1,5 @@
|
||||||
import { ParsedAccount } from '@oyster/common';
|
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 React from 'react';
|
||||||
import {
|
import {
|
||||||
TimelockConfig,
|
TimelockConfig,
|
||||||
|
@ -16,17 +16,19 @@ import './style.less';
|
||||||
|
|
||||||
const { useWallet } = contexts.Wallet;
|
const { useWallet } = contexts.Wallet;
|
||||||
const { useConnection } = contexts.Connection;
|
const { useConnection } = contexts.Connection;
|
||||||
const { useAccountByMint, useThatState } = hooks;
|
const { useAccountByMint } = hooks;
|
||||||
|
|
||||||
const { confirm } = Modal;
|
const { confirm } = Modal;
|
||||||
export function Vote({
|
export function Vote({
|
||||||
proposal,
|
proposal,
|
||||||
state,
|
state,
|
||||||
timelockConfig,
|
timelockConfig,
|
||||||
|
yeahVote,
|
||||||
}: {
|
}: {
|
||||||
proposal: ParsedAccount<TimelockSet>;
|
proposal: ParsedAccount<TimelockSet>;
|
||||||
state: ParsedAccount<TimelockState>;
|
state: ParsedAccount<TimelockState>;
|
||||||
timelockConfig: ParsedAccount<TimelockConfig>;
|
timelockConfig: ParsedAccount<TimelockConfig>;
|
||||||
|
yeahVote: boolean;
|
||||||
}) {
|
}) {
|
||||||
const wallet = useWallet();
|
const wallet = useWallet();
|
||||||
const connection = useConnection();
|
const connection = useConnection();
|
||||||
|
@ -37,50 +39,37 @@ export function Vote({
|
||||||
|
|
||||||
const userTokenAccount = useAccountByMint(proposal.info.sourceMint);
|
const userTokenAccount = useAccountByMint(proposal.info.sourceMint);
|
||||||
|
|
||||||
const [vote, setVote, getLatestVote] = useThatState(0);
|
|
||||||
|
|
||||||
const eligibleToView =
|
const eligibleToView =
|
||||||
userTokenAccount &&
|
userTokenAccount &&
|
||||||
userTokenAccount.info.amount.toNumber() > 0 &&
|
userTokenAccount.info.amount.toNumber() > 0 &&
|
||||||
state.info.status === TimelockStateStatus.Voting;
|
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 ? (
|
return eligibleToView ? (
|
||||||
<Button
|
<Button
|
||||||
type="primary"
|
type="primary"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
confirm({
|
confirm({
|
||||||
title: LABELS.VOTE,
|
title: title,
|
||||||
icon: <ExclamationCircleOutlined />,
|
icon: <ExclamationCircleOutlined />,
|
||||||
content: (
|
content: (
|
||||||
<Row>
|
<Row>
|
||||||
<Col span={24}>
|
<Col span={24}>
|
||||||
<p>
|
<p>{msg}</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>
|
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
),
|
),
|
||||||
okText: LABELS.CONFIRM,
|
okText: LABELS.CONFIRM,
|
||||||
cancelText: LABELS.CANCEL,
|
cancelText: LABELS.CANCEL,
|
||||||
onOk: async () => {
|
onOk: async () => {
|
||||||
const vote = await getLatestVote();
|
if (userTokenAccount) {
|
||||||
|
|
||||||
if (userTokenAccount && vote != 0) {
|
|
||||||
const voteAmount = userTokenAccount.info.amount.toNumber();
|
const voteAmount = userTokenAccount.info.amount.toNumber();
|
||||||
|
|
||||||
const yesTokenAmount = vote > 0 ? voteAmount : 0;
|
const yesTokenAmount = yeahVote ? voteAmount : 0;
|
||||||
const noTokenAmount = vote < 0 ? voteAmount : 0;
|
const noTokenAmount = !yeahVote ? voteAmount : 0;
|
||||||
|
|
||||||
await depositSourceTokensAndVote(
|
await depositSourceTokensAndVote(
|
||||||
connection,
|
connection,
|
||||||
|
@ -100,7 +89,7 @@ export function Vote({
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{LABELS.VOTE}
|
{btnLabel}
|
||||||
</Button>
|
</Button>
|
||||||
) : null;
|
) : null;
|
||||||
}
|
}
|
||||||
|
|
|
@ -65,7 +65,14 @@ export const LABELS = {
|
||||||
ADD_GOVERNANCE_TOKENS: 'Add Governance Tokens',
|
ADD_GOVERNANCE_TOKENS: 'Add Governance Tokens',
|
||||||
ADD_COUNCIL_TOKENS: 'Add Council Tokens',
|
ADD_COUNCIL_TOKENS: 'Add Council Tokens',
|
||||||
ACTIONS: 'Actions',
|
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...',
|
EXECUTING: 'Executing...',
|
||||||
EXECUTED: 'Executed.',
|
EXECUTED: 'Executed.',
|
||||||
WITHDRAWING_VOTING_TOKENS: 'Refunding voting tokens as Source Tokens',
|
WITHDRAWING_VOTING_TOKENS: 'Refunding voting tokens as Source Tokens',
|
||||||
|
|
|
@ -304,6 +304,13 @@ function InnerProposalView({
|
||||||
timelockConfig={timelockConfig}
|
timelockConfig={timelockConfig}
|
||||||
proposal={proposal}
|
proposal={proposal}
|
||||||
state={timelockState}
|
state={timelockState}
|
||||||
|
yeahVote={true}
|
||||||
|
/>
|
||||||
|
<Vote
|
||||||
|
timelockConfig={timelockConfig}
|
||||||
|
proposal={proposal}
|
||||||
|
state={timelockState}
|
||||||
|
yeahVote={false}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
Loading…
Reference in New Issue