Merge pull request #35 from oasisprotocol/mz/providers

Fetch providers from Nexus in creation flow

Author: buberdds

src/pages/CreateApp/BuildStep.tsx

@@ -4,7 +4,6 @@ import { CreateFormHeader } from './CreateFormHeader';
 import { CreateFormNavigation } from './CreateFormNavigation';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Controller, useForm } from 'react-hook-form';
-import { InputFormField } from './InputFormField';
 import { Label } from '@oasisprotocol/ui-library/src/components/ui/label';
 import {
   RadioGroup,
@@ -14,6 +13,8 @@ import { buildFormSchema, type BuildFormData } from './types';
 import { SelectFormField } from './SelectFormField';
 import { useGetRosePrice } from '../../coin-gecko/api';
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton';
+import { useNetwork } from '../../hooks/useNetwork';
+import { useGetRuntimeRoflmarketProviders } from '../../nexus/api';
 
 type AgentStepProps = {
   handleNext: () => void;
@@ -51,6 +52,18 @@ export const BuildStep: FC<AgentStepProps> = ({
   setAppDataForm,
   selectedTemplateName,
 }) => {
+  const network = useNetwork();
+  const providersQuery = useGetRuntimeRoflmarketProviders(network, 'sapphire');
+  const { data } = providersQuery;
+  const providers = data?.data.providers;
+  const providerOptions = providers
+    ? providers?.map((provider) => ({
+        value: provider.address,
+        label:
+          (provider.metadata['net.oasis.provider.name'] as string) ||
+          provider.address,
+      }))
+    : [];
   const {
     data: rosePrice,
     isLoading: isLoadingRosePrice,
@@ -99,19 +112,12 @@ export const BuildStep: FC<AgentStepProps> = ({
         onSubmit={form.handleSubmit(onSubmit)}
         className="space-y-6 mb-6 w-full"
       >
-        <InputFormField
-          control={form.control}
-          name="artifacts"
-          label="Base Artifacts"
-          placeholder="oasis boot 0.5.0, ROFL container 0.5.1"
-        />
-
         <SelectFormField
           control={form.control}
           name="provider"
           label="Provider"
           placeholder="Select provider"
-          options={[{ value: 'OPF', label: 'OPF' }]}
+          options={[...providerOptions]}
         />
 
         <div className="grid gap-2">

src/pages/CreateApp/PaymentStep.tsx

@@ -2,18 +2,23 @@ import { type FC } from 'react';
 import { CreateLayout } from './CreateLayout';
 import { CreateFormHeader } from './CreateFormHeader';
 import { CreateFormNavigation } from './CreateFormNavigation';
+import { type AppData } from './types';
 
 type AgentStepProps = {
   handleNext: () => void;
   handleBack: () => void;
   selectedTemplateName?: string;
+  appData?: AppData;
 };
 
 export const PaymentStep: FC<AgentStepProps> = ({
   handleNext,
   handleBack,
   selectedTemplateName,
+  appData,
 }) => {
+  console.log('appData', appData);
+
   return (
     <CreateLayout
       currentStep={4}

src/pages/CreateApp/index.tsx

@@ -74,6 +74,7 @@ export const Create: FC = () => {
         <PaymentStep
           handleNext={handleNext}
           handleBack={handleBack}
+          appData={appData}
           selectedTemplateName={selectedTemplate?.name}
         />
       )}

src/pages/CreateApp/templates.tsx

@@ -24,7 +24,7 @@ export const templates = [
         license: parsedTemplate.license || '',
       },
       build: {
-        provider: 'OPF',
+        provider: '',
         resources: 'medium',
       },
     },

src/pages/CreateApp/types.ts

@@ -47,7 +47,6 @@ export const agentFormSchema = z.object({
 });
 
 export const buildFormSchema = z.object({
-  artifacts: z.string().optional(),
   provider: z.string().min(1, {
     message: 'Provider is required.',
   }),