components/bank/forms/sendForm.tsx (1)

75-104: 🛠️ Refactor suggestion

Consider updating validation schema for empty values.

The validation schema requires a value but the AmountInput component allows empty values. Consider updating the schema to align with the new component's behavior.

 amount: Yup.number()
-  .required('Amount is required')
+  .transform((value) => (value === '' ? null : value))
+  .nullable()
+  .required('Amount is required')
   .positive('Amount must be positive')

components/bank/forms/ibcSendForm.tsx (2)

129-132: ⚠️ Potential issue

Validation schema conflicts with PR objective.

The validation schema requires the amount to be non-empty and positive, which conflicts with the PR objective to "allow amount inputs to be empty".

Update the validation schema to allow empty amounts:

-    amount: Yup.number()
-      .required('Amount is required')
+    amount: Yup.string()
+      .test('valid-amount', 'Amount must be positive when provided', function(value) {
+        if (!value) return true;
+        const num = Number(value);
+        return !isNaN(num) && num > 0;
+      })

---

168-338: ⚠️ Potential issue

Verify empty amount handling in submission logic.

The form submission logic needs to be verified to handle empty amounts correctly. Currently, it attempts to convert the amount to base units without checking if it's empty.

Update the submission handler to handle empty amounts:

  const handleSend = async (values: {
    recipient: string;
-    amount: string;
+    amount: string | '';
    selectedToken: CombinedBalanceInfo;
    memo: string;
  }) => {
    setIsSending(true);
    try {
+     if (!values.amount) {
+       throw new Error('Amount is required for sending tokens');
+     }
      // Convert amount to base units
      const exponent = values.selectedToken.metadata?.denom_units[1]?.exponent ?? 6;
      const amountInBaseUnits = parseNumberToBigInt(values.amount, exponent).toString();

components/react/inputs/AmountInput.tsx (2)

18-39: Consider adding input validation for maximum decimal places.

The current regex allows any number of decimal places. Consider adding validation for the maximum number of decimal places based on the token's metadata.

-const newValue = /^\d*\.?\d*$/.test(v) ? parseFloat(v) : NaN;
+const newValue = /^\d*\.?\d{0,6}$/.test(v) ? parseFloat(v) : NaN;

🧰 Tools

🪛 GitHub Check: codecov/patch

[warning] 27-28: components/react/inputs/AmountInput.tsx#L27-L28
Added lines #L27 - L28 were not covered by tests

---

[warning] 36-36: components/react/inputs/AmountInput.tsx#L36
Added line #L36 was not covered by tests

---

41-53: Consider extracting styles to a CSS module or Tailwind class.

The inline styles in className could be moved to a CSS module or a Tailwind class for better maintainability.

components/react/inputs/__tests__/AmountInput.test.tsx (1)

1-78: Add tests for additional edge cases.

While the current test suite covers basic functionality, consider adding tests for:

1. Handling decimal places validation
2. Single period input
3. Invalid input when previous value is empty
4. Maximum value constraints

test('handles single period input correctly', () => {
  const onValueChange = jest.fn();
  render(
    <TestForm>
      <AmountInput name="test" value="" onValueChange={onValueChange} />
    </TestForm>
  );
  const input = screen.getByPlaceholderText('0.00');
  fireEvent.change(input, { target: { value: '.' } });
  expect(onValueChange).toHaveBeenCalledWith('.');
});

test('handles invalid input when previous value is empty', () => {
  const onValueChange = jest.fn();
  render(
    <TestForm>
      <AmountInput name="test" value="" onValueChange={onValueChange} />
    </TestForm>
  );
  const input = screen.getByPlaceholderText('0.00');
  fireEvent.change(input, { target: { value: 'abc' } });
  expect(onValueChange).toHaveBeenCalledWith('');
});

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro