@0xsequence/marketplace-sdk 0.2.0 → 0.3.0

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 (86) hide show
  1. package/dist/chess-tile-6BS5MQT5.png +0 -0
  2. package/dist/{chunk-5EOVZAKT.js → chunk-BJE7AG6V.js} +213 -97
  3. package/dist/chunk-BJE7AG6V.js.map +1 -0
  4. package/dist/{chunk-FCQCNLFZ.js → chunk-G33554LK.js} +4 -1
  5. package/dist/chunk-G33554LK.js.map +1 -0
  6. package/dist/{chunk-GZIA25G4.js → chunk-GZG2QO64.js} +22 -6
  7. package/dist/chunk-GZG2QO64.js.map +1 -0
  8. package/dist/{chunk-4E34HVSA.js → chunk-MQR6SHXZ.js} +93 -93
  9. package/dist/chunk-MQR6SHXZ.js.map +1 -0
  10. package/dist/{chunk-LFQB477Y.js → chunk-OUWB3FHZ.js} +17 -17
  11. package/dist/chunk-OUWB3FHZ.js.map +1 -0
  12. package/dist/{chunk-MD4JHPMH.js → chunk-QXLZPSSR.js} +1195 -694
  13. package/dist/chunk-QXLZPSSR.js.map +1 -0
  14. package/dist/index.d.ts +2 -2
  15. package/dist/index.js +5 -5
  16. package/dist/{marketplace.gen-Ceofb9Cs.d.ts → marketplace.gen-BLP7822q.d.ts} +17 -5
  17. package/dist/react/_internal/api/index.d.ts +4 -2
  18. package/dist/react/_internal/api/index.js +1 -1
  19. package/dist/react/_internal/index.d.ts +3 -3
  20. package/dist/react/_internal/index.js +7 -7
  21. package/dist/react/hooks/index.d.ts +242 -31
  22. package/dist/react/hooks/index.js +15 -3
  23. package/dist/react/index.css +66 -26
  24. package/dist/react/index.css.map +1 -1
  25. package/dist/react/index.d.ts +5 -4
  26. package/dist/react/index.js +23 -9
  27. package/dist/react/ssr/index.js +4 -3
  28. package/dist/react/ssr/index.js.map +1 -1
  29. package/dist/react/ui/components/index.css +276 -0
  30. package/dist/react/ui/components/index.css.map +1 -0
  31. package/dist/react/ui/components/index.d.ts +17 -0
  32. package/dist/react/ui/components/index.js +24 -0
  33. package/dist/react/ui/components/index.js.map +1 -0
  34. package/dist/react/ui/icons/index.js +1 -1
  35. package/dist/react/ui/index.css +66 -26
  36. package/dist/react/ui/index.css.map +1 -1
  37. package/dist/react/ui/index.d.ts +5 -2
  38. package/dist/react/ui/index.js +9 -7
  39. package/dist/react/ui/modals/_internal/components/actionModal/index.js +1 -1
  40. package/dist/{services-Dei25J6_.d.ts → services-C9-lvWcC.d.ts} +1 -1
  41. package/dist/styles/index.js +4 -4
  42. package/dist/types/index.d.ts +2 -2
  43. package/dist/types/index.js +2 -2
  44. package/dist/{types-BzZVURNL.d.ts → types-QqXjNuUP.d.ts} +1 -1
  45. package/dist/utils/index.d.ts +2 -2
  46. package/dist/utils/index.js +3 -3
  47. package/package.json +1 -1
  48. package/src/react/_internal/api/get-query-client.ts +3 -3
  49. package/src/react/_internal/api/marketplace.gen.ts +34 -10
  50. package/src/react/_internal/api/query-keys.ts +8 -0
  51. package/src/react/hooks/index.ts +3 -0
  52. package/src/react/hooks/useCheckoutOptions.tsx +43 -43
  53. package/src/react/hooks/useCountOfCollectables.tsx +52 -52
  54. package/src/react/hooks/useCurrencies.tsx +60 -60
  55. package/src/react/hooks/useCurrency.tsx +64 -0
  56. package/src/react/hooks/useGenerateCancleTransaction.tsx +50 -0
  57. package/src/react/hooks/useListBalances.tsx +2 -3
  58. package/src/react/hooks/useListCollectibles.tsx +5 -6
  59. package/src/react/hooks/useListCollections.tsx +88 -0
  60. package/src/react/hooks/useListListingsForCollectible.tsx +61 -0
  61. package/src/react/hooks/useListOffersForCollectible.tsx +14 -16
  62. package/src/react/ui/components/_internals/action-button/ActionButton.tsx +164 -0
  63. package/src/react/ui/components/_internals/custom-network-image/CustomNetworkImage.tsx +27 -0
  64. package/src/react/ui/components/_internals/custom-network-image/styles.css.ts +51 -0
  65. package/src/react/ui/components/_internals/pill/Pill.tsx +20 -0
  66. package/src/react/ui/components/collectible-card/CollectibleCard.tsx +194 -0
  67. package/src/react/ui/components/collectible-card/Footer.tsx +121 -0
  68. package/src/react/ui/components/collectible-card/styles.css.ts +62 -0
  69. package/src/react/ui/components/index.ts +1 -0
  70. package/src/react/ui/icons/Bell.tsx +31 -0
  71. package/src/react/ui/icons/DiamondEye.tsx +31 -0
  72. package/src/react/ui/images/chess-tile.png +0 -0
  73. package/src/react/ui/index.ts +3 -0
  74. package/src/react/ui/modals/CreateListingModal/index.tsx +152 -152
  75. package/src/react/ui/modals/SellModal/index.tsx +0 -1
  76. package/src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx +92 -92
  77. package/src/react/ui/modals/TransferModal/index.tsx +1 -1
  78. package/src/react/ui/modals/modal-provider.tsx +2 -3
  79. package/src/types/custom.d.ts +1 -0
  80. package/tsconfig.tsbuildinfo +1 -1
  81. package/dist/chunk-4E34HVSA.js.map +0 -1
  82. package/dist/chunk-5EOVZAKT.js.map +0 -1
  83. package/dist/chunk-FCQCNLFZ.js.map +0 -1
  84. package/dist/chunk-GZIA25G4.js.map +0 -1
  85. package/dist/chunk-LFQB477Y.js.map +0 -1
  86. package/dist/chunk-MD4JHPMH.js.map +0 -1
@@ -4,3 +4,6 @@ export { useMakeOfferModal } from './modals/MakeOfferModal';
4
4
  export { useSuccessfulPurchaseModal } from './modals/SuccessfulPurchaseModal';
5
5
  export { useTransferModal } from './modals/TransferModal';
6
6
  export { useSellModal } from './modals/SellModal';
7
+
8
+ // components
9
+ export { CollectibleCard } from './components/collectible-card/CollectibleCard';
@@ -1,168 +1,168 @@
1
- import { Box } from "@0xsequence/design-system";
2
- import { Show, observer } from "@legendapp/state/react";
3
- import type { Hex } from "viem";
4
- import { useAccount } from "wagmi";
1
+ import { Box } from '@0xsequence/design-system';
2
+ import { Show, observer } from '@legendapp/state/react';
3
+ import type { Hex } from 'viem';
4
+ import { useAccount } from 'wagmi';
5
5
  import {
6
- ActionModal,
7
- type ActionModalProps,
8
- } from "../_internal/components/actionModal/ActionModal";
9
- import ExpirationDateSelect from "../_internal/components/expirationDateSelect";
10
- import FloorPriceText from "../_internal/components/floorPriceText";
11
- import PriceInput from "../_internal/components/priceInput";
12
- import QuantityInput from "../_internal/components/quantityInput";
13
- import { useSwitchChainModal } from "../_internal/components/switchChainModal";
14
- import TokenPreview from "../_internal/components/tokenPreview";
15
- import TransactionDetails from "../_internal/components/transactionDetails";
16
- import { createListingModal$, useHydrate } from "./_store";
17
- import {
18
- CreateListingErrorCallbacks,
19
- CreateListingSuccessCallbacks,
20
- } from "../../../../types/callbacks";
21
- import { ContractType } from "../../../_internal";
6
+ ActionModal,
7
+ type ActionModalProps,
8
+ } from '../_internal/components/actionModal/ActionModal';
9
+ import ExpirationDateSelect from '../_internal/components/expirationDateSelect';
10
+ import FloorPriceText from '../_internal/components/floorPriceText';
11
+ import PriceInput from '../_internal/components/priceInput';
12
+ import QuantityInput from '../_internal/components/quantityInput';
13
+ import { useSwitchChainModal } from '../_internal/components/switchChainModal';
14
+ import TokenPreview from '../_internal/components/tokenPreview';
15
+ import TransactionDetails from '../_internal/components/transactionDetails';
16
+ import { createListingModal$, useHydrate } from './_store';
17
+ import type {
18
+ CreateListingErrorCallbacks,
19
+ CreateListingSuccessCallbacks,
20
+ } from '../../../../types/callbacks';
21
+ import { ContractType } from '../../../_internal';
22
22
 
23
23
  export type ShowCreateListingModalArgs = {
24
- collectionAddress: Hex;
25
- chainId: string;
26
- collectibleId: string;
24
+ collectionAddress: Hex;
25
+ chainId: string;
26
+ collectibleId: string;
27
27
  };
28
28
 
29
29
  export const useCreateListingModal = () => {
30
- const { chainId: accountChainId } = useAccount();
31
- const { show: showSwitchNetworkModal } = useSwitchChainModal();
32
- const { errorCallbacks, successCallbacks } = createListingModal$.state.get();
33
-
34
- const openModal = (args: ShowCreateListingModalArgs) => {
35
- createListingModal$.open(args);
36
- };
37
-
38
- const handleShowModal = (args: ShowCreateListingModalArgs) => {
39
- const isSameChain = accountChainId === Number(args.chainId);
40
-
41
- if (!isSameChain) {
42
- showSwitchNetworkModal({
43
- chainIdToSwitchTo: Number(args.chainId),
44
- onSwitchChain: () => openModal(args),
45
- callbacks: {
46
- onSuccess: successCallbacks?.onSwitchChainSuccess,
47
- onUnknownError: errorCallbacks?.onSwitchChainError,
48
- onSwitchingNotSupported: errorCallbacks?.onSwitchingNotSupportedError,
49
- onUserRejectedRequest:
50
- errorCallbacks?.onUserRejectedSwitchingChainRequestError,
51
- },
52
- });
53
- return;
54
- }
55
-
56
- openModal(args);
57
- };
58
-
59
- return {
60
- show: handleShowModal,
61
- close: () => createListingModal$.close(),
62
- onError: (callbacks: CreateListingErrorCallbacks) => {
63
- createListingModal$.state.set({
64
- ...createListingModal$.state.get(),
65
- errorCallbacks: callbacks,
66
- });
67
- },
68
- onSuccess: (callbacks: CreateListingSuccessCallbacks) => {
69
- createListingModal$.state.set({
70
- ...createListingModal$.state.get(),
71
- successCallbacks: callbacks,
72
- });
73
- },
74
- };
30
+ const { chainId: accountChainId } = useAccount();
31
+ const { show: showSwitchNetworkModal } = useSwitchChainModal();
32
+ const { errorCallbacks, successCallbacks } = createListingModal$.state.get();
33
+
34
+ const openModal = (args: ShowCreateListingModalArgs) => {
35
+ createListingModal$.open(args);
36
+ };
37
+
38
+ const handleShowModal = (args: ShowCreateListingModalArgs) => {
39
+ const isSameChain = accountChainId === Number(args.chainId);
40
+
41
+ if (!isSameChain) {
42
+ showSwitchNetworkModal({
43
+ chainIdToSwitchTo: Number(args.chainId),
44
+ onSwitchChain: () => openModal(args),
45
+ callbacks: {
46
+ onSuccess: successCallbacks?.onSwitchChainSuccess,
47
+ onUnknownError: errorCallbacks?.onSwitchChainError,
48
+ onSwitchingNotSupported: errorCallbacks?.onSwitchingNotSupportedError,
49
+ onUserRejectedRequest:
50
+ errorCallbacks?.onUserRejectedSwitchingChainRequestError,
51
+ },
52
+ });
53
+ return;
54
+ }
55
+
56
+ openModal(args);
57
+ };
58
+
59
+ return {
60
+ show: handleShowModal,
61
+ close: () => createListingModal$.close(),
62
+ onError: (callbacks: CreateListingErrorCallbacks) => {
63
+ createListingModal$.state.set({
64
+ ...createListingModal$.state.get(),
65
+ errorCallbacks: callbacks,
66
+ });
67
+ },
68
+ onSuccess: (callbacks: CreateListingSuccessCallbacks) => {
69
+ createListingModal$.state.set({
70
+ ...createListingModal$.state.get(),
71
+ successCallbacks: callbacks,
72
+ });
73
+ },
74
+ };
75
75
  };
76
76
 
77
77
  export const CreateListingModal = () => {
78
- return (
79
- <Show if={createListingModal$.isOpen}>
80
- <Modal />
81
- </Show>
82
- );
78
+ return (
79
+ <Show if={createListingModal$.isOpen}>
80
+ <Modal />
81
+ </Show>
82
+ );
83
83
  };
84
84
 
85
85
  const Modal = () => {
86
- useHydrate();
87
- return <ModalContent />;
86
+ useHydrate();
87
+ return <ModalContent />;
88
88
  };
89
89
 
90
90
  const ModalContent = observer(() => {
91
- const {
92
- chainId,
93
- collectionAddress,
94
- collectibleId,
95
- collectionName,
96
- collectionType,
97
- listingPrice,
98
- } = createListingModal$.state.get();
99
-
100
- const { steps } = createListingModal$.get();
101
-
102
- const ctas = [
103
- {
104
- label: "Approve TOKEN",
105
- onClick: steps.tokenApproval.execute,
106
- hidden: !steps.tokenApproval.isNeeded(),
107
- pending: steps.tokenApproval.pending,
108
- variant: "glass" as const,
109
- },
110
- {
111
- label: "List item for sale",
112
- onClick: steps.createListing.execute,
113
- pending: steps.createListing.pending,
114
- disabled:
115
- steps.tokenApproval.isNeeded() || listingPrice.amountRaw === "0",
116
- },
117
- ] satisfies ActionModalProps["ctas"];
118
-
119
- return (
120
- <ActionModal
121
- store={createListingModal$}
122
- onClose={() => createListingModal$.close()}
123
- title="List item for sale"
124
- ctas={ctas}
125
- >
126
- <TokenPreview
127
- collectionName={collectionName}
128
- collectionAddress={collectionAddress}
129
- collectibleId={collectibleId}
130
- chainId={chainId}
131
- />
132
-
133
- <Box display="flex" flexDirection="column" width="full" gap="1">
134
- <PriceInput
135
- chainId={chainId}
136
- collectionAddress={collectionAddress}
137
- $listingPrice={createListingModal$.state.listingPrice}
138
- />
139
- {!!listingPrice && (
140
- <FloorPriceText
141
- tokenId={collectibleId}
142
- chainId={chainId}
143
- collectionAddress={collectionAddress}
144
- price={listingPrice}
145
- />
146
- )}
147
- </Box>
148
-
149
- {collectionType === ContractType.ERC1155 && (
150
- <QuantityInput
151
- chainId={chainId}
152
- collectionAddress={collectionAddress}
153
- collectibleId={collectibleId}
154
- $quantity={createListingModal$.state.quantity}
155
- />
156
- )}
157
-
158
- <ExpirationDateSelect $date={createListingModal$.state.expiry} />
159
-
160
- <TransactionDetails
161
- collectibleId={collectibleId}
162
- collectionAddress={collectionAddress}
163
- chainId={chainId}
164
- price={createListingModal$.state.listingPrice.get()}
165
- />
166
- </ActionModal>
167
- );
91
+ const {
92
+ chainId,
93
+ collectionAddress,
94
+ collectibleId,
95
+ collectionName,
96
+ collectionType,
97
+ listingPrice,
98
+ } = createListingModal$.state.get();
99
+
100
+ const { steps } = createListingModal$.get();
101
+
102
+ const ctas = [
103
+ {
104
+ label: 'Approve TOKEN',
105
+ onClick: steps.tokenApproval.execute,
106
+ hidden: !steps.tokenApproval.isNeeded(),
107
+ pending: steps.tokenApproval.pending,
108
+ variant: 'glass' as const,
109
+ },
110
+ {
111
+ label: 'List item for sale',
112
+ onClick: steps.createListing.execute,
113
+ pending: steps.createListing.pending,
114
+ disabled:
115
+ steps.tokenApproval.isNeeded() || listingPrice.amountRaw === '0',
116
+ },
117
+ ] satisfies ActionModalProps['ctas'];
118
+
119
+ return (
120
+ <ActionModal
121
+ store={createListingModal$}
122
+ onClose={() => createListingModal$.close()}
123
+ title="List item for sale"
124
+ ctas={ctas}
125
+ >
126
+ <TokenPreview
127
+ collectionName={collectionName}
128
+ collectionAddress={collectionAddress}
129
+ collectibleId={collectibleId}
130
+ chainId={chainId}
131
+ />
132
+
133
+ <Box display="flex" flexDirection="column" width="full" gap="1">
134
+ <PriceInput
135
+ chainId={chainId}
136
+ collectionAddress={collectionAddress}
137
+ $listingPrice={createListingModal$.state.listingPrice}
138
+ />
139
+ {!!listingPrice && (
140
+ <FloorPriceText
141
+ tokenId={collectibleId}
142
+ chainId={chainId}
143
+ collectionAddress={collectionAddress}
144
+ price={listingPrice}
145
+ />
146
+ )}
147
+ </Box>
148
+
149
+ {collectionType === ContractType.ERC1155 && (
150
+ <QuantityInput
151
+ chainId={chainId}
152
+ collectionAddress={collectionAddress}
153
+ collectibleId={collectibleId}
154
+ $quantity={createListingModal$.state.quantity}
155
+ />
156
+ )}
157
+
158
+ <ExpirationDateSelect $date={createListingModal$.state.expiry} />
159
+
160
+ <TransactionDetails
161
+ collectibleId={collectibleId}
162
+ collectionAddress={collectionAddress}
163
+ chainId={chainId}
164
+ price={createListingModal$.state.listingPrice.get()}
165
+ />
166
+ </ActionModal>
167
+ );
168
168
  });
@@ -23,7 +23,6 @@ export type ShowSellModalArgs = {
23
23
  collectionAddress: Hex;
24
24
  tokenId: string;
25
25
  order: Order;
26
- collectibleName: string | undefined;
27
26
  };
28
27
 
29
28
  export const useSellModal = () => {
@@ -1,105 +1,105 @@
1
- import { Box, Button, Text, TextInput } from "@0xsequence/design-system";
2
- import { isAddress } from "viem";
3
- import { useAccount } from "wagmi";
4
- import AlertMessage from "../../../_internal/components/alertMessage";
5
- import QuantityInput from "../../../_internal/components/quantityInput";
6
- import { transferModal$ } from "../../_store";
7
- import getMessage from "../../messages";
8
- import useHandleTransfer from "./useHandleTransfer";
9
- import { useCollection, useListBalances } from "../../../../..";
10
- import { CollectionType, ContractType } from "../../../../../_internal";
1
+ import { Box, Button, Text, TextInput } from '@0xsequence/design-system';
2
+ import { isAddress } from 'viem';
3
+ import { useAccount } from 'wagmi';
4
+ import AlertMessage from '../../../_internal/components/alertMessage';
5
+ import QuantityInput from '../../../_internal/components/quantityInput';
6
+ import { transferModal$ } from '../../_store';
7
+ import getMessage from '../../messages';
8
+ import useHandleTransfer from './useHandleTransfer';
9
+ import { useCollection, useListBalances } from '../../../../..';
10
+ import { type CollectionType, ContractType } from '../../../../../_internal';
11
11
 
12
12
  const EnterWalletAddressView = () => {
13
- const { address } = useAccount();
14
- const { collectionAddress, tokenId, chainId, collectionType } =
15
- transferModal$.state.get();
16
- const $quantity = transferModal$.state.quantity;
17
- const isWalletAddressValid = isAddress(
18
- transferModal$.state.receiverAddress.get()
19
- );
20
- const { data: tokenBalance } = useListBalances({
21
- chainId,
22
- contractAddress: collectionAddress,
23
- tokenId,
24
- accountAddress: address!,
25
- query: { enabled: !!address },
26
- });
27
- const balanceAmount = tokenBalance?.pages[0].balances[0].balance;
28
- const insufficientBalance: boolean = $quantity.get() > balanceAmount!;
29
- const { data: collection } = useCollection({
30
- collectionAddress,
31
- chainId,
32
- });
33
- transferModal$.state.collectionType.set(
34
- collection?.type as CollectionType | undefined
35
- );
36
- const { transfer } = useHandleTransfer();
13
+ const { address } = useAccount();
14
+ const { collectionAddress, tokenId, chainId, collectionType } =
15
+ transferModal$.state.get();
16
+ const $quantity = transferModal$.state.quantity;
17
+ const isWalletAddressValid = isAddress(
18
+ transferModal$.state.receiverAddress.get(),
19
+ );
20
+ const { data: tokenBalance } = useListBalances({
21
+ chainId,
22
+ contractAddress: collectionAddress,
23
+ tokenId,
24
+ accountAddress: address!,
25
+ query: { enabled: !!address },
26
+ });
27
+ const balanceAmount = tokenBalance?.pages[0].balances[0].balance;
28
+ const insufficientBalance: boolean = $quantity.get() > balanceAmount!;
29
+ const { data: collection } = useCollection({
30
+ collectionAddress,
31
+ chainId,
32
+ });
33
+ transferModal$.state.collectionType.set(
34
+ collection?.type as CollectionType | undefined,
35
+ );
36
+ const { transfer } = useHandleTransfer();
37
37
 
38
- function handleChangeWalletAddress(
39
- event: React.ChangeEvent<HTMLInputElement>
40
- ) {
41
- transferModal$.state.receiverAddress.set(event.target.value);
42
- }
38
+ function handleChangeWalletAddress(
39
+ event: React.ChangeEvent<HTMLInputElement>,
40
+ ) {
41
+ transferModal$.state.receiverAddress.set(event.target.value);
42
+ }
43
43
 
44
- function handleChangeView() {
45
- transfer();
46
- transferModal$.view.set("followWalletInstructions");
47
- }
44
+ function handleChangeView() {
45
+ transfer();
46
+ transferModal$.view.set('followWalletInstructions');
47
+ }
48
48
 
49
- return (
50
- <Box display="grid" gap="6" flexGrow="1">
51
- <Text color="white" fontSize="large" fontWeight="bold">
52
- Transfer your item
53
- </Text>
49
+ return (
50
+ <Box display="grid" gap="6" flexGrow="1">
51
+ <Text color="white" fontSize="large" fontWeight="bold">
52
+ Transfer your item
53
+ </Text>
54
54
 
55
- <Box display="flex" flexDirection="column" gap="3">
56
- <AlertMessage
57
- message={getMessage("enterReceiverAddress")}
58
- type="warning"
59
- />
55
+ <Box display="flex" flexDirection="column" gap="3">
56
+ <AlertMessage
57
+ message={getMessage('enterReceiverAddress')}
58
+ type="warning"
59
+ />
60
60
 
61
- <TextInput
62
- label="Wallet address"
63
- labelLocation="top"
64
- value={transferModal$.state.receiverAddress.get()}
65
- onChange={handleChangeWalletAddress}
66
- name="walletAddress"
67
- placeholder="Enter wallet address of recipient"
68
- />
61
+ <TextInput
62
+ label="Wallet address"
63
+ labelLocation="top"
64
+ value={transferModal$.state.receiverAddress.get()}
65
+ onChange={handleChangeWalletAddress}
66
+ name="walletAddress"
67
+ placeholder="Enter wallet address of recipient"
68
+ />
69
69
 
70
- {collectionType === ContractType.ERC1155 && balanceAmount && (
71
- <>
72
- <QuantityInput
73
- $quantity={$quantity}
74
- chainId={chainId}
75
- collectionAddress={collectionAddress}
76
- collectibleId={tokenId}
77
- />
70
+ {collectionType === ContractType.ERC1155 && balanceAmount && (
71
+ <>
72
+ <QuantityInput
73
+ $quantity={$quantity}
74
+ chainId={chainId}
75
+ collectionAddress={collectionAddress}
76
+ collectibleId={tokenId}
77
+ />
78
78
 
79
- <Text
80
- color={insufficientBalance ? "negative" : "text50"}
81
- fontSize="small"
82
- fontWeight="medium"
83
- >
84
- {`You have ${balanceAmount} of this item`}
85
- </Text>
86
- </>
87
- )}
88
- </Box>
79
+ <Text
80
+ color={insufficientBalance ? 'negative' : 'text50'}
81
+ fontSize="small"
82
+ fontWeight="medium"
83
+ >
84
+ {`You have ${balanceAmount} of this item`}
85
+ </Text>
86
+ </>
87
+ )}
88
+ </Box>
89
89
 
90
- <Button
91
- onClick={handleChangeView}
92
- disabled={!isWalletAddressValid || insufficientBalance}
93
- title="Transfer"
94
- label="Transfer"
95
- variant="primary"
96
- shape="square"
97
- size="sm"
98
- justifySelf="flex-end"
99
- paddingX="10"
100
- />
101
- </Box>
102
- );
90
+ <Button
91
+ onClick={handleChangeView}
92
+ disabled={!isWalletAddressValid || insufficientBalance}
93
+ title="Transfer"
94
+ label="Transfer"
95
+ variant="primary"
96
+ shape="square"
97
+ size="sm"
98
+ justifySelf="flex-end"
99
+ paddingX="10"
100
+ />
101
+ </Box>
102
+ );
103
103
  };
104
104
 
105
105
  export default EnterWalletAddressView;
@@ -8,7 +8,7 @@ import { useSwitchChainModal } from '../_internal/components/switchChainModal';
8
8
  import type { Hex } from 'viem';
9
9
  import EnterWalletAddressView from './_views/enterWalletAddress';
10
10
  import FollowWalletInstructionsView from './_views/followWalletInstructions';
11
- import {
11
+ import type {
12
12
  TransferErrorCallbacks,
13
13
  TransferSuccessCallbacks,
14
14
  } from '../../../../types/callbacks';
@@ -1,12 +1,12 @@
1
1
  import { observer } from '@legendapp/state/react';
2
- import SwitchChainModal from './_internal/components/switchChainModal';
3
- import TransactionStatusModal from './_internal/components/transactionStatusModal';
4
2
  import { AccountModal } from './Account';
5
3
  import { CreateListingModal } from './CreateListingModal';
6
4
  import { MakeOfferModal } from './MakeOfferModal';
7
5
  import { SellModal } from './SellModal';
8
6
  import SuccessfulPurchaseModal from './SuccessfulPurchaseModal';
9
7
  import { TransferModal } from './TransferModal';
8
+ import SwitchChainModal from './_internal/components/switchChainModal';
9
+ import TransactionStatusModal from './_internal/components/transactionStatusModal';
10
10
  import { _accountModalOpen$ } from './_internal/stores/accountModal';
11
11
 
12
12
  export const ModalProvider = observer(() => {
@@ -18,7 +18,6 @@ export const ModalProvider = observer(() => {
18
18
  <TransferModal />
19
19
  <SellModal />
20
20
  <SuccessfulPurchaseModal />
21
-
22
21
  {/* Helper modals */}
23
22
  <SwitchChainModal />
24
23
  <TransactionStatusModal />
@@ -0,0 +1 @@
1
+ declare module '*.png';
@@ -1 +1 @@
1
- {"root":["./src/consts.ts","./src/index.ts","./src/react/index.ts","./src/react/provider.tsx","./src/react/_internal/consts.ts","./src/react/_internal/get-provider.ts","./src/react/_internal/index.ts","./src/react/_internal/types.ts","./src/react/_internal/api/get-query-client.ts","./src/react/_internal/api/index.ts","./src/react/_internal/api/marketplace-api.ts","./src/react/_internal/api/marketplace.gen.ts","./src/react/_internal/api/query-keys.ts","./src/react/_internal/api/services.ts","./src/react/_internal/api/zod-schema.ts","./src/react/_internal/wagmi/create-config.ts","./src/react/_internal/wagmi/embedded.ts","./src/react/_internal/wagmi/index.ts","./src/react/_internal/wagmi/universal.ts","./src/react/hooks/index.ts","./src/react/hooks/usebalanceofcollectible.tsx","./src/react/hooks/usecheckoutoptions.tsx","./src/react/hooks/usecollectible.tsx","./src/react/hooks/usecollection.tsx","./src/react/hooks/useconfig.tsx","./src/react/hooks/usecountofcollectables.tsx","./src/react/hooks/usecurrencies.tsx","./src/react/hooks/usefilters.tsx","./src/react/hooks/usefloororder.tsx","./src/react/hooks/usegeneratelistingtransaction.tsx","./src/react/hooks/usegenerateoffertransaction.tsx","./src/react/hooks/usegenerateselltransaction.tsx","./src/react/hooks/usehighestoffer.tsx","./src/react/hooks/uselistbalances.tsx","./src/react/hooks/uselistcollectibles.tsx","./src/react/hooks/uselistoffersforcollectible.tsx","./src/react/hooks/uselowestlisting.tsx","./src/react/hooks/usemarketplaceconfig.tsx","./src/react/hooks/useroyaltypercentage.tsx","./src/react/hooks/usetransfertokens.tsx","./src/react/hooks/options/marketplaceconfigoptions.ts","./src/react/ssr/create-ssr-client.ts","./src/react/ssr/index.ts","./src/react/ui/index.ts","./src/react/ui/icons/arrowup.tsx","./src/react/ui/icons/calendaricon.tsx","./src/react/ui/icons/infoicon.tsx","./src/react/ui/icons/inventoryicon.tsx","./src/react/ui/icons/minusicon.tsx","./src/react/ui/icons/plusicon.tsx","./src/react/ui/icons/positivecircleicon.tsx","./src/react/ui/icons/index.ts","./src/react/ui/icons/styles.css.ts","./src/react/ui/modals/modal-provider.tsx","./src/react/ui/modals/account/index.tsx","./src/react/ui/modals/createlistingmodal/_store.ts","./src/react/ui/modals/createlistingmodal/index.tsx","./src/react/ui/modals/createlistingmodal/_utils/getcreatelistingtransactiontitlemessage.ts","./src/react/ui/modals/makeoffermodal/_store.ts","./src/react/ui/modals/makeoffermodal/index.tsx","./src/react/ui/modals/makeoffermodal/_utils/getmakeoffertransactiontitlemessage.ts","./src/react/ui/modals/sellmodal/_store.ts","./src/react/ui/modals/sellmodal/index.tsx","./src/react/ui/modals/sellmodal/utils.ts","./src/react/ui/modals/sellmodal/_utils/getselltransactiontitlemessage.ts","./src/react/ui/modals/successfulpurchasemodal/_store.ts","./src/react/ui/modals/successfulpurchasemodal/index.tsx","./src/react/ui/modals/successfulpurchasemodal/styles.css.ts","./src/react/ui/modals/transfermodal/_store.ts","./src/react/ui/modals/transfermodal/index.tsx","./src/react/ui/modals/transfermodal/messages.ts","./src/react/ui/modals/transfermodal/styles.css.ts","./src/react/ui/modals/transfermodal/_utils/gettransfertransactiontitlemessage.ts","./src/react/ui/modals/transfermodal/_views/enterwalletaddress/index.tsx","./src/react/ui/modals/transfermodal/_views/enterwalletaddress/usehandletransfer.tsx","./src/react/ui/modals/transfermodal/_views/followwalletinstructions/index.tsx","./src/react/ui/modals/_internal/components/actionmodal/actionmodal.tsx","./src/react/ui/modals/_internal/components/actionmodal/index.ts","./src/react/ui/modals/_internal/components/actionmodal/store.ts","./src/react/ui/modals/_internal/components/actionmodal/styles.css.ts","./src/react/ui/modals/_internal/components/alertmessage/index.tsx","./src/react/ui/modals/_internal/components/alertmessage/styles.css.ts","./src/react/ui/modals/_internal/components/calendar/index.tsx","./src/react/ui/modals/_internal/components/calendarpopover/index.tsx","./src/react/ui/modals/_internal/components/calendarpopover/styles.css.ts","./src/react/ui/modals/_internal/components/currencyoptionsselect/index.tsx","./src/react/ui/modals/_internal/components/currencyoptionsselect/styles.css.ts","./src/react/ui/modals/_internal/components/expirationdateselect/index.tsx","./src/react/ui/modals/_internal/components/expirationdateselect/styles.css.ts","./src/react/ui/modals/_internal/components/floorpricetext/index.tsx","./src/react/ui/modals/_internal/components/priceinput/index.tsx","./src/react/ui/modals/_internal/components/priceinput/styles.css.ts","./src/react/ui/modals/_internal/components/priceinput/types.ts","./src/react/ui/modals/_internal/components/quantityinput/index.tsx","./src/react/ui/modals/_internal/components/quantityinput/styles.css.ts","./src/react/ui/modals/_internal/components/switchchainmodal/index.tsx","./src/react/ui/modals/_internal/components/switchchainmodal/store.ts","./src/react/ui/modals/_internal/components/switchchainmodal/styles.css.ts","./src/react/ui/modals/_internal/components/timeago/index.tsx","./src/react/ui/modals/_internal/components/tokenpreview/index.tsx","./src/react/ui/modals/_internal/components/tokenpreview/styles.css.ts","./src/react/ui/modals/_internal/components/transaction-footer/index.tsx","./src/react/ui/modals/_internal/components/transactiondetails/index.tsx","./src/react/ui/modals/_internal/components/transactionheader/index.tsx","./src/react/ui/modals/_internal/components/transactionpreview/consts.ts","./src/react/ui/modals/_internal/components/transactionpreview/index.tsx","./src/react/ui/modals/_internal/components/transactionpreview/usetransactionpreviewtitle.tsx","./src/react/ui/modals/_internal/components/transactionstatusmodal/index.tsx","./src/react/ui/modals/_internal/components/transactionstatusmodal/store.ts","./src/react/ui/modals/_internal/components/transactionstatusmodal/styles.css.ts","./src/react/ui/modals/_internal/stores/accountmodal.ts","./src/react/ui/styles/index.ts","./src/react/ui/styles/modal.css.ts","./src/styles/index.ts","./src/types/api-types.ts","./src/types/callbacks.ts","./src/types/index.ts","./src/types/marketplace-config.ts","./src/types/messages.ts","./src/types/sdk-config.ts","./src/types/types.ts","./src/utils/address.ts","./src/utils/get-public-rpc-client.ts","./src/utils/index.ts","./src/utils/network.ts","./src/utils/price.ts","./src/utils/abi/abi/standard/eip2981.ts","./src/utils/abi/abi/standard/index.ts","./src/utils/abi/abi/token/erc1155.ts","./src/utils/abi/abi/token/erc20.ts","./src/utils/abi/abi/token/erc721.ts","./src/utils/abi/abi/token/index.ts","./src/utils/abi/clients/erc1155.ts","./src/utils/abi/clients/erc20.ts","./src/utils/abi/clients/erc721.ts","./src/utils/abi/clients/index.ts","./tsup.config.ts"],"version":"5.6.3"}
1
+ {"root":["./src/consts.ts","./src/index.ts","./src/react/index.ts","./src/react/provider.tsx","./src/react/_internal/consts.ts","./src/react/_internal/get-provider.ts","./src/react/_internal/index.ts","./src/react/_internal/types.ts","./src/react/_internal/api/get-query-client.ts","./src/react/_internal/api/index.ts","./src/react/_internal/api/marketplace-api.ts","./src/react/_internal/api/marketplace.gen.ts","./src/react/_internal/api/query-keys.ts","./src/react/_internal/api/services.ts","./src/react/_internal/api/zod-schema.ts","./src/react/_internal/wagmi/create-config.ts","./src/react/_internal/wagmi/embedded.ts","./src/react/_internal/wagmi/index.ts","./src/react/_internal/wagmi/universal.ts","./src/react/hooks/index.ts","./src/react/hooks/usebalanceofcollectible.tsx","./src/react/hooks/usecheckoutoptions.tsx","./src/react/hooks/usecollectible.tsx","./src/react/hooks/usecollection.tsx","./src/react/hooks/useconfig.tsx","./src/react/hooks/usecountofcollectables.tsx","./src/react/hooks/usecurrencies.tsx","./src/react/hooks/usecurrency.tsx","./src/react/hooks/usefilters.tsx","./src/react/hooks/usefloororder.tsx","./src/react/hooks/usegeneratecancletransaction.tsx","./src/react/hooks/usegeneratelistingtransaction.tsx","./src/react/hooks/usegenerateoffertransaction.tsx","./src/react/hooks/usegenerateselltransaction.tsx","./src/react/hooks/usehighestoffer.tsx","./src/react/hooks/uselistbalances.tsx","./src/react/hooks/uselistcollectibles.tsx","./src/react/hooks/uselistcollections.tsx","./src/react/hooks/uselistlistingsforcollectible.tsx","./src/react/hooks/uselistoffersforcollectible.tsx","./src/react/hooks/uselowestlisting.tsx","./src/react/hooks/usemarketplaceconfig.tsx","./src/react/hooks/useroyaltypercentage.tsx","./src/react/hooks/usetransfertokens.tsx","./src/react/hooks/options/marketplaceconfigoptions.ts","./src/react/ssr/create-ssr-client.ts","./src/react/ssr/index.ts","./src/react/ui/index.ts","./src/react/ui/components/index.ts","./src/react/ui/components/_internals/action-button/actionbutton.tsx","./src/react/ui/components/_internals/custom-network-image/customnetworkimage.tsx","./src/react/ui/components/_internals/custom-network-image/styles.css.ts","./src/react/ui/components/_internals/pill/pill.tsx","./src/react/ui/components/collectible-card/collectiblecard.tsx","./src/react/ui/components/collectible-card/footer.tsx","./src/react/ui/components/collectible-card/styles.css.ts","./src/react/ui/icons/arrowup.tsx","./src/react/ui/icons/bell.tsx","./src/react/ui/icons/calendaricon.tsx","./src/react/ui/icons/diamondeye.tsx","./src/react/ui/icons/infoicon.tsx","./src/react/ui/icons/inventoryicon.tsx","./src/react/ui/icons/minusicon.tsx","./src/react/ui/icons/plusicon.tsx","./src/react/ui/icons/positivecircleicon.tsx","./src/react/ui/icons/index.ts","./src/react/ui/icons/styles.css.ts","./src/react/ui/modals/modal-provider.tsx","./src/react/ui/modals/account/index.tsx","./src/react/ui/modals/createlistingmodal/_store.ts","./src/react/ui/modals/createlistingmodal/index.tsx","./src/react/ui/modals/createlistingmodal/_utils/getcreatelistingtransactiontitlemessage.ts","./src/react/ui/modals/makeoffermodal/_store.ts","./src/react/ui/modals/makeoffermodal/index.tsx","./src/react/ui/modals/makeoffermodal/_utils/getmakeoffertransactiontitlemessage.ts","./src/react/ui/modals/sellmodal/_store.ts","./src/react/ui/modals/sellmodal/index.tsx","./src/react/ui/modals/sellmodal/utils.ts","./src/react/ui/modals/sellmodal/_utils/getselltransactiontitlemessage.ts","./src/react/ui/modals/successfulpurchasemodal/_store.ts","./src/react/ui/modals/successfulpurchasemodal/index.tsx","./src/react/ui/modals/successfulpurchasemodal/styles.css.ts","./src/react/ui/modals/transfermodal/_store.ts","./src/react/ui/modals/transfermodal/index.tsx","./src/react/ui/modals/transfermodal/messages.ts","./src/react/ui/modals/transfermodal/styles.css.ts","./src/react/ui/modals/transfermodal/_utils/gettransfertransactiontitlemessage.ts","./src/react/ui/modals/transfermodal/_views/enterwalletaddress/index.tsx","./src/react/ui/modals/transfermodal/_views/enterwalletaddress/usehandletransfer.tsx","./src/react/ui/modals/transfermodal/_views/followwalletinstructions/index.tsx","./src/react/ui/modals/_internal/components/actionmodal/actionmodal.tsx","./src/react/ui/modals/_internal/components/actionmodal/index.ts","./src/react/ui/modals/_internal/components/actionmodal/store.ts","./src/react/ui/modals/_internal/components/actionmodal/styles.css.ts","./src/react/ui/modals/_internal/components/alertmessage/index.tsx","./src/react/ui/modals/_internal/components/alertmessage/styles.css.ts","./src/react/ui/modals/_internal/components/calendar/index.tsx","./src/react/ui/modals/_internal/components/calendarpopover/index.tsx","./src/react/ui/modals/_internal/components/calendarpopover/styles.css.ts","./src/react/ui/modals/_internal/components/currencyoptionsselect/index.tsx","./src/react/ui/modals/_internal/components/currencyoptionsselect/styles.css.ts","./src/react/ui/modals/_internal/components/expirationdateselect/index.tsx","./src/react/ui/modals/_internal/components/expirationdateselect/styles.css.ts","./src/react/ui/modals/_internal/components/floorpricetext/index.tsx","./src/react/ui/modals/_internal/components/priceinput/index.tsx","./src/react/ui/modals/_internal/components/priceinput/styles.css.ts","./src/react/ui/modals/_internal/components/priceinput/types.ts","./src/react/ui/modals/_internal/components/quantityinput/index.tsx","./src/react/ui/modals/_internal/components/quantityinput/styles.css.ts","./src/react/ui/modals/_internal/components/switchchainmodal/index.tsx","./src/react/ui/modals/_internal/components/switchchainmodal/store.ts","./src/react/ui/modals/_internal/components/switchchainmodal/styles.css.ts","./src/react/ui/modals/_internal/components/timeago/index.tsx","./src/react/ui/modals/_internal/components/tokenpreview/index.tsx","./src/react/ui/modals/_internal/components/tokenpreview/styles.css.ts","./src/react/ui/modals/_internal/components/transaction-footer/index.tsx","./src/react/ui/modals/_internal/components/transactiondetails/index.tsx","./src/react/ui/modals/_internal/components/transactionheader/index.tsx","./src/react/ui/modals/_internal/components/transactionpreview/consts.ts","./src/react/ui/modals/_internal/components/transactionpreview/index.tsx","./src/react/ui/modals/_internal/components/transactionpreview/usetransactionpreviewtitle.tsx","./src/react/ui/modals/_internal/components/transactionstatusmodal/index.tsx","./src/react/ui/modals/_internal/components/transactionstatusmodal/store.ts","./src/react/ui/modals/_internal/components/transactionstatusmodal/styles.css.ts","./src/react/ui/modals/_internal/stores/accountmodal.ts","./src/react/ui/styles/index.ts","./src/react/ui/styles/modal.css.ts","./src/styles/index.ts","./src/types/api-types.ts","./src/types/callbacks.ts","./src/types/custom.d.ts","./src/types/index.ts","./src/types/marketplace-config.ts","./src/types/messages.ts","./src/types/sdk-config.ts","./src/types/types.ts","./src/utils/address.ts","./src/utils/get-public-rpc-client.ts","./src/utils/index.ts","./src/utils/network.ts","./src/utils/price.ts","./src/utils/abi/abi/standard/eip2981.ts","./src/utils/abi/abi/standard/index.ts","./src/utils/abi/abi/token/erc1155.ts","./src/utils/abi/abi/token/erc20.ts","./src/utils/abi/abi/token/erc721.ts","./src/utils/abi/abi/token/index.ts","./src/utils/abi/clients/erc1155.ts","./src/utils/abi/clients/erc20.ts","./src/utils/abi/clients/erc721.ts","./src/utils/abi/clients/index.ts","./tsup.config.ts"],"version":"5.6.3"}