@deframe-sdk/components 0.1.17 → 0.1.18
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 +81 -15
- package/dist/index.d.ts +81 -15
- package/dist/index.js +2712 -183
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2708 -185
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +371 -10
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import { twMerge } from 'tailwind-merge';
|
|
|
2
2
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import { HiXMark, HiChevronUp, HiChevronDown, HiChevronLeft, HiArrowRight, HiArrowLeft } from 'react-icons/hi2';
|
|
4
4
|
import * as React6 from 'react';
|
|
5
|
-
import React6__default, { useState, useEffect } from 'react';
|
|
5
|
+
import React6__default, { useState, useEffect, useRef, useCallback } from 'react';
|
|
6
6
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
7
7
|
import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdOutlineSwapVert, MdArrowRight, MdArrowDropDown, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdArrowUpward, MdArrowDownward } from 'react-icons/md';
|
|
8
8
|
import { IoAlertCircleOutline, IoTimeOutline, IoCheckmarkOutline } from 'react-icons/io5';
|
|
@@ -3183,6 +3183,124 @@ var SwapProcessingView = ({
|
|
|
3183
3183
|
}
|
|
3184
3184
|
);
|
|
3185
3185
|
};
|
|
3186
|
+
|
|
3187
|
+
// src/stories/swap-form-view/constants.ts
|
|
3188
|
+
var SWAP_SIMPLE_MIN_HEIGHT = 520;
|
|
3189
|
+
var SWAP_SIMPLE_WIDTH = 480;
|
|
3190
|
+
function SwapFormSkeleton() {
|
|
3191
|
+
return /* @__PURE__ */ jsxs(
|
|
3192
|
+
"div",
|
|
3193
|
+
{
|
|
3194
|
+
"data-test-id": "swap-form-skeleton",
|
|
3195
|
+
className: twMerge(
|
|
3196
|
+
"relative",
|
|
3197
|
+
"rounded-[var(--deframe-widget-size-radius-md)]",
|
|
3198
|
+
"px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
|
|
3199
|
+
"flex flex-col items-stretch gap-[var(--deframe-widget-size-gap-sm)]",
|
|
3200
|
+
"font-[var(--deframe-widget-font-family)]"
|
|
3201
|
+
),
|
|
3202
|
+
style: { minHeight: SWAP_SIMPLE_MIN_HEIGHT },
|
|
3203
|
+
children: [
|
|
3204
|
+
/* @__PURE__ */ jsx("div", { "data-test-id": "swap-form-skeleton-history", className: "flex justify-end", children: /* @__PURE__ */ jsx("div", { className: "w-9 h-9 rounded-[var(--deframe-widget-size-radius-full)] border border-[color:var(--deframe-widget-color-border-secondary)]" }) }),
|
|
3205
|
+
/* @__PURE__ */ jsx(
|
|
3206
|
+
SkeletonCard,
|
|
3207
|
+
{
|
|
3208
|
+
testId: "swap-form-skeleton-from",
|
|
3209
|
+
symbol: "USDC",
|
|
3210
|
+
network: "ARBITRUM",
|
|
3211
|
+
amount: "500",
|
|
3212
|
+
usd: "\u2248 $499.87",
|
|
3213
|
+
balance: "Saldo: 1 250.00 USDC"
|
|
3214
|
+
}
|
|
3215
|
+
),
|
|
3216
|
+
/* @__PURE__ */ jsx("div", { "data-test-id": "swap-form-skeleton-swap-btn-wrapper", className: "flex justify-center -my-[16px] relative z-[1]", children: /* @__PURE__ */ jsx(
|
|
3217
|
+
"div",
|
|
3218
|
+
{
|
|
3219
|
+
className: twMerge(
|
|
3220
|
+
"w-10 h-10",
|
|
3221
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
3222
|
+
"bg-[var(--deframe-widget-color-bg-secondary)]",
|
|
3223
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
3224
|
+
"flex items-center justify-center",
|
|
3225
|
+
"text-[color:var(--deframe-widget-color-brand-primary)]"
|
|
3226
|
+
),
|
|
3227
|
+
children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
|
|
3228
|
+
/* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
|
|
3229
|
+
/* @__PURE__ */ jsx("polyline", { points: "19 12 12 19 5 12" })
|
|
3230
|
+
] })
|
|
3231
|
+
}
|
|
3232
|
+
) }),
|
|
3233
|
+
/* @__PURE__ */ jsx(
|
|
3234
|
+
SkeletonCard,
|
|
3235
|
+
{
|
|
3236
|
+
testId: "swap-form-skeleton-to",
|
|
3237
|
+
symbol: "ETH",
|
|
3238
|
+
network: "ETHEREUM",
|
|
3239
|
+
amount: "0.2061",
|
|
3240
|
+
usd: "\u2248 $499.00",
|
|
3241
|
+
balance: "Saldo: 41 ETH"
|
|
3242
|
+
}
|
|
3243
|
+
),
|
|
3244
|
+
/* @__PURE__ */ jsx("div", { className: "flex-1" }),
|
|
3245
|
+
/* @__PURE__ */ jsx(
|
|
3246
|
+
"div",
|
|
3247
|
+
{
|
|
3248
|
+
"data-test-id": "swap-form-skeleton-submit",
|
|
3249
|
+
className: twMerge(
|
|
3250
|
+
"h-12",
|
|
3251
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
3252
|
+
"bg-[var(--deframe-widget-color-brand-primary)]",
|
|
3253
|
+
"flex items-center justify-center",
|
|
3254
|
+
"text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
|
|
3255
|
+
"text-[color:var(--deframe-widget-color-text-primary-dark)]"
|
|
3256
|
+
),
|
|
3257
|
+
children: "Revisar Troca"
|
|
3258
|
+
}
|
|
3259
|
+
)
|
|
3260
|
+
]
|
|
3261
|
+
}
|
|
3262
|
+
);
|
|
3263
|
+
}
|
|
3264
|
+
function SkeletonCard({ testId, symbol, network, amount, usd, balance }) {
|
|
3265
|
+
const initials = symbol.slice(0, 2).toUpperCase();
|
|
3266
|
+
return /* @__PURE__ */ jsxs(
|
|
3267
|
+
"div",
|
|
3268
|
+
{
|
|
3269
|
+
"data-test-id": testId,
|
|
3270
|
+
className: twMerge(
|
|
3271
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
3272
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
3273
|
+
"px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]"
|
|
3274
|
+
),
|
|
3275
|
+
children: [
|
|
3276
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
|
|
3277
|
+
/* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-[10px] flex-shrink-0", children: [
|
|
3278
|
+
/* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", style: { width: 38, height: 38 }, children: [
|
|
3279
|
+
/* @__PURE__ */ jsx(
|
|
3280
|
+
"div",
|
|
3281
|
+
{
|
|
3282
|
+
className: "w-[38px] h-[38px] rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-brand-primary)] flex items-center justify-center text-[13px] [font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-text-primary-dark)]",
|
|
3283
|
+
children: initials
|
|
3284
|
+
}
|
|
3285
|
+
),
|
|
3286
|
+
/* @__PURE__ */ jsx("div", { className: "absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)] flex items-center justify-center text-[7px] [font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-text-primary-dark)]", children: network.slice(0, 2) })
|
|
3287
|
+
] }),
|
|
3288
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start", children: [
|
|
3289
|
+
/* @__PURE__ */ jsx("span", { className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2] text-[color:var(--deframe-widget-color-text-primary)]", children: symbol }),
|
|
3290
|
+
/* @__PURE__ */ jsx("span", { className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-tertiary)] uppercase tracking-[0.04em] leading-[1.2]", children: network })
|
|
3291
|
+
] })
|
|
3292
|
+
] }),
|
|
3293
|
+
/* @__PURE__ */ jsx("div", { className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0" }),
|
|
3294
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end flex-1 min-w-0", children: [
|
|
3295
|
+
/* @__PURE__ */ jsx("span", { className: "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1] text-[color:var(--deframe-widget-color-text-primary)] text-right w-full", children: amount }),
|
|
3296
|
+
/* @__PURE__ */ jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)]", children: usd })
|
|
3297
|
+
] })
|
|
3298
|
+
] }),
|
|
3299
|
+
/* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)]", children: balance }) })
|
|
3300
|
+
]
|
|
3301
|
+
}
|
|
3302
|
+
);
|
|
3303
|
+
}
|
|
3186
3304
|
function LoadingIcon() {
|
|
3187
3305
|
const green = "var(--deframe-widget-color-brand-primary)";
|
|
3188
3306
|
const trackColor = "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)";
|
|
@@ -3243,72 +3361,68 @@ function LoadingIcon() {
|
|
|
3243
3361
|
}
|
|
3244
3362
|
);
|
|
3245
3363
|
}
|
|
3246
|
-
var SwapProcessingViewSimple = ({
|
|
3247
|
-
titleText,
|
|
3248
|
-
descriptionPrefix,
|
|
3249
|
-
activityHistoryText,
|
|
3250
|
-
onGoToHistory
|
|
3251
|
-
}) => {
|
|
3364
|
+
var SwapProcessingViewSimple = () => {
|
|
3252
3365
|
return /* @__PURE__ */ jsxs(
|
|
3253
3366
|
"div",
|
|
3254
3367
|
{
|
|
3255
|
-
"data-test-id": "swap-processing-simple-
|
|
3368
|
+
"data-test-id": "swap-processing-simple-wrapper",
|
|
3256
3369
|
className: twMerge(
|
|
3257
|
-
"
|
|
3258
|
-
|
|
3259
|
-
"
|
|
3260
|
-
"
|
|
3261
|
-
"
|
|
3262
|
-
"
|
|
3263
|
-
"bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
|
|
3370
|
+
"relative overflow-hidden",
|
|
3371
|
+
`w-[${SWAP_SIMPLE_WIDTH}px] max-w-[calc(100%-32px)] box-border`,
|
|
3372
|
+
"bg-[var(--deframe-widget-color-bg-secondary)]",
|
|
3373
|
+
"rounded-[var(--deframe-widget-size-radius-md)]",
|
|
3374
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
3375
|
+
"font-[var(--deframe-widget-font-family)]"
|
|
3264
3376
|
),
|
|
3377
|
+
style: { minHeight: SWAP_SIMPLE_MIN_HEIGHT },
|
|
3265
3378
|
children: [
|
|
3266
|
-
/* @__PURE__ */ jsx(
|
|
3379
|
+
/* @__PURE__ */ jsx("div", { "data-test-id": "swap-processing-simple-skeleton", children: /* @__PURE__ */ jsx(SwapFormSkeleton, {}) }),
|
|
3267
3380
|
/* @__PURE__ */ jsxs(
|
|
3268
3381
|
"div",
|
|
3269
3382
|
{
|
|
3270
|
-
"data-test-id": "swap-processing-simple-
|
|
3271
|
-
className:
|
|
3383
|
+
"data-test-id": "swap-processing-simple-screen",
|
|
3384
|
+
className: twMerge(
|
|
3385
|
+
"absolute inset-0 z-10",
|
|
3386
|
+
"flex flex-col items-center justify-center",
|
|
3387
|
+
"gap-[var(--deframe-widget-size-gap-lg)]",
|
|
3388
|
+
"px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
|
|
3389
|
+
"rounded-[inherit]",
|
|
3390
|
+
"backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
|
|
3391
|
+
"bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
|
|
3392
|
+
),
|
|
3272
3393
|
children: [
|
|
3273
|
-
/* @__PURE__ */ jsx(
|
|
3274
|
-
"span",
|
|
3275
|
-
{
|
|
3276
|
-
"data-test-id": "swap-processing-simple-title",
|
|
3277
|
-
className: twMerge(
|
|
3278
|
-
"[font-size:12px] [line-height:1.25] [letter-spacing:0.10em] uppercase",
|
|
3279
|
-
"[font-weight:var(--deframe-widget-font-weight-semibold)]",
|
|
3280
|
-
"font-[var(--deframe-widget-font-family)]",
|
|
3281
|
-
"text-[color:var(--deframe-widget-color-brand-primary)]"
|
|
3282
|
-
),
|
|
3283
|
-
children: titleText
|
|
3284
|
-
}
|
|
3285
|
-
),
|
|
3394
|
+
/* @__PURE__ */ jsx(LoadingIcon, {}),
|
|
3286
3395
|
/* @__PURE__ */ jsxs(
|
|
3287
|
-
"
|
|
3396
|
+
"div",
|
|
3288
3397
|
{
|
|
3289
|
-
"data-test-id": "swap-processing-simple-
|
|
3290
|
-
className:
|
|
3291
|
-
"[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
|
|
3292
|
-
"[font-weight:var(--deframe-widget-font-weight-regular)]",
|
|
3293
|
-
"font-[var(--deframe-widget-font-family)]",
|
|
3294
|
-
"text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
3295
|
-
"max-w-[260px]"
|
|
3296
|
-
),
|
|
3398
|
+
"data-test-id": "swap-processing-simple-copy",
|
|
3399
|
+
className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
|
|
3297
3400
|
children: [
|
|
3298
|
-
descriptionPrefix,
|
|
3299
|
-
" ",
|
|
3300
3401
|
/* @__PURE__ */ jsx(
|
|
3301
|
-
"
|
|
3402
|
+
"span",
|
|
3302
3403
|
{
|
|
3303
|
-
"data-test-id": "swap-processing-simple-
|
|
3304
|
-
onClick: onGoToHistory,
|
|
3305
|
-
"aria-label": activityHistoryText,
|
|
3404
|
+
"data-test-id": "swap-processing-simple-title",
|
|
3306
3405
|
className: twMerge(
|
|
3307
|
-
"
|
|
3406
|
+
"[font-size:12px] [line-height:1.25] [letter-spacing:0.10em] uppercase",
|
|
3308
3407
|
"[font-weight:var(--deframe-widget-font-weight-semibold)]",
|
|
3408
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
3309
3409
|
"text-[color:var(--deframe-widget-color-brand-primary)]"
|
|
3310
3410
|
),
|
|
3311
|
-
children:
|
|
3411
|
+
children: "PROCESSANDO TRANSA\xC7\xC3O..."
|
|
3412
|
+
}
|
|
3413
|
+
),
|
|
3414
|
+
/* @__PURE__ */ jsx(
|
|
3415
|
+
"span",
|
|
3416
|
+
{
|
|
3417
|
+
"data-test-id": "swap-processing-simple-subtitle",
|
|
3418
|
+
className: twMerge(
|
|
3419
|
+
"[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
|
|
3420
|
+
"[font-weight:var(--deframe-widget-font-weight-regular)]",
|
|
3421
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
3422
|
+
"text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
3423
|
+
"max-w-[260px]"
|
|
3424
|
+
),
|
|
3425
|
+
children: "Aguarde enquanto sua troca \xE9 confirmada."
|
|
3312
3426
|
}
|
|
3313
3427
|
)
|
|
3314
3428
|
]
|
|
@@ -3494,6 +3608,162 @@ var SwapSignatureWarningView = ({
|
|
|
3494
3608
|
}
|
|
3495
3609
|
);
|
|
3496
3610
|
};
|
|
3611
|
+
function WarningIcon() {
|
|
3612
|
+
return /* @__PURE__ */ jsx(
|
|
3613
|
+
motion.div,
|
|
3614
|
+
{
|
|
3615
|
+
"data-test-id": "swap-signature-warning-simple-icon",
|
|
3616
|
+
initial: { scale: 0.55, opacity: 0 },
|
|
3617
|
+
animate: { scale: 1, opacity: 1 },
|
|
3618
|
+
transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
|
|
3619
|
+
className: twMerge(
|
|
3620
|
+
"w-[84px] h-[84px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0",
|
|
3621
|
+
"flex items-center justify-center",
|
|
3622
|
+
"bg-[var(--deframe-widget-color-state-warning)]",
|
|
3623
|
+
"shadow-[0_0_0_10px_color-mix(in_srgb,var(--deframe-widget-color-state-warning)_12%,transparent),0_0_32px_color-mix(in_srgb,var(--deframe-widget-color-state-warning)_22%,transparent)]"
|
|
3624
|
+
),
|
|
3625
|
+
children: /* @__PURE__ */ jsxs("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: [
|
|
3626
|
+
/* @__PURE__ */ jsx(
|
|
3627
|
+
motion.line,
|
|
3628
|
+
{
|
|
3629
|
+
x1: "22",
|
|
3630
|
+
y1: "10",
|
|
3631
|
+
x2: "22",
|
|
3632
|
+
y2: "26",
|
|
3633
|
+
stroke: "white",
|
|
3634
|
+
strokeWidth: "3.5",
|
|
3635
|
+
strokeLinecap: "round",
|
|
3636
|
+
initial: { pathLength: 0 },
|
|
3637
|
+
animate: { pathLength: 1 },
|
|
3638
|
+
transition: { duration: 0.3, delay: 0.2, ease: "easeOut" }
|
|
3639
|
+
}
|
|
3640
|
+
),
|
|
3641
|
+
/* @__PURE__ */ jsx(
|
|
3642
|
+
motion.circle,
|
|
3643
|
+
{
|
|
3644
|
+
cx: "22",
|
|
3645
|
+
cy: "33",
|
|
3646
|
+
r: "2",
|
|
3647
|
+
fill: "white",
|
|
3648
|
+
initial: { scale: 0, opacity: 0 },
|
|
3649
|
+
animate: { scale: 1, opacity: 1 },
|
|
3650
|
+
transition: { duration: 0.15, delay: 0.45, ease: "easeOut" }
|
|
3651
|
+
}
|
|
3652
|
+
)
|
|
3653
|
+
] })
|
|
3654
|
+
}
|
|
3655
|
+
);
|
|
3656
|
+
}
|
|
3657
|
+
var SwapSignatureWarningViewSimple = ({
|
|
3658
|
+
errorTitle,
|
|
3659
|
+
errorDescription,
|
|
3660
|
+
onCancel,
|
|
3661
|
+
onTryAgain,
|
|
3662
|
+
cancelButtonText,
|
|
3663
|
+
retryButtonText
|
|
3664
|
+
}) => {
|
|
3665
|
+
return /* @__PURE__ */ jsxs(
|
|
3666
|
+
"div",
|
|
3667
|
+
{
|
|
3668
|
+
"data-test-id": "swap-signature-warning-simple-wrapper",
|
|
3669
|
+
className: twMerge(
|
|
3670
|
+
"relative overflow-hidden",
|
|
3671
|
+
`min-h-[${SWAP_SIMPLE_MIN_HEIGHT}px]`,
|
|
3672
|
+
`w-[${SWAP_SIMPLE_WIDTH}px] max-w-[calc(100%-32px)] box-border`,
|
|
3673
|
+
"bg-[var(--deframe-widget-color-bg-secondary)]",
|
|
3674
|
+
"rounded-[var(--deframe-widget-size-radius-md)]",
|
|
3675
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
3676
|
+
"font-[var(--deframe-widget-font-family)]"
|
|
3677
|
+
),
|
|
3678
|
+
children: [
|
|
3679
|
+
/* @__PURE__ */ jsx("div", { "data-test-id": "swap-signature-warning-simple-skeleton", children: /* @__PURE__ */ jsx(SwapFormSkeleton, {}) }),
|
|
3680
|
+
/* @__PURE__ */ jsxs(
|
|
3681
|
+
"div",
|
|
3682
|
+
{
|
|
3683
|
+
"data-test-id": "swap-signature-warning-simple-screen",
|
|
3684
|
+
className: twMerge(
|
|
3685
|
+
"absolute inset-0 z-10",
|
|
3686
|
+
"flex flex-col items-center justify-center",
|
|
3687
|
+
"gap-[var(--deframe-widget-size-gap-lg)]",
|
|
3688
|
+
"px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
|
|
3689
|
+
"rounded-[inherit]",
|
|
3690
|
+
"backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
|
|
3691
|
+
"bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
|
|
3692
|
+
),
|
|
3693
|
+
children: [
|
|
3694
|
+
/* @__PURE__ */ jsx(WarningIcon, {}),
|
|
3695
|
+
/* @__PURE__ */ jsxs(
|
|
3696
|
+
"div",
|
|
3697
|
+
{
|
|
3698
|
+
"data-test-id": "swap-signature-warning-simple-copy",
|
|
3699
|
+
className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
|
|
3700
|
+
children: [
|
|
3701
|
+
/* @__PURE__ */ jsx(
|
|
3702
|
+
"span",
|
|
3703
|
+
{
|
|
3704
|
+
"data-test-id": "swap-signature-warning-simple-title",
|
|
3705
|
+
className: twMerge(
|
|
3706
|
+
"[font-size:22px] [line-height:1.25]",
|
|
3707
|
+
"[font-weight:var(--deframe-widget-font-weight-bold)]",
|
|
3708
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
3709
|
+
"text-[color:var(--deframe-widget-color-text-primary)]"
|
|
3710
|
+
),
|
|
3711
|
+
children: errorTitle
|
|
3712
|
+
}
|
|
3713
|
+
),
|
|
3714
|
+
/* @__PURE__ */ jsx(
|
|
3715
|
+
"span",
|
|
3716
|
+
{
|
|
3717
|
+
"data-test-id": "swap-signature-warning-simple-subtitle",
|
|
3718
|
+
className: twMerge(
|
|
3719
|
+
"[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
|
|
3720
|
+
"[font-weight:var(--deframe-widget-font-weight-regular)]",
|
|
3721
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
3722
|
+
"text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
3723
|
+
"max-w-[260px]"
|
|
3724
|
+
),
|
|
3725
|
+
children: errorDescription
|
|
3726
|
+
}
|
|
3727
|
+
)
|
|
3728
|
+
]
|
|
3729
|
+
}
|
|
3730
|
+
),
|
|
3731
|
+
/* @__PURE__ */ jsxs(
|
|
3732
|
+
"div",
|
|
3733
|
+
{
|
|
3734
|
+
"data-test-id": "swap-signature-warning-simple-actions",
|
|
3735
|
+
className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full max-w-[320px]",
|
|
3736
|
+
children: [
|
|
3737
|
+
/* @__PURE__ */ jsx(
|
|
3738
|
+
SecondaryButton,
|
|
3739
|
+
{
|
|
3740
|
+
"data-test-id": "swap-signature-warning-simple-cancel",
|
|
3741
|
+
"aria-label": cancelButtonText != null ? cancelButtonText : "Cancel",
|
|
3742
|
+
className: "flex-1",
|
|
3743
|
+
onClick: onCancel,
|
|
3744
|
+
children: cancelButtonText
|
|
3745
|
+
}
|
|
3746
|
+
),
|
|
3747
|
+
/* @__PURE__ */ jsx(
|
|
3748
|
+
PrimaryButton,
|
|
3749
|
+
{
|
|
3750
|
+
"data-test-id": "swap-signature-warning-simple-retry",
|
|
3751
|
+
"aria-label": retryButtonText != null ? retryButtonText : "Retry",
|
|
3752
|
+
className: "flex-1",
|
|
3753
|
+
onClick: onTryAgain,
|
|
3754
|
+
children: retryButtonText
|
|
3755
|
+
}
|
|
3756
|
+
)
|
|
3757
|
+
]
|
|
3758
|
+
}
|
|
3759
|
+
)
|
|
3760
|
+
]
|
|
3761
|
+
}
|
|
3762
|
+
)
|
|
3763
|
+
]
|
|
3764
|
+
}
|
|
3765
|
+
);
|
|
3766
|
+
};
|
|
3497
3767
|
var SwapSuccessView = ({
|
|
3498
3768
|
fromTokenSymbol,
|
|
3499
3769
|
fromTokenIcon,
|
|
@@ -3610,71 +3880,69 @@ function SuccessIcon() {
|
|
|
3610
3880
|
}
|
|
3611
3881
|
);
|
|
3612
3882
|
}
|
|
3613
|
-
var SwapSuccessViewSimple = ({
|
|
3614
|
-
onGoToWallet,
|
|
3615
|
-
labels
|
|
3616
|
-
}) => {
|
|
3883
|
+
var SwapSuccessViewSimple = () => {
|
|
3617
3884
|
return /* @__PURE__ */ jsxs(
|
|
3618
3885
|
"div",
|
|
3619
3886
|
{
|
|
3620
|
-
"data-test-id": "swap-success-simple-
|
|
3887
|
+
"data-test-id": "swap-success-simple-wrapper",
|
|
3621
3888
|
className: twMerge(
|
|
3622
|
-
"
|
|
3623
|
-
|
|
3624
|
-
|
|
3625
|
-
"
|
|
3626
|
-
"rounded-[
|
|
3627
|
-
"
|
|
3628
|
-
"
|
|
3889
|
+
"relative overflow-hidden",
|
|
3890
|
+
`min-h-[${SWAP_SIMPLE_MIN_HEIGHT}px]`,
|
|
3891
|
+
`w-[${SWAP_SIMPLE_WIDTH}px] max-w-[calc(100%-32px)] box-border`,
|
|
3892
|
+
"bg-[var(--deframe-widget-color-bg-secondary)]",
|
|
3893
|
+
"rounded-[var(--deframe-widget-size-radius-md)]",
|
|
3894
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
3895
|
+
"font-[var(--deframe-widget-font-family)]"
|
|
3629
3896
|
),
|
|
3630
3897
|
children: [
|
|
3631
|
-
/* @__PURE__ */ jsx(
|
|
3898
|
+
/* @__PURE__ */ jsx("div", { "data-test-id": "swap-success-simple-skeleton", children: /* @__PURE__ */ jsx(SwapFormSkeleton, {}) }),
|
|
3632
3899
|
/* @__PURE__ */ jsxs(
|
|
3633
3900
|
"div",
|
|
3634
3901
|
{
|
|
3635
|
-
"data-test-id": "swap-success-simple-
|
|
3636
|
-
className:
|
|
3902
|
+
"data-test-id": "swap-success-simple-screen",
|
|
3903
|
+
className: twMerge(
|
|
3904
|
+
"absolute inset-0 z-10",
|
|
3905
|
+
"flex flex-col items-center justify-center",
|
|
3906
|
+
"gap-[var(--deframe-widget-size-gap-lg)]",
|
|
3907
|
+
"px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
|
|
3908
|
+
"rounded-[inherit]",
|
|
3909
|
+
"backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
|
|
3910
|
+
"bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
|
|
3911
|
+
),
|
|
3637
3912
|
children: [
|
|
3638
|
-
/* @__PURE__ */ jsx(
|
|
3639
|
-
"span",
|
|
3640
|
-
{
|
|
3641
|
-
"data-test-id": "swap-success-simple-title",
|
|
3642
|
-
className: twMerge(
|
|
3643
|
-
"[font-size:var(--deframe-widget-font-size-xl)]",
|
|
3644
|
-
"[line-height:var(--deframe-widget-font-leading-xl)]",
|
|
3645
|
-
"[font-weight:var(--deframe-widget-font-weight-bold)]",
|
|
3646
|
-
"font-[var(--deframe-widget-font-family)]",
|
|
3647
|
-
"text-[color:var(--deframe-widget-color-text-primary)]"
|
|
3648
|
-
),
|
|
3649
|
-
children: labels == null ? void 0 : labels.title
|
|
3650
|
-
}
|
|
3651
|
-
),
|
|
3913
|
+
/* @__PURE__ */ jsx(SuccessIcon, {}),
|
|
3652
3914
|
/* @__PURE__ */ jsxs(
|
|
3653
|
-
"
|
|
3915
|
+
"div",
|
|
3654
3916
|
{
|
|
3655
|
-
"data-test-id": "swap-success-simple-
|
|
3656
|
-
className:
|
|
3657
|
-
"[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
|
|
3658
|
-
"[font-weight:var(--deframe-widget-font-weight-regular)]",
|
|
3659
|
-
"font-[var(--deframe-widget-font-family)]",
|
|
3660
|
-
"text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
3661
|
-
"max-w-[260px]"
|
|
3662
|
-
),
|
|
3917
|
+
"data-test-id": "swap-success-simple-copy",
|
|
3918
|
+
className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
|
|
3663
3919
|
children: [
|
|
3664
|
-
labels == null ? void 0 : labels.descriptionSuffix,
|
|
3665
|
-
" ",
|
|
3666
3920
|
/* @__PURE__ */ jsx(
|
|
3667
|
-
"
|
|
3921
|
+
"span",
|
|
3668
3922
|
{
|
|
3669
|
-
"data-test-id": "swap-success-simple-
|
|
3670
|
-
onClick: onGoToWallet,
|
|
3671
|
-
"aria-label": labels == null ? void 0 : labels.walletLinkText,
|
|
3923
|
+
"data-test-id": "swap-success-simple-title",
|
|
3672
3924
|
className: twMerge(
|
|
3673
|
-
"
|
|
3674
|
-
"[
|
|
3675
|
-
"
|
|
3925
|
+
"[font-size:var(--deframe-widget-font-size-xl)]",
|
|
3926
|
+
"[line-height:var(--deframe-widget-font-leading-xl)]",
|
|
3927
|
+
"[font-weight:var(--deframe-widget-font-weight-bold)]",
|
|
3928
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
3929
|
+
"text-[color:var(--deframe-widget-color-text-primary)]"
|
|
3930
|
+
),
|
|
3931
|
+
children: "Troca Aprovada!"
|
|
3932
|
+
}
|
|
3933
|
+
),
|
|
3934
|
+
/* @__PURE__ */ jsx(
|
|
3935
|
+
"span",
|
|
3936
|
+
{
|
|
3937
|
+
"data-test-id": "swap-success-simple-subtitle",
|
|
3938
|
+
className: twMerge(
|
|
3939
|
+
"[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
|
|
3940
|
+
"[font-weight:var(--deframe-widget-font-weight-regular)]",
|
|
3941
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
3942
|
+
"text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
3943
|
+
"max-w-[260px]"
|
|
3676
3944
|
),
|
|
3677
|
-
children:
|
|
3945
|
+
children: "Seu saldo foi atualizado."
|
|
3678
3946
|
}
|
|
3679
3947
|
)
|
|
3680
3948
|
]
|
|
@@ -3819,49 +4087,67 @@ var SwapTransactionFailedViewSimple = ({
|
|
|
3819
4087
|
return /* @__PURE__ */ jsxs(
|
|
3820
4088
|
"div",
|
|
3821
4089
|
{
|
|
3822
|
-
"data-test-id": "swap-failed-simple-
|
|
4090
|
+
"data-test-id": "swap-failed-simple-wrapper",
|
|
3823
4091
|
className: twMerge(
|
|
3824
|
-
"
|
|
3825
|
-
|
|
3826
|
-
|
|
3827
|
-
"
|
|
3828
|
-
"rounded-[
|
|
3829
|
-
"
|
|
3830
|
-
"
|
|
4092
|
+
"relative overflow-hidden",
|
|
4093
|
+
`min-h-[${SWAP_SIMPLE_MIN_HEIGHT}px]`,
|
|
4094
|
+
`w-[${SWAP_SIMPLE_WIDTH}px] max-w-[calc(100%-32px)] box-border`,
|
|
4095
|
+
"bg-[var(--deframe-widget-color-bg-secondary)]",
|
|
4096
|
+
"rounded-[var(--deframe-widget-size-radius-md)]",
|
|
4097
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
4098
|
+
"font-[var(--deframe-widget-font-family)]"
|
|
3831
4099
|
),
|
|
3832
4100
|
children: [
|
|
3833
|
-
/* @__PURE__ */ jsx(
|
|
4101
|
+
/* @__PURE__ */ jsx("div", { "data-test-id": "swap-failed-simple-skeleton", children: /* @__PURE__ */ jsx(SwapFormSkeleton, {}) }),
|
|
3834
4102
|
/* @__PURE__ */ jsxs(
|
|
3835
4103
|
"div",
|
|
3836
4104
|
{
|
|
3837
|
-
"data-test-id": "swap-failed-simple-
|
|
3838
|
-
className:
|
|
4105
|
+
"data-test-id": "swap-failed-simple-screen",
|
|
4106
|
+
className: twMerge(
|
|
4107
|
+
"absolute inset-0 z-10",
|
|
4108
|
+
"flex flex-col items-center justify-center",
|
|
4109
|
+
"gap-[var(--deframe-widget-size-gap-lg)]",
|
|
4110
|
+
"px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
|
|
4111
|
+
"rounded-[inherit]",
|
|
4112
|
+
"backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
|
|
4113
|
+
"bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
|
|
4114
|
+
),
|
|
3839
4115
|
children: [
|
|
3840
|
-
/* @__PURE__ */ jsx(
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
"data-test-id": "swap-failed-simple-title",
|
|
3844
|
-
className: twMerge(
|
|
3845
|
-
"[font-size:22px] [line-height:1.25]",
|
|
3846
|
-
"[font-weight:var(--deframe-widget-font-weight-bold)]",
|
|
3847
|
-
"font-[var(--deframe-widget-font-family)]",
|
|
3848
|
-
"text-[color:var(--deframe-widget-color-text-primary)]"
|
|
3849
|
-
),
|
|
3850
|
-
children: errorTitle
|
|
3851
|
-
}
|
|
3852
|
-
),
|
|
3853
|
-
/* @__PURE__ */ jsx(
|
|
3854
|
-
"span",
|
|
4116
|
+
/* @__PURE__ */ jsx(ErrorIcon, {}),
|
|
4117
|
+
/* @__PURE__ */ jsxs(
|
|
4118
|
+
"div",
|
|
3855
4119
|
{
|
|
3856
|
-
"data-test-id": "swap-failed-simple-
|
|
3857
|
-
className:
|
|
3858
|
-
|
|
3859
|
-
|
|
3860
|
-
|
|
3861
|
-
|
|
3862
|
-
|
|
3863
|
-
|
|
3864
|
-
|
|
4120
|
+
"data-test-id": "swap-failed-simple-copy",
|
|
4121
|
+
className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
|
|
4122
|
+
children: [
|
|
4123
|
+
/* @__PURE__ */ jsx(
|
|
4124
|
+
"span",
|
|
4125
|
+
{
|
|
4126
|
+
"data-test-id": "swap-failed-simple-title",
|
|
4127
|
+
className: twMerge(
|
|
4128
|
+
"[font-size:22px] [line-height:1.25]",
|
|
4129
|
+
"[font-weight:var(--deframe-widget-font-weight-bold)]",
|
|
4130
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
4131
|
+
"text-[color:var(--deframe-widget-color-text-primary)]"
|
|
4132
|
+
),
|
|
4133
|
+
children: "Troca Falhou"
|
|
4134
|
+
}
|
|
4135
|
+
),
|
|
4136
|
+
/* @__PURE__ */ jsx(
|
|
4137
|
+
"span",
|
|
4138
|
+
{
|
|
4139
|
+
"data-test-id": "swap-failed-simple-subtitle",
|
|
4140
|
+
className: twMerge(
|
|
4141
|
+
"[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
|
|
4142
|
+
"[font-weight:var(--deframe-widget-font-weight-regular)]",
|
|
4143
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
4144
|
+
"text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
4145
|
+
"max-w-[260px]"
|
|
4146
|
+
),
|
|
4147
|
+
children: "Tente novamente mais tarde."
|
|
4148
|
+
}
|
|
4149
|
+
)
|
|
4150
|
+
]
|
|
3865
4151
|
}
|
|
3866
4152
|
)
|
|
3867
4153
|
]
|
|
@@ -4514,70 +4800,2307 @@ var SwapFormView = ({
|
|
|
4514
4800
|
)
|
|
4515
4801
|
] });
|
|
4516
4802
|
};
|
|
4517
|
-
var
|
|
4803
|
+
var SwapFromCardViewSimple = ({
|
|
4518
4804
|
labels,
|
|
4519
|
-
|
|
4520
|
-
|
|
4521
|
-
|
|
4522
|
-
|
|
4523
|
-
|
|
4524
|
-
|
|
4525
|
-
|
|
4526
|
-
|
|
4805
|
+
selectedToken,
|
|
4806
|
+
onTokenClick,
|
|
4807
|
+
onNetworkAndAssetClick,
|
|
4808
|
+
balanceFormatted,
|
|
4809
|
+
onBalanceClick,
|
|
4810
|
+
chainLabel,
|
|
4811
|
+
chainImage,
|
|
4812
|
+
amountValue,
|
|
4813
|
+
amountHasError,
|
|
4814
|
+
onAmountChange,
|
|
4815
|
+
amountUsdFormatted,
|
|
4816
|
+
isAmountUsdLoading,
|
|
4817
|
+
field,
|
|
4818
|
+
percentageOptions,
|
|
4819
|
+
onPercentageClick,
|
|
4820
|
+
selectedPercentage = null,
|
|
4821
|
+
maxLabel = "Max.",
|
|
4822
|
+
errorMessage = "Saldo insuficiente para realizar a troca.",
|
|
4823
|
+
errorActionLabel = "Adicionar via PIX",
|
|
4824
|
+
onErrorAction
|
|
4825
|
+
}) => {
|
|
4826
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
4827
|
+
const hideTimeout = useRef(null);
|
|
4828
|
+
const handleMouseEnter = useCallback(() => {
|
|
4829
|
+
if (hideTimeout.current) {
|
|
4830
|
+
clearTimeout(hideTimeout.current);
|
|
4831
|
+
hideTimeout.current = null;
|
|
4832
|
+
}
|
|
4833
|
+
setIsHovered(true);
|
|
4834
|
+
}, []);
|
|
4835
|
+
const handleMouseLeave = useCallback(() => {
|
|
4836
|
+
hideTimeout.current = setTimeout(() => setIsHovered(false), 150);
|
|
4837
|
+
}, []);
|
|
4838
|
+
const wrapperClasses = twMerge(
|
|
4839
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
4840
|
+
"border",
|
|
4841
|
+
"px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
|
|
4842
|
+
"transition-[border-color,background] duration-200",
|
|
4843
|
+
amountHasError ? "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)]" : "border-[color:var(--deframe-widget-color-border-secondary)] bg-[var(--deframe-widget-color-bg-secondary)]"
|
|
4844
|
+
);
|
|
4845
|
+
const isEmpty = !amountValue || Number(amountValue) === 0;
|
|
4846
|
+
const showChips = isHovered && percentageOptions && percentageOptions.length > 0 && onPercentageClick;
|
|
4847
|
+
return /* @__PURE__ */ jsxs(
|
|
4848
|
+
"div",
|
|
4849
|
+
{
|
|
4850
|
+
"data-test-id": "swap-from-card-simple",
|
|
4851
|
+
className: wrapperClasses,
|
|
4852
|
+
onMouseEnter: handleMouseEnter,
|
|
4853
|
+
onMouseLeave: handleMouseLeave,
|
|
4854
|
+
children: [
|
|
4855
|
+
/* @__PURE__ */ jsxs(
|
|
4856
|
+
"div",
|
|
4857
|
+
{
|
|
4858
|
+
"data-test-id": "swap-from-card-simple-top-row",
|
|
4859
|
+
className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
|
|
4860
|
+
children: [
|
|
4861
|
+
/* @__PURE__ */ jsx(
|
|
4862
|
+
TokenSelectorArea,
|
|
4863
|
+
{
|
|
4864
|
+
selectedToken,
|
|
4865
|
+
chainLabel,
|
|
4866
|
+
chainImage,
|
|
4867
|
+
onTokenClick: onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick,
|
|
4868
|
+
selectTokenLabel: labels.selectTokenLabel
|
|
4869
|
+
}
|
|
4870
|
+
),
|
|
4871
|
+
/* @__PURE__ */ jsx(
|
|
4872
|
+
"div",
|
|
4873
|
+
{
|
|
4874
|
+
"data-test-id": "swap-from-card-simple-divider",
|
|
4875
|
+
className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
|
|
4876
|
+
}
|
|
4877
|
+
),
|
|
4878
|
+
/* @__PURE__ */ jsxs(
|
|
4879
|
+
"div",
|
|
4880
|
+
{
|
|
4881
|
+
"data-test-id": "swap-from-card-simple-amount-wrapper",
|
|
4882
|
+
className: "flex flex-col items-end flex-1 min-w-0",
|
|
4883
|
+
children: [
|
|
4884
|
+
/* @__PURE__ */ jsx(
|
|
4885
|
+
"input",
|
|
4886
|
+
__spreadProps(__spreadValues({
|
|
4887
|
+
"data-test-id": "swap-from-card-simple-amount-input",
|
|
4888
|
+
type: "text",
|
|
4889
|
+
inputMode: "decimal",
|
|
4890
|
+
autoComplete: "off",
|
|
4891
|
+
placeholder: "0",
|
|
4892
|
+
"aria-label": labels.amountPlaceholder,
|
|
4893
|
+
value: amountValue || "",
|
|
4894
|
+
className: twMerge(
|
|
4895
|
+
"bg-transparent border-none outline-none",
|
|
4896
|
+
"text-right",
|
|
4897
|
+
"text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
|
|
4898
|
+
"w-full px-[var(--deframe-widget-size-padding-x-none)] py-[var(--deframe-widget-size-padding-y-none)]",
|
|
4899
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
4900
|
+
"placeholder:text-[color:var(--deframe-widget-color-text-tertiary)]",
|
|
4901
|
+
isEmpty ? "text-[color:var(--deframe-widget-color-text-tertiary)]" : "text-[color:var(--deframe-widget-color-text-primary)]"
|
|
4902
|
+
)
|
|
4903
|
+
}, field ? { name: field.name, onBlur: field.onBlur, ref: field.ref } : {}), {
|
|
4904
|
+
onChange: (e) => onAmountChange(e.target.value),
|
|
4905
|
+
onWheel: (e) => {
|
|
4906
|
+
e.currentTarget.blur();
|
|
4907
|
+
}
|
|
4908
|
+
})
|
|
4909
|
+
),
|
|
4910
|
+
/* @__PURE__ */ jsx(
|
|
4911
|
+
"span",
|
|
4912
|
+
{
|
|
4913
|
+
"data-test-id": "swap-from-card-simple-usd-conversion",
|
|
4914
|
+
className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
|
|
4915
|
+
children: isAmountUsdLoading ? /* @__PURE__ */ jsx(LoadingDots, {}) : amountUsdFormatted
|
|
4916
|
+
}
|
|
4917
|
+
)
|
|
4918
|
+
]
|
|
4919
|
+
}
|
|
4920
|
+
)
|
|
4921
|
+
]
|
|
4922
|
+
}
|
|
4923
|
+
),
|
|
4924
|
+
selectedToken && /* @__PURE__ */ jsx(
|
|
4925
|
+
"div",
|
|
4926
|
+
{
|
|
4927
|
+
"data-test-id": "swap-from-card-simple-balance-row",
|
|
4928
|
+
className: "flex items-center justify-between mt-[var(--deframe-widget-size-gap-sm)]",
|
|
4929
|
+
children: onBalanceClick ? /* @__PURE__ */ jsxs(
|
|
4930
|
+
"button",
|
|
4931
|
+
{
|
|
4932
|
+
"data-test-id": "swap-from-card-simple-balance",
|
|
4933
|
+
type: "button",
|
|
4934
|
+
onClick: onBalanceClick,
|
|
4935
|
+
"aria-label": `${labels.balanceLabel}: ${balanceFormatted}`,
|
|
4936
|
+
className: twMerge(
|
|
4937
|
+
"text-[13px] font-[var(--deframe-widget-font-family)] cursor-pointer",
|
|
4938
|
+
"bg-transparent border-none outline-none p-0",
|
|
4939
|
+
"text-[color:var(--deframe-widget-color-text-tertiary)]",
|
|
4940
|
+
"hover:text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
4941
|
+
"transition-colors duration-150"
|
|
4942
|
+
),
|
|
4943
|
+
children: [
|
|
4944
|
+
labels.balanceLabel,
|
|
4945
|
+
":",
|
|
4946
|
+
" ",
|
|
4947
|
+
/* @__PURE__ */ jsx(
|
|
4948
|
+
"span",
|
|
4949
|
+
{
|
|
4950
|
+
"data-test-id": "swap-from-card-simple-balance-value",
|
|
4951
|
+
className: amountHasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
4952
|
+
children: balanceFormatted
|
|
4953
|
+
}
|
|
4954
|
+
)
|
|
4955
|
+
]
|
|
4956
|
+
}
|
|
4957
|
+
) : /* @__PURE__ */ jsxs(
|
|
4958
|
+
"span",
|
|
4959
|
+
{
|
|
4960
|
+
"data-test-id": "swap-from-card-simple-balance",
|
|
4961
|
+
className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
|
|
4962
|
+
children: [
|
|
4963
|
+
labels.balanceLabel,
|
|
4964
|
+
":",
|
|
4965
|
+
" ",
|
|
4966
|
+
/* @__PURE__ */ jsx(
|
|
4967
|
+
"span",
|
|
4968
|
+
{
|
|
4969
|
+
"data-test-id": "swap-from-card-simple-balance-value",
|
|
4970
|
+
className: amountHasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
4971
|
+
children: balanceFormatted
|
|
4972
|
+
}
|
|
4973
|
+
)
|
|
4974
|
+
]
|
|
4975
|
+
}
|
|
4976
|
+
)
|
|
4977
|
+
}
|
|
4978
|
+
),
|
|
4979
|
+
/* @__PURE__ */ jsx(AnimatePresence, { children: showChips && /* @__PURE__ */ jsx(
|
|
4980
|
+
motion.div,
|
|
4981
|
+
{
|
|
4982
|
+
"data-test-id": "swap-from-card-simple-chips",
|
|
4983
|
+
initial: { opacity: 0, height: 0 },
|
|
4984
|
+
animate: { opacity: 1, height: "auto" },
|
|
4985
|
+
exit: { opacity: 0, height: 0 },
|
|
4986
|
+
transition: { duration: 0.15 },
|
|
4987
|
+
className: "overflow-hidden mt-[var(--deframe-widget-size-gap-sm)]",
|
|
4988
|
+
children: /* @__PURE__ */ jsx(
|
|
4989
|
+
"div",
|
|
4990
|
+
{
|
|
4991
|
+
"data-test-id": "swap-from-card-simple-chips-row",
|
|
4992
|
+
className: "flex gap-[6px] items-center",
|
|
4993
|
+
children: percentageOptions.map((pct, i) => {
|
|
4994
|
+
const isLast = i === percentageOptions.length - 1;
|
|
4995
|
+
const isActive = pct === selectedPercentage;
|
|
4996
|
+
const chipLabel = isLast ? maxLabel : `${pct / 100}%`;
|
|
4997
|
+
return /* @__PURE__ */ jsx(
|
|
4998
|
+
ChipPill,
|
|
4999
|
+
{
|
|
5000
|
+
label: chipLabel,
|
|
5001
|
+
active: isActive,
|
|
5002
|
+
onClick: () => onPercentageClick(pct)
|
|
5003
|
+
},
|
|
5004
|
+
pct
|
|
5005
|
+
);
|
|
5006
|
+
})
|
|
5007
|
+
}
|
|
5008
|
+
)
|
|
5009
|
+
}
|
|
5010
|
+
) }),
|
|
5011
|
+
amountHasError && /* @__PURE__ */ jsx(
|
|
5012
|
+
"div",
|
|
5013
|
+
{
|
|
5014
|
+
"data-test-id": "swap-from-card-simple-error",
|
|
5015
|
+
className: "mt-[var(--deframe-widget-size-gap-sm)]",
|
|
5016
|
+
children: /* @__PURE__ */ jsx(
|
|
5017
|
+
InlineNotificationBar,
|
|
5018
|
+
{
|
|
5019
|
+
message: errorMessage,
|
|
5020
|
+
actionLabel: errorActionLabel,
|
|
5021
|
+
onAction: onErrorAction
|
|
5022
|
+
}
|
|
5023
|
+
)
|
|
5024
|
+
}
|
|
5025
|
+
)
|
|
5026
|
+
]
|
|
5027
|
+
}
|
|
5028
|
+
);
|
|
5029
|
+
};
|
|
5030
|
+
function TokenSelectorArea({
|
|
5031
|
+
selectedToken,
|
|
5032
|
+
chainLabel,
|
|
5033
|
+
chainImage,
|
|
5034
|
+
onTokenClick,
|
|
5035
|
+
selectTokenLabel
|
|
5036
|
+
}) {
|
|
5037
|
+
return /* @__PURE__ */ jsx(
|
|
5038
|
+
"button",
|
|
5039
|
+
{
|
|
5040
|
+
"data-test-id": "swap-from-card-simple-token-selector",
|
|
5041
|
+
type: "button",
|
|
5042
|
+
onClick: onTokenClick,
|
|
5043
|
+
"aria-label": selectedToken ? `Select token \u2014 currently ${selectedToken.symbol} on ${chainLabel}` : selectTokenLabel,
|
|
5044
|
+
className: twMerge(
|
|
5045
|
+
"inline-flex items-center gap-[10px]",
|
|
5046
|
+
"py-[var(--deframe-widget-size-padding-y-sm)] px-[10px]",
|
|
5047
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
5048
|
+
"bg-[var(--deframe-widget-color-bg-tertiary)]",
|
|
5049
|
+
"border-none outline-none",
|
|
5050
|
+
"transition-[background] duration-150",
|
|
5051
|
+
"flex-shrink-0",
|
|
5052
|
+
"cursor-pointer hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_72%,transparent)]"
|
|
5053
|
+
),
|
|
5054
|
+
children: selectedToken ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
5055
|
+
/* @__PURE__ */ jsx(
|
|
5056
|
+
TokenIconWithBadge,
|
|
5057
|
+
{
|
|
5058
|
+
token: selectedToken,
|
|
5059
|
+
chainLabel,
|
|
5060
|
+
chainImage
|
|
5061
|
+
}
|
|
5062
|
+
),
|
|
5063
|
+
/* @__PURE__ */ jsxs(
|
|
5064
|
+
"div",
|
|
5065
|
+
{
|
|
5066
|
+
"data-test-id": "swap-from-card-simple-token-info",
|
|
5067
|
+
className: "flex flex-col items-start min-w-0",
|
|
5068
|
+
children: [
|
|
5069
|
+
/* @__PURE__ */ jsx(
|
|
5070
|
+
"span",
|
|
5071
|
+
{
|
|
5072
|
+
"data-test-id": "swap-from-card-simple-token-symbol",
|
|
5073
|
+
className: twMerge(
|
|
5074
|
+
"text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2]",
|
|
5075
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
5076
|
+
"text-[color:var(--deframe-widget-color-text-primary)]"
|
|
5077
|
+
),
|
|
5078
|
+
children: selectedToken.symbol
|
|
5079
|
+
}
|
|
5080
|
+
),
|
|
5081
|
+
/* @__PURE__ */ jsx(
|
|
5082
|
+
"span",
|
|
5083
|
+
{
|
|
5084
|
+
"data-test-id": "swap-from-card-simple-token-network",
|
|
5085
|
+
className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-tertiary)] uppercase tracking-[0.04em] font-[var(--deframe-widget-font-family)] leading-[1.2]",
|
|
5086
|
+
children: chainLabel
|
|
5087
|
+
}
|
|
5088
|
+
)
|
|
5089
|
+
]
|
|
5090
|
+
}
|
|
5091
|
+
),
|
|
5092
|
+
/* @__PURE__ */ jsx(ChevronDown, {})
|
|
5093
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
5094
|
+
/* @__PURE__ */ jsx(
|
|
5095
|
+
"div",
|
|
5096
|
+
{
|
|
5097
|
+
"data-test-id": "swap-from-card-simple-token-placeholder-icon",
|
|
5098
|
+
className: "w-[38px] h-[38px] rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex-shrink-0"
|
|
5099
|
+
}
|
|
5100
|
+
),
|
|
5101
|
+
/* @__PURE__ */ jsx(
|
|
5102
|
+
"span",
|
|
5103
|
+
{
|
|
5104
|
+
"data-test-id": "swap-from-card-simple-token-placeholder-label",
|
|
5105
|
+
className: twMerge(
|
|
5106
|
+
"text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
|
|
5107
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
5108
|
+
"text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
5109
|
+
"whitespace-nowrap"
|
|
5110
|
+
),
|
|
5111
|
+
children: selectTokenLabel
|
|
5112
|
+
}
|
|
5113
|
+
),
|
|
5114
|
+
/* @__PURE__ */ jsx(ChevronDown, {})
|
|
5115
|
+
] })
|
|
5116
|
+
}
|
|
5117
|
+
);
|
|
5118
|
+
}
|
|
5119
|
+
function TokenIconWithBadge({ token, chainLabel, chainImage }) {
|
|
5120
|
+
const [imgError, setImgError] = useState(false);
|
|
5121
|
+
const [badgeError, setBadgeError] = useState(false);
|
|
5122
|
+
const size = 38;
|
|
5123
|
+
const badgeSize = 16;
|
|
5124
|
+
return /* @__PURE__ */ jsxs(
|
|
5125
|
+
"div",
|
|
5126
|
+
{
|
|
5127
|
+
"data-test-id": "swap-from-card-simple-token-icon",
|
|
5128
|
+
className: "relative flex-shrink-0",
|
|
5129
|
+
style: { width: size, height: size },
|
|
5130
|
+
children: [
|
|
5131
|
+
token.logoURI && !imgError ? /* @__PURE__ */ jsx(
|
|
5132
|
+
"img",
|
|
5133
|
+
{
|
|
5134
|
+
"data-test-id": "swap-from-card-simple-token-icon-img",
|
|
5135
|
+
src: token.logoURI,
|
|
5136
|
+
alt: token.symbol,
|
|
5137
|
+
width: size,
|
|
5138
|
+
height: size,
|
|
5139
|
+
className: "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 object-cover",
|
|
5140
|
+
onError: () => setImgError(true)
|
|
5141
|
+
}
|
|
5142
|
+
) : /* @__PURE__ */ jsx(
|
|
5143
|
+
"div",
|
|
5144
|
+
{
|
|
5145
|
+
"data-test-id": "swap-from-card-simple-token-icon-fallback",
|
|
5146
|
+
className: twMerge(
|
|
5147
|
+
"rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0",
|
|
5148
|
+
"flex items-center justify-center",
|
|
5149
|
+
"[font-weight:var(--deframe-widget-font-weight-bold)]",
|
|
5150
|
+
"text-[color:var(--deframe-widget-color-text-primary-dark)]",
|
|
5151
|
+
"bg-[var(--deframe-widget-color-bg-tertiary)]"
|
|
5152
|
+
),
|
|
5153
|
+
style: { width: size, height: size, fontSize: size * 0.33 },
|
|
5154
|
+
children: token.symbol.slice(0, 2).toUpperCase()
|
|
5155
|
+
}
|
|
5156
|
+
),
|
|
5157
|
+
chainImage && !badgeError ? /* @__PURE__ */ jsx(
|
|
5158
|
+
"div",
|
|
5159
|
+
{
|
|
5160
|
+
"data-test-id": "swap-from-card-simple-token-badge",
|
|
5161
|
+
className: "absolute -bottom-0.5 -right-0.5 rounded-[var(--deframe-widget-size-radius-full)] shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]",
|
|
5162
|
+
children: /* @__PURE__ */ jsx(
|
|
5163
|
+
"img",
|
|
5164
|
+
{
|
|
5165
|
+
"data-test-id": "swap-from-card-simple-token-badge-img",
|
|
5166
|
+
src: chainImage,
|
|
5167
|
+
alt: chainLabel,
|
|
5168
|
+
width: badgeSize,
|
|
5169
|
+
height: badgeSize,
|
|
5170
|
+
className: "rounded-[var(--deframe-widget-size-radius-full)] object-cover",
|
|
5171
|
+
onError: () => setBadgeError(true)
|
|
5172
|
+
}
|
|
5173
|
+
)
|
|
5174
|
+
}
|
|
5175
|
+
) : chainLabel ? /* @__PURE__ */ jsx(
|
|
5176
|
+
"div",
|
|
5177
|
+
{
|
|
5178
|
+
"data-test-id": "swap-from-card-simple-token-badge",
|
|
5179
|
+
className: twMerge(
|
|
5180
|
+
"absolute -bottom-0.5 -right-0.5",
|
|
5181
|
+
"rounded-[var(--deframe-widget-size-radius-full)]",
|
|
5182
|
+
"shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]",
|
|
5183
|
+
"bg-[var(--deframe-widget-color-bg-tertiary)]",
|
|
5184
|
+
"flex items-center justify-center",
|
|
5185
|
+
"[font-weight:var(--deframe-widget-font-weight-bold)]",
|
|
5186
|
+
"text-[color:var(--deframe-widget-color-text-primary-dark)]"
|
|
5187
|
+
),
|
|
5188
|
+
style: { width: badgeSize, height: badgeSize, fontSize: badgeSize * 0.45 },
|
|
5189
|
+
children: chainLabel.slice(0, 1).toUpperCase()
|
|
5190
|
+
}
|
|
5191
|
+
) : null
|
|
5192
|
+
]
|
|
5193
|
+
}
|
|
5194
|
+
);
|
|
5195
|
+
}
|
|
5196
|
+
function ChevronDown() {
|
|
5197
|
+
return /* @__PURE__ */ jsx(
|
|
5198
|
+
"svg",
|
|
5199
|
+
{
|
|
5200
|
+
"data-test-id": "swap-from-card-simple-chevron",
|
|
5201
|
+
width: "14",
|
|
5202
|
+
height: "14",
|
|
5203
|
+
viewBox: "0 0 24 24",
|
|
5204
|
+
fill: "none",
|
|
5205
|
+
stroke: "currentColor",
|
|
5206
|
+
strokeWidth: "2.5",
|
|
5207
|
+
strokeLinecap: "round",
|
|
5208
|
+
strokeLinejoin: "round",
|
|
5209
|
+
className: "flex-shrink-0 text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
5210
|
+
"aria-hidden": "true",
|
|
5211
|
+
children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
|
|
5212
|
+
}
|
|
5213
|
+
);
|
|
5214
|
+
}
|
|
5215
|
+
function ChipPill({ label, active, onClick }) {
|
|
5216
|
+
const baseClasses = twMerge(
|
|
5217
|
+
"inline-flex items-center justify-center",
|
|
5218
|
+
"py-[3px] px-[10px]",
|
|
5219
|
+
"rounded-[var(--deframe-widget-size-radius-full)]",
|
|
5220
|
+
"cursor-pointer",
|
|
5221
|
+
"text-[12px]",
|
|
5222
|
+
"transition-all duration-150",
|
|
5223
|
+
"outline-none",
|
|
5224
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
5225
|
+
"whitespace-nowrap",
|
|
5226
|
+
"border"
|
|
5227
|
+
);
|
|
5228
|
+
const stateClasses = active ? twMerge(
|
|
5229
|
+
"border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)]",
|
|
5230
|
+
"bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
|
|
5231
|
+
"text-[color:var(--deframe-widget-color-brand-primary)]",
|
|
5232
|
+
"[font-weight:var(--deframe-widget-font-weight-semibold)]"
|
|
5233
|
+
) : twMerge(
|
|
5234
|
+
"border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
5235
|
+
"bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_84%,transparent)]",
|
|
5236
|
+
"text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
5237
|
+
"[font-weight:var(--deframe-widget-font-weight-regular)]",
|
|
5238
|
+
"hover:border-[color:var(--deframe-widget-color-border-primary)]",
|
|
5239
|
+
"hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
|
|
5240
|
+
"hover:text-[color:var(--deframe-widget-color-text-primary)]"
|
|
5241
|
+
);
|
|
5242
|
+
return /* @__PURE__ */ jsx(
|
|
5243
|
+
"button",
|
|
5244
|
+
{
|
|
5245
|
+
"data-test-id": "swap-from-card-simple-chip",
|
|
5246
|
+
type: "button",
|
|
5247
|
+
onClick,
|
|
5248
|
+
"aria-label": label,
|
|
5249
|
+
className: twMerge(baseClasses, stateClasses),
|
|
5250
|
+
children: /* @__PURE__ */ jsx("span", { "data-test-id": "swap-from-card-simple-chip-label", children: label })
|
|
5251
|
+
}
|
|
5252
|
+
);
|
|
5253
|
+
}
|
|
5254
|
+
function InlineNotificationBar({ message, actionLabel, onAction }) {
|
|
5255
|
+
const wrapperClasses = twMerge(
|
|
5256
|
+
"relative flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
|
|
5257
|
+
"py-[7px] pr-[10px] pl-[14px]",
|
|
5258
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
5259
|
+
"border",
|
|
5260
|
+
"overflow-hidden",
|
|
5261
|
+
"bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)]",
|
|
5262
|
+
"border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)]"
|
|
5263
|
+
);
|
|
5264
|
+
return /* @__PURE__ */ jsxs(
|
|
5265
|
+
"div",
|
|
5266
|
+
{
|
|
5267
|
+
"data-test-id": "swap-from-card-simple-notification",
|
|
5268
|
+
role: "alert",
|
|
5269
|
+
className: wrapperClasses,
|
|
5270
|
+
children: [
|
|
5271
|
+
/* @__PURE__ */ jsx(
|
|
5272
|
+
"div",
|
|
5273
|
+
{
|
|
5274
|
+
"data-test-id": "swap-from-card-simple-notification-accent",
|
|
5275
|
+
className: twMerge(
|
|
5276
|
+
"absolute left-0 top-0 bottom-0 w-[3px]",
|
|
5277
|
+
"rounded-[var(--deframe-widget-size-radius-sm)_0_0_var(--deframe-widget-size-radius-sm)]",
|
|
5278
|
+
"bg-[var(--deframe-widget-color-state-error)]"
|
|
5279
|
+
)
|
|
5280
|
+
}
|
|
5281
|
+
),
|
|
5282
|
+
/* @__PURE__ */ jsx(
|
|
5283
|
+
"div",
|
|
5284
|
+
{
|
|
5285
|
+
"data-test-id": "swap-from-card-simple-notification-dot",
|
|
5286
|
+
className: "w-[6px] h-[6px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 bg-[var(--deframe-widget-color-state-error)]"
|
|
5287
|
+
}
|
|
5288
|
+
),
|
|
5289
|
+
/* @__PURE__ */ jsx(
|
|
5290
|
+
"span",
|
|
5291
|
+
{
|
|
5292
|
+
"data-test-id": "swap-from-card-simple-notification-message",
|
|
5293
|
+
className: "flex-1 text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] font-[var(--deframe-widget-font-family)] leading-[1.4]",
|
|
5294
|
+
children: message
|
|
5295
|
+
}
|
|
5296
|
+
),
|
|
5297
|
+
onAction && /* @__PURE__ */ jsxs(
|
|
5298
|
+
"button",
|
|
5299
|
+
{
|
|
5300
|
+
"data-test-id": "swap-from-card-simple-notification-action",
|
|
5301
|
+
type: "button",
|
|
5302
|
+
onClick: onAction,
|
|
5303
|
+
"aria-label": actionLabel,
|
|
5304
|
+
className: twMerge(
|
|
5305
|
+
"flex-shrink-0 bg-none border-none cursor-pointer",
|
|
5306
|
+
"text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
|
|
5307
|
+
"py-[var(--deframe-widget-size-padding-y-none)] px-[var(--deframe-widget-size-padding-x-xs)]",
|
|
5308
|
+
"outline-none font-[var(--deframe-widget-font-family)] whitespace-nowrap",
|
|
5309
|
+
"text-[color:var(--deframe-widget-color-state-error)]"
|
|
5310
|
+
),
|
|
5311
|
+
children: [
|
|
5312
|
+
actionLabel,
|
|
5313
|
+
" \u2192"
|
|
5314
|
+
]
|
|
5315
|
+
}
|
|
5316
|
+
)
|
|
5317
|
+
]
|
|
5318
|
+
}
|
|
5319
|
+
);
|
|
5320
|
+
}
|
|
5321
|
+
function IconCircle({ item, size = 36 }) {
|
|
5322
|
+
const [imgError, setImgError] = React6__default.useState(false);
|
|
5323
|
+
if (item.iconUrl && !imgError) {
|
|
5324
|
+
return /* @__PURE__ */ jsx(
|
|
5325
|
+
"img",
|
|
5326
|
+
{
|
|
5327
|
+
"data-test-id": "icon-circle-img",
|
|
5328
|
+
src: item.iconUrl,
|
|
5329
|
+
alt: item.name,
|
|
5330
|
+
width: size,
|
|
5331
|
+
height: size,
|
|
5332
|
+
className: "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 object-cover",
|
|
5333
|
+
onError: () => setImgError(true)
|
|
5334
|
+
}
|
|
5335
|
+
);
|
|
5336
|
+
}
|
|
5337
|
+
return /* @__PURE__ */ jsx(
|
|
5338
|
+
"div",
|
|
5339
|
+
{
|
|
5340
|
+
"data-test-id": "icon-circle-fallback",
|
|
5341
|
+
className: "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 flex items-center justify-center [font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-text-primary-dark)]",
|
|
5342
|
+
style: {
|
|
5343
|
+
width: size,
|
|
5344
|
+
height: size,
|
|
5345
|
+
background: item.color,
|
|
5346
|
+
fontSize: size * 0.33,
|
|
5347
|
+
letterSpacing: "-0.01em"
|
|
5348
|
+
},
|
|
5349
|
+
children: item.name.slice(0, 2).toUpperCase()
|
|
5350
|
+
}
|
|
5351
|
+
);
|
|
5352
|
+
}
|
|
5353
|
+
function TokenIcon2({
|
|
5354
|
+
token,
|
|
5355
|
+
size = 38,
|
|
5356
|
+
badge,
|
|
5357
|
+
badgeSize = 16
|
|
5358
|
+
}) {
|
|
5359
|
+
return /* @__PURE__ */ jsxs(
|
|
5360
|
+
"div",
|
|
5361
|
+
{
|
|
5362
|
+
"data-test-id": "swap-to-simple-token-icon",
|
|
5363
|
+
className: "relative flex-shrink-0",
|
|
5364
|
+
style: { width: size, height: size },
|
|
5365
|
+
children: [
|
|
5366
|
+
/* @__PURE__ */ jsx(IconCircle, { item: token, size }),
|
|
5367
|
+
badge && /* @__PURE__ */ jsx(
|
|
5368
|
+
"div",
|
|
5369
|
+
{
|
|
5370
|
+
"data-test-id": "swap-to-simple-token-badge",
|
|
5371
|
+
className: "absolute -bottom-0.5 -right-0.5 rounded-[var(--deframe-widget-size-radius-full)] shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]",
|
|
5372
|
+
children: /* @__PURE__ */ jsx(IconCircle, { item: badge, size: badgeSize })
|
|
5373
|
+
}
|
|
5374
|
+
)
|
|
5375
|
+
]
|
|
5376
|
+
}
|
|
5377
|
+
);
|
|
5378
|
+
}
|
|
5379
|
+
var SwapToCardViewSimple = ({
|
|
5380
|
+
labels,
|
|
5381
|
+
selectedToken,
|
|
5382
|
+
onTokenClick,
|
|
5383
|
+
onNetworkAndAssetClick,
|
|
5384
|
+
balanceFormatted,
|
|
5385
|
+
balanceUsdFormatted,
|
|
5386
|
+
chainLabel,
|
|
5387
|
+
chainImage,
|
|
5388
|
+
outputAmount,
|
|
5389
|
+
isOutputLoading,
|
|
5390
|
+
outputUsdFormatted,
|
|
5391
|
+
isOutputUsdLoading
|
|
5392
|
+
}) => {
|
|
5393
|
+
const handleTokenClick = onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick;
|
|
5394
|
+
const isEmpty = !outputAmount || Number(outputAmount) === 0;
|
|
5395
|
+
const wrapperClasses = twMerge(
|
|
5396
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
5397
|
+
"border",
|
|
5398
|
+
"border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
5399
|
+
"bg-[var(--deframe-widget-color-bg-secondary)]",
|
|
5400
|
+
"px-[var(--deframe-widget-size-padding-x-md)]",
|
|
5401
|
+
"py-[var(--deframe-widget-size-padding-y-md)]",
|
|
5402
|
+
"font-[var(--deframe-widget-font-family)]"
|
|
5403
|
+
);
|
|
5404
|
+
const selectorBaseClasses = twMerge(
|
|
5405
|
+
"inline-flex items-center gap-[10px]",
|
|
5406
|
+
"py-[var(--deframe-widget-size-padding-y-sm)] px-[10px]",
|
|
5407
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
5408
|
+
"bg-[var(--deframe-widget-color-bg-tertiary)]",
|
|
5409
|
+
"border-none",
|
|
5410
|
+
"outline-none",
|
|
5411
|
+
"transition-[background] duration-150",
|
|
5412
|
+
"flex-shrink-0",
|
|
5413
|
+
"cursor-pointer hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_72%,transparent)]"
|
|
5414
|
+
);
|
|
5415
|
+
return /* @__PURE__ */ jsxs("div", { "data-test-id": "swap-to-card-view-simple", className: wrapperClasses, children: [
|
|
5416
|
+
/* @__PURE__ */ jsxs(
|
|
5417
|
+
"div",
|
|
5418
|
+
{
|
|
5419
|
+
"data-test-id": "swap-to-simple-top-row",
|
|
5420
|
+
className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
|
|
5421
|
+
children: [
|
|
5422
|
+
selectedToken ? /* @__PURE__ */ jsxs(
|
|
5423
|
+
"button",
|
|
5424
|
+
{
|
|
5425
|
+
type: "button",
|
|
5426
|
+
"data-test-id": "swap-to-simple-token-selector",
|
|
5427
|
+
onClick: handleTokenClick,
|
|
5428
|
+
"aria-label": `Select token \u2014 currently ${selectedToken.symbol} on ${chainLabel}`,
|
|
5429
|
+
className: selectorBaseClasses,
|
|
5430
|
+
children: [
|
|
5431
|
+
/* @__PURE__ */ jsx(
|
|
5432
|
+
TokenIcon2,
|
|
5433
|
+
{
|
|
5434
|
+
token: {
|
|
5435
|
+
name: selectedToken.symbol,
|
|
5436
|
+
color: "var(--deframe-widget-color-brand-secondary)",
|
|
5437
|
+
iconUrl: selectedToken.logoURI
|
|
5438
|
+
},
|
|
5439
|
+
size: 38,
|
|
5440
|
+
badge: chainLabel ? {
|
|
5441
|
+
name: chainLabel,
|
|
5442
|
+
color: "var(--deframe-widget-color-brand-secondary)",
|
|
5443
|
+
iconUrl: chainImage
|
|
5444
|
+
} : void 0,
|
|
5445
|
+
badgeSize: 16
|
|
5446
|
+
}
|
|
5447
|
+
),
|
|
5448
|
+
/* @__PURE__ */ jsxs(
|
|
5449
|
+
"div",
|
|
5450
|
+
{
|
|
5451
|
+
"data-test-id": "swap-to-simple-token-info",
|
|
5452
|
+
className: "flex flex-col items-start min-w-0",
|
|
5453
|
+
children: [
|
|
5454
|
+
/* @__PURE__ */ jsx(
|
|
5455
|
+
"span",
|
|
5456
|
+
{
|
|
5457
|
+
"data-test-id": "swap-to-simple-token-symbol",
|
|
5458
|
+
className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]",
|
|
5459
|
+
children: selectedToken.symbol
|
|
5460
|
+
}
|
|
5461
|
+
),
|
|
5462
|
+
/* @__PURE__ */ jsx(
|
|
5463
|
+
"span",
|
|
5464
|
+
{
|
|
5465
|
+
"data-test-id": "swap-to-simple-token-network",
|
|
5466
|
+
className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-tertiary)] uppercase tracking-[0.04em] font-[var(--deframe-widget-font-family)] leading-[1.2]",
|
|
5467
|
+
children: chainLabel
|
|
5468
|
+
}
|
|
5469
|
+
)
|
|
5470
|
+
]
|
|
5471
|
+
}
|
|
5472
|
+
),
|
|
5473
|
+
/* @__PURE__ */ jsx(
|
|
5474
|
+
"svg",
|
|
5475
|
+
{
|
|
5476
|
+
"data-test-id": "swap-to-simple-chevron",
|
|
5477
|
+
width: "14",
|
|
5478
|
+
height: "14",
|
|
5479
|
+
viewBox: "0 0 24 24",
|
|
5480
|
+
fill: "none",
|
|
5481
|
+
stroke: "currentColor",
|
|
5482
|
+
strokeWidth: "2.5",
|
|
5483
|
+
strokeLinecap: "round",
|
|
5484
|
+
strokeLinejoin: "round",
|
|
5485
|
+
className: "flex-shrink-0 text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
5486
|
+
"aria-hidden": "true",
|
|
5487
|
+
children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
|
|
5488
|
+
}
|
|
5489
|
+
)
|
|
5490
|
+
]
|
|
5491
|
+
}
|
|
5492
|
+
) : /* @__PURE__ */ jsxs(
|
|
5493
|
+
"button",
|
|
5494
|
+
{
|
|
5495
|
+
type: "button",
|
|
5496
|
+
"data-test-id": "swap-to-simple-token-placeholder",
|
|
5497
|
+
onClick: handleTokenClick,
|
|
5498
|
+
"aria-label": labels.selectTokenLabel,
|
|
5499
|
+
className: selectorBaseClasses,
|
|
5500
|
+
children: [
|
|
5501
|
+
/* @__PURE__ */ jsx(
|
|
5502
|
+
"div",
|
|
5503
|
+
{
|
|
5504
|
+
"data-test-id": "swap-to-simple-placeholder-circle",
|
|
5505
|
+
className: "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 bg-[var(--deframe-widget-color-bg-tertiary)]",
|
|
5506
|
+
style: { width: 38, height: 38 }
|
|
5507
|
+
}
|
|
5508
|
+
),
|
|
5509
|
+
/* @__PURE__ */ jsx(
|
|
5510
|
+
"span",
|
|
5511
|
+
{
|
|
5512
|
+
"data-test-id": "swap-to-simple-placeholder-label",
|
|
5513
|
+
className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-secondary)] whitespace-nowrap",
|
|
5514
|
+
children: labels.selectTokenLabel
|
|
5515
|
+
}
|
|
5516
|
+
),
|
|
5517
|
+
/* @__PURE__ */ jsx(
|
|
5518
|
+
"svg",
|
|
5519
|
+
{
|
|
5520
|
+
"data-test-id": "swap-to-simple-placeholder-chevron",
|
|
5521
|
+
width: "14",
|
|
5522
|
+
height: "14",
|
|
5523
|
+
viewBox: "0 0 24 24",
|
|
5524
|
+
fill: "none",
|
|
5525
|
+
stroke: "currentColor",
|
|
5526
|
+
strokeWidth: "2.5",
|
|
5527
|
+
strokeLinecap: "round",
|
|
5528
|
+
strokeLinejoin: "round",
|
|
5529
|
+
className: "flex-shrink-0 text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
5530
|
+
"aria-hidden": "true",
|
|
5531
|
+
children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
|
|
5532
|
+
}
|
|
5533
|
+
)
|
|
5534
|
+
]
|
|
5535
|
+
}
|
|
5536
|
+
),
|
|
5537
|
+
/* @__PURE__ */ jsx(
|
|
5538
|
+
"div",
|
|
5539
|
+
{
|
|
5540
|
+
"data-test-id": "swap-to-simple-divider",
|
|
5541
|
+
className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
|
|
5542
|
+
}
|
|
5543
|
+
),
|
|
5544
|
+
/* @__PURE__ */ jsxs(
|
|
5545
|
+
"div",
|
|
5546
|
+
{
|
|
5547
|
+
"data-test-id": "swap-to-simple-output-wrapper",
|
|
5548
|
+
className: "flex flex-col items-end flex-1 min-w-0",
|
|
5549
|
+
children: [
|
|
5550
|
+
isOutputLoading ? /* @__PURE__ */ jsxs(
|
|
5551
|
+
"span",
|
|
5552
|
+
{
|
|
5553
|
+
"data-test-id": "swap-to-simple-output-loading",
|
|
5554
|
+
className: twMerge(
|
|
5555
|
+
"text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
|
|
5556
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
5557
|
+
"text-[color:var(--deframe-widget-color-text-tertiary)]",
|
|
5558
|
+
"text-right",
|
|
5559
|
+
"flex items-center"
|
|
5560
|
+
),
|
|
5561
|
+
children: [
|
|
5562
|
+
labels.searchingQuoteLabel,
|
|
5563
|
+
/* @__PURE__ */ jsx(LoadingDots, {})
|
|
5564
|
+
]
|
|
5565
|
+
}
|
|
5566
|
+
) : /* @__PURE__ */ jsx(
|
|
5567
|
+
"span",
|
|
5568
|
+
{
|
|
5569
|
+
"data-test-id": "swap-to-simple-output-amount",
|
|
5570
|
+
className: twMerge(
|
|
5571
|
+
"text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
|
|
5572
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
5573
|
+
"text-right w-full",
|
|
5574
|
+
isEmpty ? "text-[color:var(--deframe-widget-color-text-tertiary)]" : "text-[color:var(--deframe-widget-color-text-primary)]"
|
|
5575
|
+
),
|
|
5576
|
+
children: isEmpty ? "0" : outputAmount
|
|
5577
|
+
}
|
|
5578
|
+
),
|
|
5579
|
+
/* @__PURE__ */ jsx(
|
|
5580
|
+
"span",
|
|
5581
|
+
{
|
|
5582
|
+
"data-test-id": "swap-to-simple-output-usd",
|
|
5583
|
+
className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
|
|
5584
|
+
children: isOutputUsdLoading ? /* @__PURE__ */ jsx(LoadingDots, {}) : outputUsdFormatted
|
|
5585
|
+
}
|
|
5586
|
+
)
|
|
5587
|
+
]
|
|
5588
|
+
}
|
|
5589
|
+
)
|
|
5590
|
+
]
|
|
5591
|
+
}
|
|
5592
|
+
),
|
|
5593
|
+
selectedToken && /* @__PURE__ */ jsx(
|
|
5594
|
+
"div",
|
|
5595
|
+
{
|
|
5596
|
+
"data-test-id": "swap-to-simple-balance-row",
|
|
5597
|
+
className: "flex items-center justify-between mt-[var(--deframe-widget-size-gap-sm)]",
|
|
5598
|
+
children: /* @__PURE__ */ jsxs(
|
|
5599
|
+
"span",
|
|
5600
|
+
{
|
|
5601
|
+
"data-test-id": "swap-to-simple-balance",
|
|
5602
|
+
className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
|
|
5603
|
+
children: [
|
|
5604
|
+
labels.balanceLabel,
|
|
5605
|
+
":",
|
|
5606
|
+
" ",
|
|
5607
|
+
/* @__PURE__ */ jsx(
|
|
5608
|
+
"span",
|
|
5609
|
+
{
|
|
5610
|
+
"data-test-id": "swap-to-simple-balance-value",
|
|
5611
|
+
className: "text-[color:var(--deframe-widget-color-text-secondary)]",
|
|
5612
|
+
children: balanceFormatted
|
|
5613
|
+
}
|
|
5614
|
+
)
|
|
5615
|
+
]
|
|
5616
|
+
}
|
|
5617
|
+
)
|
|
5618
|
+
}
|
|
5619
|
+
)
|
|
5620
|
+
] });
|
|
5621
|
+
};
|
|
5622
|
+
function Spinner() {
|
|
5623
|
+
return /* @__PURE__ */ jsxs(
|
|
5624
|
+
"svg",
|
|
5625
|
+
{
|
|
5626
|
+
"data-test-id": "confirm-swap-button-simple-spinner",
|
|
5627
|
+
width: "18",
|
|
5628
|
+
height: "18",
|
|
5629
|
+
viewBox: "0 0 24 24",
|
|
5630
|
+
fill: "none",
|
|
5631
|
+
stroke: "currentColor",
|
|
5632
|
+
strokeWidth: "2.5",
|
|
5633
|
+
strokeLinecap: "round",
|
|
5634
|
+
className: "animate-spin",
|
|
5635
|
+
"aria-hidden": "true",
|
|
5636
|
+
children: [
|
|
5637
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", opacity: "0.3" }),
|
|
5638
|
+
/* @__PURE__ */ jsx("path", { d: "M12 2 A10 10 0 0 1 22 12" })
|
|
5639
|
+
]
|
|
5640
|
+
}
|
|
5641
|
+
);
|
|
5642
|
+
}
|
|
5643
|
+
var ConfirmSwapButtonViewSimple = ({
|
|
5644
|
+
buttonLabel,
|
|
5645
|
+
disabled,
|
|
5646
|
+
isLoading,
|
|
5647
|
+
onClick
|
|
5648
|
+
}) => {
|
|
5649
|
+
const isDisabled = disabled || isLoading;
|
|
5650
|
+
const buttonClasses = twMerge(
|
|
5651
|
+
"w-full h-12",
|
|
5652
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
5653
|
+
"border-none",
|
|
5654
|
+
"text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
|
|
5655
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
5656
|
+
"transition-[background,color] duration-200",
|
|
5657
|
+
"flex items-center justify-center gap-[var(--deframe-widget-size-gap-sm)]",
|
|
5658
|
+
isDisabled ? "bg-[var(--deframe-widget-color-brand-primary-disabled)] text-[color:var(--deframe-widget-color-text-primary-disabled)] cursor-not-allowed" : "bg-[var(--deframe-widget-color-brand-primary)] text-[color:var(--deframe-widget-color-text-primary-dark)] cursor-pointer"
|
|
5659
|
+
);
|
|
5660
|
+
return /* @__PURE__ */ jsx("div", { "data-test-id": "confirm-swap-button-simple-wrapper", children: /* @__PURE__ */ jsx(
|
|
5661
|
+
"button",
|
|
5662
|
+
{
|
|
5663
|
+
"data-test-id": "confirm-swap-button-simple",
|
|
5664
|
+
onClick: !isDisabled ? onClick : void 0,
|
|
5665
|
+
disabled: isDisabled,
|
|
5666
|
+
"aria-label": buttonLabel,
|
|
5667
|
+
className: buttonClasses,
|
|
5668
|
+
children: isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : buttonLabel
|
|
5669
|
+
}
|
|
5670
|
+
) });
|
|
5671
|
+
};
|
|
5672
|
+
var SwapFormViewSimple = ({
|
|
5673
|
+
onSubmit,
|
|
5674
|
+
formRef,
|
|
5675
|
+
labels,
|
|
5676
|
+
onHistoryClick,
|
|
5677
|
+
onSwitchTokens,
|
|
5678
|
+
switchTokensAriaLabel,
|
|
5679
|
+
fromCard,
|
|
5680
|
+
toCard,
|
|
5681
|
+
advancedSettings,
|
|
5682
|
+
transactionDetails,
|
|
5683
|
+
confirmButton
|
|
5684
|
+
}) => {
|
|
5685
|
+
const containerRef = useRef(null);
|
|
5686
|
+
const [panelPos, setPanelPos] = useState(null);
|
|
5687
|
+
const [showPanel, setShowPanel] = useState(false);
|
|
5688
|
+
useEffect(() => {
|
|
5689
|
+
if (!advancedSettings.isOpen) setShowPanel(false);
|
|
5690
|
+
}, [advancedSettings.isOpen]);
|
|
5691
|
+
const updatePanelPos = useCallback(() => {
|
|
5692
|
+
if (containerRef.current && showPanel) {
|
|
5693
|
+
const rect = containerRef.current.getBoundingClientRect();
|
|
5694
|
+
setPanelPos({ top: rect.top, left: rect.right + 16 });
|
|
5695
|
+
}
|
|
5696
|
+
}, [showPanel]);
|
|
5697
|
+
useEffect(() => {
|
|
5698
|
+
if (!showPanel) {
|
|
5699
|
+
setPanelPos(null);
|
|
5700
|
+
return;
|
|
5701
|
+
}
|
|
5702
|
+
updatePanelPos();
|
|
5703
|
+
window.addEventListener("scroll", updatePanelPos, true);
|
|
5704
|
+
window.addEventListener("resize", updatePanelPos);
|
|
5705
|
+
return () => {
|
|
5706
|
+
window.removeEventListener("scroll", updatePanelPos, true);
|
|
5707
|
+
window.removeEventListener("resize", updatePanelPos);
|
|
5708
|
+
};
|
|
5709
|
+
}, [showPanel, updatePanelPos]);
|
|
5710
|
+
return /* @__PURE__ */ jsxs(
|
|
5711
|
+
"div",
|
|
5712
|
+
{
|
|
5713
|
+
ref: containerRef,
|
|
5714
|
+
"data-test-id": "swap-form-view-simple",
|
|
5715
|
+
className: twMerge(
|
|
5716
|
+
"relative",
|
|
5717
|
+
"rounded-[var(--deframe-widget-size-radius-md)]",
|
|
5718
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
5719
|
+
"px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
|
|
5720
|
+
"flex flex-col",
|
|
5721
|
+
`w-[${SWAP_SIMPLE_WIDTH}px] max-w-[calc(100%-32px)] shrink-0 box-border`,
|
|
5722
|
+
"font-[var(--deframe-widget-font-family)]"
|
|
5723
|
+
),
|
|
5724
|
+
style: { minHeight: SWAP_SIMPLE_MIN_HEIGHT },
|
|
5725
|
+
children: [
|
|
5726
|
+
/* @__PURE__ */ jsxs("form", { ref: formRef, onSubmit, "data-test-id": "swap-form-simple-form", className: "flex flex-col flex-1", children: [
|
|
5727
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
|
|
5728
|
+
/* @__PURE__ */ jsx(
|
|
5729
|
+
"div",
|
|
5730
|
+
{
|
|
5731
|
+
"data-test-id": "swap-form-simple-top-row",
|
|
5732
|
+
className: "flex items-center justify-end mb-[var(--deframe-widget-size-gap-sm)]",
|
|
5733
|
+
children: /* @__PURE__ */ jsx(HistoryButton, { onClick: onHistoryClick, ariaLabel: labels.historyAriaLabel })
|
|
5734
|
+
}
|
|
5735
|
+
),
|
|
5736
|
+
/* @__PURE__ */ jsx(
|
|
5737
|
+
SwapFromCardViewSimple,
|
|
5738
|
+
__spreadProps(__spreadValues({}, fromCard), {
|
|
5739
|
+
onNetworkAndAssetClick: fromCard.onNetworkAndAssetClick ? () => {
|
|
5740
|
+
setShowPanel(false);
|
|
5741
|
+
fromCard.onNetworkAndAssetClick();
|
|
5742
|
+
} : void 0,
|
|
5743
|
+
percentageOptions: advancedSettings.percentageOptions,
|
|
5744
|
+
onPercentageClick: (pct) => advancedSettings.onPercentageClick(pct),
|
|
5745
|
+
maxLabel: advancedSettings.maxLabel
|
|
5746
|
+
})
|
|
5747
|
+
),
|
|
5748
|
+
/* @__PURE__ */ jsx(
|
|
5749
|
+
"div",
|
|
5750
|
+
{
|
|
5751
|
+
"data-test-id": "swap-form-simple-direction-row",
|
|
5752
|
+
className: "flex justify-center relative -my-[16px] z-[1]",
|
|
5753
|
+
children: /* @__PURE__ */ jsx(
|
|
5754
|
+
SwapDirectionButton,
|
|
5755
|
+
{
|
|
5756
|
+
onClick: onSwitchTokens,
|
|
5757
|
+
ariaLabel: switchTokensAriaLabel
|
|
5758
|
+
}
|
|
5759
|
+
)
|
|
5760
|
+
}
|
|
5761
|
+
),
|
|
5762
|
+
/* @__PURE__ */ jsx(
|
|
5763
|
+
SwapToCardViewSimple,
|
|
5764
|
+
__spreadProps(__spreadValues({}, toCard), {
|
|
5765
|
+
onNetworkAndAssetClick: toCard.onNetworkAndAssetClick ? () => {
|
|
5766
|
+
setShowPanel(false);
|
|
5767
|
+
toCard.onNetworkAndAssetClick();
|
|
5768
|
+
} : void 0
|
|
5769
|
+
})
|
|
5770
|
+
),
|
|
5771
|
+
/* @__PURE__ */ jsx(
|
|
5772
|
+
"div",
|
|
5773
|
+
{
|
|
5774
|
+
"data-test-id": "swap-form-simple-advanced-wrapper",
|
|
5775
|
+
className: "flex justify-end mt-[var(--deframe-widget-size-gap-sm)]",
|
|
5776
|
+
children: /* @__PURE__ */ jsx(
|
|
5777
|
+
AdvancedPill,
|
|
5778
|
+
{
|
|
5779
|
+
label: "Avan\xE7ado",
|
|
5780
|
+
isOpen: showPanel,
|
|
5781
|
+
onClick: () => {
|
|
5782
|
+
const next = !showPanel;
|
|
5783
|
+
setShowPanel(next);
|
|
5784
|
+
advancedSettings.onOpenChange(next);
|
|
5785
|
+
}
|
|
5786
|
+
}
|
|
5787
|
+
)
|
|
5788
|
+
}
|
|
5789
|
+
)
|
|
5790
|
+
] }),
|
|
5791
|
+
/* @__PURE__ */ jsx("div", { className: "flex-1" }),
|
|
5792
|
+
/* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx(ConfirmSwapButtonViewSimple, __spreadValues({}, confirmButton)) })
|
|
5793
|
+
] }),
|
|
5794
|
+
showPanel && panelPos && /* @__PURE__ */ jsx(
|
|
5795
|
+
"div",
|
|
5796
|
+
{
|
|
5797
|
+
"data-test-id": "swap-form-simple-advanced-panel",
|
|
5798
|
+
className: twMerge(
|
|
5799
|
+
"fixed",
|
|
5800
|
+
"w-[320px] z-[9999]",
|
|
5801
|
+
"bg-[var(--deframe-widget-color-bg-secondary)]",
|
|
5802
|
+
"rounded-[var(--deframe-widget-size-radius-md)]",
|
|
5803
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
5804
|
+
"shadow-[0px_4px_24px_0px_#0000003D]",
|
|
5805
|
+
"font-[var(--deframe-widget-font-family)]"
|
|
5806
|
+
),
|
|
5807
|
+
style: { top: panelPos.top, left: panelPos.left },
|
|
5808
|
+
children: /* @__PURE__ */ jsx(
|
|
5809
|
+
AdvancedPanelContent,
|
|
5810
|
+
{
|
|
5811
|
+
advancedSettings: __spreadProps(__spreadValues({}, advancedSettings), {
|
|
5812
|
+
onOpenChange: (open) => {
|
|
5813
|
+
setShowPanel(open);
|
|
5814
|
+
advancedSettings.onOpenChange(open);
|
|
5815
|
+
}
|
|
5816
|
+
}),
|
|
5817
|
+
transactionDetails
|
|
5818
|
+
}
|
|
5819
|
+
)
|
|
5820
|
+
}
|
|
5821
|
+
)
|
|
5822
|
+
]
|
|
5823
|
+
}
|
|
5824
|
+
);
|
|
5825
|
+
};
|
|
5826
|
+
function HistoryButton({ onClick, ariaLabel }) {
|
|
5827
|
+
return /* @__PURE__ */ jsx(
|
|
5828
|
+
"button",
|
|
5829
|
+
{
|
|
5830
|
+
"data-test-id": "swap-form-simple-history-button",
|
|
5831
|
+
type: "button",
|
|
5832
|
+
onClick,
|
|
5833
|
+
"aria-label": ariaLabel,
|
|
5834
|
+
className: twMerge(
|
|
5835
|
+
"inline-flex items-center justify-center",
|
|
5836
|
+
"w-9 h-9",
|
|
5837
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
5838
|
+
"border-none",
|
|
5839
|
+
"cursor-pointer",
|
|
5840
|
+
"bg-transparent",
|
|
5841
|
+
"hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
|
|
5842
|
+
"transition-[background] duration-150",
|
|
5843
|
+
"flex-shrink-0",
|
|
5844
|
+
"outline-none",
|
|
5845
|
+
"text-[color:var(--deframe-widget-color-text-secondary)]"
|
|
5846
|
+
),
|
|
5847
|
+
children: /* @__PURE__ */ jsxs(
|
|
5848
|
+
"svg",
|
|
5849
|
+
{
|
|
5850
|
+
"data-test-id": "swap-form-simple-history-icon",
|
|
5851
|
+
viewBox: "0 0 24 24",
|
|
5852
|
+
width: "20",
|
|
5853
|
+
height: "20",
|
|
5854
|
+
fill: "none",
|
|
5855
|
+
stroke: "currentColor",
|
|
5856
|
+
strokeWidth: "2",
|
|
5857
|
+
strokeLinecap: "round",
|
|
5858
|
+
strokeLinejoin: "round",
|
|
5859
|
+
"aria-hidden": "true",
|
|
5860
|
+
children: [
|
|
5861
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
5862
|
+
/* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
|
|
5863
|
+
]
|
|
5864
|
+
}
|
|
5865
|
+
)
|
|
5866
|
+
}
|
|
5867
|
+
);
|
|
5868
|
+
}
|
|
5869
|
+
function SwapDirectionButton({ onClick, ariaLabel }) {
|
|
5870
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
5871
|
+
return /* @__PURE__ */ jsx(
|
|
5872
|
+
motion.button,
|
|
5873
|
+
{
|
|
5874
|
+
"data-test-id": "swap-form-simple-direction-button",
|
|
5875
|
+
type: "button",
|
|
5876
|
+
onClick,
|
|
5877
|
+
onMouseEnter: () => setIsHovered(true),
|
|
5878
|
+
onMouseLeave: () => setIsHovered(false),
|
|
5879
|
+
animate: { rotate: isHovered ? 180 : 0 },
|
|
5880
|
+
transition: { duration: 0.25, ease: "easeInOut" },
|
|
5881
|
+
"aria-label": ariaLabel,
|
|
5882
|
+
className: twMerge(
|
|
5883
|
+
"inline-flex items-center justify-center",
|
|
5884
|
+
"w-10 h-10",
|
|
5885
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
5886
|
+
"bg-[#12151c]",
|
|
5887
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
5888
|
+
"outline-none",
|
|
5889
|
+
"flex-shrink-0",
|
|
5890
|
+
"shadow-[0px_2px_8px_0px_#0000003D]",
|
|
5891
|
+
"cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]"
|
|
5892
|
+
),
|
|
5893
|
+
children: /* @__PURE__ */ jsxs(
|
|
5894
|
+
"svg",
|
|
5895
|
+
{
|
|
5896
|
+
"data-test-id": "swap-form-simple-direction-icon",
|
|
5897
|
+
width: "18",
|
|
5898
|
+
height: "18",
|
|
5899
|
+
viewBox: "0 0 24 24",
|
|
5900
|
+
fill: "none",
|
|
5901
|
+
stroke: "currentColor",
|
|
5902
|
+
strokeWidth: "2.5",
|
|
5903
|
+
strokeLinecap: "round",
|
|
5904
|
+
strokeLinejoin: "round",
|
|
5905
|
+
"aria-hidden": "true",
|
|
5906
|
+
children: [
|
|
5907
|
+
/* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
|
|
5908
|
+
/* @__PURE__ */ jsx("polyline", { points: "19 12 12 19 5 12" })
|
|
5909
|
+
]
|
|
5910
|
+
}
|
|
5911
|
+
)
|
|
5912
|
+
}
|
|
5913
|
+
);
|
|
5914
|
+
}
|
|
5915
|
+
function AdvancedPill({ label, isOpen, onClick }) {
|
|
5916
|
+
return /* @__PURE__ */ jsxs(
|
|
5917
|
+
"button",
|
|
5918
|
+
{
|
|
5919
|
+
"data-test-id": "swap-form-simple-advanced-pill",
|
|
5920
|
+
type: "button",
|
|
5921
|
+
onClick,
|
|
5922
|
+
className: twMerge(
|
|
5923
|
+
"inline-flex items-center gap-[5px]",
|
|
5924
|
+
"py-[5px] px-[var(--deframe-widget-size-padding-x-sm)]",
|
|
5925
|
+
"rounded-[var(--deframe-widget-size-radius-full)]",
|
|
5926
|
+
isOpen ? "border border-[color:var(--deframe-widget-color-brand-primary)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]" : "border border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)] bg-transparent",
|
|
5927
|
+
"hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
|
|
5928
|
+
"cursor-pointer",
|
|
5929
|
+
"text-[color:var(--deframe-widget-color-brand-primary)]",
|
|
5930
|
+
"text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)]",
|
|
5931
|
+
"outline-none",
|
|
5932
|
+
"font-[inherit]",
|
|
5933
|
+
"transition-[background] duration-150",
|
|
5934
|
+
"flex-shrink-0"
|
|
5935
|
+
),
|
|
5936
|
+
children: [
|
|
5937
|
+
/* @__PURE__ */ jsxs(
|
|
5938
|
+
"svg",
|
|
5939
|
+
{
|
|
5940
|
+
"data-test-id": "swap-form-simple-advanced-pill-icon",
|
|
5941
|
+
width: "13",
|
|
5942
|
+
height: "13",
|
|
5943
|
+
viewBox: "0 0 24 24",
|
|
5944
|
+
fill: "none",
|
|
5945
|
+
stroke: "currentColor",
|
|
5946
|
+
strokeWidth: "2.5",
|
|
5947
|
+
strokeLinecap: "round",
|
|
5948
|
+
strokeLinejoin: "round",
|
|
5949
|
+
"aria-hidden": "true",
|
|
5950
|
+
children: [
|
|
5951
|
+
/* @__PURE__ */ jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
|
|
5952
|
+
/* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
|
|
5953
|
+
/* @__PURE__ */ jsx("line", { x1: "4", y1: "18", x2: "20", y2: "18" }),
|
|
5954
|
+
/* @__PURE__ */ jsx("circle", { cx: "8", cy: "6", r: "2", fill: "currentColor", stroke: "none" }),
|
|
5955
|
+
/* @__PURE__ */ jsx("circle", { cx: "16", cy: "12", r: "2", fill: "currentColor", stroke: "none" }),
|
|
5956
|
+
/* @__PURE__ */ jsx("circle", { cx: "10", cy: "18", r: "2", fill: "currentColor", stroke: "none" })
|
|
5957
|
+
]
|
|
5958
|
+
}
|
|
5959
|
+
),
|
|
5960
|
+
/* @__PURE__ */ jsx("span", { "data-test-id": "swap-form-simple-advanced-pill-label", children: label })
|
|
5961
|
+
]
|
|
5962
|
+
}
|
|
5963
|
+
);
|
|
5964
|
+
}
|
|
5965
|
+
function AdvancedPanelContent({ advancedSettings, transactionDetails }) {
|
|
5966
|
+
return /* @__PURE__ */ jsxs(
|
|
5967
|
+
"div",
|
|
5968
|
+
{
|
|
5969
|
+
"data-test-id": "swap-form-simple-advanced-panel-content",
|
|
5970
|
+
className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
|
|
5971
|
+
children: [
|
|
5972
|
+
/* @__PURE__ */ jsxs(
|
|
5973
|
+
"div",
|
|
5974
|
+
{
|
|
5975
|
+
"data-test-id": "swap-form-simple-advanced-panel-header",
|
|
5976
|
+
className: "flex justify-between items-center mb-[6px]",
|
|
5977
|
+
children: [
|
|
5978
|
+
/* @__PURE__ */ jsx(
|
|
5979
|
+
"span",
|
|
5980
|
+
{
|
|
5981
|
+
"data-test-id": "swap-form-simple-advanced-panel-title",
|
|
5982
|
+
className: "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[inherit]",
|
|
5983
|
+
children: "Avan\xE7ado"
|
|
5984
|
+
}
|
|
5985
|
+
),
|
|
5986
|
+
/* @__PURE__ */ jsx(
|
|
5987
|
+
"button",
|
|
5988
|
+
{
|
|
5989
|
+
"data-test-id": "swap-form-simple-advanced-panel-close",
|
|
5990
|
+
type: "button",
|
|
5991
|
+
onClick: () => advancedSettings.onOpenChange(false),
|
|
5992
|
+
"aria-label": "Close advanced panel",
|
|
5993
|
+
className: twMerge(
|
|
5994
|
+
"inline-flex items-center justify-center",
|
|
5995
|
+
"w-7 h-7",
|
|
5996
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
5997
|
+
"border-none cursor-pointer bg-transparent",
|
|
5998
|
+
"hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
|
|
5999
|
+
"transition-[background] duration-150",
|
|
6000
|
+
"flex-shrink-0 outline-none",
|
|
6001
|
+
"text-[color:var(--deframe-widget-color-text-secondary)]"
|
|
6002
|
+
),
|
|
6003
|
+
children: /* @__PURE__ */ jsx(
|
|
6004
|
+
"svg",
|
|
6005
|
+
{
|
|
6006
|
+
"data-test-id": "swap-form-simple-advanced-panel-close-icon",
|
|
6007
|
+
viewBox: "0 0 24 24",
|
|
6008
|
+
width: "16",
|
|
6009
|
+
height: "16",
|
|
6010
|
+
fill: "currentColor",
|
|
6011
|
+
"aria-hidden": "true",
|
|
6012
|
+
children: /* @__PURE__ */ jsx("path", { d: "M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z" })
|
|
6013
|
+
}
|
|
6014
|
+
)
|
|
6015
|
+
}
|
|
6016
|
+
)
|
|
6017
|
+
]
|
|
6018
|
+
}
|
|
6019
|
+
),
|
|
6020
|
+
transactionDetails.exchangeRateFormatted && /* @__PURE__ */ jsx(
|
|
6021
|
+
"p",
|
|
6022
|
+
{
|
|
6023
|
+
"data-test-id": "swap-form-simple-advanced-panel-subtitle",
|
|
6024
|
+
className: "text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] m-0 mb-[var(--deframe-widget-size-gap-sm)] leading-[1.4] font-[inherit]",
|
|
6025
|
+
children: transactionDetails.exchangeRateFormatted
|
|
6026
|
+
}
|
|
6027
|
+
),
|
|
6028
|
+
/* @__PURE__ */ jsx(
|
|
6029
|
+
"div",
|
|
6030
|
+
{
|
|
6031
|
+
"data-test-id": "swap-form-simple-advanced-panel-divider",
|
|
6032
|
+
className: "h-px bg-[var(--deframe-widget-color-border-secondary)] mt-[var(--deframe-widget-size-gap-sm)]"
|
|
6033
|
+
}
|
|
6034
|
+
),
|
|
6035
|
+
/* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.exchangeRateLabel, value: transactionDetails.exchangeRateFormatted }),
|
|
6036
|
+
/* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.blockchainCostsLabel, value: transactionDetails.totalCostFormatted }),
|
|
6037
|
+
/* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.networkGasLabel, value: transactionDetails.gasCostFormatted }),
|
|
6038
|
+
/* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.protocolFeeLabel, value: transactionDetails.protocolFee }),
|
|
6039
|
+
/* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.slippageLabel, value: transactionDetails.slippageFormatted }),
|
|
6040
|
+
/* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.etaLabel, value: transactionDetails.etaFormatted }),
|
|
6041
|
+
transactionDetails.quoteId && /* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.quoteIdLabel, value: transactionDetails.quoteId }),
|
|
6042
|
+
/* @__PURE__ */ jsx(
|
|
6043
|
+
"div",
|
|
6044
|
+
{
|
|
6045
|
+
"data-test-id": "swap-form-simple-advanced-panel-divider-2",
|
|
6046
|
+
className: "h-px bg-[var(--deframe-widget-color-border-secondary)] my-[var(--deframe-widget-size-gap-sm)]"
|
|
6047
|
+
}
|
|
6048
|
+
),
|
|
6049
|
+
/* @__PURE__ */ jsxs("div", { "data-test-id": "swap-form-simple-advanced-panel-slippage", children: [
|
|
6050
|
+
/* @__PURE__ */ jsxs(
|
|
6051
|
+
"span",
|
|
6052
|
+
{
|
|
6053
|
+
"data-test-id": "swap-form-simple-advanced-panel-slippage-label",
|
|
6054
|
+
className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.07em] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
|
|
6055
|
+
children: [
|
|
6056
|
+
"Slippage: ",
|
|
6057
|
+
advancedSettings.slippageFormatted
|
|
6058
|
+
]
|
|
6059
|
+
}
|
|
6060
|
+
),
|
|
6061
|
+
/* @__PURE__ */ jsx(
|
|
6062
|
+
"div",
|
|
6063
|
+
{
|
|
6064
|
+
"data-test-id": "swap-form-simple-advanced-panel-slippage-buttons",
|
|
6065
|
+
className: "flex gap-[6px] mt-[var(--deframe-widget-size-gap-sm)]",
|
|
6066
|
+
children: [10, 50, 100].map((bps) => {
|
|
6067
|
+
const isActive = advancedSettings.slippageBps === bps;
|
|
6068
|
+
return /* @__PURE__ */ jsx(
|
|
6069
|
+
"button",
|
|
6070
|
+
{
|
|
6071
|
+
"data-test-id": "swap-form-simple-slippage-btn",
|
|
6072
|
+
type: "button",
|
|
6073
|
+
onClick: () => advancedSettings.onSlippageSelect(bps),
|
|
6074
|
+
className: twMerge(
|
|
6075
|
+
"py-[3px] px-[10px]",
|
|
6076
|
+
"rounded-[var(--deframe-widget-size-radius-full)]",
|
|
6077
|
+
"text-[12px] font-[var(--deframe-widget-font-family)]",
|
|
6078
|
+
"border cursor-pointer outline-none",
|
|
6079
|
+
"transition-all duration-150",
|
|
6080
|
+
isActive ? "border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] text-[color:var(--deframe-widget-color-brand-primary)] [font-weight:var(--deframe-widget-font-weight-semibold)]" : "border-[color:var(--deframe-widget-color-border-secondary)] bg-transparent text-[color:var(--deframe-widget-color-text-secondary)] hover:border-[color:var(--deframe-widget-color-border-primary)]"
|
|
6081
|
+
),
|
|
6082
|
+
children: advancedSettings.formatPercentage(bps)
|
|
6083
|
+
},
|
|
6084
|
+
bps
|
|
6085
|
+
);
|
|
6086
|
+
})
|
|
6087
|
+
}
|
|
6088
|
+
)
|
|
6089
|
+
] })
|
|
6090
|
+
]
|
|
6091
|
+
}
|
|
6092
|
+
);
|
|
6093
|
+
}
|
|
6094
|
+
function DetailRow({ label, value }) {
|
|
6095
|
+
if (!label && !value) return null;
|
|
6096
|
+
return /* @__PURE__ */ jsxs(
|
|
6097
|
+
"div",
|
|
6098
|
+
{
|
|
6099
|
+
"data-test-id": "swap-form-simple-detail-row",
|
|
6100
|
+
className: "flex justify-between items-center py-[10px] gap-[var(--deframe-widget-size-gap-sm)]",
|
|
6101
|
+
children: [
|
|
6102
|
+
/* @__PURE__ */ jsx(
|
|
6103
|
+
"span",
|
|
6104
|
+
{
|
|
6105
|
+
"data-test-id": "swap-form-simple-detail-row-label",
|
|
6106
|
+
className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.07em] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)] flex-shrink-0",
|
|
6107
|
+
children: label
|
|
6108
|
+
}
|
|
6109
|
+
),
|
|
6110
|
+
/* @__PURE__ */ jsx(
|
|
6111
|
+
"span",
|
|
6112
|
+
{
|
|
6113
|
+
"data-test-id": "swap-form-simple-detail-row-value",
|
|
6114
|
+
className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-right font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]",
|
|
6115
|
+
children: value
|
|
6116
|
+
}
|
|
6117
|
+
)
|
|
6118
|
+
]
|
|
6119
|
+
}
|
|
6120
|
+
);
|
|
6121
|
+
}
|
|
6122
|
+
var ChooseANetworkView = ({
|
|
6123
|
+
labels,
|
|
6124
|
+
autoFocus = true,
|
|
6125
|
+
chains,
|
|
6126
|
+
pageSize = 10,
|
|
6127
|
+
onChainClick
|
|
6128
|
+
}) => {
|
|
6129
|
+
const [searchValue, setSearchValue] = useState("");
|
|
6130
|
+
const [page, setPage] = useState(1);
|
|
6131
|
+
useEffect(() => {
|
|
4527
6132
|
setPage(1);
|
|
4528
6133
|
}, [searchValue]);
|
|
4529
6134
|
const filteredChains = chains.filter(
|
|
4530
6135
|
(chain) => chain.name.toLowerCase().includes(searchValue.toLowerCase())
|
|
4531
6136
|
);
|
|
4532
|
-
const displayedChains = filteredChains.slice(0, page * pageSize);
|
|
4533
|
-
const hasMore = filteredChains.length > page * pageSize;
|
|
4534
|
-
return /* @__PURE__ */ jsx(BackgroundContainer, { className: "flex flex-col h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 w-full p-[var(--deframe-widget-size-padding-x-lg)] overflow-hidden", children: [
|
|
4535
|
-
/* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
|
|
4536
|
-
/* @__PURE__ */ jsx(TextHeading, { children: labels.title }),
|
|
4537
|
-
/* @__PURE__ */ jsx("br", {}),
|
|
4538
|
-
/* @__PURE__ */ jsx(
|
|
4539
|
-
SearchInput,
|
|
6137
|
+
const displayedChains = filteredChains.slice(0, page * pageSize);
|
|
6138
|
+
const hasMore = filteredChains.length > page * pageSize;
|
|
6139
|
+
return /* @__PURE__ */ jsx(BackgroundContainer, { className: "flex flex-col h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 w-full p-[var(--deframe-widget-size-padding-x-lg)] overflow-hidden", children: [
|
|
6140
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
|
|
6141
|
+
/* @__PURE__ */ jsx(TextHeading, { children: labels.title }),
|
|
6142
|
+
/* @__PURE__ */ jsx("br", {}),
|
|
6143
|
+
/* @__PURE__ */ jsx(
|
|
6144
|
+
SearchInput,
|
|
6145
|
+
{
|
|
6146
|
+
value: searchValue,
|
|
6147
|
+
onChange: setSearchValue,
|
|
6148
|
+
placeholder: labels.searchPlaceholder,
|
|
6149
|
+
autoFocus
|
|
6150
|
+
}
|
|
6151
|
+
)
|
|
6152
|
+
] }),
|
|
6153
|
+
/* @__PURE__ */ jsxs(
|
|
6154
|
+
"div",
|
|
6155
|
+
{
|
|
6156
|
+
"data-testid": "choose-a-network-list",
|
|
6157
|
+
className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)] w-full mt-[var(--deframe-widget-size-gap-md)] overflow-y-auto flex-1 min-h-0",
|
|
6158
|
+
children: [
|
|
6159
|
+
displayedChains.map((chain) => /* @__PURE__ */ jsxs(
|
|
6160
|
+
ListItem,
|
|
6161
|
+
{
|
|
6162
|
+
className: "w-full flex-shrink-0",
|
|
6163
|
+
onClick: () => onChainClick(chain.chainId),
|
|
6164
|
+
"data-testid": `choose-network-item-${chain.chainId}`,
|
|
6165
|
+
"data-chain-id": chain.chainId,
|
|
6166
|
+
children: [
|
|
6167
|
+
/* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
|
|
6168
|
+
"img",
|
|
6169
|
+
{
|
|
6170
|
+
src: chain.imageUrl,
|
|
6171
|
+
alt: chain.name,
|
|
6172
|
+
className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
|
|
6173
|
+
}
|
|
6174
|
+
) }),
|
|
6175
|
+
/* @__PURE__ */ jsx(ListItemContent, { children: /* @__PURE__ */ jsx(TextBody, { children: chain.name }) })
|
|
6176
|
+
]
|
|
6177
|
+
},
|
|
6178
|
+
`chain-${chain.chainId}`
|
|
6179
|
+
)),
|
|
6180
|
+
hasMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)] flex-shrink-0", children: /* @__PURE__ */ jsx(TertiaryButton, { onClick: () => setPage(page + 1), children: labels.loadMoreLabel }) })
|
|
6181
|
+
]
|
|
6182
|
+
}
|
|
6183
|
+
)
|
|
6184
|
+
] }) });
|
|
6185
|
+
};
|
|
6186
|
+
function useIsMobile(breakpoint = 640) {
|
|
6187
|
+
const [isMobile, setIsMobile] = useState(
|
|
6188
|
+
typeof window !== "undefined" ? window.innerWidth < breakpoint : false
|
|
6189
|
+
);
|
|
6190
|
+
useEffect(() => {
|
|
6191
|
+
const check = () => setIsMobile(window.innerWidth < breakpoint);
|
|
6192
|
+
check();
|
|
6193
|
+
window.addEventListener("resize", check);
|
|
6194
|
+
return () => window.removeEventListener("resize", check);
|
|
6195
|
+
}, [breakpoint]);
|
|
6196
|
+
return isMobile;
|
|
6197
|
+
}
|
|
6198
|
+
function CloseButtonInline({ onClick, ariaLabel }) {
|
|
6199
|
+
const baseClasses = [
|
|
6200
|
+
"inline-flex items-center justify-center",
|
|
6201
|
+
"w-9 h-9",
|
|
6202
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
6203
|
+
"border-none",
|
|
6204
|
+
"cursor-pointer",
|
|
6205
|
+
"bg-transparent",
|
|
6206
|
+
"hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
|
|
6207
|
+
"transition-[background] duration-150",
|
|
6208
|
+
"flex-shrink-0",
|
|
6209
|
+
"outline-none",
|
|
6210
|
+
"text-[color:var(--deframe-widget-color-text-secondary)]"
|
|
6211
|
+
].join(" ");
|
|
6212
|
+
return /* @__PURE__ */ jsx(
|
|
6213
|
+
"button",
|
|
6214
|
+
{
|
|
6215
|
+
"data-test-id": "close-button",
|
|
6216
|
+
onClick,
|
|
6217
|
+
"aria-label": ariaLabel,
|
|
6218
|
+
className: baseClasses,
|
|
6219
|
+
children: /* @__PURE__ */ jsx(
|
|
6220
|
+
"svg",
|
|
6221
|
+
{
|
|
6222
|
+
"data-test-id": "close-button-icon",
|
|
6223
|
+
viewBox: "0 0 24 24",
|
|
6224
|
+
width: "20",
|
|
6225
|
+
height: "20",
|
|
6226
|
+
fill: "currentColor",
|
|
6227
|
+
"aria-hidden": "true",
|
|
6228
|
+
children: /* @__PURE__ */ jsx("path", { d: "M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z" })
|
|
6229
|
+
}
|
|
6230
|
+
)
|
|
6231
|
+
}
|
|
6232
|
+
);
|
|
6233
|
+
}
|
|
6234
|
+
function IconCircle2({ iconUrl, name, size = 36, className }) {
|
|
6235
|
+
const [imgError, setImgError] = React6.useState(false);
|
|
6236
|
+
if (iconUrl && !imgError) {
|
|
6237
|
+
return /* @__PURE__ */ jsx(
|
|
6238
|
+
"img",
|
|
6239
|
+
{
|
|
6240
|
+
"data-test-id": "icon-circle-img",
|
|
6241
|
+
src: iconUrl,
|
|
6242
|
+
alt: name,
|
|
6243
|
+
width: size,
|
|
6244
|
+
height: size,
|
|
6245
|
+
className: twMerge("rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 object-cover", className),
|
|
6246
|
+
onError: () => setImgError(true)
|
|
6247
|
+
}
|
|
6248
|
+
);
|
|
6249
|
+
}
|
|
6250
|
+
return /* @__PURE__ */ jsx(
|
|
6251
|
+
"div",
|
|
6252
|
+
{
|
|
6253
|
+
"data-test-id": "icon-circle-fallback",
|
|
6254
|
+
className: twMerge(
|
|
6255
|
+
"rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 flex items-center justify-center",
|
|
6256
|
+
"[font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-text-primary-dark)]",
|
|
6257
|
+
"bg-[var(--deframe-widget-color-bg-tertiary)]",
|
|
6258
|
+
className
|
|
6259
|
+
),
|
|
6260
|
+
style: {
|
|
6261
|
+
width: size,
|
|
6262
|
+
height: size,
|
|
6263
|
+
fontSize: size * 0.33,
|
|
6264
|
+
letterSpacing: "-0.01em"
|
|
6265
|
+
},
|
|
6266
|
+
children: name.slice(0, 2).toUpperCase()
|
|
6267
|
+
}
|
|
6268
|
+
);
|
|
6269
|
+
}
|
|
6270
|
+
|
|
6271
|
+
// src/stories/choose-network-and-asset-view/ChooseNetworkAndAssetViewSimple/hasSignificantBalance.ts
|
|
6272
|
+
function hasSignificantBalance(balanceUsd) {
|
|
6273
|
+
if (!balanceUsd) return false;
|
|
6274
|
+
const num = parseFloat(balanceUsd.replace(/[^0-9.-]/g, ""));
|
|
6275
|
+
return !isNaN(num) && num >= 0.01;
|
|
6276
|
+
}
|
|
6277
|
+
function NetworkRow({ network, selected, onClick, onKeyDown, index }) {
|
|
6278
|
+
const baseClasses = [
|
|
6279
|
+
"relative flex items-center gap-[10px]",
|
|
6280
|
+
"py-[9px] px-[var(--deframe-widget-size-padding-x-sm)] pl-[14px]",
|
|
6281
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
6282
|
+
"cursor-pointer",
|
|
6283
|
+
"outline-none",
|
|
6284
|
+
"mb-[var(--deframe-widget-size-gap-none)].5",
|
|
6285
|
+
"transition-[background] duration-150"
|
|
6286
|
+
].join(" ");
|
|
6287
|
+
const stateClasses = {
|
|
6288
|
+
selected: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)] hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
|
|
6289
|
+
default: "bg-transparent hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]"
|
|
6290
|
+
};
|
|
6291
|
+
const rowClasses = twMerge(baseClasses, stateClasses[selected ? "selected" : "default"]);
|
|
6292
|
+
const nameClasses = [
|
|
6293
|
+
"text-[14px] [font-weight:var(--deframe-widget-font-weight-medium)]",
|
|
6294
|
+
selected ? "text-[color:var(--deframe-widget-color-text-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)]"
|
|
6295
|
+
].join(" ");
|
|
6296
|
+
return /* @__PURE__ */ jsxs(
|
|
6297
|
+
motion.div,
|
|
6298
|
+
{
|
|
6299
|
+
"data-test-id": "network-row",
|
|
6300
|
+
role: "option",
|
|
6301
|
+
"aria-selected": selected,
|
|
6302
|
+
"aria-label": network.name,
|
|
6303
|
+
tabIndex: 0,
|
|
6304
|
+
onClick,
|
|
6305
|
+
onKeyDown,
|
|
6306
|
+
"data-chain-index": index,
|
|
6307
|
+
className: rowClasses,
|
|
6308
|
+
children: [
|
|
6309
|
+
selected && /* @__PURE__ */ jsx(
|
|
6310
|
+
motion.div,
|
|
6311
|
+
{
|
|
6312
|
+
"data-test-id": "network-row-accent",
|
|
6313
|
+
layoutId: "chain-accent",
|
|
6314
|
+
className: "absolute left-0 top-2 bottom-2 w-[3px] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-brand-primary)]",
|
|
6315
|
+
transition: { type: "spring", stiffness: 400, damping: 30 }
|
|
6316
|
+
}
|
|
6317
|
+
),
|
|
6318
|
+
/* @__PURE__ */ jsx(
|
|
6319
|
+
IconCircle2,
|
|
6320
|
+
{
|
|
6321
|
+
iconUrl: network.iconUrl,
|
|
6322
|
+
name: network.name,
|
|
6323
|
+
size: 34
|
|
6324
|
+
}
|
|
6325
|
+
),
|
|
6326
|
+
/* @__PURE__ */ jsxs(
|
|
6327
|
+
"div",
|
|
6328
|
+
{
|
|
6329
|
+
"data-test-id": "network-row-content",
|
|
6330
|
+
className: "flex-1 min-w-0",
|
|
6331
|
+
children: [
|
|
6332
|
+
/* @__PURE__ */ jsx(
|
|
6333
|
+
"div",
|
|
6334
|
+
{
|
|
6335
|
+
"data-test-id": "network-row-name",
|
|
6336
|
+
className: nameClasses,
|
|
6337
|
+
children: network.name
|
|
6338
|
+
}
|
|
6339
|
+
),
|
|
6340
|
+
hasSignificantBalance(network.balanceUsd) && /* @__PURE__ */ jsx(
|
|
6341
|
+
"div",
|
|
6342
|
+
{
|
|
6343
|
+
"data-test-id": "network-row-balance",
|
|
6344
|
+
className: "text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)] mt-px",
|
|
6345
|
+
children: network.balanceUsd
|
|
6346
|
+
}
|
|
6347
|
+
)
|
|
6348
|
+
]
|
|
6349
|
+
}
|
|
6350
|
+
)
|
|
6351
|
+
]
|
|
6352
|
+
}
|
|
6353
|
+
);
|
|
6354
|
+
}
|
|
6355
|
+
function NetworkChip({ network, selected, onClick }) {
|
|
6356
|
+
const baseClasses = [
|
|
6357
|
+
"inline-flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
|
|
6358
|
+
"py-[var(--deframe-widget-size-padding-y-sm)] pl-[var(--deframe-widget-size-padding-x-sm)] pr-[14px]",
|
|
6359
|
+
"rounded-[var(--deframe-widget-size-radius-full)]",
|
|
6360
|
+
"cursor-pointer",
|
|
6361
|
+
"whitespace-nowrap",
|
|
6362
|
+
"transition-all duration-150",
|
|
6363
|
+
"flex-shrink-0",
|
|
6364
|
+
"outline-none",
|
|
6365
|
+
"border"
|
|
6366
|
+
].join(" ");
|
|
6367
|
+
const stateClasses = {
|
|
6368
|
+
selected: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
|
|
6369
|
+
default: "border-[color:var(--deframe-widget-color-border-secondary)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]"
|
|
6370
|
+
};
|
|
6371
|
+
const buttonClasses = twMerge(baseClasses, stateClasses[selected ? "selected" : "default"]);
|
|
6372
|
+
const nameLabelClasses = [
|
|
6373
|
+
"text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] leading-[1.2]",
|
|
6374
|
+
selected ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)]"
|
|
6375
|
+
].join(" ");
|
|
6376
|
+
return /* @__PURE__ */ jsxs(
|
|
6377
|
+
"button",
|
|
6378
|
+
{
|
|
6379
|
+
"data-test-id": "network-chip",
|
|
6380
|
+
onClick,
|
|
6381
|
+
"aria-label": network.name,
|
|
6382
|
+
className: buttonClasses,
|
|
6383
|
+
children: [
|
|
6384
|
+
/* @__PURE__ */ jsx(
|
|
6385
|
+
IconCircle2,
|
|
6386
|
+
{
|
|
6387
|
+
iconUrl: network.iconUrl,
|
|
6388
|
+
name: network.name,
|
|
6389
|
+
size: 24
|
|
6390
|
+
}
|
|
6391
|
+
),
|
|
6392
|
+
/* @__PURE__ */ jsxs(
|
|
6393
|
+
"div",
|
|
6394
|
+
{
|
|
6395
|
+
"data-test-id": "network-chip-content",
|
|
6396
|
+
className: "text-left",
|
|
6397
|
+
children: [
|
|
6398
|
+
/* @__PURE__ */ jsx(
|
|
6399
|
+
"div",
|
|
6400
|
+
{
|
|
6401
|
+
"data-test-id": "network-chip-label",
|
|
6402
|
+
className: nameLabelClasses,
|
|
6403
|
+
children: network.name
|
|
6404
|
+
}
|
|
6405
|
+
),
|
|
6406
|
+
hasSignificantBalance(network.balanceUsd) && /* @__PURE__ */ jsx(
|
|
6407
|
+
"div",
|
|
6408
|
+
{
|
|
6409
|
+
"data-test-id": "network-chip-balance",
|
|
6410
|
+
className: "text-[11px] text-[color:var(--deframe-widget-color-text-tertiary)] leading-[1.4]",
|
|
6411
|
+
children: network.balanceUsd
|
|
6412
|
+
}
|
|
6413
|
+
)
|
|
6414
|
+
]
|
|
6415
|
+
}
|
|
6416
|
+
)
|
|
6417
|
+
]
|
|
6418
|
+
}
|
|
6419
|
+
);
|
|
6420
|
+
}
|
|
6421
|
+
var SearchInputInline = React6.forwardRef(
|
|
6422
|
+
({ value, onChange, placeholder, onArrowDown, autoFocus }, ref) => {
|
|
6423
|
+
const inputClasses = [
|
|
6424
|
+
"w-full box-border h-10",
|
|
6425
|
+
"bg-[var(--deframe-widget-color-bg-tertiary)]",
|
|
6426
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
6427
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
6428
|
+
"py-[var(--deframe-widget-size-padding-y-none)] pr-[var(--deframe-widget-size-padding-x-xl)] pl-[14px]",
|
|
6429
|
+
"text-[14px] text-[color:var(--deframe-widget-color-text-primary)]",
|
|
6430
|
+
"outline-none focus:outline-none",
|
|
6431
|
+
"focus:border-[color:var(--deframe-widget-color-brand-primary)]",
|
|
6432
|
+
"transition-colors duration-150",
|
|
6433
|
+
"font-[var(--deframe-widget-font-family)]",
|
|
6434
|
+
"placeholder:text-[color:var(--deframe-widget-color-text-tertiary)]"
|
|
6435
|
+
].join(" ");
|
|
6436
|
+
return /* @__PURE__ */ jsxs(
|
|
6437
|
+
"div",
|
|
6438
|
+
{
|
|
6439
|
+
"data-test-id": "search-input-wrapper",
|
|
6440
|
+
className: "relative",
|
|
6441
|
+
children: [
|
|
6442
|
+
/* @__PURE__ */ jsx(
|
|
6443
|
+
"input",
|
|
6444
|
+
{
|
|
6445
|
+
"data-test-id": "search-input",
|
|
6446
|
+
ref,
|
|
6447
|
+
type: "text",
|
|
6448
|
+
value,
|
|
6449
|
+
onChange: (e) => onChange(e.target.value),
|
|
6450
|
+
placeholder,
|
|
6451
|
+
"aria-label": placeholder,
|
|
6452
|
+
autoFocus,
|
|
6453
|
+
onKeyDown: (e) => {
|
|
6454
|
+
if (e.key === "ArrowDown") {
|
|
6455
|
+
e.preventDefault();
|
|
6456
|
+
onArrowDown == null ? void 0 : onArrowDown();
|
|
6457
|
+
}
|
|
6458
|
+
},
|
|
6459
|
+
className: inputClasses
|
|
6460
|
+
}
|
|
6461
|
+
),
|
|
6462
|
+
/* @__PURE__ */ jsx(
|
|
6463
|
+
"div",
|
|
6464
|
+
{
|
|
6465
|
+
"data-test-id": "search-input-icon",
|
|
6466
|
+
className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-[color:var(--deframe-widget-color-text-tertiary)]",
|
|
6467
|
+
children: /* @__PURE__ */ jsxs(
|
|
6468
|
+
"svg",
|
|
6469
|
+
{
|
|
6470
|
+
width: "15",
|
|
6471
|
+
height: "15",
|
|
6472
|
+
viewBox: "0 0 24 24",
|
|
6473
|
+
fill: "none",
|
|
6474
|
+
stroke: "currentColor",
|
|
6475
|
+
strokeWidth: "2",
|
|
6476
|
+
strokeLinecap: "round",
|
|
6477
|
+
"aria-hidden": "true",
|
|
6478
|
+
children: [
|
|
6479
|
+
/* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
|
|
6480
|
+
/* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
|
|
6481
|
+
]
|
|
6482
|
+
}
|
|
6483
|
+
)
|
|
6484
|
+
}
|
|
6485
|
+
)
|
|
6486
|
+
]
|
|
6487
|
+
}
|
|
6488
|
+
);
|
|
6489
|
+
}
|
|
6490
|
+
);
|
|
6491
|
+
SearchInputInline.displayName = "SearchInputInline";
|
|
6492
|
+
function AssetRowInline({
|
|
6493
|
+
token,
|
|
6494
|
+
balance,
|
|
6495
|
+
formatTokenAmount,
|
|
6496
|
+
formatCurrencyValue,
|
|
6497
|
+
onClick,
|
|
6498
|
+
onKeyDown,
|
|
6499
|
+
index
|
|
6500
|
+
}) {
|
|
6501
|
+
var _a;
|
|
6502
|
+
const hasBalance = !!balance && parseFloat(balance.amountInUSD) >= 0.01;
|
|
6503
|
+
const formattedAmount = balance ? formatTokenAmount(balance.amountUI, (_a = token.priceInUSD) != null ? _a : 0, token.decimals) : void 0;
|
|
6504
|
+
const formattedUsd = balance ? formatCurrencyValue(parseFloat(balance.amountInUSD)) : void 0;
|
|
6505
|
+
const baseClasses = [
|
|
6506
|
+
"group",
|
|
6507
|
+
"relative flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
|
|
6508
|
+
"py-[10px] px-[14px]",
|
|
6509
|
+
"rounded-[var(--deframe-widget-size-radius-sm)]",
|
|
6510
|
+
"cursor-pointer outline-none",
|
|
6511
|
+
"transition-[background] duration-150"
|
|
6512
|
+
].join(" ");
|
|
6513
|
+
const rowClasses = twMerge(baseClasses, "bg-transparent hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]");
|
|
6514
|
+
return /* @__PURE__ */ jsxs(
|
|
6515
|
+
"div",
|
|
6516
|
+
{
|
|
6517
|
+
"data-test-id": "asset-row",
|
|
6518
|
+
role: "option",
|
|
6519
|
+
"aria-selected": false,
|
|
6520
|
+
"aria-label": `${token.name} ${token.symbol}`,
|
|
6521
|
+
tabIndex: 0,
|
|
6522
|
+
onClick,
|
|
6523
|
+
onKeyDown,
|
|
6524
|
+
"data-asset-index": index,
|
|
6525
|
+
className: rowClasses,
|
|
6526
|
+
children: [
|
|
6527
|
+
/* @__PURE__ */ jsx(
|
|
6528
|
+
IconCircle2,
|
|
6529
|
+
{
|
|
6530
|
+
iconUrl: token.logoURI,
|
|
6531
|
+
name: token.name,
|
|
6532
|
+
size: 38
|
|
6533
|
+
}
|
|
6534
|
+
),
|
|
6535
|
+
/* @__PURE__ */ jsxs(
|
|
6536
|
+
"div",
|
|
6537
|
+
{
|
|
6538
|
+
"data-test-id": "asset-row-content",
|
|
6539
|
+
className: "flex-1 min-w-0",
|
|
6540
|
+
children: [
|
|
6541
|
+
/* @__PURE__ */ jsx(
|
|
6542
|
+
"div",
|
|
6543
|
+
{
|
|
6544
|
+
"data-test-id": "asset-row-symbol",
|
|
6545
|
+
className: "text-[14px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]",
|
|
6546
|
+
children: token.symbol
|
|
6547
|
+
}
|
|
6548
|
+
),
|
|
6549
|
+
/* @__PURE__ */ jsx(
|
|
6550
|
+
"div",
|
|
6551
|
+
{
|
|
6552
|
+
"data-test-id": "asset-row-name",
|
|
6553
|
+
className: "text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] mt-px",
|
|
6554
|
+
children: token.name
|
|
6555
|
+
}
|
|
6556
|
+
)
|
|
6557
|
+
]
|
|
6558
|
+
}
|
|
6559
|
+
),
|
|
6560
|
+
hasBalance ? /* @__PURE__ */ jsxs(
|
|
6561
|
+
"div",
|
|
6562
|
+
{
|
|
6563
|
+
"data-test-id": "asset-row-balance",
|
|
6564
|
+
className: "flex-shrink-0 text-right",
|
|
6565
|
+
children: [
|
|
6566
|
+
formattedAmount && /* @__PURE__ */ jsxs(
|
|
6567
|
+
"div",
|
|
6568
|
+
{
|
|
6569
|
+
"data-test-id": "asset-row-balance-amount",
|
|
6570
|
+
className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-primary)]",
|
|
6571
|
+
children: [
|
|
6572
|
+
formattedAmount,
|
|
6573
|
+
" ",
|
|
6574
|
+
/* @__PURE__ */ jsx(
|
|
6575
|
+
"span",
|
|
6576
|
+
{
|
|
6577
|
+
"data-test-id": "asset-row-balance-symbol",
|
|
6578
|
+
className: "text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)] [font-weight:var(--deframe-widget-font-weight-regular)]",
|
|
6579
|
+
children: token.symbol
|
|
6580
|
+
}
|
|
6581
|
+
)
|
|
6582
|
+
]
|
|
6583
|
+
}
|
|
6584
|
+
),
|
|
6585
|
+
formattedUsd && /* @__PURE__ */ jsx(
|
|
6586
|
+
"div",
|
|
6587
|
+
{
|
|
6588
|
+
"data-test-id": "asset-row-balance-usd",
|
|
6589
|
+
className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)] mt-[var(--deframe-widget-size-gap-none)].5",
|
|
6590
|
+
children: formattedUsd
|
|
6591
|
+
}
|
|
6592
|
+
)
|
|
6593
|
+
]
|
|
6594
|
+
}
|
|
6595
|
+
) : /* @__PURE__ */ jsx(Fragment, {})
|
|
6596
|
+
]
|
|
6597
|
+
}
|
|
6598
|
+
);
|
|
6599
|
+
}
|
|
6600
|
+
function TokensLoadingState({ label }) {
|
|
6601
|
+
return /* @__PURE__ */ jsx(
|
|
6602
|
+
"div",
|
|
6603
|
+
{
|
|
6604
|
+
"data-test-id": "tokens-loading-state",
|
|
6605
|
+
className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[14px] py-[var(--deframe-widget-size-padding-y-sm)]",
|
|
6606
|
+
children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs(
|
|
6607
|
+
"div",
|
|
4540
6608
|
{
|
|
4541
|
-
|
|
4542
|
-
|
|
4543
|
-
|
|
4544
|
-
|
|
4545
|
-
|
|
4546
|
-
|
|
4547
|
-
|
|
4548
|
-
|
|
4549
|
-
|
|
6609
|
+
"data-test-id": `tokens-loading-skeleton-${i}`,
|
|
6610
|
+
className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] animate-pulse",
|
|
6611
|
+
children: [
|
|
6612
|
+
/* @__PURE__ */ jsx("div", { className: "w-[38px] h-[38px] rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex-shrink-0" }),
|
|
6613
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-[6px]", children: [
|
|
6614
|
+
/* @__PURE__ */ jsx("div", { className: "h-[14px] w-[60%] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-bg-tertiary)]" }),
|
|
6615
|
+
/* @__PURE__ */ jsx("div", { className: "h-[12px] w-[40%] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-bg-tertiary)]" })
|
|
6616
|
+
] }),
|
|
6617
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 flex flex-col items-end gap-[6px]", children: [
|
|
6618
|
+
/* @__PURE__ */ jsx("div", { className: "h-[13px] w-[50px] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-bg-tertiary)]" }),
|
|
6619
|
+
/* @__PURE__ */ jsx("div", { className: "h-[12px] w-[36px] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-bg-tertiary)]" })
|
|
6620
|
+
] })
|
|
6621
|
+
]
|
|
6622
|
+
},
|
|
6623
|
+
i
|
|
6624
|
+
))
|
|
6625
|
+
}
|
|
6626
|
+
);
|
|
6627
|
+
}
|
|
6628
|
+
function AssetSearchAndList({
|
|
6629
|
+
query,
|
|
6630
|
+
setQuery,
|
|
6631
|
+
searchRef,
|
|
6632
|
+
assetListRef,
|
|
6633
|
+
displayedTokens,
|
|
6634
|
+
findBalance,
|
|
6635
|
+
formatTokenAmount,
|
|
6636
|
+
formatCurrencyValue,
|
|
6637
|
+
isMobile,
|
|
6638
|
+
onAssetClick,
|
|
6639
|
+
handleAssetKeyDown,
|
|
6640
|
+
isFetching,
|
|
6641
|
+
hasMore,
|
|
6642
|
+
onLoadMore,
|
|
6643
|
+
labels,
|
|
6644
|
+
autoFocus
|
|
6645
|
+
}) {
|
|
6646
|
+
return /* @__PURE__ */ jsxs(
|
|
6647
|
+
"div",
|
|
6648
|
+
{
|
|
6649
|
+
"data-test-id": "search-and-assets",
|
|
6650
|
+
className: "flex flex-col flex-1 overflow-hidden",
|
|
6651
|
+
children: [
|
|
6652
|
+
/* @__PURE__ */ jsx(
|
|
6653
|
+
"div",
|
|
6654
|
+
{
|
|
6655
|
+
"data-test-id": "search-wrapper",
|
|
6656
|
+
className: twMerge(
|
|
6657
|
+
"px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)] flex-shrink-0",
|
|
6658
|
+
isMobile ? "pt-[var(--deframe-widget-size-padding-y-none)]" : "pt-[var(--deframe-widget-size-padding-y-sm)]"
|
|
6659
|
+
),
|
|
6660
|
+
children: /* @__PURE__ */ jsx(
|
|
6661
|
+
SearchInputInline,
|
|
6662
|
+
{
|
|
6663
|
+
ref: searchRef,
|
|
6664
|
+
value: query,
|
|
6665
|
+
onChange: setQuery,
|
|
6666
|
+
placeholder: labels.searchPlaceholder,
|
|
6667
|
+
autoFocus,
|
|
6668
|
+
onArrowDown: () => {
|
|
6669
|
+
var _a, _b;
|
|
6670
|
+
(_b = (_a = assetListRef.current) == null ? void 0 : _a.querySelector("[data-asset-index='0']")) == null ? void 0 : _b.focus();
|
|
6671
|
+
}
|
|
6672
|
+
}
|
|
6673
|
+
)
|
|
6674
|
+
}
|
|
6675
|
+
),
|
|
6676
|
+
/* @__PURE__ */ jsx(
|
|
6677
|
+
"div",
|
|
6678
|
+
{
|
|
6679
|
+
"data-test-id": "section-label",
|
|
6680
|
+
className: "px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xs)] flex-shrink-0 text-[11px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-tertiary)] tracking-[0.06em] uppercase",
|
|
6681
|
+
children: labels.assetsLabel
|
|
6682
|
+
}
|
|
6683
|
+
),
|
|
6684
|
+
/* @__PURE__ */ jsx(
|
|
6685
|
+
"div",
|
|
6686
|
+
{
|
|
6687
|
+
ref: assetListRef,
|
|
6688
|
+
role: "listbox",
|
|
6689
|
+
"aria-label": labels.assetsLabel,
|
|
6690
|
+
"data-test-id": "asset-list",
|
|
6691
|
+
className: "flex-1 overflow-y-auto px-[var(--deframe-widget-size-padding-x-sm)] pb-[var(--deframe-widget-size-padding-y-sm)] pt-[var(--deframe-widget-size-padding-y-xs)]",
|
|
6692
|
+
children: isFetching ? /* @__PURE__ */ jsx(TokensLoadingState, { label: labels.searchingText }) : displayedTokens.length === 0 ? /* @__PURE__ */ jsxs(
|
|
6693
|
+
"div",
|
|
6694
|
+
{
|
|
6695
|
+
"data-test-id": "no-results",
|
|
6696
|
+
className: "py-[var(--deframe-widget-size-padding-y-xl)] px-[var(--deframe-widget-size-padding-x-md)] text-center",
|
|
6697
|
+
children: [
|
|
6698
|
+
/* @__PURE__ */ jsx(
|
|
6699
|
+
"div",
|
|
6700
|
+
{
|
|
6701
|
+
"data-test-id": "no-results-title",
|
|
6702
|
+
className: "text-[14px] text-[color:var(--deframe-widget-color-text-secondary)] mb-[var(--deframe-widget-size-gap-xs)]",
|
|
6703
|
+
children: labels.searchEmptyTitle
|
|
6704
|
+
}
|
|
6705
|
+
),
|
|
6706
|
+
/* @__PURE__ */ jsx(
|
|
6707
|
+
"div",
|
|
6708
|
+
{
|
|
6709
|
+
"data-test-id": "no-results-description",
|
|
6710
|
+
className: "text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)]",
|
|
6711
|
+
children: labels.searchEmptyDescription
|
|
6712
|
+
}
|
|
6713
|
+
)
|
|
6714
|
+
]
|
|
6715
|
+
}
|
|
6716
|
+
) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
6717
|
+
displayedTokens.map((token, i) => /* @__PURE__ */ jsx(
|
|
6718
|
+
AssetRowInline,
|
|
6719
|
+
{
|
|
6720
|
+
token,
|
|
6721
|
+
balance: findBalance(token),
|
|
6722
|
+
formatTokenAmount,
|
|
6723
|
+
formatCurrencyValue,
|
|
6724
|
+
onClick: () => onAssetClick(token),
|
|
6725
|
+
onKeyDown: (e) => handleAssetKeyDown(e, token, i),
|
|
6726
|
+
index: i
|
|
6727
|
+
},
|
|
6728
|
+
`${token.chainId}-${token.address}-${i}`
|
|
6729
|
+
)),
|
|
6730
|
+
hasMore && /* @__PURE__ */ jsx(
|
|
6731
|
+
"div",
|
|
6732
|
+
{
|
|
6733
|
+
"data-test-id": "load-more-wrapper",
|
|
6734
|
+
className: "flex justify-center py-[var(--deframe-widget-size-padding-y-sm)]",
|
|
6735
|
+
children: /* @__PURE__ */ jsx(
|
|
6736
|
+
"button",
|
|
6737
|
+
{
|
|
6738
|
+
"data-test-id": "load-more-button",
|
|
6739
|
+
"aria-label": labels.loadMoreButton,
|
|
6740
|
+
onClick: onLoadMore,
|
|
6741
|
+
className: [
|
|
6742
|
+
"text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)]",
|
|
6743
|
+
"text-[color:var(--deframe-widget-color-brand-primary)]",
|
|
6744
|
+
"bg-transparent border-none cursor-pointer outline-none",
|
|
6745
|
+
"hover:underline",
|
|
6746
|
+
"font-[var(--deframe-widget-font-family)]"
|
|
6747
|
+
].join(" "),
|
|
6748
|
+
children: labels.loadMoreButton
|
|
6749
|
+
}
|
|
6750
|
+
)
|
|
6751
|
+
}
|
|
6752
|
+
)
|
|
6753
|
+
] })
|
|
6754
|
+
}
|
|
6755
|
+
)
|
|
6756
|
+
]
|
|
6757
|
+
}
|
|
6758
|
+
);
|
|
6759
|
+
}
|
|
6760
|
+
function ChooseNetworkAndAssetViewSimple({
|
|
6761
|
+
isOpen,
|
|
6762
|
+
onClose,
|
|
6763
|
+
networks,
|
|
6764
|
+
selectedNetwork,
|
|
6765
|
+
onNetworkSelect,
|
|
6766
|
+
displayedTokens,
|
|
6767
|
+
findBalance,
|
|
6768
|
+
formatTokenAmount,
|
|
6769
|
+
formatCurrencyValue,
|
|
6770
|
+
onAssetClick,
|
|
6771
|
+
onSearch,
|
|
6772
|
+
autoFocus,
|
|
6773
|
+
hasMore,
|
|
6774
|
+
onLoadMore,
|
|
6775
|
+
isFetching,
|
|
6776
|
+
labels
|
|
6777
|
+
}) {
|
|
6778
|
+
var _a;
|
|
6779
|
+
const [query, setQuery] = React6.useState("");
|
|
6780
|
+
const searchRef = React6.useRef(null);
|
|
6781
|
+
const chainListRef = React6.useRef(null);
|
|
6782
|
+
const assetListRef = React6.useRef(null);
|
|
6783
|
+
const isMobile = useIsMobile();
|
|
6784
|
+
const activeNetwork = (_a = selectedNetwork != null ? selectedNetwork : networks[0]) != null ? _a : null;
|
|
6785
|
+
const handleQueryChange = React6.useCallback((q) => {
|
|
6786
|
+
setQuery(q);
|
|
6787
|
+
onSearch(q);
|
|
6788
|
+
}, [onSearch]);
|
|
6789
|
+
const handleNetworkSelect = React6.useCallback((network) => {
|
|
6790
|
+
var _a2;
|
|
6791
|
+
setQuery("");
|
|
6792
|
+
onSearch("");
|
|
6793
|
+
onNetworkSelect(network);
|
|
6794
|
+
(_a2 = searchRef.current) == null ? void 0 : _a2.focus();
|
|
6795
|
+
}, [onSearch, onNetworkSelect]);
|
|
6796
|
+
React6.useEffect(() => {
|
|
6797
|
+
if (!isOpen) return;
|
|
6798
|
+
const onKey = (e) => {
|
|
6799
|
+
if (e.key === "Escape") onClose();
|
|
6800
|
+
};
|
|
6801
|
+
window.addEventListener("keydown", onKey);
|
|
6802
|
+
return () => window.removeEventListener("keydown", onKey);
|
|
6803
|
+
}, [isOpen, onClose]);
|
|
6804
|
+
React6.useEffect(() => {
|
|
6805
|
+
if (isOpen && autoFocus) {
|
|
6806
|
+
const id = requestAnimationFrame(() => {
|
|
6807
|
+
var _a2;
|
|
6808
|
+
return (_a2 = searchRef.current) == null ? void 0 : _a2.focus();
|
|
6809
|
+
});
|
|
6810
|
+
return () => cancelAnimationFrame(id);
|
|
6811
|
+
}
|
|
6812
|
+
}, [isOpen, autoFocus]);
|
|
6813
|
+
const handleChainKeyDown = React6.useCallback((e, network, idx) => {
|
|
6814
|
+
var _a2, _b, _c, _d;
|
|
6815
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
6816
|
+
e.preventDefault();
|
|
6817
|
+
handleNetworkSelect(network);
|
|
6818
|
+
}
|
|
6819
|
+
if (e.key === "ArrowDown") {
|
|
6820
|
+
e.preventDefault();
|
|
6821
|
+
(_b = (_a2 = chainListRef.current) == null ? void 0 : _a2.querySelector(`[data-chain-index="${idx + 1}"]`)) == null ? void 0 : _b.focus();
|
|
6822
|
+
}
|
|
6823
|
+
if (e.key === "ArrowUp") {
|
|
6824
|
+
e.preventDefault();
|
|
6825
|
+
(_d = (_c = chainListRef.current) == null ? void 0 : _c.querySelector(`[data-chain-index="${idx - 1}"]`)) == null ? void 0 : _d.focus();
|
|
6826
|
+
}
|
|
6827
|
+
}, [handleNetworkSelect]);
|
|
6828
|
+
const handleAssetKeyDown = React6.useCallback((e, token, idx) => {
|
|
6829
|
+
var _a2, _b, _c, _d, _e;
|
|
6830
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
6831
|
+
e.preventDefault();
|
|
6832
|
+
onAssetClick(token);
|
|
6833
|
+
}
|
|
6834
|
+
if (e.key === "ArrowDown") {
|
|
6835
|
+
e.preventDefault();
|
|
6836
|
+
(_b = (_a2 = assetListRef.current) == null ? void 0 : _a2.querySelector(`[data-asset-index="${idx + 1}"]`)) == null ? void 0 : _b.focus();
|
|
6837
|
+
}
|
|
6838
|
+
if (e.key === "ArrowUp") {
|
|
6839
|
+
e.preventDefault();
|
|
6840
|
+
if (idx === 0) {
|
|
6841
|
+
(_c = searchRef.current) == null ? void 0 : _c.focus();
|
|
6842
|
+
return;
|
|
6843
|
+
}
|
|
6844
|
+
(_e = (_d = assetListRef.current) == null ? void 0 : _d.querySelector(`[data-asset-index="${idx - 1}"]`)) == null ? void 0 : _e.focus();
|
|
6845
|
+
}
|
|
6846
|
+
}, [onAssetClick]);
|
|
6847
|
+
const content = isOpen ? renderContent() : null;
|
|
6848
|
+
return /* @__PURE__ */ jsx(AnimatePresence, { children: content });
|
|
6849
|
+
function renderContent() {
|
|
6850
|
+
const sharedSearchAssets = /* @__PURE__ */ jsx(
|
|
6851
|
+
AssetSearchAndList,
|
|
4550
6852
|
{
|
|
4551
|
-
|
|
4552
|
-
|
|
4553
|
-
|
|
4554
|
-
|
|
4555
|
-
|
|
6853
|
+
query,
|
|
6854
|
+
setQuery: handleQueryChange,
|
|
6855
|
+
searchRef,
|
|
6856
|
+
assetListRef,
|
|
6857
|
+
displayedTokens,
|
|
6858
|
+
findBalance,
|
|
6859
|
+
formatTokenAmount,
|
|
6860
|
+
formatCurrencyValue,
|
|
6861
|
+
isMobile,
|
|
6862
|
+
onAssetClick,
|
|
6863
|
+
handleAssetKeyDown,
|
|
6864
|
+
isFetching,
|
|
6865
|
+
hasMore,
|
|
6866
|
+
onLoadMore,
|
|
6867
|
+
labels,
|
|
6868
|
+
autoFocus
|
|
6869
|
+
}
|
|
6870
|
+
);
|
|
6871
|
+
if (isMobile) {
|
|
6872
|
+
return /* @__PURE__ */ jsx(
|
|
6873
|
+
motion.div,
|
|
6874
|
+
{
|
|
6875
|
+
initial: { opacity: 0 },
|
|
6876
|
+
animate: { opacity: 1 },
|
|
6877
|
+
exit: { opacity: 0 },
|
|
6878
|
+
transition: { duration: 0.2 },
|
|
6879
|
+
onClick: onClose,
|
|
6880
|
+
"data-test-id": "backdrop",
|
|
6881
|
+
className: "fixed inset-0 bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)] backdrop-blur-[4px] z-50 flex flex-col justify-end",
|
|
6882
|
+
children: /* @__PURE__ */ jsxs(
|
|
6883
|
+
motion.div,
|
|
4556
6884
|
{
|
|
4557
|
-
|
|
4558
|
-
|
|
4559
|
-
"
|
|
4560
|
-
"
|
|
6885
|
+
role: "dialog",
|
|
6886
|
+
"aria-modal": "true",
|
|
6887
|
+
"aria-label": labels.title,
|
|
6888
|
+
initial: { y: "100%" },
|
|
6889
|
+
animate: { y: 0 },
|
|
6890
|
+
exit: { y: "100%" },
|
|
6891
|
+
transition: { type: "spring", stiffness: 320, damping: 32, mass: 0.8 },
|
|
6892
|
+
onClick: (e) => e.stopPropagation(),
|
|
6893
|
+
"data-test-id": "sheet",
|
|
6894
|
+
className: [
|
|
6895
|
+
"bg-[var(--deframe-widget-color-bg-secondary)] flex flex-col overflow-hidden",
|
|
6896
|
+
"rounded-t-[var(--deframe-widget-size-radius-lg)]",
|
|
6897
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)] border-b-0",
|
|
6898
|
+
"shadow-[0px_4px_16px_0px_#00000066,0px_24px_80px_0px_#00000099]",
|
|
6899
|
+
"max-h-[88vh]"
|
|
6900
|
+
].join(" "),
|
|
4561
6901
|
children: [
|
|
4562
|
-
/* @__PURE__ */ jsx(
|
|
4563
|
-
"
|
|
6902
|
+
/* @__PURE__ */ jsx(
|
|
6903
|
+
"div",
|
|
4564
6904
|
{
|
|
4565
|
-
|
|
4566
|
-
|
|
4567
|
-
className: "w-
|
|
6905
|
+
"data-test-id": "drag-handle",
|
|
6906
|
+
className: "flex justify-center pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-xs)].5 flex-shrink-0",
|
|
6907
|
+
children: /* @__PURE__ */ jsx("div", { className: "w-9 h-1 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-border-primary)]" })
|
|
4568
6908
|
}
|
|
4569
|
-
)
|
|
4570
|
-
/* @__PURE__ */
|
|
6909
|
+
),
|
|
6910
|
+
/* @__PURE__ */ jsxs(
|
|
6911
|
+
"div",
|
|
6912
|
+
{
|
|
6913
|
+
"data-test-id": "sheet-header",
|
|
6914
|
+
className: "flex items-center justify-between pt-[var(--deframe-widget-size-padding-y-xs)].5 pr-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)].5 pl-[var(--deframe-widget-size-padding-x-md)] flex-shrink-0",
|
|
6915
|
+
children: [
|
|
6916
|
+
/* @__PURE__ */ jsx(
|
|
6917
|
+
"span",
|
|
6918
|
+
{
|
|
6919
|
+
"data-test-id": "sheet-title",
|
|
6920
|
+
className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)]",
|
|
6921
|
+
children: labels.title
|
|
6922
|
+
}
|
|
6923
|
+
),
|
|
6924
|
+
/* @__PURE__ */ jsx(CloseButtonInline, { onClick: onClose, ariaLabel: labels.closeAriaLabel })
|
|
6925
|
+
]
|
|
6926
|
+
}
|
|
6927
|
+
),
|
|
6928
|
+
/* @__PURE__ */ jsxs(
|
|
6929
|
+
"div",
|
|
6930
|
+
{
|
|
6931
|
+
"data-test-id": "network-section",
|
|
6932
|
+
className: "flex-shrink-0 pb-[var(--deframe-widget-size-padding-y-sm)].5",
|
|
6933
|
+
children: [
|
|
6934
|
+
/* @__PURE__ */ jsx(
|
|
6935
|
+
"div",
|
|
6936
|
+
{
|
|
6937
|
+
"data-test-id": "network-section-label",
|
|
6938
|
+
className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-tertiary)] tracking-[0.06em] uppercase px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)]",
|
|
6939
|
+
children: labels.networksLabel
|
|
6940
|
+
}
|
|
6941
|
+
),
|
|
6942
|
+
/* @__PURE__ */ jsx(
|
|
6943
|
+
"div",
|
|
6944
|
+
{
|
|
6945
|
+
ref: chainListRef,
|
|
6946
|
+
role: "listbox",
|
|
6947
|
+
"aria-label": labels.networksLabel,
|
|
6948
|
+
"data-test-id": "network-chip-list",
|
|
6949
|
+
className: "flex gap-[var(--deframe-widget-size-gap-sm)] overflow-x-auto px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xs)] [scrollbar-width:none]",
|
|
6950
|
+
children: networks.map((network) => /* @__PURE__ */ jsx(
|
|
6951
|
+
NetworkChip,
|
|
6952
|
+
{
|
|
6953
|
+
network,
|
|
6954
|
+
selected: (activeNetwork == null ? void 0 : activeNetwork.chainId) === network.chainId,
|
|
6955
|
+
onClick: () => handleNetworkSelect(network)
|
|
6956
|
+
},
|
|
6957
|
+
network.chainId
|
|
6958
|
+
))
|
|
6959
|
+
}
|
|
6960
|
+
)
|
|
6961
|
+
]
|
|
6962
|
+
}
|
|
6963
|
+
),
|
|
6964
|
+
/* @__PURE__ */ jsx(
|
|
6965
|
+
"div",
|
|
6966
|
+
{
|
|
6967
|
+
"data-test-id": "divider",
|
|
6968
|
+
className: "h-px bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
|
|
6969
|
+
}
|
|
6970
|
+
),
|
|
6971
|
+
/* @__PURE__ */ jsx(
|
|
6972
|
+
"div",
|
|
6973
|
+
{
|
|
6974
|
+
"data-test-id": "sheet-body",
|
|
6975
|
+
className: "flex-1 flex flex-col overflow-hidden pt-[var(--deframe-widget-size-padding-y-xs)]",
|
|
6976
|
+
children: sharedSearchAssets
|
|
6977
|
+
}
|
|
6978
|
+
)
|
|
4571
6979
|
]
|
|
4572
|
-
}
|
|
4573
|
-
|
|
4574
|
-
|
|
4575
|
-
|
|
4576
|
-
|
|
4577
|
-
|
|
4578
|
-
|
|
4579
|
-
|
|
4580
|
-
|
|
6980
|
+
}
|
|
6981
|
+
)
|
|
6982
|
+
},
|
|
6983
|
+
"mobile"
|
|
6984
|
+
);
|
|
6985
|
+
}
|
|
6986
|
+
return /* @__PURE__ */ jsx(
|
|
6987
|
+
motion.div,
|
|
6988
|
+
{
|
|
6989
|
+
initial: { opacity: 0 },
|
|
6990
|
+
animate: { opacity: 1 },
|
|
6991
|
+
exit: { opacity: 0 },
|
|
6992
|
+
transition: { duration: 0.2 },
|
|
6993
|
+
onClick: onClose,
|
|
6994
|
+
"data-test-id": "backdrop",
|
|
6995
|
+
className: "fixed inset-0 bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)] backdrop-blur-[4px] z-50 flex items-center justify-center px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
|
|
6996
|
+
children: /* @__PURE__ */ jsxs(
|
|
6997
|
+
motion.div,
|
|
6998
|
+
{
|
|
6999
|
+
role: "dialog",
|
|
7000
|
+
"aria-modal": "true",
|
|
7001
|
+
"aria-label": labels.title,
|
|
7002
|
+
initial: { opacity: 0, scale: 0.96 },
|
|
7003
|
+
animate: { opacity: 1, scale: 1 },
|
|
7004
|
+
exit: { opacity: 0, scale: 0.96 },
|
|
7005
|
+
transition: { duration: 0.2, ease: "easeOut" },
|
|
7006
|
+
onClick: (e) => e.stopPropagation(),
|
|
7007
|
+
"data-test-id": "modal",
|
|
7008
|
+
className: [
|
|
7009
|
+
"w-[min(680px,calc(100vw-32px))]",
|
|
7010
|
+
"h-[min(620px,calc(100vh-64px))]",
|
|
7011
|
+
"bg-[var(--deframe-widget-color-bg-secondary)]",
|
|
7012
|
+
"border border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
7013
|
+
"rounded-[var(--deframe-widget-size-radius-md)]",
|
|
7014
|
+
"shadow-[0px_4px_16px_0px_#00000066,0px_24px_80px_0px_#00000099]",
|
|
7015
|
+
"flex flex-col overflow-hidden"
|
|
7016
|
+
].join(" "),
|
|
7017
|
+
children: [
|
|
7018
|
+
/* @__PURE__ */ jsxs(
|
|
7019
|
+
"div",
|
|
7020
|
+
{
|
|
7021
|
+
"data-test-id": "modal-header",
|
|
7022
|
+
className: "flex items-center justify-between pt-[var(--deframe-widget-size-padding-y-md)] pr-[var(--deframe-widget-size-padding-x-md)] pb-[14px] pl-[var(--deframe-widget-size-padding-x-md)] border-b border-[color:var(--deframe-widget-color-border-secondary)] flex-shrink-0",
|
|
7023
|
+
children: [
|
|
7024
|
+
/* @__PURE__ */ jsx(
|
|
7025
|
+
"span",
|
|
7026
|
+
{
|
|
7027
|
+
"data-test-id": "modal-title",
|
|
7028
|
+
className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[var(--deframe-widget-font-family)]",
|
|
7029
|
+
children: labels.title
|
|
7030
|
+
}
|
|
7031
|
+
),
|
|
7032
|
+
/* @__PURE__ */ jsx(CloseButtonInline, { onClick: onClose, ariaLabel: labels.closeAriaLabel })
|
|
7033
|
+
]
|
|
7034
|
+
}
|
|
7035
|
+
),
|
|
7036
|
+
/* @__PURE__ */ jsxs(
|
|
7037
|
+
"div",
|
|
7038
|
+
{
|
|
7039
|
+
"data-test-id": "modal-body",
|
|
7040
|
+
className: "flex flex-1 overflow-hidden",
|
|
7041
|
+
children: [
|
|
7042
|
+
/* @__PURE__ */ jsxs(
|
|
7043
|
+
"div",
|
|
7044
|
+
{
|
|
7045
|
+
"data-test-id": "network-sidebar",
|
|
7046
|
+
className: [
|
|
7047
|
+
"w-[210px] flex-shrink-0",
|
|
7048
|
+
"border-r border-[color:var(--deframe-widget-color-border-secondary)]",
|
|
7049
|
+
"bg-[#12151C]",
|
|
7050
|
+
"flex flex-col overflow-hidden"
|
|
7051
|
+
].join(" "),
|
|
7052
|
+
children: [
|
|
7053
|
+
/* @__PURE__ */ jsx(
|
|
7054
|
+
"div",
|
|
7055
|
+
{
|
|
7056
|
+
"data-test-id": "network-sidebar-label",
|
|
7057
|
+
className: "px-[var(--deframe-widget-size-padding-x-md)] pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-xs)].5 text-[11px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-tertiary)] tracking-[0.06em] uppercase",
|
|
7058
|
+
children: labels.networksLabel
|
|
7059
|
+
}
|
|
7060
|
+
),
|
|
7061
|
+
/* @__PURE__ */ jsx(
|
|
7062
|
+
"div",
|
|
7063
|
+
{
|
|
7064
|
+
ref: chainListRef,
|
|
7065
|
+
role: "listbox",
|
|
7066
|
+
"aria-label": labels.networksLabel,
|
|
7067
|
+
"data-test-id": "network-list",
|
|
7068
|
+
className: "flex-1 overflow-y-auto px-[var(--deframe-widget-size-padding-x-sm)] pb-[var(--deframe-widget-size-padding-y-sm)] pt-[var(--deframe-widget-size-padding-y-xs)]",
|
|
7069
|
+
children: networks.map((network, i) => /* @__PURE__ */ jsx(
|
|
7070
|
+
NetworkRow,
|
|
7071
|
+
{
|
|
7072
|
+
network,
|
|
7073
|
+
selected: (activeNetwork == null ? void 0 : activeNetwork.chainId) === network.chainId,
|
|
7074
|
+
onClick: () => handleNetworkSelect(network),
|
|
7075
|
+
onKeyDown: (e) => handleChainKeyDown(e, network, i),
|
|
7076
|
+
index: i
|
|
7077
|
+
},
|
|
7078
|
+
network.chainId
|
|
7079
|
+
))
|
|
7080
|
+
}
|
|
7081
|
+
)
|
|
7082
|
+
]
|
|
7083
|
+
}
|
|
7084
|
+
),
|
|
7085
|
+
/* @__PURE__ */ jsx(
|
|
7086
|
+
"div",
|
|
7087
|
+
{
|
|
7088
|
+
"data-test-id": "asset-panel",
|
|
7089
|
+
className: "flex-1 flex flex-col overflow-hidden",
|
|
7090
|
+
children: sharedSearchAssets
|
|
7091
|
+
}
|
|
7092
|
+
)
|
|
7093
|
+
]
|
|
7094
|
+
}
|
|
7095
|
+
)
|
|
7096
|
+
]
|
|
7097
|
+
}
|
|
7098
|
+
)
|
|
7099
|
+
},
|
|
7100
|
+
"desktop"
|
|
7101
|
+
);
|
|
7102
|
+
}
|
|
7103
|
+
}
|
|
4581
7104
|
var SkeletonItem = () => /* @__PURE__ */ jsxs("div", { className: "w-full bg-[var(--deframe-widget-color-bg-secondary)] rounded-[var(--deframe-widget-size-radius-xs)] min-h-[72px] flex items-center justify-between px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]", children: [
|
|
4582
7105
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1 min-w-0", children: [
|
|
4583
7106
|
/* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] animate-pulse flex-shrink-0" }),
|
|
@@ -5351,7 +7874,7 @@ var DateLabel = ({ children }) => {
|
|
|
5351
7874
|
var ArrowBadge = ({ isDeposit }) => {
|
|
5352
7875
|
return /* @__PURE__ */ jsx("div", { className: "absolute bottom-[-2px] right-[-2px] w-[15px] h-[15px] rounded-full bg-bg-subtle dark:bg-bg-subtle-dark flex items-center justify-center border border-bg-subtle dark:border-bg-subtle-dark", children: isDeposit ? /* @__PURE__ */ jsx(MdArrowDownward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) : /* @__PURE__ */ jsx(MdArrowUpward, { className: "w-3 h-3 text-text-primary dark:text-text-primary-dark" }) });
|
|
5353
7876
|
};
|
|
5354
|
-
var
|
|
7877
|
+
var TokenIconWithBadge2 = ({ src, alt, isDeposit }) => {
|
|
5355
7878
|
const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
|
|
5356
7879
|
const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
|
|
5357
7880
|
const resolvedSrc = src || fallbackSrc;
|
|
@@ -5415,7 +7938,7 @@ var HistoryListView = ({
|
|
|
5415
7938
|
containerClassName: twMerge("!rounded-xs !border-0 !min-h-[72px]", itemClassName),
|
|
5416
7939
|
children: [
|
|
5417
7940
|
/* @__PURE__ */ jsx(ListItemLeftSide, { children: item.isSwap ? /* @__PURE__ */ jsx(SwapIconWithBadge, { src: item.iconUrl, alt: item.iconAlt }) : /* @__PURE__ */ jsx(
|
|
5418
|
-
|
|
7941
|
+
TokenIconWithBadge2,
|
|
5419
7942
|
{
|
|
5420
7943
|
src: item.iconUrl,
|
|
5421
7944
|
alt: item.iconAlt,
|
|
@@ -6419,6 +8942,6 @@ var EarnWithdrawFailedView = ({
|
|
|
6419
8942
|
);
|
|
6420
8943
|
};
|
|
6421
8944
|
|
|
6422
|
-
export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConnectWalletList, Currency, DeframeComponentsProvider, DetailsHeader, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedView, EarnDepositFormView, EarnDepositProcessingView, EarnDepositSuccessView, EarnDepositWarningView, EarnDesktopView, EarnExploreGridView, EarnInvestedSectionView, EarnInvestmentDetailsView, EarnInvestmentSummaryView, EarnNoBalanceNotificationView, EarnPercentageButtonsView, EarnPositionCardView, EarnRecentTransactionsView, EarnTokenSelectorView, EarnTxStatusCardView, EarnWithdrawFailedView, EarnWithdrawFormView, EarnWithdrawProcessingView, EarnWithdrawSuccessView, EarnWithdrawTokenSelectorView, EarnWithdrawWarningView, Currency as Fiat, FlexCol, FlexRow, GroupedStrategyListView, HighRiskBadge, HistoryDepositDetailsView, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PrimaryButton, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFromCardView, SwapHistoryView, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteDetailsView, SwapSignatureWarningView, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapTransactionFailedView, SwapTransactionFailedViewSimple, SwapWidgetFallbackView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletBalances, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer };
|
|
8945
|
+
export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, ChooseNetworkAndAssetViewSimple, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConfirmSwapButtonViewSimple, ConnectWalletList, Currency, DeframeComponentsProvider, DetailsHeader, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedView, EarnDepositFormView, EarnDepositProcessingView, EarnDepositSuccessView, EarnDepositWarningView, EarnDesktopView, EarnExploreGridView, EarnInvestedSectionView, EarnInvestmentDetailsView, EarnInvestmentSummaryView, EarnNoBalanceNotificationView, EarnPercentageButtonsView, EarnPositionCardView, EarnRecentTransactionsView, EarnTokenSelectorView, EarnTxStatusCardView, EarnWithdrawFailedView, EarnWithdrawFormView, EarnWithdrawProcessingView, EarnWithdrawSuccessView, EarnWithdrawTokenSelectorView, EarnWithdrawWarningView, Currency as Fiat, FlexCol, FlexRow, GroupedStrategyListView, HighRiskBadge, HistoryDepositDetailsView, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PrimaryButton, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFormViewSimple, SwapFromCardView, SwapFromCardViewSimple, SwapHistoryView, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteDetailsView, SwapSignatureWarningView, SwapSignatureWarningViewSimple, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapToCardViewSimple, SwapTransactionFailedView, SwapTransactionFailedViewSimple, SwapWidgetFallbackView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletBalances, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer };
|
|
6423
8946
|
//# sourceMappingURL=index.mjs.map
|
|
6424
8947
|
//# sourceMappingURL=index.mjs.map
|