feat(provider): provider pricing feature

apps/provider-console/src/components/layout/Sidebar.tsx

@@ -64,9 +64,9 @@ export const Sidebar: React.FC<Props> = ({ isMobileOpen, handleDrawerToggle, isN
         {
           title: "Pricing",
           icon: props => <Calculator {...props} />,
-          url: "#",
-          activeRoutes: ["#"],
-          disabled: true
+          url: UrlService.pricing(),
+          activeRoutes: [UrlService.pricing()],
+          disabled: false
         },
         {
           title: "Attributes",

apps/provider-console/src/context/ProviderContext/ProviderContext.tsx

@@ -0,0 +1,56 @@
+"use client";
+import React from "react";
+import { useQuery } from "react-query";
+
+import consoleClient from "@src/utils/consoleClient";
+import { useWallet } from "../WalletProvider";
+
+type ContextType = {
+  providerDetails: any;
+  providerDashboard: any;
+  isLoadingProviderDetails: boolean;
+  isLoadingProviderDashboard: boolean;
+};
+
+const ProviderContext = React.createContext<ContextType>({} as ContextType);
+
+export const ProviderContextProvider = ({ children }) => {
+  const { address } = useWallet();
+
+  const { data: providerDetails, isLoading: isLoadingProviderDetails } = useQuery(
+    "providerDetails",
+    () => consoleClient.get(`/v1/providers/${address}`),
+    {
+      refetchOnWindowFocus: false,
+      retry: 3,
+      enabled: !!address
+    }
+  );
+
+  const { data: providerDashboard, isLoading: isLoadingProviderDashboard } = useQuery(
+    "providerDashboard",
+    () => consoleClient.get(`/internal/provider-dashboard/${address}`),
+    {
+      refetchOnWindowFocus: false,
+      retry: 3,
+      enabled: !!address
+    }
+  );
+
+  return (
+    <ProviderContext.Provider
+      value={{
+        providerDetails,
+        providerDashboard,
+        isLoadingProviderDetails,
+        isLoadingProviderDashboard
+      }}
+    >
+      {children}
+    </ProviderContext.Provider>
+  );
+};
+
+export const useProvider = () => {
+  return { ...React.useContext(ProviderContext) };
+};

apps/provider-console/src/context/ProviderContext/index.ts

@@ -0,0 +1 @@
+export { ProviderContextProvider as ProviderContext, useProvider } from "./ProviderContext";

apps/provider-console/src/pages/_app.tsx

@@ -12,6 +12,7 @@ import { ControlMachineProvider } from "@src/context/ControlMachineProvider";
 import { CustomChainProvider } from "@src/context/CustomChainProvider";
 import { ColorModeProvider } from "@src/context/CustomThemeContext";
 import { PricingProvider } from "@src/context/PricingProvider";
+import { ProviderContextProvider } from "@src/context/ProviderContext/ProviderContext";
 import { WalletProvider } from "@src/context/WalletProvider";
 import { queryClient } from "@src/queries";
 import { cn } from "@src/utils/styleUtils";
@@ -28,7 +29,9 @@ export default function App({ Component, pageProps }: AppProps) {
                   <CustomChainProvider>
                     <WalletProvider>
                       <ControlMachineProvider>
-                        <Component {...pageProps} />
+                        <ProviderContextProvider>
+                          <Component {...pageProps} />
+                        </ProviderContextProvider>
                       </ControlMachineProvider>
                     </WalletProvider>
                   </CustomChainProvider>

apps/provider-console/src/pages/dashboard/index.tsx

@@ -12,11 +12,11 @@ import { Layout } from "@src/components/layout/Layout";
 import { ProviderActionList } from "@src/components/shared/ProviderActionList";
 import { Title } from "@src/components/shared/Title";
 import { withAuth } from "@src/components/shared/withAuth";
-import { useSelectedChain } from "@src/context/CustomChainProvider";
 import { useWallet } from "@src/context/WalletProvider";
 import { useAKTData } from "@src/queries";
 import { useProviderActions, useProviderDashboard, useProviderDetails } from "@src/queries/useProviderQuery";
 import { formatUUsd } from "@src/utils/formatUsd";
+import { useSelectedChain } from "@src/context/CustomChainProvider";
 
 const OfflineWarningBanner: React.FC = () => (
   <div className="mb-4 rounded-md bg-yellow-100 p-4 text-yellow-700">
@@ -145,25 +145,21 @@ const Dashboard: React.FC = () => {
           )}
         </div>
       </div>
-      {isOnline && providerDetails && (
-        <>
-          <div className="mt-8">
-            <div className="text-sm font-semibold">Resources Leased Summary</div>
-            <div className="mt-2">
-              {isLoadingProviderDetails ? (
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-                  <DashboardCardSkeleton />
-                  <DashboardCardSkeleton />
-                  <DashboardCardSkeleton />
-                  <DashboardCardSkeleton />
-                </div>
-              ) : (
-                <ResourceCards providerDetails={providerDetails} />
-              )}
+      <div className="mt-8">
+        <div className="text-sm font-semibold">Resources Leased Summary</div>
+        <div className="mt-2">
+          {isLoadingProviderDetails ? (
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              <DashboardCardSkeleton />
+              <DashboardCardSkeleton />
+              <DashboardCardSkeleton />
+              <DashboardCardSkeleton />
             </div>
-          </div>
-        </>
-      )}
+          ) : (
+            <ResourceCards providerDetails={providerDetails} />
+          )}
+        </div>
+      </div>
 
       <Separator className="mt-10" />
       <div className="mt-8">

apps/provider-console/src/pages/pricing/index.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from "react";
+import { Alert, AlertDescription, AlertTitle, Spinner } from "@akashnetwork/ui/components";
+
+import { ProviderPricing } from "@src/components/become-provider/ProviderPricing";
+import { Layout } from "@src/components/layout/Layout";
+import { useControlMachine } from "@src/context/ControlMachineProvider";
+import { useProvider } from "@src/context/ProviderContext";
+import restClient from "@src/utils/restClient";
+import { convertFromPricingAPI, sanitizeMachineAccess } from "@src/utils/sanityUtils";
+
+const Pricing: React.FunctionComponent = () => {
+  const { activeControlMachine, controlMachineLoading } = useControlMachine();
+  const [existingPricing, setExistingPricing] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const { providerDetails } = useProvider();
+
+  const fetchPricing = async () => {
+    try {
+      setIsLoading(true);
+      const request = {
+        control_machine: sanitizeMachineAccess(activeControlMachine)
+      };
+      const response: any = await restClient.post("/get-provider-pricing", request);
+      if (response) {
+        setExistingPricing(convertFromPricingAPI(response.pricing));
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (activeControlMachine) {
+      fetchPricing();
+    }
+  }, [activeControlMachine]);
+
+  return (
+    <Layout>
+      <div className="relative">
+        {isLoading && (
+          <div className="absolute inset-0 z-50 flex items-center justify-center bg-white/80">
+            <div className="flex items-center gap-2">
+              <Spinner />
+              <span className="text-sm text-gray-600">Loading provider pricing...</span>
+            </div>
+          </div>
+        )}
+
+        <div className={isLoading ? 'pointer-events-none' : ''}>
+          {!activeControlMachine && !controlMachineLoading && (
+            <Alert variant="destructive">
+              <AlertTitle>Control Machine Required</AlertTitle>
+              <AlertDescription>Please connect your control machine first to start updating pricing settings.</AlertDescription>
+            </Alert>
+          )}
+          {controlMachineLoading && (
+            <Alert>
+              <AlertTitle>Connecting to Control Machine</AlertTitle>
+              <AlertDescription className="flex items-center gap-2">
+                <div className="flex items-center gap-2">
+                  <Spinner className="h-4 w-4" />
+                  <span>Please wait while we check control machine access...</span>
+                </div>
+              </AlertDescription>
+            </Alert>
+          )}
+          {activeControlMachine && !existingPricing && (
+            <Alert variant="destructive">
+              <AlertTitle>Unable to fetch pricing</AlertTitle>
+              <AlertDescription className="flex items-center justify-between">
+                Please try again later.
+                <button onClick={fetchPricing} className="rounded bg-red-100 px-3 py-1 text-sm text-red-900 hover:bg-red-200">
+                  Try Again
+                </button>
+              </AlertDescription>
+            </Alert>
+          )}
+          <ProviderPricing
+            existingPricing={existingPricing}
+            editMode={true}
+            stepChange={() => {}}
+            disabled={activeControlMachine && existingPricing ? false : true}
+            providerDetails={providerDetails}
+          />
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Pricing;

apps/provider-console/src/utils/sanityUtils.ts

@@ -13,3 +13,15 @@ export function sanitizeMachineAccess(machine: ControlMachineWithAddress | null)
         passphrase: machine.access.passphrase || null
     };
 }
+
+export function convertFromPricingAPI(pricing: any) {
+    return {
+        cpu: pricing.price_target_cpu,
+        memory: pricing.price_target_memory,
+        storage: pricing.price_target_hd_ephemeral,
+        persistentStorage: pricing.price_target_hd_pers_ssd,
+        gpu: Number(pricing.price_target_gpu_mappings.split('=')[1]),
+        ipScalePrice: pricing.price_target_ip,
+        endpointBidPrice: pricing.price_target_endpoint
+    };
+}

apps/provider-console/src/utils/urlUtils.ts

@@ -22,4 +22,5 @@ export class UrlService {
   static privacyPolicy = () => "/privacy-policy";
   static termsOfService = () => "/terms-of-service";
   static actions = () => "/actions";
+  static pricing = () => "/pricing";
 }

packages/ui/components/alert.tsx

@@ -10,6 +10,7 @@ const alertVariants = cva(
     variants: {
       variant: {
         default: "bg-background text-foreground",
+        success: "border-success/50 text-success dark:border-success [&>svg]:text-success",
         destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
         warning: "border-warning/50 text-warning dark:border-warning-500 [&>svg]:text-warning"
       }