refactor: injects browserEnvConfig from DI container

apps/api/env/.env.functional.test

@@ -10,7 +10,6 @@ FEE_ALLOWANCE_REFILL_AMOUNT=5000000
 FEE_ALLOWANCE_REFILL_THRESHOLD=500000
 DEPLOYMENT_GRANT_DENOM=uakt
 LOG_LEVEL=debug
-BILLING_ENABLED=true
 ANONYMOUS_USER_TOKEN_SECRET=ANONYMOUS_USER_TOKEN_SECRET
 STRIPE_SECRET_KEY=STRIPE_SECRET_KEY
 STRIPE_PRODUCT_ID=STRIPE_PRODUCT_ID

apps/api/env/.env.production

@@ -5,11 +5,10 @@ AUTH0_M2M_DOMAIN=cloudmos-prod.us.auth0.com
 PORT=80
 SERVER_ORIGIN=https://console-api.akash.network
 DRIZZLE_MIGRATIONS_FOLDER=./dist/drizzle
-BILLING_ENABLED=true
 PROVIDER_PROXY_URL=https://console-provider-proxy.akash.network
 
 AMPLITUDE_SAMPLING=1
 
 DEPLOY_WEB_BASE_URL=https://console.akash.network
 CONSOLE_WEB_PAYMENT_LINK=${DEPLOY_WEB_BASE_URL}/payment
-STRIPE_CHECKOUT_REDIRECT_URL=${DEPLOY_WEB_BASE_URL}
+STRIPE_CHECKOUT_REDIRECT_URL=${DEPLOY_WEB_BASE_URL}

apps/api/env/.env.sample

@@ -18,7 +18,6 @@ AUTH0_ISSUER=
 AUTH0_JWKS_URI=
 AUTH0_SECRET=
 AUTH0_CLIENT_ID=
-BILLING_ENABLED=
 DEPLOYMENT_ALLOWANCE_REFILL_AMOUNT=
 DEPLOYMENT_ALLOWANCE_REFILL_THRESHOLD=
 DEPLOYMENT_ENV=

apps/api/env/.env.staging

@@ -4,7 +4,6 @@ AUTH0_JWKS_URI=https://dev-5aprb0lr.us.auth0.com/.well-known/jwks.json
 AUTH0_AUDIENCE=https://console-api.akash.network
 AUTH0_ISSUER=https://dev-5aprb0lr.us.auth0.com/
 AUTH0_M2M_DOMAIN=dev-5aprb0lr.us.auth0.com
-BILLING_ENABLED=true
 AMPLITUDE_SAMPLING=1
 DEPLOY_WEB_BASE_URL=https://console-beta.akash.network
 CONSOLE_WEB_PAYMENT_LINK=${DEPLOY_WEB_BASE_URL}/payment

apps/api/env/.env.unit.test

@@ -14,7 +14,6 @@ FEE_ALLOWANCE_REFILL_AMOUNT=5000000
 FEE_ALLOWANCE_REFILL_THRESHOLD=500000
 DEPLOYMENT_GRANT_DENOM=uakt
 LOG_LEVEL=debug
-BILLING_ENABLED=true
 ANONYMOUS_USER_TOKEN_SECRET=ANONYMOUS_USER_TOKEN_SECRET
 STRIPE_SECRET_KEY=STRIPE_SECRET_KEY
 STRIPE_PRODUCT_ID=STRIPE_PRODUCT_ID

apps/deploy-web/.env.local.sample

@@ -9,7 +9,6 @@ AUTH0_SCOPE=openid profile email
 AUTH0_SECRET=random_super_secret
 AUTH0_LOCAL_ENABLED=true
 
-NEXT_PUBLIC_BILLING_ENABLED=true
 NEXT_PUBLIC_MANAGED_WALLET_NETWORK_ID=sandbox
 NEXT_PUBLIC_MANAGED_WALLET_DENOM=uakt
 

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

@@ -13,7 +13,6 @@ import { Edit, MoreHoriz, NavArrowLeft, Refresh, Upload, XmarkSquare } from "ico
 import { useRouter } from "next/navigation";
 
 import { CustomDropdownLinkItem } from "@src/components/shared/CustomDropdownLinkItem";
-import { browserEnvConfig } from "@src/config/browser-env.config";
 import { useLocalNotes } from "@src/context/LocalNoteProvider";
 import { useServices } from "@src/context/ServicesProvider";
 import { useWallet } from "@src/context/WalletProvider";
@@ -48,7 +47,7 @@ export const DeploymentDetailTopBar: React.FunctionComponent<Props> = ({
   deployment,
   leases
 }) => {
-  const { analyticsService } = useServices();
+  const { analyticsService, publicConfig } = useServices();
   const { changeDeploymentName, getDeploymentData, getDeploymentName } = useLocalNotes();
   const { udenomToUsd } = usePricing();
   const router = useRouter();
@@ -232,7 +231,7 @@ export const DeploymentDetailTopBar: React.FunctionComponent<Props> = ({
                     <div className="space-y-2">
                       <div>
                         <div>
-                          Estimated amount: ${udenomToUsd(deploymentSetting.data?.estimatedTopUpAmount || 0, browserEnvConfig.NEXT_PUBLIC_MANAGED_WALLET_DENOM)}
+                          Estimated amount: ${udenomToUsd(deploymentSetting.data?.estimatedTopUpAmount || 0, publicConfig.NEXT_PUBLIC_MANAGED_WALLET_DENOM)}
                         </div>
                         <div>Check period: {formatDuration(intervalToDuration({ start: 0, end: deploymentSetting.data?.topUpFrequencyMs || 0 }))}</div>
                       </div>

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

@@ -13,7 +13,6 @@ import Link from "next/link";
 
 import { AddFundsLink } from "@src/components/user/AddFundsLink";
 import { ConnectManagedWalletButton } from "@src/components/wallet/ConnectManagedWalletButton";
-import { browserEnvConfig } from "@src/config/browser-env.config";
 import { useWallet } from "@src/context/WalletProvider";
 import { useChainParam } from "@src/hooks/useChainParam/useChainParam";
 import { useCustomUser } from "@src/hooks/useCustomUser";
@@ -76,11 +75,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 }) }}
         >
-          {browserEnvConfig.NEXT_PUBLIC_BILLING_ENABLED ? "Trial / Billing" : "Billing"}
+          Trial / Billing
         </StepLabel>
 
         <StepContent>
-          {browserEnvConfig.NEXT_PUBLIC_BILLING_ENABLED && !isWalletConnected && (
+          {!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"
@@ -143,7 +142,7 @@ export const GetStartedStepper: React.FunctionComponent = () => {
               </div>
 
               <div className="flex items-center gap-2">
-                {browserEnvConfig.NEXT_PUBLIC_BILLING_ENABLED && !isSignedInWithTrial && <ConnectManagedWalletButton className="mr-2 w-full md:w-auto" />}
+                {!isSignedInWithTrial && <ConnectManagedWalletButton className="mr-2 w-full md:w-auto" />}
                 <ConnectWalletButton />
 
                 {isSignedInWithTrial && !user && (

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

@@ -2,9 +2,10 @@
 import { useReportWebVitals } from "next/web-vitals";
 import { event, GoogleAnalytics as GAnalytics } from "nextjs-google-analytics";
 
-import { browserEnvConfig } from "@src/config/browser-env.config";
+import { useServices } from "@src/context/ServicesProvider";
 
 export default function GoogleAnalytics() {
+  const { publicConfig } = useServices();
   useReportWebVitals(({ id, name, label, value }) => {
     event(name, {
       category: label === "web-vital" ? "Web Vitals" : "Next.js custom metric",
@@ -13,5 +14,5 @@ export default function GoogleAnalytics() {
       nonInteraction: true // avoids affecting bounce rate.
     });
   });
-  return <>{!!browserEnvConfig.NEXT_PUBLIC_GA_ENABLED && <GAnalytics trackPageViews />}</>;
+  return <>{!!publicConfig.NEXT_PUBLIC_GA_ENABLED && <GAnalytics trackPageViews />}</>;
 }

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

@@ -1,15 +1,16 @@
 "use client";
 import { useEffect } from "react";
 
-import { browserEnvConfig } from "@src/config/browser-env.config";
+import { useServices } from "@src/context/ServicesProvider";
 import { addScriptToBody } from "@src/utils/domUtils";
 
 export const TrackingScripts = () => {
-  const isProduction = browserEnvConfig.NEXT_PUBLIC_NODE_ENV === "production";
+  const { publicConfig } = useServices();
+  const isProduction = publicConfig.NEXT_PUBLIC_NODE_ENV === "production";
 
   useEffect(() => {
-    const shouldShowTracking = browserEnvConfig.NEXT_PUBLIC_TRACKING_ENABLED;
-    const shouldShowGrowthChannel = browserEnvConfig.NEXT_PUBLIC_GROWTH_CHANNEL_TRACKING_ENABLED;
+    const shouldShowTracking = publicConfig.NEXT_PUBLIC_TRACKING_ENABLED;
+    const shouldShowGrowthChannel = publicConfig.NEXT_PUBLIC_GROWTH_CHANNEL_TRACKING_ENABLED;
 
     if (isProduction && shouldShowTracking) {
       // Google Tag Manager
@@ -21,14 +22,14 @@ export const TrackingScripts = () => {
           new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
           j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
           'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-          })(window,document,'script','dataLayer','${browserEnvConfig.NEXT_PUBLIC_GTM_ID}');
+          })(window,document,'script','dataLayer','${publicConfig.NEXT_PUBLIC_GTM_ID}');
         `
       });
 
       // GTM noscript fallback
       const gtmNoscript = document.createElement("noscript");
       const gtmIframe = document.createElement("iframe");
-      gtmIframe.src = `https://www.googletagmanager.com/ns.html?id=${browserEnvConfig.NEXT_PUBLIC_GTM_ID}`;
+      gtmIframe.src = `https://www.googletagmanager.com/ns.html?id=${publicConfig.NEXT_PUBLIC_GTM_ID}`;
       gtmIframe.height = "0";
       gtmIframe.width = "0";
       gtmIframe.style.display = "none";

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

@@ -8,7 +8,6 @@ import { NavArrowDown, Wallet } from "iconoir-react";
 import { useAtom } from "jotai";
 
 import { ConnectManagedWalletButton } from "@src/components/wallet/ConnectManagedWalletButton";
-import { browserEnvConfig } from "@src/config/browser-env.config";
 import { useWallet } from "@src/context/WalletProvider";
 import { getSplitText } from "@src/hooks/useShortText";
 import { useWalletBalance } from "@src/hooks/useWalletBalance";
@@ -17,8 +16,6 @@ import { ConnectWalletButton } from "../wallet/ConnectWalletButton";
 import { CustodialWalletPopup } from "../wallet/CustodialWalletPopup";
 import { ManagedWalletPopup } from "../wallet/ManagedWalletPopup";
 
-const withBilling = browserEnvConfig.NEXT_PUBLIC_BILLING_ENABLED;
-
 export function WalletStatus() {
   const { walletName, isWalletLoaded, isWalletConnected, isManaged, isWalletLoading, isTrialing } = useWallet();
   const { balance: walletBalance, isLoading: isWalletBalanceLoading } = useWalletBalance();
@@ -84,7 +81,7 @@ export function WalletStatus() {
                   >
                     <div>
                       {!isManaged && <CustodialWalletPopup walletBalance={walletBalance} />}
-                      {withBilling && isManaged && <ManagedWalletPopup walletBalance={walletBalance} />}
+                      {isManaged && <ManagedWalletPopup walletBalance={walletBalance} />}
                     </div>
                   </ClickAwayListener>
                 </DropdownMenuContent>
@@ -93,7 +90,7 @@ export function WalletStatus() {
           </div>
         ) : (
           <div className="w-full">
-            {withBilling && !isSignedInWithTrial && <ConnectManagedWalletButton className="mb-2 mr-2 w-full md:mb-0 md:w-auto" />}
+            {!isSignedInWithTrial && <ConnectManagedWalletButton className="mb-2 mr-2 w-full md:mb-0 md:w-auto" />}
             <ConnectWalletButton className="w-full md:w-auto" />
           </div>
         )

apps/deploy-web/src/components/remote-deploy/update/RemoteDeployUpdate.tsx

@@ -6,9 +6,9 @@ import { useSnackbar } from "notistack";
 
 import { EnvFormModal } from "@src/components/sdl/EnvFormModal/EnvFormModal";
 import { EnvVarList } from "@src/components/sdl/EnvVarList";
-import { browserEnvConfig } from "@src/config/browser-env.config";
 import { CURRENT_SERVICE, protectedEnvironmentVariables } from "@src/config/remote-deploy.config";
 import { SdlBuilderProvider } from "@src/context/SdlBuilderProvider";
+import { useServices } from "@src/context/ServicesProvider";
 import { EnvVarUpdater } from "@src/services/remote-deploy/remote-deployment-controller.service";
 import { tokens } from "@src/store/remoteDeployStore";
 import type { SdlBuilderFormValuesType, ServiceType } from "@src/types";
@@ -27,6 +27,7 @@ const RemoteDeployUpdate = ({ sdlString, onManifestChange }: { sdlString: string
   const { control, watch, setValue } = useForm<SdlBuilderFormValuesType>({ defaultValues: { services: [defaultService] } });
   const { fields: services } = useFieldArray({ control, name: "services", keyName: "id" });
   const envVarUpdater = useMemo(() => new EnvVarUpdater(services), [services]);
+  const { publicConfig } = useServices();
 
   useEffect(() => {
     const { unsubscribe }: any = watch(data => {
@@ -60,7 +61,7 @@ const RemoteDeployUpdate = ({ sdlString, onManifestChange }: { sdlString: string
       }
     }
   };
-  return services?.[0]?.image.startsWith(browserEnvConfig.NEXT_PUBLIC_CI_CD_IMAGE_NAME) && services?.[0]?.env && services?.[0]?.env?.length > 0 ? (
+  return services?.[0]?.image.startsWith(publicConfig.NEXT_PUBLIC_CI_CD_IMAGE_NAME) && services?.[0]?.env && services?.[0]?.env?.length > 0 ? (
     <div className="flex flex-col gap-6 rounded border bg-card px-4 py-6 md:px-6">
       <div className="flex flex-col gap-3 rounded border bg-card px-6 py-6 text-card-foreground">
         <div className="flex items-center justify-between gap-5">

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

@@ -4,7 +4,7 @@ import { Badge, CustomTooltip } from "@akashnetwork/ui/components";
 import { cn } from "@akashnetwork/ui/utils";
 import { Info } from "lucide-react";
 
-import { browserEnvConfig } from "@src/config/browser-env.config";
+import { useServices } from "@src/context/ServicesProvider";
 import { useTrialDeploymentTimeRemaining } from "@src/hooks/useTrialDeploymentTimeRemaining";
 import { TrialDeploymentTooltip } from "./TrialDeploymentTooltip";
 
@@ -24,7 +24,8 @@ export const DEPENDENCIES = {
 };
 
 export function TrialDeploymentBadge({ createdHeight, trialDurationHours, averageBlockTime = 6, className, dependencies: d = DEPENDENCIES }: Props) {
-  const trialDuration = trialDurationHours ?? browserEnvConfig.NEXT_PUBLIC_TRIAL_DEPLOYMENTS_DURATION_HOURS;
+  const { publicConfig } = useServices();
+  const trialDuration = trialDurationHours ?? publicConfig.NEXT_PUBLIC_TRIAL_DEPLOYMENTS_DURATION_HOURS;
 
   const { isExpired, timeRemainingText } = d.useTrialTimeRemaining({
     createdHeight,

apps/deploy-web/src/components/user/UserProviders/UserProviders.spec.tsx

@@ -1,7 +1,6 @@
 import type { AxiosInstance } from "axios";
 import { mock } from "jest-mock-extended";
 
-import type { BrowserEnvConfig } from "@src/config/browser-env.config";
 import type { AnalyticsService } from "@src/services/analytics/analytics.service";
 import type { UserTracker } from "@src/services/user-tracker/user-tracker.service";
 import type { CustomUserProfile } from "@src/types/user";
@@ -66,11 +65,7 @@ describe(UserProviders.name, () => {
           }) as AxiosInstance["get"]
         }) as unknown as AxiosInstance,
       userTracker: () => input?.userTracker || mock<UserTracker>(),
-      analyticsService: () => input?.analyticsService || mock<AnalyticsService>(),
-      appConfig: () =>
-        mock<BrowserEnvConfig>({
-          NEXT_PUBLIC_BILLING_ENABLED: true
-        })
+      analyticsService: () => input?.analyticsService || mock<AnalyticsService>()
     };
     let id = 0;
     const genContent = () => (

apps/deploy-web/src/components/user/UserProviders/UserProviders.tsx

@@ -11,17 +11,13 @@ import type { FCWithChildren } from "@src/types/component";
  * which is a client only component.
  */
 export const UserProviders: FCWithChildren = ({ children }) => {
-  const { internalApiHttpClient, publicConfig } = useServices();
-  return publicConfig.NEXT_PUBLIC_BILLING_ENABLED ? (
+  const { internalApiHttpClient } = useServices();
+  return (
     <UserProvider fetcher={url => internalApiHttpClient.get(url).then(response => response.data)}>
       <UserInitLoader>
         <UserTracker>{children}</UserTracker>
       </UserInitLoader>
     </UserProvider>
-  ) : (
-    <UserProvider>
-      <UserTracker>{children}</UserTracker>
-    </UserProvider>
   );
 };
 

apps/deploy-web/src/components/wallet/CustodialWalletPopup.tsx

@@ -7,7 +7,6 @@ import { useAtom } from "jotai";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-import { browserEnvConfig } from "@src/config/browser-env.config";
 import { UAKT_DENOM } from "@src/config/denom.config";
 import { useWallet } from "@src/context/WalletProvider";
 import { useCustomUser } from "@src/hooks/useCustomUser";
@@ -23,8 +22,6 @@ interface CustodialWalletPopupProps extends React.PropsWithChildren {
   walletBalance?: WalletBalance | null;
 }
 
-const withBilling = browserEnvConfig.NEXT_PUBLIC_BILLING_ENABLED;
-
 export const CustodialWalletPopup: React.FC<CustodialWalletPopupProps> = ({ walletBalance }) => {
   const { address, logout } = useWallet();
   const router = useRouter();
@@ -85,18 +82,14 @@ export const CustodialWalletPopup: React.FC<CustodialWalletPopupProps> = ({ wall
           <LogOut />
           <span>Disconnect Wallet</span>
         </Button>
-        {withBilling && (
-          <>
-            <Separator className="my-4" />
+        <Separator className="my-4" />
 
-            {isSignedInWithTrial && !user ? (
-              <Link className={cn(buttonVariants({ variant: "outline" }), "w-full space-x-2")} href={UrlService.newLogin()}>
-                Sign in for USD Payments
-              </Link>
-            ) : (
-              <ConnectManagedWalletButton className="w-full" />
-            )}
-          </>
+        {isSignedInWithTrial && !user ? (
+          <Link className={cn(buttonVariants({ variant: "outline" }), "w-full space-x-2")} href={UrlService.newLogin()}>
+            Sign in for USD Payments
+          </Link>
+        ) : (
+          <ConnectManagedWalletButton className="w-full" />
         )}
       </div>
     </div>

apps/deploy-web/src/config/browser-env.config.ts

@@ -9,7 +9,6 @@ export const browserEnvConfig = validateStaticEnvVars({
   NEXT_PUBLIC_MASTER_WALLET_ADDRESS: process.env.NEXT_PUBLIC_MASTER_WALLET_ADDRESS,
   NEXT_PUBLIC_UAKT_TOP_UP_MASTER_WALLET_ADDRESS: process.env.NEXT_PUBLIC_UAKT_TOP_UP_MASTER_WALLET_ADDRESS,
   NEXT_PUBLIC_USDC_TOP_UP_MASTER_WALLET_ADDRESS: process.env.NEXT_PUBLIC_USDC_TOP_UP_MASTER_WALLET_ADDRESS,
-  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_MANAGED_WALLET_DENOM: process.env.NEXT_PUBLIC_MANAGED_WALLET_DENOM,
   NEXT_PUBLIC_DEFAULT_INITIAL_DEPOSIT: process.env.NEXT_PUBLIC_DEFAULT_INITIAL_DEPOSIT,

apps/deploy-web/src/config/env-config.schema.ts

@@ -7,7 +7,6 @@ export const browserEnvSchema = z.object({
   NEXT_PUBLIC_MASTER_WALLET_ADDRESS: z.string(),
   NEXT_PUBLIC_UAKT_TOP_UP_MASTER_WALLET_ADDRESS: z.string(),
   NEXT_PUBLIC_USDC_TOP_UP_MASTER_WALLET_ADDRESS: z.string(),
-  NEXT_PUBLIC_BILLING_ENABLED: coercedBoolean().optional().default("false"),
   NEXT_PUBLIC_MANAGED_WALLET_NETWORK_ID: networkId.optional().default("mainnet"),
   NEXT_PUBLIC_DEFAULT_NETWORK_ID: networkId.optional().default("mainnet"),
   NEXT_PUBLIC_MANAGED_WALLET_DENOM: z.enum(["uakt", "usdc"]).optional().default("usdc"),

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

@@ -3,9 +3,9 @@ import { useEffect, useState } from "react";
 import { FlagProvider as FlagProviderOriginal, useUnleashClient } from "@unleash/nextjs";
 
 import { Loading } from "@src/components/layout/Layout";
-import { browserEnvConfig } from "@src/config/browser-env.config";
 import { useUser } from "@src/hooks/useUser";
 import type { FCWithChildren } from "@src/types/component";
+import { useServices } from "../ServicesProvider";
 
 const COMPONENTS = {
   FlagProvider: FlagProviderOriginal,
@@ -16,8 +16,9 @@ const COMPONENTS = {
 export type Props = { components?: typeof COMPONENTS };
 
 export const UserAwareFlagProvider: FCWithChildren<Props> = ({ children, components: c = COMPONENTS }) => {
+  const { publicConfig } = useServices();
   const { user } = c.useUser();
-  const isEnableAll = browserEnvConfig.NEXT_PUBLIC_UNLEASH_ENABLE_ALL;
+  const isEnableAll = publicConfig.NEXT_PUBLIC_UNLEASH_ENABLE_ALL;
 
   return (
     <c.FlagProvider