feat(governance,accounts): vesting and vested accound in wallet card,…

… fix transfer form to account (#5206) Co-authored-by: Matthew Russell <[email protected]>
vegaprotocol · Nov 6, 2023 · 9233778 · 9233778
1 parent 7a91f48
commit 9233778
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 28 deletions.
diff --git a/apps/governance/src/components/vega-wallet/hooks.ts b/apps/governance/src/components/vega-wallet/hooks.ts
@@ -8,6 +8,7 @@ import { ENV } from '../../config';
 
 import noIcon from '../../images/token-no-icon.png';
 import vegaBlack from '../../images/vega_black.png';
+import vegaVesting from '../../images/vega_vesting.png';
 import { BigNumber } from '../../lib/bignumber';
 import type { WalletCardAssetProps } from '../wallet-card';
 import { useVegaWallet } from '@vegaprotocol/wallet';
@@ -102,7 +103,10 @@ export const usePollForDelegations = () => {
             setAccounts(
               accounts
                 .filter(
-                  (a) => a.type === Schema.AccountType.ACCOUNT_TYPE_GENERAL
+                  (a) =>
+                    a.type === Schema.AccountType.ACCOUNT_TYPE_GENERAL ||
+                    a.type === Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS ||
+                    a.type === Schema.AccountType.ACCOUNT_TYPE_VESTING_REWARDS
                 )
                 .map((a) => {
                   const isVega =
@@ -115,14 +119,23 @@ export const usePollForDelegations = () => {
                     subheading: isVega ? t('collateral') : a.asset.symbol,
                     symbol: a.asset.symbol,
                     decimals: a.asset.decimals,
+                    assetId: a.asset.id,
                     balance: new BigNumber(
                       addDecimal(a.balance, a.asset.decimals)
                     ),
-                    image: isVega ? vegaBlack : noIcon,
+                    image: isVega
+                      ? vegaBlack
+                      : a.type ===
+                          Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS ||
+                        a.type ===
+                          Schema.AccountType.ACCOUNT_TYPE_VESTING_REWARDS
+                      ? vegaVesting
+                      : noIcon,
                     border: isVega,
                     address: isAssetTypeERC20(a.asset)
                       ? a.asset.source.contractAddress
                       : undefined,
+                    type: a.type,
                   };
                 })
                 .sort((a, b) => {

diff --git a/apps/governance/src/components/wallet-card/wallet-card.tsx b/apps/governance/src/components/wallet-card/wallet-card.tsx
@@ -1,9 +1,18 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
 import { useAnimateValue } from '../../hooks/use-animate-value';
 import type { BigNumber } from '../../lib/bignumber';
 import { useNumberParts } from '@vegaprotocol/react-helpers';
+import * as Schema from '@vegaprotocol/types';
+import { useTranslation } from 'react-i18next';
+import { AnchorButton, Tooltip } from '@vegaprotocol/ui-toolkit';
+import {
+  CONSOLE_TRANSFER_ASSET,
+  DApp,
+  useLinks,
+} from '@vegaprotocol/environment';
+import { useNetworkParam } from '@vegaprotocol/network-parameters';
 
 interface WalletCardProps {
   children: React.ReactNode;
@@ -100,8 +109,10 @@ export interface WalletCardAssetProps {
   symbol: string;
   balance: BigNumber;
   decimals: number;
+  assetId?: string;
   border?: boolean;
   subheading?: string;
+  type?: Schema.AccountType;
 }
 
 export const WalletCardAsset = ({
@@ -110,16 +121,37 @@ export const WalletCardAsset = ({
   symbol,
   balance,
   decimals,
+  assetId,
   border,
   subheading,
+  type,
 }: WalletCardAssetProps) => {
   const [integers, decimalsPlaces, separator] = useNumberParts(
     balance,
     decimals
   );
+  const { t } = useTranslation();
+  const consoleLink = useLinks(DApp.Console);
+  const transferAssetLink = (assetId: string) =>
+    consoleLink(CONSOLE_TRANSFER_ASSET.replace(':assetId', assetId));
+  const { param: baseRate } = useNetworkParam('rewards_vesting_baseRate');
+
+  const isRedeemable =
+    type === Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS && assetId;
+
+  const accountTypeTooltip = useMemo(() => {
+    if (type === Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS) {
+      return t('VestedRewardsTooltip');
+    }
+    if (type === Schema.AccountType.ACCOUNT_TYPE_VESTING_REWARDS && baseRate) {
+      return t('VestingRewardsTooltip', { baseRate });
+    }
+
+    return null;
+  }, [baseRate, t, type]);
 
   return (
-    <div className="flex flex-nowrap mt-2 mb-4">
+    <div className="flex flex-nowrap gap-2 mt-2 mb-4">
       <img
         alt="Vega"
         src={image}
@@ -129,15 +161,37 @@ export const WalletCardAsset = ({
       />
       <div>
         <div
-          className="flex align-center text-base"
+          className="flex align-center items-baseline text-base gap-2"
           data-testid="currency-title"
         >
-          <div className="mb-0 px-2 uppercase">{name}</div>
+          <div className="mb-0 uppercase">{name}</div>
           <div className="mb-0 uppercase text-neutral-400">
             {subheading || symbol}
           </div>
         </div>
-        <div className="px-2 basis-full font-mono" data-testid="currency-value">
+        {type ? (
+          <div className="mb-[2px] flex gap-2 items-baseline">
+            <Tooltip description={accountTypeTooltip}>
+              <span className="px-2 py-1 leading-none text-xs bg-vega-cdark-700 rounded">
+                {Schema.AccountTypeMapping[type]}
+              </span>
+            </Tooltip>
+            {isRedeemable ? (
+              <Tooltip description={t('RedeemRewardsTooltip')}>
+                <AnchorButton
+                  variant="primary"
+                  size="xs"
+                  href={transferAssetLink(assetId)}
+                  target="_blank"
+                  className="px-2 py-1 leading-none text-xs bg-vega-yellow text-black rounded"
+                >
+                  {t('Redeem')}
+                </AnchorButton>
+              </Tooltip>
+            ) : null}
+          </div>
+        ) : null}
+        <div className="basis-full font-mono" data-testid="currency-value">
           <span>
             {integers}
             {separator}

diff --git a/apps/governance/src/i18n/translations/dev.json b/apps/governance/src/i18n/translations/dev.json
@@ -953,5 +953,8 @@
   "ACCOUNT_TYPE_REWARD_RELATIVE_RETURN": "Relative return reward account",
   "ACCOUNT_TYPE_REWARD_RETURN_VOLATILITY": "Return volatility reward account",
   "ACCOUNT_TYPE_REWARD_VALIDATOR_RANKING": "Validator ranking reward account",
-  "ACCOUNT_TYPE_PENDING_FEE_REFERRAL_REWARD": "Pending fee referral reward account"
+  "ACCOUNT_TYPE_PENDING_FEE_REFERRAL_REWARD": "Pending fee referral reward account",
+  "VestingRewardsTooltip": "Vesting rewards will be moved to vested account at a rate of {{baseRate}} per epoch.",
+  "VestedRewardsTooltip": "Vested rewards can be redeemed using Console",
+  "RedeemRewardsTooltip": "Click to redeem vested rewards in Console"
 }
diff --git a/libs/accounts/src/lib/transfer-form.spec.tsx b/libs/accounts/src/lib/transfer-form.spec.tsx
@@ -1,11 +1,28 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import BigNumber from 'bignumber.js';
-import { AddressField, TransferFee, TransferForm } from './transfer-form';
+import {
+  AddressField,
+  TransferFee,
+  TransferForm,
+  type TransferFormProps,
+} from './transfer-form';
 import { AccountType } from '@vegaprotocol/types';
 import { removeDecimal } from '@vegaprotocol/utils';
+import { MockedProvider } from '@apollo/client/testing';
 
 describe('TransferForm', () => {
+  const renderComponent = (props: TransferFormProps) => {
+    return render(
+      // Wrap with mock provider as the form will make queries to fetch the selected
+      // toVegaKey accounts. We don't test this for now but we need to wrap so that
+      // the component has access to the client
+      <MockedProvider>
+        <TransferForm {...props} />
+      </MockedProvider>
+    );
+  };
+
   const submit = async () => {
     await userEvent.click(
       screen.getByRole('button', { name: 'Confirm transfer' })
@@ -66,7 +83,7 @@ describe('TransferForm', () => {
     // 1003-TRAN-017
     // 1003-TRAN-018
     // 1003-TRAN-019
-    render(<TransferForm {...props} />);
+    renderComponent(props);
     // Select a pubkey
     await userEvent.selectOptions(
       screen.getByLabelText('To Vega key'),
@@ -113,7 +130,7 @@ describe('TransferForm', () => {
     // 1003-TRAN-012
     // 1003-TRAN-013
     // 1003-TRAN-004
-    render(<TransferForm {...props} />);
+    renderComponent(props);
     await submit();
     expect(await screen.findAllByText('Required')).toHaveLength(3); // pubkey is set as default value
     const toggle = screen.getByText('Enter manually');
@@ -139,7 +156,7 @@ describe('TransferForm', () => {
     // 1002-WITH-010
     // 1003-TRAN-011
     // 1003-TRAN-014
-    render(<TransferForm {...props} />);
+    renderComponent(props);
 
     // check current pubkey not shown
     const keySelect = screen.getByLabelText<HTMLSelectElement>('To Vega key');
@@ -206,7 +223,7 @@ describe('TransferForm', () => {
   describe('IncludeFeesCheckbox', () => {
     it('validates fields and submits when checkbox is checked', async () => {
       const mockSubmit = jest.fn();
-      render(<TransferForm {...props} submitTransfer={mockSubmit} />);
+      renderComponent({ ...props, submitTransfer: mockSubmit });
 
       // check current pubkey not shown
       const keySelect = screen.getByLabelText<HTMLSelectElement>('To Vega key');
@@ -275,7 +292,7 @@ describe('TransferForm', () => {
     });
 
     it('validates fields when checkbox is not checked', async () => {
-      render(<TransferForm {...props} />);
+      renderComponent(props);
 
       // check current pubkey not shown
       const keySelect: HTMLSelectElement = screen.getByLabelText('To Vega key');

diff --git a/libs/accounts/src/lib/transfer-form.tsx b/libs/accounts/src/lib/transfer-form.tsx
@@ -27,6 +27,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { AssetOption, Balance } from '@vegaprotocol/assets';
 import { AccountType, AccountTypeMapping } from '@vegaprotocol/types';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { accountsDataProvider } from './accounts-data-provider';
 
 interface FormFields {
   toVegaKey: string;
@@ -35,7 +37,7 @@ interface FormFields {
   fromAccount: AccountType;
 }
 
-interface TransferFormProps {
+export interface TransferFormProps {
   pubKey: string | null;
   pubKeys: string[] | null;
   accounts: Array<{
@@ -72,8 +74,28 @@ export const TransferForm = ({
 
   const assets = sortBy(
     accounts
-      .filter((a) => a.type === AccountType.ACCOUNT_TYPE_GENERAL)
+      .filter(
+        (a) =>
+          a.type === AccountType.ACCOUNT_TYPE_GENERAL ||
+          a.type === AccountType.ACCOUNT_TYPE_VESTED_REWARDS
+      )
+      // Sum the general and vested account balances so the value shown in the asset
+      // dropdown is correct for all transferable accounts
+      .reduce((merged, account) => {
+        const existing = merged.findIndex(
+          (m) => m.asset.id === account.asset.id
+        );
+        if (existing > -1) {
+          const balance = new BigNumber(merged[existing].balance)
+            .plus(new BigNumber(account.balance))
+            .toString();
+          merged[existing] = { ...merged[existing], balance };
+          return merged;
+        }
+        return [...merged, account];
+      }, [] as typeof accounts)
       .map((account) => ({
+        key: account.asset.id,
         ...account.asset,
         balance: addDecimal(account.balance, account.asset.decimals),
       })),
@@ -87,18 +109,30 @@ export const TransferForm = ({
 
   const asset = assets.find((a) => a.id === assetId);
 
+  const { data: toAccounts } = useDataProvider({
+    dataProvider: accountsDataProvider,
+    variables: {
+      partyId: selectedPubKey,
+    },
+    skip: !selectedPubKey,
+  });
+
   const account = accounts.find(
     (a) => a.asset.id === assetId && a.type === fromAccount
   );
   const accountBalance =
     account && addDecimal(account.balance, account.asset.decimals);
 
-  // General account for the selected asset
-  const generalAccount = accounts.find((a) => {
-    return (
-      a.asset.id === assetId && a.type === AccountType.ACCOUNT_TYPE_GENERAL
-    );
-  });
+  // The general account of the selected pubkey. You can only transfer
+  // to general accounts, either when redeeming vested rewards or just
+  // during normal general -> general transfers
+  const toGeneralAccount =
+    toAccounts &&
+    toAccounts.find((a) => {
+      return (
+        a.asset.id === assetId && a.type === AccountType.ACCOUNT_TYPE_GENERAL
+      );
+    });
 
   const [includeFee, setIncludeFee] = useState(false);
 
@@ -226,7 +260,7 @@ export const TransferForm = ({
             >
               {assets.map((a) => (
                 <AssetOption
-                  key={a.id}
+                  key={a.key}
                   asset={a}
                   balance={
                     <Balance
@@ -296,14 +330,16 @@ export const TransferForm = ({
           defaultValue={AccountType.ACCOUNT_TYPE_GENERAL}
         >
           <option value={AccountType.ACCOUNT_TYPE_GENERAL}>
-            {generalAccount
+            {toGeneralAccount
               ? `${
                   AccountTypeMapping[AccountType.ACCOUNT_TYPE_GENERAL]
                 } (${addDecimalsFormatNumber(
-                  generalAccount.balance,
-                  generalAccount.asset.decimals
-                )} ${generalAccount.asset.symbol})`
-              : AccountTypeMapping[AccountType.ACCOUNT_TYPE_GENERAL]}
+                  toGeneralAccount.balance,
+                  toGeneralAccount.asset.decimals
+                )} ${toGeneralAccount.asset.symbol})`
+              : `${AccountTypeMapping[AccountType.ACCOUNT_TYPE_GENERAL]} ${
+                  asset ? `(0 ${asset.symbol})` : ''
+                }`}
           </option>
         </TradingSelect>
       </TradingFormGroup>

diff --git a/libs/environment/src/hooks/use-links.ts b/libs/environment/src/hooks/use-links.ts
@@ -126,6 +126,11 @@ export const useEtherscanLink = () => {
   return link;
 };
 
+// Console pages
+export const CONSOLE_TRANSFER = '#/portfolio/assets/transfer';
+export const CONSOLE_TRANSFER_ASSET =
+  '#/portfolio/assets/transfer?assetId=:assetId';
+
 // Governance pages
 export const TOKEN_NEW_MARKET_PROPOSAL = '/proposals/propose/new-market';
 export const TOKEN_NEW_NETWORK_PARAM_PROPOSAL =

diff --git a/libs/network-parameters/src/use-network-params.ts b/libs/network-parameters/src/use-network-params.ts
@@ -12,6 +12,7 @@ export const NetworkParams = {
     'rewards_marketCreationQuantumMultiple',
   reward_staking_delegation_payoutDelay:
     'reward_staking_delegation_payoutDelay',
+  rewards_vesting_baseRate: 'rewards_vesting_baseRate',
   governance_proposal_market_minVoterBalance:
     'governance_proposal_market_minVoterBalance',
   governance_proposal_market_minClose: 'governance_proposal_market_minClose',