fix(deployment): managed walllet fixes (#382)

apps/deploy-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akash-console",
-  "version": "2.16.0",
+  "version": "2.16.1",
   "private": true,
   "description": "Web UI to deploy on the Akash Network and view statistic about network usage.",
   "license": "Apache-2.0",

apps/deploy-web/src/components/deployments/LeaseChip.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useEffect, useState } from "react";
-import { Badge, CustomTooltip } from "@akashnetwork/ui/components";
+import { Badge, CustomTooltip, Spinner } from "@akashnetwork/ui/components";
 import Link from "next/link";
 
 import { getSplitText } from "@src/hooks/useShortText";
@@ -34,6 +34,7 @@ export const LeaseChip: React.FunctionComponent<Props> = ({ lease, providers })
       }}
     >
       <Badge variant="outline" className="whitespace-nowrap text-xs hover:bg-primary/20">
+        {!providerName && <Spinner size="xSmall" />}
         <span>
           {providerName?.length > 20 ? (
             <CustomTooltip title={providerName}>

apps/deploy-web/src/components/deployments/LeaseRow.tsx

@@ -213,7 +213,7 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(({ lease, setActi
             label="Provider:"
             value={
               <>
-                {isLeaseActive && isLoadingProviderStatus && <Spinner size="small" />}
+                {isLeaseActive && isLoadingProviderStatus && <Spinner size="small" className="mr-2" />}
                 {provider && (
                   <div className="flex items-center space-x-2">
                     <Link href={UrlService.providerDetail(lease.provider)}>

apps/deploy-web/src/components/deployments/ManifestUpdate.tsx

@@ -47,13 +47,17 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
     const init = async () => {
       const localDeploymentData = getDeploymentLocalData(deployment.dseq);
 
-      if (localDeploymentData && localDeploymentData.manifest) {
-        setEditedManifest(localDeploymentData?.manifest);
-
-        const yamlVersion = yaml.load(localDeploymentData?.manifest);
-        const version = await deploymentData.getManifestVersion(yamlVersion);
-
-        setDeploymentVersion(version);
+      if (localDeploymentData?.manifest) {
+        setEditedManifest(localDeploymentData.manifest);
+
+        try {
+          const yamlVersion = yaml.load(localDeploymentData.manifest);
+          const version = await deploymentData.getManifestVersion(yamlVersion);
+          setDeploymentVersion(version);
+        } catch (error) {
+          console.error(error);
+          setParsingError("Error getting manifest version.");
+        }
       } else {
         setShowOutsideDeploymentMessage(true);
       }

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 { useWalletBalance,WalletBalance } from "@src/hooks/useWalletBalance";
+import { 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/AccountMenu.tsx

@@ -4,7 +4,7 @@ import { Avatar, AvatarFallback, Button, DropdownMenu, DropdownMenuContent, Drop
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 import { User } from "iconoir-react";
-import { Bell, Book, LogOut, MultiplePages, Settings, Star } from "iconoir-react";
+import { Bell, LogOut, MultiplePages, Settings, Star } from "iconoir-react";
 import { useRouter } from "next/navigation";
 
 import { useCustomUser } from "@src/hooks/useCustomUser";

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

@@ -1,7 +1,7 @@
 "use client";
 import React from "react";
 import { Avatar, buttonVariants, Separator, Spinner } from "@akashnetwork/ui/components";
-import { BookStack, LogOut, MediaImageList, Settings } from "iconoir-react";
+import { LogOut, MediaImageList, Settings } from "iconoir-react";
 import Link from "next/link";
 
 import { useCustomUser } from "@src/hooks/useCustomUser";

apps/deploy-web/src/components/new-deployment/CreateLease.tsx

@@ -59,7 +59,6 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
   const [isFilteringFavorites, setIsFilteringFavorites] = useState(false);
   const [isFilteringAudited, setIsFilteringAudited] = useState(false);
   const [isCreatingLeases, setIsCreatingLeases] = useState(false);
-  const [isLeaseCreated, setIsLeaseCreated] = useState(false);
   const [selectedBids, setSelectedBids] = useState<{ [gseq: string]: BidDto }>({});
   const [filteredBids, setFilteredBids] = useState<Array<string>>([]);
   const [search, setSearch] = useState("");
@@ -203,7 +202,6 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
         category: "deployments",
         label: "Create lease"
       });
-      setIsLeaseCreated(true);
       await sendManifest();
     } finally {
       setIsCreatingLeases(false);

apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx

@@ -76,16 +76,13 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
   const managedDenom = useManagedWalletDenom();
   const { createDeploymentConfirm } = useManagedDeploymentConfirm();
 
-  useWhen(wallet.isManaged && sdlDenom === "uakt", () => {
-    setSdlDenom(managedDenom);
-  });
-
   useWhen(
-    wallet.isManaged && sdlDenom === "uakt",
+    wallet.isManaged && sdlDenom === "uakt" && editedManifest,
     () => {
       setEditedManifest(prev => (prev ? prev.replace(/uakt/g, managedDenom) : prev));
+      setSdlDenom(managedDenom);
     },
-    [editedManifest]
+    [editedManifest, wallet.isManaged, sdlDenom]
   );
 
   useWhen(hasComponent("ssh"), () => {

apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx

@@ -31,34 +31,30 @@ export const NewDeploymentContainer: FC = () => {
   const { toggleCmp, hasComponent } = useSdlBuilder();
 
   useEffect(() => {
-    if (!templates) return;
+    const queryStep = searchParams?.get("step");
+    const _activeStep = getStepIndexByParam(queryStep);
+    setActiveStep(_activeStep);
+  }, [searchParams]);
 
-    const redeployTemplate = getRedeployTemplate();
-    const galleryTemplate = getGalleryTemplate();
+  useEffect(() => {
+    if (!templates || editedManifest) return;
+
+    const template = getRedeployTemplate() || getGalleryTemplate();
 
-    if (redeployTemplate) {
-      // If it's a redeployment, set the template from local storage
-      setSelectedTemplate(redeployTemplate as TemplateCreation);
-      setEditedManifest(redeployTemplate.content as string);
-    } else if (galleryTemplate) {
-      // If it's a deployment from the template gallery, load from template data
-      setSelectedTemplate(galleryTemplate as TemplateCreation);
-      setEditedManifest(galleryTemplate.content as string);
+    if (template) {
+      setSelectedTemplate(template as TemplateCreation);
+      setEditedManifest(template.content as string);
 
-      if (galleryTemplate.config?.ssh || (!galleryTemplate.config?.ssh && hasComponent("ssh"))) {
+      if ("config" in template && (template.config?.ssh || (!template.config?.ssh && hasComponent("ssh")))) {
         toggleCmp("ssh");
       }
-    }
 
-    const queryStep = searchParams?.get("step");
-    const _activeStep = getStepIndexByParam(queryStep);
-    setActiveStep(_activeStep);
-
-    if ((redeployTemplate || galleryTemplate) && queryStep !== RouteStep.editDeployment) {
-      router.replace(UrlService.newDeployment({ ...searchParams, step: RouteStep.editDeployment }));
+      const queryStep = searchParams?.get("step");
+      if (queryStep !== RouteStep.editDeployment) {
+        router.replace(UrlService.newDeployment({ ...searchParams, step: RouteStep.editDeployment }));
+      }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchParams, templates]);
+  }, [templates, editedManifest, searchParams, router, toggleCmp, hasComponent]);
 
   const getRedeployTemplate = () => {
     let template: Partial<TemplateCreation> | null = null;

apps/deploy-web/src/components/shared/StatusPill.tsx

@@ -14,12 +14,16 @@ export const StatusPill: React.FunctionComponent<Props> = ({ state, style, size
   return (
     <div
       style={style}
-      className={cn(className, "rounded-2xl", {
-        ["ml-2 h-2 w-2"]: size === "small",
-        ["ml-4 h-4 w-4"]: size === "medium",
-        ["bg-green-600"]: state === "active",
-        ["bg-destructive"]: state === "closed"
-      })}
+      className={cn(
+        "rounded-2xl",
+        {
+          ["ml-2 h-2 w-2"]: size === "small",
+          ["ml-4 h-4 w-4"]: size === "medium",
+          ["bg-green-600"]: state === "active",
+          ["bg-destructive"]: state === "closed"
+        },
+        className
+      )}
     />
   );
 };

apps/deploy-web/src/context/WalletProvider/WalletProvider.tsx

@@ -86,11 +86,12 @@ export const WalletProvider = ({ children }) => {
   const { refetch: refetchBalances } = useBalances(walletAddress);
   const { addEndpoints } = useManager();
   const isManaged = useMemo(() => !!managedWallet && managedWallet?.address === walletAddress, [walletAddress, managedWallet]);
-
   const {
     fee: { default: feeGranter }
   } = useAllowance(walletAddress as string, isManaged);
 
+  useWhen(walletAddress, loadWallet);
+
   useEffect(() => {
     if (!settings.apiEndpoint || !settings.rpcEndpoint) return;
 
@@ -101,6 +102,12 @@ export const WalletProvider = ({ children }) => {
     });
   }, [addEndpoints, settings.apiEndpoint, settings.rpcEndpoint]);
 
+  useEffect(() => {
+    if (isWalletLoaded && !isLoading && !isWalletConnected && !!managedWallet && !isManaged) {
+      connectManagedWallet();
+    }
+  }, [isWalletLoaded, isLoading, isWalletConnected, managedWallet, connectManagedWallet, isManaged]);
+
   function switchWalletType() {
     if (selectedWalletType === "custodial" && !managedWallet) {
       userWallet.disconnect();
@@ -150,8 +157,6 @@ export const WalletProvider = ({ children }) => {
     });
   }
 
-  useWhen(walletAddress, loadWallet);
-
   async function loadWallet(): Promise<void> {
     let currentWallets = getStorageWallets();
 

apps/deploy-web/src/hooks/useManagedEscrowFaqModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React from "react";
 import { FormattedNumber } from "react-intl";
-import { Alert, Popup } from "@akashnetwork/ui/components";
+import { Alert } from "@akashnetwork/ui/components";
 import { usePopup } from "@akashnetwork/ui/context";
 import { ArrowRight } from "iconoir-react";
 

apps/deploy-web/src/types/address.ts

@@ -1,5 +1,5 @@
 import { RestApiAuthzGrantsResponseType } from "./balances";
-import { DeploymentDto, RpcDeployment } from "./deployment";
+import { DeploymentDto } from "./deployment";
 import { TransactionDetail } from "./transaction";
 import { IValidatorAddess } from "./validator";
 

packages/ui/components/spinner.tsx

@@ -3,7 +3,7 @@ import { cn } from "../utils";
 
 type SpinnerProps = {
   className?: string;
-  size?: "small" | "medium" | "large";
+  size?: "xSmall" | "small" | "medium" | "large";
   variant?: "primary" | "dark";
 };
 
@@ -15,6 +15,7 @@ export function Spinner({ className, size = "medium", variant = "primary" }: Spi
         className={cn("animate-spin", {
           "fill-red-200 text-red-500 dark:fill-red-500 dark:text-transparent/20": variant === "primary",
           "fill-red-500 text-white": variant === "dark",
+          "h-2 w-2": size === "xSmall",
           "h-4 w-4": size === "small",
           "h-8 w-8": size === "medium",
           "h-12 w-12": size === "large"