@loafmarkets/ui 0.1.324 → 0.1.326

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -6885,7 +6885,7 @@ var LoginPopup = ({
6885
6885
  /* @__PURE__ */ jsx("path", { d: "M22 10H18a2 2 0 0 0 0 4h4" })
6886
6886
  ] }),
6887
6887
  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
6888
- /* @__PURE__ */ jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: cryptoFundingLoading ? "Opening Coinbase\u2026" : "Digital Asset Deposit" }),
6888
+ /* @__PURE__ */ jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: cryptoFundingLoading ? "Opening\u2026" : "Digital Asset Deposit" }),
6889
6889
  /* @__PURE__ */ jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Deposit USDC from an exchange or wallet" })
6890
6890
  ] })
6891
6891
  ] }),
@@ -11567,6 +11567,192 @@ var SignInButton = styled9.button`
11567
11567
  background: rgba(240, 185, 11, 0.1);
11568
11568
  }
11569
11569
  `;
11570
+ var slideIn = keyframes`
11571
+ from { transform: translateX(110%); opacity: 0; }
11572
+ to { transform: translateX(0); opacity: 1; }
11573
+ `;
11574
+ var slideOut = keyframes`
11575
+ from { transform: translateX(0); opacity: 1; }
11576
+ to { transform: translateX(110%); opacity: 0; }
11577
+ `;
11578
+ var progressShrink = keyframes`
11579
+ from { width: 100%; }
11580
+ to { width: 0%; }
11581
+ `;
11582
+ var VARIANT_COLORS = {
11583
+ success: { accent: "#0ecb81", icon: "\u2713" },
11584
+ error: { accent: "#f6465d", icon: "\u2715" },
11585
+ sell: { accent: "#f6465d", icon: "\u2713" },
11586
+ info: { accent: "#E6C656", icon: "\u2139" },
11587
+ pending: { accent: "#7EB3E6", icon: "\u25CC" }
11588
+ };
11589
+ var Wrapper2 = styled9.div`
11590
+ position: relative;
11591
+ display: flex;
11592
+ flex-direction: column;
11593
+ gap: 0;
11594
+ width: 340px;
11595
+ background: #0d0f1a;
11596
+ border: 1px solid rgba(255, 255, 255, 0.08);
11597
+ border-radius: 10px;
11598
+ overflow: hidden;
11599
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
11600
+ 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`};
11601
+ pointer-events: all;
11602
+ `;
11603
+ var Body = styled9.div`
11604
+ display: flex;
11605
+ align-items: flex-start;
11606
+ gap: 12px;
11607
+ padding: 14px 16px 12px;
11608
+ `;
11609
+ var IconDot = styled9.div`
11610
+ flex-shrink: 0;
11611
+ width: 28px;
11612
+ height: 28px;
11613
+ border-radius: 50%;
11614
+ background: ${({ $color }) => $color}1a;
11615
+ border: 1px solid ${({ $color }) => $color}55;
11616
+ display: flex;
11617
+ align-items: center;
11618
+ justify-content: center;
11619
+ font-size: 0.75rem;
11620
+ font-weight: 700;
11621
+ color: ${({ $color }) => $color};
11622
+ margin-top: 1px;
11623
+ `;
11624
+ var Content = styled9.div`
11625
+ flex: 1;
11626
+ min-width: 0;
11627
+ `;
11628
+ var Title2 = styled9.p`
11629
+ margin: 0 0 2px;
11630
+ font-size: 0.8rem;
11631
+ font-weight: 600;
11632
+ color: #fff;
11633
+ letter-spacing: 0.01em;
11634
+ `;
11635
+ var Amount = styled9.p`
11636
+ margin: 0 0 6px;
11637
+ font-size: 1.05rem;
11638
+ font-weight: 700;
11639
+ color: #E6C656;
11640
+ letter-spacing: -0.01em;
11641
+ `;
11642
+ var TxRow = styled9.a`
11643
+ display: inline-flex;
11644
+ align-items: center;
11645
+ gap: 5px;
11646
+ font-family: 'IBM Plex Mono', 'Space Mono', monospace;
11647
+ font-size: 0.68rem;
11648
+ color: rgba(255, 255, 255, 0.4);
11649
+ text-decoration: none;
11650
+ transition: color 0.15s;
11651
+ &:hover {
11652
+ color: #7EB3E6;
11653
+ }
11654
+ `;
11655
+ var TxArrow = styled9.span`
11656
+ font-size: 0.6rem;
11657
+ opacity: 0.6;
11658
+ `;
11659
+ var CloseBtn = styled9.button`
11660
+ flex-shrink: 0;
11661
+ background: none;
11662
+ border: none;
11663
+ padding: 2px 4px;
11664
+ cursor: pointer;
11665
+ color: rgba(255, 255, 255, 0.25);
11666
+ font-size: 0.9rem;
11667
+ line-height: 1;
11668
+ transition: color 0.15s;
11669
+ &:hover { color: rgba(255, 255, 255, 0.7); }
11670
+ `;
11671
+ var ProgressBar = styled9.div`
11672
+ height: 2px;
11673
+ background: rgba(255, 255, 255, 0.06);
11674
+ position: relative;
11675
+ &::after {
11676
+ content: '';
11677
+ position: absolute;
11678
+ left: 0;
11679
+ top: 0;
11680
+ height: 100%;
11681
+ background: ${({ $color }) => $color};
11682
+ animation: ${css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
11683
+ }
11684
+ `;
11685
+ var Container = styled9.div`
11686
+ position: fixed;
11687
+ bottom: 24px;
11688
+ right: 24px;
11689
+ z-index: 9999;
11690
+ display: flex;
11691
+ flex-direction: column-reverse;
11692
+ gap: 10px;
11693
+ pointer-events: none;
11694
+ `;
11695
+ var DEFAULT_EXPLORER = "https://sepolia.basescan.org/tx/";
11696
+ function truncateHash(hash) {
11697
+ return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
11698
+ }
11699
+ function ToastItem({ toast, onDismiss }) {
11700
+ const [exiting, setExiting] = useState(false);
11701
+ const timerRef = useRef(null);
11702
+ const dismiss = useCallback(() => {
11703
+ setExiting(true);
11704
+ setTimeout(() => onDismiss(toast.id), 280);
11705
+ }, [onDismiss, toast.id]);
11706
+ useEffect(() => {
11707
+ const duration2 = toast.duration ?? 6e3;
11708
+ if (duration2 > 0) {
11709
+ timerRef.current = setTimeout(dismiss, duration2);
11710
+ }
11711
+ return () => {
11712
+ if (timerRef.current) clearTimeout(timerRef.current);
11713
+ };
11714
+ }, [dismiss, toast.duration]);
11715
+ const { accent, icon } = VARIANT_COLORS[toast.variant];
11716
+ const duration = toast.duration ?? 6e3;
11717
+ const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
11718
+ const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
11719
+ return /* @__PURE__ */ jsxs(Wrapper2, { $exiting: exiting, children: [
11720
+ /* @__PURE__ */ jsxs(Body, { children: [
11721
+ /* @__PURE__ */ jsx(IconDot, { $color: accent, children: icon }),
11722
+ /* @__PURE__ */ jsxs(Content, { children: [
11723
+ /* @__PURE__ */ jsx(Title2, { children: toast.title }),
11724
+ toast.amount && /* @__PURE__ */ jsx(Amount, { children: toast.amount }),
11725
+ toast.txHash && txUrl && /* @__PURE__ */ jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
11726
+ truncateHash(toast.txHash),
11727
+ /* @__PURE__ */ jsx(TxArrow, { children: "\u2197" })
11728
+ ] })
11729
+ ] }),
11730
+ /* @__PURE__ */ jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
11731
+ ] }),
11732
+ duration > 0 && /* @__PURE__ */ jsx(ProgressBar, { $color: accent, $duration: duration })
11733
+ ] });
11734
+ }
11735
+ var ToastContext = createContext(null);
11736
+ function ToastProvider({ children }) {
11737
+ const [toasts, setToasts] = useState([]);
11738
+ const addToast = useCallback((data) => {
11739
+ const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
11740
+ setToasts((prev) => [...prev, { ...data, id }]);
11741
+ return id;
11742
+ }, []);
11743
+ const dismiss = useCallback((id) => {
11744
+ setToasts((prev) => prev.filter((t) => t.id !== id));
11745
+ }, []);
11746
+ return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
11747
+ children,
11748
+ /* @__PURE__ */ jsx(Container, { children: toasts.map((t) => /* @__PURE__ */ jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
11749
+ ] });
11750
+ }
11751
+ function useToast() {
11752
+ const ctx = useContext(ToastContext);
11753
+ if (!ctx) throw new Error("useToast must be used within a ToastProvider");
11754
+ return ctx;
11755
+ }
11570
11756
  function AssetSelectorBar({
11571
11757
  propertyName,
11572
11758
  tokenPrice,
@@ -11854,11 +12040,11 @@ var IPOOptionLocation = styled9.div`
11854
12040
  font-weight: 500;
11855
12041
  }
11856
12042
  `;
11857
- var slideOut = keyframes`
12043
+ var slideOut2 = keyframes`
11858
12044
  0% { transform: translateY(0); opacity: 1; }
11859
12045
  100% { transform: translateY(100%); opacity: 0; }
11860
12046
  `;
11861
- var slideIn = keyframes`
12047
+ var slideIn2 = keyframes`
11862
12048
  0% { transform: translateY(-100%); opacity: 0; }
11863
12049
  100% { transform: translateY(0); opacity: 1; }
11864
12050
  `;
@@ -11871,13 +12057,13 @@ var SlideWrap = styled9.span`
11871
12057
  `;
11872
12058
  var SlideNew = styled9.span`
11873
12059
  display: inline-block;
11874
- animation: ${(props) => props.$animate ? slideIn : "none"} 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
12060
+ animation: ${(props) => props.$animate ? slideIn2 : "none"} 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
11875
12061
  `;
11876
12062
  var SlideOld = styled9.span`
11877
12063
  position: absolute;
11878
12064
  top: 0;
11879
12065
  left: 0;
11880
- animation: ${slideOut} 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
12066
+ animation: ${slideOut2} 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
11881
12067
  `;
11882
12068
  function SlideDigit({ value }) {
11883
12069
  const prevRef = useRef(value);
@@ -11969,7 +12155,7 @@ function OfferingProgressCard({
11969
12155
  }
11970
12156
  if (variant === "home") {
11971
12157
  const isPreLive = !ipoStarted && ipoStatus !== "CLOSED" && ipoStatus !== "CANCELLED";
11972
- return /* @__PURE__ */ jsxs(Container, { style, className, children: [
12158
+ return /* @__PURE__ */ jsxs(Container2, { style, className, children: [
11973
12159
  /* @__PURE__ */ jsxs(Header2, { children: [
11974
12160
  /* @__PURE__ */ jsxs("h3", { children: [
11975
12161
  /* @__PURE__ */ jsx(FaChartLine, {}),
@@ -12051,7 +12237,7 @@ function OfferingProgressCard({
12051
12237
  ] })
12052
12238
  ] });
12053
12239
  }
12054
- return /* @__PURE__ */ jsxs(Container, { style, className, children: [
12240
+ return /* @__PURE__ */ jsxs(Container2, { style, className, children: [
12055
12241
  /* @__PURE__ */ jsxs(Header2, { children: [
12056
12242
  /* @__PURE__ */ jsxs("h3", { children: [
12057
12243
  /* @__PURE__ */ jsx(FaChartLine, {}),
@@ -12152,7 +12338,7 @@ function OfferingProgressCard({
12152
12338
  ] })
12153
12339
  ] });
12154
12340
  }
12155
- var Container = styled9.div`
12341
+ var Container2 = styled9.div`
12156
12342
  background-color: var(--color-card-darker, #111);
12157
12343
  border-radius: 8px;
12158
12344
  padding: 1.5rem;
@@ -12405,192 +12591,6 @@ var HomeSpinner = styled9.span`
12405
12591
  to { transform: rotate(360deg); }
12406
12592
  }
12407
12593
  `;
12408
- var slideIn2 = keyframes`
12409
- from { transform: translateX(110%); opacity: 0; }
12410
- to { transform: translateX(0); opacity: 1; }
12411
- `;
12412
- var slideOut2 = keyframes`
12413
- from { transform: translateX(0); opacity: 1; }
12414
- to { transform: translateX(110%); opacity: 0; }
12415
- `;
12416
- var progressShrink = keyframes`
12417
- from { width: 100%; }
12418
- to { width: 0%; }
12419
- `;
12420
- var VARIANT_COLORS = {
12421
- success: { accent: "#0ecb81", icon: "\u2713" },
12422
- error: { accent: "#f6465d", icon: "\u2715" },
12423
- sell: { accent: "#f6465d", icon: "\u2713" },
12424
- info: { accent: "#E6C656", icon: "\u2139" },
12425
- pending: { accent: "#7EB3E6", icon: "\u25CC" }
12426
- };
12427
- var Wrapper2 = styled9.div`
12428
- position: relative;
12429
- display: flex;
12430
- flex-direction: column;
12431
- gap: 0;
12432
- width: 340px;
12433
- background: #0d0f1a;
12434
- border: 1px solid rgba(255, 255, 255, 0.08);
12435
- border-radius: 10px;
12436
- overflow: hidden;
12437
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
12438
- animation: ${({ $exiting }) => $exiting ? css`${slideOut2} 0.28s cubic-bezier(0.4,0,1,1) forwards` : css`${slideIn2} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
12439
- pointer-events: all;
12440
- `;
12441
- var Body = styled9.div`
12442
- display: flex;
12443
- align-items: flex-start;
12444
- gap: 12px;
12445
- padding: 14px 16px 12px;
12446
- `;
12447
- var IconDot = styled9.div`
12448
- flex-shrink: 0;
12449
- width: 28px;
12450
- height: 28px;
12451
- border-radius: 50%;
12452
- background: ${({ $color }) => $color}1a;
12453
- border: 1px solid ${({ $color }) => $color}55;
12454
- display: flex;
12455
- align-items: center;
12456
- justify-content: center;
12457
- font-size: 0.75rem;
12458
- font-weight: 700;
12459
- color: ${({ $color }) => $color};
12460
- margin-top: 1px;
12461
- `;
12462
- var Content = styled9.div`
12463
- flex: 1;
12464
- min-width: 0;
12465
- `;
12466
- var Title2 = styled9.p`
12467
- margin: 0 0 2px;
12468
- font-size: 0.8rem;
12469
- font-weight: 600;
12470
- color: #fff;
12471
- letter-spacing: 0.01em;
12472
- `;
12473
- var Amount = styled9.p`
12474
- margin: 0 0 6px;
12475
- font-size: 1.05rem;
12476
- font-weight: 700;
12477
- color: #E6C656;
12478
- letter-spacing: -0.01em;
12479
- `;
12480
- var TxRow = styled9.a`
12481
- display: inline-flex;
12482
- align-items: center;
12483
- gap: 5px;
12484
- font-family: 'IBM Plex Mono', 'Space Mono', monospace;
12485
- font-size: 0.68rem;
12486
- color: rgba(255, 255, 255, 0.4);
12487
- text-decoration: none;
12488
- transition: color 0.15s;
12489
- &:hover {
12490
- color: #7EB3E6;
12491
- }
12492
- `;
12493
- var TxArrow = styled9.span`
12494
- font-size: 0.6rem;
12495
- opacity: 0.6;
12496
- `;
12497
- var CloseBtn = styled9.button`
12498
- flex-shrink: 0;
12499
- background: none;
12500
- border: none;
12501
- padding: 2px 4px;
12502
- cursor: pointer;
12503
- color: rgba(255, 255, 255, 0.25);
12504
- font-size: 0.9rem;
12505
- line-height: 1;
12506
- transition: color 0.15s;
12507
- &:hover { color: rgba(255, 255, 255, 0.7); }
12508
- `;
12509
- var ProgressBar = styled9.div`
12510
- height: 2px;
12511
- background: rgba(255, 255, 255, 0.06);
12512
- position: relative;
12513
- &::after {
12514
- content: '';
12515
- position: absolute;
12516
- left: 0;
12517
- top: 0;
12518
- height: 100%;
12519
- background: ${({ $color }) => $color};
12520
- animation: ${css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
12521
- }
12522
- `;
12523
- var Container2 = styled9.div`
12524
- position: fixed;
12525
- bottom: 24px;
12526
- right: 24px;
12527
- z-index: 9999;
12528
- display: flex;
12529
- flex-direction: column-reverse;
12530
- gap: 10px;
12531
- pointer-events: none;
12532
- `;
12533
- var DEFAULT_EXPLORER = "https://sepolia.basescan.org/tx/";
12534
- function truncateHash(hash) {
12535
- return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
12536
- }
12537
- function ToastItem({ toast, onDismiss }) {
12538
- const [exiting, setExiting] = useState(false);
12539
- const timerRef = useRef(null);
12540
- const dismiss = useCallback(() => {
12541
- setExiting(true);
12542
- setTimeout(() => onDismiss(toast.id), 280);
12543
- }, [onDismiss, toast.id]);
12544
- useEffect(() => {
12545
- const duration2 = toast.duration ?? 6e3;
12546
- if (duration2 > 0) {
12547
- timerRef.current = setTimeout(dismiss, duration2);
12548
- }
12549
- return () => {
12550
- if (timerRef.current) clearTimeout(timerRef.current);
12551
- };
12552
- }, [dismiss, toast.duration]);
12553
- const { accent, icon } = VARIANT_COLORS[toast.variant];
12554
- const duration = toast.duration ?? 6e3;
12555
- const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
12556
- const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
12557
- return /* @__PURE__ */ jsxs(Wrapper2, { $exiting: exiting, children: [
12558
- /* @__PURE__ */ jsxs(Body, { children: [
12559
- /* @__PURE__ */ jsx(IconDot, { $color: accent, children: icon }),
12560
- /* @__PURE__ */ jsxs(Content, { children: [
12561
- /* @__PURE__ */ jsx(Title2, { children: toast.title }),
12562
- toast.amount && /* @__PURE__ */ jsx(Amount, { children: toast.amount }),
12563
- toast.txHash && txUrl && /* @__PURE__ */ jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
12564
- truncateHash(toast.txHash),
12565
- /* @__PURE__ */ jsx(TxArrow, { children: "\u2197" })
12566
- ] })
12567
- ] }),
12568
- /* @__PURE__ */ jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
12569
- ] }),
12570
- duration > 0 && /* @__PURE__ */ jsx(ProgressBar, { $color: accent, $duration: duration })
12571
- ] });
12572
- }
12573
- var ToastContext = createContext(null);
12574
- function ToastProvider({ children }) {
12575
- const [toasts, setToasts] = useState([]);
12576
- const addToast = useCallback((data) => {
12577
- const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
12578
- setToasts((prev) => [...prev, { ...data, id }]);
12579
- return id;
12580
- }, []);
12581
- const dismiss = useCallback((id) => {
12582
- setToasts((prev) => prev.filter((t) => t.id !== id));
12583
- }, []);
12584
- return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
12585
- children,
12586
- /* @__PURE__ */ jsx(Container2, { children: toasts.map((t) => /* @__PURE__ */ jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
12587
- ] });
12588
- }
12589
- function useToast() {
12590
- const ctx = useContext(ToastContext);
12591
- if (!ctx) throw new Error("useToast must be used within a ToastProvider");
12592
- return ctx;
12593
- }
12594
12594
  function useCountdown(opensAt) {
12595
12595
  const [now, setNow] = useState(() => Math.floor(Date.now() / 1e3));
12596
12596
  useEffect(() => {
@@ -12639,9 +12639,9 @@ function OrderPanel({
12639
12639
  onDeposit,
12640
12640
  onVerifyIdentity,
12641
12641
  tokenDisplayName,
12642
- tokenSymbol
12642
+ tokenSymbol,
12643
+ toast
12643
12644
  }) {
12644
- const { toast } = useToast();
12645
12645
  const countdown = useCountdown(opensAt);
12646
12646
  const [payInputValue, setPayInputValue] = useState("");
12647
12647
  const [receiveInputValue, setReceiveInputValue] = useState("");
@@ -15344,6 +15344,7 @@ function PropertyBuy({
15344
15344
  newsItems = [],
15345
15345
  newsConnectionStatus
15346
15346
  }) {
15347
+ const { toast } = useToast();
15347
15348
  const [sliderValue, setSliderValue] = useState(0);
15348
15349
  const [availableBalance, setAvailableBalance] = useState(walletUsdcBalance ?? 0);
15349
15350
  const [manualOrderAmount, setManualOrderAmount] = useState(null);
@@ -15577,7 +15578,8 @@ function PropertyBuy({
15577
15578
  hasInsufficientFunds,
15578
15579
  onPlaceAnotherOrder: handlePlaceAnotherOrder,
15579
15580
  onDeposit,
15580
- onVerifyIdentity
15581
+ onVerifyIdentity,
15582
+ toast
15581
15583
  }
15582
15584
  ),
15583
15585
  purchaseError && /* @__PURE__ */ jsx("div", { style: { marginTop: "0.75rem", padding: "0.75rem 1rem", borderRadius: "8px", background: "rgba(246,70,93,0.1)", border: "1px solid rgba(246,70,93,0.3)", color: "#f6465d", fontSize: "0.8rem", fontWeight: 500 }, children: purchaseError })