From 3e9d8def920747a8170feaf26d795daa8f5df015 Mon Sep 17 00:00:00 2001
From: Madalina Raicu <madalina@raygroup.uk>
Date: Mon, 4 Sep 2023 18:39:20 +0100
Subject: [PATCH] chore(trading): update dropdowns

---
 .../market-selector/asset-dropdown.tsx        | 74 +++++++++----------
 .../market-selector/sort-dropdown.tsx         | 34 ++++-----
 libs/markets/src/lib/markets-provider.ts      |  2 +-
 3 files changed, 53 insertions(+), 57 deletions(-)

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 (
-    <DropdownMenu
+    <TradingDropdown
       trigger={
-        <DropdownMenuTrigger data-testid="asset-trigger">
-          <TriggerText assets={assets} checkedAssets={checkedAssets} />
-        </DropdownMenuTrigger>
+        <TradingDropdownTrigger data-testid="asset-trigger">
+          <span className="flex items-center justify-around">
+            {assetsText}
+            <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
+          </span>
+        </TradingDropdownTrigger>
       }
     >
-      <DropdownMenuContent>
+      <TradingDropdownContent>
         {assets?.map((a) => {
           return (
-            <DropdownMenuCheckboxItem
+            <TradingDropdownCheckboxItem
               key={a.id}
               checked={checkedAssets.includes(a.id)}
               onCheckedChange={(checked) => {
@@ -46,35 +66,11 @@ export const AssetDropdown = ({
               data-testid={`asset-id-${a.id}`}
             >
               {a.symbol}
-              <DropdownMenuItemIndicator />
-            </DropdownMenuCheckboxItem>
+              <TradingDropdownItemIndicator />
+            </TradingDropdownCheckboxItem>
           );
         })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
-
-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 (
-    <span className="flex justify-between items-center">
-      {text} <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
-    </span>
+      </TradingDropdownContent>
+    </TradingDropdown>
   );
 };
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 (
-    <DropdownMenu
+    <TradingDropdown
       trigger={
-        <DropdownMenuTrigger data-testid="sort-trigger">
+        <TradingDropdownTrigger data-testid="sort-trigger">
           <span className="flex items-center justify-between gap-1">
             {SortTypeMapping[currentSort]}
             <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
           </span>
-        </DropdownMenuTrigger>
+        </TradingDropdownTrigger>
       }
     >
-      <DropdownMenuContent>
-        <DropdownMenuRadioGroup
+      <TradingDropdownContent>
+        <TradingDropdownRadioGroup
           value={currentSort}
           onValueChange={(value) => onSelect(value as SortType)}
         >
           {Object.keys(Sort).map((key) => {
             return (
-              <DropdownMenuRadioItem
+              <TradingDropdownRadioItem
                 inset
                 key={key}
                 value={key}
@@ -71,12 +71,12 @@ export const SortDropdown = ({
                   <VegaIcon name={SortIconMapping[key as SortType]} />{' '}
                   {SortTypeMapping[key as SortType]}
                 </span>
-                <DropdownMenuItemIndicator />
-              </DropdownMenuRadioItem>
+                <TradingDropdownItemIndicator />
+              </TradingDropdownRadioItem>
             );
           })}
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
+        </TradingDropdownRadioGroup>
+      </TradingDropdownContent>
+    </TradingDropdown>
   );
 };
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
     );
   }
 );