@0xsequence/marketplace-sdk 0.0.1

package/src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx

@@ -0,0 +1,123 @@
+import { observer } from '@legendapp/state/react';
+import {
+	type ConfirmationStatus,
+	type StatusOrderType,
+	transactionStatusModal$,
+} from './store';
+import { Close, Content, Overlay, Portal, Root } from '@radix-ui/react-dialog';
+import {
+	closeButton,
+	dialogOverlay,
+	transactionStatusModalContent,
+} from './styles.css';
+import {
+	CloseIcon,
+	IconButton,
+	Skeleton,
+	Text,
+} from '@0xsequence/design-system';
+import { useCollectible } from '@react-hooks/useCollectible';
+import type { Hex } from 'viem';
+import TransactionPreview from '../transactionPreview';
+import type { Price, TokenMetadata } from '@types';
+import TransactionFooter from '../transaction-footer';
+import { useTransactionReceipt } from 'wagmi';
+
+export type ShowTransactionStatusModalArgs = {
+	hash: Hex;
+	price?: Price;
+	collectionAddress: string;
+	chainId: string;
+	tokenId: string;
+	getTitle?: (props: ConfirmationStatus) => string;
+	getMessage?: (props: ConfirmationStatus) => string;
+	type: StatusOrderType;
+};
+
+export const useTransactionStatusModal = () => {
+	return {
+		show: (args: ShowTransactionStatusModalArgs) =>
+			transactionStatusModal$.open(args),
+		close: () => transactionStatusModal$.close(),
+	};
+};
+
+const TransactionStatusModal = observer(() => {
+	const {
+		hash,
+		price,
+		collectionAddress,
+		chainId,
+		tokenId,
+		getTitle,
+		getMessage,
+	} = transactionStatusModal$.state.get();
+	const { data: collectible } = useCollectible({
+		collectionAddress,
+		chainId,
+		collectibleId: tokenId,
+	});
+	const {
+		isLoading: isConfirming,
+		isSuccess: isConfirmed,
+		isError: isFailed,
+	} = useTransactionReceipt({ hash });
+	const title = getTitle && getTitle({ isConfirmed, isConfirming, isFailed });
+	const message =
+		getMessage && getMessage({ isConfirmed, isConfirming, isFailed });
+
+	return (
+		<Root open={transactionStatusModal$.isOpen.get()}>
+			<Portal>
+				<Overlay className={dialogOverlay} />
+
+				<Content className={transactionStatusModalContent}>
+					{title ? (
+						<Text fontSize="large" fontWeight="bold" color="text100">
+							{title}
+						</Text>
+					) : (
+						<Skeleton width="16" height="6" />
+					)}
+
+					{message ? (
+						<Text fontSize="small" color="text80">
+							{message}
+						</Text>
+					) : (
+						<Skeleton width="20" height="4" />
+					)}
+
+					<TransactionPreview
+						price={price}
+						collectionAddress={collectionAddress}
+						chainId={chainId}
+						collectible={collectible as TokenMetadata}
+						isConfirming={isConfirming}
+						isConfirmed={isConfirmed}
+						isFailed={isFailed}
+					/>
+
+					<TransactionFooter
+						transactionHash={hash!}
+						isConfirming={isConfirming}
+						isConfirmed={isConfirmed}
+						isFailed={isFailed}
+					/>
+
+					<Close
+						onClick={() => {
+							transactionStatusModal$.close();
+						}}
+						className={closeButton}
+						asChild
+					>
+						<IconButton size="xs" aria-label="Close modal" icon={CloseIcon} />
+					</Close>
+				</Content>
+			</Portal>
+		</Root>
+	);
+});
+
+export default TransactionStatusModal;

package/src/react/ui/modals/_internal/components/transactionStatusModal/store.ts

@@ -0,0 +1,87 @@
+import { observable } from '@legendapp/state';
+import type { ShowTransactionStatusModalArgs } from '.';
+import type { TransactionStatus } from '@0xsequence/indexer';
+import type { Hex } from 'viem';
+import type { StepType } from '@internal';
+import type { Price } from '@types';
+
+export type ConfirmationStatus = {
+	isConfirming: boolean;
+	isConfirmed: boolean;
+	isFailed: boolean;
+};
+
+export type TransactionStatusExtended = TransactionStatus | 'PENDING';
+
+export type StatusOrderType =
+	| Pick<
+			typeof StepType,
+			'sell' | 'createListing' | 'createOffer' | 'buy'
+	  >[keyof Pick<
+			typeof StepType,
+			'sell' | 'createListing' | 'createOffer' | 'buy'
+	  >]
+	| 'transfer';
+
+export interface TransactionStatusModalState {
+	isOpen: boolean;
+	open: (args: ShowTransactionStatusModalArgs) => void;
+	close: () => void;
+	state: {
+		hash: Hex | undefined;
+		status: TransactionStatusExtended;
+		type: StatusOrderType | undefined;
+		price: Price | undefined;
+		collectionAddress: string;
+		chainId: string;
+		tokenId: string;
+		getTitle?: (params: ConfirmationStatus) => string;
+		getMessage?: (params: ConfirmationStatus) => string;
+	};
+}
+
+export const initialState: TransactionStatusModalState = {
+	isOpen: false,
+	open: ({
+		hash,
+		price,
+		collectionAddress,
+		chainId,
+		tokenId,
+		getTitle,
+		getMessage,
+		type,
+	}) => {
+		transactionStatusModal$.state.set({
+			...transactionStatusModal$.state.get(),
+			hash,
+			price,
+			collectionAddress,
+			chainId,
+			tokenId,
+			getTitle,
+			getMessage,
+			type,
+		});
+		transactionStatusModal$.isOpen.set(true);
+	},
+	close: () => {
+		transactionStatusModal$.isOpen.set(false);
+		transactionStatusModal$.state.set({
+			...initialState.state,
+		});
+	},
+	state: {
+		hash: undefined,
+		status: 'PENDING',
+		price: undefined,
+		collectionAddress: '',
+		chainId: '',
+		tokenId: '',
+		getTitle: undefined,
+		getMessage: undefined,
+		type: undefined,
+	},
+};
+
+export const transactionStatusModal$ = observable(initialState);

package/src/react/ui/modals/_internal/components/transactionStatusModal/styles.css.ts

@@ -0,0 +1,15 @@
+import { atoms } from '@0xsequence/design-system';
+import { dialogContent } from '../../../../styles/index';
+import { style } from '@vanilla-extract/css';
+
+export { closeButton, dialogOverlay } from '../../../../styles/modal.css';
+
+export const transactionStatusModalContent = style([
+	dialogContent.wide,
+	atoms({
+		display: 'grid',
+		flexDirection: 'column',
+		gap: '6',
+		padding: '7',
+	}),
+]);

package/src/react/ui/modals/_internal/stores/accountModal.ts

@@ -0,0 +1,3 @@
+import { observable } from '@legendapp/state';
+
+export const _accountModalOpen$ = observable(false);

package/src/react/ui/modals/modal-provider.tsx

@@ -0,0 +1,27 @@
+import { observer } from '@legendapp/state/react';
+import SwitchChainModal from './_internal/components/switchChainModal';
+import TransactionStatusModal from './_internal/components/transactionStatusModal';
+import { AccountModal } from './Account';
+import { CreateListingModal } from './CreateListingModal';
+import { MakeOfferModal } from './MakeOfferModal';
+import { SellModal } from './SellModal';
+import SuccessfulPurchaseModal from './SuccessfulPurchaseModal';
+import { TransferModal } from './TransferModal';
+import { _accountModalOpen$ } from './_internal/stores/accountModal';
+
+export const ModalProvider = observer(() => {
+	return (
+		<>
+			<AccountModal />
+			<CreateListingModal />
+			<MakeOfferModal />
+			<TransferModal />
+			<SellModal />
+			<SuccessfulPurchaseModal />
+
+			{/* Helper modals */}
+			<SwitchChainModal />
+			<TransactionStatusModal />
+		</>
+	);
+});

package/src/react/ui/styles/index.ts

@@ -0,0 +1 @@
+export * from './modal.css';

package/src/react/ui/styles/modal.css.ts

@@ -0,0 +1,73 @@
+import { atoms } from '@0xsequence/design-system';
+import { style } from '@vanilla-extract/css';
+import { styleVariants } from '@vanilla-extract/css';
+
+export const dialogOverlay = style([
+	atoms({
+		background: 'backgroundBackdrop',
+		position: 'fixed',
+		inset: '0',
+		zIndex: '20',
+	}),
+]);
+
+const dialogContentBase = style([
+	atoms({
+		display: 'flex',
+		background: 'backgroundPrimary',
+		borderRadius: 'lg',
+		position: 'fixed',
+		zIndex: '20',
+	}),
+	{
+		top: '50%',
+		left: '50%',
+		transform: 'translate(-50%, -50%)',
+		padding: '24px',
+	},
+]);
+
+export const dialogContent = styleVariants({
+	narrow: [
+		dialogContentBase,
+		{
+			width: '360px',
+			'@media': {
+				'screen and (max-width: 360px)': {
+					width: '100%',
+					bottom: '0',
+					transform: 'unset',
+					top: 'unset',
+					left: 'unset',
+					borderBottomLeftRadius: '0 !important',
+					borderBottomRightRadius: '0 !important',
+				},
+			},
+		},
+	],
+	wide: [
+		dialogContentBase,
+		{
+			width: '540px',
+			'@media': {
+				'screen and (max-width: 540px)': {
+					width: '100%',
+					bottom: '0',
+					transform: 'unset',
+					top: 'unset',
+					left: 'unset',
+					borderBottomLeftRadius: '0 !important',
+					borderBottomRightRadius: '0 !important',
+				},
+			},
+		},
+	],
+});
+
+export const closeButton = style([
+	atoms({
+		position: 'absolute',
+		right: '6',
+		top: '6',
+	}),
+]);

package/src/styles/index.ts

@@ -0,0 +1,18 @@
+/* icon styles */
+export * from '../react/ui/icons/styles.css';
+
+/* modal components styles */
+export * from '../react/ui/modals/_internal/components/actionModal/styles.css';
+export * from '../react/ui/modals/_internal/components/calendarPopover/styles.css';
+export * from '../react/ui/modals/_internal/components/currencyOptionsSelect/styles.css';
+export * from '../react/ui/modals/_internal/components/expirationDateSelect/styles.css';
+export * from '../react/ui/modals/_internal/components/priceInput/styles.css';
+export * from '../react/ui/modals/_internal/components/quantityInput/styles.css';
+export * from '../react/ui/modals/_internal/components/tokenPreview/styles.css';
+export * from '../react/ui/modals/_internal/components/alertMessage/styles.css';
+export * from '../react/ui/modals/_internal/components/switchChainModal/styles.css';
+
+/* modal styles */
+export * from '../react/ui/styles/index';
+export * from '../react/ui/modals/SuccessfulPurchaseModal/styles.css';
+export * from '../react/ui/modals/TransferModal/styles.css';

package/src/types/api-types.ts

@@ -0,0 +1,48 @@
+export {
+	SortOrder,
+	PropertyType,
+	MarketplaceKind,
+	OrderbookKind,
+	SourceKind,
+	OrderSide,
+	OrderStatus,
+	ContractType,
+	CollectionStatus,
+	ProjectStatus,
+	CollectibleStatus,
+	WalletKind,
+	StepType,
+	TransactionCrypto,
+	ExecuteType,
+} from '@internal';
+export type {
+	TokenMetadata,
+	Asset,
+	Page,
+	SortBy,
+	Filter,
+	PropertyFilter,
+	CollectiblesFilter,
+	Order,
+	FeeBreakdown,
+	CollectibleOrder,
+	OrderFilter,
+	Activity,
+	Collection,
+	CollectionConfig,
+	CollectionLastSynced,
+	Project,
+	Collectible,
+	Currency,
+	OrderData,
+	AdditionalFee,
+	Step,
+	PostRequest,
+	CreateReq,
+	GetOrdersInput,
+	Signature,
+	Domain,
+	CheckoutOptionsMarketplaceOrder,
+	CheckoutOptionsItem,
+	CheckoutOptions,
+} from '@internal';

package/src/types/index.ts

@@ -0,0 +1,4 @@
+export * from './api-types';
+export * from './marketplace-config';
+export * from './sdk-config';
+export * from './types';

package/src/types/marketplace-config.ts

@@ -0,0 +1,63 @@
+import type { ChainId } from '@0xsequence/network';
+
+interface Socials {
+	twitter?: string;
+	website?: string;
+	discord?: string;
+	instagram?: string;
+	tiktok?: string;
+	youtube?: string;
+}
+
+enum WalletOptions {
+	Sequence = 'sequence',
+	Metamask = 'metamask',
+	WalletConnect = 'walletconnect',
+	Coinbase = 'coinbase',
+	Injected = 'injected',
+	Ledger = 'ledger',
+	Rainbow = 'rainbow',
+}
+
+type NewWalletConnectors = 'walletconnect' | 'coinbase';
+interface WalletOptionsNew {
+	connectors: NewWalletConnectors[];
+	includeEIP6963Wallets: boolean;
+	walletType: 'embedded' | 'universal';
+}
+
+interface Collection {
+	collectionAddress: string;
+	chainId: ChainId;
+	exchanges?: string[];
+	marketplaceFeePercentage: number;
+	bannerUrl?: string;
+	marketplaceType: 'p2p' | 'orderbook' | 'amm';
+	currencyOptions?: string[];
+}
+
+type LandingPageLayout = 'default' | 'big_left_banner' | 'floating_header';
+
+export interface MarketplaceConfig {
+	projectId: number; // builder project Id
+	publisherId: string;
+	title: string;
+	shortDescription: string;
+	socials?: Socials;
+	faviconUrl: string;
+	landingBannerUrl: string;
+	logoUrl?: string;
+	fontUrl?: string;
+	ogImage?: string;
+	titleTemplate: string;
+	disableLiquidityProviderTools?: boolean;
+	walletOptions: WalletOptions[];
+	walletOptionsNew?: WalletOptionsNew;
+	collections: Collection[];
+	landingPageLayout: LandingPageLayout;
+	// Appended in the sdk
+	cssString: string;
+	// Appended in the sdk
+
+	manifestUrl: string;
+}

package/src/types/messages.ts

@@ -0,0 +1,43 @@
+type ApproveTokenMessageCallbacks = {
+	onSuccess?: () => void;
+	onUnknownError?: (error: Error | unknown) => void;
+};
+
+export type SwitchChainMessageCallbacks = {
+	onSuccess?: () => void;
+	onSwitchingNotSupported?: () => void;
+	onUserRejectedRequest?: () => void;
+	onUnknownError?: (error: Error | unknown) => void;
+};
+
+type MakeOfferMessageCallbacks = {
+	onSuccess?: () => void;
+	onUnknownError?: (error: Error | unknown) => void;
+};
+
+type CreateListingMessageCallbacks = {
+	onSuccess?: () => void;
+	onUnknownError?: (error: Error | unknown) => void;
+};
+
+type SellCollectibleMessageCallbacks = {
+	onSuccess?: () => void;
+	onUnknownError?: (error: Error | unknown) => void;
+};
+
+type TransferCollectiblesMessageCallbacks = {
+	onSuccess?: () => void;
+	onUnknownError?: (error: Error | unknown) => void;
+};
+
+export type Messages =
+	| {
+			approveToken?: ApproveTokenMessageCallbacks;
+			switchChain?: SwitchChainMessageCallbacks;
+
+			createListing?: CreateListingMessageCallbacks;
+			makeOffer?: MakeOfferMessageCallbacks;
+			sellCollectible?: SellCollectibleMessageCallbacks;
+			transferCollectibles?: TransferCollectiblesMessageCallbacks;
+	  }
+	| undefined;

package/src/types/sdk-config.ts

@@ -0,0 +1,23 @@
+export type Env = 'development' | 'next' | 'production';
+
+export type SdkConfig = {
+	projectAccessKey: string;
+	projectId: string;
+	wallet?: {
+		walletConnectProjectId?: string;
+		embedded?: {
+			waasConfigKey: string;
+			googleClientId?: string;
+			appleClientId?: string;
+			appleRedirectURI?: string;
+		};
+	};
+	_internal?: {
+		devAccessKey?: string;
+		nextAccessKey?: string;
+		builderEnv?: Env;
+		marketplaceEnv?: Env;
+		metadataEnv?: Env;
+		indexerEnv?: Env;
+	};
+};

package/src/types/types.ts

@@ -0,0 +1,6 @@
+import type { Currency } from '@types';
+
+export type Price = {
+	amountRaw: string;
+	currency: Currency;
+};

package/src/utils/abi/abi/standard/EIP2981.ts

@@ -0,0 +1,15 @@
+export const EIP2981_ABI = [
+	{
+		inputs: [
+			{ internalType: 'uint256', name: '', type: 'uint256' },
+			{ internalType: 'uint256', name: '_saleCost', type: 'uint256' },
+		],
+		name: 'royaltyInfo',
+		outputs: [
+			{ internalType: 'address', name: 'receiver', type: 'address' },
+			{ internalType: 'uint256', name: 'royaltyAmount', type: 'uint256' },
+		],
+		stateMutability: 'view',
+		type: 'function',
+	},
+] as const;

package/src/utils/abi/abi/standard/index.ts

@@ -0,0 +1 @@
+export * from './EIP2981';