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() {
- + { + const { updateVegaWalletDialog } = useVegaWalletDialogStore((store) => ({ + updateVegaWalletDialog: store.updateVegaWalletDialog, + })); const { - vegaWalletDialog: { setConnect, setManage }, + vegaWalletDialog: { setManage }, theme, toggleTheme, } = useContext(LocalContext); @@ -18,7 +22,7 @@ const Header = () => {
diff --git a/apps/console-lite/src/app/components/wallet-connector/index.tsx b/apps/console-lite/src/app/components/wallet-connector/index.tsx index 7d42f1493..f5687c90f 100644 --- a/apps/console-lite/src/app/components/wallet-connector/index.tsx +++ b/apps/console-lite/src/app/components/wallet-connector/index.tsx @@ -1,13 +1,12 @@ +import { useVegaWalletDialogStore } from '@vegaprotocol/wallet'; import { t } from '@vegaprotocol/react-helpers'; import { Button } from '@vegaprotocol/ui-toolkit'; import * as React from 'react'; -import { useContext } from 'react'; -import LocalContext from '../../context/local-context'; const ConnectWallet = () => { - const { - vegaWalletDialog: { setConnect }, - } = useContext(LocalContext); + const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({ + openVegaWalletDialog: store.openVegaWalletDialog, + })); return (
{ {t('Please connect your Vega wallet to make a trade')}
-
diff --git a/apps/console-lite/src/app/context/local-context.ts b/apps/console-lite/src/app/context/local-context.ts index d155504a4..5bca7494f 100644 --- a/apps/console-lite/src/app/context/local-context.ts +++ b/apps/console-lite/src/app/context/local-context.ts @@ -1,9 +1,7 @@ import { createContext } from 'react'; export interface VegaWalletDialogState { - connect: boolean; manage: boolean; - setConnect: (isOpen: boolean) => void; setManage: (isOpen: boolean) => void; } diff --git a/apps/console-lite/src/app/hooks/use-local-values.spec.ts b/apps/console-lite/src/app/hooks/use-local-values.spec.ts index a1c9dfff2..1895ce211 100644 --- a/apps/console-lite/src/app/hooks/use-local-values.spec.ts +++ b/apps/console-lite/src/app/hooks/use-local-values.spec.ts @@ -7,12 +7,9 @@ describe('local values hook', () => { const { result } = renderHook(() => useLocalValues('light', setTheme)); expect(result.current.vegaWalletDialog).toBeDefined(); expect(result.current.vegaWalletDialog.manage).toBe(false); - expect(result.current.vegaWalletDialog.connect).toBe(false); act(() => { - result.current.vegaWalletDialog.setConnect(true); result.current.vegaWalletDialog.setManage(true); }); expect(result.current.vegaWalletDialog.manage).toBe(true); - expect(result.current.vegaWalletDialog.connect).toBe(true); }); }); diff --git a/apps/console-lite/src/app/hooks/use-local-values.ts b/apps/console-lite/src/app/hooks/use-local-values.ts index 9975d0f8a..c3c4260fc 100644 --- a/apps/console-lite/src/app/hooks/use-local-values.ts +++ b/apps/console-lite/src/app/hooks/use-local-values.ts @@ -2,17 +2,16 @@ import { useMemo, useState } from 'react'; import type { LocalValues } from '../context/local-context'; const useLocalValues = (theme: 'light' | 'dark', toggleTheme: () => void) => { - const [connect, setConnect] = useState(false); const [manage, setManage] = useState(false); const [menuOpen, setMenuOpen] = useState(false); return useMemo( () => ({ - vegaWalletDialog: { connect, manage, setConnect, setManage }, + vegaWalletDialog: { manage, setManage }, menu: { menuOpen, setMenuOpen, onToggle: () => setMenuOpen(!menuOpen) }, theme, toggleTheme, }), - [connect, manage, theme, toggleTheme, menuOpen] + [manage, theme, toggleTheme, menuOpen] ); }; diff --git a/apps/token/src/components/connect-to-vega/connect-to-vega.tsx b/apps/token/src/components/connect-to-vega/connect-to-vega.tsx index 2421a35c1..5aa524ef9 100644 --- a/apps/token/src/components/connect-to-vega/connect-to-vega.tsx +++ b/apps/token/src/components/connect-to-vega/connect-to-vega.tsx @@ -1,7 +1,7 @@ import { Button } from '@vegaprotocol/ui-toolkit'; import React from 'react'; import { useTranslation } from 'react-i18next'; - +import { useVegaWalletDialogStore } from '@vegaprotocol/wallet'; import { AppStateActionType, useAppState, @@ -10,14 +10,18 @@ import { export const ConnectToVega = () => { const { appDispatch } = useAppState(); const { t } = useTranslation(); + const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({ + openVegaWalletDialog: store.openVegaWalletDialog, + })); return ( 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 ( <> 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 (