@loafmarkets/ui 0.1.347 → 0.1.349

package/dist/index.mjs

@@ -6431,13 +6431,19 @@ var LoginPopup = ({
   renderKycWidget,
   onFundWallet,
   initialView,
-  kycStatus: kycStatusProp
+  kycStatus: kycStatusProp,
+  walletAddress,
+  onSubmitReferralCode
 }) => {
   const [view, setView] = useState(() => initialView ?? "main");
   const [email, setEmail] = useState("");
   const [handle, setHandle] = useState("");
   const [otp, setOtp] = useState(Array(OTP_INPUT_LENGTH).fill(""));
   const [error, setError] = useState("");
+  const [copied, setCopied] = useState(false);
+  const [referralCode, setReferralCode] = useState("");
+  const [referralLoading, setReferralLoading] = useState(false);
+  const [referralError, setReferralError] = useState("");
   const [loading, setLoading] = useState(false);
   const [isSignUp, setIsSignUp] = useState(false);
   const [fundingAmount] = useState("");
@@ -6494,7 +6500,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) {
@@ -6657,7 +6663,7 @@ var LoginPopup = ({
     try {
       await onVerifyEmailCode({ code, email });
       if (isSignUp) {
-        setView("funding");
+        setView(onSubmitReferralCode ? "referral" : "funding");
         setLoading(false);
         return;
       }
@@ -7020,7 +7026,13 @@ var LoginPopup = ({
             /* @__PURE__ */ jsx(OnboardingHeading, { style: { textAlign: "center" }, children: "Deposit Funds" }),
             /* @__PURE__ */ jsx(OnboardingSubtext, { style: { textAlign: "center", marginBottom: "1rem" }, children: "Choose how you'd like to fund your account." }),
             /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
-              /* @__PURE__ */ jsxs(ModalOptionCard, { onClick: handleCryptoFund, disabled: cryptoFundingLoading, children: [
+              /* @__PURE__ */ jsxs(ModalOptionCard, { onClick: () => {
+                if (walletAddress) {
+                  setView("receive");
+                } else {
+                  void handleCryptoFund();
+                }
+              }, disabled: cryptoFundingLoading, children: [
                 /* @__PURE__ */ 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__ */ jsx("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }),
                   /* @__PURE__ */ jsx("path", { d: "M22 10H18a2 2 0 0 0 0 4h4" })
@@ -7052,6 +7064,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__ */ jsx(Overlay2, { onClick: onClose, 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("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__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#e6c87e", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+          /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7", r: "4" }),
+          /* @__PURE__ */ jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
+          /* @__PURE__ */ jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
+        ] }) }),
+        /* @__PURE__ */ jsx(OnboardingHeading, { children: "Do you have a referral code?" }),
+        /* @__PURE__ */ jsx(OnboardingSubtext, { style: { marginBottom: "1.5rem" }, children: "Enter your code to unlock full access, or skip to continue." }),
+        /* @__PURE__ */ jsxs(EmailFormContainer, { style: { width: "100%", marginBottom: 0 }, children: [
+          /* @__PURE__ */ 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__ */ jsx(
+            SubmitButton,
+            {
+              type: "button",
+              onClick: () => void handleReferralSubmit(),
+              disabled: referralLoading || !referralCode.trim(),
+              children: referralLoading ? "Verifying\u2026" : "Apply Code"
+            }
+          ),
+          referralError && /* @__PURE__ */ jsx(StatusMessage, { $error: true, children: referralError })
+        ] }),
+        /* @__PURE__ */ 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__ */ jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+      /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, "aria-label": "Close", 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(BackButton, { onClick: () => setView("funding"), 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__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", paddingTop: "0.5rem" }, children: [
+        /* @__PURE__ */ 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__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#e6c87e", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx("path", { d: "M12 2L12 16M12 16L7 11M12 16L17 11" }),
+          /* @__PURE__ */ jsx("path", { d: "M3 20H21" })
+        ] }) }),
+        /* @__PURE__ */ jsx(OnboardingHeading, { style: { marginBottom: "0.35rem" }, children: "Receive USDC" }),
+        /* @__PURE__ */ 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__ */ jsx("div", { style: { width: 7, height: 7, borderRadius: "50%", background: "#0052FF", flexShrink: 0 } }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "0.72rem", fontWeight: 600, color: "#6b9fff", letterSpacing: "0.02em" }, children: "Base Sepolia" })
+        ] }),
+        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
+            /* @__PURE__ */ jsx("span", { style: {
+              flex: 1,
+              fontFamily: "monospace",
+              fontSize: "0.76rem",
+              color: "#eaecef",
+              wordBreak: "break-all",
+              lineHeight: 1.6
+            }, children: walletAddress }),
+            /* @__PURE__ */ 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__ */ jsx(SubmitButton, { onClick: onClose, style: { marginBottom: "1.1rem" }, children: "Done" }),
+        /* @__PURE__ */ jsxs("div", { style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "0.4rem",
+          color: "rgba(255,255,255,0.28)",
+          fontSize: "0.72rem"
+        }, children: [
+          /* @__PURE__ */ jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Wallet secured by ",
+            /* @__PURE__ */ jsx("strong", { style: { color: "rgba(255,255,255,0.45)", fontWeight: 600 }, children: "Privy" })
+          ] })
+        ] })
+      ] })
+    ] }) });
+  }
   return null;
 };
 var Overlay2 = styled9.div`
@@ -13582,7 +13781,9 @@ function PortfolioActivityPanel({
     }
   };
   const mergedOrderHistory = 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,
@@ -13603,6 +13804,22 @@ function PortfolioActivityPanel({
     }));
     return [...orderHistory, ...mapped].sort((a, b) => b.createdAt - a.createdAt);
   }, [showSubscriptionsTab, offeringOrders, orderHistory]);
+  const sortedOpenOrders = useMemo(
+    () => [...openOrders].sort((a, b) => b.createdAt - a.createdAt),
+    [openOrders]
+  );
+  const sortedOfferingOrders = useMemo(
+    () => [...offeringOrders].sort((a, b) => b.createdAt - a.createdAt),
+    [offeringOrders]
+  );
+  const sortedTradeHistory = useMemo(
+    () => [...tradeHistory].sort((a, b) => b.executedAt - a.executedAt),
+    [tradeHistory]
+  );
+  const sortedTransfers = useMemo(
+    () => [...transfers].sort((a, b) => b.createdAt - a.createdAt),
+    [transfers]
+  );
   const positionsCount = positions.length;
   const openOrdersCount = useMemo(
     () => openOrders.filter((o) => o.status === "OPEN" || o.status === "PARTIALLY_FILLED").length,
@@ -13627,25 +13844,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__ */ jsxs(Container2, { className, style, children: [
     /* @__PURE__ */ jsx(PanelTitle, { children: "Activity" }),
     /* @__PURE__ */ jsxs(TabContainer, { children: [
@@ -17844,10 +18061,13 @@ function ToastProvider({ children }) {
     setToasts((prev) => [...prev, { ...data, id }]);
     return id;
   }, []);
+  const update = useCallback((id, patch) => {
+    setToasts((prev) => prev.map((t) => t.id === id ? { ...t, ...patch } : t));
+  }, []);
   const dismiss = useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast: addToast, update, dismiss }, children: [
     children,
     /* @__PURE__ */ jsx(Container3, { children: toasts.map((t) => /* @__PURE__ */ jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
   ] });