Improve Nabla swap design

src/components/Form/From/NumericInput/index.tsx

@@ -8,6 +8,7 @@ interface NumericInputProps {
   additionalStyle?: string;
   maxDecimals?: number;
   defaultValue?: string;
+  autoFocus?: boolean;
 }
 
 function isValidNumericInput(value: string): boolean {
@@ -42,6 +43,7 @@ export const NumericInput = ({
   additionalStyle,
   maxDecimals = USER_INPUT_MAX_DECIMALS.PENDULUM,
   defaultValue,
+  autoFocus,
 }: NumericInputProps) => (
   <div className="w-full flex justify-between">
     <div className="flex-grow text-4xl text-black font-outfit">
@@ -64,6 +66,7 @@ export const NumericInput = ({
         type="text"
         inputmode="decimal"
         value={defaultValue}
+        autoFocus={autoFocus}
         {...register}
       />
     </div>

src/components/nabla/Swap/From.tsx

@@ -66,7 +66,7 @@ export function From<FormFieldValues extends FieldValues, TFieldName extends Fie
           {fromTokenBalance !== undefined && (
             <>
               <span className="mr-1">
-                Your Balance: <TokenBalance query={fromTokenBalance} symbol={fromToken?.symbol}></TokenBalance>
+                Balance: <TokenBalance query={fromTokenBalance} symbol={''} />
               </span>
               <button
                 className="text-primary hover:underline"

src/components/nabla/Swap/To.tsx

@@ -81,12 +81,10 @@ export function To({
       <div className="flex justify-between items-center mt-1 dark:text-neutral-300 text-neutral-500">
         <div className="text-sm mt-px">{toToken ? <NablaTokenPrice address={toToken.id} fallback="$ -" /> : '$ -'}</div>
         <div className="flex gap-1 text-sm">
-          Your balance:{' '}
+          Balance:{' '}
           <Erc20Balance
             abi={erc20WrapperAbi}
-            erc20ContractDefinition={
-              toToken ? { contractAddress: toToken.id, decimals: toToken.decimals, symbol: toToken.symbol } : undefined
-            }
+            erc20ContractDefinition={toToken ? { contractAddress: toToken.id, decimals: toToken.decimals } : undefined}
           />
         </div>
       </div>

src/components/nabla/common/AmountSelector.tsx

@@ -1,13 +1,14 @@
 import { Button, Range } from 'react-daisyui';
-import { FieldPath, FieldValues, PathValue, UseFormReturn, useWatch } from 'react-hook-form';
+import { FieldPath, FieldValues, PathValue, UseFormRegisterReturn, UseFormReturn, useWatch } from 'react-hook-form';
 import { useEffect, useMemo } from 'preact/hooks';
 import Big from 'big.js';
 
-import { NumberInput } from './NumberInput';
 import { ChangeEvent, ReactNode } from 'preact/compat';
 import { fractionOfValue } from '../../../shared/parseNumbers/metric';
 import { ContractBalance } from '../../../helpers/contracts';
 import { calcSharePercentageNumber } from '../../../helpers/calc';
+import { NumericInput } from '../../Form/From/NumericInput';
+import { USER_INPUT_MAX_DECIMALS } from '../../../shared/parseNumbers/decimal';
 
 interface AmountSelectorProps<FormFieldValues extends FieldValues, TFieldName extends FieldPath<FormFieldValues>> {
   maxBalance: ContractBalance | undefined;
@@ -65,11 +66,11 @@ export function AmountSelector<FormFieldValues extends FieldValues, TFieldName e
 
   if (onlyShowNumberInput === true) {
     return (
-      <NumberInput
+      <NumericInput
+        additionalStyle="input-ghost w-full flex-grow text-4xl font-outfit px-0 py-3"
+        register={form.register(formFieldName)}
         autoFocus
-        className="input-ghost w-full text-4xl font-outfit"
-        placeholder="Amount"
-        registerName={formFieldName}
+        maxDecimals={USER_INPUT_MAX_DECIMALS.STELLAR}
       />
     );
   }
@@ -78,11 +79,11 @@ export function AmountSelector<FormFieldValues extends FieldValues, TFieldName e
     <div className="relative rounded-lg bg-neutral-100 dark:bg-neutral-700 p-4">
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-1">
-          <NumberInput
+          <NumericInput
+            additionalStyle="input-ghost w-full flex-grow text-4xl font-outfit px-0 py-3"
+            register={form.register(formFieldName)}
             autoFocus
-            className="input-ghost w-full flex-grow text-4xl font-outfit px-0 py-3"
-            placeholder="Amount"
-            registerName={formFieldName}
+            maxDecimals={USER_INPUT_MAX_DECIMALS.STELLAR}
           />
           <Button
             className="bg-neutral-200 dark:bg-neutral-800 px-3 rounded-2xl"