feat(network): stick to a certain network for managed wallets

apps/deploy-web/env.config.js

@@ -1,16 +1,26 @@
 const { z } = require("zod");
 
+const networkId = z.enum(["mainnet", "sandbox", "testnet"]);
+
 const envSchema = z.object({
   NEXT_PUBLIC_MASTER_WALLET_ADDRESS: z.string().optional(),
   NEXT_PUBLIC_BILLING_ENABLED: z
     .enum(["true", "false"])
     .transform(val => val === "true")
     .optional()
-    .default("false")
+    .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"),
+  NEXT_PUBLIC_MANAGED_WALLET_DENOM: z.enum(["uakt", "usdc"]).optional().default("usdc")
 });
 
 module.exports.envSchema = envSchema;
 module.exports.envConfig = envSchema.parse({
   NEXT_PUBLIC_MASTER_WALLET_ADDRESS: process.env.NEXT_PUBLIC_MASTER_WALLET_ADDRESS,
-  NEXT_PUBLIC_BILLING_ENABLED: process.env.NEXT_PUBLIC_BILLING_ENABLED
+  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,
+  NEXT_PUBLIC_MANAGED_WALLET_DENOM: process.env.NEXT_PUBLIC_MANAGED_WALLET_DENOM
 });

apps/deploy-web/package.json

@@ -33,8 +33,8 @@
     "@emotion/react": "^11.11.0",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.8.1",
-    "@leapwallet/elements": "^1.3.4",
     "@hookform/resolvers": "^3.9.0",
+    "@leapwallet/elements": "^1.3.4",
     "@leapwallet/name-matcha": "^1.7.1",
     "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^5.11.11",
@@ -62,7 +62,7 @@
     "geist": "^1.3.0",
     "http-proxy": "^1.18.1",
     "iconoir-react": "^7.3.0",
-    "jotai": "^2.8.0",
+    "jotai": "^2.9.2",
     "js-yaml": "^4.1.0",
     "json-stable-stringify": "^1.0.2",
     "json2csv": "^5.0.7",

apps/deploy-web/src/components/home/YourAccount.tsx

@@ -334,7 +334,7 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
           </div>
         )}
 
-        {!address && <ConnectWallet text="Connect your wallet to deploy!" />}
+        {!address && <ConnectWallet text="Setup your billing to deploy!" />}
       </CardContent>
     </Card>
   );

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

@@ -2,8 +2,8 @@
 import { Button } from "@akashnetwork/ui/components";
 import { useRouter } from "next/navigation";
 
-import { useSelectedNetwork } from "@src/hooks/useSelectedNetwork";
 import { getSplitText } from "@src/hooks/useShortText";
+import networkStore from "@src/store/networkStore";
 import { UrlService } from "@src/utils/urlUtils";
 import { useSettings } from "../../context/SettingsProvider";
 import { LinearLoadingSkeleton } from "../shared/LinearLoadingSkeleton";
@@ -14,7 +14,7 @@ export const NodeStatusBar = () => {
   const { selectedNode, isCustomNode, customNode } = settings;
   const router = useRouter();
   const shownNode = isCustomNode ? customNode : selectedNode;
-  const selectedNetwork = useSelectedNetwork();
+  const selectedNetwork = networkStore.useSelectedNetwork();
 
   return (
     <div className="mb-4">

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");

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}

apps/deploy-web/src/components/providers/ProviderList.tsx

@@ -21,9 +21,9 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { useLocalNotes } from "@src/context/LocalNoteProvider";
 import { useSettings } from "@src/context/SettingsProvider";
 import { useWallet } from "@src/context/WalletProvider";
-import { useSelectedNetwork } from "@src/hooks/useSelectedNetwork";
 import { useAllLeases } from "@src/queries/useLeaseQuery";
 import { useNetworkCapacity, useProviderList } from "@src/queries/useProvidersQuery";
+import networkStore from "@src/store/networkStore";
 import { ClientProviderList } from "@src/types/provider";
 import { domainName, UrlService } from "@src/utils/urlUtils";
 import Layout from "../layout/Layout";
@@ -66,7 +66,7 @@ export const ProviderList: React.FunctionComponent = () => {
   const end = start + pageSize;
   const currentPageProviders = filteredProviders.slice(start, end);
   const pageCount = Math.ceil(filteredProviders.length / pageSize);
-  const selectedNetwork = useSelectedNetwork();
+  const selectedNetwork = networkStore.useSelectedNetwork();
   const router = useRouter();
   const searchParams = useSearchParams();
   const sortQuery = searchParams?.get("sort");

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">

apps/deploy-web/src/components/settings/SelectNetworkModal.tsx

@@ -1,30 +1,22 @@
 "use client";
 import { useState } from "react";
 import { Alert, AlertDescription, AlertTitle, Badge, buttonVariants, Popup, RadioGroup, RadioGroupItem } from "@akashnetwork/ui/components";
+import { useAtom } from "jotai/index";
 
-import { useSettings } from "@src/context/SettingsProvider";
-import { networks } from "@src/store/networkStore";
+import networkStore, { networks } from "@src/store/networkStore";
 import { mainnetId } from "@src/utils/constants";
 import { cn } from "@src/utils/styleUtils";
 
 export const SelectNetworkModal = ({ onClose }) => {
-  const { selectedNetworkId } = useSettings();
-  const [localSelectedNetworkId, setLocalSelectedNetworkId] = useState(selectedNetworkId);
+  const [selectedNetworkId, setSelectedNetworkId] = useAtom(networkStore.selectedNetworkId);
+  const [formSelectedNetworkId, setFormSelectedNetworkId] = useState(selectedNetworkId);
 
-  const handleSelectNetwork = network => {
-    setLocalSelectedNetworkId(network.id);
-  };
-
-  const handleSaveChanges = () => {
-    if (selectedNetworkId !== localSelectedNetworkId) {
-      // Set in the settings and local storage
-      localStorage.setItem("selectedNetworkId", localSelectedNetworkId);
-      // Reset the ui to reload the settings for the currently selected network
-
-      location.reload();
-    } else {
-      onClose();
+  const save = () => {
+    if (selectedNetworkId !== formSelectedNetworkId) {
+      setSelectedNetworkId(formSelectedNetworkId);
     }
+
+    onClose();
   };
 
   return (
@@ -44,7 +36,7 @@ export const SelectNetworkModal = ({ onClose }) => {
           label: "Save",
           variant: "default",
           side: "right",
-          onClick: handleSaveChanges
+          onClick: save
         }
       ]}
       onClose={onClose}
@@ -57,15 +49,15 @@ export const SelectNetworkModal = ({ onClose }) => {
             return (
               <li
                 key={network.id}
-                onClick={() => handleSelectNetwork(network)}
+                onClick={() => setFormSelectedNetworkId(network.id)}
                 className={cn(
                   buttonVariants({ variant: "text" }),
                   { ["pointer-events-none text-muted-foreground"]: !network.enabled },
                   "flex h-auto cursor-pointer items-center justify-start"
                 )}
               >
                 <div className="basis-[40px]">
-                  <RadioGroupItem value={network.id} id={network.id} checked={localSelectedNetworkId === network.id} disabled={!network.enabled} />
+                  <RadioGroupItem value={network.id} id={network.id} checked={formSelectedNetworkId === network.id} disabled={!network.enabled} />
                 </div>
                 <div>
                   <div className="flex items-center justify-between text-lg">
@@ -86,11 +78,11 @@ export const SelectNetworkModal = ({ onClose }) => {
         </ul>
       </RadioGroup>
 
-      {localSelectedNetworkId !== mainnetId && (
+      {formSelectedNetworkId !== mainnetId && (
         <Alert variant="warning" className="mb-2 mt-4">
           <AlertTitle className="font-bold">Warning</AlertTitle>
 
-          <AlertDescription>Some features are experimental and may not work as intented on the testnet or sandbox.</AlertDescription>
+          <AlertDescription>Some features are experimental and may not work as intended on the testnet or sandbox.</AlertDescription>
         </Alert>
       )}
     </Popup>

apps/deploy-web/src/components/settings/SettingsContainer.tsx

@@ -9,8 +9,8 @@ import { LocalDataManager } from "@src/components/settings/LocalDataManager";
 import { Fieldset } from "@src/components/shared/Fieldset";
 import { LabelValue } from "@src/components/shared/LabelValue";
 import { useWallet } from "@src/context/WalletProvider";
-import { useSelectedNetwork } from "@src/hooks/useSelectedNetwork";
 import { useWhen } from "@src/hooks/useWhen";
+import networkStore from "@src/store/networkStore";
 import Layout from "../layout/Layout";
 import { CertificateList } from "./CertificateList";
 import CloudmosImportPanel from "./CloudmosImportPanel";
@@ -21,7 +21,7 @@ import { SettingsLayout, SettingsTabs } from "./SettingsLayout";
 
 export const SettingsContainer: React.FunctionComponent = () => {
   const [isSelectingNetwork, setIsSelectingNetwork] = useState(false);
-  const selectedNetwork = useSelectedNetwork();
+  const selectedNetwork = networkStore.useSelectedNetwork();
   const wallet = useWallet();
   const router = useRouter();
 

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

@@ -101,7 +101,7 @@ export const PrerequisiteList: React.FunctionComponent<Props> = ({ onClose, onCo
         </Card>
       ) : (
         <div className="py-8">
-          <ConnectWallet text="Connect your wallet to deploy!" />
+          <ConnectWallet text="Setup your billing to deploy!" />
         </div>
       )}
     </Popup>

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

@@ -10,7 +10,7 @@ import { ChainProvider } from "@cosmos-kit/react";
 import { useChain } from "@cosmos-kit/react";
 
 import { akash, akashSandbox, akashTestnet, assetLists } from "@src/chains";
-import { useSelectedNetwork } from "@src/hooks/useSelectedNetwork";
+import networkStore from "@src/store/networkStore";
 import { customRegistry } from "@src/utils/customRegistry";
 
 type Props = {
@@ -58,6 +58,6 @@ export function CustomChainProvider({ children }: Props) {
 }
 
 export function useSelectedChain() {
-  const { chainRegistryName } = useSelectedNetwork();
+  const { chainRegistryName } = networkStore.useSelectedNetwork();
   return useChain(chainRegistryName);
 }