diff --git a/apps/trading-e2e/src/integration/market-all.cy.ts b/apps/trading-e2e/src/integration/market-all.cy.ts index 9846942a1..95c78d497 100644 --- a/apps/trading-e2e/src/integration/market-all.cy.ts +++ b/apps/trading-e2e/src/integration/market-all.cy.ts @@ -153,7 +153,7 @@ describe('markets all table', { tags: '@smoke' }, () => { cy.get(dropdownContent) .find(dropdownContentItem) .eq(2) - .should('have.text', 'View asset'); + .should('have.text', 'View settlement asset details'); cy.getByTestId('market-actions-content').click(); }); diff --git a/apps/trading/client-pages/markets/closed.tsx b/apps/trading/client-pages/markets/closed.tsx index 4908135c9..8c0083046 100644 --- a/apps/trading/client-pages/markets/closed.tsx +++ b/apps/trading/client-pages/markets/closed.tsx @@ -18,7 +18,7 @@ import type { MarketMaybeWithData, } from '@vegaprotocol/markets'; import { - MarketTableActions, + MarketActionsDropdown, closedMarketsWithDataProvider, } from '@vegaprotocol/markets'; import { useVegaWallet } from '@vegaprotocol/wallet'; @@ -291,7 +291,7 @@ const ClosedMarketsDataGrid = ({ cellRenderer: ({ data }: VegaICellRendererParams) => { if (!data) return null; return ( - diff --git a/apps/trading/client-pages/portfolio/account-history-container.tsx b/apps/trading/client-pages/portfolio/account-history-container.tsx index f4bd1eeb6..6a2482c44 100644 --- a/apps/trading/client-pages/portfolio/account-history-container.tsx +++ b/apps/trading/client-pages/portfolio/account-history-container.tsx @@ -24,7 +24,10 @@ import { PriceChart } from 'pennant'; import 'pennant/dist/style.css'; import type { Account } from '@vegaprotocol/accounts'; import { accountsDataProvider } from '@vegaprotocol/accounts'; -import { useThemeSwitcher } from '@vegaprotocol/react-helpers'; +import { + useLocalStorageSnapshot, + useThemeSwitcher, +} from '@vegaprotocol/react-helpers'; import { useDataProvider } from '@vegaprotocol/data-provider'; import type { Market } from '@vegaprotocol/markets'; @@ -68,7 +71,7 @@ export const AccountHistoryContainer = () => { const { data: assets } = useAssetsDataProvider(); if (!pubKey) { - return Connect wallet; + return {t('Connect wallet')}; } return ( @@ -114,7 +117,15 @@ const AccountHistoryManager = ({ .sort((a, b) => a.name.localeCompare(b.name)), [assetData, assetIds] ); - const [asset, setAsset] = useState(assets[0]); + const [assetId, setAssetId] = useLocalStorageSnapshot( + 'account-history-active-asset-id' + ); + + const asset = useMemo( + () => assets.find((a) => a.id === assetId) || assets[0], + [assetId, assets] + ); + const [range, setRange] = useState( DateRange.RANGE_1M ); @@ -146,10 +157,10 @@ const AccountHistoryManager = ({ m.tradableInstrument.instrument.product.settlementAsset.id; const newAsset = assets.find((item) => item.id === newAssetId); if ((!asset || (assets && newAssetId !== asset.id)) && newAsset) { - setAsset(newAsset); + setAssetId(newAsset.id); } }, - [asset, assets] + [asset, assets, setAssetId] ); const variables = useMemo( @@ -211,14 +222,14 @@ const AccountHistoryManager = ({ > {assets.map((a) => ( - setAsset(a)}> + setAssetId(a.id)}> {a.symbol} ))} ); - }, [assets, asset]); + }, [asset, assets, setAssetId]); const marketsMenu = useMemo(() => { return accountType === Schema.AccountType.ACCOUNT_TYPE_MARGIN && markets?.length ? ( diff --git a/libs/accounts/src/lib/accounts-actions-dropdown.tsx b/libs/accounts/src/lib/accounts-actions-dropdown.tsx index bf8ce77f8..97dc9e502 100644 --- a/libs/accounts/src/lib/accounts-actions-dropdown.tsx +++ b/libs/accounts/src/lib/accounts-actions-dropdown.tsx @@ -1,11 +1,9 @@ import { ETHERSCAN_ADDRESS, useEtherscanLink } from '@vegaprotocol/environment'; import { t } from '@vegaprotocol/i18n'; import { - DropdownMenu, - DropdownMenuContent, + ActionsDropdown, DropdownMenuCopyItem, DropdownMenuItem, - DropdownMenuTrigger, Link, VegaIcon, VegaIconNames, @@ -29,75 +27,65 @@ export const AccountsActionsDropdown = ({ const etherscanLink = useEtherscanLink(); const openTransferDialog = useTransferDialog((store) => store.open); const openAssetDialog = useAssetDetailsDialogStore((store) => store.open); + return ( - - - - } - > - - - - {t('Deposit')} + + + + {t('Deposit')} + + + + {t('Withdraw')} + + openTransferDialog(true, assetId)} + > + + {t('Transfer')} + + + + {t('View usage breakdown')} + + { + openAssetDialog(assetId, e.target as HTMLElement); + }} + > + + {t('View asset details')} + + + {assetContractAddress && ( + + + + + {t('View on Etherscan')} + + - - - {t('Withdraw')} - - openTransferDialog(true, assetId)} - > - - {t('Transfer')} - - - - {t('Breakdown')} - - { - openAssetDialog(assetId, e.target as HTMLElement); - }} - > - - {t('View asset')} - - - {assetContractAddress && ( - - - - - {t('View on Etherscan')} - - - - )} - - + )} + ); }; diff --git a/libs/accounts/src/lib/transfer-container.tsx b/libs/accounts/src/lib/transfer-container.tsx index 338ffec79..cea902cf2 100644 --- a/libs/accounts/src/lib/transfer-container.tsx +++ b/libs/accounts/src/lib/transfer-container.tsx @@ -13,6 +13,7 @@ import { accountsDataProvider } from './accounts-data-provider'; import { TransferForm } from './transfer-form'; import { useTransferDialog } from './transfer-dialog'; import { Lozenge } from '@vegaprotocol/ui-toolkit'; +import sortBy from 'lodash/sortBy'; export const TransferContainer = ({ assetId }: { assetId?: string }) => { const { pubKey, pubKeys } = useVegaWallet(); @@ -58,7 +59,7 @@ export const TransferContainer = ({ assetId }: { assetId?: string }) => { pk.publicKey) : null} - assets={assets} + assets={sortBy(assets, 'name')} assetId={assetId} feeFactor={param} submitTransfer={transfer} diff --git a/libs/accounts/src/lib/transfer-form.spec.tsx b/libs/accounts/src/lib/transfer-form.spec.tsx index 131c51fee..6ffc0c1ea 100644 --- a/libs/accounts/src/lib/transfer-form.spec.tsx +++ b/libs/accounts/src/lib/transfer-form.spec.tsx @@ -8,7 +8,7 @@ import { import BigNumber from 'bignumber.js'; import { AddressField, TransferFee, TransferForm } from './transfer-form'; import { AccountType } from '@vegaprotocol/types'; -import { formatNumber, removeDecimal } from '@vegaprotocol/utils'; +import { addDecimal, formatNumber, removeDecimal } from '@vegaprotocol/utils'; describe('TransferForm', () => { const submit = () => fireEvent.submit(screen.getByTestId('transfer-form')); @@ -16,11 +16,11 @@ describe('TransferForm', () => { const pubKey = '70d14a321e02e71992fd115563df765000ccc4775cbe71a0e2f9ff5a3b9dc680'; const asset = { - id: 'asset-0', - symbol: 'ASSET 0', - name: 'Asset 0', + id: 'eur', + symbol: '€', + name: 'EUR', decimals: 2, - balance: '1000', + balance: addDecimal(100000, 2), // 1000 }; const props = { pubKey, @@ -92,7 +92,7 @@ describe('TransferForm', () => { expect(await screen.findByTestId('select-asset')).toHaveTextContent( asset.name ); - expect(screen.getByTestId('asset-balance')).toHaveTextContent( + expect(await screen.findByTestId('asset-balance')).toHaveTextContent( formatNumber(asset.balance, asset.decimals) ); @@ -168,7 +168,7 @@ describe('TransferForm', () => { expect(await screen.findByTestId('select-asset')).toHaveTextContent( asset.name ); - expect(screen.getByTestId('asset-balance')).toHaveTextContent( + expect(await screen.findByTestId('asset-balance')).toHaveTextContent( formatNumber(asset.balance, asset.decimals) ); @@ -244,7 +244,7 @@ describe('TransferForm', () => { expect(await screen.findByTestId('select-asset')).toHaveTextContent( asset.name ); - expect(screen.getByTestId('asset-balance')).toHaveTextContent( + expect(await screen.findByTestId('asset-balance')).toHaveTextContent( formatNumber(asset.balance, asset.decimals) ); diff --git a/libs/accounts/src/lib/transfer-form.tsx b/libs/accounts/src/lib/transfer-form.tsx index 5de6822a2..1c426e1bf 100644 --- a/libs/accounts/src/lib/transfer-form.tsx +++ b/libs/accounts/src/lib/transfer-form.tsx @@ -12,7 +12,6 @@ import { FormGroup, Input, InputError, - Option, RichSelect, Select, Tooltip, @@ -24,6 +23,7 @@ import BigNumber from 'bignumber.js'; import type { ReactNode } from 'react'; import { useCallback, useMemo, useState } from 'react'; import { Controller, useForm } from 'react-hook-form'; +import { AssetOption, Balance } from '@vegaprotocol/assets'; interface FormFields { toAddress: string; @@ -193,21 +193,20 @@ export const TransferForm = ({ onValueChange={(value) => { field.onChange(value); }} - placeholder={t('Please select')} + placeholder={t('Please select an asset')} value={field.value} > {assets.map((a) => ( - + + } + /> ))} )} diff --git a/libs/assets/src/lib/asset-option.tsx b/libs/assets/src/lib/asset-option.tsx index 2d67c79a8..1a7a98135 100644 --- a/libs/assets/src/lib/asset-option.tsx +++ b/libs/assets/src/lib/asset-option.tsx @@ -5,7 +5,7 @@ import { t } from '@vegaprotocol/i18n'; import type { ReactNode } from 'react'; type AssetOptionProps = { - asset: AssetFieldsFragment; + asset: Pick; balance?: ReactNode; }; @@ -17,11 +17,13 @@ export const Balance = ({ symbol: string; }) => balance ? ( -
+
{balance} {symbol}
) : ( -
{t('Fetching balance…')}
+
+ {t('Fetching balance…')} +
); export const AssetOption = ({ asset, balance }: AssetOptionProps) => { diff --git a/libs/fills/src/lib/fill-actions-dropdown.tsx b/libs/fills/src/lib/fill-actions-dropdown.tsx index ebfe774f9..97c7b4d5e 100644 --- a/libs/fills/src/lib/fill-actions-dropdown.tsx +++ b/libs/fills/src/lib/fill-actions-dropdown.tsx @@ -1,10 +1,6 @@ import { - DropdownMenu, - DropdownMenuContent, + ActionsDropdown, DropdownMenuCopyItem, - DropdownMenuTrigger, - VegaIcon, - VegaIconNames, } from '@vegaprotocol/ui-toolkit'; import { t } from '@vegaprotocol/i18n'; @@ -18,27 +14,13 @@ export const FillActionsDropdown = ({ sellOrderId: string; }) => { return ( - - - - } - > - - - - - - + + + + + ); }; diff --git a/libs/markets/src/lib/components/markets-container/market-table-actions.tsx b/libs/markets/src/lib/components/markets-container/market-table-actions.tsx index 8b6c8c922..295ffc851 100644 --- a/libs/markets/src/lib/components/markets-container/market-table-actions.tsx +++ b/libs/markets/src/lib/components/markets-container/market-table-actions.tsx @@ -1,18 +1,16 @@ import { t } from '@vegaprotocol/i18n'; import { - DropdownMenu, - DropdownMenuContent, DropdownMenuItem, - DropdownMenuTrigger, DropdownMenuCopyItem, Link, VegaIcon, VegaIconNames, + ActionsDropdown, } from '@vegaprotocol/ui-toolkit'; import { DApp, EXPLORER_MARKET, useLinks } from '@vegaprotocol/environment'; import { useAssetDetailsDialogStore } from '@vegaprotocol/assets'; -export const MarketTableActions = ({ +export const MarketActionsDropdown = ({ marketId, assetId, }: { @@ -21,39 +19,29 @@ export const MarketTableActions = ({ }) => { const open = useAssetDetailsDialogStore((store) => store.open); const linkCreator = useLinks(DApp.Explorer); + return ( - + + + - - - } - > - - - - - - - {t('View on Explorer')} - - - - { - open(assetId, e.target as HTMLElement); - }} - > - - {t('View asset')} - - - + + + {t('View on Explorer')} + + + + { + open(assetId, e.target as HTMLElement); + }} + > + + {t('View settlement asset details')} + + ); }; diff --git a/libs/markets/src/lib/components/markets-container/use-column-defs.tsx b/libs/markets/src/lib/components/markets-container/use-column-defs.tsx index 669856a7f..0c032b5c2 100644 --- a/libs/markets/src/lib/components/markets-container/use-column-defs.tsx +++ b/libs/markets/src/lib/components/markets-container/use-column-defs.tsx @@ -12,7 +12,7 @@ import { addDecimalsFormatNumber, toBigNum } from '@vegaprotocol/utils'; import { ButtonLink } from '@vegaprotocol/ui-toolkit'; import { useAssetDetailsDialogStore } from '@vegaprotocol/assets'; import type { MarketMaybeWithData } from '../../markets-provider'; -import { MarketTableActions } from './market-table-actions'; +import { MarketActionsDropdown } from './market-table-actions'; interface Props { onMarketClick: (marketId: string, metaKey?: boolean) => void; @@ -172,7 +172,7 @@ export const useColumnDefs = ({ onMarketClick }: Props) => { }: VegaICellRendererParams) => { if (!data) return null; return ( - { return ( - - - - } - > - - - - + + + ); }; diff --git a/libs/positions/src/lib/position-actions-dropdown.tsx b/libs/positions/src/lib/position-actions-dropdown.tsx index 64250def0..f9740d5c9 100644 --- a/libs/positions/src/lib/position-actions-dropdown.tsx +++ b/libs/positions/src/lib/position-actions-dropdown.tsx @@ -1,37 +1,25 @@ import { t } from '@vegaprotocol/i18n'; import { - DropdownMenu, - DropdownMenuContent, + ActionsDropdown, DropdownMenuItem, - DropdownMenuTrigger, VegaIcon, VegaIconNames, } from '@vegaprotocol/ui-toolkit'; import { useAssetDetailsDialogStore } from '@vegaprotocol/assets'; -export const PositionTableActions = ({ assetId }: { assetId: string }) => { +export const PositionActionsDropdown = ({ assetId }: { assetId: string }) => { const open = useAssetDetailsDialogStore((store) => store.open); + return ( - - - - } - > - - { - open(assetId, e.target as HTMLElement); - }} - > - - {t('View asset')} - - - + + { + open(assetId, e.target as HTMLElement); + }} + > + + {t('View settlement asset details')} + + ); }; diff --git a/libs/positions/src/lib/positions-table.tsx b/libs/positions/src/lib/positions-table.tsx index bdcf6902c..9ce48d269 100644 --- a/libs/positions/src/lib/positions-table.tsx +++ b/libs/positions/src/lib/positions-table.tsx @@ -38,7 +38,7 @@ import type { Position } from './positions-data-providers'; import * as Schema from '@vegaprotocol/types'; import { PositionStatus, PositionStatusMapping } from '@vegaprotocol/types'; import { DocsLinks } from '@vegaprotocol/environment'; -import { PositionTableActions } from './position-actions-dropdown'; +import { PositionActionsDropdown } from './position-actions-dropdown'; import { useAssetDetailsDialogStore } from '@vegaprotocol/assets'; import type { VegaWalletContextShape } from '@vegaprotocol/wallet'; import { LiquidationPrice } from './liquidation-price'; @@ -264,6 +264,7 @@ export const PositionsTable = forwardRef( if (!data) return null; return ( { openAssetDetailsDialog( data.assetId, @@ -449,7 +450,7 @@ export const PositionsTable = forwardRef( ) : null} {data?.assetId && ( - + )}
); diff --git a/libs/proposals/src/components/proposal-actions-dropdown.tsx b/libs/proposals/src/components/proposal-actions-dropdown.tsx index 0b9d56f85..43a1ed4b2 100644 --- a/libs/proposals/src/components/proposal-actions-dropdown.tsx +++ b/libs/proposals/src/components/proposal-actions-dropdown.tsx @@ -1,39 +1,27 @@ import { - DropdownMenu, - DropdownMenuContent, DropdownMenuItem, - DropdownMenuTrigger, VegaIcon, VegaIconNames, Link, + ActionsDropdown, } from '@vegaprotocol/ui-toolkit'; import { t } from '@vegaprotocol/i18n'; import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment'; export const ProposalActionsDropdown = ({ id }: { id: string }) => { const linkCreator = useLinks(DApp.Token); + return ( - + + - - - } - > - - - - - {t('View proposal')} - - - - + + {t('View proposal')} + + + ); }; diff --git a/libs/ui-toolkit/src/components/dropdown-menu/actions-dropdown.tsx b/libs/ui-toolkit/src/components/dropdown-menu/actions-dropdown.tsx new file mode 100644 index 000000000..bd63862b6 --- /dev/null +++ b/libs/ui-toolkit/src/components/dropdown-menu/actions-dropdown.tsx @@ -0,0 +1,26 @@ +import { VegaIcon, VegaIconNames } from '../icon'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuTrigger, +} from './dropdown-menu'; + +export const ActionsDropdownTrigger = () => { + return ( + + + + ); +}; + +type ActionMenuContentProps = React.ComponentProps; +export const ActionsDropdown = (props: ActionMenuContentProps) => { + return ( + }> + + + ); +}; diff --git a/libs/ui-toolkit/src/components/dropdown-menu/index.ts b/libs/ui-toolkit/src/components/dropdown-menu/index.ts index 2759d3ce6..cc428e45d 100644 --- a/libs/ui-toolkit/src/components/dropdown-menu/index.ts +++ b/libs/ui-toolkit/src/components/dropdown-menu/index.ts @@ -1 +1,2 @@ export * from './dropdown-menu'; +export * from './actions-dropdown'; diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-info.tsx b/libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-info.tsx new file mode 100644 index 000000000..84467122f --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-info.tsx @@ -0,0 +1,12 @@ +export const IconInfo = ({ size = 14 }: { size: number }) => { + return ( + + + + ); +}; diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts b/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts index 51de5dc54..bde764b38 100644 --- a/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts +++ b/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts @@ -1,72 +1,75 @@ -import { IconBreakdown } from './svg-icons/icon-breakdown'; -import { IconCopy } from './svg-icons/icon-copy'; -import { IconDeposit } from './svg-icons/icon-deposit'; -import { IconWithdraw } from './svg-icons/icon-withdraw'; -import { IconTransfer } from './svg-icons/icon-transfer'; -import { IconEdit } from './svg-icons/icon-edit'; -import { IconMoon } from './svg-icons/icon-moon'; -import { IconGlobe } from './svg-icons/icon-globe'; -import { IconLinkedIn } from './svg-icons/icon-linkedin'; -import { IconTwitter } from './svg-icons/icon-twitter'; -import { IconQuestionMark } from './svg-icons/icon-question-mark'; -import { IconForum } from './svg-icons/icon-forum'; -import { IconOpenExternal } from './svg-icons/icon-open-external'; -import { IconArrowRight } from './svg-icons/icon-arrow-right'; -import { IconChevronUp } from './svg-icons/icon-chevron-up'; -import { IconTrendUp } from './svg-icons/icon-trend-up'; -import { IconCross } from './svg-icons/icon-cross'; -import { IconKebab } from './svg-icons/icon-kebab'; import { IconArrowDown } from './svg-icons/icon-arrow-down'; +import { IconArrowRight } from './svg-icons/icon-arrow-right'; +import { IconBreakdown } from './svg-icons/icon-breakdown'; import { IconChevronDown } from './svg-icons/icon-chevron-down'; +import { IconChevronUp } from './svg-icons/icon-chevron-up'; +import { IconCopy } from './svg-icons/icon-copy'; +import { IconCross } from './svg-icons/icon-cross'; +import { IconDeposit } from './svg-icons/icon-deposit'; +import { IconEdit } from './svg-icons/icon-edit'; +import { IconForum } from './svg-icons/icon-forum'; +import { IconGlobe } from './svg-icons/icon-globe'; +import { IconInfo } from './svg-icons/icon-info'; +import { IconKebab } from './svg-icons/icon-kebab'; +import { IconLinkedIn } from './svg-icons/icon-linkedin'; +import { IconMoon } from './svg-icons/icon-moon'; +import { IconOpenExternal } from './svg-icons/icon-open-external'; +import { IconQuestionMark } from './svg-icons/icon-question-mark'; import { IconTick } from './svg-icons/icon-tick'; +import { IconTransfer } from './svg-icons/icon-transfer'; +import { IconTrendUp } from './svg-icons/icon-trend-up'; +import { IconTwitter } from './svg-icons/icon-twitter'; +import { IconWithdraw } from './svg-icons/icon-withdraw'; export enum VegaIconNames { + ARROW_DOWN = 'arrow-down', + ARROW_RIGHT = 'arrow-right', BREAKDOWN = 'breakdown', + CHEVRON_DOWN = 'chevron-down', + CHEVRON_UP = 'chevron-up', COPY = 'copy', + CROSS = 'cross', DEPOSIT = 'deposit', - WITHDRAW = 'withdraw', EDIT = 'edit', - TRANSFER = 'transfer', FORUM = 'forum', GLOBE = 'globe', + INFO = 'info', + KEBAB = 'kebab', LINKEDIN = 'linkedin', - TWITTER = 'twitter', MOON = 'moon', OPEN_EXTERNAL = 'open-external', QUESTION_MARK = 'question-mark', - ARROW_RIGHT = 'arrow-right', - ARROW_DOWN = 'arrow-down', - CHEVRON_UP = 'chevron-up', - CHEVRON_DOWN = 'chevron-down', - TREND_UP = 'trend-up', - CROSS = 'cross', - KEBAB = 'kebab', TICK = 'tick', + TRANSFER = 'transfer', + TREND_UP = 'trend-up', + TWITTER = 'twitter', + WITHDRAW = 'withdraw', } export const VegaIconNameMap: Record< VegaIconNames, ({ size }: { size: number }) => JSX.Element > = { + 'arrow-down': IconArrowDown, + 'arrow-right': IconArrowRight, + 'chevron-down': IconChevronDown, + 'chevron-up': IconChevronUp, + 'open-external': IconOpenExternal, + 'question-mark': IconQuestionMark, + 'trend-up': IconTrendUp, breakdown: IconBreakdown, copy: IconCopy, - deposit: IconDeposit, - withdraw: IconWithdraw, - transfer: IconTransfer, - edit: IconEdit, - moon: IconMoon, - globe: IconGlobe, - linkedin: IconLinkedIn, - twitter: IconTwitter, - 'question-mark': IconQuestionMark, - forum: IconForum, - 'open-external': IconOpenExternal, - 'arrow-right': IconArrowRight, - 'arrow-down': IconArrowDown, - 'chevron-up': IconChevronUp, - 'chevron-down': IconChevronDown, - 'trend-up': IconTrendUp, cross: IconCross, + deposit: IconDeposit, + edit: IconEdit, + forum: IconForum, + globe: IconGlobe, + info: IconInfo, kebab: IconKebab, + linkedin: IconLinkedIn, + moon: IconMoon, tick: IconTick, + transfer: IconTransfer, + twitter: IconTwitter, + withdraw: IconWithdraw, }; diff --git a/libs/ui-toolkit/src/components/select/select.tsx b/libs/ui-toolkit/src/components/select/select.tsx index e71bae956..9eadf2502 100644 --- a/libs/ui-toolkit/src/components/select/select.tsx +++ b/libs/ui-toolkit/src/components/select/select.tsx @@ -48,24 +48,12 @@ export const RichSelect = forwardRef< const containerRef = useRef(); const contentRef = useRef(); - const setWidth = () => { - if (contentRef.current) { - contentRef.current.style.width = containerRef.current ? `450px` : 'auto'; - } - }; - return (
} className="flex items-center relative" > - { - setWidth(); - }} - defaultOpen={false} - > + } className={classNames( + 'relative', 'z-20', 'bg-white dark:bg-black', - 'border border-neutral-500 focus:border-black dark:focus:border-white', + 'border border-neutral-500 focus:border-black dark:focus:border-white rounded', 'overflow-hidden', 'shadow-lg' )} @@ -95,11 +84,11 @@ export const RichSelect = forwardRef< side={'bottom'} align={'center'} > - + {children} - + diff --git a/libs/withdraws/src/lib/asset-balance.tsx b/libs/withdraws/src/lib/asset-balance.tsx index 8c4cce702..86be241e8 100644 --- a/libs/withdraws/src/lib/asset-balance.tsx +++ b/libs/withdraws/src/lib/asset-balance.tsx @@ -2,7 +2,7 @@ import { useAccountBalance } from '@vegaprotocol/accounts'; import type { AssetFieldsFragment } from '@vegaprotocol/assets'; import { useBalancesStore } from '@vegaprotocol/assets'; import { Balance } from '@vegaprotocol/assets'; -import { addDecimal } from '@vegaprotocol/utils'; +import { addDecimal, formatNumber } from '@vegaprotocol/utils'; import BigNumber from 'bignumber.js'; import { useEffect } from 'react'; @@ -23,7 +23,10 @@ export const AssetBalance = ({ asset }: { asset: AssetFieldsFragment }) => { return ( ); diff --git a/libs/withdraws/src/lib/withdrawals-table.tsx b/libs/withdraws/src/lib/withdrawals-table.tsx index ff4fdc94f..189bedb7d 100644 --- a/libs/withdraws/src/lib/withdrawals-table.tsx +++ b/libs/withdraws/src/lib/withdrawals-table.tsx @@ -10,11 +10,9 @@ import { } from '@vegaprotocol/utils'; import { t } from '@vegaprotocol/i18n'; import { + ActionsDropdown, ButtonLink, - DropdownMenu, - DropdownMenuContent, DropdownMenuItem, - DropdownMenuTrigger, VegaIcon, VegaIconNames, } from '@vegaprotocol/ui-toolkit'; @@ -160,7 +158,7 @@ export type CompleteCellProps = { }; export const CompleteCell = ({ data, complete }: CompleteCellProps) => { const open = useWithdrawalApprovalDialog((state) => state.open); - const ref = useRef(null); + const ref = useRef(null); if (!data) { return null; @@ -176,32 +174,20 @@ export const CompleteCell = ({ data, complete }: CompleteCellProps) => { {t('Complete withdrawal')} - - - - } - > - - { - if (data.id) { - open(data.id, ref.current, false); - } - }} - > - - {t('View withdrawal details')} - - - + + { + if (data.id) { + open(data.id, ref.current, false); + } + }} + > + + {t('View withdrawal details')} + +
); };