feat(billing): adjust some UI features for managed wallet users

.dockerignore

@@ -8,23 +8,12 @@
 **/.env.*.local
 **/.env.*.test
 
-apps/deploy-web/.env
-apps/deploy-web/.env.*
-
-apps/indexer/.env
-apps/indexer/.env.*
-
-apps/landing/.env
-apps/landing/.env.*
-
-apps/provider-console/.env
-apps/provider-console/.env.*
-
-apps/provider-proxy/.env
-apps/provider-proxy/.env.*
-
-apps/stats-web/.env
-apps/stats-web/.env.*
+apps/deploy-web/.env*
+apps/indexer/.env*
+apps/landing/.env*
+apps/provider-console/.env*
+apps/provider-proxy/.env*
+apps/stats-web/.env*
 
 **/.next
 *.md

apps/api/env/.env

@@ -1,8 +1,8 @@
 AKASHLYTICS_CORS_WEBSITE_URLS=https://cloudmos.io,https://www.cloudmos.io,http://debug.cloudmos.io,https://deploy.cloudmos.io,https://beta.cloudmos.io,https://stats.akash.network,https://console.akash.network,https://akash.network,https://akash.hooman.digital,http://localhost:3000,https://beta2.cloudmos.io,https://beta3.cloudmos.io,https://akashconsole.vercel.app
 WebsiteUrl=https://cloudmos.io
-TRIAL_DEPLOYMENT_ALLOWANCE_AMOUNT=6000000
-DEPLOYMENT_ALLOWANCE_REFILL_AMOUNT=6000000
-DEPLOYMENT_ALLOWANCE_REFILL_THRESHOLD=600000
+TRIAL_DEPLOYMENT_ALLOWANCE_AMOUNT=10000000
+DEPLOYMENT_ALLOWANCE_REFILL_AMOUNT=10000000
+DEPLOYMENT_ALLOWANCE_REFILL_THRESHOLD=1000000
 TRIAL_FEES_ALLOWANCE_AMOUNT=1000000
 FEE_ALLOWANCE_REFILL_AMOUNT=1000000
 FEE_ALLOWANCE_REFILL_THRESHOLD=100000

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

@@ -41,7 +41,6 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
     refetch: getDeploymentDetail,
     error: deploymentError
   } = useDeploymentDetail(address, dseq, {
-    enabled: false,
     onSuccess: _deploymentDetail => {
       if (_deploymentDetail) {
         getLeases();

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

@@ -33,6 +33,7 @@ export const DeploymentDetailTopBar: React.FunctionComponent<Props> = ({ address
   const storageDeploymentData = getDeploymentData(deployment?.dseq);
   const deploymentName = getDeploymentName(deployment?.dseq);
   const previousRoute = usePreviousRoute();
+  const wallet = useWallet();
 
   function handleBackClick() {
     if (previousRoute) {
@@ -117,9 +118,11 @@ export const DeploymentDetailTopBar: React.FunctionComponent<Props> = ({ address
               </DropdownMenuContent>
             </DropdownMenu>
 
-            <Button variant="default" className="ml-2 whitespace-nowrap" onClick={() => setIsDepositingDeployment(true)} size="sm">
-              Add funds
-            </Button>
+            {!wallet.isManaged && (
+              <Button variant="default" className="ml-2 whitespace-nowrap" onClick={() => setIsDepositingDeployment(true)} size="sm">
+                Add funds
+              </Button>
+            )}
           </div>
         )}
 

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

@@ -53,7 +53,7 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
   const [open, setOpen] = useState(false);
   const [isDepositingDeployment, setIsDepositingDeployment] = useState(false);
   const { changeDeploymentName, getDeploymentData } = useLocalNotes();
-  const { address, signAndBroadcastTx } = useWallet();
+  const { address, signAndBroadcastTx, isManaged: isManagedWallet } = useWallet();
   const isActive = deployment.state === "active";
   const { data: leases, isLoading: isLoadingLeases } = useAllLeases(address, { enabled: !!deployment && isActive });
   const filteredLeases = leases?.filter(l => l.dseq === deployment.dseq);
@@ -194,9 +194,13 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
                   title={
                     <>
                       Your deployment will close soon,{" "}
-                      <a href="#" onClick={onDepositClicked}>
-                        Add Funds
-                      </a>{" "}
+                      {isManagedWallet ? (
+                        "Add funds"
+                      ) : (
+                        <a href="#" onClick={onDepositClicked}>
+                          Add Funds
+                        </a>
+                      )}{" "}
                       to keep it running.
                     </>
                   }
@@ -306,7 +310,7 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
                 >
                   <ClickAwayListener onClickAway={() => setOpen(false)}>
                     <div>
-                      {isActive && (
+                      {isActive && !isManagedWallet && (
                         <CustomDropdownLinkItem onClick={onDepositClicked} icon={<Plus fontSize="small" />}>
                           Add funds
                         </CustomDropdownLinkItem>

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

@@ -38,7 +38,7 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
   const [isSendingManifest, setIsSendingManifest] = useState(false);
   const [showOutsideDeploymentMessage, setShowOutsideDeploymentMessage] = useState(false);
   const { settings } = useSettings();
-  const { address, signAndBroadcastTx } = useWallet();
+  const { address, signAndBroadcastTx, isManaged: isManagedWallet } = useWallet();
   const { data: providers } = useProviderList();
   const { localCert, isLocalCertMatching, createCertificate, isCreatingCert } = useCertificate();
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
@@ -139,10 +139,12 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
 
         saveDeploymentManifest(dd.deploymentId.dseq, editedManifest, dd.version, address);
 
-        sendManifestKey = enqueueSnackbar(<Snackbar title="Deploying! 🚀" subTitle="Please wait a few seconds..." showLoading />, {
-          variant: "info",
-          autoHideDuration: null
-        });
+        sendManifestKey =
+          !isManagedWallet &&
+          enqueueSnackbar(<Snackbar title="Deploying! 🚀" subTitle="Please wait a few seconds..." showLoading />, {
+            variant: "info",
+            autoHideDuration: null
+          });
 
         const leaseProviders = leases.map(lease => lease.provider).filter((v, i, s) => s.indexOf(v) === i);
 
@@ -158,14 +160,19 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
 
         setIsSendingManifest(false);
 
-        closeSnackbar(sendManifestKey);
+        if (sendManifestKey) {
+          closeSnackbar(sendManifestKey);
+        }
 
         closeManifestEditor();
       }
     } catch (error) {
       console.error(error);
       setIsSendingManifest(false);
-      closeSnackbar(sendManifestKey);
+
+      if (sendManifestKey) {
+        closeSnackbar(sendManifestKey);
+      }
     }
   }
 

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

@@ -1,15 +1,17 @@
 "use client";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { MdRestartAlt } from "react-icons/md";
 import { Button, buttonVariants, CustomTooltip, Spinner } from "@akashnetwork/ui/components";
 import Step from "@mui/material/Step";
 import StepContent from "@mui/material/StepContent";
 import StepLabel from "@mui/material/StepLabel";
 import Stepper from "@mui/material/Stepper";
-import { Check, Rocket, WarningCircle, XmarkCircleSolid } from "iconoir-react";
+import { Check, CreditCard, Rocket, WarningCircle, XmarkCircleSolid } from "iconoir-react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 
+import { ConnectManagedWalletButton } from "@src/components/wallet/ConnectManagedWalletButton";
+import { envConfig } from "@src/config/env.config";
 import { useChainParam } from "@src/context/ChainParamProvider";
 import { useWallet } from "@src/context/WalletProvider";
 import { RouteStepKeys } from "@src/utils/constants";
@@ -45,7 +47,7 @@ const LiquidityModal = dynamic(
 
 export const GetStartedStepper: React.FunctionComponent = () => {
   const [activeStep, setActiveStep] = useState(0);
-  const { isWalletConnected, walletBalances, address, refreshBalances } = useWallet();
+  const { isWalletConnected, walletBalances, address, refreshBalances, isManaged: isManagedWallet, isTrialing } = useWallet();
   const { minDeposit } = useChainParam();
   const aktBalance = walletBalances ? uaktToAKT(walletBalances.uakt) : 0;
   const usdcBalance = walletBalances ? udenomToDenom(walletBalances.usdc) : 0;
@@ -88,41 +90,73 @@ 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 }) }}
         >
-          Wallet
+          {envConfig.NEXT_PUBLIC_BILLING_ENABLED ? "Trial / Billing" : "Billing"}
         </StepLabel>
 
         <StepContent>
-          <p className="text-muted-foreground">
-            You need at least {minDeposit.akt} AKT or {minDeposit.usdc} USDC in your wallet to deploy on Akash. If you don't have {minDeposit.akt} AKT or{" "}
-            {minDeposit.usdc} USDC, you can switch to the sandbox or ask help in our <ExternalLink href="https://discord.gg/akash" text="Discord" />.
-          </p>
+          {envConfig.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, either click "Start Trial" or "Add Credit Card". To pay with
+              crypto, click "Connect Wallet"
+            </p>
+          )}
+
+          {isWalletConnected && !isManagedWallet && (
+            <div className="my-4 flex items-center space-x-2">
+              <Check className="text-green-600" />
+              <span>Wallet is installed</span>{" "}
+            </div>
+          )}
+
+          {!isManagedWallet && (
+            <p className="text-muted-foreground">
+              You need at least {minDeposit.akt} AKT or {minDeposit.usdc} USDC in your wallet to deploy on Akash. If you don't have {minDeposit.akt} AKT or{" "}
+              {minDeposit.usdc} USDC, you can switch to the sandbox or ask help in our <ExternalLink href="https://discord.gg/akash" text="Discord" />.
+            </p>
+          )}
 
           <div className="my-4 flex items-center space-x-4">
             <Button variant="default" onClick={handleNext}>
               Next
             </Button>
-            <Link className={cn(buttonVariants({ variant: "text" }))} href={UrlService.getStartedWallet()}>
-              Learn how
-            </Link>
+            {!isManagedWallet && (
+              <Link className={cn(buttonVariants({ variant: "text" }))} href={UrlService.getStartedWallet()}>
+                Learn how
+              </Link>
+            )}
           </div>
 
-          <div className="my-4 flex items-center space-x-2">
-            <Check className="text-green-600" />
-            <span>Wallet is installed</span>
-          </div>
+          {isWalletConnected && isTrialing && (
+            <div className="my-4 flex items-center space-x-2">
+              <Check className="text-green-600" />
+              <span>Trialing</span>
+            </div>
+          )}
 
-          {isWalletConnected ? (
+          {isWalletConnected && isManagedWallet && !isTrialing && (
             <div className="my-4 flex items-center space-x-2">
               <Check className="text-green-600" />
-              <span>Wallet is connected</span>
+              <span>Billing is set up</span>
             </div>
-          ) : (
+          )}
+
+          {!isWalletConnected && (
             <div>
               <div className="my-4 flex items-center space-x-2">
                 <XmarkCircleSolid className="text-destructive" />
-                <span>Wallet is not connected</span>
+                <span>Billing is not set up</span>
               </div>
 
+              {envConfig.NEXT_PUBLIC_BILLING_ENABLED && (
+                <>
+                  <ConnectManagedWalletButton className="mr-2 w-full md:w-auto" />
+
+                  <Button variant="outline" className="mr-2 border-primary">
+                    <CreditCard className="text-xs" />
+                    <span className="m-2 whitespace-nowrap">Add Credit Card</span>
+                  </Button>
+                </>
+              )}
               <ConnectWalletButton />
             </div>
           )}
@@ -143,10 +177,16 @@ export const GetStartedStepper: React.FunctionComponent = () => {
                   <WarningCircle className="text-warning" />
                 </CustomTooltip>
               )}
-              <span>
-                You have <strong>{aktBalance}</strong> AKT and <strong>{usdcBalance}</strong> USDC
-              </span>
-              <LiquidityModal address={address} aktBalance={aktBalance} refreshBalances={refreshBalances} />
+              {isManagedWallet ? (
+                <span>
+                  You have <strong>${usdcBalance}</strong>
+                </span>
+              ) : (
+                <span>
+                  You have <strong>{aktBalance}</strong> AKT and <strong>{usdcBalance}</strong> USDC
+                </span>
+              )}
+              {!isManagedWallet && <LiquidityModal address={address} aktBalance={aktBalance} refreshBalances={refreshBalances} />}
             </div>
           )}
         </StepContent>
@@ -156,7 +196,12 @@ export const GetStartedStepper: React.FunctionComponent = () => {
         <StepLabel
           StepIconComponent={QontoStepIcon}
           onClick={() => onStepClick(1)}
-          classes={{ label: cn("text-xl tracking-tight", { ["cursor-pointer hover:text-primary"]: activeStep > 1, ["!font-bold"]: activeStep === 1 }) }}
+          classes={{
+            label: cn("text-xl tracking-tight", {
+              ["cursor-pointer hover:text-primary"]: activeStep > 1,
+              ["!font-bold"]: activeStep === 1
+            })
+          }}
         >
           Docker container
         </StepLabel>