LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat(governance,accounts): vesting and vested accound in wallet card, fix transfer form to account (#5206)

Browse Source 
Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
This commit is contained in:
Art 2023-11-06 21:42:42 +01:00 committed by GitHub
parent 7a91f48bcb
commit 9233778e85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 157 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/governance/src/components/vega-wallet/hooks.ts
View File

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

64
apps/governance/src/components/wallet-card/wallet-card.tsx
View File

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

5
apps/governance/src/i18n/translations/dev.json
View File

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

29
libs/accounts/src/lib/transfer-form.spec.tsx
View File

@ -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');

64
libs/accounts/src/lib/transfer-form.tsx
View File

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

5
libs/environment/src/hooks/use-links.ts
View File

@ -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 =

1
libs/network-parameters/src/use-network-params.ts
View File

@ -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',