fix(deployment): managed wallet user template

(#483)
akash-network · Nov 19, 2024 · ab83f2f · ab83f2f
1 parent 18f24f6
commit ab83f2f
Show file tree

Hide file tree

Showing 13 changed files with 100 additions and 87 deletions.
diff --git a/apps/deploy-web/package.json b/apps/deploy-web/package.json
@@ -76,7 +76,7 @@
     "lucide-react": "^0.292.0",
     "material-ui-popup-state": "^4.0.2",
     "nanoid": "^3.3.4",
-    "next": "^14.2.3",
+    "next": "^14.2.18",
     "next-nprogress-bar": "^2.1.2",
     "next-pwa": "^5.6.0",
     "next-qrcode": "^2.1.0",

diff --git a/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx b/apps/deploy-web/src/components/deployments/DeploymentDetail.tsx
@@ -213,7 +213,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
             {activeTab === "EVENTS" && <DeploymentLogs leases={leases} selectedLogsMode="events" />}
             {activeTab === "SHELL" && <DeploymentLeaseShell leases={leases} />}
             {activeTab === "LEASES" && (
-              <div className="p-4">
+              <div className="py-4">
                 {leases && (!localCert || !isLocalCertMatching) && (
                   <div className="mb-4">
                     <Alert variant="warning">You do not have a valid local certificate. You need to create a new one to view lease status and details.</Alert>

diff --git a/apps/deploy-web/src/components/layout/MobileSidebarUser.tsx b/apps/deploy-web/src/components/layout/MobileSidebarUser.tsx
@@ -15,7 +15,7 @@ export const MobileSidebarUser: React.FunctionComponent = () => {
 
   return (
     <ul className="w-full overflow-hidden border-0 p-0">
-      <div className="flex items-center justify-center p-2">
+      <div className="flex w-full items-center justify-center p-2">
         <WalletStatus />
       </div>
 
@@ -71,11 +71,7 @@ export const MobileSidebarUser: React.FunctionComponent = () => {
         </div>
       ) : (
         <div className="p-2">
-          <li className="">
-            {/* <Button component={Link} href={UrlService.signup()} color="secondary" variant="contained" fullWidth>
-              Sign up
-            </Button> */}
-
+          <li>
             <Link href={UrlService.signup()} className={cn(buttonVariants({ variant: "default", size: "sm" }), "w-full")}>
               Sign up
             </Link>

diff --git a/apps/deploy-web/src/components/layout/WalletStatus.tsx b/apps/deploy-web/src/components/layout/WalletStatus.tsx
@@ -29,13 +29,13 @@ export function WalletStatus() {
     <>
       {isWalletLoaded && !isWalletLoading ? (
         isWalletConnected ? (
-          <div className="flex items-center">
-            <div className="py-2">
+          <div className="flex w-full items-center">
+            <div className="w-full py-2">
               <DropdownMenu modal={false} open={open}>
                 <DropdownMenuTrigger asChild>
                   {!!walletBalance && (
                     <div
-                      className={cn("flex items-center rounded-md border px-4 py-2 text-sm", {
+                      className={cn("flex items-center justify-center rounded-md border px-4 py-2 text-sm", {
                         "border-primary bg-primary/10 text-primary dark:bg-primary dark:text-primary-foreground": isManaged,
                         "bg-background text-foreground": !isManaged
                       })}
@@ -93,7 +93,7 @@ export function WalletStatus() {
             </div>
           </div>
         ) : (
-          <div>
+          <div className="w-full">
             {withBilling && !isSignedInWithTrial && <ConnectManagedWalletButton className="mb-2 mr-2 w-full md:mb-0 md:w-auto" />}
             <ConnectWalletButton className="w-full md:w-auto" />
           </div>

diff --git a/apps/deploy-web/src/components/new-deployment/CreateLease.tsx b/apps/deploy-web/src/components/new-deployment/CreateLease.tsx
@@ -19,7 +19,9 @@ import yaml from "js-yaml";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { event } from "nextjs-google-analytics";
+import { useTheme as useMuiTheme } from "@mui/material/styles";
 import { useSnackbar } from "notistack";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 import { LocalCert } from "@src/context/CertificateProvider/CertificateProviderContext";
 import { useWallet } from "@src/context/WalletProvider";
@@ -92,6 +94,8 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
         return a as { [key: number]: BidDto };
       }, {} as any) || {};
   const dseqList = Object.keys(groupedBids).map(group => parseInt(group));
+  const muiTheme = useMuiTheme();
+  const smallScreen = useMediaQuery(muiTheme.breakpoints.down("md"));
 
   const allClosed = (bids?.length || 0) > 0 && bids?.every(bid => bid.state === "closed");
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
@@ -399,7 +403,7 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
 
       <LinearLoadingSkeleton isLoading={isSendingManifest} />
       {dseqList.length > 0 && (
-        <ViewPanel stickToBottom style={{ overflow: "auto", paddingBottom: "2rem" }}>
+        <ViewPanel stickToBottom className="overflow-visible pb-16 md:overflow-auto" style={{ height: smallScreen ? "auto" : "" }}>
           {dseqList.map((gseq, i) => (
             <BidGroup
               key={gseq}
@@ -421,8 +425,8 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
 
           {isTrialing && (
             <Alert variant="destructive">
-              <AlertTitle className="text-lg">Free Trial!</AlertTitle>
-              <AlertDescription className="space-y-1">
+              <AlertTitle className="text-lg dark:text-white/90">Free Trial!</AlertTitle>
+              <AlertDescription className="space-y-1 dark:text-white/90">
                 <p>You are using a free trial and are limited to only a few providers on the network.</p>
                 <p>
                   <Link href={UrlService.login()} className="font-bold underline">

diff --git a/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx b/apps/deploy-web/src/components/new-deployment/NewDeploymentContainer.tsx
@@ -18,6 +18,7 @@ import { CreateLease } from "./CreateLease";
 import { ManifestEdit } from "./ManifestEdit";
 import { CustomizedSteppers } from "./Stepper";
 import { TemplateList } from "./TemplateList";
+import { USER_TEMPLATE_CODE } from "@src/config/deploy.config";
 
 export const NewDeploymentContainer: FC = () => {
   const [isGitProviderTemplate, setIsGitProviderTemplate] = useState<boolean>(false);
@@ -68,28 +69,29 @@ export const NewDeploymentContainer: FC = () => {
     const isCreating = !!activeStep && activeStep > getStepIndexByParam(RouteStep.chooseTemplate);
     if (!templates || (isCreating && !!editedManifest && !!templateId)) return;
 
-    const template = getRedeployTemplate() || getGalleryTemplate();
+    const template = getRedeployTemplate() || getGalleryTemplate() || deploySdl;
+    const isUserTemplate = template?.code === USER_TEMPLATE_CODE;
+    const isUserTemplateInit = isUserTemplate && !!editedManifest;
+    if (!template || isUserTemplateInit) return;
 
-    if (template) {
-      setSelectedTemplate(template as TemplateCreation);
-      setEditedManifest(template.content as string);
+    setSelectedTemplate(template as TemplateCreation);
+    setEditedManifest(template.content as string);
 
-      if ("config" in template && (template.config?.ssh || (!template.config?.ssh && hasComponent("ssh")))) {
-        toggleCmp("ssh");
-      }
-      const isRemoteYamlImage = isImageInYaml(template?.content as string, getTemplateById(CI_CD_TEMPLATE_ID)?.deploy);
-      const queryStep = searchParams?.get("step");
-      if (queryStep !== RouteStep.editDeployment) {
-        if (isRemoteYamlImage) {
-          setIsGitProviderTemplate(true);
-        }
-
-        const newParams = isRemoteYamlImage
-          ? { ...searchParams, step: RouteStep.editDeployment, gitProvider: "github" }
-          : { ...searchParams, step: RouteStep.editDeployment };
-
-        router.replace(UrlService.newDeployment(newParams));
+    if ("config" in template && (template.config?.ssh || (!template.config?.ssh && hasComponent("ssh")))) {
+      toggleCmp("ssh");
+    }
+    const isRemoteYamlImage = isImageInYaml(template?.content as string, getTemplateById(CI_CD_TEMPLATE_ID)?.deploy);
+    const queryStep = searchParams?.get("step");
+    if (queryStep !== RouteStep.editDeployment) {
+      if (isRemoteYamlImage) {
+        setIsGitProviderTemplate(true);
       }
+
+      const newParams = isRemoteYamlImage
+        ? { ...searchParams, step: RouteStep.editDeployment, gitProvider: "github" }
+        : { ...searchParams, step: RouteStep.editDeployment };
+
+      router.replace(UrlService.newDeployment(newParams));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [templates, editedManifest, searchParams, router, toggleCmp, hasComponent, activeStep]);
@@ -138,11 +140,6 @@ export const NewDeploymentContainer: FC = () => {
       }
     }
 
-    // Jotai state template
-    if (deploySdl) {
-      return deploySdl;
-    }
-
     return null;
   };
 

diff --git a/apps/deploy-web/src/components/sdl/SimpleSdlBuilderForm.tsx b/apps/deploy-web/src/components/sdl/SimpleSdlBuilderForm.tsx
@@ -27,6 +27,7 @@ import { UrlService } from "@src/utils/urlUtils";
 import { ImportSdlModal } from "./ImportSdlModal";
 import { PreviewSdl } from "./PreviewSdl";
 import { SaveTemplateModal } from "./SaveTemplateModal";
+import { USER_TEMPLATE_CODE } from "@src/config/deploy.config";
 
 const DEFAULT_SERVICES = {
   services: [{ ...defaultService }]
@@ -133,7 +134,7 @@ export const SimpleSDLBuilderForm: React.FunctionComponent = () => {
       setDeploySdl({
         title: "",
         category: "",
-        code: "",
+        code: USER_TEMPLATE_CODE,
         description: "",
         content: sdl
       });

diff --git a/apps/deploy-web/src/components/templates/UserTemplate.tsx b/apps/deploy-web/src/components/templates/UserTemplate.tsx
@@ -24,6 +24,7 @@ import { bytesToShrink } from "@src/utils/unitUtils";
 import { domainName, UrlService } from "@src/utils/urlUtils";
 import Layout from "../layout/Layout";
 import { CustomNextSeo } from "../shared/CustomNextSeo";
+import { USER_TEMPLATE_CODE } from "@src/config/deploy.config";
 
 type Props = {
   id: string;
@@ -130,7 +131,7 @@ export const UserTemplate: React.FunctionComponent<Props> = ({ id, template }) =
             setDeploySdl({
               title: "",
               category: "",
-              code: "",
+              code: USER_TEMPLATE_CODE,
               description: "",
               content: template.sdl
             });

diff --git a/apps/deploy-web/src/config/deploy.config.ts b/apps/deploy-web/src/config/deploy.config.ts
@@ -0,0 +1 @@
+export const USER_TEMPLATE_CODE = "USER_TEMPLATE";
diff --git a/apps/deploy-web/src/services/managed-wallet-http/managed-wallet-http.service.ts b/apps/deploy-web/src/services/managed-wallet-http/managed-wallet-http.service.ts
@@ -55,7 +55,9 @@ class ManagedWalletHttpService extends ManagedWalletHttpServiceOriginal {
       url.searchParams.delete("session_id");
       url.searchParams.delete("payment-canceled");
       url.searchParams.delete("payment-success");
-      window.history.replaceState({}, document.title, url.toString());
+      const newUrl = url.toString();
+      // TODO: remove this when fixed https://github.com/vercel/next.js/discussions/18072#discussioncomment-109059
+      window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, document.title, newUrl);
       this.checkoutSessionId = null;
     }
   }

diff --git a/apps/stats-web/package.json b/apps/stats-web/package.json
@@ -13,7 +13,6 @@
   "dependencies": {
     "@akashnetwork/network-store": "*",
     "@akashnetwork/ui": "*",
-    "@akashnetwork/network-store": "*",
     "@cosmjs/encoding": "^0.32.4",
     "@json2csv/plainjs": "^7.0.4",
     "@nivo/line": "^0.87.0",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const USER_TEMPLATE_CODE = "USER_TEMPLATE";