feat(accounts): get trasfer fee from estimateTransferFee API (#5721)

libs/accounts/src/lib/TransferFee.graphql

@@ -0,0 +1,18 @@
+query TransferFee(
+  $fromAccount: ID!
+  $fromAccountType: AccountType!
+  $toAccount: ID!
+  $amount: String!
+  $assetId: String!
+) {
+  estimateTransferFee(
+    fromAccount: $fromAccount
+    fromAccountType: $fromAccountType
+    toAccount: $toAccount
+    amount: $amount
+    assetId: $assetId
+  ) {
+    fee
+    discount
+  }
+}

libs/accounts/src/lib/__generated__/TransferFee.ts

@@ -0,0 +1,63 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type TransferFeeQueryVariables = Types.Exact<{
+  fromAccount: Types.Scalars['ID'];
+  fromAccountType: Types.AccountType;
+  toAccount: Types.Scalars['ID'];
+  amount: Types.Scalars['String'];
+  assetId: Types.Scalars['String'];
+}>;
+
+
+export type TransferFeeQuery = { __typename?: 'Query', estimateTransferFee?: { __typename?: 'EstimatedTransferFee', fee: string, discount: string } | null };
+
+
+export const TransferFeeDocument = gql`
+    query TransferFee($fromAccount: ID!, $fromAccountType: AccountType!, $toAccount: ID!, $amount: String!, $assetId: String!) {
+  estimateTransferFee(
+    fromAccount: $fromAccount
+    fromAccountType: $fromAccountType
+    toAccount: $toAccount
+    amount: $amount
+    assetId: $assetId
+  ) {
+    fee
+    discount
+  }
+}
+    `;
+
+/**
+ * __useTransferFeeQuery__
+ *
+ * To run a query within a React component, call `useTransferFeeQuery` and pass it any options that fit your needs.
+ * When your component renders, `useTransferFeeQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useTransferFeeQuery({
+ *   variables: {
+ *      fromAccount: // value for 'fromAccount'
+ *      fromAccountType: // value for 'fromAccountType'
+ *      toAccount: // value for 'toAccount'
+ *      amount: // value for 'amount'
+ *      assetId: // value for 'assetId'
+ *   },
+ * });
+ */
+export function useTransferFeeQuery(baseOptions: Apollo.QueryHookOptions<TransferFeeQuery, TransferFeeQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<TransferFeeQuery, TransferFeeQueryVariables>(TransferFeeDocument, options);
+      }
+export function useTransferFeeLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<TransferFeeQuery, TransferFeeQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<TransferFeeQuery, TransferFeeQueryVariables>(TransferFeeDocument, options);
+        }
+export type TransferFeeQueryHookResult = ReturnType<typeof useTransferFeeQuery>;
+export type TransferFeeLazyQueryHookResult = ReturnType<typeof useTransferFeeLazyQuery>;
+export type TransferFeeQueryResult = Apollo.QueryResult<TransferFeeQuery, TransferFeeQueryVariables>;

libs/accounts/src/lib/transfer-container.tsx

@@ -25,7 +25,6 @@ export const TransferContainer = ({ assetId }: { assetId?: string }) => {
   const t = useT();
   const { pubKey, pubKeys, isReadOnly } = useVegaWallet();
   const { params } = useNetworkParams([
-    NetworkParams.transfer_fee_factor,
     NetworkParams.transfer_minTransferQuantumMultiple,
   ]);
 
@@ -72,7 +71,6 @@ export const TransferContainer = ({ assetId }: { assetId?: string }) => {
         pubKeys={pubKeys ? pubKeys?.map((pk) => pk.publicKey) : null}
         isReadOnly={isReadOnly}
         assetId={assetId}
-        feeFactor={params.transfer_fee_factor}
         minQuantumMultiple={params.transfer_minTransferQuantumMultiple}
         submitTransfer={transfer}
         accounts={sortedAccounts}

libs/accounts/src/lib/transfer-form.spec.tsx

@@ -15,6 +15,30 @@ import {
 } from './transfer-form';
 import { AccountType, AccountTypeMapping } from '@vegaprotocol/types';
 import { removeDecimal } from '@vegaprotocol/utils';
+import type { TransferFeeQuery } from './__generated__/TransferFee';
+
+const feeFactor = 0.001;
+const mockUseTransferFeeQuery = jest.fn(
+  ({
+    variables: { amount },
+  }: {
+    variables: { amount: string };
+  }): { data: TransferFeeQuery } => {
+    return {
+      data: {
+        estimateTransferFee: {
+          discount: '0',
+          fee: (Number(amount) * feeFactor).toFixed(),
+        },
+      },
+    };
+  }
+);
+
+jest.mock('./__generated__/TransferFee', () => ({
+  useTransferFeeQuery: (props: { variables: { amount: string } }) =>
+    mockUseTransferFeeQuery(props),
+}));
 
 describe('TransferForm', () => {
   const renderComponent = (props: TransferFormProps) => {
@@ -56,7 +80,6 @@ describe('TransferForm', () => {
   const props = {
     pubKey,
     pubKeys: [pubKey, '2'.repeat(64)],
-    feeFactor: '0.001',
     submitTransfer: jest.fn(),
     accounts: [
       {
@@ -79,7 +102,6 @@ describe('TransferForm', () => {
       pubKey,
       'a4b6e3de5d7ef4e31ae1b090be49d1a2ef7bcefff60cccf7658a0d4922651cce',
     ],
-    feeFactor: '0.001',
     submitTransfer: jest.fn(),
     accounts: [],
     minQuantumMultiple: '1',
@@ -96,10 +118,6 @@ describe('TransferForm', () => {
   });
 
   it.each([
-    {
-      targetText: 'Transfer fee',
-      tooltipText: /transfer\.fee\.factor/,
-    },
     {
       targetText: 'Amount to be transferred',
       tooltipText: /without the fee/,
@@ -109,9 +127,6 @@ describe('TransferForm', () => {
       tooltipText: /total amount taken from your account/,
     },
   ])('Tooltip for "$targetText" shows', async (o) => {
-    // 1003-TRAN-015
-    // 1003-TRAN-016
-    // 1003-TRAN-017
     // 1003-TRAN-018
     // 1003-TRAN-019
     renderComponent(props);
@@ -124,6 +139,10 @@ describe('TransferForm', () => {
     // Select asset
     await selectAsset(asset);
 
+    await userEvent.selectOptions(
+      screen.getByLabelText('From account'),
+      `${AccountType.ACCOUNT_TYPE_GENERAL}-${asset.id}`
+    );
     // set valid amount
     const amountInput = screen.getByLabelText('Amount');
     await userEvent.type(amountInput, amount);
@@ -214,9 +233,7 @@ describe('TransferForm', () => {
     // set valid amount
     await userEvent.clear(amountInput);
     await userEvent.type(amountInput, amount);
-    expect(screen.getByTestId('transfer-fee')).toHaveTextContent(
-      new BigNumber(props.feeFactor).times(amount).toFixed()
-    );
+    expect(screen.getByTestId('transfer-fee')).toHaveTextContent('1');
 
     await submit();
 
@@ -385,8 +402,8 @@ describe('TransferForm', () => {
       });
     });
   });
-  describe('IncludeFeesCheckbox', () => {
-    it('validates fields when checkbox is not checked', async () => {
+
+  it('validates fields', async () => {
     renderComponent(props);
 
     // check current pubkey not shown
@@ -417,16 +434,13 @@ describe('TransferForm', () => {
     const amountInput = screen.getByLabelText('Amount');
 
     await userEvent.type(amountInput, amount);
-      const expectedFee = new BigNumber(amount)
-        .times(props.feeFactor)
-        .toFixed();
+    const expectedFee = new BigNumber(amount).times(feeFactor).toFixed();
     const total = new BigNumber(amount).plus(expectedFee).toFixed();
     // 1003-TRAN-021
     expect(screen.getByTestId('transfer-fee')).toHaveTextContent(expectedFee);
     expect(screen.getByTestId('transfer-amount')).toHaveTextContent(amount);
     expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(total);
   });
-  });
 
   describe('AddressField', () => {
     const props = {
@@ -457,24 +471,29 @@ describe('TransferForm', () => {
 
   describe('TransferFee', () => {
     const props = {
-      amount: '200',
-      feeFactor: '0.001',
-      fee: '0.2',
-      transferAmount: '200',
-      decimals: 8,
+      amount: '20000',
+      discount: '0',
+      fee: '20',
+      decimals: 2,
     };
-    it('calculates and renders the transfer fee', () => {
+    it('calculates and renders amounts and fee', () => {
       render(<TransferFee {...props} />);
-
-      const expected = new BigNumber(props.amount)
-        .times(props.feeFactor)
-        .toFixed();
-      const total = new BigNumber(props.amount).plus(expected).toFixed();
-      expect(screen.getByTestId('transfer-fee')).toHaveTextContent(expected);
-      expect(screen.getByTestId('transfer-amount')).toHaveTextContent(
-        props.amount
+      expect(screen.queryByTestId('discount')).not.toBeInTheDocument();
+      expect(screen.getByTestId('transfer-fee')).toHaveTextContent('0.2');
+      expect(screen.getByTestId('transfer-amount')).toHaveTextContent('200.00');
+      expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(
+        '200.20'
+      );
+    });
+
+    it('calculates and renders amounts, fee and discount', () => {
+      render(<TransferFee {...props} discount="10" />);
+      expect(screen.getByTestId('discount')).toHaveTextContent('0.1');
+      expect(screen.getByTestId('transfer-fee')).toHaveTextContent('0.2');
+      expect(screen.getByTestId('transfer-amount')).toHaveTextContent('200.00');
+      expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(
+        '200.10'
       );
-      expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(total);
     });
   });
 });

libs/accounts/src/lib/transfer-form.tsx

@@ -4,8 +4,9 @@ import {
   useRequired,
   useVegaPublicKey,
   addDecimal,
-  formatNumber,
   toBigNum,
+  removeDecimal,
+  addDecimalsFormatNumber,
 } from '@vegaprotocol/utils';
 import { useT } from './use-t';
 import {
@@ -21,10 +22,11 @@ import type { Transfer } from '@vegaprotocol/wallet';
 import { normalizeTransfer } from '@vegaprotocol/wallet';
 import BigNumber from 'bignumber.js';
 import type { ReactNode } from 'react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { AssetOption, Balance } from '@vegaprotocol/assets';
 import { AccountType, AccountTypeMapping } from '@vegaprotocol/types';
+import { useTransferFeeQuery } from './__generated__/TransferFee';
 
 interface FormFields {
   toVegaKey: string;
@@ -51,7 +53,6 @@ export interface TransferFormProps {
     asset: Asset;
   }>;
   assetId?: string;
-  feeFactor: string | null;
   minQuantumMultiple: string | null;
   submitTransfer: (transfer: Transfer) => void;
 }
@@ -61,7 +62,6 @@ export const TransferForm = ({
   pubKeys,
   isReadOnly,
   assetId: initialAssetId,
-  feeFactor,
   submitTransfer,
   accounts,
   minQuantumMultiple,
@@ -136,11 +136,22 @@ export const TransferForm = ({
 
   // Max amount given selected asset and from account
   const max = accountBalance ? new BigNumber(accountBalance) : new BigNumber(0);
+  const normalizedAmount =
+    (amount && asset && removeDecimal(amount, asset.decimals)) || '0';
 
-  const fee = useMemo(
-    () => feeFactor && new BigNumber(feeFactor).times(amount).toString(),
-    [amount, feeFactor]
-  );
+  const transferFeeQuery = useTransferFeeQuery({
+    variables: {
+      fromAccount: pubKey || '',
+      fromAccountType: accountType || AccountType.ACCOUNT_TYPE_GENERAL,
+      amount: normalizedAmount,
+      assetId: asset?.id || '',
+      toAccount: selectedPubKey,
+    },
+    skip: !pubKey || !amount || !asset || !selectedPubKey || fromVested,
+  });
+  const transferFee = transferFeeQuery.loading
+    ? transferFeeQuery.data || transferFeeQuery.previousData
+    : transferFeeQuery.data;
 
   const onSubmit = useCallback(
     (fields: FormFields) => {
@@ -432,12 +443,14 @@ export const TransferForm = ({
           </TradingInputError>
         )}
       </TradingFormGroup>
-      {amount && fee && (
+      {(transferFee?.estimateTransferFee || fromVested) && amount && asset && (
         <TransferFee
-          amount={amount}
-          feeFactor={feeFactor}
-          fee={fromVested ? '0' : fee}
-          decimals={asset?.decimals}
+          amount={normalizedAmount}
+          fee={fromVested ? '0' : transferFee?.estimateTransferFee?.fee}
+          discount={
+            fromVested ? '0' : transferFee?.estimateTransferFee?.discount
+          }
+          decimals={asset.decimals}
         />
       )}
       <TradingButton type="submit" fill={true} disabled={isReadOnly}>
@@ -449,39 +462,44 @@ export const TransferForm = ({
 
 export const TransferFee = ({
   amount,
-  feeFactor,
   fee,
+  discount,
   decimals,
 }: {
   amount: string;
-  feeFactor: string | null;
   fee?: string;
-  decimals?: number;
+  discount?: string;
+  decimals: number;
 }) => {
   const t = useT();
-  if (!feeFactor || !amount || !fee) return null;
-  if (isNaN(Number(feeFactor)) || isNaN(Number(amount)) || isNaN(Number(fee))) {
+  if (!amount || !fee) return null;
+  if (isNaN(Number(amount)) || isNaN(Number(fee))) {
     return null;
   }
 
-  const totalValue = new BigNumber(amount).plus(fee).toString();
+  const totalValue = (
+    BigInt(amount) +
+    BigInt(fee) -
+    BigInt(discount || '0')
+  ).toString();
 
   return (
     <div className="mb-4 flex flex-col gap-2 text-xs">
       <div className="flex flex-wrap items-center justify-between gap-1">
-        <Tooltip
-          description={t(
-            `The transfer fee is set by the network parameter transfer.fee.factor, currently set to {{feeFactor}}`,
-            { feeFactor }
-          )}
-        >
         <div>{t('Transfer fee')}</div>
-        </Tooltip>
-
         <div data-testid="transfer-fee" className="text-muted">
-          {formatNumber(fee, decimals)}
+          {addDecimalsFormatNumber(fee, decimals)}
         </div>
       </div>
+      {discount && discount !== '0' && (
+        <div className="flex flex-wrap items-center justify-between gap-1">
+          <div>{t('Discount')}</div>
+          <div data-testid="discount" className="text-muted">
+            {addDecimalsFormatNumber(discount, decimals)}
+          </div>
+        </div>
+      )}
+
       <div className="flex flex-wrap items-center justify-between gap-1">
         <Tooltip
           description={t(
@@ -492,7 +510,7 @@ export const TransferFee = ({
         </Tooltip>
 
         <div data-testid="transfer-amount" className="text-muted">
-          {formatNumber(amount, decimals)}
+          {addDecimalsFormatNumber(amount, decimals)}
         </div>
       </div>
       <div className="flex flex-wrap items-center justify-between gap-1">
@@ -505,7 +523,7 @@ export const TransferFee = ({
         </Tooltip>
 
         <div data-testid="total-transfer-fee" className="text-muted">
-          {formatNumber(totalValue, decimals)}
+          {addDecimalsFormatNumber(totalValue, decimals)}
         </div>
       </div>
     </div>

libs/i18n/src/locales/en/accounts.json

@@ -35,7 +35,6 @@
   "The total amount of each asset on this key. Includes used and available collateral.": "The total amount of each asset on this key. Includes used and available collateral.",
   "The total amount taken from your account. The amount to be transferred plus the fee.": "The total amount taken from your account. The amount to be transferred plus the fee.",
   "The total amount to be transferred (without the fee)": "The total amount to be transferred (without the fee)",
-  "The transfer fee is set by the network parameter transfer.fee.factor, currently set to {{feeFactor}}": "The transfer fee is set by the network parameter transfer.fee.factor, currently set to {{feeFactor}}",
   "To account": "To account",
   "To Vega key": "To Vega key",
   "Total": "Total",

specs/1003-TRAN-transfer.md

@@ -40,8 +40,6 @@
 
 ## Transfer
 
-- **Must** display tooltip for "Transfer fee when hovered over.(<a name="1003-TRAN-017" href="#1003-TRAN-017">1003-TRAN-017</a>)
-
 - **Must** display tooltip for "Amount to be transferred" when hovered over.(<a name="1003-TRAN-018" href="#1003-TRAN-018">1003-TRAN-018</a>)
 
 - **Must** display tooltip for "Total amount (with fee)" when hovered over.(<a name="1003-TRAN-019" href="#1003-TRAN-019">1003-TRAN-019</a>)