@loafmarkets/ui 0.1.347 → 0.1.349

package/dist/index.d.mts

@@ -524,7 +524,7 @@ type DemoLoginResult = {
     success: boolean;
 };
 type DemoLoginHandler = (email: string, handle?: string | null) => Promise<DemoLoginResult | void> | DemoLoginResult | void;
-type LoginPopupView = "main" | "email" | "otp" | "kyc" | "kyc-success" | "kyc-failed" | "funding";
+type LoginPopupView = "main" | "email" | "otp" | "kyc" | "kyc-success" | "kyc-failed" | "funding" | "receive" | "referral";
 type FundWalletParams = {
     amount: string;
     mode?: "crypto" | "fiat";
@@ -580,6 +580,10 @@ type LoginPopupProps = {
     onFundWallet?: (params: FundWalletParams) => Promise<FundWalletResult> | void;
     /** Optional view to show immediately when the popup opens. */
     initialView?: LoginPopupView;
+    /** Wallet address used for the receive funds view (bypasses Privy modal). */
+    walletAddress?: string | null;
+    /** Called when the user submits a referral code during onboarding. */
+    onSubmitReferralCode?: (code: string) => Promise<void> | void;
     /** Handler invoked when the user selects "Sign in with Wallet". */
     onWalletLogin?: () => Promise<void> | void;
     /** Current KYC status — used to show "Resume Verification" when previously started. */
@@ -974,6 +978,8 @@ type ToastData = {
 };
 type ToastContextValue = {
     toast: (data: Omit<ToastData, 'id'>) => string;
+    /** Patch an existing toast in place (e.g. a climbing partial-fill count). No-op if the id is gone. Does not reset the auto-dismiss timer. */
+    update: (id: string, patch: Partial<Omit<ToastData, 'id'>>) => void;
     dismiss: (id: string) => void;
 };
 declare function ToastProvider({ children }: {

package/dist/index.d.ts

@@ -524,7 +524,7 @@ type DemoLoginResult = {
     success: boolean;
 };
 type DemoLoginHandler = (email: string, handle?: string | null) => Promise<DemoLoginResult | void> | DemoLoginResult | void;
-type LoginPopupView = "main" | "email" | "otp" | "kyc" | "kyc-success" | "kyc-failed" | "funding";
+type LoginPopupView = "main" | "email" | "otp" | "kyc" | "kyc-success" | "kyc-failed" | "funding" | "receive" | "referral";
 type FundWalletParams = {
     amount: string;
     mode?: "crypto" | "fiat";
@@ -580,6 +580,10 @@ type LoginPopupProps = {
     onFundWallet?: (params: FundWalletParams) => Promise<FundWalletResult> | void;
     /** Optional view to show immediately when the popup opens. */
     initialView?: LoginPopupView;
+    /** Wallet address used for the receive funds view (bypasses Privy modal). */
+    walletAddress?: string | null;
+    /** Called when the user submits a referral code during onboarding. */
+    onSubmitReferralCode?: (code: string) => Promise<void> | void;
     /** Handler invoked when the user selects "Sign in with Wallet". */
     onWalletLogin?: () => Promise<void> | void;
     /** Current KYC status — used to show "Resume Verification" when previously started. */
@@ -974,6 +978,8 @@ type ToastData = {
 };
 type ToastContextValue = {
     toast: (data: Omit<ToastData, 'id'>) => string;
+    /** Patch an existing toast in place (e.g. a climbing partial-fill count). No-op if the id is gone. Does not reset the auto-dismiss timer. */
+    update: (id: string, patch: Partial<Omit<ToastData, 'id'>>) => void;
     dismiss: (id: string) => void;
 };
 declare function ToastProvider({ children }: {

package/dist/index.js

@@ -6457,13 +6457,19 @@ var LoginPopup = ({
   renderKycWidget,
   onFundWallet,
   initialView,
-  kycStatus: kycStatusProp
+  kycStatus: kycStatusProp,
+  walletAddress,
+  onSubmitReferralCode
 }) => {
   const [view, setView] = React5.useState(() => initialView ?? "main");
   const [email, setEmail] = React5.useState("");
   const [handle, setHandle] = React5.useState("");
   const [otp, setOtp] = React5.useState(Array(OTP_INPUT_LENGTH).fill(""));
   const [error, setError] = React5.useState("");
+  const [copied, setCopied] = React5.useState(false);
+  const [referralCode, setReferralCode] = React5.useState("");
+  const [referralLoading, setReferralLoading] = React5.useState(false);
+  const [referralError, setReferralError] = React5.useState("");
   const [loading, setLoading] = React5.useState(false);
   const [isSignUp, setIsSignUp] = React5.useState(false);
   const [fundingAmount] = React5.useState("");
@@ -6520,7 +6526,7 @@ var LoginPopup = ({
     if (suppressAutoCloseRef.current) {
       return;
     }
-    if (view === "kyc" || view === "kyc-success" || view === "kyc-failed" || view === "funding") {
+    if (view === "kyc" || view === "kyc-success" || view === "kyc-failed" || view === "funding" || view === "receive" || view === "referral") {
       return;
     }
     if (isAuthenticated || currentUser) {
@@ -6683,7 +6689,7 @@ var LoginPopup = ({
     try {
       await onVerifyEmailCode({ code, email });
       if (isSignUp) {
-        setView("funding");
+        setView(onSubmitReferralCode ? "referral" : "funding");
         setLoading(false);
         return;
       }
@@ -7046,7 +7052,13 @@ var LoginPopup = ({
             /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { style: { textAlign: "center" }, children: "Deposit Funds" }),
             /* @__PURE__ */ jsxRuntime.jsx(OnboardingSubtext, { style: { textAlign: "center", marginBottom: "1rem" }, children: "Choose how you'd like to fund your account." }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ModalOptionCard, { onClick: handleCryptoFund, disabled: cryptoFundingLoading, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ModalOptionCard, { onClick: () => {
+                if (walletAddress) {
+                  setView("receive");
+                } else {
+                  void handleCryptoFund();
+                }
+              }, disabled: cryptoFundingLoading, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", style: { color: "rgba(255,255,255,0.6)", flexShrink: 0 }, children: [
                   /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }),
                   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 10H18a2 2 0 0 0 0 4h4" })
@@ -7078,6 +7090,193 @@ var LoginPopup = ({
       }
     ) });
   }
+  if (view === "referral") {
+    const handleReferralSubmit = async () => {
+      const trimmed = referralCode.trim();
+      if (!trimmed) {
+        setReferralError("Please enter a referral code");
+        return;
+      }
+      setReferralError("");
+      setReferralLoading(true);
+      try {
+        await onSubmitReferralCode?.(trimmed);
+        setView("funding");
+      } catch (err) {
+        setReferralError(err instanceof Error ? err.message : "Invalid referral code. Please try again.");
+      } finally {
+        setReferralLoading(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: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          width: 52,
+          height: 52,
+          borderRadius: 14,
+          background: "linear-gradient(135deg, rgba(230,200,126,0.15) 0%, rgba(230,200,126,0.08) 100%)",
+          border: "1px solid rgba(230,200,126,0.25)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginBottom: "1.1rem"
+        }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#e6c87e", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "7", r: "4" }),
+          /* @__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(OnboardingSubtext, { style: { marginBottom: "1.5rem" }, children: "Enter your code to unlock full access, or skip to continue." }),
+        /* @__PURE__ */ jsxRuntime.jsxs(EmailFormContainer, { style: { width: "100%", marginBottom: 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            EmailInput,
+            {
+              type: "text",
+              placeholder: "e.g. LOAF-XXXX",
+              value: referralCode,
+              onChange: (e) => {
+                setReferralCode(e.target.value.toUpperCase());
+                setReferralError("");
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter") void handleReferralSubmit();
+              },
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SubmitButton,
+            {
+              type: "button",
+              onClick: () => void handleReferralSubmit(),
+              disabled: referralLoading || !referralCode.trim(),
+              children: referralLoading ? "Verifying\u2026" : "Apply Code"
+            }
+          ),
+          referralError && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: referralError })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          OnboardingSkipButton,
+          {
+            type: "button",
+            onClick: () => setView("funding"),
+            style: { marginTop: "0.75rem" },
+            children: "Skip for now"
+          }
+        )
+      ] })
+    ] }) });
+  }
+  if (view === "receive") {
+    const handleCopy = () => {
+      if (walletAddress) {
+        navigator.clipboard.writeText(walletAddress).then(() => {
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2e3);
+        }).catch(() => {
+        });
+      }
+    };
+    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", 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(BackButton, { onClick: () => setView("funding"), 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.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", paddingTop: "0.5rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          width: 52,
+          height: 52,
+          borderRadius: 14,
+          background: "linear-gradient(135deg, rgba(230,200,126,0.15) 0%, rgba(230,200,126,0.08) 100%)",
+          border: "1px solid rgba(230,200,126,0.25)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginBottom: "1.1rem"
+        }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#e6c87e", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2L12 16M12 16L7 11M12 16L17 11" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 20H21" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { style: { marginBottom: "0.35rem" }, children: "Receive USDC" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "0.35rem",
+          background: "rgba(0,82,255,0.12)",
+          border: "1px solid rgba(0,82,255,0.3)",
+          borderRadius: 20,
+          padding: "0.2rem 0.65rem",
+          marginBottom: "1.25rem"
+        }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 7, height: 7, borderRadius: "50%", background: "#0052FF", flexShrink: 0 } }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.72rem", fontWeight: 600, color: "#6b9fff", letterSpacing: "0.02em" }, children: "Base Sepolia" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: "0.82rem", color: "rgba(255,255,255,0.5)", textAlign: "center", marginBottom: "1.1rem", lineHeight: 1.5, maxWidth: 320 }, children: [
+          "Send ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "rgba(255,255,255,0.8)" }, children: "USDC" }),
+          " on Base Sepolia to the address below. Only send on this network."
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+          width: "100%",
+          background: "rgba(255,255,255,0.03)",
+          border: "1px solid rgba(255,255,255,0.09)",
+          borderRadius: 10,
+          padding: "0.85rem 1rem",
+          marginBottom: "0.75rem"
+        }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.65rem", color: "rgba(255,255,255,0.35)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: "0.4rem", fontWeight: 600 }, children: "Your wallet address" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+              flex: 1,
+              fontFamily: "monospace",
+              fontSize: "0.76rem",
+              color: "#eaecef",
+              wordBreak: "break-all",
+              lineHeight: 1.6
+            }, children: walletAddress }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleCopy,
+                style: {
+                  background: copied ? "rgba(14,203,129,0.15)" : "rgba(230,200,126,0.1)",
+                  border: "1px solid " + (copied ? "rgba(14,203,129,0.35)" : "rgba(230,200,126,0.3)"),
+                  borderRadius: 6,
+                  padding: "0.4rem 0.8rem",
+                  color: copied ? "#0ecb81" : "#e6c87e",
+                  fontSize: "0.78rem",
+                  fontWeight: 600,
+                  cursor: "pointer",
+                  whiteSpace: "nowrap",
+                  flexShrink: 0,
+                  transition: "all 0.15s ease"
+                },
+                children: copied ? "\u2713 Copied" : "Copy"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, { onClick: onClose, style: { marginBottom: "1.1rem" }, children: "Done" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "0.4rem",
+          color: "rgba(255,255,255,0.28)",
+          fontSize: "0.72rem"
+        }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "Wallet secured by ",
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "rgba(255,255,255,0.45)", fontWeight: 600 }, children: "Privy" })
+          ] })
+        ] })
+      ] })
+    ] }) });
+  }
   return null;
 };
 var Overlay2 = styled9__default.default.div`
@@ -13608,7 +13807,9 @@ function PortfolioActivityPanel({
     }
   };
   const mergedOrderHistory = React5.useMemo(() => {
-    if (showSubscriptionsTab || offeringOrders.length === 0) return orderHistory;
+    if (showSubscriptionsTab || offeringOrders.length === 0) {
+      return [...orderHistory].sort((a, b) => b.createdAt - a.createdAt);
+    }
     const mapped = offeringOrders.map((o, i) => ({
       id: o.ipoOrderId ?? -(i + 1),
       propertyId: 0,
@@ -13629,6 +13830,22 @@ function PortfolioActivityPanel({
     }));
     return [...orderHistory, ...mapped].sort((a, b) => b.createdAt - a.createdAt);
   }, [showSubscriptionsTab, offeringOrders, orderHistory]);
+  const sortedOpenOrders = React5.useMemo(
+    () => [...openOrders].sort((a, b) => b.createdAt - a.createdAt),
+    [openOrders]
+  );
+  const sortedOfferingOrders = React5.useMemo(
+    () => [...offeringOrders].sort((a, b) => b.createdAt - a.createdAt),
+    [offeringOrders]
+  );
+  const sortedTradeHistory = React5.useMemo(
+    () => [...tradeHistory].sort((a, b) => b.executedAt - a.executedAt),
+    [tradeHistory]
+  );
+  const sortedTransfers = React5.useMemo(
+    () => [...transfers].sort((a, b) => b.createdAt - a.createdAt),
+    [transfers]
+  );
   const positionsCount = positions.length;
   const openOrdersCount = React5.useMemo(
     () => openOrders.filter((o) => o.status === "OPEN" || o.status === "PARTIALLY_FILLED").length,
@@ -13653,25 +13870,25 @@ function PortfolioActivityPanel({
   const activeDataLength = (() => {
     switch (activeTab) {
       case "subscriptions":
-        return offeringOrders.length;
+        return sortedOfferingOrders.length;
       case "open-orders":
-        return openOrders.length;
+        return sortedOpenOrders.length;
       case "orders":
         return mergedOrderHistory.length;
       case "trades":
-        return tradeHistory.length;
+        return sortedTradeHistory.length;
       case "transfers":
-        return transfers.length;
+        return sortedTransfers.length;
       default:
         return 0;
     }
   })();
   const totalPages = Math.ceil(activeDataLength / pageSize);
-  const pagedOfferingOrders = offeringOrders.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
-  const pagedOpenOrders = openOrders.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
+  const pagedOfferingOrders = sortedOfferingOrders.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
+  const pagedOpenOrders = sortedOpenOrders.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
   const pagedOrderHistory = mergedOrderHistory.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
-  const pagedTradeHistory = tradeHistory.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
-  const pagedTransfers = transfers.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
+  const pagedTradeHistory = sortedTradeHistory.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
+  const pagedTransfers = sortedTransfers.slice(currentPage * pageSize, (currentPage + 1) * pageSize);
   return /* @__PURE__ */ jsxRuntime.jsxs(Container2, { className, style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PanelTitle, { children: "Activity" }),
     /* @__PURE__ */ jsxRuntime.jsxs(TabContainer, { children: [
@@ -17870,10 +18087,13 @@ function ToastProvider({ children }) {
     setToasts((prev) => [...prev, { ...data, id }]);
     return id;
   }, []);
+  const update = React5.useCallback((id, patch) => {
+    setToasts((prev) => prev.map((t) => t.id === id ? { ...t, ...patch } : t));
+  }, []);
   const dismiss = React5.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast: addToast, update, dismiss }, children: [
     children,
     /* @__PURE__ */ jsxRuntime.jsx(Container3, { children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
   ] });