feat(accounts): remove include transfer fee checkbox (#5732)

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

@@ -96,11 +96,6 @@ describe('TransferForm', () => {
   });
 
   it.each([
-    {
-      targetText: 'Include transfer fee',
-      tooltipText:
-        'The fee will be taken from the amount you are transferring.',
-    },
     {
       targetText: 'Transfer fee',
       tooltipText: /transfer\.fee\.factor/,
@@ -276,9 +271,6 @@ describe('TransferForm', () => {
 
     const amountInput = screen.getByLabelText('Amount');
 
-    const checkbox = screen.getByTestId('include-transfer-fee');
-    expect(checkbox).not.toBeChecked();
-
     await userEvent.clear(amountInput);
     await userEvent.type(amountInput, '50');
 
@@ -288,10 +280,7 @@ describe('TransferForm', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Use max' }));
     expect(amountInput).toHaveValue('100.00');
 
-    // If transfering from a vested account 'include fees' checkbox should
+    // If transfering from a vested account  fees should be 0
-    // be disabled and fees should be 0
-    expect(checkbox).not.toBeChecked();
-    expect(checkbox).toBeDisabled();
     const expectedFee = '0';
     const total = new BigNumber(amount).plus(expectedFee).toFixed();
 
@@ -396,78 +385,7 @@ describe('TransferForm', () => {
       });
     });
   });
-
   describe('IncludeFeesCheckbox', () => {
-    it('validates fields and submits when checkbox is checked', async () => {
-      const mockSubmit = jest.fn();
-      renderComponent({ ...props, submitTransfer: mockSubmit });
-
-      // check current pubkey not shown
-      const keySelect = screen.getByLabelText<HTMLSelectElement>('To Vega key');
-      const pubKeyOptions = ['', pubKey, props.pubKeys[1]];
-      expect(keySelect.children).toHaveLength(pubKeyOptions.length);
-      expect(Array.from(keySelect.options).map((o) => o.value)).toEqual(
-        pubKeyOptions
-      );
-
-      await submit();
-      expect(await screen.findAllByText('Required')).toHaveLength(2); // pubkey set as default value
-
-      // Select a pubkey
-      await userEvent.selectOptions(
-        screen.getByLabelText('To Vega key'),
-        props.pubKeys[1]
-      );
-
-      // Select asset
-      await selectAsset(asset);
-
-      await userEvent.selectOptions(
-        screen.getByLabelText('From account'),
-        `${AccountType.ACCOUNT_TYPE_GENERAL}-${asset.id}`
-      );
-
-      const amountInput = screen.getByLabelText('Amount');
-      const checkbox = screen.getByTestId('include-transfer-fee');
-
-      // 1003-TRAN-022
-      expect(checkbox).not.toBeChecked();
-
-      await userEvent.clear(amountInput);
-      await userEvent.type(amountInput, amount);
-      await userEvent.click(checkbox);
-
-      expect(checkbox).toBeChecked();
-      const expectedFee = new BigNumber(amount)
-        .times(props.feeFactor)
-        .toFixed();
-      const expectedAmount = new BigNumber(amount).minus(expectedFee).toFixed();
-
-      // 1003-TRAN-020
-      expect(screen.getByTestId('transfer-fee')).toHaveTextContent(expectedFee);
-      expect(screen.getByTestId('transfer-amount')).toHaveTextContent(
-        expectedAmount
-      );
-      expect(screen.getByTestId('total-transfer-fee')).toHaveTextContent(
-        amount
-      );
-
-      await submit();
-
-      await waitFor(() => {
-        // 1003-TRAN-023
-        expect(mockSubmit).toHaveBeenCalledTimes(1);
-        expect(mockSubmit).toHaveBeenCalledWith({
-          fromAccountType: AccountType.ACCOUNT_TYPE_GENERAL,
-          toAccountType: AccountType.ACCOUNT_TYPE_GENERAL,
-          to: props.pubKeys[1],
-          asset: asset.id,
-          amount: removeDecimal(expectedAmount, asset.decimals),
-          oneOff: {},
-        });
-      });
-    });
-
     it('validates fields when checkbox is not checked', async () => {
       renderComponent(props);
 
@@ -497,11 +415,8 @@ describe('TransferForm', () => {
       );
 
       const amountInput = screen.getByLabelText('Amount');
-      const checkbox = screen.getByTestId('include-transfer-fee');
-      expect(checkbox).not.toBeChecked();
 
       await userEvent.type(amountInput, amount);
-      expect(checkbox).not.toBeChecked();
       const expectedFee = new BigNumber(amount)
         .times(props.feeFactor)
         .toFixed();

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

@@ -15,7 +15,6 @@ import {
   TradingRichSelect,
   TradingSelect,
   Tooltip,
-  TradingCheckbox,
   TradingButton,
 } from '@vegaprotocol/ui-toolkit';
 import type { Transfer } from '@vegaprotocol/wallet';
@@ -135,32 +134,17 @@ export const TransferForm = ({
   const accountBalance =
     account && addDecimal(account.balance, account.asset.decimals);
 
-  const [includeFee, setIncludeFee] = useState(false);
-
   // Max amount given selected asset and from account
   const max = accountBalance ? new BigNumber(accountBalance) : new BigNumber(0);
 
-  const transferAmount = useMemo(() => {
+  const fee = useMemo(
-    if (!amount) return undefined;
+    () => feeFactor && new BigNumber(feeFactor).times(amount).toString(),
-    if (includeFee && feeFactor) {
+    [amount, feeFactor]
-      return new BigNumber(1).minus(feeFactor).times(amount).toString();
+  );
-    }
-    return amount;
-  }, [amount, includeFee, feeFactor]);
-
-  const fee = useMemo(() => {
-    if (!transferAmount) return undefined;
-    if (includeFee) {
-      return new BigNumber(amount).minus(transferAmount).toString();
-    }
-    return (
-      feeFactor && new BigNumber(feeFactor).times(transferAmount).toString()
-    );
-  }, [amount, includeFee, transferAmount, feeFactor]);
 
   const onSubmit = useCallback(
     (fields: FormFields) => {
-      if (!transferAmount) {
+      if (!amount) {
         throw new Error('Submitted transfer with no amount selected');
       }
 
@@ -173,7 +157,7 @@ export const TransferForm = ({
 
       const transfer = normalizeTransfer(
         fields.toVegaKey,
-        transferAmount,
+        amount,
         type,
         AccountType.ACCOUNT_TYPE_GENERAL, // field is readonly in the form
         {
@@ -183,7 +167,7 @@ export const TransferForm = ({
       );
       submitTransfer(transfer);
     },
-    [submitTransfer, transferAmount, assets]
+    [submitTransfer, amount, assets]
   );
 
   // reset for placeholder workaround https://github.com/radix-ui/primitives/issues/1569
@@ -279,7 +263,6 @@ export const TransferForm = ({
                   ) {
                     setValue('toVegaKey', pubKey);
                     setToVegaKeyMode('select');
-                    setIncludeFee(false);
                   }
                 }}
               >
@@ -449,27 +432,9 @@ export const TransferForm = ({
           </TradingInputError>
         )}
       </TradingFormGroup>
-      <div className="mb-4">
+      {amount && fee && (
-        <Tooltip
-          description={t(
-            `The fee will be taken from the amount you are transferring.`
-          )}
-        >
-          <div>
-            <TradingCheckbox
-              name="include-transfer-fee"
-              disabled={!transferAmount || fromVested}
-              label={t('Include transfer fee')}
-              checked={includeFee}
-              onCheckedChange={() => setIncludeFee((x) => !x)}
-            />
-          </div>
-        </Tooltip>
-      </div>
-      {transferAmount && fee && (
         <TransferFee
-          amount={transferAmount}
+          amount={amount}
-          transferAmount={transferAmount}
           feeFactor={feeFactor}
           fee={fromVested ? '0' : fee}
           decimals={asset?.decimals}
@@ -484,29 +449,22 @@ export const TransferForm = ({
 
 export const TransferFee = ({
   amount,
-  transferAmount,
   feeFactor,
   fee,
   decimals,
 }: {
   amount: string;
-  transferAmount: string;
   feeFactor: string | null;
   fee?: string;
   decimals?: number;
 }) => {
   const t = useT();
-  if (!feeFactor || !amount || !transferAmount || !fee) return null;
+  if (!feeFactor || !amount || !fee) return null;
-  if (
+  if (isNaN(Number(feeFactor)) || isNaN(Number(amount)) || isNaN(Number(fee))) {
-    isNaN(Number(feeFactor)) ||
-    isNaN(Number(amount)) ||
-    isNaN(Number(transferAmount)) ||
-    isNaN(Number(fee))
-  ) {
     return null;
   }
 
-  const totalValue = new BigNumber(transferAmount).plus(fee).toString();
+  const totalValue = new BigNumber(amount).plus(fee).toString();
 
   return (
     <div className="mb-4 flex flex-col gap-2 text-xs">

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

@@ -21,7 +21,6 @@
   "Deposited on the network, but not allocated to a market. Free to use for placing orders or providing liquidity.": "Deposited on the network, but not allocated to a market. Free to use for placing orders or providing liquidity.",
   "Enter manually": "Enter manually",
   "From account": "From account",
-  "Include transfer fee": "Include transfer fee",
   "initial level": "initial level",
   "maintenance level": "maintenance level",
   "Margin health": "Margin health",
@@ -33,7 +32,6 @@
   "release level": "release level",
   "search level": "search level",
   "Select from wallet": "Select from wallet",
-  "The fee will be taken from the amount you are transferring.": "The fee will be taken from the amount you are transferring.",
   "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)",

specs/1003-TRAN-transfer.md

@@ -40,22 +40,12 @@
 
 ## Transfer
 
-- **Must** can select include transfer fee (<a name="1003-TRAN-015" href="#1003-TRAN-015">1003-TRAN-015</a>)
-
-- **Must** display tooltip for "Include transfer fee" when hovered over.(<a name="1003-TRAN-016" href="#1003-TRAN-016">1003-TRAN-016</a>)
-
 - **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>)
 
-- **Must** amount to be transferred and transfer fee update correctly when include transfer fee is selected (<a name="1003-TRAN-020" href="#1003-TRAN-020">1003-TRAN-020</a>)
-
-- **Must** total amount with fee is correct with and without "Include transfer fee" selected (<a name="1003-TRAN-021" href="#1003-TRAN-021">1003-TRAN-021</a>)
-
-- **Must** i cannot select include transfer fee unless amount is entered (<a name="1003-TRAN-022" href="#1003-TRAN-022">1003-TRAN-022</a>)
-
 - **Must** With all fields entered correctly, clicking "confirm transfer" button will start transaction(<a name="1003-TRAN-023" href="#1003-TRAN-023">1003-TRAN-023</a>)
 
 ### Transfer page