fix: network add form

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

@@ -1,20 +1,44 @@
 import { useCallback, useEffect } from 'react';
 
-import { SelectContent, SelectItem, SelectRoot, SelectTrigger } from '@radix-ui/themes';
 import { NetworkSelectors } from '@tests/selectors/network.selectors';
 import { useFormikContext } from 'formik';
-import { css } from 'leather-styles/css';
+import { HStack, styled } from 'leather-styles/jsx';
+
+import type { BitcoinNetworkModes } from '@shared/constants';
 
 import { Input } from '@app/ui/components/input/input';
+import { Select } from '@app/ui/components/select/select';
+import { SelectItemLayout } from '@app/ui/components/select/select-item.layout';
 import { Title } from '@app/ui/components/typography/title';
+import { CheckmarkIcon, ChevronDownIcon } from '@app/ui/icons';
+
+import { type AddNetworkFormValues } from './use-add-network';
 
-import { type AddNetworkFormValues, useAddNetwork } from './use-add-network';
+const networks: {
+  label: string;
+  value: BitcoinNetworkModes;
+}[] = [
+  {
+    label: 'Mainnet',
+    value: 'mainnet',
+  },
+  {
+    label: 'Testnet',
+    value: 'testnet',
+  },
+  {
+    label: 'Signet',
+    value: 'signet',
+  },
+  {
+    label: 'Regtest',
+    value: 'regtest',
+  },
+];
 
 export function AddNetworkForm() {
   const { handleChange, setFieldValue, values } = useFormikContext<AddNetworkFormValues>();
 
-  const { bitcoinApi, handleApiChange } = useAddNetwork();
-
   const setStacksUrl = useCallback(
     (value: string) => {
       void setFieldValue('stacksUrl', value);
@@ -30,7 +54,7 @@ export function AddNetworkForm() {
   );
 
   useEffect(() => {
-    switch (bitcoinApi) {
+    switch (values.bitcoinNetwork) {
       case 'mainnet':
         setStacksUrl('https://api.hiro.so');
         setBitcoinUrl('https://blockstream.info/api');
@@ -48,7 +72,7 @@ export function AddNetworkForm() {
         setBitcoinUrl('https://mempool.space/testnet/api');
         break;
     }
-  }, [bitcoinApi, setStacksUrl, setBitcoinUrl]);
+  }, [setStacksUrl, setBitcoinUrl, values.bitcoinNetwork]);
 
   return (
     <>
@@ -64,38 +88,43 @@ export function AddNetworkForm() {
         />
       </Input.Root>
       <Title>Bitcoin API</Title>
-      {/* TODO: Replace with new Select */}
-      <SelectRoot onValueChange={handleApiChange} defaultValue="mainnet">
-        <SelectTrigger
-          className={css({
-            backgroundColor: 'ink.background-primary',
-            borderRadius: 'sm',
-            border: '1px solid ink.border-primary',
-          })}
-        ></SelectTrigger>
-        <SelectContent
-          className={css({
-            backgroundColor: 'ink.background-primary',
-            borderRadius: 'sm',
-            border: '1px solid ink.border-primary',
-            dropShadow: 'lg',
-            height: 'fit-content',
-          })}
-        >
-          <SelectItem key="mainnet" value="mainnet">
-            Mainnet
-          </SelectItem>
-          <SelectItem key="testnet" value="testnet">
-            Testnet
-          </SelectItem>
-          <SelectItem key="signet" value="signet">
-            Signet
-          </SelectItem>
-          <SelectItem key="regtest" value="regtest">
-            Regtest
-          </SelectItem>
-        </SelectContent>
-      </SelectRoot>
+
+      <Select.Root
+        defaultValue={networks[0].value}
+        onValueChange={value => {
+          void setFieldValue('bitcoinApi', value);
+        }}
+      >
+        <Select.Trigger>
+          <Select.Value />
+          <Select.Icon>
+            <ChevronDownIcon variant="small" />
+          </Select.Icon>
+        </Select.Trigger>
+        <Select.Portal>
+          <Select.Content align="start" position="popper" sideOffset={8}>
+            <Select.Viewport>
+              {networks.map(item => (
+                <Select.Item key={item.label} value={item.value}>
+                  <SelectItemLayout
+                    contentLeft={
+                      <HStack display="flex" gap="space.02" width="100%">
+                        <Select.ItemText>
+                          <styled.span textStyle="label.02">{item.label}</styled.span>
+                        </Select.ItemText>
+                        <Select.ItemIndicator>
+                          <CheckmarkIcon variant="small" />
+                        </Select.ItemIndicator>
+                      </HStack>
+                    }
+                  />
+                </Select.Item>
+              ))}
+            </Select.Viewport>
+          </Select.Content>
+        </Select.Portal>
+      </Select.Root>
+
       <Title>Stacks API URL</Title>
       <Input.Root>
         <Input.Label>Name</Input.Label>

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

@@ -27,31 +27,30 @@ export interface AddNetworkFormValues {
   name: string;
   stacksUrl: string;
   bitcoinUrl: string;
+  bitcoinNetwork: BitcoinNetworkModes;
 }
 
 const initialFormValues: AddNetworkFormValues = {
   key: '',
   name: '',
   stacksUrl: '',
   bitcoinUrl: '',
+  bitcoinNetwork: 'mainnet',
 };
 
 export function useAddNetwork() {
-  const [bitcoinApi, setBitcoinApi] = useState<BitcoinNetworkModes>('mainnet');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
   const navigate = useNavigate();
   const network = useCurrentStacksNetworkState();
   const networksActions = useNetworksActions();
 
   return {
-    bitcoinApi,
-    handleApiChange: (value: BitcoinNetworkModes) => setBitcoinApi(value),
     error,
     initialFormValues,
     loading,
     onSubmit: async (values: AddNetworkFormValues) => {
-      const { name, stacksUrl, bitcoinUrl, key } = values;
+      const { name, stacksUrl, bitcoinUrl, key, bitcoinNetwork } = values;
 
       if (!name) {
         setError('Enter a name');
@@ -123,7 +122,7 @@ export function useAddNetwork() {
           chainId: parentChainId, // Used for differentiating control flow in the wallet
           subnetChainId: chainId, // Used for signing transactions (via the network object, not to be confused with the NetworkConfigurations)
           url: stacksPath,
-          bitcoinNetwork: bitcoinApi,
+          bitcoinNetwork,
           bitcoinUrl: bitcoinPath,
         });
         navigate(RouteUrls.Home);
@@ -133,7 +132,7 @@ export function useAddNetwork() {
           name: name,
           chainId: chainId,
           url: stacksPath,
-          bitcoinNetwork: bitcoinApi,
+          bitcoinNetwork,
           bitcoinUrl: bitcoinPath,
         });
         navigate(RouteUrls.Home);

src/app/ui/components/select/select.tsx

@@ -2,6 +2,7 @@ import { ReactNode, forwardRef } from 'react';
 
 import * as RadixSelect from '@radix-ui/react-select';
 import { css } from 'leather-styles/css';
+import { styled } from 'leather-styles/jsx';
 
 import { pressableBaseStyles, pressableStyles } from '@app/ui/pressable/pressable';
 
@@ -73,8 +74,12 @@ const Label: typeof RadixSelect.Label = forwardRef((props, ref) => (
   <RadixSelect.Label className={selectLabelStyles} ref={ref} {...props} />
 ));
 
+const selectItemStyles = css({ p: 'space.03' });
+
 const Item: typeof RadixSelect.Item = forwardRef((props, ref) => (
-  <RadixSelect.Item className={css(pressableBaseStyles, pressableStyles)} ref={ref} {...props} />
+  <styled.div className={selectItemStyles}>
+    <RadixSelect.Item className={css(pressableBaseStyles, pressableStyles)} ref={ref} {...props} />
+  </styled.div>
 ));
 
 const selectSeparatorStyles = css({