@unifold/ui-react 0.1.63 → 0.1.64

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.mjs CHANGED
@@ -464,6 +464,36 @@ function ThemeProvider({
464
464
  );
465
465
  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
466
466
  }
467
+ function AccentColorOverride({
468
+ accentColor,
469
+ accentForeground,
470
+ children
471
+ }) {
472
+ const parent = useTheme();
473
+ const value = React.useMemo(() => {
474
+ if (!accentColor) return parent;
475
+ const foreground = accentForeground ?? parent.colors.primaryForeground;
476
+ const nextColors = {
477
+ ...parent.colors,
478
+ primary: accentColor,
479
+ primaryForeground: foreground
480
+ };
481
+ const nextComponents = {
482
+ ...parent.components,
483
+ button: {
484
+ ...parent.components.button,
485
+ primaryBackground: accentColor,
486
+ primaryText: foreground
487
+ },
488
+ card: {
489
+ ...parent.components.card,
490
+ iconBackgroundColor: `${accentColor}26`
491
+ }
492
+ };
493
+ return { ...parent, colors: nextColors, components: nextComponents };
494
+ }, [parent, accentColor, accentForeground]);
495
+ return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
496
+ }
467
497
  function useTheme() {
468
498
  const context = React.useContext(ThemeContext);
469
499
  if (!context) {
@@ -1591,6 +1621,7 @@ function useDepositPolling({
1591
1621
  clientSecret,
1592
1622
  depositConfirmationMode = "auto_ui",
1593
1623
  depositWalletId,
1624
+ depositWalletIds,
1594
1625
  enabled = true,
1595
1626
  immediateDirectPolling = false,
1596
1627
  onDepositSuccess,
@@ -1736,21 +1767,25 @@ function useDepositPolling({
1736
1767
  setIsPolling(false);
1737
1768
  };
1738
1769
  }, [userId, publishableKey, clientSecret, enabled]);
1770
+ const pollWalletIdsKey = depositWalletIds && depositWalletIds.length > 0 ? Array.from(new Set(depositWalletIds.filter(Boolean))).join(",") : depositWalletId || "";
1739
1771
  useEffect3(() => {
1740
- if (!pollingEnabled || !depositWalletId) return;
1772
+ if (!pollingEnabled || !pollWalletIdsKey) return;
1773
+ const ids = pollWalletIdsKey.split(",").filter(Boolean);
1741
1774
  const triggerPoll = async () => {
1742
- try {
1743
- await pollDirectExecutions(
1744
- { deposit_wallet_id: depositWalletId },
1745
- publishableKey
1746
- );
1747
- } catch {
1748
- }
1775
+ await Promise.all(
1776
+ ids.map(
1777
+ (id) => pollDirectExecutions(
1778
+ { deposit_wallet_id: id },
1779
+ publishableKey
1780
+ ).catch(() => {
1781
+ })
1782
+ )
1783
+ );
1749
1784
  };
1750
1785
  triggerPoll();
1751
1786
  const interval = setInterval(triggerPoll, POLL_ENDPOINT_INTERVAL_MS);
1752
1787
  return () => clearInterval(interval);
1753
- }, [pollingEnabled, depositWalletId, publishableKey]);
1788
+ }, [pollingEnabled, pollWalletIdsKey, publishableKey]);
1754
1789
  const handleIveDeposited = () => {
1755
1790
  setPollingEnabled(true);
1756
1791
  setShowWaitingUi(true);
@@ -2974,6 +3009,7 @@ function BuyWithCard({
2974
3009
  if (!selectedProvider) return "0.000000";
2975
3010
  return selectedProvider.destination_amount.toFixed(6);
2976
3011
  };
3012
+ const canOpenProviderSelector = !quotesLoading && quotes.length > 1;
2977
3013
  const selectedCurrencyData = fiatCurrencies.find(
2978
3014
  (c) => c.currency_code.toLowerCase() === currency.toLowerCase()
2979
3015
  );
@@ -3159,9 +3195,12 @@ function BuyWithCard({
3159
3195
  /* @__PURE__ */ jsx11(
3160
3196
  "button",
3161
3197
  {
3162
- onClick: () => handleViewChange("quotes"),
3198
+ onClick: () => {
3199
+ if (canOpenProviderSelector) handleViewChange("quotes");
3200
+ },
3163
3201
  disabled: quotesLoading || quotes.length === 0,
3164
- className: "uf-w-full hover:uf-bg-accent uf-transition-colors uf-p-4 uf-group disabled:uf-opacity-50 disabled:uf-cursor-not-allowed",
3202
+ "aria-disabled": !canOpenProviderSelector,
3203
+ className: `uf-w-full uf-transition-colors uf-p-4 uf-group disabled:uf-opacity-50 disabled:uf-cursor-not-allowed ${canOpenProviderSelector ? "hover:uf-bg-accent uf-cursor-pointer" : "uf-cursor-default"}`,
3165
3204
  style: { backgroundColor: components.card.backgroundColor, borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` },
3166
3205
  children: quotesLoading ? /* @__PURE__ */ jsxs9("div", { className: "uf-text-left uf-w-full uf-animate-pulse", children: [
3167
3206
  /* @__PURE__ */ jsx11(
@@ -3188,7 +3227,7 @@ function BuyWithCard({
3188
3227
  )
3189
3228
  ] })
3190
3229
  ] }) : /* @__PURE__ */ jsxs9("div", { className: "uf-w-full uf-text-left", children: [
3191
- isAutoSelected && /* @__PURE__ */ jsx11(
3230
+ isAutoSelected && canOpenProviderSelector && /* @__PURE__ */ jsx11(
3192
3231
  "div",
3193
3232
  {
3194
3233
  className: "uf-text-xs uf-font-normal uf-mb-2",
@@ -3224,7 +3263,7 @@ function BuyWithCard({
3224
3263
  ),
3225
3264
  selectedProvider.low_kyc === false && /* @__PURE__ */ jsx11("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: /* @__PURE__ */ jsx11("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" }) })
3226
3265
  ] }),
3227
- quotes.length > 0 && /* @__PURE__ */ jsx11(
3266
+ canOpenProviderSelector && /* @__PURE__ */ jsx11(
3228
3267
  ChevronRight,
3229
3268
  {
3230
3269
  className: "uf-w-4 uf-h-4 group-hover:uf-text-foreground uf-transition-colors uf-flex-shrink-0",
@@ -12514,8 +12553,10 @@ import { ExternalLink as ExternalLink3, Loader2 as Loader28 } from "lucide-react
12514
12553
  import {
12515
12554
  getAddressBalances as getAddressBalances2,
12516
12555
  getSupportedDepositTokens as getSupportedDepositTokens2,
12556
+ ExecutionStatus as ExecutionStatus5,
12517
12557
  buildSolanaTransaction,
12518
- sendSolanaTransaction as sendSolanaTransactionToBackend
12558
+ sendSolanaTransaction as sendSolanaTransactionToBackend,
12559
+ getWalletMobileDeepLink
12519
12560
  } from "@unifold/core";
12520
12561
 
12521
12562
  // src/hooks/use-deposit-quote.ts
@@ -12575,6 +12616,68 @@ function useDepositQuote(params) {
12575
12616
  });
12576
12617
  }
12577
12618
 
12619
+ // src/hooks/use-external-wallets.ts
12620
+ import { useQuery as useQuery13 } from "@tanstack/react-query";
12621
+ import { getExternalWallets } from "@unifold/core";
12622
+ function useExternalWallets({
12623
+ publishableKey,
12624
+ enabled = true
12625
+ }) {
12626
+ const { data: wallets = [], isLoading } = useQuery13({
12627
+ queryKey: ["unifold", "external-wallets", publishableKey],
12628
+ queryFn: () => getExternalWallets(publishableKey).then((res) => res.data),
12629
+ enabled: enabled && !!publishableKey,
12630
+ staleTime: 1e3 * 60 * 30,
12631
+ refetchOnMount: false,
12632
+ refetchOnWindowFocus: false
12633
+ });
12634
+ return { wallets, isLoading };
12635
+ }
12636
+
12637
+ // src/theme/walletBrandColors.ts
12638
+ var WALLET_BRAND_COLORS = {
12639
+ phantom: "#AB9FF2",
12640
+ metamask: "#F6851B",
12641
+ coinbase: "#0052FF",
12642
+ trust: "#3375BB",
12643
+ rainbow: "#5B6CFF",
12644
+ rabby: "#7084FF",
12645
+ okx: "#000000"
12646
+ };
12647
+ function normalizeWalletId(type) {
12648
+ return type.replace(/-(ethereum|solana)$/i, "").toLowerCase();
12649
+ }
12650
+ function getWalletBrandColor(type, mode = "dark") {
12651
+ if (!type) return void 0;
12652
+ const id = normalizeWalletId(type);
12653
+ const color = WALLET_BRAND_COLORS[id];
12654
+ if (!color) return void 0;
12655
+ if (id === "okx") return mode === "dark" ? "#FFFFFF" : "#111111";
12656
+ return color;
12657
+ }
12658
+ function getContrastingTextColor(hex) {
12659
+ const c = hex.replace("#", "");
12660
+ if (c.length !== 6) return "#FFFFFF";
12661
+ const r = parseInt(c.slice(0, 2), 16);
12662
+ const g = parseInt(c.slice(2, 4), 16);
12663
+ const b = parseInt(c.slice(4, 6), 16);
12664
+ const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
12665
+ return luminance > 0.6 ? "#13111C" : "#FFFFFF";
12666
+ }
12667
+
12668
+ // src/components/deposits/browser-wallets/mobileDeepLinks.ts
12669
+ function isMobileDevice() {
12670
+ if (typeof navigator === "undefined") return false;
12671
+ return /android|iphone|ipad|ipod|mobile/i.test(navigator.userAgent);
12672
+ }
12673
+ function getMobilePlatform() {
12674
+ if (typeof navigator === "undefined") return null;
12675
+ const ua = navigator.userAgent;
12676
+ if (/iphone|ipad|ipod/i.test(ua)) return "ios";
12677
+ if (/android/i.test(ua)) return "android";
12678
+ return null;
12679
+ }
12680
+
12578
12681
  // src/components/deposits/browser-wallets/SelectTokenView.tsx
12579
12682
  import { Loader2 as Loader25 } from "lucide-react";
12580
12683
 
@@ -13603,18 +13706,33 @@ var WALLET_ICONS3 = {
13603
13706
  backpack: BackpackIcon,
13604
13707
  glow: GlowIcon
13605
13708
  };
13606
- var WALLET_DEFINITIONS = [
13607
- { id: "phantom", name: "Phantom", networks: ["ethereum", "solana"], installUrl: "https://phantom.app/" },
13608
- { id: "coinbase", name: "Coinbase Wallet", networks: ["ethereum", "solana"], installUrl: "https://www.coinbase.com/wallet" },
13609
- { id: "trust", name: "Trust Wallet", networks: ["ethereum", "solana"], installUrl: "https://trustwallet.com/" },
13610
- { id: "metamask", name: "MetaMask", networks: ["ethereum"], installUrl: "https://metamask.io/download/" },
13611
- { id: "rainbow", name: "Rainbow", networks: ["ethereum"], installUrl: "https://rainbow.me/" },
13612
- { id: "rabby", name: "Rabby", networks: ["ethereum"], installUrl: "https://rabby.io/" },
13613
- { id: "okx", name: "OKX Wallet", networks: ["ethereum"], installUrl: "https://www.okx.com/web3" },
13614
- { id: "solflare", name: "Solflare", networks: ["solana"], installUrl: "https://solflare.com/" },
13615
- { id: "backpack", name: "Backpack", networks: ["solana"], installUrl: "https://backpack.app/" },
13616
- { id: "glow", name: "Glow", networks: ["solana"], installUrl: "https://glow.app/" }
13709
+ var FALLBACK_WALLET_DEFINITIONS = [
13710
+ { id: "phantom", name: "Phantom", networks: ["ethereum", "solana"], installUrl: "https://phantom.app/", supportsMobileBrowse: true },
13711
+ { id: "coinbase", name: "Coinbase Wallet", networks: ["ethereum", "solana"], installUrl: "https://www.coinbase.com/wallet", supportsMobileBrowse: true },
13712
+ { id: "trust", name: "Trust Wallet", networks: ["ethereum", "solana"], installUrl: "https://trustwallet.com/", supportsMobileBrowse: true },
13713
+ { id: "metamask", name: "MetaMask", networks: ["ethereum"], installUrl: "https://metamask.io/download/", supportsMobileBrowse: true },
13714
+ { id: "rainbow", name: "Rainbow", networks: ["ethereum"], installUrl: "https://rainbow.me/", supportsMobileBrowse: true },
13715
+ { id: "rabby", name: "Rabby", networks: ["ethereum"], installUrl: "https://apps.apple.com/app/rabby-wallet/id6450663781", supportsMobileBrowse: true },
13716
+ { id: "okx", name: "OKX Wallet", networks: ["ethereum"], installUrl: "https://www.okx.com/web3", supportsMobileBrowse: true, mobileBrowsePlatforms: ["ios"] }
13617
13717
  ];
13718
+ function getMobileInstallUrl(walletId, defaultUrl) {
13719
+ if (!isMobileDevice()) return defaultUrl;
13720
+ const ua = typeof navigator !== "undefined" ? navigator.userAgent : "";
13721
+ const isIOS = /iPhone|iPad|iPod/i.test(ua);
13722
+ const stores = {
13723
+ rabby: {
13724
+ ios: "https://apps.apple.com/app/rabby-wallet/id6450663781",
13725
+ android: "https://play.google.com/store/apps/details?id=com.debank.rabbymobile"
13726
+ },
13727
+ glow: {
13728
+ ios: "https://apps.apple.com/us/app/glow-solana-wallet/id1599584512",
13729
+ android: "https://play.google.com/store/apps/details?id=com.luma.wallet.prod"
13730
+ }
13731
+ };
13732
+ const entry = stores[walletId];
13733
+ if (!entry) return defaultUrl;
13734
+ return isIOS ? entry.ios : entry.android;
13735
+ }
13618
13736
  function normalizeTokenAddress(address) {
13619
13737
  const normalized = (address ?? "").toLowerCase();
13620
13738
  if (normalized === "" || normalized === "native" || normalized === "0x0000000000000000000000000000000000000000") {
@@ -13650,7 +13768,7 @@ function getLegacyEvmProviders() {
13650
13768
  okxEthereum: win.okxwallet
13651
13769
  };
13652
13770
  }
13653
- function detectAvailableWallets(filterChainType) {
13771
+ function detectAvailableWallets(definitions, filterChainType) {
13654
13772
  const solProviders = getSolanaProviders();
13655
13773
  const legacyEvm = getLegacyEvmProviders();
13656
13774
  const eip6963List = getEip6963Providers();
@@ -13676,7 +13794,7 @@ function detectAvailableWallets(filterChainType) {
13676
13794
  return false;
13677
13795
  }
13678
13796
  });
13679
- return WALLET_DEFINITIONS.filter((w) => !filterChainType || w.networks.includes(filterChainType)).map((wallet) => {
13797
+ return definitions.filter((w) => !filterChainType || w.networks.includes(filterChainType)).map((wallet) => {
13680
13798
  let isInstalled = false;
13681
13799
  const detectedNetworks = [];
13682
13800
  switch (wallet.id) {
@@ -13780,7 +13898,7 @@ function WalletConnect({
13780
13898
  depositWalletsLoading = false,
13781
13899
  onExecutionsChange
13782
13900
  }) {
13783
- const { colors: colors2, fonts, components } = useTheme();
13901
+ const { colors: colors2, fonts, components, mode } = useTheme();
13784
13902
  const walletProvidedAtMount = React30.useRef(!!initialWalletInfo && !!initialDepositWallet);
13785
13903
  const [activeWalletInfo, setActiveWalletInfo] = React30.useState(initialWalletInfo ?? null);
13786
13904
  const [activeDepositWallet, setActiveDepositWallet] = React30.useState(initialDepositWallet ?? null);
@@ -13804,7 +13922,37 @@ function WalletConnect({
13804
13922
  setEip6963ProviderCount(providers.length);
13805
13923
  });
13806
13924
  }, []);
13807
- const availableWallets = React30.useMemo(() => detectAvailableWallets(), [eip6963ProviderCount]);
13925
+ const { wallets: backendWallets } = useExternalWallets({ publishableKey });
13926
+ const walletDefinitions = React30.useMemo(
13927
+ () => backendWallets.length > 0 ? backendWallets.map((w) => ({
13928
+ id: w.id,
13929
+ name: w.name,
13930
+ networks: w.chain_types,
13931
+ installUrl: w.install_url,
13932
+ supportsMobileBrowse: w.supports_mobile_browse,
13933
+ mobileBrowsePlatforms: w.mobile_browse_platforms ?? null
13934
+ })) : FALLBACK_WALLET_DEFINITIONS,
13935
+ [backendWallets]
13936
+ );
13937
+ const availableWallets = React30.useMemo(
13938
+ () => detectAvailableWallets(walletDefinitions),
13939
+ [walletDefinitions, eip6963ProviderCount]
13940
+ );
13941
+ const [isMobile, setIsMobile] = React30.useState(false);
13942
+ React30.useEffect(() => {
13943
+ setIsMobile(isMobileDevice());
13944
+ }, []);
13945
+ const mobileDepositAddresses = React30.useMemo(
13946
+ () => (depositWallets ?? []).map((w) => ({ chain_type: w.chain_type, address: w.address })),
13947
+ [depositWallets]
13948
+ );
13949
+ const mobileDepositWalletIds = React30.useMemo(
13950
+ () => (depositWallets ?? []).filter((w) => w.chain_type === "ethereum" || w.chain_type === "solana").map((w) => w.id),
13951
+ [depositWallets]
13952
+ );
13953
+ const [mobileRedirect, setMobileRedirect] = React30.useState(null);
13954
+ const [pendingMobileWallet, setPendingMobileWallet] = React30.useState(null);
13955
+ const [awaitingMobileDeposit, setAwaitingMobileDeposit] = React30.useState(false);
13808
13956
  React30.useEffect(() => {
13809
13957
  if (!standalone || autoResolved || detectingWallet) return;
13810
13958
  if (!detectedWallet) {
@@ -13863,9 +14011,36 @@ function WalletConnect({
13863
14011
  transform: isTransitioning ? "translateY(4px)" : "translateY(0)",
13864
14012
  transition: "opacity 150ms ease, transform 150ms ease"
13865
14013
  };
13866
- const handleWalletClick = (wallet) => {
14014
+ const openMobileWalletBrowse = async (wallet, depositAddresses) => {
14015
+ try {
14016
+ const res = await getWalletMobileDeepLink(
14017
+ wallet.id,
14018
+ depositAddresses,
14019
+ publishableKey
14020
+ );
14021
+ if (res.deeplink) {
14022
+ setMobileRedirect({ walletId: wallet.id, walletName: wallet.name, deeplink: res.deeplink });
14023
+ setAwaitingMobileDeposit(true);
14024
+ transitionTo("mobile_redirect");
14025
+ window.location.href = res.deeplink;
14026
+ return true;
14027
+ }
14028
+ } catch {
14029
+ }
14030
+ return false;
14031
+ };
14032
+ const handleWalletClick = async (wallet) => {
13867
14033
  if (!wallet.isInstalled) {
13868
- window.open(wallet.installUrl, "_blank", "noopener,noreferrer");
14034
+ const platform = getMobilePlatform();
14035
+ const platformAllowed = !wallet.mobileBrowsePlatforms || wallet.mobileBrowsePlatforms.includes(platform ?? "");
14036
+ if (isMobileDevice() && wallet.supportsMobileBrowse !== false && platformAllowed) {
14037
+ if (mobileDepositAddresses.length === 0) {
14038
+ setPendingMobileWallet(wallet);
14039
+ return;
14040
+ }
14041
+ if (await openMobileWalletBrowse(wallet, mobileDepositAddresses)) return;
14042
+ }
14043
+ window.open(getMobileInstallUrl(wallet.id, wallet.installUrl), "_blank", "noopener,noreferrer");
13869
14044
  return;
13870
14045
  }
13871
14046
  setSelectedWalletDef(wallet);
@@ -13881,6 +14056,27 @@ function WalletConnect({
13881
14056
  if (!selectedWalletDef) return;
13882
14057
  handleConnectWallet(selectedWalletDef, network);
13883
14058
  };
14059
+ React30.useEffect(() => {
14060
+ if (!pendingMobileWallet) return;
14061
+ if (mobileDepositAddresses.length > 0) {
14062
+ const wallet = pendingMobileWallet;
14063
+ setPendingMobileWallet(null);
14064
+ void (async () => {
14065
+ if (!await openMobileWalletBrowse(wallet, mobileDepositAddresses)) {
14066
+ window.open(getMobileInstallUrl(wallet.id, wallet.installUrl), "_blank", "noopener,noreferrer");
14067
+ }
14068
+ })();
14069
+ return;
14070
+ }
14071
+ const timeout = setTimeout(() => {
14072
+ setPendingMobileWallet((current) => {
14073
+ if (!current) return null;
14074
+ window.open(getMobileInstallUrl(current.id, current.installUrl), "_blank", "noopener,noreferrer");
14075
+ return null;
14076
+ });
14077
+ }, 8e3);
14078
+ return () => clearTimeout(timeout);
14079
+ }, [pendingMobileWallet, mobileDepositAddresses]);
13884
14080
  const handleConnectWallet = async (wallet, network) => {
13885
14081
  setConnectingNetwork(network);
13886
14082
  transitionTo("connecting");
@@ -14025,14 +14221,32 @@ function WalletConnect({
14025
14221
  userId,
14026
14222
  publishableKey,
14027
14223
  clientSecret,
14224
+ // In-tab flow: poll the single connected deposit wallet.
14028
14225
  depositWalletId: activeDepositWallet?.id ?? "",
14029
- enabled: hasSignedTransaction && !!activeDepositWallet,
14226
+ // Mobile redirect flow: the deposit chain isn't known up front, so /poll every
14227
+ // chain's deposit wallet. Detection still happens via the single /query by
14228
+ // external_user_id, which already spans all chains.
14229
+ depositWalletIds: awaitingMobileDeposit ? mobileDepositWalletIds : void 0,
14230
+ enabled: hasSignedTransaction && !!activeDepositWallet || awaitingMobileDeposit,
14030
14231
  onDepositSuccess,
14031
14232
  onDepositError
14032
14233
  });
14033
14234
  React30.useEffect(() => {
14034
14235
  onExecutionsChange?.(depositExecutions);
14035
14236
  }, [depositExecutions, onExecutionsChange]);
14237
+ const latestDepositExecution = React30.useMemo(() => {
14238
+ if (depositExecutions.length === 0) return null;
14239
+ return [...depositExecutions].sort((a, b) => {
14240
+ const ta = a.created_at ? new Date(a.created_at).getTime() : 0;
14241
+ const tb = b.created_at ? new Date(b.created_at).getTime() : 0;
14242
+ return tb - ta;
14243
+ })[0];
14244
+ }, [depositExecutions]);
14245
+ React30.useEffect(() => {
14246
+ if (awaitingMobileDeposit && latestDepositExecution && (viewRef.current === "mobile_redirect" || viewRef.current === "connecting")) {
14247
+ transitionTo("mobile_deposit_status");
14248
+ }
14249
+ }, [awaitingMobileDeposit, latestDepositExecution, transitionTo]);
14036
14250
  React30.useEffect(() => {
14037
14251
  if (!prefillAmountUsd || !tokenChainDetails || view !== "enter_amount") return;
14038
14252
  const minDeposit = tokenChainDetails.minimum_deposit_amount_usd || 0;
@@ -14163,6 +14377,16 @@ function WalletConnect({
14163
14377
  setSelectedWalletDef(null);
14164
14378
  setConnectingNetwork(null);
14165
14379
  break;
14380
+ case "mobile_redirect":
14381
+ transitionTo("select_wallet");
14382
+ setMobileRedirect(null);
14383
+ setAwaitingMobileDeposit(false);
14384
+ break;
14385
+ case "mobile_deposit_status":
14386
+ transitionTo("select_wallet");
14387
+ setMobileRedirect(null);
14388
+ setAwaitingMobileDeposit(false);
14389
+ break;
14166
14390
  case "select_token":
14167
14391
  if (walletProvidedAtMount.current) parentOnBack?.();
14168
14392
  else transitionTo("select_wallet");
@@ -14348,33 +14572,40 @@ function WalletConnect({
14348
14572
  return /* @__PURE__ */ jsxs48("div", { style: viewTransitionStyle, children: [
14349
14573
  /* @__PURE__ */ jsx54(DepositHeader, { title: "Connect Wallet", showBack: canGoBack, onBack: handleBack, onClose }),
14350
14574
  /* @__PURE__ */ jsxs48("div", { className: "uf-pb-4", children: [
14351
- /* @__PURE__ */ jsx54("p", { className: "uf-text-sm uf-text-center uf-pb-4", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: "Select a wallet to connect" }),
14352
- /* @__PURE__ */ jsx54("div", { className: "uf-space-y-2", style: { maxHeight: 330, overflowY: "auto" }, children: availableWallets.map((wallet) => /* @__PURE__ */ jsxs48(
14353
- "button",
14354
- {
14355
- onClick: () => handleWalletClick(wallet),
14356
- disabled: isWalletConnecting,
14357
- className: "uf-w-full uf-transition-colors uf-p-3 uf-flex uf-items-center uf-justify-between hover:uf-opacity-90 disabled:uf-opacity-50",
14358
- style: { backgroundColor: components.card.backgroundColor, borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` },
14359
- children: [
14360
- /* @__PURE__ */ jsxs48("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
14361
- WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ jsx54(WalletIconWithNetwork, { WalletIcon: WALLET_ICONS3[wallet.id], networks: wallet.networks, size: 40, className: "uf-rounded-lg" }) : /* @__PURE__ */ jsx54("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
14362
- /* @__PURE__ */ jsx54("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name })
14363
- ] }),
14364
- wallet.isInstalled ? /* @__PURE__ */ jsx54("span", { className: "uf-text-xs uf-px-2 uf-py-1 uf-rounded-full", style: { backgroundColor: colors2.primary + "20", color: colors2.primary, fontFamily: fonts.medium }, children: "Detected" }) : /* @__PURE__ */ jsxs48("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
14365
- /* @__PURE__ */ jsx54("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: "Install" }),
14366
- /* @__PURE__ */ jsx54(ExternalLink3, { className: "uf-w-3 uf-h-3", style: { color: colors2.foregroundMuted } })
14367
- ] })
14368
- ]
14369
- },
14370
- wallet.id
14371
- )) }),
14575
+ /* @__PURE__ */ jsx54("p", { className: "uf-text-sm uf-text-center uf-pb-4", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: isMobile ? "Open this page in your wallet's app to connect" : "Select a wallet to connect" }),
14576
+ /* @__PURE__ */ jsx54("div", { className: "uf-space-y-2", style: { maxHeight: 330, overflowY: "auto" }, children: availableWallets.map((wallet) => {
14577
+ const walletPlatformAllowed = !wallet.mobileBrowsePlatforms || wallet.mobileBrowsePlatforms.includes(getMobilePlatform() ?? "");
14578
+ const showOpenInApp = isMobile && !wallet.isInstalled && wallet.supportsMobileBrowse !== false && walletPlatformAllowed;
14579
+ const isPending = pendingMobileWallet?.id === wallet.id;
14580
+ return /* @__PURE__ */ jsxs48(
14581
+ "button",
14582
+ {
14583
+ onClick: () => void handleWalletClick(wallet),
14584
+ disabled: isWalletConnecting || !!pendingMobileWallet,
14585
+ className: "uf-w-full uf-transition-colors uf-p-3 uf-flex uf-items-center uf-justify-between hover:uf-opacity-90 disabled:uf-opacity-50",
14586
+ style: { backgroundColor: components.card.backgroundColor, borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` },
14587
+ children: [
14588
+ /* @__PURE__ */ jsxs48("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
14589
+ WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ jsx54(WalletIconWithNetwork, { WalletIcon: WALLET_ICONS3[wallet.id], networks: wallet.networks, size: 40, className: "uf-rounded-lg" }) : /* @__PURE__ */ jsx54("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
14590
+ /* @__PURE__ */ jsx54("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name })
14591
+ ] }),
14592
+ isPending ? /* @__PURE__ */ jsx54(Loader28, { className: "uf-w-4 uf-h-4 uf-animate-spin", style: { color: colors2.primary } }) : wallet.isInstalled ? /* @__PURE__ */ jsx54("span", { className: "uf-text-xs uf-px-2 uf-py-1 uf-rounded-full", style: { backgroundColor: colors2.primary + "20", color: colors2.primary, fontFamily: fonts.medium }, children: "Detected" }) : /* @__PURE__ */ jsxs48("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
14593
+ /* @__PURE__ */ jsx54("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: showOpenInApp ? "Open" : "Install" }),
14594
+ /* @__PURE__ */ jsx54(ExternalLink3, { className: "uf-w-3 uf-h-3", style: { color: colors2.foregroundMuted } })
14595
+ ] })
14596
+ ]
14597
+ },
14598
+ wallet.id
14599
+ );
14600
+ }) }),
14372
14601
  walletError && /* @__PURE__ */ jsx54("div", { className: "uf-text-center uf-text-sm uf-mt-4 uf-px-4", style: { color: "#ef4444" }, children: walletError })
14373
14602
  ] })
14374
14603
  ] });
14375
14604
  }
14605
+ const preConnectAccent = selectedWalletDef ? getWalletBrandColor(selectedWalletDef.id, mode) : void 0;
14606
+ const preConnectFg = preConnectAccent ? getContrastingTextColor(preConnectAccent) : void 0;
14376
14607
  if (view === "select_network" && selectedWalletDef) {
14377
- return /* @__PURE__ */ jsxs48("div", { style: viewTransitionStyle, children: [
14608
+ return /* @__PURE__ */ jsx54(AccentColorOverride, { accentColor: preConnectAccent, accentForeground: preConnectFg, children: /* @__PURE__ */ jsxs48("div", { style: viewTransitionStyle, children: [
14378
14609
  /* @__PURE__ */ jsx54(DepositHeader, { title: "Select Network", showBack: true, onBack: handleBack, onClose }),
14379
14610
  /* @__PURE__ */ jsxs48("div", { className: "uf-pb-4", children: [
14380
14611
  /* @__PURE__ */ jsxs48("div", { className: "uf-flex uf-flex-col uf-items-center uf-pb-4", children: [
@@ -14404,10 +14635,10 @@ function WalletConnect({
14404
14635
  )) }),
14405
14636
  walletError && /* @__PURE__ */ jsx54("div", { className: "uf-text-center uf-text-sm uf-mt-4 uf-px-4", style: { color: "#ef4444" }, children: walletError })
14406
14637
  ] })
14407
- ] });
14638
+ ] }) });
14408
14639
  }
14409
14640
  if (view === "connecting") {
14410
- return /* @__PURE__ */ jsxs48("div", { style: viewTransitionStyle, children: [
14641
+ return /* @__PURE__ */ jsx54(AccentColorOverride, { accentColor: preConnectAccent, accentForeground: preConnectFg, children: /* @__PURE__ */ jsxs48("div", { style: viewTransitionStyle, children: [
14411
14642
  /* @__PURE__ */ jsx54(DepositHeader, { title: "Connecting...", showBack: true, onBack: handleBack, onClose }),
14412
14643
  /* @__PURE__ */ jsxs48("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-16", children: [
14413
14644
  /* @__PURE__ */ jsx54(Loader28, { className: "uf-w-12 uf-h-12 uf-animate-spin uf-mb-4", style: { color: colors2.primary } }),
@@ -14418,24 +14649,132 @@ function WalletConnect({
14418
14649
  ] }),
14419
14650
  /* @__PURE__ */ jsx54("div", { className: "uf-text-sm uf-mt-2", style: { color: colors2.foregroundMuted }, children: "Please approve the connection in your wallet" })
14420
14651
  ] })
14421
- ] });
14652
+ ] }) });
14653
+ }
14654
+ if (view === "mobile_redirect" && mobileRedirect) {
14655
+ const Icon2 = WALLET_ICONS3[mobileRedirect.walletId];
14656
+ return /* @__PURE__ */ jsx54(AccentColorOverride, { accentColor: preConnectAccent, accentForeground: preConnectFg, children: /* @__PURE__ */ jsxs48("div", { style: viewTransitionStyle, children: [
14657
+ /* @__PURE__ */ jsx54(DepositHeader, { title: mobileRedirect.walletName, showBack: true, onBack: handleBack, onClose }),
14658
+ /* @__PURE__ */ jsxs48("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-px-6 uf-py-10", children: [
14659
+ Icon2 ? /* @__PURE__ */ jsx54(Icon2, { size: 64, className: "uf-rounded-2xl uf-mb-5" }) : /* @__PURE__ */ jsx54("div", { className: "uf-w-16 uf-h-16 uf-rounded-2xl uf-bg-gray-500 uf-mb-5" }),
14660
+ /* @__PURE__ */ jsxs48(
14661
+ "div",
14662
+ {
14663
+ className: "uf-text-base uf-font-medium uf-text-center uf-mb-1",
14664
+ style: { color: colors2.foreground, fontFamily: fonts.medium },
14665
+ children: [
14666
+ "Continue in ",
14667
+ mobileRedirect.walletName
14668
+ ]
14669
+ }
14670
+ ),
14671
+ /* @__PURE__ */ jsxs48(
14672
+ "div",
14673
+ {
14674
+ className: "uf-text-sm uf-text-center uf-mb-6",
14675
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
14676
+ children: [
14677
+ "Complete your deposit in the ",
14678
+ mobileRedirect.walletName,
14679
+ " app"
14680
+ ]
14681
+ }
14682
+ ),
14683
+ /* @__PURE__ */ jsxs48(
14684
+ "button",
14685
+ {
14686
+ type: "button",
14687
+ onClick: () => {
14688
+ window.location.href = mobileRedirect.deeplink;
14689
+ },
14690
+ className: "uf-w-full uf-transition-colors uf-p-3.5 uf-flex uf-items-center uf-justify-center uf-gap-2 hover:uf-opacity-90",
14691
+ style: {
14692
+ backgroundColor: components.card.backgroundColor,
14693
+ borderRadius: components.card.borderRadius,
14694
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
14695
+ color: components.card.titleColor,
14696
+ fontFamily: fonts.medium
14697
+ },
14698
+ children: [
14699
+ /* @__PURE__ */ jsx54(ExternalLink3, { className: "uf-w-4 uf-h-4", style: { color: components.card.iconColor } }),
14700
+ /* @__PURE__ */ jsxs48("span", { className: "uf-text-sm uf-font-medium", children: [
14701
+ "Open in ",
14702
+ mobileRedirect.walletName
14703
+ ] })
14704
+ ]
14705
+ }
14706
+ ),
14707
+ awaitingMobileDeposit && /* @__PURE__ */ jsxs48("div", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2 uf-mt-6", children: [
14708
+ /* @__PURE__ */ jsx54(
14709
+ Loader28,
14710
+ {
14711
+ className: "uf-w-4 uf-h-4 uf-animate-spin",
14712
+ style: { color: colors2.foregroundMuted }
14713
+ }
14714
+ ),
14715
+ /* @__PURE__ */ jsx54(
14716
+ "span",
14717
+ {
14718
+ className: "uf-text-sm",
14719
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
14720
+ children: "Checking for deposit..."
14721
+ }
14722
+ )
14723
+ ] })
14724
+ ] })
14725
+ ] }) });
14726
+ }
14727
+ if (view === "mobile_deposit_status" && latestDepositExecution) {
14728
+ const isComplete = latestDepositExecution.status === ExecutionStatus5.SUCCEEDED;
14729
+ const isFailed = latestDepositExecution.status === ExecutionStatus5.FAILED;
14730
+ const title = isComplete ? "Payment Complete" : isFailed ? "Payment Failed" : "Payment Processing";
14731
+ return /* @__PURE__ */ jsx54(AccentColorOverride, { accentColor: preConnectAccent, accentForeground: preConnectFg, children: /* @__PURE__ */ jsxs48("div", { style: viewTransitionStyle, children: [
14732
+ /* @__PURE__ */ jsx54(
14733
+ DepositHeader,
14734
+ {
14735
+ title,
14736
+ showBack: false,
14737
+ onClose: isComplete && onDone ? onDone : onClose
14738
+ }
14739
+ ),
14740
+ /* @__PURE__ */ jsx54(DepositDetailContent, { execution: latestDepositExecution }),
14741
+ isComplete && /* @__PURE__ */ jsx54("div", { className: "uf-flex uf-gap-2 uf-px-2 uf-pt-4 uf-pb-4", children: /* @__PURE__ */ jsx54(
14742
+ "button",
14743
+ {
14744
+ type: "button",
14745
+ onClick: onDone ? onDone : onNewDeposit ? onNewDeposit : onClose ?? (() => {
14746
+ }),
14747
+ className: "uf-flex-1 uf-py-4 uf-text-sm uf-font-medium uf-transition-opacity hover:uf-opacity-80",
14748
+ style: {
14749
+ backgroundColor: colors2.primary,
14750
+ color: colors2.primaryForeground,
14751
+ fontFamily: fonts.medium,
14752
+ borderRadius: components.button.borderRadius,
14753
+ border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
14754
+ },
14755
+ children: "Done"
14756
+ }
14757
+ ) })
14758
+ ] }) });
14422
14759
  }
14423
14760
  if (!hasWallet) return null;
14761
+ const walletAccent = getWalletBrandColor(walletInfo.type, mode);
14762
+ const walletAccentForeground = walletAccent ? getContrastingTextColor(walletAccent) : void 0;
14424
14763
  if (view === "select_token") {
14425
- return /* @__PURE__ */ jsx54("div", { style: viewTransitionStyle, children: /* @__PURE__ */ jsx54(SelectTokenView, { walletInfo, projectName, assetCdnUrl, balances, isLoading, error, selectedBalance, totalBalanceUsd, onTokenSelect: handleTokenSelect, onContinue: handleContinueToAmount, onBack: handleBack, onClose: onClose ?? (() => {
14426
- }), onDisconnectWallet: onWalletDisconnect ? () => void handleDisconnect() : void 0, isDisconnectingWallet, checkoutAmountUsd, checkoutReceivedUsd }) });
14764
+ return /* @__PURE__ */ jsx54(AccentColorOverride, { accentColor: walletAccent, accentForeground: walletAccentForeground, children: /* @__PURE__ */ jsx54("div", { style: viewTransitionStyle, children: /* @__PURE__ */ jsx54(SelectTokenView, { walletInfo, projectName, assetCdnUrl, balances, isLoading, error, selectedBalance, totalBalanceUsd, onTokenSelect: handleTokenSelect, onContinue: handleContinueToAmount, onBack: handleBack, onClose: onClose ?? (() => {
14765
+ }), onDisconnectWallet: onWalletDisconnect ? () => void handleDisconnect() : void 0, isDisconnectingWallet, checkoutAmountUsd, checkoutReceivedUsd }) }) });
14427
14766
  }
14428
14767
  if (view === "enter_amount" && selectedToken && selectedBalance) {
14429
- return /* @__PURE__ */ jsx54("div", { style: viewTransitionStyle, children: /* @__PURE__ */ jsx54(EnterAmountView, { walletInfo, selectedBalance, selectedToken, amountUsd, formattedTokenAmount, tokenChainDetails, inputUsdNum, maxUsdAmount, isValidAmount, error, onAmountChange: setAmountUsd, onMaxClick: handleMaxClick, onReview: handleReview, onBack: handleBack, onClose: onClose ?? (() => {
14430
- }), quickSelectMode: amountQuickSelect, checkoutAmountUsd, checkoutReceivedUsd }) });
14768
+ return /* @__PURE__ */ jsx54(AccentColorOverride, { accentColor: walletAccent, accentForeground: walletAccentForeground, children: /* @__PURE__ */ jsx54("div", { style: viewTransitionStyle, children: /* @__PURE__ */ jsx54(EnterAmountView, { walletInfo, selectedBalance, selectedToken, amountUsd, formattedTokenAmount, tokenChainDetails, inputUsdNum, maxUsdAmount, isValidAmount, error, onAmountChange: setAmountUsd, onMaxClick: handleMaxClick, onReview: handleReview, onBack: handleBack, onClose: onClose ?? (() => {
14769
+ }), quickSelectMode: amountQuickSelect, checkoutAmountUsd, checkoutReceivedUsd }) }) });
14431
14770
  }
14432
14771
  if (view === "review" && selectedToken) {
14433
- return /* @__PURE__ */ jsx54("div", { style: viewTransitionStyle, children: /* @__PURE__ */ jsx54(ReviewView, { walletInfo, recipientAddress, assetCdnUrl, selectedToken, amountUsd, formattedTokenAmount, tokenChainDetails, loadingTokenDetails, showTransactionDetails, isConfirming, error, onToggleDetails: () => setShowTransactionDetails(!showTransactionDetails), onConfirm: handleConfirm, onBack: handleBack, onClose: onClose ?? (() => {
14434
- }) }) });
14772
+ return /* @__PURE__ */ jsx54(AccentColorOverride, { accentColor: walletAccent, accentForeground: walletAccentForeground, children: /* @__PURE__ */ jsx54("div", { style: viewTransitionStyle, children: /* @__PURE__ */ jsx54(ReviewView, { walletInfo, recipientAddress, assetCdnUrl, selectedToken, amountUsd, formattedTokenAmount, tokenChainDetails, loadingTokenDetails, showTransactionDetails, isConfirming, error, onToggleDetails: () => setShowTransactionDetails(!showTransactionDetails), onConfirm: handleConfirm, onBack: handleBack, onClose: onClose ?? (() => {
14773
+ }) }) }) });
14435
14774
  }
14436
14775
  if (view === "confirming") {
14437
- return /* @__PURE__ */ jsx54("div", { style: viewTransitionStyle, children: /* @__PURE__ */ jsx54(ConfirmingView, { isConfirming, onClose: onClose ?? (() => {
14438
- }), executions: depositExecutions, isPolling, onNewDeposit, onDone, paymentIntentStatus, amountReceivedUsd: checkoutReceivedUsd, amountReceivedUsdAtSubmission: receivedUsdAtSubmission }) });
14776
+ return /* @__PURE__ */ jsx54(AccentColorOverride, { accentColor: walletAccent, accentForeground: walletAccentForeground, children: /* @__PURE__ */ jsx54("div", { style: viewTransitionStyle, children: /* @__PURE__ */ jsx54(ConfirmingView, { isConfirming, onClose: onClose ?? (() => {
14777
+ }), executions: depositExecutions, isPolling, onNewDeposit, onDone, paymentIntentStatus, amountReceivedUsd: checkoutReceivedUsd, amountReceivedUsdAtSubmission: receivedUsdAtSubmission }) }) });
14439
14778
  }
14440
14779
  return null;
14441
14780
  }
@@ -14550,7 +14889,6 @@ function DepositModal({
14550
14889
  const [allExecutions, setAllExecutions] = useState32([]);
14551
14890
  const [selectedExecution, setSelectedExecution] = useState32(null);
14552
14891
  const [depositExecutions, setDepositExecutions] = useState32([]);
14553
- const isMobileView = useIsMobileViewport();
14554
14892
  const { projectConfig } = useProjectConfig({
14555
14893
  publishableKey,
14556
14894
  enabled: open
@@ -14946,7 +15284,7 @@ function DepositModal({
14946
15284
  open: hideOverlay || open,
14947
15285
  onOpenChange: hideOverlay ? void 0 : handleClose,
14948
15286
  modal: !hideOverlay,
14949
- children: /* @__PURE__ */ jsx55(
15287
+ children: /* @__PURE__ */ jsxs49(
14950
15288
  DialogContent,
14951
15289
  {
14952
15290
  ref: hideOverlay ? containerCallbackRef : void 0,
@@ -14955,386 +15293,389 @@ function DepositModal({
14955
15293
  style: { backgroundColor: colors2.background },
14956
15294
  onPointerDownOutside: (e) => e.preventDefault(),
14957
15295
  onInteractOutside: (e) => e.preventDefault(),
14958
- children: /* @__PURE__ */ jsx55(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ jsxs49(Fragment11, { children: [
14959
- /* @__PURE__ */ jsx55(
14960
- DepositHeader,
14961
- {
14962
- title: modalTitle || "Deposit",
14963
- showClose: !hideOverlay,
14964
- onClose: handleClose,
14965
- showBalance: showBalanceHeader,
14966
- balanceAddress: recipientAddress,
14967
- balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" ? destinationChainType : void 0,
14968
- balanceChainId: destinationChainId,
14969
- balanceTokenAddress: destinationTokenAddress,
14970
- projectName: projectConfig?.project_name,
14971
- publishableKey
14972
- }
14973
- ),
14974
- /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
14975
- /* @__PURE__ */ jsx55("div", { className: "uf-space-y-3", children: depositPrerequisiteBody ?? /* @__PURE__ */ jsxs49(Fragment11, { children: [
14976
- showTransferCrypto && /* @__PURE__ */ jsx55(
14977
- TransferCryptoButton,
14978
- {
14979
- onClick: () => setView("transfer"),
14980
- title: transferCryptoTitle,
14981
- subtitle: t7.transferCrypto.subtitle,
14982
- featuredTokens: projectConfig?.transfer_crypto.networks
14983
- }
14984
- ),
14985
- showConnectWallet && !isMobileView && /* @__PURE__ */ jsx55(
14986
- BrowserWalletButton,
15296
+ children: [
15297
+ /* @__PURE__ */ jsx55(DialogTitle, { className: "uf-sr-only", children: modalTitle || "Deposit" }),
15298
+ /* @__PURE__ */ jsx55(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ jsxs49(Fragment11, { children: [
15299
+ /* @__PURE__ */ jsx55(
15300
+ DepositHeader,
15301
+ {
15302
+ title: modalTitle || "Deposit",
15303
+ showClose: !hideOverlay,
15304
+ onClose: handleClose,
15305
+ showBalance: showBalanceHeader,
15306
+ balanceAddress: recipientAddress,
15307
+ balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" ? destinationChainType : void 0,
15308
+ balanceChainId: destinationChainId,
15309
+ balanceTokenAddress: destinationTokenAddress,
15310
+ projectName: projectConfig?.project_name,
15311
+ publishableKey
15312
+ }
15313
+ ),
15314
+ /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
15315
+ /* @__PURE__ */ jsx55("div", { className: "uf-space-y-3", children: depositPrerequisiteBody ?? /* @__PURE__ */ jsxs49(Fragment11, { children: [
15316
+ showTransferCrypto && /* @__PURE__ */ jsx55(
15317
+ TransferCryptoButton,
15318
+ {
15319
+ onClick: () => setView("transfer"),
15320
+ title: transferCryptoTitle,
15321
+ subtitle: t7.transferCrypto.subtitle,
15322
+ featuredTokens: projectConfig?.transfer_crypto.networks
15323
+ }
15324
+ ),
15325
+ showConnectWallet && /* @__PURE__ */ jsx55(
15326
+ BrowserWalletButton,
15327
+ {
15328
+ onClick: handleBrowserWalletClick,
15329
+ onConnectClick: handleWalletConnectClick,
15330
+ onDisconnect: handleWalletDisconnect,
15331
+ chainType: browserWalletChainType,
15332
+ publishableKey,
15333
+ featuredWallets: projectConfig?.connect_wallet?.wallets
15334
+ }
15335
+ ),
15336
+ showFiatOnramp && /* @__PURE__ */ jsx55(
15337
+ DepositWithCardButton,
15338
+ {
15339
+ onClick: () => setView("card"),
15340
+ title: depositWithCardTitle,
15341
+ subtitle: t7.depositWithCard.subtitle,
15342
+ paymentNetworks: projectConfig?.payment_networks.networks
15343
+ }
15344
+ ),
15345
+ showPayWithExchange && /* @__PURE__ */ jsx55(
15346
+ PayWithExchangeButton,
15347
+ {
15348
+ onClick: () => setView("exchange"),
15349
+ title: payWithExchangeTitle,
15350
+ subtitle: t7.payWithExchange.subtitle,
15351
+ exchanges,
15352
+ loading: exchangesLoading
15353
+ }
15354
+ ),
15355
+ showConnectExchange && connectedExchange && /* @__PURE__ */ jsx55(
15356
+ ConnectExchangeButton,
15357
+ {
15358
+ onClick: () => {
15359
+ setCoinbaseSkipToHoldings(true);
15360
+ setView("coinbase_connect");
15361
+ },
15362
+ onDisconnect: handleExchangeDisconnect,
15363
+ title: i18n.connectExchange.title,
15364
+ subtitle: i18n.connectExchange.subtitle,
15365
+ exchanges: integrationExchanges,
15366
+ connectedExchange
15367
+ }
15368
+ ),
15369
+ showConnectExchange && !connectedExchange && /* @__PURE__ */ jsx55(
15370
+ ConnectExchangeButton,
15371
+ {
15372
+ onClick: () => {
15373
+ setCoinbaseSkipToHoldings(false);
15374
+ setView("coinbase_connect");
15375
+ },
15376
+ title: i18n.connectExchange.title,
15377
+ subtitle: i18n.connectExchange.subtitle,
15378
+ exchanges: integrationExchanges
15379
+ }
15380
+ ),
15381
+ showCashApp && /* @__PURE__ */ jsx55(
15382
+ CashAppButton,
15383
+ {
15384
+ onClick: () => setView("cashapp"),
15385
+ title: "Pay with Cash App",
15386
+ subtitle: "Deposit via Cash App",
15387
+ iconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/cashapp.svg` : void 0
15388
+ }
15389
+ ),
15390
+ showDepositTracker && /* @__PURE__ */ jsx55(
15391
+ DepositTrackerButton,
15392
+ {
15393
+ onClick: () => {
15394
+ setAllExecutions(depositExecutions);
15395
+ setView("tracker");
15396
+ },
15397
+ title: depositTrackerTitle,
15398
+ subtitle: depositTrackerSubTitle,
15399
+ badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
15400
+ }
15401
+ )
15402
+ ] }) }),
15403
+ depositPoweredByFooter
15404
+ ] })
15405
+ ] }) : view === "transfer" ? /* @__PURE__ */ jsxs49(Fragment11, { children: [
15406
+ /* @__PURE__ */ jsx55(
15407
+ DepositHeader,
15408
+ {
15409
+ title: transferCryptoTitle,
15410
+ showBack: showBackTransfer,
15411
+ onBack: handleBack,
15412
+ onClose: handleClose,
15413
+ showBalance: showBalanceHeader,
15414
+ balanceAddress: recipientAddress,
15415
+ balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" ? destinationChainType : void 0,
15416
+ balanceChainId: destinationChainId,
15417
+ balanceTokenAddress: destinationTokenAddress,
15418
+ projectName: projectConfig?.project_name,
15419
+ publishableKey
15420
+ }
15421
+ ),
15422
+ /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
15423
+ standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ jsx55("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : transferInputVariant === "single_input" ? /* @__PURE__ */ jsx55(
15424
+ TransferCryptoSingleInput,
14987
15425
  {
14988
- onClick: handleBrowserWalletClick,
14989
- onConnectClick: handleWalletConnectClick,
14990
- onDisconnect: handleWalletDisconnect,
14991
- chainType: browserWalletChainType,
15426
+ userId,
14992
15427
  publishableKey,
14993
- featuredWallets: projectConfig?.connect_wallet?.wallets
15428
+ recipientAddress,
15429
+ destinationChainType,
15430
+ destinationChainId,
15431
+ destinationTokenAddress,
15432
+ defaultSourceChainType,
15433
+ defaultSourceChainId,
15434
+ defaultSourceTokenAddress,
15435
+ defaultSourceSymbol,
15436
+ depositConfirmationMode,
15437
+ onExecutionsChange: setDepositExecutions,
15438
+ onDepositSuccess,
15439
+ onDepositError,
15440
+ wallets
14994
15441
  }
14995
- ),
14996
- showFiatOnramp && /* @__PURE__ */ jsx55(
14997
- DepositWithCardButton,
15442
+ ) : /* @__PURE__ */ jsx55(
15443
+ TransferCryptoDoubleInput,
14998
15444
  {
14999
- onClick: () => setView("card"),
15000
- title: depositWithCardTitle,
15001
- subtitle: t7.depositWithCard.subtitle,
15002
- paymentNetworks: projectConfig?.payment_networks.networks
15445
+ userId,
15446
+ publishableKey,
15447
+ recipientAddress,
15448
+ destinationChainType,
15449
+ destinationChainId,
15450
+ destinationTokenAddress,
15451
+ defaultSourceChainType,
15452
+ defaultSourceChainId,
15453
+ defaultSourceTokenAddress,
15454
+ defaultSourceSymbol,
15455
+ depositConfirmationMode,
15456
+ onExecutionsChange: setDepositExecutions,
15457
+ onDepositSuccess,
15458
+ onDepositError,
15459
+ wallets
15003
15460
  }
15004
15461
  ),
15005
- showPayWithExchange && /* @__PURE__ */ jsx55(
15006
- PayWithExchangeButton,
15462
+ depositPoweredByFooter
15463
+ ] })
15464
+ ] }) : view === "tracker" ? /* @__PURE__ */ jsxs49(Fragment11, { children: [
15465
+ /* @__PURE__ */ jsx55(
15466
+ DepositHeader,
15467
+ {
15468
+ title: selectedExecution ? "Deposit Details" : depositTrackerTitle,
15469
+ showBack: showBackTracker,
15470
+ onBack: handleBack,
15471
+ onClose: handleClose
15472
+ }
15473
+ ),
15474
+ /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
15475
+ /* @__PURE__ */ jsx55("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: selectedExecution ? /* @__PURE__ */ jsx55(DepositDetailContent, { execution: selectedExecution }) : /* @__PURE__ */ jsx55("div", { className: "uf-space-y-2 uf-pb-8", children: allExecutions.length === 0 ? /* @__PURE__ */ jsx55("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ jsx55(
15476
+ "div",
15007
15477
  {
15008
- onClick: () => setView("exchange"),
15009
- title: payWithExchangeTitle,
15010
- subtitle: t7.payWithExchange.subtitle,
15011
- exchanges,
15012
- loading: exchangesLoading
15478
+ className: "uf-text-sm",
15479
+ style: { color: components.container.subtitleColor, fontFamily: fonts.regular },
15480
+ children: "No deposits yet"
15013
15481
  }
15014
- ),
15015
- showConnectExchange && connectedExchange && /* @__PURE__ */ jsx55(
15016
- ConnectExchangeButton,
15482
+ ) }) : allExecutions.map((execution) => /* @__PURE__ */ jsx55(
15483
+ DepositExecutionItem,
15017
15484
  {
15018
- onClick: () => {
15019
- setCoinbaseSkipToHoldings(true);
15020
- setView("coinbase_connect");
15021
- },
15022
- onDisconnect: handleExchangeDisconnect,
15023
- title: i18n.connectExchange.title,
15024
- subtitle: i18n.connectExchange.subtitle,
15025
- exchanges: integrationExchanges,
15026
- connectedExchange
15027
- }
15028
- ),
15029
- showConnectExchange && !connectedExchange && /* @__PURE__ */ jsx55(
15030
- ConnectExchangeButton,
15485
+ execution,
15486
+ onClick: () => setSelectedExecution(execution)
15487
+ },
15488
+ execution.id
15489
+ )) }) }),
15490
+ depositPoweredByFooter
15491
+ ] })
15492
+ ] }) : view === "card" ? /* @__PURE__ */ jsxs49(Fragment11, { children: [
15493
+ /* @__PURE__ */ jsx55(
15494
+ DepositHeader,
15495
+ {
15496
+ title: cardView === "quotes" ? t7.quotes : depositWithCardTitle,
15497
+ showBack: showBackCard,
15498
+ onBack: handleBack,
15499
+ onClose: handleClose,
15500
+ badge: cardView === "quotes" ? { count: quotesCount } : void 0,
15501
+ showBalance: showBalanceHeader,
15502
+ balanceAddress: recipientAddress,
15503
+ balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" ? destinationChainType : void 0,
15504
+ balanceChainId: destinationChainId,
15505
+ balanceTokenAddress: destinationTokenAddress,
15506
+ projectName: projectConfig?.project_name,
15507
+ publishableKey
15508
+ }
15509
+ ),
15510
+ /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
15511
+ standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ jsx55("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : /* @__PURE__ */ jsx55(
15512
+ BuyWithCard,
15031
15513
  {
15032
- onClick: () => {
15033
- setCoinbaseSkipToHoldings(false);
15034
- setView("coinbase_connect");
15035
- },
15036
- title: i18n.connectExchange.title,
15037
- subtitle: i18n.connectExchange.subtitle,
15038
- exchanges: integrationExchanges
15514
+ userId,
15515
+ publishableKey,
15516
+ view: cardView,
15517
+ onViewChange: handleCardViewChange,
15518
+ destinationTokenSymbol,
15519
+ recipientAddress,
15520
+ destinationChainType,
15521
+ destinationChainId,
15522
+ destinationTokenAddress,
15523
+ onDepositSuccess,
15524
+ onDepositError,
15525
+ onEvent,
15526
+ themeClass,
15527
+ wallets,
15528
+ assetCdnUrl: projectConfig?.asset_cdn_url,
15529
+ hideDepositFlowInfo,
15530
+ hideDisplayDescription
15039
15531
  }
15040
15532
  ),
15041
- showCashApp && /* @__PURE__ */ jsx55(
15042
- CashAppButton,
15533
+ depositPoweredByFooter
15534
+ ] })
15535
+ ] }) : view === "exchange" ? /* @__PURE__ */ jsxs49(Fragment11, { children: [
15536
+ /* @__PURE__ */ jsx55(
15537
+ DepositHeader,
15538
+ {
15539
+ title: payWithExchangeTitle,
15540
+ showBack: exchangeView === "pending" || sessionOpenedFromMenu,
15541
+ onBack: handleBack,
15542
+ onClose: handleClose
15543
+ }
15544
+ ),
15545
+ /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
15546
+ /* @__PURE__ */ jsx55(
15547
+ PayWithExchange,
15043
15548
  {
15044
- onClick: () => setView("cashapp"),
15045
- title: "Pay with Cash App",
15046
- subtitle: "Deposit via Cash App",
15047
- iconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/cashapp.svg` : void 0
15549
+ userId,
15550
+ publishableKey,
15551
+ exchanges,
15552
+ view: exchangeView,
15553
+ onViewChange: setExchangeView,
15554
+ destinationTokenSymbol,
15555
+ recipientAddress,
15556
+ destinationChainType,
15557
+ destinationChainId,
15558
+ destinationTokenAddress,
15559
+ onDepositSuccess,
15560
+ onDepositError,
15561
+ wallets,
15562
+ defaultToken: defaultToken ?? null
15048
15563
  }
15049
15564
  ),
15050
- showDepositTracker && /* @__PURE__ */ jsx55(
15051
- DepositTrackerButton,
15052
- {
15053
- onClick: () => {
15054
- setAllExecutions(depositExecutions);
15055
- setView("tracker");
15056
- },
15057
- title: depositTrackerTitle,
15058
- subtitle: depositTrackerSubTitle,
15059
- badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
15060
- }
15061
- )
15062
- ] }) }),
15063
- depositPoweredByFooter
15064
- ] })
15065
- ] }) : view === "transfer" ? /* @__PURE__ */ jsxs49(Fragment11, { children: [
15066
- /* @__PURE__ */ jsx55(
15067
- DepositHeader,
15068
- {
15069
- title: transferCryptoTitle,
15070
- showBack: showBackTransfer,
15071
- onBack: handleBack,
15072
- onClose: handleClose,
15073
- showBalance: showBalanceHeader,
15074
- balanceAddress: recipientAddress,
15075
- balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" ? destinationChainType : void 0,
15076
- balanceChainId: destinationChainId,
15077
- balanceTokenAddress: destinationTokenAddress,
15078
- projectName: projectConfig?.project_name,
15079
- publishableKey
15080
- }
15081
- ),
15082
- /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
15083
- standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ jsx55("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : transferInputVariant === "single_input" ? /* @__PURE__ */ jsx55(
15084
- TransferCryptoSingleInput,
15565
+ depositPoweredByFooter
15566
+ ] })
15567
+ ] }) : view === "coinbase_connect" ? /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
15568
+ /* @__PURE__ */ jsx55(
15569
+ CoinbaseConnect,
15085
15570
  {
15086
- userId,
15087
15571
  publishableKey,
15088
- recipientAddress,
15089
- destinationChainType,
15090
- destinationChainId,
15091
- destinationTokenAddress,
15092
- defaultSourceChainType,
15093
- defaultSourceChainId,
15094
- defaultSourceTokenAddress,
15095
- defaultSourceSymbol,
15096
- depositConfirmationMode,
15097
- onExecutionsChange: setDepositExecutions,
15098
- onDepositSuccess,
15099
- onDepositError,
15100
- wallets
15101
- }
15102
- ) : /* @__PURE__ */ jsx55(
15103
- TransferCryptoDoubleInput,
15104
- {
15105
15572
  userId,
15106
- publishableKey,
15573
+ wallets,
15107
15574
  recipientAddress,
15108
- destinationChainType,
15109
- destinationChainId,
15110
- destinationTokenAddress,
15575
+ destinationTokenAddress: destinationTokenAddress ?? "",
15576
+ destinationChainId: destinationChainId ?? "",
15577
+ destinationChainType: destinationChainType ?? "",
15578
+ onTransferSuccess: (result) => {
15579
+ onDepositSuccess?.({
15580
+ message: "Transfer completed via Coinbase Connect",
15581
+ transaction: result
15582
+ });
15583
+ },
15584
+ onTransferError: (error) => {
15585
+ onDepositError?.({
15586
+ message: error.message,
15587
+ error
15588
+ });
15589
+ },
15590
+ onBack: handleBack,
15591
+ onClose: handleClose,
15592
+ onDisconnect: handleExchangeDisconnect,
15593
+ skipToHoldings: coinbaseSkipToHoldings,
15594
+ canGoBack: sessionOpenedFromMenu,
15595
+ onExecutionsChange: setDepositExecutions,
15111
15596
  defaultSourceChainType,
15112
15597
  defaultSourceChainId,
15113
15598
  defaultSourceTokenAddress,
15114
- defaultSourceSymbol,
15115
- depositConfirmationMode,
15116
- onExecutionsChange: setDepositExecutions,
15117
- onDepositSuccess,
15118
- onDepositError,
15119
- wallets
15120
- }
15121
- ),
15122
- depositPoweredByFooter
15123
- ] })
15124
- ] }) : view === "tracker" ? /* @__PURE__ */ jsxs49(Fragment11, { children: [
15125
- /* @__PURE__ */ jsx55(
15126
- DepositHeader,
15127
- {
15128
- title: selectedExecution ? "Deposit Details" : depositTrackerTitle,
15129
- showBack: showBackTracker,
15130
- onBack: handleBack,
15131
- onClose: handleClose
15132
- }
15133
- ),
15134
- /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
15135
- /* @__PURE__ */ jsx55("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: selectedExecution ? /* @__PURE__ */ jsx55(DepositDetailContent, { execution: selectedExecution }) : /* @__PURE__ */ jsx55("div", { className: "uf-space-y-2 uf-pb-8", children: allExecutions.length === 0 ? /* @__PURE__ */ jsx55("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ jsx55(
15136
- "div",
15137
- {
15138
- className: "uf-text-sm",
15139
- style: { color: components.container.subtitleColor, fontFamily: fonts.regular },
15140
- children: "No deposits yet"
15141
- }
15142
- ) }) : allExecutions.map((execution) => /* @__PURE__ */ jsx55(
15143
- DepositExecutionItem,
15144
- {
15145
- execution,
15146
- onClick: () => setSelectedExecution(execution)
15147
- },
15148
- execution.id
15149
- )) }) }),
15150
- depositPoweredByFooter
15151
- ] })
15152
- ] }) : view === "card" ? /* @__PURE__ */ jsxs49(Fragment11, { children: [
15153
- /* @__PURE__ */ jsx55(
15154
- DepositHeader,
15155
- {
15156
- title: cardView === "quotes" ? t7.quotes : depositWithCardTitle,
15157
- showBack: showBackCard,
15158
- onBack: handleBack,
15159
- onClose: handleClose,
15160
- badge: cardView === "quotes" ? { count: quotesCount } : void 0,
15161
- showBalance: showBalanceHeader,
15162
- balanceAddress: recipientAddress,
15163
- balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" ? destinationChainType : void 0,
15164
- balanceChainId: destinationChainId,
15165
- balanceTokenAddress: destinationTokenAddress,
15166
- projectName: projectConfig?.project_name,
15167
- publishableKey
15168
- }
15169
- ),
15170
- /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
15171
- standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ jsx55("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : /* @__PURE__ */ jsx55(
15172
- BuyWithCard,
15173
- {
15174
- userId,
15175
- publishableKey,
15176
- view: cardView,
15177
- onViewChange: handleCardViewChange,
15178
- destinationTokenSymbol,
15179
- recipientAddress,
15180
- destinationChainType,
15181
- destinationChainId,
15182
- destinationTokenAddress,
15183
- onDepositSuccess,
15184
- onDepositError,
15185
- onEvent,
15186
- themeClass,
15187
- wallets,
15188
- assetCdnUrl: projectConfig?.asset_cdn_url,
15189
- hideDepositFlowInfo,
15190
- hideDisplayDescription
15599
+ defaultSourceSymbol
15191
15600
  }
15192
15601
  ),
15193
15602
  depositPoweredByFooter
15194
- ] })
15195
- ] }) : view === "exchange" ? /* @__PURE__ */ jsxs49(Fragment11, { children: [
15196
- /* @__PURE__ */ jsx55(
15197
- DepositHeader,
15198
- {
15199
- title: payWithExchangeTitle,
15200
- showBack: exchangeView === "pending" || sessionOpenedFromMenu,
15201
- onBack: handleBack,
15202
- onClose: handleClose
15203
- }
15204
- ),
15205
- /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
15603
+ ] }) : view === "wallet_connect" ? /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
15206
15604
  /* @__PURE__ */ jsx55(
15207
- PayWithExchange,
15605
+ WalletConnect,
15208
15606
  {
15607
+ walletInfo: browserWalletInfo ?? void 0,
15608
+ depositWallet: browserWalletInfo?.depositWallet ?? void 0,
15609
+ wallets,
15209
15610
  userId,
15210
15611
  publishableKey,
15211
- exchanges,
15212
- view: exchangeView,
15213
- onViewChange: setExchangeView,
15214
- destinationTokenSymbol,
15215
- recipientAddress,
15216
- destinationChainType,
15217
- destinationChainId,
15218
- destinationTokenAddress,
15612
+ assetCdnUrl: projectConfig?.asset_cdn_url,
15613
+ projectName: projectConfig?.project_name,
15614
+ onSuccess: (txHash) => {
15615
+ onDepositSuccess?.({
15616
+ message: "Transaction sent successfully",
15617
+ transaction: { txHash }
15618
+ });
15619
+ },
15620
+ onError: (error) => {
15621
+ onDepositError?.({
15622
+ message: error.message,
15623
+ error
15624
+ });
15625
+ },
15219
15626
  onDepositSuccess,
15220
15627
  onDepositError,
15221
- wallets,
15222
- defaultToken: defaultToken ?? null
15628
+ amountQuickSelect: browserWalletAmountQuickSelect,
15629
+ onWalletDisconnect: handleWalletDisconnect,
15630
+ onWalletConnected: (info, dw) => {
15631
+ setBrowserWalletInfo({ ...info, depositWallet: dw });
15632
+ setStoredWalletState(info.type);
15633
+ setBrowserWalletChainType(dw.chain_type === "solana" ? "solana" : "ethereum");
15634
+ },
15635
+ onBack: handleBack,
15636
+ onClose: handleClose,
15637
+ defaultSourceChainType,
15638
+ defaultSourceChainId,
15639
+ defaultSourceTokenAddress,
15640
+ defaultSourceSymbol,
15641
+ canGoBack: sessionOpenedFromMenu,
15642
+ depositWalletsLoading: walletsLoading
15223
15643
  }
15224
15644
  ),
15225
15645
  depositPoweredByFooter
15226
- ] })
15227
- ] }) : view === "coinbase_connect" ? /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
15228
- /* @__PURE__ */ jsx55(
15229
- CoinbaseConnect,
15230
- {
15231
- publishableKey,
15232
- userId,
15233
- wallets,
15234
- recipientAddress,
15235
- destinationTokenAddress: destinationTokenAddress ?? "",
15236
- destinationChainId: destinationChainId ?? "",
15237
- destinationChainType: destinationChainType ?? "",
15238
- onTransferSuccess: (result) => {
15239
- onDepositSuccess?.({
15240
- message: "Transfer completed via Coinbase Connect",
15241
- transaction: result
15242
- });
15243
- },
15244
- onTransferError: (error) => {
15245
- onDepositError?.({
15246
- message: error.message,
15247
- error
15248
- });
15249
- },
15250
- onBack: handleBack,
15251
- onClose: handleClose,
15252
- onDisconnect: handleExchangeDisconnect,
15253
- skipToHoldings: coinbaseSkipToHoldings,
15254
- canGoBack: sessionOpenedFromMenu,
15255
- onExecutionsChange: setDepositExecutions,
15256
- defaultSourceChainType,
15257
- defaultSourceChainId,
15258
- defaultSourceTokenAddress,
15259
- defaultSourceSymbol
15260
- }
15261
- ),
15262
- depositPoweredByFooter
15263
- ] }) : view === "wallet_connect" ? /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
15264
- /* @__PURE__ */ jsx55(
15265
- WalletConnect,
15266
- {
15267
- walletInfo: browserWalletInfo ?? void 0,
15268
- depositWallet: browserWalletInfo?.depositWallet ?? void 0,
15269
- wallets,
15270
- userId,
15271
- publishableKey,
15272
- assetCdnUrl: projectConfig?.asset_cdn_url,
15273
- projectName: projectConfig?.project_name,
15274
- onSuccess: (txHash) => {
15275
- onDepositSuccess?.({
15276
- message: "Transaction sent successfully",
15277
- transaction: { txHash }
15278
- });
15279
- },
15280
- onError: (error) => {
15281
- onDepositError?.({
15282
- message: error.message,
15283
- error
15284
- });
15285
- },
15286
- onDepositSuccess,
15287
- onDepositError,
15288
- amountQuickSelect: browserWalletAmountQuickSelect,
15289
- onWalletDisconnect: handleWalletDisconnect,
15290
- onWalletConnected: (info, dw) => {
15291
- setBrowserWalletInfo({ ...info, depositWallet: dw });
15292
- setStoredWalletState(info.type);
15293
- setBrowserWalletChainType(dw.chain_type === "solana" ? "solana" : "ethereum");
15294
- },
15295
- onBack: handleBack,
15296
- onClose: handleClose,
15297
- defaultSourceChainType,
15298
- defaultSourceChainId,
15299
- defaultSourceTokenAddress,
15300
- defaultSourceSymbol,
15301
- canGoBack: sessionOpenedFromMenu,
15302
- depositWalletsLoading: walletsLoading
15303
- }
15304
- ),
15305
- depositPoweredByFooter
15306
- ] }) : view === "cashapp" ? /* @__PURE__ */ jsxs49(Fragment11, { children: [
15307
- /* @__PURE__ */ jsx55(
15308
- DepositHeader,
15309
- {
15310
- title: cashAppView !== "amount" && cashAppAmount ? `Pay $${cashAppAmount} via Cash App` : "Pay with Cash App",
15311
- showBack: cashAppView !== "amount" || sessionOpenedFromMenu,
15312
- onBack: handleBack,
15313
- onClose: handleClose
15314
- }
15315
- ),
15316
- /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
15646
+ ] }) : view === "cashapp" ? /* @__PURE__ */ jsxs49(Fragment11, { children: [
15317
15647
  /* @__PURE__ */ jsx55(
15318
- PayWithCashApp,
15648
+ DepositHeader,
15319
15649
  {
15320
- userId,
15321
- publishableKey,
15322
- recipientAddress,
15323
- destinationChainType,
15324
- destinationChainId,
15325
- destinationTokenAddress,
15326
- cashAppIconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/cashapp.svg` : void 0,
15327
- view: cashAppView,
15328
- onViewChange: setCashAppView,
15329
- onAmountChange: setCashAppAmount,
15330
- onEvent,
15331
- onDepositSuccess,
15332
- onDepositError
15650
+ title: cashAppView !== "amount" && cashAppAmount ? `Pay $${cashAppAmount} via Cash App` : "Pay with Cash App",
15651
+ showBack: cashAppView !== "amount" || sessionOpenedFromMenu,
15652
+ onBack: handleBack,
15653
+ onClose: handleClose
15333
15654
  }
15334
15655
  ),
15335
- depositPoweredByFooter
15336
- ] })
15337
- ] }) : null })
15656
+ /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
15657
+ /* @__PURE__ */ jsx55(
15658
+ PayWithCashApp,
15659
+ {
15660
+ userId,
15661
+ publishableKey,
15662
+ recipientAddress,
15663
+ destinationChainType,
15664
+ destinationChainId,
15665
+ destinationTokenAddress,
15666
+ cashAppIconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/cashapp.svg` : void 0,
15667
+ view: cashAppView,
15668
+ onViewChange: setCashAppView,
15669
+ onAmountChange: setCashAppAmount,
15670
+ onEvent,
15671
+ onDepositSuccess,
15672
+ onDepositError
15673
+ }
15674
+ ),
15675
+ depositPoweredByFooter
15676
+ ] })
15677
+ ] }) : null })
15678
+ ]
15338
15679
  }
15339
15680
  )
15340
15681
  }
@@ -15353,7 +15694,7 @@ import {
15353
15694
  import { AlertTriangle as AlertTriangle3, ChevronRight as ChevronRight15 } from "lucide-react";
15354
15695
 
15355
15696
  // src/hooks/use-payment-intent.ts
15356
- import { useQuery as useQuery13 } from "@tanstack/react-query";
15697
+ import { useQuery as useQuery14 } from "@tanstack/react-query";
15357
15698
  import { retrievePaymentIntent } from "@unifold/core";
15358
15699
  var TERMINAL_STATUSES = /* @__PURE__ */ new Set([
15359
15700
  "succeeded",
@@ -15368,7 +15709,7 @@ function usePaymentIntent(params) {
15368
15709
  enabled = true,
15369
15710
  pollingInterval = 3e3
15370
15711
  } = params;
15371
- return useQuery13({
15712
+ return useQuery14({
15372
15713
  queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
15373
15714
  queryFn: () => retrievePaymentIntent(clientSecret, publishableKey),
15374
15715
  enabled: enabled && !!clientSecret && !!publishableKey,
@@ -15437,7 +15778,6 @@ function CheckoutModal({
15437
15778
  const [browserWalletInfo, setBrowserWalletInfo] = useState33(null);
15438
15779
  const [walletSelectionModalOpen, setWalletSelectionModalOpen] = useState33(false);
15439
15780
  const [browserWalletChainType, setBrowserWalletChainType] = useState33(() => getStoredWalletState()?.chainType);
15440
- const isMobileView = useIsMobileViewport();
15441
15781
  const [resolvedTheme, setResolvedTheme] = useState33(
15442
15782
  theme === "auto" ? "dark" : theme
15443
15783
  );
@@ -15863,7 +16203,7 @@ function CheckoutModal({
15863
16203
  featuredTokens: projectConfig?.transfer_crypto.networks
15864
16204
  }
15865
16205
  ),
15866
- showConnectWallet && !isMobileView && /* @__PURE__ */ jsx56(
16206
+ showConnectWallet && /* @__PURE__ */ jsx56(
15867
16207
  BrowserWalletButton,
15868
16208
  {
15869
16209
  onClick: handleBrowserWalletClick,
@@ -16035,12 +16375,12 @@ import {
16035
16375
  import { AlertTriangle as AlertTriangle5, ChevronRight as ChevronRight17, Clock as Clock6 } from "lucide-react";
16036
16376
 
16037
16377
  // src/hooks/use-supported-destination-tokens.ts
16038
- import { useQuery as useQuery14 } from "@tanstack/react-query";
16378
+ import { useQuery as useQuery15 } from "@tanstack/react-query";
16039
16379
  import {
16040
16380
  getSupportedDestinationTokens
16041
16381
  } from "@unifold/core";
16042
16382
  function useSupportedDestinationTokens(publishableKey, enabled = true) {
16043
- return useQuery14({
16383
+ return useQuery15({
16044
16384
  queryKey: ["unifold", "supportedDestinationTokens", publishableKey],
16045
16385
  queryFn: () => getSupportedDestinationTokens(publishableKey),
16046
16386
  staleTime: 1e3 * 60 * 5,
@@ -16069,7 +16409,7 @@ function useDefaultDestinationToken({
16069
16409
  }
16070
16410
 
16071
16411
  // src/hooks/use-source-token-validation.ts
16072
- import { useQuery as useQuery15 } from "@tanstack/react-query";
16412
+ import { useQuery as useQuery16 } from "@tanstack/react-query";
16073
16413
  import { getSupportedDepositTokens as getSupportedDepositTokens3 } from "@unifold/core";
16074
16414
  function useSourceTokenValidation(params) {
16075
16415
  const {
@@ -16081,7 +16421,7 @@ function useSourceTokenValidation(params) {
16081
16421
  enabled = true
16082
16422
  } = params;
16083
16423
  const hasParams = !!sourceChainType && !!sourceChainId && !!sourceTokenAddress;
16084
- return useQuery15({
16424
+ return useQuery16({
16085
16425
  queryKey: [
16086
16426
  "unifold",
16087
16427
  "sourceTokenValidation",
@@ -16129,7 +16469,7 @@ function useSourceTokenValidation(params) {
16129
16469
  }
16130
16470
 
16131
16471
  // src/hooks/use-address-balance.ts
16132
- import { useQuery as useQuery16 } from "@tanstack/react-query";
16472
+ import { useQuery as useQuery17 } from "@tanstack/react-query";
16133
16473
  import { getAddressBalance as getAddressBalance2 } from "@unifold/core";
16134
16474
  function useAddressBalance(params) {
16135
16475
  const {
@@ -16141,7 +16481,7 @@ function useAddressBalance(params) {
16141
16481
  enabled = true
16142
16482
  } = params;
16143
16483
  const hasParams = !!address && !!chainType && !!chainId && !!tokenAddress;
16144
- return useQuery16({
16484
+ return useQuery17({
16145
16485
  queryKey: [
16146
16486
  "unifold",
16147
16487
  "addressBalance",
@@ -16190,11 +16530,11 @@ function useAddressBalance(params) {
16190
16530
  }
16191
16531
 
16192
16532
  // src/hooks/use-executions.ts
16193
- import { useQuery as useQuery17 } from "@tanstack/react-query";
16533
+ import { useQuery as useQuery18 } from "@tanstack/react-query";
16194
16534
  import { queryExecutions as queryExecutions4, ActionType as ActionType4 } from "@unifold/core";
16195
16535
  function useExecutions(userId, publishableKey, options) {
16196
16536
  const actionType = options?.actionType ?? ActionType4.Deposit;
16197
- return useQuery17({
16537
+ return useQuery18({
16198
16538
  queryKey: ["unifold", "executions", actionType, userId, publishableKey],
16199
16539
  queryFn: () => queryExecutions4(userId, publishableKey, actionType),
16200
16540
  enabled: (options?.enabled ?? true) && !!userId,
@@ -16210,7 +16550,7 @@ import { useState as useState34, useEffect as useEffect28, useRef as useRef11 }
16210
16550
  import {
16211
16551
  queryExecutions as queryExecutions5,
16212
16552
  pollDirectExecutions as pollDirectExecutions2,
16213
- ExecutionStatus as ExecutionStatus5,
16553
+ ExecutionStatus as ExecutionStatus6,
16214
16554
  ActionType as ActionType5
16215
16555
  } from "@unifold/core";
16216
16556
  var POLL_INTERVAL_MS3 = 2500;
@@ -16259,8 +16599,8 @@ function useWithdrawPolling({
16259
16599
  const tB = b.created_at ? new Date(b.created_at).getTime() : 0;
16260
16600
  return tB - tA;
16261
16601
  });
16262
- const inProgress = [ExecutionStatus5.PENDING, ExecutionStatus5.WAITING, ExecutionStatus5.DELAYED];
16263
- const terminal = [ExecutionStatus5.SUCCEEDED, ExecutionStatus5.FAILED];
16602
+ const inProgress = [ExecutionStatus6.PENDING, ExecutionStatus6.WAITING, ExecutionStatus6.DELAYED];
16603
+ const terminal = [ExecutionStatus6.SUCCEEDED, ExecutionStatus6.FAILED];
16264
16604
  let target = null;
16265
16605
  for (const ex of sorted) {
16266
16606
  const t12 = ex.created_at ? new Date(ex.created_at) : null;
@@ -16290,9 +16630,9 @@ function useWithdrawPolling({
16290
16630
  }
16291
16631
  return [...list, ex];
16292
16632
  });
16293
- if (ex.status === ExecutionStatus5.SUCCEEDED && (!prev || inProgress.includes(prev))) {
16633
+ if (ex.status === ExecutionStatus6.SUCCEEDED && (!prev || inProgress.includes(prev))) {
16294
16634
  onSuccessRef.current?.({ message: "Withdrawal completed successfully", executionId: ex.id, transaction: ex });
16295
- } else if (ex.status === ExecutionStatus5.FAILED && prev !== ExecutionStatus5.FAILED) {
16635
+ } else if (ex.status === ExecutionStatus6.FAILED && prev !== ExecutionStatus6.FAILED) {
16296
16636
  onErrorRef.current?.({ message: "Withdrawal failed", code: "WITHDRAW_FAILED", error: ex });
16297
16637
  }
16298
16638
  }
@@ -16498,7 +16838,7 @@ import {
16498
16838
  } from "@unifold/core";
16499
16839
 
16500
16840
  // src/hooks/use-verify-recipient-address.ts
16501
- import { useQuery as useQuery18 } from "@tanstack/react-query";
16841
+ import { useQuery as useQuery19 } from "@tanstack/react-query";
16502
16842
  import { verifyRecipientAddress as verifyRecipientAddress2 } from "@unifold/core";
16503
16843
  function useVerifyRecipientAddress(params) {
16504
16844
  const {
@@ -16511,7 +16851,7 @@ function useVerifyRecipientAddress(params) {
16511
16851
  } = params;
16512
16852
  const trimmedAddress = recipientAddress?.trim() || "";
16513
16853
  const hasAllParams = !!chainType && !!chainId && !!tokenAddress && trimmedAddress.length > 0;
16514
- return useQuery18({
16854
+ return useQuery19({
16515
16855
  queryKey: [
16516
16856
  "unifold",
16517
16857
  "verifyRecipientAddress",
@@ -16783,7 +17123,7 @@ import { useMemo as useMemo12 } from "react";
16783
17123
  import { ActionType as ActionType6 } from "@unifold/core";
16784
17124
 
16785
17125
  // src/hooks/use-get-deposit-address.ts
16786
- import { useQuery as useQuery19 } from "@tanstack/react-query";
17126
+ import { useQuery as useQuery20 } from "@tanstack/react-query";
16787
17127
  import {
16788
17128
  getDepositAddress
16789
17129
  } from "@unifold/core";
@@ -16799,7 +17139,7 @@ function useGetDepositAddress(params) {
16799
17139
  enabled = true
16800
17140
  } = params;
16801
17141
  const canFire = !!userId && !!recipientAddress && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress;
16802
- return useQuery19({
17142
+ return useQuery20({
16803
17143
  queryKey: [
16804
17144
  "unifold",
16805
17145
  "getDepositAddress",
@@ -17452,7 +17792,7 @@ function WithdrawForm({
17452
17792
  // src/components/withdrawals/WithdrawExecutionItem.tsx
17453
17793
  import { ChevronRight as ChevronRight16 } from "lucide-react";
17454
17794
  import {
17455
- ExecutionStatus as ExecutionStatus6,
17795
+ ExecutionStatus as ExecutionStatus7,
17456
17796
  getIconUrl as getIconUrl5
17457
17797
  } from "@unifold/core";
17458
17798
  import { jsx as jsx59, jsxs as jsxs53 } from "react/jsx-runtime";
@@ -17461,7 +17801,7 @@ function WithdrawExecutionItem({
17461
17801
  onClick
17462
17802
  }) {
17463
17803
  const { colors: colors2, fonts, components } = useTheme();
17464
- const isPending = execution.status === ExecutionStatus6.PENDING || execution.status === ExecutionStatus6.WAITING || execution.status === ExecutionStatus6.DELAYED;
17804
+ const isPending = execution.status === ExecutionStatus7.PENDING || execution.status === ExecutionStatus7.WAITING || execution.status === ExecutionStatus7.DELAYED;
17465
17805
  const formatDateTime = (timestamp) => {
17466
17806
  try {
17467
17807
  const date = new Date(timestamp);