UI stays no responsive when the amount entered with many decimals

package.json

@@ -89,6 +89,7 @@
     "@testing-library/jest-dom": "^6.1.6",
     "@testing-library/preact": "^3.2.3",
     "@testing-library/preact-hooks": "^1.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/big.js": "^6.2.2",
     "@types/jest": "^29.5.11",
     "@types/lodash": "^4.14.202",

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

@@ -0,0 +1,110 @@
+import { h } from 'preact';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import { render } from '@testing-library/preact';
+import userEvent from '@testing-library/user-event';
+import { NumericInput } from '.';
+
+const mockRegister: UseFormRegisterReturn = {
+  name: 'testInput',
+  onChange: jest.fn(),
+  onBlur: jest.fn(),
+  ref: jest.fn(),
+};
+
+describe('NumericInput Component', () => {
+  it('should render the component', () => {
+    const { getByPlaceholderText } = render(<NumericInput register={mockRegister} />);
+    const inputElement = getByPlaceholderText('0.0');
+    expect(inputElement).toBeInTheDocument();
+  });
+
+  it('should allow numeric input', async () => {
+    const { getByPlaceholderText } = render(<NumericInput register={mockRegister} />);
+    const inputElement = getByPlaceholderText('0.0') as HTMLInputElement;
+
+    await userEvent.type(inputElement, '1234567890');
+    expect(inputElement.value).toBe('1234567890');
+  });
+
+  it('should prevent non-numeric input', async () => {
+    const { getByPlaceholderText } = render(<NumericInput register={mockRegister} />);
+    const inputElement = getByPlaceholderText('0.0') as HTMLInputElement;
+
+    await userEvent.type(inputElement, 'qwertyuiopasdfghjklzxcvbnm');
+    expect(inputElement.value).toBe('');
+  });
+
+  it('should prevent multiple decimal points', async () => {
+    const { getByPlaceholderText } = render(<NumericInput register={mockRegister} />);
+    const inputElement = getByPlaceholderText('0.0') as HTMLInputElement;
+
+    await userEvent.type(inputElement, '1.1.1,2.3,4');
+    expect(inputElement.value).toBe('1.11234');
+  });
+
+  it('should replace comma with period', async () => {
+    const { getByPlaceholderText } = render(<NumericInput register={mockRegister} />);
+    const inputElement = getByPlaceholderText('0.0') as HTMLInputElement;
+
+    await userEvent.type(inputElement, '1,1');
+    expect(inputElement.value).toBe('1.1');
+  });
+
+  it('should work with readOnly prop', () => {
+    const { getByPlaceholderText } = render(<NumericInput register={mockRegister} readOnly={true} />);
+    const inputElement = getByPlaceholderText('0.0') as HTMLInputElement;
+
+    expect(inputElement).toHaveAttribute('readOnly');
+  });
+
+  it('should apply additional styles', () => {
+    const { getByPlaceholderText } = render(<NumericInput register={mockRegister} additionalStyle="extra-style" />);
+    const inputElement = getByPlaceholderText('0.0');
+
+    expect(inputElement).toHaveClass('extra-style');
+  });
+
+  it('should handle leading zeros correctly', async () => {
+    const { getByPlaceholderText } = render(<NumericInput register={mockRegister} />);
+    const inputElement = getByPlaceholderText('0.0') as HTMLInputElement;
+
+    await userEvent.type(inputElement, '007');
+    expect(inputElement.value).toBe('007');
+  });
+
+  it('should allow backspace and delete', async () => {
+    const { getByPlaceholderText } = render(<NumericInput register={mockRegister} />);
+    const inputElement = getByPlaceholderText('0.0') as HTMLInputElement;
+
+    await userEvent.type(inputElement, '123');
+    await userEvent.type(inputElement, '{backspace}');
+    expect(inputElement.value).toBe('12');
+
+    await userEvent.type(inputElement, '{delete}');
+    expect(inputElement.value).toBe('12');
+  });
+
+  it('should not allow negative numbers', async () => {
+    const { getByPlaceholderText } = render(<NumericInput register={mockRegister} />);
+    const inputElement = getByPlaceholderText('0.0') as HTMLInputElement;
+
+    await userEvent.type(inputElement, '-123');
+    expect(inputElement.value).toBe('123');
+  });
+
+  it('should not allow more decimals than maxDecimals', async () => {
+    const { getByPlaceholderText } = render(<NumericInput register={mockRegister} maxDecimals={2} />);
+    const inputElement = getByPlaceholderText('0.0') as HTMLInputElement;
+
+    await userEvent.type(inputElement, '123.45479187249871298774985');
+    expect(inputElement.value).toBe('123.45');
+  });
+
+  it('should not allow more decimals than default maxDecimals', async () => {
+    const { getByPlaceholderText } = render(<NumericInput register={mockRegister} />);
+    const inputElement = getByPlaceholderText('0.0') as HTMLInputElement;
+
+    await userEvent.type(inputElement, '123.4567890123456789abcgdehyu0123456.2746472.93.2.7.3.5.3');
+    expect(inputElement.value).toBe('123.456789012343');
+  });
+});

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

@@ -0,0 +1,68 @@
+import { Input } from 'react-daisyui';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import { USER_INPUT_MAX_DECIMALS, exceedsMaxDecimals } from '../../../../shared/parseNumbers/decimal';
+
+interface NumericInputProps {
+  register: UseFormRegisterReturn;
+  readOnly?: boolean;
+  additionalStyle?: string;
+  maxDecimals?: number;
+}
+
+function isValidNumericInput(value: string): boolean {
+  return /^[0-9.,]*$/.test(value);
+}
+
+function alreadyHasDecimal(e: KeyboardEvent) {
+  const decimalChars = ['.', ','];
+
+  // In the onInput event, "," is replaced by ".", so we check if the e.target.value already contains a "."
+  return decimalChars.some((char) => e.key === char && e.target && (e.target as HTMLInputElement).value.includes('.'));
+}
+
+function handleOnInput(e: KeyboardEvent): void {
+  const target = e.target as HTMLInputElement;
+  target.value = target.value.replace(/,/g, '.');
+}
+
+function handleOnKeyPress(e: KeyboardEvent, maxDecimals: number): void {
+  if (!isValidNumericInput(e.key) || alreadyHasDecimal(e)) {
+    e.preventDefault();
+  }
+  const target = e.target as HTMLInputElement;
+  if (exceedsMaxDecimals(target.value, maxDecimals - 1)) {
+    target.value = target.value.slice(0, -1);
+  }
+}
+
+export const NumericInput = ({
+  register,
+  readOnly = false,
+  additionalStyle,
+  maxDecimals = USER_INPUT_MAX_DECIMALS.PENDULUM,
+}: NumericInputProps) => (
+  <div className="w-full flex justify-between">
+    <div className="flex-grow text-4xl text-black font-outfit">
+      <Input
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="none"
+        className={
+          'input-ghost w-full text-4xl font-outfit pl-0 focus:outline-none focus:text-accent-content text-accent-content ' +
+          additionalStyle
+        }
+        minlength="1"
+        onKeyPress={(e: KeyboardEvent) => handleOnKeyPress(e, maxDecimals)}
+        onInput={handleOnInput}
+        pattern="^[0-9]*[.,]?[0-9]*$"
+        placeholder="0.0"
+        readOnly={readOnly}
+        spellcheck="false"
+        step="any"
+        type="text"
+        inputmode="decimal"
+        {...register}
+      />
+    </div>
+  </div>
+);

src/components/Form/From/index.tsx

@@ -18,6 +18,7 @@ export interface FromProps {
     readOnly?: boolean;
     disabled?: boolean;
     setValue?: (n: number) => void;
+    maxDecimals?: number;
   };
   asset: {
     assets?: BlockchainAsset[];

src/components/Form/From/variants/StandardFrom.tsx

@@ -1,26 +1,32 @@
 import { FromProps } from '..';
-import { InputField } from '../InputField';
+import { NumericInput } from '../NumericInput';
 import { AssetSelector } from '../../../Selector';
 import { AssetSelectorOnChange } from '../../../Selector/AssetSelector/helpers';
 import { FromDescription } from '../Description';
 import { AvailableActions } from '../AvailableActions';
 
 export const StandardFrom = ({
   className,
-  formControl: { max, register, readOnly, error, setValue },
+  formControl: { max, register, readOnly, error, setValue, maxDecimals, disabled },
   asset: { assetSuffix, assets, selectedAsset, setSelectedAsset },
   description: { customText, network },
 }: FromProps) => (
   <>
     <div
-      className={`rounded-lg bg-base-300 px-4 py-3 ${className || ''} ${
+      className={`rounded-lg ${disabled ? 'bg-base-100' : 'bg-base-300'} px-4 py-3 ${className || ''} ${
         error ? 'border border-solid border-red-400' : ''
       }`}
     >
       <div className="w-full flex justify-between">
-        <InputField register={register} readOnly={readOnly} />
+        <NumericInput
+          additionalStyle={disabled ? 'text-gray-400 focus:text-gray-400' : ''}
+          maxDecimals={maxDecimals}
+          register={register}
+          readOnly={readOnly}
+        />
         {assets && setSelectedAsset && (
           <AssetSelector
+            disabled={disabled}
             selectedAsset={selectedAsset}
             assets={assets}
             onChange={setSelectedAsset as AssetSelectorOnChange}

src/components/Form/From/variants/SwapFrom.tsx

@@ -1,13 +1,13 @@
 import { FromProps } from '..';
 import { Badges } from '../Badges';
 import { FromDescription } from '../Description';
-import { InputField } from '../InputField';
+import { NumericInput } from '../NumericInput';
 import { AssetSelector } from '../../../Selector';
 import { AssetSelectorOnChange } from '../../../Selector/AssetSelector/helpers';
 
 export const SwapFrom = ({
   className,
-  formControl: { register, readOnly = false, error, disabled = false },
+  formControl: { register, readOnly = false, error, disabled = false, maxDecimals },
   asset: { assetSuffix, assets, selectedAsset, setSelectedAsset },
   description: { customText, network },
   badges: { minBadge, maxBadge },
@@ -37,10 +37,11 @@ export const SwapFrom = ({
       </div>
     </div>
 
-    <InputField
+    <NumericInput
+      additionalStyle={disabled ? 'text-gray-400 focus:text-gray-400' : ''}
+      maxDecimals={maxDecimals}
       register={register}
       readOnly={readOnly}
-      additionalStyle={disabled ? 'text-gray-400 focus:text-gray-400' : ''}
     />
 
     {error ? (

src/helpers/yup.ts

@@ -1,5 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export const transformNumber = (value: any, originalValue: any) => {
+export const transformNumber = (value: unknown, originalValue: unknown) => {
   if (!originalValue) return 0;
   if (typeof originalValue === 'string' && originalValue !== '') value = Number(originalValue) ?? 0;
   return value;

src/hooks/spacewalk/useIssuePallet.tsx

@@ -2,6 +2,9 @@ import { H256 } from '@polkadot/types/interfaces';
 import type { SpacewalkPrimitivesIssueIssueRequest, SpacewalkPrimitivesVaultId } from '@polkadot/types/lookup';
 import { useMemo } from 'preact/hooks';
 import { useNodeInfoState } from '../../NodeInfoProvider';
+import { Compact, u128 } from '@polkadot/types-codec';
+import Big from 'big.js';
+import { isU128Compatible } from '../../shared/parseNumbers/isU128Compatible';
 
 export interface RichIssueRequest {
   id: H256;
@@ -46,7 +49,13 @@ export function useIssuePallet() {
           return undefined;
         }
 
-        return api.tx.issue?.requestIssue(amount, vaultId);
+        const u128Amount = Big(amount)
+
+        if(!isU128Compatible(u128Amount)) return;
+
+        const compactAmount: Compact<u128> =  api.createType('Compact<u128>', u128Amount.toString());
+
+        return api.tx.issue?.requestIssue(compactAmount, vaultId);
       },
     };
   }, [api]);