feat: provider deployments on provider console

.gitignore

@@ -81,4 +81,7 @@ apps/stats-web/.env
 # Data Folder
 data
 testdata
-test-results
+test-results
+
+# macos
+.DS_Store

apps/provider-console/.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

apps/provider-console/env/.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_SENTRY_DSN=https://[email protected]/2

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

@@ -0,0 +1,11 @@
+NEXT_PUBLIC_DEFAULT_NETWORK_ID=mainnet
+
+NEXT_PUBLIC_NODE_ENV=$NODE_ENV
+NEXT_PUBLIC_API_BASE_URL=https://provider-console-api.akash.network
+NEXT_PUBLIC_BASE_SECURITY_URL=https://provider-console-security.akash.network
+NEXT_PUBLIC_CONSOLE_API_MAINNET_URL=https://api-preview.cloudmos.io
+NEXT_PUBLIC_MAINNET_RPC_URL=https://rpc.cosmos.directory/akash
+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"

apps/provider-console/next.config.js

@@ -1,8 +1,9 @@
 /** @type {import('next').NextConfig} */
+
+const { withSentryConfig } = require("@sentry/nextjs");
 const nextConfig = {
   reactStrictMode: false,
   compiler: {
-    // Enables the styled-components SWC transform
     styledComponents: true
   },
   images: {
@@ -25,14 +26,19 @@ const nextConfig = {
     defaultLocale: "en-US"
   },
   webpack: config => {
-    // Fixes npm packages that depend on `node:crypto` module
     config.externals.push({
       "node:crypto": "crypto"
     });
     config.externals.push("pino-pretty");
     return config;
-  },
+  }
 };
 
-module.exports = nextConfig;
+const sentryWebpackPluginOptions = {
+  silent: true,
+  dryRun: process.env.NODE_ENV !== "production",
+  release: require("./package.json").version,
+  authToken: process.env.NODE_ENV === "production" ? process.env.SENTRY_AUTH_TOKEN : undefined
+};
 
+module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions);

apps/provider-console/nginx.conf

@@ -0,0 +1,33 @@
+# nginx.conf
+
+events {
+}
+
+http {
+    server {
+        # Redirect HTTP requests to HTTPS.
+        listen 80;
+        return 307 https://$host$request_uri;
+    }
+
+    server {
+        listen 443 ssl;
+
+        server_tokens off;
+
+        ssl_certificate /etc/nginx/ssl/my_ssl_cert.crt;
+        ssl_certificate_key /etc/nginx/ssl/my_ssl_key.key;
+
+        location / {
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto https;
+            proxy_set_header X-Forwarded-Ssl on;
+            proxy_set_header Host $http_host;
+            proxy_redirect off;
+            proxy_pass http://127.0.0.1:3000;
+            proxy_buffers 8 16k;
+            proxy_buffer_size 16k;
+            proxy_cookie_path / "/; HTTPOnly; Secure";
+        }
+    }
+}

apps/provider-console/package.json

@@ -13,33 +13,61 @@
   },
   "dependencies": {
     "@akashnetwork/ui": "*",
+    "@chain-registry/types": "^0.50.1",
     "@cosmos-kit/cosmostation-extension": "^2.12.2",
     "@cosmos-kit/keplr": "^2.12.2",
     "@cosmos-kit/leap-extension": "^2.12.2",
     "@cosmos-kit/react": "^2.18.0",
+    "@hookform/resolvers": "^3.9.0",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/material": "^5.4.4",
+    "@mui/material-nextjs": "^5.15.11",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@sentry/nextjs": "^8.34.0",
+    "@sentry/tracing": "^7.114.0",
+    "@types/recharts": "^1.8.29",
+    "apexcharts": "^3.54.0",
+    "chain-registry": "^1.69.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "date-fns": "^2.29.3",
+    "geist": "^1.3.0",
+    "iconoir-react": "^7.9.0",
     "jotai": "^2.9.0",
+    "jsencrypt": "^3.3.2",
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.395.0",
-    "next": "14.2.4",
+    "next": "^14.2.15",
+    "next-themes": "^0.2.1",
+    "postcss-nesting": "^12.0.2",
     "react": "^18",
+    "react-apexcharts": "^1.4.1",
     "react-dom": "^18",
+    "react-error-boundary": "^3.1.4",
+    "react-hook-form": "^7.52.2",
+    "react-icons": "^5.0.1",
+    "react-intl": "^6.4.2",
     "react-query": "^3.39.3",
+    "recharts": "^2.13.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
-    "ts-loader": "^9.5.1"
+    "ts-loader": "^9.5.1",
+    "usehooks-ts": "^2.9.1",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@akashnetwork/dev-config": "*",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "eslint": "^8",
+    "eslint": "^8.57.1",
     "eslint-config-next": "14.2.4",
     "next-transpile-modules": "^10.0.1",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "typescript": "^5",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "autoprefixer": "^10.4.16",
+    "eslint-plugin-simple-import-sort": "^12.1.0"
   }
 }

apps/provider-console/sentry.client.config.js

@@ -0,0 +1,9 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  enabled: process.env.NODE_ENV !== "development",
+  integrations: [Sentry.replayIntegration()],
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0
+});

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

@@ -0,0 +1,170 @@
+"use client";
+
+import React from "react";
+import { Controller, SubmitHandler,useFieldArray, useForm } from "react-hook-form";
+import {
+  Button,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  Separator
+} from "@akashnetwork/ui/components";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useAtom } from "jotai";
+import { PlusIcon, TrashIcon } from "lucide-react";
+import { z } from "zod";
+
+import providerProcessStore from "@src/store/providerProcessStore";
+import { providerAttributesFormValuesSchema } from "../../types/providerAttributes";
+import ResetProviderForm from "./ResetProviderProcess";
+
+const attributeKeys = Object.keys(providerAttributesFormValuesSchema.shape);
+
+interface ProviderAttributesProps {
+  stepChange: () => void;
+}
+
+const providerFormSchema = z.object({
+  attributes: z.array(
+    z.object({
+      key: z.string().min(1, "Key is required"),
+      value: z.string().min(1, "Value is required"),
+      customKey: z.string().optional()
+    })
+  )
+});
+
+type ProviderFormValues = z.infer<typeof providerFormSchema>;
+
+export const ProviderAttributes: React.FunctionComponent<ProviderAttributesProps> = ({ stepChange }) => {
+  const [providerPricing, setProviderPricing] = useAtom(providerProcessStore.providerProcessAtom);
+  const form = useForm<ProviderFormValues>({
+    resolver: zodResolver(providerFormSchema),
+    defaultValues: {
+      attributes: [{ key: "", value: "", customKey: "" }]
+    }
+  });
+
+  const { control } = form;
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "attributes"
+  });
+
+  const onSubmit: SubmitHandler<ProviderFormValues> = async data => {
+    const updatedProviderPricing = {
+      ...providerPricing,
+      attributes: data.attributes.map(attr => ({
+        ...attr,
+        customKey: attr.customKey || ""
+      }))
+    };
+    setProviderPricing(updatedProviderPricing);
+    stepChange();
+  };
+
+  return (
+    <div className="flex w-full flex-col items-center pt-10">
+      <div className="w-full max-w-2xl space-y-6">
+        <div>
+          <h3 className="text-xl font-bold">Provider Attributes</h3>
+          <p className="text-muted-foreground text-sm">Please enter your provider attributes.</p>
+        </div>
+        <div>
+          <Separator />
+        </div>
+        <div>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+              <div>
+                <h4 className="mb-2 text-lg font-semibold">Attributes</h4>
+                {fields.map((field, index) => {
+                  const selectedKeys = form.watch("attributes").map(attr => attr.key);
+                  const availableKeys = attributeKeys.filter(key => !selectedKeys.includes(key) || key === field.key || key === "unknown-attributes");
+
+                  return (
+                    <div key={field.id} className="mb-2 flex space-x-2">
+                      <Controller
+                        control={form.control}
+                        name={`attributes.${index}.key`}
+                        render={({ field }) => (
+                          <FormItem className="flex-1">
+                            <FormControl>
+                              <Select value={field.value} onValueChange={value => field.onChange(value)}>
+                                <SelectTrigger>{field.value || "Select Key"}</SelectTrigger>
+                                <SelectContent>
+                                  {availableKeys.map(key => (
+                                    <SelectItem key={key} value={key}>
+                                      {key}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                      {form.watch(`attributes.${index}.key`) === "unknown-attributes" && (
+                        <FormField
+                          control={form.control}
+                          name={`attributes.${index}.customKey`}
+                          render={({ field }) => (
+                            <FormItem className="flex-1">
+                              <FormControl>
+                                <Input placeholder="Custom Key" {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      )}
+                      <FormField
+                        control={form.control}
+                        name={`attributes.${index}.value`}
+                        render={({ field }) => (
+                          <FormItem className="flex-1">
+                            <FormControl>
+                              <Input placeholder="Value" {...field} />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                      <Button type="button" variant="outline" size="icon" onClick={() => remove(index)}>
+                        <TrashIcon className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  );
+                })}
+                <Button type="button" variant="outline" size="sm" onClick={() => append({ key: "", value: "", customKey: "" })}>
+                  <PlusIcon className="mr-2 h-4 w-4" />
+                  Add Attribute
+                </Button>
+              </div>
+              <div className="">
+                <Separator />
+              </div>
+              <div className="flex w-full justify-between">
+                <div className="flex justify-start">
+                  <ResetProviderForm />
+                </div>
+                <div className="flex justify-end">
+                  <Button type="submit">Next</Button>
+                </div>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+};