fix(provider): general ui fixes

apps/provider-console/env/.env.production

@@ -9,3 +9,4 @@ NEXT_PUBLIC_MAINNET_API_URL=https://rest.cosmos.directory/akash
 
 BASE_API_MAINNET_URL=$NEXT_PUBLIC_BASE_API_MAINNET_URL
 NEXT_PUBLIC_SENTRY_ENABLED="true"
+NEXT_PUBLIC_GA_MEASUREMENT_ID="G-LFRGN2J2RV"

apps/provider-console/package.json

@@ -1,6 +1,6 @@
 {
   "name": "provider-console",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "build": "npm run build-env-schemas && next build",

apps/provider-console/src/components/become-provider/ProviderAttributes.tsx

@@ -33,11 +33,12 @@ import providerProcessStore, { ProviderAttribute } from "@src/store/providerProc
 import restClient from "@src/utils/restClient";
 import { sanitizeMachineAccess } from "@src/utils/sanityUtils";
 import { providerAttributesFormValuesSchema } from "../../types/providerAttributes";
+import { Title } from "../shared/Title";
 import { ResetProviderForm } from "./ResetProviderProcess";
 
 const attributeKeys = Object.keys(providerAttributesFormValuesSchema.shape);
 
-const DEFAULT_ATTRIBUTES = ['host', 'tier'];
+const DEFAULT_ATTRIBUTES = ["host", "tier"];
 
 interface ProviderAttributesProps {
   existingAttributes?: ProviderAttribute[];
@@ -66,15 +67,15 @@ export const ProviderAttributes: React.FunctionComponent<ProviderAttributesProps
     defaultValues: {
       attributes: existingAttributes
         ? existingAttributes.map(attr => ({
-          key: attributeKeys.includes(attr.key) ? attr.key : "unknown-attributes",
-          value: attr.value,
-          customKey: attributeKeys.includes(attr.key) ? "" : attr.key
-        }))
+            key: attributeKeys.includes(attr.key) ? attr.key : "unknown-attributes",
+            value: attr.value,
+            customKey: attributeKeys.includes(attr.key) ? "" : attr.key
+          }))
         : [
-          { key: "host", value: "akash", customKey: "" },
-          { key: "tier", value: "community", customKey: "" },
-          { key: "organization", value: organizationName || "", customKey: "" }
-        ]
+            { key: "host", value: "akash", customKey: "" },
+            { key: "tier", value: "community", customKey: "" },
+            { key: "organization", value: organizationName || "", customKey: "" }
+          ]
     }
   });
 
@@ -85,6 +86,7 @@ export const ProviderAttributes: React.FunctionComponent<ProviderAttributesProps
   });
 
   const { activeControlMachine } = useControlMachine();
+  const isControlMachineConnected = !!activeControlMachine;
 
   const [showSuccess, setShowSuccess] = React.useState(false);
 
@@ -118,10 +120,10 @@ export const ProviderAttributes: React.FunctionComponent<ProviderAttributesProps
   };
 
   return (
-    <div className="flex w-full flex-col items-center pt-10">
-      <div className="w-full max-w-2xl space-y-6">
+    <div className={`flex w-full flex-col items-center ${!editMode ? "pt-10" : "pt-5"}`}>
+      <div className={`w-full ${!editMode ? "max-w-2xl" : ""} space-y-6`}>
         <div>
-          <h3 className="text-xl font-bold">{existingAttributes ? "Edit Provider Attributes" : "Provider Attributes"}</h3>
+          {existingAttributes ? <Title>Edit Provider Attributes</Title> : <h3 className="text-xl font-bold">Provider Attributes</h3>}
           <p className="text-muted-foreground text-sm">Attributes choosen here will be displayed publicly to the Console.</p>
           <p className="text-muted-foreground text-sm">It will be used for filtering and querying providers during bid process.</p>
         </div>
@@ -150,11 +152,7 @@ export const ProviderAttributes: React.FunctionComponent<ProviderAttributesProps
                                 <Tooltip>
                                   <TooltipTrigger asChild>
                                     <div>
-                                      <Select 
-                                        value={field.value} 
-                                        onValueChange={value => field.onChange(value)}
-                                        disabled={isDefaultAttribute}
-                                      >
+                                      <Select value={field.value} onValueChange={value => field.onChange(value)} disabled={isDefaultAttribute}>
                                         <SelectTrigger>{field.value || "Select Key"}</SelectTrigger>
                                         <SelectContent>
                                           {availableKeys.map(key => (
@@ -201,11 +199,7 @@ export const ProviderAttributes: React.FunctionComponent<ProviderAttributesProps
                               <Tooltip>
                                 <TooltipTrigger asChild>
                                   <div>
-                                    <Input 
-                                      placeholder="Value" 
-                                      {...field} 
-                                      disabled={isDefaultAttribute}
-                                    />
+                                    <Input placeholder="Value" {...field} disabled={isDefaultAttribute} />
                                   </div>
                                 </TooltipTrigger>
                                 {isDefaultAttribute && (
@@ -219,13 +213,7 @@ export const ProviderAttributes: React.FunctionComponent<ProviderAttributesProps
                           </FormItem>
                         )}
                       />
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="icon"
-                        onClick={() => remove(index)}
-                        disabled={isDefaultAttribute}
-                      >
+                      <Button type="button" variant="outline" size="icon" onClick={() => remove(index)} disabled={isDefaultAttribute}>
                         <Trash className="h-4 w-4" />
                       </Button>
                     </div>
@@ -242,7 +230,9 @@ export const ProviderAttributes: React.FunctionComponent<ProviderAttributesProps
               <div className="flex w-full justify-between">
                 <div className="flex justify-start">{!editMode && <ResetProviderForm />}</div>
                 <div className="flex justify-end">
-                  <Button type="submit">{editMode ? "Update Attributes" : "Next"}</Button>
+                  <Button type="submit" disabled={editMode && !isControlMachineConnected}>
+                    {editMode ? "Update Attributes" : "Next"}
+                  </Button>
                 </div>
               </div>
             </form>

apps/provider-console/src/components/become-provider/ProviderPricing.tsx

@@ -24,6 +24,7 @@ import { useControlMachine } from "@src/context/ControlMachineProvider";
 import providerProcessStore from "@src/store/providerProcessStore";
 import restClient from "@src/utils/restClient";
 import { sanitizeMachineAccess } from "@src/utils/sanityUtils";
+import { Title } from "../shared/Title";
 import { ResetProviderForm } from "./ResetProviderProcess";
 
 interface ProviderPricingProps {
@@ -234,10 +235,10 @@ export const ProviderPricing: React.FC<ProviderPricingProps> = ({ onComplete, ed
   };
 
   return (
-    <div className="flex w-full flex-col items-center pt-10">
-      <div className="w-full max-w-5xl space-y-6">
+    <div className={`flex w-full flex-col items-center ${!editMode ? "pt-10" : "pt-5"}`}>
+      <div className={`w-full ${!editMode ? "max-w-5xl" : ""} space-y-6`}>
         <div>
-          <h3 className="text-2xl font-bold">Provider Pricing</h3>
+          {editMode ? <Title>Edit Provider Pricing</Title> : <h3 className="text-xl font-bold">Provider Pricing</h3>}
           <p className="text-muted-foreground text-sm">
             The prices you set here determine the price your provider bids with and total revenue it earns for you.
           </p>

apps/provider-console/src/components/become-provider/ServerAccess.tsx

@@ -1,6 +1,7 @@
 "use client";
 import React, { useCallback, useState } from "react";
-import { Button, Input, Popup, Separator } from "@akashnetwork/ui/components";
+import { Alert, AlertDescription, AlertTitle, Button, Input, Popup, Separator } from "@akashnetwork/ui/components";
+import { InfoCircle } from "iconoir-react";
 
 import { useWallet } from "@src/context/WalletProvider";
 import { ServerForm } from "./ServerForm";
@@ -110,7 +111,7 @@ export const ServerAccess: React.FC<ServerAccessProps> = ({ onComplete }) => {
               value={numberOfServers}
               onChange={handleNumberOfServersChange}
               min={1}
-              className="w-20 rounded-md border-2 text-center"
+              className="w-20 rounded-md text-center"
             />
           </div>
           <p className="text-sm">
@@ -129,17 +130,21 @@ export const ServerAccess: React.FC<ServerAccessProps> = ({ onComplete }) => {
         </div>
       ) : showNodeDistribution ? (
         <div className="space-y-6">
-          <div className="flex gap-6">
-            <div className="rounded-lg border p-6 text-center">
-              <p className="mb-4 text-3xl font-bold">{calculateNodeDistribution(numberOfServers).controlPlane}</p>
-              <h3 className="mb-2 text-xl font-bold">Control Plane Nodes</h3>
-              <p className="text-sm">Manages the cluster operations & run your workloads</p>
-            </div>
-            <div className="rounded-lg border p-6 text-center">
-              <p className="mb-4 text-3xl font-bold">{calculateNodeDistribution(numberOfServers).workerNodes}</p>
-              <h3 className="mb-2 text-xl font-bold">Worker Nodes</h3>
-              <p className="text-sm">Runs your workloads</p>
-            </div>
+          <div className="flex flex-col gap-4">
+            <Alert>
+              <div className="flex items-start gap-6">
+                <div className="pt-2">
+                  <InfoCircle className="h-6 w-6" />
+                </div>
+                <div className="flex-1">
+                  <AlertTitle>Control Plane Nodes: {calculateNodeDistribution(numberOfServers).controlPlane}</AlertTitle>
+                  <AlertDescription>Manages the cluster operations & runs your workloads</AlertDescription>
+                  <Separator className="my-4" />
+                  <AlertTitle>Worker Nodes: {calculateNodeDistribution(numberOfServers).workerNodes}</AlertTitle>
+                  <AlertDescription>Runs your workloads</AlertDescription>
+                </div>
+              </div>
+            </Alert>
           </div>
           <div className="flex w-full justify-between">
             <Button variant="ghost" onClick={() => setShowNodeDistribution(false)}>

apps/provider-console/src/components/become-provider/Stepper.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { Check, InfoCircleSolid } from "iconoir-react";
+import { Check } from "iconoir-react";
 
 interface Step {
   id: number;
@@ -50,10 +50,10 @@ const CompletedStep: React.FC<{ step: Step }> = ({ step }) => (
 
 const CurrentStep: React.FC<{ step: Step }> = ({ step }) => (
   <div className="flex items-center px-6 py-4 text-sm font-medium" aria-current="step">
-    <span className="border-primary flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border-2">
-      <InfoCircleSolid className="h-5 w-5" aria-hidden="true" />
+    <span className="bg-primary group-hover:bg-primary/80 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full">
+      <Check className="h-4 w-4 text-white" aria-hidden="true" />
     </span>
-    <span className="text-primary ml-4 text-sm font-bold">{step.name}</span>
+    <span className="ml-4 text-sm font-medium text-neutral-900 dark:text-neutral-500">{step.name}</span>
   </div>
 );
 

apps/provider-console/src/components/home/WelcomePanel.tsx

@@ -1,87 +1,63 @@
 "use client";
-import React, { useState } from "react";
-import {
-  Avatar,
-  AvatarFallback,
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger
-} from "@akashnetwork/ui/components";
-import { cn } from "@akashnetwork/ui/utils";
-import { Cloud, Learning, NavArrowDown, Rocket } from "iconoir-react";
+import React from "react";
+import { Avatar, AvatarFallback, Card, CardContent, CardHeader, CardTitle } from "@akashnetwork/ui/components";
+import { Cloud, Learning, Rocket } from "iconoir-react";
 import Link from "next/link";
 
 import { UrlService } from "@src/utils/urlUtils";
 
 export const WelcomePanel: React.FC = () => {
-  const [expanded, setExpanded] = useState(true);
-
   return (
-    <Collapsible open={expanded} onOpenChange={setExpanded}>
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle className="text-2xl font-bold">Welcome to Akash Provider Console!</CardTitle>
-
-          <CollapsibleTrigger asChild>
-            <Button size="icon" variant="ghost" className="!m-0 rounded-full" onClick={() => setExpanded(prev => !prev)}>
-              <NavArrowDown fontSize="1rem" className={cn("transition-all duration-100", { ["rotate-180"]: expanded })} />
-            </Button>
-          </CollapsibleTrigger>
-        </CardHeader>
-
-        <CollapsibleContent>
-          <CardContent>
-            <ul className="space-y-6">
-              <li className="flex items-center space-x-4">
-                <Avatar className="h-12 w-12">
-                  <AvatarFallback>
-                    <Rocket className="rotate-45" />
-                  </AvatarFallback>
-                </Avatar>
-
-                <div className="flex flex-col">
-                  <Link href={UrlService.getStarted()}>Get Started with providing compute on Akash</Link>
-                  <span className="text-muted-foreground text-sm">Become a Akash Provider with simple and easy to follow steps.</span>
-                </div>
-              </li>
-              <li className="flex items-center space-x-4">
-                <Avatar className="h-12 w-12">
-                  <AvatarFallback>
-                    <Cloud />
-                  </AvatarFallback>
-                </Avatar>
-
-                <div className="flex flex-col">
-                  <Link href="https://console.akash.network/providers" target="_blank">
-                    Explore current Providers
-                  </Link>
-                  <span className="text-muted-foreground text-sm">View a map of current Providers on the network and their resources</span>
-                </div>
-              </li>
-
-              <li className="flex items-center">
-                <Avatar className="h-12 w-12">
-                  <AvatarFallback>
-                    <Learning />
-                  </AvatarFallback>
-                </Avatar>
-
-                <div className="ml-4 flex flex-col">
-                  <Link href="https://akash.network/docs/" target="_blank">
-                    Learn more about Akash
-                  </Link>
-                  <span className="text-muted-foreground text-sm">Want to know about the advantages of using a decentralized cloud compute marketplace?</span>
-                </div>
-              </li>
-            </ul>
-          </CardContent>
-        </CollapsibleContent>
-      </Card>
-    </Collapsible>
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle className="text-2xl font-bold">Welcome to Akash Provider Console!</CardTitle>
+      </CardHeader>
+
+      <CardContent>
+        <ul className="space-y-6">
+          <li className="flex items-center space-x-4">
+            <Avatar className="h-12 w-12">
+              <AvatarFallback>
+                <Rocket className="rotate-45" />
+              </AvatarFallback>
+            </Avatar>
+
+            <div className="flex flex-col">
+              <Link href={UrlService.getStarted()}>Get Started with providing compute on Akash</Link>
+              <span className="text-muted-foreground text-sm">Become a Akash Provider with simple and easy to follow steps.</span>
+            </div>
+          </li>
+          <li className="flex items-center space-x-4">
+            <Avatar className="h-12 w-12">
+              <AvatarFallback>
+                <Cloud />
+              </AvatarFallback>
+            </Avatar>
+
+            <div className="flex flex-col">
+              <Link href="https://console.akash.network/providers" target="_blank">
+                Explore current Providers
+              </Link>
+              <span className="text-muted-foreground text-sm">View a map of current Providers on the network and their resources</span>
+            </div>
+          </li>
+
+          <li className="flex items-center">
+            <Avatar className="h-12 w-12">
+              <AvatarFallback>
+                <Learning />
+              </AvatarFallback>
+            </Avatar>
+
+            <div className="ml-4 flex flex-col">
+              <Link href="https://akash.network/docs/" target="_blank">
+                Learn more about Akash
+              </Link>
+              <span className="text-muted-foreground text-sm">Want to know about the advantages of using a decentralized cloud compute marketplace?</span>
+            </div>
+          </li>
+        </ul>
+      </CardContent>
+    </Card>
   );
 };