From 09af7abff718ffe80fcc5544c8bdde3309cb3a17 Mon Sep 17 00:00:00 2001
From: Matt Upham <30577966+mattupham@users.noreply.github.com>
Date: Wed, 11 Sep 2024 18:32:44 -0700
Subject: [PATCH] Update icons

---
 .../web/components/table/asset-balances.tsx   | 72 ++++++++++++++-----
 packages/web/localizations/en.json            |  3 +-
 packages/web/public/icons/sprite.svg          |  3 +
 3 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/packages/web/components/table/asset-balances.tsx b/packages/web/components/table/asset-balances.tsx
index 41fc0934cd..1a49fba8db 100644
--- a/packages/web/components/table/asset-balances.tsx
+++ b/packages/web/components/table/asset-balances.tsx
@@ -24,6 +24,7 @@ import {
 import { useLocalStorage } from "react-use";
 
 import { AssetCell } from "~/components/table/cells/asset";
+import { SpriteIconId } from "~/config";
 import {
   Breakpoint,
   useFeatureFlags,
@@ -520,23 +521,29 @@ export const AssetActionsCell: AssetCellComponent<{
   const needsConversion = coinMinimalDenom !== variantGroupKey;
   const showConvertButton = featureFlags.alloyedAssets && needsConversion;
 
-  const getActionOptions = (t: (key: string) => string) => {
-    const options = [
+  const getActionOptions = (
+    t: (key: string) => string,
+    showConvertButton: boolean
+  ) => {
+    return [
+      ...(showConvertButton
+        ? [
+            { key: "deposit", label: t("portfolio.deposit") },
+            { key: "withdraw", label: t("portfolio.withdraw") },
+          ]
+        : []),
       { key: "trade", label: t("portfolio.trade") },
       { key: "earn", label: t("portfolio.earn") },
     ];
-
-    if (showConvertButton) {
-      options.push(
-        { key: "deposit", label: t("portfolio.deposit") },
-        { key: "withdraw", label: t("portfolio.withdraw") }
-      );
-    }
-
-    return options;
   };
 
-  const handleSelectAction = (action: string) => {
+  const actionOptions = getActionOptions(t, showConvertButton);
+
+  const handleSelectAction = (
+    action: string,
+    coinDenom: string,
+    router: any
+  ) => {
     if (action === "trade") {
       router.push(`/assets/${coinDenom}`);
     } else if (action === "earn") {
@@ -574,7 +581,7 @@ export const AssetActionsCell: AssetCellComponent<{
           {showConvertButton ? (
             <Button
               variant="secondary"
-              className="max-h-[48px] rounded-[48px] bg-osmoverse-alpha-850 hover:bg-osmoverse-alpha-800"
+              className="max-h-12 w-[108px] rounded-[48px] bg-osmoverse-alpha-850 hover:bg-osmoverse-alpha-800"
               onClick={(e) => {
                 e.stopPropagation();
                 e.preventDefault();
@@ -582,7 +589,7 @@ export const AssetActionsCell: AssetCellComponent<{
                 alert("Convert clicked");
               }}
             >
-              Convert
+              {t("portfolio.convert")}
             </Button>
           ) : (
             <>
@@ -619,8 +626,10 @@ export const AssetActionsCell: AssetCellComponent<{
             </>
           )}
           <AssetActionsDropdown
-            actionOptions={getActionOptions(t)}
-            onSelectAction={handleSelectAction}
+            actionOptions={actionOptions}
+            onSelectAction={(action) =>
+              handleSelectAction(action, coinDenom, router)
+            }
           />
         </div>
       )}
@@ -640,9 +649,9 @@ const AssetActionsDropdown: FunctionComponent<{
             <Icon id="dots-three-vertical" width={24} height={24} />
           </PopoverButton>
 
-          <PopoverPanel className="absolute right-0 z-50 mt-1">
+          <PopoverPanel className="absolute right-0 z-50 mt-3 w-[320px]">
             {({ close }) => (
-              <div className="flex flex-col gap-2 rounded-2xl bg-osmoverse-825 p-2">
+              <div className="flex flex-col gap-3 rounded-2xl border border-osmoverse-700 bg-osmoverse-825 p-3">
                 {actionOptions.map(({ key, label }) => (
                   <button
                     key={key}
@@ -654,7 +663,17 @@ const AssetActionsDropdown: FunctionComponent<{
                       close();
                     }}
                   >
-                    <span className="whitespace-nowrap">{label}</span>
+                    <span className="subtitle1 flex items-center gap-2 whitespace-nowrap text-white-full">
+                      <span className="flex h-10 w-10 items-center justify-center">
+                        <Icon
+                          id={getIconId(key)}
+                          width={24}
+                          height={24}
+                          className="text-wosmongton-300"
+                        />
+                      </span>
+                      {label}
+                    </span>
                   </button>
                 ))}
               </div>
@@ -665,3 +684,18 @@ const AssetActionsDropdown: FunctionComponent<{
     </Popover>
   );
 };
+
+const getIconId = (key: string): SpriteIconId => {
+  switch (key) {
+    case "deposit":
+      return "deposit";
+    case "withdraw":
+      return "withdraw";
+    case "trade":
+      return "arrows-swap";
+    case "earn":
+      return "chart-up";
+    default:
+      return "dots-three-vertical"; // fallback icon
+  }
+};
diff --git a/packages/web/localizations/en.json b/packages/web/localizations/en.json
index efe4865831..bf4db2fb37 100644
--- a/packages/web/localizations/en.json
+++ b/packages/web/localizations/en.json
@@ -290,7 +290,8 @@
     "trade": "Trade",
     "earn": "Earn",
     "deposit": "Deposit",
-    "withdraw": "Withdraw"
+    "withdraw": "Withdraw",
+    "convert": "Convert"
   },
   "buyTokens": "Buy tokens",
   "components": {
diff --git a/packages/web/public/icons/sprite.svg b/packages/web/public/icons/sprite.svg
index 23ae925294..4e1a52476a 100644
--- a/packages/web/public/icons/sprite.svg
+++ b/packages/web/public/icons/sprite.svg
@@ -1598,5 +1598,8 @@
         </linearGradient>
       </defs>
     </symbol>
+    <symbol id="chart-up" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M18.6595 2.03942C18.3474 1.6422 17.788 1.54017 17.3557 1.80162L13.4826 4.14415C13.01 4.42997 12.8586 5.04477 13.1445 5.51734C13.4303 5.98992 14.0451 6.14131 14.5177 5.85549L16.6782 4.54875C15.7211 7.77587 14.3797 10.1723 12.4477 11.9518C10.2648 13.9623 7.22261 15.2823 2.83576 16.0134C2.29099 16.1042 1.92297 16.6195 2.01376 17.1642C2.10456 17.709 2.61978 18.077 3.16456 17.9862C7.7777 17.2174 11.2355 15.7873 13.8026 13.4229C16.0651 11.339 17.5539 8.60463 18.5789 5.17369L19.7136 6.61769C20.0549 7.05194 20.6835 7.12734 21.1178 6.7861C21.552 6.44485 21.6274 5.81619 21.2862 5.38195L18.6595 2.03942ZM20 21.9998C19.4477 21.9998 19 21.5521 19 20.9998V10.9998C19 10.4475 19.4477 9.99981 20 9.99981C20.5523 9.99981 21 10.4475 21 10.9998V20.9998C21 21.5521 20.5523 21.9998 20 21.9998ZM16.0002 21.9998C15.4479 21.9998 15.0002 21.5521 15.0002 20.9998V15.9998C15.0002 15.4475 15.4479 14.9998 16.0002 14.9998C16.5524 14.9998 17.0002 15.4475 17.0002 15.9998V20.9998C17.0002 21.5521 16.5524 21.9998 16.0002 21.9998ZM11.0002 20.9998C11.0002 21.5521 11.4479 21.9998 12.0002 21.9998C12.5524 21.9998 13.0002 21.5521 13.0002 20.9998V18.9998C13.0002 18.4475 12.5524 17.9998 12.0002 17.9998C11.4479 17.9998 11.0002 18.4475 11.0002 18.9998V20.9998ZM8.00016 21.9998C7.44787 21.9998 7.00016 21.5521 7.00016 20.9998V19.9998C7.00016 19.4475 7.44787 18.9998 8.00016 18.9998C8.55244 18.9998 9.00016 19.4475 9.00016 19.9998V20.9998C9.00016 21.5521 8.55244 21.9998 8.00016 21.9998ZM3.00016 20.9998C3.00016 21.5521 3.44787 21.9998 4.00016 21.9998C4.55244 21.9998 5.00016 21.5521 5.00016 20.9998V20.8998C5.00016 20.3475 4.55244 19.8998 4.00016 19.8998C3.44787 19.8998 3.00016 20.3475 3.00016 20.8998V20.9998Z" fill="#8C8AF9"/>
+    </symbol>
   </defs>
 </svg>