feat: enhance AddNetwork and NetworkForm components with improved err…

…or handling and dynamic name input
FuelLabs · Dec 16, 2024 · 7651aa6 · 7651aa6
1 parent f47465e
commit 7651aa6
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git a/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx b/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx
@@ -44,6 +44,7 @@ export function NetworkForm({
 
   const url = useWatch({ control, name: 'url' });
   const chainId = useWatch({ control, name: 'chainId' });
+  const customName = useWatch({ control, name: 'name' });
 
   useEffect(() => {
     if (isReviewing && chainName) {
@@ -63,7 +64,7 @@ export function NetworkForm({
         <>
           <NetworkReviewCard
             headerText="You're adding this network"
-            name={chainName || ''}
+            name={customName || chainName || ''}
             chainId={chainId}
             url={url}
           />
@@ -88,6 +89,11 @@ export function NetworkForm({
               </MotionInput>
             )}
           />
+          {formState.errors?.name && (
+            <Form.ErrorMessage>
+              {formState.errors.name.message}
+            </Form.ErrorMessage>
+          )}
         </>
       )}
       {!isReviewing && (

diff --git a/packages/app/src/systems/Network/machines/networksMachine.ts b/packages/app/src/systems/Network/machines/networksMachine.ts
@@ -146,8 +146,11 @@ export const networksMachine = createMachine(
           },
           onDone: [
             {
-              target: 'idle',
+              target: 'waitingAddNetwork',
               cond: FetchMachine.hasError,
+              actions: assign({
+                error: (_, ev) => ev.data,
+              }),
             },
             {
               actions: [

diff --git a/packages/app/src/systems/Network/pages/AddNetwork/AddNetwork.tsx b/packages/app/src/systems/Network/pages/AddNetwork/AddNetwork.tsx
@@ -62,15 +62,24 @@ export function AddNetwork() {
     });
   }
 
-  function onAddNetwork() {
+  async function onAddNetwork() {
     if (!name) return;
-    handlers.addNetwork({
-      data: {
-        chainId: Number(chainId),
-        name,
-        url,
-      },
-    });
+    try {
+      await handlers.addNetwork({
+        data: {
+          chainId: Number(chainId),
+          name,
+          url,
+        },
+      });
+    } catch (error) {
+      if (error instanceof Error && error.message.includes('already exists')) {
+        form.setError('name', {
+          type: 'manual',
+          message: 'A network with this name already exists',
+        });
+      }
+    }
   }
 
   return (