test: update test to so that button el is selected

apps/trading/components/accounts-menu/accounts-menu.tsx

@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { ViewType, useSidebar } from '../sidebar';
 
 export const AccountsMenu = () => {
@@ -8,7 +8,6 @@ export const AccountsMenu = () => {
   return (
     <>
       <TradingButton
-        intent={Intent.Primary}
         size="extra-small"
         data-testid="open-transfer"
         onClick={() => setView({ type: ViewType.Transfer })}
@@ -16,7 +15,6 @@ export const AccountsMenu = () => {
         {t('Transfer')}
       </TradingButton>
       <TradingButton
-        intent={Intent.Primary}
         size="extra-small"
         onClick={() => setView({ type: ViewType.Deposit })}
       >

apps/trading/components/deposits-menu/deposits-menu.tsx

@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { ViewType, useSidebar } from '../sidebar';
 
 export const DepositsMenu = () => {
@@ -7,7 +7,6 @@ export const DepositsMenu = () => {
 
   return (
     <TradingButton
-      intent={Intent.Primary}
       size="extra-small"
       onClick={() => setView({ type: ViewType.Deposit })}
       data-testid="deposit-button"

apps/trading/components/market-selector/market-selector.spec.tsx

@@ -262,7 +262,9 @@ describe('MarketSelector', () => {
     await userEvent.click(screen.getByTestId('sort-trigger'));
     const options = screen.getAllByTestId(/sort-item/);
     expect(options.map((o) => o.textContent?.trim())).toEqual(
-      Object.entries(Sort).map(([key]) => SortTypeMapping[key as SortType])
+      Object.entries(Sort)
+        .filter(([key]) => key !== Sort.None)
+        .map(([key]) => SortTypeMapping[key as SortType])
     );
     await userEvent.click(screen.getByTestId('sort-item-Gained'));
     expect(

apps/trading/components/market-selector/market-selector.tsx

@@ -40,7 +40,7 @@ export const MarketSelector = ({
   const [filter, setFilter] = useState<Filter>({
     searchTerm: '',
     product: Product.All,
-    sort: Sort.TopTraded,
+    sort: Sort.None,
     assets: [],
   });
   const allProducts = filter.product === Product.All;
@@ -53,7 +53,7 @@ export const MarketSelector = ({
 
   return (
     <div data-testid="market-selector">
-      <div className="px-2 pt-2 mb-2">
+      <div className="pt-2 px-2 mb-2">
         <ProductSelector
           product={filter.product}
           onSelect={(product) => {
@@ -106,6 +106,9 @@ export const MarketSelector = ({
             currentSort={filter.sort}
             onSelect={(sort) => {
               setFilter((curr) => {
+                if (curr.sort === sort) {
+                  return { ...curr, sort: Sort.None };
+                }
                 return {
                   ...curr,
                   sort,
@@ -291,9 +294,9 @@ const List = ({
 
 const Skeleton = () => {
   return (
-    <div className="px-2 mb-2">
-      <div className="p-4 rounded-lg bg-vega-light-100 dark:bg-vega-dark-100">
-        <div className="w-full h-3 mb-2 bg-vega-light-200 dark:bg-vega-dark-200" />
+    <div className="mb-2 px-2">
+      <div className="bg-vega-light-100 dark:bg-vega-dark-100 rounded-lg p-4">
+        <div className="w-full h-3 bg-vega-light-200 dark:bg-vega-dark-200 mb-2" />
         <div className="w-2/3 h-3 bg-vega-light-200 dark:bg-vega-dark-200" />
       </div>
     </div>

apps/trading/components/market-selector/sort-dropdown.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/i18n';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,6 +11,7 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 
 export const Sort = {
+  None: 'None',
   Gained: 'Gained',
   Lost: 'Lost',
   New: 'New',
@@ -21,15 +23,17 @@ export type SortType = keyof typeof Sort;
 export const SortTypeMapping: {
   [key in SortType]: string;
 } = {
-  [Sort.TopTraded]: 'Top traded',
+  [Sort.None]: 'None',
   [Sort.Gained]: 'Top gaining',
   [Sort.Lost]: 'Top losing',
   [Sort.New]: 'New markets',
+  [Sort.TopTraded]: 'Top traded',
 };
 
 const SortIconMapping: {
   [key in SortType]: VegaIconNames;
 } = {
+  [Sort.None]: null as unknown as VegaIconNames, // not shown in list
   [Sort.Gained]: VegaIconNames.TREND_UP,
   [Sort.Lost]: VegaIconNames.TREND_DOWN,
   [Sort.New]: VegaIconNames.STAR,
@@ -47,8 +51,10 @@ export const SortDropdown = ({
     <DropdownMenu
       trigger={
         <DropdownMenuTrigger data-testid="sort-trigger">
-          <span className="flex items-center justify-between gap-1">
-            {SortTypeMapping[currentSort]}
+          <span className="flex justify-between items-center">
+            {currentSort === SortTypeMapping.None
+              ? t('Sort')
+              : SortTypeMapping[currentSort]}{' '}
             <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
           </span>
         </DropdownMenuTrigger>
@@ -59,22 +65,24 @@ export const SortDropdown = ({
           value={currentSort}
           onValueChange={(value) => onSelect(value as SortType)}
         >
-          {Object.keys(Sort).map((key) => {
-            return (
-              <DropdownMenuRadioItem
-                inset
-                key={key}
-                value={key}
-                data-testid={`sort-item-${key}`}
-              >
-                <span className="flex gap-2">
-                  <VegaIcon name={SortIconMapping[key as SortType]} />{' '}
-                  {SortTypeMapping[key as SortType]}
-                </span>
-                <DropdownMenuItemIndicator />
-              </DropdownMenuRadioItem>
-            );
-          })}
+          {Object.keys(Sort)
+            .filter((s) => s !== Sort.None)
+            .map((key) => {
+              return (
+                <DropdownMenuRadioItem
+                  inset
+                  key={key}
+                  value={key}
+                  data-testid={`sort-item-${key}`}
+                >
+                  <span className="flex gap-2">
+                    <VegaIcon name={SortIconMapping[key as SortType]} />{' '}
+                    {SortTypeMapping[key as SortType]}
+                  </span>
+                  <DropdownMenuItemIndicator />
+                </DropdownMenuRadioItem>
+              );
+            })}
         </DropdownMenuRadioGroup>
       </DropdownMenuContent>
     </DropdownMenu>

apps/trading/components/market-selector/use-market-selector-list.spec.tsx

@@ -12,10 +12,7 @@ import { useMarketList } from '@vegaprotocol/markets';
 import type { Filter } from '../../components/market-selector';
 import { subDays } from 'date-fns';
 
-jest.mock('@vegaprotocol/markets', () => ({
-  ...jest.requireActual('@vegaprotocol/markets'),
-  useMarketList: jest.fn(),
-}));
+jest.mock('@vegaprotocol/markets');
 const mockUseMarketList = useMarketList as jest.Mock;
 
 describe('useMarketSelectorList', () => {
@@ -23,7 +20,7 @@ describe('useMarketSelectorList', () => {
     const defaultArgs: Filter = {
       searchTerm: '',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     };
     return renderHook((args) => useMarketSelectorList(args), {
@@ -112,21 +109,21 @@ describe('useMarketSelectorList', () => {
     rerender({
       searchTerm: '',
       product: Product.Spot as 'Future',
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual([markets[1]]);
     rerender({
       searchTerm: '',
       product: Product.Perpetual as 'Future',
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual([markets[2]]);
     rerender({
       searchTerm: '',
       product: Product.All,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual(markets);
@@ -192,7 +189,7 @@ describe('useMarketSelectorList', () => {
     const { result, rerender } = setup({
       searchTerm: '',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: ['asset-0'],
     });
     expect(result.current.markets).toEqual([markets[0], markets[1]]);
@@ -200,7 +197,7 @@ describe('useMarketSelectorList', () => {
     rerender({
       searchTerm: '',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: ['asset-0', 'asset-1'],
     });
 
@@ -213,7 +210,7 @@ describe('useMarketSelectorList', () => {
     rerender({
       searchTerm: '',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: ['asset-0', 'asset-1', 'asset-2'],
     });
 
@@ -223,7 +220,7 @@ describe('useMarketSelectorList', () => {
     rerender({
       searchTerm: '',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: ['asset-invalid'],
     });
 
@@ -278,28 +275,28 @@ describe('useMarketSelectorList', () => {
     const { result, rerender } = setup({
       searchTerm: 'abc',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual([markets[0]]);
     rerender({
       searchTerm: 'def',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual([markets[1], markets[2]]);
     rerender({
       searchTerm: 'defg',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual([markets[2]]);
     rerender({
       searchTerm: 'zzz',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual([]);
@@ -308,14 +305,14 @@ describe('useMarketSelectorList', () => {
     rerender({
       searchTerm: 'aaa',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual([markets[0]]);
     rerender({
       searchTerm: 'ggg',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
     expect(result.current.markets).toEqual([
@@ -325,15 +322,11 @@ describe('useMarketSelectorList', () => {
     ]);
   });
 
-  it('sorts by top traded by default', () => {
+  it('sorts by state and volume by default', () => {
     const markets = [
       createMarketFragment({
         id: 'market-0',
-        state: MarketState.STATE_ACTIVE,
-        // @ts-ignore data not on fragment
-        data: {
-          markPrice: '1',
-        },
+        state: MarketState.STATE_PENDING,
         // @ts-ignore candles not on fragment
         candles: [
           {
@@ -344,10 +337,16 @@ describe('useMarketSelectorList', () => {
       createMarketFragment({
         id: 'market-1',
         state: MarketState.STATE_ACTIVE,
-        // @ts-ignore data not on fragment
-        data: {
-          markPrice: '1',
-        },
+        // @ts-ignore candles not on fragment
+        candles: [
+          {
+            volume: '200',
+          },
+        ],
+      }),
+      createMarketFragment({
+        id: 'market-2',
+        state: MarketState.STATE_ACTIVE,
         // @ts-ignore candles not on fragment
         candles: [
           {
@@ -356,30 +355,12 @@ describe('useMarketSelectorList', () => {
         ],
       }),
       createMarketFragment({
-        id: 'market-2',
-        state: MarketState.STATE_ACTIVE,
-        // @ts-ignore data not on fragment
-        data: {
-          markPrice: '1',
-        },
-        // @ts-ignore candles not on fragment
-        candles: [
-          {
-            volume: '300',
-          },
-        ],
-      }),
-      createMarketFragment({
+        state: MarketState.STATE_PENDING,
         id: 'market-3',
-        state: MarketState.STATE_ACTIVE,
-        // @ts-ignore data not on fragment
-        data: {
-          markPrice: '1',
-        },
         // @ts-ignore candles not on fragment
         candles: [
           {
-            volume: '400',
+            volume: '100',
           },
         ],
       }),
@@ -394,15 +375,14 @@ describe('useMarketSelectorList', () => {
     const { result } = setup({
       searchTerm: '',
       product: Product.Future,
-      sort: Sort.TopTraded,
+      sort: Sort.None,
       assets: [],
     });
-
     expect(result.current.markets).toEqual([
-      markets[3],
+      markets[1],
       markets[2],
       markets[0],
-      markets[1],
+      markets[3],
     ]);
   });
 

apps/trading/components/market-selector/use-market-selector-list.ts

@@ -1,7 +1,11 @@
 import { useMemo } from 'react';
 import orderBy from 'lodash/orderBy';
 import { MarketState } from '@vegaprotocol/types';
-import { calcTradedFactor, useMarketList } from '@vegaprotocol/markets';
+import {
+  calcCandleVolume,
+  calcTradedFactor,
+  useMarketList,
+} from '@vegaprotocol/markets';
 import { priceChangePercentage } from '@vegaprotocol/utils';
 import type { Filter } from '../../components/market-selector/market-selector';
 import { Sort } from './sort-dropdown';
@@ -56,6 +60,22 @@ export const useMarketSelectorList = ({
         return false;
       });
 
+    if (sort === Sort.None) {
+      // Sort by market state primarily and AtoZ secondarily
+      return orderBy(
+        markets,
+        [
+          (m) => MARKET_TEMPLATE.indexOf(m.state),
+          (m) => {
+            if (!m.candles?.length) return 0;
+            const vol = calcCandleVolume(m.candles);
+            return Number(vol || 0);
+          },
+        ],
+        ['asc', 'desc']
+      );
+    }
+
     if (sort === Sort.Gained || sort === Sort.Lost) {
       const dir = sort === Sort.Gained ? 'desc' : 'asc';
       return orderBy(

apps/trading/components/positions-menu/positions-menu.tsx

@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { usePositionsStore } from '../positions-container';
 
 export const PositionsMenu = () => {
@@ -7,7 +7,6 @@ export const PositionsMenu = () => {
   const toggle = usePositionsStore((store) => store.toggleClosedMarkets);
   return (
     <TradingButton
-      intent={Intent.Primary}
       size="extra-small"
       data-testid="open-transfer"
       onClick={toggle}

apps/trading/components/settings/settings.tsx

@@ -24,8 +24,8 @@ export const Settings = () => {
       >
         <Switch
           name="settings-telemetry-switch"
-          onCheckedChange={(isOn) => setIsApproved(isOn ? 'true' : 'false')}
-          checked={isApproved === 'true'}
+          onCheckedChange={(isOn) => setIsApproved(isOn)}
+          checked={isApproved}
         />
       </SettingsGroup>
       <SettingsGroup label={t('Toast location')}>

apps/trading/components/welcome-dialog/get-started.tsx

@@ -23,7 +23,6 @@ import { Links, Routes } from '../../pages/client-router';
 import { useGlobalStore } from '../../stores';
 import { useSidebar, ViewType } from '../sidebar';
 import * as constants from '../constants';
-import { useOnboardingStore } from './welcome-dialog';
 
 interface Props {
   lead?: string;
@@ -36,7 +35,7 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
     constants.ONBOARDING_VIEWED_KEY
   );
 
-  const dismiss = useOnboardingStore((store) => store.dismiss);
+  const update = useGlobalStore((store) => store.update);
   const marketId = useGlobalStore((store) => store.marketId);
   const link = marketId ? Links[Routes.MARKET](marketId) : Links[Routes.HOME]();
   const openVegaWalletDialog = useVegaWalletDialogStore(
@@ -62,7 +61,7 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
     onClickHandle = () => {
       navigate(link);
       setView({ type: ViewType.Deposit });
-      dismiss();
+      update({ onBoardingDismissed: true });
     };
   } else if (step === OnboardingStep.ONBOARDING_ORDER_STEP) {
     buttonText = t('Dismiss');

apps/trading/components/welcome-dialog/telemetry-approval.spec.tsx

@@ -2,35 +2,29 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { TelemetryApproval } from './telemetry-approval';
 
-describe('TelemetryApproval', () => {
-  it('click on buttons should be properly handled', async () => {
-    const mockSetTelemetryValue = jest.fn();
-    render(
-      <TelemetryApproval
-        telemetryValue="false"
-        setTelemetryValue={mockSetTelemetryValue}
-      />
-    );
-    expect(
-      screen.getByRole('button', { name: 'No thanks' })
-    ).toBeInTheDocument();
-    await userEvent.click(screen.getByRole('button', { name: 'No thanks' }));
-    expect(mockSetTelemetryValue).toHaveBeenCalledWith('false');
-    expect(screen.getByText('Share data')).toBeInTheDocument();
-    await userEvent.click(screen.getByText('Share data'));
-    expect(mockSetTelemetryValue).toHaveBeenCalledWith('true');
-  });
+jest.mock('@vegaprotocol/logger', () => ({
+  SentryInit: () => undefined,
+  SentryClose: () => undefined,
+}));
 
-  it('confirm button should have proper text', async () => {
-    const mockSetTelemetryValue = jest.fn();
-    render(
-      <TelemetryApproval
-        telemetryValue="true"
-        setTelemetryValue={mockSetTelemetryValue}
-      />
+jest.mock('@vegaprotocol/environment', () => ({
+  useEnvironment: () => ({ VEGA_ENV: 'test', SENTRY_DSN: 'sentry-dsn' }),
+}));
+
+describe('TelemetryApproval', () => {
+  it('click on checkbox should be properly handled', async () => {
+    const helpText = 'My help text';
+    render(<TelemetryApproval helpText={helpText} />);
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'data-state',
+      'unchecked'
     );
-    expect(screen.getByText('Continue sharing data')).toBeInTheDocument();
-    await userEvent.click(screen.getByText('Continue sharing data'));
-    expect(mockSetTelemetryValue).toHaveBeenCalledWith('true');
+    await userEvent.click(screen.getByRole('checkbox'));
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'data-state',
+      'checked'
+    );
+    expect(screen.getByText('Share usage data')).toBeInTheDocument();
+    expect(screen.getByText(helpText)).toBeInTheDocument();
   });
 });

apps/trading/components/welcome-dialog/telemetry-approval.tsx

@@ -1,66 +1,21 @@
-import {
-  Intent,
-  TradingButton,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
+import { TradingCheckbox } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
+import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
 
-interface Props {
-  telemetryValue: string;
-  setTelemetryValue: (value: string) => void;
-}
-
-export const TelemetryApproval = ({
-  telemetryValue,
-  setTelemetryValue,
-}: Props) => {
+export const TelemetryApproval = ({ helpText }: { helpText: string }) => {
+  const [isApproved, setIsApproved] = useTelemetryApproval();
   return (
     <div className="flex flex-col py-3">
       <div className="mr-4" role="form">
-        <div className="mt-2">
-          {t(
-            'Help us identify bugs and improve Vega Governance by sharing anonymous usage data.'
-          )}
-        </div>
-        <div className="flex items-center mt-2">
-          <VegaIcon name={VegaIconNames.EYE_OFF} size={24} />
-          <div className="flex flex-col gap-1 ml-6">
-            <div className="font-semibold">{t('Anonymous')}</div>
-            <div>{t('Your identity is always anonymous on Vega')}</div>
-          </div>
-        </div>
-
-        <div className="flex items-center mt-2">
-          <VegaIcon name={VegaIconNames.COG} size={24} />
-          <div className="flex flex-col gap-1 ml-6">
-            <div className="font-semibold">{t('Optional')}</div>
-            <div>{t('You can opt out any time via settings')}</div>
-          </div>
-        </div>
-        <div className="flex flex-col justify-around items-center mt-10 gap-4 w-full px-4">
-          <TradingButton
-            onClick={() => setTelemetryValue('false')}
-            size="small"
-            intent={Intent.None}
-            data-testid="do-not-share-data-button"
-            fill
-          >
-            {t('No thanks')}
-          </TradingButton>
-
-          <TradingButton
-            onClick={() => setTelemetryValue('true')}
-            intent={Intent.Info}
-            data-testid="share-data-button"
-            size="small"
-            fill
-          >
-            {telemetryValue === 'true'
-              ? t('Continue sharing data')
-              : t('Share data')}
-          </TradingButton>
-        </div>
+        <TradingCheckbox
+          label={<span className="text-lg pl-1">{t('Share usage data')}</span>}
+          checked={isApproved}
+          name="telemetry-approval"
+          onCheckedChange={() => setIsApproved(!isApproved)}
+        />
+      </div>
+      <div className="text-sm text-vega-light-300 dark:text-vega-dark-300 ml-6">
+        <span>{helpText}</span>
       </div>
     </div>
   );

apps/trading/components/welcome-dialog/welcome-dialog-content.tsx

@@ -5,17 +5,17 @@ import { useNavigate } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import type { ReactNode } from 'react';
-import { useOnboardingStore } from './welcome-dialog';
+import { useGlobalStore } from '../../stores';
 
 export const WelcomeDialogContent = () => {
   const { VEGA_ENV } = useEnvironment();
 
-  const dismiss = useOnboardingStore((store) => store.dismiss);
+  const update = useGlobalStore((store) => store.update);
   const navigate = useNavigate();
   const browseMarkets = () => {
     const link = Links[Routes.MARKETS]();
     navigate(link);
-    dismiss();
+    update({ onBoardingDismissed: true });
   };
   const lead =
     VEGA_ENV === Networks.MAINNET

apps/trading/components/welcome-dialog/welcome-dialog.tsx

@@ -1,9 +1,7 @@
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import type { Toast } from '@vegaprotocol/ui-toolkit';
-import { Dialog, Intent, useToasts } from '@vegaprotocol/ui-toolkit';
+import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
 import { useEnvironment } from '@vegaprotocol/environment';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import { WelcomeDialogContent } from './welcome-dialog-content';
@@ -14,41 +12,15 @@ import {
   OnboardingStep,
 } from './use-get-onboarding-step';
 import * as constants from '../constants';
-import { TelemetryApproval } from './telemetry-approval';
-import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
-import { useCallback } from 'react';
 
-const ONBOARDING_STORAGE_KEY = 'vega_onboarding_dismiss_store';
-export const useOnboardingStore = create<{
-  dismissed: boolean;
-  dismiss: () => void;
-}>()(
-  persist(
-    (set) => ({
-      dismissed: false,
-      dismiss: () => set(() => ({ dismissed: true })),
-    }),
-    {
-      name: ONBOARDING_STORAGE_KEY,
-    }
-  )
-);
-
-const TELEMETRY_APPROVAL_TOAST_ID = 'telemetry_tost_id';
 export const WelcomeDialog = () => {
   const { VEGA_ENV } = useEnvironment();
-  const navigate = useNavigate();
-  const [telemetryValue, setTelemetryValue, isTelemetryNeeded, closeTelemetry] =
-    useTelemetryApproval();
   const [onBoardingViewed] = useLocalStorage(constants.ONBOARDING_VIEWED_KEY);
-  const dismiss = useOnboardingStore((store) => store.dismiss);
-  const dismissed = useOnboardingStore((store) => store.dismissed);
+  const update = useGlobalStore((store) => store.update);
+  const dismissed = useGlobalStore((store) => store.onBoardingDismissed);
   const currentStep = useGetOnboardingStep();
-  const isTelemetryPopupNeeded =
-    isTelemetryNeeded &&
-    (onBoardingViewed === 'true' ||
-      currentStep > OnboardingStep.ONBOARDING_ORDER_STEP);
 
+  const navigate = useNavigate();
   const isOnboardingDialogNeeded =
     onBoardingViewed !== 'true' &&
     currentStep &&
@@ -57,58 +29,12 @@ export const WelcomeDialog = () => {
   const marketId = useGlobalStore((store) => store.marketId);
 
   const onClose = () => {
-    if (isTelemetryPopupNeeded) {
-      closeTelemetry();
-    } else {
-      const link = marketId
-        ? Links[Routes.MARKET](marketId)
-        : Links[Routes.HOME]();
-      navigate(link);
-      dismiss();
-    }
+    const link = marketId
+      ? Links[Routes.MARKET](marketId)
+      : Links[Routes.HOME]();
+    navigate(link);
+    update({ onBoardingDismissed: true });
   };
-
-  const [setToast, hasToast, removeToast] = useToasts((store) => [
-    store.setToast,
-    store.hasToast,
-    store.remove,
-  ]);
-  const onApprovalClose = useCallback(() => {
-    closeTelemetry();
-    removeToast(TELEMETRY_APPROVAL_TOAST_ID);
-  }, [removeToast, closeTelemetry]);
-
-  const setTelemetryApprovalAndClose = useCallback(
-    (value: string) => {
-      setTelemetryValue(value);
-      onApprovalClose();
-    },
-    [setTelemetryValue, onApprovalClose]
-  );
-
-  if (isTelemetryPopupNeeded) {
-    const toast: Toast = {
-      id: TELEMETRY_APPROVAL_TOAST_ID,
-      intent: Intent.Primary,
-      content: (
-        <>
-          <h3 className="text-sm uppercase mb-1">
-            {t('Improve vega console')}
-          </h3>
-          <TelemetryApproval
-            telemetryValue={telemetryValue}
-            setTelemetryValue={setTelemetryApprovalAndClose}
-          />
-        </>
-      ),
-      onClose: onApprovalClose,
-    };
-    if (!hasToast(TELEMETRY_APPROVAL_TOAST_ID)) {
-      setToast(toast);
-    }
-    return;
-  }
-
   const title = (
     <span className="font-alpha calt" data-testid="welcome-title">
       {t('Console')}{' '}

apps/trading/components/withdrawals-menu/withdrawals-menu.tsx

@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { ViewType, useSidebar } from '../sidebar';
 
 export const WithdrawalsMenu = () => {
@@ -7,7 +7,6 @@ export const WithdrawalsMenu = () => {
 
   return (
     <TradingButton
-      intent={Intent.Primary}
       size="extra-small"
       onClick={() => setView({ type: ViewType.Withdraw })}
       data-testid="withdraw-dialog-button"

apps/trading/lib/hooks/use-telemetry-approval.spec.ts

@@ -1,40 +1,19 @@
 import { renderHook, act, waitFor } from '@testing-library/react';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import { SentryInit, SentryClose } from '@vegaprotocol/logger';
-import {
-  STORAGE_KEY,
-  STORAGE_SECOND_KEY,
-  useTelemetryApproval,
-} from './use-telemetry-approval';
-import { Networks } from '@vegaprotocol/environment';
+import { STORAGE_KEY, useTelemetryApproval } from './use-telemetry-approval';
 
 const mockSetValue = jest.fn();
-let mockStorageHookApprovalResult: [string | null, jest.Mock] = [
-  null,
-  mockSetValue,
-];
-const mockSetSecondValue = jest.fn();
-let mockStorageHookViewedResult: [string | null, jest.Mock] = [
-  null,
-  mockSetSecondValue,
-];
+const mockRemoveValue = jest.fn();
 jest.mock('@vegaprotocol/logger');
 jest.mock('@vegaprotocol/react-helpers', () => ({
   ...jest.requireActual('@vegaprotocol/react-helpers'),
-  useLocalStorage: jest.fn((key: string) => {
-    if (key === 'vega_telemetry_approval') {
-      return mockStorageHookApprovalResult;
-    }
-    return mockStorageHookViewedResult;
-  }),
+  useLocalStorage: jest
+    .fn()
+    .mockImplementation(() => [false, mockSetValue, mockRemoveValue]),
 }));
-let mockVegaEnv = 'test';
 jest.mock('@vegaprotocol/environment', () => ({
-  ...jest.requireActual('@vegaprotocol/environment'),
-  useEnvironment: jest.fn(() => ({
-    VEGA_ENV: mockVegaEnv,
-    SENTRY_DSN: 'sentry-dsn',
-  })),
+  useEnvironment: () => ({ VEGA_ENV: 'test', SENTRY_DSN: 'sentry-dsn' }),
 }));
 
 describe('useTelemetryApproval', () => {
@@ -42,71 +21,32 @@ describe('useTelemetryApproval', () => {
     jest.clearAllMocks();
   });
 
-  it('when empty hook should return proper array', () => {
+  it('hook should return proper array', () => {
     const { result } = renderHook(() => useTelemetryApproval());
-    expect(result.current[0]).toEqual('');
+    expect(result.current[0]).toEqual(false);
     expect(result.current[1]).toEqual(expect.any(Function));
-    expect(result.current[2]).toEqual(true);
-    expect(result.current[3]).toEqual(expect.any(Function));
     expect(useLocalStorage).toHaveBeenCalledWith(STORAGE_KEY);
-    expect(useLocalStorage).toHaveBeenCalledWith(STORAGE_SECOND_KEY);
-    expect(mockSetValue).toHaveBeenCalledWith('true');
-    expect(mockSetSecondValue).not.toHaveBeenCalledWith('true');
-  });
-
-  it('when approval not empty but viewed is empty should return proper array', () => {
-    mockStorageHookApprovalResult = ['false', mockSetValue];
-    const { result } = renderHook(() => useTelemetryApproval());
-    expect(result.current[0]).toEqual('false');
-    expect(result.current[1]).toEqual(expect.any(Function));
-    expect(result.current[2]).toEqual(true);
-    expect(result.current[3]).toEqual(expect.any(Function));
-    expect(useLocalStorage).toHaveBeenCalledWith(STORAGE_KEY);
-    expect(useLocalStorage).toHaveBeenCalledWith(STORAGE_SECOND_KEY);
-    expect(mockSetValue).not.toHaveBeenCalled();
-    expect(mockSetSecondValue).not.toHaveBeenCalled();
-  });
-
-  it('when NOT empty hook should return proper array', () => {
-    mockStorageHookApprovalResult = ['false', mockSetValue];
-    mockStorageHookViewedResult = ['true', mockSetSecondValue];
-    const { result } = renderHook(() => useTelemetryApproval());
-    expect(result.current[0]).toEqual('false');
-    expect(result.current[1]).toEqual(expect.any(Function));
-    expect(result.current[2]).toEqual(false);
-    expect(result.current[3]).toEqual(expect.any(Function));
-    expect(useLocalStorage).toHaveBeenCalledWith(STORAGE_KEY);
-    expect(mockSetValue).not.toHaveBeenCalled();
-  });
-
-  it('on mainnet hook should init properly', () => {
-    mockStorageHookApprovalResult = [null, mockSetValue];
-    mockVegaEnv = Networks.MAINNET;
-    renderHook(() => useTelemetryApproval());
-    expect(mockSetValue).toHaveBeenCalledWith('false');
   });
 
   it('hook should init stuff properly', async () => {
     const { result } = renderHook(() => useTelemetryApproval());
     await act(() => {
-      result.current[1]('true');
+      result.current[1](true);
     });
     await waitFor(() => {
       expect(SentryInit).toHaveBeenCalled();
-      expect(mockSetValue).toHaveBeenCalledWith('true');
-      expect(mockSetSecondValue).toHaveBeenCalledWith('true');
+      expect(mockSetValue).toHaveBeenCalledWith('1');
     });
   });
 
   it('hook should close stuff properly', async () => {
     const { result } = renderHook(() => useTelemetryApproval());
     await act(() => {
-      result.current[1]('false');
+      result.current[1](false);
     });
     await waitFor(() => {
       expect(SentryClose).toHaveBeenCalled();
-      expect(mockSetValue).toHaveBeenCalledWith('false');
-      expect(mockSetSecondValue).toHaveBeenCalledWith('true');
+      expect(mockRemoveValue).toHaveBeenCalledWith();
     });
   });
 });

apps/trading/lib/hooks/use-telemetry-approval.ts

@@ -1,51 +1,25 @@
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback } from 'react';
 import { SentryInit, SentryClose } from '@vegaprotocol/logger';
-import { Networks, useEnvironment } from '@vegaprotocol/environment';
-
+import { useEnvironment } from '@vegaprotocol/environment';
 export const STORAGE_KEY = 'vega_telemetry_approval';
-export const STORAGE_SECOND_KEY = 'vega_telemetry_viewed';
 
 export const useTelemetryApproval = (): [
-  value: string,
-  setValue: (value: string) => void,
-  shouldOpen: boolean,
-  close: () => void
+  value: boolean,
+  setValue: (value: boolean) => void
 ] => {
   const { VEGA_ENV, SENTRY_DSN } = useEnvironment();
-  const defaultTelemetryValue =
-    VEGA_ENV === Networks.MAINNET ? 'false' : 'true';
-  const [value, setValue] = useLocalStorage(STORAGE_KEY);
-  const [viewedValue, setViewedValue] = useLocalStorage(STORAGE_SECOND_KEY);
-  const [shouldOpen, setShouldOpen] = useState(!value || !viewedValue);
-  const close = useCallback(() => {
-    setShouldOpen(false);
-    setViewedValue('true');
-  }, [setViewedValue]);
-  const manageValue = useCallback(
-    (value: string) => {
-      if (value === 'true' && SENTRY_DSN) {
+  const [value, setValue, removeValue] = useLocalStorage(STORAGE_KEY);
+  const setApprove = useCallback(
+    (value: boolean) => {
+      if (value && SENTRY_DSN) {
         SentryInit(SENTRY_DSN, VEGA_ENV);
-        return setValue('true');
+        return setValue('1');
       }
       SentryClose();
-      setValue('false');
+      removeValue();
     },
-    [setValue, SENTRY_DSN, VEGA_ENV]
+    [setValue, removeValue, SENTRY_DSN, VEGA_ENV]
   );
-  const setTelemetryValue = useCallback(
-    (value: string) => {
-      setShouldOpen(false);
-      setViewedValue('true');
-      manageValue(value);
-    },
-    [manageValue, setViewedValue]
-  );
-  useEffect(() => {
-    if (!value) {
-      manageValue(defaultTelemetryValue);
-    }
-  }, [value, manageValue, defaultTelemetryValue]);
-
-  return [value || '', setTelemetryValue, shouldOpen, close];
+  return [Boolean(value), setApprove];
 };

apps/trading/stores/global.ts

@@ -4,6 +4,7 @@ import produce from 'immer';
 
 interface GlobalStore {
   marketId: string | null;
+  onBoardingDismissed: boolean;
   eagerConnecting: boolean;
   update: (store: Partial<Omit<GlobalStore, 'update'>>) => void;
 }
@@ -15,6 +16,7 @@ interface PageTitleStore {
 
 export const useGlobalStore = create<GlobalStore>()((set) => ({
   marketId: LocalStorage.getItem('marketId') || null,
+  onBoardingDismissed: false,
   eagerConnecting: false,
   update: (newState) => {
     set(

libs/candles-chart/src/lib/candles-menu.spec.tsx

@@ -7,8 +7,8 @@ describe('CandlesMenu', () => {
     render(<CandlesMenu />);
 
     await userEvent.click(
-      screen.getByText('Studies', {
-        selector: '[type="button"]',
+      screen.getByRole('button', {
+        name: 'Studies',
       })
     );
     expect(await screen.findByRole('menu')).toBeInTheDocument();

libs/candles-chart/src/lib/candles-menu.tsx

@@ -10,13 +10,14 @@ import {
   studyLabels,
 } from 'pennant';
 import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
+  TradingButton,
+  TradingDropdown,
+  TradingDropdownCheckboxItem,
+  TradingDropdownContent,
+  TradingDropdownItemIndicator,
+  TradingDropdownRadioGroup,
+  TradingDropdownRadioItem,
+  TradingDropdownTrigger,
   Icon,
 } from '@vegaprotocol/ui-toolkit';
 import type { IconName } from '@blueprintjs/icons';
@@ -44,69 +45,76 @@ export const CandlesMenu = () => {
   } = useCandlesChartSettings();
   const triggerClasses = 'text-xs';
   const contentAlign = 'end';
+  const triggerButtonProps = { size: 'extra-small' } as const;
 
   return (
     <>
-      <DropdownMenu
+      <TradingDropdown
         trigger={
-          <DropdownMenuTrigger className={triggerClasses}>
-            {t(`Interval: ${intervalLabels[interval]}`)}
-          </DropdownMenuTrigger>
+          <TradingDropdownTrigger className={triggerClasses}>
+            <TradingButton {...triggerButtonProps}>
+              {t(`Interval: ${intervalLabels[interval]}`)}
+            </TradingButton>
+          </TradingDropdownTrigger>
         }
       >
-        <DropdownMenuContent align={contentAlign}>
-          <DropdownMenuRadioGroup
+        <TradingDropdownContent align={contentAlign}>
+          <TradingDropdownRadioGroup
             value={interval}
             onValueChange={(value) => {
               setInterval(value as Interval);
             }}
           >
             {Object.values(Interval).map((timeInterval) => (
-              <DropdownMenuRadioItem
+              <TradingDropdownRadioItem
                 key={timeInterval}
                 inset
                 value={timeInterval}
               >
                 {intervalLabels[timeInterval]}
-                <DropdownMenuItemIndicator />
-              </DropdownMenuRadioItem>
+                <TradingDropdownItemIndicator />
+              </TradingDropdownRadioItem>
             ))}
-          </DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu
+          </TradingDropdownRadioGroup>
+        </TradingDropdownContent>
+      </TradingDropdown>
+      <TradingDropdown
         trigger={
-          <DropdownMenuTrigger className={triggerClasses}>
-            <Icon name={chartTypeIcon.get(chartType) as IconName} />
-          </DropdownMenuTrigger>
+          <TradingDropdownTrigger className={triggerClasses}>
+            <TradingButton {...triggerButtonProps}>
+              <Icon name={chartTypeIcon.get(chartType) as IconName} />
+            </TradingButton>
+          </TradingDropdownTrigger>
         }
       >
-        <DropdownMenuContent align={contentAlign}>
-          <DropdownMenuRadioGroup
+        <TradingDropdownContent align={contentAlign}>
+          <TradingDropdownRadioGroup
             value={chartType}
             onValueChange={(value) => {
               setType(value as ChartType);
             }}
           >
             {Object.values(ChartType).map((type) => (
-              <DropdownMenuRadioItem key={type} inset value={type}>
+              <TradingDropdownRadioItem key={type} inset value={type}>
                 {chartTypeLabels[type]}
-                <DropdownMenuItemIndicator />
-              </DropdownMenuRadioItem>
+                <TradingDropdownItemIndicator />
+              </TradingDropdownRadioItem>
             ))}
-          </DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu
+          </TradingDropdownRadioGroup>
+        </TradingDropdownContent>
+      </TradingDropdown>
+      <TradingDropdown
         trigger={
-          <DropdownMenuTrigger className={triggerClasses}>
-            {t('Overlays')}
-          </DropdownMenuTrigger>
+          <TradingDropdownTrigger className={triggerClasses}>
+            <TradingButton {...triggerButtonProps}>
+              {t('Overlays')}
+            </TradingButton>
+          </TradingDropdownTrigger>
         }
       >
-        <DropdownMenuContent align={contentAlign}>
+        <TradingDropdownContent align={contentAlign}>
           {Object.values(Overlay).map((overlay) => (
-            <DropdownMenuCheckboxItem
+            <TradingDropdownCheckboxItem
               key={overlay}
               checked={overlays.includes(overlay)}
               onCheckedChange={() => {
@@ -121,21 +129,23 @@ export const CandlesMenu = () => {
               }}
             >
               {overlayLabels[overlay]}
-              <DropdownMenuItemIndicator />
-            </DropdownMenuCheckboxItem>
+              <TradingDropdownItemIndicator />
+            </TradingDropdownCheckboxItem>
           ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu
+        </TradingDropdownContent>
+      </TradingDropdown>
+      <TradingDropdown
         trigger={
-          <DropdownMenuTrigger className={triggerClasses}>
-            {t('Studies')}
-          </DropdownMenuTrigger>
+          <TradingDropdownTrigger className={triggerClasses}>
+            <TradingButton {...triggerButtonProps}>
+              {t('Studies')}
+            </TradingButton>
+          </TradingDropdownTrigger>
         }
       >
-        <DropdownMenuContent align={contentAlign}>
+        <TradingDropdownContent align={contentAlign}>
           {Object.values(Study).map((study) => (
-            <DropdownMenuCheckboxItem
+            <TradingDropdownCheckboxItem
               key={study}
               checked={studies.includes(study)}
               onCheckedChange={() => {
@@ -150,11 +160,11 @@ export const CandlesMenu = () => {
               }}
             >
               {studyLabels[study]}
-              <DropdownMenuItemIndicator />
-            </DropdownMenuCheckboxItem>
+              <TradingDropdownItemIndicator />
+            </TradingDropdownCheckboxItem>
           ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
+        </TradingDropdownContent>
+      </TradingDropdown>
     </>
   );
 };

libs/cypress/src/lib/commands/vega-wallet-connect.ts

@@ -65,8 +65,6 @@ export function addSetVegaWallet() {
   Cypress.Commands.add('setVegaWallet', () => {
     cy.window().then((win) => {
       win.localStorage.setItem('vega_onboarding_viewed', 'true');
-      win.localStorage.setItem('vega_telemetry_approval', 'false');
-      win.localStorage.setItem('vega_telemetry_viewed', 'true');
       win.localStorage.setItem(
         'vega_wallet_config',
         JSON.stringify({
@@ -83,8 +81,6 @@ export function addSetOnBoardingViewed() {
   Cypress.Commands.add('setOnBoardingViewed', () => {
     cy.window().then((win) => {
       win.localStorage.setItem('vega_onboarding_viewed', 'true');
-      win.localStorage.setItem('vega_telemetry_approval', 'false');
-      win.localStorage.setItem('vega_telemetry_viewed', 'true');
     });
   });
 }

libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx

@@ -1,5 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { useVegaTransactionStore, useVegaWallet } from '@vegaprotocol/wallet';
 import { useHasAmendableOrder } from '../../order-hooks';
 
@@ -28,12 +28,7 @@ export const OpenOrdersMenu = ({ marketId }: { marketId: string }) => {
 };
 
 const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
-  <TradingButton
-    intent={Intent.Primary}
-    size="extra-small"
-    onClick={onClick}
-    data-testid="cancelAll"
-  >
+  <TradingButton size="extra-small" onClick={onClick} data-testid="cancelAll">
     {t('Cancel all')}
   </TradingButton>
 );

libs/proposals/src/components/protocol-upgrade-in-progress-notification.tsx

@@ -26,36 +26,22 @@ export const ProtocolUpgradeInProgressNotification = () => {
   const [nextUpgrade] = useLocalStorageSnapshot(
     NEXT_PROTOCOL_UPGRADE_PROPOSAL_SNAPSHOT
   );
+  const { blocksRising, block } = useBlockRising();
   const detailsLink = useProtocolUpgradeProposalLink();
 
   let vegaReleaseTag: string | undefined;
   let upgradeBlockHeight: string | undefined;
 
-  const hasData = data && !error;
-  const hasStoredData = nextUpgrade && ALLOW_STORED_PROPOSAL_DATA;
-
-  if (hasData) {
-    // gets tag and height from the data api
-    vegaReleaseTag = data.vegaReleaseTag;
-    upgradeBlockHeight = data.upgradeBlockHeight;
-  } else if (hasStoredData) {
-    // gets tag and height from stored value if data api is unavailable
+  if (error && !data && nextUpgrade && ALLOW_STORED_PROPOSAL_DATA) {
     try {
       const stored = JSON.parse(nextUpgrade) as StoredNextProtocolUpgradeData;
       vegaReleaseTag = stored.vegaReleaseTag;
       upgradeBlockHeight = stored.upgradeBlockHeight;
     } catch {
-      // NOOP - could not parse stored data
+      // no op
     }
   }
 
-  const hasUpgradeInfo = vegaReleaseTag && upgradeBlockHeight;
-
-  const { blocksRising, block } = useBlockRising(
-    // skips querying blocks if there's no upgrade information available
-    !hasUpgradeInfo
-  );
-
   /**
    * If upgrade is in progress then none of the nodes should produce blocks,
    * same should be with the tendermint block info otherwise it's a network
@@ -64,7 +50,10 @@ export const ProtocolUpgradeInProgressNotification = () => {
    * Once the networks is back then the notification disappears.
    */
   const upgradeInProgress =
-    hasUpgradeInfo && !blocksRising && block <= Number(upgradeBlockHeight);
+    vegaReleaseTag &&
+    upgradeBlockHeight &&
+    !blocksRising &&
+    block <= Number(upgradeBlockHeight);
 
   if (!upgradeInProgress) return null;
 

libs/proposals/src/lib/protocol-upgrade-proposals/use-block-rising.ts

@@ -15,33 +15,31 @@ const CHECK_INTERVAL = 5000; // ms
  */
 const ALLOW_STALE = 2; // times -> MAX(this, 1) * CHECK_INTERVAL ~> min check time
 
-export const useBlockRising = (skip = false) => {
+export const useBlockRising = () => {
   const [blocksRising, setBlocksRising] = useState(true);
   const [block, setBlock] = useState(0);
   const nodes = useEnvironment((state) => state.nodes);
   const clients = useMemo(() => {
-    return nodes.map((n) => {
-      if (n && n.length > 0) {
-        const client = createClient({
+    return nodes.map(
+      (n) =>
+        n &&
+        n.length > 0 &&
+        createClient({
           url: n,
           cacheConfig: undefined,
           retry: false,
           connectToDevTools: false,
           connectToHeaderStore: true,
-        });
-        return client;
-      }
-      return undefined;
-    });
+        })
+    );
   }, [nodes]);
 
   const { refetch: fetchBlockInfo } = useBlockInfo();
   useEffect(() => {
-    if (skip) return;
     let stale = 0;
     let prev = 0;
     const check = async () => {
-      const queries = clients.map((client) =>
+      const queries = clients.map((client, index) =>
         client
           ? client
               .query<BlockStatisticsQuery>({
@@ -49,16 +47,18 @@ export const useBlockRising = (skip = false) => {
                 fetchPolicy: 'network-only',
                 errorPolicy: 'ignore',
               })
-              .catch(() => {
-                // NOOP - could not retrieve statistics for that node (network error)
-              })
+              .catch((err) =>
+                Promise.reject(
+                  `could not retrieve statistics from ${nodes[index]}`
+                )
+              )
           : undefined
       );
 
       const blockInfo = await fetchBlockInfo();
       const results = (await Promise.allSettled(compact(queries))).map(
         (res) => {
-          if (res && res.status === 'fulfilled' && res.value) {
+          if (res && res.status === 'fulfilled') {
             return res.value.data.statistics;
           } else {
             return undefined;
@@ -86,7 +86,7 @@ export const useBlockRising = (skip = false) => {
     return () => {
       clearInterval(interval);
     };
-  }, [clients, fetchBlockInfo, blocksRising, nodes, skip]);
+  }, [clients, fetchBlockInfo, blocksRising, nodes]);
 
   return { blocksRising, block };
 };

libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-eye-off.tsx

@@ -1,7 +0,0 @@
-export const IconEyeOff = ({ size = 16 }: { size: number }) => {
-  return (
-    <svg width={size} height={size} viewBox="0 0 16 16">
-      <path d="M16 7.97v-.02-.01-.02-.02a.672.672 0 00-.17-.36c-.49-.63-1.07-1.2-1.65-1.72l-3.16 2.26a2.978 2.978 0 01-2.98 2.9c-.31 0-.6-.06-.88-.15L5.09 12.3c.44.19.9.36 1.37.47.97.23 1.94.24 2.92.05.88-.17 1.74-.54 2.53-.98 1.25-.7 2.39-1.67 3.38-2.75.18-.2.37-.41.53-.62.09-.1.15-.22.17-.36v-.02-.02-.01-.02-.03c.01-.02.01-.03.01-.04zm-.43-4.17c.25-.18.43-.46.43-.8 0-.55-.45-1-1-1-.22 0-.41.08-.57.2l-.01-.01-2.67 1.91c-.69-.38-1.41-.69-2.17-.87a6.8 6.8 0 00-2.91-.05c-.88.18-1.74.54-2.53.99-1.25.7-2.39 1.67-3.38 2.75-.18.2-.37.41-.53.62-.23.29-.23.63-.01.92.51.66 1.11 1.25 1.73 1.79.18.16.38.29.56.44l-2.09 1.5.01.01c-.25.18-.43.46-.43.8 0 .55.45 1 1 1 .22 0 .41-.08.57-.2l.01.01 14-10-.01-.01zm-10.41 5a3.03 3.03 0 01-.11-.8 2.99 2.99 0 012.99-2.98c.62 0 1.19.21 1.66.53L5.16 8.8z" />
-    </svg>
-  );
-};

libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts

@@ -15,7 +15,6 @@ import { IconDeposit } from './svg-icons/icon-deposit';
 import { IconEdit } from './svg-icons/icon-edit';
 import { IconExclaimationMark } from './svg-icons/icon-exclaimation-mark';
 import { IconEye } from './svg-icons/icon-eye';
-import { IconEyeOff } from './svg-icons/icon-eye-off';
 import { IconForum } from './svg-icons/icon-forum';
 import { IconGlobe } from './svg-icons/icon-globe';
 import { IconInfo } from './svg-icons/icon-info';
@@ -56,7 +55,6 @@ export enum VegaIconNames {
   EDIT = 'edit',
   EXCLAIMATION_MARK = 'exclaimation-mark',
   EYE = 'eye',
-  EYE_OFF = 'eye-off',
   FORUM = 'forum',
   GLOBE = 'globe',
   INFO = 'info',
@@ -92,7 +90,6 @@ export const VegaIconNameMap: Record<
   'chevron-down': IconChevronDown,
   'chevron-left': IconChevronLeft,
   'chevron-up': IconChevronUp,
-  'eye-off': IconEyeOff,
   'exclaimation-mark': IconExclaimationMark,
   'open-external': IconOpenExternal,
   'question-mark': IconQuestionMark,

libs/wallet/src/connect-dialog/connect-dialog.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import {
   Dialog,
-  ExternalLink,
   Intent,
   Pill,
   TradingButton,
@@ -40,7 +39,7 @@ import { useVegaWallet } from '../use-vega-wallet';
 import { InjectedConnectorForm } from './injected-connector-form';
 import { isBrowserWalletInstalled } from '../utils';
 import { useIsWalletServiceRunning } from '../use-is-wallet-service-running';
-import { SnapStatus, useSnapStatus } from '../use-snap-status';
+import { useIsSnapRunning } from '../use-is-snap-running';
 import { useVegaWalletDialogStore } from './vega-wallet-dialog-store';
 
 export const CLOSE_DELAY = 1700;
@@ -159,7 +158,7 @@ const ConnectDialogContainer = ({
     appChainId
   );
 
-  const snapStatus = useSnapStatus(
+  const isSnapRunning = useIsSnapRunning(
     DEFAULT_SNAP_ID,
     Boolean(connectors['snap'])
   );
@@ -184,7 +183,7 @@ const ConnectDialogContainer = ({
             setWalletUrl={setWalletUrl}
             onSelect={handleSelect}
             isDesktopWalletRunning={isDesktopWalletRunning}
-            snapStatus={snapStatus}
+            isSnapRunning={isSnapRunning}
           />
         )}
       </ConnectDialogContent>
@@ -199,14 +198,14 @@ const ConnectorList = ({
   walletUrl,
   setWalletUrl,
   isDesktopWalletRunning,
-  snapStatus,
+  isSnapRunning,
 }: {
   connectors: Connectors;
   onSelect: (type: WalletType) => void;
   walletUrl: string;
   setWalletUrl: (value: string) => void;
   isDesktopWalletRunning: boolean | null;
-  snapStatus: SnapStatus;
+  isSnapRunning: boolean | null;
 }) => {
   const { pubKey, links } = useVegaWallet();
   const title = isBrowserWalletInstalled()
@@ -250,7 +249,7 @@ const ConnectorList = ({
         </div>
         {connectors['snap'] !== undefined ? (
           <div>
-            {snapStatus === SnapStatus.INSTALLED ? (
+            {isSnapRunning ? (
               <ConnectionOption
                 type="snap"
                 text={
@@ -268,34 +267,22 @@ const ConnectorList = ({
                 }}
               />
             ) : (
-              <>
-                <ConnectionOption
-                  type="snap"
-                  disabled={snapStatus === SnapStatus.NOT_SUPPORTED}
-                  text={
-                    <>
-                      <div className="flex items-center justify-center w-full h-full text-base gap-1">
-                        {t('Install Vega MetaMask Snap')}
-                      </div>
-                      <div className="absolute top-0 flex items-center h-8 right-1">
-                        <VegaIcon name={VegaIconNames.METAMASK} size={24} />
-                      </div>
-                    </>
-                  }
-                  onClick={() => {
-                    requestSnap(DEFAULT_SNAP_ID);
-                  }}
-                />
-                {snapStatus === SnapStatus.NOT_SUPPORTED ? (
-                  <p className="pt-2 text-sm text-default">
-                    {t('No MetaMask version that supports snaps detected.')}{' '}
-                    {t('Learn more about')}{' '}
-                    <ExternalLink href="https://metamask.io/snaps/">
-                      MetaMask Snaps
-                    </ExternalLink>
-                  </p>
-                ) : null}
-              </>
+              <ConnectionOption
+                type="snap"
+                text={
+                  <>
+                    <div className="flex items-center justify-center w-full h-full text-base gap-1">
+                      {t('Install Vega MetaMask Snap')}
+                    </div>
+                    <div className="absolute top-0 flex items-center h-8 right-1">
+                      <VegaIcon name={VegaIconNames.METAMASK} size={24} />
+                    </div>
+                  </>
+                }
+                onClick={() => {
+                  requestSnap(DEFAULT_SNAP_ID);
+                }}
+              />
             )}
           </div>
         ) : null}

libs/wallet/src/connectors/snap-connector.ts

@@ -118,10 +118,14 @@ export const getSnap = async (
   snapId: string,
   version?: string
 ): Promise<Snap | undefined> => {
-  const snaps = await getSnaps();
-  return Object.values(snaps).find(
-    (snap) => snap.id === snapId && (!version || snap.version === version)
-  );
+  try {
+    const snaps = await getSnaps();
+    return Object.values(snaps).find(
+      (snap) => snap.id === snapId && (!version || snap.version === version)
+    );
+  } catch (e) {
+    return undefined;
+  }
 };
 
 export const invokeSnap = async <T>(

libs/wallet/src/use-is-snap-running.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { getSnap } from './connectors';
+
+const INTERVAL = 2_000;
+
+export const useIsSnapRunning = (snapId: string, shouldCheck: boolean) => {
+  const [running, setRunning] = useState(false);
+  useEffect(() => {
+    if (!shouldCheck) return;
+
+    const checkState = async () => {
+      const snap = await getSnap(snapId);
+      setRunning(!!snap);
+    };
+
+    const i = setInterval(() => {
+      checkState();
+    }, INTERVAL);
+
+    checkState();
+
+    return () => {
+      clearInterval(i);
+    };
+  }, [snapId, shouldCheck]);
+  return running;
+};

libs/wallet/src/use-snap-status.ts

@@ -1,37 +0,0 @@
-import { useEffect, useState } from 'react';
-import { getSnap } from './connectors';
-
-const INTERVAL = 2_000;
-
-export enum SnapStatus {
-  NOT_SUPPORTED,
-  INSTALLED,
-  NOT_INSTALLED,
-}
-
-export const useSnapStatus = (snapId: string, shouldCheck: boolean) => {
-  const [status, setStatus] = useState<SnapStatus>(SnapStatus.NOT_INSTALLED);
-  useEffect(() => {
-    if (!shouldCheck) return;
-
-    const checkState = async () => {
-      try {
-        const snap = await getSnap(snapId);
-        setStatus(snap ? SnapStatus.INSTALLED : SnapStatus.NOT_INSTALLED);
-      } catch (err) {
-        setStatus(SnapStatus.NOT_SUPPORTED);
-      }
-    };
-
-    const i = setInterval(() => {
-      checkState();
-    }, INTERVAL);
-
-    checkState();
-
-    return () => {
-      clearInterval(i);
-    };
-  }, [snapId, shouldCheck]);
-  return status;
-};

specs/0002-WCON-connect_vega_wallet.md

@@ -13,8 +13,6 @@ When looking to use Vega via a user interface e.g. Dapp (Decentralized web App),
 - If there is not running desktop wallet or CLI detected, I can see that I need to open my wallet. (<a name="0002-WCON-0013" href="#0002-WCON-0013">0002-WCON-0013</a>)
 - I can find out more about supported browsers i.e. there is a link (Issue "List compatible browsers" vegawallet-browser#360 has to be implemented). (<a name="0002-WCON-0013" href="#0002-WCON-0013">0002-WCON-0013</a>)
 - I can find out more about the Vega Wallet and see what "other" versions there are i.e. there is a link to the page on the website (currently - https://vega.xyz/wallet#overview). (<a name="0002-WCON-0014" href="#0002-WCON-0014">0002-WCON-0014</a>)
-- I can install and connect vega metamask snap wallet (<a name="0002-WCON-0015" href="#0002-WCON-0015">0002-WCON-0015</a>)
-
 - Browser wallet:
 
   - The browser extension you need is automatically detected if you are using Chrome or Firefox, presenting the specific call to action to install that browser extension in a visible way e.g. with a Chrome or Firefox icon. (<a name="0002-WCON-041" href="#0002-WCON-041">0002-WCON-041</a>)

specs/0007-FUGS-first-use-get-started.md

@@ -23,16 +23,13 @@
 - **Must** There is a link to try out trading on Fairground when I'm on Mainnet (<a name="0007-FUGS-008" href="#0007-FUGS-008">0007-FUGS-008</a>)
 - **Must** There is a link to trade with real funds on Mainnet when I am on Fairground (<a name="0007-FUGS-010" href="#0007-FUGS-010">0007-FUGS-010</a>)
 - **Must** When I am on the Fairground version, I can see a warning / call out that this is Fairground meaning I can try out with virtual assets at no risk (<a name="0007-FUGS-011" href="#0007-FUGS-011">0007-FUGS-011</a>)
-- If I dismiss the popup, I **must** not see it anymore (<a name="0007-FUGS-018" href="#0007-FUGS-018">0007-FUGS-018</a>)
+- If I dismiss the popup, I **must** not see it unless I NOT accomplish full "onboarding"
 - If I dismiss the popup, I land on the default market (<a name="0007-FUGS-012" href="#0007-FUGS-012">0007-FUGS-012</a>)
 
 ## When the popup has been dismissed:
 
 - **Must** I can see the steps to get started with a visible call to action (according to my progress) in the context of the deal ticket, deposit, withdraw, transfer components in the sidebar (<a name="0007-FUGS-013" href="#0007-FUGS-013">0007-FUGS-013</a>)
-- **Must** We've replaced "connect wallet" in the top right with "get started" (<a name="0007-FUGS-014" href="#0007-FUGS-014">0007-FUGS-014</a>)
-- **Must** When I press the get started CTA, I see the wallet connect popup (<a name="0007-FUGS-015" href="#0007-FUGS-015">0007-FUGS-015</a>)
-- **Must** If I have a wallet installed already I don't see this quick start onboarding, and instead call(s) to action in Console revert to connect wallet, not "get started" (button in nav header) (<a name="0007-FUGS-016" href="#0007-FUGS-016">0007-FUGS-016</a>)
-
-## When onboarding process has been accomplished:
-
-- I can see telemetry approval toast: on environment other than mainnet telemetry is enabled by default (<a name="0007-FUGS-018" href="#0007-FUGS-018">0007-FUGS-018</a>)
+- **Must** Remove buttons from pane containers that prompt to connect wallet (<a name="0007-FUGS-014" href="#0007-FUGS-014">0007-FUGS-014</a>)
+- **Must** We've replaced "connect wallet" in the top right with "get started" (<a name="0007-FUGS-015" href="#0007-FUGS-015">0007-FUGS-015</a>)
+- **Must** When I press the get started CTA, I see the wallet connect popup (<a name="0007-FUGS-016" href="#0007-FUGS-016">0007-FUGS-016</a>)
+- **Must** If I have a wallet installed already I don't see this quick start onboarding, and instead call(s) to action in Console revert to connect wallet, not "get started" (button in nav header) (<a name="0007-FUGS-017" href="#0007-FUGS-017">0007-FUGS-017</a>)

specs/7002-SORD-submit_orders.md

@@ -174,34 +174,11 @@ When populating a deal ticket I...
 - **must** see that selecting "Post only" or "reduce only" de-select the other (if selected). As is it not possibly to apply them both to an order (<a name="7003-SORD-059" href="#7003-SORD-059">7003-SORD-059</a>)
 
 - **must** see an option to select expire for stop order limit and market (<a name="7002-SORD-071" href="#7002-SORD-071">7002-SORD-071</a>)
-
   - **must** select strategy for stop order limit and market (<a name="7002-SORD-072" href="#7002-SORD-072">7002-SORD-072</a>)
     - **must** see strategy submit (<a name="7002-SORD-073" href="#7002-SORD-073">7002-SORD-073</a>)
-      if it is oco then submit strategy is not available (<a name="7002-SORD-081" href="#7002-SORD-081">7002-SORD-081</a>)
     - **must** see strategy cancel (<a name="7002-SORD-074" href="#7002-SORD-074">7002-SORD-074</a>)
   - **must** see expiry time/date (<a name="7002-SORD-075" href="#7002-SORD-075">7002-SORD-075</a>)
 
-- **must** see an option to select oco for stop order limit and market (<a name="7002-SORD-082" href="#7002-SORD-082">7002-SORD-082</a>)
-  - **must** see a type to select market or limit (<a name="7002-SORD-083" href="#7002-SORD-083">7002-SORD-083</a>)
-  - **must** see for market type
-    - **must** see rises above (<a name="7002-SORD-084" href="#7002-SORD-084">7002-SORD-084</a>)
-    - **must** see falls below (<a name="7002-SORD-085" href="#7002-SORD-085">7002-SORD-085</a>)
-    - **must** enter a trigger value (<a name="7002-SORD-086" href="#7002-SORD-086">7002-SORD-086</a>)
-    - **must** select a trigger price (<a name="7002-SORD-087" href="#7002-SORD-087">7002-SORD-087</a>)
-    - **must** select a trigger trailing percent offset (<a name="7002-SORD-088" href="#7002-SORD-088">7002-SORD-088</a>)
-  - **must** see for limit type
-    - **must** enter a price (<a name="7002-SORD-089" href="#7002-SORD-089">7002-SORD-089</a>)
-    - **must** select a trigger direction (<a name="7002-SORD-090" href="#7002-SORD-090">7002-SORD-090</a>)
-    - **must** see rises above (<a name="7002-SORD-099" href="#7002-SORD-099">7002-SORD-099</a>)
-    - **must** see falls below (<a name="7002-SORD-091" href="#7002-SORD-091">7002-SORD-091</a>)
-    - if the user has not set a preference: trigger direction **must** default to `opposite to the one selected in the stop order` (<a name="7002-SORD-092" href="#7002-SORD-092">7002-SORD-092</a>)
-    - **must** enter a trigger value (<a name="7002-SORD-093" href="#7002-SORD-093">7002-SORD-093</a>)
-    - **must** select a trigger type (<a name="7002-SORD-094" href="#7002-SORD-094">7002-SORD-094</a>)
-    - **must** see a trigger price (<a name="7002-SORD-095" href="#7002-SORD-095">7002-SORD-095</a>)
-    - **must** see a trigger trailing percent offset (<a name="7002-SORD-096" href="#7002-SORD-096">7002-SORD-096</a>)
-  - if the user has not set a preference: trigger type **must** default to `price` (<a name="7002-SORD-097" href="#7002-SORD-097">7002-SORD-097</a>)
-  - if the trigger price is already met on submission, **must** warn the user that the stop order will be triggered immediately (<a name="7002-SORD-098" href="#7002-SORD-098">7002-SORD-098</a>)
-
 ... so I can control in more detail how my order is executed
 
 ## Auto Populating a deal ticket non-manual methods