diff --git a/apps/trading/components/market-selector/asset-dropdown.tsx b/apps/trading/components/market-selector/asset-dropdown.tsx
index 308bba84e..a40b7f0a8 100644
--- a/apps/trading/components/market-selector/asset-dropdown.tsx
+++ b/apps/trading/components/market-selector/asset-dropdown.tsx
@@ -1,13 +1,14 @@
import { t } from '@vegaprotocol/i18n';
import {
- DropdownMenu,
- DropdownMenuCheckboxItem,
- DropdownMenuContent,
- DropdownMenuItemIndicator,
- DropdownMenuTrigger,
+ TradingDropdown,
+ TradingDropdownCheckboxItem,
+ TradingDropdownContent,
+ TradingDropdownItemIndicator,
+ TradingDropdownTrigger,
VegaIcon,
VegaIconNames,
} from '@vegaprotocol/ui-toolkit';
+import { useMemo } from 'react';
type Assets = Array<{ id: string; symbol: string }>;
@@ -20,22 +21,41 @@ export const AssetDropdown = ({
checkedAssets: string[];
onSelect: (id: string, checked: boolean) => void;
}) => {
+ const assetsText = useMemo(() => {
+ if (!assets?.length) {
+ return null;
+ }
+ let text = t('Assets');
+
+ if (checkedAssets.length === 1) {
+ const assetId = checkedAssets[0];
+ const asset = assets.find((a) => a.id === assetId);
+ text = asset ? asset.symbol : t('Asset (1)');
+ } else if (checkedAssets.length > 1) {
+ text = t(`${checkedAssets.length} Assets`);
+ }
+ return text;
+ }, [assets, checkedAssets]);
+
if (!assets?.length) {
return null;
}
return (
-
-
-
+
+
+ {assetsText}
+
+
+
}
>
-
+
{assets?.map((a) => {
return (
- {
@@ -46,35 +66,11 @@ export const AssetDropdown = ({
data-testid={`asset-id-${a.id}`}
>
{a.symbol}
-
-
+
+
);
})}
-
-
- );
-};
-
-const TriggerText = ({
- assets,
- checkedAssets,
-}: {
- assets: Assets;
- checkedAssets: string[];
-}) => {
- let text = t('Assets');
-
- if (checkedAssets.length === 1) {
- const assetId = checkedAssets[0];
- const asset = assets.find((a) => a.id === assetId);
- text = asset ? asset.symbol : t('Asset (1)');
- } else if (checkedAssets.length > 1) {
- text = t(`${checkedAssets.length} Assets`);
- }
-
- return (
-
- {text}
-
+
+
);
};
diff --git a/apps/trading/components/market-selector/sort-dropdown.tsx b/apps/trading/components/market-selector/sort-dropdown.tsx
index 285d6d566..1a63b382d 100644
--- a/apps/trading/components/market-selector/sort-dropdown.tsx
+++ b/apps/trading/components/market-selector/sort-dropdown.tsx
@@ -1,10 +1,10 @@
import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItemIndicator,
- DropdownMenuRadioGroup,
- DropdownMenuRadioItem,
- DropdownMenuTrigger,
+ TradingDropdown,
+ TradingDropdownContent,
+ TradingDropdownItemIndicator,
+ TradingDropdownRadioGroup,
+ TradingDropdownRadioItem,
+ TradingDropdownTrigger,
VegaIcon,
VegaIconNames,
} from '@vegaprotocol/ui-toolkit';
@@ -44,24 +44,24 @@ export const SortDropdown = ({
onSelect: (sort: SortType) => void;
}) => {
return (
-
+
{SortTypeMapping[currentSort]}
-
+
}
>
-
-
+ onSelect(value as SortType)}
>
{Object.keys(Sort).map((key) => {
return (
- {' '}
{SortTypeMapping[key as SortType]}
-
-
+
+
);
})}
-
-
-
+
+
+
);
};
diff --git a/libs/markets/src/lib/markets-provider.ts b/libs/markets/src/lib/markets-provider.ts
index 5fe37a720..021b78fca 100644
--- a/libs/markets/src/lib/markets-provider.ts
+++ b/libs/markets/src/lib/markets-provider.ts
@@ -199,7 +199,7 @@ export const allMarketsWithLiveDataProvider = makeDerivedDataProvider<
return data.find(
(market) =>
market.id ===
- (parts[1].delta as MarketDataUpdateFieldsFragment).marketId
+ (parts[1].delta as MarketDataUpdateFieldsFragment)?.marketId
);
}
);