@loafmarkets/ui 0.1.17 → 0.1.19

package/dist/index.d.mts

@@ -470,6 +470,14 @@ type LoginPopupProps = {
     onKycStart?: () => Promise<{
         passed: boolean;
     }> | void;
+    /**
+     * Render prop for embedding an inline KYC widget (e.g. Sumsub). When provided, clicking
+     * "KYC me now" will display this widget inside the popup. The callback should be invoked
+     * when the verification flow completes.
+     */
+    renderKycWidget?: (onResult: (result: {
+        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.
@@ -503,7 +511,6 @@ type HeaderProps = {
     onLogout?: () => Promise<void> | void;
     onSignInClick?: () => void;
     loginPopupComponent?: React__default.ComponentType<HeaderLoginPopupComponentProps>;
-    tradeUrl?: string;
     tradePath?: string;
     homePath?: string;
     aboutPath?: string;

package/dist/index.d.ts

@@ -470,6 +470,14 @@ type LoginPopupProps = {
     onKycStart?: () => Promise<{
         passed: boolean;
     }> | void;
+    /**
+     * Render prop for embedding an inline KYC widget (e.g. Sumsub). When provided, clicking
+     * "KYC me now" will display this widget inside the popup. The callback should be invoked
+     * when the verification flow completes.
+     */
+    renderKycWidget?: (onResult: (result: {
+        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.
@@ -503,7 +511,6 @@ type HeaderProps = {
     onLogout?: () => Promise<void> | void;
     onSignInClick?: () => void;
     loginPopupComponent?: React__default.ComponentType<HeaderLoginPopupComponentProps>;
-    tradeUrl?: string;
     tradePath?: string;
     homePath?: string;
     aboutPath?: string;

package/dist/index.js

@@ -4437,16 +4437,13 @@ var PriceBlock = styled23__default.default.span`
   border-left: 1px solid rgba(255, 255, 255, 0.25);
   min-height: 1.5rem;
 `;
-var DEFAULT_TRADE_URL = "https://loafx-frontend-web.vercel.app/";
 var DEFAULT_TRADE_PATH = "/trade";
 var DEFAULT_HOME_PATH = "/";
 var DEFAULT_ABOUT_PATH = "/about";
 var DEFAULT_LEARN_PATH = "/learn";
-var DEFAULT_OFFERINGS_PATH = "/ipo/musgrave";
 var DEFAULT_PROPERTY_MAP_PATH = "/map";
 var DEFAULT_PORTFOLIO_PATH = "/portfolio";
 var DEFAULT_LOAF_LIQUIDITY_PATH = "/loaf-liquidity";
-var DEFAULT_AUTH_LOGIN_URL = "http://localhost:5174/";
 var DEFAULT_AUTH_RETURN_PARAM = "returnTo";
 var LOGIN_POPUP_EVENT = "loaf:open-login-popup";
 var Header = ({
@@ -4458,16 +4455,15 @@ var Header = ({
   onLogout,
   onSignInClick,
   loginPopupComponent: LoginPopupComponent,
-  tradeUrl = DEFAULT_TRADE_URL,
   tradePath = DEFAULT_TRADE_PATH,
   homePath = DEFAULT_HOME_PATH,
   aboutPath = DEFAULT_ABOUT_PATH,
   learnPath = DEFAULT_LEARN_PATH,
-  offeringsPath = DEFAULT_OFFERINGS_PATH,
+  offeringsPath,
   propertyMapPath = DEFAULT_PROPERTY_MAP_PATH,
   portfolioPath = DEFAULT_PORTFOLIO_PATH,
   loafLiquidityPath = DEFAULT_LOAF_LIQUIDITY_PATH,
-  authLoginUrl = DEFAULT_AUTH_LOGIN_URL,
+  authLoginUrl,
   authReturnParam = DEFAULT_AUTH_RETURN_PARAM,
   getAuthReturnUrl,
   logoHref,
@@ -4563,7 +4559,7 @@ var Header = ({
       onLoafLiquidityClick();
       return;
     }
-    performNavigation(loafLiquidityPath);
+    performNavigation(resolvedLoafLiquidityPath);
   };
   const handleTradeNavigation = () => {
     closeMenus();
@@ -4571,9 +4567,7 @@ var Header = ({
       onTradeClick();
       return;
     }
-    if (typeof window !== "undefined") {
-      window.location.href = tradeUrl;
-    }
+    performNavigation(resolvedTradePath);
   };
   const handleLogoutClick = async (event) => {
     event?.preventDefault();
@@ -4602,7 +4596,9 @@ var Header = ({
       onNavigate("/portfolio");
     }
   };
-  const userPrimaryLabel = currentUser?.displayName?.trim() || "User";
+  const rawDisplayName = currentUser?.displayName;
+  const normalizedDisplayName = typeof rawDisplayName === "string" ? rawDisplayName.trim() : void 0;
+  const userPrimaryLabel = normalizedDisplayName || currentUser?.email || currentUser?.walletAddress || "User";
   const resolveAuthReturnUrl = () => {
     if (getAuthReturnUrl) {
       return getAuthReturnUrl();
@@ -4653,14 +4649,23 @@ var Header = ({
     setShowLoginPopup(false);
     setLoginPopupInitialView(void 0);
   }, []);
+  const resolvedTradePath = tradePath ?? DEFAULT_TRADE_PATH;
+  const resolvedHomePath = homePath ?? DEFAULT_HOME_PATH;
+  const resolvedAboutPath = aboutPath ?? DEFAULT_ABOUT_PATH;
+  const resolvedLearnPath = learnPath ?? DEFAULT_LEARN_PATH;
+  const resolvedOfferingsPath = offeringsPath ?? void 0;
+  const offeringsHref = resolvedOfferingsPath ?? resolvedHomePath;
+  const resolvedPropertyMapPath = propertyMapPath ?? DEFAULT_PROPERTY_MAP_PATH;
+  const resolvedPortfolioPath = portfolioPath ?? DEFAULT_PORTFOLIO_PATH;
+  const resolvedLoafLiquidityPath = loafLiquidityPath ?? DEFAULT_LOAF_LIQUIDITY_PATH;
   const inferredActiveTab = (() => {
-    if (locationPath === tradePath) return "trade";
-    if (locationPath === homePath) return "home";
-    if (locationPath === aboutPath) return "about";
-    if (locationPath === learnPath) return "learn";
-    if (locationPath.startsWith(offeringsPath)) return "offerings";
-    if (locationPath === propertyMapPath) return "propertyMap";
-    if (locationPath === portfolioPath) return "portfolio";
+    if (locationPath === resolvedTradePath) return "trade";
+    if (locationPath === resolvedHomePath) return "home";
+    if (locationPath === resolvedAboutPath) return "about";
+    if (locationPath === resolvedLearnPath) return "learn";
+    if (resolvedOfferingsPath && locationPath.startsWith(resolvedOfferingsPath)) return "offerings";
+    if (locationPath === resolvedPropertyMapPath) return "propertyMap";
+    if (locationPath === resolvedPortfolioPath) return "portfolio";
     return null;
   })();
   const resolvedActiveTab = activeTab ?? inferredActiveTab;
@@ -4676,7 +4681,7 @@ var Header = ({
     /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Logo, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(LogoLink, { href: logoHref ?? homePath, onClick: handleLogoNavigation, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: Loaf_logo_Banner_default, alt: "LOAF Logo" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(LogoLink, { href: logoHref ?? resolvedHomePath, onClick: handleLogoNavigation, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: Loaf_logo_Banner_default, alt: "LOAF Logo" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("h1", { children: "LOAF" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(Nav, { $isOpen: isMobileMenuOpen, className: "mobile-menu", children: [
@@ -4689,11 +4694,11 @@ var Header = ({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: homePath,
+                    href: resolvedHomePath,
                     className: homeActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
-                      handleNavigation(homePath);
+                      handleNavigation(resolvedHomePath);
                     },
                     children: "Home"
                   }
@@ -4701,7 +4706,7 @@ var Header = ({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: tradeUrl,
+                    href: resolvedTradePath,
                     className: tradeActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
@@ -4713,11 +4718,11 @@ var Header = ({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: portfolioPath,
+                    href: resolvedPortfolioPath,
                     className: portfolioActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
-                      handleNavigation(portfolioPath);
+                      handleNavigation(resolvedPortfolioPath);
                     },
                     children: "Portfolio"
                   }
@@ -4725,11 +4730,11 @@ var Header = ({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: offeringsPath,
+                    href: offeringsHref,
                     className: offeringsActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
-                      handleNavigation(offeringsPath);
+                      handleNavigation(offeringsHref);
                     },
                     children: "Initial Offerings"
                   }
@@ -4737,11 +4742,11 @@ var Header = ({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: propertyMapPath,
+                    href: resolvedPropertyMapPath,
                     className: propertyMapActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
-                      handleNavigation(propertyMapPath);
+                      handleNavigation(resolvedPropertyMapPath);
                     },
                     children: "Property Map"
                   }
@@ -4749,11 +4754,11 @@ var Header = ({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: learnPath,
+                    href: resolvedLearnPath,
                     className: learnActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
-                      handleNavigation(learnPath);
+                      handleNavigation(resolvedLearnPath);
                     },
                     children: "Learn"
                   }
@@ -4761,11 +4766,11 @@ var Header = ({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   NavLink,
                   {
-                    href: aboutPath,
+                    href: resolvedAboutPath,
                     className: aboutActive ? "active" : "",
                     onClick: (event) => {
                       event.preventDefault();
-                      handleNavigation(aboutPath);
+                      handleNavigation(resolvedAboutPath);
                     },
                     children: "About"
                   }
@@ -4795,7 +4800,7 @@ var Header = ({
               /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zM5 9.5C5 7.01 7.01 5 9.5 5S14 7.01 14 9.5 11.99 14 9.5 14 5 11.99 5 9.5z" }) }),
               /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", placeholder: "Search..." })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(homePath), children: "Home" }),
+            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedHomePath), children: "Home" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               MobileNavItem,
               {
@@ -4805,11 +4810,11 @@ var Header = ({
                 children: "Trade"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(portfolioPath), children: "Portfolio" }),
-            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(offeringsPath), children: "Initial Offerings" }),
-            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(propertyMapPath), children: "Property Map" }),
-            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(learnPath), children: "Learn" }),
-            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(aboutPath), children: "About" }),
+            /* @__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" }),
+            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedAboutPath), children: "About" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderTop: "1px solid #2b3139", margin: "8px 0" } }),
             /* @__PURE__ */ jsxRuntime.jsx(
               MobileNavItem,
@@ -5448,6 +5453,7 @@ var LoginPopup = ({
   logoAlt = DEFAULT_LOGO_ALT,
   autoCloseOnAuth = true,
   onKycStart,
+  renderKycWidget,
   onFundWallet,
   initialView
 }) => {
@@ -5460,6 +5466,7 @@ var LoginPopup = ({
   const [isSignUp, setIsSignUp] = React5.useState(false);
   const [fundingAmount, setFundingAmount] = React5.useState("");
   const [kycLoading, setKycLoading] = React5.useState(false);
+  const [showKycWidget, setShowKycWidget] = React5.useState(false);
   const [fundingLoading, setFundingLoading] = React5.useState(false);
   const [fundingError, setFundingError] = React5.useState("");
   const suppressAutoCloseRef = React5__namespace.default.useRef(false);
@@ -5654,7 +5661,19 @@ var LoginPopup = ({
       setLoading(false);
     }
   };
+  const handleKycWidgetResult = (result) => {
+    setShowKycWidget(false);
+    if (result.passed) {
+      setView("kyc-success");
+    } else {
+      setView("kyc-failed");
+    }
+  };
   const handleKycStart = async () => {
+    if (renderKycWidget) {
+      setShowKycWidget(true);
+      return;
+    }
     if (!onKycStart) {
       setView("kyc-success");
       return;
@@ -5867,18 +5886,25 @@ var LoginPopup = ({
     ] }) });
   }
   if (view === "kyc") {
-    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: "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: [
-          /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { onClick: handleKycStart, disabled: kycLoading, children: kycLoading ? "Verifying\u2026" : "KYC me now" }),
-          /* @__PURE__ */ jsxRuntime.jsx(OnboardingSkipButton, { onClick: handleKycSkip, children: "I'll do this later, I want to see the properties first" })
-        ] }),
-        error && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: error })
-      ] })
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      KycPopupContainer,
+      {
+        onClick: (event) => event.stopPropagation(),
+        $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: [
+            /* @__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: [
+              /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { onClick: handleKycStart, disabled: kycLoading, children: kycLoading ? "Verifying\u2026" : "KYC me now" }),
+              /* @__PURE__ */ jsxRuntime.jsx(OnboardingSkipButton, { onClick: handleKycSkip, children: "I'll do this later, I want to see the properties first" })
+            ] }),
+            error && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: error })
+          ] })
+        ]
+      }
+    ) });
   }
   if (view === "kyc-success") {
     return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
@@ -6008,6 +6034,40 @@ var PopupContainer = styled23__default.default.div`
     max-width: 90%;
   }
 `;
+var KycPopupContainer = 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: 2.5rem;
+  max-width: ${(props) => props.$expanded ? "680px" : "440px"};
+  width: 90%;
+  position: relative;
+  animation: slideUp 0.3s ease-out;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  transition: max-width 0.3s ease;
+
+  @keyframes slideUp {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @media (max-width: 768px) {
+    padding: 1.5rem;
+    max-width: 95%;
+  }
+`;
+var KycWidgetContainer = styled23__default.default.div`
+  min-height: 500px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
 var CloseButton = styled23__default.default.button`
   position: absolute;
   top: 1rem;