fix(wallet): empty connect dialog

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

@@ -1,12 +0,0 @@
-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,13 +1,7 @@
-import {
-  Dialog,
-  Intent,
-  Switch,
-  ToastPositionSetter,
-  TradingButton,
-} from '@vegaprotocol/ui-toolkit';
+import { Switch, ToastPositionSetter } from '@vegaprotocol/ui-toolkit';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
-import { useState, type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import classNames from 'classnames';
 import { useT } from '../../lib/use-t';
 
@@ -15,7 +9,6 @@ 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')}>
@@ -40,52 +33,6 @@ 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

@@ -1,4 +1,4 @@
-import pytest
+import pytest 
 import re
 from playwright.sync_api import Page, expect
 from vega_sim.service import VegaService
@@ -20,40 +20,40 @@ def test_transfer_submit(continuous_market, vega: VegaService, page: Page):
     # 1003-TRAN-010
     # 1003-TRAN-023
     page.goto('/#/portfolio')
-
+    
     expect(page.get_by_test_id('transfer-form')).to_be_visible
     page.get_by_test_id('select-asset').click()
     expect(page.get_by_test_id('rich-select-option')).to_have_count(1)
-
+    
     page.get_by_test_id('rich-select-option').click()
     page.select_option('[data-testid=transfer-form] [name="toVegaKey"]', index=2)
     page.select_option('[data-testid=transfer-form] [name="fromAccount"]', index=1)
-
+    
     expected_asset_text = re.compile(r"tDAI tDAI999,991.49731 tDAI.{6}….{4}")
     actual_asset_text = page.get_by_test_id('select-asset').text_content().strip()
-
+   
     assert expected_asset_text.search(actual_asset_text), f"Expected pattern not found in {actual_asset_text}"
-
+    
     page.locator('[data-testid=transfer-form] input[name="amount"]').fill('1')
     expect(page.locator('[data-testid=transfer-form] input[name="amount"]')).not_to_be_empty()
-
+    
     page.locator('[data-testid=transfer-form] [type="submit"]').click()
     wait_for_toast_confirmation(page)
     vega.forward("10s")
     vega.wait_fn(1)
     vega.wait_for_total_catchup()
-    expected_confirmation_text = re.compile(r"Transfer completeYour transaction has been confirmed View in block explorerTransferTo .{6}….{6}1\.00 tDAI")
+    expected_confirmation_text = re.compile(r"Transfer completeYour transaction has been confirmedView 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}"
-
+    
 
 @pytest.mark.usefixtures("page", "auth", "risk_accepted")
 def test_transfer_vesting_below_minimum(continuous_market, vega: VegaService, page: Page):
     vega.update_network_parameter(
-    "market_maker", parameter="transfer.minTransferQuantumMultiple", new_value="100000"
+    "market_maker", parameter="transfer.minTransferQuantumMultiple", new_value="100000" 
     )
     vega.wait_for_total_catchup()
-
+    
     create_and_faucet_wallet(vega=vega, wallet=PARTY_A, amount=1e3)
     create_and_faucet_wallet(vega=vega, wallet=PARTY_B, amount=1e5)
     create_and_faucet_wallet(vega=vega, wallet=PARTY_C, amount=1e5)
@@ -96,11 +96,11 @@ def test_transfer_vesting_below_minimum(continuous_market, vega: VegaService, pa
     next_epoch(vega=vega)
     page.goto('/#/portfolio')
     expect(page.get_by_test_id('transfer-form')).to_be_visible
-
+    
     change_keys(page, vega, "party_b")
     page.get_by_test_id('select-asset').click()
     page.get_by_test_id('rich-select-option').click()
-
+    
     option_value = page.locator('[data-testid="transfer-form"] [name="fromAccount"] option[value^="ACCOUNT_TYPE_VESTED_REWARDS"]').first.get_attribute("value")
 
     page.select_option('[data-testid="transfer-form"] [name="fromAccount"]', option_value)
@@ -120,13 +120,13 @@ def test_transfer_vesting_below_minimum(continuous_market, vega: VegaService, pa
     vega.forward("10s")
     vega.wait_fn(10)
     vega.wait_for_total_catchup()
-
+    
     page.get_by_text("Use max").first.click()
     page.locator('[data-testid=transfer-form] [type="submit"]').click()
     wait_for_toast_confirmation(page)
     vega.forward("10s")
     vega.wait_fn(1)
     vega.wait_for_total_catchup()
-    expected_confirmation_text = re.compile(r"Transfer completeYour transaction has been confirmed View in block explorerTransferTo .{6}….{6}0\.00001 tDAI")
+    expected_confirmation_text = re.compile(r"Transfer completeYour transaction has been confirmedView 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}"
+    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,23 +1,10 @@
-import { act, render, screen, within } from '@testing-library/react';
+import { act, render, screen } 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,
@@ -26,7 +13,12 @@ const singleRow = {
     __typename: 'Market',
     id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35',
   },
-  asset: asset1,
+  asset: {
+    __typename: 'Asset',
+    id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
+    symbol: 'tBTC',
+    decimals: 5,
+  },
   available: '125600000',
   used: '125600000',
   total: '251200000',
@@ -41,7 +33,12 @@ const secondRow = {
     __typename: 'Market',
     id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35',
   },
-  asset: asset2,
+  asset: {
+    __typename: 'Asset',
+    id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
+    symbol: 'aBTC',
+    decimals: 5,
+  },
   available: '125600001',
   used: '125600001',
   total: '251200002',
@@ -137,7 +134,7 @@ describe('AccountsTable', () => {
 
   it('should sort assets', async () => {
     // 7001-COLL-010
-    render(
+    const { container } = render(
       <AccountTable
         rowData={multiRowData}
         onClickAsset={() => null}
@@ -145,13 +142,13 @@ describe('AccountsTable', () => {
       />
     );
 
-    const headerCell = screen
-      .getAllByRole('columnheader')
-      .find((h) => h?.getAttribute('col-id') === 'asset.symbol') as HTMLElement;
-
-    await userEvent.click(within(headerCell).getByText(/asset/i));
-
-    expect(headerCell).toHaveAttribute('aria-sort', 'ascending');
+    const headerCell = screen.getByText('Asset');
+    await userEvent.click(headerCell);
+    const rows = container.querySelectorAll(
+      '.ag-center-cols-container .ag-row'
+    );
+    expect(rows[0].textContent).toContain('aBTC');
+    expect(rows[1].textContent).toContain('tBTC');
   });
 
   it('should apply correct formatting in view as user mode', async () => {
@@ -179,7 +176,12 @@ describe('AccountsTable', () => {
         rowData={singleRowData}
         onClickAsset={() => null}
         isReadOnly={false}
-        pinnedAsset={asset1}
+        pinnedAsset={{
+          decimals: 5,
+          id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
+          symbol: 'tBTC',
+          name: 'tBTC',
+        }}
       />
     );
     await screen.findAllByRole('rowgroup');
@@ -211,13 +213,23 @@ describe('AccountsTable', () => {
     const result = getAccountData([singleRow]);
     const expected = [
       {
-        asset: asset1,
+        asset: {
+          __typename: 'Asset',
+          decimals: 5,
+          id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
+          symbol: 'tBTC',
+        },
         available: '0',
         balance: '0',
         breakdown: [
           {
             __typename: 'AccountBalance',
-            asset: asset1,
+            asset: {
+              __typename: 'Asset',
+              decimals: 5,
+              id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
+              symbol: 'tBTC',
+            },
             available: '0',
             balance: '125600000',
             total: '125600000',

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

@@ -1,10 +1,4 @@
-import {
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-  within,
-} from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import BigNumber from 'bignumber.js';
 import {
@@ -13,7 +7,7 @@ import {
   TransferForm,
   type TransferFormProps,
 } from './transfer-form';
-import { AccountType, AccountTypeMapping } from '@vegaprotocol/types';
+import { AccountType } from '@vegaprotocol/types';
 import { removeDecimal } from '@vegaprotocol/utils';
 
 describe('TransferForm', () => {
@@ -45,7 +39,8 @@ describe('TransferForm', () => {
   };
 
   const amount = '100';
-  const pubKey = '1'.repeat(64);
+  const pubKey =
+    '70d14a321e02e71992fd115563df765000ccc4775cbe71a0e2f9ff5a3b9dc680';
   const asset = {
     id: 'eur',
     symbol: '€',
@@ -55,7 +50,10 @@ describe('TransferForm', () => {
   };
   const props = {
     pubKey,
-    pubKeys: [pubKey, '2'.repeat(64)],
+    pubKeys: [
+      pubKey,
+      'a4b6e3de5d7ef4e31ae1b090be49d1a2ef7bcefff60cccf7658a0d4922651cce',
+    ],
     feeFactor: '0.001',
     submitTransfer: jest.fn(),
     accounts: [
@@ -179,7 +177,7 @@ describe('TransferForm', () => {
 
     // Test use max button
     await userEvent.click(screen.getByRole('button', { name: 'Use max' }));
-    expect(amountInput).toHaveValue('1000.00');
+    expect(amountInput).toHaveValue('1000');
 
     // Test amount validation
     await userEvent.clear(amountInput);
@@ -264,7 +262,7 @@ describe('TransferForm', () => {
 
     // Test use max button
     await userEvent.click(screen.getByRole('button', { name: 'Use max' }));
-    expect(amountInput).toHaveValue('100.00');
+    expect(amountInput).toHaveValue('100');
 
     // If transfering from a vested account 'include fees' checkbox should
     // be disabled and fees should be 0
@@ -293,88 +291,6 @@ 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,6 +5,7 @@ import {
   useVegaPublicKey,
   addDecimal,
   formatNumber,
+  addDecimalsFormatNumber,
   toBigNum,
 } from '@vegaprotocol/utils';
 import { useT } from './use-t';
@@ -217,7 +218,12 @@ export const TransferForm = ({
                 <AssetOption
                   key={a.key}
                   asset={a}
-                  balance={<Balance balance={a.balance} symbol={a.symbol} />}
+                  balance={
+                    <Balance
+                      balance={formatNumber(a.balance, a.decimals)}
+                      symbol={a.symbol}
+                    />
+                  }
                 />
               ))}
             </TradingRichSelect>
@@ -284,8 +290,8 @@ export const TransferForm = ({
                   return (
                     <option value={id} key={id}>
                       {AccountTypeMapping[a.type]} (
-                      {addDecimal(a.balance, a.asset.decimals)} {a.asset.symbol}
-                      )
+                      {addDecimalsFormatNumber(a.balance, a.asset.decimals)}{' '}
+                      {a.asset.symbol})
                     </option>
                   );
                 })}
@@ -414,7 +420,7 @@ export const TransferForm = ({
             type="button"
             className="absolute right-0 top-0 ml-auto text-xs underline"
             onClick={() =>
-              setValue('amount', accountBalance, {
+              setValue('amount', parseFloat(accountBalance).toString(), {
                 shouldValidate: true,
               })
             }

libs/wallet/src/connect-dialog/use-chain-id.spec.ts

@@ -0,0 +1,72 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { useVegaWallet } from '../use-vega-wallet';
+import { useChainId } from './use-chain-id';
+
+global.fetch = jest.fn();
+const mockFetch = global.fetch as jest.Mock;
+mockFetch.mockImplementation((url: string) => {
+  return Promise.resolve({ ok: true });
+});
+
+jest.mock('../use-vega-wallet', () => {
+  const original = jest.requireActual('../use-vega-wallet');
+  return {
+    ...original,
+    useVegaWallet: jest.fn(),
+  };
+});
+
+describe('useChainId', () => {
+  it('does not call fetch when statistics url could not be determined', async () => {
+    (useVegaWallet as jest.Mock).mockReturnValue({
+      vegaUrl: '',
+    });
+    renderHook(() => useChainId());
+    await waitFor(() => {
+      expect(mockFetch).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  it('calls fetch with correct statistics url', async () => {
+    (useVegaWallet as jest.Mock).mockReturnValue({
+      vegaUrl: 'http://localhost:1234/graphql',
+    });
+    renderHook(() => useChainId());
+    await waitFor(() => {
+      expect(mockFetch).toHaveBeenCalledWith(
+        'http://localhost:1234/statistics'
+      );
+    });
+  });
+
+  it('does not return chain id when chain id is not present in response', async () => {
+    (useVegaWallet as jest.Mock).mockReturnValue({
+      vegaUrl: 'http://localhost:1234/graphql',
+    });
+    const { result } = renderHook(() => useChainId());
+    await waitFor(() => {
+      expect(result.current).toBeUndefined();
+    });
+  });
+
+  it('returns chain id when chain id is present in response', async () => {
+    (useVegaWallet as jest.Mock).mockReturnValue({
+      vegaUrl: 'http://localhost:1234/graphql',
+    });
+    mockFetch.mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        json: () => ({
+          statistics: {
+            chainId: '1234',
+          },
+        }),
+      });
+    });
+    const { result } = renderHook(() => useChainId());
+    await waitFor(() => {
+      expect(result.current).not.toBeUndefined();
+      expect(result.current).toEqual('1234');
+    });
+  });
+});

libs/wallet/src/connect-dialog/use-chain-id.ts

@@ -3,17 +3,37 @@ import { useVegaWallet } from '../use-vega-wallet';
 
 const cache: Record<string, string> = {};
 
+/**
+ * Gets the statistics url for a given vega url.
+ * Example:
+ * https://graphql.example.com/graphql -> https://graphql.example.com/statistics
+ */
+const getNodeStatisticsUrl = (vegaUrl: string) => {
+  try {
+    const url = new URL(vegaUrl);
+    url.pathname = 'statistics';
+    return url.toString();
+  } catch (err) {
+    return undefined;
+  }
+};
+
 export const useChainId = () => {
   const { vegaUrl } = useVegaWallet();
   const [chainId, setChainId] = useState<undefined | string>(cache[vegaUrl]);
   const [fetchAttempt, setFetchAttempt] = useState(1);
+
+  const statisticsUrl = getNodeStatisticsUrl(vegaUrl);
+
   useEffect(() => {
+    // abort when `/statistics` URL could not be determined
+    if (!statisticsUrl) return;
     let isCancelled = false;
     if (cache[vegaUrl]) {
       setChainId(cache[vegaUrl]);
       return;
     }
-    fetch(vegaUrl.replace('graphql', 'statistics'))
+    fetch(statisticsUrl)
       .then((response) => response.json())
       .then((response) => {
         if (isCancelled) {
@@ -32,6 +52,6 @@ export const useChainId = () => {
     return () => {
       isCancelled = true;
     };
-  }, [fetchAttempt, vegaUrl]);
+  }, [fetchAttempt, statisticsUrl, vegaUrl]);
   return chainId;
 };