@loafmarkets/ui 0.1.87 → 0.1.89

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import * as React5 from 'react';
-import React5__default, { createContext, useState, useEffect, useMemo, useCallback, useContext, useRef } from 'react';
+import React5__default, { createContext, useState, useEffect, useCallback, useContext, useMemo, useRef } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -6115,6 +6115,191 @@ var PropertySubheader = React5.forwardRef(
   }
 );
 PropertySubheader.displayName = "PropertySubheader";
+var slideIn = keyframes`
+  from { transform: translateX(110%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+`;
+var slideOut = keyframes`
+  from { transform: translateX(0);    opacity: 1; }
+  to   { transform: translateX(110%); opacity: 0; }
+`;
+var progressShrink = keyframes`
+  from { width: 100%; }
+  to   { width: 0%; }
+`;
+var VARIANT_COLORS = {
+  success: { accent: "#0ecb81", icon: "\u2713" },
+  error: { accent: "#f6465d", icon: "\u2715" },
+  info: { accent: "#E6C656", icon: "\u2139" },
+  pending: { accent: "#7EB3E6", icon: "\u25CC" }
+};
+var Wrapper = styled25.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 340px;
+  background: #0d0f1a;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
+  animation: ${({ $exiting }) => $exiting ? css`${slideOut} 0.28s cubic-bezier(0.4,0,1,1) forwards` : css`${slideIn} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
+  pointer-events: all;
+`;
+var Body = styled25.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px 12px;
+`;
+var IconDot = styled25.div`
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: ${({ $color }) => $color}1a;
+  border: 1px solid ${({ $color }) => $color}55;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: ${({ $color }) => $color};
+  margin-top: 1px;
+`;
+var Content = styled25.div`
+  flex: 1;
+  min-width: 0;
+`;
+var Title = styled25.p`
+  margin: 0 0 2px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #fff;
+  letter-spacing: 0.01em;
+`;
+var Amount = styled25.p`
+  margin: 0 0 6px;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #E6C656;
+  letter-spacing: -0.01em;
+`;
+var TxRow = styled25.a`
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: 'IBM Plex Mono', 'Space Mono', monospace;
+  font-size: 0.68rem;
+  color: rgba(255, 255, 255, 0.4);
+  text-decoration: none;
+  transition: color 0.15s;
+  &:hover {
+    color: #7EB3E6;
+  }
+`;
+var TxArrow = styled25.span`
+  font-size: 0.6rem;
+  opacity: 0.6;
+`;
+var CloseBtn = styled25.button`
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  padding: 2px 4px;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.25);
+  font-size: 0.9rem;
+  line-height: 1;
+  transition: color 0.15s;
+  &:hover { color: rgba(255, 255, 255, 0.7); }
+`;
+var ProgressBar = styled25.div`
+  height: 2px;
+  background: rgba(255, 255, 255, 0.06);
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: ${({ $color }) => $color};
+    animation: ${css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
+  }
+`;
+var Container = styled25.div`
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 10px;
+  pointer-events: none;
+`;
+var DEFAULT_EXPLORER = "https://sepolia.basescan.org/tx/";
+function truncateHash(hash) {
+  return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
+}
+function ToastItem({ toast, onDismiss }) {
+  const [exiting, setExiting] = useState(false);
+  const timerRef = useRef(null);
+  const dismiss = useCallback(() => {
+    setExiting(true);
+    setTimeout(() => onDismiss(toast.id), 280);
+  }, [onDismiss, toast.id]);
+  useEffect(() => {
+    const duration2 = toast.duration ?? 6e3;
+    if (duration2 > 0) {
+      timerRef.current = setTimeout(dismiss, duration2);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [dismiss, toast.duration]);
+  const { accent, icon } = VARIANT_COLORS[toast.variant];
+  const duration = toast.duration ?? 6e3;
+  const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
+  const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
+  return /* @__PURE__ */ jsxs(Wrapper, { $exiting: exiting, children: [
+    /* @__PURE__ */ jsxs(Body, { children: [
+      /* @__PURE__ */ jsx(IconDot, { $color: accent, children: icon }),
+      /* @__PURE__ */ jsxs(Content, { children: [
+        /* @__PURE__ */ jsx(Title, { children: toast.title }),
+        toast.amount && /* @__PURE__ */ jsx(Amount, { children: toast.amount }),
+        toast.txHash && txUrl && /* @__PURE__ */ jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
+          truncateHash(toast.txHash),
+          /* @__PURE__ */ jsx(TxArrow, { children: "\u2197" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
+    ] }),
+    duration > 0 && /* @__PURE__ */ jsx(ProgressBar, { $color: accent, $duration: duration })
+  ] });
+}
+var ToastContext = createContext(null);
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const addToast = useCallback((data) => {
+    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+    setToasts((prev) => [...prev, { ...data, id }]);
+    return id;
+  }, []);
+  const dismiss = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
+    children,
+    /* @__PURE__ */ jsx(Container, { children: toasts.map((t) => /* @__PURE__ */ jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
+  ] });
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
+  return ctx;
+}
 var DEFAULT_LOGO_SRC = Loaf_logo_Banner_default;
 var DEFAULT_LOGO_ALT = "Loaf";
 var OTP_INPUT_LENGTH = 6;
@@ -6142,6 +6327,7 @@ var LoginPopup = ({
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
   const [isSignUp, setIsSignUp] = useState(false);
+  const { toast } = useToast();
   const [fundingAmount] = useState("");
   const [kycLoading, setKycLoading] = useState(false);
   const [showKycWidget, setShowKycWidget] = useState(false);
@@ -6155,6 +6341,11 @@ var LoginPopup = ({
       setView(initialView);
     }
   }, [initialView]);
+  useEffect(() => {
+    if (view === "kyc" && renderKycWidget) {
+      setShowKycWidget(true);
+    }
+  }, [view, renderKycWidget]);
   useEffect(() => {
     if (!transakWidgetUrl) return;
     const handleTransakMessage = (event) => {
@@ -6357,10 +6548,19 @@ var LoginPopup = ({
   };
   const handleKycWidgetResult = (result) => {
     setShowKycWidget(false);
+    onClose();
     if (result.passed) {
-      setView("kyc-success");
+      toast({
+        variant: "success",
+        title: "KYC submitted \u2014 pending review",
+        amount: "Your documents are under review. Please check back in a few minutes."
+      });
     } else {
-      setView("kyc-failed");
+      toast({
+        variant: "error",
+        title: "Verification unsuccessful",
+        amount: "Your identity check didn't pass. Please contact support if you believe this is an error."
+      });
     }
   };
   const handleKycWidgetClose = () => {
@@ -6451,7 +6651,7 @@ var LoginPopup = ({
   if (view === "main") {
     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(Title, { children: [
+      /* @__PURE__ */ jsxs(Title2, { children: [
         /* @__PURE__ */ jsx(LogoContainer3, { children: /* @__PURE__ */ jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
         "Welcome to Loaf"
       ] }),
@@ -6512,7 +6712,7 @@ var LoginPopup = ({
         /* @__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(Title, { children: [
+      /* @__PURE__ */ jsxs(Title2, { children: [
         /* @__PURE__ */ jsx(LogoContainer3, { children: /* @__PURE__ */ jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
         isSignUp ? "Sign up with Email" : "Sign in with Email"
       ] }),
@@ -6551,7 +6751,7 @@ var LoginPopup = ({
         /* @__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(Title, { children: [
+      /* @__PURE__ */ jsxs(Title2, { children: [
         /* @__PURE__ */ jsx(LogoContainer3, { children: /* @__PURE__ */ jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
         "Enter Verification Code"
       ] }),
@@ -6822,7 +7022,7 @@ var CloseButton = styled25.button`
     color: var(--color-accent, #e6c656);
   }
 `;
-var Title = styled25.h2`
+var Title2 = styled25.h2`
   font-size: 1.75rem;
   font-weight: 600;
   color: var(--color-text, #eaecef);
@@ -9629,7 +9829,7 @@ function OfferingProgressCard({
     const interval = setInterval(() => setCountdown(calculateCountdown()), 1e3);
     return () => clearInterval(interval);
   }, [opensAt]);
-  return /* @__PURE__ */ jsxs(Container, { style, className, children: [
+  return /* @__PURE__ */ jsxs(Container2, { style, className, children: [
     /* @__PURE__ */ jsxs(Header2, { children: [
       /* @__PURE__ */ jsxs("h3", { children: [
         /* @__PURE__ */ jsx(FaChartLine, {}),
@@ -9730,7 +9930,7 @@ function OfferingProgressCard({
     ] })
   ] });
 }
-var Container = styled25.div`
+var Container2 = styled25.div`
   background-color: var(--color-card-darker, #111);
   border-radius: 8px;
   padding: 1.5rem;
@@ -10266,191 +10466,6 @@ var LiveIndicatorDot = styled25.span`
     100% { box-shadow: 0 0 0 0 rgba(14,203,129,0); }
   }
 `;
-var slideIn = keyframes`
-  from { transform: translateX(110%); opacity: 0; }
-  to   { transform: translateX(0);    opacity: 1; }
-`;
-var slideOut = keyframes`
-  from { transform: translateX(0);    opacity: 1; }
-  to   { transform: translateX(110%); opacity: 0; }
-`;
-var progressShrink = keyframes`
-  from { width: 100%; }
-  to   { width: 0%; }
-`;
-var VARIANT_COLORS = {
-  success: { accent: "#0ecb81", icon: "\u2713" },
-  error: { accent: "#f6465d", icon: "\u2715" },
-  info: { accent: "#E6C656", icon: "\u2139" },
-  pending: { accent: "#7EB3E6", icon: "\u25CC" }
-};
-var Wrapper = styled25.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  width: 340px;
-  background: #0d0f1a;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
-  animation: ${({ $exiting }) => $exiting ? css`${slideOut} 0.28s cubic-bezier(0.4,0,1,1) forwards` : css`${slideIn} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
-  pointer-events: all;
-`;
-var Body = styled25.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 14px 16px 12px;
-`;
-var IconDot = styled25.div`
-  flex-shrink: 0;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: ${({ $color }) => $color}1a;
-  border: 1px solid ${({ $color }) => $color}55;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: ${({ $color }) => $color};
-  margin-top: 1px;
-`;
-var Content = styled25.div`
-  flex: 1;
-  min-width: 0;
-`;
-var Title2 = styled25.p`
-  margin: 0 0 2px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: #fff;
-  letter-spacing: 0.01em;
-`;
-var Amount = styled25.p`
-  margin: 0 0 6px;
-  font-size: 1.05rem;
-  font-weight: 700;
-  color: #E6C656;
-  letter-spacing: -0.01em;
-`;
-var TxRow = styled25.a`
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-family: 'IBM Plex Mono', 'Space Mono', monospace;
-  font-size: 0.68rem;
-  color: rgba(255, 255, 255, 0.4);
-  text-decoration: none;
-  transition: color 0.15s;
-  &:hover {
-    color: #7EB3E6;
-  }
-`;
-var TxArrow = styled25.span`
-  font-size: 0.6rem;
-  opacity: 0.6;
-`;
-var CloseBtn = styled25.button`
-  flex-shrink: 0;
-  background: none;
-  border: none;
-  padding: 2px 4px;
-  cursor: pointer;
-  color: rgba(255, 255, 255, 0.25);
-  font-size: 0.9rem;
-  line-height: 1;
-  transition: color 0.15s;
-  &:hover { color: rgba(255, 255, 255, 0.7); }
-`;
-var ProgressBar = styled25.div`
-  height: 2px;
-  background: rgba(255, 255, 255, 0.06);
-  position: relative;
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    background: ${({ $color }) => $color};
-    animation: ${css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
-  }
-`;
-var Container2 = styled25.div`
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 10px;
-  pointer-events: none;
-`;
-var DEFAULT_EXPLORER = "https://sepolia.basescan.org/tx/";
-function truncateHash(hash) {
-  return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
-}
-function ToastItem({ toast, onDismiss }) {
-  const [exiting, setExiting] = useState(false);
-  const timerRef = useRef(null);
-  const dismiss = useCallback(() => {
-    setExiting(true);
-    setTimeout(() => onDismiss(toast.id), 280);
-  }, [onDismiss, toast.id]);
-  useEffect(() => {
-    const duration2 = toast.duration ?? 6e3;
-    if (duration2 > 0) {
-      timerRef.current = setTimeout(dismiss, duration2);
-    }
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, [dismiss, toast.duration]);
-  const { accent, icon } = VARIANT_COLORS[toast.variant];
-  const duration = toast.duration ?? 6e3;
-  const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
-  const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
-  return /* @__PURE__ */ jsxs(Wrapper, { $exiting: exiting, children: [
-    /* @__PURE__ */ jsxs(Body, { children: [
-      /* @__PURE__ */ jsx(IconDot, { $color: accent, children: icon }),
-      /* @__PURE__ */ jsxs(Content, { children: [
-        /* @__PURE__ */ jsx(Title2, { children: toast.title }),
-        toast.amount && /* @__PURE__ */ jsx(Amount, { children: toast.amount }),
-        toast.txHash && txUrl && /* @__PURE__ */ jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
-          truncateHash(toast.txHash),
-          /* @__PURE__ */ jsx(TxArrow, { children: "\u2197" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
-    ] }),
-    duration > 0 && /* @__PURE__ */ jsx(ProgressBar, { $color: accent, $duration: duration })
-  ] });
-}
-var ToastContext = createContext(null);
-function ToastProvider({ children }) {
-  const [toasts, setToasts] = useState([]);
-  const addToast = useCallback((data) => {
-    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
-    setToasts((prev) => [...prev, { ...data, id }]);
-    return id;
-  }, []);
-  const dismiss = useCallback((id) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
-    children,
-    /* @__PURE__ */ jsx(Container2, { children: toasts.map((t) => /* @__PURE__ */ jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
-  ] });
-}
-function useToast() {
-  const ctx = useContext(ToastContext);
-  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
-  return ctx;
-}
 function OrderPanel({
   statusLabel,
   statusColor,