@deframe-sdk/components 0.1.17 → 0.1.19

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.
Files changed (8) hide show
  1. package/dist/index.d.mts +151 -37
  2. package/dist/index.d.ts +151 -37
  3. package/dist/index.js +3080 -354
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +3075 -357
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +477 -10
  8. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  import { twMerge } from 'tailwind-merge';
2
2
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
- import { HiXMark, HiChevronUp, HiChevronDown, HiChevronLeft, HiArrowRight, HiArrowLeft } from 'react-icons/hi2';
3
+ import { HiXMark, HiChevronUp, HiChevronDown, HiChevronLeft, HiOutlineClock, 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';
@@ -2372,6 +2372,69 @@ var LowRiskBadge = ({ className, label }) => {
2372
2372
  }
2373
2373
  ) });
2374
2374
  };
2375
+ var LoadingDots = ({ className = "" }) => {
2376
+ return /* @__PURE__ */ jsxs("span", { className: `flex gap-[var(--deframe-widget-size-gap-none)].5 ${className}`, children: [
2377
+ /* @__PURE__ */ jsx("span", { className: "animate-bounce", style: { animationDelay: "0ms", animationDuration: "1.4s" }, children: "." }),
2378
+ /* @__PURE__ */ jsx("span", { className: "animate-bounce", style: { animationDelay: "200ms", animationDuration: "1.4s" }, children: "." }),
2379
+ /* @__PURE__ */ jsx("span", { className: "animate-bounce", style: { animationDelay: "400ms", animationDuration: "1.4s" }, children: "." })
2380
+ ] });
2381
+ };
2382
+ var ProcessingBadge = ({
2383
+ label = "Processing",
2384
+ className = "",
2385
+ title,
2386
+ size = "default"
2387
+ }) => {
2388
+ const isCompact = size === "compact";
2389
+ const baseClasses = [
2390
+ "inline-flex max-w-fit items-center gap-[var(--deframe-widget-size-gap-xs)] rounded-[var(--deframe-widget-size-radius-full)] border",
2391
+ "text-[color:var(--deframe-widget-color-state-info)]",
2392
+ "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-info)_18%,transparent)]",
2393
+ "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-info)_28%,transparent)]"
2394
+ ].join(" ");
2395
+ const sizeClasses = {
2396
+ default: "px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)]",
2397
+ compact: "px-[calc(var(--deframe-widget-size-padding-x-xs)+2px)] py-[2px]"
2398
+ };
2399
+ const processingBadgeClasses = twMerge(
2400
+ baseClasses,
2401
+ sizeClasses[isCompact ? "compact" : "default"],
2402
+ className
2403
+ );
2404
+ return /* @__PURE__ */ jsxs(
2405
+ "div",
2406
+ {
2407
+ "data-test-id": "processing-badge",
2408
+ title,
2409
+ className: processingBadgeClasses,
2410
+ children: [
2411
+ /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-[6px]", children: [
2412
+ /* @__PURE__ */ jsx(HiOutlineClock, { className: isCompact ? "h-[12px] w-[12px] shrink-0" : "h-[14px] w-[14px] shrink-0" }),
2413
+ /* @__PURE__ */ jsx(
2414
+ TextBody,
2415
+ {
2416
+ as: "span",
2417
+ variant: "text-small",
2418
+ className: twMerge(
2419
+ "truncate text-[color:var(--deframe-widget-color-state-info)]",
2420
+ isCompact ? "text-[11px] leading-[14px]" : ""
2421
+ ),
2422
+ children: label
2423
+ }
2424
+ )
2425
+ ] }),
2426
+ /* @__PURE__ */ jsx(
2427
+ "span",
2428
+ {
2429
+ "aria-hidden": "true",
2430
+ className: "flex shrink-0 items-center text-[color:var(--deframe-widget-color-state-info)] opacity-80",
2431
+ children: /* @__PURE__ */ jsx(LoadingDots, { className: twMerge(isCompact ? "text-[11px] leading-[14px]" : "text-[12px] leading-[16px]") })
2432
+ }
2433
+ )
2434
+ ]
2435
+ }
2436
+ );
2437
+ };
2375
2438
  var gapClasses3 = {
2376
2439
  xs: "gap-[var(--deframe-widget-size-gap-xs)]",
2377
2440
  sm: "gap-[var(--deframe-widget-size-gap-sm)]",
@@ -2398,10 +2461,35 @@ var TokenIcon = ({ src, alt }) => /* @__PURE__ */ jsx(
2398
2461
  }
2399
2462
  }
2400
2463
  );
2401
- var SuccessBadge = ({ children }) => /* @__PURE__ */ jsxs("div", { "data-test-id": "success-badge", className: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_12%,transparent)] flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] rounded-[var(--deframe-widget-size-radius-lg)]", children: [
2402
- /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-state-success)]" }),
2464
+ var STATUS_STYLES = {
2465
+ success: {
2466
+ bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_12%,transparent)]",
2467
+ dot: "bg-[var(--deframe-widget-color-state-success)]"
2468
+ },
2469
+ pending: {
2470
+ bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_12%,transparent)]",
2471
+ dot: "bg-[var(--deframe-widget-color-state-warning)]"
2472
+ },
2473
+ failed: {
2474
+ bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_12%,transparent)]",
2475
+ dot: "bg-[var(--deframe-widget-color-state-error)]"
2476
+ },
2477
+ refunded: {
2478
+ bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-text-secondary)_12%,transparent)]",
2479
+ dot: "bg-[var(--deframe-widget-color-text-secondary)]"
2480
+ }
2481
+ };
2482
+ function resolveStatusBadgeTone(status = "SUCCESS") {
2483
+ if (status === "PENDING") return "pending";
2484
+ if (status === "FAILED") return "failed";
2485
+ if (status === "REFUNDED") return "refunded";
2486
+ return "success";
2487
+ }
2488
+ var StatusBadge = ({ children, tone = "success" }) => /* @__PURE__ */ jsxs("div", { "data-test-id": "status-badge", className: `${STATUS_STYLES[tone].bg} flex items-center gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] rounded-[var(--deframe-widget-size-radius-lg)]`, children: [
2489
+ /* @__PURE__ */ jsx("span", { className: `w-2 h-2 rounded-[var(--deframe-widget-size-radius-full)] ${STATUS_STYLES[tone].dot}` }),
2403
2490
  /* @__PURE__ */ jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-primary)]", children })
2404
2491
  ] });
2492
+ var SuccessBadge = ({ children }) => /* @__PURE__ */ jsx(StatusBadge, { tone: "success", children });
2405
2493
  var truncateHash = (hash, chars = 6) => {
2406
2494
  if (hash.length <= chars * 2 + 3) return hash;
2407
2495
  return `${hash.slice(0, chars + 2)}...${hash.slice(-chars)}`;
@@ -2438,6 +2526,84 @@ var TwoLineValue = ({ primary, secondary }) => /* @__PURE__ */ jsxs(HistoryFlexC
2438
2526
  /* @__PURE__ */ jsx("p", { "data-test-id": "two-line-value-secondary", className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: secondary })
2439
2527
  ] });
2440
2528
  var NotFoundMessage = ({ children }) => /* @__PURE__ */ jsx("div", { "data-test-id": "not-found-message", className: "flex flex-col items-center justify-center h-full", children: /* @__PURE__ */ jsx("p", { className: "text-[color:var(--deframe-widget-color-text-primary)]", children }) });
2529
+ function StepStatusIcon({ status }) {
2530
+ switch (status) {
2531
+ case "completed":
2532
+ return /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(IoCheckmarkOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-success)]" }) });
2533
+ case "processing":
2534
+ return /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(IoTimeOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-warning)]" }) });
2535
+ case "failed":
2536
+ return /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(IoAlertCircleOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-error)]" }) });
2537
+ }
2538
+ }
2539
+ function StepStatusText({
2540
+ step,
2541
+ completedText,
2542
+ processingText,
2543
+ failedText,
2544
+ viewOnExplorerText
2545
+ }) {
2546
+ if (step.statusText) {
2547
+ const textColorClass2 = step.status === "completed" ? "text-[color:var(--deframe-widget-color-text-primary)]" : step.status === "processing" ? "text-[color:var(--deframe-widget-color-text-secondary)]" : step.status === "failed" ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-primary-disabled)]";
2548
+ return /* @__PURE__ */ jsx("span", { className: `[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] ${textColorClass2}`, children: step.statusText });
2549
+ }
2550
+ if (step.status === "completed" && step.explorerUrl) {
2551
+ return /* @__PURE__ */ jsx(
2552
+ "a",
2553
+ {
2554
+ href: step.explorerUrl,
2555
+ target: "_blank",
2556
+ rel: "noopener noreferrer",
2557
+ className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-brand-primary)] underline hover:no-underline",
2558
+ children: viewOnExplorerText
2559
+ }
2560
+ );
2561
+ }
2562
+ const defaultText = step.status === "completed" ? completedText : step.status === "processing" ? processingText : failedText;
2563
+ const textColorClass = step.status === "completed" ? "text-[color:var(--deframe-widget-color-text-primary)]" : step.status === "processing" ? "text-[color:var(--deframe-widget-color-text-secondary)]" : "text-[color:var(--deframe-widget-color-state-error)]";
2564
+ return /* @__PURE__ */ jsx("span", { className: `[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] ${textColorClass}`, children: defaultText });
2565
+ }
2566
+ function StepDisplay({ step, completedText, processingText, failedText, viewOnExplorerText }) {
2567
+ return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-[var(--deframe-widget-size-gap-md)] w-full", children: [
2568
+ /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("p", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-primary)] [font-weight:var(--deframe-widget-font-weight-medium)]", children: step.label }) }),
2569
+ /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: step.value ? /* @__PURE__ */ jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: step.value }) : /* @__PURE__ */ jsx(StepStatusText, { step, completedText, processingText, failedText, viewOnExplorerText }) })
2570
+ ] });
2571
+ }
2572
+ function TransactionProcessingDetails({
2573
+ steps,
2574
+ className = "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)]",
2575
+ defaultOpen = true,
2576
+ labels
2577
+ }) {
2578
+ if (!steps || steps.length === 0) {
2579
+ return null;
2580
+ }
2581
+ const getProcessingSteps = () => {
2582
+ return /* @__PURE__ */ jsx("div", { className: "flex flex-col w-full", children: steps.map((step, index) => /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)]", children: [
2583
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
2584
+ step.status && /* @__PURE__ */ jsx(StepStatusIcon, { status: step.status }),
2585
+ index < steps.length - 1 && step.status && /* @__PURE__ */ jsx("div", { className: "w-px flex-1 min-h-[16px] bg-[var(--deframe-widget-color-bg-primary-dark)] my-[var(--deframe-widget-size-gap-xs)]" })
2586
+ ] }),
2587
+ /* @__PURE__ */ jsx("div", { className: "flex-1 pb-[var(--deframe-widget-size-padding-y-sm)] min-w-0", children: /* @__PURE__ */ jsx(StepDisplay, { step, completedText: labels.completedText, processingText: labels.processingText, failedText: labels.failedText, viewOnExplorerText: labels.viewOnExplorerText }) })
2588
+ ] }, `step-${index}`)) });
2589
+ };
2590
+ const items = [
2591
+ {
2592
+ label: "",
2593
+ value: getProcessingSteps(),
2594
+ valueClassName: "flex flex-col gap-[var(--deframe-widget-size-gap-none)] w-full"
2595
+ }
2596
+ ];
2597
+ return /* @__PURE__ */ jsx(
2598
+ SummaryDetails,
2599
+ {
2600
+ title: labels.title,
2601
+ items,
2602
+ defaultOpen,
2603
+ className
2604
+ }
2605
+ );
2606
+ }
2441
2607
  var HistoryDepositDetailsView = ({
2442
2608
  transactionTypeLabel,
2443
2609
  symbol,
@@ -2452,6 +2618,9 @@ var HistoryDepositDetailsView = ({
2452
2618
  txHash,
2453
2619
  date,
2454
2620
  explorerUrl,
2621
+ status = "SUCCESS",
2622
+ processingSteps,
2623
+ processingDetailsLabels,
2455
2624
  onClose,
2456
2625
  labels
2457
2626
  }) => {
@@ -2510,7 +2679,7 @@ var HistoryDepositDetailsView = ({
2510
2679
  ] }),
2511
2680
  /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
2512
2681
  /* @__PURE__ */ jsx(InfoLabel, { children: labels.statusLabel }),
2513
- /* @__PURE__ */ jsx(SuccessBadge, { children: statusLabel })
2682
+ /* @__PURE__ */ jsx(StatusBadge, { tone: resolveStatusBadgeTone(status), children: statusLabel })
2514
2683
  ] }),
2515
2684
  /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
2516
2685
  /* @__PURE__ */ jsx(InfoLabel, { children: labels.transactionIdLabel }),
@@ -2524,7 +2693,15 @@ var HistoryDepositDetailsView = ({
2524
2693
  /* @__PURE__ */ jsx(InfoLabel, { children: labels.transactionLabel }),
2525
2694
  /* @__PURE__ */ jsx(ExplorerLink, { href: explorerUrl, children: labels.viewOnExplorerLabel })
2526
2695
  ] })
2527
- ] }) })
2696
+ ] }) }),
2697
+ (processingSteps == null ? void 0 : processingSteps.length) && processingDetailsLabels ? /* @__PURE__ */ jsx(
2698
+ TransactionProcessingDetails,
2699
+ {
2700
+ steps: processingSteps,
2701
+ labels: processingDetailsLabels,
2702
+ defaultOpen: true
2703
+ }
2704
+ ) : null
2528
2705
  ] }) })
2529
2706
  ] });
2530
2707
  };
@@ -2542,6 +2719,9 @@ var HistoryWithdrawDetailsView = ({
2542
2719
  txHash,
2543
2720
  date,
2544
2721
  explorerUrl,
2722
+ status = "SUCCESS",
2723
+ processingSteps,
2724
+ processingDetailsLabels,
2545
2725
  onClose,
2546
2726
  labels
2547
2727
  }) => {
@@ -2600,7 +2780,7 @@ var HistoryWithdrawDetailsView = ({
2600
2780
  ] }),
2601
2781
  /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
2602
2782
  /* @__PURE__ */ jsx(InfoLabel, { children: labels.statusLabel }),
2603
- /* @__PURE__ */ jsx(SuccessBadge, { children: statusLabel })
2783
+ /* @__PURE__ */ jsx(StatusBadge, { tone: resolveStatusBadgeTone(status), children: statusLabel })
2604
2784
  ] }),
2605
2785
  /* @__PURE__ */ jsxs(InfoRow, { borderBottom: true, children: [
2606
2786
  /* @__PURE__ */ jsx(InfoLabel, { children: labels.transactionIdLabel }),
@@ -2614,7 +2794,15 @@ var HistoryWithdrawDetailsView = ({
2614
2794
  /* @__PURE__ */ jsx(InfoLabel, { children: labels.transactionLabel }),
2615
2795
  /* @__PURE__ */ jsx(ExplorerLink, { href: explorerUrl, children: labels.viewOnExplorerLabel })
2616
2796
  ] })
2617
- ] }) })
2797
+ ] }) }),
2798
+ (processingSteps == null ? void 0 : processingSteps.length) && processingDetailsLabels ? /* @__PURE__ */ jsx(
2799
+ TransactionProcessingDetails,
2800
+ {
2801
+ steps: processingSteps,
2802
+ labels: processingDetailsLabels,
2803
+ defaultOpen: true
2804
+ }
2805
+ ) : null
2618
2806
  ] }) })
2619
2807
  ] });
2620
2808
  };
@@ -2790,13 +2978,6 @@ var ProgressIndicator = ({
2790
2978
  /* @__PURE__ */ jsx("div", { className: "flex-1 h-[4px] bg-[var(--deframe-widget-color-bg-tertiary)] rounded-[var(--deframe-widget-size-radius-md)] ml-[var(--deframe-widget-size-gap-xs)]" })
2791
2979
  ] }) });
2792
2980
  };
2793
- var LoadingDots = ({ className = "" }) => {
2794
- return /* @__PURE__ */ jsxs("span", { className: `flex gap-[var(--deframe-widget-size-gap-none)].5 ${className}`, children: [
2795
- /* @__PURE__ */ jsx("span", { className: "animate-bounce", style: { animationDelay: "0ms", animationDuration: "1.4s" }, children: "." }),
2796
- /* @__PURE__ */ jsx("span", { className: "animate-bounce", style: { animationDelay: "200ms", animationDuration: "1.4s" }, children: "." }),
2797
- /* @__PURE__ */ jsx("span", { className: "animate-bounce", style: { animationDelay: "400ms", animationDuration: "1.4s" }, children: "." })
2798
- ] });
2799
- };
2800
2981
  var SearchInput = ({
2801
2982
  placeholder = "Search",
2802
2983
  value: controlledValue,
@@ -2992,84 +3173,6 @@ var TransactionScreenInvestmentCard = ({
2992
3173
  ] })
2993
3174
  ] }) });
2994
3175
  };
2995
- function StepStatusIcon({ status }) {
2996
- switch (status) {
2997
- case "completed":
2998
- return /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(IoCheckmarkOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-success)]" }) });
2999
- case "processing":
3000
- return /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(IoTimeOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-warning)]" }) });
3001
- case "failed":
3002
- return /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(IoAlertCircleOutline, { className: "w-4 h-4 text-[color:var(--deframe-widget-color-state-error)]" }) });
3003
- }
3004
- }
3005
- function StepStatusText({
3006
- step,
3007
- completedText,
3008
- processingText,
3009
- failedText,
3010
- viewOnExplorerText
3011
- }) {
3012
- if (step.statusText) {
3013
- const textColorClass2 = step.status === "completed" ? "text-[color:var(--deframe-widget-color-text-primary)]" : step.status === "processing" ? "text-[color:var(--deframe-widget-color-text-secondary)]" : step.status === "failed" ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-primary-disabled)]";
3014
- return /* @__PURE__ */ jsx("span", { className: `[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] ${textColorClass2}`, children: step.statusText });
3015
- }
3016
- if (step.status === "completed" && step.explorerUrl) {
3017
- return /* @__PURE__ */ jsx(
3018
- "a",
3019
- {
3020
- href: step.explorerUrl,
3021
- target: "_blank",
3022
- rel: "noopener noreferrer",
3023
- className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-brand-primary)] underline hover:no-underline",
3024
- children: viewOnExplorerText
3025
- }
3026
- );
3027
- }
3028
- const defaultText = step.status === "completed" ? completedText : step.status === "processing" ? processingText : failedText;
3029
- const textColorClass = step.status === "completed" ? "text-[color:var(--deframe-widget-color-text-primary)]" : step.status === "processing" ? "text-[color:var(--deframe-widget-color-text-secondary)]" : "text-[color:var(--deframe-widget-color-state-error)]";
3030
- return /* @__PURE__ */ jsx("span", { className: `[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] ${textColorClass}`, children: defaultText });
3031
- }
3032
- function StepDisplay({ step, completedText, processingText, failedText, viewOnExplorerText }) {
3033
- return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-[var(--deframe-widget-size-gap-md)] w-full", children: [
3034
- /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("p", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-primary)] [font-weight:var(--deframe-widget-font-weight-medium)]", children: step.label }) }),
3035
- /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: step.value ? /* @__PURE__ */ jsx("span", { className: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-secondary)]", children: step.value }) : /* @__PURE__ */ jsx(StepStatusText, { step, completedText, processingText, failedText, viewOnExplorerText }) })
3036
- ] });
3037
- }
3038
- function TransactionProcessingDetails({
3039
- steps,
3040
- className = "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)]",
3041
- defaultOpen = true,
3042
- labels
3043
- }) {
3044
- if (!steps || steps.length === 0) {
3045
- return null;
3046
- }
3047
- const getProcessingSteps = () => {
3048
- return /* @__PURE__ */ jsx("div", { className: "flex flex-col w-full", children: steps.map((step, index) => /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)]", children: [
3049
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
3050
- step.status && /* @__PURE__ */ jsx(StepStatusIcon, { status: step.status }),
3051
- index < steps.length - 1 && step.status && /* @__PURE__ */ jsx("div", { className: "w-px flex-1 min-h-[16px] bg-[var(--deframe-widget-color-bg-primary-dark)] my-[var(--deframe-widget-size-gap-xs)]" })
3052
- ] }),
3053
- /* @__PURE__ */ jsx("div", { className: "flex-1 pb-[var(--deframe-widget-size-padding-y-sm)] min-w-0", children: /* @__PURE__ */ jsx(StepDisplay, { step, completedText: labels.completedText, processingText: labels.processingText, failedText: labels.failedText, viewOnExplorerText: labels.viewOnExplorerText }) })
3054
- ] }, `step-${index}`)) });
3055
- };
3056
- const items = [
3057
- {
3058
- label: "",
3059
- value: getProcessingSteps(),
3060
- valueClassName: "flex flex-col gap-[var(--deframe-widget-size-gap-none)] w-full"
3061
- }
3062
- ];
3063
- return /* @__PURE__ */ jsx(
3064
- SummaryDetails,
3065
- {
3066
- title: labels.title,
3067
- items,
3068
- defaultOpen,
3069
- className
3070
- }
3071
- );
3072
- }
3073
3176
  var TokenWithChainBadge = ({
3074
3177
  tokenLogoUrl,
3075
3178
  tokenAlt,
@@ -3183,41 +3286,159 @@ var SwapProcessingView = ({
3183
3286
  }
3184
3287
  );
3185
3288
  };
3186
- function LoadingIcon() {
3187
- const green = "var(--deframe-widget-color-brand-primary)";
3188
- const trackColor = "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)";
3189
- const sw = 2.8;
3190
- const aw = 2.4;
3289
+
3290
+ // src/stories/swap-form-view/constants.ts
3291
+ var SWAP_SIMPLE_MIN_HEIGHT = 520;
3292
+ var SWAP_SIMPLE_WIDTH = 480;
3293
+ function SwapFormSkeleton() {
3191
3294
  return /* @__PURE__ */ jsxs(
3192
- motion.svg,
3295
+ "div",
3193
3296
  {
3194
- "data-test-id": "swap-processing-simple-loading-icon",
3195
- width: "56",
3196
- height: "56",
3197
- viewBox: "0 0 56 56",
3198
- fill: "none",
3199
- "aria-hidden": "true",
3200
- animate: { rotate: 360 },
3201
- transition: { duration: 1.6, repeat: Infinity, ease: "linear" },
3297
+ "data-test-id": "swap-form-skeleton",
3298
+ className: twMerge(
3299
+ "relative",
3300
+ "rounded-[var(--deframe-widget-size-radius-md)]",
3301
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
3302
+ "flex flex-col items-stretch gap-[var(--deframe-widget-size-gap-sm)]",
3303
+ "font-[var(--deframe-widget-font-family)]"
3304
+ ),
3305
+ style: { minHeight: SWAP_SIMPLE_MIN_HEIGHT },
3202
3306
  children: [
3203
- /* @__PURE__ */ jsx("circle", { cx: "28", cy: "28", r: "22", stroke: trackColor, strokeWidth: sw }),
3307
+ /* @__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)]" }) }),
3204
3308
  /* @__PURE__ */ jsx(
3205
- "path",
3309
+ SkeletonCard,
3206
3310
  {
3207
- d: "M 6.75 22.31 A 22 22 0 0 1 49.25 22.31",
3208
- stroke: green,
3209
- strokeWidth: sw,
3210
- strokeLinecap: "round"
3311
+ testId: "swap-form-skeleton-from",
3312
+ symbol: "USDC",
3313
+ network: "ARBITRUM",
3314
+ amount: "500",
3315
+ usd: "\u2248 $499.87",
3316
+ balance: "Saldo: 1 250.00 USDC"
3211
3317
  }
3212
3318
  ),
3319
+ /* @__PURE__ */ jsx("div", { "data-test-id": "swap-form-skeleton-swap-btn-wrapper", className: "flex justify-center -my-[16px] relative z-[1]", children: /* @__PURE__ */ jsx(
3320
+ "div",
3321
+ {
3322
+ className: twMerge(
3323
+ "w-10 h-10",
3324
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
3325
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
3326
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
3327
+ "flex items-center justify-center",
3328
+ "text-[color:var(--deframe-widget-color-brand-primary)]"
3329
+ ),
3330
+ 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: [
3331
+ /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
3332
+ /* @__PURE__ */ jsx("polyline", { points: "19 12 12 19 5 12" })
3333
+ ] })
3334
+ }
3335
+ ) }),
3213
3336
  /* @__PURE__ */ jsx(
3214
- "path",
3337
+ SkeletonCard,
3215
3338
  {
3216
- d: "M 45.0 18.1 L 49.25 22.31 L 51.0 16.5",
3217
- stroke: green,
3218
- strokeWidth: aw,
3219
- strokeLinecap: "round",
3220
- strokeLinejoin: "round"
3339
+ testId: "swap-form-skeleton-to",
3340
+ symbol: "ETH",
3341
+ network: "ETHEREUM",
3342
+ amount: "0.2061",
3343
+ usd: "\u2248 $499.00",
3344
+ balance: "Saldo: 41 ETH"
3345
+ }
3346
+ ),
3347
+ /* @__PURE__ */ jsx("div", { className: "flex-1" }),
3348
+ /* @__PURE__ */ jsx(
3349
+ "div",
3350
+ {
3351
+ "data-test-id": "swap-form-skeleton-submit",
3352
+ className: twMerge(
3353
+ "h-12",
3354
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
3355
+ "bg-[var(--deframe-widget-color-brand-primary)]",
3356
+ "flex items-center justify-center",
3357
+ "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
3358
+ "text-[color:var(--deframe-widget-color-text-primary-dark)]"
3359
+ ),
3360
+ children: "Revisar Troca"
3361
+ }
3362
+ )
3363
+ ]
3364
+ }
3365
+ );
3366
+ }
3367
+ function SkeletonCard({ testId, symbol, network, amount, usd, balance }) {
3368
+ const initials = symbol.slice(0, 2).toUpperCase();
3369
+ return /* @__PURE__ */ jsxs(
3370
+ "div",
3371
+ {
3372
+ "data-test-id": testId,
3373
+ className: twMerge(
3374
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
3375
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
3376
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]"
3377
+ ),
3378
+ children: [
3379
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
3380
+ /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-[10px] flex-shrink-0", children: [
3381
+ /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", style: { width: 38, height: 38 }, children: [
3382
+ /* @__PURE__ */ jsx(
3383
+ "div",
3384
+ {
3385
+ 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)]",
3386
+ children: initials
3387
+ }
3388
+ ),
3389
+ /* @__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) })
3390
+ ] }),
3391
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start", children: [
3392
+ /* @__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 }),
3393
+ /* @__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 })
3394
+ ] })
3395
+ ] }),
3396
+ /* @__PURE__ */ jsx("div", { className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0" }),
3397
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end flex-1 min-w-0", children: [
3398
+ /* @__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 }),
3399
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)]", children: usd })
3400
+ ] })
3401
+ ] }),
3402
+ /* @__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 }) })
3403
+ ]
3404
+ }
3405
+ );
3406
+ }
3407
+ function LoadingIcon() {
3408
+ const green = "var(--deframe-widget-color-brand-primary)";
3409
+ const trackColor = "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)";
3410
+ const sw = 2.8;
3411
+ const aw = 2.4;
3412
+ return /* @__PURE__ */ jsxs(
3413
+ motion.svg,
3414
+ {
3415
+ "data-test-id": "swap-processing-simple-loading-icon",
3416
+ width: "56",
3417
+ height: "56",
3418
+ viewBox: "0 0 56 56",
3419
+ fill: "none",
3420
+ "aria-hidden": "true",
3421
+ animate: { rotate: 360 },
3422
+ transition: { duration: 1.6, repeat: Infinity, ease: "linear" },
3423
+ children: [
3424
+ /* @__PURE__ */ jsx("circle", { cx: "28", cy: "28", r: "22", stroke: trackColor, strokeWidth: sw }),
3425
+ /* @__PURE__ */ jsx(
3426
+ "path",
3427
+ {
3428
+ d: "M 6.75 22.31 A 22 22 0 0 1 49.25 22.31",
3429
+ stroke: green,
3430
+ strokeWidth: sw,
3431
+ strokeLinecap: "round"
3432
+ }
3433
+ ),
3434
+ /* @__PURE__ */ jsx(
3435
+ "path",
3436
+ {
3437
+ d: "M 45.0 18.1 L 49.25 22.31 L 51.0 16.5",
3438
+ stroke: green,
3439
+ strokeWidth: aw,
3440
+ strokeLinecap: "round",
3441
+ strokeLinejoin: "round"
3221
3442
  }
3222
3443
  ),
3223
3444
  /* @__PURE__ */ jsx(
@@ -3243,72 +3464,68 @@ function LoadingIcon() {
3243
3464
  }
3244
3465
  );
3245
3466
  }
3246
- var SwapProcessingViewSimple = ({
3247
- titleText,
3248
- descriptionPrefix,
3249
- activityHistoryText,
3250
- onGoToHistory
3251
- }) => {
3467
+ var SwapProcessingViewSimple = () => {
3252
3468
  return /* @__PURE__ */ jsxs(
3253
3469
  "div",
3254
3470
  {
3255
- "data-test-id": "swap-processing-simple-screen",
3471
+ "data-test-id": "swap-processing-simple-wrapper",
3256
3472
  className: twMerge(
3257
- "absolute inset-0 z-10",
3258
- "flex flex-col items-center justify-center",
3259
- "gap-[var(--deframe-widget-size-gap-lg)]",
3260
- "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
3261
- "rounded-[inherit]",
3262
- "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
3263
- "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
3473
+ "relative overflow-hidden",
3474
+ `w-[${SWAP_SIMPLE_WIDTH}px] max-w-[calc(100%-32px)] box-border`,
3475
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
3476
+ "rounded-[var(--deframe-widget-size-radius-md)]",
3477
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
3478
+ "font-[var(--deframe-widget-font-family)]"
3264
3479
  ),
3480
+ style: { minHeight: SWAP_SIMPLE_MIN_HEIGHT },
3265
3481
  children: [
3266
- /* @__PURE__ */ jsx(LoadingIcon, {}),
3482
+ /* @__PURE__ */ jsx("div", { "data-test-id": "swap-processing-simple-skeleton", children: /* @__PURE__ */ jsx(SwapFormSkeleton, {}) }),
3267
3483
  /* @__PURE__ */ jsxs(
3268
3484
  "div",
3269
3485
  {
3270
- "data-test-id": "swap-processing-simple-copy",
3271
- className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
3486
+ "data-test-id": "swap-processing-simple-screen",
3487
+ className: twMerge(
3488
+ "absolute inset-0 z-10",
3489
+ "flex flex-col items-center justify-center",
3490
+ "gap-[var(--deframe-widget-size-gap-lg)]",
3491
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
3492
+ "rounded-[inherit]",
3493
+ "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
3494
+ "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
3495
+ ),
3272
3496
  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
- ),
3497
+ /* @__PURE__ */ jsx(LoadingIcon, {}),
3286
3498
  /* @__PURE__ */ jsxs(
3287
- "span",
3499
+ "div",
3288
3500
  {
3289
- "data-test-id": "swap-processing-simple-subtitle",
3290
- className: twMerge(
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
- ),
3501
+ "data-test-id": "swap-processing-simple-copy",
3502
+ className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
3297
3503
  children: [
3298
- descriptionPrefix,
3299
- " ",
3300
3504
  /* @__PURE__ */ jsx(
3301
- "button",
3505
+ "span",
3302
3506
  {
3303
- "data-test-id": "swap-processing-simple-history-link",
3304
- onClick: onGoToHistory,
3305
- "aria-label": activityHistoryText,
3507
+ "data-test-id": "swap-processing-simple-title",
3306
3508
  className: twMerge(
3307
- "bg-transparent border-0 p-0 cursor-pointer",
3509
+ "[font-size:12px] [line-height:1.25] [letter-spacing:0.10em] uppercase",
3308
3510
  "[font-weight:var(--deframe-widget-font-weight-semibold)]",
3511
+ "font-[var(--deframe-widget-font-family)]",
3309
3512
  "text-[color:var(--deframe-widget-color-brand-primary)]"
3310
3513
  ),
3311
- children: activityHistoryText
3514
+ children: "PROCESSANDO TRANSA\xC7\xC3O..."
3515
+ }
3516
+ ),
3517
+ /* @__PURE__ */ jsx(
3518
+ "span",
3519
+ {
3520
+ "data-test-id": "swap-processing-simple-subtitle",
3521
+ className: twMerge(
3522
+ "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
3523
+ "[font-weight:var(--deframe-widget-font-weight-regular)]",
3524
+ "font-[var(--deframe-widget-font-family)]",
3525
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
3526
+ "max-w-[260px]"
3527
+ ),
3528
+ children: "Aguarde enquanto sua troca \xE9 confirmada."
3312
3529
  }
3313
3530
  )
3314
3531
  ]
@@ -3422,6 +3639,55 @@ var SwapCrossChainProcessingView = ({
3422
3639
  }
3423
3640
  );
3424
3641
  };
3642
+ var InvestmentCrossChainProcessingView = ({
3643
+ title,
3644
+ description,
3645
+ progress,
3646
+ strategyName,
3647
+ strategyIcon,
3648
+ strategySymbol,
3649
+ apyLabel,
3650
+ apyValue,
3651
+ amountUSD,
3652
+ amountToken,
3653
+ onClose,
3654
+ transactionSteps,
3655
+ processingDetailsLabels
3656
+ }) => {
3657
+ return /* @__PURE__ */ jsxs(
3658
+ TransactionScreen,
3659
+ {
3660
+ progress,
3661
+ iconType: "processing",
3662
+ title,
3663
+ description,
3664
+ onClose,
3665
+ children: [
3666
+ /* @__PURE__ */ jsx(
3667
+ TransactionScreenInvestmentCard,
3668
+ {
3669
+ strategyName,
3670
+ apyLabel,
3671
+ apyValue,
3672
+ iconSrc: strategyIcon,
3673
+ iconAlt: strategySymbol,
3674
+ amountUSD,
3675
+ amountToken
3676
+ }
3677
+ ),
3678
+ /* @__PURE__ */ jsx(
3679
+ TransactionProcessingDetails,
3680
+ {
3681
+ steps: transactionSteps,
3682
+ defaultOpen: true,
3683
+ className: "bg-[var(--deframe-widget-color-bg-secondary)] lg:!bg-[var(--deframe-widget-color-bg-secondary)]",
3684
+ labels: processingDetailsLabels
3685
+ }
3686
+ )
3687
+ ]
3688
+ }
3689
+ );
3690
+ };
3425
3691
  var SwapSignatureWarningView = ({
3426
3692
  fromTokenSymbol,
3427
3693
  fromTokenIcon,
@@ -3494,6 +3760,162 @@ var SwapSignatureWarningView = ({
3494
3760
  }
3495
3761
  );
3496
3762
  };
3763
+ function WarningIcon() {
3764
+ return /* @__PURE__ */ jsx(
3765
+ motion.div,
3766
+ {
3767
+ "data-test-id": "swap-signature-warning-simple-icon",
3768
+ initial: { scale: 0.55, opacity: 0 },
3769
+ animate: { scale: 1, opacity: 1 },
3770
+ transition: { type: "spring", stiffness: 300, damping: 20, delay: 0.05 },
3771
+ className: twMerge(
3772
+ "w-[84px] h-[84px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0",
3773
+ "flex items-center justify-center",
3774
+ "bg-[var(--deframe-widget-color-state-warning)]",
3775
+ "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)]"
3776
+ ),
3777
+ children: /* @__PURE__ */ jsxs("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: [
3778
+ /* @__PURE__ */ jsx(
3779
+ motion.line,
3780
+ {
3781
+ x1: "22",
3782
+ y1: "10",
3783
+ x2: "22",
3784
+ y2: "26",
3785
+ stroke: "white",
3786
+ strokeWidth: "3.5",
3787
+ strokeLinecap: "round",
3788
+ initial: { pathLength: 0 },
3789
+ animate: { pathLength: 1 },
3790
+ transition: { duration: 0.3, delay: 0.2, ease: "easeOut" }
3791
+ }
3792
+ ),
3793
+ /* @__PURE__ */ jsx(
3794
+ motion.circle,
3795
+ {
3796
+ cx: "22",
3797
+ cy: "33",
3798
+ r: "2",
3799
+ fill: "white",
3800
+ initial: { scale: 0, opacity: 0 },
3801
+ animate: { scale: 1, opacity: 1 },
3802
+ transition: { duration: 0.15, delay: 0.45, ease: "easeOut" }
3803
+ }
3804
+ )
3805
+ ] })
3806
+ }
3807
+ );
3808
+ }
3809
+ var SwapSignatureWarningViewSimple = ({
3810
+ errorTitle,
3811
+ errorDescription,
3812
+ onCancel,
3813
+ onTryAgain,
3814
+ cancelButtonText,
3815
+ retryButtonText
3816
+ }) => {
3817
+ return /* @__PURE__ */ jsxs(
3818
+ "div",
3819
+ {
3820
+ "data-test-id": "swap-signature-warning-simple-wrapper",
3821
+ className: twMerge(
3822
+ "relative overflow-hidden",
3823
+ `min-h-[${SWAP_SIMPLE_MIN_HEIGHT}px]`,
3824
+ `w-[${SWAP_SIMPLE_WIDTH}px] max-w-[calc(100%-32px)] box-border`,
3825
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
3826
+ "rounded-[var(--deframe-widget-size-radius-md)]",
3827
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
3828
+ "font-[var(--deframe-widget-font-family)]"
3829
+ ),
3830
+ children: [
3831
+ /* @__PURE__ */ jsx("div", { "data-test-id": "swap-signature-warning-simple-skeleton", children: /* @__PURE__ */ jsx(SwapFormSkeleton, {}) }),
3832
+ /* @__PURE__ */ jsxs(
3833
+ "div",
3834
+ {
3835
+ "data-test-id": "swap-signature-warning-simple-screen",
3836
+ className: twMerge(
3837
+ "absolute inset-0 z-10",
3838
+ "flex flex-col items-center justify-center",
3839
+ "gap-[var(--deframe-widget-size-gap-lg)]",
3840
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
3841
+ "rounded-[inherit]",
3842
+ "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
3843
+ "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
3844
+ ),
3845
+ children: [
3846
+ /* @__PURE__ */ jsx(WarningIcon, {}),
3847
+ /* @__PURE__ */ jsxs(
3848
+ "div",
3849
+ {
3850
+ "data-test-id": "swap-signature-warning-simple-copy",
3851
+ className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
3852
+ children: [
3853
+ /* @__PURE__ */ jsx(
3854
+ "span",
3855
+ {
3856
+ "data-test-id": "swap-signature-warning-simple-title",
3857
+ className: twMerge(
3858
+ "[font-size:22px] [line-height:1.25]",
3859
+ "[font-weight:var(--deframe-widget-font-weight-bold)]",
3860
+ "font-[var(--deframe-widget-font-family)]",
3861
+ "text-[color:var(--deframe-widget-color-text-primary)]"
3862
+ ),
3863
+ children: errorTitle
3864
+ }
3865
+ ),
3866
+ /* @__PURE__ */ jsx(
3867
+ "span",
3868
+ {
3869
+ "data-test-id": "swap-signature-warning-simple-subtitle",
3870
+ className: twMerge(
3871
+ "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
3872
+ "[font-weight:var(--deframe-widget-font-weight-regular)]",
3873
+ "font-[var(--deframe-widget-font-family)]",
3874
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
3875
+ "max-w-[260px]"
3876
+ ),
3877
+ children: errorDescription
3878
+ }
3879
+ )
3880
+ ]
3881
+ }
3882
+ ),
3883
+ /* @__PURE__ */ jsxs(
3884
+ "div",
3885
+ {
3886
+ "data-test-id": "swap-signature-warning-simple-actions",
3887
+ className: "flex gap-[var(--deframe-widget-size-gap-sm)] w-full max-w-[320px]",
3888
+ children: [
3889
+ /* @__PURE__ */ jsx(
3890
+ SecondaryButton,
3891
+ {
3892
+ "data-test-id": "swap-signature-warning-simple-cancel",
3893
+ "aria-label": cancelButtonText != null ? cancelButtonText : "Cancel",
3894
+ className: "flex-1",
3895
+ onClick: onCancel,
3896
+ children: cancelButtonText
3897
+ }
3898
+ ),
3899
+ /* @__PURE__ */ jsx(
3900
+ PrimaryButton,
3901
+ {
3902
+ "data-test-id": "swap-signature-warning-simple-retry",
3903
+ "aria-label": retryButtonText != null ? retryButtonText : "Retry",
3904
+ className: "flex-1",
3905
+ onClick: onTryAgain,
3906
+ children: retryButtonText
3907
+ }
3908
+ )
3909
+ ]
3910
+ }
3911
+ )
3912
+ ]
3913
+ }
3914
+ )
3915
+ ]
3916
+ }
3917
+ );
3918
+ };
3497
3919
  var SwapSuccessView = ({
3498
3920
  fromTokenSymbol,
3499
3921
  fromTokenIcon,
@@ -3610,71 +4032,69 @@ function SuccessIcon() {
3610
4032
  }
3611
4033
  );
3612
4034
  }
3613
- var SwapSuccessViewSimple = ({
3614
- onGoToWallet,
3615
- labels
3616
- }) => {
4035
+ var SwapSuccessViewSimple = () => {
3617
4036
  return /* @__PURE__ */ jsxs(
3618
4037
  "div",
3619
4038
  {
3620
- "data-test-id": "swap-success-simple-screen",
4039
+ "data-test-id": "swap-success-simple-wrapper",
3621
4040
  className: twMerge(
3622
- "absolute inset-0 z-10",
3623
- "flex flex-col items-center justify-center",
3624
- "gap-[var(--deframe-widget-size-gap-lg)]",
3625
- "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
3626
- "rounded-[inherit]",
3627
- "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
3628
- "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
4041
+ "relative overflow-hidden",
4042
+ `min-h-[${SWAP_SIMPLE_MIN_HEIGHT}px]`,
4043
+ `w-[${SWAP_SIMPLE_WIDTH}px] max-w-[calc(100%-32px)] box-border`,
4044
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
4045
+ "rounded-[var(--deframe-widget-size-radius-md)]",
4046
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
4047
+ "font-[var(--deframe-widget-font-family)]"
3629
4048
  ),
3630
4049
  children: [
3631
- /* @__PURE__ */ jsx(SuccessIcon, {}),
4050
+ /* @__PURE__ */ jsx("div", { "data-test-id": "swap-success-simple-skeleton", children: /* @__PURE__ */ jsx(SwapFormSkeleton, {}) }),
3632
4051
  /* @__PURE__ */ jsxs(
3633
4052
  "div",
3634
4053
  {
3635
- "data-test-id": "swap-success-simple-copy",
3636
- className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
4054
+ "data-test-id": "swap-success-simple-screen",
4055
+ className: twMerge(
4056
+ "absolute inset-0 z-10",
4057
+ "flex flex-col items-center justify-center",
4058
+ "gap-[var(--deframe-widget-size-gap-lg)]",
4059
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
4060
+ "rounded-[inherit]",
4061
+ "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
4062
+ "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
4063
+ ),
3637
4064
  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
- ),
4065
+ /* @__PURE__ */ jsx(SuccessIcon, {}),
3652
4066
  /* @__PURE__ */ jsxs(
3653
- "span",
4067
+ "div",
3654
4068
  {
3655
- "data-test-id": "swap-success-simple-subtitle",
3656
- className: twMerge(
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
- ),
4069
+ "data-test-id": "swap-success-simple-copy",
4070
+ className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
3663
4071
  children: [
3664
- labels == null ? void 0 : labels.descriptionSuffix,
3665
- " ",
3666
4072
  /* @__PURE__ */ jsx(
3667
- "button",
4073
+ "span",
3668
4074
  {
3669
- "data-test-id": "swap-success-simple-wallet-link",
3670
- onClick: onGoToWallet,
3671
- "aria-label": labels == null ? void 0 : labels.walletLinkText,
4075
+ "data-test-id": "swap-success-simple-title",
3672
4076
  className: twMerge(
3673
- "bg-transparent border-0 p-0 cursor-pointer",
3674
- "[font-weight:var(--deframe-widget-font-weight-semibold)]",
3675
- "text-[color:var(--deframe-widget-color-brand-primary)]"
4077
+ "[font-size:var(--deframe-widget-font-size-xl)]",
4078
+ "[line-height:var(--deframe-widget-font-leading-xl)]",
4079
+ "[font-weight:var(--deframe-widget-font-weight-bold)]",
4080
+ "font-[var(--deframe-widget-font-family)]",
4081
+ "text-[color:var(--deframe-widget-color-text-primary)]"
4082
+ ),
4083
+ children: "Troca Aprovada!"
4084
+ }
4085
+ ),
4086
+ /* @__PURE__ */ jsx(
4087
+ "span",
4088
+ {
4089
+ "data-test-id": "swap-success-simple-subtitle",
4090
+ className: twMerge(
4091
+ "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
4092
+ "[font-weight:var(--deframe-widget-font-weight-regular)]",
4093
+ "font-[var(--deframe-widget-font-family)]",
4094
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
4095
+ "max-w-[260px]"
3676
4096
  ),
3677
- children: labels == null ? void 0 : labels.walletLinkText
4097
+ children: "Seu saldo foi atualizado."
3678
4098
  }
3679
4099
  )
3680
4100
  ]
@@ -3819,49 +4239,67 @@ var SwapTransactionFailedViewSimple = ({
3819
4239
  return /* @__PURE__ */ jsxs(
3820
4240
  "div",
3821
4241
  {
3822
- "data-test-id": "swap-failed-simple-screen",
4242
+ "data-test-id": "swap-failed-simple-wrapper",
3823
4243
  className: twMerge(
3824
- "absolute inset-0 z-10",
3825
- "flex flex-col items-center justify-center",
3826
- "gap-[var(--deframe-widget-size-gap-lg)]",
3827
- "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
3828
- "rounded-[inherit]",
3829
- "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
3830
- "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
4244
+ "relative overflow-hidden",
4245
+ `min-h-[${SWAP_SIMPLE_MIN_HEIGHT}px]`,
4246
+ `w-[${SWAP_SIMPLE_WIDTH}px] max-w-[calc(100%-32px)] box-border`,
4247
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
4248
+ "rounded-[var(--deframe-widget-size-radius-md)]",
4249
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
4250
+ "font-[var(--deframe-widget-font-family)]"
3831
4251
  ),
3832
4252
  children: [
3833
- /* @__PURE__ */ jsx(ErrorIcon, {}),
4253
+ /* @__PURE__ */ jsx("div", { "data-test-id": "swap-failed-simple-skeleton", children: /* @__PURE__ */ jsx(SwapFormSkeleton, {}) }),
3834
4254
  /* @__PURE__ */ jsxs(
3835
4255
  "div",
3836
4256
  {
3837
- "data-test-id": "swap-failed-simple-copy",
3838
- className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
4257
+ "data-test-id": "swap-failed-simple-screen",
4258
+ className: twMerge(
4259
+ "absolute inset-0 z-10",
4260
+ "flex flex-col items-center justify-center",
4261
+ "gap-[var(--deframe-widget-size-gap-lg)]",
4262
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
4263
+ "rounded-[inherit]",
4264
+ "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
4265
+ "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
4266
+ ),
3839
4267
  children: [
3840
- /* @__PURE__ */ jsx(
3841
- "span",
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",
4268
+ /* @__PURE__ */ jsx(ErrorIcon, {}),
4269
+ /* @__PURE__ */ jsxs(
4270
+ "div",
3855
4271
  {
3856
- "data-test-id": "swap-failed-simple-subtitle",
3857
- className: twMerge(
3858
- "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
3859
- "[font-weight:var(--deframe-widget-font-weight-regular)]",
3860
- "font-[var(--deframe-widget-font-family)]",
3861
- "text-[color:var(--deframe-widget-color-text-secondary)]",
3862
- "max-w-[260px]"
3863
- ),
3864
- children: errorDescription
4272
+ "data-test-id": "swap-failed-simple-copy",
4273
+ className: "flex flex-col items-center gap-[var(--deframe-widget-size-gap-sm)] text-center",
4274
+ children: [
4275
+ /* @__PURE__ */ jsx(
4276
+ "span",
4277
+ {
4278
+ "data-test-id": "swap-failed-simple-title",
4279
+ className: twMerge(
4280
+ "[font-size:22px] [line-height:1.25]",
4281
+ "[font-weight:var(--deframe-widget-font-weight-bold)]",
4282
+ "font-[var(--deframe-widget-font-family)]",
4283
+ "text-[color:var(--deframe-widget-color-text-primary)]"
4284
+ ),
4285
+ children: "Troca Falhou"
4286
+ }
4287
+ ),
4288
+ /* @__PURE__ */ jsx(
4289
+ "span",
4290
+ {
4291
+ "data-test-id": "swap-failed-simple-subtitle",
4292
+ className: twMerge(
4293
+ "[font-size:var(--deframe-widget-font-size-md)] [line-height:1.6]",
4294
+ "[font-weight:var(--deframe-widget-font-weight-regular)]",
4295
+ "font-[var(--deframe-widget-font-family)]",
4296
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
4297
+ "max-w-[260px]"
4298
+ ),
4299
+ children: "Tente novamente mais tarde."
4300
+ }
4301
+ )
4302
+ ]
3865
4303
  }
3866
4304
  )
3867
4305
  ]
@@ -4472,112 +4910,2349 @@ var SwapFormView = ({
4472
4910
  /* @__PURE__ */ jsx(TextHeading, { variant: "h5", className: "!text-[21px]", children: /* @__PURE__ */ jsx("span", { "data-testid": "swap-flow-title", children: labels.title }) }),
4473
4911
  labels.subtitle && /* @__PURE__ */ jsx(TextBody, { variant: "text-small", className: "!text-[14px]", children: labels.subtitle })
4474
4912
  ] }),
4475
- /* @__PURE__ */ jsx(
4476
- "button",
4913
+ /* @__PURE__ */ jsx(
4914
+ "button",
4915
+ {
4916
+ "data-testid": "swap-history-button",
4917
+ type: "button",
4918
+ onClick: onHistoryClick,
4919
+ className: "flex items-center justify-center w-12 h-12 transition-colors rounded-full cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:text-brand-primary",
4920
+ "aria-label": labels.historyAriaLabel,
4921
+ children: /* @__PURE__ */ jsx(MdHistory, { className: "w-6 h-6" })
4922
+ }
4923
+ )
4924
+ ] }),
4925
+ /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-stretch gap-sm", children: [
4926
+ /* @__PURE__ */ jsx(SwapFromCardView, __spreadValues({}, fromCard)),
4927
+ /* @__PURE__ */ jsx("div", { className: "flex justify-center -my-5 relative z-10", children: /* @__PURE__ */ jsx(
4928
+ "button",
4929
+ {
4930
+ "data-testid": "swap-switch-tokens-button",
4931
+ type: "button",
4932
+ onClick: onSwitchTokens,
4933
+ className: "w-10 h-10 rounded-full bg-brand-secondary shadow-md flex items-center justify-center text-text-primary hover:shadow-lg transition-shadow focus:outline-none focus:ring-2 focus:ring-brand-secondary cursor-pointer",
4934
+ "aria-label": switchTokensAriaLabel,
4935
+ children: /* @__PURE__ */ jsx(MdOutlineSwapVert, { className: "w-5 h-5" })
4936
+ }
4937
+ ) }),
4938
+ /* @__PURE__ */ jsx(SwapToCardView, __spreadValues({}, toCard))
4939
+ ] }),
4940
+ /* @__PURE__ */ jsx(SwapAdvancedSettingsView, __spreadValues({}, advancedSettings)),
4941
+ /* @__PURE__ */ jsx("div", { className: "pb-xl", children: /* @__PURE__ */ jsx(SwapQuoteDetailsView, __spreadValues({}, transactionDetails)) })
4942
+ ] }) })
4943
+ }
4944
+ ),
4945
+ /* @__PURE__ */ jsx(
4946
+ "div",
4947
+ {
4948
+ "data-testid": "swap-flow-footer",
4949
+ className: "border-t p-md border-border-default dark:border-border-default-dark bg-bg-primary dark:bg-bg-primary-dark",
4950
+ children: /* @__PURE__ */ jsx(ConfirmSwapButtonView, __spreadValues({}, confirmButton))
4951
+ }
4952
+ )
4953
+ ] });
4954
+ };
4955
+ var SwapFromCardViewSimple = ({
4956
+ labels,
4957
+ selectedToken,
4958
+ onTokenClick,
4959
+ onNetworkAndAssetClick,
4960
+ balanceFormatted,
4961
+ onBalanceClick,
4962
+ chainLabel,
4963
+ chainImage,
4964
+ amountValue,
4965
+ amountHasError,
4966
+ onAmountChange,
4967
+ amountUsdFormatted,
4968
+ isAmountUsdLoading,
4969
+ field,
4970
+ percentageOptions,
4971
+ onPercentageClick,
4972
+ selectedPercentage = null,
4973
+ maxLabel = "Max.",
4974
+ errorMessage = "Saldo insuficiente para realizar a troca.",
4975
+ errorActionLabel = "Adicionar via PIX",
4976
+ onErrorAction
4977
+ }) => {
4978
+ const [isHovered, setIsHovered] = useState(false);
4979
+ const hideTimeout = useRef(null);
4980
+ const handleMouseEnter = useCallback(() => {
4981
+ if (hideTimeout.current) {
4982
+ clearTimeout(hideTimeout.current);
4983
+ hideTimeout.current = null;
4984
+ }
4985
+ setIsHovered(true);
4986
+ }, []);
4987
+ const handleMouseLeave = useCallback(() => {
4988
+ hideTimeout.current = setTimeout(() => setIsHovered(false), 150);
4989
+ }, []);
4990
+ const wrapperClasses = twMerge(
4991
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
4992
+ "border",
4993
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
4994
+ "transition-[border-color,background] duration-200",
4995
+ 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)]"
4996
+ );
4997
+ const isEmpty = !amountValue || Number(amountValue) === 0;
4998
+ const showChips = isHovered && percentageOptions && percentageOptions.length > 0 && onPercentageClick;
4999
+ return /* @__PURE__ */ jsxs(
5000
+ "div",
5001
+ {
5002
+ "data-test-id": "swap-from-card-simple",
5003
+ className: wrapperClasses,
5004
+ onMouseEnter: handleMouseEnter,
5005
+ onMouseLeave: handleMouseLeave,
5006
+ children: [
5007
+ /* @__PURE__ */ jsxs(
5008
+ "div",
5009
+ {
5010
+ "data-test-id": "swap-from-card-simple-top-row",
5011
+ className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
5012
+ children: [
5013
+ /* @__PURE__ */ jsx(
5014
+ TokenSelectorArea,
5015
+ {
5016
+ selectedToken,
5017
+ chainLabel,
5018
+ chainImage,
5019
+ onTokenClick: onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick,
5020
+ selectTokenLabel: labels.selectTokenLabel
5021
+ }
5022
+ ),
5023
+ /* @__PURE__ */ jsx(
5024
+ "div",
5025
+ {
5026
+ "data-test-id": "swap-from-card-simple-divider",
5027
+ className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
5028
+ }
5029
+ ),
5030
+ /* @__PURE__ */ jsxs(
5031
+ "div",
5032
+ {
5033
+ "data-test-id": "swap-from-card-simple-amount-wrapper",
5034
+ className: "flex flex-col items-end flex-1 min-w-0",
5035
+ children: [
5036
+ /* @__PURE__ */ jsx(
5037
+ "input",
5038
+ __spreadProps(__spreadValues({
5039
+ "data-test-id": "swap-from-card-simple-amount-input",
5040
+ type: "text",
5041
+ inputMode: "decimal",
5042
+ autoComplete: "off",
5043
+ placeholder: "0",
5044
+ "aria-label": labels.amountPlaceholder,
5045
+ value: amountValue || "",
5046
+ className: twMerge(
5047
+ "bg-transparent border-none outline-none",
5048
+ "text-right",
5049
+ "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
5050
+ "w-full px-[var(--deframe-widget-size-padding-x-none)] py-[var(--deframe-widget-size-padding-y-none)]",
5051
+ "font-[var(--deframe-widget-font-family)]",
5052
+ "placeholder:text-[color:var(--deframe-widget-color-text-tertiary)]",
5053
+ isEmpty ? "text-[color:var(--deframe-widget-color-text-tertiary)]" : "text-[color:var(--deframe-widget-color-text-primary)]"
5054
+ )
5055
+ }, field ? { name: field.name, onBlur: field.onBlur, ref: field.ref } : {}), {
5056
+ onChange: (e) => onAmountChange(e.target.value),
5057
+ onWheel: (e) => {
5058
+ e.currentTarget.blur();
5059
+ }
5060
+ })
5061
+ ),
5062
+ /* @__PURE__ */ jsx(
5063
+ "span",
5064
+ {
5065
+ "data-test-id": "swap-from-card-simple-usd-conversion",
5066
+ className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
5067
+ children: isAmountUsdLoading ? /* @__PURE__ */ jsx(LoadingDots, {}) : amountUsdFormatted
5068
+ }
5069
+ )
5070
+ ]
5071
+ }
5072
+ )
5073
+ ]
5074
+ }
5075
+ ),
5076
+ selectedToken && /* @__PURE__ */ jsx(
5077
+ "div",
5078
+ {
5079
+ "data-test-id": "swap-from-card-simple-balance-row",
5080
+ className: "flex items-center justify-between mt-[var(--deframe-widget-size-gap-sm)]",
5081
+ children: onBalanceClick ? /* @__PURE__ */ jsxs(
5082
+ "button",
5083
+ {
5084
+ "data-test-id": "swap-from-card-simple-balance",
5085
+ type: "button",
5086
+ onClick: onBalanceClick,
5087
+ "aria-label": `${labels.balanceLabel}: ${balanceFormatted}`,
5088
+ className: twMerge(
5089
+ "text-[13px] font-[var(--deframe-widget-font-family)] cursor-pointer",
5090
+ "bg-transparent border-none outline-none p-0",
5091
+ "text-[color:var(--deframe-widget-color-text-tertiary)]",
5092
+ "hover:text-[color:var(--deframe-widget-color-text-secondary)]",
5093
+ "transition-colors duration-150"
5094
+ ),
5095
+ children: [
5096
+ labels.balanceLabel,
5097
+ ":",
5098
+ " ",
5099
+ /* @__PURE__ */ jsx(
5100
+ "span",
5101
+ {
5102
+ "data-test-id": "swap-from-card-simple-balance-value",
5103
+ className: amountHasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-secondary)]",
5104
+ children: balanceFormatted
5105
+ }
5106
+ )
5107
+ ]
5108
+ }
5109
+ ) : /* @__PURE__ */ jsxs(
5110
+ "span",
5111
+ {
5112
+ "data-test-id": "swap-from-card-simple-balance",
5113
+ className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
5114
+ children: [
5115
+ labels.balanceLabel,
5116
+ ":",
5117
+ " ",
5118
+ /* @__PURE__ */ jsx(
5119
+ "span",
5120
+ {
5121
+ "data-test-id": "swap-from-card-simple-balance-value",
5122
+ className: amountHasError ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-secondary)]",
5123
+ children: balanceFormatted
5124
+ }
5125
+ )
5126
+ ]
5127
+ }
5128
+ )
5129
+ }
5130
+ ),
5131
+ /* @__PURE__ */ jsx(AnimatePresence, { children: showChips && /* @__PURE__ */ jsx(
5132
+ motion.div,
5133
+ {
5134
+ "data-test-id": "swap-from-card-simple-chips",
5135
+ initial: { opacity: 0, height: 0 },
5136
+ animate: { opacity: 1, height: "auto" },
5137
+ exit: { opacity: 0, height: 0 },
5138
+ transition: { duration: 0.15 },
5139
+ className: "overflow-hidden mt-[var(--deframe-widget-size-gap-sm)]",
5140
+ children: /* @__PURE__ */ jsx(
5141
+ "div",
5142
+ {
5143
+ "data-test-id": "swap-from-card-simple-chips-row",
5144
+ className: "flex gap-[6px] items-center",
5145
+ children: percentageOptions.map((pct, i) => {
5146
+ const isLast = i === percentageOptions.length - 1;
5147
+ const isActive = pct === selectedPercentage;
5148
+ const chipLabel = isLast ? maxLabel : `${pct / 100}%`;
5149
+ return /* @__PURE__ */ jsx(
5150
+ ChipPill,
5151
+ {
5152
+ label: chipLabel,
5153
+ active: isActive,
5154
+ onClick: () => onPercentageClick(pct)
5155
+ },
5156
+ pct
5157
+ );
5158
+ })
5159
+ }
5160
+ )
5161
+ }
5162
+ ) }),
5163
+ amountHasError && /* @__PURE__ */ jsx(
5164
+ "div",
5165
+ {
5166
+ "data-test-id": "swap-from-card-simple-error",
5167
+ className: "mt-[var(--deframe-widget-size-gap-sm)]",
5168
+ children: /* @__PURE__ */ jsx(
5169
+ InlineNotificationBar,
5170
+ {
5171
+ message: errorMessage,
5172
+ actionLabel: errorActionLabel,
5173
+ onAction: onErrorAction
5174
+ }
5175
+ )
5176
+ }
5177
+ )
5178
+ ]
5179
+ }
5180
+ );
5181
+ };
5182
+ function TokenSelectorArea({
5183
+ selectedToken,
5184
+ chainLabel,
5185
+ chainImage,
5186
+ onTokenClick,
5187
+ selectTokenLabel
5188
+ }) {
5189
+ return /* @__PURE__ */ jsx(
5190
+ "button",
5191
+ {
5192
+ "data-test-id": "swap-from-card-simple-token-selector",
5193
+ type: "button",
5194
+ onClick: onTokenClick,
5195
+ "aria-label": selectedToken ? `Select token \u2014 currently ${selectedToken.symbol} on ${chainLabel}` : selectTokenLabel,
5196
+ className: twMerge(
5197
+ "inline-flex items-center gap-[10px]",
5198
+ "py-[var(--deframe-widget-size-padding-y-sm)] px-[10px]",
5199
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
5200
+ "bg-[var(--deframe-widget-color-bg-tertiary)]",
5201
+ "border-none outline-none",
5202
+ "transition-[background] duration-150",
5203
+ "flex-shrink-0",
5204
+ "cursor-pointer hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_72%,transparent)]"
5205
+ ),
5206
+ children: selectedToken ? /* @__PURE__ */ jsxs(Fragment, { children: [
5207
+ /* @__PURE__ */ jsx(
5208
+ TokenIconWithBadge,
5209
+ {
5210
+ token: selectedToken,
5211
+ chainLabel,
5212
+ chainImage
5213
+ }
5214
+ ),
5215
+ /* @__PURE__ */ jsxs(
5216
+ "div",
5217
+ {
5218
+ "data-test-id": "swap-from-card-simple-token-info",
5219
+ className: "flex flex-col items-start min-w-0",
5220
+ children: [
5221
+ /* @__PURE__ */ jsx(
5222
+ "span",
5223
+ {
5224
+ "data-test-id": "swap-from-card-simple-token-symbol",
5225
+ className: twMerge(
5226
+ "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2]",
5227
+ "font-[var(--deframe-widget-font-family)]",
5228
+ "text-[color:var(--deframe-widget-color-text-primary)]"
5229
+ ),
5230
+ children: selectedToken.symbol
5231
+ }
5232
+ ),
5233
+ /* @__PURE__ */ jsx(
5234
+ "span",
5235
+ {
5236
+ "data-test-id": "swap-from-card-simple-token-network",
5237
+ 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]",
5238
+ children: chainLabel
5239
+ }
5240
+ )
5241
+ ]
5242
+ }
5243
+ ),
5244
+ /* @__PURE__ */ jsx(ChevronDown, {})
5245
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
5246
+ /* @__PURE__ */ jsx(
5247
+ "div",
5248
+ {
5249
+ "data-test-id": "swap-from-card-simple-token-placeholder-icon",
5250
+ className: "w-[38px] h-[38px] rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex-shrink-0"
5251
+ }
5252
+ ),
5253
+ /* @__PURE__ */ jsx(
5254
+ "span",
5255
+ {
5256
+ "data-test-id": "swap-from-card-simple-token-placeholder-label",
5257
+ className: twMerge(
5258
+ "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
5259
+ "font-[var(--deframe-widget-font-family)]",
5260
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
5261
+ "whitespace-nowrap"
5262
+ ),
5263
+ children: selectTokenLabel
5264
+ }
5265
+ ),
5266
+ /* @__PURE__ */ jsx(ChevronDown, {})
5267
+ ] })
5268
+ }
5269
+ );
5270
+ }
5271
+ function TokenIconWithBadge({ token, chainLabel, chainImage }) {
5272
+ const [imgError, setImgError] = useState(false);
5273
+ const [badgeError, setBadgeError] = useState(false);
5274
+ const size = 38;
5275
+ const badgeSize = 16;
5276
+ return /* @__PURE__ */ jsxs(
5277
+ "div",
5278
+ {
5279
+ "data-test-id": "swap-from-card-simple-token-icon",
5280
+ className: "relative flex-shrink-0",
5281
+ style: { width: size, height: size },
5282
+ children: [
5283
+ token.logoURI && !imgError ? /* @__PURE__ */ jsx(
5284
+ "img",
5285
+ {
5286
+ "data-test-id": "swap-from-card-simple-token-icon-img",
5287
+ src: token.logoURI,
5288
+ alt: token.symbol,
5289
+ width: size,
5290
+ height: size,
5291
+ className: "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 object-cover",
5292
+ onError: () => setImgError(true)
5293
+ }
5294
+ ) : /* @__PURE__ */ jsx(
5295
+ "div",
5296
+ {
5297
+ "data-test-id": "swap-from-card-simple-token-icon-fallback",
5298
+ className: twMerge(
5299
+ "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0",
5300
+ "flex items-center justify-center",
5301
+ "[font-weight:var(--deframe-widget-font-weight-bold)]",
5302
+ "text-[color:var(--deframe-widget-color-text-primary-dark)]",
5303
+ "bg-[var(--deframe-widget-color-bg-tertiary)]"
5304
+ ),
5305
+ style: { width: size, height: size, fontSize: size * 0.33 },
5306
+ children: token.symbol.slice(0, 2).toUpperCase()
5307
+ }
5308
+ ),
5309
+ chainImage && !badgeError ? /* @__PURE__ */ jsx(
5310
+ "div",
5311
+ {
5312
+ "data-test-id": "swap-from-card-simple-token-badge",
5313
+ 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)]",
5314
+ children: /* @__PURE__ */ jsx(
5315
+ "img",
5316
+ {
5317
+ "data-test-id": "swap-from-card-simple-token-badge-img",
5318
+ src: chainImage,
5319
+ alt: chainLabel,
5320
+ width: badgeSize,
5321
+ height: badgeSize,
5322
+ className: "rounded-[var(--deframe-widget-size-radius-full)] object-cover",
5323
+ onError: () => setBadgeError(true)
5324
+ }
5325
+ )
5326
+ }
5327
+ ) : chainLabel ? /* @__PURE__ */ jsx(
5328
+ "div",
5329
+ {
5330
+ "data-test-id": "swap-from-card-simple-token-badge",
5331
+ className: twMerge(
5332
+ "absolute -bottom-0.5 -right-0.5",
5333
+ "rounded-[var(--deframe-widget-size-radius-full)]",
5334
+ "shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]",
5335
+ "bg-[var(--deframe-widget-color-bg-tertiary)]",
5336
+ "flex items-center justify-center",
5337
+ "[font-weight:var(--deframe-widget-font-weight-bold)]",
5338
+ "text-[color:var(--deframe-widget-color-text-primary-dark)]"
5339
+ ),
5340
+ style: { width: badgeSize, height: badgeSize, fontSize: badgeSize * 0.45 },
5341
+ children: chainLabel.slice(0, 1).toUpperCase()
5342
+ }
5343
+ ) : null
5344
+ ]
5345
+ }
5346
+ );
5347
+ }
5348
+ function ChevronDown() {
5349
+ return /* @__PURE__ */ jsx(
5350
+ "svg",
5351
+ {
5352
+ "data-test-id": "swap-from-card-simple-chevron",
5353
+ width: "14",
5354
+ height: "14",
5355
+ viewBox: "0 0 24 24",
5356
+ fill: "none",
5357
+ stroke: "currentColor",
5358
+ strokeWidth: "2.5",
5359
+ strokeLinecap: "round",
5360
+ strokeLinejoin: "round",
5361
+ className: "flex-shrink-0 text-[color:var(--deframe-widget-color-text-secondary)]",
5362
+ "aria-hidden": "true",
5363
+ children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
5364
+ }
5365
+ );
5366
+ }
5367
+ function ChipPill({ label, active, onClick }) {
5368
+ const baseClasses = twMerge(
5369
+ "inline-flex items-center justify-center",
5370
+ "py-[3px] px-[10px]",
5371
+ "rounded-[var(--deframe-widget-size-radius-full)]",
5372
+ "cursor-pointer",
5373
+ "text-[12px]",
5374
+ "transition-all duration-150",
5375
+ "outline-none",
5376
+ "font-[var(--deframe-widget-font-family)]",
5377
+ "whitespace-nowrap",
5378
+ "border"
5379
+ );
5380
+ const stateClasses = active ? twMerge(
5381
+ "border-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_32%,transparent)]",
5382
+ "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
5383
+ "text-[color:var(--deframe-widget-color-brand-primary)]",
5384
+ "[font-weight:var(--deframe-widget-font-weight-semibold)]"
5385
+ ) : twMerge(
5386
+ "border-[color:var(--deframe-widget-color-border-secondary)]",
5387
+ "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_84%,transparent)]",
5388
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
5389
+ "[font-weight:var(--deframe-widget-font-weight-regular)]",
5390
+ "hover:border-[color:var(--deframe-widget-color-border-primary)]",
5391
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
5392
+ "hover:text-[color:var(--deframe-widget-color-text-primary)]"
5393
+ );
5394
+ return /* @__PURE__ */ jsx(
5395
+ "button",
5396
+ {
5397
+ "data-test-id": "swap-from-card-simple-chip",
5398
+ type: "button",
5399
+ onClick,
5400
+ "aria-label": label,
5401
+ className: twMerge(baseClasses, stateClasses),
5402
+ children: /* @__PURE__ */ jsx("span", { "data-test-id": "swap-from-card-simple-chip-label", children: label })
5403
+ }
5404
+ );
5405
+ }
5406
+ function InlineNotificationBar({ message, actionLabel, onAction }) {
5407
+ const wrapperClasses = twMerge(
5408
+ "relative flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
5409
+ "py-[7px] pr-[10px] pl-[14px]",
5410
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
5411
+ "border",
5412
+ "overflow-hidden",
5413
+ "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)]",
5414
+ "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)]"
5415
+ );
5416
+ return /* @__PURE__ */ jsxs(
5417
+ "div",
5418
+ {
5419
+ "data-test-id": "swap-from-card-simple-notification",
5420
+ role: "alert",
5421
+ className: wrapperClasses,
5422
+ children: [
5423
+ /* @__PURE__ */ jsx(
5424
+ "div",
5425
+ {
5426
+ "data-test-id": "swap-from-card-simple-notification-accent",
5427
+ className: twMerge(
5428
+ "absolute left-0 top-0 bottom-0 w-[3px]",
5429
+ "rounded-[var(--deframe-widget-size-radius-sm)_0_0_var(--deframe-widget-size-radius-sm)]",
5430
+ "bg-[var(--deframe-widget-color-state-error)]"
5431
+ )
5432
+ }
5433
+ ),
5434
+ /* @__PURE__ */ jsx(
5435
+ "div",
5436
+ {
5437
+ "data-test-id": "swap-from-card-simple-notification-dot",
5438
+ className: "w-[6px] h-[6px] rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 bg-[var(--deframe-widget-color-state-error)]"
5439
+ }
5440
+ ),
5441
+ /* @__PURE__ */ jsx(
5442
+ "span",
5443
+ {
5444
+ "data-test-id": "swap-from-card-simple-notification-message",
5445
+ className: "flex-1 text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] font-[var(--deframe-widget-font-family)] leading-[1.4]",
5446
+ children: message
5447
+ }
5448
+ ),
5449
+ onAction && /* @__PURE__ */ jsxs(
5450
+ "button",
5451
+ {
5452
+ "data-test-id": "swap-from-card-simple-notification-action",
5453
+ type: "button",
5454
+ onClick: onAction,
5455
+ "aria-label": actionLabel,
5456
+ className: twMerge(
5457
+ "flex-shrink-0 bg-none border-none cursor-pointer",
5458
+ "text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
5459
+ "py-[var(--deframe-widget-size-padding-y-none)] px-[var(--deframe-widget-size-padding-x-xs)]",
5460
+ "outline-none font-[var(--deframe-widget-font-family)] whitespace-nowrap",
5461
+ "text-[color:var(--deframe-widget-color-state-error)]"
5462
+ ),
5463
+ children: [
5464
+ actionLabel,
5465
+ " \u2192"
5466
+ ]
5467
+ }
5468
+ )
5469
+ ]
5470
+ }
5471
+ );
5472
+ }
5473
+ function IconCircle({ item, size = 36 }) {
5474
+ const [imgError, setImgError] = React6__default.useState(false);
5475
+ if (item.iconUrl && !imgError) {
5476
+ return /* @__PURE__ */ jsx(
5477
+ "img",
5478
+ {
5479
+ "data-test-id": "icon-circle-img",
5480
+ src: item.iconUrl,
5481
+ alt: item.name,
5482
+ width: size,
5483
+ height: size,
5484
+ className: "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 object-cover",
5485
+ onError: () => setImgError(true)
5486
+ }
5487
+ );
5488
+ }
5489
+ return /* @__PURE__ */ jsx(
5490
+ "div",
5491
+ {
5492
+ "data-test-id": "icon-circle-fallback",
5493
+ 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)]",
5494
+ style: {
5495
+ width: size,
5496
+ height: size,
5497
+ background: item.color,
5498
+ fontSize: size * 0.33,
5499
+ letterSpacing: "-0.01em"
5500
+ },
5501
+ children: item.name.slice(0, 2).toUpperCase()
5502
+ }
5503
+ );
5504
+ }
5505
+ function TokenIcon2({
5506
+ token,
5507
+ size = 38,
5508
+ badge,
5509
+ badgeSize = 16
5510
+ }) {
5511
+ return /* @__PURE__ */ jsxs(
5512
+ "div",
5513
+ {
5514
+ "data-test-id": "swap-to-simple-token-icon",
5515
+ className: "relative flex-shrink-0",
5516
+ style: { width: size, height: size },
5517
+ children: [
5518
+ /* @__PURE__ */ jsx(IconCircle, { item: token, size }),
5519
+ badge && /* @__PURE__ */ jsx(
5520
+ "div",
5521
+ {
5522
+ "data-test-id": "swap-to-simple-token-badge",
5523
+ 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)]",
5524
+ children: /* @__PURE__ */ jsx(IconCircle, { item: badge, size: badgeSize })
5525
+ }
5526
+ )
5527
+ ]
5528
+ }
5529
+ );
5530
+ }
5531
+ var SwapToCardViewSimple = ({
5532
+ labels,
5533
+ selectedToken,
5534
+ onTokenClick,
5535
+ onNetworkAndAssetClick,
5536
+ balanceFormatted,
5537
+ balanceUsdFormatted,
5538
+ chainLabel,
5539
+ chainImage,
5540
+ outputAmount,
5541
+ isOutputLoading,
5542
+ outputUsdFormatted,
5543
+ isOutputUsdLoading
5544
+ }) => {
5545
+ const handleTokenClick = onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick;
5546
+ const isEmpty = !outputAmount || Number(outputAmount) === 0;
5547
+ const wrapperClasses = twMerge(
5548
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
5549
+ "border",
5550
+ "border-[color:var(--deframe-widget-color-border-secondary)]",
5551
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
5552
+ "px-[var(--deframe-widget-size-padding-x-md)]",
5553
+ "py-[var(--deframe-widget-size-padding-y-md)]",
5554
+ "font-[var(--deframe-widget-font-family)]"
5555
+ );
5556
+ const selectorBaseClasses = twMerge(
5557
+ "inline-flex items-center gap-[10px]",
5558
+ "py-[var(--deframe-widget-size-padding-y-sm)] px-[10px]",
5559
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
5560
+ "bg-[var(--deframe-widget-color-bg-tertiary)]",
5561
+ "border-none",
5562
+ "outline-none",
5563
+ "transition-[background] duration-150",
5564
+ "flex-shrink-0",
5565
+ "cursor-pointer hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_72%,transparent)]"
5566
+ );
5567
+ return /* @__PURE__ */ jsxs("div", { "data-test-id": "swap-to-card-view-simple", className: wrapperClasses, children: [
5568
+ /* @__PURE__ */ jsxs(
5569
+ "div",
5570
+ {
5571
+ "data-test-id": "swap-to-simple-top-row",
5572
+ className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
5573
+ children: [
5574
+ selectedToken ? /* @__PURE__ */ jsxs(
5575
+ "button",
5576
+ {
5577
+ type: "button",
5578
+ "data-test-id": "swap-to-simple-token-selector",
5579
+ onClick: handleTokenClick,
5580
+ "aria-label": `Select token \u2014 currently ${selectedToken.symbol} on ${chainLabel}`,
5581
+ className: selectorBaseClasses,
5582
+ children: [
5583
+ /* @__PURE__ */ jsx(
5584
+ TokenIcon2,
5585
+ {
5586
+ token: {
5587
+ name: selectedToken.symbol,
5588
+ color: "var(--deframe-widget-color-brand-secondary)",
5589
+ iconUrl: selectedToken.logoURI
5590
+ },
5591
+ size: 38,
5592
+ badge: chainLabel ? {
5593
+ name: chainLabel,
5594
+ color: "var(--deframe-widget-color-brand-secondary)",
5595
+ iconUrl: chainImage
5596
+ } : void 0,
5597
+ badgeSize: 16
5598
+ }
5599
+ ),
5600
+ /* @__PURE__ */ jsxs(
5601
+ "div",
5602
+ {
5603
+ "data-test-id": "swap-to-simple-token-info",
5604
+ className: "flex flex-col items-start min-w-0",
5605
+ children: [
5606
+ /* @__PURE__ */ jsx(
5607
+ "span",
5608
+ {
5609
+ "data-test-id": "swap-to-simple-token-symbol",
5610
+ 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)]",
5611
+ children: selectedToken.symbol
5612
+ }
5613
+ ),
5614
+ /* @__PURE__ */ jsx(
5615
+ "span",
5616
+ {
5617
+ "data-test-id": "swap-to-simple-token-network",
5618
+ 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]",
5619
+ children: chainLabel
5620
+ }
5621
+ )
5622
+ ]
5623
+ }
5624
+ ),
5625
+ /* @__PURE__ */ jsx(
5626
+ "svg",
5627
+ {
5628
+ "data-test-id": "swap-to-simple-chevron",
5629
+ width: "14",
5630
+ height: "14",
5631
+ viewBox: "0 0 24 24",
5632
+ fill: "none",
5633
+ stroke: "currentColor",
5634
+ strokeWidth: "2.5",
5635
+ strokeLinecap: "round",
5636
+ strokeLinejoin: "round",
5637
+ className: "flex-shrink-0 text-[color:var(--deframe-widget-color-text-secondary)]",
5638
+ "aria-hidden": "true",
5639
+ children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
5640
+ }
5641
+ )
5642
+ ]
5643
+ }
5644
+ ) : /* @__PURE__ */ jsxs(
5645
+ "button",
5646
+ {
5647
+ type: "button",
5648
+ "data-test-id": "swap-to-simple-token-placeholder",
5649
+ onClick: handleTokenClick,
5650
+ "aria-label": labels.selectTokenLabel,
5651
+ className: selectorBaseClasses,
5652
+ children: [
5653
+ /* @__PURE__ */ jsx(
5654
+ "div",
5655
+ {
5656
+ "data-test-id": "swap-to-simple-placeholder-circle",
5657
+ className: "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 bg-[var(--deframe-widget-color-bg-tertiary)]",
5658
+ style: { width: 38, height: 38 }
5659
+ }
5660
+ ),
5661
+ /* @__PURE__ */ jsx(
5662
+ "span",
5663
+ {
5664
+ "data-test-id": "swap-to-simple-placeholder-label",
5665
+ 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",
5666
+ children: labels.selectTokenLabel
5667
+ }
5668
+ ),
5669
+ /* @__PURE__ */ jsx(
5670
+ "svg",
5671
+ {
5672
+ "data-test-id": "swap-to-simple-placeholder-chevron",
5673
+ width: "14",
5674
+ height: "14",
5675
+ viewBox: "0 0 24 24",
5676
+ fill: "none",
5677
+ stroke: "currentColor",
5678
+ strokeWidth: "2.5",
5679
+ strokeLinecap: "round",
5680
+ strokeLinejoin: "round",
5681
+ className: "flex-shrink-0 text-[color:var(--deframe-widget-color-text-secondary)]",
5682
+ "aria-hidden": "true",
5683
+ children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
5684
+ }
5685
+ )
5686
+ ]
5687
+ }
5688
+ ),
5689
+ /* @__PURE__ */ jsx(
5690
+ "div",
5691
+ {
5692
+ "data-test-id": "swap-to-simple-divider",
5693
+ className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
5694
+ }
5695
+ ),
5696
+ /* @__PURE__ */ jsxs(
5697
+ "div",
5698
+ {
5699
+ "data-test-id": "swap-to-simple-output-wrapper",
5700
+ className: "flex flex-col items-end flex-1 min-w-0",
5701
+ children: [
5702
+ isOutputLoading ? /* @__PURE__ */ jsxs(
5703
+ "span",
5704
+ {
5705
+ "data-test-id": "swap-to-simple-output-loading",
5706
+ className: twMerge(
5707
+ "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
5708
+ "font-[var(--deframe-widget-font-family)]",
5709
+ "text-[color:var(--deframe-widget-color-text-tertiary)]",
5710
+ "text-right",
5711
+ "flex items-center"
5712
+ ),
5713
+ children: [
5714
+ labels.searchingQuoteLabel,
5715
+ /* @__PURE__ */ jsx(LoadingDots, {})
5716
+ ]
5717
+ }
5718
+ ) : /* @__PURE__ */ jsx(
5719
+ "span",
5720
+ {
5721
+ "data-test-id": "swap-to-simple-output-amount",
5722
+ className: twMerge(
5723
+ "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
5724
+ "font-[var(--deframe-widget-font-family)]",
5725
+ "text-right w-full",
5726
+ isEmpty ? "text-[color:var(--deframe-widget-color-text-tertiary)]" : "text-[color:var(--deframe-widget-color-text-primary)]"
5727
+ ),
5728
+ children: isEmpty ? "0" : outputAmount
5729
+ }
5730
+ ),
5731
+ /* @__PURE__ */ jsx(
5732
+ "span",
5733
+ {
5734
+ "data-test-id": "swap-to-simple-output-usd",
5735
+ className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
5736
+ children: isOutputUsdLoading ? /* @__PURE__ */ jsx(LoadingDots, {}) : outputUsdFormatted
5737
+ }
5738
+ )
5739
+ ]
5740
+ }
5741
+ )
5742
+ ]
5743
+ }
5744
+ ),
5745
+ selectedToken && /* @__PURE__ */ jsx(
5746
+ "div",
5747
+ {
5748
+ "data-test-id": "swap-to-simple-balance-row",
5749
+ className: "flex items-center justify-between mt-[var(--deframe-widget-size-gap-sm)]",
5750
+ children: /* @__PURE__ */ jsxs(
5751
+ "span",
5752
+ {
5753
+ "data-test-id": "swap-to-simple-balance",
5754
+ className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
5755
+ children: [
5756
+ labels.balanceLabel,
5757
+ ":",
5758
+ " ",
5759
+ /* @__PURE__ */ jsx(
5760
+ "span",
5761
+ {
5762
+ "data-test-id": "swap-to-simple-balance-value",
5763
+ className: "text-[color:var(--deframe-widget-color-text-secondary)]",
5764
+ children: balanceFormatted
5765
+ }
5766
+ )
5767
+ ]
5768
+ }
5769
+ )
5770
+ }
5771
+ )
5772
+ ] });
5773
+ };
5774
+ function Spinner() {
5775
+ return /* @__PURE__ */ jsxs(
5776
+ "svg",
5777
+ {
5778
+ "data-test-id": "confirm-swap-button-simple-spinner",
5779
+ width: "18",
5780
+ height: "18",
5781
+ viewBox: "0 0 24 24",
5782
+ fill: "none",
5783
+ stroke: "currentColor",
5784
+ strokeWidth: "2.5",
5785
+ strokeLinecap: "round",
5786
+ className: "animate-spin",
5787
+ "aria-hidden": "true",
5788
+ children: [
5789
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", opacity: "0.3" }),
5790
+ /* @__PURE__ */ jsx("path", { d: "M12 2 A10 10 0 0 1 22 12" })
5791
+ ]
5792
+ }
5793
+ );
5794
+ }
5795
+ var ConfirmSwapButtonViewSimple = ({
5796
+ buttonLabel,
5797
+ disabled,
5798
+ isLoading,
5799
+ onClick
5800
+ }) => {
5801
+ const isDisabled = disabled || isLoading;
5802
+ const buttonClasses = twMerge(
5803
+ "w-full h-12",
5804
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
5805
+ "border-none",
5806
+ "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
5807
+ "font-[var(--deframe-widget-font-family)]",
5808
+ "transition-[background,color] duration-200",
5809
+ "flex items-center justify-center gap-[var(--deframe-widget-size-gap-sm)]",
5810
+ 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"
5811
+ );
5812
+ return /* @__PURE__ */ jsx("div", { "data-test-id": "confirm-swap-button-simple-wrapper", children: /* @__PURE__ */ jsx(
5813
+ "button",
5814
+ {
5815
+ "data-test-id": "confirm-swap-button-simple",
5816
+ onClick: !isDisabled ? onClick : void 0,
5817
+ disabled: isDisabled,
5818
+ "aria-label": buttonLabel,
5819
+ className: buttonClasses,
5820
+ children: isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : buttonLabel
5821
+ }
5822
+ ) });
5823
+ };
5824
+ var SwapFormViewSimple = ({
5825
+ onSubmit,
5826
+ formRef,
5827
+ labels,
5828
+ onHistoryClick,
5829
+ onSwitchTokens,
5830
+ switchTokensAriaLabel,
5831
+ fromCard,
5832
+ toCard,
5833
+ advancedSettings,
5834
+ transactionDetails,
5835
+ confirmButton
5836
+ }) => {
5837
+ const containerRef = useRef(null);
5838
+ const [panelPos, setPanelPos] = useState(null);
5839
+ const [showPanel, setShowPanel] = useState(false);
5840
+ useEffect(() => {
5841
+ if (!advancedSettings.isOpen) setShowPanel(false);
5842
+ }, [advancedSettings.isOpen]);
5843
+ const updatePanelPos = useCallback(() => {
5844
+ if (containerRef.current && showPanel) {
5845
+ const rect = containerRef.current.getBoundingClientRect();
5846
+ setPanelPos({ top: rect.top, left: rect.right + 16 });
5847
+ }
5848
+ }, [showPanel]);
5849
+ useEffect(() => {
5850
+ if (!showPanel) {
5851
+ setPanelPos(null);
5852
+ return;
5853
+ }
5854
+ updatePanelPos();
5855
+ window.addEventListener("scroll", updatePanelPos, true);
5856
+ window.addEventListener("resize", updatePanelPos);
5857
+ return () => {
5858
+ window.removeEventListener("scroll", updatePanelPos, true);
5859
+ window.removeEventListener("resize", updatePanelPos);
5860
+ };
5861
+ }, [showPanel, updatePanelPos]);
5862
+ return /* @__PURE__ */ jsxs(
5863
+ "div",
5864
+ {
5865
+ ref: containerRef,
5866
+ "data-test-id": "swap-form-view-simple",
5867
+ className: twMerge(
5868
+ "relative",
5869
+ "rounded-[var(--deframe-widget-size-radius-md)]",
5870
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
5871
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
5872
+ "flex flex-col",
5873
+ `w-[${SWAP_SIMPLE_WIDTH}px] max-w-[calc(100%-32px)] shrink-0 box-border`,
5874
+ "font-[var(--deframe-widget-font-family)]"
5875
+ ),
5876
+ style: { minHeight: SWAP_SIMPLE_MIN_HEIGHT },
5877
+ children: [
5878
+ /* @__PURE__ */ jsxs("form", { ref: formRef, onSubmit, "data-test-id": "swap-form-simple-form", className: "flex flex-col flex-1", children: [
5879
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
5880
+ /* @__PURE__ */ jsx(
5881
+ "div",
5882
+ {
5883
+ "data-test-id": "swap-form-simple-top-row",
5884
+ className: "flex items-center justify-end mb-[var(--deframe-widget-size-gap-sm)]",
5885
+ children: /* @__PURE__ */ jsx(HistoryButton, { onClick: onHistoryClick, ariaLabel: labels.historyAriaLabel })
5886
+ }
5887
+ ),
5888
+ /* @__PURE__ */ jsx(
5889
+ SwapFromCardViewSimple,
5890
+ __spreadProps(__spreadValues({}, fromCard), {
5891
+ onNetworkAndAssetClick: fromCard.onNetworkAndAssetClick ? () => {
5892
+ setShowPanel(false);
5893
+ fromCard.onNetworkAndAssetClick();
5894
+ } : void 0,
5895
+ percentageOptions: advancedSettings.percentageOptions,
5896
+ onPercentageClick: (pct) => advancedSettings.onPercentageClick(pct),
5897
+ maxLabel: advancedSettings.maxLabel
5898
+ })
5899
+ ),
5900
+ /* @__PURE__ */ jsx(
5901
+ "div",
5902
+ {
5903
+ "data-test-id": "swap-form-simple-direction-row",
5904
+ className: "flex justify-center relative -my-[16px] z-[1]",
5905
+ children: /* @__PURE__ */ jsx(
5906
+ SwapDirectionButton,
5907
+ {
5908
+ onClick: onSwitchTokens,
5909
+ ariaLabel: switchTokensAriaLabel
5910
+ }
5911
+ )
5912
+ }
5913
+ ),
5914
+ /* @__PURE__ */ jsx(
5915
+ SwapToCardViewSimple,
5916
+ __spreadProps(__spreadValues({}, toCard), {
5917
+ onNetworkAndAssetClick: toCard.onNetworkAndAssetClick ? () => {
5918
+ setShowPanel(false);
5919
+ toCard.onNetworkAndAssetClick();
5920
+ } : void 0
5921
+ })
5922
+ ),
5923
+ /* @__PURE__ */ jsx(
5924
+ "div",
5925
+ {
5926
+ "data-test-id": "swap-form-simple-advanced-wrapper",
5927
+ className: "flex justify-end mt-[var(--deframe-widget-size-gap-sm)]",
5928
+ children: /* @__PURE__ */ jsx(
5929
+ AdvancedPill,
5930
+ {
5931
+ label: "Avan\xE7ado",
5932
+ isOpen: showPanel,
5933
+ onClick: () => {
5934
+ const next = !showPanel;
5935
+ setShowPanel(next);
5936
+ advancedSettings.onOpenChange(next);
5937
+ }
5938
+ }
5939
+ )
5940
+ }
5941
+ )
5942
+ ] }),
5943
+ /* @__PURE__ */ jsx("div", { className: "flex-1" }),
5944
+ /* @__PURE__ */ jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsx(ConfirmSwapButtonViewSimple, __spreadValues({}, confirmButton)) })
5945
+ ] }),
5946
+ showPanel && panelPos && /* @__PURE__ */ jsx(
5947
+ "div",
5948
+ {
5949
+ "data-test-id": "swap-form-simple-advanced-panel",
5950
+ className: twMerge(
5951
+ "fixed",
5952
+ "w-[320px] z-[9999]",
5953
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
5954
+ "rounded-[var(--deframe-widget-size-radius-md)]",
5955
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
5956
+ "shadow-[0px_4px_24px_0px_#0000003D]",
5957
+ "font-[var(--deframe-widget-font-family)]"
5958
+ ),
5959
+ style: { top: panelPos.top, left: panelPos.left },
5960
+ children: /* @__PURE__ */ jsx(
5961
+ AdvancedPanelContent,
5962
+ {
5963
+ advancedSettings: __spreadProps(__spreadValues({}, advancedSettings), {
5964
+ onOpenChange: (open) => {
5965
+ setShowPanel(open);
5966
+ advancedSettings.onOpenChange(open);
5967
+ }
5968
+ }),
5969
+ transactionDetails
5970
+ }
5971
+ )
5972
+ }
5973
+ )
5974
+ ]
5975
+ }
5976
+ );
5977
+ };
5978
+ function HistoryButton({ onClick, ariaLabel }) {
5979
+ return /* @__PURE__ */ jsx(
5980
+ "button",
5981
+ {
5982
+ "data-test-id": "swap-form-simple-history-button",
5983
+ type: "button",
5984
+ onClick,
5985
+ "aria-label": ariaLabel,
5986
+ className: twMerge(
5987
+ "inline-flex items-center justify-center",
5988
+ "w-9 h-9",
5989
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
5990
+ "border-none",
5991
+ "cursor-pointer",
5992
+ "bg-transparent",
5993
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
5994
+ "transition-[background] duration-150",
5995
+ "flex-shrink-0",
5996
+ "outline-none",
5997
+ "text-[color:var(--deframe-widget-color-text-secondary)]"
5998
+ ),
5999
+ children: /* @__PURE__ */ jsxs(
6000
+ "svg",
6001
+ {
6002
+ "data-test-id": "swap-form-simple-history-icon",
6003
+ viewBox: "0 0 24 24",
6004
+ width: "20",
6005
+ height: "20",
6006
+ fill: "none",
6007
+ stroke: "currentColor",
6008
+ strokeWidth: "2",
6009
+ strokeLinecap: "round",
6010
+ strokeLinejoin: "round",
6011
+ "aria-hidden": "true",
6012
+ children: [
6013
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
6014
+ /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
6015
+ ]
6016
+ }
6017
+ )
6018
+ }
6019
+ );
6020
+ }
6021
+ function SwapDirectionButton({ onClick, ariaLabel }) {
6022
+ const [isHovered, setIsHovered] = useState(false);
6023
+ return /* @__PURE__ */ jsx(
6024
+ motion.button,
6025
+ {
6026
+ "data-test-id": "swap-form-simple-direction-button",
6027
+ type: "button",
6028
+ onClick,
6029
+ onMouseEnter: () => setIsHovered(true),
6030
+ onMouseLeave: () => setIsHovered(false),
6031
+ animate: { rotate: isHovered ? 180 : 0 },
6032
+ transition: { duration: 0.25, ease: "easeInOut" },
6033
+ "aria-label": ariaLabel,
6034
+ className: twMerge(
6035
+ "inline-flex items-center justify-center",
6036
+ "w-10 h-10",
6037
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
6038
+ "bg-[#12151c]",
6039
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
6040
+ "outline-none",
6041
+ "flex-shrink-0",
6042
+ "shadow-[0px_2px_8px_0px_#0000003D]",
6043
+ "cursor-pointer text-[color:var(--deframe-widget-color-brand-primary)]"
6044
+ ),
6045
+ children: /* @__PURE__ */ jsxs(
6046
+ "svg",
6047
+ {
6048
+ "data-test-id": "swap-form-simple-direction-icon",
6049
+ width: "18",
6050
+ height: "18",
6051
+ viewBox: "0 0 24 24",
6052
+ fill: "none",
6053
+ stroke: "currentColor",
6054
+ strokeWidth: "2.5",
6055
+ strokeLinecap: "round",
6056
+ strokeLinejoin: "round",
6057
+ "aria-hidden": "true",
6058
+ children: [
6059
+ /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
6060
+ /* @__PURE__ */ jsx("polyline", { points: "19 12 12 19 5 12" })
6061
+ ]
6062
+ }
6063
+ )
6064
+ }
6065
+ );
6066
+ }
6067
+ function AdvancedPill({ label, isOpen, onClick }) {
6068
+ return /* @__PURE__ */ jsxs(
6069
+ "button",
6070
+ {
6071
+ "data-test-id": "swap-form-simple-advanced-pill",
6072
+ type: "button",
6073
+ onClick,
6074
+ className: twMerge(
6075
+ "inline-flex items-center gap-[5px]",
6076
+ "py-[5px] px-[var(--deframe-widget-size-padding-x-sm)]",
6077
+ "rounded-[var(--deframe-widget-size-radius-full)]",
6078
+ 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",
6079
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
6080
+ "cursor-pointer",
6081
+ "text-[color:var(--deframe-widget-color-brand-primary)]",
6082
+ "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)]",
6083
+ "outline-none",
6084
+ "font-[inherit]",
6085
+ "transition-[background] duration-150",
6086
+ "flex-shrink-0"
6087
+ ),
6088
+ children: [
6089
+ /* @__PURE__ */ jsxs(
6090
+ "svg",
6091
+ {
6092
+ "data-test-id": "swap-form-simple-advanced-pill-icon",
6093
+ width: "13",
6094
+ height: "13",
6095
+ viewBox: "0 0 24 24",
6096
+ fill: "none",
6097
+ stroke: "currentColor",
6098
+ strokeWidth: "2.5",
6099
+ strokeLinecap: "round",
6100
+ strokeLinejoin: "round",
6101
+ "aria-hidden": "true",
6102
+ children: [
6103
+ /* @__PURE__ */ jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
6104
+ /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
6105
+ /* @__PURE__ */ jsx("line", { x1: "4", y1: "18", x2: "20", y2: "18" }),
6106
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "6", r: "2", fill: "currentColor", stroke: "none" }),
6107
+ /* @__PURE__ */ jsx("circle", { cx: "16", cy: "12", r: "2", fill: "currentColor", stroke: "none" }),
6108
+ /* @__PURE__ */ jsx("circle", { cx: "10", cy: "18", r: "2", fill: "currentColor", stroke: "none" })
6109
+ ]
6110
+ }
6111
+ ),
6112
+ /* @__PURE__ */ jsx("span", { "data-test-id": "swap-form-simple-advanced-pill-label", children: label })
6113
+ ]
6114
+ }
6115
+ );
6116
+ }
6117
+ function AdvancedPanelContent({ advancedSettings, transactionDetails }) {
6118
+ return /* @__PURE__ */ jsxs(
6119
+ "div",
6120
+ {
6121
+ "data-test-id": "swap-form-simple-advanced-panel-content",
6122
+ className: "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
6123
+ children: [
6124
+ /* @__PURE__ */ jsxs(
6125
+ "div",
6126
+ {
6127
+ "data-test-id": "swap-form-simple-advanced-panel-header",
6128
+ className: "flex justify-between items-center mb-[6px]",
6129
+ children: [
6130
+ /* @__PURE__ */ jsx(
6131
+ "span",
6132
+ {
6133
+ "data-test-id": "swap-form-simple-advanced-panel-title",
6134
+ className: "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] font-[inherit]",
6135
+ children: "Avan\xE7ado"
6136
+ }
6137
+ ),
6138
+ /* @__PURE__ */ jsx(
6139
+ "button",
6140
+ {
6141
+ "data-test-id": "swap-form-simple-advanced-panel-close",
6142
+ type: "button",
6143
+ onClick: () => advancedSettings.onOpenChange(false),
6144
+ "aria-label": "Close advanced panel",
6145
+ className: twMerge(
6146
+ "inline-flex items-center justify-center",
6147
+ "w-7 h-7",
6148
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
6149
+ "border-none cursor-pointer bg-transparent",
6150
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
6151
+ "transition-[background] duration-150",
6152
+ "flex-shrink-0 outline-none",
6153
+ "text-[color:var(--deframe-widget-color-text-secondary)]"
6154
+ ),
6155
+ children: /* @__PURE__ */ jsx(
6156
+ "svg",
6157
+ {
6158
+ "data-test-id": "swap-form-simple-advanced-panel-close-icon",
6159
+ viewBox: "0 0 24 24",
6160
+ width: "16",
6161
+ height: "16",
6162
+ fill: "currentColor",
6163
+ "aria-hidden": "true",
6164
+ 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" })
6165
+ }
6166
+ )
6167
+ }
6168
+ )
6169
+ ]
6170
+ }
6171
+ ),
6172
+ transactionDetails.exchangeRateFormatted && /* @__PURE__ */ jsx(
6173
+ "p",
6174
+ {
6175
+ "data-test-id": "swap-form-simple-advanced-panel-subtitle",
6176
+ 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]",
6177
+ children: transactionDetails.exchangeRateFormatted
6178
+ }
6179
+ ),
6180
+ /* @__PURE__ */ jsx(
6181
+ "div",
6182
+ {
6183
+ "data-test-id": "swap-form-simple-advanced-panel-divider",
6184
+ className: "h-px bg-[var(--deframe-widget-color-border-secondary)] mt-[var(--deframe-widget-size-gap-sm)]"
6185
+ }
6186
+ ),
6187
+ /* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.exchangeRateLabel, value: transactionDetails.exchangeRateFormatted }),
6188
+ /* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.blockchainCostsLabel, value: transactionDetails.totalCostFormatted }),
6189
+ /* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.networkGasLabel, value: transactionDetails.gasCostFormatted }),
6190
+ /* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.protocolFeeLabel, value: transactionDetails.protocolFee }),
6191
+ /* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.slippageLabel, value: transactionDetails.slippageFormatted }),
6192
+ /* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.etaLabel, value: transactionDetails.etaFormatted }),
6193
+ transactionDetails.quoteId && /* @__PURE__ */ jsx(DetailRow, { label: transactionDetails.labels.quoteIdLabel, value: transactionDetails.quoteId }),
6194
+ /* @__PURE__ */ jsx(
6195
+ "div",
6196
+ {
6197
+ "data-test-id": "swap-form-simple-advanced-panel-divider-2",
6198
+ className: "h-px bg-[var(--deframe-widget-color-border-secondary)] my-[var(--deframe-widget-size-gap-sm)]"
6199
+ }
6200
+ ),
6201
+ /* @__PURE__ */ jsxs("div", { "data-test-id": "swap-form-simple-advanced-panel-slippage", children: [
6202
+ /* @__PURE__ */ jsxs(
6203
+ "span",
6204
+ {
6205
+ "data-test-id": "swap-form-simple-advanced-panel-slippage-label",
6206
+ 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)]",
6207
+ children: [
6208
+ "Slippage: ",
6209
+ advancedSettings.slippageFormatted
6210
+ ]
6211
+ }
6212
+ ),
6213
+ /* @__PURE__ */ jsx(
6214
+ "div",
6215
+ {
6216
+ "data-test-id": "swap-form-simple-advanced-panel-slippage-buttons",
6217
+ className: "flex gap-[6px] mt-[var(--deframe-widget-size-gap-sm)]",
6218
+ children: [10, 50, 100].map((bps) => {
6219
+ const isActive = advancedSettings.slippageBps === bps;
6220
+ return /* @__PURE__ */ jsx(
6221
+ "button",
6222
+ {
6223
+ "data-test-id": "swap-form-simple-slippage-btn",
6224
+ type: "button",
6225
+ onClick: () => advancedSettings.onSlippageSelect(bps),
6226
+ className: twMerge(
6227
+ "py-[3px] px-[10px]",
6228
+ "rounded-[var(--deframe-widget-size-radius-full)]",
6229
+ "text-[12px] font-[var(--deframe-widget-font-family)]",
6230
+ "border cursor-pointer outline-none",
6231
+ "transition-all duration-150",
6232
+ 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)]"
6233
+ ),
6234
+ children: advancedSettings.formatPercentage(bps)
6235
+ },
6236
+ bps
6237
+ );
6238
+ })
6239
+ }
6240
+ )
6241
+ ] })
6242
+ ]
6243
+ }
6244
+ );
6245
+ }
6246
+ function DetailRow({ label, value }) {
6247
+ if (!label && !value) return null;
6248
+ return /* @__PURE__ */ jsxs(
6249
+ "div",
6250
+ {
6251
+ "data-test-id": "swap-form-simple-detail-row",
6252
+ className: "flex justify-between items-center py-[10px] gap-[var(--deframe-widget-size-gap-sm)]",
6253
+ children: [
6254
+ /* @__PURE__ */ jsx(
6255
+ "span",
6256
+ {
6257
+ "data-test-id": "swap-form-simple-detail-row-label",
6258
+ 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",
6259
+ children: label
6260
+ }
6261
+ ),
6262
+ /* @__PURE__ */ jsx(
6263
+ "span",
6264
+ {
6265
+ "data-test-id": "swap-form-simple-detail-row-value",
6266
+ 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)]",
6267
+ children: value
6268
+ }
6269
+ )
6270
+ ]
6271
+ }
6272
+ );
6273
+ }
6274
+ var ChooseANetworkView = ({
6275
+ labels,
6276
+ autoFocus = true,
6277
+ chains,
6278
+ pageSize = 10,
6279
+ onChainClick
6280
+ }) => {
6281
+ const [searchValue, setSearchValue] = useState("");
6282
+ const [page, setPage] = useState(1);
6283
+ useEffect(() => {
6284
+ setPage(1);
6285
+ }, [searchValue]);
6286
+ const filteredChains = chains.filter(
6287
+ (chain) => chain.name.toLowerCase().includes(searchValue.toLowerCase())
6288
+ );
6289
+ const displayedChains = filteredChains.slice(0, page * pageSize);
6290
+ const hasMore = filteredChains.length > page * pageSize;
6291
+ 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: [
6292
+ /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
6293
+ /* @__PURE__ */ jsx(TextHeading, { children: labels.title }),
6294
+ /* @__PURE__ */ jsx("br", {}),
6295
+ /* @__PURE__ */ jsx(
6296
+ SearchInput,
6297
+ {
6298
+ value: searchValue,
6299
+ onChange: setSearchValue,
6300
+ placeholder: labels.searchPlaceholder,
6301
+ autoFocus
6302
+ }
6303
+ )
6304
+ ] }),
6305
+ /* @__PURE__ */ jsxs(
6306
+ "div",
6307
+ {
6308
+ "data-testid": "choose-a-network-list",
6309
+ 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",
6310
+ children: [
6311
+ displayedChains.map((chain) => /* @__PURE__ */ jsxs(
6312
+ ListItem,
6313
+ {
6314
+ className: "w-full flex-shrink-0",
6315
+ onClick: () => onChainClick(chain.chainId),
6316
+ "data-testid": `choose-network-item-${chain.chainId}`,
6317
+ "data-chain-id": chain.chainId,
6318
+ children: [
6319
+ /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
6320
+ "img",
6321
+ {
6322
+ src: chain.imageUrl,
6323
+ alt: chain.name,
6324
+ className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
6325
+ }
6326
+ ) }),
6327
+ /* @__PURE__ */ jsx(ListItemContent, { children: /* @__PURE__ */ jsx(TextBody, { children: chain.name }) })
6328
+ ]
6329
+ },
6330
+ `chain-${chain.chainId}`
6331
+ )),
6332
+ 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 }) })
6333
+ ]
6334
+ }
6335
+ )
6336
+ ] }) });
6337
+ };
6338
+ function useIsMobile(breakpoint = 640) {
6339
+ const [isMobile, setIsMobile] = useState(
6340
+ typeof window !== "undefined" ? window.innerWidth < breakpoint : false
6341
+ );
6342
+ useEffect(() => {
6343
+ const check = () => setIsMobile(window.innerWidth < breakpoint);
6344
+ check();
6345
+ window.addEventListener("resize", check);
6346
+ return () => window.removeEventListener("resize", check);
6347
+ }, [breakpoint]);
6348
+ return isMobile;
6349
+ }
6350
+ function CloseButtonInline({ onClick, ariaLabel }) {
6351
+ const baseClasses = [
6352
+ "inline-flex items-center justify-center",
6353
+ "w-9 h-9",
6354
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
6355
+ "border-none",
6356
+ "cursor-pointer",
6357
+ "bg-transparent",
6358
+ "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
6359
+ "transition-[background] duration-150",
6360
+ "flex-shrink-0",
6361
+ "outline-none",
6362
+ "text-[color:var(--deframe-widget-color-text-secondary)]"
6363
+ ].join(" ");
6364
+ return /* @__PURE__ */ jsx(
6365
+ "button",
6366
+ {
6367
+ "data-test-id": "close-button",
6368
+ onClick,
6369
+ "aria-label": ariaLabel,
6370
+ className: baseClasses,
6371
+ children: /* @__PURE__ */ jsx(
6372
+ "svg",
6373
+ {
6374
+ "data-test-id": "close-button-icon",
6375
+ viewBox: "0 0 24 24",
6376
+ width: "20",
6377
+ height: "20",
6378
+ fill: "currentColor",
6379
+ "aria-hidden": "true",
6380
+ 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" })
6381
+ }
6382
+ )
6383
+ }
6384
+ );
6385
+ }
6386
+ function IconCircle2({ iconUrl, name, size = 36, className }) {
6387
+ const [imgError, setImgError] = React6.useState(false);
6388
+ if (iconUrl && !imgError) {
6389
+ return /* @__PURE__ */ jsx(
6390
+ "img",
6391
+ {
6392
+ "data-test-id": "icon-circle-img",
6393
+ src: iconUrl,
6394
+ alt: name,
6395
+ width: size,
6396
+ height: size,
6397
+ className: twMerge("rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 object-cover", className),
6398
+ onError: () => setImgError(true)
6399
+ }
6400
+ );
6401
+ }
6402
+ return /* @__PURE__ */ jsx(
6403
+ "div",
6404
+ {
6405
+ "data-test-id": "icon-circle-fallback",
6406
+ className: twMerge(
6407
+ "rounded-[var(--deframe-widget-size-radius-full)] flex-shrink-0 flex items-center justify-center",
6408
+ "[font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-text-primary-dark)]",
6409
+ "bg-[var(--deframe-widget-color-bg-tertiary)]",
6410
+ className
6411
+ ),
6412
+ style: {
6413
+ width: size,
6414
+ height: size,
6415
+ fontSize: size * 0.33,
6416
+ letterSpacing: "-0.01em"
6417
+ },
6418
+ children: name.slice(0, 2).toUpperCase()
6419
+ }
6420
+ );
6421
+ }
6422
+
6423
+ // src/stories/choose-network-and-asset-view/ChooseNetworkAndAssetViewSimple/hasSignificantBalance.ts
6424
+ function hasSignificantBalance(balanceUsd) {
6425
+ if (!balanceUsd) return false;
6426
+ const num = parseFloat(balanceUsd.replace(/[^0-9.-]/g, ""));
6427
+ return !isNaN(num) && num >= 0.01;
6428
+ }
6429
+ function NetworkRow({ network, selected, onClick, onKeyDown, index }) {
6430
+ const baseClasses = [
6431
+ "relative flex items-center gap-[10px]",
6432
+ "py-[9px] px-[var(--deframe-widget-size-padding-x-sm)] pl-[14px]",
6433
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
6434
+ "cursor-pointer",
6435
+ "outline-none",
6436
+ "mb-[var(--deframe-widget-size-gap-none)].5",
6437
+ "transition-[background] duration-150"
6438
+ ].join(" ");
6439
+ const stateClasses = {
6440
+ 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)]",
6441
+ default: "bg-transparent hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]"
6442
+ };
6443
+ const rowClasses = twMerge(baseClasses, stateClasses[selected ? "selected" : "default"]);
6444
+ const nameClasses = [
6445
+ "text-[14px] [font-weight:var(--deframe-widget-font-weight-medium)]",
6446
+ selected ? "text-[color:var(--deframe-widget-color-text-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)]"
6447
+ ].join(" ");
6448
+ return /* @__PURE__ */ jsxs(
6449
+ motion.div,
6450
+ {
6451
+ "data-test-id": "network-row",
6452
+ role: "option",
6453
+ "aria-selected": selected,
6454
+ "aria-label": network.name,
6455
+ tabIndex: 0,
6456
+ onClick,
6457
+ onKeyDown,
6458
+ "data-chain-index": index,
6459
+ className: rowClasses,
6460
+ children: [
6461
+ selected && /* @__PURE__ */ jsx(
6462
+ motion.div,
6463
+ {
6464
+ "data-test-id": "network-row-accent",
6465
+ layoutId: "chain-accent",
6466
+ className: "absolute left-0 top-2 bottom-2 w-[3px] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-brand-primary)]",
6467
+ transition: { type: "spring", stiffness: 400, damping: 30 }
6468
+ }
6469
+ ),
6470
+ /* @__PURE__ */ jsx(
6471
+ IconCircle2,
6472
+ {
6473
+ iconUrl: network.iconUrl,
6474
+ name: network.name,
6475
+ size: 34
6476
+ }
6477
+ ),
6478
+ /* @__PURE__ */ jsxs(
6479
+ "div",
6480
+ {
6481
+ "data-test-id": "network-row-content",
6482
+ className: "flex-1 min-w-0",
6483
+ children: [
6484
+ /* @__PURE__ */ jsx(
6485
+ "div",
6486
+ {
6487
+ "data-test-id": "network-row-name",
6488
+ className: nameClasses,
6489
+ children: network.name
6490
+ }
6491
+ ),
6492
+ hasSignificantBalance(network.balanceUsd) && /* @__PURE__ */ jsx(
6493
+ "div",
6494
+ {
6495
+ "data-test-id": "network-row-balance",
6496
+ className: "text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)] mt-px",
6497
+ children: network.balanceUsd
6498
+ }
6499
+ )
6500
+ ]
6501
+ }
6502
+ )
6503
+ ]
6504
+ }
6505
+ );
6506
+ }
6507
+ function NetworkChip({ network, selected, onClick }) {
6508
+ const baseClasses = [
6509
+ "inline-flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
6510
+ "py-[var(--deframe-widget-size-padding-y-sm)] pl-[var(--deframe-widget-size-padding-x-sm)] pr-[14px]",
6511
+ "rounded-[var(--deframe-widget-size-radius-full)]",
6512
+ "cursor-pointer",
6513
+ "whitespace-nowrap",
6514
+ "transition-all duration-150",
6515
+ "flex-shrink-0",
6516
+ "outline-none",
6517
+ "border"
6518
+ ].join(" ");
6519
+ const stateClasses = {
6520
+ 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)]",
6521
+ default: "border-[color:var(--deframe-widget-color-border-secondary)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]"
6522
+ };
6523
+ const buttonClasses = twMerge(baseClasses, stateClasses[selected ? "selected" : "default"]);
6524
+ const nameLabelClasses = [
6525
+ "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] leading-[1.2]",
6526
+ selected ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-secondary)]"
6527
+ ].join(" ");
6528
+ return /* @__PURE__ */ jsxs(
6529
+ "button",
6530
+ {
6531
+ "data-test-id": "network-chip",
6532
+ onClick,
6533
+ "aria-label": network.name,
6534
+ className: buttonClasses,
6535
+ children: [
6536
+ /* @__PURE__ */ jsx(
6537
+ IconCircle2,
6538
+ {
6539
+ iconUrl: network.iconUrl,
6540
+ name: network.name,
6541
+ size: 24
6542
+ }
6543
+ ),
6544
+ /* @__PURE__ */ jsxs(
6545
+ "div",
6546
+ {
6547
+ "data-test-id": "network-chip-content",
6548
+ className: "text-left",
6549
+ children: [
6550
+ /* @__PURE__ */ jsx(
6551
+ "div",
6552
+ {
6553
+ "data-test-id": "network-chip-label",
6554
+ className: nameLabelClasses,
6555
+ children: network.name
6556
+ }
6557
+ ),
6558
+ hasSignificantBalance(network.balanceUsd) && /* @__PURE__ */ jsx(
6559
+ "div",
6560
+ {
6561
+ "data-test-id": "network-chip-balance",
6562
+ className: "text-[11px] text-[color:var(--deframe-widget-color-text-tertiary)] leading-[1.4]",
6563
+ children: network.balanceUsd
6564
+ }
6565
+ )
6566
+ ]
6567
+ }
6568
+ )
6569
+ ]
6570
+ }
6571
+ );
6572
+ }
6573
+ var SearchInputInline = React6.forwardRef(
6574
+ ({ value, onChange, placeholder, onArrowDown, autoFocus }, ref) => {
6575
+ const inputClasses = [
6576
+ "w-full box-border h-10",
6577
+ "bg-[var(--deframe-widget-color-bg-tertiary)]",
6578
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
6579
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
6580
+ "py-[var(--deframe-widget-size-padding-y-none)] pr-[var(--deframe-widget-size-padding-x-xl)] pl-[14px]",
6581
+ "text-[14px] text-[color:var(--deframe-widget-color-text-primary)]",
6582
+ "outline-none focus:outline-none",
6583
+ "focus:border-[color:var(--deframe-widget-color-brand-primary)]",
6584
+ "transition-colors duration-150",
6585
+ "font-[var(--deframe-widget-font-family)]",
6586
+ "placeholder:text-[color:var(--deframe-widget-color-text-tertiary)]"
6587
+ ].join(" ");
6588
+ return /* @__PURE__ */ jsxs(
6589
+ "div",
6590
+ {
6591
+ "data-test-id": "search-input-wrapper",
6592
+ className: "relative",
6593
+ children: [
6594
+ /* @__PURE__ */ jsx(
6595
+ "input",
6596
+ {
6597
+ "data-test-id": "search-input",
6598
+ ref,
6599
+ type: "text",
6600
+ value,
6601
+ onChange: (e) => onChange(e.target.value),
6602
+ placeholder,
6603
+ "aria-label": placeholder,
6604
+ autoFocus,
6605
+ onKeyDown: (e) => {
6606
+ if (e.key === "ArrowDown") {
6607
+ e.preventDefault();
6608
+ onArrowDown == null ? void 0 : onArrowDown();
6609
+ }
6610
+ },
6611
+ className: inputClasses
6612
+ }
6613
+ ),
6614
+ /* @__PURE__ */ jsx(
6615
+ "div",
6616
+ {
6617
+ "data-test-id": "search-input-icon",
6618
+ className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-[color:var(--deframe-widget-color-text-tertiary)]",
6619
+ children: /* @__PURE__ */ jsxs(
6620
+ "svg",
6621
+ {
6622
+ width: "15",
6623
+ height: "15",
6624
+ viewBox: "0 0 24 24",
6625
+ fill: "none",
6626
+ stroke: "currentColor",
6627
+ strokeWidth: "2",
6628
+ strokeLinecap: "round",
6629
+ "aria-hidden": "true",
6630
+ children: [
6631
+ /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
6632
+ /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
6633
+ ]
6634
+ }
6635
+ )
6636
+ }
6637
+ )
6638
+ ]
6639
+ }
6640
+ );
6641
+ }
6642
+ );
6643
+ SearchInputInline.displayName = "SearchInputInline";
6644
+ function AssetRowInline({
6645
+ token,
6646
+ balance,
6647
+ formatTokenAmount,
6648
+ formatCurrencyValue,
6649
+ onClick,
6650
+ onKeyDown,
6651
+ index
6652
+ }) {
6653
+ var _a;
6654
+ const hasBalance = !!balance && parseFloat(balance.amountInUSD) >= 0.01;
6655
+ const formattedAmount = balance ? formatTokenAmount(balance.amountUI, (_a = token.priceInUSD) != null ? _a : 0, token.decimals) : void 0;
6656
+ const formattedUsd = balance ? formatCurrencyValue(parseFloat(balance.amountInUSD)) : void 0;
6657
+ const baseClasses = [
6658
+ "group",
6659
+ "relative flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
6660
+ "py-[10px] px-[14px]",
6661
+ "rounded-[var(--deframe-widget-size-radius-sm)]",
6662
+ "cursor-pointer outline-none",
6663
+ "transition-[background] duration-150"
6664
+ ].join(" ");
6665
+ const rowClasses = twMerge(baseClasses, "bg-transparent hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_72%,transparent)]");
6666
+ return /* @__PURE__ */ jsxs(
6667
+ "div",
6668
+ {
6669
+ "data-test-id": "asset-row",
6670
+ role: "option",
6671
+ "aria-selected": false,
6672
+ "aria-label": `${token.name} ${token.symbol}`,
6673
+ tabIndex: 0,
6674
+ onClick,
6675
+ onKeyDown,
6676
+ "data-asset-index": index,
6677
+ className: rowClasses,
6678
+ children: [
6679
+ /* @__PURE__ */ jsx(
6680
+ IconCircle2,
6681
+ {
6682
+ iconUrl: token.logoURI,
6683
+ name: token.name,
6684
+ size: 38
6685
+ }
6686
+ ),
6687
+ /* @__PURE__ */ jsxs(
6688
+ "div",
6689
+ {
6690
+ "data-test-id": "asset-row-content",
6691
+ className: "flex-1 min-w-0",
6692
+ children: [
6693
+ /* @__PURE__ */ jsx(
6694
+ "div",
6695
+ {
6696
+ "data-test-id": "asset-row-symbol",
6697
+ className: "text-[14px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]",
6698
+ children: token.symbol
6699
+ }
6700
+ ),
6701
+ /* @__PURE__ */ jsx(
6702
+ "div",
6703
+ {
6704
+ "data-test-id": "asset-row-name",
6705
+ className: "text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] mt-px",
6706
+ children: token.name
6707
+ }
6708
+ )
6709
+ ]
6710
+ }
6711
+ ),
6712
+ hasBalance ? /* @__PURE__ */ jsxs(
6713
+ "div",
6714
+ {
6715
+ "data-test-id": "asset-row-balance",
6716
+ className: "flex-shrink-0 text-right",
6717
+ children: [
6718
+ formattedAmount && /* @__PURE__ */ jsxs(
6719
+ "div",
6720
+ {
6721
+ "data-test-id": "asset-row-balance-amount",
6722
+ className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-primary)]",
6723
+ children: [
6724
+ formattedAmount,
6725
+ " ",
6726
+ /* @__PURE__ */ jsx(
6727
+ "span",
6728
+ {
6729
+ "data-test-id": "asset-row-balance-symbol",
6730
+ className: "text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)] [font-weight:var(--deframe-widget-font-weight-regular)]",
6731
+ children: token.symbol
6732
+ }
6733
+ )
6734
+ ]
6735
+ }
6736
+ ),
6737
+ formattedUsd && /* @__PURE__ */ jsx(
6738
+ "div",
6739
+ {
6740
+ "data-test-id": "asset-row-balance-usd",
6741
+ className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)] mt-[var(--deframe-widget-size-gap-none)].5",
6742
+ children: formattedUsd
6743
+ }
6744
+ )
6745
+ ]
6746
+ }
6747
+ ) : /* @__PURE__ */ jsx(Fragment, {})
6748
+ ]
6749
+ }
6750
+ );
6751
+ }
6752
+ function TokensLoadingState({ label }) {
6753
+ return /* @__PURE__ */ jsx(
6754
+ "div",
6755
+ {
6756
+ "data-test-id": "tokens-loading-state",
6757
+ className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[14px] py-[var(--deframe-widget-size-padding-y-sm)]",
6758
+ children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs(
6759
+ "div",
6760
+ {
6761
+ "data-test-id": `tokens-loading-skeleton-${i}`,
6762
+ className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] animate-pulse",
6763
+ children: [
6764
+ /* @__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" }),
6765
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-[6px]", children: [
6766
+ /* @__PURE__ */ jsx("div", { className: "h-[14px] w-[60%] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-bg-tertiary)]" }),
6767
+ /* @__PURE__ */ jsx("div", { className: "h-[12px] w-[40%] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-bg-tertiary)]" })
6768
+ ] }),
6769
+ /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 flex flex-col items-end gap-[6px]", children: [
6770
+ /* @__PURE__ */ jsx("div", { className: "h-[13px] w-[50px] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-bg-tertiary)]" }),
6771
+ /* @__PURE__ */ jsx("div", { className: "h-[12px] w-[36px] rounded-[var(--deframe-widget-size-radius-xs)] bg-[var(--deframe-widget-color-bg-tertiary)]" })
6772
+ ] })
6773
+ ]
6774
+ },
6775
+ i
6776
+ ))
6777
+ }
6778
+ );
6779
+ }
6780
+ function AssetSearchAndList({
6781
+ query,
6782
+ setQuery,
6783
+ searchRef,
6784
+ assetListRef,
6785
+ displayedTokens,
6786
+ findBalance,
6787
+ formatTokenAmount,
6788
+ formatCurrencyValue,
6789
+ isMobile,
6790
+ onAssetClick,
6791
+ handleAssetKeyDown,
6792
+ isFetching,
6793
+ hasMore,
6794
+ onLoadMore,
6795
+ labels,
6796
+ autoFocus
6797
+ }) {
6798
+ return /* @__PURE__ */ jsxs(
6799
+ "div",
6800
+ {
6801
+ "data-test-id": "search-and-assets",
6802
+ className: "flex flex-col flex-1 overflow-hidden",
6803
+ children: [
6804
+ /* @__PURE__ */ jsx(
6805
+ "div",
6806
+ {
6807
+ "data-test-id": "search-wrapper",
6808
+ className: twMerge(
6809
+ "px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-sm)] flex-shrink-0",
6810
+ isMobile ? "pt-[var(--deframe-widget-size-padding-y-none)]" : "pt-[var(--deframe-widget-size-padding-y-sm)]"
6811
+ ),
6812
+ children: /* @__PURE__ */ jsx(
6813
+ SearchInputInline,
4477
6814
  {
4478
- "data-testid": "swap-history-button",
4479
- type: "button",
4480
- onClick: onHistoryClick,
4481
- className: "flex items-center justify-center w-12 h-12 transition-colors rounded-full cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:text-brand-primary",
4482
- "aria-label": labels.historyAriaLabel,
4483
- children: /* @__PURE__ */ jsx(MdHistory, { className: "w-6 h-6" })
6815
+ ref: searchRef,
6816
+ value: query,
6817
+ onChange: setQuery,
6818
+ placeholder: labels.searchPlaceholder,
6819
+ autoFocus,
6820
+ onArrowDown: () => {
6821
+ var _a, _b;
6822
+ (_b = (_a = assetListRef.current) == null ? void 0 : _a.querySelector("[data-asset-index='0']")) == null ? void 0 : _b.focus();
6823
+ }
4484
6824
  }
4485
6825
  )
4486
- ] }),
4487
- /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-stretch gap-sm", children: [
4488
- /* @__PURE__ */ jsx(SwapFromCardView, __spreadValues({}, fromCard)),
4489
- /* @__PURE__ */ jsx("div", { className: "flex justify-center -my-5 relative z-10", children: /* @__PURE__ */ jsx(
4490
- "button",
6826
+ }
6827
+ ),
6828
+ /* @__PURE__ */ jsx(
6829
+ "div",
6830
+ {
6831
+ "data-test-id": "section-label",
6832
+ 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",
6833
+ children: labels.assetsLabel
6834
+ }
6835
+ ),
6836
+ /* @__PURE__ */ jsx(
6837
+ "div",
6838
+ {
6839
+ ref: assetListRef,
6840
+ role: "listbox",
6841
+ "aria-label": labels.assetsLabel,
6842
+ "data-test-id": "asset-list",
6843
+ 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)]",
6844
+ children: isFetching ? /* @__PURE__ */ jsx(TokensLoadingState, { label: labels.searchingText }) : displayedTokens.length === 0 ? /* @__PURE__ */ jsxs(
6845
+ "div",
4491
6846
  {
4492
- "data-testid": "swap-switch-tokens-button",
4493
- type: "button",
4494
- onClick: onSwitchTokens,
4495
- className: "w-10 h-10 rounded-full bg-brand-secondary shadow-md flex items-center justify-center text-text-primary hover:shadow-lg transition-shadow focus:outline-none focus:ring-2 focus:ring-brand-secondary cursor-pointer",
4496
- "aria-label": switchTokensAriaLabel,
4497
- children: /* @__PURE__ */ jsx(MdOutlineSwapVert, { className: "w-5 h-5" })
6847
+ "data-test-id": "no-results",
6848
+ className: "py-[var(--deframe-widget-size-padding-y-xl)] px-[var(--deframe-widget-size-padding-x-md)] text-center",
6849
+ children: [
6850
+ /* @__PURE__ */ jsx(
6851
+ "div",
6852
+ {
6853
+ "data-test-id": "no-results-title",
6854
+ className: "text-[14px] text-[color:var(--deframe-widget-color-text-secondary)] mb-[var(--deframe-widget-size-gap-xs)]",
6855
+ children: labels.searchEmptyTitle
6856
+ }
6857
+ ),
6858
+ /* @__PURE__ */ jsx(
6859
+ "div",
6860
+ {
6861
+ "data-test-id": "no-results-description",
6862
+ className: "text-[12px] text-[color:var(--deframe-widget-color-text-tertiary)]",
6863
+ children: labels.searchEmptyDescription
6864
+ }
6865
+ )
6866
+ ]
4498
6867
  }
4499
- ) }),
4500
- /* @__PURE__ */ jsx(SwapToCardView, __spreadValues({}, toCard))
4501
- ] }),
4502
- /* @__PURE__ */ jsx(SwapAdvancedSettingsView, __spreadValues({}, advancedSettings)),
4503
- /* @__PURE__ */ jsx("div", { className: "pb-xl", children: /* @__PURE__ */ jsx(SwapQuoteDetailsView, __spreadValues({}, transactionDetails)) })
4504
- ] }) })
6868
+ ) : /* @__PURE__ */ jsxs(Fragment, { children: [
6869
+ displayedTokens.map((token, i) => /* @__PURE__ */ jsx(
6870
+ AssetRowInline,
6871
+ {
6872
+ token,
6873
+ balance: findBalance(token),
6874
+ formatTokenAmount,
6875
+ formatCurrencyValue,
6876
+ onClick: () => onAssetClick(token),
6877
+ onKeyDown: (e) => handleAssetKeyDown(e, token, i),
6878
+ index: i
6879
+ },
6880
+ `${token.chainId}-${token.address}-${i}`
6881
+ )),
6882
+ hasMore && /* @__PURE__ */ jsx(
6883
+ "div",
6884
+ {
6885
+ "data-test-id": "load-more-wrapper",
6886
+ className: "flex justify-center py-[var(--deframe-widget-size-padding-y-sm)]",
6887
+ children: /* @__PURE__ */ jsx(
6888
+ "button",
6889
+ {
6890
+ "data-test-id": "load-more-button",
6891
+ "aria-label": labels.loadMoreButton,
6892
+ onClick: onLoadMore,
6893
+ className: [
6894
+ "text-[13px] [font-weight:var(--deframe-widget-font-weight-medium)]",
6895
+ "text-[color:var(--deframe-widget-color-brand-primary)]",
6896
+ "bg-transparent border-none cursor-pointer outline-none",
6897
+ "hover:underline",
6898
+ "font-[var(--deframe-widget-font-family)]"
6899
+ ].join(" "),
6900
+ children: labels.loadMoreButton
6901
+ }
6902
+ )
6903
+ }
6904
+ )
6905
+ ] })
6906
+ }
6907
+ )
6908
+ ]
6909
+ }
6910
+ );
6911
+ }
6912
+ function ChooseNetworkAndAssetViewSimple({
6913
+ isOpen,
6914
+ onClose,
6915
+ networks,
6916
+ selectedNetwork,
6917
+ onNetworkSelect,
6918
+ displayedTokens,
6919
+ findBalance,
6920
+ formatTokenAmount,
6921
+ formatCurrencyValue,
6922
+ onAssetClick,
6923
+ onSearch,
6924
+ autoFocus,
6925
+ hasMore,
6926
+ onLoadMore,
6927
+ isFetching,
6928
+ labels
6929
+ }) {
6930
+ var _a;
6931
+ const [query, setQuery] = React6.useState("");
6932
+ const searchRef = React6.useRef(null);
6933
+ const chainListRef = React6.useRef(null);
6934
+ const assetListRef = React6.useRef(null);
6935
+ const isMobile = useIsMobile();
6936
+ const activeNetwork = (_a = selectedNetwork != null ? selectedNetwork : networks[0]) != null ? _a : null;
6937
+ const handleQueryChange = React6.useCallback((q) => {
6938
+ setQuery(q);
6939
+ onSearch(q);
6940
+ }, [onSearch]);
6941
+ const handleNetworkSelect = React6.useCallback((network) => {
6942
+ var _a2;
6943
+ setQuery("");
6944
+ onSearch("");
6945
+ onNetworkSelect(network);
6946
+ (_a2 = searchRef.current) == null ? void 0 : _a2.focus();
6947
+ }, [onSearch, onNetworkSelect]);
6948
+ React6.useEffect(() => {
6949
+ if (!isOpen) return;
6950
+ const onKey = (e) => {
6951
+ if (e.key === "Escape") onClose();
6952
+ };
6953
+ window.addEventListener("keydown", onKey);
6954
+ return () => window.removeEventListener("keydown", onKey);
6955
+ }, [isOpen, onClose]);
6956
+ React6.useEffect(() => {
6957
+ if (isOpen && autoFocus) {
6958
+ const id = requestAnimationFrame(() => {
6959
+ var _a2;
6960
+ return (_a2 = searchRef.current) == null ? void 0 : _a2.focus();
6961
+ });
6962
+ return () => cancelAnimationFrame(id);
6963
+ }
6964
+ }, [isOpen, autoFocus]);
6965
+ const handleChainKeyDown = React6.useCallback((e, network, idx) => {
6966
+ var _a2, _b, _c, _d;
6967
+ if (e.key === "Enter" || e.key === " ") {
6968
+ e.preventDefault();
6969
+ handleNetworkSelect(network);
6970
+ }
6971
+ if (e.key === "ArrowDown") {
6972
+ e.preventDefault();
6973
+ (_b = (_a2 = chainListRef.current) == null ? void 0 : _a2.querySelector(`[data-chain-index="${idx + 1}"]`)) == null ? void 0 : _b.focus();
6974
+ }
6975
+ if (e.key === "ArrowUp") {
6976
+ e.preventDefault();
6977
+ (_d = (_c = chainListRef.current) == null ? void 0 : _c.querySelector(`[data-chain-index="${idx - 1}"]`)) == null ? void 0 : _d.focus();
6978
+ }
6979
+ }, [handleNetworkSelect]);
6980
+ const handleAssetKeyDown = React6.useCallback((e, token, idx) => {
6981
+ var _a2, _b, _c, _d, _e;
6982
+ if (e.key === "Enter" || e.key === " ") {
6983
+ e.preventDefault();
6984
+ onAssetClick(token);
6985
+ }
6986
+ if (e.key === "ArrowDown") {
6987
+ e.preventDefault();
6988
+ (_b = (_a2 = assetListRef.current) == null ? void 0 : _a2.querySelector(`[data-asset-index="${idx + 1}"]`)) == null ? void 0 : _b.focus();
6989
+ }
6990
+ if (e.key === "ArrowUp") {
6991
+ e.preventDefault();
6992
+ if (idx === 0) {
6993
+ (_c = searchRef.current) == null ? void 0 : _c.focus();
6994
+ return;
4505
6995
  }
4506
- ),
4507
- /* @__PURE__ */ jsx(
4508
- "div",
6996
+ (_e = (_d = assetListRef.current) == null ? void 0 : _d.querySelector(`[data-asset-index="${idx - 1}"]`)) == null ? void 0 : _e.focus();
6997
+ }
6998
+ }, [onAssetClick]);
6999
+ const content = isOpen ? renderContent() : null;
7000
+ return /* @__PURE__ */ jsx(AnimatePresence, { children: content });
7001
+ function renderContent() {
7002
+ const sharedSearchAssets = /* @__PURE__ */ jsx(
7003
+ AssetSearchAndList,
4509
7004
  {
4510
- "data-testid": "swap-flow-footer",
4511
- className: "border-t p-md border-border-default dark:border-border-default-dark bg-bg-primary dark:bg-bg-primary-dark",
4512
- children: /* @__PURE__ */ jsx(ConfirmSwapButtonView, __spreadValues({}, confirmButton))
7005
+ query,
7006
+ setQuery: handleQueryChange,
7007
+ searchRef,
7008
+ assetListRef,
7009
+ displayedTokens,
7010
+ findBalance,
7011
+ formatTokenAmount,
7012
+ formatCurrencyValue,
7013
+ isMobile,
7014
+ onAssetClick,
7015
+ handleAssetKeyDown,
7016
+ isFetching,
7017
+ hasMore,
7018
+ onLoadMore,
7019
+ labels,
7020
+ autoFocus
4513
7021
  }
4514
- )
4515
- ] });
4516
- };
4517
- var ChooseANetworkView = ({
4518
- labels,
4519
- autoFocus = true,
4520
- chains,
4521
- pageSize = 10,
4522
- onChainClick
4523
- }) => {
4524
- const [searchValue, setSearchValue] = useState("");
4525
- const [page, setPage] = useState(1);
4526
- useEffect(() => {
4527
- setPage(1);
4528
- }, [searchValue]);
4529
- const filteredChains = chains.filter(
4530
- (chain) => chain.name.toLowerCase().includes(searchValue.toLowerCase())
4531
- );
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,
7022
+ );
7023
+ if (isMobile) {
7024
+ return /* @__PURE__ */ jsx(
7025
+ motion.div,
4540
7026
  {
4541
- value: searchValue,
4542
- onChange: setSearchValue,
4543
- placeholder: labels.searchPlaceholder,
4544
- autoFocus
4545
- }
4546
- )
4547
- ] }),
4548
- /* @__PURE__ */ jsxs(
4549
- "div",
4550
- {
4551
- "data-testid": "choose-a-network-list",
4552
- 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",
4553
- children: [
4554
- displayedChains.map((chain) => /* @__PURE__ */ jsxs(
4555
- ListItem,
7027
+ initial: { opacity: 0 },
7028
+ animate: { opacity: 1 },
7029
+ exit: { opacity: 0 },
7030
+ transition: { duration: 0.2 },
7031
+ onClick: onClose,
7032
+ "data-test-id": "backdrop",
7033
+ 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",
7034
+ children: /* @__PURE__ */ jsxs(
7035
+ motion.div,
4556
7036
  {
4557
- className: "w-full flex-shrink-0",
4558
- onClick: () => onChainClick(chain.chainId),
4559
- "data-testid": `choose-network-item-${chain.chainId}`,
4560
- "data-chain-id": chain.chainId,
7037
+ role: "dialog",
7038
+ "aria-modal": "true",
7039
+ "aria-label": labels.title,
7040
+ initial: { y: "100%" },
7041
+ animate: { y: 0 },
7042
+ exit: { y: "100%" },
7043
+ transition: { type: "spring", stiffness: 320, damping: 32, mass: 0.8 },
7044
+ onClick: (e) => e.stopPropagation(),
7045
+ "data-test-id": "sheet",
7046
+ className: [
7047
+ "bg-[var(--deframe-widget-color-bg-secondary)] flex flex-col overflow-hidden",
7048
+ "rounded-t-[var(--deframe-widget-size-radius-lg)]",
7049
+ "border border-[color:var(--deframe-widget-color-border-secondary)] border-b-0",
7050
+ "shadow-[0px_4px_16px_0px_#00000066,0px_24px_80px_0px_#00000099]",
7051
+ "max-h-[88vh]"
7052
+ ].join(" "),
4561
7053
  children: [
4562
- /* @__PURE__ */ jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsx(
4563
- "img",
7054
+ /* @__PURE__ */ jsx(
7055
+ "div",
4564
7056
  {
4565
- src: chain.imageUrl,
4566
- alt: chain.name,
4567
- className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]"
7057
+ "data-test-id": "drag-handle",
7058
+ className: "flex justify-center pt-[var(--deframe-widget-size-padding-y-sm)] pb-[var(--deframe-widget-size-padding-y-xs)].5 flex-shrink-0",
7059
+ children: /* @__PURE__ */ jsx("div", { className: "w-9 h-1 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-border-primary)]" })
4568
7060
  }
4569
- ) }),
4570
- /* @__PURE__ */ jsx(ListItemContent, { children: /* @__PURE__ */ jsx(TextBody, { children: chain.name }) })
7061
+ ),
7062
+ /* @__PURE__ */ jsxs(
7063
+ "div",
7064
+ {
7065
+ "data-test-id": "sheet-header",
7066
+ 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",
7067
+ children: [
7068
+ /* @__PURE__ */ jsx(
7069
+ "span",
7070
+ {
7071
+ "data-test-id": "sheet-title",
7072
+ 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)]",
7073
+ children: labels.title
7074
+ }
7075
+ ),
7076
+ /* @__PURE__ */ jsx(CloseButtonInline, { onClick: onClose, ariaLabel: labels.closeAriaLabel })
7077
+ ]
7078
+ }
7079
+ ),
7080
+ /* @__PURE__ */ jsxs(
7081
+ "div",
7082
+ {
7083
+ "data-test-id": "network-section",
7084
+ className: "flex-shrink-0 pb-[var(--deframe-widget-size-padding-y-sm)].5",
7085
+ children: [
7086
+ /* @__PURE__ */ jsx(
7087
+ "div",
7088
+ {
7089
+ "data-test-id": "network-section-label",
7090
+ 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)]",
7091
+ children: labels.networksLabel
7092
+ }
7093
+ ),
7094
+ /* @__PURE__ */ jsx(
7095
+ "div",
7096
+ {
7097
+ ref: chainListRef,
7098
+ role: "listbox",
7099
+ "aria-label": labels.networksLabel,
7100
+ "data-test-id": "network-chip-list",
7101
+ 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]",
7102
+ children: networks.map((network) => /* @__PURE__ */ jsx(
7103
+ NetworkChip,
7104
+ {
7105
+ network,
7106
+ selected: (activeNetwork == null ? void 0 : activeNetwork.chainId) === network.chainId,
7107
+ onClick: () => handleNetworkSelect(network)
7108
+ },
7109
+ network.chainId
7110
+ ))
7111
+ }
7112
+ )
7113
+ ]
7114
+ }
7115
+ ),
7116
+ /* @__PURE__ */ jsx(
7117
+ "div",
7118
+ {
7119
+ "data-test-id": "divider",
7120
+ className: "h-px bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0"
7121
+ }
7122
+ ),
7123
+ /* @__PURE__ */ jsx(
7124
+ "div",
7125
+ {
7126
+ "data-test-id": "sheet-body",
7127
+ className: "flex-1 flex flex-col overflow-hidden pt-[var(--deframe-widget-size-padding-y-xs)]",
7128
+ children: sharedSearchAssets
7129
+ }
7130
+ )
4571
7131
  ]
4572
- },
4573
- `chain-${chain.chainId}`
4574
- )),
4575
- 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 }) })
4576
- ]
4577
- }
4578
- )
4579
- ] }) });
4580
- };
7132
+ }
7133
+ )
7134
+ },
7135
+ "mobile"
7136
+ );
7137
+ }
7138
+ return /* @__PURE__ */ jsx(
7139
+ motion.div,
7140
+ {
7141
+ initial: { opacity: 0 },
7142
+ animate: { opacity: 1 },
7143
+ exit: { opacity: 0 },
7144
+ transition: { duration: 0.2 },
7145
+ onClick: onClose,
7146
+ "data-test-id": "backdrop",
7147
+ 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)]",
7148
+ children: /* @__PURE__ */ jsxs(
7149
+ motion.div,
7150
+ {
7151
+ role: "dialog",
7152
+ "aria-modal": "true",
7153
+ "aria-label": labels.title,
7154
+ initial: { opacity: 0, scale: 0.96 },
7155
+ animate: { opacity: 1, scale: 1 },
7156
+ exit: { opacity: 0, scale: 0.96 },
7157
+ transition: { duration: 0.2, ease: "easeOut" },
7158
+ onClick: (e) => e.stopPropagation(),
7159
+ "data-test-id": "modal",
7160
+ className: [
7161
+ "w-[min(680px,calc(100vw-32px))]",
7162
+ "h-[min(620px,calc(100vh-64px))]",
7163
+ "bg-[var(--deframe-widget-color-bg-secondary)]",
7164
+ "border border-[color:var(--deframe-widget-color-border-secondary)]",
7165
+ "rounded-[var(--deframe-widget-size-radius-md)]",
7166
+ "shadow-[0px_4px_16px_0px_#00000066,0px_24px_80px_0px_#00000099]",
7167
+ "flex flex-col overflow-hidden"
7168
+ ].join(" "),
7169
+ children: [
7170
+ /* @__PURE__ */ jsxs(
7171
+ "div",
7172
+ {
7173
+ "data-test-id": "modal-header",
7174
+ 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",
7175
+ children: [
7176
+ /* @__PURE__ */ jsx(
7177
+ "span",
7178
+ {
7179
+ "data-test-id": "modal-title",
7180
+ 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)]",
7181
+ children: labels.title
7182
+ }
7183
+ ),
7184
+ /* @__PURE__ */ jsx(CloseButtonInline, { onClick: onClose, ariaLabel: labels.closeAriaLabel })
7185
+ ]
7186
+ }
7187
+ ),
7188
+ /* @__PURE__ */ jsxs(
7189
+ "div",
7190
+ {
7191
+ "data-test-id": "modal-body",
7192
+ className: "flex flex-1 overflow-hidden",
7193
+ children: [
7194
+ /* @__PURE__ */ jsxs(
7195
+ "div",
7196
+ {
7197
+ "data-test-id": "network-sidebar",
7198
+ className: [
7199
+ "w-[210px] flex-shrink-0",
7200
+ "border-r border-[color:var(--deframe-widget-color-border-secondary)]",
7201
+ "bg-[#12151C]",
7202
+ "flex flex-col overflow-hidden"
7203
+ ].join(" "),
7204
+ children: [
7205
+ /* @__PURE__ */ jsx(
7206
+ "div",
7207
+ {
7208
+ "data-test-id": "network-sidebar-label",
7209
+ 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",
7210
+ children: labels.networksLabel
7211
+ }
7212
+ ),
7213
+ /* @__PURE__ */ jsx(
7214
+ "div",
7215
+ {
7216
+ ref: chainListRef,
7217
+ role: "listbox",
7218
+ "aria-label": labels.networksLabel,
7219
+ "data-test-id": "network-list",
7220
+ 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)]",
7221
+ children: networks.map((network, i) => /* @__PURE__ */ jsx(
7222
+ NetworkRow,
7223
+ {
7224
+ network,
7225
+ selected: (activeNetwork == null ? void 0 : activeNetwork.chainId) === network.chainId,
7226
+ onClick: () => handleNetworkSelect(network),
7227
+ onKeyDown: (e) => handleChainKeyDown(e, network, i),
7228
+ index: i
7229
+ },
7230
+ network.chainId
7231
+ ))
7232
+ }
7233
+ )
7234
+ ]
7235
+ }
7236
+ ),
7237
+ /* @__PURE__ */ jsx(
7238
+ "div",
7239
+ {
7240
+ "data-test-id": "asset-panel",
7241
+ className: "flex-1 flex flex-col overflow-hidden",
7242
+ children: sharedSearchAssets
7243
+ }
7244
+ )
7245
+ ]
7246
+ }
7247
+ )
7248
+ ]
7249
+ }
7250
+ )
7251
+ },
7252
+ "desktop"
7253
+ );
7254
+ }
7255
+ }
4581
7256
  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
7257
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-1 min-w-0", children: [
4583
7258
  /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-[var(--deframe-widget-color-bg-tertiary)] animate-pulse flex-shrink-0" }),
@@ -4823,7 +7498,10 @@ var WalletBalances = ({ cards, variant = "subtle", className }) => {
4823
7498
  const bgClass = variant === "raised" ? "bg-[var(--deframe-widget-color-bg-raised)]" : "bg-[var(--deframe-widget-color-bg-subtle)]";
4824
7499
  return /* @__PURE__ */ jsx("div", { className: twMerge("w-full flex flex-row gap-4 mt-md", className), children: cards.map((card) => /* @__PURE__ */ jsxs("div", { className: twMerge("flex-1 h-auto px-6 py-4 rounded shadow-sm flex flex-col items-start justify-start gap-xs", bgClass), children: [
4825
7500
  /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: card.label }),
4826
- /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: card.value })
7501
+ card.badge ? /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-xs md:flex-row md:items-end md:gap-[var(--deframe-widget-size-gap-md)]", children: [
7502
+ /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: card.value }),
7503
+ /* @__PURE__ */ jsx("div", { className: "md:pl-[var(--deframe-widget-size-padding-x-md)]", children: card.badge })
7504
+ ] }) : /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: card.value })
4827
7505
  ] }, card.label)) });
4828
7506
  };
4829
7507
  var HistoryTabEmpty = ({ title, description }) => /* @__PURE__ */ jsx("div", { className: "w-full h-[90vh] py-md bg-bg-default dark:bg-bg-default-dark rounded-lg flex flex-col justify-center items-center gap-sm overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-md", children: [
@@ -4916,6 +7594,8 @@ var EarnInvestmentSummaryView = ({
4916
7594
  totalInvestedValue,
4917
7595
  totalReturnLabel,
4918
7596
  totalReturnValue,
7597
+ processingBadgeLabel,
7598
+ processingBadgeTitle,
4919
7599
  className
4920
7600
  }) => {
4921
7601
  return /* @__PURE__ */ jsxs("section", { className: twMerge("flex flex-col gap-md p-lg bg-bg-subtle dark:bg-bg-subtle-dark rounded", className), children: [
@@ -4924,7 +7604,17 @@ var EarnInvestmentSummaryView = ({
4924
7604
  WalletBalances,
4925
7605
  {
4926
7606
  cards: [
4927
- { label: totalInvestedLabel, value: totalInvestedValue },
7607
+ {
7608
+ label: totalInvestedLabel,
7609
+ value: totalInvestedValue,
7610
+ badge: processingBadgeLabel ? /* @__PURE__ */ jsx(
7611
+ ProcessingBadge,
7612
+ {
7613
+ label: processingBadgeLabel,
7614
+ title: processingBadgeTitle
7615
+ }
7616
+ ) : void 0
7617
+ },
4928
7618
  { label: totalReturnLabel, value: totalReturnValue }
4929
7619
  ],
4930
7620
  variant: "raised",
@@ -5351,7 +8041,7 @@ var DateLabel = ({ children }) => {
5351
8041
  var ArrowBadge = ({ isDeposit }) => {
5352
8042
  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
8043
  };
5354
- var TokenIconWithBadge = ({ src, alt, isDeposit }) => {
8044
+ var TokenIconWithBadge2 = ({ src, alt, isDeposit }) => {
5355
8045
  const fallbackText = encodeURIComponent((alt || "TOK").slice(0, 3).toUpperCase());
5356
8046
  const fallbackSrc = `https://placehold.co/40x40?text=${fallbackText}`;
5357
8047
  const resolvedSrc = src || fallbackSrc;
@@ -5415,7 +8105,7 @@ var HistoryListView = ({
5415
8105
  containerClassName: twMerge("!rounded-xs !border-0 !min-h-[72px]", itemClassName),
5416
8106
  children: [
5417
8107
  /* @__PURE__ */ jsx(ListItemLeftSide, { children: item.isSwap ? /* @__PURE__ */ jsx(SwapIconWithBadge, { src: item.iconUrl, alt: item.iconAlt }) : /* @__PURE__ */ jsx(
5418
- TokenIconWithBadge,
8108
+ TokenIconWithBadge2,
5419
8109
  {
5420
8110
  src: item.iconUrl,
5421
8111
  alt: item.iconAlt,
@@ -5424,7 +8114,15 @@ var HistoryListView = ({
5424
8114
  ) }),
5425
8115
  /* @__PURE__ */ jsxs(ListItemContent, { children: [
5426
8116
  /* @__PURE__ */ jsx(Label, { className: "text-text-lg-mobile", children: item.title }),
5427
- /* @__PURE__ */ jsx(Label, { variant: "secondary", className: "text-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle })
8117
+ /* @__PURE__ */ jsx(Label, { variant: "secondary", className: "text-text-tertiary dark:text-text-tertiary-dark", children: item.subtitle }),
8118
+ item.status === "PENDING" && item.statusLabel ? /* @__PURE__ */ jsx("div", { className: "mt-[6px]", children: /* @__PURE__ */ jsx(
8119
+ ProcessingBadge,
8120
+ {
8121
+ label: item.statusLabel,
8122
+ title: item.statusTitle,
8123
+ size: "compact"
8124
+ }
8125
+ ) }) : null
5428
8126
  ] }),
5429
8127
  /* @__PURE__ */ jsx(ListItemRightSide, { children: /* @__PURE__ */ jsx(AmountDisplay, { amount: item.amountFormatted, usdAmount: item.amountUsd }) })
5430
8128
  ]
@@ -5438,12 +8136,15 @@ var HistoryListView = ({
5438
8136
  var EarnTokenSelectorView = ({
5439
8137
  selectedToken,
5440
8138
  onTokenClick,
8139
+ onNetworkClick,
5441
8140
  isLoading,
5442
8141
  selectTokenLabel,
5443
8142
  chainLabel,
5444
8143
  chainImage,
5445
8144
  chainDirectionLabel,
5446
- chainDisabledTitle
8145
+ chainDisabledTitle,
8146
+ isNetworkDisabled = false,
8147
+ currentNetworkSelected
5447
8148
  }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[10px]", children: [
5448
8149
  /* @__PURE__ */ jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsx(
5449
8150
  "button",
@@ -5473,13 +8174,14 @@ var EarnTokenSelectorView = ({
5473
8174
  "button",
5474
8175
  {
5475
8176
  type: "button",
5476
- disabled: true,
8177
+ onClick: () => onNetworkClick == null ? void 0 : onNetworkClick(currentNetworkSelected),
8178
+ disabled: isNetworkDisabled,
5477
8179
  title: chainDisabledTitle,
5478
- className: "bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-secondary)] rounded-lg flex gap-[var(--deframe-widget-size-gap-xs)] items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-60 cursor-not-allowed",
8180
+ className: `bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-secondary)] rounded-lg flex gap-[var(--deframe-widget-size-gap-xs)] items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] transition-colors ${isNetworkDisabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer hover:border-[var(--deframe-widget-color-border-primary)]"}`,
5479
8181
  children: [
5480
8182
  chainImage && /* @__PURE__ */ jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
5481
8183
  /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
5482
- /* @__PURE__ */ jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center opacity-50", children: /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
8184
+ /* @__PURE__ */ jsx("div", { className: `w-[18px] h-[18px] flex items-center justify-center ${isNetworkDisabled ? "opacity-50" : ""}`, children: /* @__PURE__ */ jsx(HiChevronDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
5483
8185
  ]
5484
8186
  }
5485
8187
  )
@@ -5529,11 +8231,14 @@ var EarnPercentageButtonsView = ({
5529
8231
  var EarnWithdrawTokenSelectorView = ({
5530
8232
  selectedToken,
5531
8233
  onTokenClick,
8234
+ onNetworkClick,
5532
8235
  selectTokenLabel,
5533
8236
  chainLabel,
5534
8237
  chainImage,
5535
8238
  chainDirectionLabel,
5536
- chainDisabledTitle
8239
+ chainDisabledTitle,
8240
+ isNetworkDisabled = false,
8241
+ currentNetworkSelected
5537
8242
  }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[10px]", children: [
5538
8243
  /* @__PURE__ */ jsx("div", { className: "flex gap-[10px] w-full", children: /* @__PURE__ */ jsx(
5539
8244
  "button",
@@ -5563,13 +8268,14 @@ var EarnWithdrawTokenSelectorView = ({
5563
8268
  "button",
5564
8269
  {
5565
8270
  type: "button",
5566
- disabled: true,
8271
+ onClick: () => onNetworkClick == null ? void 0 : onNetworkClick(currentNetworkSelected),
8272
+ disabled: isNetworkDisabled,
5567
8273
  title: chainDisabledTitle,
5568
- className: "bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-secondary)] rounded-lg flex gap-[var(--deframe-widget-size-gap-xs)] items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] opacity-60 cursor-not-allowed",
8274
+ className: `bg-[var(--deframe-widget-color-bg-tertiary)] border border-[var(--deframe-widget-color-border-secondary)] rounded-lg flex gap-[var(--deframe-widget-size-gap-xs)] items-center px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)] transition-colors ${isNetworkDisabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer hover:border-[var(--deframe-widget-color-border-primary)]"}`,
5569
8275
  children: [
5570
8276
  chainImage && /* @__PURE__ */ jsx("img", { src: chainImage, alt: "", className: "w-3 h-3 rounded-full" }),
5571
8277
  /* @__PURE__ */ jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: chainLabel }),
5572
- /* @__PURE__ */ jsx("div", { className: "w-[18px] h-[18px] flex items-center justify-center opacity-50", children: /* @__PURE__ */ jsx(MdArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
8278
+ /* @__PURE__ */ jsx("div", { className: `w-[18px] h-[18px] flex items-center justify-center ${isNetworkDisabled ? "opacity-50" : ""}`, children: /* @__PURE__ */ jsx(MdArrowDropDown, { className: "w-3 h-3 text-[color:var(--deframe-widget-color-text-tertiary)]" }) })
5573
8279
  ]
5574
8280
  }
5575
8281
  )
@@ -5657,6 +8363,9 @@ var EarnDepositFormView = ({
5657
8363
  chainImage,
5658
8364
  chainDirectionLabel,
5659
8365
  chainDisabledTitle,
8366
+ onNetworkClick,
8367
+ isNetworkDisabled,
8368
+ currentNetworkSelected,
5660
8369
  // Amount input
5661
8370
  amountValue,
5662
8371
  onAmountChange,
@@ -5709,7 +8418,10 @@ var EarnDepositFormView = ({
5709
8418
  chainLabel,
5710
8419
  chainImage,
5711
8420
  chainDirectionLabel,
5712
- chainDisabledTitle
8421
+ chainDisabledTitle,
8422
+ onNetworkClick,
8423
+ isNetworkDisabled,
8424
+ currentNetworkSelected
5713
8425
  }
5714
8426
  ),
5715
8427
  /* @__PURE__ */ jsx(
@@ -5795,6 +8507,9 @@ var EarnWithdrawFormView = ({
5795
8507
  chainImage,
5796
8508
  chainDirectionLabel,
5797
8509
  chainDisabledTitle,
8510
+ onNetworkClick,
8511
+ isNetworkDisabled,
8512
+ currentNetworkSelected,
5798
8513
  // Amount input
5799
8514
  amountValue,
5800
8515
  onAmountChange,
@@ -5850,7 +8565,10 @@ var EarnWithdrawFormView = ({
5850
8565
  chainLabel,
5851
8566
  chainImage,
5852
8567
  chainDirectionLabel,
5853
- chainDisabledTitle
8568
+ chainDisabledTitle,
8569
+ onNetworkClick,
8570
+ isNetworkDisabled,
8571
+ currentNetworkSelected
5854
8572
  }
5855
8573
  ),
5856
8574
  /* @__PURE__ */ jsx(
@@ -6419,6 +9137,6 @@ var EarnWithdrawFailedView = ({
6419
9137
  );
6420
9138
  };
6421
9139
 
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 };
9140
+ 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, InvestmentCrossChainProcessingView, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, PercentageButton, PrimaryButton, ProcessingBadge, 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
9141
  //# sourceMappingURL=index.mjs.map
6424
9142
  //# sourceMappingURL=index.mjs.map