chore(trading): open connect dialog from onboarding dialog (#4744)

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2023-09-12 17:07:37 +02:00 · 2023-09-12 17:07:37 +02:00 · 2453d7841a
commit 2453d7841a
parent a0945be721
7 changed files with 88 additions and 125 deletions
--- a/apps/trading/components/welcome-dialog/get-started.spec.tsx
+++ b/apps/trading/components/welcome-dialog/get-started.spec.tsx
@ -22,7 +22,7 @@ describe('GetStarted', () => {
  };
  const checkTicks = (elements: Element[]) => {
    elements.forEach((item, i) => {
-      if (i + 1 < mockStep) {
+      if (i + 1 < mockStep - 1) {
        expect(item.querySelector('[data-testid="icon-tick"]')).toBeTruthy();
      }
    });
@ -57,19 +57,9 @@ describe('GetStarted', () => {
      '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>
-    );
+    const { rerender, container } = renderComponent();
    checkTicks(screen.getAllByRole('listitem'));
    expect(screen.getByRole('button', { name: 'Connect' })).toBeInTheDocument();

@ -93,7 +83,9 @@ describe('GetStarted', () => {
      </MemoryRouter>
    );
    checkTicks(screen.getAllByRole('listitem'));
-    expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Ready to trade' })
+    ).toBeInTheDocument();

    mockStep = 5;
    rerender(
--- a/apps/trading/components/welcome-dialog/get-started.tsx
+++ b/apps/trading/components/welcome-dialog/get-started.tsx
@ -7,11 +7,7 @@ import {
  VegaIcon,
  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
-import {
-  GetWalletButton,
-  useVegaWallet,
-  useVegaWalletDialogStore,
-} from '@vegaprotocol/wallet';
+import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import { useNavigate } from 'react-router-dom';
@ -30,7 +26,6 @@ interface Props {
 }

 const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
-  const { CHROME_EXTENSION_URL, MOZILLA_EXTENSION_URL } = useEnvironment();
  const navigate = useNavigate();
  const [, setOnboardingViewed] = useLocalStorage(
    constants.ONBOARDING_VIEWED_KEY
@ -47,15 +42,7 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
  let onClickHandle = () => {
    openVegaWalletDialog();
  };
-  if (step === OnboardingStep.ONBOARDING_WALLET_STEP) {
-    return (
-      <GetWalletButton
-        className="justify-between"
-        chromeExtensionUrl={CHROME_EXTENSION_URL}
-        mozillaExtensionUrl={MOZILLA_EXTENSION_URL}
-      />
-    );
-  } else if (step === OnboardingStep.ONBOARDING_CONNECT_STEP) {
+  if (step <= OnboardingStep.ONBOARDING_CONNECT_STEP) {
    buttonText = t('Connect');
  } else if (step === OnboardingStep.ONBOARDING_DEPOSIT_STEP) {
    buttonText = t('Deposit');
@ -65,7 +52,7 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
      dismiss();
    };
  } else if (step === OnboardingStep.ONBOARDING_ORDER_STEP) {
-    buttonText = t('Dismiss');
+    buttonText = t('Ready to trade');
    onClickHandle = () => {
      navigate(link);
      setView({ type: ViewType.Order });
@ -116,23 +103,18 @@ export const GetStarted = ({ lead }: Props) => {
          <ul className="list-none">
            <Step
              step={1}
-              text={t('Get a Vega wallet')}
-              complete={currentStep > OnboardingStep.ONBOARDING_WALLET_STEP}
-            />
-            <Step
-              step={2}
              text={t('Connect')}
              complete={Boolean(
                currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP || pubKey
              )}
            />
            <Step
-              step={3}
+              step={2}
              text={t('Deposit funds')}
              complete={currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP}
            />
            <Step
-              step={4}
+              step={3}
              text={t('Open a position')}
              complete={currentStep > OnboardingStep.ONBOARDING_ORDER_STEP}
            />
--- a/apps/trading/components/welcome-dialog/use-get-onboarding-step.spec.tsx
+++ b/apps/trading/components/welcome-dialog/use-get-onboarding-step.spec.tsx
@ -7,8 +7,6 @@ import {
 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';

@ -23,7 +21,7 @@ let mockContext: Partial<VegaWalletContextShape> = { pubKey: 'test-pubkey' };
 describe('useGetOnboardingStep', () => {
  beforeEach(() => {
    jest.clearAllMocks();
-    mockData = [{ id: 'item-id' }];
+    mockData = [];
    mockContext = { pubKey: 'test-pubkey' };
    globalThis.window.vega = {} as Vega;
  });
@ -42,13 +40,6 @@ describe('useGetOnboardingStep', () => {
    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 });
@ -56,15 +47,6 @@ describe('useGetOnboardingStep', () => {
  });

  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
@ -72,6 +54,7 @@ describe('useGetOnboardingStep', () => {
  });

  it('should return properly ONBOARDING_ORDER_STEP', async () => {
+    mockData = [{ id: 'item-id' }];
    (useDataProvider as jest.Mock).mockImplementation((args) => {
      if (
        args.dataProvider === ordersWithMarketProvider ||
@ -86,6 +69,7 @@ describe('useGetOnboardingStep', () => {
  });

  it('should return properly ONBOARDING_COMPLETE_STEP', async () => {
+    mockData = [{ id: 'item-id' }];
    (useDataProvider as jest.Mock).mockImplementation(() => {
      return { data: mockData };
    });
--- a/apps/trading/components/welcome-dialog/use-get-onboarding-step.ts
+++ b/apps/trading/components/welcome-dialog/use-get-onboarding-step.ts
@ -1,4 +1,4 @@
-import { isBrowserWalletInstalled, useVegaWallet } from '@vegaprotocol/wallet';
+import { useVegaWallet } from '@vegaprotocol/wallet';
 import { depositsProvider } from '@vegaprotocol/deposits';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { ordersWithMarketProvider } from '@vegaprotocol/orders';
@ -63,20 +63,21 @@ export const useGetOnboardingStep = () => {
        collateralData === null ||
        positionsData === null)
  );
+  let step = OnboardingStep.ONBOARDING_UNKNOWN_STEP;
  if (isLoading) {
-    return OnboardingStep.ONBOARDING_UNKNOWN_STEP;
-  }
-  if (!isBrowserWalletInstalled()) {
-    return OnboardingStep.ONBOARDING_WALLET_STEP;
+    return step;
  }
  if (!pubKey) {
-    return OnboardingStep.ONBOARDING_CONNECT_STEP;
+    step = OnboardingStep.ONBOARDING_CONNECT_STEP;
  }
-  if (!deposits && !collaterals) {
-    return OnboardingStep.ONBOARDING_DEPOSIT_STEP;
+  if (pubKey) {
+    step = OnboardingStep.ONBOARDING_DEPOSIT_STEP;
  }
-  if (!orders && !positions) {
-    return OnboardingStep.ONBOARDING_ORDER_STEP;
+  if (pubKey && (deposits || collaterals)) {
+    step = OnboardingStep.ONBOARDING_ORDER_STEP;
  }
-  return OnboardingStep.ONBOARDING_COMPLETE_STEP;
+  if (pubKey && (orders || positions)) {
+    step = OnboardingStep.ONBOARDING_COMPLETE_STEP;
+  }
+  return step;
 };
--- a/libs/ui-toolkit/src/components/trading-button/trading-button.tsx
+++ b/libs/ui-toolkit/src/components/trading-button/trading-button.tsx
@ -39,17 +39,17 @@ const getClassName = (
    },
    // colours
    {
-      'bg-vega-yellow hover:bg-vega-yellow-550 dark:bg-vega-yellow dark:hover:bg-vega-yellow-450':
+      'bg-vega-yellow enabled:hover:bg-vega-yellow-550 dark:bg-vega-yellow dark:enabled:hover:bg-vega-yellow-450':
        intent === Intent.Primary,
-      'bg-vega-clight-500 hover:bg-vega-clight-400 dark:bg-vega-cdark-500 dark:hover:bg-vega-cdark-400':
+      'bg-vega-clight-500 enabled:hover:bg-vega-clight-400 dark:bg-vega-cdark-500 dark:enabled:hover:bg-vega-cdark-400':
        intent === Intent.None,
-      'bg-vega-blue-350 hover:bg-vega-blue-400 dark:bg-vega-blue-650 dark:hover:bg-vega-blue-600':
+      'bg-vega-blue-350 enabled:hover:bg-vega-blue-400 dark:bg-vega-blue-650 dark:enabled:hover:bg-vega-blue-600':
        intent === Intent.Info,
-      'bg-vega-orange-350 hover:bg-vega-orange-400 dark:bg-vega-orange-650 dark:hover:bg-vega-orange-600':
+      'bg-vega-orange-350 enabled:hover:bg-vega-orange-400 dark:bg-vega-orange-650 dark:enabled:hover:bg-vega-orange-600':
        intent === Intent.Warning,
-      'bg-vega-red-350 hover:bg-vega-red-400 dark:bg-vega-red-650 dark:hover:bg-vega-red-600':
+      'bg-vega-red-350 enabled:hover:bg-vega-red-400 dark:bg-vega-red-650 dark:enabled:hover:bg-vega-red-600':
        intent === Intent.Danger,
-      'bg-vega-green-350 hover:bg-vega-green-400 dark:bg-vega-green-650 dark:hover:bg-vega-green-600':
+      'bg-vega-green-350 enabled:hover:bg-vega-green-400 dark:bg-vega-green-650 dark:enabled:hover:bg-vega-green-600':
        intent === Intent.Success,
      'text-vega-clight-50 dark:text-vega-cdark-50': intent !== Intent.Primary,
      'text-vega-clight-900 dark:text-vega-cdark-900':
@ -73,7 +73,7 @@ const Content = ({
  children,
 }: Pick<TradingButtonProps, 'icon' | 'subLabel' | 'children'>) => (
  <>
-    <span data-label className="font-alpha leading-none" key="children">
+    <span data-label className="leading-none font-alpha" key="children">
      {children}
    </span>
    {icon}
--- a/libs/wallet/src/connect-dialog/connect-dialog.tsx
+++ b/libs/wallet/src/connect-dialog/connect-dialog.tsx
@ -241,51 +241,49 @@ const ConnectorList = ({
          'Connect securely, deposit funds and approve or reject transactions with the Vega wallet'
        )}
      </p>
-      <div data-testid="connectors-list" className="flex flex-col mt-4 gap-4">
-        <div>
-          {isBrowserWalletInstalled() ? (
-            <ConnectionOptionWithDescription
-              type="injected"
-              text={extendedText}
-              onClick={() => onSelect('injected')}
-              title={
-                <>
-                  <span>{t('Vega Wallet')}</span>
-                  {'  '}
-                  <span className="text-xs">{t('full featured')}</span>
-                </>
-              }
-              description={t(
-                `Connect Vega Wallet extension
+      <div data-testid="connectors-list" className="flex flex-col mt-4 gap-2">
+        {isBrowserWalletInstalled() ? (
+          <ConnectionOptionWithDescription
+            type="injected"
+            text={extendedText}
+            onClick={() => onSelect('injected')}
+            title={
+              <>
+                <span>{t('Vega Wallet')}</span>
+                {'  '}
+                <span className="text-xs">{t('full featured')}</span>
+              </>
+            }
+            description={t(
+              `Connect Vega Wallet extension
+              for %s to access all features including key
+              management and detailed transaction views from your
+              browser.`,
+              [browserName]
+            )}
+          />
+        ) : (
+          <div>
+            <h1 className="mb-1 text-lg">
+              <span>{t('Vega Wallet')}</span>
+              {'  '}
+              <span className="text-xs"> {t('full featured')}</span>
+            </h1>
+            <p className="mb-2 text-sm">
+              {t(
+                `Install Vega Wallet extension
              for %s to access all features including key
              management and detailed transaction views from your
              browser.`,
                [browserName]
              )}
+            </p>
+            <GetWalletButton
+              chromeExtensionUrl={links.chromeExtensionUrl}
+              mozillaExtensionUrl={links.mozillaExtensionUrl}
            />
-          ) : (
-            <div className="py-2">
-              <h1 className="px-2 text-lg">
-                <span>{t('Vega Wallet')}</span>
-                {'  '}
-                <span className="text-xs"> {t('full featured')}</span>
-              </h1>
-              <p className="p-2 text-sm">
-                {t(
-                  `Install Vega Wallet extension
-              for %s to access all features including key
-              management and detailed transaction views from your
-              browser.`,
-                  [browserName]
-                )}
-              </p>
-              <GetWalletButton
-                chromeExtensionUrl={links.chromeExtensionUrl}
-                mozillaExtensionUrl={links.mozillaExtensionUrl}
-              />
-            </div>
-          )}
-        </div>
+          </div>
+        )}
        {connectors['snap'] !== undefined ? (
          <div>
            {snapStatus === SnapStatus.INSTALLED ? (
@ -335,7 +333,7 @@ const ConnectorList = ({
                  }}
                />
                {snapStatus === SnapStatus.NOT_SUPPORTED ? (
-                  <p className="pt-1 text-xs leading-tight text-default">
+                  <p className="pt-1 text-xs leading-tight text-muted">
                    {t('No MetaMask version that supports snaps detected.')}{' '}
                    {t('Learn more about')}{' '}
                    <ExternalLink href="https://metamask.io/snaps/">
@ -348,7 +346,7 @@ const ConnectorList = ({
          </div>
        ) : null}
        <div>
-          <h1 className="my-1 text-md">{t('Advanced / Other options...')}</h1>
+          <h1 className="mb-1 text-md">{t('Advanced / Other options...')}</h1>
          <ConnectionOption
            type="view"
            text={t('View as party')}
@ -520,7 +518,7 @@ const ConnectionOptionWithDescription = ({
  return (
    <div>
      <h1 className="text-md">{title}</h1>
-      <p className="pb-2 text-sm text-gray-60 text-muted">{description}</p>
+      <p className="mb-2 text-sm text-gray-60 text-muted">{description}</p>
      <ConnectionOption
        disabled={disabled}
        type={type}
@ -579,10 +577,11 @@ const CustomUrlInput = ({
      <div className="flex justify-between mb-1.5">
        <p className="text-sm text-secondary">{t('Custom wallet location')}</p>
        <button
-          className="text-sm underline"
+          className="text-sm text-muted"
          onClick={() => setUrlInputExpanded(false)}
        >
-          <VegaIcon name={VegaIconNames.ARROW_LEFT} /> {t('Go back')}
+          <VegaIcon name={VegaIconNames.ARROW_LEFT} />{' '}
+          <span className="underline underline-offset-4">{t('Go back')}</span>
        </button>
      </div>
      <TradingFormGroup
@ -612,18 +611,20 @@ const CustomUrlInput = ({
        onClick={() => onSelect('jsonRpc')}
      />
      {isDesktopWalletRunning !== null && (
-        <p className="pt-1 mb-2 text-sm leading-tight">
+        <div className="pt-1 mb-2 text-sm">
          {isDesktopWalletRunning ? (
            <button
-              className="underline text-default"
+              className="text-muted"
              onClick={() => setUrlInputExpanded(true)}
              disabled={Boolean(pubKey)}
            >
-              {t('Enter a custom wallet location')}{' '}
+              <span className="underline underline-offset-4">
+                {t('Enter a custom wallet location')}
+              </span>{' '}
              <VegaIcon name={VegaIconNames.ARROW_RIGHT} />
            </button>
          ) : (
-            <>
+            <p className="leading-tight text-muted">
              <span className="text-xs">
                {t(
                  'No running Desktop App/CLI detected. Open your app now to connect or enter a'
@ -636,9 +637,9 @@ const CustomUrlInput = ({
              >
                {t('custom wallet location')}
              </button>
-            </>
+            </p>
          )}
-        </p>
+        </div>
      )}
    </>
  );
--- a/libs/wallet/src/connect-dialog/view-connector-form.tsx
+++ b/libs/wallet/src/connect-dialog/view-connector-form.tsx
@ -88,10 +88,13 @@ export function ViewConnectorForm({
          <div className="flex justify-end">
            <button
              onClick={reset}
-              className="p-2 text-sm underline"
+              className="p-2 text-sm"
              data-testid="back-button"
            >
-              <VegaIcon name={VegaIconNames.ARROW_LEFT} /> {t('Go back')}
+              <VegaIcon name={VegaIconNames.ARROW_LEFT} />{' '}
+              <span className="underline underline-offset-4">
+                {t('Go back')}
+              </span>
            </button>
          </div>
        )}