From c48495c7d693ed605fabdcebf6318536cb333515 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Fri, 31 May 2024 17:12:01 +0200
Subject: [PATCH 1/3] improve nabla swap design

---
 .../Form/From/NumericInput/index.tsx          |  3 ++
 src/components/nabla/Swap/From.tsx            |  2 +-
 src/components/nabla/Swap/To.tsx              |  6 ++--
 .../nabla/common/AmountSelector.tsx           | 21 ++++++------
 src/components/nabla/common/NumberInput.tsx   | 34 -------------------
 5 files changed, 17 insertions(+), 49 deletions(-)
 delete mode 100644 src/components/nabla/common/NumberInput.tsx

diff --git a/src/components/Form/From/NumericInput/index.tsx b/src/components/Form/From/NumericInput/index.tsx
index 728f95af..6ff751dd 100644
--- a/src/components/Form/From/NumericInput/index.tsx
+++ b/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>
diff --git a/src/components/nabla/Swap/From.tsx b/src/components/nabla/Swap/From.tsx
index f447a077..24521def 100644
--- a/src/components/nabla/Swap/From.tsx
+++ b/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"
diff --git a/src/components/nabla/Swap/To.tsx b/src/components/nabla/Swap/To.tsx
index df7d0d7d..db103d49 100644
--- a/src/components/nabla/Swap/To.tsx
+++ b/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>
diff --git a/src/components/nabla/common/AmountSelector.tsx b/src/components/nabla/common/AmountSelector.tsx
index aab76fc4..f6962be5 100644
--- a/src/components/nabla/common/AmountSelector.tsx
+++ b/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"
diff --git a/src/components/nabla/common/NumberInput.tsx b/src/components/nabla/common/NumberInput.tsx
deleted file mode 100644
index 82728097..00000000
--- a/src/components/nabla/common/NumberInput.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { HTMLAttributes, useCallback } from 'preact/compat';
-import { FieldPath, FieldValues, useFormContext } from 'react-hook-form';
-
-export interface NumberInputProps<SwapFormValues extends FieldValues> extends HTMLAttributes<HTMLInputElement> {
-  registerName: FieldPath<SwapFormValues>;
-}
-
-// Hack required for Preact compatibility with react-hook-form
-export function NumberInput<SwapFormValues extends FieldValues>(attributes: NumberInputProps<SwapFormValues>) {
-  const { register } = useFormContext<SwapFormValues>();
-
-  const { registerName } = attributes;
-
-  const registerAttributes: HTMLAttributes<HTMLInputElement> = register(registerName);
-  const { onChange } = registerAttributes;
-  const attributesWithoutOnChange = { ...registerAttributes };
-  delete attributesWithoutOnChange.onChange;
-
-  const onInput = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      let number = e.currentTarget.value.replace(/[^0-9.]/g, '');
-      const periodIndex = number.indexOf('.');
-      if (periodIndex > -1) {
-        number = number.slice(0, periodIndex + 1) + number.slice(periodIndex + 1).replace(/\./g, '');
-      }
-
-      e.currentTarget.value = number;
-      onChange?.(e);
-    },
-    [onChange],
-  );
-
-  return <input inputMode="numeric" type="text" {...attributesWithoutOnChange} {...attributes} onInput={onInput} />;
-}

From 6e2ab9d65b4c324189d220b11cbe812f2c18d67d Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Mon, 3 Jun 2024 16:05:13 +0200
Subject: [PATCH 2/3] fix decimals AmountSelector

---
 src/components/nabla/common/AmountSelector.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/nabla/common/AmountSelector.tsx b/src/components/nabla/common/AmountSelector.tsx
index f6962be5..57908b0d 100644
--- a/src/components/nabla/common/AmountSelector.tsx
+++ b/src/components/nabla/common/AmountSelector.tsx
@@ -1,5 +1,5 @@
 import { Button, Range } from 'react-daisyui';
-import { FieldPath, FieldValues, PathValue, UseFormRegisterReturn, UseFormReturn, useWatch } from 'react-hook-form';
+import { FieldPath, FieldValues, PathValue, UseFormReturn, useWatch } from 'react-hook-form';
 import { useEffect, useMemo } from 'preact/hooks';
 import Big from 'big.js';
 
@@ -8,7 +8,6 @@ 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;
@@ -70,7 +69,7 @@ export function AmountSelector<FormFieldValues extends FieldValues, TFieldName e
         additionalStyle="input-ghost w-full flex-grow text-4xl font-outfit px-0 py-3"
         register={form.register(formFieldName)}
         autoFocus
-        maxDecimals={USER_INPUT_MAX_DECIMALS.STELLAR}
+        maxDecimals={maxBalance?.decimals}
       />
     );
   }
@@ -83,7 +82,7 @@ export function AmountSelector<FormFieldValues extends FieldValues, TFieldName e
             additionalStyle="input-ghost w-full flex-grow text-4xl font-outfit px-0 py-3"
             register={form.register(formFieldName)}
             autoFocus
-            maxDecimals={USER_INPUT_MAX_DECIMALS.STELLAR}
+            maxDecimals={maxBalance?.decimals}
           />
           <Button
             className="bg-neutral-200 dark:bg-neutral-800 px-3 rounded-2xl"

From 3c6394dd4abe7278b79ef03cb5cf530accf64006 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Mon, 3 Jun 2024 16:08:08 +0200
Subject: [PATCH 3/3] fix decimals AmountSelector

---
 src/components/nabla/common/AmountSelector.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/nabla/common/AmountSelector.tsx b/src/components/nabla/common/AmountSelector.tsx
index 57908b0d..3ef0d3d6 100644
--- a/src/components/nabla/common/AmountSelector.tsx
+++ b/src/components/nabla/common/AmountSelector.tsx
@@ -8,6 +8,7 @@ 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;
@@ -69,7 +70,7 @@ export function AmountSelector<FormFieldValues extends FieldValues, TFieldName e
         additionalStyle="input-ghost w-full flex-grow text-4xl font-outfit px-0 py-3"
         register={form.register(formFieldName)}
         autoFocus
-        maxDecimals={maxBalance?.decimals}
+        maxDecimals={maxBalance?.decimals ?? USER_INPUT_MAX_DECIMALS.PENDULUM}
       />
     );
   }
@@ -82,7 +83,7 @@ export function AmountSelector<FormFieldValues extends FieldValues, TFieldName e
             additionalStyle="input-ghost w-full flex-grow text-4xl font-outfit px-0 py-3"
             register={form.register(formFieldName)}
             autoFocus
-            maxDecimals={maxBalance?.decimals}
+            maxDecimals={maxBalance?.decimals ?? USER_INPUT_MAX_DECIMALS.PENDULUM}
           />
           <Button
             className="bg-neutral-200 dark:bg-neutral-800 px-3 rounded-2xl"