LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat(trading): 4322 get started steps (#4440)

Browse Source
This commit is contained in:
Maciek 2023-08-02 17:34:04 +02:00 committed by GitHub
parent 918825aca8
commit bb9fce4831
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
50 changed files with 518 additions and 394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/governance/src/routes/proposals/components/proposal-market-data/proposal-market-data.tsx
View File

@ -200,7 +200,7 @@ export const ProposalMarketData = ({
title={marketData.tradableInstrument.instrument.code}
open={isOpen}
onChange={(isOpen) => (isOpen ? open() : close())}
size="medium"
size="large"
dataTestId="market-json-dialog"
>
<CopyWithTooltip text={JSON.stringify(marketData)}>

2
apps/liquidity-provision-dashboard/src/app/components/health-dialog/health-dialog.tsx
View File

@ -57,7 +57,7 @@ const ROWS = [
export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
return (
<Dialog size="medium" open={isOpen} onChange={onChange}>
<Dialog size="large" open={isOpen} onChange={onChange}>
<h1 className="text-2xl mb-5 pr-2 font-medium font-alpha uppercase">
{t('Health')}
</h1>

1
apps/trading-e2e/src/integration/charts-depth.cy.ts
View File

@ -2,6 +2,7 @@ describe('charts', { tags: '@smoke' }, () => {
before(() => {
cy.mockTradingPage();
cy.mockSubscription();
cy.setOnBoardingViewed();
cy.visit('/#/markets/market-0');
cy.wait('@Markets');
cy.getByTestId('Depth').click();

2
apps/trading-e2e/src/integration/closed-markets.cy.ts
View File

@ -202,6 +202,7 @@ describe('Closed markets', { tags: '@smoke' }, () => {
const specDataConnection = createDataConnection();
before(() => {
cy.setOnBoardingViewed();
cy.mockGQL((req) => {
aliasGQLQuery(req, 'ChainId', chainIdQuery());
aliasGQLQuery(req, 'Statistics', statisticsQuery());
@ -455,6 +456,7 @@ describe('no closed markets', { tags: '@smoke', testIsolation: true }, () => {
before(() => {
cy.mockTradingPage();
cy.mockSubscription();
cy.setOnBoardingViewed();
cy.visit('/#/markets/all');
cy.get('[data-testid="Closed markets"]').click();
});

1
apps/trading-e2e/src/integration/home-node-network.cy.ts
View File

@ -4,6 +4,7 @@ const nodeHealthTrigger = 'node-health-trigger';
describe('home', { tags: '@regression' }, () => {
before(() => {
cy.setOnBoardingViewed();
cy.mockTradingPage();
cy.mockSubscription();
cy.visit('/');

75
apps/trading-e2e/src/integration/home.cy.ts
View File

@ -2,7 +2,7 @@ import { aliasGQLQuery } from '@vegaprotocol/cypress';
import type { ProposalListFieldsFragment } from '@vegaprotocol/proposals';
import * as Schema from '@vegaprotocol/types';
const dialogContent = 'dialog-content';
const dialogContent = 'welcome-dialog';
const generateProposal = (code: string): ProposalListFieldsFragment => ({
__typename: 'Proposal',
@ -140,43 +140,43 @@ describe('home', { tags: '@regression' }, () => {
cy.wait('@MarketsData');
});
it('redirects to market/all and displays welcome notice', () => {
it('close welcome dialog should redirect to market/all', () => {
cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/all`);
cy.getByTestId('welcome-notice-title').should(
'contain.text',
'Welcome to Console'
);
});
});
describe('no proposal nor markets found', () => {
it('there are welcome text and a link to propose market', () => {
cy.mockGQL((req) => {
const data = {
marketsConnection: {
__typename: 'MarketConnection',
edges: [],
},
};
aliasGQLQuery(req, 'Markets', data);
aliasGQLQuery(req, 'MarketsData', data);
aliasGQLQuery(req, 'ProposalsList', {
proposalsConnection: {
__typename: 'ProposalsConnection',
edges: null,
},
});
cy.getByTestId('welcome-dialog').should('be.visible');
cy.getByTestId('welcome-title').should('contain.text', 'Console CUSTOM');
cy.getByTestId('browse-markets-button').should('not.be.disabled');
cy.getByTestId('get-started-banner').should('be.visible');
cy.getByTestId('get-started-button').should('not.be.disabled');
cy.getByTestId('dialog-close').click();
cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/all`);
cy.window().then((window) => {
expect(window.localStorage.getItem('vega_onboarding_viewed')).to.equal(
'true'
);
});
cy.visit('/');
cy.wait('@Markets');
cy.wait('@MarketsData');
cy.getByTestId('welcome-notice-title').should(
'contain.text',
'Welcome to Console'
);
cy.getByTestId('external-link')
.contains('Propose a market')
.should('exist');
});
it('click browse markets button should redirect to market/all', () => {
cy.getByTestId('welcome-dialog').should('be.visible');
cy.getByTestId('browse-markets-button').click();
cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/all`);
cy.window().then((window) => {
expect(window.localStorage.getItem('vega_onboarding_viewed')).to.equal(
'true'
);
});
});
it('click get started button should open connect dialog', () => {
cy.getByTestId('welcome-dialog').should('be.visible');
cy.getByTestId('get-started-button').click();
cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/all`);
cy.window().then((window) => {
expect(window.localStorage.getItem('vega_onboarding_viewed')).to.equal(
'true'
);
});
cy.getByTestId('wallet-dialog-title').should('contain.text', 'Connect');
});
});
@ -185,7 +185,7 @@ describe('home', { tags: '@regression' }, () => {
cy.window().then((window) => {
window.localStorage.setItem('marketId', 'market-1');
cy.visit('/');
cy.wait('@Markets');
cy.getByTestId('dialog-close').click();
cy.location('hash').should('equal', '#/markets/market-1');
cy.getByTestId(dialogContent).should('not.exist');
});
@ -199,6 +199,7 @@ describe('home', { tags: '@regression' }, () => {
});
cy.visit('/');
cy.wait('@Markets');
cy.getByTestId('dialog-close').click();
cy.location('hash').should('equal', '#/markets/market-not-existing');
cy.getByTestId(dialogContent).should('not.exist');
});

2
apps/trading-e2e/src/integration/market-all.cy.ts
View File

@ -9,6 +9,7 @@ const colInstrumentCode = '[col-id="tradableInstrument.instrument.code"]';
describe('markets all table', { tags: '@smoke' }, () => {
beforeEach(() => {
cy.clearLocalStorage().then(() => {
cy.setOnBoardingViewed();
cy.mockTradingPage(
Schema.MarketState.STATE_ACTIVE,
Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
@ -199,6 +200,7 @@ describe('no open markets', { tags: '@smoke', testIsolation: true }, () => {
aliasGQLQuery(req, 'Markets', markets);
});
cy.mockSubscription();
cy.setOnBoardingViewed();
cy.visit('/#/markets/all');
});

1
apps/trading-e2e/src/integration/market-info.cy.ts
View File

@ -21,6 +21,7 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
});
before(() => {
cy.setOnBoardingViewed();
cy.mockTradingPage(MarketState.STATE_ACTIVE);
cy.mockSubscription();
cy.visit('/#/markets/market-0');

2
apps/trading-e2e/src/integration/market-liquidity.cy.ts
View File

@ -36,6 +36,7 @@ const headers = [
describe('liquidity table - trading', { tags: '@smoke' }, () => {
before(() => {
cy.setOnBoardingViewed();
cy.mockSubscription();
cy.mockTradingPage(
Schema.MarketState.STATE_ACTIVE,
@ -119,6 +120,7 @@ describe('liquidity table - trading', { tags: '@smoke' }, () => {
describe('liquidity table view', { tags: '@smoke' }, () => {
before(() => {
cy.setOnBoardingViewed();
cy.mockSubscription();
cy.mockTradingPage(
Schema.MarketState.STATE_ACTIVE,

1
apps/trading-e2e/src/integration/market-selector.cy.ts
View File

@ -12,6 +12,7 @@ describe('markets selector', { tags: '@smoke' }, () => {
cy.window().then((window) => {
window.localStorage.setItem('marketId', 'market-1');
});
cy.setOnBoardingViewed();
cy.mockTradingPage(
MarketState.STATE_ACTIVE,
MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,

1
apps/trading-e2e/src/integration/market-summary.cy.ts
View File

@ -30,6 +30,7 @@ describe('Market trading page', () => {
Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
);
cy.mockSubscription();
cy.setOnBoardingViewed();
cy.visit('/#/markets/market-0');
cy.wait('@MarketData');
cy.getByTestId(marketSummaryBlock).should('be.visible');

2
apps/trading-e2e/src/integration/markets-proposed.cy.ts
View File

@ -9,6 +9,7 @@ describe('markets proposed table', { tags: '@smoke' }, () => {
before(() => {
cy.mockTradingPage();
cy.mockSubscription();
cy.setOnBoardingViewed();
cy.visit('/#/markets/all');
cy.get('[data-testid="Proposed markets"]').click();
});
@ -213,6 +214,7 @@ describe('no markets proposed', { tags: '@smoke', testIsolation: true }, () => {
aliasGQLQuery(req, 'ProposalsList', proposal);
});
cy.mockSubscription();
cy.setOnBoardingViewed();
});
it('can see no markets message', () => {

1
apps/trading-e2e/src/integration/markets.cy.ts
View File

@ -12,6 +12,7 @@ describe('markets table', { tags: '@smoke' }, () => {
Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
);
cy.mockSubscription();
cy.setOnBoardingViewed();
cy.visit('/#/markets/all');
});
});

1
apps/trading-e2e/src/integration/oracle.cy.ts
View File

@ -6,6 +6,7 @@ const oracleFullProfile = 'oracle-full-profile';
describe('oracle information', { tags: '@smoke' }, () => {
before(() => {
cy.setOnBoardingViewed();
cy.mockTradingPage(
MarketState.STATE_ACTIVE,
undefined,

1
apps/trading-e2e/src/integration/order-book.cy.ts
View File

@ -14,6 +14,7 @@ const resPrice = 'price-990';
describe('order book', { tags: '@smoke' }, () => {
before(() => {
cy.setOnBoardingViewed();
cy.mockTradingPage();
cy.mockSubscription();
cy.visit('/#/markets/market-0');

1
apps/trading-e2e/src/integration/settings.cy.ts
View File

@ -4,6 +4,7 @@ describe('Settings page', { tags: '@smoke' }, () => {
cy.mockTradingPage();
cy.mockSubscription();
cy.setOnBoardingViewed();
cy.visit('/');
// Only click if not already active otherwise sidebar will close

1
apps/trading-e2e/src/integration/trading-chart.cy.ts
View File

@ -77,6 +77,7 @@ function getButtonSelectorByText(text: string): string {
beforeEach(() => {
cy.mockTradingPage();
cy.mockSubscription();
cy.setOnBoardingViewed();
cy.visit('/#/markets/market-0');
cy.wait('@Markets');
});

1
apps/trading-e2e/src/integration/trading-deal-ticket-basics.cy.ts
View File

@ -14,6 +14,7 @@ describe('deal ticket basics', { tags: '@smoke' }, () => {
cy.mockTradingPage();
cy.mockSubscription();
cy.clearAllLocalStorage();
cy.setOnBoardingViewed();
cy.visit('/#/markets/market-0');
cy.wait('@Markets');
});

1
apps/trading-e2e/src/integration/trading-deal-ticket-time-in-force.cy.ts
View File

@ -15,6 +15,7 @@ describe('time in force validation', { tags: '@smoke' }, () => {
cy.mockTradingPage();
cy.mockSubscription();
cy.clearAllLocalStorage();
cy.setOnBoardingViewed();
cy.visit('/#/markets/market-0');
cy.wait('@Markets');
});

1
apps/trading-e2e/src/integration/trading-trades.cy.ts
View File

@ -9,6 +9,7 @@ describe('trades', { tags: '@smoke' }, () => {
before(() => {
cy.mockTradingPage();
cy.mockSubscription();
cy.setOnBoardingViewed();
cy.intercept('POST', '/graphql', (req) => {
if (req.body.operationName === 'Trades') {
req.alias = '@Trades';

2
apps/trading-e2e/src/integration/wallet-vega.cy.ts
View File

@ -17,6 +17,7 @@ describe(
cy.visit('/#/portfolio');
cy.mockTradingPage();
cy.mockSubscription();
cy.setOnBoardingViewed();
cy.get('[data-testid="pathname-/portfolio"]').should('exist');
});
@ -122,6 +123,7 @@ describe('connect vega wallet', { tags: '@smoke', testIsolation: true }, () => {
cy.visit('/#/portfolio');
cy.mockTradingPage();
cy.mockSubscription();
cy.setOnBoardingViewed();
cy.get('[data-testid="pathname-/portfolio"]').should('exist');
});

1
apps/trading/client-pages/home/home.tsx
View File

@ -23,7 +23,6 @@ export const Home = () => {
replace: true,
});
} else if (data) {
update({ shouldDisplayWelcomeDialog: true });
const marketDataId = data[0]?.id;
if (marketDataId) {
navigate(Links[Routes.MARKET](marketDataId), {

69
apps/trading/client-pages/market/trade-grid.tsx
View File

@ -10,7 +10,6 @@ import type { Market } from '@vegaprotocol/markets';
import { Filter } from '@vegaprotocol/orders';
import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
import { VegaWalletContainer } from '../../components/vega-wallet-container';
import {
ResizableGrid,
ResizableGridPanel,
@ -99,64 +98,48 @@ const MainGrid = memo(
<TradeGridChild>
<Tabs storageKey="console-trade-grid-bottom">
<Tab id="positions" name={t('Positions')}>
<VegaWalletContainer>
<TradingViews.positions.component
onMarketClick={onMarketClick}
/>
</VegaWalletContainer>
<TradingViews.positions.component
onMarketClick={onMarketClick}
/>
</Tab>
<Tab id="open-orders" name={t('Open')}>
<VegaWalletContainer>
<TradingViews.orders.component
marketId={marketId}
filter={Filter.Open}
/>
</VegaWalletContainer>
<TradingViews.orders.component
marketId={marketId}
filter={Filter.Open}
/>
</Tab>
<Tab id="closed-orders" name={t('Closed')}>
<VegaWalletContainer>
<TradingViews.orders.component
marketId={marketId}
filter={Filter.Closed}
/>
</VegaWalletContainer>
<TradingViews.orders.component
marketId={marketId}
filter={Filter.Closed}
/>
</Tab>
<Tab id="rejected-orders" name={t('Rejected')}>
<VegaWalletContainer>
<TradingViews.orders.component
marketId={marketId}
filter={Filter.Rejected}
/>
</VegaWalletContainer>
<TradingViews.orders.component
marketId={marketId}
filter={Filter.Rejected}
/>
</Tab>
<Tab id="orders" name={t('All')}>
<VegaWalletContainer>
<TradingViews.orders.component marketId={marketId} />
</VegaWalletContainer>
<TradingViews.orders.component marketId={marketId} />
</Tab>
{FLAGS.STOP_ORDERS ? (
<Tab id="stop-orders" name={t('Stop orders')}>
<VegaWalletContainer>
<TradingViews.stopOrders.component />
</VegaWalletContainer>
<TradingViews.stopOrders.component />
</Tab>
) : null}
<Tab id="fills" name={t('Fills')}>
<VegaWalletContainer>
<TradingViews.fills.component
marketId={marketId}
onMarketClick={onMarketClick}
/>
</VegaWalletContainer>
<TradingViews.fills.component
marketId={marketId}
onMarketClick={onMarketClick}
/>
</Tab>
<Tab id="accounts" name={t('Collateral')}>
<VegaWalletContainer>
<TradingViews.collateral.component
pinnedAsset={pinnedAsset}
onMarketClick={onMarketClick}
hideButtons
/>
</VegaWalletContainer>
<TradingViews.collateral.component
pinnedAsset={pinnedAsset}
onMarketClick={onMarketClick}
hideButtons
/>
</Tab>
</Tabs>
</TradeGridChild>

2
apps/trading/client-pages/portfolio/account-history-container.tsx
View File

@ -71,7 +71,7 @@ export const AccountHistoryContainer = () => {
const { data: assets } = useAssetsDataProvider();
if (!pubKey) {
return <Splash>{t('Connect wallet')}</Splash>;
return <Splash>{t('Please connect Vega wallet')}</Splash>;
}
return (

29
apps/trading/client-pages/portfolio/portfolio.tsx
View File

@ -13,7 +13,6 @@ import { FillsContainer } from '../../components/fills-container';
import { PositionsContainer } from '../../components/positions-container';
import { WithdrawalsContainer } from './withdrawals-container';
import { OrdersContainer } from '../../components/orders-container';
import { VegaWalletContainer } from '../../components/vega-wallet-container';
import { LedgerContainer } from '../../components/ledger-container';
import { AccountHistoryContainer } from './account-history-container';
import {
@ -62,29 +61,19 @@ export const Portfolio = () => {
<PortfolioGridChild>
<Tabs storageKey="console-portfolio-top">
<Tab id="account-history" name={t('Account history')}>
<VegaWalletContainer>
<AccountHistoryContainer />
</VegaWalletContainer>
<AccountHistoryContainer />
</Tab>
<Tab id="positions" name={t('Positions')}>
<VegaWalletContainer>
<PositionsContainer onMarketClick={onMarketClick} allKeys />
</VegaWalletContainer>
<PositionsContainer onMarketClick={onMarketClick} allKeys />
</Tab>
<Tab id="orders" name={t('Orders')}>
<VegaWalletContainer>
<OrdersContainer />
</VegaWalletContainer>
<OrdersContainer />
</Tab>
<Tab id="fills" name={t('Fills')}>
<VegaWalletContainer>
<FillsContainer onMarketClick={onMarketClick} />
</VegaWalletContainer>
<FillsContainer onMarketClick={onMarketClick} />
</Tab>
<Tab id="ledger-entries" name={t('Ledger entries')}>
<VegaWalletContainer>
<LedgerContainer />
</VegaWalletContainer>
<LedgerContainer />
</Tab>
</Tabs>
</PortfolioGridChild>
@ -97,14 +86,10 @@ export const Portfolio = () => {
<PortfolioGridChild>
<Tabs storageKey="console-portfolio-bottom">
<Tab id="collateral" name={t('Collateral')}>
<VegaWalletContainer>
<AccountsContainer />
</VegaWalletContainer>
<AccountsContainer />
</Tab>
<Tab id="deposits" name={t('Deposits')}>
<VegaWalletContainer>
<DepositsContainer />
</VegaWalletContainer>
<DepositsContainer />
</Tab>
<Tab
id="withdrawals"

5
apps/trading/client-pages/portfolio/withdrawals-container.tsx
View File

@ -7,7 +7,6 @@ import {
import { useVegaWallet } from '@vegaprotocol/wallet';
import { t } from '@vegaprotocol/i18n';
import { useDataProvider } from '@vegaprotocol/data-provider';
import { VegaWalletContainer } from '../../components/vega-wallet-container';
import { ViewType, useSidebar } from '../../components/sidebar';
export const WithdrawalsContainer = () => {
@ -21,7 +20,7 @@ export const WithdrawalsContainer = () => {
const { ready, delayed } = useIncompleteWithdrawals();
return (
<VegaWalletContainer>
<>
<div className="h-full relative">
<WithdrawalsTable
data-testid="withdrawals-history"
@ -43,6 +42,6 @@ export const WithdrawalsContainer = () => {
</Button>
</div>
)}
</VegaWalletContainer>
</>
);
};

2
apps/trading/components/accounts-container/accounts-container.tsx
View File

@ -1,8 +1,8 @@
import { useCallback } from 'react';
import { Button } from '@vegaprotocol/ui-toolkit';
import { t } from '@vegaprotocol/i18n';
import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
import { Splash } from '@vegaprotocol/ui-toolkit';
import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
import { useVegaWallet } from '@vegaprotocol/wallet';
import type { PinnedAsset } from '@vegaprotocol/accounts';
import { AccountManager } from '@vegaprotocol/accounts';

2
apps/trading/components/constants.ts
View File

@ -1,7 +1,7 @@
import { t } from '@vegaprotocol/i18n';
export const THROTTLE_UPDATE_TIME = 500;
export const RISK_ACCEPTED_KEY = 'vega_risk_accepted';
export const ONBOARDING_VIEWED_KEY = 'vega_onboarding_viewed';
export const MAINNET_WELCOME_HEADER = t(
'Trade cash settled futures on the fully decentralised Vega network.'
);

4
apps/trading/components/fills-container/fills-container.tsx
View File

@ -1,10 +1,10 @@
import { t } from '@vegaprotocol/i18n';
import { Splash } from '@vegaprotocol/ui-toolkit';
import { useVegaWallet } from '@vegaprotocol/wallet';
import { FillsManager } from '@vegaprotocol/fills';
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { useDataGridEvents } from '@vegaprotocol/datagrid';
import { t } from '@vegaprotocol/i18n';
import { Splash } from '@vegaprotocol/ui-toolkit';
import type { DataGridSlice } from '../../stores/datagrid-store-slice';
import { createDataGridSlice } from '../../stores/datagrid-store-slice';

3
apps/trading/components/orders-container/orders-container.tsx
View File

@ -1,7 +1,6 @@
import { useDataGridEvents } from '@vegaprotocol/datagrid';
import { Filter, OrderListManager } from '@vegaprotocol/orders';
import { t } from '@vegaprotocol/i18n';
import { Filter } from '@vegaprotocol/orders';
import { OrderListManager } from '@vegaprotocol/orders';
import { Splash } from '@vegaprotocol/ui-toolkit';
import { useVegaWallet } from '@vegaprotocol/wallet';
import {

4
apps/trading/components/sidebar/sidebar.spec.tsx
View File

@ -19,6 +19,10 @@ jest.mock('../settings', () => ({
Settings: () => <div data-testid="settings" />,
}));
jest.mock('../welcome-dialog', () => ({
GetStarted: () => <div data-testid="get-started" />,
}));
describe('Sidebar', () => {
it.each(['/markets/all', '/portfolio'])(
'does not render ticket and info',

5
apps/trading/components/sidebar/sidebar.tsx
View File

@ -15,6 +15,7 @@ import { Tooltip } from '../../components/tooltip';
import { WithdrawContainer } from '../withdraw-container';
import { Routes as AppRoutes } from '../../pages/client-router';
import { persist } from 'zustand/middleware';
import { GetStarted } from '../welcome-dialog';
const STORAGE_KEY = 'vega_sidebar_store';
@ -184,6 +185,7 @@ export const SidebarContent = () => {
setView({ type: ViewType.Deposit, assetId })
}
/>
<GetStarted />
</ContentWrapper>
);
} else {
@ -207,6 +209,7 @@ export const SidebarContent = () => {
return (
<ContentWrapper title={t('Deposit')}>
<DepositContainer assetId={view.assetId} />
<GetStarted />
</ContentWrapper>
);
}
@ -215,6 +218,7 @@ export const SidebarContent = () => {
return (
<ContentWrapper title={t('Withdraw')}>
<WithdrawContainer assetId={view.assetId} />
<GetStarted />
</ContentWrapper>
);
}
@ -223,6 +227,7 @@ export const SidebarContent = () => {
return (
<ContentWrapper title={t('Transfer')}>
<TransferContainer assetId={view.assetId} />
<GetStarted />
</ContentWrapper>
);
}

10
apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.spec.tsx
View File

@ -27,6 +27,16 @@ describe('VegaWalletConnectButton', () => {
it('should fire dialog when not connected', () => {
render(generateJsx({ pubKey: null } as VegaWalletContextShape));
const button = screen.getByTestId('connect-vega-wallet');
expect(button).toHaveTextContent('Get started');
fireEvent.click(button);
expect(mockUpdateDialogOpen).toHaveBeenCalled();
});
it('should render "Connect" when browser wallet is detected', () => {
window.vega = window.vega || ({} as Vega);
render(generateJsx({ pubKey: null } as VegaWalletContextShape));
const button = screen.getByTestId('connect-vega-wallet');
expect(button).toHaveTextContent('Connect');
fireEvent.click(button);

7
apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
View File

@ -1,5 +1,6 @@
import { useMemo, useState } from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
import { isBrowserWalletInstalled } from '@vegaprotocol/wallet';
import { truncateByChars } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import {
@ -37,7 +38,7 @@ export const VegaWalletConnectButton = () => {
fetchPubKeys,
} = useVegaWallet();
const isConnected = pubKey !== null;
const walletInstalled = isBrowserWalletInstalled();
const activeKey = useMemo(() => {
return pubKeys?.find((pk) => pk.publicKey === pubKey);
}, [pubKey, pubKeys]);
@ -118,7 +119,9 @@ export const VegaWalletConnectButton = () => {
intent={Intent.None}
icon={<VegaIcon name={VegaIconNames.ARROW_RIGHT} size={14} />}
>
<span className="whitespace-nowrap uppercase">{t('Connect')}</span>
<span className="whitespace-nowrap uppercase">
{walletInstalled ? t('Connect') : t('Get started')}
</span>
</Button>
);
};

86
apps/trading/components/welcome-dialog/get-started.tsx Normal file
View File

@ -0,0 +1,86 @@
import classNames from 'classnames';
import { t } from '@vegaprotocol/i18n';
import { ExternalLink, Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
import {
useVegaWallet,
useVegaWalletDialogStore,
isBrowserWalletInstalled,
} from '@vegaprotocol/wallet';
import { Networks, useEnvironment } from '@vegaprotocol/environment';
import { useLocalStorage } from '@vegaprotocol/react-helpers';
import * as constants from '../constants';
interface Props {
lead?: string;
}
export const GetStarted = ({ lead }: Props) => {
const { pubKey } = useVegaWallet();
const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
const CANONICAL_URL = VEGA_NETWORKS[VEGA_ENV] || 'https://console.vega.xyz';
const [, setOnboardingViewed] = useLocalStorage(
constants.ONBOARDING_VIEWED_KEY
);
const openVegaWalletDialog = useVegaWalletDialogStore(
(store) => store.openVegaWalletDialog
);
const onButtonClick = () => {
openVegaWalletDialog();
setOnboardingViewed('true');
};
if (!pubKey && !isBrowserWalletInstalled()) {
return (
<div
className={classNames(
'flex flex-col bg-vega-blue-300 dark:bg-vega-blue-700 border border-vega-blue-350 dark:border-vega-blue-650 px-6 gap-4',
{ 'py-4': lead },
{ 'mt-8 py-6': !lead }
)}
data-testid="get-started-banner"
>
{lead && <h2>{lead}</h2>}
<h3>{t('Get started')}</h3>
<div>
<ul className="list-decimal list-inside">
<li>{t('Get a Vega wallet')}</li>
<li>{t('Connect')}</li>
<li>{t('Deposit funds')}</li>
<li>{t('Open a position')}</li>
</ul>
</div>
<div>
<TradingButton
intent={Intent.Info}
onClick={onButtonClick}
className="block w-full"
data-testid="get-started-button"
>
{t('Get started')}
</TradingButton>
</div>
{VEGA_ENV === Networks.MAINNET && (
<p className="text-sm">
{t('Experiment for free with virtual assets on')}{' '}
<ExternalLink href={CANONICAL_URL}>
{t('Fairground Testnet')}
</ExternalLink>
</p>
)}
{VEGA_ENV === Networks.TESTNET && (
<p className="text-sm">
{t('Ready to trade with real funds?')}{' '}
<ExternalLink href={CANONICAL_URL}>
{t('Switch to Mainnet')}
</ExternalLink>
</p>
)}
</div>
);
}
return null;
};

1
apps/trading/components/welcome-dialog/index.ts
View File

@ -1,2 +1,3 @@
export * from './welcome-dialog';
export * from './risk-message';
export * from './get-started';

50
apps/trading/components/welcome-dialog/risk-notice-dialog.spec.tsx
View File

@ -1,50 +0,0 @@
import { render, screen, fireEvent } from '@testing-library/react';
import { Networks, useEnvironment } from '@vegaprotocol/environment';
import { RiskNoticeDialog } from './risk-notice-dialog';
jest.mock('@vegaprotocol/environment');
const mockEnvDefinitions = {
VEGA_CONFIG_URL: 'https://config.url',
VEGA_URL: 'https://test.url',
VEGA_NETWORKS: JSON.stringify({}),
};
describe('Risk notice dialog', () => {
const mockOnClose = jest.fn();
afterEach(() => {
jest.clearAllMocks();
});
it.each`
assertion | network
${'displays'} | ${Networks.CUSTOM}
${'displays'} | ${Networks.DEVNET}
${'displays'} | ${Networks.TESTNET}
`(
'$assertion a generic message on $network',
async ({ assertion, network }) => {
// @ts-ignore ignore mock implementation
useEnvironment.mockImplementation(() => ({
...mockEnvDefinitions,
VEGA_ENV: network,
}));
render(<RiskNoticeDialog onClose={mockOnClose} network={network} />);
expect(
screen.getByText(
new RegExp(
`This application for trading on Vega is connected to ${network}`
)
)
).toBeInTheDocument();
const button = screen.getByRole('button', {
name: 'Continue',
});
fireEvent.click(button);
expect(mockOnClose).toHaveBeenCalled();
}
);
});

89
apps/trading/components/welcome-dialog/risk-notice-dialog.tsx
View File

@ -1,89 +0,0 @@
import { t } from '@vegaprotocol/i18n';
import {
Button,
Link,
VegaIcon,
VegaIconNames,
} from '@vegaprotocol/ui-toolkit';
import { RISK_ACCEPTED_KEY } from '../constants';
import { TelemetryApproval } from './telemetry-approval';
import type { Networks } from '@vegaprotocol/environment';
import {
useEnvironment,
DocsLinks,
ExternalLinks,
} from '@vegaprotocol/environment';
import { useLocalStorage } from '@vegaprotocol/react-helpers';
interface Props {
onClose: () => void;
network: Networks;
}
export const RiskNoticeDialog = ({ onClose, network }: Props) => {
const [, setValue] = useLocalStorage(RISK_ACCEPTED_KEY);
const handleAcceptRisk = () => {
onClose();
setValue('true');
};
return (
<TestnetContent network={network} handleAcceptRisk={handleAcceptRisk} />
);
};
const TestnetContent = ({
network,
handleAcceptRisk,
}: {
network: Networks;
handleAcceptRisk: () => void;
}) => {
const { GITHUB_FEEDBACK_URL } = useEnvironment();
return (
<>
<p className="mb-4">
{t(
'This application for trading on Vega is connected to %s, meaning you are free to try out trading with virtual assets and no risk.',
[network]
)}
</p>
<p className="mb-4">
{t(
'Your Vega wallet must also be connected to %s, and your Ethereum wallet must be connected to Sepolia.',
[network]
)}
</p>
{GITHUB_FEEDBACK_URL && DocsLinks && (
<ul className="list-disc pl-4">
<li className="mb-1">
<Link href={ExternalLinks.VEGA_WALLET_URL} target="_blank">
<span className="underline">{t('Get a Vega Wallet')}</span>{' '}
<VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
</Link>
</li>
<li className="mb-1">
<Link href={DocsLinks.VEGA_WALLET_TOOLS_URL} target="_blank">
<span className="underline">{t('Learn about Vega Wallet')}</span>{' '}
<VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
</Link>
</li>
<li className="mb-1">
<Link href={GITHUB_FEEDBACK_URL} target="_blank">
<span className="underline">{t('Provide feedback')}</span>{' '}
<VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
</Link>
</li>
</ul>
)}
<div className="my-4">
<TelemetryApproval
helpText={t(
'Help identify bugs and improve the service by sharing anonymous usage data. You can change this in your settings at any time.'
)}
/>
</div>
<Button onClick={handleAcceptRisk}>{t('Continue')}</Button>
</>
);
};

230
apps/trading/components/welcome-dialog/welcome-dialog-content.tsx Normal file
View File

@ -0,0 +1,230 @@
import { t } from '@vegaprotocol/i18n';
import { GetStarted } from './get-started';
import { TradingButton } from '@vegaprotocol/ui-toolkit';
import { useNavigate } from 'react-router-dom';
import { Links, Routes } from '../../pages/client-router';
import { useLocalStorage } from '@vegaprotocol/react-helpers';
import * as constants from '../constants';
import { Networks, useEnvironment } from '@vegaprotocol/environment';
export const WelcomeDialogContent = () => {
const { VEGA_ENV } = useEnvironment();
const [, setOnboardingViewed] = useLocalStorage(
constants.ONBOARDING_VIEWED_KEY
);
const navigate = useNavigate();
const browseMarkets = () => {
const link = Links[Routes.MARKETS]();
navigate(link);
setOnboardingViewed('true');
};
const lead =
VEGA_ENV === Networks.MAINNET
? t('Start trading on the worlds most advanced decentralised exchange.')
: t(
'Free from the risks of real trading, Fairground is a safe and fun place to try out Vega yourself with virtual assets.'
);
return (
<div className="flex flex-col pb-2">
<div className="flex gap-8">
<div className="w-1/2 flex flex-col justify-between pt-3">
<ul className="ml-0">
<li className="my-3 flex gap-3 text-default">
<div className="shrink-0 pt-1.5">
<svg
width="40"
height="40"
viewBox="0 0 30 30"
fill="currentColor"
>
<rect x="14" y="20" width="2" height="2" />
<rect x="12" y="18" width="2" height="2" />
<rect x="10" y="8" width="2" height="10" />
<rect x="16" y="18" width="2" height="2" />
<rect x="20" y="16" width="2" height="2" />
<rect x="18" y="8" width="2" height="8" />
<rect x="28" y="2" width="2" height="26" />
<rect y="2" width="2" height="26" />
<rect
x="28"
width="2"
height="26"
transform="rotate(90 28 0)"
/>
<rect
x="28"
y="28"
width="2"
height="26"
transform="rotate(90 28 28)"
/>
</svg>
</div>
<div>
<h3 className="text-lg">{t('Trade with no KYC')}</h3>
<span className="text-sm text-vega-clight-100 dark:text-vega-cdark-100 leading-4">
{t(
'Pseudonomously trade Futures markets. Spot and perps comming soon'
)}
</span>
</div>
</li>
<li className="my-3 flex gap-3 text-vega-clight-50 dark:text-vega-cdark-50">
<div className="shrink-0 pt-1.5">
<svg
width="40"
height="40"
viewBox="0 0 30 30"
fill="currentColor"
>
<g clip-path="url(#clip0_5168_49089)">
<path d="M22 7H18V9H22V7Z" />
<path d="M22 13H18V15H22V13Z" />
<path d="M24 17H16V19H24V17Z" />
<path d="M24 9H22V13H24V9Z" />
<path d="M18 9H16V13H18V9Z" />
<path d="M6 19H4V23H6V19Z" />
<path d="M16 19H14V23H16V19Z" />
<path d="M26 19H24V23H26V19Z" />
<path d="M12 7H8V9H12V7Z" />
<path d="M12 13H8V15H12V13Z" />
<path d="M14 17H6V19H14V17Z" />
<path d="M14 9H12V13H14V9Z" />
<path d="M8 9H6V13H8V9Z" />
<path d="M30 2H28V28H30V2Z" />
<path d="M2 2H0V28H2V2Z" />
<path d="M28 0H2V2H28V0Z" />
<path d="M28 28H2V30H28V28Z" />
</g>
<defs>
<clipPath id="clip0_5168_49089">
<rect width="30" height="30" />
</clipPath>
</defs>
</svg>
</div>
<div>
<h3 className="text-lg">
{t('Community generated trading pairs')}
</h3>
<span className="text-sm text-vega-clight-100 dark:text-vega-cdark-100 leading-4">
{t('All markets are proposed and enacted by the community')}
</span>
</div>
</li>
<li className="my-3 flex gap-3 text-vega-clight-50 dark:text-vega-cdark-50">
<div className="shrink-0 pt-1.5">
<svg
width="40"
height="40"
viewBox="0 0 30 30"
fill="currentColor"
>
<rect x="6" y="16" width="4" height="2" />
<rect x="10" y="14" width="2" height="2" />
<rect
x="12"
y="24"
width="4"
height="2"
transform="rotate(-90 12 24)"
/>
<rect
x="10"
y="20"
width="2"
height="2"
transform="rotate(-90 10 20)"
/>
<rect
x="20"
y="18"
width="4"
height="2"
transform="rotate(-180 20 18)"
/>
<rect
x="16"
y="20"
width="2"
height="2"
transform="rotate(-180 16 20)"
/>
<rect
x="16"
y="14"
width="2"
height="2"
transform="rotate(90 16 14)"
/>
<rect
x="22"
y="10"
width="2"
height="2"
transform="rotate(90 22 10)"
/>
<rect
x="20"
y="8"
width="2"
height="2"
transform="rotate(90 20 8)"
/>
<rect
x="24"
y="8"
width="2"
height="2"
transform="rotate(90 24 8)"
/>
<rect
x="22"
y="6"
width="2"
height="2"
transform="rotate(90 22 6)"
/>
<rect x="12" y="10" width="2" height="4" />
<rect x="28" y="2" width="2" height="26" />
<rect y="2" width="2" height="26" />
<rect
x="28"
width="2"
height="26"
transform="rotate(90 28 0)"
/>
<rect
x="28"
y="28"
width="2"
height="26"
transform="rotate(90 28 28)"
/>
</svg>
</div>
<div>
<h3 className="text-lg">{t('Rewards')}</h3>
<span className="text-sm text-vega-clight-100 dark:text-vega-cdark-100 leading-4">
{t(
'Earn rewards for trading, market making and providing liquidity'
)}
</span>
</div>
</li>
</ul>
<TradingButton
onClick={browseMarkets}
className="block w-full"
data-testid="browse-markets-button"
>
{t('Browse the markets')}
</TradingButton>
</div>
<div className="w-1/2 -mr-3 flex flex-grow">
<GetStarted lead={lead} />
</div>
</div>
</div>
);
};

90
apps/trading/components/welcome-dialog/welcome-dialog.tsx
View File

@ -1,68 +1,52 @@
import React, { useCallback } from 'react';
import { useLocation } from 'react-router-dom';
import { Dialog } from '@vegaprotocol/ui-toolkit';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
import { t } from '@vegaprotocol/i18n';
import { useLocalStorage } from '@vegaprotocol/react-helpers';
import { useDataProvider } from '@vegaprotocol/data-provider';
import { activeMarketsProvider } from '@vegaprotocol/markets';
import * as constants from '../constants';
import { RiskNoticeDialog } from './risk-notice-dialog';
import { WelcomeNoticeDialog } from './welcome-notice-dialog';
import { useGlobalStore } from '../../stores';
import { useEnvironment } from '@vegaprotocol/environment';
import { Networks } from '@vegaprotocol/environment';
import { isTestEnv } from '@vegaprotocol/utils';
import { isBrowserWalletInstalled } from '@vegaprotocol/wallet';
import * as constants from '../constants';
import { WelcomeDialogContent } from './welcome-dialog-content';
import { getConfig } from '@vegaprotocol/wallet';
import { Links, Routes } from '../../pages/client-router';
import { useGlobalStore } from '../../stores';
export const WelcomeDialog = () => {
const { VEGA_ENV } = useEnvironment();
const { pathname } = useLocation();
let dialogContent: React.ReactNode;
let title = '';
let size: 'small' | 'medium' = 'small';
let onClose: ((open: boolean) => void) | undefined = undefined;
const [riskAccepted] = useLocalStorage(constants.RISK_ACCEPTED_KEY);
const { data } = useDataProvider({
dataProvider: activeMarketsProvider,
variables: undefined,
});
const [onBoardingViewed, setOnboardingViewed] = useLocalStorage(
constants.ONBOARDING_VIEWED_KEY
);
const navigate = useNavigate();
const isOnboardingDialogNeeded =
onBoardingViewed !== 'true' && !isBrowserWalletInstalled() && !getConfig();
const marketId = useGlobalStore((store) => store.marketId);
const update = useGlobalStore((store) => store.update);
const shouldDisplayWelcomeDialog = useGlobalStore(
(store) => store.shouldDisplayWelcomeDialog
const onClose = () => {
setOnboardingViewed('true');
const link = marketId
? Links[Routes.MARKET](marketId)
: Links[Routes.HOME]();
navigate(link);
};
const title = (
<span className="font-alpha calt" data-testid="welcome-title">
{t('Console')}{' '}
<span className="text-vega-clight-100 dark:text-vega-cdark-100">
{VEGA_ENV}
</span>
</span>
);
const isRiskDialogNeeded =
riskAccepted !== 'true' && VEGA_ENV !== Networks.MAINNET && !isTestEnv();
const isWelcomeDialogNeeded = pathname === '/' || shouldDisplayWelcomeDialog;
const onCloseDialog = useCallback(() => {
update({
shouldDisplayWelcomeDialog: isRiskDialogNeeded,
});
}, [update, isRiskDialogNeeded]);
if (isRiskDialogNeeded) {
dialogContent = (
<RiskNoticeDialog onClose={onCloseDialog} network={VEGA_ENV} />
);
title = t('Vega Console');
size = 'medium';
} else if (isWelcomeDialogNeeded && data?.length === 0) {
dialogContent = <WelcomeNoticeDialog />;
onClose = onCloseDialog;
} else {
dialogContent = null as React.ReactNode;
}
return (
return isOnboardingDialogNeeded ? (
<Dialog
open={Boolean(dialogContent)}
open
title={title}
size={size}
size="medium"
onChange={onClose}
intent={Intent.None}
dataTestId="welcome-dialog"
>
{dialogContent}
<WelcomeDialogContent />
</Dialog>
);
) : null;
};

71
apps/trading/components/welcome-dialog/welcome-notice-dialog.tsx
View File

@ -1,71 +0,0 @@
import { ExternalLink } from '@vegaprotocol/ui-toolkit';
import { t } from '@vegaprotocol/i18n';
import {
DApp,
Networks,
TOKEN_NEW_MARKET_PROPOSAL,
TOKEN_PROPOSALS,
useEnvironment,
useLinks,
ExternalLinks,
} from '@vegaprotocol/environment';
import { ProposedMarkets } from './proposed-markets';
import { TelemetryApproval } from './telemetry-approval';
export const WelcomeNoticeDialog = () => {
const { VEGA_ENV } = useEnvironment();
const tokenLink = useLinks(DApp.Token);
const consoleFairgroundLink = useLinks(DApp.Console, Networks.TESTNET);
const isMainnet = VEGA_ENV === Networks.MAINNET;
return (
<>
<h1
data-testid="welcome-notice-title"
className="text-2xl uppercase mb-6 text-center font-alpha calt"
>
{t('Welcome to Console')}
</h1>
<p className="leading-6 mb-4">
{t(
'There are no markets to trade on right now. Trading on Vega is now live, but markets need to pass a governance vote before they can be traded on. In the meantime:'
)}
</p>
<ul className="list-[square] pl-4 mb-4">
{isMainnet && (
<li className="mb-1">
<ExternalLink target="_blank" href={consoleFairgroundLink()}>
{t('Try out Console')}
</ExternalLink>
{t(' on Fairground, our Testnet')}
</li>
)}
<li className="mb-1">
<ExternalLink target="_blank" href={tokenLink(TOKEN_PROPOSALS)}>
{t('View and vote for proposed markets')}
</ExternalLink>
</li>
<li className="mb-1">
<ExternalLink
target="_blank"
href={tokenLink(TOKEN_NEW_MARKET_PROPOSAL)}
>
{t('Propose a market')}
</ExternalLink>
</li>
<li className="mb-1">
<ExternalLink target="_blank" href={ExternalLinks.BLOG}>
{t('Read about the mainnet launch')}
</ExternalLink>
</li>
</ul>
{isMainnet && (
<TelemetryApproval
helpText={t(
'Help identify bugs and improve the service by sharing anonymous usage data. You can change this in your settings at any time.'
)}
/>
)}
<ProposedMarkets />
</>
);
};

2
apps/trading/stores/global.ts
View File

@ -5,7 +5,6 @@ import produce from 'immer';
interface GlobalStore {
marketId: string | null;
update: (store: Partial<Omit<GlobalStore, 'update'>>) => void;
shouldDisplayWelcomeDialog: boolean;
}
interface PageTitleStore {
@ -15,7 +14,6 @@ interface PageTitleStore {
export const useGlobalStore = create<GlobalStore>()((set) => ({
marketId: LocalStorage.getItem('marketId') || null,
shouldDisplayWelcomeDialog: false,
update: (newState) => {
set(
produce((state: GlobalStore) => {

2
libs/accounts/src/lib/accounts-manager.tsx
View File

@ -75,7 +75,7 @@ export const AccountBreakdownDialog = memo(
}) => {
return (
<Dialog
size="medium"
size="large"
open={Boolean(assetId)}
onChange={(isOpen) => {
if (!isOpen) {

2
libs/cypress/src/index.ts
View File

@ -12,6 +12,7 @@ import { addUpdateCapsuleMultiSig } from './lib/commands/add-validators-to-multi
import {
addVegaWalletConnect,
addSetVegaWallet,
addSetOnBoardingViewed,
} from './lib/commands/vega-wallet-connect';
import { addMockTransactionResponse } from './lib/commands/mock-transaction-response';
import { addCreateMarket } from './lib/commands/create-market';
@ -38,6 +39,7 @@ addGetNetworkParameters();
addUpdateCapsuleMultiSig();
addVegaWalletConnect();
addSetVegaWallet();
addSetOnBoardingViewed();
addMockTransactionResponse();
addCreateMarket();
addConnectPublicKey();

14
libs/cypress/src/lib/commands/vega-wallet-connect.ts
View File

@ -14,6 +14,10 @@ declare global {
interface Chainable<Subject> {
setVegaWallet(): void;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface Chainable<Subject> {
setOnBoardingViewed(): void;
}
}
}
@ -60,7 +64,7 @@ export function addVegaWalletConnect() {
export function addSetVegaWallet() {
Cypress.Commands.add('setVegaWallet', () => {
cy.window().then((win) => {
win.localStorage.setItem('vega_risk_accepted', 'true');
win.localStorage.setItem('vega_onboarding_viewed', 'true');
win.localStorage.setItem(
'vega_wallet_config',
JSON.stringify({
@ -72,3 +76,11 @@ export function addSetVegaWallet() {
});
});
}
export function addSetOnBoardingViewed() {
Cypress.Commands.add('setOnBoardingViewed', () => {
cy.window().then((win) => {
win.localStorage.setItem('vega_onboarding_viewed', 'true');
});
});
}

2
libs/environment/src/components/node-switcher/node-switcher-dialog.tsx
View File

@ -9,7 +9,7 @@ export const NodeSwitcherDialog = ({
setOpen: (x: boolean) => void;
}) => {
return (
<Dialog open={open} onChange={setOpen} size="medium">
<Dialog open={open} onChange={setOpen} size="large">
<NodeSwitcher closeDialog={() => setOpen(false)} />
</Dialog>
);

5
libs/ui-toolkit/src/components/dialog/dialog.tsx
View File

@ -16,7 +16,7 @@ interface DialogProps {
title?: string | ReactNode;
icon?: ReactNode;
intent?: Intent;
size?: 'small' | 'medium';
size?: 'small' | 'medium' | 'large';
dataTestId?: string;
}
@ -46,7 +46,8 @@ export function Dialog({
getIntentBorder(intent),
{
'w-[520px]': size === 'small',
'w-[720px] lg:w-[940px]': size === 'medium',
'w-[680px]': size === 'medium',
'w-[720px] lg:w-[940px]': size === 'large',
}
);

20
libs/ui-toolkit/src/components/trading-button/trading-button.tsx
View File

@ -24,7 +24,7 @@ const getClassName = (
className?: string
) =>
classNames(
'flex gap-2 items-center justify-center rounded',
'flex gap-2 items-center justify-center rounded disabled:opacity-40',
// size
{
'h-12': !subLabel && size === 'large',
@ -36,12 +36,18 @@ const getClassName = (
},
// colours
{
'bg-vega-yellow dark:bg-vega-yellow': intent === Intent.Primary,
'bg-vega-clight-500 dark:bg-vega-cdark-500': intent === Intent.None,
'bg-vega-blue-350 dark:bg-vega-blue-650': intent === Intent.Info,
'bg-vega-orange-350 dark:bg-vega-orange-650': intent === Intent.Warning,
'bg-vega-red-350 dark:bg-vega-red-650': intent === Intent.Danger,
'bg-vega-green-350 dark:bg-vega-green-650': intent === Intent.Success,
'bg-vega-yellow hover:bg-vega-yellow-550 dark:bg-vega-yellow dark:hover:bg-vega-yellow-450':
intent === Intent.Primary,
'bg-vega-clight-500 hover:bg-vega-clight-400 dark:bg-vega-cdark-500 dark:hover:bg-vega-cdark-400':
intent === Intent.None,
'bg-vega-blue-350 hover:bg-vega-blue-400 dark:bg-vega-blue-650 dark:hover:bg-vega-blue-600':
intent === Intent.Info,
'bg-vega-orange-350 hover:bg-vega-orange-400 dark:bg-vega-orange-650 dark:hover:bg-vega-orange-600':
intent === Intent.Warning,
'bg-vega-red-350 hover:bg-vega-red-400 dark:bg-vega-red-650 dark:hover:bg-vega-red-600':
intent === Intent.Danger,
'bg-vega-green-350 hover:bg-vega-green-400 dark:bg-vega-green-650 dark:hover:bg-vega-green-600':
intent === Intent.Success,
'text-vega-clight-50 dark:text-vega-cdark-50': intent !== Intent.Primary,
'text-vega-clight-900 dark:text-vega-cdark-900':
intent === Intent.Primary,

2
libs/wallet/src/index.ts
View File

@ -12,5 +12,7 @@ export * from './vega-transaction-dialog';
export * from './provider';
export * from './connect-dialog';
export * from './utils';
export * from './storage';
export * from './is-browser-wallet-installed';
export * from './__generated__/TransactionResult';
export * from './__generated__/WithdrawalApproval';

1
libs/wallet/src/is-browser-wallet-installed.ts Normal file
View File

@ -0,0 +1 @@
export const isBrowserWalletInstalled = () => Boolean(window.vega);