fix: edit network urls, closes #5795

leather-io · Sep 24, 2024 · df33bd4 · df33bd4
1 parent e415be9
commit df33bd4
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 26 deletions.
diff --git a/src/app/features/add-network/add-network-form.tsx b/src/app/features/add-network/add-network-form.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 AddNetworkFormProps {
+  isEditNetworkMode: boolean;
+}
+
+export function AddNetworkForm({ isEditNetworkMode }: AddNetworkFormProps) {
   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);
         }}
       >

diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx
@@ -1,6 +1,6 @@
 import { NetworkSelectors } from '@tests/selectors/network.selectors';
 import { Form, Formik } from 'formik';
-import { Stack, styled } from 'leather-styles/jsx';
+import { Box, Stack, styled } from 'leather-styles/jsx';
 
 import { Button, Link } from '@leather.io/ui';
 
@@ -12,11 +12,12 @@ import { AddNetworkForm } from './add-network-form';
 import { useAddNetwork } from './use-add-network';
 
 export function AddNetwork() {
-  const { error, initialFormValues, loading, onSubmit } = useAddNetwork();
+  const { error, initialFormValues, loading, onSubmit, isEditNetworkMode } = useAddNetwork();
 
+  const title = isEditNetworkMode ? 'Edit network' : 'Add network';
   return (
     <>
-      <PageHeader title="Add network" />
+      <PageHeader title={title} />
       <Content>
         <Page>
           <Formik initialValues={initialFormValues} onSubmit={onSubmit}>
@@ -31,7 +32,7 @@ export function AddNetwork() {
                     type="submit"
                     onClick={() => handleSubmit()}
                   >
-                    Add network
+                    {title}
                   </Button>
                 }
               >
@@ -44,13 +45,15 @@ export function AddNetwork() {
                   >
                     <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>{' '}
+                      <Box display="inline-block">
+                        <Link
+                          href="https://github.com/blockstack/stacks-blockchain-api"
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          Stacks Blockchain API
+                        </Link>
+                      </Box>{' '}
                       or{' '}
                       <Link
                         href="https://mempool.space/docs/api/rest"
@@ -61,7 +64,7 @@ export function AddNetwork() {
                       </Link>
                       . Make sure you review and trust the host before you add it.
                     </styled.span>
-                    <AddNetworkForm />
+                    <AddNetworkForm isEditNetworkMode={isEditNetworkMode} />
                     {error ? (
                       <ErrorLabel data-testid={NetworkSelectors.ErrorText}>{error}</ErrorLabel>
                     ) : null}

diff --git a/src/app/features/add-network/use-add-network.tsx b/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;
 

diff --git a/src/app/features/settings/network/components/network-list-item-menu.tsx b/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,6 +38,7 @@ export function NetworkItemMenu({ onClickDeleteNetwork, onEditNetwork }: Props)
               </HStack>
             </DropdownMenu.Item>
             <DropdownMenu.Item
+              data-testid={NetworkSelectors.DeleteNetworkMenuBtn}
               onClick={e => {
                 e.stopPropagation();
                 onClickDeleteNetwork();

diff --git a/src/app/features/settings/network/network.tsx b/src/app/features/settings/network/network.tsx
@@ -75,6 +75,7 @@ export function NetworkSheet({ onClose }: NetworkSheetProps) {
             navigate(RouteUrls.AddNetwork, {
               state: {
                 network: networks[id],
+                isEditNetworkMode: true,
               },
             });
           }}

diff --git a/tests/page-object-models/home.page.ts b/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',
+    });
+  }
 }
diff --git a/tests/selectors/network.selectors.ts b/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',
 }
diff --git a/tests/specs/network/add-network.spec.ts b/tests/specs/network/add-network.spec.ts
@@ -93,4 +93,51 @@ test.describe('Networks tests', () => {
     const errorMessage = await errorMsgElement.innerText();
     test.expect(errorMessage).toEqual(NetworkSelectors.NoBitcoinNodeFetch);
   });
+
+  test('proper initial values on edit network', async ({ homePage, page, networkPage }) => {
+    await networkPage.inputNetworkNameField('Test network');
+    await networkPage.inputNetworkKeyField('test-network');
+    await networkPage.inputNetworkStacksAddressField('https://leather.granite.world');
+
+    await networkPage.clickAddNetwork();
+    await homePage.waitForHomePageReady();
+
+    await homePage.clickSettingsButton();
+
+    await page.getByTestId(SettingsSelectors.ChangeNetworkAction).click();
+
+    await networkPage.page.getByTestId(NetworkSelectors.NetworkMenuBtn).click({ force: true });
+    await networkPage.page.getByTestId(NetworkSelectors.EditNetworkMenuBtn).click();
+
+    const stacksInputText = await networkPage.page
+      .getByTestId(NetworkSelectors.NetworkStacksAddress)
+      .inputValue();
+
+    test.expect(stacksInputText).toEqual('https://leather.granite.world');
+  });
+
+  test('delete network', async ({ homePage, page, networkPage }) => {
+    const id = 'test-network';
+
+    await networkPage.inputNetworkNameField('Test network');
+    await networkPage.inputNetworkKeyField(id);
+    await networkPage.inputNetworkStacksAddressField('https://leather.granite.world');
+
+    await networkPage.clickAddNetwork();
+    await homePage.waitForHomePageReady();
+
+    await homePage.clickSettingsButton();
+
+    await page.getByTestId(SettingsSelectors.ChangeNetworkAction).click();
+    let networkEl = networkPage.page.getByTestId(id);
+
+    await test.expect(networkEl).toHaveCount(1);
+
+    await networkPage.page.getByTestId(NetworkSelectors.NetworkMenuBtn).click({ force: true });
+    await networkPage.page.getByTestId(NetworkSelectors.DeleteNetworkMenuBtn).click();
+
+    networkEl = networkPage.page.getByTestId(id);
+
+    await test.expect(networkEl).toHaveCount(0);
+  });
 });