@loafmarkets/ui 0.1.88 → 0.1.89
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.js +203 -193
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +204 -194
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -6141,6 +6141,191 @@ var PropertySubheader = React5__namespace.forwardRef(
|
|
|
6141
6141
|
}
|
|
6142
6142
|
);
|
|
6143
6143
|
PropertySubheader.displayName = "PropertySubheader";
|
|
6144
|
+
var slideIn = styled25.keyframes`
|
|
6145
|
+
from { transform: translateX(110%); opacity: 0; }
|
|
6146
|
+
to { transform: translateX(0); opacity: 1; }
|
|
6147
|
+
`;
|
|
6148
|
+
var slideOut = styled25.keyframes`
|
|
6149
|
+
from { transform: translateX(0); opacity: 1; }
|
|
6150
|
+
to { transform: translateX(110%); opacity: 0; }
|
|
6151
|
+
`;
|
|
6152
|
+
var progressShrink = styled25.keyframes`
|
|
6153
|
+
from { width: 100%; }
|
|
6154
|
+
to { width: 0%; }
|
|
6155
|
+
`;
|
|
6156
|
+
var VARIANT_COLORS = {
|
|
6157
|
+
success: { accent: "#0ecb81", icon: "\u2713" },
|
|
6158
|
+
error: { accent: "#f6465d", icon: "\u2715" },
|
|
6159
|
+
info: { accent: "#E6C656", icon: "\u2139" },
|
|
6160
|
+
pending: { accent: "#7EB3E6", icon: "\u25CC" }
|
|
6161
|
+
};
|
|
6162
|
+
var Wrapper = styled25__default.default.div`
|
|
6163
|
+
position: relative;
|
|
6164
|
+
display: flex;
|
|
6165
|
+
flex-direction: column;
|
|
6166
|
+
gap: 0;
|
|
6167
|
+
width: 340px;
|
|
6168
|
+
background: #0d0f1a;
|
|
6169
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
6170
|
+
border-radius: 10px;
|
|
6171
|
+
overflow: hidden;
|
|
6172
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
|
|
6173
|
+
animation: ${({ $exiting }) => $exiting ? styled25.css`${slideOut} 0.28s cubic-bezier(0.4,0,1,1) forwards` : styled25.css`${slideIn} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
|
|
6174
|
+
pointer-events: all;
|
|
6175
|
+
`;
|
|
6176
|
+
var Body = styled25__default.default.div`
|
|
6177
|
+
display: flex;
|
|
6178
|
+
align-items: flex-start;
|
|
6179
|
+
gap: 12px;
|
|
6180
|
+
padding: 14px 16px 12px;
|
|
6181
|
+
`;
|
|
6182
|
+
var IconDot = styled25__default.default.div`
|
|
6183
|
+
flex-shrink: 0;
|
|
6184
|
+
width: 28px;
|
|
6185
|
+
height: 28px;
|
|
6186
|
+
border-radius: 50%;
|
|
6187
|
+
background: ${({ $color }) => $color}1a;
|
|
6188
|
+
border: 1px solid ${({ $color }) => $color}55;
|
|
6189
|
+
display: flex;
|
|
6190
|
+
align-items: center;
|
|
6191
|
+
justify-content: center;
|
|
6192
|
+
font-size: 0.75rem;
|
|
6193
|
+
font-weight: 700;
|
|
6194
|
+
color: ${({ $color }) => $color};
|
|
6195
|
+
margin-top: 1px;
|
|
6196
|
+
`;
|
|
6197
|
+
var Content = styled25__default.default.div`
|
|
6198
|
+
flex: 1;
|
|
6199
|
+
min-width: 0;
|
|
6200
|
+
`;
|
|
6201
|
+
var Title = styled25__default.default.p`
|
|
6202
|
+
margin: 0 0 2px;
|
|
6203
|
+
font-size: 0.8rem;
|
|
6204
|
+
font-weight: 600;
|
|
6205
|
+
color: #fff;
|
|
6206
|
+
letter-spacing: 0.01em;
|
|
6207
|
+
`;
|
|
6208
|
+
var Amount = styled25__default.default.p`
|
|
6209
|
+
margin: 0 0 6px;
|
|
6210
|
+
font-size: 1.05rem;
|
|
6211
|
+
font-weight: 700;
|
|
6212
|
+
color: #E6C656;
|
|
6213
|
+
letter-spacing: -0.01em;
|
|
6214
|
+
`;
|
|
6215
|
+
var TxRow = styled25__default.default.a`
|
|
6216
|
+
display: inline-flex;
|
|
6217
|
+
align-items: center;
|
|
6218
|
+
gap: 5px;
|
|
6219
|
+
font-family: 'IBM Plex Mono', 'Space Mono', monospace;
|
|
6220
|
+
font-size: 0.68rem;
|
|
6221
|
+
color: rgba(255, 255, 255, 0.4);
|
|
6222
|
+
text-decoration: none;
|
|
6223
|
+
transition: color 0.15s;
|
|
6224
|
+
&:hover {
|
|
6225
|
+
color: #7EB3E6;
|
|
6226
|
+
}
|
|
6227
|
+
`;
|
|
6228
|
+
var TxArrow = styled25__default.default.span`
|
|
6229
|
+
font-size: 0.6rem;
|
|
6230
|
+
opacity: 0.6;
|
|
6231
|
+
`;
|
|
6232
|
+
var CloseBtn = styled25__default.default.button`
|
|
6233
|
+
flex-shrink: 0;
|
|
6234
|
+
background: none;
|
|
6235
|
+
border: none;
|
|
6236
|
+
padding: 2px 4px;
|
|
6237
|
+
cursor: pointer;
|
|
6238
|
+
color: rgba(255, 255, 255, 0.25);
|
|
6239
|
+
font-size: 0.9rem;
|
|
6240
|
+
line-height: 1;
|
|
6241
|
+
transition: color 0.15s;
|
|
6242
|
+
&:hover { color: rgba(255, 255, 255, 0.7); }
|
|
6243
|
+
`;
|
|
6244
|
+
var ProgressBar = styled25__default.default.div`
|
|
6245
|
+
height: 2px;
|
|
6246
|
+
background: rgba(255, 255, 255, 0.06);
|
|
6247
|
+
position: relative;
|
|
6248
|
+
&::after {
|
|
6249
|
+
content: '';
|
|
6250
|
+
position: absolute;
|
|
6251
|
+
left: 0;
|
|
6252
|
+
top: 0;
|
|
6253
|
+
height: 100%;
|
|
6254
|
+
background: ${({ $color }) => $color};
|
|
6255
|
+
animation: ${styled25.css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
|
|
6256
|
+
}
|
|
6257
|
+
`;
|
|
6258
|
+
var Container = styled25__default.default.div`
|
|
6259
|
+
position: fixed;
|
|
6260
|
+
bottom: 24px;
|
|
6261
|
+
right: 24px;
|
|
6262
|
+
z-index: 9999;
|
|
6263
|
+
display: flex;
|
|
6264
|
+
flex-direction: column-reverse;
|
|
6265
|
+
gap: 10px;
|
|
6266
|
+
pointer-events: none;
|
|
6267
|
+
`;
|
|
6268
|
+
var DEFAULT_EXPLORER = "https://sepolia.basescan.org/tx/";
|
|
6269
|
+
function truncateHash(hash) {
|
|
6270
|
+
return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
|
|
6271
|
+
}
|
|
6272
|
+
function ToastItem({ toast, onDismiss }) {
|
|
6273
|
+
const [exiting, setExiting] = React5.useState(false);
|
|
6274
|
+
const timerRef = React5.useRef(null);
|
|
6275
|
+
const dismiss = React5.useCallback(() => {
|
|
6276
|
+
setExiting(true);
|
|
6277
|
+
setTimeout(() => onDismiss(toast.id), 280);
|
|
6278
|
+
}, [onDismiss, toast.id]);
|
|
6279
|
+
React5.useEffect(() => {
|
|
6280
|
+
const duration2 = toast.duration ?? 6e3;
|
|
6281
|
+
if (duration2 > 0) {
|
|
6282
|
+
timerRef.current = setTimeout(dismiss, duration2);
|
|
6283
|
+
}
|
|
6284
|
+
return () => {
|
|
6285
|
+
if (timerRef.current) clearTimeout(timerRef.current);
|
|
6286
|
+
};
|
|
6287
|
+
}, [dismiss, toast.duration]);
|
|
6288
|
+
const { accent, icon } = VARIANT_COLORS[toast.variant];
|
|
6289
|
+
const duration = toast.duration ?? 6e3;
|
|
6290
|
+
const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
|
|
6291
|
+
const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
|
|
6292
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $exiting: exiting, children: [
|
|
6293
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Body, { children: [
|
|
6294
|
+
/* @__PURE__ */ jsxRuntime.jsx(IconDot, { $color: accent, children: icon }),
|
|
6295
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
|
|
6296
|
+
/* @__PURE__ */ jsxRuntime.jsx(Title, { children: toast.title }),
|
|
6297
|
+
toast.amount && /* @__PURE__ */ jsxRuntime.jsx(Amount, { children: toast.amount }),
|
|
6298
|
+
toast.txHash && txUrl && /* @__PURE__ */ jsxRuntime.jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
|
|
6299
|
+
truncateHash(toast.txHash),
|
|
6300
|
+
/* @__PURE__ */ jsxRuntime.jsx(TxArrow, { children: "\u2197" })
|
|
6301
|
+
] })
|
|
6302
|
+
] }),
|
|
6303
|
+
/* @__PURE__ */ jsxRuntime.jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
|
|
6304
|
+
] }),
|
|
6305
|
+
duration > 0 && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { $color: accent, $duration: duration })
|
|
6306
|
+
] });
|
|
6307
|
+
}
|
|
6308
|
+
var ToastContext = React5.createContext(null);
|
|
6309
|
+
function ToastProvider({ children }) {
|
|
6310
|
+
const [toasts, setToasts] = React5.useState([]);
|
|
6311
|
+
const addToast = React5.useCallback((data) => {
|
|
6312
|
+
const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
|
6313
|
+
setToasts((prev) => [...prev, { ...data, id }]);
|
|
6314
|
+
return id;
|
|
6315
|
+
}, []);
|
|
6316
|
+
const dismiss = React5.useCallback((id) => {
|
|
6317
|
+
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
6318
|
+
}, []);
|
|
6319
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
|
|
6320
|
+
children,
|
|
6321
|
+
/* @__PURE__ */ jsxRuntime.jsx(Container, { children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
|
|
6322
|
+
] });
|
|
6323
|
+
}
|
|
6324
|
+
function useToast() {
|
|
6325
|
+
const ctx = React5.useContext(ToastContext);
|
|
6326
|
+
if (!ctx) throw new Error("useToast must be used within a ToastProvider");
|
|
6327
|
+
return ctx;
|
|
6328
|
+
}
|
|
6144
6329
|
var DEFAULT_LOGO_SRC = Loaf_logo_Banner_default;
|
|
6145
6330
|
var DEFAULT_LOGO_ALT = "Loaf";
|
|
6146
6331
|
var OTP_INPUT_LENGTH = 6;
|
|
@@ -6168,6 +6353,7 @@ var LoginPopup = ({
|
|
|
6168
6353
|
const [error, setError] = React5.useState("");
|
|
6169
6354
|
const [loading, setLoading] = React5.useState(false);
|
|
6170
6355
|
const [isSignUp, setIsSignUp] = React5.useState(false);
|
|
6356
|
+
const { toast } = useToast();
|
|
6171
6357
|
const [fundingAmount] = React5.useState("");
|
|
6172
6358
|
const [kycLoading, setKycLoading] = React5.useState(false);
|
|
6173
6359
|
const [showKycWidget, setShowKycWidget] = React5.useState(false);
|
|
@@ -6388,10 +6574,19 @@ var LoginPopup = ({
|
|
|
6388
6574
|
};
|
|
6389
6575
|
const handleKycWidgetResult = (result) => {
|
|
6390
6576
|
setShowKycWidget(false);
|
|
6577
|
+
onClose();
|
|
6391
6578
|
if (result.passed) {
|
|
6392
|
-
|
|
6579
|
+
toast({
|
|
6580
|
+
variant: "success",
|
|
6581
|
+
title: "KYC submitted \u2014 pending review",
|
|
6582
|
+
amount: "Your documents are under review. Please check back in a few minutes."
|
|
6583
|
+
});
|
|
6393
6584
|
} else {
|
|
6394
|
-
|
|
6585
|
+
toast({
|
|
6586
|
+
variant: "error",
|
|
6587
|
+
title: "Verification unsuccessful",
|
|
6588
|
+
amount: "Your identity check didn't pass. Please contact support if you believe this is an error."
|
|
6589
|
+
});
|
|
6395
6590
|
}
|
|
6396
6591
|
};
|
|
6397
6592
|
const handleKycWidgetClose = () => {
|
|
@@ -6482,7 +6677,7 @@ var LoginPopup = ({
|
|
|
6482
6677
|
if (view === "main") {
|
|
6483
6678
|
return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
|
|
6484
6679
|
/* @__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" }) }) }),
|
|
6485
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
6680
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Title2, { children: [
|
|
6486
6681
|
/* @__PURE__ */ jsxRuntime.jsx(LogoContainer3, { children: /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
|
|
6487
6682
|
"Welcome to Loaf"
|
|
6488
6683
|
] }),
|
|
@@ -6543,7 +6738,7 @@ var LoginPopup = ({
|
|
|
6543
6738
|
/* @__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" }) }),
|
|
6544
6739
|
"Back"
|
|
6545
6740
|
] }),
|
|
6546
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
6741
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Title2, { children: [
|
|
6547
6742
|
/* @__PURE__ */ jsxRuntime.jsx(LogoContainer3, { children: /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
|
|
6548
6743
|
isSignUp ? "Sign up with Email" : "Sign in with Email"
|
|
6549
6744
|
] }),
|
|
@@ -6582,7 +6777,7 @@ var LoginPopup = ({
|
|
|
6582
6777
|
/* @__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" }) }),
|
|
6583
6778
|
"Back"
|
|
6584
6779
|
] }),
|
|
6585
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
6780
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Title2, { children: [
|
|
6586
6781
|
/* @__PURE__ */ jsxRuntime.jsx(LogoContainer3, { children: /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
|
|
6587
6782
|
"Enter Verification Code"
|
|
6588
6783
|
] }),
|
|
@@ -6853,7 +7048,7 @@ var CloseButton = styled25__default.default.button`
|
|
|
6853
7048
|
color: var(--color-accent, #e6c656);
|
|
6854
7049
|
}
|
|
6855
7050
|
`;
|
|
6856
|
-
var
|
|
7051
|
+
var Title2 = styled25__default.default.h2`
|
|
6857
7052
|
font-size: 1.75rem;
|
|
6858
7053
|
font-weight: 600;
|
|
6859
7054
|
color: var(--color-text, #eaecef);
|
|
@@ -9660,7 +9855,7 @@ function OfferingProgressCard({
|
|
|
9660
9855
|
const interval = setInterval(() => setCountdown(calculateCountdown()), 1e3);
|
|
9661
9856
|
return () => clearInterval(interval);
|
|
9662
9857
|
}, [opensAt]);
|
|
9663
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
9858
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Container2, { style, className, children: [
|
|
9664
9859
|
/* @__PURE__ */ jsxRuntime.jsxs(Header2, { children: [
|
|
9665
9860
|
/* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
|
|
9666
9861
|
/* @__PURE__ */ jsxRuntime.jsx(fa.FaChartLine, {}),
|
|
@@ -9761,7 +9956,7 @@ function OfferingProgressCard({
|
|
|
9761
9956
|
] })
|
|
9762
9957
|
] });
|
|
9763
9958
|
}
|
|
9764
|
-
var
|
|
9959
|
+
var Container2 = styled25__default.default.div`
|
|
9765
9960
|
background-color: var(--color-card-darker, #111);
|
|
9766
9961
|
border-radius: 8px;
|
|
9767
9962
|
padding: 1.5rem;
|
|
@@ -10297,191 +10492,6 @@ var LiveIndicatorDot = styled25__default.default.span`
|
|
|
10297
10492
|
100% { box-shadow: 0 0 0 0 rgba(14,203,129,0); }
|
|
10298
10493
|
}
|
|
10299
10494
|
`;
|
|
10300
|
-
var slideIn = styled25.keyframes`
|
|
10301
|
-
from { transform: translateX(110%); opacity: 0; }
|
|
10302
|
-
to { transform: translateX(0); opacity: 1; }
|
|
10303
|
-
`;
|
|
10304
|
-
var slideOut = styled25.keyframes`
|
|
10305
|
-
from { transform: translateX(0); opacity: 1; }
|
|
10306
|
-
to { transform: translateX(110%); opacity: 0; }
|
|
10307
|
-
`;
|
|
10308
|
-
var progressShrink = styled25.keyframes`
|
|
10309
|
-
from { width: 100%; }
|
|
10310
|
-
to { width: 0%; }
|
|
10311
|
-
`;
|
|
10312
|
-
var VARIANT_COLORS = {
|
|
10313
|
-
success: { accent: "#0ecb81", icon: "\u2713" },
|
|
10314
|
-
error: { accent: "#f6465d", icon: "\u2715" },
|
|
10315
|
-
info: { accent: "#E6C656", icon: "\u2139" },
|
|
10316
|
-
pending: { accent: "#7EB3E6", icon: "\u25CC" }
|
|
10317
|
-
};
|
|
10318
|
-
var Wrapper = styled25__default.default.div`
|
|
10319
|
-
position: relative;
|
|
10320
|
-
display: flex;
|
|
10321
|
-
flex-direction: column;
|
|
10322
|
-
gap: 0;
|
|
10323
|
-
width: 340px;
|
|
10324
|
-
background: #0d0f1a;
|
|
10325
|
-
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
10326
|
-
border-radius: 10px;
|
|
10327
|
-
overflow: hidden;
|
|
10328
|
-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
|
|
10329
|
-
animation: ${({ $exiting }) => $exiting ? styled25.css`${slideOut} 0.28s cubic-bezier(0.4,0,1,1) forwards` : styled25.css`${slideIn} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
|
|
10330
|
-
pointer-events: all;
|
|
10331
|
-
`;
|
|
10332
|
-
var Body = styled25__default.default.div`
|
|
10333
|
-
display: flex;
|
|
10334
|
-
align-items: flex-start;
|
|
10335
|
-
gap: 12px;
|
|
10336
|
-
padding: 14px 16px 12px;
|
|
10337
|
-
`;
|
|
10338
|
-
var IconDot = styled25__default.default.div`
|
|
10339
|
-
flex-shrink: 0;
|
|
10340
|
-
width: 28px;
|
|
10341
|
-
height: 28px;
|
|
10342
|
-
border-radius: 50%;
|
|
10343
|
-
background: ${({ $color }) => $color}1a;
|
|
10344
|
-
border: 1px solid ${({ $color }) => $color}55;
|
|
10345
|
-
display: flex;
|
|
10346
|
-
align-items: center;
|
|
10347
|
-
justify-content: center;
|
|
10348
|
-
font-size: 0.75rem;
|
|
10349
|
-
font-weight: 700;
|
|
10350
|
-
color: ${({ $color }) => $color};
|
|
10351
|
-
margin-top: 1px;
|
|
10352
|
-
`;
|
|
10353
|
-
var Content = styled25__default.default.div`
|
|
10354
|
-
flex: 1;
|
|
10355
|
-
min-width: 0;
|
|
10356
|
-
`;
|
|
10357
|
-
var Title2 = styled25__default.default.p`
|
|
10358
|
-
margin: 0 0 2px;
|
|
10359
|
-
font-size: 0.8rem;
|
|
10360
|
-
font-weight: 600;
|
|
10361
|
-
color: #fff;
|
|
10362
|
-
letter-spacing: 0.01em;
|
|
10363
|
-
`;
|
|
10364
|
-
var Amount = styled25__default.default.p`
|
|
10365
|
-
margin: 0 0 6px;
|
|
10366
|
-
font-size: 1.05rem;
|
|
10367
|
-
font-weight: 700;
|
|
10368
|
-
color: #E6C656;
|
|
10369
|
-
letter-spacing: -0.01em;
|
|
10370
|
-
`;
|
|
10371
|
-
var TxRow = styled25__default.default.a`
|
|
10372
|
-
display: inline-flex;
|
|
10373
|
-
align-items: center;
|
|
10374
|
-
gap: 5px;
|
|
10375
|
-
font-family: 'IBM Plex Mono', 'Space Mono', monospace;
|
|
10376
|
-
font-size: 0.68rem;
|
|
10377
|
-
color: rgba(255, 255, 255, 0.4);
|
|
10378
|
-
text-decoration: none;
|
|
10379
|
-
transition: color 0.15s;
|
|
10380
|
-
&:hover {
|
|
10381
|
-
color: #7EB3E6;
|
|
10382
|
-
}
|
|
10383
|
-
`;
|
|
10384
|
-
var TxArrow = styled25__default.default.span`
|
|
10385
|
-
font-size: 0.6rem;
|
|
10386
|
-
opacity: 0.6;
|
|
10387
|
-
`;
|
|
10388
|
-
var CloseBtn = styled25__default.default.button`
|
|
10389
|
-
flex-shrink: 0;
|
|
10390
|
-
background: none;
|
|
10391
|
-
border: none;
|
|
10392
|
-
padding: 2px 4px;
|
|
10393
|
-
cursor: pointer;
|
|
10394
|
-
color: rgba(255, 255, 255, 0.25);
|
|
10395
|
-
font-size: 0.9rem;
|
|
10396
|
-
line-height: 1;
|
|
10397
|
-
transition: color 0.15s;
|
|
10398
|
-
&:hover { color: rgba(255, 255, 255, 0.7); }
|
|
10399
|
-
`;
|
|
10400
|
-
var ProgressBar = styled25__default.default.div`
|
|
10401
|
-
height: 2px;
|
|
10402
|
-
background: rgba(255, 255, 255, 0.06);
|
|
10403
|
-
position: relative;
|
|
10404
|
-
&::after {
|
|
10405
|
-
content: '';
|
|
10406
|
-
position: absolute;
|
|
10407
|
-
left: 0;
|
|
10408
|
-
top: 0;
|
|
10409
|
-
height: 100%;
|
|
10410
|
-
background: ${({ $color }) => $color};
|
|
10411
|
-
animation: ${styled25.css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
|
|
10412
|
-
}
|
|
10413
|
-
`;
|
|
10414
|
-
var Container2 = styled25__default.default.div`
|
|
10415
|
-
position: fixed;
|
|
10416
|
-
bottom: 24px;
|
|
10417
|
-
right: 24px;
|
|
10418
|
-
z-index: 9999;
|
|
10419
|
-
display: flex;
|
|
10420
|
-
flex-direction: column-reverse;
|
|
10421
|
-
gap: 10px;
|
|
10422
|
-
pointer-events: none;
|
|
10423
|
-
`;
|
|
10424
|
-
var DEFAULT_EXPLORER = "https://sepolia.basescan.org/tx/";
|
|
10425
|
-
function truncateHash(hash) {
|
|
10426
|
-
return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
|
|
10427
|
-
}
|
|
10428
|
-
function ToastItem({ toast, onDismiss }) {
|
|
10429
|
-
const [exiting, setExiting] = React5.useState(false);
|
|
10430
|
-
const timerRef = React5.useRef(null);
|
|
10431
|
-
const dismiss = React5.useCallback(() => {
|
|
10432
|
-
setExiting(true);
|
|
10433
|
-
setTimeout(() => onDismiss(toast.id), 280);
|
|
10434
|
-
}, [onDismiss, toast.id]);
|
|
10435
|
-
React5.useEffect(() => {
|
|
10436
|
-
const duration2 = toast.duration ?? 6e3;
|
|
10437
|
-
if (duration2 > 0) {
|
|
10438
|
-
timerRef.current = setTimeout(dismiss, duration2);
|
|
10439
|
-
}
|
|
10440
|
-
return () => {
|
|
10441
|
-
if (timerRef.current) clearTimeout(timerRef.current);
|
|
10442
|
-
};
|
|
10443
|
-
}, [dismiss, toast.duration]);
|
|
10444
|
-
const { accent, icon } = VARIANT_COLORS[toast.variant];
|
|
10445
|
-
const duration = toast.duration ?? 6e3;
|
|
10446
|
-
const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
|
|
10447
|
-
const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
|
|
10448
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $exiting: exiting, children: [
|
|
10449
|
-
/* @__PURE__ */ jsxRuntime.jsxs(Body, { children: [
|
|
10450
|
-
/* @__PURE__ */ jsxRuntime.jsx(IconDot, { $color: accent, children: icon }),
|
|
10451
|
-
/* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
|
|
10452
|
-
/* @__PURE__ */ jsxRuntime.jsx(Title2, { children: toast.title }),
|
|
10453
|
-
toast.amount && /* @__PURE__ */ jsxRuntime.jsx(Amount, { children: toast.amount }),
|
|
10454
|
-
toast.txHash && txUrl && /* @__PURE__ */ jsxRuntime.jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
|
|
10455
|
-
truncateHash(toast.txHash),
|
|
10456
|
-
/* @__PURE__ */ jsxRuntime.jsx(TxArrow, { children: "\u2197" })
|
|
10457
|
-
] })
|
|
10458
|
-
] }),
|
|
10459
|
-
/* @__PURE__ */ jsxRuntime.jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
|
|
10460
|
-
] }),
|
|
10461
|
-
duration > 0 && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { $color: accent, $duration: duration })
|
|
10462
|
-
] });
|
|
10463
|
-
}
|
|
10464
|
-
var ToastContext = React5.createContext(null);
|
|
10465
|
-
function ToastProvider({ children }) {
|
|
10466
|
-
const [toasts, setToasts] = React5.useState([]);
|
|
10467
|
-
const addToast = React5.useCallback((data) => {
|
|
10468
|
-
const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
|
10469
|
-
setToasts((prev) => [...prev, { ...data, id }]);
|
|
10470
|
-
return id;
|
|
10471
|
-
}, []);
|
|
10472
|
-
const dismiss = React5.useCallback((id) => {
|
|
10473
|
-
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
10474
|
-
}, []);
|
|
10475
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
|
|
10476
|
-
children,
|
|
10477
|
-
/* @__PURE__ */ jsxRuntime.jsx(Container2, { children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
|
|
10478
|
-
] });
|
|
10479
|
-
}
|
|
10480
|
-
function useToast() {
|
|
10481
|
-
const ctx = React5.useContext(ToastContext);
|
|
10482
|
-
if (!ctx) throw new Error("useToast must be used within a ToastProvider");
|
|
10483
|
-
return ctx;
|
|
10484
|
-
}
|
|
10485
10495
|
function OrderPanel({
|
|
10486
10496
|
statusLabel,
|
|
10487
10497
|
statusColor,
|