diff --git a/apps/console-lite/src/app/app.tsx b/apps/console-lite/src/app/app.tsx index a5246b845..6f6bf1b6d 100644 --- a/apps/console-lite/src/app/app.tsx +++ b/apps/console-lite/src/app/app.tsx @@ -40,11 +40,7 @@ function App() {
+ onClick={() => { appDispatch({ type: AppStateActionType.SET_VEGA_WALLET_OVERLAY, isOpen: true, - }) - } + }); + openVegaWalletDialog(); + }} > {t('connectVegaWallet')} diff --git a/apps/token/src/components/vega-wallet-dialogs/vega-wallet-dialogs.tsx b/apps/token/src/components/vega-wallet-dialogs/vega-wallet-dialogs.tsx index 007f3f597..2c8ce90cd 100644 --- a/apps/token/src/components/vega-wallet-dialogs/vega-wallet-dialogs.tsx +++ b/apps/token/src/components/vega-wallet-dialogs/vega-wallet-dialogs.tsx @@ -11,8 +11,7 @@ export const VegaWalletDialogs = () => { <> + onChangeOpen={(open) => appDispatch({ type: AppStateActionType.SET_VEGA_WALLET_OVERLAY, isOpen: open, diff --git a/apps/token/src/components/vega-wallet/vega-wallet.tsx b/apps/token/src/components/vega-wallet/vega-wallet.tsx index f92b3d72d..9e7895972 100644 --- a/apps/token/src/components/vega-wallet/vega-wallet.tsx +++ b/apps/token/src/components/vega-wallet/vega-wallet.tsx @@ -22,7 +22,7 @@ import { } from '../wallet-card'; import { DownloadWalletPrompt } from './download-wallet-prompt'; import { usePollForDelegations } from './hooks'; -import { useVegaWallet } from '@vegaprotocol/wallet'; +import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet'; import { Button, ButtonLink } from '@vegaprotocol/ui-toolkit'; export const VegaWallet = () => { @@ -69,16 +69,19 @@ export const VegaWallet = () => { const VegaWalletNotConnected = () => { const { t } = useTranslation(); const { appDispatch } = useAppState(); - + const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({ + openVegaWalletDialog: store.openVegaWalletDialog, + })); return ( <> + onClick={() => { appDispatch({ type: AppStateActionType.SET_VEGA_WALLET_OVERLAY, isOpen: true, - }) - } + }); + openVegaWalletDialog(); + }} fill={true} data-testid="connect-vega" > diff --git a/apps/token/src/routes/governance/components/vote-details/vote-buttons.tsx b/apps/token/src/routes/governance/components/vote-details/vote-buttons.tsx index 5e31a0fe5..cd4cd7562 100644 --- a/apps/token/src/routes/governance/components/vote-details/vote-buttons.tsx +++ b/apps/token/src/routes/governance/components/vote-details/vote-buttons.tsx @@ -14,7 +14,7 @@ import type { VoteButtonsQueryVariables, } from './__generated__/VoteButtonsQuery'; import { VoteState } from './use-user-vote'; -import { useVegaWallet } from '@vegaprotocol/wallet'; +import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet'; import { ProposalState, ProposalUserAction, @@ -84,6 +84,9 @@ export const VoteButtons = ({ const { t } = useTranslation(); const { appDispatch } = useAppState(); const { pubKey } = useVegaWallet(); + const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({ + openVegaWalletDialog: store.openVegaWalletDialog, + })); const [changeVote, setChangeVote] = React.useState(false); const cantVoteUI = React.useMemo(() => { @@ -95,12 +98,13 @@ export const VoteButtons = ({ return ( + onClick={() => { appDispatch({ type: AppStateActionType.SET_VEGA_WALLET_OVERLAY, isOpen: true, - }) - } + }); + openVegaWalletDialog(); + }} > {t('connectVegaWallet')} {' '} @@ -144,6 +148,7 @@ export const VoteButtons = ({ appDispatch, minVoterBalance, spamProtectionMinTokens, + openVegaWalletDialog, ]); function submitVote(vote: VoteValue) { diff --git a/apps/token/src/routes/rewards/home/index.tsx b/apps/token/src/routes/rewards/home/index.tsx index 392d7d5ee..9e0ca2408 100644 --- a/apps/token/src/routes/rewards/home/index.tsx +++ b/apps/token/src/routes/rewards/home/index.tsx @@ -16,7 +16,7 @@ import { } from '../../../contexts/app-state/app-state-context'; import type { Rewards } from './__generated__/Rewards'; import { RewardInfo } from './reward-info'; -import { useVegaWallet } from '@vegaprotocol/wallet'; +import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet'; import { useNetworkParams, NetworkParams } from '@vegaprotocol/react-helpers'; export const REWARDS_QUERY = gql` @@ -67,6 +67,9 @@ export const REWARDS_QUERY = gql` export const RewardsIndex = () => { const { t } = useTranslation(); const { pubKey, pubKeys } = useVegaWallet(); + const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({ + openVegaWalletDialog: store.openVegaWalletDialog, + })); const { appDispatch } = useAppState(); const { data, loading, error } = useQuery(REWARDS_QUERY, { variables: { partyId: pubKey }, @@ -147,12 +150,13 @@ export const RewardsIndex = () => { + onClick={() => { appDispatch({ type: AppStateActionType.SET_VEGA_WALLET_OVERLAY, isOpen: true, - }) - } + }); + openVegaWalletDialog(); + }} > {t('connectVegaWallet')} diff --git a/apps/trading-e2e/.env b/apps/trading-e2e/.env index 63256d867..da2779e57 100644 --- a/apps/trading-e2e/.env +++ b/apps/trading-e2e/.env @@ -1,2 +1,2 @@ NX_VEGA_WALLET_URL=http://localhost:1789 -CYPRESS_VEGA_URL=https://api.n06.testnet.vega.xyz/graphql \ No newline at end of file +CYPRESS_VEGA_URL=https://api.n06.testnet.vega.xyz/graphql diff --git a/apps/trading/components/navbar/navbar.tsx b/apps/trading/components/navbar/navbar.tsx index b005476a7..28665a8bb 100644 --- a/apps/trading/components/navbar/navbar.tsx +++ b/apps/trading/components/navbar/navbar.tsx @@ -15,9 +15,8 @@ interface NavbarProps { } export const Navbar = ({ theme, toggleTheme }: NavbarProps) => { - const { marketId, update } = useGlobalStore((store) => ({ + const { marketId } = useGlobalStore((store) => ({ marketId: store.marketId, - update: store.update, })); const [tradingPath, setTradingPath] = useState('/markets'); useEffect(() => { @@ -42,9 +41,7 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => { - update({ connectDialog: open })} - /> + ); diff --git a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.spec.tsx b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.spec.tsx index 678fac3f4..619880af6 100644 --- a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.spec.tsx +++ b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.spec.tsx @@ -1,49 +1,49 @@ import { fireEvent, render, screen } from '@testing-library/react'; import { VegaWalletContext } from '@vegaprotocol/wallet'; import type { VegaWalletContextShape } from '@vegaprotocol/wallet'; -import type { VegaWalletConnectButtonProps } from './vega-wallet-connect-button'; import { VegaWalletConnectButton } from './vega-wallet-connect-button'; import { truncateByChars } from '@vegaprotocol/react-helpers'; -let props: VegaWalletConnectButtonProps; +const mockUpdateDialogOpen = jest.fn(); +jest.mock('@vegaprotocol/wallet', () => ({ + ...jest.requireActual('@vegaprotocol/wallet'), + useVegaWalletDialogStore: () => ({ + openVegaWalletDialog: mockUpdateDialogOpen, + }), +})); beforeEach(() => { - props = { - setConnectDialog: jest.fn(), - }; + jest.clearAllMocks(); }); -const generateJsx = ( - context: VegaWalletContextShape, - props: VegaWalletConnectButtonProps -) => { +const generateJsx = (context: VegaWalletContextShape) => { return ( - + ); }; it('Not connected', () => { - render(generateJsx({ pubKey: null } as VegaWalletContextShape, props)); + render(generateJsx({ pubKey: null } as VegaWalletContextShape)); const button = screen.getByRole('button'); expect(button).toHaveTextContent('Connect Vega wallet'); fireEvent.click(button); - expect(props.setConnectDialog).toHaveBeenCalledWith(true); + expect(mockUpdateDialogOpen).toHaveBeenCalled(); }); it('Connected', () => { const pubKey = { publicKey: '123456__123456', name: 'test' }; render( - generateJsx( - { pubKey: pubKey.publicKey, pubKeys: [pubKey] } as VegaWalletContextShape, - props - ) + generateJsx({ + pubKey: pubKey.publicKey, + pubKeys: [pubKey], + } as VegaWalletContextShape) ); const button = screen.getByRole('button'); expect(button).toHaveTextContent(truncateByChars(pubKey.publicKey)); fireEvent.click(button); - expect(props.setConnectDialog).not.toHaveBeenCalled(); + expect(mockUpdateDialogOpen).not.toHaveBeenCalled(); }); diff --git a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx index b86b02ecf..c31eb33a0 100644 --- a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx +++ b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx @@ -10,18 +10,15 @@ import { DropdownMenuTrigger, Icon, } from '@vegaprotocol/ui-toolkit'; -import { useVegaWallet } from '@vegaprotocol/wallet'; +import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet'; import { useEffect, useMemo, useState } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; -export interface VegaWalletConnectButtonProps { - setConnectDialog: (isOpen: boolean) => void; -} - -export const VegaWalletConnectButton = ({ - setConnectDialog, -}: VegaWalletConnectButtonProps) => { +export const VegaWalletConnectButton = () => { const [dropdownOpen, setDropdownOpen] = useState(false); + const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({ + openVegaWalletDialog: store.openVegaWalletDialog, + })); const { pubKey, pubKeys, selectPubKey, disconnect } = useVegaWallet(); const isConnected = pubKey !== null; @@ -64,7 +61,7 @@ export const VegaWalletConnectButton = ({ return ( setConnectDialog(true)} + onClick={openVegaWalletDialog} size="sm" > {t('Connect Vega wallet')} diff --git a/apps/trading/components/vega-wallet-container/vega-wallet-container.tsx b/apps/trading/components/vega-wallet-container/vega-wallet-container.tsx index 4db57d2f7..14e1f3b59 100644 --- a/apps/trading/components/vega-wallet-container/vega-wallet-container.tsx +++ b/apps/trading/components/vega-wallet-container/vega-wallet-container.tsx @@ -1,15 +1,16 @@ import type { ReactNode } from 'react'; import { t } from '@vegaprotocol/react-helpers'; import { Button, Splash } from '@vegaprotocol/ui-toolkit'; -import { useVegaWallet } from '@vegaprotocol/wallet'; -import { useGlobalStore } from '../../stores'; +import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet'; interface VegaWalletContainerProps { children: ReactNode; } export const VegaWalletContainer = ({ children }: VegaWalletContainerProps) => { - const { update } = useGlobalStore((store) => ({ update: store.update })); + const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({ + openVegaWalletDialog: store.openVegaWalletDialog, + })); const { pubKey } = useVegaWallet(); if (!pubKey) { @@ -20,7 +21,7 @@ export const VegaWalletContainer = ({ children }: VegaWalletContainerProps) => { {t('Connect your Vega wallet')} update({ connectDialog: true })} + onClick={openVegaWalletDialog} data-testid="vega-wallet-connect" > {t('Connect')} diff --git a/apps/trading/pages/_app.page.tsx b/apps/trading/pages/_app.page.tsx index e1a4079a1..0a8dc0915 100644 --- a/apps/trading/pages/_app.page.tsx +++ b/apps/trading/pages/_app.page.tsx @@ -2,35 +2,23 @@ import type { AppProps } from 'next/app'; import Head from 'next/head'; import { Navbar } from '../components/navbar'; import { t, ThemeContext, useThemeSwitcher } from '@vegaprotocol/react-helpers'; -import { VegaConnectDialog, VegaWalletProvider } from '@vegaprotocol/wallet'; +import { VegaWalletProvider } from '@vegaprotocol/wallet'; import { EnvironmentProvider, envTriggerMapping, useEnvironment, } from '@vegaprotocol/environment'; -import { Connectors } from '../lib/vega-connectors'; import { AppLoader } from '../components/app-loader'; -import { RiskNoticeDialog } from '../components/risk-notice-dialog'; import './styles.css'; -import { useGlobalStore } from '../stores'; -import { - AssetDetailsDialog, - useAssetDetailsDialogStore, -} from '@vegaprotocol/assets'; +import { usePageTitleStore } from '../stores'; import { Footer } from '../components/footer'; import { useMemo } from 'react'; +import DialogsContainer from './dialogs-container'; const DEFAULT_TITLE = t('Welcome to Vega trading!'); -function AppBody({ Component, pageProps }: AppProps) { - const { connectDialog, update } = useGlobalStore((store) => ({ - connectDialog: store.connectDialog, - update: store.update, - })); - const { isOpen, symbol, trigger, setOpen } = useAssetDetailsDialogStore(); - const [theme, toggleTheme] = useThemeSwitcher(); - - const { pageTitle } = useGlobalStore((store) => ({ +const Title = () => { + const { pageTitle } = usePageTitleStore((store) => ({ pageTitle: store.pageTitle, })); @@ -42,32 +30,26 @@ function AppBody({ Component, pageProps }: AppProps) { if (networkName) return `${pageTitle} [${networkName}]`; return pageTitle; }, [pageTitle, networkName]); + return ( + + {title} + + ); +}; +function AppBody({ Component, pageProps }: AppProps) { + const [theme, toggleTheme] = useThemeSwitcher(); return ( - - {title} - + - {/* @ts-ignore conflict between @types/react and nextjs internal types */} - update({ connectDialog: open })} - /> - - + diff --git a/apps/trading/pages/dialogs-container.tsx b/apps/trading/pages/dialogs-container.tsx new file mode 100644 index 000000000..06dd2e1bc --- /dev/null +++ b/apps/trading/pages/dialogs-container.tsx @@ -0,0 +1,25 @@ +import { + AssetDetailsDialog, + useAssetDetailsDialogStore, +} from '@vegaprotocol/assets'; +import { VegaConnectDialog } from '@vegaprotocol/wallet'; +import { Connectors } from '../lib/vega-connectors'; +import { RiskNoticeDialog } from '../components/risk-notice-dialog'; + +const DialogsContainer = () => { + const { isOpen, symbol, trigger, setOpen } = useAssetDetailsDialogStore(); + return ( + <> + + + + > + ); +}; + +export default DialogsContainer; diff --git a/apps/trading/pages/index.page.tsx b/apps/trading/pages/index.page.tsx index 754c1c4ac..4f9182b09 100644 --- a/apps/trading/pages/index.page.tsx +++ b/apps/trading/pages/index.page.tsx @@ -7,7 +7,7 @@ import { import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; import { useRouter } from 'next/router'; import { useEffect } from 'react'; -import { useGlobalStore } from '../stores'; +import { useGlobalStore, usePageTitleStore } from '../stores'; export function Index() { const { replace } = useRouter(); @@ -21,6 +21,11 @@ export function Index() { update: store.update, })); + const { pageTitle, updateTitle } = usePageTitleStore((store) => ({ + pageTitle: store.pageTitle, + updateTitle: store.updateTitle, + })); + useEffect(() => { update({ landingDialog: true }); @@ -33,18 +38,21 @@ export function Index() { data[0]?.decimalPlaces ) : null; - const pageTitle = titlefy([marketName, marketPrice]); + const newPageTitle = titlefy([marketName, marketPrice]); if (marketId) { replace(`/markets/${marketId}`); - update({ marketId, pageTitle }); + update({ marketId }); + if (pageTitle !== newPageTitle) { + updateTitle(newPageTitle); + } } // Fallback to the markets list page else { replace('/markets'); } } - }, [data, replace, riskNoticeDialog, update]); + }, [data, replace, riskNoticeDialog, update, pageTitle, updateTitle]); return ( diff --git a/apps/trading/pages/markets/[marketId].page.tsx b/apps/trading/pages/markets/[marketId].page.tsx index 4d801260b..f7695cae7 100644 --- a/apps/trading/pages/markets/[marketId].page.tsx +++ b/apps/trading/pages/markets/[marketId].page.tsx @@ -16,7 +16,7 @@ import type { MarketDataUpdateFieldsFragment, } from '@vegaprotocol/market-list'; import { marketProvider, marketDataProvider } from '@vegaprotocol/market-list'; -import { useGlobalStore } from '../../stores'; +import { useGlobalStore, usePageTitleStore } from '../../stores'; import { TradeGrid, TradePanels } from './trade-grid'; import { ColumnKind, SelectMarketDialog } from '../../components/select-market'; @@ -40,18 +40,17 @@ const MarketPage = ({ }) => { const { query, push } = useRouter(); const { w } = useWindowSize(); - const { - landingDialog, - riskNoticeDialog, - update, - updateTitle, - updateMarketId, - } = useGlobalStore((store) => ({ - landingDialog: store.landingDialog, - riskNoticeDialog: store.riskNoticeDialog, - update: store.update, + const { landingDialog, riskNoticeDialog, update } = useGlobalStore( + (store) => ({ + landingDialog: store.landingDialog, + riskNoticeDialog: store.riskNoticeDialog, + update: store.update, + }) + ); + + const { pageTitle, updateTitle } = usePageTitleStore((store) => ({ + pageTitle: store.pageTitle, updateTitle: store.updateTitle, - updateMarketId: store.updateMarketId, })); const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore(); @@ -63,11 +62,11 @@ const MarketPage = ({ const onSelect = useCallback( (id: string) => { if (id && id !== marketId) { - updateMarketId(id); + update({ marketId: id }); push(`/markets/${id}`); } }, - [marketId, updateMarketId, push] + [marketId, update, push] ); const variables = useMemo( @@ -86,20 +85,22 @@ const MarketPage = ({ skip: !marketId, }); + const marketName = data?.tradableInstrument.instrument.name; const updateProvider = useCallback( ({ data: marketData }: { data: MarketData }) => { - const marketName = data?.tradableInstrument.instrument.name; const marketPrice = calculatePrice( marketData.markPrice, data?.decimalPlaces ); if (marketName) { - const pageTitle = titlefy([marketName, marketPrice]); - updateTitle(pageTitle); + const newPageTitle = titlefy([marketName, marketPrice]); + if (pageTitle !== newPageTitle) { + updateTitle(newPageTitle); + } } return true; }, - [updateTitle, data?.tradableInstrument.instrument.name, data?.decimalPlaces] + [updateTitle, pageTitle, marketName, data?.decimalPlaces] ); useDataProvider({ @@ -110,6 +111,16 @@ const MarketPage = ({ updateOnInit: true, }); + const tradeView = useMemo(() => { + if (!data) { + return null; + } + if (w > 960) { + return ; + } + return ; + }, [w, data, onSelect]); + if (!marketId) { return ( @@ -129,11 +140,7 @@ const MarketPage = ({ } return ( <> - {w > 960 ? ( - - ) : ( - - )} + {tradeView} diff --git a/apps/trading/pages/markets/index.page.tsx b/apps/trading/pages/markets/index.page.tsx index f38f47d70..5e6ccf97b 100644 --- a/apps/trading/pages/markets/index.page.tsx +++ b/apps/trading/pages/markets/index.page.tsx @@ -1,16 +1,19 @@ import { useRouter } from 'next/router'; import { MarketsContainer } from '@vegaprotocol/market-list'; -import { useGlobalStore } from '../../stores'; +import { useGlobalStore, usePageTitleStore } from '../../stores'; import { useEffect } from 'react'; import { titlefy } from '@vegaprotocol/react-helpers'; const Markets = () => { const { update } = useGlobalStore((store) => ({ update: store.update })); + const { updateTitle } = usePageTitleStore((store) => ({ + updateTitle: store.updateTitle, + })); useEffect(() => { - update({ pageTitle: titlefy(['Markets']) }); - }, [update]); - + updateTitle(titlefy(['Markets'])); + }, [updateTitle]); const router = useRouter(); + return ( { diff --git a/apps/trading/pages/portfolio/deposit/index.page.tsx b/apps/trading/pages/portfolio/deposit/index.page.tsx index ae47cec36..cf525ac48 100644 --- a/apps/trading/pages/portfolio/deposit/index.page.tsx +++ b/apps/trading/pages/portfolio/deposit/index.page.tsx @@ -1,16 +1,17 @@ import { t, titlefy } from '@vegaprotocol/react-helpers'; import { Web3Container } from '@vegaprotocol/web3'; import { useEffect } from 'react'; -import { useGlobalStore } from '../../../stores'; +import { usePageTitleStore } from '../../../stores'; import { DepositContainer } from './deposit-container'; const Deposit = () => { - const { update } = useGlobalStore((store) => ({ - update: store.update, + const { updateTitle } = usePageTitleStore((store) => ({ + updateTitle: store.updateTitle, })); + useEffect(() => { - update({ pageTitle: titlefy([t('Deposits')]) }); - }, [update]); + updateTitle(titlefy([t('Deposits')])); + }, [updateTitle]); return ( diff --git a/apps/trading/pages/portfolio/index.page.tsx b/apps/trading/pages/portfolio/index.page.tsx index b29b7863f..a9de28a0b 100644 --- a/apps/trading/pages/portfolio/index.page.tsx +++ b/apps/trading/pages/portfolio/index.page.tsx @@ -10,16 +10,16 @@ import { VegaWalletContainer } from '../../components/vega-wallet-container'; import { DepositsContainer } from './deposits-container'; import { ResizableGrid } from '@vegaprotocol/ui-toolkit'; import { LayoutPriority } from 'allotment'; -import { useGlobalStore } from '../../stores'; +import { usePageTitleStore } from '../../stores'; import { AccountsContainer } from './accounts-container'; const Portfolio = () => { - const { update } = useGlobalStore((store) => ({ - update: store.update, + const { updateTitle } = usePageTitleStore((store) => ({ + updateTitle: store.updateTitle, })); useEffect(() => { - update({ pageTitle: titlefy([t('Portfolio')]) }); - }, [update]); + updateTitle(titlefy([t('Portfolio')])); + }, [updateTitle]); const wrapperClasses = 'h-full max-h-full flex flex-col'; const tabContentClassName = 'h-full grid grid-rows-[min-content_1fr]'; return ( diff --git a/apps/trading/stores/global.ts b/apps/trading/stores/global.ts index e54a20dc8..4aad856f4 100644 --- a/apps/trading/stores/global.ts +++ b/apps/trading/stores/global.ts @@ -2,33 +2,32 @@ import { LocalStorage } from '@vegaprotocol/react-helpers'; import create from 'zustand'; interface GlobalStore { - connectDialog: boolean; networkSwitcherDialog: boolean; landingDialog: boolean; riskNoticeDialog: boolean; marketId: string | null; - pageTitle: string | null; update: (store: Partial>) => void; +} + +interface PageTitleStore { + pageTitle: string | null; updateTitle: (title: string) => void; - updateMarketId: (marketId: string) => void; } export const useGlobalStore = create((set) => ({ - connectDialog: false, networkSwitcherDialog: false, landingDialog: false, riskNoticeDialog: false, marketId: LocalStorage.getItem('marketId') || null, - pageTitle: null, update: (state) => { set(state); if (state.marketId) { LocalStorage.setItem('marketId', state.marketId); } }, - updateTitle: (title: string) => set({ pageTitle: title }), - updateMarketId: (marketId: string) => { - set({ marketId }); - LocalStorage.setItem('marketId', marketId); - }, +})); + +export const usePageTitleStore = create((set) => ({ + pageTitle: null, + updateTitle: (title: string) => set({ pageTitle: title }), })); diff --git a/libs/wallet/src/connect-dialog/connect-dialog.spec.tsx b/libs/wallet/src/connect-dialog/connect-dialog.spec.tsx index 074c88082..6dddcd75c 100644 --- a/libs/wallet/src/connect-dialog/connect-dialog.spec.tsx +++ b/libs/wallet/src/connect-dialog/connect-dialog.spec.tsx @@ -20,6 +20,14 @@ import { EnvironmentProvider } from '@vegaprotocol/environment'; import type { ChainIdQuery } from '@vegaprotocol/react-helpers'; import { ChainIdDocument } from '@vegaprotocol/react-helpers'; +const mockUpdateDialogOpen = jest.fn(); +const mockCloseVegaDialog = jest.fn(); +jest.mock('zustand', () => () => () => ({ + updateVegaWalletDialog: mockUpdateDialogOpen, + closeVegaWalletDialog: mockCloseVegaDialog, + vegaWalletDialogOpen: true, +})); + let defaultProps: VegaConnectDialogProps; const rest = new RestConnector(); @@ -29,10 +37,9 @@ const connectors = { jsonRpc, }; beforeEach(() => { + jest.clearAllMocks(); defaultProps = { connectors, - dialogOpen: true, - setDialogOpen: jest.fn(), }; }); @@ -122,7 +129,7 @@ describe('VegaConnectDialog', () => { expect(spy).toHaveBeenCalledWith(fields); - expect(defaultProps.setDialogOpen).toHaveBeenCalledWith(false); + expect(mockCloseVegaDialog).toHaveBeenCalled(); }); it('handles failed connection', async () => { @@ -149,7 +156,7 @@ describe('VegaConnectDialog', () => { expect(spy).toHaveBeenCalledWith(fields); expect(screen.getByTestId('form-error')).toHaveTextContent(errMessage); - expect(defaultProps.setDialogOpen).not.toHaveBeenCalled(); + expect(mockUpdateDialogOpen).not.toHaveBeenCalled(); // Fetch failed due to wallet not running spy = jest @@ -249,9 +256,7 @@ describe('VegaConnectDialog', () => { }); it('connects with permission update', async () => { - const mockSetDialog = jest.fn(); - - render(generateJSX({ setDialogOpen: mockSetDialog })); + render(generateJSX()); await selectJsonRpc(); // Wallet version check @@ -299,7 +304,7 @@ describe('VegaConnectDialog', () => { await act(async () => { jest.advanceTimersByTime(CLOSE_DELAY); }); - expect(mockSetDialog).toHaveBeenCalledWith(false); + expect(mockCloseVegaDialog).toHaveBeenCalledWith(); }); it('handles incompatible wallet', async () => { diff --git a/libs/wallet/src/connect-dialog/connect-dialog.tsx b/libs/wallet/src/connect-dialog/connect-dialog.tsx index f019615d7..7d6b0aad4 100644 --- a/libs/wallet/src/connect-dialog/connect-dialog.tsx +++ b/libs/wallet/src/connect-dialog/connect-dialog.tsx @@ -1,3 +1,4 @@ +import create from 'zustand'; import { Button, Dialog, @@ -28,15 +29,50 @@ type WalletType = 'gui' | 'cli' | 'hosted'; export interface VegaConnectDialogProps { connectors: Connectors; - dialogOpen: boolean; - setDialogOpen: (isOpen: boolean) => void; + onChangeOpen?: (open: boolean) => void; +} + +export const useVegaWalletDialogStore = create( + (set) => ({ + vegaWalletDialogOpen: false, + updateVegaWalletDialog: (open: boolean) => + set({ vegaWalletDialogOpen: open }), + openVegaWalletDialog: () => set({ vegaWalletDialogOpen: true }), + closeVegaWalletDialog: () => set({ vegaWalletDialogOpen: false }), + }) +); + +interface VegaWalletDialogStore { + vegaWalletDialogOpen: boolean; + updateVegaWalletDialog: (open: boolean) => void; + openVegaWalletDialog: () => void; + closeVegaWalletDialog: () => void; } export const VegaConnectDialog = ({ connectors, - dialogOpen, - setDialogOpen, + onChangeOpen, }: VegaConnectDialogProps) => { + const { + vegaWalletDialogOpen, + closeVegaWalletDialog, + updateVegaWalletDialog, + } = useVegaWalletDialogStore((store) => ({ + vegaWalletDialogOpen: store.vegaWalletDialogOpen, + updateVegaWalletDialog: onChangeOpen + ? (open: boolean) => { + store.updateVegaWalletDialog(open); + onChangeOpen(open); + } + : store.updateVegaWalletDialog, + closeVegaWalletDialog: onChangeOpen + ? () => { + store.closeVegaWalletDialog(); + onChangeOpen(false); + } + : store.closeVegaWalletDialog, + })); + const { data, error, loading } = useChainIdQuery(); const renderContent = () => { @@ -66,14 +102,18 @@ export const VegaConnectDialog = ({ return ( setDialogOpen(false)} + closeDialog={closeVegaWalletDialog} appChainId={data.statistics.chainId} /> ); }; return ( - + {renderContent()} );