feat: add handle network item menu, closes #5124

package.json

@@ -137,11 +137,11 @@
     "@leather.io/bitcoin": "0.10.0",
     "@leather.io/constants": "0.8.2",
     "@leather.io/crypto": "1.1.0",
-    "@leather.io/models": "0.10.2",
-    "@leather.io/query": "2.1.0",
+    "@leather.io/models": "0.11.0",
+    "@leather.io/query": "2.2.0",
     "@leather.io/tokens": "0.7.0",
-    "@leather.io/ui": "1.9.0",
-    "@leather.io/utils": "0.11.0",
+    "@leather.io/ui": "1.9.1",
+    "@leather.io/utils": "0.11.1",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.4.0",
     "@noble/secp256k1": "2.1.0",
@@ -252,7 +252,7 @@
     "@leather.io/eslint-config": "0.6.1",
     "@leather.io/panda-preset": "0.3.4",
     "@leather.io/prettier-config": "0.5.0",
-    "@leather.io/rpc": "2.1.1",
+    "@leather.io/rpc": "2.1.2",
     "@ls-lint/ls-lint": "2.2.3",
     "@mdx-js/loader": "3.0.0",
     "@pandacss/dev": "0.40.1",

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

@@ -39,7 +39,8 @@ const networks: {
 ];
 
 export function AddNetworkForm() {
-  const { handleChange, setFieldValue, values } = useFormikContext<AddNetworkFormValues>();
+  const { handleChange, setFieldValue, values, initialValues } =
+    useFormikContext<AddNetworkFormValues>();
 
   const setStacksUrl = useCallback(
     (value: string) => {
@@ -92,7 +93,7 @@ export function AddNetworkForm() {
       <Title>Bitcoin API</Title>
 
       <Select.Root
-        defaultValue={networks[0].value}
+        defaultValue={initialValues.bitcoinNetwork || networks[0].value}
         onValueChange={value => {
           void setFieldValue('bitcoinNetwork', value);
         }}

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

@@ -1,9 +1,15 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { ChainID } from '@stacks/transactions';
+import z from 'zod';
 
-import type { BitcoinNetworkModes, DefaultNetworkConfigurations } from '@leather.io/models';
+import {
+  type BitcoinNetworkModes,
+  type DefaultNetworkConfigurations,
+  type NetworkConfiguration,
+  networkConfigurationSchema,
+} from '@leather.io/models';
 
 import { RouteUrls } from '@shared/route-urls';
 import { isValidUrl } from '@shared/utils/validate-url';
@@ -39,16 +45,40 @@ const initialFormValues: AddNetworkFormValues = {
   bitcoinNetwork: 'mainnet',
 };
 
+function useInitialValues() {
+  const { state } = useLocation();
+  const network = state.network as NetworkConfiguration | undefined;
+
+  if (!network) {
+    return initialFormValues;
+  }
+
+  const isProperStateProvided = networkConfigurationSchema.safeParse(network).success;
+
+  if (!isProperStateProvided) {
+    return initialFormValues;
+  }
+
+  return {
+    key: network.id,
+    name: network.name,
+    stacksUrl: network.chain.stacks.url,
+    bitcoinUrl: network.chain.bitcoin.bitcoinUrl,
+    bitcoinNetwork: network.chain.bitcoin.bitcoinNetwork,
+  };
+}
+
 export function useAddNetwork() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const navigate = useNavigate();
   const network = useCurrentStacksNetworkState();
   const networksActions = useNetworksActions();
+  const initialValues = useInitialValues();
 
   return {
     error,
-    initialFormValues,
+    initialFormValues: initialValues,
     loading,
     onSubmit: async (values: AddNetworkFormValues) => {
       const { name, stacksUrl, bitcoinUrl, key, bitcoinNetwork } = values;
@@ -113,10 +143,16 @@ export function useAddNetwork() {
         isSubnet &&
         (parentNetworkId === PeerNetworkID.Mainnet || parentNetworkId === PeerNetworkID.Testnet);
 
+      function removeEditedNetwork() {
+        if (initialValues.key) {
+          networksActions.removeNetwork(initialValues.key);
+        }
+      }
       // Currently, only subnets of mainnet and testnet are supported in the wallet
       if (isFirstLevelSubnet) {
         const parentChainId =
           parentNetworkId === PeerNetworkID.Mainnet ? ChainID.Mainnet : ChainID.Testnet;
+        removeEditedNetwork();
         networksActions.addNetwork({
           id: key as DefaultNetworkConfigurations,
           name: name,
@@ -128,6 +164,7 @@ export function useAddNetwork() {
         });
         navigate(RouteUrls.Home);
       } else if (chainId === ChainID.Mainnet || chainId === ChainID.Testnet) {
+        removeEditedNetwork();
         networksActions.addNetwork({
           id: key as DefaultNetworkConfigurations,
           name: name,

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

@@ -0,0 +1,58 @@
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
+import { css } from 'leather-styles/css';
+import { HStack, styled } from 'leather-styles/jsx';
+
+import { DotsVerticalIcon, DropdownMenu, PenIcon, TrashIcon } from '@leather.io/ui';
+
+interface Props {
+  onEditNetwork(): void;
+  onClickDeleteNetwork(): void;
+}
+
+export function NetworkItemMenu({ onClickDeleteNetwork, onEditNetwork }: Props) {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.IconButton>
+        <DotsVerticalIcon
+          color="ink.text-primary"
+          data-testid={SettingsSelectors.SettingsMenuBtn}
+        />
+      </DropdownMenu.IconButton>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          align="end"
+          side="bottom"
+          sideOffset={8}
+          className={css({
+            width: 'settingsMenuWidth',
+          })}
+        >
+          <DropdownMenu.Group>
+            <DropdownMenu.Item
+              onClick={e => {
+                e.stopPropagation();
+                onEditNetwork();
+              }}
+            >
+              <HStack>
+                <PenIcon />
+                <styled.span textStyle="label.02">Edit</styled.span>
+              </HStack>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              onClick={e => {
+                e.stopPropagation();
+                onClickDeleteNetwork();
+              }}
+            >
+              <HStack color="red.action-primary-default">
+                <TrashIcon />
+                <styled.span textStyle="label.02">Delete</styled.span>
+              </HStack>
+            </DropdownMenu.Item>
+          </DropdownMenu.Group>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+}