LaconicNetwork/vega-frontend-monorepo
4
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 React, { useEffect } from 'react';
import { titlefy } from '@vegaprotocol/utils'; import { titlefy } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n'; 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 { Markets } from './markets';
import { Proposed } from './proposed'; import { Proposed } from './proposed';
import { usePageTitleStore } from '../../stores'; import { usePageTitleStore } from '../../stores';
import { Closed } from './closed'; import { Closed } from './closed';
import {
DApp,
TOKEN_NEW_MARKET_PROPOSAL,
useLinks,
} from '@vegaprotocol/environment';
export const MarketsPage = () => { export const MarketsPage = () => {
const { updateTitle } = usePageTitleStore((store) => ({ const { updateTitle } = usePageTitleStore((store) => ({
updateTitle: store.updateTitle, updateTitle: store.updateTitle,
})); }));
const tokenLink = useLinks(DApp.Token);
const externalLink = tokenLink(TOKEN_NEW_MARKET_PROPOSAL);
useEffect(() => { useEffect(() => {
updateTitle(titlefy(['Markets'])); updateTitle(titlefy(['Markets']));
}, [updateTitle]); }, [updateTitle]);
return ( return (
<div className="h-full pt-0.5 pb-3 px-1.5"> <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"> <Tabs storageKey="console-markets">
<Tab id="open-markets" name={t('Open markets')}> <Tab id="open-markets" name={t('Open markets')}>
<Markets /> <Markets />
</Tab> </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 /> <Proposed />
</Tab> </Tab>
<Tab id="closed-markets" name={t('Closed markets')}> <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 { ProposalsList } from '@vegaprotocol/proposals';
import { ExternalLink } from '@vegaprotocol/ui-toolkit';
import { SuccessorMarketRenderer } from './successor-market-cell'; import { SuccessorMarketRenderer } from './successor-market-cell';
export const Proposed = () => { export const Proposed = () => {
const tokenLink = useLinks(DApp.Token); return <ProposalsList SuccessorMarketRenderer={SuccessorMarketRenderer} />;
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>
</>
);
}; };

226
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 compact from 'lodash/compact';
import uniqBy from 'lodash/uniqBy'; import uniqBy from 'lodash/uniqBy';
import type { ChangeEvent } from 'react'; 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 type { AccountHistoryQuery } from './__generated__/AccountHistory';
import { useAccountHistoryQuery } from './__generated__/AccountHistory'; import { useAccountHistoryQuery } from './__generated__/AccountHistory';
import * as Schema from '@vegaprotocol/types'; import * as Schema from '@vegaprotocol/types';
@ -12,12 +12,13 @@ import type { AssetFieldsFragment } from '@vegaprotocol/assets';
import { useAssetsDataProvider } from '@vegaprotocol/assets'; import { useAssetsDataProvider } from '@vegaprotocol/assets';
import { import {
AsyncRenderer, AsyncRenderer,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
Splash, Splash,
Toggle, Toggle,
TradingButton,
TradingDropdown,
TradingDropdownContent,
TradingDropdownItem,
TradingDropdownTrigger,
} from '@vegaprotocol/ui-toolkit'; } from '@vegaprotocol/ui-toolkit';
import { AccountTypeMapping } from '@vegaprotocol/types'; import { AccountTypeMapping } from '@vegaprotocol/types';
import { PriceChart } from 'pennant'; import { PriceChart } from 'pennant';
@ -150,6 +151,7 @@ const AccountHistoryManager = ({
) )
: null; : null;
}, [accounts, marketFilterCb]); }, [accounts, marketFilterCb]);
const resolveMarket = useCallback( const resolveMarket = useCallback(
(m: Market) => { (m: Market) => {
setMarket(m); setMarket(m);
@ -174,111 +176,114 @@ const AccountHistoryManager = ({
}), }),
[pubKey, asset, accountType, range, market?.id] [pubKey, asset, accountType, range, market?.id]
); );
const { data } = useAccountHistoryQuery({ const { data } = useAccountHistoryQuery({
variables, variables,
skip: !asset || !pubKey, skip: !asset || !pubKey,
}); });
const accountTypeMenu = useMemo(() => {
return (
<DropdownMenu
trigger={
<DropdownMenuTrigger>
{accountType
? `${
AccountTypeMapping[
accountType as keyof typeof Schema.AccountType
]
} Account`
: t('Select account type')}
</DropdownMenuTrigger>
}
>
<DropdownMenuContent>
{[
Schema.AccountType.ACCOUNT_TYPE_GENERAL,
Schema.AccountType.ACCOUNT_TYPE_BOND,
Schema.AccountType.ACCOUNT_TYPE_MARGIN,
].map((type) => (
<DropdownMenuItem
key={type}
onClick={() => setAccountType(type as Schema.AccountType)}
>
{AccountTypeMapping[type as keyof typeof Schema.AccountType]}
</DropdownMenuItem>
))}
</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]);
useEffect(() => {
if (
accountType !== Schema.AccountType.ACCOUNT_TYPE_MARGIN ||
market?.tradableInstrument.instrument.product.settlementAsset.id !==
asset?.id
) {
setMarket(null);
}
}, [accountType, asset?.id, market]);
return ( return (
<div className="h-full w-full flex flex-col gap-8"> <div className="flex flex-col h-full gap-2">
<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 flex-wrap justify-between px-1 pt-2 gap-2">
<div className="flex items-center gap-4 shrink-0"> <div className="flex items-center gap-1 shrink-0">
<> <TradingDropdown
{accountTypeMenu} trigger={
{assetsMenu} <TradingDropdownTrigger>
{marketsMenu} <TradingButton size="small">
</> {accountType
? `${
AccountTypeMapping[
accountType as keyof typeof Schema.AccountType
]
} Account`
: t('Select account type')}
</TradingButton>
</TradingDropdownTrigger>
}
>
<TradingDropdownContent>
{[
Schema.AccountType.ACCOUNT_TYPE_GENERAL,
Schema.AccountType.ACCOUNT_TYPE_BOND,
Schema.AccountType.ACCOUNT_TYPE_MARGIN,
].map((type) => (
<TradingDropdownItem
key={type}
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]}
</TradingDropdownItem>
))}
</TradingDropdownContent>
</TradingDropdown>
<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 (
a.id !==
market?.tradableInstrument.instrument.product
.settlementAsset.id
) {
setMarket(null);
}
}}
>
{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>
<div className="pt-1 justify-items-end"> <div className="justify-items-end">
<Toggle <Toggle
id="account-history-date-range" id="account-history-date-range"
name="account-history-date-range" name="account-history-date-range"
@ -287,16 +292,19 @@ const AccountHistoryManager = ({
onChange={(e: ChangeEvent<HTMLInputElement>) => onChange={(e: ChangeEvent<HTMLInputElement>) =>
setRange(e.target.value as keyof typeof DateRange) setRange(e.target.value as keyof typeof DateRange)
} }
size="sm"
/> />
</div> </div>
</div> </div>
<div className="h-5/6 px-4"> <div className="flex-1">
{asset && ( {asset && (
<AccountHistoryChart <div className="h-full">
data={data} <AccountHistoryChart
accountType={accountType} data={data}
asset={asset} accountType={accountType}
/> asset={asset}
/>
</div>
)} )}
</div> </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, setTelemetryValue,
}: Props) => { }: Props) => {
return ( return (
<div className="flex flex-col py-3"> <div className="flex flex-col">
<div className="mr-4" role="form"> <div className="mr-4" role="form">
<div className="mt-2"> <p className="mb-4">
{t( {t(
'Help us identify bugs and improve Vega Governance by sharing anonymous usage data.' 'Help us identify bugs and improve Vega Governance by sharing anonymous usage data.'
)} )}
</div> </p>
<div className="flex items-center mt-2"> <div className="flex items-start mb-2 gap-3">
<VegaIcon name={VegaIconNames.EYE_OFF} size={24} /> <VegaIcon name={VegaIconNames.EYE_OFF} size={18} />
<div className="flex flex-col gap-1 ml-6"> <div className="flex flex-col gap-1">
<div className="font-semibold">{t('Anonymous')}</div> <h6 className="font-semibold">{t('Anonymous')}</h6>
<div>{t('Your identity is always anonymous on Vega')}</div> <p className="text-muted">
{t('Your identity is always anonymous on Vega')}
</p>
</div> </div>
</div> </div>
<div className="flex items-start mb-4 gap-3">
<div className="flex items-center mt-2"> <VegaIcon name={VegaIconNames.COG} size={18} />
<VegaIcon name={VegaIconNames.COG} size={24} /> <div className="flex flex-col gap-1">
<div className="flex flex-col gap-1 ml-6"> <h6 className="font-semibold">{t('Optional')}</h6>
<div className="font-semibold">{t('Optional')}</div> <p className="text-muted">
<div>{t('You can opt out any time via settings')}</div> {t('You can opt out any time via settings')}
</p>
</div> </div>
</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 <TradingButton
onClick={() => setTelemetryValue('false')} onClick={() => setTelemetryValue('false')}
size="small" size="small"

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

@ -92,7 +92,7 @@ export const WelcomeDialog = () => {
intent: Intent.Primary, intent: Intent.Primary,
content: ( content: (
<> <>
<h3 className="text-sm uppercase mb-1"> <h3 className="mb-1 text-sm uppercase">
{t('Improve vega console')} {t('Improve vega console')}
</h3> </h3>
<TelemetryApproval <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 { t } from '@vegaprotocol/i18n';
import { import {
ActionsDropdown, ActionsDropdown,
DropdownMenuCopyItem, TradingDropdownCopyItem,
DropdownMenuItem, TradingDropdownItem,
Link, Link,
VegaIcon, VegaIcon,
VegaIconNames, VegaIconNames,
@ -30,49 +30,49 @@ export const AccountsActionsDropdown = ({
return ( return (
<ActionsDropdown> <ActionsDropdown>
<DropdownMenuItem <TradingDropdownItem
key={'deposit'} key={'deposit'}
data-testid="deposit" data-testid="deposit"
onClick={onClickDeposit} onClick={onClickDeposit}
> >
<VegaIcon name={VegaIconNames.DEPOSIT} size={16} /> <VegaIcon name={VegaIconNames.DEPOSIT} size={16} />
{t('Deposit')} {t('Deposit')}
</DropdownMenuItem> </TradingDropdownItem>
<DropdownMenuItem <TradingDropdownItem
key={'withdraw'} key={'withdraw'}
data-testid="withdraw" data-testid="withdraw"
onClick={onClickWithdraw} onClick={onClickWithdraw}
> >
<VegaIcon name={VegaIconNames.WITHDRAW} size={16} /> <VegaIcon name={VegaIconNames.WITHDRAW} size={16} />
{t('Withdraw')} {t('Withdraw')}
</DropdownMenuItem> </TradingDropdownItem>
<DropdownMenuItem <TradingDropdownItem
key={'transfer'} key={'transfer'}
data-testid="transfer" data-testid="transfer"
onClick={onClickTransfer} onClick={onClickTransfer}
> >
<VegaIcon name={VegaIconNames.TRANSFER} size={16} /> <VegaIcon name={VegaIconNames.TRANSFER} size={16} />
{t('Transfer')} {t('Transfer')}
</DropdownMenuItem> </TradingDropdownItem>
<DropdownMenuItem <TradingDropdownItem
key={'breakdown'} key={'breakdown'}
data-testid="breakdown" data-testid="breakdown"
onClick={onClickBreakdown} onClick={onClickBreakdown}
> >
<VegaIcon name={VegaIconNames.BREAKDOWN} size={16} /> <VegaIcon name={VegaIconNames.BREAKDOWN} size={16} />
{t('View usage breakdown')} {t('View usage breakdown')}
</DropdownMenuItem> </TradingDropdownItem>
<DropdownMenuItem <TradingDropdownItem
onClick={(e) => { onClick={(e) => {
openAssetDialog(assetId, e.target as HTMLElement); openAssetDialog(assetId, e.target as HTMLElement);
}} }}
> >
<VegaIcon name={VegaIconNames.INFO} size={16} /> <VegaIcon name={VegaIconNames.INFO} size={16} />
{t('View asset details')} {t('View asset details')}
</DropdownMenuItem> </TradingDropdownItem>
<DropdownMenuCopyItem value={assetId} text={t('Copy asset ID')} /> <TradingDropdownCopyItem value={assetId} text={t('Copy asset ID')} />
{assetContractAddress && ( {assetContractAddress && (
<DropdownMenuItem> <TradingDropdownItem>
<Link <Link
href={etherscanLink( href={etherscanLink(
ETHERSCAN_ADDRESS.replace(':hash', assetContractAddress) ETHERSCAN_ADDRESS.replace(':hash', assetContractAddress)
@ -84,7 +84,7 @@ export const AccountsActionsDropdown = ({
{t('View on Etherscan')} {t('View on Etherscan')}
</span> </span>
</Link> </Link>
</DropdownMenuItem> </TradingDropdownItem>
)} )}
</ActionsDropdown> </ActionsDropdown>
); );

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

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

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

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

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

@ -2,9 +2,10 @@ import { t } from '@vegaprotocol/i18n';
import { import {
Button, Button,
Dialog, Dialog,
Icon,
Splash, Splash,
SyntaxHighlighter, SyntaxHighlighter,
VegaIcon,
VegaIconNames,
} from '@vegaprotocol/ui-toolkit'; } from '@vegaprotocol/ui-toolkit';
import { create } from 'zustand'; import { create } from 'zustand';
import { AssetDetailsTable } from './asset-details-table'; import { AssetDetailsTable } from './asset-details-table';
@ -82,7 +83,7 @@ export const AssetDetailsDialog = ({
return ( return (
<Dialog <Dialog
title={title} title={title}
icon={<Icon name="info-sign"></Icon>} icon={<VegaIcon name={VegaIconNames.INFO} />}
open={open} open={open}
onChange={(isOpen) => onChange(isOpen)} onChange={(isOpen) => onChange(isOpen)}
onCloseAutoFocus={(e) => { onCloseAutoFocus={(e) => {
@ -97,7 +98,7 @@ export const AssetDetailsDialog = ({
}} }}
> >
{content} {content}
<p className="text-xs my-4"> <p className="my-4 text-xs">
{t( {t(
'There is 1 unit of the settlement asset (%s) to every 1 quote unit.', 'There is 1 unit of the settlement asset (%s) to every 1 quote unit.',
[assetSymbol] [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 { t } from '@vegaprotocol/i18n';
import type * as Schema from '@vegaprotocol/types'; import type * as Schema from '@vegaprotocol/types';
import type { KeyValueTableRowProps } from '@vegaprotocol/ui-toolkit'; import type { KeyValueTableRowProps } from '@vegaprotocol/ui-toolkit';
import { import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
CopyWithTooltip, import { CopyWithTooltip, truncateMiddle } from '@vegaprotocol/ui-toolkit';
Icon,
truncateMiddle,
} from '@vegaprotocol/ui-toolkit';
import { import {
KeyValueTable, KeyValueTable,
KeyValueTableRow, KeyValueTableRow,
@ -118,7 +115,7 @@ export const rows: Rows = [
</EtherscanLink>{' '} </EtherscanLink>{' '}
<CopyWithTooltip text={asset.source.contractAddress}> <CopyWithTooltip text={asset.source.contractAddress}>
<button title={t('Copy address to clipboard')}> <button title={t('Copy address to clipboard')}>
<Icon size={3} name="duplicate" /> <VegaIcon size={14} name={VegaIconNames.COPY} />
</button> </button>
</CopyWithTooltip> </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'; import { CandlesMenu } from './candles-menu';
describe('CandlesMenu', () => { describe('CandlesMenu', () => {
it('should render with volume study showing by default', async () => { it('should render with the correct default studies', async () => {
render(<CandlesMenu />); render(<CandlesMenu />);
await userEvent.click( await userEvent.click(
@ -13,5 +13,21 @@ describe('CandlesMenu', () => {
); );
expect(await screen.findByRole('menu')).toBeInTheDocument(); expect(await screen.findByRole('menu')).toBeInTheDocument();
expect(screen.getByText('Volume')).toHaveAttribute('data-state', 'checked'); 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 = { const DEFAULT_CHART_SETTINGS = {
interval: Interval.I15M, interval: Interval.I15M,
type: ChartType.CANDLE, type: ChartType.CANDLE,
overlays: [], overlays: [Overlay.MOVING_AVERAGE],
studies: [Study.VOLUME], studies: [Study.MACD, Study.VOLUME],
}; };
export const useCandlesChartSettingsStore = create< 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' }, target: { value: '8' },
}); });
fireEvent.click( fireEvent.click(screen.getByRole('button', { name: 'Deposit' }));
screen.getByText('Deposit', { selector: '[type="submit"]' })
);
await waitFor(() => { await waitFor(() => {
expect(props.submitDeposit).toHaveBeenCalledWith({ 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 { t } from '@vegaprotocol/i18n';
import { useLocalStorage } from '@vegaprotocol/react-helpers'; import { useLocalStorage } from '@vegaprotocol/react-helpers';
import { import {
Button,
TradingFormGroup, TradingFormGroup,
TradingInput, TradingInput,
TradingInputError, TradingInputError,
@ -23,6 +22,7 @@ import {
ButtonLink, ButtonLink,
TradingSelect, TradingSelect,
truncateMiddle, truncateMiddle,
TradingButton,
} from '@vegaprotocol/ui-toolkit'; } from '@vegaprotocol/ui-toolkit';
import { useVegaWallet } from '@vegaprotocol/wallet'; import { useVegaWallet } from '@vegaprotocol/wallet';
import { useWeb3React } from '@web3-react/core'; import { useWeb3React } from '@web3-react/core';
@ -186,14 +186,14 @@ export const DepositForm = ({
); );
} }
return ( return (
<Button <TradingButton
onClick={openDialog} onClick={openDialog}
variant="primary" intent={Intent.Primary}
type="button" type="button"
data-testid="connect-eth-wallet-btn" data-testid="connect-eth-wallet-btn"
> >
{t('Connect')} {t('Connect')}
</Button> </TradingButton>
); );
}} }}
/> />
@ -435,15 +435,14 @@ const FormButton = ({ approved, selectedAsset }: FormButtonProps) => {
/> />
</div> </div>
)} )}
<Button <TradingButton
type="submit" type="submit"
data-testid="deposit-submit" data-testid="deposit-submit"
variant={isActive ? 'primary' : 'default'}
fill fill
disabled={invalidChain} disabled={!isActive || invalidChain}
> >
{t('Deposit')} {t('Deposit')}
</Button> </TradingButton>
</> </>
); );
}; };
@ -455,7 +454,7 @@ const UseButton = (props: UseButtonProps) => {
<button <button
{...props} {...props}
type="button" 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); setIsInput((curr) => !curr);
onChange(); 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" data-testid="enter-pubkey-manually"
> >
{isInput ? t('Select from wallet') : t('Enter 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 { useRef, useState } from 'react';
import { z } from 'zod'; import { z } from 'zod';
import { import {
Button, TradingButton,
Loader, Loader,
TradingFormGroup, TradingFormGroup,
TradingInput, TradingInput,
@ -157,15 +157,14 @@ export const LedgerExportForm = ({ partyId, vegaUrl, assets }: Props) => {
<Loader size="small" /> <Loader size="small" />
</div> </div>
)} )}
<Button <TradingButton
variant="primary"
fill fill
disabled={disabled} disabled={disabled}
type="submit" type="submit"
data-testid="ledger-download-button" data-testid="ledger-download-button"
> >
{t('Download')} {t('Download')}
</Button> </TradingButton>
</div> </div>
</form> </form>
); );

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

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

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

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

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

@ -61,7 +61,7 @@ describe('Positions', () => {
'Market', 'Market',
'Size / Notional', 'Size / Notional',
'Entry / Mark', 'Entry / Mark',
'Margin', 'Margin / Leverage',
'Liquidation', 'Liquidation',
'Realised PNL', 'Realised PNL',
'Unrealised 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', colId: 'margin',
type: 'rightAligned', type: 'rightAligned',
cellClass: 'font-mono text-right', cellClass: 'font-mono text-right',
@ -456,7 +456,7 @@ export const PositionsTable = ({
...COL_DEFS.actions, ...COL_DEFS.actions,
cellRenderer: ({ data }: VegaICellRendererParams<Position>) => { cellRenderer: ({ data }: VegaICellRendererParams<Position>) => {
return ( return (
<div className="flex gap-2 items-center justify-end"> <div className="flex items-center justify-end gap-2">
{data?.openVolume && {data?.openVolume &&
data?.openVolume !== '0' && data?.openVolume !== '0' &&
data.partyId === pubKey ? ( data.partyId === pubKey ? (
@ -548,9 +548,9 @@ const WarningCell = ({
showIcon?: boolean; showIcon?: boolean;
}) => { }) => {
return ( return (
<div className="flex justify-end items-center"> <div className="flex items-center justify-end">
{showIcon && ( {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} /> <VegaIcon name={VegaIconNames.EXCLAIMATION_MARK} size={12} />
</span> </span>
)} )}

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

@ -35,16 +35,13 @@ export const ProposalsList = ({
const { columnDefs, defaultColDef } = useColumnDefs(); const { columnDefs, defaultColDef } = useColumnDefs();
return ( return (
<div className="relative h-full"> <AgGrid
<AgGrid columnDefs={columnDefs}
className="w-full h-full" rowData={filteredData}
columnDefs={columnDefs} defaultColDef={defaultColDef}
rowData={filteredData} getRowId={({ data }) => data.id}
defaultColDef={defaultColDef} overlayNoRowsTemplate={t('No markets')}
getRowId={({ data }) => data.id} components={{ SuccessorMarketRenderer, MarketNameProposalCell }}
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 }) => { export const IconInfo = ({ size = 14 }: { size: number }) => {
return ( return (
<svg <svg width={size} height={size} viewBox="0 0 14 14">
width={size}
height={size}
viewBox="0 0 14 14"
xmlns="http://www.w3.org/2000/svg"
>
<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" /> <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> </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 { useLayoutEffect } from 'react';
import { useRef } from 'react'; import { useRef } from 'react';
import { Intent } from '../../utils/intent'; import { Intent } from '../../utils/intent';
import { Icon } from '../icon'; import { Icon, VegaIcon, VegaIconNames } from '../icon';
import { Loader } from '../loader'; import { Loader } from '../loader';
import { t } from '@vegaprotocol/i18n'; import { t } from '@vegaprotocol/i18n';
@ -317,18 +317,14 @@ export const Toast = ({
} }
)} )}
> >
<div className="flex relative"> <div className="relative flex">
<button <button
type="button" type="button"
data-testid="toast-close" data-testid="toast-close"
onClick={closeToast} 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 <VegaIcon name={VegaIconNames.CROSS} size={12} />
name="cross"
size={3}
className="!block dark:text-white !w-[11px] !h-[11px]"
/>
</button> </button>
<div <div
data-testid="toast-accent" data-testid="toast-accent"
@ -348,7 +344,7 @@ export const Toast = ({
// red // red
'bg-vega-red-500 text-vega-red-600': intent === Intent.Danger, 'bg-vega-red-500 text-vega-red-600': intent === Intent.Danger,
}, },
'w-8 p-[9px]', 'w-8 p-2',
'flex justify-center' 'flex justify-center'
)} )}
> >

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

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

@ -146,7 +146,7 @@ export const TradingDropdownItemIndicator = forwardRef<
<DropdownMenuPrimitive.ItemIndicator <DropdownMenuPrimitive.ItemIndicator
{...itemIndicatorProps} {...itemIndicatorProps}
ref={forwardedRef} ref={forwardedRef}
className="flex-end text-vega-green" className="flex-end text-vega-green-600 dark:text-vega-green"
> >
<VegaIcon name={VegaIconNames.TICK} /> <VegaIcon name={VegaIconNames.TICK} />
</DropdownMenuPrimitive.ItemIndicator> </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 { useRef } from 'react';
import { forwardRef } from 'react'; import { forwardRef } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { Icon } from '..'; import { Icon, VegaIcon, VegaIconNames } from '..';
import { defaultSelectElement } from '../../utils/shared'; import { defaultSelectElement } from '../../utils/shared';
import * as SelectPrimitive from '@radix-ui/react-select'; import * as SelectPrimitive from '@radix-ui/react-select';
@ -16,7 +16,7 @@ export interface TradingSelectProps
export const TradingSelect = forwardRef<HTMLSelectElement, TradingSelectProps>( export const TradingSelect = forwardRef<HTMLSelectElement, TradingSelectProps>(
({ className, hasError, ...props }, ref) => ( ({ className, hasError, ...props }, ref) => (
<div className="flex items-center relative"> <div className="relative flex items-center">
<select <select
ref={ref} ref={ref}
{...props} {...props}
@ -26,10 +26,9 @@ export const TradingSelect = forwardRef<HTMLSelectElement, TradingSelectProps>(
'appearance-none rounded-md' 'appearance-none rounded-md'
)} )}
/> />
<Icon <span className="absolute z-10 flex items-center pointer-events-none right-2">
name="chevron-down" <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
className="absolute right-4 z-10 pointer-events-none" </span>
/>
</div> </div>
) )
); );
@ -52,7 +51,7 @@ export const TradingRichSelect = forwardRef<
return ( return (
<div <div
ref={containerRef as Ref<HTMLDivElement>} ref={containerRef as Ref<HTMLDivElement>}
className="flex items-center relative" className="relative flex items-center"
> >
<SelectPrimitive.Root {...props} defaultOpen={false}> <SelectPrimitive.Root {...props} defaultOpen={false}>
<SelectPrimitive.Trigger <SelectPrimitive.Trigger
@ -85,11 +84,11 @@ export const TradingRichSelect = forwardRef<
side={'bottom'} side={'bottom'}
align={'center'} 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" /> <Icon name="chevron-up" />
</SelectPrimitive.ScrollUpButton> </SelectPrimitive.ScrollUpButton>
<SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport> <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" /> <Icon name="chevron-down" />
</SelectPrimitive.ScrollDownButton> </SelectPrimitive.ScrollDownButton>
</SelectPrimitive.Content> </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)) { if (isWithdrawTransaction(tx.body)) {
const completeWithdrawalButton = tx.withdrawal && ( const completeWithdrawalButton = tx.withdrawal && (
<p className="mt-1"> <p className="mt-2">
<Button <Button
data-testid="toast-complete-withdrawal" data-testid="toast-complete-withdrawal"
size="xs" size="xs"

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

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

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

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