From f47465e959b7810682d7aa2c3bb663f84ce8e988 Mon Sep 17 00:00:00 2001
From: Nelito Junior <ngvjqp@gmail.com>
Date: Mon, 16 Dec 2024 18:16:52 -0300
Subject: [PATCH 1/3] feat: enhance NetworkForm with dynamic name field and
 validation

- Added a controlled input for customizing the network name in the NetworkForm component.
- Implemented useEffect to set the network name based on the chainName when reviewing.
- Updated AddNetwork component to ensure the name is required before adding a network.
- Improved error handling in NetworkService to check for existing networks by name and URL separately.
---
 .../components/NetworkForm/NetworkForm.tsx    | 43 ++++++++++++++++---
 .../Network/pages/AddNetwork/AddNetwork.tsx   |  5 ++-
 .../src/systems/Network/services/network.ts   |  8 +++-
 3 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx b/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx
index 0eebab47d..7f213d0ca 100644
--- a/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx
+++ b/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx
@@ -40,11 +40,17 @@ export function NetworkForm({
 }: NetworkFormProps) {
   const [isFirstShownTestConnectionBtn, setIsFirstShownTestConnectionBtn] =
     useState(false);
-  const { control, formState } = form;
+  const { control, formState, setValue } = form;
 
   const url = useWatch({ control, name: 'url' });
   const chainId = useWatch({ control, name: 'chainId' });
 
+  useEffect(() => {
+    if (isReviewing && chainName) {
+      setValue('name', chainName);
+    }
+  }, [isReviewing, chainName, setValue]);
+
   useEffect(() => {
     if (isValid && chainId) {
       setIsFirstShownTestConnectionBtn(true);
@@ -54,12 +60,35 @@ export function NetworkForm({
   return (
     <Box.Stack css={{ width: '100%' }} gap="$4">
       {isReviewing && (
-        <NetworkReviewCard
-          headerText="You're adding this network"
-          name={chainName || ''}
-          chainId={chainId}
-          url={url}
-        />
+        <>
+          <NetworkReviewCard
+            headerText="You're adding this network"
+            name={chainName || ''}
+            chainId={chainId}
+            url={url}
+          />
+          <ControlledField
+            control={control}
+            name="name"
+            label={
+              <HelperIcon message="Customize the network name to avoid conflicts">
+                Network Name
+              </HelperIcon>
+            }
+            isRequired
+            isInvalid={Boolean(formState.errors?.name)}
+            render={({ field }) => (
+              <MotionInput {...animations.slideInTop()}>
+                <Input.Field
+                  {...field}
+                  id="network-name"
+                  aria-label="Network name"
+                  placeholder={chainName || 'Enter network name'}
+                />
+              </MotionInput>
+            )}
+          />
+        </>
       )}
       {!isReviewing && (
         <>
diff --git a/packages/app/src/systems/Network/pages/AddNetwork/AddNetwork.tsx b/packages/app/src/systems/Network/pages/AddNetwork/AddNetwork.tsx
index b31643cf8..c4f30e259 100644
--- a/packages/app/src/systems/Network/pages/AddNetwork/AddNetwork.tsx
+++ b/packages/app/src/systems/Network/pages/AddNetwork/AddNetwork.tsx
@@ -31,6 +31,7 @@ export function AddNetwork() {
   const form = useNetworkForm({ context });
   const url = useWatch({ control: form.control, name: 'url' });
   const chainId = useWatch({ control: form.control, name: 'chainId' });
+  const name = useWatch({ control: form.control, name: 'name' });
   const isValid =
     form.formState.isDirty &&
     form.formState.isValid &&
@@ -62,7 +63,7 @@ export function AddNetwork() {
   }
 
   function onAddNetwork() {
-    const name = chainInfoToAdd?.name || '';
+    if (!name) return;
     handlers.addNetwork({
       data: {
         chainId: Number(chainId),
@@ -101,7 +102,7 @@ export function AddNetwork() {
         <Button
           onPress={onAddNetwork}
           intent="primary"
-          isDisabled={!isReviewingAddNetwork}
+          isDisabled={!isReviewingAddNetwork || !name}
           isLoading={isLoading}
           leftIcon={<Icon icon="Plus" />}
           aria-label="Add new network"
diff --git a/packages/app/src/systems/Network/services/network.ts b/packages/app/src/systems/Network/services/network.ts
index 7833ef2a4..42a24377a 100644
--- a/packages/app/src/systems/Network/services/network.ts
+++ b/packages/app/src/systems/Network/services/network.ts
@@ -353,8 +353,12 @@ export class NetworkService {
       name,
       url,
     });
-    if (network) {
-      throw new Error('Network with Name or URL already exists');
+
+    if (network?.url === url) {
+      throw new Error('Network with URL already exists');
+    }
+    if (network?.name === name) {
+      throw new Error('Network with Name already exists');
     }
   }
 

From 7651aa686e3e9bf10b6075d18edf38802fb7011d Mon Sep 17 00:00:00 2001
From: Nelito Junior <ngvjqp@gmail.com>
Date: Mon, 16 Dec 2024 18:56:41 -0300
Subject: [PATCH 2/3] feat: enhance AddNetwork and NetworkForm components with
 improved error handling and dynamic name input

---
 .../components/NetworkForm/NetworkForm.tsx    |  8 +++++-
 .../Network/machines/networksMachine.ts       |  5 +++-
 .../Network/pages/AddNetwork/AddNetwork.tsx   | 25 +++++++++++++------
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx b/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx
index 7f213d0ca..b8615028a 100644
--- 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
index d35706922..6611f52d6 100644
--- 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
index c4f30e259..ca140f538 100644
--- 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 (

From 3390ef1e4c5e4f75c42b89bc1910bbfc94297578 Mon Sep 17 00:00:00 2001
From: Nelito Junior <ngvjqp@gmail.com>
Date: Mon, 16 Dec 2024 19:01:33 -0300
Subject: [PATCH 3/3] feat: add ability to edit network name in NetworkForm
 component

---
 .changeset/hip-beds-do.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/hip-beds-do.md

diff --git a/.changeset/hip-beds-do.md b/.changeset/hip-beds-do.md
new file mode 100644
index 000000000..e3b5f68a1
--- /dev/null
+++ b/.changeset/hip-beds-do.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Allow editing network name when adding.