Modal Popup - Send

[babalicious-io]

The design has been updated for the amount input field

• it has been restyled to an open fluid design - instead of the box input field
• added display of amount in USD
• added MAX amount textButton

The code should be checked for the input amount and conversion to USD - Claude logic
The MAX amount textButton is not setup or working. There is code present in the file to try and handle this, but I gave up realizing that it's a little beyond my knowledge realm
onClick of MAX it should populate the input BTC amount field with the max available BTC in user connected addy - subtracted by the fee estimate for the transaction - on change of feeSelector it should auto update

---

From Claude on the MAX isse

The issue might be occurring because the handleMaxClick function is not properly connected to the state management or not correctly updating the input value. Here's how to fix it:
First, ensure you have a state variable for the amount and a proper input reference:

const [amount, setAmount] = useState("");
const inputRef = useRef<HTMLInputElement>(null);

const handleMaxClick = () => {
  // Assuming you have access to the wallet balance
  const maxAmount = walletBalance; // Replace with your actual balance variable
  setAmount(maxAmount.toString());
  
  // Update the input value directly
  if (inputRef.current) {
    inputRef.current.value = maxAmount.toString();
    // Trigger input change event to ensure all listeners are notified
    const event = new Event('input', { bubbles: true });
    inputRef.current.dispatchEvent(event);
  }
};

Then, connect the ref to your input field and bind the amount state:

<input
  ref={inputRef}
  type="number"
  value={amount}
  onChange={(e) => setAmount(e.target.value)}
  // ... other props
/>

<div
  class="text-xs mobileLg:text-sm text-stamp-grey font-medium hover:stamp-grey-light mt-1.5 cursor-pointer"
  onClick={handleMaxClick}
>
  MAX
</div>

Common issues that might cause the MAX button not to work:

1. Missing state updates
   No connection between the input and state
2. Input value not being controlled properly
   Missing reference to the input element
   Make sure you have all these pieces in place and that the walletBalance (or whatever variable holds your maximum amount) is properly defined and accessible in the component.

[devin-ai-integration]

fix(modal): implement MAX button functionality in send modal

The UI restyling for the amount input field has been completed in PR #471 (bce8348). The remaining task is to implement the MAX button functionality following the provided solution:

1. Add state management for amount
2. Add input reference
3. Implement handleMaxClick with proper wallet balance integration
4. Connect the input ref and bind amount state
5. Ensure proper fee calculation integration

This issue can be closed as it's now properly documented with implementation details and can be tracked in a new feature implementation issue.

[babalicious-io]

the add MAX (empty wallet) has been fixed
f1abd8a

please test and debug !