@loafmarkets/ui 0.1.20 → 0.1.21

package/dist/index.mjs

@@ -4447,7 +4447,8 @@ var Header = ({
   onTradeClick,
   onProfileNavigate: _onProfileNavigate,
   onOrdersNavigate: _onOrdersNavigate,
-  onWalletNavigate: _onWalletNavigate
+  onWalletNavigate: _onWalletNavigate,
+  showTradeTab = true
 }) => {
   const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -4537,6 +4538,9 @@ var Header = ({
     performNavigation(resolvedLoafLiquidityPath);
   };
   const handleTradeNavigation = () => {
+    if (!showTradeTab) {
+      return;
+    }
     closeMenus();
     if (onTradeClick) {
       onTradeClick();
@@ -4634,7 +4638,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";
@@ -4644,7 +4648,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";
@@ -4690,7 +4694,7 @@ var Header = ({
                     children: "Portfolio"
                   }
                 ),
-                /* @__PURE__ */ jsx(
+                showTradeTab && /* @__PURE__ */ jsx(
                   NavLink,
                   {
                     href: resolvedTradePath,
@@ -4783,7 +4787,7 @@ var Header = ({
                 children: "Portfolio"
               }
             ),
-            /* @__PURE__ */ jsx(
+            showTradeTab && /* @__PURE__ */ jsx(
               MobileNavItem,
               {
                 onClick: () => {
@@ -5448,8 +5452,10 @@ var LoginPopup = ({
   const [fundingAmount, setFundingAmount] = useState("");
   const [kycLoading, setKycLoading] = useState(false);
   const [showKycWidget, setShowKycWidget] = useState(false);
-  const [fundingLoading, setFundingLoading] = useState(false);
+  const [cryptoFundingLoading, setCryptoFundingLoading] = useState(false);
+  const [fiatFundingLoading, setFiatFundingLoading] = useState(false);
   const [fundingError, setFundingError] = useState("");
+  const [transakWidgetUrl, setTransakWidgetUrl] = useState(null);
   const suppressAutoCloseRef = React5__default.useRef(false);
   useEffect(() => {
     console.log("[LoginTrace][Popup] mounted");
@@ -5467,6 +5473,35 @@ var LoginPopup = ({
       setView(initialView);
     }
   }, [initialView]);
+  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]);
   useEffect(() => {
     if (!autoCloseOnAuth) {
       console.log("[LoginTrace][Popup] autoClose disabled", { autoCloseOnAuth, view });
@@ -5650,6 +5685,10 @@ var LoginPopup = ({
       setView("kyc-failed");
     }
   };
+  const handleKycWidgetClose = () => {
+    setShowKycWidget(false);
+    onClose();
+  };
   const handleKycStart = async () => {
     if (renderKycWidget) {
       setShowKycWidget(true);
@@ -5677,28 +5716,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);
@@ -5874,7 +5939,10 @@ var LoginPopup = ({
         $expanded: showKycWidget,
         children: [
           /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ 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__ */ jsx(KycWidgetContainer, { children: renderKycWidget(handleKycWidgetResult) }) : /* @__PURE__ */ jsxs(OnboardingStepContainer, { children: [
+          showKycWidget && renderKycWidget ? /* @__PURE__ */ jsxs(KycWidgetContainer, { children: [
+            /* @__PURE__ */ jsx(InlineCloseButton, { onClick: handleKycWidgetClose, "aria-label": "Close KYC widget", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ 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__ */ jsxs(OnboardingStepContainer, { children: [
             /* @__PURE__ */ jsx(OnboardingHeading, { children: "KYC to Continue" }),
             /* @__PURE__ */ jsx(OnboardingSubtext, { children: "Loaf requires all users to KYC before they can start purchasing properties." }),
             /* @__PURE__ */ jsxs(OnboardingButtonGroup, { children: [
@@ -5892,15 +5960,14 @@ var LoginPopup = ({
       /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ 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__ */ jsxs(OnboardingStepContainer, { children: [
         /* @__PURE__ */ jsx(KycSuccessIcon, { children: /* @__PURE__ */ jsx("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M20 34.5L28.5 43 44 25", stroke: "var(--color-accent, #e6c656)", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
-        /* @__PURE__ */ jsx(OnboardingHeading, { children: "Success!" }),
+        /* @__PURE__ */ jsx(OnboardingHeading, { children: "KYC pending review" }),
         /* @__PURE__ */ jsxs(OnboardingSubtext, { children: [
-          "Your KYC check has passed!",
-          /* @__PURE__ */ jsx("br", {}),
-          "You can start purchasing properties."
+          "Thanks for submitting your documents.",
+          /* @__PURE__ */ jsx("br", {})
         ] }),
         /* @__PURE__ */ jsxs(OnboardingButtonGroup, { children: [
-          /* @__PURE__ */ jsx(SubmitButton, { onClick: () => setView("funding"), children: "Fund your account" }),
-          /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: onClose, children: "Go to my account" })
+          /* @__PURE__ */ jsx(SubmitButton, { onClick: onClose, children: "Close" }),
+          /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: () => setView("funding"), children: "Fund now" })
         ] })
       ] })
     ] }) });
@@ -5936,32 +6003,62 @@ var LoginPopup = ({
     ] }) });
   }
   if (view === "funding") {
-    return /* @__PURE__ */ jsx(Overlay2, { children: /* @__PURE__ */ jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
-      /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ 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__ */ jsxs(OnboardingStepContainer, { children: [
-        /* @__PURE__ */ jsx(OnboardingHeading, { children: "Fund your account" }),
-        /* @__PURE__ */ jsx(OnboardingSubtext, { children: "How much would you like to fund your account with?" }),
-        /* @__PURE__ */ jsxs(FundingCard, { children: [
-          /* @__PURE__ */ jsx(FundingCardLabel, { children: "How much would you like to transfer?" }),
-          /* @__PURE__ */ jsxs(FundingInputWrapper, { children: [
-            /* @__PURE__ */ jsx(FundingCurrencyLabel, { children: "AUD" }),
-            /* @__PURE__ */ jsx(
-              FundingAmountInput,
+    return /* @__PURE__ */ jsx(Overlay2, { children: /* @__PURE__ */ jsxs(
+      FundingPopupContainer,
+      {
+        onClick: (event) => event.stopPropagation(),
+        $hasWidget: !!transakWidgetUrl,
+        children: [
+          /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(BackButton, { onClick: handleTransakClose, style: { position: "absolute", top: "1rem", left: "1rem", zIndex: 1 }, children: [
+              /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }),
+              "Back"
+            ] }),
+            /* @__PURE__ */ jsx(TransakWidgetContainer, { children: /* @__PURE__ */ jsx(
+              TransakIframe,
               {
-                type: "text",
-                inputMode: "decimal",
-                value: fundingAmount,
-                onChange: handleFundingAmountChange,
-                placeholder: "0"
+                src: transakWidgetUrl,
+                title: "Transak Onramp Widget",
+                allow: "camera; microphone; payment"
               }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(SubmitButton, { onClick: handleFundWallet, disabled: fundingLoading, style: { marginTop: "1.25rem" }, children: fundingLoading ? "Opening Coinbase\u2026" : "Fund my account" }),
-          /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: handleFundingSkip, style: { marginTop: "0.75rem" }, children: "Skip for now" }),
-          fundingError && /* @__PURE__ */ jsx(StatusMessage, { $error: true, children: fundingError })
-        ] })
-      ] })
-    ] }) });
+            ) })
+          ] }) : /* @__PURE__ */ jsxs(OnboardingStepContainer, { children: [
+            /* @__PURE__ */ jsx(OnboardingHeading, { children: "Fund your account" }),
+            /* @__PURE__ */ jsxs(FundingCard, { children: [
+              /* @__PURE__ */ jsx(FundingCardLabel, { children: "How much would you like to transfer?" }),
+              /* @__PURE__ */ jsxs(FundingInputWrapper, { children: [
+                /* @__PURE__ */ jsx(FundingCurrencyLabel, { children: "AUD" }),
+                /* @__PURE__ */ jsx(
+                  FundingAmountInput,
+                  {
+                    type: "text",
+                    inputMode: "decimal",
+                    value: fundingAmount,
+                    onChange: handleFundingAmountChange,
+                    placeholder: "0"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(FundingOptionsGrid, { children: [
+                /* @__PURE__ */ jsxs(FundingOptionCard, { children: [
+                  /* @__PURE__ */ jsx(FundingOptionHeading, { children: "Crypto transfer" }),
+                  /* @__PURE__ */ jsx(FundingOptionSubtext, { children: "Use Privy's Coinbase onramp to move crypto from another exchange or wallet." }),
+                  /* @__PURE__ */ jsx(SubmitButton, { onClick: handleCryptoFund, disabled: cryptoFundingLoading, children: cryptoFundingLoading ? "Opening Coinbase\u2026" : "Use crypto deposit" })
+                ] }),
+                /* @__PURE__ */ jsxs(FundingOptionCard, { children: [
+                  /* @__PURE__ */ jsx(FundingOptionHeading, { children: "Fiat onramp" }),
+                  /* @__PURE__ */ jsx(FundingOptionSubtext, { children: "Buy USDC instantly with your card or local payment methods via Transak." }),
+                  /* @__PURE__ */ jsx(SubmitButton, { onClick: handleFiatFund, disabled: fiatFundingLoading, children: fiatFundingLoading ? "Loading widget\u2026" : "Use onramp" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: handleFundingSkip, style: { marginTop: "1.25rem" }, children: "Skip for now" }),
+              fundingError && /* @__PURE__ */ jsx(StatusMessage, { $error: true, children: fundingError })
+            ] })
+          ] })
+        ]
+      }
+    ) });
   }
   return null;
 };
@@ -6048,6 +6145,34 @@ var KycWidgetContainer = styled23.div`
   width: 100%;
   display: flex;
   flex-direction: column;
+  position: relative;
+  gap: 0.75rem;
+`;
+var InlineCloseButton = styled23.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.button`
   position: absolute;
@@ -6221,7 +6346,7 @@ var OTPInput = styled23.input`
 `;
 var SubmitButton = styled23.button`
   width: 100%;
-  padding: 1rem;
+  padding: 0.85rem;
   background-color: var(--color-accent, #e6c656);
   border: none;
   border-radius: var(--border-radius, 8px);
@@ -6268,13 +6393,14 @@ var OnboardingStepContainer = styled23.div`
   flex-direction: column;
   align-items: center;
   text-align: center;
-  padding: 1rem 0;
+  padding: 0.25rem 0;
+  gap: 0.5rem;
 `;
 var OnboardingHeading = styled23.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.p`
   font-size: 0.95rem;
@@ -6290,7 +6416,7 @@ var OnboardingButtonGroup = styled23.div`
 `;
 var OnboardingSkipButton = styled23.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);
@@ -6327,22 +6453,22 @@ var KycFailedIcon = styled23.div`
 `;
 var FundingCard = styled23.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.p`
-  font-size: 1.05rem;
+  font-size: 0.9rem;
   color: var(--color-text, #eaecef);
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 `;
 var FundingInputWrapper = styled23.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.label`
   display: block;
@@ -6356,10 +6482,10 @@ var FundingAmountInput = styled23.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;
 
@@ -6367,6 +6493,79 @@ var FundingAmountInput = styled23.input`
     color: rgba(255, 255, 255, 0.4);
   }
 `;
+var FundingOptionsGrid = styled23.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.6rem;
+  margin-top: 0.75rem;
+`;
+var FundingOptionCard = styled23.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.h4`
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--color-text, #eaecef);
+`;
+var FundingOptionSubtext = styled23.p`
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: 1.3;
+  color: var(--color-text-secondary, #848e9c);
+  flex: 1;
+`;
+var FundingPopupContainer = styled23.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.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.iframe`
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: var(--border-radius, 12px);
+`;
 var MiniLiveFeed = () => {
   const [purchases, setPurchases] = useState([]);
   useEffect(() => {
@@ -10395,8 +10594,7 @@ function PropertyBuy({
     setLastOrderDetails({
       tokens: tokenAmountInt,
       total: orderTotal,
-      price: tokenPrice,
-      orderNumber: Math.floor(1e7 + Math.random() * 9e7)
+      price: tokenPrice
     });
     setOrderPlacedSuccess(true);
     setSliderValue(0);