From 4a4348390c56d0f2794b6689cf19ef84edaf9c54 Mon Sep 17 00:00:00 2001 From: Maxime Beauchamp <15185355+baktun14@users.noreply.github.com> Date: Tue, 24 Sep 2024 08:30:05 -0400 Subject: [PATCH] fix(deployment): managed walllet fixes (#382) --- apps/deploy-web/package.json | 2 +- .../src/components/deployments/LeaseChip.tsx | 3 +- .../src/components/deployments/LeaseRow.tsx | 2 +- .../components/deployments/ManifestUpdate.tsx | 18 +++++---- .../src/components/home/YourAccount.tsx | 2 +- .../src/components/layout/AccountMenu.tsx | 2 +- .../components/layout/MobileSidebarUser.tsx | 2 +- .../components/new-deployment/CreateLease.tsx | 2 - .../new-deployment/ManifestEdit.tsx | 9 ++--- .../new-deployment/NewDeploymentContainer.tsx | 38 +++++++++---------- .../src/components/shared/StatusPill.tsx | 16 +++++--- .../context/WalletProvider/WalletProvider.tsx | 11 ++++-- .../src/hooks/useManagedEscrowFaqModal.tsx | 2 +- apps/deploy-web/src/types/address.ts | 2 +- packages/ui/components/spinner.tsx | 3 +- 15 files changed, 60 insertions(+), 54 deletions(-) diff --git a/apps/deploy-web/package.json b/apps/deploy-web/package.json index 55cebd17f..3a3c4cc07 100644 --- a/apps/deploy-web/package.json +++ b/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", diff --git a/apps/deploy-web/src/components/deployments/LeaseChip.tsx b/apps/deploy-web/src/components/deployments/LeaseChip.tsx index 13b5738fe..331d33119 100644 --- a/apps/deploy-web/src/components/deployments/LeaseChip.tsx +++ b/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 = ({ lease, providers }) }} > + {!providerName && } {providerName?.length > 20 ? ( diff --git a/apps/deploy-web/src/components/deployments/LeaseRow.tsx b/apps/deploy-web/src/components/deployments/LeaseRow.tsx index b584ae893..2b4b38a5c 100644 --- a/apps/deploy-web/src/components/deployments/LeaseRow.tsx +++ b/apps/deploy-web/src/components/deployments/LeaseRow.tsx @@ -213,7 +213,7 @@ export const LeaseRow = React.forwardRef(({ lease, setActi label="Provider:" value={ <> - {isLeaseActive && isLoadingProviderStatus && } + {isLeaseActive && isLoadingProviderStatus && } {provider && (
diff --git a/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx b/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx index a14b02e81..3a8c5672c 100644 --- a/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx +++ b/apps/deploy-web/src/components/deployments/ManifestUpdate.tsx @@ -47,13 +47,17 @@ export const ManifestUpdate: React.FunctionComponent = ({ 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); } diff --git a/apps/deploy-web/src/components/home/YourAccount.tsx b/apps/deploy-web/src/components/home/YourAccount.tsx index 343a491c7..f37bc0700 100644 --- a/apps/deploy-web/src/components/home/YourAccount.tsx +++ b/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"; diff --git a/apps/deploy-web/src/components/layout/AccountMenu.tsx b/apps/deploy-web/src/components/layout/AccountMenu.tsx index b2ab437ba..ba5540d01 100644 --- a/apps/deploy-web/src/components/layout/AccountMenu.tsx +++ b/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"; diff --git a/apps/deploy-web/src/components/layout/MobileSidebarUser.tsx b/apps/deploy-web/src/components/layout/MobileSidebarUser.tsx index d0f87b58e..8fbf0d30a 100644 --- a/apps/deploy-web/src/components/layout/MobileSidebarUser.tsx +++ b/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"; diff --git a/apps/deploy-web/src/components/new-deployment/CreateLease.tsx b/apps/deploy-web/src/components/new-deployment/CreateLease.tsx index 168ad0afa..9435e1b40 100644 --- a/apps/deploy-web/src/components/new-deployment/CreateLease.tsx +++ b/apps/deploy-web/src/components/new-deployment/CreateLease.tsx @@ -59,7 +59,6 @@ export const CreateLease: React.FunctionComponent = ({ 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>([]); const [search, setSearch] = useState(""); @@ -203,7 +202,6 @@ export const CreateLease: React.FunctionComponent = ({ dseq }) => { category: "deployments", label: "Create lease" }); - setIsLeaseCreated(true); await sendManifest(); } finally { setIsCreatingLeases(false); diff --git a/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx b/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx index cf4a65fa2..74575af98 100644 --- a/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx +++ b/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx @@ -76,16 +76,13 @@ export const ManifestEdit: React.FunctionComponent = ({ 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"), () => { diff --git a/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx b/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx index c941e1a26..8ca684b99 100644 --- a/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx +++ b/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 | null = null; diff --git a/apps/deploy-web/src/components/shared/StatusPill.tsx b/apps/deploy-web/src/components/shared/StatusPill.tsx index fe694229f..9576027ac 100644 --- a/apps/deploy-web/src/components/shared/StatusPill.tsx +++ b/apps/deploy-web/src/components/shared/StatusPill.tsx @@ -14,12 +14,16 @@ export const StatusPill: React.FunctionComponent = ({ state, style, size return (
); }; diff --git a/apps/deploy-web/src/context/WalletProvider/WalletProvider.tsx b/apps/deploy-web/src/context/WalletProvider/WalletProvider.tsx index 52f710959..59f9b676e 100644 --- a/apps/deploy-web/src/context/WalletProvider/WalletProvider.tsx +++ b/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 { let currentWallets = getStorageWallets(); diff --git a/apps/deploy-web/src/hooks/useManagedEscrowFaqModal.tsx b/apps/deploy-web/src/hooks/useManagedEscrowFaqModal.tsx index df4cea9ec..96e6567a9 100644 --- a/apps/deploy-web/src/hooks/useManagedEscrowFaqModal.tsx +++ b/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"; diff --git a/apps/deploy-web/src/types/address.ts b/apps/deploy-web/src/types/address.ts index 8b79d8f55..37ec187b5 100644 --- a/apps/deploy-web/src/types/address.ts +++ b/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"; diff --git a/packages/ui/components/spinner.tsx b/packages/ui/components/spinner.tsx index 5943882c5..cc421eb3a 100644 --- a/packages/ui/components/spinner.tsx +++ b/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"