@hyperbridge/ui 0.0.13 → 0.0.14
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.d.mts +2 -0
- package/dist/index.mjs +195 -185
- package/package.json +3 -3
package/dist/index.d.mts
CHANGED
|
@@ -601,6 +601,8 @@ type TimerProps = {
|
|
|
601
601
|
seconds: number;
|
|
602
602
|
progress: number;
|
|
603
603
|
severity?: "default" | "warning";
|
|
604
|
+
tooltipContent?: string;
|
|
605
|
+
timerMessage?: string;
|
|
604
606
|
};
|
|
605
607
|
declare function TransactionTimer(props: TimerProps): react_jsx_runtime.JSX.Element;
|
|
606
608
|
declare function TimerWrap(props: {
|
package/dist/index.mjs
CHANGED
|
@@ -3244,8 +3244,61 @@ function Progress(_a) {
|
|
|
3244
3244
|
);
|
|
3245
3245
|
}
|
|
3246
3246
|
|
|
3247
|
-
// src/
|
|
3247
|
+
// src/@/ui/tooltip.tsx
|
|
3248
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
3248
3249
|
import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
3250
|
+
function TooltipProvider(_a) {
|
|
3251
|
+
var _b = _a, {
|
|
3252
|
+
delayDuration = 0
|
|
3253
|
+
} = _b, props = __objRest(_b, [
|
|
3254
|
+
"delayDuration"
|
|
3255
|
+
]);
|
|
3256
|
+
return /* @__PURE__ */ jsx35(
|
|
3257
|
+
TooltipPrimitive.Provider,
|
|
3258
|
+
__spreadValues({
|
|
3259
|
+
"data-slot": "tooltip-provider",
|
|
3260
|
+
delayDuration
|
|
3261
|
+
}, props)
|
|
3262
|
+
);
|
|
3263
|
+
}
|
|
3264
|
+
function Tooltip(_a) {
|
|
3265
|
+
var props = __objRest(_a, []);
|
|
3266
|
+
return /* @__PURE__ */ jsx35(TooltipProvider, { children: /* @__PURE__ */ jsx35(TooltipPrimitive.Root, __spreadValues({ "data-slot": "tooltip" }, props)) });
|
|
3267
|
+
}
|
|
3268
|
+
function TooltipTrigger(_a) {
|
|
3269
|
+
var props = __objRest(_a, []);
|
|
3270
|
+
return /* @__PURE__ */ jsx35(TooltipPrimitive.Trigger, __spreadValues({ "data-slot": "tooltip-trigger" }, props));
|
|
3271
|
+
}
|
|
3272
|
+
function TooltipContent(_a) {
|
|
3273
|
+
var _b = _a, {
|
|
3274
|
+
className,
|
|
3275
|
+
sideOffset = 0,
|
|
3276
|
+
children
|
|
3277
|
+
} = _b, props = __objRest(_b, [
|
|
3278
|
+
"className",
|
|
3279
|
+
"sideOffset",
|
|
3280
|
+
"children"
|
|
3281
|
+
]);
|
|
3282
|
+
return /* @__PURE__ */ jsx35(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs24(
|
|
3283
|
+
TooltipPrimitive.Content,
|
|
3284
|
+
__spreadProps(__spreadValues({
|
|
3285
|
+
"data-slot": "tooltip-content",
|
|
3286
|
+
sideOffset,
|
|
3287
|
+
className: cn(
|
|
3288
|
+
"bg-brand-black-600 text-brand-black-100 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
|
|
3289
|
+
className
|
|
3290
|
+
)
|
|
3291
|
+
}, props), {
|
|
3292
|
+
children: [
|
|
3293
|
+
children,
|
|
3294
|
+
/* @__PURE__ */ jsx35(TooltipPrimitive.Arrow, { className: "bg-brand-black-600 fill-brand-black-600 z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
|
|
3295
|
+
]
|
|
3296
|
+
})
|
|
3297
|
+
) });
|
|
3298
|
+
}
|
|
3299
|
+
|
|
3300
|
+
// src/components/molecules/timeline.tsx
|
|
3301
|
+
import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
3249
3302
|
var StatusTextMap = {
|
|
3250
3303
|
processing: "Processing",
|
|
3251
3304
|
upcoming: "Upcoming",
|
|
@@ -3258,12 +3311,12 @@ function TimelineItem(props) {
|
|
|
3258
3311
|
const id = React13.useId();
|
|
3259
3312
|
const layoutId = `${id}/${caption}/content-2`;
|
|
3260
3313
|
const hideTime = durationMode === "none";
|
|
3261
|
-
return /* @__PURE__ */
|
|
3314
|
+
return /* @__PURE__ */ jsx36(
|
|
3262
3315
|
motion3.li,
|
|
3263
3316
|
{
|
|
3264
3317
|
"data-process-status": processingStatus,
|
|
3265
3318
|
className: "block bg-brand-black-350 cursor-default select-none font-medium text-brand-white-500",
|
|
3266
|
-
children: /* @__PURE__ */
|
|
3319
|
+
children: /* @__PURE__ */ jsxs25(
|
|
3267
3320
|
motion3.div,
|
|
3268
3321
|
{
|
|
3269
3322
|
initial: { opacity: 0.5 },
|
|
@@ -3272,7 +3325,7 @@ function TimelineItem(props) {
|
|
|
3272
3325
|
},
|
|
3273
3326
|
className: "flex h-[3.5rem] items-center gap-[0.86rem] py-[0.5625rem] px-[0.75rem] ",
|
|
3274
3327
|
children: [
|
|
3275
|
-
props.level === 0 ? /* @__PURE__ */
|
|
3328
|
+
props.level === 0 ? /* @__PURE__ */ jsx36(BadgeIcon, __spreadValues({}, props.badge)) : /* @__PURE__ */ jsx36(
|
|
3276
3329
|
IconButton,
|
|
3277
3330
|
{
|
|
3278
3331
|
variant: "level_2",
|
|
@@ -3282,7 +3335,7 @@ function TimelineItem(props) {
|
|
|
3282
3335
|
style: {
|
|
3283
3336
|
boxShadow: "0 4px 24px 0 rgba(255, 255, 255, 0.05) inset"
|
|
3284
3337
|
},
|
|
3285
|
-
children: /* @__PURE__ */
|
|
3338
|
+
children: /* @__PURE__ */ jsx36(
|
|
3286
3339
|
"span",
|
|
3287
3340
|
{
|
|
3288
3341
|
className: cn(
|
|
@@ -3296,9 +3349,9 @@ function TimelineItem(props) {
|
|
|
3296
3349
|
)
|
|
3297
3350
|
}
|
|
3298
3351
|
),
|
|
3299
|
-
/* @__PURE__ */
|
|
3300
|
-
/* @__PURE__ */
|
|
3301
|
-
/* @__PURE__ */
|
|
3352
|
+
/* @__PURE__ */ jsxs25("div", { className: "flex flex-col flex-1 gap-[calc(4/16rem)]", children: [
|
|
3353
|
+
/* @__PURE__ */ jsx36("div", { className: "text-brand-white-500 text-[1rem] h-[1.25rem]", children: caption }),
|
|
3354
|
+
/* @__PURE__ */ jsx36("div", { className: "text-xs h-[1rem] text-brand-black-100", children: processingStatus === "completed" ? ((_a = props.data) == null ? void 0 : _a.transactionUrl) ? /* @__PURE__ */ jsxs25(
|
|
3302
3355
|
"a",
|
|
3303
3356
|
{
|
|
3304
3357
|
href: props.data.transactionUrl,
|
|
@@ -3306,14 +3359,14 @@ function TimelineItem(props) {
|
|
|
3306
3359
|
target: "_blank",
|
|
3307
3360
|
rel: "noopener noreferrer",
|
|
3308
3361
|
children: [
|
|
3309
|
-
/* @__PURE__ */
|
|
3310
|
-
/* @__PURE__ */
|
|
3362
|
+
/* @__PURE__ */ jsx36("span", { children: "View in explorer " }),
|
|
3363
|
+
/* @__PURE__ */ jsx36(ArrowUpRight_default, { width: "0.75rem", height: "0.75rem" })
|
|
3311
3364
|
]
|
|
3312
3365
|
}
|
|
3313
|
-
) : /* @__PURE__ */
|
|
3366
|
+
) : /* @__PURE__ */ jsx36("span", { children: props.secondary }) : /* @__PURE__ */ jsx36("span", { children: (_b = props == null ? void 0 : props.secondary) != null ? _b : StatusTextMap[processingStatus] }) })
|
|
3314
3367
|
] }),
|
|
3315
|
-
/* @__PURE__ */
|
|
3316
|
-
processingStatus === "completed" ? /* @__PURE__ */
|
|
3368
|
+
/* @__PURE__ */ jsxs25(AnimatePresence2, { children: [
|
|
3369
|
+
processingStatus === "completed" ? /* @__PURE__ */ jsxs25(
|
|
3317
3370
|
motion3.div,
|
|
3318
3371
|
{
|
|
3319
3372
|
layoutId,
|
|
@@ -3322,8 +3375,8 @@ function TimelineItem(props) {
|
|
|
3322
3375
|
exit: { x: 10, opacity: 0 },
|
|
3323
3376
|
className: "flex gap-[calc(8rem/16)] items-center",
|
|
3324
3377
|
children: [
|
|
3325
|
-
!hideTime && /* @__PURE__ */
|
|
3326
|
-
/* @__PURE__ */
|
|
3378
|
+
!hideTime && /* @__PURE__ */ jsx36("span", { className: "text-[calc(13rem/16)] text-brand-black-100", children: (_c = props == null ? void 0 : props.data) == null ? void 0 : _c.completedIn }),
|
|
3379
|
+
/* @__PURE__ */ jsx36(
|
|
3327
3380
|
Check_default,
|
|
3328
3381
|
{
|
|
3329
3382
|
height: "1rem",
|
|
@@ -3334,7 +3387,7 @@ function TimelineItem(props) {
|
|
|
3334
3387
|
]
|
|
3335
3388
|
}
|
|
3336
3389
|
) : null,
|
|
3337
|
-
processingStatus === "processing" ? /* @__PURE__ */
|
|
3390
|
+
processingStatus === "processing" ? /* @__PURE__ */ jsxs25(
|
|
3338
3391
|
motion3.div,
|
|
3339
3392
|
{
|
|
3340
3393
|
initial: { x: 10, opacity: 0 },
|
|
@@ -3343,8 +3396,8 @@ function TimelineItem(props) {
|
|
|
3343
3396
|
layoutId,
|
|
3344
3397
|
className: "flex gap-[calc(10rem/16)] items-center",
|
|
3345
3398
|
children: [
|
|
3346
|
-
!hideTime && /* @__PURE__ */
|
|
3347
|
-
/* @__PURE__ */
|
|
3399
|
+
!hideTime && /* @__PURE__ */ jsx36("span", { className: "text-[calc(13rem/16)]", children: (_d = props == null ? void 0 : props.data) == null ? void 0 : _d.eta }),
|
|
3400
|
+
/* @__PURE__ */ jsx36(
|
|
3348
3401
|
Loader2,
|
|
3349
3402
|
{
|
|
3350
3403
|
size: "1rem",
|
|
@@ -3362,13 +3415,13 @@ function TimelineItem(props) {
|
|
|
3362
3415
|
);
|
|
3363
3416
|
}
|
|
3364
3417
|
function TimelineListGroup(props) {
|
|
3365
|
-
return /* @__PURE__ */
|
|
3418
|
+
return /* @__PURE__ */ jsx36("ul", { className: cn("flex flex-col overflow-hidden"), children: props.children });
|
|
3366
3419
|
}
|
|
3367
3420
|
function TimelineList(props) {
|
|
3368
|
-
return /* @__PURE__ */
|
|
3421
|
+
return /* @__PURE__ */ jsx36("ul", { className: "flex flex-col", children: props.children });
|
|
3369
3422
|
}
|
|
3370
3423
|
var TimelineRoot = React13.forwardRef((props, ref) => {
|
|
3371
|
-
return /* @__PURE__ */
|
|
3424
|
+
return /* @__PURE__ */ jsx36(
|
|
3372
3425
|
"ul",
|
|
3373
3426
|
__spreadProps(__spreadValues({
|
|
3374
3427
|
ref
|
|
@@ -3387,9 +3440,16 @@ var trackColorMap = {
|
|
|
3387
3440
|
default: "var(--color-brand-black-100)"
|
|
3388
3441
|
};
|
|
3389
3442
|
function TransactionTimer(props) {
|
|
3390
|
-
const {
|
|
3391
|
-
|
|
3392
|
-
|
|
3443
|
+
const {
|
|
3444
|
+
mins,
|
|
3445
|
+
hours,
|
|
3446
|
+
seconds,
|
|
3447
|
+
severity = "warning",
|
|
3448
|
+
tooltipContent,
|
|
3449
|
+
timerMessage = "Transaction will timeout in"
|
|
3450
|
+
} = props;
|
|
3451
|
+
return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-[calc(6rem/16)]", children: [
|
|
3452
|
+
/* @__PURE__ */ jsxs25(
|
|
3393
3453
|
"div",
|
|
3394
3454
|
{
|
|
3395
3455
|
className: cn(
|
|
@@ -3400,19 +3460,22 @@ function TransactionTimer(props) {
|
|
|
3400
3460
|
}
|
|
3401
3461
|
),
|
|
3402
3462
|
children: [
|
|
3403
|
-
/* @__PURE__ */
|
|
3404
|
-
/* @__PURE__ */
|
|
3463
|
+
/* @__PURE__ */ jsx36("span", { children: timerMessage }),
|
|
3464
|
+
/* @__PURE__ */ jsxs25("span", { className: "text-brand-white-500", children: [
|
|
3405
3465
|
String(hours).padStart(2, "0"),
|
|
3406
3466
|
":",
|
|
3407
3467
|
String(mins).padStart(2, "0"),
|
|
3408
3468
|
":",
|
|
3409
3469
|
String(seconds).padStart(2, "0")
|
|
3410
3470
|
] }),
|
|
3411
|
-
/* @__PURE__ */
|
|
3471
|
+
tooltipContent && /* @__PURE__ */ jsx36(TooltipProvider, { children: /* @__PURE__ */ jsxs25(Tooltip, { children: [
|
|
3472
|
+
/* @__PURE__ */ jsx36(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx36("span", { children: /* @__PURE__ */ jsx36(CircleInfo_default, { width: "1em", height: "1em" }) }) }),
|
|
3473
|
+
/* @__PURE__ */ jsx36(TooltipContent, { children: /* @__PURE__ */ jsx36("p", { children: tooltipContent }) })
|
|
3474
|
+
] }) })
|
|
3412
3475
|
]
|
|
3413
3476
|
}
|
|
3414
3477
|
),
|
|
3415
|
-
/* @__PURE__ */
|
|
3478
|
+
/* @__PURE__ */ jsx36(
|
|
3416
3479
|
Progress,
|
|
3417
3480
|
{
|
|
3418
3481
|
value: props.progress,
|
|
@@ -3426,7 +3489,7 @@ function TransactionTimer(props) {
|
|
|
3426
3489
|
}
|
|
3427
3490
|
function TimerWrap(props) {
|
|
3428
3491
|
const show = props.reveal;
|
|
3429
|
-
return /* @__PURE__ */
|
|
3492
|
+
return /* @__PURE__ */ jsxs25(
|
|
3430
3493
|
motion3.div,
|
|
3431
3494
|
{
|
|
3432
3495
|
initial: { paddingTop: 0 },
|
|
@@ -3436,7 +3499,7 @@ function TimerWrap(props) {
|
|
|
3436
3499
|
},
|
|
3437
3500
|
className: "flex flex-col items-stretch justify-start relative",
|
|
3438
3501
|
children: [
|
|
3439
|
-
/* @__PURE__ */
|
|
3502
|
+
/* @__PURE__ */ jsx36(
|
|
3440
3503
|
"div",
|
|
3441
3504
|
{
|
|
3442
3505
|
className: cn(
|
|
@@ -3446,7 +3509,7 @@ function TimerWrap(props) {
|
|
|
3446
3509
|
children: props.Timer
|
|
3447
3510
|
}
|
|
3448
3511
|
),
|
|
3449
|
-
/* @__PURE__ */
|
|
3512
|
+
/* @__PURE__ */ jsx36(
|
|
3450
3513
|
Slot9,
|
|
3451
3514
|
{
|
|
3452
3515
|
className: cn("min-h-[calc(56rem/11)] z-20 relative !rounded-[1rem]", {
|
|
@@ -3461,7 +3524,7 @@ function TimerWrap(props) {
|
|
|
3461
3524
|
}
|
|
3462
3525
|
|
|
3463
3526
|
// src/components/molecules/toast.tsx
|
|
3464
|
-
import { Fragment as Fragment8, jsx as
|
|
3527
|
+
import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
3465
3528
|
var SeverityConfig = {
|
|
3466
3529
|
error: {
|
|
3467
3530
|
icon: Alert_default,
|
|
@@ -3487,23 +3550,23 @@ function ToastBox(props) {
|
|
|
3487
3550
|
event.stopPropagation();
|
|
3488
3551
|
onDismiss == null ? void 0 : onDismiss(event);
|
|
3489
3552
|
};
|
|
3490
|
-
return /* @__PURE__ */
|
|
3553
|
+
return /* @__PURE__ */ jsx37(SmoothCorners, { size: "sm", children: /* @__PURE__ */ jsxs26(
|
|
3491
3554
|
"div",
|
|
3492
3555
|
{
|
|
3493
3556
|
"data-is-toast": "true",
|
|
3494
3557
|
className: "bg-brand-black-500 flex flex-col md:flex-row gap-[0.75rem] items-start py-[calc(10rem/16)] px-[calc(12rem/16)] text-muted-foreground",
|
|
3495
3558
|
children: [
|
|
3496
|
-
/* @__PURE__ */
|
|
3559
|
+
/* @__PURE__ */ jsx37(
|
|
3497
3560
|
"div",
|
|
3498
3561
|
{
|
|
3499
3562
|
className: cn("items-center justify-center shrink-0 grow-0", color),
|
|
3500
3563
|
style: { fontSize: "calc(calc(24/16) * 1rem)" },
|
|
3501
|
-
children: /* @__PURE__ */
|
|
3564
|
+
children: /* @__PURE__ */ jsx37(Icon, { width: "1em", height: "1em" })
|
|
3502
3565
|
}
|
|
3503
3566
|
),
|
|
3504
|
-
/* @__PURE__ */
|
|
3505
|
-
/* @__PURE__ */
|
|
3506
|
-
/* @__PURE__ */
|
|
3567
|
+
/* @__PURE__ */ jsxs26("div", { className: "flex flex-col flex-1", children: [
|
|
3568
|
+
/* @__PURE__ */ jsx37(Text, { variant: "body1", className: "text-foreground", children: props.heading }),
|
|
3569
|
+
/* @__PURE__ */ jsx37(
|
|
3507
3570
|
Text,
|
|
3508
3571
|
{
|
|
3509
3572
|
variant: "caption2",
|
|
@@ -3512,9 +3575,9 @@ function ToastBox(props) {
|
|
|
3512
3575
|
}
|
|
3513
3576
|
)
|
|
3514
3577
|
] }),
|
|
3515
|
-
/* @__PURE__ */
|
|
3516
|
-
/* @__PURE__ */
|
|
3517
|
-
/* @__PURE__ */
|
|
3578
|
+
/* @__PURE__ */ jsx37("div", { className: "flex gap-[calc(6rem/16)] items-center self-center w-full md:w-auto", children: actions ? /* @__PURE__ */ jsxs26(Fragment8, { children: [
|
|
3579
|
+
/* @__PURE__ */ jsx37("div", { className: "flex gap-[calc(6rem/16)] flex-1 items-center *:flex-1", children: actions }),
|
|
3580
|
+
/* @__PURE__ */ jsx37(
|
|
3518
3581
|
IconButton,
|
|
3519
3582
|
{
|
|
3520
3583
|
className: "cursor-pointer",
|
|
@@ -3522,10 +3585,10 @@ function ToastBox(props) {
|
|
|
3522
3585
|
size: "smx",
|
|
3523
3586
|
variant: "level_2",
|
|
3524
3587
|
rounded: "default",
|
|
3525
|
-
children: /* @__PURE__ */
|
|
3588
|
+
children: /* @__PURE__ */ jsx37(XIcon_default, { width: "1rem" })
|
|
3526
3589
|
}
|
|
3527
3590
|
)
|
|
3528
|
-
] }) : /* @__PURE__ */
|
|
3591
|
+
] }) : /* @__PURE__ */ jsx37(
|
|
3529
3592
|
Button2,
|
|
3530
3593
|
{
|
|
3531
3594
|
size: "sm",
|
|
@@ -3542,10 +3605,10 @@ function ToastBox(props) {
|
|
|
3542
3605
|
|
|
3543
3606
|
// src/components/molecules/transaction-list.tsx
|
|
3544
3607
|
import { motion as motion4 } from "motion/react";
|
|
3545
|
-
import { Fragment as Fragment9, jsx as
|
|
3608
|
+
import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
3546
3609
|
function TxListItemProcessing(props) {
|
|
3547
|
-
return /* @__PURE__ */
|
|
3548
|
-
/* @__PURE__ */
|
|
3610
|
+
return /* @__PURE__ */ jsx38(GradientContainer, { children: /* @__PURE__ */ jsxs27("div", { className: "rounded-[1rem] bg-brand-black-350 px-[0.75rem] h-[3.75rem] flex items-center", children: [
|
|
3611
|
+
/* @__PURE__ */ jsx38(
|
|
3549
3612
|
GradientLine,
|
|
3550
3613
|
{
|
|
3551
3614
|
behaviour: "progress",
|
|
@@ -3553,8 +3616,8 @@ function TxListItemProcessing(props) {
|
|
|
3553
3616
|
mode: props.status === "failed" ? "error" : "default"
|
|
3554
3617
|
}
|
|
3555
3618
|
),
|
|
3556
|
-
/* @__PURE__ */
|
|
3557
|
-
/* @__PURE__ */
|
|
3619
|
+
/* @__PURE__ */ jsxs27("div", { className: "flex gap-[1rem] flex-1 z-20 text-brand-black-100 font-medium", children: [
|
|
3620
|
+
/* @__PURE__ */ jsx38(
|
|
3558
3621
|
TokenTransferPair,
|
|
3559
3622
|
{
|
|
3560
3623
|
fromToken: props.from,
|
|
@@ -3562,48 +3625,48 @@ function TxListItemProcessing(props) {
|
|
|
3562
3625
|
size: "2rem"
|
|
3563
3626
|
}
|
|
3564
3627
|
),
|
|
3565
|
-
/* @__PURE__ */
|
|
3566
|
-
/* @__PURE__ */
|
|
3567
|
-
/* @__PURE__ */
|
|
3628
|
+
/* @__PURE__ */ jsxs27("div", { className: "flex flex-grow flex-col text-start", children: [
|
|
3629
|
+
/* @__PURE__ */ jsx38("span", { className: "text-brand-white-500 whitespace-nowrap text-[0.875rem] h-[1.25rem]", children: props.caption }),
|
|
3630
|
+
/* @__PURE__ */ jsxs27(StatusBadge, { variant: props.status === "failed" ? "error" : "none", children: [
|
|
3568
3631
|
"~ ",
|
|
3569
3632
|
props.eta
|
|
3570
3633
|
] })
|
|
3571
3634
|
] }),
|
|
3572
|
-
/* @__PURE__ */
|
|
3635
|
+
/* @__PURE__ */ jsx38("div", { className: "basis-4/12 max-w-xs shrink-0 flex justify-end h-[2.25rem] whitespace-nowrap", children: /* @__PURE__ */ jsxs27(
|
|
3573
3636
|
motion4.div,
|
|
3574
3637
|
{
|
|
3575
3638
|
initial: { y: 0 },
|
|
3576
3639
|
animate: { y: props.status === "failed" ? "-100%" : 0 },
|
|
3577
3640
|
className: "grid",
|
|
3578
3641
|
children: [
|
|
3579
|
-
/* @__PURE__ */
|
|
3642
|
+
/* @__PURE__ */ jsxs27(
|
|
3580
3643
|
motion4.div,
|
|
3581
3644
|
{
|
|
3582
3645
|
animate: { opacity: props.status === "processing" ? 1 : 0 },
|
|
3583
3646
|
className: "flex flex-col text-end h-[2.25rem]",
|
|
3584
3647
|
children: [
|
|
3585
|
-
/* @__PURE__ */
|
|
3586
|
-
/* @__PURE__ */
|
|
3648
|
+
/* @__PURE__ */ jsx38("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: props.amount }),
|
|
3649
|
+
/* @__PURE__ */ jsxs27("span", { className: "text-xs h-[1rem]", children: [
|
|
3587
3650
|
props.percentage,
|
|
3588
3651
|
"%"
|
|
3589
3652
|
] })
|
|
3590
3653
|
]
|
|
3591
3654
|
}
|
|
3592
3655
|
),
|
|
3593
|
-
/* @__PURE__ */
|
|
3656
|
+
/* @__PURE__ */ jsxs27(
|
|
3594
3657
|
motion4.div,
|
|
3595
3658
|
{
|
|
3596
3659
|
animate: { opacity: props.status === "failed" ? 1 : 0 },
|
|
3597
3660
|
className: "flex gap-[0.75rem] items-center h-[2.25rem] justify-end",
|
|
3598
3661
|
children: [
|
|
3599
|
-
/* @__PURE__ */
|
|
3600
|
-
/* @__PURE__ */
|
|
3662
|
+
/* @__PURE__ */ jsx38("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: props.amount }),
|
|
3663
|
+
/* @__PURE__ */ jsx38(
|
|
3601
3664
|
IconButton,
|
|
3602
3665
|
{
|
|
3603
3666
|
variant: "destructive",
|
|
3604
3667
|
rounded: "default",
|
|
3605
3668
|
size: "smx",
|
|
3606
|
-
children: /* @__PURE__ */
|
|
3669
|
+
children: /* @__PURE__ */ jsx38(RotateCcw_default, { className: "size-4 text-[currentColor]" })
|
|
3607
3670
|
}
|
|
3608
3671
|
)
|
|
3609
3672
|
]
|
|
@@ -3617,7 +3680,7 @@ function TxListItemProcessing(props) {
|
|
|
3617
3680
|
}
|
|
3618
3681
|
var TxListItem = function TxListItem2(props) {
|
|
3619
3682
|
const _a = props, { caption, completedAt, mode, from, to, amount } = _a, rest = __objRest(_a, ["caption", "completedAt", "mode", "from", "to", "amount"]);
|
|
3620
|
-
return /* @__PURE__ */
|
|
3683
|
+
return /* @__PURE__ */ jsx38(
|
|
3621
3684
|
"button",
|
|
3622
3685
|
__spreadProps(__spreadValues({}, rest), {
|
|
3623
3686
|
type: "button",
|
|
@@ -3625,15 +3688,15 @@ var TxListItem = function TxListItem2(props) {
|
|
|
3625
3688
|
"apperance-none rounded-[1rem] bg-brand-black-350 px-[0.75rem] h-[3.75rem] flex items-center",
|
|
3626
3689
|
props.className
|
|
3627
3690
|
),
|
|
3628
|
-
children: /* @__PURE__ */
|
|
3629
|
-
/* @__PURE__ */
|
|
3630
|
-
/* @__PURE__ */
|
|
3631
|
-
/* @__PURE__ */
|
|
3632
|
-
/* @__PURE__ */
|
|
3691
|
+
children: /* @__PURE__ */ jsxs27("div", { className: "flex gap-[1rem] flex-1 z-20 text-brand-black-100 font-medium", children: [
|
|
3692
|
+
/* @__PURE__ */ jsx38(TokenTransferPair, { fromToken: from, toToken: to, size: "2rem" }),
|
|
3693
|
+
/* @__PURE__ */ jsxs27("div", { className: "flex flex-grow flex-col text-start whitespace-nowrap", children: [
|
|
3694
|
+
/* @__PURE__ */ jsx38("span", { className: "text-brand-white-500 text-[0.875rem] h-[1.25rem]", children: caption }),
|
|
3695
|
+
/* @__PURE__ */ jsx38(StatusBadge, { variant: mode === "rollback" ? "refunded" : "success" })
|
|
3633
3696
|
] }),
|
|
3634
|
-
/* @__PURE__ */
|
|
3635
|
-
/* @__PURE__ */
|
|
3636
|
-
/* @__PURE__ */
|
|
3697
|
+
/* @__PURE__ */ jsxs27("div", { className: "shrink-0 flex flex-col text-end", children: [
|
|
3698
|
+
/* @__PURE__ */ jsx38("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: amount }),
|
|
3699
|
+
/* @__PURE__ */ jsx38("span", { className: "text-xs h-[1rem]", children: completedAt })
|
|
3637
3700
|
] })
|
|
3638
3701
|
] })
|
|
3639
3702
|
})
|
|
@@ -3643,18 +3706,18 @@ function StatusBadge({
|
|
|
3643
3706
|
variant,
|
|
3644
3707
|
children
|
|
3645
3708
|
}) {
|
|
3646
|
-
return /* @__PURE__ */
|
|
3647
|
-
variant === "success" ? /* @__PURE__ */
|
|
3648
|
-
/* @__PURE__ */
|
|
3709
|
+
return /* @__PURE__ */ jsxs27("span", { className: "text-xs h-[1rem] flex items-center gap-[0.125rem]", children: [
|
|
3710
|
+
variant === "success" ? /* @__PURE__ */ jsxs27("span", { className: "text-brand-success-400 flex items-center gap-[0.125rem]", children: [
|
|
3711
|
+
/* @__PURE__ */ jsx38(Check_default, { width: "0.75rem", height: "0.75rem" }),
|
|
3649
3712
|
" ",
|
|
3650
|
-
/* @__PURE__ */
|
|
3713
|
+
/* @__PURE__ */ jsx38("span", { children: "Success" })
|
|
3651
3714
|
] }) : null,
|
|
3652
|
-
variant === "refunded" ? /* @__PURE__ */
|
|
3653
|
-
/* @__PURE__ */
|
|
3654
|
-
/* @__PURE__ */
|
|
3715
|
+
variant === "refunded" ? /* @__PURE__ */ jsxs27(Fragment9, { children: [
|
|
3716
|
+
/* @__PURE__ */ jsx38(StepBack_default, { strokeWidth: 2, width: "0.75rem", height: "0.75rem" }),
|
|
3717
|
+
/* @__PURE__ */ jsx38("span", { children: "Refunded" })
|
|
3655
3718
|
] }) : null,
|
|
3656
|
-
variant === "error" ? /* @__PURE__ */
|
|
3657
|
-
/* @__PURE__ */
|
|
3719
|
+
variant === "error" ? /* @__PURE__ */ jsxs27(Fragment9, { children: [
|
|
3720
|
+
/* @__PURE__ */ jsx38(
|
|
3658
3721
|
Alert_default,
|
|
3659
3722
|
{
|
|
3660
3723
|
width: "0.75rem",
|
|
@@ -3662,13 +3725,13 @@ function StatusBadge({
|
|
|
3662
3725
|
className: "text-brand-danger-500"
|
|
3663
3726
|
}
|
|
3664
3727
|
),
|
|
3665
|
-
/* @__PURE__ */
|
|
3728
|
+
/* @__PURE__ */ jsx38("span", { className: "text-brand-danger-500", children: "Order expired" })
|
|
3666
3729
|
] }) : null,
|
|
3667
3730
|
variant === "none" ? children : null
|
|
3668
3731
|
] });
|
|
3669
3732
|
}
|
|
3670
3733
|
function TxList({ children }) {
|
|
3671
|
-
return /* @__PURE__ */
|
|
3734
|
+
return /* @__PURE__ */ jsx38("ul", { className: "flex flex-col gap-[0.5rem]", children });
|
|
3672
3735
|
}
|
|
3673
3736
|
|
|
3674
3737
|
// src/components/molecules/wallet-header.tsx
|
|
@@ -3682,14 +3745,14 @@ import * as Tab_ from "@radix-ui/react-tabs";
|
|
|
3682
3745
|
|
|
3683
3746
|
// src/@/ui/tabs.tsx
|
|
3684
3747
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
3685
|
-
import { jsx as
|
|
3748
|
+
import { jsx as jsx39 } from "react/jsx-runtime";
|
|
3686
3749
|
function Tabs(_a) {
|
|
3687
3750
|
var _b = _a, {
|
|
3688
3751
|
className
|
|
3689
3752
|
} = _b, props = __objRest(_b, [
|
|
3690
3753
|
"className"
|
|
3691
3754
|
]);
|
|
3692
|
-
return /* @__PURE__ */
|
|
3755
|
+
return /* @__PURE__ */ jsx39(
|
|
3693
3756
|
TabsPrimitive.Root,
|
|
3694
3757
|
__spreadValues({
|
|
3695
3758
|
"data-slot": "tabs",
|
|
@@ -3703,7 +3766,7 @@ function TabsContent(_a) {
|
|
|
3703
3766
|
} = _b, props = __objRest(_b, [
|
|
3704
3767
|
"className"
|
|
3705
3768
|
]);
|
|
3706
|
-
return /* @__PURE__ */
|
|
3769
|
+
return /* @__PURE__ */ jsx39(
|
|
3707
3770
|
TabsPrimitive.Content,
|
|
3708
3771
|
__spreadValues({
|
|
3709
3772
|
"data-slot": "tabs-content",
|
|
@@ -3713,12 +3776,12 @@ function TabsContent(_a) {
|
|
|
3713
3776
|
}
|
|
3714
3777
|
|
|
3715
3778
|
// src/components/organisms/assets-collection.tsx
|
|
3716
|
-
import { jsx as
|
|
3779
|
+
import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
3717
3780
|
function TabsList2(props) {
|
|
3718
|
-
return /* @__PURE__ */
|
|
3781
|
+
return /* @__PURE__ */ jsx40("nav", { className: "flex flex-col", children: /* @__PURE__ */ jsx40(Tab_.TabsList, { asChild: true, children: /* @__PURE__ */ jsx40("ul", { className: "flex p-0 bg-transparent gap-3", children: props.children }) }) });
|
|
3719
3782
|
}
|
|
3720
3783
|
function TabItem(props) {
|
|
3721
|
-
return /* @__PURE__ */
|
|
3784
|
+
return /* @__PURE__ */ jsx40(
|
|
3722
3785
|
Tab_.TabsTrigger,
|
|
3723
3786
|
{
|
|
3724
3787
|
value: props.value,
|
|
@@ -3731,7 +3794,7 @@ function AssetValueTrend(props) {
|
|
|
3731
3794
|
const { percentage = 0, direction: dir, dollarValue = 0 } = props;
|
|
3732
3795
|
const isZero = dollarValue === 0;
|
|
3733
3796
|
const isUp = isZero ? "up" : dir === "up";
|
|
3734
|
-
return /* @__PURE__ */
|
|
3797
|
+
return /* @__PURE__ */ jsxs28(
|
|
3735
3798
|
"div",
|
|
3736
3799
|
{
|
|
3737
3800
|
className: "inline-flex select-none gap-[0.125rem] text-brand-black-100 h-[1rem] text-[0.7rem] font-medium items-center",
|
|
@@ -3740,7 +3803,7 @@ function AssetValueTrend(props) {
|
|
|
3740
3803
|
"--trend-color": isZero ? "inherit" : !isUp ? "var(--color-brand-danger-500, indigo)" : "var(--color-brand-success-400, cyan)"
|
|
3741
3804
|
},
|
|
3742
3805
|
children: [
|
|
3743
|
-
/* @__PURE__ */
|
|
3806
|
+
/* @__PURE__ */ jsx40("span", { className: "text-[var(--trend-color)]", children: /* @__PURE__ */ jsx40(
|
|
3744
3807
|
ArrowTriangleBottom_default,
|
|
3745
3808
|
{
|
|
3746
3809
|
width: "0.75rem",
|
|
@@ -3751,13 +3814,13 @@ function AssetValueTrend(props) {
|
|
|
3751
3814
|
)
|
|
3752
3815
|
}
|
|
3753
3816
|
) }),
|
|
3754
|
-
/* @__PURE__ */
|
|
3755
|
-
/* @__PURE__ */
|
|
3817
|
+
/* @__PURE__ */ jsxs28("span", { className: "flex items-center", children: [
|
|
3818
|
+
/* @__PURE__ */ jsxs28("span", { className: "text-[var(--trend-color)]", children: [
|
|
3756
3819
|
"$",
|
|
3757
3820
|
dollarValue
|
|
3758
3821
|
] }),
|
|
3759
3822
|
"\xA0",
|
|
3760
|
-
/* @__PURE__ */
|
|
3823
|
+
/* @__PURE__ */ jsxs28("span", { className: "text-[var(--trend-base)]", children: [
|
|
3761
3824
|
"(",
|
|
3762
3825
|
percentage,
|
|
3763
3826
|
"%)"
|
|
@@ -3775,8 +3838,8 @@ function Balance(props) {
|
|
|
3775
3838
|
const [int_, decimal] = String(props.amount).split(".");
|
|
3776
3839
|
const int = Number.isNaN(+int_) ? 0 : int_;
|
|
3777
3840
|
const is_zero = props.amount === 0;
|
|
3778
|
-
return /* @__PURE__ */
|
|
3779
|
-
/* @__PURE__ */
|
|
3841
|
+
return /* @__PURE__ */ jsx40("div", { className: "select-none", children: /* @__PURE__ */ jsxs28("span", { className: "text-[2.375rem] font-medium leading-[2.875rem] whitespace-nowrap", children: [
|
|
3842
|
+
/* @__PURE__ */ jsxs28(
|
|
3780
3843
|
"span",
|
|
3781
3844
|
{
|
|
3782
3845
|
className: cn(
|
|
@@ -3788,11 +3851,11 @@ function Balance(props) {
|
|
|
3788
3851
|
]
|
|
3789
3852
|
}
|
|
3790
3853
|
),
|
|
3791
|
-
/* @__PURE__ */
|
|
3854
|
+
/* @__PURE__ */ jsxs28("span", { className: "text-brand-black-100", children: [
|
|
3792
3855
|
".",
|
|
3793
3856
|
decimal != null ? decimal : "00"
|
|
3794
3857
|
] }),
|
|
3795
|
-
/* @__PURE__ */
|
|
3858
|
+
/* @__PURE__ */ jsxs28("span", { className: "text-brand-white-500", children: [
|
|
3796
3859
|
"\xA0",
|
|
3797
3860
|
suffix
|
|
3798
3861
|
] })
|
|
@@ -3800,7 +3863,7 @@ function Balance(props) {
|
|
|
3800
3863
|
}
|
|
3801
3864
|
|
|
3802
3865
|
// src/components/molecules/wallet-header.tsx
|
|
3803
|
-
import { Fragment as Fragment11, jsx as
|
|
3866
|
+
import { Fragment as Fragment11, jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3804
3867
|
var WalletHeaderContext = React14.createContext(null);
|
|
3805
3868
|
function useWalletHeader() {
|
|
3806
3869
|
const context = React14.useContext(WalletHeaderContext);
|
|
@@ -3846,7 +3909,7 @@ var WalletHeader = React14.forwardRef(
|
|
|
3846
3909
|
React14.useEffect(() => {
|
|
3847
3910
|
globalWalletHeaderState = show;
|
|
3848
3911
|
}, [show]);
|
|
3849
|
-
return /* @__PURE__ */
|
|
3912
|
+
return /* @__PURE__ */ jsx41(WalletHeaderContext.Provider, { value: { show, setShow }, children: /* @__PURE__ */ jsx41(
|
|
3850
3913
|
Comp,
|
|
3851
3914
|
__spreadProps(__spreadValues({
|
|
3852
3915
|
ref,
|
|
@@ -3862,7 +3925,7 @@ WalletHeader.displayName = "WalletHeader";
|
|
|
3862
3925
|
var WalletConnectedHeader = React14.forwardRef((_a, ref) => {
|
|
3863
3926
|
var _b = _a, { className, accounts, children } = _b, props = __objRest(_b, ["className", "accounts", "children"]);
|
|
3864
3927
|
const { show: open, setShow } = useWalletHeader();
|
|
3865
|
-
return /* @__PURE__ */
|
|
3928
|
+
return /* @__PURE__ */ jsx41(
|
|
3866
3929
|
"button",
|
|
3867
3930
|
__spreadProps(__spreadValues({
|
|
3868
3931
|
ref,
|
|
@@ -3876,9 +3939,9 @@ var WalletConnectedHeader = React14.forwardRef((_a, ref) => {
|
|
|
3876
3939
|
),
|
|
3877
3940
|
onClick: () => setShow((e) => !e)
|
|
3878
3941
|
}, props), {
|
|
3879
|
-
children: /* @__PURE__ */
|
|
3880
|
-
children || /* @__PURE__ */
|
|
3881
|
-
/* @__PURE__ */
|
|
3942
|
+
children: /* @__PURE__ */ jsxs29("div", { className: "flex w-full gap-2 justify-between items-center", children: [
|
|
3943
|
+
children || /* @__PURE__ */ jsx41(AccountStack, { accounts }),
|
|
3944
|
+
/* @__PURE__ */ jsx41(
|
|
3882
3945
|
IconButton,
|
|
3883
3946
|
{
|
|
3884
3947
|
variant: "level_1",
|
|
@@ -3887,7 +3950,7 @@ var WalletConnectedHeader = React14.forwardRef((_a, ref) => {
|
|
|
3887
3950
|
rounded: "full",
|
|
3888
3951
|
size: "sm",
|
|
3889
3952
|
asChild: true,
|
|
3890
|
-
children: /* @__PURE__ */
|
|
3953
|
+
children: /* @__PURE__ */ jsx41("span", { children: /* @__PURE__ */ jsx41(ChevronBottomDown_default, {}) })
|
|
3891
3954
|
}
|
|
3892
3955
|
)
|
|
3893
3956
|
] })
|
|
@@ -3959,7 +4022,7 @@ var WalletHeaderContent = React14.forwardRef((_a, _ref) => {
|
|
|
3959
4022
|
"onTransitionRun",
|
|
3960
4023
|
"onTransitionCancel"
|
|
3961
4024
|
]);
|
|
3962
|
-
return /* @__PURE__ */
|
|
4025
|
+
return /* @__PURE__ */ jsx41(
|
|
3963
4026
|
motion5.div,
|
|
3964
4027
|
{
|
|
3965
4028
|
ref: parentRef,
|
|
@@ -3968,7 +4031,7 @@ var WalletHeaderContent = React14.forwardRef((_a, _ref) => {
|
|
|
3968
4031
|
className: cn("z-10 relative", {
|
|
3969
4032
|
"pointer-events-none": !open
|
|
3970
4033
|
}),
|
|
3971
|
-
children: /* @__PURE__ */
|
|
4034
|
+
children: /* @__PURE__ */ jsx41(
|
|
3972
4035
|
motion5.div,
|
|
3973
4036
|
__spreadProps(__spreadValues({
|
|
3974
4037
|
ref: containerRef,
|
|
@@ -3991,15 +4054,15 @@ WalletHeaderContent.displayName = "WalletHeaderContent";
|
|
|
3991
4054
|
var AccountStack = React14.forwardRef(
|
|
3992
4055
|
({ accounts = [] }, ref) => {
|
|
3993
4056
|
var _a, _b;
|
|
3994
|
-
return /* @__PURE__ */
|
|
3995
|
-
/* @__PURE__ */
|
|
4057
|
+
return /* @__PURE__ */ jsx41("div", { ref, className: "flex gap-[0.625rem] items-center", children: accounts.length > 0 ? /* @__PURE__ */ jsxs29(React14.Fragment, { children: [
|
|
4058
|
+
/* @__PURE__ */ jsx41("div", { className: "inline-flex -space-x-[0.3125rem]", children: accounts.map((account, index) => /* @__PURE__ */ jsx41(
|
|
3996
4059
|
"div",
|
|
3997
4060
|
{
|
|
3998
4061
|
style: {
|
|
3999
4062
|
zIndex: accounts.length - index,
|
|
4000
4063
|
position: "relative"
|
|
4001
4064
|
},
|
|
4002
|
-
children: /* @__PURE__ */
|
|
4065
|
+
children: /* @__PURE__ */ jsx41(
|
|
4003
4066
|
BadgeIcon,
|
|
4004
4067
|
{
|
|
4005
4068
|
outline: true,
|
|
@@ -4013,15 +4076,15 @@ var AccountStack = React14.forwardRef(
|
|
|
4013
4076
|
},
|
|
4014
4077
|
account.address
|
|
4015
4078
|
)) }),
|
|
4016
|
-
/* @__PURE__ */
|
|
4017
|
-
/* @__PURE__ */
|
|
4079
|
+
/* @__PURE__ */ jsxs29("span", { className: "flex flex-col whitespace-nowrap", children: [
|
|
4080
|
+
/* @__PURE__ */ jsx41("span", { className: "text-base font-medium h-[1.25rem] text-brand-white-500", children: accounts.length > 1 ? /* @__PURE__ */ jsxs29(Fragment11, { children: [
|
|
4018
4081
|
accounts.length,
|
|
4019
4082
|
" wallets"
|
|
4020
|
-
] }) : /* @__PURE__ */
|
|
4021
|
-
/* @__PURE__ */
|
|
4083
|
+
] }) : /* @__PURE__ */ jsx41(Fragment11, { children: shortenAccountAddress((_b = (_a = accounts[0]) == null ? void 0 : _a.address) != null ? _b : "") || "--" }) }),
|
|
4084
|
+
/* @__PURE__ */ jsx41("span", { className: "text-xs text-start h-[1rem] font-medium inline-flex items-center gap-[0.125rem] text-brand-black-100", children: "Connected" })
|
|
4022
4085
|
] })
|
|
4023
|
-
] }) : /* @__PURE__ */
|
|
4024
|
-
/* @__PURE__ */
|
|
4086
|
+
] }) : /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-[0.625rem] select-none", children: [
|
|
4087
|
+
/* @__PURE__ */ jsx41(
|
|
4025
4088
|
IconButton,
|
|
4026
4089
|
{
|
|
4027
4090
|
disabled: true,
|
|
@@ -4029,22 +4092,22 @@ var AccountStack = React14.forwardRef(
|
|
|
4029
4092
|
variant: "level_2",
|
|
4030
4093
|
rounded: "full",
|
|
4031
4094
|
size: "sm",
|
|
4032
|
-
children: /* @__PURE__ */
|
|
4095
|
+
children: /* @__PURE__ */ jsx41(Wallet_default, { className: "size-5" })
|
|
4033
4096
|
}
|
|
4034
4097
|
),
|
|
4035
|
-
/* @__PURE__ */
|
|
4098
|
+
/* @__PURE__ */ jsx41("p", { className: "text-base font-medium text-brand-white-100", children: "Connect Your Wallet" })
|
|
4036
4099
|
] }) });
|
|
4037
4100
|
}
|
|
4038
4101
|
);
|
|
4039
4102
|
AccountStack.displayName = "AccountStack";
|
|
4040
4103
|
var WalletHeaderTabs = React14.forwardRef((_a, ref) => {
|
|
4041
4104
|
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
|
|
4042
|
-
return /* @__PURE__ */
|
|
4105
|
+
return /* @__PURE__ */ jsx41(Tabs, __spreadProps(__spreadValues({ ref, className: cn("gap-0 pt-3", className) }, props), { children }));
|
|
4043
4106
|
});
|
|
4044
4107
|
WalletHeaderTabs.displayName = "WalletHeaderTabs";
|
|
4045
4108
|
var WalletHeaderTabsList = React14.forwardRef((_a, ref) => {
|
|
4046
4109
|
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
|
|
4047
|
-
return /* @__PURE__ */
|
|
4110
|
+
return /* @__PURE__ */ jsx41(
|
|
4048
4111
|
TabsList2,
|
|
4049
4112
|
__spreadProps(__spreadValues({
|
|
4050
4113
|
ref,
|
|
@@ -4057,7 +4120,7 @@ var WalletHeaderTabsList = React14.forwardRef((_a, ref) => {
|
|
|
4057
4120
|
WalletHeaderTabsList.displayName = "WalletHeaderTabsList";
|
|
4058
4121
|
var WalletHeaderTabItem = React14.forwardRef((_a, ref) => {
|
|
4059
4122
|
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
|
|
4060
|
-
return /* @__PURE__ */
|
|
4123
|
+
return /* @__PURE__ */ jsx41(
|
|
4061
4124
|
TabItem,
|
|
4062
4125
|
__spreadProps(__spreadValues({
|
|
4063
4126
|
ref,
|
|
@@ -4073,7 +4136,7 @@ var WalletHeaderTabItem = React14.forwardRef((_a, ref) => {
|
|
|
4073
4136
|
WalletHeaderTabItem.displayName = "WalletHeaderTabItem";
|
|
4074
4137
|
var WalletHeaderTabsContent = React14.forwardRef((_a, ref) => {
|
|
4075
4138
|
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
|
|
4076
|
-
return /* @__PURE__ */
|
|
4139
|
+
return /* @__PURE__ */ jsx41(
|
|
4077
4140
|
TabsContent,
|
|
4078
4141
|
__spreadProps(__spreadValues({
|
|
4079
4142
|
ref,
|
|
@@ -4088,7 +4151,7 @@ var WalletHeaderContentBlur = React14.forwardRef((_a, ref) => {
|
|
|
4088
4151
|
var _b = _a, { className, children, asChild = false } = _b, props = __objRest(_b, ["className", "children", "asChild"]);
|
|
4089
4152
|
const { show: open } = useWalletHeader();
|
|
4090
4153
|
const Comp = asChild ? Slot10 : "div";
|
|
4091
|
-
return /* @__PURE__ */
|
|
4154
|
+
return /* @__PURE__ */ jsx41(
|
|
4092
4155
|
Comp,
|
|
4093
4156
|
__spreadProps(__spreadValues({
|
|
4094
4157
|
ref,
|
|
@@ -4107,15 +4170,15 @@ var WalletHeaderContentBlur = React14.forwardRef((_a, ref) => {
|
|
|
4107
4170
|
WalletHeaderContentBlur.displayName = "WalletHeaderContentBlur";
|
|
4108
4171
|
|
|
4109
4172
|
// src/components/navigation/header.tsx
|
|
4110
|
-
import { jsx as
|
|
4173
|
+
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
4111
4174
|
function HeaderGradient() {
|
|
4112
|
-
return /* @__PURE__ */
|
|
4175
|
+
return /* @__PURE__ */ jsx42("div", { className: "absolute inset-0 h-[3px] bg-gradient-brand-animated" });
|
|
4113
4176
|
}
|
|
4114
4177
|
function HeaderContent({
|
|
4115
4178
|
children,
|
|
4116
4179
|
className
|
|
4117
4180
|
}) {
|
|
4118
|
-
return /* @__PURE__ */
|
|
4181
|
+
return /* @__PURE__ */ jsx42(
|
|
4119
4182
|
"div",
|
|
4120
4183
|
{
|
|
4121
4184
|
className: cn(
|
|
@@ -4130,7 +4193,7 @@ function Header({
|
|
|
4130
4193
|
children,
|
|
4131
4194
|
className
|
|
4132
4195
|
}) {
|
|
4133
|
-
return /* @__PURE__ */
|
|
4196
|
+
return /* @__PURE__ */ jsx42(
|
|
4134
4197
|
"header",
|
|
4135
4198
|
{
|
|
4136
4199
|
className: cn(
|
|
@@ -4143,7 +4206,7 @@ function Header({
|
|
|
4143
4206
|
}
|
|
4144
4207
|
|
|
4145
4208
|
// src/components/navigation/tabs.tsx
|
|
4146
|
-
import { jsx as
|
|
4209
|
+
import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
4147
4210
|
function TabAltHeader({
|
|
4148
4211
|
label,
|
|
4149
4212
|
isNew,
|
|
@@ -4151,7 +4214,7 @@ function TabAltHeader({
|
|
|
4151
4214
|
onClick,
|
|
4152
4215
|
className = ""
|
|
4153
4216
|
}) {
|
|
4154
|
-
return /* @__PURE__ */
|
|
4217
|
+
return /* @__PURE__ */ jsx43(
|
|
4155
4218
|
"button",
|
|
4156
4219
|
{
|
|
4157
4220
|
type: "button",
|
|
@@ -4161,9 +4224,9 @@ function TabAltHeader({
|
|
|
4161
4224
|
isActive ? "text-white" : "text-brand-black-100 hover:text-white",
|
|
4162
4225
|
className
|
|
4163
4226
|
),
|
|
4164
|
-
children: /* @__PURE__ */
|
|
4165
|
-
/* @__PURE__ */
|
|
4166
|
-
isNew && /* @__PURE__ */
|
|
4227
|
+
children: /* @__PURE__ */ jsxs30("span", { className: "relative z-10 flex items-center gap-2", children: [
|
|
4228
|
+
/* @__PURE__ */ jsx43("span", { className: "font-medium", children: label }),
|
|
4229
|
+
isNew && /* @__PURE__ */ jsx43("span", { className: "text-brand-warning-500 caption-text absolute top-0 left-[100%] w-max", children: "New" })
|
|
4167
4230
|
] })
|
|
4168
4231
|
}
|
|
4169
4232
|
);
|
|
@@ -4172,13 +4235,13 @@ function TabAltHeaders({
|
|
|
4172
4235
|
children,
|
|
4173
4236
|
className = ""
|
|
4174
4237
|
}) {
|
|
4175
|
-
return /* @__PURE__ */
|
|
4238
|
+
return /* @__PURE__ */ jsx43("div", { className: cn("flex space-x-3 mb-6", className), children });
|
|
4176
4239
|
}
|
|
4177
4240
|
function TabAltContent({
|
|
4178
4241
|
children,
|
|
4179
4242
|
className = ""
|
|
4180
4243
|
}) {
|
|
4181
|
-
return /* @__PURE__ */
|
|
4244
|
+
return /* @__PURE__ */ jsx43("div", { className, children });
|
|
4182
4245
|
}
|
|
4183
4246
|
function TabAltPanel({
|
|
4184
4247
|
id,
|
|
@@ -4187,66 +4250,13 @@ function TabAltPanel({
|
|
|
4187
4250
|
className = ""
|
|
4188
4251
|
}) {
|
|
4189
4252
|
if (activeTab !== id) return null;
|
|
4190
|
-
return /* @__PURE__ */
|
|
4253
|
+
return /* @__PURE__ */ jsx43("div", { className, children }, id);
|
|
4191
4254
|
}
|
|
4192
4255
|
function TabAlt({
|
|
4193
4256
|
children,
|
|
4194
4257
|
className = ""
|
|
4195
4258
|
}) {
|
|
4196
|
-
return /* @__PURE__ */
|
|
4197
|
-
}
|
|
4198
|
-
|
|
4199
|
-
// src/@/ui/tooltip.tsx
|
|
4200
|
-
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
4201
|
-
import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
4202
|
-
function TooltipProvider(_a) {
|
|
4203
|
-
var _b = _a, {
|
|
4204
|
-
delayDuration = 0
|
|
4205
|
-
} = _b, props = __objRest(_b, [
|
|
4206
|
-
"delayDuration"
|
|
4207
|
-
]);
|
|
4208
|
-
return /* @__PURE__ */ jsx43(
|
|
4209
|
-
TooltipPrimitive.Provider,
|
|
4210
|
-
__spreadValues({
|
|
4211
|
-
"data-slot": "tooltip-provider",
|
|
4212
|
-
delayDuration
|
|
4213
|
-
}, props)
|
|
4214
|
-
);
|
|
4215
|
-
}
|
|
4216
|
-
function Tooltip(_a) {
|
|
4217
|
-
var props = __objRest(_a, []);
|
|
4218
|
-
return /* @__PURE__ */ jsx43(TooltipProvider, { children: /* @__PURE__ */ jsx43(TooltipPrimitive.Root, __spreadValues({ "data-slot": "tooltip" }, props)) });
|
|
4219
|
-
}
|
|
4220
|
-
function TooltipTrigger(_a) {
|
|
4221
|
-
var props = __objRest(_a, []);
|
|
4222
|
-
return /* @__PURE__ */ jsx43(TooltipPrimitive.Trigger, __spreadValues({ "data-slot": "tooltip-trigger" }, props));
|
|
4223
|
-
}
|
|
4224
|
-
function TooltipContent(_a) {
|
|
4225
|
-
var _b = _a, {
|
|
4226
|
-
className,
|
|
4227
|
-
sideOffset = 0,
|
|
4228
|
-
children
|
|
4229
|
-
} = _b, props = __objRest(_b, [
|
|
4230
|
-
"className",
|
|
4231
|
-
"sideOffset",
|
|
4232
|
-
"children"
|
|
4233
|
-
]);
|
|
4234
|
-
return /* @__PURE__ */ jsx43(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs30(
|
|
4235
|
-
TooltipPrimitive.Content,
|
|
4236
|
-
__spreadProps(__spreadValues({
|
|
4237
|
-
"data-slot": "tooltip-content",
|
|
4238
|
-
sideOffset,
|
|
4239
|
-
className: cn(
|
|
4240
|
-
"bg-brand-black-600 text-brand-black-100 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
|
|
4241
|
-
className
|
|
4242
|
-
)
|
|
4243
|
-
}, props), {
|
|
4244
|
-
children: [
|
|
4245
|
-
children,
|
|
4246
|
-
/* @__PURE__ */ jsx43(TooltipPrimitive.Arrow, { className: "bg-brand-black-600 fill-brand-black-600 z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
|
|
4247
|
-
]
|
|
4248
|
-
})
|
|
4249
|
-
) });
|
|
4259
|
+
return /* @__PURE__ */ jsx43("div", { className: cn("w-full", className), children });
|
|
4250
4260
|
}
|
|
4251
4261
|
|
|
4252
4262
|
// src/components/organisms/settings.tsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hyperbridge/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.14",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"private": false,
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
"typescript": "5.8.3",
|
|
34
34
|
"vite": "^6.3.4",
|
|
35
35
|
"vitest": "^3.1.2",
|
|
36
|
-
"@repo/
|
|
37
|
-
"@repo/
|
|
36
|
+
"@repo/eslint-config": "0.0.0",
|
|
37
|
+
"@repo/typescript-config": "0.0.0"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@radix-ui/react-dialog": "^1.1.14",
|