feat(#1812): do not require Ethereum connection to display collateral (#2028)

* feat(#1812): don not require ethereum connection to display collateral

* feat(#1812): amend trading-account e2e tests

* feat(#1812): move Web3ConnectDialog to dialogs container, fix Web3Container childrenOnly option

* feat(#1812): fix withdraw e2e tests

* feat(#1812): reverse DialogsContainer changes, add Web3ConnectUncontrolledDialog

* feat(#1812): wrap WithdrawalDialog with  Web3Container

* feat(#1812): fix deposit dialog handling in ZeroBalanceError

* feat(#1812): fix deposit and withdraw dialog e2e tests

* feat: market proposal selector - fix failing on develop e2e tests

* feat: market proposal selector - fix failing on develop e2e tests

* feat: market proposal selector - fix failing on develop e2e tests

Co-authored-by: maciek <maciek@vegaprotocol.io>

apps/console-lite-e2e/src/integration/market-selector.test.ts

@@ -1,3 +1,4 @@
+import { connectVegaWallet } from '../support/vega-wallet';
 import { aliasQuery } from '@vegaprotocol/cypress';
 import {
   generateMarketsCandles,
@@ -14,11 +15,15 @@ import { generateMarketMarkPrice } from '../support/mocks/generate-market-mark-p
 import { generateMarketNames } from '../support/mocks/generate-market-names';
 import { generateMarketDepth } from '../support/mocks/generate-market-depth';
 import type { Market, MarketsQuery } from '@vegaprotocol/market-list';
+import { generateChainId } from '../support/mocks/generate-chain-id';
+import { generateStatistics } from '../support/mocks/generate-statistics';
 
 describe('market selector', { tags: '@smoke' }, () => {
   let markets: Market[];
   beforeEach(() => {
     cy.mockGQL((req) => {
+      aliasQuery(req, 'ChainId', generateChainId());
+      aliasQuery(req, 'Statistics', generateStatistics());
       aliasQuery(req, 'Markets', generateSimpleMarkets());
       aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
       aliasQuery(req, 'MarketsData', generateMarketsData());
@@ -45,7 +50,7 @@ describe('market selector', { tags: '@smoke' }, () => {
   it('should be properly rendered', () => {
     if (markets?.length) {
       cy.visit(`/trading/${markets[0].id}`);
-      cy.connectVegaWallet();
+      connectVegaWallet();
       cy.get('input[placeholder="Search"]').should(
         'have.value',
         markets[0].tradableInstrument.instrument.name
@@ -69,7 +74,7 @@ describe('market selector', { tags: '@smoke' }, () => {
   it('typing should change list', () => {
     if (markets?.length) {
       cy.visit(`/trading/${markets[0].id}`);
-      cy.connectVegaWallet();
+      connectVegaWallet();
       cy.get('input[placeholder="Search"]').type('{backspace}');
       cy.getByTestId('market-pane')
         .children()
@@ -105,7 +110,7 @@ describe('market selector', { tags: '@smoke' }, () => {
   it.skip('keyboard navigation should work well', () => {
     if (markets?.length) {
       cy.visit(`/trading/${markets[0].id}`);
-      cy.connectVegaWallet();
+      connectVegaWallet();
       cy.get('input[placeholder="Search"]').type('{backspace}');
       cy.get('input[placeholder="Search"]').clear();
       cy.focused().realPress('ArrowDown');
@@ -127,11 +132,13 @@ describe('market selector', { tags: '@smoke' }, () => {
     if (markets?.length) {
       cy.viewport('iphone-xr');
       cy.visit(`/trading/${markets[0].id}`);
-      cy.connectVegaWallet();
+      connectVegaWallet();
       cy.get('[role="dialog"]').should('not.exist');
       cy.getByTestId('arrow-button').click();
       cy.get('[role="dialog"]').should('be.visible');
-      cy.get('input[placeholder="Search"]').clear();
+      cy.get('input[placeholder="Search"]').then((search) => {
+        cy.wrap(search).clear();
+      });
       cy.getByTestId('market-pane')
         .children()
         .find('[role="button"]')

apps/console-lite-e2e/src/integration/market-trade.test.ts

@@ -1,3 +1,4 @@
+import { connectVegaWallet } from '../support/vega-wallet';
 import { aliasQuery } from '@vegaprotocol/cypress';
 import {
   generateSimpleMarkets,
@@ -14,11 +15,15 @@ import { generatePartyMarketData } from '../support/mocks/generate-party-market-
 import { generateMarketMarkPrice } from '../support/mocks/generate-market-mark-price';
 import { generateMarketDepth } from '../support/mocks/generate-market-depth';
 import type { MarketsQuery, Market } from '@vegaprotocol/market-list';
+import { generateChainId } from '../support/mocks/generate-chain-id';
+import { generateStatistics } from '../support/mocks/generate-statistics';
 
 describe('Market trade', { tags: '@smoke' }, () => {
   let markets: Market[];
   beforeEach(() => {
     cy.mockGQL((req) => {
+      aliasQuery(req, 'ChainId', generateChainId());
+      aliasQuery(req, 'Statistics', generateStatistics());
       aliasQuery(req, 'Markets', generateSimpleMarkets());
       aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
       aliasQuery(req, 'MarketsData', generateMarketsData());
@@ -58,7 +63,7 @@ describe('Market trade', { tags: '@smoke' }, () => {
   it('side selector should work well', () => {
     if (markets?.length) {
       cy.visit(`/trading/${markets[0].id}`);
-      cy.connectVegaWallet();
+      connectVegaWallet();
       cy.get('#step-1-control [aria-label^="Selected value"]').should(
         'have.text',
         'Long'
@@ -77,7 +82,7 @@ describe('Market trade', { tags: '@smoke' }, () => {
     if (markets?.length) {
       cy.viewport('iphone-xr');
       cy.visit(`/trading/${markets[0].id}`);
-      cy.connectVegaWallet();
+      connectVegaWallet();
       cy.getByTestId('next-button').scrollIntoView().click();
 
       cy.get('button[aria-label="Open long position"]').should(
@@ -109,7 +114,7 @@ describe('Market trade', { tags: '@smoke' }, () => {
   it('size slider should work well', () => {
     if (markets?.length) {
       cy.visit(`/trading/${markets[1].id}`);
-      cy.connectVegaWallet();
+      connectVegaWallet();
       cy.get('#step-1-control [aria-label^="Selected value"]').click();
       cy.get('button[aria-label="Open short position"]').click();
       cy.get('#step-2-control').click();
@@ -131,7 +136,7 @@ describe('Market trade', { tags: '@smoke' }, () => {
   it('percentage selection should work well', () => {
     if (markets?.length) {
       cy.visit(`/trading/${markets[1].id}`);
-      cy.connectVegaWallet();
+      connectVegaWallet();
       cy.get('#step-1-control [aria-label^="Selected value"]').click();
       cy.get('button[aria-label="Open short position"]').click();
       cy.get('#step-2-control').click();
@@ -158,7 +163,7 @@ describe('Market trade', { tags: '@smoke' }, () => {
   it('size input should work well', () => {
     if (markets?.length) {
       cy.visit(`/trading/${markets[1].id}`);
-      cy.connectVegaWallet();
+      connectVegaWallet();
       cy.get('#step-1-control [aria-label^="Selected value"]').click();
       cy.get('button[aria-label="Open short position"]').click();
       cy.get('#step-2-control').click();
@@ -186,7 +191,7 @@ describe('Market trade', { tags: '@smoke' }, () => {
   it('slippage value should be displayed', () => {
     if (markets?.length) {
       cy.visit(`/trading/${markets[1].id}`);
-      cy.connectVegaWallet();
+      connectVegaWallet();
       cy.get('#step-1-control [aria-label^="Selected value"]').click();
       cy.get('button[aria-label="Open short position"]').click();
       cy.get('#step-2-control').click();
@@ -202,7 +207,7 @@ describe('Market trade', { tags: '@smoke' }, () => {
   it('allow slippage value to be adjusted', () => {
     if (markets?.length) {
       cy.visit(`/trading/${markets[1].id}`);
-      cy.connectVegaWallet();
+      connectVegaWallet();
       cy.get('#step-1-control [aria-label^="Selected value"]').click();
       cy.get('button[aria-label="Open short position"]').click();
       cy.get('#step-2-control').click();
@@ -230,7 +235,7 @@ describe('Market trade', { tags: '@smoke' }, () => {
   it('notional position size should be present', () => {
     if (markets?.length) {
       cy.visit(`/trading/${markets[1].id}`);
-      cy.connectVegaWallet();
+      connectVegaWallet();
       cy.get('#step-1-control [aria-label^="Selected value"]').click();
       cy.get('button[aria-label="Open short position"]').click();
       cy.get('#step-2-control').click();
@@ -257,7 +262,7 @@ describe('Market trade', { tags: '@smoke' }, () => {
   it('total fees should be displayed', () => {
     if (markets?.length) {
       cy.visit(`/trading/${markets[1].id}`);
-      cy.connectVegaWallet();
+      connectVegaWallet();
       cy.get('#step-1-control [aria-label^="Selected value"]').click();
       cy.get('button[aria-label="Open short position"]').click();
       cy.get('#step-2-control').click();
@@ -272,7 +277,7 @@ describe('Market trade', { tags: '@smoke' }, () => {
   it('order review should display proper calculations', () => {
     if (markets?.length) {
       cy.visit(`/trading/${markets[0].id}`);
-      cy.connectVegaWallet();
+      connectVegaWallet();
       cy.get('#step-3-control').click();
 
       cy.getByTestId('review-trade')
@@ -299,7 +304,7 @@ describe('Market trade', { tags: '@smoke' }, () => {
     if (markets?.length) {
       cy.viewport('iphone-xr');
       cy.visit(`/trading/${markets[0].id}`);
-      cy.connectVegaWallet();
+      connectVegaWallet();
       cy.get('#step-3-control').click();
 
       // Start from the bottom tooltip to ensure the tooltip above

apps/console-lite-e2e/src/integration/portfolio-page.test.ts

@@ -1,3 +1,4 @@
+import { connectVegaWallet } from '../support/vega-wallet';
 import { aliasQuery } from '@vegaprotocol/cypress';
 import {
   generatePositions,
@@ -13,13 +14,15 @@ import {
   generateMarketsData,
   generatePositionsMarkets,
 } from '../support/mocks/generate-markets';
+import { generateChainId } from '../support/mocks/generate-chain-id';
+import { generateStatistics } from '../support/mocks/generate-statistics';
 
 describe('Portfolio page - wallet', { tags: '@smoke' }, () => {
   it('button for wallet connect should work', () => {
     cy.visit('/');
     cy.get('[href="/portfolio"]').eq(0).click();
     cy.getByTestId('trading-connect-wallet').should('be.visible');
-    cy.connectVegaWallet();
+    connectVegaWallet();
     cy.getByTestId('trading-connect-wallet').should('not.exist');
   });
 });
@@ -27,6 +30,8 @@ describe('Portfolio page - wallet', { tags: '@smoke' }, () => {
 describe('Portfolio page tabs', { tags: '@smoke' }, () => {
   before(() => {
     cy.mockGQL((req) => {
+      aliasQuery(req, 'ChainId', generateChainId());
+      aliasQuery(req, 'Statistics', generateStatistics());
       aliasQuery(req, 'Positions', generatePositions());
       aliasQuery(req, 'Margins', generateMargins());
       aliasQuery(req, 'Markets', generatePositionsMarkets());
@@ -38,7 +43,7 @@ describe('Portfolio page tabs', { tags: '@smoke' }, () => {
 
   it('certain tabs should exist', () => {
     cy.visit('/portfolio');
-    cy.connectVegaWallet();
+    connectVegaWallet();
 
     cy.getByTestId('assets').click();
     cy.location('pathname').should('eq', '/portfolio/assets');
@@ -59,6 +64,8 @@ describe('Portfolio page tabs', { tags: '@smoke' }, () => {
   describe('Assets view', () => {
     before(() => {
       cy.mockGQL((req) => {
+        aliasQuery(req, 'ChainId', generateChainId());
+        aliasQuery(req, 'Statistics', generateStatistics());
         aliasQuery(req, 'Positions', generatePositions());
         aliasQuery(req, 'Margins', generateMargins());
         aliasQuery(req, 'Markets', generatePositionsMarkets());
@@ -67,7 +74,7 @@ describe('Portfolio page tabs', { tags: '@smoke' }, () => {
         aliasQuery(req, 'Assets', generateAssets());
       });
       cy.visit('/portfolio/assets');
-      cy.connectVegaWallet();
+      connectVegaWallet();
     });
 
     it('data should be properly rendered', () => {
@@ -88,6 +95,8 @@ describe('Portfolio page tabs', { tags: '@smoke' }, () => {
   describe('Positions view', () => {
     beforeEach(() => {
       cy.mockGQL((req) => {
+        aliasQuery(req, 'ChainId', generateChainId());
+        aliasQuery(req, 'Statistics', generateStatistics());
         aliasQuery(req, 'Positions', generatePositions());
         aliasQuery(req, 'Accounts', generateAccounts());
         aliasQuery(req, 'Margins', generateMargins());
@@ -96,7 +105,7 @@ describe('Portfolio page tabs', { tags: '@smoke' }, () => {
         aliasQuery(req, 'Assets', generateAssets());
       });
       cy.visit('/portfolio/positions');
-      cy.connectVegaWallet();
+      connectVegaWallet();
     });
 
     it('data should be properly rendered', () => {
@@ -107,11 +116,13 @@ describe('Portfolio page tabs', { tags: '@smoke' }, () => {
   describe('Orders view', () => {
     beforeEach(() => {
       cy.mockGQL((req) => {
+        aliasQuery(req, 'ChainId', generateChainId());
+        aliasQuery(req, 'Statistics', generateStatistics());
         aliasQuery(req, 'Orders', generateOrders());
         aliasQuery(req, 'Markets', generateFillsMarkets());
       });
       cy.visit('/portfolio/orders');
-      cy.connectVegaWallet();
+      connectVegaWallet();
     });
 
     it('data should be properly rendered', () => {
@@ -122,11 +133,13 @@ describe('Portfolio page tabs', { tags: '@smoke' }, () => {
   describe('Fills view', () => {
     beforeEach(() => {
       cy.mockGQL((req) => {
+        aliasQuery(req, 'ChainId', generateChainId());
+        aliasQuery(req, 'Statistics', generateStatistics());
         aliasQuery(req, 'Fills', generateFills());
         aliasQuery(req, 'Markets', generateFillsMarkets());
       });
       cy.visit('/portfolio/fills');
-      cy.connectVegaWallet();
+      connectVegaWallet();
     });
 
     it('data should be properly rendered', () => {
@@ -137,6 +150,8 @@ describe('Portfolio page tabs', { tags: '@smoke' }, () => {
   describe('Empty views', () => {
     beforeEach(() => {
       cy.mockGQL((req) => {
+        aliasQuery(req, 'ChainId', generateChainId());
+        aliasQuery(req, 'Statistics', generateStatistics());
         aliasQuery(req, 'Positions', emptyPositions());
         aliasQuery(req, 'Accounts', { party: null });
         aliasQuery(req, 'Orders', { party: null });
@@ -147,9 +162,11 @@ describe('Portfolio page tabs', { tags: '@smoke' }, () => {
         aliasQuery(req, 'Assets', {
           assetsConnection: { edges: null, __typename: 'AssetsConnection' },
         });
+        aliasQuery(req, 'Margins', generateMargins());
+        aliasQuery(req, 'MarketsData', generateMarketsData());
       });
       cy.visit('/portfolio');
-      cy.connectVegaWallet();
+      connectVegaWallet();
     });
 
     it('"No data to display" should be always displayed', () => {

apps/console-lite-e2e/src/support/mocks/generate-chain-id.ts

@@ -0,0 +1,16 @@
+import type { ChainIdQuery } from '@vegaprotocol/react-helpers';
+import merge from 'lodash/merge';
+import type { PartialDeep } from 'type-fest';
+
+export const generateChainId = (
+  override?: PartialDeep<ChainIdQuery>
+): ChainIdQuery => {
+  const defaultResult = {
+    statistics: {
+      __typename: 'Statistics',
+      chainId: 'test-chain-id',
+    },
+  };
+
+  return merge(defaultResult, override);
+};

apps/console-lite-e2e/src/support/mocks/generate-statistics.ts

@@ -0,0 +1,17 @@
+import type { StatisticsQuery } from '@vegaprotocol/environment';
+import merge from 'lodash/merge';
+import type { PartialDeep } from 'type-fest';
+
+export const generateStatistics = (
+  override?: PartialDeep<StatisticsQuery>
+): StatisticsQuery => {
+  const defaultResult = {
+    statistics: {
+      __typename: 'Statistics',
+      chainId: 'test-chain-id',
+      blockHeight: '11',
+    },
+  };
+
+  return merge(defaultResult, override);
+};

apps/console-lite-e2e/src/support/vega-wallet.ts

@@ -0,0 +1,12 @@
+export const connectVegaWallet = () => {
+  const form = 'rest-connector-form';
+  const walletName = Cypress.env('TRADING_TEST_VEGA_WALLET_NAME');
+  const walletPassphrase = Cypress.env('TRADING_TEST_VEGA_WALLET_PASSPHRASE');
+  cy.getByTestId('connect-vega-wallet').click();
+  cy.getByTestId('connectors-list')
+    .find('[data-testid="connector-gui"]')
+    .click();
+  cy.getByTestId(form).find('#wallet').click().type(walletName);
+  cy.getByTestId(form).find('#passphrase').click().type(walletPassphrase);
+  cy.getByTestId('rest-connector-form').find('button[type=submit]').click();
+};

apps/console-lite/src/app/components/deposits/deposits.tsx

@@ -1,20 +1,16 @@
-import { useState } from 'react';
 import { t } from '@vegaprotocol/react-helpers';
 import { Button } from '@vegaprotocol/ui-toolkit';
-import { DepositDialog } from '@vegaprotocol/deposits';
+import { DepositDialog, useDepositDialog } from '@vegaprotocol/deposits';
 
 /**
  *  Fetches data required for the Deposit page
  */
 export const DepositContainer = () => {
-  const [depositDialog, setDepositDialog] = useState(false);
+  const openDepositDialog = useDepositDialog((state) => state.open);
   return (
     <div>
-      <DepositDialog
+      <DepositDialog />
-        depositDialog={depositDialog}
+      <Button size="sm" onClick={() => openDepositDialog()}>
-        setDepositDialog={setDepositDialog}
-      />
-      <Button size="sm" onClick={() => setDepositDialog(true)}>
         {t('Make deposit')}
       </Button>
     </div>

apps/token/src/routes/withdrawals/index.tsx

@@ -7,10 +7,9 @@ import { VegaWalletContainer } from '../../components/vega-wallet-container';
 import {
   PendingWithdrawalsTable,
   useWithdrawals,
-  WithdrawalDialogs,
+  useWithdrawalDialog,
   WithdrawalsTable,
 } from '@vegaprotocol/withdraws';
-import { useState } from 'react';
 import { useDocumentTitle } from '../../hooks/use-document-title';
 import type { RouteChildProps } from '../index';
 
@@ -29,7 +28,7 @@ const Withdrawals = ({ name }: RouteChildProps) => {
 };
 
 const WithdrawPendingContainer = () => {
-  const [withdrawDialog, setWithdrawDialog] = useState(false);
+  const openWithdrawalDialog = useWithdrawalDialog((state) => state.open);
   const { t } = useTranslation();
   const { pending, completed, loading, error } = useWithdrawals();
 
@@ -54,7 +53,7 @@ const WithdrawPendingContainer = () => {
     <>
       <header className="flex items-start justify-between">
         <h2>{t('withdrawalsPreparedWarningHeading')}</h2>
-        <Button data-testid="withdraw" onClick={() => setWithdrawDialog(true)}>
+        <Button data-testid="withdraw" onClick={() => openWithdrawalDialog()}>
           Withdraw
         </Button>
       </header>
@@ -67,10 +66,6 @@ const WithdrawPendingContainer = () => {
         <h4 className="pt-3 pb-1">{t('Withdrawal history')}</h4>
         <WithdrawalsTable rowData={completed} />
       </div>
-      <WithdrawalDialogs
-        withdrawDialog={withdrawDialog}
-        setWithdrawDialog={setWithdrawDialog}
-      />
     </>
   );
 };

apps/trading-e2e/src/integration/deposit.cy.ts

@@ -19,10 +19,6 @@ describe('deposit form validation', { tags: '@smoke' }, () => {
     connectVegaWallet();
     // validateFillsDisplayed();
     cy.getByTestId('deposit-button').click();
-    // Deposit page requires connection Ethereum wallet first
-    cy.getByTestId(connectEthWalletBtn).click();
-    cy.getByTestId('web3-connector-MetaMask').click();
-
     cy.wait('@Assets');
   });
 

apps/trading-e2e/src/integration/trading-accounts.cy.ts

@@ -1,5 +1,4 @@
 import { connectVegaWallet } from '../support/vega-wallet';
-import { connectEthereumWallet } from '../support/ethereum-wallet';
 
 beforeEach(() => {
   cy.mockTradingPage();
@@ -12,10 +11,8 @@ describe('accounts', { tags: '@smoke' }, () => {
   it('renders accounts', () => {
     const tradingAccountRowId = '[row-id="asset-0"]';
     cy.getByTestId('Collateral').click();
-    cy.getByTestId('tab-accounts').contains('Please connect Vega wallet');
 
     connectVegaWallet();
-    connectEthereumWallet();
 
     cy.getByTestId('tab-accounts').should('be.visible');
     cy.getByTestId('tab-accounts')

apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts

@@ -243,7 +243,7 @@ describe(
   () => {
     before(() => {
       cy.mockTradingPage(
-        Schema.MarketState.STATE_PENDING,
+        Schema.MarketState.STATE_SUSPENDED,
         Schema.MarketTradingMode.TRADING_MODE_BATCH_AUCTION,
         Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY
       );
@@ -302,7 +302,7 @@ describe(
   () => {
     before(() => {
       cy.mockTradingPage(
-        Schema.MarketState.STATE_PENDING,
+        Schema.MarketState.STATE_SUSPENDED,
         Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION,
         Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY
       );
@@ -361,7 +361,7 @@ describe(
   () => {
     before(() => {
       cy.mockTradingPage(
-        Schema.MarketState.STATE_PENDING,
+        Schema.MarketState.STATE_SUSPENDED,
         Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
         Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY
       );
@@ -512,7 +512,7 @@ describe('limit order validations', { tags: '@smoke' }, () => {
       .should('have.text', 'Price (tBTC)');
   });
 
-  it('must see warning when placing an order with expiry date in past', function () {
+  it('must see warning when placing an order with expiry date in past', () => {
     const expiresAt = new Date(Date.now() - 24 * 60 * 60 * 1000);
     const expiresAtInputValue = expiresAt.toISOString().substring(0, 16);
     cy.getByTestId(toggleLimit).click();

apps/trading/client-pages/portfolio/deposits-container.tsx

@@ -1,12 +1,11 @@
 import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
-import { DepositDialog, DepositsTable } from '@vegaprotocol/deposits';
+import { useDepositDialog, DepositsTable } from '@vegaprotocol/deposits';
 import { useDeposits } from '@vegaprotocol/deposits';
 import { t } from '@vegaprotocol/react-helpers';
-import { useState } from 'react';
 
 export const DepositsContainer = () => {
   const { deposits, loading, error } = useDeposits();
-  const [depositDialog, setDepositDialog] = useState(false);
+  const openDepositDialog = useDepositDialog((state) => state.open);
 
   return (
     <div className="h-full grid grid-rows-[1fr,min-content]">
@@ -20,14 +19,10 @@ export const DepositsContainer = () => {
           }}
         />
       </div>
-      <DepositDialog
-        depositDialog={depositDialog}
-        setDepositDialog={setDepositDialog}
-      />
       <div className="w-full dark:bg-black bg-white absolute bottom-0 h-auto flex justify-end px-[11px] py-2">
         <Button
           size="sm"
-          onClick={() => setDepositDialog(true)}
+          onClick={() => openDepositDialog()}
           data-testid="deposit-button"
         >
           {t('Deposit')}

apps/trading/client-pages/portfolio/withdrawals-container.tsx

@@ -2,17 +2,16 @@ import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
 import {
   PendingWithdrawalsTable,
   useWithdrawals,
-  WithdrawalDialogs,
+  useWithdrawalDialog,
   WithdrawalsTable,
 } from '@vegaprotocol/withdraws';
 import { t } from '@vegaprotocol/react-helpers';
-import { useState } from 'react';
 import { VegaWalletContainer } from '../../components/vega-wallet-container';
 import { Web3Container } from '@vegaprotocol/web3';
 
 export const WithdrawalsContainer = () => {
   const { pending, completed, loading, error } = useWithdrawals();
-  const [withdrawDialog, setWithdrawDialog] = useState(false);
+  const openWithdrawDialog = useWithdrawalDialog((state) => state.open);
 
   return (
     <Web3Container>
@@ -45,17 +44,13 @@ export const WithdrawalsContainer = () => {
           <div className="w-full dark:bg-black bg-white absolute bottom-0 h-auto flex justify-end px-[11px] py-2">
             <Button
               size="sm"
-              onClick={() => setWithdrawDialog(true)}
+              onClick={() => openWithdrawDialog()}
               data-testid="withdraw-dialog-button"
             >
               {t('Make withdrawal')}
             </Button>
           </div>
         </div>
-        <WithdrawalDialogs
-          withdrawDialog={withdrawDialog}
-          setWithdrawDialog={setWithdrawDialog}
-        />
       </VegaWalletContainer>
     </Web3Container>
   );

apps/trading/components/accounts-container/accounts-container.tsx

@@ -1,21 +1,19 @@
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/react-helpers';
-import { WithdrawalDialogs } from '@vegaprotocol/withdraws';
+import { useWithdrawalDialog } from '@vegaprotocol/withdraws';
-import { Web3Container } from '@vegaprotocol/web3';
 import type { AssetFieldsFragment } from '@vegaprotocol/assets';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { AccountManager } from '@vegaprotocol/accounts';
-import { DepositDialog } from '@vegaprotocol/deposits';
+import { useDepositDialog } from '@vegaprotocol/deposits';
 
 export const AccountsContainer = () => {
   const { pubKey } = useVegaWallet();
-  const [withdrawDialog, setWithdrawDialog] = useState(false);
-  const [depositDialog, setDepositDialog] = useState(false);
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
-  const [assetId, setAssetId] = useState<string>();
+  const openWithdrawalDialog = useWithdrawalDialog((store) => store.open);
+  const openDepositDialog = useDepositDialog((store) => store.open);
 
   const onClickAsset = useCallback(
     (value?: string | AssetFieldsFragment) => {
@@ -24,16 +22,6 @@ export const AccountsContainer = () => {
     [openAssetDetailsDialog]
   );
 
-  const onClickWithdraw = useCallback((assetId?: string) => {
-    setWithdrawDialog(true);
-    setAssetId(assetId);
-  }, []);
-
-  const onClickDeposit = useCallback((assetId?: string) => {
-    setDepositDialog(true);
-    setAssetId(assetId);
-  }, []);
-
   if (!pubKey) {
     return (
       <Splash>
@@ -43,38 +31,20 @@ export const AccountsContainer = () => {
   }
 
   return (
-    <Web3Container>
+    <div className="h-full relative grid grid-rows-[1fr,min-content]">
-      <div className="h-full relative grid grid-rows-[1fr,min-content]">
+      <div>
-        <div>
+        <AccountManager
-          <AccountManager
+          partyId={pubKey}
-            partyId={pubKey}
+          onClickAsset={onClickAsset}
-            onClickAsset={onClickAsset}
+          onClickWithdraw={openWithdrawalDialog}
-            onClickWithdraw={onClickWithdraw}
+          onClickDeposit={openDepositDialog}
-            onClickDeposit={onClickDeposit}
+        />
-          />
-        </div>
-        <div className="flex justify-end p-2 px-[11px]">
-          <Button
-            size="sm"
-            onClick={() => {
-              setAssetId(undefined);
-              setDepositDialog(true);
-            }}
-          >
-            {t('Deposit')}
-          </Button>
-        </div>
       </div>
-      <WithdrawalDialogs
+      <div className="flex justify-end p-2 px-[11px]">
-        assetId={assetId}
+        <Button size="sm" onClick={() => openDepositDialog()}>
-        withdrawDialog={withdrawDialog}
+          {t('Deposit')}
-        setWithdrawDialog={setWithdrawDialog}
+        </Button>
-      />
+      </div>
-      <DepositDialog
+    </div>
-        assetId={assetId}
-        depositDialog={depositDialog}
-        setDepositDialog={setDepositDialog}
-      />
-    </Web3Container>
   );
 };

apps/trading/pages/dialogs-container.tsx

@@ -5,6 +5,10 @@ import {
 import { VegaConnectDialog } from '@vegaprotocol/wallet';
 import { Connectors } from '../lib/vega-connectors';
 import { RiskNoticeDialog } from '../components/risk-notice-dialog';
+import { WithdrawalDialog } from '@vegaprotocol/withdraws';
+import { DepositDialog } from '@vegaprotocol/deposits';
+import { Web3Container } from '@vegaprotocol/web3';
+import { Web3ConnectUncontrolledDialog } from '@vegaprotocol/web3';
 
 const DialogsContainer = () => {
   const { isOpen, symbol, trigger, setOpen } = useAssetDetailsDialogStore();
@@ -18,6 +22,11 @@ const DialogsContainer = () => {
         onChange={setOpen}
       />
       <RiskNoticeDialog />
+      <DepositDialog />
+      <Web3ConnectUncontrolledDialog />
+      <Web3Container childrenOnly connectEagerly>
+        <WithdrawalDialog />
+      </Web3Container>
     </>
   );
 };

libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx

@@ -1,7 +1,6 @@
 import { normalizeFormatNumber, t } from '@vegaprotocol/react-helpers';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
-import { useState } from 'react';
+import { DepositDialog, useDepositDialog } from '@vegaprotocol/deposits';
-import { DepositDialog } from '@vegaprotocol/deposits';
 
 interface Props {
   margin: string;
@@ -14,7 +13,7 @@ interface Props {
 }
 
 export const MarginWarning = ({ margin, balance, asset }: Props) => {
-  const [depositDialog, setDepositDialog] = useState(false);
+  const openDepositDialog = useDepositDialog((state) => state.open);
   return (
     <>
       <div
@@ -25,7 +24,7 @@ export const MarginWarning = ({ margin, balance, asset }: Props) => {
           {t('You may not have enough margin available to open this position.')}{' '}
           <ButtonLink
             data-testid="deal-ticket-deposit-dialog-button"
-            onClick={() => setDepositDialog(true)}
+            onClick={() => openDepositDialog(asset.id)}
           >
             {t(`Deposit ${asset.symbol}`)}
           </ButtonLink>
@@ -39,11 +38,7 @@ export const MarginWarning = ({ margin, balance, asset }: Props) => {
           )} ${asset.symbol} ${t('available')}`}
         </p>
       </div>
-      <DepositDialog
+      <DepositDialog />
-        depositDialog={depositDialog}
-        setDepositDialog={setDepositDialog}
-        assetId={asset.id}
-      />
     </>
   );
 };

libs/deal-ticket/src/components/deal-ticket-validation/zero-balance-error.tsx

@@ -1,8 +1,6 @@
 import { t } from '@vegaprotocol/react-helpers';
 import { ButtonLink, InputError } from '@vegaprotocol/ui-toolkit';
-import { useState } from 'react';
+import { useDepositDialog } from '@vegaprotocol/deposits';
-import { DepositDialog } from '@vegaprotocol/deposits';
-
 interface ZeroBalanceErrorProps {
   asset: {
     id: string;
@@ -11,25 +9,18 @@ interface ZeroBalanceErrorProps {
 }
 
 export const ZeroBalanceError = ({ asset }: ZeroBalanceErrorProps) => {
-  const [depositDialog, setDepositDialog] = useState(false);
+  const openDepositDialog = useDepositDialog((state) => state.open);
   return (
-    <>
+    <InputError data-testid="dealticket-error-message-zero-balance">
-      <InputError data-testid="dealticket-error-message-zero-balance">
+      <p className="mb-2">
-        <p className="mb-2">
+        {t('Insufficient balance. ')}
-          {t('Insufficient balance. ')}
+        <ButtonLink
-          <ButtonLink
+          data-testid="deal-ticket-deposit-dialog-button"
-            data-testid="deal-ticket-deposit-dialog-button"
+          onClick={() => openDepositDialog(asset.id)}
-            onClick={() => setDepositDialog(true)}
+        >
-          >
+          {t(`Deposit ${asset.symbol}`)}
-            {t(`Deposit ${asset.symbol}`)}
+        </ButtonLink>
-          </ButtonLink>
+      </p>
-        </p>
+    </InputError>
-      </InputError>
-      <DepositDialog
-        depositDialog={depositDialog}
-        setDepositDialog={setDepositDialog}
-        assetId={asset.id}
-      />
-    </>
   );
 };

libs/deal-ticket/src/components/deal-ticket/deal-ticket-container.tsx

@@ -27,7 +27,6 @@ export const DealTicketContainer = ({
         )
       ) : (
         <Splash>
-          {JSON.stringify(data)}
           <p>{t('Could not load market')}</p>
         </Splash>
       )}

libs/deposits/src/lib/deposit-container.tsx

@@ -24,7 +24,7 @@ export const DepositContainer = ({
   return (
     <AsyncRenderer data={data} loading={loading} error={error}>
       {data && data.length ? (
-        <Web3Container>
+        <Web3Container connectEagerly>
           <DepositManager
             assetId={assetId}
             assets={data}

libs/deposits/src/lib/deposit-dialog.tsx

@@ -1,20 +1,34 @@
+import create from 'zustand';
 import { t } from '@vegaprotocol/react-helpers';
 import type { Intent } from '@vegaprotocol/ui-toolkit';
 import { Dialog } from '@vegaprotocol/ui-toolkit';
 import { useCallback, useState } from 'react';
 import { DepositContainer } from './deposit-container';
+import { useWeb3ConnectDialog } from '@vegaprotocol/web3';
 
-export interface DepositDialogProps {
+interface State {
+  isOpen: boolean;
   assetId?: string;
-  depositDialog: boolean;
-  setDepositDialog: (open: boolean) => void;
 }
 
+interface Actions {
+  open: (assetId?: string) => void;
+  close: () => void;
+}
+
+export const useDepositDialog = create<State & Actions>((set) => ({
+  isOpen: false,
+  assetId: undefined,
+  open: (assetId) => set(() => ({ assetId, isOpen: true })),
+  close: () => set(() => ({ assetId: undefined, isOpen: false })),
+}));
+
 export type DepositDialogStyleProps = {
   title: string;
   icon?: JSX.Element;
   intent?: Intent;
 };
+
 export type DepositDialogStylePropsSetter = (
   props?: DepositDialogStyleProps
 ) => void;
@@ -25,11 +39,11 @@ const DEFAULT_STYLE: DepositDialogStyleProps = {
   icon: undefined,
 };
 
-export const DepositDialog = ({
+export const DepositDialog = () => {
-  assetId,
+  const { assetId, isOpen, open, close } = useDepositDialog();
-  depositDialog,
+  const connectWalletDialogIsOpen = useWeb3ConnectDialog(
-  setDepositDialog,
+    (state) => state.isOpen
-}: DepositDialogProps) => {
+  );
   const [dialogStyleProps, _setDialogStyleProps] = useState(DEFAULT_STYLE);
   const setDialogStyleProps: DepositDialogStylePropsSetter =
     useCallback<DepositDialogStylePropsSetter>(
@@ -41,8 +55,8 @@ export const DepositDialog = ({
     );
   return (
     <Dialog
-      open={depositDialog}
+      open={isOpen && !connectWalletDialogIsOpen}
-      onChange={setDepositDialog}
+      onChange={(isOpen) => (isOpen ? open() : close())}
       {...dialogStyleProps}
     >
       <DepositContainer

libs/environment/src/hooks/use-environment.tsx

@@ -1,5 +1,11 @@
 import type { ReactNode } from 'react';
-import { useEffect, useState, createContext, useContext } from 'react';
+import {
+  useEffect,
+  useState,
+  createContext,
+  useContext,
+  useCallback,
+} from 'react';
 
 import { NodeSwitcherDialog } from '../components/node-switcher-dialog';
 import { useConfig } from './use-config';
@@ -49,10 +55,15 @@ export const EnvironmentProvider = ({
   children,
 }: EnvironmentProviderProps) => {
   const [networkError, setNetworkError] = useState<undefined | ErrorType>();
-  const [isNodeSwitcherOpen, setNodeSwitcherOpen] = useState(false);
+  const [isNodeSwitcherOpen, setNodeSwitcherIsOpen] = useState(false);
   const [environment, updateEnvironment] = useState<Environment>(
     compileEnvironment(definitions)
   );
+  const setNodeSwitcherOpen = useCallback((isOpen: boolean) => {
+    if (!('Cypress' in window)) {
+      setNodeSwitcherIsOpen(isOpen);
+    }
+  }, []);
   const { loading, config } = useConfig(
     { environment, defaultConfig },
     (errorType) => {
@@ -126,7 +137,7 @@ export const EnvironmentProvider = ({
       }}
     >
       <NodeSwitcherDialog
-        dialogOpen={isNodeSwitcherOpen}
+        dialogOpen={isNodeSwitcherOpen && !('Cypress' in window)}
         initialErrorType={networkError}
         setDialogOpen={setNodeSwitcherOpen}
         loading={loading}

libs/web3/src/lib/web3-connect-dialog.tsx

@@ -1,14 +1,34 @@
+import create from 'zustand';
 import { t } from '@vegaprotocol/react-helpers';
 import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
-import type { Web3ReactHooks } from '@web3-react/core';
-import type { Connector } from '@web3-react/types';
 import { MetaMask } from '@web3-react/metamask';
 import { WalletConnect } from '@web3-react/walletconnect';
+import type { Web3ReactHooks } from '@web3-react/core';
+import type { Connector } from '@web3-react/types';
+
+interface State {
+  isOpen: boolean;
+  connectors: [Connector, Web3ReactHooks][];
+  desiredChainId?: number;
+}
+interface Actions {
+  open: (connectors: State['connectors'], desiredChainId?: number) => void;
+  close: () => void;
+}
+
+export const useWeb3ConnectDialog = create<State & Actions>((set) => ({
+  isOpen: false,
+  connectors: [],
+  open: (connectors, desiredChainId) =>
+    set(() => ({ isOpen: true, connectors, desiredChainId })),
+  close: () =>
+    set(() => ({ isOpen: false, connectors: [], desiredChainId: undefined })),
+}));
 
 interface Web3ConnectDialogProps {
   dialogOpen: boolean;
   setDialogOpen: (isOpen: boolean) => void;
-  connectors: [Connector, Web3ReactHooks][];
+  connectors: State['connectors'];
   desiredChainId?: number;
 }
 
@@ -48,6 +68,22 @@ export const Web3ConnectDialog = ({
   );
 };
 
+export const Web3ConnectUncontrolledDialog = () => {
+  const { isOpen, connectors, desiredChainId, open, close } =
+    useWeb3ConnectDialog();
+
+  const onChange = (isOpen: boolean) =>
+    isOpen ? open(connectors, desiredChainId) : close();
+
+  return (
+    <Web3ConnectDialog
+      dialogOpen={isOpen}
+      setDialogOpen={onChange}
+      connectors={connectors}
+    />
+  );
+};
+
 function getConnectorInfo(connector: Connector) {
   if (connector instanceof MetaMask) {
     return {

libs/web3/src/lib/web3-container.spec.tsx

@@ -2,6 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import type { MockedResponse } from '@apollo/client/testing';
 import { MockedProvider } from '@apollo/client/testing';
 import { Web3Container } from './web3-container';
+import { Web3ConnectUncontrolledDialog } from './web3-connect-dialog';
 import type { useWeb3React } from '@web3-react/core';
 import type { NetworkParamsQuery } from '@vegaprotocol/react-helpers';
 import { NetworkParamsDocument } from '@vegaprotocol/react-helpers';
@@ -73,6 +74,7 @@ function setup(mock = networkParamsQueryMock) {
           </div>
         </Web3Container>
       </MockedProvider>
+      <Web3ConnectUncontrolledDialog />
     </EnvironmentProvider>
   );
 }

libs/web3/src/lib/web3-container.tsx

@@ -1,23 +1,28 @@
 import type { ReactNode } from 'react';
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useWeb3React } from '@web3-react/core';
 import { AsyncRenderer, Button, Splash } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/react-helpers';
 import { useEnvironment } from '@vegaprotocol/environment';
 import { Web3Provider } from './web3-provider';
 import { useEthereumConfig } from './use-ethereum-config';
-import { Web3ConnectDialog } from './web3-connect-dialog';
+import { useWeb3ConnectDialog } from './web3-connect-dialog';
 import { createConnectors } from './web3-connectors';
 
 interface Web3ContainerProps {
   children: ReactNode;
+  childrenOnly?: boolean;
+  connectEagerly?: boolean;
 }
 
-export const Web3Container = ({ children }: Web3ContainerProps) => {
+export const Web3Container = ({
-  const [dialogOpen, setDialogOpen] = useState(false);
+  children,
+  childrenOnly,
+  connectEagerly,
+}: Web3ContainerProps) => {
   const { config, loading, error } = useEthereumConfig();
   const { ETHEREUM_PROVIDER_URL } = useEnvironment();
-  const Connectors = useMemo(() => {
+  const connectors = useMemo(() => {
     if (config?.chain_id) {
       return createConnectors(ETHEREUM_PROVIDER_URL, Number(config?.chain_id));
     }
@@ -25,20 +30,16 @@ export const Web3Container = ({ children }: Web3ContainerProps) => {
   }, [config?.chain_id, ETHEREUM_PROVIDER_URL]);
   return (
     <AsyncRenderer data={config} loading={loading} error={error}>
-      {Connectors && config && (
+      {connectors && config && (
-        <Web3Provider connectors={Connectors}>
+        <Web3Provider connectors={connectors}>
           <Web3Content
+            connectEagerly={connectEagerly}
+            childrenOnly={childrenOnly}
             appChainId={Number(config.chain_id)}
-            setDialogOpen={setDialogOpen}
+            connectors={connectors}
           >
             {children}
           </Web3Content>
-          <Web3ConnectDialog
-            connectors={Connectors}
-            dialogOpen={dialogOpen}
-            setDialogOpen={setDialogOpen}
-            desiredChainId={Number(config.chain_id)}
-          />
         </Web3Provider>
       )}
     </AsyncRenderer>
@@ -47,19 +48,27 @@ export const Web3Container = ({ children }: Web3ContainerProps) => {
 
 interface Web3ContentProps {
   children: ReactNode;
+  childrenOnly?: boolean;
+  connectEagerly?: boolean;
   appChainId: number;
-  setDialogOpen: (isOpen: boolean) => void;
+  connectors: ReturnType<typeof createConnectors>;
 }
 
 export const Web3Content = ({
   children,
+  childrenOnly,
+  connectEagerly,
   appChainId,
-  setDialogOpen,
+  connectors,
 }: Web3ContentProps) => {
   const { isActive, error, connector, chainId } = useWeb3React();
+  const openDialog = useWeb3ConnectDialog((state) => state.open);
 
   useEffect(() => {
-    if (connector?.connectEagerly && !('Cypress' in window)) {
+    if (
+      connector?.connectEagerly &&
+      (!('Cypress' in window) || connectEagerly)
+    ) {
       connector.connectEagerly();
     }
     // wallet connect doesnt handle connectEagerly being called when connector is also in the
@@ -67,6 +76,11 @@ export const Web3Content = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  if (childrenOnly) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{children}</>;
+  }
+
   if (error) {
     return (
       <SplashWrapper>
@@ -85,7 +99,7 @@ export const Web3Content = ({
           {t('Connect your Ethereum wallet')}
         </p>
         <Button
-          onClick={() => setDialogOpen(true)}
+          onClick={() => openDialog(connectors, chainId)}
           data-testid="connect-eth-wallet-btn"
         >
           {t('Connect')}

libs/withdraws/src/index.ts

@@ -1,4 +1,4 @@
-export * from './lib/withdrawal-dialogs';
+export * from './lib/withdrawal-dialog';
 export * from './lib/withdraw-form';
 export * from './lib/withdraw-form-container';
 export * from './lib/withdraw-manager';

libs/withdraws/src/lib/withdrawal-dialog.tsx

@@ -1,3 +1,4 @@
+import create from 'zustand';
 import { t } from '@vegaprotocol/react-helpers';
 import { Dialog } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
@@ -5,35 +6,51 @@ import { useCompleteWithdraw } from './use-complete-withdraw';
 import { useCreateWithdraw } from './use-create-withdraw';
 import { WithdrawFormContainer } from './withdraw-form-container';
 import { WithdrawalFeedback } from './withdrawal-feedback';
-
+import { Web3Container } from '@vegaprotocol/web3';
-export const WithdrawalDialogs = ({
+import { useWeb3ConnectDialog } from '@vegaprotocol/web3';
-  withdrawDialog,
+interface State {
-  setWithdrawDialog,
+  isOpen: boolean;
-  assetId,
-}: {
-  withdrawDialog: boolean;
-  setWithdrawDialog: (open: boolean) => void;
   assetId?: string;
-}) => {
+}
+
+interface Actions {
+  open: (assetId?: string) => void;
+  close: () => void;
+}
+
+export const useWithdrawalDialog = create<State & Actions>((set) => ({
+  isOpen: false,
+  assetId: undefined,
+  open: (assetId) => set(() => ({ assetId, isOpen: true })),
+  close: () => set(() => ({ assetId: undefined, isOpen: false })),
+}));
+
+export const WithdrawalDialog = () => {
+  const { assetId, isOpen, open, close } = useWithdrawalDialog();
   const { pubKey } = useVegaWallet();
   const createWithdraw = useCreateWithdraw();
   const completeWithdraw = useCompleteWithdraw();
+  const connectWalletDialogIsOpen = useWeb3ConnectDialog(
+    (state) => state.isOpen
+  );
   return (
     <>
       <Dialog
         title={t('Withdraw')}
-        open={withdrawDialog}
+        open={isOpen && !connectWalletDialogIsOpen}
-        onChange={(isOpen) => setWithdrawDialog(isOpen)}
+        onChange={(isOpen) => (isOpen ? open() : close())}
         size="small"
       >
-        <WithdrawFormContainer
+        <Web3Container connectEagerly>
-          assetId={assetId}
+          <WithdrawFormContainer
-          partyId={pubKey ? pubKey : undefined}
+            assetId={assetId}
-          submit={(args) => {
+            partyId={pubKey ? pubKey : undefined}
-            setWithdrawDialog(false);
+            submit={(args) => {
-            createWithdraw.submit(args);
+              close();
-          }}
+              createWithdraw.submit(args);
-        />
+            }}
+          />
+        </Web3Container>
       </Dialog>
       <createWithdraw.Dialog
         content={{