Add featured assets to asset drop down selector

src/components/Market/AssetDropDownCard.jsx

@@ -48,7 +48,7 @@ export default function AssetDropDown(properties) {
     marketSearch,
     type,
     size,
-    chain,
+    chain
   } = properties;
   const { t, i18n } = useTranslation(locale.get(), { i18n: i18nInstance });
   const blocklist = useSyncExternalStore($blockList.subscribe, $blockList.get, () => true);
@@ -93,42 +93,61 @@ export default function AssetDropDown(properties) {
   }, [thisInput, fuse]);
 
   const Row = ({ index, style }) => {
-    const res = mode === "search"
-      ? thisResult[index]
-      : relevantAssets[index];
+    let res;
+    if (mode === "search") {
+      res = thisResult[index].item;
+    } else if (mode === "featured") {
+      res = featuredAssets[index];
+    } else if (mode === "favourites") {
+      res = relevantAssets[index];
+    }
+
     return (
       <div style={{ ...style, marginBottom: "10px", paddingRight: "10px" }}>
         <Card
-          key={
-            mode === "search"
-            ? `acard-${res.item.id}`
-            : `acard-${res.id}`
-          }
+          key={`acard-${res.id}`}
           style={{ marginBottom: "2px" }}
           onClick={() => {
             setTimeout(() => {
-              storeCallback(
-                mode === "search"
-                  ? res.item.s
-                  : res.symbol,
-              );
+              if (mode === "search" || mode === "featured") {
+                storeCallback(res.s);
+              } else if (mode === "favourites") {
+                storeCallback(res.symbol);
+              }
             }, 0);
             setDialogOpen(false);
           }}
         >
           <CardHeader className="p-3">
             <CardTitle className="h-3">
               {
-                mode === "search"
-                ? `${res.item.s} (${res.item.id})`
-                : `${res.symbol} (${res.id})`
+                mode === "search" || mode === "featured"
+                ? `${res.s} (${res.id})`
+                : null
+              }
+              {
+                mode === "favourites"
+                ? `${res.symbol} (${res.id})`
+                : null
               }
             </CardTitle>
             <CardDescription>
-              {t(
-                "AssetDropDownCard:issued",
-                { user: mode === "search" ? res.item.u : res.issuer }
-              )}
+              {
+                mode === "search" || mode === "featured"
+                ? t(
+                    "AssetDropDownCard:issued",
+                    { user: res.u }
+                  )
+                : null
+              }
+              {
+                mode === "favourites"
+                ? t(
+                    "AssetDropDownCard:issued",
+                    { user: res.issuer }
+                  )
+                : null
+              }
             </CardDescription>
           </CardHeader>
         </Card>
@@ -140,6 +159,30 @@ export default function AssetDropDown(properties) {
 
   const favouriteAssets = useStore($favouriteAssets);
 
+  const featuredAssets = useMemo(() => {
+    if (!chain || !marketSearchContents) {
+      return [];
+    }
+    const _featuredSymbols = ["XBTSX.", "xbtsx.", "BTWTY.", "btwty.", "HONEST.", "honest.", "NFTEA.", "nftea."];
+    const _featuredIssuers = ["committee-account", "honest-quorum", "nftprofessional1"];
+
+    let _featuredAssets = marketSearchContents.filter(
+      (asset) => {
+        if (chain === "bitshares") {
+          if (_featuredIssuers.includes(asset.u.split(" ")[0])) {
+            return true;
+          }
+          if (_featuredSymbols.some(str => asset.s.includes(str))) {
+            return true;
+          }
+        }
+        return false
+      }
+    );
+
+    return _featuredAssets;
+  }, [assetSymbol, otherAsset, marketSearchContents, chain]);
+
   const relevantAssets = useMemo(() => {
     if (!chain || !favouriteAssets) {
       return [];
@@ -183,24 +226,33 @@ export default function AssetDropDown(properties) {
                 {size && assetSymbol && assetSymbol.length >= 12 ? assetData.id : null}
               </Button>
         }
-
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px] bg-white">
+      <DialogContent className="sm:max-w-[550px] bg-white">
+        <DialogHeader>
+          <DialogTitle>
+            <h3 className="text-2xl font-extrabold tracking-tight">
+              {assetSymbol
+                ? t("AssetDropDownCard:replacing", { assetSymbol: assetSymbol })
+                : t("AssetDropDownCard:selecting")}
+            </h3>
+          </DialogTitle>
+        </DialogHeader>
         <>
-          <h3 className="text-2xl font-extrabold tracking-tight">
-            {assetSymbol
-              ? t("AssetDropDownCard:replacing", { assetSymbol: assetSymbol })
-              : t("AssetDropDownCard:selecting")}
-          </h3>
-
-          <div className="grid grid-cols-2 gap-2">
+          <div className="grid grid-cols-3 gap-2">
             <Button
               variant={mode === "search" ? "" : "outline"}
               size="sm"
               onClick={() => setMode("search")}
             >
               {t("AssetDropDownCard:search")}
             </Button>
+            <Button
+              variant={mode === "featured" ? "" : "outline"}
+              size="sm"
+              onClick={() => setMode("featured")}
+            >
+              {t("AssetDropDownCard:featured")}
+            </Button>
             <Button
               variant={mode === "favourites" ? "" : "outline"}
               size="sm"
@@ -228,7 +280,7 @@ export default function AssetDropDown(properties) {
                 />
                 {thisResult && thisResult.length ? (
                   <>
-                    <List height={200} itemCount={thisResult.length} itemSize={70} className="w-full">
+                    <List height={350} itemCount={thisResult.length} itemSize={70} className="w-full">
                       {Row}
                     </List>
                   </>
@@ -237,6 +289,27 @@ export default function AssetDropDown(properties) {
             : null
           }
 
+          {
+            mode === "featured"
+            ? <>
+                <h4 className="text-md font-bold tracking-tight">
+                  {!type ? t("AssetDropDownCard:noType") : null}
+                  {type && type === "base" ? t("AssetDropDownCard:baseType") : null}
+                  {type && type === "quote" ? t("AssetDropDownCard:quoteType") : null}
+                  {type && type === "backing" ? t("AssetDropDownCard:backingType") : null}
+                </h4>
+                {featuredAssets && featuredAssets.length ? (
+                  <>
+                    <List height={350} itemCount={featuredAssets.length} itemSize={70} className="w-full">
+                      {Row}
+                    </List>
+                  </>
+                ) : "No featured assets..."}
+
+            </>
+            : null
+          }
+
           {
             mode === "favourites"
             ? <>
@@ -248,7 +321,7 @@ export default function AssetDropDown(properties) {
                 </h4>
                 {relevantAssets && relevantAssets.length ? (
                   <>
-                    <List height={200} itemCount={relevantAssets.length} itemSize={70} className="w-full">
+                    <List height={350} itemCount={relevantAssets.length} itemSize={70} className="w-full">
                       {Row}
                     </List>
                   </>

src/data/locales/da/AssetDropDownCard.json

@@ -16,5 +16,6 @@
   "missingLendingAsset": "⛔ Intet udlånsaktiv",
   "whichCollateral": "Hvilket sikkerhedsaktivt?",
   "collateralSearch": "Søg efter et nyt sikkerhedsaktiv",
-  "addAsset": "Tilføj aktiv"
+  "addAsset": "Tilføj aktiv",
+  "featured": "Udvalgte aktiver"
 }

src/data/locales/de/AssetDropDownCard.json

@@ -16,5 +16,6 @@
   "missingLendingAsset": "⛔ Kein Kreditvermögen",
   "whichCollateral": "Welches Kollateral -Asset?",
   "collateralSearch": "Bitte suchen Sie unten nach einem neuen Kollateral -Asset",
-  "addAsset": "Asset hinzufügen"
+  "addAsset": "Asset hinzufügen",
+  "featured": "Ausgewählte Assets"
 }

src/data/locales/en/AssetDropDownCard.json

@@ -16,5 +16,6 @@
   "missingLendingAsset": "⛔ No lending asset",
   "whichCollateral": "Which collateral asset?",
   "collateralSearch": "Please search for a new collateral asset below",
-  "addAsset": "Add asset"
+  "addAsset": "Add asset",
+  "featured": "Featured assets"
 }

src/data/locales/es/AssetDropDownCard.json

@@ -16,5 +16,6 @@
   "missingLendingAsset": "⛔ Sin activo de préstamo",
   "whichCollateral": "¿Qué activo colateral?",
   "collateralSearch": "Busque un nuevo activo de garantía a continuación",
-  "addAsset": "Agregar activo"
+  "addAsset": "Agregar activo",
+  "featured": "Activos destacados"
 }

src/data/locales/et/AssetDropDownCard.json

@@ -16,5 +16,6 @@
   "missingLendingAsset": "⛔ Laenuvara pole",
   "whichCollateral": "Milline tagatisvara?",
   "collateralSearch": "Palun otsige allpool uut tagatise vara",
-  "addAsset": "Lisage vara"
+  "addAsset": "Lisage vara",
+  "featured": "Esiletõstetud varad"
 }

src/data/locales/fr/AssetDropDownCard.json

@@ -16,5 +16,6 @@
   "missingLendingAsset": "⛔ Pas d'actif de prêt",
   "whichCollateral": "Quel actif collatéral?",
   "collateralSearch": "Veuillez rechercher un nouvel actif collatéral ci-dessous",
-  "addAsset": "Ajouter un actif"
+  "addAsset": "Ajouter un actif",
+  "featured": "Actifs en vedette"
 }

src/data/locales/it/AssetDropDownCard.json

@@ -16,5 +16,6 @@
   "missingLendingAsset": "⛔ Nessuna risorsa di prestito",
   "whichCollateral": "Quale attività collaterale?",
   "collateralSearch": "Si prega di cercare una nuova risorsa collaterale di seguito",
-  "addAsset": "Aggiungi risorsa"
+  "addAsset": "Aggiungi risorsa",
+  "featured": "Risorse in evidenza"
 }

src/data/locales/ja/AssetDropDownCard.json

@@ -16,5 +16,6 @@
   "missingLendingAsset": "貸し出し資産なし",
   "whichCollateral": "どの担保資産？",
   "collateralSearch": "以下の新しい担保資産を検索してください",
-  "addAsset": "資産を追加します"
+  "addAsset": "資産を追加します",
+  "featured": "注目の資産"
 }

src/data/locales/ko/AssetDropDownCard.json

@@ -16,5 +16,6 @@
   "missingLendingAsset": "⛔ 대출 자산이 없습니다",
   "whichCollateral": "어떤 담보 자산?",
   "collateralSearch": "아래의 새로운 담보 자산을 검색하십시오",
-  "addAsset": "자산 추가"
+  "addAsset": "자산 추가",
+  "featured": "추천 자산"
 }

src/data/locales/pt/AssetDropDownCard.json

@@ -16,5 +16,6 @@
   "missingLendingAsset": "⛔ Sem ativo de empréstimo",
   "whichCollateral": "Qual ativo colateral?",
   "collateralSearch": "Por favor, procure um novo ativo colateral abaixo",
-  "addAsset": "Adicione ativo"
+  "addAsset": "Adicione ativo",
+  "featured": "Ativos em destaque"
 }

src/data/locales/th/AssetDropDownCard.json

@@ -16,5 +16,6 @@
   "missingLendingAsset": "⛔ไม่มีสินทรัพย์สินเชื่อ",
   "whichCollateral": "สินทรัพย์หลักประกันใด",
   "collateralSearch": "กรุณาค้นหาสินทรัพย์หลักประกันใหม่ด้านล่าง",
-  "addAsset": "เพิ่มสินทรัพย์"
+  "addAsset": "เพิ่มสินทรัพย์",
+  "featured": "สินทรัพย์เด่น"
 }