diff --git a/apps/trading/components/welcome-dialog/get-started.spec.tsx b/apps/trading/components/welcome-dialog/get-started.spec.tsx
index 01ff2dbdf..3f5c12462 100644
--- 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(
-
-
-
-
-
- );
+ const { rerender, container } = renderComponent();
checkTicks(screen.getAllByRole('listitem'));
expect(screen.getByRole('button', { name: 'Connect' })).toBeInTheDocument();
@@ -93,7 +83,9 @@ describe('GetStarted', () => {
);
checkTicks(screen.getAllByRole('listitem'));
- expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument();
+ expect(
+ screen.getByRole('button', { name: 'Ready to trade' })
+ ).toBeInTheDocument();
mockStep = 5;
rerender(
diff --git a/apps/trading/components/welcome-dialog/get-started.tsx b/apps/trading/components/welcome-dialog/get-started.tsx
index 9b6480ba5..086fdc58e 100644
--- 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 (
-
- );
- } 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) => {
OnboardingStep.ONBOARDING_WALLET_STEP}
- />
- OnboardingStep.ONBOARDING_CONNECT_STEP || pubKey
)}
/>
OnboardingStep.ONBOARDING_DEPOSIT_STEP}
/>
OnboardingStep.ONBOARDING_ORDER_STEP}
/>
diff --git a/apps/trading/components/welcome-dialog/use-get-onboarding-step.spec.tsx b/apps/trading/components/welcome-dialog/use-get-onboarding-step.spec.tsx
index 3c2e6d30f..d53272614 100644
--- 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 = { 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 };
});
diff --git a/apps/trading/components/welcome-dialog/use-get-onboarding-step.ts b/apps/trading/components/welcome-dialog/use-get-onboarding-step.ts
index 741def751..66adb9553 100644
--- 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;
};
diff --git a/libs/ui-toolkit/src/components/trading-button/trading-button.tsx b/libs/ui-toolkit/src/components/trading-button/trading-button.tsx
index add985aba..48c6ac9b2 100644
--- 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) => (
<>
-
+
{children}
{icon}
diff --git a/libs/wallet/src/connect-dialog/connect-dialog.tsx b/libs/wallet/src/connect-dialog/connect-dialog.tsx
index ab8050183..f96e5ecee 100644
--- 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'
)}
-
-
- {isBrowserWalletInstalled() ? (
-
onSelect('injected')}
- title={
- <>
- {t('Vega Wallet')}
- {' '}
- {t('full featured')}
- >
- }
- description={t(
- `Connect Vega Wallet extension
+
+ {isBrowserWalletInstalled() ? (
+
onSelect('injected')}
+ title={
+ <>
+ {t('Vega Wallet')}
+ {' '}
+ {t('full featured')}
+ >
+ }
+ description={t(
+ `Connect Vega Wallet extension
+ for %s to access all features including key
+ management and detailed transaction views from your
+ browser.`,
+ [browserName]
+ )}
+ />
+ ) : (
+
+
+ {t('Vega Wallet')}
+ {' '}
+ {t('full featured')}
+
+
+ {t(
+ `Install Vega Wallet extension
for %s to access all features including key
management and detailed transaction views from your
browser.`,
[browserName]
)}
+
+
- ) : (
-
-
- {t('Vega Wallet')}
- {' '}
- {t('full featured')}
-
-
- {t(
- `Install Vega Wallet extension
- for %s to access all features including key
- management and detailed transaction views from your
- browser.`,
- [browserName]
- )}
-
-
-
- )}
-
+
+ )}
{connectors['snap'] !== undefined ? (
{snapStatus === SnapStatus.INSTALLED ? (
@@ -335,7 +333,7 @@ const ConnectorList = ({
}}
/>
{snapStatus === SnapStatus.NOT_SUPPORTED ? (
-
+
{t('No MetaMask version that supports snaps detected.')}{' '}
{t('Learn more about')}{' '}
@@ -348,7 +346,7 @@ const ConnectorList = ({
) : null}
-
{t('Advanced / Other options...')}
+
{t('Advanced / Other options...')}
{title}
- {description}
+ {description}
{t('Custom wallet location')}
setUrlInputExpanded(false)}
>
- {t('Go back')}
+ {' '}
+ {t('Go back')}
onSelect('jsonRpc')}
/>
{isDesktopWalletRunning !== null && (
-
+
{isDesktopWalletRunning ? (
setUrlInputExpanded(true)}
disabled={Boolean(pubKey)}
>
- {t('Enter a custom wallet location')}{' '}
+
+ {t('Enter a custom wallet location')}
+ {' '}
) : (
- <>
+
{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')}
- >
+
)}
-
+
)}
>
);
diff --git a/libs/wallet/src/connect-dialog/view-connector-form.tsx b/libs/wallet/src/connect-dialog/view-connector-form.tsx
index 736e0ead7..4f3c8a791 100644
--- 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({
- {t('Go back')}
+ {' '}
+
+ {t('Go back')}
+
)}