feat(provider): new and improved home page for non provider

apps/provider-console/src/components/dashboard/FinanceCard.tsx

@@ -42,7 +42,7 @@ const PercentChange: React.FC<PercentChangeProps> = ({ currentPrice, previousPri
 export const FinanceCard: React.FC<FinanceCardProps> = ({ title, subtitle, currentPrice, previousPrice, message }) => {
   return (
     <Card>
-      <CardContent className="rounded-lg p-6 shadow-md">
+      <CardContent className="p-6">
         <div className="grid grid-cols-2 gap-4">
           <div className="">
             <div className="text-sm font-medium">{subtitle}</div>

apps/provider-console/src/components/get-started/CreateWalletSection.tsx

@@ -0,0 +1,25 @@
+"use client";
+import React from "react";
+import { Alert } from "@akashnetwork/ui/components";
+
+import { ExternalLink } from "../shared/ExternalLink";
+
+export const CreateWalletSection: React.FunctionComponent = () => {
+  return (
+    <ul className="list-[lower-alpha] space-y-2 py-4 pl-8">
+      <li>
+        Navigate to the <ExternalLink href="https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap" text="Keplr Wallet extension" />{" "}
+        in the Google Chrome store and follow the on-screen prompts to add the extension to your web browser
+      </li>
+      <li>Open the browser extension and select Create new account.</li>
+      <li>Copy your mnemonic seed phrase and store it somewhere safe</li>
+      <Alert variant="warning" className="my-4">
+        Ensure that you store your mnemonic seed phrase somewhere safe where it cannot be lost or compromised. Your mnemonic seed phrase is the master key to
+        your wallet; loss or compromise of your mnemonic seed phrase may result in permanent loss of your ATOM.
+      </Alert>
+      <li>Establish an account name and password, then select Next.</li>
+      <li>Confirm your mnemonic seed phrase and select Register.</li>
+      <li>Done!</li>
+    </ul>
+  );
+};

apps/provider-console/src/components/get-started/GetStartedStepper.tsx

@@ -0,0 +1,264 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { MdRestartAlt } from "react-icons/md";
+import { Button, buttonVariants } from "@akashnetwork/ui/components";
+import { cn } from "@akashnetwork/ui/utils";
+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, XmarkCircleSolid } from "iconoir-react";
+import Link from "next/link";
+
+import { useWallet } from "@src/context/WalletProvider";
+import { UrlService } from "@src/utils/urlUtils";
+import { WalletStatus } from "../layout/WalletStatus";
+import { QontoConnector, QontoStepIcon } from "./Stepper";
+
+export const GetStartedStepper: React.FunctionComponent = () => {
+  const [activeStep, setActiveStep] = useState(0);
+  const { isWalletConnected } = useWallet();
+
+  useEffect(() => {
+    const getStartedStep = localStorage.getItem("getStartedStep");
+
+    if (getStartedStep) {
+      const _getStartedStep = parseInt(getStartedStep);
+      setActiveStep(_getStartedStep >= 0 && _getStartedStep <= 2 ? _getStartedStep : 0);
+    }
+  }, []);
+
+  const handleNext = () => {
+    setActiveStep(prevActiveStep => {
+      const newStep = prevActiveStep + 1;
+
+      localStorage.setItem("getStartedStep", newStep.toString());
+
+      return newStep;
+    });
+  };
+
+  const handleReset = () => {
+    setActiveStep(0);
+    localStorage.setItem("getStartedStep", "0");
+  };
+
+  const onStepClick = (step: number) => {
+    setActiveStep(step);
+
+    localStorage.setItem("getStartedStep", step.toString());
+  };
+
+  return (
+    <Stepper activeStep={activeStep} orientation="vertical" connector={<QontoConnector />}>
+      <Step>
+        <StepLabel
+          StepIconComponent={QontoStepIcon}
+          onClick={() => (activeStep > 0 ? onStepClick(0) : null)}
+          classes={{ label: cn("text-xl tracking-tight", { ["cursor-pointer hover:text-primary"]: activeStep > 0, ["!font-bold"]: activeStep === 0 }) }}
+        >
+          Funding Requirements
+        </StepLabel>
+
+        <StepContent>
+          <p>To begin the process</p>
+          <ul className="list-inside list-disc">
+            <li>You need to have at least 30 AKT tokens in your wallet in order to bid on workloads.</li>
+            <li>
+              Every lease created on the Akash network requires 5 AKT to be locked in escrow. Please ensure you have enough funds to cover your resources.
+            </li>
+            <li>These tokens are returned when the lease is closed.</li>
+            <li>Verify your wallet balance and fund it if necessary.</li>
+          </ul>
+          {isWalletConnected && (
+            <div className="my-4 flex items-center space-x-2">
+              <Check className="text-green-600" />
+              <span>Wallet is installed</span>{" "}
+            </div>
+          )}
+
+          {!isWalletConnected && (
+            <div>
+              <div className="my-4 flex items-center space-x-2">
+                <XmarkCircleSolid className="text-destructive" />
+                <span>Wallet is not connected</span>
+              </div>
+              <div className="my-4">
+                <WalletStatus />
+              </div>
+            </div>
+          )}
+          <div className="my-4 flex items-center space-x-4">
+            {isWalletConnected && (
+              <Button variant="default" onClick={handleNext}>
+                Next
+              </Button>
+            )}
+
+            <Link className={cn(buttonVariants({ variant: "text" }))} href={UrlService.getStartedWallet()}>
+              Learn how
+            </Link>
+          </div>
+        </StepContent>
+      </Step>
+
+      <Step>
+        <StepLabel
+          StepIconComponent={QontoStepIcon}
+          onClick={() => onStepClick(1)}
+          classes={{
+            label: cn("text-xl tracking-tight", {
+              ["cursor-pointer hover:text-primary"]: activeStep > 1,
+              ["!font-bold"]: activeStep === 1
+            })
+          }}
+        >
+          Basic Provider Requirements
+        </StepLabel>
+        <StepContent>
+          <p>To operate as an Akash provider, you must meet the following hardware and network requirements:</p>
+          <ol className="list-inside list-decimal">
+            <li className="pt-4">
+              <span className="font-medium">Server Setup:</span>
+              <ul className="list-inside list-disc">
+                <li>At least 1 server with a high-speed internet connection.</li>
+                <li> For multiple servers, ensure they are connected locally.</li>
+              </ul>
+            </li>
+            <li className="pt-4">
+              <span className="font-medium">Minimum Specifications for Each Server</span>
+              <ul className="list-inside list-disc">
+                <li>8 CPUs</li>
+                <li>16 GB RAM</li>
+                <li>100 GB Storage</li>
+              </ul>
+            </li>
+            <li className="pt-4">
+              <span className="font-medium">Network Configuration:</span>
+              <ul className="list-inside list-disc">
+                <li>Open the following ports on all servers: 8443, 8444, 80, 443, 6443.</li>
+                <li>The server should allow SSH connections from public IPs (ensure the SSH port is open).</li>
+              </ul>
+            </li>
+            <li className="pt-4">
+              <span className="font-medium">Access Requirements</span>
+              <ul className="list-inside list-disc">
+                <li>Root access should be enabled for better compatibility.</li>
+              </ul>
+            </li>
+          </ol>
+          <div className="my-4 flex items-center space-x-4">
+            <Button variant="default" onClick={handleNext}>
+              Confirm Provider Requirements
+            </Button>
+          </div>
+        </StepContent>
+      </Step>
+
+      <Step>
+        <StepLabel StepIconComponent={QontoStepIcon} classes={{ label: cn("text-xl tracking-tight", { ["!font-bold"]: activeStep === 2 }) }}>
+          Provider Configuration
+        </StepLabel>
+        <StepContent>
+          <p>A proper configuration ensures smooth communication between your server and the Akash</p>
+          <ol className="list-inside list-decimal">
+            <li className="pt-4">
+              <span className="font-medium">Domain Name</span>
+              <ul className="list-inside list-disc">
+                <li>Obtain a domain name and point it to the IP address of your primary server.</li>
+              </ul>
+            </li>
+            <li className="pt-4">
+              <span className="font-medium">Organization Information</span>
+              <ul className="list-inside list-disc">
+                <li>Decide on an organization name.</li>
+              </ul>
+            </li>
+            <li className="pt-4">
+              <span className="font-medium">Email Address (Optional)</span>
+              <ul className="list-inside list-disc">
+                <li>Email address for notifications and updates.</li>
+              </ul>
+            </li>
+          </ol>
+          <div className="my-4 flex items-center space-x-4">
+            <Button variant="default" onClick={handleNext}>
+              Confirm Provider Requirements
+            </Button>
+          </div>
+        </StepContent>
+      </Step>
+
+      <Step>
+        <StepLabel StepIconComponent={QontoStepIcon} classes={{ label: cn("text-xl tracking-tight", { ["!font-bold"]: activeStep === 3 }) }}>
+          Provider Attributes
+        </StepLabel>
+        <StepContent>
+          <p>Provider attributes help tenants discover your provider and make bidding decisions</p>
+          <ul className="list-inside list-disc">
+            <li className="pt-4">Define attributes such as region, specializations, or hardware capabilities.</li>
+            <li className="pt-4">Adding more attributes improves your chances of receiving bids from tenants.</li>
+          </ul>
+          <div className="my-4 flex items-center space-x-4">
+            <Button variant="default" onClick={handleNext}>
+              Next
+            </Button>
+          </div>
+        </StepContent>
+      </Step>
+      <Step>
+        <StepLabel StepIconComponent={QontoStepIcon} classes={{ label: cn("text-xl tracking-tight", { ["!font-bold"]: activeStep === 4 }) }}>
+          Setting Pricing
+        </StepLabel>
+        <StepContent>
+          <p>Determine the pricing for your resources</p>
+          <ul className="list-inside list-disc">
+            <li className="pt-4">Specify rates for GPU, CPU, RAM, and storage based on your cost structure and desired profit margins.</li>
+            <li className="pt-4">Competitive pricing increases the likelihood of receiving tenant deployments.</li>
+          </ul>
+          <div className="my-4 flex items-center space-x-4">
+            <Button variant="default" onClick={handleNext}>
+              Next
+            </Button>
+          </div>
+        </StepContent>
+      </Step>
+
+      <Step>
+        <StepLabel StepIconComponent={QontoStepIcon} classes={{ label: cn("text-xl tracking-tight", { ["!font-bold"]: activeStep === 5 }) }}>
+          Wallet Import
+        </StepLabel>
+        <StepContent>
+          <p>To enable earnings from tenant deployments, you need to import your wallet</p>
+          <ol className="list-inside list-decimal">
+            <li className="pt-4">
+              <span className="font-medium">Auto Mode</span>
+              <ul className="list-inside list-disc">
+                <li>Securely import your wallet using end-to-end encryption.</li>
+                <li>Enter your wallet seed phrase during the process.</li>
+              </ul>
+            </li>
+            <li className="pt-4">
+              <span className="font-medium">Manual Mode</span>
+              <ul className="list-inside list-disc">
+                <li>Follow a series of CLI commands to manually import the wallet into the control node.</li>
+              </ul>
+            </li>
+          </ol>
+          <p>Once you understand the process, you can create a provider.</p>
+          <div className="my-4 flex items-center space-x-4">
+            <div className="my-4 space-x-2">
+              <Link className={cn("space-x-2", buttonVariants({ variant: "default" }))} href={UrlService.becomeProvider()}>
+                <span>Create Provider</span>
+              </Link>
+              <Button onClick={handleReset} className="space-x-2" variant="ghost">
+                <span>Reset</span>
+                <MdRestartAlt />
+              </Button>
+            </div>
+          </div>
+        </StepContent>
+      </Step>
+    </Stepper>
+  );
+};

apps/provider-console/src/components/get-started/NoKeplrSection.tsx

@@ -0,0 +1,58 @@
+"use client";
+import React, { useState } from "react";
+import { Alert, buttonVariants, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@akashnetwork/ui/components";
+import { cn } from "@akashnetwork/ui/utils";
+import { NavArrowLeft } from "iconoir-react";
+import Link from "next/link";
+
+import { UrlService } from "@src/utils/urlUtils";
+import { ExternalLink } from "../shared/ExternalLink";
+import { LinkTo } from "../shared/LinkTo";
+import { CreateWalletSection } from "./CreateWalletSection";
+
+export const NoKeplrSection: React.FunctionComponent = () => {
+  const [isCreateWalletOpen, setIsCreateWalletOpen] = useState(false);
+
+  return (
+    <div>
+      <Link href={UrlService.getStartedWallet()} className={cn(buttonVariants({ variant: "text" }))}>
+        <NavArrowLeft className="mr-2 text-sm" />
+        Back
+      </Link>
+      <ul className="list-decimal space-y-2 py-4 pl-8">
+        <li>
+          Install <ExternalLink href="https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap" text="Keplr" />
+        </li>
+        <Collapsible open={isCreateWalletOpen} onOpenChange={setIsCreateWalletOpen}>
+          <li>
+            Create a wallet using{" "}
+            <CollapsibleTrigger asChild>
+              <LinkTo onClick={() => setIsCreateWalletOpen(prev => !prev)}>Keplr</LinkTo>
+            </CollapsibleTrigger>
+          </li>
+
+          <CollapsibleContent>
+            <Alert className="my-4">
+              <CreateWalletSection />
+            </Alert>
+          </CollapsibleContent>
+        </Collapsible>
+        <li>Use a decentralized or centralized exchange to purchase USDC</li>
+
+        <li>
+          Use <ExternalLink href="https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn" text="MetaMask" /> wallet to import USDC
+          to <ExternalLink href="https://app.osmosis.zone/assets" text="Osmosis" />
+        </li>
+
+        <li>
+          Swap <ExternalLink href="https://app.osmosis.zone/?from=USDC&to=AKT" text="USDC to AKT" />
+        </li>
+
+        <li>
+          <ExternalLink href="https://app.osmosis.zone/assets" text="Withdraw" /> AKT to Keplr
+        </li>
+        <li>Done!</li>
+      </ul>
+    </div>
+  );
+};