From f28aabfdc7ad4deb5ee72d14d032fda3e6a21a19 Mon Sep 17 00:00:00 2001
From: fbwoolf <fwoolf@blockstack.com>
Date: Tue, 21 Mar 2023 14:57:55 -0500
Subject: [PATCH] refactor: btc send form

---
 .../validation/forms/recipient-validators.ts  | 25 -------
 .../components/fee-estimate-select.layout.tsx |  2 +-
 .../components/collectible-asset.tsx          | 29 +++++---
 .../send-inscription-form.tsx                 | 16 +++--
 ...inal-inscription-form-validation-schema.ts |  3 +-
 .../components/available-balance.tsx          | 14 ----
 .../components/form-errors.tsx                | 60 ----------------
 .../components/form-fields.layout.tsx         | 20 ------
 .../{footer.tsx => form-footer.tsx}           | 11 +--
 .../components/recipient-field.tsx            |  3 +
 .../recipient-address-displayer.tsx}          | 27 ++++---
 .../hooks/use-recipient-bns-name.tsx          | 47 ++++++++++++
 .../hooks/use-recipient-select-fields.tsx}    | 13 ++--
 .../recipient-field-address.tsx               |  0
 .../recipient-field-bns-name.tsx              | 19 +++--
 .../recipient-select-item.tsx                 | 12 +++-
 .../components/recipient-select-overlay.tsx   |  0
 .../recipient-select.layout.tsx               |  0
 .../recipient-select/recipient-select.tsx     |  4 +-
 .../send-crypto-asset-form.layout.tsx         | 18 +++--
 .../components/text-input-field.tsx           |  1 +
 .../components/bitcoin-recipient-field.tsx    | 52 ++++++++++++++
 .../components/testnet-btc-message.tsx        |  2 +-
 .../bitcoin/hooks}/use-generate-bitcoin-tx.ts |  0
 .../stacks-recipient-field.tsx                | 12 ++--
 .../components/recipient-bns-address.tsx      | 61 ----------------
 .../hooks/use-stacks-recipient-bns-name.tsx   | 40 -----------
 .../stacks/hooks}/use-stacks-ft-params.ts     |  0
 .../form/btc/btc-send-form.tsx                | 71 +++++++++----------
 .../btc/components/btc-recipient-field.tsx    | 64 -----------------
 .../form/btc/use-btc-send-form.tsx            | 17 ++---
 .../stacks-sip10-fungible-token-send-form.tsx | 22 +++---
 .../form/stacks-sip10/use-sip10-send-form.tsx |  2 +-
 .../form/stx/stx-send-form.tsx                | 22 +++---
 src/shared/models/form.model.ts               |  1 +
 tests/page-object-models/send.page.ts         | 19 +++--
 tests/selectors/send.selectors.ts             |  3 +-
 tests/specs/send/send-btc.spec.ts             |  1 -
 tests/specs/send/send-stx.spec.ts             | 23 +++---
 39 files changed, 291 insertions(+), 445 deletions(-)
 delete mode 100644 src/app/pages/send/send-crypto-asset-form/components/available-balance.tsx
 delete mode 100644 src/app/pages/send/send-crypto-asset-form/components/form-errors.tsx
 delete mode 100644 src/app/pages/send/send-crypto-asset-form/components/form-fields.layout.tsx
 rename src/app/pages/send/send-crypto-asset-form/components/{footer.tsx => form-footer.tsx} (72%)
 rename src/app/pages/send/send-crypto-asset-form/{family/stacks/components/stacks-recipient-field/components/recipient-bns-address-displayer.tsx => components/recipient-select-fields/components/recipient-address-displayer.tsx} (65%)
 create mode 100644 src/app/pages/send/send-crypto-asset-form/components/recipient-select-fields/hooks/use-recipient-bns-name.tsx
 rename src/app/pages/send/send-crypto-asset-form/{family/stacks/components/stacks-recipient-field/hooks/use-stacks-recipient-field.tsx => components/recipient-select-fields/hooks/use-recipient-select-fields.tsx} (81%)
 rename src/app/pages/send/send-crypto-asset-form/{family/stacks/components/stacks-recipient-field/components => components/recipient-select-fields}/recipient-field-address.tsx (100%)
 rename src/app/pages/send/send-crypto-asset-form/{family/stacks/components/stacks-recipient-field/components => components/recipient-select-fields}/recipient-field-bns-name.tsx (67%)
 rename src/app/pages/send/send-crypto-asset-form/components/recipient-select/{ => components}/recipient-select-item.tsx (68%)
 rename src/app/pages/send/send-crypto-asset-form/{family/stacks/components/stacks-recipient-field => components/recipient-select}/components/recipient-select-overlay.tsx (100%)
 rename src/app/pages/send/send-crypto-asset-form/components/recipient-select/{ => components}/recipient-select.layout.tsx (100%)
 create mode 100644 src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-recipient-field.tsx
 rename src/app/pages/send/send-crypto-asset-form/{form/btc => family/bitcoin}/components/testnet-btc-message.tsx (91%)
 rename src/app/pages/send/send-crypto-asset-form/{form/btc => family/bitcoin/hooks}/use-generate-bitcoin-tx.ts (100%)
 rename src/app/pages/send/send-crypto-asset-form/family/stacks/components/{stacks-recipient-field => }/stacks-recipient-field.tsx (68%)
 delete mode 100644 src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/components/recipient-bns-address.tsx
 delete mode 100644 src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/hooks/use-stacks-recipient-bns-name.tsx
 rename src/app/pages/send/send-crypto-asset-form/{form/stacks-sip10 => family/stacks/hooks}/use-stacks-ft-params.ts (100%)
 delete mode 100644 src/app/pages/send/send-crypto-asset-form/form/btc/components/btc-recipient-field.tsx

diff --git a/src/app/common/validation/forms/recipient-validators.ts b/src/app/common/validation/forms/recipient-validators.ts
index 0f24ddb3..d8f04b0e 100644
--- a/src/app/common/validation/forms/recipient-validators.ts
+++ b/src/app/common/validation/forms/recipient-validators.ts
@@ -1,13 +1,8 @@
-import * as yup from 'yup';
-
 import { NetworkConfiguration } from '@shared/constants';
 
 import { FormErrorMessages } from '@app/common/error-messages';
-import { fetchBtcNameOwner } from '@app/query/stacks/bns/bns.utils';
-import { StacksClient } from '@app/query/stacks/stacks-client';
 
 import {
-  btcAddressValidator,
   notCurrentAddressValidator,
   stxAddressNetworkValidator,
   stxAddressValidator,
@@ -21,23 +16,3 @@ export function stxRecipientValidator(
     .concat(stxAddressNetworkValidator(currentNetwork))
     .concat(notCurrentAddressValidator(currentAddress || ''));
 }
-
-export function btcRecipientAddressOrBnsNameValidator({ client }: { client: StacksClient }) {
-  return yup.string().test({
-    name: 'btcRecipientOrBnsName',
-    message: FormErrorMessages.InvalidAddress,
-    test: async value => {
-      try {
-        await btcAddressValidator().validate(value);
-        return true;
-      } catch (e) {}
-      try {
-        const btcAddress = await fetchBtcNameOwner(client, value ?? '');
-        await btcAddressValidator().validate(btcAddress);
-        return true;
-      } catch (error) {
-        return false;
-      }
-    },
-  });
-}
diff --git a/src/app/components/fees-row/components/fee-estimate-select.layout.tsx b/src/app/components/fees-row/components/fee-estimate-select.layout.tsx
index c38f8d82..50239dcc 100644
--- a/src/app/components/fees-row/components/fee-estimate-select.layout.tsx
+++ b/src/app/components/fees-row/components/fee-estimate-select.layout.tsx
@@ -50,7 +50,7 @@ export function FeeEstimateSelectLayout(props: FeeEstimateSelectLayoutProps) {
               position="absolute"
               ref={ref}
               style={styles}
-              top="-100px"
+              top="-35px"
               zIndex={9999}
             >
               {children}
diff --git a/src/app/pages/send/ordinal-inscription/components/collectible-asset.tsx b/src/app/pages/send/ordinal-inscription/components/collectible-asset.tsx
index 62f6c032..c6e33714 100644
--- a/src/app/pages/send/ordinal-inscription/components/collectible-asset.tsx
+++ b/src/app/pages/send/ordinal-inscription/components/collectible-asset.tsx
@@ -10,14 +10,25 @@ interface CollectibleAssetProps {
 }
 export function CollectibleAsset({ icon, name, symbol }: CollectibleAssetProps) {
   return (
-    <SpaceBetween py="base" px="base" width="100%">
-      <Flex alignItems="center">
-        {icon}
-        <Text ml="tight" mr="extra-tight">
-          {name}
-        </Text>
-        {symbol && <Text>({symbol.toUpperCase()})</Text>}
-      </Flex>
-    </SpaceBetween>
+    <Flex
+      alignItems="center"
+      border="1px solid #DCDDE2"
+      borderRadius="10px"
+      minHeight="64px"
+      mb="base"
+      mt="loose"
+      px="base"
+      width="100%"
+    >
+      <SpaceBetween>
+        <Flex alignItems="center">
+          {icon}
+          <Text ml="tight" mr="extra-tight">
+            {name}
+          </Text>
+          {symbol && <Text>({symbol.toUpperCase()})</Text>}
+        </Flex>
+      </SpaceBetween>
+    </Flex>
   );
 }
diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
index 747f7bc2..19c3bdfe 100644
--- a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
+++ b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { Box, Button } from '@stacks/ui';
+import { Box, Button, Flex } from '@stacks/ui';
 import BigNumber from 'bignumber.js';
 import { Form, Formik } from 'formik';
 
@@ -16,8 +16,6 @@ import { OrdinalIcon } from '@app/components/icons/ordinal-icon';
 import { getNumberOfInscriptionOnUtxo } from '@app/query/bitcoin/ordinals/utils';
 
 import { BtcSizeFeeEstimator } from '../../../common/transactions/bitcoin/fees/btc-size-fee-estimator';
-import { FormErrors } from '../send-crypto-asset-form/components/form-errors';
-import { FormFieldsLayout } from '../send-crypto-asset-form/components/form-fields.layout';
 import { RecipientField } from '../send-crypto-asset-form/components/recipient-field';
 import { CollectibleAsset } from './components/collectible-asset';
 import { CollectiblePreviewCard } from './components/collectible-preview-card';
@@ -107,12 +105,15 @@ export function SendInscriptionForm() {
             <Box px="extra-loose">
               <CollectiblePreviewCard inscription={inscription} mt="extra-loose" />
               <Box mt={['base', 'extra-loose', '100px']}>
-                <FormFieldsLayout>
+                <Flex flexDirection="column" mt="loose" width="100%">
                   <CollectibleAsset icon={<OrdinalIcon />} name="Ordinal inscription" />
-                  <RecipientField name={recipeintFieldName} placeholder="Address" />
-                </FormFieldsLayout>
+                  <RecipientField
+                    name={recipeintFieldName}
+                    label="To"
+                    placeholder="Enter recipient address"
+                  />
+                </Flex>
               </Box>
-              <FormErrors />
               {currentError && (
                 <ErrorLabel textAlign="left" mb="base-loose">
                   {currentError}
@@ -120,6 +121,7 @@ export function SendInscriptionForm() {
               )}
               <Button
                 mb="extra-loose"
+                mt="tight"
                 type="submit"
                 borderRadius="10px"
                 height="48px"
diff --git a/src/app/pages/send/ordinal-inscription/use-ordinal-inscription-form-validation-schema.ts b/src/app/pages/send/ordinal-inscription/use-ordinal-inscription-form-validation-schema.ts
index 34e39fe2..ea3fd45b 100644
--- a/src/app/pages/send/ordinal-inscription/use-ordinal-inscription-form-validation-schema.ts
+++ b/src/app/pages/send/ordinal-inscription/use-ordinal-inscription-form-validation-schema.ts
@@ -1,5 +1,6 @@
 import * as yup from 'yup';
 
+import { FormErrorMessages } from '@app/common/error-messages';
 import {
   btcAddressNetworkValidator,
   btcAddressValidator,
@@ -14,7 +15,7 @@ export function useOrdinalInscriptionFormValidationSchema() {
   return yup.object({
     [recipeintFieldName]: yup
       .string()
-      .required('Please provide a recipient')
+      .required(FormErrorMessages.AddressRequired)
       .concat(btcAddressValidator())
       .concat(btcAddressNetworkValidator(currentNetwork.chain.bitcoin.network))
       .concat(btcTaprootAddressValidator()),
diff --git a/src/app/pages/send/send-crypto-asset-form/components/available-balance.tsx b/src/app/pages/send/send-crypto-asset-form/components/available-balance.tsx
deleted file mode 100644
index fb176d50..00000000
--- a/src/app/pages/send/send-crypto-asset-form/components/available-balance.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Money } from '@shared/models/money.model';
-
-import { convertAmountToBaseUnit } from '@app/common/money/calculate-money';
-import { Caption } from '@app/components/typography';
-
-export function AvailableBalance(props: { availableBalance: Money }) {
-  const { availableBalance } = props;
-  return (
-    <Caption>
-      Balance: {convertAmountToBaseUnit(availableBalance).toFormat()}{' '}
-      {availableBalance.symbol.toUpperCase()}
-    </Caption>
-  );
-}
diff --git a/src/app/pages/send/send-crypto-asset-form/components/form-errors.tsx b/src/app/pages/send/send-crypto-asset-form/components/form-errors.tsx
deleted file mode 100644
index d4afcbdc..00000000
--- a/src/app/pages/send/send-crypto-asset-form/components/form-errors.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// TODO: Remove with send form design refactor
-import { useEffect, useState } from 'react';
-import AnimateHeight from 'react-animate-height';
-
-import { Box, Flex } from '@stacks/ui';
-import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
-import { FormikContextType, useFormikContext } from 'formik';
-
-import { ErrorLabel } from '@app/components/error-label';
-
-function omitAmountErrorsAsDisplayedElsewhere([key]: [string, unknown]) {
-  return key !== 'amount';
-}
-
-function shouldDisplayErrors(form: FormikContextType<unknown>) {
-  return (
-    Object.entries(form.touched)
-      .filter(omitAmountErrorsAsDisplayedElsewhere)
-      .map(([_key, value]) => value)
-      .includes(true) && Object.keys(form.errors).length
-  );
-}
-
-const closedHeight = 24;
-const openHeight = 56;
-
-export function FormErrors() {
-  const [showHide, setShowHide] = useState(closedHeight);
-  const form = useFormikContext();
-
-  useEffect(() => {
-    if (shouldDisplayErrors(form)) {
-      setShowHide(openHeight);
-      return;
-    }
-    setShowHide(closedHeight);
-  }, [form]);
-
-  const [firstError] =
-    Object.entries(form.errors).filter(omitAmountErrorsAsDisplayedElsewhere) ?? [];
-
-  const [field, message] = firstError ?? [];
-
-  const isFirstErrorFieldTouched = (form.touched as any)[field];
-
-  return message && isFirstErrorFieldTouched && shouldDisplayErrors(form) ? (
-    <AnimateHeight duration={400} easing="ease-out" height={showHide}>
-      <Flex height={openHeight + 'px'}>
-        <ErrorLabel
-          alignSelf="center"
-          data-testid={SendCryptoAssetSelectors.FormFieldInputErrorLabel}
-        >
-          {firstError?.[1]}
-        </ErrorLabel>
-      </Flex>
-    </AnimateHeight>
-  ) : (
-    <Box height={closedHeight + 'px'}></Box>
-  );
-}
diff --git a/src/app/pages/send/send-crypto-asset-form/components/form-fields.layout.tsx b/src/app/pages/send/send-crypto-asset-form/components/form-fields.layout.tsx
deleted file mode 100644
index 6c2db79e..00000000
--- a/src/app/pages/send/send-crypto-asset-form/components/form-fields.layout.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Flex } from '@stacks/ui';
-
-interface FormFieldsProps {
-  children: React.ReactNode;
-}
-export function FormFieldsLayout({ children }: FormFieldsProps) {
-  return (
-    <Flex
-      alignItems="center"
-      flexDirection="column"
-      maxHeight={['calc(100vh - 116px)', 'calc(85vh - 116px)']}
-      overflowY="scroll"
-      pb={['92px', 'unset']}
-      pt={['base', '48px']}
-      px="loose"
-    >
-      {children}
-    </Flex>
-  );
-}
diff --git a/src/app/pages/send/send-crypto-asset-form/components/footer.tsx b/src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx
similarity index 72%
rename from src/app/pages/send/send-crypto-asset-form/components/footer.tsx
rename to src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx
index ecf13cfe..1895fdcc 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/footer.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx
@@ -1,5 +1,3 @@
-import { Outlet } from 'react-router-dom';
-
 import { Box, color } from '@stacks/ui';
 
 import { Money } from '@shared/models/money.model';
@@ -8,19 +6,18 @@ import { formatMoney } from '@app/common/money/format-money';
 import { whenPageMode } from '@app/common/utils';
 import { SpaceBetween } from '@app/components/layout/space-between';
 import { Caption } from '@app/components/typography';
-import { HighFeeDrawer } from '@app/features/high-fee-drawer/high-fee-drawer';
 
 import { PreviewButton } from './preview-button';
 
-export function Footer(props: { balance: Money; url: string }) {
-  const { balance, url } = props;
+export function FormFooter(props: { balance: Money }) {
+  const { balance } = props;
 
   return (
     <Box
       bg={color('bg')}
       borderTop="1px solid #DCDDE2"
       bottom="0px"
-      height={['128px', '116px']}
+      height={['106px', '116px']}
       position={whenPageMode({
         full: 'unset',
         popup: 'absolute',
@@ -35,8 +32,6 @@ export function Footer(props: { balance: Money; url: string }) {
           <Caption>{formatMoney(balance)}</Caption>
         </SpaceBetween>
       </Box>
-      <HighFeeDrawer learnMoreUrl={url} />
-      <Outlet />
     </Box>
   );
 }
diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-field.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-field.tsx
index 0c6fda5b..4cdfb069 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/recipient-field.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-field.tsx
@@ -4,6 +4,7 @@ import { TextInputField } from './text-input-field';
 
 interface RecipientFieldProps {
   isDisabled?: boolean;
+  label?: string;
   labelAction?: string;
   name: string;
   onBlur?(): void;
@@ -13,6 +14,7 @@ interface RecipientFieldProps {
 }
 export function RecipientField({
   isDisabled,
+  label,
   labelAction,
   name,
   onBlur,
@@ -24,6 +26,7 @@ export function RecipientField({
     <TextInputField
       dataTestId={SendCryptoAssetSelectors.RecipientFieldInput}
       isDisabled={isDisabled}
+      label={label}
       labelAction={labelAction}
       minHeight="76px"
       name={name}
diff --git a/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/components/recipient-bns-address-displayer.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-select-fields/components/recipient-address-displayer.tsx
similarity index 65%
rename from src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/components/recipient-bns-address-displayer.tsx
rename to src/app/pages/send/send-crypto-asset-form/components/recipient-select-fields/components/recipient-address-displayer.tsx
index 03ac8f28..2a4f94ab 100644
--- a/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/components/recipient-bns-address-displayer.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-select-fields/components/recipient-address-displayer.tsx
@@ -1,17 +1,17 @@
 import { useCallback } from 'react';
 import { FiCopy } from 'react-icons/fi';
 
-import { Box, Stack, color, useClipboard } from '@stacks/ui';
+import { Box, Text, color, useClipboard } from '@stacks/ui';
 import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
-import { AddressDisplayer } from '@app/components/address-displayer/address-displayer';
+import { SpaceBetween } from '@app/components/layout/space-between';
 import { Tooltip } from '@app/components/tooltip';
 
-interface BnsAddressDisplayerProps {
+interface RecipientAddressDisplayerProps {
   address: string;
 }
-export function RecipientBnsAddressDisplayer({ address }: BnsAddressDisplayerProps) {
+export function RecipientAddressDisplayer({ address }: RecipientAddressDisplayerProps) {
   const analytics = useAnalytics();
   const { onCopy, hasCopied } = useClipboard(address);
 
@@ -21,16 +21,14 @@ export function RecipientBnsAddressDisplayer({ address }: BnsAddressDisplayerPro
   }, [analytics, onCopy]);
 
   return (
-    <Stack alignItems="center" isInline mb="base">
-      <Box
+    <SpaceBetween mb="base" width="100%">
+      <Text
+        color={color('text-caption')}
         data-testid={SendCryptoAssetSelectors.RecipientBnsAddressLabel}
-        display="flex"
-        flexWrap="wrap"
-        fontSize={1}
-        justifyContent="flex-start"
+        fontSize={0}
       >
-        <AddressDisplayer address={address} />
-      </Box>
+        {address}
+      </Text>
       <Tooltip hideOnClick={false} label={hasCopied ? 'Copied!' : 'Copy address'} placement="right">
         <Box
           _hover={{ cursor: 'pointer' }}
@@ -38,12 +36,11 @@ export function RecipientBnsAddressDisplayer({ address }: BnsAddressDisplayerPro
           color={color('text-caption')}
           data-testid={SendCryptoAssetSelectors.RecipientBnsAddressCopyToClipboard}
           onClick={copyToClipboard}
-          size="16px"
           type="button"
         >
-          <FiCopy />
+          <FiCopy size="16px" />
         </Box>
       </Tooltip>
-    </Stack>
+    </SpaceBetween>
   );
 }
diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-select-fields/hooks/use-recipient-bns-name.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-select-fields/hooks/use-recipient-bns-name.tsx
new file mode 100644
index 00000000..f2d34629
--- /dev/null
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-select-fields/hooks/use-recipient-bns-name.tsx
@@ -0,0 +1,47 @@
+import { useCallback, useState } from 'react';
+
+import { useFormikContext } from 'formik';
+
+import { logger } from '@shared/logger';
+import { BitcoinSendFormValues, StacksSendFormValues } from '@shared/models/form.model';
+
+import { FormErrorMessages } from '@app/common/error-messages';
+import { StacksClient } from '@app/query/stacks/stacks-client';
+import { useStacksClientUnanchored } from '@app/store/common/api-clients.hooks';
+import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
+
+// Handles validating the BNS name lookup
+export function useRecipientBnsName() {
+  const { setFieldError, setFieldValue, values } = useFormikContext<
+    BitcoinSendFormValues | StacksSendFormValues
+  >();
+  const [bnsAddress, setBnsAddress] = useState('');
+  const currentNetwork = useCurrentNetworkState();
+  const client = useStacksClientUnanchored();
+
+  const getBnsAddressAndValidate = useCallback(
+    async (
+      fetchFn: (client: StacksClient, name: string, isTestnet?: boolean) => Promise<string | null>
+    ) => {
+      setBnsAddress('');
+      if (!values.recipientBnsName) return;
+
+      try {
+        const owner = await fetchFn(client, values.recipientBnsName, currentNetwork.isTestnet);
+        if (owner) {
+          setBnsAddress(owner);
+          setFieldError('recipient', undefined);
+          setFieldValue('recipient', owner);
+        } else {
+          setFieldError('recipientBnsName', FormErrorMessages.BnsAddressNotFound);
+        }
+      } catch (e) {
+        setFieldError('recipientBnsName', FormErrorMessages.BnsAddressNotFound);
+        logger.error('Error fetching bns address', e);
+      }
+    },
+    [client, currentNetwork.isTestnet, setFieldError, setFieldValue, values.recipientBnsName]
+  );
+
+  return { bnsAddress, getBnsAddressAndValidate, setBnsAddress };
+}
diff --git a/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/hooks/use-stacks-recipient-field.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-select-fields/hooks/use-recipient-select-fields.tsx
similarity index 81%
rename from src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/hooks/use-stacks-recipient-field.tsx
rename to src/app/pages/send/send-crypto-asset-form/components/recipient-select-fields/hooks/use-recipient-select-fields.tsx
index f121dd98..6b6032e0 100644
--- a/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/hooks/use-stacks-recipient-field.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-select-fields/hooks/use-recipient-select-fields.tsx
@@ -3,19 +3,20 @@ import { useNavigate } from 'react-router-dom';
 
 import { useFormikContext } from 'formik';
 
-import { StacksSendFormValues } from '@shared/models/form.model';
+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-select/recipient-select';
 
-import { useStacksRecipientBnsName } from './use-stacks-recipient-bns-name';
+import { useRecipientBnsName } from './use-recipient-bns-name';
 
-export function useStacksRecipientField() {
-  const { setFieldError, setFieldTouched, setFieldValue } =
-    useFormikContext<StacksSendFormValues>();
+export function useRecipientSelectFields() {
+  const { setFieldError, setFieldTouched, setFieldValue } = useFormikContext<
+    BitcoinSendFormValues | StacksSendFormValues
+  >();
   const [selectedRecipientField, setSelectedRecipientField] = useState(RecipientFieldType.Address);
   const [isSelectVisible, setIsSelectVisible] = useState(false);
-  const { setBnsAddress } = useStacksRecipientBnsName();
+  const { setBnsAddress } = useRecipientBnsName();
   const navigate = useNavigate();
 
   const onClickLabelAction = useCallback(() => {
diff --git a/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/components/recipient-field-address.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-select-fields/recipient-field-address.tsx
similarity index 100%
rename from src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/components/recipient-field-address.tsx
rename to src/app/pages/send/send-crypto-asset-form/components/recipient-select-fields/recipient-field-address.tsx
diff --git a/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/components/recipient-field-bns-name.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-select-fields/recipient-field-bns-name.tsx
similarity index 67%
rename from src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/components/recipient-field-bns-name.tsx
rename to src/app/pages/send/send-crypto-asset-form/components/recipient-select-fields/recipient-field-bns-name.tsx
index 768101e7..9df76ea5 100644
--- a/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/components/recipient-field-bns-name.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-select-fields/recipient-field-bns-name.tsx
@@ -2,27 +2,32 @@ import { useEffect, useState } from 'react';
 
 import { useFormikContext } from 'formik';
 
-import { StacksSendFormValues } from '@shared/models/form.model';
+import { BitcoinSendFormValues, StacksSendFormValues } from '@shared/models/form.model';
 
 import { RecipientField } from '@app/pages/send/send-crypto-asset-form/components/recipient-field';
+import { StacksClient } from '@app/query/stacks/stacks-client';
 
-import { useStacksRecipientBnsName } from '../hooks/use-stacks-recipient-bns-name';
-import { RecipientBnsAddressDisplayer } from './recipient-bns-address-displayer';
+import { RecipientAddressDisplayer } from './components/recipient-address-displayer';
+import { useRecipientBnsName } from './hooks/use-recipient-bns-name';
 
 interface RecipientFieldBnsNameProps {
+  fetchFn(client: StacksClient, name: string, isTestnet?: boolean): Promise<string | null>;
   isSelectVisible: boolean;
   onClickLabelAction(): void;
   selectedRecipientField: number;
   topInputOverlay: JSX.Element;
 }
 export function RecipientFieldBnsName({
+  fetchFn,
   isSelectVisible,
   onClickLabelAction,
   topInputOverlay,
 }: RecipientFieldBnsNameProps) {
   const [showBnsAddress, setShowBnsAddress] = useState(false);
-  const { errors, setFieldError, values } = useFormikContext<StacksSendFormValues>();
-  const { bnsAddress, getBnsAddressAndValidate } = useStacksRecipientBnsName();
+  const { errors, setFieldError, values } = useFormikContext<
+    BitcoinSendFormValues | StacksSendFormValues
+  >();
+  const { bnsAddress, getBnsAddressAndValidate } = useRecipientBnsName();
 
   // Apply the recipient field validation to the bns name field
   // here so we don't need to validate the bns name on blur.
@@ -46,12 +51,12 @@ export function RecipientFieldBnsName({
         isDisabled={isSelectVisible}
         labelAction="Select account"
         name="recipientBnsName"
-        onBlur={getBnsAddressAndValidate}
+        onBlur={() => getBnsAddressAndValidate(fetchFn)}
         onClickLabelAction={onClickLabelAction}
         placeholder="Enter recipient BNS name"
         topInputOverlay={topInputOverlay}
       />
-      {showBnsAddress ? <RecipientBnsAddressDisplayer address={bnsAddress} /> : null}
+      {showBnsAddress ? <RecipientAddressDisplayer address={bnsAddress} /> : null}
     </>
   );
 }
diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-select/recipient-select-item.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-select/components/recipient-select-item.tsx
similarity index 68%
rename from src/app/pages/send/send-crypto-asset-form/components/recipient-select/recipient-select-item.tsx
rename to src/app/pages/send/send-crypto-asset-form/components/recipient-select/components/recipient-select-item.tsx
index 20f8f774..78fb64c6 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/recipient-select/recipient-select-item.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-select/components/recipient-select-item.tsx
@@ -3,6 +3,7 @@ import { FiChevronDown } from 'react-icons/fi';
 import { Box, Text, color } from '@stacks/ui';
 
 const labels = ['Address', 'BNS Name'];
+const testLabels = ['address', 'bns-name'];
 
 interface RecipientSelectItemProps {
   index: number;
@@ -18,6 +19,7 @@ export function RecipientSelectItem(props: RecipientSelectItemProps) {
       alignItems="center"
       as="button"
       bg={color('bg')}
+      data-testid={`recipient-select-field-${testLabels[index]}`}
       display="flex"
       height="32px"
       mb="0px !important"
@@ -26,10 +28,16 @@ export function RecipientSelectItem(props: RecipientSelectItemProps) {
       pl={isVisible ? 'tight' : 'unset'}
       type="button"
     >
-      <Text color={color('text-caption')} fontSize={1} fontWeight={500} ml="2px" mr="tight">
+      <Text
+        color={isVisible ? color('text-body') : color('accent')}
+        fontSize={1}
+        fontWeight={isVisible ? 400 : 500}
+        ml="2px"
+        mr="tight"
+      >
         {labels[index]}
       </Text>
-      {isVisible ? <></> : <FiChevronDown />}
+      {isVisible ? <></> : <FiChevronDown color={color('accent')} />}
     </Box>
   );
 }
diff --git a/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/components/recipient-select-overlay.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-select/components/recipient-select-overlay.tsx
similarity index 100%
rename from src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/components/recipient-select-overlay.tsx
rename to src/app/pages/send/send-crypto-asset-form/components/recipient-select/components/recipient-select-overlay.tsx
diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-select/recipient-select.layout.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-select/components/recipient-select.layout.tsx
similarity index 100%
rename from src/app/pages/send/send-crypto-asset-form/components/recipient-select/recipient-select.layout.tsx
rename to src/app/pages/send/send-crypto-asset-form/components/recipient-select/components/recipient-select.layout.tsx
diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-select/recipient-select.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-select/recipient-select.tsx
index 4f627680..f312941d 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/recipient-select/recipient-select.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-select/recipient-select.tsx
@@ -1,5 +1,5 @@
-import { RecipientSelectItem } from './recipient-select-item';
-import { RecipientSelectLayout } from './recipient-select.layout';
+import { RecipientSelectItem } from './components/recipient-select-item';
+import { RecipientSelectLayout } from './components/recipient-select.layout';
 
 export enum RecipientFieldType {
   Address,
diff --git a/src/app/pages/send/send-crypto-asset-form/components/send-crypto-asset-form.layout.tsx b/src/app/pages/send/send-crypto-asset-form/components/send-crypto-asset-form.layout.tsx
index f684a39a..77bbd460 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/send-crypto-asset-form.layout.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/send-crypto-asset-form.layout.tsx
@@ -1,13 +1,23 @@
-import { Box } from '@stacks/ui';
+import { Flex } from '@stacks/ui';
 import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
 
 interface SendCryptoAssetFormLayoutProps {
-  children: JSX.Element;
+  children: React.ReactNode;
 }
 export function SendCryptoAssetFormLayout({ children }: SendCryptoAssetFormLayoutProps) {
   return (
-    <Box data-testid={SendCryptoAssetSelectors.SendForm} pb="base" width="100%">
+    <Flex
+      alignItems="center"
+      data-testId={SendCryptoAssetSelectors.SendForm}
+      flexDirection="column"
+      maxHeight={['calc(100vh - 116px)', 'calc(85vh - 116px)']}
+      overflowY="scroll"
+      pb={['120px', '48px']}
+      pt={['base', '48px']}
+      px="loose"
+      width="100%"
+    >
       {children}
-    </Box>
+    </Flex>
   );
 }
diff --git a/src/app/pages/send/send-crypto-asset-form/components/text-input-field.tsx b/src/app/pages/send/send-crypto-asset-form/components/text-input-field.tsx
index 53071bd4..02488b09 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/text-input-field.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/text-input-field.tsx
@@ -88,6 +88,7 @@ export function TextInputField({
               as="button"
               color={color('accent')}
               fontSize={1}
+              fontWeight={500}
               onClick={onClickLabelAction}
               type="button"
               zIndex={999}
diff --git a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-recipient-field.tsx b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-recipient-field.tsx
new file mode 100644
index 00000000..9704d2ff
--- /dev/null
+++ b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-recipient-field.tsx
@@ -0,0 +1,52 @@
+import { RecipientFieldType } from '@app/pages/send/send-crypto-asset-form/components/recipient-select/recipient-select';
+import { fetchBtcNameOwner } from '@app/query/stacks/bns/bns.utils';
+
+import { useRecipientSelectFields } from '../../../components/recipient-select-fields/hooks/use-recipient-select-fields';
+import { RecipientFieldAddress } from '../../../components/recipient-select-fields/recipient-field-address';
+import { RecipientFieldBnsName } from '../../../components/recipient-select-fields/recipient-field-bns-name';
+import { RecipientSelectOverlay } from '../../../components/recipient-select/components/recipient-select-overlay';
+
+export function BitcoinRecipientField() {
+  const {
+    isSelectVisible,
+    onClickLabelAction,
+    onSelectRecipientFieldType,
+    onSetIsSelectVisible,
+    selectedRecipientField,
+  } = useRecipientSelectFields();
+
+  const topInputOverlay = (
+    <RecipientSelectOverlay
+      isSelectVisible={isSelectVisible}
+      onSelectRecipientFieldType={onSelectRecipientFieldType}
+      onSetIsSelectVisible={onSetIsSelectVisible}
+      selectedRecipientField={selectedRecipientField}
+    />
+  );
+
+  const recipientFieldAddress = (
+    <RecipientFieldAddress
+      isSelectVisible={isSelectVisible}
+      onClickLabelAction={onClickLabelAction}
+      selectedRecipientField={selectedRecipientField}
+      topInputOverlay={topInputOverlay}
+    />
+  );
+
+  switch (selectedRecipientField) {
+    case RecipientFieldType.Address:
+      return recipientFieldAddress;
+    case RecipientFieldType.BnsName:
+      return (
+        <RecipientFieldBnsName
+          fetchFn={fetchBtcNameOwner}
+          isSelectVisible={isSelectVisible}
+          onClickLabelAction={onClickLabelAction}
+          selectedRecipientField={selectedRecipientField}
+          topInputOverlay={topInputOverlay}
+        />
+      );
+    default:
+      return recipientFieldAddress;
+  }
+}
diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/components/testnet-btc-message.tsx b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/testnet-btc-message.tsx
similarity index 91%
rename from src/app/pages/send/send-crypto-asset-form/form/btc/components/testnet-btc-message.tsx
rename to src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/testnet-btc-message.tsx
index b78d4db1..71cac9dd 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/btc/components/testnet-btc-message.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/testnet-btc-message.tsx
@@ -5,7 +5,7 @@ import { WarningLabel } from '@app/components/warning-label';
 
 export function TestnetBtcMessage() {
   return (
-    <WarningLabel mt="base-loose" width="100%">
+    <WarningLabel mb="base">
       This is a Bitcoin testnet transaction. Funds have no value.{' '}
       <ExternalLink
         href="https://coinfaucet.eu/en/btc-testnet"
diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/use-generate-bitcoin-tx.ts b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/hooks/use-generate-bitcoin-tx.ts
similarity index 100%
rename from src/app/pages/send/send-crypto-asset-form/form/btc/use-generate-bitcoin-tx.ts
rename to src/app/pages/send/send-crypto-asset-form/family/bitcoin/hooks/use-generate-bitcoin-tx.ts
diff --git a/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/stacks-recipient-field.tsx b/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field.tsx
similarity index 68%
rename from src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/stacks-recipient-field.tsx
rename to src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field.tsx
index 7825d58d..2e1bebe2 100644
--- a/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/stacks-recipient-field.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field.tsx
@@ -1,9 +1,10 @@
 import { RecipientFieldType } from '@app/pages/send/send-crypto-asset-form/components/recipient-select/recipient-select';
+import { fetchNameOwner } from '@app/query/stacks/bns/bns.utils';
 
-import { RecipientFieldAddress } from './components/recipient-field-address';
-import { RecipientFieldBnsName } from './components/recipient-field-bns-name';
-import { RecipientSelectOverlay } from './components/recipient-select-overlay';
-import { useStacksRecipientField } from './hooks/use-stacks-recipient-field';
+import { useRecipientSelectFields } from '../../../components/recipient-select-fields/hooks/use-recipient-select-fields';
+import { RecipientFieldAddress } from '../../../components/recipient-select-fields/recipient-field-address';
+import { RecipientFieldBnsName } from '../../../components/recipient-select-fields/recipient-field-bns-name';
+import { RecipientSelectOverlay } from '../../../components/recipient-select/components/recipient-select-overlay';
 
 export function StacksRecipientField() {
   const {
@@ -12,7 +13,7 @@ export function StacksRecipientField() {
     onSelectRecipientFieldType,
     onSetIsSelectVisible,
     selectedRecipientField,
-  } = useStacksRecipientField();
+  } = useRecipientSelectFields();
 
   const topInputOverlay = (
     <RecipientSelectOverlay
@@ -38,6 +39,7 @@ export function StacksRecipientField() {
     case RecipientFieldType.BnsName:
       return (
         <RecipientFieldBnsName
+          fetchFn={fetchNameOwner}
           isSelectVisible={isSelectVisible}
           onClickLabelAction={onClickLabelAction}
           selectedRecipientField={selectedRecipientField}
diff --git a/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/components/recipient-bns-address.tsx b/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/components/recipient-bns-address.tsx
deleted file mode 100644
index 76338741..00000000
--- a/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/components/recipient-bns-address.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// TODO: Remove with old recipient field in btc form
-import { useCallback } from 'react';
-import { FiCopy, FiInfo } from 'react-icons/fi';
-
-import { Box, Stack, Text, Tooltip, color, useClipboard } from '@stacks/ui';
-import { truncateMiddle } from '@stacks/ui-utils';
-import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
-
-import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
-
-export function RecipientFieldBnsAddress(props: { bnsAddress: string }) {
-  const { bnsAddress } = props;
-  const analytics = useAnalytics();
-  const { onCopy, hasCopied } = useClipboard(bnsAddress);
-
-  const copyToClipboard = useCallback(() => {
-    void analytics.track('copy_resolved_address_to_clipboard');
-    onCopy();
-  }, [analytics, onCopy]);
-
-  const onHover = useCallback(
-    () => analytics.track('view_resolved_recipient_address'),
-    [analytics]
-  );
-
-  return (
-    <Stack isInline spacing="tight" zIndex={999}>
-      <Text
-        color={color('text-caption')}
-        data-testid={SendCryptoAssetSelectors.RecipientBnsAddressLabel}
-        fontSize={0}
-      >
-        {truncateMiddle(bnsAddress, 4)}
-      </Text>
-      <Tooltip label={bnsAddress} maxWidth="none" placement="bottom">
-        <Stack>
-          <Box
-            _hover={{ cursor: 'pointer' }}
-            as={FiInfo}
-            color={color('text-caption')}
-            data-testid={SendCryptoAssetSelectors.RecipientBnsAddressInfoIcon}
-            onMouseOver={onHover}
-            size="12px"
-          />
-        </Stack>
-      </Tooltip>
-      <Tooltip label={hasCopied ? 'Copied!' : 'Copy address'} placement="right">
-        <Stack>
-          <Box
-            _hover={{ cursor: 'pointer' }}
-            as={FiCopy}
-            color={color('text-caption')}
-            data-testid={SendCryptoAssetSelectors.RecipientBnsAddressCopyToClipboard}
-            onClick={copyToClipboard}
-            size="12px"
-          />
-        </Stack>
-      </Tooltip>
-    </Stack>
-  );
-}
diff --git a/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/hooks/use-stacks-recipient-bns-name.tsx b/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/hooks/use-stacks-recipient-bns-name.tsx
deleted file mode 100644
index a60c5280..00000000
--- a/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field/hooks/use-stacks-recipient-bns-name.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { useFormikContext } from 'formik';
-
-import { logger } from '@shared/logger';
-import { StacksSendFormValues } from '@shared/models/form.model';
-
-import { FormErrorMessages } from '@app/common/error-messages';
-import { fetchNameOwner } from '@app/query/stacks/bns/bns.utils';
-import { useStacksClientUnanchored } from '@app/store/common/api-clients.hooks';
-import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
-
-// Handles validating the BNS name lookup
-export function useStacksRecipientBnsName() {
-  const { setFieldError, setFieldValue, values } = useFormikContext<StacksSendFormValues>();
-  const [bnsAddress, setBnsAddress] = useState('');
-  const currentNetwork = useCurrentNetworkState();
-  const client = useStacksClientUnanchored();
-
-  const getBnsAddressAndValidate = useCallback(async () => {
-    setBnsAddress('');
-    if (!values.recipientBnsName) return;
-
-    try {
-      const owner = await fetchNameOwner(client, values.recipientBnsName, currentNetwork.isTestnet);
-      if (owner) {
-        setBnsAddress(owner);
-        setFieldError('recipient', undefined);
-        setFieldValue('recipient', owner);
-      } else {
-        setFieldError('recipientBnsName', FormErrorMessages.BnsAddressNotFound);
-      }
-    } catch (e) {
-      setFieldError('recipientBnsName', FormErrorMessages.BnsAddressNotFound);
-      logger.error('Error fetching bns address', e);
-    }
-  }, [client, currentNetwork.isTestnet, setFieldError, setFieldValue, values.recipientBnsName]);
-
-  return { bnsAddress, getBnsAddressAndValidate, setBnsAddress };
-}
diff --git a/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/use-stacks-ft-params.ts b/src/app/pages/send/send-crypto-asset-form/family/stacks/hooks/use-stacks-ft-params.ts
similarity index 100%
rename from src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/use-stacks-ft-params.ts
rename to src/app/pages/send/send-crypto-asset-form/family/stacks/hooks/use-stacks-ft-params.ts
diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
index 92344314..bb860c0d 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
@@ -12,19 +12,15 @@ import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/marke
 import { useCurrentBtcNativeSegwitAccountAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 
 import { AmountField } from '../../components/amount-field';
-import { AvailableBalance } from '../../components/available-balance';
-import { FormErrors } from '../../components/form-errors';
-import { FormFieldsLayout } from '../../components/form-fields.layout';
-import { PreviewButton } from '../../components/preview-button';
+import { FormFooter } from '../../components/form-footer';
 import { SelectedAssetField } from '../../components/selected-asset-field';
 import { SendCryptoAssetFormLayout } from '../../components/send-crypto-asset-form.layout';
 import { SendFiatValue } from '../../components/send-fiat-value';
 import { SendMaxButton } from '../../components/send-max-button';
-import { useCalculateMaxBitcoinSpend } from '../../family/bitcoin/hooks/use-calculate-max-spend';
+import { BitcoinRecipientField } from '../../family/bitcoin/components/bitcoin-recipient-field';
+import { TestnetBtcMessage } from '../../family/bitcoin/components/testnet-btc-message';
 import { useSendFormRouteState } from '../../hooks/use-send-form-route-state';
 import { createDefaultInitialFormValues, defaultSendFormFormikProps } from '../../send-form.utils';
-import { BtcRecipientField } from './components/btc-recipient-field';
-import { TestnetBtcMessage } from './components/testnet-btc-message';
 import { useBtcSendForm } from './use-btc-send-form';
 
 export function BtcSendForm() {
@@ -34,17 +30,21 @@ export function BtcSendForm() {
   const currentAccountBtcAddress = useCurrentBtcNativeSegwitAccountAddressIndexZero();
   const btcBalance = useNativeSegwitBalance(currentAccountBtcAddress);
 
-  const calcMaxSpend = useCalculateMaxBitcoinSpend();
-
-  const { validationSchema, currentNetwork, formRef, previewTransaction, onFormStateChange } =
-    useBtcSendForm();
+  const {
+    calcMaxSpend,
+    currentNetwork,
+    formRef,
+    onFormStateChange,
+    previewTransaction,
+    validationSchema,
+  } = useBtcSendForm();
 
   return (
-    <SendCryptoAssetFormLayout>
+    <Box width="100%" pb="base">
       <Formik
         initialValues={createDefaultInitialFormValues({
           ...routeState,
-          recipientAddressOrBnsName: '',
+          recipientBnsName: '',
         })}
         onSubmit={previewTransaction}
         validationSchema={validationSchema}
@@ -55,36 +55,33 @@ export function BtcSendForm() {
           onFormStateChange(props.values);
           return (
             <Form>
-              <AmountField
-                balance={btcBalance.balance}
-                switchableAmount={<SendFiatValue marketData={btcMarketData} assetSymbol={'BTC'} />}
-                bottomInputOverlay={
-                  <SendMaxButton
-                    balance={btcBalance.balance}
-                    sendMaxBalance={
-                      calcMaxSpend(props.values.recipient)?.spendableBitcoin.toString() ?? '0'
-                    }
-                  />
-                }
-                autoComplete="off"
-              />
-              <FormFieldsLayout>
+              <SendCryptoAssetFormLayout>
+                <AmountField
+                  balance={btcBalance.balance}
+                  switchableAmount={
+                    <SendFiatValue marketData={btcMarketData} assetSymbol={'BTC'} />
+                  }
+                  bottomInputOverlay={
+                    <SendMaxButton
+                      balance={btcBalance.balance}
+                      sendMaxBalance={
+                        calcMaxSpend(props.values.recipient)?.spendableBitcoin.toString() ?? '0'
+                      }
+                    />
+                  }
+                  autoComplete="off"
+                />
                 <SelectedAssetField icon={<BtcIcon />} name={btcBalance.asset.name} symbol="BTC" />
-                {/* TODO: Implement new recipient field here */}
-                <BtcRecipientField />
-              </FormFieldsLayout>
-              {currentNetwork.chain.bitcoin.network === 'testnet' && <TestnetBtcMessage />}
-              <FormErrors />
-              <PreviewButton />
-              <Box my="base">
-                <AvailableBalance availableBalance={btcBalance.balance} />
-              </Box>
+                <BitcoinRecipientField />
+                {currentNetwork.chain.bitcoin.network === 'testnet' && <TestnetBtcMessage />}
+              </SendCryptoAssetFormLayout>
+              <FormFooter balance={btcBalance.balance} />
               <HighFeeDrawer learnMoreUrl={HIGH_FEE_WARNING_LEARN_MORE_URL_BTC} />
               <Outlet />
             </Form>
           );
         }}
       </Formik>
-    </SendCryptoAssetFormLayout>
+    </Box>
   );
 }
diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/components/btc-recipient-field.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/components/btc-recipient-field.tsx
deleted file mode 100644
index 3d232e0b..00000000
--- a/src/app/pages/send/send-crypto-asset-form/form/btc/components/btc-recipient-field.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { useField } from 'formik';
-
-import { RouteUrls } from '@shared/route-urls';
-
-import { fetchBtcNameOwner } from '@app/query/stacks/bns/bns.utils';
-import { useStacksClientUnanchored } from '@app/store/common/api-clients.hooks';
-
-import { RecipientField } from '../../../components/recipient-field';
-import { RecipientFieldBnsAddress } from '../../../family/stacks/components/stacks-recipient-field/components/recipient-bns-address';
-
-export function BtcRecipientField() {
-  const client = useStacksClientUnanchored();
-  const [recipientAddressOrBnsNameField] = useField('recipientAddressOrBnsName');
-  const [, _, recipientFieldHelpers] = useField('recipient');
-  const navigate = useNavigate();
-  const [bnsAddress, setBnsAddress] = useState('');
-  const [lastValidatedInput, setLastValidatedInput] = useState('');
-
-  const getBtcAddressFromBns = useCallback(async () => {
-    // Skip if this input was already handled
-    if (lastValidatedInput === recipientAddressOrBnsNameField.value) return;
-
-    setBnsAddress('');
-    setLastValidatedInput(recipientAddressOrBnsNameField.value);
-    try {
-      const btcFromBns = await fetchBtcNameOwner(client, recipientAddressOrBnsNameField.value);
-      if (btcFromBns) {
-        recipientFieldHelpers.setValue(btcFromBns);
-        setBnsAddress(btcFromBns);
-      } else {
-        recipientFieldHelpers.setValue(recipientAddressOrBnsNameField.value);
-      }
-    } catch (error) {
-      recipientFieldHelpers.setValue(recipientAddressOrBnsNameField.value);
-    }
-  }, [
-    client,
-    recipientAddressOrBnsNameField,
-    recipientFieldHelpers,
-    lastValidatedInput,
-    setLastValidatedInput,
-  ]);
-
-  const onClickLabel = () => {
-    setBnsAddress('');
-    navigate(RouteUrls.SendCryptoAssetFormRecipientAccounts);
-  };
-
-  return (
-    <RecipientField
-      labelAction="Choose account"
-      name="recipientAddressOrBnsName"
-      onBlur={getBtcAddressFromBns}
-      onClickLabelAction={onClickLabel}
-      placeholder="Address"
-      topInputOverlay={
-        !!bnsAddress ? <RecipientFieldBnsAddress bnsAddress={bnsAddress} /> : undefined
-      }
-    />
-  );
-}
diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/use-btc-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/use-btc-send-form.tsx
index 0512f113..94084817 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/btc/use-btc-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/btc/use-btc-send-form.tsx
@@ -21,20 +21,17 @@ import {
   btcMinimumSpendValidator,
 } from '@app/common/validation/forms/amount-validators';
 import { btcAmountPrecisionValidator } from '@app/common/validation/forms/currency-validators';
-import { btcRecipientAddressOrBnsNameValidator } from '@app/common/validation/forms/recipient-validators';
 import { useUpdatePersistedSendFormValues } from '@app/features/popup-send-form-restoration/use-update-persisted-send-form-values';
 import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/bitcoin-balances.query';
 import { useCurrentBtcNativeSegwitAccountAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
-import { useStacksClientUnanchored } from '@app/store/common/api-clients.hooks';
 import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
 
 import { useCalculateMaxBitcoinSpend } from '../../family/bitcoin/hooks/use-calculate-max-spend';
+import { useGenerateSignedBitcoinTx } from '../../family/bitcoin/hooks/use-generate-bitcoin-tx';
 import { useSendFormNavigate } from '../../hooks/use-send-form-navigate';
-import { useGenerateSignedBitcoinTx } from './use-generate-bitcoin-tx';
 
 export function useBtcSendForm() {
   const formRef = useRef<FormikProps<BitcoinSendFormValues>>(null);
-
   const currentNetwork = useCurrentNetwork();
   const currentAccountBtcAddress = useCurrentBtcNativeSegwitAccountAddressIndexZero();
   const btcCryptoCurrencyAssetBalance = useNativeSegwitBalance(currentAccountBtcAddress);
@@ -44,14 +41,12 @@ export function useBtcSendForm() {
   const generateTx = useGenerateSignedBitcoinTx();
   const calcMaxSpend = useCalculateMaxBitcoinSpend();
   const { onFormStateChange } = useUpdatePersistedSendFormValues();
-  const client = useStacksClientUnanchored();
 
   return {
-    formRef,
-
-    onFormStateChange,
-
+    calcMaxSpend,
     currentNetwork,
+    formRef,
+    onFormStateChange,
 
     validationSchema: yup.object({
       amount: yup
@@ -68,10 +63,6 @@ export function useBtcSendForm() {
           })
         )
         .concat(btcMinimumSpendValidator()),
-      // TODO: Implement new recipient field here
-      recipientAddressOrBnsName: btcRecipientAddressOrBnsNameValidator({
-        client,
-      }),
       recipient: yup
         .string()
         .concat(btcAddressValidator())
diff --git a/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/stacks-sip10-fungible-token-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/stacks-sip10-fungible-token-send-form.tsx
index 8555742f..dadf0177 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/stacks-sip10-fungible-token-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/stacks-sip10-fungible-token-send-form.tsx
@@ -1,5 +1,6 @@
-import { Navigate, useNavigate } from 'react-router-dom';
+import { Navigate, Outlet, useNavigate } from 'react-router-dom';
 
+import { Box } from '@stacks/ui';
 import { Form, Formik } from 'formik';
 
 import { HIGH_FEE_WARNING_LEARN_MORE_URL_STX } from '@shared/constants';
@@ -10,16 +11,16 @@ import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-a
 import { EditNonceButton } from '@app/components/edit-nonce-button';
 import { FeesRow } from '@app/components/fees-row/fees-row';
 import { NonceSetter } from '@app/components/nonce-setter';
+import { HighFeeDrawer } from '@app/features/high-fee-drawer/high-fee-drawer';
 import { useUpdatePersistedSendFormValues } from '@app/features/popup-send-form-restoration/use-update-persisted-send-form-values';
 
 import { AmountField } from '../../components/amount-field';
-import { Footer } from '../../components/footer';
-import { FormFieldsLayout } from '../../components/form-fields.layout';
+import { FormFooter } from '../../components/form-footer';
 import { MemoField } from '../../components/memo-field';
 import { SelectedAssetField } from '../../components/selected-asset-field';
 import { SendCryptoAssetFormLayout } from '../../components/send-crypto-asset-form.layout';
 import { SendMaxButton } from '../../components/send-max-button';
-import { StacksRecipientField } from '../../family/stacks/components/stacks-recipient-field/stacks-recipient-field';
+import { StacksRecipientField } from '../../family/stacks/components/stacks-recipient-field';
 import { defaultSendFormFormikProps } from '../../send-form.utils';
 import { useSip10SendForm } from './use-sip10-send-form';
 
@@ -42,7 +43,7 @@ export function StacksSip10FungibleTokenSendForm({}) {
   }
 
   return (
-    <SendCryptoAssetFormLayout>
+    <Box width="100%" pb="base">
       <Formik
         initialValues={initialValues}
         onSubmit={async (values, formikHelpers) => await previewTransaction(values, formikHelpers)}
@@ -54,7 +55,7 @@ export function StacksSip10FungibleTokenSendForm({}) {
           return (
             <NonceSetter>
               <Form>
-                <FormFieldsLayout>
+                <SendCryptoAssetFormLayout>
                   <AmountField
                     balance={availableTokenBalance}
                     bottomInputOverlay={
@@ -70,17 +71,18 @@ export function StacksSip10FungibleTokenSendForm({}) {
                   <FeesRow fees={stacksFtFees} isSponsored={false} mt="base" />
                   <EditNonceButton
                     alignSelf="flex-end"
-                    mb="extra-loose"
                     mt="base"
                     onEditNonce={() => navigate(RouteUrls.EditNonce)}
                   />
-                </FormFieldsLayout>
-                <Footer balance={availableTokenBalance} url={HIGH_FEE_WARNING_LEARN_MORE_URL_STX} />
+                </SendCryptoAssetFormLayout>
+                <FormFooter balance={availableTokenBalance} />
+                <HighFeeDrawer learnMoreUrl={HIGH_FEE_WARNING_LEARN_MORE_URL_STX} />
+                <Outlet />
               </Form>
             </NonceSetter>
           );
         }}
       </Formik>
-    </SendCryptoAssetFormLayout>
+    </Box>
   );
 }
diff --git a/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/use-sip10-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/use-sip10-send-form.tsx
index 16ede6f3..b79ac6fc 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/use-sip10-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/use-sip10-send-form.tsx
@@ -31,10 +31,10 @@ import {
   useGenerateFtTokenTransferUnsignedTx,
 } from '@app/store/transactions/token-transfer.hooks';
 
+import { useStacksFtRouteState } from '../../family/stacks/hooks/use-stacks-ft-params';
 import { useSendFormNavigate } from '../../hooks/use-send-form-navigate';
 import { useSendFormRouteState } from '../../hooks/use-send-form-route-state';
 import { createDefaultInitialFormValues } from '../../send-form.utils';
-import { useStacksFtRouteState } from './use-stacks-ft-params';
 
 export function useSip10SendForm() {
   const [contractId, setContractId] = useState('');
diff --git a/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx
index cc18e6b3..efe9ecb3 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx
@@ -1,5 +1,6 @@
-import { useNavigate } from 'react-router-dom';
+import { Outlet, useNavigate } from 'react-router-dom';
 
+import { Box } from '@stacks/ui';
 import { Form, Formik } from 'formik';
 
 import { HIGH_FEE_WARNING_LEARN_MORE_URL_STX } from '@shared/constants';
@@ -9,17 +10,17 @@ import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-a
 import { EditNonceButton } from '@app/components/edit-nonce-button';
 import { FeesRow } from '@app/components/fees-row/fees-row';
 import { NonceSetter } from '@app/components/nonce-setter';
+import { HighFeeDrawer } from '@app/features/high-fee-drawer/high-fee-drawer';
 import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks';
 
 import { AmountField } from '../../components/amount-field';
-import { Footer } from '../../components/footer';
-import { FormFieldsLayout } from '../../components/form-fields.layout';
+import { FormFooter } from '../../components/form-footer';
 import { MemoField } from '../../components/memo-field';
 import { SelectedAssetField } from '../../components/selected-asset-field';
 import { SendCryptoAssetFormLayout } from '../../components/send-crypto-asset-form.layout';
 import { SendFiatValue } from '../../components/send-fiat-value';
 import { SendMaxButton } from '../../components/send-max-button';
-import { StacksRecipientField } from '../../family/stacks/components/stacks-recipient-field/stacks-recipient-field';
+import { StacksRecipientField } from '../../family/stacks/components/stacks-recipient-field';
 import { defaultSendFormFormikProps } from '../../send-form.utils';
 import { useStxSendForm } from './use-stx-send-form';
 
@@ -38,7 +39,7 @@ export function StxSendForm() {
   } = useStxSendForm();
 
   return (
-    <SendCryptoAssetFormLayout>
+    <Box width="100%" pb="base">
       <Formik
         initialValues={initialValues}
         onSubmit={previewTransaction}
@@ -50,7 +51,7 @@ export function StxSendForm() {
           return (
             <NonceSetter>
               <Form>
-                <FormFieldsLayout>
+                <SendCryptoAssetFormLayout>
                   <AmountField
                     balance={availableStxBalance}
                     switchableAmount={
@@ -70,17 +71,18 @@ export function StxSendForm() {
                   <FeesRow fees={stxFees} isSponsored={false} mt="tight" />
                   <EditNonceButton
                     alignSelf="flex-end"
-                    mb="extra-loose"
                     mt="base"
                     onEditNonce={() => navigate(RouteUrls.EditNonce)}
                   />
-                </FormFieldsLayout>
-                <Footer balance={availableStxBalance} url={HIGH_FEE_WARNING_LEARN_MORE_URL_STX} />
+                </SendCryptoAssetFormLayout>
+                <FormFooter balance={availableStxBalance} />
+                <HighFeeDrawer learnMoreUrl={HIGH_FEE_WARNING_LEARN_MORE_URL_STX} />
+                <Outlet />
               </Form>
             </NonceSetter>
           );
         }}
       </Formik>
-    </SendCryptoAssetFormLayout>
+    </Box>
   );
 }
diff --git a/src/shared/models/form.model.ts b/src/shared/models/form.model.ts
index b6ee3933..9cb26f66 100644
--- a/src/shared/models/form.model.ts
+++ b/src/shared/models/form.model.ts
@@ -5,6 +5,7 @@ export interface BitcoinSendFormValues {
   feeType: string;
   memo: string;
   recipient: string;
+  recipientBnsName: string;
   symbol: string;
 }
 
diff --git a/tests/page-object-models/send.page.ts b/tests/page-object-models/send.page.ts
index 10a58a28..e7af7552 100644
--- a/tests/page-object-models/send.page.ts
+++ b/tests/page-object-models/send.page.ts
@@ -1,8 +1,6 @@
 import { Locator, Page } from '@playwright/test';
 import { CryptoAssetSelectors } from '@tests/selectors/crypto-asset.selectors';
 import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
-import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
-import { createTestSelector } from '@tests/utils';
 
 import { RouteUrls } from '@shared/route-urls';
 
@@ -16,13 +14,13 @@ export class SendPage {
   readonly memoInput: Locator;
   readonly previewSendTxButton: Locator;
   readonly recipientChooseAccountButton: Locator;
+  readonly recipientSelectFieldAddress: Locator;
+  readonly recipientSelectFieldBnsName: Locator;
   readonly recipientInput: Locator;
   readonly recipientBnsAddressLabel: Locator;
-  readonly recipientBnsAddressInfoIcon: Locator;
   readonly sendMaxButton: Locator;
   readonly feesRow: Locator;
   readonly memoRow: Locator;
-  readonly feesSelector: string = createTestSelector(SharedComponentsSelectors.FeeRow);
 
   constructor(page: Page) {
     this.page = page;
@@ -40,13 +38,16 @@ export class SendPage {
     this.recipientChooseAccountButton = page.getByTestId(
       SendCryptoAssetSelectors.RecipientChooseAccountButton
     );
+    this.recipientSelectFieldAddress = this.page.getByTestId(
+      SendCryptoAssetSelectors.RecipientSelectFieldAddress
+    );
+    this.recipientSelectFieldBnsName = this.page.getByTestId(
+      SendCryptoAssetSelectors.RecipientSelectFieldBnsName
+    );
     this.recipientInput = this.page.getByTestId(SendCryptoAssetSelectors.RecipientFieldInput);
     this.recipientBnsAddressLabel = this.page.getByTestId(
       SendCryptoAssetSelectors.RecipientBnsAddressLabel
     );
-    this.recipientBnsAddressInfoIcon = page.getByTestId(
-      SendCryptoAssetSelectors.RecipientBnsAddressInfoIcon
-    );
     this.feesRow = page.getByTestId(SendCryptoAssetSelectors.ConfirmationDetailsFee);
     this.memoRow = page.getByTestId(SendCryptoAssetSelectors.ConfirmationDetailsMemo);
 
@@ -70,8 +71,4 @@ export class SendPage {
     await this.page.waitForURL('**' + `${RouteUrls.SendCryptoAsset}/stx`);
     await this.page.getByTestId(SendCryptoAssetSelectors.SendForm).waitFor();
   }
-
-  async waitForFeesSelector() {
-    await this.page.waitForSelector(this.feesSelector, { timeout: 30000 });
-  }
 }
diff --git a/tests/selectors/send.selectors.ts b/tests/selectors/send.selectors.ts
index 42d9f794..7f886ad2 100644
--- a/tests/selectors/send.selectors.ts
+++ b/tests/selectors/send.selectors.ts
@@ -13,9 +13,10 @@ export enum SendCryptoAssetSelectors {
   MemoFieldInput = 'memo-field-input',
   PreviewSendTxBtn = 'preview-send-tx-btn',
   RecipientChooseAccountButton = 'recipient-choose-account-button',
+  RecipientSelectFieldAddress = 'recipient-select-field-address',
+  RecipientSelectFieldBnsName = 'recipient-select-field-bns-name',
   RecipientFieldInput = 'recipient-field-input',
   RecipientBnsAddressLabel = 'recipient-bns-address-label',
-  RecipientBnsAddressInfoIcon = 'recipient-bns-address-info-icon',
   RecipientBnsAddressCopyToClipboard = 'recipient-bns-address-copy-to-clipboard',
   SendForm = 'send-form',
   SendMaxBtn = 'send-max-btn',
diff --git a/tests/specs/send/send-btc.spec.ts b/tests/specs/send/send-btc.spec.ts
index c240f302..3df5a840 100644
--- a/tests/specs/send/send-btc.spec.ts
+++ b/tests/specs/send/send-btc.spec.ts
@@ -7,7 +7,6 @@ import { FormErrorMessages } from '@app/common/error-messages';
 import { test } from '../../fixtures/fixtures';
 
 test.describe('send btc', () => {
-  // TODO: Don't run these if we disable bitcoin sending?
   test.beforeEach(async ({ extensionId, globalPage, homePage, onboardingPage, sendPage }) => {
     await globalPage.setupAndUseApiCalls(extensionId);
     await onboardingPage.signInExistingUser();
diff --git a/tests/specs/send/send-stx.spec.ts b/tests/specs/send/send-stx.spec.ts
index 4707f255..270de429 100644
--- a/tests/specs/send/send-stx.spec.ts
+++ b/tests/specs/send/send-stx.spec.ts
@@ -31,26 +31,29 @@ test.describe('send stx', () => {
 
     test('that recipient address matches bns name', async ({ page, sendPage }) => {
       await sendPage.amountInput.fill('.0001');
+      await sendPage.recipientSelectFieldAddress.click();
+      await sendPage.recipientSelectFieldBnsName.click();
       await sendPage.recipientInput.fill(TEST_BNS_NAME);
       await sendPage.recipientInput.blur();
       await sendPage.recipientBnsAddressLabel.waitFor();
-      await sendPage.recipientBnsAddressInfoIcon.hover();
       const bnsResolvedAddress = await page.getByText(TEST_BNS_RESOLVED_ADDRESS).innerText();
 
       test.expect(bnsResolvedAddress).toBeTruthy();
     });
 
     test('that fee row defaults to middle fee estimation', async ({ page }) => {
+      await page.getByTestId(SharedComponentsSelectors.FeeToBePaidLabel).scrollIntoViewIfNeeded();
       const feeToBePaid = await page
         .getByTestId(SharedComponentsSelectors.FeeToBePaidLabel)
         .innerText();
       const fee = Number(feeToBePaid.split(' ')[0]);
       // Using min/max fee caps
-      const isMiddleFee = fee >= 0.003 && fee < 0.75;
+      const isMiddleFee = fee >= 0.003 && fee <= 0.75;
       test.expect(isMiddleFee).toBeTruthy();
     });
 
     test('that low fee estimate can be selected', async ({ page }) => {
+      await page.getByTestId(SharedComponentsSelectors.FeeToBePaidLabel).scrollIntoViewIfNeeded();
       await page.getByTestId(SharedComponentsSelectors.MiddleFeeEstimateItem).click();
       await page.getByTestId(SharedComponentsSelectors.LowFeeEstimateItem).click();
       const feeToBePaid = await page
@@ -58,7 +61,7 @@ test.describe('send stx', () => {
         .innerText();
       const fee = Number(feeToBePaid.split(' ')[0]);
       // Using min/max fee caps
-      const isLowFee = fee >= 0.0025 && fee < 0.5;
+      const isLowFee = fee >= 0.0025 && fee <= 0.5;
       test.expect(isLowFee).toBeTruthy();
     });
   });
@@ -117,21 +120,22 @@ test.describe('send stx', () => {
   });
 
   test.describe('send form preview', () => {
-    test('that it shows preview of tx details to be confirmed', async ({ sendPage }) => {
+    test('that it shows preview of tx details to be confirmed', async ({ page, sendPage }) => {
       await sendPage.amountInput.fill('0.000001');
       await sendPage.recipientInput.fill(TEST_ACCOUNT_2_STX_ADDRESS);
-      await sendPage.waitForFeesSelector();
+      await page.getByTestId(SharedComponentsSelectors.FeeToBePaidLabel).scrollIntoViewIfNeeded();
       await sendPage.previewSendTxButton.click();
       const details = await sendPage.confirmationDetails.allInnerTexts();
       test.expect(details).toBeTruthy();
     });
 
     test('that it shows preview of tx details after validation error is resolved', async ({
+      page,
       sendPage,
     }) => {
       await sendPage.amountInput.fill('0.0000001');
       await sendPage.recipientInput.fill(TEST_ACCOUNT_2_STX_ADDRESS);
-      await sendPage.waitForFeesSelector();
+      await page.getByTestId(SharedComponentsSelectors.FeeToBePaidLabel).scrollIntoViewIfNeeded();
       await sendPage.previewSendTxButton.click();
       const errorMsg = await sendPage.amountInputErrorLabel.innerText();
       test.expect(errorMsg).toEqual(FormErrorMessages.MustBePositive);
@@ -143,6 +147,7 @@ test.describe('send stx', () => {
     });
 
     test('that asset value, recipient, memo and fees on preview match input', async ({
+      page,
       sendPage,
     }) => {
       const amount = '0.000001';
@@ -151,7 +156,7 @@ test.describe('send stx', () => {
       await sendPage.amountInput.fill(amount);
       await sendPage.recipientInput.fill(TEST_ACCOUNT_2_STX_ADDRESS);
       await sendPage.memoInput.fill(memo);
-      await sendPage.waitForFeesSelector();
+      await page.getByTestId(SharedComponentsSelectors.FeeToBePaidLabel).scrollIntoViewIfNeeded();
       const fees = await sendPage.page
         .getByTestId(SharedComponentsSelectors.FeeToBePaidLabel)
         .innerText();
@@ -177,13 +182,13 @@ test.describe('send stx', () => {
       test.expect(confirmationMemo).toEqual(memo);
     });
 
-    test('that empty memo on preview matches default empty value', async ({ sendPage }) => {
+    test('that empty memo on preview matches default empty value', async ({ page, sendPage }) => {
       const amount = '0.000001';
       const emptyMemoPreviewValue = 'No memo';
 
       await sendPage.amountInput.fill(amount);
       await sendPage.recipientInput.fill(TEST_ACCOUNT_2_STX_ADDRESS);
-      await sendPage.waitForFeesSelector();
+      await page.getByTestId(SharedComponentsSelectors.FeeToBePaidLabel).scrollIntoViewIfNeeded();
       await sendPage.previewSendTxButton.click();
 
       const confirmationMemo = await sendPage.memoRow