fix: network editing showing wrong network information

.changeset/shy-items-eat.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Fixed Edit Network screen not displaying correct information.

packages/app/playwright/e2e/Networks.test.ts

@@ -50,6 +50,23 @@ test.describe('Networks', () => {
     await expect(selector).toHaveText(/Another/i);
   });
 
+  test('should display correct network data while editing', async () => {
+    await visit(page, '/wallet');
+    await getByAriaLabel(page, 'Selected Network').click();
+    const networkItems = page.locator('[aria-label^="fuel_network-item-"]');
+    for (const networkItem of await networkItems.all()) {
+      const networkName = await networkItem
+        .locator('[aria-label="Network name"]')
+        .textContent();
+      await networkItem.locator('[aria-label="Update"]').click();
+      await hasText(page, /Update network/i);
+      const inputName = getInputByName(page, 'name');
+      await expect(inputName).toHaveValue(networkName.trim());
+      getByAriaLabel(page, 'Cancel network update').click();
+      await hasText(page, /Networks/i);
+    }
+  });
+
   test('should be able to update a network', async () => {
     await visit(page, '/wallet');
     await getByAriaLabel(page, 'Selected Network').click();
@@ -61,7 +78,7 @@ test.describe('Networks', () => {
     const inputName = getInputByName(page, 'name');
     await expect(inputName).toBeFocused();
     await inputName.fill('Local 1');
-    const update = getButtonByText(page, /update/i);
+    const update = getByAriaLabel(page, 'Update network');
     expect(update).toBeEnabled();
     await update.click();
     await hasText(page, /Local 1/);

packages/app/src/systems/Network/components/NetworkItem/NetworkItem.tsx

@@ -70,7 +70,7 @@ export const NetworkItem = forwardRef<HTMLDivElement, NetworkItemProps>(
         {...(showActions && { rightEl: actions })}
       >
         {/* <NetworkStatus network={network} /> */}
-        <Text>{network?.name}</Text>
+        <Text aria-label="Network name">{network?.name}</Text>
       </CardList.Item>
     );
   }

packages/app/src/systems/Network/hooks/useNetworks.ts

@@ -19,13 +19,27 @@ const selectors = {
   selectedNetwork: (state: NetworksMachineState) => {
     return state.context?.network || undefined;
   },
+  editingNetwork: (id: string) => (state: NetworksMachineState) => {
+    return (
+      (id && state.context?.networks?.find((n) => n.id === id)) || undefined
+    );
+  },
 };
 
 export function useNetworks() {
   const overlay = useOverlay();
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  const selectedNetworkId = (overlay.metadata as any)?.id;
   const networks = store.useSelector(Services.networks, selectors.networks);
   const network = store.useSelector(Services.networks, selectors.network);
   const isLoading = store.useSelector(Services.networks, selectors.isLoading);
+  const editingNetwork = store.useSelector(
+    Services.networks,
+    useMemo(
+      () => selectors.editingNetwork(selectedNetworkId),
+      [selectedNetworkId]
+    )
+  );
   const selectedNetworkState = store.useSelector(
     Services.networks,
     selectors.selectedNetwork
@@ -68,7 +82,7 @@ export function useNetworks() {
   function goToUpdate(id?: string) {
     if (!id) return;
     store.editNetwork({ id });
-    store.openNetworkUpdate();
+    store.openNetworkUpdate({ id });
   }
 
   return {
@@ -84,6 +98,7 @@ export function useNetworks() {
     },
     isLoading,
     selectedNetwork,
+    editingNetwork,
     network,
     networks,
   };

packages/app/src/systems/Network/pages/UpdateNetwork/UpdateNetwork.tsx

@@ -5,14 +5,14 @@ import { NetworkForm, useNetworkForm, useNetworks } from '~/systems/Network';
 import { OverlayDialogTopbar } from '~/systems/Overlay';
 
 export function UpdateNetwork() {
-  const { network, isLoading, handlers } = useNetworks();
+  const { editingNetwork, isLoading, handlers } = useNetworks();
 
   const form = useNetworkForm({
-    defaultValues: network,
+    defaultValues: editingNetwork,
   });
 
   function onSubmit(data: NetworkFormValues) {
-    handlers.updateNetwork({ id: network?.id as string, data });
+    handlers.updateNetwork({ id: editingNetwork?.id as string, data });
   }
 
   return (
@@ -31,7 +31,11 @@ export function UpdateNetwork() {
         </Focus.Scope>
       </Dialog.Description>
       <Dialog.Footer>
-        <Button variant="ghost" onPress={handlers.openNetworks}>
+        <Button
+          variant="ghost"
+          onPress={handlers.openNetworks}
+          aria-label="Cancel network update"
+        >
           Cancel
         </Button>
         <Button

packages/app/src/systems/Overlay/events.tsx

@@ -55,10 +55,10 @@ export function overlayEvents(store: Store) {
         input: { modal: 'networks.add' },
       });
     },
-    openNetworkUpdate() {
+    openNetworkUpdate(params: { id: string }) {
       store.send(Services.overlay, {
         type: 'OPEN',
-        input: { modal: 'networks.update' },
+        input: { modal: 'networks.update', params },
       });
     },
     openTransactionApprove() {