@funkit/connect 5.5.0 → 5.5.2

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.
Files changed (60) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/components/Dropdown/ReceiveTokenDropdown.d.ts +2 -1
  3. package/dist/components/MeldQuoteItem/MeldQuoteItem.d.ts +1 -1
  4. package/dist/components/SourceMeldQuoteItem/SourceMeldQuoteItem.d.ts +2 -1
  5. package/dist/components/Tabs/Tabs.d.ts +2 -2
  6. package/dist/components/Tabs/tabs.css.d.ts +1 -0
  7. package/dist/components/VirtualFiatAccount/AccountDetailsTab/AccountDetailsTab.d.ts +9 -0
  8. package/dist/domains/asset.d.ts +3 -1
  9. package/dist/domains/clientMetadata.d.ts +1 -1
  10. package/dist/domains/fees.d.ts +1 -1
  11. package/dist/domains/quote.d.ts +1 -1
  12. package/dist/hooks/queries/useMeldLimits.d.ts +6 -1
  13. package/dist/hooks/useAnimatedNavigation.d.ts +1 -1
  14. package/dist/hooks/useCheckoutDirectExecution.d.ts +2 -1
  15. package/dist/index.css +10 -1
  16. package/dist/index.js +821 -705
  17. package/dist/modals/CheckoutModal/useNewCheckoutQuote.d.ts +1 -1
  18. package/dist/providers/FunkitCheckoutContext.d.ts +2 -1
  19. package/dist/providers/FunkitConfigContext.d.ts +2 -0
  20. package/dist/utils/checkout.d.ts +2 -1
  21. package/dist/utils/flags/config.d.ts +20 -0
  22. package/dist/utils/purifyCheckoutHistoryItem.d.ts +2 -1
  23. package/dist/wallets/walletConnectors/bifrostWallet/bifrostWallet.js +2 -2
  24. package/dist/wallets/walletConnectors/bitgetWallet/bitgetWallet.js +2 -2
  25. package/dist/wallets/walletConnectors/bybitWallet/bybitWallet.js +2 -2
  26. package/dist/wallets/walletConnectors/clvWallet/clvWallet.js +2 -2
  27. package/dist/wallets/walletConnectors/coin98Wallet/coin98Wallet.js +2 -2
  28. package/dist/wallets/walletConnectors/coreWallet/coreWallet.js +2 -2
  29. package/dist/wallets/walletConnectors/foxWallet/foxWallet.js +2 -2
  30. package/dist/wallets/walletConnectors/frontierWallet/frontierWallet.js +2 -2
  31. package/dist/wallets/walletConnectors/gateWallet/gateWallet.js +2 -2
  32. package/dist/wallets/walletConnectors/index.js +50 -50
  33. package/dist/wallets/walletConnectors/metaMaskWallet/metaMaskWallet.js +2 -2
  34. package/dist/wallets/walletConnectors/okxWallet/okxWallet.js +2 -2
  35. package/dist/wallets/walletConnectors/rainbowWallet/rainbowWallet.js +2 -2
  36. package/dist/wallets/walletConnectors/roninWallet/roninWallet.js +2 -2
  37. package/dist/wallets/walletConnectors/safepalWallet/safepalWallet.js +2 -2
  38. package/dist/wallets/walletConnectors/subWallet/subWallet.js +2 -2
  39. package/dist/wallets/walletConnectors/tokenPocketWallet/tokenPocketWallet.js +2 -2
  40. package/dist/wallets/walletConnectors/trustWallet/trustWallet.js +2 -2
  41. package/dist/wallets/walletConnectors/zerionWallet/zerionWallet.js +2 -2
  42. package/package.json +6 -6
  43. package/dist/wallets/walletConnectors/chunk-25VW5TZP.js +0 -92
  44. package/dist/wallets/walletConnectors/chunk-3NC26XLM.js +0 -92
  45. package/dist/wallets/walletConnectors/chunk-3U3BMEH5.js +0 -94
  46. package/dist/wallets/walletConnectors/chunk-4UM4GTKZ.js +0 -103
  47. package/dist/wallets/walletConnectors/chunk-545L7Y4M.js +0 -69
  48. package/dist/wallets/walletConnectors/chunk-6LPM6LUQ.js +0 -110
  49. package/dist/wallets/walletConnectors/chunk-7GSNBOD3.js +0 -99
  50. package/dist/wallets/walletConnectors/chunk-ETTNDQQG.js +0 -100
  51. package/dist/wallets/walletConnectors/chunk-FRGSRLTS.js +0 -93
  52. package/dist/wallets/walletConnectors/chunk-HKV7EMYZ.js +0 -96
  53. package/dist/wallets/walletConnectors/chunk-IPOC2VJX.js +0 -106
  54. package/dist/wallets/walletConnectors/chunk-JXP2QPW7.js +0 -95
  55. package/dist/wallets/walletConnectors/chunk-KFFJPS5R.js +0 -96
  56. package/dist/wallets/walletConnectors/chunk-LEXSM5KI.js +0 -87
  57. package/dist/wallets/walletConnectors/chunk-MOOBCMMB.js +0 -70
  58. package/dist/wallets/walletConnectors/chunk-N2NIIUW6.js +0 -146
  59. package/dist/wallets/walletConnectors/chunk-W5O4YSZN.js +0 -98
  60. package/dist/wallets/walletConnectors/chunk-XYBEMO3C.js +0 -66
package/dist/index.js CHANGED
@@ -400,7 +400,7 @@ function Avatar({ address, imageUrl, loading, size }) {
400
400
  }
401
401
 
402
402
  // src/components/ConnectButton/ConnectButton.tsx
403
- import React257, { useEffect as useEffect50, useState as useState70 } from "react";
403
+ import React258, { useEffect as useEffect50, useState as useState70 } from "react";
404
404
 
405
405
  // src/css/touchableStyles.css.ts
406
406
  var active = { shrink: "_7rkubb8", shrinkSm: "_7rkubb9" };
@@ -504,7 +504,7 @@ import PrivyJS, {
504
504
  getUserEmbeddedWallet,
505
505
  LocalStorage
506
506
  } from "@privy-io/js-sdk-core";
507
- import React254, {
507
+ import React255, {
508
508
  createContext as createContext18,
509
509
  useCallback as useCallback47,
510
510
  useContext as useContext18,
@@ -744,6 +744,9 @@ var DEFAULT_TEXT_CUSTOMIZATIONS = {
744
744
  sourceMethodTitle: "Your source",
745
745
  tokensListTitle: "Your tokens",
746
746
  transferTokens: "Transfer Crypto",
747
+ receiveDropdownTitle: "",
748
+ // Default to empty
749
+ receiveDropdownLabel: "Asset to Receive",
747
750
  confirmationScreen: {
748
751
  payAmountLabel: "You send",
749
752
  receiveAmountLabel: "You receive"
@@ -1023,7 +1026,7 @@ var useFunkitConnectChainsById = () => groupChainsById(useFunkitConnectChains())
1023
1026
  var useInitialChainId = () => useContext4(FunkitConnectChainContext).initialChainId;
1024
1027
 
1025
1028
  // src/providers/ModalContext.tsx
1026
- import React253, {
1029
+ import React254, {
1027
1030
  createContext as createContext17,
1028
1031
  useCallback as useCallback46,
1029
1032
  useContext as useContext17,
@@ -1046,7 +1049,7 @@ var topbarFadeWrapper = "_1r8f578";
1046
1049
  var topbarOverflowContent = "_1r8f577 _1rsrm2fd1 _1rsrm2fds";
1047
1050
 
1048
1051
  // src/modals/AccountModal/AccountModal.tsx
1049
- import React237 from "react";
1052
+ import React238 from "react";
1050
1053
 
1051
1054
  // src/components/Dialog/Dialog.tsx
1052
1055
  import { isMobile as isMobile2, isSafari } from "@funkit/utils";
@@ -3207,6 +3210,8 @@ var flagConfig = {
3207
3210
  "0x2A8Bd916E85d98d8175258De99fc0ddbcC102eF6",
3208
3211
  "0xda6b07Eb94f699F511a943e9bFC12B64B7fe3486",
3209
3212
  "0x0D6e43CA32545B3dc2FE6f93AafBD7e640F548d4",
3213
+ "0x236c60C57a8B9ca563Fb0dA5199FDdCB686d91E8",
3214
+ // greg
3210
3215
  "0x70126A66Ea0f76220Af513365Fea7Db89191aF85",
3211
3216
  // issa PM
3212
3217
  "0x8723E50B5d47714F599Ba02Ee3Db4F5aaF61f9Ad",
@@ -3228,6 +3233,18 @@ var flagConfig = {
3228
3233
  values: [DEV_API_KEY2]
3229
3234
  }
3230
3235
  ],
3236
+ if_all: [
3237
+ {
3238
+ key: "userId",
3239
+ type: "pctRollout",
3240
+ pct: 10
3241
+ },
3242
+ {
3243
+ key: "apiKey",
3244
+ type: "isAnyOf",
3245
+ values: [POLYMARKET_API_KEY2]
3246
+ }
3247
+ ],
3231
3248
  value: true
3232
3249
  }
3233
3250
  ]
@@ -3386,7 +3403,22 @@ var flagConfig = {
3386
3403
  default_value: JSON.stringify({
3387
3404
  listRefresh: 30 * 1e3,
3388
3405
  itemRefresh: 5 * 1e3
3389
- })
3406
+ }),
3407
+ overrides: [
3408
+ {
3409
+ if_any: [
3410
+ {
3411
+ key: "apiKey",
3412
+ type: "isAnyOf",
3413
+ values: [KATANA_API_KEY2]
3414
+ }
3415
+ ],
3416
+ value: JSON.stringify({
3417
+ listRefresh: 5 * 1e3,
3418
+ itemRefresh: 2 * 1e3
3419
+ })
3420
+ }
3421
+ ]
3390
3422
  },
3391
3423
  [FlagKey.TokenTransferNewTokens]: {
3392
3424
  type: "string",
@@ -3859,9 +3891,7 @@ import {
3859
3891
  import { polygon as polygon2 } from "viem/chains";
3860
3892
 
3861
3893
  // src/hooks/useCheckoutDirectExecution.ts
3862
- import {
3863
- DirectExecutionType
3864
- } from "@funkit/api-base";
3894
+ import { DirectExecutionType } from "@funkit/api-base";
3865
3895
  import { executeRelayQuote, getRelayQuote } from "@funkit/fun-relay";
3866
3896
  import { isTokenEquivalent } from "@funkit/utils";
3867
3897
  import { useCallback as useCallback4 } from "react";
@@ -4286,13 +4316,14 @@ var isAssetUsableToPayForCheckout = ({
4286
4316
  config,
4287
4317
  payerAddress,
4288
4318
  paymentMethod,
4319
+ targetChainId,
4320
+ targetTokenAddress,
4289
4321
  assetChainId,
4290
4322
  assetTokenAddress,
4291
4323
  assetUsdAmount,
4292
4324
  loginType,
4293
4325
  isAllowedForCheckout
4294
4326
  }) => {
4295
- const targetChainId = config.targetChain;
4296
4327
  const finalCheckoutRecipient = getCheckoutRecipient({
4297
4328
  config,
4298
4329
  walletAddress: payerAddress
@@ -4300,7 +4331,7 @@ var isAssetUsableToPayForCheckout = ({
4300
4331
  const isSameAsPurchasingToken = !isCheckoutPostActionRequired(config) && // however, if the recipient address is different from the payer address (via account balance payment), it is possible to transfer money
4301
4332
  paymentMethod === "balance" /* ACCOUNT_BALANCE */ && finalCheckoutRecipient.toLowerCase() === payerAddress.toLowerCase() && isTokenEquivalent2({
4302
4333
  firstTokenChainId: targetChainId,
4303
- firstTokenAddress: config.targetAsset,
4334
+ firstTokenAddress: targetTokenAddress,
4304
4335
  secondTokenChainId: assetChainId,
4305
4336
  secondTokenAddress: assetTokenAddress
4306
4337
  });
@@ -6514,10 +6545,10 @@ var useActivityTraversal = () => {
6514
6545
  };
6515
6546
 
6516
6547
  // src/modals/ProfileDetails/ProfileDetails.tsx
6517
- import React236, { useCallback as useCallback43, useState as useState63 } from "react";
6548
+ import React237, { useCallback as useCallback43, useState as useState63 } from "react";
6518
6549
 
6519
6550
  // src/components/FunCheckoutHistory/FunCheckoutHistoryContent.tsx
6520
- import React225 from "react";
6551
+ import React226 from "react";
6521
6552
 
6522
6553
  // src/hooks/useDirectExecutionInfoPolling.ts
6523
6554
  import {
@@ -6957,7 +6988,7 @@ function getCheckoutCompletionTime(checkout) {
6957
6988
  }
6958
6989
 
6959
6990
  // src/components/FunCheckoutHistory/FunCheckoutHistoryDetail.tsx
6960
- import React219, { useCallback as useCallback40, useMemo as useMemo39, useState as useState57 } from "react";
6991
+ import React220, { useCallback as useCallback40, useMemo as useMemo39, useState as useState57 } from "react";
6961
6992
  import { createPortal as createPortal14 } from "react-dom";
6962
6993
 
6963
6994
  // src/components/HelpAlert/HelpAlert.tsx
@@ -7834,7 +7865,7 @@ import {
7834
7865
  formatSecondsToReadableForm as formatSecondsToReadableForm4,
7835
7866
  formatTimestamp
7836
7867
  } from "@funkit/utils";
7837
- import React217, { useState as useState56, useRef as useRef18 } from "react";
7868
+ import React218, { useState as useState56, useRef as useRef18 } from "react";
7838
7869
 
7839
7870
  // src/components/FunSkeletonLoader/FunSkeletonBlock.tsx
7840
7871
  import React66 from "react";
@@ -8261,10 +8292,10 @@ var TransactionRedirectButton = ({
8261
8292
 
8262
8293
  // src/components/FunTransactionSummary/PaymentRouteSummary.tsx
8263
8294
  import { formatAddress as formatAddress5 } from "@funkit/utils";
8264
- import React216 from "react";
8295
+ import React217 from "react";
8265
8296
 
8266
8297
  // src/hooks/usePaymentMethodIcon.tsx
8267
- import React215 from "react";
8298
+ import React216 from "react";
8268
8299
  import { useAccount as useAccount5 } from "wagmi";
8269
8300
 
8270
8301
  // src/components/FunPayments/FunPaymentMethods.tsx
@@ -9787,6 +9818,8 @@ function useUsableWalletAssetsForCheckout() {
9787
9818
  config: checkoutItem.initSettings.config,
9788
9819
  payerAddress: walletAddress,
9789
9820
  paymentMethod: "balance" /* ACCOUNT_BALANCE */,
9821
+ targetChainId: checkoutItem.initSettings.config.targetChain,
9822
+ targetTokenAddress: checkoutItem.initSettings.config.targetAsset,
9790
9823
  assetChainId: asset.chainId,
9791
9824
  assetTokenAddress: asset.contractAddress,
9792
9825
  assetUsdAmount: asset.totalUsdValue,
@@ -10617,7 +10650,7 @@ var BankIconActive = ({ size = 20 }) => {
10617
10650
 
10618
10651
  // src/components/FunConnectOptions/FunSignInStep.tsx
10619
10652
  import { groupBy, isMobile as isMobile8, isSafari as isSafari3, redirectInMobile as redirectInMobile2 } from "@funkit/utils";
10620
- import React212, { Fragment as Fragment3, useCallback as useCallback39, useMemo as useMemo37, useState as useState55 } from "react";
10653
+ import React213, { Fragment as Fragment3, useCallback as useCallback39, useMemo as useMemo37, useState as useState55 } from "react";
10621
10654
 
10622
10655
  // src/providers/walletConnectDeepLink.ts
10623
10656
  var storageKey2 = "WALLETCONNECT_DEEPLINK_CHOICE";
@@ -11214,7 +11247,7 @@ var SocialsIcon = () => {
11214
11247
  };
11215
11248
 
11216
11249
  // src/components/FunConnectOptions/FunConnectOptions.tsx
11217
- import React211, { useCallback as useCallback38, useMemo as useMemo36, useState as useState54 } from "react";
11250
+ import React212, { useCallback as useCallback38, useMemo as useMemo36, useState as useState54 } from "react";
11218
11251
 
11219
11252
  // src/hooks/useAnimatedNavigation.ts
11220
11253
  import { useCallback as useCallback16, useState as useState17 } from "react";
@@ -11275,8 +11308,8 @@ function useAnimatedNavigation(callback) {
11275
11308
  }
11276
11309
 
11277
11310
  // src/components/FunCheckoutModalHeightAnimationWrapper/FunCheckoutModalHeightAnimationWrapper.tsx
11278
- import { motion as motion9 } from "motion/react";
11279
- import React204, { useEffect as useEffect39, useRef as useRef17, useState as useState52 } from "react";
11311
+ import { motion as motion10 } from "motion/react";
11312
+ import React205, { useEffect as useEffect39, useRef as useRef17, useState as useState52 } from "react";
11280
11313
 
11281
11314
  // src/modals/CheckoutModal/stepTransition.ts
11282
11315
  import {
@@ -11373,9 +11406,7 @@ function generateQuoteApiErrorForDisplay(err) {
11373
11406
  }
11374
11407
 
11375
11408
  // src/domains/quote.ts
11376
- import {
11377
- getCheckoutQuote as getApiCheckoutQuote
11378
- } from "@funkit/api-base";
11409
+ import { getCheckoutQuote as getApiCheckoutQuote } from "@funkit/api-base";
11379
11410
 
11380
11411
  // src/domains/fees.ts
11381
11412
  import {
@@ -11385,7 +11416,9 @@ import {
11385
11416
  meshConfigureTransferProxy
11386
11417
  } from "@funkit/api-base";
11387
11418
  import { FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO13 } from "@funkit/chains";
11388
- import { roundUpToXDecimalPlaces as roundUpToXDecimalPlaces2 } from "@funkit/utils";
11419
+ import {
11420
+ roundUpToXDecimalPlaces as roundUpToXDecimalPlaces2
11421
+ } from "@funkit/utils";
11389
11422
  import { estimateGas, getGasPrice } from "@wagmi/core";
11390
11423
  import { encodeFunctionData, erc20Abi as erc20Abi2, formatEther } from "viem";
11391
11424
  import { zkSync } from "viem/zksync";
@@ -15892,7 +15925,7 @@ function ConfirmationStep({
15892
15925
  const isStepLoading = isInitialQuoting || isContinuing || isRefreshing;
15893
15926
  const uiCustomizations = funkitConfig.uiCustomizations?.confirmationScreen;
15894
15927
  const customRecipient = checkoutItem?.initSettings.config.customRecipient;
15895
- return /* @__PURE__ */ React132.createElement(Box, null, /* @__PURE__ */ React132.createElement(
15928
+ return /* @__PURE__ */ React132.createElement(Box, { id: "confirmation-page" }, /* @__PURE__ */ React132.createElement(
15896
15929
  Box,
15897
15930
  {
15898
15931
  display: "flex",
@@ -16339,11 +16372,10 @@ import React141 from "react";
16339
16372
  // src/consts/meld.ts
16340
16373
  var getMeldProviderIconUrl = (provider) => `https://sdk-cdn.fun.xyz/images/meld/${provider.toLowerCase()}.svg`;
16341
16374
  var getCurrencySymbol = (currencyCode) => {
16342
- const formatter = new Intl.NumberFormat(void 0, {
16375
+ const formatter = new Intl.NumberFormat("en-US", {
16343
16376
  style: "currency",
16344
16377
  currency: currencyCode,
16345
- minimumFractionDigits: 0,
16346
- maximumFractionDigits: 0
16378
+ currencyDisplay: "narrowSymbol"
16347
16379
  });
16348
16380
  return formatter.formatToParts(1).find(({ type }) => type === "currency")?.value ?? currencyCode;
16349
16381
  };
@@ -16352,8 +16384,32 @@ var getCurrencySymbol = (currencyCode) => {
16352
16384
  var providerLabelMap = {
16353
16385
  COINBASEPAY: "Coinbase Pay",
16354
16386
  STRIPE: "Stripe",
16355
- TOPPER: "Topper"
16356
- //extend as needed
16387
+ TOPPER: "Topper",
16388
+ PAYPAL: "PayPal",
16389
+ ALCHEMYPAY: "Alchemy Pay",
16390
+ UNLIMIT: "Unlimit",
16391
+ BANXA: "Banxa",
16392
+ BILIRA: "BiLira",
16393
+ BINANCECONNECT: "Binance Connect",
16394
+ BLOCKCHAINDOTCOM: "Blockchain.com",
16395
+ BTCDIRECT: "BTC Direct",
16396
+ FONBNK: "Fonbnk",
16397
+ GUARDARIAN: "Guardarian",
16398
+ KOYWE: "Koywe",
16399
+ MESH: "Mesh",
16400
+ MESO: "Meso",
16401
+ ONMETA: "Onmeta",
16402
+ ONRAMPMONEY: "Onramp Money",
16403
+ PAYBIS: "Paybis",
16404
+ RAMP: "Ramp",
16405
+ ROBINHOOD: "Robinhood",
16406
+ SARDINE: "Sardine",
16407
+ SHIFT4: "Shift4",
16408
+ SIMPLEX: "Simplex",
16409
+ SKRILLCRYPTO: "Skrill",
16410
+ TRANSAK: "Transak",
16411
+ TRANSFI: "TransFi",
16412
+ YELLOWCARD: "Yellow Card"
16357
16413
  };
16358
16414
  var MeldQuoteItem = ({
16359
16415
  quote,
@@ -16405,7 +16461,7 @@ var MeldQuoteItem = ({
16405
16461
  alt: quote.serviceProvider,
16406
16462
  borderRadius: "full"
16407
16463
  }
16408
- )), /* @__PURE__ */ React141.createElement(Text, { weight: "medium", size: "12", style: { whiteSpace: "nowrap" } }, providerLabelMap[quote.serviceProvider]), badge && /* @__PURE__ */ React141.createElement(
16464
+ )), /* @__PURE__ */ React141.createElement(Text, { weight: "medium", size: "12", style: { whiteSpace: "nowrap" } }, providerLabelMap[quote.serviceProvider] ?? quote.serviceProvider), badge && /* @__PURE__ */ React141.createElement(
16409
16465
  FunBadge,
16410
16466
  {
16411
16467
  background: "approvedBadgeBackground",
@@ -16435,7 +16491,8 @@ var SourceMeldQuoteItem = ({
16435
16491
  isLoading,
16436
16492
  isBestQuote,
16437
16493
  isPreselected,
16438
- disabled
16494
+ disabled,
16495
+ error
16439
16496
  }) => {
16440
16497
  return /* @__PURE__ */ React142.createElement(
16441
16498
  FunOptionBox,
@@ -16451,7 +16508,7 @@ var SourceMeldQuoteItem = ({
16451
16508
  disabled: disabled || isLoading || !quote
16452
16509
  },
16453
16510
  /* @__PURE__ */ React142.createElement(Box, { display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React142.createElement(Text, { size: "12", weight: "medium" }, "Provider"), isPreselected && /* @__PURE__ */ React142.createElement(Text, { color: "secondaryText", size: "12", weight: "medium" }, "Best rate auto-picked")),
16454
- /* @__PURE__ */ React142.createElement(Box, { display: "flex", alignItems: "center", gap: "12" }, /* @__PURE__ */ React142.createElement(Box, { display: "flex", alignItems: "center", gap: "6" }, isLoading ? /* @__PURE__ */ React142.createElement(React142.Fragment, null, /* @__PURE__ */ React142.createElement(FunSkeletonCircle, { size: "32" }), /* @__PURE__ */ React142.createElement(FunSkeletonBlock, { width: "36", height: "14" })) : quote ? /* @__PURE__ */ React142.createElement(React142.Fragment, null, /* @__PURE__ */ React142.createElement(
16511
+ /* @__PURE__ */ React142.createElement(Box, { display: "flex", alignItems: "center", gap: "12" }, /* @__PURE__ */ React142.createElement(Box, { display: "flex", alignItems: "center", gap: "6" }, error ? /* @__PURE__ */ React142.createElement(Text, { size: "12", color: "secondaryText", weight: "medium" }, error) : isLoading ? /* @__PURE__ */ React142.createElement(React142.Fragment, null, /* @__PURE__ */ React142.createElement(FunSkeletonCircle, { size: "32" }), /* @__PURE__ */ React142.createElement(FunSkeletonBlock, { width: "36", height: "14" })) : quote ? /* @__PURE__ */ React142.createElement(React142.Fragment, null, /* @__PURE__ */ React142.createElement(
16455
16512
  AsyncImage,
16456
16513
  {
16457
16514
  width: "32",
@@ -17276,24 +17333,38 @@ var useMeldLimitError = (amount, fiatCurrency) => {
17276
17333
  () => data?.find((lim) => lim.currencyCode === fiatCurrency),
17277
17334
  [data, fiatCurrency]
17278
17335
  );
17279
- if (!meldLimit) return "";
17336
+ if (!meldLimit) return void 0;
17280
17337
  if (amount < meldLimit.minimumAmount) {
17281
17338
  const limit = formatCurrencyAndStringify6(
17282
17339
  meldLimit.minimumAmount ?? 0,
17283
17340
  {},
17284
- { currency: fiatCurrency, minimumFractionDigits: 0 }
17341
+ {
17342
+ currency: fiatCurrency,
17343
+ currencyDisplay: "narrowSymbol",
17344
+ minimumFractionDigits: 0
17345
+ }
17285
17346
  );
17286
- return `Amount below minimum ${limit}.`;
17347
+ return {
17348
+ issue: "Amount below minimum",
17349
+ suggestion: `Input an amount greater than ${limit}.`
17350
+ };
17287
17351
  }
17288
17352
  if (amount > meldLimit.maximumAmount) {
17289
17353
  const limit = formatCurrencyAndStringify6(
17290
17354
  meldLimit.maximumAmount ?? 0,
17291
17355
  {},
17292
- { currency: fiatCurrency, minimumFractionDigits: 0 }
17356
+ {
17357
+ currency: fiatCurrency,
17358
+ currencyDisplay: "narrowSymbol",
17359
+ minimumFractionDigits: 0
17360
+ }
17293
17361
  );
17294
- return `Amount above maximum ${limit}`;
17362
+ return {
17363
+ issue: "Amount above maximum",
17364
+ suggestion: `Input an amount lower than ${limit}.`
17365
+ };
17295
17366
  }
17296
- return "";
17367
+ return void 0;
17297
17368
  };
17298
17369
 
17299
17370
  // src/components/Icons/SwitchIcon.tsx
@@ -17363,7 +17434,12 @@ var useMeldLink = (sourceAmount, sourceCurrencyCode = "USD") => {
17363
17434
  const { apiKey } = useFunkitConfig();
17364
17435
  const { userIpInfo } = useFunkitUserIp();
17365
17436
  const destinationCurrencyCode = useMeldCryptoCurrencyCode();
17437
+ const { checkoutItem } = useCheckoutContext();
17366
17438
  const { walletAddress } = useGeneralWallet();
17439
+ const recipient = checkoutItem?.initSettings.config.customRecipient || walletAddress;
17440
+ if (!recipient) {
17441
+ throw new Error("Recipient is required for Meld link");
17442
+ }
17367
17443
  const mutation = useMutation({
17368
17444
  mutationFn: (serviceProvider) => startMeldSession({
17369
17445
  apiKey,
@@ -17372,7 +17448,7 @@ var useMeldLink = (sourceAmount, sourceCurrencyCode = "USD") => {
17372
17448
  countryCode: userIpInfo?.alpha2 ?? "",
17373
17449
  destinationCurrencyCode,
17374
17450
  sourceCurrencyCode,
17375
- walletAddress,
17451
+ walletAddress: recipient,
17376
17452
  sourceAmount: `${sourceAmount}`
17377
17453
  }
17378
17454
  })
@@ -17607,7 +17683,11 @@ var QuickOptions = ({
17607
17683
  !percentMode ? formatCurrencyAndStringify7(
17608
17684
  option,
17609
17685
  {},
17610
- { minimumFractionDigits: 0, currency }
17686
+ {
17687
+ minimumFractionDigits: 0,
17688
+ currency,
17689
+ currencyDisplay: "narrowSymbol"
17690
+ }
17611
17691
  ) : option === 100 ? "Max" : `${option}%`
17612
17692
  ));
17613
17693
  };
@@ -17698,14 +17778,9 @@ function reduceState(state, action) {
17698
17778
  case "setInputValue": {
17699
17779
  const { inputValue: rawInputValue, unitPrice, fiatCurrency } = action;
17700
17780
  const currencySymbol = getCurrencySymbol(fiatCurrency);
17701
- const decimals = state.isInputInUsd ? USD_DECIMALS : ASSET_DECIMALS;
17702
- const escapedPrefix = currencySymbol === "$" ? "\\$" : currencySymbol;
17703
- const regex = new RegExp(
17704
- `^${state.isInputInUsd ? `(${escapedPrefix})?` : ""}(\\d*(\\.\\d{0,${decimals}})?)`
17705
- );
17706
- const match = rawInputValue.match(regex);
17707
- if (!match) return state;
17708
- const numericInputValue = state.isInputInUsd ? match[2] : match[1];
17781
+ const regex = state.isInputInUsd ? /\d+(\.\d{0,2})?/ : /\d+(\.\d{0,5})?/;
17782
+ const match = regex.exec(rawInputValue);
17783
+ const numericInputValue = match?.[0] || "";
17709
17784
  const newInputValue = numericInputValue && state.isInputInUsd ? `${currencySymbol}${numericInputValue}` : numericInputValue;
17710
17785
  if (newInputValue === state.inputValue) return state;
17711
17786
  const newInputAmount = Number.parseFloat(numericInputValue) || 0;
@@ -17842,7 +17917,11 @@ function useAmountInput(options) {
17842
17917
  onChange,
17843
17918
  toggleInputInUsd,
17844
17919
  setUsdAmount,
17845
- placeholder: state.isInputInUsd ? formatCurrencyAndStringify8(0, {}, { currency: fiatCurrency }) : formatCryptoAndStringify3(0),
17920
+ placeholder: state.isInputInUsd ? formatCurrencyAndStringify8(
17921
+ 0,
17922
+ {},
17923
+ { currency: fiatCurrency, currencyDisplay: "narrowSymbol" }
17924
+ ) : formatCryptoAndStringify3(0),
17846
17925
  suggestion: getInputAmountSuggestion(derivedState.inputError)
17847
17926
  };
17848
17927
  }
@@ -17932,8 +18011,8 @@ function InputAmountLoaded({
17932
18011
  }
17933
18012
  if (meldLimitError) {
17934
18013
  return {
17935
- message: meldLimitError,
17936
- type: "error"
18014
+ message: meldLimitError.suggestion,
18015
+ type: "hint"
17937
18016
  };
17938
18017
  }
17939
18018
  if (meldQuotesQuery.error) {
@@ -17994,7 +18073,7 @@ function InputAmountLoaded({
17994
18073
  actionButtonProps: {
17995
18074
  title: suggestion?.buttonLabel ?? "Continue",
17996
18075
  onClick: handleSubmit,
17997
- isDisabled: !isValid && !suggestion || error?.type === "error" || isMeldLinkPending || meldQuotesQuery.isFetching || isCardCheckout && isSelectedQuoteUnavailable,
18076
+ isDisabled: !isValid && !suggestion || error?.type === "error" || !!meldLimitError || isMeldLinkPending || meldQuotesQuery.isFetching || isCardCheckout && isSelectedQuoteUnavailable,
17998
18077
  isLoading: isMeldLinkPending
17999
18078
  },
18000
18079
  fiatCurrencySelector: meldEnabled && /* @__PURE__ */ React150.createElement(
@@ -18104,7 +18183,8 @@ function InputAmountLoaded({
18104
18183
  isLoading: meldQuotesQuery.isPending,
18105
18184
  isBestQuote: selectedQuote?.serviceProvider === bestRateQuote?.serviceProvider,
18106
18185
  disabled: !meldQuotesQuery.data || meldQuotesQuery.data.length === 0,
18107
- isPreselected: !manuallySelectedQuote && !!bestRateQuote
18186
+ isPreselected: !manuallySelectedQuote && !!bestRateQuote,
18187
+ error: meldLimitError?.issue
18108
18188
  }
18109
18189
  ) : /* @__PURE__ */ React150.createElement(
18110
18190
  YouPayYouReceiveWrapper,
@@ -20137,7 +20217,7 @@ function BaseDropdown({
20137
20217
  setIsOpened(true);
20138
20218
  onOpen?.();
20139
20219
  };
20140
- return /* @__PURE__ */ React177.createElement(Box, { display: "flex", flexDirection: "column", gap: "4" }, label && /* @__PURE__ */ React177.createElement(Text, { size: "12" }, label), /* @__PURE__ */ React177.createElement(FunClickOutside, { onClick: isOpened ? closeDropdown : noop6 }, /* @__PURE__ */ React177.createElement(
20220
+ return /* @__PURE__ */ React177.createElement(Box, { display: "flex", flexDirection: "column", gap: "4" }, label && /* @__PURE__ */ React177.createElement(Text, { size: "12", color: "secondaryText" }, label), /* @__PURE__ */ React177.createElement(FunClickOutside, { onClick: isOpened ? closeDropdown : noop6 }, /* @__PURE__ */ React177.createElement(
20141
20221
  Box,
20142
20222
  {
20143
20223
  position: "relative",
@@ -20441,7 +20521,7 @@ var getTokenIconUrl = (symbol, tokens) => {
20441
20521
  };
20442
20522
 
20443
20523
  // src/components/Dropdown/ReceiveTokenDropdown.tsx
20444
- var TOKEN_ICON_SIZE = 16;
20524
+ var TOKEN_ICON_SIZE = "16";
20445
20525
  var aprTag = (badgeText) => /* @__PURE__ */ React180.createElement(
20446
20526
  FunBadge,
20447
20527
  {
@@ -20456,7 +20536,8 @@ var ReceiveTokenDropdown = ({
20456
20536
  chainId,
20457
20537
  selectedToken,
20458
20538
  onTokenSelected,
20459
- label = "Receive"
20539
+ label,
20540
+ activeItemLabel
20460
20541
  }) => {
20461
20542
  const allTokens = Array.from(new Set(Object.values(tokens).flat()));
20462
20543
  const tokenBadgeText = tokens.find(
@@ -20472,20 +20553,20 @@ var ReceiveTokenDropdown = ({
20472
20553
  BaseDropdown_default,
20473
20554
  {
20474
20555
  horizontalIconGap: "8",
20556
+ label,
20475
20557
  openToTopOnMobile: false,
20476
20558
  activeItemProps: {
20477
20559
  iconComponent: selectedToken && /* @__PURE__ */ React180.createElement(
20478
- AsyncImage,
20560
+ FunAssetAvatar,
20479
20561
  {
20480
- alt: selectedToken,
20481
- borderRadius: "full",
20482
- height: TOKEN_ICON_SIZE,
20483
- width: TOKEN_ICON_SIZE,
20484
- src: getTokenIconUrl(selectedToken, tokens),
20485
- fallbackSrc: FALLBACK_ASSET
20562
+ assetIconSize: TOKEN_ICON_SIZE,
20563
+ assetName: selectedToken,
20564
+ assetSrc: getTokenIconUrl(selectedToken, tokens),
20565
+ chainId,
20566
+ largeChainIcon: true
20486
20567
  }
20487
20568
  ),
20488
- alwaysVisibleLabel: label,
20569
+ alwaysVisibleLabel: activeItemLabel,
20489
20570
  tagComponent: tokenBadgeText ? aprTag(tokenBadgeText) : void 0
20490
20571
  },
20491
20572
  value: selectedToken ?? "",
@@ -20507,7 +20588,7 @@ var ReceiveTokenDropdown = ({
20507
20588
  iconComponent: /* @__PURE__ */ React180.createElement(
20508
20589
  FunAssetAvatar,
20509
20590
  {
20510
- assetIconSize: `${TOKEN_ICON_SIZE}`,
20591
+ assetIconSize: TOKEN_ICON_SIZE,
20511
20592
  assetName: "receive-token-asset",
20512
20593
  assetSrc: iconUrl,
20513
20594
  chainId,
@@ -20599,7 +20680,8 @@ var isKnownAsset2 = (asset) => asset.usdAmount !== null;
20599
20680
  function useEnrichedAccountHoldings({
20600
20681
  paymentMethodInfo,
20601
20682
  checkoutConfig,
20602
- accountHoldings
20683
+ accountHoldings,
20684
+ targetAssetInfo
20603
20685
  }) {
20604
20686
  const { apiKey } = useFunkitConfig();
20605
20687
  const { isAllowed, isLoading } = useAllowedAssets();
@@ -20610,6 +20692,8 @@ function useEnrichedAccountHoldings({
20610
20692
  const usableForCheckout = isAssetUsableToPayForCheckout({
20611
20693
  apiKey,
20612
20694
  config: checkoutConfig,
20695
+ targetTokenAddress: targetAssetInfo.tokenAddress,
20696
+ targetChainId: targetAssetInfo.tokenChainId,
20613
20697
  paymentMethod: paymentMethodInfo.paymentMethod,
20614
20698
  payerAddress: walletAddress,
20615
20699
  assetChainId: asset.pickedChainId,
@@ -20633,7 +20717,8 @@ function useEnrichedAccountHoldings({
20633
20717
  isAllowed,
20634
20718
  loginType,
20635
20719
  paymentMethodInfo.paymentMethod,
20636
- walletAddress
20720
+ walletAddress,
20721
+ targetAssetInfo
20637
20722
  ]);
20638
20723
  return { enrichedAccountHoldings, isLoading };
20639
20724
  }
@@ -20705,7 +20790,13 @@ function MeshOrAccountSelectAsset({
20705
20790
  const isTargetAssetSelectable = withTargetAssetSection && candidates;
20706
20791
  const defaultTargetAsset = isTargetAssetSelectable ? candidates.find(
20707
20792
  (token) => token.tokenSymbol === checkoutConfig?.targetAssetTicker
20708
- ) ?? candidates.find((token) => token.isDefault) ?? candidates[0] : void 0;
20793
+ ) ?? candidates.find((token) => token.isDefault) ?? candidates[0] : {
20794
+ tokenAddress: checkoutItem?.initSettings.config.targetAsset || "0x",
20795
+ tokenChainId: checkoutItem?.initSettings.config.targetChain || "",
20796
+ tokenSymbol: checkoutItem?.initSettings.config.targetAssetTicker || "",
20797
+ iconSrc: checkoutItem?.initSettings.config.iconSrc || "",
20798
+ targetAssetMinAmount: 0
20799
+ };
20709
20800
  const [selectedTargetAsset, setSelectedTargetAsset] = useState42(defaultTargetAsset);
20710
20801
  const defaultTokenSymbols = useMemo33(() => {
20711
20802
  if (!checkoutConfig) {
@@ -20722,7 +20813,8 @@ function MeshOrAccountSelectAsset({
20722
20813
  const { enrichedAccountHoldings, isLoading: isLoadingEnrichedHoldings } = useEnrichedAccountHoldings({
20723
20814
  accountHoldings,
20724
20815
  paymentMethodInfo,
20725
- checkoutConfig
20816
+ checkoutConfig,
20817
+ targetAssetInfo: selectedTargetAsset
20726
20818
  });
20727
20819
  const assetOptions = useAssetOptions({
20728
20820
  enrichedAccountHoldings,
@@ -20847,7 +20939,8 @@ function MeshOrAccountSelectAsset({
20847
20939
  /* @__PURE__ */ React182.createElement(
20848
20940
  ReceiveTokenDropdown,
20849
20941
  {
20850
- label: "Asset to Receive",
20942
+ label: textCustomizations.receiveDropdownTitle,
20943
+ activeItemLabel: textCustomizations.receiveDropdownLabel,
20851
20944
  tokens: candidates,
20852
20945
  chainId: Number(checkoutConfig.targetChain),
20853
20946
  selectedToken: selectedTargetAsset?.tokenSymbol,
@@ -22733,10 +22826,64 @@ function TransferToken({
22733
22826
  }
22734
22827
 
22735
22828
  // src/modals/CheckoutModal/VirtualFiatAccount/FiatAccountDetail.tsx
22736
- import React202, { useState as useState49 } from "react";
22829
+ import React203, { useState as useState49 } from "react";
22737
22830
 
22738
- // src/components/FunInputButton/FunInputButton.tsx
22831
+ // src/components/Tabs/Tabs.tsx
22832
+ import { motion as motion9 } from "motion/react";
22739
22833
  import React200 from "react";
22834
+
22835
+ // src/components/Tabs/tabs.css.ts
22836
+ var activeTabStyle = "eghi2t1 _1rsrm2fjf _1rsrm2ft";
22837
+
22838
+ // src/components/Tabs/Tabs.tsx
22839
+ var Tabs = ({ tabs: tabs3, activeTab, onTabChange }) => {
22840
+ return /* @__PURE__ */ React200.createElement(
22841
+ Box,
22842
+ {
22843
+ display: "flex",
22844
+ background: "offBackground",
22845
+ borderRadius: "actionButton",
22846
+ gap: "2",
22847
+ padding: "2"
22848
+ },
22849
+ tabs3.map((tab, index) => {
22850
+ const isSelected = index === activeTab;
22851
+ return /* @__PURE__ */ React200.createElement(
22852
+ Box,
22853
+ {
22854
+ key: tab.value,
22855
+ as: "button",
22856
+ type: "button",
22857
+ paddingX: "12",
22858
+ paddingY: "6",
22859
+ position: "relative",
22860
+ onClick: isSelected ? void 0 : () => onTabChange(index),
22861
+ style: { flex: 1 },
22862
+ color: isSelected ? "primaryText" : {
22863
+ base: "secondaryText",
22864
+ hover: "primaryText",
22865
+ focusedVisible: "primaryText"
22866
+ }
22867
+ },
22868
+ isSelected && /* @__PURE__ */ React200.createElement(
22869
+ motion9.div,
22870
+ {
22871
+ layoutId: "highlight",
22872
+ className: activeTabStyle,
22873
+ transition: { duration: 0.2, ease: [0.17, 0, 0.01, 1] }
22874
+ }
22875
+ ),
22876
+ /* @__PURE__ */ React200.createElement(Box, { position: "relative", style: { zIndex: 1, textAlign: "center" } }, /* @__PURE__ */ React200.createElement(Text, { color: "inherit", weight: "medium", size: "12" }, tab.label))
22877
+ );
22878
+ })
22879
+ );
22880
+ };
22881
+
22882
+ // src/components/VirtualFiatAccount/AccountDetailsTab/AccountDetailsTab.tsx
22883
+ import React202 from "react";
22884
+
22885
+ // src/components/FunInputButton/FunInputButton.tsx
22886
+ import React201 from "react";
22740
22887
  var HIDE_TOOLTIP_MS = 2e3;
22741
22888
  var FunInputButton = ({
22742
22889
  text,
@@ -22747,7 +22894,7 @@ var FunInputButton = ({
22747
22894
  }) => {
22748
22895
  const { isCopied, handleCopy } = useCopyToClipboard(text, HIDE_TOOLTIP_MS);
22749
22896
  if (!isCopyable) {
22750
- return /* @__PURE__ */ React200.createElement(
22897
+ return /* @__PURE__ */ React201.createElement(
22751
22898
  FunOptionBox,
22752
22899
  {
22753
22900
  width: "full",
@@ -22766,10 +22913,10 @@ var FunInputButton = ({
22766
22913
  hover: "heavyStroke"
22767
22914
  }
22768
22915
  },
22769
- /* @__PURE__ */ React200.createElement(Box, { display: "flex", gap: "8", flexDirection: "column" }, label && /* @__PURE__ */ React200.createElement(Text, { size: "10", color: "secondaryText" }, label), /* @__PURE__ */ React200.createElement(Text, { weight: "medium", size: "12" }, text))
22916
+ /* @__PURE__ */ React201.createElement(Box, { display: "flex", gap: "8", flexDirection: "column" }, label && /* @__PURE__ */ React201.createElement(Text, { size: "10", color: "secondaryText" }, label), /* @__PURE__ */ React201.createElement(Text, { weight: "medium", size: "12" }, text))
22770
22917
  );
22771
22918
  }
22772
- return /* @__PURE__ */ React200.createElement(
22919
+ return /* @__PURE__ */ React201.createElement(
22773
22920
  FunTooltip,
22774
22921
  {
22775
22922
  width: "full",
@@ -22777,7 +22924,7 @@ var FunInputButton = ({
22777
22924
  displayType: "click",
22778
22925
  hideDelay: HIDE_TOOLTIP_MS
22779
22926
  },
22780
- /* @__PURE__ */ React200.createElement(
22927
+ /* @__PURE__ */ React201.createElement(
22781
22928
  FunOptionBox,
22782
22929
  {
22783
22930
  width: "full",
@@ -22797,46 +22944,93 @@ var FunInputButton = ({
22797
22944
  hover: "heavyStroke"
22798
22945
  }
22799
22946
  },
22800
- /* @__PURE__ */ React200.createElement(Box, { display: "flex", gap: "8", flexDirection: "column" }, label && /* @__PURE__ */ React200.createElement(Text, { size: "10", color: "secondaryText" }, label), /* @__PURE__ */ React200.createElement(Text, { weight: "medium", size: "12" }, text)),
22801
- /* @__PURE__ */ React200.createElement(Box, { display: "flex", alignItems: "center", color: "primaryText" }, isCopied ? /* @__PURE__ */ React200.createElement(CheckCircleIcon, null) : /* @__PURE__ */ React200.createElement(CopyDoubleRoundedSquareIcon, null))
22947
+ /* @__PURE__ */ React201.createElement(Box, { display: "flex", gap: "8", flexDirection: "column" }, label && /* @__PURE__ */ React201.createElement(Text, { size: "10", color: "secondaryText" }, label), /* @__PURE__ */ React201.createElement(Text, { weight: "medium", size: "12" }, text)),
22948
+ /* @__PURE__ */ React201.createElement(Box, { display: "flex", alignItems: "center", color: "primaryText" }, isCopied ? /* @__PURE__ */ React201.createElement(CheckCircleIcon, null) : /* @__PURE__ */ React201.createElement(CopyDoubleRoundedSquareIcon, null))
22802
22949
  )
22803
22950
  );
22804
22951
  };
22805
22952
 
22806
- // src/components/Tabs/Tabs.tsx
22807
- import React201 from "react";
22808
- var Tabs = ({ tabs: tabs3, activeTab, onTabChange }) => {
22809
- return /* @__PURE__ */ React201.createElement(
22953
+ // src/components/VirtualFiatAccount/AccountDetailsTab/AccountDetailsTab.tsx
22954
+ var AccountDetailsTab = ({
22955
+ account,
22956
+ detailsExpanded,
22957
+ handleToggleDetails
22958
+ }) => /* @__PURE__ */ React202.createElement(Box, { display: "flex", flexDirection: "column", gap: "8" }, account.bank_account_number ? /* @__PURE__ */ React202.createElement(
22959
+ FunInputButton,
22960
+ {
22961
+ label: "Account number",
22962
+ text: account.bank_account_number
22963
+ }
22964
+ ) : null, account.bank_routing_number ? /* @__PURE__ */ React202.createElement(
22965
+ FunInputButton,
22966
+ {
22967
+ label: "Routing number",
22968
+ text: account.bank_routing_number
22969
+ }
22970
+ ) : null, account.iban ? /* @__PURE__ */ React202.createElement(FunInputButton, { label: "IBAN", text: account.iban }) : null, account.bic ? /* @__PURE__ */ React202.createElement(FunInputButton, { label: "SWIFT / BIC", text: account.bic }) : null, account.account_holder_name ? /* @__PURE__ */ React202.createElement(
22971
+ FunInputButton,
22972
+ {
22973
+ label: "Account holder name",
22974
+ text: account.account_holder_name
22975
+ }
22976
+ ) : null, account.bank_beneficiary_name ? /* @__PURE__ */ React202.createElement(
22977
+ FunInputButton,
22978
+ {
22979
+ label: "Beneficiary name",
22980
+ text: account.bank_beneficiary_name
22981
+ }
22982
+ ) : null, detailsExpanded && /* @__PURE__ */ React202.createElement(React202.Fragment, null, /* @__PURE__ */ React202.createElement(FunInputButton, { label: "Bank name", text: account.bank_name }), /* @__PURE__ */ React202.createElement(FunInputButton, { label: "Bank address", text: account.bank_address }), /* @__PURE__ */ React202.createElement(
22983
+ FunInputButton,
22984
+ {
22985
+ label: "Currency",
22986
+ text: String(account.currency).toUpperCase(),
22987
+ isCopyable: false
22988
+ }
22989
+ )), /* @__PURE__ */ React202.createElement(
22990
+ Box,
22991
+ {
22992
+ width: "full",
22993
+ as: "button",
22994
+ display: "flex",
22995
+ gap: "4",
22996
+ alignItems: "center",
22997
+ justifyContent: "center",
22998
+ paddingY: "8",
22999
+ paddingX: "24",
23000
+ onClick: handleToggleDetails,
23001
+ borderRadius: "connectButton",
23002
+ borderStyle: "solid",
23003
+ borderWidth: "1",
23004
+ borderColor: {
23005
+ base: "mediumStroke",
23006
+ hover: "heavyStroke"
23007
+ }
23008
+ },
23009
+ /* @__PURE__ */ React202.createElement(Text, { size: "13" }, detailsExpanded ? "See less" : "More details"),
23010
+ /* @__PURE__ */ React202.createElement(
22810
23011
  Box,
22811
23012
  {
23013
+ width: "16",
23014
+ height: "16",
22812
23015
  display: "flex",
22813
- background: "offBackground",
22814
- borderRadius: "actionButton",
22815
- gap: "2",
22816
- padding: "2"
23016
+ alignItems: "center",
23017
+ justifyContent: "center"
22817
23018
  },
22818
- tabs3.map((tab) => /* @__PURE__ */ React201.createElement(
23019
+ /* @__PURE__ */ React202.createElement(
22819
23020
  Box,
22820
23021
  {
22821
- key: tab.value,
22822
- as: "button",
22823
- type: "button",
22824
- background: activeTab === tab.value ? "modalBackground" : "offBackground",
22825
- paddingX: "12",
22826
- paddingY: "6",
22827
- borderRadius: "actionButtonInner",
22828
- onClick: () => onTabChange(tab.value),
22829
- style: { flex: 1, textAlign: "center" },
22830
- color: activeTab === tab.value ? "primaryText" : {
22831
- base: "secondaryText",
22832
- hover: "primaryText",
22833
- focusedVisible: "primaryText"
22834
- }
23022
+ color: "secondaryText",
23023
+ width: "8",
23024
+ height: "8",
23025
+ display: "flex",
23026
+ alignItems: "center",
23027
+ justifyContent: "center",
23028
+ style: detailsExpanded ? { transform: "rotate(180deg)" } : void 0
22835
23029
  },
22836
- /* @__PURE__ */ React201.createElement(Text, { color: "inherit", weight: "medium", size: "12" }, tab.label)
22837
- ))
22838
- );
22839
- };
23030
+ /* @__PURE__ */ React202.createElement(CaretDownIcon, null)
23031
+ )
23032
+ )
23033
+ ));
22840
23034
 
22841
23035
  // src/modals/CheckoutModal/VirtualFiatAccount/FiatAccountDetail.tsx
22842
23036
  var tabs = [
@@ -22851,13 +23045,14 @@ var AccountDetailsScreen = ({
22851
23045
  const { matchingFiatAccount } = paymentMethodInfo;
22852
23046
  const label = usePaymentMethodInfoLabel(paymentMethodInfo);
22853
23047
  const { appName } = useFunkitConfig();
22854
- const [activeTab, setActiveTab] = useState49(tabs[0].value);
23048
+ const { animation, animate } = useAnimatedNavigation(void 0);
23049
+ const [activeTab, setActiveTab] = useState49(0);
22855
23050
  const [detailsExpanded, setDetailsExpanded] = useState49(false);
22856
- const handleToggleDetails = () => {
22857
- setDetailsExpanded((prev) => !prev);
22858
- };
22859
23051
  const { source_deposit_instructions: sourceDeposit } = matchingFiatAccount;
22860
- return /* @__PURE__ */ React202.createElement(
23052
+ const handleTabChange = (index) => {
23053
+ animate(() => setActiveTab(index), { reverse: index < activeTab });
23054
+ };
23055
+ return /* @__PURE__ */ React203.createElement(
22861
23056
  Box,
22862
23057
  {
22863
23058
  id: "fiat-detail-page",
@@ -22865,7 +23060,7 @@ var AccountDetailsScreen = ({
22865
23060
  flexDirection: "column",
22866
23061
  gap: "16"
22867
23062
  },
22868
- /* @__PURE__ */ React202.createElement(
23063
+ /* @__PURE__ */ React203.createElement(
22869
23064
  SourcePaymentMethodItem,
22870
23065
  {
22871
23066
  onClick: () => onNext({}),
@@ -22874,101 +23069,21 @@ var AccountDetailsScreen = ({
22874
23069
  keyIcon: label.icon
22875
23070
  }
22876
23071
  ),
22877
- /* @__PURE__ */ React202.createElement(Box, { display: "flex", flexDirection: "column", gap: "8" }, /* @__PURE__ */ React202.createElement(Box, { display: "flex", flexDirection: "column", gap: "12" }, /* @__PURE__ */ React202.createElement(Box, { display: "flex", flexDirection: "column", gap: "8" }, /* @__PURE__ */ React202.createElement(Text, null, "Your virtual fiat account details"), /* @__PURE__ */ React202.createElement(Text, { size: "12" }, "Use these details to transfer EUR. Funds arrive in 1\u20132 days to your ", appName, " account.")), /* @__PURE__ */ React202.createElement(
23072
+ /* @__PURE__ */ React203.createElement(Box, { display: "flex", flexDirection: "column", gap: "8" }, /* @__PURE__ */ React203.createElement(Box, { display: "flex", flexDirection: "column", gap: "12" }, /* @__PURE__ */ React203.createElement(Box, { display: "flex", flexDirection: "column", gap: "8" }, /* @__PURE__ */ React203.createElement(Text, null, "Your virtual fiat account details"), /* @__PURE__ */ React203.createElement(Text, { size: "12" }, "Use these details to transfer EUR. Funds arrive in 1\u20132 days to your ", appName, " account.")), /* @__PURE__ */ React203.createElement(
22878
23073
  Tabs,
22879
23074
  {
22880
23075
  tabs,
22881
23076
  activeTab,
22882
- onTabChange: (tab) => setActiveTab(tab)
22883
- }
22884
- )), activeTab === "details" ? /* @__PURE__ */ React202.createElement(Box, { display: "flex", flexDirection: "column", gap: "8" }, sourceDeposit.bank_account_number ? /* @__PURE__ */ React202.createElement(
22885
- FunInputButton,
22886
- {
22887
- label: "Account number",
22888
- text: sourceDeposit.bank_account_number
22889
- }
22890
- ) : null, sourceDeposit.bank_routing_number ? /* @__PURE__ */ React202.createElement(
22891
- FunInputButton,
22892
- {
22893
- label: "Routing number",
22894
- text: sourceDeposit.bank_routing_number
23077
+ onTabChange: handleTabChange
22895
23078
  }
22896
- ) : null, sourceDeposit.iban ? /* @__PURE__ */ React202.createElement(FunInputButton, { label: "IBAN", text: sourceDeposit.iban }) : null, sourceDeposit.bic ? /* @__PURE__ */ React202.createElement(FunInputButton, { label: "SWIFT / BIC", text: sourceDeposit.bic }) : null, sourceDeposit.account_holder_name ? /* @__PURE__ */ React202.createElement(
22897
- FunInputButton,
23079
+ )), /* @__PURE__ */ React203.createElement(Box, { className: getContentAnimation(animation) }, tabs[activeTab].value === "details" ? /* @__PURE__ */ React203.createElement(
23080
+ AccountDetailsTab,
22898
23081
  {
22899
- label: "Account holder name",
22900
- text: sourceDeposit.account_holder_name
23082
+ account: sourceDeposit,
23083
+ detailsExpanded,
23084
+ handleToggleDetails: () => setDetailsExpanded((prev) => !prev)
22901
23085
  }
22902
- ) : null, sourceDeposit.bank_beneficiary_name ? /* @__PURE__ */ React202.createElement(
22903
- FunInputButton,
22904
- {
22905
- label: "Beneficiary name",
22906
- text: sourceDeposit.bank_beneficiary_name
22907
- }
22908
- ) : null, detailsExpanded && /* @__PURE__ */ React202.createElement(React202.Fragment, null, /* @__PURE__ */ React202.createElement(
22909
- FunInputButton,
22910
- {
22911
- label: "Bank name",
22912
- text: sourceDeposit.bank_name
22913
- }
22914
- ), /* @__PURE__ */ React202.createElement(
22915
- FunInputButton,
22916
- {
22917
- label: "Bank address",
22918
- text: sourceDeposit.bank_address
22919
- }
22920
- ), /* @__PURE__ */ React202.createElement(
22921
- FunInputButton,
22922
- {
22923
- label: "Currency",
22924
- text: String(sourceDeposit.currency).toUpperCase(),
22925
- isCopyable: false
22926
- }
22927
- )), /* @__PURE__ */ React202.createElement(
22928
- Box,
22929
- {
22930
- width: "full",
22931
- as: "button",
22932
- display: "flex",
22933
- gap: "4",
22934
- alignItems: "center",
22935
- justifyContent: "center",
22936
- paddingY: "8",
22937
- paddingX: "24",
22938
- onClick: handleToggleDetails,
22939
- borderRadius: "connectButton",
22940
- borderStyle: "solid",
22941
- borderWidth: "1",
22942
- borderColor: {
22943
- base: "mediumStroke",
22944
- hover: "heavyStroke"
22945
- }
22946
- },
22947
- /* @__PURE__ */ React202.createElement(Text, { size: "13" }, detailsExpanded ? "See less" : "More details"),
22948
- /* @__PURE__ */ React202.createElement(
22949
- Box,
22950
- {
22951
- width: "16",
22952
- height: "16",
22953
- display: "flex",
22954
- alignItems: "center",
22955
- justifyContent: "center"
22956
- },
22957
- /* @__PURE__ */ React202.createElement(
22958
- Box,
22959
- {
22960
- color: "secondaryText",
22961
- width: "8",
22962
- height: "8",
22963
- display: "flex",
22964
- alignItems: "center",
22965
- justifyContent: "center",
22966
- style: detailsExpanded ? { transform: "rotate(180deg)" } : void 0
22967
- },
22968
- /* @__PURE__ */ React202.createElement(CaretDownIcon, null)
22969
- )
22970
- )
22971
- )) : /* @__PURE__ */ React202.createElement(
23086
+ ) : /* @__PURE__ */ React203.createElement(
22972
23087
  FunFeatureList,
22973
23088
  {
22974
23089
  gapBetweenItems: "8",
@@ -22982,7 +23097,7 @@ var AccountDetailsScreen = ({
22982
23097
  "Gas fee: < $5.00",
22983
23098
  "Banks fees may also apply"
22984
23099
  ],
22985
- icon: /* @__PURE__ */ React202.createElement(DollarIcon, null)
23100
+ icon: /* @__PURE__ */ React203.createElement(DollarIcon, null)
22986
23101
  },
22987
23102
  {
22988
23103
  text: "Limits",
@@ -22990,16 +23105,16 @@ var AccountDetailsScreen = ({
22990
23105
  "Minimum amount: 25 EUR",
22991
23106
  "Maximum amount: 20,000,000 EUR"
22992
23107
  ],
22993
- icon: /* @__PURE__ */ React202.createElement(DollarIcon, null)
23108
+ icon: /* @__PURE__ */ React203.createElement(DollarIcon, null)
22994
23109
  },
22995
23110
  {
22996
23111
  text: "Processing time",
22997
23112
  value: [FIAT_PROCESSING_TIME],
22998
- icon: /* @__PURE__ */ React202.createElement(SpeedometerIcon, null)
23113
+ icon: /* @__PURE__ */ React203.createElement(SpeedometerIcon, null)
22999
23114
  }
23000
23115
  ]
23001
23116
  }
23002
- ))
23117
+ )))
23003
23118
  );
23004
23119
  };
23005
23120
  var FiatAccountDetail = {
@@ -23018,7 +23133,7 @@ var FiatAccountDetail = {
23018
23133
 
23019
23134
  // src/modals/CheckoutModal/VirtualFiatAccount/KycIframe.tsx
23020
23135
  import { BridgeCustomerStatus as BridgeCustomerStatus7 } from "@funkit/api-base";
23021
- import React203, { useCallback as useCallback34, useEffect as useEffect38, useMemo as useMemo35, useState as useState50 } from "react";
23136
+ import React204, { useCallback as useCallback34, useEffect as useEffect38, useMemo as useMemo35, useState as useState50 } from "react";
23022
23137
  function useIframeListener(listeners) {
23023
23138
  const handleMessage = useCallback34(
23024
23139
  (event) => {
@@ -23094,7 +23209,7 @@ function KycIframe({
23094
23209
  );
23095
23210
  const loading = isLinkLoading || iframeLoading;
23096
23211
  useIframeListener(listeners);
23097
- return /* @__PURE__ */ React203.createElement(
23212
+ return /* @__PURE__ */ React204.createElement(
23098
23213
  Dialog,
23099
23214
  {
23100
23215
  onClose: onBack,
@@ -23103,13 +23218,13 @@ function KycIframe({
23103
23218
  withoutInternalPadding: !loading,
23104
23219
  withTransition: false
23105
23220
  },
23106
- loading && /* @__PURE__ */ React203.createElement(React203.Fragment, null, /* @__PURE__ */ React203.createElement(
23221
+ loading && /* @__PURE__ */ React204.createElement(React204.Fragment, null, /* @__PURE__ */ React204.createElement(
23107
23222
  Dialog.Title,
23108
23223
  {
23109
23224
  onClose: onBack,
23110
23225
  title: textCustomizations.virtualFiat
23111
23226
  }
23112
- ), /* @__PURE__ */ React203.createElement(
23227
+ ), /* @__PURE__ */ React204.createElement(
23113
23228
  VerifyAccountScreen,
23114
23229
  {
23115
23230
  customerStatus: BridgeCustomerStatus7.NOT_STARTED,
@@ -23117,7 +23232,7 @@ function KycIframe({
23117
23232
  withActionButton: false
23118
23233
  }
23119
23234
  )),
23120
- /* @__PURE__ */ React203.createElement(
23235
+ /* @__PURE__ */ React204.createElement(
23121
23236
  Dialog.Content,
23122
23237
  {
23123
23238
  display: "flex",
@@ -23129,7 +23244,7 @@ function KycIframe({
23129
23244
  fullHeight: !loading,
23130
23245
  withoutInternalPadding: !loading
23131
23246
  },
23132
- kycLink && /* @__PURE__ */ React203.createElement(
23247
+ kycLink && /* @__PURE__ */ React204.createElement(
23133
23248
  "iframe",
23134
23249
  {
23135
23250
  src: kycLink,
@@ -23144,7 +23259,7 @@ function KycIframe({
23144
23259
  }
23145
23260
  )
23146
23261
  ),
23147
- loading && /* @__PURE__ */ React203.createElement(Dialog.BottomSection, null, /* @__PURE__ */ React203.createElement(
23262
+ loading && /* @__PURE__ */ React204.createElement(Dialog.BottomSection, null, /* @__PURE__ */ React204.createElement(
23148
23263
  Dialog.BottomBar,
23149
23264
  {
23150
23265
  actionButtonProps: {
@@ -23311,7 +23426,7 @@ function useTitleConfig(checkoutItem, state) {
23311
23426
  return {
23312
23427
  disableBack: isOstiumCustomer(apiKey) && state.step === "select_asset" /* SELECT_ASSET */ ? false : disableBack ?? false,
23313
23428
  hideClose: hideClose ?? false,
23314
- showFullHeight: showFullHeight ?? (isVertexCustomer(apiKey) && state.step === "select_asset" /* SELECT_ASSET */),
23429
+ showFullHeight: showFullHeight ?? ((isVertexCustomer(apiKey) || isKatanaCustomer(apiKey)) && state.step === "select_asset" /* SELECT_ASSET */),
23315
23430
  title: title?.(textCustomizations) ?? baseTitle
23316
23431
  };
23317
23432
  }
@@ -23320,7 +23435,8 @@ function useTitleConfig(checkoutItem, state) {
23320
23435
  var DEFAULT_HEIGHT = 525;
23321
23436
  var mapHeightToCheckoutStep = {
23322
23437
  ["transfer_token" /* TRANSFER_TOKEN */]: 825,
23323
- ["fiat_account_detail" /* FIAT_ACCOUNT_DETAIL */]: 825
23438
+ ["fiat_account_detail" /* FIAT_ACCOUNT_DETAIL */]: 825,
23439
+ ["confirmation" /* CONFIRMATION */]: 825
23324
23440
  };
23325
23441
  function FunCheckoutModalHeightAnimationWrapper({
23326
23442
  children,
@@ -23351,8 +23467,8 @@ function FunCheckoutModalHeightAnimationWrapper({
23351
23467
  }
23352
23468
  }, [checkoutStep]);
23353
23469
  const permittedHeight = checkoutStep ? mapHeightToCheckoutStep[checkoutStep] ?? DEFAULT_HEIGHT : DEFAULT_HEIGHT;
23354
- return /* @__PURE__ */ React204.createElement(
23355
- motion9.div,
23470
+ return /* @__PURE__ */ React205.createElement(
23471
+ motion10.div,
23356
23472
  {
23357
23473
  style: { height },
23358
23474
  animate: { height },
@@ -23361,7 +23477,7 @@ function FunCheckoutModalHeightAnimationWrapper({
23361
23477
  },
23362
23478
  transition: { duration: 0.15, ease: [0.33, 1, 0.68, 1] }
23363
23479
  },
23364
- /* @__PURE__ */ React204.createElement(
23480
+ /* @__PURE__ */ React205.createElement(
23365
23481
  "div",
23366
23482
  {
23367
23483
  ref: containerRef,
@@ -23377,7 +23493,7 @@ function FunCheckoutModalHeightAnimationWrapper({
23377
23493
  }
23378
23494
 
23379
23495
  // src/components/FunConnectOptions/FunConnectResultStep.tsx
23380
- import React205, { useEffect as useEffect40 } from "react";
23496
+ import React206, { useEffect as useEffect40 } from "react";
23381
23497
  var AUTO_CLOSE = 2e3;
23382
23498
  var messageMap = (hasQrCode) => ({
23383
23499
  error: {
@@ -23403,7 +23519,7 @@ var FunConnectResultStep = ({
23403
23519
  }, [onClose, hasAutoclose]);
23404
23520
  const hasQrCode = wallet?.qrCode && qrCodeUri;
23405
23521
  const message = messageMap(!!hasQrCode)[type];
23406
- return /* @__PURE__ */ React205.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, /* @__PURE__ */ React205.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: "12" }, hasQrCode && type === "error" ? /* @__PURE__ */ React205.createElement(
23522
+ return /* @__PURE__ */ React206.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, /* @__PURE__ */ React206.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: "12" }, hasQrCode && type === "error" ? /* @__PURE__ */ React206.createElement(
23407
23523
  Box,
23408
23524
  {
23409
23525
  alignItems: "center",
@@ -23412,7 +23528,7 @@ var FunConnectResultStep = ({
23412
23528
  justifyContent: "center",
23413
23529
  flexDirection: "column"
23414
23530
  },
23415
- /* @__PURE__ */ React205.createElement(
23531
+ /* @__PURE__ */ React206.createElement(
23416
23532
  QRCode,
23417
23533
  {
23418
23534
  logoBackground: wallet.iconBackground,
@@ -23422,7 +23538,7 @@ var FunConnectResultStep = ({
23422
23538
  uri: qrCodeUri
23423
23539
  }
23424
23540
  )
23425
- ) : /* @__PURE__ */ React205.createElement(
23541
+ ) : /* @__PURE__ */ React206.createElement(
23426
23542
  Box,
23427
23543
  {
23428
23544
  padding: "30",
@@ -23431,7 +23547,7 @@ var FunConnectResultStep = ({
23431
23547
  borderStyle: "solid",
23432
23548
  borderColor: type === "success" ? "buttonSuccess" : "buttonWarning"
23433
23549
  },
23434
- wallet && /* @__PURE__ */ React205.createElement(Box, { style: { width: 40, height: 40 } }, /* @__PURE__ */ React205.createElement(
23550
+ wallet && /* @__PURE__ */ React206.createElement(Box, { style: { width: 40, height: 40 } }, /* @__PURE__ */ React206.createElement(
23435
23551
  AsyncImage,
23436
23552
  {
23437
23553
  background: wallet.iconBackground,
@@ -23441,12 +23557,12 @@ var FunConnectResultStep = ({
23441
23557
  height: 40
23442
23558
  }
23443
23559
  ))
23444
- ), /* @__PURE__ */ React205.createElement(FunMessage, { title: message.title, description: message.description })));
23560
+ ), /* @__PURE__ */ React206.createElement(FunMessage, { title: message.title, description: message.description })));
23445
23561
  };
23446
23562
 
23447
23563
  // src/components/FunConnectOptions/FunFarcasterConnectingStep.tsx
23448
23564
  import { isMobile as isMobile7, isSafari as isSafari2, redirectInMobile } from "@funkit/utils";
23449
- import React206, { useCallback as useCallback36, useEffect as useEffect41 } from "react";
23565
+ import React207, { useCallback as useCallback36, useEffect as useEffect41 } from "react";
23450
23566
  function FunFarcasterConnectingStep({
23451
23567
  farcasterUri,
23452
23568
  farcasterToken
@@ -23463,7 +23579,7 @@ function FunFarcasterConnectingStep({
23463
23579
  return (await import("./farcaster-MF6WINBA.js")).default;
23464
23580
  }, []);
23465
23581
  const promptText = mobile ? "To sign in with Farcaster, please open the Warpcast app." : "Scan this QR code or open the link with your mobile phone.";
23466
- return /* @__PURE__ */ React206.createElement(
23582
+ return /* @__PURE__ */ React207.createElement(
23467
23583
  Box,
23468
23584
  {
23469
23585
  alignItems: "center",
@@ -23472,8 +23588,8 @@ function FunFarcasterConnectingStep({
23472
23588
  justifyContent: "center",
23473
23589
  gap: "12"
23474
23590
  },
23475
- mobile ? null : /* @__PURE__ */ React206.createElement(QRCode, { logoSize: 60, logoUrl: svgUrl, size: 318, uri: farcasterUri }),
23476
- /* @__PURE__ */ React206.createElement(
23591
+ mobile ? null : /* @__PURE__ */ React207.createElement(QRCode, { logoSize: 60, logoUrl: svgUrl, size: 318, uri: farcasterUri }),
23592
+ /* @__PURE__ */ React207.createElement(
23477
23593
  Box,
23478
23594
  {
23479
23595
  display: "flex",
@@ -23481,7 +23597,7 @@ function FunFarcasterConnectingStep({
23481
23597
  gap: "12",
23482
23598
  style: { width: 318 }
23483
23599
  },
23484
- /* @__PURE__ */ React206.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: "4" }, mobile ? /* @__PURE__ */ React206.createElement(
23600
+ /* @__PURE__ */ React207.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: "4" }, mobile ? /* @__PURE__ */ React207.createElement(
23485
23601
  FunLinkButton,
23486
23602
  {
23487
23603
  onClick: () => {
@@ -23490,8 +23606,8 @@ function FunFarcasterConnectingStep({
23490
23606
  text: "Open Warpcast",
23491
23607
  size: "14"
23492
23608
  }
23493
- ) : /* @__PURE__ */ React206.createElement(Box, { paddingRight: "8" }, /* @__PURE__ */ React206.createElement(Text, { size: "14" }, "Warpcast Link")), mobile ? null : /* @__PURE__ */ React206.createElement(OldCopyAddressButton, { address: farcasterUri }), /* @__PURE__ */ React206.createElement(FunRedirectButton, { to: farcasterUri, size: "32" })),
23494
- /* @__PURE__ */ React206.createElement(
23609
+ ) : /* @__PURE__ */ React207.createElement(Box, { paddingRight: "8" }, /* @__PURE__ */ React207.createElement(Text, { size: "14" }, "Warpcast Link")), mobile ? null : /* @__PURE__ */ React207.createElement(OldCopyAddressButton, { address: farcasterUri }), /* @__PURE__ */ React207.createElement(FunRedirectButton, { to: farcasterUri, size: "32" })),
23610
+ /* @__PURE__ */ React207.createElement(
23495
23611
  Text,
23496
23612
  {
23497
23613
  size: "13",
@@ -23507,12 +23623,12 @@ function FunFarcasterConnectingStep({
23507
23623
 
23508
23624
  // src/components/FunConnectOptions/FunWeb2ConnectingStep.tsx
23509
23625
  import { isNotNullish as isNotNullish10 } from "@funkit/utils";
23510
- import React208, { useCallback as useCallback37, useEffect as useEffect42, useState as useState53 } from "react";
23626
+ import React209, { useCallback as useCallback37, useEffect as useEffect42, useState as useState53 } from "react";
23511
23627
 
23512
23628
  // src/components/Icons/MailIcon.tsx
23513
- import React207 from "react";
23629
+ import React208 from "react";
23514
23630
  var MailIcon = ({ width = 39 }) => {
23515
- return /* @__PURE__ */ React207.createElement(
23631
+ return /* @__PURE__ */ React208.createElement(
23516
23632
  "svg",
23517
23633
  {
23518
23634
  width,
@@ -23520,7 +23636,7 @@ var MailIcon = ({ width = 39 }) => {
23520
23636
  fill: "none",
23521
23637
  xmlns: "http://www.w3.org/2000/svg"
23522
23638
  },
23523
- /* @__PURE__ */ React207.createElement(
23639
+ /* @__PURE__ */ React208.createElement(
23524
23640
  "path",
23525
23641
  {
23526
23642
  d: "M5.78438 27.4531C4.10729 27.4531 2.83125 27.0208 1.95625 26.1562C1.09167 25.2917 0.659378 24.0312 0.659378 22.375V5.09375C0.659378 3.42708 1.07604 2.16667 1.90938 1.3125C2.74271 0.447917 3.90417 0.015625 5.39375 0.015625H33.7844C35.4719 0.015625 36.7479 0.447917 37.6125 1.3125C38.4875 2.16667 38.925 3.42708 38.925 5.09375V22.375C38.925 24.0312 38.5083 25.2917 37.675 26.1562C36.8417 27.0208 35.6802 27.4531 34.1906 27.4531H5.78438ZM5.78438 24.5625H33.7844C34.5031 24.5625 35.0604 24.3698 35.4563 23.9844C35.8521 23.599 36.05 23.0365 36.05 22.2969V5.17188C36.05 4.43229 35.8521 3.86979 35.4563 3.48438C35.0604 3.09896 34.5031 2.90625 33.7844 2.90625H5.78438C5.06563 2.90625 4.50834 3.09896 4.1125 3.48438C3.72709 3.86979 3.53438 4.42708 3.53438 5.15625V22.2812C3.53438 23.0312 3.72709 23.599 4.1125 23.9844C4.50834 24.3698 5.06563 24.5625 5.78438 24.5625ZM19.7844 18C19.2531 18 18.7375 17.901 18.2375 17.7031C17.7479 17.5052 17.2635 17.1875 16.7844 16.75L2.175 3.60938L4.05 1.71875L18.3781 14.6406C18.826 15.0469 19.2948 15.25 19.7844 15.25C20.274 15.25 20.7427 15.0469 21.1906 14.6406L35.5188 1.71875L37.3938 3.60938L22.7844 16.75C22.3052 17.1875 21.8156 17.5052 21.3156 17.7031C20.826 17.901 20.3156 18 19.7844 18ZM4.31563 25.2031L2.44063 23.3125L13.4875 12.2656L15.3625 14.125L4.31563 25.2031ZM35.2844 25.2188L24.2063 14.125L26.0969 12.2656L37.1594 23.3281L35.2844 25.2188Z",
@@ -23560,14 +23676,14 @@ var FunWeb2ConnectingStep = ({
23560
23676
  },
23561
23677
  [handleFunkitWeb2Login, initialChainId, emailInput]
23562
23678
  );
23563
- return /* @__PURE__ */ React208.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, /* @__PURE__ */ React208.createElement(
23679
+ return /* @__PURE__ */ React209.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, /* @__PURE__ */ React209.createElement(
23564
23680
  FunMessage,
23565
23681
  {
23566
23682
  title: "Enter confirmation code",
23567
23683
  description: `Please check ${emailInput} for an email from ${AUTH_PROVIDER} and enter your code below.`,
23568
- icon: /* @__PURE__ */ React208.createElement(MailIcon, null)
23684
+ icon: /* @__PURE__ */ React209.createElement(MailIcon, null)
23569
23685
  }
23570
- ), /* @__PURE__ */ React208.createElement(
23686
+ ), /* @__PURE__ */ React209.createElement(
23571
23687
  FunTwoFaInput,
23572
23688
  {
23573
23689
  value: otpInput,
@@ -23583,7 +23699,7 @@ var FunWeb2ConnectingStep = ({
23583
23699
  onResend: () => handleSendOtpEmail(emailInput),
23584
23700
  hasResent: isSendingOtpEmail
23585
23701
  }
23586
- ), /* @__PURE__ */ React208.createElement(
23702
+ ), /* @__PURE__ */ React209.createElement(
23587
23703
  FunButton,
23588
23704
  {
23589
23705
  isDisabled: true,
@@ -23594,10 +23710,10 @@ var FunWeb2ConnectingStep = ({
23594
23710
  };
23595
23711
 
23596
23712
  // src/components/FunConnectOptions/FunWeb3ConnectingStep.tsx
23597
- import React210 from "react";
23713
+ import React211 from "react";
23598
23714
 
23599
23715
  // src/components/GradientLoader/GradientLoader.tsx
23600
- import React209 from "react";
23716
+ import React210 from "react";
23601
23717
 
23602
23718
  // src/components/GradientLoader/GradientLoader.css.ts
23603
23719
  var loader = "m17uwo1";
@@ -23607,7 +23723,7 @@ var GradientLoader = ({
23607
23723
  height = "100",
23608
23724
  width = "100"
23609
23725
  }) => {
23610
- return /* @__PURE__ */ React209.createElement(
23726
+ return /* @__PURE__ */ React210.createElement(
23611
23727
  Box,
23612
23728
  {
23613
23729
  className: loader,
@@ -23625,7 +23741,7 @@ var FunWeb3ConnectingStep = ({ selectedWallet, qrCodeUri }) => {
23625
23741
  if (!selectedWallet) return null;
23626
23742
  const { iconBackground, iconUrl, name, qrCode, ready } = selectedWallet;
23627
23743
  const hasQrCode = qrCode && qrCodeUri;
23628
- const waitingMessage = /* @__PURE__ */ React210.createElement(
23744
+ const waitingMessage = /* @__PURE__ */ React211.createElement(
23629
23745
  FunMessage,
23630
23746
  {
23631
23747
  title: `Waiting for ${hasQrCode ? "connection" : name}`,
@@ -23633,7 +23749,7 @@ var FunWeb3ConnectingStep = ({ selectedWallet, qrCodeUri }) => {
23633
23749
  id: "link-text"
23634
23750
  }
23635
23751
  );
23636
- return /* @__PURE__ */ React210.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, hasQrCode ? /* @__PURE__ */ React210.createElement(
23752
+ return /* @__PURE__ */ React211.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, hasQrCode ? /* @__PURE__ */ React211.createElement(
23637
23753
  Box,
23638
23754
  {
23639
23755
  alignItems: "center",
@@ -23643,7 +23759,7 @@ var FunWeb3ConnectingStep = ({ selectedWallet, qrCodeUri }) => {
23643
23759
  gap: "12",
23644
23760
  flexDirection: "column"
23645
23761
  },
23646
- /* @__PURE__ */ React210.createElement(
23762
+ /* @__PURE__ */ React211.createElement(
23647
23763
  QRCode,
23648
23764
  {
23649
23765
  logoBackground: iconBackground,
@@ -23654,7 +23770,7 @@ var FunWeb3ConnectingStep = ({ selectedWallet, qrCodeUri }) => {
23654
23770
  }
23655
23771
  ),
23656
23772
  waitingMessage
23657
- ) : /* @__PURE__ */ React210.createElement(
23773
+ ) : /* @__PURE__ */ React211.createElement(
23658
23774
  Box,
23659
23775
  {
23660
23776
  alignItems: "center",
@@ -23663,7 +23779,7 @@ var FunWeb3ConnectingStep = ({ selectedWallet, qrCodeUri }) => {
23663
23779
  flexDirection: "column",
23664
23780
  gap: "12"
23665
23781
  },
23666
- ready && /* @__PURE__ */ React210.createElement(React210.Fragment, null, /* @__PURE__ */ React210.createElement(Box, { id: "link-graphics", padding: "30", position: "relative" }, /* @__PURE__ */ React210.createElement(Box, { position: "absolute", style: { top: 0, left: 0 } }, /* @__PURE__ */ React210.createElement(GradientLoader, null)), /* @__PURE__ */ React210.createElement(Box, { style: { width: 40, height: 40 } }, /* @__PURE__ */ React210.createElement(
23782
+ ready && /* @__PURE__ */ React211.createElement(React211.Fragment, null, /* @__PURE__ */ React211.createElement(Box, { id: "link-graphics", padding: "30", position: "relative" }, /* @__PURE__ */ React211.createElement(Box, { position: "absolute", style: { top: 0, left: 0 } }, /* @__PURE__ */ React211.createElement(GradientLoader, null)), /* @__PURE__ */ React211.createElement(Box, { style: { width: 40, height: 40 } }, /* @__PURE__ */ React211.createElement(
23667
23783
  AsyncImage,
23668
23784
  {
23669
23785
  background: iconBackground,
@@ -23788,7 +23904,7 @@ function FunConnectOptions({
23788
23904
  switch (step) {
23789
23905
  case 0 /* SIGNIN_PRIMARY */:
23790
23906
  case 1 /* SIGNIN_SECONDARY */:
23791
- return /* @__PURE__ */ React211.createElement(
23907
+ return /* @__PURE__ */ React212.createElement(
23792
23908
  FunSignInStep,
23793
23909
  {
23794
23910
  signInStep: step,
@@ -23808,7 +23924,7 @@ function FunConnectOptions({
23808
23924
  }
23809
23925
  );
23810
23926
  case 3 /* PENDING_WALLET */:
23811
- return /* @__PURE__ */ React211.createElement(
23927
+ return /* @__PURE__ */ React212.createElement(
23812
23928
  FunWeb3ConnectingStep,
23813
23929
  {
23814
23930
  selectedWallet,
@@ -23816,9 +23932,9 @@ function FunConnectOptions({
23816
23932
  }
23817
23933
  );
23818
23934
  case 2 /* PENDING_EMAIL */:
23819
- return /* @__PURE__ */ React211.createElement(FunWeb2ConnectingStep, { emailInput });
23935
+ return /* @__PURE__ */ React212.createElement(FunWeb2ConnectingStep, { emailInput });
23820
23936
  case 4 /* PENDING_FARCASTER */:
23821
- return /* @__PURE__ */ React211.createElement(
23937
+ return /* @__PURE__ */ React212.createElement(
23822
23938
  FunFarcasterConnectingStep,
23823
23939
  {
23824
23940
  farcasterUri,
@@ -23826,7 +23942,7 @@ function FunConnectOptions({
23826
23942
  }
23827
23943
  );
23828
23944
  case 5 /* ERROR_WEB3 */:
23829
- return /* @__PURE__ */ React211.createElement(
23945
+ return /* @__PURE__ */ React212.createElement(
23830
23946
  FunConnectResultStep,
23831
23947
  {
23832
23948
  onClose,
@@ -23848,7 +23964,7 @@ function FunConnectOptions({
23848
23964
  step,
23849
23965
  walletsOnly
23850
23966
  ]);
23851
- return /* @__PURE__ */ React211.createElement(FunCheckoutModalHeightAnimationWrapper, null, /* @__PURE__ */ React211.createElement(Dialog.Title, { onClose, ...navigationConfig[step] }), /* @__PURE__ */ React211.createElement(
23967
+ return /* @__PURE__ */ React212.createElement(FunCheckoutModalHeightAnimationWrapper, null, /* @__PURE__ */ React212.createElement(Dialog.Title, { onClose, ...navigationConfig[step] }), /* @__PURE__ */ React212.createElement(
23852
23968
  Dialog.Content,
23853
23969
  {
23854
23970
  display: "flex",
@@ -23860,7 +23976,7 @@ function FunConnectOptions({
23860
23976
  withBottomDivider: actionConfig[step] ? "always" : "never"
23861
23977
  },
23862
23978
  stepComponent
23863
- ), /* @__PURE__ */ React211.createElement(Dialog.BottomSection, null, actionConfig[step] && /* @__PURE__ */ React211.createElement(Dialog.BottomBar, { ...actionConfig[step] })));
23979
+ ), /* @__PURE__ */ React212.createElement(Dialog.BottomSection, null, actionConfig[step] && /* @__PURE__ */ React212.createElement(Dialog.BottomBar, { ...actionConfig[step] })));
23864
23980
  }
23865
23981
 
23866
23982
  // src/components/FunConnectOptions/FunSignInStep.tsx
@@ -23868,25 +23984,25 @@ var FULL_SOCIAL_LOGIN_OPTIONS = [
23868
23984
  {
23869
23985
  funkitKey: "google_oauth" /* GOOGLE */,
23870
23986
  provider: "google",
23871
- getIcon: (size) => /* @__PURE__ */ React212.createElement(GoogleIcon, { size }),
23987
+ getIcon: (size) => /* @__PURE__ */ React213.createElement(GoogleIcon, { size }),
23872
23988
  name: "Google"
23873
23989
  },
23874
23990
  {
23875
23991
  funkitKey: "twitter_oauth" /* TWITTER */,
23876
23992
  provider: "twitter",
23877
- getIcon: (size) => /* @__PURE__ */ React212.createElement(TwitterIcon, { size }),
23993
+ getIcon: (size) => /* @__PURE__ */ React213.createElement(TwitterIcon, { size }),
23878
23994
  name: "Twitter"
23879
23995
  },
23880
23996
  {
23881
23997
  funkitKey: "apple_oauth" /* APPLE */,
23882
23998
  provider: "apple",
23883
- getIcon: (size) => /* @__PURE__ */ React212.createElement(AppleIcon, { size }),
23999
+ getIcon: (size) => /* @__PURE__ */ React213.createElement(AppleIcon, { size }),
23884
24000
  name: "Apple"
23885
24001
  },
23886
24002
  {
23887
24003
  funkitKey: "farcaster" /* FARCASTER */,
23888
24004
  provider: "farcaster",
23889
- getIcon: (size) => /* @__PURE__ */ React212.createElement(FarcasterIcon, { size }),
24005
+ getIcon: (size) => /* @__PURE__ */ React213.createElement(FarcasterIcon, { size }),
23890
24006
  name: "Farcaster"
23891
24007
  }
23892
24008
  ];
@@ -24033,14 +24149,14 @@ function FunSignInStep({
24033
24149
  changeStep(1 /* SIGNIN_SECONDARY */);
24034
24150
  };
24035
24151
  const makeWeb2LoginSection = (isCollapsed) => {
24036
- return isCollapsed ? /* @__PURE__ */ React212.createElement(
24152
+ return isCollapsed ? /* @__PURE__ */ React213.createElement(
24037
24153
  FunSignInButton,
24038
24154
  {
24039
24155
  title: `Log in with email${hasAnySocialEnabled ? " or socials" : ""}`,
24040
24156
  onClick: () => handleSectionSelect("web2"),
24041
- titlePrefix: /* @__PURE__ */ React212.createElement(SocialsIcon, null)
24157
+ titlePrefix: /* @__PURE__ */ React213.createElement(SocialsIcon, null)
24042
24158
  }
24043
- ) : /* @__PURE__ */ React212.createElement(Box, { display: "flex", gap: "12", flexDirection: "column" }, /* @__PURE__ */ React212.createElement(
24159
+ ) : /* @__PURE__ */ React213.createElement(Box, { display: "flex", gap: "12", flexDirection: "column" }, /* @__PURE__ */ React213.createElement(
24044
24160
  FunInput,
24045
24161
  {
24046
24162
  placeholder: "Enter your email",
@@ -24051,7 +24167,7 @@ function FunSignInStep({
24051
24167
  setEmailError(void 0);
24052
24168
  },
24053
24169
  onKeySubmit: handleEmailSubmit,
24054
- suffix: /* @__PURE__ */ React212.createElement(
24170
+ suffix: /* @__PURE__ */ React213.createElement(
24055
24171
  FunButton,
24056
24172
  {
24057
24173
  type: "tertiary",
@@ -24063,7 +24179,7 @@ function FunSignInStep({
24063
24179
  }
24064
24180
  )
24065
24181
  }
24066
- ), !!hasAnySocialEnabled && /* @__PURE__ */ React212.createElement(React212.Fragment, null, signInStep === 1 /* SIGNIN_SECONDARY */ && /* @__PURE__ */ React212.createElement(
24182
+ ), !!hasAnySocialEnabled && /* @__PURE__ */ React213.createElement(React213.Fragment, null, signInStep === 1 /* SIGNIN_SECONDARY */ && /* @__PURE__ */ React213.createElement(
24067
24183
  FunDivider,
24068
24184
  {
24069
24185
  label: "or",
@@ -24071,7 +24187,7 @@ function FunSignInStep({
24071
24187
  marginBottom: "12",
24072
24188
  borderColor: "selectedOptionBorder"
24073
24189
  }
24074
- ), /* @__PURE__ */ React212.createElement(
24190
+ ), /* @__PURE__ */ React213.createElement(
24075
24191
  FunSocials,
24076
24192
  {
24077
24193
  options: enabledSocialItems,
@@ -24083,15 +24199,15 @@ function FunSignInStep({
24083
24199
  const isWeb2SectionCollapsed = canOpenSecondaryStep && prioritizedLoginType === "web3";
24084
24200
  const Web2LoginSection = loginConfig.web2 ? makeWeb2LoginSection(isWeb2SectionCollapsed) : null;
24085
24201
  const makeWeb3LoginSection = (isCollapsed) => {
24086
- return isCollapsed ? /* @__PURE__ */ React212.createElement(
24202
+ return isCollapsed ? /* @__PURE__ */ React213.createElement(
24087
24203
  FunSignInButton,
24088
24204
  {
24089
24205
  title: "Connect wallet",
24090
- titlePrefix: /* @__PURE__ */ React212.createElement(CryptoIcon, null),
24206
+ titlePrefix: /* @__PURE__ */ React213.createElement(CryptoIcon, null),
24091
24207
  onClick: () => handleSectionSelect("web3")
24092
24208
  }
24093
- ) : /* @__PURE__ */ React212.createElement(Box, { display: "flex", flexDirection: "column", gap: "10" }, funWeb3ConnectWallets.map((wallet) => {
24094
- return /* @__PURE__ */ React212.createElement(
24209
+ ) : /* @__PURE__ */ React213.createElement(Box, { display: "flex", flexDirection: "column", gap: "10" }, funWeb3ConnectWallets.map((wallet) => {
24210
+ return /* @__PURE__ */ React213.createElement(
24095
24211
  ModalSelection,
24096
24212
  {
24097
24213
  currentlySelected: wallet.id === selectedOptionId,
@@ -24111,16 +24227,16 @@ function FunSignInStep({
24111
24227
  const isWeb3SectionVisible = (loginConfig.web3 || walletsOnly) && funWeb3ConnectWallets.length > 0;
24112
24228
  const Web3LoginSection = isWeb3SectionVisible ? makeWeb3LoginSection(isWeb3SectionCollapsed) : null;
24113
24229
  if (walletsOnly) {
24114
- return /* @__PURE__ */ React212.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, Web3LoginSection);
24230
+ return /* @__PURE__ */ React213.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, Web3LoginSection);
24115
24231
  }
24116
24232
  const primaryLoginSection = prioritizedLoginType === "web3" ? Web3LoginSection : Web2LoginSection;
24117
24233
  const secondaryLoginSection = prioritizedLoginType === "web3" ? Web2LoginSection : Web3LoginSection;
24118
- return /* @__PURE__ */ React212.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, signInStep === 0 /* SIGNIN_PRIMARY */ ? /* @__PURE__ */ React212.createElement(Fragment3, null, primaryLoginSection, !!primaryLoginSection && !!secondaryLoginSection && /* @__PURE__ */ React212.createElement(FunDivider, { label: "or", borderColor: "selectedOptionBorder" }), secondaryLoginSection) : secondaryLoginSection);
24234
+ return /* @__PURE__ */ React213.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, signInStep === 0 /* SIGNIN_PRIMARY */ ? /* @__PURE__ */ React213.createElement(Fragment3, null, primaryLoginSection, !!primaryLoginSection && !!secondaryLoginSection && /* @__PURE__ */ React213.createElement(FunDivider, { label: "or", borderColor: "selectedOptionBorder" }), secondaryLoginSection) : secondaryLoginSection);
24119
24235
  }
24120
24236
 
24121
24237
  // src/components/Icons/BrokerageIcon.tsx
24122
- import React213 from "react";
24123
- var BrokerageIcon = ({ size = 20 }) => /* @__PURE__ */ React213.createElement(
24238
+ import React214 from "react";
24239
+ var BrokerageIcon = ({ size = 20 }) => /* @__PURE__ */ React214.createElement(
24124
24240
  "svg",
24125
24241
  {
24126
24242
  width: size,
@@ -24129,7 +24245,7 @@ var BrokerageIcon = ({ size = 20 }) => /* @__PURE__ */ React213.createElement(
24129
24245
  fill: "none",
24130
24246
  xmlns: "http://www.w3.org/2000/svg"
24131
24247
  },
24132
- /* @__PURE__ */ React213.createElement(
24248
+ /* @__PURE__ */ React214.createElement(
24133
24249
  "path",
24134
24250
  {
24135
24251
  fillRule: "evenodd",
@@ -24141,8 +24257,8 @@ var BrokerageIcon = ({ size = 20 }) => /* @__PURE__ */ React213.createElement(
24141
24257
  );
24142
24258
 
24143
24259
  // src/components/Icons/EvmWallet.tsx
24144
- import React214 from "react";
24145
- var EvmWallet = ({ size = 20 }) => /* @__PURE__ */ React214.createElement(
24260
+ import React215 from "react";
24261
+ var EvmWallet = ({ size = 20 }) => /* @__PURE__ */ React215.createElement(
24146
24262
  "svg",
24147
24263
  {
24148
24264
  width: size,
@@ -24151,7 +24267,7 @@ var EvmWallet = ({ size = 20 }) => /* @__PURE__ */ React214.createElement(
24151
24267
  fill: "none",
24152
24268
  xmlns: "http://www.w3.org/2000/svg"
24153
24269
  },
24154
- /* @__PURE__ */ React214.createElement(
24270
+ /* @__PURE__ */ React215.createElement(
24155
24271
  "path",
24156
24272
  {
24157
24273
  fillRule: "evenodd",
@@ -24160,7 +24276,7 @@ var EvmWallet = ({ size = 20 }) => /* @__PURE__ */ React214.createElement(
24160
24276
  fill: "currentColor"
24161
24277
  }
24162
24278
  ),
24163
- /* @__PURE__ */ React214.createElement(
24279
+ /* @__PURE__ */ React215.createElement(
24164
24280
  "path",
24165
24281
  {
24166
24282
  d: "M14.2837 4.86975V3.44021C14.2837 2.68193 13.9827 1.95471 13.4469 1.41853C12.911 0.882349 12.1843 0.581124 11.4265 0.581124L3.56941 0.581124C3.00109 0.581124 2.45604 0.807044 2.05418 1.20918C1.65231 1.61132 1.42655 2.15673 1.42655 2.72544C1.42655 3.29414 1.65231 3.83956 2.05418 4.2417C2.45604 4.64383 3.00109 4.86975 3.56941 4.86975L14.2837 4.86975Z",
@@ -24171,10 +24287,10 @@ var EvmWallet = ({ size = 20 }) => /* @__PURE__ */ React214.createElement(
24171
24287
 
24172
24288
  // src/hooks/usePaymentMethodIcon.tsx
24173
24289
  var PAYMENT_METHOD_ICONS = {
24174
- ["brokerage" /* BROKERAGE */]: (size) => /* @__PURE__ */ React215.createElement(BrokerageIcon, { size }),
24175
- ["card" /* CARD */]: (size) => /* @__PURE__ */ React215.createElement(CreditCardIcon, { size }),
24176
- ["token_transfer" /* TOKEN_TRANSFER */]: (size) => /* @__PURE__ */ React215.createElement(LightningBoltIcon, { size }),
24177
- ["virtual_bank" /* VIRTUAL_BANK */]: (size) => /* @__PURE__ */ React215.createElement(BankIcon, { size })
24290
+ ["brokerage" /* BROKERAGE */]: (size) => /* @__PURE__ */ React216.createElement(BrokerageIcon, { size }),
24291
+ ["card" /* CARD */]: (size) => /* @__PURE__ */ React216.createElement(CreditCardIcon, { size }),
24292
+ ["token_transfer" /* TOKEN_TRANSFER */]: (size) => /* @__PURE__ */ React216.createElement(LightningBoltIcon, { size }),
24293
+ ["virtual_bank" /* VIRTUAL_BANK */]: (size) => /* @__PURE__ */ React216.createElement(BankIcon, { size })
24178
24294
  };
24179
24295
  var DEFAULT_PAYMENT_METHOD_ICON_SIZE = 20;
24180
24296
  function usePaymentMethodIcon(paymentMethod, iconSize = DEFAULT_PAYMENT_METHOD_ICON_SIZE) {
@@ -24188,7 +24304,7 @@ function usePaymentMethodIcon(paymentMethod, iconSize = DEFAULT_PAYMENT_METHOD_I
24188
24304
  if (loginType === "web2" /* Web2 */) {
24189
24305
  const userType = userInfo.type;
24190
24306
  if (userType === "email" /* email */) {
24191
- return /* @__PURE__ */ React215.createElement(MailIcon, { width: iconSize });
24307
+ return /* @__PURE__ */ React216.createElement(MailIcon, { width: iconSize });
24192
24308
  }
24193
24309
  for (const item of enabledSocialLogins) {
24194
24310
  if (item.funkitKey === userType) {
@@ -24198,7 +24314,7 @@ function usePaymentMethodIcon(paymentMethod, iconSize = DEFAULT_PAYMENT_METHOD_I
24198
24314
  } else if (loginType === "web3" /* Web3 */) {
24199
24315
  const iconUrl = wallets.find((w) => w.id === connector?.id)?.iconUrl || connector?.icon;
24200
24316
  if (iconUrl) {
24201
- return /* @__PURE__ */ React215.createElement(
24317
+ return /* @__PURE__ */ React216.createElement(
24202
24318
  AsyncImage,
24203
24319
  {
24204
24320
  useAsImage: true,
@@ -24206,18 +24322,18 @@ function usePaymentMethodIcon(paymentMethod, iconSize = DEFAULT_PAYMENT_METHOD_I
24206
24322
  width: iconSize,
24207
24323
  borderRadius: "6",
24208
24324
  src: iconUrl,
24209
- fallbackElement: /* @__PURE__ */ React215.createElement(EvmWallet, { size: iconSize })
24325
+ fallbackElement: /* @__PURE__ */ React216.createElement(EvmWallet, { size: iconSize })
24210
24326
  }
24211
24327
  );
24212
24328
  }
24213
24329
  }
24214
- return /* @__PURE__ */ React215.createElement(EvmWallet, { size: iconSize });
24330
+ return /* @__PURE__ */ React216.createElement(EvmWallet, { size: iconSize });
24215
24331
  }
24216
24332
  var usePaymentMethodInfoLabel = (methodInfo, iconSize = DEFAULT_PAYMENT_METHOD_ICON_SIZE) => {
24217
24333
  const { textCustomizations } = useFunkitConfig();
24218
24334
  const paymentIcon = usePaymentMethodIcon(methodInfo.paymentMethod, iconSize);
24219
24335
  if (methodInfo.paymentMethod === "card" /* CARD */) {
24220
- return { text: "", icon: /* @__PURE__ */ React215.createElement(CombinedCreditCardOptionsIcon, null) };
24336
+ return { text: "", icon: /* @__PURE__ */ React216.createElement(CombinedCreditCardOptionsIcon, null) };
24221
24337
  }
24222
24338
  if (methodInfo.paymentMethod === "brokerage" /* BROKERAGE */) {
24223
24339
  const icon2 = getExchangeIcon(methodInfo.meta.brokerType, iconSize);
@@ -24229,16 +24345,16 @@ var usePaymentMethodInfoLabel = (methodInfo, iconSize = DEFAULT_PAYMENT_METHOD_I
24229
24345
  methodInfo.title,
24230
24346
  methodInfo.matchingFiatAccount
24231
24347
  ),
24232
- icon: /* @__PURE__ */ React215.createElement(
24348
+ icon: /* @__PURE__ */ React216.createElement(
24233
24349
  PaymentMethodIcon,
24234
24350
  {
24235
24351
  keyIconSize: iconSize,
24236
- paymentIcon: /* @__PURE__ */ React215.createElement(BankIconActive, { size: iconSize })
24352
+ paymentIcon: /* @__PURE__ */ React216.createElement(BankIconActive, { size: iconSize })
24237
24353
  }
24238
24354
  )
24239
24355
  };
24240
24356
  }
24241
- const icon = /* @__PURE__ */ React215.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, paymentIcon);
24357
+ const icon = /* @__PURE__ */ React216.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, paymentIcon);
24242
24358
  if (methodInfo.paymentMethod === "balance" /* ACCOUNT_BALANCE */) {
24243
24359
  const label = getWalletLabel(textCustomizations, methodInfo.description);
24244
24360
  return { text: label, icon };
@@ -24253,12 +24369,12 @@ var PaymentSource = ({
24253
24369
  redirect
24254
24370
  }) => {
24255
24371
  const label = usePaymentMethodInfoLabel(paymentMethodInfo, 15);
24256
- return /* @__PURE__ */ React216.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React216.createElement(
24372
+ return /* @__PURE__ */ React217.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React217.createElement(
24257
24373
  FunTxSummaryLineItemKeyText,
24258
24374
  {
24259
24375
  text: isSameDestination ? "Wallet" : "Source"
24260
24376
  }
24261
- ), /* @__PURE__ */ React216.createElement(Box, { display: "flex", alignItems: "center", gap: "5", color: "primaryText" }, label.icon, label.text && /* @__PURE__ */ React216.createElement(Text, { size: "12", weight: "medium" }, label.text), redirect));
24377
+ ), /* @__PURE__ */ React217.createElement(Box, { display: "flex", alignItems: "center", gap: "5", color: "primaryText" }, label.icon, label.text && /* @__PURE__ */ React217.createElement(Text, { size: "12", weight: "medium" }, label.text), redirect));
24262
24378
  };
24263
24379
  var PaymentDestination = ({
24264
24380
  destinationConfig,
@@ -24268,8 +24384,8 @@ var PaymentDestination = ({
24268
24384
  const { walletAddress } = useGeneralWallet();
24269
24385
  const walletIcon = usePaymentMethodIcon("balance" /* ACCOUNT_BALANCE */, 15);
24270
24386
  const destinationIcon = destinationConfig?.icon ?? walletIcon;
24271
- const destinationAddress = customRecipient ?? walletAddress ?? "";
24272
- return /* @__PURE__ */ React216.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React216.createElement(FunTxSummaryLineItemKeyText, { text: "Destination" }), /* @__PURE__ */ React216.createElement(Box, { display: "flex", alignItems: "center", gap: "5" }, /* @__PURE__ */ React216.createElement(Box, { width: "15", height: "15", display: "flex", alignItems: "center" }, destinationIcon), /* @__PURE__ */ React216.createElement(Text, { weight: "medium", size: "12" }, destinationConfig?.text ?? formatAddress5(destinationAddress)), redirect));
24387
+ const destinationAddress = customRecipient || walletAddress || "";
24388
+ return /* @__PURE__ */ React217.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React217.createElement(FunTxSummaryLineItemKeyText, { text: "Destination" }), /* @__PURE__ */ React217.createElement(Box, { display: "flex", alignItems: "center", gap: "5" }, /* @__PURE__ */ React217.createElement(Box, { width: "15", height: "15", display: "flex", alignItems: "center" }, destinationIcon), /* @__PURE__ */ React217.createElement(Text, { weight: "medium", size: "12" }, destinationConfig?.text ?? formatAddress5(destinationAddress)), redirect));
24273
24389
  };
24274
24390
  var PaymentRouteSummary = ({
24275
24391
  paymentMethodInfo,
@@ -24281,14 +24397,14 @@ var PaymentRouteSummary = ({
24281
24397
  const customDestinationConfig = uiCustomizations?.confirmationScreen?.destinationConfig;
24282
24398
  const isAccountPayment = paymentMethodInfo?.paymentMethod === "balance" /* ACCOUNT_BALANCE */;
24283
24399
  const isSameDestination = isAccountPayment && !customRecipient && !isVertexCustomer(apiKey);
24284
- return /* @__PURE__ */ React216.createElement(React216.Fragment, null, paymentMethodInfo && /* @__PURE__ */ React216.createElement(
24400
+ return /* @__PURE__ */ React217.createElement(React217.Fragment, null, paymentMethodInfo && /* @__PURE__ */ React217.createElement(
24285
24401
  PaymentSource,
24286
24402
  {
24287
24403
  isSameDestination,
24288
24404
  paymentMethodInfo,
24289
24405
  redirect: sourceRedirect
24290
24406
  }
24291
- ), (!isSameDestination || customDestinationConfig) && /* @__PURE__ */ React216.createElement(React216.Fragment, null, /* @__PURE__ */ React216.createElement(FunDivider, { marginTop: "12", marginBottom: "12" }), /* @__PURE__ */ React216.createElement(
24407
+ ), (!isSameDestination || customDestinationConfig) && /* @__PURE__ */ React217.createElement(React217.Fragment, null, /* @__PURE__ */ React217.createElement(FunDivider, { marginTop: "12", marginBottom: "12" }), /* @__PURE__ */ React217.createElement(
24292
24408
  PaymentDestination,
24293
24409
  {
24294
24410
  destinationConfig: customDestinationConfig,
@@ -24297,7 +24413,7 @@ var PaymentRouteSummary = ({
24297
24413
  }
24298
24414
  )));
24299
24415
  };
24300
- var PaymentRouteSummarySkeletonLoader = () => /* @__PURE__ */ React216.createElement(
24416
+ var PaymentRouteSummarySkeletonLoader = () => /* @__PURE__ */ React217.createElement(
24301
24417
  Box,
24302
24418
  {
24303
24419
  width: "full",
@@ -24305,8 +24421,8 @@ var PaymentRouteSummarySkeletonLoader = () => /* @__PURE__ */ React216.createEle
24305
24421
  justifyContent: "space-between",
24306
24422
  alignItems: "center"
24307
24423
  },
24308
- /* @__PURE__ */ React216.createElement(FunSkeletonBlock, { height: "10", width: "44" }),
24309
- /* @__PURE__ */ React216.createElement(Box, { display: "flex", gap: "5", alignItems: "center" }, /* @__PURE__ */ React216.createElement(FunSkeletonCircle, { size: "15" }), /* @__PURE__ */ React216.createElement(FunSkeletonBlock, { height: "10", width: "72" }))
24424
+ /* @__PURE__ */ React217.createElement(FunSkeletonBlock, { height: "10", width: "44" }),
24425
+ /* @__PURE__ */ React217.createElement(Box, { display: "flex", gap: "5", alignItems: "center" }, /* @__PURE__ */ React217.createElement(FunSkeletonCircle, { size: "15" }), /* @__PURE__ */ React217.createElement(FunSkeletonBlock, { height: "10", width: "72" }))
24310
24426
  );
24311
24427
 
24312
24428
  // src/components/FunCheckoutHistory/FunCheckoutHistoryTransaction.css.ts
@@ -24314,7 +24430,7 @@ var expandableTriggerBaseStyles = "mxvati0";
24314
24430
 
24315
24431
  // src/components/FunCheckoutHistory/FunCheckoutHistoryTransaction.tsx
24316
24432
  function FunTxSummaryLineItemKeyText2({ text }) {
24317
- return /* @__PURE__ */ React217.createElement(
24433
+ return /* @__PURE__ */ React218.createElement(
24318
24434
  Text,
24319
24435
  {
24320
24436
  weight: "medium",
@@ -24337,7 +24453,7 @@ function StatusTag({ state, refundState, isDelayed: isDelayed2 }) {
24337
24453
  refundState
24338
24454
  );
24339
24455
  const color = isCompleted || isRefundProceeded ? "success" : "secondaryText";
24340
- return /* @__PURE__ */ React217.createElement(Text, { color, size: "12", weight: "medium" }, isRefundProceeded ? statusNamingMap.completed : refundState === "REFUNDED" ? "Refunded" : (
24456
+ return /* @__PURE__ */ React218.createElement(Text, { color, size: "12", weight: "medium" }, isRefundProceeded ? statusNamingMap.completed : refundState === "REFUNDED" ? "Refunded" : (
24341
24457
  // With some hardcoded timings in `FunCheckoutStatus`, it is possible for isDelayed to stay true while isCompleted is already true
24342
24458
  isDelayed2 && !isCompleted ? "Pending" : statusNamingMap[status]
24343
24459
  ));
@@ -24346,7 +24462,7 @@ var ReceivedAmount = ({ config }) => {
24346
24462
  const receivedAmountDisplay = useCheckoutItemDisplay({
24347
24463
  checkoutConfig: config
24348
24464
  });
24349
- return /* @__PURE__ */ React217.createElement(Box, { display: "flex", gap: "5", alignItems: "center" }, /* @__PURE__ */ React217.createElement(
24465
+ return /* @__PURE__ */ React218.createElement(Box, { display: "flex", gap: "5", alignItems: "center" }, /* @__PURE__ */ React218.createElement(
24350
24466
  AsyncImage,
24351
24467
  {
24352
24468
  src: config.iconSrc ?? FALLBACK_ASSET,
@@ -24355,7 +24471,7 @@ var ReceivedAmount = ({ config }) => {
24355
24471
  height: 15,
24356
24472
  useAsImage: true
24357
24473
  }
24358
- ), /* @__PURE__ */ React217.createElement(Text, { size: "12", weight: "medium" }, receivedAmountDisplay));
24474
+ ), /* @__PURE__ */ React218.createElement(Text, { size: "12", weight: "medium" }, receivedAmountDisplay));
24359
24475
  };
24360
24476
  function FunTxSummaryHistory({
24361
24477
  checkoutHistoryItem,
@@ -24368,28 +24484,28 @@ function FunTxSummaryHistory({
24368
24484
  const customDestinationConfig = uiCustomizations?.confirmationScreen?.destinationConfig;
24369
24485
  const isAccountPayment = checkoutItem && checkoutItem.selectedPaymentMethodInfo?.paymentMethod === "balance" /* ACCOUNT_BALANCE */;
24370
24486
  const sourceRedirectAddress = isAccountPayment ? checkoutHistoryItem?.sourceOfFund?.split("|")?.[2] : null;
24371
- return /* @__PURE__ */ React217.createElement(React217.Fragment, null, /* @__PURE__ */ React217.createElement(FunTxSummaryBox, null, /* @__PURE__ */ React217.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React217.createElement(FunTxSummaryLineItemKeyText2, { text: "Fill status" }), isCheckoutItemLoaded ? /* @__PURE__ */ React217.createElement(
24487
+ return /* @__PURE__ */ React218.createElement(React218.Fragment, null, /* @__PURE__ */ React218.createElement(FunTxSummaryBox, null, /* @__PURE__ */ React218.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React218.createElement(FunTxSummaryLineItemKeyText2, { text: "Fill status" }), isCheckoutItemLoaded ? /* @__PURE__ */ React218.createElement(
24372
24488
  StatusTag,
24373
24489
  {
24374
24490
  state: checkoutHistoryItem.state,
24375
24491
  refundState: checkoutHistoryItem.refundState,
24376
24492
  isDelayed: isDelayed2
24377
24493
  }
24378
- ) : /* @__PURE__ */ React217.createElement(FunSkeletonBlock, { height: "10", width: "44" })), isCompleted && /* @__PURE__ */ React217.createElement(React217.Fragment, null, /* @__PURE__ */ React217.createElement(FunDivider, { marginTop: "12", marginBottom: "12" }), /* @__PURE__ */ React217.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React217.createElement(FunTxSummaryLineItemKeyText2, { text: "Total time" }), /* @__PURE__ */ React217.createElement(Text, { weight: "medium", size: "12" }, formatSecondsToReadableForm4(
24494
+ ) : /* @__PURE__ */ React218.createElement(FunSkeletonBlock, { height: "10", width: "44" })), isCompleted && /* @__PURE__ */ React218.createElement(React218.Fragment, null, /* @__PURE__ */ React218.createElement(FunDivider, { marginTop: "12", marginBottom: "12" }), /* @__PURE__ */ React218.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React218.createElement(FunTxSummaryLineItemKeyText2, { text: "Total time" }), /* @__PURE__ */ React218.createElement(Text, { weight: "medium", size: "12" }, formatSecondsToReadableForm4(
24379
24495
  getCheckoutCompletionTime(checkoutHistoryItem)
24380
- ))))), /* @__PURE__ */ React217.createElement(FunTxSummaryBox, null, checkoutItem ? /* @__PURE__ */ React217.createElement(
24496
+ ))))), /* @__PURE__ */ React218.createElement(FunTxSummaryBox, null, checkoutItem ? /* @__PURE__ */ React218.createElement(
24381
24497
  PaymentRouteSummary,
24382
24498
  {
24383
24499
  paymentMethodInfo: checkoutItem.selectedPaymentMethodInfo,
24384
24500
  customRecipient: checkoutItem.initSettings.config.customRecipient,
24385
- sourceRedirect: sourceRedirectAddress ? /* @__PURE__ */ React217.createElement(
24501
+ sourceRedirect: sourceRedirectAddress ? /* @__PURE__ */ React218.createElement(
24386
24502
  AddressRedirectButton,
24387
24503
  {
24388
24504
  chainId: checkoutHistoryItem.fromChainId,
24389
24505
  address: sourceRedirectAddress
24390
24506
  }
24391
24507
  ) : void 0,
24392
- destinationRedirect: /* @__PURE__ */ React217.createElement(
24508
+ destinationRedirect: /* @__PURE__ */ React218.createElement(
24393
24509
  AddressRedirectButton,
24394
24510
  {
24395
24511
  chainId: checkoutHistoryItem.toChainId,
@@ -24398,7 +24514,7 @@ function FunTxSummaryHistory({
24398
24514
  }
24399
24515
  )
24400
24516
  }
24401
- ) : /* @__PURE__ */ React217.createElement(PaymentRouteSummarySkeletonLoader, null)), /* @__PURE__ */ React217.createElement(FunTxSummaryBox, null, /* @__PURE__ */ React217.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React217.createElement(FunTxSummaryLineItemKeyText2, { text: "You receive" }), checkoutItem ? /* @__PURE__ */ React217.createElement(ReceivedAmount, { config: checkoutItem.initSettings.config }) : /* @__PURE__ */ React217.createElement(Box, { display: "flex", gap: "5", alignItems: "center" }, /* @__PURE__ */ React217.createElement(FunSkeletonCircle, { size: "15" }), /* @__PURE__ */ React217.createElement(FunSkeletonBlock, { height: "10", width: "93" })))));
24517
+ ) : /* @__PURE__ */ React218.createElement(PaymentRouteSummarySkeletonLoader, null)), /* @__PURE__ */ React218.createElement(FunTxSummaryBox, null, /* @__PURE__ */ React218.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React218.createElement(FunTxSummaryLineItemKeyText2, { text: "You receive" }), checkoutItem ? /* @__PURE__ */ React218.createElement(ReceivedAmount, { config: checkoutItem.initSettings.config }) : /* @__PURE__ */ React218.createElement(Box, { display: "flex", gap: "5", alignItems: "center" }, /* @__PURE__ */ React218.createElement(FunSkeletonCircle, { size: "15" }), /* @__PURE__ */ React218.createElement(FunSkeletonBlock, { height: "10", width: "93" })))));
24402
24518
  }
24403
24519
  function OrderDetail({
24404
24520
  checkoutHistoryItem
@@ -24406,7 +24522,7 @@ function OrderDetail({
24406
24522
  const [isExpanded, setIsExpanded] = useState56(false);
24407
24523
  const contentRef = useRef18(null);
24408
24524
  const isCheckoutItemLoaded = checkoutHistoryItem !== void 0;
24409
- return /* @__PURE__ */ React217.createElement(Box, { ref: contentRef, paddingX: "12" }, /* @__PURE__ */ React217.createElement(
24525
+ return /* @__PURE__ */ React218.createElement(Box, { ref: contentRef, paddingX: "12" }, /* @__PURE__ */ React218.createElement(
24410
24526
  Box,
24411
24527
  {
24412
24528
  display: "flex",
@@ -24424,9 +24540,9 @@ function OrderDetail({
24424
24540
  },
24425
24541
  className: expandableTriggerBaseStyles
24426
24542
  },
24427
- /* @__PURE__ */ React217.createElement(Text, { size: "12", color: "tertiaryText" }, "More details"),
24428
- /* @__PURE__ */ React217.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, isCheckoutItemLoaded ? /* @__PURE__ */ React217.createElement(ArrowIcon, { direction: isExpanded ? "down" : "right" }) : /* @__PURE__ */ React217.createElement(FunSkeletonCircle, { size: "16" }))
24429
- ), isCheckoutItemLoaded && /* @__PURE__ */ React217.createElement(Box, { className: isExpanded ? contentExpanded : contentCollapsed }, /* @__PURE__ */ React217.createElement(Box, { paddingTop: "12" }, /* @__PURE__ */ React217.createElement(OrderDetailSection, { checkoutHistoryItem }))));
24543
+ /* @__PURE__ */ React218.createElement(Text, { size: "12", color: "tertiaryText" }, "More details"),
24544
+ /* @__PURE__ */ React218.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, isCheckoutItemLoaded ? /* @__PURE__ */ React218.createElement(ArrowIcon, { direction: isExpanded ? "down" : "right" }) : /* @__PURE__ */ React218.createElement(FunSkeletonCircle, { size: "16" }))
24545
+ ), isCheckoutItemLoaded && /* @__PURE__ */ React218.createElement(Box, { className: isExpanded ? contentExpanded : contentCollapsed }, /* @__PURE__ */ React218.createElement(Box, { paddingTop: "12" }, /* @__PURE__ */ React218.createElement(OrderDetailSection, { checkoutHistoryItem }))));
24430
24546
  }
24431
24547
  var OrderDetailSection = ({
24432
24548
  checkoutHistoryItem
@@ -24442,13 +24558,13 @@ var OrderDetailSection = ({
24442
24558
  } = checkoutHistoryItem;
24443
24559
  const expirationTimeMs = expirationTimestampSeconds * 1e3;
24444
24560
  const hideDepositAddress = checkoutHistoryItem.fromChainId === SOLANA_MAINNET_CHAIN_ID2.toString();
24445
- return /* @__PURE__ */ React217.createElement(Box, { display: "flex", flexDirection: "column", gap: "12" }, !hideDepositAddress && /* @__PURE__ */ React217.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React217.createElement(Text, { color: "tertiaryText", size: "12" }, "Deposit address"), /* @__PURE__ */ React217.createElement(Box, { display: "flex", alignItems: "center", gap: "4" }, /* @__PURE__ */ React217.createElement(Text, { color: "tertiaryText", size: "12" }, formatAddress6(checkoutHistoryItem.depositAddr)), /* @__PURE__ */ React217.createElement(
24561
+ return /* @__PURE__ */ React218.createElement(Box, { display: "flex", flexDirection: "column", gap: "12" }, !hideDepositAddress && /* @__PURE__ */ React218.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React218.createElement(Text, { color: "tertiaryText", size: "12" }, "Deposit address"), /* @__PURE__ */ React218.createElement(Box, { display: "flex", alignItems: "center", gap: "4" }, /* @__PURE__ */ React218.createElement(Text, { color: "tertiaryText", size: "12" }, formatAddress6(checkoutHistoryItem.depositAddr)), /* @__PURE__ */ React218.createElement(
24446
24562
  AddressRedirectButton,
24447
24563
  {
24448
24564
  chainId: checkoutHistoryItem.fromChainId,
24449
24565
  address: checkoutHistoryItem.depositAddr
24450
24566
  }
24451
- ))), /* @__PURE__ */ React217.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React217.createElement(Text, { color: "tertiaryText", size: "12" }, "Order submitted"), /* @__PURE__ */ React217.createElement(Text, { color: "tertiaryText", size: "12" }, getTimestamp(createdTimeMs))), stateTimestampMs?.FROM_FUNDED && /* @__PURE__ */ React217.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React217.createElement(Text, { color: "tertiaryText", size: "12" }, "Order received"), /* @__PURE__ */ React217.createElement(Text, { color: "tertiaryText", size: "12" }, getTimestamp(stateTimestampMs.FROM_FUNDED))), !isProcessing && /* @__PURE__ */ React217.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React217.createElement(Text, { color: "tertiaryText", size: "12" }, `Order ${isError ? "failed" : isExpired ? "expired" : "filled"}`), /* @__PURE__ */ React217.createElement(Text, { color: "tertiaryText", size: "12" }, getTimestamp(
24567
+ ))), /* @__PURE__ */ React218.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React218.createElement(Text, { color: "tertiaryText", size: "12" }, "Order submitted"), /* @__PURE__ */ React218.createElement(Text, { color: "tertiaryText", size: "12" }, getTimestamp(createdTimeMs))), stateTimestampMs?.FROM_FUNDED && /* @__PURE__ */ React218.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React218.createElement(Text, { color: "tertiaryText", size: "12" }, "Order received"), /* @__PURE__ */ React218.createElement(Text, { color: "tertiaryText", size: "12" }, getTimestamp(stateTimestampMs.FROM_FUNDED))), !isProcessing && /* @__PURE__ */ React218.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React218.createElement(Text, { color: "tertiaryText", size: "12" }, `Order ${isError ? "failed" : isExpired ? "expired" : "filled"}`), /* @__PURE__ */ React218.createElement(Text, { color: "tertiaryText", size: "12" }, getTimestamp(
24452
24568
  isExpired ? expirationTimeMs : stateTimestampMs?.COMPLETED ?? lastUpdatedTimeMs
24453
24569
  ))));
24454
24570
  };
@@ -24460,8 +24576,8 @@ var getTimestamp = (timestampMs) => formatTimestamp(new Date(timestampMs), {
24460
24576
 
24461
24577
  // src/components/FunCheckoutHistory/FunCheckoutStatus.tsx
24462
24578
  import { formatSecondsToCountdownForm } from "@funkit/utils";
24463
- import { motion as motion10 } from "motion/react";
24464
- import React218, { useMemo as useMemo38 } from "react";
24579
+ import { motion as motion11 } from "motion/react";
24580
+ import React219, { useMemo as useMemo38 } from "react";
24465
24581
 
24466
24582
  // src/components/FunCheckoutHistory/FunCheckoutStatus.css.ts
24467
24583
  var GradientLoadingBox = "_101aujm0";
@@ -24474,20 +24590,20 @@ function FunCheckoutStatus({
24474
24590
  onOrderDelayed
24475
24591
  }) {
24476
24592
  if (checkoutHistoryItem === void 0) {
24477
- return /* @__PURE__ */ React218.createElement(Box, { className: GradientLoadingBox }, /* @__PURE__ */ React218.createElement(FunSkeletonCircle, { size: "40" }));
24593
+ return /* @__PURE__ */ React219.createElement(Box, { className: GradientLoadingBox }, /* @__PURE__ */ React219.createElement(FunSkeletonCircle, { size: "40" }));
24478
24594
  }
24479
24595
  const { isCompleted, isFailed, isRefundProceeded, isExpired } = getCheckoutStateBooleans(
24480
24596
  checkoutHistoryItem.state,
24481
24597
  checkoutHistoryItem.refundState
24482
24598
  );
24483
24599
  if (checkoutHistoryItem.refundState === "REFUNDED") return null;
24484
- return /* @__PURE__ */ React218.createElement(
24600
+ return /* @__PURE__ */ React219.createElement(
24485
24601
  StatusInner,
24486
24602
  {
24487
24603
  showCompleted: isCompleted || isRefundProceeded,
24488
24604
  showDelayed: isExpired,
24489
24605
  showFailed: isFailed,
24490
- pendingComponent: /* @__PURE__ */ React218.createElement(
24606
+ pendingComponent: /* @__PURE__ */ React219.createElement(
24491
24607
  PendingCheckoutStatus,
24492
24608
  {
24493
24609
  checkoutHistoryItem,
@@ -24503,7 +24619,7 @@ function StatusInner({
24503
24619
  showFailed,
24504
24620
  pendingComponent
24505
24621
  }) {
24506
- return /* @__PURE__ */ React218.createElement(Box, { display: "flex", justifyContent: "center" }, /* @__PURE__ */ React218.createElement(Box, { className: GradientWrapperClass }, showCompleted ? /* @__PURE__ */ React218.createElement(React218.Fragment, null, /* @__PURE__ */ React218.createElement(Box, { className: GradientPositionClass }, /* @__PURE__ */ React218.createElement(CompletedGradientSvg, null)), /* @__PURE__ */ React218.createElement(CompletedStatusIcon, null)) : showDelayed ? /* @__PURE__ */ React218.createElement(DelayedStatusIcon, null) : showFailed ? /* @__PURE__ */ React218.createElement(React218.Fragment, null, /* @__PURE__ */ React218.createElement(Box, { className: GradientPositionClass }, /* @__PURE__ */ React218.createElement(FailedGradientSvg, null)), /* @__PURE__ */ React218.createElement(FailedStatusIcon, null)) : pendingComponent));
24622
+ return /* @__PURE__ */ React219.createElement(Box, { display: "flex", justifyContent: "center" }, /* @__PURE__ */ React219.createElement(Box, { className: GradientWrapperClass }, showCompleted ? /* @__PURE__ */ React219.createElement(React219.Fragment, null, /* @__PURE__ */ React219.createElement(Box, { className: GradientPositionClass }, /* @__PURE__ */ React219.createElement(CompletedGradientSvg, null)), /* @__PURE__ */ React219.createElement(CompletedStatusIcon, null)) : showDelayed ? /* @__PURE__ */ React219.createElement(DelayedStatusIcon, null) : showFailed ? /* @__PURE__ */ React219.createElement(React219.Fragment, null, /* @__PURE__ */ React219.createElement(Box, { className: GradientPositionClass }, /* @__PURE__ */ React219.createElement(FailedGradientSvg, null)), /* @__PURE__ */ React219.createElement(FailedStatusIcon, null)) : pendingComponent));
24507
24623
  }
24508
24624
  var extractStartTimeMs = (historyCheckoutItemId, activeCheckoutItem, { createdTimeMs, stateTimestampMs }) => {
24509
24625
  if (stateTimestampMs?.FROM_FUNDED) return stateTimestampMs.FROM_FUNDED;
@@ -24530,7 +24646,7 @@ function PendingCheckoutStatus({
24530
24646
  );
24531
24647
  return getTimeFromNowSeconds(startTimeMs, totalSeconds * 1e3);
24532
24648
  }, [checkoutItem.id, activeCheckoutItem, checkoutHistoryItem, totalSeconds]);
24533
- return /* @__PURE__ */ React218.createElement(
24649
+ return /* @__PURE__ */ React219.createElement(
24534
24650
  PendingStatus,
24535
24651
  {
24536
24652
  totalSeconds,
@@ -24544,7 +24660,7 @@ function PendingStatus({
24544
24660
  estimatedRemainingSeconds,
24545
24661
  onOrderDelayed
24546
24662
  }) {
24547
- return /* @__PURE__ */ React218.createElement(
24663
+ return /* @__PURE__ */ React219.createElement(
24548
24664
  FunCountdown,
24549
24665
  {
24550
24666
  strokeWidth: 2,
@@ -24552,19 +24668,19 @@ function PendingStatus({
24552
24668
  countdownSeconds: totalSeconds,
24553
24669
  initialRemainingSeconds: estimatedRemainingSeconds,
24554
24670
  onCountdownEnded: onOrderDelayed,
24555
- delayedComponent: /* @__PURE__ */ React218.createElement(DelayedStatus, null),
24671
+ delayedComponent: /* @__PURE__ */ React219.createElement(DelayedStatus, null),
24556
24672
  motionProps: {
24557
24673
  initial: { scale: 1, opacity: 1 },
24558
24674
  exit: { scale: 0.3, opacity: 0 },
24559
24675
  transition: { duration: 0.3, ease: [0.24, 0, 0, 1] }
24560
24676
  }
24561
24677
  },
24562
- (remainingSeconds) => /* @__PURE__ */ React218.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "center" }, remainingSeconds > 0 && /* @__PURE__ */ React218.createElement(Text, { size: "13", weight: "medium" }, formatSecondsToCountdownForm(remainingSeconds)))
24678
+ (remainingSeconds) => /* @__PURE__ */ React219.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "center" }, remainingSeconds > 0 && /* @__PURE__ */ React219.createElement(Text, { size: "13", weight: "medium" }, formatSecondsToCountdownForm(remainingSeconds)))
24563
24679
  );
24564
24680
  }
24565
24681
  var DelayedStatus = () => {
24566
24682
  const transition = { duration: 0.3, ease: [0.24, 0, 0, 1] };
24567
- return /* @__PURE__ */ React218.createElement(Box, { display: "flex", flexDirection: "column", gap: "6", alignItems: "center" }, /* @__PURE__ */ React218.createElement(
24683
+ return /* @__PURE__ */ React219.createElement(Box, { display: "flex", flexDirection: "column", gap: "6", alignItems: "center" }, /* @__PURE__ */ React219.createElement(
24568
24684
  Box,
24569
24685
  {
24570
24686
  color: "secondaryText",
@@ -24572,8 +24688,8 @@ var DelayedStatus = () => {
24572
24688
  alignItems: "center",
24573
24689
  justifyContent: "center"
24574
24690
  },
24575
- /* @__PURE__ */ React218.createElement(
24576
- motion10.svg,
24691
+ /* @__PURE__ */ React219.createElement(
24692
+ motion11.svg,
24577
24693
  {
24578
24694
  width: "22",
24579
24695
  height: "22",
@@ -24585,7 +24701,7 @@ var DelayedStatus = () => {
24585
24701
  xmlns: "http://www.w3.org/2000/svg",
24586
24702
  className: SlowRotation
24587
24703
  },
24588
- /* @__PURE__ */ React218.createElement(
24704
+ /* @__PURE__ */ React219.createElement(
24589
24705
  "circle",
24590
24706
  {
24591
24707
  cx: "11",
@@ -24598,14 +24714,14 @@ var DelayedStatus = () => {
24598
24714
  }
24599
24715
  )
24600
24716
  )
24601
- ), /* @__PURE__ */ React218.createElement(
24602
- motion10.div,
24717
+ ), /* @__PURE__ */ React219.createElement(
24718
+ motion11.div,
24603
24719
  {
24604
24720
  initial: { opacity: 0, y: 20 },
24605
24721
  animate: { opacity: 1, y: 0 },
24606
24722
  transition
24607
24723
  },
24608
- /* @__PURE__ */ React218.createElement(Box, { display: "flex", flexDirection: "column", gap: "2" }, /* @__PURE__ */ React218.createElement(Text, { size: "12", textAlign: "center" }, "Deposit pending"), /* @__PURE__ */ React218.createElement(Box, { textAlign: "center" }, /* @__PURE__ */ React218.createElement(Text, { size: "12", color: "secondaryText" }, "Your deposit is still in progress - no action is required from you")))
24724
+ /* @__PURE__ */ React219.createElement(Box, { display: "flex", flexDirection: "column", gap: "2" }, /* @__PURE__ */ React219.createElement(Text, { size: "12", textAlign: "center" }, "Deposit pending"), /* @__PURE__ */ React219.createElement(Box, { textAlign: "center" }, /* @__PURE__ */ React219.createElement(Text, { size: "12", color: "secondaryText" }, "Your deposit is still in progress - no action is required from you")))
24609
24725
  ));
24610
24726
  };
24611
24727
 
@@ -24671,19 +24787,19 @@ function FunCheckoutHistoryDetail({
24671
24787
  includeGenerateActionsParams
24672
24788
  ]);
24673
24789
  const bottomSectionRef = document.getElementById(bottomBarId);
24674
- return /* @__PURE__ */ React219.createElement(React219.Fragment, null, /* @__PURE__ */ React219.createElement(Box, { display: "flex", flexDirection: "column", gap: VERTICAL_SECTION_GAP }, /* @__PURE__ */ React219.createElement(Box, { style: { visibility: "hidden" } }, /* @__PURE__ */ React219.createElement(
24790
+ return /* @__PURE__ */ React220.createElement(React220.Fragment, null, /* @__PURE__ */ React220.createElement(Box, { display: "flex", flexDirection: "column", gap: VERTICAL_SECTION_GAP }, /* @__PURE__ */ React220.createElement(Box, { style: { visibility: "hidden" } }, /* @__PURE__ */ React220.createElement(
24675
24791
  FunCheckoutStatus,
24676
24792
  {
24677
24793
  checkoutHistoryItem: checkoutHistoryInfo,
24678
24794
  onOrderDelayed: () => setIsDelayed(true)
24679
24795
  }
24680
- )), /* @__PURE__ */ React219.createElement(
24796
+ )), /* @__PURE__ */ React220.createElement(
24681
24797
  FunTxSummaryHistory,
24682
24798
  {
24683
24799
  checkoutHistoryItem: checkoutHistoryInfo,
24684
24800
  isDelayed: isDelayed2
24685
24801
  }
24686
- ), /* @__PURE__ */ React219.createElement(OrderDetail, { checkoutHistoryItem: checkoutHistoryInfo }), isCheckoutLoaded && /* @__PURE__ */ React219.createElement(
24802
+ ), /* @__PURE__ */ React220.createElement(OrderDetail, { checkoutHistoryItem: checkoutHistoryInfo }), isCheckoutLoaded && /* @__PURE__ */ React220.createElement(
24687
24803
  CheckoutAlert,
24688
24804
  {
24689
24805
  state: checkoutHistoryInfo.state,
@@ -24691,7 +24807,7 @@ function FunCheckoutHistoryDetail({
24691
24807
  onHelp
24692
24808
  }
24693
24809
  )), bottomSectionRef && createPortal14(
24694
- /* @__PURE__ */ React219.createElement(
24810
+ /* @__PURE__ */ React220.createElement(
24695
24811
  Dialog.BottomBar,
24696
24812
  {
24697
24813
  onClose,
@@ -24704,7 +24820,7 @@ function FunCheckoutHistoryDetail({
24704
24820
  var CheckoutAlert = ({ state, refundState, onHelp }) => {
24705
24821
  const { isError, isProcessing, isCompleted, isRefundProceeded } = getCheckoutStateBooleans(state, refundState);
24706
24822
  if (isError) {
24707
- return /* @__PURE__ */ React219.createElement(
24823
+ return /* @__PURE__ */ React220.createElement(
24708
24824
  FunAlert,
24709
24825
  {
24710
24826
  type: "error",
@@ -24713,10 +24829,10 @@ var CheckoutAlert = ({ state, refundState, onHelp }) => {
24713
24829
  );
24714
24830
  }
24715
24831
  if (refundState === "REFUNDED") {
24716
- return /* @__PURE__ */ React219.createElement(FunAlert, { description: "Your order was refunded." });
24832
+ return /* @__PURE__ */ React220.createElement(FunAlert, { description: "Your order was refunded." });
24717
24833
  }
24718
24834
  if (isRefundProceeded) {
24719
- return /* @__PURE__ */ React219.createElement(
24835
+ return /* @__PURE__ */ React220.createElement(
24720
24836
  FunAlert,
24721
24837
  {
24722
24838
  description: `Your order was delayed due to technical issues. If you have any questions reach out to ${FUN_ORG_NAME}.`
@@ -24724,17 +24840,17 @@ var CheckoutAlert = ({ state, refundState, onHelp }) => {
24724
24840
  );
24725
24841
  }
24726
24842
  if (isProcessing || isCompleted) {
24727
- return /* @__PURE__ */ React219.createElement(HelpAlert, { onHelp });
24843
+ return /* @__PURE__ */ React220.createElement(HelpAlert, { onHelp });
24728
24844
  }
24729
24845
  };
24730
24846
 
24731
24847
  // src/components/FunCheckoutHistory/FunCheckoutHistoryHelp.tsx
24732
24848
  import { sendSupportMessage } from "@funkit/api-base";
24733
- import React222, { useEffect as useEffect43, useMemo as useMemo40, useRef as useRef19, useState as useState58 } from "react";
24849
+ import React223, { useEffect as useEffect43, useMemo as useMemo40, useRef as useRef19, useState as useState58 } from "react";
24734
24850
  import { createPortal as createPortal15 } from "react-dom";
24735
24851
 
24736
24852
  // src/components/FunInput/FunTextAreaInput.tsx
24737
- import React220 from "react";
24853
+ import React221 from "react";
24738
24854
 
24739
24855
  // src/components/FunInput/FunTextAreaInput.css.ts
24740
24856
  var baseStyles3 = "_1q9ws650";
@@ -24757,7 +24873,7 @@ function FunTextAreaInput({
24757
24873
  overrideBackground,
24758
24874
  isLoading
24759
24875
  }) {
24760
- const [focused, setFocused] = React220.useState(false);
24876
+ const [focused, setFocused] = React221.useState(false);
24761
24877
  const onFocus = () => setFocused(true);
24762
24878
  const onBlur = () => setFocused(false);
24763
24879
  const getBorderColor2 = () => {
@@ -24769,7 +24885,7 @@ function FunTextAreaInput({
24769
24885
  hover: "inputBorderHover"
24770
24886
  };
24771
24887
  };
24772
- return /* @__PURE__ */ React220.createElement(Box, { color: "primaryText", display: "flex", flexDirection: "column", gap: "4" }, label && /* @__PURE__ */ React220.createElement(Text, { size: "12", weight: textWeight }, label), isLoading ? /* @__PURE__ */ React220.createElement(FunSkeletonBlock, { height: "62" }) : /* @__PURE__ */ React220.createElement(
24888
+ return /* @__PURE__ */ React221.createElement(Box, { color: "primaryText", display: "flex", flexDirection: "column", gap: "4" }, label && /* @__PURE__ */ React221.createElement(Text, { size: "12", weight: textWeight }, label), isLoading ? /* @__PURE__ */ React221.createElement(FunSkeletonBlock, { height: "62" }) : /* @__PURE__ */ React221.createElement(
24773
24889
  Box,
24774
24890
  {
24775
24891
  borderRadius: "connectButton",
@@ -24789,7 +24905,7 @@ function FunTextAreaInput({
24789
24905
  hover: "offBackground"
24790
24906
  }
24791
24907
  },
24792
- /* @__PURE__ */ React220.createElement(
24908
+ /* @__PURE__ */ React221.createElement(
24793
24909
  "textarea",
24794
24910
  {
24795
24911
  type: inputProps?.type || "text",
@@ -24817,13 +24933,13 @@ function FunTextAreaInput({
24817
24933
  }
24818
24934
  }
24819
24935
  )
24820
- ), error && typeof error === "string" && /* @__PURE__ */ React220.createElement(Text, { color: "error", size: "14", weight: "medium" }, error));
24936
+ ), error && typeof error === "string" && /* @__PURE__ */ React221.createElement(Text, { color: "error", size: "14", weight: "medium" }, error));
24821
24937
  }
24822
24938
 
24823
24939
  // src/components/Icons/SuccessIcon.tsx
24824
- import React221 from "react";
24940
+ import React222 from "react";
24825
24941
  var SuccessIcon = ({ size = 50 }) => {
24826
- return /* @__PURE__ */ React221.createElement(
24942
+ return /* @__PURE__ */ React222.createElement(
24827
24943
  "svg",
24828
24944
  {
24829
24945
  width: size,
@@ -24832,7 +24948,7 @@ var SuccessIcon = ({ size = 50 }) => {
24832
24948
  fill: "none",
24833
24949
  xmlns: "http://www.w3.org/2000/svg"
24834
24950
  },
24835
- /* @__PURE__ */ React221.createElement(
24951
+ /* @__PURE__ */ React222.createElement(
24836
24952
  "path",
24837
24953
  {
24838
24954
  d: "M24.9766 49.2891C21.6641 49.2891 18.5469 48.6562 15.625 47.3906C12.7031 46.1406 10.125 44.3984 7.89062 42.1641C5.67188 39.9297 3.92969 37.3516 2.66406 34.4297C1.39844 31.5078 0.765625 28.3906 0.765625 25.0781C0.765625 21.7656 1.39844 18.6484 2.66406 15.7266C3.92969 12.8047 5.67188 10.2344 7.89062 8.01562C10.125 5.78125 12.6953 4.03125 15.6016 2.76562C18.5234 1.5 21.6406 0.867188 24.9531 0.867188C28.2812 0.867188 31.4062 1.5 34.3281 2.76562C37.25 4.03125 39.8281 5.78125 42.0625 8.01562C44.2969 10.2344 46.0469 12.8047 47.3125 15.7266C48.5781 18.6484 49.2109 21.7656 49.2109 25.0781C49.2109 28.3906 48.5781 31.5078 47.3125 34.4297C46.0469 37.3516 44.2969 39.9297 42.0625 42.1641C39.8281 44.3984 37.25 46.1406 34.3281 47.3906C31.4062 48.6562 28.2891 49.2891 24.9766 49.2891ZM22.375 36.6328C22.8125 36.6328 23.2109 36.5312 23.5703 36.3281C23.9453 36.125 24.2734 35.8203 24.5547 35.4141L35.5234 18.3047C35.6797 18.0547 35.8203 17.7891 35.9453 17.5078C36.0703 17.2109 36.1328 16.9297 36.1328 16.6641C36.1328 16.0547 35.8984 15.5625 35.4297 15.1875C34.9766 14.8125 34.4609 14.625 33.8828 14.625C33.1172 14.625 32.4844 15.0312 31.9844 15.8438L22.2812 31.3594L17.7812 25.6406C17.4688 25.25 17.1641 24.9766 16.8672 24.8203C16.5703 24.6641 16.2344 24.5859 15.8594 24.5859C15.2656 24.5859 14.7578 24.8047 14.3359 25.2422C13.9297 25.6641 13.7266 26.1719 13.7266 26.7656C13.7266 27.0625 13.7812 27.3516 13.8906 27.6328C14 27.9141 14.1562 28.1875 14.3594 28.4531L20.1016 35.4375C20.4453 35.8594 20.7969 36.1641 21.1562 36.3516C21.5156 36.5391 21.9219 36.6328 22.375 36.6328Z",
@@ -24968,18 +25084,18 @@ function FunCheckoutHistoryHelp({
24968
25084
  }
24969
25085
  };
24970
25086
  if (processStage === 1 /* SUCCESS */) {
24971
- return /* @__PURE__ */ React222.createElement(Box, { display: "flex", flexDirection: "column", gap: "24", paddingTop: "16" }, /* @__PURE__ */ React222.createElement(Box, { paddingY: "12", paddingX: "24" }, /* @__PURE__ */ React222.createElement(
25087
+ return /* @__PURE__ */ React223.createElement(Box, { display: "flex", flexDirection: "column", gap: "24", paddingTop: "16" }, /* @__PURE__ */ React223.createElement(Box, { paddingY: "12", paddingX: "24" }, /* @__PURE__ */ React223.createElement(
24972
25088
  FunMessage,
24973
25089
  {
24974
25090
  title: "Request sent",
24975
25091
  description: "Our team has received your request and will be in touch shortly. We appreciate your patience.",
24976
- icon: /* @__PURE__ */ React222.createElement(SuccessIcon, null)
25092
+ icon: /* @__PURE__ */ React223.createElement(SuccessIcon, null)
24977
25093
  }
24978
- )), /* @__PURE__ */ React222.createElement(FunButton, { title: "Close", onClick: onBackFromHelpPage }));
25094
+ )), /* @__PURE__ */ React223.createElement(FunButton, { title: "Close", onClick: onBackFromHelpPage }));
24979
25095
  }
24980
25096
  const bottomSectionRef = document.getElementById(bottomBarId);
24981
25097
  const isLoadingCheckoutItem = checkoutHistoryInfo === void 0;
24982
- return /* @__PURE__ */ React222.createElement(Box, { ref: wrapperRef }, /* @__PURE__ */ React222.createElement(Box, { display: "flex", flexDirection: "column", gap: "24", paddingTop: "12" }, /* @__PURE__ */ React222.createElement(Box, { display: "flex", flexDirection: "column", gap: "10" }, /* @__PURE__ */ React222.createElement(Text, { size: "20", weight: "medium" }, "Tell us more"), /* @__PURE__ */ React222.createElement(Text, { size: "10" }, "If you're experiencing an issue or have a question, please fill out the form below and our support team will get back to you as soon as possible.")), /* @__PURE__ */ React222.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, /* @__PURE__ */ React222.createElement(
25098
+ return /* @__PURE__ */ React223.createElement(Box, { ref: wrapperRef }, /* @__PURE__ */ React223.createElement(Box, { display: "flex", flexDirection: "column", gap: "24", paddingTop: "12" }, /* @__PURE__ */ React223.createElement(Box, { display: "flex", flexDirection: "column", gap: "10" }, /* @__PURE__ */ React223.createElement(Text, { size: "20", weight: "medium" }, "Tell us more"), /* @__PURE__ */ React223.createElement(Text, { size: "10" }, "If you're experiencing an issue or have a question, please fill out the form below and our support team will get back to you as soon as possible.")), /* @__PURE__ */ React223.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, /* @__PURE__ */ React223.createElement(
24983
25099
  FunInput,
24984
25100
  {
24985
25101
  label: "Email*",
@@ -24988,7 +25104,7 @@ function FunCheckoutHistoryHelp({
24988
25104
  value: emailInput,
24989
25105
  onChange: (e) => setEmailInput(e?.target?.value)
24990
25106
  }
24991
- ), /* @__PURE__ */ React222.createElement(
25107
+ ), /* @__PURE__ */ React223.createElement(
24992
25108
  FunInput,
24993
25109
  {
24994
25110
  label: "Subject*",
@@ -24997,7 +25113,7 @@ function FunCheckoutHistoryHelp({
24997
25113
  value: subjectInput,
24998
25114
  onChange: (e) => setSubjectInput(e?.target?.value)
24999
25115
  }
25000
- ), /* @__PURE__ */ React222.createElement(
25116
+ ), /* @__PURE__ */ React223.createElement(
25001
25117
  FunTextAreaInput,
25002
25118
  {
25003
25119
  label: "Description*",
@@ -25006,7 +25122,7 @@ function FunCheckoutHistoryHelp({
25006
25122
  value: descriptionInput,
25007
25123
  onChange: (e) => setDescriptionInput(e?.target?.value)
25008
25124
  }
25009
- ), /* @__PURE__ */ React222.createElement(
25125
+ ), /* @__PURE__ */ React223.createElement(
25010
25126
  BaseDropdown_default,
25011
25127
  {
25012
25128
  size: "large",
@@ -25016,7 +25132,7 @@ function FunCheckoutHistoryHelp({
25016
25132
  value: resolutionInput,
25017
25133
  onOptionSelected: (option) => setResolutionInput(option.value),
25018
25134
  renderDropdownOption: (option, isSelected) => {
25019
- return /* @__PURE__ */ React222.createElement(
25135
+ return /* @__PURE__ */ React223.createElement(
25020
25136
  BaseDropdownItem_default,
25021
25137
  {
25022
25138
  horizontalPadding: "8",
@@ -25036,7 +25152,7 @@ function FunCheckoutHistoryHelp({
25036
25152
  openDropdownBackgroundColor: "inputBackground"
25037
25153
  }
25038
25154
  ))), bottomSectionRef && createPortal15(
25039
- /* @__PURE__ */ React222.createElement(
25155
+ /* @__PURE__ */ React223.createElement(
25040
25156
  Dialog.BottomBar,
25041
25157
  {
25042
25158
  actionButtonProps: {
@@ -25044,7 +25160,7 @@ function FunCheckoutHistoryHelp({
25044
25160
  onClick: onSubmitIssue,
25045
25161
  isDisabled: isSubmitting || !subjectInput || !descriptionInput || !emailInput || !isEmailInputValid || !resolutionInput
25046
25162
  },
25047
- topSection: /* @__PURE__ */ React222.createElement(
25163
+ topSection: /* @__PURE__ */ React223.createElement(
25048
25164
  FunNotification,
25049
25165
  {
25050
25166
  description: errorMessage,
@@ -25066,26 +25182,26 @@ import {
25066
25182
  formatTimestamp as formatTimestamp2,
25067
25183
  isTokenEquivalent as isTokenEquivalent8
25068
25184
  } from "@funkit/utils";
25069
- import React224, { useCallback as useCallback41, useMemo as useMemo42, useRef as useRef20, useState as useState59 } from "react";
25185
+ import React225, { useCallback as useCallback41, useMemo as useMemo42, useRef as useRef20, useState as useState59 } from "react";
25070
25186
  import { createPortal as createPortal16 } from "react-dom";
25071
25187
 
25072
25188
  // src/components/FunCheckoutHistory/FunDirectExecutionStatus.tsx
25073
- import React223, { useMemo as useMemo41 } from "react";
25189
+ import React224, { useMemo as useMemo41 } from "react";
25074
25190
  function FunDirectExecutionStatus({
25075
25191
  directExecution
25076
25192
  }) {
25077
25193
  const { isCompleted, isDelayed: isDelayed2, isFailed, isRefunded } = useCheckoutDirectExecutionHistory({ initDirectExecution: directExecution });
25078
25194
  if (directExecution === void 0) {
25079
- return /* @__PURE__ */ React223.createElement(Box, { className: GradientLoadingBox }, /* @__PURE__ */ React223.createElement(FunSkeletonCircle, { size: "40" }));
25195
+ return /* @__PURE__ */ React224.createElement(Box, { className: GradientLoadingBox }, /* @__PURE__ */ React224.createElement(FunSkeletonCircle, { size: "40" }));
25080
25196
  }
25081
25197
  if (isRefunded) return null;
25082
- return /* @__PURE__ */ React223.createElement(
25198
+ return /* @__PURE__ */ React224.createElement(
25083
25199
  StatusInner,
25084
25200
  {
25085
25201
  showCompleted: isCompleted,
25086
25202
  showDelayed: isDelayed2,
25087
25203
  showFailed: isFailed,
25088
- pendingComponent: /* @__PURE__ */ React223.createElement(PendingDirectExecutionStatus, { directExecution })
25204
+ pendingComponent: /* @__PURE__ */ React224.createElement(PendingDirectExecutionStatus, { directExecution })
25089
25205
  }
25090
25206
  );
25091
25207
  }
@@ -25100,7 +25216,7 @@ function PendingDirectExecutionStatus({
25100
25216
  const startTimeMs = directExecution.createdTimeMs;
25101
25217
  return getTimeFromNowSeconds(startTimeMs, totalSeconds * 1e3);
25102
25218
  }, [totalSeconds, directExecution]);
25103
- return /* @__PURE__ */ React223.createElement(
25219
+ return /* @__PURE__ */ React224.createElement(
25104
25220
  PendingStatus,
25105
25221
  {
25106
25222
  totalSeconds,
@@ -25116,7 +25232,7 @@ function FunDirectExecutionStatusTagLoaded({
25116
25232
  const { state, refundState, isDelayed: isDelayed2 } = useCheckoutDirectExecutionHistory({
25117
25233
  initDirectExecution: directExecution
25118
25234
  });
25119
- return /* @__PURE__ */ React224.createElement(StatusTag, { state, refundState, isDelayed: isDelayed2 });
25235
+ return /* @__PURE__ */ React225.createElement(StatusTag, { state, refundState, isDelayed: isDelayed2 });
25120
25236
  }
25121
25237
  function FunDirectExecutionHistoryDetail({
25122
25238
  bottomBarId,
@@ -25166,25 +25282,25 @@ function FunDirectExecutionHistoryDetail({
25166
25282
  includeGenerateActionsParams,
25167
25283
  isLoaded
25168
25284
  ]);
25169
- return /* @__PURE__ */ React224.createElement(React224.Fragment, null, /* @__PURE__ */ React224.createElement(Box, { display: "flex", flexDirection: "column", gap: VERTICAL_SECTION_GAP }, /* @__PURE__ */ React224.createElement(Box, { style: { visibility: "hidden" } }, /* @__PURE__ */ React224.createElement(FunDirectExecutionStatus, { directExecution })), /* @__PURE__ */ React224.createElement(
25285
+ return /* @__PURE__ */ React225.createElement(React225.Fragment, null, /* @__PURE__ */ React225.createElement(Box, { display: "flex", flexDirection: "column", gap: VERTICAL_SECTION_GAP }, /* @__PURE__ */ React225.createElement(Box, { style: { visibility: "hidden" } }, /* @__PURE__ */ React225.createElement(FunDirectExecutionStatus, { directExecution })), /* @__PURE__ */ React225.createElement(
25170
25286
  DirectExecutionSummaryHistory,
25171
25287
  {
25172
25288
  directExecution,
25173
25289
  isLoaded
25174
25290
  }
25175
- ), /* @__PURE__ */ React224.createElement(
25291
+ ), /* @__PURE__ */ React225.createElement(
25176
25292
  DirectExecutionOrderDetail,
25177
25293
  {
25178
25294
  directExecution,
25179
25295
  isLoaded
25180
25296
  }
25181
- ), /* @__PURE__ */ React224.createElement(
25297
+ ), /* @__PURE__ */ React225.createElement(
25182
25298
  HelpAlert,
25183
25299
  {
25184
25300
  onHelp: () => window.open(CONTACT_US_LINK, "_blank", "noopener")
25185
25301
  }
25186
25302
  )), bottomSectionRef && createPortal16(
25187
- /* @__PURE__ */ React224.createElement(
25303
+ /* @__PURE__ */ React225.createElement(
25188
25304
  Dialog.BottomBar,
25189
25305
  {
25190
25306
  onClose,
@@ -25215,26 +25331,26 @@ function DirectExecutionSummaryHistory({
25215
25331
  const clientMetadata = isLoaded && directExecution?.clientMetadata;
25216
25332
  const isAccountPayment = clientMetadata && clientMetadata.selectedPaymentMethodInfo?.paymentMethod === "balance" /* ACCOUNT_BALANCE */;
25217
25333
  const sourceRedirectAddress = isAccountPayment ? directExecution?.sourceOfFund?.split("|")?.[2] : null;
25218
- return /* @__PURE__ */ React224.createElement(React224.Fragment, null, /* @__PURE__ */ React224.createElement(FunTxSummaryBox, null, /* @__PURE__ */ React224.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React224.createElement(FunTxSummaryLineItemKeyText, { text: "Fill status" }), isLoaded ? /* @__PURE__ */ React224.createElement(
25334
+ return /* @__PURE__ */ React225.createElement(React225.Fragment, null, /* @__PURE__ */ React225.createElement(FunTxSummaryBox, null, /* @__PURE__ */ React225.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React225.createElement(FunTxSummaryLineItemKeyText, { text: "Fill status" }), isLoaded ? /* @__PURE__ */ React225.createElement(
25219
25335
  FunDirectExecutionStatusTagLoaded,
25220
25336
  {
25221
25337
  directExecution
25222
25338
  }
25223
- ) : /* @__PURE__ */ React224.createElement(FunSkeletonBlock, { height: "10", width: "44" })), isCompleted && /* @__PURE__ */ React224.createElement(React224.Fragment, null, /* @__PURE__ */ React224.createElement(FunDivider, { marginTop: "12", marginBottom: "12" }), /* @__PURE__ */ React224.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React224.createElement(FunTxSummaryLineItemKeyText, { text: "Total time" }), /* @__PURE__ */ React224.createElement(Text, { weight: "medium", size: "12" }, formatSecondsToReadableForm5(
25339
+ ) : /* @__PURE__ */ React225.createElement(FunSkeletonBlock, { height: "10", width: "44" })), isCompleted && /* @__PURE__ */ React225.createElement(React225.Fragment, null, /* @__PURE__ */ React225.createElement(FunDivider, { marginTop: "12", marginBottom: "12" }), /* @__PURE__ */ React225.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React225.createElement(FunTxSummaryLineItemKeyText, { text: "Total time" }), /* @__PURE__ */ React225.createElement(Text, { weight: "medium", size: "12" }, formatSecondsToReadableForm5(
25224
25340
  getDirectExecutionRunTimeMs(directExecution)
25225
- ))))), /* @__PURE__ */ React224.createElement(FunTxSummaryBox, null, clientMetadata ? /* @__PURE__ */ React224.createElement(
25341
+ ))))), /* @__PURE__ */ React225.createElement(FunTxSummaryBox, null, clientMetadata ? /* @__PURE__ */ React225.createElement(
25226
25342
  PaymentRouteSummary,
25227
25343
  {
25228
25344
  paymentMethodInfo: clientMetadata.selectedPaymentMethodInfo,
25229
25345
  customRecipient: clientMetadata.initSettings.config.customRecipient,
25230
- sourceRedirect: sourceRedirectAddress ? /* @__PURE__ */ React224.createElement(
25346
+ sourceRedirect: sourceRedirectAddress ? /* @__PURE__ */ React225.createElement(
25231
25347
  AddressRedirectButton,
25232
25348
  {
25233
25349
  chainId: directExecution.fromChainId,
25234
25350
  address: sourceRedirectAddress
25235
25351
  }
25236
25352
  ) : void 0,
25237
- destinationRedirect: /* @__PURE__ */ React224.createElement(
25353
+ destinationRedirect: /* @__PURE__ */ React225.createElement(
25238
25354
  AddressRedirectButton,
25239
25355
  {
25240
25356
  chainId: directExecution.toChainId,
@@ -25243,7 +25359,7 @@ function DirectExecutionSummaryHistory({
25243
25359
  }
25244
25360
  )
25245
25361
  }
25246
- ) : /* @__PURE__ */ React224.createElement(PaymentRouteSummarySkeletonLoader, null)), /* @__PURE__ */ React224.createElement(FunTxSummaryBox, null, /* @__PURE__ */ React224.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React224.createElement(FunTxSummaryLineItemKeyText, { text: receiveAmountLabel }), isLoaded && clientMetadata ? /* @__PURE__ */ React224.createElement(Box, { display: "flex", gap: "5", alignItems: "center" }, /* @__PURE__ */ React224.createElement(
25362
+ ) : /* @__PURE__ */ React225.createElement(PaymentRouteSummarySkeletonLoader, null)), /* @__PURE__ */ React225.createElement(FunTxSummaryBox, null, /* @__PURE__ */ React225.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React225.createElement(FunTxSummaryLineItemKeyText, { text: receiveAmountLabel }), isLoaded && clientMetadata ? /* @__PURE__ */ React225.createElement(Box, { display: "flex", gap: "5", alignItems: "center" }, /* @__PURE__ */ React225.createElement(
25247
25363
  AsyncImage,
25248
25364
  {
25249
25365
  src: clientMetadata.initSettings.config.iconSrc || "",
@@ -25252,11 +25368,11 @@ function DirectExecutionSummaryHistory({
25252
25368
  height: 15,
25253
25369
  useAsImage: true
25254
25370
  }
25255
- ), /* @__PURE__ */ React224.createElement(Text, { size: "12", weight: "medium" }, formatCryptoAndStringify7(
25371
+ ), /* @__PURE__ */ React225.createElement(Text, { size: "12", weight: "medium" }, formatCryptoAndStringify7(
25256
25372
  Number(
25257
25373
  clientMetadata.initSettings.config.targetAssetAmount || 0
25258
25374
  )
25259
- ))) : /* @__PURE__ */ React224.createElement(Box, { display: "flex", gap: "5", alignItems: "center" }, /* @__PURE__ */ React224.createElement(FunSkeletonCircle, { size: "15" }), /* @__PURE__ */ React224.createElement(FunSkeletonBlock, { height: "10", width: "93" })))));
25375
+ ))) : /* @__PURE__ */ React225.createElement(Box, { display: "flex", gap: "5", alignItems: "center" }, /* @__PURE__ */ React225.createElement(FunSkeletonCircle, { size: "15" }), /* @__PURE__ */ React225.createElement(FunSkeletonBlock, { height: "10", width: "93" })))));
25260
25376
  }
25261
25377
  function DirectExecutionOrderDetail({
25262
25378
  directExecution,
@@ -25264,7 +25380,7 @@ function DirectExecutionOrderDetail({
25264
25380
  }) {
25265
25381
  const [isExpanded, setIsExpanded] = useState59(false);
25266
25382
  const contentRef = useRef20(null);
25267
- return /* @__PURE__ */ React224.createElement(Box, { ref: contentRef, paddingX: "12" }, /* @__PURE__ */ React224.createElement(
25383
+ return /* @__PURE__ */ React225.createElement(Box, { ref: contentRef, paddingX: "12" }, /* @__PURE__ */ React225.createElement(
25268
25384
  Box,
25269
25385
  {
25270
25386
  display: "flex",
@@ -25282,9 +25398,9 @@ function DirectExecutionOrderDetail({
25282
25398
  },
25283
25399
  className: expandableTriggerBaseStyles
25284
25400
  },
25285
- /* @__PURE__ */ React224.createElement(Text, { size: "12", color: "tertiaryText" }, "More details"),
25286
- /* @__PURE__ */ React224.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, isLoaded ? /* @__PURE__ */ React224.createElement(ArrowIcon, { direction: isExpanded ? "down" : "right" }) : /* @__PURE__ */ React224.createElement(FunSkeletonCircle, { size: "16" }))
25287
- ), isLoaded && /* @__PURE__ */ React224.createElement(Box, { className: isExpanded ? contentExpanded : contentCollapsed }, /* @__PURE__ */ React224.createElement(Box, { paddingTop: "12" }, /* @__PURE__ */ React224.createElement(
25401
+ /* @__PURE__ */ React225.createElement(Text, { size: "12", color: "tertiaryText" }, "More details"),
25402
+ /* @__PURE__ */ React225.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, isLoaded ? /* @__PURE__ */ React225.createElement(ArrowIcon, { direction: isExpanded ? "down" : "right" }) : /* @__PURE__ */ React225.createElement(FunSkeletonCircle, { size: "16" }))
25403
+ ), isLoaded && /* @__PURE__ */ React225.createElement(Box, { className: isExpanded ? contentExpanded : contentCollapsed }, /* @__PURE__ */ React225.createElement(Box, { paddingTop: "12" }, /* @__PURE__ */ React225.createElement(
25288
25404
  DirectExecutionOrderDetailSection,
25289
25405
  {
25290
25406
  directExecution
@@ -25302,13 +25418,13 @@ function DirectExecutionOrderDetailSection({
25302
25418
  const { isProcessing, isFailed, isRefunded, isCompleted } = useCheckoutDirectExecutionHistory({ initDirectExecution: directExecution });
25303
25419
  const { txHash, createdTimeMs, fromChainId, toChainId, listenerInfo } = directExecution;
25304
25420
  const updateTime = getDirectExecutionUpdatedTimeMs({ directExecution });
25305
- return /* @__PURE__ */ React224.createElement(Box, { display: "flex", flexDirection: "column", gap: "12" }, /* @__PURE__ */ React224.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React224.createElement(Text, { color: "tertiaryText", size: "12" }, "Deposit tx"), /* @__PURE__ */ React224.createElement(Box, { display: "flex", alignItems: "center", gap: "4" }, /* @__PURE__ */ React224.createElement(Text, { color: "tertiaryText", size: "12" }, formatAddress7(txHash)), /* @__PURE__ */ React224.createElement(TransactionRedirectButton, { chainId: fromChainId, txHash }))), isCompleted && listenerInfo?.txHashes?.[0] ? /* @__PURE__ */ React224.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React224.createElement(Text, { color: "tertiaryText", size: "12" }, "Completion tx"), /* @__PURE__ */ React224.createElement(Box, { display: "flex", alignItems: "center", gap: "4" }, /* @__PURE__ */ React224.createElement(Text, { color: "tertiaryText", size: "12" }, formatAddress7(listenerInfo.txHashes[0])), /* @__PURE__ */ React224.createElement(
25421
+ return /* @__PURE__ */ React225.createElement(Box, { display: "flex", flexDirection: "column", gap: "12" }, /* @__PURE__ */ React225.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React225.createElement(Text, { color: "tertiaryText", size: "12" }, "Deposit tx"), /* @__PURE__ */ React225.createElement(Box, { display: "flex", alignItems: "center", gap: "4" }, /* @__PURE__ */ React225.createElement(Text, { color: "tertiaryText", size: "12" }, formatAddress7(txHash)), /* @__PURE__ */ React225.createElement(TransactionRedirectButton, { chainId: fromChainId, txHash }))), isCompleted && listenerInfo?.txHashes?.[0] ? /* @__PURE__ */ React225.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React225.createElement(Text, { color: "tertiaryText", size: "12" }, "Completion tx"), /* @__PURE__ */ React225.createElement(Box, { display: "flex", alignItems: "center", gap: "4" }, /* @__PURE__ */ React225.createElement(Text, { color: "tertiaryText", size: "12" }, formatAddress7(listenerInfo.txHashes[0])), /* @__PURE__ */ React225.createElement(
25306
25422
  TransactionRedirectButton,
25307
25423
  {
25308
25424
  chainId: toChainId,
25309
25425
  txHash: listenerInfo.txHashes[0]
25310
25426
  }
25311
- ))) : null, /* @__PURE__ */ React224.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React224.createElement(Text, { color: "tertiaryText", size: "12" }, "Order submitted"), /* @__PURE__ */ React224.createElement(Text, { color: "tertiaryText", size: "12" }, getTimestamp2(createdTimeMs))), !isProcessing && updateTime && /* @__PURE__ */ React224.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React224.createElement(Text, { color: "tertiaryText", size: "12" }, `Order ${isFailed ? "failed" : isRefunded ? "refunded" : "filled"}`), /* @__PURE__ */ React224.createElement(Text, { color: "tertiaryText", size: "12" }, getTimestamp2(updateTime))));
25427
+ ))) : null, /* @__PURE__ */ React225.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React225.createElement(Text, { color: "tertiaryText", size: "12" }, "Order submitted"), /* @__PURE__ */ React225.createElement(Text, { color: "tertiaryText", size: "12" }, getTimestamp2(createdTimeMs))), !isProcessing && updateTime && /* @__PURE__ */ React225.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React225.createElement(Text, { color: "tertiaryText", size: "12" }, `Order ${isFailed ? "failed" : isRefunded ? "refunded" : "filled"}`), /* @__PURE__ */ React225.createElement(Text, { color: "tertiaryText", size: "12" }, getTimestamp2(updateTime))));
25312
25428
  }
25313
25429
 
25314
25430
  // src/components/FunCheckoutHistory/FunCheckoutHistoryContent.tsx
@@ -25328,7 +25444,7 @@ function FunCheckoutHistoryContent({
25328
25444
  });
25329
25445
  const isDirectExecutionRecord = isCheckoutHistoryDirectExecution(depositAddress);
25330
25446
  if (isDirectExecutionRecord && directExecution) {
25331
- return /* @__PURE__ */ React225.createElement(
25447
+ return /* @__PURE__ */ React226.createElement(
25332
25448
  FunDirectExecutionHistoryDetail,
25333
25449
  {
25334
25450
  bottomBarId,
@@ -25339,7 +25455,7 @@ function FunCheckoutHistoryContent({
25339
25455
  }
25340
25456
  );
25341
25457
  }
25342
- return /* @__PURE__ */ React225.createElement(Box, null, currentPage === "detail" /* DETAIL */ ? /* @__PURE__ */ React225.createElement(
25458
+ return /* @__PURE__ */ React226.createElement(Box, null, currentPage === "detail" /* DETAIL */ ? /* @__PURE__ */ React226.createElement(
25343
25459
  FunCheckoutHistoryDetail,
25344
25460
  {
25345
25461
  includeGenerateActionsParams,
@@ -25349,7 +25465,7 @@ function FunCheckoutHistoryContent({
25349
25465
  onClose,
25350
25466
  onAnimationComplete
25351
25467
  }
25352
- ) : currentPage === "help" /* HELP */ ? /* @__PURE__ */ React225.createElement(
25468
+ ) : currentPage === "help" /* HELP */ ? /* @__PURE__ */ React226.createElement(
25353
25469
  FunCheckoutHistoryHelp,
25354
25470
  {
25355
25471
  checkoutHistoryInfo,
@@ -25361,7 +25477,7 @@ function FunCheckoutHistoryContent({
25361
25477
 
25362
25478
  // src/components/FunCheckoutHistory/useCustomStatusAnimationAboveTopbar.tsx
25363
25479
  import { clamp as clamp3 } from "@funkit/utils";
25364
- import React226, { useRef as useRef21, useState as useState60 } from "react";
25480
+ import React227, { useRef as useRef21, useState as useState60 } from "react";
25365
25481
  var TOPBAR_HEIGHT = 56;
25366
25482
  var DURATION_MS = 200;
25367
25483
  var STATUS_SIZE_PENDING = 76;
@@ -25399,7 +25515,7 @@ function useCustomStatusAnimationAboveTopbar({
25399
25515
  };
25400
25516
  return {
25401
25517
  onScroll: (event) => setScrollPos(event.target.scrollTop),
25402
- topbar: /* @__PURE__ */ React226.createElement(React226.Fragment, null, /* @__PURE__ */ React226.createElement("div", { className: topbarFadeWrapper }, topbar, /* @__PURE__ */ React226.createElement(
25518
+ topbar: /* @__PURE__ */ React227.createElement(React227.Fragment, null, /* @__PURE__ */ React227.createElement("div", { className: topbarFadeWrapper }, topbar, /* @__PURE__ */ React227.createElement(
25403
25519
  "div",
25404
25520
  {
25405
25521
  className: topbarFadeBackground,
@@ -25408,7 +25524,7 @@ function useCustomStatusAnimationAboveTopbar({
25408
25524
  transition: `opacity ${DURATION_MS / 1e3}s ease-in`
25409
25525
  }
25410
25526
  }
25411
- )), isCheckoutDetailView && depositAddress && /* @__PURE__ */ React226.createElement(
25527
+ )), isCheckoutDetailView && depositAddress && /* @__PURE__ */ React227.createElement(
25412
25528
  "div",
25413
25529
  {
25414
25530
  className: topbarOverflowContent,
@@ -25426,7 +25542,7 @@ function useCustomStatusAnimationAboveTopbar({
25426
25542
  top: TOPBAR_HEIGHT + paddingTop - scrollPos
25427
25543
  }
25428
25544
  },
25429
- isCheckoutHistoryDirectExecution(depositAddress) ? /* @__PURE__ */ React226.createElement(FunDirectExecutionStatus, { directExecution: directExecutionInfo }) : /* @__PURE__ */ React226.createElement(FunCheckoutStatus, { checkoutHistoryItem: checkoutHistoryInfo })
25545
+ isCheckoutHistoryDirectExecution(depositAddress) ? /* @__PURE__ */ React227.createElement(FunDirectExecutionStatus, { directExecution: directExecutionInfo }) : /* @__PURE__ */ React227.createElement(FunCheckoutStatus, { checkoutHistoryItem: checkoutHistoryInfo })
25430
25546
  )),
25431
25547
  withTopDivider: isCheckoutDetailView ? scrollPos > startFadePos ? "scroll" : "never" : withTopDivider
25432
25548
  };
@@ -25444,14 +25560,14 @@ function useCheckoutModalTitle(depositAddress, defaultTitle) {
25444
25560
  import { IN_PROGRESS_CHECKOUT_STATES as IN_PROGRESS_CHECKOUT_STATES2 } from "@funkit/api-base";
25445
25561
  import { formatTimestampToDate, fullMonthNames } from "@funkit/utils";
25446
25562
  import clsx20 from "clsx";
25447
- import React235, { useEffect as useEffect44, useMemo as useMemo43, useRef as useRef22, useState as useState62 } from "react";
25563
+ import React236, { useEffect as useEffect44, useMemo as useMemo43, useRef as useRef22, useState as useState62 } from "react";
25448
25564
  import { Virtuoso } from "react-virtuoso";
25449
25565
  import { useAccount as useAccount6 } from "wagmi";
25450
25566
 
25451
25567
  // src/components/Icons/GreenRoundCheckmark.tsx
25452
- import React227 from "react";
25568
+ import React228 from "react";
25453
25569
  var GreenRoundCheckmark = ({ size = 15 }) => {
25454
- return /* @__PURE__ */ React227.createElement(
25570
+ return /* @__PURE__ */ React228.createElement(
25455
25571
  "svg",
25456
25572
  {
25457
25573
  width: size,
@@ -25460,7 +25576,7 @@ var GreenRoundCheckmark = ({ size = 15 }) => {
25460
25576
  fill: "none",
25461
25577
  xmlns: "http://www.w3.org/2000/svg"
25462
25578
  },
25463
- /* @__PURE__ */ React227.createElement(
25579
+ /* @__PURE__ */ React228.createElement(
25464
25580
  "path",
25465
25581
  {
25466
25582
  d: "M5 10.4551C4.31315 10.4551 3.66862 10.3249 3.06641 10.0645C2.46419 9.80729 1.93522 9.45085 1.47949 8.99512C1.02376 8.53613 0.66569 8.00716 0.405273 7.4082C0.148112 6.80599 0.0195312 6.16146 0.0195312 5.47461C0.0195312 4.78776 0.148112 4.14323 0.405273 3.54102C0.66569 2.9388 1.02376 2.40983 1.47949 1.9541C1.93522 1.49837 2.46419 1.14193 3.06641 0.884766C3.66862 0.624349 4.31315 0.494141 5 0.494141C5.68685 0.494141 6.33138 0.624349 6.93359 0.884766C7.53581 1.14193 8.06478 1.49837 8.52051 1.9541C8.97624 2.40983 9.33268 2.9388 9.58984 3.54102C9.85026 4.14323 9.98047 4.78776 9.98047 5.47461C9.98047 6.16146 9.85026 6.80599 9.58984 7.4082C9.33268 8.00716 8.97624 8.53613 8.52051 8.99512C8.06478 9.45085 7.53581 9.80729 6.93359 10.0645C6.33138 10.3249 5.68685 10.4551 5 10.4551ZM4.45312 7.85742C4.53776 7.85742 4.61426 7.83789 4.68262 7.79883C4.75098 7.75977 4.8112 7.70117 4.86328 7.62305L7.1582 4.00488C7.1875 3.95605 7.21517 3.90397 7.24121 3.84863C7.26725 3.79329 7.28027 3.73796 7.28027 3.68262C7.28027 3.56868 7.23796 3.47917 7.15332 3.41406C7.06868 3.3457 6.97428 3.31152 6.87012 3.31152C6.72689 3.31152 6.6097 3.38639 6.51855 3.53613L4.43359 6.88574L3.44238 5.60645C3.38053 5.52507 3.32031 5.46973 3.26172 5.44043C3.20638 5.41113 3.1429 5.39648 3.07129 5.39648C2.96061 5.39648 2.86784 5.43717 2.79297 5.51855C2.7181 5.59668 2.68066 5.69108 2.68066 5.80176C2.68066 5.8571 2.69043 5.91243 2.70996 5.96777C2.73275 6.01986 2.76204 6.07031 2.79785 6.11914L4.02344 7.62305C4.08854 7.70768 4.15527 7.7679 4.22363 7.80371C4.29199 7.83952 4.36849 7.85742 4.45312 7.85742Z",
@@ -25471,10 +25587,10 @@ var GreenRoundCheckmark = ({ size = 15 }) => {
25471
25587
  };
25472
25588
 
25473
25589
  // src/modals/ProfileDetails/FunProfileViews/Home/BalanceSection.tsx
25474
- import React228 from "react";
25590
+ import React229 from "react";
25475
25591
  import { formatCurrencyAndStringify as formatCurrencyAndStringify12 } from "@funkit/utils";
25476
25592
  var BalanceSection = ({ totalBalance }) => {
25477
- return /* @__PURE__ */ React228.createElement(Box, { display: "flex", flexDirection: "column", gap: "16" }, /* @__PURE__ */ React228.createElement(Box, { display: "flex", justifyContent: "center", alignItems: "center" }, /* @__PURE__ */ React228.createElement(Text, { as: "h1", color: "primaryText", weight: "medium", size: "40" }, formatCurrencyAndStringify12(
25593
+ return /* @__PURE__ */ React229.createElement(Box, { display: "flex", flexDirection: "column", gap: "16" }, /* @__PURE__ */ React229.createElement(Box, { display: "flex", justifyContent: "center", alignItems: "center" }, /* @__PURE__ */ React229.createElement(Text, { as: "h1", color: "primaryText", weight: "medium", size: "40" }, formatCurrencyAndStringify12(
25478
25594
  Number.parseFloat(totalBalance.toString())
25479
25595
  ))));
25480
25596
  };
@@ -25493,12 +25609,12 @@ import {
25493
25609
  isNotNullish as isNotNullish11
25494
25610
  } from "@funkit/utils";
25495
25611
  import clsx19 from "clsx";
25496
- import React230 from "react";
25612
+ import React231 from "react";
25497
25613
 
25498
25614
  // src/components/Icons/RedRoundErrorCross.tsx
25499
- import React229 from "react";
25615
+ import React230 from "react";
25500
25616
  var RedRoundErrorCross = ({ size = 15 }) => {
25501
- return /* @__PURE__ */ React229.createElement(
25617
+ return /* @__PURE__ */ React230.createElement(
25502
25618
  "svg",
25503
25619
  {
25504
25620
  width: size,
@@ -25507,8 +25623,8 @@ var RedRoundErrorCross = ({ size = 15 }) => {
25507
25623
  fill: "none",
25508
25624
  xmlns: "http://www.w3.org/2000/svg"
25509
25625
  },
25510
- /* @__PURE__ */ React229.createElement("circle", { cx: "4", cy: "4.5", r: "4", fill: "#F34126" }),
25511
- /* @__PURE__ */ React229.createElement(
25626
+ /* @__PURE__ */ React230.createElement("circle", { cx: "4", cy: "4.5", r: "4", fill: "#F34126" }),
25627
+ /* @__PURE__ */ React230.createElement(
25512
25628
  "path",
25513
25629
  {
25514
25630
  d: "M2.57111 2.59761L4 4.02654L5.42889 2.59761C5.54807 2.47844 5.7369 2.46734 5.87797 2.57755L5.90238 2.59979C6.03254 2.72994 6.03254 2.94096 5.90238 3.07111L4.47346 4.5L5.90238 5.92889C6.02156 6.04806 6.03266 6.2369 5.92244 6.37797L5.90022 6.40239C5.77007 6.53254 5.55904 6.53254 5.42888 6.40238L4 4.97346L2.57111 6.40239C2.45193 6.52156 2.2631 6.53266 2.12203 6.42245L2.09761 6.40021C1.96746 6.27006 1.96746 6.05904 2.09761 5.92889L3.52654 4.5L2.09761 3.07111C1.97844 2.95194 1.96734 2.7631 2.07755 2.62203L2.09978 2.59761C2.22993 2.46746 2.44095 2.46746 2.57111 2.59761ZM2.36024 6.33149L2.35293 6.33242C2.35536 6.33217 2.3578 6.33185 2.36024 6.33149ZM2.31088 6.33152L2.31385 6.33194L2.31088 6.33152ZM2.3814 6.3269L2.37242 6.3292C2.37542 6.32852 2.37842 6.32775 2.3814 6.3269ZM2.40026 6.32026L2.39333 6.323C2.39564 6.32215 2.39795 6.32123 2.40026 6.32026ZM2.25106 6.31043L2.23334 6.29839C2.24074 6.30415 2.2485 6.30919 2.25656 6.31353L2.25106 6.31043ZM2.41976 6.31047L2.4144 6.31349C2.4144 6.31349 2.41796 6.31153 2.41976 6.31047ZM5.81353 6.24343L5.81042 6.24894L5.79839 6.26667C5.80415 6.25927 5.80919 6.25149 5.81353 6.24343ZM5.82275 6.2231L5.82025 6.22939C5.82114 6.22729 5.82197 6.2252 5.82275 6.2231ZM5.82913 6.20184L5.82703 6.21006C5.82778 6.20739 5.8285 6.20462 5.82913 6.20184ZM5.83241 6.18215L5.83152 6.18912C5.83186 6.18683 5.83216 6.18449 5.83241 6.18215ZM5.66455 2.83328L4 4.49787L2.33545 2.83328L2.33327 2.83545L3.99787 4.5L2.33327 6.16455L2.33545 6.16672L4 4.50213L5.66455 6.16672L5.66673 6.16455L4.00213 4.5L5.66673 2.83545L5.66455 2.83328ZM5.83331 6.16189L5.83332 6.16672L5.83331 6.16189ZM5.83149 6.13977L5.83242 6.14707C5.83216 6.14465 5.83186 6.1422 5.83149 6.13977ZM5.8269 6.1186L5.8292 6.12758C5.82852 6.12458 5.82776 6.12158 5.8269 6.1186ZM5.82026 6.09974L5.823 6.10667C5.82214 6.10436 5.82123 6.10204 5.82026 6.09974ZM5.81048 6.08024L5.81349 6.0856C5.81349 6.0856 5.81153 6.08203 5.81048 6.08024ZM2.18651 2.9144L2.18903 2.9189L2.18651 2.9144ZM2.177 2.89333L2.17924 2.89907C2.17845 2.89716 2.17772 2.89526 2.177 2.89333ZM2.1708 2.87242L2.17226 2.87835C2.17174 2.87638 2.17125 2.87441 2.1708 2.87242ZM2.16751 2.85227L2.16806 2.85705L2.16751 2.85227ZM2.16674 2.83061L2.16667 2.83545L2.16674 2.83061ZM2.16848 2.81088L2.16806 2.81385L2.16848 2.81088ZM2.18957 2.75106L2.20161 2.73333C2.19585 2.74073 2.1908 2.74851 2.18647 2.75657L2.18957 2.75106ZM2.41433 2.68647L2.41984 2.68957L2.43756 2.70161C2.43016 2.69585 2.42238 2.69081 2.41433 2.68647ZM5.5856 2.68651L5.5811 2.68903L5.5856 2.68651ZM2.2565 2.68651L2.25199 2.68903L2.2565 2.68651ZM5.74344 2.68647L5.74894 2.68957L5.76666 2.70161C5.75926 2.69585 5.75149 2.69081 5.74344 2.68647ZM2.27691 2.67725L2.27183 2.67924L2.27691 2.67725ZM2.3933 2.67699L2.40029 2.67975C2.39796 2.67877 2.39564 2.67785 2.3933 2.67699ZM5.60667 2.677L5.60093 2.67924C5.60284 2.67846 5.60473 2.67771 5.60667 2.677ZM5.7231 2.67725L5.72939 2.67975C5.72729 2.67887 5.7252 2.67804 5.7231 2.67725ZM2.29821 2.67086L2.29254 2.67226L2.29821 2.67086ZM2.37241 2.6708L2.38143 2.6731C2.37842 2.67225 2.37542 2.67148 2.37241 2.6708ZM5.62758 2.6708L5.62165 2.67226C5.62363 2.67173 5.62559 2.67125 5.62758 2.6708ZM5.70184 2.67087L5.71006 2.67297C5.7074 2.67221 5.70463 2.67151 5.70184 2.67087ZM2.31856 2.66752L2.31385 2.66806L2.31856 2.66752ZM2.35224 2.66751L2.36022 2.66851C2.35757 2.66811 2.35491 2.66778 2.35224 2.66751ZM5.64774 2.66751L5.64295 2.66806L5.64774 2.66751ZM5.68148 2.66752L5.68912 2.66848C5.68661 2.6681 5.68405 2.66778 5.68148 2.66752ZM5.65972 2.66674L5.66941 2.66674C5.66618 2.66664 5.66295 2.66664 5.65972 2.66674ZM2.33059 2.66674L2.34028 2.66674C2.33705 2.66664 2.33382 2.66664 2.33059 2.66674Z",
@@ -25543,7 +25659,7 @@ var HomeCheckoutDisplayRow = ({
25543
25659
  const checkoutClientMetadata = checkoutHistoryItem.clientMetadata;
25544
25660
  const getStatusElement = () => {
25545
25661
  if (isCompleted) {
25546
- return /* @__PURE__ */ React230.createElement(
25662
+ return /* @__PURE__ */ React231.createElement(
25547
25663
  Box,
25548
25664
  {
25549
25665
  display: "flex",
@@ -25551,12 +25667,12 @@ var HomeCheckoutDisplayRow = ({
25551
25667
  gap: STATUS_FLEX_GAP_X,
25552
25668
  alignItems: "center"
25553
25669
  },
25554
- /* @__PURE__ */ React230.createElement(GreenRoundCheckmark, { size: Number.parseInt(STATUS_ICON_SIZE) }),
25555
- /* @__PURE__ */ React230.createElement(Text, { size: STATUS_TEXT_SIZE, color: "success" }, "Completed")
25670
+ /* @__PURE__ */ React231.createElement(GreenRoundCheckmark, { size: Number.parseInt(STATUS_ICON_SIZE) }),
25671
+ /* @__PURE__ */ React231.createElement(Text, { size: STATUS_TEXT_SIZE, color: "success" }, "Completed")
25556
25672
  );
25557
25673
  }
25558
25674
  if (isError || isFailed || isExpired) {
25559
- return /* @__PURE__ */ React230.createElement(
25675
+ return /* @__PURE__ */ React231.createElement(
25560
25676
  Box,
25561
25677
  {
25562
25678
  display: "flex",
@@ -25564,12 +25680,12 @@ var HomeCheckoutDisplayRow = ({
25564
25680
  gap: STATUS_FLEX_GAP_X,
25565
25681
  alignItems: "center"
25566
25682
  },
25567
- /* @__PURE__ */ React230.createElement(RedRoundErrorCross, { size: Number.parseInt(STATUS_ICON_SIZE) }),
25568
- /* @__PURE__ */ React230.createElement(Text, { size: STATUS_TEXT_SIZE, color: "error" }, "Failed")
25683
+ /* @__PURE__ */ React231.createElement(RedRoundErrorCross, { size: Number.parseInt(STATUS_ICON_SIZE) }),
25684
+ /* @__PURE__ */ React231.createElement(Text, { size: STATUS_TEXT_SIZE, color: "error" }, "Failed")
25569
25685
  );
25570
25686
  }
25571
25687
  if (isProcessing) {
25572
- return /* @__PURE__ */ React230.createElement(
25688
+ return /* @__PURE__ */ React231.createElement(
25573
25689
  Box,
25574
25690
  {
25575
25691
  display: "flex",
@@ -25577,7 +25693,7 @@ var HomeCheckoutDisplayRow = ({
25577
25693
  gap: STATUS_FLEX_GAP_X,
25578
25694
  alignItems: "center"
25579
25695
  },
25580
- /* @__PURE__ */ React230.createElement(
25696
+ /* @__PURE__ */ React231.createElement(
25581
25697
  Box,
25582
25698
  {
25583
25699
  width: STATUS_ICON_SIZE,
@@ -25586,11 +25702,11 @@ var HomeCheckoutDisplayRow = ({
25586
25702
  background: "standby"
25587
25703
  }
25588
25704
  ),
25589
- /* @__PURE__ */ React230.createElement(Text, { size: STATUS_TEXT_SIZE, color: "standby" }, "Processing")
25705
+ /* @__PURE__ */ React231.createElement(Text, { size: STATUS_TEXT_SIZE, color: "standby" }, "Processing")
25590
25706
  );
25591
25707
  }
25592
25708
  };
25593
- return /* @__PURE__ */ React230.createElement(
25709
+ return /* @__PURE__ */ React231.createElement(
25594
25710
  Box,
25595
25711
  {
25596
25712
  className: clsx19(
@@ -25615,7 +25731,7 @@ var HomeCheckoutDisplayRow = ({
25615
25731
  }
25616
25732
  }
25617
25733
  },
25618
- /* @__PURE__ */ React230.createElement(Box, { display: "flex", alignItems: "center", gap: ROW_FLEX_GAP_X, width: "full" }, isNotNullish11(checkoutClientMetadata.initSettings.config.iconSrc) && /* @__PURE__ */ React230.createElement(
25734
+ /* @__PURE__ */ React231.createElement(Box, { display: "flex", alignItems: "center", gap: ROW_FLEX_GAP_X, width: "full" }, isNotNullish11(checkoutClientMetadata.initSettings.config.iconSrc) && /* @__PURE__ */ React231.createElement(
25619
25735
  Box,
25620
25736
  {
25621
25737
  display: "flex",
@@ -25626,7 +25742,7 @@ var HomeCheckoutDisplayRow = ({
25626
25742
  minWidth: "29px"
25627
25743
  }
25628
25744
  },
25629
- /* @__PURE__ */ React230.createElement(
25745
+ /* @__PURE__ */ React231.createElement(
25630
25746
  FunAssetAvatar,
25631
25747
  {
25632
25748
  assetSrc: checkoutClientMetadata.initSettings.config.iconSrc,
@@ -25636,7 +25752,7 @@ var HomeCheckoutDisplayRow = ({
25636
25752
  chainId: checkoutClientMetadata.initSettings.config.targetChain
25637
25753
  }
25638
25754
  )
25639
- ), /* @__PURE__ */ React230.createElement(Box, { display: "flex", flexDirection: "column", width: "full" }, /* @__PURE__ */ React230.createElement(
25755
+ ), /* @__PURE__ */ React231.createElement(Box, { display: "flex", flexDirection: "column", width: "full" }, /* @__PURE__ */ React231.createElement(
25640
25756
  Box,
25641
25757
  {
25642
25758
  display: "flex",
@@ -25644,19 +25760,19 @@ var HomeCheckoutDisplayRow = ({
25644
25760
  alignItems: "center",
25645
25761
  gap: "16"
25646
25762
  },
25647
- /* @__PURE__ */ React230.createElement(Text, { size: TEXT_SIZE_MEDIUM2, weight: "medium", color: "primaryText" }, checkoutClientMetadata.initSettings.config.checkoutItemTitle),
25648
- /* @__PURE__ */ React230.createElement(Text, { size: TEXT_SIZE_MEDIUM2, weight: "medium", color: "primaryText" }, `${formatCurrencyAndStringify13(
25763
+ /* @__PURE__ */ React231.createElement(Text, { size: TEXT_SIZE_MEDIUM2, weight: "medium", color: "primaryText" }, checkoutClientMetadata.initSettings.config.checkoutItemTitle),
25764
+ /* @__PURE__ */ React231.createElement(Text, { size: TEXT_SIZE_MEDIUM2, weight: "medium", color: "primaryText" }, `${formatCurrencyAndStringify13(
25649
25765
  checkoutClientMetadata?.finalDollarValue || 0
25650
25766
  )} USD`)
25651
- ), /* @__PURE__ */ React230.createElement(Box, { display: "flex", justifyContent: "space-between", gap: "16" }, /* @__PURE__ */ React230.createElement(Text, { size: TEXT_SIZE_SMALL2, color: "secondaryText" }, formatTimestamp3(new Date(checkoutHistoryItem.createdTimeMs), {
25767
+ ), /* @__PURE__ */ React231.createElement(Box, { display: "flex", justifyContent: "space-between", gap: "16" }, /* @__PURE__ */ React231.createElement(Text, { size: TEXT_SIZE_SMALL2, color: "secondaryText" }, formatTimestamp3(new Date(checkoutHistoryItem.createdTimeMs), {
25652
25768
  year: "none",
25653
25769
  seconds: "none",
25654
25770
  month: "short"
25655
- })), /* @__PURE__ */ React230.createElement(Box, null, getStatusElement()))))
25771
+ })), /* @__PURE__ */ React231.createElement(Box, null, getStatusElement()))))
25656
25772
  );
25657
25773
  };
25658
25774
  var HomeCheckoutDisplayRowSkeleton = () => {
25659
- return /* @__PURE__ */ React230.createElement(
25775
+ return /* @__PURE__ */ React231.createElement(
25660
25776
  Box,
25661
25777
  {
25662
25778
  display: "flex",
@@ -25666,8 +25782,8 @@ var HomeCheckoutDisplayRowSkeleton = () => {
25666
25782
  paddingX: PROFILE_SIDE_PADDING,
25667
25783
  paddingY: ROW_PADDING_Y
25668
25784
  },
25669
- /* @__PURE__ */ React230.createElement(FunSkeletonCircle, { size: DEFAULT_ICON_SIZE }),
25670
- /* @__PURE__ */ React230.createElement(Box, { display: "flex", flexDirection: "column", style: { flexGrow: 1 } }, /* @__PURE__ */ React230.createElement(
25785
+ /* @__PURE__ */ React231.createElement(FunSkeletonCircle, { size: DEFAULT_ICON_SIZE }),
25786
+ /* @__PURE__ */ React231.createElement(Box, { display: "flex", flexDirection: "column", style: { flexGrow: 1 } }, /* @__PURE__ */ React231.createElement(
25671
25787
  FunSkeletonBlock,
25672
25788
  {
25673
25789
  height: TEXT_SIZE_MEDIUM2,
@@ -25675,7 +25791,7 @@ var HomeCheckoutDisplayRowSkeleton = () => {
25675
25791
  marginTop: TEXT_SKELETON_MARGIN_TOP2,
25676
25792
  width: TEXT_SKELETON_WIDTH_LONG2
25677
25793
  }
25678
- ), /* @__PURE__ */ React230.createElement(
25794
+ ), /* @__PURE__ */ React231.createElement(
25679
25795
  FunSkeletonBlock,
25680
25796
  {
25681
25797
  height: TEXT_SIZE_SMALL2,
@@ -25684,7 +25800,7 @@ var HomeCheckoutDisplayRowSkeleton = () => {
25684
25800
  width: TEXT_SKELETON_WIDTH_MEDIUM
25685
25801
  }
25686
25802
  )),
25687
- /* @__PURE__ */ React230.createElement(Box, { alignItems: "flex-end", display: "flex", flexDirection: "column" }, /* @__PURE__ */ React230.createElement(
25803
+ /* @__PURE__ */ React231.createElement(Box, { alignItems: "flex-end", display: "flex", flexDirection: "column" }, /* @__PURE__ */ React231.createElement(
25688
25804
  FunSkeletonBlock,
25689
25805
  {
25690
25806
  height: TEXT_SIZE_MEDIUM2,
@@ -25692,7 +25808,7 @@ var HomeCheckoutDisplayRowSkeleton = () => {
25692
25808
  marginTop: TEXT_SKELETON_MARGIN_TOP2,
25693
25809
  width: TEXT_SKELETON_WIDTH_MEDIUM
25694
25810
  }
25695
- ), /* @__PURE__ */ React230.createElement(
25811
+ ), /* @__PURE__ */ React231.createElement(
25696
25812
  FunSkeletonBlock,
25697
25813
  {
25698
25814
  height: STATUS_TEXT_SIZE,
@@ -25710,7 +25826,7 @@ import {
25710
25826
  formatCurrencyAndStringify as formatCurrencyAndStringify14,
25711
25827
  isMobile as isMobile10
25712
25828
  } from "@funkit/utils";
25713
- import React231 from "react";
25829
+ import React232 from "react";
25714
25830
  var TEXT_SIZE = "13";
25715
25831
  var TEXT_SKELETON_MARGIN_TOP3 = "2";
25716
25832
  var TEXT_SKELETON_MARGIN_BOTTOM3 = "3";
@@ -25725,7 +25841,7 @@ var HomeTokenBalanceDisplayRow = ({
25725
25841
  asset.tokenBalance,
25726
25842
  asset.decimals
25727
25843
  );
25728
- return /* @__PURE__ */ React231.createElement(
25844
+ return /* @__PURE__ */ React232.createElement(
25729
25845
  Box,
25730
25846
  {
25731
25847
  display: "flex",
@@ -25739,7 +25855,7 @@ var HomeTokenBalanceDisplayRow = ({
25739
25855
  paddingY: ROW_PADDING_Y2,
25740
25856
  className: baseStyles4
25741
25857
  },
25742
- /* @__PURE__ */ React231.createElement(
25858
+ /* @__PURE__ */ React232.createElement(
25743
25859
  Box,
25744
25860
  {
25745
25861
  display: "flex",
@@ -25748,7 +25864,7 @@ var HomeTokenBalanceDisplayRow = ({
25748
25864
  alignItems: "flex-start",
25749
25865
  height: "full"
25750
25866
  },
25751
- /* @__PURE__ */ React231.createElement(
25867
+ /* @__PURE__ */ React232.createElement(
25752
25868
  FunAssetAvatar,
25753
25869
  {
25754
25870
  assetSrc: asset.logo,
@@ -25758,22 +25874,22 @@ var HomeTokenBalanceDisplayRow = ({
25758
25874
  assetIconSize: DEFAULT_ICON_SIZE
25759
25875
  }
25760
25876
  ),
25761
- /* @__PURE__ */ React231.createElement(
25877
+ /* @__PURE__ */ React232.createElement(
25762
25878
  Box,
25763
25879
  {
25764
25880
  display: "flex",
25765
25881
  flexDirection: "column",
25766
25882
  justifyContent: "space-between"
25767
25883
  },
25768
- /* @__PURE__ */ React231.createElement(Text, { color: "primaryText", size: TEXT_SIZE, weight: "regular" }, asset.name),
25769
- /* @__PURE__ */ React231.createElement(Text, { color: "secondaryText", size: TEXT_SIZE, weight: "regular" }, formatCryptoAndStringify8(normalizedAmount, asset.symbol))
25884
+ /* @__PURE__ */ React232.createElement(Text, { color: "primaryText", size: TEXT_SIZE, weight: "regular" }, asset.name),
25885
+ /* @__PURE__ */ React232.createElement(Text, { color: "secondaryText", size: TEXT_SIZE, weight: "regular" }, formatCryptoAndStringify8(normalizedAmount, asset.symbol))
25770
25886
  )
25771
25887
  ),
25772
- /* @__PURE__ */ React231.createElement(Text, { color: "primaryText", size: TEXT_SIZE, weight: "regular" }, formatCurrencyAndStringify14(asset.totalUsdValue || 0))
25888
+ /* @__PURE__ */ React232.createElement(Text, { color: "primaryText", size: TEXT_SIZE, weight: "regular" }, formatCurrencyAndStringify14(asset.totalUsdValue || 0))
25773
25889
  );
25774
25890
  };
25775
25891
  var HomeTokenBalanceDisplayRowSkeleton = () => {
25776
- return /* @__PURE__ */ React231.createElement(
25892
+ return /* @__PURE__ */ React232.createElement(
25777
25893
  Box,
25778
25894
  {
25779
25895
  display: "flex",
@@ -25783,8 +25899,8 @@ var HomeTokenBalanceDisplayRowSkeleton = () => {
25783
25899
  paddingX: PROFILE_SIDE_PADDING,
25784
25900
  paddingY: ROW_PADDING_Y2
25785
25901
  },
25786
- /* @__PURE__ */ React231.createElement(FunSkeletonCircle, { size: DEFAULT_ICON_SIZE }),
25787
- /* @__PURE__ */ React231.createElement(Box, { display: "flex", flexDirection: "column", style: { flexGrow: 1 } }, /* @__PURE__ */ React231.createElement(
25902
+ /* @__PURE__ */ React232.createElement(FunSkeletonCircle, { size: DEFAULT_ICON_SIZE }),
25903
+ /* @__PURE__ */ React232.createElement(Box, { display: "flex", flexDirection: "column", style: { flexGrow: 1 } }, /* @__PURE__ */ React232.createElement(
25788
25904
  FunSkeletonBlock,
25789
25905
  {
25790
25906
  height: TEXT_SIZE,
@@ -25792,7 +25908,7 @@ var HomeTokenBalanceDisplayRowSkeleton = () => {
25792
25908
  marginTop: TEXT_SKELETON_MARGIN_TOP3,
25793
25909
  width: TEXT_SKELETON_WIDTH_SHORT3
25794
25910
  }
25795
- ), /* @__PURE__ */ React231.createElement(
25911
+ ), /* @__PURE__ */ React232.createElement(
25796
25912
  FunSkeletonBlock,
25797
25913
  {
25798
25914
  height: TEXT_SIZE,
@@ -25801,7 +25917,7 @@ var HomeTokenBalanceDisplayRowSkeleton = () => {
25801
25917
  width: TEXT_SKELETON_WIDTH_LONG3
25802
25918
  }
25803
25919
  )),
25804
- /* @__PURE__ */ React231.createElement(
25920
+ /* @__PURE__ */ React232.createElement(
25805
25921
  FunSkeletonBlock,
25806
25922
  {
25807
25923
  height: TEXT_SIZE,
@@ -25814,13 +25930,13 @@ var HomeTokenBalanceDisplayRowSkeleton = () => {
25814
25930
  };
25815
25931
 
25816
25932
  // src/modals/ProfileDetails/FunProfileViews/Home/ProfileTitleSection.tsx
25817
- import React234 from "react";
25933
+ import React235 from "react";
25818
25934
  import { useCallback as useCallback42, useState as useState61 } from "react";
25819
25935
 
25820
25936
  // src/components/Icons/LogoutIcon.tsx
25821
- import React232 from "react";
25937
+ import React233 from "react";
25822
25938
  var LogoutIcon = ({ size = 16 }) => {
25823
- return /* @__PURE__ */ React232.createElement(
25939
+ return /* @__PURE__ */ React233.createElement(
25824
25940
  "svg",
25825
25941
  {
25826
25942
  width: size,
@@ -25829,7 +25945,7 @@ var LogoutIcon = ({ size = 16 }) => {
25829
25945
  fill: "none",
25830
25946
  xmlns: "http://www.w3.org/2000/svg"
25831
25947
  },
25832
- /* @__PURE__ */ React232.createElement(
25948
+ /* @__PURE__ */ React233.createElement(
25833
25949
  "path",
25834
25950
  {
25835
25951
  d: "M9.33463 13.3337H4.0013C3.26492 13.3337 2.66797 12.7367 2.66797 12.0003V4.00033C2.66797 3.26395 3.26492 2.66699 4.0013 2.66699H9.33463M6.66797 8.00033H14.0013M14.0013 8.00033L12.0013 10.0003M14.0013 8.00033L12.0013 6.00033",
@@ -25844,9 +25960,9 @@ var LogoutIcon = ({ size = 16 }) => {
25844
25960
  };
25845
25961
 
25846
25962
  // src/components/Icons/SettingsIcon.tsx
25847
- import React233 from "react";
25963
+ import React234 from "react";
25848
25964
  var SettingsIcon = ({ size = 16 }) => {
25849
- return /* @__PURE__ */ React233.createElement(
25965
+ return /* @__PURE__ */ React234.createElement(
25850
25966
  "svg",
25851
25967
  {
25852
25968
  width: size,
@@ -25855,14 +25971,14 @@ var SettingsIcon = ({ size = 16 }) => {
25855
25971
  fill: "none",
25856
25972
  xmlns: "http://www.w3.org/2000/svg"
25857
25973
  },
25858
- /* @__PURE__ */ React233.createElement(
25974
+ /* @__PURE__ */ React234.createElement(
25859
25975
  "path",
25860
25976
  {
25861
25977
  d: "M8.75 10.167C9.85457 10.167 10.75 9.27156 10.75 8.16699C10.75 7.06242 9.85457 6.16699 8.75 6.16699C7.64543 6.16699 6.75 7.06242 6.75 8.16699C6.75 9.27156 7.64543 10.167 8.75 10.167Z",
25862
25978
  stroke: "currentColor"
25863
25979
  }
25864
25980
  ),
25865
- /* @__PURE__ */ React233.createElement(
25981
+ /* @__PURE__ */ React234.createElement(
25866
25982
  "path",
25867
25983
  {
25868
25984
  d: "M9.92726 1.60149C9.68219 1.5 9.37159 1.5 8.75032 1.5C8.12906 1.5 7.81846 1.5 7.57339 1.60149C7.2467 1.73682 6.98714 1.99639 6.85181 2.32309C6.79004 2.47223 6.76586 2.64567 6.7564 2.89866C6.7425 3.27045 6.55183 3.61459 6.22962 3.80062C5.90742 3.98664 5.51405 3.97969 5.18512 3.80584C4.96129 3.68753 4.799 3.62175 4.63895 3.60068C4.28835 3.55452 3.93378 3.64953 3.65323 3.8648C3.44282 4.02625 3.2875 4.29527 2.97688 4.83329C2.66625 5.37131 2.51094 5.64032 2.47632 5.90327C2.43016 6.25387 2.52517 6.60844 2.74044 6.889C2.8387 7.01707 2.97679 7.12467 3.19112 7.25933C3.50619 7.45733 3.70892 7.7946 3.7089 8.16667C3.70888 8.53873 3.50616 8.87593 3.19111 9.07387C2.97676 9.2086 2.83864 9.31627 2.74038 9.44433C2.5251 9.72487 2.4301 10.0794 2.47626 10.43C2.51087 10.6929 2.66618 10.962 2.97681 11.5C3.28744 12.038 3.44276 12.3071 3.65316 12.4685C3.93371 12.6837 4.28828 12.7787 4.63888 12.7326C4.79892 12.7115 4.9612 12.6457 5.18502 12.5275C5.51397 12.3536 5.90736 12.3467 6.22959 12.5327C6.55182 12.7187 6.7425 13.0629 6.7564 13.4347C6.76586 13.6877 6.79004 13.8611 6.85181 14.0103C6.98714 14.3369 7.2467 14.5965 7.57339 14.7319C7.81846 14.8333 8.12906 14.8333 8.75032 14.8333C9.37159 14.8333 9.68219 14.8333 9.92726 14.7319C10.2539 14.5965 10.5135 14.3369 10.6488 14.0103C10.7106 13.8611 10.7348 13.6877 10.7443 13.4347C10.7581 13.0629 10.9488 12.7187 11.271 12.5327C11.5932 12.3466 11.9866 12.3536 12.3156 12.5275C12.5394 12.6457 12.7017 12.7115 12.8617 12.7325C13.2123 12.7787 13.5669 12.6837 13.8474 12.4685C14.0578 12.307 14.2131 12.038 14.5237 11.4999C14.8344 10.9619 14.9897 10.6929 15.0243 10.43C15.0705 10.0794 14.9755 9.7248 14.7602 9.44427C14.6619 9.3162 14.5238 9.20853 14.3095 9.07387C13.9945 8.87593 13.7917 8.53867 13.7917 8.1666C13.7917 7.79453 13.9945 7.4574 14.3095 7.25947C14.5239 7.12473 14.662 7.01713 14.7603 6.889C14.9755 6.60849 15.0705 6.25391 15.0244 5.90331C14.9898 5.64037 14.8345 5.37135 14.5238 4.83333C14.2132 4.29531 14.0579 4.0263 13.8475 3.86485C13.5669 3.64957 13.2123 3.55457 12.8617 3.60073C12.7017 3.62179 12.5395 3.68757 12.3156 3.80587C11.9867 3.97973 11.5933 3.98668 11.2711 3.80064C10.9488 3.61461 10.7581 3.27044 10.7443 2.89863C10.7348 2.64565 10.7106 2.47222 10.6488 2.32309C10.5135 1.99639 10.2539 1.73682 9.92726 1.60149Z",
@@ -25888,7 +26004,7 @@ var ProfileTitleSection = ({
25888
26004
  []
25889
26005
  );
25890
26006
  const isDydx = isDydxCustomer(apiKey);
25891
- return /* @__PURE__ */ React234.createElement(
26007
+ return /* @__PURE__ */ React235.createElement(
25892
26008
  Box,
25893
26009
  {
25894
26010
  display: "flex",
@@ -25897,7 +26013,7 @@ var ProfileTitleSection = ({
25897
26013
  width: "full",
25898
26014
  minHeight: "28"
25899
26015
  },
25900
- /* @__PURE__ */ React234.createElement(
26016
+ /* @__PURE__ */ React235.createElement(
25901
26017
  Box,
25902
26018
  {
25903
26019
  display: "flex",
@@ -25906,7 +26022,7 @@ var ProfileTitleSection = ({
25906
26022
  gap: "8",
25907
26023
  className: animateOut ? animateTitleOutClass : animateTitleInClass
25908
26024
  },
25909
- !isDydx && account.address && /* @__PURE__ */ React234.createElement(
26025
+ !isDydx && account.address && /* @__PURE__ */ React235.createElement(
25910
26026
  Avatar,
25911
26027
  {
25912
26028
  address: account.address,
@@ -25915,21 +26031,21 @@ var ProfileTitleSection = ({
25915
26031
  size: 20
25916
26032
  }
25917
26033
  ),
25918
- /* @__PURE__ */ React234.createElement(Text, { color: "primaryText", size: "13", weight: "medium" }, isDydx ? "Checkouts" : userInfo.nameTruncated)
26034
+ /* @__PURE__ */ React235.createElement(Text, { color: "primaryText", size: "13", weight: "medium" }, isDydx ? "Checkouts" : userInfo.nameTruncated)
25919
26035
  ),
25920
- /* @__PURE__ */ React234.createElement(Box, { display: "flex", alignItems: "center", flexDirection: "row" }, !isDisconnectExpanded && !isDydx && /* @__PURE__ */ React234.createElement(
26036
+ /* @__PURE__ */ React235.createElement(Box, { display: "flex", alignItems: "center", flexDirection: "row" }, !isDisconnectExpanded && !isDydx && /* @__PURE__ */ React235.createElement(
25921
26037
  FunIconButton,
25922
26038
  {
25923
- icon: /* @__PURE__ */ React234.createElement(SettingsIcon, { size: 17 }),
26039
+ icon: /* @__PURE__ */ React235.createElement(SettingsIcon, { size: 17 }),
25924
26040
  onClick: () => onChangeView(1 /* SETTINGS */),
25925
26041
  paddingX: "4",
25926
26042
  paddingY: "4"
25927
26043
  }
25928
- ), !isDydx && /* @__PURE__ */ React234.createElement(FunClickOutside, { onClick: collapseDisconnect }, /* @__PURE__ */ React234.createElement(
26044
+ ), !isDydx && /* @__PURE__ */ React235.createElement(FunClickOutside, { onClick: collapseDisconnect }, /* @__PURE__ */ React235.createElement(
25929
26045
  FunIconButton,
25930
26046
  {
25931
26047
  size: "28",
25932
- icon: /* @__PURE__ */ React234.createElement(LogoutIcon, { size: 15 }),
26048
+ icon: /* @__PURE__ */ React235.createElement(LogoutIcon, { size: 15 }),
25933
26049
  paddingX: isDisconnectExpanded ? "6" : void 0,
25934
26050
  "aria-label": "Disconnect",
25935
26051
  onClick: isDisconnectExpanded ? onLogout : () => setIsDisconnectExpanded(true),
@@ -25937,12 +26053,12 @@ var ProfileTitleSection = ({
25937
26053
  onMouseLeave: collapseDisconnect,
25938
26054
  onBlur: collapseDisconnect
25939
26055
  },
25940
- isDisconnectExpanded && /* @__PURE__ */ React234.createElement(Text, { size: "10", color: "secondaryText", weight: "medium" }, "Disconnect")
25941
- )), !isDisconnectExpanded && /* @__PURE__ */ React234.createElement(
26056
+ isDisconnectExpanded && /* @__PURE__ */ React235.createElement(Text, { size: "10", color: "secondaryText", weight: "medium" }, "Disconnect")
26057
+ )), !isDisconnectExpanded && /* @__PURE__ */ React235.createElement(
25942
26058
  FunIconButton,
25943
26059
  {
25944
26060
  size: "28",
25945
- icon: /* @__PURE__ */ React234.createElement(CloseIcon, { size: 12 }),
26061
+ icon: /* @__PURE__ */ React235.createElement(CloseIcon, { size: 12 }),
25946
26062
  onClick: onClose
25947
26063
  }
25948
26064
  ))
@@ -25957,10 +26073,10 @@ var SelectedHomeTab = /* @__PURE__ */ ((SelectedHomeTab2) => {
25957
26073
  })(SelectedHomeTab || {});
25958
26074
  var EmptyTabAlert = () => {
25959
26075
  const { appName } = useFunkitConfig();
25960
- return /* @__PURE__ */ React235.createElement(Box, { paddingX: PROFILE_SIDE_PADDING }, /* @__PURE__ */ React235.createElement(
26076
+ return /* @__PURE__ */ React236.createElement(Box, { paddingX: PROFILE_SIDE_PADDING }, /* @__PURE__ */ React236.createElement(
25961
26077
  FunAlert,
25962
26078
  {
25963
- icon: /* @__PURE__ */ React235.createElement(GreenRoundCheckmark, null),
26079
+ icon: /* @__PURE__ */ React236.createElement(GreenRoundCheckmark, null),
25964
26080
  description: `Execute your first checkout on ${appName}`
25965
26081
  }
25966
26082
  ));
@@ -25994,7 +26110,7 @@ function Home({
25994
26110
  }, []);
25995
26111
  const AssetsList = useMemo43(() => {
25996
26112
  if (walletAssets && !Object.keys(walletAssets).length) {
25997
- return /* @__PURE__ */ React235.createElement(EmptyTabAlert, null);
26113
+ return /* @__PURE__ */ React236.createElement(EmptyTabAlert, null);
25998
26114
  }
25999
26115
  const assets = walletAssets ? Object.values(walletAssets).sort(
26000
26116
  (a, b) => (b.totalUsdValue ?? 0) - (a.totalUsdValue ?? 0)
@@ -26002,7 +26118,7 @@ function Home({
26002
26118
  const itemHeight = HOME_TOKEN_BALANCE_DISPLAY_ROW_HEIGHT;
26003
26119
  const itemMargin = 8;
26004
26120
  const height = assets.length * (itemHeight + itemMargin) - itemMargin;
26005
- return /* @__PURE__ */ React235.createElement(Box, { ref: virtuosoParentRef }, /* @__PURE__ */ React235.createElement(
26121
+ return /* @__PURE__ */ React236.createElement(Box, { ref: virtuosoParentRef }, /* @__PURE__ */ React236.createElement(
26006
26122
  Virtuoso,
26007
26123
  {
26008
26124
  className: clsx20(hideScrollBar, scrollContent),
@@ -26014,14 +26130,14 @@ function Home({
26014
26130
  itemContent: (index, asset) => (
26015
26131
  // gaps/margins between items must be part of the measured content
26016
26132
  // thus we wrap items in padded divs (margin is not measured)
26017
- /* @__PURE__ */ React235.createElement("div", { style: { paddingTop: index === 0 ? 0 : itemMargin } }, asset ? /* @__PURE__ */ React235.createElement(HomeTokenBalanceDisplayRow, { asset }) : /* @__PURE__ */ React235.createElement(HomeTokenBalanceDisplayRowSkeleton, null))
26133
+ /* @__PURE__ */ React236.createElement("div", { style: { paddingTop: index === 0 ? 0 : itemMargin } }, asset ? /* @__PURE__ */ React236.createElement(HomeTokenBalanceDisplayRow, { asset }) : /* @__PURE__ */ React236.createElement(HomeTokenBalanceDisplayRowSkeleton, null))
26018
26134
  )
26019
26135
  }
26020
26136
  ));
26021
26137
  }, [walletAssets]);
26022
26138
  const CheckoutsList = useMemo43(() => {
26023
26139
  if (checkoutHistoryList.length === 0 && isCheckoutHistoryInited) {
26024
- return /* @__PURE__ */ React235.createElement(EmptyTabAlert, null);
26140
+ return /* @__PURE__ */ React236.createElement(EmptyTabAlert, null);
26025
26141
  }
26026
26142
  const processingCheckouts = checkoutHistoryList.filter(
26027
26143
  (checkoutHistoryItem) => IN_PROGRESS_CHECKOUT_STATES2.includes(checkoutHistoryItem.state)
@@ -26083,7 +26199,7 @@ function Home({
26083
26199
  const groupHeight = 15;
26084
26200
  const groupMargin = 24;
26085
26201
  const height = groups.length * (groupHeight + groupMargin) + (items.length - groups.length) * (itemHeight + itemMargin) - groupMargin;
26086
- return /* @__PURE__ */ React235.createElement(Box, { ref: virtuosoParentRef }, /* @__PURE__ */ React235.createElement(
26202
+ return /* @__PURE__ */ React236.createElement(Box, { ref: virtuosoParentRef }, /* @__PURE__ */ React236.createElement(
26087
26203
  Virtuoso,
26088
26204
  {
26089
26205
  className: clsx20(hideScrollBar, scrollContent),
@@ -26097,13 +26213,13 @@ function Home({
26097
26213
  itemContent: (index, data) => (
26098
26214
  // gaps/margins between items must be part of the measured content
26099
26215
  // thus we wrap items in padded divs (margin is not measured)
26100
- "group" in data ? /* @__PURE__ */ React235.createElement("div", { style: { paddingTop: index === 0 ? 0 : groupMargin } }, /* @__PURE__ */ React235.createElement(Box, { paddingX: PROFILE_SIDE_PADDING }, /* @__PURE__ */ React235.createElement(Text, { size: "10", color: "secondaryText" }, data.group))) : /* @__PURE__ */ React235.createElement("div", { style: { paddingTop: index === 0 ? 0 : itemMargin } }, data.checkout ? /* @__PURE__ */ React235.createElement(
26216
+ "group" in data ? /* @__PURE__ */ React236.createElement("div", { style: { paddingTop: index === 0 ? 0 : groupMargin } }, /* @__PURE__ */ React236.createElement(Box, { paddingX: PROFILE_SIDE_PADDING }, /* @__PURE__ */ React236.createElement(Text, { size: "10", color: "secondaryText" }, data.group))) : /* @__PURE__ */ React236.createElement("div", { style: { paddingTop: index === 0 ? 0 : itemMargin } }, data.checkout ? /* @__PURE__ */ React236.createElement(
26101
26217
  HomeCheckoutDisplayRow,
26102
26218
  {
26103
26219
  checkoutHistoryItem: data.checkout,
26104
26220
  onSelect: handleCheckoutSelect
26105
26221
  }
26106
- ) : /* @__PURE__ */ React235.createElement(HomeCheckoutDisplayRowSkeleton, null))
26222
+ ) : /* @__PURE__ */ React236.createElement(HomeCheckoutDisplayRowSkeleton, null))
26107
26223
  )
26108
26224
  }
26109
26225
  ));
@@ -26112,7 +26228,7 @@ function Home({
26112
26228
  if (tab === selectedView) return;
26113
26229
  navigateTo(tab, tab === "assets" /* ASSETS */ ? { reverse: true } : {});
26114
26230
  };
26115
- return /* @__PURE__ */ React235.createElement(Box, { paddingTop: "14" }, /* @__PURE__ */ React235.createElement(
26231
+ return /* @__PURE__ */ React236.createElement(Box, { paddingTop: "14" }, /* @__PURE__ */ React236.createElement(
26116
26232
  ProfileTitleSection,
26117
26233
  {
26118
26234
  animateOut: animation.isOut,
@@ -26122,7 +26238,7 @@ function Home({
26122
26238
  onLogout: handleLogout,
26123
26239
  onClose
26124
26240
  }
26125
- ), /* @__PURE__ */ React235.createElement(
26241
+ ), /* @__PURE__ */ React236.createElement(
26126
26242
  Box,
26127
26243
  {
26128
26244
  display: "flex",
@@ -26132,8 +26248,8 @@ function Home({
26132
26248
  gap: "24",
26133
26249
  className: getContentAnimation(animation, true)
26134
26250
  },
26135
- !isDydx && /* @__PURE__ */ React235.createElement(BalanceSection, { totalBalance: totalWalletAssetsUsd }),
26136
- /* @__PURE__ */ React235.createElement(
26251
+ !isDydx && /* @__PURE__ */ React236.createElement(BalanceSection, { totalBalance: totalWalletAssetsUsd }),
26252
+ /* @__PURE__ */ React236.createElement(
26137
26253
  Box,
26138
26254
  {
26139
26255
  display: "flex",
@@ -26144,7 +26260,7 @@ function Home({
26144
26260
  marginLeft: `-${Number.parseInt(PROFILE_SIDE_PADDING)}px`
26145
26261
  }
26146
26262
  },
26147
- isDydx ? CheckoutsList : /* @__PURE__ */ React235.createElement(React235.Fragment, null, /* @__PURE__ */ React235.createElement(
26263
+ isDydx ? CheckoutsList : /* @__PURE__ */ React236.createElement(React236.Fragment, null, /* @__PURE__ */ React236.createElement(
26148
26264
  Box,
26149
26265
  {
26150
26266
  display: "flex",
@@ -26152,7 +26268,7 @@ function Home({
26152
26268
  gap: "24",
26153
26269
  paddingX: PROFILE_SIDE_PADDING
26154
26270
  },
26155
- tabs2.map(({ tab, label }) => /* @__PURE__ */ React235.createElement(
26271
+ tabs2.map(({ tab, label }) => /* @__PURE__ */ React236.createElement(
26156
26272
  Box,
26157
26273
  {
26158
26274
  key: label,
@@ -26161,7 +26277,7 @@ function Home({
26161
26277
  tabIndex: 0,
26162
26278
  className: tabLabelStyles
26163
26279
  },
26164
- /* @__PURE__ */ React235.createElement(
26280
+ /* @__PURE__ */ React236.createElement(
26165
26281
  Text,
26166
26282
  {
26167
26283
  weight: "bold",
@@ -26171,7 +26287,7 @@ function Home({
26171
26287
  label
26172
26288
  )
26173
26289
  ))
26174
- ), /* @__PURE__ */ React235.createElement(Box, { className: getContentAnimation(tabAnimation, false) }, selectedView === "assets" /* ASSETS */ && AssetsList, selectedView === "checkouts" /* CHECKOUTS */ && CheckoutsList))
26290
+ ), /* @__PURE__ */ React236.createElement(Box, { className: getContentAnimation(tabAnimation, false) }, selectedView === "assets" /* ASSETS */ && AssetsList, selectedView === "checkouts" /* CHECKOUTS */ && CheckoutsList))
26175
26291
  )
26176
26292
  ));
26177
26293
  }
@@ -26249,11 +26365,11 @@ function ProfileDetails({ onClose, defaultTab }) {
26249
26365
  depositAddress: selectedPurchaseId,
26250
26366
  isCheckoutDetailView,
26251
26367
  paddingTop: PADDING_TOP,
26252
- topbar: dialogTitleMap[view] && /* @__PURE__ */ React236.createElement(Dialog.Title, { onClose, ...dialogTitleMap[view] }),
26368
+ topbar: dialogTitleMap[view] && /* @__PURE__ */ React237.createElement(Dialog.Title, { onClose, ...dialogTitleMap[view] }),
26253
26369
  withTopDivider: withDivider,
26254
26370
  scrollableContent: PROFILE_DETAILS_DIALOG_CONTENT_ID
26255
26371
  });
26256
- return /* @__PURE__ */ React236.createElement(FunCheckoutModalHeightAnimationWrapper, null, topbar, /* @__PURE__ */ React236.createElement(
26372
+ return /* @__PURE__ */ React237.createElement(FunCheckoutModalHeightAnimationWrapper, null, topbar, /* @__PURE__ */ React237.createElement(
26257
26373
  Dialog.Content,
26258
26374
  {
26259
26375
  display: "flex",
@@ -26270,7 +26386,7 @@ function ProfileDetails({ onClose, defaultTab }) {
26270
26386
  withTopDivider,
26271
26387
  id: PROFILE_DETAILS_DIALOG_CONTENT_ID
26272
26388
  },
26273
- view === 0 /* HOME */ ? /* @__PURE__ */ React236.createElement(
26389
+ view === 0 /* HOME */ ? /* @__PURE__ */ React237.createElement(
26274
26390
  Home,
26275
26391
  {
26276
26392
  animation,
@@ -26279,7 +26395,7 @@ function ProfileDetails({ onClose, defaultTab }) {
26279
26395
  onSelectActivity: onSelectActivityWrapper,
26280
26396
  defaultHomeTab: selectedHomeTab
26281
26397
  }
26282
- ) : view === 1 /* SETTINGS */ ? /* @__PURE__ */ React236.createElement(Settings, null) : view === 3 /* SINGLE_ACTIVITY */ ? /* @__PURE__ */ React236.createElement(
26398
+ ) : view === 1 /* SETTINGS */ ? /* @__PURE__ */ React237.createElement(Settings, null) : view === 3 /* SINGLE_ACTIVITY */ ? /* @__PURE__ */ React237.createElement(
26283
26399
  FunCheckoutHistoryContent,
26284
26400
  {
26285
26401
  depositAddress: selectedPurchaseId || "0x",
@@ -26290,7 +26406,7 @@ function ProfileDetails({ onClose, defaultTab }) {
26290
26406
  bottomBarId: HISTORY_BOTTOM_BAR_ID
26291
26407
  }
26292
26408
  ) : null
26293
- ), /* @__PURE__ */ React236.createElement(Dialog.BottomSection, { id: HISTORY_BOTTOM_BAR_ID }));
26409
+ ), /* @__PURE__ */ React237.createElement(Dialog.BottomSection, { id: HISTORY_BOTTOM_BAR_ID }));
26294
26410
  }
26295
26411
 
26296
26412
  // src/modals/AccountModal/AccountModal.tsx
@@ -26298,7 +26414,7 @@ var TITLE_ID = "fun_account_modal_title";
26298
26414
  function AccountModal({ onClose, open, defaultTab }) {
26299
26415
  const { walletAddress } = useGeneralWallet();
26300
26416
  if (!walletAddress) return null;
26301
- return /* @__PURE__ */ React237.createElement(
26417
+ return /* @__PURE__ */ React238.createElement(
26302
26418
  Dialog,
26303
26419
  {
26304
26420
  onClose,
@@ -26306,18 +26422,18 @@ function AccountModal({ onClose, open, defaultTab }) {
26306
26422
  titleId: TITLE_ID,
26307
26423
  isSmartCloseable: true
26308
26424
  },
26309
- /* @__PURE__ */ React237.createElement(ActivityTraversalProvider, null, /* @__PURE__ */ React237.createElement(ProfileDetails, { onClose, defaultTab }))
26425
+ /* @__PURE__ */ React238.createElement(ActivityTraversalProvider, null, /* @__PURE__ */ React238.createElement(ProfileDetails, { onClose, defaultTab }))
26310
26426
  );
26311
26427
  }
26312
26428
 
26313
26429
  // src/modals/ChainModal/ChainModal.tsx
26314
26430
  import { isMobile as isMobile13 } from "@funkit/utils";
26315
- import React241 from "react";
26431
+ import React242 from "react";
26316
26432
  import { useAccount as useAccount7, useConfig as useConfig3 } from "wagmi";
26317
26433
 
26318
26434
  // src/components/Icons/DisconnectSqIcon.tsx
26319
- import React238 from "react";
26320
- var DisconnectSqIcon = ({ size }) => /* @__PURE__ */ React238.createElement(
26435
+ import React239 from "react";
26436
+ var DisconnectSqIcon = ({ size }) => /* @__PURE__ */ React239.createElement(
26321
26437
  "svg",
26322
26438
  {
26323
26439
  fill: "none",
@@ -26326,7 +26442,7 @@ var DisconnectSqIcon = ({ size }) => /* @__PURE__ */ React238.createElement(
26326
26442
  width: size,
26327
26443
  xmlns: "http://www.w3.org/2000/svg"
26328
26444
  },
26329
- /* @__PURE__ */ React238.createElement(
26445
+ /* @__PURE__ */ React239.createElement(
26330
26446
  "path",
26331
26447
  {
26332
26448
  d: "M6.742 22.195h8.367c1.774 0 2.743-.968 2.743-2.758V16.11h-2.016v3.11c0 .625-.305.96-.969.96H6.984c-.664 0-.968-.335-.968-.96V7.984c0-.632.304-.968.968-.968h7.883c.664 0 .969.336.969.968v3.133h2.016v-3.36c0-1.78-.97-2.757-2.743-2.757H6.742C4.97 5 4 5.977 4 7.758v11.68c0 1.789.969 2.757 2.742 2.757Zm5.438-7.703h7.601l1.149-.07-.602.406-1.008.938a.816.816 0 0 0-.258.593c0 .407.313.782.758.782.227 0 .39-.086.547-.243l2.492-2.593c.235-.235.313-.47.313-.711 0-.242-.078-.477-.313-.719l-2.492-2.586c-.156-.156-.32-.25-.547-.25-.445 0-.758.367-.758.781 0 .227.094.446.258.594l1.008.945.602.407-1.149-.079H12.18a.904.904 0 0 0 0 1.805Z",
@@ -26337,13 +26453,13 @@ var DisconnectSqIcon = ({ size }) => /* @__PURE__ */ React238.createElement(
26337
26453
 
26338
26454
  // src/components/MenuButton/MenuButton.tsx
26339
26455
  import { isMobile as isMobile11 } from "@funkit/utils";
26340
- import React239 from "react";
26456
+ import React240 from "react";
26341
26457
 
26342
26458
  // src/components/MenuButton/MenuButton.css.ts
26343
26459
  var unsetBackgroundOnHover = "_10pw5x60";
26344
26460
 
26345
26461
  // src/components/MenuButton/MenuButton.tsx
26346
- var MenuButton = React239.forwardRef(
26462
+ var MenuButton = React240.forwardRef(
26347
26463
  ({
26348
26464
  children,
26349
26465
  currentlySelected = false,
@@ -26352,7 +26468,7 @@ var MenuButton = React239.forwardRef(
26352
26468
  ...urlProps
26353
26469
  }, ref) => {
26354
26470
  const mobile = isMobile11();
26355
- return /* @__PURE__ */ React239.createElement(
26471
+ return /* @__PURE__ */ React240.createElement(
26356
26472
  Box,
26357
26473
  {
26358
26474
  as: "button",
@@ -26364,7 +26480,7 @@ var MenuButton = React239.forwardRef(
26364
26480
  testId,
26365
26481
  type: "button"
26366
26482
  },
26367
- /* @__PURE__ */ React239.createElement(
26483
+ /* @__PURE__ */ React240.createElement(
26368
26484
  Box,
26369
26485
  {
26370
26486
  borderRadius: "menuButton",
@@ -26398,7 +26514,7 @@ MenuButton.displayName = "MenuButton";
26398
26514
 
26399
26515
  // src/modals/ChainModal/Chain.tsx
26400
26516
  import { isMobile as isMobile12 } from "@funkit/utils";
26401
- import React240, { Fragment as Fragment4 } from "react";
26517
+ import React241, { Fragment as Fragment4 } from "react";
26402
26518
  function ChainLineItem({
26403
26519
  chainId,
26404
26520
  chainIconSize,
@@ -26409,7 +26525,7 @@ function ChainLineItem({
26409
26525
  const enabledChainItem = enabledChainMap?.[chainId];
26410
26526
  const chainItem = chainMetadataById[chainId] || enabledChainItem;
26411
26527
  if (!chainItem) return null;
26412
- return /* @__PURE__ */ React240.createElement(
26528
+ return /* @__PURE__ */ React241.createElement(
26413
26529
  Box,
26414
26530
  {
26415
26531
  alignItems: "center",
@@ -26418,7 +26534,7 @@ function ChainLineItem({
26418
26534
  gap,
26419
26535
  height: chainIconSize
26420
26536
  },
26421
- /* @__PURE__ */ React240.createElement(Box, { height: "full" }, /* @__PURE__ */ React240.createElement(
26537
+ /* @__PURE__ */ React241.createElement(Box, { height: "full" }, /* @__PURE__ */ React241.createElement(
26422
26538
  AsyncImage,
26423
26539
  {
26424
26540
  alt: chainItem.name,
@@ -26430,7 +26546,7 @@ function ChainLineItem({
26430
26546
  testId: `chain-option-${chainId}-icon`
26431
26547
  }
26432
26548
  )),
26433
- !hideChainName ? /* @__PURE__ */ React240.createElement("div", null, chainItem.name) : null
26549
+ !hideChainName ? /* @__PURE__ */ React241.createElement("div", null, chainItem.name) : null
26434
26550
  );
26435
26551
  }
26436
26552
  var Chain2 = ({
@@ -26445,14 +26561,14 @@ var Chain2 = ({
26445
26561
  const funkitConnectChains = useFunkitConnectChains();
26446
26562
  const { loginType } = useGeneralWallet();
26447
26563
  const isCurrentChain = currentChainId === chainId && !isLoading;
26448
- return /* @__PURE__ */ React240.createElement(Fragment4, null, /* @__PURE__ */ React240.createElement(
26564
+ return /* @__PURE__ */ React241.createElement(Fragment4, null, /* @__PURE__ */ React241.createElement(
26449
26565
  MenuButton,
26450
26566
  {
26451
26567
  currentlySelected: isCurrentChain,
26452
26568
  onClick: isCurrentChain ? void 0 : () => switchChain({ chainId }),
26453
26569
  testId: `chain-option-${chainId}`
26454
26570
  },
26455
- /* @__PURE__ */ React240.createElement(Box, { fontFamily: "body", fontSize: "16", fontWeight: "bold" }, /* @__PURE__ */ React240.createElement(
26571
+ /* @__PURE__ */ React241.createElement(Box, { fontFamily: "body", fontSize: "16", fontWeight: "bold" }, /* @__PURE__ */ React241.createElement(
26456
26572
  Box,
26457
26573
  {
26458
26574
  alignItems: "center",
@@ -26460,8 +26576,8 @@ var Chain2 = ({
26460
26576
  flexDirection: "row",
26461
26577
  justifyContent: "space-between"
26462
26578
  },
26463
- /* @__PURE__ */ React240.createElement(ChainLineItem, { chainId, chainIconSize }),
26464
- isCurrentChain && /* @__PURE__ */ React240.createElement(
26579
+ /* @__PURE__ */ React241.createElement(ChainLineItem, { chainId, chainIconSize }),
26580
+ isCurrentChain && /* @__PURE__ */ React241.createElement(
26465
26581
  Box,
26466
26582
  {
26467
26583
  alignItems: "center",
@@ -26469,10 +26585,10 @@ var Chain2 = ({
26469
26585
  flexDirection: "row",
26470
26586
  marginRight: "6"
26471
26587
  },
26472
- /* @__PURE__ */ React240.createElement(Text, { color: "accentColorForeground", size: "14", weight: "medium" }, "Connected"),
26473
- /* @__PURE__ */ React240.createElement(FunDot, null)
26588
+ /* @__PURE__ */ React241.createElement(Text, { color: "accentColorForeground", size: "14", weight: "medium" }, "Connected"),
26589
+ /* @__PURE__ */ React241.createElement(FunDot, null)
26474
26590
  ),
26475
- isLoading && /* @__PURE__ */ React240.createElement(
26591
+ isLoading && /* @__PURE__ */ React241.createElement(
26476
26592
  Box,
26477
26593
  {
26478
26594
  alignItems: "center",
@@ -26480,8 +26596,8 @@ var Chain2 = ({
26480
26596
  flexDirection: "row",
26481
26597
  marginRight: "6"
26482
26598
  },
26483
- /* @__PURE__ */ React240.createElement(Text, { color: "primaryText", size: "14", weight: "medium" }, loginType === "web2" /* Web2 */ ? "Switching" : "Confirm in Wallet"),
26484
- /* @__PURE__ */ React240.createElement(
26599
+ /* @__PURE__ */ React241.createElement(Text, { color: "primaryText", size: "14", weight: "medium" }, loginType === "web2" /* Web2 */ ? "Switching" : "Confirm in Wallet"),
26600
+ /* @__PURE__ */ React241.createElement(
26485
26601
  Box,
26486
26602
  {
26487
26603
  background: "standby",
@@ -26493,7 +26609,7 @@ var Chain2 = ({
26493
26609
  )
26494
26610
  )
26495
26611
  ))
26496
- ), mobile && idx < funkitConnectChains.length - 1 && /* @__PURE__ */ React240.createElement(Box, { background: "generalBorderDim", height: "1", marginX: "8" }));
26612
+ ), mobile && idx < funkitConnectChains.length - 1 && /* @__PURE__ */ React241.createElement(Box, { background: "generalBorderDim", height: "1", marginX: "8" }));
26497
26613
  };
26498
26614
  var Chain_default = Chain2;
26499
26615
 
@@ -26517,7 +26633,7 @@ function ChainModal({ onClose, open }) {
26517
26633
  if (!chainId) {
26518
26634
  return null;
26519
26635
  }
26520
- return /* @__PURE__ */ React241.createElement(
26636
+ return /* @__PURE__ */ React242.createElement(
26521
26637
  Dialog,
26522
26638
  {
26523
26639
  onClose,
@@ -26525,15 +26641,15 @@ function ChainModal({ onClose, open }) {
26525
26641
  titleId,
26526
26642
  isSmartCloseable: true
26527
26643
  },
26528
- /* @__PURE__ */ React241.createElement(Dialog.Content, { paddingTop: "18" }, /* @__PURE__ */ React241.createElement(Box, { display: "flex", flexDirection: "column", gap: "14" }, /* @__PURE__ */ React241.createElement(
26644
+ /* @__PURE__ */ React242.createElement(Dialog.Content, { paddingTop: "18" }, /* @__PURE__ */ React242.createElement(Box, { display: "flex", flexDirection: "column", gap: "14" }, /* @__PURE__ */ React242.createElement(
26529
26645
  Box,
26530
26646
  {
26531
26647
  display: "flex",
26532
26648
  flexDirection: "row",
26533
26649
  justifyContent: "space-between"
26534
26650
  },
26535
- mobile && /* @__PURE__ */ React241.createElement(Box, { width: "30" }),
26536
- /* @__PURE__ */ React241.createElement(Box, { paddingBottom: "0", paddingLeft: "8", paddingTop: "4" }, /* @__PURE__ */ React241.createElement(
26651
+ mobile && /* @__PURE__ */ React242.createElement(Box, { width: "30" }),
26652
+ /* @__PURE__ */ React242.createElement(Box, { paddingBottom: "0", paddingLeft: "8", paddingTop: "4" }, /* @__PURE__ */ React242.createElement(
26537
26653
  Text,
26538
26654
  {
26539
26655
  as: "h1",
@@ -26544,8 +26660,8 @@ function ChainModal({ onClose, open }) {
26544
26660
  },
26545
26661
  "Switch Networks"
26546
26662
  )),
26547
- /* @__PURE__ */ React241.createElement(CloseButton, { onClose })
26548
- ), !isCurrentChainSupported && /* @__PURE__ */ React241.createElement(Box, { marginX: "8", textAlign: mobile ? "center" : "left" }, /* @__PURE__ */ React241.createElement(Text, { color: "tertiaryText", size: "14", weight: "medium" }, "Wrong network detected, switch or disconnect to continue.")), /* @__PURE__ */ React241.createElement(
26663
+ /* @__PURE__ */ React242.createElement(CloseButton, { onClose })
26664
+ ), !isCurrentChainSupported && /* @__PURE__ */ React242.createElement(Box, { marginX: "8", textAlign: mobile ? "center" : "left" }, /* @__PURE__ */ React242.createElement(Text, { color: "tertiaryText", size: "14", weight: "medium" }, "Wrong network detected, switch or disconnect to continue.")), /* @__PURE__ */ React242.createElement(
26549
26665
  Box,
26550
26666
  {
26551
26667
  className: mobile ? MobileScrollClassName : DesktopScrollClassName,
@@ -26556,7 +26672,7 @@ function ChainModal({ onClose, open }) {
26556
26672
  paddingBottom: "16"
26557
26673
  },
26558
26674
  funkitConnectChains.map(({ id }, idx) => {
26559
- return /* @__PURE__ */ React241.createElement(
26675
+ return /* @__PURE__ */ React242.createElement(
26560
26676
  Chain_default,
26561
26677
  {
26562
26678
  key: id,
@@ -26569,13 +26685,13 @@ function ChainModal({ onClose, open }) {
26569
26685
  }
26570
26686
  );
26571
26687
  }),
26572
- !isCurrentChainSupported && /* @__PURE__ */ React241.createElement(React241.Fragment, null, /* @__PURE__ */ React241.createElement(Box, { background: "generalBorderDim", height: "1", marginX: "8" }), /* @__PURE__ */ React241.createElement(
26688
+ !isCurrentChainSupported && /* @__PURE__ */ React242.createElement(React242.Fragment, null, /* @__PURE__ */ React242.createElement(Box, { background: "generalBorderDim", height: "1", marginX: "8" }), /* @__PURE__ */ React242.createElement(
26573
26689
  MenuButton,
26574
26690
  {
26575
26691
  onClick: () => handleLogout(),
26576
26692
  testId: "chain-option-disconnect"
26577
26693
  },
26578
- /* @__PURE__ */ React241.createElement(
26694
+ /* @__PURE__ */ React242.createElement(
26579
26695
  Box,
26580
26696
  {
26581
26697
  color: "error",
@@ -26583,7 +26699,7 @@ function ChainModal({ onClose, open }) {
26583
26699
  fontSize: "16",
26584
26700
  fontWeight: "bold"
26585
26701
  },
26586
- /* @__PURE__ */ React241.createElement(
26702
+ /* @__PURE__ */ React242.createElement(
26587
26703
  Box,
26588
26704
  {
26589
26705
  alignItems: "center",
@@ -26591,7 +26707,7 @@ function ChainModal({ onClose, open }) {
26591
26707
  flexDirection: "row",
26592
26708
  justifyContent: "space-between"
26593
26709
  },
26594
- /* @__PURE__ */ React241.createElement(
26710
+ /* @__PURE__ */ React242.createElement(
26595
26711
  Box,
26596
26712
  {
26597
26713
  alignItems: "center",
@@ -26600,7 +26716,7 @@ function ChainModal({ onClose, open }) {
26600
26716
  gap: "4",
26601
26717
  height: chainIconSize
26602
26718
  },
26603
- /* @__PURE__ */ React241.createElement(
26719
+ /* @__PURE__ */ React242.createElement(
26604
26720
  Box,
26605
26721
  {
26606
26722
  alignItems: "center",
@@ -26609,9 +26725,9 @@ function ChainModal({ onClose, open }) {
26609
26725
  justifyContent: "center",
26610
26726
  marginRight: "8"
26611
26727
  },
26612
- /* @__PURE__ */ React241.createElement(DisconnectSqIcon, { size: Number(chainIconSize) })
26728
+ /* @__PURE__ */ React242.createElement(DisconnectSqIcon, { size: Number(chainIconSize) })
26613
26729
  ),
26614
- /* @__PURE__ */ React241.createElement("div", null, "Disconnect")
26730
+ /* @__PURE__ */ React242.createElement("div", null, "Disconnect")
26615
26731
  )
26616
26732
  )
26617
26733
  )
@@ -26624,10 +26740,10 @@ function ChainModal({ onClose, open }) {
26624
26740
  import { FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST as FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST3 } from "@funkit/chains";
26625
26741
  import { LogLevel, initializeRelayClient } from "@funkit/fun-relay";
26626
26742
  import { FlagKey as FlagKey32 } from "@funkit/utils";
26627
- import React251, { useRef as useRef24 } from "react";
26743
+ import React252, { useRef as useRef24 } from "react";
26628
26744
 
26629
26745
  // src/components/DydxSwitchModalTab/DydxSwitchModalTab.tsx
26630
- import React243, { useCallback as useCallback44 } from "react";
26746
+ import React244, { useCallback as useCallback44 } from "react";
26631
26747
 
26632
26748
  // src/hooks/useFunkitMaxCheckoutUsdInfo.ts
26633
26749
  import { FlagKey as FlagKey30, formatCurrencyAndStringify as formatCurrencyAndStringify15 } from "@funkit/utils";
@@ -26647,8 +26763,8 @@ var useFunkitMaxCheckoutUsdInfo = () => {
26647
26763
  };
26648
26764
 
26649
26765
  // src/components/DydxSwitchModalTab/Icons.tsx
26650
- import React242 from "react";
26651
- var Instant = /* @__PURE__ */ React242.createElement(
26766
+ import React243 from "react";
26767
+ var Instant = /* @__PURE__ */ React243.createElement(
26652
26768
  "svg",
26653
26769
  {
26654
26770
  width: "20",
@@ -26657,7 +26773,7 @@ var Instant = /* @__PURE__ */ React242.createElement(
26657
26773
  fill: "none",
26658
26774
  xmlns: "http://www.w3.org/2000/svg"
26659
26775
  },
26660
- /* @__PURE__ */ React242.createElement(
26776
+ /* @__PURE__ */ React243.createElement(
26661
26777
  "path",
26662
26778
  {
26663
26779
  d: "M11.983 1.90702C12.0175 1.74537 11.9976 1.57686 11.9264 1.42768C11.8552 1.2785 11.7368 1.157 11.5894 1.08208C11.4421 1.00716 11.2741 0.98301 11.1117 1.01338C10.9492 1.04375 10.8013 1.12694 10.691 1.25002L2.19098 10.75C2.09446 10.8579 2.03124 10.9915 2.00895 11.1345C1.98665 11.2776 2.00624 11.424 2.06534 11.5562C2.12445 11.6884 2.22054 11.8006 2.34203 11.8794C2.46352 11.9581 2.6052 12 2.74998 12H9.32198L8.01698 18.093C7.98251 18.2547 8.00241 18.4232 8.07358 18.5724C8.14475 18.7216 8.2632 18.843 8.41054 18.918C8.55787 18.9929 8.72582 19.017 8.8883 18.9867C9.05077 18.9563 9.19866 18.8731 9.30898 18.75L17.809 9.25002C17.9055 9.14211 17.9687 9.00857 17.991 8.86551C18.0133 8.72246 17.9937 8.57601 17.9346 8.44385C17.8755 8.31168 17.7794 8.19945 17.6579 8.12069C17.5364 8.04194 17.3948 8.00003 17.25 8.00002H10.678L11.983 1.90702Z",
@@ -26665,7 +26781,7 @@ var Instant = /* @__PURE__ */ React242.createElement(
26665
26781
  }
26666
26782
  )
26667
26783
  );
26668
- var Standard = /* @__PURE__ */ React242.createElement(
26784
+ var Standard = /* @__PURE__ */ React243.createElement(
26669
26785
  "svg",
26670
26786
  {
26671
26787
  width: "16",
@@ -26674,7 +26790,7 @@ var Standard = /* @__PURE__ */ React242.createElement(
26674
26790
  fill: "none",
26675
26791
  xmlns: "http://www.w3.org/2000/svg"
26676
26792
  },
26677
- /* @__PURE__ */ React242.createElement(
26793
+ /* @__PURE__ */ React243.createElement(
26678
26794
  "path",
26679
26795
  {
26680
26796
  fillRule: "evenodd",
@@ -26690,7 +26806,7 @@ function DydxSwitchTabInternal({
26690
26806
  limitLabel,
26691
26807
  onSwitch
26692
26808
  }) {
26693
- return /* @__PURE__ */ React243.createElement(
26809
+ return /* @__PURE__ */ React244.createElement(
26694
26810
  Box,
26695
26811
  {
26696
26812
  display: "flex",
@@ -26701,7 +26817,7 @@ function DydxSwitchTabInternal({
26701
26817
  userSelect: "none",
26702
26818
  id: "dydx-payment-switcher"
26703
26819
  },
26704
- /* @__PURE__ */ React243.createElement(
26820
+ /* @__PURE__ */ React244.createElement(
26705
26821
  Box,
26706
26822
  {
26707
26823
  width: "half",
@@ -26714,11 +26830,11 @@ function DydxSwitchTabInternal({
26714
26830
  paddingY: "12",
26715
26831
  background: "dydxSwitchActiveBackground"
26716
26832
  },
26717
- /* @__PURE__ */ React243.createElement(Text, { color: "buttonBackground", style: { float: "right" } }, Instant),
26718
- /* @__PURE__ */ React243.createElement(Text, { size: "16", color: "primaryText" }, "Instant"),
26719
- /* @__PURE__ */ React243.createElement(Text, { size: "12", color: "primaryText" }, "Higher fees, ", limitLabel, " limit")
26833
+ /* @__PURE__ */ React244.createElement(Text, { color: "buttonBackground", style: { float: "right" } }, Instant),
26834
+ /* @__PURE__ */ React244.createElement(Text, { size: "16", color: "primaryText" }, "Instant"),
26835
+ /* @__PURE__ */ React244.createElement(Text, { size: "12", color: "primaryText" }, "Higher fees, ", limitLabel, " limit")
26720
26836
  ),
26721
- /* @__PURE__ */ React243.createElement(
26837
+ /* @__PURE__ */ React244.createElement(
26722
26838
  Box,
26723
26839
  {
26724
26840
  width: "half",
@@ -26728,9 +26844,9 @@ function DydxSwitchTabInternal({
26728
26844
  cursor: "pointer",
26729
26845
  onClick: onSwitch
26730
26846
  },
26731
- /* @__PURE__ */ React243.createElement(Text, { color: "tertiaryText", style: { float: "right" } }, Standard),
26732
- /* @__PURE__ */ React243.createElement(Text, { size: "16", color: "tertiaryText" }, "Standard", " "),
26733
- /* @__PURE__ */ React243.createElement(Text, { size: "12", color: "tertiaryText" }, "Lowest fees, no limit")
26847
+ /* @__PURE__ */ React244.createElement(Text, { color: "tertiaryText", style: { float: "right" } }, Standard),
26848
+ /* @__PURE__ */ React244.createElement(Text, { size: "16", color: "tertiaryText" }, "Standard", " "),
26849
+ /* @__PURE__ */ React244.createElement(Text, { size: "12", color: "tertiaryText" }, "Lowest fees, no limit")
26734
26850
  )
26735
26851
  );
26736
26852
  }
@@ -26755,7 +26871,7 @@ function DydxSwitchTab({
26755
26871
  }
26756
26872
 
26757
26873
  // src/components/FunCheckoutBlocked/FunCheckoutBlocked.tsx
26758
- import React244 from "react";
26874
+ import React245 from "react";
26759
26875
 
26760
26876
  // src/components/FunCheckoutBlocked/FunCheckoutBlocked.css.ts
26761
26877
  var funCheckoutBlockedStyle = "hkjz5k0";
@@ -26767,21 +26883,21 @@ var blockedReasonToDescription = {
26767
26883
  };
26768
26884
  var FunCheckoutBlocked = ({ reason }) => {
26769
26885
  const description = blockedReasonToDescription[reason];
26770
- return /* @__PURE__ */ React244.createElement(Box, { className: funCheckoutBlockedStyle }, /* @__PURE__ */ React244.createElement(FunAlert, { icon: /* @__PURE__ */ React244.createElement(FunInfoIcon, null), description }));
26886
+ return /* @__PURE__ */ React245.createElement(Box, { className: funCheckoutBlockedStyle }, /* @__PURE__ */ React245.createElement(FunAlert, { icon: /* @__PURE__ */ React245.createElement(FunInfoIcon, null), description }));
26771
26887
  };
26772
26888
 
26773
26889
  // src/modals/CheckoutModal/TransferToken/CheckoutNotifications.tsx
26774
26890
  import clsx23 from "clsx";
26775
- import React250, { useEffect as useEffect46, useMemo as useMemo44, useState as useState65 } from "react";
26891
+ import React251, { useEffect as useEffect46, useMemo as useMemo44, useState as useState65 } from "react";
26776
26892
 
26777
26893
  // src/components/FunNotificationBanner/FunNotificationShowMoreButton.tsx
26778
- import React245 from "react";
26894
+ import React246 from "react";
26779
26895
  var FunNotificationShowMoreButton = ({
26780
26896
  numberOfNotifications,
26781
26897
  isExpanded,
26782
26898
  onClick
26783
26899
  }) => {
26784
- const buttonTitleCompoent = /* @__PURE__ */ React245.createElement(Box, { display: "flex", gap: "4", alignItems: "center" }, /* @__PURE__ */ React245.createElement(Text, { size: "13" }, isExpanded ? "Show less" : `${numberOfNotifications} more`), /* @__PURE__ */ React245.createElement(
26900
+ const buttonTitleCompoent = /* @__PURE__ */ React246.createElement(Box, { display: "flex", gap: "4", alignItems: "center" }, /* @__PURE__ */ React246.createElement(Text, { size: "13" }, isExpanded ? "Show less" : `${numberOfNotifications} more`), /* @__PURE__ */ React246.createElement(
26785
26901
  Box,
26786
26902
  {
26787
26903
  width: "16",
@@ -26790,7 +26906,7 @@ var FunNotificationShowMoreButton = ({
26790
26906
  alignItems: "center",
26791
26907
  justifyContent: "center"
26792
26908
  },
26793
- /* @__PURE__ */ React245.createElement(
26909
+ /* @__PURE__ */ React246.createElement(
26794
26910
  Box,
26795
26911
  {
26796
26912
  color: "secondaryText",
@@ -26801,10 +26917,10 @@ var FunNotificationShowMoreButton = ({
26801
26917
  justifyContent: "center",
26802
26918
  style: isExpanded ? { transform: "rotate(180deg)" } : void 0
26803
26919
  },
26804
- /* @__PURE__ */ React245.createElement(CaretDownIcon, null)
26920
+ /* @__PURE__ */ React246.createElement(CaretDownIcon, null)
26805
26921
  )
26806
26922
  ));
26807
- return /* @__PURE__ */ React245.createElement(
26923
+ return /* @__PURE__ */ React246.createElement(
26808
26924
  FunButton,
26809
26925
  {
26810
26926
  type: "tertiary",
@@ -26885,11 +27001,11 @@ var useRecentDirectExecutions = ({
26885
27001
  };
26886
27002
 
26887
27003
  // src/modals/CheckoutModal/TransferToken/CheckoutNotification.tsx
26888
- import React248 from "react";
27004
+ import React249 from "react";
26889
27005
 
26890
27006
  // src/components/FunNotificationBanner/FunNotificationBanner.tsx
26891
- import { AnimatePresence as AnimatePresence5, motion as motion12 } from "motion/react";
26892
- import React247, { useState as useState64 } from "react";
27007
+ import { AnimatePresence as AnimatePresence5, motion as motion13 } from "motion/react";
27008
+ import React248, { useState as useState64 } from "react";
26893
27009
  import clsx22 from "clsx";
26894
27010
 
26895
27011
  // src/components/FunNotificationBanner/FunNotificationBanner.css.ts
@@ -26898,8 +27014,8 @@ var showMoreButtonStyle = "_4yitd93 _1rsrm2fy9 _1rsrm2f1e _1rsrm2f1b _1rsrm2fjf
26898
27014
 
26899
27015
  // src/components/FunNotificationBanner/FunNotificationBannerIcon.tsx
26900
27016
  import clsx21 from "clsx";
26901
- import { motion as motion11, useAnimate as useAnimate2 } from "motion/react";
26902
- import React246, { useCallback as useCallback45, useEffect as useEffect45, useRef as useRef23 } from "react";
27017
+ import { motion as motion12, useAnimate as useAnimate2 } from "motion/react";
27018
+ import React247, { useCallback as useCallback45, useEffect as useEffect45, useRef as useRef23 } from "react";
26903
27019
 
26904
27020
  // src/components/FunNotificationBanner/FunNotificationBannerIcon.css.ts
26905
27021
  var STATUS_SPINNER_BOTTOM_POSITION = -5;
@@ -26912,8 +27028,8 @@ var statusSpinner = "_1i8t3xj4 qe221a3";
26912
27028
  function generateAnimationPrefixClassName(className) {
26913
27029
  return `framer-fnb-${className}`;
26914
27030
  }
26915
- var successIcon = /* @__PURE__ */ React246.createElement(
26916
- motion11.svg,
27031
+ var successIcon = /* @__PURE__ */ React247.createElement(
27032
+ motion12.svg,
26917
27033
  {
26918
27034
  width: "16",
26919
27035
  height: "16",
@@ -26921,9 +27037,9 @@ var successIcon = /* @__PURE__ */ React246.createElement(
26921
27037
  fill: "none",
26922
27038
  xmlns: "http://www.w3.org/2000/svg"
26923
27039
  },
26924
- /* @__PURE__ */ React246.createElement("circle", { cx: "8", cy: "8", r: "8", fill: "#66CC00" }),
26925
- /* @__PURE__ */ React246.createElement(
26926
- motion11.path,
27040
+ /* @__PURE__ */ React247.createElement("circle", { cx: "8", cy: "8", r: "8", fill: "#66CC00" }),
27041
+ /* @__PURE__ */ React247.createElement(
27042
+ motion12.path,
26927
27043
  {
26928
27044
  d: "M5 8L7 10L11.5 5.5",
26929
27045
  stroke: "white",
@@ -26932,7 +27048,7 @@ var successIcon = /* @__PURE__ */ React246.createElement(
26932
27048
  }
26933
27049
  )
26934
27050
  );
26935
- var errorIcon = /* @__PURE__ */ React246.createElement(
27051
+ var errorIcon = /* @__PURE__ */ React247.createElement(
26936
27052
  "svg",
26937
27053
  {
26938
27054
  width: "16",
@@ -26941,8 +27057,8 @@ var errorIcon = /* @__PURE__ */ React246.createElement(
26941
27057
  fill: "none",
26942
27058
  xmlns: "http://www.w3.org/2000/svg"
26943
27059
  },
26944
- /* @__PURE__ */ React246.createElement("g", { filter: "url(#filter0_i_19769_7642)" }, /* @__PURE__ */ React246.createElement("circle", { cx: "8", cy: "8", r: "8", fill: "#F34126" })),
26945
- /* @__PURE__ */ React246.createElement(
27060
+ /* @__PURE__ */ React247.createElement("g", { filter: "url(#filter0_i_19769_7642)" }, /* @__PURE__ */ React247.createElement("circle", { cx: "8", cy: "8", r: "8", fill: "#F34126" })),
27061
+ /* @__PURE__ */ React247.createElement(
26946
27062
  "path",
26947
27063
  {
26948
27064
  d: "M5 5L11 11",
@@ -26951,7 +27067,7 @@ var errorIcon = /* @__PURE__ */ React246.createElement(
26951
27067
  strokeLinejoin: "round"
26952
27068
  }
26953
27069
  ),
26954
- /* @__PURE__ */ React246.createElement(
27070
+ /* @__PURE__ */ React247.createElement(
26955
27071
  "path",
26956
27072
  {
26957
27073
  d: "M5 11L11 5",
@@ -26960,7 +27076,7 @@ var errorIcon = /* @__PURE__ */ React246.createElement(
26960
27076
  strokeLinejoin: "round"
26961
27077
  }
26962
27078
  ),
26963
- /* @__PURE__ */ React246.createElement("defs", null, /* @__PURE__ */ React246.createElement(
27079
+ /* @__PURE__ */ React247.createElement("defs", null, /* @__PURE__ */ React247.createElement(
26964
27080
  "filter",
26965
27081
  {
26966
27082
  id: "filter0_i_19769_7642",
@@ -26971,8 +27087,8 @@ var errorIcon = /* @__PURE__ */ React246.createElement(
26971
27087
  filterUnits: "userSpaceOnUse",
26972
27088
  colorInterpolationFilters: "sRGB"
26973
27089
  },
26974
- /* @__PURE__ */ React246.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
26975
- /* @__PURE__ */ React246.createElement(
27090
+ /* @__PURE__ */ React247.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
27091
+ /* @__PURE__ */ React247.createElement(
26976
27092
  "feBlend",
26977
27093
  {
26978
27094
  mode: "normal",
@@ -26981,7 +27097,7 @@ var errorIcon = /* @__PURE__ */ React246.createElement(
26981
27097
  result: "shape"
26982
27098
  }
26983
27099
  ),
26984
- /* @__PURE__ */ React246.createElement(
27100
+ /* @__PURE__ */ React247.createElement(
26985
27101
  "feColorMatrix",
26986
27102
  {
26987
27103
  in: "SourceAlpha",
@@ -26990,16 +27106,16 @@ var errorIcon = /* @__PURE__ */ React246.createElement(
26990
27106
  result: "hardAlpha"
26991
27107
  }
26992
27108
  ),
26993
- /* @__PURE__ */ React246.createElement("feOffset", { dy: "-1" }),
26994
- /* @__PURE__ */ React246.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
26995
- /* @__PURE__ */ React246.createElement(
27109
+ /* @__PURE__ */ React247.createElement("feOffset", { dy: "-1" }),
27110
+ /* @__PURE__ */ React247.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
27111
+ /* @__PURE__ */ React247.createElement(
26996
27112
  "feColorMatrix",
26997
27113
  {
26998
27114
  type: "matrix",
26999
27115
  values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"
27000
27116
  }
27001
27117
  ),
27002
- /* @__PURE__ */ React246.createElement(
27118
+ /* @__PURE__ */ React247.createElement(
27003
27119
  "feBlend",
27004
27120
  {
27005
27121
  mode: "normal",
@@ -27009,8 +27125,8 @@ var errorIcon = /* @__PURE__ */ React246.createElement(
27009
27125
  )
27010
27126
  ))
27011
27127
  );
27012
- var pendingIcon = /* @__PURE__ */ React246.createElement(
27013
- motion11.svg,
27128
+ var pendingIcon = /* @__PURE__ */ React247.createElement(
27129
+ motion12.svg,
27014
27130
  {
27015
27131
  width: "16",
27016
27132
  height: "16",
@@ -27018,9 +27134,9 @@ var pendingIcon = /* @__PURE__ */ React246.createElement(
27018
27134
  fill: "none",
27019
27135
  xmlns: "http://www.w3.org/2000/svg"
27020
27136
  },
27021
- /* @__PURE__ */ React246.createElement("g", { filter: "url(#filter0_i_19866_15799)" }, /* @__PURE__ */ React246.createElement("circle", { cx: "8", cy: "8", r: "8", fill: "#8C8C8C" })),
27022
- /* @__PURE__ */ React246.createElement("g", { clipPath: "url(#clip0_19866_15799)" }, /* @__PURE__ */ React246.createElement(
27023
- motion11.path,
27137
+ /* @__PURE__ */ React247.createElement("g", { filter: "url(#filter0_i_19866_15799)" }, /* @__PURE__ */ React247.createElement("circle", { cx: "8", cy: "8", r: "8", fill: "#8C8C8C" })),
27138
+ /* @__PURE__ */ React247.createElement("g", { clipPath: "url(#clip0_19866_15799)" }, /* @__PURE__ */ React247.createElement(
27139
+ motion12.path,
27024
27140
  {
27025
27141
  d: "M8 5V8L10 9M13 8C13 10.7614 10.7614 13 8 13C5.23858 13 3 10.7614 3 8C3 5.23858 5.23858 3 8 3C10.7614 3 13 5.23858 13 8Z",
27026
27142
  stroke: "white",
@@ -27029,7 +27145,7 @@ var pendingIcon = /* @__PURE__ */ React246.createElement(
27029
27145
  strokeLinejoin: "round"
27030
27146
  }
27031
27147
  )),
27032
- /* @__PURE__ */ React246.createElement("defs", null, /* @__PURE__ */ React246.createElement(
27148
+ /* @__PURE__ */ React247.createElement("defs", null, /* @__PURE__ */ React247.createElement(
27033
27149
  "filter",
27034
27150
  {
27035
27151
  id: "filter0_i_19866_15799",
@@ -27040,8 +27156,8 @@ var pendingIcon = /* @__PURE__ */ React246.createElement(
27040
27156
  filterUnits: "userSpaceOnUse",
27041
27157
  colorInterpolationFilters: "sRGB"
27042
27158
  },
27043
- /* @__PURE__ */ React246.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
27044
- /* @__PURE__ */ React246.createElement(
27159
+ /* @__PURE__ */ React247.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
27160
+ /* @__PURE__ */ React247.createElement(
27045
27161
  "feBlend",
27046
27162
  {
27047
27163
  mode: "normal",
@@ -27050,7 +27166,7 @@ var pendingIcon = /* @__PURE__ */ React246.createElement(
27050
27166
  result: "shape"
27051
27167
  }
27052
27168
  ),
27053
- /* @__PURE__ */ React246.createElement(
27169
+ /* @__PURE__ */ React247.createElement(
27054
27170
  "feColorMatrix",
27055
27171
  {
27056
27172
  in: "SourceAlpha",
@@ -27059,16 +27175,16 @@ var pendingIcon = /* @__PURE__ */ React246.createElement(
27059
27175
  result: "hardAlpha"
27060
27176
  }
27061
27177
  ),
27062
- /* @__PURE__ */ React246.createElement("feOffset", { dy: "-1" }),
27063
- /* @__PURE__ */ React246.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
27064
- /* @__PURE__ */ React246.createElement(
27178
+ /* @__PURE__ */ React247.createElement("feOffset", { dy: "-1" }),
27179
+ /* @__PURE__ */ React247.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
27180
+ /* @__PURE__ */ React247.createElement(
27065
27181
  "feColorMatrix",
27066
27182
  {
27067
27183
  type: "matrix",
27068
27184
  values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"
27069
27185
  }
27070
27186
  ),
27071
- /* @__PURE__ */ React246.createElement(
27187
+ /* @__PURE__ */ React247.createElement(
27072
27188
  "feBlend",
27073
27189
  {
27074
27190
  mode: "normal",
@@ -27076,10 +27192,10 @@ var pendingIcon = /* @__PURE__ */ React246.createElement(
27076
27192
  result: "effect1_innerShadow_19866_15799"
27077
27193
  }
27078
27194
  )
27079
- ), /* @__PURE__ */ React246.createElement("clipPath", { id: "clip0_19866_15799" }, /* @__PURE__ */ React246.createElement("rect", { width: "12", height: "12", fill: "white", transform: "translate(2 2)" })))
27195
+ ), /* @__PURE__ */ React247.createElement("clipPath", { id: "clip0_19866_15799" }, /* @__PURE__ */ React247.createElement("rect", { width: "12", height: "12", fill: "white", transform: "translate(2 2)" })))
27080
27196
  );
27081
- var downloadIcon = /* @__PURE__ */ React246.createElement(
27082
- motion11.svg,
27197
+ var downloadIcon = /* @__PURE__ */ React247.createElement(
27198
+ motion12.svg,
27083
27199
  {
27084
27200
  width: "16",
27085
27201
  height: "16",
@@ -27087,9 +27203,9 @@ var downloadIcon = /* @__PURE__ */ React246.createElement(
27087
27203
  fill: "none",
27088
27204
  xmlns: "http://www.w3.org/2000/svg"
27089
27205
  },
27090
- /* @__PURE__ */ React246.createElement("circle", { cx: "8", cy: "8", r: "8", fill: "#66CC00" }),
27091
- /* @__PURE__ */ React246.createElement(
27092
- motion11.path,
27206
+ /* @__PURE__ */ React247.createElement("circle", { cx: "8", cy: "8", r: "8", fill: "#66CC00" }),
27207
+ /* @__PURE__ */ React247.createElement(
27208
+ motion12.path,
27093
27209
  {
27094
27210
  d: "M8 4C8 6.14788 8 11.5 8 11.5M8 11.5L11 8.5M8 11.5L5 8.5",
27095
27211
  stroke: "white",
@@ -27099,7 +27215,7 @@ var downloadIcon = /* @__PURE__ */ React246.createElement(
27099
27215
  )
27100
27216
  );
27101
27217
  var SpinnerBase = ({ variant }) => {
27102
- return /* @__PURE__ */ React246.createElement(motion11.div, null, /* @__PURE__ */ React246.createElement(
27218
+ return /* @__PURE__ */ React247.createElement(motion12.div, null, /* @__PURE__ */ React247.createElement(
27103
27219
  Box,
27104
27220
  {
27105
27221
  className: clsx21(
@@ -27108,7 +27224,7 @@ var SpinnerBase = ({ variant }) => {
27108
27224
  ),
27109
27225
  color: variant === "processing" ? "success" : "inputBorderHover"
27110
27226
  },
27111
- /* @__PURE__ */ React246.createElement(
27227
+ /* @__PURE__ */ React247.createElement(
27112
27228
  "svg",
27113
27229
  {
27114
27230
  width: "24",
@@ -27117,7 +27233,7 @@ var SpinnerBase = ({ variant }) => {
27117
27233
  fill: "none",
27118
27234
  xmlns: "http://www.w3.org/2000/svg"
27119
27235
  },
27120
- /* @__PURE__ */ React246.createElement(
27236
+ /* @__PURE__ */ React247.createElement(
27121
27237
  "circle",
27122
27238
  {
27123
27239
  opacity: "0.5",
@@ -27133,8 +27249,8 @@ var SpinnerBase = ({ variant }) => {
27133
27249
  )
27134
27250
  ));
27135
27251
  };
27136
- var ProcessingSpinner = () => /* @__PURE__ */ React246.createElement(SpinnerBase, { variant: "processing" });
27137
- var DelayedSpinner = () => /* @__PURE__ */ React246.createElement(SpinnerBase, { variant: "delayed" });
27252
+ var ProcessingSpinner = () => /* @__PURE__ */ React247.createElement(SpinnerBase, { variant: "processing" });
27253
+ var DelayedSpinner = () => /* @__PURE__ */ React247.createElement(SpinnerBase, { variant: "delayed" });
27138
27254
  var statusIconMap = {
27139
27255
  processing: downloadIcon,
27140
27256
  delayed: downloadIcon,
@@ -27365,7 +27481,7 @@ var FunNotificationBannerIcon = ({
27365
27481
  triggerAnimationDelayedToFailed,
27366
27482
  triggerAnimationProcessingToCompleted
27367
27483
  ]);
27368
- return /* @__PURE__ */ React246.createElement(Box, { width: "32", height: "32", position: "relative", ref: animationScope }, statusRef.current === "processing" && /* @__PURE__ */ React246.createElement(ProcessingSpinner, null), statusRef.current === "delayed" && /* @__PURE__ */ React246.createElement(DelayedSpinner, null), /* @__PURE__ */ React246.createElement(Box, { className: shadowStyle }, /* @__PURE__ */ React246.createElement(
27484
+ return /* @__PURE__ */ React247.createElement(Box, { width: "32", height: "32", position: "relative", ref: animationScope }, statusRef.current === "processing" && /* @__PURE__ */ React247.createElement(ProcessingSpinner, null), statusRef.current === "delayed" && /* @__PURE__ */ React247.createElement(DelayedSpinner, null), /* @__PURE__ */ React247.createElement(Box, { className: shadowStyle }, /* @__PURE__ */ React247.createElement(
27369
27485
  AsyncImage,
27370
27486
  {
27371
27487
  alt: "",
@@ -27375,7 +27491,7 @@ var FunNotificationBannerIcon = ({
27375
27491
  src: iconUrl ?? void 0,
27376
27492
  fallbackSrc: fallbackIconUrl
27377
27493
  }
27378
- )), statusRef.current && /* @__PURE__ */ React246.createElement(
27494
+ )), statusRef.current && /* @__PURE__ */ React247.createElement(
27379
27495
  Box,
27380
27496
  {
27381
27497
  className: clsx21(
@@ -27385,7 +27501,7 @@ var FunNotificationBannerIcon = ({
27385
27501
  width: "20",
27386
27502
  height: "20"
27387
27503
  },
27388
- /* @__PURE__ */ React246.createElement(Box, { className: clsx21(statusIcon) }, Object.entries(statusIconMap).map(([key, value]) => /* @__PURE__ */ React246.createElement(
27504
+ /* @__PURE__ */ React247.createElement(Box, { className: clsx21(statusIcon) }, Object.entries(statusIconMap).map(([key, value]) => /* @__PURE__ */ React247.createElement(
27389
27505
  "div",
27390
27506
  {
27391
27507
  key,
@@ -27410,7 +27526,7 @@ var FunNotificationBannerIcon = ({
27410
27526
  };
27411
27527
 
27412
27528
  // src/components/FunNotificationBanner/FunNotificationBanner.tsx
27413
- var closeIcon = /* @__PURE__ */ React247.createElement(
27529
+ var closeIcon = /* @__PURE__ */ React248.createElement(
27414
27530
  "svg",
27415
27531
  {
27416
27532
  width: "16",
@@ -27419,7 +27535,7 @@ var closeIcon = /* @__PURE__ */ React247.createElement(
27419
27535
  fill: "none",
27420
27536
  xmlns: "http://www.w3.org/2000/svg"
27421
27537
  },
27422
- /* @__PURE__ */ React247.createElement(
27538
+ /* @__PURE__ */ React248.createElement(
27423
27539
  "path",
27424
27540
  {
27425
27541
  d: "M4.89066 4.15281C4.68691 3.94906 4.35657 3.94906 4.15281 4.15281C3.94906 4.35657 3.94906 4.68691 4.15281 4.89066L7.26215 8L4.15281 11.1093C3.94906 11.3131 3.94906 11.6434 4.15281 11.8472C4.35657 12.0509 4.68691 12.0509 4.89066 11.8472L8 8.73785L11.1093 11.8472C11.3131 12.0509 11.6434 12.0509 11.8472 11.8472C12.0509 11.6434 12.0509 11.3131 11.8472 11.1093L8.73785 8L11.8472 4.89066C12.0509 4.68691 12.0509 4.35657 11.8472 4.15281C11.6434 3.94906 11.3131 3.94906 11.1093 4.15281L8 7.26215L4.89066 4.15281Z",
@@ -27443,8 +27559,8 @@ var FunNotificationBanner = ({
27443
27559
  setIsOpen(false);
27444
27560
  onClosed?.();
27445
27561
  };
27446
- return /* @__PURE__ */ React247.createElement(AnimatePresence5, null, isOpen ? /* @__PURE__ */ React247.createElement(
27447
- motion12.div,
27562
+ return /* @__PURE__ */ React248.createElement(AnimatePresence5, null, isOpen ? /* @__PURE__ */ React248.createElement(
27563
+ motion13.div,
27448
27564
  {
27449
27565
  initial: {
27450
27566
  height: 0,
@@ -27472,7 +27588,7 @@ var FunNotificationBanner = ({
27472
27588
  }
27473
27589
  }
27474
27590
  },
27475
- /* @__PURE__ */ React247.createElement(Box, { className: clsx22(notificationBannerStyle) }, /* @__PURE__ */ React247.createElement(
27591
+ /* @__PURE__ */ React248.createElement(Box, { className: clsx22(notificationBannerStyle) }, /* @__PURE__ */ React248.createElement(
27476
27592
  FunIconButton,
27477
27593
  {
27478
27594
  borderRadius: "full",
@@ -27486,14 +27602,14 @@ var FunNotificationBanner = ({
27486
27602
  right: "4px"
27487
27603
  }
27488
27604
  }
27489
- ), /* @__PURE__ */ React247.createElement(Box, { padding: "16", display: "flex", gap: "16" }, /* @__PURE__ */ React247.createElement(
27605
+ ), /* @__PURE__ */ React248.createElement(Box, { padding: "16", display: "flex", gap: "16" }, /* @__PURE__ */ React248.createElement(
27490
27606
  FunNotificationBannerIcon,
27491
27607
  {
27492
27608
  iconUrl,
27493
27609
  status,
27494
27610
  fallbackIconUrl
27495
27611
  }
27496
- ), /* @__PURE__ */ React247.createElement(Box, { display: "flex", flexDirection: "column" }, /* @__PURE__ */ React247.createElement(Box, { display: "flex", flexDirection: "column", gap: "6" }, /* @__PURE__ */ React247.createElement(
27612
+ ), /* @__PURE__ */ React248.createElement(Box, { display: "flex", flexDirection: "column" }, /* @__PURE__ */ React248.createElement(Box, { display: "flex", flexDirection: "column", gap: "6" }, /* @__PURE__ */ React248.createElement(
27497
27613
  Text,
27498
27614
  {
27499
27615
  weight: "medium",
@@ -27501,7 +27617,7 @@ var FunNotificationBanner = ({
27501
27617
  style: { lineHeight: "13px" }
27502
27618
  },
27503
27619
  title
27504
- ), /* @__PURE__ */ React247.createElement(Text, { size: "12", color: "secondaryText" }, description)), disclaimer && /* @__PURE__ */ React247.createElement(
27620
+ ), /* @__PURE__ */ React248.createElement(Text, { size: "12", color: "secondaryText" }, description)), disclaimer && /* @__PURE__ */ React248.createElement(
27505
27621
  Box,
27506
27622
  {
27507
27623
  marginTop: "12",
@@ -27512,9 +27628,9 @@ var FunNotificationBanner = ({
27512
27628
  borderRadius: "8",
27513
27629
  borderColor: "mediumStroke"
27514
27630
  },
27515
- /* @__PURE__ */ React247.createElement(Text, { color: "secondaryText", size: "12" }, disclaimer)
27516
- ), /* @__PURE__ */ React247.createElement(AnimatePresence5, null, showMore && /* @__PURE__ */ React247.createElement(
27517
- motion12.div,
27631
+ /* @__PURE__ */ React248.createElement(Text, { color: "secondaryText", size: "12" }, disclaimer)
27632
+ ), /* @__PURE__ */ React248.createElement(AnimatePresence5, null, showMore && /* @__PURE__ */ React248.createElement(
27633
+ motion13.div,
27518
27634
  {
27519
27635
  initial: {
27520
27636
  height: 0,
@@ -27550,27 +27666,27 @@ var FunNotificationBanner = ({
27550
27666
  }
27551
27667
  }
27552
27668
  },
27553
- /* @__PURE__ */ React247.createElement(
27669
+ /* @__PURE__ */ React248.createElement(
27554
27670
  Box,
27555
27671
  {
27556
27672
  marginTop: "12"
27557
27673
  },
27558
27674
  children
27559
27675
  )
27560
- )))), children && /* @__PURE__ */ React247.createElement(
27676
+ )))), children && /* @__PURE__ */ React248.createElement(
27561
27677
  "button",
27562
27678
  {
27563
27679
  type: "button",
27564
27680
  onClick: () => setShowMore((value) => !value),
27565
27681
  className: showMoreButtonStyle
27566
27682
  },
27567
- /* @__PURE__ */ React247.createElement(
27683
+ /* @__PURE__ */ React248.createElement(
27568
27684
  Text,
27569
27685
  {
27570
27686
  size: "12",
27571
27687
  color: { base: "secondaryText", hover: "primaryText" }
27572
27688
  },
27573
- /* @__PURE__ */ React247.createElement(Box, { paddingY: "8", textAlign: "center" }, showMore ? "See less" : "See more")
27689
+ /* @__PURE__ */ React248.createElement(Box, { paddingY: "8", textAlign: "center" }, showMore ? "See less" : "See more")
27574
27690
  )
27575
27691
  ))
27576
27692
  ) : null);
@@ -27610,7 +27726,7 @@ var CheckoutNotification = ({
27610
27726
  const { status } = getCheckoutStateBooleans(checkout.state);
27611
27727
  const notificationStatus = isDelayed(checkout) ? "delayed" : status;
27612
27728
  const normalizedTicker = initSettings.config.targetAssetTicker?.toUpperCase();
27613
- return /* @__PURE__ */ React248.createElement(
27729
+ return /* @__PURE__ */ React249.createElement(
27614
27730
  FunNotificationBanner,
27615
27731
  {
27616
27732
  description: parseDescription(checkout),
@@ -27620,7 +27736,7 @@ var CheckoutNotification = ({
27620
27736
  status: notificationStatus,
27621
27737
  onClosed: () => onClose(depositAddress)
27622
27738
  },
27623
- /* @__PURE__ */ React248.createElement(
27739
+ /* @__PURE__ */ React249.createElement(
27624
27740
  Box,
27625
27741
  {
27626
27742
  paddingY: "8",
@@ -27631,7 +27747,7 @@ var CheckoutNotification = ({
27631
27747
  borderWidth: "1",
27632
27748
  borderStyle: "solid"
27633
27749
  },
27634
- /* @__PURE__ */ React248.createElement(OrderDetailSection, { checkoutHistoryItem: checkout })
27750
+ /* @__PURE__ */ React249.createElement(OrderDetailSection, { checkoutHistoryItem: checkout })
27635
27751
  )
27636
27752
  );
27637
27753
  };
@@ -27668,7 +27784,7 @@ var parseDescription = (checkout) => {
27668
27784
  };
27669
27785
  var parseDisclaimer = (checkout, onHelp) => {
27670
27786
  const { isError } = getCheckoutStateBooleans(checkout.state);
27671
- const contactLink = /* @__PURE__ */ React248.createElement(
27787
+ const contactLink = /* @__PURE__ */ React249.createElement(
27672
27788
  FunLinkButton,
27673
27789
  {
27674
27790
  text: "Contact us",
@@ -27679,16 +27795,16 @@ var parseDisclaimer = (checkout, onHelp) => {
27679
27795
  }
27680
27796
  );
27681
27797
  if (isError) {
27682
- return /* @__PURE__ */ React248.createElement(React248.Fragment, null, "Your deposit is being processed. ", contactLink, " for more info.");
27798
+ return /* @__PURE__ */ React249.createElement(React249.Fragment, null, "Your deposit is being processed. ", contactLink, " for more info.");
27683
27799
  }
27684
27800
  if (checkout.refundState === "REFUNDED") return "Your order was refunded.";
27685
27801
  if (checkout.refundState === "PROCEEDED" || isDelayed(checkout)) {
27686
- return /* @__PURE__ */ React248.createElement(React248.Fragment, null, "Transaction was delayed but your funds are safe. ", contactLink, " for more info.");
27802
+ return /* @__PURE__ */ React249.createElement(React249.Fragment, null, "Transaction was delayed but your funds are safe. ", contactLink, " for more info.");
27687
27803
  }
27688
27804
  };
27689
27805
 
27690
27806
  // src/modals/CheckoutModal/TransferToken/DirectExecutionNotification.tsx
27691
- import React249 from "react";
27807
+ import React250 from "react";
27692
27808
  var mapDirectExecutionStateToNotificationStatus = (isDelayed2, isRefunded, isCompleted, isFailed) => {
27693
27809
  if (isDelayed2) return "delayed";
27694
27810
  if (isCompleted) return "completed";
@@ -27712,7 +27828,7 @@ var DirectExecutionNotification = ({
27712
27828
  isFailed
27713
27829
  );
27714
27830
  const normalizedTicker = initSettings.config.targetAssetTicker?.toUpperCase();
27715
- return /* @__PURE__ */ React249.createElement(
27831
+ return /* @__PURE__ */ React250.createElement(
27716
27832
  FunNotificationBanner,
27717
27833
  {
27718
27834
  description: parseDescription2(
@@ -27732,7 +27848,7 @@ var DirectExecutionNotification = ({
27732
27848
  status: notificationStatus,
27733
27849
  onClosed: () => onClose(directExecution.txHash)
27734
27850
  },
27735
- /* @__PURE__ */ React249.createElement(
27851
+ /* @__PURE__ */ React250.createElement(
27736
27852
  Box,
27737
27853
  {
27738
27854
  paddingY: "8",
@@ -27743,7 +27859,7 @@ var DirectExecutionNotification = ({
27743
27859
  borderWidth: "1",
27744
27860
  borderStyle: "solid"
27745
27861
  },
27746
- /* @__PURE__ */ React249.createElement(DirectExecutionOrderDetailSection, { directExecution })
27862
+ /* @__PURE__ */ React250.createElement(DirectExecutionOrderDetailSection, { directExecution })
27747
27863
  )
27748
27864
  );
27749
27865
  };
@@ -27769,7 +27885,7 @@ var parseDescription2 = (isDelayed2, isRefunded, isCompleted, isFailed) => {
27769
27885
  return "";
27770
27886
  };
27771
27887
  var parseDisclaimer2 = (isRefunded, isDelayed2, isFailed, onHelp) => {
27772
- const contactLink = /* @__PURE__ */ React249.createElement(
27888
+ const contactLink = /* @__PURE__ */ React250.createElement(
27773
27889
  FunLinkButton,
27774
27890
  {
27775
27891
  text: "Contact us",
@@ -27780,10 +27896,10 @@ var parseDisclaimer2 = (isRefunded, isDelayed2, isFailed, onHelp) => {
27780
27896
  }
27781
27897
  );
27782
27898
  if (isFailed || isRefunded) {
27783
- return /* @__PURE__ */ React249.createElement(React249.Fragment, null, "Your deposit didn't complete. ", contactLink, " for more info.");
27899
+ return /* @__PURE__ */ React250.createElement(React250.Fragment, null, "Your deposit didn't complete. ", contactLink, " for more info.");
27784
27900
  }
27785
27901
  if (isDelayed2) {
27786
- return /* @__PURE__ */ React249.createElement(React249.Fragment, null, "Your deposit is delayed but funds are safe. ", contactLink, " for more info.");
27902
+ return /* @__PURE__ */ React250.createElement(React250.Fragment, null, "Your deposit is delayed but funds are safe. ", contactLink, " for more info.");
27787
27903
  }
27788
27904
  };
27789
27905
 
@@ -27833,7 +27949,7 @@ var CheckoutNotifications = ({
27833
27949
  }, [isExpanded, combinedNotifications]);
27834
27950
  const handleNotificationClose = (id) => setClosedNotifications((prev) => [...prev, id]);
27835
27951
  if (!isVisible) return null;
27836
- return /* @__PURE__ */ React250.createElement(
27952
+ return /* @__PURE__ */ React251.createElement(
27837
27953
  Box,
27838
27954
  {
27839
27955
  position: "absolute",
@@ -27841,9 +27957,9 @@ var CheckoutNotifications = ({
27841
27957
  maxHeight: "full",
27842
27958
  style: { bottom: 0, left: 0, right: 0, zIndex: OVERLAY_Z_INDEX }
27843
27959
  },
27844
- /* @__PURE__ */ React250.createElement(Box, { display: "flex", flexDirection: "column", gap: "8", padding: "8" }, displayedNotifications.map((item) => {
27960
+ /* @__PURE__ */ React251.createElement(Box, { display: "flex", flexDirection: "column", gap: "8", padding: "8" }, displayedNotifications.map((item) => {
27845
27961
  if (item.isDirectExecution) {
27846
- return /* @__PURE__ */ React250.createElement(
27962
+ return /* @__PURE__ */ React251.createElement(
27847
27963
  DirectExecutionNotification,
27848
27964
  {
27849
27965
  key: item.txHash,
@@ -27853,7 +27969,7 @@ var CheckoutNotifications = ({
27853
27969
  }
27854
27970
  );
27855
27971
  }
27856
- return /* @__PURE__ */ React250.createElement(
27972
+ return /* @__PURE__ */ React251.createElement(
27857
27973
  CheckoutNotification,
27858
27974
  {
27859
27975
  key: item.depositAddr,
@@ -27862,7 +27978,7 @@ var CheckoutNotifications = ({
27862
27978
  onHelp
27863
27979
  }
27864
27980
  );
27865
- }), combinedNotifications.length > COLLAPSED_COUNT && /* @__PURE__ */ React250.createElement(
27981
+ }), combinedNotifications.length > COLLAPSED_COUNT && /* @__PURE__ */ React251.createElement(
27866
27982
  FunNotificationShowMoreButton,
27867
27983
  {
27868
27984
  isExpanded,
@@ -27901,7 +28017,7 @@ initializeRelayClient({
27901
28017
  var CHECKOUT_DIALOG_CONTENT_ID = "checkout-dialog-content";
27902
28018
  function FunCheckoutModalStepComponent(props) {
27903
28019
  const { Component: Component2 } = CheckoutModalSteps[props.modalState.step];
27904
- return /* @__PURE__ */ React251.createElement(Component2, { ...props });
28020
+ return /* @__PURE__ */ React252.createElement(Component2, { ...props });
27905
28021
  }
27906
28022
  function FunCheckoutModalInner({
27907
28023
  checkoutItem,
@@ -27959,7 +28075,7 @@ function FunCheckoutModalInner({
27959
28075
  depositAddress: checkoutItem.depositAddress ?? void 0,
27960
28076
  isCheckoutDetailView: modalState.step === "checkout_complete" /* CHECKOUT_COMPLETE */,
27961
28077
  paddingTop: 0,
27962
- topbar: /* @__PURE__ */ React251.createElement(
28078
+ topbar: /* @__PURE__ */ React252.createElement(
27963
28079
  Dialog.Title,
27964
28080
  {
27965
28081
  hasBackButton: hasBack && !isBlocked,
@@ -27975,7 +28091,7 @@ function FunCheckoutModalInner({
27975
28091
  withTopDivider: checkoutConfig.modalTitleMeta ? "always" : "scroll",
27976
28092
  scrollableContent: CHECKOUT_DIALOG_CONTENT_ID
27977
28093
  });
27978
- return /* @__PURE__ */ React251.createElement(
28094
+ return /* @__PURE__ */ React252.createElement(
27979
28095
  Dialog,
27980
28096
  {
27981
28097
  open,
@@ -27984,7 +28100,7 @@ function FunCheckoutModalInner({
27984
28100
  titleId: "fun-checkout-modal",
27985
28101
  isHidden: modalState.isSoftHidden
27986
28102
  },
27987
- /* @__PURE__ */ React251.createElement(FunCheckoutModalHeightAnimationWrapper, { checkoutStep: modalState.step }, topbar, /* @__PURE__ */ React251.createElement(
28103
+ /* @__PURE__ */ React252.createElement(FunCheckoutModalHeightAnimationWrapper, { checkoutStep: modalState.step }, topbar, /* @__PURE__ */ React252.createElement(
27988
28104
  Dialog.Content,
27989
28105
  {
27990
28106
  fullHeight: showFullHeight,
@@ -27994,20 +28110,20 @@ function FunCheckoutModalInner({
27994
28110
  withBottomDivider: modalState.step === "transfer_token" /* TRANSFER_TOKEN */ || modalState.step === "fiat_account_detail" /* FIAT_ACCOUNT_DETAIL */ ? "never" : "scroll",
27995
28111
  id: CHECKOUT_DIALOG_CONTENT_ID
27996
28112
  },
27997
- isBlocked ? /* @__PURE__ */ React251.createElement(
28113
+ isBlocked ? /* @__PURE__ */ React252.createElement(
27998
28114
  FunCheckoutBlocked,
27999
28115
  {
28000
28116
  reason: isUserGeoblocked ? "geoblock" : "security"
28001
28117
  }
28002
- ) : /* @__PURE__ */ React251.createElement(React251.Fragment, null, /* @__PURE__ */ React251.createElement(
28118
+ ) : /* @__PURE__ */ React252.createElement(React252.Fragment, null, /* @__PURE__ */ React252.createElement(
28003
28119
  DydxSwitchTab,
28004
28120
  {
28005
28121
  onSwitch: checkoutItem.initSettings.onDydxSwitch,
28006
28122
  showSwitch: showDydxSwitch,
28007
28123
  onClose: onCloseWrapper
28008
28124
  }
28009
- ), /* @__PURE__ */ React251.createElement(FunCheckoutModalStepComponent, { ...modalProps }))
28010
- ), /* @__PURE__ */ React251.createElement(Dialog.BottomSection, { id: CHECKOUT_MODAL_BOTTOM_BAR_ID }), !isBlocked && /* @__PURE__ */ React251.createElement(
28125
+ ), /* @__PURE__ */ React252.createElement(FunCheckoutModalStepComponent, { ...modalProps }))
28126
+ ), /* @__PURE__ */ React252.createElement(Dialog.BottomSection, { id: CHECKOUT_MODAL_BOTTOM_BAR_ID }), !isBlocked && /* @__PURE__ */ React252.createElement(
28011
28127
  CheckoutNotifications,
28012
28128
  {
28013
28129
  onHelp: handleCheckoutHelp,
@@ -28021,7 +28137,7 @@ function FunCheckoutModal({ onClose, open }) {
28021
28137
  if (!checkoutItem) {
28022
28138
  return null;
28023
28139
  }
28024
- return /* @__PURE__ */ React251.createElement(
28140
+ return /* @__PURE__ */ React252.createElement(
28025
28141
  FunCheckoutModalInner,
28026
28142
  {
28027
28143
  checkoutItem,
@@ -28032,7 +28148,7 @@ function FunCheckoutModal({ onClose, open }) {
28032
28148
  }
28033
28149
 
28034
28150
  // src/modals/ConnectModal/ConnectModal.tsx
28035
- import React252 from "react";
28151
+ import React253 from "react";
28036
28152
  import { useAccount as useAccount8 } from "wagmi";
28037
28153
  var TITLE_ID2 = "rk_connect_title";
28038
28154
  function ConnectModal({
@@ -28043,12 +28159,12 @@ function ConnectModal({
28043
28159
  const connectionStatus = useConnectionStatus();
28044
28160
  const { disconnect } = useFunkitDisconnect();
28045
28161
  const { isConnecting } = useAccount8();
28046
- const onConnectModalCancel = React252.useCallback(() => {
28162
+ const onConnectModalCancel = React253.useCallback(() => {
28047
28163
  if (isConnecting) disconnect();
28048
28164
  onClose();
28049
28165
  }, [onClose, disconnect, isConnecting]);
28050
28166
  if (connectionStatus === "disconnected" || connectionStatus === "loading") {
28051
- return /* @__PURE__ */ React252.createElement(
28167
+ return /* @__PURE__ */ React253.createElement(
28052
28168
  Dialog,
28053
28169
  {
28054
28170
  onClose: onConnectModalCancel,
@@ -28056,7 +28172,7 @@ function ConnectModal({
28056
28172
  titleId: TITLE_ID2,
28057
28173
  isSmartCloseable: true
28058
28174
  },
28059
- /* @__PURE__ */ React252.createElement(
28175
+ /* @__PURE__ */ React253.createElement(
28060
28176
  FunConnectOptions,
28061
28177
  {
28062
28178
  onClose: onConnectModalCancel,
@@ -28150,7 +28266,7 @@ function ModalProvider({ children }) {
28150
28266
  useEffect47(() => {
28151
28267
  if (isUnauthenticated) closeModals();
28152
28268
  }, [isUnauthenticated]);
28153
- return /* @__PURE__ */ React253.createElement(
28269
+ return /* @__PURE__ */ React254.createElement(
28154
28270
  ModalContext.Provider,
28155
28271
  {
28156
28272
  value: useMemo45(
@@ -28188,7 +28304,7 @@ function ModalProvider({ children }) {
28188
28304
  )
28189
28305
  },
28190
28306
  children,
28191
- /* @__PURE__ */ React253.createElement(
28307
+ /* @__PURE__ */ React254.createElement(
28192
28308
  ConnectModal,
28193
28309
  {
28194
28310
  onClose: closeConnectModal,
@@ -28196,7 +28312,7 @@ function ModalProvider({ children }) {
28196
28312
  walletsOnly: !!walletsOnly
28197
28313
  }
28198
28314
  ),
28199
- /* @__PURE__ */ React253.createElement(
28315
+ /* @__PURE__ */ React254.createElement(
28200
28316
  AccountModal,
28201
28317
  {
28202
28318
  onClose: closeAccountModal,
@@ -28204,8 +28320,8 @@ function ModalProvider({ children }) {
28204
28320
  defaultTab: accountModalTab
28205
28321
  }
28206
28322
  ),
28207
- /* @__PURE__ */ React253.createElement(ChainModal, { onClose: closeChainModal, open: chainModalOpen }),
28208
- /* @__PURE__ */ React253.createElement(
28323
+ /* @__PURE__ */ React254.createElement(ChainModal, { onClose: closeChainModal, open: chainModalOpen }),
28324
+ /* @__PURE__ */ React254.createElement(
28209
28325
  FunCheckoutModal,
28210
28326
  {
28211
28327
  onClose: closeFunCheckoutModal,
@@ -28946,7 +29062,7 @@ var FunkitWeb2Provider = ({
28946
29062
  handleFunkitWeb2Logout,
28947
29063
  web2UserInfo
28948
29064
  };
28949
- return /* @__PURE__ */ React254.createElement(FunkitWeb2Context.Provider, { value: contextValue }, privyIframeUrl ? /* @__PURE__ */ React254.createElement(
29065
+ return /* @__PURE__ */ React255.createElement(FunkitWeb2Context.Provider, { value: contextValue }, privyIframeUrl ? /* @__PURE__ */ React255.createElement(
28950
29066
  "iframe",
28951
29067
  {
28952
29068
  id: PRIVY_IFRAME_ID,
@@ -28979,7 +29095,7 @@ function useConnectionStatus() {
28979
29095
  }
28980
29096
 
28981
29097
  // src/providers/ShowBalanceContext.tsx
28982
- import React255, {
29098
+ import React256, {
28983
29099
  createContext as createContext19,
28984
29100
  useContext as useContext19,
28985
29101
  useState as useState68
@@ -28990,13 +29106,13 @@ var ShowBalanceContext = createContext19({
28990
29106
  });
28991
29107
  function ShowBalanceProvider({ children }) {
28992
29108
  const [showBalance, setShowBalance] = useState68();
28993
- return /* @__PURE__ */ React255.createElement(ShowBalanceContext.Provider, { value: { showBalance, setShowBalance } }, children);
29109
+ return /* @__PURE__ */ React256.createElement(ShowBalanceContext.Provider, { value: { showBalance, setShowBalance } }, children);
28994
29110
  }
28995
29111
  var useShowBalance = () => useContext19(ShowBalanceContext);
28996
29112
 
28997
29113
  // src/components/ConnectButton/ConnectButtonRenderer.tsx
28998
29114
  import { formatCurrencyAndStringify as formatCurrencyAndStringify16, isMobile as isMobile14, noop as noop8 } from "@funkit/utils";
28999
- import React256 from "react";
29115
+ import React257 from "react";
29000
29116
  import { useAccount as useAccount11, useBalance, useConfig as useConfig6 } from "wagmi";
29001
29117
 
29002
29118
  // src/hooks/useIsMounted.ts
@@ -29087,7 +29203,7 @@ function ConnectButtonRenderer({
29087
29203
  const { openChainModal } = useChainModal();
29088
29204
  const { openAccountModal } = useAccountModal();
29089
29205
  const { accountModalOpen, chainModalOpen, connectModalOpen } = useModalState();
29090
- return /* @__PURE__ */ React256.createElement(React256.Fragment, null, children({
29206
+ return /* @__PURE__ */ React257.createElement(React257.Fragment, null, children({
29091
29207
  account: address ? {
29092
29208
  address,
29093
29209
  balanceDecimals: balanceData?.decimals,
@@ -29143,7 +29259,7 @@ function ChainSelectorButton({
29143
29259
  openChainModal,
29144
29260
  chain
29145
29261
  }) {
29146
- return /* @__PURE__ */ React257.createElement(
29262
+ return /* @__PURE__ */ React258.createElement(
29147
29263
  Box,
29148
29264
  {
29149
29265
  alignItems: "center",
@@ -29171,7 +29287,7 @@ function ChainSelectorButton({
29171
29287
  type: "button",
29172
29288
  ...connectButtonStyles
29173
29289
  },
29174
- unsupportedChain ? /* @__PURE__ */ React257.createElement(Box, { alignItems: "center", display: "flex", height: "24", paddingX: "4" }, "Wrong network") : /* @__PURE__ */ React257.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, chain.hasIcon ? /* @__PURE__ */ React257.createElement(
29290
+ unsupportedChain ? /* @__PURE__ */ React258.createElement(Box, { alignItems: "center", display: "flex", height: "24", paddingX: "4" }, "Wrong network") : /* @__PURE__ */ React258.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, chain.hasIcon ? /* @__PURE__ */ React258.createElement(
29175
29291
  Box,
29176
29292
  {
29177
29293
  display: mapResponsiveValue(
@@ -29181,7 +29297,7 @@ function ChainSelectorButton({
29181
29297
  height: "12",
29182
29298
  width: "12"
29183
29299
  },
29184
- /* @__PURE__ */ React257.createElement(
29300
+ /* @__PURE__ */ React258.createElement(
29185
29301
  AsyncImage,
29186
29302
  {
29187
29303
  alt: chain.name ?? "Chain icon",
@@ -29192,7 +29308,7 @@ function ChainSelectorButton({
29192
29308
  src: chain.iconUrl
29193
29309
  }
29194
29310
  )
29195
- ) : null, /* @__PURE__ */ React257.createElement(
29311
+ ) : null, /* @__PURE__ */ React258.createElement(
29196
29312
  Box,
29197
29313
  {
29198
29314
  display: mapResponsiveValue(chainStatus, (value) => {
@@ -29212,7 +29328,7 @@ function AccountButton({
29212
29328
  showBalance,
29213
29329
  accountStatus
29214
29330
  }) {
29215
- return /* @__PURE__ */ React257.createElement(
29331
+ return /* @__PURE__ */ React258.createElement(
29216
29332
  Box,
29217
29333
  {
29218
29334
  alignItems: "center",
@@ -29232,7 +29348,7 @@ function AccountButton({
29232
29348
  gap: "16",
29233
29349
  ...connectButtonStyles
29234
29350
  },
29235
- account.displayBalance && /* @__PURE__ */ React257.createElement(
29351
+ account.displayBalance && /* @__PURE__ */ React258.createElement(
29236
29352
  Box,
29237
29353
  {
29238
29354
  display: mapResponsiveValue(
@@ -29242,7 +29358,7 @@ function AccountButton({
29242
29358
  },
29243
29359
  account.displayBalance
29244
29360
  ),
29245
- /* @__PURE__ */ React257.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, /* @__PURE__ */ React257.createElement(
29361
+ /* @__PURE__ */ React258.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, /* @__PURE__ */ React258.createElement(
29246
29362
  Box,
29247
29363
  {
29248
29364
  display: mapResponsiveValue(
@@ -29250,7 +29366,7 @@ function AccountButton({
29250
29366
  (value) => value === "full" || value === "avatar" ? "block" : "none"
29251
29367
  )
29252
29368
  },
29253
- /* @__PURE__ */ React257.createElement(
29369
+ /* @__PURE__ */ React258.createElement(
29254
29370
  Avatar,
29255
29371
  {
29256
29372
  address: account.address,
@@ -29259,7 +29375,7 @@ function AccountButton({
29259
29375
  size: 12
29260
29376
  }
29261
29377
  )
29262
- ), /* @__PURE__ */ React257.createElement(
29378
+ ), /* @__PURE__ */ React258.createElement(
29263
29379
  Box,
29264
29380
  {
29265
29381
  display: mapResponsiveValue(
@@ -29290,7 +29406,7 @@ function ConnectButton({
29290
29406
  setShowBalance(showBalance);
29291
29407
  if (!ready) setReady(true);
29292
29408
  }, [showBalance, setShowBalance, ready]);
29293
- return ready ? /* @__PURE__ */ React257.createElement(ConnectButtonRenderer, null, ({
29409
+ return ready ? /* @__PURE__ */ React258.createElement(ConnectButtonRenderer, null, ({
29294
29410
  account,
29295
29411
  chain,
29296
29412
  mounted,
@@ -29300,7 +29416,7 @@ function ConnectButton({
29300
29416
  }) => {
29301
29417
  const ready2 = mounted && connectionStatus !== "loading";
29302
29418
  const unsupportedChain = chain?.unsupported ?? false;
29303
- return /* @__PURE__ */ React257.createElement(
29419
+ return /* @__PURE__ */ React258.createElement(
29304
29420
  Box,
29305
29421
  {
29306
29422
  display: "flex",
@@ -29316,7 +29432,7 @@ function ConnectButton({
29316
29432
  },
29317
29433
  ready2 && account && connectionStatus === "connected" ? (
29318
29434
  // Logged in: Chain Button & Account Button
29319
- /* @__PURE__ */ React257.createElement(React257.Fragment, null, showChainSelector && chain && (chains.length > 1 || unsupportedChain) && /* @__PURE__ */ React257.createElement(
29435
+ /* @__PURE__ */ React258.createElement(React258.Fragment, null, showChainSelector && chain && (chains.length > 1 || unsupportedChain) && /* @__PURE__ */ React258.createElement(
29320
29436
  ChainSelectorButton,
29321
29437
  {
29322
29438
  unsupportedChain,
@@ -29324,7 +29440,7 @@ function ConnectButton({
29324
29440
  openChainModal,
29325
29441
  chain
29326
29442
  }
29327
- ), !unsupportedChain && /* @__PURE__ */ React257.createElement(
29443
+ ), !unsupportedChain && /* @__PURE__ */ React258.createElement(
29328
29444
  AccountButton,
29329
29445
  {
29330
29446
  openAccountModal,
@@ -29335,7 +29451,7 @@ function ConnectButton({
29335
29451
  ))
29336
29452
  ) : (
29337
29453
  // Not logged in: Connect Button
29338
- /* @__PURE__ */ React257.createElement(
29454
+ /* @__PURE__ */ React258.createElement(
29339
29455
  Box,
29340
29456
  {
29341
29457
  as: "button",
@@ -29353,19 +29469,19 @@ function ConnectButton({
29353
29469
  type: "button",
29354
29470
  ...connectButtonStyles
29355
29471
  },
29356
- /* @__PURE__ */ React257.createElement(Box, { display: "flex", gap: "8", alignItems: "center" }, mounted && label, suffixIcon)
29472
+ /* @__PURE__ */ React258.createElement(Box, { display: "flex", gap: "8", alignItems: "center" }, mounted && label, suffixIcon)
29357
29473
  )
29358
29474
  )
29359
29475
  );
29360
- }) : /* @__PURE__ */ React257.createElement(React257.Fragment, null);
29476
+ }) : /* @__PURE__ */ React258.createElement(React258.Fragment, null);
29361
29477
  }
29362
29478
  ConnectButton.__defaultProps = defaultProps;
29363
29479
  ConnectButton.Custom = ConnectButtonRenderer;
29364
29480
 
29365
29481
  // src/components/Icons/FunkitPaymentsIconLine.tsx
29366
- import React258 from "react";
29482
+ import React259 from "react";
29367
29483
  function MetaMaskPaymentIcon({ size = 16 }) {
29368
- return /* @__PURE__ */ React258.createElement(
29484
+ return /* @__PURE__ */ React259.createElement(
29369
29485
  "svg",
29370
29486
  {
29371
29487
  width: size,
@@ -29374,7 +29490,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29374
29490
  fill: "none",
29375
29491
  xmlns: "http://www.w3.org/2000/svg"
29376
29492
  },
29377
- /* @__PURE__ */ React258.createElement(
29493
+ /* @__PURE__ */ React259.createElement(
29378
29494
  "path",
29379
29495
  {
29380
29496
  d: "M24.0891 3.1199L15.3446 9.61456L16.9617 5.7828L24.0891 3.1199Z",
@@ -29385,7 +29501,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29385
29501
  strokeLinejoin: "round"
29386
29502
  }
29387
29503
  ),
29388
- /* @__PURE__ */ React258.createElement(
29504
+ /* @__PURE__ */ React259.createElement(
29389
29505
  "path",
29390
29506
  {
29391
29507
  d: "M3.90207 3.1199L12.5763 9.67608L11.0383 5.7828L3.90207 3.1199Z",
@@ -29396,7 +29512,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29396
29512
  strokeLinejoin: "round"
29397
29513
  }
29398
29514
  ),
29399
- /* @__PURE__ */ React258.createElement(
29515
+ /* @__PURE__ */ React259.createElement(
29400
29516
  "path",
29401
29517
  {
29402
29518
  d: "M20.9429 18.1745L18.6139 21.7426L23.597 23.1136L25.0295 18.2536L20.9429 18.1745Z",
@@ -29407,7 +29523,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29407
29523
  strokeLinejoin: "round"
29408
29524
  }
29409
29525
  ),
29410
- /* @__PURE__ */ React258.createElement(
29526
+ /* @__PURE__ */ React259.createElement(
29411
29527
  "path",
29412
29528
  {
29413
29529
  d: "M2.97929 18.2536L4.40301 23.1136L9.38607 21.7426L7.05713 18.1745L2.97929 18.2536Z",
@@ -29418,7 +29534,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29418
29534
  strokeLinejoin: "round"
29419
29535
  }
29420
29536
  ),
29421
- /* @__PURE__ */ React258.createElement(
29537
+ /* @__PURE__ */ React259.createElement(
29422
29538
  "path",
29423
29539
  {
29424
29540
  d: "M9.10483 12.1456L7.71626 14.2461L12.6642 14.4658L12.4884 9.14877L9.10483 12.1456Z",
@@ -29429,7 +29545,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29429
29545
  strokeLinejoin: "round"
29430
29546
  }
29431
29547
  ),
29432
- /* @__PURE__ */ React258.createElement(
29548
+ /* @__PURE__ */ React259.createElement(
29433
29549
  "path",
29434
29550
  {
29435
29551
  d: "M18.8864 12.1456L15.4589 9.08725L15.3446 14.4658L20.2837 14.2461L18.8864 12.1456Z",
@@ -29440,7 +29556,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29440
29556
  strokeLinejoin: "round"
29441
29557
  }
29442
29558
  ),
29443
- /* @__PURE__ */ React258.createElement(
29559
+ /* @__PURE__ */ React259.createElement(
29444
29560
  "path",
29445
29561
  {
29446
29562
  d: "M9.38606 21.7426L12.3566 20.2925L9.79033 18.2888L9.38606 21.7426Z",
@@ -29451,7 +29567,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29451
29567
  strokeLinejoin: "round"
29452
29568
  }
29453
29569
  ),
29454
- /* @__PURE__ */ React258.createElement(
29570
+ /* @__PURE__ */ React259.createElement(
29455
29571
  "path",
29456
29572
  {
29457
29573
  d: "M15.6347 20.2925L18.6139 21.7426L18.2009 18.2888L15.6347 20.2925Z",
@@ -29462,7 +29578,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29462
29578
  strokeLinejoin: "round"
29463
29579
  }
29464
29580
  ),
29465
- /* @__PURE__ */ React258.createElement(
29581
+ /* @__PURE__ */ React259.createElement(
29466
29582
  "path",
29467
29583
  {
29468
29584
  d: "M18.6139 21.7426L15.6347 20.2925L15.8719 22.2348L15.8456 23.0521L18.6139 21.7426Z",
@@ -29473,7 +29589,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29473
29589
  strokeLinejoin: "round"
29474
29590
  }
29475
29591
  ),
29476
- /* @__PURE__ */ React258.createElement(
29592
+ /* @__PURE__ */ React259.createElement(
29477
29593
  "path",
29478
29594
  {
29479
29595
  d: "M9.38606 21.7426L12.1544 23.0521L12.1368 22.2348L12.3566 20.2925L9.38606 21.7426Z",
@@ -29484,7 +29600,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29484
29600
  strokeLinejoin: "round"
29485
29601
  }
29486
29602
  ),
29487
- /* @__PURE__ */ React258.createElement(
29603
+ /* @__PURE__ */ React259.createElement(
29488
29604
  "path",
29489
29605
  {
29490
29606
  d: "M12.1984 17.0056L9.72002 16.2762L11.4689 15.4765L12.1984 17.0056Z",
@@ -29495,7 +29611,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29495
29611
  strokeLinejoin: "round"
29496
29612
  }
29497
29613
  ),
29498
- /* @__PURE__ */ React258.createElement(
29614
+ /* @__PURE__ */ React259.createElement(
29499
29615
  "path",
29500
29616
  {
29501
29617
  d: "M15.7928 17.0056L16.5223 15.4765L18.28 16.2762L15.7928 17.0056Z",
@@ -29506,7 +29622,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29506
29622
  strokeLinejoin: "round"
29507
29623
  }
29508
29624
  ),
29509
- /* @__PURE__ */ React258.createElement(
29625
+ /* @__PURE__ */ React259.createElement(
29510
29626
  "path",
29511
29627
  {
29512
29628
  d: "M9.38606 21.7426L9.80791 18.1745L7.05712 18.2536L9.38606 21.7426Z",
@@ -29517,7 +29633,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29517
29633
  strokeLinejoin: "round"
29518
29634
  }
29519
29635
  ),
29520
- /* @__PURE__ */ React258.createElement(
29636
+ /* @__PURE__ */ React259.createElement(
29521
29637
  "path",
29522
29638
  {
29523
29639
  d: "M18.1921 18.1745L18.6139 21.7426L20.9429 18.2536L18.1921 18.1745Z",
@@ -29528,7 +29644,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29528
29644
  strokeLinejoin: "round"
29529
29645
  }
29530
29646
  ),
29531
- /* @__PURE__ */ React258.createElement(
29647
+ /* @__PURE__ */ React259.createElement(
29532
29648
  "path",
29533
29649
  {
29534
29650
  d: "M20.2837 14.2461L15.3446 14.4658L15.8016 17.0057L16.5311 15.4765L18.2888 16.2762L20.2837 14.2461Z",
@@ -29539,7 +29655,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29539
29655
  strokeLinejoin: "round"
29540
29656
  }
29541
29657
  ),
29542
- /* @__PURE__ */ React258.createElement(
29658
+ /* @__PURE__ */ React259.createElement(
29543
29659
  "path",
29544
29660
  {
29545
29661
  d: "M9.72002 16.2762L11.4777 15.4765L12.1984 17.0057L12.6642 14.4658L7.71626 14.2461L9.72002 16.2762Z",
@@ -29550,7 +29666,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29550
29666
  strokeLinejoin: "round"
29551
29667
  }
29552
29668
  ),
29553
- /* @__PURE__ */ React258.createElement(
29669
+ /* @__PURE__ */ React259.createElement(
29554
29670
  "path",
29555
29671
  {
29556
29672
  d: "M7.71626 14.2461L9.79033 18.2888L9.72002 16.2762L7.71626 14.2461Z",
@@ -29561,7 +29677,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29561
29677
  strokeLinejoin: "round"
29562
29678
  }
29563
29679
  ),
29564
- /* @__PURE__ */ React258.createElement(
29680
+ /* @__PURE__ */ React259.createElement(
29565
29681
  "path",
29566
29682
  {
29567
29683
  d: "M18.2888 16.2762L18.2009 18.2888L20.2837 14.2461L18.2888 16.2762Z",
@@ -29572,7 +29688,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29572
29688
  strokeLinejoin: "round"
29573
29689
  }
29574
29690
  ),
29575
- /* @__PURE__ */ React258.createElement(
29691
+ /* @__PURE__ */ React259.createElement(
29576
29692
  "path",
29577
29693
  {
29578
29694
  d: "M12.6642 14.4658L12.1984 17.0057L12.7784 20.0025L12.9102 16.0565L12.6642 14.4658Z",
@@ -29583,7 +29699,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29583
29699
  strokeLinejoin: "round"
29584
29700
  }
29585
29701
  ),
29586
- /* @__PURE__ */ React258.createElement(
29702
+ /* @__PURE__ */ React259.createElement(
29587
29703
  "path",
29588
29704
  {
29589
29705
  d: "M15.3446 14.4658L15.1073 16.0477L15.2128 20.0025L15.8016 17.0057L15.3446 14.4658Z",
@@ -29594,7 +29710,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29594
29710
  strokeLinejoin: "round"
29595
29711
  }
29596
29712
  ),
29597
- /* @__PURE__ */ React258.createElement(
29713
+ /* @__PURE__ */ React259.createElement(
29598
29714
  "path",
29599
29715
  {
29600
29716
  d: "M15.8016 17.0056L15.2128 20.0025L15.6347 20.2925L18.2009 18.2888L18.2888 16.2762L15.8016 17.0056Z",
@@ -29605,7 +29721,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29605
29721
  strokeLinejoin: "round"
29606
29722
  }
29607
29723
  ),
29608
- /* @__PURE__ */ React258.createElement(
29724
+ /* @__PURE__ */ React259.createElement(
29609
29725
  "path",
29610
29726
  {
29611
29727
  d: "M9.72002 16.2762L9.79033 18.2888L12.3566 20.2925L12.7784 20.0025L12.1984 17.0056L9.72002 16.2762Z",
@@ -29616,7 +29732,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29616
29732
  strokeLinejoin: "round"
29617
29733
  }
29618
29734
  ),
29619
- /* @__PURE__ */ React258.createElement(
29735
+ /* @__PURE__ */ React259.createElement(
29620
29736
  "path",
29621
29737
  {
29622
29738
  d: "M15.8456 23.0521L15.8719 22.2348L15.6522 22.0414H12.339L12.1368 22.2348L12.1544 23.0521L9.38606 21.7426L10.3528 22.5336L12.3126 23.8958H15.6786L17.6472 22.5336L18.6139 21.7426L15.8456 23.0521Z",
@@ -29627,7 +29743,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29627
29743
  strokeLinejoin: "round"
29628
29744
  }
29629
29745
  ),
29630
- /* @__PURE__ */ React258.createElement(
29746
+ /* @__PURE__ */ React259.createElement(
29631
29747
  "path",
29632
29748
  {
29633
29749
  d: "M15.6347 20.2925L15.2128 20.0025H12.7784L12.3566 20.2925L12.1368 22.2348L12.339 22.0414H15.6522L15.8719 22.2348L15.6347 20.2925Z",
@@ -29638,7 +29754,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29638
29754
  strokeLinejoin: "round"
29639
29755
  }
29640
29756
  ),
29641
- /* @__PURE__ */ React258.createElement(
29757
+ /* @__PURE__ */ React259.createElement(
29642
29758
  "path",
29643
29759
  {
29644
29760
  d: "M24.4583 10.0364L25.2053 6.45072L24.0891 3.1199L15.6347 9.39485L18.8864 12.1456L23.4827 13.4903L24.5022 12.3038L24.0628 11.9874L24.7658 11.3459L24.221 10.924L24.924 10.3879L24.4583 10.0364Z",
@@ -29649,7 +29765,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29649
29765
  strokeLinejoin: "round"
29650
29766
  }
29651
29767
  ),
29652
- /* @__PURE__ */ React258.createElement(
29768
+ /* @__PURE__ */ React259.createElement(
29653
29769
  "path",
29654
29770
  {
29655
29771
  d: "M2.79472 6.45072L3.54174 10.0364L3.06717 10.3879L3.77024 10.924L3.23415 11.3459L3.93722 11.9874L3.4978 12.3038L4.50847 13.4903L9.10483 12.1456L12.3566 9.39485L3.90207 3.1199L2.79472 6.45072Z",
@@ -29660,7 +29776,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29660
29776
  strokeLinejoin: "round"
29661
29777
  }
29662
29778
  ),
29663
- /* @__PURE__ */ React258.createElement(
29779
+ /* @__PURE__ */ React259.createElement(
29664
29780
  "path",
29665
29781
  {
29666
29782
  d: "M23.4827 13.4903L18.8864 12.1456L20.2837 14.2461L18.2009 18.2888L20.9429 18.2536H25.0295L23.4827 13.4903Z",
@@ -29671,7 +29787,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29671
29787
  strokeLinejoin: "round"
29672
29788
  }
29673
29789
  ),
29674
- /* @__PURE__ */ React258.createElement(
29790
+ /* @__PURE__ */ React259.createElement(
29675
29791
  "path",
29676
29792
  {
29677
29793
  d: "M9.10484 12.1456L4.50848 13.4903L2.97929 18.2536H7.05713L9.79033 18.2888L7.71626 14.2461L9.10484 12.1456Z",
@@ -29682,7 +29798,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29682
29798
  strokeLinejoin: "round"
29683
29799
  }
29684
29800
  ),
29685
- /* @__PURE__ */ React258.createElement(
29801
+ /* @__PURE__ */ React259.createElement(
29686
29802
  "path",
29687
29803
  {
29688
29804
  d: "M15.3446 14.4658L15.6347 9.39485L16.9705 5.7828H11.0383L12.3566 9.39485L12.6642 14.4658L12.7696 16.0653L12.7784 20.0025H15.2128L15.2304 16.0653L15.3446 14.4658Z",
@@ -29696,14 +29812,14 @@ function MetaMaskPaymentIcon({ size = 16 }) {
29696
29812
  );
29697
29813
  }
29698
29814
  function MastercardPaymentIcon({ size = 16 }) {
29699
- return /* @__PURE__ */ React258.createElement(
29815
+ return /* @__PURE__ */ React259.createElement(
29700
29816
  "svg",
29701
29817
  {
29702
29818
  xmlns: "http://www.w3.org/2000/svg",
29703
29819
  height: size,
29704
29820
  viewBox: "0 0 152.407 108"
29705
29821
  },
29706
- /* @__PURE__ */ React258.createElement("g", null, /* @__PURE__ */ React258.createElement("rect", { width: "152.407", height: "108", fill: "transparent" }), /* @__PURE__ */ React258.createElement("g", null, /* @__PURE__ */ React258.createElement(
29822
+ /* @__PURE__ */ React259.createElement("g", null, /* @__PURE__ */ React259.createElement("rect", { width: "152.407", height: "108", fill: "transparent" }), /* @__PURE__ */ React259.createElement("g", null, /* @__PURE__ */ React259.createElement(
29707
29823
  "rect",
29708
29824
  {
29709
29825
  x: "60.4117",
@@ -29712,21 +29828,21 @@ function MastercardPaymentIcon({ size = 16 }) {
29712
29828
  height: "56.6064",
29713
29829
  fill: "#ff5f00"
29714
29830
  }
29715
- ), /* @__PURE__ */ React258.createElement(
29831
+ ), /* @__PURE__ */ React259.createElement(
29716
29832
  "path",
29717
29833
  {
29718
29834
  d: "M382.20839,306a35.9375,35.9375,0,0,1,13.7499-28.3032,36,36,0,1,0,0,56.6064A35.938,35.938,0,0,1,382.20839,306Z",
29719
29835
  transform: "translate(-319.79649 -252)",
29720
29836
  fill: "#eb001b"
29721
29837
  }
29722
- ), /* @__PURE__ */ React258.createElement(
29838
+ ), /* @__PURE__ */ React259.createElement(
29723
29839
  "path",
29724
29840
  {
29725
29841
  d: "M454.20349,306a35.99867,35.99867,0,0,1-58.2452,28.3032,36.00518,36.00518,0,0,0,0-56.6064A35.99867,35.99867,0,0,1,454.20349,306Z",
29726
29842
  transform: "translate(-319.79649 -252)",
29727
29843
  fill: "#f79e1b"
29728
29844
  }
29729
- ), /* @__PURE__ */ React258.createElement(
29845
+ ), /* @__PURE__ */ React259.createElement(
29730
29846
  "path",
29731
29847
  {
29732
29848
  d: "M450.76889,328.3077v-1.1589h.4673v-.2361h-1.1901v.2361h.4675v1.1589Zm2.3105,0v-1.3973h-.3648l-.41959.9611-.41971-.9611h-.365v1.3973h.2576v-1.054l.3935.9087h.2671l.39351-.911v1.0563Z",
@@ -29740,7 +29856,7 @@ function FunkitPaymentsIconLine({
29740
29856
  size = 16,
29741
29857
  gap = "2"
29742
29858
  }) {
29743
- return /* @__PURE__ */ React258.createElement(
29859
+ return /* @__PURE__ */ React259.createElement(
29744
29860
  Box,
29745
29861
  {
29746
29862
  display: "flex",
@@ -29749,9 +29865,9 @@ function FunkitPaymentsIconLine({
29749
29865
  alignItems: "center",
29750
29866
  justifyContent: "center"
29751
29867
  },
29752
- /* @__PURE__ */ React258.createElement(MetaMaskPaymentIcon, { size }),
29753
- /* @__PURE__ */ React258.createElement(MastercardPaymentIcon, { size }),
29754
- /* @__PURE__ */ React258.createElement(CoinbaseIcon, { size })
29868
+ /* @__PURE__ */ React259.createElement(MetaMaskPaymentIcon, { size }),
29869
+ /* @__PURE__ */ React259.createElement(MastercardPaymentIcon, { size }),
29870
+ /* @__PURE__ */ React259.createElement(CoinbaseIcon, { size })
29755
29871
  );
29756
29872
  }
29757
29873
 
@@ -29810,7 +29926,7 @@ var useUpdateActiveFunkitCheckout = () => {
29810
29926
 
29811
29927
  // src/providers/FunkitProvider.tsx
29812
29928
  import { QueryClientProvider } from "@tanstack/react-query";
29813
- import React259, { createContext as createContext20, useContext as useContext20 } from "react";
29929
+ import React260, { createContext as createContext20, useContext as useContext20 } from "react";
29814
29930
  import { WagmiProvider, useAccountEffect as useAccountEffect3 } from "wagmi";
29815
29931
 
29816
29932
  // src/utils/funkitProvider.ts
@@ -29894,7 +30010,7 @@ function setFunkitConnectVersion({ version }) {
29894
30010
  localStorage.setItem(storageKey5, version);
29895
30011
  }
29896
30012
  function getCurrentSdkVersion() {
29897
- return "5.5.0";
30013
+ return "5.5.2";
29898
30014
  }
29899
30015
  function useFingerprint() {
29900
30016
  const fingerprint = useCallback49(() => {
@@ -29945,7 +30061,7 @@ function FunkitProvider(props) {
29945
30061
  !!props.debug,
29946
30062
  getCurrentSdkVersion()
29947
30063
  );
29948
- const MainChild = /* @__PURE__ */ React259.createElement(FunkitThemeProvider, { theme: props.theme }, /* @__PURE__ */ React259.createElement(
30064
+ const MainChild = /* @__PURE__ */ React260.createElement(FunkitThemeProvider, { theme: props.theme }, /* @__PURE__ */ React260.createElement(
29949
30065
  FunkitProviderInner,
29950
30066
  {
29951
30067
  avatar: props.avatar,
@@ -29958,7 +30074,7 @@ function FunkitProvider(props) {
29958
30074
  },
29959
30075
  props.children
29960
30076
  ));
29961
- return finalWagmiConfig && finalQueryClient ? /* @__PURE__ */ React259.createElement(WagmiProvider, { config: finalWagmiConfig }, /* @__PURE__ */ React259.createElement(QueryClientProvider, { client: finalQueryClient }, MainChild)) : MainChild;
30077
+ return finalWagmiConfig && finalQueryClient ? /* @__PURE__ */ React260.createElement(WagmiProvider, { config: finalWagmiConfig }, /* @__PURE__ */ React260.createElement(QueryClientProvider, { client: finalQueryClient }, MainChild)) : MainChild;
29962
30078
  }
29963
30079
  function FunkitProviderInner({
29964
30080
  avatar,
@@ -29978,7 +30094,7 @@ function FunkitProviderInner({
29978
30094
  const avatarContext = avatar ?? defaultAvatar;
29979
30095
  const isSandboxMode = !!sandbox;
29980
30096
  const modalSizeFinal = modalSize || ModalSizeOptions.COMPACT;
29981
- return /* @__PURE__ */ React259.createElement(FunkitConfigContext.Provider, { value: funkitConfig }, /* @__PURE__ */ React259.createElement(FunkitConnectChainProvider, { initialChain }, /* @__PURE__ */ React259.createElement(ModalSizeProvider, { modalSize: modalSizeFinal }, /* @__PURE__ */ React259.createElement(FunkitWeb2Provider, null, /* @__PURE__ */ React259.createElement(GeneralWalletProvider, null, /* @__PURE__ */ React259.createElement(FunkitFlagsProvider, null, /* @__PURE__ */ React259.createElement(FunkitCheckoutHistoryProvider, null, /* @__PURE__ */ React259.createElement(FunkitCheckoutProvider, null, /* @__PURE__ */ React259.createElement(FunkitQuoteProvider, null, /* @__PURE__ */ React259.createElement(FunkitSandboxContext.Provider, { value: isSandboxMode }, /* @__PURE__ */ React259.createElement(FunkitMeshProvider, null, /* @__PURE__ */ React259.createElement(AvatarContext.Provider, { value: avatarContext }, /* @__PURE__ */ React259.createElement(ThemeIdContext2.Provider, { value: id }, /* @__PURE__ */ React259.createElement(ShowBalanceProvider, null, /* @__PURE__ */ React259.createElement(FunkitMoonpayProvider, { debug: !!debug }, /* @__PURE__ */ React259.createElement(UserPresenceProvider, null, /* @__PURE__ */ React259.createElement(ModalProvider, null, activeTheme ? /* @__PURE__ */ React259.createElement(
30097
+ return /* @__PURE__ */ React260.createElement(FunkitConfigContext.Provider, { value: funkitConfig }, /* @__PURE__ */ React260.createElement(FunkitConnectChainProvider, { initialChain }, /* @__PURE__ */ React260.createElement(ModalSizeProvider, { modalSize: modalSizeFinal }, /* @__PURE__ */ React260.createElement(FunkitWeb2Provider, null, /* @__PURE__ */ React260.createElement(GeneralWalletProvider, null, /* @__PURE__ */ React260.createElement(FunkitFlagsProvider, null, /* @__PURE__ */ React260.createElement(FunkitCheckoutHistoryProvider, null, /* @__PURE__ */ React260.createElement(FunkitCheckoutProvider, null, /* @__PURE__ */ React260.createElement(FunkitQuoteProvider, null, /* @__PURE__ */ React260.createElement(FunkitSandboxContext.Provider, { value: isSandboxMode }, /* @__PURE__ */ React260.createElement(FunkitMeshProvider, null, /* @__PURE__ */ React260.createElement(AvatarContext.Provider, { value: avatarContext }, /* @__PURE__ */ React260.createElement(ThemeIdContext2.Provider, { value: id }, /* @__PURE__ */ React260.createElement(ShowBalanceProvider, null, /* @__PURE__ */ React260.createElement(FunkitMoonpayProvider, { debug: !!debug }, /* @__PURE__ */ React260.createElement(UserPresenceProvider, null, /* @__PURE__ */ React260.createElement(ModalProvider, null, activeTheme ? /* @__PURE__ */ React260.createElement(
29982
30098
  "div",
29983
30099
  {
29984
30100
  ...createThemeRootProps2(id),
@@ -29987,7 +30103,7 @@ function FunkitProviderInner({
29987
30103
  height: "100%"
29988
30104
  }
29989
30105
  },
29990
- /* @__PURE__ */ React259.createElement(
30106
+ /* @__PURE__ */ React260.createElement(
29991
30107
  "style",
29992
30108
  {
29993
30109
  dangerouslySetInnerHTML: {