chore(trading): merge main in develop (#5352)

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>

apps/trading/components/settings/settings.spec.tsx

@@ -0,0 +1,12 @@
+import { Settings } from './settings';
+import { render, screen } from '@testing-library/react';
+
+describe('Settings', () => {
+  it('should the settings component with all the options', () => {
+    render(<Settings />);
+    expect(screen.getByText('Dark mode')).toBeInTheDocument();
+    expect(screen.getByText('Share usage data')).toBeInTheDocument();
+    expect(screen.getByText('Toast location')).toBeInTheDocument();
+    expect(screen.getByText('Reset to default')).toBeInTheDocument();
+  });
+});

apps/trading/components/settings/settings.tsx

@@ -1,7 +1,13 @@
-import { Switch, ToastPositionSetter } from '@vegaprotocol/ui-toolkit';
+import {
+  Dialog,
+  Intent,
+  Switch,
+  ToastPositionSetter,
+  TradingButton,
+} from '@vegaprotocol/ui-toolkit';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
-import type { ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 import classNames from 'classnames';
 import { useT } from '../../lib/use-t';
 
@@ -9,6 +15,7 @@ export const Settings = () => {
   const t = useT();
   const { theme, setTheme } = useThemeSwitcher();
   const [isApproved, setIsApproved] = useTelemetryApproval();
+  const [open, setOpen] = useState(false);
   return (
     <div>
       <SettingsGroup label={t('Dark mode')}>
@@ -33,6 +40,52 @@ export const Settings = () => {
       <SettingsGroup label={t('Toast location')}>
         <ToastPositionSetter />
       </SettingsGroup>
+      <SettingsGroup label={t('Reset to default')}>
+        <TradingButton
+          name="reset-to-defaults"
+          size="small"
+          intent={Intent.None}
+          onClick={() => {
+            setOpen(true);
+          }}
+        >
+          {t('Reset')}
+        </TradingButton>
+        <Dialog open={open} title={t('Reset')}>
+          <div className="mb-4">
+            <p>
+              {t(
+                'You will lose all persisted settings and you will be logged out.'
+              )}
+            </p>
+            <p>
+              {t('Are you sure you want to reset all settings to default?')}
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-4">
+            <TradingButton
+              name="reset-to-defaults-cancel"
+              intent={Intent.Primary}
+              onClick={() => {
+                localStorage.clear();
+                window.location.reload();
+              }}
+            >
+              {t('Yes, clear cache and refresh')}
+            </TradingButton>
+            <TradingButton
+              name="reset-to-defaults-cancel"
+              intent={Intent.None}
+              onClick={() => {
+                setOpen(false);
+              }}
+            >
+              {t('No, keep settings')}
+            </TradingButton>
+          </div>
+        </Dialog>
+      </SettingsGroup>
       <SettingsGroup inline={false} label={t('App information')}>
         <dl className="text-sm grid grid-cols-2 gap-1">
           {process.env.GIT_TAG && (

apps/trading/e2e/tests/transfer/test_transfer_key_to_key.py

@@ -42,7 +42,7 @@ def test_transfer_submit(continuous_market, vega: VegaService, page: Page):
     vega.forward("10s")
     vega.wait_fn(1)
     vega.wait_for_total_catchup()
-    expected_confirmation_text = re.compile(r"Transfer completeYour transaction has been confirmedView in block explorerTransferTo .{6}….{6}1\.00 tDAI")
+    expected_confirmation_text = re.compile(r"Transfer completeYour transaction has been confirmed View in block explorerTransferTo .{6}….{6}1\.00 tDAI")
     actual_confirmation_text = page.get_by_test_id('toast-content').text_content()
     assert expected_confirmation_text.search(actual_confirmation_text), f"Expected pattern not found in {actual_confirmation_text}"
 
@@ -127,6 +127,6 @@ def test_transfer_vesting_below_minimum(continuous_market, vega: VegaService, pa
     vega.forward("10s")
     vega.wait_fn(1)
     vega.wait_for_total_catchup()
-    expected_confirmation_text = re.compile(r"Transfer completeYour transaction has been confirmedView in block explorerTransferTo .{6}….{6}0\.00001 tDAI")
+    expected_confirmation_text = re.compile(r"Transfer completeYour transaction has been confirmed View in block explorerTransferTo .{6}….{6}0\.00001 tDAI")
     actual_confirmation_text = page.get_by_test_id('toast-content').text_content()
     assert expected_confirmation_text.search(actual_confirmation_text), f"Expected pattern not found in {actual_confirmation_text}"

libs/accounts/src/lib/accounts-table.spec.tsx

@@ -1,10 +1,23 @@
-import { act, render, screen } from '@testing-library/react';
+import { act, render, screen, within } from '@testing-library/react';
 import * as Types from '@vegaprotocol/types';
 import type { AccountFields } from './accounts-data-provider';
 import { getAccountData } from './accounts-data-provider';
 import { AccountTable } from './accounts-table';
 import userEvent from '@testing-library/user-event';
-
+const asset1 = {
+  __typename: 'Asset',
+  id: 'asset-1',
+  symbol: 'tBTC',
+  decimals: 5,
+  name: 'T BTC',
+};
+const asset2 = {
+  __typename: 'Asset',
+  id: 'asset-2',
+  symbol: 'aBTC',
+  decimals: 5,
+  name: 'A BTC',
+};
 const singleRow = {
   __typename: 'AccountBalance',
   type: Types.AccountType.ACCOUNT_TYPE_MARGIN,
@@ -13,12 +26,7 @@ const singleRow = {
     __typename: 'Market',
     id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35',
   },
-  asset: {
+  asset: asset1,
-    __typename: 'Asset',
-    id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
-    symbol: 'tBTC',
-    decimals: 5,
-  },
   available: '125600000',
   used: '125600000',
   total: '251200000',
@@ -33,12 +41,7 @@ const secondRow = {
     __typename: 'Market',
     id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35',
   },
-  asset: {
+  asset: asset2,
-    __typename: 'Asset',
-    id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
-    symbol: 'aBTC',
-    decimals: 5,
-  },
   available: '125600001',
   used: '125600001',
   total: '251200002',
@@ -134,7 +137,7 @@ describe('AccountsTable', () => {
 
   it('should sort assets', async () => {
     // 7001-COLL-010
-    const { container } = render(
+    render(
       <AccountTable
         rowData={multiRowData}
         onClickAsset={() => null}
@@ -142,13 +145,13 @@ describe('AccountsTable', () => {
       />
     );
 
-    const headerCell = screen.getByText('Asset');
+    const headerCell = screen
-    await userEvent.click(headerCell);
+      .getAllByRole('columnheader')
-    const rows = container.querySelectorAll(
+      .find((h) => h?.getAttribute('col-id') === 'asset.symbol') as HTMLElement;
-      '.ag-center-cols-container .ag-row'
+
-    );
+    await userEvent.click(within(headerCell).getByText(/asset/i));
-    expect(rows[0].textContent).toContain('aBTC');
+
-    expect(rows[1].textContent).toContain('tBTC');
+    expect(headerCell).toHaveAttribute('aria-sort', 'ascending');
   });
 
   it('should apply correct formatting in view as user mode', async () => {
@@ -176,12 +179,7 @@ describe('AccountsTable', () => {
         rowData={singleRowData}
         onClickAsset={() => null}
         isReadOnly={false}
-        pinnedAsset={{
+        pinnedAsset={asset1}
-          decimals: 5,
-          id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
-          symbol: 'tBTC',
-          name: 'tBTC',
-        }}
       />
     );
     await screen.findAllByRole('rowgroup');
@@ -213,23 +211,13 @@ describe('AccountsTable', () => {
     const result = getAccountData([singleRow]);
     const expected = [
       {
-        asset: {
+        asset: asset1,
-          __typename: 'Asset',
-          decimals: 5,
-          id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
-          symbol: 'tBTC',
-        },
         available: '0',
         balance: '0',
         breakdown: [
           {
             __typename: 'AccountBalance',
-            asset: {
+            asset: asset1,
-              __typename: 'Asset',
-              decimals: 5,
-              id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
-              symbol: 'tBTC',
-            },
             available: '0',
             balance: '125600000',
             total: '125600000',

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

@@ -1,4 +1,10 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import BigNumber from 'bignumber.js';
 import {
@@ -7,7 +13,7 @@ import {
   TransferForm,
   type TransferFormProps,
 } from './transfer-form';
-import { AccountType } from '@vegaprotocol/types';
+import { AccountType, AccountTypeMapping } from '@vegaprotocol/types';
 import { removeDecimal } from '@vegaprotocol/utils';
 
 describe('TransferForm', () => {
@@ -39,8 +45,7 @@ describe('TransferForm', () => {
   };
 
   const amount = '100';
-  const pubKey =
+  const pubKey = '1'.repeat(64);
-    '70d14a321e02e71992fd115563df765000ccc4775cbe71a0e2f9ff5a3b9dc680';
   const asset = {
     id: 'eur',
     symbol: '€',
@@ -50,10 +55,7 @@ describe('TransferForm', () => {
   };
   const props = {
     pubKey,
-    pubKeys: [
+    pubKeys: [pubKey, '2'.repeat(64)],
-      pubKey,
-      'a4b6e3de5d7ef4e31ae1b090be49d1a2ef7bcefff60cccf7658a0d4922651cce',
-    ],
     feeFactor: '0.001',
     submitTransfer: jest.fn(),
     accounts: [
@@ -177,7 +179,7 @@ describe('TransferForm', () => {
 
     // Test use max button
     await userEvent.click(screen.getByRole('button', { name: 'Use max' }));
-    expect(amountInput).toHaveValue('1000');
+    expect(amountInput).toHaveValue('1000.00');
 
     // Test amount validation
     await userEvent.clear(amountInput);
@@ -262,7 +264,7 @@ describe('TransferForm', () => {
 
     // Test use max button
     await userEvent.click(screen.getByRole('button', { name: 'Use max' }));
-    expect(amountInput).toHaveValue('100');
+    expect(amountInput).toHaveValue('100.00');
 
     // If transfering from a vested account 'include fees' checkbox should
     // be disabled and fees should be 0
@@ -291,6 +293,88 @@ describe('TransferForm', () => {
     });
   });
 
+  it('handles lots of decimal places', async () => {
+    const balance = '904195168829277777';
+    const expectedBalance = '0.904195168829277777';
+
+    const longDecimalAsset = {
+      id: 'assetId',
+      symbol: 'VEGA',
+      name: 'VEGA',
+      decimals: 18,
+      quantum: '1',
+    };
+
+    const account = {
+      type: AccountType.ACCOUNT_TYPE_VESTED_REWARDS,
+      asset: longDecimalAsset,
+      balance,
+    };
+
+    const mockSubmit = jest.fn();
+
+    renderComponent({
+      ...props,
+      accounts: [account],
+      submitTransfer: mockSubmit,
+      minQuantumMultiple: '100000',
+    });
+
+    // Select a pubkey
+    await userEvent.selectOptions(
+      screen.getByLabelText('To Vega key'),
+      props.pubKeys[1] // Use not current pubkey so we can check it switches to current pubkey later
+    );
+
+    // Select asset
+    await selectAsset(longDecimalAsset);
+
+    const accountSelect = screen.getByLabelText('From account');
+    const option = within(accountSelect)
+      .getAllByRole('option')
+      .find(
+        (o) => o.getAttribute('value') === `${account.type}-${account.asset.id}`
+      );
+    // plus one for disabled 'please select' option
+
+    expect(option).toHaveTextContent(
+      `${AccountTypeMapping[account.type]} (${expectedBalance} ${
+        account.asset.symbol
+      })`
+    );
+
+    await userEvent.selectOptions(
+      accountSelect,
+      `${AccountType.ACCOUNT_TYPE_VESTED_REWARDS}-${longDecimalAsset.id}`
+    );
+
+    expect(accountSelect).toHaveValue(
+      `${AccountType.ACCOUNT_TYPE_VESTED_REWARDS}-${longDecimalAsset.id}`
+    );
+
+    // Check switch back to connected key
+    const amountInput = screen.getByLabelText('Amount');
+
+    // Test use max button
+    await userEvent.click(screen.getByRole('button', { name: 'Use max' }));
+    expect(amountInput).toHaveValue(expectedBalance);
+
+    await submit();
+
+    await waitFor(() => {
+      // 1003-TRAN-023
+      expect(mockSubmit).toHaveBeenCalledTimes(1);
+      expect(mockSubmit).toHaveBeenCalledWith({
+        fromAccountType: AccountType.ACCOUNT_TYPE_VESTED_REWARDS,
+        toAccountType: AccountType.ACCOUNT_TYPE_GENERAL,
+        to: props.pubKey,
+        asset: longDecimalAsset.id,
+        amount: balance,
+        oneOff: {},
+      });
+    });
+  });
+
   describe('IncludeFeesCheckbox', () => {
     it('validates fields and submits when checkbox is checked', async () => {
       const mockSubmit = jest.fn();

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

@@ -5,7 +5,6 @@ import {
   useVegaPublicKey,
   addDecimal,
   formatNumber,
-  addDecimalsFormatNumber,
   toBigNum,
 } from '@vegaprotocol/utils';
 import { useT } from './use-t';
@@ -218,12 +217,7 @@ export const TransferForm = ({
                 <AssetOption
                   key={a.key}
                   asset={a}
-                  balance={
+                  balance={<Balance balance={a.balance} symbol={a.symbol} />}
-                    <Balance
-                      balance={formatNumber(a.balance, a.decimals)}
-                      symbol={a.symbol}
-                    />
-                  }
                 />
               ))}
             </TradingRichSelect>
@@ -290,8 +284,8 @@ export const TransferForm = ({
                   return (
                     <option value={id} key={id}>
                       {AccountTypeMapping[a.type]} (
-                      {addDecimalsFormatNumber(a.balance, a.asset.decimals)}{' '}
+                      {addDecimal(a.balance, a.asset.decimals)} {a.asset.symbol}
-                      {a.asset.symbol})
+                      )
                     </option>
                   );
                 })}
@@ -420,7 +414,7 @@ export const TransferForm = ({
             type="button"
             className="absolute right-0 top-0 ml-auto text-xs underline"
             onClick={() =>
-              setValue('amount', parseFloat(accountBalance).toString(), {
+              setValue('amount', accountBalance, {
                 shouldValidate: true,
               })
             }