refactor(send-form): remove custom dropdown type

src/app/pages/send/ordinal-inscription/send-inscription-form.tsx

@@ -12,7 +12,7 @@ import { InscriptionPreviewCard } from '@app/components/inscription-preview-card
 import { OrdinalIcon } from '@app/ui/components/avatar-icon/ordinal-icon';
 import { Button } from '@app/ui/components/button/button';
 
-import { RecipientField } from '../send-crypto-asset-form/components/recipient-field';
+import { RecipientAddressTypeField } from '../send-crypto-asset-form/components/recipient-address-type-field';
 import { CollectibleAsset } from './components/collectible-asset';
 import { useSendInscriptionState } from './components/send-inscription-container';
 import { useSendInscriptionForm } from './hooks/use-send-inscription-form';
@@ -48,7 +48,7 @@ export function SendInscriptionForm() {
               <Box mt={['space.04', 'space.06', '100px']}>
                 <Flex flexDirection="column" mt="space.05" width="100%">
                   <CollectibleAsset icon={<OrdinalIcon />} name="Ordinal inscription" />
-                  <RecipientField
+                  <RecipientAddressTypeField
                     name={recipeintFieldName}
                     label="To"
                     placeholder="Enter recipient address"

src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/select-account-button.tsx

@@ -14,9 +14,10 @@ export function SelectAccountButton({ onClick, ...props }: SelectAccountButtonPr
   return (
     <styled.button
       type="button"
-      color="accent.text-primary"
+      color="ink.text-primary"
+      userSelect="none"
       textStyle="label.03"
-      _hover={{ color: 'accent.action-primary-hover' }}
+      _hover={{ color: 'ink.action-primary-hover' }}
       data-testid={SendCryptoAssetSelectors.RecipientChooseAccountButton}
       fontWeight={500}
       onMouseDown={e => preventFocusOfUnderlyingInput(e)}

src/app/pages/send/send-crypto-asset-form/components/recipient-field.tsx → src/app/pages/send/send-crypto-asset-form/components/recipient-address-type-field.tsx

@@ -8,22 +8,20 @@ import { BitcoinSendFormValues, StacksSendFormValues } from '@shared/models/form
 
 import { Input } from '@app/ui/components/input/input';
 
-interface RecipientFieldProps {
-  isDisabled?: boolean;
+interface RecipientAddressTypeFieldProps {
   label?: string;
   name: string;
   onBlur?(): void;
   placeholder: string;
   topInputOverlay?: React.JSX.Element;
   rightLabel?: React.JSX.Element;
 }
-export function RecipientField({
+export function RecipientAddressTypeField({
   name,
   topInputOverlay,
   rightLabel,
-  isDisabled,
   onBlur,
-}: RecipientFieldProps) {
+}: RecipientAddressTypeFieldProps) {
   const [field] = useField(name);
   const { setFieldValue } = useFormikContext<BitcoinSendFormValues | StacksSendFormValues>();
 
@@ -41,7 +39,6 @@ export function RecipientField({
         <Input.Field
           data-testid={SendCryptoAssetSelectors.RecipientFieldInput}
           placeholder="Recipient"
-          disabled={isDisabled}
           {...field}
           onBlur={e => {
             field.onBlur(e);

src/app/pages/send/send-crypto-asset-form/components/recipient-fields/hooks/use-recipient-select-fields.tsx

@@ -3,23 +3,36 @@ import { useNavigate } from 'react-router-dom';
 
 import { useFormikContext } from 'formik';
 
-import { BitcoinSendFormValues, StacksSendFormValues } from '@shared/models/form.model';
 import { RouteUrls } from '@shared/route-urls';
-
-import { RecipientFieldType } from '@app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/recipient-type-dropdown';
+import type { Entries } from '@shared/utils/type-utils';
 
 import { useRecipientBnsName } from './use-recipient-bns-name';
 
+const recipientIdentifierTypesMap = { address: 'Address', bnsName: 'BNS Name' } as const;
+
+export type RecipientIdentifierType = keyof typeof recipientIdentifierTypesMap;
+
+function makeIteratbleListOfRecipientIdentifierTypes(
+  recipientTypeMap: typeof recipientIdentifierTypesMap
+) {
+  return (Object.entries(recipientTypeMap) as Entries<typeof recipientTypeMap>).map(
+    ([key, value]) => ({ key, label: value })
+  );
+}
+export const recipientIdentifierTypes = makeIteratbleListOfRecipientIdentifierTypes(
+  recipientIdentifierTypesMap
+);
+
 export function useRecipientSelectFields() {
-  const { setFieldError, setFieldTouched, setFieldValue } = useFormikContext<
-    BitcoinSendFormValues | StacksSendFormValues
-  >();
-  const [selectedRecipientField, setSelectedRecipientField] = useState(RecipientFieldType.Address);
+  const { setFieldError, setFieldTouched, setFieldValue } = useFormikContext();
+
+  const [selectedRecipientField, setSelectedRecipientField] =
+    useState<RecipientIdentifierType>('address');
+
   const [isSelectVisible, setIsSelectVisible] = useState(false);
   const { setBnsAddress } = useRecipientBnsName();
   const navigate = useNavigate();
 
-  // Formik does not provide a field reset
   const resetAllRecipientFields = useCallback(async () => {
     void setFieldValue('recipient', '');
     setFieldError('recipient', undefined);
@@ -32,17 +45,20 @@ export function useRecipientSelectFields() {
   return useMemo(
     () => ({
       selectedRecipientField,
+
+      selectedRecipientFieldName: recipientIdentifierTypesMap[selectedRecipientField],
+
       isSelectVisible,
 
       showRecipientAccountsModal() {
-        setSelectedRecipientField(RecipientFieldType.Address);
+        setSelectedRecipientField('address');
         navigate(RouteUrls.SendCryptoAssetFormRecipientAccounts, { replace: true });
       },
 
-      async onSelectRecipientFieldType(index: number) {
+      async onSelectRecipientFieldType(recipientType: RecipientIdentifierType) {
         await resetAllRecipientFields();
         setBnsAddress('');
-        setSelectedRecipientField(index);
+        setSelectedRecipientField(recipientType);
         setIsSelectVisible(false);
       },
 

src/app/pages/send/send-crypto-asset-form/components/recipient-fields/recipient-field-bns-name.tsx → src/app/pages/send/send-crypto-asset-form/components/recipient-fields/recipient-bns-name-type-field.tsx

@@ -4,25 +4,22 @@ import { useFormikContext } from 'formik';
 
 import { BitcoinSendFormValues, StacksSendFormValues } from '@shared/models/form.model';
 
-import { RecipientField } from '@app/pages/send/send-crypto-asset-form/components/recipient-field';
+import { RecipientAddressTypeField } from '@app/pages/send/send-crypto-asset-form/components/recipient-address-type-field';
 import { StacksClient } from '@app/query/stacks/stacks-client';
 
 import { RecipientAddressDisplayer } from './components/recipient-address-displayer';
 import { useRecipientBnsName } from './hooks/use-recipient-bns-name';
 
-interface RecipientFieldBnsNameProps {
+interface RecipientBnsNameTypeFieldProps {
   fetchFn(client: StacksClient, name: string, isTestnet?: boolean): Promise<string | null>;
-  isSelectVisible: boolean;
-  selectedRecipientField: number;
   topInputOverlay: React.JSX.Element;
   rightLabel: React.JSX.Element;
 }
-export function RecipientFieldBnsName({
+export function RecipientBnsNameTypeField({
   fetchFn,
-  isSelectVisible,
   topInputOverlay,
   rightLabel,
-}: RecipientFieldBnsNameProps) {
+}: RecipientBnsNameTypeFieldProps) {
   const [showBnsAddress, setShowBnsAddress] = useState(false);
   const { errors, setFieldError, values } = useFormikContext<
     BitcoinSendFormValues | StacksSendFormValues
@@ -47,8 +44,7 @@ export function RecipientFieldBnsName({
 
   return (
     <>
-      <RecipientField
-        isDisabled={isSelectVisible}
+      <RecipientAddressTypeField
         name="recipientBnsName"
         onBlur={() => getBnsAddressAndValidate(fetchFn)}
         placeholder="Enter recipient BNS name"

src/app/pages/send/send-crypto-asset-form/components/recipient-fields/recipient-field.tsx

@@ -0,0 +1,55 @@
+import { TextInputFieldError } from '@app/components/field-error';
+
+import { SelectAccountButton } from '../recipient-accounts-drawer/select-account-button';
+import { RecipientAddressTypeField } from '../recipient-address-type-field';
+import { RecipientIdentifierTypeDropdown } from '../recipient-type-dropdown/recipient-type-dropdown';
+import { useRecipientSelectFields } from './hooks/use-recipient-select-fields';
+import { RecipientBnsNameTypeField } from './recipient-bns-name-type-field';
+
+interface RecipientFieldProps {
+  bnsLookupFn(client: any, name: string, isTestnet?: boolean): Promise<string | null>;
+}
+export function RecipientField({ bnsLookupFn }: RecipientFieldProps) {
+  const {
+    showRecipientAccountsModal,
+    onSelectRecipientFieldType,
+    selectedRecipientFieldName,
+    selectedRecipientField,
+  } = useRecipientSelectFields();
+
+  const recipientDropdown = (
+    <RecipientIdentifierTypeDropdown
+      activeRecipientIdentifierType={selectedRecipientFieldName}
+      onSelectRecipientIdentifierType={recipientType => onSelectRecipientFieldType(recipientType)}
+    />
+  );
+
+  const selectAccountButton = <SelectAccountButton onClick={showRecipientAccountsModal} />;
+
+  switch (selectedRecipientField) {
+    case 'bnsName':
+      return (
+        <>
+          <RecipientBnsNameTypeField
+            fetchFn={bnsLookupFn}
+            rightLabel={selectAccountButton}
+            topInputOverlay={recipientDropdown}
+          />
+          <TextInputFieldError name="recipientBnsName" />
+        </>
+      );
+    case 'address':
+    default:
+      return (
+        <>
+          <RecipientAddressTypeField
+            name="recipient"
+            rightLabel={selectAccountButton}
+            placeholder="Enter recipient address"
+            topInputOverlay={recipientDropdown}
+          />
+          <TextInputFieldError name="recipient" />
+        </>
+      );
+  }
+}