Feat/585 Port changes from TFE to Token (#628)

* frontend-monorepo-585: Ensure balances refreshed after disassociation * frontend-monorepo-585: Add requested state to delegate transaction * frontend-monorepo-585: Number of decimals can be misleading on vesting form * frontend-monorepo-585: Decimals not show enough d.p. on vesting page * frontend-monorepo-585: Render logic of current proposal status * Update apps/token/.env Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update apps/token/.env Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * frontend-monorepo-585: Changes from PR Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>
2022-06-24 10:24:59 +01:00 · 2022-06-24 10:24:59 +01:00 · 3f076660ee
commit 3f076660ee
parent 994bb4cf2b
9 changed files with 81 additions and 32 deletions
--- a/apps/token/src/components/locked-progress/locked-progress.tsx
+++ b/apps/token/src/components/locked-progress/locked-progress.tsx
@ -70,6 +70,7 @@ export interface LockedProgressProps {
  leftColor?: string;
  rightColor?: string;
  light?: boolean;
+  decimals?: number;
 }

 export const LockedProgress = ({
@ -81,6 +82,7 @@ export const LockedProgress = ({
  leftColor = Colors.vega.pink,
  rightColor = Colors.vega.green,
  light = false,
+  decimals = 2,
 }: LockedProgressProps) => {
  const lockedPercentage = React.useMemo(() => {
    return locked.div(total).times(100);
@ -117,8 +119,8 @@ export const LockedProgress = ({
      </ProgressContents>

      <ProgressContents light={light}>
-        <span>{formatNumber(locked, 2)}</span>
-        <span>{formatNumber(unlocked, 2)}</span>
+        <span>{formatNumber(locked, decimals)}</span>
+        <span>{formatNumber(unlocked, decimals)}</span>
      </ProgressContents>
    </>
  );
--- a/apps/token/src/i18n/translations/dev.json
+++ b/apps/token/src/i18n/translations/dev.json
@ -193,6 +193,7 @@
  "noGovernanceTokens": "You need some VEGA tokens to participate in governance",
  "youVoted": "You voted",
  "changeVote": "Change vote",
+  "voteRequested": "Please confirm transaction in wallet",
  "votePending": "Casting vote",
  "voteError": "Something went wrong, and your vote was not seen by the network",
  "back": "back",
@ -280,6 +281,7 @@
  "stakingHasAssociated": "You have {{tokens}} $VEGA tokens associated.",
  "stakingAssociateMoreButton": "Associate more $VEGA tokens with wallet",
  "stakingDisassociateButton": "Disassociate $VEGA tokens from wallet",
+  "stakingConfirm": "Open you wallet app to confirm",
  "associateButton": "Associate $VEGA tokens with wallet",
  "nodeQueryFailed": "Could not get data for validator {{node}}",
  "stakeAddPendingTitle": "Adding {{amount}} $VEGA to validator {{node}}",
@ -540,5 +542,8 @@
  "numberOfAgainstVotes": "Number of votes against",
  "yesPercentage": "Yes percentage",
  "noPercentage": "No percentage",
-  "proposalTerms": "Proposal terms"
+  "proposalTerms": "Proposal terms",
+  "currentlySetTo": "Currently set to ",
+  "pass": "Pass",
+  "fail": "Fail"
 }
--- a/apps/token/src/routes/governance/components/current-proposal-status/current-proposal-status.tsx
+++ b/apps/token/src/routes/governance/components/current-proposal-status/current-proposal-status.tsx
@ -34,30 +34,22 @@ export const CurrentProposalStatus = ({
    { addSuffix: true }
  );

-  if (proposal.state === ProposalState.Open && willPass) {
-    return <StatusPass>{t('shouldPass')}</StatusPass>;
-  }
-
-  if (!participationMet) {
-    return (
-      <>
-        <span>{t('voteFailedReason')}</span>
-        <span className="current-proposal-status__fail">
-          {t('participationNotMet')}
-        </span>
-        <span>&nbsp;{daysClosedAgo}.</span>
-      </>
-    );
-  }
-
-  if (!majorityMet) {
-    return (
-      <>
-        <span>{t('voteFailedReason')}</span>
-        <StatusFail>{t('majorityNotMet')}</StatusFail>
-        <span>&nbsp;{daysClosedAgo}.</span>
-      </>
-    );
+  if (proposal.state === ProposalState.Open) {
+    if (willPass) {
+      return (
+        <>
+          {t('currentlySetTo')}
+          <StatusPass>{t('pass')}</StatusPass>
+        </>
+      );
+    } else {
+      return (
+        <>
+          {t('currentlySetTo')}
+          <StatusFail>{t('fail')}</StatusFail>
+        </>
+      );
+    }
  }

  if (
@ -65,6 +57,26 @@ export const CurrentProposalStatus = ({
    proposal.state === ProposalState.Declined ||
    proposal.state === ProposalState.Rejected
  ) {
+    if (!participationMet) {
+      return (
+        <>
+          <span>{t('voteFailedReason')}</span>
+          <StatusFail>{t('participationNotMet')}</StatusFail>
+          <span>&nbsp;{daysClosedAgo}.</span>
+        </>
+      );
+    }
+
+    if (!majorityMet) {
+      return (
+        <>
+          <span>{t('voteFailedReason')}</span>
+          <StatusFail>{t('majorityNotMet')}</StatusFail>
+          <span>&nbsp;{daysClosedAgo}.</span>
+        </>
+      );
+    }
+
    return (
      <>
        <span>{t('voteFailedReason')}</span>
--- a/apps/token/src/routes/governance/components/vote-details/use-user-vote.tsx
+++ b/apps/token/src/routes/governance/components/vote-details/use-user-vote.tsx
@ -17,6 +17,7 @@ export enum VoteState {
  NotCast = 'NotCast',
  Yes = 'Yes',
  No = 'No',
+  Requested = 'Requested',
  Pending = 'Pending',
  Failed = 'Failed',
 }
@ -69,7 +70,7 @@ export function useUserVote(
    }
  }, [userVote]);

-  // Start a starts a timeout of 30s to set a failed message if
+  // Starts a timeout of 30s to set a failed message if
  // the vote is not seen by the time the callback is invoked
  React.useEffect(() => {
    // eslint-disable-next-line
@ -93,7 +94,7 @@ export function useUserVote(
  async function castVote(value: VoteValue) {
    if (!proposalId || !keypair) return;

-    setVoteState(VoteState.Pending);
+    setVoteState(VoteState.Requested);

    try {
      const variables = {
@ -105,6 +106,7 @@ export function useUserVote(
        },
      };
      await sendTx(variables);
+      setVoteState(VoteState.Pending);

      // Now await vote via poll in parent component
    } catch (err) {
--- a/apps/token/src/routes/governance/components/vote-details/vote-buttons.tsx
+++ b/apps/token/src/routes/governance/components/vote-details/vote-buttons.tsx
@ -124,6 +124,10 @@ export const VoteButtons = ({
    return <p>{cantVoteUI}</p>;
  }

+  if (voteState === VoteState.Requested) {
+    return <p>{t('voteRequested')}...</p>;
+  }
+
  if (voteState === VoteState.Pending) {
    return <p>{t('votePending')}...</p>;
  }
--- a/apps/token/src/routes/governance/components/vote-details/vote-details.tsx
+++ b/apps/token/src/routes/governance/components/vote-details/vote-details.tsx
@ -49,7 +49,7 @@ export const VoteDetails = ({ proposal }: VoteDetailsProps) => {
        <span>
          <CurrentProposalStatus proposal={proposal} />
        </span>
-        .&nbsp;
+        {'. '}
        {proposal.state === ProposalState.Open ? daysLeft : null}
      </p>
      <table className="w-full font-normal mb-12">
--- a/apps/token/src/routes/redemption/tranche-item.tsx
+++ b/apps/token/src/routes/redemption/tranche-item.tsx
@ -76,6 +76,7 @@ export const TrancheItem = ({
        total={total}
        leftLabel={t('Locked')}
        rightLabel={t('Unlocked')}
+        decimals={18}
      />

      <div className="text-right" data-testid="tranche-item-footer">
--- a/apps/token/src/routes/staking/disassociate/disassociate-page.tsx
+++ b/apps/token/src/routes/staking/disassociate/disassociate-page.tsx
@ -8,6 +8,7 @@ import {
 } from '../../../components/staking-method-radio';
 import { TxState } from '../../../hooks/transaction-reducer';
 import { useSearchParams } from '../../../hooks/use-search-params';
+import { useRefreshAssociatedBalances } from '../../../hooks/use-refresh-associated-balances';
 import { ContractDisassociate } from './contract-disassociate';
 import { DisassociateTransaction } from './disassociate-transaction';
 import { useRemoveStake } from './hooks';
@ -26,6 +27,7 @@ export const DisassociatePage = ({
  const [amount, setAmount] = React.useState<string>('');
  const [selectedStakingMethod, setSelectedStakingMethod] =
    React.useState<StakingMethod | null>(params.method || null);
+  const refreshBalances = useRefreshAssociatedBalances();

  // Clear the amount when the staking method changes
  React.useEffect(() => {
@ -38,6 +40,12 @@ export const DisassociatePage = ({
    perform: txPerform,
  } = useRemoveStake(address, amount, vegaKey.pub, selectedStakingMethod);

+  React.useEffect(() => {
+    if (txState.txState === TxState.Complete) {
+      refreshBalances(address, vegaKey.pub);
+    }
+  }, [txState, refreshBalances, address, vegaKey.pub]);
+
  if (txState.txState !== TxState.Default) {
    return (
      <DisassociateTransaction
--- a/apps/token/src/routes/staking/staking-form.tsx
+++ b/apps/token/src/routes/staking/staking-form.tsx
@ -18,7 +18,14 @@ import type {
 import { StakeFailure } from './stake-failure';
 import { StakePending } from './stake-pending';
 import { StakeSuccess } from './stake-success';
-import { Button, FormGroup, RadioGroup, Radio } from '@vegaprotocol/ui-toolkit';
+import {
+  Button,
+  Callout,
+  FormGroup,
+  Intent,
+  Radio,
+  RadioGroup,
+} from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import type {
  DelegateSubmissionBody,
@ -46,6 +53,7 @@ export const PARTY_DELEGATIONS_QUERY = gql`

 enum FormState {
  Default,
+  Requested,
  Pending,
  Success,
  Failure,
@ -115,7 +123,7 @@ export const StakingForm = ({
  }, [action, availableStakeToAdd, availableStakeToRemove]);

  async function onSubmit() {
-    setFormState(FormState.Pending);
+    setFormState(FormState.Requested);
    const delegateInput: DelegateSubmissionBody = {
      pubKey: pubkey,
      propagate: true,
@ -139,6 +147,7 @@ export const StakingForm = ({
    try {
      const command = action === Actions.Add ? delegateInput : undelegateInput;
      await sendTx(command);
+      setFormState(FormState.Pending);

      // await success via poll
    } catch (err) {
@ -184,6 +193,12 @@ export const StakingForm = ({

  if (formState === FormState.Failure) {
    return <StakeFailure nodeName={nodeName} />;
+  } else if (formState === FormState.Requested) {
+    return (
+      <Callout title="Confirm transaction in wallet" intent={Intent.Warning}>
+        <p>{t('stakingConfirm')}</p>
+      </Callout>
+    );
  } else if (formState === FormState.Pending) {
    return <StakePending action={action} amount={amount} nodeName={nodeName} />;
  } else if (formState === FormState.Success) {