@unifold/connect-react 0.1.68-beta.2 → 0.1.68

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.js CHANGED
@@ -8103,7 +8103,6 @@ var import_jsx_runtime62 = require("react/jsx-runtime");
8103
8103
  var import_react_query13 = require("@tanstack/react-query");
8104
8104
  var import_react_query14 = require("@tanstack/react-query");
8105
8105
  var import_react_query15 = require("@tanstack/react-query");
8106
- var import_react_query16 = require("@tanstack/react-query");
8107
8106
  var import_react27 = require("react");
8108
8107
  var import_react28 = require("react");
8109
8108
  var React312 = __toESM(require("react"), 1);
@@ -12854,7 +12853,7 @@ var Content22 = TooltipContent;
12854
12853
 
12855
12854
  // ../ui-react/dist/index.mjs
12856
12855
  var import_jsx_runtime69 = require("react/jsx-runtime");
12857
- var import_react_query17 = require("@tanstack/react-query");
12856
+ var import_react_query16 = require("@tanstack/react-query");
12858
12857
  var import_jsx_runtime70 = require("react/jsx-runtime");
12859
12858
  var import_jsx_runtime71 = require("react/jsx-runtime");
12860
12859
  var import_react32 = require("react");
@@ -14096,8 +14095,8 @@ var Separator = SelectSeparator;
14096
14095
  var import_jsx_runtime72 = require("react/jsx-runtime");
14097
14096
  var import_jsx_runtime73 = require("react/jsx-runtime");
14098
14097
  var React342 = __toESM(require("react"), 1);
14098
+ var import_react_query17 = require("@tanstack/react-query");
14099
14099
  var import_react_query18 = require("@tanstack/react-query");
14100
- var import_react_query19 = require("@tanstack/react-query");
14101
14100
  var import_jsx_runtime74 = require("react/jsx-runtime");
14102
14101
  var import_jsx_runtime75 = require("react/jsx-runtime");
14103
14102
  var import_jsx_runtime76 = require("react/jsx-runtime");
@@ -14107,19 +14106,19 @@ var import_jsx_runtime78 = require("react/jsx-runtime");
14107
14106
  var import_jsx_runtime79 = require("react/jsx-runtime");
14108
14107
  var import_jsx_runtime80 = require("react/jsx-runtime");
14109
14108
  var import_react34 = require("react");
14110
- var import_react_query20 = require("@tanstack/react-query");
14109
+ var import_react_query19 = require("@tanstack/react-query");
14111
14110
  var import_jsx_runtime81 = require("react/jsx-runtime");
14112
14111
  var import_react35 = require("react");
14112
+ var import_react_query20 = require("@tanstack/react-query");
14113
14113
  var import_react_query21 = require("@tanstack/react-query");
14114
14114
  var import_react_query22 = require("@tanstack/react-query");
14115
14115
  var import_react_query23 = require("@tanstack/react-query");
14116
- var import_react_query24 = require("@tanstack/react-query");
14117
14116
  var import_react36 = require("react");
14118
14117
  var import_jsx_runtime82 = require("react/jsx-runtime");
14119
14118
  var import_react37 = require("react");
14120
- var import_react_query25 = require("@tanstack/react-query");
14119
+ var import_react_query24 = require("@tanstack/react-query");
14121
14120
  var import_react38 = require("react");
14122
- var import_react_query26 = require("@tanstack/react-query");
14121
+ var import_react_query25 = require("@tanstack/react-query");
14123
14122
  var import_jsx_runtime83 = require("react/jsx-runtime");
14124
14123
  var import_jsx_runtime84 = require("react/jsx-runtime");
14125
14124
  var import_react39 = require("react");
@@ -14556,6 +14555,7 @@ var DialogContent2 = React36.forwardRef(({ className, style, children, omitOverl
14556
14555
  className: cn(
14557
14556
  portalContainer ? "uf-absolute" : "uf-fixed",
14558
14557
  "uf-bottom-0 uf-left-0 uf-right-0 uf-top-0 uf-z-50 uf-grid uf-w-full uf-max-w-full uf-h-full",
14558
+ "focus:uf-outline-none focus-visible:uf-outline-none",
14559
14559
  !portalContainer && "sm:uf-left-[50%] sm:uf-top-[50%] sm:uf-bottom-auto sm:uf-right-auto sm:uf-translate-x-[-50%] sm:uf-translate-y-[-50%] sm:uf-h-auto",
14560
14560
  "uf-border uf-bg-background",
14561
14561
  omitOverlayEmbed ? "uf-gap-0 uf-p-0" : "uf-gap-4 uf-p-6 uf-shadow-lg uf-duration-200",
@@ -14571,6 +14571,14 @@ var DialogContent2 = React36.forwardRef(({ className, style, children, omitOverl
14571
14571
  ),
14572
14572
  style: {
14573
14573
  "--uf-container-radius": `${components.container.borderRadius}px`,
14574
+ // Radix traps focus and, when the focused control unmounts during an
14575
+ // in-modal screen transition, moves focus onto this container. Modern
14576
+ // browsers paint the default focus ring via `:focus-visible`, which
14577
+ // flashes a highlight around the whole modal until focus settles on
14578
+ // the next screen. Suppress it inline so it works regardless of the
14579
+ // Tailwind build (the container is a programmatic focus target, not an
14580
+ // interactive control, so it should never show a focus ring).
14581
+ outline: "none",
14574
14582
  ...portalContainer ? { display: "flex", flexDirection: "column" } : {},
14575
14583
  ...style
14576
14584
  },
@@ -26687,10 +26695,16 @@ function PayWithStripeLink({
26687
26695
  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
26688
26696
  "div",
26689
26697
  {
26690
- className: "uf-flex uf-flex-col uf-py-4 uf-overflow-y-auto uf-max-h-[70vh]",
26698
+ className: "uf-flex uf-flex-col uf-py-4 uf-overflow-y-auto uf-overflow-x-hidden uf-max-h-[70vh]",
26691
26699
  style: { backgroundColor: colors2.background },
26692
26700
  children: [
26693
- /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { ref: paymentMountRef, className: "uf-w-full uf-flex-1 uf-overflow-y-auto" }),
26701
+ /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
26702
+ "div",
26703
+ {
26704
+ ref: paymentMountRef,
26705
+ className: "uf-w-full uf-flex-1 uf-overflow-y-auto uf-overflow-x-hidden"
26706
+ }
26707
+ ),
26694
26708
  !stripePaymentUIReady && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-8", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(LoaderCircle, { className: "uf-w-8 uf-h-8 uf-animate-spin", style: { color: colors2.primary } }) }),
26695
26709
  error && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
26696
26710
  "div",
@@ -26708,7 +26722,7 @@ function PayWithStripeLink({
26708
26722
  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
26709
26723
  "div",
26710
26724
  {
26711
- className: "uf-flex uf-flex-col uf-py-4 uf-overflow-y-auto uf-max-h-[70vh]",
26725
+ className: "uf-flex uf-flex-col uf-py-4 uf-overflow-y-auto uf-overflow-x-hidden uf-max-h-[70vh]",
26712
26726
  style: { backgroundColor: colors2.background },
26713
26727
  children: [
26714
26728
  displayPaymentTokens.length === 0 && !loading && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "uf-px-1 uf-mb-3 uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
@@ -27818,17 +27832,30 @@ function PayWithStripeLink({
27818
27832
  }
27819
27833
  function useProjectConfig({
27820
27834
  publishableKey,
27821
- enabled = true
27835
+ enabled = true,
27836
+ countryCode,
27837
+ subdivisionCode
27822
27838
  }) {
27823
- const { data: projectConfig, isLoading } = (0, import_react_query10.useQuery)({
27824
- queryKey: ["unifold", "projectConfig", publishableKey],
27825
- queryFn: () => getProjectConfig(publishableKey),
27839
+ const {
27840
+ data: projectConfig,
27841
+ isLoading,
27842
+ error
27843
+ } = (0, import_react_query10.useQuery)({
27844
+ // Country is part of the key so a region change refetches the region-aware
27845
+ // config. Omitted when undefined so callers that don't pass a country keep
27846
+ // sharing the base cache entry.
27847
+ queryKey: countryCode ? ["unifold", "projectConfig", publishableKey, countryCode, subdivisionCode ?? null] : ["unifold", "projectConfig", publishableKey],
27848
+ queryFn: () => getProjectConfig(publishableKey, countryCode ? { countryCode, subdivisionCode } : void 0),
27826
27849
  enabled,
27850
+ // Keep the previous (e.g. no-country) config visible while the region-aware
27851
+ // config refetches after the country resolves, so unrelated config-driven
27852
+ // UI doesn't flash back to defaults.
27853
+ placeholderData: import_react_query10.keepPreviousData,
27827
27854
  staleTime: 1e3 * 60 * 30,
27828
27855
  refetchOnMount: true,
27829
27856
  refetchOnWindowFocus: true
27830
27857
  });
27831
- return { projectConfig, isLoading };
27858
+ return { projectConfig, isLoading, error: error ?? null };
27832
27859
  }
27833
27860
  function useSupportedDepositTokens(publishableKey, options) {
27834
27861
  const hasDestination = options?.destination_token_address && options?.destination_chain_id && options?.destination_chain_type;
@@ -29867,44 +29894,28 @@ function useApplePayProviders({
29867
29894
  return { providers, isLoading };
29868
29895
  }
29869
29896
  function useAllowedCountry(publishableKey) {
29897
+ const { userIpInfo, isLoading: isIpLoading, error: ipError } = useUserIp2();
29870
29898
  const {
29871
- data: ipData,
29872
- isLoading: isIpLoading,
29873
- error: ipError
29874
- } = (0, import_react_query15.useQuery)({
29875
- queryKey: ["unifold", "ipAddress"],
29876
- queryFn: () => getIpAddress(),
29877
- refetchOnMount: false,
29878
- refetchOnReconnect: true,
29879
- refetchOnWindowFocus: false,
29880
- staleTime: 1e3 * 60 * 60,
29881
- // 1 hour
29882
- gcTime: 1e3 * 60 * 60 * 24
29883
- // 24 hours
29884
- });
29885
- const {
29886
- data: configData,
29899
+ projectConfig,
29887
29900
  isLoading: isConfigLoading,
29888
29901
  error: configError
29889
- } = (0, import_react_query15.useQuery)({
29890
- queryKey: ["unifold", "projectConfig", publishableKey],
29891
- queryFn: () => getProjectConfig(publishableKey),
29892
- refetchOnMount: false,
29893
- refetchOnReconnect: true,
29894
- refetchOnWindowFocus: false,
29895
- staleTime: 1e3 * 60 * 5,
29896
- // 5 minutes
29897
- gcTime: 1e3 * 60 * 60
29898
- // 1 hour
29902
+ } = useProjectConfig({
29903
+ publishableKey,
29904
+ // Wait for the IP so we issue a single country-aware config request rather
29905
+ // than a country-less fetch followed by a country-aware refetch. Shares the
29906
+ // query key with DepositModal's useProjectConfig, so they dedupe.
29907
+ enabled: !isIpLoading,
29908
+ countryCode: userIpInfo?.alpha2,
29909
+ subdivisionCode: userIpInfo?.subdivisionCode ?? void 0
29899
29910
  });
29900
29911
  const isLoading = isIpLoading || isConfigLoading;
29901
29912
  const error = ipError || configError || null;
29913
+ const userSubdivision = userIpInfo?.subdivisionCode || userIpInfo?.state || "";
29902
29914
  let isAllowed = null;
29903
- if (ipData && configData) {
29904
- const blockedCodes = configData.blocked_country_codes || [];
29905
- const blockedSubdivisions = configData.blocked_country_subdivisions || [];
29906
- const userCountryUpper = ipData.alpha2.toUpperCase();
29907
- const userSubdivision = ipData.subdivision_code || ipData.state || "";
29915
+ if (userIpInfo && projectConfig) {
29916
+ const blockedCodes = projectConfig.blocked_country_codes || [];
29917
+ const blockedSubdivisions = projectConfig.blocked_country_subdivisions || [];
29918
+ const userCountryUpper = userIpInfo.alpha2.toUpperCase();
29908
29919
  const userSubdivisionUpper = userSubdivision.toUpperCase();
29909
29920
  const isCountryBlocked = blockedCodes.some((code) => code.toUpperCase() === userCountryUpper);
29910
29921
  const isSubdivisionBlocked = blockedSubdivisions.some((entry) => {
@@ -29913,12 +29924,11 @@ function useAllowedCountry(publishableKey) {
29913
29924
  });
29914
29925
  isAllowed = !isCountryBlocked && !isSubdivisionBlocked;
29915
29926
  }
29916
- const subdivisionCode = ipData?.subdivision_code || ipData?.state || "" || null;
29917
29927
  return {
29918
29928
  isAllowed,
29919
- alpha2: ipData?.alpha2 ?? null,
29920
- country: ipData?.country ?? null,
29921
- subdivisionCode,
29929
+ alpha2: userIpInfo?.alpha2 ?? null,
29930
+ country: userIpInfo?.country ?? null,
29931
+ subdivisionCode: userSubdivision || null,
29922
29932
  isLoading,
29923
29933
  error
29924
29934
  };
@@ -29933,7 +29943,7 @@ function useAddressValidation({
29933
29943
  refetchOnMount = false
29934
29944
  }) {
29935
29945
  const shouldValidate = enabled && !!recipientAddress && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress;
29936
- const { data, isLoading, error } = (0, import_react_query16.useQuery)({
29946
+ const { data, isLoading, error } = (0, import_react_query15.useQuery)({
29937
29947
  queryKey: [
29938
29948
  "unifold",
29939
29949
  "addressValidation",
@@ -31235,7 +31245,7 @@ function useHypercoreActivation(params) {
31235
31245
  const recipient = recipientAddress?.trim() ?? "";
31236
31246
  const source = sourceAddress?.trim() ?? "";
31237
31247
  const hasAddresses = !!recipient && !!source;
31238
- const { data, isLoading } = (0, import_react_query17.useQuery)({
31248
+ const { data, isLoading } = (0, import_react_query16.useQuery)({
31239
31249
  queryKey: ["unifold", "hypercoreActivation", source, recipient, publishableKey],
31240
31250
  queryFn: () => checkHypercoreActivation(
31241
31251
  {
@@ -32733,7 +32743,7 @@ function useDepositQuote(params) {
32733
32743
  ...adjustForSlippage ? { adjust_for_slippage: true } : {},
32734
32744
  ...stablecoinParity ? { stablecoin_parity: true } : {}
32735
32745
  };
32736
- return (0, import_react_query18.useQuery)({
32746
+ return (0, import_react_query17.useQuery)({
32737
32747
  queryKey: [
32738
32748
  "unifold",
32739
32749
  "depositQuote",
@@ -32763,7 +32773,7 @@ function useExternalWallets({
32763
32773
  publishableKey,
32764
32774
  enabled = true
32765
32775
  }) {
32766
- const { data: wallets = [], isLoading } = (0, import_react_query19.useQuery)({
32776
+ const { data: wallets = [], isLoading } = (0, import_react_query18.useQuery)({
32767
32777
  queryKey: ["unifold", "external-wallets", publishableKey],
32768
32778
  queryFn: () => getExternalWallets(publishableKey).then((res) => res.data),
32769
32779
  enabled: enabled && !!publishableKey,
@@ -34868,116 +34878,131 @@ function WalletConnect({
34868
34878
  ] });
34869
34879
  }
34870
34880
  if (view === "select_wallet") {
34871
- return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { style: viewTransitionStyle, children: [
34872
- /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34873
- DepositHeader,
34881
+ return (
34882
+ // Mobile: flex column that fills the full-height sheet so the wallet list
34883
+ // scrolls and the footer pins to the bottom. Desktop (sm:): content-sized.
34884
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
34885
+ "div",
34874
34886
  {
34875
- title: "Connect Wallet",
34876
- showBack: canGoBack,
34877
- onBack: handleBack,
34878
- onClose
34879
- }
34880
- ),
34881
- /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "uf-pb-4", children: [
34882
- /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34883
- "p",
34884
- {
34885
- className: "uf-text-sm uf-text-center uf-pb-4",
34886
- style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
34887
- children: isMobile ? "Open this page in your wallet's app to connect" : "Select a wallet to connect"
34888
- }
34889
- ),
34890
- /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "uf-space-y-2", style: { maxHeight: 330, overflowY: "auto" }, children: availableWallets.map((wallet) => {
34891
- const walletPlatformAllowed = !wallet.mobileBrowsePlatforms || wallet.mobileBrowsePlatforms.includes(getMobilePlatform() ?? "");
34892
- const showOpenInApp = isMobile && !wallet.isInstalled && wallet.supportsMobileBrowse !== false && walletPlatformAllowed;
34893
- const isPending = pendingMobileWallet?.id === wallet.id;
34894
- return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
34895
- "button",
34896
- {
34897
- onClick: () => void handleWalletClick(wallet),
34898
- disabled: isWalletConnecting || !!pendingMobileWallet,
34899
- 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",
34900
- style: {
34901
- backgroundColor: components.card.backgroundColor,
34902
- borderRadius: components.card.borderRadius,
34903
- border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
34904
- },
34905
- children: [
34906
- /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
34907
- WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34908
- WalletIconWithNetwork,
34909
- {
34910
- WalletIcon: WALLET_ICONS3[wallet.id],
34911
- networks: wallet.networks,
34912
- size: 40,
34913
- className: "uf-rounded-lg"
34914
- }
34915
- ) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
34916
- /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
34917
- /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34918
- "div",
34919
- {
34920
- className: "uf-text-sm uf-font-medium",
34921
- style: { color: components.card.titleColor, fontFamily: fonts.medium },
34922
- children: wallet.name
34923
- }
34924
- ),
34925
- wallet.id === recentWalletId && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34926
- "span",
34927
- {
34928
- className: "uf-text-xs uf-px-2 uf-py-0.5 uf-rounded-full",
34929
- style: {
34930
- backgroundColor: colors2.primary + "20",
34931
- color: colors2.primary,
34932
- fontFamily: fonts.medium
34933
- },
34934
- children: "Last used"
34935
- }
34936
- )
34937
- ] })
34938
- ] }),
34939
- isPending ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34940
- LoaderCircle,
34941
- {
34942
- className: "uf-w-4 uf-h-4 uf-animate-spin",
34943
- style: { color: colors2.primary }
34944
- }
34945
- ) : wallet.isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34946
- "span",
34887
+ style: viewTransitionStyle,
34888
+ className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col sm:uf-block",
34889
+ children: [
34890
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34891
+ DepositHeader,
34892
+ {
34893
+ title: "Connect Wallet",
34894
+ showBack: canGoBack,
34895
+ onBack: handleBack,
34896
+ onClose
34897
+ }
34898
+ ),
34899
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "uf-pb-4 uf-flex uf-min-h-0 uf-flex-1 uf-flex-col sm:uf-block", children: [
34900
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34901
+ "p",
34902
+ {
34903
+ className: "uf-text-sm uf-text-center uf-pb-4",
34904
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
34905
+ children: isMobile ? "Open this page in your wallet's app to connect" : "Select a wallet to connect"
34906
+ }
34907
+ ),
34908
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "uf-space-y-2 uf-min-h-0 uf-flex-1 uf-overflow-y-auto sm:uf-flex-none sm:uf-max-h-[330px] [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: availableWallets.filter((wallet) => {
34909
+ if (!isMobile || wallet.isInstalled) return true;
34910
+ const platformAllowed = !wallet.mobileBrowsePlatforms || wallet.mobileBrowsePlatforms.includes(getMobilePlatform() ?? "");
34911
+ return wallet.supportsMobileBrowse !== false && platformAllowed;
34912
+ }).map((wallet) => {
34913
+ const walletPlatformAllowed = !wallet.mobileBrowsePlatforms || wallet.mobileBrowsePlatforms.includes(getMobilePlatform() ?? "");
34914
+ const showOpenInApp = isMobile && !wallet.isInstalled && wallet.supportsMobileBrowse !== false && walletPlatformAllowed;
34915
+ const isPending = pendingMobileWallet?.id === wallet.id;
34916
+ return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
34917
+ "button",
34947
34918
  {
34948
- className: "uf-text-xs uf-px-2 uf-py-1 uf-rounded-full",
34919
+ onClick: () => void handleWalletClick(wallet),
34920
+ disabled: isWalletConnecting || !!pendingMobileWallet,
34921
+ 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",
34949
34922
  style: {
34950
- backgroundColor: colors2.primary + "20",
34951
- color: colors2.primary,
34952
- fontFamily: fonts.medium
34923
+ backgroundColor: components.card.backgroundColor,
34924
+ borderRadius: components.card.borderRadius,
34925
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
34953
34926
  },
34954
- children: "Detected"
34955
- }
34956
- ) : /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
34957
- /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34958
- "span",
34959
- {
34960
- className: "uf-text-xs",
34961
- style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
34962
- children: showOpenInApp ? "Open" : "Install"
34963
- }
34964
- ),
34965
- /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34966
- ExternalLink,
34967
- {
34968
- className: "uf-w-3 uf-h-3",
34969
- style: { color: colors2.foregroundMuted }
34970
- }
34971
- )
34972
- ] })
34973
- ]
34974
- },
34975
- wallet.id
34976
- );
34977
- }) }),
34978
- walletError && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "uf-text-center uf-text-sm uf-mt-4 uf-px-4", style: { color: "#ef4444" }, children: walletError })
34979
- ] })
34980
- ] });
34927
+ children: [
34928
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
34929
+ WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34930
+ WalletIconWithNetwork,
34931
+ {
34932
+ WalletIcon: WALLET_ICONS3[wallet.id],
34933
+ networks: wallet.networks,
34934
+ size: 40,
34935
+ className: "uf-rounded-lg"
34936
+ }
34937
+ ) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
34938
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
34939
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34940
+ "div",
34941
+ {
34942
+ className: "uf-text-sm uf-font-medium",
34943
+ style: { color: components.card.titleColor, fontFamily: fonts.medium },
34944
+ children: wallet.name
34945
+ }
34946
+ ),
34947
+ wallet.id === recentWalletId && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34948
+ "span",
34949
+ {
34950
+ className: "uf-text-xs uf-px-2 uf-py-0.5 uf-rounded-full",
34951
+ style: {
34952
+ backgroundColor: colors2.primary + "20",
34953
+ color: colors2.primary,
34954
+ fontFamily: fonts.medium
34955
+ },
34956
+ children: "Last used"
34957
+ }
34958
+ )
34959
+ ] })
34960
+ ] }),
34961
+ isPending ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34962
+ LoaderCircle,
34963
+ {
34964
+ className: "uf-w-4 uf-h-4 uf-animate-spin",
34965
+ style: { color: colors2.primary }
34966
+ }
34967
+ ) : wallet.isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34968
+ "span",
34969
+ {
34970
+ className: "uf-text-xs uf-px-2 uf-py-1 uf-rounded-full",
34971
+ style: {
34972
+ backgroundColor: colors2.primary + "20",
34973
+ color: colors2.primary,
34974
+ fontFamily: fonts.medium
34975
+ },
34976
+ children: "Detected"
34977
+ }
34978
+ ) : /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
34979
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34980
+ "span",
34981
+ {
34982
+ className: "uf-text-xs",
34983
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
34984
+ children: showOpenInApp ? "Open" : "Install"
34985
+ }
34986
+ ),
34987
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
34988
+ ExternalLink,
34989
+ {
34990
+ className: "uf-w-3 uf-h-3",
34991
+ style: { color: colors2.foregroundMuted }
34992
+ }
34993
+ )
34994
+ ] })
34995
+ ]
34996
+ },
34997
+ wallet.id
34998
+ );
34999
+ }) }),
35000
+ walletError && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "uf-text-center uf-text-sm uf-mt-4 uf-px-4", style: { color: "#ef4444" }, children: walletError })
35001
+ ] })
35002
+ ]
35003
+ }
35004
+ )
35005
+ );
34981
35006
  }
34982
35007
  const preConnectAccent = selectedWalletDef ? getWalletBrandColor(selectedWalletDef.id, mode) : void 0;
34983
35008
  const preConnectFg = preConnectAccent ? getContrastingTextColor(preConnectAccent) : void 0;
@@ -35366,7 +35391,9 @@ function DepositModal({
35366
35391
  applePayTitle = "Pay with Apple Pay",
35367
35392
  applePaySubTitle = "Instant",
35368
35393
  enableBankTransfer,
35369
- enableStripeLink = false,
35394
+ // No default: left undefined so the backend `stripe_link.enabled` can govern
35395
+ // (via the `??` chain in showStripeLink) once a dashboard toggle exists.
35396
+ enableStripeLink,
35370
35397
  userEmail,
35371
35398
  hideDepositFlowInfo = false,
35372
35399
  hideDisplayDescription = false,
@@ -35447,14 +35474,18 @@ function DepositModal({
35447
35474
  const [allExecutions, setAllExecutions] = (0, import_react8.useState)([]);
35448
35475
  const [selectedExecution, setSelectedExecution] = (0, import_react8.useState)(null);
35449
35476
  const [depositExecutions, setDepositExecutions] = (0, import_react8.useState)([]);
35477
+ const { userIpInfo, isLoading: isLoadingIp } = useUserIp2();
35450
35478
  const { projectConfig } = useProjectConfig({
35451
35479
  publishableKey,
35452
- enabled: open
35480
+ enabled: open && !isLoadingIp,
35481
+ countryCode: userIpInfo?.alpha2,
35482
+ subdivisionCode: userIpInfo?.subdivisionCode ?? void 0
35453
35483
  });
35454
35484
  const showTransferCrypto = enableTransferCrypto ?? projectConfig?.transfer_crypto?.enabled ?? true;
35455
35485
  const showConnectWallet = enableConnectWallet ?? projectConfig?.connect_wallet?.enabled ?? true;
35456
35486
  const showPayWithExchange = enablePayWithExchange ?? projectConfig?.pay_with_exchange?.enabled ?? true;
35457
35487
  const showFiatOnramp = !projectConfig?.fiat_onramp?.is_hidden && (enableFiatOnramp ?? projectConfig?.fiat_onramp?.enabled ?? true);
35488
+ const showStripeLink = !projectConfig?.stripe_link?.is_hidden && (enableStripeLink ?? projectConfig?.stripe_link?.enabled ?? false);
35458
35489
  const showConnectExchange = enableConnectExchange ?? projectConfig?.connect_exchange?.enabled ?? true;
35459
35490
  const showCashApp = enableCashApp ?? projectConfig?.cash_app?.enabled ?? true;
35460
35491
  const showApplePay = enableApplePay ?? projectConfig?.apple_pay?.enabled ?? true;
@@ -35600,7 +35631,6 @@ function DepositModal({
35600
35631
  publishableKey,
35601
35632
  enabled: open && showPayWithExchange
35602
35633
  });
35603
- const { userIpInfo, isLoading: isLoadingIp } = useUserIp2();
35604
35634
  const { providers: bankTransferProviders, isLoading: bankTransferProvidersLoading } = useBankTransferProviders({
35605
35635
  publishableKey,
35606
35636
  enabled: open && !!userIpInfo?.alpha2,
@@ -35778,6 +35808,12 @@ function DepositModal({
35778
35808
  const [cashAppView, setCashAppView] = (0, import_react8.useState)("amount");
35779
35809
  const [stripeLinkStep, setStripeLinkStep] = (0, import_react8.useState)("amount");
35780
35810
  const stripeLinkBackRef = (0, import_react8.useRef)(null);
35811
+ (0, import_react8.useEffect)(() => {
35812
+ if (view === "stripe_link" && !showStripeLink && effectiveInitialScreen === "main") {
35813
+ setView("main");
35814
+ setStripeLinkStep("amount");
35815
+ }
35816
+ }, [view, showStripeLink, effectiveInitialScreen]);
35781
35817
  const [cashAppAmount, setCashAppAmount] = (0, import_react8.useState)("");
35782
35818
  const [applePayView, setApplePayView] = (0, import_react8.useState)("email_input");
35783
35819
  const applePayHandleRef = (0, import_react8.useRef)(null);
@@ -36002,7 +36038,7 @@ function DepositModal({
36002
36038
  },
36003
36039
  "cashapp"
36004
36040
  ) : null;
36005
- const stripeLinkMenuButton = enableStripeLink ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36041
+ const stripeLinkMenuButton = showStripeLink ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36006
36042
  StripeLinkButton,
36007
36043
  {
36008
36044
  onClick: () => setView("stripe_link"),
@@ -36050,11 +36086,13 @@ function DepositModal({
36050
36086
  connectExchangeMenuButton
36051
36087
  ].filter(Boolean);
36052
36088
  const cashMenuButtons = [
36089
+ // Stripe "Pay with Link" is intentionally listed first so it always sits
36090
+ // above "Deposit with Card".
36091
+ stripeLinkMenuButton,
36053
36092
  depositWithCardMenuButton,
36054
36093
  applePayMenuButton,
36055
36094
  cashAppMenuButton,
36056
- bankTransferMenuButton,
36057
- stripeLinkMenuButton
36095
+ bankTransferMenuButton
36058
36096
  ].filter(Boolean);
36059
36097
  const depositTabs = [
36060
36098
  { id: "crypto", label: "Use Crypto", icon: Bitcoin, buttons: cryptoMenuButtons },
@@ -36149,13 +36187,13 @@ function DepositModal({
36149
36187
  const stackedOptions = [
36150
36188
  transferCryptoMenuButton,
36151
36189
  connectWalletMenuButton,
36190
+ stripeLinkMenuButton,
36152
36191
  depositWithCardMenuButton,
36153
36192
  applePayMenuButton,
36154
36193
  payWithExchangeMenuButton,
36155
36194
  connectExchangeMenuButton,
36156
36195
  cashAppMenuButton,
36157
36196
  bankTransferMenuButton,
36158
- stripeLinkMenuButton,
36159
36197
  depositTrackerMenuButton
36160
36198
  ].filter(Boolean);
36161
36199
  return renderScrollableOptions(stackedOptions);
@@ -36171,410 +36209,452 @@ function DepositModal({
36171
36209
  {
36172
36210
  ref: hideOverlay ? containerCallbackRef : void 0,
36173
36211
  hideOverlay,
36174
- className: `sm:uf-max-w-[400px] uf-border-secondary uf-text-foreground uf-gap-0 [&>button]:uf-hidden ${hideOverlay ? `uf-p-6 uf-overflow-hidden ${themeClass}` : `uf-p-0 uf-overflow-visible ${view === "main" ? "!uf-top-auto !uf-h-auto !uf-max-h-[85vh] sm:!uf-max-h-none sm:!uf-top-[50%]" : "!uf-top-0 !uf-h-full sm:!uf-h-auto sm:!uf-top-[50%]"} ${themeClass}`}`,
36212
+ className: `sm:uf-max-w-[400px] uf-border-secondary uf-text-foreground uf-gap-0 [&>button]:uf-hidden ${hideOverlay ? `uf-p-6 uf-overflow-hidden ${themeClass}` : `uf-p-0 uf-overflow-visible ${view === "main" ? "!uf-top-auto !uf-h-auto !uf-max-h-[85vh] sm:!uf-max-h-none sm:!uf-top-[50%]" : "!uf-top-0 !uf-h-full sm:!uf-h-auto sm:!uf-top-[50%]"} ${// wallet_connect fills the full-height mobile sheet. DialogContent
36213
+ // is a grid, and its single auto row only *grows* to fill free
36214
+ // space (align-content: stretch) — it never shrinks below content,
36215
+ // so a long wallet list would balloon the row past the viewport and
36216
+ // push the footer off-screen instead of scrolling. Clamp the row to
36217
+ // the modal height with minmax(0,1fr) so the inner overflow-y-auto
36218
+ // list scrolls with the footer pinned. Reset to content-sized on
36219
+ // desktop (sm:) where the modal is auto-height and centered.
36220
+ view === "wallet_connect" ? "[grid-template-rows:minmax(0,1fr)] sm:[grid-template-rows:none]" : ""} ${themeClass}`}`,
36175
36221
  style: { backgroundColor: colors2.background },
36176
36222
  onPointerDownOutside: (e) => e.preventDefault(),
36177
36223
  onInteractOutside: (e) => e.preventDefault(),
36178
36224
  children: [
36179
36225
  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(DialogTitle2, { className: "uf-sr-only", children: modalTitle || "Deposit" }),
36180
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-min-h-0 uf-max-h-full", children: [
36181
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36182
- DepositHeader,
36183
- {
36184
- title: modalTitle || "Deposit",
36185
- showClose: !hideOverlay,
36186
- onClose: handleClose,
36187
- showBalance: showBalanceHeader,
36188
- balanceAddress: recipientAddress,
36189
- balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
36190
- balanceChainId: destinationChainId,
36191
- balanceTokenAddress: destinationTokenAddress,
36192
- projectName: projectConfig?.project_name,
36193
- publishableKey
36194
- }
36195
- ) }),
36196
- renderMainMenuBody(),
36197
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-flex-shrink-0", children: depositPoweredByFooter })
36198
- ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36199
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36200
- DepositHeader,
36201
- {
36202
- title: transferCryptoTitle,
36203
- showBack: showBackTransfer,
36204
- onBack: handleBack,
36205
- onClose: handleClose,
36206
- showBalance: showBalanceHeader,
36207
- balanceAddress: recipientAddress,
36208
- balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
36209
- balanceChainId: destinationChainId,
36210
- balanceTokenAddress: destinationTokenAddress,
36211
- projectName: projectConfig?.project_name,
36212
- publishableKey
36213
- }
36214
- ),
36215
- /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36216
- standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : transferInputVariant === "single_input" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36217
- TransferCryptoSingleInput,
36218
- {
36219
- userId,
36220
- publishableKey,
36221
- recipientAddress,
36222
- destinationChainType,
36223
- destinationChainId,
36224
- destinationTokenAddress,
36225
- defaultSourceChainType,
36226
- defaultSourceChainId,
36227
- defaultSourceTokenAddress,
36228
- defaultSourceSymbol,
36229
- depositConfirmationMode,
36230
- onExecutionsChange: setDepositExecutions,
36231
- onDepositSuccess: onDepositSuccessFor("transfer"),
36232
- onDepositError: onDepositErrorFor("transfer"),
36233
- wallets
36234
- }
36235
- ) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36236
- TransferCryptoDoubleInput,
36237
- {
36238
- userId,
36239
- publishableKey,
36240
- recipientAddress,
36241
- destinationChainType,
36242
- destinationChainId,
36243
- destinationTokenAddress,
36244
- defaultSourceChainType,
36245
- defaultSourceChainId,
36246
- defaultSourceTokenAddress,
36247
- defaultSourceSymbol,
36248
- depositConfirmationMode,
36249
- onExecutionsChange: setDepositExecutions,
36250
- onDepositSuccess: onDepositSuccessFor("transfer"),
36251
- onDepositError: onDepositErrorFor("transfer"),
36252
- wallets
36253
- }
36254
- ),
36255
- depositPoweredByFooter
36256
- ] })
36257
- ] }) : view === "tracker" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36258
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36259
- DepositHeader,
36260
- {
36261
- title: selectedExecution ? "Deposit Details" : depositTrackerTitle,
36262
- showBack: showBackTracker,
36263
- onBack: handleBack,
36264
- onClose: handleClose
36265
- }
36266
- ),
36267
- /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36268
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(DepositDetailContent, { execution: selectedExecution }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-space-y-2 uf-pb-8", children: allExecutions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36269
- "div",
36270
- {
36271
- className: "uf-text-sm",
36272
- style: {
36273
- color: components.container.subtitleColor,
36274
- fontFamily: fonts.regular
36275
- },
36276
- children: "No deposits yet"
36277
- }
36278
- ) }) : allExecutions.map((execution) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36279
- DepositExecutionItem,
36280
- {
36281
- execution,
36282
- onClick: () => setSelectedExecution(execution)
36283
- },
36284
- execution.id
36285
- )) }) }),
36286
- depositPoweredByFooter
36287
- ] })
36288
- ] }) : view === "card" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36289
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36290
- DepositHeader,
36291
- {
36292
- title: cardView === "quotes" ? t8.quotes : depositWithCardTitle,
36293
- showBack: showBackCard,
36294
- onBack: handleBack,
36295
- onClose: handleClose,
36296
- badge: cardView === "quotes" ? { count: quotesCount } : void 0,
36297
- showBalance: showBalanceHeader,
36298
- balanceAddress: recipientAddress,
36299
- balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
36300
- balanceChainId: destinationChainId,
36301
- balanceTokenAddress: destinationTokenAddress,
36302
- projectName: projectConfig?.project_name,
36303
- publishableKey
36304
- }
36305
- ),
36306
- /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36307
- standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : !showFiatOnramp ? (
36308
- // Fiat on-ramp resolved hidden/disabled after a direct open
36309
- // (e.g. platform `is_hidden` for a Stripe Link-only project).
36310
- // Show a geo-restriction screen rather than the card UI so the
36311
- // hard-hide is honoured without a flash of "Pay with Card".
36312
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(GeoRestrictionScreen, { methodName: "Card" })
36313
- ) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36314
- BuyWithCard,
36315
- {
36316
- userId,
36317
- publishableKey,
36318
- view: cardView,
36319
- onViewChange: handleCardViewChange,
36320
- destinationTokenSymbol,
36321
- recipientAddress,
36322
- destinationChainType,
36323
- destinationChainId,
36324
- destinationTokenAddress,
36325
- onDepositSuccess: onDepositSuccessFor("card"),
36326
- onDepositError: onDepositErrorFor("card"),
36327
- onEvent,
36328
- themeClass,
36329
- wallets,
36330
- assetCdnUrl: projectConfig?.asset_cdn_url,
36331
- hideDepositFlowInfo,
36332
- hideDisplayDescription
36333
- }
36334
- ),
36335
- depositPoweredByFooter
36336
- ] })
36337
- ] }) : view === "exchange" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36338
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36339
- DepositHeader,
36340
- {
36341
- title: payWithExchangeTitle,
36342
- showBack: exchangeView === "pending" || sessionOpenedFromMenu,
36343
- onBack: handleBack,
36344
- onClose: handleClose
36345
- }
36346
- ),
36347
- /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36348
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36349
- PayWithExchange,
36350
- {
36351
- userId,
36352
- publishableKey,
36353
- exchanges,
36354
- view: exchangeView,
36355
- onViewChange: setExchangeView,
36356
- destinationTokenSymbol,
36357
- recipientAddress,
36358
- destinationChainType,
36359
- destinationChainId,
36360
- destinationTokenAddress,
36361
- onDepositSuccess: onDepositSuccessFor("pay_with_exchange"),
36362
- onDepositError: onDepositErrorFor("pay_with_exchange"),
36363
- wallets,
36364
- defaultToken: defaultToken ?? null
36365
- }
36366
- ),
36367
- depositPoweredByFooter
36368
- ] })
36369
- ] }) : view === "coinbase_connect" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36370
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36371
- CoinbaseConnect,
36372
- {
36373
- publishableKey,
36374
- userId,
36375
- wallets,
36376
- recipientAddress,
36377
- destinationTokenAddress: destinationTokenAddress ?? "",
36378
- destinationChainId: destinationChainId ?? "",
36379
- destinationChainType: destinationChainType ?? "",
36380
- onDepositSuccess: onDepositSuccessFor("exchange_connect"),
36381
- onDepositError: onDepositErrorFor("exchange_connect"),
36382
- onTransferError: (error) => {
36383
- onDepositErrorFor("exchange_connect")?.({
36384
- message: error.message,
36385
- error
36386
- });
36387
- },
36388
- onBack: handleBack,
36389
- onClose: handleClose,
36390
- onDisconnect: handleExchangeDisconnect,
36391
- skipToHoldings: coinbaseSkipToHoldings,
36392
- canGoBack: sessionOpenedFromMenu,
36393
- onExecutionsChange: setDepositExecutions,
36394
- defaultSourceChainType,
36395
- defaultSourceChainId,
36396
- defaultSourceTokenAddress,
36397
- defaultSourceSymbol
36398
- }
36399
- ),
36400
- depositPoweredByFooter
36401
- ] }) : view === "wallet_connect" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36402
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36403
- WalletConnect,
36404
- {
36405
- walletInfo: browserWalletInfo ?? void 0,
36406
- depositWallet: browserWalletInfo?.depositWallet ?? void 0,
36407
- wallets,
36408
- userId,
36409
- publishableKey,
36410
- assetCdnUrl: projectConfig?.asset_cdn_url,
36411
- projectName: projectConfig?.project_name,
36412
- onError: (error) => {
36413
- onDepositErrorFor("wallet_connect")?.({
36414
- message: error.message,
36415
- error
36416
- });
36417
- },
36418
- onDepositSuccess: onDepositSuccessFor("wallet_connect"),
36419
- onDepositError: onDepositErrorFor("wallet_connect"),
36420
- amountQuickSelect: browserWalletAmountQuickSelect,
36421
- onWalletDisconnect: handleWalletDisconnect,
36422
- onWalletConnected: (info, dw) => {
36423
- setBrowserWalletInfo({ ...info, depositWallet: dw });
36424
- setStoredWalletState(info.type);
36425
- setBrowserWalletChainType(dw.chain_type === "solana" ? "solana" : "ethereum");
36426
- },
36427
- onBack: handleBack,
36428
- onClose: handleClose,
36429
- defaultSourceChainType,
36430
- defaultSourceChainId,
36431
- defaultSourceTokenAddress,
36432
- defaultSourceSymbol,
36433
- canGoBack: sessionOpenedFromMenu,
36434
- depositWalletsLoading: walletsLoading
36435
- }
36436
- ),
36437
- depositPoweredByFooter
36438
- ] }) : view === "bank_transfer" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36439
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36440
- DepositHeader,
36441
- {
36442
- title: t8.bankTransfer.title,
36443
- showBack: bankTransferView !== "providers" || sessionOpenedFromMenu,
36444
- onBack: handleBack,
36445
- onClose: handleClose
36446
- }
36447
- ),
36448
- /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36449
- bankTransferProvidersLoading ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(SkeletonButton, { variant: "with-icons" }) : !hasEnabledBankTransferProvider ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(GeoRestrictionScreen, { methodName: "Bank Transfer" }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36450
- BankTransfer,
36451
- {
36452
- userId,
36453
- publishableKey,
36454
- view: bankTransferView,
36455
- onViewChange: setBankTransferView,
36456
- recipientAddress,
36457
- destinationChainType,
36458
- destinationChainId,
36459
- destinationTokenAddress,
36460
- destinationTokenSymbol,
36461
- wallets,
36462
- defaultToken: defaultToken ?? null,
36463
- assetCdnUrl: projectConfig?.asset_cdn_url,
36464
- onEvent,
36465
- onDepositSuccess,
36466
- onDepositError
36467
- }
36468
- ),
36469
- depositPoweredByFooter
36470
- ] })
36471
- ] }) : view === "stripe_link" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36472
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36473
- DepositHeader,
36474
- {
36475
- title: "Deposit with Link",
36476
- showBack: stripeLinkStep !== "checkout" && stripeLinkStep !== "success",
36477
- onBack: handleBack,
36478
- showClose: stripeLinkStep !== "checkout",
36479
- onClose: handleClose
36480
- }
36481
- ),
36482
- /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36483
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36484
- PayWithStripeLink,
36485
- {
36486
- userId,
36487
- publishableKey,
36488
- recipientAddress,
36489
- destinationChainType,
36490
- destinationChainId,
36491
- destinationTokenAddress,
36492
- wallets,
36493
- email: userEmail,
36494
- iconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/link.svg` : void 0,
36495
- step: stripeLinkStep,
36496
- onStepChange: setStripeLinkStep,
36497
- backHandlerRef: stripeLinkBackRef,
36498
- onDepositSuccess,
36499
- onDepositError
36500
- }
36501
- ),
36502
- depositPoweredByFooter
36503
- ] })
36504
- ] }) : view === "cashapp" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36505
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36506
- DepositHeader,
36507
- {
36508
- title: cashAppView !== "amount" && cashAppAmount ? `Pay $${cashAppAmount} via Cash App` : "Pay with Cash App",
36509
- showBack: cashAppView !== "amount" || sessionOpenedFromMenu,
36510
- onBack: handleBack,
36511
- onClose: handleClose
36512
- }
36513
- ),
36514
- /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36515
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36516
- PayWithCashApp,
36517
- {
36518
- userId,
36519
- publishableKey,
36520
- recipientAddress,
36521
- destinationChainType,
36522
- destinationChainId,
36523
- destinationTokenAddress,
36524
- cashAppIconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/cashapp.svg` : void 0,
36525
- view: cashAppView,
36526
- onViewChange: setCashAppView,
36527
- onAmountChange: setCashAppAmount,
36528
- onEvent,
36529
- onDepositSuccess: onDepositSuccessFor("cashapp"),
36530
- onDepositError: onDepositErrorFor("cashapp"),
36531
- wallets
36532
- }
36533
- ),
36534
- depositPoweredByFooter
36535
- ] })
36536
- ] }) : view === "apple_pay" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36537
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36538
- DepositHeader,
36539
- {
36540
- title: applePayHeaderTitle,
36541
- showBack: applePayShowBack,
36542
- onBack: () => {
36543
- const handled = applePayHandleRef.current?.requestBack() ?? false;
36544
- if (!handled) handleBack();
36545
- },
36546
- onClose: handleClose
36547
- }
36548
- ),
36549
- /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36550
- applePayProvidersLoading ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(SkeletonButton, { variant: "with-icons" }) : !hasEnabledApplePayProvider ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(GeoRestrictionScreen, { methodName: "Apple Pay" }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36551
- BuyWithApplePay,
36552
- {
36553
- ref: applePayHandleRef,
36554
- userId,
36555
- publishableKey,
36556
- destinationChainType,
36557
- destinationChainId,
36558
- destinationTokenAddress,
36559
- userEmail,
36560
- wallets,
36561
- onViewChange: setApplePayView,
36562
- onEvent,
36563
- onDepositSuccess: onDepositSuccessFor("apple_pay"),
36564
- onDepositError: onDepositErrorFor("apple_pay"),
36565
- exitLabel: sessionOpenedFromMenu ? "Return" : "Close",
36566
- onExit: () => {
36567
- if (sessionOpenedFromMenu) {
36568
- setView("main");
36569
- } else {
36570
- handleClose();
36226
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36227
+ ThemeStyleInjector,
36228
+ {
36229
+ className: view === "wallet_connect" ? "uf-flex uf-min-h-0 uf-flex-col" : void 0,
36230
+ children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-min-h-0 uf-max-h-full", children: [
36231
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36232
+ DepositHeader,
36233
+ {
36234
+ title: modalTitle || "Deposit",
36235
+ showClose: !hideOverlay,
36236
+ onClose: handleClose,
36237
+ showBalance: showBalanceHeader,
36238
+ balanceAddress: recipientAddress,
36239
+ balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
36240
+ balanceChainId: destinationChainId,
36241
+ balanceTokenAddress: destinationTokenAddress,
36242
+ projectName: projectConfig?.project_name,
36243
+ publishableKey
36244
+ }
36245
+ ) }),
36246
+ renderMainMenuBody(),
36247
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-flex-shrink-0", children: depositPoweredByFooter })
36248
+ ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36249
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36250
+ DepositHeader,
36251
+ {
36252
+ title: transferCryptoTitle,
36253
+ showBack: showBackTransfer,
36254
+ onBack: handleBack,
36255
+ onClose: handleClose,
36256
+ showBalance: showBalanceHeader,
36257
+ balanceAddress: recipientAddress,
36258
+ balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
36259
+ balanceChainId: destinationChainId,
36260
+ balanceTokenAddress: destinationTokenAddress,
36261
+ projectName: projectConfig?.project_name,
36262
+ publishableKey
36263
+ }
36264
+ ),
36265
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36266
+ standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : transferInputVariant === "single_input" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36267
+ TransferCryptoSingleInput,
36268
+ {
36269
+ userId,
36270
+ publishableKey,
36271
+ recipientAddress,
36272
+ destinationChainType,
36273
+ destinationChainId,
36274
+ destinationTokenAddress,
36275
+ defaultSourceChainType,
36276
+ defaultSourceChainId,
36277
+ defaultSourceTokenAddress,
36278
+ defaultSourceSymbol,
36279
+ depositConfirmationMode,
36280
+ onExecutionsChange: setDepositExecutions,
36281
+ onDepositSuccess: onDepositSuccessFor("transfer"),
36282
+ onDepositError: onDepositErrorFor("transfer"),
36283
+ wallets
36284
+ }
36285
+ ) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36286
+ TransferCryptoDoubleInput,
36287
+ {
36288
+ userId,
36289
+ publishableKey,
36290
+ recipientAddress,
36291
+ destinationChainType,
36292
+ destinationChainId,
36293
+ destinationTokenAddress,
36294
+ defaultSourceChainType,
36295
+ defaultSourceChainId,
36296
+ defaultSourceTokenAddress,
36297
+ defaultSourceSymbol,
36298
+ depositConfirmationMode,
36299
+ onExecutionsChange: setDepositExecutions,
36300
+ onDepositSuccess: onDepositSuccessFor("transfer"),
36301
+ onDepositError: onDepositErrorFor("transfer"),
36302
+ wallets
36571
36303
  }
36304
+ ),
36305
+ depositPoweredByFooter
36306
+ ] })
36307
+ ] }) : view === "tracker" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36308
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36309
+ DepositHeader,
36310
+ {
36311
+ title: selectedExecution ? "Deposit Details" : depositTrackerTitle,
36312
+ showBack: showBackTracker,
36313
+ onBack: handleBack,
36314
+ onClose: handleClose
36572
36315
  }
36573
- }
36574
- ),
36575
- depositPoweredByFooter
36576
- ] })
36577
- ] }) : null })
36316
+ ),
36317
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36318
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(DepositDetailContent, { execution: selectedExecution }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-space-y-2 uf-pb-8", children: allExecutions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36319
+ "div",
36320
+ {
36321
+ className: "uf-text-sm",
36322
+ style: {
36323
+ color: components.container.subtitleColor,
36324
+ fontFamily: fonts.regular
36325
+ },
36326
+ children: "No deposits yet"
36327
+ }
36328
+ ) }) : allExecutions.map((execution) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36329
+ DepositExecutionItem,
36330
+ {
36331
+ execution,
36332
+ onClick: () => setSelectedExecution(execution)
36333
+ },
36334
+ execution.id
36335
+ )) }) }),
36336
+ depositPoweredByFooter
36337
+ ] })
36338
+ ] }) : view === "card" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36339
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36340
+ DepositHeader,
36341
+ {
36342
+ title: cardView === "quotes" ? t8.quotes : depositWithCardTitle,
36343
+ showBack: showBackCard,
36344
+ onBack: handleBack,
36345
+ onClose: handleClose,
36346
+ badge: cardView === "quotes" ? { count: quotesCount } : void 0,
36347
+ showBalance: showBalanceHeader,
36348
+ balanceAddress: recipientAddress,
36349
+ balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
36350
+ balanceChainId: destinationChainId,
36351
+ balanceTokenAddress: destinationTokenAddress,
36352
+ projectName: projectConfig?.project_name,
36353
+ publishableKey
36354
+ }
36355
+ ),
36356
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36357
+ standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : !showFiatOnramp ? (
36358
+ // Fiat on-ramp resolved hidden/disabled after a direct open
36359
+ // (e.g. platform `is_hidden` for a Stripe Link-only project).
36360
+ // Show a geo-restriction screen rather than the card UI so the
36361
+ // hard-hide is honoured without a flash of "Pay with Card".
36362
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(GeoRestrictionScreen, { methodName: "Card" })
36363
+ ) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36364
+ BuyWithCard,
36365
+ {
36366
+ userId,
36367
+ publishableKey,
36368
+ view: cardView,
36369
+ onViewChange: handleCardViewChange,
36370
+ destinationTokenSymbol,
36371
+ recipientAddress,
36372
+ destinationChainType,
36373
+ destinationChainId,
36374
+ destinationTokenAddress,
36375
+ onDepositSuccess: onDepositSuccessFor("card"),
36376
+ onDepositError: onDepositErrorFor("card"),
36377
+ onEvent,
36378
+ themeClass,
36379
+ wallets,
36380
+ assetCdnUrl: projectConfig?.asset_cdn_url,
36381
+ hideDepositFlowInfo,
36382
+ hideDisplayDescription
36383
+ }
36384
+ ),
36385
+ depositPoweredByFooter
36386
+ ] })
36387
+ ] }) : view === "exchange" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36388
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36389
+ DepositHeader,
36390
+ {
36391
+ title: payWithExchangeTitle,
36392
+ showBack: exchangeView === "pending" || sessionOpenedFromMenu,
36393
+ onBack: handleBack,
36394
+ onClose: handleClose
36395
+ }
36396
+ ),
36397
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36398
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36399
+ PayWithExchange,
36400
+ {
36401
+ userId,
36402
+ publishableKey,
36403
+ exchanges,
36404
+ view: exchangeView,
36405
+ onViewChange: setExchangeView,
36406
+ destinationTokenSymbol,
36407
+ recipientAddress,
36408
+ destinationChainType,
36409
+ destinationChainId,
36410
+ destinationTokenAddress,
36411
+ onDepositSuccess: onDepositSuccessFor("pay_with_exchange"),
36412
+ onDepositError: onDepositErrorFor("pay_with_exchange"),
36413
+ wallets,
36414
+ defaultToken: defaultToken ?? null
36415
+ }
36416
+ ),
36417
+ depositPoweredByFooter
36418
+ ] })
36419
+ ] }) : view === "coinbase_connect" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36420
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36421
+ CoinbaseConnect,
36422
+ {
36423
+ publishableKey,
36424
+ userId,
36425
+ wallets,
36426
+ recipientAddress,
36427
+ destinationTokenAddress: destinationTokenAddress ?? "",
36428
+ destinationChainId: destinationChainId ?? "",
36429
+ destinationChainType: destinationChainType ?? "",
36430
+ onDepositSuccess: onDepositSuccessFor("exchange_connect"),
36431
+ onDepositError: onDepositErrorFor("exchange_connect"),
36432
+ onTransferError: (error) => {
36433
+ onDepositErrorFor("exchange_connect")?.({
36434
+ message: error.message,
36435
+ error
36436
+ });
36437
+ },
36438
+ onBack: handleBack,
36439
+ onClose: handleClose,
36440
+ onDisconnect: handleExchangeDisconnect,
36441
+ skipToHoldings: coinbaseSkipToHoldings,
36442
+ canGoBack: sessionOpenedFromMenu,
36443
+ onExecutionsChange: setDepositExecutions,
36444
+ defaultSourceChainType,
36445
+ defaultSourceChainId,
36446
+ defaultSourceTokenAddress,
36447
+ defaultSourceSymbol
36448
+ }
36449
+ ),
36450
+ depositPoweredByFooter
36451
+ ] }) : view === "wallet_connect" ? (
36452
+ // Mobile: flex-fill the full-height dialog body so the wallet list
36453
+ // can grow and scroll, with the footer pinned to the bottom.
36454
+ // Desktop (sm:): stays content-sized.
36455
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
36456
+ "div",
36457
+ {
36458
+ className: "uf-flex uf-flex-col uf-gap-1.5 uf-min-h-0 uf-flex-1 sm:uf-flex-none",
36459
+ children: [
36460
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36461
+ WalletConnect,
36462
+ {
36463
+ walletInfo: browserWalletInfo ?? void 0,
36464
+ depositWallet: browserWalletInfo?.depositWallet ?? void 0,
36465
+ wallets,
36466
+ userId,
36467
+ publishableKey,
36468
+ assetCdnUrl: projectConfig?.asset_cdn_url,
36469
+ projectName: projectConfig?.project_name,
36470
+ onError: (error) => {
36471
+ onDepositErrorFor("wallet_connect")?.({
36472
+ message: error.message,
36473
+ error
36474
+ });
36475
+ },
36476
+ onDepositSuccess: onDepositSuccessFor("wallet_connect"),
36477
+ onDepositError: onDepositErrorFor("wallet_connect"),
36478
+ amountQuickSelect: browserWalletAmountQuickSelect,
36479
+ onWalletDisconnect: handleWalletDisconnect,
36480
+ onWalletConnected: (info, dw) => {
36481
+ setBrowserWalletInfo({ ...info, depositWallet: dw });
36482
+ setStoredWalletState(info.type);
36483
+ setBrowserWalletChainType(dw.chain_type === "solana" ? "solana" : "ethereum");
36484
+ },
36485
+ onBack: handleBack,
36486
+ onClose: handleClose,
36487
+ defaultSourceChainType,
36488
+ defaultSourceChainId,
36489
+ defaultSourceTokenAddress,
36490
+ defaultSourceSymbol,
36491
+ canGoBack: sessionOpenedFromMenu,
36492
+ depositWalletsLoading: walletsLoading
36493
+ }
36494
+ ),
36495
+ depositPoweredByFooter
36496
+ ]
36497
+ }
36498
+ )
36499
+ ) : view === "bank_transfer" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36500
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36501
+ DepositHeader,
36502
+ {
36503
+ title: t8.bankTransfer.title,
36504
+ showBack: bankTransferView !== "providers" || sessionOpenedFromMenu,
36505
+ onBack: handleBack,
36506
+ onClose: handleClose
36507
+ }
36508
+ ),
36509
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36510
+ bankTransferProvidersLoading ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(SkeletonButton, { variant: "with-icons" }) : !hasEnabledBankTransferProvider ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(GeoRestrictionScreen, { methodName: "Bank Transfer" }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36511
+ BankTransfer,
36512
+ {
36513
+ userId,
36514
+ publishableKey,
36515
+ view: bankTransferView,
36516
+ onViewChange: setBankTransferView,
36517
+ recipientAddress,
36518
+ destinationChainType,
36519
+ destinationChainId,
36520
+ destinationTokenAddress,
36521
+ destinationTokenSymbol,
36522
+ wallets,
36523
+ defaultToken: defaultToken ?? null,
36524
+ assetCdnUrl: projectConfig?.asset_cdn_url,
36525
+ onEvent,
36526
+ onDepositSuccess,
36527
+ onDepositError
36528
+ }
36529
+ ),
36530
+ depositPoweredByFooter
36531
+ ] })
36532
+ ] }) : view === "stripe_link" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36533
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36534
+ DepositHeader,
36535
+ {
36536
+ title: "Deposit with Link",
36537
+ showBack: stripeLinkStep !== "checkout" && stripeLinkStep !== "success",
36538
+ onBack: handleBack,
36539
+ showClose: stripeLinkStep !== "checkout",
36540
+ onClose: handleClose
36541
+ }
36542
+ ),
36543
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36544
+ isLoadingIp ? (
36545
+ // Hold the geo decision until IP resolves so we don't mount
36546
+ // PayWithStripeLink (which kicks off config/OAuth work) for a
36547
+ // deep-link user who turns out to be outside the US.
36548
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(SkeletonButton, { variant: "with-icons" })
36549
+ ) : !showStripeLink ? (
36550
+ // Stripe Link's crypto on-ramp is US-only. On a direct open
36551
+ // (initialScreen="stripe_link") the row isn't in a menu to
36552
+ // fall back to, so show a geo-restriction screen rather than
36553
+ // the Link UI.
36554
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36555
+ GeoRestrictionScreen,
36556
+ {
36557
+ methodName: t8.stripeLink.title,
36558
+ message: "Pay with Link is only available in the US."
36559
+ }
36560
+ )
36561
+ ) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36562
+ PayWithStripeLink,
36563
+ {
36564
+ userId,
36565
+ publishableKey,
36566
+ recipientAddress,
36567
+ destinationChainType,
36568
+ destinationChainId,
36569
+ destinationTokenAddress,
36570
+ wallets,
36571
+ email: userEmail,
36572
+ iconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/link.svg` : void 0,
36573
+ step: stripeLinkStep,
36574
+ onStepChange: setStripeLinkStep,
36575
+ backHandlerRef: stripeLinkBackRef,
36576
+ onDepositSuccess,
36577
+ onDepositError
36578
+ }
36579
+ ),
36580
+ depositPoweredByFooter
36581
+ ] })
36582
+ ] }) : view === "cashapp" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36583
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36584
+ DepositHeader,
36585
+ {
36586
+ title: cashAppView !== "amount" && cashAppAmount ? `Pay $${cashAppAmount} via Cash App` : "Pay with Cash App",
36587
+ showBack: cashAppView !== "amount" || sessionOpenedFromMenu,
36588
+ onBack: handleBack,
36589
+ onClose: handleClose
36590
+ }
36591
+ ),
36592
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36593
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36594
+ PayWithCashApp,
36595
+ {
36596
+ userId,
36597
+ publishableKey,
36598
+ recipientAddress,
36599
+ destinationChainType,
36600
+ destinationChainId,
36601
+ destinationTokenAddress,
36602
+ cashAppIconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/cashapp.svg` : void 0,
36603
+ view: cashAppView,
36604
+ onViewChange: setCashAppView,
36605
+ onAmountChange: setCashAppAmount,
36606
+ onEvent,
36607
+ onDepositSuccess: onDepositSuccessFor("cashapp"),
36608
+ onDepositError: onDepositErrorFor("cashapp"),
36609
+ wallets
36610
+ }
36611
+ ),
36612
+ depositPoweredByFooter
36613
+ ] })
36614
+ ] }) : view === "apple_pay" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36615
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36616
+ DepositHeader,
36617
+ {
36618
+ title: applePayHeaderTitle,
36619
+ showBack: applePayShowBack,
36620
+ onBack: () => {
36621
+ const handled = applePayHandleRef.current?.requestBack() ?? false;
36622
+ if (!handled) handleBack();
36623
+ },
36624
+ onClose: handleClose
36625
+ }
36626
+ ),
36627
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36628
+ applePayProvidersLoading ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(SkeletonButton, { variant: "with-icons" }) : !hasEnabledApplePayProvider ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(GeoRestrictionScreen, { methodName: "Apple Pay" }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36629
+ BuyWithApplePay,
36630
+ {
36631
+ ref: applePayHandleRef,
36632
+ userId,
36633
+ publishableKey,
36634
+ destinationChainType,
36635
+ destinationChainId,
36636
+ destinationTokenAddress,
36637
+ userEmail,
36638
+ wallets,
36639
+ onViewChange: setApplePayView,
36640
+ onEvent,
36641
+ onDepositSuccess: onDepositSuccessFor("apple_pay"),
36642
+ onDepositError: onDepositErrorFor("apple_pay"),
36643
+ exitLabel: sessionOpenedFromMenu ? "Return" : "Close",
36644
+ onExit: () => {
36645
+ if (sessionOpenedFromMenu) {
36646
+ setView("main");
36647
+ } else {
36648
+ handleClose();
36649
+ }
36650
+ }
36651
+ }
36652
+ ),
36653
+ depositPoweredByFooter
36654
+ ] })
36655
+ ] }) : null
36656
+ }
36657
+ )
36578
36658
  ]
36579
36659
  }
36580
36660
  )
@@ -36584,7 +36664,7 @@ function DepositModal({
36584
36664
  var TERMINAL_STATUSES = /* @__PURE__ */ new Set(["succeeded", "expired", "refunded", "canceled"]);
36585
36665
  function usePaymentIntent(params) {
36586
36666
  const { clientSecret, publishableKey, enabled = true, pollingInterval = 3e3 } = params;
36587
- return (0, import_react_query20.useQuery)({
36667
+ return (0, import_react_query19.useQuery)({
36588
36668
  queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
36589
36669
  queryFn: () => retrievePaymentIntent(clientSecret, publishableKey),
36590
36670
  enabled: enabled && !!clientSecret && !!publishableKey,
@@ -37013,258 +37093,280 @@ function CheckoutModal({
37013
37093
  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(PortalContainerProvider, { value: null, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Dialog2, { open, onOpenChange: handleClose, modal: true, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37014
37094
  DialogContent2,
37015
37095
  {
37016
- className: `sm:uf-max-w-[400px] uf-border-secondary uf-text-foreground uf-gap-0 [&>button]:uf-hidden uf-p-0 uf-overflow-visible ${view === "main" ? "!uf-top-auto !uf-h-auto !uf-max-h-[60vh] sm:!uf-max-h-none sm:!uf-top-[50%]" : "!uf-top-0 !uf-h-full sm:!uf-h-auto sm:!uf-top-[50%]"} ${themeClass}`,
37096
+ className: `sm:uf-max-w-[400px] uf-border-secondary uf-text-foreground uf-gap-0 [&>button]:uf-hidden uf-p-0 uf-overflow-visible ${view === "main" ? "!uf-top-auto !uf-h-auto !uf-max-h-[60vh] sm:!uf-max-h-none sm:!uf-top-[50%]" : "!uf-top-0 !uf-h-full sm:!uf-h-auto sm:!uf-top-[50%]"} ${// wallet_connect fills the full-height mobile sheet. DialogContent is a
37097
+ // grid whose single auto row only grows to fill free space and never
37098
+ // shrinks below content, so a long wallet list would balloon the row
37099
+ // past the viewport and push the footer off-screen. Clamp the row to
37100
+ // the modal height with minmax(0,1fr) so the inner overflow-y-auto list
37101
+ // scrolls with the footer pinned. Reset to content-sized on desktop.
37102
+ view === "wallet_connect" ? "[grid-template-rows:minmax(0,1fr)] sm:[grid-template-rows:none]" : ""} ${themeClass}`,
37017
37103
  style: { backgroundColor: colors2.background },
37018
37104
  onPointerDownOutside: (e) => e.preventDefault(),
37019
37105
  onInteractOutside: (e) => e.preventDefault(),
37020
- children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
37021
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DepositHeader, { title: modalTitle || "Checkout", showClose: true, onClose: handleClose }),
37022
- /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
37023
- piLoading ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-space-y-3", children: [
37024
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37025
- "div",
37026
- {
37027
- className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
37028
- style: {
37029
- backgroundColor: components.card.backgroundColor,
37030
- borderRadius: components.card.borderRadius,
37031
- border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
37032
- },
37033
- children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
37034
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37035
- "div",
37106
+ children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37107
+ ThemeStyleInjector,
37108
+ {
37109
+ className: view === "wallet_connect" ? "uf-flex uf-min-h-0 uf-flex-col" : void 0,
37110
+ children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
37111
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DepositHeader, { title: modalTitle || "Checkout", showClose: true, onClose: handleClose }),
37112
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
37113
+ piLoading ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-space-y-3", children: [
37114
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37115
+ "div",
37116
+ {
37117
+ className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
37118
+ style: {
37119
+ backgroundColor: components.card.backgroundColor,
37120
+ borderRadius: components.card.borderRadius,
37121
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
37122
+ },
37123
+ children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
37124
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37125
+ "div",
37126
+ {
37127
+ className: "uf-h-8 uf-w-24 uf-rounded",
37128
+ style: {
37129
+ backgroundColor: components.card.borderColor
37130
+ }
37131
+ }
37132
+ ),
37133
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37134
+ "div",
37135
+ {
37136
+ className: "uf-h-4 uf-w-16 uf-rounded",
37137
+ style: {
37138
+ backgroundColor: components.card.borderColor
37139
+ }
37140
+ }
37141
+ )
37142
+ ] })
37143
+ }
37144
+ ),
37145
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(SkeletonButton2, {}),
37146
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(SkeletonButton2, {})
37147
+ ] }) : piError ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
37148
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
37149
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37150
+ "h3",
37151
+ {
37152
+ className: "uf-text-lg uf-font-semibold uf-mb-2",
37153
+ style: {
37154
+ color: colors2.foreground,
37155
+ fontFamily: fonts.semibold
37156
+ },
37157
+ children: "Unable to Load Checkout"
37158
+ }
37159
+ ),
37160
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37161
+ "p",
37162
+ {
37163
+ className: "uf-text-sm uf-max-w-[280px]",
37164
+ style: {
37165
+ color: colors2.foregroundMuted,
37166
+ fontFamily: fonts.regular
37167
+ },
37168
+ children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
37169
+ }
37170
+ )
37171
+ ] }) : paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-space-y-3", children: [
37172
+ progressSection,
37173
+ (paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
37174
+ showTransferCrypto && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37175
+ TransferCryptoButton,
37036
37176
  {
37037
- className: "uf-h-8 uf-w-24 uf-rounded",
37038
- style: {
37039
- backgroundColor: components.card.borderColor
37040
- }
37177
+ onClick: () => {
37178
+ lastCheckoutMethodRef.current = "transfer";
37179
+ setView("transfer");
37180
+ },
37181
+ title: i18n2.checkoutModal.transferCrypto.title,
37182
+ subtitle: i18n2.checkoutModal.transferCrypto.subtitle,
37183
+ featuredTokens: projectConfig?.transfer_crypto.networks
37041
37184
  }
37042
37185
  ),
37043
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37044
- "div",
37186
+ showConnectWallet && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37187
+ BrowserWalletButton,
37045
37188
  {
37046
- className: "uf-h-4 uf-w-16 uf-rounded",
37047
- style: {
37048
- backgroundColor: components.card.borderColor
37049
- }
37189
+ onClick: handleBrowserWalletClick,
37190
+ onConnectClick: handleWalletConnectClick,
37191
+ onDisconnect: handleWalletDisconnect,
37192
+ chainType: browserWalletChainType,
37193
+ publishableKey,
37194
+ featuredWallets: projectConfig?.connect_wallet?.wallets,
37195
+ subtitle: i18n2.checkoutModal.browserWallet.subtitle
37050
37196
  }
37051
37197
  )
37052
37198
  ] })
37053
- }
37054
- ),
37055
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(SkeletonButton2, {}),
37056
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(SkeletonButton2, {})
37057
- ] }) : piError ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
37058
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
37199
+ ] }) : null,
37200
+ poweredByFooter
37201
+ ] })
37202
+ ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
37059
37203
  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37060
- "h3",
37204
+ DepositHeader,
37061
37205
  {
37062
- className: "uf-text-lg uf-font-semibold uf-mb-2",
37063
- style: {
37064
- color: colors2.foreground,
37065
- fontFamily: fonts.semibold
37066
- },
37067
- children: "Unable to Load Checkout"
37206
+ title: modalTitle || "Checkout",
37207
+ showBack: true,
37208
+ onBack: handleBack,
37209
+ onClose: handleClose
37068
37210
  }
37069
37211
  ),
37070
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37071
- "p",
37072
- {
37073
- className: "uf-text-sm uf-max-w-[280px]",
37074
- style: {
37075
- color: colors2.foregroundMuted,
37076
- fontFamily: fonts.regular
37077
- },
37078
- children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
37079
- }
37080
- )
37081
- ] }) : paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-space-y-3", children: [
37082
- progressSection,
37083
- (paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
37084
- showTransferCrypto && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37085
- TransferCryptoButton,
37086
- {
37087
- onClick: () => {
37088
- lastCheckoutMethodRef.current = "transfer";
37089
- setView("transfer");
37090
- },
37091
- title: i18n2.checkoutModal.transferCrypto.title,
37092
- subtitle: i18n2.checkoutModal.transferCrypto.subtitle,
37093
- featuredTokens: projectConfig?.transfer_crypto.networks
37094
- }
37095
- ),
37096
- showConnectWallet && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37097
- BrowserWalletButton,
37098
- {
37099
- onClick: handleBrowserWalletClick,
37100
- onConnectClick: handleWalletConnectClick,
37101
- onDisconnect: handleWalletDisconnect,
37102
- chainType: browserWalletChainType,
37103
- publishableKey,
37104
- featuredWallets: projectConfig?.connect_wallet?.wallets,
37105
- subtitle: i18n2.checkoutModal.browserWallet.subtitle
37106
- }
37107
- )
37108
- ] })
37109
- ] }) : null,
37110
- poweredByFooter
37111
- ] })
37112
- ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
37113
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37114
- DepositHeader,
37115
- {
37116
- title: modalTitle || "Checkout",
37117
- showBack: true,
37118
- onBack: handleBack,
37119
- onClose: handleClose
37120
- }
37121
- ),
37122
- /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
37123
- paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
37124
- (() => {
37125
- const receivedUsd = parseFloat(
37126
- paymentIntent.destination_amount_received_usd || paymentIntent.amount_received_usd
37127
- );
37128
- const totalUsd = parseFloat(
37129
- paymentIntent.destination_amount_usd || paymentIntent.amount_usd
37130
- );
37131
- const pct = totalUsd > 0 ? Math.min(receivedUsd / totalUsd * 100, 100) : 0;
37132
- return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-space-y-2", children: [
37133
- /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between", children: [
37134
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37135
- "span",
37136
- {
37137
- className: "uf-text-xs",
37138
- style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
37139
- children: "Received"
37140
- }
37141
- ),
37142
- /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
37143
- "span",
37144
- {
37145
- className: "uf-text-xs",
37146
- style: { color: colors2.foreground, fontFamily: fonts.medium },
37147
- children: [
37148
- "$",
37149
- receivedUsd.toFixed(2),
37150
- " / $",
37151
- totalUsd.toFixed(2)
37152
- ]
37153
- }
37154
- )
37155
- ] }),
37156
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37157
- "div",
37158
- {
37159
- className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
37160
- style: { backgroundColor: colors2.border },
37161
- children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37212
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
37213
+ paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
37214
+ (() => {
37215
+ const receivedUsd = parseFloat(
37216
+ paymentIntent.destination_amount_received_usd || paymentIntent.amount_received_usd
37217
+ );
37218
+ const totalUsd = parseFloat(
37219
+ paymentIntent.destination_amount_usd || paymentIntent.amount_usd
37220
+ );
37221
+ const pct = totalUsd > 0 ? Math.min(receivedUsd / totalUsd * 100, 100) : 0;
37222
+ return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-space-y-2", children: [
37223
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between", children: [
37224
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37225
+ "span",
37226
+ {
37227
+ className: "uf-text-xs",
37228
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
37229
+ children: "Received"
37230
+ }
37231
+ ),
37232
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
37233
+ "span",
37234
+ {
37235
+ className: "uf-text-xs",
37236
+ style: { color: colors2.foreground, fontFamily: fonts.medium },
37237
+ children: [
37238
+ "$",
37239
+ receivedUsd.toFixed(2),
37240
+ " / $",
37241
+ totalUsd.toFixed(2)
37242
+ ]
37243
+ }
37244
+ )
37245
+ ] }),
37246
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37162
37247
  "div",
37163
37248
  {
37164
- className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
37165
- style: {
37166
- width: `${pct}%`,
37167
- backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
37168
- }
37249
+ className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
37250
+ style: { backgroundColor: colors2.border },
37251
+ children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37252
+ "div",
37253
+ {
37254
+ className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
37255
+ style: {
37256
+ width: `${pct}%`,
37257
+ backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
37258
+ }
37259
+ }
37260
+ )
37169
37261
  }
37170
37262
  )
37263
+ ] });
37264
+ })(),
37265
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37266
+ TransferCryptoSingleInput,
37267
+ {
37268
+ userId: paymentIntent.user_id || "",
37269
+ publishableKey,
37270
+ clientSecret,
37271
+ recipientAddress: paymentIntent.recipient_address,
37272
+ destinationChainType: paymentIntent.destination_chain_type,
37273
+ destinationChainId: paymentIntent.destination_chain_id,
37274
+ destinationTokenAddress: paymentIntent.destination_token_address,
37275
+ defaultSourceChainType,
37276
+ defaultSourceChainId,
37277
+ defaultSourceTokenAddress,
37278
+ defaultSourceSymbol,
37279
+ depositConfirmationMode: "auto_ui",
37280
+ wallets,
37281
+ onSourceTokenChange: setSelectedSource,
37282
+ persistCheckingIndicator: true,
37283
+ productType: "payment",
37284
+ checkoutQuote: effectiveCheckoutQuote,
37285
+ isCheckoutQuoteLoading: isQuoteLoading || isQuoteFetching
37171
37286
  }
37172
37287
  )
37173
- ] });
37174
- })(),
37175
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37176
- TransferCryptoSingleInput,
37288
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(SkeletonButton2, {}),
37289
+ poweredByFooter
37290
+ ] })
37291
+ ] }) : view === "wallet_connect" && paymentIntent ? (
37292
+ // Mobile: flex-fill the full-height sheet so the wallet list grows and
37293
+ // scrolls with the footer pinned. Desktop (sm:): content-sized.
37294
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
37295
+ "div",
37177
37296
  {
37178
- userId: paymentIntent.user_id || "",
37179
- publishableKey,
37180
- clientSecret,
37181
- recipientAddress: paymentIntent.recipient_address,
37182
- destinationChainType: paymentIntent.destination_chain_type,
37183
- destinationChainId: paymentIntent.destination_chain_id,
37184
- destinationTokenAddress: paymentIntent.destination_token_address,
37185
- defaultSourceChainType,
37186
- defaultSourceChainId,
37187
- defaultSourceTokenAddress,
37188
- defaultSourceSymbol,
37189
- depositConfirmationMode: "auto_ui",
37190
- wallets,
37191
- onSourceTokenChange: setSelectedSource,
37192
- persistCheckingIndicator: true,
37193
- productType: "payment",
37194
- checkoutQuote: effectiveCheckoutQuote,
37195
- isCheckoutQuoteLoading: isQuoteLoading || isQuoteFetching
37297
+ className: "uf-flex uf-flex-col uf-gap-1.5 uf-min-h-0 uf-flex-1 sm:uf-flex-none",
37298
+ children: [
37299
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37300
+ WalletConnect,
37301
+ {
37302
+ walletInfo: browserWalletInfo ?? void 0,
37303
+ depositWallet: browserWalletInfo?.depositWallet ?? void 0,
37304
+ wallets,
37305
+ userId: paymentIntent.user_id || "",
37306
+ publishableKey,
37307
+ clientSecret,
37308
+ prefillAmountUsd: remainingAmountUsd,
37309
+ checkoutAmountUsd: paymentIntent.amount_usd,
37310
+ checkoutReceivedUsd: paymentIntent.amount_received_usd,
37311
+ checkoutDestination: {
37312
+ chainType: paymentIntent.destination_chain_type,
37313
+ chainId: paymentIntent.destination_chain_id,
37314
+ tokenAddress: paymentIntent.destination_token_address,
37315
+ decimals: paymentIntent.destination_token_decimals ?? 6
37316
+ },
37317
+ productType: "payment",
37318
+ stablecoinParity: paymentIntent.stablecoin_parity ?? false,
37319
+ checkoutRemainingBaseUnits: (() => {
37320
+ const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
37321
+ return remaining > 0n ? remaining.toString() : "0";
37322
+ })(),
37323
+ onSuccess: (_txHash) => {
37324
+ emitCheckoutSuccess(
37325
+ {
37326
+ paymentIntentId: paymentIntent.id,
37327
+ status: "processing",
37328
+ paymentIntent
37329
+ },
37330
+ "wallet_connect"
37331
+ );
37332
+ },
37333
+ onError: (error) => {
37334
+ onCheckoutError?.({
37335
+ message: error.message,
37336
+ error,
37337
+ method: "wallet_connect"
37338
+ });
37339
+ },
37340
+ onWalletDisconnect: handleWalletDisconnect,
37341
+ onWalletConnected: (info, dw) => {
37342
+ setBrowserWalletInfo({ ...info, depositWallet: dw });
37343
+ setStoredWalletState(info.type);
37344
+ setBrowserWalletChainType(dw.chain_type === "solana" ? "solana" : "ethereum");
37345
+ lastCheckoutMethodRef.current = "wallet_connect";
37346
+ },
37347
+ onNewDeposit: () => setView("main"),
37348
+ onDone: () => setView("main"),
37349
+ paymentIntentStatus: paymentIntent.status,
37350
+ onBack: handleBack,
37351
+ onClose: handleClose,
37352
+ defaultSourceChainType,
37353
+ defaultSourceChainId,
37354
+ defaultSourceTokenAddress,
37355
+ defaultSourceSymbol
37356
+ }
37357
+ ),
37358
+ poweredByFooter
37359
+ ]
37196
37360
  }
37197
37361
  )
37198
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(SkeletonButton2, {}),
37199
- poweredByFooter
37200
- ] })
37201
- ] }) : view === "wallet_connect" && paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
37202
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37203
- WalletConnect,
37204
- {
37205
- walletInfo: browserWalletInfo ?? void 0,
37206
- depositWallet: browserWalletInfo?.depositWallet ?? void 0,
37207
- wallets,
37208
- userId: paymentIntent.user_id || "",
37209
- publishableKey,
37210
- clientSecret,
37211
- prefillAmountUsd: remainingAmountUsd,
37212
- checkoutAmountUsd: paymentIntent.amount_usd,
37213
- checkoutReceivedUsd: paymentIntent.amount_received_usd,
37214
- checkoutDestination: {
37215
- chainType: paymentIntent.destination_chain_type,
37216
- chainId: paymentIntent.destination_chain_id,
37217
- tokenAddress: paymentIntent.destination_token_address,
37218
- decimals: paymentIntent.destination_token_decimals ?? 6
37219
- },
37220
- productType: "payment",
37221
- stablecoinParity: paymentIntent.stablecoin_parity ?? false,
37222
- checkoutRemainingBaseUnits: (() => {
37223
- const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
37224
- return remaining > 0n ? remaining.toString() : "0";
37225
- })(),
37226
- onSuccess: (_txHash) => {
37227
- emitCheckoutSuccess(
37228
- {
37229
- paymentIntentId: paymentIntent.id,
37230
- status: "processing",
37231
- paymentIntent
37232
- },
37233
- "wallet_connect"
37234
- );
37235
- },
37236
- onError: (error) => {
37237
- onCheckoutError?.({
37238
- message: error.message,
37239
- error,
37240
- method: "wallet_connect"
37241
- });
37242
- },
37243
- onWalletDisconnect: handleWalletDisconnect,
37244
- onWalletConnected: (info, dw) => {
37245
- setBrowserWalletInfo({ ...info, depositWallet: dw });
37246
- setStoredWalletState(info.type);
37247
- setBrowserWalletChainType(dw.chain_type === "solana" ? "solana" : "ethereum");
37248
- lastCheckoutMethodRef.current = "wallet_connect";
37249
- },
37250
- onNewDeposit: () => setView("main"),
37251
- onDone: () => setView("main"),
37252
- paymentIntentStatus: paymentIntent.status,
37253
- onBack: handleBack,
37254
- onClose: handleClose,
37255
- defaultSourceChainType,
37256
- defaultSourceChainId,
37257
- defaultSourceTokenAddress,
37258
- defaultSourceSymbol
37259
- }
37260
- ),
37261
- poweredByFooter
37262
- ] }) : null })
37362
+ ) : null
37363
+ }
37364
+ )
37263
37365
  }
37264
37366
  ) }) });
37265
37367
  }
37266
37368
  function useSupportedDestinationTokens(publishableKey, enabled = true) {
37267
- return (0, import_react_query21.useQuery)({
37369
+ return (0, import_react_query20.useQuery)({
37268
37370
  queryKey: ["unifold", "supportedDestinationTokens", publishableKey],
37269
37371
  queryFn: () => getSupportedDestinationTokens(publishableKey),
37270
37372
  staleTime: 1e3 * 60 * 5,
@@ -37299,7 +37401,7 @@ function useSourceTokenValidation(params) {
37299
37401
  enabled = true
37300
37402
  } = params;
37301
37403
  const hasParams = !!sourceChainType && !!sourceChainId && !!sourceTokenAddress;
37302
- return (0, import_react_query22.useQuery)({
37404
+ return (0, import_react_query21.useQuery)({
37303
37405
  queryKey: [
37304
37406
  "unifold",
37305
37407
  "sourceTokenValidation",
@@ -37348,7 +37450,7 @@ function useSourceTokenValidation(params) {
37348
37450
  function useAddressBalance(params) {
37349
37451
  const { address, chainType, chainId, tokenAddress, publishableKey, enabled = true } = params;
37350
37452
  const hasParams = !!address && !!chainType && !!chainId && !!tokenAddress;
37351
- return (0, import_react_query23.useQuery)({
37453
+ return (0, import_react_query22.useQuery)({
37352
37454
  queryKey: [
37353
37455
  "unifold",
37354
37456
  "addressBalance",
@@ -37404,7 +37506,7 @@ function useAddressBalance(params) {
37404
37506
  }
37405
37507
  function useExecutions(userId, publishableKey, options) {
37406
37508
  const actionType = options?.actionType ?? ActionType.Deposit;
37407
- return (0, import_react_query24.useQuery)({
37509
+ return (0, import_react_query23.useQuery)({
37408
37510
  queryKey: ["unifold", "executions", actionType, userId, publishableKey],
37409
37511
  queryFn: () => queryExecutions(userId, publishableKey, actionType),
37410
37512
  enabled: (options?.enabled ?? true) && !!userId,
@@ -37730,7 +37832,7 @@ function useVerifyRecipientAddress(params) {
37730
37832
  } = params;
37731
37833
  const trimmedAddress = recipientAddress?.trim() || "";
37732
37834
  const hasAllParams = !!chainType && !!chainId && !!tokenAddress && trimmedAddress.length > 0;
37733
- return (0, import_react_query25.useQuery)({
37835
+ return (0, import_react_query24.useQuery)({
37734
37836
  queryKey: [
37735
37837
  "unifold",
37736
37838
  "verifyRecipientAddress",
@@ -37769,7 +37871,7 @@ function useGetDepositAddress(params) {
37769
37871
  enabled = true
37770
37872
  } = params;
37771
37873
  const canFire = !!userId && !!recipientAddress && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress;
37772
- return (0, import_react_query26.useQuery)({
37874
+ return (0, import_react_query25.useQuery)({
37773
37875
  queryKey: [
37774
37876
  "unifold",
37775
37877
  "getDepositAddress",