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

chore(trading): minor style tweaks (#4696)

Browse Source
This commit is contained in:
Matthew Russell 2023-09-04 17:21:46 -07:00 committed by GitHub
parent 467ed5d53d
commit 21bb6a69c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 298 additions and 345 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/trading/client-pages/markets/markets-page.tsx
View File

@ -1,27 +1,49 @@
import React, { useEffect } from 'react';
import { titlefy } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import { LocalStoragePersistTabs as Tabs, Tab } from '@vegaprotocol/ui-toolkit';
import {
LocalStoragePersistTabs as Tabs,
Tab,
TradingAnchorButton,
} from '@vegaprotocol/ui-toolkit';
import { Markets } from './markets';
import { Proposed } from './proposed';
import { usePageTitleStore } from '../../stores';
import { Closed } from './closed';
import {
DApp,
TOKEN_NEW_MARKET_PROPOSAL,
useLinks,
} from '@vegaprotocol/environment';
export const MarketsPage = () => {
const { updateTitle } = usePageTitleStore((store) => ({
updateTitle: store.updateTitle,
}));
const tokenLink = useLinks(DApp.Token);
const externalLink = tokenLink(TOKEN_NEW_MARKET_PROPOSAL);
useEffect(() => {
updateTitle(titlefy(['Markets']));
}, [updateTitle]);
return (
<div className="h-full pt-0.5 pb-3 px-1.5">
<div className="h-full my-1 border border-default rounded-sm">
<div className="h-full my-1 border rounded-sm border-default">
<Tabs storageKey="console-markets">
<Tab id="open-markets" name={t('Open markets')}>
<Markets />
</Tab>
<Tab id="proposed-markets" name={t('Proposed markets')}>
<Tab
id="proposed-markets"
name={t('Proposed markets')}
menu={
<TradingAnchorButton size="extra-small" href={externalLink}>
{t('Propose a new market')}
</TradingAnchorButton>
}
>
<Proposed />
</Tab>
<Tab id="closed-markets" name={t('Closed markets')}>

20
apps/trading/client-pages/markets/proposed.tsx
View File

@ -1,24 +1,6 @@
import { t } from '@vegaprotocol/i18n';
import {
DApp,
TOKEN_NEW_MARKET_PROPOSAL,
useLinks,
} from '@vegaprotocol/environment';
import { ProposalsList } from '@vegaprotocol/proposals';
import { ExternalLink } from '@vegaprotocol/ui-toolkit';
import { SuccessorMarketRenderer } from './successor-market-cell';
export const Proposed = () => {
const tokenLink = useLinks(DApp.Token);
const externalLink = tokenLink(TOKEN_NEW_MARKET_PROPOSAL);
return (
<>
<div className="h-[400px]">
<ProposalsList SuccessorMarketRenderer={SuccessorMarketRenderer} />
</div>
<ExternalLink className="py-4 px-[11px] text-sm" href={externalLink}>
{t('Propose a new market')}
</ExternalLink>
</>
);
return <ProposalsList SuccessorMarketRenderer={SuccessorMarketRenderer} />;
};

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

@ -4,7 +4,7 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
import compact from 'lodash/compact';
import uniqBy from 'lodash/uniqBy';
import type { ChangeEvent } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useCallback, useMemo, useState } from 'react';
import type { AccountHistoryQuery } from './__generated__/AccountHistory';
import { useAccountHistoryQuery } from './__generated__/AccountHistory';
import * as Schema from '@vegaprotocol/types';
@ -12,12 +12,13 @@ import type { AssetFieldsFragment } from '@vegaprotocol/assets';
import { useAssetsDataProvider } from '@vegaprotocol/assets';
import {
AsyncRenderer,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
Splash,
Toggle,
TradingButton,
TradingDropdown,
TradingDropdownContent,
TradingDropdownItem,
TradingDropdownTrigger,
} from '@vegaprotocol/ui-toolkit';
import { AccountTypeMapping } from '@vegaprotocol/types';
import { PriceChart } from 'pennant';
@ -150,6 +151,7 @@ const AccountHistoryManager = ({
)
: null;
}, [accounts, marketFilterCb]);
const resolveMarket = useCallback(
(m: Market) => {
setMarket(m);
@ -174,16 +176,20 @@ const AccountHistoryManager = ({
}),
[pubKey, asset, accountType, range, market?.id]
);
const { data } = useAccountHistoryQuery({
variables,
skip: !asset || !pubKey,
});
const accountTypeMenu = useMemo(() => {
return (
<DropdownMenu
<div className="flex flex-col h-full gap-2">
<div className="flex flex-wrap justify-between px-1 pt-2 gap-2">
<div className="flex items-center gap-1 shrink-0">
<TradingDropdown
trigger={
<DropdownMenuTrigger>
<TradingDropdownTrigger>
<TradingButton size="small">
{accountType
? `${
AccountTypeMapping[
@ -191,94 +197,93 @@ const AccountHistoryManager = ({
]
} Account`
: t('Select account type')}
</DropdownMenuTrigger>
</TradingButton>
</TradingDropdownTrigger>
}
>
<DropdownMenuContent>
<TradingDropdownContent>
{[
Schema.AccountType.ACCOUNT_TYPE_GENERAL,
Schema.AccountType.ACCOUNT_TYPE_BOND,
Schema.AccountType.ACCOUNT_TYPE_MARGIN,
].map((type) => (
<DropdownMenuItem
<TradingDropdownItem
key={type}
onClick={() => setAccountType(type as Schema.AccountType)}
onClick={() => {
setAccountType(type as Schema.AccountType);
// if not a margin account clear any market selection
if (type !== Schema.AccountType.ACCOUNT_TYPE_MARGIN) {
setMarket(null);
}
}}
>
{AccountTypeMapping[type as keyof typeof Schema.AccountType]}
</DropdownMenuItem>
</TradingDropdownItem>
))}
</DropdownMenuContent>
</DropdownMenu>
);
}, [accountType]);
const assetsMenu = useMemo(() => {
return (
<DropdownMenu
trigger={
<DropdownMenuTrigger>
{asset ? asset.symbol : t('Select asset')}
</DropdownMenuTrigger>
}
>
<DropdownMenuContent>
{assets.map((a) => (
<DropdownMenuItem key={a.id} onClick={() => setAssetId(a.id)}>
{a.symbol}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
);
}, [asset, assets, setAssetId]);
const marketsMenu = useMemo(() => {
return accountType === Schema.AccountType.ACCOUNT_TYPE_MARGIN &&
markets?.length ? (
<DropdownMenu
trigger={
<DropdownMenuTrigger>
{market
? market.tradableInstrument.instrument.code
: t('Select market')}
</DropdownMenuTrigger>
}
>
<DropdownMenuContent>
{market && (
<DropdownMenuItem key="0" onClick={() => setMarket(null)}>
{t('All markets')}
</DropdownMenuItem>
)}
{markets?.map((m) => (
<DropdownMenuItem key={m.id} onClick={() => resolveMarket(m)}>
{m.tradableInstrument.instrument.code}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
) : null;
}, [markets, market, accountType, resolveMarket]);
</TradingDropdownContent>
</TradingDropdown>
useEffect(() => {
<TradingDropdown
trigger={
<TradingDropdownTrigger>
<TradingButton size="small">
{asset ? asset.symbol : t('Select asset')}
</TradingButton>
</TradingDropdownTrigger>
}
>
<TradingDropdownContent>
{assets.map((a) => (
<TradingDropdownItem
key={a.id}
onClick={() => {
setAssetId(a.id);
// if the selected asset is different to the selected market clear the market
if (
accountType !== Schema.AccountType.ACCOUNT_TYPE_MARGIN ||
market?.tradableInstrument.instrument.product.settlementAsset.id !==
asset?.id
a.id !==
market?.tradableInstrument.instrument.product
.settlementAsset.id
) {
setMarket(null);
}
}, [accountType, asset?.id, market]);
return (
<div className="h-full w-full flex flex-col gap-8">
<div className="w-full flex flex-col-reverse lg:flex-row items-start lg:items-center justify-between gap-4 px-2">
<div className="flex items-center gap-4 shrink-0">
<>
{accountTypeMenu}
{assetsMenu}
{marketsMenu}
</>
}}
>
{a.symbol}
</TradingDropdownItem>
))}
</TradingDropdownContent>
</TradingDropdown>
<TradingDropdown
trigger={
<TradingDropdownTrigger>
<TradingButton size="small">
{market
? market.tradableInstrument.instrument.code
: t('Select market')}
</TradingButton>
</TradingDropdownTrigger>
}
>
<TradingDropdownContent>
{market && (
<TradingDropdownItem key="0" onClick={() => setMarket(null)}>
{t('All markets')}
</TradingDropdownItem>
)}
{markets?.map((m) => (
<TradingDropdownItem
key={m.id}
onClick={() => resolveMarket(m)}
>
{m.tradableInstrument.instrument.code}
</TradingDropdownItem>
))}
</TradingDropdownContent>
</TradingDropdown>
</div>
<div className="pt-1 justify-items-end">
<div className="justify-items-end">
<Toggle
id="account-history-date-range"
name="account-history-date-range"
@ -287,16 +292,19 @@ const AccountHistoryManager = ({
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setRange(e.target.value as keyof typeof DateRange)
}
size="sm"
/>
</div>
</div>
<div className="h-5/6 px-4">
<div className="flex-1">
{asset && (
<div className="h-full">
<AccountHistoryChart
data={data}
accountType={accountType}
asset={asset}
/>
</div>
)}
</div>
</div>

1
apps/trading/components/vega-wallet-container/index.ts
View File

@ -1 +0,0 @@
export * from './vega-wallet-container';

27
apps/trading/components/vega-wallet-container/vega-wallet-container.spec.tsx
View File

@ -1,27 +0,0 @@
import { render, screen } from '@testing-library/react';
import { VegaWalletContainer } from './vega-wallet-container';
import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
import { VegaWalletContext } from '@vegaprotocol/wallet';
import type { PartialDeep } from 'type-fest';
const generateJsx = (context: PartialDeep<VegaWalletContextShape>) => {
return (
<VegaWalletContext.Provider value={context as VegaWalletContextShape}>
<VegaWalletContainer>
<div data-testid="child" />
</VegaWalletContainer>
</VegaWalletContext.Provider>
);
};
describe('VegaWalletContainer', () => {
it('doesnt render children if not connected', () => {
render(generateJsx({ pubKey: null }));
expect(screen.queryByTestId('child')).not.toBeInTheDocument();
});
it('renders children if connected', () => {
render(generateJsx({ pubKey: '0x123' }));
expect(screen.getByTestId('child')).toBeInTheDocument();
});
});

35
apps/trading/components/vega-wallet-container/vega-wallet-container.tsx
View File

@ -1,35 +0,0 @@
import type { ReactNode } from 'react';
import { t } from '@vegaprotocol/i18n';
import { Button, Splash } from '@vegaprotocol/ui-toolkit';
import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
interface VegaWalletContainerProps {
children: ReactNode;
}
export const VegaWalletContainer = ({ children }: VegaWalletContainerProps) => {
const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({
openVegaWalletDialog: store.openVegaWalletDialog,
}));
const { pubKey } = useVegaWallet();
if (!pubKey) {
return (
<Splash>
<div className="text-center">
<p className="mb-4" data-testid="connect-vega-wallet-text">
{t('Connect your Vega wallet')}
</p>
<Button
onClick={openVegaWalletDialog}
data-testid="vega-wallet-connect"
>
{t('Connect')}
</Button>
</div>
</Splash>
);
}
return <>{children}</>;
};

33
apps/trading/components/welcome-dialog/telemetry-approval.tsx
View File

@ -16,29 +16,32 @@ export const TelemetryApproval = ({
setTelemetryValue,
}: Props) => {
return (
<div className="flex flex-col py-3">
<div className="flex flex-col">
<div className="mr-4" role="form">
<div className="mt-2">
<p className="mb-4">
{t(
'Help us identify bugs and improve Vega Governance by sharing anonymous usage data.'
)}
</div>
<div className="flex items-center mt-2">
<VegaIcon name={VegaIconNames.EYE_OFF} size={24} />
<div className="flex flex-col gap-1 ml-6">
<div className="font-semibold">{t('Anonymous')}</div>
<div>{t('Your identity is always anonymous on Vega')}</div>
</p>
<div className="flex items-start mb-2 gap-3">
<VegaIcon name={VegaIconNames.EYE_OFF} size={18} />
<div className="flex flex-col gap-1">
<h6 className="font-semibold">{t('Anonymous')}</h6>
<p className="text-muted">
{t('Your identity is always anonymous on Vega')}
</p>
</div>
</div>
<div className="flex items-center mt-2">
<VegaIcon name={VegaIconNames.COG} size={24} />
<div className="flex flex-col gap-1 ml-6">
<div className="font-semibold">{t('Optional')}</div>
<div>{t('You can opt out any time via settings')}</div>
<div className="flex items-start mb-4 gap-3">
<VegaIcon name={VegaIconNames.COG} size={18} />
<div className="flex flex-col gap-1">
<h6 className="font-semibold">{t('Optional')}</h6>
<p className="text-muted">
{t('You can opt out any time via settings')}
</p>
</div>
</div>
<div className="flex flex-col justify-around items-center mt-10 gap-4 w-full px-4">
<div className="flex flex-col items-center justify-around gap-2">
<TradingButton
onClick={() => setTelemetryValue('false')}
size="small"

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

@ -92,7 +92,7 @@ export const WelcomeDialog = () => {
intent: Intent.Primary,
content: (
<>
<h3 className="text-sm uppercase mb-1">
<h3 className="mb-1 text-sm uppercase">
{t('Improve vega console')}
</h3>
<TelemetryApproval

30
libs/accounts/src/lib/accounts-actions-dropdown.tsx
View File

@ -2,8 +2,8 @@ import { ETHERSCAN_ADDRESS, useEtherscanLink } from '@vegaprotocol/environment';
import { t } from '@vegaprotocol/i18n';
import {
ActionsDropdown,
DropdownMenuCopyItem,
DropdownMenuItem,
TradingDropdownCopyItem,
TradingDropdownItem,
Link,
VegaIcon,
VegaIconNames,
@ -30,49 +30,49 @@ export const AccountsActionsDropdown = ({
return (
<ActionsDropdown>
<DropdownMenuItem
<TradingDropdownItem
key={'deposit'}
data-testid="deposit"
onClick={onClickDeposit}
>
<VegaIcon name={VegaIconNames.DEPOSIT} size={16} />
{t('Deposit')}
</DropdownMenuItem>
<DropdownMenuItem
</TradingDropdownItem>
<TradingDropdownItem
key={'withdraw'}
data-testid="withdraw"
onClick={onClickWithdraw}
>
<VegaIcon name={VegaIconNames.WITHDRAW} size={16} />
{t('Withdraw')}
</DropdownMenuItem>
<DropdownMenuItem
</TradingDropdownItem>
<TradingDropdownItem
key={'transfer'}
data-testid="transfer"
onClick={onClickTransfer}
>
<VegaIcon name={VegaIconNames.TRANSFER} size={16} />
{t('Transfer')}
</DropdownMenuItem>
<DropdownMenuItem
</TradingDropdownItem>
<TradingDropdownItem
key={'breakdown'}
data-testid="breakdown"
onClick={onClickBreakdown}
>
<VegaIcon name={VegaIconNames.BREAKDOWN} size={16} />
{t('View usage breakdown')}
</DropdownMenuItem>
<DropdownMenuItem
</TradingDropdownItem>
<TradingDropdownItem
onClick={(e) => {
openAssetDialog(assetId, e.target as HTMLElement);
}}
>
<VegaIcon name={VegaIconNames.INFO} size={16} />
{t('View asset details')}
</DropdownMenuItem>
<DropdownMenuCopyItem value={assetId} text={t('Copy asset ID')} />
</TradingDropdownItem>
<TradingDropdownCopyItem value={assetId} text={t('Copy asset ID')} />
{assetContractAddress && (
<DropdownMenuItem>
<TradingDropdownItem>
<Link
href={etherscanLink(
ETHERSCAN_ADDRESS.replace(':hash', assetContractAddress)
@ -84,7 +84,7 @@ export const AccountsActionsDropdown = ({
{t('View on Etherscan')}
</span>
</Link>
</DropdownMenuItem>
</TradingDropdownItem>
)}
</ActionsDropdown>
);

26
libs/accounts/src/lib/accounts-table.tsx
View File

@ -11,9 +11,13 @@ import type {
VegaValueFormatterParams,
} from '@vegaprotocol/datagrid';
import { COL_DEFS } from '@vegaprotocol/datagrid';
import { Button, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
import { TooltipCellComponent } from '@vegaprotocol/ui-toolkit';
import {
Intent,
TradingButton,
VegaIcon,
VegaIconNames,
TooltipCellComponent,
} from '@vegaprotocol/ui-toolkit';
import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
import type {
IGetRowsParams,
@ -186,7 +190,7 @@ export const AccountTable = ({
) : (
<>
<span className="underline">{valueFormatted}</span>
<span className="ml-2 inline-block w-14 text-muted">
<span className="inline-block ml-2 w-14 text-muted">
{t('0.00%')}
</span>
</>
@ -248,26 +252,26 @@ export const AccountTable = ({
colId: 'accounts-actions',
field: 'asset.id',
...COL_DEFS.actions,
minWidth: showDepositButton ? 130 : COL_DEFS.actions.minWidth,
maxWidth: showDepositButton ? 130 : COL_DEFS.actions.maxWidth,
minWidth: showDepositButton ? 105 : COL_DEFS.actions.minWidth,
maxWidth: showDepositButton ? 105 : COL_DEFS.actions.maxWidth,
cellRenderer: ({
value: assetId,
node,
}: VegaICellRendererParams<AccountFields, 'asset.id'>) => {
if (!assetId) return null;
if (node.rowPinned && node.data?.total === '0') {
if (node.rowPinned && node.data?.balance === '0') {
return (
<CenteredGridCellWrapper className="h-[30px] justify-end py-1">
<Button
size="xs"
variant="primary"
<TradingButton
size="extra-small"
intent={Intent.Primary}
data-testid="deposit"
onClick={() => {
onClickDeposit && onClickDeposit(assetId);
}}
>
<VegaIcon name={VegaIconNames.DEPOSIT} /> {t('Deposit')}
</Button>
</TradingButton>
</CenteredGridCellWrapper>
);
}

16
libs/accounts/src/lib/transfer-form.tsx
View File

@ -8,7 +8,6 @@ import {
} from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import {
Button,
TradingFormGroup,
TradingInput,
TradingInputError,
@ -16,6 +15,7 @@ import {
TradingSelect,
Tooltip,
TradingCheckbox,
TradingButton,
} from '@vegaprotocol/ui-toolkit';
import type { Transfer } from '@vegaprotocol/wallet';
import { normalizeTransfer } from '@vegaprotocol/wallet';
@ -276,9 +276,9 @@ export const TransferForm = ({
decimals={asset?.decimals}
/>
)}
<Button type="submit" variant="primary" fill={true}>
<TradingButton type="submit" fill={true}>
{t('Confirm transfer')}
</Button>
</TradingButton>
</form>
);
};
@ -309,8 +309,8 @@ export const TransferFee = ({
const totalValue = new BigNumber(transferAmount).plus(fee).toString();
return (
<div className="mb-4 flex flex-col gap-2 text-xs">
<div className="flex justify-between gap-1 items-center flex-wrap">
<div className="flex flex-col mb-4 text-xs gap-2">
<div className="flex flex-wrap items-center justify-between gap-1">
<Tooltip
description={t(
`The transfer fee is set by the network parameter transfer.fee.factor, currently set to %s`,
@ -324,7 +324,7 @@ export const TransferFee = ({
{formatNumber(fee, decimals)}
</div>
</div>
<div className="flex justify-between gap-1 items-center flex-wrap">
<div className="flex flex-wrap items-center justify-between gap-1">
<Tooltip
description={t(
`The total amount to be transferred (without the fee)`
@ -337,7 +337,7 @@ export const TransferFee = ({
{formatNumber(amount, decimals)}
</div>
</div>
<div className="flex justify-between gap-1 items-center flex-wrap">
<div className="flex flex-wrap items-center justify-between gap-1">
<Tooltip
description={t(
`The total amount taken from your account. The amount to be transferred plus the fee.`
@ -384,7 +384,7 @@ export const AddressField = ({
setIsInput((curr) => !curr);
onChange();
}}
className="ml-auto text-sm absolute top-0 right-0 underline"
className="absolute top-0 right-0 ml-auto text-sm underline"
>
{isInput ? t('Select from wallet') : t('Enter manually')}
</button>

7
libs/assets/src/lib/asset-details-dialog.tsx
View File

@ -2,9 +2,10 @@ import { t } from '@vegaprotocol/i18n';
import {
Button,
Dialog,
Icon,
Splash,
SyntaxHighlighter,
VegaIcon,
VegaIconNames,
} from '@vegaprotocol/ui-toolkit';
import { create } from 'zustand';
import { AssetDetailsTable } from './asset-details-table';
@ -82,7 +83,7 @@ export const AssetDetailsDialog = ({
return (
<Dialog
title={title}
icon={<Icon name="info-sign"></Icon>}
icon={<VegaIcon name={VegaIconNames.INFO} />}
open={open}
onChange={(isOpen) => onChange(isOpen)}
onCloseAutoFocus={(e) => {
@ -97,7 +98,7 @@ export const AssetDetailsDialog = ({
}}
>
{content}
<p className="text-xs my-4">
<p className="my-4 text-xs">
{t(
'There is 1 unit of the settlement asset (%s) to every 1 quote unit.',
[assetSymbol]

9
libs/assets/src/lib/asset-details-table.tsx
View File

@ -3,11 +3,8 @@ import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import type * as Schema from '@vegaprotocol/types';
import type { KeyValueTableRowProps } from '@vegaprotocol/ui-toolkit';
import {
CopyWithTooltip,
Icon,
truncateMiddle,
} from '@vegaprotocol/ui-toolkit';
import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
import { CopyWithTooltip, truncateMiddle } from '@vegaprotocol/ui-toolkit';
import {
KeyValueTable,
KeyValueTableRow,
@ -118,7 +115,7 @@ export const rows: Rows = [
</EtherscanLink>{' '}
<CopyWithTooltip text={asset.source.contractAddress}>
<button title={t('Copy address to clipboard')}>
<Icon size={3} name="duplicate" />
<VegaIcon size={14} name={VegaIconNames.COPY} />
</button>
</CopyWithTooltip>
</>

18
libs/candles-chart/src/lib/candles-menu.spec.tsx
View File

@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
import { CandlesMenu } from './candles-menu';
describe('CandlesMenu', () => {
it('should render with volume study showing by default', async () => {
it('should render with the correct default studies', async () => {
render(<CandlesMenu />);
await userEvent.click(
@ -13,5 +13,21 @@ describe('CandlesMenu', () => {
);
expect(await screen.findByRole('menu')).toBeInTheDocument();
expect(screen.getByText('Volume')).toHaveAttribute('data-state', 'checked');
expect(screen.getByText('MACD')).toHaveAttribute('data-state', 'checked');
});
it('should render with the correct default overlays', async () => {
render(<CandlesMenu />);
await userEvent.click(
screen.getByRole('button', {
name: 'Overlays',
})
);
expect(await screen.findByRole('menu')).toBeInTheDocument();
expect(screen.getByText('Moving average')).toHaveAttribute(
'data-state',
'checked'
);
});
});

4
libs/candles-chart/src/lib/use-candles-chart-settings.ts
View File

@ -15,8 +15,8 @@ interface StoredSettings {
const DEFAULT_CHART_SETTINGS = {
interval: Interval.I15M,
type: ChartType.CANDLE,
overlays: [],
studies: [Study.VOLUME],
overlays: [Overlay.MOVING_AVERAGE],
studies: [Study.MACD, Study.VOLUME],
};
export const useCandlesChartSettingsStore = create<

4
libs/deposits/src/lib/deposit-form.spec.tsx
View File

@ -305,9 +305,7 @@ describe('Deposit form', () => {
target: { value: '8' },
});
fireEvent.click(
screen.getByText('Deposit', { selector: '[type="submit"]' })
);
fireEvent.click(screen.getByRole('button', { name: 'Deposit' }));
await waitFor(() => {
expect(props.submitDeposit).toHaveBeenCalledWith({

19
libs/deposits/src/lib/deposit-form.tsx
View File

@ -13,7 +13,6 @@ import {
import { t } from '@vegaprotocol/i18n';
import { useLocalStorage } from '@vegaprotocol/react-helpers';
import {
Button,
TradingFormGroup,
TradingInput,
TradingInputError,
@ -23,6 +22,7 @@ import {
ButtonLink,
TradingSelect,
truncateMiddle,
TradingButton,
} from '@vegaprotocol/ui-toolkit';
import { useVegaWallet } from '@vegaprotocol/wallet';
import { useWeb3React } from '@web3-react/core';
@ -186,14 +186,14 @@ export const DepositForm = ({
);
}
return (
<Button
<TradingButton
onClick={openDialog}
variant="primary"
intent={Intent.Primary}
type="button"
data-testid="connect-eth-wallet-btn"
>
{t('Connect')}
</Button>
</TradingButton>
);
}}
/>
@ -435,15 +435,14 @@ const FormButton = ({ approved, selectedAsset }: FormButtonProps) => {
/>
</div>
)}
<Button
<TradingButton
type="submit"
data-testid="deposit-submit"
variant={isActive ? 'primary' : 'default'}
fill
disabled={invalidChain}
disabled={!isActive || invalidChain}
>
{t('Deposit')}
</Button>
</TradingButton>
</>
);
};
@ -455,7 +454,7 @@ const UseButton = (props: UseButtonProps) => {
<button
{...props}
type="button"
className="ml-auto text-sm absolute top-0 right-0 underline"
className="absolute top-0 right-0 ml-auto text-sm underline"
/>
);
};
@ -513,7 +512,7 @@ export const AddressField = ({
setIsInput((curr) => !curr);
onChange();
}}
className="ml-auto text-sm absolute top-0 right-0 underline"
className="absolute top-0 right-0 ml-auto text-sm underline"
data-testid="enter-pubkey-manually"
>
{isInput ? t('Select from wallet') : t('Enter manually')}

7
libs/ledger/src/lib/ledger-export-form.tsx
View File

@ -1,7 +1,7 @@
import { useRef, useState } from 'react';
import { z } from 'zod';
import {
Button,
TradingButton,
Loader,
TradingFormGroup,
TradingInput,
@ -157,15 +157,14 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
<Loader size="small" />
</div>
)}
<Button
variant="primary"
<TradingButton
fill
disabled={disabled}
type="submit"
data-testid="ledger-download-button"
>
{t('Download')}
</Button>
</TradingButton>
</div>
</form>
);

8
libs/orders/src/lib/components/order-list/order-list.tsx
View File

@ -10,7 +10,7 @@ import {
ActionsDropdown,
ButtonLink,
TradingDropdownCopyItem,
DropdownMenuItem,
TradingDropdownItem,
VegaIcon,
VegaIconNames,
} from '@vegaprotocol/ui-toolkit';
@ -277,7 +277,7 @@ export const OrderListTable = memo<
if (!data) return null;
return (
<div className="flex gap-2 items-center justify-end">
<div className="flex items-center justify-end gap-2">
{isOrderAmendable(data) && !props.isReadOnly && (
<>
{!data.icebergOrder && (
@ -301,14 +301,14 @@ export const OrderListTable = memo<
value={data.id}
text={t('Copy order ID')}
/>
<DropdownMenuItem
<TradingDropdownItem
key={'view-order'}
data-testid="view-order"
onClick={() => onView(data)}
>
<VegaIcon name={VegaIconNames.INFO} size={16} />
{t('View order details')}
</DropdownMenuItem>
</TradingDropdownItem>
</ActionsDropdown>
</div>
);

8
libs/orders/src/lib/components/stop-orders-table/stop-orders-table.tsx
View File

@ -12,7 +12,7 @@ import {
ButtonLink,
VegaIcon,
VegaIconNames,
DropdownMenuItem,
TradingDropdownItem,
TradingDropdownCopyItem,
Pill,
} from '@vegaprotocol/ui-toolkit';
@ -246,7 +246,7 @@ export const StopOrdersTable = memo(
if (!data) return null;
return (
<div className="flex gap-2 items-center justify-end">
<div className="flex items-center justify-end gap-2">
{data.status === Schema.StopOrderStatus.STATUS_PENDING &&
!props.isReadOnly && (
<ButtonLink
@ -263,7 +263,7 @@ export const StopOrdersTable = memo(
value={data.order.id}
text={t('Copy order ID')}
/>
<DropdownMenuItem
<TradingDropdownItem
key={'view-order'}
data-testid="view-order"
onClick={() =>
@ -273,7 +273,7 @@ export const StopOrdersTable = memo(
>
<VegaIcon name={VegaIconNames.INFO} size={16} />
{t('View order details')}
</DropdownMenuItem>
</TradingDropdownItem>
</ActionsDropdown>
)}
</div>

2
libs/positions/src/lib/positions-table.spec.tsx
View File

@ -61,7 +61,7 @@ describe('Positions', () => {
'Market',
'Size / Notional',
'Entry / Mark',
'Margin',
'Margin / Leverage',
'Liquidation',
'Realised PNL',
'Unrealised PNL',

8
libs/positions/src/lib/positions-table.tsx
View File

@ -292,7 +292,7 @@ export const PositionsTable = ({
},
},
{
headerName: t('Margin'),
headerName: t('Margin / Leverage'),
colId: 'margin',
type: 'rightAligned',
cellClass: 'font-mono text-right',
@ -456,7 +456,7 @@ export const PositionsTable = ({
...COL_DEFS.actions,
cellRenderer: ({ data }: VegaICellRendererParams<Position>) => {
return (
<div className="flex gap-2 items-center justify-end">
<div className="flex items-center justify-end gap-2">
{data?.openVolume &&
data?.openVolume !== '0' &&
data.partyId === pubKey ? (
@ -548,9 +548,9 @@ const WarningCell = ({
showIcon?: boolean;
}) => {
return (
<div className="flex justify-end items-center">
<div className="flex items-center justify-end">
{showIcon && (
<span className="text-black dark:text-white mr-2">
<span className="mr-2 text-black dark:text-white">
<VegaIcon name={VegaIconNames.EXCLAIMATION_MARK} size={12} />
</span>
)}

3
libs/proposals/src/components/proposals-list/proposals-list.tsx
View File

@ -35,9 +35,7 @@ export const ProposalsList = ({
const { columnDefs, defaultColDef } = useColumnDefs();
return (
<div className="relative h-full">
<AgGrid
className="w-full h-full"
columnDefs={columnDefs}
rowData={filteredData}
defaultColDef={defaultColDef}
@ -45,6 +43,5 @@ export const ProposalsList = ({
overlayNoRowsTemplate={t('No markets')}
components={{ SuccessorMarketRenderer, MarketNameProposalCell }}
/>
</div>
);
};

7
libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-info.tsx
View File

@ -1,11 +1,6 @@
export const IconInfo = ({ size = 14 }: { size: number }) => {
return (
<svg
width={size}
height={size}
viewBox="0 0 14 14"
xmlns="http://www.w3.org/2000/svg"
>
<svg width={size} height={size} viewBox="0 0 14 14">
<path d="M7 0C3.13 0 0 3.13 0 7C0 10.87 3.13 14 7 14C10.87 14 14 10.87 14 7C14 3.13 10.87 0 7 0ZM7.75 10.75H6.25V5.75H7.75V10.75ZM7.75 4.75H6.25V3.25H7.75V4.75Z" />
</svg>
);

14
libs/ui-toolkit/src/components/toast/toast.tsx
View File

@ -10,7 +10,7 @@ import { useCallback } from 'react';
import { useLayoutEffect } from 'react';
import { useRef } from 'react';
import { Intent } from '../../utils/intent';
import { Icon } from '../icon';
import { Icon, VegaIcon, VegaIconNames } from '../icon';
import { Loader } from '../loader';
import { t } from '@vegaprotocol/i18n';
@ -317,18 +317,14 @@ export const Toast = ({
}
)}
>
<div className="flex relative">
<div className="relative flex">
<button
type="button"
data-testid="toast-close"
onClick={closeToast}
className="absolute p-[8px] top-[3px] right-[3px] z-20"
className="absolute top-0 right-0 z-20 flex items-center p-2"
>
<Icon
name="cross"
size={3}
className="!block dark:text-white !w-[11px] !h-[11px]"
/>
<VegaIcon name={VegaIconNames.CROSS} size={12} />
</button>
<div
data-testid="toast-accent"
@ -348,7 +344,7 @@ export const Toast = ({
// red
'bg-vega-red-500 text-vega-red-600': intent === Intent.Danger,
},
'w-8 p-[9px]',
'w-8 p-2',
'flex justify-center'
)}
>

19
libs/ui-toolkit/src/components/toast/toasts-container.tsx
View File

@ -3,7 +3,7 @@ import { usePrevious } from '@vegaprotocol/react-helpers';
import classNames from 'classnames';
import type { Ref } from 'react';
import { useLayoutEffect, useRef } from 'react';
import { Button } from '../button';
import { TradingButton } from '../trading-button';
import { Toast } from './toast';
import type { Toasts } from './use-toasts';
import { ToastPosition, useToasts, useToastsConfiguration } from './use-toasts';
@ -87,26 +87,27 @@ export const ToastsContainer = ({
</li>
);
})}
<Button
title={t('Dismiss all toasts')}
size="sm"
fill={true}
<div
className={classNames(
'absolute top-[-38px] right-0 z-20',
'absolute w-full top-[-38px] right-0 z-20',
'transition-opacity',
'opacity-0 group-hover:opacity-50 hover:!opacity-100',
'text-sm text-black dark:text-white bg-white dark:bg-black hover:!bg-white hover:dark:!bg-black',
{
hidden: validToasts.length === 0,
}
)}
>
<TradingButton
title={t('Dismiss all toasts')}
size="small"
fill={true}
onClick={() => {
closeAll();
}}
variant={'default'}
>
{t('Dismiss all')}
</Button>
</TradingButton>
</div>
</ul>
</Portal>
);

2
libs/ui-toolkit/src/components/trading-dropdown/trading-dropdown.tsx
View File

@ -146,7 +146,7 @@ export const TradingDropdownItemIndicator = forwardRef<
<DropdownMenuPrimitive.ItemIndicator
{...itemIndicatorProps}
ref={forwardedRef}
className="flex-end text-vega-green"
className="flex-end text-vega-green-600 dark:text-vega-green"
>
<VegaIcon name={VegaIconNames.TICK} />
</DropdownMenuPrimitive.ItemIndicator>

17
libs/ui-toolkit/src/components/trading-select/select.tsx
View File

@ -2,7 +2,7 @@ import type { Ref, SelectHTMLAttributes } from 'react';
import { useRef } from 'react';
import { forwardRef } from 'react';
import classNames from 'classnames';
import { Icon } from '..';
import { Icon, VegaIcon, VegaIconNames } from '..';
import { defaultSelectElement } from '../../utils/shared';
import * as SelectPrimitive from '@radix-ui/react-select';
@ -16,7 +16,7 @@ export interface TradingSelectProps
export const TradingSelect = forwardRef<HTMLSelectElement, TradingSelectProps>(
({ className, hasError, ...props }, ref) => (
<div className="flex items-center relative">
<div className="relative flex items-center">
<select
ref={ref}
{...props}
@ -26,10 +26,9 @@ export const TradingSelect = forwardRef<HTMLSelectElement, TradingSelectProps>(
'appearance-none rounded-md'
)}
/>
<Icon
name="chevron-down"
className="absolute right-4 z-10 pointer-events-none"
/>
<span className="absolute z-10 flex items-center pointer-events-none right-2">
<VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
</span>
</div>
)
);
@ -52,7 +51,7 @@ export const TradingRichSelect = forwardRef<
return (
<div
ref={containerRef as Ref<HTMLDivElement>}
className="flex items-center relative"
className="relative flex items-center"
>
<SelectPrimitive.Root {...props} defaultOpen={false}>
<SelectPrimitive.Trigger
@ -85,11 +84,11 @@ export const TradingRichSelect = forwardRef<
side={'bottom'}
align={'center'}
>
<SelectPrimitive.ScrollUpButton className="flex items-center justify-center py-1 absolute w-full h-6 z-20 bg-gradient-to-t from-transparent to-neutral-50 dark:to-neutral-900">
<SelectPrimitive.ScrollUpButton className="absolute z-20 flex items-center justify-center w-full h-6 py-1 bg-gradient-to-t from-transparent to-neutral-50 dark:to-neutral-900">
<Icon name="chevron-up" />
</SelectPrimitive.ScrollUpButton>
<SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
<SelectPrimitive.ScrollDownButton className="flex items-center justify-center py-1 absolute bottom-0 w-full h-6 z-20 bg-gradient-to-b from-transparent to-neutral-50 dark:to-neutral-900">
<SelectPrimitive.ScrollDownButton className="absolute bottom-0 z-20 flex items-center justify-center w-full h-6 py-1 bg-gradient-to-b from-transparent to-neutral-50 dark:to-neutral-900">
<Icon name="chevron-down" />
</SelectPrimitive.ScrollDownButton>
</SelectPrimitive.Content>

2
libs/web3/src/lib/use-vega-transaction-toasts.tsx
View File

@ -598,7 +598,7 @@ const VegaTxCompleteToastsContent = ({ tx }: VegaTxToastContentProps) => {
if (isWithdrawTransaction(tx.body)) {
const completeWithdrawalButton = tx.withdrawal && (
<p className="mt-1">
<p className="mt-2">
<Button
data-testid="toast-complete-withdrawal"
size="xs"

4
libs/withdraws/src/lib/use-ready-to-complete-withdrawals-toast.tsx
View File

@ -211,7 +211,7 @@ const MultipleReadyToWithdrawToastContent = ({
count.toString()
)}
</p>
<p className="mt-1">
<p className="mt-2">
<Button
data-testid="toast-view-withdrawals"
size="xs"
@ -243,7 +243,7 @@ const SingleReadyToWithdrawToastContent = ({
},
});
const completeButton = (
<p className="mt-1">
<p className="mt-2">
<Button
data-testid="toast-complete-withdrawal"
size="xs"

13
libs/withdraws/src/lib/withdraw-form.tsx
View File

@ -11,7 +11,6 @@ import {
import { t } from '@vegaprotocol/i18n';
import { useLocalStorage } from '@vegaprotocol/react-helpers';
import {
Button,
TradingFormGroup,
TradingInput,
TradingInputError,
@ -19,6 +18,7 @@ import {
TradingRichSelect,
ExternalLink,
Intent,
TradingButton,
} from '@vegaprotocol/ui-toolkit';
import { useWeb3React } from '@web3-react/core';
import BigNumber from 'bignumber.js';
@ -183,7 +183,7 @@ export const WithdrawForm = ({
<>
<div className="mb-4 text-sm">
<p>{t('There are two steps required to make a withdrawal')}</p>
<ol className="list-disc pl-4">
<ol className="pl-4 list-disc">
<li>{t('Step 1 - Release funds from Vega')}</li>
<li>{t('Step 2 - Transfer funds to your Ethereum wallet')}</li>
</ol>
@ -289,14 +289,13 @@ export const WithdrawForm = ({
</div>
)}
</TradingFormGroup>
<Button
<TradingButton
data-testid="submit-withdrawal"
type="submit"
variant="primary"
fill={true}
>
Release funds
</Button>
{t('Release funds')}
</TradingButton>
</form>
</>
);
@ -309,7 +308,7 @@ const UseButton = (props: UseButtonProps) => {
<button
{...props}
type="button"
className="ml-auto text-sm absolute top-0 right-0 underline"
className="absolute top-0 right-0 ml-auto text-sm underline"
/>
);
};