diff --git a/apps/console-lite-e2e/src/integration/market-selector.test.ts b/apps/console-lite-e2e/src/integration/market-selector.test.ts index 3a4d913eb..fd3f6197c 100644 --- a/apps/console-lite-e2e/src/integration/market-selector.test.ts +++ b/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"]') diff --git a/apps/console-lite-e2e/src/integration/market-trade.test.ts b/apps/console-lite-e2e/src/integration/market-trade.test.ts index 1d81bad82..3fb92cc21 100644 --- a/apps/console-lite-e2e/src/integration/market-trade.test.ts +++ b/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 diff --git a/apps/console-lite-e2e/src/integration/portfolio-page.test.ts b/apps/console-lite-e2e/src/integration/portfolio-page.test.ts index f07f01ed7..91f7edc12 100644 --- a/apps/console-lite-e2e/src/integration/portfolio-page.test.ts +++ b/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', () => { diff --git a/apps/console-lite-e2e/src/support/mocks/generate-chain-id.ts b/apps/console-lite-e2e/src/support/mocks/generate-chain-id.ts new file mode 100644 index 000000000..5ed5794d6 --- /dev/null +++ b/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 => { + const defaultResult = { + statistics: { + __typename: 'Statistics', + chainId: 'test-chain-id', + }, + }; + + return merge(defaultResult, override); +}; diff --git a/apps/console-lite-e2e/src/support/mocks/generate-statistics.ts b/apps/console-lite-e2e/src/support/mocks/generate-statistics.ts new file mode 100644 index 000000000..4b762e4db --- /dev/null +++ b/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 => { + const defaultResult = { + statistics: { + __typename: 'Statistics', + chainId: 'test-chain-id', + blockHeight: '11', + }, + }; + + return merge(defaultResult, override); +}; diff --git a/apps/console-lite-e2e/src/support/vega-wallet.ts b/apps/console-lite-e2e/src/support/vega-wallet.ts new file mode 100644 index 000000000..840a47c4e --- /dev/null +++ b/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(); +}; diff --git a/apps/console-lite/src/app/components/deposits/deposits.tsx b/apps/console-lite/src/app/components/deposits/deposits.tsx index 52c9d2a76..cdb447acc 100644 --- a/apps/console-lite/src/app/components/deposits/deposits.tsx +++ b/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 (
- -
diff --git a/apps/token/src/routes/withdrawals/index.tsx b/apps/token/src/routes/withdrawals/index.tsx index f11622b19..8c53761af 100644 --- a/apps/token/src/routes/withdrawals/index.tsx +++ b/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 = () => { <>

{t('withdrawalsPreparedWarningHeading')}

-
@@ -67,10 +66,6 @@ const WithdrawPendingContainer = () => {

{t('Withdrawal history')}

- ); }; diff --git a/apps/trading-e2e/src/integration/deposit.cy.ts b/apps/trading-e2e/src/integration/deposit.cy.ts index 91f44df28..c96397bcb 100644 --- a/apps/trading-e2e/src/integration/deposit.cy.ts +++ b/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'); }); diff --git a/apps/trading-e2e/src/integration/trading-accounts.cy.ts b/apps/trading-e2e/src/integration/trading-accounts.cy.ts index cd3584436..2b13d38b6 100644 --- a/apps/trading-e2e/src/integration/trading-accounts.cy.ts +++ b/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') diff --git a/apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts b/apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts index 9b15fedf8..992237a03 100644 --- a/apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts +++ b/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(); diff --git a/apps/trading/client-pages/portfolio/deposits-container.tsx b/apps/trading/client-pages/portfolio/deposits-container.tsx index b8e62c1f6..bc0019bfd 100644 --- a/apps/trading/client-pages/portfolio/deposits-container.tsx +++ b/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 (
@@ -20,14 +19,10 @@ export const DepositsContainer = () => { }} />
-
- ); diff --git a/apps/trading/components/accounts-container/accounts-container.tsx b/apps/trading/components/accounts-container/accounts-container.tsx index 5182d4032..3b5ba1f66 100644 --- a/apps/trading/components/accounts-container/accounts-container.tsx +++ b/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 { Web3Container } from '@vegaprotocol/web3'; +import { useWithdrawalDialog } from '@vegaprotocol/withdraws'; 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(); + 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 ( @@ -43,38 +31,20 @@ export const AccountsContainer = () => { } return ( - -
-
- -
-
- -
+
+
+
- - - +
+ +
+
); }; diff --git a/apps/trading/pages/dialogs-container.tsx b/apps/trading/pages/dialogs-container.tsx index 06dd2e1bc..4e38d6d47 100644 --- a/apps/trading/pages/dialogs-container.tsx +++ b/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} /> + + + + + ); }; diff --git a/libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx b/libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx index e326924b1..2c6d97933 100644 --- a/libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx +++ b/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 } from '@vegaprotocol/deposits'; +import { DepositDialog, useDepositDialog } 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 ( <>
{ {t('You may not have enough margin available to open this position.')}{' '} setDepositDialog(true)} + onClick={() => openDepositDialog(asset.id)} > {t(`Deposit ${asset.symbol}`)} @@ -39,11 +38,7 @@ export const MarginWarning = ({ margin, balance, asset }: Props) => { )} ${asset.symbol} ${t('available')}`}

- + ); }; diff --git a/libs/deal-ticket/src/components/deal-ticket-validation/zero-balance-error.tsx b/libs/deal-ticket/src/components/deal-ticket-validation/zero-balance-error.tsx index 48a095b92..b92b9034c 100644 --- a/libs/deal-ticket/src/components/deal-ticket-validation/zero-balance-error.tsx +++ b/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 { DepositDialog } from '@vegaprotocol/deposits'; - +import { useDepositDialog } 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 ( - <> - -

- {t('Insufficient balance. ')} - setDepositDialog(true)} - > - {t(`Deposit ${asset.symbol}`)} - -

- - - + +

+ {t('Insufficient balance. ')} + openDepositDialog(asset.id)} + > + {t(`Deposit ${asset.symbol}`)} + +

+ ); }; diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-container.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-container.tsx index ad02e48db..c2e20c86d 100644 --- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-container.tsx +++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-container.tsx @@ -27,7 +27,6 @@ export const DealTicketContainer = ({ ) ) : ( - {JSON.stringify(data)}

{t('Could not load market')}

 )} diff --git a/libs/deposits/src/lib/deposit-container.tsx b/libs/deposits/src/lib/deposit-container.tsx index d8d3ec828..0086707e6 100644 --- a/libs/deposits/src/lib/deposit-container.tsx +++ b/libs/deposits/src/lib/deposit-container.tsx @@ -24,7 +24,7 @@ export const DepositContainer = ({ return ( {data && data.length ? ( - + void; } +interface Actions { + open: (assetId?: string) => void; + close: () => void; +} + +export const useDepositDialog = create((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 = ({ - assetId, - depositDialog, - setDepositDialog, -}: DepositDialogProps) => { +export const DepositDialog = () => { + const { assetId, isOpen, open, close } = useDepositDialog(); + const connectWalletDialogIsOpen = useWeb3ConnectDialog( + (state) => state.isOpen + ); const [dialogStyleProps, _setDialogStyleProps] = useState(DEFAULT_STYLE); const setDialogStyleProps: DepositDialogStylePropsSetter = useCallback( @@ -41,8 +55,8 @@ export const DepositDialog = ({ ); return ( (isOpen ? open() : close())} {...dialogStyleProps} > { const [networkError, setNetworkError] = useState(); - const [isNodeSwitcherOpen, setNodeSwitcherOpen] = useState(false); + const [isNodeSwitcherOpen, setNodeSwitcherIsOpen] = useState(false); const [environment, updateEnvironment] = useState( 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 = ({ }} > void; + close: () => void; +} + +export const useWeb3ConnectDialog = create((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 ( + + ); +}; + function getConnectorInfo(connector: Connector) { if (connector instanceof MetaMask) { return { diff --git a/libs/web3/src/lib/web3-container.spec.tsx b/libs/web3/src/lib/web3-container.spec.tsx index d456b8461..509fe8ddd 100644 --- a/libs/web3/src/lib/web3-container.spec.tsx +++ b/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) {
+ ); } diff --git a/libs/web3/src/lib/web3-container.tsx b/libs/web3/src/lib/web3-container.tsx index dd5732e3e..686a54c38 100644 --- a/libs/web3/src/lib/web3-container.tsx +++ b/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) => { - const [dialogOpen, setDialogOpen] = useState(false); +export const Web3Container = ({ + 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 ( - {Connectors && config && ( - + {connectors && config && ( + {children} - )} @@ -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; } 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 ( @@ -85,7 +99,7 @@ export const Web3Content = ({ {t('Connect your Ethereum wallet')}