fix: edit network urls, closes #5795

src/app/features/add-network/add-network.tsx

@@ -1,77 +1,12 @@
-import { NetworkSelectors } from '@tests/selectors/network.selectors';
-import { Form, Formik } from 'formik';
-import { Stack, styled } from 'leather-styles/jsx';
+import { NetworkForm } from './network-form';
+import { NetworkFormLayout } from './network-form.layout';
 
-import { Button, Link } from '@leather.io/ui';
-
-import { ErrorLabel } from '@app/components/error-label';
-import { Card, Content, Page } from '@app/components/layout';
-import { PageHeader } from '@app/features/container/headers/page.header';
-
-import { AddNetworkForm } from './add-network-form';
-import { useAddNetwork } from './use-add-network';
+const title = 'Add network';
 
 export function AddNetwork() {
-  const { error, initialFormValues, loading, onSubmit } = useAddNetwork();
-
   return (
-    <>
-      <PageHeader title="Add network" />
-      <Content>
-        <Page>
-          <Formik initialValues={initialFormValues} onSubmit={onSubmit}>
-            {({ handleSubmit }) => (
-              <Card
-                footerBorder
-                footer={
-                  <Button
-                    fullWidth
-                    aria-busy={loading}
-                    data-testid={NetworkSelectors.AddNetworkBtn}
-                    type="submit"
-                    onClick={() => handleSubmit()}
-                  >
-                    Add network
-                  </Button>
-                }
-              >
-                <Form data-testid={NetworkSelectors.NetworkPageReady}>
-                  <Stack
-                    gap="space.05"
-                    maxWidth="pageWidth"
-                    px={{ base: 'space.00', sm: 'space.04', md: 'space.05' }}
-                    my="space.05"
-                  >
-                    <styled.span textStyle="body.02">
-                      Use this form to add a new instance of the{' '}
-                      <Link
-                        href="https://github.com/blockstack/stacks-blockchain-api"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        Stacks Blockchain API
-                      </Link>{' '}
-                      or{' '}
-                      <Link
-                        href="https://mempool.space/docs/api/rest"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        Bitcoin Blockchain API
-                      </Link>
-                      . Make sure you review and trust the host before you add it.
-                    </styled.span>
-                    <AddNetworkForm />
-                    {error ? (
-                      <ErrorLabel data-testid={NetworkSelectors.ErrorText}>{error}</ErrorLabel>
-                    ) : null}
-                  </Stack>
-                </Form>
-              </Card>
-            )}
-          </Formik>
-        </Page>
-      </Content>
-    </>
+    <NetworkFormLayout title={title}>
+      <NetworkForm title={title} />
+    </NetworkFormLayout>
   );
 }

src/app/features/add-network/edit-network.tsx

@@ -0,0 +1,12 @@
+import { NetworkForm } from './network-form';
+import { NetworkFormLayout } from './network-form.layout';
+
+const title = 'Edit network';
+
+export function EditNetwork() {
+  return (
+    <NetworkFormLayout title={title}>
+      <NetworkForm isEditNetworkMode title={title} />
+    </NetworkFormLayout>
+  );
+}

src/app/features/add-network/add-network-form.tsx → src/app/features/add-network/network-form-fields.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 
 import { NetworkSelectors } from '@tests/selectors/network.selectors';
 import { useFormikContext } from 'formik';
@@ -18,6 +18,8 @@ import {
   Title,
 } from '@leather.io/ui';
 
+import { useOnMount } from '@app/common/hooks/use-on-mount';
+
 import { type AddNetworkFormValues } from './use-add-network';
 
 const networks: {
@@ -42,7 +44,11 @@ const networks: {
   },
 ];
 
-export function AddNetworkForm() {
+interface NetworkFormFieldsProps {
+  isEditNetworkMode?: boolean;
+}
+
+export function NetworkFormFields({ isEditNetworkMode }: NetworkFormFieldsProps) {
   const { handleChange, setFieldValue, values, initialValues } =
     useFormikContext<AddNetworkFormValues>();
 
@@ -60,8 +66,8 @@ export function AddNetworkForm() {
     [setFieldValue]
   );
 
-  useEffect(() => {
-    switch (values.bitcoinNetwork) {
+  function setNetworkUrls(value: BitcoinNetworkModes) {
+    switch (value) {
       case 'mainnet':
         setStacksUrl('https://api.hiro.so');
         setBitcoinUrl(BITCOIN_API_BASE_URL_MAINNET);
@@ -79,7 +85,15 @@ export function AddNetworkForm() {
         setBitcoinUrl('https://mempool.space/testnet/api');
         break;
     }
-  }, [setStacksUrl, setBitcoinUrl, values.bitcoinNetwork]);
+  }
+
+  useOnMount(() => {
+    if (isEditNetworkMode) {
+      return;
+    }
+
+    setNetworkUrls(values.bitcoinNetwork);
+  });
 
   return (
     <>
@@ -98,7 +112,8 @@ export function AddNetworkForm() {
 
       <Select.Root
         defaultValue={initialValues.bitcoinNetwork || networks[0].value}
-        onValueChange={value => {
+        onValueChange={(value: BitcoinNetworkModes) => {
+          setNetworkUrls(value);
           void setFieldValue('bitcoinNetwork', value);
         }}
       >

src/app/features/add-network/network-form.layout.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+
+import { Content, Page } from '@app/components/layout';
+import { PageHeader } from '@app/features/container/headers/page.header';
+
+interface NetworkFormLayoutProps {
+  title: string;
+  children: ReactNode;
+}
+
+export function NetworkFormLayout({ title, children }: NetworkFormLayoutProps) {
+  return (
+    <>
+      <PageHeader title={title} />
+      <Content>
+        <Page>{children}</Page>
+      </Content>
+    </>
+  );
+}

src/app/features/add-network/network-form.tsx

@@ -0,0 +1,70 @@
+import { NetworkSelectors } from '@tests/selectors/network.selectors';
+import { Form, Formik } from 'formik';
+import { Stack, styled } from 'leather-styles/jsx';
+
+import { Button, Link } from '@leather.io/ui';
+
+import { ErrorLabel } from '@app/components/error-label';
+import { Card } from '@app/components/layout';
+
+import { NetworkFormFields } from './network-form-fields';
+import { useAddNetwork } from './use-add-network';
+
+interface NetworkFormProps {
+  title: string;
+  isEditNetworkMode?: boolean;
+}
+
+export function NetworkForm({ isEditNetworkMode, title }: NetworkFormProps) {
+  const { error, initialFormValues, loading, onSubmit } = useAddNetwork();
+
+  return (
+    <Formik initialValues={initialFormValues} onSubmit={onSubmit}>
+      {({ handleSubmit }) => (
+        <Card
+          footerBorder
+          footer={
+            <Button
+              fullWidth
+              aria-busy={loading}
+              data-testid={NetworkSelectors.AddNetworkBtn}
+              type="submit"
+              onClick={() => handleSubmit()}
+            >
+              {title}
+            </Button>
+          }
+        >
+          <Form data-testid={NetworkSelectors.NetworkPageReady}>
+            <Stack
+              gap="space.05"
+              maxWidth="pageWidth"
+              px={{ base: 'space.00', sm: 'space.04', md: 'space.05' }}
+              my="space.05"
+            >
+              <styled.span textStyle="body.02">
+                Use this form to add a new instance of the{' '}
+                <Link
+                  href="https://github.com/blockstack/stacks-blockchain-api"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Stacks Blockchain API
+                </Link>{' '}
+                or{' '}
+                <Link href="https://mempool.space/docs/api/rest" target="_blank" rel="noreferrer">
+                  Bitcoin Blockchain API
+                </Link>
+                . Make sure you review and trust the host before you add it.
+              </styled.span>
+              <NetworkFormFields isEditNetworkMode={isEditNetworkMode} />
+              {error ? (
+                <ErrorLabel data-testid={NetworkSelectors.ErrorText}>{error}</ErrorLabel>
+              ) : null}
+            </Stack>
+          </Form>
+        </Card>
+      )}
+    </Formik>
+  );
+}

src/app/features/add-network/use-add-network.tsx

@@ -44,14 +44,17 @@ const initialFormValues: AddNetworkFormValues = {
   bitcoinNetwork: 'mainnet',
 };
 
-function useInitialValues() {
+function useAddNetworkState() {
   const { state } = useLocation();
 
-  if (!state) {
-    return initialFormValues;
-  }
+  return {
+    isEditNetworkMode: state?.isEditNetworkMode,
+    network: state?.network as NetworkConfiguration | undefined,
+  };
+}
 
-  const network = state.network as NetworkConfiguration | undefined;
+function useInitialValues() {
+  const { network } = useAddNetworkState();
 
   if (!network) {
     return initialFormValues;
@@ -79,11 +82,13 @@ export function useAddNetwork() {
   const network = useCurrentStacksNetworkState();
   const networksActions = useNetworksActions();
   const initialValues = useInitialValues();
+  const { isEditNetworkMode } = useAddNetworkState();
 
   return {
     error,
     initialFormValues: initialValues,
     loading,
+    isEditNetworkMode,
     onSubmit: async (values: AddNetworkFormValues) => {
       const { name, stacksUrl, bitcoinUrl, key, bitcoinNetwork } = values;
 

src/app/features/settings/network/components/network-list-item-menu.tsx

@@ -1,4 +1,4 @@
-import { SettingsSelectors } from '@tests/selectors/settings.selectors';
+import { NetworkSelectors } from '@tests/selectors/network.selectors';
 import { css } from 'leather-styles/css';
 import { HStack, styled } from 'leather-styles/jsx';
 
@@ -12,8 +12,8 @@ interface Props {
 export function NetworkItemMenu({ onClickDeleteNetwork, onEditNetwork }: Props) {
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.IconButton>
-        <EllipsisVIcon color="ink.text-primary" data-testid={SettingsSelectors.SettingsMenuBtn} />
+      <DropdownMenu.IconButton data-testid={NetworkSelectors.NetworkMenuBtn}>
+        <EllipsisVIcon color="ink.text-primary" />
       </DropdownMenu.IconButton>
       <DropdownMenu.Portal>
         <DropdownMenu.Content
@@ -26,6 +26,7 @@ export function NetworkItemMenu({ onClickDeleteNetwork, onEditNetwork }: Props)
         >
           <DropdownMenu.Group>
             <DropdownMenu.Item
+              data-testid={NetworkSelectors.EditNetworkMenuBtn}
               onClick={e => {
                 e.stopPropagation();
                 onEditNetwork();
@@ -37,13 +38,14 @@ export function NetworkItemMenu({ onClickDeleteNetwork, onEditNetwork }: Props)
               </HStack>
             </DropdownMenu.Item>
             <DropdownMenu.Item
+              data-testid={NetworkSelectors.DeleteNetworkMenuBtn}
               onClick={e => {
                 e.stopPropagation();
                 onClickDeleteNetwork();
               }}
             >
               <HStack color="red.action-primary-default">
-                <TrashIcon />
+                <TrashIcon color="red.action-primary-default" />
                 <styled.span textStyle="label.02">Delete</styled.span>
               </HStack>
             </DropdownMenu.Item>

src/app/features/settings/network/network.tsx

@@ -72,7 +72,7 @@ export function NetworkSheet({ onClose }: NetworkSheetProps) {
           }}
           onEditNetwork={() => {
             onClose();
-            navigate(RouteUrls.AddNetwork, {
+            navigate(RouteUrls.EditNetwork, {
               state: {
                 network: networks[id],
               },

src/app/routes/app-routes.tsx

@@ -14,6 +14,7 @@ import { Content } from '@app/components/layout/layouts/content.layout';
 import { SwitchAccountLayout } from '@app/components/layout/layouts/switch-account.layout';
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { AddNetwork } from '@app/features/add-network/add-network';
+import { EditNetwork } from '@app/features/add-network/edit-network';
 import { Container } from '@app/features/container/container';
 import { HomeHeader } from '@app/features/container/headers/home.header';
 import { IncreaseBtcFeeSheet } from '@app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog';
@@ -145,6 +146,15 @@ function useAppRoutes() {
             }
           />
 
+          <Route
+            path={RouteUrls.EditNetwork}
+            element={
+              <AccountGate>
+                <EditNetwork />
+              </AccountGate>
+            }
+          />
+
           <Route
             path={RouteUrls.Fund}
             element={

src/shared/route-urls.ts

@@ -23,6 +23,7 @@ export enum RouteUrls {
   // Active wallet routes
   Home = '/',
   AddNetwork = '/add-network',
+  EditNetwork = '/edit-network',
   Fund = '/fund/:currency',
   FundChooseCurrency = '/fund-choose-currency',
   IncreaseStxFee = '/increase-fee/stx/:txid',

tests/page-object-models/home.page.ts

@@ -132,4 +132,10 @@ export class HomePage {
   async goToFundChooseCurrencyPage() {
     await this.fundAccountBtn.click();
   }
+
+  async waitForHomePageReady() {
+    await this.page.waitForSelector(createTestSelector(HomePageSelectors.HomePageContainer), {
+      state: 'attached',
+    });
+  }
 }

tests/selectors/network.selectors.ts

@@ -17,4 +17,8 @@ export enum NetworkSelectors {
   AddNetworkBtn = 'add-network-btn',
   AddNetworkBitcoinAPISelector = 'add-network-bitcoin-api-selector',
   BitcoinAPIOptionTestnet = 'bitcoin-api-option-testnet',
+
+  NetworkMenuBtn = 'network-menu-btn',
+  EditNetworkMenuBtn = 'edit-network-menu-btn',
+  DeleteNetworkMenuBtn = 'delete-network-menu-btn',
 }