@unifold/ui-web 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.mjs CHANGED
@@ -34688,6 +34688,9 @@ function replaceData(prevData, data, options2) {
34688
34688
  }
34689
34689
  return data;
34690
34690
  }
34691
+ function keepPreviousData(previousData) {
34692
+ return previousData;
34693
+ }
34691
34694
  function addToEnd(items, item, max2 = 0) {
34692
34695
  const newItems = [...items, item];
34693
34696
  return max2 && newItems.length > max2 ? newItems.slice(1) : newItems;
@@ -37100,6 +37103,7 @@ var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
37100
37103
  var React211 = __toESM(require_react(), 1);
37101
37104
  var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
37102
37105
  var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
37106
+ var React522 = __toESM(require_react(), 1);
37103
37107
  var import_react7 = __toESM(require_react(), 1);
37104
37108
  var import_react8 = __toESM(require_react(), 1);
37105
37109
  var import_react9 = __toESM(require_react(), 1);
@@ -37118,7 +37122,7 @@ var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
37118
37122
  var import_jsx_runtime20 = __toESM(require_jsx_runtime(), 1);
37119
37123
  var import_jsx_runtime21 = __toESM(require_jsx_runtime(), 1);
37120
37124
  var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
37121
- var React522 = __toESM(require_react(), 1);
37125
+ var React622 = __toESM(require_react(), 1);
37122
37126
  var import_react15 = __toESM(require_react(), 1);
37123
37127
  var import_react16 = __toESM(require_react(), 1);
37124
37128
  var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
@@ -37132,55 +37136,55 @@ var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
37132
37136
  var import_react21 = __toESM(require_react(), 1);
37133
37137
  var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
37134
37138
  var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
37135
- var React622 = __toESM(require_react(), 1);
37136
- var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
37137
37139
  var React72 = __toESM(require_react(), 1);
37138
- var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
37140
+ var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
37139
37141
  var React82 = __toESM(require_react(), 1);
37142
+ var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
37143
+ var React92 = __toESM(require_react(), 1);
37140
37144
  var import_jsx_runtime31 = __toESM(require_jsx_runtime(), 1);
37145
+ var React112 = __toESM(require_react(), 1);
37141
37146
  var React102 = __toESM(require_react(), 1);
37142
- var React92 = __toESM(require_react(), 1);
37143
37147
  var React25 = __toESM(require_react(), 1);
37144
37148
  var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
37145
37149
  var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
37146
37150
  var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
37147
- var React112 = __toESM(require_react(), 1);
37148
- var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
37149
37151
  var React122 = __toESM(require_react(), 1);
37150
- var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
37152
+ var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
37151
37153
  var React132 = __toESM(require_react(), 1);
37152
- var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1);
37154
+ var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
37153
37155
  var React142 = __toESM(require_react(), 1);
37154
- var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1);
37155
- var React282 = __toESM(require_react(), 1);
37156
+ var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1);
37156
37157
  var React152 = __toESM(require_react(), 1);
37158
+ var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1);
37159
+ var React292 = __toESM(require_react(), 1);
37157
37160
  var React162 = __toESM(require_react(), 1);
37158
- var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1);
37159
37161
  var React172 = __toESM(require_react(), 1);
37160
- var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
37162
+ var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1);
37161
37163
  var React182 = __toESM(require_react(), 1);
37162
- var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
37164
+ var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
37163
37165
  var React192 = __toESM(require_react(), 1);
37164
- var import_jsx_runtime42 = __toESM(require_jsx_runtime(), 1);
37166
+ var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
37165
37167
  var React202 = __toESM(require_react(), 1);
37166
- var import_jsx_runtime43 = __toESM(require_jsx_runtime(), 1);
37168
+ var import_jsx_runtime42 = __toESM(require_jsx_runtime(), 1);
37167
37169
  var React212 = __toESM(require_react(), 1);
37168
- var import_jsx_runtime44 = __toESM(require_jsx_runtime(), 1);
37170
+ var import_jsx_runtime43 = __toESM(require_jsx_runtime(), 1);
37169
37171
  var React2222 = __toESM(require_react(), 1);
37170
- var import_jsx_runtime45 = __toESM(require_jsx_runtime(), 1);
37172
+ var import_jsx_runtime44 = __toESM(require_jsx_runtime(), 1);
37171
37173
  var React232 = __toESM(require_react(), 1);
37172
- var import_jsx_runtime46 = __toESM(require_jsx_runtime(), 1);
37174
+ var import_jsx_runtime45 = __toESM(require_jsx_runtime(), 1);
37173
37175
  var React242 = __toESM(require_react(), 1);
37174
- var import_jsx_runtime47 = __toESM(require_jsx_runtime(), 1);
37176
+ var import_jsx_runtime46 = __toESM(require_jsx_runtime(), 1);
37175
37177
  var React252 = __toESM(require_react(), 1);
37176
- var import_jsx_runtime48 = __toESM(require_jsx_runtime(), 1);
37178
+ var import_jsx_runtime47 = __toESM(require_jsx_runtime(), 1);
37177
37179
  var React262 = __toESM(require_react(), 1);
37178
- var import_jsx_runtime49 = __toESM(require_jsx_runtime(), 1);
37180
+ var import_jsx_runtime48 = __toESM(require_jsx_runtime(), 1);
37179
37181
  var React272 = __toESM(require_react(), 1);
37182
+ var import_jsx_runtime49 = __toESM(require_jsx_runtime(), 1);
37183
+ var React282 = __toESM(require_react(), 1);
37180
37184
  var import_jsx_runtime50 = __toESM(require_jsx_runtime(), 1);
37181
37185
  var import_jsx_runtime51 = __toESM(require_jsx_runtime(), 1);
37182
37186
  var import_jsx_runtime52 = __toESM(require_jsx_runtime(), 1);
37183
- var React292 = __toESM(require_react(), 1);
37187
+ var React302 = __toESM(require_react(), 1);
37184
37188
  var import_jsx_runtime53 = __toESM(require_jsx_runtime(), 1);
37185
37189
  var import_react22 = __toESM(require_react(), 1);
37186
37190
  var import_jsx_runtime54 = __toESM(require_jsx_runtime(), 1);
@@ -37190,7 +37194,7 @@ var import_react24 = __toESM(require_react(), 1);
37190
37194
  var import_jsx_runtime56 = __toESM(require_jsx_runtime(), 1);
37191
37195
  var import_react25 = __toESM(require_react(), 1);
37192
37196
  var import_react26 = __toESM(require_react(), 1);
37193
- var React312 = __toESM(require_react(), 1);
37197
+ var React322 = __toESM(require_react(), 1);
37194
37198
  var import_jsx_runtime57 = __toESM(require_jsx_runtime(), 1);
37195
37199
  var import_jsx_runtime58 = __toESM(require_jsx_runtime(), 1);
37196
37200
  var import_jsx_runtime59 = __toESM(require_jsx_runtime(), 1);
@@ -37200,7 +37204,7 @@ var import_react28 = __toESM(require_react(), 1);
37200
37204
  var import_jsx_runtime61 = __toESM(require_jsx_runtime(), 1);
37201
37205
  var import_jsx_runtime62 = __toESM(require_jsx_runtime(), 1);
37202
37206
  var import_react29 = __toESM(require_react(), 1);
37203
- var React322 = __toESM(require_react(), 1);
37207
+ var React332 = __toESM(require_react(), 1);
37204
37208
  var React31 = __toESM(require_react(), 1);
37205
37209
  var React29 = __toESM(require_react(), 1);
37206
37210
  var React26 = __toESM(require_react(), 1);
@@ -37217,7 +37221,7 @@ var import_jsx_runtime67 = __toESM(require_jsx_runtime(), 1);
37217
37221
  var import_jsx_runtime68 = __toESM(require_jsx_runtime(), 1);
37218
37222
  var import_jsx_runtime69 = __toESM(require_jsx_runtime(), 1);
37219
37223
  var import_react31 = __toESM(require_react(), 1);
37220
- var React332 = __toESM(require_react(), 1);
37224
+ var React342 = __toESM(require_react(), 1);
37221
37225
  var React35 = __toESM(require_react(), 1);
37222
37226
  var ReactDOM4 = __toESM(require_react_dom(), 1);
37223
37227
  var import_react32 = __toESM(require_react(), 1);
@@ -37230,7 +37234,7 @@ var React34 = __toESM(require_react(), 1);
37230
37234
  var import_jsx_runtime73 = __toESM(require_jsx_runtime(), 1);
37231
37235
  var import_jsx_runtime74 = __toESM(require_jsx_runtime(), 1);
37232
37236
  var import_jsx_runtime75 = __toESM(require_jsx_runtime(), 1);
37233
- var React342 = __toESM(require_react(), 1);
37237
+ var React352 = __toESM(require_react(), 1);
37234
37238
  var import_jsx_runtime76 = __toESM(require_jsx_runtime(), 1);
37235
37239
  var import_jsx_runtime77 = __toESM(require_jsx_runtime(), 1);
37236
37240
  var import_jsx_runtime78 = __toESM(require_jsx_runtime(), 1);
@@ -43442,6 +43446,27 @@ async function getFiatCurrencies(publishableKey) {
43442
43446
  }
43443
43447
  return response.json();
43444
43448
  }
43449
+ async function getFiatExchangeRates(options2 = {}, publishableKey) {
43450
+ const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
43451
+ validatePublishableKey(pk);
43452
+ const params = new URLSearchParams();
43453
+ if (options2.currencies && options2.currencies.length > 0) {
43454
+ params.set("currencies", options2.currencies.join(","));
43455
+ }
43456
+ const queryString = params.toString();
43457
+ const url = `${API_BASE_URL}/v1/public/exchange_rates/fiat_currencies${queryString ? `?${queryString}` : ""}`;
43458
+ const response = await fetch(url, {
43459
+ method: "GET",
43460
+ headers: {
43461
+ accept: "application/json",
43462
+ "x-publishable-key": pk
43463
+ }
43464
+ });
43465
+ if (!response.ok) {
43466
+ throw new Error(`Failed to fetch fiat exchange rates: ${response.statusText}`);
43467
+ }
43468
+ return response.json();
43469
+ }
43445
43470
  async function getOnrampQuotes(request, publishableKey) {
43446
43471
  const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
43447
43472
  validatePublishableKey(pk);
@@ -44106,6 +44131,7 @@ async function stripeGetDefaultToken(params, publishableKey) {
44106
44131
  chain_type: params.chainType
44107
44132
  });
44108
44133
  if (params.countryCode) query.append("country_code", params.countryCode);
44134
+ if (params.subdivisionCode) query.append("subdivision_code", params.subdivisionCode);
44109
44135
  const response = await fetch(
44110
44136
  `${API_BASE_URL}${HEADLESS_STRIPE_BASE}/default_token?${query.toString()}`,
44111
44137
  {
@@ -51138,6 +51164,7 @@ var DialogContent2 = React36.forwardRef(({ className, style, children, omitOverl
51138
51164
  className: cn(
51139
51165
  portalContainer ? "uf-absolute" : "uf-fixed",
51140
51166
  "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",
51167
+ "focus:uf-outline-none focus-visible:uf-outline-none",
51141
51168
  !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",
51142
51169
  "uf-border uf-bg-background",
51143
51170
  omitOverlayEmbed ? "uf-gap-0 uf-p-0" : "uf-gap-4 uf-p-6 uf-shadow-lg uf-duration-200",
@@ -51153,6 +51180,14 @@ var DialogContent2 = React36.forwardRef(({ className, style, children, omitOverl
51153
51180
  ),
51154
51181
  style: {
51155
51182
  "--uf-container-radius": `${components.container.borderRadius}px`,
51183
+ // Radix traps focus and, when the focused control unmounts during an
51184
+ // in-modal screen transition, moves focus onto this container. Modern
51185
+ // browsers paint the default focus ring via `:focus-visible`, which
51186
+ // flashes a highlight around the whole modal until focus settles on
51187
+ // the next screen. Suppress it inline so it works regardless of the
51188
+ // Tailwind build (the container is a programmatic focus target, not an
51189
+ // interactive control, so it should never show a focus ring).
51190
+ outline: "none",
51156
51191
  ...portalContainer ? { display: "flex", flexDirection: "column" } : {},
51157
51192
  ...style
51158
51193
  },
@@ -53150,13 +53185,25 @@ function BuyWithCard({
53150
53185
  wallets: externalWallets,
53151
53186
  assetCdnUrl,
53152
53187
  hideDepositFlowInfo = false,
53153
- hideDisplayDescription = false
53188
+ hideDisplayDescription = false,
53189
+ prefilledAmountUsd
53154
53190
  }) {
53155
53191
  const { colors: colors2, fonts, components } = useTheme();
53156
- const [amount, setAmount] = (0, import_react7.useState)("");
53192
+ const cleanedPrefilledAmountUsd = React522.useMemo(() => {
53193
+ if (!prefilledAmountUsd) return "";
53194
+ return prefilledAmountUsd.replace(/[^0-9.]/g, "");
53195
+ }, [prefilledAmountUsd]);
53196
+ const parsedPrefilledAmountUsd = React522.useMemo(() => {
53197
+ const parsed = parseFloat(cleanedPrefilledAmountUsd);
53198
+ return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
53199
+ }, [cleanedPrefilledAmountUsd]);
53200
+ const shouldAutoConvertPrefilledRef = (0, import_react7.useRef)(!!cleanedPrefilledAmountUsd);
53201
+ const [amount, setAmount] = (0, import_react7.useState)(() => cleanedPrefilledAmountUsd);
53157
53202
  const [currency, setCurrency] = (0, import_react7.useState)("usd");
53158
53203
  const [hasManualCurrencySelection, setHasManualCurrencySelection] = (0, import_react7.useState)(false);
53159
- const [hasManualAmountEntry, setHasManualAmountEntry] = (0, import_react7.useState)(false);
53204
+ const [hasManualAmountEntry, setHasManualAmountEntry] = (0, import_react7.useState)(
53205
+ () => !!cleanedPrefilledAmountUsd
53206
+ );
53160
53207
  const [showCurrencyModal, setShowCurrencyModal] = (0, import_react7.useState)(false);
53161
53208
  const [quotes, setQuotes] = (0, import_react7.useState)([]);
53162
53209
  const [quotesLoading, setQuotesLoading] = (0, import_react7.useState)(false);
@@ -53213,6 +53260,71 @@ function BuyWithCard({
53213
53260
  const [preferredCurrencyCodes, setPreferredCurrencyCodes] = (0, import_react7.useState)([]);
53214
53261
  const [currenciesLoading, setCurrenciesLoading] = (0, import_react7.useState)(true);
53215
53262
  const [destinationToken, setDestinationToken] = (0, import_react7.useState)(null);
53263
+ (0, import_react7.useEffect)(() => {
53264
+ const hasPrefilledAmount = !!cleanedPrefilledAmountUsd;
53265
+ shouldAutoConvertPrefilledRef.current = hasPrefilledAmount;
53266
+ if (!hasPrefilledAmount) return;
53267
+ setAmount(cleanedPrefilledAmountUsd);
53268
+ setHasManualAmountEntry(true);
53269
+ }, [cleanedPrefilledAmountUsd]);
53270
+ const { data: fiatExchangeRatesResponse, isLoading: isFiatExchangeRatesLoading } = useQuery({
53271
+ queryKey: ["fiat-exchange-rates", publishableKey],
53272
+ staleTime: 3e4,
53273
+ refetchInterval: 3e4,
53274
+ queryFn: async () => {
53275
+ try {
53276
+ return await getFiatExchangeRates({}, publishableKey);
53277
+ } catch (error) {
53278
+ console.error("Error fetching fiat exchange rates:", error);
53279
+ return { base_currency: "usd", rates: {} };
53280
+ }
53281
+ }
53282
+ });
53283
+ const fiatExchangeRates = fiatExchangeRatesResponse?.rates ?? {};
53284
+ const convertAmountBetweenCurrencies = React522.useCallback(
53285
+ (rawAmount, fromCurrencyCode, toCurrencyCode) => {
53286
+ const parsedAmount = parseFloat(rawAmount);
53287
+ if (!Number.isFinite(parsedAmount) || parsedAmount <= 0) return null;
53288
+ const fromCode = fromCurrencyCode.toLowerCase();
53289
+ const toCode = toCurrencyCode.toLowerCase();
53290
+ const fromRate = fromCode === "usd" ? 1 : fiatExchangeRates[fromCode];
53291
+ const toRate = toCode === "usd" ? 1 : fiatExchangeRates[toCode];
53292
+ if (!Number.isFinite(fromRate) || fromRate <= 0) return null;
53293
+ if (!Number.isFinite(toRate) || toRate <= 0) return null;
53294
+ const usdAmount = parsedAmount / fromRate;
53295
+ return parseFloat((usdAmount * toRate).toFixed(2)).toString();
53296
+ },
53297
+ [fiatExchangeRates]
53298
+ );
53299
+ const getConvertedPrefilledAmount = React522.useCallback(
53300
+ (targetCurrencyCode) => {
53301
+ if (!parsedPrefilledAmountUsd) return null;
53302
+ const normalizedTargetCurrency = targetCurrencyCode.toLowerCase();
53303
+ const rate = normalizedTargetCurrency === "usd" ? 1 : fiatExchangeRates[normalizedTargetCurrency];
53304
+ if (!Number.isFinite(rate) || rate <= 0) return null;
53305
+ return parseFloat((parsedPrefilledAmountUsd * rate).toFixed(2)).toString();
53306
+ },
53307
+ [parsedPrefilledAmountUsd, fiatExchangeRates]
53308
+ );
53309
+ (0, import_react7.useEffect)(() => {
53310
+ if (!cleanedPrefilledAmountUsd || !shouldAutoConvertPrefilledRef.current) return;
53311
+ const convertedAmount = getConvertedPrefilledAmount(currency);
53312
+ if (!convertedAmount) {
53313
+ if (isFiatExchangeRatesLoading) return;
53314
+ const targetCurrency = currency.toLowerCase();
53315
+ if (targetCurrency !== "usd") {
53316
+ setCurrency("usd");
53317
+ }
53318
+ return;
53319
+ }
53320
+ setAmount(convertedAmount);
53321
+ setHasManualAmountEntry(true);
53322
+ }, [
53323
+ cleanedPrefilledAmountUsd,
53324
+ currency,
53325
+ getConvertedPrefilledAmount,
53326
+ isFiatExchangeRatesLoading
53327
+ ]);
53216
53328
  const depositWalletId = defaultToken ? getWalletByChainType(wallets, defaultToken.destination_token_metadata.chain_type)?.id : void 0;
53217
53329
  const { executions, isPolling, showWaitingUi } = useDepositPolling({
53218
53330
  userId,
@@ -53243,6 +53355,7 @@ function BuyWithCard({
53243
53355
  }, [publishableKey]);
53244
53356
  (0, import_react7.useEffect)(() => {
53245
53357
  if (hasManualCurrencySelection) return;
53358
+ if (hasManualAmountEntry && !shouldAutoConvertPrefilledRef.current) return;
53246
53359
  if (fiatCurrencies.length === 0 || !userIpInfo?.alpha2) return;
53247
53360
  const userCountryCode = userIpInfo.alpha2;
53248
53361
  const matchingCurrency = fiatCurrencies.find((c) => c.country_codes.includes(userCountryCode));
@@ -53261,7 +53374,15 @@ function BuyWithCard({
53261
53374
  const prevCurrencyRef = (0, import_react7.useRef)(null);
53262
53375
  (0, import_react7.useEffect)(() => {
53263
53376
  if (fiatCurrencies.length === 0) return;
53377
+ if (shouldAutoConvertPrefilledRef.current) {
53378
+ prevCurrencyRef.current = currency;
53379
+ return;
53380
+ }
53264
53381
  if (prevCurrencyRef.current !== null && prevCurrencyRef.current !== currency) {
53382
+ if (hasManualAmountEntry) {
53383
+ prevCurrencyRef.current = currency;
53384
+ return;
53385
+ }
53265
53386
  const currentCurrency = fiatCurrencies.find(
53266
53387
  (c) => c.currency_code.toLowerCase() === currency.toLowerCase()
53267
53388
  );
@@ -53270,7 +53391,7 @@ function BuyWithCard({
53270
53391
  }
53271
53392
  }
53272
53393
  prevCurrencyRef.current = currency;
53273
- }, [currency]);
53394
+ }, [currency, fiatCurrencies, hasManualAmountEntry]);
53274
53395
  (0, import_react7.useEffect)(() => {
53275
53396
  async function fetchDestinationToken() {
53276
53397
  try {
@@ -53447,6 +53568,7 @@ function BuyWithCard({
53447
53568
  return () => clearInterval(timer);
53448
53569
  }, [quotes.length, amount]);
53449
53570
  const handleAmountChange = (value) => {
53571
+ shouldAutoConvertPrefilledRef.current = false;
53450
53572
  if (value === "") {
53451
53573
  setAmount(value);
53452
53574
  setHasManualAmountEntry(true);
@@ -53460,6 +53582,7 @@ function BuyWithCard({
53460
53582
  }
53461
53583
  };
53462
53584
  const handleQuickAmount = (quickAmount) => {
53585
+ shouldAutoConvertPrefilledRef.current = false;
53463
53586
  setAmount(quickAmount.toString());
53464
53587
  setHasManualAmountEntry(true);
53465
53588
  };
@@ -54063,8 +54186,43 @@ function BuyWithCard({
54063
54186
  preferredCurrencyCodes,
54064
54187
  selectedCurrency: currency,
54065
54188
  onSelectCurrency: (currencyCode) => {
54066
- setCurrency(currencyCode.toLowerCase());
54189
+ const nextCurrency = currencyCode.toLowerCase();
54190
+ if (nextCurrency === currency.toLowerCase()) {
54191
+ setHasManualCurrencySelection(true);
54192
+ return;
54193
+ }
54194
+ const currentCurrency = currency;
54067
54195
  setHasManualCurrencySelection(true);
54196
+ if (shouldAutoConvertPrefilledRef.current) {
54197
+ const convertedAmount = getConvertedPrefilledAmount(nextCurrency);
54198
+ if (convertedAmount) {
54199
+ setCurrency(nextCurrency);
54200
+ setAmount(convertedAmount);
54201
+ setHasManualAmountEntry(true);
54202
+ } else {
54203
+ if (isFiatExchangeRatesLoading) return;
54204
+ const fallbackUsdAmount = getConvertedPrefilledAmount("usd");
54205
+ setCurrency("usd");
54206
+ if (fallbackUsdAmount) {
54207
+ setAmount(fallbackUsdAmount);
54208
+ setHasManualAmountEntry(true);
54209
+ }
54210
+ }
54211
+ return;
54212
+ }
54213
+ if (hasManualAmountEntry && amount) {
54214
+ const convertedAmount = convertAmountBetweenCurrencies(
54215
+ amount,
54216
+ currentCurrency,
54217
+ nextCurrency
54218
+ );
54219
+ if (convertedAmount) {
54220
+ setCurrency(nextCurrency);
54221
+ setAmount(convertedAmount);
54222
+ }
54223
+ return;
54224
+ }
54225
+ setCurrency(nextCurrency);
54068
54226
  },
54069
54227
  themeClass
54070
54228
  }
@@ -54309,7 +54467,7 @@ function parseCoinbasePostMessage(raw) {
54309
54467
  } : void 0
54310
54468
  };
54311
54469
  }
54312
- var BuyWithApplePay = React522.forwardRef(
54470
+ var BuyWithApplePay = React622.forwardRef(
54313
54471
  function BuyWithApplePay2({
54314
54472
  userId,
54315
54473
  publishableKey,
@@ -54468,7 +54626,7 @@ var BuyWithApplePay = React522.forwardRef(
54468
54626
  popupRef.current = null;
54469
54627
  };
54470
54628
  }, []);
54471
- React522.useImperativeHandle(
54629
+ React622.useImperativeHandle(
54472
54630
  ref,
54473
54631
  () => ({
54474
54632
  requestBack: () => {
@@ -55778,7 +55936,7 @@ function LegalDisclaimer({ legalAgreements, loading }) {
55778
55936
  children: [
55779
55937
  "By continuing, you agree to Coinbase's",
55780
55938
  " ",
55781
- agreements.map((a, idx, arr) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(React522.Fragment, { children: [
55939
+ agreements.map((a, idx, arr) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(React622.Fragment, { children: [
55782
55940
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
55783
55941
  "a",
55784
55942
  {
@@ -56207,6 +56365,7 @@ var POLL_INTERVAL_MS2 = 5e3;
56207
56365
  var FALLBACK_MIN_USD = 5;
56208
56366
  var SUGGESTED_AMOUNTS = [25, 50, 100];
56209
56367
  var t3 = i18n2.depositModal.cashApp;
56368
+ var sanitizePrefilledUsd = (value) => value?.replace(/[^0-9.]/g, "") ?? "";
56210
56369
  function PayWithCashApp({
56211
56370
  userId,
56212
56371
  publishableKey,
@@ -56221,6 +56380,7 @@ function PayWithCashApp({
56221
56380
  onEvent,
56222
56381
  onDepositSuccess,
56223
56382
  onDepositError,
56383
+ prefilledAmountUsd,
56224
56384
  wallets = []
56225
56385
  }) {
56226
56386
  const { colors: colors2, fonts, components } = useTheme();
@@ -56236,7 +56396,7 @@ function PayWithCashApp({
56236
56396
  const { data: limits, isLoading: limitsLoading } = useCashAppLimits({ publishableKey });
56237
56397
  const minUsd = limits?.minimum_amount ?? FALLBACK_MIN_USD;
56238
56398
  const maxUsd = limits?.maximum_amount ?? null;
56239
- const [amount, setAmount] = (0, import_react18.useState)("");
56399
+ const [amount, setAmount] = (0, import_react18.useState)(() => sanitizePrefilledUsd(prefilledAmountUsd));
56240
56400
  const [loading, setLoading] = (0, import_react18.useState)(false);
56241
56401
  const [session, setSession] = (0, import_react18.useState)(null);
56242
56402
  const [status, setStatus] = (0, import_react18.useState)("pending");
@@ -56359,6 +56519,13 @@ function PayWithCashApp({
56359
56519
  return () => clearInterval(interval);
56360
56520
  }, [session, view, status, publishableKey, onDepositSuccess, onDepositError]);
56361
56521
  const [softExpired, setSoftExpired] = (0, import_react18.useState)(false);
56522
+ (0, import_react18.useEffect)(() => {
56523
+ if (!prefilledAmountUsd) return;
56524
+ const cleaned = sanitizePrefilledUsd(prefilledAmountUsd);
56525
+ if (!cleaned) return;
56526
+ setAmount(cleaned);
56527
+ onAmountChange?.(cleaned);
56528
+ }, [prefilledAmountUsd, onAmountChange]);
56362
56529
  (0, import_react18.useEffect)(() => {
56363
56530
  if (!session?.expires_at || view !== "payment") return;
56364
56531
  const expiresMs = new Date(session.expires_at).getTime();
@@ -56751,7 +56918,8 @@ function BankTransfer({
56751
56918
  assetCdnUrl,
56752
56919
  onDepositSuccess,
56753
56920
  onEvent,
56754
- onDepositError
56921
+ onDepositError,
56922
+ prefilledAmountUsd
56755
56923
  }) {
56756
56924
  const { colors: colors2, fonts, components } = useTheme();
56757
56925
  const [internalView, setInternalView] = (0, import_react21.useState)("providers");
@@ -56761,6 +56929,10 @@ function BankTransfer({
56761
56929
  const [requestBase, setRequestBase] = (0, import_react21.useState)(null);
56762
56930
  const [activeRequest, setActiveRequest] = (0, import_react21.useState)(null);
56763
56931
  const [amount, setAmount] = (0, import_react21.useState)("");
56932
+ const [fiatExchangeRates, setFiatExchangeRates] = (0, import_react21.useState)({
56933
+ usd: 1
56934
+ });
56935
+ const providerSelectionRequestIdRef = (0, import_react21.useRef)(0);
56764
56936
  const currentView = externalView ?? internalView;
56765
56937
  const setView = (v) => {
56766
56938
  setInternalView(v);
@@ -56810,7 +56982,38 @@ function BankTransfer({
56810
56982
  () => destinationTokenSymbol?.toUpperCase() ?? defaultToken?.destination_token_metadata?.symbol?.toUpperCase() ?? defaultToken?.destination_currency?.toUpperCase() ?? "USDC",
56811
56983
  [destinationTokenSymbol, defaultToken]
56812
56984
  );
56813
- const handleProviderClick = (provider) => {
56985
+ const resolvePrefilledSourceAmount = (0, import_react21.useCallback)(
56986
+ async (sourceCurrencyCode) => {
56987
+ const cleanedPrefilled = prefilledAmountUsd?.replace(/[^0-9.]/g, "") ?? "";
56988
+ if (!cleanedPrefilled) return "";
56989
+ const prefilledUsd = parseFloat(cleanedPrefilled);
56990
+ if (!Number.isFinite(prefilledUsd) || prefilledUsd <= 0) return "";
56991
+ const sourceCurrency2 = sourceCurrencyCode.toLowerCase();
56992
+ let rate = sourceCurrency2 === "usd" ? 1 : fiatExchangeRates[sourceCurrency2];
56993
+ if ((!rate || rate <= 0) && sourceCurrency2 !== "usd") {
56994
+ try {
56995
+ const response = await getFiatExchangeRates({}, publishableKey);
56996
+ if (response?.rates) {
56997
+ setFiatExchangeRates((prev) => ({
56998
+ ...prev,
56999
+ ...response.rates,
57000
+ usd: 1
57001
+ }));
57002
+ }
57003
+ const fetchedRate = response.rates?.[sourceCurrency2];
57004
+ if (Number.isFinite(fetchedRate) && fetchedRate > 0) {
57005
+ rate = fetchedRate;
57006
+ }
57007
+ } catch (error) {
57008
+ console.error("Error fetching fiat exchange rates for bank transfer:", error);
57009
+ }
57010
+ }
57011
+ if (!rate || rate <= 0) return sourceCurrency2 === "usd" ? cleanedPrefilled : "";
57012
+ return parseFloat((prefilledUsd * rate).toFixed(2)).toString();
57013
+ },
57014
+ [fiatExchangeRates, prefilledAmountUsd, publishableKey]
57015
+ );
57016
+ const handleProviderClick = async (provider) => {
56814
57017
  if (!provider.enabled) return;
56815
57018
  setSessionError(null);
56816
57019
  if (!defaultToken) {
@@ -56829,6 +57032,7 @@ function BankTransfer({
56829
57032
  });
56830
57033
  return;
56831
57034
  }
57035
+ const requestId = ++providerSelectionRequestIdRef.current;
56832
57036
  setRequestBase({
56833
57037
  service_provider: provider.service_provider,
56834
57038
  country_code: (userIpInfo?.alpha2 || "DE").toUpperCase(),
@@ -56842,7 +57046,10 @@ function BankTransfer({
56842
57046
  payment_method: provider.payment_methods[0]
56843
57047
  });
56844
57048
  setActiveProvider(provider);
56845
- setAmount("100");
57049
+ const convertedPrefilled = await resolvePrefilledSourceAmount(provider.source_currency);
57050
+ if (requestId !== providerSelectionRequestIdRef.current) return;
57051
+ const hasPrefilledAmount = !!prefilledAmountUsd?.replace(/[^0-9.]/g, "");
57052
+ setAmount(hasPrefilledAmount ? convertedPrefilled : "100");
56846
57053
  setView("amount");
56847
57054
  };
56848
57055
  const handleAmountChange = (value) => {
@@ -56940,7 +57147,7 @@ function BankTransfer({
56940
57147
  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
56941
57148
  "button",
56942
57149
  {
56943
- onClick: () => handleProviderClick(provider),
57150
+ onClick: () => void handleProviderClick(provider),
56944
57151
  onMouseEnter: () => !disabled && setHoveredId(provider.service_provider),
56945
57152
  onMouseLeave: () => setHoveredId(null),
56946
57153
  disabled,
@@ -57509,9 +57716,9 @@ function TransferCryptoButton({
57509
57716
  featuredTokens
57510
57717
  }) {
57511
57718
  const { colors: colors2, fonts, components } = useTheme();
57512
- const [isHovered, setIsHovered] = React622.useState(false);
57513
- const [isTouchDevice, setIsTouchDevice] = React622.useState(false);
57514
- React622.useEffect(() => {
57719
+ const [isHovered, setIsHovered] = React72.useState(false);
57720
+ const [isTouchDevice, setIsTouchDevice] = React72.useState(false);
57721
+ React72.useEffect(() => {
57515
57722
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
57516
57723
  }, []);
57517
57724
  const sortedTokens = featuredTokens ? [...featuredTokens].sort((a, b) => a.position - b.position) : [];
@@ -57591,9 +57798,9 @@ function DepositWithCardButton({
57591
57798
  paymentNetworks
57592
57799
  }) {
57593
57800
  const { colors: colors2, fonts, components } = useTheme();
57594
- const [isHovered, setIsHovered] = React72.useState(false);
57595
- const [isTouchDevice, setIsTouchDevice] = React72.useState(false);
57596
- React72.useEffect(() => {
57801
+ const [isHovered, setIsHovered] = React82.useState(false);
57802
+ const [isTouchDevice, setIsTouchDevice] = React82.useState(false);
57803
+ React82.useEffect(() => {
57597
57804
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
57598
57805
  }, []);
57599
57806
  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
@@ -57672,9 +57879,9 @@ function PayWithExchangeButton({
57672
57879
  loading = false
57673
57880
  }) {
57674
57881
  const { colors: colors2, fonts, components } = useTheme();
57675
- const [isHovered, setIsHovered] = React82.useState(false);
57676
- const [isTouchDevice, setIsTouchDevice] = React82.useState(false);
57677
- React82.useEffect(() => {
57882
+ const [isHovered, setIsHovered] = React92.useState(false);
57883
+ const [isTouchDevice, setIsTouchDevice] = React92.useState(false);
57884
+ React92.useEffect(() => {
57678
57885
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
57679
57886
  }, []);
57680
57887
  if (loading) {
@@ -57776,11 +57983,11 @@ var buttonVariants = cva(
57776
57983
  }
57777
57984
  }
57778
57985
  );
57779
- var Button = React92.forwardRef(
57986
+ var Button = React102.forwardRef(
57780
57987
  ({ className, variant, size: size4, asChild = false, style, ...props }, ref) => {
57781
57988
  const Comp = asChild ? Slot2 : "button";
57782
57989
  const { components, fonts } = useTheme();
57783
- const themeStyle = React92.useMemo(() => {
57990
+ const themeStyle = React102.useMemo(() => {
57784
57991
  const baseStyle = { ...style };
57785
57992
  if (variant === "default" || !variant) {
57786
57993
  baseStyle.backgroundColor = components.button.primaryBackground;
@@ -57815,9 +58022,9 @@ function ConnectExchangeButton({
57815
58022
  connectedExchange
57816
58023
  }) {
57817
58024
  const { colors: colors2, fonts, components } = useTheme();
57818
- const [isHovered, setIsHovered] = React102.useState(false);
57819
- const [isTouchDevice, setIsTouchDevice] = React102.useState(false);
57820
- React102.useEffect(() => {
58025
+ const [isHovered, setIsHovered] = React112.useState(false);
58026
+ const [isTouchDevice, setIsTouchDevice] = React112.useState(false);
58027
+ React112.useEffect(() => {
57821
58028
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
57822
58029
  }, []);
57823
58030
  const isConnected = connectedExchange != null;
@@ -57962,9 +58169,9 @@ function DepositTrackerButton({
57962
58169
  badge
57963
58170
  }) {
57964
58171
  const { colors: colors2, fonts, components } = useTheme();
57965
- const [isHovered, setIsHovered] = React112.useState(false);
57966
- const [isTouchDevice, setIsTouchDevice] = React112.useState(false);
57967
- React112.useEffect(() => {
58172
+ const [isHovered, setIsHovered] = React122.useState(false);
58173
+ const [isTouchDevice, setIsTouchDevice] = React122.useState(false);
58174
+ React122.useEffect(() => {
57968
58175
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
57969
58176
  }, []);
57970
58177
  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
@@ -58035,9 +58242,9 @@ function DepositTrackerButton({
58035
58242
  }
58036
58243
  function CashAppButton({ onClick, title, subtitle, iconUrl }) {
58037
58244
  const { colors: colors2, fonts, components } = useTheme();
58038
- const [isHovered, setIsHovered] = React122.useState(false);
58039
- const [isTouchDevice, setIsTouchDevice] = React122.useState(false);
58040
- React122.useEffect(() => {
58245
+ const [isHovered, setIsHovered] = React132.useState(false);
58246
+ const [isTouchDevice, setIsTouchDevice] = React132.useState(false);
58247
+ React132.useEffect(() => {
58041
58248
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
58042
58249
  }, []);
58043
58250
  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
@@ -58121,9 +58328,9 @@ function AppleLogo({ className, style }) {
58121
58328
  }
58122
58329
  function ApplePayButton({ onClick, title, subtitle }) {
58123
58330
  const { colors: colors2, fonts, components } = useTheme();
58124
- const [isHovered, setIsHovered] = React132.useState(false);
58125
- const [isTouchDevice, setIsTouchDevice] = React132.useState(false);
58126
- React132.useEffect(() => {
58331
+ const [isHovered, setIsHovered] = React142.useState(false);
58332
+ const [isTouchDevice, setIsTouchDevice] = React142.useState(false);
58333
+ React142.useEffect(() => {
58127
58334
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
58128
58335
  }, []);
58129
58336
  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
@@ -58185,9 +58392,9 @@ function BankTransferButton({
58185
58392
  comingSoon = false
58186
58393
  }) {
58187
58394
  const { colors: colors2, fonts, components } = useTheme();
58188
- const [isHovered, setIsHovered] = React142.useState(false);
58189
- const [isTouchDevice, setIsTouchDevice] = React142.useState(false);
58190
- React142.useEffect(() => {
58395
+ const [isHovered, setIsHovered] = React152.useState(false);
58396
+ const [isTouchDevice, setIsTouchDevice] = React152.useState(false);
58397
+ React152.useEffect(() => {
58191
58398
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
58192
58399
  }, []);
58193
58400
  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
@@ -58436,18 +58643,18 @@ async function detectConnectedBrowserWallet(chainType) {
58436
58643
  }
58437
58644
  function useDetectedBrowserWallet(opts = {}) {
58438
58645
  const { chainType, enabled = true, onDisconnect } = opts;
58439
- const [wallet, setWallet] = React152.useState(null);
58440
- const [isLoading, setIsLoading] = React152.useState(enabled);
58441
- const [eip6963ProviderCount, setEip6963ProviderCount] = React152.useState(0);
58442
- const onDisconnectRef = React152.useRef(onDisconnect);
58646
+ const [wallet, setWallet] = React162.useState(null);
58647
+ const [isLoading, setIsLoading] = React162.useState(enabled);
58648
+ const [eip6963ProviderCount, setEip6963ProviderCount] = React162.useState(0);
58649
+ const onDisconnectRef = React162.useRef(onDisconnect);
58443
58650
  onDisconnectRef.current = onDisconnect;
58444
- React152.useEffect(() => {
58651
+ React162.useEffect(() => {
58445
58652
  const store = getEip6963Store();
58446
58653
  if (!store) return;
58447
58654
  setEip6963ProviderCount(store.getProviders().length);
58448
58655
  return store.subscribe((providers) => setEip6963ProviderCount(providers.length));
58449
58656
  }, []);
58450
- React152.useEffect(() => {
58657
+ React162.useEffect(() => {
58451
58658
  if (!enabled) {
58452
58659
  setWallet(null);
58453
58660
  setIsLoading(false);
@@ -58588,7 +58795,7 @@ async function disconnectInjectedBrowserWallet(wallet) {
58588
58795
  );
58589
58796
  }
58590
58797
  function MetamaskIcon({ size: size4 = 24, className, variant = "color" }) {
58591
- const id = React162.useId();
58798
+ const id = React172.useId();
58592
58799
  if (variant === "light" || variant === "dark") {
58593
58800
  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
58594
58801
  "svg",
@@ -58709,7 +58916,7 @@ function MetamaskIcon({ size: size4 = 24, className, variant = "color" }) {
58709
58916
  );
58710
58917
  }
58711
58918
  function PhantomIcon({ size: size4 = 24, className, variant = "color" }) {
58712
- const id = React172.useId();
58919
+ const id = React182.useId();
58713
58920
  if (variant === "light") {
58714
58921
  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
58715
58922
  "svg",
@@ -58776,7 +58983,7 @@ function PhantomIcon({ size: size4 = 24, className, variant = "color" }) {
58776
58983
  );
58777
58984
  }
58778
58985
  function CoinbaseIcon({ size: size4 = 24, className, variant = "color" }) {
58779
- const id = React182.useId();
58986
+ const id = React192.useId();
58780
58987
  if (variant === "light") {
58781
58988
  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
58782
58989
  "svg",
@@ -58856,7 +59063,7 @@ function CoinbaseIcon({ size: size4 = 24, className, variant = "color" }) {
58856
59063
  );
58857
59064
  }
58858
59065
  function RabbyIcon({ size: size4 = 24, className, variant = "color" }) {
58859
- const id = React192.useId();
59066
+ const id = React202.useId();
58860
59067
  if (variant === "light") {
58861
59068
  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
58862
59069
  "svg",
@@ -59203,7 +59410,7 @@ function RabbyIcon({ size: size4 = 24, className, variant = "color" }) {
59203
59410
  );
59204
59411
  }
59205
59412
  function RainbowIcon({ size: size4 = 24, className, variant = "color" }) {
59206
- const id = React202.useId();
59413
+ const id = React212.useId();
59207
59414
  if (variant === "light") {
59208
59415
  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
59209
59416
  "svg",
@@ -59617,7 +59824,7 @@ function RainbowIcon({ size: size4 = 24, className, variant = "color" }) {
59617
59824
  );
59618
59825
  }
59619
59826
  function TrustIcon({ size: size4 = 24, className, variant = "color" }) {
59620
- const id = React212.useId();
59827
+ const id = React2222.useId();
59621
59828
  if (variant === "light") {
59622
59829
  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
59623
59830
  "svg",
@@ -59700,7 +59907,7 @@ function TrustIcon({ size: size4 = 24, className, variant = "color" }) {
59700
59907
  );
59701
59908
  }
59702
59909
  function OkxIcon({ size: size4 = 24, className, variant = "color" }) {
59703
- const id = React2222.useId();
59910
+ const id = React232.useId();
59704
59911
  if (variant === "light") {
59705
59912
  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
59706
59913
  "svg",
@@ -59755,7 +59962,7 @@ function OkxIcon({ size: size4 = 24, className, variant = "color" }) {
59755
59962
  );
59756
59963
  }
59757
59964
  function GlowIcon({ size: size4 = 24, className, variant = "color" }) {
59758
- const id = React232.useId();
59965
+ const id = React242.useId();
59759
59966
  if (variant === "light") {
59760
59967
  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
59761
59968
  "svg",
@@ -59856,7 +60063,7 @@ function GlowIcon({ size: size4 = 24, className, variant = "color" }) {
59856
60063
  );
59857
60064
  }
59858
60065
  function BackpackIcon({ size: size4 = 24, className, variant = "color" }) {
59859
- const id = React242.useId();
60066
+ const id = React252.useId();
59860
60067
  if (variant === "light") {
59861
60068
  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
59862
60069
  "svg",
@@ -59929,7 +60136,7 @@ function BackpackIcon({ size: size4 = 24, className, variant = "color" }) {
59929
60136
  );
59930
60137
  }
59931
60138
  function SolflareIcon({ size: size4 = 24, className, variant = "color" }) {
59932
- const id = React252.useId();
60139
+ const id = React262.useId();
59933
60140
  if (variant === "light") {
59934
60141
  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
59935
60142
  "svg",
@@ -59996,7 +60203,7 @@ function SolflareIcon({ size: size4 = 24, className, variant = "color" }) {
59996
60203
  );
59997
60204
  }
59998
60205
  function EthereumIcon({ size: size4 = 24, className, variant = "color" }) {
59999
- const id = React262.useId();
60206
+ const id = React272.useId();
60000
60207
  if (variant === "light") {
60001
60208
  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
60002
60209
  "svg",
@@ -60120,7 +60327,7 @@ function EthereumIcon({ size: size4 = 24, className, variant = "color" }) {
60120
60327
  );
60121
60328
  }
60122
60329
  function SolanaIcon({ size: size4 = 24, className, variant = "color" }) {
60123
- const id = React272.useId();
60330
+ const id = React282.useId();
60124
60331
  if (variant === "light") {
60125
60332
  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
60126
60333
  "svg",
@@ -60365,19 +60572,19 @@ function BrowserWalletButton({
60365
60572
  subtitle = i18n2.depositModal.browserWallet.subtitle
60366
60573
  }) {
60367
60574
  const { colors: colors2, fonts, components } = useTheme();
60368
- const [isHovered, setIsHovered] = React282.useState(false);
60369
- const [isTouchDevice, setIsTouchDevice] = React282.useState(false);
60575
+ const [isHovered, setIsHovered] = React292.useState(false);
60576
+ const [isTouchDevice, setIsTouchDevice] = React292.useState(false);
60370
60577
  const { wallet, isLoading, setWallet } = useDetectedBrowserWallet({ chainType, onDisconnect });
60371
- const [isConnecting, setIsConnecting] = React282.useState(false);
60372
- const [balanceText, setBalanceText] = React282.useState(null);
60373
- const [isLoadingBalance, setIsLoadingBalance] = React282.useState(false);
60374
- const [isDisconnecting, setIsDisconnecting] = React282.useState(false);
60375
- const onDisconnectRef = React282.useRef(onDisconnect);
60578
+ const [isConnecting, setIsConnecting] = React292.useState(false);
60579
+ const [balanceText, setBalanceText] = React292.useState(null);
60580
+ const [isLoadingBalance, setIsLoadingBalance] = React292.useState(false);
60581
+ const [isDisconnecting, setIsDisconnecting] = React292.useState(false);
60582
+ const onDisconnectRef = React292.useRef(onDisconnect);
60376
60583
  onDisconnectRef.current = onDisconnect;
60377
- React282.useEffect(() => {
60584
+ React292.useEffect(() => {
60378
60585
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
60379
60586
  }, []);
60380
- React282.useEffect(() => {
60587
+ React292.useEffect(() => {
60381
60588
  if (!wallet || !publishableKey) {
60382
60589
  setBalanceText(null);
60383
60590
  return;
@@ -60504,7 +60711,7 @@ function BrowserWalletButton({
60504
60711
  border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
60505
60712
  };
60506
60713
  const sortedWallets = featuredWallets ? [...featuredWallets].sort((a, b) => a.position - b.position) : [];
60507
- const walletIconBlock = wallet ? WALLET_ICON_COMPONENTS[wallet.icon] ? React282.createElement(WALLET_ICON_COMPONENTS[wallet.icon], {
60714
+ const walletIconBlock = wallet ? WALLET_ICON_COMPONENTS[wallet.icon] ? React292.createElement(WALLET_ICON_COMPONENTS[wallet.icon], {
60508
60715
  size: 36,
60509
60716
  className: "uf-rounded-lg",
60510
60717
  variant: "color"
@@ -60655,9 +60862,9 @@ function StripeLinkButton({
60655
60862
  iconUrl
60656
60863
  }) {
60657
60864
  const { colors: colors2, fonts, components } = useTheme();
60658
- const [isHovered, setIsHovered] = React292.useState(false);
60659
- const [isTouchDevice, setIsTouchDevice] = React292.useState(false);
60660
- React292.useEffect(() => {
60865
+ const [isHovered, setIsHovered] = React302.useState(false);
60866
+ const [isTouchDevice, setIsTouchDevice] = React302.useState(false);
60867
+ React302.useEffect(() => {
60661
60868
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
60662
60869
  }, []);
60663
60870
  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
@@ -61143,6 +61350,8 @@ function PayWithStripeLink({
61143
61350
  destinationChainType,
61144
61351
  destinationChainId,
61145
61352
  destinationTokenAddress,
61353
+ countryCode,
61354
+ subdivisionCode,
61146
61355
  wallets: externalWallets,
61147
61356
  email: emailProp,
61148
61357
  iconUrl,
@@ -61537,7 +61746,9 @@ function PayWithStripeLink({
61537
61746
  {
61538
61747
  tokenAddress: destinationTokenAddress,
61539
61748
  chainId: destinationChainId,
61540
- chainType: destinationChainType
61749
+ chainType: destinationChainType,
61750
+ countryCode,
61751
+ subdivisionCode
61541
61752
  },
61542
61753
  publishableKey
61543
61754
  ).then((token) => {
@@ -61556,7 +61767,14 @@ function PayWithStripeLink({
61556
61767
  return () => {
61557
61768
  cancelled = true;
61558
61769
  };
61559
- }, [publishableKey, destinationTokenAddress, destinationChainId, destinationChainType]);
61770
+ }, [
61771
+ publishableKey,
61772
+ destinationTokenAddress,
61773
+ destinationChainId,
61774
+ destinationChainType,
61775
+ countryCode,
61776
+ subdivisionCode
61777
+ ]);
61560
61778
  const destinationCurrency = stripeDestCurrency;
61561
61779
  const authInnerRef = (0, import_react22.useRef)(null);
61562
61780
  const paymentInnerRef = (0, import_react22.useRef)(null);
@@ -63269,10 +63487,16 @@ function PayWithStripeLink({
63269
63487
  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
63270
63488
  "div",
63271
63489
  {
63272
- className: "uf-flex uf-flex-col uf-py-4 uf-overflow-y-auto uf-max-h-[70vh]",
63490
+ className: "uf-flex uf-flex-col uf-py-4 uf-overflow-y-auto uf-overflow-x-hidden uf-max-h-[70vh]",
63273
63491
  style: { backgroundColor: colors2.background },
63274
63492
  children: [
63275
- /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { ref: paymentMountRef, className: "uf-w-full uf-flex-1 uf-overflow-y-auto" }),
63493
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
63494
+ "div",
63495
+ {
63496
+ ref: paymentMountRef,
63497
+ className: "uf-w-full uf-flex-1 uf-overflow-y-auto uf-overflow-x-hidden"
63498
+ }
63499
+ ),
63276
63500
  !stripePaymentUIReady && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-8", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(LoaderCircle, { className: "uf-w-8 uf-h-8 uf-animate-spin", style: { color: colors2.primary } }) }),
63277
63501
  error && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
63278
63502
  "div",
@@ -63290,7 +63514,7 @@ function PayWithStripeLink({
63290
63514
  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
63291
63515
  "div",
63292
63516
  {
63293
- className: "uf-flex uf-flex-col uf-py-4 uf-overflow-y-auto uf-max-h-[70vh]",
63517
+ className: "uf-flex uf-flex-col uf-py-4 uf-overflow-y-auto uf-overflow-x-hidden uf-max-h-[70vh]",
63294
63518
  style: { backgroundColor: colors2.background },
63295
63519
  children: [
63296
63520
  displayPaymentTokens.length === 0 && !loading && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uf-px-1 uf-mb-3 uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
@@ -64400,17 +64624,30 @@ function PayWithStripeLink({
64400
64624
  }
64401
64625
  function useProjectConfig({
64402
64626
  publishableKey,
64403
- enabled = true
64627
+ enabled = true,
64628
+ countryCode,
64629
+ subdivisionCode
64404
64630
  }) {
64405
- const { data: projectConfig, isLoading } = useQuery({
64406
- queryKey: ["unifold", "projectConfig", publishableKey],
64407
- queryFn: () => getProjectConfig(publishableKey),
64631
+ const {
64632
+ data: projectConfig,
64633
+ isLoading,
64634
+ error
64635
+ } = useQuery({
64636
+ // Country is part of the key so a region change refetches the region-aware
64637
+ // config. Omitted when undefined so callers that don't pass a country keep
64638
+ // sharing the base cache entry.
64639
+ queryKey: countryCode ? ["unifold", "projectConfig", publishableKey, countryCode, subdivisionCode ?? null] : ["unifold", "projectConfig", publishableKey],
64640
+ queryFn: () => getProjectConfig(publishableKey, countryCode ? { countryCode, subdivisionCode } : void 0),
64408
64641
  enabled,
64642
+ // Keep the previous (e.g. no-country) config visible while the region-aware
64643
+ // config refetches after the country resolves, so unrelated config-driven
64644
+ // UI doesn't flash back to defaults.
64645
+ placeholderData: keepPreviousData,
64409
64646
  staleTime: 1e3 * 60 * 30,
64410
64647
  refetchOnMount: true,
64411
64648
  refetchOnWindowFocus: true
64412
64649
  });
64413
- return { projectConfig, isLoading };
64650
+ return { projectConfig, isLoading, error: error ?? null };
64414
64651
  }
64415
64652
  function useSupportedDepositTokens(publishableKey, options2) {
64416
64653
  const hasDestination = options2?.destination_token_address && options2?.destination_chain_id && options2?.destination_chain_type;
@@ -64513,7 +64750,8 @@ function CoinbaseConnect({
64513
64750
  defaultSourceChainType,
64514
64751
  defaultSourceChainId,
64515
64752
  defaultSourceTokenAddress,
64516
- defaultSourceSymbol
64753
+ defaultSourceSymbol,
64754
+ prefilledAmountUsd
64517
64755
  }) {
64518
64756
  const { colors: colors2, fonts, components } = useTheme();
64519
64757
  const { projectConfig } = useProjectConfig({ publishableKey });
@@ -64836,7 +65074,8 @@ function CoinbaseConnect({
64836
65074
  };
64837
65075
  const handleSelectAsset = (asset) => {
64838
65076
  setSelectedAsset(asset);
64839
- setSendAmount("");
65077
+ const cleanedPrefilled = prefilledAmountUsd?.replace(/[^0-9.]/g, "") ?? "";
65078
+ setSendAmount(cleanedPrefilled);
64840
65079
  transitionTo("enter_amount");
64841
65080
  };
64842
65081
  const handleCreateTransfer = async () => {
@@ -66449,44 +66688,28 @@ function useApplePayProviders({
66449
66688
  return { providers, isLoading };
66450
66689
  }
66451
66690
  function useAllowedCountry(publishableKey) {
66691
+ const { userIpInfo, isLoading: isIpLoading, error: ipError } = useUserIp2();
66452
66692
  const {
66453
- data: ipData,
66454
- isLoading: isIpLoading,
66455
- error: ipError
66456
- } = useQuery({
66457
- queryKey: ["unifold", "ipAddress"],
66458
- queryFn: () => getIpAddress(),
66459
- refetchOnMount: false,
66460
- refetchOnReconnect: true,
66461
- refetchOnWindowFocus: false,
66462
- staleTime: 1e3 * 60 * 60,
66463
- // 1 hour
66464
- gcTime: 1e3 * 60 * 60 * 24
66465
- // 24 hours
66466
- });
66467
- const {
66468
- data: configData,
66693
+ projectConfig,
66469
66694
  isLoading: isConfigLoading,
66470
66695
  error: configError
66471
- } = useQuery({
66472
- queryKey: ["unifold", "projectConfig", publishableKey],
66473
- queryFn: () => getProjectConfig(publishableKey),
66474
- refetchOnMount: false,
66475
- refetchOnReconnect: true,
66476
- refetchOnWindowFocus: false,
66477
- staleTime: 1e3 * 60 * 5,
66478
- // 5 minutes
66479
- gcTime: 1e3 * 60 * 60
66480
- // 1 hour
66696
+ } = useProjectConfig({
66697
+ publishableKey,
66698
+ // Wait for the IP so we issue a single country-aware config request rather
66699
+ // than a country-less fetch followed by a country-aware refetch. Shares the
66700
+ // query key with DepositModal's useProjectConfig, so they dedupe.
66701
+ enabled: !isIpLoading,
66702
+ countryCode: userIpInfo?.alpha2,
66703
+ subdivisionCode: userIpInfo?.subdivisionCode ?? void 0
66481
66704
  });
66482
66705
  const isLoading = isIpLoading || isConfigLoading;
66483
66706
  const error = ipError || configError || null;
66707
+ const userSubdivision = userIpInfo?.subdivisionCode || userIpInfo?.state || "";
66484
66708
  let isAllowed = null;
66485
- if (ipData && configData) {
66486
- const blockedCodes = configData.blocked_country_codes || [];
66487
- const blockedSubdivisions = configData.blocked_country_subdivisions || [];
66488
- const userCountryUpper = ipData.alpha2.toUpperCase();
66489
- const userSubdivision = ipData.subdivision_code || ipData.state || "";
66709
+ if (userIpInfo && projectConfig) {
66710
+ const blockedCodes = projectConfig.blocked_country_codes || [];
66711
+ const blockedSubdivisions = projectConfig.blocked_country_subdivisions || [];
66712
+ const userCountryUpper = userIpInfo.alpha2.toUpperCase();
66490
66713
  const userSubdivisionUpper = userSubdivision.toUpperCase();
66491
66714
  const isCountryBlocked = blockedCodes.some((code) => code.toUpperCase() === userCountryUpper);
66492
66715
  const isSubdivisionBlocked = blockedSubdivisions.some((entry) => {
@@ -66495,12 +66718,11 @@ function useAllowedCountry(publishableKey) {
66495
66718
  });
66496
66719
  isAllowed = !isCountryBlocked && !isSubdivisionBlocked;
66497
66720
  }
66498
- const subdivisionCode = ipData?.subdivision_code || ipData?.state || "" || null;
66499
66721
  return {
66500
66722
  isAllowed,
66501
- alpha2: ipData?.alpha2 ?? null,
66502
- country: ipData?.country ?? null,
66503
- subdivisionCode,
66723
+ alpha2: userIpInfo?.alpha2 ?? null,
66724
+ country: userIpInfo?.country ?? null,
66725
+ subdivisionCode: userSubdivision || null,
66504
66726
  isLoading,
66505
66727
  error
66506
66728
  };
@@ -66564,7 +66786,7 @@ function ThemeStyleInjector({
66564
66786
  className
66565
66787
  }) {
66566
66788
  const { colors: colors2, fonts, mode } = useTheme();
66567
- const cssVars = React312.useMemo(() => {
66789
+ const cssVars = React322.useMemo(() => {
66568
66790
  const hexToHSL = (hex) => {
66569
66791
  hex = hex.replace("#", "");
66570
66792
  const r2 = parseInt(hex.slice(0, 2), 16) / 255;
@@ -66624,7 +66846,7 @@ function ThemeStyleInjector({
66624
66846
  ...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
66625
66847
  };
66626
66848
  }, [colors2, fonts.regular]);
66627
- React312.useEffect(() => {
66849
+ React322.useEffect(() => {
66628
66850
  if (typeof document === "undefined") return;
66629
66851
  if (fonts.regular) {
66630
66852
  document.documentElement.style.setProperty("--uf-font-family", fonts.regular);
@@ -67769,14 +67991,14 @@ function useCopyAddress() {
67769
67991
  return { copied, handleCopy };
67770
67992
  }
67771
67993
  var TooltipProvider2 = Provider;
67772
- var TooltipContext = React322.createContext({
67994
+ var TooltipContext = React332.createContext({
67773
67995
  open: false,
67774
67996
  onOpenChange: () => {
67775
67997
  }
67776
67998
  });
67777
- var TooltipTrigger2 = React322.forwardRef(({ onClick, ...props }, ref) => {
67778
- const { open, onOpenChange } = React322.useContext(TooltipContext);
67779
- const handleClick = React322.useCallback(
67999
+ var TooltipTrigger2 = React332.forwardRef(({ onClick, ...props }, ref) => {
68000
+ const { open, onOpenChange } = React332.useContext(TooltipContext);
68001
+ const handleClick = React332.useCallback(
67780
68002
  (e) => {
67781
68003
  onOpenChange(!open);
67782
68004
  onClick?.(e);
@@ -67786,7 +68008,7 @@ var TooltipTrigger2 = React322.forwardRef(({ onClick, ...props }, ref) => {
67786
68008
  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Trigger, { ref, onClick: handleClick, ...props });
67787
68009
  });
67788
68010
  TooltipTrigger2.displayName = Trigger.displayName;
67789
- var TooltipContent2 = React322.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
68011
+ var TooltipContent2 = React332.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
67790
68012
  const { themeClass, colors: colors2 } = useTheme();
67791
68013
  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Portal3, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
67792
68014
  Content22,
@@ -67896,6 +68118,7 @@ function TransferCryptoSingleInput({
67896
68118
  onDepositError,
67897
68119
  wallets: externalWallets,
67898
68120
  onSourceTokenChange,
68121
+ prefilledAmountUsd,
67899
68122
  checkoutQuote,
67900
68123
  isCheckoutQuoteLoading = false,
67901
68124
  persistCheckingIndicator = false,
@@ -68039,6 +68262,22 @@ function TransferCryptoSingleInput({
68039
68262
  const maxSlippage = currentChainFromBackend?.max_slippage_percent ?? 0.25;
68040
68263
  const processingTime = currentChainFromBackend?.estimated_processing_time ?? null;
68041
68264
  const minDepositUsd = currentChainFromBackend?.minimum_deposit_amount_usd ?? 3;
68265
+ const parsedPrefilledUsd = (0, import_react25.useMemo)(() => {
68266
+ const value = parseFloat(prefilledAmountUsd ?? "");
68267
+ return Number.isFinite(value) && value > 0 ? value : null;
68268
+ }, [prefilledAmountUsd]);
68269
+ const effectivePrefilledUsd = (0, import_react25.useMemo)(() => {
68270
+ if (parsedPrefilledUsd === null) return null;
68271
+ return Math.max(parsedPrefilledUsd, minDepositUsd);
68272
+ }, [parsedPrefilledUsd, minDepositUsd]);
68273
+ const prefillDisplay = (0, import_react25.useMemo)(() => {
68274
+ if (effectivePrefilledUsd === null) return null;
68275
+ const usdLabel = `$${effectivePrefilledUsd.toFixed(2)}`;
68276
+ if (selectedToken?.is_stablecoin) {
68277
+ return `${effectivePrefilledUsd.toFixed(2)} ${selectedToken.symbol} (${usdLabel})`;
68278
+ }
68279
+ return `${usdLabel} USD`;
68280
+ }, [effectivePrefilledUsd, selectedToken]);
68042
68281
  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TooltipProvider2, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
68043
68282
  "div",
68044
68283
  {
@@ -68165,7 +68404,7 @@ function TransferCryptoSingleInput({
68165
68404
  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children: "Retrying automatically every 5 seconds..." })
68166
68405
  ] })
68167
68406
  ] }),
68168
- (checkoutQuote || isCheckoutQuoteLoading) && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
68407
+ (checkoutQuote || isCheckoutQuoteLoading || prefillDisplay) && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
68169
68408
  "div",
68170
68409
  {
68171
68410
  className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
@@ -68209,6 +68448,13 @@ function TransferCryptoSingleInput({
68209
68448
  )
68210
68449
  ]
68211
68450
  }
68451
+ ) : prefillDisplay ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
68452
+ "span",
68453
+ {
68454
+ className: "uf-text-sm uf-font-semibold",
68455
+ style: { color: components.card.titleColor, fontFamily: fonts.semibold },
68456
+ children: prefillDisplay
68457
+ }
68212
68458
  ) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
68213
68459
  "div",
68214
68460
  {
@@ -68538,7 +68784,7 @@ function TransferCryptoSingleInput({
68538
68784
  }
68539
68785
  var Select2 = Root23;
68540
68786
  var SelectValue2 = Value;
68541
- var SelectTrigger2 = React332.forwardRef(({ className, style, children, ...props }, ref) => {
68787
+ var SelectTrigger2 = React342.forwardRef(({ className, style, children, ...props }, ref) => {
68542
68788
  const { components } = useTheme();
68543
68789
  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
68544
68790
  Trigger2,
@@ -68562,7 +68808,7 @@ var SelectTrigger2 = React332.forwardRef(({ className, style, children, ...props
68562
68808
  );
68563
68809
  });
68564
68810
  SelectTrigger2.displayName = Trigger2.displayName;
68565
- var SelectScrollUpButton2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
68811
+ var SelectScrollUpButton2 = React342.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
68566
68812
  ScrollUpButton,
68567
68813
  {
68568
68814
  ref,
@@ -68572,7 +68818,7 @@ var SelectScrollUpButton2 = React332.forwardRef(({ className, ...props }, ref) =
68572
68818
  }
68573
68819
  ));
68574
68820
  SelectScrollUpButton2.displayName = ScrollUpButton.displayName;
68575
- var SelectScrollDownButton2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
68821
+ var SelectScrollDownButton2 = React342.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
68576
68822
  ScrollDownButton,
68577
68823
  {
68578
68824
  ref,
@@ -68582,7 +68828,7 @@ var SelectScrollDownButton2 = React332.forwardRef(({ className, ...props }, ref)
68582
68828
  }
68583
68829
  ));
68584
68830
  SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
68585
- var SelectContent2 = React332.forwardRef(({ className, style, children, position = "popper", ...props }, ref) => {
68831
+ var SelectContent2 = React342.forwardRef(({ className, style, children, position = "popper", ...props }, ref) => {
68586
68832
  const { themeClass, colors: colors2, components } = useTheme();
68587
68833
  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Portal4, { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
68588
68834
  Content23,
@@ -68620,7 +68866,7 @@ var SelectContent2 = React332.forwardRef(({ className, style, children, position
68620
68866
  ) });
68621
68867
  });
68622
68868
  SelectContent2.displayName = Content23.displayName;
68623
- var SelectLabel2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
68869
+ var SelectLabel2 = React342.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
68624
68870
  Label,
68625
68871
  {
68626
68872
  ref,
@@ -68629,7 +68875,7 @@ var SelectLabel2 = React332.forwardRef(({ className, ...props }, ref) => /* @__P
68629
68875
  }
68630
68876
  ));
68631
68877
  SelectLabel2.displayName = Label.displayName;
68632
- var SelectItem2 = React332.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
68878
+ var SelectItem2 = React342.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
68633
68879
  Item,
68634
68880
  {
68635
68881
  ref,
@@ -68645,7 +68891,7 @@ var SelectItem2 = React332.forwardRef(({ className, children, ...props }, ref) =
68645
68891
  }
68646
68892
  ));
68647
68893
  SelectItem2.displayName = Item.displayName;
68648
- var SelectSeparator2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
68894
+ var SelectSeparator2 = React342.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
68649
68895
  Separator,
68650
68896
  {
68651
68897
  ref,
@@ -68673,6 +68919,7 @@ function TransferCryptoDoubleInput({
68673
68919
  defaultSourceChainId,
68674
68920
  defaultSourceTokenAddress,
68675
68921
  defaultSourceSymbol,
68922
+ prefilledAmountUsd,
68676
68923
  depositConfirmationMode = "auto_ui",
68677
68924
  onExecutionsChange,
68678
68925
  onDepositSuccess,
@@ -68797,6 +69044,22 @@ function TransferCryptoDoubleInput({
68797
69044
  const maxSlippage = currentChainFromBackend?.max_slippage_percent ?? 0.25;
68798
69045
  const processingTime = currentChainFromBackend?.estimated_processing_time ?? null;
68799
69046
  const minDepositUsd = currentChainFromBackend?.minimum_deposit_amount_usd ?? 3;
69047
+ const parsedPrefilledUsd = (0, import_react31.useMemo)(() => {
69048
+ const value = parseFloat(prefilledAmountUsd ?? "");
69049
+ return Number.isFinite(value) && value > 0 ? value : null;
69050
+ }, [prefilledAmountUsd]);
69051
+ const effectivePrefilledUsd = (0, import_react31.useMemo)(() => {
69052
+ if (parsedPrefilledUsd === null) return null;
69053
+ return Math.max(parsedPrefilledUsd, minDepositUsd);
69054
+ }, [parsedPrefilledUsd, minDepositUsd]);
69055
+ const prefillDisplay = (0, import_react31.useMemo)(() => {
69056
+ if (effectivePrefilledUsd === null) return null;
69057
+ const usdLabel = `$${effectivePrefilledUsd.toFixed(2)}`;
69058
+ if (selectedToken?.is_stablecoin) {
69059
+ return `${effectivePrefilledUsd.toFixed(2)} ${selectedToken.symbol} (${usdLabel})`;
69060
+ }
69061
+ return `${usdLabel} USD`;
69062
+ }, [effectivePrefilledUsd, selectedToken]);
68800
69063
  const renderTokenItem = (tokenData) => {
68801
69064
  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
68802
69065
  /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
@@ -68977,6 +69240,35 @@ function TransferCryptoDoubleInput({
68977
69240
  /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { children: "Retrying automatically every 5 seconds..." })
68978
69241
  ] })
68979
69242
  ] }),
69243
+ prefillDisplay && /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
69244
+ "div",
69245
+ {
69246
+ className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
69247
+ style: {
69248
+ backgroundColor: components.card.backgroundColor,
69249
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
69250
+ borderRadius: components.card.borderRadius
69251
+ },
69252
+ children: [
69253
+ /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
69254
+ "span",
69255
+ {
69256
+ className: "uf-text-xs",
69257
+ style: { color: components.card.subtitleColor, fontFamily: fonts.regular },
69258
+ children: "You send"
69259
+ }
69260
+ ),
69261
+ /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
69262
+ "span",
69263
+ {
69264
+ className: "uf-text-sm uf-font-semibold",
69265
+ style: { color: components.card.titleColor, fontFamily: fonts.semibold },
69266
+ children: prefillDisplay
69267
+ }
69268
+ )
69269
+ ]
69270
+ }
69271
+ ),
68980
69272
  /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
68981
69273
  /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
68982
69274
  "div",
@@ -70564,7 +70856,7 @@ function WalletConnect({
70564
70856
  amountQuickSelect = "percentage",
70565
70857
  onWalletDisconnect,
70566
70858
  onWalletConnected,
70567
- prefillAmountUsd,
70859
+ prefilledAmountUsd,
70568
70860
  checkoutAmountUsd,
70569
70861
  checkoutReceivedUsd,
70570
70862
  onNewDeposit,
@@ -70586,28 +70878,28 @@ function WalletConnect({
70586
70878
  onExecutionsChange
70587
70879
  }) {
70588
70880
  const { colors: colors2, fonts, components, mode } = useTheme();
70589
- const walletProvidedAtMount = React342.useRef(!!initialWalletInfo && !!initialDepositWallet);
70590
- const [activeWalletInfo, setActiveWalletInfo] = React342.useState(
70881
+ const walletProvidedAtMount = React352.useRef(!!initialWalletInfo && !!initialDepositWallet);
70882
+ const [activeWalletInfo, setActiveWalletInfo] = React352.useState(
70591
70883
  initialWalletInfo ?? null
70592
70884
  );
70593
- const [activeDepositWallet, setActiveDepositWallet] = React342.useState(
70885
+ const [activeDepositWallet, setActiveDepositWallet] = React352.useState(
70594
70886
  initialDepositWallet ?? null
70595
70887
  );
70596
70888
  const initialView = initialWalletInfo && initialDepositWallet ? "select_token" : "select_wallet";
70597
- const [view, setView] = React342.useState(initialView);
70598
- const [isTransitioning, setIsTransitioning] = React342.useState(false);
70599
- const viewRef = React342.useRef(initialView);
70889
+ const [view, setView] = React352.useState(initialView);
70890
+ const [isTransitioning, setIsTransitioning] = React352.useState(false);
70891
+ const viewRef = React352.useRef(initialView);
70600
70892
  const standalone = !canGoBack && !walletProvidedAtMount.current;
70601
70893
  const { wallet: detectedWallet, isLoading: detectingWallet } = useDetectedBrowserWallet({
70602
70894
  enabled: standalone
70603
70895
  });
70604
- const [autoResolved, setAutoResolved] = React342.useState(false);
70605
- const [selectedWalletDef, setSelectedWalletDef] = React342.useState(null);
70606
- const [connectingNetwork, setConnectingNetwork] = React342.useState(null);
70607
- const [walletError, setWalletError] = React342.useState(null);
70608
- const [isWalletConnecting, setIsWalletConnecting] = React342.useState(false);
70609
- const [eip6963ProviderCount, setEip6963ProviderCount] = React342.useState(0);
70610
- React342.useEffect(() => {
70896
+ const [autoResolved, setAutoResolved] = React352.useState(false);
70897
+ const [selectedWalletDef, setSelectedWalletDef] = React352.useState(null);
70898
+ const [connectingNetwork, setConnectingNetwork] = React352.useState(null);
70899
+ const [walletError, setWalletError] = React352.useState(null);
70900
+ const [isWalletConnecting, setIsWalletConnecting] = React352.useState(false);
70901
+ const [eip6963ProviderCount, setEip6963ProviderCount] = React352.useState(0);
70902
+ React352.useEffect(() => {
70611
70903
  const store = getEip6963Store();
70612
70904
  if (!store) return;
70613
70905
  setEip6963ProviderCount(store.getProviders().length);
@@ -70616,7 +70908,7 @@ function WalletConnect({
70616
70908
  });
70617
70909
  }, []);
70618
70910
  const { wallets: backendWallets } = useExternalWallets({ publishableKey });
70619
- const walletDefinitions = React342.useMemo(
70911
+ const walletDefinitions = React352.useMemo(
70620
70912
  () => backendWallets.length > 0 ? backendWallets.map((w) => ({
70621
70913
  id: w.id,
70622
70914
  name: w.name,
@@ -70627,32 +70919,32 @@ function WalletConnect({
70627
70919
  })) : FALLBACK_WALLET_DEFINITIONS,
70628
70920
  [backendWallets]
70629
70921
  );
70630
- const [recentWalletId, setRecentWalletIdState] = React342.useState(getLastOpenedWallet);
70631
- React342.useEffect(() => {
70922
+ const [recentWalletId, setRecentWalletIdState] = React352.useState(getLastOpenedWallet);
70923
+ React352.useEffect(() => {
70632
70924
  if (view === "select_wallet") {
70633
70925
  setRecentWalletIdState(getLastOpenedWallet());
70634
70926
  }
70635
70927
  }, [view]);
70636
- const availableWallets = React342.useMemo(
70928
+ const availableWallets = React352.useMemo(
70637
70929
  () => detectAvailableWallets(walletDefinitions, recentWalletId),
70638
70930
  [walletDefinitions, eip6963ProviderCount, recentWalletId]
70639
70931
  );
70640
- const [isMobile, setIsMobile] = React342.useState(false);
70641
- React342.useEffect(() => {
70932
+ const [isMobile, setIsMobile] = React352.useState(false);
70933
+ React352.useEffect(() => {
70642
70934
  setIsMobile(isMobileDevice());
70643
70935
  }, []);
70644
- const mobileDepositAddresses = React342.useMemo(
70936
+ const mobileDepositAddresses = React352.useMemo(
70645
70937
  () => (depositWallets ?? []).map((w) => ({ chain_type: w.chain_type, address: w.address })),
70646
70938
  [depositWallets]
70647
70939
  );
70648
- const mobileDepositWalletIds = React342.useMemo(
70940
+ const mobileDepositWalletIds = React352.useMemo(
70649
70941
  () => (depositWallets ?? []).filter((w) => w.chain_type === "ethereum" || w.chain_type === "solana").map((w) => w.id),
70650
70942
  [depositWallets]
70651
70943
  );
70652
- const [mobileRedirect, setMobileRedirect] = React342.useState(null);
70653
- const [pendingMobileWallet, setPendingMobileWallet] = React342.useState(null);
70654
- const [awaitingMobileDeposit, setAwaitingMobileDeposit] = React342.useState(false);
70655
- React342.useEffect(() => {
70944
+ const [mobileRedirect, setMobileRedirect] = React352.useState(null);
70945
+ const [pendingMobileWallet, setPendingMobileWallet] = React352.useState(null);
70946
+ const [awaitingMobileDeposit, setAwaitingMobileDeposit] = React352.useState(false);
70947
+ React352.useEffect(() => {
70656
70948
  if (!standalone || autoResolved || detectingWallet) return;
70657
70949
  if (!detectedWallet) {
70658
70950
  setAutoResolved(true);
@@ -70678,32 +70970,36 @@ function WalletConnect({
70678
70970
  depositWallets,
70679
70971
  depositWalletsLoading
70680
70972
  ]);
70681
- React342.useEffect(() => {
70973
+ React352.useEffect(() => {
70682
70974
  if (!standalone || autoResolved) return;
70683
70975
  const t13 = setTimeout(() => setAutoResolved(true), 5e3);
70684
70976
  return () => clearTimeout(t13);
70685
70977
  }, [standalone, autoResolved]);
70686
- const [balances, setBalances] = React342.useState([]);
70687
- const [isLoading, setIsLoading] = React342.useState(false);
70688
- const [selectedBalance, setSelectedBalance] = React342.useState(null);
70689
- const [totalBalanceUsd, setTotalBalanceUsd] = React342.useState(null);
70690
- const [error, setError] = React342.useState(null);
70691
- const [isDisconnectingWallet, setIsDisconnectingWallet] = React342.useState(false);
70692
- const [amountUsd, setAmountUsd] = React342.useState(prefillAmountUsd ?? "");
70693
- const [isConfirming, setIsConfirming] = React342.useState(false);
70694
- const [hasSignedTransaction, setHasSignedTransaction] = React342.useState(false);
70695
- const [tokenChainDetails, setTokenChainDetails] = React342.useState(null);
70696
- const [loadingTokenDetails, setLoadingTokenDetails] = React342.useState(false);
70697
- const [showTransactionDetails, setShowTransactionDetails] = React342.useState(false);
70698
- const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React342.useState(null);
70978
+ const [balances, setBalances] = React352.useState([]);
70979
+ const [isLoading, setIsLoading] = React352.useState(false);
70980
+ const [selectedBalance, setSelectedBalance] = React352.useState(null);
70981
+ const [totalBalanceUsd, setTotalBalanceUsd] = React352.useState(null);
70982
+ const [error, setError] = React352.useState(null);
70983
+ const [isDisconnectingWallet, setIsDisconnectingWallet] = React352.useState(false);
70984
+ const [amountUsd, setAmountUsd] = React352.useState(prefilledAmountUsd ?? "");
70985
+ const [isConfirming, setIsConfirming] = React352.useState(false);
70986
+ const [hasSignedTransaction, setHasSignedTransaction] = React352.useState(false);
70987
+ const [tokenChainDetails, setTokenChainDetails] = React352.useState(null);
70988
+ const [loadingTokenDetails, setLoadingTokenDetails] = React352.useState(false);
70989
+ const [showTransactionDetails, setShowTransactionDetails] = React352.useState(false);
70990
+ const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React352.useState(null);
70699
70991
  const walletInfo = activeWalletInfo;
70700
70992
  const depositWallet = activeDepositWallet;
70701
70993
  const hasWallet = !!activeWalletInfo && !!activeDepositWallet;
70994
+ React352.useEffect(() => {
70995
+ const cleanedPrefilled = prefilledAmountUsd?.replace(/[^0-9.]/g, "") ?? "";
70996
+ setAmountUsd(cleanedPrefilled);
70997
+ }, [prefilledAmountUsd]);
70702
70998
  const chainType = activeDepositWallet?.chain_type ?? "ethereum";
70703
70999
  const recipientAddress = activeDepositWallet?.address ?? "";
70704
71000
  const isCheckoutMode = !!checkoutAmountUsd;
70705
71001
  const supportedChainType = chainType === "algorand" || chainType === "xrpl" || chainType === "cardano" || chainType === "n1" ? "ethereum" : chainType;
70706
- const transitionTo = React342.useCallback((nextView) => {
71002
+ const transitionTo = React352.useCallback((nextView) => {
70707
71003
  if (nextView === viewRef.current) return;
70708
71004
  setIsTransitioning(true);
70709
71005
  setTimeout(() => {
@@ -70768,7 +71064,7 @@ function WalletConnect({
70768
71064
  if (!selectedWalletDef) return;
70769
71065
  handleConnectWallet(selectedWalletDef, network);
70770
71066
  };
70771
- React342.useEffect(() => {
71067
+ React352.useEffect(() => {
70772
71068
  if (!pendingMobileWallet) return;
70773
71069
  if (mobileDepositAddresses.length > 0) {
70774
71070
  const wallet = pendingMobileWallet;
@@ -70932,7 +71228,7 @@ function WalletConnect({
70932
71228
  publishableKey,
70933
71229
  enabled: !!activeWalletInfo && !!recipientAddress
70934
71230
  });
70935
- const effectiveDestinationAmount = React342.useMemo(() => {
71231
+ const effectiveDestinationAmount = React352.useMemo(() => {
70936
71232
  if (!checkoutRemainingBaseUnits || checkoutRemainingBaseUnits === "0") return "0";
70937
71233
  if (!checkoutAmountUsd) return checkoutRemainingBaseUnits;
70938
71234
  const remaining = BigInt(checkoutRemainingBaseUnits);
@@ -70960,7 +71256,7 @@ function WalletConnect({
70960
71256
  stablecoinParity,
70961
71257
  enabled: isCheckoutMode && !!selectedToken && !!checkoutDestination && effectiveDestinationAmount !== "0"
70962
71258
  });
70963
- const activeCheckoutQuote = React342.useMemo(() => {
71259
+ const activeCheckoutQuote = React352.useMemo(() => {
70964
71260
  if (!isCheckoutMode) return null;
70965
71261
  if (walletCheckoutQuote)
70966
71262
  return {
@@ -70990,10 +71286,10 @@ function WalletConnect({
70990
71286
  onDepositSuccess,
70991
71287
  onDepositError
70992
71288
  });
70993
- React342.useEffect(() => {
71289
+ React352.useEffect(() => {
70994
71290
  onExecutionsChange?.(depositExecutions);
70995
71291
  }, [depositExecutions, onExecutionsChange]);
70996
- const latestDepositExecution = React342.useMemo(() => {
71292
+ const latestDepositExecution = React352.useMemo(() => {
70997
71293
  if (depositExecutions.length === 0) return null;
70998
71294
  return [...depositExecutions].sort((a, b) => {
70999
71295
  const ta = a.created_at ? new Date(a.created_at).getTime() : 0;
@@ -71001,21 +71297,21 @@ function WalletConnect({
71001
71297
  return tb - ta;
71002
71298
  })[0];
71003
71299
  }, [depositExecutions]);
71004
- React342.useEffect(() => {
71300
+ React352.useEffect(() => {
71005
71301
  if (awaitingMobileDeposit && latestDepositExecution && (viewRef.current === "mobile_redirect" || viewRef.current === "connecting")) {
71006
71302
  transitionTo("mobile_deposit_status");
71007
71303
  }
71008
71304
  }, [awaitingMobileDeposit, latestDepositExecution, transitionTo]);
71009
- React342.useEffect(() => {
71010
- if (!prefillAmountUsd || !tokenChainDetails || view !== "enter_amount") return;
71305
+ React352.useEffect(() => {
71306
+ if (!isCheckoutMode || !tokenChainDetails || view !== "enter_amount") return;
71011
71307
  const minDeposit = tokenChainDetails.minimum_deposit_amount_usd || 0;
71012
71308
  const currentAmount = parseFloat(amountUsd) || 0;
71013
71309
  if (currentAmount > 0 && currentAmount < minDeposit) setAmountUsd(minDeposit.toFixed(2));
71014
- }, [tokenChainDetails, view, prefillAmountUsd]);
71015
- React342.useEffect(() => {
71310
+ }, [isCheckoutMode, tokenChainDetails, view, amountUsd]);
71311
+ React352.useEffect(() => {
71016
71312
  if (view === "review") setShowTransactionDetails(false);
71017
71313
  }, [view]);
71018
- React342.useEffect(() => {
71314
+ React352.useEffect(() => {
71019
71315
  if (view !== "enter_amount" && view !== "review" || !selectedBalance || !activeDepositWallet)
71020
71316
  return;
71021
71317
  let cancelled = false;
@@ -71052,7 +71348,7 @@ function WalletConnect({
71052
71348
  cancelled = true;
71053
71349
  };
71054
71350
  }, [view, selectedBalance, publishableKey, activeDepositWallet]);
71055
- React342.useEffect(() => {
71351
+ React352.useEffect(() => {
71056
71352
  if (!activeWalletInfo || !activeDepositWallet) return;
71057
71353
  let cancelled = false;
71058
71354
  setIsLoading(true);
@@ -71117,21 +71413,21 @@ function WalletConnect({
71117
71413
  defaultSourceTokenAddress,
71118
71414
  defaultSourceSymbol
71119
71415
  ]);
71120
- const usdToTokenRate = React342.useMemo(() => {
71416
+ const usdToTokenRate = React352.useMemo(() => {
71121
71417
  if (!selectedBalance || !selectedBalance.amount_usd || !selectedToken) return 0;
71122
71418
  const balanceAmount = Number(selectedBalance.amount) / 10 ** selectedToken.decimals;
71123
71419
  const balanceUsd = parseFloat(selectedBalance.amount_usd);
71124
71420
  if (balanceAmount === 0 || balanceUsd === 0) return 0;
71125
71421
  return balanceAmount / balanceUsd;
71126
71422
  }, [selectedBalance, selectedToken]);
71127
- const tokenAmount = React342.useMemo(() => {
71423
+ const tokenAmount = React352.useMemo(() => {
71128
71424
  if (isCheckoutMode && activeCheckoutQuote && selectedToken)
71129
71425
  return Number(activeCheckoutQuote.sourceAmount) / 10 ** activeCheckoutQuote.sourceTokenDecimals;
71130
71426
  const usdNum = parseFloat(amountUsd) || 0;
71131
71427
  if (usdNum === 0 || usdToTokenRate === 0) return 0;
71132
71428
  return usdNum * usdToTokenRate;
71133
71429
  }, [amountUsd, usdToTokenRate, isCheckoutMode, activeCheckoutQuote, selectedToken]);
71134
- React342.useEffect(() => {
71430
+ React352.useEffect(() => {
71135
71431
  if (isCheckoutMode && activeCheckoutQuote?.sourceAmountUsd && view === "enter_amount")
71136
71432
  setAmountUsd(activeCheckoutQuote.sourceAmountUsd);
71137
71433
  }, [isCheckoutMode, activeCheckoutQuote, view]);
@@ -71140,7 +71436,7 @@ function WalletConnect({
71140
71436
  const inputUsdNum = parseFloat(amountUsd) || 0;
71141
71437
  const minDepositUsd = tokenChainDetails?.minimum_deposit_amount_usd || 0;
71142
71438
  const isValidAmount = isCheckoutMode && activeCheckoutQuote ? tokenAmount > 0 && tokenAmount <= maxTokenAmount : inputUsdNum > 0 && inputUsdNum <= maxUsdAmount && inputUsdNum >= minDepositUsd;
71143
- const formattedTokenAmount = React342.useMemo(() => {
71439
+ const formattedTokenAmount = React352.useMemo(() => {
71144
71440
  if (tokenAmount === 0 || !selectedToken) return null;
71145
71441
  return `${tokenAmount.toFixed(6)} ${selectedToken.symbol}`.replace(/\.?0+$/, "");
71146
71442
  }, [tokenAmount, selectedToken]);
@@ -71173,7 +71469,7 @@ function WalletConnect({
71173
71469
  break;
71174
71470
  case "enter_amount":
71175
71471
  transitionTo("select_token");
71176
- setAmountUsd(prefillAmountUsd ?? "");
71472
+ setAmountUsd(prefilledAmountUsd ?? "");
71177
71473
  setTokenChainDetails(null);
71178
71474
  break;
71179
71475
  case "review":
@@ -71205,7 +71501,7 @@ function WalletConnect({
71205
71501
  setSelectedBalance(null);
71206
71502
  setBalances([]);
71207
71503
  setTotalBalanceUsd(null);
71208
- setAmountUsd(prefillAmountUsd ?? "");
71504
+ setAmountUsd(prefilledAmountUsd ?? "");
71209
71505
  setError(null);
71210
71506
  };
71211
71507
  if (standalone) {
@@ -71450,116 +71746,131 @@ function WalletConnect({
71450
71746
  ] });
71451
71747
  }
71452
71748
  if (view === "select_wallet") {
71453
- return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { style: viewTransitionStyle, children: [
71454
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71455
- DepositHeader,
71749
+ return (
71750
+ // Mobile: flex column that fills the full-height sheet so the wallet list
71751
+ // scrolls and the footer pins to the bottom. Desktop (sm:): content-sized.
71752
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
71753
+ "div",
71456
71754
  {
71457
- title: "Connect Wallet",
71458
- showBack: canGoBack,
71459
- onBack: handleBack,
71460
- onClose
71461
- }
71462
- ),
71463
- /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-pb-4", children: [
71464
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71465
- "p",
71466
- {
71467
- className: "uf-text-sm uf-text-center uf-pb-4",
71468
- style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
71469
- children: isMobile ? "Open this page in your wallet's app to connect" : "Select a wallet to connect"
71470
- }
71471
- ),
71472
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "uf-space-y-2", style: { maxHeight: 330, overflowY: "auto" }, children: availableWallets.map((wallet) => {
71473
- const walletPlatformAllowed = !wallet.mobileBrowsePlatforms || wallet.mobileBrowsePlatforms.includes(getMobilePlatform() ?? "");
71474
- const showOpenInApp = isMobile && !wallet.isInstalled && wallet.supportsMobileBrowse !== false && walletPlatformAllowed;
71475
- const isPending = pendingMobileWallet?.id === wallet.id;
71476
- return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
71477
- "button",
71478
- {
71479
- onClick: () => void handleWalletClick(wallet),
71480
- disabled: isWalletConnecting || !!pendingMobileWallet,
71481
- 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",
71482
- style: {
71483
- backgroundColor: components.card.backgroundColor,
71484
- borderRadius: components.card.borderRadius,
71485
- border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
71486
- },
71487
- children: [
71488
- /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
71489
- WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71490
- WalletIconWithNetwork,
71491
- {
71492
- WalletIcon: WALLET_ICONS3[wallet.id],
71493
- networks: wallet.networks,
71494
- size: 40,
71495
- className: "uf-rounded-lg"
71496
- }
71497
- ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
71498
- /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
71499
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71500
- "div",
71501
- {
71502
- className: "uf-text-sm uf-font-medium",
71503
- style: { color: components.card.titleColor, fontFamily: fonts.medium },
71504
- children: wallet.name
71505
- }
71506
- ),
71507
- wallet.id === recentWalletId && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71508
- "span",
71509
- {
71510
- className: "uf-text-xs uf-px-2 uf-py-0.5 uf-rounded-full",
71511
- style: {
71512
- backgroundColor: colors2.primary + "20",
71513
- color: colors2.primary,
71514
- fontFamily: fonts.medium
71515
- },
71516
- children: "Last used"
71517
- }
71518
- )
71519
- ] })
71520
- ] }),
71521
- isPending ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71522
- LoaderCircle,
71523
- {
71524
- className: "uf-w-4 uf-h-4 uf-animate-spin",
71525
- style: { color: colors2.primary }
71526
- }
71527
- ) : wallet.isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71528
- "span",
71755
+ style: viewTransitionStyle,
71756
+ className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col sm:uf-block",
71757
+ children: [
71758
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71759
+ DepositHeader,
71760
+ {
71761
+ title: "Connect Wallet",
71762
+ showBack: canGoBack,
71763
+ onBack: handleBack,
71764
+ onClose
71765
+ }
71766
+ ),
71767
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-pb-4 uf-flex uf-min-h-0 uf-flex-1 uf-flex-col sm:uf-block", children: [
71768
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71769
+ "p",
71770
+ {
71771
+ className: "uf-text-sm uf-text-center uf-pb-4",
71772
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
71773
+ children: isMobile ? "Open this page in your wallet's app to connect" : "Select a wallet to connect"
71774
+ }
71775
+ ),
71776
+ /* @__PURE__ */ (0, import_jsx_runtime81.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) => {
71777
+ if (!isMobile || wallet.isInstalled) return true;
71778
+ const platformAllowed = !wallet.mobileBrowsePlatforms || wallet.mobileBrowsePlatforms.includes(getMobilePlatform() ?? "");
71779
+ return wallet.supportsMobileBrowse !== false && platformAllowed;
71780
+ }).map((wallet) => {
71781
+ const walletPlatformAllowed = !wallet.mobileBrowsePlatforms || wallet.mobileBrowsePlatforms.includes(getMobilePlatform() ?? "");
71782
+ const showOpenInApp = isMobile && !wallet.isInstalled && wallet.supportsMobileBrowse !== false && walletPlatformAllowed;
71783
+ const isPending = pendingMobileWallet?.id === wallet.id;
71784
+ return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
71785
+ "button",
71529
71786
  {
71530
- className: "uf-text-xs uf-px-2 uf-py-1 uf-rounded-full",
71787
+ onClick: () => void handleWalletClick(wallet),
71788
+ disabled: isWalletConnecting || !!pendingMobileWallet,
71789
+ 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",
71531
71790
  style: {
71532
- backgroundColor: colors2.primary + "20",
71533
- color: colors2.primary,
71534
- fontFamily: fonts.medium
71791
+ backgroundColor: components.card.backgroundColor,
71792
+ borderRadius: components.card.borderRadius,
71793
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
71535
71794
  },
71536
- children: "Detected"
71537
- }
71538
- ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
71539
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71540
- "span",
71541
- {
71542
- className: "uf-text-xs",
71543
- style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
71544
- children: showOpenInApp ? "Open" : "Install"
71545
- }
71546
- ),
71547
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71548
- ExternalLink,
71549
- {
71550
- className: "uf-w-3 uf-h-3",
71551
- style: { color: colors2.foregroundMuted }
71552
- }
71553
- )
71554
- ] })
71555
- ]
71556
- },
71557
- wallet.id
71558
- );
71559
- }) }),
71560
- walletError && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "uf-text-center uf-text-sm uf-mt-4 uf-px-4", style: { color: "#ef4444" }, children: walletError })
71561
- ] })
71562
- ] });
71795
+ children: [
71796
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
71797
+ WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71798
+ WalletIconWithNetwork,
71799
+ {
71800
+ WalletIcon: WALLET_ICONS3[wallet.id],
71801
+ networks: wallet.networks,
71802
+ size: 40,
71803
+ className: "uf-rounded-lg"
71804
+ }
71805
+ ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
71806
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
71807
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71808
+ "div",
71809
+ {
71810
+ className: "uf-text-sm uf-font-medium",
71811
+ style: { color: components.card.titleColor, fontFamily: fonts.medium },
71812
+ children: wallet.name
71813
+ }
71814
+ ),
71815
+ wallet.id === recentWalletId && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71816
+ "span",
71817
+ {
71818
+ className: "uf-text-xs uf-px-2 uf-py-0.5 uf-rounded-full",
71819
+ style: {
71820
+ backgroundColor: colors2.primary + "20",
71821
+ color: colors2.primary,
71822
+ fontFamily: fonts.medium
71823
+ },
71824
+ children: "Last used"
71825
+ }
71826
+ )
71827
+ ] })
71828
+ ] }),
71829
+ isPending ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71830
+ LoaderCircle,
71831
+ {
71832
+ className: "uf-w-4 uf-h-4 uf-animate-spin",
71833
+ style: { color: colors2.primary }
71834
+ }
71835
+ ) : wallet.isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71836
+ "span",
71837
+ {
71838
+ className: "uf-text-xs uf-px-2 uf-py-1 uf-rounded-full",
71839
+ style: {
71840
+ backgroundColor: colors2.primary + "20",
71841
+ color: colors2.primary,
71842
+ fontFamily: fonts.medium
71843
+ },
71844
+ children: "Detected"
71845
+ }
71846
+ ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
71847
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71848
+ "span",
71849
+ {
71850
+ className: "uf-text-xs",
71851
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
71852
+ children: showOpenInApp ? "Open" : "Install"
71853
+ }
71854
+ ),
71855
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71856
+ ExternalLink,
71857
+ {
71858
+ className: "uf-w-3 uf-h-3",
71859
+ style: { color: colors2.foregroundMuted }
71860
+ }
71861
+ )
71862
+ ] })
71863
+ ]
71864
+ },
71865
+ wallet.id
71866
+ );
71867
+ }) }),
71868
+ walletError && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "uf-text-center uf-text-sm uf-mt-4 uf-px-4", style: { color: "#ef4444" }, children: walletError })
71869
+ ] })
71870
+ ]
71871
+ }
71872
+ )
71873
+ );
71563
71874
  }
71564
71875
  const preConnectAccent = selectedWalletDef ? getWalletBrandColor(selectedWalletDef.id, mode) : void 0;
71565
71876
  const preConnectFg = preConnectAccent ? getContrastingTextColor(preConnectAccent) : void 0;
@@ -71914,6 +72225,15 @@ function SkeletonButton({ variant = "default" }) {
71914
72225
  ] });
71915
72226
  }
71916
72227
  var t8 = i18n2.depositModal;
72228
+ function normalizePrefilledUsdAmount(value) {
72229
+ if (!value) return void 0;
72230
+ const cleaned = value.replace(/[^0-9.]/g, "");
72231
+ if (!cleaned) return void 0;
72232
+ const normalizedNumeric = cleaned.replace(/(\..*)\./g, "$1");
72233
+ const parsed = parseFloat(normalizedNumeric);
72234
+ if (!Number.isFinite(parsed) || parsed <= 0) return void 0;
72235
+ return parseFloat(parsed.toFixed(2)).toString();
72236
+ }
71917
72237
  function depositTabForScreen(screen) {
71918
72238
  return screen === "card" || screen === "cashapp" || screen === "bank_transfer" || screen === "stripe_link" || screen === "apple_pay" ? "cash" : "crypto";
71919
72239
  }
@@ -71933,6 +72253,7 @@ function DepositModal({
71933
72253
  defaultSourceChainId,
71934
72254
  defaultSourceTokenAddress,
71935
72255
  defaultSourceSymbol,
72256
+ prefilledAmountUsd,
71936
72257
  hideDepositTracker,
71937
72258
  showBalanceHeader = false,
71938
72259
  transferInputVariant = "double_input",
@@ -71948,7 +72269,9 @@ function DepositModal({
71948
72269
  applePayTitle = "Pay with Apple Pay",
71949
72270
  applePaySubTitle = "Instant",
71950
72271
  enableBankTransfer,
71951
- enableStripeLink = false,
72272
+ // No default: left undefined so the backend `stripe_link.enabled` can govern
72273
+ // (via the `??` chain in showStripeLink) once a dashboard toggle exists.
72274
+ enableStripeLink,
71952
72275
  userEmail,
71953
72276
  hideDepositFlowInfo = false,
71954
72277
  hideDisplayDescription = false,
@@ -71966,6 +72289,10 @@ function DepositModal({
71966
72289
  depositTrackerSubTitle = t8.depositTracker.subtitle
71967
72290
  }) {
71968
72291
  const { colors: colors2, fonts, components } = useTheme();
72292
+ const normalizedPrefilledAmountUsd = (0, import_react3.useMemo)(
72293
+ () => normalizePrefilledUsdAmount(prefilledAmountUsd),
72294
+ [prefilledAmountUsd]
72295
+ );
71969
72296
  const onDepositSuccessFor = (0, import_react3.useCallback)(
71970
72297
  (method) => onDepositSuccess || onEvent ? (data) => {
71971
72298
  const payload = { ...data, method };
@@ -72029,14 +72356,18 @@ function DepositModal({
72029
72356
  const [allExecutions, setAllExecutions] = (0, import_react3.useState)([]);
72030
72357
  const [selectedExecution, setSelectedExecution] = (0, import_react3.useState)(null);
72031
72358
  const [depositExecutions, setDepositExecutions] = (0, import_react3.useState)([]);
72359
+ const { userIpInfo, isLoading: isLoadingIp } = useUserIp2();
72032
72360
  const { projectConfig } = useProjectConfig({
72033
72361
  publishableKey,
72034
- enabled: open
72362
+ enabled: open && !isLoadingIp,
72363
+ countryCode: userIpInfo?.alpha2,
72364
+ subdivisionCode: userIpInfo?.subdivisionCode ?? void 0
72035
72365
  });
72036
72366
  const showTransferCrypto = enableTransferCrypto ?? projectConfig?.transfer_crypto?.enabled ?? true;
72037
72367
  const showConnectWallet = enableConnectWallet ?? projectConfig?.connect_wallet?.enabled ?? true;
72038
72368
  const showPayWithExchange = enablePayWithExchange ?? projectConfig?.pay_with_exchange?.enabled ?? true;
72039
72369
  const showFiatOnramp = !projectConfig?.fiat_onramp?.is_hidden && (enableFiatOnramp ?? projectConfig?.fiat_onramp?.enabled ?? true);
72370
+ const showStripeLink = !projectConfig?.stripe_link?.is_hidden && (enableStripeLink ?? projectConfig?.stripe_link?.enabled ?? false);
72040
72371
  const showConnectExchange = enableConnectExchange ?? projectConfig?.connect_exchange?.enabled ?? true;
72041
72372
  const showCashApp = enableCashApp ?? projectConfig?.cash_app?.enabled ?? true;
72042
72373
  const showApplePay = enableApplePay ?? projectConfig?.apple_pay?.enabled ?? true;
@@ -72182,7 +72513,6 @@ function DepositModal({
72182
72513
  publishableKey,
72183
72514
  enabled: open && showPayWithExchange
72184
72515
  });
72185
- const { userIpInfo, isLoading: isLoadingIp } = useUserIp2();
72186
72516
  const { providers: bankTransferProviders, isLoading: bankTransferProvidersLoading } = useBankTransferProviders({
72187
72517
  publishableKey,
72188
72518
  enabled: open && !!userIpInfo?.alpha2,
@@ -72360,6 +72690,12 @@ function DepositModal({
72360
72690
  const [cashAppView, setCashAppView] = (0, import_react3.useState)("amount");
72361
72691
  const [stripeLinkStep, setStripeLinkStep] = (0, import_react3.useState)("amount");
72362
72692
  const stripeLinkBackRef = (0, import_react3.useRef)(null);
72693
+ (0, import_react3.useEffect)(() => {
72694
+ if (view === "stripe_link" && !showStripeLink && effectiveInitialScreen === "main") {
72695
+ setView("main");
72696
+ setStripeLinkStep("amount");
72697
+ }
72698
+ }, [view, showStripeLink, effectiveInitialScreen]);
72363
72699
  const [cashAppAmount, setCashAppAmount] = (0, import_react3.useState)("");
72364
72700
  const [applePayView, setApplePayView] = (0, import_react3.useState)("email_input");
72365
72701
  const applePayHandleRef = (0, import_react3.useRef)(null);
@@ -72584,7 +72920,7 @@ function DepositModal({
72584
72920
  },
72585
72921
  "cashapp"
72586
72922
  ) : null;
72587
- const stripeLinkMenuButton = enableStripeLink ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72923
+ const stripeLinkMenuButton = showStripeLink ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72588
72924
  StripeLinkButton,
72589
72925
  {
72590
72926
  onClick: () => setView("stripe_link"),
@@ -72632,11 +72968,13 @@ function DepositModal({
72632
72968
  connectExchangeMenuButton
72633
72969
  ].filter(Boolean);
72634
72970
  const cashMenuButtons = [
72971
+ // Stripe "Pay with Link" is intentionally listed first so it always sits
72972
+ // above "Deposit with Card".
72973
+ stripeLinkMenuButton,
72635
72974
  depositWithCardMenuButton,
72636
72975
  applePayMenuButton,
72637
72976
  cashAppMenuButton,
72638
- bankTransferMenuButton,
72639
- stripeLinkMenuButton
72977
+ bankTransferMenuButton
72640
72978
  ].filter(Boolean);
72641
72979
  const depositTabs = [
72642
72980
  { id: "crypto", label: "Use Crypto", icon: Bitcoin, buttons: cryptoMenuButtons },
@@ -72731,13 +73069,13 @@ function DepositModal({
72731
73069
  const stackedOptions = [
72732
73070
  transferCryptoMenuButton,
72733
73071
  connectWalletMenuButton,
73072
+ stripeLinkMenuButton,
72734
73073
  depositWithCardMenuButton,
72735
73074
  applePayMenuButton,
72736
73075
  payWithExchangeMenuButton,
72737
73076
  connectExchangeMenuButton,
72738
73077
  cashAppMenuButton,
72739
73078
  bankTransferMenuButton,
72740
- stripeLinkMenuButton,
72741
73079
  depositTrackerMenuButton
72742
73080
  ].filter(Boolean);
72743
73081
  return renderScrollableOptions(stackedOptions);
@@ -72753,410 +73091,461 @@ function DepositModal({
72753
73091
  {
72754
73092
  ref: hideOverlay ? containerCallbackRef : void 0,
72755
73093
  hideOverlay,
72756
- 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}`}`,
73094
+ 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
73095
+ // is a grid, and its single auto row only *grows* to fill free
73096
+ // space (align-content: stretch) — it never shrinks below content,
73097
+ // so a long wallet list would balloon the row past the viewport and
73098
+ // push the footer off-screen instead of scrolling. Clamp the row to
73099
+ // the modal height with minmax(0,1fr) so the inner overflow-y-auto
73100
+ // list scrolls with the footer pinned. Reset to content-sized on
73101
+ // desktop (sm:) where the modal is auto-height and centered.
73102
+ view === "wallet_connect" ? "[grid-template-rows:minmax(0,1fr)] sm:[grid-template-rows:none]" : ""} ${themeClass}`}`,
72757
73103
  style: { backgroundColor: colors2.background },
72758
73104
  onPointerDownOutside: (e) => e.preventDefault(),
72759
73105
  onInteractOutside: (e) => e.preventDefault(),
72760
73106
  children: [
72761
73107
  /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(DialogTitle2, { className: "uf-sr-only", children: modalTitle || "Deposit" }),
72762
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-min-h-0 uf-max-h-full", children: [
72763
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72764
- DepositHeader,
72765
- {
72766
- title: modalTitle || "Deposit",
72767
- showClose: !hideOverlay,
72768
- onClose: handleClose,
72769
- showBalance: showBalanceHeader,
72770
- balanceAddress: recipientAddress,
72771
- balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
72772
- balanceChainId: destinationChainId,
72773
- balanceTokenAddress: destinationTokenAddress,
72774
- projectName: projectConfig?.project_name,
72775
- publishableKey
72776
- }
72777
- ) }),
72778
- renderMainMenuBody(),
72779
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-flex-shrink-0", children: depositPoweredByFooter })
72780
- ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
72781
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72782
- DepositHeader,
72783
- {
72784
- title: transferCryptoTitle,
72785
- showBack: showBackTransfer,
72786
- onBack: handleBack,
72787
- onClose: handleClose,
72788
- showBalance: showBalanceHeader,
72789
- balanceAddress: recipientAddress,
72790
- balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
72791
- balanceChainId: destinationChainId,
72792
- balanceTokenAddress: destinationTokenAddress,
72793
- projectName: projectConfig?.project_name,
72794
- publishableKey
72795
- }
72796
- ),
72797
- /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
72798
- standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : transferInputVariant === "single_input" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72799
- TransferCryptoSingleInput,
72800
- {
72801
- userId,
72802
- publishableKey,
72803
- recipientAddress,
72804
- destinationChainType,
72805
- destinationChainId,
72806
- destinationTokenAddress,
72807
- defaultSourceChainType,
72808
- defaultSourceChainId,
72809
- defaultSourceTokenAddress,
72810
- defaultSourceSymbol,
72811
- depositConfirmationMode,
72812
- onExecutionsChange: setDepositExecutions,
72813
- onDepositSuccess: onDepositSuccessFor("transfer"),
72814
- onDepositError: onDepositErrorFor("transfer"),
72815
- wallets
72816
- }
72817
- ) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72818
- TransferCryptoDoubleInput,
72819
- {
72820
- userId,
72821
- publishableKey,
72822
- recipientAddress,
72823
- destinationChainType,
72824
- destinationChainId,
72825
- destinationTokenAddress,
72826
- defaultSourceChainType,
72827
- defaultSourceChainId,
72828
- defaultSourceTokenAddress,
72829
- defaultSourceSymbol,
72830
- depositConfirmationMode,
72831
- onExecutionsChange: setDepositExecutions,
72832
- onDepositSuccess: onDepositSuccessFor("transfer"),
72833
- onDepositError: onDepositErrorFor("transfer"),
72834
- wallets
72835
- }
72836
- ),
72837
- depositPoweredByFooter
72838
- ] })
72839
- ] }) : view === "tracker" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
72840
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72841
- DepositHeader,
72842
- {
72843
- title: selectedExecution ? "Deposit Details" : depositTrackerTitle,
72844
- showBack: showBackTracker,
72845
- onBack: handleBack,
72846
- onClose: handleClose
72847
- }
72848
- ),
72849
- /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
72850
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(DepositDetailContent, { execution: selectedExecution }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-space-y-2 uf-pb-8", children: allExecutions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72851
- "div",
72852
- {
72853
- className: "uf-text-sm",
72854
- style: {
72855
- color: components.container.subtitleColor,
72856
- fontFamily: fonts.regular
72857
- },
72858
- children: "No deposits yet"
72859
- }
72860
- ) }) : allExecutions.map((execution) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72861
- DepositExecutionItem,
72862
- {
72863
- execution,
72864
- onClick: () => setSelectedExecution(execution)
72865
- },
72866
- execution.id
72867
- )) }) }),
72868
- depositPoweredByFooter
72869
- ] })
72870
- ] }) : view === "card" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
72871
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72872
- DepositHeader,
72873
- {
72874
- title: cardView === "quotes" ? t8.quotes : depositWithCardTitle,
72875
- showBack: showBackCard,
72876
- onBack: handleBack,
72877
- onClose: handleClose,
72878
- badge: cardView === "quotes" ? { count: quotesCount } : void 0,
72879
- showBalance: showBalanceHeader,
72880
- balanceAddress: recipientAddress,
72881
- balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
72882
- balanceChainId: destinationChainId,
72883
- balanceTokenAddress: destinationTokenAddress,
72884
- projectName: projectConfig?.project_name,
72885
- publishableKey
72886
- }
72887
- ),
72888
- /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
72889
- standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : !showFiatOnramp ? (
72890
- // Fiat on-ramp resolved hidden/disabled after a direct open
72891
- // (e.g. platform `is_hidden` for a Stripe Link-only project).
72892
- // Show a geo-restriction screen rather than the card UI so the
72893
- // hard-hide is honoured without a flash of "Pay with Card".
72894
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(GeoRestrictionScreen, { methodName: "Card" })
72895
- ) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72896
- BuyWithCard,
72897
- {
72898
- userId,
72899
- publishableKey,
72900
- view: cardView,
72901
- onViewChange: handleCardViewChange,
72902
- destinationTokenSymbol,
72903
- recipientAddress,
72904
- destinationChainType,
72905
- destinationChainId,
72906
- destinationTokenAddress,
72907
- onDepositSuccess: onDepositSuccessFor("card"),
72908
- onDepositError: onDepositErrorFor("card"),
72909
- onEvent,
72910
- themeClass,
72911
- wallets,
72912
- assetCdnUrl: projectConfig?.asset_cdn_url,
72913
- hideDepositFlowInfo,
72914
- hideDisplayDescription
72915
- }
72916
- ),
72917
- depositPoweredByFooter
72918
- ] })
72919
- ] }) : view === "exchange" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
72920
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72921
- DepositHeader,
72922
- {
72923
- title: payWithExchangeTitle,
72924
- showBack: exchangeView === "pending" || sessionOpenedFromMenu,
72925
- onBack: handleBack,
72926
- onClose: handleClose
72927
- }
72928
- ),
72929
- /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
72930
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72931
- PayWithExchange,
72932
- {
72933
- userId,
72934
- publishableKey,
72935
- exchanges,
72936
- view: exchangeView,
72937
- onViewChange: setExchangeView,
72938
- destinationTokenSymbol,
72939
- recipientAddress,
72940
- destinationChainType,
72941
- destinationChainId,
72942
- destinationTokenAddress,
72943
- onDepositSuccess: onDepositSuccessFor("pay_with_exchange"),
72944
- onDepositError: onDepositErrorFor("pay_with_exchange"),
72945
- wallets,
72946
- defaultToken: defaultToken ?? null
72947
- }
72948
- ),
72949
- depositPoweredByFooter
72950
- ] })
72951
- ] }) : view === "coinbase_connect" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
72952
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72953
- CoinbaseConnect,
72954
- {
72955
- publishableKey,
72956
- userId,
72957
- wallets,
72958
- recipientAddress,
72959
- destinationTokenAddress: destinationTokenAddress ?? "",
72960
- destinationChainId: destinationChainId ?? "",
72961
- destinationChainType: destinationChainType ?? "",
72962
- onDepositSuccess: onDepositSuccessFor("exchange_connect"),
72963
- onDepositError: onDepositErrorFor("exchange_connect"),
72964
- onTransferError: (error) => {
72965
- onDepositErrorFor("exchange_connect")?.({
72966
- message: error.message,
72967
- error
72968
- });
72969
- },
72970
- onBack: handleBack,
72971
- onClose: handleClose,
72972
- onDisconnect: handleExchangeDisconnect,
72973
- skipToHoldings: coinbaseSkipToHoldings,
72974
- canGoBack: sessionOpenedFromMenu,
72975
- onExecutionsChange: setDepositExecutions,
72976
- defaultSourceChainType,
72977
- defaultSourceChainId,
72978
- defaultSourceTokenAddress,
72979
- defaultSourceSymbol
72980
- }
72981
- ),
72982
- depositPoweredByFooter
72983
- ] }) : view === "wallet_connect" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
72984
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72985
- WalletConnect,
72986
- {
72987
- walletInfo: browserWalletInfo ?? void 0,
72988
- depositWallet: browserWalletInfo?.depositWallet ?? void 0,
72989
- wallets,
72990
- userId,
72991
- publishableKey,
72992
- assetCdnUrl: projectConfig?.asset_cdn_url,
72993
- projectName: projectConfig?.project_name,
72994
- onError: (error) => {
72995
- onDepositErrorFor("wallet_connect")?.({
72996
- message: error.message,
72997
- error
72998
- });
72999
- },
73000
- onDepositSuccess: onDepositSuccessFor("wallet_connect"),
73001
- onDepositError: onDepositErrorFor("wallet_connect"),
73002
- amountQuickSelect: browserWalletAmountQuickSelect,
73003
- onWalletDisconnect: handleWalletDisconnect,
73004
- onWalletConnected: (info, dw) => {
73005
- setBrowserWalletInfo({ ...info, depositWallet: dw });
73006
- setStoredWalletState(info.type);
73007
- setBrowserWalletChainType(dw.chain_type === "solana" ? "solana" : "ethereum");
73008
- },
73009
- onBack: handleBack,
73010
- onClose: handleClose,
73011
- defaultSourceChainType,
73012
- defaultSourceChainId,
73013
- defaultSourceTokenAddress,
73014
- defaultSourceSymbol,
73015
- canGoBack: sessionOpenedFromMenu,
73016
- depositWalletsLoading: walletsLoading
73017
- }
73018
- ),
73019
- depositPoweredByFooter
73020
- ] }) : view === "bank_transfer" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73021
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73022
- DepositHeader,
73023
- {
73024
- title: t8.bankTransfer.title,
73025
- showBack: bankTransferView !== "providers" || sessionOpenedFromMenu,
73026
- onBack: handleBack,
73027
- onClose: handleClose
73028
- }
73029
- ),
73030
- /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73031
- bankTransferProvidersLoading ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(SkeletonButton, { variant: "with-icons" }) : !hasEnabledBankTransferProvider ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(GeoRestrictionScreen, { methodName: "Bank Transfer" }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73032
- BankTransfer,
73033
- {
73034
- userId,
73035
- publishableKey,
73036
- view: bankTransferView,
73037
- onViewChange: setBankTransferView,
73038
- recipientAddress,
73039
- destinationChainType,
73040
- destinationChainId,
73041
- destinationTokenAddress,
73042
- destinationTokenSymbol,
73043
- wallets,
73044
- defaultToken: defaultToken ?? null,
73045
- assetCdnUrl: projectConfig?.asset_cdn_url,
73046
- onEvent,
73047
- onDepositSuccess,
73048
- onDepositError
73049
- }
73050
- ),
73051
- depositPoweredByFooter
73052
- ] })
73053
- ] }) : view === "stripe_link" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73054
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73055
- DepositHeader,
73056
- {
73057
- title: "Deposit with Link",
73058
- showBack: stripeLinkStep !== "checkout" && stripeLinkStep !== "success",
73059
- onBack: handleBack,
73060
- showClose: stripeLinkStep !== "checkout",
73061
- onClose: handleClose
73062
- }
73063
- ),
73064
- /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73065
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73066
- PayWithStripeLink,
73067
- {
73068
- userId,
73069
- publishableKey,
73070
- recipientAddress,
73071
- destinationChainType,
73072
- destinationChainId,
73073
- destinationTokenAddress,
73074
- wallets,
73075
- email: userEmail,
73076
- iconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/link.svg` : void 0,
73077
- step: stripeLinkStep,
73078
- onStepChange: setStripeLinkStep,
73079
- backHandlerRef: stripeLinkBackRef,
73080
- onDepositSuccess,
73081
- onDepositError
73082
- }
73083
- ),
73084
- depositPoweredByFooter
73085
- ] })
73086
- ] }) : view === "cashapp" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73087
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73088
- DepositHeader,
73089
- {
73090
- title: cashAppView !== "amount" && cashAppAmount ? `Pay $${cashAppAmount} via Cash App` : "Pay with Cash App",
73091
- showBack: cashAppView !== "amount" || sessionOpenedFromMenu,
73092
- onBack: handleBack,
73093
- onClose: handleClose
73094
- }
73095
- ),
73096
- /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73097
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73098
- PayWithCashApp,
73099
- {
73100
- userId,
73101
- publishableKey,
73102
- recipientAddress,
73103
- destinationChainType,
73104
- destinationChainId,
73105
- destinationTokenAddress,
73106
- cashAppIconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/cashapp.svg` : void 0,
73107
- view: cashAppView,
73108
- onViewChange: setCashAppView,
73109
- onAmountChange: setCashAppAmount,
73110
- onEvent,
73111
- onDepositSuccess: onDepositSuccessFor("cashapp"),
73112
- onDepositError: onDepositErrorFor("cashapp"),
73113
- wallets
73114
- }
73115
- ),
73116
- depositPoweredByFooter
73117
- ] })
73118
- ] }) : view === "apple_pay" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73119
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73120
- DepositHeader,
73121
- {
73122
- title: applePayHeaderTitle,
73123
- showBack: applePayShowBack,
73124
- onBack: () => {
73125
- const handled = applePayHandleRef.current?.requestBack() ?? false;
73126
- if (!handled) handleBack();
73127
- },
73128
- onClose: handleClose
73129
- }
73130
- ),
73131
- /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73132
- applePayProvidersLoading ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(SkeletonButton, { variant: "with-icons" }) : !hasEnabledApplePayProvider ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(GeoRestrictionScreen, { methodName: "Apple Pay" }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73133
- BuyWithApplePay,
73134
- {
73135
- ref: applePayHandleRef,
73136
- userId,
73137
- publishableKey,
73138
- destinationChainType,
73139
- destinationChainId,
73140
- destinationTokenAddress,
73141
- userEmail,
73142
- wallets,
73143
- onViewChange: setApplePayView,
73144
- onEvent,
73145
- onDepositSuccess: onDepositSuccessFor("apple_pay"),
73146
- onDepositError: onDepositErrorFor("apple_pay"),
73147
- exitLabel: sessionOpenedFromMenu ? "Return" : "Close",
73148
- onExit: () => {
73149
- if (sessionOpenedFromMenu) {
73150
- setView("main");
73151
- } else {
73152
- handleClose();
73108
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73109
+ ThemeStyleInjector,
73110
+ {
73111
+ className: view === "wallet_connect" ? "uf-flex uf-min-h-0 uf-flex-col" : void 0,
73112
+ children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-min-h-0 uf-max-h-full", children: [
73113
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73114
+ DepositHeader,
73115
+ {
73116
+ title: modalTitle || "Deposit",
73117
+ showClose: !hideOverlay,
73118
+ onClose: handleClose,
73119
+ showBalance: showBalanceHeader,
73120
+ balanceAddress: recipientAddress,
73121
+ balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
73122
+ balanceChainId: destinationChainId,
73123
+ balanceTokenAddress: destinationTokenAddress,
73124
+ projectName: projectConfig?.project_name,
73125
+ publishableKey
73126
+ }
73127
+ ) }),
73128
+ renderMainMenuBody(),
73129
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-flex-shrink-0", children: depositPoweredByFooter })
73130
+ ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73131
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73132
+ DepositHeader,
73133
+ {
73134
+ title: transferCryptoTitle,
73135
+ showBack: showBackTransfer,
73136
+ onBack: handleBack,
73137
+ onClose: handleClose,
73138
+ showBalance: showBalanceHeader,
73139
+ balanceAddress: recipientAddress,
73140
+ balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
73141
+ balanceChainId: destinationChainId,
73142
+ balanceTokenAddress: destinationTokenAddress,
73143
+ projectName: projectConfig?.project_name,
73144
+ publishableKey
73145
+ }
73146
+ ),
73147
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73148
+ standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : transferInputVariant === "single_input" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73149
+ TransferCryptoSingleInput,
73150
+ {
73151
+ userId,
73152
+ publishableKey,
73153
+ recipientAddress,
73154
+ destinationChainType,
73155
+ destinationChainId,
73156
+ destinationTokenAddress,
73157
+ defaultSourceChainType,
73158
+ defaultSourceChainId,
73159
+ defaultSourceTokenAddress,
73160
+ defaultSourceSymbol,
73161
+ prefilledAmountUsd: normalizedPrefilledAmountUsd,
73162
+ depositConfirmationMode,
73163
+ onExecutionsChange: setDepositExecutions,
73164
+ onDepositSuccess: onDepositSuccessFor("transfer"),
73165
+ onDepositError: onDepositErrorFor("transfer"),
73166
+ wallets
73167
+ }
73168
+ ) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73169
+ TransferCryptoDoubleInput,
73170
+ {
73171
+ userId,
73172
+ publishableKey,
73173
+ recipientAddress,
73174
+ destinationChainType,
73175
+ destinationChainId,
73176
+ destinationTokenAddress,
73177
+ defaultSourceChainType,
73178
+ defaultSourceChainId,
73179
+ defaultSourceTokenAddress,
73180
+ defaultSourceSymbol,
73181
+ prefilledAmountUsd: normalizedPrefilledAmountUsd,
73182
+ depositConfirmationMode,
73183
+ onExecutionsChange: setDepositExecutions,
73184
+ onDepositSuccess: onDepositSuccessFor("transfer"),
73185
+ onDepositError: onDepositErrorFor("transfer"),
73186
+ wallets
73153
73187
  }
73188
+ ),
73189
+ depositPoweredByFooter
73190
+ ] })
73191
+ ] }) : view === "tracker" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73192
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73193
+ DepositHeader,
73194
+ {
73195
+ title: selectedExecution ? "Deposit Details" : depositTrackerTitle,
73196
+ showBack: showBackTracker,
73197
+ onBack: handleBack,
73198
+ onClose: handleClose
73154
73199
  }
73155
- }
73156
- ),
73157
- depositPoweredByFooter
73158
- ] })
73159
- ] }) : null })
73200
+ ),
73201
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73202
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(DepositDetailContent, { execution: selectedExecution }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-space-y-2 uf-pb-8", children: allExecutions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73203
+ "div",
73204
+ {
73205
+ className: "uf-text-sm",
73206
+ style: {
73207
+ color: components.container.subtitleColor,
73208
+ fontFamily: fonts.regular
73209
+ },
73210
+ children: "No deposits yet"
73211
+ }
73212
+ ) }) : allExecutions.map((execution) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73213
+ DepositExecutionItem,
73214
+ {
73215
+ execution,
73216
+ onClick: () => setSelectedExecution(execution)
73217
+ },
73218
+ execution.id
73219
+ )) }) }),
73220
+ depositPoweredByFooter
73221
+ ] })
73222
+ ] }) : view === "card" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73223
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73224
+ DepositHeader,
73225
+ {
73226
+ title: cardView === "quotes" ? t8.quotes : depositWithCardTitle,
73227
+ showBack: showBackCard,
73228
+ onBack: handleBack,
73229
+ onClose: handleClose,
73230
+ badge: cardView === "quotes" ? { count: quotesCount } : void 0,
73231
+ showBalance: showBalanceHeader,
73232
+ balanceAddress: recipientAddress,
73233
+ balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
73234
+ balanceChainId: destinationChainId,
73235
+ balanceTokenAddress: destinationTokenAddress,
73236
+ projectName: projectConfig?.project_name,
73237
+ publishableKey
73238
+ }
73239
+ ),
73240
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73241
+ standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : !showFiatOnramp ? (
73242
+ // Fiat on-ramp resolved hidden/disabled after a direct open
73243
+ // (e.g. platform `is_hidden` for a Stripe Link-only project).
73244
+ // Show a geo-restriction screen rather than the card UI so the
73245
+ // hard-hide is honoured without a flash of "Pay with Card".
73246
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(GeoRestrictionScreen, { methodName: "Card" })
73247
+ ) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73248
+ BuyWithCard,
73249
+ {
73250
+ userId,
73251
+ publishableKey,
73252
+ view: cardView,
73253
+ onViewChange: handleCardViewChange,
73254
+ destinationTokenSymbol,
73255
+ recipientAddress,
73256
+ destinationChainType,
73257
+ destinationChainId,
73258
+ destinationTokenAddress,
73259
+ onDepositSuccess: onDepositSuccessFor("card"),
73260
+ onDepositError: onDepositErrorFor("card"),
73261
+ onEvent,
73262
+ themeClass,
73263
+ wallets,
73264
+ assetCdnUrl: projectConfig?.asset_cdn_url,
73265
+ hideDepositFlowInfo,
73266
+ hideDisplayDescription,
73267
+ prefilledAmountUsd: normalizedPrefilledAmountUsd
73268
+ }
73269
+ ),
73270
+ depositPoweredByFooter
73271
+ ] })
73272
+ ] }) : view === "exchange" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73273
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73274
+ DepositHeader,
73275
+ {
73276
+ title: payWithExchangeTitle,
73277
+ showBack: exchangeView === "pending" || sessionOpenedFromMenu,
73278
+ onBack: handleBack,
73279
+ onClose: handleClose
73280
+ }
73281
+ ),
73282
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73283
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73284
+ PayWithExchange,
73285
+ {
73286
+ userId,
73287
+ publishableKey,
73288
+ exchanges,
73289
+ view: exchangeView,
73290
+ onViewChange: setExchangeView,
73291
+ destinationTokenSymbol,
73292
+ recipientAddress,
73293
+ destinationChainType,
73294
+ destinationChainId,
73295
+ destinationTokenAddress,
73296
+ onDepositSuccess: onDepositSuccessFor("pay_with_exchange"),
73297
+ onDepositError: onDepositErrorFor("pay_with_exchange"),
73298
+ wallets,
73299
+ defaultToken: defaultToken ?? null
73300
+ }
73301
+ ),
73302
+ depositPoweredByFooter
73303
+ ] })
73304
+ ] }) : view === "coinbase_connect" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73305
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73306
+ CoinbaseConnect,
73307
+ {
73308
+ publishableKey,
73309
+ userId,
73310
+ wallets,
73311
+ recipientAddress,
73312
+ destinationTokenAddress: destinationTokenAddress ?? "",
73313
+ destinationChainId: destinationChainId ?? "",
73314
+ destinationChainType: destinationChainType ?? "",
73315
+ onDepositSuccess: onDepositSuccessFor("exchange_connect"),
73316
+ onDepositError: onDepositErrorFor("exchange_connect"),
73317
+ onTransferError: (error) => {
73318
+ onDepositErrorFor("exchange_connect")?.({
73319
+ message: error.message,
73320
+ error
73321
+ });
73322
+ },
73323
+ onBack: handleBack,
73324
+ onClose: handleClose,
73325
+ onDisconnect: handleExchangeDisconnect,
73326
+ skipToHoldings: coinbaseSkipToHoldings,
73327
+ canGoBack: sessionOpenedFromMenu,
73328
+ onExecutionsChange: setDepositExecutions,
73329
+ defaultSourceChainType,
73330
+ defaultSourceChainId,
73331
+ defaultSourceTokenAddress,
73332
+ defaultSourceSymbol,
73333
+ prefilledAmountUsd: normalizedPrefilledAmountUsd
73334
+ }
73335
+ ),
73336
+ depositPoweredByFooter
73337
+ ] }) : view === "wallet_connect" ? (
73338
+ // Mobile: flex-fill the full-height dialog body so the wallet list
73339
+ // can grow and scroll, with the footer pinned to the bottom.
73340
+ // Desktop (sm:): stays content-sized.
73341
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
73342
+ "div",
73343
+ {
73344
+ className: "uf-flex uf-flex-col uf-gap-1.5 uf-min-h-0 uf-flex-1 sm:uf-flex-none",
73345
+ children: [
73346
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73347
+ WalletConnect,
73348
+ {
73349
+ walletInfo: browserWalletInfo ?? void 0,
73350
+ depositWallet: browserWalletInfo?.depositWallet ?? void 0,
73351
+ wallets,
73352
+ userId,
73353
+ publishableKey,
73354
+ assetCdnUrl: projectConfig?.asset_cdn_url,
73355
+ projectName: projectConfig?.project_name,
73356
+ onError: (error) => {
73357
+ onDepositErrorFor("wallet_connect")?.({
73358
+ message: error.message,
73359
+ error
73360
+ });
73361
+ },
73362
+ onDepositSuccess: onDepositSuccessFor("wallet_connect"),
73363
+ onDepositError: onDepositErrorFor("wallet_connect"),
73364
+ amountQuickSelect: browserWalletAmountQuickSelect,
73365
+ prefilledAmountUsd: normalizedPrefilledAmountUsd,
73366
+ onWalletDisconnect: handleWalletDisconnect,
73367
+ onWalletConnected: (info, dw) => {
73368
+ setBrowserWalletInfo({ ...info, depositWallet: dw });
73369
+ setStoredWalletState(info.type);
73370
+ setBrowserWalletChainType(dw.chain_type === "solana" ? "solana" : "ethereum");
73371
+ },
73372
+ onBack: handleBack,
73373
+ onClose: handleClose,
73374
+ defaultSourceChainType,
73375
+ defaultSourceChainId,
73376
+ defaultSourceTokenAddress,
73377
+ defaultSourceSymbol,
73378
+ canGoBack: sessionOpenedFromMenu,
73379
+ depositWalletsLoading: walletsLoading
73380
+ }
73381
+ ),
73382
+ depositPoweredByFooter
73383
+ ]
73384
+ }
73385
+ )
73386
+ ) : view === "bank_transfer" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73387
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73388
+ DepositHeader,
73389
+ {
73390
+ title: t8.bankTransfer.title,
73391
+ showBack: bankTransferView !== "providers" || sessionOpenedFromMenu,
73392
+ onBack: handleBack,
73393
+ onClose: handleClose
73394
+ }
73395
+ ),
73396
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73397
+ bankTransferProvidersLoading ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(SkeletonButton, { variant: "with-icons" }) : !hasEnabledBankTransferProvider ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(GeoRestrictionScreen, { methodName: "Bank Transfer" }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73398
+ BankTransfer,
73399
+ {
73400
+ userId,
73401
+ publishableKey,
73402
+ view: bankTransferView,
73403
+ onViewChange: setBankTransferView,
73404
+ recipientAddress,
73405
+ destinationChainType,
73406
+ destinationChainId,
73407
+ destinationTokenAddress,
73408
+ destinationTokenSymbol,
73409
+ wallets,
73410
+ defaultToken: defaultToken ?? null,
73411
+ assetCdnUrl: projectConfig?.asset_cdn_url,
73412
+ onEvent,
73413
+ onDepositSuccess,
73414
+ onDepositError,
73415
+ prefilledAmountUsd: normalizedPrefilledAmountUsd
73416
+ }
73417
+ ),
73418
+ depositPoweredByFooter
73419
+ ] })
73420
+ ] }) : view === "stripe_link" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73421
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73422
+ DepositHeader,
73423
+ {
73424
+ title: "Deposit with Link",
73425
+ showBack: stripeLinkStep !== "checkout" && stripeLinkStep !== "success",
73426
+ onBack: handleBack,
73427
+ showClose: stripeLinkStep !== "checkout" && stripeLinkStep !== "auth",
73428
+ onClose: handleClose
73429
+ }
73430
+ ),
73431
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73432
+ isLoadingIp ? (
73433
+ // Hold the geo decision until IP resolves so we don't mount
73434
+ // PayWithStripeLink (which kicks off config/OAuth work) for a
73435
+ // deep-link user who turns out to be outside the US.
73436
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(SkeletonButton, { variant: "with-icons" })
73437
+ ) : !showStripeLink ? (
73438
+ // Stripe Link's crypto on-ramp is US-only. On a direct open
73439
+ // (initialScreen="stripe_link") the row isn't in a menu to
73440
+ // fall back to, so show a geo-restriction screen rather than
73441
+ // the Link UI.
73442
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73443
+ GeoRestrictionScreen,
73444
+ {
73445
+ methodName: t8.stripeLink.title,
73446
+ message: "Pay with Link is only available in the US."
73447
+ }
73448
+ )
73449
+ ) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73450
+ PayWithStripeLink,
73451
+ {
73452
+ userId,
73453
+ publishableKey,
73454
+ recipientAddress,
73455
+ destinationChainType,
73456
+ destinationChainId,
73457
+ destinationTokenAddress,
73458
+ countryCode: userIpInfo?.alpha2,
73459
+ subdivisionCode: userIpInfo?.subdivisionCode ?? void 0,
73460
+ wallets,
73461
+ email: userEmail,
73462
+ iconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/link.svg` : void 0,
73463
+ step: stripeLinkStep,
73464
+ onStepChange: setStripeLinkStep,
73465
+ backHandlerRef: stripeLinkBackRef,
73466
+ onDepositSuccess,
73467
+ onDepositError
73468
+ }
73469
+ ),
73470
+ depositPoweredByFooter
73471
+ ] })
73472
+ ] }) : view === "cashapp" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73473
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73474
+ DepositHeader,
73475
+ {
73476
+ title: cashAppView !== "amount" && cashAppAmount ? `Pay $${cashAppAmount} via Cash App` : "Pay with Cash App",
73477
+ showBack: cashAppView !== "amount" || sessionOpenedFromMenu,
73478
+ onBack: handleBack,
73479
+ onClose: handleClose
73480
+ }
73481
+ ),
73482
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73483
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73484
+ PayWithCashApp,
73485
+ {
73486
+ userId,
73487
+ publishableKey,
73488
+ recipientAddress,
73489
+ destinationChainType,
73490
+ destinationChainId,
73491
+ destinationTokenAddress,
73492
+ cashAppIconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/cashapp.svg` : void 0,
73493
+ view: cashAppView,
73494
+ onViewChange: setCashAppView,
73495
+ onAmountChange: setCashAppAmount,
73496
+ onEvent,
73497
+ onDepositSuccess: onDepositSuccessFor("cashapp"),
73498
+ onDepositError: onDepositErrorFor("cashapp"),
73499
+ prefilledAmountUsd: normalizedPrefilledAmountUsd,
73500
+ wallets
73501
+ }
73502
+ ),
73503
+ depositPoweredByFooter
73504
+ ] })
73505
+ ] }) : view === "apple_pay" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73506
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73507
+ DepositHeader,
73508
+ {
73509
+ title: applePayHeaderTitle,
73510
+ showBack: applePayShowBack,
73511
+ onBack: () => {
73512
+ const handled = applePayHandleRef.current?.requestBack() ?? false;
73513
+ if (!handled) handleBack();
73514
+ },
73515
+ onClose: handleClose
73516
+ }
73517
+ ),
73518
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73519
+ applePayProvidersLoading ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(SkeletonButton, { variant: "with-icons" }) : !hasEnabledApplePayProvider ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(GeoRestrictionScreen, { methodName: "Apple Pay" }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73520
+ BuyWithApplePay,
73521
+ {
73522
+ ref: applePayHandleRef,
73523
+ userId,
73524
+ publishableKey,
73525
+ destinationChainType,
73526
+ destinationChainId,
73527
+ destinationTokenAddress,
73528
+ userEmail,
73529
+ wallets,
73530
+ onViewChange: setApplePayView,
73531
+ onEvent,
73532
+ onDepositSuccess: onDepositSuccessFor("apple_pay"),
73533
+ onDepositError: onDepositErrorFor("apple_pay"),
73534
+ exitLabel: sessionOpenedFromMenu ? "Return" : "Close",
73535
+ onExit: () => {
73536
+ if (sessionOpenedFromMenu) {
73537
+ setView("main");
73538
+ } else {
73539
+ handleClose();
73540
+ }
73541
+ }
73542
+ }
73543
+ ),
73544
+ depositPoweredByFooter
73545
+ ] })
73546
+ ] }) : null
73547
+ }
73548
+ )
73160
73549
  ]
73161
73550
  }
73162
73551
  )
@@ -73595,253 +73984,275 @@ function CheckoutModal({
73595
73984
  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(PortalContainerProvider, { value: null, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Dialog2, { open, onOpenChange: handleClose, modal: true, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73596
73985
  DialogContent2,
73597
73986
  {
73598
- 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}`,
73987
+ 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
73988
+ // grid whose single auto row only grows to fill free space and never
73989
+ // shrinks below content, so a long wallet list would balloon the row
73990
+ // past the viewport and push the footer off-screen. Clamp the row to
73991
+ // the modal height with minmax(0,1fr) so the inner overflow-y-auto list
73992
+ // scrolls with the footer pinned. Reset to content-sized on desktop.
73993
+ view === "wallet_connect" ? "[grid-template-rows:minmax(0,1fr)] sm:[grid-template-rows:none]" : ""} ${themeClass}`,
73599
73994
  style: { backgroundColor: colors2.background },
73600
73995
  onPointerDownOutside: (e) => e.preventDefault(),
73601
73996
  onInteractOutside: (e) => e.preventDefault(),
73602
- children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
73603
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(DepositHeader, { title: modalTitle || "Checkout", showClose: true, onClose: handleClose }),
73604
- /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73605
- piLoading ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-space-y-3", children: [
73606
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73607
- "div",
73608
- {
73609
- className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
73610
- style: {
73611
- backgroundColor: components.card.backgroundColor,
73612
- borderRadius: components.card.borderRadius,
73613
- border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
73614
- },
73615
- children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
73616
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73617
- "div",
73997
+ children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73998
+ ThemeStyleInjector,
73999
+ {
74000
+ className: view === "wallet_connect" ? "uf-flex uf-min-h-0 uf-flex-col" : void 0,
74001
+ children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
74002
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(DepositHeader, { title: modalTitle || "Checkout", showClose: true, onClose: handleClose }),
74003
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
74004
+ piLoading ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-space-y-3", children: [
74005
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74006
+ "div",
74007
+ {
74008
+ className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
74009
+ style: {
74010
+ backgroundColor: components.card.backgroundColor,
74011
+ borderRadius: components.card.borderRadius,
74012
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
74013
+ },
74014
+ children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
74015
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74016
+ "div",
74017
+ {
74018
+ className: "uf-h-8 uf-w-24 uf-rounded",
74019
+ style: {
74020
+ backgroundColor: components.card.borderColor
74021
+ }
74022
+ }
74023
+ ),
74024
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74025
+ "div",
74026
+ {
74027
+ className: "uf-h-4 uf-w-16 uf-rounded",
74028
+ style: {
74029
+ backgroundColor: components.card.borderColor
74030
+ }
74031
+ }
74032
+ )
74033
+ ] })
74034
+ }
74035
+ ),
74036
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SkeletonButton2, {}),
74037
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SkeletonButton2, {})
74038
+ ] }) : piError ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
74039
+ /* @__PURE__ */ (0, import_jsx_runtime83.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_runtime83.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
74040
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74041
+ "h3",
74042
+ {
74043
+ className: "uf-text-lg uf-font-semibold uf-mb-2",
74044
+ style: {
74045
+ color: colors2.foreground,
74046
+ fontFamily: fonts.semibold
74047
+ },
74048
+ children: "Unable to Load Checkout"
74049
+ }
74050
+ ),
74051
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74052
+ "p",
74053
+ {
74054
+ className: "uf-text-sm uf-max-w-[280px]",
74055
+ style: {
74056
+ color: colors2.foregroundMuted,
74057
+ fontFamily: fonts.regular
74058
+ },
74059
+ children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
74060
+ }
74061
+ )
74062
+ ] }) : paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-space-y-3", children: [
74063
+ progressSection,
74064
+ (paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
74065
+ showTransferCrypto && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74066
+ TransferCryptoButton,
73618
74067
  {
73619
- className: "uf-h-8 uf-w-24 uf-rounded",
73620
- style: {
73621
- backgroundColor: components.card.borderColor
73622
- }
74068
+ onClick: () => {
74069
+ lastCheckoutMethodRef.current = "transfer";
74070
+ setView("transfer");
74071
+ },
74072
+ title: i18n2.checkoutModal.transferCrypto.title,
74073
+ subtitle: i18n2.checkoutModal.transferCrypto.subtitle,
74074
+ featuredTokens: projectConfig?.transfer_crypto.networks
73623
74075
  }
73624
74076
  ),
73625
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73626
- "div",
74077
+ showConnectWallet && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74078
+ BrowserWalletButton,
73627
74079
  {
73628
- className: "uf-h-4 uf-w-16 uf-rounded",
73629
- style: {
73630
- backgroundColor: components.card.borderColor
73631
- }
74080
+ onClick: handleBrowserWalletClick,
74081
+ onConnectClick: handleWalletConnectClick,
74082
+ onDisconnect: handleWalletDisconnect,
74083
+ chainType: browserWalletChainType,
74084
+ publishableKey,
74085
+ featuredWallets: projectConfig?.connect_wallet?.wallets,
74086
+ subtitle: i18n2.checkoutModal.browserWallet.subtitle
73632
74087
  }
73633
74088
  )
73634
74089
  ] })
73635
- }
73636
- ),
73637
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SkeletonButton2, {}),
73638
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SkeletonButton2, {})
73639
- ] }) : piError ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
73640
- /* @__PURE__ */ (0, import_jsx_runtime83.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_runtime83.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
74090
+ ] }) : null,
74091
+ poweredByFooter
74092
+ ] })
74093
+ ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
73641
74094
  /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73642
- "h3",
74095
+ DepositHeader,
73643
74096
  {
73644
- className: "uf-text-lg uf-font-semibold uf-mb-2",
73645
- style: {
73646
- color: colors2.foreground,
73647
- fontFamily: fonts.semibold
73648
- },
73649
- children: "Unable to Load Checkout"
74097
+ title: modalTitle || "Checkout",
74098
+ showBack: true,
74099
+ onBack: handleBack,
74100
+ onClose: handleClose
73650
74101
  }
73651
74102
  ),
73652
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73653
- "p",
73654
- {
73655
- className: "uf-text-sm uf-max-w-[280px]",
73656
- style: {
73657
- color: colors2.foregroundMuted,
73658
- fontFamily: fonts.regular
73659
- },
73660
- children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
73661
- }
73662
- )
73663
- ] }) : paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-space-y-3", children: [
73664
- progressSection,
73665
- (paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
73666
- showTransferCrypto && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73667
- TransferCryptoButton,
73668
- {
73669
- onClick: () => {
73670
- lastCheckoutMethodRef.current = "transfer";
73671
- setView("transfer");
73672
- },
73673
- title: i18n2.checkoutModal.transferCrypto.title,
73674
- subtitle: i18n2.checkoutModal.transferCrypto.subtitle,
73675
- featuredTokens: projectConfig?.transfer_crypto.networks
73676
- }
73677
- ),
73678
- showConnectWallet && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73679
- BrowserWalletButton,
73680
- {
73681
- onClick: handleBrowserWalletClick,
73682
- onConnectClick: handleWalletConnectClick,
73683
- onDisconnect: handleWalletDisconnect,
73684
- chainType: browserWalletChainType,
73685
- publishableKey,
73686
- featuredWallets: projectConfig?.connect_wallet?.wallets,
73687
- subtitle: i18n2.checkoutModal.browserWallet.subtitle
73688
- }
73689
- )
73690
- ] })
73691
- ] }) : null,
73692
- poweredByFooter
73693
- ] })
73694
- ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
73695
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73696
- DepositHeader,
73697
- {
73698
- title: modalTitle || "Checkout",
73699
- showBack: true,
73700
- onBack: handleBack,
73701
- onClose: handleClose
73702
- }
73703
- ),
73704
- /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73705
- paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
73706
- (() => {
73707
- const receivedUsd = parseFloat(
73708
- paymentIntent.destination_amount_received_usd || paymentIntent.amount_received_usd
73709
- );
73710
- const totalUsd = parseFloat(
73711
- paymentIntent.destination_amount_usd || paymentIntent.amount_usd
73712
- );
73713
- const pct = totalUsd > 0 ? Math.min(receivedUsd / totalUsd * 100, 100) : 0;
73714
- return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-space-y-2", children: [
73715
- /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between", children: [
73716
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73717
- "span",
73718
- {
73719
- className: "uf-text-xs",
73720
- style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
73721
- children: "Received"
73722
- }
73723
- ),
73724
- /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
73725
- "span",
73726
- {
73727
- className: "uf-text-xs",
73728
- style: { color: colors2.foreground, fontFamily: fonts.medium },
73729
- children: [
73730
- "$",
73731
- receivedUsd.toFixed(2),
73732
- " / $",
73733
- totalUsd.toFixed(2)
73734
- ]
73735
- }
73736
- )
73737
- ] }),
73738
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73739
- "div",
73740
- {
73741
- className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
73742
- style: { backgroundColor: colors2.border },
73743
- children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74103
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
74104
+ paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
74105
+ (() => {
74106
+ const receivedUsd = parseFloat(
74107
+ paymentIntent.destination_amount_received_usd || paymentIntent.amount_received_usd
74108
+ );
74109
+ const totalUsd = parseFloat(
74110
+ paymentIntent.destination_amount_usd || paymentIntent.amount_usd
74111
+ );
74112
+ const pct = totalUsd > 0 ? Math.min(receivedUsd / totalUsd * 100, 100) : 0;
74113
+ return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-space-y-2", children: [
74114
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between", children: [
74115
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74116
+ "span",
74117
+ {
74118
+ className: "uf-text-xs",
74119
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
74120
+ children: "Received"
74121
+ }
74122
+ ),
74123
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
74124
+ "span",
74125
+ {
74126
+ className: "uf-text-xs",
74127
+ style: { color: colors2.foreground, fontFamily: fonts.medium },
74128
+ children: [
74129
+ "$",
74130
+ receivedUsd.toFixed(2),
74131
+ " / $",
74132
+ totalUsd.toFixed(2)
74133
+ ]
74134
+ }
74135
+ )
74136
+ ] }),
74137
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73744
74138
  "div",
73745
74139
  {
73746
- className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
73747
- style: {
73748
- width: `${pct}%`,
73749
- backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
73750
- }
74140
+ className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
74141
+ style: { backgroundColor: colors2.border },
74142
+ children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74143
+ "div",
74144
+ {
74145
+ className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
74146
+ style: {
74147
+ width: `${pct}%`,
74148
+ backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
74149
+ }
74150
+ }
74151
+ )
73751
74152
  }
73752
74153
  )
74154
+ ] });
74155
+ })(),
74156
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74157
+ TransferCryptoSingleInput,
74158
+ {
74159
+ userId: paymentIntent.user_id || "",
74160
+ publishableKey,
74161
+ clientSecret,
74162
+ recipientAddress: paymentIntent.recipient_address,
74163
+ destinationChainType: paymentIntent.destination_chain_type,
74164
+ destinationChainId: paymentIntent.destination_chain_id,
74165
+ destinationTokenAddress: paymentIntent.destination_token_address,
74166
+ defaultSourceChainType,
74167
+ defaultSourceChainId,
74168
+ defaultSourceTokenAddress,
74169
+ defaultSourceSymbol,
74170
+ depositConfirmationMode: "auto_ui",
74171
+ wallets,
74172
+ onSourceTokenChange: setSelectedSource,
74173
+ persistCheckingIndicator: true,
74174
+ productType: "payment",
74175
+ checkoutQuote: effectiveCheckoutQuote,
74176
+ isCheckoutQuoteLoading: isQuoteLoading || isQuoteFetching
73753
74177
  }
73754
74178
  )
73755
- ] });
73756
- })(),
73757
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73758
- TransferCryptoSingleInput,
74179
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SkeletonButton2, {}),
74180
+ poweredByFooter
74181
+ ] })
74182
+ ] }) : view === "wallet_connect" && paymentIntent ? (
74183
+ // Mobile: flex-fill the full-height sheet so the wallet list grows and
74184
+ // scrolls with the footer pinned. Desktop (sm:): content-sized.
74185
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
74186
+ "div",
73759
74187
  {
73760
- userId: paymentIntent.user_id || "",
73761
- publishableKey,
73762
- clientSecret,
73763
- recipientAddress: paymentIntent.recipient_address,
73764
- destinationChainType: paymentIntent.destination_chain_type,
73765
- destinationChainId: paymentIntent.destination_chain_id,
73766
- destinationTokenAddress: paymentIntent.destination_token_address,
73767
- defaultSourceChainType,
73768
- defaultSourceChainId,
73769
- defaultSourceTokenAddress,
73770
- defaultSourceSymbol,
73771
- depositConfirmationMode: "auto_ui",
73772
- wallets,
73773
- onSourceTokenChange: setSelectedSource,
73774
- persistCheckingIndicator: true,
73775
- productType: "payment",
73776
- checkoutQuote: effectiveCheckoutQuote,
73777
- isCheckoutQuoteLoading: isQuoteLoading || isQuoteFetching
74188
+ className: "uf-flex uf-flex-col uf-gap-1.5 uf-min-h-0 uf-flex-1 sm:uf-flex-none",
74189
+ children: [
74190
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74191
+ WalletConnect,
74192
+ {
74193
+ walletInfo: browserWalletInfo ?? void 0,
74194
+ depositWallet: browserWalletInfo?.depositWallet ?? void 0,
74195
+ wallets,
74196
+ userId: paymentIntent.user_id || "",
74197
+ publishableKey,
74198
+ clientSecret,
74199
+ prefilledAmountUsd: remainingAmountUsd,
74200
+ checkoutAmountUsd: paymentIntent.amount_usd,
74201
+ checkoutReceivedUsd: paymentIntent.amount_received_usd,
74202
+ checkoutDestination: {
74203
+ chainType: paymentIntent.destination_chain_type,
74204
+ chainId: paymentIntent.destination_chain_id,
74205
+ tokenAddress: paymentIntent.destination_token_address,
74206
+ decimals: paymentIntent.destination_token_decimals ?? 6
74207
+ },
74208
+ productType: "payment",
74209
+ stablecoinParity: paymentIntent.stablecoin_parity ?? false,
74210
+ checkoutRemainingBaseUnits: (() => {
74211
+ const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
74212
+ return remaining > 0n ? remaining.toString() : "0";
74213
+ })(),
74214
+ onSuccess: (_txHash) => {
74215
+ emitCheckoutSuccess(
74216
+ {
74217
+ paymentIntentId: paymentIntent.id,
74218
+ status: "processing",
74219
+ paymentIntent
74220
+ },
74221
+ "wallet_connect"
74222
+ );
74223
+ },
74224
+ onError: (error) => {
74225
+ onCheckoutError?.({
74226
+ message: error.message,
74227
+ error,
74228
+ method: "wallet_connect"
74229
+ });
74230
+ },
74231
+ onWalletDisconnect: handleWalletDisconnect,
74232
+ onWalletConnected: (info, dw) => {
74233
+ setBrowserWalletInfo({ ...info, depositWallet: dw });
74234
+ setStoredWalletState(info.type);
74235
+ setBrowserWalletChainType(dw.chain_type === "solana" ? "solana" : "ethereum");
74236
+ lastCheckoutMethodRef.current = "wallet_connect";
74237
+ },
74238
+ onNewDeposit: () => setView("main"),
74239
+ onDone: () => setView("main"),
74240
+ paymentIntentStatus: paymentIntent.status,
74241
+ onBack: handleBack,
74242
+ onClose: handleClose,
74243
+ defaultSourceChainType,
74244
+ defaultSourceChainId,
74245
+ defaultSourceTokenAddress,
74246
+ defaultSourceSymbol
74247
+ }
74248
+ ),
74249
+ poweredByFooter
74250
+ ]
73778
74251
  }
73779
74252
  )
73780
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SkeletonButton2, {}),
73781
- poweredByFooter
73782
- ] })
73783
- ] }) : view === "wallet_connect" && paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73784
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73785
- WalletConnect,
73786
- {
73787
- walletInfo: browserWalletInfo ?? void 0,
73788
- depositWallet: browserWalletInfo?.depositWallet ?? void 0,
73789
- wallets,
73790
- userId: paymentIntent.user_id || "",
73791
- publishableKey,
73792
- clientSecret,
73793
- prefillAmountUsd: remainingAmountUsd,
73794
- checkoutAmountUsd: paymentIntent.amount_usd,
73795
- checkoutReceivedUsd: paymentIntent.amount_received_usd,
73796
- checkoutDestination: {
73797
- chainType: paymentIntent.destination_chain_type,
73798
- chainId: paymentIntent.destination_chain_id,
73799
- tokenAddress: paymentIntent.destination_token_address,
73800
- decimals: paymentIntent.destination_token_decimals ?? 6
73801
- },
73802
- productType: "payment",
73803
- stablecoinParity: paymentIntent.stablecoin_parity ?? false,
73804
- checkoutRemainingBaseUnits: (() => {
73805
- const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
73806
- return remaining > 0n ? remaining.toString() : "0";
73807
- })(),
73808
- onSuccess: (_txHash) => {
73809
- emitCheckoutSuccess(
73810
- {
73811
- paymentIntentId: paymentIntent.id,
73812
- status: "processing",
73813
- paymentIntent
73814
- },
73815
- "wallet_connect"
73816
- );
73817
- },
73818
- onError: (error) => {
73819
- onCheckoutError?.({
73820
- message: error.message,
73821
- error,
73822
- method: "wallet_connect"
73823
- });
73824
- },
73825
- onWalletDisconnect: handleWalletDisconnect,
73826
- onWalletConnected: (info, dw) => {
73827
- setBrowserWalletInfo({ ...info, depositWallet: dw });
73828
- setStoredWalletState(info.type);
73829
- setBrowserWalletChainType(dw.chain_type === "solana" ? "solana" : "ethereum");
73830
- lastCheckoutMethodRef.current = "wallet_connect";
73831
- },
73832
- onNewDeposit: () => setView("main"),
73833
- onDone: () => setView("main"),
73834
- paymentIntentStatus: paymentIntent.status,
73835
- onBack: handleBack,
73836
- onClose: handleClose,
73837
- defaultSourceChainType,
73838
- defaultSourceChainId,
73839
- defaultSourceTokenAddress,
73840
- defaultSourceSymbol
73841
- }
73842
- ),
73843
- poweredByFooter
73844
- ] }) : null })
74253
+ ) : null
74254
+ }
74255
+ )
73845
74256
  }
73846
74257
  ) }) });
73847
74258
  }
@@ -76148,6 +76559,7 @@ function UnifoldProvider2({
76148
76559
  defaultSourceChainId: depositConfig.defaultSourceChainId,
76149
76560
  defaultSourceTokenAddress: depositConfig.defaultSourceTokenAddress,
76150
76561
  defaultSourceSymbol: depositConfig.defaultSourceSymbol,
76562
+ prefilledAmountUsd: depositConfig.prefilledAmountUsd,
76151
76563
  userEmail: depositConfig.user?.email,
76152
76564
  depositConfirmationMode: depositConfig.depositConfirmationMode ?? "auto_ui",
76153
76565
  hideDepositTracker: config?.hideDepositTracker,