Migrate elements to usage via CDN

apps/deploy-web/package.json

@@ -35,8 +35,6 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.8.1",
     "@hookform/resolvers": "^3.9.0",
-    "@leapwallet/elements": "^1.3.4",
-    "@leapwallet/name-matcha": "^1.7.1",
     "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.4.4",

apps/deploy-web/src/components/get-started/GetStartedStepper.tsx

@@ -1,13 +1,12 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import { MdRestartAlt } from "react-icons/md";
-import { Button, buttonVariants, CustomTooltip, Spinner } from "@akashnetwork/ui/components";
+import { Button, buttonVariants, CustomTooltip } from "@akashnetwork/ui/components";
 import Step from "@mui/material/Step";
 import StepContent from "@mui/material/StepContent";
 import StepLabel from "@mui/material/StepLabel";
 import Stepper from "@mui/material/Stepper";
 import { Check, HandCard, Rocket, WarningCircle, XmarkCircleSolid } from "iconoir-react";
-import dynamic from "next/dynamic";
 import Link from "next/link";
 
 import { LoginRequiredLink } from "@src/components/user/LoginRequiredLink";
@@ -21,32 +20,11 @@ import { udenomToDenom } from "@src/utils/mathHelpers";
 import { uaktToAKT } from "@src/utils/priceUtils";
 import { cn } from "@src/utils/styleUtils";
 import { UrlService } from "@src/utils/urlUtils";
+import LiquidityModal from "../liquidity-modal";
 import { ExternalLink } from "../shared/ExternalLink";
 import { ConnectWalletButton } from "../wallet/ConnectWalletButton";
 import { QontoConnector, QontoStepIcon } from "./Stepper";
 
-const LiquidityModal = dynamic(
-  () =>
-    import("../liquidity-modal")
-      .then(m => {
-        console.log("done");
-        return m;
-      })
-      .catch(e => {
-        console.log("error loading liquidity modal", e);
-        throw e;
-      }),
-  {
-    ssr: false,
-    loading: () => (
-      <Button variant="default" disabled size="sm">
-        <Spinner size="small" className="mr-2" />
-        <span>Get More</span>
-      </Button>
-    )
-  }
-);
-
 export const GetStartedStepper: React.FunctionComponent = () => {
   const [activeStep, setActiveStep] = useState(0);
   const { isWalletConnected, address, isManaged: isManagedWallet, isTrialing } = useWallet();
@@ -173,7 +151,7 @@ export const GetStartedStepper: React.FunctionComponent = () => {
                 <CustomTooltip
                   title={
                     <>
-                      If you don't have {minDeposit.akt} AKT or {minDeposit.usdc} USDC, you can request authorization for some tokens to get started on our{" "}
+                      If you don&apos;t have {minDeposit.akt} AKT or {minDeposit.usdc} USDC, you can request authorization for some tokens to get started on our{" "}
                       <ExternalLink href="https://discord.gg/akash" text="Discord" />.
                     </>
                   }
@@ -190,7 +168,7 @@ export const GetStartedStepper: React.FunctionComponent = () => {
                   You have <strong>{aktBalance}</strong> AKT and <strong>{usdcBalance}</strong> USDC
                 </span>
               )}
-              {!isManagedWallet && <LiquidityModal address={address} aktBalance={aktBalance} refreshBalances={refetchBalances} />}
+              {!isManagedWallet && isWalletConnected && <LiquidityModal address={address} aktBalance={aktBalance} refreshBalances={refetchBalances} />}
             </div>
           )}
         </StepContent>

apps/deploy-web/src/components/home/YourAccount.tsx

@@ -15,7 +15,7 @@ import { usePricing } from "@src/context/PricingProvider";
 import { useWallet } from "@src/context/WalletProvider";
 import { useUsdcDenom } from "@src/hooks/useDenom";
 import useTailwind from "@src/hooks/useTailwind";
-import { WalletBalance, useWalletBalance } from "@src/hooks/useWalletBalance";
+import { useWalletBalance,WalletBalance } from "@src/hooks/useWalletBalance";
 import sdlStore from "@src/store/sdlStore";
 import { DeploymentDto, LeaseDto } from "@src/types/deployment";
 import { ApiProviderList } from "@src/types/provider";

apps/deploy-web/src/components/layout/WalletStatus.tsx

@@ -22,14 +22,14 @@ import { ConnectManagedWalletButton } from "@src/components/wallet/ConnectManage
 import { browserEnvConfig } from "@src/config/browser-env.config";
 import { useWallet } from "@src/context/WalletProvider";
 import { useLoginRequiredEventHandler } from "@src/hooks/useLoginRequiredEventHandler";
+import { useManagedEscrowFaqModal } from "@src/hooks/useManagedEscrowFaqModal";
 import { useWalletBalance } from "@src/hooks/useWalletBalance";
 import { udenomToDenom } from "@src/utils/mathHelpers";
 import { uaktToAKT } from "@src/utils/priceUtils";
 import { UrlService } from "@src/utils/urlUtils";
 import { FormattedDecimal } from "../shared/FormattedDecimal";
 import { LinkTo } from "../shared/LinkTo";
 import { ConnectWalletButton } from "../wallet/ConnectWalletButton";
-import { useManagedEscrowFaqModal } from "@src/hooks/useManagedEscrowFaqModal";
 
 const goToCheckout = () => {
   window.location.href = "/api/proxy/v1/checkout";

apps/deploy-web/src/components/liquidity-modal/index.tsx

@@ -1,20 +1,10 @@
 "use client";
 
-import "@leapwallet/elements/styles.css";
-
-import React, { useCallback, useMemo, useState } from "react";
-import { createPortal } from "react-dom";
-import { Button } from "@akashnetwork/ui/components";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button, Spinner } from "@akashnetwork/ui/components";
 import { useWallet as useConnectedWallet, useWalletClient } from "@cosmos-kit/react";
-import {
-  AsyncIDBStorage,
-  ElementsProvider,
-  initCachingLayer,
-  LiquidityModal as LeapLiquidityModal,
-  type LiquidityModalProps,
-  Tabs,
-  WalletType
-} from "@leapwallet/elements";
+// import * as Elements from "@leapwallet/elements-umd-types";
+import { Modal } from "@mui/material";
 import { event } from "nextjs-google-analytics";
 
 import { useWallet } from "@src/context/WalletProvider";
@@ -33,48 +23,99 @@ const ToggleLiquidityModalButton: React.FC<{ onClick: () => void }> = ({ onClick
   };
 
   return (
-    <Button variant="default" size="sm" onClick={_onClick}>
+    <Button variant="default" size="xs" onClick={_onClick}>
       Get More
     </Button>
   );
 };
 
-initCachingLayer(AsyncIDBStorage);
-
-const useConnectedWalletType = (): WalletType | undefined => {
-  const { isWalletConnected } = useWallet();
-  const { mainWallet } = useConnectedWallet();
-
-  const walletName = isWalletConnected ? mainWallet?.walletName : undefined;
+// TODO: Fix the elements types
+// const convertWalletType = (walletName: string | undefined): Elements.WalletType | undefined => {
+const convertWalletType = (walletName: string | undefined): any => {
+  if (!window.LeapElements) {
+    return undefined;
+  }
+  const walletType = window.LeapElements.WalletType;
+  switch (walletName) {
+    case "leap-extension":
+      return walletType.LEAP;
+    case "keplr-extension":
+      return walletType.KEPLR;
+    case "cosmostation-extension":
+      return walletType.COSMOSTATION;
+    case "keplr-mobile":
+      return walletType.WC_KEPLR_MOBILE;
+    default:
+      return undefined;
+  }
+};
 
-  const walletType = useMemo(() => {
-    switch (walletName) {
-      case "leap-extension":
-        return WalletType.LEAP;
-      case "keplr-extension":
-        return WalletType.KEPLR;
-      case "cosmostation-extension":
-        return WalletType.COSMOSTATION;
-      case "keplr-mobile":
-        return WalletType.WC_KEPLR_MOBILE;
-      default:
-        return undefined;
+// const getTabsConfig = (txnLifecycleHooks: Partial<Elements.TxnLifecycleHooks<unknown>>) => {
+const getTabsConfig = (txnLifecycleHooks: any) => {
+  return {
+    aggregated: {
+      enabled: true,
+      orderIndex: 0,
+      title: "Swap or Bridge",
+      allowedDestinationChains: [
+        {
+          chainId: "akashnet-2"
+        }
+      ],
+      defaultValues: {
+        sourceChainId: "osmosis-1",
+        sourceAsset: "uosmo",
+        destinationChainId: "akashnet-2",
+        destinationAsset: "uakt"
+      },
+      txnLifecycleHooks
+    },
+    swap: {
+      enabled: false
+    },
+    "fiat-on-ramp": {
+      enabled: true,
+      title: "Buy AKT",
+      orderIndex: 1,
+      allowedDestinationChains: [
+        {
+          chainId: "akashnet-2"
+        }
+      ],
+      defaultValues: {
+        currency: "USD",
+        sourceAmount: "10",
+        destinationChainId: "akashnet-2",
+        destinationAsset: "uakt"
+      },
+      onTxnComplete: txnLifecycleHooks.onTxnComplete
+    },
+    transfer: {
+      enabled: true,
+      orderIndex: 2,
+      title: "IBC Transfer",
+      defaultValues: {
+        sourceChainId: "osmosis-1",
+        sourceAsset: { originChainId: "akashnet-2", originDenom: "uakt" }
+      },
+      txnLifecycleHooks
     }
-  }, [walletName]);
-
-  return walletType;
+  };
+  // } satisfies Elements.TabsConfig;
 };
 
-type TabsConfig = NonUndefined<LiquidityModalProps["tabsConfig"]>;
-
 type Props = { address: string; aktBalance: number; refreshBalances: () => void };
 
 const LiquidityModal: React.FC<Props> = ({ refreshBalances }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [isElementsReady, setIsElementsReady] = useState(false);
+  const isElementsMounted = useRef(false);
+
   const { isWalletConnected } = useWallet();
   const { client: walletClient } = useWalletClient();
+  const { mainWallet } = useConnectedWallet();
 
-  const connectedWalletType = useConnectedWalletType();
+  const walletName = isWalletConnected ? mainWallet?.walletName : undefined;
 
   const handleConnectWallet = useCallback(() => {
     if (!isWalletConnected && walletClient) {
@@ -88,8 +129,9 @@ const LiquidityModal: React.FC<Props> = ({ refreshBalances }) => {
     }
   }, [isWalletConnected, walletClient]);
 
-  const tabsConfig: TabsConfig = useMemo(() => {
-    const txnLifecycleHooks = {
+  const tabsConfig = useMemo(() => {
+    // const txnLifecycleHooks: Partial<Elements.TxnLifecycleHooks<never>> = {
+    const txnLifecycleHooks: any = {
       onTxnComplete: () => {
         refreshBalances();
         event(AnalyticsEvents.LEAP_TRANSACTION_COMPLETE, {
@@ -99,70 +141,75 @@ const LiquidityModal: React.FC<Props> = ({ refreshBalances }) => {
       }
     };
 
-    return {
-      [Tabs.SWAPS]: {
-        enabled: true,
-        orderIndex: 0,
-        title: "Swap or Bridge",
-        allowedDestinationChains: [
-          {
-            chainId: "akashnet-2"
-          }
-        ],
-        defaultValues: {
-          sourceChainId: "osmosis-1",
-          sourceAsset: "uosmo",
-          destinationChainId: "akashnet-2",
-          destinationAsset: "uakt"
-        },
-        txnLifecycleHooks
-      },
-      [Tabs.IBC_SWAPS]: {
-        enabled: false
-      },
-      [Tabs.FIAT_ON_RAMP]: {
-        enabled: true,
-        title: "Buy AKT",
-        orderIndex: 1,
-        allowedDestinationChains: [
-          {
-            chainId: "akashnet-2"
+    return getTabsConfig(txnLifecycleHooks);
+  }, [refreshBalances]);
+
+  const connectedWalletType = useMemo(() => (isElementsReady ? convertWalletType(walletName) : undefined), [isElementsReady, walletName]);
+
+  useEffect(() => {
+    if (isElementsReady && isOpen && !isElementsMounted.current) {
+      isElementsMounted.current = true;
+      window.LeapElements?.mountElements?.({
+        connectWallet: handleConnectWallet,
+        connectedWalletType,
+        element: {
+          name: "multi-view",
+          props: {
+            tabsConfig
           }
-        ],
-        defaultValues: {
-          currency: "USD",
-          sourceAmount: "10",
-          destinationChainId: "akashnet-2",
-          destinationAsset: "uakt"
         },
-        onTxnComplete: txnLifecycleHooks.onTxnComplete
-      },
-      [Tabs.TRANSFER]: {
-        enabled: true,
-        orderIndex: 2,
-        title: "IBC Transfer",
-        defaultValues: {
-          sourceChainId: "osmosis-1",
-          sourceAsset: { originChainId: "akashnet-2", originDenom: "uakt" }
-        },
-        txnLifecycleHooks
-      }
-    } satisfies TabsConfig;
-  }, [refreshBalances]);
+        enableSmartSwap: true,
+        skipClientId: `akashnet-console-${process.env.NODE_ENV}`,
+        enableCaching: true,
+        elementsRoot: "#leap-elements-portal"
+      });
+    }
+  }, [isOpen, handleConnectWallet, connectedWalletType, tabsConfig, isElementsReady]);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    isElementsMounted.current = false;
+  }, [connectedWalletType]);
+
+  useEffect(() => {
+    if (!window) {
+      return;
+    }
+
+    if (window.LeapElements) {
+      setIsElementsReady(true);
+      return;
+    }
+
+    const cb = () => {
+      setIsElementsReady(true);
+    };
+
+    window.addEventListener("@leapwallet/elements:load", cb);
+
+    return () => {
+      window.removeEventListener("@leapwallet/elements:load", cb);
+    };
+  }, []);
 
   return (
     <>
       <ToggleLiquidityModalButton onClick={() => setIsOpen(o => !o)} />
-      {walletClient
-        ? createPortal(
-            <div className="leap-ui dark">
-              <ElementsProvider primaryChainId="akashnet-2" connectWallet={handleConnectWallet} connectedWalletType={connectedWalletType}>
-                <LeapLiquidityModal className="border-none" isOpen={isOpen} setIsOpen={setIsOpen} tabsConfig={tabsConfig} defaultActiveTab={Tabs.SWAPS} />
-              </ElementsProvider>
-            </div>,
-            document.body
-          )
-        : null}
+      {walletClient ? (
+        <Modal keepMounted open={isOpen} onClose={() => setIsOpen(false)} className="flex items-center justify-center">
+          <div className="relative h-full max-h-[34rem] w-full max-w-[26rem]">
+            {!isElementsReady ? <Spinner className="absolute left-1/2 top-1/2 z-0 -translate-x-1/2 -translate-y-1/2" /> : null}
+            <div id="leap-elements-portal" className="leap-ui dark h-full w-full rounded-xl" />
+          </div>
+        </Modal>
+      ) : null}
     </>
   );
 };