make it possible to specify variant in modal

osmosis-labs · Nov 4, 2024 · 22078b5 · 22078b5
1 parent a4c2d09
commit 22078b5
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git a/packages/web/components/table/portfolio-asset-balances.tsx b/packages/web/components/table/portfolio-asset-balances.tsx
@@ -28,23 +28,18 @@ import {
   MultiLanguageT,
   useFeatureFlags,
   useHideDustUserSetting,
-  useLocalStorageState,
   useTranslation,
   useUserWatchlist,
   useWalletSelect,
   useWindowSize,
 } from "~/hooks";
 import { useBridgeStore } from "~/hooks/bridge";
-import { useConvertVariant } from "~/hooks/use-convert-variant";
 import { useShowPreviewAssets } from "~/hooks/use-show-preview-assets";
 import {
   ActivateUnverifiedTokenConfirmation,
   ExternalLinkModal,
 } from "~/modals";
-import {
-  CONVERT_VARIANT_MODAL_SEEN,
-  useAssetVariantsModalStore,
-} from "~/modals/variants-conversion";
+import { useAssetVariantsModalStore } from "~/modals/variants-conversion";
 import { useStore } from "~/stores";
 import { UnverifiedAssetsState } from "~/stores/user-settings";
 import { theme } from "~/tailwind.config";
@@ -551,11 +546,7 @@ const AssetActionsCell: AssetCellComponent<{
   const showConvertButton = featureFlags.alloyedAssets && needsConversion;
 
   const actionOptions = getActionOptions(t, showConvertButton);
-
-  const { onConvert, isConvertingVariant, isConvertingThisVariant } =
-    useConvertVariant(coinMinimalDenom, showConvertButton);
-  const [wasShown] = useLocalStorageState(CONVERT_VARIANT_MODAL_SEEN, false);
-  const { setIsOpen } = useAssetVariantsModalStore();
+  const { setIsOpenForVariant } = useAssetVariantsModalStore();
 
   const onSelectAction = (action: Action) => {
     if (action === "trade") {
@@ -597,16 +588,10 @@ const AssetActionsCell: AssetCellComponent<{
             <Button
               variant="secondary"
               className="max-h-12 w-[108px] rounded-[48px] bg-osmoverse-alpha-850 hover:bg-osmoverse-alpha-800"
-              disabled={isConvertingVariant}
-              isLoading={isConvertingThisVariant}
               onClick={(e) => {
                 e.stopPropagation();
                 e.preventDefault();
-                if (!wasShown) {
-                  setIsOpen(true);
-                } else {
-                  onConvert();
-                }
+                setIsOpenForVariant(coinMinimalDenom);
               }}
             >
               {t("portfolio.convert")}
@@ -648,7 +633,7 @@ const AssetActionsCell: AssetCellComponent<{
         </>
       )}
       <AssetActionsDropdown
-        disabled={needsActivation || isConvertingVariant}
+        disabled={needsActivation}
         actionOptions={actionOptions}
         onSelectAction={onSelectAction}
       />

diff --git a/packages/web/modals/variants-conversion.tsx b/packages/web/modals/variants-conversion.tsx
@@ -29,15 +29,23 @@ export const CONVERT_VARIANT_MODAL_SEEN = "convert-variant-modal-seen";
 
 export const useAssetVariantsModalStore = create<{
   isOpen: boolean;
+  variantCoinMinimalDenom?: string;
   setIsOpen: (value: boolean) => void;
+  setIsOpenForVariant: (variantCoinMinimalDenom: string | undefined) => void;
 }>((set) => ({
   isOpen: false,
-  setIsOpen: (value: boolean) => set({ isOpen: value }),
+  variantCoinMinimalDenom: undefined,
+  setIsOpen: (value: boolean) =>
+    // Reset variantCoinMinimalDenom when modal is closed or opened
+    set({ isOpen: value, variantCoinMinimalDenom: undefined }),
+  setIsOpenForVariant: (variantCoinMinimalDenom: string | undefined) =>
+    set({ isOpen: true, variantCoinMinimalDenom }),
 }));
 
 export const AssetVariantsConversionModal = observer(() => {
   const { logEvent } = useAmplitudeAnalytics();
-  const { isOpen, setIsOpen } = useAssetVariantsModalStore();
+  const { isOpen, variantCoinMinimalDenom, setIsOpen } =
+    useAssetVariantsModalStore();
   useAssetVariantsToast();
 
   const [, setIsShown] = useLocalStorageState(
@@ -60,6 +68,21 @@ export const AssetVariantsConversionModal = observer(() => {
     },
     {
       enabled: !!account?.address,
+      select: (data) => {
+        // If the modal is open for a specific variant, filter the assets to only include that variant
+        if (variantCoinMinimalDenom) {
+          return {
+            ...data,
+            assetVariants: data.assetVariants.filter(
+              (variant) =>
+                variant.amount.currency.coinMinimalDenom ===
+                variantCoinMinimalDenom
+            ),
+          };
+        }
+
+        return data;
+      },
     }
   );