@0xsequence/marketplace-sdk 2.0.0 → 2.0.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 (136) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/BellIcon.js +1 -1
  3. package/dist/Card.js +1 -1
  4. package/dist/ShopCard.d.ts +4 -4
  5. package/dist/builder-api.js +1 -1
  6. package/dist/collectible.js +2 -2
  7. package/dist/collectible.js.map +1 -1
  8. package/dist/collection.js +1 -1
  9. package/dist/create-config.d.ts +589 -193
  10. package/dist/create-config.js +1 -1
  11. package/dist/currency.js +3 -3
  12. package/dist/currency.js.map +1 -1
  13. package/dist/dist.js +167 -148
  14. package/dist/dist.js.map +1 -1
  15. package/dist/expirationDateSelect.js +1 -1
  16. package/dist/filter-state.d.ts +1 -1
  17. package/dist/filters.d.ts +1 -1
  18. package/dist/index.d.ts +3 -3
  19. package/dist/index.js +3 -3
  20. package/dist/index10.d.ts +1 -1
  21. package/dist/index11.d.ts +17 -17
  22. package/dist/index12.d.ts +21 -21
  23. package/dist/index14.d.ts +3 -3
  24. package/dist/index15.d.ts +3 -3
  25. package/dist/index16.d.ts +2 -2
  26. package/dist/index17.d.ts +75 -75
  27. package/dist/index18.d.ts +40 -40
  28. package/dist/index19.d.ts +5 -5
  29. package/dist/index2.d.ts +4 -1
  30. package/dist/index21.d.ts +15 -15
  31. package/dist/index22.d.ts +8 -65
  32. package/dist/index23.d.ts +21 -13
  33. package/dist/index26.d.ts +4 -4
  34. package/dist/index27.d.ts +4 -4
  35. package/dist/index28.d.ts +10 -10
  36. package/dist/index3.d.ts +2 -2194
  37. package/dist/index31.d.ts +5 -5
  38. package/dist/index33.d.ts +3 -3
  39. package/dist/index34.d.ts +1 -1
  40. package/dist/index35.d.ts +1 -1
  41. package/dist/index36.d.ts +5 -5
  42. package/dist/index37.d.ts +8 -6
  43. package/dist/index38.d.ts +5 -5
  44. package/dist/index39.d.ts +1 -1
  45. package/dist/index4.d.ts +1356 -1356
  46. package/dist/index40.d.ts +2 -2
  47. package/dist/index8.d.ts +11 -3
  48. package/dist/index9.d.ts +2811 -3
  49. package/dist/inventory.d.ts +4 -4
  50. package/dist/inventory.js +3 -3
  51. package/dist/inventory.js.map +1 -1
  52. package/dist/marketplace2.js +3 -3
  53. package/dist/marketplace2.js.map +1 -1
  54. package/dist/metadata.d.ts +41 -41
  55. package/dist/primary-sale-checkout-options.d.ts +4 -4
  56. package/dist/quantityInput.js +1 -1
  57. package/dist/ranges.d.ts +12 -12
  58. package/dist/react/_internal/index.d.ts +1 -1
  59. package/dist/react/_internal/index.js +1 -1
  60. package/dist/react/index.d.ts +1 -1
  61. package/dist/react/queries/collectible/index.d.ts +1 -1
  62. package/dist/react/queries/index.d.ts +1 -1
  63. package/dist/react/ssr/index.d.ts +3 -3
  64. package/dist/react/ssr/index.js +3 -3
  65. package/dist/react/ui/components/marketplace-collectible-card/index.d.ts +1 -1
  66. package/dist/react/ui/modals/CreateListingModal/internal/hooks/index.d.ts +1 -1
  67. package/dist/react/ui/modals/MakeOfferModal/internal/hooks/index.d.ts +1 -1
  68. package/dist/react/ui/modals/_internal/components/alertMessage/index.d.ts +2 -2
  69. package/dist/react/ui/modals/_internal/components/baseModal/index.d.ts +6 -6
  70. package/dist/react/ui/modals/_internal/components/calendar/index.d.ts +2 -2
  71. package/dist/react/ui/modals/_internal/components/currencyImage/index.d.ts +2 -2
  72. package/dist/react/ui/modals/_internal/components/currencyOptionsSelect/index.d.ts +3 -3
  73. package/dist/react/ui/modals/_internal/components/floorPriceText/index.d.ts +2 -2
  74. package/dist/react/ui/modals/_internal/components/priceInput/index.d.ts +3 -5
  75. package/dist/react/ui/modals/_internal/components/quantityInput/index.d.ts +2 -2
  76. package/dist/react/ui/modals/_internal/components/selectWaasFeeOptions/index.d.ts +2 -2
  77. package/dist/react/ui/modals/_internal/components/switchChainErrorModal/index.d.ts +2 -2
  78. package/dist/react/ui/modals/_internal/components/timeAgo/index.d.ts +2 -2
  79. package/dist/react/ui/modals/_internal/components/tokenPreview/index.d.ts +3 -3
  80. package/dist/react/ui/modals/_internal/components/transaction-footer/index.d.ts +3 -3
  81. package/dist/react/ui/modals/_internal/components/transactionDetails/index.d.ts +3 -3
  82. package/dist/react/ui/modals/_internal/components/transactionPreview/index.d.ts +3 -3
  83. package/dist/react/ui/modals/_internal/components/transactionStatusModal/index.d.ts +3 -3
  84. package/dist/react.js +2279 -1919
  85. package/dist/react.js.map +1 -1
  86. package/dist/styles/index.css +15 -0
  87. package/dist/token-balances.d.ts +28 -28
  88. package/dist/transaction-footer.js +1 -1
  89. package/dist/types/index.d.ts +1 -1
  90. package/dist/types/index.js +1 -1
  91. package/dist/types.d.ts +1 -1
  92. package/dist/url-state.js +1 -1
  93. package/dist/utils/index.d.ts +2 -2
  94. package/dist/utils/index.js +2 -2
  95. package/dist/utils.js +31 -4
  96. package/dist/utils.js.map +1 -1
  97. package/package.json +7 -5
  98. package/src/react/hooks/config/useMarketplaceConfig.test.tsx +1 -0
  99. package/src/react/hooks/currency/list.test.tsx +23 -2
  100. package/src/react/hooks/transactions/useCancelTransactionSteps.tsx +4 -1
  101. package/src/react/hooks/transactions/useMarketTransactionSteps.tsx +55 -15
  102. package/src/react/hooks/utils/useEnsureCorrectChain.ts +10 -5
  103. package/src/react/queries/collectible/market-list.ts +5 -3
  104. package/src/react/queries/currency/list.ts +8 -5
  105. package/src/react/queries/inventory/inventory.ts +5 -3
  106. package/src/react/queries/marketplace/filters.ts +5 -3
  107. package/src/react/ui/modals/BuyModal/components/BuyModalContent.tsx +74 -37
  108. package/src/react/ui/modals/BuyModal/components/CryptoPaymentModal.tsx +74 -11
  109. package/src/react/ui/modals/BuyModal/components/Modal.tsx +62 -1
  110. package/src/react/ui/modals/BuyModal/hooks/useExecuteBundledTransactions.ts +13 -26
  111. package/src/react/ui/modals/BuyModal/hooks/useMarketPlatformFee.ts +5 -5
  112. package/src/react/ui/modals/BuyModal/internal/__tests__/buildTrailsMarketBuyActions.test.ts +213 -0
  113. package/src/react/ui/modals/BuyModal/internal/buildTrailsMarketBuyActions.ts +259 -0
  114. package/src/react/ui/modals/BuyModal/internal/buyModalContext.ts +79 -10
  115. package/src/react/ui/modals/BuyModal/internal/cryptoPaymentModalContext.tsx +44 -17
  116. package/src/react/ui/modals/CreateListingModal/internal/store.ts +5 -2
  117. package/src/react/ui/modals/MakeOfferModal/internal/context.ts +21 -1
  118. package/src/react/ui/modals/MakeOfferModal/internal/helpers/validation.ts +16 -1
  119. package/src/react/ui/modals/MakeOfferModal/internal/store.ts +5 -2
  120. package/src/react/ui/modals/SellModal/internal/store.ts +5 -2
  121. package/src/react/ui/modals/_internal/components/baseModal/errors/ModalInitializationError.tsx +8 -6
  122. package/src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx +2 -1
  123. package/src/react/ui/modals/_internal/components/priceInput/index.tsx +13 -19
  124. package/src/react/ui/modals/_internal/components/transactionDetails/index.tsx +5 -2
  125. package/src/react/ui/modals/_internal/helpers/currency.test.ts +27 -0
  126. package/src/react/ui/modals/_internal/helpers/currency.ts +4 -2
  127. package/src/styles/styles.ts +18 -0
  128. package/src/utils/__tests__/getMarketplaceDetails.test.ts +10 -0
  129. package/src/utils/__tests__/getWebRPCErrorMessage.test.ts +28 -0
  130. package/src/utils/__tests__/marketplaceNormalization.test.ts +38 -0
  131. package/src/utils/collection.ts +19 -0
  132. package/src/utils/getConduitAddressForOrderbook.ts +2 -10
  133. package/src/utils/getMarketplaceDetails.ts +11 -4
  134. package/src/utils/getWebRPCErrorMessage.ts +21 -0
  135. package/src/utils/index.ts +1 -0
  136. package/src/utils/normalizeMarketplace.ts +31 -0
package/dist/react.js CHANGED
@@ -1,13 +1,13 @@
1
1
  'use client'
2
2
 
3
3
  import { n as SEQUENCE_MARKET_V1_ADDRESS, r as SEQUENCE_MARKET_V2_ADDRESS, t as DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from "./consts.js";
4
- import { S as WalletKind, c as CollectionStatus, d as MarketplaceKind, f as MetadataStatus, g as OrderbookKind, m as OrderSide, p as OfferType, s as isTransactionStep, t as ContractType$1, u as ExecuteType, y as StepType } from "./dist.js";
4
+ import { f as ExecuteType, g as OrderSide, h as OfferType, l as isTransactionStep, m as MetadataStatus, o as findApprovalStep, p as MarketplaceKind, s as findBuyStep, t as ContractType$1, u as CollectionStatus, v as OrderbookKind, w as WalletKind, x as StepType } from "./dist.js";
5
5
  import { a as TransactionSignatureError, i as TransactionExecutionError$1, o as UserRejectedRequestError$1, r as NoWalletConnectedError, s as BaseError$1, t as ChainSwitchError } from "./transaction.js";
6
6
  import { i as TransactionType$2, t as CollectibleCardAction } from "./types.js";
7
7
  import { n as SequenceMarketplaceV1_ABI, r as EIP2981_ABI } from "./marketplace.js";
8
8
  import { i as ERC721_SALE_ABI_V0, r as ERC721_SALE_ABI_V1 } from "./primary-sale.js";
9
9
  import { i as ERC20_ABI, n as ERC1155_ABI, r as ERC721_ABI } from "./token.js";
10
- import { a as formatPriceWithFee, c as cn$1, i as formatPrice, l as compareAddress, o as validateOpenseaOfferDecimals, r as calculateTotalOfferCost, t as calculateEarningsAfterFees } from "./utils.js";
10
+ import { a as formatPriceWithFee, c as isOpenSeaOrderbook, d as findMarketCollection, f as cn$1, i as formatPrice, l as normalizeMarketplaceKind, o as validateOpenseaOfferDecimals, p as compareAddress, r as calculateTotalOfferCost, t as calculateEarningsAfterFees, u as normalizeOrderbookKind } from "./utils.js";
11
11
  import { n as getPresentableChainName } from "./network.js";
12
12
  import { c as getSequenceNodeGatewayUrl, g as getQueryClient, l as getTrailsApiUrl, n as getIndexerClient, o as getSequenceApiUrl, r as getMarketplaceClient, s as getSequenceIndexerUrl } from "./api.js";
13
13
  import { a as PROVIDER_ID, r as buildQueryOptions, t as TransactionType$1 } from "./_internal.js";
@@ -34,22 +34,23 @@ import { n as expirationDateSelect_default } from "./expirationDateSelect.js";
34
34
  import { t as currencyImage_default } from "./currencyImage.js";
35
35
  import { t as useERC20Allowance } from "./hooks2.js";
36
36
  import { ContractVerificationStatus } from "@0xsequence/indexer";
37
- import { ChainNotConfiguredError, ConnectorAccountNotFoundError, ConnectorAlreadyConnectedError, ConnectorChainMismatchError, ConnectorNotFoundError, ConnectorUnavailableReconnectingError, ProviderNotFoundError, SwitchChainNotSupportedError, WagmiProviderNotFoundError, useAccount, useBalance, useChainId, useConnections, usePublicClient, useReadContract, useReadContracts, useSendTransaction, useSignMessage, useSignTypedData, useSwitchChain, useWalletClient, useWriteContract } from "wagmi";
37
+ import { ChainNotConfiguredError, ConnectorAccountNotFoundError, ConnectorAlreadyConnectedError, ConnectorChainMismatchError, ConnectorNotFoundError, ConnectorUnavailableReconnectingError, ProviderNotFoundError, SwitchChainNotSupportedError, WagmiProviderNotFoundError, useAccount, useBalance, useChainId, useConfig, useConnections, usePublicClient, useReadContract, useReadContracts, useSendTransaction, useSignMessage, useSignTypedData, useSwitchChain, useWalletClient, useWriteContract } from "wagmi";
38
38
  import { sendTransactions, useChain, useOpenConnectModal, useWaasFeeOptions } from "@0xsequence/connect";
39
39
  import { Component, createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
40
40
  import { Button, CartIcon, CheckmarkIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Dialog, DialogContent, DialogOverlay, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuPortal, DropdownMenuTrigger, Field, FieldLabel, Image, InfoIcon, Modal, NetworkImage, NumericInput, Select, Separator, Skeleton, Spinner, Text, TextInput, ThemeProvider, TokenImage, Tooltip, WarningIcon, cn } from "@0xsequence/design-system";
41
41
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
42
42
  import { greaterThan, toNumber } from "dnum";
43
43
  import { BaseError, ChainMismatchError, ChainNotFoundError, ContractFunctionExecutionError, ContractFunctionRevertedError, ContractFunctionZeroDataError, FeeCapTooHighError, FeeCapTooLowError, HttpRequestError, InsufficientFundsError, IntrinsicGasTooHighError, IntrinsicGasTooLowError, InvalidAddressError, InvalidHexValueError, LimitExceededRpcError, NonceTooLowError, SwitchChainError, TimeoutError, TransactionExecutionError, TransactionReceiptNotFoundError, UserRejectedRequestError, WaitForTransactionReceiptTimeoutError, decodeFunctionData, encodeFunctionData, erc20Abi, erc721Abi, formatUnits, isAddress, isHex, maxUint256, parseEventLogs, parseUnits, zeroAddress } from "viem";
44
- import { QueryClientProvider, queryOptions, skipToken, useInfiniteQuery, useMutation, useQuery } from "@tanstack/react-query";
44
+ import { QueryClientProvider, queryOptions, skipToken, useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
45
45
  import { Databeat } from "@databeat/tracker";
46
46
  import { createStore } from "@xstate/store";
47
47
  import { useSelector } from "@xstate/store/react";
48
48
  import { avalanche, optimism } from "viem/chains";
49
49
  import { readContract } from "viem/actions";
50
50
  import { SequenceCheckoutProvider, useSelectPaymentModal } from "@0xsequence/checkout";
51
- import { TrailsWidget } from "0xtrails/widget";
52
- import { useSupportedChains } from "0xtrails";
51
+ import { wagmiAdapter } from "@0xtrails/adapter-wagmi";
52
+ import { TrailsProvider, TrailsWidget } from "0xtrails/widget";
53
+ import { buildErc20Approve, encodeDestinationCalls, self, useSupportedChains } from "0xtrails";
53
54
  import { createPortal } from "react-dom";
54
55
 
55
56
  //#region src/utils/_internal/error/context.ts
@@ -149,7 +150,7 @@ function AnalyticsProvider({ config, children }) {
149
150
  //#endregion
150
151
  //#region src/react/providers/theme-provider.tsx
151
152
  const ThemeProvider$1 = ({ children, theme, root }) => {
152
- const { shadowDom } = useConfig();
153
+ const { shadowDom } = useConfig$1();
153
154
  if (!shadowDom) return /* @__PURE__ */ jsx(ThemeProvider, {
154
155
  defaultTheme: theme,
155
156
  root,
@@ -212,7 +213,7 @@ function MarketplaceProviderWithSequenceConnect({ config, children, analytics })
212
213
 
213
214
  //#endregion
214
215
  //#region src/react/hooks/config/useConfig.tsx
215
- function useConfig() {
216
+ function useConfig$1() {
216
217
  const context = useContext(MarketplaceSdkContext);
217
218
  if (!context) throw new MarketplaceSdkProviderNotFoundError();
218
219
  return context;
@@ -264,7 +265,7 @@ function useConfig() {
264
265
  */
265
266
  function usePrimarySaleCheckoutOptions(params) {
266
267
  const { address } = useAccount();
267
- const defaultConfig = useConfig();
268
+ const defaultConfig = useConfig$1();
268
269
  return useQuery({ ...primarySaleCheckoutOptionsQueryOptions(params === skipToken || !address ? {
269
270
  config: defaultConfig,
270
271
  walletAddress: address ?? zeroAddress,
@@ -303,7 +304,7 @@ function usePrimarySaleCheckoutOptions(params) {
303
304
  * ```
304
305
  */
305
306
  function useCollectibleBalance(args) {
306
- const config = useConfig();
307
+ const config = useConfig$1();
307
308
  return useQuery(balanceOfCollectibleOptions({
308
309
  ...args,
309
310
  config
@@ -434,7 +435,7 @@ const useErc721SaleDetailsV1 = ({ chainId, salesContractAddress, itemsContractAd
434
435
  * ```
435
436
  */
436
437
  function useCollectibleMarketCount(params) {
437
- const defaultConfig = useConfig();
438
+ const defaultConfig = useConfig$1();
438
439
  const { config = defaultConfig, ...rest } = params;
439
440
  return useQuery({ ...countOfCollectablesQueryOptions({
440
441
  config,
@@ -483,7 +484,7 @@ function useCollectibleMarketCount(params) {
483
484
  * ```
484
485
  */
485
486
  function useCollectibleMarketHighestOffer(params) {
486
- const defaultConfig = useConfig();
487
+ const defaultConfig = useConfig$1();
487
488
  const { config = defaultConfig, ...rest } = params;
488
489
  return useQuery({ ...highestOfferQueryOptions({
489
490
  config,
@@ -535,7 +536,7 @@ function useCollectibleMarketHighestOffer(params) {
535
536
  * ```
536
537
  */
537
538
  function useCollectibleMarketList(params) {
538
- const defaultConfig = useConfig();
539
+ const defaultConfig = useConfig$1();
539
540
  const { config = defaultConfig, ...rest } = params;
540
541
  return useInfiniteQuery({ ...listCollectiblesQueryOptions({
541
542
  config,
@@ -606,7 +607,7 @@ function useCollectibleMarketList(params) {
606
607
  * ```
607
608
  */
608
609
  function useCollectibleMarketListPaginated(params) {
609
- const defaultConfig = useConfig();
610
+ const defaultConfig = useConfig$1();
610
611
  const { config = defaultConfig, ...rest } = params;
611
612
  return useQuery({ ...listCollectiblesPaginatedQueryOptions({
612
613
  config,
@@ -671,7 +672,7 @@ function useCollectibleMarketListPaginated(params) {
671
672
  * ```
672
673
  */
673
674
  function useCollectibleMarketListings(params) {
674
- const defaultConfig = useConfig();
675
+ const defaultConfig = useConfig$1();
675
676
  const { config = defaultConfig, ...rest } = params;
676
677
  return useQuery({ ...listListingsForCollectibleQueryOptions({
677
678
  config,
@@ -718,7 +719,7 @@ function useCollectibleMarketListings(params) {
718
719
  * ```
719
720
  */
720
721
  function useCollectibleMarketListingsCount(params) {
721
- const defaultConfig = useConfig();
722
+ const defaultConfig = useConfig$1();
722
723
  const { config = defaultConfig, ...rest } = params;
723
724
  return useQuery({ ...countListingsForCollectibleQueryOptions({
724
725
  config,
@@ -767,7 +768,7 @@ function useCollectibleMarketListingsCount(params) {
767
768
  * ```
768
769
  */
769
770
  function useCollectibleMarketLowestListing(params) {
770
- const defaultConfig = useConfig();
771
+ const defaultConfig = useConfig$1();
771
772
  const { config = defaultConfig, ...rest } = params;
772
773
  return useQuery({ ...lowestListingQueryOptions({
773
774
  config,
@@ -816,7 +817,7 @@ function useCollectibleMarketLowestListing(params) {
816
817
  * ```
817
818
  */
818
819
  function useCollectibleMarketOffers(params) {
819
- const defaultConfig = useConfig();
820
+ const defaultConfig = useConfig$1();
820
821
  const { config = defaultConfig, ...rest } = params;
821
822
  return useQuery({ ...listOffersForCollectibleQueryOptions({
822
823
  config,
@@ -863,7 +864,7 @@ function useCollectibleMarketOffers(params) {
863
864
  * ```
864
865
  */
865
866
  function useCollectibleMarketOffersCount(params) {
866
- const defaultConfig = useConfig();
867
+ const defaultConfig = useConfig$1();
867
868
  const { config = defaultConfig, ...rest } = params;
868
869
  return useQuery({ ...countOffersForCollectibleQueryOptions({
869
870
  config,
@@ -912,7 +913,7 @@ function useCollectibleMarketOffersCount(params) {
912
913
  * ```
913
914
  */
914
915
  function useCollectibleMetadata(params) {
915
- const defaultConfig = useConfig();
916
+ const defaultConfig = useConfig$1();
916
917
  const { config = defaultConfig, ...rest } = params;
917
918
  return useQuery({ ...collectibleQueryOptions({
918
919
  config,
@@ -959,7 +960,7 @@ function useCollectibleMetadata(params) {
959
960
  * ```
960
961
  */
961
962
  function usePrimarySaleItem(params) {
962
- const defaultConfig = useConfig();
963
+ const defaultConfig = useConfig$1();
963
964
  const { config = defaultConfig, ...rest } = params;
964
965
  return useQuery({ ...primarySaleItemQueryOptions({
965
966
  config,
@@ -1008,7 +1009,7 @@ function usePrimarySaleItem(params) {
1008
1009
  * ```
1009
1010
  */
1010
1011
  function usePrimarySaleItems(params) {
1011
- const defaultConfig = useConfig();
1012
+ const defaultConfig = useConfig$1();
1012
1013
  const { config = defaultConfig, ...rest } = params;
1013
1014
  return useInfiniteQuery(primarySaleItemsQueryOptions({
1014
1015
  config,
@@ -1019,7 +1020,7 @@ function usePrimarySaleItems(params) {
1019
1020
  //#endregion
1020
1021
  //#region src/react/hooks/collectible/primary-sale-items-count.tsx
1021
1022
  function usePrimarySaleItemsCount(args) {
1022
- const defaultConfig = useConfig();
1023
+ const defaultConfig = useConfig$1();
1023
1024
  const { config = defaultConfig, ...rest } = args;
1024
1025
  return useQuery(primarySaleItemsCountQueryOptions({
1025
1026
  config,
@@ -1049,7 +1050,7 @@ function usePrimarySaleItemsCount(args) {
1049
1050
  * ```
1050
1051
  */
1051
1052
  function useCollectibleTokenBalances(args) {
1052
- const config = useConfig();
1053
+ const config = useConfig$1();
1053
1054
  return useQuery(tokenBalancesOptions({
1054
1055
  ...args,
1055
1056
  config
@@ -1110,7 +1111,7 @@ function useCollectibleTokenBalances(args) {
1110
1111
  * ```
1111
1112
  */
1112
1113
  function useCollectionBalanceDetails(params) {
1113
- const defaultConfig = useConfig();
1114
+ const defaultConfig = useConfig$1();
1114
1115
  const { config = defaultConfig, ...rest } = params;
1115
1116
  return useQuery({ ...collectionBalanceDetailsQueryOptions({
1116
1117
  config,
@@ -1121,7 +1122,7 @@ function useCollectionBalanceDetails(params) {
1121
1122
  //#endregion
1122
1123
  //#region src/react/hooks/config/useMarketplaceConfig.tsx
1123
1124
  const useMarketplaceConfig = () => {
1124
- return useQuery(marketplaceConfigOptions(useConfig()));
1125
+ return useQuery(marketplaceConfigOptions(useConfig$1()));
1125
1126
  };
1126
1127
 
1127
1128
  //#endregion
@@ -1166,7 +1167,7 @@ const useMarketplaceConfig = () => {
1166
1167
  * ```
1167
1168
  */
1168
1169
  function useCollectionList(params = {}) {
1169
- const defaultConfig = useConfig();
1170
+ const defaultConfig = useConfig$1();
1170
1171
  const { data: marketplaceConfig } = useMarketplaceConfig();
1171
1172
  const { config = defaultConfig, marketplaceConfig: paramMarketplaceConfig, ...rest } = params;
1172
1173
  return useQuery({ ...listCollectionsQueryOptions({
@@ -1208,13 +1209,13 @@ const collectionMarketDetailPollingOptions = (args, config) => {
1208
1209
  });
1209
1210
  };
1210
1211
  const useCollectionMarketDetailPolling = (args) => {
1211
- return useQuery(collectionMarketDetailPollingOptions(args, useConfig()));
1212
+ return useQuery(collectionMarketDetailPollingOptions(args, useConfig$1()));
1212
1213
  };
1213
1214
 
1214
1215
  //#endregion
1215
1216
  //#region src/react/hooks/collection/market-filtered-count.tsx
1216
1217
  function useCollectionMarketFilteredCount(params) {
1217
- const defaultConfig = useConfig();
1218
+ const defaultConfig = useConfig$1();
1218
1219
  const { config = defaultConfig, ...rest } = params;
1219
1220
  return useQuery({ ...getCountOfFilteredOrdersQueryOptions({
1220
1221
  config,
@@ -1264,7 +1265,7 @@ function useCollectionMarketFilteredCount(params) {
1264
1265
  * ```
1265
1266
  */
1266
1267
  function useCollectionMarketFloor(params) {
1267
- const defaultConfig = useConfig();
1268
+ const defaultConfig = useConfig$1();
1268
1269
  const { config = defaultConfig, ...rest } = params;
1269
1270
  return useQuery({ ...floorOrderQueryOptions({
1270
1271
  config,
@@ -1322,7 +1323,7 @@ function useCollectionMarketFloor(params) {
1322
1323
  * ```
1323
1324
  */
1324
1325
  function useCollectionMarketItems(params) {
1325
- const defaultConfig = useConfig();
1326
+ const defaultConfig = useConfig$1();
1326
1327
  const { config = defaultConfig, ...rest } = params;
1327
1328
  return useInfiniteQuery({ ...listItemsOrdersForCollectionQueryOptions({
1328
1329
  config,
@@ -1384,7 +1385,7 @@ function useCollectionMarketItems(params) {
1384
1385
  * ```
1385
1386
  */
1386
1387
  function useCollectionMarketItemsCount(params) {
1387
- const defaultConfig = useConfig();
1388
+ const defaultConfig = useConfig$1();
1388
1389
  const { config = defaultConfig, ...rest } = params;
1389
1390
  return useQuery({ ...countItemsOrdersForCollectionQueryOptions({
1390
1391
  config,
@@ -1456,7 +1457,7 @@ function useCollectionMarketItemsCount(params) {
1456
1457
  * ```
1457
1458
  */
1458
1459
  function useCollectionMarketItemsPaginated(params) {
1459
- const defaultConfig = useConfig();
1460
+ const defaultConfig = useConfig$1();
1460
1461
  const { config = defaultConfig, ...rest } = params;
1461
1462
  return useQuery({ ...listItemsOrdersForCollectionPaginatedQueryOptions({
1462
1463
  config,
@@ -1502,7 +1503,7 @@ function useCollectionMarketItemsPaginated(params) {
1502
1503
  * ```
1503
1504
  */
1504
1505
  function useCollectionMetadata(params) {
1505
- const defaultConfig = useConfig();
1506
+ const defaultConfig = useConfig$1();
1506
1507
  const { config = defaultConfig, ...rest } = params;
1507
1508
  return useQuery({ ...collectionQueryOptions({
1508
1509
  config,
@@ -1579,7 +1580,7 @@ function collectionActiveListingsCurrenciesQueryOptions(params) {
1579
1580
  * ```
1580
1581
  */
1581
1582
  function useCollectionActiveListingsCurrencies(params) {
1582
- const defaultConfig = useConfig();
1583
+ const defaultConfig = useConfig$1();
1583
1584
  const { config = defaultConfig, ...rest } = params;
1584
1585
  return useQuery({ ...collectionActiveListingsCurrenciesQueryOptions({
1585
1586
  config,
@@ -1656,7 +1657,7 @@ function collectionActiveOffersCurrenciesQueryOptions(params) {
1656
1657
  * ```
1657
1658
  */
1658
1659
  function useCollectionActiveOffersCurrencies(params) {
1659
- const defaultConfig = useConfig();
1660
+ const defaultConfig = useConfig$1();
1660
1661
  const { config = defaultConfig, ...rest } = params;
1661
1662
  return useQuery({ ...collectionActiveOffersCurrenciesQueryOptions({
1662
1663
  config,
@@ -1716,7 +1717,7 @@ function useCollectionActiveOffersCurrencies(params) {
1716
1717
  * ```
1717
1718
  */
1718
1719
  function useCurrencyComparePrices(params) {
1719
- const defaultConfig = useConfig();
1720
+ const defaultConfig = useConfig$1();
1720
1721
  const { config = defaultConfig, ...rest } = params;
1721
1722
  return useQuery({ ...comparePricesQueryOptions({
1722
1723
  config,
@@ -1771,7 +1772,7 @@ function useCurrencyComparePrices(params) {
1771
1772
  * ```
1772
1773
  */
1773
1774
  function useCurrencyConvertToUSD(params) {
1774
- const defaultConfig = useConfig();
1775
+ const defaultConfig = useConfig$1();
1775
1776
  const { config = defaultConfig, ...rest } = params;
1776
1777
  return useQuery({ ...convertPriceToUSDQueryOptions({
1777
1778
  config,
@@ -1816,7 +1817,7 @@ function useCurrencyConvertToUSD(params) {
1816
1817
  * ```
1817
1818
  */
1818
1819
  function useCurrency(params) {
1819
- const defaultConfig = useConfig();
1820
+ const defaultConfig = useConfig$1();
1820
1821
  const { config = defaultConfig, ...rest } = params;
1821
1822
  return useQuery({ ...currencyQueryOptions({
1822
1823
  config,
@@ -1858,7 +1859,7 @@ function useCurrency(params) {
1858
1859
  * ```
1859
1860
  */
1860
1861
  function useCurrencyList(params) {
1861
- const defaultConfig = useConfig();
1862
+ const defaultConfig = useConfig$1();
1862
1863
  const { config = defaultConfig, ...rest } = params;
1863
1864
  return useQuery({ ...marketCurrenciesQueryOptions({
1864
1865
  config,
@@ -1869,7 +1870,7 @@ function useCurrencyList(params) {
1869
1870
  //#endregion
1870
1871
  //#region src/react/hooks/inventory/inventory.tsx
1871
1872
  function useInventory(args) {
1872
- const config = useConfig();
1873
+ const config = useConfig$1();
1873
1874
  return useQuery(inventoryOptions({
1874
1875
  ...args,
1875
1876
  config
@@ -1919,7 +1920,7 @@ function useInventory(args) {
1919
1920
  * ```
1920
1921
  */
1921
1922
  function useTokenBalances(params) {
1922
- const defaultConfig = useConfig();
1923
+ const defaultConfig = useConfig$1();
1923
1924
  const { config = defaultConfig, ...rest } = params;
1924
1925
  return useInfiniteQuery(listBalancesOptions({
1925
1926
  config,
@@ -2069,7 +2070,7 @@ function useTokenCurrencyBalance(args) {
2069
2070
  * ```
2070
2071
  */
2071
2072
  function useTokenMetadata(params) {
2072
- const defaultConfig = useConfig();
2073
+ const defaultConfig = useConfig$1();
2073
2074
  const { config = defaultConfig, ...rest } = params;
2074
2075
  return useQuery({ ...listTokenMetadataQueryOptions({
2075
2076
  config,
@@ -2148,7 +2149,7 @@ function useTokenMetadata(params) {
2148
2149
  * ```
2149
2150
  */
2150
2151
  function useTokenMetadataSearch(params) {
2151
- const defaultConfig = useConfig();
2152
+ const defaultConfig = useConfig$1();
2152
2153
  const { config = defaultConfig, onlyMinted, ...rest } = params;
2153
2154
  const { data: suppliesData, hasNextPage: hasNextSuppliesPage, isFetching: isSuppliesFetching, isLoading: isSuppliesLoading, error: suppliesError, fetchNextPage: fetchNextSuppliesPage } = useInfiniteQuery(tokenSuppliesQueryOptions({
2154
2155
  chainId: params.chainId,
@@ -2246,7 +2247,7 @@ function useTokenMetadataSearch(params) {
2246
2247
  * ```
2247
2248
  */
2248
2249
  function useTokenRanges(params) {
2249
- const defaultConfig = useConfig();
2250
+ const defaultConfig = useConfig$1();
2250
2251
  const { config = defaultConfig, ...rest } = params;
2251
2252
  return useQuery({ ...getTokenRangesQueryOptions({
2252
2253
  config,
@@ -2686,17 +2687,11 @@ function createFeeGuard(params) {
2686
2687
  * https://etherscan.io/address/0x1e0049783f008a0085193e00003d00cd54003c71
2687
2688
  */
2688
2689
  const OPENSEA_SEAPORT_CONDUIT_ADDRESS = "0x1E0049783F008A0085193E00003D00cd54003c71";
2689
- /**
2690
- * Magic Eden Conduit address
2691
- * https://etherscan.io/address/0x2052f8A2Ff46283B30084e5d84c89A2fdBE7f74b
2692
- */
2693
- const MAGICEDEN_CONDUIT_ADDRESS = "0x2052f8A2Ff46283B30084e5d84c89A2fdBE7f74b";
2694
2690
  function getConduitAddressForOrderbook(orderbookKind) {
2695
- switch (orderbookKind) {
2691
+ switch (normalizeOrderbookKind(orderbookKind)) {
2696
2692
  case OrderbookKind.sequence_marketplace_v1: return SEQUENCE_MARKET_V1_ADDRESS;
2697
2693
  case OrderbookKind.sequence_marketplace_v2: return SEQUENCE_MARKET_V2_ADDRESS;
2698
2694
  case OrderbookKind.opensea: return OPENSEA_SEAPORT_CONDUIT_ADDRESS;
2699
- case OrderbookKind.magic_eden: return MAGICEDEN_CONDUIT_ADDRESS;
2700
2695
  default: return SEQUENCE_MARKET_V2_ADDRESS;
2701
2696
  }
2702
2697
  }
@@ -2899,7 +2894,7 @@ const useConnectorMetadata = () => {
2899
2894
  //#endregion
2900
2895
  //#region src/react/ui/modals/_internal/components/transactionStatusModal/hooks/useTransactionStatus.ts
2901
2896
  const useTransactionStatus = (hash, chainId) => {
2902
- const sdkConfig = useConfig();
2897
+ const sdkConfig = useConfig$1();
2903
2898
  const [status, setStatus] = useState(hash ? "PENDING" : "SUCCESS");
2904
2899
  const { data: confirmationResult, error } = useQuery({
2905
2900
  queryKey: [
@@ -3122,7 +3117,7 @@ const useSellModal = () => {
3122
3117
  const useSellModalState = () => {
3123
3118
  const { isOpen, tokenId, collectionAddress, chainId, order } = useSelector(sellModalStore, (state) => state.context);
3124
3119
  const { data: marketplaceConfig } = useMarketplaceConfig();
3125
- const orderbookKind = marketplaceConfig?.market.collections.find((collection) => collection.itemsAddress === collectionAddress)?.destinationMarketplace;
3120
+ const orderbookKind = findMarketCollection(marketplaceConfig?.market.collections ?? [], collectionAddress, chainId)?.destinationMarketplace;
3126
3121
  const closeModal = () => sellModalStore.send({ type: "close" });
3127
3122
  return {
3128
3123
  isOpen,
@@ -3139,7 +3134,7 @@ const useSellModalState = () => {
3139
3134
  //#endregion
3140
3135
  //#region src/react/ui/modals/SellModal/internal/sell-mutations.ts
3141
3136
  const useSellMutations = ({ tx, collectionAddress, chainId, contractType, orderbookKind, nftApprovalEnabled }) => {
3142
- const sdkConfig = useConfig();
3137
+ const sdkConfig = useConfig$1();
3143
3138
  const { show: showTxModal } = useTransactionStatusModal();
3144
3139
  const analytics = useAnalytics();
3145
3140
  const state = useSellModalState();
@@ -3242,7 +3237,7 @@ const useMarketPlatformFee = (params) => {
3242
3237
  receiver: defaultPlatformFeeRecipient
3243
3238
  };
3244
3239
  const { chainId, collectionAddress } = params;
3245
- const marketCollection = marketplaceConfig?.market?.collections?.find((col) => compareAddress(col.itemsAddress, collectionAddress) && String(col.chainId) === String(chainId));
3240
+ const marketCollection = findMarketCollection(marketplaceConfig?.market?.collections ?? [], collectionAddress, chainId);
3246
3241
  const receiver = chainId === avalanche.id || chainId === optimism.id ? avalancheAndOptimismPlatformFeeRecipient : defaultPlatformFeeRecipient;
3247
3242
  const percentageToBPS = (percentage) => Number(percentage) * 1e4 / 100;
3248
3243
  const feePercentage = marketCollection?.feePercentage ?? defaultFee;
@@ -3268,7 +3263,7 @@ const generateSellTransaction$1 = async (args, config) => {
3268
3263
  };
3269
3264
  };
3270
3265
  const useGenerateSellTransaction$1 = (params) => {
3271
- const client = useConfig();
3266
+ const client = useConfig$1();
3272
3267
  const { chainId, collectionAddress, seller, marketplace, ordersData } = params;
3273
3268
  const enabled = !!chainId && !!collectionAddress && !!seller && !!marketplace && !!ordersData;
3274
3269
  const additionalFees = params.additionalFees ? params.additionalFees : [];
@@ -3297,7 +3292,7 @@ const useGenerateSellTransaction$1 = (params) => {
3297
3292
  function useSellModalContext() {
3298
3293
  const state = useSellModalState();
3299
3294
  const { address } = useAccount();
3300
- const config = useConfig();
3295
+ const config = useConfig$1();
3301
3296
  const collectibleQuery = useCollectibleMetadata({
3302
3297
  chainId: state.chainId,
3303
3298
  collectionAddress: state.collectionAddress,
@@ -3499,7 +3494,7 @@ const BaseModal = ({ onClose, title, children, disableAnimation, transactionType
3499
3494
  const ModalInitializationError = ({ onTryAgain, onClose, error }) => {
3500
3495
  const [showTechnicalDetails, setShowTechnicalDetails] = useState(false);
3501
3496
  return /* @__PURE__ */ jsxs("div", {
3502
- className: "flex min-h-[400px] flex-col items-center justify-center p-4 text-white",
3497
+ className: "flex min-h-[400px] flex-col items-center justify-center p-6 text-white",
3503
3498
  children: [
3504
3499
  /* @__PURE__ */ jsx("div", {
3505
3500
  className: "mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-red-500",
@@ -3513,7 +3508,7 @@ const ModalInitializationError = ({ onTryAgain, onClose, error }) => {
3513
3508
  className: "mb-8 max-w-md text-center text-gray-300 text-sm leading-relaxed",
3514
3509
  children: "Something went wrong while loading this item. Please try again later or refresh the page."
3515
3510
  }),
3516
- error.stack && /* @__PURE__ */ jsxs("button", {
3511
+ error.cause && /* @__PURE__ */ jsxs("button", {
3517
3512
  type: "button",
3518
3513
  onClick: () => setShowTechnicalDetails(!showTechnicalDetails),
3519
3514
  className: "mb-4 flex items-center text-gray-400 text-sm transition-colors hover:text-gray-300",
@@ -3529,17 +3524,17 @@ const ModalInitializationError = ({ onTryAgain, onClose, error }) => {
3529
3524
  strokeWidth: 2,
3530
3525
  d: "M19 9l-7 7-7-7"
3531
3526
  })]
3532
- }), "Show technical details"]
3527
+ }), showTechnicalDetails ? "Hide technical details" : "Show technical details"]
3533
3528
  }),
3534
- showTechnicalDetails && error.stack && /* @__PURE__ */ jsx("div", {
3529
+ showTechnicalDetails && error.cause && /* @__PURE__ */ jsx("div", {
3535
3530
  className: "mb-8 max-h-64 w-full max-w-md overflow-y-auto rounded-lg border border-red-900 bg-[#2b0000] p-4",
3536
3531
  children: /* @__PURE__ */ jsx("pre", {
3537
3532
  className: "whitespace-pre-wrap break-words text-red-100 text-xs",
3538
- children: error.stack
3533
+ children: error.cause
3539
3534
  })
3540
3535
  }),
3541
3536
  /* @__PURE__ */ jsxs("div", {
3542
- className: "flex w-full max-w-xs flex-col space-y-3",
3537
+ className: "flex w-full flex-col space-y-3",
3543
3538
  children: [onTryAgain && /* @__PURE__ */ jsx(Button, {
3544
3539
  onClick: onTryAgain,
3545
3540
  variant: "primary",
@@ -3694,6 +3689,9 @@ const getWagmiErrorMessage = (error) => {
3694
3689
  //#endregion
3695
3690
  //#region src/utils/getWebRPCErrorMessage.ts
3696
3691
  const getWebRPCErrorMessage = (error) => {
3692
+ const causeMessage = typeof error.cause === "string" ? error.cause : error.cause instanceof Error ? error.cause.message : "";
3693
+ const rawDetails = [error.message, causeMessage].join(" ").toLowerCase();
3694
+ if (rawDetails.includes("outoffund") || rawDetails.includes("out of fund") || rawDetails.includes("insufficient funds") || rawDetails.includes("insufficient balance") || rawDetails.includes("not enough balance")) return "Insufficient balance to complete this transaction.";
3697
3695
  switch (error.code) {
3698
3696
  case -1: return "Connection failed. Please check your internet and try again.";
3699
3697
  case -2: return "Invalid request. Please try again.";
@@ -4248,7 +4246,7 @@ function useCurrencyBalance(args) {
4248
4246
  //#endregion
4249
4247
  //#region src/react/ui/modals/_internal/components/selectWaasFeeOptions/useWaasFeeOptionManager.tsx
4250
4248
  const useWaasFeeOptionManager = (chainId) => {
4251
- const config = useConfig();
4249
+ const config = useConfig$1();
4252
4250
  const { address: userAddress } = useAccount();
4253
4251
  const { selectedFeeOption, setSelectedFeeOption } = useSelectWaasFeeOptionsStore();
4254
4252
  const { pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption } = useWaasFeeOptions$1(chainId, config);
@@ -4392,7 +4390,7 @@ function TokenPreview({ collectionName, collectionAddress, tokenId, chainId }) {
4392
4390
  //#region src/react/ui/modals/_internal/components/transactionDetails/index.tsx
4393
4391
  function TransactionDetails({ tokenId, collectionAddress, chainId, includeMarketplaceFee, price, showPlaceholderPrice, currencyImageUrl }) {
4394
4392
  const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
4395
- const marketplaceFeePercentage = includeMarketplaceFee ? data?.market.collections.find((collection) => collection.itemsAddress === collectionAddress)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE : 0;
4393
+ const marketplaceFeePercentage = includeMarketplaceFee ? findMarketCollection(data?.market.collections ?? [], collectionAddress, chainId)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE : 0;
4396
4394
  const { data: royalty, isLoading: royaltyLoading } = useRoyalty({
4397
4395
  chainId,
4398
4396
  collectionAddress,
@@ -4829,7 +4827,7 @@ function usePrimarySale721CardData({ primarySaleItemsWithMetadata, chainId, cont
4829
4827
  chainId,
4830
4828
  collectionAddress: contractAddress,
4831
4829
  includeMetadata: true,
4832
- config: useConfig()
4830
+ config: useConfig$1()
4833
4831
  }) });
4834
4832
  useEffect(() => {
4835
4833
  async function fetchAllPages() {
@@ -5024,7 +5022,7 @@ function usePrimarySale1155CardData({ primarySaleItemsWithMetadata, chainId, con
5024
5022
  * ```
5025
5023
  */
5026
5024
  function useFilters(params) {
5027
- const defaultConfig = useConfig();
5025
+ const defaultConfig = useConfig$1();
5028
5026
  const { config = defaultConfig, ...rest } = params;
5029
5027
  return useQuery({ ...filtersQueryOptions({
5030
5028
  config,
@@ -5075,7 +5073,7 @@ function useFilters(params) {
5075
5073
  * ```
5076
5074
  */
5077
5075
  function useFiltersProgressive(params) {
5078
- const defaultConfig = useConfig();
5076
+ const defaultConfig = useConfig$1();
5079
5077
  const { config = defaultConfig, ...rest } = params;
5080
5078
  const namesQuery = useQuery(filtersQueryOptions({
5081
5079
  config,
@@ -5101,7 +5099,7 @@ function useFiltersProgressive(params) {
5101
5099
  //#endregion
5102
5100
  //#region src/react/hooks/ui/useOpenConnectModal.tsx
5103
5101
  const useOpenConnectModal$1 = () => {
5104
- return { openConnectModal: useConfig().openConnectModal };
5102
+ return { openConnectModal: useConfig$1().openConnectModal };
5105
5103
  };
5106
5104
 
5107
5105
  //#endregion
@@ -5210,19 +5208,21 @@ const useQuantity = () => useSelector(buyModalStore, (state) => state.context.qu
5210
5208
  * This directly calls the marketplace API without using generators
5211
5209
  */
5212
5210
  function useMarketTransactionSteps({ chainId, collectionAddress, buyer, marketplace, orderId, tokenId, quantity, additionalFees = [], enabled = true }) {
5213
- const config = useConfig();
5211
+ const config = useConfig$1();
5212
+ const queryClient = useQueryClient();
5214
5213
  const marketplaceClient = useMemo(() => getMarketplaceClient(config), [config]);
5215
5214
  const useWithTrails = config.checkoutMode === "trails" || config.checkoutMode === void 0;
5216
- return useQuery({
5217
- queryKey: ["market-transaction-steps", {
5218
- chainId,
5219
- collectionAddress,
5220
- buyer,
5221
- orderId,
5222
- tokenId,
5223
- quantity,
5224
- useWithTrails
5225
- }],
5215
+ const queryKey = ["market-transaction-steps", {
5216
+ chainId,
5217
+ collectionAddress,
5218
+ buyer,
5219
+ orderId,
5220
+ tokenId,
5221
+ quantity,
5222
+ useWithTrails
5223
+ }];
5224
+ const query = useQuery({
5225
+ queryKey,
5226
5226
  queryFn: async () => {
5227
5227
  const response = await marketplaceClient.generateBuyTransaction({
5228
5228
  chainId,
@@ -5243,8 +5243,30 @@ function useMarketTransactionSteps({ chainId, collectionAddress, buyer, marketpl
5243
5243
  canBeUsedWithTrails: response.resp?.canBeUsedWithTrails ?? false
5244
5244
  };
5245
5245
  },
5246
- enabled: enabled && !!buyer
5246
+ enabled: enabled && !!buyer,
5247
+ retry: false
5247
5248
  });
5249
+ useEffect(() => {
5250
+ if (!query.data && enabled && buyer && query.fetchStatus === "fetching" && !query.isError) {
5251
+ const intervalId = setInterval(() => {
5252
+ queryClient.cancelQueries({ queryKey });
5253
+ query.refetch();
5254
+ }, 3e3);
5255
+ return () => {
5256
+ clearInterval(intervalId);
5257
+ };
5258
+ }
5259
+ }, [
5260
+ query.data,
5261
+ enabled,
5262
+ buyer,
5263
+ query.fetchStatus,
5264
+ query.isError,
5265
+ query,
5266
+ queryClient,
5267
+ queryKey
5268
+ ]);
5269
+ return query;
5248
5270
  }
5249
5271
 
5250
5272
  //#endregion
@@ -5664,9 +5686,10 @@ const useEnsureCorrectChain = () => {
5664
5686
  closeSwitchChainErrorModal
5665
5687
  ]);
5666
5688
  const ensureCorrectChainAsync = useCallback(async (targetChainId) => {
5667
- if (currentChainId === targetChainId) return Promise.resolve();
5668
- return switchChainAsync({ chainId: targetChainId }).catch(() => {
5689
+ if (currentChainId === targetChainId) return true;
5690
+ return switchChainAsync({ chainId: targetChainId }).then(() => true).catch(() => {
5669
5691
  showSwitchChainErrorModal({ chainIdToSwitchTo: targetChainId });
5692
+ return false;
5670
5693
  });
5671
5694
  }, [
5672
5695
  currentChainId,
@@ -5701,7 +5724,7 @@ const generateCancelTransaction = async (args, config) => {
5701
5724
  return getMarketplaceClient(config).generateCancelTransaction(args).then((data) => data.steps);
5702
5725
  };
5703
5726
  const useGenerateCancelTransaction = (params) => {
5704
- const config = useConfig();
5727
+ const config = useConfig$1();
5705
5728
  const { mutate, mutateAsync, ...result } = useMutation({
5706
5729
  onSuccess: (data) => {
5707
5730
  if (params.onSuccess) params.onSuccess(data);
@@ -5721,7 +5744,7 @@ const useProcessStep = () => {
5721
5744
  const { sendTransactionAsync } = useSendTransaction();
5722
5745
  const { signMessageAsync } = useSignMessage();
5723
5746
  const { signTypedDataAsync } = useSignTypedData();
5724
- const marketplaceClient = getMarketplaceClient(useConfig());
5747
+ const marketplaceClient = getMarketplaceClient(useConfig$1());
5725
5748
  const processStep = async (step, chainId) => {
5726
5749
  if (isTransactionStep(step)) return {
5727
5750
  type: "transaction",
@@ -5777,7 +5800,7 @@ const useProcessStep = () => {
5777
5800
  const useCancelTransactionSteps = ({ collectionAddress, chainId, setSteps, onSuccess, onError }) => {
5778
5801
  const { address } = useAccount();
5779
5802
  const { ensureCorrectChainAsync } = useEnsureCorrectChain();
5780
- const sdkConfig = useConfig();
5803
+ const sdkConfig = useConfig$1();
5781
5804
  const { generateCancelTransactionAsync } = useGenerateCancelTransaction({ chainId });
5782
5805
  const { processStep } = useProcessStep();
5783
5806
  const getCancelSteps = async ({ orderId, marketplace }) => {
@@ -5799,7 +5822,7 @@ const useCancelTransactionSteps = ({ collectionAddress, chainId, setSteps, onSuc
5799
5822
  const queryClient = getQueryClient();
5800
5823
  if (!address) throw new NoWalletConnectedError();
5801
5824
  try {
5802
- await ensureCorrectChainAsync(Number(chainId));
5825
+ if (!await ensureCorrectChainAsync(Number(chainId))) return;
5803
5826
  setSteps((prev) => ({
5804
5827
  ...prev,
5805
5828
  isExecuting: true
@@ -5945,7 +5968,7 @@ const generateListingTransaction = async (params, config) => {
5945
5968
  return (await getMarketplaceClient(config).generateListingTransaction(args)).steps;
5946
5969
  };
5947
5970
  const useGenerateListingTransaction = (params) => {
5948
- const config = useConfig();
5971
+ const config = useConfig$1();
5949
5972
  const { mutate, mutateAsync, ...result } = useMutation({
5950
5973
  onSuccess: (data) => {
5951
5974
  if (params.onSuccess) params.onSuccess(data);
@@ -5977,7 +6000,7 @@ const generateOfferTransaction = async (params, config, walletKind) => {
5977
6000
  return (await getMarketplaceClient(config).generateOfferTransaction(args)).steps;
5978
6001
  };
5979
6002
  const useGenerateOfferTransaction = (params) => {
5980
- const config = useConfig();
6003
+ const config = useConfig$1();
5981
6004
  const { walletKind } = useConnectorMetadata();
5982
6005
  const { mutate, mutateAsync, ...result } = useMutation({
5983
6006
  onSuccess: params.onSuccess,
@@ -5999,7 +6022,7 @@ const generateSellTransaction = async (args, config) => {
5999
6022
  return getMarketplaceClient(config).generateSellTransaction(args).then((data) => data.steps);
6000
6023
  };
6001
6024
  const useGenerateSellTransaction = (params) => {
6002
- const config = useConfig();
6025
+ const config = useConfig$1();
6003
6026
  const { mutate, mutateAsync, ...result } = useMutation({
6004
6027
  onSuccess: (data) => {
6005
6028
  if (params.onSuccess) params.onSuccess(data);
@@ -6442,7 +6465,7 @@ function ordersQueryOptions(params) {
6442
6465
  * ```
6443
6466
  */
6444
6467
  function useOrders(params) {
6445
- const defaultConfig = useConfig();
6468
+ const defaultConfig = useConfig$1();
6446
6469
  const { config = defaultConfig, ...rest } = params;
6447
6470
  return useQuery({ ...ordersQueryOptions({
6448
6471
  config,
@@ -6521,1894 +6544,2201 @@ const useBuyModalData = () => {
6521
6544
  };
6522
6545
 
6523
6546
  //#endregion
6524
- //#region src/react/ui/modals/BuyModal/internal/determineCheckoutMode.ts
6525
- function determineCheckoutMode({ checkoutModeConfig, isChainSupported, canBeUsedWithTrails }) {
6526
- if (checkoutModeConfig === "trails" && isChainSupported && canBeUsedWithTrails) return "trails";
6527
- if (checkoutModeConfig === "trails" && isChainSupported && !canBeUsedWithTrails) return "crypto";
6528
- if (checkoutModeConfig === "trails" && !isChainSupported) return "crypto";
6529
- if (typeof checkoutModeConfig === "object" && checkoutModeConfig.mode === "sequence-checkout") return {
6530
- mode: "sequence-checkout",
6531
- options: checkoutModeConfig.options
6532
- };
6533
- if (checkoutModeConfig === "crypto") return "crypto";
6534
- }
6535
-
6536
- //#endregion
6537
- //#region src/react/ui/modals/BuyModal/internal/buyModalContext.ts
6538
- function useBuyModalContext() {
6539
- const config = useConfig();
6540
- const modalProps = useBuyModalProps();
6541
- const checkoutModeConfig = config.checkoutMode ?? "trails";
6542
- const { close } = useBuyModal();
6543
- const transactionStatusModal = useTransactionStatusModal();
6544
- const { supportedChains, isLoadingChains } = useSupportedChains();
6545
- const { collectible, collection, currency, marketOrder, collectionAddress, primarySaleItem, isLoading: isBuyModalDataLoading, isMarket, isShop, error, refetchQueries } = useBuyModalData();
6546
- const transactionData = useBuyTransaction({
6547
- modalProps,
6548
- primarySalePrice: {
6549
- amount: primarySaleItem?.priceAmount,
6550
- currencyAddress: primarySaleItem?.currencyAddress
6547
+ //#region src/react/ui/modals/_internal/constants/opensea-currencies.ts
6548
+ const OPENSEA_CHAIN_CURRENCIES = {
6549
+ "1": {
6550
+ chainId: 1,
6551
+ openseaId: "ethereum",
6552
+ name: "Ethereum",
6553
+ nativeCurrency: {
6554
+ symbol: "ETH",
6555
+ address: zeroAddress
6551
6556
  },
6552
- contractType: collection?.type === ContractType$1.ERC1155 ? ContractType$1.ERC1155 : ContractType$1.ERC721
6553
- });
6554
- const steps = transactionData.data?.steps;
6555
- const canBeUsedWithTrails = transactionData.data?.canBeUsedWithTrails ?? false;
6556
- const isLoadingSteps = transactionData.isLoading;
6557
- const { pendingFeeOptionConfirmation, rejectPendingFeeOption } = useWaasFeeOptions$1(modalProps.chainId, config);
6558
- const isChainSupported = supportedChains.some((chain) => chain.id === modalProps.chainId);
6559
- const isLoading = isLoadingSteps || isLoadingChains || isBuyModalDataLoading;
6560
- const buyStep = steps?.find((step) => step.id === "buy");
6561
- const checkoutMode = determineCheckoutMode({
6562
- checkoutModeConfig,
6563
- isChainSupported,
6564
- canBeUsedWithTrails
6565
- });
6566
- const formattedAmount = currency?.decimals && buyStep?.price ? formatUnits(BigInt(buyStep.price), currency.decimals) : void 0;
6567
- const handleTransactionSuccess = (hash) => {
6568
- if (!collectible) throw new Error("Collectible not found");
6569
- if (isMarket && !marketOrder) throw new Error("Order not found");
6570
- if (!currency) throw new Error("Currency not found");
6571
- const amountRaw = isMarket ? marketOrder?.priceAmount : primarySaleItem?.priceAmount;
6572
- if (amountRaw == null) throw new Error("Price amount not found");
6573
- close();
6574
- transactionStatusModal.show({
6575
- hash,
6576
- orderId: isMarket ? marketOrder?.orderId : void 0,
6577
- price: {
6578
- amountRaw,
6579
- currency
6580
- },
6581
- collectionAddress,
6582
- chainId: modalProps.chainId,
6583
- tokenId: collectible.tokenId,
6584
- type: TransactionType$1.BUY
6585
- });
6586
- };
6587
- const handleTrailsSuccess = (data) => {
6588
- handleTransactionSuccess(data.txHash);
6589
- };
6590
- const handleClose = () => {
6591
- if (pendingFeeOptionConfirmation?.id) {
6592
- console.log("rejecting pending fee option", pendingFeeOptionConfirmation?.id);
6593
- rejectPendingFeeOption(pendingFeeOptionConfirmation?.id);
6557
+ wrappedNativeCurrency: { address: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2" },
6558
+ offerCurrency: {
6559
+ symbol: "WETH",
6560
+ address: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2"
6561
+ },
6562
+ listingCurrency: {
6563
+ symbol: "ETH",
6564
+ address: zeroAddress
6594
6565
  }
6595
- close();
6596
- };
6597
- const refetchAll = async () => {
6598
- await refetchQueries();
6599
- await transactionData.refetch();
6600
- };
6601
- return {
6602
- config,
6603
- modalProps,
6604
- close: handleClose,
6605
- steps,
6606
- collectible,
6607
- collection,
6608
- primarySaleItem,
6609
- marketOrder,
6610
- isShop,
6611
- buyStep,
6612
- isLoading,
6613
- checkoutMode,
6614
- formattedAmount,
6615
- handleTransactionSuccess,
6616
- handleTrailsSuccess,
6617
- error: error || transactionData.error,
6618
- refetchAll
6619
- };
6620
- }
6621
-
6622
- //#endregion
6623
- //#region src/react/ui/modals/BuyModal/components/CollectibleMetadataSummary.tsx
6624
- const CollectibleMetadataSummary = ({ checkoutMode, collectible, collection, chainId, currency, formattedPrice, renderCurrencyPrice, renderPriceUSD, isMarket }) => {
6625
- if (!collectible) return null;
6626
- const isTrails = checkoutMode === "trails";
6627
- const isCryptoPayment = checkoutMode === "crypto";
6628
- const imageSize = isTrails ? "h-12 w-12" : "h-[84px] w-[84px]";
6629
- return /* @__PURE__ */ jsxs("div", {
6630
- className: isTrails ? "flex w-full items-start gap-4 p-6 pb-0" : "flex items-start gap-4",
6631
- children: [/* @__PURE__ */ jsx(Media, {
6632
- assets: [
6633
- collectible.video,
6634
- collectible.animation_url,
6635
- collectible.image
6636
- ],
6637
- name: collectible.name,
6638
- containerClassName: `${imageSize} shrink-0 rounded-lg overflow-hidden object-cover`
6639
- }), /* @__PURE__ */ jsxs("div", {
6640
- className: "flex min-w-0 flex-1 flex-col gap-2",
6641
- children: [isTrails ? /* @__PURE__ */ jsxs("div", {
6642
- className: "flex flex-col gap-1",
6643
- children: [/* @__PURE__ */ jsxs("div", {
6644
- className: "flex items-center gap-2",
6645
- children: [/* @__PURE__ */ jsx(Text, {
6646
- className: "truncate font-semibold text-sm text-text-100",
6647
- children: collectible.name || "Unnamed"
6648
- }), collectible.tokenId !== void 0 && /* @__PURE__ */ jsxs(Text, {
6649
- className: "shrink-0 font-bold text-text-50 text-xs",
6650
- children: ["#", collectible.tokenId.toString()]
6651
- })]
6652
- }), collection && /* @__PURE__ */ jsxs("div", {
6653
- className: "flex items-center gap-2",
6654
- children: [collection.logoURI && /* @__PURE__ */ jsx("img", {
6655
- src: collection.logoURI,
6656
- alt: collection.name,
6657
- className: "h-4 w-4 shrink-0 rounded-full"
6658
- }), /* @__PURE__ */ jsx(Text, {
6659
- className: "truncate font-bold text-text-50 text-xs",
6660
- children: collection.name
6661
- })]
6662
- })]
6663
- }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
6664
- className: "flex items-center gap-2",
6665
- children: [/* @__PURE__ */ jsx(Text, {
6666
- className: "truncate font-semibold text-sm text-text-100",
6667
- children: collectible.name
6668
- }), collectible.tokenId !== void 0 && /* @__PURE__ */ jsxs(Text, {
6669
- className: "shrink-0 font-bold text-text-50 text-xs",
6670
- children: ["#", collectible.tokenId.toString()]
6671
- })]
6672
- }), collection && /* @__PURE__ */ jsx(Text, {
6673
- className: "truncate font-bold text-text-50 text-xs",
6674
- children: collection.name
6675
- })] }), isCryptoPayment && renderCurrencyPrice && /* @__PURE__ */ jsxs("div", {
6676
- className: "mt-2 flex flex-col",
6677
- children: [/* @__PURE__ */ jsx(Tooltip, {
6678
- message: `${formattedPrice || ""} ${currency?.symbol || ""}`,
6679
- side: "right",
6680
- children: /* @__PURE__ */ jsxs("div", {
6681
- className: "flex items-center gap-1",
6682
- children: [currency?.imageUrl ? /* @__PURE__ */ jsx("img", {
6683
- src: currency.imageUrl,
6684
- alt: currency.symbol,
6685
- className: "h-5 w-5 rounded-full"
6686
- }) : chainId ? /* @__PURE__ */ jsx(NetworkImage, {
6687
- chainId,
6688
- size: "sm"
6689
- }) : null, /* @__PURE__ */ jsx(Text, {
6690
- className: "font-bold text-md",
6691
- children: renderCurrencyPrice()
6692
- })]
6693
- })
6694
- }), isMarket && renderPriceUSD && renderPriceUSD() && /* @__PURE__ */ jsx(Text, {
6695
- className: "font-bold text-text-50 text-xs",
6696
- children: renderPriceUSD()
6697
- })]
6698
- })]
6699
- })]
6700
- });
6701
- };
6702
-
6703
- //#endregion
6704
- //#region src/react/ui/components/_internals/ErrorLogBox.tsx
6705
- const ErrorLogBox = ({ title, message, error, onDismiss }) => {
6706
- const [showFullError, setShowFullError] = useState(false);
6707
- const toggleFullError = () => {
6708
- setShowFullError(!showFullError);
6709
- };
6710
- return /* @__PURE__ */ jsx("div", {
6711
- className: "wrap-anywhere relative max-h-96 overflow-y-auto rounded-lg border border-red-900 bg-[#2b0000] p-3",
6712
- children: /* @__PURE__ */ jsxs("div", {
6713
- className: "flex items-start gap-3",
6714
- children: [
6715
- /* @__PURE__ */ jsx(WarningIcon, {
6716
- className: "absolute mt-0.5 flex-shrink-0 text-red-500",
6717
- size: "sm"
6718
- }),
6719
- /* @__PURE__ */ jsxs("div", {
6720
- className: "min-w-0 flex-1",
6721
- children: [/* @__PURE__ */ jsxs("div", {
6722
- className: "relative ml-10 flex flex-col",
6723
- children: [/* @__PURE__ */ jsx(Text, {
6724
- className: "font-bold text-red-400 text-sm",
6725
- children: title
6726
- }), /* @__PURE__ */ jsx(Text, {
6727
- className: "mt-1 text-red-300 text-xs",
6728
- children: message
6729
- })]
6730
- }), error && /* @__PURE__ */ jsxs("div", {
6731
- className: "mt-2",
6732
- children: [
6733
- /* @__PURE__ */ jsxs("button", {
6734
- onClick: toggleFullError,
6735
- className: "flex items-center gap-1 text-red-400 text-xs transition-colors hover:text-red-300",
6736
- type: "button",
6737
- children: [showFullError ? "Hide full error" : "Show full error", showFullError ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" })]
6738
- }),
6739
- showFullError && /* @__PURE__ */ jsx("div", { className: "mt-2 h-px bg-red-900" }),
6740
- showFullError && /* @__PURE__ */ jsx("div", {
6741
- className: "mt-2 overflow-auto rounded-md bg-red-950 p-2",
6742
- children: /* @__PURE__ */ jsxs(Text, {
6743
- className: "whitespace-pre-wrap break-words font-mono text-red-100 text-xs",
6744
- children: [
6745
- error.message,
6746
- error.stack && /* @__PURE__ */ jsxs(Fragment, { children: ["\n\nStack trace:\n", error.stack] }),
6747
- JSON.stringify(error, null, 2)
6748
- ]
6749
- })
6750
- })
6751
- ]
6752
- })]
6753
- }),
6754
- onDismiss && /* @__PURE__ */ jsx("button", {
6755
- onClick: onDismiss,
6756
- className: "absolute right-4 flex-shrink-0 text-red-400 transition-colors hover:text-red-300",
6757
- type: "button",
6758
- "aria-label": "Dismiss error",
6759
- children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-3 w-3" })
6760
- })
6761
- ]
6762
- })
6763
- });
6764
- };
6765
-
6766
- //#endregion
6767
- //#region src/react/ui/modals/BuyModal/hooks/useExecuteBundledTransactions.ts
6768
- var FeeOptionInsufficientFundsError = class extends Error {
6769
- feeOptions;
6770
- constructor(message, feeOptions) {
6771
- super(message);
6772
- this.name = "FeeOptionInsufficientFundsError";
6773
- this.feeOptions = feeOptions;
6774
- }
6775
- };
6776
- const useExecuteBundledTransactions = ({ chainId, approvalStep, priceAmount }) => {
6777
- const config = useConfig();
6778
- const [isExecuting, setIsExecuting] = useState(false);
6779
- const { address, connector } = useAccount();
6780
- const publicClient = usePublicClient();
6781
- const { data: walletClient } = useWalletClient();
6782
- const indexerClient = getIndexerClient(chainId, config);
6783
- const { collection, currency } = useBuyModalData();
6784
- const isReady = !!address && !!publicClient && !!walletClient && !!indexerClient && !!connector && !!collection?.address && priceAmount != null;
6785
- const executeBundledTransactions = async ({ step, onBalanceInsufficientForFeeOption, onTransactionFailed }) => {
6786
- setIsExecuting(true);
6787
- try {
6788
- if (!address) throw new Error("Address not found");
6789
- if (!publicClient) throw new Error("Public client not found");
6790
- if (!walletClient) throw new Error("Wallet client not found");
6791
- if (!indexerClient) throw new Error("Indexer client not found");
6792
- if (!connector) throw new Error("Connector not found");
6793
- if (!collection?.address) throw new Error("Collection address not found");
6794
- if (priceAmount == null) throw new Error("Price amount not found");
6795
- const approvalData = approvalStep ? {
6796
- to: approvalStep.to,
6797
- data: approvalStep.data,
6798
- chainId
6799
- } : void 0;
6800
- const transactionData = {
6801
- to: step.to,
6802
- data: step.data,
6803
- chainId,
6804
- ...currency?.nativeCurrency ? { value: priceAmount } : {}
6805
- };
6806
- const sendTransactionFns = await sendTransactions({
6807
- chainId,
6808
- senderAddress: address,
6809
- publicClient,
6810
- walletClient,
6811
- indexerClient,
6812
- connector,
6813
- transactions: [...approvalData ? [approvalData] : [], transactionData],
6814
- transactionConfirmations: 1,
6815
- waitConfirmationForLastTransaction: false
6816
- });
6817
- if (!sendTransactionFns.length) throw new Error("No transactions returned");
6818
- let txHash;
6819
- for (const sendTransaction of sendTransactionFns) txHash = await sendTransaction();
6820
- if (!txHash) throw new Error("Transaction hash not found");
6821
- return txHash;
6822
- } catch (error) {
6823
- if (error instanceof FeeOptionInsufficientFundsError) {
6824
- if (onBalanceInsufficientForFeeOption) onBalanceInsufficientForFeeOption(error);
6825
- throw error;
6826
- }
6827
- if (onTransactionFailed) onTransactionFailed(error);
6828
- throw error;
6829
- } finally {
6830
- setIsExecuting(false);
6831
- }
6832
- };
6833
- return {
6834
- executeBundledTransactions,
6835
- isExecuting,
6836
- isReady
6837
- };
6838
- };
6839
-
6840
- //#endregion
6841
- //#region src/react/ui/modals/BuyModal/hooks/useHasSufficientBalance.ts
6842
- const useHasSufficientBalance = ({ chainId, value, tokenAddress }) => {
6843
- const { address } = useAccount();
6844
- const { data: balanceData, isLoading } = useTokenCurrencyBalance({
6845
- currencyAddress: tokenAddress,
6846
- chainId,
6847
- userAddress: address
6848
- });
6849
- const balance = balanceData?.value ?? 0n;
6850
- return {
6851
- data: {
6852
- hasSufficientBalance: balance >= value || value === 0n,
6853
- balance
6566
+ },
6567
+ "10": {
6568
+ chainId: 10,
6569
+ openseaId: "optimism",
6570
+ name: "Optimism",
6571
+ nativeCurrency: {
6572
+ symbol: "ETH",
6573
+ address: zeroAddress
6854
6574
  },
6855
- isLoading
6856
- };
6857
- };
6858
-
6859
- //#endregion
6860
- //#region src/react/ui/modals/BuyModal/internal/cryptoPaymentModalContext.tsx
6861
- function useCryptoPaymentModalContext({ chainId, steps, onSuccess }) {
6862
- const [isExecuting, setIsExecuting] = useState(false);
6863
- const [isApproving, setIsApproving] = useState(false);
6864
- const [error, setError] = useState(null);
6865
- const { isSequence: isSequenceConnector, isWaaS } = useConnectorMetadata();
6866
- const buyStep = steps.find((step) => step.id === StepType.buy);
6867
- if (!buyStep) throw new Error("Buy step not found");
6868
- const { collectible, currency, marketOrder, primarySaleItem, isMarket, isShop, collection, isLoading: isLoadingBuyModalData } = useBuyModalData();
6869
- const sdkConfig = useConfig();
6870
- const { ensureCorrectChainAsync, currentChainId } = useEnsureCorrectChain();
6871
- const isOnCorrectChain = currentChainId === chainId;
6872
- const priceAmount = isMarket ? marketOrder?.priceAmount : primarySaleItem?.priceAmount;
6873
- const priceCurrencyAddress = isMarket ? marketOrder?.priceCurrencyAddress : primarySaleItem?.currencyAddress;
6874
- const isAnyTransactionPending = isApproving || isExecuting;
6875
- const { data, isLoading: isLoadingBalance } = useHasSufficientBalance({
6876
- chainId,
6877
- value: BigInt(priceAmount || 0),
6878
- tokenAddress: priceCurrencyAddress
6879
- });
6880
- const hasSufficientBalance = data?.hasSufficientBalance ?? false;
6881
- const { sendTransactionAsync } = useSendTransaction();
6882
- const [approvalStep, setApprovalStep] = useState(steps.find((step) => step.id === StepType.tokenApproval));
6883
- const { executeBundledTransactions, isExecuting: isExecutingBundledTransactions, isReady: isBundledTransactionsReady } = useExecuteBundledTransactions({
6884
- chainId,
6885
- approvalStep,
6886
- priceAmount: BigInt(priceAmount || 0)
6887
- });
6888
- const waas = useSelectWaasFeeOptionsStore();
6889
- const { pendingFeeOptionConfirmation, rejectPendingFeeOption } = useWaasFeeOptions$1(chainId, sdkConfig);
6890
- const isSponsored = pendingFeeOptionConfirmation?.options?.length === 0;
6891
- const isFeeSelectionVisible = waas.isVisible || !isSponsored && !!pendingFeeOptionConfirmation?.options;
6892
- const executeTransaction = async (step) => {
6893
- const data$1 = step.data;
6894
- const to = step.to;
6895
- const value = BigInt(step.value);
6896
- if (!data$1 || !to) {
6897
- const errorDetails = /* @__PURE__ */ new Error(`Invalid step: 'data' and 'to' are required:
6898
- data: ${data$1}
6899
- to: ${to}
6900
-
6901
- ${JSON.stringify(step)}`);
6902
- setError({
6903
- title: "Invalid step",
6904
- message: "`data` and `to` are required",
6905
- details: errorDetails
6906
- });
6907
- throw errorDetails;
6575
+ wrappedNativeCurrency: { address: "0x4200000000000000000000000000000000000006" },
6576
+ offerCurrency: {
6577
+ symbol: "WETH",
6578
+ address: "0x4200000000000000000000000000000000000006"
6579
+ },
6580
+ listingCurrency: {
6581
+ symbol: "ETH",
6582
+ address: zeroAddress
6908
6583
  }
6909
- await ensureCorrectChainAsync(chainId);
6910
- const hash = await sendTransactionAsync({
6911
- to,
6912
- data: data$1,
6913
- value
6914
- });
6915
- await waitForTransactionReceipt({
6916
- txHash: hash,
6917
- chainId,
6918
- sdkConfig
6919
- });
6920
- return hash;
6921
- };
6922
- const executeApproval = async () => {
6923
- if (!approvalStep) throw new Error("Approval step not found");
6924
- setError(null);
6925
- setIsApproving(true);
6926
- try {
6927
- await executeTransaction(approvalStep);
6928
- setApprovalStep(void 0);
6929
- } catch (error$1) {
6930
- const errorObj = error$1 instanceof Error ? error$1 : new Error(String(error$1));
6931
- setError({
6932
- title: "Approval failed",
6933
- message: errorObj.message || "Failed to approve token. Please try again.",
6934
- details: errorObj
6935
- });
6936
- console.error("Approval transaction failed:", error$1);
6937
- } finally {
6938
- setIsApproving(false);
6584
+ },
6585
+ "137": {
6586
+ chainId: 137,
6587
+ openseaId: "matic",
6588
+ name: "Polygon",
6589
+ nativeCurrency: {
6590
+ symbol: "POL",
6591
+ address: zeroAddress
6592
+ },
6593
+ wrappedNativeCurrency: { address: "0x0d500b1d8e8ef31e21c99d1db9a6444d3adf1270" },
6594
+ offerCurrency: {
6595
+ symbol: "WETH",
6596
+ address: "0x7ceb23fd6bc0add59e62ac25578270cff1b9f619"
6597
+ },
6598
+ listingCurrency: {
6599
+ symbol: "WETH",
6600
+ address: "0x7ceb23fd6bc0add59e62ac25578270cff1b9f619"
6939
6601
  }
6940
- };
6941
- const handleBalanceInsufficientForWaasFeeOption = (error$1) => {
6942
- setError({
6943
- title: "Insufficient balance for fee option",
6944
- message: "You do not have enough balance to purchase this item.",
6945
- details: error$1
6946
- });
6947
- console.error("Balance insufficient for fee option:", error$1);
6948
- };
6949
- const handleTransactionFailed = (error$1) => {
6950
- setError({
6951
- title: "Transaction failed",
6952
- message: error$1.message,
6953
- details: error$1
6954
- });
6955
- console.error("Transaction failed:", error$1);
6956
- };
6957
- const executeBuy = async () => {
6958
- setError(null);
6959
- setIsExecuting(true);
6960
- try {
6961
- onSuccess(await executeBundledTransactions({
6962
- step: buyStep,
6963
- onBalanceInsufficientForFeeOption: handleBalanceInsufficientForWaasFeeOption,
6964
- onTransactionFailed: handleTransactionFailed
6965
- }));
6966
- } catch (error$1) {
6967
- const errorObj = error$1 instanceof Error ? error$1 : new Error(String(error$1));
6968
- setError({
6969
- title: "Purchase failed",
6970
- message: errorObj.message || "Failed to complete purchase. Please try again.",
6971
- details: errorObj
6972
- });
6973
- console.error("Buy transaction failed:", error$1);
6974
- } finally {
6975
- setIsExecuting(false);
6602
+ },
6603
+ "360": {
6604
+ chainId: 360,
6605
+ openseaId: "shape",
6606
+ name: "Shape",
6607
+ nativeCurrency: {
6608
+ symbol: "ETH",
6609
+ address: zeroAddress
6610
+ },
6611
+ wrappedNativeCurrency: { address: "0x4200000000000000000000000000000000000006" },
6612
+ offerCurrency: {
6613
+ symbol: "WETH",
6614
+ address: "0x4200000000000000000000000000000000000006"
6615
+ },
6616
+ listingCurrency: {
6617
+ symbol: "ETH",
6618
+ address: zeroAddress
6976
6619
  }
6977
- };
6978
- const dismissError = () => {
6979
- setError(null);
6980
- };
6981
- const formattedPrice = formatPrice(BigInt(priceAmount || 0), currency?.decimals || 0);
6982
- const isFree = formattedPrice === "0";
6983
- const renderPriceUSD = () => {
6984
- const priceUSD = marketOrder?.priceUSDFormatted || marketOrder?.priceUSD;
6985
- if (!priceUSD) return "";
6986
- if ((typeof priceUSD === "string" ? Number.parseFloat(priceUSD) : priceUSD) < 1e-4) return /* @__PURE__ */ jsxs("div", {
6987
- className: "flex items-center",
6988
- children: [
6989
- /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-3" }),
6990
- " ",
6991
- /* @__PURE__ */ jsx(Text, { children: "$0.0001" })
6992
- ]
6993
- });
6994
- return `~$${priceUSD}`;
6995
- };
6996
- const renderCurrencyPrice = () => {
6997
- if (isFree) return "Free";
6998
- if (Number.parseFloat(formattedPrice) < 1e-4) return /* @__PURE__ */ jsxs("div", {
6999
- className: "flex items-center",
7000
- children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-4" }), /* @__PURE__ */ jsxs(Text, { children: ["0.0001 ", currency?.symbol] })]
7001
- });
7002
- return `${formattedPrice} ${currency?.symbol}`;
7003
- };
7004
- const feeStep = isWaaS ? {
7005
- label: "Select Fee",
7006
- status: isSponsored || !!waas.selectedFeeOption ? "success" : isFeeSelectionVisible ? "selecting" : "idle",
7007
- isSponsored,
7008
- isSelecting: isFeeSelectionVisible,
7009
- selectedOption: waas.selectedFeeOption,
7010
- show: () => waas.show(),
7011
- cancel: () => {
7012
- waas.hide();
7013
- if (pendingFeeOptionConfirmation?.id) rejectPendingFeeOption(pendingFeeOptionConfirmation.id);
6620
+ },
6621
+ "998": {
6622
+ chainId: 998,
6623
+ openseaId: "hyperevm",
6624
+ name: "HyperEVM",
6625
+ nativeCurrency: {
6626
+ symbol: "HYPE",
6627
+ address: zeroAddress
6628
+ },
6629
+ wrappedNativeCurrency: { address: "0x5555555555555555555555555555555555555555" },
6630
+ offerCurrency: {
6631
+ symbol: "WHYPE",
6632
+ address: "0x5555555555555555555555555555555555555555"
6633
+ },
6634
+ listingCurrency: {
6635
+ symbol: "HYPE",
6636
+ address: zeroAddress
7014
6637
  }
7015
- } : void 0;
7016
- return {
7017
- data: {
7018
- collectible,
7019
- currency,
7020
- marketOrder,
7021
- collection
6638
+ },
6639
+ "130": {
6640
+ chainId: 130,
6641
+ openseaId: "unichain",
6642
+ name: "Unichain",
6643
+ nativeCurrency: {
6644
+ symbol: "ETH",
6645
+ address: zeroAddress
7022
6646
  },
7023
- loading: {
7024
- isLoadingBuyModalData,
7025
- isLoadingBalance
6647
+ wrappedNativeCurrency: { address: "0x4200000000000000000000000000000000000006" },
6648
+ offerCurrency: {
6649
+ symbol: "WETH",
6650
+ address: "0x4200000000000000000000000000000000000006"
7026
6651
  },
7027
- chain: {
7028
- isOnCorrectChain,
7029
- currentChainId
6652
+ listingCurrency: {
6653
+ symbol: "ETH",
6654
+ address: zeroAddress
6655
+ }
6656
+ },
6657
+ "1329": {
6658
+ chainId: 1329,
6659
+ openseaId: "sei",
6660
+ name: "Sei",
6661
+ nativeCurrency: {
6662
+ symbol: "SEI",
6663
+ address: zeroAddress
7030
6664
  },
7031
- balance: { hasSufficientBalance },
7032
- transaction: {
7033
- isApproving,
7034
- isExecuting,
7035
- isExecutingBundledTransactions
6665
+ wrappedNativeCurrency: { address: "0xe30fedd158a2e3b13e9badaeabafc5516e95e8c7" },
6666
+ offerCurrency: {
6667
+ symbol: "WSEI",
6668
+ address: "0xe30fedd158a2e3b13e9badaeabafc5516e95e8c7"
7036
6669
  },
7037
- error: {
7038
- error,
7039
- dismissError
6670
+ listingCurrency: {
6671
+ symbol: "SEI",
6672
+ address: zeroAddress
6673
+ }
6674
+ },
6675
+ "1868": {
6676
+ chainId: 1868,
6677
+ openseaId: "soneium",
6678
+ name: "Soneium",
6679
+ nativeCurrency: {
6680
+ symbol: "ETH",
6681
+ address: zeroAddress
7040
6682
  },
7041
- steps: {
7042
- approvalStep,
7043
- feeStep
6683
+ wrappedNativeCurrency: { address: "0x4200000000000000000000000000000000000006" },
6684
+ offerCurrency: {
6685
+ symbol: "WETH",
6686
+ address: "0x4200000000000000000000000000000000000006"
7044
6687
  },
7045
- connector: {
7046
- isSequenceConnector,
7047
- isWaaS
6688
+ listingCurrency: {
6689
+ symbol: "ETH",
6690
+ address: zeroAddress
6691
+ }
6692
+ },
6693
+ "2020": {
6694
+ chainId: 2020,
6695
+ openseaId: "ronin",
6696
+ name: "Ronin",
6697
+ nativeCurrency: {
6698
+ symbol: "RON",
6699
+ address: zeroAddress
7048
6700
  },
7049
- flags: { isMarket },
7050
- permissions: {
7051
- canApprove: hasSufficientBalance && !isLoadingBalance && !isLoadingBuyModalData && !isAnyTransactionPending && !isFeeSelectionVisible,
7052
- canBuy: hasSufficientBalance && !isLoadingBalance && !isLoadingBuyModalData && (isSequenceConnector ? true : !approvalStep) && !isAnyTransactionPending && !isFeeSelectionVisible && (isShop && !!approvalStep ? isBundledTransactionsReady : true)
6701
+ wrappedNativeCurrency: { address: "0xe514d9deb7966c8be0ca922de8a064264ea6bcd4" },
6702
+ offerCurrency: {
6703
+ symbol: "WRON",
6704
+ address: "0xe514d9deb7966c8be0ca922de8a064264ea6bcd4"
7053
6705
  },
7054
- price: {
7055
- formattedPrice,
7056
- renderCurrencyPrice,
7057
- renderPriceUSD
6706
+ listingCurrency: {
6707
+ symbol: "RON",
6708
+ address: zeroAddress
6709
+ }
6710
+ },
6711
+ "2741": {
6712
+ chainId: 2741,
6713
+ openseaId: "abstract",
6714
+ name: "Abstract",
6715
+ nativeCurrency: {
6716
+ symbol: "ETH",
6717
+ address: zeroAddress
7058
6718
  },
7059
- actions: {
7060
- executeApproval,
7061
- executeBuy
6719
+ wrappedNativeCurrency: { address: "0x3439153eb7af838ad19d56e1571fbd09333c2809" },
6720
+ offerCurrency: {
6721
+ symbol: "WETH",
6722
+ address: "0x3439153eb7af838ad19d56e1571fbd09333c2809"
6723
+ },
6724
+ listingCurrency: {
6725
+ symbol: "ETH",
6726
+ address: zeroAddress
7062
6727
  }
7063
- };
7064
- }
7065
-
7066
- //#endregion
7067
- //#region src/react/ui/modals/BuyModal/components/CryptoPaymentModalSkeleton.tsx
7068
- const CryptoPaymentModalSkeleton = ({ networkMismatch }) => {
7069
- return /* @__PURE__ */ jsx("div", {
7070
- className: "flex w-full flex-col",
7071
- children: /* @__PURE__ */ jsxs("div", {
7072
- className: "flex flex-col gap-4 p-4",
7073
- children: [
7074
- /* @__PURE__ */ jsxs("div", {
7075
- className: "flex items-start gap-4",
7076
- children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-[84px] w-[84px] rounded-lg" }), /* @__PURE__ */ jsxs("div", {
7077
- className: "flex flex-1 flex-col",
7078
- children: [
7079
- /* @__PURE__ */ jsxs("div", {
7080
- className: "flex items-center gap-2",
7081
- children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-12" })]
7082
- }),
7083
- /* @__PURE__ */ jsx(Skeleton, { className: "mt-1 h-3 w-24" }),
7084
- /* @__PURE__ */ jsxs("div", {
7085
- className: "mt-2 flex flex-col",
7086
- children: [/* @__PURE__ */ jsxs("div", {
7087
- className: "flex items-center gap-2",
7088
- children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-full" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-28" })]
7089
- }), /* @__PURE__ */ jsx(Skeleton, { className: "mt-1 h-3 w-16" })]
7090
- })
7091
- ]
7092
- })]
7093
- }),
7094
- networkMismatch && /* @__PURE__ */ jsx(Skeleton, { className: "h-[98px] w-full rounded-lg" }),
7095
- networkMismatch && /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full rounded-full" }),
7096
- /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full rounded-full" })
7097
- ]
7098
- })
7099
- });
7100
- };
7101
-
7102
- //#endregion
7103
- //#region src/react/ui/modals/BuyModal/components/CryptoPaymentModal.tsx
7104
- const CryptoPaymentModal = ({ chainId, steps, onSuccess }) => {
7105
- const { data: { collectible, currency, collection }, loading: { isLoadingBuyModalData, isLoadingBalance }, chain: { isOnCorrectChain, currentChainId }, balance: { hasSufficientBalance }, transaction: { isApproving, isExecuting, isExecutingBundledTransactions }, error: { error, dismissError }, steps: { approvalStep, feeStep }, connector: { isSequenceConnector }, flags: { isMarket }, permissions: { canApprove, canBuy }, price: { formattedPrice, renderCurrencyPrice, renderPriceUSD }, actions: { executeApproval, executeBuy } } = useCryptoPaymentModalContext({
7106
- chainId,
7107
- steps,
7108
- onSuccess
7109
- });
7110
- const { ensureCorrectChainAsync } = useEnsureCorrectChain();
7111
- const [chainSwitchError, setChainSwitchError] = useState(null);
7112
- const handleChainSwitchError = (error$1) => {
7113
- setChainSwitchError({
7114
- title: "Chain switch failed",
7115
- message: `Failed to switch to ${getPresentableChainName(chainId)}. Please try changing the network in your wallet manually.`,
7116
- details: error$1
7117
- });
7118
- };
7119
- const dismissChainSwitchError = () => {
7120
- setChainSwitchError(null);
7121
- };
7122
- const executeWithChainSwitch = async (action) => {
7123
- dismissChainSwitchError();
7124
- try {
7125
- await ensureCorrectChainAsync(chainId);
7126
- } catch (error$1) {
7127
- if (error$1 instanceof Error) handleChainSwitchError(error$1);
6728
+ },
6729
+ "8333": {
6730
+ chainId: 8333,
6731
+ openseaId: "b3",
6732
+ name: "B3",
6733
+ nativeCurrency: {
6734
+ symbol: "ETH",
6735
+ address: zeroAddress
6736
+ },
6737
+ wrappedNativeCurrency: { address: "0x4200000000000000000000000000000000000006" },
6738
+ offerCurrency: {
6739
+ symbol: "WETH",
6740
+ address: "0x4200000000000000000000000000000000000006"
6741
+ },
6742
+ listingCurrency: {
6743
+ symbol: "ETH",
6744
+ address: zeroAddress
7128
6745
  }
7129
- if (action === "approval") await executeApproval();
7130
- else await executeBuy();
7131
- };
7132
- const approvalButtonLabel = isApproving ? /* @__PURE__ */ jsxs("div", {
7133
- className: "flex items-center gap-2",
7134
- children: [/* @__PURE__ */ jsx(Spinner, { size: "sm" }), " Approving Token..."]
7135
- }) : "Approve Token";
7136
- const buyButtonLabel = isExecuting || isExecutingBundledTransactions ? /* @__PURE__ */ jsxs("div", {
7137
- className: "flex items-center gap-2",
7138
- children: [/* @__PURE__ */ jsx(Spinner, { size: "sm" }), " Confirming Purchase..."]
7139
- }) : "Buy now";
7140
- if (isLoadingBuyModalData || isLoadingBalance) return /* @__PURE__ */ jsx(CryptoPaymentModalSkeleton, { networkMismatch: !isOnCorrectChain && currentChainId !== void 0 });
7141
- return /* @__PURE__ */ jsx("div", {
7142
- className: "flex w-full flex-col",
7143
- children: /* @__PURE__ */ jsxs("div", {
7144
- className: "flex flex-col gap-4 p-4",
7145
- children: [
7146
- /* @__PURE__ */ jsx(CollectibleMetadataSummary, {
7147
- checkoutMode: "crypto",
7148
- collectible,
7149
- collection,
7150
- chainId,
7151
- currency,
7152
- formattedPrice,
7153
- renderCurrencyPrice,
7154
- renderPriceUSD,
7155
- isMarket
7156
- }),
7157
- !isLoadingBalance && !isLoadingBuyModalData && !hasSufficientBalance && /* @__PURE__ */ jsxs(Text, {
7158
- className: "text-sm text-warning",
7159
- children: [
7160
- "You do not have enough",
7161
- " ",
7162
- /* @__PURE__ */ jsx(Text, {
7163
- className: "font-bold",
7164
- children: currency?.name
7165
- }),
7166
- " to purchase this item"
7167
- ]
7168
- }),
7169
- approvalStep && !isSequenceConnector && /* @__PURE__ */ jsx(Button, {
7170
- onClick: async () => {
7171
- await executeWithChainSwitch("approval");
7172
- },
7173
- disabled: !canApprove,
7174
- variant: "primary",
7175
- size: "lg",
7176
- className: "w-full",
7177
- children: approvalButtonLabel
7178
- }),
7179
- !isLoadingBalance && !isLoadingBuyModalData && /* @__PURE__ */ jsx(Button, {
7180
- onClick: async () => {
7181
- await executeWithChainSwitch("buy");
7182
- },
7183
- disabled: !canBuy,
7184
- variant: "primary",
7185
- size: "lg",
7186
- className: "w-full",
7187
- children: buyButtonLabel
7188
- }),
7189
- feeStep?.isSelecting && /* @__PURE__ */ jsx(selectWaasFeeOptions_default, {
7190
- chainId,
7191
- onCancel: feeStep.cancel,
7192
- titleOnConfirm: "Processing purchase..."
7193
- }),
7194
- (chainSwitchError || error) && /* @__PURE__ */ jsx(ErrorLogBox, {
7195
- title: chainSwitchError?.title ?? error?.title ?? "",
7196
- message: chainSwitchError?.message ?? error?.message ?? "",
7197
- error: chainSwitchError?.details ?? error?.details,
7198
- onDismiss: () => {
7199
- dismissChainSwitchError();
7200
- dismissError();
7201
- }
7202
- })
7203
- ]
7204
- })
7205
- });
7206
- };
7207
-
7208
- //#endregion
7209
- //#region src/react/ui/modals/_internal/components/baseModal/ErrorBoundary.tsx
7210
- var ErrorBoundary = class extends Component {
7211
- constructor(props) {
7212
- super(props);
7213
- this.state = {
7214
- hasError: false,
7215
- error: null,
7216
- errorInfo: null
7217
- };
7218
- }
7219
- resetErrorBoundary = () => {
7220
- this.setState({
7221
- hasError: false,
7222
- error: null,
7223
- errorInfo: null
7224
- });
7225
- };
7226
- static getDerivedStateFromError(error) {
7227
- return {
7228
- hasError: true,
7229
- error
7230
- };
7231
- }
7232
- componentDidCatch(error, errorInfo) {
7233
- console.error("ErrorBoundary caught an error:", error, errorInfo);
7234
- this.setState({ errorInfo });
7235
- this.props.onError?.(error, errorInfo);
7236
- }
7237
- render() {
7238
- if (this.state.hasError && this.state.error) {
7239
- if (this.props.fallback) {
7240
- if (this.state.errorInfo) return this.props.fallback(this.state.error, this.state.errorInfo);
7241
- return null;
7242
- }
7243
- return /* @__PURE__ */ jsx("div", {
7244
- className: this.props.className,
7245
- "data-testid": "error-boundary",
7246
- children: /* @__PURE__ */ jsx(SmartErrorHandler, {
7247
- error: this.state.error,
7248
- onAction: this.props.onAction
7249
- })
7250
- });
6746
+ },
6747
+ "8453": {
6748
+ chainId: 8453,
6749
+ openseaId: "base",
6750
+ name: "Base",
6751
+ nativeCurrency: {
6752
+ symbol: "ETH",
6753
+ address: zeroAddress
6754
+ },
6755
+ wrappedNativeCurrency: { address: "0x4200000000000000000000000000000000000006" },
6756
+ offerCurrency: {
6757
+ symbol: "WETH",
6758
+ address: "0x4200000000000000000000000000000000000006"
6759
+ },
6760
+ listingCurrency: {
6761
+ symbol: "ETH",
6762
+ address: zeroAddress
7251
6763
  }
7252
- return this.props.children;
7253
- }
7254
- };
7255
-
7256
- //#endregion
7257
- //#region src/react/ui/modals/_internal/components/baseModal/ErrorModal.tsx
7258
- /**
7259
- * ErrorModal - Specialized modal for error states
7260
- *
7261
- * Improvements over the original wrapper:
7262
- * - Built on BaseModal foundation
7263
- * - Smart error handling integration
7264
- * - Optional retry functionality
7265
- * - Fallback to simple message display
7266
- */
7267
- const ErrorModal = ({ onClose, title, chainId, error, message, onRetry, onErrorAction }) => /* @__PURE__ */ jsx(BaseModal, {
7268
- onClose,
7269
- title,
7270
- chainId,
7271
- children: /* @__PURE__ */ jsx("div", {
7272
- className: "flex items-center justify-center p-4",
7273
- "data-testid": "error-modal",
7274
- children: error ? /* @__PURE__ */ jsx(SmartErrorHandler, {
7275
- error,
7276
- onAction: onErrorAction || (onRetry ? () => onRetry() : void 0)
7277
- }) : /* @__PURE__ */ jsx(Text, {
7278
- className: "font-body",
7279
- color: "text80",
7280
- children: message || "Error loading item details"
7281
- })
7282
- })
7283
- });
7284
-
7285
- //#endregion
7286
- //#region src/react/ui/modals/_internal/components/baseModal/LoadingModal.tsx
7287
- const LoadingModal = ({ onClose, title, chainId, disableAnimation = true, message }) => /* @__PURE__ */ jsx(BaseModal, {
7288
- onClose,
7289
- title,
7290
- chainId,
7291
- disableAnimation,
7292
- children: /* @__PURE__ */ jsxs("div", {
7293
- className: "flex flex-col items-center justify-center gap-4 p-4",
7294
- "data-testid": "loading-modal",
7295
- children: [/* @__PURE__ */ jsx(Spinner, { size: "lg" }), message && /* @__PURE__ */ jsx("p", {
7296
- className: "text-center text-sm text-text-80",
7297
- children: message
7298
- })]
7299
- })
7300
- });
7301
-
7302
- //#endregion
7303
- //#region src/react/ui/modals/BuyModal/components/sequence-checkout/ERC1155QuantityModal.tsx
7304
- const ERC1155QuantityModal = ({ order, quantityRemaining, unlimitedSupply, salePrice, chainId, cardType }) => {
7305
- const minQuantity = 1n;
7306
- const [quantity, setQuantity] = useState(minQuantity);
7307
- const [localInvalidQuantity, setLocalInvalidQuantity] = useState(false);
7308
- const maxQuantity = unlimitedSupply ? maxUint256 : quantityRemaining;
7309
- const invalidQuantity = maxQuantity < minQuantity || localInvalidQuantity;
7310
- const handleSetQuantity = () => {
7311
- buyModalStore.send({
7312
- type: "setQuantity",
7313
- quantity: Number(quantity)
7314
- });
7315
- buyModalStore.send({ type: "openPaymentModal" });
7316
- };
7317
- return /* @__PURE__ */ jsx(ActionModal, {
7318
- chainId,
7319
- onClose: () => buyModalStore.send({ type: "close" }),
7320
- title: "Select Quantity",
7321
- disableAnimation: true,
7322
- type: "buy",
7323
- queries: {},
7324
- primaryAction: {
7325
- label: "Buy now",
7326
- onClick: handleSetQuantity,
7327
- disabled: invalidQuantity
6764
+ },
6765
+ "33139": {
6766
+ chainId: 33139,
6767
+ openseaId: "ape_chain",
6768
+ name: "ApeChain",
6769
+ nativeCurrency: {
6770
+ symbol: "APE",
6771
+ address: zeroAddress
7328
6772
  },
7329
- secondaryAction: {
7330
- label: "Cancel",
7331
- variant: "secondary",
7332
- onClick: () => buyModalStore.send({ type: "close" })
6773
+ wrappedNativeCurrency: { address: "0x48b62137edfa95a428d35c09e44256a739f6b557" },
6774
+ offerCurrency: {
6775
+ symbol: "WAPE",
6776
+ address: "0x48b62137edfa95a428d35c09e44256a739f6b557"
6777
+ },
6778
+ listingCurrency: {
6779
+ symbol: "APE",
6780
+ address: zeroAddress
6781
+ }
6782
+ },
6783
+ "42161": {
6784
+ chainId: 42161,
6785
+ openseaId: "arbitrum",
6786
+ name: "Arbitrum",
6787
+ nativeCurrency: {
6788
+ symbol: "ETH",
6789
+ address: zeroAddress
6790
+ },
6791
+ wrappedNativeCurrency: { address: "0x82af49447d8a07e3bd95bd0d56f35241523fbab1" },
6792
+ offerCurrency: {
6793
+ symbol: "WETH",
6794
+ address: "0x82af49447d8a07e3bd95bd0d56f35241523fbab1"
6795
+ },
6796
+ listingCurrency: {
6797
+ symbol: "ETH",
6798
+ address: zeroAddress
6799
+ }
6800
+ },
6801
+ "42170": {
6802
+ chainId: 42170,
6803
+ openseaId: "arbitrum_nova",
6804
+ name: "Arbitrum Nova",
6805
+ nativeCurrency: {
6806
+ symbol: "ETH",
6807
+ address: zeroAddress
6808
+ },
6809
+ wrappedNativeCurrency: { address: "0x722e8bdd2ce80a4422e880164f2079488e115365" },
6810
+ offerCurrency: {
6811
+ symbol: "WETH",
6812
+ address: "0x722e8bdd2ce80a4422e880164f2079488e115365"
6813
+ },
6814
+ listingCurrency: {
6815
+ symbol: "ETH",
6816
+ address: zeroAddress
6817
+ }
6818
+ },
6819
+ "43114": {
6820
+ chainId: 43114,
6821
+ openseaId: "avalanche",
6822
+ name: "Avalanche",
6823
+ nativeCurrency: {
6824
+ symbol: "AVAX",
6825
+ address: zeroAddress
6826
+ },
6827
+ wrappedNativeCurrency: { address: "0xb31f66aa3c1e785363f0875a1b74e27b85fd66c7" },
6828
+ offerCurrency: {
6829
+ symbol: "WAVAX",
6830
+ address: "0xb31f66aa3c1e785363f0875a1b74e27b85fd66c7"
6831
+ },
6832
+ listingCurrency: {
6833
+ symbol: "AVAX",
6834
+ address: zeroAddress
6835
+ }
6836
+ },
6837
+ "43419": {
6838
+ chainId: 43419,
6839
+ openseaId: "gunzilla",
6840
+ name: "GUNZ",
6841
+ nativeCurrency: {
6842
+ symbol: "GUN",
6843
+ address: zeroAddress
6844
+ },
6845
+ wrappedNativeCurrency: { address: "0x5aad7bba61d95c2c4e525a35f4062040264611f1" },
6846
+ offerCurrency: {
6847
+ symbol: "WGUN",
6848
+ address: "0x5aad7bba61d95c2c4e525a35f4062040264611f1"
7333
6849
  },
7334
- children: () => {
7335
- return /* @__PURE__ */ jsxs("div", {
7336
- className: "flex w-full flex-col gap-4",
7337
- children: [/* @__PURE__ */ jsx(QuantityInput, {
7338
- quantity,
7339
- invalidQuantity,
7340
- onQuantityChange: setQuantity,
7341
- onInvalidQuantityChange: setLocalInvalidQuantity,
7342
- maxQuantity
7343
- }), /* @__PURE__ */ jsx(TotalPrice, {
7344
- order,
7345
- quantity,
7346
- salePrice,
7347
- chainId,
7348
- cardType
7349
- })]
7350
- });
6850
+ listingCurrency: {
6851
+ symbol: "GUN",
6852
+ address: zeroAddress
7351
6853
  }
7352
- });
7353
- };
7354
- const TotalPrice = ({ order, quantity, salePrice, chainId, cardType }) => {
7355
- const isShop = cardType === "shop";
7356
- const isMarket = cardType === "market";
7357
- const { data: marketplaceConfig } = useMarketplaceConfig();
7358
- const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
7359
- chainId,
7360
- currencyAddress: order ? order.priceCurrencyAddress : salePrice?.currencyAddress
7361
- });
7362
- let error = null;
7363
- let formattedPrice = "0";
7364
- if (isMarket && currency && order) try {
7365
- const marketplaceFeePercentage = (marketplaceConfig?.market?.collections?.find((col) => col.itemsAddress.toLowerCase() === order.collectionContractAddress.toLowerCase() && col.chainId === chainId))?.feePercentage ?? DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
7366
- formattedPrice = formatPriceWithFee(BigInt(order.priceAmount) * quantity, currency.decimals, marketplaceFeePercentage);
7367
- } catch (e) {
7368
- console.error("Error formatting price", e);
7369
- error = "Unable to calculate total price";
7370
- }
7371
- if (isShop && salePrice && currency) formattedPrice = formatPriceWithFee(BigInt(salePrice.amount) * quantity, currency.decimals, 0);
7372
- return error ? /* @__PURE__ */ jsx(Text, {
7373
- className: "font-body font-medium text-xs",
7374
- color: "text50",
7375
- children: error
7376
- }) : /* @__PURE__ */ jsxs("div", {
7377
- className: "flex justify-between",
7378
- children: [/* @__PURE__ */ jsx(Text, {
7379
- className: "font-body font-medium text-xs",
7380
- color: "text50",
7381
- children: "Total Price"
7382
- }), /* @__PURE__ */ jsx("div", {
7383
- className: "flex items-center gap-0.5",
7384
- children: !currency || isCurrencyLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-12" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
7385
- currency?.imageUrl && /* @__PURE__ */ jsx(TokenImage, {
7386
- src: currency.imageUrl,
7387
- size: "xs"
7388
- }),
7389
- /* @__PURE__ */ jsx(Text, {
7390
- className: "font-body font-bold text-text-100 text-xs",
7391
- children: formattedPrice
7392
- }),
7393
- /* @__PURE__ */ jsx(Text, {
7394
- className: "font-body font-bold text-text-80 text-xs",
7395
- children: currency?.symbol
7396
- })
7397
- ] })
7398
- })]
7399
- });
7400
- };
7401
-
7402
- //#endregion
7403
- //#region ../api/src/adapters/marketplace/marketplace.gen.ts
7404
- let StepType$1 = /* @__PURE__ */ function(StepType$2) {
7405
- StepType$2["unknown"] = "unknown";
7406
- StepType$2["tokenApproval"] = "tokenApproval";
7407
- StepType$2["buy"] = "buy";
7408
- StepType$2["sell"] = "sell";
7409
- StepType$2["createListing"] = "createListing";
7410
- StepType$2["createOffer"] = "createOffer";
7411
- StepType$2["signEIP712"] = "signEIP712";
7412
- StepType$2["signEIP191"] = "signEIP191";
7413
- StepType$2["cancel"] = "cancel";
7414
- return StepType$2;
7415
- }({});
7416
-
7417
- //#endregion
7418
- //#region src/utils/decode/erc20.ts
7419
- function decodeERC20Approval(calldata) {
7420
- const decoded = decodeFunctionData({
7421
- abi: erc20Abi,
7422
- data: calldata
7423
- });
7424
- if (decoded.functionName !== "approve") throw new Error("Not an ERC20 approval transaction");
7425
- const [spender, value] = decoded.args;
7426
- return {
7427
- spender,
7428
- value
7429
- };
7430
- }
7431
-
7432
- //#endregion
7433
- //#region src/react/ui/modals/BuyModal/components/sequence-checkout/usePaymentModalParams.ts
7434
- const getBuyCollectableParams = async ({ address, chainId, collectionAddress, tokenId, successActionButtons, priceCurrencyAddress, customCreditCardProviderCallback, marketplaceKind, orderId, quantity, skipNativeBalanceCheck, nativeTokenAddress, buyAnalyticsId, onRampProvider, checkoutMode, steps, marketplaceType }) => {
7435
- const checkoutOptions = typeof checkoutMode === "object" ? checkoutMode.options : void 0;
7436
- const buyStep = steps?.find((step) => step.id === StepType$1.buy);
7437
- const approveStep = steps?.find((step) => step.id === StepType$1.tokenApproval);
7438
- const approvedSpenderAddress = approveStep ? decodeERC20Approval(approveStep.data).spender : void 0;
7439
- if (!buyStep) throw new Error("Buy step not found");
7440
- const creditCardProviders = customCreditCardProviderCallback ? ["custom"] : checkoutOptions?.nftCheckout || [];
7441
- const supplementaryAnalyticsInfo = marketplaceType === "market" ? {
7442
- requestId: orderId,
7443
- ...marketplaceKind && { marketplaceKind },
7444
- buyAnalyticsId
7445
- } : { marketplaceType: "shop" };
7446
- const totalPrice = BigInt(buyStep.price) * BigInt(quantity);
7447
- return {
7448
- chain: chainId,
7449
- collectibles: [{
7450
- tokenId: tokenId?.toString() ?? "",
7451
- quantity: quantity.toString()
7452
- }],
7453
- currencyAddress: priceCurrencyAddress,
7454
- price: totalPrice.toString(),
7455
- targetContractAddress: buyStep.to,
7456
- approvedSpenderAddress,
7457
- txData: buyStep.data,
7458
- collectionAddress,
7459
- recipientAddress: address,
7460
- creditCardProviders,
7461
- supplementaryAnalyticsInfo,
7462
- onClose: () => {
7463
- getQueryClient().invalidateQueries({ predicate: (query) => !query.meta?.persistent });
7464
- buyModalStore.send({ type: "close" });
6854
+ },
6855
+ "50311": {
6856
+ chainId: 50311,
6857
+ openseaId: "somnia",
6858
+ name: "Somnia",
6859
+ nativeCurrency: {
6860
+ symbol: "SOMI",
6861
+ address: zeroAddress
7465
6862
  },
7466
- skipNativeBalanceCheck,
7467
- nativeTokenAddress,
7468
- ...customCreditCardProviderCallback && { customProviderCallback: () => {
7469
- customCreditCardProviderCallback(buyStep);
7470
- buyModalStore.send({ type: "close" });
7471
- } },
7472
- onRampProvider,
7473
- successActionButtons
7474
- };
7475
- };
7476
- const usePaymentModalParams = (args) => {
7477
- const { marketplaceKind, priceCurrencyAddress, quantity, steps, marketplaceType } = args;
7478
- const buyModalProps = useBuyModalProps();
7479
- const { checkoutMode } = useBuyModalContext();
7480
- const { chainId, collectionAddress, skipNativeBalanceCheck, nativeTokenAddress, onRampProvider, successActionButtons } = buyModalProps;
7481
- const tokenId = isMarketProps(buyModalProps) ? buyModalProps.tokenId : buyModalProps.item.tokenId;
7482
- const orderId = isMarketProps(buyModalProps) ? buyModalProps.orderId : "";
7483
- const customCreditCardProviderCallback = isMarketProps(buyModalProps) ? buyModalProps.customCreditCardProviderCallback : void 0;
7484
- const buyAnalyticsId = useBuyAnalyticsId();
7485
- const { address } = useAccount();
7486
- return useQuery({
7487
- queryKey: [
7488
- "buyCollectableParams",
7489
- buyModalProps,
7490
- args
7491
- ],
7492
- queryFn: !!address && !!priceCurrencyAddress && !!quantity && !!steps && (marketplaceType === "market" ? !!marketplaceKind : true) ? () => getBuyCollectableParams({
7493
- chainId,
7494
- address,
7495
- collectionAddress,
7496
- tokenId,
7497
- marketplaceKind,
7498
- orderId,
7499
- quantity,
7500
- priceCurrencyAddress,
7501
- successActionButtons,
7502
- customCreditCardProviderCallback,
7503
- skipNativeBalanceCheck,
7504
- nativeTokenAddress,
7505
- buyAnalyticsId,
7506
- onRampProvider,
7507
- checkoutMode,
7508
- steps,
7509
- marketplaceType
7510
- }) : skipToken,
7511
- retry: false
7512
- });
7513
- };
7514
-
7515
- //#endregion
7516
- //#region src/react/ui/modals/BuyModal/components/sequence-checkout/SequenceCheckoutNew.tsx
7517
- const SequenceCheckout = ({ steps, contractType, primarySaleItem }) => {
7518
- const modalProps = useBuyModalProps();
7519
- const isMarket = isMarketProps(modalProps);
7520
- const isShop = isShopProps(modalProps);
7521
- const paymentModalState = usePaymentModalState();
7522
- const { chainId, collectionAddress, hideQuantitySelector } = modalProps;
7523
- const orderId = isMarket ? modalProps.orderId : "";
7524
- const marketplaceKind = isMarket ? modalProps.marketplace : void 0;
7525
- const { data: marketOrders } = useOrders({
7526
- chainId,
7527
- input: marketplaceKind && orderId ? [{
7528
- contractAddress: collectionAddress,
7529
- orderId,
7530
- marketplace: marketplaceKind
7531
- }] : [],
7532
- query: { enabled: isMarket && !!orderId && !!marketplaceKind }
7533
- });
7534
- const marketOrder = marketOrders?.orders[0];
7535
- const paymentModalParams = usePaymentModalParams({
7536
- quantity: useQuantity(),
7537
- marketplaceKind,
7538
- priceCurrencyAddress: isMarket ? marketOrder?.priceCurrencyAddress : primarySaleItem?.currencyAddress,
7539
- steps,
7540
- marketplaceType: isMarket ? "market" : "shop"
7541
- });
7542
- if (!hideQuantitySelector && contractType === ContractType$1.ERC1155 && paymentModalState === "idle") {
7543
- const quantityRemaining = isMarket ? marketOrder?.quantityRemaining : primarySaleItem?.supply;
7544
- const unlimitedSupply = isShop && primarySaleItem?.unlimitedSupply ? primarySaleItem?.unlimitedSupply : false;
7545
- return /* @__PURE__ */ jsx(ERC1155QuantityModal, {
7546
- order: marketOrder,
7547
- cardType: isMarket ? "market" : "shop",
7548
- salePrice: isShop ? {
7549
- amount: primarySaleItem?.priceAmount || 0n,
7550
- currencyAddress: primarySaleItem?.currencyAddress
7551
- } : void 0,
7552
- quantityRemaining: quantityRemaining ?? 0n,
7553
- unlimitedSupply,
7554
- chainId
7555
- });
7556
- }
7557
- if (paymentModalState === "closed") return null;
7558
- return /* @__PURE__ */ jsx(ActionModal, {
7559
- onClose: () => {
7560
- buyModalStore.send({ type: "close" });
6863
+ wrappedNativeCurrency: { address: "0x046ede9564a72571df6f5e44d0405360c0f4dcab" },
6864
+ offerCurrency: {
6865
+ symbol: "WSOMI",
6866
+ address: "0x046ede9564a72571df6f5e44d0405360c0f4dcab"
7561
6867
  },
7562
- type: "buy",
7563
- chainId,
7564
- queries: { paymentModalParams },
7565
- title: "Checkout",
7566
- onErrorDismiss: () => {
7567
- buyModalStore.send({ type: "close" });
6868
+ listingCurrency: {
6869
+ symbol: "SOMI",
6870
+ address: zeroAddress
6871
+ }
6872
+ },
6873
+ "80094": {
6874
+ chainId: 80094,
6875
+ openseaId: "bera_chain",
6876
+ name: "Berachain",
6877
+ nativeCurrency: {
6878
+ symbol: "BERA",
6879
+ address: zeroAddress
7568
6880
  },
7569
- onErrorAction: () => {
7570
- buyModalStore.send({ type: "close" });
6881
+ wrappedNativeCurrency: { address: "0x6969696969696969696969696969696969696969" },
6882
+ offerCurrency: {
6883
+ symbol: "WBERA",
6884
+ address: "0x6969696969696969696969696969696969696969"
7571
6885
  },
7572
- children: ({ paymentModalParams: paymentModalParams$1 }) => {
7573
- if (!steps) return /* @__PURE__ */ jsxs("div", {
7574
- className: "flex h-24 items-center justify-center gap-4",
7575
- children: [/* @__PURE__ */ jsx(Spinner, { size: "lg" }), /* @__PURE__ */ jsx(Text, {
7576
- className: "pulse",
7577
- children: "Loading checkout"
7578
- })]
7579
- });
7580
- return /* @__PURE__ */ jsx(PaymentModalOpener, { paymentModalParams: paymentModalParams$1 });
6886
+ listingCurrency: {
6887
+ symbol: "BERA",
6888
+ address: zeroAddress
7581
6889
  }
7582
- });
7583
- };
7584
- const PaymentModalOpener = ({ paymentModalParams }) => {
7585
- const { openSelectPaymentModal } = useSelectPaymentModal();
7586
- useEffect(() => {
7587
- if (paymentModalParams) {
7588
- openSelectPaymentModal(paymentModalParams);
7589
- buyModalStore.send({ type: "openPaymentModal" });
6890
+ },
6891
+ "81457": {
6892
+ chainId: 81457,
6893
+ openseaId: "blast",
6894
+ name: "Blast",
6895
+ nativeCurrency: {
6896
+ symbol: "ETH",
6897
+ address: zeroAddress
6898
+ },
6899
+ wrappedNativeCurrency: { address: "0x4300000000000000000000000000000000000004" },
6900
+ offerCurrency: {
6901
+ symbol: "WETH",
6902
+ address: "0x4300000000000000000000000000000000000004"
6903
+ },
6904
+ listingCurrency: {
6905
+ symbol: "ETH",
6906
+ address: zeroAddress
7590
6907
  }
7591
- }, [paymentModalParams, openSelectPaymentModal]);
7592
- return null;
7593
- };
7594
- var SequenceCheckoutNew_default = SequenceCheckout;
7595
-
7596
- //#endregion
7597
- //#region src/react/ui/modals/BuyModal/components/TrailsCss.ts
7598
- /**
7599
- * Custom CSS to style the Trails widget to match the Sequence Marketplace SDK design system.
7600
- *
7601
- * This CSS overrides the Trails widget's default theme variables with Sequence design tokens.
7602
- * The CSS is injected into the Trails widget's shadow DOM via the customCss prop.
7603
- *
7604
- * Note: The ShadowPortal wraps CSS variables in :root/:host selectors, but we provide
7605
- * the full CSS string here including both variable declarations and class overrides.
7606
- *
7607
- * Color mapping (Sequence Design System -> Trails Variables):
7608
- * - seq-color-background-primary (#000000 black) -> trails-bg-primary
7609
- * - seq-color-background-secondary (#18181b zinc-900) -> trails-bg-secondary
7610
- * - seq-color-background-raised (#27272a zinc-800) -> trails-bg-card, trails-bg-tertiary
7611
- * - seq-color-background-muted (#09090b zinc-950) -> used for inputs/dropdowns
7612
- * - seq-color-border-normal (#3f3f46 zinc-700) -> trails-border-primary
7613
- * - seq-color-border-hover (#52525b zinc-600) -> trails-border-secondary
7614
- * - seq-color-border-focus (#8b5cf6 violet-500) -> focus borders
7615
- */
7616
- const TRAILS_CUSTOM_CSS = `
7617
- }
7618
-
7619
- /* ========================================
7620
- * CSS Variable Overrides - Match Sequence Design System
7621
- * These are wrapped in :root/:host by ShadowPortal
7622
- * ======================================== */
7623
-
7624
- :root, :host, [data-theme="dark"] {
7625
- /* Background Colors */
7626
- --trails-bg-primary: rgb(0 0 0) !important;
7627
- --trails-bg-secondary: rgb(24 24 27) !important;
7628
- --trails-bg-secondary-hover: rgb(39 39 42) !important;
7629
- --trails-bg-secondary-focus-border: rgb(63 63 70) !important;
7630
- --trails-bg-tertiary: rgb(39 39 42) !important;
7631
- --trails-bg-card: rgb(24 24 27) !important;
7632
- --trails-bg-overlay: rgb(0 0 0) !important;
7633
-
7634
- /* Text Colors */
7635
- --trails-text-primary: rgb(255 255 255) !important;
7636
- --trails-text-secondary: rgba(255 255 255 / 0.8) !important;
7637
- --trails-text-tertiary: rgba(255 255 255 / 0.6) !important;
7638
- --trails-text-muted: rgb(113 113 122) !important;
7639
- --trails-text-inverse: rgb(0 0 0) !important;
7640
-
7641
- /* Border Colors */
7642
- --trails-border-primary: rgb(63 63 70) !important;
7643
- --trails-border-secondary: rgb(82 82 91) !important;
7644
- --trails-border-tertiary: rgb(39 39 42) !important;
7645
-
7646
- /* Interactive Colors */
7647
- --trails-hover-bg: rgb(24 24 27) !important;
7648
- --trails-hover-text: rgb(255 255 255) !important;
7649
-
7650
- /* Input Field Colors */
7651
- --trails-input-bg: rgb(0 0 0) !important;
7652
- --trails-input-border: rgb(39 39 42) !important;
7653
- --trails-input-text: rgb(255 255 255) !important;
7654
- --trails-input-placeholder: rgb(113 113 122) !important;
7655
- --trails-input-focus-border: rgb(139 92 246) !important;
7656
-
7657
- /* Dropdown Colors */
7658
- --trails-dropdown-bg: rgb(0 0 0) !important;
7659
- --trails-dropdown-border: rgb(39 39 42) !important;
7660
- --trails-dropdown-text: rgb(255 255 255) !important;
7661
- --trails-dropdown-hover-bg: rgb(24 24 27) !important;
7662
- --trails-dropdown-selected-bg: rgb(39 39 42) !important;
7663
- --trails-dropdown-selected-text: rgb(255 255 255) !important;
7664
- --trails-dropdown-focus-border: rgb(139 92 246) !important;
7665
-
7666
- /* Modal Button Colors */
7667
- --trails-modal-button-bg: transparent !important;
7668
- --trails-modal-button-hover-bg: rgba(255 255 255 / 0.1) !important;
7669
- --trails-modal-button-text: rgb(255 255 255) !important;
7670
- --trails-modal-button-shadow: 0 1px 2px 0 rgba(0 0 0 / 0.1) !important;
7671
-
7672
- /* Token List Colors */
7673
- --trails-list-bg: rgb(0 0 0) !important;
7674
- --trails-list-border: rgb(39 39 42) !important;
7675
- --trails-list-hover-bg: rgb(24 24 27) !important;
7676
- --trails-list-item-bg: transparent !important;
7677
- --trails-list-item-selected-bg: rgb(39 39 42) !important;
7678
-
7679
- /* Widget Border and Radius */
7680
- --trails-widget-border: none !important;
7681
- --trails-border-radius-widget: 24px !important;
7682
- --trails-border-radius-button: 8px !important;
7683
- --trails-border-radius-input: 8px !important;
7684
- --trails-border-radius-dropdown: 8px !important;
7685
- --trails-border-radius-container: 8px !important;
7686
- --trails-border-radius-list: 8px !important;
7687
- --trails-border-radius-list-button: 8px !important;
7688
- --trails-border-radius-large-button: 8px !important;
7689
-
7690
- /* Status Colors */
7691
- --trails-success-bg: rgba(34 197 94 / 0.2) !important;
7692
- --trails-success-text: rgb(34 197 94) !important;
7693
- --trails-success-border: rgba(34 197 94 / 0.3) !important;
7694
-
7695
- --trails-warning-bg: rgba(234 179 8 / 0.2) !important;
7696
- --trails-warning-text: rgb(234 179 8) !important;
7697
- --trails-warning-border: rgba(234 179 8 / 0.3) !important;
7698
-
7699
- --trails-error-bg: rgba(239 68 68 / 0.2) !important;
7700
- --trails-error-text: rgb(239 68 68) !important;
7701
- --trails-error-border: rgba(239 68 68 / 0.3) !important;
7702
-
7703
- /* Shadow */
7704
- --trails-shadow: 0 4px 6px -1px rgba(0 0 0 / 0.1), 0 2px 4px -1px rgba(0 0 0 / 0.06) !important;
7705
-
7706
- /* Primary Button */
7707
- --trails-primary: rgb(255 255 255) !important;
7708
- --trails-primary-hover: rgba(255 255 255 / 0.9) !important;
7709
- --trails-primary-disabled: rgb(63 63 70) !important;
7710
- --trails-primary-disabled-text: rgb(113 113 122) !important;
7711
-
7712
- /* Percentage Button Colors */
7713
- --trails-percentage-button-bg: rgb(24 24 27) !important;
7714
- --trails-percentage-button-text: rgb(161 161 170) !important;
7715
- --trails-percentage-button-hover-bg: rgb(39 39 42) !important;
7716
-
7717
- /* Font Family */
7718
- --trails-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
7719
- }
7720
-
7721
- /* ========================================
7722
- * Direct Tailwind Class Overrides
7723
- * Override hard-coded Tailwind classes used in Trails components
7724
- * ======================================== */
7725
-
7726
- /* White backgrounds -> black */
7727
- .bg-white,
7728
- .dark\\:bg-gray-900 {
7729
- background-color: rgb(0 0 0) !important;
7730
- }
7731
-
7732
- /* Gray-800 backgrounds -> black */
7733
- .bg-gray-800,
7734
- .dark\\:bg-gray-800 {
7735
- background-color: rgb(0 0 0) !important;
7736
- }
7737
-
7738
- /* Gray-700 backgrounds -> zinc-800 */
7739
- .bg-gray-700,
7740
- .dark\\:bg-gray-700 {
7741
- background-color: rgb(39 39 42) !important;
7742
- }
7743
-
7744
- /* Hover states */
7745
- .hover\\:bg-gray-50:hover {
7746
- background-color: rgb(24 24 27) !important;
7747
- }
7748
-
7749
- .dark\\:hover\\:bg-gray-800:hover {
7750
- background-color: rgb(24 24 27) !important;
7751
- }
7752
-
7753
- .dark\\:hover\\:bg-gray-700:hover {
7754
- background-color: rgb(39 39 42) !important;
7755
- }
7756
-
7757
- /* Focus states */
7758
- .focus-within\\:\\!bg-white:focus-within {
7759
- background-color: rgb(0 0 0) !important;
7760
- }
7761
-
7762
- .dark\\:focus-within\\:\\!bg-gray-800:focus-within {
7763
- background-color: rgb(0 0 0) !important;
7764
- }
7765
-
7766
- /* Border colors */
7767
- .border-gray-200 {
7768
- border-color: rgb(39 39 42) !important;
7769
- }
7770
-
7771
- .dark\\:border-gray-700 {
7772
- border-color: rgb(39 39 42) !important;
7773
- }
7774
-
7775
- .border-gray-300 {
7776
- border-color: rgb(63 63 70) !important;
7777
- }
7778
-
7779
- .dark\\:border-gray-600 {
7780
- border-color: rgb(63 63 70) !important;
7781
- }
7782
-
7783
- /* Text colors */
7784
- .text-gray-900 {
7785
- color: rgb(255 255 255) !important;
7786
- }
7787
-
7788
- .dark\\:text-white {
7789
- color: rgb(255 255 255) !important;
7790
- }
7791
-
7792
- .text-gray-500,
7793
- .dark\\:text-gray-400 {
7794
- color: rgb(161 161 170) !important;
7795
- }
7796
-
7797
- .text-black,
7798
- .dark\\:text-blue-300 {
7799
- color: rgb(255 255 255) !important;
6908
+ },
6909
+ "7777777": {
6910
+ chainId: 7777777,
6911
+ openseaId: "zora",
6912
+ name: "Zora",
6913
+ nativeCurrency: {
6914
+ symbol: "ETH",
6915
+ address: zeroAddress
6916
+ },
6917
+ wrappedNativeCurrency: { address: "0x4200000000000000000000000000000000000006" },
6918
+ offerCurrency: {
6919
+ symbol: "WETH",
6920
+ address: "0x4200000000000000000000000000000000000006"
6921
+ },
6922
+ listingCurrency: {
6923
+ symbol: "ETH",
6924
+ address: zeroAddress
6925
+ }
6926
+ }
6927
+ };
6928
+ function getOpenseaCurrencyForChain(chainId, modalType) {
6929
+ const config = OPENSEA_CHAIN_CURRENCIES[chainId.toString()];
6930
+ if (!config) return;
6931
+ return modalType === "listing" ? config.listingCurrency : config.offerCurrency;
7800
6932
  }
7801
6933
 
7802
- /* Primary button gradient - Match Sequence design */
7803
- .bg-blue-500 {
7804
- background: linear-gradient(89.69deg, #4411e1 0.27%, #7537f9 99.73%) !important;
6934
+ //#endregion
6935
+ //#region src/react/ui/modals/BuyModal/internal/buildTrailsMarketBuyActions.ts
6936
+ const WETH_ABI = [{
6937
+ type: "function",
6938
+ name: "withdraw",
6939
+ stateMutability: "nonpayable",
6940
+ inputs: [{
6941
+ name: "wad",
6942
+ type: "uint256"
6943
+ }],
6944
+ outputs: []
6945
+ }];
6946
+ const ERC721_TRANSFER_FROM_ABI = [{
6947
+ type: "function",
6948
+ name: "transferFrom",
6949
+ stateMutability: "nonpayable",
6950
+ inputs: [
6951
+ {
6952
+ name: "from",
6953
+ type: "address"
6954
+ },
6955
+ {
6956
+ name: "to",
6957
+ type: "address"
6958
+ },
6959
+ {
6960
+ name: "tokenId",
6961
+ type: "uint256"
6962
+ }
6963
+ ],
6964
+ outputs: []
6965
+ }];
6966
+ const ERC1155_SAFE_TRANSFER_FROM_ABI = [{
6967
+ type: "function",
6968
+ name: "safeTransferFrom",
6969
+ stateMutability: "nonpayable",
6970
+ inputs: [
6971
+ {
6972
+ name: "from",
6973
+ type: "address"
6974
+ },
6975
+ {
6976
+ name: "to",
6977
+ type: "address"
6978
+ },
6979
+ {
6980
+ name: "id",
6981
+ type: "uint256"
6982
+ },
6983
+ {
6984
+ name: "amount",
6985
+ type: "uint256"
6986
+ },
6987
+ {
6988
+ name: "data",
6989
+ type: "bytes"
6990
+ }
6991
+ ],
6992
+ outputs: []
6993
+ }];
6994
+ const OPENSEA_FULFILL_WITHOUT_RECIPIENT_SELECTORS = new Set(["0xfb0f3ee1", "0xb1b747c3"]);
6995
+ const isNativeCurrency = (currencyAddress) => currencyAddress.toLowerCase() === zeroAddress;
6996
+ const getPaymentAmount = ({ buyStep, marketOrder, isErc20Payment }) => {
6997
+ if (isErc20Payment) return buyStep.price > 0n ? buyStep.price : marketOrder.priceAmount;
6998
+ if (buyStep.value > 0n) return buyStep.value;
6999
+ return buyStep.price > 0n ? buyStep.price : marketOrder.priceAmount;
7000
+ };
7001
+ const getWrappedNativeCurrencyAddress = (chainId) => OPENSEA_CHAIN_CURRENCIES[chainId.toString()]?.wrappedNativeCurrency.address;
7002
+ const buildWrappedNativeWithdrawCall = ({ wrappedNativeAddress, amount }) => ({
7003
+ to: wrappedNativeAddress,
7004
+ data: encodeFunctionData({
7005
+ abi: WETH_ABI,
7006
+ functionName: "withdraw",
7007
+ args: [amount]
7008
+ })
7009
+ });
7010
+ const isOpenSeaFulfillWithoutRecipient = (calldata) => OPENSEA_FULFILL_WITHOUT_RECIPIENT_SELECTORS.has(calldata.slice(0, 10).toLowerCase());
7011
+ const buildOpenSeaNftTransferCall = ({ marketOrder, contractType, recipientAddress, quantity }) => {
7012
+ if (marketOrder.tokenId === void 0) return;
7013
+ const collectionAddress = marketOrder.collectionContractAddress;
7014
+ const executorAddress = self();
7015
+ if (contractType === ContractType$1.ERC1155) return {
7016
+ to: collectionAddress,
7017
+ data: encodeFunctionData({
7018
+ abi: ERC1155_SAFE_TRANSFER_FROM_ABI,
7019
+ functionName: "safeTransferFrom",
7020
+ args: [
7021
+ executorAddress,
7022
+ recipientAddress,
7023
+ marketOrder.tokenId,
7024
+ quantity,
7025
+ "0x"
7026
+ ]
7027
+ })
7028
+ };
7029
+ return {
7030
+ to: collectionAddress,
7031
+ data: encodeFunctionData({
7032
+ abi: ERC721_TRANSFER_FROM_ABI,
7033
+ functionName: "transferFrom",
7034
+ args: [
7035
+ executorAddress,
7036
+ recipientAddress,
7037
+ marketOrder.tokenId
7038
+ ]
7039
+ })
7040
+ };
7041
+ };
7042
+ function buildTrailsMarketBuyActions({ chainId, buyStep, marketOrder, contractType, recipientAddress, approvalStep, quantity = 1n }) {
7043
+ const calls = [];
7044
+ const currencyAddress = marketOrder.priceCurrencyAddress;
7045
+ const isErc20Payment = !isNativeCurrency(currencyAddress);
7046
+ const paymentAmount = getPaymentAmount({
7047
+ buyStep,
7048
+ marketOrder,
7049
+ isErc20Payment
7050
+ });
7051
+ let paymentTokenAddress = currencyAddress;
7052
+ if (isErc20Payment && paymentAmount > 0n) if (approvalStep) calls.push({
7053
+ to: approvalStep.to,
7054
+ data: approvalStep.data
7055
+ });
7056
+ else {
7057
+ const spenderAddress = getConduitAddressForOrderbook(marketOrder.marketplace);
7058
+ if (spenderAddress) calls.push(buildErc20Approve({
7059
+ tokenAddress: currencyAddress,
7060
+ spender: spenderAddress,
7061
+ amount: paymentAmount
7062
+ }));
7063
+ }
7064
+ else if (!isErc20Payment) {
7065
+ const wrappedNativeAddress = getWrappedNativeCurrencyAddress(chainId);
7066
+ if (!wrappedNativeAddress) return;
7067
+ paymentTokenAddress = wrappedNativeAddress;
7068
+ if (paymentAmount > 0n) calls.push(buildWrappedNativeWithdrawCall({
7069
+ wrappedNativeAddress,
7070
+ amount: paymentAmount
7071
+ }));
7072
+ }
7073
+ calls.push({
7074
+ to: buyStep.to,
7075
+ data: buyStep.data,
7076
+ ...!isErc20Payment && paymentAmount > 0n ? {
7077
+ value: paymentAmount,
7078
+ sweepTokens: [zeroAddress]
7079
+ } : {}
7080
+ });
7081
+ if (normalizeMarketplaceKind(marketOrder.marketplace) === MarketplaceKind.opensea && isOpenSeaFulfillWithoutRecipient(buyStep.data)) {
7082
+ const nftTransferCall = buildOpenSeaNftTransferCall({
7083
+ marketOrder,
7084
+ contractType,
7085
+ recipientAddress,
7086
+ quantity
7087
+ });
7088
+ if (nftTransferCall) calls.push(nftTransferCall);
7089
+ }
7090
+ return {
7091
+ calls,
7092
+ paymentTokenAddress,
7093
+ paymentAmount
7094
+ };
7805
7095
  }
7806
7096
 
7807
- .hover\\:bg-blue-600:hover {
7808
- background: linear-gradient(89.69deg, #3a0ec7 0.27%, #6229e0 99.73%) !important;
7809
- opacity: 0.9;
7097
+ //#endregion
7098
+ //#region src/react/ui/modals/BuyModal/internal/determineCheckoutMode.ts
7099
+ function determineCheckoutMode({ checkoutModeConfig, isChainSupported, canBeUsedWithTrails }) {
7100
+ if (checkoutModeConfig === "trails" && isChainSupported && canBeUsedWithTrails) return "trails";
7101
+ if (checkoutModeConfig === "trails" && isChainSupported && !canBeUsedWithTrails) return "crypto";
7102
+ if (checkoutModeConfig === "trails" && !isChainSupported) return "crypto";
7103
+ if (typeof checkoutModeConfig === "object" && checkoutModeConfig.mode === "sequence-checkout") return {
7104
+ mode: "sequence-checkout",
7105
+ options: checkoutModeConfig.options
7106
+ };
7107
+ if (checkoutModeConfig === "crypto") return "crypto";
7810
7108
  }
7811
7109
 
7812
- {
7813
- `;
7814
-
7815
7110
  //#endregion
7816
- //#region src/react/ui/modals/BuyModal/components/BuyModalContent.tsx
7817
- const BuyModalContent = () => {
7818
- const { config, modalProps, close, steps, primarySaleItem, marketOrder, collectible, buyStep, isLoading, collection, checkoutMode, formattedAmount, isShop, handleTrailsSuccess, handleTransactionSuccess, error, refetchAll } = useBuyModalContext();
7819
- const currencyAddress = isShop ? primarySaleItem?.currencyAddress : marketOrder?.priceCurrencyAddress;
7820
- const trailsApiUrl = getTrailsApiUrl(config);
7821
- const sequenceIndexerUrl = getSequenceIndexerUrl(config);
7822
- const sequenceNodeGatewayUrl = getSequenceNodeGatewayUrl(config);
7823
- const sequenceApiUrl = getSequenceApiUrl(config);
7824
- if (error) return /* @__PURE__ */ jsx(Modal, {
7825
- isDismissible: false,
7826
- onClose: close,
7827
- overlayProps: MODAL_OVERLAY_PROPS,
7828
- contentProps: {
7829
- style: {
7830
- width: "450px",
7831
- height: "auto"
7832
- },
7833
- className: "overflow-y-auto"
7111
+ //#region src/react/ui/modals/BuyModal/internal/buyModalContext.ts
7112
+ function useBuyModalContext() {
7113
+ const config = useConfig$1();
7114
+ const modalProps = useBuyModalProps();
7115
+ const checkoutModeConfig = config.checkoutMode ?? "trails";
7116
+ const { close } = useBuyModal();
7117
+ const transactionStatusModal = useTransactionStatusModal();
7118
+ const { address: userWalletAddress } = useAccount();
7119
+ const { data: supportedChains = [], isLoading: isLoadingChains } = useSupportedChains();
7120
+ const { collectible, collection, currency, marketOrder, collectionAddress, primarySaleItem, isLoading: isBuyModalDataLoading, isMarket, isShop, error, refetchQueries } = useBuyModalData();
7121
+ const contractType = collection?.type === ContractType$1.ERC1155 ? ContractType$1.ERC1155 : ContractType$1.ERC721;
7122
+ const transactionData = useBuyTransaction({
7123
+ modalProps,
7124
+ primarySalePrice: {
7125
+ amount: primarySaleItem?.priceAmount,
7126
+ currencyAddress: primarySaleItem?.currencyAddress
7834
7127
  },
7835
- children: /* @__PURE__ */ jsx(ModalInitializationError, {
7836
- error,
7837
- onTryAgain: refetchAll,
7838
- onClose: close
7839
- })
7128
+ contractType
7840
7129
  });
7841
- if (typeof checkoutMode === "object" && checkoutMode.mode === "sequence-checkout") return /* @__PURE__ */ jsx(SequenceCheckoutNew_default, {
7842
- steps,
7843
- contractType: collection?.type,
7844
- primarySaleItem
7130
+ const steps = transactionData.data?.steps;
7131
+ const canBeUsedWithTrails = transactionData.data?.canBeUsedWithTrails ?? false;
7132
+ const isLoadingSteps = transactionData.isLoading;
7133
+ const { pendingFeeOptionConfirmation, rejectPendingFeeOption } = useWaasFeeOptions$1(modalProps.chainId, config);
7134
+ const isChainSupported = supportedChains.some((chain) => chain.id === modalProps.chainId);
7135
+ const isLoading = isLoadingSteps || isLoadingChains || isBuyModalDataLoading;
7136
+ const buyStep = steps ? findBuyStep(steps) : void 0;
7137
+ const approvalStep = steps ? findApprovalStep(steps) : void 0;
7138
+ const trailsDestination = useMemo(() => {
7139
+ if (!isMarket || !marketOrder || !buyStep || !userWalletAddress) return;
7140
+ const trailsMarketBuyActions = buildTrailsMarketBuyActions({
7141
+ chainId: modalProps.chainId,
7142
+ buyStep,
7143
+ marketOrder,
7144
+ contractType,
7145
+ recipientAddress: userWalletAddress,
7146
+ approvalStep
7147
+ });
7148
+ if (!trailsMarketBuyActions) return;
7149
+ const destination = encodeDestinationCalls({
7150
+ calls: trailsMarketBuyActions.calls,
7151
+ tokenAddress: trailsMarketBuyActions.paymentTokenAddress,
7152
+ sweepTarget: userWalletAddress
7153
+ });
7154
+ return {
7155
+ recipient: destination.recipient,
7156
+ destinationCalldata: destination.destinationCalldata,
7157
+ paymentTokenAddress: trailsMarketBuyActions.paymentTokenAddress,
7158
+ paymentAmount: trailsMarketBuyActions.paymentAmount
7159
+ };
7160
+ }, [
7161
+ approvalStep,
7162
+ buyStep,
7163
+ contractType,
7164
+ isMarket,
7165
+ marketOrder,
7166
+ modalProps.chainId,
7167
+ userWalletAddress
7168
+ ]);
7169
+ const checkoutMode = determineCheckoutMode({
7170
+ checkoutModeConfig,
7171
+ isChainSupported,
7172
+ canBeUsedWithTrails
7845
7173
  });
7846
- return /* @__PURE__ */ jsxs(Dialog, {
7847
- open: true,
7848
- onOpenChange: (open) => !open && close(),
7849
- children: [/* @__PURE__ */ jsx(DialogOverlay, { style: MODAL_OVERLAY_PROPS.style }), /* @__PURE__ */ jsx(DialogContent, {
7850
- className: "h-auto w-[450px] overflow-y-auto overflow-x-hidden",
7851
- children: /* @__PURE__ */ jsxs("div", {
7852
- className: "relative flex grow flex-col items-center",
7853
- children: [
7854
- /* @__PURE__ */ jsx(Text, {
7855
- className: "w-full text-center font-body font-bold text-large text-text-100",
7856
- children: "Complete Your Purchase"
7857
- }),
7858
- isLoading && /* @__PURE__ */ jsx("div", {
7859
- className: "flex w-full items-center justify-center py-8",
7860
- children: /* @__PURE__ */ jsxs("div", {
7861
- className: "flex flex-col items-center gap-4",
7862
- children: [/* @__PURE__ */ jsx(Spinner, { size: "lg" }), /* @__PURE__ */ jsx(Text, {
7863
- className: "text-text-80",
7864
- children: "Loading payment options..."
7865
- })]
7866
- })
7867
- }),
7868
- !isLoading && (checkoutMode === "crypto" || isShop && primarySaleItem?.priceAmount === 0n) && steps && steps.length > 0 && /* @__PURE__ */ jsx(CryptoPaymentModal, {
7869
- chainId: modalProps.chainId,
7870
- steps,
7871
- onSuccess: handleTransactionSuccess
7872
- }),
7873
- !isLoading && checkoutMode === "trails" && buyStep && !(isShop && primarySaleItem?.priceAmount === 0n) && /* @__PURE__ */ jsxs("div", {
7874
- className: "pointer-events-auto w-full",
7875
- children: [collectible && /* @__PURE__ */ jsx(CollectibleMetadataSummary, {
7876
- checkoutMode: "trails",
7877
- collectible,
7878
- collection
7879
- }), /* @__PURE__ */ jsx(TrailsWidget, {
7880
- apiKey: config.projectAccessKey,
7881
- trailsApiUrl,
7882
- sequenceIndexerUrl,
7883
- sequenceNodeGatewayUrl,
7884
- sequenceApiUrl,
7885
- walletConnectProjectId: config.walletConnectProjectId,
7886
- toChainId: modalProps.chainId,
7887
- toAddress: buyStep.to,
7888
- toToken: currencyAddress,
7889
- toCalldata: buyStep.data,
7890
- toAmount: formattedAmount,
7891
- renderInline: true,
7892
- theme: "dark",
7893
- mode: "pay",
7894
- customCss: TRAILS_CUSTOM_CSS,
7895
- onDestinationConfirmation: handleTrailsSuccess,
7896
- payMessage: "{TO_TOKEN_IMAGE}{TO_AMOUNT}{TO_TOKEN_SYMBOL}{TO_AMOUNT_USD}"
7174
+ const paymentAmount = trailsDestination?.paymentAmount ?? (buyStep ? buyStep.price > 0n ? buyStep.price : buyStep.value : void 0);
7175
+ const formattedAmount = currency?.decimals !== void 0 && paymentAmount !== void 0 ? formatUnits(paymentAmount, currency.decimals) : void 0;
7176
+ const handleTransactionSuccess = (hash) => {
7177
+ if (!collectible) throw new Error("Collectible not found");
7178
+ if (isMarket && !marketOrder) throw new Error("Order not found");
7179
+ if (!currency) throw new Error("Currency not found");
7180
+ const amountRaw = isMarket ? marketOrder?.priceAmount : primarySaleItem?.priceAmount;
7181
+ if (amountRaw == null) throw new Error("Price amount not found");
7182
+ close();
7183
+ transactionStatusModal.show({
7184
+ hash,
7185
+ orderId: isMarket ? marketOrder?.orderId : void 0,
7186
+ price: {
7187
+ amountRaw,
7188
+ currency
7189
+ },
7190
+ collectionAddress,
7191
+ chainId: modalProps.chainId,
7192
+ tokenId: collectible.tokenId,
7193
+ type: TransactionType$1.BUY
7194
+ });
7195
+ };
7196
+ const handleTrailsSuccess = (data) => {
7197
+ handleTransactionSuccess(data.txHash);
7198
+ };
7199
+ const handleClose = () => {
7200
+ if (pendingFeeOptionConfirmation?.id) {
7201
+ console.log("rejecting pending fee option", pendingFeeOptionConfirmation?.id);
7202
+ rejectPendingFeeOption(pendingFeeOptionConfirmation?.id);
7203
+ }
7204
+ close();
7205
+ };
7206
+ const refetchAll = async () => {
7207
+ await refetchQueries();
7208
+ await transactionData.refetch();
7209
+ };
7210
+ return {
7211
+ config,
7212
+ modalProps,
7213
+ close: handleClose,
7214
+ steps,
7215
+ collectible,
7216
+ collection,
7217
+ primarySaleItem,
7218
+ marketOrder,
7219
+ isMarket,
7220
+ isShop,
7221
+ buyStep,
7222
+ trailsDestination,
7223
+ isLoading,
7224
+ checkoutMode,
7225
+ formattedAmount,
7226
+ handleTransactionSuccess,
7227
+ handleTrailsSuccess,
7228
+ error: error || transactionData.error,
7229
+ refetchAll
7230
+ };
7231
+ }
7232
+
7233
+ //#endregion
7234
+ //#region src/react/ui/modals/BuyModal/components/CollectibleMetadataSummary.tsx
7235
+ const CollectibleMetadataSummary = ({ checkoutMode, collectible, collection, chainId, currency, formattedPrice, renderCurrencyPrice, renderPriceUSD, isMarket }) => {
7236
+ if (!collectible) return null;
7237
+ const isTrails = checkoutMode === "trails";
7238
+ const isCryptoPayment = checkoutMode === "crypto";
7239
+ const imageSize = isTrails ? "h-12 w-12" : "h-[84px] w-[84px]";
7240
+ return /* @__PURE__ */ jsxs("div", {
7241
+ className: isTrails ? "flex w-full items-start gap-4 p-6 pb-0" : "flex items-start gap-4",
7242
+ children: [/* @__PURE__ */ jsx(Media, {
7243
+ assets: [
7244
+ collectible.video,
7245
+ collectible.animation_url,
7246
+ collectible.image
7247
+ ],
7248
+ name: collectible.name,
7249
+ containerClassName: `${imageSize} shrink-0 rounded-lg overflow-hidden object-cover`
7250
+ }), /* @__PURE__ */ jsxs("div", {
7251
+ className: "flex min-w-0 flex-1 flex-col gap-2",
7252
+ children: [isTrails ? /* @__PURE__ */ jsxs("div", {
7253
+ className: "flex flex-col gap-1",
7254
+ children: [/* @__PURE__ */ jsxs("div", {
7255
+ className: "flex items-center gap-2",
7256
+ children: [/* @__PURE__ */ jsx(Text, {
7257
+ className: "truncate font-semibold text-sm text-text-100",
7258
+ children: collectible.name || "Unnamed"
7259
+ }), collectible.tokenId !== void 0 && /* @__PURE__ */ jsxs(Text, {
7260
+ className: "shrink-0 font-bold text-text-50 text-xs",
7261
+ children: ["#", collectible.tokenId.toString()]
7262
+ })]
7263
+ }), collection && /* @__PURE__ */ jsxs("div", {
7264
+ className: "flex items-center gap-2",
7265
+ children: [collection.logoURI && /* @__PURE__ */ jsx("img", {
7266
+ src: collection.logoURI,
7267
+ alt: collection.name,
7268
+ className: "h-4 w-4 shrink-0 rounded-full"
7269
+ }), /* @__PURE__ */ jsx(Text, {
7270
+ className: "truncate font-bold text-text-50 text-xs",
7271
+ children: collection.name
7272
+ })]
7273
+ })]
7274
+ }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
7275
+ className: "flex items-center gap-2",
7276
+ children: [/* @__PURE__ */ jsx(Text, {
7277
+ className: "truncate font-semibold text-sm text-text-100",
7278
+ children: collectible.name
7279
+ }), collectible.tokenId !== void 0 && /* @__PURE__ */ jsxs(Text, {
7280
+ className: "shrink-0 font-bold text-text-50 text-xs",
7281
+ children: ["#", collectible.tokenId.toString()]
7282
+ })]
7283
+ }), collection && /* @__PURE__ */ jsx(Text, {
7284
+ className: "truncate font-bold text-text-50 text-xs",
7285
+ children: collection.name
7286
+ })] }), isCryptoPayment && renderCurrencyPrice && /* @__PURE__ */ jsxs("div", {
7287
+ className: "mt-2 flex flex-col",
7288
+ children: [/* @__PURE__ */ jsx(Tooltip, {
7289
+ message: `${formattedPrice || ""} ${currency?.symbol || ""}`,
7290
+ side: "right",
7291
+ children: /* @__PURE__ */ jsxs("div", {
7292
+ className: "flex items-center gap-1",
7293
+ children: [currency?.imageUrl ? /* @__PURE__ */ jsx("img", {
7294
+ src: currency.imageUrl,
7295
+ alt: currency.symbol,
7296
+ className: "h-5 w-5 rounded-full"
7297
+ }) : chainId ? /* @__PURE__ */ jsx(NetworkImage, {
7298
+ chainId,
7299
+ size: "sm"
7300
+ }) : null, /* @__PURE__ */ jsx(Text, {
7301
+ className: "font-bold text-md",
7302
+ children: renderCurrencyPrice()
7897
7303
  })]
7898
7304
  })
7899
- ]
7900
- })
7305
+ }), isMarket && renderPriceUSD && renderPriceUSD() && /* @__PURE__ */ jsx(Text, {
7306
+ className: "font-bold text-text-50 text-xs",
7307
+ children: renderPriceUSD()
7308
+ })]
7309
+ })]
7901
7310
  })]
7902
7311
  });
7903
7312
  };
7904
7313
 
7905
7314
  //#endregion
7906
- //#region src/react/ui/modals/BuyModal/components/Modal.tsx
7907
- const BuyModal = () => {
7908
- if (!useIsOpen()) return null;
7909
- return /* @__PURE__ */ jsx(BuyModalContent, {});
7910
- };
7911
-
7912
- //#endregion
7913
- //#region src/react/ui/modals/_internal/components/floorPriceText/index.tsx
7914
- function FloorPriceText({ chainId, collectionAddress, tokenId, price, onBuyNow }) {
7915
- const { data: listing, isLoading: listingLoading } = useCollectibleMarketLowestListing({
7916
- tokenId,
7917
- chainId,
7918
- collectionAddress,
7919
- filter: { currencies: [price.currency.contractAddress] }
7920
- });
7921
- const floorPriceRaw = listing?.priceAmount;
7922
- const floorPriceFormatted = listing?.priceAmountFormatted;
7923
- const { data: priceComparison, isLoading: comparisonLoading } = useCurrencyComparePrices({
7924
- chainId,
7925
- priceAmountRaw: price.amountRaw?.toString() || "0",
7926
- priceCurrencyAddress: price.currency.contractAddress,
7927
- compareToPriceAmountRaw: floorPriceRaw?.toString() || "0",
7928
- compareToPriceCurrencyAddress: listing?.priceCurrencyAddress || price.currency.contractAddress,
7929
- query: { enabled: !!floorPriceRaw && !listingLoading && price.amountRaw !== 0n }
7930
- });
7931
- if (!floorPriceRaw || listingLoading || price.amountRaw === 0n || comparisonLoading) return null;
7932
- let floorPriceDifferenceText = "Same as floor price";
7933
- let showBuyNowButton = false;
7934
- if (priceComparison) if (priceComparison.status === "same") {
7935
- floorPriceDifferenceText = "Same as floor price";
7936
- showBuyNowButton = true;
7937
- } else if (priceComparison.status === "below") floorPriceDifferenceText = `${priceComparison.percentageDifferenceFormatted}% below floor price`;
7938
- else {
7939
- floorPriceDifferenceText = `${priceComparison.percentageDifferenceFormatted}% above floor price`;
7940
- showBuyNowButton = true;
7941
- }
7942
- return /* @__PURE__ */ jsxs("div", {
7943
- className: "flex w-full flex-wrap items-center justify-between gap-2",
7944
- children: [/* @__PURE__ */ jsx(Text, {
7945
- className: "text-left font-body font-medium text-muted text-xs",
7946
- children: floorPriceDifferenceText
7947
- }), showBuyNowButton && onBuyNow && /* @__PURE__ */ jsxs(Button, {
7948
- size: "xs",
7949
- variant: "text",
7950
- className: "text-indigo-400 text-xs",
7951
- onClick: onBuyNow,
7315
+ //#region src/react/ui/components/_internals/ErrorLogBox.tsx
7316
+ const ErrorLogBox = ({ title, message, error, onDismiss }) => {
7317
+ const [showFullError, setShowFullError] = useState(false);
7318
+ const toggleFullError = () => {
7319
+ setShowFullError(!showFullError);
7320
+ };
7321
+ return /* @__PURE__ */ jsx("div", {
7322
+ className: "wrap-anywhere relative max-h-96 overflow-y-auto rounded-lg border border-red-900 bg-[#2b0000] p-3",
7323
+ children: /* @__PURE__ */ jsxs("div", {
7324
+ className: "flex items-start gap-3",
7952
7325
  children: [
7953
- "Buy for ",
7954
- floorPriceFormatted,
7955
- " ",
7956
- price.currency.symbol
7326
+ /* @__PURE__ */ jsx(WarningIcon, {
7327
+ className: "absolute mt-0.5 flex-shrink-0 text-red-500",
7328
+ size: "sm"
7329
+ }),
7330
+ /* @__PURE__ */ jsxs("div", {
7331
+ className: "min-w-0 flex-1",
7332
+ children: [/* @__PURE__ */ jsxs("div", {
7333
+ className: "relative ml-10 flex flex-col",
7334
+ children: [/* @__PURE__ */ jsx(Text, {
7335
+ className: "font-bold text-red-400 text-sm",
7336
+ children: title
7337
+ }), /* @__PURE__ */ jsx(Text, {
7338
+ className: "mt-1 text-red-300 text-xs",
7339
+ children: message
7340
+ })]
7341
+ }), error && /* @__PURE__ */ jsxs("div", {
7342
+ className: "mt-2",
7343
+ children: [
7344
+ /* @__PURE__ */ jsxs("button", {
7345
+ onClick: toggleFullError,
7346
+ className: "flex items-center gap-1 text-red-400 text-xs transition-colors hover:text-red-300",
7347
+ type: "button",
7348
+ children: [showFullError ? "Hide full error" : "Show full error", showFullError ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" })]
7349
+ }),
7350
+ showFullError && /* @__PURE__ */ jsx("div", { className: "mt-2 h-px bg-red-900" }),
7351
+ showFullError && /* @__PURE__ */ jsx("div", {
7352
+ className: "mt-2 overflow-auto rounded-md bg-red-950 p-2",
7353
+ children: /* @__PURE__ */ jsxs(Text, {
7354
+ className: "whitespace-pre-wrap break-words font-mono text-red-100 text-xs",
7355
+ children: [
7356
+ error.message,
7357
+ error.stack && /* @__PURE__ */ jsxs(Fragment, { children: ["\n\nStack trace:\n", error.stack] }),
7358
+ JSON.stringify(error, null, 2)
7359
+ ]
7360
+ })
7361
+ })
7362
+ ]
7363
+ })]
7364
+ }),
7365
+ onDismiss && /* @__PURE__ */ jsx("button", {
7366
+ onClick: onDismiss,
7367
+ className: "absolute right-4 flex-shrink-0 text-red-400 transition-colors hover:text-red-300",
7368
+ type: "button",
7369
+ "aria-label": "Dismiss error",
7370
+ children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-3 w-3" })
7371
+ })
7957
7372
  ]
7958
- })]
7373
+ })
7959
7374
  });
7960
- }
7375
+ };
7961
7376
 
7962
7377
  //#endregion
7963
- //#region src/react/ui/components/_internals/custom-select/CustomSelect.tsx
7964
- const CustomSelect = ({ items, onValueChange, defaultValue, placeholder = "Select an option", disabled = false, className, testId = "custom-select" }) => {
7965
- const [selectedItem, setSelectedItem] = useState(defaultValue);
7966
- const handleValueChange = (item) => {
7967
- setSelectedItem(item);
7968
- onValueChange?.(item.value);
7969
- };
7970
- return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
7971
- asChild: true,
7972
- disabled,
7973
- children: /* @__PURE__ */ jsx(Button, {
7974
- size: "xs",
7975
- shape: "circle",
7976
- className: `py-1.5 pl-3 hover:bg-overlay-light ${className || ""}`,
7977
- "data-testid": `${testId}-trigger`,
7978
- children: /* @__PURE__ */ jsxs("div", {
7979
- className: "flex items-center justify-center gap-1 truncate pr-3",
7980
- children: [/* @__PURE__ */ jsx(Text, {
7981
- variant: "xsmall",
7982
- color: "text100",
7983
- fontWeight: "bold",
7984
- children: selectedItem ? selectedItem.content : placeholder
7985
- }), /* @__PURE__ */ jsx(ChevronDownIcon, { size: "xs" })]
7986
- })
7987
- })
7988
- }), /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(DropdownMenuContent, {
7989
- align: "end",
7990
- side: "bottom",
7991
- sideOffset: 8,
7992
- className: "z-[1000] overflow-hidden rounded-xl border border-border-base bg-color-overlay-glass shadow-lg backdrop-blur-md",
7993
- "data-testid": `${testId}-content`,
7994
- children: /* @__PURE__ */ jsx("div", {
7995
- className: "max-h-[240px] overflow-auto",
7996
- children: items.map((item) => /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
7997
- checked: selectedItem?.value === item.value,
7998
- onCheckedChange: () => handleValueChange(item),
7999
- disabled: item.disabled,
8000
- className: "group relative flex cursor-pointer select-none items-center rounded-lg px-2 py-1.5 outline-none transition-colors hover:bg-background-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>span[data-state='checked']]:hidden",
8001
- "data-testid": `${testId}-option-${item.value}`,
8002
- children: /* @__PURE__ */ jsx("div", {
8003
- className: "flex w-full items-center justify-between",
8004
- children: /* @__PURE__ */ jsx("div", {
8005
- className: "flex items-center gap-2 truncate",
8006
- children: typeof item.content === "string" ? /* @__PURE__ */ jsx(Text, {
8007
- variant: "small",
8008
- color: selectedItem?.value === item.value ? "text100" : "text80",
8009
- className: `truncate ${selectedItem?.value === item.value ? "font-bold" : ""}`,
8010
- "data-testid": `${testId}-option-text-${item.value}`,
8011
- children: item.content
8012
- }) : /* @__PURE__ */ jsx("div", {
8013
- className: "truncate",
8014
- "data-testid": `${testId}-option-content-${item.value}`,
8015
- children: item.content
8016
- })
8017
- })
8018
- })
8019
- }, item.value))
8020
- })
8021
- }) })] });
7378
+ //#region src/react/ui/modals/BuyModal/hooks/useExecuteBundledTransactions.ts
7379
+ var FeeOptionInsufficientFundsError = class extends Error {
7380
+ feeOptions;
7381
+ constructor(message, feeOptions) {
7382
+ super(message);
7383
+ this.name = "FeeOptionInsufficientFundsError";
7384
+ this.feeOptions = feeOptions;
7385
+ }
7386
+ };
7387
+ const useExecuteBundledTransactions = ({ chainId, approvalStep }) => {
7388
+ const config = useConfig$1();
7389
+ const [isExecuting, setIsExecuting] = useState(false);
7390
+ const { address, connector } = useAccount();
7391
+ const publicClient = usePublicClient({ chainId });
7392
+ const { data: walletClient } = useWalletClient();
7393
+ const indexerClient = getIndexerClient(chainId, config);
7394
+ const isReady = !!address && !!publicClient && !!walletClient && !!indexerClient && !!connector;
7395
+ const executeBundledTransactions = async ({ step, onBalanceInsufficientForFeeOption, onTransactionFailed }) => {
7396
+ setIsExecuting(true);
7397
+ try {
7398
+ if (!address) throw new Error("Address not found");
7399
+ if (!publicClient) throw new Error("Public client not found");
7400
+ if (!walletClient) throw new Error("Wallet client not found");
7401
+ if (!indexerClient) throw new Error("Indexer client not found");
7402
+ if (!connector) throw new Error("Connector not found");
7403
+ const buildTransaction = (step$1) => {
7404
+ const value = step$1.value ? BigInt(step$1.value) : 0n;
7405
+ return {
7406
+ to: step$1.to,
7407
+ data: step$1.data,
7408
+ chainId,
7409
+ ...value > 0n ? { value } : {}
7410
+ };
7411
+ };
7412
+ const approvalData = approvalStep ? buildTransaction(approvalStep) : void 0;
7413
+ const transactionData = buildTransaction(step);
7414
+ const sendTransactionFns = await sendTransactions({
7415
+ chainId,
7416
+ senderAddress: address,
7417
+ publicClient,
7418
+ walletClient,
7419
+ indexerClient,
7420
+ connector,
7421
+ transactions: [...approvalData ? [approvalData] : [], transactionData],
7422
+ transactionConfirmations: 1,
7423
+ waitConfirmationForLastTransaction: false
7424
+ });
7425
+ if (!sendTransactionFns.length) throw new Error("No transactions returned");
7426
+ let txHash;
7427
+ for (const sendTransaction of sendTransactionFns) txHash = await sendTransaction();
7428
+ if (!txHash) throw new Error("Transaction hash not found");
7429
+ return txHash;
7430
+ } catch (error) {
7431
+ if (error instanceof FeeOptionInsufficientFundsError) {
7432
+ if (onBalanceInsufficientForFeeOption) onBalanceInsufficientForFeeOption(error);
7433
+ throw error;
7434
+ }
7435
+ if (onTransactionFailed) onTransactionFailed(error);
7436
+ throw error;
7437
+ } finally {
7438
+ setIsExecuting(false);
7439
+ }
7440
+ };
7441
+ return {
7442
+ executeBundledTransactions,
7443
+ isExecuting,
7444
+ isReady
7445
+ };
8022
7446
  };
8023
7447
 
8024
7448
  //#endregion
8025
- //#region src/react/ui/modals/_internal/constants/opensea-currencies.ts
8026
- const OPENSEA_CHAIN_CURRENCIES = {
8027
- "1": {
8028
- chainId: 1,
8029
- openseaId: "ethereum",
8030
- name: "Ethereum",
8031
- nativeCurrency: {
8032
- symbol: "ETH",
8033
- address: zeroAddress
8034
- },
8035
- wrappedNativeCurrency: { address: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2" },
8036
- offerCurrency: {
8037
- symbol: "WETH",
8038
- address: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2"
8039
- },
8040
- listingCurrency: {
8041
- symbol: "ETH",
8042
- address: zeroAddress
8043
- }
8044
- },
8045
- "10": {
8046
- chainId: 10,
8047
- openseaId: "optimism",
8048
- name: "Optimism",
8049
- nativeCurrency: {
8050
- symbol: "ETH",
8051
- address: zeroAddress
8052
- },
8053
- wrappedNativeCurrency: { address: "0x4200000000000000000000000000000000000006" },
8054
- offerCurrency: {
8055
- symbol: "WETH",
8056
- address: "0x4200000000000000000000000000000000000006"
8057
- },
8058
- listingCurrency: {
8059
- symbol: "ETH",
8060
- address: zeroAddress
8061
- }
8062
- },
8063
- "137": {
8064
- chainId: 137,
8065
- openseaId: "matic",
8066
- name: "Polygon",
8067
- nativeCurrency: {
8068
- symbol: "POL",
8069
- address: zeroAddress
8070
- },
8071
- wrappedNativeCurrency: { address: "0x0d500b1d8e8ef31e21c99d1db9a6444d3adf1270" },
8072
- offerCurrency: {
8073
- symbol: "WETH",
8074
- address: "0x7ceb23fd6bc0add59e62ac25578270cff1b9f619"
8075
- },
8076
- listingCurrency: {
8077
- symbol: "WETH",
8078
- address: "0x7ceb23fd6bc0add59e62ac25578270cff1b9f619"
8079
- }
8080
- },
8081
- "360": {
8082
- chainId: 360,
8083
- openseaId: "shape",
8084
- name: "Shape",
8085
- nativeCurrency: {
8086
- symbol: "ETH",
8087
- address: zeroAddress
8088
- },
8089
- wrappedNativeCurrency: { address: "0x4200000000000000000000000000000000000006" },
8090
- offerCurrency: {
8091
- symbol: "WETH",
8092
- address: "0x4200000000000000000000000000000000000006"
7449
+ //#region src/react/ui/modals/BuyModal/hooks/useHasSufficientBalance.ts
7450
+ const useHasSufficientBalance = ({ chainId, value, tokenAddress }) => {
7451
+ const { address } = useAccount();
7452
+ const { data: balanceData, isLoading } = useTokenCurrencyBalance({
7453
+ currencyAddress: tokenAddress,
7454
+ chainId,
7455
+ userAddress: address
7456
+ });
7457
+ const balance = balanceData?.value ?? 0n;
7458
+ return {
7459
+ data: {
7460
+ hasSufficientBalance: balance >= value || value === 0n,
7461
+ balance
8093
7462
  },
8094
- listingCurrency: {
8095
- symbol: "ETH",
8096
- address: zeroAddress
7463
+ isLoading
7464
+ };
7465
+ };
7466
+
7467
+ //#endregion
7468
+ //#region src/react/ui/modals/BuyModal/internal/cryptoPaymentModalContext.tsx
7469
+ const toErrorWithDetails = (error) => {
7470
+ if (error instanceof Error) return error;
7471
+ if (typeof error === "object" && error !== null) {
7472
+ const errorLike = error;
7473
+ let message = "An unexpected error occurred.";
7474
+ if (typeof errorLike.message === "string") message = errorLike.message;
7475
+ else try {
7476
+ message = JSON.stringify(errorLike);
7477
+ } catch {
7478
+ message = "An unexpected error occurred.";
8097
7479
  }
8098
- },
8099
- "998": {
8100
- chainId: 998,
8101
- openseaId: "hyperevm",
8102
- name: "HyperEVM",
8103
- nativeCurrency: {
8104
- symbol: "HYPE",
8105
- address: zeroAddress
8106
- },
8107
- wrappedNativeCurrency: { address: "0x5555555555555555555555555555555555555555" },
8108
- offerCurrency: {
8109
- symbol: "WHYPE",
8110
- address: "0x5555555555555555555555555555555555555555"
8111
- },
8112
- listingCurrency: {
8113
- symbol: "HYPE",
8114
- address: zeroAddress
7480
+ return Object.assign(new Error(message), errorLike);
7481
+ }
7482
+ return new Error(String(error));
7483
+ };
7484
+ function useCryptoPaymentModalContext({ chainId, steps, onSuccess }) {
7485
+ const [isExecuting, setIsExecuting] = useState(false);
7486
+ const [isApproving, setIsApproving] = useState(false);
7487
+ const [error, setError] = useState(null);
7488
+ const { isSequence: isSequenceConnector, isWaaS } = useConnectorMetadata();
7489
+ const buyStep = steps.find((step) => step.id === StepType.buy);
7490
+ if (!buyStep) throw new Error("Buy step not found");
7491
+ const { collectible, currency, marketOrder, primarySaleItem, isMarket, collection, isLoading: isLoadingBuyModalData } = useBuyModalData();
7492
+ const sdkConfig = useConfig$1();
7493
+ const { ensureCorrectChainAsync, currentChainId } = useEnsureCorrectChain();
7494
+ const isOnCorrectChain = currentChainId === chainId;
7495
+ const priceAmount = isMarket ? marketOrder?.priceAmount : primarySaleItem?.priceAmount;
7496
+ const priceCurrencyAddress = isMarket ? marketOrder?.priceCurrencyAddress : primarySaleItem?.currencyAddress;
7497
+ const listedPriceAmount = BigInt(priceAmount || 0);
7498
+ const buyStepPriceAmount = buyStep.price ? BigInt(buyStep.price) : listedPriceAmount;
7499
+ const buyStepValue = buyStep.value ? BigInt(buyStep.value) : buyStepPriceAmount;
7500
+ const requiredBalance = priceCurrencyAddress === zeroAddress ? buyStepValue : buyStepPriceAmount;
7501
+ const isAnyTransactionPending = isApproving || isExecuting;
7502
+ const { data, isLoading: isLoadingBalance } = useHasSufficientBalance({
7503
+ chainId,
7504
+ value: requiredBalance,
7505
+ tokenAddress: priceCurrencyAddress
7506
+ });
7507
+ const hasSufficientBalance = data?.hasSufficientBalance ?? false;
7508
+ const { sendTransactionAsync } = useSendTransaction();
7509
+ const [approvalStep, setApprovalStep] = useState(steps.find((step) => step.id === StepType.tokenApproval));
7510
+ const { executeBundledTransactions, isExecuting: isExecutingBundledTransactions, isReady: isBundledTransactionsReady } = useExecuteBundledTransactions({
7511
+ chainId,
7512
+ approvalStep
7513
+ });
7514
+ const waas = useSelectWaasFeeOptionsStore();
7515
+ const { pendingFeeOptionConfirmation, rejectPendingFeeOption } = useWaasFeeOptions$1(chainId, sdkConfig);
7516
+ const isSponsored = pendingFeeOptionConfirmation?.options?.length === 0;
7517
+ const isFeeSelectionVisible = waas.isVisible || !isSponsored && !!pendingFeeOptionConfirmation?.options;
7518
+ const executeTransaction = async (step) => {
7519
+ const data$1 = step.data;
7520
+ const to = step.to;
7521
+ const value = BigInt(step.value);
7522
+ if (!data$1 || !to) {
7523
+ const errorDetails = /* @__PURE__ */ new Error(`Invalid step: 'data' and 'to' are required:
7524
+ data: ${data$1}
7525
+ to: ${to}
7526
+
7527
+ ${JSON.stringify(step)}`);
7528
+ setError({
7529
+ title: "Invalid step",
7530
+ message: "`data` and `to` are required",
7531
+ details: errorDetails
7532
+ });
7533
+ throw errorDetails;
8115
7534
  }
8116
- },
8117
- "130": {
8118
- chainId: 130,
8119
- openseaId: "unichain",
8120
- name: "Unichain",
8121
- nativeCurrency: {
8122
- symbol: "ETH",
8123
- address: zeroAddress
8124
- },
8125
- wrappedNativeCurrency: { address: "0x4200000000000000000000000000000000000006" },
8126
- offerCurrency: {
8127
- symbol: "WETH",
8128
- address: "0x4200000000000000000000000000000000000006"
8129
- },
8130
- listingCurrency: {
8131
- symbol: "ETH",
8132
- address: zeroAddress
7535
+ if (!await ensureCorrectChainAsync(chainId)) throw new Error("Failed to switch to the required network.");
7536
+ const hash = await sendTransactionAsync({
7537
+ to,
7538
+ data: data$1,
7539
+ value
7540
+ });
7541
+ await waitForTransactionReceipt({
7542
+ txHash: hash,
7543
+ chainId,
7544
+ sdkConfig
7545
+ });
7546
+ return hash;
7547
+ };
7548
+ const executeApproval = async () => {
7549
+ if (!approvalStep) throw new Error("Approval step not found");
7550
+ setError(null);
7551
+ setIsApproving(true);
7552
+ try {
7553
+ await executeTransaction(approvalStep);
7554
+ setApprovalStep(void 0);
7555
+ } catch (error$1) {
7556
+ const errorObj = toErrorWithDetails(error$1);
7557
+ setError({
7558
+ title: "Approval failed",
7559
+ message: getErrorMessage(errorObj),
7560
+ details: errorObj
7561
+ });
7562
+ console.error("Approval transaction failed:", error$1);
7563
+ } finally {
7564
+ setIsApproving(false);
8133
7565
  }
8134
- },
8135
- "1329": {
8136
- chainId: 1329,
8137
- openseaId: "sei",
8138
- name: "Sei",
8139
- nativeCurrency: {
8140
- symbol: "SEI",
8141
- address: zeroAddress
8142
- },
8143
- wrappedNativeCurrency: { address: "0xe30fedd158a2e3b13e9badaeabafc5516e95e8c7" },
8144
- offerCurrency: {
8145
- symbol: "WSEI",
8146
- address: "0xe30fedd158a2e3b13e9badaeabafc5516e95e8c7"
8147
- },
8148
- listingCurrency: {
8149
- symbol: "SEI",
8150
- address: zeroAddress
7566
+ };
7567
+ const handleBalanceInsufficientForWaasFeeOption = (error$1) => {
7568
+ setError({
7569
+ title: "Insufficient balance for fee option",
7570
+ message: "You do not have enough balance to purchase this item.",
7571
+ details: error$1
7572
+ });
7573
+ console.error("Balance insufficient for fee option:", error$1);
7574
+ };
7575
+ const handleTransactionFailed = (error$1) => {
7576
+ setError({
7577
+ title: "Transaction failed",
7578
+ message: getErrorMessage(error$1),
7579
+ details: error$1
7580
+ });
7581
+ console.error("Transaction failed:", error$1);
7582
+ };
7583
+ const executeBuy = async () => {
7584
+ setError(null);
7585
+ setIsExecuting(true);
7586
+ try {
7587
+ onSuccess(await executeBundledTransactions({
7588
+ step: buyStep,
7589
+ onBalanceInsufficientForFeeOption: handleBalanceInsufficientForWaasFeeOption,
7590
+ onTransactionFailed: handleTransactionFailed
7591
+ }));
7592
+ } catch (error$1) {
7593
+ const errorObj = toErrorWithDetails(error$1);
7594
+ setError({
7595
+ title: "Purchase failed",
7596
+ message: getErrorMessage(errorObj),
7597
+ details: errorObj
7598
+ });
7599
+ console.error("Buy transaction failed:", error$1);
7600
+ } finally {
7601
+ setIsExecuting(false);
8151
7602
  }
8152
- },
8153
- "1868": {
8154
- chainId: 1868,
8155
- openseaId: "soneium",
8156
- name: "Soneium",
8157
- nativeCurrency: {
8158
- symbol: "ETH",
8159
- address: zeroAddress
8160
- },
8161
- wrappedNativeCurrency: { address: "0x4200000000000000000000000000000000000006" },
8162
- offerCurrency: {
8163
- symbol: "WETH",
8164
- address: "0x4200000000000000000000000000000000000006"
8165
- },
8166
- listingCurrency: {
8167
- symbol: "ETH",
8168
- address: zeroAddress
7603
+ };
7604
+ const dismissError = () => {
7605
+ setError(null);
7606
+ };
7607
+ const formattedPrice = formatPrice(buyStepPriceAmount, currency?.decimals || 0);
7608
+ const isFree = formattedPrice === "0";
7609
+ const renderPriceUSD = () => {
7610
+ const priceUSD = marketOrder?.priceUSDFormatted || marketOrder?.priceUSD;
7611
+ if (!priceUSD) return "";
7612
+ if ((typeof priceUSD === "string" ? Number.parseFloat(priceUSD) : priceUSD) < 1e-4) return /* @__PURE__ */ jsxs("div", {
7613
+ className: "flex items-center",
7614
+ children: [
7615
+ /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-3" }),
7616
+ " ",
7617
+ /* @__PURE__ */ jsx(Text, { children: "$0.0001" })
7618
+ ]
7619
+ });
7620
+ return `~$${priceUSD}`;
7621
+ };
7622
+ const renderCurrencyPrice = () => {
7623
+ if (isFree) return "Free";
7624
+ if (Number.parseFloat(formattedPrice) < 1e-4) return /* @__PURE__ */ jsxs("div", {
7625
+ className: "flex items-center",
7626
+ children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-4" }), /* @__PURE__ */ jsxs(Text, { children: ["0.0001 ", currency?.symbol] })]
7627
+ });
7628
+ return `${formattedPrice} ${currency?.symbol}`;
7629
+ };
7630
+ const feeStep = isWaaS ? {
7631
+ label: "Select Fee",
7632
+ status: isSponsored || !!waas.selectedFeeOption ? "success" : isFeeSelectionVisible ? "selecting" : "idle",
7633
+ isSponsored,
7634
+ isSelecting: isFeeSelectionVisible,
7635
+ selectedOption: waas.selectedFeeOption,
7636
+ show: () => waas.show(),
7637
+ cancel: () => {
7638
+ waas.hide();
7639
+ if (pendingFeeOptionConfirmation?.id) rejectPendingFeeOption(pendingFeeOptionConfirmation.id);
8169
7640
  }
8170
- },
8171
- "2020": {
8172
- chainId: 2020,
8173
- openseaId: "ronin",
8174
- name: "Ronin",
8175
- nativeCurrency: {
8176
- symbol: "RON",
8177
- address: zeroAddress
8178
- },
8179
- wrappedNativeCurrency: { address: "0xe514d9deb7966c8be0ca922de8a064264ea6bcd4" },
8180
- offerCurrency: {
8181
- symbol: "WRON",
8182
- address: "0xe514d9deb7966c8be0ca922de8a064264ea6bcd4"
7641
+ } : void 0;
7642
+ return {
7643
+ data: {
7644
+ collectible,
7645
+ currency,
7646
+ marketOrder,
7647
+ collection
8183
7648
  },
8184
- listingCurrency: {
8185
- symbol: "RON",
8186
- address: zeroAddress
8187
- }
8188
- },
8189
- "2741": {
8190
- chainId: 2741,
8191
- openseaId: "abstract",
8192
- name: "Abstract",
8193
- nativeCurrency: {
8194
- symbol: "ETH",
8195
- address: zeroAddress
7649
+ loading: {
7650
+ isLoadingBuyModalData,
7651
+ isLoadingBalance
8196
7652
  },
8197
- wrappedNativeCurrency: { address: "0x3439153eb7af838ad19d56e1571fbd09333c2809" },
8198
- offerCurrency: {
8199
- symbol: "WETH",
8200
- address: "0x3439153eb7af838ad19d56e1571fbd09333c2809"
7653
+ chain: {
7654
+ isOnCorrectChain,
7655
+ currentChainId
8201
7656
  },
8202
- listingCurrency: {
8203
- symbol: "ETH",
8204
- address: zeroAddress
8205
- }
8206
- },
8207
- "8333": {
8208
- chainId: 8333,
8209
- openseaId: "b3",
8210
- name: "B3",
8211
- nativeCurrency: {
8212
- symbol: "ETH",
8213
- address: zeroAddress
7657
+ balance: { hasSufficientBalance },
7658
+ transaction: {
7659
+ isApproving,
7660
+ isExecuting,
7661
+ isExecutingBundledTransactions
8214
7662
  },
8215
- wrappedNativeCurrency: { address: "0x4200000000000000000000000000000000000006" },
8216
- offerCurrency: {
8217
- symbol: "WETH",
8218
- address: "0x4200000000000000000000000000000000000006"
7663
+ error: {
7664
+ error,
7665
+ dismissError
8219
7666
  },
8220
- listingCurrency: {
8221
- symbol: "ETH",
8222
- address: zeroAddress
8223
- }
8224
- },
8225
- "8453": {
8226
- chainId: 8453,
8227
- openseaId: "base",
8228
- name: "Base",
8229
- nativeCurrency: {
8230
- symbol: "ETH",
8231
- address: zeroAddress
7667
+ steps: {
7668
+ approvalStep,
7669
+ feeStep
8232
7670
  },
8233
- wrappedNativeCurrency: { address: "0x4200000000000000000000000000000000000006" },
8234
- offerCurrency: {
8235
- symbol: "WETH",
8236
- address: "0x4200000000000000000000000000000000000006"
7671
+ connector: {
7672
+ isSequenceConnector,
7673
+ isWaaS
8237
7674
  },
8238
- listingCurrency: {
8239
- symbol: "ETH",
8240
- address: zeroAddress
8241
- }
8242
- },
8243
- "33139": {
8244
- chainId: 33139,
8245
- openseaId: "ape_chain",
8246
- name: "ApeChain",
8247
- nativeCurrency: {
8248
- symbol: "APE",
8249
- address: zeroAddress
7675
+ flags: { isMarket },
7676
+ permissions: {
7677
+ canApprove: hasSufficientBalance && !isLoadingBalance && !isLoadingBuyModalData && !isAnyTransactionPending && !isFeeSelectionVisible,
7678
+ canBuy: hasSufficientBalance && !isLoadingBalance && !isLoadingBuyModalData && (isSequenceConnector ? true : !approvalStep) && !isAnyTransactionPending && !isFeeSelectionVisible && isBundledTransactionsReady
8250
7679
  },
8251
- wrappedNativeCurrency: { address: "0x48b62137edfa95a428d35c09e44256a739f6b557" },
8252
- offerCurrency: {
8253
- symbol: "WAPE",
8254
- address: "0x48b62137edfa95a428d35c09e44256a739f6b557"
7680
+ price: {
7681
+ formattedPrice,
7682
+ renderCurrencyPrice,
7683
+ renderPriceUSD
8255
7684
  },
8256
- listingCurrency: {
8257
- symbol: "APE",
8258
- address: zeroAddress
7685
+ actions: {
7686
+ executeApproval,
7687
+ executeBuy
8259
7688
  }
8260
- },
8261
- "42161": {
8262
- chainId: 42161,
8263
- openseaId: "arbitrum",
8264
- name: "Arbitrum",
8265
- nativeCurrency: {
8266
- symbol: "ETH",
8267
- address: zeroAddress
8268
- },
8269
- wrappedNativeCurrency: { address: "0x82af49447d8a07e3bd95bd0d56f35241523fbab1" },
8270
- offerCurrency: {
8271
- symbol: "WETH",
8272
- address: "0x82af49447d8a07e3bd95bd0d56f35241523fbab1"
8273
- },
8274
- listingCurrency: {
8275
- symbol: "ETH",
8276
- address: zeroAddress
7689
+ };
7690
+ }
7691
+
7692
+ //#endregion
7693
+ //#region src/react/ui/modals/BuyModal/components/CryptoPaymentModalSkeleton.tsx
7694
+ const CryptoPaymentModalSkeleton = ({ networkMismatch }) => {
7695
+ return /* @__PURE__ */ jsx("div", {
7696
+ className: "flex w-full flex-col",
7697
+ children: /* @__PURE__ */ jsxs("div", {
7698
+ className: "flex flex-col gap-4 p-4",
7699
+ children: [
7700
+ /* @__PURE__ */ jsxs("div", {
7701
+ className: "flex items-start gap-4",
7702
+ children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-[84px] w-[84px] rounded-lg" }), /* @__PURE__ */ jsxs("div", {
7703
+ className: "flex flex-1 flex-col",
7704
+ children: [
7705
+ /* @__PURE__ */ jsxs("div", {
7706
+ className: "flex items-center gap-2",
7707
+ children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-12" })]
7708
+ }),
7709
+ /* @__PURE__ */ jsx(Skeleton, { className: "mt-1 h-3 w-24" }),
7710
+ /* @__PURE__ */ jsxs("div", {
7711
+ className: "mt-2 flex flex-col",
7712
+ children: [/* @__PURE__ */ jsxs("div", {
7713
+ className: "flex items-center gap-2",
7714
+ children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-full" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-28" })]
7715
+ }), /* @__PURE__ */ jsx(Skeleton, { className: "mt-1 h-3 w-16" })]
7716
+ })
7717
+ ]
7718
+ })]
7719
+ }),
7720
+ networkMismatch && /* @__PURE__ */ jsx(Skeleton, { className: "h-[98px] w-full rounded-lg" }),
7721
+ networkMismatch && /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full rounded-full" }),
7722
+ /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full rounded-full" })
7723
+ ]
7724
+ })
7725
+ });
7726
+ };
7727
+
7728
+ //#endregion
7729
+ //#region src/react/ui/modals/BuyModal/components/CryptoPaymentModal.tsx
7730
+ const CryptoPaymentModal = ({ chainId, steps, onSuccess }) => {
7731
+ const { data: { collectible, currency, collection }, loading: { isLoadingBuyModalData, isLoadingBalance }, chain: { isOnCorrectChain, currentChainId }, balance: { hasSufficientBalance }, transaction: { isApproving, isExecuting, isExecutingBundledTransactions }, error: { error, dismissError }, steps: { approvalStep, feeStep }, connector: { isSequenceConnector }, flags: { isMarket }, permissions: { canApprove, canBuy }, price: { formattedPrice, renderCurrencyPrice, renderPriceUSD }, actions: { executeApproval, executeBuy } } = useCryptoPaymentModalContext({
7732
+ chainId,
7733
+ steps,
7734
+ onSuccess
7735
+ });
7736
+ const { ensureCorrectChainAsync } = useEnsureCorrectChain();
7737
+ const [pendingAction, setPendingAction] = useState(null);
7738
+ const [chainSwitchError, setChainSwitchError] = useState(null);
7739
+ const isPendingApprovalReady = pendingAction === "approval" && isOnCorrectChain && canApprove;
7740
+ const isPendingBuyReady = pendingAction === "buy" && isOnCorrectChain && canBuy;
7741
+ const isPendingAction = pendingAction !== null;
7742
+ useEffect(() => {
7743
+ if (!isPendingApprovalReady && !isPendingBuyReady) return;
7744
+ setPendingAction(null);
7745
+ pendingAction === "approval" ? executeApproval() : executeBuy();
7746
+ }, [
7747
+ executeApproval,
7748
+ executeBuy,
7749
+ isPendingApprovalReady,
7750
+ isPendingBuyReady,
7751
+ pendingAction
7752
+ ]);
7753
+ const handleChainSwitchError = (error$1) => {
7754
+ setChainSwitchError({
7755
+ title: "Chain switch failed",
7756
+ message: `Failed to switch to ${getPresentableChainName(chainId)}. Please try changing the network in your wallet manually.`,
7757
+ details: error$1
7758
+ });
7759
+ };
7760
+ const dismissChainSwitchError = () => {
7761
+ setChainSwitchError(null);
7762
+ };
7763
+ const executeAction = async (action) => {
7764
+ setPendingAction(null);
7765
+ if (action === "approval") {
7766
+ await executeApproval();
7767
+ return;
8277
7768
  }
8278
- },
8279
- "42170": {
8280
- chainId: 42170,
8281
- openseaId: "arbitrum_nova",
8282
- name: "Arbitrum Nova",
8283
- nativeCurrency: {
8284
- symbol: "ETH",
8285
- address: zeroAddress
8286
- },
8287
- wrappedNativeCurrency: { address: "0x722e8bdd2ce80a4422e880164f2079488e115365" },
8288
- offerCurrency: {
8289
- symbol: "WETH",
8290
- address: "0x722e8bdd2ce80a4422e880164f2079488e115365"
8291
- },
8292
- listingCurrency: {
8293
- symbol: "ETH",
8294
- address: zeroAddress
7769
+ await executeBuy();
7770
+ };
7771
+ const executeWithChainSwitch = async (action) => {
7772
+ dismissChainSwitchError();
7773
+ if (isOnCorrectChain) {
7774
+ await executeAction(action);
7775
+ return;
8295
7776
  }
8296
- },
8297
- "43114": {
8298
- chainId: 43114,
8299
- openseaId: "avalanche",
8300
- name: "Avalanche",
8301
- nativeCurrency: {
8302
- symbol: "AVAX",
8303
- address: zeroAddress
8304
- },
8305
- wrappedNativeCurrency: { address: "0xb31f66aa3c1e785363f0875a1b74e27b85fd66c7" },
8306
- offerCurrency: {
8307
- symbol: "WAVAX",
8308
- address: "0xb31f66aa3c1e785363f0875a1b74e27b85fd66c7"
8309
- },
8310
- listingCurrency: {
8311
- symbol: "AVAX",
8312
- address: zeroAddress
7777
+ setPendingAction(action);
7778
+ try {
7779
+ if (!await ensureCorrectChainAsync(chainId)) {
7780
+ setPendingAction(null);
7781
+ handleChainSwitchError();
7782
+ }
7783
+ } catch (error$1) {
7784
+ setPendingAction(null);
7785
+ if (error$1 instanceof Error) handleChainSwitchError(error$1);
7786
+ else handleChainSwitchError();
8313
7787
  }
8314
- },
8315
- "43419": {
8316
- chainId: 43419,
8317
- openseaId: "gunzilla",
8318
- name: "GUNZ",
8319
- nativeCurrency: {
8320
- symbol: "GUN",
8321
- address: zeroAddress
8322
- },
8323
- wrappedNativeCurrency: { address: "0x5aad7bba61d95c2c4e525a35f4062040264611f1" },
8324
- offerCurrency: {
8325
- symbol: "WGUN",
8326
- address: "0x5aad7bba61d95c2c4e525a35f4062040264611f1"
8327
- },
8328
- listingCurrency: {
8329
- symbol: "GUN",
8330
- address: zeroAddress
7788
+ };
7789
+ const isWaitingForChainSwitch = isPendingAction && !isOnCorrectChain;
7790
+ const isPreparingPendingAction = isPendingAction && isOnCorrectChain;
7791
+ const approvalButtonLabel = isApproving ? /* @__PURE__ */ jsxs("div", {
7792
+ className: "flex items-center gap-2",
7793
+ children: [/* @__PURE__ */ jsx(Spinner, { size: "sm" }), " Approving Token..."]
7794
+ }) : isWaitingForChainSwitch && pendingAction === "approval" ? /* @__PURE__ */ jsxs("div", {
7795
+ className: "flex items-center gap-2",
7796
+ children: [/* @__PURE__ */ jsx(Spinner, { size: "sm" }), " Switching Network..."]
7797
+ }) : isPreparingPendingAction && pendingAction === "approval" ? /* @__PURE__ */ jsxs("div", {
7798
+ className: "flex items-center gap-2",
7799
+ children: [/* @__PURE__ */ jsx(Spinner, { size: "sm" }), " Preparing Approval..."]
7800
+ }) : "Approve Token";
7801
+ const buyButtonLabel = isExecuting || isExecutingBundledTransactions ? /* @__PURE__ */ jsxs("div", {
7802
+ className: "flex items-center gap-2",
7803
+ children: [/* @__PURE__ */ jsx(Spinner, { size: "sm" }), " Confirming Purchase..."]
7804
+ }) : isWaitingForChainSwitch && pendingAction === "buy" ? /* @__PURE__ */ jsxs("div", {
7805
+ className: "flex items-center gap-2",
7806
+ children: [/* @__PURE__ */ jsx(Spinner, { size: "sm" }), " Switching Network..."]
7807
+ }) : isPreparingPendingAction && pendingAction === "buy" ? /* @__PURE__ */ jsxs("div", {
7808
+ className: "flex items-center gap-2",
7809
+ children: [/* @__PURE__ */ jsx(Spinner, { size: "sm" }), " Preparing Purchase..."]
7810
+ }) : "Buy now";
7811
+ if (isLoadingBuyModalData || isLoadingBalance) return /* @__PURE__ */ jsx(CryptoPaymentModalSkeleton, { networkMismatch: !isOnCorrectChain && currentChainId !== void 0 });
7812
+ return /* @__PURE__ */ jsx("div", {
7813
+ className: "flex w-full flex-col",
7814
+ children: /* @__PURE__ */ jsxs("div", {
7815
+ className: "flex flex-col gap-4 p-4",
7816
+ children: [
7817
+ /* @__PURE__ */ jsx(CollectibleMetadataSummary, {
7818
+ checkoutMode: "crypto",
7819
+ collectible,
7820
+ collection,
7821
+ chainId,
7822
+ currency,
7823
+ formattedPrice,
7824
+ renderCurrencyPrice,
7825
+ renderPriceUSD,
7826
+ isMarket
7827
+ }),
7828
+ !isLoadingBalance && !isLoadingBuyModalData && !hasSufficientBalance && /* @__PURE__ */ jsxs(Text, {
7829
+ className: "text-sm text-warning",
7830
+ children: [
7831
+ "You do not have enough",
7832
+ " ",
7833
+ /* @__PURE__ */ jsx(Text, {
7834
+ className: "font-bold",
7835
+ children: currency?.name
7836
+ }),
7837
+ " to purchase this item"
7838
+ ]
7839
+ }),
7840
+ approvalStep && !isSequenceConnector && /* @__PURE__ */ jsx(Button, {
7841
+ onClick: async () => {
7842
+ await executeWithChainSwitch("approval");
7843
+ },
7844
+ disabled: !canApprove || isPendingAction,
7845
+ variant: "primary",
7846
+ size: "lg",
7847
+ className: "w-full",
7848
+ children: approvalButtonLabel
7849
+ }),
7850
+ !isLoadingBalance && !isLoadingBuyModalData && /* @__PURE__ */ jsx(Button, {
7851
+ onClick: async () => {
7852
+ await executeWithChainSwitch("buy");
7853
+ },
7854
+ disabled: !canBuy || isPendingAction,
7855
+ variant: "primary",
7856
+ size: "lg",
7857
+ className: "w-full",
7858
+ children: buyButtonLabel
7859
+ }),
7860
+ feeStep?.isSelecting && /* @__PURE__ */ jsx(selectWaasFeeOptions_default, {
7861
+ chainId,
7862
+ onCancel: feeStep.cancel,
7863
+ titleOnConfirm: "Processing purchase..."
7864
+ }),
7865
+ (chainSwitchError || error) && /* @__PURE__ */ jsx(ErrorLogBox, {
7866
+ title: chainSwitchError?.title ?? error?.title ?? "",
7867
+ message: chainSwitchError?.message ?? error?.message ?? "",
7868
+ error: chainSwitchError?.details ?? error?.details,
7869
+ onDismiss: () => {
7870
+ dismissChainSwitchError();
7871
+ dismissError();
7872
+ }
7873
+ })
7874
+ ]
7875
+ })
7876
+ });
7877
+ };
7878
+
7879
+ //#endregion
7880
+ //#region src/react/ui/modals/_internal/components/baseModal/ErrorBoundary.tsx
7881
+ var ErrorBoundary = class extends Component {
7882
+ constructor(props) {
7883
+ super(props);
7884
+ this.state = {
7885
+ hasError: false,
7886
+ error: null,
7887
+ errorInfo: null
7888
+ };
7889
+ }
7890
+ resetErrorBoundary = () => {
7891
+ this.setState({
7892
+ hasError: false,
7893
+ error: null,
7894
+ errorInfo: null
7895
+ });
7896
+ };
7897
+ static getDerivedStateFromError(error) {
7898
+ return {
7899
+ hasError: true,
7900
+ error
7901
+ };
7902
+ }
7903
+ componentDidCatch(error, errorInfo) {
7904
+ console.error("ErrorBoundary caught an error:", error, errorInfo);
7905
+ this.setState({ errorInfo });
7906
+ this.props.onError?.(error, errorInfo);
7907
+ }
7908
+ render() {
7909
+ if (this.state.hasError && this.state.error) {
7910
+ if (this.props.fallback) {
7911
+ if (this.state.errorInfo) return this.props.fallback(this.state.error, this.state.errorInfo);
7912
+ return null;
7913
+ }
7914
+ return /* @__PURE__ */ jsx("div", {
7915
+ className: this.props.className,
7916
+ "data-testid": "error-boundary",
7917
+ children: /* @__PURE__ */ jsx(SmartErrorHandler, {
7918
+ error: this.state.error,
7919
+ onAction: this.props.onAction
7920
+ })
7921
+ });
8331
7922
  }
8332
- },
8333
- "50311": {
8334
- chainId: 50311,
8335
- openseaId: "somnia",
8336
- name: "Somnia",
8337
- nativeCurrency: {
8338
- symbol: "SOMI",
8339
- address: zeroAddress
7923
+ return this.props.children;
7924
+ }
7925
+ };
7926
+
7927
+ //#endregion
7928
+ //#region src/react/ui/modals/_internal/components/baseModal/ErrorModal.tsx
7929
+ /**
7930
+ * ErrorModal - Specialized modal for error states
7931
+ *
7932
+ * Improvements over the original wrapper:
7933
+ * - Built on BaseModal foundation
7934
+ * - Smart error handling integration
7935
+ * - Optional retry functionality
7936
+ * - Fallback to simple message display
7937
+ */
7938
+ const ErrorModal = ({ onClose, title, chainId, error, message, onRetry, onErrorAction }) => /* @__PURE__ */ jsx(BaseModal, {
7939
+ onClose,
7940
+ title,
7941
+ chainId,
7942
+ children: /* @__PURE__ */ jsx("div", {
7943
+ className: "flex items-center justify-center p-4",
7944
+ "data-testid": "error-modal",
7945
+ children: error ? /* @__PURE__ */ jsx(SmartErrorHandler, {
7946
+ error,
7947
+ onAction: onErrorAction || (onRetry ? () => onRetry() : void 0)
7948
+ }) : /* @__PURE__ */ jsx(Text, {
7949
+ className: "font-body",
7950
+ color: "text80",
7951
+ children: message || "Error loading item details"
7952
+ })
7953
+ })
7954
+ });
7955
+
7956
+ //#endregion
7957
+ //#region src/react/ui/modals/_internal/components/baseModal/LoadingModal.tsx
7958
+ const LoadingModal = ({ onClose, title, chainId, disableAnimation = true, message }) => /* @__PURE__ */ jsx(BaseModal, {
7959
+ onClose,
7960
+ title,
7961
+ chainId,
7962
+ disableAnimation,
7963
+ children: /* @__PURE__ */ jsxs("div", {
7964
+ className: "flex flex-col items-center justify-center gap-4 p-4",
7965
+ "data-testid": "loading-modal",
7966
+ children: [/* @__PURE__ */ jsx(Spinner, { size: "lg" }), message && /* @__PURE__ */ jsx("p", {
7967
+ className: "text-center text-sm text-text-80",
7968
+ children: message
7969
+ })]
7970
+ })
7971
+ });
7972
+
7973
+ //#endregion
7974
+ //#region src/react/ui/modals/BuyModal/components/sequence-checkout/ERC1155QuantityModal.tsx
7975
+ const ERC1155QuantityModal = ({ order, quantityRemaining, unlimitedSupply, salePrice, chainId, cardType }) => {
7976
+ const minQuantity = 1n;
7977
+ const [quantity, setQuantity] = useState(minQuantity);
7978
+ const [localInvalidQuantity, setLocalInvalidQuantity] = useState(false);
7979
+ const maxQuantity = unlimitedSupply ? maxUint256 : quantityRemaining;
7980
+ const invalidQuantity = maxQuantity < minQuantity || localInvalidQuantity;
7981
+ const handleSetQuantity = () => {
7982
+ buyModalStore.send({
7983
+ type: "setQuantity",
7984
+ quantity: Number(quantity)
7985
+ });
7986
+ buyModalStore.send({ type: "openPaymentModal" });
7987
+ };
7988
+ return /* @__PURE__ */ jsx(ActionModal, {
7989
+ chainId,
7990
+ onClose: () => buyModalStore.send({ type: "close" }),
7991
+ title: "Select Quantity",
7992
+ disableAnimation: true,
7993
+ type: "buy",
7994
+ queries: {},
7995
+ primaryAction: {
7996
+ label: "Buy now",
7997
+ onClick: handleSetQuantity,
7998
+ disabled: invalidQuantity
8340
7999
  },
8341
- wrappedNativeCurrency: { address: "0x046ede9564a72571df6f5e44d0405360c0f4dcab" },
8342
- offerCurrency: {
8343
- symbol: "WSOMI",
8344
- address: "0x046ede9564a72571df6f5e44d0405360c0f4dcab"
8000
+ secondaryAction: {
8001
+ label: "Cancel",
8002
+ variant: "secondary",
8003
+ onClick: () => buyModalStore.send({ type: "close" })
8345
8004
  },
8346
- listingCurrency: {
8347
- symbol: "SOMI",
8348
- address: zeroAddress
8005
+ children: () => {
8006
+ return /* @__PURE__ */ jsxs("div", {
8007
+ className: "flex w-full flex-col gap-4",
8008
+ children: [/* @__PURE__ */ jsx(QuantityInput, {
8009
+ quantity,
8010
+ invalidQuantity,
8011
+ onQuantityChange: setQuantity,
8012
+ onInvalidQuantityChange: setLocalInvalidQuantity,
8013
+ maxQuantity
8014
+ }), /* @__PURE__ */ jsx(TotalPrice, {
8015
+ order,
8016
+ quantity,
8017
+ salePrice,
8018
+ chainId,
8019
+ cardType
8020
+ })]
8021
+ });
8349
8022
  }
8350
- },
8351
- "80094": {
8352
- chainId: 80094,
8353
- openseaId: "bera_chain",
8354
- name: "Berachain",
8355
- nativeCurrency: {
8356
- symbol: "BERA",
8357
- address: zeroAddress
8023
+ });
8024
+ };
8025
+ const TotalPrice = ({ order, quantity, salePrice, chainId, cardType }) => {
8026
+ const isShop = cardType === "shop";
8027
+ const isMarket = cardType === "market";
8028
+ const { data: marketplaceConfig } = useMarketplaceConfig();
8029
+ const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
8030
+ chainId,
8031
+ currencyAddress: order ? order.priceCurrencyAddress : salePrice?.currencyAddress
8032
+ });
8033
+ let error = null;
8034
+ let formattedPrice = "0";
8035
+ if (isMarket && currency && order) try {
8036
+ const marketplaceFeePercentage = (marketplaceConfig?.market?.collections?.find((col) => col.itemsAddress.toLowerCase() === order.collectionContractAddress.toLowerCase() && col.chainId === chainId))?.feePercentage ?? DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
8037
+ formattedPrice = formatPriceWithFee(BigInt(order.priceAmount) * quantity, currency.decimals, marketplaceFeePercentage);
8038
+ } catch (e) {
8039
+ console.error("Error formatting price", e);
8040
+ error = "Unable to calculate total price";
8041
+ }
8042
+ if (isShop && salePrice && currency) formattedPrice = formatPriceWithFee(BigInt(salePrice.amount) * quantity, currency.decimals, 0);
8043
+ return error ? /* @__PURE__ */ jsx(Text, {
8044
+ className: "font-body font-medium text-xs",
8045
+ color: "text50",
8046
+ children: error
8047
+ }) : /* @__PURE__ */ jsxs("div", {
8048
+ className: "flex justify-between",
8049
+ children: [/* @__PURE__ */ jsx(Text, {
8050
+ className: "font-body font-medium text-xs",
8051
+ color: "text50",
8052
+ children: "Total Price"
8053
+ }), /* @__PURE__ */ jsx("div", {
8054
+ className: "flex items-center gap-0.5",
8055
+ children: !currency || isCurrencyLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-12" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
8056
+ currency?.imageUrl && /* @__PURE__ */ jsx(TokenImage, {
8057
+ src: currency.imageUrl,
8058
+ size: "xs"
8059
+ }),
8060
+ /* @__PURE__ */ jsx(Text, {
8061
+ className: "font-body font-bold text-text-100 text-xs",
8062
+ children: formattedPrice
8063
+ }),
8064
+ /* @__PURE__ */ jsx(Text, {
8065
+ className: "font-body font-bold text-text-80 text-xs",
8066
+ children: currency?.symbol
8067
+ })
8068
+ ] })
8069
+ })]
8070
+ });
8071
+ };
8072
+
8073
+ //#endregion
8074
+ //#region ../api/src/adapters/marketplace/marketplace.gen.ts
8075
+ let StepType$1 = /* @__PURE__ */ function(StepType$2) {
8076
+ StepType$2["unknown"] = "unknown";
8077
+ StepType$2["tokenApproval"] = "tokenApproval";
8078
+ StepType$2["buy"] = "buy";
8079
+ StepType$2["sell"] = "sell";
8080
+ StepType$2["createListing"] = "createListing";
8081
+ StepType$2["createOffer"] = "createOffer";
8082
+ StepType$2["signEIP712"] = "signEIP712";
8083
+ StepType$2["signEIP191"] = "signEIP191";
8084
+ StepType$2["cancel"] = "cancel";
8085
+ return StepType$2;
8086
+ }({});
8087
+
8088
+ //#endregion
8089
+ //#region src/utils/decode/erc20.ts
8090
+ function decodeERC20Approval(calldata) {
8091
+ const decoded = decodeFunctionData({
8092
+ abi: erc20Abi,
8093
+ data: calldata
8094
+ });
8095
+ if (decoded.functionName !== "approve") throw new Error("Not an ERC20 approval transaction");
8096
+ const [spender, value] = decoded.args;
8097
+ return {
8098
+ spender,
8099
+ value
8100
+ };
8101
+ }
8102
+
8103
+ //#endregion
8104
+ //#region src/react/ui/modals/BuyModal/components/sequence-checkout/usePaymentModalParams.ts
8105
+ const getBuyCollectableParams = async ({ address, chainId, collectionAddress, tokenId, successActionButtons, priceCurrencyAddress, customCreditCardProviderCallback, marketplaceKind, orderId, quantity, skipNativeBalanceCheck, nativeTokenAddress, buyAnalyticsId, onRampProvider, checkoutMode, steps, marketplaceType }) => {
8106
+ const checkoutOptions = typeof checkoutMode === "object" ? checkoutMode.options : void 0;
8107
+ const buyStep = steps?.find((step) => step.id === StepType$1.buy);
8108
+ const approveStep = steps?.find((step) => step.id === StepType$1.tokenApproval);
8109
+ const approvedSpenderAddress = approveStep ? decodeERC20Approval(approveStep.data).spender : void 0;
8110
+ if (!buyStep) throw new Error("Buy step not found");
8111
+ const creditCardProviders = customCreditCardProviderCallback ? ["custom"] : checkoutOptions?.nftCheckout || [];
8112
+ const supplementaryAnalyticsInfo = marketplaceType === "market" ? {
8113
+ requestId: orderId,
8114
+ ...marketplaceKind && { marketplaceKind },
8115
+ buyAnalyticsId
8116
+ } : { marketplaceType: "shop" };
8117
+ const totalPrice = BigInt(buyStep.price) * BigInt(quantity);
8118
+ return {
8119
+ chain: chainId,
8120
+ collectibles: [{
8121
+ tokenId: tokenId?.toString() ?? "",
8122
+ quantity: quantity.toString()
8123
+ }],
8124
+ currencyAddress: priceCurrencyAddress,
8125
+ price: totalPrice.toString(),
8126
+ targetContractAddress: buyStep.to,
8127
+ approvedSpenderAddress,
8128
+ txData: buyStep.data,
8129
+ collectionAddress,
8130
+ recipientAddress: address,
8131
+ creditCardProviders,
8132
+ supplementaryAnalyticsInfo,
8133
+ onClose: () => {
8134
+ getQueryClient().invalidateQueries({ predicate: (query) => !query.meta?.persistent });
8135
+ buyModalStore.send({ type: "close" });
8358
8136
  },
8359
- wrappedNativeCurrency: { address: "0x6969696969696969696969696969696969696969" },
8360
- offerCurrency: {
8361
- symbol: "WBERA",
8362
- address: "0x6969696969696969696969696969696969696969"
8137
+ skipNativeBalanceCheck,
8138
+ nativeTokenAddress,
8139
+ ...customCreditCardProviderCallback && { customProviderCallback: () => {
8140
+ customCreditCardProviderCallback(buyStep);
8141
+ buyModalStore.send({ type: "close" });
8142
+ } },
8143
+ onRampProvider,
8144
+ successActionButtons
8145
+ };
8146
+ };
8147
+ const usePaymentModalParams = (args) => {
8148
+ const { marketplaceKind, priceCurrencyAddress, quantity, steps, marketplaceType } = args;
8149
+ const buyModalProps = useBuyModalProps();
8150
+ const { checkoutMode } = useBuyModalContext();
8151
+ const { chainId, collectionAddress, skipNativeBalanceCheck, nativeTokenAddress, onRampProvider, successActionButtons } = buyModalProps;
8152
+ const tokenId = isMarketProps(buyModalProps) ? buyModalProps.tokenId : buyModalProps.item.tokenId;
8153
+ const orderId = isMarketProps(buyModalProps) ? buyModalProps.orderId : "";
8154
+ const customCreditCardProviderCallback = isMarketProps(buyModalProps) ? buyModalProps.customCreditCardProviderCallback : void 0;
8155
+ const buyAnalyticsId = useBuyAnalyticsId();
8156
+ const { address } = useAccount();
8157
+ return useQuery({
8158
+ queryKey: [
8159
+ "buyCollectableParams",
8160
+ buyModalProps,
8161
+ args
8162
+ ],
8163
+ queryFn: !!address && !!priceCurrencyAddress && !!quantity && !!steps && (marketplaceType === "market" ? !!marketplaceKind : true) ? () => getBuyCollectableParams({
8164
+ chainId,
8165
+ address,
8166
+ collectionAddress,
8167
+ tokenId,
8168
+ marketplaceKind,
8169
+ orderId,
8170
+ quantity,
8171
+ priceCurrencyAddress,
8172
+ successActionButtons,
8173
+ customCreditCardProviderCallback,
8174
+ skipNativeBalanceCheck,
8175
+ nativeTokenAddress,
8176
+ buyAnalyticsId,
8177
+ onRampProvider,
8178
+ checkoutMode,
8179
+ steps,
8180
+ marketplaceType
8181
+ }) : skipToken,
8182
+ retry: false
8183
+ });
8184
+ };
8185
+
8186
+ //#endregion
8187
+ //#region src/react/ui/modals/BuyModal/components/sequence-checkout/SequenceCheckoutNew.tsx
8188
+ const SequenceCheckout = ({ steps, contractType, primarySaleItem }) => {
8189
+ const modalProps = useBuyModalProps();
8190
+ const isMarket = isMarketProps(modalProps);
8191
+ const isShop = isShopProps(modalProps);
8192
+ const paymentModalState = usePaymentModalState();
8193
+ const { chainId, collectionAddress, hideQuantitySelector } = modalProps;
8194
+ const orderId = isMarket ? modalProps.orderId : "";
8195
+ const marketplaceKind = isMarket ? modalProps.marketplace : void 0;
8196
+ const { data: marketOrders } = useOrders({
8197
+ chainId,
8198
+ input: marketplaceKind && orderId ? [{
8199
+ contractAddress: collectionAddress,
8200
+ orderId,
8201
+ marketplace: marketplaceKind
8202
+ }] : [],
8203
+ query: { enabled: isMarket && !!orderId && !!marketplaceKind }
8204
+ });
8205
+ const marketOrder = marketOrders?.orders[0];
8206
+ const paymentModalParams = usePaymentModalParams({
8207
+ quantity: useQuantity(),
8208
+ marketplaceKind,
8209
+ priceCurrencyAddress: isMarket ? marketOrder?.priceCurrencyAddress : primarySaleItem?.currencyAddress,
8210
+ steps,
8211
+ marketplaceType: isMarket ? "market" : "shop"
8212
+ });
8213
+ if (!hideQuantitySelector && contractType === ContractType$1.ERC1155 && paymentModalState === "idle") {
8214
+ const quantityRemaining = isMarket ? marketOrder?.quantityRemaining : primarySaleItem?.supply;
8215
+ const unlimitedSupply = isShop && primarySaleItem?.unlimitedSupply ? primarySaleItem?.unlimitedSupply : false;
8216
+ return /* @__PURE__ */ jsx(ERC1155QuantityModal, {
8217
+ order: marketOrder,
8218
+ cardType: isMarket ? "market" : "shop",
8219
+ salePrice: isShop ? {
8220
+ amount: primarySaleItem?.priceAmount || 0n,
8221
+ currencyAddress: primarySaleItem?.currencyAddress
8222
+ } : void 0,
8223
+ quantityRemaining: quantityRemaining ?? 0n,
8224
+ unlimitedSupply,
8225
+ chainId
8226
+ });
8227
+ }
8228
+ if (paymentModalState === "closed") return null;
8229
+ return /* @__PURE__ */ jsx(ActionModal, {
8230
+ onClose: () => {
8231
+ buyModalStore.send({ type: "close" });
8363
8232
  },
8364
- listingCurrency: {
8365
- symbol: "BERA",
8366
- address: zeroAddress
8367
- }
8368
- },
8369
- "81457": {
8370
- chainId: 81457,
8371
- openseaId: "blast",
8372
- name: "Blast",
8373
- nativeCurrency: {
8374
- symbol: "ETH",
8375
- address: zeroAddress
8233
+ type: "buy",
8234
+ chainId,
8235
+ queries: { paymentModalParams },
8236
+ title: "Checkout",
8237
+ onErrorDismiss: () => {
8238
+ buyModalStore.send({ type: "close" });
8376
8239
  },
8377
- wrappedNativeCurrency: { address: "0x4300000000000000000000000000000000000004" },
8378
- offerCurrency: {
8379
- symbol: "WETH",
8380
- address: "0x4300000000000000000000000000000000000004"
8240
+ onErrorAction: () => {
8241
+ buyModalStore.send({ type: "close" });
8381
8242
  },
8382
- listingCurrency: {
8383
- symbol: "ETH",
8384
- address: zeroAddress
8243
+ children: ({ paymentModalParams: paymentModalParams$1 }) => {
8244
+ if (!steps) return /* @__PURE__ */ jsxs("div", {
8245
+ className: "flex h-24 items-center justify-center gap-4",
8246
+ children: [/* @__PURE__ */ jsx(Spinner, { size: "lg" }), /* @__PURE__ */ jsx(Text, {
8247
+ className: "pulse",
8248
+ children: "Loading checkout"
8249
+ })]
8250
+ });
8251
+ return /* @__PURE__ */ jsx(PaymentModalOpener, { paymentModalParams: paymentModalParams$1 });
8385
8252
  }
8386
- },
8387
- "7777777": {
8388
- chainId: 7777777,
8389
- openseaId: "zora",
8390
- name: "Zora",
8391
- nativeCurrency: {
8392
- symbol: "ETH",
8393
- address: zeroAddress
8253
+ });
8254
+ };
8255
+ const PaymentModalOpener = ({ paymentModalParams }) => {
8256
+ const { openSelectPaymentModal } = useSelectPaymentModal();
8257
+ useEffect(() => {
8258
+ if (paymentModalParams) {
8259
+ openSelectPaymentModal(paymentModalParams);
8260
+ buyModalStore.send({ type: "openPaymentModal" });
8261
+ }
8262
+ }, [paymentModalParams, openSelectPaymentModal]);
8263
+ return null;
8264
+ };
8265
+ var SequenceCheckoutNew_default = SequenceCheckout;
8266
+
8267
+ //#endregion
8268
+ //#region src/react/ui/modals/BuyModal/components/TrailsCss.ts
8269
+ /**
8270
+ * Custom CSS to style the Trails widget to match the Sequence Marketplace SDK design system.
8271
+ *
8272
+ * This CSS overrides the Trails widget's default theme variables with Sequence design tokens.
8273
+ * The CSS is injected into the Trails widget's shadow DOM via the customCss prop.
8274
+ *
8275
+ * Note: The ShadowPortal wraps CSS variables in :root/:host selectors, but we provide
8276
+ * the full CSS string here including both variable declarations and class overrides.
8277
+ *
8278
+ * Color mapping (Sequence Design System -> Trails Variables):
8279
+ * - seq-color-background-primary (#000000 black) -> trails-bg-primary
8280
+ * - seq-color-background-secondary (#18181b zinc-900) -> trails-bg-secondary
8281
+ * - seq-color-background-raised (#27272a zinc-800) -> trails-bg-card, trails-bg-tertiary
8282
+ * - seq-color-background-muted (#09090b zinc-950) -> used for inputs/dropdowns
8283
+ * - seq-color-border-normal (#3f3f46 zinc-700) -> trails-border-primary
8284
+ * - seq-color-border-hover (#52525b zinc-600) -> trails-border-secondary
8285
+ * - seq-color-border-focus (#8b5cf6 violet-500) -> focus borders
8286
+ */
8287
+ const TRAILS_CUSTOM_CSS = `
8288
+ }
8289
+
8290
+ /* ========================================
8291
+ * CSS Variable Overrides - Match Sequence Design System
8292
+ * These are wrapped in :root/:host by ShadowPortal
8293
+ * ======================================== */
8294
+
8295
+ :root, :host, [data-theme="dark"] {
8296
+ /* Background Colors */
8297
+ --trails-bg-primary: rgb(0 0 0) !important;
8298
+ --trails-bg-secondary: rgb(24 24 27) !important;
8299
+ --trails-bg-secondary-hover: rgb(39 39 42) !important;
8300
+ --trails-bg-secondary-focus-border: rgb(63 63 70) !important;
8301
+ --trails-bg-tertiary: rgb(39 39 42) !important;
8302
+ --trails-bg-card: rgb(24 24 27) !important;
8303
+ --trails-bg-overlay: rgb(0 0 0) !important;
8304
+
8305
+ /* Text Colors */
8306
+ --trails-text-primary: rgb(255 255 255) !important;
8307
+ --trails-text-secondary: rgba(255 255 255 / 0.8) !important;
8308
+ --trails-text-tertiary: rgba(255 255 255 / 0.6) !important;
8309
+ --trails-text-muted: rgb(113 113 122) !important;
8310
+ --trails-text-inverse: rgb(0 0 0) !important;
8311
+
8312
+ /* Border Colors */
8313
+ --trails-border-primary: rgb(63 63 70) !important;
8314
+ --trails-border-secondary: rgb(82 82 91) !important;
8315
+ --trails-border-tertiary: rgb(39 39 42) !important;
8316
+
8317
+ /* Interactive Colors */
8318
+ --trails-hover-bg: rgb(24 24 27) !important;
8319
+ --trails-hover-text: rgb(255 255 255) !important;
8320
+
8321
+ /* Input Field Colors */
8322
+ --trails-input-bg: rgb(0 0 0) !important;
8323
+ --trails-input-border: rgb(39 39 42) !important;
8324
+ --trails-input-text: rgb(255 255 255) !important;
8325
+ --trails-input-placeholder: rgb(113 113 122) !important;
8326
+ --trails-input-focus-border: rgb(139 92 246) !important;
8327
+
8328
+ /* Dropdown Colors */
8329
+ --trails-dropdown-bg: rgb(0 0 0) !important;
8330
+ --trails-dropdown-border: rgb(39 39 42) !important;
8331
+ --trails-dropdown-text: rgb(255 255 255) !important;
8332
+ --trails-dropdown-hover-bg: rgb(24 24 27) !important;
8333
+ --trails-dropdown-selected-bg: rgb(39 39 42) !important;
8334
+ --trails-dropdown-selected-text: rgb(255 255 255) !important;
8335
+ --trails-dropdown-focus-border: rgb(139 92 246) !important;
8336
+
8337
+ /* Modal Button Colors */
8338
+ --trails-modal-button-bg: transparent !important;
8339
+ --trails-modal-button-hover-bg: rgba(255 255 255 / 0.1) !important;
8340
+ --trails-modal-button-text: rgb(255 255 255) !important;
8341
+ --trails-modal-button-shadow: 0 1px 2px 0 rgba(0 0 0 / 0.1) !important;
8342
+
8343
+ /* Token List Colors */
8344
+ --trails-list-bg: rgb(0 0 0) !important;
8345
+ --trails-list-border: rgb(39 39 42) !important;
8346
+ --trails-list-hover-bg: rgb(24 24 27) !important;
8347
+ --trails-list-item-bg: transparent !important;
8348
+ --trails-list-item-selected-bg: rgb(39 39 42) !important;
8349
+
8350
+ /* Widget Border and Radius */
8351
+ --trails-widget-border: none !important;
8352
+ --trails-border-radius-widget: 24px !important;
8353
+ --trails-border-radius-button: 8px !important;
8354
+ --trails-border-radius-input: 8px !important;
8355
+ --trails-border-radius-dropdown: 8px !important;
8356
+ --trails-border-radius-container: 8px !important;
8357
+ --trails-border-radius-list: 8px !important;
8358
+ --trails-border-radius-list-button: 8px !important;
8359
+ --trails-border-radius-large-button: 8px !important;
8360
+
8361
+ /* Status Colors */
8362
+ --trails-success-bg: rgba(34 197 94 / 0.2) !important;
8363
+ --trails-success-text: rgb(34 197 94) !important;
8364
+ --trails-success-border: rgba(34 197 94 / 0.3) !important;
8365
+
8366
+ --trails-warning-bg: rgba(234 179 8 / 0.2) !important;
8367
+ --trails-warning-text: rgb(234 179 8) !important;
8368
+ --trails-warning-border: rgba(234 179 8 / 0.3) !important;
8369
+
8370
+ --trails-error-bg: rgba(239 68 68 / 0.2) !important;
8371
+ --trails-error-text: rgb(239 68 68) !important;
8372
+ --trails-error-border: rgba(239 68 68 / 0.3) !important;
8373
+
8374
+ /* Shadow */
8375
+ --trails-shadow: 0 4px 6px -1px rgba(0 0 0 / 0.1), 0 2px 4px -1px rgba(0 0 0 / 0.06) !important;
8376
+
8377
+ /* Primary Button */
8378
+ --trails-primary: rgb(255 255 255) !important;
8379
+ --trails-primary-hover: rgba(255 255 255 / 0.9) !important;
8380
+ --trails-primary-disabled: rgb(63 63 70) !important;
8381
+ --trails-primary-disabled-text: rgb(113 113 122) !important;
8382
+
8383
+ /* Percentage Button Colors */
8384
+ --trails-percentage-button-bg: rgb(24 24 27) !important;
8385
+ --trails-percentage-button-text: rgb(161 161 170) !important;
8386
+ --trails-percentage-button-hover-bg: rgb(39 39 42) !important;
8387
+
8388
+ /* Font Family */
8389
+ --trails-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
8390
+ }
8391
+
8392
+ /* ========================================
8393
+ * Direct Tailwind Class Overrides
8394
+ * Override hard-coded Tailwind classes used in Trails components
8395
+ * ======================================== */
8396
+
8397
+ /* White backgrounds -> black */
8398
+ .bg-white,
8399
+ .dark\\:bg-gray-900 {
8400
+ background-color: rgb(0 0 0) !important;
8401
+ }
8402
+
8403
+ /* Gray-800 backgrounds -> black */
8404
+ .bg-gray-800,
8405
+ .dark\\:bg-gray-800 {
8406
+ background-color: rgb(0 0 0) !important;
8407
+ }
8408
+
8409
+ /* Gray-700 backgrounds -> zinc-800 */
8410
+ .bg-gray-700,
8411
+ .dark\\:bg-gray-700 {
8412
+ background-color: rgb(39 39 42) !important;
8413
+ }
8414
+
8415
+ /* Hover states */
8416
+ .hover\\:bg-gray-50:hover {
8417
+ background-color: rgb(24 24 27) !important;
8418
+ }
8419
+
8420
+ .dark\\:hover\\:bg-gray-800:hover {
8421
+ background-color: rgb(24 24 27) !important;
8422
+ }
8423
+
8424
+ .dark\\:hover\\:bg-gray-700:hover {
8425
+ background-color: rgb(39 39 42) !important;
8426
+ }
8427
+
8428
+ /* Focus states */
8429
+ .focus-within\\:\\!bg-white:focus-within {
8430
+ background-color: rgb(0 0 0) !important;
8431
+ }
8432
+
8433
+ .dark\\:focus-within\\:\\!bg-gray-800:focus-within {
8434
+ background-color: rgb(0 0 0) !important;
8435
+ }
8436
+
8437
+ /* Border colors */
8438
+ .border-gray-200 {
8439
+ border-color: rgb(39 39 42) !important;
8440
+ }
8441
+
8442
+ .dark\\:border-gray-700 {
8443
+ border-color: rgb(39 39 42) !important;
8444
+ }
8445
+
8446
+ .border-gray-300 {
8447
+ border-color: rgb(63 63 70) !important;
8448
+ }
8449
+
8450
+ .dark\\:border-gray-600 {
8451
+ border-color: rgb(63 63 70) !important;
8452
+ }
8453
+
8454
+ /* Text colors */
8455
+ .text-gray-900 {
8456
+ color: rgb(255 255 255) !important;
8457
+ }
8458
+
8459
+ .dark\\:text-white {
8460
+ color: rgb(255 255 255) !important;
8461
+ }
8462
+
8463
+ .text-gray-500,
8464
+ .dark\\:text-gray-400 {
8465
+ color: rgb(161 161 170) !important;
8466
+ }
8467
+
8468
+ .text-black,
8469
+ .dark\\:text-blue-300 {
8470
+ color: rgb(255 255 255) !important;
8471
+ }
8472
+
8473
+ /* Primary button gradient - Match Sequence design */
8474
+ .bg-blue-500 {
8475
+ background: linear-gradient(89.69deg, #4411e1 0.27%, #7537f9 99.73%) !important;
8476
+ }
8477
+
8478
+ .hover\\:bg-blue-600:hover {
8479
+ background: linear-gradient(89.69deg, #3a0ec7 0.27%, #6229e0 99.73%) !important;
8480
+ opacity: 0.9;
8481
+ }
8482
+
8483
+ {
8484
+ `;
8485
+
8486
+ //#endregion
8487
+ //#region src/react/ui/modals/BuyModal/components/BuyModalContent.tsx
8488
+ const BuyModalContent = () => {
8489
+ const { modalProps, close, steps, primarySaleItem, marketOrder, collectible, buyStep, trailsDestination, isLoading, collection, checkoutMode, formattedAmount, isMarket, isShop, handleTrailsSuccess, handleTransactionSuccess, error, refetchAll } = useBuyModalContext();
8490
+ const currencyAddress = isShop ? primarySaleItem?.currencyAddress : marketOrder?.priceCurrencyAddress;
8491
+ if (error) return /* @__PURE__ */ jsx(Modal, {
8492
+ isDismissible: true,
8493
+ onClose: close,
8494
+ overlayProps: MODAL_OVERLAY_PROPS,
8495
+ contentProps: {
8496
+ style: {
8497
+ width: "400px",
8498
+ height: "auto"
8499
+ },
8500
+ className: "overflow-y-auto"
8394
8501
  },
8395
- wrappedNativeCurrency: { address: "0x4200000000000000000000000000000000000006" },
8396
- offerCurrency: {
8397
- symbol: "WETH",
8398
- address: "0x4200000000000000000000000000000000000006"
8502
+ children: /* @__PURE__ */ jsx(ModalInitializationError, {
8503
+ error,
8504
+ onTryAgain: refetchAll,
8505
+ onClose: close
8506
+ })
8507
+ });
8508
+ if (typeof checkoutMode === "object" && checkoutMode.mode === "sequence-checkout") return /* @__PURE__ */ jsx(SequenceCheckoutNew_default, {
8509
+ steps,
8510
+ contractType: collection?.type,
8511
+ primarySaleItem
8512
+ });
8513
+ return /* @__PURE__ */ jsxs(Dialog, {
8514
+ open: true,
8515
+ onOpenChange: (open) => !open && close(),
8516
+ children: [/* @__PURE__ */ jsx(DialogOverlay, { style: MODAL_OVERLAY_PROPS.style }), /* @__PURE__ */ jsx(DialogContent, {
8517
+ className: "h-auto w-[450px] overflow-y-auto overflow-x-hidden",
8518
+ children: /* @__PURE__ */ jsxs("div", {
8519
+ className: "relative flex grow flex-col items-center",
8520
+ children: [
8521
+ /* @__PURE__ */ jsx(Text, {
8522
+ className: "w-full text-center font-body font-bold text-large text-text-100",
8523
+ children: "Complete Your Purchase"
8524
+ }),
8525
+ isLoading && /* @__PURE__ */ jsx("div", {
8526
+ className: "flex w-full items-center justify-center py-8",
8527
+ children: /* @__PURE__ */ jsx(ProgressiveLoadingMessage, {})
8528
+ }),
8529
+ !isLoading && (checkoutMode === "crypto" || isShop && primarySaleItem?.priceAmount === 0n) && steps && steps.length > 0 && /* @__PURE__ */ jsx(CryptoPaymentModal, {
8530
+ chainId: modalProps.chainId,
8531
+ steps,
8532
+ onSuccess: handleTransactionSuccess
8533
+ }),
8534
+ !isLoading && checkoutMode === "trails" && buyStep && (!isMarket || trailsDestination) && !(isShop && primarySaleItem?.priceAmount === 0n) && /* @__PURE__ */ jsxs("div", {
8535
+ className: "pointer-events-auto w-full",
8536
+ children: [collectible && /* @__PURE__ */ jsx(CollectibleMetadataSummary, {
8537
+ checkoutMode: "trails",
8538
+ collectible,
8539
+ collection
8540
+ }), isMarket && trailsDestination ? /* @__PURE__ */ jsx(TrailsWidget, {
8541
+ toChainId: modalProps.chainId,
8542
+ toAddress: trailsDestination.recipient,
8543
+ toToken: trailsDestination.paymentTokenAddress,
8544
+ toAmount: formattedAmount,
8545
+ toCalldata: trailsDestination.destinationCalldata,
8546
+ renderInline: true,
8547
+ theme: "dark",
8548
+ mode: "pay",
8549
+ customCss: TRAILS_CUSTOM_CSS,
8550
+ onDestinationConfirmation: handleTrailsSuccess,
8551
+ payMessage: "{TO_TOKEN_IMAGE}{TO_AMOUNT}{TO_TOKEN_SYMBOL}{TO_AMOUNT_USD}"
8552
+ }, `market-${marketOrder?.orderId}-${trailsDestination.destinationCalldata}`) : /* @__PURE__ */ jsx(TrailsWidget, {
8553
+ toChainId: modalProps.chainId,
8554
+ toAddress: buyStep.to,
8555
+ toToken: currencyAddress,
8556
+ toAmount: formattedAmount,
8557
+ toCalldata: buyStep.data,
8558
+ renderInline: true,
8559
+ theme: "dark",
8560
+ mode: "pay",
8561
+ customCss: TRAILS_CUSTOM_CSS,
8562
+ onDestinationConfirmation: handleTrailsSuccess,
8563
+ payMessage: "{TO_TOKEN_IMAGE}{TO_AMOUNT}{TO_TOKEN_SYMBOL}{TO_AMOUNT_USD}"
8564
+ }, `direct-${buyStep.to}-${buyStep.data}`)]
8565
+ })
8566
+ ]
8567
+ })
8568
+ })]
8569
+ });
8570
+ };
8571
+ const ProgressiveLoadingMessage = () => {
8572
+ const [showSecondaryMessage, setShowSecondaryMessage] = useState(false);
8573
+ const timerRef = useRef(null);
8574
+ if (!timerRef.current) timerRef.current = setTimeout(() => {
8575
+ setShowSecondaryMessage(true);
8576
+ }, 3e3);
8577
+ return /* @__PURE__ */ jsxs("div", {
8578
+ className: "flex items-center gap-4",
8579
+ children: [/* @__PURE__ */ jsx("div", {
8580
+ className: cn$1("transition-all duration-300", showSecondaryMessage ? "h-10 w-10" : "h-5 w-5"),
8581
+ children: /* @__PURE__ */ jsx(Spinner, { className: "h-full w-full transition-all duration-150" })
8582
+ }), /* @__PURE__ */ jsxs("div", {
8583
+ className: "flex flex-col gap-2",
8584
+ children: [/* @__PURE__ */ jsx("p", {
8585
+ className: "animate-pulse text-text-100",
8586
+ children: "Loading payment options..."
8587
+ }), showSecondaryMessage && /* @__PURE__ */ jsx("p", {
8588
+ className: "text-small text-text-50",
8589
+ children: "This is taking longer than expected."
8590
+ })]
8591
+ })]
8592
+ });
8593
+ };
8594
+
8595
+ //#endregion
8596
+ //#region src/react/ui/modals/BuyModal/components/Modal.tsx
8597
+ const BuyModal = () => {
8598
+ if (!useIsOpen()) return null;
8599
+ return /* @__PURE__ */ jsx(BuyModalWithTrailsProvider, {});
8600
+ };
8601
+ const useTrailsWaasFeeOptions = ({ chainIdOverride } = {}) => {
8602
+ const config = useConfig$1();
8603
+ const { pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption } = useWaasFeeOptions$1(chainIdOverride ?? 0, config);
8604
+ return [
8605
+ pendingFeeOptionConfirmation,
8606
+ confirmPendingFeeOption,
8607
+ rejectPendingFeeOption
8608
+ ];
8609
+ };
8610
+ const BuyModalWithTrailsProvider = () => {
8611
+ const config = useConfig$1();
8612
+ const wagmiConfig = useConfig();
8613
+ return /* @__PURE__ */ jsx(TrailsProvider, {
8614
+ config: {
8615
+ trailsApiKey: config.projectAccessKey,
8616
+ trailsApiUrl: getTrailsApiUrl(config),
8617
+ sequenceIndexerUrl: getSequenceIndexerUrl(config),
8618
+ sequenceNodeGatewayUrl: getSequenceNodeGatewayUrl(config),
8619
+ sequenceApiUrl: getSequenceApiUrl(config),
8620
+ walletConnectProjectId: config.walletConnectProjectId,
8621
+ adapters: [wagmiAdapter({
8622
+ wagmiConfig,
8623
+ sequence: { useWaasFeeOptions: useTrailsWaasFeeOptions }
8624
+ })]
8399
8625
  },
8400
- listingCurrency: {
8401
- symbol: "ETH",
8402
- address: zeroAddress
8403
- }
8404
- }
8626
+ children: /* @__PURE__ */ jsx(BuyModalContent, {})
8627
+ });
8405
8628
  };
8406
- function getOpenseaCurrencyForChain(chainId, modalType) {
8407
- const config = OPENSEA_CHAIN_CURRENCIES[chainId.toString()];
8408
- if (!config) return;
8409
- return modalType === "listing" ? config.listingCurrency : config.offerCurrency;
8629
+
8630
+ //#endregion
8631
+ //#region src/react/ui/modals/_internal/components/floorPriceText/index.tsx
8632
+ function FloorPriceText({ chainId, collectionAddress, tokenId, price, onBuyNow }) {
8633
+ const { data: listing, isLoading: listingLoading } = useCollectibleMarketLowestListing({
8634
+ tokenId,
8635
+ chainId,
8636
+ collectionAddress,
8637
+ filter: { currencies: [price.currency.contractAddress] }
8638
+ });
8639
+ const floorPriceRaw = listing?.priceAmount;
8640
+ const floorPriceFormatted = listing?.priceAmountFormatted;
8641
+ const { data: priceComparison, isLoading: comparisonLoading } = useCurrencyComparePrices({
8642
+ chainId,
8643
+ priceAmountRaw: price.amountRaw?.toString() || "0",
8644
+ priceCurrencyAddress: price.currency.contractAddress,
8645
+ compareToPriceAmountRaw: floorPriceRaw?.toString() || "0",
8646
+ compareToPriceCurrencyAddress: listing?.priceCurrencyAddress || price.currency.contractAddress,
8647
+ query: { enabled: !!floorPriceRaw && !listingLoading && price.amountRaw !== 0n }
8648
+ });
8649
+ if (!floorPriceRaw || listingLoading || price.amountRaw === 0n || comparisonLoading) return null;
8650
+ let floorPriceDifferenceText = "Same as floor price";
8651
+ let showBuyNowButton = false;
8652
+ if (priceComparison) if (priceComparison.status === "same") {
8653
+ floorPriceDifferenceText = "Same as floor price";
8654
+ showBuyNowButton = true;
8655
+ } else if (priceComparison.status === "below") floorPriceDifferenceText = `${priceComparison.percentageDifferenceFormatted}% below floor price`;
8656
+ else {
8657
+ floorPriceDifferenceText = `${priceComparison.percentageDifferenceFormatted}% above floor price`;
8658
+ showBuyNowButton = true;
8659
+ }
8660
+ return /* @__PURE__ */ jsxs("div", {
8661
+ className: "flex w-full flex-wrap items-center justify-between gap-2",
8662
+ children: [/* @__PURE__ */ jsx(Text, {
8663
+ className: "text-left font-body font-medium text-muted text-xs",
8664
+ children: floorPriceDifferenceText
8665
+ }), showBuyNowButton && onBuyNow && /* @__PURE__ */ jsxs(Button, {
8666
+ size: "xs",
8667
+ variant: "text",
8668
+ className: "text-indigo-400 text-xs",
8669
+ onClick: onBuyNow,
8670
+ children: [
8671
+ "Buy for ",
8672
+ floorPriceFormatted,
8673
+ " ",
8674
+ price.currency.symbol
8675
+ ]
8676
+ })]
8677
+ });
8410
8678
  }
8411
8679
 
8680
+ //#endregion
8681
+ //#region src/react/ui/components/_internals/custom-select/CustomSelect.tsx
8682
+ const CustomSelect = ({ items, onValueChange, defaultValue, placeholder = "Select an option", disabled = false, className, testId = "custom-select" }) => {
8683
+ const [selectedItem, setSelectedItem] = useState(defaultValue);
8684
+ const handleValueChange = (item) => {
8685
+ setSelectedItem(item);
8686
+ onValueChange?.(item.value);
8687
+ };
8688
+ return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
8689
+ asChild: true,
8690
+ disabled,
8691
+ children: /* @__PURE__ */ jsx(Button, {
8692
+ size: "xs",
8693
+ shape: "circle",
8694
+ className: `py-1.5 pl-3 hover:bg-overlay-light ${className || ""}`,
8695
+ "data-testid": `${testId}-trigger`,
8696
+ children: /* @__PURE__ */ jsxs("div", {
8697
+ className: "flex items-center justify-center gap-1 truncate pr-3",
8698
+ children: [/* @__PURE__ */ jsx(Text, {
8699
+ variant: "xsmall",
8700
+ color: "text100",
8701
+ fontWeight: "bold",
8702
+ children: selectedItem ? selectedItem.content : placeholder
8703
+ }), /* @__PURE__ */ jsx(ChevronDownIcon, { size: "xs" })]
8704
+ })
8705
+ })
8706
+ }), /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(DropdownMenuContent, {
8707
+ align: "end",
8708
+ side: "bottom",
8709
+ sideOffset: 8,
8710
+ className: "z-[1000] overflow-hidden rounded-xl border border-border-base bg-color-overlay-glass shadow-lg backdrop-blur-md",
8711
+ "data-testid": `${testId}-content`,
8712
+ children: /* @__PURE__ */ jsx("div", {
8713
+ className: "max-h-[240px] overflow-auto",
8714
+ children: items.map((item) => /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
8715
+ checked: selectedItem?.value === item.value,
8716
+ onCheckedChange: () => handleValueChange(item),
8717
+ disabled: item.disabled,
8718
+ className: "group relative flex cursor-pointer select-none items-center rounded-lg px-2 py-1.5 outline-none transition-colors hover:bg-background-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>span[data-state='checked']]:hidden",
8719
+ "data-testid": `${testId}-option-${item.value}`,
8720
+ children: /* @__PURE__ */ jsx("div", {
8721
+ className: "flex w-full items-center justify-between",
8722
+ children: /* @__PURE__ */ jsx("div", {
8723
+ className: "flex items-center gap-2 truncate",
8724
+ children: typeof item.content === "string" ? /* @__PURE__ */ jsx(Text, {
8725
+ variant: "small",
8726
+ color: selectedItem?.value === item.value ? "text100" : "text80",
8727
+ className: `truncate ${selectedItem?.value === item.value ? "font-bold" : ""}`,
8728
+ "data-testid": `${testId}-option-text-${item.value}`,
8729
+ children: item.content
8730
+ }) : /* @__PURE__ */ jsx("div", {
8731
+ className: "truncate",
8732
+ "data-testid": `${testId}-option-content-${item.value}`,
8733
+ children: item.content
8734
+ })
8735
+ })
8736
+ })
8737
+ }, item.value))
8738
+ })
8739
+ }) })] });
8740
+ };
8741
+
8412
8742
  //#endregion
8413
8743
  //#region src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx
8414
8744
  function CurrencyOptionsSelect({ chainId, collectionAddress, secondCurrencyAsDefault, selectedCurrency, onCurrencyChange, includeNativeCurrency, orderbookKind, modalType }) {
@@ -8418,7 +8748,7 @@ function CurrencyOptionsSelect({ chainId, collectionAddress, secondCurrencyAsDef
8418
8748
  includeNativeCurrency
8419
8749
  });
8420
8750
  let filteredCurrencies = currencies;
8421
- if (currencies && orderbookKind === OrderbookKind.opensea && modalType) {
8751
+ if (currencies && isOpenSeaOrderbook(orderbookKind) && modalType) {
8422
8752
  const openseaCurrency = getOpenseaCurrencyForChain(chainId, modalType);
8423
8753
  if (openseaCurrency) filteredCurrencies = currencies.filter((currency) => compareAddress(currency.contractAddress, openseaCurrency.address));
8424
8754
  }
@@ -8455,7 +8785,7 @@ var currencyOptionsSelect_default = CurrencyOptionsSelect;
8455
8785
 
8456
8786
  //#endregion
8457
8787
  //#region src/react/ui/modals/_internal/components/priceInput/index.tsx
8458
- function PriceInput({ chainId, collectionAddress, price, onPriceChange, onCurrencyChange, checkBalance, secondCurrencyAsDefault, includeNativeCurrency, disabled, orderbookKind, setOpenseaLowestPriceCriteriaMet, modalType, feeData }) {
8788
+ function PriceInput({ chainId, collectionAddress, price, onPriceChange, onCurrencyChange, checkBalance, secondCurrencyAsDefault, includeNativeCurrency, disabled, orderbookKind, modalType, feeData }) {
8459
8789
  const { address: accountAddress } = useAccount();
8460
8790
  const inputRef = useRef(null);
8461
8791
  const currency = price?.currency;
@@ -8469,7 +8799,7 @@ function PriceInput({ chainId, collectionAddress, price, onPriceChange, onCurren
8469
8799
  chainId,
8470
8800
  currencyAddress: currencyAddress ?? zeroAddress,
8471
8801
  amountRaw: priceAmountRaw?.toString(),
8472
- query: { enabled: orderbookKind === OrderbookKind.opensea && !!currencyAddress && !!priceAmountRaw && !!setOpenseaLowestPriceCriteriaMet }
8802
+ query: { enabled: isOpenSeaOrderbook(orderbookKind) && !!currencyAddress && !!priceAmountRaw }
8473
8803
  });
8474
8804
  useEffect(() => {
8475
8805
  if (inputRef.current) inputRef.current.focus();
@@ -8512,9 +8842,8 @@ function PriceInput({ chainId, collectionAddress, price, onPriceChange, onCurren
8512
8842
  }),
8513
8843
  children
8514
8844
  });
8515
- const openseaLowestPriceCriteriaMet = orderbookKind === OrderbookKind.opensea && !!conversion?.usdAmount && conversion.usdAmount >= .01;
8845
+ const openseaLowestPriceCriteriaMet = isOpenSeaOrderbook(orderbookKind) && conversion?.usdAmount !== void 0 && conversion.usdAmount >= .01;
8516
8846
  if (checkBalance?.enabled) checkBalance.callback(balanceError);
8517
- if (setOpenseaLowestPriceCriteriaMet) setOpenseaLowestPriceCriteriaMet(openseaLowestPriceCriteriaMet);
8518
8847
  const [value, setValue] = useState("0");
8519
8848
  const prevCurrencyDecimals = useRef(currencyDecimals);
8520
8849
  const [openseaDecimalError, setOpenseaDecimalError] = useState(null);
@@ -8542,7 +8871,7 @@ function PriceInput({ chainId, collectionAddress, price, onPriceChange, onCurren
8542
8871
  const newValue = event.target.value;
8543
8872
  setValue(newValue);
8544
8873
  if (!price || !onPriceChange) return;
8545
- if (orderbookKind === OrderbookKind.opensea && modalType === "offer") {
8874
+ if (isOpenSeaOrderbook(orderbookKind) && modalType === "offer") {
8546
8875
  const validation = validateOpenseaOfferDecimals(newValue);
8547
8876
  if (!validation.isValid) {
8548
8877
  setOpenseaDecimalError(validation.errorMessage || null);
@@ -8647,12 +8976,12 @@ function PriceInput({ chainId, collectionAddress, price, onPriceChange, onCurren
8647
8976
  })]
8648
8977
  })
8649
8978
  }),
8650
- !balanceError && priceAmountRaw !== 0n && !openseaLowestPriceCriteriaMet && orderbookKind === OrderbookKind.opensea && !isConversionLoading && modalType === "offer" && !openseaDecimalError && /* @__PURE__ */ jsx(Text, {
8979
+ !balanceError && priceAmountRaw !== 0n && !openseaLowestPriceCriteriaMet && isOpenSeaOrderbook(orderbookKind) && !isConversionLoading && modalType === "offer" && !openseaDecimalError && /* @__PURE__ */ jsx(Text, {
8651
8980
  className: "absolute -bottom-5 font-body font-medium text-xs",
8652
8981
  color: "negative",
8653
8982
  children: "Lowest price must be at least $0.01"
8654
8983
  }),
8655
- !balanceError && openseaDecimalError && orderbookKind === OrderbookKind.opensea && modalType === "offer" && /* @__PURE__ */ jsx(Text, {
8984
+ !balanceError && openseaDecimalError && isOpenSeaOrderbook(orderbookKind) && modalType === "offer" && /* @__PURE__ */ jsx(Text, {
8656
8985
  className: "font-body font-medium text-xs",
8657
8986
  color: "negative",
8658
8987
  children: openseaDecimalError
@@ -8665,7 +8994,7 @@ function PriceInput({ chainId, collectionAddress, price, onPriceChange, onCurren
8665
8994
  //#region src/react/ui/modals/_internal/helpers/currency.ts
8666
8995
  function filterCurrenciesForOrderbook(currencies, orderbookKind, chainId, side) {
8667
8996
  if (!currencies || currencies.length === 0) return [];
8668
- if (orderbookKind === OrderbookKind.opensea) {
8997
+ if (isOpenSeaOrderbook(orderbookKind)) {
8669
8998
  const openseaCurrency = getOpenseaCurrencyForChain(chainId, side);
8670
8999
  if (openseaCurrency) return currencies.filter((currency) => compareAddress(currency.contractAddress, openseaCurrency.address));
8671
9000
  }
@@ -8674,7 +9003,7 @@ function filterCurrenciesForOrderbook(currencies, orderbookKind, chainId, side)
8674
9003
  function getDefaultCurrency(currencies, orderbookKind, modalType) {
8675
9004
  if (currencies.length === 0) return null;
8676
9005
  if (modalType === "listing") return currencies[0];
8677
- return orderbookKind !== OrderbookKind.sequence_marketplace_v2 && currencies.length > 1 ? currencies[1] : currencies[0];
9006
+ return normalizeOrderbookKind(orderbookKind) !== OrderbookKind.sequence_marketplace_v2 && currencies.length > 1 ? currencies[1] : currencies[0];
8678
9007
  }
8679
9008
 
8680
9009
  //#endregion
@@ -8800,7 +9129,7 @@ const createListingModalStore = createStore({
8800
9129
  const useCreateListingModalState = () => {
8801
9130
  const { isOpen, tokenId, collectionAddress, chainId, priceInput, currencyAddress, quantityInput, expiryDays, isPriceTouched, isQuantityTouched } = useSelector(createListingModalStore, (state) => state.context);
8802
9131
  const { data: marketplaceConfig } = useMarketplaceConfig();
8803
- const orderbookKind = marketplaceConfig?.market.collections.find((collection) => collection.itemsAddress === collectionAddress)?.destinationMarketplace;
9132
+ const orderbookKind = findMarketCollection(marketplaceConfig?.market.collections ?? [], collectionAddress, chainId)?.destinationMarketplace;
8804
9133
  const closeModal = () => createListingModalStore.send({ type: "close" });
8805
9134
  const updatePriceInput = (value) => createListingModalStore.send({
8806
9135
  type: "updatePrice",
@@ -8845,7 +9174,7 @@ const useCreateListingModalState = () => {
8845
9174
  //#endregion
8846
9175
  //#region src/react/ui/modals/CreateListingModal/internal/listing-mutations.ts
8847
9176
  const useListingMutations = ({ chainId, collectionAddress, contractType, orderbookKind, listing, currencyDecimals, nftApprovalEnabled = true }) => {
8848
- const sdkConfig = useConfig();
9177
+ const sdkConfig = useConfig$1();
8849
9178
  const { address: ownerAddress } = useAccount();
8850
9179
  const publicClient = usePublicClient();
8851
9180
  const { show: showTxModal } = useTransactionStatusModal();
@@ -8977,7 +9306,7 @@ const useListingMutations = ({ chainId, collectionAddress, contractType, orderbo
8977
9306
  function useCreateListingModalContext() {
8978
9307
  const state = useCreateListingModalState();
8979
9308
  const { address } = useAccount();
8980
- const config = useConfig();
9309
+ const config = useConfig$1();
8981
9310
  const collectionQuery = useCollectionMetadata({
8982
9311
  chainId: state.chainId,
8983
9312
  collectionAddress: state.collectionAddress
@@ -9337,7 +9666,7 @@ const Modal$3 = () => {
9337
9666
 
9338
9667
  //#endregion
9339
9668
  //#region src/react/ui/modals/MakeOfferModal/internal/helpers/validation.ts
9340
- function validateOfferForm({ price, quantity, balance, lowestListing, orderbookKind }) {
9669
+ function validateOfferForm({ price, quantity, balance, lowestListing, orderbookKind, usdAmount }) {
9341
9670
  const validation = {
9342
9671
  price: {
9343
9672
  isValid: true,
@@ -9371,10 +9700,17 @@ function validateOfferForm({ price, quantity, balance, lowestListing, orderbookK
9371
9700
  error: meetsMinimum ? null : "Offer must be higher than lowest listing for OpenSea"
9372
9701
  };
9373
9702
  }
9703
+ if (orderbookKind === "opensea" && usdAmount !== void 0) {
9704
+ const meetsMinPrice = usdAmount >= .01;
9705
+ validation.openseaMinPrice = {
9706
+ isValid: meetsMinPrice,
9707
+ error: meetsMinPrice ? null : "Lowest price must be at least $0.01"
9708
+ };
9709
+ }
9374
9710
  return validation;
9375
9711
  }
9376
9712
  function isFormValid(validation) {
9377
- return validation.price.isValid && validation.quantity.isValid && validation.balance.isValid && (validation.openseaCriteria?.isValid ?? true);
9713
+ return validation.price.isValid && validation.quantity.isValid && validation.balance.isValid && (validation.openseaCriteria?.isValid ?? true) && (validation.openseaMinPrice?.isValid ?? true);
9378
9714
  }
9379
9715
 
9380
9716
  //#endregion
@@ -9440,7 +9776,7 @@ const makeOfferModalStore = createStore({
9440
9776
  const useMakeOfferModalState = () => {
9441
9777
  const { isOpen, tokenId, collectionAddress, chainId, priceInput, currencyAddress, quantityInput, expiryDays, isPriceTouched, isQuantityTouched } = useSelector(makeOfferModalStore, (state) => state.context);
9442
9778
  const { data: marketplaceConfig } = useMarketplaceConfig();
9443
- const orderbookKind = marketplaceConfig?.market.collections.find((collection) => collection.itemsAddress === collectionAddress)?.destinationMarketplace;
9779
+ const orderbookKind = findMarketCollection(marketplaceConfig?.market.collections ?? [], collectionAddress, chainId)?.destinationMarketplace;
9444
9780
  const closeModal = () => makeOfferModalStore.send({ type: "close" });
9445
9781
  const updatePriceInput = (value) => makeOfferModalStore.send({
9446
9782
  type: "updatePrice",
@@ -9485,7 +9821,7 @@ const useMakeOfferModalState = () => {
9485
9821
  //#endregion
9486
9822
  //#region src/react/ui/modals/MakeOfferModal/internal/offer-mutations.ts
9487
9823
  const useOfferMutations = ({ chainId, collectionAddress, contractType, orderbookKind, offer, currencyDecimals, needsApproval }) => {
9488
- const sdkConfig = useConfig();
9824
+ const sdkConfig = useConfig$1();
9489
9825
  const { address: makerAddress } = useAccount();
9490
9826
  const { show: showTxModal } = useTransactionStatusModal();
9491
9827
  const analytics = useAnalytics();
@@ -9610,7 +9946,7 @@ const useOfferMutations = ({ chainId, collectionAddress, contractType, orderbook
9610
9946
  function useMakeOfferModalContext() {
9611
9947
  const state = useMakeOfferModalState();
9612
9948
  const { address } = useAccount();
9613
- const config = useConfig();
9949
+ const config = useConfig$1();
9614
9950
  const collectibleQuery = useCollectibleMetadata({
9615
9951
  chainId: state.chainId,
9616
9952
  collectionAddress: state.collectionAddress,
@@ -9653,6 +9989,12 @@ function useMakeOfferModalContext() {
9653
9989
  userAddress: address,
9654
9990
  query: { enabled: !!selectedCurrency?.contractAddress && !!address }
9655
9991
  });
9992
+ const { data: usdConversion } = useCurrencyConvertToUSD({
9993
+ chainId: state.chainId,
9994
+ currencyAddress: selectedCurrency?.contractAddress ?? zeroAddress,
9995
+ amountRaw: state.priceInput?.toString(),
9996
+ query: { enabled: isOpenSeaOrderbook(state.orderbookKind) && !!selectedCurrency?.contractAddress && !!state.priceInput }
9997
+ });
9656
9998
  const expiryDate = useMemo(() => new Date(Date.now() + state.expiryDays * 24 * 60 * 60 * 1e3), [state.expiryDays]);
9657
9999
  const priceDnum = [state.priceInput ? BigInt(state.priceInput) : 0n, selectedCurrency?.decimals ?? 0];
9658
10000
  const priceRaw = priceDnum[0];
@@ -9663,7 +10005,8 @@ function useMakeOfferModalContext() {
9663
10005
  quantity: quantityDnum,
9664
10006
  balance: currencyBalanceQuery.data?.value !== void 0 && selectedCurrency?.decimals ? [currencyBalanceQuery.data.value, selectedCurrency.decimals] : void 0,
9665
10007
  lowestListing: lowestListingQuery.data?.priceAmount && selectedCurrency?.decimals ? [BigInt(lowestListingQuery.data.priceAmount), selectedCurrency.decimals] : void 0,
9666
- orderbookKind: state.orderbookKind
10008
+ orderbookKind: state.orderbookKind,
10009
+ usdAmount: usdConversion?.usdAmount
9667
10010
  });
9668
10011
  const formIsValid = isFormValid(validation);
9669
10012
  const spenderAddress = getConduitAddressForOrderbook(state.orderbookKind);
@@ -9816,13 +10159,15 @@ function useMakeOfferModalContext() {
9816
10159
  price: validation.price,
9817
10160
  quantity: validation.quantity,
9818
10161
  balance: validation.balance,
9819
- openseaCriteria: validation.openseaCriteria
10162
+ openseaCriteria: validation.openseaCriteria,
10163
+ openseaMinPrice: validation.openseaMinPrice
9820
10164
  },
9821
10165
  errors: {
9822
10166
  price: state.isPriceTouched ? validation.price.error : void 0,
9823
10167
  quantity: state.isQuantityTouched ? validation.quantity.error : void 0,
9824
10168
  balance: state.isPriceTouched ? validation.balance.error : void 0,
9825
- openseaCriteria: state.isPriceTouched ? validation.openseaCriteria?.error : void 0
10169
+ openseaCriteria: state.isPriceTouched ? validation.openseaCriteria?.error : void 0,
10170
+ openseaMinPrice: state.isPriceTouched ? validation.openseaMinPrice?.error : void 0
9826
10171
  }
9827
10172
  },
9828
10173
  currencies: {
@@ -9852,7 +10197,7 @@ function useMakeOfferModalContext() {
9852
10197
  },
9853
10198
  get formError() {
9854
10199
  if (!this.currencies.isConfigured) return "No ERC-20 currencies are configured for this marketplace";
9855
- return this.form.errors.price || this.form.errors.quantity || this.form.errors.balance || this.form.errors.openseaCriteria;
10200
+ return this.form.errors.price || this.form.errors.quantity || this.form.errors.balance || this.form.errors.openseaCriteria || this.form.errors.openseaMinPrice;
9856
10201
  },
9857
10202
  get actions() {
9858
10203
  const needsApprovalAction = this.steps.approval && this.steps.approval.status !== "success" && priceRaw > 0n;
@@ -10113,7 +10458,7 @@ function useTransferModalContext() {
10113
10458
  const state = useTransferModalState();
10114
10459
  const { closeModal } = state;
10115
10460
  const { address } = useAccount();
10116
- const config = useConfig();
10461
+ const config = useConfig$1();
10117
10462
  const { isWaaS } = useConnectorMetadata();
10118
10463
  const { show: showTransactionStatusModal } = useTransactionStatusModal();
10119
10464
  const collectionQuery = useCollectionMetadata({
@@ -12269,6 +12614,17 @@ const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with shadow
12269
12614
  --tw-tracking: var(--tracking-normal);
12270
12615
  letter-spacing: var(--tracking-normal);
12271
12616
  }
12617
+ .text-small {
12618
+ font-family: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
12619
+ font-size: var(--text-xs);
12620
+ line-height: var(--tw-leading, var(--text-xs--line-height));
12621
+ --tw-leading: calc(var(--spacing) * 4);
12622
+ line-height: calc(var(--spacing) * 4);
12623
+ --tw-font-weight: var(--font-weight-medium);
12624
+ font-weight: var(--font-weight-medium);
12625
+ --tw-tracking: var(--tracking-wide);
12626
+ letter-spacing: var(--tracking-wide);
12627
+ }
12272
12628
  .font-body {
12273
12629
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
12274
12630
  }
@@ -12730,6 +13086,10 @@ const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with shadow
12730
13086
  --tw-duration: 100ms;
12731
13087
  transition-duration: 100ms;
12732
13088
  }
13089
+ .duration-150 {
13090
+ --tw-duration: 150ms;
13091
+ transition-duration: 150ms;
13092
+ }
12733
13093
  .duration-200 {
12734
13094
  --tw-duration: 200ms;
12735
13095
  transition-duration: 200ms;
@@ -15572,7 +15932,7 @@ const ShadowRoot = (props) => {
15572
15932
  //#endregion
15573
15933
  //#region src/react/providers/modal-provider.tsx
15574
15934
  const ModalProvider = ({ children }) => {
15575
- const { shadowDom, experimentalShadowDomCssOverride } = useConfig();
15935
+ const { shadowDom, experimentalShadowDomCssOverride } = useConfig$1();
15576
15936
  return /* @__PURE__ */ jsxs(Fragment, { children: [children, /* @__PURE__ */ jsx(SequenceCheckoutProvider, { children: /* @__PURE__ */ jsxs(ShadowRoot, {
15577
15937
  enabled: shadowDom ?? true,
15578
15938
  customCSS: experimentalShadowDomCssOverride,
@@ -16220,5 +16580,5 @@ function CollectibleCard(props) {
16220
16580
  }
16221
16581
 
16222
16582
  //#endregion
16223
- export { useMarketCardDataPaged as $, useCollectibleBalance as $t, useOrderSteps as A, useCollectionMarketItems as At, generateCancelTransaction as B, usePrimarySaleItems as Bt, useBuyModalContext as C, useCollectionActiveOffersCurrencies as Ct, useGetReceiptFromHash as D, useCollectionMetadata as Dt, useRoyalty as E, collectionActiveListingsCurrenciesQueryOptions as Et, generateListingTransaction as F, useCollectionList as Ft, useTransactionType as G, useCollectibleMarketLowestListing as Gt, useEnsureCorrectChain as H, useCollectibleMetadata as Ht, useGenerateListingTransaction as I, useMarketplaceConfig as It, useOpenConnectModal$1 as J, useCollectibleMarketListPaginated as Jt, usePrimarySaleTransactionSteps as K, useCollectibleMarketListingsCount as Kt, useCancelOrder as L, useCollectionBalanceDetails as Lt, useGenerateSellTransaction as M, useCollectionMarketFilteredCount as Mt, generateOfferTransaction as N, collectionMarketDetailPollingOptions as Nt, useTransferTokens as O, useCollectionMarketItemsPaginated as Ot, useGenerateOfferTransaction as P, useCollectionMarketDetailPolling as Pt, usePrimarySale721CardData as Q, useErc721SaleDetails as Qt, useCancelTransactionSteps as R, useCollectibleTokenBalances as Rt, ErrorBoundary as S, useCurrencyComparePrices as St, royaltyQueryOptions as T, useCollectionActiveListingsCurrencies as Tt, useAutoSelectFeeOption as U, useCollectibleMarketOffersCount as Ut, useGenerateCancelTransaction as V, usePrimarySaleItem as Vt, useBuyTransaction as W, useCollectibleMarketOffers as Wt, useFiltersProgressive as X, useCollectibleMarketHighestOffer as Xt, useFilters as Y, useCollectibleMarketList as Yt, usePrimarySale1155CardData as Z, useCollectibleMarketCount as Zt, PriceInput as _, useTokenBalances as _t, MarketCard as a, DatabeatAnalytics as an, ActionModal as at, LoadingModal as b, useCurrency as bt, useCreateListingModal as c, useSellModal as ct, TransferModal as d, useConnectorMetadata as dt, usePrimarySaleCheckoutOptions as en, useMarketCardData as et, useTransferModalContext as f, transactionPreview_default as ft, useCreateListingModalContext as g, useTokenCurrencyBalance as gt, CreateListingModal as h, useTokenMetadata as ht, NonTradableInventoryCard as i, MarketplaceSdkContext as in, selectWaasFeeOptions_default as it, generateSellTransaction as j, useCollectionMarketFloor as jt, useTransactionExecution as k, useCollectionMarketItemsCount as kt, useMakeOfferModal as l, transactionStatusModal_default as lt, useMakeOfferModalContext as m, useTokenMetadataSearch as mt, ShopCard as n, MarketplaceProvider as nn, TransactionDetails as nt, MarketCardPresentation as o, useAnalytics as on, BaseModal as ot, useTransferModal as p, useTokenRanges as pt, useMarketTransactionSteps as q, useCollectibleMarketListings as qt, ShopCardPresentation as r, MarketplaceQueryClientProvider as rn, TokenPreview as rt, ActionButton as s, useSellModalContext as st, CollectibleCard as t, useConfig as tn, SellModal as tt, ModalProvider as u, useTransactionStatusModal as ut, currencyOptionsSelect_default as v, useInventory as vt, useBuyModal as w, collectionActiveOffersCurrenciesQueryOptions as wt, ErrorModal as x, useCurrencyConvertToUSD as xt, FloorPriceText as y, useCurrencyList as yt, useProcessStep as z, usePrimarySaleItemsCount as zt };
16583
+ export { useMarketCardDataPaged as $, useCollectibleBalance as $t, useOrderSteps as A, useCollectionMarketItems as At, generateCancelTransaction as B, usePrimarySaleItems as Bt, useBuyModalContext as C, useCollectionActiveOffersCurrencies as Ct, useGetReceiptFromHash as D, useCollectionMetadata as Dt, useRoyalty as E, collectionActiveListingsCurrenciesQueryOptions as Et, generateListingTransaction as F, useCollectionList as Ft, useTransactionType as G, useCollectibleMarketLowestListing as Gt, useEnsureCorrectChain as H, useCollectibleMetadata as Ht, useGenerateListingTransaction as I, useMarketplaceConfig as It, useOpenConnectModal$1 as J, useCollectibleMarketListPaginated as Jt, usePrimarySaleTransactionSteps as K, useCollectibleMarketListingsCount as Kt, useCancelOrder as L, useCollectionBalanceDetails as Lt, useGenerateSellTransaction as M, useCollectionMarketFilteredCount as Mt, generateOfferTransaction as N, collectionMarketDetailPollingOptions as Nt, useTransferTokens as O, useCollectionMarketItemsPaginated as Ot, useGenerateOfferTransaction as P, useCollectionMarketDetailPolling as Pt, usePrimarySale721CardData as Q, useErc721SaleDetails as Qt, useCancelTransactionSteps as R, useCollectibleTokenBalances as Rt, ErrorBoundary as S, useCurrencyComparePrices as St, royaltyQueryOptions as T, useCollectionActiveListingsCurrencies as Tt, useAutoSelectFeeOption as U, useCollectibleMarketOffersCount as Ut, useGenerateCancelTransaction as V, usePrimarySaleItem as Vt, useBuyTransaction as W, useCollectibleMarketOffers as Wt, useFiltersProgressive as X, useCollectibleMarketHighestOffer as Xt, useFilters as Y, useCollectibleMarketList as Yt, usePrimarySale1155CardData as Z, useCollectibleMarketCount as Zt, PriceInput as _, useTokenBalances as _t, MarketCard as a, DatabeatAnalytics as an, ActionModal as at, LoadingModal as b, useCurrency as bt, useCreateListingModal as c, useSellModal as ct, TransferModal as d, useConnectorMetadata as dt, usePrimarySaleCheckoutOptions as en, useMarketCardData as et, useTransferModalContext as f, transactionPreview_default as ft, useCreateListingModalContext as g, useTokenCurrencyBalance as gt, CreateListingModal as h, useTokenMetadata as ht, NonTradableInventoryCard as i, MarketplaceSdkContext as in, selectWaasFeeOptions_default as it, generateSellTransaction as j, useCollectionMarketFloor as jt, useTransactionExecution as k, useCollectionMarketItemsCount as kt, useMakeOfferModal as l, transactionStatusModal_default as lt, useMakeOfferModalContext as m, useTokenMetadataSearch as mt, ShopCard as n, MarketplaceProvider as nn, TransactionDetails as nt, MarketCardPresentation as o, useAnalytics as on, BaseModal as ot, useTransferModal as p, useTokenRanges as pt, useMarketTransactionSteps as q, useCollectibleMarketListings as qt, ShopCardPresentation as r, MarketplaceQueryClientProvider as rn, TokenPreview as rt, ActionButton as s, useSellModalContext as st, CollectibleCard as t, useConfig$1 as tn, SellModal as tt, ModalProvider as u, useTransactionStatusModal as ut, currencyOptionsSelect_default as v, useInventory as vt, useBuyModal as w, collectionActiveOffersCurrenciesQueryOptions as wt, ErrorModal as x, useCurrencyConvertToUSD as xt, FloorPriceText as y, useCurrencyList as yt, useProcessStep as z, usePrimarySaleItemsCount as zt };
16224
16584
  //# sourceMappingURL=react.js.map