From df33bd445b1349ee5b722b484123a7edd5c49e49 Mon Sep 17 00:00:00 2001 From: Anastasios Date: Tue, 24 Sep 2024 16:28:51 +0400 Subject: [PATCH] fix: edit network urls, closes leather-io/extension#5795 --- .../features/add-network/add-network-form.tsx | 27 ++++++++--- src/app/features/add-network/add-network.tsx | 27 ++++++----- .../features/add-network/use-add-network.tsx | 15 ++++-- .../components/network-list-item-menu.tsx | 8 ++-- src/app/features/settings/network/network.tsx | 1 + tests/page-object-models/home.page.ts | 6 +++ tests/selectors/network.selectors.ts | 4 ++ tests/specs/network/add-network.spec.ts | 47 +++++++++++++++++++ 8 files changed, 109 insertions(+), 26 deletions(-) diff --git a/src/app/features/add-network/add-network-form.tsx b/src/app/features/add-network/add-network-form.tsx index 0634a758452..eb63eb04c55 100644 --- 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(); @@ -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() { { + 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 index 1e2665f5ce7..0cde2b18420 100644 --- 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 ( <> - + @@ -31,7 +32,7 @@ export function AddNetwork() { type="submit" onClick={() => handleSubmit()} > - Add network + {title} } > @@ -44,13 +45,15 @@ export function AddNetwork() { > Use this form to add a new instance of the{' '} - - Stacks Blockchain API - {' '} + + + Stacks Blockchain API + + {' '} or{' '} . Make sure you review and trust the host before you add it. - + {error ? ( {error} ) : null} diff --git a/src/app/features/add-network/use-add-network.tsx b/src/app/features/add-network/use-add-network.tsx index 0d20529ab81..1745d6e9437 100644 --- 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 index a429d7d3950..018b73eb8b2 100644 --- 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 ( - - + + { e.stopPropagation(); onEditNetwork(); @@ -37,6 +38,7 @@ export function NetworkItemMenu({ onClickDeleteNetwork, onEditNetwork }: Props) { e.stopPropagation(); onClickDeleteNetwork(); diff --git a/src/app/features/settings/network/network.tsx b/src/app/features/settings/network/network.tsx index a22f8f11e03..27e68d065d5 100644 --- 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 index ba01c62c47f..8c8c6c42b17 100644 --- 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 index 466b6ee0e4f..3d54ab7aba0 100644 --- 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 index 1c902dc7927..ff989ab4dbf 100644 --- 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); + }); });