fix: trim recipient address field to remove leading/ trailing spaces, fixes #2806

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

@@ -1,4 +1,9 @@
+import { JSX, useEffect } from 'react';
+
 import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
+import { useField, useFormikContext } from 'formik';
+
+import { BitcoinSendFormValues, StacksSendFormValues } from '@shared/models/form.model';
 
 import { TextInputField } from '@app/components/text-input-field';
 
@@ -22,6 +27,12 @@ export function RecipientField({
   placeholder,
   topInputOverlay,
 }: RecipientFieldProps) {
+  const [field] = useField(name);
+  const { setFieldValue } = useFormikContext<BitcoinSendFormValues | StacksSendFormValues>();
+  useEffect(() => {
+    void setFieldValue(name, field.value.trim());
+  }, [name, field.value, setFieldValue]);
+
   return (
     <TextInputField
       dataTestId={SendCryptoAssetSelectors.RecipientFieldInput}

tests/specs/send/send-btc.spec.ts

@@ -28,6 +28,17 @@ test.describe('send btc', () => {
       const details = await sendPage.confirmationDetails.allInnerTexts();
       test.expect(details).toBeTruthy();
     });
+    test('that recipient input is trimmed correctly', async ({ sendPage }) => {
+      await sendPage.amountInput.fill('0.00006');
+      await sendPage.recipientInput.fill(' ' + TEST_TESTNET_ACCOUNT_2_BTC_ADDRESS + ' ');
+      await sendPage.recipientInput.blur();
+      await sendPage.page.waitForTimeout(1000);
+      await sendPage.previewSendTxButton.click();
+      await sendPage.feesListItem.filter({ hasText: BtcFeeType.High }).click();
+
+      const displayerAddress = await getDisplayerAddress(sendPage.confirmationDetailsRecipient);
+      test.expect(displayerAddress).toEqual(TEST_TESTNET_ACCOUNT_2_BTC_ADDRESS);
+    });
 
     test('that asset value and recipient on preview match input', async ({ sendPage }) => {
       const amount = '0.00006';