@loafmarkets/ui 0.1.18 → 0.1.20

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.

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.

package/dist/index.js

@@ -4596,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();
@@ -4704,25 +4706,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(
                   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(
@@ -4799,6 +4801,13 @@ var Header = ({
               /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", placeholder: "Search..." })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedHomePath), children: "Home" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              MobileNavItem,
+              {
+                onClick: () => handleNavigation(resolvedPortfolioPath),
+                children: "Portfolio"
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(
               MobileNavItem,
               {
@@ -4808,7 +4817,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" }),
@@ -5451,6 +5459,7 @@ var LoginPopup = ({
   logoAlt = DEFAULT_LOGO_ALT,
   autoCloseOnAuth = true,
   onKycStart,
+  renderKycWidget,
   onFundWallet,
   initialView
 }) => {
@@ -5463,6 +5472,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);
@@ -5657,7 +5667,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;
@@ -5870,18 +5892,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: [
@@ -6011,6 +6040,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;