@loafmarkets/ui 0.1.19 → 0.1.21

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>;
 

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>;
 

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";
@@ -4706,25 +4710,25 @@ var Header = ({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: resolvedTradePath,
-                    className: tradeActive ? "active" : "",
+                    href: resolvedPortfolioPath,
+                    className: portfolioActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
-                      handleTradeNavigation();
+                      handleNavigation(resolvedPortfolioPath);
                     },
-                    children: "Trade"
+                    children: "Portfolio"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(
+                showTradeTab && /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: resolvedPortfolioPath,
-                    className: portfolioActive ? "active" : "",
+                    href: resolvedTradePath,
+                    className: tradeActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
-                      handleNavigation(resolvedPortfolioPath);
+                      handleTradeNavigation();
                     },
-                    children: "Portfolio"
+                    children: "Trade"
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -4802,6 +4806,13 @@ var Header = ({
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedHomePath), children: "Home" }),
             /* @__PURE__ */ jsxRuntime.jsx(
+              MobileNavItem,
+              {
+                onClick: () => handleNavigation(resolvedPortfolioPath),
+                children: "Portfolio"
+              }
+            ),
+            showTradeTab && /* @__PURE__ */ jsxRuntime.jsx(
               MobileNavItem,
               {
                 onClick: () => {
@@ -4810,7 +4821,6 @@ var Header = ({
                 children: "Trade"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedPortfolioPath), children: "Portfolio" }),
             /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(offeringsHref), children: "Initial Offerings" }),
             /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedPropertyMapPath), children: "Property Map" }),
             /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedLearnPath), children: "Learn" }),
@@ -5467,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");
@@ -5486,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 });
@@ -5669,6 +5710,10 @@ var LoginPopup = ({
       setView("kyc-failed");
     }
   };
+  const handleKycWidgetClose = () => {
+    setShowKycWidget(false);
+    onClose();
+  };
   const handleKycStart = async () => {
     if (renderKycWidget) {
       setShowKycWidget(true);
@@ -5696,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();
+      }
+    } catch (err) {
+      setFundingError(err instanceof Error ? err.message : "Unable to launch funding. Please try again.");
+    } 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();
-      } else {
-        setFundingLoading(false);
       }
     } catch (err) {
       setFundingError(err instanceof Error ? err.message : "Unable to launch funding. Please try again.");
-      setFundingLoading(false);
+    } 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);
@@ -5893,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: [
@@ -5911,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" })
         ] })
       ] })
     ] }) });
@@ -5955,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;
 };
@@ -6067,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;
@@ -6240,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);
@@ -6287,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;
@@ -6309,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);
@@ -6346,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;
@@ -6375,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;
 
@@ -6386,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(() => {
@@ -10414,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);