@loafmarkets/ui 0.1.357 → 0.1.359

package/dist/index.d.mts

@@ -584,6 +584,8 @@ type LoginPopupProps = {
     walletAddress?: string | null;
     /** Called when the user submits a referral code during onboarding. */
     onSubmitReferralCode?: (code: string) => Promise<void> | void;
+    /** Called when the user skips the referral code and joins the waitlist. Receives their signup email. Resolves to a success message. */
+    onJoinWaitlist?: (email: string) => Promise<string> | void;
     /** Handler invoked when the user selects "Sign in with Wallet". */
     onWalletLogin?: () => Promise<void> | void;
     /** Handler invoked when the user selects "Sign in with Passkey". When omitted, the button is hidden. */

package/dist/index.d.ts

@@ -584,6 +584,8 @@ type LoginPopupProps = {
     walletAddress?: string | null;
     /** Called when the user submits a referral code during onboarding. */
     onSubmitReferralCode?: (code: string) => Promise<void> | void;
+    /** Called when the user skips the referral code and joins the waitlist. Receives their signup email. Resolves to a success message. */
+    onJoinWaitlist?: (email: string) => Promise<string> | void;
     /** Handler invoked when the user selects "Sign in with Wallet". */
     onWalletLogin?: () => Promise<void> | void;
     /** Handler invoked when the user selects "Sign in with Passkey". When omitted, the button is hidden. */

package/dist/index.js

@@ -4591,9 +4591,14 @@ var PriceChart = React5__namespace.forwardRef(
   }
 );
 PriceChart.displayName = "PriceChart";
-var formatPrice3 = (value, currencySymbol) => {
+var formatPrice3 = (value, currencySymbol, compact) => {
   const abs = Math.abs(value);
   if (abs >= 1e6) {
+    if (!compact) {
+      return `${currencySymbol}${Math.round(value).toLocaleString(void 0, {
+        maximumFractionDigits: 0
+      })}`;
+    }
     const unit = abs >= 1e12 ? { v: 1e12, s: "T" } : abs >= 1e9 ? { v: 1e9, s: "B" } : { v: 1e6, s: "M" };
     return `${currencySymbol}${(value / unit.v).toFixed(1)}${unit.s}`;
   }
@@ -4636,6 +4641,14 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
     const tradeHoverColor = "#f5dd9a";
     const [isTradeInteracting, setIsTradeInteracting] = React5__namespace.useState(false);
     const [isOfferInteracting, setIsOfferInteracting] = React5__namespace.useState(false);
+    const [isMobile, setIsMobile] = React5__namespace.useState(
+      () => typeof window !== "undefined" && window.innerWidth <= 768
+    );
+    React5__namespace.useEffect(() => {
+      const onResize = () => setIsMobile(window.innerWidth <= 768);
+      window.addEventListener("resize", onResize);
+      return () => window.removeEventListener("resize", onResize);
+    }, []);
     const isTradeDisabled = !onTrade;
     const isMakeOfferButtonDisabled = makeOfferDisabled || !onMakeOffer;
     const showMakeOfferButton = !hideMakeOfferButton;
@@ -4683,7 +4696,7 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
               isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 110, height: 24 }) : price == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(PriceRow, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(CurrencyLabel, { children: "USD" }),
                 changePercent != null ? /* @__PURE__ */ jsxRuntime.jsx(PriceArrow, { $isPositive: isPositive, children: isPositive ? "\u25B2" : "\u25BC" }) : null,
-                formatPrice3(price, "")
+                formatPrice3(price, "", isMobile)
               ] }),
               changePercent != null ? /* @__PURE__ */ jsxRuntime.jsxs(PriceChangeRow, { $isPositive: isPositive, children: [
                 priceChange != null ? `${isPositive ? "+" : ""}${priceChange.toFixed(2)} ` : null,
@@ -6465,7 +6478,8 @@ var LoginPopup = ({
   initialView,
   kycStatus: kycStatusProp,
   walletAddress,
-  onSubmitReferralCode
+  onSubmitReferralCode,
+  onJoinWaitlist
 }) => {
   const [view, setView] = React5.useState(() => initialView ?? "main");
   const [email, setEmail] = React5.useState("");
@@ -6476,6 +6490,8 @@ var LoginPopup = ({
   const [referralCode, setReferralCode] = React5.useState("");
   const [referralLoading, setReferralLoading] = React5.useState(false);
   const [referralError, setReferralError] = React5.useState("");
+  const [waitlistLoading, setWaitlistLoading] = React5.useState(false);
+  const [waitlistMessage, setWaitlistMessage] = React5.useState("");
   const [loading, setLoading] = React5.useState(false);
   const [isSignUp, setIsSignUp] = React5.useState(false);
   const [fundingAmount] = React5.useState("");
@@ -6845,30 +6861,6 @@ var LoginPopup = ({
           /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C9.79 2 8 3.79 8 6v4H6c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2h-2V6c0-2.21-1.79-4-4-4zm-2 4c0-1.1.9-2 2-2s2 .9 2 2v4h-4V6zm2 9a2 2 0 100 4 2 2 0 000-4z" }) }),
           "Sign in with Passkey"
         ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(AnnotationContainer, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Annotation, { 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: "M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(AnnotationText, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(AnnotationLabel, { children: "\u2190 Digital Asset users" }),
-            "Connect your Web3 wallet to access your assets"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Annotation, { 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: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(AnnotationText, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(AnnotationLabel, { children: "\u2190 Traditional Finance users" }),
-            "Sign in with email, no web3 experience needed"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Annotation, { 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: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(AnnotationText, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(AnnotationLabel, { children: "\u2190 Self custodial" }),
-            "We never have ownership of your assets. All units are self custodial"
-          ] })
-        ] })
       ] })
     ] }) });
   }
@@ -7128,6 +7120,22 @@ var LoginPopup = ({
         setReferralLoading(false);
       }
     };
+    const handleJoinWaitlistSkip = async () => {
+      if (!onJoinWaitlist) {
+        onClose();
+        return;
+      }
+      setReferralError("");
+      setWaitlistLoading(true);
+      try {
+        const message = await onJoinWaitlist(email);
+        setWaitlistMessage(message || "You're on the waitlist.");
+        setTimeout(() => onClose(), 1400);
+      } catch (err) {
+        setReferralError(err instanceof Error ? err.message : "Couldn't join the waitlist. Please try again.");
+        setWaitlistLoading(false);
+      }
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, 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: [
@@ -7147,7 +7155,7 @@ var LoginPopup = ({
           /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
           /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { children: "Do you have a referral code?" }),
+        /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { children: "Enter code to access Private Beta trading" }),
         /* @__PURE__ */ jsxRuntime.jsx(OnboardingSubtext, { style: { marginBottom: "1.5rem" }, children: "Enter your code to unlock $100k in testnet USD, or skip to continue." }),
         /* @__PURE__ */ jsxRuntime.jsxs(EmailFormContainer, { style: { width: "100%", marginBottom: 0 }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -7177,13 +7185,17 @@ var LoginPopup = ({
           ),
           referralError && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: referralError })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        waitlistMessage ? /* @__PURE__ */ jsxRuntime.jsxs(StatusMessage, { style: { marginTop: "0.75rem" }, children: [
+          "\u2713 ",
+          waitlistMessage
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
           OnboardingSkipButton,
           {
             type: "button",
-            onClick: onClose,
+            onClick: () => void handleJoinWaitlistSkip(),
+            disabled: waitlistLoading,
             style: { marginTop: "0.75rem" },
-            children: "Skip for now"
+            children: waitlistLoading ? "Joining\u2026" : "Skip for now & join Waitlist"
           }
         )
       ] })
@@ -7581,57 +7593,12 @@ var LoginButton = styled9__default.default.button`
     color: var(--color-accent, #e6c656);
   }
 `;
-var Divider = styled9__default.default.div`
-  display: flex;
-  align-items: center;
-  margin: 1.5rem 0;
-
-  &::before,
-  &::after {
-    content: "";
-    flex: 1;
-    height: 1px;
-    background-color: rgba(230, 198, 86, 0.2);
-  }
-`;
 var InfoText = styled9__default.default.p`
   color: var(--color-text-secondary, #848e9c);
   font-size: 0.875rem;
   text-align: center;
   line-height: 1.5;
 `;
-var AnnotationContainer = styled9__default.default.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  margin-top: 1.5rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid rgba(230, 198, 86, 0.2);
-`;
-var Annotation = styled9__default.default.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 1rem;
-  color: var(--color-text-secondary, #848e9c);
-  font-size: 0.8rem;
-
-  svg {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    margin-top: 2px;
-    color: var(--color-accent, #e6c656);
-  }
-`;
-var AnnotationText = styled9__default.default.span`
-  flex: 1;
-  line-height: 1.4;
-`;
-var AnnotationLabel = styled9__default.default.span`
-  color: var(--color-text, #eaecef);
-  font-weight: 500;
-  margin-right: 0.25rem;
-`;
 var EmailFormContainer = styled9__default.default.div`
   display: flex;
   flex-direction: column;
@@ -9218,8 +9185,7 @@ function PropertyOverview({
                 propertyLocation: location,
                 videoUrl,
                 tokenName,
-                onPhotoClick: onPhotosClick,
-                hideMap: true
+                onPhotoClick: onPhotosClick
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(FeaturesPanel, { children: features.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(AssetFeatureItem, { children: [
@@ -12198,7 +12164,7 @@ function OrderPanel({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Divider2, { children: "\u2193" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Divider, { children: "\u2193" }),
       /* @__PURE__ */ jsxRuntime.jsxs(ReadyChecklist, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(ChecklistTitle, { children: "Get ready to invest" }),
         /* @__PURE__ */ jsxRuntime.jsx(ChecklistSub, { children: "Complete these steps to be first in line" }),
@@ -12372,7 +12338,7 @@ function OrderPanel({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Divider2, { children: "\u2193" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Divider, { children: "\u2193" }),
       /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(CardTopRow, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(CardLabel, { children: ipoStarted ? "You Receive" : "You'll Receive" }),
@@ -12671,7 +12637,7 @@ var DepositButton2 = styled9__default.default.button`
   cursor: pointer;
   font-weight: 500;
 `;
-var Divider2 = styled9__default.default.div`
+var Divider = styled9__default.default.div`
   text-align: center;
   margin: 0.25rem 0;
   color: var(--color-text-secondary);