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>

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(locked, decimals)}</span>
-        <span>{formatNumber(unlocked, 2)}</span>
+        <span>{formatNumber(unlocked, decimals)}</span>
       </ProgressContents>
     </>
   );

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"
 }

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

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) {

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>;
   }

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">

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">

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

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) {