Skip to content

Commit 9c6cddf

Browse files
jigar-arc10jigar-arc10
authored
feat(provider): new and improved home page for non provider (#531)
* feat(provider): add get-started page * fix(provider): fix redirect issues and improved auth * fix(provider): dashboard ui issue fixed * feat(provider): changed copy on home page * chore: changed min akt requirement in home page * fix: removed unnecessary comment
1 parent 7512198 commit 9c6cddf

File tree

30 files changed

+929
-178
lines changed

30 files changed

+929
-178
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const PercentChange: React.FC<PercentChangeProps> = ({ currentPrice, previousPri
4242
export const FinanceCard: React.FC<FinanceCardProps> = ({ title, subtitle, currentPrice, previousPrice, message }) => {
4343
return (
4444
<Card>
45-
<CardContent className="rounded-lg p-6 shadow-md">
45+
<CardContent className="p-6">
4646
<div className="grid grid-cols-2 gap-4">
4747
<div className="">
4848
<div className="text-sm font-medium">{subtitle}</div>

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
"use client";
2+
import React from "react";
3+
import { Alert } from "@akashnetwork/ui/components";
4+
5+
import { ExternalLink } from "../shared/ExternalLink";
6+
7+
export const CreateWalletSection: React.FunctionComponent = () => {
8+
return (
9+
<ul className="list-[lower-alpha] space-y-2 py-4 pl-8">
10+
<li>
11+
Navigate to the <ExternalLink href="https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap" text="Keplr Wallet extension" />{" "}
12+
in the Google Chrome store and follow the on-screen prompts to add the extension to your web browser
13+
</li>
14+
<li>Open the browser extension and select Create new account.</li>
15+
<li>Copy your mnemonic seed phrase and store it somewhere safe</li>
16+
<Alert variant="warning" className="my-4">
17+
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
18+
your wallet; loss or compromise of your mnemonic seed phrase may result in permanent loss of your ATOM.
19+
</Alert>
20+
<li>Establish an account name and password, then select Next.</li>
21+
<li>Confirm your mnemonic seed phrase and select Register.</li>
22+
<li>Done!</li>
23+
</ul>
24+
);
25+
};

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

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
"use client";
2+
import React, { useEffect, useState } from "react";
3+
import { MdRestartAlt } from "react-icons/md";
4+
import { Button, buttonVariants } from "@akashnetwork/ui/components";
5+
import { cn } from "@akashnetwork/ui/utils";
6+
import Step from "@mui/material/Step";
7+
import StepContent from "@mui/material/StepContent";
8+
import StepLabel from "@mui/material/StepLabel";
9+
import Stepper from "@mui/material/Stepper";
10+
import { Check, XmarkCircleSolid } from "iconoir-react";
11+
import Link from "next/link";
12+
13+
import { useWallet } from "@src/context/WalletProvider";
14+
import { UrlService } from "@src/utils/urlUtils";
15+
import { WalletStatus } from "../layout/WalletStatus";
16+
import { QontoConnector, QontoStepIcon } from "./Stepper";
17+
18+
export const GetStartedStepper: React.FunctionComponent = () => {
19+
const [activeStep, setActiveStep] = useState(0);
20+
const { isWalletConnected } = useWallet();
21+
22+
useEffect(() => {
23+
const getStartedStep = localStorage.getItem("getStartedStep");
24+
25+
if (getStartedStep) {
26+
const _getStartedStep = parseInt(getStartedStep);
27+
setActiveStep(_getStartedStep >= 0 && _getStartedStep <= 2 ? _getStartedStep : 0);
28+
}
29+
}, []);
30+
31+
const handleNext = () => {
32+
setActiveStep(prevActiveStep => {
33+
const newStep = prevActiveStep + 1;
34+
35+
localStorage.setItem("getStartedStep", newStep.toString());
36+
37+
return newStep;
38+
});
39+
};
40+
41+
const handleReset = () => {
42+
setActiveStep(0);
43+
localStorage.setItem("getStartedStep", "0");
44+
};
45+
46+
const onStepClick = (step: number) => {
47+
setActiveStep(step);
48+
49+
localStorage.setItem("getStartedStep", step.toString());
50+
};
51+
52+
return (
53+
<Stepper activeStep={activeStep} orientation="vertical" connector={<QontoConnector />}>
54+
<Step>
55+
<StepLabel
56+
StepIconComponent={QontoStepIcon}
57+
onClick={() => (activeStep > 0 ? onStepClick(0) : null)}
58+
classes={{ label: cn("text-xl tracking-tight", { ["cursor-pointer hover:text-primary"]: activeStep > 0, ["!font-bold"]: activeStep === 0 }) }}
59+
>
60+
Funding Requirements
61+
</StepLabel>
62+
63+
<StepContent>
64+
<p>To begin the process</p>
65+
<ul className="list-inside list-disc">
66+
<li>You need to have at least 30 AKT tokens in your wallet in order to bid on workloads.</li>
67+
<li>
68+
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.
69+
</li>
70+
<li>These tokens are returned when the lease is closed.</li>
71+
<li>Verify your wallet balance and fund it if necessary.</li>
72+
</ul>
73+
{isWalletConnected && (
74+
<div className="my-4 flex items-center space-x-2">
75+
<Check className="text-green-600" />
76+
<span>Wallet is installed</span>{" "}
77+
</div>
78+
)}
79+
80+
{!isWalletConnected && (
81+
<div>
82+
<div className="my-4 flex items-center space-x-2">
83+
<XmarkCircleSolid className="text-destructive" />
84+
<span>Wallet is not connected</span>
85+
</div>
86+
<div className="my-4">
87+
<WalletStatus />
88+
</div>
89+
</div>
90+
)}
91+
<div className="my-4 flex items-center space-x-4">
92+
{isWalletConnected && (
93+
<Button variant="default" onClick={handleNext}>
94+
Next
95+
</Button>
96+
)}
97+
98+
<Link className={cn(buttonVariants({ variant: "text" }))} href={UrlService.getStartedWallet()}>
99+
Learn how
100+
</Link>
101+
</div>
102+
</StepContent>
103+
</Step>
104+
105+
<Step>
106+
<StepLabel
107+
StepIconComponent={QontoStepIcon}
108+
onClick={() => onStepClick(1)}
109+
classes={{
110+
label: cn("text-xl tracking-tight", {
111+
["cursor-pointer hover:text-primary"]: activeStep > 1,
112+
["!font-bold"]: activeStep === 1
113+
})
114+
}}
115+
>
116+
Basic Provider Requirements
117+
</StepLabel>
118+
<StepContent>
119+
<p>To operate as an Akash provider, you must meet the following hardware and network requirements:</p>
120+
<ol className="list-inside list-decimal">
121+
<li className="pt-4">
122+
<span className="font-medium">Server Setup:</span>
123+
<ul className="list-inside list-disc">
124+
<li>At least 1 server with a high-speed internet connection.</li>
125+
<li> For multiple servers, ensure they are connected locally.</li>
126+
</ul>
127+
</li>
128+
<li className="pt-4">
129+
<span className="font-medium">Minimum Specifications for Each Server</span>
130+
<ul className="list-inside list-disc">
131+
<li>8 CPUs</li>
132+
<li>16 GB RAM</li>
133+
<li>100 GB Storage</li>
134+
</ul>
135+
</li>
136+
<li className="pt-4">
137+
<span className="font-medium">Network Configuration:</span>
138+
<ul className="list-inside list-disc">
139+
<li>Open the following ports on all servers: 8443, 8444, 80, 443, 6443.</li>
140+
<li>The server should allow SSH connections from public IPs (ensure the SSH port is open).</li>
141+
</ul>
142+
</li>
143+
<li className="pt-4">
144+
<span className="font-medium">Access Requirements</span>
145+
<ul className="list-inside list-disc">
146+
<li>Root access should be enabled for better compatibility.</li>
147+
</ul>
148+
</li>
149+
</ol>
150+
<div className="my-4 flex items-center space-x-4">
151+
<Button variant="default" onClick={handleNext}>
152+
Confirm Provider Requirements
153+
</Button>
154+
</div>
155+
</StepContent>
156+
</Step>
157+
158+
<Step>
159+
<StepLabel StepIconComponent={QontoStepIcon} classes={{ label: cn("text-xl tracking-tight", { ["!font-bold"]: activeStep === 2 }) }}>
160+
Provider Configuration
161+
</StepLabel>
162+
<StepContent>
163+
<p>A proper configuration ensures smooth communication between your server and the Akash</p>
164+
<ol className="list-inside list-decimal">
165+
<li className="pt-4">
166+
<span className="font-medium">Domain Name</span>
167+
<ul className="list-inside list-disc">
168+
<li>Obtain a domain name and point it to the IP address of your primary server.</li>
169+
</ul>
170+
</li>
171+
<li className="pt-4">
172+
<span className="font-medium">Organization Information</span>
173+
<ul className="list-inside list-disc">
174+
<li>Decide on an organization name.</li>
175+
</ul>
176+
</li>
177+
<li className="pt-4">
178+
<span className="font-medium">Email Address (Optional)</span>
179+
<ul className="list-inside list-disc">
180+
<li>Email address for notifications and updates.</li>
181+
</ul>
182+
</li>
183+
</ol>
184+
<div className="my-4 flex items-center space-x-4">
185+
<Button variant="default" onClick={handleNext}>
186+
Confirm Provider Requirements
187+
</Button>
188+
</div>
189+
</StepContent>
190+
</Step>
191+
192+
<Step>
193+
<StepLabel StepIconComponent={QontoStepIcon} classes={{ label: cn("text-xl tracking-tight", { ["!font-bold"]: activeStep === 3 }) }}>
194+
Provider Attributes
195+
</StepLabel>
196+
<StepContent>
197+
<p>Provider attributes help tenants discover your provider and make bidding decisions</p>
198+
<ul className="list-inside list-disc">
199+
<li className="pt-4">Define attributes such as region, specializations, or hardware capabilities.</li>
200+
<li className="pt-4">Adding more attributes improves your chances of receiving bids from tenants.</li>
201+
</ul>
202+
<div className="my-4 flex items-center space-x-4">
203+
<Button variant="default" onClick={handleNext}>
204+
Next
205+
</Button>
206+
</div>
207+
</StepContent>
208+
</Step>
209+
<Step>
210+
<StepLabel StepIconComponent={QontoStepIcon} classes={{ label: cn("text-xl tracking-tight", { ["!font-bold"]: activeStep === 4 }) }}>
211+
Setting Pricing
212+
</StepLabel>
213+
<StepContent>
214+
<p>Determine the pricing for your resources</p>
215+
<ul className="list-inside list-disc">
216+
<li className="pt-4">Specify rates for GPU, CPU, RAM, and storage based on your cost structure and desired profit margins.</li>
217+
<li className="pt-4">Competitive pricing increases the likelihood of receiving tenant deployments.</li>
218+
</ul>
219+
<div className="my-4 flex items-center space-x-4">
220+
<Button variant="default" onClick={handleNext}>
221+
Next
222+
</Button>
223+
</div>
224+
</StepContent>
225+
</Step>
226+
227+
<Step>
228+
<StepLabel StepIconComponent={QontoStepIcon} classes={{ label: cn("text-xl tracking-tight", { ["!font-bold"]: activeStep === 5 }) }}>
229+
Wallet Import
230+
</StepLabel>
231+
<StepContent>
232+
<p>To enable earnings from tenant deployments, you need to import your wallet</p>
233+
<ol className="list-inside list-decimal">
234+
<li className="pt-4">
235+
<span className="font-medium">Auto Mode</span>
236+
<ul className="list-inside list-disc">
237+
<li>Securely import your wallet using end-to-end encryption.</li>
238+
<li>Enter your wallet seed phrase during the process.</li>
239+
</ul>
240+
</li>
241+
<li className="pt-4">
242+
<span className="font-medium">Manual Mode</span>
243+
<ul className="list-inside list-disc">
244+
<li>Follow a series of CLI commands to manually import the wallet into the control node.</li>
245+
</ul>
246+
</li>
247+
</ol>
248+
<p>Once you understand the process, you can create a provider.</p>
249+
<div className="my-4 flex items-center space-x-4">
250+
<div className="my-4 space-x-2">
251+
<Link className={cn("space-x-2", buttonVariants({ variant: "default" }))} href={UrlService.becomeProvider()}>
252+
<span>Create Provider</span>
253+
</Link>
254+
<Button onClick={handleReset} className="space-x-2" variant="ghost">
255+
<span>Reset</span>
256+
<MdRestartAlt />
257+
</Button>
258+
</div>
259+
</div>
260+
</StepContent>
261+
</Step>
262+
</Stepper>
263+
);
264+
};

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
"use client";
2+
import React, { useState } from "react";
3+
import { Alert, buttonVariants, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@akashnetwork/ui/components";
4+
import { cn } from "@akashnetwork/ui/utils";
5+
import { NavArrowLeft } from "iconoir-react";
6+
import Link from "next/link";
7+
8+
import { UrlService } from "@src/utils/urlUtils";
9+
import { ExternalLink } from "../shared/ExternalLink";
10+
import { LinkTo } from "../shared/LinkTo";
11+
import { CreateWalletSection } from "./CreateWalletSection";
12+
13+
export const NoKeplrSection: React.FunctionComponent = () => {
14+
const [isCreateWalletOpen, setIsCreateWalletOpen] = useState(false);
15+
16+
return (
17+
<div>
18+
<Link href={UrlService.getStartedWallet()} className={cn(buttonVariants({ variant: "text" }))}>
19+
<NavArrowLeft className="mr-2 text-sm" />
20+
Back
21+
</Link>
22+
<ul className="list-decimal space-y-2 py-4 pl-8">
23+
<li>
24+
Install <ExternalLink href="https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap" text="Keplr" />
25+
</li>
26+
<Collapsible open={isCreateWalletOpen} onOpenChange={setIsCreateWalletOpen}>
27+
<li>
28+
Create a wallet using{" "}
29+
<CollapsibleTrigger asChild>
30+
<LinkTo onClick={() => setIsCreateWalletOpen(prev => !prev)}>Keplr</LinkTo>
31+
</CollapsibleTrigger>
32+
</li>
33+
34+
<CollapsibleContent>
35+
<Alert className="my-4">
36+
<CreateWalletSection />
37+
</Alert>
38+
</CollapsibleContent>
39+
</Collapsible>
40+
<li>Use a decentralized or centralized exchange to purchase USDC</li>
41+
42+
<li>
43+
Use <ExternalLink href="https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn" text="MetaMask" /> wallet to import USDC
44+
to <ExternalLink href="https://app.osmosis.zone/assets" text="Osmosis" />
45+
</li>
46+
47+
<li>
48+
Swap <ExternalLink href="https://app.osmosis.zone/?from=USDC&to=AKT" text="USDC to AKT" />
49+
</li>
50+
51+
<li>
52+
<ExternalLink href="https://app.osmosis.zone/assets" text="Withdraw" /> AKT to Keplr
53+
</li>
54+
<li>Done!</li>
55+
</ul>
56+
</div>
57+
);
58+
};

0 commit comments

Comments
 (0)