@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.js CHANGED
@@ -34701,6 +34701,9 @@ function replaceData(prevData, data, options2) {
34701
34701
  }
34702
34702
  return data;
34703
34703
  }
34704
+ function keepPreviousData(previousData) {
34705
+ return previousData;
34706
+ }
34704
34707
  function addToEnd(items, item, max2 = 0) {
34705
34708
  const newItems = [...items, item];
34706
34709
  return max2 && newItems.length > max2 ? newItems.slice(1) : newItems;
@@ -37113,6 +37116,7 @@ var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
37113
37116
  var React211 = __toESM(require_react(), 1);
37114
37117
  var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
37115
37118
  var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
37119
+ var React522 = __toESM(require_react(), 1);
37116
37120
  var import_react7 = __toESM(require_react(), 1);
37117
37121
  var import_react8 = __toESM(require_react(), 1);
37118
37122
  var import_react9 = __toESM(require_react(), 1);
@@ -37131,7 +37135,7 @@ var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
37131
37135
  var import_jsx_runtime20 = __toESM(require_jsx_runtime(), 1);
37132
37136
  var import_jsx_runtime21 = __toESM(require_jsx_runtime(), 1);
37133
37137
  var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
37134
- var React522 = __toESM(require_react(), 1);
37138
+ var React622 = __toESM(require_react(), 1);
37135
37139
  var import_react15 = __toESM(require_react(), 1);
37136
37140
  var import_react16 = __toESM(require_react(), 1);
37137
37141
  var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
@@ -37145,55 +37149,55 @@ var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
37145
37149
  var import_react21 = __toESM(require_react(), 1);
37146
37150
  var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
37147
37151
  var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
37148
- var React622 = __toESM(require_react(), 1);
37149
- var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
37150
37152
  var React72 = __toESM(require_react(), 1);
37151
- var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
37153
+ var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
37152
37154
  var React82 = __toESM(require_react(), 1);
37155
+ var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
37156
+ var React92 = __toESM(require_react(), 1);
37153
37157
  var import_jsx_runtime31 = __toESM(require_jsx_runtime(), 1);
37158
+ var React112 = __toESM(require_react(), 1);
37154
37159
  var React102 = __toESM(require_react(), 1);
37155
- var React92 = __toESM(require_react(), 1);
37156
37160
  var React25 = __toESM(require_react(), 1);
37157
37161
  var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
37158
37162
  var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
37159
37163
  var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
37160
- var React112 = __toESM(require_react(), 1);
37161
- var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
37162
37164
  var React122 = __toESM(require_react(), 1);
37163
- var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
37165
+ var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
37164
37166
  var React132 = __toESM(require_react(), 1);
37165
- var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1);
37167
+ var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
37166
37168
  var React142 = __toESM(require_react(), 1);
37167
- var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1);
37168
- var React282 = __toESM(require_react(), 1);
37169
+ var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1);
37169
37170
  var React152 = __toESM(require_react(), 1);
37171
+ var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1);
37172
+ var React292 = __toESM(require_react(), 1);
37170
37173
  var React162 = __toESM(require_react(), 1);
37171
- var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1);
37172
37174
  var React172 = __toESM(require_react(), 1);
37173
- var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
37175
+ var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1);
37174
37176
  var React182 = __toESM(require_react(), 1);
37175
- var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
37177
+ var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
37176
37178
  var React192 = __toESM(require_react(), 1);
37177
- var import_jsx_runtime42 = __toESM(require_jsx_runtime(), 1);
37179
+ var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
37178
37180
  var React202 = __toESM(require_react(), 1);
37179
- var import_jsx_runtime43 = __toESM(require_jsx_runtime(), 1);
37181
+ var import_jsx_runtime42 = __toESM(require_jsx_runtime(), 1);
37180
37182
  var React212 = __toESM(require_react(), 1);
37181
- var import_jsx_runtime44 = __toESM(require_jsx_runtime(), 1);
37183
+ var import_jsx_runtime43 = __toESM(require_jsx_runtime(), 1);
37182
37184
  var React2222 = __toESM(require_react(), 1);
37183
- var import_jsx_runtime45 = __toESM(require_jsx_runtime(), 1);
37185
+ var import_jsx_runtime44 = __toESM(require_jsx_runtime(), 1);
37184
37186
  var React232 = __toESM(require_react(), 1);
37185
- var import_jsx_runtime46 = __toESM(require_jsx_runtime(), 1);
37187
+ var import_jsx_runtime45 = __toESM(require_jsx_runtime(), 1);
37186
37188
  var React242 = __toESM(require_react(), 1);
37187
- var import_jsx_runtime47 = __toESM(require_jsx_runtime(), 1);
37189
+ var import_jsx_runtime46 = __toESM(require_jsx_runtime(), 1);
37188
37190
  var React252 = __toESM(require_react(), 1);
37189
- var import_jsx_runtime48 = __toESM(require_jsx_runtime(), 1);
37191
+ var import_jsx_runtime47 = __toESM(require_jsx_runtime(), 1);
37190
37192
  var React262 = __toESM(require_react(), 1);
37191
- var import_jsx_runtime49 = __toESM(require_jsx_runtime(), 1);
37193
+ var import_jsx_runtime48 = __toESM(require_jsx_runtime(), 1);
37192
37194
  var React272 = __toESM(require_react(), 1);
37195
+ var import_jsx_runtime49 = __toESM(require_jsx_runtime(), 1);
37196
+ var React282 = __toESM(require_react(), 1);
37193
37197
  var import_jsx_runtime50 = __toESM(require_jsx_runtime(), 1);
37194
37198
  var import_jsx_runtime51 = __toESM(require_jsx_runtime(), 1);
37195
37199
  var import_jsx_runtime52 = __toESM(require_jsx_runtime(), 1);
37196
- var React292 = __toESM(require_react(), 1);
37200
+ var React302 = __toESM(require_react(), 1);
37197
37201
  var import_jsx_runtime53 = __toESM(require_jsx_runtime(), 1);
37198
37202
  var import_react22 = __toESM(require_react(), 1);
37199
37203
  var import_jsx_runtime54 = __toESM(require_jsx_runtime(), 1);
@@ -37203,7 +37207,7 @@ var import_react24 = __toESM(require_react(), 1);
37203
37207
  var import_jsx_runtime56 = __toESM(require_jsx_runtime(), 1);
37204
37208
  var import_react25 = __toESM(require_react(), 1);
37205
37209
  var import_react26 = __toESM(require_react(), 1);
37206
- var React312 = __toESM(require_react(), 1);
37210
+ var React322 = __toESM(require_react(), 1);
37207
37211
  var import_jsx_runtime57 = __toESM(require_jsx_runtime(), 1);
37208
37212
  var import_jsx_runtime58 = __toESM(require_jsx_runtime(), 1);
37209
37213
  var import_jsx_runtime59 = __toESM(require_jsx_runtime(), 1);
@@ -37213,7 +37217,7 @@ var import_react28 = __toESM(require_react(), 1);
37213
37217
  var import_jsx_runtime61 = __toESM(require_jsx_runtime(), 1);
37214
37218
  var import_jsx_runtime62 = __toESM(require_jsx_runtime(), 1);
37215
37219
  var import_react29 = __toESM(require_react(), 1);
37216
- var React322 = __toESM(require_react(), 1);
37220
+ var React332 = __toESM(require_react(), 1);
37217
37221
  var React31 = __toESM(require_react(), 1);
37218
37222
  var React29 = __toESM(require_react(), 1);
37219
37223
  var React26 = __toESM(require_react(), 1);
@@ -37230,7 +37234,7 @@ var import_jsx_runtime67 = __toESM(require_jsx_runtime(), 1);
37230
37234
  var import_jsx_runtime68 = __toESM(require_jsx_runtime(), 1);
37231
37235
  var import_jsx_runtime69 = __toESM(require_jsx_runtime(), 1);
37232
37236
  var import_react31 = __toESM(require_react(), 1);
37233
- var React332 = __toESM(require_react(), 1);
37237
+ var React342 = __toESM(require_react(), 1);
37234
37238
  var React35 = __toESM(require_react(), 1);
37235
37239
  var ReactDOM4 = __toESM(require_react_dom(), 1);
37236
37240
  var import_react32 = __toESM(require_react(), 1);
@@ -37243,7 +37247,7 @@ var React34 = __toESM(require_react(), 1);
37243
37247
  var import_jsx_runtime73 = __toESM(require_jsx_runtime(), 1);
37244
37248
  var import_jsx_runtime74 = __toESM(require_jsx_runtime(), 1);
37245
37249
  var import_jsx_runtime75 = __toESM(require_jsx_runtime(), 1);
37246
- var React342 = __toESM(require_react(), 1);
37250
+ var React352 = __toESM(require_react(), 1);
37247
37251
  var import_jsx_runtime76 = __toESM(require_jsx_runtime(), 1);
37248
37252
  var import_jsx_runtime77 = __toESM(require_jsx_runtime(), 1);
37249
37253
  var import_jsx_runtime78 = __toESM(require_jsx_runtime(), 1);
@@ -43455,6 +43459,27 @@ async function getFiatCurrencies(publishableKey) {
43455
43459
  }
43456
43460
  return response.json();
43457
43461
  }
43462
+ async function getFiatExchangeRates(options2 = {}, publishableKey) {
43463
+ const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
43464
+ validatePublishableKey(pk);
43465
+ const params = new URLSearchParams();
43466
+ if (options2.currencies && options2.currencies.length > 0) {
43467
+ params.set("currencies", options2.currencies.join(","));
43468
+ }
43469
+ const queryString = params.toString();
43470
+ const url = `${API_BASE_URL}/v1/public/exchange_rates/fiat_currencies${queryString ? `?${queryString}` : ""}`;
43471
+ const response = await fetch(url, {
43472
+ method: "GET",
43473
+ headers: {
43474
+ accept: "application/json",
43475
+ "x-publishable-key": pk
43476
+ }
43477
+ });
43478
+ if (!response.ok) {
43479
+ throw new Error(`Failed to fetch fiat exchange rates: ${response.statusText}`);
43480
+ }
43481
+ return response.json();
43482
+ }
43458
43483
  async function getOnrampQuotes(request, publishableKey) {
43459
43484
  const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
43460
43485
  validatePublishableKey(pk);
@@ -44119,6 +44144,7 @@ async function stripeGetDefaultToken(params, publishableKey) {
44119
44144
  chain_type: params.chainType
44120
44145
  });
44121
44146
  if (params.countryCode) query.append("country_code", params.countryCode);
44147
+ if (params.subdivisionCode) query.append("subdivision_code", params.subdivisionCode);
44122
44148
  const response = await fetch(
44123
44149
  `${API_BASE_URL}${HEADLESS_STRIPE_BASE}/default_token?${query.toString()}`,
44124
44150
  {
@@ -51151,6 +51177,7 @@ var DialogContent2 = React36.forwardRef(({ className, style, children, omitOverl
51151
51177
  className: cn(
51152
51178
  portalContainer ? "uf-absolute" : "uf-fixed",
51153
51179
  "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",
51180
+ "focus:uf-outline-none focus-visible:uf-outline-none",
51154
51181
  !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",
51155
51182
  "uf-border uf-bg-background",
51156
51183
  omitOverlayEmbed ? "uf-gap-0 uf-p-0" : "uf-gap-4 uf-p-6 uf-shadow-lg uf-duration-200",
@@ -51166,6 +51193,14 @@ var DialogContent2 = React36.forwardRef(({ className, style, children, omitOverl
51166
51193
  ),
51167
51194
  style: {
51168
51195
  "--uf-container-radius": `${components.container.borderRadius}px`,
51196
+ // Radix traps focus and, when the focused control unmounts during an
51197
+ // in-modal screen transition, moves focus onto this container. Modern
51198
+ // browsers paint the default focus ring via `:focus-visible`, which
51199
+ // flashes a highlight around the whole modal until focus settles on
51200
+ // the next screen. Suppress it inline so it works regardless of the
51201
+ // Tailwind build (the container is a programmatic focus target, not an
51202
+ // interactive control, so it should never show a focus ring).
51203
+ outline: "none",
51169
51204
  ...portalContainer ? { display: "flex", flexDirection: "column" } : {},
51170
51205
  ...style
51171
51206
  },
@@ -53163,13 +53198,25 @@ function BuyWithCard({
53163
53198
  wallets: externalWallets,
53164
53199
  assetCdnUrl,
53165
53200
  hideDepositFlowInfo = false,
53166
- hideDisplayDescription = false
53201
+ hideDisplayDescription = false,
53202
+ prefilledAmountUsd
53167
53203
  }) {
53168
53204
  const { colors: colors2, fonts, components } = useTheme();
53169
- const [amount, setAmount] = (0, import_react7.useState)("");
53205
+ const cleanedPrefilledAmountUsd = React522.useMemo(() => {
53206
+ if (!prefilledAmountUsd) return "";
53207
+ return prefilledAmountUsd.replace(/[^0-9.]/g, "");
53208
+ }, [prefilledAmountUsd]);
53209
+ const parsedPrefilledAmountUsd = React522.useMemo(() => {
53210
+ const parsed = parseFloat(cleanedPrefilledAmountUsd);
53211
+ return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
53212
+ }, [cleanedPrefilledAmountUsd]);
53213
+ const shouldAutoConvertPrefilledRef = (0, import_react7.useRef)(!!cleanedPrefilledAmountUsd);
53214
+ const [amount, setAmount] = (0, import_react7.useState)(() => cleanedPrefilledAmountUsd);
53170
53215
  const [currency, setCurrency] = (0, import_react7.useState)("usd");
53171
53216
  const [hasManualCurrencySelection, setHasManualCurrencySelection] = (0, import_react7.useState)(false);
53172
- const [hasManualAmountEntry, setHasManualAmountEntry] = (0, import_react7.useState)(false);
53217
+ const [hasManualAmountEntry, setHasManualAmountEntry] = (0, import_react7.useState)(
53218
+ () => !!cleanedPrefilledAmountUsd
53219
+ );
53173
53220
  const [showCurrencyModal, setShowCurrencyModal] = (0, import_react7.useState)(false);
53174
53221
  const [quotes, setQuotes] = (0, import_react7.useState)([]);
53175
53222
  const [quotesLoading, setQuotesLoading] = (0, import_react7.useState)(false);
@@ -53226,6 +53273,71 @@ function BuyWithCard({
53226
53273
  const [preferredCurrencyCodes, setPreferredCurrencyCodes] = (0, import_react7.useState)([]);
53227
53274
  const [currenciesLoading, setCurrenciesLoading] = (0, import_react7.useState)(true);
53228
53275
  const [destinationToken, setDestinationToken] = (0, import_react7.useState)(null);
53276
+ (0, import_react7.useEffect)(() => {
53277
+ const hasPrefilledAmount = !!cleanedPrefilledAmountUsd;
53278
+ shouldAutoConvertPrefilledRef.current = hasPrefilledAmount;
53279
+ if (!hasPrefilledAmount) return;
53280
+ setAmount(cleanedPrefilledAmountUsd);
53281
+ setHasManualAmountEntry(true);
53282
+ }, [cleanedPrefilledAmountUsd]);
53283
+ const { data: fiatExchangeRatesResponse, isLoading: isFiatExchangeRatesLoading } = useQuery({
53284
+ queryKey: ["fiat-exchange-rates", publishableKey],
53285
+ staleTime: 3e4,
53286
+ refetchInterval: 3e4,
53287
+ queryFn: async () => {
53288
+ try {
53289
+ return await getFiatExchangeRates({}, publishableKey);
53290
+ } catch (error) {
53291
+ console.error("Error fetching fiat exchange rates:", error);
53292
+ return { base_currency: "usd", rates: {} };
53293
+ }
53294
+ }
53295
+ });
53296
+ const fiatExchangeRates = fiatExchangeRatesResponse?.rates ?? {};
53297
+ const convertAmountBetweenCurrencies = React522.useCallback(
53298
+ (rawAmount, fromCurrencyCode, toCurrencyCode) => {
53299
+ const parsedAmount = parseFloat(rawAmount);
53300
+ if (!Number.isFinite(parsedAmount) || parsedAmount <= 0) return null;
53301
+ const fromCode = fromCurrencyCode.toLowerCase();
53302
+ const toCode = toCurrencyCode.toLowerCase();
53303
+ const fromRate = fromCode === "usd" ? 1 : fiatExchangeRates[fromCode];
53304
+ const toRate = toCode === "usd" ? 1 : fiatExchangeRates[toCode];
53305
+ if (!Number.isFinite(fromRate) || fromRate <= 0) return null;
53306
+ if (!Number.isFinite(toRate) || toRate <= 0) return null;
53307
+ const usdAmount = parsedAmount / fromRate;
53308
+ return parseFloat((usdAmount * toRate).toFixed(2)).toString();
53309
+ },
53310
+ [fiatExchangeRates]
53311
+ );
53312
+ const getConvertedPrefilledAmount = React522.useCallback(
53313
+ (targetCurrencyCode) => {
53314
+ if (!parsedPrefilledAmountUsd) return null;
53315
+ const normalizedTargetCurrency = targetCurrencyCode.toLowerCase();
53316
+ const rate = normalizedTargetCurrency === "usd" ? 1 : fiatExchangeRates[normalizedTargetCurrency];
53317
+ if (!Number.isFinite(rate) || rate <= 0) return null;
53318
+ return parseFloat((parsedPrefilledAmountUsd * rate).toFixed(2)).toString();
53319
+ },
53320
+ [parsedPrefilledAmountUsd, fiatExchangeRates]
53321
+ );
53322
+ (0, import_react7.useEffect)(() => {
53323
+ if (!cleanedPrefilledAmountUsd || !shouldAutoConvertPrefilledRef.current) return;
53324
+ const convertedAmount = getConvertedPrefilledAmount(currency);
53325
+ if (!convertedAmount) {
53326
+ if (isFiatExchangeRatesLoading) return;
53327
+ const targetCurrency = currency.toLowerCase();
53328
+ if (targetCurrency !== "usd") {
53329
+ setCurrency("usd");
53330
+ }
53331
+ return;
53332
+ }
53333
+ setAmount(convertedAmount);
53334
+ setHasManualAmountEntry(true);
53335
+ }, [
53336
+ cleanedPrefilledAmountUsd,
53337
+ currency,
53338
+ getConvertedPrefilledAmount,
53339
+ isFiatExchangeRatesLoading
53340
+ ]);
53229
53341
  const depositWalletId = defaultToken ? getWalletByChainType(wallets, defaultToken.destination_token_metadata.chain_type)?.id : void 0;
53230
53342
  const { executions, isPolling, showWaitingUi } = useDepositPolling({
53231
53343
  userId,
@@ -53256,6 +53368,7 @@ function BuyWithCard({
53256
53368
  }, [publishableKey]);
53257
53369
  (0, import_react7.useEffect)(() => {
53258
53370
  if (hasManualCurrencySelection) return;
53371
+ if (hasManualAmountEntry && !shouldAutoConvertPrefilledRef.current) return;
53259
53372
  if (fiatCurrencies.length === 0 || !userIpInfo?.alpha2) return;
53260
53373
  const userCountryCode = userIpInfo.alpha2;
53261
53374
  const matchingCurrency = fiatCurrencies.find((c) => c.country_codes.includes(userCountryCode));
@@ -53274,7 +53387,15 @@ function BuyWithCard({
53274
53387
  const prevCurrencyRef = (0, import_react7.useRef)(null);
53275
53388
  (0, import_react7.useEffect)(() => {
53276
53389
  if (fiatCurrencies.length === 0) return;
53390
+ if (shouldAutoConvertPrefilledRef.current) {
53391
+ prevCurrencyRef.current = currency;
53392
+ return;
53393
+ }
53277
53394
  if (prevCurrencyRef.current !== null && prevCurrencyRef.current !== currency) {
53395
+ if (hasManualAmountEntry) {
53396
+ prevCurrencyRef.current = currency;
53397
+ return;
53398
+ }
53278
53399
  const currentCurrency = fiatCurrencies.find(
53279
53400
  (c) => c.currency_code.toLowerCase() === currency.toLowerCase()
53280
53401
  );
@@ -53283,7 +53404,7 @@ function BuyWithCard({
53283
53404
  }
53284
53405
  }
53285
53406
  prevCurrencyRef.current = currency;
53286
- }, [currency]);
53407
+ }, [currency, fiatCurrencies, hasManualAmountEntry]);
53287
53408
  (0, import_react7.useEffect)(() => {
53288
53409
  async function fetchDestinationToken() {
53289
53410
  try {
@@ -53460,6 +53581,7 @@ function BuyWithCard({
53460
53581
  return () => clearInterval(timer);
53461
53582
  }, [quotes.length, amount]);
53462
53583
  const handleAmountChange = (value) => {
53584
+ shouldAutoConvertPrefilledRef.current = false;
53463
53585
  if (value === "") {
53464
53586
  setAmount(value);
53465
53587
  setHasManualAmountEntry(true);
@@ -53473,6 +53595,7 @@ function BuyWithCard({
53473
53595
  }
53474
53596
  };
53475
53597
  const handleQuickAmount = (quickAmount) => {
53598
+ shouldAutoConvertPrefilledRef.current = false;
53476
53599
  setAmount(quickAmount.toString());
53477
53600
  setHasManualAmountEntry(true);
53478
53601
  };
@@ -54076,8 +54199,43 @@ function BuyWithCard({
54076
54199
  preferredCurrencyCodes,
54077
54200
  selectedCurrency: currency,
54078
54201
  onSelectCurrency: (currencyCode) => {
54079
- setCurrency(currencyCode.toLowerCase());
54202
+ const nextCurrency = currencyCode.toLowerCase();
54203
+ if (nextCurrency === currency.toLowerCase()) {
54204
+ setHasManualCurrencySelection(true);
54205
+ return;
54206
+ }
54207
+ const currentCurrency = currency;
54080
54208
  setHasManualCurrencySelection(true);
54209
+ if (shouldAutoConvertPrefilledRef.current) {
54210
+ const convertedAmount = getConvertedPrefilledAmount(nextCurrency);
54211
+ if (convertedAmount) {
54212
+ setCurrency(nextCurrency);
54213
+ setAmount(convertedAmount);
54214
+ setHasManualAmountEntry(true);
54215
+ } else {
54216
+ if (isFiatExchangeRatesLoading) return;
54217
+ const fallbackUsdAmount = getConvertedPrefilledAmount("usd");
54218
+ setCurrency("usd");
54219
+ if (fallbackUsdAmount) {
54220
+ setAmount(fallbackUsdAmount);
54221
+ setHasManualAmountEntry(true);
54222
+ }
54223
+ }
54224
+ return;
54225
+ }
54226
+ if (hasManualAmountEntry && amount) {
54227
+ const convertedAmount = convertAmountBetweenCurrencies(
54228
+ amount,
54229
+ currentCurrency,
54230
+ nextCurrency
54231
+ );
54232
+ if (convertedAmount) {
54233
+ setCurrency(nextCurrency);
54234
+ setAmount(convertedAmount);
54235
+ }
54236
+ return;
54237
+ }
54238
+ setCurrency(nextCurrency);
54081
54239
  },
54082
54240
  themeClass
54083
54241
  }
@@ -54322,7 +54480,7 @@ function parseCoinbasePostMessage(raw) {
54322
54480
  } : void 0
54323
54481
  };
54324
54482
  }
54325
- var BuyWithApplePay = React522.forwardRef(
54483
+ var BuyWithApplePay = React622.forwardRef(
54326
54484
  function BuyWithApplePay2({
54327
54485
  userId,
54328
54486
  publishableKey,
@@ -54481,7 +54639,7 @@ var BuyWithApplePay = React522.forwardRef(
54481
54639
  popupRef.current = null;
54482
54640
  };
54483
54641
  }, []);
54484
- React522.useImperativeHandle(
54642
+ React622.useImperativeHandle(
54485
54643
  ref,
54486
54644
  () => ({
54487
54645
  requestBack: () => {
@@ -55791,7 +55949,7 @@ function LegalDisclaimer({ legalAgreements, loading }) {
55791
55949
  children: [
55792
55950
  "By continuing, you agree to Coinbase's",
55793
55951
  " ",
55794
- agreements.map((a, idx, arr) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(React522.Fragment, { children: [
55952
+ agreements.map((a, idx, arr) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(React622.Fragment, { children: [
55795
55953
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
55796
55954
  "a",
55797
55955
  {
@@ -56220,6 +56378,7 @@ var POLL_INTERVAL_MS2 = 5e3;
56220
56378
  var FALLBACK_MIN_USD = 5;
56221
56379
  var SUGGESTED_AMOUNTS = [25, 50, 100];
56222
56380
  var t3 = i18n2.depositModal.cashApp;
56381
+ var sanitizePrefilledUsd = (value) => value?.replace(/[^0-9.]/g, "") ?? "";
56223
56382
  function PayWithCashApp({
56224
56383
  userId,
56225
56384
  publishableKey,
@@ -56234,6 +56393,7 @@ function PayWithCashApp({
56234
56393
  onEvent,
56235
56394
  onDepositSuccess,
56236
56395
  onDepositError,
56396
+ prefilledAmountUsd,
56237
56397
  wallets = []
56238
56398
  }) {
56239
56399
  const { colors: colors2, fonts, components } = useTheme();
@@ -56249,7 +56409,7 @@ function PayWithCashApp({
56249
56409
  const { data: limits, isLoading: limitsLoading } = useCashAppLimits({ publishableKey });
56250
56410
  const minUsd = limits?.minimum_amount ?? FALLBACK_MIN_USD;
56251
56411
  const maxUsd = limits?.maximum_amount ?? null;
56252
- const [amount, setAmount] = (0, import_react18.useState)("");
56412
+ const [amount, setAmount] = (0, import_react18.useState)(() => sanitizePrefilledUsd(prefilledAmountUsd));
56253
56413
  const [loading, setLoading] = (0, import_react18.useState)(false);
56254
56414
  const [session, setSession] = (0, import_react18.useState)(null);
56255
56415
  const [status, setStatus] = (0, import_react18.useState)("pending");
@@ -56372,6 +56532,13 @@ function PayWithCashApp({
56372
56532
  return () => clearInterval(interval);
56373
56533
  }, [session, view, status, publishableKey, onDepositSuccess, onDepositError]);
56374
56534
  const [softExpired, setSoftExpired] = (0, import_react18.useState)(false);
56535
+ (0, import_react18.useEffect)(() => {
56536
+ if (!prefilledAmountUsd) return;
56537
+ const cleaned = sanitizePrefilledUsd(prefilledAmountUsd);
56538
+ if (!cleaned) return;
56539
+ setAmount(cleaned);
56540
+ onAmountChange?.(cleaned);
56541
+ }, [prefilledAmountUsd, onAmountChange]);
56375
56542
  (0, import_react18.useEffect)(() => {
56376
56543
  if (!session?.expires_at || view !== "payment") return;
56377
56544
  const expiresMs = new Date(session.expires_at).getTime();
@@ -56764,7 +56931,8 @@ function BankTransfer({
56764
56931
  assetCdnUrl,
56765
56932
  onDepositSuccess,
56766
56933
  onEvent,
56767
- onDepositError
56934
+ onDepositError,
56935
+ prefilledAmountUsd
56768
56936
  }) {
56769
56937
  const { colors: colors2, fonts, components } = useTheme();
56770
56938
  const [internalView, setInternalView] = (0, import_react21.useState)("providers");
@@ -56774,6 +56942,10 @@ function BankTransfer({
56774
56942
  const [requestBase, setRequestBase] = (0, import_react21.useState)(null);
56775
56943
  const [activeRequest, setActiveRequest] = (0, import_react21.useState)(null);
56776
56944
  const [amount, setAmount] = (0, import_react21.useState)("");
56945
+ const [fiatExchangeRates, setFiatExchangeRates] = (0, import_react21.useState)({
56946
+ usd: 1
56947
+ });
56948
+ const providerSelectionRequestIdRef = (0, import_react21.useRef)(0);
56777
56949
  const currentView = externalView ?? internalView;
56778
56950
  const setView = (v) => {
56779
56951
  setInternalView(v);
@@ -56823,7 +56995,38 @@ function BankTransfer({
56823
56995
  () => destinationTokenSymbol?.toUpperCase() ?? defaultToken?.destination_token_metadata?.symbol?.toUpperCase() ?? defaultToken?.destination_currency?.toUpperCase() ?? "USDC",
56824
56996
  [destinationTokenSymbol, defaultToken]
56825
56997
  );
56826
- const handleProviderClick = (provider) => {
56998
+ const resolvePrefilledSourceAmount = (0, import_react21.useCallback)(
56999
+ async (sourceCurrencyCode) => {
57000
+ const cleanedPrefilled = prefilledAmountUsd?.replace(/[^0-9.]/g, "") ?? "";
57001
+ if (!cleanedPrefilled) return "";
57002
+ const prefilledUsd = parseFloat(cleanedPrefilled);
57003
+ if (!Number.isFinite(prefilledUsd) || prefilledUsd <= 0) return "";
57004
+ const sourceCurrency2 = sourceCurrencyCode.toLowerCase();
57005
+ let rate = sourceCurrency2 === "usd" ? 1 : fiatExchangeRates[sourceCurrency2];
57006
+ if ((!rate || rate <= 0) && sourceCurrency2 !== "usd") {
57007
+ try {
57008
+ const response = await getFiatExchangeRates({}, publishableKey);
57009
+ if (response?.rates) {
57010
+ setFiatExchangeRates((prev) => ({
57011
+ ...prev,
57012
+ ...response.rates,
57013
+ usd: 1
57014
+ }));
57015
+ }
57016
+ const fetchedRate = response.rates?.[sourceCurrency2];
57017
+ if (Number.isFinite(fetchedRate) && fetchedRate > 0) {
57018
+ rate = fetchedRate;
57019
+ }
57020
+ } catch (error) {
57021
+ console.error("Error fetching fiat exchange rates for bank transfer:", error);
57022
+ }
57023
+ }
57024
+ if (!rate || rate <= 0) return sourceCurrency2 === "usd" ? cleanedPrefilled : "";
57025
+ return parseFloat((prefilledUsd * rate).toFixed(2)).toString();
57026
+ },
57027
+ [fiatExchangeRates, prefilledAmountUsd, publishableKey]
57028
+ );
57029
+ const handleProviderClick = async (provider) => {
56827
57030
  if (!provider.enabled) return;
56828
57031
  setSessionError(null);
56829
57032
  if (!defaultToken) {
@@ -56842,6 +57045,7 @@ function BankTransfer({
56842
57045
  });
56843
57046
  return;
56844
57047
  }
57048
+ const requestId = ++providerSelectionRequestIdRef.current;
56845
57049
  setRequestBase({
56846
57050
  service_provider: provider.service_provider,
56847
57051
  country_code: (userIpInfo?.alpha2 || "DE").toUpperCase(),
@@ -56855,7 +57059,10 @@ function BankTransfer({
56855
57059
  payment_method: provider.payment_methods[0]
56856
57060
  });
56857
57061
  setActiveProvider(provider);
56858
- setAmount("100");
57062
+ const convertedPrefilled = await resolvePrefilledSourceAmount(provider.source_currency);
57063
+ if (requestId !== providerSelectionRequestIdRef.current) return;
57064
+ const hasPrefilledAmount = !!prefilledAmountUsd?.replace(/[^0-9.]/g, "");
57065
+ setAmount(hasPrefilledAmount ? convertedPrefilled : "100");
56859
57066
  setView("amount");
56860
57067
  };
56861
57068
  const handleAmountChange = (value) => {
@@ -56953,7 +57160,7 @@ function BankTransfer({
56953
57160
  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
56954
57161
  "button",
56955
57162
  {
56956
- onClick: () => handleProviderClick(provider),
57163
+ onClick: () => void handleProviderClick(provider),
56957
57164
  onMouseEnter: () => !disabled && setHoveredId(provider.service_provider),
56958
57165
  onMouseLeave: () => setHoveredId(null),
56959
57166
  disabled,
@@ -57522,9 +57729,9 @@ function TransferCryptoButton({
57522
57729
  featuredTokens
57523
57730
  }) {
57524
57731
  const { colors: colors2, fonts, components } = useTheme();
57525
- const [isHovered, setIsHovered] = React622.useState(false);
57526
- const [isTouchDevice, setIsTouchDevice] = React622.useState(false);
57527
- React622.useEffect(() => {
57732
+ const [isHovered, setIsHovered] = React72.useState(false);
57733
+ const [isTouchDevice, setIsTouchDevice] = React72.useState(false);
57734
+ React72.useEffect(() => {
57528
57735
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
57529
57736
  }, []);
57530
57737
  const sortedTokens = featuredTokens ? [...featuredTokens].sort((a, b) => a.position - b.position) : [];
@@ -57604,9 +57811,9 @@ function DepositWithCardButton({
57604
57811
  paymentNetworks
57605
57812
  }) {
57606
57813
  const { colors: colors2, fonts, components } = useTheme();
57607
- const [isHovered, setIsHovered] = React72.useState(false);
57608
- const [isTouchDevice, setIsTouchDevice] = React72.useState(false);
57609
- React72.useEffect(() => {
57814
+ const [isHovered, setIsHovered] = React82.useState(false);
57815
+ const [isTouchDevice, setIsTouchDevice] = React82.useState(false);
57816
+ React82.useEffect(() => {
57610
57817
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
57611
57818
  }, []);
57612
57819
  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
@@ -57685,9 +57892,9 @@ function PayWithExchangeButton({
57685
57892
  loading = false
57686
57893
  }) {
57687
57894
  const { colors: colors2, fonts, components } = useTheme();
57688
- const [isHovered, setIsHovered] = React82.useState(false);
57689
- const [isTouchDevice, setIsTouchDevice] = React82.useState(false);
57690
- React82.useEffect(() => {
57895
+ const [isHovered, setIsHovered] = React92.useState(false);
57896
+ const [isTouchDevice, setIsTouchDevice] = React92.useState(false);
57897
+ React92.useEffect(() => {
57691
57898
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
57692
57899
  }, []);
57693
57900
  if (loading) {
@@ -57789,11 +57996,11 @@ var buttonVariants = cva(
57789
57996
  }
57790
57997
  }
57791
57998
  );
57792
- var Button = React92.forwardRef(
57999
+ var Button = React102.forwardRef(
57793
58000
  ({ className, variant, size: size4, asChild = false, style, ...props }, ref) => {
57794
58001
  const Comp = asChild ? Slot2 : "button";
57795
58002
  const { components, fonts } = useTheme();
57796
- const themeStyle = React92.useMemo(() => {
58003
+ const themeStyle = React102.useMemo(() => {
57797
58004
  const baseStyle = { ...style };
57798
58005
  if (variant === "default" || !variant) {
57799
58006
  baseStyle.backgroundColor = components.button.primaryBackground;
@@ -57828,9 +58035,9 @@ function ConnectExchangeButton({
57828
58035
  connectedExchange
57829
58036
  }) {
57830
58037
  const { colors: colors2, fonts, components } = useTheme();
57831
- const [isHovered, setIsHovered] = React102.useState(false);
57832
- const [isTouchDevice, setIsTouchDevice] = React102.useState(false);
57833
- React102.useEffect(() => {
58038
+ const [isHovered, setIsHovered] = React112.useState(false);
58039
+ const [isTouchDevice, setIsTouchDevice] = React112.useState(false);
58040
+ React112.useEffect(() => {
57834
58041
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
57835
58042
  }, []);
57836
58043
  const isConnected = connectedExchange != null;
@@ -57975,9 +58182,9 @@ function DepositTrackerButton({
57975
58182
  badge
57976
58183
  }) {
57977
58184
  const { colors: colors2, fonts, components } = useTheme();
57978
- const [isHovered, setIsHovered] = React112.useState(false);
57979
- const [isTouchDevice, setIsTouchDevice] = React112.useState(false);
57980
- React112.useEffect(() => {
58185
+ const [isHovered, setIsHovered] = React122.useState(false);
58186
+ const [isTouchDevice, setIsTouchDevice] = React122.useState(false);
58187
+ React122.useEffect(() => {
57981
58188
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
57982
58189
  }, []);
57983
58190
  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
@@ -58048,9 +58255,9 @@ function DepositTrackerButton({
58048
58255
  }
58049
58256
  function CashAppButton({ onClick, title, subtitle, iconUrl }) {
58050
58257
  const { colors: colors2, fonts, components } = useTheme();
58051
- const [isHovered, setIsHovered] = React122.useState(false);
58052
- const [isTouchDevice, setIsTouchDevice] = React122.useState(false);
58053
- React122.useEffect(() => {
58258
+ const [isHovered, setIsHovered] = React132.useState(false);
58259
+ const [isTouchDevice, setIsTouchDevice] = React132.useState(false);
58260
+ React132.useEffect(() => {
58054
58261
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
58055
58262
  }, []);
58056
58263
  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
@@ -58134,9 +58341,9 @@ function AppleLogo({ className, style }) {
58134
58341
  }
58135
58342
  function ApplePayButton({ onClick, title, subtitle }) {
58136
58343
  const { colors: colors2, fonts, components } = useTheme();
58137
- const [isHovered, setIsHovered] = React132.useState(false);
58138
- const [isTouchDevice, setIsTouchDevice] = React132.useState(false);
58139
- React132.useEffect(() => {
58344
+ const [isHovered, setIsHovered] = React142.useState(false);
58345
+ const [isTouchDevice, setIsTouchDevice] = React142.useState(false);
58346
+ React142.useEffect(() => {
58140
58347
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
58141
58348
  }, []);
58142
58349
  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
@@ -58198,9 +58405,9 @@ function BankTransferButton({
58198
58405
  comingSoon = false
58199
58406
  }) {
58200
58407
  const { colors: colors2, fonts, components } = useTheme();
58201
- const [isHovered, setIsHovered] = React142.useState(false);
58202
- const [isTouchDevice, setIsTouchDevice] = React142.useState(false);
58203
- React142.useEffect(() => {
58408
+ const [isHovered, setIsHovered] = React152.useState(false);
58409
+ const [isTouchDevice, setIsTouchDevice] = React152.useState(false);
58410
+ React152.useEffect(() => {
58204
58411
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
58205
58412
  }, []);
58206
58413
  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
@@ -58449,18 +58656,18 @@ async function detectConnectedBrowserWallet(chainType) {
58449
58656
  }
58450
58657
  function useDetectedBrowserWallet(opts = {}) {
58451
58658
  const { chainType, enabled = true, onDisconnect } = opts;
58452
- const [wallet, setWallet] = React152.useState(null);
58453
- const [isLoading, setIsLoading] = React152.useState(enabled);
58454
- const [eip6963ProviderCount, setEip6963ProviderCount] = React152.useState(0);
58455
- const onDisconnectRef = React152.useRef(onDisconnect);
58659
+ const [wallet, setWallet] = React162.useState(null);
58660
+ const [isLoading, setIsLoading] = React162.useState(enabled);
58661
+ const [eip6963ProviderCount, setEip6963ProviderCount] = React162.useState(0);
58662
+ const onDisconnectRef = React162.useRef(onDisconnect);
58456
58663
  onDisconnectRef.current = onDisconnect;
58457
- React152.useEffect(() => {
58664
+ React162.useEffect(() => {
58458
58665
  const store = getEip6963Store();
58459
58666
  if (!store) return;
58460
58667
  setEip6963ProviderCount(store.getProviders().length);
58461
58668
  return store.subscribe((providers) => setEip6963ProviderCount(providers.length));
58462
58669
  }, []);
58463
- React152.useEffect(() => {
58670
+ React162.useEffect(() => {
58464
58671
  if (!enabled) {
58465
58672
  setWallet(null);
58466
58673
  setIsLoading(false);
@@ -58601,7 +58808,7 @@ async function disconnectInjectedBrowserWallet(wallet) {
58601
58808
  );
58602
58809
  }
58603
58810
  function MetamaskIcon({ size: size4 = 24, className, variant = "color" }) {
58604
- const id = React162.useId();
58811
+ const id = React172.useId();
58605
58812
  if (variant === "light" || variant === "dark") {
58606
58813
  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
58607
58814
  "svg",
@@ -58722,7 +58929,7 @@ function MetamaskIcon({ size: size4 = 24, className, variant = "color" }) {
58722
58929
  );
58723
58930
  }
58724
58931
  function PhantomIcon({ size: size4 = 24, className, variant = "color" }) {
58725
- const id = React172.useId();
58932
+ const id = React182.useId();
58726
58933
  if (variant === "light") {
58727
58934
  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
58728
58935
  "svg",
@@ -58789,7 +58996,7 @@ function PhantomIcon({ size: size4 = 24, className, variant = "color" }) {
58789
58996
  );
58790
58997
  }
58791
58998
  function CoinbaseIcon({ size: size4 = 24, className, variant = "color" }) {
58792
- const id = React182.useId();
58999
+ const id = React192.useId();
58793
59000
  if (variant === "light") {
58794
59001
  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
58795
59002
  "svg",
@@ -58869,7 +59076,7 @@ function CoinbaseIcon({ size: size4 = 24, className, variant = "color" }) {
58869
59076
  );
58870
59077
  }
58871
59078
  function RabbyIcon({ size: size4 = 24, className, variant = "color" }) {
58872
- const id = React192.useId();
59079
+ const id = React202.useId();
58873
59080
  if (variant === "light") {
58874
59081
  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
58875
59082
  "svg",
@@ -59216,7 +59423,7 @@ function RabbyIcon({ size: size4 = 24, className, variant = "color" }) {
59216
59423
  );
59217
59424
  }
59218
59425
  function RainbowIcon({ size: size4 = 24, className, variant = "color" }) {
59219
- const id = React202.useId();
59426
+ const id = React212.useId();
59220
59427
  if (variant === "light") {
59221
59428
  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
59222
59429
  "svg",
@@ -59630,7 +59837,7 @@ function RainbowIcon({ size: size4 = 24, className, variant = "color" }) {
59630
59837
  );
59631
59838
  }
59632
59839
  function TrustIcon({ size: size4 = 24, className, variant = "color" }) {
59633
- const id = React212.useId();
59840
+ const id = React2222.useId();
59634
59841
  if (variant === "light") {
59635
59842
  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
59636
59843
  "svg",
@@ -59713,7 +59920,7 @@ function TrustIcon({ size: size4 = 24, className, variant = "color" }) {
59713
59920
  );
59714
59921
  }
59715
59922
  function OkxIcon({ size: size4 = 24, className, variant = "color" }) {
59716
- const id = React2222.useId();
59923
+ const id = React232.useId();
59717
59924
  if (variant === "light") {
59718
59925
  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
59719
59926
  "svg",
@@ -59768,7 +59975,7 @@ function OkxIcon({ size: size4 = 24, className, variant = "color" }) {
59768
59975
  );
59769
59976
  }
59770
59977
  function GlowIcon({ size: size4 = 24, className, variant = "color" }) {
59771
- const id = React232.useId();
59978
+ const id = React242.useId();
59772
59979
  if (variant === "light") {
59773
59980
  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
59774
59981
  "svg",
@@ -59869,7 +60076,7 @@ function GlowIcon({ size: size4 = 24, className, variant = "color" }) {
59869
60076
  );
59870
60077
  }
59871
60078
  function BackpackIcon({ size: size4 = 24, className, variant = "color" }) {
59872
- const id = React242.useId();
60079
+ const id = React252.useId();
59873
60080
  if (variant === "light") {
59874
60081
  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
59875
60082
  "svg",
@@ -59942,7 +60149,7 @@ function BackpackIcon({ size: size4 = 24, className, variant = "color" }) {
59942
60149
  );
59943
60150
  }
59944
60151
  function SolflareIcon({ size: size4 = 24, className, variant = "color" }) {
59945
- const id = React252.useId();
60152
+ const id = React262.useId();
59946
60153
  if (variant === "light") {
59947
60154
  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
59948
60155
  "svg",
@@ -60009,7 +60216,7 @@ function SolflareIcon({ size: size4 = 24, className, variant = "color" }) {
60009
60216
  );
60010
60217
  }
60011
60218
  function EthereumIcon({ size: size4 = 24, className, variant = "color" }) {
60012
- const id = React262.useId();
60219
+ const id = React272.useId();
60013
60220
  if (variant === "light") {
60014
60221
  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
60015
60222
  "svg",
@@ -60133,7 +60340,7 @@ function EthereumIcon({ size: size4 = 24, className, variant = "color" }) {
60133
60340
  );
60134
60341
  }
60135
60342
  function SolanaIcon({ size: size4 = 24, className, variant = "color" }) {
60136
- const id = React272.useId();
60343
+ const id = React282.useId();
60137
60344
  if (variant === "light") {
60138
60345
  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
60139
60346
  "svg",
@@ -60378,19 +60585,19 @@ function BrowserWalletButton({
60378
60585
  subtitle = i18n2.depositModal.browserWallet.subtitle
60379
60586
  }) {
60380
60587
  const { colors: colors2, fonts, components } = useTheme();
60381
- const [isHovered, setIsHovered] = React282.useState(false);
60382
- const [isTouchDevice, setIsTouchDevice] = React282.useState(false);
60588
+ const [isHovered, setIsHovered] = React292.useState(false);
60589
+ const [isTouchDevice, setIsTouchDevice] = React292.useState(false);
60383
60590
  const { wallet, isLoading, setWallet } = useDetectedBrowserWallet({ chainType, onDisconnect });
60384
- const [isConnecting, setIsConnecting] = React282.useState(false);
60385
- const [balanceText, setBalanceText] = React282.useState(null);
60386
- const [isLoadingBalance, setIsLoadingBalance] = React282.useState(false);
60387
- const [isDisconnecting, setIsDisconnecting] = React282.useState(false);
60388
- const onDisconnectRef = React282.useRef(onDisconnect);
60591
+ const [isConnecting, setIsConnecting] = React292.useState(false);
60592
+ const [balanceText, setBalanceText] = React292.useState(null);
60593
+ const [isLoadingBalance, setIsLoadingBalance] = React292.useState(false);
60594
+ const [isDisconnecting, setIsDisconnecting] = React292.useState(false);
60595
+ const onDisconnectRef = React292.useRef(onDisconnect);
60389
60596
  onDisconnectRef.current = onDisconnect;
60390
- React282.useEffect(() => {
60597
+ React292.useEffect(() => {
60391
60598
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
60392
60599
  }, []);
60393
- React282.useEffect(() => {
60600
+ React292.useEffect(() => {
60394
60601
  if (!wallet || !publishableKey) {
60395
60602
  setBalanceText(null);
60396
60603
  return;
@@ -60517,7 +60724,7 @@ function BrowserWalletButton({
60517
60724
  border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
60518
60725
  };
60519
60726
  const sortedWallets = featuredWallets ? [...featuredWallets].sort((a, b) => a.position - b.position) : [];
60520
- const walletIconBlock = wallet ? WALLET_ICON_COMPONENTS[wallet.icon] ? React282.createElement(WALLET_ICON_COMPONENTS[wallet.icon], {
60727
+ const walletIconBlock = wallet ? WALLET_ICON_COMPONENTS[wallet.icon] ? React292.createElement(WALLET_ICON_COMPONENTS[wallet.icon], {
60521
60728
  size: 36,
60522
60729
  className: "uf-rounded-lg",
60523
60730
  variant: "color"
@@ -60668,9 +60875,9 @@ function StripeLinkButton({
60668
60875
  iconUrl
60669
60876
  }) {
60670
60877
  const { colors: colors2, fonts, components } = useTheme();
60671
- const [isHovered, setIsHovered] = React292.useState(false);
60672
- const [isTouchDevice, setIsTouchDevice] = React292.useState(false);
60673
- React292.useEffect(() => {
60878
+ const [isHovered, setIsHovered] = React302.useState(false);
60879
+ const [isTouchDevice, setIsTouchDevice] = React302.useState(false);
60880
+ React302.useEffect(() => {
60674
60881
  setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
60675
60882
  }, []);
60676
60883
  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
@@ -61156,6 +61363,8 @@ function PayWithStripeLink({
61156
61363
  destinationChainType,
61157
61364
  destinationChainId,
61158
61365
  destinationTokenAddress,
61366
+ countryCode,
61367
+ subdivisionCode,
61159
61368
  wallets: externalWallets,
61160
61369
  email: emailProp,
61161
61370
  iconUrl,
@@ -61550,7 +61759,9 @@ function PayWithStripeLink({
61550
61759
  {
61551
61760
  tokenAddress: destinationTokenAddress,
61552
61761
  chainId: destinationChainId,
61553
- chainType: destinationChainType
61762
+ chainType: destinationChainType,
61763
+ countryCode,
61764
+ subdivisionCode
61554
61765
  },
61555
61766
  publishableKey
61556
61767
  ).then((token) => {
@@ -61569,7 +61780,14 @@ function PayWithStripeLink({
61569
61780
  return () => {
61570
61781
  cancelled = true;
61571
61782
  };
61572
- }, [publishableKey, destinationTokenAddress, destinationChainId, destinationChainType]);
61783
+ }, [
61784
+ publishableKey,
61785
+ destinationTokenAddress,
61786
+ destinationChainId,
61787
+ destinationChainType,
61788
+ countryCode,
61789
+ subdivisionCode
61790
+ ]);
61573
61791
  const destinationCurrency = stripeDestCurrency;
61574
61792
  const authInnerRef = (0, import_react22.useRef)(null);
61575
61793
  const paymentInnerRef = (0, import_react22.useRef)(null);
@@ -63282,10 +63500,16 @@ function PayWithStripeLink({
63282
63500
  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
63283
63501
  "div",
63284
63502
  {
63285
- className: "uf-flex uf-flex-col uf-py-4 uf-overflow-y-auto uf-max-h-[70vh]",
63503
+ className: "uf-flex uf-flex-col uf-py-4 uf-overflow-y-auto uf-overflow-x-hidden uf-max-h-[70vh]",
63286
63504
  style: { backgroundColor: colors2.background },
63287
63505
  children: [
63288
- /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { ref: paymentMountRef, className: "uf-w-full uf-flex-1 uf-overflow-y-auto" }),
63506
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
63507
+ "div",
63508
+ {
63509
+ ref: paymentMountRef,
63510
+ className: "uf-w-full uf-flex-1 uf-overflow-y-auto uf-overflow-x-hidden"
63511
+ }
63512
+ ),
63289
63513
  !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 } }) }),
63290
63514
  error && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
63291
63515
  "div",
@@ -63303,7 +63527,7 @@ function PayWithStripeLink({
63303
63527
  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
63304
63528
  "div",
63305
63529
  {
63306
- className: "uf-flex uf-flex-col uf-py-4 uf-overflow-y-auto uf-max-h-[70vh]",
63530
+ className: "uf-flex uf-flex-col uf-py-4 uf-overflow-y-auto uf-overflow-x-hidden uf-max-h-[70vh]",
63307
63531
  style: { backgroundColor: colors2.background },
63308
63532
  children: [
63309
63533
  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)(
@@ -64413,17 +64637,30 @@ function PayWithStripeLink({
64413
64637
  }
64414
64638
  function useProjectConfig({
64415
64639
  publishableKey,
64416
- enabled = true
64640
+ enabled = true,
64641
+ countryCode,
64642
+ subdivisionCode
64417
64643
  }) {
64418
- const { data: projectConfig, isLoading } = useQuery({
64419
- queryKey: ["unifold", "projectConfig", publishableKey],
64420
- queryFn: () => getProjectConfig(publishableKey),
64644
+ const {
64645
+ data: projectConfig,
64646
+ isLoading,
64647
+ error
64648
+ } = useQuery({
64649
+ // Country is part of the key so a region change refetches the region-aware
64650
+ // config. Omitted when undefined so callers that don't pass a country keep
64651
+ // sharing the base cache entry.
64652
+ queryKey: countryCode ? ["unifold", "projectConfig", publishableKey, countryCode, subdivisionCode ?? null] : ["unifold", "projectConfig", publishableKey],
64653
+ queryFn: () => getProjectConfig(publishableKey, countryCode ? { countryCode, subdivisionCode } : void 0),
64421
64654
  enabled,
64655
+ // Keep the previous (e.g. no-country) config visible while the region-aware
64656
+ // config refetches after the country resolves, so unrelated config-driven
64657
+ // UI doesn't flash back to defaults.
64658
+ placeholderData: keepPreviousData,
64422
64659
  staleTime: 1e3 * 60 * 30,
64423
64660
  refetchOnMount: true,
64424
64661
  refetchOnWindowFocus: true
64425
64662
  });
64426
- return { projectConfig, isLoading };
64663
+ return { projectConfig, isLoading, error: error ?? null };
64427
64664
  }
64428
64665
  function useSupportedDepositTokens(publishableKey, options2) {
64429
64666
  const hasDestination = options2?.destination_token_address && options2?.destination_chain_id && options2?.destination_chain_type;
@@ -64526,7 +64763,8 @@ function CoinbaseConnect({
64526
64763
  defaultSourceChainType,
64527
64764
  defaultSourceChainId,
64528
64765
  defaultSourceTokenAddress,
64529
- defaultSourceSymbol
64766
+ defaultSourceSymbol,
64767
+ prefilledAmountUsd
64530
64768
  }) {
64531
64769
  const { colors: colors2, fonts, components } = useTheme();
64532
64770
  const { projectConfig } = useProjectConfig({ publishableKey });
@@ -64849,7 +65087,8 @@ function CoinbaseConnect({
64849
65087
  };
64850
65088
  const handleSelectAsset = (asset) => {
64851
65089
  setSelectedAsset(asset);
64852
- setSendAmount("");
65090
+ const cleanedPrefilled = prefilledAmountUsd?.replace(/[^0-9.]/g, "") ?? "";
65091
+ setSendAmount(cleanedPrefilled);
64853
65092
  transitionTo("enter_amount");
64854
65093
  };
64855
65094
  const handleCreateTransfer = async () => {
@@ -66462,44 +66701,28 @@ function useApplePayProviders({
66462
66701
  return { providers, isLoading };
66463
66702
  }
66464
66703
  function useAllowedCountry(publishableKey) {
66704
+ const { userIpInfo, isLoading: isIpLoading, error: ipError } = useUserIp2();
66465
66705
  const {
66466
- data: ipData,
66467
- isLoading: isIpLoading,
66468
- error: ipError
66469
- } = useQuery({
66470
- queryKey: ["unifold", "ipAddress"],
66471
- queryFn: () => getIpAddress(),
66472
- refetchOnMount: false,
66473
- refetchOnReconnect: true,
66474
- refetchOnWindowFocus: false,
66475
- staleTime: 1e3 * 60 * 60,
66476
- // 1 hour
66477
- gcTime: 1e3 * 60 * 60 * 24
66478
- // 24 hours
66479
- });
66480
- const {
66481
- data: configData,
66706
+ projectConfig,
66482
66707
  isLoading: isConfigLoading,
66483
66708
  error: configError
66484
- } = useQuery({
66485
- queryKey: ["unifold", "projectConfig", publishableKey],
66486
- queryFn: () => getProjectConfig(publishableKey),
66487
- refetchOnMount: false,
66488
- refetchOnReconnect: true,
66489
- refetchOnWindowFocus: false,
66490
- staleTime: 1e3 * 60 * 5,
66491
- // 5 minutes
66492
- gcTime: 1e3 * 60 * 60
66493
- // 1 hour
66709
+ } = useProjectConfig({
66710
+ publishableKey,
66711
+ // Wait for the IP so we issue a single country-aware config request rather
66712
+ // than a country-less fetch followed by a country-aware refetch. Shares the
66713
+ // query key with DepositModal's useProjectConfig, so they dedupe.
66714
+ enabled: !isIpLoading,
66715
+ countryCode: userIpInfo?.alpha2,
66716
+ subdivisionCode: userIpInfo?.subdivisionCode ?? void 0
66494
66717
  });
66495
66718
  const isLoading = isIpLoading || isConfigLoading;
66496
66719
  const error = ipError || configError || null;
66720
+ const userSubdivision = userIpInfo?.subdivisionCode || userIpInfo?.state || "";
66497
66721
  let isAllowed = null;
66498
- if (ipData && configData) {
66499
- const blockedCodes = configData.blocked_country_codes || [];
66500
- const blockedSubdivisions = configData.blocked_country_subdivisions || [];
66501
- const userCountryUpper = ipData.alpha2.toUpperCase();
66502
- const userSubdivision = ipData.subdivision_code || ipData.state || "";
66722
+ if (userIpInfo && projectConfig) {
66723
+ const blockedCodes = projectConfig.blocked_country_codes || [];
66724
+ const blockedSubdivisions = projectConfig.blocked_country_subdivisions || [];
66725
+ const userCountryUpper = userIpInfo.alpha2.toUpperCase();
66503
66726
  const userSubdivisionUpper = userSubdivision.toUpperCase();
66504
66727
  const isCountryBlocked = blockedCodes.some((code) => code.toUpperCase() === userCountryUpper);
66505
66728
  const isSubdivisionBlocked = blockedSubdivisions.some((entry) => {
@@ -66508,12 +66731,11 @@ function useAllowedCountry(publishableKey) {
66508
66731
  });
66509
66732
  isAllowed = !isCountryBlocked && !isSubdivisionBlocked;
66510
66733
  }
66511
- const subdivisionCode = ipData?.subdivision_code || ipData?.state || "" || null;
66512
66734
  return {
66513
66735
  isAllowed,
66514
- alpha2: ipData?.alpha2 ?? null,
66515
- country: ipData?.country ?? null,
66516
- subdivisionCode,
66736
+ alpha2: userIpInfo?.alpha2 ?? null,
66737
+ country: userIpInfo?.country ?? null,
66738
+ subdivisionCode: userSubdivision || null,
66517
66739
  isLoading,
66518
66740
  error
66519
66741
  };
@@ -66577,7 +66799,7 @@ function ThemeStyleInjector({
66577
66799
  className
66578
66800
  }) {
66579
66801
  const { colors: colors2, fonts, mode } = useTheme();
66580
- const cssVars = React312.useMemo(() => {
66802
+ const cssVars = React322.useMemo(() => {
66581
66803
  const hexToHSL = (hex) => {
66582
66804
  hex = hex.replace("#", "");
66583
66805
  const r2 = parseInt(hex.slice(0, 2), 16) / 255;
@@ -66637,7 +66859,7 @@ function ThemeStyleInjector({
66637
66859
  ...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
66638
66860
  };
66639
66861
  }, [colors2, fonts.regular]);
66640
- React312.useEffect(() => {
66862
+ React322.useEffect(() => {
66641
66863
  if (typeof document === "undefined") return;
66642
66864
  if (fonts.regular) {
66643
66865
  document.documentElement.style.setProperty("--uf-font-family", fonts.regular);
@@ -67782,14 +68004,14 @@ function useCopyAddress() {
67782
68004
  return { copied, handleCopy };
67783
68005
  }
67784
68006
  var TooltipProvider2 = Provider;
67785
- var TooltipContext = React322.createContext({
68007
+ var TooltipContext = React332.createContext({
67786
68008
  open: false,
67787
68009
  onOpenChange: () => {
67788
68010
  }
67789
68011
  });
67790
- var TooltipTrigger2 = React322.forwardRef(({ onClick, ...props }, ref) => {
67791
- const { open, onOpenChange } = React322.useContext(TooltipContext);
67792
- const handleClick = React322.useCallback(
68012
+ var TooltipTrigger2 = React332.forwardRef(({ onClick, ...props }, ref) => {
68013
+ const { open, onOpenChange } = React332.useContext(TooltipContext);
68014
+ const handleClick = React332.useCallback(
67793
68015
  (e) => {
67794
68016
  onOpenChange(!open);
67795
68017
  onClick?.(e);
@@ -67799,7 +68021,7 @@ var TooltipTrigger2 = React322.forwardRef(({ onClick, ...props }, ref) => {
67799
68021
  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Trigger, { ref, onClick: handleClick, ...props });
67800
68022
  });
67801
68023
  TooltipTrigger2.displayName = Trigger.displayName;
67802
- var TooltipContent2 = React322.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
68024
+ var TooltipContent2 = React332.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
67803
68025
  const { themeClass, colors: colors2 } = useTheme();
67804
68026
  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Portal3, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
67805
68027
  Content22,
@@ -67909,6 +68131,7 @@ function TransferCryptoSingleInput({
67909
68131
  onDepositError,
67910
68132
  wallets: externalWallets,
67911
68133
  onSourceTokenChange,
68134
+ prefilledAmountUsd,
67912
68135
  checkoutQuote,
67913
68136
  isCheckoutQuoteLoading = false,
67914
68137
  persistCheckingIndicator = false,
@@ -68052,6 +68275,22 @@ function TransferCryptoSingleInput({
68052
68275
  const maxSlippage = currentChainFromBackend?.max_slippage_percent ?? 0.25;
68053
68276
  const processingTime = currentChainFromBackend?.estimated_processing_time ?? null;
68054
68277
  const minDepositUsd = currentChainFromBackend?.minimum_deposit_amount_usd ?? 3;
68278
+ const parsedPrefilledUsd = (0, import_react25.useMemo)(() => {
68279
+ const value = parseFloat(prefilledAmountUsd ?? "");
68280
+ return Number.isFinite(value) && value > 0 ? value : null;
68281
+ }, [prefilledAmountUsd]);
68282
+ const effectivePrefilledUsd = (0, import_react25.useMemo)(() => {
68283
+ if (parsedPrefilledUsd === null) return null;
68284
+ return Math.max(parsedPrefilledUsd, minDepositUsd);
68285
+ }, [parsedPrefilledUsd, minDepositUsd]);
68286
+ const prefillDisplay = (0, import_react25.useMemo)(() => {
68287
+ if (effectivePrefilledUsd === null) return null;
68288
+ const usdLabel = `$${effectivePrefilledUsd.toFixed(2)}`;
68289
+ if (selectedToken?.is_stablecoin) {
68290
+ return `${effectivePrefilledUsd.toFixed(2)} ${selectedToken.symbol} (${usdLabel})`;
68291
+ }
68292
+ return `${usdLabel} USD`;
68293
+ }, [effectivePrefilledUsd, selectedToken]);
68055
68294
  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TooltipProvider2, { delayDuration: 0, skipDelayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
68056
68295
  "div",
68057
68296
  {
@@ -68178,7 +68417,7 @@ function TransferCryptoSingleInput({
68178
68417
  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children: "Retrying automatically every 5 seconds..." })
68179
68418
  ] })
68180
68419
  ] }),
68181
- (checkoutQuote || isCheckoutQuoteLoading) && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
68420
+ (checkoutQuote || isCheckoutQuoteLoading || prefillDisplay) && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
68182
68421
  "div",
68183
68422
  {
68184
68423
  className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
@@ -68222,6 +68461,13 @@ function TransferCryptoSingleInput({
68222
68461
  )
68223
68462
  ]
68224
68463
  }
68464
+ ) : prefillDisplay ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
68465
+ "span",
68466
+ {
68467
+ className: "uf-text-sm uf-font-semibold",
68468
+ style: { color: components.card.titleColor, fontFamily: fonts.semibold },
68469
+ children: prefillDisplay
68470
+ }
68225
68471
  ) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
68226
68472
  "div",
68227
68473
  {
@@ -68551,7 +68797,7 @@ function TransferCryptoSingleInput({
68551
68797
  }
68552
68798
  var Select2 = Root23;
68553
68799
  var SelectValue2 = Value;
68554
- var SelectTrigger2 = React332.forwardRef(({ className, style, children, ...props }, ref) => {
68800
+ var SelectTrigger2 = React342.forwardRef(({ className, style, children, ...props }, ref) => {
68555
68801
  const { components } = useTheme();
68556
68802
  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
68557
68803
  Trigger2,
@@ -68575,7 +68821,7 @@ var SelectTrigger2 = React332.forwardRef(({ className, style, children, ...props
68575
68821
  );
68576
68822
  });
68577
68823
  SelectTrigger2.displayName = Trigger2.displayName;
68578
- var SelectScrollUpButton2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
68824
+ var SelectScrollUpButton2 = React342.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
68579
68825
  ScrollUpButton,
68580
68826
  {
68581
68827
  ref,
@@ -68585,7 +68831,7 @@ var SelectScrollUpButton2 = React332.forwardRef(({ className, ...props }, ref) =
68585
68831
  }
68586
68832
  ));
68587
68833
  SelectScrollUpButton2.displayName = ScrollUpButton.displayName;
68588
- var SelectScrollDownButton2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
68834
+ var SelectScrollDownButton2 = React342.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
68589
68835
  ScrollDownButton,
68590
68836
  {
68591
68837
  ref,
@@ -68595,7 +68841,7 @@ var SelectScrollDownButton2 = React332.forwardRef(({ className, ...props }, ref)
68595
68841
  }
68596
68842
  ));
68597
68843
  SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
68598
- var SelectContent2 = React332.forwardRef(({ className, style, children, position = "popper", ...props }, ref) => {
68844
+ var SelectContent2 = React342.forwardRef(({ className, style, children, position = "popper", ...props }, ref) => {
68599
68845
  const { themeClass, colors: colors2, components } = useTheme();
68600
68846
  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Portal4, { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
68601
68847
  Content23,
@@ -68633,7 +68879,7 @@ var SelectContent2 = React332.forwardRef(({ className, style, children, position
68633
68879
  ) });
68634
68880
  });
68635
68881
  SelectContent2.displayName = Content23.displayName;
68636
- var SelectLabel2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
68882
+ var SelectLabel2 = React342.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
68637
68883
  Label,
68638
68884
  {
68639
68885
  ref,
@@ -68642,7 +68888,7 @@ var SelectLabel2 = React332.forwardRef(({ className, ...props }, ref) => /* @__P
68642
68888
  }
68643
68889
  ));
68644
68890
  SelectLabel2.displayName = Label.displayName;
68645
- var SelectItem2 = React332.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
68891
+ var SelectItem2 = React342.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
68646
68892
  Item,
68647
68893
  {
68648
68894
  ref,
@@ -68658,7 +68904,7 @@ var SelectItem2 = React332.forwardRef(({ className, children, ...props }, ref) =
68658
68904
  }
68659
68905
  ));
68660
68906
  SelectItem2.displayName = Item.displayName;
68661
- var SelectSeparator2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
68907
+ var SelectSeparator2 = React342.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
68662
68908
  Separator,
68663
68909
  {
68664
68910
  ref,
@@ -68686,6 +68932,7 @@ function TransferCryptoDoubleInput({
68686
68932
  defaultSourceChainId,
68687
68933
  defaultSourceTokenAddress,
68688
68934
  defaultSourceSymbol,
68935
+ prefilledAmountUsd,
68689
68936
  depositConfirmationMode = "auto_ui",
68690
68937
  onExecutionsChange,
68691
68938
  onDepositSuccess,
@@ -68810,6 +69057,22 @@ function TransferCryptoDoubleInput({
68810
69057
  const maxSlippage = currentChainFromBackend?.max_slippage_percent ?? 0.25;
68811
69058
  const processingTime = currentChainFromBackend?.estimated_processing_time ?? null;
68812
69059
  const minDepositUsd = currentChainFromBackend?.minimum_deposit_amount_usd ?? 3;
69060
+ const parsedPrefilledUsd = (0, import_react31.useMemo)(() => {
69061
+ const value = parseFloat(prefilledAmountUsd ?? "");
69062
+ return Number.isFinite(value) && value > 0 ? value : null;
69063
+ }, [prefilledAmountUsd]);
69064
+ const effectivePrefilledUsd = (0, import_react31.useMemo)(() => {
69065
+ if (parsedPrefilledUsd === null) return null;
69066
+ return Math.max(parsedPrefilledUsd, minDepositUsd);
69067
+ }, [parsedPrefilledUsd, minDepositUsd]);
69068
+ const prefillDisplay = (0, import_react31.useMemo)(() => {
69069
+ if (effectivePrefilledUsd === null) return null;
69070
+ const usdLabel = `$${effectivePrefilledUsd.toFixed(2)}`;
69071
+ if (selectedToken?.is_stablecoin) {
69072
+ return `${effectivePrefilledUsd.toFixed(2)} ${selectedToken.symbol} (${usdLabel})`;
69073
+ }
69074
+ return `${usdLabel} USD`;
69075
+ }, [effectivePrefilledUsd, selectedToken]);
68813
69076
  const renderTokenItem = (tokenData) => {
68814
69077
  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
68815
69078
  /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
@@ -68990,6 +69253,35 @@ function TransferCryptoDoubleInput({
68990
69253
  /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { children: "Retrying automatically every 5 seconds..." })
68991
69254
  ] })
68992
69255
  ] }),
69256
+ prefillDisplay && /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
69257
+ "div",
69258
+ {
69259
+ className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
69260
+ style: {
69261
+ backgroundColor: components.card.backgroundColor,
69262
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
69263
+ borderRadius: components.card.borderRadius
69264
+ },
69265
+ children: [
69266
+ /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
69267
+ "span",
69268
+ {
69269
+ className: "uf-text-xs",
69270
+ style: { color: components.card.subtitleColor, fontFamily: fonts.regular },
69271
+ children: "You send"
69272
+ }
69273
+ ),
69274
+ /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
69275
+ "span",
69276
+ {
69277
+ className: "uf-text-sm uf-font-semibold",
69278
+ style: { color: components.card.titleColor, fontFamily: fonts.semibold },
69279
+ children: prefillDisplay
69280
+ }
69281
+ )
69282
+ ]
69283
+ }
69284
+ ),
68993
69285
  /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
68994
69286
  /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
68995
69287
  "div",
@@ -70577,7 +70869,7 @@ function WalletConnect({
70577
70869
  amountQuickSelect = "percentage",
70578
70870
  onWalletDisconnect,
70579
70871
  onWalletConnected,
70580
- prefillAmountUsd,
70872
+ prefilledAmountUsd,
70581
70873
  checkoutAmountUsd,
70582
70874
  checkoutReceivedUsd,
70583
70875
  onNewDeposit,
@@ -70599,28 +70891,28 @@ function WalletConnect({
70599
70891
  onExecutionsChange
70600
70892
  }) {
70601
70893
  const { colors: colors2, fonts, components, mode } = useTheme();
70602
- const walletProvidedAtMount = React342.useRef(!!initialWalletInfo && !!initialDepositWallet);
70603
- const [activeWalletInfo, setActiveWalletInfo] = React342.useState(
70894
+ const walletProvidedAtMount = React352.useRef(!!initialWalletInfo && !!initialDepositWallet);
70895
+ const [activeWalletInfo, setActiveWalletInfo] = React352.useState(
70604
70896
  initialWalletInfo ?? null
70605
70897
  );
70606
- const [activeDepositWallet, setActiveDepositWallet] = React342.useState(
70898
+ const [activeDepositWallet, setActiveDepositWallet] = React352.useState(
70607
70899
  initialDepositWallet ?? null
70608
70900
  );
70609
70901
  const initialView = initialWalletInfo && initialDepositWallet ? "select_token" : "select_wallet";
70610
- const [view, setView] = React342.useState(initialView);
70611
- const [isTransitioning, setIsTransitioning] = React342.useState(false);
70612
- const viewRef = React342.useRef(initialView);
70902
+ const [view, setView] = React352.useState(initialView);
70903
+ const [isTransitioning, setIsTransitioning] = React352.useState(false);
70904
+ const viewRef = React352.useRef(initialView);
70613
70905
  const standalone = !canGoBack && !walletProvidedAtMount.current;
70614
70906
  const { wallet: detectedWallet, isLoading: detectingWallet } = useDetectedBrowserWallet({
70615
70907
  enabled: standalone
70616
70908
  });
70617
- const [autoResolved, setAutoResolved] = React342.useState(false);
70618
- const [selectedWalletDef, setSelectedWalletDef] = React342.useState(null);
70619
- const [connectingNetwork, setConnectingNetwork] = React342.useState(null);
70620
- const [walletError, setWalletError] = React342.useState(null);
70621
- const [isWalletConnecting, setIsWalletConnecting] = React342.useState(false);
70622
- const [eip6963ProviderCount, setEip6963ProviderCount] = React342.useState(0);
70623
- React342.useEffect(() => {
70909
+ const [autoResolved, setAutoResolved] = React352.useState(false);
70910
+ const [selectedWalletDef, setSelectedWalletDef] = React352.useState(null);
70911
+ const [connectingNetwork, setConnectingNetwork] = React352.useState(null);
70912
+ const [walletError, setWalletError] = React352.useState(null);
70913
+ const [isWalletConnecting, setIsWalletConnecting] = React352.useState(false);
70914
+ const [eip6963ProviderCount, setEip6963ProviderCount] = React352.useState(0);
70915
+ React352.useEffect(() => {
70624
70916
  const store = getEip6963Store();
70625
70917
  if (!store) return;
70626
70918
  setEip6963ProviderCount(store.getProviders().length);
@@ -70629,7 +70921,7 @@ function WalletConnect({
70629
70921
  });
70630
70922
  }, []);
70631
70923
  const { wallets: backendWallets } = useExternalWallets({ publishableKey });
70632
- const walletDefinitions = React342.useMemo(
70924
+ const walletDefinitions = React352.useMemo(
70633
70925
  () => backendWallets.length > 0 ? backendWallets.map((w) => ({
70634
70926
  id: w.id,
70635
70927
  name: w.name,
@@ -70640,32 +70932,32 @@ function WalletConnect({
70640
70932
  })) : FALLBACK_WALLET_DEFINITIONS,
70641
70933
  [backendWallets]
70642
70934
  );
70643
- const [recentWalletId, setRecentWalletIdState] = React342.useState(getLastOpenedWallet);
70644
- React342.useEffect(() => {
70935
+ const [recentWalletId, setRecentWalletIdState] = React352.useState(getLastOpenedWallet);
70936
+ React352.useEffect(() => {
70645
70937
  if (view === "select_wallet") {
70646
70938
  setRecentWalletIdState(getLastOpenedWallet());
70647
70939
  }
70648
70940
  }, [view]);
70649
- const availableWallets = React342.useMemo(
70941
+ const availableWallets = React352.useMemo(
70650
70942
  () => detectAvailableWallets(walletDefinitions, recentWalletId),
70651
70943
  [walletDefinitions, eip6963ProviderCount, recentWalletId]
70652
70944
  );
70653
- const [isMobile, setIsMobile] = React342.useState(false);
70654
- React342.useEffect(() => {
70945
+ const [isMobile, setIsMobile] = React352.useState(false);
70946
+ React352.useEffect(() => {
70655
70947
  setIsMobile(isMobileDevice());
70656
70948
  }, []);
70657
- const mobileDepositAddresses = React342.useMemo(
70949
+ const mobileDepositAddresses = React352.useMemo(
70658
70950
  () => (depositWallets ?? []).map((w) => ({ chain_type: w.chain_type, address: w.address })),
70659
70951
  [depositWallets]
70660
70952
  );
70661
- const mobileDepositWalletIds = React342.useMemo(
70953
+ const mobileDepositWalletIds = React352.useMemo(
70662
70954
  () => (depositWallets ?? []).filter((w) => w.chain_type === "ethereum" || w.chain_type === "solana").map((w) => w.id),
70663
70955
  [depositWallets]
70664
70956
  );
70665
- const [mobileRedirect, setMobileRedirect] = React342.useState(null);
70666
- const [pendingMobileWallet, setPendingMobileWallet] = React342.useState(null);
70667
- const [awaitingMobileDeposit, setAwaitingMobileDeposit] = React342.useState(false);
70668
- React342.useEffect(() => {
70957
+ const [mobileRedirect, setMobileRedirect] = React352.useState(null);
70958
+ const [pendingMobileWallet, setPendingMobileWallet] = React352.useState(null);
70959
+ const [awaitingMobileDeposit, setAwaitingMobileDeposit] = React352.useState(false);
70960
+ React352.useEffect(() => {
70669
70961
  if (!standalone || autoResolved || detectingWallet) return;
70670
70962
  if (!detectedWallet) {
70671
70963
  setAutoResolved(true);
@@ -70691,32 +70983,36 @@ function WalletConnect({
70691
70983
  depositWallets,
70692
70984
  depositWalletsLoading
70693
70985
  ]);
70694
- React342.useEffect(() => {
70986
+ React352.useEffect(() => {
70695
70987
  if (!standalone || autoResolved) return;
70696
70988
  const t13 = setTimeout(() => setAutoResolved(true), 5e3);
70697
70989
  return () => clearTimeout(t13);
70698
70990
  }, [standalone, autoResolved]);
70699
- const [balances, setBalances] = React342.useState([]);
70700
- const [isLoading, setIsLoading] = React342.useState(false);
70701
- const [selectedBalance, setSelectedBalance] = React342.useState(null);
70702
- const [totalBalanceUsd, setTotalBalanceUsd] = React342.useState(null);
70703
- const [error, setError] = React342.useState(null);
70704
- const [isDisconnectingWallet, setIsDisconnectingWallet] = React342.useState(false);
70705
- const [amountUsd, setAmountUsd] = React342.useState(prefillAmountUsd ?? "");
70706
- const [isConfirming, setIsConfirming] = React342.useState(false);
70707
- const [hasSignedTransaction, setHasSignedTransaction] = React342.useState(false);
70708
- const [tokenChainDetails, setTokenChainDetails] = React342.useState(null);
70709
- const [loadingTokenDetails, setLoadingTokenDetails] = React342.useState(false);
70710
- const [showTransactionDetails, setShowTransactionDetails] = React342.useState(false);
70711
- const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React342.useState(null);
70991
+ const [balances, setBalances] = React352.useState([]);
70992
+ const [isLoading, setIsLoading] = React352.useState(false);
70993
+ const [selectedBalance, setSelectedBalance] = React352.useState(null);
70994
+ const [totalBalanceUsd, setTotalBalanceUsd] = React352.useState(null);
70995
+ const [error, setError] = React352.useState(null);
70996
+ const [isDisconnectingWallet, setIsDisconnectingWallet] = React352.useState(false);
70997
+ const [amountUsd, setAmountUsd] = React352.useState(prefilledAmountUsd ?? "");
70998
+ const [isConfirming, setIsConfirming] = React352.useState(false);
70999
+ const [hasSignedTransaction, setHasSignedTransaction] = React352.useState(false);
71000
+ const [tokenChainDetails, setTokenChainDetails] = React352.useState(null);
71001
+ const [loadingTokenDetails, setLoadingTokenDetails] = React352.useState(false);
71002
+ const [showTransactionDetails, setShowTransactionDetails] = React352.useState(false);
71003
+ const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React352.useState(null);
70712
71004
  const walletInfo = activeWalletInfo;
70713
71005
  const depositWallet = activeDepositWallet;
70714
71006
  const hasWallet = !!activeWalletInfo && !!activeDepositWallet;
71007
+ React352.useEffect(() => {
71008
+ const cleanedPrefilled = prefilledAmountUsd?.replace(/[^0-9.]/g, "") ?? "";
71009
+ setAmountUsd(cleanedPrefilled);
71010
+ }, [prefilledAmountUsd]);
70715
71011
  const chainType = activeDepositWallet?.chain_type ?? "ethereum";
70716
71012
  const recipientAddress = activeDepositWallet?.address ?? "";
70717
71013
  const isCheckoutMode = !!checkoutAmountUsd;
70718
71014
  const supportedChainType = chainType === "algorand" || chainType === "xrpl" || chainType === "cardano" || chainType === "n1" ? "ethereum" : chainType;
70719
- const transitionTo = React342.useCallback((nextView) => {
71015
+ const transitionTo = React352.useCallback((nextView) => {
70720
71016
  if (nextView === viewRef.current) return;
70721
71017
  setIsTransitioning(true);
70722
71018
  setTimeout(() => {
@@ -70781,7 +71077,7 @@ function WalletConnect({
70781
71077
  if (!selectedWalletDef) return;
70782
71078
  handleConnectWallet(selectedWalletDef, network);
70783
71079
  };
70784
- React342.useEffect(() => {
71080
+ React352.useEffect(() => {
70785
71081
  if (!pendingMobileWallet) return;
70786
71082
  if (mobileDepositAddresses.length > 0) {
70787
71083
  const wallet = pendingMobileWallet;
@@ -70945,7 +71241,7 @@ function WalletConnect({
70945
71241
  publishableKey,
70946
71242
  enabled: !!activeWalletInfo && !!recipientAddress
70947
71243
  });
70948
- const effectiveDestinationAmount = React342.useMemo(() => {
71244
+ const effectiveDestinationAmount = React352.useMemo(() => {
70949
71245
  if (!checkoutRemainingBaseUnits || checkoutRemainingBaseUnits === "0") return "0";
70950
71246
  if (!checkoutAmountUsd) return checkoutRemainingBaseUnits;
70951
71247
  const remaining = BigInt(checkoutRemainingBaseUnits);
@@ -70973,7 +71269,7 @@ function WalletConnect({
70973
71269
  stablecoinParity,
70974
71270
  enabled: isCheckoutMode && !!selectedToken && !!checkoutDestination && effectiveDestinationAmount !== "0"
70975
71271
  });
70976
- const activeCheckoutQuote = React342.useMemo(() => {
71272
+ const activeCheckoutQuote = React352.useMemo(() => {
70977
71273
  if (!isCheckoutMode) return null;
70978
71274
  if (walletCheckoutQuote)
70979
71275
  return {
@@ -71003,10 +71299,10 @@ function WalletConnect({
71003
71299
  onDepositSuccess,
71004
71300
  onDepositError
71005
71301
  });
71006
- React342.useEffect(() => {
71302
+ React352.useEffect(() => {
71007
71303
  onExecutionsChange?.(depositExecutions);
71008
71304
  }, [depositExecutions, onExecutionsChange]);
71009
- const latestDepositExecution = React342.useMemo(() => {
71305
+ const latestDepositExecution = React352.useMemo(() => {
71010
71306
  if (depositExecutions.length === 0) return null;
71011
71307
  return [...depositExecutions].sort((a, b) => {
71012
71308
  const ta = a.created_at ? new Date(a.created_at).getTime() : 0;
@@ -71014,21 +71310,21 @@ function WalletConnect({
71014
71310
  return tb - ta;
71015
71311
  })[0];
71016
71312
  }, [depositExecutions]);
71017
- React342.useEffect(() => {
71313
+ React352.useEffect(() => {
71018
71314
  if (awaitingMobileDeposit && latestDepositExecution && (viewRef.current === "mobile_redirect" || viewRef.current === "connecting")) {
71019
71315
  transitionTo("mobile_deposit_status");
71020
71316
  }
71021
71317
  }, [awaitingMobileDeposit, latestDepositExecution, transitionTo]);
71022
- React342.useEffect(() => {
71023
- if (!prefillAmountUsd || !tokenChainDetails || view !== "enter_amount") return;
71318
+ React352.useEffect(() => {
71319
+ if (!isCheckoutMode || !tokenChainDetails || view !== "enter_amount") return;
71024
71320
  const minDeposit = tokenChainDetails.minimum_deposit_amount_usd || 0;
71025
71321
  const currentAmount = parseFloat(amountUsd) || 0;
71026
71322
  if (currentAmount > 0 && currentAmount < minDeposit) setAmountUsd(minDeposit.toFixed(2));
71027
- }, [tokenChainDetails, view, prefillAmountUsd]);
71028
- React342.useEffect(() => {
71323
+ }, [isCheckoutMode, tokenChainDetails, view, amountUsd]);
71324
+ React352.useEffect(() => {
71029
71325
  if (view === "review") setShowTransactionDetails(false);
71030
71326
  }, [view]);
71031
- React342.useEffect(() => {
71327
+ React352.useEffect(() => {
71032
71328
  if (view !== "enter_amount" && view !== "review" || !selectedBalance || !activeDepositWallet)
71033
71329
  return;
71034
71330
  let cancelled = false;
@@ -71065,7 +71361,7 @@ function WalletConnect({
71065
71361
  cancelled = true;
71066
71362
  };
71067
71363
  }, [view, selectedBalance, publishableKey, activeDepositWallet]);
71068
- React342.useEffect(() => {
71364
+ React352.useEffect(() => {
71069
71365
  if (!activeWalletInfo || !activeDepositWallet) return;
71070
71366
  let cancelled = false;
71071
71367
  setIsLoading(true);
@@ -71130,21 +71426,21 @@ function WalletConnect({
71130
71426
  defaultSourceTokenAddress,
71131
71427
  defaultSourceSymbol
71132
71428
  ]);
71133
- const usdToTokenRate = React342.useMemo(() => {
71429
+ const usdToTokenRate = React352.useMemo(() => {
71134
71430
  if (!selectedBalance || !selectedBalance.amount_usd || !selectedToken) return 0;
71135
71431
  const balanceAmount = Number(selectedBalance.amount) / 10 ** selectedToken.decimals;
71136
71432
  const balanceUsd = parseFloat(selectedBalance.amount_usd);
71137
71433
  if (balanceAmount === 0 || balanceUsd === 0) return 0;
71138
71434
  return balanceAmount / balanceUsd;
71139
71435
  }, [selectedBalance, selectedToken]);
71140
- const tokenAmount = React342.useMemo(() => {
71436
+ const tokenAmount = React352.useMemo(() => {
71141
71437
  if (isCheckoutMode && activeCheckoutQuote && selectedToken)
71142
71438
  return Number(activeCheckoutQuote.sourceAmount) / 10 ** activeCheckoutQuote.sourceTokenDecimals;
71143
71439
  const usdNum = parseFloat(amountUsd) || 0;
71144
71440
  if (usdNum === 0 || usdToTokenRate === 0) return 0;
71145
71441
  return usdNum * usdToTokenRate;
71146
71442
  }, [amountUsd, usdToTokenRate, isCheckoutMode, activeCheckoutQuote, selectedToken]);
71147
- React342.useEffect(() => {
71443
+ React352.useEffect(() => {
71148
71444
  if (isCheckoutMode && activeCheckoutQuote?.sourceAmountUsd && view === "enter_amount")
71149
71445
  setAmountUsd(activeCheckoutQuote.sourceAmountUsd);
71150
71446
  }, [isCheckoutMode, activeCheckoutQuote, view]);
@@ -71153,7 +71449,7 @@ function WalletConnect({
71153
71449
  const inputUsdNum = parseFloat(amountUsd) || 0;
71154
71450
  const minDepositUsd = tokenChainDetails?.minimum_deposit_amount_usd || 0;
71155
71451
  const isValidAmount = isCheckoutMode && activeCheckoutQuote ? tokenAmount > 0 && tokenAmount <= maxTokenAmount : inputUsdNum > 0 && inputUsdNum <= maxUsdAmount && inputUsdNum >= minDepositUsd;
71156
- const formattedTokenAmount = React342.useMemo(() => {
71452
+ const formattedTokenAmount = React352.useMemo(() => {
71157
71453
  if (tokenAmount === 0 || !selectedToken) return null;
71158
71454
  return `${tokenAmount.toFixed(6)} ${selectedToken.symbol}`.replace(/\.?0+$/, "");
71159
71455
  }, [tokenAmount, selectedToken]);
@@ -71186,7 +71482,7 @@ function WalletConnect({
71186
71482
  break;
71187
71483
  case "enter_amount":
71188
71484
  transitionTo("select_token");
71189
- setAmountUsd(prefillAmountUsd ?? "");
71485
+ setAmountUsd(prefilledAmountUsd ?? "");
71190
71486
  setTokenChainDetails(null);
71191
71487
  break;
71192
71488
  case "review":
@@ -71218,7 +71514,7 @@ function WalletConnect({
71218
71514
  setSelectedBalance(null);
71219
71515
  setBalances([]);
71220
71516
  setTotalBalanceUsd(null);
71221
- setAmountUsd(prefillAmountUsd ?? "");
71517
+ setAmountUsd(prefilledAmountUsd ?? "");
71222
71518
  setError(null);
71223
71519
  };
71224
71520
  if (standalone) {
@@ -71463,116 +71759,131 @@ function WalletConnect({
71463
71759
  ] });
71464
71760
  }
71465
71761
  if (view === "select_wallet") {
71466
- return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { style: viewTransitionStyle, children: [
71467
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71468
- DepositHeader,
71762
+ return (
71763
+ // Mobile: flex column that fills the full-height sheet so the wallet list
71764
+ // scrolls and the footer pins to the bottom. Desktop (sm:): content-sized.
71765
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
71766
+ "div",
71469
71767
  {
71470
- title: "Connect Wallet",
71471
- showBack: canGoBack,
71472
- onBack: handleBack,
71473
- onClose
71474
- }
71475
- ),
71476
- /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-pb-4", children: [
71477
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71478
- "p",
71479
- {
71480
- className: "uf-text-sm uf-text-center uf-pb-4",
71481
- style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
71482
- children: isMobile ? "Open this page in your wallet's app to connect" : "Select a wallet to connect"
71483
- }
71484
- ),
71485
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "uf-space-y-2", style: { maxHeight: 330, overflowY: "auto" }, children: availableWallets.map((wallet) => {
71486
- const walletPlatformAllowed = !wallet.mobileBrowsePlatforms || wallet.mobileBrowsePlatforms.includes(getMobilePlatform() ?? "");
71487
- const showOpenInApp = isMobile && !wallet.isInstalled && wallet.supportsMobileBrowse !== false && walletPlatformAllowed;
71488
- const isPending = pendingMobileWallet?.id === wallet.id;
71489
- return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
71490
- "button",
71491
- {
71492
- onClick: () => void handleWalletClick(wallet),
71493
- disabled: isWalletConnecting || !!pendingMobileWallet,
71494
- 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",
71495
- style: {
71496
- backgroundColor: components.card.backgroundColor,
71497
- borderRadius: components.card.borderRadius,
71498
- border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
71499
- },
71500
- children: [
71501
- /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
71502
- WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71503
- WalletIconWithNetwork,
71504
- {
71505
- WalletIcon: WALLET_ICONS3[wallet.id],
71506
- networks: wallet.networks,
71507
- size: 40,
71508
- className: "uf-rounded-lg"
71509
- }
71510
- ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
71511
- /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
71512
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71513
- "div",
71514
- {
71515
- className: "uf-text-sm uf-font-medium",
71516
- style: { color: components.card.titleColor, fontFamily: fonts.medium },
71517
- children: wallet.name
71518
- }
71519
- ),
71520
- wallet.id === recentWalletId && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71521
- "span",
71522
- {
71523
- className: "uf-text-xs uf-px-2 uf-py-0.5 uf-rounded-full",
71524
- style: {
71525
- backgroundColor: colors2.primary + "20",
71526
- color: colors2.primary,
71527
- fontFamily: fonts.medium
71528
- },
71529
- children: "Last used"
71530
- }
71531
- )
71532
- ] })
71533
- ] }),
71534
- isPending ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71535
- LoaderCircle,
71536
- {
71537
- className: "uf-w-4 uf-h-4 uf-animate-spin",
71538
- style: { color: colors2.primary }
71539
- }
71540
- ) : wallet.isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71541
- "span",
71768
+ style: viewTransitionStyle,
71769
+ className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col sm:uf-block",
71770
+ children: [
71771
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71772
+ DepositHeader,
71773
+ {
71774
+ title: "Connect Wallet",
71775
+ showBack: canGoBack,
71776
+ onBack: handleBack,
71777
+ onClose
71778
+ }
71779
+ ),
71780
+ /* @__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: [
71781
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71782
+ "p",
71783
+ {
71784
+ className: "uf-text-sm uf-text-center uf-pb-4",
71785
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
71786
+ children: isMobile ? "Open this page in your wallet's app to connect" : "Select a wallet to connect"
71787
+ }
71788
+ ),
71789
+ /* @__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) => {
71790
+ if (!isMobile || wallet.isInstalled) return true;
71791
+ const platformAllowed = !wallet.mobileBrowsePlatforms || wallet.mobileBrowsePlatforms.includes(getMobilePlatform() ?? "");
71792
+ return wallet.supportsMobileBrowse !== false && platformAllowed;
71793
+ }).map((wallet) => {
71794
+ const walletPlatformAllowed = !wallet.mobileBrowsePlatforms || wallet.mobileBrowsePlatforms.includes(getMobilePlatform() ?? "");
71795
+ const showOpenInApp = isMobile && !wallet.isInstalled && wallet.supportsMobileBrowse !== false && walletPlatformAllowed;
71796
+ const isPending = pendingMobileWallet?.id === wallet.id;
71797
+ return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
71798
+ "button",
71542
71799
  {
71543
- className: "uf-text-xs uf-px-2 uf-py-1 uf-rounded-full",
71800
+ onClick: () => void handleWalletClick(wallet),
71801
+ disabled: isWalletConnecting || !!pendingMobileWallet,
71802
+ 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",
71544
71803
  style: {
71545
- backgroundColor: colors2.primary + "20",
71546
- color: colors2.primary,
71547
- fontFamily: fonts.medium
71804
+ backgroundColor: components.card.backgroundColor,
71805
+ borderRadius: components.card.borderRadius,
71806
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
71548
71807
  },
71549
- children: "Detected"
71550
- }
71551
- ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
71552
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71553
- "span",
71554
- {
71555
- className: "uf-text-xs",
71556
- style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
71557
- children: showOpenInApp ? "Open" : "Install"
71558
- }
71559
- ),
71560
- /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71561
- ExternalLink,
71562
- {
71563
- className: "uf-w-3 uf-h-3",
71564
- style: { color: colors2.foregroundMuted }
71565
- }
71566
- )
71567
- ] })
71568
- ]
71569
- },
71570
- wallet.id
71571
- );
71572
- }) }),
71573
- 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 })
71574
- ] })
71575
- ] });
71808
+ children: [
71809
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
71810
+ WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71811
+ WalletIconWithNetwork,
71812
+ {
71813
+ WalletIcon: WALLET_ICONS3[wallet.id],
71814
+ networks: wallet.networks,
71815
+ size: 40,
71816
+ className: "uf-rounded-lg"
71817
+ }
71818
+ ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
71819
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
71820
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71821
+ "div",
71822
+ {
71823
+ className: "uf-text-sm uf-font-medium",
71824
+ style: { color: components.card.titleColor, fontFamily: fonts.medium },
71825
+ children: wallet.name
71826
+ }
71827
+ ),
71828
+ wallet.id === recentWalletId && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71829
+ "span",
71830
+ {
71831
+ className: "uf-text-xs uf-px-2 uf-py-0.5 uf-rounded-full",
71832
+ style: {
71833
+ backgroundColor: colors2.primary + "20",
71834
+ color: colors2.primary,
71835
+ fontFamily: fonts.medium
71836
+ },
71837
+ children: "Last used"
71838
+ }
71839
+ )
71840
+ ] })
71841
+ ] }),
71842
+ isPending ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71843
+ LoaderCircle,
71844
+ {
71845
+ className: "uf-w-4 uf-h-4 uf-animate-spin",
71846
+ style: { color: colors2.primary }
71847
+ }
71848
+ ) : wallet.isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71849
+ "span",
71850
+ {
71851
+ className: "uf-text-xs uf-px-2 uf-py-1 uf-rounded-full",
71852
+ style: {
71853
+ backgroundColor: colors2.primary + "20",
71854
+ color: colors2.primary,
71855
+ fontFamily: fonts.medium
71856
+ },
71857
+ children: "Detected"
71858
+ }
71859
+ ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
71860
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71861
+ "span",
71862
+ {
71863
+ className: "uf-text-xs",
71864
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
71865
+ children: showOpenInApp ? "Open" : "Install"
71866
+ }
71867
+ ),
71868
+ /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
71869
+ ExternalLink,
71870
+ {
71871
+ className: "uf-w-3 uf-h-3",
71872
+ style: { color: colors2.foregroundMuted }
71873
+ }
71874
+ )
71875
+ ] })
71876
+ ]
71877
+ },
71878
+ wallet.id
71879
+ );
71880
+ }) }),
71881
+ 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 })
71882
+ ] })
71883
+ ]
71884
+ }
71885
+ )
71886
+ );
71576
71887
  }
71577
71888
  const preConnectAccent = selectedWalletDef ? getWalletBrandColor(selectedWalletDef.id, mode) : void 0;
71578
71889
  const preConnectFg = preConnectAccent ? getContrastingTextColor(preConnectAccent) : void 0;
@@ -71927,6 +72238,15 @@ function SkeletonButton({ variant = "default" }) {
71927
72238
  ] });
71928
72239
  }
71929
72240
  var t8 = i18n2.depositModal;
72241
+ function normalizePrefilledUsdAmount(value) {
72242
+ if (!value) return void 0;
72243
+ const cleaned = value.replace(/[^0-9.]/g, "");
72244
+ if (!cleaned) return void 0;
72245
+ const normalizedNumeric = cleaned.replace(/(\..*)\./g, "$1");
72246
+ const parsed = parseFloat(normalizedNumeric);
72247
+ if (!Number.isFinite(parsed) || parsed <= 0) return void 0;
72248
+ return parseFloat(parsed.toFixed(2)).toString();
72249
+ }
71930
72250
  function depositTabForScreen(screen) {
71931
72251
  return screen === "card" || screen === "cashapp" || screen === "bank_transfer" || screen === "stripe_link" || screen === "apple_pay" ? "cash" : "crypto";
71932
72252
  }
@@ -71946,6 +72266,7 @@ function DepositModal({
71946
72266
  defaultSourceChainId,
71947
72267
  defaultSourceTokenAddress,
71948
72268
  defaultSourceSymbol,
72269
+ prefilledAmountUsd,
71949
72270
  hideDepositTracker,
71950
72271
  showBalanceHeader = false,
71951
72272
  transferInputVariant = "double_input",
@@ -71961,7 +72282,9 @@ function DepositModal({
71961
72282
  applePayTitle = "Pay with Apple Pay",
71962
72283
  applePaySubTitle = "Instant",
71963
72284
  enableBankTransfer,
71964
- enableStripeLink = false,
72285
+ // No default: left undefined so the backend `stripe_link.enabled` can govern
72286
+ // (via the `??` chain in showStripeLink) once a dashboard toggle exists.
72287
+ enableStripeLink,
71965
72288
  userEmail,
71966
72289
  hideDepositFlowInfo = false,
71967
72290
  hideDisplayDescription = false,
@@ -71979,6 +72302,10 @@ function DepositModal({
71979
72302
  depositTrackerSubTitle = t8.depositTracker.subtitle
71980
72303
  }) {
71981
72304
  const { colors: colors2, fonts, components } = useTheme();
72305
+ const normalizedPrefilledAmountUsd = (0, import_react3.useMemo)(
72306
+ () => normalizePrefilledUsdAmount(prefilledAmountUsd),
72307
+ [prefilledAmountUsd]
72308
+ );
71982
72309
  const onDepositSuccessFor = (0, import_react3.useCallback)(
71983
72310
  (method) => onDepositSuccess || onEvent ? (data) => {
71984
72311
  const payload = { ...data, method };
@@ -72042,14 +72369,18 @@ function DepositModal({
72042
72369
  const [allExecutions, setAllExecutions] = (0, import_react3.useState)([]);
72043
72370
  const [selectedExecution, setSelectedExecution] = (0, import_react3.useState)(null);
72044
72371
  const [depositExecutions, setDepositExecutions] = (0, import_react3.useState)([]);
72372
+ const { userIpInfo, isLoading: isLoadingIp } = useUserIp2();
72045
72373
  const { projectConfig } = useProjectConfig({
72046
72374
  publishableKey,
72047
- enabled: open
72375
+ enabled: open && !isLoadingIp,
72376
+ countryCode: userIpInfo?.alpha2,
72377
+ subdivisionCode: userIpInfo?.subdivisionCode ?? void 0
72048
72378
  });
72049
72379
  const showTransferCrypto = enableTransferCrypto ?? projectConfig?.transfer_crypto?.enabled ?? true;
72050
72380
  const showConnectWallet = enableConnectWallet ?? projectConfig?.connect_wallet?.enabled ?? true;
72051
72381
  const showPayWithExchange = enablePayWithExchange ?? projectConfig?.pay_with_exchange?.enabled ?? true;
72052
72382
  const showFiatOnramp = !projectConfig?.fiat_onramp?.is_hidden && (enableFiatOnramp ?? projectConfig?.fiat_onramp?.enabled ?? true);
72383
+ const showStripeLink = !projectConfig?.stripe_link?.is_hidden && (enableStripeLink ?? projectConfig?.stripe_link?.enabled ?? false);
72053
72384
  const showConnectExchange = enableConnectExchange ?? projectConfig?.connect_exchange?.enabled ?? true;
72054
72385
  const showCashApp = enableCashApp ?? projectConfig?.cash_app?.enabled ?? true;
72055
72386
  const showApplePay = enableApplePay ?? projectConfig?.apple_pay?.enabled ?? true;
@@ -72195,7 +72526,6 @@ function DepositModal({
72195
72526
  publishableKey,
72196
72527
  enabled: open && showPayWithExchange
72197
72528
  });
72198
- const { userIpInfo, isLoading: isLoadingIp } = useUserIp2();
72199
72529
  const { providers: bankTransferProviders, isLoading: bankTransferProvidersLoading } = useBankTransferProviders({
72200
72530
  publishableKey,
72201
72531
  enabled: open && !!userIpInfo?.alpha2,
@@ -72373,6 +72703,12 @@ function DepositModal({
72373
72703
  const [cashAppView, setCashAppView] = (0, import_react3.useState)("amount");
72374
72704
  const [stripeLinkStep, setStripeLinkStep] = (0, import_react3.useState)("amount");
72375
72705
  const stripeLinkBackRef = (0, import_react3.useRef)(null);
72706
+ (0, import_react3.useEffect)(() => {
72707
+ if (view === "stripe_link" && !showStripeLink && effectiveInitialScreen === "main") {
72708
+ setView("main");
72709
+ setStripeLinkStep("amount");
72710
+ }
72711
+ }, [view, showStripeLink, effectiveInitialScreen]);
72376
72712
  const [cashAppAmount, setCashAppAmount] = (0, import_react3.useState)("");
72377
72713
  const [applePayView, setApplePayView] = (0, import_react3.useState)("email_input");
72378
72714
  const applePayHandleRef = (0, import_react3.useRef)(null);
@@ -72597,7 +72933,7 @@ function DepositModal({
72597
72933
  },
72598
72934
  "cashapp"
72599
72935
  ) : null;
72600
- const stripeLinkMenuButton = enableStripeLink ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72936
+ const stripeLinkMenuButton = showStripeLink ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72601
72937
  StripeLinkButton,
72602
72938
  {
72603
72939
  onClick: () => setView("stripe_link"),
@@ -72645,11 +72981,13 @@ function DepositModal({
72645
72981
  connectExchangeMenuButton
72646
72982
  ].filter(Boolean);
72647
72983
  const cashMenuButtons = [
72984
+ // Stripe "Pay with Link" is intentionally listed first so it always sits
72985
+ // above "Deposit with Card".
72986
+ stripeLinkMenuButton,
72648
72987
  depositWithCardMenuButton,
72649
72988
  applePayMenuButton,
72650
72989
  cashAppMenuButton,
72651
- bankTransferMenuButton,
72652
- stripeLinkMenuButton
72990
+ bankTransferMenuButton
72653
72991
  ].filter(Boolean);
72654
72992
  const depositTabs = [
72655
72993
  { id: "crypto", label: "Use Crypto", icon: Bitcoin, buttons: cryptoMenuButtons },
@@ -72744,13 +73082,13 @@ function DepositModal({
72744
73082
  const stackedOptions = [
72745
73083
  transferCryptoMenuButton,
72746
73084
  connectWalletMenuButton,
73085
+ stripeLinkMenuButton,
72747
73086
  depositWithCardMenuButton,
72748
73087
  applePayMenuButton,
72749
73088
  payWithExchangeMenuButton,
72750
73089
  connectExchangeMenuButton,
72751
73090
  cashAppMenuButton,
72752
73091
  bankTransferMenuButton,
72753
- stripeLinkMenuButton,
72754
73092
  depositTrackerMenuButton
72755
73093
  ].filter(Boolean);
72756
73094
  return renderScrollableOptions(stackedOptions);
@@ -72766,410 +73104,461 @@ function DepositModal({
72766
73104
  {
72767
73105
  ref: hideOverlay ? containerCallbackRef : void 0,
72768
73106
  hideOverlay,
72769
- 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}`}`,
73107
+ 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
73108
+ // is a grid, and its single auto row only *grows* to fill free
73109
+ // space (align-content: stretch) — it never shrinks below content,
73110
+ // so a long wallet list would balloon the row past the viewport and
73111
+ // push the footer off-screen instead of scrolling. Clamp the row to
73112
+ // the modal height with minmax(0,1fr) so the inner overflow-y-auto
73113
+ // list scrolls with the footer pinned. Reset to content-sized on
73114
+ // desktop (sm:) where the modal is auto-height and centered.
73115
+ view === "wallet_connect" ? "[grid-template-rows:minmax(0,1fr)] sm:[grid-template-rows:none]" : ""} ${themeClass}`}`,
72770
73116
  style: { backgroundColor: colors2.background },
72771
73117
  onPointerDownOutside: (e) => e.preventDefault(),
72772
73118
  onInteractOutside: (e) => e.preventDefault(),
72773
73119
  children: [
72774
73120
  /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(DialogTitle2, { className: "uf-sr-only", children: modalTitle || "Deposit" }),
72775
- /* @__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: [
72776
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72777
- DepositHeader,
72778
- {
72779
- title: modalTitle || "Deposit",
72780
- showClose: !hideOverlay,
72781
- onClose: handleClose,
72782
- showBalance: showBalanceHeader,
72783
- balanceAddress: recipientAddress,
72784
- balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
72785
- balanceChainId: destinationChainId,
72786
- balanceTokenAddress: destinationTokenAddress,
72787
- projectName: projectConfig?.project_name,
72788
- publishableKey
72789
- }
72790
- ) }),
72791
- renderMainMenuBody(),
72792
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-flex-shrink-0", children: depositPoweredByFooter })
72793
- ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
72794
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72795
- DepositHeader,
72796
- {
72797
- title: transferCryptoTitle,
72798
- showBack: showBackTransfer,
72799
- onBack: handleBack,
72800
- onClose: handleClose,
72801
- showBalance: showBalanceHeader,
72802
- balanceAddress: recipientAddress,
72803
- balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
72804
- balanceChainId: destinationChainId,
72805
- balanceTokenAddress: destinationTokenAddress,
72806
- projectName: projectConfig?.project_name,
72807
- publishableKey
72808
- }
72809
- ),
72810
- /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
72811
- 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)(
72812
- TransferCryptoSingleInput,
72813
- {
72814
- userId,
72815
- publishableKey,
72816
- recipientAddress,
72817
- destinationChainType,
72818
- destinationChainId,
72819
- destinationTokenAddress,
72820
- defaultSourceChainType,
72821
- defaultSourceChainId,
72822
- defaultSourceTokenAddress,
72823
- defaultSourceSymbol,
72824
- depositConfirmationMode,
72825
- onExecutionsChange: setDepositExecutions,
72826
- onDepositSuccess: onDepositSuccessFor("transfer"),
72827
- onDepositError: onDepositErrorFor("transfer"),
72828
- wallets
72829
- }
72830
- ) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72831
- TransferCryptoDoubleInput,
72832
- {
72833
- userId,
72834
- publishableKey,
72835
- recipientAddress,
72836
- destinationChainType,
72837
- destinationChainId,
72838
- destinationTokenAddress,
72839
- defaultSourceChainType,
72840
- defaultSourceChainId,
72841
- defaultSourceTokenAddress,
72842
- defaultSourceSymbol,
72843
- depositConfirmationMode,
72844
- onExecutionsChange: setDepositExecutions,
72845
- onDepositSuccess: onDepositSuccessFor("transfer"),
72846
- onDepositError: onDepositErrorFor("transfer"),
72847
- wallets
72848
- }
72849
- ),
72850
- depositPoweredByFooter
72851
- ] })
72852
- ] }) : view === "tracker" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
72853
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72854
- DepositHeader,
72855
- {
72856
- title: selectedExecution ? "Deposit Details" : depositTrackerTitle,
72857
- showBack: showBackTracker,
72858
- onBack: handleBack,
72859
- onClose: handleClose
72860
- }
72861
- ),
72862
- /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
72863
- /* @__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)(
72864
- "div",
72865
- {
72866
- className: "uf-text-sm",
72867
- style: {
72868
- color: components.container.subtitleColor,
72869
- fontFamily: fonts.regular
72870
- },
72871
- children: "No deposits yet"
72872
- }
72873
- ) }) : allExecutions.map((execution) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72874
- DepositExecutionItem,
72875
- {
72876
- execution,
72877
- onClick: () => setSelectedExecution(execution)
72878
- },
72879
- execution.id
72880
- )) }) }),
72881
- depositPoweredByFooter
72882
- ] })
72883
- ] }) : view === "card" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
72884
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72885
- DepositHeader,
72886
- {
72887
- title: cardView === "quotes" ? t8.quotes : depositWithCardTitle,
72888
- showBack: showBackCard,
72889
- onBack: handleBack,
72890
- onClose: handleClose,
72891
- badge: cardView === "quotes" ? { count: quotesCount } : void 0,
72892
- showBalance: showBalanceHeader,
72893
- balanceAddress: recipientAddress,
72894
- balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
72895
- balanceChainId: destinationChainId,
72896
- balanceTokenAddress: destinationTokenAddress,
72897
- projectName: projectConfig?.project_name,
72898
- publishableKey
72899
- }
72900
- ),
72901
- /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
72902
- standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : !showFiatOnramp ? (
72903
- // Fiat on-ramp resolved hidden/disabled after a direct open
72904
- // (e.g. platform `is_hidden` for a Stripe Link-only project).
72905
- // Show a geo-restriction screen rather than the card UI so the
72906
- // hard-hide is honoured without a flash of "Pay with Card".
72907
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(GeoRestrictionScreen, { methodName: "Card" })
72908
- ) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72909
- BuyWithCard,
72910
- {
72911
- userId,
72912
- publishableKey,
72913
- view: cardView,
72914
- onViewChange: handleCardViewChange,
72915
- destinationTokenSymbol,
72916
- recipientAddress,
72917
- destinationChainType,
72918
- destinationChainId,
72919
- destinationTokenAddress,
72920
- onDepositSuccess: onDepositSuccessFor("card"),
72921
- onDepositError: onDepositErrorFor("card"),
72922
- onEvent,
72923
- themeClass,
72924
- wallets,
72925
- assetCdnUrl: projectConfig?.asset_cdn_url,
72926
- hideDepositFlowInfo,
72927
- hideDisplayDescription
72928
- }
72929
- ),
72930
- depositPoweredByFooter
72931
- ] })
72932
- ] }) : view === "exchange" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
72933
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72934
- DepositHeader,
72935
- {
72936
- title: payWithExchangeTitle,
72937
- showBack: exchangeView === "pending" || sessionOpenedFromMenu,
72938
- onBack: handleBack,
72939
- onClose: handleClose
72940
- }
72941
- ),
72942
- /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
72943
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72944
- PayWithExchange,
72945
- {
72946
- userId,
72947
- publishableKey,
72948
- exchanges,
72949
- view: exchangeView,
72950
- onViewChange: setExchangeView,
72951
- destinationTokenSymbol,
72952
- recipientAddress,
72953
- destinationChainType,
72954
- destinationChainId,
72955
- destinationTokenAddress,
72956
- onDepositSuccess: onDepositSuccessFor("pay_with_exchange"),
72957
- onDepositError: onDepositErrorFor("pay_with_exchange"),
72958
- wallets,
72959
- defaultToken: defaultToken ?? null
72960
- }
72961
- ),
72962
- depositPoweredByFooter
72963
- ] })
72964
- ] }) : view === "coinbase_connect" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
72965
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72966
- CoinbaseConnect,
72967
- {
72968
- publishableKey,
72969
- userId,
72970
- wallets,
72971
- recipientAddress,
72972
- destinationTokenAddress: destinationTokenAddress ?? "",
72973
- destinationChainId: destinationChainId ?? "",
72974
- destinationChainType: destinationChainType ?? "",
72975
- onDepositSuccess: onDepositSuccessFor("exchange_connect"),
72976
- onDepositError: onDepositErrorFor("exchange_connect"),
72977
- onTransferError: (error) => {
72978
- onDepositErrorFor("exchange_connect")?.({
72979
- message: error.message,
72980
- error
72981
- });
72982
- },
72983
- onBack: handleBack,
72984
- onClose: handleClose,
72985
- onDisconnect: handleExchangeDisconnect,
72986
- skipToHoldings: coinbaseSkipToHoldings,
72987
- canGoBack: sessionOpenedFromMenu,
72988
- onExecutionsChange: setDepositExecutions,
72989
- defaultSourceChainType,
72990
- defaultSourceChainId,
72991
- defaultSourceTokenAddress,
72992
- defaultSourceSymbol
72993
- }
72994
- ),
72995
- depositPoweredByFooter
72996
- ] }) : view === "wallet_connect" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
72997
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
72998
- WalletConnect,
72999
- {
73000
- walletInfo: browserWalletInfo ?? void 0,
73001
- depositWallet: browserWalletInfo?.depositWallet ?? void 0,
73002
- wallets,
73003
- userId,
73004
- publishableKey,
73005
- assetCdnUrl: projectConfig?.asset_cdn_url,
73006
- projectName: projectConfig?.project_name,
73007
- onError: (error) => {
73008
- onDepositErrorFor("wallet_connect")?.({
73009
- message: error.message,
73010
- error
73011
- });
73012
- },
73013
- onDepositSuccess: onDepositSuccessFor("wallet_connect"),
73014
- onDepositError: onDepositErrorFor("wallet_connect"),
73015
- amountQuickSelect: browserWalletAmountQuickSelect,
73016
- onWalletDisconnect: handleWalletDisconnect,
73017
- onWalletConnected: (info, dw) => {
73018
- setBrowserWalletInfo({ ...info, depositWallet: dw });
73019
- setStoredWalletState(info.type);
73020
- setBrowserWalletChainType(dw.chain_type === "solana" ? "solana" : "ethereum");
73021
- },
73022
- onBack: handleBack,
73023
- onClose: handleClose,
73024
- defaultSourceChainType,
73025
- defaultSourceChainId,
73026
- defaultSourceTokenAddress,
73027
- defaultSourceSymbol,
73028
- canGoBack: sessionOpenedFromMenu,
73029
- depositWalletsLoading: walletsLoading
73030
- }
73031
- ),
73032
- depositPoweredByFooter
73033
- ] }) : view === "bank_transfer" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73034
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73035
- DepositHeader,
73036
- {
73037
- title: t8.bankTransfer.title,
73038
- showBack: bankTransferView !== "providers" || sessionOpenedFromMenu,
73039
- onBack: handleBack,
73040
- onClose: handleClose
73041
- }
73042
- ),
73043
- /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73044
- 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)(
73045
- BankTransfer,
73046
- {
73047
- userId,
73048
- publishableKey,
73049
- view: bankTransferView,
73050
- onViewChange: setBankTransferView,
73051
- recipientAddress,
73052
- destinationChainType,
73053
- destinationChainId,
73054
- destinationTokenAddress,
73055
- destinationTokenSymbol,
73056
- wallets,
73057
- defaultToken: defaultToken ?? null,
73058
- assetCdnUrl: projectConfig?.asset_cdn_url,
73059
- onEvent,
73060
- onDepositSuccess,
73061
- onDepositError
73062
- }
73063
- ),
73064
- depositPoweredByFooter
73065
- ] })
73066
- ] }) : view === "stripe_link" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73067
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73068
- DepositHeader,
73069
- {
73070
- title: "Deposit with Link",
73071
- showBack: stripeLinkStep !== "checkout" && stripeLinkStep !== "success",
73072
- onBack: handleBack,
73073
- showClose: stripeLinkStep !== "checkout",
73074
- onClose: handleClose
73075
- }
73076
- ),
73077
- /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73078
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73079
- PayWithStripeLink,
73080
- {
73081
- userId,
73082
- publishableKey,
73083
- recipientAddress,
73084
- destinationChainType,
73085
- destinationChainId,
73086
- destinationTokenAddress,
73087
- wallets,
73088
- email: userEmail,
73089
- iconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/link.svg` : void 0,
73090
- step: stripeLinkStep,
73091
- onStepChange: setStripeLinkStep,
73092
- backHandlerRef: stripeLinkBackRef,
73093
- onDepositSuccess,
73094
- onDepositError
73095
- }
73096
- ),
73097
- depositPoweredByFooter
73098
- ] })
73099
- ] }) : view === "cashapp" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73100
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73101
- DepositHeader,
73102
- {
73103
- title: cashAppView !== "amount" && cashAppAmount ? `Pay $${cashAppAmount} via Cash App` : "Pay with Cash App",
73104
- showBack: cashAppView !== "amount" || sessionOpenedFromMenu,
73105
- onBack: handleBack,
73106
- onClose: handleClose
73107
- }
73108
- ),
73109
- /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73110
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73111
- PayWithCashApp,
73112
- {
73113
- userId,
73114
- publishableKey,
73115
- recipientAddress,
73116
- destinationChainType,
73117
- destinationChainId,
73118
- destinationTokenAddress,
73119
- cashAppIconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/cashapp.svg` : void 0,
73120
- view: cashAppView,
73121
- onViewChange: setCashAppView,
73122
- onAmountChange: setCashAppAmount,
73123
- onEvent,
73124
- onDepositSuccess: onDepositSuccessFor("cashapp"),
73125
- onDepositError: onDepositErrorFor("cashapp"),
73126
- wallets
73127
- }
73128
- ),
73129
- depositPoweredByFooter
73130
- ] })
73131
- ] }) : view === "apple_pay" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73132
- /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73133
- DepositHeader,
73134
- {
73135
- title: applePayHeaderTitle,
73136
- showBack: applePayShowBack,
73137
- onBack: () => {
73138
- const handled = applePayHandleRef.current?.requestBack() ?? false;
73139
- if (!handled) handleBack();
73140
- },
73141
- onClose: handleClose
73142
- }
73143
- ),
73144
- /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73145
- 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)(
73146
- BuyWithApplePay,
73147
- {
73148
- ref: applePayHandleRef,
73149
- userId,
73150
- publishableKey,
73151
- destinationChainType,
73152
- destinationChainId,
73153
- destinationTokenAddress,
73154
- userEmail,
73155
- wallets,
73156
- onViewChange: setApplePayView,
73157
- onEvent,
73158
- onDepositSuccess: onDepositSuccessFor("apple_pay"),
73159
- onDepositError: onDepositErrorFor("apple_pay"),
73160
- exitLabel: sessionOpenedFromMenu ? "Return" : "Close",
73161
- onExit: () => {
73162
- if (sessionOpenedFromMenu) {
73163
- setView("main");
73164
- } else {
73165
- handleClose();
73121
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73122
+ ThemeStyleInjector,
73123
+ {
73124
+ className: view === "wallet_connect" ? "uf-flex uf-min-h-0 uf-flex-col" : void 0,
73125
+ 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: [
73126
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73127
+ DepositHeader,
73128
+ {
73129
+ title: modalTitle || "Deposit",
73130
+ showClose: !hideOverlay,
73131
+ onClose: handleClose,
73132
+ showBalance: showBalanceHeader,
73133
+ balanceAddress: recipientAddress,
73134
+ balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
73135
+ balanceChainId: destinationChainId,
73136
+ balanceTokenAddress: destinationTokenAddress,
73137
+ projectName: projectConfig?.project_name,
73138
+ publishableKey
73139
+ }
73140
+ ) }),
73141
+ renderMainMenuBody(),
73142
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-flex-shrink-0", children: depositPoweredByFooter })
73143
+ ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73144
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73145
+ DepositHeader,
73146
+ {
73147
+ title: transferCryptoTitle,
73148
+ showBack: showBackTransfer,
73149
+ onBack: handleBack,
73150
+ onClose: handleClose,
73151
+ showBalance: showBalanceHeader,
73152
+ balanceAddress: recipientAddress,
73153
+ balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
73154
+ balanceChainId: destinationChainId,
73155
+ balanceTokenAddress: destinationTokenAddress,
73156
+ projectName: projectConfig?.project_name,
73157
+ publishableKey
73158
+ }
73159
+ ),
73160
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73161
+ 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)(
73162
+ TransferCryptoSingleInput,
73163
+ {
73164
+ userId,
73165
+ publishableKey,
73166
+ recipientAddress,
73167
+ destinationChainType,
73168
+ destinationChainId,
73169
+ destinationTokenAddress,
73170
+ defaultSourceChainType,
73171
+ defaultSourceChainId,
73172
+ defaultSourceTokenAddress,
73173
+ defaultSourceSymbol,
73174
+ prefilledAmountUsd: normalizedPrefilledAmountUsd,
73175
+ depositConfirmationMode,
73176
+ onExecutionsChange: setDepositExecutions,
73177
+ onDepositSuccess: onDepositSuccessFor("transfer"),
73178
+ onDepositError: onDepositErrorFor("transfer"),
73179
+ wallets
73180
+ }
73181
+ ) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73182
+ TransferCryptoDoubleInput,
73183
+ {
73184
+ userId,
73185
+ publishableKey,
73186
+ recipientAddress,
73187
+ destinationChainType,
73188
+ destinationChainId,
73189
+ destinationTokenAddress,
73190
+ defaultSourceChainType,
73191
+ defaultSourceChainId,
73192
+ defaultSourceTokenAddress,
73193
+ defaultSourceSymbol,
73194
+ prefilledAmountUsd: normalizedPrefilledAmountUsd,
73195
+ depositConfirmationMode,
73196
+ onExecutionsChange: setDepositExecutions,
73197
+ onDepositSuccess: onDepositSuccessFor("transfer"),
73198
+ onDepositError: onDepositErrorFor("transfer"),
73199
+ wallets
73166
73200
  }
73201
+ ),
73202
+ depositPoweredByFooter
73203
+ ] })
73204
+ ] }) : view === "tracker" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73205
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73206
+ DepositHeader,
73207
+ {
73208
+ title: selectedExecution ? "Deposit Details" : depositTrackerTitle,
73209
+ showBack: showBackTracker,
73210
+ onBack: handleBack,
73211
+ onClose: handleClose
73167
73212
  }
73168
- }
73169
- ),
73170
- depositPoweredByFooter
73171
- ] })
73172
- ] }) : null })
73213
+ ),
73214
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73215
+ /* @__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)(
73216
+ "div",
73217
+ {
73218
+ className: "uf-text-sm",
73219
+ style: {
73220
+ color: components.container.subtitleColor,
73221
+ fontFamily: fonts.regular
73222
+ },
73223
+ children: "No deposits yet"
73224
+ }
73225
+ ) }) : allExecutions.map((execution) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73226
+ DepositExecutionItem,
73227
+ {
73228
+ execution,
73229
+ onClick: () => setSelectedExecution(execution)
73230
+ },
73231
+ execution.id
73232
+ )) }) }),
73233
+ depositPoweredByFooter
73234
+ ] })
73235
+ ] }) : view === "card" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73236
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73237
+ DepositHeader,
73238
+ {
73239
+ title: cardView === "quotes" ? t8.quotes : depositWithCardTitle,
73240
+ showBack: showBackCard,
73241
+ onBack: handleBack,
73242
+ onClose: handleClose,
73243
+ badge: cardView === "quotes" ? { count: quotesCount } : void 0,
73244
+ showBalance: showBalanceHeader,
73245
+ balanceAddress: recipientAddress,
73246
+ balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
73247
+ balanceChainId: destinationChainId,
73248
+ balanceTokenAddress: destinationTokenAddress,
73249
+ projectName: projectConfig?.project_name,
73250
+ publishableKey
73251
+ }
73252
+ ),
73253
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73254
+ standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : !showFiatOnramp ? (
73255
+ // Fiat on-ramp resolved hidden/disabled after a direct open
73256
+ // (e.g. platform `is_hidden` for a Stripe Link-only project).
73257
+ // Show a geo-restriction screen rather than the card UI so the
73258
+ // hard-hide is honoured without a flash of "Pay with Card".
73259
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(GeoRestrictionScreen, { methodName: "Card" })
73260
+ ) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73261
+ BuyWithCard,
73262
+ {
73263
+ userId,
73264
+ publishableKey,
73265
+ view: cardView,
73266
+ onViewChange: handleCardViewChange,
73267
+ destinationTokenSymbol,
73268
+ recipientAddress,
73269
+ destinationChainType,
73270
+ destinationChainId,
73271
+ destinationTokenAddress,
73272
+ onDepositSuccess: onDepositSuccessFor("card"),
73273
+ onDepositError: onDepositErrorFor("card"),
73274
+ onEvent,
73275
+ themeClass,
73276
+ wallets,
73277
+ assetCdnUrl: projectConfig?.asset_cdn_url,
73278
+ hideDepositFlowInfo,
73279
+ hideDisplayDescription,
73280
+ prefilledAmountUsd: normalizedPrefilledAmountUsd
73281
+ }
73282
+ ),
73283
+ depositPoweredByFooter
73284
+ ] })
73285
+ ] }) : view === "exchange" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73286
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73287
+ DepositHeader,
73288
+ {
73289
+ title: payWithExchangeTitle,
73290
+ showBack: exchangeView === "pending" || sessionOpenedFromMenu,
73291
+ onBack: handleBack,
73292
+ onClose: handleClose
73293
+ }
73294
+ ),
73295
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73296
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73297
+ PayWithExchange,
73298
+ {
73299
+ userId,
73300
+ publishableKey,
73301
+ exchanges,
73302
+ view: exchangeView,
73303
+ onViewChange: setExchangeView,
73304
+ destinationTokenSymbol,
73305
+ recipientAddress,
73306
+ destinationChainType,
73307
+ destinationChainId,
73308
+ destinationTokenAddress,
73309
+ onDepositSuccess: onDepositSuccessFor("pay_with_exchange"),
73310
+ onDepositError: onDepositErrorFor("pay_with_exchange"),
73311
+ wallets,
73312
+ defaultToken: defaultToken ?? null
73313
+ }
73314
+ ),
73315
+ depositPoweredByFooter
73316
+ ] })
73317
+ ] }) : view === "coinbase_connect" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73318
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73319
+ CoinbaseConnect,
73320
+ {
73321
+ publishableKey,
73322
+ userId,
73323
+ wallets,
73324
+ recipientAddress,
73325
+ destinationTokenAddress: destinationTokenAddress ?? "",
73326
+ destinationChainId: destinationChainId ?? "",
73327
+ destinationChainType: destinationChainType ?? "",
73328
+ onDepositSuccess: onDepositSuccessFor("exchange_connect"),
73329
+ onDepositError: onDepositErrorFor("exchange_connect"),
73330
+ onTransferError: (error) => {
73331
+ onDepositErrorFor("exchange_connect")?.({
73332
+ message: error.message,
73333
+ error
73334
+ });
73335
+ },
73336
+ onBack: handleBack,
73337
+ onClose: handleClose,
73338
+ onDisconnect: handleExchangeDisconnect,
73339
+ skipToHoldings: coinbaseSkipToHoldings,
73340
+ canGoBack: sessionOpenedFromMenu,
73341
+ onExecutionsChange: setDepositExecutions,
73342
+ defaultSourceChainType,
73343
+ defaultSourceChainId,
73344
+ defaultSourceTokenAddress,
73345
+ defaultSourceSymbol,
73346
+ prefilledAmountUsd: normalizedPrefilledAmountUsd
73347
+ }
73348
+ ),
73349
+ depositPoweredByFooter
73350
+ ] }) : view === "wallet_connect" ? (
73351
+ // Mobile: flex-fill the full-height dialog body so the wallet list
73352
+ // can grow and scroll, with the footer pinned to the bottom.
73353
+ // Desktop (sm:): stays content-sized.
73354
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
73355
+ "div",
73356
+ {
73357
+ className: "uf-flex uf-flex-col uf-gap-1.5 uf-min-h-0 uf-flex-1 sm:uf-flex-none",
73358
+ children: [
73359
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73360
+ WalletConnect,
73361
+ {
73362
+ walletInfo: browserWalletInfo ?? void 0,
73363
+ depositWallet: browserWalletInfo?.depositWallet ?? void 0,
73364
+ wallets,
73365
+ userId,
73366
+ publishableKey,
73367
+ assetCdnUrl: projectConfig?.asset_cdn_url,
73368
+ projectName: projectConfig?.project_name,
73369
+ onError: (error) => {
73370
+ onDepositErrorFor("wallet_connect")?.({
73371
+ message: error.message,
73372
+ error
73373
+ });
73374
+ },
73375
+ onDepositSuccess: onDepositSuccessFor("wallet_connect"),
73376
+ onDepositError: onDepositErrorFor("wallet_connect"),
73377
+ amountQuickSelect: browserWalletAmountQuickSelect,
73378
+ prefilledAmountUsd: normalizedPrefilledAmountUsd,
73379
+ onWalletDisconnect: handleWalletDisconnect,
73380
+ onWalletConnected: (info, dw) => {
73381
+ setBrowserWalletInfo({ ...info, depositWallet: dw });
73382
+ setStoredWalletState(info.type);
73383
+ setBrowserWalletChainType(dw.chain_type === "solana" ? "solana" : "ethereum");
73384
+ },
73385
+ onBack: handleBack,
73386
+ onClose: handleClose,
73387
+ defaultSourceChainType,
73388
+ defaultSourceChainId,
73389
+ defaultSourceTokenAddress,
73390
+ defaultSourceSymbol,
73391
+ canGoBack: sessionOpenedFromMenu,
73392
+ depositWalletsLoading: walletsLoading
73393
+ }
73394
+ ),
73395
+ depositPoweredByFooter
73396
+ ]
73397
+ }
73398
+ )
73399
+ ) : view === "bank_transfer" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73400
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73401
+ DepositHeader,
73402
+ {
73403
+ title: t8.bankTransfer.title,
73404
+ showBack: bankTransferView !== "providers" || sessionOpenedFromMenu,
73405
+ onBack: handleBack,
73406
+ onClose: handleClose
73407
+ }
73408
+ ),
73409
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73410
+ 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)(
73411
+ BankTransfer,
73412
+ {
73413
+ userId,
73414
+ publishableKey,
73415
+ view: bankTransferView,
73416
+ onViewChange: setBankTransferView,
73417
+ recipientAddress,
73418
+ destinationChainType,
73419
+ destinationChainId,
73420
+ destinationTokenAddress,
73421
+ destinationTokenSymbol,
73422
+ wallets,
73423
+ defaultToken: defaultToken ?? null,
73424
+ assetCdnUrl: projectConfig?.asset_cdn_url,
73425
+ onEvent,
73426
+ onDepositSuccess,
73427
+ onDepositError,
73428
+ prefilledAmountUsd: normalizedPrefilledAmountUsd
73429
+ }
73430
+ ),
73431
+ depositPoweredByFooter
73432
+ ] })
73433
+ ] }) : view === "stripe_link" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73434
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73435
+ DepositHeader,
73436
+ {
73437
+ title: "Deposit with Link",
73438
+ showBack: stripeLinkStep !== "checkout" && stripeLinkStep !== "success",
73439
+ onBack: handleBack,
73440
+ showClose: stripeLinkStep !== "checkout" && stripeLinkStep !== "auth",
73441
+ onClose: handleClose
73442
+ }
73443
+ ),
73444
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73445
+ isLoadingIp ? (
73446
+ // Hold the geo decision until IP resolves so we don't mount
73447
+ // PayWithStripeLink (which kicks off config/OAuth work) for a
73448
+ // deep-link user who turns out to be outside the US.
73449
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(SkeletonButton, { variant: "with-icons" })
73450
+ ) : !showStripeLink ? (
73451
+ // Stripe Link's crypto on-ramp is US-only. On a direct open
73452
+ // (initialScreen="stripe_link") the row isn't in a menu to
73453
+ // fall back to, so show a geo-restriction screen rather than
73454
+ // the Link UI.
73455
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73456
+ GeoRestrictionScreen,
73457
+ {
73458
+ methodName: t8.stripeLink.title,
73459
+ message: "Pay with Link is only available in the US."
73460
+ }
73461
+ )
73462
+ ) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73463
+ PayWithStripeLink,
73464
+ {
73465
+ userId,
73466
+ publishableKey,
73467
+ recipientAddress,
73468
+ destinationChainType,
73469
+ destinationChainId,
73470
+ destinationTokenAddress,
73471
+ countryCode: userIpInfo?.alpha2,
73472
+ subdivisionCode: userIpInfo?.subdivisionCode ?? void 0,
73473
+ wallets,
73474
+ email: userEmail,
73475
+ iconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/link.svg` : void 0,
73476
+ step: stripeLinkStep,
73477
+ onStepChange: setStripeLinkStep,
73478
+ backHandlerRef: stripeLinkBackRef,
73479
+ onDepositSuccess,
73480
+ onDepositError
73481
+ }
73482
+ ),
73483
+ depositPoweredByFooter
73484
+ ] })
73485
+ ] }) : view === "cashapp" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73486
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73487
+ DepositHeader,
73488
+ {
73489
+ title: cashAppView !== "amount" && cashAppAmount ? `Pay $${cashAppAmount} via Cash App` : "Pay with Cash App",
73490
+ showBack: cashAppView !== "amount" || sessionOpenedFromMenu,
73491
+ onBack: handleBack,
73492
+ onClose: handleClose
73493
+ }
73494
+ ),
73495
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73496
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73497
+ PayWithCashApp,
73498
+ {
73499
+ userId,
73500
+ publishableKey,
73501
+ recipientAddress,
73502
+ destinationChainType,
73503
+ destinationChainId,
73504
+ destinationTokenAddress,
73505
+ cashAppIconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/cashapp.svg` : void 0,
73506
+ view: cashAppView,
73507
+ onViewChange: setCashAppView,
73508
+ onAmountChange: setCashAppAmount,
73509
+ onEvent,
73510
+ onDepositSuccess: onDepositSuccessFor("cashapp"),
73511
+ onDepositError: onDepositErrorFor("cashapp"),
73512
+ prefilledAmountUsd: normalizedPrefilledAmountUsd,
73513
+ wallets
73514
+ }
73515
+ ),
73516
+ depositPoweredByFooter
73517
+ ] })
73518
+ ] }) : view === "apple_pay" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
73519
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
73520
+ DepositHeader,
73521
+ {
73522
+ title: applePayHeaderTitle,
73523
+ showBack: applePayShowBack,
73524
+ onBack: () => {
73525
+ const handled = applePayHandleRef.current?.requestBack() ?? false;
73526
+ if (!handled) handleBack();
73527
+ },
73528
+ onClose: handleClose
73529
+ }
73530
+ ),
73531
+ /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73532
+ 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)(
73533
+ BuyWithApplePay,
73534
+ {
73535
+ ref: applePayHandleRef,
73536
+ userId,
73537
+ publishableKey,
73538
+ destinationChainType,
73539
+ destinationChainId,
73540
+ destinationTokenAddress,
73541
+ userEmail,
73542
+ wallets,
73543
+ onViewChange: setApplePayView,
73544
+ onEvent,
73545
+ onDepositSuccess: onDepositSuccessFor("apple_pay"),
73546
+ onDepositError: onDepositErrorFor("apple_pay"),
73547
+ exitLabel: sessionOpenedFromMenu ? "Return" : "Close",
73548
+ onExit: () => {
73549
+ if (sessionOpenedFromMenu) {
73550
+ setView("main");
73551
+ } else {
73552
+ handleClose();
73553
+ }
73554
+ }
73555
+ }
73556
+ ),
73557
+ depositPoweredByFooter
73558
+ ] })
73559
+ ] }) : null
73560
+ }
73561
+ )
73173
73562
  ]
73174
73563
  }
73175
73564
  )
@@ -73608,253 +73997,275 @@ function CheckoutModal({
73608
73997
  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)(
73609
73998
  DialogContent2,
73610
73999
  {
73611
- 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}`,
74000
+ 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
74001
+ // grid whose single auto row only grows to fill free space and never
74002
+ // shrinks below content, so a long wallet list would balloon the row
74003
+ // past the viewport and push the footer off-screen. Clamp the row to
74004
+ // the modal height with minmax(0,1fr) so the inner overflow-y-auto list
74005
+ // scrolls with the footer pinned. Reset to content-sized on desktop.
74006
+ view === "wallet_connect" ? "[grid-template-rows:minmax(0,1fr)] sm:[grid-template-rows:none]" : ""} ${themeClass}`,
73612
74007
  style: { backgroundColor: colors2.background },
73613
74008
  onPointerDownOutside: (e) => e.preventDefault(),
73614
74009
  onInteractOutside: (e) => e.preventDefault(),
73615
- children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
73616
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(DepositHeader, { title: modalTitle || "Checkout", showClose: true, onClose: handleClose }),
73617
- /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73618
- piLoading ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-space-y-3", children: [
73619
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73620
- "div",
73621
- {
73622
- className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
73623
- style: {
73624
- backgroundColor: components.card.backgroundColor,
73625
- borderRadius: components.card.borderRadius,
73626
- border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
73627
- },
73628
- children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
73629
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73630
- "div",
74010
+ children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74011
+ ThemeStyleInjector,
74012
+ {
74013
+ className: view === "wallet_connect" ? "uf-flex uf-min-h-0 uf-flex-col" : void 0,
74014
+ children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
74015
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(DepositHeader, { title: modalTitle || "Checkout", showClose: true, onClose: handleClose }),
74016
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
74017
+ piLoading ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-space-y-3", children: [
74018
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74019
+ "div",
74020
+ {
74021
+ className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
74022
+ style: {
74023
+ backgroundColor: components.card.backgroundColor,
74024
+ borderRadius: components.card.borderRadius,
74025
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
74026
+ },
74027
+ children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
74028
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74029
+ "div",
74030
+ {
74031
+ className: "uf-h-8 uf-w-24 uf-rounded",
74032
+ style: {
74033
+ backgroundColor: components.card.borderColor
74034
+ }
74035
+ }
74036
+ ),
74037
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74038
+ "div",
74039
+ {
74040
+ className: "uf-h-4 uf-w-16 uf-rounded",
74041
+ style: {
74042
+ backgroundColor: components.card.borderColor
74043
+ }
74044
+ }
74045
+ )
74046
+ ] })
74047
+ }
74048
+ ),
74049
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SkeletonButton2, {}),
74050
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SkeletonButton2, {})
74051
+ ] }) : 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: [
74052
+ /* @__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" }) }),
74053
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74054
+ "h3",
74055
+ {
74056
+ className: "uf-text-lg uf-font-semibold uf-mb-2",
74057
+ style: {
74058
+ color: colors2.foreground,
74059
+ fontFamily: fonts.semibold
74060
+ },
74061
+ children: "Unable to Load Checkout"
74062
+ }
74063
+ ),
74064
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74065
+ "p",
74066
+ {
74067
+ className: "uf-text-sm uf-max-w-[280px]",
74068
+ style: {
74069
+ color: colors2.foregroundMuted,
74070
+ fontFamily: fonts.regular
74071
+ },
74072
+ children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
74073
+ }
74074
+ )
74075
+ ] }) : paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-space-y-3", children: [
74076
+ progressSection,
74077
+ (paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
74078
+ showTransferCrypto && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74079
+ TransferCryptoButton,
73631
74080
  {
73632
- className: "uf-h-8 uf-w-24 uf-rounded",
73633
- style: {
73634
- backgroundColor: components.card.borderColor
73635
- }
74081
+ onClick: () => {
74082
+ lastCheckoutMethodRef.current = "transfer";
74083
+ setView("transfer");
74084
+ },
74085
+ title: i18n2.checkoutModal.transferCrypto.title,
74086
+ subtitle: i18n2.checkoutModal.transferCrypto.subtitle,
74087
+ featuredTokens: projectConfig?.transfer_crypto.networks
73636
74088
  }
73637
74089
  ),
73638
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73639
- "div",
74090
+ showConnectWallet && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74091
+ BrowserWalletButton,
73640
74092
  {
73641
- className: "uf-h-4 uf-w-16 uf-rounded",
73642
- style: {
73643
- backgroundColor: components.card.borderColor
73644
- }
74093
+ onClick: handleBrowserWalletClick,
74094
+ onConnectClick: handleWalletConnectClick,
74095
+ onDisconnect: handleWalletDisconnect,
74096
+ chainType: browserWalletChainType,
74097
+ publishableKey,
74098
+ featuredWallets: projectConfig?.connect_wallet?.wallets,
74099
+ subtitle: i18n2.checkoutModal.browserWallet.subtitle
73645
74100
  }
73646
74101
  )
73647
74102
  ] })
73648
- }
73649
- ),
73650
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SkeletonButton2, {}),
73651
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SkeletonButton2, {})
73652
- ] }) : 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: [
73653
- /* @__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" }) }),
74103
+ ] }) : null,
74104
+ poweredByFooter
74105
+ ] })
74106
+ ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
73654
74107
  /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73655
- "h3",
74108
+ DepositHeader,
73656
74109
  {
73657
- className: "uf-text-lg uf-font-semibold uf-mb-2",
73658
- style: {
73659
- color: colors2.foreground,
73660
- fontFamily: fonts.semibold
73661
- },
73662
- children: "Unable to Load Checkout"
74110
+ title: modalTitle || "Checkout",
74111
+ showBack: true,
74112
+ onBack: handleBack,
74113
+ onClose: handleClose
73663
74114
  }
73664
74115
  ),
73665
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73666
- "p",
73667
- {
73668
- className: "uf-text-sm uf-max-w-[280px]",
73669
- style: {
73670
- color: colors2.foregroundMuted,
73671
- fontFamily: fonts.regular
73672
- },
73673
- children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
73674
- }
73675
- )
73676
- ] }) : paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-space-y-3", children: [
73677
- progressSection,
73678
- (paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
73679
- showTransferCrypto && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73680
- TransferCryptoButton,
73681
- {
73682
- onClick: () => {
73683
- lastCheckoutMethodRef.current = "transfer";
73684
- setView("transfer");
73685
- },
73686
- title: i18n2.checkoutModal.transferCrypto.title,
73687
- subtitle: i18n2.checkoutModal.transferCrypto.subtitle,
73688
- featuredTokens: projectConfig?.transfer_crypto.networks
73689
- }
73690
- ),
73691
- showConnectWallet && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73692
- BrowserWalletButton,
73693
- {
73694
- onClick: handleBrowserWalletClick,
73695
- onConnectClick: handleWalletConnectClick,
73696
- onDisconnect: handleWalletDisconnect,
73697
- chainType: browserWalletChainType,
73698
- publishableKey,
73699
- featuredWallets: projectConfig?.connect_wallet?.wallets,
73700
- subtitle: i18n2.checkoutModal.browserWallet.subtitle
73701
- }
73702
- )
73703
- ] })
73704
- ] }) : null,
73705
- poweredByFooter
73706
- ] })
73707
- ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
73708
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73709
- DepositHeader,
73710
- {
73711
- title: modalTitle || "Checkout",
73712
- showBack: true,
73713
- onBack: handleBack,
73714
- onClose: handleClose
73715
- }
73716
- ),
73717
- /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73718
- paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
73719
- (() => {
73720
- const receivedUsd = parseFloat(
73721
- paymentIntent.destination_amount_received_usd || paymentIntent.amount_received_usd
73722
- );
73723
- const totalUsd = parseFloat(
73724
- paymentIntent.destination_amount_usd || paymentIntent.amount_usd
73725
- );
73726
- const pct = totalUsd > 0 ? Math.min(receivedUsd / totalUsd * 100, 100) : 0;
73727
- return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-space-y-2", children: [
73728
- /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between", children: [
73729
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73730
- "span",
73731
- {
73732
- className: "uf-text-xs",
73733
- style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
73734
- children: "Received"
73735
- }
73736
- ),
73737
- /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
73738
- "span",
73739
- {
73740
- className: "uf-text-xs",
73741
- style: { color: colors2.foreground, fontFamily: fonts.medium },
73742
- children: [
73743
- "$",
73744
- receivedUsd.toFixed(2),
73745
- " / $",
73746
- totalUsd.toFixed(2)
73747
- ]
73748
- }
73749
- )
73750
- ] }),
73751
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73752
- "div",
73753
- {
73754
- className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
73755
- style: { backgroundColor: colors2.border },
73756
- children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74116
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
74117
+ paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
74118
+ (() => {
74119
+ const receivedUsd = parseFloat(
74120
+ paymentIntent.destination_amount_received_usd || paymentIntent.amount_received_usd
74121
+ );
74122
+ const totalUsd = parseFloat(
74123
+ paymentIntent.destination_amount_usd || paymentIntent.amount_usd
74124
+ );
74125
+ const pct = totalUsd > 0 ? Math.min(receivedUsd / totalUsd * 100, 100) : 0;
74126
+ return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-space-y-2", children: [
74127
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between", children: [
74128
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74129
+ "span",
74130
+ {
74131
+ className: "uf-text-xs",
74132
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
74133
+ children: "Received"
74134
+ }
74135
+ ),
74136
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
74137
+ "span",
74138
+ {
74139
+ className: "uf-text-xs",
74140
+ style: { color: colors2.foreground, fontFamily: fonts.medium },
74141
+ children: [
74142
+ "$",
74143
+ receivedUsd.toFixed(2),
74144
+ " / $",
74145
+ totalUsd.toFixed(2)
74146
+ ]
74147
+ }
74148
+ )
74149
+ ] }),
74150
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73757
74151
  "div",
73758
74152
  {
73759
- className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
73760
- style: {
73761
- width: `${pct}%`,
73762
- backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
73763
- }
74153
+ className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
74154
+ style: { backgroundColor: colors2.border },
74155
+ children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74156
+ "div",
74157
+ {
74158
+ className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
74159
+ style: {
74160
+ width: `${pct}%`,
74161
+ backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
74162
+ }
74163
+ }
74164
+ )
73764
74165
  }
73765
74166
  )
74167
+ ] });
74168
+ })(),
74169
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74170
+ TransferCryptoSingleInput,
74171
+ {
74172
+ userId: paymentIntent.user_id || "",
74173
+ publishableKey,
74174
+ clientSecret,
74175
+ recipientAddress: paymentIntent.recipient_address,
74176
+ destinationChainType: paymentIntent.destination_chain_type,
74177
+ destinationChainId: paymentIntent.destination_chain_id,
74178
+ destinationTokenAddress: paymentIntent.destination_token_address,
74179
+ defaultSourceChainType,
74180
+ defaultSourceChainId,
74181
+ defaultSourceTokenAddress,
74182
+ defaultSourceSymbol,
74183
+ depositConfirmationMode: "auto_ui",
74184
+ wallets,
74185
+ onSourceTokenChange: setSelectedSource,
74186
+ persistCheckingIndicator: true,
74187
+ productType: "payment",
74188
+ checkoutQuote: effectiveCheckoutQuote,
74189
+ isCheckoutQuoteLoading: isQuoteLoading || isQuoteFetching
73766
74190
  }
73767
74191
  )
73768
- ] });
73769
- })(),
73770
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73771
- TransferCryptoSingleInput,
74192
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SkeletonButton2, {}),
74193
+ poweredByFooter
74194
+ ] })
74195
+ ] }) : view === "wallet_connect" && paymentIntent ? (
74196
+ // Mobile: flex-fill the full-height sheet so the wallet list grows and
74197
+ // scrolls with the footer pinned. Desktop (sm:): content-sized.
74198
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
74199
+ "div",
73772
74200
  {
73773
- userId: paymentIntent.user_id || "",
73774
- publishableKey,
73775
- clientSecret,
73776
- recipientAddress: paymentIntent.recipient_address,
73777
- destinationChainType: paymentIntent.destination_chain_type,
73778
- destinationChainId: paymentIntent.destination_chain_id,
73779
- destinationTokenAddress: paymentIntent.destination_token_address,
73780
- defaultSourceChainType,
73781
- defaultSourceChainId,
73782
- defaultSourceTokenAddress,
73783
- defaultSourceSymbol,
73784
- depositConfirmationMode: "auto_ui",
73785
- wallets,
73786
- onSourceTokenChange: setSelectedSource,
73787
- persistCheckingIndicator: true,
73788
- productType: "payment",
73789
- checkoutQuote: effectiveCheckoutQuote,
73790
- isCheckoutQuoteLoading: isQuoteLoading || isQuoteFetching
74201
+ className: "uf-flex uf-flex-col uf-gap-1.5 uf-min-h-0 uf-flex-1 sm:uf-flex-none",
74202
+ children: [
74203
+ /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
74204
+ WalletConnect,
74205
+ {
74206
+ walletInfo: browserWalletInfo ?? void 0,
74207
+ depositWallet: browserWalletInfo?.depositWallet ?? void 0,
74208
+ wallets,
74209
+ userId: paymentIntent.user_id || "",
74210
+ publishableKey,
74211
+ clientSecret,
74212
+ prefilledAmountUsd: remainingAmountUsd,
74213
+ checkoutAmountUsd: paymentIntent.amount_usd,
74214
+ checkoutReceivedUsd: paymentIntent.amount_received_usd,
74215
+ checkoutDestination: {
74216
+ chainType: paymentIntent.destination_chain_type,
74217
+ chainId: paymentIntent.destination_chain_id,
74218
+ tokenAddress: paymentIntent.destination_token_address,
74219
+ decimals: paymentIntent.destination_token_decimals ?? 6
74220
+ },
74221
+ productType: "payment",
74222
+ stablecoinParity: paymentIntent.stablecoin_parity ?? false,
74223
+ checkoutRemainingBaseUnits: (() => {
74224
+ const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
74225
+ return remaining > 0n ? remaining.toString() : "0";
74226
+ })(),
74227
+ onSuccess: (_txHash) => {
74228
+ emitCheckoutSuccess(
74229
+ {
74230
+ paymentIntentId: paymentIntent.id,
74231
+ status: "processing",
74232
+ paymentIntent
74233
+ },
74234
+ "wallet_connect"
74235
+ );
74236
+ },
74237
+ onError: (error) => {
74238
+ onCheckoutError?.({
74239
+ message: error.message,
74240
+ error,
74241
+ method: "wallet_connect"
74242
+ });
74243
+ },
74244
+ onWalletDisconnect: handleWalletDisconnect,
74245
+ onWalletConnected: (info, dw) => {
74246
+ setBrowserWalletInfo({ ...info, depositWallet: dw });
74247
+ setStoredWalletState(info.type);
74248
+ setBrowserWalletChainType(dw.chain_type === "solana" ? "solana" : "ethereum");
74249
+ lastCheckoutMethodRef.current = "wallet_connect";
74250
+ },
74251
+ onNewDeposit: () => setView("main"),
74252
+ onDone: () => setView("main"),
74253
+ paymentIntentStatus: paymentIntent.status,
74254
+ onBack: handleBack,
74255
+ onClose: handleClose,
74256
+ defaultSourceChainType,
74257
+ defaultSourceChainId,
74258
+ defaultSourceTokenAddress,
74259
+ defaultSourceSymbol
74260
+ }
74261
+ ),
74262
+ poweredByFooter
74263
+ ]
73791
74264
  }
73792
74265
  )
73793
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SkeletonButton2, {}),
73794
- poweredByFooter
73795
- ] })
73796
- ] }) : view === "wallet_connect" && paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
73797
- /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
73798
- WalletConnect,
73799
- {
73800
- walletInfo: browserWalletInfo ?? void 0,
73801
- depositWallet: browserWalletInfo?.depositWallet ?? void 0,
73802
- wallets,
73803
- userId: paymentIntent.user_id || "",
73804
- publishableKey,
73805
- clientSecret,
73806
- prefillAmountUsd: remainingAmountUsd,
73807
- checkoutAmountUsd: paymentIntent.amount_usd,
73808
- checkoutReceivedUsd: paymentIntent.amount_received_usd,
73809
- checkoutDestination: {
73810
- chainType: paymentIntent.destination_chain_type,
73811
- chainId: paymentIntent.destination_chain_id,
73812
- tokenAddress: paymentIntent.destination_token_address,
73813
- decimals: paymentIntent.destination_token_decimals ?? 6
73814
- },
73815
- productType: "payment",
73816
- stablecoinParity: paymentIntent.stablecoin_parity ?? false,
73817
- checkoutRemainingBaseUnits: (() => {
73818
- const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
73819
- return remaining > 0n ? remaining.toString() : "0";
73820
- })(),
73821
- onSuccess: (_txHash) => {
73822
- emitCheckoutSuccess(
73823
- {
73824
- paymentIntentId: paymentIntent.id,
73825
- status: "processing",
73826
- paymentIntent
73827
- },
73828
- "wallet_connect"
73829
- );
73830
- },
73831
- onError: (error) => {
73832
- onCheckoutError?.({
73833
- message: error.message,
73834
- error,
73835
- method: "wallet_connect"
73836
- });
73837
- },
73838
- onWalletDisconnect: handleWalletDisconnect,
73839
- onWalletConnected: (info, dw) => {
73840
- setBrowserWalletInfo({ ...info, depositWallet: dw });
73841
- setStoredWalletState(info.type);
73842
- setBrowserWalletChainType(dw.chain_type === "solana" ? "solana" : "ethereum");
73843
- lastCheckoutMethodRef.current = "wallet_connect";
73844
- },
73845
- onNewDeposit: () => setView("main"),
73846
- onDone: () => setView("main"),
73847
- paymentIntentStatus: paymentIntent.status,
73848
- onBack: handleBack,
73849
- onClose: handleClose,
73850
- defaultSourceChainType,
73851
- defaultSourceChainId,
73852
- defaultSourceTokenAddress,
73853
- defaultSourceSymbol
73854
- }
73855
- ),
73856
- poweredByFooter
73857
- ] }) : null })
74266
+ ) : null
74267
+ }
74268
+ )
73858
74269
  }
73859
74270
  ) }) });
73860
74271
  }
@@ -76161,6 +76572,7 @@ function UnifoldProvider2({
76161
76572
  defaultSourceChainId: depositConfig.defaultSourceChainId,
76162
76573
  defaultSourceTokenAddress: depositConfig.defaultSourceTokenAddress,
76163
76574
  defaultSourceSymbol: depositConfig.defaultSourceSymbol,
76575
+ prefilledAmountUsd: depositConfig.prefilledAmountUsd,
76164
76576
  userEmail: depositConfig.user?.email,
76165
76577
  depositConfirmationMode: depositConfig.depositConfirmationMode ?? "auto_ui",
76166
76578
  hideDepositTracker: config?.hideDepositTracker,