From c74c43d8d803e7606c42b32c306e5051b1afc775 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Bruus=20Zeppelin?= <soerenbf@gmail.com>
Date: Tue, 22 Oct 2024 09:38:27 +0200
Subject: [PATCH] Change receiver input to textarea

---
 .../shared/Form/TokenAmount/TokenAmount.scss  |  4 +++
 .../popupX/shared/Form/TokenAmount/View.tsx   | 33 +++++++++++++++----
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/TokenAmount.scss b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/TokenAmount.scss
index 01ecd78ad..1ad87a397 100644
--- a/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/TokenAmount.scss
+++ b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/TokenAmount.scss
@@ -132,5 +132,9 @@
             justify-content: space-between;
             margin-top: rem(12px);
         }
+
+        textarea {
+            resize: none;
+        }
     }
 }
diff --git a/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/View.tsx b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/View.tsx
index 0034924e9..18e6a6e55 100644
--- a/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/View.tsx
+++ b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/View.tsx
@@ -45,6 +45,30 @@ const InputClear = forwardRef<HTMLInputElement, AmountInputProps>(
 
 const FormInputClear = makeUncontrolled(InputClear);
 
+type ReceiverInputProps = Pick<
+    InputHTMLAttributes<HTMLTextAreaElement>,
+    'className' | 'value' | 'onChange' | 'onBlur' | 'autoFocus'
+> &
+    RequiredUncontrolledFieldProps<HTMLInputElement>;
+
+/**
+ * @description
+ * Use as a normal \<textarea /\>.
+ */
+const ReceiverInput = forwardRef<HTMLTextAreaElement, ReceiverInputProps>(({ error, className, ...props }, ref) => {
+    return (
+        <textarea
+            className={clsx('token-amount_field', error !== undefined && 'token-amount_field--invalid', className)}
+            ref={ref}
+            autoComplete="off"
+            spellCheck="false"
+            {...props}
+        />
+    );
+});
+
+const FormReceiverInput = makeUncontrolled(ReceiverInput);
+
 const parseTokenSelectorId = (value: string): null | CIS2.TokenAddress => {
     if (value.startsWith('ccd')) {
         return null;
@@ -335,7 +359,7 @@ export default function TokenAmountView(props: TokenAmountViewProps) {
                         selectedToken={selectedToken}
                         onSelect={handleTokenSelect}
                         tokens={tokens}
-                        selectedTokenBalance={availableAmount}
+                        selectedTokenBalance={balance}
                         formatAmount={formatAmount}
                     />
                 ) : (
@@ -344,7 +368,7 @@ export default function TokenAmountView(props: TokenAmountViewProps) {
                         onSelect={handleTokenSelect}
                         tokens={tokens}
                         canSelect
-                        selectedTokenBalance={availableAmount}
+                        selectedTokenBalance={balance}
                         formatAmount={formatAmount}
                     />
                 )}
@@ -377,10 +401,7 @@ export default function TokenAmountView(props: TokenAmountViewProps) {
             {props.receiver === true && (
                 <div className="token-amount_receiver">
                     <span className="text__main_medium">{t('form.tokenAmount.address.label')}</span>
-                    {/* TODO: Figure out what to do with overflowing text?
-                        1. multiline <input type="text">
-                        2. show abbreviated version on blur */}
-                    <FormInputClear
+                    <FormReceiverInput
                         className="text__main"
                         register={(props.form as UseFormReturn<AmountReceiveForm>).register}
                         name="receiver"