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 ? ( ) : ( <> @@ -619,8 +626,10 @@ export const AssetActionsCell: AssetCellComponent<{ )} + handleSelectAction(action, coinDenom, router) + } /> )} @@ -640,9 +649,9 @@ const AssetActionsDropdown: FunctionComponent<{ - + {({ close }) => ( -
+
{actionOptions.map(({ key, label }) => ( ))}
@@ -665,3 +684,18 @@ const AssetActionsDropdown: FunctionComponent<{ ); }; + +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 @@ + + +