chore: remove acceptRisk checkbox

FuelLabs · Oct 28, 2024 · a8df5cb · a8df5cb
1 parent 56927d5
commit a8df5cb
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 27 deletions.
diff --git a/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx b/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx
@@ -12,7 +12,7 @@ import { motion } from 'framer-motion';
 import { ControlledField, animations } from '~/systems/Core';
 import { NetworkReviewCard } from '~/systems/Network';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Controller } from 'react-hook-form';
 import type { UseNetworkFormReturn } from '../../hooks';
 
@@ -36,24 +36,26 @@ export function NetworkForm({
   isValidUrl,
   providerChainId,
 }: NetworkFormProps) {
-  const [isFirstClickedReview, setIsFirstClickedReview] = useState(false);
   const [isFirstShownTestConnectionBtn, setIsFirstShownTestConnectionBtn] =
     useState(false);
   const { control, formState, getValues, watch } = form;
 
-  const isValid = formState.isValid;
   const name = getValues('name');
   const url = getValues('url');
   const acceptRisk = watch('acceptRisk');
   const chainId = getValues('chainId');
-  const showReview = !isEditing && name;
+  const isValid = useMemo(
+    () => formState.isValid && !Object.keys(formState.errors ?? {}).length,
+    [formState.isValid, formState.errors]
+  );
+  const showReview = !isEditing && name && chainId && isValid;
 
   function onChangeUrl() {
     form.setValue('name', '', { shouldValidate: true });
+    form.clearErrors();
   }
 
-  function onClickCheckNetwork() {
-    setIsFirstClickedReview(true);
+  async function onClickCheckNetwork() {
     onClickReview?.();
   }
 
@@ -88,7 +90,6 @@ export function NetworkForm({
                 URL
               </HelperIcon>
             }
-            hideError={!isFirstClickedReview}
             render={({ field }) => (
               <MotionInput {...animations.slideInTop()}>
                 <Input.Field
@@ -108,7 +109,6 @@ export function NetworkForm({
             isRequired={!acceptRisk}
             isInvalid={Boolean(formState.errors?.chainId)}
             label="Chain ID"
-            hideError={!isFirstClickedReview}
             render={({ field }) => (
               <MotionInput {...animations.slideInTop()}>
                 <Input.Field

diff --git a/packages/app/src/systems/Network/hooks/useNetworkForm.ts b/packages/app/src/systems/Network/hooks/useNetworkForm.ts
@@ -39,7 +39,7 @@ const schema = yup
         'chainId-match',
         'Chain ID does not match the provider Chain ID.',
         function (value) {
-          const providerChainId = this.parent.providerChainId;
+          const providerChainId = this.options.context?.providerChainId;
           return !value || !providerChainId || value === providerChainId;
         }
       )
@@ -65,7 +65,7 @@ export type UseNetworkFormReturn = ReturnType<typeof useNetworkForm>;
 export type UseAddNetworkOpts = {
   defaultValues?: Maybe<NetworkFormValues>;
   context?: {
-    providerChainId?: string;
+    providerChainId?: number;
     isEditing?: boolean;
   };
 };
@@ -74,7 +74,7 @@ export function useNetworkForm({ defaultValues, context }: UseAddNetworkOpts) {
   const form = useForm<NetworkFormValues>({
     resolver: yupResolver<NetworkFormValues>(schema),
     reValidateMode: 'onChange',
-    mode: 'onBlur',
+    mode: 'all',
     defaultValues: defaultValues || DEFAULT_VALUES,
     context,
   });

diff --git a/packages/app/src/systems/Network/pages/AddNetwork/AddNetwork.tsx b/packages/app/src/systems/Network/pages/AddNetwork/AddNetwork.tsx
@@ -25,41 +25,37 @@ export function AddNetwork() {
 
   const context = useMemo(
     () => ({
-      providerChainId: chainInfo?.consensusParameters?.chainId?.toString(),
+      providerChainId: chainInfo?.consensusParameters?.chainId?.toNumber(),
     }),
     [chainInfo?.consensusParameters?.chainId]
   );
 
   const form = useNetworkForm({ context });
   const { isDirty, invalid } = form.getFieldState('url', form.formState);
   const isValidUrl = isDirty && !invalid;
-
-  useEffect(() => {
-    if (!chainInfo) return;
-    if (form.getValues('acceptRisk') && !form.getValues('chainId')) {
-      form.setValue(
-        'chainId',
-        chainInfo.consensusParameters?.chainId.toNumber()
-      );
-    }
-  }, [chainInfo, form.setValue, form.getValues]);
+  const formChainId = form.getValues('chainId');
 
   useEffect(() => {
     if (isValidUrl && !isLoadingChainInfo && chainInfo) {
       form.setValue('name', chainInfo.name, { shouldValidate: true });
 
-      if (
-        form.getValues('chainId') &&
-        form.getValues('chainId') !==
+      // @TODO: When form.getValues('acceptRisk') is implemented add it to the if statement
+      if (!formChainId) {
+        form.setValue(
+          'chainId',
           chainInfo.consensusParameters?.chainId.toNumber()
-      ) {
+        );
+        return;
+      }
+
+      if (formChainId !== chainInfo.consensusParameters?.chainId.toNumber()) {
         form.setError('chainId', {
           type: 'manual',
           message: 'Chain ID does not match the fetched value.',
         });
       }
     }
-  }, [chainInfo, isLoadingChainInfo, isValidUrl, form]);
+  }, [chainInfo, isLoadingChainInfo, isValidUrl, form, formChainId]);
 
   useEffect(() => {
     if (chainInfoError) {