vega-frontend-monorepo/apps/trading/components/welcome-dialog/welcome-dialog.tsx
2023-12-12 13:53:20 +01:00

85 lines
2.5 KiB
TypeScript

import { useEffect } from 'react';
import { matchPath, useLocation } from 'react-router-dom';
import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
import { useEnvironment } from '@vegaprotocol/environment';
import { VegaConnectDialog } from '@vegaprotocol/wallet';
import { useConnectors } from '../../lib/vega-connectors';
import { useT } from '../../lib/use-t';
import { Routes } from '../../lib/links';
import { RiskMessage } from './risk-message';
import { WelcomeDialogContent } from './welcome-dialog-content';
import { useOnboardingStore } from './use-get-onboarding-step';
import { ensureSuffix } from '@vegaprotocol/utils';
/**
* A list of paths on which the welcome dialog should be omitted.
*/
const OMIT_ON_LIST = [ensureSuffix(Routes.REFERRALS, '/*')];
export const WelcomeDialog = () => {
const { pathname } = useLocation();
const t = useT();
const { VEGA_ENV } = useEnvironment();
const connectors = useConnectors();
const dismissed = useOnboardingStore((store) => store.dismissed);
const dialogOpen = useOnboardingStore((store) => store.dialogOpen);
const dismiss = useOnboardingStore((store) => store.dismiss);
const setDialogOpen = useOnboardingStore((store) => store.setDialogOpen);
const walletDialogOpen = useOnboardingStore(
(store) => store.walletDialogOpen
);
const setWalletDialogOpen = useOnboardingStore(
(store) => store.setWalletDialogOpen
);
useEffect(() => {
const shouldOmit = OMIT_ON_LIST.map((path) =>
matchPath(path, pathname)
).some((m) => !!m);
if (dismissed || shouldOmit) return;
setDialogOpen(true);
}, [dismissed, pathname, setDialogOpen]);
const content = walletDialogOpen ? (
<VegaConnectDialog
connectors={connectors}
riskMessage={<RiskMessage />}
onClose={() => setWalletDialogOpen(false)}
contentOnly
/>
) : (
<WelcomeDialogContent />
);
const onClose = walletDialogOpen
? () => setWalletDialogOpen(false)
: () => {
setDialogOpen(false);
dismiss();
};
const title = walletDialogOpen ? null : (
<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 (
<Dialog
open={dismissed ? false : dialogOpen}
title={title}
size="medium"
onChange={onClose}
intent={Intent.None}
dataTestId="welcome-dialog"
>
{content}
</Dialog>
);
};