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

chore(trading): update dropdowns (#4694)

Browse Source 
Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
This commit is contained in:
m.ray 2023-09-04 23:25:24 +03:00 committed by GitHub
parent 1208d3f2a8
commit d268088e60
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 82 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
apps/trading/components/market-selector/asset-dropdown.tsx
View File

@ -1,13 +1,12 @@
import { t } from '@vegaprotocol/i18n'; import { t } from '@vegaprotocol/i18n';
import { import {
DropdownMenu, TradingDropdown,
DropdownMenuCheckboxItem, TradingDropdownCheckboxItem,
DropdownMenuContent, TradingDropdownContent,
DropdownMenuItemIndicator, TradingDropdownItemIndicator,
DropdownMenuTrigger, TradingDropdownTrigger,
VegaIcon,
VegaIconNames,
} from '@vegaprotocol/ui-toolkit'; } from '@vegaprotocol/ui-toolkit';
import { MarketSelectorButton } from './market-selector-button';
type Assets = Array<{ id: string; symbol: string }>; type Assets = Array<{ id: string; symbol: string }>;
@ -25,17 +24,19 @@ export const AssetDropdown = ({
} }
return ( return (
<DropdownMenu <TradingDropdown
trigger={ trigger={
<DropdownMenuTrigger data-testid="asset-trigger"> <TradingDropdownTrigger data-testid="asset-trigger">
<TriggerText assets={assets} checkedAssets={checkedAssets} /> <MarketSelectorButton>
</DropdownMenuTrigger> {triggerText({ assets, checkedAssets })}
</MarketSelectorButton>
</TradingDropdownTrigger>
} }
> >
<DropdownMenuContent> <TradingDropdownContent>
{assets?.map((a) => { {assets?.map((a) => {
return ( return (
<DropdownMenuCheckboxItem <TradingDropdownCheckboxItem
key={a.id} key={a.id}
checked={checkedAssets.includes(a.id)} checked={checkedAssets.includes(a.id)}
onCheckedChange={(checked) => { onCheckedChange={(checked) => {
@ -46,16 +47,16 @@ export const AssetDropdown = ({
data-testid={`asset-id-${a.id}`} data-testid={`asset-id-${a.id}`}
> >
{a.symbol} {a.symbol}
<DropdownMenuItemIndicator /> <TradingDropdownItemIndicator />
</DropdownMenuCheckboxItem> </TradingDropdownCheckboxItem>
); );
})} })}
</DropdownMenuContent> </TradingDropdownContent>
</DropdownMenu> </TradingDropdown>
); );
}; };
const TriggerText = ({ const triggerText = ({
assets, assets,
checkedAssets, checkedAssets,
}: { }: {
@ -72,9 +73,5 @@ const TriggerText = ({
text = t(`${checkedAssets.length} Assets`); text = t(`${checkedAssets.length} Assets`);
} }
return ( return text;
<span className="flex justify-between items-center">
{text} <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
</span>
);
}; };

1
apps/trading/components/market-selector/index.ts
View File

@ -1,2 +1,3 @@
export * from './market-selector'; export * from './market-selector';
export * from './market-selector-item'; export * from './market-selector-item';
export * from './market-selector-button';

23
apps/trading/components/market-selector/market-selector-button.tsx Normal file
View File

@ -0,0 +1,23 @@
import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
import classNames from 'classnames';
import type { ButtonHTMLAttributes } from 'react';
import { forwardRef } from 'react';
export const MarketSelectorButton = forwardRef<
HTMLButtonElement,
ButtonHTMLAttributes<HTMLButtonElement>
>((props, ref) => (
<button
{...props}
className={classNames(
'flex items-center justify-between px-2 border rounded gap-1',
'border-vega-clight-600 dark:border-vega-cdark-600 bg-vega-clight-700 dark:bg-vega-cdark-700',
'text-secondary data-[state=open]:text-vega-clight-50 dark:data-[state=open]:text-vega-cdark-50'
)}
ref={ref}
>
{props.children}
<VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
</button>
));
MarketSelectorButton.displayName = 'MarketSelectorButton';

10
apps/trading/components/market-selector/market-selector-item.tsx
View File

@ -31,7 +31,7 @@ export const MarketSelectorItem = ({
<div style={style} role="row"> <div style={style} role="row">
<Link <Link
to={`/markets/${market.id}`} to={`/markets/${market.id}`}
className={classNames('h-full flex items-center gap-2 px-4', { className={classNames('h-full flex items-center gap-2 mx-2 px-2', {
'hover:bg-vega-clight-700 dark:hover:bg-vega-cdark-700': 'hover:bg-vega-clight-700 dark:hover:bg-vega-cdark-700':
market.id !== currentMarketId, market.id !== currentMarketId,
'bg-vega-clight-600 dark:bg-vega-cdark-600': 'bg-vega-clight-600 dark:bg-vega-cdark-600':
@ -94,7 +94,7 @@ const MarketData = ({
return ( return (
<> <>
<div className="w-2/5" role="gridcell"> <div className="w-2/5" role="gridcell">
<h3 className="text-ellipsis text-sm lg:text-base whitespace-nowrap overflow-hidden"> <h3 className="overflow-hidden text-sm text-ellipsis lg:text-base whitespace-nowrap">
{market.tradableInstrument.instrument.code}{' '} {market.tradableInstrument.instrument.code}{' '}
{allProducts && productType && ( {allProducts && productType && (
<MarketProductPill productType={productType} /> <MarketProductPill productType={productType} />
@ -107,7 +107,7 @@ const MarketData = ({
)} )}
</div> </div>
<div <div
className="w-1/5 text-xs lg:text-sm whitespace-nowrap text-ellipsis overflow-hidden" className="w-1/5 overflow-hidden text-xs lg:text-sm whitespace-nowrap text-ellipsis"
title={instrument.product.settlementAsset.symbol} title={instrument.product.settlementAsset.symbol}
data-testid="market-selector-price" data-testid="market-selector-price"
role="gridcell" role="gridcell"
@ -115,14 +115,14 @@ const MarketData = ({
{price} {instrument.product.settlementAsset.symbol} {price} {instrument.product.settlementAsset.symbol}
</div> </div>
<div <div
className="w-1/5 text-xs lg:text-sm text-right whitespace-nowrap text-ellipsis overflow-hidden" className="w-1/5 overflow-hidden text-xs text-right lg:text-sm whitespace-nowrap text-ellipsis"
title={t('24h vol')} title={t('24h vol')}
data-testid="market-selector-volume" data-testid="market-selector-volume"
role="gridcell" role="gridcell"
> >
{volume} {volume}
</div> </div>
<div className="w-1/5 flex justify-end" role="gridcell"> <div className="flex justify-end w-1/5" role="gridcell">
{oneDayCandles && ( {oneDayCandles && (
<Sparkline <Sparkline
width={64} width={64}

2
apps/trading/components/market-selector/market-selector.tsx
View File

@ -52,7 +52,7 @@ export const MarketSelector = ({
}, [reload]); }, [reload]);
return ( return (
<div data-testid="market-selector"> <div data-testid="market-selector" className="md:w-[580px]">
<div className="px-2 pt-2 mb-2"> <div className="px-2 pt-2 mb-2">
<ProductSelector <ProductSelector
product={filter.product} product={filter.product}

15
apps/trading/components/market-selector/product-selector.tsx
View File

@ -33,11 +33,14 @@ export const ProductSelector = ({
return ( return (
<div className="flex mb-2"> <div className="flex mb-2">
{Object.keys(Product).map((t) => { {Object.keys(Product).map((t) => {
const classes = classNames('px-3 py-1.5 rounded', { const classes = classNames(
'bg-vega-clight-500 dark:bg-vega-cdark-500 text-default': 'text-sm px-3 py-1.5 rounded hover:text-vega-clight-50 dark:hover:text-vega-cdark-50',
t === product, {
'text-secondary': t !== product, 'bg-vega-clight-500 dark:bg-vega-cdark-500 text-default':
}); t === product,
'text-secondary': t !== product,
}
);
return ( return (
<button <button
key={t} key={t}
@ -53,7 +56,7 @@ export const ProductSelector = ({
})} })}
<Link <Link
to={Routes.MARKETS} to={Routes.MARKETS}
className="flex items-center gap-2 ml-auto" className="flex items-center ml-auto text-sm gap-2"
title={t('See all markets')} title={t('See all markets')}
> >
<span className="underline underline-offset-4">{t('Browse')}</span> <span className="underline underline-offset-4">{t('Browse')}</span>

40
apps/trading/components/market-selector/sort-dropdown.tsx
View File

@ -1,13 +1,14 @@
import { import {
DropdownMenu, TradingDropdown,
DropdownMenuContent, TradingDropdownContent,
DropdownMenuItemIndicator, TradingDropdownItemIndicator,
DropdownMenuRadioGroup, TradingDropdownRadioGroup,
DropdownMenuRadioItem, TradingDropdownRadioItem,
DropdownMenuTrigger, TradingDropdownTrigger,
VegaIcon, VegaIcon,
VegaIconNames, VegaIconNames,
} from '@vegaprotocol/ui-toolkit'; } from '@vegaprotocol/ui-toolkit';
import { MarketSelectorButton } from './market-selector-button';
export const Sort = { export const Sort = {
Gained: 'Gained', Gained: 'Gained',
@ -44,24 +45,23 @@ export const SortDropdown = ({
onSelect: (sort: SortType) => void; onSelect: (sort: SortType) => void;
}) => { }) => {
return ( return (
<DropdownMenu <TradingDropdown
trigger={ trigger={
<DropdownMenuTrigger data-testid="sort-trigger"> <TradingDropdownTrigger data-testid="sort-trigger">
<span className="flex items-center justify-between gap-1"> <MarketSelectorButton>
{SortTypeMapping[currentSort]} {SortTypeMapping[currentSort]}
<VegaIcon name={VegaIconNames.CHEVRON_DOWN} /> </MarketSelectorButton>
</span> </TradingDropdownTrigger>
</DropdownMenuTrigger>
} }
> >
<DropdownMenuContent> <TradingDropdownContent>
<DropdownMenuRadioGroup <TradingDropdownRadioGroup
value={currentSort} value={currentSort}
onValueChange={(value) => onSelect(value as SortType)} onValueChange={(value) => onSelect(value as SortType)}
> >
{Object.keys(Sort).map((key) => { {Object.keys(Sort).map((key) => {
return ( return (
<DropdownMenuRadioItem <TradingDropdownRadioItem
inset inset
key={key} key={key}
value={key} value={key}
@ -71,12 +71,12 @@ export const SortDropdown = ({
<VegaIcon name={SortIconMapping[key as SortType]} />{' '} <VegaIcon name={SortIconMapping[key as SortType]} />{' '}
{SortTypeMapping[key as SortType]} {SortTypeMapping[key as SortType]}
</span> </span>
<DropdownMenuItemIndicator /> <TradingDropdownItemIndicator />
</DropdownMenuRadioItem> </TradingDropdownRadioItem>
); );
})} })}
</DropdownMenuRadioGroup> </TradingDropdownRadioGroup>
</DropdownMenuContent> </TradingDropdownContent>
</DropdownMenu> </TradingDropdown>
); );
}; };

2
libs/markets/src/lib/markets-provider.ts
View File

@ -199,7 +199,7 @@ export const allMarketsWithLiveDataProvider = makeDerivedDataProvider<
return data.find( return data.find(
(market) => (market) =>
market.id === market.id ===
(parts[1].delta as MarketDataUpdateFieldsFragment).marketId (parts[1].delta as MarketDataUpdateFieldsFragment)?.marketId
); );
} }
); );

6
libs/ui-toolkit/src/components/trading-input/input.tsx
View File

@ -84,10 +84,8 @@ const getAffixElement = ({
'absolute z-10 top-0 bottom-0 flex items-center', 'absolute z-10 top-0 bottom-0 flex items-center',
{ {
'fill-black dark:fill-white': prependIconName || appendIconName, 'fill-black dark:fill-white': prependIconName || appendIconName,
'left-3': prependIconName, 'left-3': prependIconName || prependElement,
'right-3': appendIconName, 'right-3': appendIconName || appendElement,
'left-1': prependElement,
'right-1': appendElement,
} }
); );