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

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
@@ -6190,7 +6190,9 @@ var import_jsx_runtime18 = require("react/jsx-runtime");
6190
6190
  var React211 = __toESM(require("react"), 1);
6191
6191
  var import_jsx_runtime19 = require("react/jsx-runtime");
6192
6192
  var import_jsx_runtime20 = require("react/jsx-runtime");
6193
+ var React52 = __toESM(require("react"), 1);
6193
6194
  var import_react9 = require("react");
6195
+ var import_react_query3 = require("@tanstack/react-query");
6194
6196
 
6195
6197
  // ../core/dist/index.mjs
6196
6198
  var import_react_query2 = require("@tanstack/react-query");
@@ -6484,6 +6486,27 @@ async function getFiatCurrencies(publishableKey) {
6484
6486
  }
6485
6487
  return response.json();
6486
6488
  }
6489
+ async function getFiatExchangeRates(options = {}, publishableKey) {
6490
+ const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
6491
+ validatePublishableKey(pk);
6492
+ const params = new URLSearchParams();
6493
+ if (options.currencies && options.currencies.length > 0) {
6494
+ params.set("currencies", options.currencies.join(","));
6495
+ }
6496
+ const queryString = params.toString();
6497
+ const url = `${API_BASE_URL}/v1/public/exchange_rates/fiat_currencies${queryString ? `?${queryString}` : ""}`;
6498
+ const response = await fetch(url, {
6499
+ method: "GET",
6500
+ headers: {
6501
+ accept: "application/json",
6502
+ "x-publishable-key": pk
6503
+ }
6504
+ });
6505
+ if (!response.ok) {
6506
+ throw new Error(`Failed to fetch fiat exchange rates: ${response.statusText}`);
6507
+ }
6508
+ return response.json();
6509
+ }
6487
6510
  async function getOnrampQuotes(request, publishableKey) {
6488
6511
  const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
6489
6512
  validatePublishableKey(pk);
@@ -7165,6 +7188,7 @@ async function stripeGetDefaultToken(params, publishableKey) {
7165
7188
  chain_type: params.chainType
7166
7189
  });
7167
7190
  if (params.countryCode) query.append("country_code", params.countryCode);
7191
+ if (params.subdivisionCode) query.append("subdivision_code", params.subdivisionCode);
7168
7192
  const response = await fetch(
7169
7193
  `${API_BASE_URL}${HEADLESS_STRIPE_BASE}/default_token?${query.toString()}`,
7170
7194
  {
@@ -7803,7 +7827,7 @@ var en_default = {
7803
7827
  var i18n = en_default;
7804
7828
 
7805
7829
  // ../ui-react/dist/index.mjs
7806
- var import_react_query3 = require("@tanstack/react-query");
7830
+ var import_react_query4 = require("@tanstack/react-query");
7807
7831
  var import_react10 = require("react");
7808
7832
  var import_react11 = require("react");
7809
7833
  var import_react12 = require("react");
@@ -7812,7 +7836,7 @@ var React42 = __toESM(require("react"), 1);
7812
7836
  var import_jsx_runtime22 = require("react/jsx-runtime");
7813
7837
  var import_jsx_runtime23 = require("react/jsx-runtime");
7814
7838
  var import_jsx_runtime24 = require("react/jsx-runtime");
7815
- var import_react_query4 = require("@tanstack/react-query");
7839
+ var import_react_query5 = require("@tanstack/react-query");
7816
7840
  var import_react13 = require("react");
7817
7841
  var import_jsx_runtime25 = require("react/jsx-runtime");
7818
7842
  var import_react14 = require("react");
@@ -7822,12 +7846,12 @@ var import_jsx_runtime26 = require("react/jsx-runtime");
7822
7846
  var import_jsx_runtime27 = require("react/jsx-runtime");
7823
7847
  var import_jsx_runtime28 = require("react/jsx-runtime");
7824
7848
  var import_jsx_runtime29 = require("react/jsx-runtime");
7825
- var React52 = __toESM(require("react"), 1);
7849
+ var React62 = __toESM(require("react"), 1);
7826
7850
  var import_react17 = require("react");
7827
- var import_react_query5 = require("@tanstack/react-query");
7828
- var import_react18 = require("react");
7829
7851
  var import_react_query6 = require("@tanstack/react-query");
7852
+ var import_react18 = require("react");
7830
7853
  var import_react_query7 = require("@tanstack/react-query");
7854
+ var import_react_query8 = require("@tanstack/react-query");
7831
7855
  var import_jsx_runtime30 = require("react/jsx-runtime");
7832
7856
  var import_react19 = require("react");
7833
7857
  var import_jsx_runtime31 = require("react/jsx-runtime");
@@ -7836,20 +7860,20 @@ var import_react21 = require("react");
7836
7860
  var import_qr_code_styling = __toESM(require_qr_code_styling(), 1);
7837
7861
  var import_jsx_runtime32 = require("react/jsx-runtime");
7838
7862
  var import_react22 = require("react");
7839
- var import_react_query8 = require("@tanstack/react-query");
7863
+ var import_react_query9 = require("@tanstack/react-query");
7840
7864
  var import_jsx_runtime33 = require("react/jsx-runtime");
7841
7865
  var import_react23 = require("react");
7842
- var import_react_query9 = require("@tanstack/react-query");
7866
+ var import_react_query10 = require("@tanstack/react-query");
7843
7867
  var import_jsx_runtime34 = require("react/jsx-runtime");
7844
7868
  var import_jsx_runtime35 = require("react/jsx-runtime");
7845
- var React62 = __toESM(require("react"), 1);
7846
- var import_jsx_runtime36 = require("react/jsx-runtime");
7847
7869
  var React72 = __toESM(require("react"), 1);
7848
- var import_jsx_runtime37 = require("react/jsx-runtime");
7870
+ var import_jsx_runtime36 = require("react/jsx-runtime");
7849
7871
  var React82 = __toESM(require("react"), 1);
7872
+ var import_jsx_runtime37 = require("react/jsx-runtime");
7873
+ var React92 = __toESM(require("react"), 1);
7850
7874
  var import_jsx_runtime38 = require("react/jsx-runtime");
7875
+ var React112 = __toESM(require("react"), 1);
7851
7876
  var React102 = __toESM(require("react"), 1);
7852
- var React92 = __toESM(require("react"), 1);
7853
7877
 
7854
7878
  // ../../node_modules/.pnpm/@radix-ui+react-slot@1.2.4_@types+react@19.2.9_react@19.2.3/node_modules/@radix-ui/react-slot/dist/index.mjs
7855
7879
  var React25 = __toESM(require("react"), 1);
@@ -7997,15 +8021,15 @@ var cva = (base, config) => (props) => {
7997
8021
  // ../ui-react/dist/index.mjs
7998
8022
  var import_jsx_runtime39 = require("react/jsx-runtime");
7999
8023
  var import_jsx_runtime40 = require("react/jsx-runtime");
8000
- var React112 = __toESM(require("react"), 1);
8001
- var import_jsx_runtime41 = require("react/jsx-runtime");
8002
8024
  var React122 = __toESM(require("react"), 1);
8003
- var import_jsx_runtime42 = require("react/jsx-runtime");
8025
+ var import_jsx_runtime41 = require("react/jsx-runtime");
8004
8026
  var React132 = __toESM(require("react"), 1);
8005
- var import_jsx_runtime43 = require("react/jsx-runtime");
8027
+ var import_jsx_runtime42 = require("react/jsx-runtime");
8006
8028
  var React142 = __toESM(require("react"), 1);
8029
+ var import_jsx_runtime43 = require("react/jsx-runtime");
8030
+ var React152 = __toESM(require("react"), 1);
8007
8031
  var import_jsx_runtime44 = require("react/jsx-runtime");
8008
- var React282 = __toESM(require("react"), 1);
8032
+ var React292 = __toESM(require("react"), 1);
8009
8033
 
8010
8034
  // ../../node_modules/.pnpm/mipd@0.0.7_typescript@5.9.3/node_modules/mipd/dist/esm/utils.js
8011
8035
  function requestProviders(listener) {
@@ -8062,51 +8086,50 @@ function createStore() {
8062
8086
  }
8063
8087
 
8064
8088
  // ../ui-react/dist/index.mjs
8065
- var React152 = __toESM(require("react"), 1);
8066
8089
  var React162 = __toESM(require("react"), 1);
8067
- var import_jsx_runtime45 = require("react/jsx-runtime");
8068
8090
  var React172 = __toESM(require("react"), 1);
8069
- var import_jsx_runtime46 = require("react/jsx-runtime");
8091
+ var import_jsx_runtime45 = require("react/jsx-runtime");
8070
8092
  var React182 = __toESM(require("react"), 1);
8071
- var import_jsx_runtime47 = require("react/jsx-runtime");
8093
+ var import_jsx_runtime46 = require("react/jsx-runtime");
8072
8094
  var React192 = __toESM(require("react"), 1);
8073
- var import_jsx_runtime48 = require("react/jsx-runtime");
8095
+ var import_jsx_runtime47 = require("react/jsx-runtime");
8074
8096
  var React202 = __toESM(require("react"), 1);
8075
- var import_jsx_runtime49 = require("react/jsx-runtime");
8097
+ var import_jsx_runtime48 = require("react/jsx-runtime");
8076
8098
  var React212 = __toESM(require("react"), 1);
8077
- var import_jsx_runtime50 = require("react/jsx-runtime");
8099
+ var import_jsx_runtime49 = require("react/jsx-runtime");
8078
8100
  var React222 = __toESM(require("react"), 1);
8079
- var import_jsx_runtime51 = require("react/jsx-runtime");
8101
+ var import_jsx_runtime50 = require("react/jsx-runtime");
8080
8102
  var React232 = __toESM(require("react"), 1);
8081
- var import_jsx_runtime52 = require("react/jsx-runtime");
8103
+ var import_jsx_runtime51 = require("react/jsx-runtime");
8082
8104
  var React242 = __toESM(require("react"), 1);
8083
- var import_jsx_runtime53 = require("react/jsx-runtime");
8105
+ var import_jsx_runtime52 = require("react/jsx-runtime");
8084
8106
  var React252 = __toESM(require("react"), 1);
8085
- var import_jsx_runtime54 = require("react/jsx-runtime");
8107
+ var import_jsx_runtime53 = require("react/jsx-runtime");
8086
8108
  var React262 = __toESM(require("react"), 1);
8087
- var import_jsx_runtime55 = require("react/jsx-runtime");
8109
+ var import_jsx_runtime54 = require("react/jsx-runtime");
8088
8110
  var React272 = __toESM(require("react"), 1);
8111
+ var import_jsx_runtime55 = require("react/jsx-runtime");
8112
+ var React282 = __toESM(require("react"), 1);
8089
8113
  var import_jsx_runtime56 = require("react/jsx-runtime");
8090
8114
  var import_jsx_runtime57 = require("react/jsx-runtime");
8091
8115
  var import_jsx_runtime58 = require("react/jsx-runtime");
8092
- var React292 = __toESM(require("react"), 1);
8116
+ var React302 = __toESM(require("react"), 1);
8093
8117
  var import_jsx_runtime59 = require("react/jsx-runtime");
8094
8118
  var import_react24 = require("react");
8095
8119
  var import_jsx_runtime60 = require("react/jsx-runtime");
8096
8120
  var import_react25 = require("react");
8097
8121
  var import_jsx_runtime61 = require("react/jsx-runtime");
8098
8122
  var import_react26 = require("react");
8099
- var import_react_query10 = require("@tanstack/react-query");
8100
8123
  var import_react_query11 = require("@tanstack/react-query");
8101
8124
  var import_react_query12 = require("@tanstack/react-query");
8102
- var import_jsx_runtime62 = require("react/jsx-runtime");
8103
8125
  var import_react_query13 = require("@tanstack/react-query");
8126
+ var import_jsx_runtime62 = require("react/jsx-runtime");
8104
8127
  var import_react_query14 = require("@tanstack/react-query");
8105
8128
  var import_react_query15 = require("@tanstack/react-query");
8106
8129
  var import_react_query16 = require("@tanstack/react-query");
8107
8130
  var import_react27 = require("react");
8108
8131
  var import_react28 = require("react");
8109
- var React312 = __toESM(require("react"), 1);
8132
+ var React322 = __toESM(require("react"), 1);
8110
8133
  var import_jsx_runtime63 = require("react/jsx-runtime");
8111
8134
  var import_jsx_runtime64 = require("react/jsx-runtime");
8112
8135
  var import_jsx_runtime65 = require("react/jsx-runtime");
@@ -10116,7 +10139,7 @@ var import_react30 = require("react");
10116
10139
  var import_jsx_runtime67 = require("react/jsx-runtime");
10117
10140
  var import_jsx_runtime68 = require("react/jsx-runtime");
10118
10141
  var import_react31 = require("react");
10119
- var React322 = __toESM(require("react"), 1);
10142
+ var React332 = __toESM(require("react"), 1);
10120
10143
 
10121
10144
  // ../../node_modules/.pnpm/@radix-ui+react-tooltip@1.2.8_@types+react-dom@19.2.3_@types+react@19.2.9__@types+react@19.2._udyjcec5g7ve3mpsxbgla63vgi/node_modules/@radix-ui/react-tooltip/dist/index.mjs
10122
10145
  var React31 = __toESM(require("react"), 1);
@@ -12858,7 +12881,7 @@ var import_react_query17 = require("@tanstack/react-query");
12858
12881
  var import_jsx_runtime70 = require("react/jsx-runtime");
12859
12882
  var import_jsx_runtime71 = require("react/jsx-runtime");
12860
12883
  var import_react32 = require("react");
12861
- var React332 = __toESM(require("react"), 1);
12884
+ var React342 = __toESM(require("react"), 1);
12862
12885
 
12863
12886
  // ../../node_modules/.pnpm/@radix-ui+react-select@2.2.6_@types+react-dom@19.2.3_@types+react@19.2.9__@types+react@19.2.9_cot3leusltbsophitaz3dgdqdm/node_modules/@radix-ui/react-select/dist/index.mjs
12864
12887
  var React35 = __toESM(require("react"), 1);
@@ -14095,7 +14118,7 @@ var Separator = SelectSeparator;
14095
14118
  // ../ui-react/dist/index.mjs
14096
14119
  var import_jsx_runtime72 = require("react/jsx-runtime");
14097
14120
  var import_jsx_runtime73 = require("react/jsx-runtime");
14098
- var React342 = __toESM(require("react"), 1);
14121
+ var React352 = __toESM(require("react"), 1);
14099
14122
  var import_react_query18 = require("@tanstack/react-query");
14100
14123
  var import_react_query19 = require("@tanstack/react-query");
14101
14124
  var import_jsx_runtime74 = require("react/jsx-runtime");
@@ -14556,6 +14579,7 @@ var DialogContent2 = React36.forwardRef(({ className, style, children, omitOverl
14556
14579
  className: cn(
14557
14580
  portalContainer ? "uf-absolute" : "uf-fixed",
14558
14581
  "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",
14582
+ "focus:uf-outline-none focus-visible:uf-outline-none",
14559
14583
  !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
14584
  "uf-border uf-bg-background",
14561
14585
  omitOverlayEmbed ? "uf-gap-0 uf-p-0" : "uf-gap-4 uf-p-6 uf-shadow-lg uf-duration-200",
@@ -14571,6 +14595,14 @@ var DialogContent2 = React36.forwardRef(({ className, style, children, omitOverl
14571
14595
  ),
14572
14596
  style: {
14573
14597
  "--uf-container-radius": `${components.container.borderRadius}px`,
14598
+ // Radix traps focus and, when the focused control unmounts during an
14599
+ // in-modal screen transition, moves focus onto this container. Modern
14600
+ // browsers paint the default focus ring via `:focus-visible`, which
14601
+ // flashes a highlight around the whole modal until focus settles on
14602
+ // the next screen. Suppress it inline so it works regardless of the
14603
+ // Tailwind build (the container is a programmatic focus target, not an
14604
+ // interactive control, so it should never show a focus ring).
14605
+ outline: "none",
14574
14606
  ...portalContainer ? { display: "flex", flexDirection: "column" } : {},
14575
14607
  ...style
14576
14608
  },
@@ -14667,7 +14699,7 @@ function useDepositAddress(params) {
14667
14699
  contractCalls,
14668
14700
  enabled = true
14669
14701
  } = params;
14670
- return (0, import_react_query3.useQuery)({
14702
+ return (0, import_react_query4.useQuery)({
14671
14703
  queryKey: [
14672
14704
  "unifold",
14673
14705
  "depositAddress",
@@ -15294,7 +15326,7 @@ function useUserIp2() {
15294
15326
  data: userIpInfo,
15295
15327
  isLoading,
15296
15328
  error
15297
- } = (0, import_react_query4.useQuery)({
15329
+ } = (0, import_react_query5.useQuery)({
15298
15330
  queryKey: ["unifold", "userIpInfo"],
15299
15331
  queryFn: async () => {
15300
15332
  const data = await getIpAddress();
@@ -16568,13 +16600,25 @@ function BuyWithCard({
16568
16600
  wallets: externalWallets,
16569
16601
  assetCdnUrl,
16570
16602
  hideDepositFlowInfo = false,
16571
- hideDisplayDescription = false
16603
+ hideDisplayDescription = false,
16604
+ prefilledAmountUsd
16572
16605
  }) {
16573
16606
  const { colors: colors2, fonts, components } = useTheme();
16574
- const [amount, setAmount] = (0, import_react9.useState)("");
16607
+ const cleanedPrefilledAmountUsd = React52.useMemo(() => {
16608
+ if (!prefilledAmountUsd) return "";
16609
+ return prefilledAmountUsd.replace(/[^0-9.]/g, "");
16610
+ }, [prefilledAmountUsd]);
16611
+ const parsedPrefilledAmountUsd = React52.useMemo(() => {
16612
+ const parsed = parseFloat(cleanedPrefilledAmountUsd);
16613
+ return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
16614
+ }, [cleanedPrefilledAmountUsd]);
16615
+ const shouldAutoConvertPrefilledRef = (0, import_react9.useRef)(!!cleanedPrefilledAmountUsd);
16616
+ const [amount, setAmount] = (0, import_react9.useState)(() => cleanedPrefilledAmountUsd);
16575
16617
  const [currency, setCurrency] = (0, import_react9.useState)("usd");
16576
16618
  const [hasManualCurrencySelection, setHasManualCurrencySelection] = (0, import_react9.useState)(false);
16577
- const [hasManualAmountEntry, setHasManualAmountEntry] = (0, import_react9.useState)(false);
16619
+ const [hasManualAmountEntry, setHasManualAmountEntry] = (0, import_react9.useState)(
16620
+ () => !!cleanedPrefilledAmountUsd
16621
+ );
16578
16622
  const [showCurrencyModal, setShowCurrencyModal] = (0, import_react9.useState)(false);
16579
16623
  const [quotes, setQuotes] = (0, import_react9.useState)([]);
16580
16624
  const [quotesLoading, setQuotesLoading] = (0, import_react9.useState)(false);
@@ -16631,6 +16675,71 @@ function BuyWithCard({
16631
16675
  const [preferredCurrencyCodes, setPreferredCurrencyCodes] = (0, import_react9.useState)([]);
16632
16676
  const [currenciesLoading, setCurrenciesLoading] = (0, import_react9.useState)(true);
16633
16677
  const [destinationToken, setDestinationToken] = (0, import_react9.useState)(null);
16678
+ (0, import_react9.useEffect)(() => {
16679
+ const hasPrefilledAmount = !!cleanedPrefilledAmountUsd;
16680
+ shouldAutoConvertPrefilledRef.current = hasPrefilledAmount;
16681
+ if (!hasPrefilledAmount) return;
16682
+ setAmount(cleanedPrefilledAmountUsd);
16683
+ setHasManualAmountEntry(true);
16684
+ }, [cleanedPrefilledAmountUsd]);
16685
+ const { data: fiatExchangeRatesResponse, isLoading: isFiatExchangeRatesLoading } = (0, import_react_query3.useQuery)({
16686
+ queryKey: ["fiat-exchange-rates", publishableKey],
16687
+ staleTime: 3e4,
16688
+ refetchInterval: 3e4,
16689
+ queryFn: async () => {
16690
+ try {
16691
+ return await getFiatExchangeRates({}, publishableKey);
16692
+ } catch (error) {
16693
+ console.error("Error fetching fiat exchange rates:", error);
16694
+ return { base_currency: "usd", rates: {} };
16695
+ }
16696
+ }
16697
+ });
16698
+ const fiatExchangeRates = fiatExchangeRatesResponse?.rates ?? {};
16699
+ const convertAmountBetweenCurrencies = React52.useCallback(
16700
+ (rawAmount, fromCurrencyCode, toCurrencyCode) => {
16701
+ const parsedAmount = parseFloat(rawAmount);
16702
+ if (!Number.isFinite(parsedAmount) || parsedAmount <= 0) return null;
16703
+ const fromCode = fromCurrencyCode.toLowerCase();
16704
+ const toCode = toCurrencyCode.toLowerCase();
16705
+ const fromRate = fromCode === "usd" ? 1 : fiatExchangeRates[fromCode];
16706
+ const toRate = toCode === "usd" ? 1 : fiatExchangeRates[toCode];
16707
+ if (!Number.isFinite(fromRate) || fromRate <= 0) return null;
16708
+ if (!Number.isFinite(toRate) || toRate <= 0) return null;
16709
+ const usdAmount = parsedAmount / fromRate;
16710
+ return parseFloat((usdAmount * toRate).toFixed(2)).toString();
16711
+ },
16712
+ [fiatExchangeRates]
16713
+ );
16714
+ const getConvertedPrefilledAmount = React52.useCallback(
16715
+ (targetCurrencyCode) => {
16716
+ if (!parsedPrefilledAmountUsd) return null;
16717
+ const normalizedTargetCurrency = targetCurrencyCode.toLowerCase();
16718
+ const rate = normalizedTargetCurrency === "usd" ? 1 : fiatExchangeRates[normalizedTargetCurrency];
16719
+ if (!Number.isFinite(rate) || rate <= 0) return null;
16720
+ return parseFloat((parsedPrefilledAmountUsd * rate).toFixed(2)).toString();
16721
+ },
16722
+ [parsedPrefilledAmountUsd, fiatExchangeRates]
16723
+ );
16724
+ (0, import_react9.useEffect)(() => {
16725
+ if (!cleanedPrefilledAmountUsd || !shouldAutoConvertPrefilledRef.current) return;
16726
+ const convertedAmount = getConvertedPrefilledAmount(currency);
16727
+ if (!convertedAmount) {
16728
+ if (isFiatExchangeRatesLoading) return;
16729
+ const targetCurrency = currency.toLowerCase();
16730
+ if (targetCurrency !== "usd") {
16731
+ setCurrency("usd");
16732
+ }
16733
+ return;
16734
+ }
16735
+ setAmount(convertedAmount);
16736
+ setHasManualAmountEntry(true);
16737
+ }, [
16738
+ cleanedPrefilledAmountUsd,
16739
+ currency,
16740
+ getConvertedPrefilledAmount,
16741
+ isFiatExchangeRatesLoading
16742
+ ]);
16634
16743
  const depositWalletId = defaultToken ? getWalletByChainType(wallets, defaultToken.destination_token_metadata.chain_type)?.id : void 0;
16635
16744
  const { executions, isPolling, showWaitingUi } = useDepositPolling({
16636
16745
  userId,
@@ -16661,6 +16770,7 @@ function BuyWithCard({
16661
16770
  }, [publishableKey]);
16662
16771
  (0, import_react9.useEffect)(() => {
16663
16772
  if (hasManualCurrencySelection) return;
16773
+ if (hasManualAmountEntry && !shouldAutoConvertPrefilledRef.current) return;
16664
16774
  if (fiatCurrencies.length === 0 || !userIpInfo?.alpha2) return;
16665
16775
  const userCountryCode = userIpInfo.alpha2;
16666
16776
  const matchingCurrency = fiatCurrencies.find((c) => c.country_codes.includes(userCountryCode));
@@ -16679,7 +16789,15 @@ function BuyWithCard({
16679
16789
  const prevCurrencyRef = (0, import_react9.useRef)(null);
16680
16790
  (0, import_react9.useEffect)(() => {
16681
16791
  if (fiatCurrencies.length === 0) return;
16792
+ if (shouldAutoConvertPrefilledRef.current) {
16793
+ prevCurrencyRef.current = currency;
16794
+ return;
16795
+ }
16682
16796
  if (prevCurrencyRef.current !== null && prevCurrencyRef.current !== currency) {
16797
+ if (hasManualAmountEntry) {
16798
+ prevCurrencyRef.current = currency;
16799
+ return;
16800
+ }
16683
16801
  const currentCurrency = fiatCurrencies.find(
16684
16802
  (c) => c.currency_code.toLowerCase() === currency.toLowerCase()
16685
16803
  );
@@ -16688,7 +16806,7 @@ function BuyWithCard({
16688
16806
  }
16689
16807
  }
16690
16808
  prevCurrencyRef.current = currency;
16691
- }, [currency]);
16809
+ }, [currency, fiatCurrencies, hasManualAmountEntry]);
16692
16810
  (0, import_react9.useEffect)(() => {
16693
16811
  async function fetchDestinationToken() {
16694
16812
  try {
@@ -16865,6 +16983,7 @@ function BuyWithCard({
16865
16983
  return () => clearInterval(timer);
16866
16984
  }, [quotes.length, amount]);
16867
16985
  const handleAmountChange = (value) => {
16986
+ shouldAutoConvertPrefilledRef.current = false;
16868
16987
  if (value === "") {
16869
16988
  setAmount(value);
16870
16989
  setHasManualAmountEntry(true);
@@ -16878,6 +16997,7 @@ function BuyWithCard({
16878
16997
  }
16879
16998
  };
16880
16999
  const handleQuickAmount = (quickAmount) => {
17000
+ shouldAutoConvertPrefilledRef.current = false;
16881
17001
  setAmount(quickAmount.toString());
16882
17002
  setHasManualAmountEntry(true);
16883
17003
  };
@@ -17481,8 +17601,43 @@ function BuyWithCard({
17481
17601
  preferredCurrencyCodes,
17482
17602
  selectedCurrency: currency,
17483
17603
  onSelectCurrency: (currencyCode) => {
17484
- setCurrency(currencyCode.toLowerCase());
17604
+ const nextCurrency = currencyCode.toLowerCase();
17605
+ if (nextCurrency === currency.toLowerCase()) {
17606
+ setHasManualCurrencySelection(true);
17607
+ return;
17608
+ }
17609
+ const currentCurrency = currency;
17485
17610
  setHasManualCurrencySelection(true);
17611
+ if (shouldAutoConvertPrefilledRef.current) {
17612
+ const convertedAmount = getConvertedPrefilledAmount(nextCurrency);
17613
+ if (convertedAmount) {
17614
+ setCurrency(nextCurrency);
17615
+ setAmount(convertedAmount);
17616
+ setHasManualAmountEntry(true);
17617
+ } else {
17618
+ if (isFiatExchangeRatesLoading) return;
17619
+ const fallbackUsdAmount = getConvertedPrefilledAmount("usd");
17620
+ setCurrency("usd");
17621
+ if (fallbackUsdAmount) {
17622
+ setAmount(fallbackUsdAmount);
17623
+ setHasManualAmountEntry(true);
17624
+ }
17625
+ }
17626
+ return;
17627
+ }
17628
+ if (hasManualAmountEntry && amount) {
17629
+ const convertedAmount = convertAmountBetweenCurrencies(
17630
+ amount,
17631
+ currentCurrency,
17632
+ nextCurrency
17633
+ );
17634
+ if (convertedAmount) {
17635
+ setCurrency(nextCurrency);
17636
+ setAmount(convertedAmount);
17637
+ }
17638
+ return;
17639
+ }
17640
+ setCurrency(nextCurrency);
17486
17641
  },
17487
17642
  themeClass
17488
17643
  }
@@ -17535,7 +17690,7 @@ function useCoinbaseLegalAgreements({
17535
17690
  publishableKey,
17536
17691
  enabled = true
17537
17692
  }) {
17538
- return (0, import_react_query5.useQuery)({
17693
+ return (0, import_react_query6.useQuery)({
17539
17694
  queryKey: ["unifold", "coinbaseLegalAgreements", publishableKey],
17540
17695
  queryFn: () => getCoinbaseLegalAgreements(publishableKey),
17541
17696
  enabled: enabled && !!publishableKey,
@@ -17553,7 +17708,7 @@ function useApplePayLimits({
17553
17708
  enabled = true
17554
17709
  }) {
17555
17710
  const phoneValid = US_E164_REGEX.test(phone);
17556
- return (0, import_react_query6.useQuery)({
17711
+ return (0, import_react_query7.useQuery)({
17557
17712
  queryKey: ["unifold", "applePayLimits", phone, publishableKey],
17558
17713
  queryFn: ({ signal }) => getCoinbaseApplePayLimits(phone, publishableKey, signal),
17559
17714
  enabled: enabled && phoneValid && !!publishableKey,
@@ -17653,7 +17808,7 @@ function useDefaultOnrampToken({
17653
17808
  isLoading,
17654
17809
  isError,
17655
17810
  error
17656
- } = (0, import_react_query7.useQuery)({
17811
+ } = (0, import_react_query8.useQuery)({
17657
17812
  queryKey: [
17658
17813
  "unifold",
17659
17814
  "defaultOnrampToken",
@@ -17727,7 +17882,7 @@ function parseCoinbasePostMessage(raw) {
17727
17882
  } : void 0
17728
17883
  };
17729
17884
  }
17730
- var BuyWithApplePay = React52.forwardRef(
17885
+ var BuyWithApplePay = React62.forwardRef(
17731
17886
  function BuyWithApplePay2({
17732
17887
  userId,
17733
17888
  publishableKey,
@@ -17886,7 +18041,7 @@ var BuyWithApplePay = React52.forwardRef(
17886
18041
  popupRef.current = null;
17887
18042
  };
17888
18043
  }, []);
17889
- React52.useImperativeHandle(
18044
+ React62.useImperativeHandle(
17890
18045
  ref,
17891
18046
  () => ({
17892
18047
  requestBack: () => {
@@ -19196,7 +19351,7 @@ function LegalDisclaimer({ legalAgreements, loading }) {
19196
19351
  children: [
19197
19352
  "By continuing, you agree to Coinbase's",
19198
19353
  " ",
19199
- agreements.map((a, idx, arr) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(React52.Fragment, { children: [
19354
+ agreements.map((a, idx, arr) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(React62.Fragment, { children: [
19200
19355
  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
19201
19356
  "a",
19202
19357
  {
@@ -19612,7 +19767,7 @@ function useIsMobileViewport() {
19612
19767
  return isMobile;
19613
19768
  }
19614
19769
  function useCashAppLimits({ publishableKey, currency = "usd" }) {
19615
- return (0, import_react_query8.useQuery)({
19770
+ return (0, import_react_query9.useQuery)({
19616
19771
  queryKey: ["unifold", "cashAppLimits", currency, publishableKey],
19617
19772
  queryFn: () => getCashAppLimits(currency, publishableKey),
19618
19773
  enabled: !!publishableKey,
@@ -19625,6 +19780,7 @@ var POLL_INTERVAL_MS2 = 5e3;
19625
19780
  var FALLBACK_MIN_USD = 5;
19626
19781
  var SUGGESTED_AMOUNTS = [25, 50, 100];
19627
19782
  var t3 = i18n2.depositModal.cashApp;
19783
+ var sanitizePrefilledUsd = (value) => value?.replace(/[^0-9.]/g, "") ?? "";
19628
19784
  function PayWithCashApp({
19629
19785
  userId,
19630
19786
  publishableKey,
@@ -19639,6 +19795,7 @@ function PayWithCashApp({
19639
19795
  onEvent,
19640
19796
  onDepositSuccess,
19641
19797
  onDepositError,
19798
+ prefilledAmountUsd,
19642
19799
  wallets = []
19643
19800
  }) {
19644
19801
  const { colors: colors2, fonts, components } = useTheme();
@@ -19654,7 +19811,7 @@ function PayWithCashApp({
19654
19811
  const { data: limits, isLoading: limitsLoading } = useCashAppLimits({ publishableKey });
19655
19812
  const minUsd = limits?.minimum_amount ?? FALLBACK_MIN_USD;
19656
19813
  const maxUsd = limits?.maximum_amount ?? null;
19657
- const [amount, setAmount] = (0, import_react20.useState)("");
19814
+ const [amount, setAmount] = (0, import_react20.useState)(() => sanitizePrefilledUsd(prefilledAmountUsd));
19658
19815
  const [loading, setLoading] = (0, import_react20.useState)(false);
19659
19816
  const [session, setSession] = (0, import_react20.useState)(null);
19660
19817
  const [status, setStatus] = (0, import_react20.useState)("pending");
@@ -19777,6 +19934,13 @@ function PayWithCashApp({
19777
19934
  return () => clearInterval(interval);
19778
19935
  }, [session, view, status, publishableKey, onDepositSuccess, onDepositError]);
19779
19936
  const [softExpired, setSoftExpired] = (0, import_react20.useState)(false);
19937
+ (0, import_react20.useEffect)(() => {
19938
+ if (!prefilledAmountUsd) return;
19939
+ const cleaned = sanitizePrefilledUsd(prefilledAmountUsd);
19940
+ if (!cleaned) return;
19941
+ setAmount(cleaned);
19942
+ onAmountChange?.(cleaned);
19943
+ }, [prefilledAmountUsd, onAmountChange]);
19780
19944
  (0, import_react20.useEffect)(() => {
19781
19945
  if (!session?.expires_at || view !== "payment") return;
19782
19946
  const expiresMs = new Date(session.expires_at).getTime();
@@ -20131,7 +20295,7 @@ function useBankTransferProviders({
20131
20295
  countryCode
20132
20296
  }) {
20133
20297
  const normalizedCountry = countryCode?.toUpperCase();
20134
- const { data: providers, isLoading } = (0, import_react_query9.useQuery)({
20298
+ const { data: providers, isLoading } = (0, import_react_query10.useQuery)({
20135
20299
  queryKey: ["unifold", "bankTransferProviders", publishableKey, normalizedCountry ?? null],
20136
20300
  queryFn: () => getBankTransferProviders(publishableKey, { countryCode: normalizedCountry }),
20137
20301
  enabled,
@@ -20169,7 +20333,8 @@ function BankTransfer({
20169
20333
  assetCdnUrl,
20170
20334
  onDepositSuccess,
20171
20335
  onEvent,
20172
- onDepositError
20336
+ onDepositError,
20337
+ prefilledAmountUsd
20173
20338
  }) {
20174
20339
  const { colors: colors2, fonts, components } = useTheme();
20175
20340
  const [internalView, setInternalView] = (0, import_react23.useState)("providers");
@@ -20179,6 +20344,10 @@ function BankTransfer({
20179
20344
  const [requestBase, setRequestBase] = (0, import_react23.useState)(null);
20180
20345
  const [activeRequest, setActiveRequest] = (0, import_react23.useState)(null);
20181
20346
  const [amount, setAmount] = (0, import_react23.useState)("");
20347
+ const [fiatExchangeRates, setFiatExchangeRates] = (0, import_react23.useState)({
20348
+ usd: 1
20349
+ });
20350
+ const providerSelectionRequestIdRef = (0, import_react23.useRef)(0);
20182
20351
  const currentView = externalView ?? internalView;
20183
20352
  const setView = (v) => {
20184
20353
  setInternalView(v);
@@ -20228,7 +20397,38 @@ function BankTransfer({
20228
20397
  () => destinationTokenSymbol?.toUpperCase() ?? defaultToken?.destination_token_metadata?.symbol?.toUpperCase() ?? defaultToken?.destination_currency?.toUpperCase() ?? "USDC",
20229
20398
  [destinationTokenSymbol, defaultToken]
20230
20399
  );
20231
- const handleProviderClick = (provider) => {
20400
+ const resolvePrefilledSourceAmount = (0, import_react23.useCallback)(
20401
+ async (sourceCurrencyCode) => {
20402
+ const cleanedPrefilled = prefilledAmountUsd?.replace(/[^0-9.]/g, "") ?? "";
20403
+ if (!cleanedPrefilled) return "";
20404
+ const prefilledUsd = parseFloat(cleanedPrefilled);
20405
+ if (!Number.isFinite(prefilledUsd) || prefilledUsd <= 0) return "";
20406
+ const sourceCurrency2 = sourceCurrencyCode.toLowerCase();
20407
+ let rate = sourceCurrency2 === "usd" ? 1 : fiatExchangeRates[sourceCurrency2];
20408
+ if ((!rate || rate <= 0) && sourceCurrency2 !== "usd") {
20409
+ try {
20410
+ const response = await getFiatExchangeRates({}, publishableKey);
20411
+ if (response?.rates) {
20412
+ setFiatExchangeRates((prev) => ({
20413
+ ...prev,
20414
+ ...response.rates,
20415
+ usd: 1
20416
+ }));
20417
+ }
20418
+ const fetchedRate = response.rates?.[sourceCurrency2];
20419
+ if (Number.isFinite(fetchedRate) && fetchedRate > 0) {
20420
+ rate = fetchedRate;
20421
+ }
20422
+ } catch (error) {
20423
+ console.error("Error fetching fiat exchange rates for bank transfer:", error);
20424
+ }
20425
+ }
20426
+ if (!rate || rate <= 0) return sourceCurrency2 === "usd" ? cleanedPrefilled : "";
20427
+ return parseFloat((prefilledUsd * rate).toFixed(2)).toString();
20428
+ },
20429
+ [fiatExchangeRates, prefilledAmountUsd, publishableKey]
20430
+ );
20431
+ const handleProviderClick = async (provider) => {
20232
20432
  if (!provider.enabled) return;
20233
20433
  setSessionError(null);
20234
20434
  if (!defaultToken) {
@@ -20247,6 +20447,7 @@ function BankTransfer({
20247
20447
  });
20248
20448
  return;
20249
20449
  }
20450
+ const requestId = ++providerSelectionRequestIdRef.current;
20250
20451
  setRequestBase({
20251
20452
  service_provider: provider.service_provider,
20252
20453
  country_code: (userIpInfo?.alpha2 || "DE").toUpperCase(),
@@ -20260,7 +20461,10 @@ function BankTransfer({
20260
20461
  payment_method: provider.payment_methods[0]
20261
20462
  });
20262
20463
  setActiveProvider(provider);
20263
- setAmount("100");
20464
+ const convertedPrefilled = await resolvePrefilledSourceAmount(provider.source_currency);
20465
+ if (requestId !== providerSelectionRequestIdRef.current) return;
20466
+ const hasPrefilledAmount = !!prefilledAmountUsd?.replace(/[^0-9.]/g, "");
20467
+ setAmount(hasPrefilledAmount ? convertedPrefilled : "100");
20264
20468
  setView("amount");
20265
20469
  };
20266
20470
  const handleAmountChange = (value) => {
@@ -20358,7 +20562,7 @@ function BankTransfer({
20358
20562
  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
20359
20563
  "button",
20360
20564
  {
20361
- onClick: () => handleProviderClick(provider),
20565
+ onClick: () => void handleProviderClick(provider),
20362
20566
  onMouseEnter: () => !disabled && setHoveredId(provider.service_provider),
20363
20567
  onMouseLeave: () => setHoveredId(null),
20364
20568
  disabled,
@@ -20927,9 +21131,9 @@ function TransferCryptoButton({
20927
21131
  featuredTokens
20928
21132
  }) {
20929
21133
  const { colors: colors2, fonts, components } = useTheme();
20930
- const [isHovered, setIsHovered] = React62.useState(false);
20931
- const [isTouchDevice, setIsTouchDevice] = React62.useState(false);
20932
- React62.useEffect(() => {
21134
+ const [isHovered, setIsHovered] = React72.useState(false);
21135
+ const [isTouchDevice, setIsTouchDevice] = React72.useState(false);
21136
+ React72.useEffect(() => {
20933
21137
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
20934
21138
  }, []);
20935
21139
  const sortedTokens = featuredTokens ? [...featuredTokens].sort((a, b) => a.position - b.position) : [];
@@ -21009,9 +21213,9 @@ function DepositWithCardButton({
21009
21213
  paymentNetworks
21010
21214
  }) {
21011
21215
  const { colors: colors2, fonts, components } = useTheme();
21012
- const [isHovered, setIsHovered] = React72.useState(false);
21013
- const [isTouchDevice, setIsTouchDevice] = React72.useState(false);
21014
- React72.useEffect(() => {
21216
+ const [isHovered, setIsHovered] = React82.useState(false);
21217
+ const [isTouchDevice, setIsTouchDevice] = React82.useState(false);
21218
+ React82.useEffect(() => {
21015
21219
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
21016
21220
  }, []);
21017
21221
  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
@@ -21090,9 +21294,9 @@ function PayWithExchangeButton({
21090
21294
  loading = false
21091
21295
  }) {
21092
21296
  const { colors: colors2, fonts, components } = useTheme();
21093
- const [isHovered, setIsHovered] = React82.useState(false);
21094
- const [isTouchDevice, setIsTouchDevice] = React82.useState(false);
21095
- React82.useEffect(() => {
21297
+ const [isHovered, setIsHovered] = React92.useState(false);
21298
+ const [isTouchDevice, setIsTouchDevice] = React92.useState(false);
21299
+ React92.useEffect(() => {
21096
21300
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
21097
21301
  }, []);
21098
21302
  if (loading) {
@@ -21194,11 +21398,11 @@ var buttonVariants = cva(
21194
21398
  }
21195
21399
  }
21196
21400
  );
21197
- var Button = React92.forwardRef(
21401
+ var Button = React102.forwardRef(
21198
21402
  ({ className, variant, size: size4, asChild = false, style, ...props }, ref) => {
21199
21403
  const Comp = asChild ? Slot2 : "button";
21200
21404
  const { components, fonts } = useTheme();
21201
- const themeStyle = React92.useMemo(() => {
21405
+ const themeStyle = React102.useMemo(() => {
21202
21406
  const baseStyle = { ...style };
21203
21407
  if (variant === "default" || !variant) {
21204
21408
  baseStyle.backgroundColor = components.button.primaryBackground;
@@ -21233,9 +21437,9 @@ function ConnectExchangeButton({
21233
21437
  connectedExchange
21234
21438
  }) {
21235
21439
  const { colors: colors2, fonts, components } = useTheme();
21236
- const [isHovered, setIsHovered] = React102.useState(false);
21237
- const [isTouchDevice, setIsTouchDevice] = React102.useState(false);
21238
- React102.useEffect(() => {
21440
+ const [isHovered, setIsHovered] = React112.useState(false);
21441
+ const [isTouchDevice, setIsTouchDevice] = React112.useState(false);
21442
+ React112.useEffect(() => {
21239
21443
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
21240
21444
  }, []);
21241
21445
  const isConnected = connectedExchange != null;
@@ -21380,9 +21584,9 @@ function DepositTrackerButton({
21380
21584
  badge
21381
21585
  }) {
21382
21586
  const { colors: colors2, fonts, components } = useTheme();
21383
- const [isHovered, setIsHovered] = React112.useState(false);
21384
- const [isTouchDevice, setIsTouchDevice] = React112.useState(false);
21385
- React112.useEffect(() => {
21587
+ const [isHovered, setIsHovered] = React122.useState(false);
21588
+ const [isTouchDevice, setIsTouchDevice] = React122.useState(false);
21589
+ React122.useEffect(() => {
21386
21590
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
21387
21591
  }, []);
21388
21592
  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
@@ -21453,9 +21657,9 @@ function DepositTrackerButton({
21453
21657
  }
21454
21658
  function CashAppButton({ onClick, title, subtitle, iconUrl }) {
21455
21659
  const { colors: colors2, fonts, components } = useTheme();
21456
- const [isHovered, setIsHovered] = React122.useState(false);
21457
- const [isTouchDevice, setIsTouchDevice] = React122.useState(false);
21458
- React122.useEffect(() => {
21660
+ const [isHovered, setIsHovered] = React132.useState(false);
21661
+ const [isTouchDevice, setIsTouchDevice] = React132.useState(false);
21662
+ React132.useEffect(() => {
21459
21663
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
21460
21664
  }, []);
21461
21665
  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
@@ -21539,9 +21743,9 @@ function AppleLogo({ className, style }) {
21539
21743
  }
21540
21744
  function ApplePayButton({ onClick, title, subtitle }) {
21541
21745
  const { colors: colors2, fonts, components } = useTheme();
21542
- const [isHovered, setIsHovered] = React132.useState(false);
21543
- const [isTouchDevice, setIsTouchDevice] = React132.useState(false);
21544
- React132.useEffect(() => {
21746
+ const [isHovered, setIsHovered] = React142.useState(false);
21747
+ const [isTouchDevice, setIsTouchDevice] = React142.useState(false);
21748
+ React142.useEffect(() => {
21545
21749
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
21546
21750
  }, []);
21547
21751
  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
@@ -21603,9 +21807,9 @@ function BankTransferButton({
21603
21807
  comingSoon = false
21604
21808
  }) {
21605
21809
  const { colors: colors2, fonts, components } = useTheme();
21606
- const [isHovered, setIsHovered] = React142.useState(false);
21607
- const [isTouchDevice, setIsTouchDevice] = React142.useState(false);
21608
- React142.useEffect(() => {
21810
+ const [isHovered, setIsHovered] = React152.useState(false);
21811
+ const [isTouchDevice, setIsTouchDevice] = React152.useState(false);
21812
+ React152.useEffect(() => {
21609
21813
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
21610
21814
  }, []);
21611
21815
  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
@@ -21854,18 +22058,18 @@ async function detectConnectedBrowserWallet(chainType) {
21854
22058
  }
21855
22059
  function useDetectedBrowserWallet(opts = {}) {
21856
22060
  const { chainType, enabled = true, onDisconnect } = opts;
21857
- const [wallet, setWallet] = React152.useState(null);
21858
- const [isLoading, setIsLoading] = React152.useState(enabled);
21859
- const [eip6963ProviderCount, setEip6963ProviderCount] = React152.useState(0);
21860
- const onDisconnectRef = React152.useRef(onDisconnect);
22061
+ const [wallet, setWallet] = React162.useState(null);
22062
+ const [isLoading, setIsLoading] = React162.useState(enabled);
22063
+ const [eip6963ProviderCount, setEip6963ProviderCount] = React162.useState(0);
22064
+ const onDisconnectRef = React162.useRef(onDisconnect);
21861
22065
  onDisconnectRef.current = onDisconnect;
21862
- React152.useEffect(() => {
22066
+ React162.useEffect(() => {
21863
22067
  const store = getEip6963Store();
21864
22068
  if (!store) return;
21865
22069
  setEip6963ProviderCount(store.getProviders().length);
21866
22070
  return store.subscribe((providers) => setEip6963ProviderCount(providers.length));
21867
22071
  }, []);
21868
- React152.useEffect(() => {
22072
+ React162.useEffect(() => {
21869
22073
  if (!enabled) {
21870
22074
  setWallet(null);
21871
22075
  setIsLoading(false);
@@ -22006,7 +22210,7 @@ async function disconnectInjectedBrowserWallet(wallet) {
22006
22210
  );
22007
22211
  }
22008
22212
  function MetamaskIcon({ size: size4 = 24, className, variant = "color" }) {
22009
- const id = React162.useId();
22213
+ const id = React172.useId();
22010
22214
  if (variant === "light" || variant === "dark") {
22011
22215
  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
22012
22216
  "svg",
@@ -22127,7 +22331,7 @@ function MetamaskIcon({ size: size4 = 24, className, variant = "color" }) {
22127
22331
  );
22128
22332
  }
22129
22333
  function PhantomIcon({ size: size4 = 24, className, variant = "color" }) {
22130
- const id = React172.useId();
22334
+ const id = React182.useId();
22131
22335
  if (variant === "light") {
22132
22336
  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
22133
22337
  "svg",
@@ -22194,7 +22398,7 @@ function PhantomIcon({ size: size4 = 24, className, variant = "color" }) {
22194
22398
  );
22195
22399
  }
22196
22400
  function CoinbaseIcon({ size: size4 = 24, className, variant = "color" }) {
22197
- const id = React182.useId();
22401
+ const id = React192.useId();
22198
22402
  if (variant === "light") {
22199
22403
  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
22200
22404
  "svg",
@@ -22274,7 +22478,7 @@ function CoinbaseIcon({ size: size4 = 24, className, variant = "color" }) {
22274
22478
  );
22275
22479
  }
22276
22480
  function RabbyIcon({ size: size4 = 24, className, variant = "color" }) {
22277
- const id = React192.useId();
22481
+ const id = React202.useId();
22278
22482
  if (variant === "light") {
22279
22483
  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
22280
22484
  "svg",
@@ -22621,7 +22825,7 @@ function RabbyIcon({ size: size4 = 24, className, variant = "color" }) {
22621
22825
  );
22622
22826
  }
22623
22827
  function RainbowIcon({ size: size4 = 24, className, variant = "color" }) {
22624
- const id = React202.useId();
22828
+ const id = React212.useId();
22625
22829
  if (variant === "light") {
22626
22830
  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
22627
22831
  "svg",
@@ -23035,7 +23239,7 @@ function RainbowIcon({ size: size4 = 24, className, variant = "color" }) {
23035
23239
  );
23036
23240
  }
23037
23241
  function TrustIcon({ size: size4 = 24, className, variant = "color" }) {
23038
- const id = React212.useId();
23242
+ const id = React222.useId();
23039
23243
  if (variant === "light") {
23040
23244
  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
23041
23245
  "svg",
@@ -23118,7 +23322,7 @@ function TrustIcon({ size: size4 = 24, className, variant = "color" }) {
23118
23322
  );
23119
23323
  }
23120
23324
  function OkxIcon({ size: size4 = 24, className, variant = "color" }) {
23121
- const id = React222.useId();
23325
+ const id = React232.useId();
23122
23326
  if (variant === "light") {
23123
23327
  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
23124
23328
  "svg",
@@ -23173,7 +23377,7 @@ function OkxIcon({ size: size4 = 24, className, variant = "color" }) {
23173
23377
  );
23174
23378
  }
23175
23379
  function GlowIcon({ size: size4 = 24, className, variant = "color" }) {
23176
- const id = React232.useId();
23380
+ const id = React242.useId();
23177
23381
  if (variant === "light") {
23178
23382
  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
23179
23383
  "svg",
@@ -23274,7 +23478,7 @@ function GlowIcon({ size: size4 = 24, className, variant = "color" }) {
23274
23478
  );
23275
23479
  }
23276
23480
  function BackpackIcon({ size: size4 = 24, className, variant = "color" }) {
23277
- const id = React242.useId();
23481
+ const id = React252.useId();
23278
23482
  if (variant === "light") {
23279
23483
  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
23280
23484
  "svg",
@@ -23347,7 +23551,7 @@ function BackpackIcon({ size: size4 = 24, className, variant = "color" }) {
23347
23551
  );
23348
23552
  }
23349
23553
  function SolflareIcon({ size: size4 = 24, className, variant = "color" }) {
23350
- const id = React252.useId();
23554
+ const id = React262.useId();
23351
23555
  if (variant === "light") {
23352
23556
  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
23353
23557
  "svg",
@@ -23414,7 +23618,7 @@ function SolflareIcon({ size: size4 = 24, className, variant = "color" }) {
23414
23618
  );
23415
23619
  }
23416
23620
  function EthereumIcon({ size: size4 = 24, className, variant = "color" }) {
23417
- const id = React262.useId();
23621
+ const id = React272.useId();
23418
23622
  if (variant === "light") {
23419
23623
  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
23420
23624
  "svg",
@@ -23538,7 +23742,7 @@ function EthereumIcon({ size: size4 = 24, className, variant = "color" }) {
23538
23742
  );
23539
23743
  }
23540
23744
  function SolanaIcon({ size: size4 = 24, className, variant = "color" }) {
23541
- const id = React272.useId();
23745
+ const id = React282.useId();
23542
23746
  if (variant === "light") {
23543
23747
  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
23544
23748
  "svg",
@@ -23783,19 +23987,19 @@ function BrowserWalletButton({
23783
23987
  subtitle = i18n2.depositModal.browserWallet.subtitle
23784
23988
  }) {
23785
23989
  const { colors: colors2, fonts, components } = useTheme();
23786
- const [isHovered, setIsHovered] = React282.useState(false);
23787
- const [isTouchDevice, setIsTouchDevice] = React282.useState(false);
23990
+ const [isHovered, setIsHovered] = React292.useState(false);
23991
+ const [isTouchDevice, setIsTouchDevice] = React292.useState(false);
23788
23992
  const { wallet, isLoading, setWallet } = useDetectedBrowserWallet({ chainType, onDisconnect });
23789
- const [isConnecting, setIsConnecting] = React282.useState(false);
23790
- const [balanceText, setBalanceText] = React282.useState(null);
23791
- const [isLoadingBalance, setIsLoadingBalance] = React282.useState(false);
23792
- const [isDisconnecting, setIsDisconnecting] = React282.useState(false);
23793
- const onDisconnectRef = React282.useRef(onDisconnect);
23993
+ const [isConnecting, setIsConnecting] = React292.useState(false);
23994
+ const [balanceText, setBalanceText] = React292.useState(null);
23995
+ const [isLoadingBalance, setIsLoadingBalance] = React292.useState(false);
23996
+ const [isDisconnecting, setIsDisconnecting] = React292.useState(false);
23997
+ const onDisconnectRef = React292.useRef(onDisconnect);
23794
23998
  onDisconnectRef.current = onDisconnect;
23795
- React282.useEffect(() => {
23999
+ React292.useEffect(() => {
23796
24000
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
23797
24001
  }, []);
23798
- React282.useEffect(() => {
24002
+ React292.useEffect(() => {
23799
24003
  if (!wallet || !publishableKey) {
23800
24004
  setBalanceText(null);
23801
24005
  return;
@@ -23922,7 +24126,7 @@ function BrowserWalletButton({
23922
24126
  border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
23923
24127
  };
23924
24128
  const sortedWallets = featuredWallets ? [...featuredWallets].sort((a, b) => a.position - b.position) : [];
23925
- const walletIconBlock = wallet ? WALLET_ICON_COMPONENTS[wallet.icon] ? React282.createElement(WALLET_ICON_COMPONENTS[wallet.icon], {
24129
+ const walletIconBlock = wallet ? WALLET_ICON_COMPONENTS[wallet.icon] ? React292.createElement(WALLET_ICON_COMPONENTS[wallet.icon], {
23926
24130
  size: 36,
23927
24131
  className: "uf-rounded-lg",
23928
24132
  variant: "color"
@@ -24073,9 +24277,9 @@ function StripeLinkButton({
24073
24277
  iconUrl
24074
24278
  }) {
24075
24279
  const { colors: colors2, fonts, components } = useTheme();
24076
- const [isHovered, setIsHovered] = React292.useState(false);
24077
- const [isTouchDevice, setIsTouchDevice] = React292.useState(false);
24078
- React292.useEffect(() => {
24280
+ const [isHovered, setIsHovered] = React302.useState(false);
24281
+ const [isTouchDevice, setIsTouchDevice] = React302.useState(false);
24282
+ React302.useEffect(() => {
24079
24283
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
24080
24284
  }, []);
24081
24285
  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
@@ -24561,6 +24765,8 @@ function PayWithStripeLink({
24561
24765
  destinationChainType,
24562
24766
  destinationChainId,
24563
24767
  destinationTokenAddress,
24768
+ countryCode,
24769
+ subdivisionCode,
24564
24770
  wallets: externalWallets,
24565
24771
  email: emailProp,
24566
24772
  iconUrl,
@@ -24955,7 +25161,9 @@ function PayWithStripeLink({
24955
25161
  {
24956
25162
  tokenAddress: destinationTokenAddress,
24957
25163
  chainId: destinationChainId,
24958
- chainType: destinationChainType
25164
+ chainType: destinationChainType,
25165
+ countryCode,
25166
+ subdivisionCode
24959
25167
  },
24960
25168
  publishableKey
24961
25169
  ).then((token) => {
@@ -24974,7 +25182,14 @@ function PayWithStripeLink({
24974
25182
  return () => {
24975
25183
  cancelled = true;
24976
25184
  };
24977
- }, [publishableKey, destinationTokenAddress, destinationChainId, destinationChainType]);
25185
+ }, [
25186
+ publishableKey,
25187
+ destinationTokenAddress,
25188
+ destinationChainId,
25189
+ destinationChainType,
25190
+ countryCode,
25191
+ subdivisionCode
25192
+ ]);
24978
25193
  const destinationCurrency = stripeDestCurrency;
24979
25194
  const authInnerRef = (0, import_react24.useRef)(null);
24980
25195
  const paymentInnerRef = (0, import_react24.useRef)(null);
@@ -26687,10 +26902,16 @@ function PayWithStripeLink({
26687
26902
  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
26688
26903
  "div",
26689
26904
  {
26690
- className: "uf-flex uf-flex-col uf-py-4 uf-overflow-y-auto uf-max-h-[70vh]",
26905
+ className: "uf-flex uf-flex-col uf-py-4 uf-overflow-y-auto uf-overflow-x-hidden uf-max-h-[70vh]",
26691
26906
  style: { backgroundColor: colors2.background },
26692
26907
  children: [
26693
- /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { ref: paymentMountRef, className: "uf-w-full uf-flex-1 uf-overflow-y-auto" }),
26908
+ /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
26909
+ "div",
26910
+ {
26911
+ ref: paymentMountRef,
26912
+ className: "uf-w-full uf-flex-1 uf-overflow-y-auto uf-overflow-x-hidden"
26913
+ }
26914
+ ),
26694
26915
  !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
26916
  error && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
26696
26917
  "div",
@@ -26708,7 +26929,7 @@ function PayWithStripeLink({
26708
26929
  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
26709
26930
  "div",
26710
26931
  {
26711
- className: "uf-flex uf-flex-col uf-py-4 uf-overflow-y-auto uf-max-h-[70vh]",
26932
+ className: "uf-flex uf-flex-col uf-py-4 uf-overflow-y-auto uf-overflow-x-hidden uf-max-h-[70vh]",
26712
26933
  style: { backgroundColor: colors2.background },
26713
26934
  children: [
26714
26935
  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 +28039,30 @@ function PayWithStripeLink({
27818
28039
  }
27819
28040
  function useProjectConfig({
27820
28041
  publishableKey,
27821
- enabled = true
28042
+ enabled = true,
28043
+ countryCode,
28044
+ subdivisionCode
27822
28045
  }) {
27823
- const { data: projectConfig, isLoading } = (0, import_react_query10.useQuery)({
27824
- queryKey: ["unifold", "projectConfig", publishableKey],
27825
- queryFn: () => getProjectConfig(publishableKey),
28046
+ const {
28047
+ data: projectConfig,
28048
+ isLoading,
28049
+ error
28050
+ } = (0, import_react_query11.useQuery)({
28051
+ // Country is part of the key so a region change refetches the region-aware
28052
+ // config. Omitted when undefined so callers that don't pass a country keep
28053
+ // sharing the base cache entry.
28054
+ queryKey: countryCode ? ["unifold", "projectConfig", publishableKey, countryCode, subdivisionCode ?? null] : ["unifold", "projectConfig", publishableKey],
28055
+ queryFn: () => getProjectConfig(publishableKey, countryCode ? { countryCode, subdivisionCode } : void 0),
27826
28056
  enabled,
28057
+ // Keep the previous (e.g. no-country) config visible while the region-aware
28058
+ // config refetches after the country resolves, so unrelated config-driven
28059
+ // UI doesn't flash back to defaults.
28060
+ placeholderData: import_react_query11.keepPreviousData,
27827
28061
  staleTime: 1e3 * 60 * 30,
27828
28062
  refetchOnMount: true,
27829
28063
  refetchOnWindowFocus: true
27830
28064
  });
27831
- return { projectConfig, isLoading };
28065
+ return { projectConfig, isLoading, error: error ?? null };
27832
28066
  }
27833
28067
  function useSupportedDepositTokens(publishableKey, options) {
27834
28068
  const hasDestination = options?.destination_token_address && options?.destination_chain_id && options?.destination_chain_type;
@@ -27841,7 +28075,7 @@ function useSupportedDepositTokens(publishableKey, options) {
27841
28075
  ...options?.product_type ? { product_type: options.product_type } : {}
27842
28076
  };
27843
28077
  const hasFilteredOptions = Object.keys(filteredOptions).length > 0;
27844
- return (0, import_react_query11.useQuery)({
28078
+ return (0, import_react_query12.useQuery)({
27845
28079
  queryKey: [
27846
28080
  "unifold",
27847
28081
  "supportedDepositTokens",
@@ -27865,7 +28099,7 @@ function useIntegrationTransferDefaultToken({
27865
28099
  publishableKey,
27866
28100
  enabled = true
27867
28101
  }) {
27868
- return (0, import_react_query12.useQuery)({
28102
+ return (0, import_react_query13.useQuery)({
27869
28103
  queryKey: [
27870
28104
  "unifold",
27871
28105
  "integrationTransferDefaultToken",
@@ -27931,7 +28165,8 @@ function CoinbaseConnect({
27931
28165
  defaultSourceChainType,
27932
28166
  defaultSourceChainId,
27933
28167
  defaultSourceTokenAddress,
27934
- defaultSourceSymbol
28168
+ defaultSourceSymbol,
28169
+ prefilledAmountUsd
27935
28170
  }) {
27936
28171
  const { colors: colors2, fonts, components } = useTheme();
27937
28172
  const { projectConfig } = useProjectConfig({ publishableKey });
@@ -28254,7 +28489,8 @@ function CoinbaseConnect({
28254
28489
  };
28255
28490
  const handleSelectAsset = (asset) => {
28256
28491
  setSelectedAsset(asset);
28257
- setSendAmount("");
28492
+ const cleanedPrefilled = prefilledAmountUsd?.replace(/[^0-9.]/g, "") ?? "";
28493
+ setSendAmount(cleanedPrefilled);
28258
28494
  transitionTo("enter_amount");
28259
28495
  };
28260
28496
  const handleCreateTransfer = async () => {
@@ -29842,7 +30078,7 @@ function useExchanges({
29842
30078
  publishableKey,
29843
30079
  enabled = true
29844
30080
  }) {
29845
- const { data: exchanges = [], isLoading } = (0, import_react_query13.useQuery)({
30081
+ const { data: exchanges = [], isLoading } = (0, import_react_query14.useQuery)({
29846
30082
  queryKey: ["unifold", "exchanges", publishableKey],
29847
30083
  queryFn: () => getExchanges(void 0, publishableKey).then((res) => res.data),
29848
30084
  enabled,
@@ -29856,7 +30092,7 @@ function useApplePayProviders({
29856
30092
  publishableKey,
29857
30093
  enabled = true
29858
30094
  }) {
29859
- const { data: providers, isLoading } = (0, import_react_query14.useQuery)({
30095
+ const { data: providers, isLoading } = (0, import_react_query15.useQuery)({
29860
30096
  queryKey: ["unifold", "applePayProviders", publishableKey],
29861
30097
  queryFn: () => getApplePayProviders(publishableKey),
29862
30098
  enabled,
@@ -29867,44 +30103,28 @@ function useApplePayProviders({
29867
30103
  return { providers, isLoading };
29868
30104
  }
29869
30105
  function useAllowedCountry(publishableKey) {
30106
+ const { userIpInfo, isLoading: isIpLoading, error: ipError } = useUserIp2();
29870
30107
  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,
30108
+ projectConfig,
29887
30109
  isLoading: isConfigLoading,
29888
30110
  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
30111
+ } = useProjectConfig({
30112
+ publishableKey,
30113
+ // Wait for the IP so we issue a single country-aware config request rather
30114
+ // than a country-less fetch followed by a country-aware refetch. Shares the
30115
+ // query key with DepositModal's useProjectConfig, so they dedupe.
30116
+ enabled: !isIpLoading,
30117
+ countryCode: userIpInfo?.alpha2,
30118
+ subdivisionCode: userIpInfo?.subdivisionCode ?? void 0
29899
30119
  });
29900
30120
  const isLoading = isIpLoading || isConfigLoading;
29901
30121
  const error = ipError || configError || null;
30122
+ const userSubdivision = userIpInfo?.subdivisionCode || userIpInfo?.state || "";
29902
30123
  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 || "";
30124
+ if (userIpInfo && projectConfig) {
30125
+ const blockedCodes = projectConfig.blocked_country_codes || [];
30126
+ const blockedSubdivisions = projectConfig.blocked_country_subdivisions || [];
30127
+ const userCountryUpper = userIpInfo.alpha2.toUpperCase();
29908
30128
  const userSubdivisionUpper = userSubdivision.toUpperCase();
29909
30129
  const isCountryBlocked = blockedCodes.some((code) => code.toUpperCase() === userCountryUpper);
29910
30130
  const isSubdivisionBlocked = blockedSubdivisions.some((entry) => {
@@ -29913,12 +30133,11 @@ function useAllowedCountry(publishableKey) {
29913
30133
  });
29914
30134
  isAllowed = !isCountryBlocked && !isSubdivisionBlocked;
29915
30135
  }
29916
- const subdivisionCode = ipData?.subdivision_code || ipData?.state || "" || null;
29917
30136
  return {
29918
30137
  isAllowed,
29919
- alpha2: ipData?.alpha2 ?? null,
29920
- country: ipData?.country ?? null,
29921
- subdivisionCode,
30138
+ alpha2: userIpInfo?.alpha2 ?? null,
30139
+ country: userIpInfo?.country ?? null,
30140
+ subdivisionCode: userSubdivision || null,
29922
30141
  isLoading,
29923
30142
  error
29924
30143
  };
@@ -29982,7 +30201,7 @@ function ThemeStyleInjector({
29982
30201
  className
29983
30202
  }) {
29984
30203
  const { colors: colors2, fonts, mode } = useTheme();
29985
- const cssVars = React312.useMemo(() => {
30204
+ const cssVars = React322.useMemo(() => {
29986
30205
  const hexToHSL = (hex) => {
29987
30206
  hex = hex.replace("#", "");
29988
30207
  const r2 = parseInt(hex.slice(0, 2), 16) / 255;
@@ -30042,7 +30261,7 @@ function ThemeStyleInjector({
30042
30261
  ...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
30043
30262
  };
30044
30263
  }, [colors2, fonts.regular]);
30045
- React312.useEffect(() => {
30264
+ React322.useEffect(() => {
30046
30265
  if (typeof document === "undefined") return;
30047
30266
  if (fonts.regular) {
30048
30267
  document.documentElement.style.setProperty("--uf-font-family", fonts.regular);
@@ -31187,14 +31406,14 @@ function useCopyAddress() {
31187
31406
  return { copied, handleCopy };
31188
31407
  }
31189
31408
  var TooltipProvider2 = Provider;
31190
- var TooltipContext = React322.createContext({
31409
+ var TooltipContext = React332.createContext({
31191
31410
  open: false,
31192
31411
  onOpenChange: () => {
31193
31412
  }
31194
31413
  });
31195
- var TooltipTrigger2 = React322.forwardRef(({ onClick, ...props }, ref) => {
31196
- const { open, onOpenChange } = React322.useContext(TooltipContext);
31197
- const handleClick = React322.useCallback(
31414
+ var TooltipTrigger2 = React332.forwardRef(({ onClick, ...props }, ref) => {
31415
+ const { open, onOpenChange } = React332.useContext(TooltipContext);
31416
+ const handleClick = React332.useCallback(
31198
31417
  (e) => {
31199
31418
  onOpenChange(!open);
31200
31419
  onClick?.(e);
@@ -31204,7 +31423,7 @@ var TooltipTrigger2 = React322.forwardRef(({ onClick, ...props }, ref) => {
31204
31423
  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Trigger, { ref, onClick: handleClick, ...props });
31205
31424
  });
31206
31425
  TooltipTrigger2.displayName = Trigger.displayName;
31207
- var TooltipContent2 = React322.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
31426
+ var TooltipContent2 = React332.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
31208
31427
  const { themeClass, colors: colors2 } = useTheme();
31209
31428
  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Portal3, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
31210
31429
  Content22,
@@ -31314,6 +31533,7 @@ function TransferCryptoSingleInput({
31314
31533
  onDepositError,
31315
31534
  wallets: externalWallets,
31316
31535
  onSourceTokenChange,
31536
+ prefilledAmountUsd,
31317
31537
  checkoutQuote,
31318
31538
  isCheckoutQuoteLoading = false,
31319
31539
  persistCheckingIndicator = false,
@@ -31457,6 +31677,22 @@ function TransferCryptoSingleInput({
31457
31677
  const maxSlippage = currentChainFromBackend?.max_slippage_percent ?? 0.25;
31458
31678
  const processingTime = currentChainFromBackend?.estimated_processing_time ?? null;
31459
31679
  const minDepositUsd = currentChainFromBackend?.minimum_deposit_amount_usd ?? 3;
31680
+ const parsedPrefilledUsd = (0, import_react27.useMemo)(() => {
31681
+ const value = parseFloat(prefilledAmountUsd ?? "");
31682
+ return Number.isFinite(value) && value > 0 ? value : null;
31683
+ }, [prefilledAmountUsd]);
31684
+ const effectivePrefilledUsd = (0, import_react27.useMemo)(() => {
31685
+ if (parsedPrefilledUsd === null) return null;
31686
+ return Math.max(parsedPrefilledUsd, minDepositUsd);
31687
+ }, [parsedPrefilledUsd, minDepositUsd]);
31688
+ const prefillDisplay = (0, import_react27.useMemo)(() => {
31689
+ if (effectivePrefilledUsd === null) return null;
31690
+ const usdLabel = `$${effectivePrefilledUsd.toFixed(2)}`;
31691
+ if (selectedToken?.is_stablecoin) {
31692
+ return `${effectivePrefilledUsd.toFixed(2)} ${selectedToken.symbol} (${usdLabel})`;
31693
+ }
31694
+ return `${usdLabel} USD`;
31695
+ }, [effectivePrefilledUsd, selectedToken]);
31460
31696
  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TooltipProvider2, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
31461
31697
  "div",
31462
31698
  {
@@ -31583,7 +31819,7 @@ function TransferCryptoSingleInput({
31583
31819
  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { children: "Retrying automatically every 5 seconds..." })
31584
31820
  ] })
31585
31821
  ] }),
31586
- (checkoutQuote || isCheckoutQuoteLoading) && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
31822
+ (checkoutQuote || isCheckoutQuoteLoading || prefillDisplay) && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
31587
31823
  "div",
31588
31824
  {
31589
31825
  className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
@@ -31627,6 +31863,13 @@ function TransferCryptoSingleInput({
31627
31863
  )
31628
31864
  ]
31629
31865
  }
31866
+ ) : prefillDisplay ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
31867
+ "span",
31868
+ {
31869
+ className: "uf-text-sm uf-font-semibold",
31870
+ style: { color: components.card.titleColor, fontFamily: fonts.semibold },
31871
+ children: prefillDisplay
31872
+ }
31630
31873
  ) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
31631
31874
  "div",
31632
31875
  {
@@ -31956,7 +32199,7 @@ function TransferCryptoSingleInput({
31956
32199
  }
31957
32200
  var Select2 = Root23;
31958
32201
  var SelectValue2 = Value;
31959
- var SelectTrigger2 = React332.forwardRef(({ className, style, children, ...props }, ref) => {
32202
+ var SelectTrigger2 = React342.forwardRef(({ className, style, children, ...props }, ref) => {
31960
32203
  const { components } = useTheme();
31961
32204
  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
31962
32205
  Trigger2,
@@ -31980,7 +32223,7 @@ var SelectTrigger2 = React332.forwardRef(({ className, style, children, ...props
31980
32223
  );
31981
32224
  });
31982
32225
  SelectTrigger2.displayName = Trigger2.displayName;
31983
- var SelectScrollUpButton2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
32226
+ var SelectScrollUpButton2 = React342.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
31984
32227
  ScrollUpButton,
31985
32228
  {
31986
32229
  ref,
@@ -31990,7 +32233,7 @@ var SelectScrollUpButton2 = React332.forwardRef(({ className, ...props }, ref) =
31990
32233
  }
31991
32234
  ));
31992
32235
  SelectScrollUpButton2.displayName = ScrollUpButton.displayName;
31993
- var SelectScrollDownButton2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
32236
+ var SelectScrollDownButton2 = React342.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
31994
32237
  ScrollDownButton,
31995
32238
  {
31996
32239
  ref,
@@ -32000,7 +32243,7 @@ var SelectScrollDownButton2 = React332.forwardRef(({ className, ...props }, ref)
32000
32243
  }
32001
32244
  ));
32002
32245
  SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
32003
- var SelectContent2 = React332.forwardRef(({ className, style, children, position = "popper", ...props }, ref) => {
32246
+ var SelectContent2 = React342.forwardRef(({ className, style, children, position = "popper", ...props }, ref) => {
32004
32247
  const { themeClass, colors: colors2, components } = useTheme();
32005
32248
  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Portal4, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
32006
32249
  Content23,
@@ -32038,7 +32281,7 @@ var SelectContent2 = React332.forwardRef(({ className, style, children, position
32038
32281
  ) });
32039
32282
  });
32040
32283
  SelectContent2.displayName = Content23.displayName;
32041
- var SelectLabel2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
32284
+ var SelectLabel2 = React342.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
32042
32285
  Label,
32043
32286
  {
32044
32287
  ref,
@@ -32047,7 +32290,7 @@ var SelectLabel2 = React332.forwardRef(({ className, ...props }, ref) => /* @__P
32047
32290
  }
32048
32291
  ));
32049
32292
  SelectLabel2.displayName = Label.displayName;
32050
- var SelectItem2 = React332.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
32293
+ var SelectItem2 = React342.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
32051
32294
  Item,
32052
32295
  {
32053
32296
  ref,
@@ -32063,7 +32306,7 @@ var SelectItem2 = React332.forwardRef(({ className, children, ...props }, ref) =
32063
32306
  }
32064
32307
  ));
32065
32308
  SelectItem2.displayName = Item.displayName;
32066
- var SelectSeparator2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
32309
+ var SelectSeparator2 = React342.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
32067
32310
  Separator,
32068
32311
  {
32069
32312
  ref,
@@ -32091,6 +32334,7 @@ function TransferCryptoDoubleInput({
32091
32334
  defaultSourceChainId,
32092
32335
  defaultSourceTokenAddress,
32093
32336
  defaultSourceSymbol,
32337
+ prefilledAmountUsd,
32094
32338
  depositConfirmationMode = "auto_ui",
32095
32339
  onExecutionsChange,
32096
32340
  onDepositSuccess,
@@ -32215,6 +32459,22 @@ function TransferCryptoDoubleInput({
32215
32459
  const maxSlippage = currentChainFromBackend?.max_slippage_percent ?? 0.25;
32216
32460
  const processingTime = currentChainFromBackend?.estimated_processing_time ?? null;
32217
32461
  const minDepositUsd = currentChainFromBackend?.minimum_deposit_amount_usd ?? 3;
32462
+ const parsedPrefilledUsd = (0, import_react32.useMemo)(() => {
32463
+ const value = parseFloat(prefilledAmountUsd ?? "");
32464
+ return Number.isFinite(value) && value > 0 ? value : null;
32465
+ }, [prefilledAmountUsd]);
32466
+ const effectivePrefilledUsd = (0, import_react32.useMemo)(() => {
32467
+ if (parsedPrefilledUsd === null) return null;
32468
+ return Math.max(parsedPrefilledUsd, minDepositUsd);
32469
+ }, [parsedPrefilledUsd, minDepositUsd]);
32470
+ const prefillDisplay = (0, import_react32.useMemo)(() => {
32471
+ if (effectivePrefilledUsd === null) return null;
32472
+ const usdLabel = `$${effectivePrefilledUsd.toFixed(2)}`;
32473
+ if (selectedToken?.is_stablecoin) {
32474
+ return `${effectivePrefilledUsd.toFixed(2)} ${selectedToken.symbol} (${usdLabel})`;
32475
+ }
32476
+ return `${usdLabel} USD`;
32477
+ }, [effectivePrefilledUsd, selectedToken]);
32218
32478
  const renderTokenItem = (tokenData) => {
32219
32479
  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
32220
32480
  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
@@ -32395,6 +32655,35 @@ function TransferCryptoDoubleInput({
32395
32655
  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { children: "Retrying automatically every 5 seconds..." })
32396
32656
  ] })
32397
32657
  ] }),
32658
+ prefillDisplay && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
32659
+ "div",
32660
+ {
32661
+ className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
32662
+ style: {
32663
+ backgroundColor: components.card.backgroundColor,
32664
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
32665
+ borderRadius: components.card.borderRadius
32666
+ },
32667
+ children: [
32668
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
32669
+ "span",
32670
+ {
32671
+ className: "uf-text-xs",
32672
+ style: { color: components.card.subtitleColor, fontFamily: fonts.regular },
32673
+ children: "You send"
32674
+ }
32675
+ ),
32676
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
32677
+ "span",
32678
+ {
32679
+ className: "uf-text-sm uf-font-semibold",
32680
+ style: { color: components.card.titleColor, fontFamily: fonts.semibold },
32681
+ children: prefillDisplay
32682
+ }
32683
+ )
32684
+ ]
32685
+ }
32686
+ ),
32398
32687
  /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
32399
32688
  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
32400
32689
  "div",
@@ -33982,7 +34271,7 @@ function WalletConnect({
33982
34271
  amountQuickSelect = "percentage",
33983
34272
  onWalletDisconnect,
33984
34273
  onWalletConnected,
33985
- prefillAmountUsd,
34274
+ prefilledAmountUsd,
33986
34275
  checkoutAmountUsd,
33987
34276
  checkoutReceivedUsd,
33988
34277
  onNewDeposit,
@@ -34004,28 +34293,28 @@ function WalletConnect({
34004
34293
  onExecutionsChange
34005
34294
  }) {
34006
34295
  const { colors: colors2, fonts, components, mode } = useTheme();
34007
- const walletProvidedAtMount = React342.useRef(!!initialWalletInfo && !!initialDepositWallet);
34008
- const [activeWalletInfo, setActiveWalletInfo] = React342.useState(
34296
+ const walletProvidedAtMount = React352.useRef(!!initialWalletInfo && !!initialDepositWallet);
34297
+ const [activeWalletInfo, setActiveWalletInfo] = React352.useState(
34009
34298
  initialWalletInfo ?? null
34010
34299
  );
34011
- const [activeDepositWallet, setActiveDepositWallet] = React342.useState(
34300
+ const [activeDepositWallet, setActiveDepositWallet] = React352.useState(
34012
34301
  initialDepositWallet ?? null
34013
34302
  );
34014
34303
  const initialView = initialWalletInfo && initialDepositWallet ? "select_token" : "select_wallet";
34015
- const [view, setView] = React342.useState(initialView);
34016
- const [isTransitioning, setIsTransitioning] = React342.useState(false);
34017
- const viewRef = React342.useRef(initialView);
34304
+ const [view, setView] = React352.useState(initialView);
34305
+ const [isTransitioning, setIsTransitioning] = React352.useState(false);
34306
+ const viewRef = React352.useRef(initialView);
34018
34307
  const standalone = !canGoBack && !walletProvidedAtMount.current;
34019
34308
  const { wallet: detectedWallet, isLoading: detectingWallet } = useDetectedBrowserWallet({
34020
34309
  enabled: standalone
34021
34310
  });
34022
- const [autoResolved, setAutoResolved] = React342.useState(false);
34023
- const [selectedWalletDef, setSelectedWalletDef] = React342.useState(null);
34024
- const [connectingNetwork, setConnectingNetwork] = React342.useState(null);
34025
- const [walletError, setWalletError] = React342.useState(null);
34026
- const [isWalletConnecting, setIsWalletConnecting] = React342.useState(false);
34027
- const [eip6963ProviderCount, setEip6963ProviderCount] = React342.useState(0);
34028
- React342.useEffect(() => {
34311
+ const [autoResolved, setAutoResolved] = React352.useState(false);
34312
+ const [selectedWalletDef, setSelectedWalletDef] = React352.useState(null);
34313
+ const [connectingNetwork, setConnectingNetwork] = React352.useState(null);
34314
+ const [walletError, setWalletError] = React352.useState(null);
34315
+ const [isWalletConnecting, setIsWalletConnecting] = React352.useState(false);
34316
+ const [eip6963ProviderCount, setEip6963ProviderCount] = React352.useState(0);
34317
+ React352.useEffect(() => {
34029
34318
  const store = getEip6963Store();
34030
34319
  if (!store) return;
34031
34320
  setEip6963ProviderCount(store.getProviders().length);
@@ -34034,7 +34323,7 @@ function WalletConnect({
34034
34323
  });
34035
34324
  }, []);
34036
34325
  const { wallets: backendWallets } = useExternalWallets({ publishableKey });
34037
- const walletDefinitions = React342.useMemo(
34326
+ const walletDefinitions = React352.useMemo(
34038
34327
  () => backendWallets.length > 0 ? backendWallets.map((w) => ({
34039
34328
  id: w.id,
34040
34329
  name: w.name,
@@ -34045,32 +34334,32 @@ function WalletConnect({
34045
34334
  })) : FALLBACK_WALLET_DEFINITIONS,
34046
34335
  [backendWallets]
34047
34336
  );
34048
- const [recentWalletId, setRecentWalletIdState] = React342.useState(getLastOpenedWallet);
34049
- React342.useEffect(() => {
34337
+ const [recentWalletId, setRecentWalletIdState] = React352.useState(getLastOpenedWallet);
34338
+ React352.useEffect(() => {
34050
34339
  if (view === "select_wallet") {
34051
34340
  setRecentWalletIdState(getLastOpenedWallet());
34052
34341
  }
34053
34342
  }, [view]);
34054
- const availableWallets = React342.useMemo(
34343
+ const availableWallets = React352.useMemo(
34055
34344
  () => detectAvailableWallets(walletDefinitions, recentWalletId),
34056
34345
  [walletDefinitions, eip6963ProviderCount, recentWalletId]
34057
34346
  );
34058
- const [isMobile, setIsMobile] = React342.useState(false);
34059
- React342.useEffect(() => {
34347
+ const [isMobile, setIsMobile] = React352.useState(false);
34348
+ React352.useEffect(() => {
34060
34349
  setIsMobile(isMobileDevice());
34061
34350
  }, []);
34062
- const mobileDepositAddresses = React342.useMemo(
34351
+ const mobileDepositAddresses = React352.useMemo(
34063
34352
  () => (depositWallets ?? []).map((w) => ({ chain_type: w.chain_type, address: w.address })),
34064
34353
  [depositWallets]
34065
34354
  );
34066
- const mobileDepositWalletIds = React342.useMemo(
34355
+ const mobileDepositWalletIds = React352.useMemo(
34067
34356
  () => (depositWallets ?? []).filter((w) => w.chain_type === "ethereum" || w.chain_type === "solana").map((w) => w.id),
34068
34357
  [depositWallets]
34069
34358
  );
34070
- const [mobileRedirect, setMobileRedirect] = React342.useState(null);
34071
- const [pendingMobileWallet, setPendingMobileWallet] = React342.useState(null);
34072
- const [awaitingMobileDeposit, setAwaitingMobileDeposit] = React342.useState(false);
34073
- React342.useEffect(() => {
34359
+ const [mobileRedirect, setMobileRedirect] = React352.useState(null);
34360
+ const [pendingMobileWallet, setPendingMobileWallet] = React352.useState(null);
34361
+ const [awaitingMobileDeposit, setAwaitingMobileDeposit] = React352.useState(false);
34362
+ React352.useEffect(() => {
34074
34363
  if (!standalone || autoResolved || detectingWallet) return;
34075
34364
  if (!detectedWallet) {
34076
34365
  setAutoResolved(true);
@@ -34096,32 +34385,36 @@ function WalletConnect({
34096
34385
  depositWallets,
34097
34386
  depositWalletsLoading
34098
34387
  ]);
34099
- React342.useEffect(() => {
34388
+ React352.useEffect(() => {
34100
34389
  if (!standalone || autoResolved) return;
34101
34390
  const t13 = setTimeout(() => setAutoResolved(true), 5e3);
34102
34391
  return () => clearTimeout(t13);
34103
34392
  }, [standalone, autoResolved]);
34104
- const [balances, setBalances] = React342.useState([]);
34105
- const [isLoading, setIsLoading] = React342.useState(false);
34106
- const [selectedBalance, setSelectedBalance] = React342.useState(null);
34107
- const [totalBalanceUsd, setTotalBalanceUsd] = React342.useState(null);
34108
- const [error, setError] = React342.useState(null);
34109
- const [isDisconnectingWallet, setIsDisconnectingWallet] = React342.useState(false);
34110
- const [amountUsd, setAmountUsd] = React342.useState(prefillAmountUsd ?? "");
34111
- const [isConfirming, setIsConfirming] = React342.useState(false);
34112
- const [hasSignedTransaction, setHasSignedTransaction] = React342.useState(false);
34113
- const [tokenChainDetails, setTokenChainDetails] = React342.useState(null);
34114
- const [loadingTokenDetails, setLoadingTokenDetails] = React342.useState(false);
34115
- const [showTransactionDetails, setShowTransactionDetails] = React342.useState(false);
34116
- const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React342.useState(null);
34393
+ const [balances, setBalances] = React352.useState([]);
34394
+ const [isLoading, setIsLoading] = React352.useState(false);
34395
+ const [selectedBalance, setSelectedBalance] = React352.useState(null);
34396
+ const [totalBalanceUsd, setTotalBalanceUsd] = React352.useState(null);
34397
+ const [error, setError] = React352.useState(null);
34398
+ const [isDisconnectingWallet, setIsDisconnectingWallet] = React352.useState(false);
34399
+ const [amountUsd, setAmountUsd] = React352.useState(prefilledAmountUsd ?? "");
34400
+ const [isConfirming, setIsConfirming] = React352.useState(false);
34401
+ const [hasSignedTransaction, setHasSignedTransaction] = React352.useState(false);
34402
+ const [tokenChainDetails, setTokenChainDetails] = React352.useState(null);
34403
+ const [loadingTokenDetails, setLoadingTokenDetails] = React352.useState(false);
34404
+ const [showTransactionDetails, setShowTransactionDetails] = React352.useState(false);
34405
+ const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React352.useState(null);
34117
34406
  const walletInfo = activeWalletInfo;
34118
34407
  const depositWallet = activeDepositWallet;
34119
34408
  const hasWallet = !!activeWalletInfo && !!activeDepositWallet;
34409
+ React352.useEffect(() => {
34410
+ const cleanedPrefilled = prefilledAmountUsd?.replace(/[^0-9.]/g, "") ?? "";
34411
+ setAmountUsd(cleanedPrefilled);
34412
+ }, [prefilledAmountUsd]);
34120
34413
  const chainType = activeDepositWallet?.chain_type ?? "ethereum";
34121
34414
  const recipientAddress = activeDepositWallet?.address ?? "";
34122
34415
  const isCheckoutMode = !!checkoutAmountUsd;
34123
34416
  const supportedChainType = chainType === "algorand" || chainType === "xrpl" || chainType === "cardano" || chainType === "n1" ? "ethereum" : chainType;
34124
- const transitionTo = React342.useCallback((nextView) => {
34417
+ const transitionTo = React352.useCallback((nextView) => {
34125
34418
  if (nextView === viewRef.current) return;
34126
34419
  setIsTransitioning(true);
34127
34420
  setTimeout(() => {
@@ -34186,7 +34479,7 @@ function WalletConnect({
34186
34479
  if (!selectedWalletDef) return;
34187
34480
  handleConnectWallet(selectedWalletDef, network);
34188
34481
  };
34189
- React342.useEffect(() => {
34482
+ React352.useEffect(() => {
34190
34483
  if (!pendingMobileWallet) return;
34191
34484
  if (mobileDepositAddresses.length > 0) {
34192
34485
  const wallet = pendingMobileWallet;
@@ -34350,7 +34643,7 @@ function WalletConnect({
34350
34643
  publishableKey,
34351
34644
  enabled: !!activeWalletInfo && !!recipientAddress
34352
34645
  });
34353
- const effectiveDestinationAmount = React342.useMemo(() => {
34646
+ const effectiveDestinationAmount = React352.useMemo(() => {
34354
34647
  if (!checkoutRemainingBaseUnits || checkoutRemainingBaseUnits === "0") return "0";
34355
34648
  if (!checkoutAmountUsd) return checkoutRemainingBaseUnits;
34356
34649
  const remaining = BigInt(checkoutRemainingBaseUnits);
@@ -34378,7 +34671,7 @@ function WalletConnect({
34378
34671
  stablecoinParity,
34379
34672
  enabled: isCheckoutMode && !!selectedToken && !!checkoutDestination && effectiveDestinationAmount !== "0"
34380
34673
  });
34381
- const activeCheckoutQuote = React342.useMemo(() => {
34674
+ const activeCheckoutQuote = React352.useMemo(() => {
34382
34675
  if (!isCheckoutMode) return null;
34383
34676
  if (walletCheckoutQuote)
34384
34677
  return {
@@ -34408,10 +34701,10 @@ function WalletConnect({
34408
34701
  onDepositSuccess,
34409
34702
  onDepositError
34410
34703
  });
34411
- React342.useEffect(() => {
34704
+ React352.useEffect(() => {
34412
34705
  onExecutionsChange?.(depositExecutions);
34413
34706
  }, [depositExecutions, onExecutionsChange]);
34414
- const latestDepositExecution = React342.useMemo(() => {
34707
+ const latestDepositExecution = React352.useMemo(() => {
34415
34708
  if (depositExecutions.length === 0) return null;
34416
34709
  return [...depositExecutions].sort((a, b) => {
34417
34710
  const ta = a.created_at ? new Date(a.created_at).getTime() : 0;
@@ -34419,21 +34712,21 @@ function WalletConnect({
34419
34712
  return tb - ta;
34420
34713
  })[0];
34421
34714
  }, [depositExecutions]);
34422
- React342.useEffect(() => {
34715
+ React352.useEffect(() => {
34423
34716
  if (awaitingMobileDeposit && latestDepositExecution && (viewRef.current === "mobile_redirect" || viewRef.current === "connecting")) {
34424
34717
  transitionTo("mobile_deposit_status");
34425
34718
  }
34426
34719
  }, [awaitingMobileDeposit, latestDepositExecution, transitionTo]);
34427
- React342.useEffect(() => {
34428
- if (!prefillAmountUsd || !tokenChainDetails || view !== "enter_amount") return;
34720
+ React352.useEffect(() => {
34721
+ if (!isCheckoutMode || !tokenChainDetails || view !== "enter_amount") return;
34429
34722
  const minDeposit = tokenChainDetails.minimum_deposit_amount_usd || 0;
34430
34723
  const currentAmount = parseFloat(amountUsd) || 0;
34431
34724
  if (currentAmount > 0 && currentAmount < minDeposit) setAmountUsd(minDeposit.toFixed(2));
34432
- }, [tokenChainDetails, view, prefillAmountUsd]);
34433
- React342.useEffect(() => {
34725
+ }, [isCheckoutMode, tokenChainDetails, view, amountUsd]);
34726
+ React352.useEffect(() => {
34434
34727
  if (view === "review") setShowTransactionDetails(false);
34435
34728
  }, [view]);
34436
- React342.useEffect(() => {
34729
+ React352.useEffect(() => {
34437
34730
  if (view !== "enter_amount" && view !== "review" || !selectedBalance || !activeDepositWallet)
34438
34731
  return;
34439
34732
  let cancelled = false;
@@ -34470,7 +34763,7 @@ function WalletConnect({
34470
34763
  cancelled = true;
34471
34764
  };
34472
34765
  }, [view, selectedBalance, publishableKey, activeDepositWallet]);
34473
- React342.useEffect(() => {
34766
+ React352.useEffect(() => {
34474
34767
  if (!activeWalletInfo || !activeDepositWallet) return;
34475
34768
  let cancelled = false;
34476
34769
  setIsLoading(true);
@@ -34535,21 +34828,21 @@ function WalletConnect({
34535
34828
  defaultSourceTokenAddress,
34536
34829
  defaultSourceSymbol
34537
34830
  ]);
34538
- const usdToTokenRate = React342.useMemo(() => {
34831
+ const usdToTokenRate = React352.useMemo(() => {
34539
34832
  if (!selectedBalance || !selectedBalance.amount_usd || !selectedToken) return 0;
34540
34833
  const balanceAmount = Number(selectedBalance.amount) / 10 ** selectedToken.decimals;
34541
34834
  const balanceUsd = parseFloat(selectedBalance.amount_usd);
34542
34835
  if (balanceAmount === 0 || balanceUsd === 0) return 0;
34543
34836
  return balanceAmount / balanceUsd;
34544
34837
  }, [selectedBalance, selectedToken]);
34545
- const tokenAmount = React342.useMemo(() => {
34838
+ const tokenAmount = React352.useMemo(() => {
34546
34839
  if (isCheckoutMode && activeCheckoutQuote && selectedToken)
34547
34840
  return Number(activeCheckoutQuote.sourceAmount) / 10 ** activeCheckoutQuote.sourceTokenDecimals;
34548
34841
  const usdNum = parseFloat(amountUsd) || 0;
34549
34842
  if (usdNum === 0 || usdToTokenRate === 0) return 0;
34550
34843
  return usdNum * usdToTokenRate;
34551
34844
  }, [amountUsd, usdToTokenRate, isCheckoutMode, activeCheckoutQuote, selectedToken]);
34552
- React342.useEffect(() => {
34845
+ React352.useEffect(() => {
34553
34846
  if (isCheckoutMode && activeCheckoutQuote?.sourceAmountUsd && view === "enter_amount")
34554
34847
  setAmountUsd(activeCheckoutQuote.sourceAmountUsd);
34555
34848
  }, [isCheckoutMode, activeCheckoutQuote, view]);
@@ -34558,7 +34851,7 @@ function WalletConnect({
34558
34851
  const inputUsdNum = parseFloat(amountUsd) || 0;
34559
34852
  const minDepositUsd = tokenChainDetails?.minimum_deposit_amount_usd || 0;
34560
34853
  const isValidAmount = isCheckoutMode && activeCheckoutQuote ? tokenAmount > 0 && tokenAmount <= maxTokenAmount : inputUsdNum > 0 && inputUsdNum <= maxUsdAmount && inputUsdNum >= minDepositUsd;
34561
- const formattedTokenAmount = React342.useMemo(() => {
34854
+ const formattedTokenAmount = React352.useMemo(() => {
34562
34855
  if (tokenAmount === 0 || !selectedToken) return null;
34563
34856
  return `${tokenAmount.toFixed(6)} ${selectedToken.symbol}`.replace(/\.?0+$/, "");
34564
34857
  }, [tokenAmount, selectedToken]);
@@ -34591,7 +34884,7 @@ function WalletConnect({
34591
34884
  break;
34592
34885
  case "enter_amount":
34593
34886
  transitionTo("select_token");
34594
- setAmountUsd(prefillAmountUsd ?? "");
34887
+ setAmountUsd(prefilledAmountUsd ?? "");
34595
34888
  setTokenChainDetails(null);
34596
34889
  break;
34597
34890
  case "review":
@@ -34623,7 +34916,7 @@ function WalletConnect({
34623
34916
  setSelectedBalance(null);
34624
34917
  setBalances([]);
34625
34918
  setTotalBalanceUsd(null);
34626
- setAmountUsd(prefillAmountUsd ?? "");
34919
+ setAmountUsd(prefilledAmountUsd ?? "");
34627
34920
  setError(null);
34628
34921
  };
34629
34922
  if (standalone) {
@@ -34868,116 +35161,131 @@ function WalletConnect({
34868
35161
  ] });
34869
35162
  }
34870
35163
  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,
35164
+ return (
35165
+ // Mobile: flex column that fills the full-height sheet so the wallet list
35166
+ // scrolls and the footer pins to the bottom. Desktop (sm:): content-sized.
35167
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
35168
+ "div",
34874
35169
  {
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",
35170
+ style: viewTransitionStyle,
35171
+ className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col sm:uf-block",
35172
+ children: [
35173
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
35174
+ DepositHeader,
35175
+ {
35176
+ title: "Connect Wallet",
35177
+ showBack: canGoBack,
35178
+ onBack: handleBack,
35179
+ onClose
35180
+ }
35181
+ ),
35182
+ /* @__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: [
35183
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
35184
+ "p",
35185
+ {
35186
+ className: "uf-text-sm uf-text-center uf-pb-4",
35187
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
35188
+ children: isMobile ? "Open this page in your wallet's app to connect" : "Select a wallet to connect"
35189
+ }
35190
+ ),
35191
+ /* @__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) => {
35192
+ if (!isMobile || wallet.isInstalled) return true;
35193
+ const platformAllowed = !wallet.mobileBrowsePlatforms || wallet.mobileBrowsePlatforms.includes(getMobilePlatform() ?? "");
35194
+ return wallet.supportsMobileBrowse !== false && platformAllowed;
35195
+ }).map((wallet) => {
35196
+ const walletPlatformAllowed = !wallet.mobileBrowsePlatforms || wallet.mobileBrowsePlatforms.includes(getMobilePlatform() ?? "");
35197
+ const showOpenInApp = isMobile && !wallet.isInstalled && wallet.supportsMobileBrowse !== false && walletPlatformAllowed;
35198
+ const isPending = pendingMobileWallet?.id === wallet.id;
35199
+ return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
35200
+ "button",
34947
35201
  {
34948
- className: "uf-text-xs uf-px-2 uf-py-1 uf-rounded-full",
35202
+ onClick: () => void handleWalletClick(wallet),
35203
+ disabled: isWalletConnecting || !!pendingMobileWallet,
35204
+ 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
35205
  style: {
34950
- backgroundColor: colors2.primary + "20",
34951
- color: colors2.primary,
34952
- fontFamily: fonts.medium
35206
+ backgroundColor: components.card.backgroundColor,
35207
+ borderRadius: components.card.borderRadius,
35208
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
34953
35209
  },
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
- ] });
35210
+ children: [
35211
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
35212
+ WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
35213
+ WalletIconWithNetwork,
35214
+ {
35215
+ WalletIcon: WALLET_ICONS3[wallet.id],
35216
+ networks: wallet.networks,
35217
+ size: 40,
35218
+ className: "uf-rounded-lg"
35219
+ }
35220
+ ) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
35221
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
35222
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
35223
+ "div",
35224
+ {
35225
+ className: "uf-text-sm uf-font-medium",
35226
+ style: { color: components.card.titleColor, fontFamily: fonts.medium },
35227
+ children: wallet.name
35228
+ }
35229
+ ),
35230
+ wallet.id === recentWalletId && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
35231
+ "span",
35232
+ {
35233
+ className: "uf-text-xs uf-px-2 uf-py-0.5 uf-rounded-full",
35234
+ style: {
35235
+ backgroundColor: colors2.primary + "20",
35236
+ color: colors2.primary,
35237
+ fontFamily: fonts.medium
35238
+ },
35239
+ children: "Last used"
35240
+ }
35241
+ )
35242
+ ] })
35243
+ ] }),
35244
+ isPending ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
35245
+ LoaderCircle,
35246
+ {
35247
+ className: "uf-w-4 uf-h-4 uf-animate-spin",
35248
+ style: { color: colors2.primary }
35249
+ }
35250
+ ) : wallet.isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
35251
+ "span",
35252
+ {
35253
+ className: "uf-text-xs uf-px-2 uf-py-1 uf-rounded-full",
35254
+ style: {
35255
+ backgroundColor: colors2.primary + "20",
35256
+ color: colors2.primary,
35257
+ fontFamily: fonts.medium
35258
+ },
35259
+ children: "Detected"
35260
+ }
35261
+ ) : /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
35262
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
35263
+ "span",
35264
+ {
35265
+ className: "uf-text-xs",
35266
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
35267
+ children: showOpenInApp ? "Open" : "Install"
35268
+ }
35269
+ ),
35270
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
35271
+ ExternalLink,
35272
+ {
35273
+ className: "uf-w-3 uf-h-3",
35274
+ style: { color: colors2.foregroundMuted }
35275
+ }
35276
+ )
35277
+ ] })
35278
+ ]
35279
+ },
35280
+ wallet.id
35281
+ );
35282
+ }) }),
35283
+ 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 })
35284
+ ] })
35285
+ ]
35286
+ }
35287
+ )
35288
+ );
34981
35289
  }
34982
35290
  const preConnectAccent = selectedWalletDef ? getWalletBrandColor(selectedWalletDef.id, mode) : void 0;
34983
35291
  const preConnectFg = preConnectAccent ? getContrastingTextColor(preConnectAccent) : void 0;
@@ -35332,6 +35640,15 @@ function SkeletonButton({ variant = "default" }) {
35332
35640
  ] });
35333
35641
  }
35334
35642
  var t8 = i18n2.depositModal;
35643
+ function normalizePrefilledUsdAmount(value) {
35644
+ if (!value) return void 0;
35645
+ const cleaned = value.replace(/[^0-9.]/g, "");
35646
+ if (!cleaned) return void 0;
35647
+ const normalizedNumeric = cleaned.replace(/(\..*)\./g, "$1");
35648
+ const parsed = parseFloat(normalizedNumeric);
35649
+ if (!Number.isFinite(parsed) || parsed <= 0) return void 0;
35650
+ return parseFloat(parsed.toFixed(2)).toString();
35651
+ }
35335
35652
  function depositTabForScreen(screen) {
35336
35653
  return screen === "card" || screen === "cashapp" || screen === "bank_transfer" || screen === "stripe_link" || screen === "apple_pay" ? "cash" : "crypto";
35337
35654
  }
@@ -35351,6 +35668,7 @@ function DepositModal({
35351
35668
  defaultSourceChainId,
35352
35669
  defaultSourceTokenAddress,
35353
35670
  defaultSourceSymbol,
35671
+ prefilledAmountUsd,
35354
35672
  hideDepositTracker,
35355
35673
  showBalanceHeader = false,
35356
35674
  transferInputVariant = "double_input",
@@ -35366,7 +35684,9 @@ function DepositModal({
35366
35684
  applePayTitle = "Pay with Apple Pay",
35367
35685
  applePaySubTitle = "Instant",
35368
35686
  enableBankTransfer,
35369
- enableStripeLink = false,
35687
+ // No default: left undefined so the backend `stripe_link.enabled` can govern
35688
+ // (via the `??` chain in showStripeLink) once a dashboard toggle exists.
35689
+ enableStripeLink,
35370
35690
  userEmail,
35371
35691
  hideDepositFlowInfo = false,
35372
35692
  hideDisplayDescription = false,
@@ -35384,6 +35704,10 @@ function DepositModal({
35384
35704
  depositTrackerSubTitle = t8.depositTracker.subtitle
35385
35705
  }) {
35386
35706
  const { colors: colors2, fonts, components } = useTheme();
35707
+ const normalizedPrefilledAmountUsd = (0, import_react8.useMemo)(
35708
+ () => normalizePrefilledUsdAmount(prefilledAmountUsd),
35709
+ [prefilledAmountUsd]
35710
+ );
35387
35711
  const onDepositSuccessFor = (0, import_react8.useCallback)(
35388
35712
  (method) => onDepositSuccess || onEvent ? (data) => {
35389
35713
  const payload = { ...data, method };
@@ -35447,14 +35771,18 @@ function DepositModal({
35447
35771
  const [allExecutions, setAllExecutions] = (0, import_react8.useState)([]);
35448
35772
  const [selectedExecution, setSelectedExecution] = (0, import_react8.useState)(null);
35449
35773
  const [depositExecutions, setDepositExecutions] = (0, import_react8.useState)([]);
35774
+ const { userIpInfo, isLoading: isLoadingIp } = useUserIp2();
35450
35775
  const { projectConfig } = useProjectConfig({
35451
35776
  publishableKey,
35452
- enabled: open
35777
+ enabled: open && !isLoadingIp,
35778
+ countryCode: userIpInfo?.alpha2,
35779
+ subdivisionCode: userIpInfo?.subdivisionCode ?? void 0
35453
35780
  });
35454
35781
  const showTransferCrypto = enableTransferCrypto ?? projectConfig?.transfer_crypto?.enabled ?? true;
35455
35782
  const showConnectWallet = enableConnectWallet ?? projectConfig?.connect_wallet?.enabled ?? true;
35456
35783
  const showPayWithExchange = enablePayWithExchange ?? projectConfig?.pay_with_exchange?.enabled ?? true;
35457
35784
  const showFiatOnramp = !projectConfig?.fiat_onramp?.is_hidden && (enableFiatOnramp ?? projectConfig?.fiat_onramp?.enabled ?? true);
35785
+ const showStripeLink = !projectConfig?.stripe_link?.is_hidden && (enableStripeLink ?? projectConfig?.stripe_link?.enabled ?? false);
35458
35786
  const showConnectExchange = enableConnectExchange ?? projectConfig?.connect_exchange?.enabled ?? true;
35459
35787
  const showCashApp = enableCashApp ?? projectConfig?.cash_app?.enabled ?? true;
35460
35788
  const showApplePay = enableApplePay ?? projectConfig?.apple_pay?.enabled ?? true;
@@ -35600,7 +35928,6 @@ function DepositModal({
35600
35928
  publishableKey,
35601
35929
  enabled: open && showPayWithExchange
35602
35930
  });
35603
- const { userIpInfo, isLoading: isLoadingIp } = useUserIp2();
35604
35931
  const { providers: bankTransferProviders, isLoading: bankTransferProvidersLoading } = useBankTransferProviders({
35605
35932
  publishableKey,
35606
35933
  enabled: open && !!userIpInfo?.alpha2,
@@ -35778,6 +36105,12 @@ function DepositModal({
35778
36105
  const [cashAppView, setCashAppView] = (0, import_react8.useState)("amount");
35779
36106
  const [stripeLinkStep, setStripeLinkStep] = (0, import_react8.useState)("amount");
35780
36107
  const stripeLinkBackRef = (0, import_react8.useRef)(null);
36108
+ (0, import_react8.useEffect)(() => {
36109
+ if (view === "stripe_link" && !showStripeLink && effectiveInitialScreen === "main") {
36110
+ setView("main");
36111
+ setStripeLinkStep("amount");
36112
+ }
36113
+ }, [view, showStripeLink, effectiveInitialScreen]);
35781
36114
  const [cashAppAmount, setCashAppAmount] = (0, import_react8.useState)("");
35782
36115
  const [applePayView, setApplePayView] = (0, import_react8.useState)("email_input");
35783
36116
  const applePayHandleRef = (0, import_react8.useRef)(null);
@@ -36002,7 +36335,7 @@ function DepositModal({
36002
36335
  },
36003
36336
  "cashapp"
36004
36337
  ) : null;
36005
- const stripeLinkMenuButton = enableStripeLink ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36338
+ const stripeLinkMenuButton = showStripeLink ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36006
36339
  StripeLinkButton,
36007
36340
  {
36008
36341
  onClick: () => setView("stripe_link"),
@@ -36050,11 +36383,13 @@ function DepositModal({
36050
36383
  connectExchangeMenuButton
36051
36384
  ].filter(Boolean);
36052
36385
  const cashMenuButtons = [
36386
+ // Stripe "Pay with Link" is intentionally listed first so it always sits
36387
+ // above "Deposit with Card".
36388
+ stripeLinkMenuButton,
36053
36389
  depositWithCardMenuButton,
36054
36390
  applePayMenuButton,
36055
36391
  cashAppMenuButton,
36056
- bankTransferMenuButton,
36057
- stripeLinkMenuButton
36392
+ bankTransferMenuButton
36058
36393
  ].filter(Boolean);
36059
36394
  const depositTabs = [
36060
36395
  { id: "crypto", label: "Use Crypto", icon: Bitcoin, buttons: cryptoMenuButtons },
@@ -36149,13 +36484,13 @@ function DepositModal({
36149
36484
  const stackedOptions = [
36150
36485
  transferCryptoMenuButton,
36151
36486
  connectWalletMenuButton,
36487
+ stripeLinkMenuButton,
36152
36488
  depositWithCardMenuButton,
36153
36489
  applePayMenuButton,
36154
36490
  payWithExchangeMenuButton,
36155
36491
  connectExchangeMenuButton,
36156
36492
  cashAppMenuButton,
36157
36493
  bankTransferMenuButton,
36158
- stripeLinkMenuButton,
36159
36494
  depositTrackerMenuButton
36160
36495
  ].filter(Boolean);
36161
36496
  return renderScrollableOptions(stackedOptions);
@@ -36171,410 +36506,461 @@ function DepositModal({
36171
36506
  {
36172
36507
  ref: hideOverlay ? containerCallbackRef : void 0,
36173
36508
  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}`}`,
36509
+ 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
36510
+ // is a grid, and its single auto row only *grows* to fill free
36511
+ // space (align-content: stretch) — it never shrinks below content,
36512
+ // so a long wallet list would balloon the row past the viewport and
36513
+ // push the footer off-screen instead of scrolling. Clamp the row to
36514
+ // the modal height with minmax(0,1fr) so the inner overflow-y-auto
36515
+ // list scrolls with the footer pinned. Reset to content-sized on
36516
+ // desktop (sm:) where the modal is auto-height and centered.
36517
+ view === "wallet_connect" ? "[grid-template-rows:minmax(0,1fr)] sm:[grid-template-rows:none]" : ""} ${themeClass}`}`,
36175
36518
  style: { backgroundColor: colors2.background },
36176
36519
  onPointerDownOutside: (e) => e.preventDefault(),
36177
36520
  onInteractOutside: (e) => e.preventDefault(),
36178
36521
  children: [
36179
36522
  /* @__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();
36523
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36524
+ ThemeStyleInjector,
36525
+ {
36526
+ className: view === "wallet_connect" ? "uf-flex uf-min-h-0 uf-flex-col" : void 0,
36527
+ 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: [
36528
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36529
+ DepositHeader,
36530
+ {
36531
+ title: modalTitle || "Deposit",
36532
+ showClose: !hideOverlay,
36533
+ onClose: handleClose,
36534
+ showBalance: showBalanceHeader,
36535
+ balanceAddress: recipientAddress,
36536
+ balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
36537
+ balanceChainId: destinationChainId,
36538
+ balanceTokenAddress: destinationTokenAddress,
36539
+ projectName: projectConfig?.project_name,
36540
+ publishableKey
36541
+ }
36542
+ ) }),
36543
+ renderMainMenuBody(),
36544
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-flex-shrink-0", children: depositPoweredByFooter })
36545
+ ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36546
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36547
+ DepositHeader,
36548
+ {
36549
+ title: transferCryptoTitle,
36550
+ showBack: showBackTransfer,
36551
+ onBack: handleBack,
36552
+ onClose: handleClose,
36553
+ showBalance: showBalanceHeader,
36554
+ balanceAddress: recipientAddress,
36555
+ balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
36556
+ balanceChainId: destinationChainId,
36557
+ balanceTokenAddress: destinationTokenAddress,
36558
+ projectName: projectConfig?.project_name,
36559
+ publishableKey
36560
+ }
36561
+ ),
36562
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36563
+ 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)(
36564
+ TransferCryptoSingleInput,
36565
+ {
36566
+ userId,
36567
+ publishableKey,
36568
+ recipientAddress,
36569
+ destinationChainType,
36570
+ destinationChainId,
36571
+ destinationTokenAddress,
36572
+ defaultSourceChainType,
36573
+ defaultSourceChainId,
36574
+ defaultSourceTokenAddress,
36575
+ defaultSourceSymbol,
36576
+ prefilledAmountUsd: normalizedPrefilledAmountUsd,
36577
+ depositConfirmationMode,
36578
+ onExecutionsChange: setDepositExecutions,
36579
+ onDepositSuccess: onDepositSuccessFor("transfer"),
36580
+ onDepositError: onDepositErrorFor("transfer"),
36581
+ wallets
36582
+ }
36583
+ ) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36584
+ TransferCryptoDoubleInput,
36585
+ {
36586
+ userId,
36587
+ publishableKey,
36588
+ recipientAddress,
36589
+ destinationChainType,
36590
+ destinationChainId,
36591
+ destinationTokenAddress,
36592
+ defaultSourceChainType,
36593
+ defaultSourceChainId,
36594
+ defaultSourceTokenAddress,
36595
+ defaultSourceSymbol,
36596
+ prefilledAmountUsd: normalizedPrefilledAmountUsd,
36597
+ depositConfirmationMode,
36598
+ onExecutionsChange: setDepositExecutions,
36599
+ onDepositSuccess: onDepositSuccessFor("transfer"),
36600
+ onDepositError: onDepositErrorFor("transfer"),
36601
+ wallets
36571
36602
  }
36603
+ ),
36604
+ depositPoweredByFooter
36605
+ ] })
36606
+ ] }) : view === "tracker" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36607
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36608
+ DepositHeader,
36609
+ {
36610
+ title: selectedExecution ? "Deposit Details" : depositTrackerTitle,
36611
+ showBack: showBackTracker,
36612
+ onBack: handleBack,
36613
+ onClose: handleClose
36572
36614
  }
36573
- }
36574
- ),
36575
- depositPoweredByFooter
36576
- ] })
36577
- ] }) : null })
36615
+ ),
36616
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36617
+ /* @__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)(
36618
+ "div",
36619
+ {
36620
+ className: "uf-text-sm",
36621
+ style: {
36622
+ color: components.container.subtitleColor,
36623
+ fontFamily: fonts.regular
36624
+ },
36625
+ children: "No deposits yet"
36626
+ }
36627
+ ) }) : allExecutions.map((execution) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36628
+ DepositExecutionItem,
36629
+ {
36630
+ execution,
36631
+ onClick: () => setSelectedExecution(execution)
36632
+ },
36633
+ execution.id
36634
+ )) }) }),
36635
+ depositPoweredByFooter
36636
+ ] })
36637
+ ] }) : view === "card" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36638
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36639
+ DepositHeader,
36640
+ {
36641
+ title: cardView === "quotes" ? t8.quotes : depositWithCardTitle,
36642
+ showBack: showBackCard,
36643
+ onBack: handleBack,
36644
+ onClose: handleClose,
36645
+ badge: cardView === "quotes" ? { count: quotesCount } : void 0,
36646
+ showBalance: showBalanceHeader,
36647
+ balanceAddress: recipientAddress,
36648
+ balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
36649
+ balanceChainId: destinationChainId,
36650
+ balanceTokenAddress: destinationTokenAddress,
36651
+ projectName: projectConfig?.project_name,
36652
+ publishableKey
36653
+ }
36654
+ ),
36655
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36656
+ standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : !showFiatOnramp ? (
36657
+ // Fiat on-ramp resolved hidden/disabled after a direct open
36658
+ // (e.g. platform `is_hidden` for a Stripe Link-only project).
36659
+ // Show a geo-restriction screen rather than the card UI so the
36660
+ // hard-hide is honoured without a flash of "Pay with Card".
36661
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(GeoRestrictionScreen, { methodName: "Card" })
36662
+ ) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36663
+ BuyWithCard,
36664
+ {
36665
+ userId,
36666
+ publishableKey,
36667
+ view: cardView,
36668
+ onViewChange: handleCardViewChange,
36669
+ destinationTokenSymbol,
36670
+ recipientAddress,
36671
+ destinationChainType,
36672
+ destinationChainId,
36673
+ destinationTokenAddress,
36674
+ onDepositSuccess: onDepositSuccessFor("card"),
36675
+ onDepositError: onDepositErrorFor("card"),
36676
+ onEvent,
36677
+ themeClass,
36678
+ wallets,
36679
+ assetCdnUrl: projectConfig?.asset_cdn_url,
36680
+ hideDepositFlowInfo,
36681
+ hideDisplayDescription,
36682
+ prefilledAmountUsd: normalizedPrefilledAmountUsd
36683
+ }
36684
+ ),
36685
+ depositPoweredByFooter
36686
+ ] })
36687
+ ] }) : view === "exchange" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36688
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36689
+ DepositHeader,
36690
+ {
36691
+ title: payWithExchangeTitle,
36692
+ showBack: exchangeView === "pending" || sessionOpenedFromMenu,
36693
+ onBack: handleBack,
36694
+ onClose: handleClose
36695
+ }
36696
+ ),
36697
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36698
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36699
+ PayWithExchange,
36700
+ {
36701
+ userId,
36702
+ publishableKey,
36703
+ exchanges,
36704
+ view: exchangeView,
36705
+ onViewChange: setExchangeView,
36706
+ destinationTokenSymbol,
36707
+ recipientAddress,
36708
+ destinationChainType,
36709
+ destinationChainId,
36710
+ destinationTokenAddress,
36711
+ onDepositSuccess: onDepositSuccessFor("pay_with_exchange"),
36712
+ onDepositError: onDepositErrorFor("pay_with_exchange"),
36713
+ wallets,
36714
+ defaultToken: defaultToken ?? null
36715
+ }
36716
+ ),
36717
+ depositPoweredByFooter
36718
+ ] })
36719
+ ] }) : view === "coinbase_connect" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36720
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36721
+ CoinbaseConnect,
36722
+ {
36723
+ publishableKey,
36724
+ userId,
36725
+ wallets,
36726
+ recipientAddress,
36727
+ destinationTokenAddress: destinationTokenAddress ?? "",
36728
+ destinationChainId: destinationChainId ?? "",
36729
+ destinationChainType: destinationChainType ?? "",
36730
+ onDepositSuccess: onDepositSuccessFor("exchange_connect"),
36731
+ onDepositError: onDepositErrorFor("exchange_connect"),
36732
+ onTransferError: (error) => {
36733
+ onDepositErrorFor("exchange_connect")?.({
36734
+ message: error.message,
36735
+ error
36736
+ });
36737
+ },
36738
+ onBack: handleBack,
36739
+ onClose: handleClose,
36740
+ onDisconnect: handleExchangeDisconnect,
36741
+ skipToHoldings: coinbaseSkipToHoldings,
36742
+ canGoBack: sessionOpenedFromMenu,
36743
+ onExecutionsChange: setDepositExecutions,
36744
+ defaultSourceChainType,
36745
+ defaultSourceChainId,
36746
+ defaultSourceTokenAddress,
36747
+ defaultSourceSymbol,
36748
+ prefilledAmountUsd: normalizedPrefilledAmountUsd
36749
+ }
36750
+ ),
36751
+ depositPoweredByFooter
36752
+ ] }) : view === "wallet_connect" ? (
36753
+ // Mobile: flex-fill the full-height dialog body so the wallet list
36754
+ // can grow and scroll, with the footer pinned to the bottom.
36755
+ // Desktop (sm:): stays content-sized.
36756
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
36757
+ "div",
36758
+ {
36759
+ className: "uf-flex uf-flex-col uf-gap-1.5 uf-min-h-0 uf-flex-1 sm:uf-flex-none",
36760
+ children: [
36761
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36762
+ WalletConnect,
36763
+ {
36764
+ walletInfo: browserWalletInfo ?? void 0,
36765
+ depositWallet: browserWalletInfo?.depositWallet ?? void 0,
36766
+ wallets,
36767
+ userId,
36768
+ publishableKey,
36769
+ assetCdnUrl: projectConfig?.asset_cdn_url,
36770
+ projectName: projectConfig?.project_name,
36771
+ onError: (error) => {
36772
+ onDepositErrorFor("wallet_connect")?.({
36773
+ message: error.message,
36774
+ error
36775
+ });
36776
+ },
36777
+ onDepositSuccess: onDepositSuccessFor("wallet_connect"),
36778
+ onDepositError: onDepositErrorFor("wallet_connect"),
36779
+ amountQuickSelect: browserWalletAmountQuickSelect,
36780
+ prefilledAmountUsd: normalizedPrefilledAmountUsd,
36781
+ onWalletDisconnect: handleWalletDisconnect,
36782
+ onWalletConnected: (info, dw) => {
36783
+ setBrowserWalletInfo({ ...info, depositWallet: dw });
36784
+ setStoredWalletState(info.type);
36785
+ setBrowserWalletChainType(dw.chain_type === "solana" ? "solana" : "ethereum");
36786
+ },
36787
+ onBack: handleBack,
36788
+ onClose: handleClose,
36789
+ defaultSourceChainType,
36790
+ defaultSourceChainId,
36791
+ defaultSourceTokenAddress,
36792
+ defaultSourceSymbol,
36793
+ canGoBack: sessionOpenedFromMenu,
36794
+ depositWalletsLoading: walletsLoading
36795
+ }
36796
+ ),
36797
+ depositPoweredByFooter
36798
+ ]
36799
+ }
36800
+ )
36801
+ ) : view === "bank_transfer" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36802
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36803
+ DepositHeader,
36804
+ {
36805
+ title: t8.bankTransfer.title,
36806
+ showBack: bankTransferView !== "providers" || sessionOpenedFromMenu,
36807
+ onBack: handleBack,
36808
+ onClose: handleClose
36809
+ }
36810
+ ),
36811
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36812
+ 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)(
36813
+ BankTransfer,
36814
+ {
36815
+ userId,
36816
+ publishableKey,
36817
+ view: bankTransferView,
36818
+ onViewChange: setBankTransferView,
36819
+ recipientAddress,
36820
+ destinationChainType,
36821
+ destinationChainId,
36822
+ destinationTokenAddress,
36823
+ destinationTokenSymbol,
36824
+ wallets,
36825
+ defaultToken: defaultToken ?? null,
36826
+ assetCdnUrl: projectConfig?.asset_cdn_url,
36827
+ onEvent,
36828
+ onDepositSuccess,
36829
+ onDepositError,
36830
+ prefilledAmountUsd: normalizedPrefilledAmountUsd
36831
+ }
36832
+ ),
36833
+ depositPoweredByFooter
36834
+ ] })
36835
+ ] }) : view === "stripe_link" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36836
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36837
+ DepositHeader,
36838
+ {
36839
+ title: "Deposit with Link",
36840
+ showBack: stripeLinkStep !== "checkout" && stripeLinkStep !== "success",
36841
+ onBack: handleBack,
36842
+ showClose: stripeLinkStep !== "checkout" && stripeLinkStep !== "auth",
36843
+ onClose: handleClose
36844
+ }
36845
+ ),
36846
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36847
+ isLoadingIp ? (
36848
+ // Hold the geo decision until IP resolves so we don't mount
36849
+ // PayWithStripeLink (which kicks off config/OAuth work) for a
36850
+ // deep-link user who turns out to be outside the US.
36851
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(SkeletonButton, { variant: "with-icons" })
36852
+ ) : !showStripeLink ? (
36853
+ // Stripe Link's crypto on-ramp is US-only. On a direct open
36854
+ // (initialScreen="stripe_link") the row isn't in a menu to
36855
+ // fall back to, so show a geo-restriction screen rather than
36856
+ // the Link UI.
36857
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36858
+ GeoRestrictionScreen,
36859
+ {
36860
+ methodName: t8.stripeLink.title,
36861
+ message: "Pay with Link is only available in the US."
36862
+ }
36863
+ )
36864
+ ) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36865
+ PayWithStripeLink,
36866
+ {
36867
+ userId,
36868
+ publishableKey,
36869
+ recipientAddress,
36870
+ destinationChainType,
36871
+ destinationChainId,
36872
+ destinationTokenAddress,
36873
+ countryCode: userIpInfo?.alpha2,
36874
+ subdivisionCode: userIpInfo?.subdivisionCode ?? void 0,
36875
+ wallets,
36876
+ email: userEmail,
36877
+ iconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/link.svg` : void 0,
36878
+ step: stripeLinkStep,
36879
+ onStepChange: setStripeLinkStep,
36880
+ backHandlerRef: stripeLinkBackRef,
36881
+ onDepositSuccess,
36882
+ onDepositError
36883
+ }
36884
+ ),
36885
+ depositPoweredByFooter
36886
+ ] })
36887
+ ] }) : view === "cashapp" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36888
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36889
+ DepositHeader,
36890
+ {
36891
+ title: cashAppView !== "amount" && cashAppAmount ? `Pay $${cashAppAmount} via Cash App` : "Pay with Cash App",
36892
+ showBack: cashAppView !== "amount" || sessionOpenedFromMenu,
36893
+ onBack: handleBack,
36894
+ onClose: handleClose
36895
+ }
36896
+ ),
36897
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36898
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36899
+ PayWithCashApp,
36900
+ {
36901
+ userId,
36902
+ publishableKey,
36903
+ recipientAddress,
36904
+ destinationChainType,
36905
+ destinationChainId,
36906
+ destinationTokenAddress,
36907
+ cashAppIconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/cashapp.svg` : void 0,
36908
+ view: cashAppView,
36909
+ onViewChange: setCashAppView,
36910
+ onAmountChange: setCashAppAmount,
36911
+ onEvent,
36912
+ onDepositSuccess: onDepositSuccessFor("cashapp"),
36913
+ onDepositError: onDepositErrorFor("cashapp"),
36914
+ prefilledAmountUsd: normalizedPrefilledAmountUsd,
36915
+ wallets
36916
+ }
36917
+ ),
36918
+ depositPoweredByFooter
36919
+ ] })
36920
+ ] }) : view === "apple_pay" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
36921
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
36922
+ DepositHeader,
36923
+ {
36924
+ title: applePayHeaderTitle,
36925
+ showBack: applePayShowBack,
36926
+ onBack: () => {
36927
+ const handled = applePayHandleRef.current?.requestBack() ?? false;
36928
+ if (!handled) handleBack();
36929
+ },
36930
+ onClose: handleClose
36931
+ }
36932
+ ),
36933
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
36934
+ 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)(
36935
+ BuyWithApplePay,
36936
+ {
36937
+ ref: applePayHandleRef,
36938
+ userId,
36939
+ publishableKey,
36940
+ destinationChainType,
36941
+ destinationChainId,
36942
+ destinationTokenAddress,
36943
+ userEmail,
36944
+ wallets,
36945
+ onViewChange: setApplePayView,
36946
+ onEvent,
36947
+ onDepositSuccess: onDepositSuccessFor("apple_pay"),
36948
+ onDepositError: onDepositErrorFor("apple_pay"),
36949
+ exitLabel: sessionOpenedFromMenu ? "Return" : "Close",
36950
+ onExit: () => {
36951
+ if (sessionOpenedFromMenu) {
36952
+ setView("main");
36953
+ } else {
36954
+ handleClose();
36955
+ }
36956
+ }
36957
+ }
36958
+ ),
36959
+ depositPoweredByFooter
36960
+ ] })
36961
+ ] }) : null
36962
+ }
36963
+ )
36578
36964
  ]
36579
36965
  }
36580
36966
  )
@@ -37013,253 +37399,275 @@ function CheckoutModal({
37013
37399
  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
37400
  DialogContent2,
37015
37401
  {
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}`,
37402
+ 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
37403
+ // grid whose single auto row only grows to fill free space and never
37404
+ // shrinks below content, so a long wallet list would balloon the row
37405
+ // past the viewport and push the footer off-screen. Clamp the row to
37406
+ // the modal height with minmax(0,1fr) so the inner overflow-y-auto list
37407
+ // scrolls with the footer pinned. Reset to content-sized on desktop.
37408
+ view === "wallet_connect" ? "[grid-template-rows:minmax(0,1fr)] sm:[grid-template-rows:none]" : ""} ${themeClass}`,
37017
37409
  style: { backgroundColor: colors2.background },
37018
37410
  onPointerDownOutside: (e) => e.preventDefault(),
37019
37411
  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",
37412
+ children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37413
+ ThemeStyleInjector,
37414
+ {
37415
+ className: view === "wallet_connect" ? "uf-flex uf-min-h-0 uf-flex-col" : void 0,
37416
+ children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
37417
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DepositHeader, { title: modalTitle || "Checkout", showClose: true, onClose: handleClose }),
37418
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
37419
+ piLoading ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-space-y-3", children: [
37420
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37421
+ "div",
37422
+ {
37423
+ className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
37424
+ style: {
37425
+ backgroundColor: components.card.backgroundColor,
37426
+ borderRadius: components.card.borderRadius,
37427
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
37428
+ },
37429
+ children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
37430
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37431
+ "div",
37432
+ {
37433
+ className: "uf-h-8 uf-w-24 uf-rounded",
37434
+ style: {
37435
+ backgroundColor: components.card.borderColor
37436
+ }
37437
+ }
37438
+ ),
37439
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37440
+ "div",
37441
+ {
37442
+ className: "uf-h-4 uf-w-16 uf-rounded",
37443
+ style: {
37444
+ backgroundColor: components.card.borderColor
37445
+ }
37446
+ }
37447
+ )
37448
+ ] })
37449
+ }
37450
+ ),
37451
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(SkeletonButton2, {}),
37452
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(SkeletonButton2, {})
37453
+ ] }) : 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: [
37454
+ /* @__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" }) }),
37455
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37456
+ "h3",
37457
+ {
37458
+ className: "uf-text-lg uf-font-semibold uf-mb-2",
37459
+ style: {
37460
+ color: colors2.foreground,
37461
+ fontFamily: fonts.semibold
37462
+ },
37463
+ children: "Unable to Load Checkout"
37464
+ }
37465
+ ),
37466
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37467
+ "p",
37468
+ {
37469
+ className: "uf-text-sm uf-max-w-[280px]",
37470
+ style: {
37471
+ color: colors2.foregroundMuted,
37472
+ fontFamily: fonts.regular
37473
+ },
37474
+ children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
37475
+ }
37476
+ )
37477
+ ] }) : paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-space-y-3", children: [
37478
+ progressSection,
37479
+ (paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
37480
+ showTransferCrypto && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37481
+ TransferCryptoButton,
37036
37482
  {
37037
- className: "uf-h-8 uf-w-24 uf-rounded",
37038
- style: {
37039
- backgroundColor: components.card.borderColor
37040
- }
37483
+ onClick: () => {
37484
+ lastCheckoutMethodRef.current = "transfer";
37485
+ setView("transfer");
37486
+ },
37487
+ title: i18n2.checkoutModal.transferCrypto.title,
37488
+ subtitle: i18n2.checkoutModal.transferCrypto.subtitle,
37489
+ featuredTokens: projectConfig?.transfer_crypto.networks
37041
37490
  }
37042
37491
  ),
37043
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37044
- "div",
37492
+ showConnectWallet && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37493
+ BrowserWalletButton,
37045
37494
  {
37046
- className: "uf-h-4 uf-w-16 uf-rounded",
37047
- style: {
37048
- backgroundColor: components.card.borderColor
37049
- }
37495
+ onClick: handleBrowserWalletClick,
37496
+ onConnectClick: handleWalletConnectClick,
37497
+ onDisconnect: handleWalletDisconnect,
37498
+ chainType: browserWalletChainType,
37499
+ publishableKey,
37500
+ featuredWallets: projectConfig?.connect_wallet?.wallets,
37501
+ subtitle: i18n2.checkoutModal.browserWallet.subtitle
37050
37502
  }
37051
37503
  )
37052
37504
  ] })
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" }) }),
37505
+ ] }) : null,
37506
+ poweredByFooter
37507
+ ] })
37508
+ ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
37059
37509
  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37060
- "h3",
37510
+ DepositHeader,
37061
37511
  {
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"
37512
+ title: modalTitle || "Checkout",
37513
+ showBack: true,
37514
+ onBack: handleBack,
37515
+ onClose: handleClose
37068
37516
  }
37069
37517
  ),
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)(
37518
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
37519
+ paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
37520
+ (() => {
37521
+ const receivedUsd = parseFloat(
37522
+ paymentIntent.destination_amount_received_usd || paymentIntent.amount_received_usd
37523
+ );
37524
+ const totalUsd = parseFloat(
37525
+ paymentIntent.destination_amount_usd || paymentIntent.amount_usd
37526
+ );
37527
+ const pct = totalUsd > 0 ? Math.min(receivedUsd / totalUsd * 100, 100) : 0;
37528
+ return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-space-y-2", children: [
37529
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between", children: [
37530
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37531
+ "span",
37532
+ {
37533
+ className: "uf-text-xs",
37534
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
37535
+ children: "Received"
37536
+ }
37537
+ ),
37538
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
37539
+ "span",
37540
+ {
37541
+ className: "uf-text-xs",
37542
+ style: { color: colors2.foreground, fontFamily: fonts.medium },
37543
+ children: [
37544
+ "$",
37545
+ receivedUsd.toFixed(2),
37546
+ " / $",
37547
+ totalUsd.toFixed(2)
37548
+ ]
37549
+ }
37550
+ )
37551
+ ] }),
37552
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37162
37553
  "div",
37163
37554
  {
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
- }
37555
+ className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
37556
+ style: { backgroundColor: colors2.border },
37557
+ children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37558
+ "div",
37559
+ {
37560
+ className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
37561
+ style: {
37562
+ width: `${pct}%`,
37563
+ backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
37564
+ }
37565
+ }
37566
+ )
37169
37567
  }
37170
37568
  )
37569
+ ] });
37570
+ })(),
37571
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37572
+ TransferCryptoSingleInput,
37573
+ {
37574
+ userId: paymentIntent.user_id || "",
37575
+ publishableKey,
37576
+ clientSecret,
37577
+ recipientAddress: paymentIntent.recipient_address,
37578
+ destinationChainType: paymentIntent.destination_chain_type,
37579
+ destinationChainId: paymentIntent.destination_chain_id,
37580
+ destinationTokenAddress: paymentIntent.destination_token_address,
37581
+ defaultSourceChainType,
37582
+ defaultSourceChainId,
37583
+ defaultSourceTokenAddress,
37584
+ defaultSourceSymbol,
37585
+ depositConfirmationMode: "auto_ui",
37586
+ wallets,
37587
+ onSourceTokenChange: setSelectedSource,
37588
+ persistCheckingIndicator: true,
37589
+ productType: "payment",
37590
+ checkoutQuote: effectiveCheckoutQuote,
37591
+ isCheckoutQuoteLoading: isQuoteLoading || isQuoteFetching
37171
37592
  }
37172
37593
  )
37173
- ] });
37174
- })(),
37175
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37176
- TransferCryptoSingleInput,
37594
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(SkeletonButton2, {}),
37595
+ poweredByFooter
37596
+ ] })
37597
+ ] }) : view === "wallet_connect" && paymentIntent ? (
37598
+ // Mobile: flex-fill the full-height sheet so the wallet list grows and
37599
+ // scrolls with the footer pinned. Desktop (sm:): content-sized.
37600
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
37601
+ "div",
37177
37602
  {
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
37603
+ className: "uf-flex uf-flex-col uf-gap-1.5 uf-min-h-0 uf-flex-1 sm:uf-flex-none",
37604
+ children: [
37605
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
37606
+ WalletConnect,
37607
+ {
37608
+ walletInfo: browserWalletInfo ?? void 0,
37609
+ depositWallet: browserWalletInfo?.depositWallet ?? void 0,
37610
+ wallets,
37611
+ userId: paymentIntent.user_id || "",
37612
+ publishableKey,
37613
+ clientSecret,
37614
+ prefilledAmountUsd: remainingAmountUsd,
37615
+ checkoutAmountUsd: paymentIntent.amount_usd,
37616
+ checkoutReceivedUsd: paymentIntent.amount_received_usd,
37617
+ checkoutDestination: {
37618
+ chainType: paymentIntent.destination_chain_type,
37619
+ chainId: paymentIntent.destination_chain_id,
37620
+ tokenAddress: paymentIntent.destination_token_address,
37621
+ decimals: paymentIntent.destination_token_decimals ?? 6
37622
+ },
37623
+ productType: "payment",
37624
+ stablecoinParity: paymentIntent.stablecoin_parity ?? false,
37625
+ checkoutRemainingBaseUnits: (() => {
37626
+ const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
37627
+ return remaining > 0n ? remaining.toString() : "0";
37628
+ })(),
37629
+ onSuccess: (_txHash) => {
37630
+ emitCheckoutSuccess(
37631
+ {
37632
+ paymentIntentId: paymentIntent.id,
37633
+ status: "processing",
37634
+ paymentIntent
37635
+ },
37636
+ "wallet_connect"
37637
+ );
37638
+ },
37639
+ onError: (error) => {
37640
+ onCheckoutError?.({
37641
+ message: error.message,
37642
+ error,
37643
+ method: "wallet_connect"
37644
+ });
37645
+ },
37646
+ onWalletDisconnect: handleWalletDisconnect,
37647
+ onWalletConnected: (info, dw) => {
37648
+ setBrowserWalletInfo({ ...info, depositWallet: dw });
37649
+ setStoredWalletState(info.type);
37650
+ setBrowserWalletChainType(dw.chain_type === "solana" ? "solana" : "ethereum");
37651
+ lastCheckoutMethodRef.current = "wallet_connect";
37652
+ },
37653
+ onNewDeposit: () => setView("main"),
37654
+ onDone: () => setView("main"),
37655
+ paymentIntentStatus: paymentIntent.status,
37656
+ onBack: handleBack,
37657
+ onClose: handleClose,
37658
+ defaultSourceChainType,
37659
+ defaultSourceChainId,
37660
+ defaultSourceTokenAddress,
37661
+ defaultSourceSymbol
37662
+ }
37663
+ ),
37664
+ poweredByFooter
37665
+ ]
37196
37666
  }
37197
37667
  )
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 })
37668
+ ) : null
37669
+ }
37670
+ )
37263
37671
  }
37264
37672
  ) }) });
37265
37673
  }
@@ -39569,6 +39977,7 @@ function UnifoldProvider2({
39569
39977
  defaultSourceChainId: depositConfig.defaultSourceChainId,
39570
39978
  defaultSourceTokenAddress: depositConfig.defaultSourceTokenAddress,
39571
39979
  defaultSourceSymbol: depositConfig.defaultSourceSymbol,
39980
+ prefilledAmountUsd: depositConfig.prefilledAmountUsd,
39572
39981
  userEmail: depositConfig.user?.email,
39573
39982
  depositConfirmationMode: depositConfig.depositConfirmationMode ?? "auto_ui",
39574
39983
  hideDepositTracker: config?.hideDepositTracker,