fix: inability to remove network

Author: kyranjamie

src/app/pages/select-network/components/network-list-item.layout.tsx

@@ -1,4 +1,6 @@
-import { Box, BoxProps, Flex, Stack, color } from '@stacks/ui';
+import { FiTrash2 } from 'react-icons/fi';
+
+import { Box, BoxProps, Button, Flex, Stack, color } from '@stacks/ui';
 import { SettingsSelectors } from '@tests-legacy/integration/settings.selectors';
 
 import { NetworkConfiguration } from '@shared/constants';
@@ -12,11 +14,22 @@ interface NetworkListItemLayoutProps extends BoxProps {
   networkId: string;
   isOnline: boolean;
   isActive: boolean;
+  isCustom: boolean;
   network: NetworkConfiguration;
   onSelectNetwork(): void;
+  onRemoveNetwork(id: string): void;
 }
 export function NetworkListItemLayout(props: NetworkListItemLayoutProps) {
-  const { networkId, isOnline, isActive, network, onSelectNetwork, ...rest } = props;
+  const {
+    networkId,
+    isOnline,
+    isActive,
+    network,
+    isCustom,
+    onRemoveNetwork,
+    onSelectNetwork,
+    ...rest
+  } = props;
 
   return (
     <Box
@@ -45,7 +58,7 @@ export function NetworkListItemLayout(props: NetworkListItemLayoutProps) {
         disabled={!isOnline}
         data-testid={network.id}
       >
-        <Stack alignItems="flex-start">
+        <Stack alignItems="flex-start" flex={1}>
           <Title
             fontWeight={400}
             lineHeight="1rem"
@@ -58,6 +71,19 @@ export function NetworkListItemLayout(props: NetworkListItemLayoutProps) {
           <Caption>{getUrlHostname(network.chain.stacks.url)}</Caption>
         </Stack>
         <NetworkStatusIndicator isActive={isActive} isOnline={isOnline} />
+        {isCustom && (
+          <Button
+            type="button"
+            mode="tertiary"
+            ml="base"
+            onClick={e => {
+              e.stopPropagation();
+              onRemoveNetwork(network.id);
+            }}
+          >
+            <FiTrash2 size="14px" />
+          </Button>
+        )}
       </Flex>
     </Box>
   );

src/app/pages/select-network/network-list-item.tsx

@@ -7,9 +7,16 @@ import { NetworkListItemLayout } from './components/network-list-item.layout';
 
 interface NetworkListItemProps {
   networkId: string;
+  isCustom: boolean;
   onNetworkSelected(networkId: string): void;
+  onRemoveNetwork(networkId: string): void;
 }
-export function NetworkListItem({ networkId, onNetworkSelected }: NetworkListItemProps) {
+export function NetworkListItem({
+  networkId,
+  onNetworkSelected,
+  onRemoveNetwork,
+  isCustom,
+}: NetworkListItemProps) {
   const currentNetworkId = useCurrentNetworkId();
   const networks = useNetworks();
 
@@ -22,7 +29,9 @@ export function NetworkListItem({ networkId, onNetworkSelected }: NetworkListIte
       isOnline={isOnline}
       network={network}
       networkId={networkId}
+      isCustom={isCustom}
       onSelectNetwork={() => onNetworkSelected(networkId)}
+      onRemoveNetwork={onRemoveNetwork}
     />
   );
 }

src/app/pages/select-network/select-network.tsx

@@ -1,27 +1,36 @@
 import { useNavigate } from 'react-router-dom';
 
+import { WalletDefaultNetworkConfigurationIds } from '@shared/constants';
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { BaseDrawer } from '@app/components/drawer/base-drawer';
 import { NetworkListLayout } from '@app/pages/select-network/components/network-list.layout';
 import { NetworkListItem } from '@app/pages/select-network/network-list-item';
-import { useNetworksActions } from '@app/store/networks/networks.hooks';
+import { useCurrentNetworkState, useNetworksActions } from '@app/store/networks/networks.hooks';
 import { useNetworks } from '@app/store/networks/networks.selectors';
 
 import { AddNetworkButton } from './components/add-network-button';
 
+const defaultNetworkIds = Object.values(WalletDefaultNetworkConfigurationIds) as string[];
+
 export function SelectNetwork() {
   const navigate = useNavigate();
   const networks = useNetworks();
   const analytics = useAnalytics();
   const networksActions = useNetworksActions();
+  const currentNetwork = useCurrentNetworkState();
 
   function addNetwork() {
     void analytics.track('add_network');
     navigate(RouteUrls.AddNetwork);
   }
 
+  function removeNetwork(id: string) {
+    void analytics.track('remove_network');
+    networksActions.removeNetwork(id);
+  }
+
   function selectNetwork(id: string) {
     void analytics.track('change_network', { id });
     networksActions.changeNetwork(id);
@@ -36,7 +45,16 @@ export function SelectNetwork() {
     <BaseDrawer title="Select Network" isShowing onClose={closeNetworkModal}>
       <NetworkListLayout>
         {Object.keys(networks).map(id => (
-          <NetworkListItem key={id} networkId={id} onNetworkSelected={id => selectNetwork(id)} />
+          <NetworkListItem
+            key={id}
+            networkId={id}
+            onNetworkSelected={id => selectNetwork(id)}
+            isCustom={!defaultNetworkIds.includes(id)}
+            onRemoveNetwork={id => {
+              if (id === currentNetwork.id) networksActions.changeNetwork('mainnet');
+              removeNetwork(id);
+            }}
+          />
         ))}
       </NetworkListLayout>
       <AddNetworkButton onAddNetwork={addNetwork} />

tests-legacy/utils/transation-test-utils.ts

@@ -53,7 +53,7 @@ export async function generateContractCallToken({
     functionArgs: [],
     functionName: 'print',
     postConditionMode: PostConditionMode.Allow,
-    network,
+    network: network as any,
     postConditions: [
       makeStandardFungiblePostCondition(
         address,