@loafmarkets/ui 0.1.13 → 0.1.14

package/dist/index.d.mts

@@ -663,8 +663,12 @@ type PropertyBuyProps = {
     isAuthenticated: boolean;
     onSignIn: () => void;
     saleData?: SaleData | null;
+    walletUsdcBalance?: number | null;
+    onPurchase?: (tokenAmount: number) => Promise<void>;
+    purchaseStatus?: 'idle' | 'checking-allowance' | 'approving' | 'purchasing' | 'success' | 'error';
+    purchaseError?: string | null;
 };
-declare function PropertyBuy({ propertyName, propertyLocation: propertyLocationLabel, isAuthenticated, onSignIn, saleData, }: PropertyBuyProps): react_jsx_runtime.JSX.Element;
+declare function PropertyBuy({ propertyName, propertyLocation: propertyLocationLabel, isAuthenticated, onSignIn, saleData, walletUsdcBalance, onPurchase, purchaseStatus, purchaseError, }: PropertyBuyProps): react_jsx_runtime.JSX.Element;
 
 type OwnerBookingProps = {
     propertyName?: string | null;

package/dist/index.d.ts

@@ -663,8 +663,12 @@ type PropertyBuyProps = {
     isAuthenticated: boolean;
     onSignIn: () => void;
     saleData?: SaleData | null;
+    walletUsdcBalance?: number | null;
+    onPurchase?: (tokenAmount: number) => Promise<void>;
+    purchaseStatus?: 'idle' | 'checking-allowance' | 'approving' | 'purchasing' | 'success' | 'error';
+    purchaseError?: string | null;
 };
-declare function PropertyBuy({ propertyName, propertyLocation: propertyLocationLabel, isAuthenticated, onSignIn, saleData, }: PropertyBuyProps): react_jsx_runtime.JSX.Element;
+declare function PropertyBuy({ propertyName, propertyLocation: propertyLocationLabel, isAuthenticated, onSignIn, saleData, walletUsdcBalance, onPurchase, purchaseStatus, purchaseError, }: PropertyBuyProps): react_jsx_runtime.JSX.Element;
 
 type OwnerBookingProps = {
     propertyName?: string | null;

package/dist/index.js

@@ -9910,10 +9910,14 @@ function PropertyBuy({
   propertyLocation: propertyLocationLabel = "Mosman, Sydney",
   isAuthenticated,
   onSignIn,
-  saleData
+  saleData,
+  walletUsdcBalance,
+  onPurchase,
+  purchaseStatus = "idle",
+  purchaseError
 }) {
   const [sliderValue, setSliderValue] = React5.useState(0);
-  const [availableBalance, setAvailableBalance] = React5.useState(125e3);
+  const [availableBalance, setAvailableBalance] = React5.useState(walletUsdcBalance ?? 125e3);
   const [userSubscription, setUserSubscription] = React5.useState(null);
   const [manualOrderAmount, setManualOrderAmount] = React5.useState(null);
   const [ownedTokens, setOwnedTokens] = React5.useState(0);
@@ -9949,6 +9953,11 @@ function PropertyBuy({
   const orderTotal = totalSpend;
   const estExposure = (tokenQuantity / supplyToSell * 100).toFixed(4);
   const hasInsufficientFunds = orderTotal > availableBalance;
+  React5.useEffect(() => {
+    if (walletUsdcBalance != null) {
+      setAvailableBalance(walletUsdcBalance);
+    }
+  }, [walletUsdcBalance]);
   const handleOrderButtonClick = () => {
     if (!isAuthenticated) {
       onSignIn();
@@ -9959,8 +9968,12 @@ function PropertyBuy({
     }
     setShowOrderConfirmModal(true);
   };
+  const isPurchaseInFlight = purchaseStatus === "checking-allowance" || purchaseStatus === "approving" || purchaseStatus === "purchasing";
   const getOrderButtonText = () => {
     if (!isAuthenticated) return "Sign In to Invest";
+    if (purchaseStatus === "checking-allowance") return "Checking allowance\u2026";
+    if (purchaseStatus === "approving") return "Approving USDC\u2026";
+    if (purchaseStatus === "purchasing") return "Confirming purchase\u2026";
     if (scStatus === 0) return "Sale Not Open Yet";
     if (scStatus === 2) return "Sale Completed";
     if (scStatus === 3) return "Sale Paused";
@@ -9969,30 +9982,42 @@ function PropertyBuy({
   };
   const isOrderButtonDisabled = () => {
     if (!isAuthenticated) return false;
+    if (isPurchaseInFlight) return true;
     if (scStatus !== 1) return true;
     if (tokenQuantity === 0) return true;
     return false;
   };
-  const confirmOrder = () => {
+  const confirmOrder = async () => {
     setShowOrderConfirmModal(false);
-    setAvailableBalance((prev) => prev - orderTotal);
-    const newTokens = ownedTokens + tokenQuantity;
+    const tokenAmountInt = Math.floor(tokenQuantity);
+    if (tokenAmountInt <= 0) return;
+    if (onPurchase) {
+      try {
+        await onPurchase(tokenAmountInt);
+      } catch {
+        return;
+      }
+    }
+    if (walletUsdcBalance == null) {
+      setAvailableBalance((prev) => prev - orderTotal);
+    }
+    const newTokens = ownedTokens + tokenAmountInt;
     setOwnedTokens(newTokens);
     setDisplayedOwnedTokens(newTokens);
     setOwnedTokensJustUpdated(true);
-    setLastOrderQuantity(tokenQuantity);
+    setLastOrderQuantity(tokenAmountInt);
     setTimeout(() => setOwnedTokensJustUpdated(false), 2e3);
     setUserSubscription({
       propertyName,
       tokenSymbol: "MUS",
-      tokens: tokenQuantity,
+      tokens: tokenAmountInt,
       value: orderTotal,
       avgPrice: tokenPrice,
       percentOfProperty: estExposure,
       timestamp: (/* @__PURE__ */ new Date()).toISOString()
     });
     setLastOrderDetails({
-      tokens: tokenQuantity,
+      tokens: tokenAmountInt,
       total: orderTotal,
       price: tokenPrice,
       orderNumber: Math.floor(1e7 + Math.random() * 9e7)