feat/update elements to v1.3.3 (#257)

Co-authored-by: Maxime Beauchamp <[email protected]>
akash-network · Jul 17, 2024 · fc0816c · fc0816c
1 parent 6e59b6b
commit fc0816c
Show file tree

Hide file tree

Showing 7 changed files with 13,440 additions and 6,485 deletions.
diff --git a/apps/deploy-web/package.json b/apps/deploy-web/package.json
@@ -32,7 +32,7 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.8.1",
     "@hookform/resolvers": "^3.3.4",
-    "@leapwallet/elements": "0.12.1",
+    "@leapwallet/elements": "1.3.3",
     "@leapwallet/name-matcha": "^1.7.1",
     "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^5.11.11",

diff --git a/apps/deploy-web/src/components/get-started/GetStartedStepper.tsx b/apps/deploy-web/src/components/get-started/GetStartedStepper.tsx
@@ -1,12 +1,13 @@
 "use client";
 import { useEffect, useState } from "react";
 import { MdRestartAlt } from "react-icons/md";
-import { Button, buttonVariants, CustomTooltip } from "@akashnetwork/ui/components";
+import { Button, buttonVariants, CustomTooltip, Spinner } 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, Rocket, WarningCircle, XmarkCircleSolid } from "iconoir-react";
+import dynamic from "next/dynamic";
 import Link from "next/link";
 
 import { useChainParam } from "@src/context/ChainParamProvider";
@@ -20,23 +21,31 @@ import { ExternalLink } from "../shared/ExternalLink";
 import { ConnectWalletButton } from "../wallet/ConnectWalletButton";
 import { QontoConnector, QontoStepIcon } from "./Stepper";
 
-// const LiquidityModal = dynamic(() => import("../liquidity-modal"), {
-//   ssr: false,
-//   loading: props => {
-//     if (props.isLoading) {
-//       return (
-//         <Button variant="default" disabled size="sm">
-//           <span>Get More</span>
-//           <Spinner size="small" className="ml-2" />
-//         </Button>
-//       );
-//     } else return null;
-//   }
-// });
+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, walletBalances } = useWallet();
+  const { isWalletConnected, walletBalances, address, refreshBalances } = useWallet();
   const { minDeposit } = useChainParam();
   const aktBalance = walletBalances ? uaktToAKT(walletBalances.uakt) : 0;
   const usdcBalance = walletBalances ? udenomToDenom(walletBalances.usdc) : 0;
@@ -137,7 +146,7 @@ export const GetStartedStepper: React.FunctionComponent = () => {
               <span>
                 You have <strong>{aktBalance}</strong> AKT and <strong>{usdcBalance}</strong> USDC
               </span>
-              {/* <LiquidityModal address={address} aktBalance={aktBalance} refreshBalances={refreshBalances} /> */}
+              <LiquidityModal address={address} aktBalance={aktBalance} refreshBalances={refreshBalances} />
             </div>
           )}
         </StepContent>