@loafmarkets/ui 0.1.20 → 0.1.22

package/dist/index.d.mts

@@ -438,6 +438,12 @@ type DemoLoginHandler = (email: string, handle?: string | null) => Promise<DemoL
 type LoginPopupView = "main" | "email" | "otp" | "kyc" | "kyc-success" | "kyc-failed" | "funding";
 type FundWalletParams = {
     amount: string;
+    mode?: "crypto" | "fiat";
+};
+type FundWalletResult = {
+    funded: boolean;
+    widgetUrl?: string;
+    requiresKyc?: boolean;
 };
 type LoginPopupProps = {
     onClose: () => void;
@@ -479,12 +485,10 @@ type LoginPopupProps = {
         passed: boolean;
     }) => void) => React__default.ReactNode;
     /**
-     * Handler called when the user clicks "Fund my account". Should open the funding UI (e.g. Coinbase onramp)
-     * and resolve with { funded: boolean } when the user exits.
+     * Handler called when the user clicks "Fund my account". Should open the funding UI (e.g. Transak onramp)
+     * and resolve with { funded: boolean, widgetUrl?: string } when the user exits.
      */
-    onFundWallet?: (params: FundWalletParams) => Promise<{
-        funded: boolean;
-    }> | void;
+    onFundWallet?: (params: FundWalletParams) => Promise<FundWalletResult> | void;
     /** Optional view to show immediately when the popup opens. */
     initialView?: LoginPopupView;
     /** Handler invoked when the user selects "Sign in with Wallet". */
@@ -535,6 +539,7 @@ type HeaderProps = {
     onProfileNavigate?: () => void;
     onOrdersNavigate?: () => void;
     onWalletNavigate?: () => void;
+    showTradeTab?: boolean;
 };
 declare const Header: React__default.FC<HeaderProps>;
 
@@ -852,4 +857,4 @@ declare function ToastProvider({ children }: {
 }): react_jsx_runtime.JSX.Element;
 declare function useToast(): ToastContextValue;
 
-export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type FundWalletParams, Header, type HeaderProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, HousePositionSliderMobile, type HousePositionSliderMobileOrderPayload, type HousePositionSliderMobileOrderbook, type HousePositionSliderMobileProps, type HousePositionSliderOrderPayload, type HousePositionSliderProps, type InspectionSlot, LoafLiquidityBadge, LoafLiquidityLogo, type LoafLiquidityLogoProps, LoginPopup, type LoginPopupProps, MobileTradeNav, type MobileTradeNavItem, type MobileTradeNavProps, type OfferStatus, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, OwnerBooking, type OwnerBookingProps, PaymentPopup, type PaymentPopupProps, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, type PropertyAddressOption, PropertyBuy, PropertyCompareBar, type PropertyCompareBarProps, PropertyDocuments, type PropertyGalleryHotspot, type PropertyGalleryImage, PropertyHeroHeader, type PropertyHeroHeaderProps, PropertyHistory, PropertyInspectionTimes, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, type PropertyOffer, PropertyOffers, type PropertyOffersProps, PropertyOverview, type PropertyOverviewProps, PropertyPhotoGallery, type PropertyPriceSummary, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, PropertyValuation, type PropertyValuationProps, type PropertyValueSummary, type ToastData, ToastProvider, type ToastVariant, TradeConfirmationModal, type TradeConfirmationModalDetails, type TradeConfirmationModalProps, TradingSlider, type TradingSliderProps, type ValuationHistoryPoint, type ValuationRecentSale, type ValuationSummary, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants, useToast };
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type FundWalletParams, type FundWalletResult, Header, type HeaderProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, HousePositionSliderMobile, type HousePositionSliderMobileOrderPayload, type HousePositionSliderMobileOrderbook, type HousePositionSliderMobileProps, type HousePositionSliderOrderPayload, type HousePositionSliderProps, type InspectionSlot, LoafLiquidityBadge, LoafLiquidityLogo, type LoafLiquidityLogoProps, LoginPopup, type LoginPopupProps, MobileTradeNav, type MobileTradeNavItem, type MobileTradeNavProps, type OfferStatus, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, OwnerBooking, type OwnerBookingProps, PaymentPopup, type PaymentPopupProps, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, type PropertyAddressOption, PropertyBuy, PropertyCompareBar, type PropertyCompareBarProps, PropertyDocuments, type PropertyGalleryHotspot, type PropertyGalleryImage, PropertyHeroHeader, type PropertyHeroHeaderProps, PropertyHistory, PropertyInspectionTimes, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, type PropertyOffer, PropertyOffers, type PropertyOffersProps, PropertyOverview, type PropertyOverviewProps, PropertyPhotoGallery, type PropertyPriceSummary, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, PropertyValuation, type PropertyValuationProps, type PropertyValueSummary, type ToastData, ToastProvider, type ToastVariant, TradeConfirmationModal, type TradeConfirmationModalDetails, type TradeConfirmationModalProps, TradingSlider, type TradingSliderProps, type ValuationHistoryPoint, type ValuationRecentSale, type ValuationSummary, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants, useToast };

package/dist/index.d.ts

@@ -438,6 +438,12 @@ type DemoLoginHandler = (email: string, handle?: string | null) => Promise<DemoL
 type LoginPopupView = "main" | "email" | "otp" | "kyc" | "kyc-success" | "kyc-failed" | "funding";
 type FundWalletParams = {
     amount: string;
+    mode?: "crypto" | "fiat";
+};
+type FundWalletResult = {
+    funded: boolean;
+    widgetUrl?: string;
+    requiresKyc?: boolean;
 };
 type LoginPopupProps = {
     onClose: () => void;
@@ -479,12 +485,10 @@ type LoginPopupProps = {
         passed: boolean;
     }) => void) => React__default.ReactNode;
     /**
-     * Handler called when the user clicks "Fund my account". Should open the funding UI (e.g. Coinbase onramp)
-     * and resolve with { funded: boolean } when the user exits.
+     * Handler called when the user clicks "Fund my account". Should open the funding UI (e.g. Transak onramp)
+     * and resolve with { funded: boolean, widgetUrl?: string } when the user exits.
      */
-    onFundWallet?: (params: FundWalletParams) => Promise<{
-        funded: boolean;
-    }> | void;
+    onFundWallet?: (params: FundWalletParams) => Promise<FundWalletResult> | void;
     /** Optional view to show immediately when the popup opens. */
     initialView?: LoginPopupView;
     /** Handler invoked when the user selects "Sign in with Wallet". */
@@ -535,6 +539,7 @@ type HeaderProps = {
     onProfileNavigate?: () => void;
     onOrdersNavigate?: () => void;
     onWalletNavigate?: () => void;
+    showTradeTab?: boolean;
 };
 declare const Header: React__default.FC<HeaderProps>;
 
@@ -852,4 +857,4 @@ declare function ToastProvider({ children }: {
 }): react_jsx_runtime.JSX.Element;
 declare function useToast(): ToastContextValue;
 
-export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type FundWalletParams, Header, type HeaderProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, HousePositionSliderMobile, type HousePositionSliderMobileOrderPayload, type HousePositionSliderMobileOrderbook, type HousePositionSliderMobileProps, type HousePositionSliderOrderPayload, type HousePositionSliderProps, type InspectionSlot, LoafLiquidityBadge, LoafLiquidityLogo, type LoafLiquidityLogoProps, LoginPopup, type LoginPopupProps, MobileTradeNav, type MobileTradeNavItem, type MobileTradeNavProps, type OfferStatus, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, OwnerBooking, type OwnerBookingProps, PaymentPopup, type PaymentPopupProps, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, type PropertyAddressOption, PropertyBuy, PropertyCompareBar, type PropertyCompareBarProps, PropertyDocuments, type PropertyGalleryHotspot, type PropertyGalleryImage, PropertyHeroHeader, type PropertyHeroHeaderProps, PropertyHistory, PropertyInspectionTimes, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, type PropertyOffer, PropertyOffers, type PropertyOffersProps, PropertyOverview, type PropertyOverviewProps, PropertyPhotoGallery, type PropertyPriceSummary, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, PropertyValuation, type PropertyValuationProps, type PropertyValueSummary, type ToastData, ToastProvider, type ToastVariant, TradeConfirmationModal, type TradeConfirmationModalDetails, type TradeConfirmationModalProps, TradingSlider, type TradingSliderProps, type ValuationHistoryPoint, type ValuationRecentSale, type ValuationSummary, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants, useToast };
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type FundWalletParams, type FundWalletResult, Header, type HeaderProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, HousePositionSliderMobile, type HousePositionSliderMobileOrderPayload, type HousePositionSliderMobileOrderbook, type HousePositionSliderMobileProps, type HousePositionSliderOrderPayload, type HousePositionSliderProps, type InspectionSlot, LoafLiquidityBadge, LoafLiquidityLogo, type LoafLiquidityLogoProps, LoginPopup, type LoginPopupProps, MobileTradeNav, type MobileTradeNavItem, type MobileTradeNavProps, type OfferStatus, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, OwnerBooking, type OwnerBookingProps, PaymentPopup, type PaymentPopupProps, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, type PropertyAddressOption, PropertyBuy, PropertyCompareBar, type PropertyCompareBarProps, PropertyDocuments, type PropertyGalleryHotspot, type PropertyGalleryImage, PropertyHeroHeader, type PropertyHeroHeaderProps, PropertyHistory, PropertyInspectionTimes, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, type PropertyOffer, PropertyOffers, type PropertyOffersProps, PropertyOverview, type PropertyOverviewProps, PropertyPhotoGallery, type PropertyPriceSummary, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, PropertyValuation, type PropertyValuationProps, type PropertyValueSummary, type ToastData, ToastProvider, type ToastVariant, TradeConfirmationModal, type TradeConfirmationModalDetails, type TradeConfirmationModalProps, TradingSlider, type TradingSliderProps, type ValuationHistoryPoint, type ValuationRecentSale, type ValuationSummary, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants, useToast };

package/dist/index.js

@@ -4472,7 +4472,8 @@ var Header = ({
   onTradeClick,
   onProfileNavigate: _onProfileNavigate,
   onOrdersNavigate: _onOrdersNavigate,
-  onWalletNavigate: _onWalletNavigate
+  onWalletNavigate: _onWalletNavigate,
+  showTradeTab = true
 }) => {
   const [isUserMenuOpen, setIsUserMenuOpen] = React5.useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = React5.useState(false);
@@ -4562,6 +4563,9 @@ var Header = ({
     performNavigation(resolvedLoafLiquidityPath);
   };
   const handleTradeNavigation = () => {
+    if (!showTradeTab) {
+      return;
+    }
     closeMenus();
     if (onTradeClick) {
       onTradeClick();
@@ -4659,7 +4663,7 @@ var Header = ({
   const resolvedPortfolioPath = portfolioPath ?? DEFAULT_PORTFOLIO_PATH;
   const resolvedLoafLiquidityPath = loafLiquidityPath ?? DEFAULT_LOAF_LIQUIDITY_PATH;
   const inferredActiveTab = (() => {
-    if (locationPath === resolvedTradePath) return "trade";
+    if (showTradeTab && locationPath === resolvedTradePath) return "trade";
     if (locationPath === resolvedHomePath) return "home";
     if (locationPath === resolvedAboutPath) return "about";
     if (locationPath === resolvedLearnPath) return "learn";
@@ -4669,7 +4673,7 @@ var Header = ({
     return null;
   })();
   const resolvedActiveTab = activeTab ?? inferredActiveTab;
-  const tradeActive = resolvedActiveTab === "trade";
+  const tradeActive = showTradeTab && resolvedActiveTab === "trade";
   const homeActive = resolvedActiveTab === "home";
   const offeringsActive = resolvedActiveTab === "offerings";
   const propertyMapActive = resolvedActiveTab === "propertyMap";
@@ -4715,7 +4719,7 @@ var Header = ({
                     children: "Portfolio"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(
+                showTradeTab && /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
                     href: resolvedTradePath,
@@ -4808,7 +4812,7 @@ var Header = ({
                 children: "Portfolio"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            showTradeTab && /* @__PURE__ */ jsxRuntime.jsx(
               MobileNavItem,
               {
                 onClick: () => {
@@ -5473,8 +5477,10 @@ var LoginPopup = ({
   const [fundingAmount, setFundingAmount] = React5.useState("");
   const [kycLoading, setKycLoading] = React5.useState(false);
   const [showKycWidget, setShowKycWidget] = React5.useState(false);
-  const [fundingLoading, setFundingLoading] = React5.useState(false);
+  const [cryptoFundingLoading, setCryptoFundingLoading] = React5.useState(false);
+  const [fiatFundingLoading, setFiatFundingLoading] = React5.useState(false);
   const [fundingError, setFundingError] = React5.useState("");
+  const [transakWidgetUrl, setTransakWidgetUrl] = React5.useState(null);
   const suppressAutoCloseRef = React5__namespace.default.useRef(false);
   React5.useEffect(() => {
     console.log("[LoginTrace][Popup] mounted");
@@ -5492,6 +5498,35 @@ var LoginPopup = ({
       setView(initialView);
     }
   }, [initialView]);
+  React5.useEffect(() => {
+    if (!transakWidgetUrl) return;
+    const handleTransakMessage = (event) => {
+      if (!event.origin.includes("transak.com") && !event.origin.includes("global.transak.com")) {
+        return;
+      }
+      console.log("[LoginTrace][Popup] Transak message received", event.data);
+      try {
+        const data = typeof event.data === "string" ? JSON.parse(event.data) : event.data;
+        if (data.event_id === "TRANSAK_ORDER_SUCCESSFUL") {
+          console.log("[LoginTrace][Popup] Transak order successful", data);
+          setTimeout(() => {
+            onClose();
+          }, 2e3);
+        } else if (data.event_id === "TRANSAK_ORDER_FAILED") {
+          console.error("[LoginTrace][Popup] Transak order failed", data);
+          setFundingError("Transaction failed. Please try again.");
+          setTransakWidgetUrl(null);
+        } else if (data.event_id === "TRANSAK_WIDGET_CLOSE") {
+          console.log("[LoginTrace][Popup] Transak widget closed by user");
+          setTransakWidgetUrl(null);
+        }
+      } catch (err) {
+        console.warn("[LoginTrace][Popup] Failed to parse Transak message", err);
+      }
+    };
+    window.addEventListener("message", handleTransakMessage);
+    return () => window.removeEventListener("message", handleTransakMessage);
+  }, [transakWidgetUrl, onClose]);
   React5.useEffect(() => {
     if (!autoCloseOnAuth) {
       console.log("[LoginTrace][Popup] autoClose disabled", { autoCloseOnAuth, view });
@@ -5675,6 +5710,10 @@ var LoginPopup = ({
       setView("kyc-failed");
     }
   };
+  const handleKycWidgetClose = () => {
+    setShowKycWidget(false);
+    onClose();
+  };
   const handleKycStart = async () => {
     if (renderKycWidget) {
       setShowKycWidget(true);
@@ -5702,28 +5741,54 @@ var LoginPopup = ({
   const handleKycSkip = () => {
     onClose();
   };
-  const handleFundWallet = async () => {
+  const handleCryptoFund = async () => {
     if (!onFundWallet) {
       onClose();
       return;
     }
-    setFundingLoading(true);
     setFundingError("");
+    setCryptoFundingLoading(true);
     try {
-      const result = await onFundWallet({ amount: fundingAmount || "100" });
-      if (result && result.funded) {
+      const result = await onFundWallet({ amount: fundingAmount || "100", mode: "crypto" });
+      if (result?.funded) {
         onClose();
-      } else {
-        setFundingLoading(false);
       }
     } catch (err) {
       setFundingError(err instanceof Error ? err.message : "Unable to launch funding. Please try again.");
-      setFundingLoading(false);
+    } finally {
+      setCryptoFundingLoading(false);
+    }
+  };
+  const handleFiatFund = async () => {
+    if (!onFundWallet) {
+      onClose();
+      return;
+    }
+    setFundingError("");
+    setFiatFundingLoading(true);
+    try {
+      const result = await onFundWallet({ amount: fundingAmount || "100", mode: "fiat" });
+      if (result?.widgetUrl) {
+        setTransakWidgetUrl(result.widgetUrl);
+      } else if (result?.requiresKyc) {
+        setView("kyc");
+        setShowKycWidget(true);
+      } else if (result?.funded) {
+        onClose();
+      }
+    } catch (err) {
+      setFundingError(err instanceof Error ? err.message : "Unable to launch funding. Please try again.");
+    } finally {
+      setFiatFundingLoading(false);
     }
   };
   const handleFundingSkip = () => {
     onClose();
   };
+  const handleTransakClose = () => {
+    setTransakWidgetUrl(null);
+    setFundingError("");
+  };
   const handleFundingAmountChange = (event) => {
     const next = event.target.value.replace(/[^0-9.]/g, "");
     setFundingAmount(next);
@@ -5899,7 +5964,10 @@ var LoginPopup = ({
         $expanded: showKycWidget,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
-          showKycWidget && renderKycWidget ? /* @__PURE__ */ jsxRuntime.jsx(KycWidgetContainer, { children: renderKycWidget(handleKycWidgetResult) }) : /* @__PURE__ */ jsxRuntime.jsxs(OnboardingStepContainer, { children: [
+          showKycWidget && renderKycWidget ? /* @__PURE__ */ jsxRuntime.jsxs(KycWidgetContainer, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(InlineCloseButton, { onClick: handleKycWidgetClose, "aria-label": "Close KYC widget", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
+            renderKycWidget(handleKycWidgetResult)
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(OnboardingStepContainer, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { children: "KYC to Continue" }),
             /* @__PURE__ */ jsxRuntime.jsx(OnboardingSubtext, { children: "Loaf requires all users to KYC before they can start purchasing properties." }),
             /* @__PURE__ */ jsxRuntime.jsxs(OnboardingButtonGroup, { children: [
@@ -5917,15 +5985,14 @@ var LoginPopup = ({
       /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(OnboardingStepContainer, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(KycSuccessIcon, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 34.5L28.5 43 44 25", stroke: "var(--color-accent, #e6c656)", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { children: "Success!" }),
+        /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { children: "KYC pending review" }),
         /* @__PURE__ */ jsxRuntime.jsxs(OnboardingSubtext, { children: [
-          "Your KYC check has passed!",
-          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-          "You can start purchasing properties."
+          "Thanks for submitting your documents.",
+          /* @__PURE__ */ jsxRuntime.jsx("br", {})
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(OnboardingButtonGroup, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { onClick: () => setView("funding"), children: "Fund your account" }),
-          /* @__PURE__ */ jsxRuntime.jsx(OnboardingSkipButton, { onClick: onClose, children: "Go to my account" })
+          /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { onClick: onClose, children: "Close" }),
+          /* @__PURE__ */ jsxRuntime.jsx(OnboardingSkipButton, { onClick: () => setView("funding"), children: "Fund now" })
         ] })
       ] })
     ] }) });
@@ -5961,32 +6028,62 @@ var LoginPopup = ({
     ] }) });
   }
   if (view === "funding") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(OnboardingStepContainer, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { children: "Fund your account" }),
-        /* @__PURE__ */ jsxRuntime.jsx(OnboardingSubtext, { children: "How much would you like to fund your account with?" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(FundingCard, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(FundingCardLabel, { children: "How much would you like to transfer?" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(FundingInputWrapper, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(FundingCurrencyLabel, { children: "AUD" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              FundingAmountInput,
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      FundingPopupContainer,
+      {
+        onClick: (event) => event.stopPropagation(),
+        $hasWidget: !!transakWidgetUrl,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
+          transakWidgetUrl ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(BackButton, { onClick: handleTransakClose, style: { position: "absolute", top: "1rem", left: "1rem", zIndex: 1 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }),
+              "Back"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(TransakWidgetContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              TransakIframe,
               {
-                type: "text",
-                inputMode: "decimal",
-                value: fundingAmount,
-                onChange: handleFundingAmountChange,
-                placeholder: "0"
+                src: transakWidgetUrl,
+                title: "Transak Onramp Widget",
+                allow: "camera; microphone; payment"
               }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { onClick: handleFundWallet, disabled: fundingLoading, style: { marginTop: "1.25rem" }, children: fundingLoading ? "Opening Coinbase\u2026" : "Fund my account" }),
-          /* @__PURE__ */ jsxRuntime.jsx(OnboardingSkipButton, { onClick: handleFundingSkip, style: { marginTop: "0.75rem" }, children: "Skip for now" }),
-          fundingError && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: fundingError })
-        ] })
-      ] })
-    ] }) });
+            ) })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(OnboardingStepContainer, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { children: "Fund your account" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(FundingCard, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(FundingCardLabel, { children: "How much would you like to transfer?" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(FundingInputWrapper, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(FundingCurrencyLabel, { children: "AUD" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  FundingAmountInput,
+                  {
+                    type: "text",
+                    inputMode: "decimal",
+                    value: fundingAmount,
+                    onChange: handleFundingAmountChange,
+                    placeholder: "0"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(FundingOptionsGrid, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(FundingOptionCard, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(FundingOptionHeading, { children: "Crypto transfer" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(FundingOptionSubtext, { children: "Use Privy's Coinbase onramp to move crypto from another exchange or wallet." }),
+                  /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { onClick: handleCryptoFund, disabled: cryptoFundingLoading, children: cryptoFundingLoading ? "Opening Coinbase\u2026" : "Use crypto deposit" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(FundingOptionCard, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(FundingOptionHeading, { children: "Fiat onramp" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(FundingOptionSubtext, { children: "Buy USDC instantly with your card or local payment methods via Transak." }),
+                  /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { onClick: handleFiatFund, disabled: fiatFundingLoading, children: fiatFundingLoading ? "Loading widget\u2026" : "Use onramp" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(OnboardingSkipButton, { onClick: handleFundingSkip, style: { marginTop: "1.25rem" }, children: "Skip for now" }),
+              fundingError && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: fundingError })
+            ] })
+          ] })
+        ]
+      }
+    ) });
   }
   return null;
 };
@@ -6073,6 +6170,34 @@ var KycWidgetContainer = styled23__default.default.div`
   width: 100%;
   display: flex;
   flex-direction: column;
+  position: relative;
+  gap: 0.75rem;
+`;
+var InlineCloseButton = styled23__default.default.button`
+  position: absolute;
+  top: -12px;
+  right: -12px;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 999px;
+  color: var(--color-text-secondary, #848e9c);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: color 0.2s ease, background 0.2s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.6);
+    color: var(--color-accent, #e6c656);
+  }
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
 `;
 var CloseButton = styled23__default.default.button`
   position: absolute;
@@ -6246,7 +6371,7 @@ var OTPInput = styled23__default.default.input`
 `;
 var SubmitButton = styled23__default.default.button`
   width: 100%;
-  padding: 1rem;
+  padding: 0.85rem;
   background-color: var(--color-accent, #e6c656);
   border: none;
   border-radius: var(--border-radius, 8px);
@@ -6293,13 +6418,14 @@ var OnboardingStepContainer = styled23__default.default.div`
   flex-direction: column;
   align-items: center;
   text-align: center;
-  padding: 1rem 0;
+  padding: 0.25rem 0;
+  gap: 0.5rem;
 `;
 var OnboardingHeading = styled23__default.default.h2`
-  font-size: 1.75rem;
+  font-size: 1.2rem;
   font-weight: 600;
   color: var(--color-text, #eaecef);
-  margin-bottom: 0.75rem;
+  margin: 0;
 `;
 var OnboardingSubtext = styled23__default.default.p`
   font-size: 0.95rem;
@@ -6315,7 +6441,7 @@ var OnboardingButtonGroup = styled23__default.default.div`
 `;
 var OnboardingSkipButton = styled23__default.default.button`
   width: 100%;
-  padding: 0.875rem 1rem;
+  padding: 0.75rem 0.9rem;
   background-color: rgba(255, 255, 255, 0.05);
   border: none;
   border-radius: var(--border-radius, 8px);
@@ -6352,22 +6478,22 @@ var KycFailedIcon = styled23__default.default.div`
 `;
 var FundingCard = styled23__default.default.div`
   width: 100%;
-  border-radius: 24px;
+  border-radius: 14px;
   background-color: var(--color-background-light, #14151e);
-  padding: 1.75rem;
+  padding: 1rem;
   text-align: left;
-  box-shadow: 0 35px 120px rgba(0, 0, 0, 0.65);
+  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4);
 `;
 var FundingCardLabel = styled23__default.default.p`
-  font-size: 1.05rem;
+  font-size: 0.9rem;
   color: var(--color-text, #eaecef);
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 `;
 var FundingInputWrapper = styled23__default.default.div`
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
   background-color: var(--color-background, #0d0e14);
-  padding: 1rem 1.25rem;
+  padding: 0.75rem 0.85rem;
 `;
 var FundingCurrencyLabel = styled23__default.default.label`
   display: block;
@@ -6381,10 +6507,10 @@ var FundingAmountInput = styled23__default.default.input`
   background: transparent;
   border: none;
   outline: none;
-  font-size: 2.25rem;
+  font-size: 1.7rem;
   font-weight: 400;
   color: var(--color-text, #eaecef);
-  margin-top: 0.75rem;
+  margin-top: 0.4rem;
   font-family: "Geist Mono", "Space Grotesk", monospace;
   font-variant-numeric: slashed-zero;
 
@@ -6392,6 +6518,79 @@ var FundingAmountInput = styled23__default.default.input`
     color: rgba(255, 255, 255, 0.4);
   }
 `;
+var FundingOptionsGrid = styled23__default.default.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.6rem;
+  margin-top: 0.75rem;
+`;
+var FundingOptionCard = styled23__default.default.div`
+  background-color: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  padding: 0.85rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+`;
+var FundingOptionHeading = styled23__default.default.h4`
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--color-text, #eaecef);
+`;
+var FundingOptionSubtext = styled23__default.default.p`
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: 1.3;
+  color: var(--color-text-secondary, #848e9c);
+  flex: 1;
+`;
+var FundingPopupContainer = styled23__default.default.div`
+  background-color: var(--color-background, #0a0a0a);
+  border: 1px solid rgba(230, 198, 86, 0.3);
+  border-radius: var(--border-radius, 12px);
+  padding: ${(props) => props.$hasWidget ? "0" : "2.5rem"};
+  max-width: ${(props) => props.$hasWidget ? "900px" : "440px"};
+  width: 90%;
+  position: relative;
+  animation: slideUp 0.3s ease-out;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+
+  @keyframes slideUp {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @media (max-width: 768px) {
+    padding: ${(props) => props.$hasWidget ? "0" : "2rem"};
+    max-width: 95%;
+  }
+`;
+var TransakWidgetContainer = styled23__default.default.div`
+  width: 100%;
+  height: 700px;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--border-radius, 12px);
+  overflow: hidden;
+
+  @media (max-width: 768px) {
+    height: 600px;
+  }
+`;
+var TransakIframe = styled23__default.default.iframe`
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: var(--border-radius, 12px);
+`;
 var MiniLiveFeed = () => {
   const [purchases, setPurchases] = React5.useState([]);
   React5.useEffect(() => {
@@ -10420,8 +10619,7 @@ function PropertyBuy({
     setLastOrderDetails({
       tokens: tokenAmountInt,
       total: orderTotal,
-      price: tokenPrice,
-      orderNumber: Math.floor(1e7 + Math.random() * 9e7)
+      price: tokenPrice
     });
     setOrderPlacedSuccess(true);
     setSliderValue(0);