fix: force user onboarding

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

@@ -23,13 +23,11 @@ import { LinkTo } from "@src/components/shared/LinkTo";
 import { useLocalNotes } from "@src/context/LocalNoteProvider";
 import { useSettings } from "@src/context/SettingsProvider";
 import { useWallet } from "@src/context/WalletProvider";
-import { useCustomUser } from "@src/hooks/useCustomUser";
 import { useListSelection } from "@src/hooks/useListSelection/useListSelection";
 import { useManagedDeploymentConfirm } from "@src/hooks/useManagedDeploymentConfirm";
 import { useDeploymentList } from "@src/queries/useDeploymentQuery";
 import { useProviderList } from "@src/queries/useProvidersQuery";
 import sdlStore from "@src/store/sdlStore";
-import walletStore from "@src/store/walletStore";
 import type { DeploymentDto, NamedDeploymentDto } from "@src/types/deployment";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
 import { UrlService } from "@src/utils/urlUtils";
@@ -59,8 +57,6 @@ export const DeploymentList: React.FunctionComponent = () => {
   const pageCount = Math.ceil(orderedDeployments.length / pageSize);
   const [, setDeploySdl] = useAtom(sdlStore.deploySdl);
   const { closeDeploymentConfirm } = useManagedDeploymentConfirm();
-  const [isSignedInWithTrial] = useAtom(walletStore.isSignedInWithTrial);
-  const { user } = useCustomUser();
 
   const { selectedItemIds, selectItem, clearSelection } = useListSelection<string>({
     ids: currentPageDeployments.map(deployment => deployment.dseq)
@@ -217,8 +213,6 @@ export const DeploymentList: React.FunctionComponent = () => {
           onDeployClick={onDeployClick}
           hasDeployments={Boolean(deployments && deployments.length > 0)}
           isWalletConnected={isWalletConnected}
-          isSignedInWithTrial={isSignedInWithTrial}
-          hasUser={Boolean(user)}
           showTemplatesButton
         />
       )}

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

@@ -8,23 +8,19 @@ import StepContent from "@mui/material/StepContent";
 import StepLabel from "@mui/material/StepLabel";
 import Stepper from "@mui/material/Stepper";
 import { Check, HandCard, Rocket, WarningCircle, XmarkCircleSolid } from "iconoir-react";
-import { useAtom } from "jotai";
 import Link from "next/link";
 
 import { AddFundsLink } from "@src/components/user/AddFundsLink";
-import { ConnectManagedWalletButton } from "@src/components/wallet/ConnectManagedWalletButton";
 import { useWallet } from "@src/context/WalletProvider";
 import { useChainParam } from "@src/hooks/useChainParam/useChainParam";
-import { useCustomUser } from "@src/hooks/useCustomUser";
 import { useWalletBalance } from "@src/hooks/useWalletBalance";
-import walletStore from "@src/store/walletStore";
 import { RouteStep } from "@src/types/route-steps.type";
 import { udenomToDenom } from "@src/utils/mathHelpers";
 import { uaktToAKT } from "@src/utils/priceUtils";
 import { UrlService } from "@src/utils/urlUtils";
 import LiquidityModal from "../liquidity-modal";
 import { ExternalLink } from "../shared/ExternalLink";
-import { ConnectWalletButton } from "../wallet/ConnectWalletButton";
+import { WalletConnectionButtons } from "../wallet/WalletConnectionButtons";
 import { QontoConnector, QontoStepIcon } from "./Stepper";
 
 export const GetStartedStepper: React.FunctionComponent = () => {
@@ -34,8 +30,6 @@ export const GetStartedStepper: React.FunctionComponent = () => {
   const { minDeposit } = useChainParam();
   const aktBalance = walletBalance ? uaktToAKT(walletBalance.balanceUAKT) : 0;
   const usdcBalance = walletBalance ? udenomToDenom(walletBalance.balanceUUSDC) : 0;
-  const [isSignedInWithTrial] = useAtom(walletStore.isSignedInWithTrial);
-  const { user } = useCustomUser();
 
   useEffect(() => {
     const getStartedStep = localStorage.getItem("getStartedStep");
@@ -141,16 +135,7 @@ export const GetStartedStepper: React.FunctionComponent = () => {
                 <span>Billing is not set up</span>
               </div>
 
-              <div className="flex items-center gap-2">
-                {!isSignedInWithTrial && <ConnectManagedWalletButton className="mr-2 w-full md:w-auto" />}
-                <ConnectWalletButton />
-
-                {isSignedInWithTrial && !user && (
-                  <Link className={cn(buttonVariants({ variant: "outline" }))} href={UrlService.newLogin()} passHref prefetch={false}>
-                    Sign in
-                  </Link>
-                )}
-              </div>
+              <WalletConnectionButtons className="gap-2" connectManagedWalletButtonClassName="mr-2 w-full md:w-auto" />
             </div>
           )}
 

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

@@ -1,32 +1,26 @@
 "use client";
 import React from "react";
-import { Button, buttonVariants, Card, CardContent } from "@akashnetwork/ui/components";
-import { cn } from "@akashnetwork/ui/utils";
+import { Button, Card, CardContent } from "@akashnetwork/ui/components";
 import { MultiplePages, Rocket } from "iconoir-react";
+import { useAtom } from "jotai";
 import Link from "next/link";
 
-import { ConnectWalletButton } from "@src/components/wallet/ConnectWalletButton";
+import { WalletConnectionButtons } from "@src/components/wallet/WalletConnectionButtons";
 import { useServices } from "@src/context/ServicesProvider";
-import { UrlService } from "@src/utils/urlUtils";
+import { useCustomUser } from "@src/hooks/useCustomUser";
+import walletStore from "@src/store/walletStore";
 
 type Props = {
   onDeployClick: () => void;
   hasDeployments?: boolean;
   isWalletConnected?: boolean;
-  isSignedInWithTrial?: boolean;
-  hasUser?: boolean;
   showTemplatesButton?: boolean;
 };
 
-export const NoDeploymentsState: React.FC<Props> = ({
-  onDeployClick,
-  hasDeployments = false,
-  isWalletConnected = true,
-  isSignedInWithTrial = false,
-  hasUser = true,
-  showTemplatesButton = true
-}) => {
+export const NoDeploymentsState: React.FC<Props> = ({ onDeployClick, hasDeployments = false, isWalletConnected = true, showTemplatesButton = true }) => {
   const { urlService } = useServices();
+  const [isSignedInWithTrial] = useAtom(walletStore.isSignedInWithTrial);
+  const { user } = useCustomUser();
 
   const title = hasDeployments ? "No active deployments." : "No deployments yet.";
 
@@ -38,8 +32,8 @@ export const NoDeploymentsState: React.FC<Props> = ({
         </div>
         <h3 className="mb-2 text-xl font-bold">{title}</h3>
 
-        {isSignedInWithTrial && !hasUser && (
-          <p className="mb-4 text-center text-sm text-muted-foreground">If you are expecting to see some, you may need to sign-in or connect a wallet</p>
+        {isSignedInWithTrial && !user && (
+          <p className="mb-4 text-center text-sm text-muted-foreground">If you are expecting to see some, you may need to sign in or connect a wallet</p>
         )}
 
         {showTemplatesButton && (
@@ -66,12 +60,7 @@ export const NoDeploymentsState: React.FC<Props> = ({
             )}
           </div>
         ) : (
-          <div className="mt-4 flex items-center justify-center gap-4">
-            <ConnectWalletButton />
-            <Link className={cn(buttonVariants({ variant: "outline" }))} href={UrlService.newLogin()} passHref prefetch={false}>
-              Sign in
-            </Link>
-          </div>
+          <WalletConnectionButtons className="mt-4 justify-center" />
         )}
       </CardContent>
     </Card>

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

@@ -1,16 +1,12 @@
 "use client";
-import { Button, buttonVariants } from "@akashnetwork/ui/components";
+import { Button } from "@akashnetwork/ui/components";
 import { cn } from "@akashnetwork/ui/utils";
 import type { ClassValue } from "clsx";
 import { Menu, Xmark } from "iconoir-react";
-import { useAtom } from "jotai";
 import Link from "next/link";
 
 import { ACCOUNT_BAR_HEIGHT } from "@src/config/ui.config";
-import { useCustomUser } from "@src/hooks/useCustomUser";
 import useCookieTheme from "@src/hooks/useTheme";
-import walletStore from "@src/store/walletStore";
-import { UrlService } from "@src/utils/urlUtils";
 import { AccountMenu } from "./AccountMenu";
 import { AkashLogo } from "./AkashLogo";
 import { WalletStatus } from "./WalletStatus";
@@ -25,8 +21,6 @@ export const Nav = ({
   className?: ClassValue;
 }>) => {
   const theme = useCookieTheme();
-  const [isSignedInWithTrial] = useAtom(walletStore.isSignedInWithTrial);
-  const { user } = useCustomUser();
 
   return (
     <header className={cn("fixed top-0 z-50 w-full border-b border-border bg-header", className)}>
@@ -47,12 +41,6 @@ export const Nav = ({
           <div className="flex items-center gap-2">
             <div className="ml-4 flex items-center gap-2">
               <WalletStatus />
-
-              {isSignedInWithTrial && !user && (
-                <Link className={cn(buttonVariants({ variant: "outline" }))} href={UrlService.newLogin()} passHref prefetch={false}>
-                  Sign in
-                </Link>
-              )}
             </div>
 
             <AccountMenu />

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

@@ -5,21 +5,17 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, Spinner } from
 import { cn } from "@akashnetwork/ui/utils";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import { NavArrowDown, Wallet } from "iconoir-react";
-import { useAtom } from "jotai";
 
-import { ConnectManagedWalletButton } from "@src/components/wallet/ConnectManagedWalletButton";
 import { useWallet } from "@src/context/WalletProvider";
 import { getSplitText } from "@src/hooks/useShortText";
 import { useWalletBalance } from "@src/hooks/useWalletBalance";
-import walletStore from "@src/store/walletStore";
-import { ConnectWalletButton } from "../wallet/ConnectWalletButton";
 import { CustodialWalletPopup } from "../wallet/CustodialWalletPopup";
 import { ManagedWalletPopup } from "../wallet/ManagedWalletPopup";
+import { WalletConnectionButtons } from "../wallet/WalletConnectionButtons";
 
 export function WalletStatus() {
   const { walletName, isWalletLoaded, isWalletConnected, isManaged, isWalletLoading, isTrialing } = useWallet();
   const { balance: walletBalance, isLoading: isWalletBalanceLoading } = useWalletBalance();
-  const [isSignedInWithTrial] = useAtom(walletStore.isSignedInWithTrial);
   const [open, setOpen] = useState(false);
   const isLoadingBalance = isWalletBalanceLoading && !walletBalance;
   const isInit = isWalletLoaded && !isWalletLoading && !isLoadingBalance;
@@ -89,10 +85,7 @@ export function WalletStatus() {
             </div>
           </div>
         ) : (
-          <div>
-            {!isSignedInWithTrial && <ConnectManagedWalletButton className="mb-2 mr-2 w-full md:mb-0 md:w-auto" />}
-            <ConnectWalletButton className="w-full md:w-auto" />
-          </div>
+          <WalletConnectionButtons className="w-full justify-center" connectWalletButtonClassName="w-full md:w-auto" />
         )
       ) : (
         <div className="flex items-center justify-center p-4">

apps/deploy-web/src/components/new-deployment/CreateLease/CreateLease.tsx

@@ -37,7 +37,6 @@ import { useWallet } from "@src/context/WalletProvider";
 import { useManagedDeploymentConfirm } from "@src/hooks/useManagedDeploymentConfirm";
 import { useWhen } from "@src/hooks/useWhen";
 import { useBidList } from "@src/queries/useBidQuery";
-import { useBlock } from "@src/queries/useBlocksQuery";
 import { useDeploymentDetail } from "@src/queries/useDeploymentQuery";
 import { useProviderList } from "@src/queries/useProvidersQuery";
 import type { SendManifestToProviderOptions } from "@src/services/provider-proxy/provider-proxy.service";
@@ -99,7 +98,6 @@ export const DEPENDENCIES = {
   useSnackbar,
   useManagedDeploymentConfirm,
   useRouter,
-  useBlock,
   useSettings
 };
 
@@ -109,7 +107,6 @@ const REFRESH_BIDS_INTERVAL = 7000;
 const MAX_NUM_OF_BID_REQUESTS = Math.floor((5.5 * 60 * 1000) / REFRESH_BIDS_INTERVAL);
 // Show a warning after 1 minute
 const WARNING_NUM_OF_BID_REQUESTS = Math.round((60 * 1000) / REFRESH_BIDS_INTERVAL);
-const TRIAL_SIGNUP_WARNING_TIMEOUT = 33_000;
 
 export const CreateLease: React.FunctionComponent<Props> = ({ dseq, dependencies: d = DEPENDENCIES }) => {
   const { settings } = d.useSettings();
@@ -297,25 +294,6 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq, dependencies
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [search, bids, providers, isFilteringFavorites, isFilteringAudited, favoriteProviders]);
 
-  const [zeroBidsForTrialWarningDisplayed, setZeroBidsForTrialWarningDisplayed] = useState(false);
-  const { data: block } = d.useBlock(dseq);
-
-  useEffect(() => {
-    if (!isTrialing || numberOfRequests === 0 || (bids && bids.length > 0)) {
-      setZeroBidsForTrialWarningDisplayed(false);
-      return;
-    }
-
-    const timerId = setTimeout(() => {
-      if (block) {
-        const blockTime = new Date(block.block.header.time).getTime();
-        setZeroBidsForTrialWarningDisplayed(Date.now() - blockTime > TRIAL_SIGNUP_WARNING_TIMEOUT);
-      }
-    }, 1000);
-
-    return () => clearTimeout(timerId);
-  }, [block, bids, isTrialing, numberOfRequests]);
-
   const selectBid = (bid: BidDto) => {
     setSelectedBids(prev => ({ ...prev, [bid.gseq]: bid }));
   };
@@ -463,7 +441,7 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq, dependencies
           </d.Button>
         )}
 
-        {!settings.isBlockchainDown && !zeroBidsForTrialWarningDisplayed && warningRequestsReached && !maxRequestsReached && (bids?.length || 0) === 0 && (
+        {!settings.isBlockchainDown && warningRequestsReached && !maxRequestsReached && (bids?.length || 0) === 0 && (
           <div className="pt-6">
             <d.Alert variant="warning">
               There should be bids by now... You can wait longer in case a bid shows up or close the deployment and try again with a different configuration.
@@ -476,18 +454,19 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq, dependencies
           </div>
         )}
 
-        {!settings.isBlockchainDown &&
-          (isLoadingBids || (bids?.length || 0) === 0) &&
-          !maxRequestsReached &&
-          !isSendingManifest &&
-          !zeroBidsForTrialWarningDisplayed && (
-            <div className="flex flex-col items-center justify-center pt-6 text-center">
-              <d.Spinner size="large" />
-              <div className="pt-6">Waiting for bids...</div>
+        {!settings.isBlockchainDown && (isLoadingBids || (bids?.length || 0) === 0) && !maxRequestsReached && !isSendingManifest && (
+          <div className="flex flex-col items-center justify-center pt-6 text-center">
+            <d.Spinner size="large" />
+            <div className="pt-6">Waiting for bids...</div>
+            <div className="pt-8">
+              <d.Button variant="secondary" size="sm" onClick={handleCloseDeployment} disabled={settings.isBlockchainDown}>
+                Close Deployment
+              </d.Button>
             </div>
-          )}
+          </div>
+        )}
 
-        {!settings.isBlockchainDown && !zeroBidsForTrialWarningDisplayed && maxRequestsReached && (bids?.length || 0) === 0 && (
+        {!settings.isBlockchainDown && maxRequestsReached && (bids?.length || 0) === 0 && (
           <div className="pt-6">
             <d.Alert variant="warning">
               There's no bid for the current deployment. You can close the deployment and try again with a different configuration.

apps/deploy-web/src/components/onboarding/OnboardingContainer/OnboardingContainer.spec.tsx

@@ -280,6 +280,9 @@ describe("OnboardingContainer", () => {
     const mockUseChainParam = jest.fn().mockReturnValue({ minDeposit: { akt: 0.5, usdc: 5 } });
     const mockDenomToUdenom = jest.fn().mockImplementation((amount: number) => amount * 1_000_000);
     const mockErrorHandler = mock<ErrorHandlerService>();
+    const mockTemplateService = {
+      findById: jest.fn().mockResolvedValue({ deploy: "mock-template-sdl" })
+    };
 
     const mockUseServices = jest.fn().mockReturnValue({
       analyticsService: mockAnalyticsService,
@@ -290,7 +293,8 @@ describe("OnboardingContainer", () => {
       publicConfig: mockAppConfig,
       errorHandler: mockErrorHandler,
       windowLocation,
-      windowHistory
+      windowHistory,
+      template: mockTemplateService
     });
     const mockUseRouter = jest.fn().mockReturnValue(mockRouter);
     const mockUseWallet = jest.fn().mockReturnValue({
@@ -300,7 +304,6 @@ describe("OnboardingContainer", () => {
       address: "akash1test",
       signAndBroadcastTx: mockSignAndBroadcastTx
     });
-    const mockUseTemplates = jest.fn().mockReturnValue({ templates: [] });
     const mockUseCertificate = jest.fn().mockReturnValue({
       genNewCertificateIfLocalIsInvalid: mockGenNewCertificateIfLocalIsInvalid,
       updateSelectedCertificate: mockUpdateSelectedCertificate
@@ -387,7 +390,6 @@ describe("OnboardingContainer", () => {
       useServices: mockUseServices,
       useRouter: mockUseRouter,
       useWallet: mockUseWallet,
-      useTemplates: mockUseTemplates,
       useCertificate: mockUseCertificate,
       useSnackbar: mockUseSnackbar,
       useManagedWalletDenom: mockUseManagedWalletDenom,