feat(trading): 4351 get started steps enhancement (#4565)

apps/governance/.env

@@ -22,8 +22,6 @@ NX_VEGA_REST_URL=https://api.n00.stagnet1.vega.xyz/api/v2/
 NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
 
-NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
-NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
 
 #Test configuration variables
 CYPRESS_FAIRGROUND=false

apps/governance/.env.capsule

@@ -19,6 +19,9 @@ NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz
 NX_VEGA_REST_URL=http://localhost:3008/api/v2/
 
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
+
 NX_TENDERMINT_URL=http://localhost:26617
 NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
 

apps/governance/.env.devnet

@@ -14,6 +14,9 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou
 NX_VEGA_REST_URL=https://api.n00.devnet1.vega.xyz/api/v2/
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996
 
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
+
 NX_TENDERMINT_URL=https://tm.be.devnet1.vega.xyz/
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.devnet1.vega.xyz/websocket
 

apps/governance/.env.mainnet

@@ -14,6 +14,8 @@ NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-mainnet-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_REST_URL=https://api.vega.community/api/v2/
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
 
 NX_TENDERMINT_URL=https://be.vega.community
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket

apps/governance/.env.mainnet-mirror

@@ -13,6 +13,8 @@ NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-mainnet-mirror-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_REST_URL=https://api.mainnet-mirror.vega.rocks/api/v2/
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
 
 NX_TENDERMINT_URL=https://be.mainnet-mirror.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket

apps/governance/.env.stagnet1

@@ -10,6 +10,9 @@ NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_REST_URL=https://api.n00.stagnet1.vega.xyz/api/v2/
 
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
+
 NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
 

apps/governance/.env.testnet

@@ -15,6 +15,9 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou
 NX_VEGA_REST_URL=https://api.n07.testnet.vega.xyz/api/v2/
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996
 
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
+
 NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket
 

apps/governance/.env.validators-testnet

@@ -12,6 +12,9 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou
 NX_VEGA_REST_URL=https://api-validators-testnet.vega.rocks/api/v2/
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996
 
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
+
 NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.
 

apps/trading-e2e/src/integration/trading-deal-ticket-basics.cy.ts

@@ -23,7 +23,7 @@ describe('deal ticket basics', { tags: '@smoke' }, () => {
     // 0003-WTXN-001
     cy.getByTestId('connect-vega-wallet'); // Not connected
     cy.getByTestId(placeOrderBtn).should('exist');
-    cy.getByTestId('get-started-button').should('exist');
+    cy.getByTestId('order-connect-wallet').should('exist');
   });
 
   it('must be able to select order direction - long/short', function () {
@@ -44,7 +44,7 @@ describe('deal ticket basics', { tags: '@smoke' }, () => {
     mockConnectWallet();
     cy.getByTestId(toggleLimit).click();
     cy.getByTestId(orderPriceField).clear().type('101');
-    cy.getByTestId('get-started-button').click();
+    cy.getByTestId('order-connect-wallet').click();
     cy.getByTestId('dialog-content').should('be.visible');
     cy.getByTestId('connectors-list')
       .find('[data-testid="connector-jsonRpc"]')

apps/trading/.env

@@ -12,8 +12,7 @@ NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/main/announcements.json
 NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
-NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+
-NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true

apps/trading/.env.capsule

@@ -12,6 +12,8 @@ NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/test/announcements.json
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
 
 NX_ETH_LOCAL_PROVIDER_URL=http://localhost:8545/
 NX_ETH_WALLET_MNEMONIC="ozone access unlock valid olympic save include omit supply green clown session"

apps/trading/.env.devnet

@@ -13,6 +13,8 @@ NX_VEGA_DOCS_URL=#
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega-dev-releases/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true

apps/trading/.env.mainnet

@@ -13,6 +13,8 @@ NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
 NX_VEGA_CONSOLE_URL=https://console.vega.xyz
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-mainnet/codfcglpplgmmlokgilfkpcjnmkbfiel
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet-mainnet
 # TAG name of the current app version - TODO: bump to the latest upon release
 NX_APP_VERSION=v0.20.21-core-0.71.6
 

apps/trading/.env.mainnet-mirror

@@ -13,6 +13,8 @@ NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
 NX_VEGA_CONSOLE_URL=https://console.mainnet-mirror.vega.rocks
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-mainnet/codfcglpplgmmlokgilfkpcjnmkbfiel
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet-mainnet
 # TAG name of the current app version - TODO: bump to the latest upon release
 NX_APP_VERSION=v0.20.19-core-0.71.6
 

apps/trading/.env.stagnet1

@@ -13,6 +13,8 @@ NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true

apps/trading/.env.testnet

@@ -14,6 +14,8 @@ NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
 NX_VEGA_CONSOLE_URL=https://console.fairground.wtf
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true

apps/trading/.env.validators-testnet

@@ -15,6 +15,9 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
 NX_VEGA_CONSOLE_URL=https://trading.validators-testnet.vega.rocks
 
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
+
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=false
 NX_STOP_ORDERS=false

apps/trading/components/constants.ts

@@ -1,10 +1,2 @@
-import { t } from '@vegaprotocol/i18n';
-
 export const THROTTLE_UPDATE_TIME = 500;
 export const ONBOARDING_VIEWED_KEY = 'vega_onboarding_viewed';
-export const MAINNET_WELCOME_HEADER = t(
-  'Trade cash settled futures on the fully decentralised Vega network.'
-);
-export const TESTNET_WELCOME_HEADER = t(
-  'Try out trading cash settled futures on the fully decentralised Vega network (Testnet).'
-);

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

@@ -1,16 +1,36 @@
+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';
 
+let mockStep = 1;
+jest.mock('./use-get-onboarding-step', () => ({
+  ...jest.requireActual('./use-get-onboarding-step'),
+  useGetOnboardingStep: jest.fn(() => mockStep),
+}));
+
 describe('GetStarted', () => {
   const renderComponent = (context: Partial<VegaWalletContextShape> = {}) => {
     return render(
-      <VegaWalletContext.Provider value={context as VegaWalletContextShape}>
+      <MemoryRouter>
-        <GetStarted />
+        <VegaWalletContext.Provider value={context as VegaWalletContextShape}>
-      </VegaWalletContext.Provider>
+          <GetStarted />
+        </VegaWalletContext.Provider>
+      </MemoryRouter>
     );
   };
+  const checkTicks = (elements: Element[]) => {
+    elements.forEach((item, i) => {
+      if (i + 1 < mockStep) {
+        expect(item.querySelector('[data-testid="icon-tick"]')).toBeTruthy();
+      }
+    });
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
   it('renders full get started content if not connected and no browser wallet detected', () => {
     renderComponent();
@@ -20,12 +40,71 @@ describe('GetStarted', () => {
   it('renders connect prompt if no pubKey but wallet installed', () => {
     globalThis.window.vega = {} as Vega;
     renderComponent();
-    expect(screen.getByTestId('order-connect-wallet')).toBeInTheDocument();
+    expect(screen.getByTestId('get-started-banner')).toBeInTheDocument();
     globalThis.window.vega = undefined as unknown as Vega;
   });
 
   it('renders nothing if connected', () => {
+    mockStep = 0;
     const { container } = renderComponent({ pubKey: 'my-pubkey' });
     expect(container).toBeEmptyDOMElement();
   });
+
+  it('steps should be ticked', () => {
+    const navigatorGetter: jest.SpyInstance = jest.spyOn(
+      window.navigator,
+      'userAgent',
+      'get'
+    );
+    navigatorGetter.mockReturnValue('Chrome');
+    mockStep = 1;
+    const { rerender, container } = renderComponent();
+    expect(screen.queryByTestId('icon-tick')).not.toBeInTheDocument();
+    expect(screen.getByTestId('get-wallet-button')).toBeInTheDocument();
+
+    mockStep = 2;
+    rerender(
+      <MemoryRouter>
+        <VegaWalletContext.Provider value={{} as VegaWalletContextShape}>
+          <GetStarted />
+        </VegaWalletContext.Provider>
+      </MemoryRouter>
+    );
+    checkTicks(screen.getAllByRole('listitem'));
+    expect(screen.getByRole('button', { name: 'Connect' })).toBeInTheDocument();
+
+    mockStep = 3;
+    rerender(
+      <MemoryRouter>
+        <VegaWalletContext.Provider value={{} as VegaWalletContextShape}>
+          <GetStarted />
+        </VegaWalletContext.Provider>
+      </MemoryRouter>
+    );
+    checkTicks(screen.getAllByRole('listitem'));
+    expect(screen.getByRole('button', { name: 'Deposit' })).toBeInTheDocument();
+
+    mockStep = 4;
+    rerender(
+      <MemoryRouter>
+        <VegaWalletContext.Provider value={{} as VegaWalletContextShape}>
+          <GetStarted />
+        </VegaWalletContext.Provider>
+      </MemoryRouter>
+    );
+    checkTicks(screen.getAllByRole('listitem'));
+    expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument();
+
+    mockStep = 5;
+    rerender(
+      <MemoryRouter>
+        <VegaWalletContext.Provider
+          value={{ pubKey: 'my-pubkey' } as VegaWalletContextShape}
+        >
+          <GetStarted />
+        </VegaWalletContext.Provider>
+      </MemoryRouter>
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
 });

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

@@ -1,36 +1,96 @@
 import classNames from 'classnames';
 import { t } from '@vegaprotocol/i18n';
-import { ExternalLink, Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
 import {
+  ExternalLink,
+  Intent,
+  TradingButton,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
+import {
+  GetWalletButton,
   useVegaWallet,
   useVegaWalletDialogStore,
-  isBrowserWalletInstalled,
 } from '@vegaprotocol/wallet';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
+import { useNavigate } from 'react-router-dom';
+import {
+  OnboardingStep,
+  useGetOnboardingStep,
+} 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';
 
 interface Props {
   lead?: string;
 }
 
-export const GetStarted = ({ lead }: Props) => {
+const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
-  const { pubKey } = useVegaWallet();
+  const navigate = useNavigate();
-  const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
-  const CANONICAL_URL = VEGA_NETWORKS[VEGA_ENV] || 'https://console.vega.xyz';
-
   const [, setOnboardingViewed] = useLocalStorage(
     constants.ONBOARDING_VIEWED_KEY
   );
 
+  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(
+    (store) => store.openVegaWalletDialog
+  );
+  const setView = useSidebar((store) => store.setView);
+  let buttonText = t('Get started');
+  let onClickHandle = () => {
+    openVegaWalletDialog();
+  };
+  if (step === OnboardingStep.ONBOARDING_WALLET_STEP) {
+    return <GetWalletButton className="justify-between" />;
+  } else if (step === OnboardingStep.ONBOARDING_CONNECT_STEP) {
+    buttonText = t('Connect');
+  } else if (step === OnboardingStep.ONBOARDING_DEPOSIT_STEP) {
+    buttonText = t('Deposit');
+    onClickHandle = () => {
+      navigate(link);
+      setView({ type: ViewType.Deposit });
+      update({ onBoardingDismissed: true });
+    };
+  } else if (step === OnboardingStep.ONBOARDING_ORDER_STEP) {
+    buttonText = t('Dismiss');
+    onClickHandle = () => {
+      navigate(link);
+      setView({ type: ViewType.Order });
+      setOnboardingViewed('true');
+    };
+  }
+
+  return (
+    <TradingButton
+      onClick={onClickHandle}
+      size="small"
+      data-testid="get-started-button"
+      intent={Intent.Info}
+    >
+      {buttonText}
+    </TradingButton>
+  );
+};
+
+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 onButtonClick = () => {
+  const getStartedNeeded =
-    openVegaWalletDialog();
+    onBoardingViewed !== 'true' &&
-    setOnboardingViewed('true');
+    currentStep &&
-  };
+    currentStep < OnboardingStep.ONBOARDING_COMPLETE_STEP;
 
   const wrapperClasses = classNames(
     'flex flex-col py-4 px-6 gap-4 rounded',
@@ -39,27 +99,48 @@ export const GetStarted = ({ lead }: Props) => {
     { 'mt-8': !lead }
   );
 
-  if (!pubKey && !isBrowserWalletInstalled()) {
+  if (getStartedNeeded) {
     return (
       <div className={wrapperClasses} data-testid="get-started-banner">
         {lead && <h2>{lead}</h2>}
         <h3 className="text-lg">{t('Get started')}</h3>
         <div>
-          <ul className="list-decimal list-inside">
+          <ul className="list-inside -ml-5" role="list">
-            <li>{t('Get a Vega wallet')}</li>
+            <li className="flex">
-            <li>{t('Connect')}</li>
+              <div className="w-5">
-            <li>{t('Deposit funds')}</li>
+                {currentStep > OnboardingStep.ONBOARDING_WALLET_STEP && (
-            <li>{t('Open a position')}</li>
+                  <VegaIcon name={VegaIconNames.TICK} size={20} />
+                )}
+              </div>
+              <div className="ml-1">1. {t('Get a Vega wallet')}</div>
+            </li>
+            <li className="flex">
+              <div className="w-5">
+                {(currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP ||
+                  pubKey) && <VegaIcon name={VegaIconNames.TICK} size={20} />}
+              </div>
+              <div className="ml-1">2. {t('Connect')}</div>
+            </li>
+            <li className="flex">
+              <div className="w-5">
+                {currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP && (
+                  <VegaIcon name={VegaIconNames.TICK} size={20} />
+                )}
+              </div>
+              <div className="ml-1">3. {t('Deposit funds')}</div>
+            </li>
+            <li className="flex">
+              <div className="w-5">
+                {currentStep > OnboardingStep.ONBOARDING_ORDER_STEP && (
+                  <VegaIcon name={VegaIconNames.TICK} size={20} />
+                )}
+              </div>
+              <div className="ml-1">4. {t('Open a position')}</div>
+            </li>
           </ul>
         </div>
         <div>
-          <TradingButton
+          <GetStartedButton step={currentStep} />
-            intent={Intent.Info}
-            onClick={onButtonClick}
-            data-testid="get-started-button"
-          >
-            {t('Get started')}
-          </TradingButton>
         </div>
         {VEGA_ENV === Networks.MAINNET && (
           <p className="text-sm">

apps/trading/components/welcome-dialog/use-get-onboarding-step.spec.tsx

@@ -0,0 +1,97 @@
+import type { ReactNode } from 'react';
+import { renderHook } from '@testing-library/react';
+import {
+  useGetOnboardingStep,
+  OnboardingStep,
+} from './use-get-onboarding-step';
+import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
+import { VegaWalletContext } from '@vegaprotocol/wallet';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { depositsProvider } from '@vegaprotocol/deposits';
+import { aggregatedAccountsDataProvider } from '@vegaprotocol/accounts';
+import { ordersWithMarketProvider } from '@vegaprotocol/orders';
+import { positionsDataProvider } from '@vegaprotocol/positions';
+
+let mockData: object[] | null = [{ id: 'item-id' }];
+jest.mock('@vegaprotocol/data-provider', () => ({
+  ...jest.requireActual('@vegaprotocol/data-provider'),
+  useDataProvider: jest.fn(() => ({ data: mockData })),
+}));
+
+let mockContext: Partial<VegaWalletContextShape> = { pubKey: 'test-pubkey' };
+
+describe('useGetOnboardingStep', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockData = [{ id: 'item-id' }];
+    mockContext = { pubKey: 'test-pubkey' };
+    globalThis.window.vega = {} as Vega;
+  });
+
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <VegaWalletContext.Provider
+      value={mockContext as unknown as VegaWalletContextShape}
+    >
+      {children}
+    </VegaWalletContext.Provider>
+  );
+
+  it('should return properly ONBOARDING_UNKNOWN_STEP', () => {
+    mockData = null;
+    const { result } = renderHook(() => useGetOnboardingStep(), { wrapper });
+    expect(result.current).toEqual(OnboardingStep.ONBOARDING_UNKNOWN_STEP);
+  });
+
+  it('should return properly ONBOARDING_WALLET_STEP', () => {
+    // @ts-ignore test only purpose
+    globalThis.window.vega = undefined;
+    const { result } = renderHook(() => useGetOnboardingStep(), { wrapper });
+    expect(result.current).toEqual(OnboardingStep.ONBOARDING_WALLET_STEP);
+  });
+
+  it('should return properly ONBOARDING_CONNECT_STEP', () => {
+    mockContext = { pubKey: null };
+    const { result } = renderHook(() => useGetOnboardingStep(), { wrapper });
+    expect(result.current).toEqual(OnboardingStep.ONBOARDING_CONNECT_STEP);
+  });
+
+  it('should return properly ONBOARDING_DEPOSIT_STEP', async () => {
+    (useDataProvider as jest.Mock).mockImplementation((args) => {
+      if (
+        args.dataProvider === depositsProvider ||
+        args.dataProvider === aggregatedAccountsDataProvider
+      ) {
+        return { data: [] };
+      }
+      return { data: mockData };
+    });
+    const { result } = renderHook(() => useGetOnboardingStep(), { wrapper });
+    await expect(result.current).toEqual(
+      OnboardingStep.ONBOARDING_DEPOSIT_STEP
+    );
+  });
+
+  it('should return properly ONBOARDING_ORDER_STEP', async () => {
+    (useDataProvider as jest.Mock).mockImplementation((args) => {
+      if (
+        args.dataProvider === ordersWithMarketProvider ||
+        args.dataProvider === positionsDataProvider
+      ) {
+        return { data: [] };
+      }
+      return { data: mockData };
+    });
+    const { result } = renderHook(() => useGetOnboardingStep(), { wrapper });
+    await expect(result.current).toEqual(OnboardingStep.ONBOARDING_ORDER_STEP);
+  });
+
+  it('should return properly ONBOARDING_COMPLETE_STEP', async () => {
+    (useDataProvider as jest.Mock).mockImplementation(() => {
+      return { data: mockData };
+    });
+    const { result } = renderHook(() => useGetOnboardingStep(), { wrapper });
+    await expect(result.current).toEqual(
+      OnboardingStep.ONBOARDING_COMPLETE_STEP
+    );
+  });
+});

apps/trading/components/welcome-dialog/use-get-onboarding-step.ts

@@ -0,0 +1,82 @@
+import { isBrowserWalletInstalled, useVegaWallet } from '@vegaprotocol/wallet';
+import { depositsProvider } from '@vegaprotocol/deposits';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { ordersWithMarketProvider } from '@vegaprotocol/orders';
+import * as Types from '@vegaprotocol/types';
+import { aggregatedAccountsDataProvider } from '@vegaprotocol/accounts';
+import { positionsDataProvider } from '@vegaprotocol/positions';
+import { useGlobalStore } from '../../stores';
+
+export enum OnboardingStep {
+  ONBOARDING_UNKNOWN_STEP,
+  ONBOARDING_WALLET_STEP,
+  ONBOARDING_CONNECT_STEP,
+  ONBOARDING_DEPOSIT_STEP,
+  ONBOARDING_ORDER_STEP,
+  ONBOARDING_COMPLETE_STEP,
+}
+
+export const useGetOnboardingStep = () => {
+  const connecting = useGlobalStore((store) => store.eagerConnecting);
+  const { pubKey = '', pubKeys } = useVegaWallet();
+  const { data: depositsData } = useDataProvider({
+    dataProvider: depositsProvider,
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
+  });
+  const { data: collateralData } = useDataProvider({
+    dataProvider: aggregatedAccountsDataProvider,
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
+  });
+  const collaterals = Boolean(collateralData?.length);
+  const deposits =
+    depositsData?.some(
+      (item) => item.status === Types.DepositStatus.STATUS_FINALIZED
+    ) || false;
+  const { data: ordersData } = useDataProvider({
+    dataProvider: ordersWithMarketProvider,
+    variables: {
+      partyId: pubKey || '',
+      pagination: {
+        first: 1,
+      },
+    },
+    skip: !pubKey,
+  });
+  const orders = Boolean(ordersData?.length);
+
+  const partyIds = pubKeys?.map((item) => item.publicKey) || [];
+  const { data: positionsData } = useDataProvider({
+    dataProvider: positionsDataProvider,
+    variables: {
+      partyIds,
+    },
+    skip: !partyIds?.length,
+  });
+  const positions = Boolean(positionsData?.length);
+
+  const isLoading = Boolean(
+    (connecting || pubKey) &&
+      (depositsData === null ||
+        ordersData === null ||
+        collateralData === null ||
+        positionsData === null)
+  );
+  if (isLoading) {
+    return OnboardingStep.ONBOARDING_UNKNOWN_STEP;
+  }
+  if (!isBrowserWalletInstalled()) {
+    return OnboardingStep.ONBOARDING_WALLET_STEP;
+  }
+  if (!pubKey) {
+    return OnboardingStep.ONBOARDING_CONNECT_STEP;
+  }
+  if (!deposits && !collaterals) {
+    return OnboardingStep.ONBOARDING_DEPOSIT_STEP;
+  }
+  if (!orders && !positions) {
+    return OnboardingStep.ONBOARDING_ORDER_STEP;
+  }
+  return OnboardingStep.ONBOARDING_COMPLETE_STEP;
+};

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

@@ -3,21 +3,19 @@ import { GetStarted } from './get-started';
 import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { useNavigate } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
-import { useLocalStorage } from '@vegaprotocol/react-helpers';
-import * as constants from '../constants';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import type { ReactNode } from 'react';
+import { useGlobalStore } from '../../stores';
 
 export const WelcomeDialogContent = () => {
   const { VEGA_ENV } = useEnvironment();
-  const [, setOnboardingViewed] = useLocalStorage(
+
-    constants.ONBOARDING_VIEWED_KEY
+  const update = useGlobalStore((store) => store.update);
-  );
   const navigate = useNavigate();
   const browseMarkets = () => {
     const link = Links[Routes.MARKETS]();
     navigate(link);
-    setOnboardingViewed('true');
+    update({ onBoardingDismissed: true });
   };
   const lead =
     VEGA_ENV === Networks.MAINNET
@@ -57,7 +55,7 @@ export const WelcomeDialogContent = () => {
           {t('Browse the markets')}
         </TradingButton>
       </div>
-      <div className="sm:w-1/2">
+      <div className="sm:w-1/2 flex grow">
         <GetStarted lead={lead} />
       </div>
     </div>

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

@@ -2,31 +2,38 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
-import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import { useEnvironment } from '@vegaprotocol/environment';
-import { isBrowserWalletInstalled } from '@vegaprotocol/wallet';
+import { useLocalStorage } from '@vegaprotocol/react-helpers';
-import * as constants from '../constants';
 import { WelcomeDialogContent } from './welcome-dialog-content';
-import { getConfig } from '@vegaprotocol/wallet';
 import { Links, Routes } from '../../pages/client-router';
 import { useGlobalStore } from '../../stores';
+import {
+  useGetOnboardingStep,
+  OnboardingStep,
+} from './use-get-onboarding-step';
+import * as constants from '../constants';
 
 export const WelcomeDialog = () => {
   const { VEGA_ENV } = useEnvironment();
-  const [onBoardingViewed, setOnboardingViewed] = useLocalStorage(
+  const [onBoardingViewed] = useLocalStorage(constants.ONBOARDING_VIEWED_KEY);
-    constants.ONBOARDING_VIEWED_KEY
+  const update = useGlobalStore((store) => store.update);
-  );
+  const dismissed = useGlobalStore((store) => store.onBoardingDismissed);
+  const currentStep = useGetOnboardingStep();
+
   const navigate = useNavigate();
   const isOnboardingDialogNeeded =
-    onBoardingViewed !== 'true' && !isBrowserWalletInstalled() && !getConfig();
+    onBoardingViewed !== 'true' &&
+    currentStep &&
+    currentStep < OnboardingStep.ONBOARDING_COMPLETE_STEP &&
+    !dismissed;
   const marketId = useGlobalStore((store) => store.marketId);
 
   const onClose = () => {
-    setOnboardingViewed('true');
     const link = marketId
       ? Links[Routes.MARKET](marketId)
       : Links[Routes.HOME]();
     navigate(link);
+    update({ onBoardingDismissed: true });
   };
   const title = (
     <span className="font-alpha calt" data-testid="welcome-title">

apps/trading/pages/_app.page.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import Head from 'next/head';
 import type { AppProps } from 'next/app';
 import { t } from '@vegaprotocol/i18n';
@@ -23,7 +23,7 @@ import {
   useNodeSwitcherStore,
 } from '@vegaprotocol/environment';
 import './styles.css';
-import { usePageTitleStore } from '../stores';
+import { useGlobalStore, usePageTitleStore } from '../stores';
 import DialogsContainer from './dialogs-container';
 import ToastsManager from './toasts-manager';
 import {
@@ -170,7 +170,8 @@ const PartyData = () => {
 
 const MaybeConnectEagerly = () => {
   const { VEGA_ENV, SENTRY_DSN } = useEnvironment();
-  useVegaEagerConnect(Connectors);
+  const update = useGlobalStore((store) => store.update);
+  const eagerConnecting = useVegaEagerConnect(Connectors);
   const [isTelemetryApproved] = useTelemetryApproval();
   useEthereumEagerConnect(
     isTelemetryApproved ? { dsn: SENTRY_DSN, env: VEGA_ENV } : {}
@@ -182,5 +183,8 @@ const MaybeConnectEagerly = () => {
   if (query && !pubKey) {
     connect(Connectors['view']);
   }
+  useEffect(() => {
+    update({ eagerConnecting });
+  }, [update, eagerConnecting]);
   return null;
 };

apps/trading/stores/global.ts

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

libs/positions/src/lib/positions-data-providers.ts

@@ -181,7 +181,7 @@ const getSubscriptionVariables = (
 ): PositionsSubscriptionSubscriptionVariables[] =>
   ([] as string[]).concat(variables.partyIds).map((partyId) => ({ partyId }));
 
-const positionsDataProvider = makeDataProvider<
+export const positionsDataProvider = makeDataProvider<
   PositionsQuery,
   PositionFieldsFragment[],
   PositionsSubscriptionSubscription,

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

@@ -204,6 +204,7 @@ const ConnectorList = ({
   setWalletUrl: (value: string) => void;
   isDesktopWalletRunning: boolean | null;
 }) => {
+  const { pubKey } = useVegaWallet();
   const title = isBrowserWalletInstalled()
     ? t('Connect Vega wallet')
     : t('Get a Vega wallet');
@@ -234,7 +235,7 @@ const ConnectorList = ({
               onClick={() => onSelect('injected')}
             />
           ) : (
-            <GetWallet />
+            <GetWalletButton />
           )}
         </div>
         <div>
@@ -242,6 +243,7 @@ const ConnectorList = ({
             type="view"
             text={t('View as party')}
             onClick={() => onSelect('view')}
+            disabled={Boolean(pubKey)}
           />
         </div>
         <div className="last:mb-0">
@@ -318,7 +320,7 @@ const SelectedForm = ({
   throw new Error('No connector selected');
 };
 
-const GetWallet = () => {
+export const GetWalletButton = ({ className }: { className?: string }) => {
   const { MOZILLA_EXTENSION_URL, CHROME_EXTENSION_URL } = useEnvironment();
   const isItChrome = window.navigator.userAgent.includes('Chrome');
   const isItMozilla =
@@ -347,10 +349,13 @@ const GetWallet = () => {
 
   return !isItChrome && !isItMozilla ? (
     <div
-      className={classNames([
+      className={classNames(
-        'bg-vega-blue-350 hover:bg-vega-blue-400 dark:bg-vega-blue-650 dark:hover:bg-vega-blue-600',
+        [
-        'flex gap-2 items-center justify-center rounded h-8 px-3 relative',
+          'bg-vega-blue-350 hover:bg-vega-blue-400 dark:bg-vega-blue-650 dark:hover:bg-vega-blue-600',
-      ])}
+          'flex gap-2 items-center justify-center rounded h-8 px-3 relative',
+        ],
+        className
+      )}
       data-testid="get-wallet-button"
     >
       {buttonContent}
@@ -360,7 +365,7 @@ const GetWallet = () => {
       onClick={onClick}
       intent={Intent.Info}
       data-testid="get-wallet-button"
-      className="relative"
+      className={classNames('relative', className)}
       size="small"
       fill
     >
@@ -409,6 +414,7 @@ const CustomUrlInput = ({
   isDesktopWalletRunning: boolean | null;
   onSelect: (type: WalletType) => void;
 }) => {
+  const { pubKey } = useVegaWallet();
   const [urlInputExpanded, setUrlInputExpanded] = useState(false);
   return urlInputExpanded ? (
     <>
@@ -433,7 +439,7 @@ const CustomUrlInput = ({
         />
       </TradingFormGroup>
       <ConnectionOption
-        disabled={!isDesktopWalletRunning}
+        disabled={!isDesktopWalletRunning || Boolean(pubKey)}
         type="jsonRpc"
         text={t('Connect the App/CLI')}
         onClick={() => onSelect('jsonRpc')}
@@ -442,7 +448,7 @@ const CustomUrlInput = ({
   ) : (
     <>
       <ConnectionOption
-        disabled={!isDesktopWalletRunning}
+        disabled={!isDesktopWalletRunning || Boolean(pubKey)}
         type="jsonRpc"
         text={t('Use the Desktop App/CLI')}
         onClick={() => onSelect('jsonRpc')}
@@ -453,6 +459,7 @@ const CustomUrlInput = ({
             <button
               className="underline text-default"
               onClick={() => setUrlInputExpanded(true)}
+              disabled={Boolean(pubKey)}
             >
               {t('Enter a custom wallet location')}{' '}
               <VegaIcon name={VegaIconNames.ARROW_RIGHT} />
@@ -467,6 +474,7 @@ const CustomUrlInput = ({
               <button
                 className="underline"
                 onClick={() => setUrlInputExpanded(true)}
+                disabled={Boolean(pubKey)}
               >
                 {t('custom wallet location')}
               </button>

libs/wallet/src/use-is-wallet-service-running.tsx

@@ -12,7 +12,9 @@ export const useIsWalletServiceRunning = (
 
   const checkState = useCallback(async () => {
     const connector = connectors['jsonRpc'] as JsonRpcConnector;
-    connector.url = url;
+    if (url && url !== connector.url) {
+      connector.url = url;
+    }
     try {
       await connector.checkCompat();
       const chainIdResult = await connector.getChainId();

nx.json

@@ -21,8 +21,7 @@
           "echo $NX_TENDERMINT_URL",
           "echo $NX_TENDERMINT_WEBSOCKET_URL",
           "echo $NX_ETHEREUM_PROVIDER_URL"
-        ],
+        ]
-        "url": "https://cloud.nx.app"
       }
     }
   },

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

@@ -1,22 +1,34 @@
 # First use & get started steps
 
-## When first enter the app
+## "Onboarding" state is gradable and has following steps: (<a name="0007-FUGS-002" href="#0007-FUGS-002">0007-FUGS-003</a>)
+
+- New visitor - has no wallet nor any dapps running.
+  - I **must** see CTA button "Get started", which clicking launches the get wallet flow (wallet connection window with links to the Chrome and FF stores)
+- Has wallet - Once wallet detected set to this.
+  - I **must** see CTA button "Connect", which clicking launches the wallet connection
+- Has connected - Once user has connected set to this.
+  - I **must** see CTA button "Deposit", which clicking launches the deposit ticket.
+- Has deposited - Once user has made AT LEAST one deposit of ANY settlement asset set to this.
+  - I **must** see CTA button "Dismiss", which clicking updates the state to Ready to trade - Get started box should now disappear forever.
+- Ready to trade - Once user has made at least one deposit AND has dismissed the "Get Started" box in the ticket.
+  - Onboarding window nor contextual "Get started" banner should be not displayed anymore.
+
+## When first enter the app or next times, but I didn't accomplish all onboarding steps.
 
 - **Must** When I open Console for the first time I can see what it is i.e. a short description and key features in auto opened dialog window (first use popup) (<a name="0007-FUGS-001" href="#0007-FUGS-001">0007-FUGS-001</a>)
-- **Must** If my wallet is already connected I don't see the first use popup (<a name="0007-FUGS-002" href="#0007-FUGS-002">0007-FUGS-002</a>)
+- If full "onboarding" hasn't been accomplished yet, I **must** see the popup with my progress marked. (<a name="0007-FUGS-002" href="#0007-FUGS-002">0007-FUGS-002</a>)
-- - **Must** If window.vega is detected (browser wallet is installed), don't open first use popup (<a name="0007-FUGS-003" href="#0007-FUGS-003">0007-FUGS-003</a>)
-- - **Must** If we detect previous connection using localStorage for desktop/cli wallet, don't open first use popup (<a name="0007-FUGS-004" href="#0007-FUGS-004">0007-FUGS-004</a>)
 - **Must** There is a call to action to browse markets, linking to the market view market/all (<a name="0007-FUGS-005" href="#0007-FUGS-005">0007-FUGS-005</a>)
 - **Must** I can see the steps I need to take to get started trading (<a name="0007-FUGS-007" href="#0007-FUGS-006">0007-FUGS-006</a>)
 - **Must** There is a call to action to get started, triggering the connect modal (<a name="0007-FUGS-007" href="#0007-FUGS-007">0007-FUGS-007</a>)
 - **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 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 first use popup has been seen, but no browser wallet is installed
+## When the popup has been dismissed:
 
-- **Must** I can see the steps to get started with a visible call to action to "get started" 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** 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** 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>)