Merge pull request #835 from JoinColony/fix/15516198-custom-extension…

…s-data Fix/15516198 custom extensions data
JoinColony · Jul 20, 2023 · db8d583 · db8d583
2 parents b4e25cc + 7ab5650
commit db8d583
Show file tree

Hide file tree

Showing 28 changed files with 456 additions and 285 deletions.
diff --git a/src/components/common/Extensions/ExtensionItem/ExtensionItem.tsx b/src/components/common/Extensions/ExtensionItem/ExtensionItem.tsx
@@ -25,13 +25,13 @@ const ExtensionItem: FC<ExtensionItemProps> = ({
     extensionUrl,
     isExtensionInstalled,
     status,
-    handeNavigateToExtensionDetails,
+    handleNavigateToExtensionDetails,
   } = useExtensionItem(extensionId);
 
   const button = (
     <ActionButton
       isExtensionInstalled={!!isExtensionInstalled}
-      handeNavigateToExtensionDetails={handeNavigateToExtensionDetails}
+      handleNavigateToExtensionDetails={handleNavigateToExtensionDetails}
       extensionUrl={extensionUrl}
     />
   );

diff --git a/src/components/common/Extensions/ExtensionItem/hooks.ts b/src/components/common/Extensions/ExtensionItem/hooks.ts
@@ -17,7 +17,7 @@ export const useExtensionItem = (extensionId: string) => {
 
   const extensionUrl = `/colony/${colony?.name}/extensions/${extensionId}`;
 
-  const handeNavigateToExtensionDetails = useCallback(() => {
+  const handleNavigateToExtensionDetails = useCallback(() => {
     navigate(extensionUrl);
   }, [navigate, extensionUrl]);
 
@@ -26,6 +26,6 @@ export const useExtensionItem = (extensionId: string) => {
     isExtensionInstalled,
     status,
     badgeMessage,
-    handeNavigateToExtensionDetails,
+    handleNavigateToExtensionDetails,
   };
 };
diff --git a/src/components/common/Extensions/ExtensionItem/partials/ActionButton/ActionButton.tsx b/src/components/common/Extensions/ExtensionItem/partials/ActionButton/ActionButton.tsx
@@ -12,14 +12,14 @@ const displayName = 'common.Extensions.ExtensionItem.partials.ActionButton';
 const ActionButton: FC<ActionButtonProps> = ({
   isExtensionInstalled,
   extensionUrl,
-  handeNavigateToExtensionDetails,
+  handleNavigateToExtensionDetails,
 }) => {
   const { formatMessage } = useIntl();
   const isMobile = useMobile();
 
   const handleClick = (event: React.MouseEvent) => {
     event.stopPropagation();
-    handeNavigateToExtensionDetails();
+    handleNavigateToExtensionDetails();
   };
 
   return (

diff --git a/src/components/common/Extensions/ExtensionItem/partials/ActionButton/types.ts b/src/components/common/Extensions/ExtensionItem/partials/ActionButton/types.ts
@@ -1,5 +1,5 @@
 export interface ActionButtonProps {
   isExtensionInstalled: boolean;
   extensionUrl: string;
-  handeNavigateToExtensionDetails: () => void;
+  handleNavigateToExtensionDetails: () => void;
 }
diff --git a/src/components/common/Extensions/MainNavigation/partials/NavMobile/NavMobile.tsx b/src/components/common/Extensions/MainNavigation/partials/NavMobile/NavMobile.tsx
@@ -39,7 +39,9 @@ const NavMobile: FC<NavItemMobileProps> = ({ item, isOpen, toggleItem }) => {
             <span
               className={clsx(
                 'flex ml-2.5 transition-transform duration-normal',
-                { 'rotate-180': isOpen },
+                {
+                  'rotate-180': isOpen,
+                },
               )}
             >
               <Icon name="caret-down" appearance={{ size: 'extraTiny' }} />

diff --git a/src/components/common/Extensions/SpecialInput/SpecialInput.module.css b/src/components/common/Extensions/SpecialInput/SpecialInput.module.css
@@ -3,7 +3,7 @@
 }
 
 .field {
-  @apply bg-base-white px-3.5 py-3 transition-all duration-normal min-w-[2.375rem] rounded-r border rounded-l-none text-center text-gray-600;
+  @apply bg-base-white px-3.5 py-3 transition-all duration-normal min-w-[2.375rem] text-gray-600 rounded-r border rounded-l-none text-center;
 }
 
 .input {

diff --git a/src/components/common/Extensions/SpecialInput/SpecialInput.tsx b/src/components/common/Extensions/SpecialInput/SpecialInput.tsx
@@ -21,7 +21,11 @@ const SpecialInput: FC<SpecialInputProps> = ({
   const { formatMessage } = useIntl();
 
   return (
-    <div className={clsx(styles.wrapper, 'group')}>
+    <div
+      className={clsx(styles.wrapper, 'group', {
+        'pointer-events-none opacity-50': disabled,
+      })}
+    >
       <input
         defaultValue={defaultValue}
         name={name}
@@ -31,9 +35,6 @@ const SpecialInput: FC<SpecialInputProps> = ({
           styles.input
         } group-hover:border-blue-200 group-focus-within:border-blue-200 ${
           isError ? 'border-negative-400' : 'border-gray-300'
-        } ${
-          disabled &&
-          'pointer-events-none opacity-50 group-hover:border-gray-300'
         }`}
         id={id}
         placeholder={placeholder}
@@ -46,9 +47,6 @@ const SpecialInput: FC<SpecialInputProps> = ({
           styles.field
         } group-focus-within:border-blue-200 group-hover:border-blue-200 ${
           isError ? 'border-negative-400' : 'border-gray-300'
-        } ${
-          disabled &&
-          'pointer-events-none opacity-50 group-hover:border-gray-300'
         }`}
       >
         {type === 'hours' ? formatMessage({ id: 'hours' }) : '%'}

diff --git a/src/components/frame/Extensions/pages/LazyConsensusPage/LazyConsensusPage.tsx b/src/components/frame/Extensions/pages/LazyConsensusPage/LazyConsensusPage.tsx
@@ -23,6 +23,7 @@ const LazyConsensusPage: FC = () => {
     useAccordion();
   const {
     extensionData,
+    initialExtensionContent,
     extensionContent,
     methods,
     handleSubmit,
@@ -102,7 +103,7 @@ const LazyConsensusPage: FC = () => {
               <div className="mt-6">
                 <Accordion
                   openIndex={isAccordionOpen ? openIndex : -1}
-                  items={extensionContent || []}
+                  items={extensionContent || initialExtensionContent}
                   onOpenIndexChange={onOpenIndexChange}
                   errors={methods.formState.errors}
                 />

diff --git a/src/components/frame/Extensions/pages/LazyConsensusPage/hooks.tsx b/src/components/frame/Extensions/pages/LazyConsensusPage/hooks.tsx
@@ -167,7 +167,7 @@ export const useLazyConsensusPage = (
     resolver: yupResolver(validationSchema),
   });
 
-  const isCustemExtentionErrorExist = [
+  const isCustomExtensionErrorExist = [
     'totalStakeFraction',
     'voterRewardFraction',
     'userMinStakeFraction',
@@ -179,42 +179,48 @@ export const useLazyConsensusPage = (
   ].some((item) => Object.keys(methods.formState.errors).includes(item));
 
   const shouldBeRadioButtonChangeToCustom = useMemo(
-    () => methods.formState.isDirty && isCustemExtentionErrorExist,
-    [methods.formState, isCustemExtentionErrorExist],
+    () => methods.formState.isDirty && isCustomExtensionErrorExist,
+    [methods.formState, isCustomExtensionErrorExist],
   );
 
   const extensionContent = useCallback(
     (data) => [
       {
         id: 'step-0',
         title: formatMessage({ id: 'custom.extension.parameters' }),
-        content: data?.map((item) => {
-          return {
-            id: item?.paramName,
-            textItem: (
-              <ContentTypeText
-                title={item?.title?.defaultMessage || item?.title}
-                subTitle={
-                  item?.description?.defaultMessage || item?.description
-                }
-              />
-            ),
-            inputData: {
-              inputType:
-                item.complementaryLabel === 'percent' ? 'percent' : 'hours',
-              // @ts-ignore
-              maxValue: item?.validation?.tests[2].OPTIONS.params.max,
-              // @ts-ignore
-              minValue: item?.validation?.tests[0].OPTIONS.params.more,
-              register: methods.register,
-              unregister: methods.unregister,
-              watch: methods.watch,
-              name: item.paramName,
-            },
-            maxValue:
-              item.maxValue || item?.validation?.tests[2].OPTIONS.params.max,
-          };
-        }),
+        content: data?.map(
+          ({
+            paramName,
+            title,
+            description,
+            complementaryLabel,
+            maxValue,
+            validation,
+          }) => {
+            return {
+              id: paramName,
+              textItem: (
+                <ContentTypeText
+                  title={title?.defaultMessage || title}
+                  subTitle={description?.defaultMessage || description}
+                />
+              ),
+              inputData: {
+                inputType:
+                  complementaryLabel === 'percent' ? 'percent' : 'hours',
+                // @ts-ignore
+                maxValue: validation?.tests[2].OPTIONS.params.max,
+                // @ts-ignore
+                minValue: validation?.tests[0].OPTIONS.params.more,
+                register: methods.register,
+                unregister: methods.unregister,
+                watch: methods.watch,
+                name: paramName,
+              },
+              maxValue: maxValue || validation?.tests[2].OPTIONS.params.max,
+            };
+          },
+        ),
       },
     ],
     [methods.register, methods.unregister, methods.watch, formatMessage],
@@ -224,10 +230,111 @@ export const useLazyConsensusPage = (
     extensionData?.initializationParams?.forEach((param) => {
       return methods.setValue(
         param.paramName,
-        data.find((item) => item.paramName === param.paramName)?.defaultValue,
+        data.find(({ paramName }) => paramName === param.paramName)
+          ?.defaultValue,
       );
     });
 
+  const initialExtensionContent = useMemo(
+    () => [
+      {
+        id: 'step-0',
+        title: { id: 'custom.extension.parameters' },
+        content: [
+          {
+            id: 'totalStakeFraction',
+            textItem: <ContentTypeText title="Required Stake" />,
+            inputData: {
+              inputType: 'percent',
+              register: methods.register,
+              unregister: methods.unregister,
+              watch: methods.watch,
+              name: 'totalStakeFraction',
+            },
+          },
+          {
+            id: 'voterRewardFraction',
+            textItem: <ContentTypeText title="Voter Reward" />,
+            inputData: {
+              inputType: 'percent',
+              register: methods.register,
+              unregister: methods.unregister,
+              watch: methods.watch,
+              name: 'voterRewardFraction',
+            },
+          },
+          {
+            id: 'userMinStakeFraction',
+            textItem: <ContentTypeText title="Minimum Stake" />,
+            inputData: {
+              inputType: 'percent',
+              register: methods.register,
+              unregister: methods.unregister,
+              watch: methods.watch,
+              name: 'userMinStakeFraction',
+            },
+          },
+          {
+            id: 'maxVoteFraction',
+            textItem: <ContentTypeText title="End Vote Threshold" />,
+            inputData: {
+              inputType: 'percent',
+              register: methods.register,
+              unregister: methods.unregister,
+              watch: methods.watch,
+              name: 'maxVoteFraction',
+            },
+          },
+          {
+            id: 'stakePeriod',
+            textItem: <ContentTypeText title="Staking Phase Duration" />,
+            inputData: {
+              inputType: 'percent',
+              register: methods.register,
+              unregister: methods.unregister,
+              watch: methods.watch,
+              name: 'stakePeriod',
+            },
+          },
+          {
+            id: 'submitPeriod',
+            textItem: <ContentTypeText title="Voting Phase Duration" />,
+            inputData: {
+              inputType: 'percent',
+              register: methods.register,
+              unregister: methods.unregister,
+              watch: methods.watch,
+              name: 'submitPeriod',
+            },
+          },
+          {
+            id: 'revealPeriod',
+            textItem: <ContentTypeText title="Reveal Phase Duration" />,
+            inputData: {
+              inputType: 'percent',
+              register: methods.register,
+              unregister: methods.unregister,
+              watch: methods.watch,
+              name: 'revealPeriod',
+            },
+          },
+          {
+            id: 'escalationPeriod',
+            textItem: <ContentTypeText title="Escalation Phase Duration" />,
+            inputData: {
+              inputType: 'percent',
+              register: methods.register,
+              unregister: methods.unregister,
+              watch: methods.watch,
+              name: 'escalationPeriod',
+            },
+          },
+        ],
+      },
+    ],
+    [methods.register, methods.unregister, methods.watch],
+  );
+
   const setSelectedContentAndFormFields = (governanceValue) => {
     let selectedContent;
     let selectedFormFields;
@@ -350,6 +457,7 @@ export const useLazyConsensusPage = (
     extensionData,
     status,
     badgeMessage,
+    initialExtensionContent,
     extensionContent: extensionContentParameters,
     onSubmit,
     handleSubmit: methods.handleSubmit,

diff --git a/src/components/shared/Extensions/Accordion/Accordion.tsx b/src/components/shared/Extensions/Accordion/Accordion.tsx
@@ -24,7 +24,7 @@ const Accordion: FC<AccordionProps> = ({
   };
 
   return (
-    <div className="bg-base-white">
+    <div>
       {items?.map((item, index) => (
         <AccordionItem
           {...item}