diff --git a/apps/trading/client-pages/settings/settings.tsx b/apps/trading/client-pages/settings/settings.tsx index cb14ffde2..6a9dd38d0 100644 --- a/apps/trading/client-pages/settings/settings.tsx +++ b/apps/trading/client-pages/settings/settings.tsx @@ -36,7 +36,11 @@ export const Settings = () => { /> - + diff --git a/apps/trading/components/constants.ts b/apps/trading/components/constants.ts index 5a41d2910..3aa00c63d 100644 --- a/apps/trading/components/constants.ts +++ b/apps/trading/components/constants.ts @@ -1,6 +1,6 @@ import { t } from '@vegaprotocol/i18n'; export const THROTTLE_UPDATE_TIME = 500; -export const RISK_ACCEPTED_KEY = 'vega-risk-accepted'; +export const RISK_ACCEPTED_KEY = 'vega_risk_accepted'; export const MAINNET_WELCOME_HEADER = t( 'Trade cash settled futures on the fully decentralised Vega network.' ); diff --git a/apps/trading/components/welcome-dialog/risk-notice-dialog.spec.tsx b/apps/trading/components/welcome-dialog/risk-notice-dialog.spec.tsx index 9b476130b..c4a9af049 100644 --- a/apps/trading/components/welcome-dialog/risk-notice-dialog.spec.tsx +++ b/apps/trading/components/welcome-dialog/risk-notice-dialog.spec.tsx @@ -1,9 +1,6 @@ -import { BrowserRouter } from 'react-router-dom'; import { render, screen, fireEvent } from '@testing-library/react'; -import { MockedProvider } from '@apollo/client/testing'; import { Networks, useEnvironment } from '@vegaprotocol/environment'; import { RiskNoticeDialog } from './risk-notice-dialog'; -import { WelcomeDialog } from './welcome-dialog'; jest.mock('@vegaprotocol/environment'); @@ -14,7 +11,6 @@ const mockEnvDefinitions = { }; describe('Risk notice dialog', () => { - const introText = 'Regulation may apply to use of this app'; const mockOnClose = jest.fn(); afterEach(() => { jest.clearAllMocks(); @@ -22,13 +18,12 @@ describe('Risk notice dialog', () => { it.each` assertion | network - ${'displays'} | ${Networks.MAINNET} ${'displays'} | ${Networks.CUSTOM} ${'displays'} | ${Networks.DEVNET} ${'displays'} | ${Networks.STAGNET3} ${'displays'} | ${Networks.TESTNET} `( - '$assertion the risk notice on $network', + '$assertion a generic message on $network', async ({ assertion, network }) => { // @ts-ignore ignore mock implementation useEnvironment.mockImplementation(() => ({ @@ -36,27 +31,37 @@ describe('Risk notice dialog', () => { VEGA_ENV: network, })); - render( - - - , - { wrapper: BrowserRouter } - ); + render(); - expect(screen.queryByText(introText)).toBeInTheDocument(); + expect( + screen.getByText( + new RegExp( + `This application for trading on Vega is connected to ${network}` + ) + ) + ).toBeInTheDocument(); + + const button = screen.getByRole('button', { + name: 'Continue', + }); + fireEvent.click(button); + expect(mockOnClose).toHaveBeenCalled(); } ); - it("doesn't display the risk notice when previously acknowledged", () => { + it('displays a risk message for mainnet', () => { + const introText = 'Regulation may apply to use of this app'; + const network = Networks.MAINNET; + // @ts-ignore ignore mock implementation useEnvironment.mockImplementation(() => ({ ...mockEnvDefinitions, - VEGA_ENV: Networks.MAINNET, + VEGA_ENV: network, })); - render(); + render(); - expect(screen.queryByText(introText)).toBeInTheDocument(); + expect(screen.getByText(introText)).toBeInTheDocument(); const button = screen.getByRole('button', { name: 'I understand, Continue', diff --git a/apps/trading/components/welcome-dialog/risk-notice-dialog.tsx b/apps/trading/components/welcome-dialog/risk-notice-dialog.tsx index 6c5531b2b..57e9bda43 100644 --- a/apps/trading/components/welcome-dialog/risk-notice-dialog.tsx +++ b/apps/trading/components/welcome-dialog/risk-notice-dialog.tsx @@ -1,25 +1,100 @@ -import { useCallback } from 'react'; import { t } from '@vegaprotocol/i18n'; -import { Button } from '@vegaprotocol/ui-toolkit'; -import { LocalStorage } from '@vegaprotocol/utils'; +import { + Button, + Link, + VegaIcon, + VegaIconNames, +} from '@vegaprotocol/ui-toolkit'; import { RISK_ACCEPTED_KEY } from '../constants'; import { TelemetryApproval } from './telemetry-approval'; +import { Networks, useEnvironment } from '@vegaprotocol/environment'; +import { useLocalStorage } from '@vegaprotocol/react-helpers'; interface Props { onClose: () => void; + network: Networks; } -export const RiskNoticeDialog = ({ onClose }: Props) => { - const handleAcceptRisk = useCallback(() => { - onClose(); - LocalStorage.setItem(RISK_ACCEPTED_KEY, 'true'); - }, [onClose]); +export const RiskNoticeDialog = ({ onClose, network }: Props) => { + const [, setValue] = useLocalStorage(RISK_ACCEPTED_KEY); + const handleAcceptRisk = () => { + onClose(); + setValue('true'); + }; + + return ( + <> + {network === Networks.MAINNET ? ( + + ) : ( + + )} +
+ +
+ + + ); +}; + +const TestnetContent = ({ network }: { network: Networks }) => { + const { VEGA_DOCS_URL, GITHUB_FEEDBACK_URL, VEGA_WALLET_URL } = + useEnvironment(); + return ( + <> +

+ {t( + 'This application for trading on Vega is connected to %s, meaning you are free to try out trading with virtual assets and no risk.', + [network] + )} +

+

+ {t( + 'Your Vega wallet must also be connected to %s, and your Ethereum wallet must be connected to Sepolia.', + [network] + )} +

+ {VEGA_DOCS_URL && GITHUB_FEEDBACK_URL && VEGA_WALLET_URL && ( +
    +
  • + + {t('Learn about Vega wallet')}{' '} + + +
  • +
  • + + {t('View documentation')}{' '} + + +
  • +
  • + + {t('Provide feedback')}{' '} + + +
  • +
+ )} + + ); +}; + +const MainnetContent = () => { return ( <>

{t('Regulation may apply to use of this app')}

-

+

{t( 'This decentralised application allows you to connect to and use publicly available blockchain services operated by third parties that may include trading, financial products, or other services that may be subject to legal and regulatory restrictions in your jurisdiction. This application is a front end only and does not hold any funds or provide any products or services. It is available to anyone with an internet connection via IPFS and other methods, and the ability to access it does not imply any right to use any services or that it is legal for you to do so. By using this application you accept that it is your responsibility to ensure that your use of the application and any blockchain services accessed through it is compliant with applicable laws and regulations in your jusrisdiction.' )} @@ -27,15 +102,11 @@ export const RiskNoticeDialog = ({ onClose }: Props) => {

{t('Technical and financial risk of loss')}

-

+

{t( 'The public blockchain services accessible via this decentralised application are operated by third parties and may carry significant risks including the potential loss of all funds that you deposit or hold with these services. Technical risks include the risk of loss in the event of the failure or compromise of the public blockchain infrastructure or smart contracts that provide any services you use. Financial risks include but are not limited to losses due to volatility, excessive leverage, low liquidity, and your own lack of understanding of the services you use. By using this decentralised application you accept that it is your responsibility to ensure that you understand any services you use and the technical and financial risks inherent in your use. Do not risk what you cannot afford to lose.' )}

- -
- -
); }; diff --git a/apps/trading/components/welcome-dialog/telemetry-approval.spec.tsx b/apps/trading/components/welcome-dialog/telemetry-approval.spec.tsx index dc5ff93a9..3061845aa 100644 --- a/apps/trading/components/welcome-dialog/telemetry-approval.spec.tsx +++ b/apps/trading/components/welcome-dialog/telemetry-approval.spec.tsx @@ -3,7 +3,8 @@ import { TelemetryApproval } from './telemetry-approval'; describe('TelemetryApproval', () => { it('click on checkbox should be properly handled', () => { - render(); + const helpText = 'My help text'; + render(); expect(screen.getByRole('checkbox')).toHaveAttribute( 'data-state', 'unchecked' @@ -15,5 +16,7 @@ describe('TelemetryApproval', () => { 'data-state', 'checked' ); + expect(screen.getByText('Share usage data')).toBeInTheDocument(); + expect(screen.getByText(helpText)).toBeInTheDocument(); }); }); diff --git a/apps/trading/components/welcome-dialog/telemetry-approval.tsx b/apps/trading/components/welcome-dialog/telemetry-approval.tsx index e4464418e..4dbee1cfe 100644 --- a/apps/trading/components/welcome-dialog/telemetry-approval.tsx +++ b/apps/trading/components/welcome-dialog/telemetry-approval.tsx @@ -2,11 +2,7 @@ import { Checkbox } from '@vegaprotocol/ui-toolkit'; import { t } from '@vegaprotocol/i18n'; import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval'; -export const TelemetryApproval = ({ - isSettingsPage, -}: { - isSettingsPage?: boolean; -}) => { +export const TelemetryApproval = ({ helpText }: { helpText: string }) => { const [isApproved, setIsApproved] = useTelemetryApproval(); return (
@@ -19,13 +15,7 @@ export const TelemetryApproval = ({ />
- - {t( - 'Help identify bugs and improve the service by sharing anonymous usage data.' - )} - {!isSettingsPage && - ' ' + t('You can change this in your settings at any time.')} - + {helpText}
); diff --git a/apps/trading/components/welcome-dialog/welcome-dialog.tsx b/apps/trading/components/welcome-dialog/welcome-dialog.tsx index 722f02c1a..dd48ed2eb 100644 --- a/apps/trading/components/welcome-dialog/welcome-dialog.tsx +++ b/apps/trading/components/welcome-dialog/welcome-dialog.tsx @@ -9,8 +9,11 @@ import { RiskNoticeDialog } from './risk-notice-dialog'; import { WelcomeNoticeDialog } from './welcome-notice-dialog'; import { WelcomeLandingDialog } from './welcome-landing-dialog'; import { useGlobalStore } from '../../stores'; +import { useEnvironment } from '@vegaprotocol/environment'; +import { Networks } from '@vegaprotocol/environment'; export const WelcomeDialog = () => { + const { VEGA_ENV } = useEnvironment(); const { pathname } = useLocation(); let dialogContent: React.ReactNode; let title = ''; @@ -33,8 +36,10 @@ export const WelcomeDialog = () => { }, [update, isRiskDialogNeeded]); if (isRiskDialogNeeded) { - dialogContent = ; - title = t('WARNING'); + dialogContent = ( + + ); + title = VEGA_ENV === Networks.MAINNET ? t('WARNING') : t('Vega Console'); size = 'medium'; } else if (isWelcomeDialogNeeded && data?.length === 0) { dialogContent = ;