fix: allow amount inputs to be empty

components/bank/forms/ibcSendForm.tsx

@@ -25,6 +25,7 @@ import { useChain } from '@cosmos-kit/react';
 import { useToast } from '@/contexts';
 
 import { Any } from '@liftedinit/manifestjs/dist/codegen/google/protobuf/any';
+import { AmountInput } from '@/components';
 
 //TODO: switch to main-net names
 export default function IbcSendForm({
@@ -521,21 +522,10 @@ export default function IbcSendForm({
                     </span>
                   </label>
                   <div className="relative">
-                    <input
-                      type="text"
-                      inputMode="decimal"
-                      pattern="[0-9]*[.]?[0-9]*"
+                    <AmountInput
                       name="amount"
-                      placeholder="0.00"
                       value={values.amount}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                        const value = e.target.value;
-                        if (value === '' || /^\d*\.?\d*$/.test(value)) {
-                          setFieldValue('amount', e.target.value);
-                        }
-                      }}
-                      style={{ borderRadius: '12px' }}
-                      className="input input-md border border-[#00000033] dark:border-[#FFFFFF33] bg-[#E0E0FF0A] dark:bg-[#E0E0FF0A] w-full pr-24 dark:text-[#FFFFFF] text-[#161616]"
+                      onValueChange={v => setFieldValue('amount', v)}
                     />
                     <div className="absolute inset-y-1 right-1 flex items-center">
                       <div className="dropdown dropdown-end h-full">

components/bank/forms/sendForm.tsx

@@ -14,6 +14,7 @@ import { MdContacts } from 'react-icons/md';
 import env from '@/config/env';
 import { Any } from 'cosmjs-types/google/protobuf/any';
 import { MsgSend } from '@liftedinit/manifestjs/dist/codegen/cosmos/bank/v1beta1/tx';
+import { AmountInput } from '@/components';
 
 export default function SendForm({
   address,
@@ -197,25 +198,10 @@ export default function SendForm({
                     </span>
                   </label>
                   <div className="relative">
-                    <input
-                      className="input input-md border border-[#00000033] dark:border-[#FFFFFF33] bg-[#E0E0FF0A] dark:bg-[#E0E0FF0A] w-full pr-24 dark:text-[#FFFFFF] text-[#161616]"
+                    <AmountInput
                       name="amount"
-                      inputMode="decimal"
-                      pattern="[0-9]*[.]?[0-9]*"
-                      placeholder="0.00"
-                      style={{ borderRadius: '12px' }}
                       value={values.amount}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                        const value = e.target.value;
-                        if (/^\d*\.?\d*$/.test(value) && parseFloat(value) >= 0) {
-                          setFieldValue('amount', value);
-                        }
-                      }}
-                      onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) => {
-                        if (!/[\d.]/.test(e.key)) {
-                          e.preventDefault();
-                        }
-                      }}
+                      onValueChange={value => setFieldValue('amount', value)}
                     />
 
                     <div className="absolute inset-y-1 right-1 flex items-center">

components/react/inputs/AmountInput.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+export interface AmountInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  value: string;
+  onValueChange: (newAmount: string) => void;
+}
+
+/**
+ * A component for entering an amount of tokens. Allows only positive decimal
+ * numbers, or empty values (for an empty field).
+ * @param value The current value of the input field.
+ * @param onValueChange A callback that is called when the value of the input field
+ *                      changes, with the new amount.
+ * @param props Additional props to pass to the input field.
+ * @constructor
+ */
+export const AmountInput: React.FC<AmountInputProps> = ({ value, onValueChange, ...props }) => {
+  function onChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const v = event.target.value;
+
+    if (v === '') {
+      onValueChange('');
+      return;
+    }
+    if (v === '.') {
+      // Allow for `.` to be entered on its way to a real number.
+      onValueChange('.');
+      return;
+    }
+    const newValue = /^\d*\.?\d*$/.test(v) ? parseFloat(v) : NaN;
+
+    if (Number.isFinite(newValue)) {
+      onValueChange(v);
+    } else if (value !== '') {
+      onValueChange(value);
+    } else {
+      onValueChange('');
+    }
+  }
+
+  return (
+    <input
+      className="input input-md border border-[#00000033] dark:border-[#FFFFFF33] bg-[#E0E0FF0A] dark:bg-[#E0E0FF0A] w-full pr-24 dark:text-[#FFFFFF] text-[#161616] rounded-xl"
+      type="text"
+      inputMode="decimal"
+      placeholder="0.00"
+      min={0}
+      value={value}
+      onChange={onChange}
+      {...props}
+    />
+  );
+};

components/react/inputs/__tests__/AmountInput.test.tsx

@@ -0,0 +1,78 @@
+import { jest, test, expect, afterEach, describe } from 'bun:test';
+import React from 'react';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import { AmountInput, NumberInput } from '@/components/react/inputs';
+import { Formik, Form } from 'formik';
+
+const TestForm = ({ children }: { children: React.ReactNode }) => (
+  <Formik initialValues={{ test: '' }} onSubmit={() => {}}>
+    <Form>{children}</Form>
+  </Formik>
+);
+
+describe('AmountInput', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('renders correctly', () => {
+    const value = '42';
+    const onValueChange = jest.fn();
+
+    render(
+      <TestForm>
+        <AmountInput name="test" value={value} onValueChange={onValueChange} />
+      </TestForm>
+    );
+
+    const input = screen.getByPlaceholderText('0.00');
+    expect(input).toBeInTheDocument();
+    expect(input.tagName.toLowerCase()).toBe('input');
+    expect(input).toHaveAttribute('type', 'text');
+  });
+
+  test('calls onValueChange with the new value', () => {
+    const value = '42';
+    const onValueChange = jest.fn();
+
+    render(
+      <TestForm>
+        <AmountInput name="test" value={value} onValueChange={onValueChange} />
+      </TestForm>
+    );
+
+    const input = screen.getByPlaceholderText('0.00');
+    fireEvent.change(input, { target: { value: '42.42' } });
+    expect(onValueChange).toHaveBeenCalledWith('42.42');
+  });
+
+  test('calls onValueChange with an empty string when the input is empty', () => {
+    const value = '42';
+    const onValueChange = jest.fn();
+
+    render(
+      <TestForm>
+        <AmountInput name="test" value={value} onValueChange={onValueChange} />
+      </TestForm>
+    );
+
+    const input = screen.getByPlaceholderText('0.00');
+    fireEvent.change(input, { target: { value: '' } });
+    expect(onValueChange).toHaveBeenCalledWith('');
+  });
+
+  test('calls onValueChange with the same value when the input is invalid', () => {
+    const value = '42';
+    const onValueChange = jest.fn();
+
+    render(
+      <TestForm>
+        <AmountInput name="test" value={value} onValueChange={onValueChange} />
+      </TestForm>
+    );
+
+    const input = screen.getByPlaceholderText('0.00');
+    fireEvent.change(input, { target: { value: '42.42.42' } });
+    expect(onValueChange).toHaveBeenCalledWith('42');
+  });
+});

components/react/inputs/index.ts

@@ -1,3 +1,4 @@
+export * from './AmountInput';
 export * from './TextInput';
 export * from './NumberInput';
 export * from './TextArea';