fix(trading): simplify onboarding and explore button to use top traded (#4781)

2023-09-14 12:10:33 -07:00 · 2023-09-14 12:10:33 -07:00 · e3c6dd41c9
commit e3c6dd41c9
parent fbd01dc1bd
16 changed files with 204 additions and 219 deletions
--- a/apps/trading/client-pages/home/home.tsx
+++ b/apps/trading/client-pages/home/home.tsx
@ -1,20 +1,16 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { marketsWithDataProvider } from '@vegaprotocol/markets';
-import { useDataProvider } from '@vegaprotocol/data-provider';
-import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
 import { Links, Routes } from '../../pages/client-router';
 import { useGlobalStore } from '../../stores';
+import { useTopTradedMarkets } from '../../lib/hooks/use-top-traded-markets';

+// The home pages only purpose is to redirect to the users last market,
+// the top traded if they are new, or fall back to the list of markets.
+// Thats why we just render a loader here
 export const Home = () => {
  const navigate = useNavigate();
-  // The default market selected in the platform behind the overlay
-  // should be the oldest market that is currently trading in continuous mode(i.e. not in auction).
-  const { data, error, loading } = useDataProvider({
-    dataProvider: marketsWithDataProvider,
-    variables: undefined,
-  });
-  const update = useGlobalStore((store) => store.update);
+  const { data } = useTopTradedMarkets();
  const marketId = useGlobalStore((store) => store.marketId);

  useEffect(() => {
@ -32,12 +28,11 @@ export const Home = () => {
        navigate(Links[Routes.MARKETS]());
      }
    }
-  }, [marketId, data, navigate, update]);
+  }, [marketId, data, navigate]);

  return (
-    <AsyncRenderer data={data} loading={loading} error={error}>
-      {/* Render a loading and error state but we will redirect if markets are found */}
-      {null}
-    </AsyncRenderer>
+    <Splash>
+      <Loader />
+    </Splash>
  );
 };
--- a/apps/trading/components/constants.ts
+++ b/apps/trading/components/constants.ts
@ -1,2 +1 @@
 export const THROTTLE_UPDATE_TIME = 500;
-export const ONBOARDING_VIEWED_KEY = 'vega_onboarding_viewed';
--- a/apps/trading/components/telemetry/index.ts
+++ b/apps/trading/components/telemetry/index.ts
@ -0,0 +1 @@
+export { Telemetry } from './telemetry';
--- a/apps/trading/components/welcome-dialog/telemetry-approval.spec.tsx
+++ b/apps/trading/components/welcome-dialog/telemetry-approval.spec.tsx
--- a/apps/trading/components/welcome-dialog/telemetry-approval.tsx
+++ b/apps/trading/components/welcome-dialog/telemetry-approval.tsx
--- a/apps/trading/components/telemetry/telemetry.tsx
+++ b/apps/trading/components/telemetry/telemetry.tsx
@ -0,0 +1,69 @@
+import type { Toast } from '@vegaprotocol/ui-toolkit';
+import { Intent, useToasts } from '@vegaprotocol/ui-toolkit';
+import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
+import { useCallback, useEffect } from 'react';
+import { TelemetryApproval } from './telemetry-approval';
+import { t } from '@vegaprotocol/i18n';
+import { useOnboardingStore } from '../welcome-dialog/use-get-onboarding-step';
+
+const TELEMETRY_APPROVAL_TOAST_ID = 'telemetry_tost_id';
+
+export const Telemetry = () => {
+  const onboardingDissmissed = useOnboardingStore((store) => store.dismissed);
+  const [telemetryValue, setTelemetryValue, isTelemetryNeeded, closeTelemetry] =
+    useTelemetryApproval();
+
+  const [setToast, hasToast, removeToast] = useToasts((store) => [
+    store.setToast,
+    store.hasToast,
+    store.remove,
+  ]);
+
+  const onApprovalClose = useCallback(() => {
+    closeTelemetry();
+    removeToast(TELEMETRY_APPROVAL_TOAST_ID);
+  }, [closeTelemetry, removeToast]);
+
+  const setTelemetryApprovalAndClose = useCallback(
+    (value: string) => {
+      setTelemetryValue(value);
+      onApprovalClose();
+    },
+    [onApprovalClose, setTelemetryValue]
+  );
+
+  useEffect(() => {
+    if (isTelemetryNeeded && onboardingDissmissed) {
+      const toast: Toast = {
+        id: TELEMETRY_APPROVAL_TOAST_ID,
+        intent: Intent.Primary,
+        content: (
+          <>
+            <h3 className="mb-1 text-sm uppercase">
+              {t('Improve vega console')}
+            </h3>
+            <TelemetryApproval
+              telemetryValue={telemetryValue}
+              setTelemetryValue={setTelemetryApprovalAndClose}
+            />
+          </>
+        ),
+        onClose: onApprovalClose,
+      };
+      if (!hasToast(TELEMETRY_APPROVAL_TOAST_ID)) {
+        setToast(toast);
+      }
+      return;
+    }
+  }, [
+    telemetryValue,
+    isTelemetryNeeded,
+    onboardingDissmissed,
+    setToast,
+    hasToast,
+    onApprovalClose,
+    setTelemetryApprovalAndClose,
+  ]);
+
+  return null;
+};
--- a/apps/trading/components/welcome-dialog/get-started.spec.tsx
+++ b/apps/trading/components/welcome-dialog/get-started.spec.tsx
@ -2,7 +2,8 @@ import { MemoryRouter } from 'react-router-dom';
 import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { GetStarted } from './get-started';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { useOnboardingStore } from './use-get-onboarding-step';

 let mockStep = 1;
 jest.mock('./use-get-onboarding-step', () => ({
@ -44,13 +45,15 @@ describe('GetStarted', () => {
    globalThis.window.vega = undefined as unknown as Vega;
  });

-  it('renders nothing if connected', () => {
+  it('renders nothing if dismissed', () => {
+    useOnboardingStore.setState({ dismissed: true });
    mockStep = 0;
    const { container } = renderComponent({ pubKey: 'my-pubkey' });
    expect(container).toBeEmptyDOMElement();
  });

  it('steps should be ticked', () => {
+    useOnboardingStore.setState({ dismissed: false });
    const navigatorGetter: jest.SpyInstance = jest.spyOn(
      window.navigator,
      'userAgent',
@ -87,6 +90,8 @@ describe('GetStarted', () => {
      screen.getByRole('button', { name: 'Ready to trade' })
    ).toBeInTheDocument();

+    fireEvent.click(screen.getByRole('button', { name: 'Ready to trade' }));
+
    mockStep = 5;
    rerender(
      <MemoryRouter>
--- a/apps/trading/components/welcome-dialog/get-started.tsx
+++ b/apps/trading/components/welcome-dialog/get-started.tsx
@ -9,17 +9,15 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
-import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import { useNavigate } from 'react-router-dom';
 import {
  OnboardingStep,
  useGetOnboardingStep,
+  useOnboardingStore,
 } from './use-get-onboarding-step';
 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;
@ -27,11 +25,8 @@ interface Props {

 const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
  const navigate = useNavigate();
-  const [, setOnboardingViewed] = useLocalStorage(
-    constants.ONBOARDING_VIEWED_KEY
-  );
-
  const dismiss = useOnboardingStore((store) => store.dismiss);
+  const setDialogOpen = useOnboardingStore((store) => store.setDialogOpen);
  const marketId = useGlobalStore((store) => store.marketId);
  const link = marketId ? Links[Routes.MARKET](marketId) : Links[Routes.HOME]();
  const openVegaWalletDialog = useVegaWalletDialogStore(
@ -49,14 +44,14 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
    onClickHandle = () => {
      navigate(link);
      setView({ type: ViewType.Deposit });
-      dismiss();
+      setDialogOpen(false);
    };
-  } else if (step === OnboardingStep.ONBOARDING_ORDER_STEP) {
+  } else if (step >= OnboardingStep.ONBOARDING_ORDER_STEP) {
    buttonText = t('Ready to trade');
    onClickHandle = () => {
      navigate(link);
      setView({ type: ViewType.Order });
-      setOnboardingViewed('true');
+      dismiss();
    };
  }

@ -75,17 +70,12 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
 export const GetStarted = ({ lead }: Props) => {
  const { pubKey } = useVegaWallet();
  const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
-  const CANONICAL_URL = VEGA_NETWORKS[VEGA_ENV] || 'https://console.vega.xyz';
-  const [onBoardingViewed] = useLocalStorage(constants.ONBOARDING_VIEWED_KEY);
-  const currentStep = useGetOnboardingStep();
  const openVegaWalletDialog = useVegaWalletDialogStore(
    (store) => store.openVegaWalletDialog
  );
-
-  const getStartedNeeded =
-    onBoardingViewed !== 'true' &&
-    currentStep &&
-    currentStep < OnboardingStep.ONBOARDING_COMPLETE_STEP;
+  const CANONICAL_URL = VEGA_NETWORKS[VEGA_ENV] || 'https://console.vega.xyz';
+  const currentStep = useGetOnboardingStep();
+  const dismissed = useOnboardingStore((store) => store.dismissed);

  const wrapperClasses = classNames(
    'flex flex-col py-4 px-6 gap-4 rounded',
@ -94,7 +84,7 @@ export const GetStarted = ({ lead }: Props) => {
    { 'mt-8': !lead }
  );

-  if (getStartedNeeded) {
+  if (!dismissed) {
    return (
      <div className={wrapperClasses} data-testid="get-started-banner">
        {lead && <h2>{lead}</h2>}
--- a/apps/trading/components/welcome-dialog/use-get-onboarding-step.ts
+++ b/apps/trading/components/welcome-dialog/use-get-onboarding-step.ts
@ -1,3 +1,5 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { depositsProvider } from '@vegaprotocol/deposits';
 import { useDataProvider } from '@vegaprotocol/data-provider';
@ -7,6 +9,29 @@ import { aggregatedAccountsDataProvider } from '@vegaprotocol/accounts';
 import { positionsDataProvider } from '@vegaprotocol/positions';
 import { useGlobalStore } from '../../stores';

+const ONBOARDING_STORAGE_KEY = 'vega_onboarding';
+export const useOnboardingStore = create<{
+  dialogOpen: boolean;
+  dismissed: boolean;
+  dismiss: () => void;
+  setDialogOpen: (isOpen: boolean) => void;
+}>()(
+  persist(
+    (set) => ({
+      dialogOpen: true,
+      dismissed: false,
+      dismiss: () => set({ dismissed: true }),
+      setDialogOpen: (isOpen) => set({ dialogOpen: isOpen }),
+    }),
+    {
+      name: ONBOARDING_STORAGE_KEY,
+      partialize: (state) => ({
+        dismissed: state.dismissed,
+      }),
+    }
+  )
+);
+
 export enum OnboardingStep {
  ONBOARDING_UNKNOWN_STEP,
  ONBOARDING_WALLET_STEP,
--- a/apps/trading/components/welcome-dialog/welcome-dialog-content.tsx
+++ b/apps/trading/components/welcome-dialog/welcome-dialog-content.tsx
@ -1,40 +1,24 @@
 import { t } from '@vegaprotocol/i18n';
 import { GetStarted } from './get-started';
-import { TradingButton } from '@vegaprotocol/ui-toolkit';
-import { useNavigate } from 'react-router-dom';
+import { TradingAnchorButton } from '@vegaprotocol/ui-toolkit';
 import { Links, Routes } from '../../pages/client-router';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import type { ReactNode } from 'react';
-import { useOnboardingStore } from './welcome-dialog';
-import { useMarketList } from '@vegaprotocol/markets';
-import { isMarketActive } from '../../lib/utils';
-import orderBy from 'lodash/orderBy';
-import { priceChangePercentage } from '@vegaprotocol/utils';
+import { useTopTradedMarkets } from '../../lib/hooks/use-top-traded-markets';
+import { useOnboardingStore } from './use-get-onboarding-step';

 export const WelcomeDialogContent = () => {
  const { VEGA_ENV } = useEnvironment();
-
-  const dismiss = useOnboardingStore((store) => store.dismiss);
-  const navigate = useNavigate();
-  const { data } = useMarketList();
-  const markets = orderBy(
-    data?.filter((m) => isMarketActive(m.state)) || [],
-    [
-      (m) => {
-        if (!m.candles?.length) return 0;
-        return Number(priceChangePercentage(m.candles.map((c) => c.close)));
-      },
-    ],
-    ['desc']
+  const setOnboardingDialog = useOnboardingStore(
+    (store) => store.setDialogOpen
  );
-  const explore = () => {
-    const marketId = markets?.[0].id ?? '';
-    const link = marketId
-      ? Links[Routes.MARKET](marketId)
-      : Links[Routes.MARKETS]();
-    navigate(link);
-    dismiss();
-  };
+
+  const { data } = useTopTradedMarkets();
+  const marketId = data && data[0]?.id;
+  const link = marketId
+    ? Links[Routes.MARKET](marketId)
+    : Links[Routes.MARKETS]();
+
  const lead =
    VEGA_ENV === Networks.MAINNET
      ? t('Start trading on the worlds most advanced decentralised exchange.')
@ -43,7 +27,7 @@ export const WelcomeDialogContent = () => {
        );
  return (
    <div className="flex flex-col sm:flex-row gap-8">
-      <div className="sm:w-1/2 flex flex-col justify-between pt-3">
+      <div className="flex flex-col justify-between pt-3 sm:w-1/2">
        <ul className="ml-0">
          <ListItemContent
            icon={<NonCustodialIcon />}
@ -65,15 +49,16 @@ export const WelcomeDialogContent = () => {
            )}
          />
        </ul>
-        <TradingButton
-          onClick={explore}
+        <TradingAnchorButton
+          href={link}
+          onClick={() => setOnboardingDialog(false)}
          className="block w-full"
          data-testid="browse-markets-button"
        >
          {t('Explore')}
-        </TradingButton>
+        </TradingAnchorButton>
      </div>
-      <div className="sm:w-1/2 flex grow">
+      <div className="flex sm:w-1/2 grow">
        <GetStarted lead={lead} />
      </div>
    </div>
@ -90,10 +75,10 @@ const ListItemContent = ({
  text: string;
 }) => {
  return (
-    <li className="my-4 flex gap-3">
-      <div className="shrink-0 pt-1">{icon}</div>
+    <li className="flex my-4 gap-3">
+      <div className="pt-1 shrink-0">{icon}</div>
      <div>
-        <h3 className="text-lg leading-snug mb-2">{title}</h3>
+        <h3 className="mb-2 text-lg leading-snug">{title}</h3>
        <p className="text-sm text-secondary">{text}</p>
      </div>
    </li>
--- a/apps/trading/components/welcome-dialog/welcome-dialog.tsx
+++ b/apps/trading/components/welcome-dialog/welcome-dialog.tsx
@ -1,133 +1,32 @@
-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';
-import { Links, Routes } from '../../pages/client-router';
-import { useGlobalStore } from '../../stores';
-import {
-  useGetOnboardingStep,
-  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';
+import { useOnboardingStore } from './use-get-onboarding-step';

-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 currentStep = useGetOnboardingStep();
-  const isTelemetryPopupNeeded =
-    isTelemetryNeeded &&
-    (onBoardingViewed === 'true' ||
-      currentStep > OnboardingStep.ONBOARDING_ORDER_STEP);
+  const dialogOpen = useOnboardingStore((store) => store.dialogOpen);
+  const dismiss = useOnboardingStore((store) => store.dismiss);

-  const isOnboardingDialogNeeded =
-    onBoardingViewed !== 'true' &&
-    currentStep &&
-    currentStep < OnboardingStep.ONBOARDING_COMPLETE_STEP &&
-    !dismissed;
-  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 [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="mb-1 text-sm uppercase">
-            {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')}{' '}
-      <span className="text-vega-clight-100 dark:text-vega-cdark-100">
-        {VEGA_ENV}
-      </span>
-    </span>
-  );
-
-  return isOnboardingDialogNeeded ? (
+  return (
    <Dialog
-      open
-      title={title}
+      open={dismissed ? false : dialogOpen}
+      title={
+        <span className="font-alpha calt" data-testid="welcome-title">
+          {t('Console')}{' '}
+          <span className="text-vega-clight-100 dark:text-vega-cdark-100">
+            {VEGA_ENV}
+          </span>
+        </span>
+      }
      size="medium"
-      onChange={onClose}
+      onChange={() => dismiss()}
      intent={Intent.None}
      dataTestId="welcome-dialog"
    >
      <WelcomeDialogContent />
    </Dialog>
-  ) : null;
+  );
 };
--- a/apps/trading/lib/hooks/use-top-traded-markets.tsx
+++ b/apps/trading/lib/hooks/use-top-traded-markets.tsx
@ -0,0 +1,13 @@
+import orderBy from 'lodash/orderBy';
+import { calcTradedFactor, useMarketList } from '@vegaprotocol/markets';
+import { isMarketActive } from '../utils';
+
+export const useTopTradedMarkets = () => {
+  const { data, loading, error } = useMarketList();
+
+  const activeMarkets = data?.filter((m) => isMarketActive(m.state));
+  const marketsByTopTraded = data
+    ? orderBy(activeMarkets, (m) => calcTradedFactor(m), 'desc')
+    : undefined;
+  return { data: marketsByTopTraded, loading, error };
+};
--- a/apps/trading/pages/_app.page.tsx
+++ b/apps/trading/pages/_app.page.tsx
@ -49,6 +49,7 @@ import {
 import { ViewingBanner } from '../components/viewing-banner';
 import { NavHeader } from '../components/navbar/nav-header';
 import { Routes as AppRoutes } from './client-router';
+import { Telemetry } from '../components/telemetry';

 const DEFAULT_TITLE = t('Welcome to Vega trading!');

@ -125,6 +126,7 @@ function AppBody({ Component }: AppProps) {
      <InitializeHandlers />
      <MaybeConnectEagerly />
      <PartyData />
+      <Telemetry />
    </div>
  );
 }
--- a/libs/cypress/src/lib/commands/vega-wallet-connect.ts
+++ b/libs/cypress/src/lib/commands/vega-wallet-connect.ts
@ -61,10 +61,15 @@ export function addVegaWalletConnect() {
  });
 }

+const onboardingViewedState = { state: { dismissed: true }, version: 0 };
+
 export function addSetVegaWallet() {
  Cypress.Commands.add('setVegaWallet', () => {
    cy.window().then((win) => {
-      win.localStorage.setItem('vega_onboarding_viewed', 'true');
+      win.localStorage.setItem(
+        'vega_onboarding',
+        JSON.stringify(onboardingViewedState)
+      );
      win.localStorage.setItem('vega_telemetry_approval', 'false');
      win.localStorage.setItem('vega_telemetry_viewed', 'true');
      win.localStorage.setItem(
@ -82,7 +87,10 @@ export function addSetVegaWallet() {
 export function addSetOnBoardingViewed() {
  Cypress.Commands.add('setOnBoardingViewed', () => {
    cy.window().then((win) => {
-      win.localStorage.setItem('vega_onboarding_viewed', 'true');
+      win.localStorage.setItem(
+        'vega_onboarding',
+        JSON.stringify(onboardingViewedState)
+      );
      win.localStorage.setItem('vega_telemetry_approval', 'false');
      win.localStorage.setItem('vega_telemetry_viewed', 'true');
    });
--- a/libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-eye-off.tsx
+++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-eye-off.tsx
@ -1,7 +1,8 @@
 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" />
+      <path d="M13.5 13.9989C13.4343 13.999 13.3693 13.9861 13.3086 13.961C13.248 13.9358 13.1929 13.8989 13.1466 13.8524L2.14658 2.85237C2.05677 2.75784 2.00744 2.63197 2.00911 2.50159C2.01077 2.37121 2.06331 2.24664 2.15551 2.15443C2.24771 2.06223 2.37228 2.0097 2.50266 2.00803C2.63304 2.00636 2.75892 2.05569 2.85345 2.1455L13.8534 13.1455C13.9233 13.2154 13.9709 13.3045 13.9902 13.4015C14.0095 13.4984 13.9996 13.5989 13.9617 13.6902C13.9239 13.7816 13.8599 13.8597 13.7777 13.9146C13.6955 13.9695 13.5989 13.9989 13.5 13.9989ZM7.98939 11.9989C6.69282 11.9989 5.44251 11.6152 4.27314 10.8583C3.20845 10.1708 2.25001 9.18612 1.50126 8.01456V8.01206C2.12439 7.11925 2.80689 6.36425 3.54001 5.7555C3.54664 5.74995 3.55205 5.74309 3.5559 5.73535C3.55975 5.72761 3.56194 5.71916 3.56235 5.71052C3.56277 5.70189 3.56138 5.69326 3.55829 5.68519C3.5552 5.67712 3.55046 5.66977 3.54439 5.66362L2.92189 5.04206C2.91083 5.03091 2.89597 5.02433 2.88028 5.02363C2.86458 5.02294 2.8492 5.02818 2.8372 5.03831C2.05845 5.69456 1.33564 6.49956 0.67845 7.44206C0.565383 7.60434 0.503113 7.79658 0.499551 7.99433C0.49599 8.19209 0.551299 8.38644 0.65845 8.55269C1.48376 9.84425 2.54595 10.9321 3.7297 11.698C5.06251 12.5614 6.49689 12.9989 7.98939 12.9989C8.795 12.9964 9.59491 12.8637 10.3581 12.6058C10.3682 12.6024 10.3772 12.5965 10.3844 12.5886C10.3915 12.5807 10.3965 12.5711 10.3989 12.5608C10.4013 12.5504 10.4011 12.5396 10.3981 12.5294C10.3952 12.5192 10.3897 12.5099 10.3822 12.5024L9.70782 11.828C9.6923 11.8129 9.6731 11.802 9.65212 11.7965C9.63113 11.7911 9.60909 11.7911 9.58814 11.7967C9.06587 11.9312 8.52869 11.9992 7.98939 11.9989ZM15.3388 7.45519C14.5119 6.17644 13.4391 5.09019 12.2366 4.31362C10.9063 3.45362 9.43751 2.99894 7.98939 2.99894C7.19232 3.00035 6.40116 3.13589 5.64908 3.39987C5.63905 3.40336 5.63009 3.40934 5.62302 3.41725C5.61595 3.42516 5.61101 3.43474 5.60866 3.44509C5.60632 3.45544 5.60664 3.46621 5.60961 3.4764C5.61258 3.48658 5.6181 3.49585 5.62564 3.50331L6.29908 4.17675C6.31475 4.19216 6.33422 4.20316 6.3555 4.20865C6.37679 4.21414 6.39915 4.21391 6.42032 4.208C6.93188 4.06962 7.45945 3.99932 7.98939 3.99894C9.26095 3.99894 10.5075 4.38737 11.6941 5.15519C12.7788 5.85519 13.7485 6.83894 14.4991 7.99894C14.4996 7.99965 14.4999 8.00053 14.4999 8.00144C14.4999 8.00234 14.4996 8.00322 14.4991 8.00394C13.9542 8.86173 13.2781 9.62867 12.4953 10.2767C12.4886 10.2823 12.4831 10.2891 12.4792 10.2969C12.4753 10.3046 12.4731 10.3131 12.4727 10.3218C12.4722 10.3305 12.4736 10.3392 12.4767 10.3473C12.4798 10.3554 12.4845 10.3628 12.4906 10.3689L13.1125 10.9905C13.1235 11.0016 13.1383 11.0082 13.1539 11.0089C13.1695 11.0097 13.1849 11.0046 13.1969 10.9946C14.0325 10.291 14.7558 9.46395 15.3419 8.54206C15.4455 8.37961 15.5002 8.19083 15.4997 7.99817C15.4991 7.8055 15.4433 7.61704 15.3388 7.45519Z" />
+      <path d="M8.00002 4.99777C7.77531 4.99765 7.5513 5.02281 7.33221 5.07277C7.32114 5.07507 7.31091 5.08033 7.30259 5.08798C7.29428 5.09563 7.28819 5.1054 7.28498 5.11624C7.28178 5.12707 7.28157 5.13858 7.28438 5.14952C7.2872 5.16047 7.29293 5.17045 7.30096 5.1784L10.8194 8.6959C10.8273 8.70393 10.8373 8.70966 10.8483 8.71247C10.8592 8.71529 10.8707 8.71508 10.8816 8.71187C10.8924 8.70867 10.9022 8.70258 10.9098 8.69427C10.9175 8.68595 10.9227 8.67571 10.925 8.66465C11.0252 8.22529 11.0251 7.769 10.9247 7.32968C10.8244 6.89036 10.6263 6.47929 10.3453 6.127C10.0643 5.77472 9.70756 5.49026 9.30153 5.29477C8.89551 5.09928 8.45066 4.99776 8.00002 4.99777ZM5.18065 7.29965C5.1727 7.29161 5.16272 7.28588 5.15177 7.28307C5.14083 7.28026 5.12932 7.28047 5.11849 7.28367C5.10765 7.28688 5.09788 7.29296 5.09023 7.30128C5.08257 7.3096 5.07732 7.31983 5.07502 7.3309C4.96169 7.82601 4.97592 8.34178 5.11638 8.82989C5.25684 9.318 5.51892 9.76245 5.87807 10.1216C6.23722 10.4807 6.68167 10.7428 7.16978 10.8833C7.65789 11.0237 8.17366 11.038 8.66877 10.9246C8.67984 10.9223 8.69007 10.9171 8.69839 10.9094C8.70671 10.9018 8.71279 10.892 8.716 10.8812C8.7192 10.8703 8.71941 10.8588 8.7166 10.8479C8.71379 10.8369 8.70806 10.827 8.70002 10.819L5.18065 7.29965Z" />
    </svg>
  );
 };
--- a/libs/ui-toolkit/src/components/trading-button/trading-button.tsx
+++ b/libs/ui-toolkit/src/components/trading-button/trading-button.tsx
@ -6,6 +6,7 @@ import type {
  ReactNode,
 } from 'react';
 import { Intent } from '../../utils/intent';
+import { Link } from 'react-router-dom';

 type TradingButtonProps = {
  size?: 'large' | 'medium' | 'small' | 'extra-small';
@ -119,30 +120,22 @@ export const TradingButton = forwardRef<
  )
 );

-export const TradingAnchorButton = forwardRef<
-  HTMLAnchorElement,
-  AnchorHTMLAttributes<HTMLAnchorElement> & TradingButtonProps
->(
-  (
-    {
-      size = 'medium',
-      intent = Intent.None,
-      icon,
-      href,
-      children,
-      className,
-      subLabel,
-      ...props
-    },
-    ref
-  ) => (
-    <a
-      ref={ref}
-      href={href}
-      className={getClassName({ size, subLabel, intent }, className)}
-      {...props}
-    >
-      <Content icon={icon} subLabel={subLabel} children={children} />
-    </a>
-  )
+export const TradingAnchorButton = ({
+  size = 'medium',
+  intent = Intent.None,
+  icon,
+  href,
+  children,
+  className,
+  subLabel,
+  ...props
+}: AnchorHTMLAttributes<HTMLAnchorElement> &
+  TradingButtonProps & { href: string }) => (
+  <Link
+    to={href}
+    className={getClassName({ size, subLabel, intent }, className)}
+    {...props}
+  >
+    <Content icon={icon} subLabel={subLabel} children={children} />
+  </Link>
 );