@loafmarkets/ui 0.1.273 → 0.1.275

package/dist/index.mjs

@@ -12444,7 +12444,7 @@ function OrderPanel({
   const [isReceiveInputFocused, setIsReceiveInputFocused] = useState(false);
   const handlePayBlur = () => {
     setIsPayInputFocused(false);
-    const parsed = parseInt(payInputValue.replace(/[^0-9]/g, ""), 10) || 0;
+    const parsed = parseInt(payInputValue.replace(/,/g, "").replace(/[^0-9]/g, ""), 10) || 0;
     if (parsed <= 0) {
       setManualOrderAmount(null);
       setSliderValue(0);
@@ -12571,15 +12571,17 @@ function OrderPanel({
               value: isPayInputFocused ? payInputValue : orderTotal.toLocaleString(),
               onFocus: (e) => {
                 setIsPayInputFocused(true);
-                setPayInputValue((manualOrderAmount ?? orderTotal).toString());
-                e.target.select();
+                const raw = manualOrderAmount ?? orderTotal;
+                setPayInputValue(raw > 0 ? raw.toLocaleString() : "");
+                requestAnimationFrame(() => e.target.select());
               },
               onBlur: handlePayBlur,
               onChange: (e) => {
-                const v = e.target.value;
-                if (v === "" || /^\d*\.?\d{0,2}$/.test(v)) {
-                  setPayInputValue(v);
-                  const parsed = parseInt(v.replace(/[^0-9]/g, ""), 10) || 0;
+                const raw = e.target.value.replace(/,/g, "");
+                if (raw === "" || /^\d*\.?\d{0,2}$/.test(raw)) {
+                  const formatted = raw === "" ? "" : Number(raw.replace(/\..*$/, "")).toLocaleString() + (raw.includes(".") ? "." + raw.split(".")[1] : "");
+                  setPayInputValue(formatted);
+                  const parsed = parseInt(raw.replace(/[^0-9]/g, ""), 10) || 0;
                   if (parsed <= 0) {
                     setManualOrderAmount(null);
                     setSliderValue(0);
@@ -12649,19 +12651,19 @@ function OrderPanel({
             {
               type: "text",
               inputMode: "numeric",
-              value: isReceiveInputFocused ? receiveInputValue : tokenQuantity.toString(),
+              value: isReceiveInputFocused ? receiveInputValue : tokenQuantity.toLocaleString(),
               style: { color: "#0ecb81" },
               onFocus: (e) => {
                 setIsReceiveInputFocused(true);
-                setReceiveInputValue(tokenQuantity.toString());
-                e.target.select();
+                setReceiveInputValue(tokenQuantity > 0 ? tokenQuantity.toLocaleString() : "");
+                requestAnimationFrame(() => e.target.select());
               },
               onBlur: handleReceiveBlur,
               onChange: (e) => {
-                const v = e.target.value;
-                if (v === "" || /^\d+$/.test(v)) {
-                  setReceiveInputValue(v);
-                  const units = Math.floor(parseInt(v.replace(/[^0-9]/g, ""), 10) || 0);
+                const raw = e.target.value.replace(/,/g, "");
+                if (raw === "" || /^\d+$/.test(raw)) {
+                  setReceiveInputValue(raw === "" ? "" : Number(raw).toLocaleString());
+                  const units = Math.floor(parseInt(raw.replace(/[^0-9]/g, ""), 10) || 0);
                   const spend = units * tokenPrice;
                   if (units <= 0) {
                     setManualOrderAmount(null);