@unifold/ui-react 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +82 -47
- package/dist/index.d.ts +82 -47
- package/dist/index.js +886 -541
- package/dist/index.mjs +882 -539
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -35,6 +35,7 @@ __export(index_exports, {
|
|
|
35
35
|
CurrencyListItem: () => CurrencyListItem,
|
|
36
36
|
CurrencyListSection: () => CurrencyListSection,
|
|
37
37
|
CurrencyModal: () => CurrencyModal,
|
|
38
|
+
DepositDetailModal: () => DepositDetailModal,
|
|
38
39
|
DepositExecutionItem: () => DepositExecutionItem,
|
|
39
40
|
DepositHeader: () => DepositHeader,
|
|
40
41
|
DepositModal: () => DepositModal,
|
|
@@ -81,6 +82,7 @@ __export(index_exports, {
|
|
|
81
82
|
getApiBaseUrl: () => getApiBaseUrl,
|
|
82
83
|
getFiatCurrencies: () => getFiatCurrencies,
|
|
83
84
|
getIconUrl: () => getIconUrl,
|
|
85
|
+
getIconUrlWithCdn: () => getIconUrlWithCdn,
|
|
84
86
|
getMeldQuotes: () => getMeldQuotes,
|
|
85
87
|
getSupportedDepositTokens: () => getSupportedDepositTokens,
|
|
86
88
|
getWalletByChainType: () => getWalletByChainType,
|
|
@@ -94,6 +96,7 @@ module.exports = __toCommonJS(index_exports);
|
|
|
94
96
|
|
|
95
97
|
// src/components/deposits/DepositModal.tsx
|
|
96
98
|
var import_react6 = require("react");
|
|
99
|
+
var import_lucide_react14 = require("lucide-react");
|
|
97
100
|
|
|
98
101
|
// src/components/shared/dialog.tsx
|
|
99
102
|
var React2 = __toESM(require("react"));
|
|
@@ -234,7 +237,7 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
|
|
234
237
|
|
|
235
238
|
// src/components/deposits/TransferCryptoBase.tsx
|
|
236
239
|
var import_react3 = require("react");
|
|
237
|
-
var
|
|
240
|
+
var import_lucide_react7 = require("lucide-react");
|
|
238
241
|
|
|
239
242
|
// src/components/deposits/StyledQRCode.tsx
|
|
240
243
|
var import_react = require("react");
|
|
@@ -392,6 +395,14 @@ function getIconUrl(iconPath) {
|
|
|
392
395
|
const normalizedPath = iconPath.startsWith("/") ? iconPath : `/${iconPath}`;
|
|
393
396
|
return `${API_BASE_URL}/api/public${normalizedPath}`;
|
|
394
397
|
}
|
|
398
|
+
function getIconUrlWithCdn(iconPath, assetCdnUrl) {
|
|
399
|
+
if (!assetCdnUrl) {
|
|
400
|
+
return getIconUrl(iconPath);
|
|
401
|
+
}
|
|
402
|
+
const normalizedPath = iconPath.startsWith("/") ? iconPath : `/${iconPath}`;
|
|
403
|
+
const baseUrl = assetCdnUrl.endsWith("/") ? assetCdnUrl.slice(0, -1) : assetCdnUrl;
|
|
404
|
+
return `${baseUrl}/api/public${normalizedPath}`;
|
|
405
|
+
}
|
|
395
406
|
async function createEOA(overrides, publishableKey) {
|
|
396
407
|
if (!overrides?.user_id) {
|
|
397
408
|
throw new Error("user_id is required");
|
|
@@ -510,6 +521,16 @@ async function createMeldSession(request, publishableKey) {
|
|
|
510
521
|
}
|
|
511
522
|
return response.json();
|
|
512
523
|
}
|
|
524
|
+
function getPreferredIconUrl(iconUrls, preferredFormat = "svg") {
|
|
525
|
+
if (!iconUrls || iconUrls.length === 0) {
|
|
526
|
+
return void 0;
|
|
527
|
+
}
|
|
528
|
+
const preferred = iconUrls.find((icon) => icon.format === preferredFormat);
|
|
529
|
+
if (preferred) {
|
|
530
|
+
return preferred.url;
|
|
531
|
+
}
|
|
532
|
+
return iconUrls[0]?.url;
|
|
533
|
+
}
|
|
513
534
|
async function getFiatCurrencies(publishableKey) {
|
|
514
535
|
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
515
536
|
const response = await fetch(
|
|
@@ -527,54 +548,84 @@ async function getFiatCurrencies(publishableKey) {
|
|
|
527
548
|
}
|
|
528
549
|
return response.json();
|
|
529
550
|
}
|
|
551
|
+
async function getProjectConfig(publishableKey) {
|
|
552
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
553
|
+
const response = await fetch(`${API_BASE_URL}/v1/public/projects/config`, {
|
|
554
|
+
method: "GET",
|
|
555
|
+
headers: {
|
|
556
|
+
accept: "application/json",
|
|
557
|
+
"x-publishable-key": pk
|
|
558
|
+
}
|
|
559
|
+
});
|
|
560
|
+
if (!response.ok) {
|
|
561
|
+
throw new Error(`Failed to fetch project config: ${response.statusText}`);
|
|
562
|
+
}
|
|
563
|
+
return response.json();
|
|
564
|
+
}
|
|
530
565
|
|
|
531
566
|
// src/components/deposits/DepositExecutionItem.tsx
|
|
532
567
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
533
568
|
function DepositExecutionItem({
|
|
534
569
|
execution,
|
|
535
|
-
|
|
536
|
-
onClose
|
|
570
|
+
onClick
|
|
537
571
|
}) {
|
|
538
572
|
const isPending = execution.status === "pending" /* PENDING */ || execution.status === "waiting" /* WAITING */ || execution.status === "delayed" /* DELAYED */;
|
|
539
|
-
const formatTxHash = (hash) => {
|
|
540
|
-
if (hash.length <= 12) return hash;
|
|
541
|
-
return `${hash.slice(0, 10)}...${hash.slice(-8)}`;
|
|
542
|
-
};
|
|
543
573
|
const formatDateTime = (timestamp) => {
|
|
544
574
|
try {
|
|
545
575
|
const date = new Date(timestamp);
|
|
546
|
-
|
|
576
|
+
const monthDay = date.toLocaleDateString("en-US", {
|
|
577
|
+
month: "short",
|
|
578
|
+
day: "numeric",
|
|
579
|
+
year: "numeric"
|
|
580
|
+
});
|
|
581
|
+
const time = date.toLocaleTimeString("en-US", {
|
|
547
582
|
hour: "numeric",
|
|
548
583
|
minute: "2-digit",
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
}
|
|
584
|
+
hour12: true
|
|
585
|
+
}).toLowerCase();
|
|
586
|
+
return `${monthDay} at ${time}`;
|
|
552
587
|
} catch {
|
|
553
588
|
return timestamp;
|
|
554
589
|
}
|
|
555
590
|
};
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
591
|
+
const formatUsdAmount = (baseUnitAmount) => {
|
|
592
|
+
try {
|
|
593
|
+
const amount = Number(baseUnitAmount) / 1e6;
|
|
594
|
+
return new Intl.NumberFormat("en-US", {
|
|
595
|
+
style: "currency",
|
|
596
|
+
currency: "USD",
|
|
597
|
+
minimumFractionDigits: 2,
|
|
598
|
+
maximumFractionDigits: 2
|
|
599
|
+
}).format(amount);
|
|
600
|
+
} catch {
|
|
601
|
+
return "$0.00";
|
|
602
|
+
}
|
|
603
|
+
};
|
|
604
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
605
|
+
"button",
|
|
606
|
+
{
|
|
607
|
+
onClick,
|
|
608
|
+
className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-gap-3 hover:uf-bg-secondary/80 uf-transition-colors uf-text-left",
|
|
609
|
+
children: [
|
|
610
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "uf-relative uf-flex-shrink-0 uf-w-9 uf-h-9", children: [
|
|
560
611
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
561
612
|
"img",
|
|
562
613
|
{
|
|
563
614
|
src: execution.source_token_metadata?.icon_url || getIconUrl("/icons/tokens/usdc.svg"),
|
|
564
615
|
alt: "Token",
|
|
565
|
-
width:
|
|
566
|
-
height:
|
|
567
|
-
className: "uf-rounded-full"
|
|
616
|
+
width: 36,
|
|
617
|
+
height: 36,
|
|
618
|
+
className: "uf-rounded-full uf-w-9 uf-h-9"
|
|
568
619
|
}
|
|
569
620
|
),
|
|
570
|
-
isPending ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "uf-absolute uf
|
|
621
|
+
isPending ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-bg-yellow-500 uf-rounded-full uf-p-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
571
622
|
"svg",
|
|
572
623
|
{
|
|
573
624
|
width: "10",
|
|
574
625
|
height: "10",
|
|
575
626
|
viewBox: "0 0 12 12",
|
|
576
627
|
fill: "none",
|
|
577
|
-
className: "uf-animate-spin",
|
|
628
|
+
className: "uf-animate-spin uf-block",
|
|
578
629
|
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
579
630
|
"path",
|
|
580
631
|
{
|
|
@@ -585,7 +636,7 @@ function DepositExecutionItem({
|
|
|
585
636
|
}
|
|
586
637
|
)
|
|
587
638
|
}
|
|
588
|
-
) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "uf-absolute uf
|
|
639
|
+
) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-bg-blue-500 uf-rounded-full uf-p-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", className: "uf-block", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
589
640
|
"path",
|
|
590
641
|
{
|
|
591
642
|
d: "M10 3L4.5 8.5L2 6",
|
|
@@ -597,59 +648,249 @@ function DepositExecutionItem({
|
|
|
597
648
|
) }) })
|
|
598
649
|
] }),
|
|
599
650
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "uf-flex-1 uf-min-w-0", children: [
|
|
600
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.
|
|
601
|
-
|
|
602
|
-
|
|
651
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "uf-text-foreground uf-font-medium uf-text-sm uf-leading-tight", children: isPending ? "Deposit received" : "Deposit completed" }),
|
|
652
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "uf-text-muted-foreground uf-text-xs uf-leading-tight", children: formatDateTime(execution.created_at || (/* @__PURE__ */ new Date()).toISOString()) })
|
|
653
|
+
] }),
|
|
654
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "uf-text-foreground uf-font-medium uf-text-sm uf-flex-shrink-0", children: formatUsdAmount(execution.source_amount_base_unit) }),
|
|
655
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground uf-flex-shrink-0" })
|
|
656
|
+
]
|
|
657
|
+
}
|
|
658
|
+
);
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
// src/components/deposits/DepositDetailModal.tsx
|
|
662
|
+
var import_lucide_react4 = require("lucide-react");
|
|
663
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
664
|
+
var CHAIN_NAMES = {
|
|
665
|
+
solana: "Solana",
|
|
666
|
+
ethereum: "Ethereum",
|
|
667
|
+
"1": "Ethereum",
|
|
668
|
+
"137": "Polygon",
|
|
669
|
+
"42161": "Arbitrum",
|
|
670
|
+
"10": "Optimism",
|
|
671
|
+
"8453": "Base",
|
|
672
|
+
"43114": "Avalanche",
|
|
673
|
+
"56": "BSC",
|
|
674
|
+
bitcoin: "Bitcoin",
|
|
675
|
+
mainnet: "Mainnet"
|
|
676
|
+
};
|
|
677
|
+
function DepositDetailModal({
|
|
678
|
+
open,
|
|
679
|
+
onOpenChange,
|
|
680
|
+
execution,
|
|
681
|
+
themeClass = ""
|
|
682
|
+
}) {
|
|
683
|
+
if (!execution) return null;
|
|
684
|
+
const isPending = execution.status === "pending" /* PENDING */ || execution.status === "waiting" /* WAITING */ || execution.status === "delayed" /* DELAYED */;
|
|
685
|
+
const formatDateTime = (timestamp) => {
|
|
686
|
+
try {
|
|
687
|
+
const date = new Date(timestamp);
|
|
688
|
+
const monthDay = date.toLocaleDateString("en-US", {
|
|
689
|
+
month: "short",
|
|
690
|
+
day: "numeric",
|
|
691
|
+
year: "numeric"
|
|
692
|
+
});
|
|
693
|
+
const time = date.toLocaleTimeString("en-US", {
|
|
694
|
+
hour: "numeric",
|
|
695
|
+
minute: "2-digit",
|
|
696
|
+
hour12: true
|
|
697
|
+
});
|
|
698
|
+
return `${monthDay} at ${time}`;
|
|
699
|
+
} catch {
|
|
700
|
+
return timestamp;
|
|
701
|
+
}
|
|
702
|
+
};
|
|
703
|
+
const formatAmount = (baseUnitAmount, decimals = 6) => {
|
|
704
|
+
try {
|
|
705
|
+
const amount = Number(baseUnitAmount) / Math.pow(10, decimals);
|
|
706
|
+
return amount.toFixed(2);
|
|
707
|
+
} catch {
|
|
708
|
+
return "0.00";
|
|
709
|
+
}
|
|
710
|
+
};
|
|
711
|
+
const formatUsdAmount = (usdAmount, baseUnitAmount) => {
|
|
712
|
+
if (usdAmount) {
|
|
713
|
+
try {
|
|
714
|
+
const amount = Number(usdAmount);
|
|
715
|
+
return new Intl.NumberFormat("en-US", {
|
|
716
|
+
style: "currency",
|
|
717
|
+
currency: "USD",
|
|
718
|
+
minimumFractionDigits: 2,
|
|
719
|
+
maximumFractionDigits: 2
|
|
720
|
+
}).format(amount);
|
|
721
|
+
} catch {
|
|
722
|
+
}
|
|
723
|
+
}
|
|
724
|
+
if (baseUnitAmount) {
|
|
725
|
+
try {
|
|
726
|
+
const amount = Number(baseUnitAmount) / 1e6;
|
|
727
|
+
return new Intl.NumberFormat("en-US", {
|
|
728
|
+
style: "currency",
|
|
729
|
+
currency: "USD",
|
|
730
|
+
minimumFractionDigits: 2,
|
|
731
|
+
maximumFractionDigits: 2
|
|
732
|
+
}).format(amount);
|
|
733
|
+
} catch {
|
|
734
|
+
}
|
|
735
|
+
}
|
|
736
|
+
return "$0.00";
|
|
737
|
+
};
|
|
738
|
+
const getNetworkName = (chainType, chainId) => {
|
|
739
|
+
return CHAIN_NAMES[chainId] || CHAIN_NAMES[chainType] || chainType;
|
|
740
|
+
};
|
|
741
|
+
const getSourceTokenSymbol = () => {
|
|
742
|
+
return "USDC";
|
|
743
|
+
};
|
|
744
|
+
const getDestinationTokenSymbol = () => {
|
|
745
|
+
return "USDC";
|
|
746
|
+
};
|
|
747
|
+
const handleClose = () => {
|
|
748
|
+
onOpenChange(false);
|
|
749
|
+
};
|
|
750
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
751
|
+
DialogContent,
|
|
752
|
+
{
|
|
753
|
+
className: `sm:uf-max-w-[400px] !uf-bg-card uf-border-secondary uf-text-foreground uf-p-0 uf-gap-0 [&>button]:uf-hidden ${themeClass}`,
|
|
754
|
+
children: [
|
|
755
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DepositHeader, { title: "Deposit Details", onClose: handleClose }),
|
|
756
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "uf-px-4 uf-pb-4", children: [
|
|
757
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-py-6", children: [
|
|
758
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "uf-relative uf-mb-3", children: [
|
|
759
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
760
|
+
"img",
|
|
761
|
+
{
|
|
762
|
+
src: execution.source_token_metadata?.icon_url || getIconUrl("/icons/tokens/usdc.svg"),
|
|
763
|
+
alt: "Token",
|
|
764
|
+
width: 64,
|
|
765
|
+
height: 64,
|
|
766
|
+
className: "uf-rounded-full"
|
|
767
|
+
}
|
|
768
|
+
),
|
|
769
|
+
isPending ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "uf-absolute -uf-bottom-1 -uf-right-1 uf-bg-yellow-500 uf-rounded-full uf-p-1", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
770
|
+
"svg",
|
|
771
|
+
{
|
|
772
|
+
width: "16",
|
|
773
|
+
height: "16",
|
|
774
|
+
viewBox: "0 0 12 12",
|
|
775
|
+
fill: "none",
|
|
776
|
+
className: "uf-animate-spin uf-block",
|
|
777
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
778
|
+
"path",
|
|
779
|
+
{
|
|
780
|
+
d: "M6 1V3M6 9V11M1 6H3M9 6H11M2.5 2.5L4 4M8 8L9.5 9.5M2.5 9.5L4 8M8 4L9.5 2.5",
|
|
781
|
+
stroke: "white",
|
|
782
|
+
strokeWidth: "2",
|
|
783
|
+
strokeLinecap: "round"
|
|
784
|
+
}
|
|
785
|
+
)
|
|
786
|
+
}
|
|
787
|
+
) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "uf-absolute -uf-bottom-1 -uf-right-1 uf-bg-blue-500 uf-rounded-full uf-p-1", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
788
|
+
"svg",
|
|
789
|
+
{
|
|
790
|
+
width: "16",
|
|
791
|
+
height: "16",
|
|
792
|
+
viewBox: "0 0 12 12",
|
|
793
|
+
fill: "none",
|
|
794
|
+
className: "uf-block",
|
|
795
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
796
|
+
"path",
|
|
797
|
+
{
|
|
798
|
+
d: "M10 3L4.5 8.5L2 6",
|
|
799
|
+
stroke: "white",
|
|
800
|
+
strokeWidth: "2",
|
|
801
|
+
strokeLinecap: "round",
|
|
802
|
+
strokeLinejoin: "round"
|
|
803
|
+
}
|
|
804
|
+
)
|
|
805
|
+
}
|
|
806
|
+
) })
|
|
807
|
+
] }),
|
|
808
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mb-1", children: [
|
|
809
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
810
|
+
"div",
|
|
811
|
+
{
|
|
812
|
+
className: `uf-w-2 uf-h-2 uf-rounded-full ${isPending ? "uf-bg-yellow-500" : "uf-bg-green-500"}`
|
|
813
|
+
}
|
|
814
|
+
),
|
|
815
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uf-text-foreground uf-font-medium", children: isPending ? "Pending" : "Completed" })
|
|
816
|
+
] }),
|
|
817
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uf-text-muted-foreground uf-text-sm", children: formatDateTime(execution.created_at || (/* @__PURE__ */ new Date()).toISOString()) })
|
|
818
|
+
] }),
|
|
819
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "uf-bg-secondary uf-rounded-xl uf-overflow-hidden uf-mb-3", children: [
|
|
820
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3 uf-border-b uf-border-border/50", children: [
|
|
821
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uf-text-muted-foreground uf-text-sm", children: "Amount Sent" }),
|
|
822
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "uf-text-foreground uf-font-medium", children: [
|
|
823
|
+
formatAmount(execution.source_amount_base_unit),
|
|
824
|
+
" ",
|
|
825
|
+
getSourceTokenSymbol()
|
|
826
|
+
] })
|
|
827
|
+
] }),
|
|
828
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3 uf-border-b uf-border-border/50", children: [
|
|
829
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uf-text-muted-foreground uf-text-sm", children: "Amount Received" }),
|
|
830
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "uf-text-foreground uf-font-medium", children: [
|
|
831
|
+
formatAmount(execution.destination_amount_base_unit),
|
|
832
|
+
" ",
|
|
833
|
+
getDestinationTokenSymbol()
|
|
834
|
+
] })
|
|
835
|
+
] }),
|
|
836
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
|
|
837
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uf-text-muted-foreground uf-text-sm", children: "USD Value" }),
|
|
838
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uf-text-foreground uf-font-medium", children: formatUsdAmount(execution.source_amount_usd, execution.source_amount_base_unit) })
|
|
839
|
+
] })
|
|
840
|
+
] }),
|
|
841
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "uf-bg-secondary uf-rounded-xl uf-overflow-hidden uf-mb-4", children: [
|
|
842
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3 uf-border-b uf-border-border/50", children: [
|
|
843
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uf-text-muted-foreground uf-text-sm", children: "Source Network" }),
|
|
844
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uf-text-foreground uf-font-medium", children: getNetworkName(execution.source_chain_type, execution.source_chain_id) })
|
|
845
|
+
] }),
|
|
846
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
|
|
847
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uf-text-muted-foreground uf-text-sm", children: "Destination Network" }),
|
|
848
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uf-text-foreground uf-font-medium", children: getNetworkName(execution.destination_chain_type, execution.destination_chain_id) })
|
|
849
|
+
] })
|
|
603
850
|
] }),
|
|
604
|
-
/* @__PURE__ */ (0,
|
|
851
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "uf-space-y-2", children: [
|
|
852
|
+
execution.explorer_url && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
853
|
+
"a",
|
|
854
|
+
{
|
|
855
|
+
href: execution.explorer_url,
|
|
856
|
+
target: "_blank",
|
|
857
|
+
rel: "noopener noreferrer",
|
|
858
|
+
className: "uf-flex uf-items-center uf-justify-between uf-w-full uf-bg-blue-400 hover:uf-bg-blue-500 uf-text-white uf-rounded-xl uf-px-4 uf-py-3 uf-transition-colors",
|
|
859
|
+
children: [
|
|
860
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
861
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.ArrowDownCircle, { className: "uf-w-5 uf-h-5" }),
|
|
862
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uf-font-medium", children: "View Deposit Transaction" })
|
|
863
|
+
] }),
|
|
864
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.ExternalLink, { className: "uf-w-4 uf-h-4" })
|
|
865
|
+
]
|
|
866
|
+
}
|
|
867
|
+
),
|
|
868
|
+
!isPending && execution.destination_transaction_hashes?.length > 0 && execution.destination_explorer_url && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
869
|
+
"a",
|
|
870
|
+
{
|
|
871
|
+
href: execution.destination_explorer_url,
|
|
872
|
+
target: "_blank",
|
|
873
|
+
rel: "noopener noreferrer",
|
|
874
|
+
className: "uf-flex uf-items-center uf-justify-between uf-w-full uf-bg-blue-600 hover:uf-bg-blue-700 uf-text-white uf-rounded-xl uf-px-4 uf-py-3 uf-transition-colors",
|
|
875
|
+
children: [
|
|
876
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
877
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.CheckCircle, { className: "uf-w-5 uf-h-5" }),
|
|
878
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uf-font-medium", children: "View Completion Transaction" })
|
|
879
|
+
] }),
|
|
880
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.ExternalLink, { className: "uf-w-4 uf-h-4" })
|
|
881
|
+
]
|
|
882
|
+
}
|
|
883
|
+
)
|
|
884
|
+
] }),
|
|
885
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "uf-text-center uf-text-muted-foreground uf-text-xs uf-mt-4", children: "Links open in external browser" })
|
|
605
886
|
] })
|
|
606
|
-
]
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
{
|
|
610
|
-
onClick: onClose,
|
|
611
|
-
className: "uf-text-muted-foreground hover:uf-text-foreground uf-transition-colors uf-p-0.5 uf-flex-shrink-0 uf-ml-2",
|
|
612
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.X, { className: "uf-w-4 uf-h-4" })
|
|
613
|
-
}
|
|
614
|
-
)
|
|
615
|
-
] }),
|
|
616
|
-
!isPending && execution.explorer_url && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-gap-1.5 uf-mt-2 uf-pt-2 uf-border-t uf-border-secondary uf-text-xs uf-ml-[42px]", children: [
|
|
617
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "uf-text-muted-foreground", children: "Deposit tx:" }),
|
|
618
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
619
|
-
"a",
|
|
620
|
-
{
|
|
621
|
-
href: execution.explorer_url,
|
|
622
|
-
target: "_blank",
|
|
623
|
-
rel: "noopener noreferrer",
|
|
624
|
-
className: "uf-flex uf-items-center uf-gap-1 uf-text-blue-400 hover:uf-text-blue-300 uf-transition-colors uf-font-mono",
|
|
625
|
-
children: [
|
|
626
|
-
formatTxHash(execution.transaction_hash),
|
|
627
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.ExternalLink, { className: "uf-w-3 uf-h-3" })
|
|
628
|
-
]
|
|
629
|
-
}
|
|
630
|
-
)
|
|
631
|
-
] }),
|
|
632
|
-
!isPending && execution.destination_transaction_hashes?.length > 0 && execution.destination_explorer_url && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-gap-1.5 uf-mt-1 uf-text-xs uf-ml-[42px]", children: [
|
|
633
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "uf-text-muted-foreground", children: "Completion tx:" }),
|
|
634
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
635
|
-
"a",
|
|
636
|
-
{
|
|
637
|
-
href: execution.destination_explorer_url,
|
|
638
|
-
target: "_blank",
|
|
639
|
-
rel: "noopener noreferrer",
|
|
640
|
-
className: "uf-flex uf-items-center uf-gap-1 uf-text-blue-400 hover:uf-text-blue-300 uf-transition-colors uf-font-mono",
|
|
641
|
-
children: [
|
|
642
|
-
formatTxHash(execution.destination_transaction_hashes[execution.destination_transaction_hashes.length - 1]),
|
|
643
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.ExternalLink, { className: "uf-w-3 uf-h-3" })
|
|
644
|
-
]
|
|
645
|
-
}
|
|
646
|
-
)
|
|
647
|
-
] })
|
|
648
|
-
] });
|
|
887
|
+
]
|
|
888
|
+
}
|
|
889
|
+
) });
|
|
649
890
|
}
|
|
650
891
|
|
|
651
892
|
// src/components/deposits/DepositsModal.tsx
|
|
652
|
-
var
|
|
893
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
653
894
|
function DepositsModal({
|
|
654
895
|
open,
|
|
655
896
|
onOpenChange,
|
|
@@ -659,6 +900,8 @@ function DepositsModal({
|
|
|
659
900
|
themeClass = ""
|
|
660
901
|
}) {
|
|
661
902
|
const [allExecutions, setAllExecutions] = (0, import_react2.useState)(sessionExecutions);
|
|
903
|
+
const [selectedExecution, setSelectedExecution] = (0, import_react2.useState)(null);
|
|
904
|
+
const [detailModalOpen, setDetailModalOpen] = (0, import_react2.useState)(false);
|
|
662
905
|
(0, import_react2.useEffect)(() => {
|
|
663
906
|
if (!open || !userId) return;
|
|
664
907
|
const fetchExecutions = async () => {
|
|
@@ -684,54 +927,143 @@ function DepositsModal({
|
|
|
684
927
|
const handleClose = () => {
|
|
685
928
|
onOpenChange(false);
|
|
686
929
|
};
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
930
|
+
const handleExecutionClick = (execution) => {
|
|
931
|
+
setSelectedExecution(execution);
|
|
932
|
+
setDetailModalOpen(true);
|
|
933
|
+
};
|
|
934
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
|
|
935
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DialogContent, { className: `sm:uf-max-w-[400px] !uf-bg-card uf-border-secondary uf-text-foreground uf-p-0 uf-gap-0 [&>button]:uf-hidden ${themeClass}`, children: [
|
|
936
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DepositHeader, { title: "Deposit Tracker", onClose: handleClose }),
|
|
937
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "uf-max-h-[500px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden uf-pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "uf-space-y-2", children: allExecutions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "uf-text-muted-foreground uf-text-sm", children: "No deposits yet" }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: allExecutions.map((execution) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
938
|
+
DepositExecutionItem,
|
|
939
|
+
{
|
|
940
|
+
execution,
|
|
941
|
+
onClick: () => handleExecutionClick(execution)
|
|
942
|
+
},
|
|
943
|
+
execution.id
|
|
944
|
+
)) }) }) })
|
|
945
|
+
] }) }),
|
|
946
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
947
|
+
DepositDetailModal,
|
|
948
|
+
{
|
|
949
|
+
open: detailModalOpen,
|
|
950
|
+
onOpenChange: setDetailModalOpen,
|
|
951
|
+
execution: selectedExecution,
|
|
952
|
+
themeClass
|
|
953
|
+
}
|
|
954
|
+
)
|
|
955
|
+
] });
|
|
691
956
|
}
|
|
692
957
|
|
|
693
958
|
// src/components/deposits/DepositSuccessToast.tsx
|
|
694
|
-
var
|
|
959
|
+
var import_lucide_react5 = require("lucide-react");
|
|
960
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
695
961
|
function DepositSuccessToast({
|
|
696
962
|
depositTx,
|
|
697
|
-
completionTx,
|
|
698
963
|
orderSubmittedAt,
|
|
699
|
-
orderFilledAt,
|
|
700
|
-
explorerUrl,
|
|
701
|
-
completionExplorerUrl,
|
|
702
964
|
status,
|
|
703
965
|
tokenIconUrl,
|
|
966
|
+
sourceAmountBaseUnit = "0",
|
|
704
967
|
onClose
|
|
705
968
|
}) {
|
|
706
|
-
const
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
969
|
+
const isPending = status === "pending" /* PENDING */ || status === "waiting" /* WAITING */ || status === "delayed" /* DELAYED */;
|
|
970
|
+
const formatDateTime = (timestamp) => {
|
|
971
|
+
try {
|
|
972
|
+
const date = new Date(timestamp);
|
|
973
|
+
const monthDay = date.toLocaleDateString("en-US", {
|
|
974
|
+
month: "short",
|
|
975
|
+
day: "numeric",
|
|
976
|
+
year: "numeric"
|
|
977
|
+
});
|
|
978
|
+
const time = date.toLocaleTimeString("en-US", {
|
|
979
|
+
hour: "numeric",
|
|
980
|
+
minute: "2-digit",
|
|
981
|
+
hour12: true
|
|
982
|
+
}).toLowerCase();
|
|
983
|
+
return `${monthDay} at ${time}`;
|
|
984
|
+
} catch {
|
|
985
|
+
return timestamp;
|
|
986
|
+
}
|
|
715
987
|
};
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
988
|
+
const formatUsdAmount = (baseUnitAmount) => {
|
|
989
|
+
try {
|
|
990
|
+
const amount = Number(baseUnitAmount) / 1e6;
|
|
991
|
+
return new Intl.NumberFormat("en-US", {
|
|
992
|
+
style: "currency",
|
|
993
|
+
currency: "USD",
|
|
994
|
+
minimumFractionDigits: 2,
|
|
995
|
+
maximumFractionDigits: 2
|
|
996
|
+
}).format(amount);
|
|
997
|
+
} catch {
|
|
998
|
+
return "$0.00";
|
|
722
999
|
}
|
|
723
|
-
|
|
1000
|
+
};
|
|
1001
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "uf-w-full uf-animate-in uf-slide-in-from-bottom-2 uf-duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "uf-bg-card uf-border uf-border-border uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-gap-3", children: [
|
|
1002
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "uf-relative uf-flex-shrink-0", children: [
|
|
1003
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1004
|
+
"img",
|
|
1005
|
+
{
|
|
1006
|
+
src: tokenIconUrl || getIconUrl("/icons/tokens/usdc.svg"),
|
|
1007
|
+
alt: "Token",
|
|
1008
|
+
width: 36,
|
|
1009
|
+
height: 36,
|
|
1010
|
+
className: "uf-rounded-full"
|
|
1011
|
+
}
|
|
1012
|
+
),
|
|
1013
|
+
isPending ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "uf-absolute uf--bottom-0.5 uf--right-0.5 uf-bg-yellow-500 uf-rounded-full uf-p-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1014
|
+
"svg",
|
|
1015
|
+
{
|
|
1016
|
+
width: "10",
|
|
1017
|
+
height: "10",
|
|
1018
|
+
viewBox: "0 0 12 12",
|
|
1019
|
+
fill: "none",
|
|
1020
|
+
className: "uf-animate-spin",
|
|
1021
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1022
|
+
"path",
|
|
1023
|
+
{
|
|
1024
|
+
d: "M6 1V3M6 9V11M1 6H3M9 6H11M2.5 2.5L4 4M8 8L9.5 9.5M2.5 9.5L4 8M8 4L9.5 2.5",
|
|
1025
|
+
stroke: "white",
|
|
1026
|
+
strokeWidth: "2",
|
|
1027
|
+
strokeLinecap: "round"
|
|
1028
|
+
}
|
|
1029
|
+
)
|
|
1030
|
+
}
|
|
1031
|
+
) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "uf-absolute uf--bottom-0.5 uf--right-0.5 uf-bg-green-500 uf-rounded-full uf-p-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1032
|
+
"path",
|
|
1033
|
+
{
|
|
1034
|
+
d: "M10 3L4.5 8.5L2 6",
|
|
1035
|
+
stroke: "white",
|
|
1036
|
+
strokeWidth: "2",
|
|
1037
|
+
strokeLinecap: "round",
|
|
1038
|
+
strokeLinejoin: "round"
|
|
1039
|
+
}
|
|
1040
|
+
) }) })
|
|
1041
|
+
] }),
|
|
1042
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "uf-flex-1 uf-min-w-0", children: [
|
|
1043
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "uf-text-foreground uf-font-medium uf-text-sm", children: isPending ? "Deposit received" : "Deposit completed" }),
|
|
1044
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "uf-text-muted-foreground uf-text-xs", children: formatDateTime(orderSubmittedAt) })
|
|
1045
|
+
] }),
|
|
1046
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "uf-text-foreground uf-font-medium uf-text-sm uf-flex-shrink-0", children: formatUsdAmount(sourceAmountBaseUnit) }),
|
|
1047
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1048
|
+
"button",
|
|
1049
|
+
{
|
|
1050
|
+
onClick: onClose,
|
|
1051
|
+
className: "uf-text-muted-foreground hover:uf-text-foreground uf-transition-colors uf-p-0.5 uf-flex-shrink-0",
|
|
1052
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.X, { className: "uf-w-4 uf-h-4" })
|
|
1053
|
+
}
|
|
1054
|
+
)
|
|
1055
|
+
] }) });
|
|
724
1056
|
}
|
|
725
1057
|
|
|
726
1058
|
// src/components/shared/select.tsx
|
|
727
1059
|
var React3 = __toESM(require("react"));
|
|
728
1060
|
var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
|
|
729
|
-
var
|
|
730
|
-
var
|
|
1061
|
+
var import_lucide_react6 = require("lucide-react");
|
|
1062
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
731
1063
|
var Select = SelectPrimitive.Root;
|
|
732
1064
|
var SelectGroup = SelectPrimitive.Group;
|
|
733
1065
|
var SelectValue = SelectPrimitive.Value;
|
|
734
|
-
var SelectTrigger = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1066
|
+
var SelectTrigger = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
735
1067
|
SelectPrimitive.Trigger,
|
|
736
1068
|
{
|
|
737
1069
|
ref,
|
|
@@ -742,12 +1074,12 @@ var SelectTrigger = React3.forwardRef(({ className, children, ...props }, ref) =
|
|
|
742
1074
|
...props,
|
|
743
1075
|
children: [
|
|
744
1076
|
children,
|
|
745
|
-
/* @__PURE__ */ (0,
|
|
1077
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.ChevronDown, { className: "uf-h-4 uf-w-4 uf-opacity-50" }) })
|
|
746
1078
|
]
|
|
747
1079
|
}
|
|
748
1080
|
));
|
|
749
1081
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
750
|
-
var SelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1082
|
+
var SelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
751
1083
|
SelectPrimitive.ScrollUpButton,
|
|
752
1084
|
{
|
|
753
1085
|
ref,
|
|
@@ -756,11 +1088,11 @@ var SelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /
|
|
|
756
1088
|
className
|
|
757
1089
|
),
|
|
758
1090
|
...props,
|
|
759
|
-
children: /* @__PURE__ */ (0,
|
|
1091
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.ChevronUp, { className: "uf-h-4 uf-w-4" })
|
|
760
1092
|
}
|
|
761
1093
|
));
|
|
762
1094
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
763
|
-
var SelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1095
|
+
var SelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
764
1096
|
SelectPrimitive.ScrollDownButton,
|
|
765
1097
|
{
|
|
766
1098
|
ref,
|
|
@@ -769,13 +1101,13 @@ var SelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) =>
|
|
|
769
1101
|
className
|
|
770
1102
|
),
|
|
771
1103
|
...props,
|
|
772
|
-
children: /* @__PURE__ */ (0,
|
|
1104
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.ChevronDown, { className: "uf-h-4 uf-w-4" })
|
|
773
1105
|
}
|
|
774
1106
|
));
|
|
775
1107
|
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
776
1108
|
var SelectContent = React3.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
|
|
777
1109
|
const { themeClass } = useTheme();
|
|
778
|
-
return /* @__PURE__ */ (0,
|
|
1110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
779
1111
|
SelectPrimitive.Content,
|
|
780
1112
|
{
|
|
781
1113
|
ref,
|
|
@@ -788,8 +1120,8 @@ var SelectContent = React3.forwardRef(({ className, children, position = "popper
|
|
|
788
1120
|
position,
|
|
789
1121
|
...props,
|
|
790
1122
|
children: [
|
|
791
|
-
/* @__PURE__ */ (0,
|
|
792
|
-
/* @__PURE__ */ (0,
|
|
1123
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectScrollUpButton, {}),
|
|
1124
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
793
1125
|
SelectPrimitive.Viewport,
|
|
794
1126
|
{
|
|
795
1127
|
className: cn(
|
|
@@ -799,13 +1131,13 @@ var SelectContent = React3.forwardRef(({ className, children, position = "popper
|
|
|
799
1131
|
children
|
|
800
1132
|
}
|
|
801
1133
|
),
|
|
802
|
-
/* @__PURE__ */ (0,
|
|
1134
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectScrollDownButton, {})
|
|
803
1135
|
]
|
|
804
1136
|
}
|
|
805
1137
|
) });
|
|
806
1138
|
});
|
|
807
1139
|
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
808
|
-
var SelectLabel = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1140
|
+
var SelectLabel = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
809
1141
|
SelectPrimitive.Label,
|
|
810
1142
|
{
|
|
811
1143
|
ref,
|
|
@@ -814,7 +1146,7 @@ var SelectLabel = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
814
1146
|
}
|
|
815
1147
|
));
|
|
816
1148
|
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
817
|
-
var SelectItem = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1149
|
+
var SelectItem = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
818
1150
|
SelectPrimitive.Item,
|
|
819
1151
|
{
|
|
820
1152
|
ref,
|
|
@@ -824,13 +1156,13 @@ var SelectItem = React3.forwardRef(({ className, children, ...props }, ref) => /
|
|
|
824
1156
|
),
|
|
825
1157
|
...props,
|
|
826
1158
|
children: [
|
|
827
|
-
/* @__PURE__ */ (0,
|
|
828
|
-
/* @__PURE__ */ (0,
|
|
1159
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "uf-absolute uf-left-2 uf-flex uf-h-3.5 uf-w-3.5 uf-items-center uf-justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.Check, { className: "uf-h-4 uf-w-4" }) }) }),
|
|
1160
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectPrimitive.ItemText, { children })
|
|
829
1161
|
]
|
|
830
1162
|
}
|
|
831
1163
|
));
|
|
832
1164
|
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
833
|
-
var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
1165
|
+
var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
834
1166
|
SelectPrimitive.Separator,
|
|
835
1167
|
{
|
|
836
1168
|
ref,
|
|
@@ -844,7 +1176,7 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
|
844
1176
|
var React4 = __toESM(require("react"));
|
|
845
1177
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
846
1178
|
var import_class_variance_authority = require("class-variance-authority");
|
|
847
|
-
var
|
|
1179
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
848
1180
|
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
849
1181
|
"uf-inline-flex uf-items-center uf-justify-center uf-whitespace-nowrap uf-rounded-md uf-text-sm uf-font-medium uf-ring-offset-background uf-transition-colors focus-visible:uf-outline-none focus-visible:uf-ring-2 focus-visible:uf-ring-ring focus-visible:uf-ring-offset-2 disabled:uf-pointer-events-none disabled:uf-opacity-50",
|
|
850
1182
|
{
|
|
@@ -873,7 +1205,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
|
873
1205
|
var Button = React4.forwardRef(
|
|
874
1206
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
875
1207
|
const Comp = asChild ? import_react_slot.Slot : "button";
|
|
876
|
-
return /* @__PURE__ */ (0,
|
|
1208
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
877
1209
|
Comp,
|
|
878
1210
|
{
|
|
879
1211
|
className: cn(buttonVariants({ variant, size, className })),
|
|
@@ -888,13 +1220,13 @@ Button.displayName = "Button";
|
|
|
888
1220
|
// src/components/shared/tooltip.tsx
|
|
889
1221
|
var React5 = __toESM(require("react"));
|
|
890
1222
|
var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
|
|
891
|
-
var
|
|
1223
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
892
1224
|
var TooltipProvider = TooltipPrimitive.Provider;
|
|
893
1225
|
var Tooltip = TooltipPrimitive.Root;
|
|
894
1226
|
var TooltipTrigger = TooltipPrimitive.Trigger;
|
|
895
1227
|
var TooltipContent = React5.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
|
|
896
1228
|
const { themeClass } = useTheme();
|
|
897
|
-
return /* @__PURE__ */ (0,
|
|
1229
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
898
1230
|
TooltipPrimitive.Content,
|
|
899
1231
|
{
|
|
900
1232
|
ref,
|
|
@@ -980,7 +1312,7 @@ var en_default = {
|
|
|
980
1312
|
var i18n = en_default;
|
|
981
1313
|
|
|
982
1314
|
// src/components/deposits/TransferCryptoBase.tsx
|
|
983
|
-
var
|
|
1315
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
984
1316
|
var t = i18n.transferCrypto;
|
|
985
1317
|
var getChainKey = (chainId, chainType) => {
|
|
986
1318
|
return `${chainType}:${chainId}`;
|
|
@@ -1001,15 +1333,17 @@ function TransferCryptoBase({
|
|
|
1001
1333
|
showDetailedDropdowns = false,
|
|
1002
1334
|
onExecutionsChange,
|
|
1003
1335
|
onDepositSuccess,
|
|
1004
|
-
onDepositError
|
|
1336
|
+
onDepositError,
|
|
1337
|
+
wallets: externalWallets
|
|
1005
1338
|
}) {
|
|
1006
1339
|
const { themeClass } = useTheme();
|
|
1007
1340
|
const isDarkMode = themeClass.includes("uf-dark");
|
|
1008
1341
|
const [token, setToken] = (0, import_react3.useState)("USDC");
|
|
1009
1342
|
const [chain, setChain] = (0, import_react3.useState)("solana:mainnet");
|
|
1010
1343
|
const [copied, setCopied] = (0, import_react3.useState)(false);
|
|
1011
|
-
const [
|
|
1012
|
-
const [loading, setLoading] = (0, import_react3.useState)(
|
|
1344
|
+
const [internalWallets, setInternalWallets] = (0, import_react3.useState)([]);
|
|
1345
|
+
const [loading, setLoading] = (0, import_react3.useState)(!externalWallets?.length);
|
|
1346
|
+
const wallets = externalWallets?.length ? externalWallets : internalWallets;
|
|
1013
1347
|
const [error, setError] = (0, import_react3.useState)(null);
|
|
1014
1348
|
const [depositExecutions, setDepositExecutions] = (0, import_react3.useState)([]);
|
|
1015
1349
|
const [trackedExecutions, setTrackedExecutions] = (0, import_react3.useState)(/* @__PURE__ */ new Map());
|
|
@@ -1073,9 +1407,16 @@ function TransferCryptoBase({
|
|
|
1073
1407
|
}
|
|
1074
1408
|
}, [depositExecutions, onExecutionsChange]);
|
|
1075
1409
|
(0, import_react3.useEffect)(() => {
|
|
1076
|
-
|
|
1410
|
+
if (externalWallets?.length) {
|
|
1411
|
+
setLoading(false);
|
|
1412
|
+
return;
|
|
1413
|
+
}
|
|
1414
|
+
let retryTimeout = null;
|
|
1415
|
+
let isCancelled = false;
|
|
1416
|
+
const fetchWallets = async () => {
|
|
1417
|
+
if (isCancelled) return;
|
|
1418
|
+
setLoading(true);
|
|
1077
1419
|
try {
|
|
1078
|
-
setLoading(true);
|
|
1079
1420
|
const response = await createEOA(
|
|
1080
1421
|
{
|
|
1081
1422
|
user_id: userId,
|
|
@@ -1086,23 +1427,35 @@ function TransferCryptoBase({
|
|
|
1086
1427
|
},
|
|
1087
1428
|
publishableKey
|
|
1088
1429
|
);
|
|
1089
|
-
|
|
1090
|
-
|
|
1430
|
+
if (!isCancelled) {
|
|
1431
|
+
setInternalWallets(response.data);
|
|
1432
|
+
setError(null);
|
|
1433
|
+
setLoading(false);
|
|
1434
|
+
}
|
|
1091
1435
|
} catch (err) {
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1436
|
+
console.error("Error fetching wallets, retrying in 5s:", err);
|
|
1437
|
+
if (!isCancelled) {
|
|
1438
|
+
setError(err instanceof Error ? err.message : "Failed to load wallets");
|
|
1439
|
+
setLoading(false);
|
|
1440
|
+
retryTimeout = setTimeout(fetchWallets, 5e3);
|
|
1441
|
+
}
|
|
1096
1442
|
}
|
|
1097
|
-
}
|
|
1443
|
+
};
|
|
1098
1444
|
fetchWallets();
|
|
1445
|
+
return () => {
|
|
1446
|
+
isCancelled = true;
|
|
1447
|
+
if (retryTimeout) {
|
|
1448
|
+
clearTimeout(retryTimeout);
|
|
1449
|
+
}
|
|
1450
|
+
};
|
|
1099
1451
|
}, [
|
|
1100
1452
|
userId,
|
|
1101
1453
|
recipientAddress,
|
|
1102
1454
|
destinationChainType,
|
|
1103
1455
|
destinationChainId,
|
|
1104
1456
|
destinationTokenAddress,
|
|
1105
|
-
publishableKey
|
|
1457
|
+
publishableKey,
|
|
1458
|
+
externalWallets
|
|
1106
1459
|
]);
|
|
1107
1460
|
(0, import_react3.useEffect)(() => {
|
|
1108
1461
|
if (!supportedTokens.length) return;
|
|
@@ -1225,8 +1578,8 @@ function TransferCryptoBase({
|
|
|
1225
1578
|
const processingTime = currentChainFromBackend?.estimated_processing_time ?? null;
|
|
1226
1579
|
const minDepositUsd = currentChainFromBackend?.minimum_deposit_amount_usd ?? 3;
|
|
1227
1580
|
const renderTokenItem = (tokenData) => {
|
|
1228
|
-
return /* @__PURE__ */ (0,
|
|
1229
|
-
/* @__PURE__ */ (0,
|
|
1581
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
1582
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1230
1583
|
"img",
|
|
1231
1584
|
{
|
|
1232
1585
|
src: tokenData.icon_url,
|
|
@@ -1236,13 +1589,13 @@ function TransferCryptoBase({
|
|
|
1236
1589
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
1237
1590
|
}
|
|
1238
1591
|
),
|
|
1239
|
-
/* @__PURE__ */ (0,
|
|
1240
|
-
showDetailedDropdowns && /* @__PURE__ */ (0,
|
|
1592
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "uf-text-xs uf-font-normal", children: tokenData.symbol }),
|
|
1593
|
+
showDetailedDropdowns && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "uf-text-xs uf-text-muted-foreground", children: tokenData.name })
|
|
1241
1594
|
] });
|
|
1242
1595
|
};
|
|
1243
1596
|
const renderChainItem = (chainData) => {
|
|
1244
|
-
return /* @__PURE__ */ (0,
|
|
1245
|
-
/* @__PURE__ */ (0,
|
|
1597
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
1598
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1246
1599
|
"img",
|
|
1247
1600
|
{
|
|
1248
1601
|
src: chainData.icon_url,
|
|
@@ -1252,24 +1605,24 @@ function TransferCryptoBase({
|
|
|
1252
1605
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
1253
1606
|
}
|
|
1254
1607
|
),
|
|
1255
|
-
/* @__PURE__ */ (0,
|
|
1256
|
-
showDetailedDropdowns && /* @__PURE__ */ (0,
|
|
1608
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chainData.chain_name }),
|
|
1609
|
+
showDetailedDropdowns && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "uf-text-xs uf-text-muted-foreground uf-capitalize", children: chainData.chain_type })
|
|
1257
1610
|
] });
|
|
1258
1611
|
};
|
|
1259
1612
|
const selectContainerClass = layoutVariant === "horizontal" ? "uf-grid uf-grid-cols-2 uf-gap-2.5" : "uf-space-y-3";
|
|
1260
|
-
return /* @__PURE__ */ (0,
|
|
1261
|
-
/* @__PURE__ */ (0,
|
|
1262
|
-
/* @__PURE__ */ (0,
|
|
1263
|
-
/* @__PURE__ */ (0,
|
|
1264
|
-
/* @__PURE__ */ (0,
|
|
1613
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipProvider, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "uf-space-y-3", children: [
|
|
1614
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: selectContainerClass, children: [
|
|
1615
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
|
|
1616
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-text-xs uf-text-muted-foreground uf-mb-2 uf-flex uf-items-center uf-gap-1", children: t.supportedToken }),
|
|
1617
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1265
1618
|
Select,
|
|
1266
1619
|
{
|
|
1267
1620
|
value: token,
|
|
1268
1621
|
onValueChange: setToken,
|
|
1269
1622
|
disabled: tokensLoading || supportedTokens.length === 0,
|
|
1270
1623
|
children: [
|
|
1271
|
-
/* @__PURE__ */ (0,
|
|
1272
|
-
/* @__PURE__ */ (0,
|
|
1624
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectTrigger, { className: "uf-bg-secondary uf-border-none uf-rounded-lg uf-h-10 hover:uf-bg-accent uf-text-foreground focus:uf-ring-1 focus:uf-ring-ring disabled:uf-opacity-50", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectValue, { children: tokensLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t.loading }) }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "uf-text-xs uf-font-normal", children: token }) }) }) }),
|
|
1625
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectContent, { className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]", children: supportedTokens.map((tokenData) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1273
1626
|
SelectItem,
|
|
1274
1627
|
{
|
|
1275
1628
|
value: tokenData.symbol,
|
|
@@ -1282,51 +1635,51 @@ function TransferCryptoBase({
|
|
|
1282
1635
|
}
|
|
1283
1636
|
)
|
|
1284
1637
|
] }),
|
|
1285
|
-
/* @__PURE__ */ (0,
|
|
1286
|
-
/* @__PURE__ */ (0,
|
|
1638
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
|
|
1639
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "uf-text-xs uf-text-muted-foreground uf-mb-2 uf-flex uf-items-center uf-gap-1", children: [
|
|
1287
1640
|
t.supportedChain,
|
|
1288
|
-
/* @__PURE__ */ (0,
|
|
1641
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "uf-text-[10px]", children: [
|
|
1289
1642
|
"$",
|
|
1290
1643
|
minDepositUsd,
|
|
1291
1644
|
" ",
|
|
1292
1645
|
t.minDeposit.label
|
|
1293
1646
|
] }),
|
|
1294
|
-
/* @__PURE__ */ (0,
|
|
1295
|
-
/* @__PURE__ */ (0,
|
|
1647
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Tooltip, { children: [
|
|
1648
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1296
1649
|
"span",
|
|
1297
1650
|
{
|
|
1298
1651
|
className: "uf-inline-flex uf-cursor-pointer uf-transition-colors hover:uf-text-foreground",
|
|
1299
1652
|
tabIndex: 0,
|
|
1300
1653
|
role: "button",
|
|
1301
1654
|
"aria-label": "Minimum deposit information",
|
|
1302
|
-
children: /* @__PURE__ */ (0,
|
|
1655
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Info, { className: "uf-w-3 uf-h-3" })
|
|
1303
1656
|
}
|
|
1304
1657
|
) }),
|
|
1305
|
-
/* @__PURE__ */ (0,
|
|
1658
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1306
1659
|
TooltipContent,
|
|
1307
1660
|
{
|
|
1308
1661
|
side: "left",
|
|
1309
1662
|
align: "center",
|
|
1310
1663
|
className: "uf-max-w-[200px]",
|
|
1311
|
-
children: /* @__PURE__ */ (0,
|
|
1664
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: t.minDeposit.tooltip })
|
|
1312
1665
|
}
|
|
1313
1666
|
)
|
|
1314
1667
|
] })
|
|
1315
1668
|
] }),
|
|
1316
|
-
/* @__PURE__ */ (0,
|
|
1669
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1317
1670
|
Select,
|
|
1318
1671
|
{
|
|
1319
1672
|
value: chain,
|
|
1320
1673
|
onValueChange: setChain,
|
|
1321
1674
|
disabled: tokensLoading || availableChainsForToken.length === 0,
|
|
1322
1675
|
children: [
|
|
1323
|
-
/* @__PURE__ */ (0,
|
|
1324
|
-
/* @__PURE__ */ (0,
|
|
1676
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectTrigger, { className: "uf-bg-secondary uf-border-none uf-rounded-lg uf-h-10 hover:uf-bg-accent uf-text-foreground focus:uf-ring-1 focus:uf-ring-ring disabled:uf-opacity-50", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectValue, { children: tokensLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t.loading }) }) : currentChainFromBackend ? renderChainItem(currentChainFromBackend) : currentChainData ? renderChainItem(currentChainData) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chain }) }) }) }),
|
|
1677
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectContent, { className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]", children: availableChainsForToken.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-px-2 uf-py-3 uf-text-xs uf-text-muted-foreground uf-text-center", children: t.noChainsAvailable }) : availableChainsForToken.map((chainData) => {
|
|
1325
1678
|
const chainKey = getChainKey(
|
|
1326
1679
|
chainData.chain_id,
|
|
1327
1680
|
chainData.chain_type
|
|
1328
1681
|
);
|
|
1329
|
-
return /* @__PURE__ */ (0,
|
|
1682
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1330
1683
|
SelectItem,
|
|
1331
1684
|
{
|
|
1332
1685
|
value: chainKey,
|
|
@@ -1341,110 +1694,110 @@ function TransferCryptoBase({
|
|
|
1341
1694
|
)
|
|
1342
1695
|
] })
|
|
1343
1696
|
] }),
|
|
1344
|
-
/* @__PURE__ */ (0,
|
|
1697
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-flex uf-justify-center uf-py-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-bg-card uf-p-4 uf-rounded-2xl uf-shadow-lg uf-border uf-border-border", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1345
1698
|
"div",
|
|
1346
1699
|
{
|
|
1347
1700
|
className: "uf-flex uf-items-center uf-justify-center",
|
|
1348
1701
|
style: { width: 180, height: 180 },
|
|
1349
|
-
children: /* @__PURE__ */ (0,
|
|
1702
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-text-foreground uf-text-sm", children: t.loadingQRCode })
|
|
1350
1703
|
}
|
|
1351
|
-
) : depositAddress ? /* @__PURE__ */ (0,
|
|
1704
|
+
) : depositAddress ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1352
1705
|
StyledQRCode,
|
|
1353
1706
|
{
|
|
1354
1707
|
value: depositAddress,
|
|
1355
1708
|
size: 180,
|
|
1356
|
-
imageUrl: currentChainData?.icon_url || currentChainFromBackend?.icon_url
|
|
1709
|
+
imageUrl: currentChainData?.icon_url || currentChainFromBackend?.icon_url,
|
|
1357
1710
|
imageSize: 45,
|
|
1358
1711
|
darkMode: isDarkMode
|
|
1359
1712
|
},
|
|
1360
1713
|
`qr-${depositAddress}-${chain}`
|
|
1361
|
-
) : /* @__PURE__ */ (0,
|
|
1714
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1362
1715
|
"div",
|
|
1363
1716
|
{
|
|
1364
1717
|
className: "uf-flex uf-items-center uf-justify-center",
|
|
1365
1718
|
style: { width: 180, height: 180 },
|
|
1366
|
-
children: /* @__PURE__ */ (0,
|
|
1719
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-text-red-400 uf-text-sm", children: t.noAddressAvailable })
|
|
1367
1720
|
}
|
|
1368
1721
|
) }) }),
|
|
1369
|
-
/* @__PURE__ */ (0,
|
|
1370
|
-
/* @__PURE__ */ (0,
|
|
1371
|
-
/* @__PURE__ */ (0,
|
|
1722
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
|
|
1723
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "uf-text-xs uf-text-muted-foreground uf-mb-2 uf-flex uf-items-center uf-justify-between", children: [
|
|
1724
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
|
|
1372
1725
|
t.depositAddress.label,
|
|
1373
|
-
/* @__PURE__ */ (0,
|
|
1374
|
-
/* @__PURE__ */ (0,
|
|
1726
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Tooltip, { children: [
|
|
1727
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1375
1728
|
"span",
|
|
1376
1729
|
{
|
|
1377
1730
|
className: "uf-inline-flex uf-cursor-pointer uf-transition-colors hover:uf-text-foreground",
|
|
1378
1731
|
tabIndex: 0,
|
|
1379
1732
|
role: "button",
|
|
1380
1733
|
"aria-label": "Deposit address information",
|
|
1381
|
-
children: /* @__PURE__ */ (0,
|
|
1734
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Info, { className: "uf-w-3 uf-h-3" })
|
|
1382
1735
|
}
|
|
1383
1736
|
) }),
|
|
1384
|
-
/* @__PURE__ */ (0,
|
|
1737
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1385
1738
|
TooltipContent,
|
|
1386
1739
|
{
|
|
1387
1740
|
side: "top",
|
|
1388
1741
|
align: "center",
|
|
1389
1742
|
className: "uf-max-w-[240px]",
|
|
1390
|
-
children: /* @__PURE__ */ (0,
|
|
1743
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: t.depositAddress.tooltip.replace("{{token}}", token) })
|
|
1391
1744
|
}
|
|
1392
1745
|
)
|
|
1393
1746
|
] })
|
|
1394
1747
|
] }),
|
|
1395
|
-
copyButtonMode === "compact" && /* @__PURE__ */ (0,
|
|
1748
|
+
copyButtonMode === "compact" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1396
1749
|
"button",
|
|
1397
1750
|
{
|
|
1398
1751
|
onClick: handleCopyAddress,
|
|
1399
1752
|
disabled: loading || !depositAddress,
|
|
1400
1753
|
className: "uf-flex uf-items-center uf-gap-1 uf-text-xs uf-text-muted-foreground hover:uf-text-foreground uf-transition-colors disabled:uf-opacity-50 disabled:uf-cursor-not-allowed",
|
|
1401
|
-
children: copied ? /* @__PURE__ */ (0,
|
|
1402
|
-
/* @__PURE__ */ (0,
|
|
1403
|
-
/* @__PURE__ */ (0,
|
|
1404
|
-
] }) : /* @__PURE__ */ (0,
|
|
1405
|
-
/* @__PURE__ */ (0,
|
|
1406
|
-
/* @__PURE__ */ (0,
|
|
1754
|
+
children: copied ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
1755
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Check, { className: "uf-w-3 uf-h-3" }),
|
|
1756
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: t.copied })
|
|
1757
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
1758
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Copy, { className: "uf-w-3 uf-h-3" }),
|
|
1759
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: t.copyAddress })
|
|
1407
1760
|
] })
|
|
1408
1761
|
}
|
|
1409
1762
|
)
|
|
1410
1763
|
] }),
|
|
1411
|
-
loading ? /* @__PURE__ */ (0,
|
|
1764
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-bg-secondary uf-rounded-lg uf-px-3 uf-py-2.5 uf-text-xs uf-text-muted-foreground uf-animate-pulse", children: t.loading }) : error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-bg-secondary uf-rounded-lg uf-px-3 uf-py-2.5 uf-text-xs uf-text-red-400", children: error }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-bg-secondary uf-rounded-lg uf-px-3 uf-py-2.5 uf-text-xs uf-font-mono uf-break-all", children: depositAddress || t.noAddressAvailable })
|
|
1412
1765
|
] }),
|
|
1413
|
-
copyButtonMode === "fullWidth" && /* @__PURE__ */ (0,
|
|
1766
|
+
copyButtonMode === "fullWidth" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1414
1767
|
Button,
|
|
1415
1768
|
{
|
|
1416
1769
|
onClick: handleCopyAddress,
|
|
1417
1770
|
disabled: loading || !depositAddress,
|
|
1418
1771
|
className: "uf-w-full uf-bg-secondary hover:uf-bg-accent uf-text-foreground uf-rounded-lg uf-h-9 uf-text-sm uf-font-medium disabled:uf-opacity-50 disabled:uf-cursor-not-allowed",
|
|
1419
|
-
children: copied ? /* @__PURE__ */ (0,
|
|
1420
|
-
/* @__PURE__ */ (0,
|
|
1772
|
+
children: copied ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
1773
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Check, { className: "uf-w-4 uf-h-4 uf-mr-2" }),
|
|
1421
1774
|
t.copied
|
|
1422
|
-
] }) : /* @__PURE__ */ (0,
|
|
1423
|
-
/* @__PURE__ */ (0,
|
|
1775
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
|
|
1776
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Copy, { className: "uf-w-4 uf-h-4 uf-mr-2" }),
|
|
1424
1777
|
t.copyAddress
|
|
1425
1778
|
] })
|
|
1426
1779
|
}
|
|
1427
1780
|
),
|
|
1428
|
-
/* @__PURE__ */ (0,
|
|
1429
|
-
/* @__PURE__ */ (0,
|
|
1781
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "uf-border-t uf-border-border", children: [
|
|
1782
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1430
1783
|
"button",
|
|
1431
1784
|
{
|
|
1432
1785
|
onClick: () => setDetailsExpanded(!detailsExpanded),
|
|
1433
1786
|
className: "uf-w-full uf-flex uf-items-center uf-justify-between uf-py-2.5",
|
|
1434
1787
|
children: [
|
|
1435
|
-
/* @__PURE__ */ (0,
|
|
1436
|
-
/* @__PURE__ */ (0,
|
|
1437
|
-
/* @__PURE__ */ (0,
|
|
1788
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
1789
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-bg-secondary uf-rounded-full uf-p-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.DollarSign, { className: "uf-w-3 uf-h-3" }) }),
|
|
1790
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "uf-text-xs", children: [
|
|
1438
1791
|
t.priceImpact.label,
|
|
1439
1792
|
":",
|
|
1440
1793
|
" ",
|
|
1441
|
-
/* @__PURE__ */ (0,
|
|
1794
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "uf-text-foreground", children: [
|
|
1442
1795
|
priceImpact.toFixed(2),
|
|
1443
1796
|
"%"
|
|
1444
1797
|
] })
|
|
1445
1798
|
] }),
|
|
1446
|
-
/* @__PURE__ */ (0,
|
|
1447
|
-
/* @__PURE__ */ (0,
|
|
1799
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Tooltip, { children: [
|
|
1800
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1448
1801
|
"span",
|
|
1449
1802
|
{
|
|
1450
1803
|
className: "uf-inline-flex uf-cursor-pointer uf-text-muted-foreground uf-transition-colors hover:uf-text-foreground",
|
|
@@ -1457,75 +1810,75 @@ function TransferCryptoBase({
|
|
|
1457
1810
|
tabIndex: 0,
|
|
1458
1811
|
role: "button",
|
|
1459
1812
|
"aria-label": "Price impact information",
|
|
1460
|
-
children: /* @__PURE__ */ (0,
|
|
1813
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Info, { className: "uf-w-3 uf-h-3" })
|
|
1461
1814
|
}
|
|
1462
1815
|
) }),
|
|
1463
|
-
/* @__PURE__ */ (0,
|
|
1816
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1464
1817
|
TooltipContent,
|
|
1465
1818
|
{
|
|
1466
1819
|
side: "top",
|
|
1467
1820
|
align: "center",
|
|
1468
1821
|
className: "uf-max-w-[240px]",
|
|
1469
|
-
children: /* @__PURE__ */ (0,
|
|
1822
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: t.priceImpact.tooltip })
|
|
1470
1823
|
}
|
|
1471
1824
|
)
|
|
1472
1825
|
] })
|
|
1473
1826
|
] }),
|
|
1474
|
-
detailsExpanded ? /* @__PURE__ */ (0,
|
|
1827
|
+
detailsExpanded ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.ChevronUp, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.ChevronDown, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground" })
|
|
1475
1828
|
]
|
|
1476
1829
|
}
|
|
1477
1830
|
),
|
|
1478
|
-
detailsExpanded && /* @__PURE__ */ (0,
|
|
1479
|
-
/* @__PURE__ */ (0,
|
|
1480
|
-
/* @__PURE__ */ (0,
|
|
1481
|
-
/* @__PURE__ */ (0,
|
|
1831
|
+
detailsExpanded && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "uf-pb-3 uf-space-y-2.5", children: [
|
|
1832
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
1833
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-bg-secondary uf-rounded-full uf-p-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.ShieldCheck, { className: "uf-w-3 uf-h-3" }) }),
|
|
1834
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "uf-text-xs", children: [
|
|
1482
1835
|
t.slippage.label,
|
|
1483
1836
|
":",
|
|
1484
1837
|
" ",
|
|
1485
|
-
/* @__PURE__ */ (0,
|
|
1838
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "uf-text-foreground", children: [
|
|
1486
1839
|
t.slippage.auto,
|
|
1487
1840
|
" \u2022 ",
|
|
1488
1841
|
maxSlippage.toFixed(2),
|
|
1489
1842
|
"%"
|
|
1490
1843
|
] })
|
|
1491
1844
|
] }),
|
|
1492
|
-
/* @__PURE__ */ (0,
|
|
1493
|
-
/* @__PURE__ */ (0,
|
|
1845
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Tooltip, { children: [
|
|
1846
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1494
1847
|
"span",
|
|
1495
1848
|
{
|
|
1496
1849
|
className: "uf-inline-flex uf-cursor-pointer uf-text-muted-foreground uf-transition-colors hover:uf-text-foreground",
|
|
1497
1850
|
tabIndex: 0,
|
|
1498
1851
|
role: "button",
|
|
1499
1852
|
"aria-label": "Slippage information",
|
|
1500
|
-
children: /* @__PURE__ */ (0,
|
|
1853
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Info, { className: "uf-w-3 uf-h-3" })
|
|
1501
1854
|
}
|
|
1502
1855
|
) }),
|
|
1503
|
-
/* @__PURE__ */ (0,
|
|
1856
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1504
1857
|
TooltipContent,
|
|
1505
1858
|
{
|
|
1506
1859
|
side: "top",
|
|
1507
1860
|
align: "center",
|
|
1508
1861
|
className: "uf-max-w-[240px]",
|
|
1509
|
-
children: /* @__PURE__ */ (0,
|
|
1862
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: t.slippage.tooltip })
|
|
1510
1863
|
}
|
|
1511
1864
|
)
|
|
1512
1865
|
] })
|
|
1513
1866
|
] }),
|
|
1514
|
-
/* @__PURE__ */ (0,
|
|
1515
|
-
/* @__PURE__ */ (0,
|
|
1516
|
-
/* @__PURE__ */ (0,
|
|
1867
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
1868
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-bg-secondary uf-rounded-full uf-p-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Clock, { className: "uf-w-3 uf-h-3" }) }),
|
|
1869
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "uf-text-xs", children: [
|
|
1517
1870
|
t.processingTime.label,
|
|
1518
1871
|
":",
|
|
1519
1872
|
" ",
|
|
1520
|
-
/* @__PURE__ */ (0,
|
|
1873
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "uf-text-foreground", children: formatProcessingTime(processingTime) })
|
|
1521
1874
|
] })
|
|
1522
1875
|
] }),
|
|
1523
|
-
/* @__PURE__ */ (0,
|
|
1524
|
-
/* @__PURE__ */ (0,
|
|
1525
|
-
/* @__PURE__ */ (0,
|
|
1876
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
1877
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-bg-secondary uf-rounded-full uf-p-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.FileText, { className: "uf-w-3 uf-h-3" }) }),
|
|
1878
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "uf-text-xs", children: [
|
|
1526
1879
|
t.help.needHelp,
|
|
1527
1880
|
" ",
|
|
1528
|
-
/* @__PURE__ */ (0,
|
|
1881
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1529
1882
|
"a",
|
|
1530
1883
|
{
|
|
1531
1884
|
href: "#",
|
|
@@ -1536,8 +1889,8 @@ function TransferCryptoBase({
|
|
|
1536
1889
|
] })
|
|
1537
1890
|
] })
|
|
1538
1891
|
] }),
|
|
1539
|
-
/* @__PURE__ */ (0,
|
|
1540
|
-
/* @__PURE__ */ (0,
|
|
1892
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-pt-2", children: [
|
|
1893
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1541
1894
|
"a",
|
|
1542
1895
|
{
|
|
1543
1896
|
href: "https://unifold.io/terms",
|
|
@@ -1546,38 +1899,37 @@ function TransferCryptoBase({
|
|
|
1546
1899
|
children: t.terms.termsApply
|
|
1547
1900
|
}
|
|
1548
1901
|
),
|
|
1549
|
-
depositExecutions.length > 1 && /* @__PURE__ */ (0,
|
|
1902
|
+
depositExecutions.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1550
1903
|
"button",
|
|
1551
1904
|
{
|
|
1552
1905
|
onClick: () => setDepositsModalOpen(true),
|
|
1553
1906
|
className: "uf-flex uf-items-center uf-gap-1 uf-text-muted-foreground hover:uf-text-foreground uf-transition-colors uf-animate-in uf-fade-in uf-slide-in-from-right-8 uf-duration-1000",
|
|
1554
1907
|
children: [
|
|
1555
|
-
/* @__PURE__ */ (0,
|
|
1908
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.Clock, { className: "uf-w-3.5 uf-h-3.5" }),
|
|
1556
1909
|
"Track deposits (",
|
|
1557
1910
|
depositExecutions.length,
|
|
1558
1911
|
")",
|
|
1559
|
-
/* @__PURE__ */ (0,
|
|
1912
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react7.ChevronRight, { className: "uf-w-3 uf-h-3" })
|
|
1560
1913
|
]
|
|
1561
1914
|
}
|
|
1562
1915
|
)
|
|
1563
1916
|
] })
|
|
1564
1917
|
] }),
|
|
1565
|
-
depositExecutions.length === 1 && /* @__PURE__ */ (0,
|
|
1918
|
+
depositExecutions.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uf-fixed uf-bottom-4 uf-left-1/2 uf--translate-x-1/2 uf-w-[360px] uf-max-w-[calc(100vw-2rem)] uf-z-[100]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1566
1919
|
DepositSuccessToast,
|
|
1567
1920
|
{
|
|
1568
1921
|
depositTx: depositExecutions[0].transaction_hash,
|
|
1569
|
-
completionTx: depositExecutions[0].destination_transaction_hashes?.[0] || (depositExecutions[0].status === "succeeded" /* SUCCEEDED */ ? depositExecutions[0].transaction_hash : void 0),
|
|
1570
1922
|
orderSubmittedAt: depositExecutions[0].created_at || (/* @__PURE__ */ new Date()).toISOString(),
|
|
1571
1923
|
orderFilledAt: depositExecutions[0].updated_at || (/* @__PURE__ */ new Date()).toISOString(),
|
|
1572
1924
|
explorerUrl: depositExecutions[0].explorer_url,
|
|
1573
|
-
completionExplorerUrl: depositExecutions[0].destination_transaction_hashes?.[0] ? `https://polygonscan.com/tx/${depositExecutions[0].destination_transaction_hashes[0]}` : depositExecutions[0].status === "succeeded" /* SUCCEEDED */ ? depositExecutions[0].explorer_url : void 0,
|
|
1574
1925
|
status: depositExecutions[0].status,
|
|
1575
1926
|
tokenIconUrl: depositExecutions[0].source_token_metadata?.icon_url,
|
|
1927
|
+
sourceAmountBaseUnit: depositExecutions[0].source_amount_base_unit,
|
|
1576
1928
|
onClose: () => setDepositExecutions([])
|
|
1577
1929
|
},
|
|
1578
1930
|
depositExecutions[0].id
|
|
1579
1931
|
) }),
|
|
1580
|
-
/* @__PURE__ */ (0,
|
|
1932
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1581
1933
|
DepositsModal,
|
|
1582
1934
|
{
|
|
1583
1935
|
open: depositsModalOpen,
|
|
@@ -1592,9 +1944,9 @@ function TransferCryptoBase({
|
|
|
1592
1944
|
}
|
|
1593
1945
|
|
|
1594
1946
|
// src/components/deposits/TransferCrypto.tsx
|
|
1595
|
-
var
|
|
1947
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1596
1948
|
function TransferCrypto(props) {
|
|
1597
|
-
return /* @__PURE__ */ (0,
|
|
1949
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1598
1950
|
TransferCryptoBase,
|
|
1599
1951
|
{
|
|
1600
1952
|
...props,
|
|
@@ -1606,50 +1958,49 @@ function TransferCrypto(props) {
|
|
|
1606
1958
|
|
|
1607
1959
|
// src/components/deposits/BuyWithCard.tsx
|
|
1608
1960
|
var import_react5 = require("react");
|
|
1609
|
-
var
|
|
1961
|
+
var import_lucide_react10 = require("lucide-react");
|
|
1610
1962
|
|
|
1611
1963
|
// src/components/deposits/CurrencyModal.tsx
|
|
1612
1964
|
var import_react4 = require("react");
|
|
1613
|
-
var
|
|
1965
|
+
var import_lucide_react9 = require("lucide-react");
|
|
1614
1966
|
|
|
1615
1967
|
// src/components/currency/CurrencyListItem.tsx
|
|
1616
|
-
var
|
|
1617
|
-
var
|
|
1968
|
+
var import_lucide_react8 = require("lucide-react");
|
|
1969
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1618
1970
|
function CurrencyListItem({
|
|
1619
1971
|
currency,
|
|
1620
1972
|
isSelected,
|
|
1621
1973
|
onSelect
|
|
1622
1974
|
}) {
|
|
1623
|
-
|
|
1975
|
+
const iconUrl = getPreferredIconUrl(currency.icon_urls, "png") || currency.icon_url;
|
|
1976
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1624
1977
|
"button",
|
|
1625
1978
|
{
|
|
1626
1979
|
onClick: () => onSelect(currency.currency_code),
|
|
1627
1980
|
className: "uf-w-full uf-bg-secondary hover:uf-bg-accent uf-transition-colors uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-group",
|
|
1628
1981
|
children: [
|
|
1629
|
-
/* @__PURE__ */ (0,
|
|
1630
|
-
/* @__PURE__ */ (0,
|
|
1982
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
1983
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1631
1984
|
"img",
|
|
1632
1985
|
{
|
|
1633
|
-
src:
|
|
1986
|
+
src: iconUrl,
|
|
1634
1987
|
alt: currency.name,
|
|
1635
|
-
|
|
1636
|
-
height: 40,
|
|
1637
|
-
className: "uf-w-full uf-h-full uf-object-cover uf-rounded-full"
|
|
1988
|
+
className: "uf-w-10 uf-h-10 uf-flex-shrink-0"
|
|
1638
1989
|
}
|
|
1639
|
-
)
|
|
1640
|
-
/* @__PURE__ */ (0,
|
|
1641
|
-
/* @__PURE__ */ (0,
|
|
1642
|
-
/* @__PURE__ */ (0,
|
|
1990
|
+
),
|
|
1991
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "uf-text-left", children: [
|
|
1992
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "uf-text-sm uf-font-normal uf-text-foreground", children: currency.name }),
|
|
1993
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "uf-text-xs uf-text-muted-foreground uf-font-light", children: currency.currency_code.toUpperCase() })
|
|
1643
1994
|
] })
|
|
1644
1995
|
] }),
|
|
1645
|
-
isSelected && /* @__PURE__ */ (0,
|
|
1996
|
+
isSelected && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.Check, { className: "uf-w-4 uf-h-4 uf-text-foreground" })
|
|
1646
1997
|
]
|
|
1647
1998
|
}
|
|
1648
1999
|
);
|
|
1649
2000
|
}
|
|
1650
2001
|
|
|
1651
2002
|
// src/components/currency/CurrencyListSection.tsx
|
|
1652
|
-
var
|
|
2003
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1653
2004
|
function CurrencyListSection({
|
|
1654
2005
|
title,
|
|
1655
2006
|
currencies,
|
|
@@ -1657,9 +2008,9 @@ function CurrencyListSection({
|
|
|
1657
2008
|
onSelect
|
|
1658
2009
|
}) {
|
|
1659
2010
|
if (currencies.length === 0) return null;
|
|
1660
|
-
return /* @__PURE__ */ (0,
|
|
1661
|
-
/* @__PURE__ */ (0,
|
|
1662
|
-
currencies.map((currency) => /* @__PURE__ */ (0,
|
|
2011
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
2012
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "uf-px-1 uf-pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: title }) }),
|
|
2013
|
+
currencies.map((currency) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1663
2014
|
CurrencyListItem,
|
|
1664
2015
|
{
|
|
1665
2016
|
currency,
|
|
@@ -1672,7 +2023,7 @@ function CurrencyListSection({
|
|
|
1672
2023
|
}
|
|
1673
2024
|
|
|
1674
2025
|
// src/components/deposits/CurrencyModal.tsx
|
|
1675
|
-
var
|
|
2026
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1676
2027
|
function CurrencyModal({
|
|
1677
2028
|
open,
|
|
1678
2029
|
onOpenChange,
|
|
@@ -1709,8 +2060,8 @@ function CurrencyModal({
|
|
|
1709
2060
|
onOpenChange(false);
|
|
1710
2061
|
setSearchQuery("");
|
|
1711
2062
|
};
|
|
1712
|
-
return /* @__PURE__ */ (0,
|
|
1713
|
-
/* @__PURE__ */ (0,
|
|
2063
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(DialogContent, { className: `sm:uf-max-w-[400px] !uf-bg-card uf-border-secondary uf-text-foreground uf-p-0 uf-gap-0 [&>button]:uf-hidden ${themeClass}`, children: [
|
|
2064
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1714
2065
|
DepositHeader,
|
|
1715
2066
|
{
|
|
1716
2067
|
title: "Currency",
|
|
@@ -1719,9 +2070,9 @@ function CurrencyModal({
|
|
|
1719
2070
|
onClose: handleClose
|
|
1720
2071
|
}
|
|
1721
2072
|
),
|
|
1722
|
-
/* @__PURE__ */ (0,
|
|
1723
|
-
/* @__PURE__ */ (0,
|
|
1724
|
-
/* @__PURE__ */ (0,
|
|
2073
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-relative", children: [
|
|
2074
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Search, { className: "uf-absolute uf-left-4 uf-top-1/2 uf--translate-y-1/2 uf-w-4 uf-h-4 uf-text-muted-foreground" }),
|
|
2075
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1725
2076
|
"input",
|
|
1726
2077
|
{
|
|
1727
2078
|
type: "text",
|
|
@@ -1732,8 +2083,8 @@ function CurrencyModal({
|
|
|
1732
2083
|
}
|
|
1733
2084
|
)
|
|
1734
2085
|
] }) }),
|
|
1735
|
-
/* @__PURE__ */ (0,
|
|
1736
|
-
/* @__PURE__ */ (0,
|
|
2086
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-max-h-[500px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-space-y-2", children: [
|
|
2087
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1737
2088
|
CurrencyListSection,
|
|
1738
2089
|
{
|
|
1739
2090
|
title: "Popular currencies",
|
|
@@ -1742,8 +2093,8 @@ function CurrencyModal({
|
|
|
1742
2093
|
onSelect: handleSelect
|
|
1743
2094
|
}
|
|
1744
2095
|
),
|
|
1745
|
-
filteredPreferred.length > 0 && filteredOther.length > 0 && /* @__PURE__ */ (0,
|
|
1746
|
-
/* @__PURE__ */ (0,
|
|
2096
|
+
filteredPreferred.length > 0 && filteredOther.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-h-2" }),
|
|
2097
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1747
2098
|
CurrencyListSection,
|
|
1748
2099
|
{
|
|
1749
2100
|
title: "All currencies",
|
|
@@ -1752,25 +2103,13 @@ function CurrencyModal({
|
|
|
1752
2103
|
onSelect: handleSelect
|
|
1753
2104
|
}
|
|
1754
2105
|
),
|
|
1755
|
-
filteredPreferred.length === 0 && filteredOther.length === 0 && /* @__PURE__ */ (0,
|
|
2106
|
+
filteredPreferred.length === 0 && filteredOther.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-text-center uf-py-8 uf-text-muted-foreground uf-text-sm", children: "No currencies found" })
|
|
1756
2107
|
] }) })
|
|
1757
2108
|
] }) });
|
|
1758
2109
|
}
|
|
1759
2110
|
|
|
1760
2111
|
// src/hooks/use-user-ip.ts
|
|
1761
2112
|
var import_react_query = require("@tanstack/react-query");
|
|
1762
|
-
async function getIpViaMoonpay(moonpayApiKey) {
|
|
1763
|
-
const url = `https://api.moonpay.com/v3/ip_address?apiKey=${moonpayApiKey}`;
|
|
1764
|
-
const response = await fetch(url);
|
|
1765
|
-
if (!response.ok) {
|
|
1766
|
-
throw new Error(`Moonpay IP API failed: ${response.statusText}`);
|
|
1767
|
-
}
|
|
1768
|
-
const data = await response.json();
|
|
1769
|
-
return {
|
|
1770
|
-
alpha2: data.alpha2.toLowerCase(),
|
|
1771
|
-
state: data.state?.toLowerCase()
|
|
1772
|
-
};
|
|
1773
|
-
}
|
|
1774
2113
|
async function getIpViaIpApi() {
|
|
1775
2114
|
const url = "https://ipapi.co/json";
|
|
1776
2115
|
const response = await fetch(url);
|
|
@@ -1783,7 +2122,7 @@ async function getIpViaIpApi() {
|
|
|
1783
2122
|
state: data.region_code?.toLowerCase()
|
|
1784
2123
|
};
|
|
1785
2124
|
}
|
|
1786
|
-
function useUserIp(
|
|
2125
|
+
function useUserIp() {
|
|
1787
2126
|
const {
|
|
1788
2127
|
data: userIpInfo,
|
|
1789
2128
|
isLoading,
|
|
@@ -1791,21 +2130,12 @@ function useUserIp(moonpayApiKey) {
|
|
|
1791
2130
|
} = (0, import_react_query.useQuery)({
|
|
1792
2131
|
queryKey: ["getUserIpInfo"],
|
|
1793
2132
|
queryFn: async () => {
|
|
1794
|
-
if (moonpayApiKey) {
|
|
1795
|
-
try {
|
|
1796
|
-
const moonpayIpData = await getIpViaMoonpay(moonpayApiKey);
|
|
1797
|
-
console.log("IP detected via Moonpay:", moonpayIpData);
|
|
1798
|
-
return moonpayIpData;
|
|
1799
|
-
} catch (error2) {
|
|
1800
|
-
console.warn("Moonpay IP API failed, trying fallback:", error2);
|
|
1801
|
-
}
|
|
1802
|
-
}
|
|
1803
2133
|
try {
|
|
1804
2134
|
const ipApiData = await getIpViaIpApi();
|
|
1805
2135
|
console.log("IP detected via ipapi.co:", ipApiData);
|
|
1806
2136
|
return ipApiData;
|
|
1807
2137
|
} catch (ipApiError) {
|
|
1808
|
-
console.error("
|
|
2138
|
+
console.error("IP detection failed:", ipApiError);
|
|
1809
2139
|
throw ipApiError;
|
|
1810
2140
|
}
|
|
1811
2141
|
},
|
|
@@ -1827,7 +2157,7 @@ function useUserIp(moonpayApiKey) {
|
|
|
1827
2157
|
}
|
|
1828
2158
|
|
|
1829
2159
|
// src/components/deposits/BuyWithCard.tsx
|
|
1830
|
-
var
|
|
2160
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1831
2161
|
var t2 = i18n.buyWithCard;
|
|
1832
2162
|
var QUICK_AMOUNTS = [100, 500, 1e3];
|
|
1833
2163
|
function getCurrencySymbol(currencyCode) {
|
|
@@ -1854,7 +2184,9 @@ function BuyWithCard({
|
|
|
1854
2184
|
destinationChainType,
|
|
1855
2185
|
destinationChainId,
|
|
1856
2186
|
destinationTokenAddress,
|
|
1857
|
-
themeClass = ""
|
|
2187
|
+
themeClass = "",
|
|
2188
|
+
wallets: externalWallets,
|
|
2189
|
+
assetCdnUrl
|
|
1858
2190
|
}) {
|
|
1859
2191
|
const [amount, setAmount] = (0, import_react5.useState)("500.00");
|
|
1860
2192
|
const [currency, setCurrency] = (0, import_react5.useState)("usd");
|
|
@@ -1889,8 +2221,9 @@ function BuyWithCard({
|
|
|
1889
2221
|
const [isAutoSelected, setIsAutoSelected] = (0, import_react5.useState)(true);
|
|
1890
2222
|
const [autoSelectedProvider, setAutoSelectedProvider] = (0, import_react5.useState)(null);
|
|
1891
2223
|
const [hasManualSelection, setHasManualSelection] = (0, import_react5.useState)(false);
|
|
1892
|
-
const [
|
|
1893
|
-
const [walletsLoading, setWalletsLoading] = (0, import_react5.useState)(
|
|
2224
|
+
const [internalWallets, setInternalWallets] = (0, import_react5.useState)([]);
|
|
2225
|
+
const [walletsLoading, setWalletsLoading] = (0, import_react5.useState)(!externalWallets?.length);
|
|
2226
|
+
const wallets = externalWallets?.length ? externalWallets : internalWallets;
|
|
1894
2227
|
const [countdown, setCountdown] = (0, import_react5.useState)(60);
|
|
1895
2228
|
const [fiatCurrencies, setFiatCurrencies] = (0, import_react5.useState)([]);
|
|
1896
2229
|
const [preferredCurrencyCodes, setPreferredCurrencyCodes] = (0, import_react5.useState)([]);
|
|
@@ -1919,7 +2252,15 @@ function BuyWithCard({
|
|
|
1919
2252
|
fetchFiatCurrencies();
|
|
1920
2253
|
}, [publishableKey]);
|
|
1921
2254
|
(0, import_react5.useEffect)(() => {
|
|
1922
|
-
|
|
2255
|
+
if (externalWallets?.length) {
|
|
2256
|
+
setWalletsLoading(false);
|
|
2257
|
+
return;
|
|
2258
|
+
}
|
|
2259
|
+
let retryTimeout = null;
|
|
2260
|
+
let isCancelled = false;
|
|
2261
|
+
const fetchWallets = async () => {
|
|
2262
|
+
if (isCancelled) return;
|
|
2263
|
+
setWalletsLoading(true);
|
|
1923
2264
|
try {
|
|
1924
2265
|
const response = await createEOA(
|
|
1925
2266
|
{
|
|
@@ -1931,16 +2272,26 @@ function BuyWithCard({
|
|
|
1931
2272
|
},
|
|
1932
2273
|
publishableKey
|
|
1933
2274
|
);
|
|
1934
|
-
|
|
2275
|
+
if (!isCancelled) {
|
|
2276
|
+
setInternalWallets(response.data);
|
|
2277
|
+
setWalletsLoading(false);
|
|
2278
|
+
}
|
|
1935
2279
|
} catch (err) {
|
|
1936
|
-
console.error("Error fetching wallets:", err);
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
2280
|
+
console.error("Error fetching wallets, retrying in 5s:", err);
|
|
2281
|
+
if (!isCancelled) {
|
|
2282
|
+
setWalletsLoading(false);
|
|
2283
|
+
retryTimeout = setTimeout(fetchWallets, 5e3);
|
|
2284
|
+
}
|
|
1940
2285
|
}
|
|
1941
|
-
}
|
|
2286
|
+
};
|
|
1942
2287
|
fetchWallets();
|
|
1943
|
-
|
|
2288
|
+
return () => {
|
|
2289
|
+
isCancelled = true;
|
|
2290
|
+
if (retryTimeout) {
|
|
2291
|
+
clearTimeout(retryTimeout);
|
|
2292
|
+
}
|
|
2293
|
+
};
|
|
2294
|
+
}, [userId, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, publishableKey, externalWallets]);
|
|
1944
2295
|
(0, import_react5.useEffect)(() => {
|
|
1945
2296
|
async function fetchSupportedTokens() {
|
|
1946
2297
|
try {
|
|
@@ -2107,38 +2458,36 @@ function BuyWithCard({
|
|
|
2107
2458
|
(a, b) => b.destination_amount - a.destination_amount
|
|
2108
2459
|
);
|
|
2109
2460
|
const currencySymbol = getCurrencySymbol(currency);
|
|
2110
|
-
return /* @__PURE__ */ (0,
|
|
2111
|
-
/* @__PURE__ */ (0,
|
|
2461
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-pb-1 uf-relative uf-overflow-hidden", children: [
|
|
2462
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
2112
2463
|
"div",
|
|
2113
2464
|
{
|
|
2114
2465
|
className: `uf-transition-all uf-duration-300 ${showQuotesView || showOnrampView ? "uf-opacity-0 uf-pointer-events-none uf-absolute uf-inset-0" : "uf-opacity-100"}`,
|
|
2115
2466
|
children: [
|
|
2116
|
-
/* @__PURE__ */ (0,
|
|
2117
|
-
/* @__PURE__ */ (0,
|
|
2467
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-mb-6 uf-pt-4", children: [
|
|
2468
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-flex uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
2118
2469
|
"button",
|
|
2119
2470
|
{
|
|
2120
2471
|
onClick: () => setShowCurrencyModal(true),
|
|
2121
2472
|
disabled: currenciesLoading,
|
|
2122
2473
|
className: "uf-flex uf-items-center uf-gap-1.5 uf-px-3 uf-py-1.5 uf-rounded-lg uf-bg-secondary hover:uf-bg-accent uf-transition-colors disabled:uf-opacity-50 disabled:uf-cursor-not-allowed",
|
|
2123
2474
|
children: [
|
|
2124
|
-
selectedCurrencyData && /* @__PURE__ */ (0,
|
|
2475
|
+
selectedCurrencyData && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2125
2476
|
"img",
|
|
2126
2477
|
{
|
|
2127
|
-
src: selectedCurrencyData.icon_url,
|
|
2478
|
+
src: getPreferredIconUrl(selectedCurrencyData.icon_urls, "png") || selectedCurrencyData.icon_url,
|
|
2128
2479
|
alt: selectedCurrencyData.name,
|
|
2129
|
-
|
|
2130
|
-
height: 16,
|
|
2131
|
-
className: "uf-w-full uf-h-full uf-object-cover uf-rounded-full"
|
|
2480
|
+
className: "uf-w-4 uf-h-4"
|
|
2132
2481
|
}
|
|
2133
|
-
)
|
|
2134
|
-
/* @__PURE__ */ (0,
|
|
2135
|
-
/* @__PURE__ */ (0,
|
|
2482
|
+
),
|
|
2483
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "uf-text-sm uf-text-foreground uf-font-medium", children: currency.toUpperCase() }),
|
|
2484
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.ChevronDown, { className: "uf-w-3.5 uf-h-3.5 uf-text-muted-foreground" })
|
|
2136
2485
|
]
|
|
2137
2486
|
}
|
|
2138
2487
|
) }),
|
|
2139
|
-
/* @__PURE__ */ (0,
|
|
2140
|
-
/* @__PURE__ */ (0,
|
|
2141
|
-
/* @__PURE__ */ (0,
|
|
2488
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-text-center uf-mb-4", children: [
|
|
2489
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-flex uf-items-center uf-justify-center uf-mb-2 uf-px-8", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-items-center uf-max-w-full", children: [
|
|
2490
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2142
2491
|
"span",
|
|
2143
2492
|
{
|
|
2144
2493
|
className: "uf-font-normal uf-text-foreground uf-flex-shrink-0 uf-mr-1",
|
|
@@ -2148,7 +2497,7 @@ function BuyWithCard({
|
|
|
2148
2497
|
children: currencySymbol
|
|
2149
2498
|
}
|
|
2150
2499
|
),
|
|
2151
|
-
/* @__PURE__ */ (0,
|
|
2500
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2152
2501
|
"input",
|
|
2153
2502
|
{
|
|
2154
2503
|
type: "text",
|
|
@@ -2164,12 +2513,12 @@ function BuyWithCard({
|
|
|
2164
2513
|
}
|
|
2165
2514
|
)
|
|
2166
2515
|
] }) }),
|
|
2167
|
-
quotesLoading ? /* @__PURE__ */ (0,
|
|
2516
|
+
quotesLoading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-flex uf-justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-h-4 uf-bg-muted uf-rounded uf-w-40 uf-animate-pulse" }) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-text-sm uf-text-muted-foreground uf-font-normal", children: [
|
|
2168
2517
|
calculateUSDC(),
|
|
2169
2518
|
" USDC (Perps)"
|
|
2170
2519
|
] })
|
|
2171
2520
|
] }),
|
|
2172
|
-
/* @__PURE__ */ (0,
|
|
2521
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-flex uf-gap-3 uf-justify-center", children: QUICK_AMOUNTS.map((quickAmount) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
2173
2522
|
"button",
|
|
2174
2523
|
{
|
|
2175
2524
|
onClick: () => handleQuickAmount(quickAmount),
|
|
@@ -2182,31 +2531,31 @@ function BuyWithCard({
|
|
|
2182
2531
|
quickAmount
|
|
2183
2532
|
)) })
|
|
2184
2533
|
] }),
|
|
2185
|
-
/* @__PURE__ */ (0,
|
|
2186
|
-
/* @__PURE__ */ (0,
|
|
2187
|
-
/* @__PURE__ */ (0,
|
|
2188
|
-
quotes.length > 0 && !quotesLoading && /* @__PURE__ */ (0,
|
|
2534
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-mb-6", children: [
|
|
2535
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-font-medium uf-mb-2 uf-px-1", children: [
|
|
2536
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "uf-text-foreground", children: "Provider" }),
|
|
2537
|
+
quotes.length > 0 && !quotesLoading && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "uf-text-[10px] uf-text-foreground uf-font-normal", children: [
|
|
2189
2538
|
"Refreshing in ",
|
|
2190
2539
|
countdown,
|
|
2191
2540
|
"s"
|
|
2192
2541
|
] })
|
|
2193
2542
|
] }),
|
|
2194
|
-
/* @__PURE__ */ (0,
|
|
2543
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2195
2544
|
"button",
|
|
2196
2545
|
{
|
|
2197
2546
|
onClick: () => handleViewChange("quotes"),
|
|
2198
2547
|
disabled: quotesLoading || quotes.length === 0,
|
|
2199
2548
|
className: "uf-w-full uf-bg-secondary hover:uf-bg-accent uf-transition-colors uf-rounded-xl uf-p-4 uf-group disabled:uf-opacity-50 disabled:uf-cursor-not-allowed",
|
|
2200
|
-
children: quotesLoading ? /* @__PURE__ */ (0,
|
|
2201
|
-
/* @__PURE__ */ (0,
|
|
2202
|
-
/* @__PURE__ */ (0,
|
|
2203
|
-
/* @__PURE__ */ (0,
|
|
2204
|
-
/* @__PURE__ */ (0,
|
|
2549
|
+
children: quotesLoading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-text-left uf-w-full uf-animate-pulse", children: [
|
|
2550
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-h-3 uf-bg-muted uf-rounded uf-w-28 uf-mb-3" }),
|
|
2551
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
2552
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-w-8 uf-h-8 uf-bg-muted uf-rounded-full" }),
|
|
2553
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-h-4 uf-bg-muted uf-rounded uf-w-32" })
|
|
2205
2554
|
] })
|
|
2206
|
-
] }) : /* @__PURE__ */ (0,
|
|
2207
|
-
isAutoSelected && /* @__PURE__ */ (0,
|
|
2208
|
-
selectedProvider && /* @__PURE__ */ (0,
|
|
2209
|
-
/* @__PURE__ */ (0,
|
|
2555
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-w-full uf-text-left", children: [
|
|
2556
|
+
isAutoSelected && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-text-xs uf-text-muted-foreground uf-font-normal uf-mb-2", children: "Auto-picked for you" }),
|
|
2557
|
+
selectedProvider && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
2558
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2210
2559
|
"img",
|
|
2211
2560
|
{
|
|
2212
2561
|
src: selectedProvider.icon_url,
|
|
@@ -2216,22 +2565,22 @@ function BuyWithCard({
|
|
|
2216
2565
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
2217
2566
|
}
|
|
2218
2567
|
),
|
|
2219
|
-
/* @__PURE__ */ (0,
|
|
2220
|
-
/* @__PURE__ */ (0,
|
|
2221
|
-
/* @__PURE__ */ (0,
|
|
2222
|
-
isAutoSelected && /* @__PURE__ */ (0,
|
|
2223
|
-
isAutoSelected && selectedProvider.low_kyc === false && /* @__PURE__ */ (0,
|
|
2224
|
-
selectedProvider.low_kyc === false && /* @__PURE__ */ (0,
|
|
2568
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex-1 uf-min-w-0", children: [
|
|
2569
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-text-sm uf-text-foreground uf-font-medium", children: selectedProvider.service_provider_display_name }),
|
|
2570
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: [
|
|
2571
|
+
isAutoSelected && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "uf-text-[10px] uf-text-green-400 uf-font-normal", children: "Best price" }),
|
|
2572
|
+
isAutoSelected && selectedProvider.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground", children: "\u2022" }),
|
|
2573
|
+
selectedProvider.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" })
|
|
2225
2574
|
] })
|
|
2226
2575
|
] }),
|
|
2227
|
-
quotes.length > 0 && /* @__PURE__ */ (0,
|
|
2576
|
+
quotes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground group-hover:uf-text-foreground uf-transition-colors uf-flex-shrink-0" })
|
|
2228
2577
|
] })
|
|
2229
2578
|
] })
|
|
2230
2579
|
}
|
|
2231
2580
|
),
|
|
2232
|
-
quotesError && /* @__PURE__ */ (0,
|
|
2581
|
+
quotesError && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-text-xs uf-text-red-400 uf-mt-2 uf-px-1", children: quotesError })
|
|
2233
2582
|
] }),
|
|
2234
|
-
/* @__PURE__ */ (0,
|
|
2583
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2235
2584
|
"button",
|
|
2236
2585
|
{
|
|
2237
2586
|
onClick: handleContinue,
|
|
@@ -2246,15 +2595,15 @@ function BuyWithCard({
|
|
|
2246
2595
|
]
|
|
2247
2596
|
}
|
|
2248
2597
|
),
|
|
2249
|
-
/* @__PURE__ */ (0,
|
|
2598
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2250
2599
|
"div",
|
|
2251
2600
|
{
|
|
2252
2601
|
className: `uf-transition-all uf-duration-300 ${showQuotesView && !showOnrampView ? "uf-opacity-100" : "uf-opacity-0 uf-pointer-events-none uf-absolute uf-inset-0"}`,
|
|
2253
|
-
children: /* @__PURE__ */ (0,
|
|
2602
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-space-y-2 uf-pt-2", children: sortedQuotes.map((quote, index) => {
|
|
2254
2603
|
const badges = getProviderBadges(quote, sortedQuotes);
|
|
2255
2604
|
const displayName = quote.service_provider_display_name;
|
|
2256
2605
|
const isSelected = selectedProvider?.service_provider === quote.service_provider;
|
|
2257
|
-
return /* @__PURE__ */ (0,
|
|
2606
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
2258
2607
|
"button",
|
|
2259
2608
|
{
|
|
2260
2609
|
onClick: () => {
|
|
@@ -2267,8 +2616,8 @@ function BuyWithCard({
|
|
|
2267
2616
|
},
|
|
2268
2617
|
className: `uf-w-full uf-bg-secondary hover:uf-bg-accent uf-transition-colors uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-group ${isSelected ? "uf-ring-2 uf-ring-inset uf-ring-primary" : ""}`,
|
|
2269
2618
|
children: [
|
|
2270
|
-
/* @__PURE__ */ (0,
|
|
2271
|
-
/* @__PURE__ */ (0,
|
|
2619
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
2620
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-w-10 uf-h-10 uf-flex uf-items-center uf-justify-center uf-flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2272
2621
|
"img",
|
|
2273
2622
|
{
|
|
2274
2623
|
src: quote.icon_url,
|
|
@@ -2278,10 +2627,10 @@ function BuyWithCard({
|
|
|
2278
2627
|
className: "uf-rounded-full"
|
|
2279
2628
|
}
|
|
2280
2629
|
) }),
|
|
2281
|
-
/* @__PURE__ */ (0,
|
|
2282
|
-
/* @__PURE__ */ (0,
|
|
2283
|
-
/* @__PURE__ */ (0,
|
|
2284
|
-
badges.map((badge, i) => /* @__PURE__ */ (0,
|
|
2630
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-text-left", children: [
|
|
2631
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-text-sm uf-font-medium uf-text-foreground", children: displayName }),
|
|
2632
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: [
|
|
2633
|
+
badges.map((badge, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
2285
2634
|
"span",
|
|
2286
2635
|
{
|
|
2287
2636
|
className: "uf-text-[10px] uf-text-green-400 uf-font-normal",
|
|
@@ -2292,17 +2641,17 @@ function BuyWithCard({
|
|
|
2292
2641
|
},
|
|
2293
2642
|
i
|
|
2294
2643
|
)),
|
|
2295
|
-
quote.low_kyc === false && badges.length > 0 && /* @__PURE__ */ (0,
|
|
2296
|
-
quote.low_kyc === false && /* @__PURE__ */ (0,
|
|
2644
|
+
quote.low_kyc === false && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground", children: "\u2022" }),
|
|
2645
|
+
quote.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" })
|
|
2297
2646
|
] })
|
|
2298
2647
|
] })
|
|
2299
2648
|
] }),
|
|
2300
|
-
/* @__PURE__ */ (0,
|
|
2301
|
-
/* @__PURE__ */ (0,
|
|
2649
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-text-right", children: [
|
|
2650
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-text-sm uf-font-medium uf-text-foreground", children: [
|
|
2302
2651
|
quote.destination_amount.toFixed(2),
|
|
2303
2652
|
" USDC"
|
|
2304
2653
|
] }),
|
|
2305
|
-
/* @__PURE__ */ (0,
|
|
2654
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-text-xs uf-text-muted-foreground uf-font-normal", children: [
|
|
2306
2655
|
currencySymbol,
|
|
2307
2656
|
" ",
|
|
2308
2657
|
amount
|
|
@@ -2315,12 +2664,12 @@ function BuyWithCard({
|
|
|
2315
2664
|
}) })
|
|
2316
2665
|
}
|
|
2317
2666
|
),
|
|
2318
|
-
/* @__PURE__ */ (0,
|
|
2667
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2319
2668
|
"div",
|
|
2320
2669
|
{
|
|
2321
2670
|
className: `uf-transition-all uf-duration-300 ${showOnrampView ? "uf-opacity-100" : "uf-opacity-0 uf-pointer-events-none uf-absolute uf-inset-0"}`,
|
|
2322
|
-
children: onrampSession && /* @__PURE__ */ (0,
|
|
2323
|
-
/* @__PURE__ */ (0,
|
|
2671
|
+
children: onrampSession && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-6 uf-pb-4 uf-px-2", children: [
|
|
2672
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2324
2673
|
"img",
|
|
2325
2674
|
{
|
|
2326
2675
|
src: onrampSession.provider.icon_url,
|
|
@@ -2330,88 +2679,79 @@ function BuyWithCard({
|
|
|
2330
2679
|
className: "uf-rounded-2xl"
|
|
2331
2680
|
}
|
|
2332
2681
|
) }),
|
|
2333
|
-
/* @__PURE__ */ (0,
|
|
2682
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: "uf-text-xl uf-font-medium uf-text-foreground uf-mb-2", children: t2.onramp.completeTransaction.replace(
|
|
2334
2683
|
"{{provider}}",
|
|
2335
2684
|
onrampSession.provider.service_provider_display_name
|
|
2336
2685
|
) }),
|
|
2337
|
-
/* @__PURE__ */ (0,
|
|
2338
|
-
/* @__PURE__ */ (0,
|
|
2339
|
-
/* @__PURE__ */ (0,
|
|
2340
|
-
/* @__PURE__ */ (0,
|
|
2686
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "uf-text-sm uf-text-muted-foreground uf-mb-8", children: t2.onramp.canCloseModal }),
|
|
2687
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-4 uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-center", children: [
|
|
2688
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-min-w-[72px]", children: [
|
|
2689
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-h-8 uf-flex uf-items-center uf-justify-center uf-mb-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2341
2690
|
"img",
|
|
2342
2691
|
{
|
|
2343
|
-
src:
|
|
2344
|
-
`/icons/currencies/${onrampSession.sourceCurrency.toLowerCase()}.svg
|
|
2692
|
+
src: getIconUrlWithCdn(
|
|
2693
|
+
`/icons/currencies/svg/${onrampSession.sourceCurrency.toLowerCase()}.svg`,
|
|
2694
|
+
assetCdnUrl
|
|
2345
2695
|
),
|
|
2346
2696
|
alt: onrampSession.sourceCurrency.toUpperCase(),
|
|
2347
|
-
|
|
2348
|
-
height: 28,
|
|
2349
|
-
className: "uf-rounded-full"
|
|
2697
|
+
className: "uf-w-7 uf-h-7 uf-rounded-full"
|
|
2350
2698
|
}
|
|
2351
2699
|
) }),
|
|
2352
|
-
/* @__PURE__ */ (0,
|
|
2353
|
-
/* @__PURE__ */ (0,
|
|
2700
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-text-center", children: t2.onramp.youUse }),
|
|
2701
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "uf-text-sm uf-font-medium uf-text-foreground uf-text-center", children: onrampSession.sourceCurrency.toUpperCase() })
|
|
2354
2702
|
] }),
|
|
2355
|
-
/* @__PURE__ */ (0,
|
|
2356
|
-
/* @__PURE__ */ (0,
|
|
2357
|
-
/* @__PURE__ */ (0,
|
|
2358
|
-
/* @__PURE__ */ (0,
|
|
2703
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-text-muted-foreground uf-px-1 uf-self-start uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.ChevronRight, { className: "uf-w-4 uf-h-4" }) }),
|
|
2704
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-min-w-[72px]", children: [
|
|
2705
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-h-8 uf-flex uf-items-center uf-justify-center uf-mb-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-relative", children: [
|
|
2706
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2359
2707
|
"img",
|
|
2360
2708
|
{
|
|
2361
|
-
src:
|
|
2709
|
+
src: getIconUrlWithCdn("/icons/tokens/svg/usdc.svg", assetCdnUrl),
|
|
2362
2710
|
alt: "USDC",
|
|
2363
|
-
|
|
2364
|
-
height: 28,
|
|
2365
|
-
className: "uf-rounded-full"
|
|
2711
|
+
className: "uf-w-7 uf-h-7 uf-rounded-full"
|
|
2366
2712
|
}
|
|
2367
2713
|
),
|
|
2368
|
-
/* @__PURE__ */ (0,
|
|
2714
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2369
2715
|
"img",
|
|
2370
2716
|
{
|
|
2371
|
-
src:
|
|
2717
|
+
src: getIconUrlWithCdn("/icons/networks/svg/polygon.svg", assetCdnUrl),
|
|
2372
2718
|
alt: "Polygon",
|
|
2373
|
-
|
|
2374
|
-
height: 14,
|
|
2375
|
-
className: "uf-absolute uf--bottom-0.5 uf--right-0.5 uf-rounded-full"
|
|
2719
|
+
className: "uf-w-3.5 uf-h-3.5 uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full"
|
|
2376
2720
|
}
|
|
2377
2721
|
)
|
|
2378
2722
|
] }) }),
|
|
2379
|
-
/* @__PURE__ */ (0,
|
|
2380
|
-
/* @__PURE__ */ (0,
|
|
2723
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-text-center", children: t2.onramp.youBuy }),
|
|
2724
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "uf-text-sm uf-font-medium uf-text-foreground uf-text-center", children: "USDC" })
|
|
2381
2725
|
] }),
|
|
2382
|
-
/* @__PURE__ */ (0,
|
|
2383
|
-
/* @__PURE__ */ (0,
|
|
2384
|
-
/* @__PURE__ */ (0,
|
|
2385
|
-
/* @__PURE__ */ (0,
|
|
2726
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-text-muted-foreground uf-px-1 uf-self-start uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.ChevronRight, { className: "uf-w-4 uf-h-4" }) }),
|
|
2727
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-min-w-[72px]", children: [
|
|
2728
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-h-8 uf-flex uf-items-center uf-justify-center uf-mb-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-relative", children: [
|
|
2729
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2386
2730
|
"img",
|
|
2387
2731
|
{
|
|
2388
|
-
src: destinationToken?.icon_url ||
|
|
2732
|
+
src: destinationToken?.icon_url || getIconUrlWithCdn("/icons/tokens/svg/usdc.svg", assetCdnUrl),
|
|
2389
2733
|
alt: displayTokenSymbol,
|
|
2390
|
-
|
|
2391
|
-
height: 28,
|
|
2392
|
-
className: "uf-rounded-full"
|
|
2734
|
+
className: "uf-w-7 uf-h-7 uf-rounded-full"
|
|
2393
2735
|
}
|
|
2394
2736
|
),
|
|
2395
|
-
destinationChain?.icon_url && /* @__PURE__ */ (0,
|
|
2737
|
+
destinationChain?.icon_url && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2396
2738
|
"img",
|
|
2397
2739
|
{
|
|
2398
2740
|
src: destinationChain.icon_url,
|
|
2399
2741
|
alt: destinationChain.chain_name,
|
|
2400
|
-
|
|
2401
|
-
height: 14,
|
|
2402
|
-
className: "uf-absolute uf--bottom-0.5 uf--right-0.5 uf-rounded-full"
|
|
2742
|
+
className: "uf-w-3.5 uf-h-3.5 uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full"
|
|
2403
2743
|
}
|
|
2404
2744
|
)
|
|
2405
2745
|
] }) }),
|
|
2406
|
-
/* @__PURE__ */ (0,
|
|
2407
|
-
/* @__PURE__ */ (0,
|
|
2746
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-text-center", children: t2.onramp.youReceive }),
|
|
2747
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "uf-text-sm uf-font-medium uf-text-foreground uf-text-center", children: displayTokenSymbol })
|
|
2408
2748
|
] })
|
|
2409
2749
|
] }) }),
|
|
2410
|
-
/* @__PURE__ */ (0,
|
|
2750
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: t2.onramp.intentAddressNote }) })
|
|
2411
2751
|
] })
|
|
2412
2752
|
}
|
|
2413
2753
|
),
|
|
2414
|
-
/* @__PURE__ */ (0,
|
|
2754
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2415
2755
|
CurrencyModal,
|
|
2416
2756
|
{
|
|
2417
2757
|
open: showCurrencyModal,
|
|
@@ -2429,110 +2769,44 @@ function BuyWithCard({
|
|
|
2429
2769
|
}
|
|
2430
2770
|
|
|
2431
2771
|
// src/components/deposits/buttons/TransferCryptoButton.tsx
|
|
2432
|
-
var
|
|
2433
|
-
var
|
|
2772
|
+
var import_lucide_react11 = require("lucide-react");
|
|
2773
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
2434
2774
|
function TransferCryptoButton({
|
|
2435
2775
|
onClick,
|
|
2436
2776
|
title,
|
|
2437
|
-
subtitle
|
|
2777
|
+
subtitle,
|
|
2778
|
+
featuredTokens
|
|
2438
2779
|
}) {
|
|
2439
|
-
|
|
2780
|
+
const sortedTokens = featuredTokens ? [...featuredTokens].sort((a, b) => a.position - b.position) : [];
|
|
2781
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
2440
2782
|
"button",
|
|
2441
2783
|
{
|
|
2442
2784
|
onClick,
|
|
2443
2785
|
className: "uf-w-full uf-bg-secondary hover:uf-bg-accent uf-transition-colors uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-group",
|
|
2444
2786
|
children: [
|
|
2445
|
-
/* @__PURE__ */ (0,
|
|
2446
|
-
/* @__PURE__ */ (0,
|
|
2447
|
-
/* @__PURE__ */ (0,
|
|
2448
|
-
/* @__PURE__ */ (0,
|
|
2449
|
-
/* @__PURE__ */ (0,
|
|
2787
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
2788
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react11.Zap, { className: "uf-w-5 uf-h-5" }) }),
|
|
2789
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "uf-text-left", children: [
|
|
2790
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uf-text-sm uf-font-light uf-mb-0.5 uf-text-foreground", children: title }),
|
|
2791
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uf-text-muted-foreground uf-text-xs uf-font-light", children: subtitle })
|
|
2450
2792
|
] })
|
|
2451
2793
|
] }),
|
|
2452
|
-
/* @__PURE__ */ (0,
|
|
2453
|
-
/* @__PURE__ */ (0,
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
{
|
|
2457
|
-
src: getIconUrl("/icons/networks/ethereum.svg"),
|
|
2458
|
-
alt: "ETH",
|
|
2459
|
-
width: 20,
|
|
2460
|
-
height: 20,
|
|
2461
|
-
className: "uf-rounded-full uf-border-2 uf-border-secondary"
|
|
2462
|
-
}
|
|
2463
|
-
),
|
|
2464
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2465
|
-
"img",
|
|
2466
|
-
{
|
|
2467
|
-
src: getIconUrl("/icons/networks/optimism.svg"),
|
|
2468
|
-
alt: "OP",
|
|
2469
|
-
width: 20,
|
|
2470
|
-
height: 20,
|
|
2471
|
-
className: "uf-rounded-full uf-border-2 uf-border-secondary"
|
|
2472
|
-
}
|
|
2473
|
-
),
|
|
2474
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2475
|
-
"img",
|
|
2476
|
-
{
|
|
2477
|
-
src: getIconUrl("/icons/networks/polygon.svg"),
|
|
2478
|
-
alt: "MATIC",
|
|
2479
|
-
width: 20,
|
|
2480
|
-
height: 20,
|
|
2481
|
-
className: "uf-rounded-full uf-border-2 uf-border-secondary"
|
|
2482
|
-
}
|
|
2483
|
-
),
|
|
2484
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2485
|
-
"img",
|
|
2486
|
-
{
|
|
2487
|
-
src: getIconUrl("/icons/networks/arbitrum.svg"),
|
|
2488
|
-
alt: "ARB",
|
|
2489
|
-
width: 20,
|
|
2490
|
-
height: 20,
|
|
2491
|
-
className: "uf-rounded-full uf-border-2 uf-border-secondary"
|
|
2492
|
-
}
|
|
2493
|
-
),
|
|
2494
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2495
|
-
"img",
|
|
2496
|
-
{
|
|
2497
|
-
src: getIconUrl("/icons/tokens/usdc.svg"),
|
|
2498
|
-
alt: "USDC",
|
|
2499
|
-
width: 20,
|
|
2500
|
-
height: 20,
|
|
2501
|
-
className: "uf-rounded-full uf-border-2 uf-border-secondary"
|
|
2502
|
-
}
|
|
2503
|
-
),
|
|
2504
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2505
|
-
"img",
|
|
2506
|
-
{
|
|
2507
|
-
src: getIconUrl("/icons/networks/solana.svg"),
|
|
2508
|
-
alt: "SOL",
|
|
2509
|
-
width: 20,
|
|
2510
|
-
height: 20,
|
|
2511
|
-
className: "uf-rounded-full uf-border-2 uf-border-secondary"
|
|
2512
|
-
}
|
|
2513
|
-
),
|
|
2514
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2515
|
-
"img",
|
|
2516
|
-
{
|
|
2517
|
-
src: getIconUrl("/icons/tokens/avax.svg"),
|
|
2518
|
-
alt: "AVAX",
|
|
2519
|
-
width: 20,
|
|
2520
|
-
height: 20,
|
|
2521
|
-
className: "uf-rounded-full uf-border-2 uf-border-secondary"
|
|
2522
|
-
}
|
|
2523
|
-
),
|
|
2524
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2794
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
2795
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uf-flex uf--space-x-2", children: sortedTokens.map((token) => {
|
|
2796
|
+
const iconUrl = token.icon_urls.find((u) => u.format === "svg")?.url || token.icon_urls.find((u) => u.format === "png")?.url;
|
|
2797
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2525
2798
|
"img",
|
|
2526
2799
|
{
|
|
2527
|
-
src:
|
|
2528
|
-
alt:
|
|
2800
|
+
src: iconUrl,
|
|
2801
|
+
alt: token.name,
|
|
2529
2802
|
width: 20,
|
|
2530
2803
|
height: 20,
|
|
2531
2804
|
className: "uf-rounded-full uf-border-2 uf-border-secondary"
|
|
2532
|
-
}
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2805
|
+
},
|
|
2806
|
+
token.name
|
|
2807
|
+
);
|
|
2808
|
+
}) }),
|
|
2809
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react11.ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground group-hover:uf-text-foreground uf-transition-colors" })
|
|
2536
2810
|
] })
|
|
2537
2811
|
]
|
|
2538
2812
|
}
|
|
@@ -2540,50 +2814,43 @@ function TransferCryptoButton({
|
|
|
2540
2814
|
}
|
|
2541
2815
|
|
|
2542
2816
|
// src/components/deposits/buttons/DepositWithCardButton.tsx
|
|
2543
|
-
var
|
|
2544
|
-
var
|
|
2817
|
+
var import_lucide_react12 = require("lucide-react");
|
|
2818
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
2545
2819
|
function DepositWithCardButton({
|
|
2546
2820
|
onClick,
|
|
2547
2821
|
title,
|
|
2548
|
-
subtitle
|
|
2822
|
+
subtitle,
|
|
2823
|
+
paymentNetworks
|
|
2549
2824
|
}) {
|
|
2550
|
-
return /* @__PURE__ */ (0,
|
|
2825
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
2551
2826
|
"button",
|
|
2552
2827
|
{
|
|
2553
2828
|
onClick,
|
|
2554
2829
|
className: "uf-w-full uf-bg-secondary hover:uf-bg-accent uf-transition-colors uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-group",
|
|
2555
2830
|
children: [
|
|
2556
|
-
/* @__PURE__ */ (0,
|
|
2557
|
-
/* @__PURE__ */ (0,
|
|
2558
|
-
/* @__PURE__ */ (0,
|
|
2559
|
-
/* @__PURE__ */ (0,
|
|
2560
|
-
/* @__PURE__ */ (0,
|
|
2831
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
2832
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react12.CreditCard, { className: "uf-w-5 uf-h-5" }) }),
|
|
2833
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "uf-text-left", children: [
|
|
2834
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uf-text-sm uf-font-light uf-mb-0.5 uf-text-foreground", children: title }),
|
|
2835
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uf-text-muted-foreground uf-text-xs uf-font-light", children: subtitle })
|
|
2561
2836
|
] })
|
|
2562
2837
|
] }),
|
|
2563
|
-
/* @__PURE__ */ (0,
|
|
2564
|
-
/* @__PURE__ */ (0,
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
{
|
|
2568
|
-
src: getIconUrl("/icons/networks/mastercard.svg"),
|
|
2569
|
-
alt: "Mastercard",
|
|
2570
|
-
width: 32,
|
|
2571
|
-
height: 32,
|
|
2572
|
-
className: "uf-rounded"
|
|
2573
|
-
}
|
|
2574
|
-
),
|
|
2575
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2838
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
2839
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uf-flex uf-items-center uf-gap-1.5", children: paymentNetworks?.map((network) => {
|
|
2840
|
+
const iconUrl = network.icon_urls.find((u) => u.format === "svg")?.url || network.icon_urls.find((u) => u.format === "png")?.url;
|
|
2841
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
2576
2842
|
"img",
|
|
2577
2843
|
{
|
|
2578
|
-
src:
|
|
2579
|
-
alt:
|
|
2844
|
+
src: iconUrl,
|
|
2845
|
+
alt: network.name,
|
|
2580
2846
|
width: 32,
|
|
2581
2847
|
height: 32,
|
|
2582
2848
|
className: "uf-rounded"
|
|
2583
|
-
}
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2849
|
+
},
|
|
2850
|
+
network.name
|
|
2851
|
+
);
|
|
2852
|
+
}) }),
|
|
2853
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react12.ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground group-hover:uf-text-foreground uf-transition-colors" })
|
|
2587
2854
|
] })
|
|
2588
2855
|
]
|
|
2589
2856
|
}
|
|
@@ -2591,38 +2858,53 @@ function DepositWithCardButton({
|
|
|
2591
2858
|
}
|
|
2592
2859
|
|
|
2593
2860
|
// src/components/deposits/buttons/DepositTrackerButton.tsx
|
|
2594
|
-
var
|
|
2595
|
-
var
|
|
2861
|
+
var import_lucide_react13 = require("lucide-react");
|
|
2862
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
2596
2863
|
function DepositTrackerButton({
|
|
2597
2864
|
onClick,
|
|
2598
2865
|
title,
|
|
2599
2866
|
subtitle,
|
|
2600
2867
|
badge
|
|
2601
2868
|
}) {
|
|
2602
|
-
return /* @__PURE__ */ (0,
|
|
2869
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
2603
2870
|
"button",
|
|
2604
2871
|
{
|
|
2605
2872
|
onClick,
|
|
2606
2873
|
className: "uf-w-full uf-bg-secondary hover:uf-bg-accent uf-transition-colors uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-group",
|
|
2607
2874
|
children: [
|
|
2608
|
-
/* @__PURE__ */ (0,
|
|
2609
|
-
/* @__PURE__ */ (0,
|
|
2610
|
-
/* @__PURE__ */ (0,
|
|
2611
|
-
badge !== void 0 && badge > 0 && /* @__PURE__ */ (0,
|
|
2875
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
2876
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-bg-muted uf-rounded-lg uf-p-2 uf-relative", children: [
|
|
2877
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react13.Clock, { className: "uf-w-5 uf-h-5" }),
|
|
2878
|
+
badge !== void 0 && badge > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-absolute -uf-top-1 -uf-right-1 uf-bg-blue-500 uf-text-primary-foreground uf-text-[10px] uf-font-semibold uf-rounded-full uf-min-w-[18px] uf-h-[18px] uf-flex uf-items-center uf-justify-center uf-px-1", children: badge > 99 ? "99+" : badge })
|
|
2612
2879
|
] }),
|
|
2613
|
-
/* @__PURE__ */ (0,
|
|
2614
|
-
/* @__PURE__ */ (0,
|
|
2615
|
-
/* @__PURE__ */ (0,
|
|
2880
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-text-left", children: [
|
|
2881
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-text-sm uf-font-light uf-mb-0.5 uf-text-foreground", children: title }),
|
|
2882
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-text-muted-foreground uf-text-xs uf-font-light", children: subtitle })
|
|
2616
2883
|
] })
|
|
2617
2884
|
] }),
|
|
2618
|
-
/* @__PURE__ */ (0,
|
|
2885
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react13.ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground group-hover:uf-text-foreground uf-transition-colors" })
|
|
2619
2886
|
]
|
|
2620
2887
|
}
|
|
2621
2888
|
);
|
|
2622
2889
|
}
|
|
2623
2890
|
|
|
2624
2891
|
// src/components/deposits/DepositModal.tsx
|
|
2625
|
-
var
|
|
2892
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
2893
|
+
function SkeletonButton({ variant = "default" }) {
|
|
2894
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-animate-pulse", children: [
|
|
2895
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
2896
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-9 uf-h-9" }),
|
|
2897
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "uf-space-y-1.5", children: [
|
|
2898
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "uf-h-3.5 uf-w-24 uf-bg-muted uf-rounded" }),
|
|
2899
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "uf-h-3 uf-w-32 uf-bg-muted uf-rounded" })
|
|
2900
|
+
] })
|
|
2901
|
+
] }),
|
|
2902
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
2903
|
+
variant === "with-icons" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "uf-flex uf--space-x-1", children: [1, 2, 3].map((i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "uf-w-5 uf-h-5 uf-rounded-full uf-bg-muted uf-border-2 uf-border-secondary" }, i)) }),
|
|
2904
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted" })
|
|
2905
|
+
] })
|
|
2906
|
+
] });
|
|
2907
|
+
}
|
|
2626
2908
|
var t3 = i18n.depositModal;
|
|
2627
2909
|
function DepositModal({
|
|
2628
2910
|
open,
|
|
@@ -2647,6 +2929,15 @@ function DepositModal({
|
|
|
2647
2929
|
const [quotesCount, setQuotesCount] = (0, import_react6.useState)(0);
|
|
2648
2930
|
const [depositsModalOpen, setDepositsModalOpen] = (0, import_react6.useState)(false);
|
|
2649
2931
|
const [depositExecutions, setDepositExecutions] = (0, import_react6.useState)([]);
|
|
2932
|
+
const [projectConfig, setProjectConfig] = (0, import_react6.useState)(null);
|
|
2933
|
+
const [wallets, setWallets] = (0, import_react6.useState)([]);
|
|
2934
|
+
const [walletsLoading, setWalletsLoading] = (0, import_react6.useState)(false);
|
|
2935
|
+
(0, import_react6.useEffect)(() => {
|
|
2936
|
+
setProjectConfig(null);
|
|
2937
|
+
}, [publishableKey]);
|
|
2938
|
+
(0, import_react6.useEffect)(() => {
|
|
2939
|
+
setWallets([]);
|
|
2940
|
+
}, [userId, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, publishableKey]);
|
|
2650
2941
|
const [resolvedTheme, setResolvedTheme] = (0, import_react6.useState)(theme === "auto" ? "dark" : theme);
|
|
2651
2942
|
(0, import_react6.useEffect)(() => {
|
|
2652
2943
|
if (theme === "auto") {
|
|
@@ -2661,6 +2952,49 @@ function DepositModal({
|
|
|
2661
2952
|
setResolvedTheme(theme);
|
|
2662
2953
|
}
|
|
2663
2954
|
}, [theme]);
|
|
2955
|
+
(0, import_react6.useEffect)(() => {
|
|
2956
|
+
if (open && !projectConfig) {
|
|
2957
|
+
getProjectConfig(publishableKey).then(setProjectConfig).catch(console.error);
|
|
2958
|
+
}
|
|
2959
|
+
}, [open, publishableKey, projectConfig]);
|
|
2960
|
+
(0, import_react6.useEffect)(() => {
|
|
2961
|
+
if (!open || wallets.length > 0) return;
|
|
2962
|
+
let retryTimeout = null;
|
|
2963
|
+
let isCancelled = false;
|
|
2964
|
+
const fetchWallets = async () => {
|
|
2965
|
+
if (isCancelled) return;
|
|
2966
|
+
setWalletsLoading(true);
|
|
2967
|
+
try {
|
|
2968
|
+
const response = await createEOA(
|
|
2969
|
+
{
|
|
2970
|
+
user_id: userId,
|
|
2971
|
+
recipient_address: recipientAddress,
|
|
2972
|
+
destination_chain_type: destinationChainType,
|
|
2973
|
+
destination_chain_id: destinationChainId,
|
|
2974
|
+
destination_token_address: destinationTokenAddress
|
|
2975
|
+
},
|
|
2976
|
+
publishableKey
|
|
2977
|
+
);
|
|
2978
|
+
if (!isCancelled) {
|
|
2979
|
+
setWallets(response.data);
|
|
2980
|
+
setWalletsLoading(false);
|
|
2981
|
+
}
|
|
2982
|
+
} catch (error) {
|
|
2983
|
+
console.error("Error fetching wallets, retrying in 5s:", error);
|
|
2984
|
+
if (!isCancelled) {
|
|
2985
|
+
setWalletsLoading(false);
|
|
2986
|
+
retryTimeout = setTimeout(fetchWallets, 5e3);
|
|
2987
|
+
}
|
|
2988
|
+
}
|
|
2989
|
+
};
|
|
2990
|
+
fetchWallets();
|
|
2991
|
+
return () => {
|
|
2992
|
+
isCancelled = true;
|
|
2993
|
+
if (retryTimeout) {
|
|
2994
|
+
clearTimeout(retryTimeout);
|
|
2995
|
+
}
|
|
2996
|
+
};
|
|
2997
|
+
}, [open, userId, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, publishableKey, wallets.length]);
|
|
2664
2998
|
const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
|
|
2665
2999
|
const handleClose = () => {
|
|
2666
3000
|
onOpenChange(false);
|
|
@@ -2685,39 +3019,45 @@ function DepositModal({
|
|
|
2685
3019
|
setQuotesCount(count);
|
|
2686
3020
|
}
|
|
2687
3021
|
};
|
|
2688
|
-
return /* @__PURE__ */ (0,
|
|
2689
|
-
/* @__PURE__ */ (0,
|
|
3022
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ThemeProvider, { themeClass, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Dialog, { open, onOpenChange: handleClose, children: [
|
|
3023
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2690
3024
|
DialogContent,
|
|
2691
3025
|
{
|
|
2692
3026
|
className: `sm:uf-max-w-[400px] !uf-bg-card uf-border-secondary uf-text-foreground uf-p-0 uf-gap-0 uf-overflow-visible [&>button]:uf-hidden ${themeClass}`,
|
|
2693
3027
|
onPointerDownOutside: (e) => e.preventDefault(),
|
|
2694
3028
|
onInteractOutside: (e) => e.preventDefault(),
|
|
2695
|
-
children: view === "main" ? /* @__PURE__ */ (0,
|
|
2696
|
-
/* @__PURE__ */ (0,
|
|
3029
|
+
children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
|
|
3030
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2697
3031
|
DepositHeader,
|
|
2698
3032
|
{
|
|
2699
3033
|
title: modalTitle || "Deposit",
|
|
2700
3034
|
onClose: handleClose
|
|
2701
3035
|
}
|
|
2702
3036
|
),
|
|
2703
|
-
/* @__PURE__ */ (0,
|
|
2704
|
-
/* @__PURE__ */ (0,
|
|
3037
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: !projectConfig ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
|
|
3038
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SkeletonButton, { variant: "with-icons" }),
|
|
3039
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SkeletonButton, { variant: "with-icons" }),
|
|
3040
|
+
!hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SkeletonButton, {})
|
|
3041
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
|
|
3042
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2705
3043
|
TransferCryptoButton,
|
|
2706
3044
|
{
|
|
2707
3045
|
onClick: () => setView("transfer"),
|
|
2708
3046
|
title: t3.transferCrypto.title,
|
|
2709
|
-
subtitle: t3.transferCrypto.subtitle
|
|
3047
|
+
subtitle: t3.transferCrypto.subtitle,
|
|
3048
|
+
featuredTokens: projectConfig.transfer_crypto.networks
|
|
2710
3049
|
}
|
|
2711
3050
|
),
|
|
2712
|
-
/* @__PURE__ */ (0,
|
|
3051
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2713
3052
|
DepositWithCardButton,
|
|
2714
3053
|
{
|
|
2715
3054
|
onClick: () => setView("card"),
|
|
2716
3055
|
title: t3.depositWithCard.title,
|
|
2717
|
-
subtitle: t3.depositWithCard.subtitle
|
|
3056
|
+
subtitle: t3.depositWithCard.subtitle,
|
|
3057
|
+
paymentNetworks: projectConfig.payment_networks.networks
|
|
2718
3058
|
}
|
|
2719
3059
|
),
|
|
2720
|
-
!hideDepositTracker && /* @__PURE__ */ (0,
|
|
3060
|
+
!hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2721
3061
|
DepositTrackerButton,
|
|
2722
3062
|
{
|
|
2723
3063
|
onClick: () => setDepositsModalOpen(true),
|
|
@@ -2726,9 +3066,9 @@ function DepositModal({
|
|
|
2726
3066
|
badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
|
|
2727
3067
|
}
|
|
2728
3068
|
)
|
|
2729
|
-
] })
|
|
2730
|
-
] }) : view === "transfer" ? /* @__PURE__ */ (0,
|
|
2731
|
-
/* @__PURE__ */ (0,
|
|
3069
|
+
] }) })
|
|
3070
|
+
] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
|
|
3071
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2732
3072
|
DepositHeader,
|
|
2733
3073
|
{
|
|
2734
3074
|
title: t3.transferCrypto.title,
|
|
@@ -2737,7 +3077,7 @@ function DepositModal({
|
|
|
2737
3077
|
onClose: handleClose
|
|
2738
3078
|
}
|
|
2739
3079
|
),
|
|
2740
|
-
/* @__PURE__ */ (0,
|
|
3080
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2741
3081
|
TransferCrypto,
|
|
2742
3082
|
{
|
|
2743
3083
|
userId,
|
|
@@ -2748,11 +3088,12 @@ function DepositModal({
|
|
|
2748
3088
|
destinationTokenAddress,
|
|
2749
3089
|
onExecutionsChange: setDepositExecutions,
|
|
2750
3090
|
onDepositSuccess,
|
|
2751
|
-
onDepositError
|
|
3091
|
+
onDepositError,
|
|
3092
|
+
wallets
|
|
2752
3093
|
}
|
|
2753
3094
|
)
|
|
2754
|
-
] }) : /* @__PURE__ */ (0,
|
|
2755
|
-
/* @__PURE__ */ (0,
|
|
3095
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
|
|
3096
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2756
3097
|
DepositHeader,
|
|
2757
3098
|
{
|
|
2758
3099
|
title: cardView === "quotes" ? t3.quotes : modalTitle || "Deposit",
|
|
@@ -2762,7 +3103,7 @@ function DepositModal({
|
|
|
2762
3103
|
badge: cardView === "quotes" ? { count: quotesCount } : void 0
|
|
2763
3104
|
}
|
|
2764
3105
|
),
|
|
2765
|
-
/* @__PURE__ */ (0,
|
|
3106
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2766
3107
|
BuyWithCard,
|
|
2767
3108
|
{
|
|
2768
3109
|
userId,
|
|
@@ -2776,13 +3117,15 @@ function DepositModal({
|
|
|
2776
3117
|
destinationTokenAddress,
|
|
2777
3118
|
onDepositSuccess,
|
|
2778
3119
|
onDepositError,
|
|
2779
|
-
themeClass
|
|
3120
|
+
themeClass,
|
|
3121
|
+
wallets,
|
|
3122
|
+
assetCdnUrl: projectConfig?.asset_cdn_url
|
|
2780
3123
|
}
|
|
2781
3124
|
)
|
|
2782
3125
|
] })
|
|
2783
3126
|
}
|
|
2784
3127
|
),
|
|
2785
|
-
/* @__PURE__ */ (0,
|
|
3128
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2786
3129
|
DepositsModal,
|
|
2787
3130
|
{
|
|
2788
3131
|
open: depositsModalOpen,
|
|
@@ -2797,9 +3140,9 @@ function DepositModal({
|
|
|
2797
3140
|
}
|
|
2798
3141
|
|
|
2799
3142
|
// src/components/deposits/TransferCrypto2.tsx
|
|
2800
|
-
var
|
|
3143
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2801
3144
|
function TransferCrypto2(props) {
|
|
2802
|
-
return /* @__PURE__ */ (0,
|
|
3145
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2803
3146
|
TransferCryptoBase,
|
|
2804
3147
|
{
|
|
2805
3148
|
...props,
|
|
@@ -2815,6 +3158,7 @@ function TransferCrypto2(props) {
|
|
|
2815
3158
|
CurrencyListItem,
|
|
2816
3159
|
CurrencyListSection,
|
|
2817
3160
|
CurrencyModal,
|
|
3161
|
+
DepositDetailModal,
|
|
2818
3162
|
DepositExecutionItem,
|
|
2819
3163
|
DepositHeader,
|
|
2820
3164
|
DepositModal,
|
|
@@ -2861,6 +3205,7 @@ function TransferCrypto2(props) {
|
|
|
2861
3205
|
getApiBaseUrl,
|
|
2862
3206
|
getFiatCurrencies,
|
|
2863
3207
|
getIconUrl,
|
|
3208
|
+
getIconUrlWithCdn,
|
|
2864
3209
|
getMeldQuotes,
|
|
2865
3210
|
getSupportedDepositTokens,
|
|
2866
3211
|
getWalletByChainType,
|