feat(wallet): ensure proper denom for a managed wallet

refs #247
akash-network · Aug 15, 2024 · 3ac0c10 · 3ac0c10
1 parent 7d9cbbd
commit 3ac0c10
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 11 deletions.
diff --git a/apps/deploy-web/env.config.js b/apps/deploy-web/env.config.js
@@ -11,7 +11,8 @@ const envSchema = z.object({
     .default("false"),
   NEXT_PUBLIC_MANAGED_WALLET_NETWORK_ID: networkId.optional().default("mainnet"),
   NEXT_PUBLIC_DEFAULT_NETWORK_ID: networkId.optional().default("mainnet"),
-  DEFAULT_NETWORK_ID: networkId.optional().default("mainnet")
+  DEFAULT_NETWORK_ID: networkId.optional().default("mainnet"),
+  NEXT_PUBLIC_MANAGED_WALLET_DENOM: z.enum(["uakt", "usdc"]).optional().default("usdc")
 });
 
 module.exports.envSchema = envSchema;
@@ -20,5 +21,6 @@ module.exports.envConfig = envSchema.parse({
   NEXT_PUBLIC_BILLING_ENABLED: process.env.NEXT_PUBLIC_BILLING_ENABLED,
   NEXT_PUBLIC_MANAGED_WALLET_NETWORK_ID: process.env.NEXT_PUBLIC_MANAGED_WALLET_NETWORK_ID,
   NEXT_PUBLIC_DEFAULT_NETWORK_ID: process.env.NEXT_PUBLIC_DEFAULT_NETWORK_ID,
-  DEFAULT_NETWORK_ID: process.env.DEFAULT_NETWORK_ID
+  DEFAULT_NETWORK_ID: process.env.DEFAULT_NETWORK_ID,
+  NEXT_PUBLIC_MANAGED_WALLET_DENOM: process.env.NEXT_PUBLIC_MANAGED_WALLET_DENOM
 });
diff --git a/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx b/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { Dispatch, useEffect, useRef, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
 import { certificateManager } from "@akashnetwork/akashjs/build/certificates/certificate-manager";
 import { Alert, Button, CustomTooltip, Input, Spinner } from "@akashnetwork/ui/components";
 import { EncodeObject } from "@cosmjs/proto-signing";
@@ -15,6 +15,7 @@ import { useCertificate } from "@src/context/CertificateProvider";
 import { useChainParam } from "@src/context/ChainParamProvider";
 import { useSdlBuilder } from "@src/context/SdlBuilderProvider/SdlBuilderProvider";
 import { useWallet } from "@src/context/WalletProvider";
+import { useManagedWalletDenom } from "@src/hooks/useManagedWalletDenom";
 import { useWhen } from "@src/hooks/useWhen";
 import { useDepositParams } from "@src/queries/useSettings";
 import sdlStore from "@src/store/sdlStore";
@@ -43,7 +44,7 @@ type Props = {
   onTemplateSelected: Dispatch<TemplateCreation | null>;
   selectedTemplate: TemplateCreation | null;
   editedManifest: string | null;
-  setEditedManifest: Dispatch<string>;
+  setEditedManifest: Dispatch<SetStateAction<string>>;
 };
 
 export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, setEditedManifest, onTemplateSelected, selectedTemplate }) => {
@@ -69,6 +70,20 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
   const { data: depositParams } = useDepositParams();
   const defaultDeposit = depositParams || defaultInitialDeposit;
   const fileUploadRef = useRef<HTMLInputElement>(null);
+  const wallet = useWallet();
+  const managedDenom = useManagedWalletDenom();
+
+  useWhen(wallet.isManaged && sdlDenom === "uakt", () => {
+    setSdlDenom(managedDenom);
+  });
+
+  useWhen(
+    wallet.isManaged && sdlDenom === "uakt",
+    () => {
+      setEditedManifest(prev => prev.replace(/uakt/g, managedDenom));
+    },
+    [editedManifest]
+  );
 
   useWhen(hasComponent("ssh"), () => {
     setSelectedSdlEditMode("builder");

diff --git a/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx b/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx
@@ -7,6 +7,9 @@ import cloneDeep from "lodash/cloneDeep";
 import { nanoid } from "nanoid";
 
 import { useSdlBuilder } from "@src/context/SdlBuilderProvider/SdlBuilderProvider";
+import { useWallet } from "@src/context/WalletProvider";
+import { useManagedWalletDenom } from "@src/hooks/useManagedWalletDenom";
+import { useWhen } from "@src/hooks/useWhen";
 import { useGpuModels } from "@src/queries/useGpuQuery";
 import { SdlBuilderFormValuesSchema, SdlBuilderFormValuesType, ServiceType } from "@src/types";
 import { defaultService, defaultSshVMService } from "@src/utils/sdl/data";
@@ -48,9 +51,25 @@ export const SdlBuilder = React.forwardRef<SdlBuilderRefType, Props>(({ sdlStrin
     name: "services",
     keyName: "id"
   });
-  const { services: _services = [] } = watch();
+  const { services: formServices = [] } = watch();
   const { data: gpuModels } = useGpuModels();
   const [serviceCollapsed, setServiceCollapsed] = useState([]);
+  const wallet = useWallet();
+  const managedDenom = useManagedWalletDenom();
+
+  useWhen(
+    wallet.isManaged,
+    () => {
+      formServices.forEach((service, index) => {
+        const { denom } = service.placement.pricing;
+
+        if (denom !== managedDenom) {
+          setValue(`services.${index}.placement.pricing.denom`, managedDenom);
+        }
+      });
+    },
+    [formServices, sdlString]
+  );
 
   React.useImperativeHandle(ref, () => ({
     getSdl: getSdl,
@@ -83,7 +102,7 @@ export const SdlBuilder = React.forwardRef<SdlBuilderRefType, Props>(({ sdlStrin
 
   const getSdl = () => {
     try {
-      return generateSdl(transformCustomSdlFields(_services, { withSSH: hasComponent("ssh") }));
+      return generateSdl(transformCustomSdlFields(formServices, { withSSH: hasComponent("ssh") }));
     } catch (err) {
       if (err instanceof TransformError) {
         setError(err.message);
@@ -129,14 +148,14 @@ export const SdlBuilder = React.forwardRef<SdlBuilderRefType, Props>(({ sdlStrin
       ) : (
         <Form {...form}>
           <form ref={formRef} autoComplete="off">
-            {_services &&
+            {formServices &&
               services.map((service, serviceIndex) => (
                 <SimpleServiceFormControl
                   key={service.id}
                   serviceIndex={serviceIndex}
                   gpuModels={gpuModels}
                   setValue={setValue}
-                  _services={_services as ServiceType[]}
+                  _services={formServices as ServiceType[]}
                   control={control}
                   trigger={trigger}
                   onRemoveService={onRemoveService}

diff --git a/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx b/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx
@@ -31,6 +31,7 @@ import Link from "next/link";
 
 import { SSHKeyFormControl } from "@src/components/sdl/SSHKeyFromControl";
 import { useSdlBuilder } from "@src/context/SdlBuilderProvider/SdlBuilderProvider";
+import { useWallet } from "@src/context/WalletProvider";
 import { SdlBuilderFormValuesType, ServiceType } from "@src/types";
 import { GpuVendor } from "@src/types/gpu";
 import { uAktDenom } from "@src/utils/constants";
@@ -92,6 +93,7 @@ export const SimpleServiceFormControl: React.FunctionComponent<Props> = ({
   const _isEditingExpose = serviceIndex === isEditingExpose;
   const _isEditingPlacement = serviceIndex === isEditingPlacement;
   const { imageList, hasComponent, toggleCmp } = useSdlBuilder();
+  const wallet = useWallet();
 
   const onExpandClick = () => {
     setServiceCollapsed(prev => {
@@ -400,9 +402,11 @@ export const SimpleServiceFormControl: React.FunctionComponent<Props> = ({
                     </div>
                   )}
 
-                  <div className="mt-4">
-                    <TokenFormControl control={control} name={`services.${serviceIndex}.placement.pricing.denom`} />
-                  </div>
+                  {!wallet?.isManaged && (
+                    <div className="mt-4">
+                      <TokenFormControl control={control} name={`services.${serviceIndex}.placement.pricing.denom`} />
+                    </div>
+                  )}
                 </div>
               </div>
               <div className="mt-4 break-all">

diff --git a/apps/deploy-web/src/hooks/useManagedWalletDenom.ts b/apps/deploy-web/src/hooks/useManagedWalletDenom.ts
@@ -0,0 +1,10 @@
+import { envConfig } from "@src/config/env.config";
+import { useWallet } from "@src/context/WalletProvider";
+import { useUsdcDenom } from "@src/hooks/useDenom";
+
+export const useManagedWalletDenom = () => {
+  const wallet = useWallet();
+  const usdcDenom = useUsdcDenom();
+
+  return wallet.isManaged && envConfig.NEXT_PUBLIC_MANAGED_WALLET_DENOM === "usdc" ? usdcDenom : "uakt";
+};