Merge pull request #67 from deep-ink-ventures/elio-policy-form

created elio policy form

src/components/PolicyForm.tsx

@@ -1,4 +1,5 @@
 import { PolicyAddressesForm } from '@/components';
+import { ErrorMessage } from '@hookform/error-message';
 // import useMC from '@/hooks/useMC';
 import { FormProvider, useForm, type SubmitHandler } from 'react-hook-form';
 // import useMCStore from '@/stores/MCStore';
@@ -9,11 +10,95 @@ interface PolicyFormValues {
   }[];
 }
 
+export type PolicyFormType = 'ELIO_DAO';
+
 interface PolicyFormProps {
+  formType?: PolicyFormType;
   formName: string;
   accountId: string;
 }
 
+const ElioDAOPolicyForm = (props: { disabled?: boolean; formName: string }) => {
+  const { disabled, formName } = props;
+
+  const formMethods = useForm<PolicyFormValues>({
+    defaultValues: {
+      [`${props.formName}`]: [
+        {
+          address: '',
+        },
+      ],
+    },
+  });
+  const {
+    register,
+    formState: { errors },
+  } = formMethods;
+  return (
+    <FormProvider {...formMethods}>
+      <div className='w-full space-y-4 p-2'>
+        <div className=' w-full px-4'>
+          <p className='ml-1'>Core</p>
+          <input
+            type='text'
+            placeholder='Contract Address'
+            className='input input-primary'
+            disabled={disabled}
+            {...register(`${formName}ElioCore`, {
+              required: 'Required',
+            })}
+          />
+          <ErrorMessage
+            errors={errors}
+            name={`${formName}ElioCore`}
+            render={({ message }) => (
+              <p className='ml-2 mt-1 text-error-content'>{message}</p>
+            )}
+          />
+        </div>
+        <div className=' w-full px-4'>
+          <p className='ml-1'>Assets</p>
+          <input
+            type='text'
+            placeholder='Contract Address'
+            className='input input-primary'
+            disabled={disabled}
+            {...register(`${formName}ElioAssets`, {
+              required: 'Required',
+            })}
+          />
+          <ErrorMessage
+            errors={errors}
+            name={`${formName}ElioAssets`}
+            render={({ message }) => (
+              <p className='ml-2 mt-1 text-error-content'>{message}</p>
+            )}
+          />
+        </div>
+        <div className=' w-full px-4'>
+          <p className='ml-1'>Votes</p>
+          <input
+            type='text'
+            placeholder='Contract Address'
+            className='input input-primary'
+            disabled={disabled}
+            {...register(`${formName}ElioVotes`, {
+              required: 'Required',
+            })}
+          />
+          <ErrorMessage
+            errors={errors}
+            name={`${formName}ElioVotes`}
+            render={({ message }) => (
+              <p className='ml-2 mt-1 text-error-content'>{message}</p>
+            )}
+          />
+        </div>
+      </div>
+    </FormProvider>
+  );
+};
+
 const PolicyForm = (props: PolicyFormProps) => {
   // const {attachPolicy, installPolicyContract, initMulticliquePolicy} = useMC();
 
@@ -48,4 +133,6 @@ const PolicyForm = (props: PolicyFormProps) => {
   );
 };
 
+PolicyForm.ELIODAO = ElioDAOPolicyForm;
+
 export default PolicyForm;

src/components/Settings.tsx

@@ -10,6 +10,10 @@ import cn from 'classnames';
 import { useState } from 'react';
 import PolicyForm from './PolicyForm';
 
+enum PolicyFormAccordion {
+  ELIO = 'ELIO',
+}
+
 const SettingsTabs: Array<{ id: string; label: string }> = [
   {
     id: 'addSigner',
@@ -35,7 +39,7 @@ const Settings = (props: { accountId: string }) => {
     s.handleErrors,
     s.addTxnNotification,
   ]);
-  const [activeAccordion, setActiveAccordion] = useState<number | null>(null);
+  const [activeAccordion, setActiveAccordion] = useState<PolicyFormAccordion | null>(null);
   // make this global?
   const [activeSettingsTab, setActiveSettingsTab] = useState(
     SettingsTabs.at(0)?.id
@@ -259,31 +263,25 @@ const Settings = (props: { accountId: string }) => {
         })}>
         <div className='w-full space-y-2'>
           <h4 className='text-center'>Attach Policy</h4>
-          {Array(1)
-            .fill(null)
-            .map((_item, index) => {
-              return (
-                <Accordion.Container
-                  key={index}
-                  id={index}
-                  onClick={() =>
-                    setActiveAccordion(activeAccordion === index ? null : index)
-                  }
-                  color='base'
-                  expanded={index === activeAccordion}>
-                  <Accordion.Header className='flex gap-2 text-sm'>
-                    <div className='grow font-semibold'>{'ELIO_DAO'}</div>
-                    <TransactionBadge status='Active' />
-                  </Accordion.Header>
-                  <Accordion.Content className='flex'>
-                    <PolicyForm
-                      formName={`ELIO_DAO`}
-                      accountId={props.accountId}
-                    />
-                  </Accordion.Content>
-                </Accordion.Container>
-              );
-            })}
+          <Accordion.Container
+            id={PolicyFormAccordion.ELIO}
+            onClick={() =>
+              setActiveAccordion(
+                activeAccordion === PolicyFormAccordion.ELIO
+                  ? null
+                  : PolicyFormAccordion.ELIO
+              )
+            }
+            color='base'
+            expanded={PolicyFormAccordion.ELIO === activeAccordion}>
+            <Accordion.Header className='flex gap-2 text-sm'>
+              <div className='grow font-semibold'>{'ELIO_DAO'}</div>
+              <TransactionBadge status='Active' />
+            </Accordion.Header>
+            <Accordion.Content className='flex'>
+              <PolicyForm.ELIODAO formName='ELIO_DAO' />
+            </Accordion.Content>
+          </Accordion.Container>
         </div>
       </div>
     </>