diff --git a/apps/governance/src/routes/proposals/proposal/proposal-container.spec.tsx b/apps/governance/src/routes/proposals/proposal/proposal-container.spec.tsx index 09de480a4..e05f54571 100644 --- a/apps/governance/src/routes/proposals/proposal/proposal-container.spec.tsx +++ b/apps/governance/src/routes/proposals/proposal/proposal-container.spec.tsx @@ -6,6 +6,11 @@ import { MockedProvider } from '@apollo/client/testing'; import { MemoryRouter, Route, Routes } from 'react-router-dom'; import { ProposalDocument } from './__generated__/Proposal'; +jest.mock('@vegaprotocol/data-provider', () => ({ + ...jest.requireActual('@vegaprotocol/data-provider'), + useDataProvider: jest.fn(() => ({ data: [], loading: false })), +})); + jest.mock('../components/proposal', () => ({ Proposal: () =>
, })); diff --git a/apps/trading/components/welcome-dialog/get-started.tsx b/apps/trading/components/welcome-dialog/get-started.tsx index faa825cf2..1b14435e1 100644 --- a/apps/trading/components/welcome-dialog/get-started.tsx +++ b/apps/trading/components/welcome-dialog/get-started.tsx @@ -27,8 +27,8 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => { const dismiss = useOnboardingStore((store) => store.dismiss); const setDialogOpen = useOnboardingStore((store) => store.setDialogOpen); const marketId = useGlobalStore((store) => store.marketId); - const openVegaWalletDialog = useVegaWalletDialogStore( - (store) => store.openVegaWalletDialog + const setWalletDialogOpen = useOnboardingStore( + (store) => store.setWalletDialogOpen ); const setViews = useSidebar((store) => store.setViews); @@ -40,7 +40,7 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => { if (step <= OnboardingStep.ONBOARDING_CONNECT_STEP) { return ( - openVegaWalletDialog()}> + setWalletDialogOpen(true)}> {t('Connect')} ); @@ -70,7 +70,7 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => { } return ( - openVegaWalletDialog()}> + setWalletDialogOpen(true)}> {t('Get started')} ); 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 3f90fa82b..46ad65d8e 100644 --- a/apps/trading/components/welcome-dialog/use-get-onboarding-step.ts +++ b/apps/trading/components/welcome-dialog/use-get-onboarding-step.ts @@ -12,16 +12,20 @@ import { useGlobalStore } from '../../stores'; const ONBOARDING_STORAGE_KEY = 'vega_onboarding'; export const useOnboardingStore = create<{ dialogOpen: boolean; + walletDialogOpen: boolean; dismissed: boolean; dismiss: () => void; setDialogOpen: (isOpen: boolean) => void; + setWalletDialogOpen: (isOpen: boolean) => void; }>()( persist( (set) => ({ dialogOpen: true, + walletDialogOpen: false, dismissed: false, dismiss: () => set({ dismissed: true }), setDialogOpen: (isOpen) => set({ dialogOpen: isOpen }), + setWalletDialogOpen: (isOpen) => set({ walletDialogOpen: isOpen }), }), { name: ONBOARDING_STORAGE_KEY, diff --git a/apps/trading/components/welcome-dialog/welcome-dialog.tsx b/apps/trading/components/welcome-dialog/welcome-dialog.tsx index 0e40e7333..340bd0e7f 100644 --- a/apps/trading/components/welcome-dialog/welcome-dialog.tsx +++ b/apps/trading/components/welcome-dialog/welcome-dialog.tsx @@ -3,30 +3,54 @@ import { t } from '@vegaprotocol/i18n'; import { useEnvironment } from '@vegaprotocol/environment'; import { WelcomeDialogContent } from './welcome-dialog-content'; import { useOnboardingStore } from './use-get-onboarding-step'; +import { VegaConnectDialog } from '@vegaprotocol/wallet'; +import { Connectors } from '../../lib/vega-connectors'; +import { RiskMessage } from './risk-message'; export const WelcomeDialog = () => { const { VEGA_ENV } = useEnvironment(); const dismissed = useOnboardingStore((store) => store.dismissed); const dialogOpen = useOnboardingStore((store) => store.dialogOpen); const dismiss = useOnboardingStore((store) => store.dismiss); + const walletDialogOpen = useOnboardingStore( + (store) => store.walletDialogOpen + ); + const setWalletDialogOpen = useOnboardingStore( + (store) => store.setWalletDialogOpen + ); + + const content = walletDialogOpen ? ( + } + onClose={() => setWalletDialogOpen(false)} + contentOnly + /> + ) : ( + + ); + + const onClose = walletDialogOpen ? () => setWalletDialogOpen(false) : dismiss; + + const title = walletDialogOpen ? null : ( + + {t('Console')}{' '} + + {VEGA_ENV} + + + ); return ( - {t('Console')}{' '} - - {VEGA_ENV} - - - } + title={title} size="medium" - onChange={() => dismiss()} + onChange={onClose} intent={Intent.None} dataTestId="welcome-dialog" > - + {content} ); }; diff --git a/libs/wallet/src/connect-dialog/connect-dialog.tsx b/libs/wallet/src/connect-dialog/connect-dialog.tsx index ab10380ae..9fb81a5d9 100644 --- a/libs/wallet/src/connect-dialog/connect-dialog.tsx +++ b/libs/wallet/src/connect-dialog/connect-dialog.tsx @@ -50,11 +50,15 @@ export type WalletType = 'injected' | 'jsonRpc' | 'view' | 'snap'; export interface VegaConnectDialogProps { connectors: Connectors; riskMessage?: ReactNode; + contentOnly?: boolean; + onClose?: () => void; } export const VegaConnectDialog = ({ connectors, riskMessage, + contentOnly, + onClose, }: VegaConnectDialogProps) => { const { disconnect, acknowledgeNeeded } = useVegaWallet(); const vegaWalletDialogOpen = useVegaWalletDialogStore( @@ -80,19 +84,24 @@ export const VegaConnectDialog = ({ // This value will already be in the cache, if it failed the app wont render const { data } = useChainIdQuery(); + const content = data && ( + + ); + if (contentOnly) { + return content; + } return ( - {data && ( - - )} + {content} ); }; @@ -101,15 +110,20 @@ const ConnectDialogContainer = ({ connectors, appChainId, riskMessage, + onClose, }: { connectors: Connectors; appChainId: string; riskMessage?: ReactNode; + onClose?: () => void; }) => { const { vegaUrl, vegaWalletServiceUrl } = useVegaWallet(); - const closeDialog = useVegaWalletDialogStore( + const closeVegaWalletDialog = useVegaWalletDialogStore( (store) => store.closeVegaWalletDialog ); + const closeDialog = useCallback(() => { + onClose ? onClose() : closeVegaWalletDialog(); + }, [closeVegaWalletDialog, onClose]); const [selectedConnector, setSelectedConnector] = useState(); const [walletUrl, setWalletUrl] = useState(vegaWalletServiceUrl); @@ -254,7 +268,7 @@ const ConnectorList = ({ } description={t( - `Connect Vega Wallet extension + `Connect with Vega Wallet extension for %s to access all features including key management and detailed transaction views from your browser.`, @@ -286,8 +300,18 @@ const ConnectorList = ({ {connectors['snap'] !== undefined ? (
{snapStatus === SnapStatus.INSTALLED ? ( - + {t('Metamask Snap')} + {' '} + {t('quick start')} + + } + description={t( + `Connect directly via Metamask with the Vega Snap for single key support without advanced features.` + )} text={ <>
@@ -315,7 +339,7 @@ const ConnectorList = ({ } description={t( - `Connect directly via Metamask with the Vega Snap for single key support without advanced features.` + `Install Metamask with the Vega Snap for single key support without advanced features.` )} text={ <>