feat(env): implement unified file loading in console-web

refs #313

apps/deploy-web/.gitignore

@@ -44,3 +44,5 @@ sentry.properties
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+env-config.schema.js

apps/deploy-web/env/.env

@@ -0,0 +1,2 @@
+AUTH0_AUDIENCE=https://api.cloudmos.io
+AUTH0_SCOPE=openid profile email offline_access

apps/deploy-web/env/.env.production

@@ -0,0 +1,17 @@
+AUTH0_BASE_URL=https://console.akash.network
+AUTH0_ISSUER_BASE_URL=https://auth.cloudmos.io
+
+NEXT_PUBLIC_BILLING_ENABLED=false
+NEXT_PUBLIC_MANAGED_WALLET_NETWORK_ID=mainnet
+NEXT_PUBLIC_MANAGED_WALLET_DENOM=usdc
+# TODO: replace with a fresh master wallet before release
+NEXT_PUBLIC_MASTER_WALLET_ADDRESS=akash1ss0d2yw38r6e7ew8ndye9h7kg62sem36zak4d5
+
+NEXT_PUBLIC_STATS_APP_URL=https://stats.akash.network
+NEXT_PUBLIC_PROVIDER_PROXY_URL=https://providerproxy.cloudmos.io
+NEXT_PUBLIC_PROVIDER_PROXY_URL_WS=wss://providerproxy.cloudmos.io
+NEXT_PUBLIC_NODE_ENV=$NODE_ENV
+NEXT_PUBLIC_BASE_API_MAINNET_URL=https://api.cloudmos.io
+NEXT_PUBLIC_BASE_API_SANDBOX_URL=https://api-sandbox.cloudmos.io
+NEXT_PUBLIC_BASE_API_TESTNET_URL=https://api-testnet.cloudmos.io
+NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_BASE_API_MAINNET_URL

apps/deploy-web/env/.env.staging

@@ -0,0 +1,16 @@
+AUTH0_BASE_URL=https://console-beta.akash.network
+AUTH0_ISSUER_BASE_URL=https://dev-5aprb0lr.us.auth0.com
+
+NEXT_PUBLIC_BILLING_ENABLED=true
+NEXT_PUBLIC_MANAGED_WALLET_NETWORK_ID=mainnet
+NEXT_PUBLIC_MANAGED_WALLET_DENOM=usdc
+NEXT_PUBLIC_MASTER_WALLET_ADDRESS=akash1ss0d2yw38r6e7ew8ndye9h7kg62sem36zak4d5
+
+NEXT_PUBLIC_STATS_APP_URL=https://stats.akash.network
+NEXT_PUBLIC_PROVIDER_PROXY_URL=https://deployproxybeta.cloudmos.io
+NEXT_PUBLIC_PROVIDER_PROXY_URL_WS=wss://deployproxybeta.cloudmos.io
+NEXT_PUBLIC_NODE_ENV=$NODE_ENV
+NEXT_PUBLIC_BASE_API_MAINNET_URL=https://api-mainnet-staging.cloudmos.io
+NEXT_PUBLIC_BASE_API_SANDBOX_URL=https://api-sandbox-staging.cloudmos.io
+NEXT_PUBLIC_BASE_API_TESTNET_URL=$NEXT_PUBLIC_BASE_API_MAINNET_URL
+NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_BASE_API_MAINNET_URL

apps/deploy-web/next.config.js

@@ -1,4 +1,4 @@
-require("./env.config");
+require("@akashnetwork/env-loader");
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true"
 });
@@ -10,6 +10,16 @@ const withPWA = require("next-pwa")({
 });
 const { withSentryConfig } = require("@sentry/nextjs");
 
+try {
+  const { browserEnvSchema } = require("./env-config.schema");
+
+  browserEnvSchema.parse(process.env);
+} catch (error) {
+  if (error.message.includes("Cannot find module")) {
+    console.warn("No env-config.schema.js found, skipping env validation");
+  }
+}
+
 /**
  * @type {import('next').NextConfig}
  */
@@ -30,10 +40,9 @@ const moduleExports = {
     ignoreDuringBuilds: true
   },
   transpilePackages: ["geist", "@akashnetwork/ui"],
-  // experimental: {
-  //   // outputStandalone: true,
-  //   externalDir: true // to make the import from shared parent folder work https://github.com/vercel/next.js/issues/9474#issuecomment-810212174
-  // },
+  experimental: {
+    instrumentationHook: true
+  },
   publicRuntimeConfig: {
     version
   },

apps/deploy-web/package.json

@@ -6,8 +6,8 @@
   "license": "Apache-2.0",
   "author": "Akash Network",
   "scripts": {
-    "build": "next build",
-    "build-analyze": "set ANALYZE=true&& next build",
+    "build": "npm run build-env-schemas && next build",
+    "build-env-schemas": "tsc src/config/env-config.schema.ts --outDir . --skipLibCheck",
     "dev": "next",
     "format": "prettier --write ./*.{ts,js,json} **/*.{ts,tsx,js,json}",
     "lint": "eslint .",
@@ -17,6 +17,7 @@
   "dependencies": {
     "@akashnetwork/akash-api": "^1.3.0",
     "@akashnetwork/akashjs": "^0.10.0",
+    "@akashnetwork/env-loader": "*",
     "@akashnetwork/http-sdk": "*",
     "@akashnetwork/ui": "*",
     "@auth0/nextjs-auth0": "^3.5.0",

apps/deploy-web/src/components/authorizations/AllowanceModal.tsx

@@ -10,11 +10,11 @@ import { event } from "nextjs-google-analytics";
 import { z } from "zod";
 
 import { LinkTo } from "@src/components/shared/LinkTo";
+import { UAKT_DENOM } from "@src/config/denom.config";
 import { useWallet } from "@src/context/WalletProvider";
 import { useDenomData } from "@src/hooks/useWalletBalance";
 import { AllowanceType } from "@src/types/grant";
 import { AnalyticsEvents } from "@src/utils/analytics";
-import { uAktDenom } from "@src/utils/constants";
 import { aktToUakt, coinToDenom } from "@src/utils/priceUtils";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
 
@@ -46,7 +46,7 @@ export const AllowanceModal: React.FunctionComponent<Props> = ({ editingAllowanc
   });
   const { handleSubmit, control, watch, clearErrors, setValue } = form;
   const { amount, granteeAddress, expiration } = watch();
-  const denomData = useDenomData(uAktDenom);
+  const denomData = useDenomData(UAKT_DENOM);
 
   const onDepositClick = event => {
     event.preventDefault();
@@ -64,7 +64,7 @@ export const AllowanceModal: React.FunctionComponent<Props> = ({ editingAllowanc
     if (editingAllowance) {
       messages.push(TransactionMessageData.getRevokeAllowanceMsg(address, granteeAddress));
     }
-    messages.push(TransactionMessageData.getGrantBasicAllowanceMsg(address, granteeAddress, spendLimit, uAktDenom, expirationDate));
+    messages.push(TransactionMessageData.getGrantBasicAllowanceMsg(address, granteeAddress, spendLimit, UAKT_DENOM, expirationDate));
     const response = await signAndBroadcastTx(messages);
 
     if (response) {
@@ -144,7 +144,7 @@ export const AllowanceModal: React.FunctionComponent<Props> = ({ editingAllowanc
                     min={0}
                     step={0.000001}
                     max={denomData?.inputMax}
-                    startIcon={<span className="text-xs pl-2">{denomData?.label}</span>}
+                    startIcon={<span className="pl-2 text-xs">{denomData?.label}</span>}
                   />
                 );
               }}

apps/deploy-web/src/components/authorizations/GrantModal.tsx

@@ -23,12 +23,12 @@ import { event } from "nextjs-google-analytics";
 import { z } from "zod";
 
 import { LinkTo } from "@src/components/shared/LinkTo";
+import { UAKT_DENOM } from "@src/config/denom.config";
 import { useWallet } from "@src/context/WalletProvider";
 import { getUsdcDenom, useUsdcDenom } from "@src/hooks/useDenom";
 import { useDenomData } from "@src/hooks/useWalletBalance";
 import { GrantType } from "@src/types/grant";
 import { AnalyticsEvents } from "@src/utils/analytics";
-import { uAktDenom } from "@src/utils/constants";
 import { denomToUdenom } from "@src/utils/mathHelpers";
 import { aktToUakt, coinToDenom } from "@src/utils/priceUtils";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
@@ -69,7 +69,7 @@ export const GrantModal: React.FunctionComponent<Props> = ({ editingGrant, addre
   const { handleSubmit, control, watch, clearErrors, setValue } = form;
   const { amount, granteeAddress, expiration, token } = watch();
   const selectedToken = supportedTokens.find(x => x.id === token);
-  const denom = token === "akt" ? uAktDenom : usdcDenom;
+  const denom = token === "akt" ? UAKT_DENOM : usdcDenom;
   const denomData = useDenomData(denom);
 
   const onDepositClick = event => {
@@ -82,7 +82,7 @@ export const GrantModal: React.FunctionComponent<Props> = ({ editingGrant, addre
     clearErrors();
     const spendLimit = token === "akt" ? aktToUakt(amount) : denomToUdenom(amount);
     const usdcDenom = getUsdcDenom();
-    const denom = token === "akt" ? uAktDenom : usdcDenom;
+    const denom = token === "akt" ? UAKT_DENOM : usdcDenom;
 
     const expirationDate = new Date(expiration);
     const message = TransactionMessageData.getGrantMsg(address, granteeAddress, spendLimit, expirationDate, denom);

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

@@ -25,13 +25,13 @@ import { event } from "nextjs-google-analytics";
 import { useSnackbar } from "notistack";
 import { z } from "zod";
 
+import { UAKT_DENOM } from "@src/config/denom.config";
 import { useSettings } from "@src/context/SettingsProvider";
 import { useWallet } from "@src/context/WalletProvider";
 import { useUsdcDenom } from "@src/hooks/useDenom";
 import { useDenomData } from "@src/hooks/useWalletBalance";
 import { useGranteeGrants } from "@src/queries/useGrantsQuery";
 import { AnalyticsEvents } from "@src/utils/analytics";
-import { uAktDenom } from "@src/utils/constants";
 import { denomToUdenom, udenomToDenom } from "@src/utils/mathHelpers";
 import { coinToUDenom, uaktToAKT } from "@src/utils/priceUtils";
 import { LinkTo } from "../shared/LinkTo";
@@ -185,7 +185,7 @@ export const DeploymentDepositModal: React.FunctionComponent<Props> = ({ handleC
         category: "deployments",
         label: "Use depositor to deposit in deployment"
       });
-    } else if (denom === uAktDenom && deposit > uaktBalance) {
+    } else if (denom === UAKT_DENOM && deposit > uaktBalance) {
       setError(`You can't deposit more than you currently have in your balance. Current balance is: ${uaktToAKT(uaktBalance)} AKT.`);
       return;
     } else if (denom === usdcIbcDenom && deposit > usdcBalance) {

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

@@ -14,8 +14,8 @@ import { useWallet } from "@src/context/WalletProvider";
 import { useDeploymentDetail } from "@src/queries/useDeploymentQuery";
 import { useDeploymentLeaseList } from "@src/queries/useLeaseQuery";
 import { useProviderList } from "@src/queries/useProvidersQuery";
+import { RouteStep } from "@src/types/route-steps.type";
 import { AnalyticsEvents } from "@src/utils/analytics";
-import { RouteStepKeys } from "@src/utils/constants";
 import { getDeploymentLocalData } from "@src/utils/deploymentLocalDataUtils";
 import { cn } from "@src/utils/styleUtils";
 import { UrlService } from "@src/utils/urlUtils";
@@ -63,7 +63,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
       if (_leases) {
         // Redirect to select bids if has no lease
         if (deployment?.state === "active" && _leases.length === 0) {
-          router.replace(UrlService.newDeployment({ dseq, step: RouteStepKeys.createLeases }));
+          router.replace(UrlService.newDeployment({ dseq, step: RouteStep.createLeases }));
         }
 
         // Set the array of refs for lease rows

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

@@ -5,6 +5,7 @@ import { OpenInWindow, OpenNewWindow } from "iconoir-react";
 import Link from "next/link";
 
 import ViewPanel from "@src/components/shared/ViewPanel";
+import { browserEnvConfig } from "@src/config/browser-env.config";
 import { useCertificate } from "@src/context/CertificateProvider";
 import { useCustomWebSocket } from "@src/hooks/useCustomWebSocket";
 import { XTerm } from "@src/lib/XTerm";
@@ -13,7 +14,6 @@ import { useLeaseStatus } from "@src/queries/useLeaseQuery";
 import { useProviderList } from "@src/queries/useProvidersQuery";
 import { LeaseDto } from "@src/types/deployment";
 import { LeaseShellCode } from "@src/types/shell";
-import { PROVIDER_PROXY_URL_WS } from "@src/utils/constants";
 import { cn } from "@src/utils/styleUtils";
 import { UrlService } from "@src/utils/urlUtils";
 import { LeaseSelect } from "./LeaseSelect";
@@ -47,7 +47,7 @@ export const DeploymentLeaseShell: React.FunctionComponent<Props> = ({ leases })
   });
   const currentUrl = useRef<string | null>(null);
   const terminalRef = useRef<XTermRefType>(null);
-  const { sendJsonMessage } = useCustomWebSocket(PROVIDER_PROXY_URL_WS, {
+  const { sendJsonMessage } = useCustomWebSocket(browserEnvConfig.NEXT_PUBLIC_PROVIDER_PROXY_URL_WS, {
     onOpen: () => {
       console.log("opened");
     },

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

@@ -14,14 +14,14 @@ import { LinearLoadingSkeleton } from "@src/components/shared/LinearLoadingSkele
 import { MemoMonaco } from "@src/components/shared/MemoMonaco";
 import { SelectCheckbox } from "@src/components/shared/SelectCheckbox";
 import ViewPanel from "@src/components/shared/ViewPanel";
+import { browserEnvConfig } from "@src/config/browser-env.config";
 import { useBackgroundTask } from "@src/context/BackgroundTaskProvider";
 import { useCertificate } from "@src/context/CertificateProvider";
 import { useThrottledCallback } from "@src/hooks/useThrottle";
 import { useLeaseStatus } from "@src/queries/useLeaseQuery";
 import { useProviderList } from "@src/queries/useProvidersQuery";
 import { LeaseDto } from "@src/types/deployment";
 import { AnalyticsEvents } from "@src/utils/analytics";
-import { PROVIDER_PROXY_URL_WS } from "@src/utils/constants";
 import { cn } from "@src/utils/styleUtils";
 import { LeaseSelect } from "./LeaseSelect";
 
@@ -57,7 +57,7 @@ export const DeploymentLogs: React.FunctionComponent<Props> = ({ leases, selecte
   } = useLeaseStatus(providerInfo?.hostUri || "", selectedLease as LeaseDto, {
     enabled: false
   });
-  const { sendJsonMessage } = useWebSocket(PROVIDER_PROXY_URL_WS, {
+  const { sendJsonMessage } = useWebSocket(browserEnvConfig.NEXT_PUBLIC_PROVIDER_PROXY_URL_WS, {
     onOpen: () => {},
     onMessage: onLogReceived,
     onError: error => console.error("error", error),

apps/deploy-web/src/components/get-started/GetStartedStepper.tsx

@@ -12,10 +12,10 @@ import Link from "next/link";
 
 import { LoginRequiredLink } from "@src/components/user/LoginRequiredLink";
 import { ConnectManagedWalletButton } from "@src/components/wallet/ConnectManagedWalletButton";
-import { envConfig } from "@src/config/env.config";
+import { browserEnvConfig } from "@src/config/browser-env.config";
 import { useChainParam } from "@src/context/ChainParamProvider";
 import { useWallet } from "@src/context/WalletProvider";
-import { RouteStepKeys } from "@src/utils/constants";
+import { RouteStep } from "@src/types/route-steps.type";
 import { udenomToDenom } from "@src/utils/mathHelpers";
 import { uaktToAKT } from "@src/utils/priceUtils";
 import { cn } from "@src/utils/styleUtils";
@@ -91,11 +91,11 @@ export const GetStartedStepper: React.FunctionComponent = () => {
           onClick={() => (activeStep > 0 ? onStepClick(0) : null)}
           classes={{ label: cn("text-xl tracking-tight", { ["cursor-pointer hover:text-primary"]: activeStep > 0, ["!font-bold"]: activeStep === 0 }) }}
         >
-          {envConfig.NEXT_PUBLIC_BILLING_ENABLED ? "Trial / Billing" : "Billing"}
+          {browserEnvConfig.NEXT_PUBLIC_BILLING_ENABLED ? "Trial / Billing" : "Billing"}
         </StepLabel>
 
         <StepContent>
-          {envConfig.NEXT_PUBLIC_BILLING_ENABLED && !isWalletConnected && (
+          {browserEnvConfig.NEXT_PUBLIC_BILLING_ENABLED && !isWalletConnected && (
             <p className="text-muted-foreground">
               You can pay using either USD (fiat) or with crypto ($AKT or $USDC). To pay with USD click "Start Trial". To pay with crypto, click "Connect
               Wallet"
@@ -158,7 +158,7 @@ export const GetStartedStepper: React.FunctionComponent = () => {
                 <span>Billing is not set up</span>
               </div>
 
-              {envConfig.NEXT_PUBLIC_BILLING_ENABLED && <ConnectManagedWalletButton className="mr-2 w-full md:w-auto" />}
+              {browserEnvConfig.NEXT_PUBLIC_BILLING_ENABLED && <ConnectManagedWalletButton className="mr-2 w-full md:w-auto" />}
               <ConnectWalletButton />
             </div>
           )}
@@ -242,7 +242,7 @@ export const GetStartedStepper: React.FunctionComponent = () => {
           <div className="my-4 space-x-2">
             <Link
               className={cn("space-x-2", buttonVariants({ variant: "default" }))}
-              href={UrlService.newDeployment({ templateId: "hello-world", step: RouteStepKeys.editDeployment })}
+              href={UrlService.newDeployment({ templateId: "hello-world", step: RouteStep.editDeployment })}
             >
               <span>Deploy!</span>
               <Rocket className="rotate-45" />

apps/deploy-web/src/components/graph/Graph.tsx

@@ -5,9 +5,9 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import { ResponsiveLineCanvas } from "@nivo/line";
 import { useTheme } from "next-themes";
 
+import { SELECTED_RANGE_VALUES } from "@src/config/graph.config";
 import { GraphResponse, ISnapshotMetadata, ProviderSnapshots, Snapshots, SnapshotValue } from "@src/types";
 import { customColors } from "@src/utils/colors";
-import { selectedRangeValues } from "@src/utils/constants";
 import { nFormatter, roundDecimal } from "@src/utils/mathHelpers";
 
 interface IGraphProps {
@@ -135,19 +135,19 @@ const getTheme = (theme: string | undefined) => {
 
 const getGraphMetadataPerRange = (range: number): { size: number; border: number; xModulo: number } => {
   switch (range) {
-    case selectedRangeValues["7D"]:
+    case SELECTED_RANGE_VALUES["7D"]:
       return {
         size: 10,
         border: 3,
         xModulo: 1
       };
-    case selectedRangeValues["1M"]:
+    case SELECTED_RANGE_VALUES["1M"]:
       return {
         size: 6,
         border: 2,
         xModulo: 3
       };
-    case selectedRangeValues["ALL"]:
+    case SELECTED_RANGE_VALUES["ALL"]:
       return {
         size: 0,
         border: 1,

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

@@ -5,7 +5,6 @@ import { Spinner } from "@akashnetwork/ui/components";
 import dynamic from "next/dynamic";
 
 import { Footer } from "@src/components/layout/Footer";
-import { envConfig } from "@src/config/env.config";
 import { useLocalNotes } from "@src/context/LocalNoteProvider";
 import { useSettings } from "@src/context/SettingsProvider";
 import { useWallet } from "@src/context/WalletProvider";