Change receiver input to textarea

Concordium · Oct 22, 2024 · ca279d5 · ca279d5
1 parent 4bf06d9
commit ca279d5
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 13 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
@@ -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/TokenAmount.tsx b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/TokenAmount.tsx
@@ -6,7 +6,7 @@ import { atom } from 'jotai';
 import { useSelectedAccountInfo } from '@popup/shared/AccountInfoListenerContext/AccountInfoListenerContext';
 import { contractBalancesFamily } from '@popup/store/token';
 import { ensureDefined } from '@shared/utils/basic-helpers';
-import TokenAmountView, { TokenAmountViewProps, TokenSelectEvent } from './View';
+import TokenAmountView, { TokenAmountViewProps } from './View';
 import { useTokenInfo } from './util';
 
 const tokenAddressEq = (a: CIS2.TokenAddress | null, b: CIS2.TokenAddress | null) => {
@@ -75,19 +75,15 @@ export default function TokenAmount(props: Props) {
     const [tokenAddress, setTokenAddress] = useState<CIS2.TokenAddress | null>(null);
     const tokenBalance = useAtomValue(balanceAtomFamily([accountInfo, tokenAddress]));
 
-    if (accountInfo === undefined || tokenInfo === undefined || tokenInfo.loading) {
+    if (tokenInfo.loading) {
         return null;
     }
 
-    const handleSelectToken = (e: TokenSelectEvent) => {
-        setTokenAddress(e);
-    };
-
     return (
         <TokenAmountView
             {...(props as TokenAmountViewProps)}
             tokens={tokenInfo.value}
-            onSelectToken={handleSelectToken}
+            onSelectToken={setTokenAddress}
             balance={tokenBalance}
         />
     );

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
@@ -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"