@0xsequence/marketplace-sdk 0.3.0 → 0.3.2

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

@@ -2,7 +2,7 @@ import { Box, NumericInput, TokenImage } from '@0xsequence/design-system';
 import type { Observable } from '@legendapp/state';
 import { observer } from '@legendapp/state/react';
 import { useState } from 'react';
-import { type Hex, erc20Abi, formatUnits, parseUnits } from 'viem';
+import { type Hex, erc20Abi, parseUnits } from 'viem';
 import { useAccount, useReadContract } from 'wagmi';
 import type { Price } from '../../../../../../types';
 import CurrencyOptionsSelect from '../currencyOptionsSelect';
@@ -35,9 +35,10 @@ const PriceInput = observer(function PriceInput({
 			enabled: checkBalance?.enabled,
 		},
 	});
-	const listingPriceAmountRaw = $listingPrice.amountRaw.get();
 	const currencyDecimals = $listingPrice.currency.decimals.get();
 
+	const [value, setValue] = useState('');
+
 	const checkInsufficientBalance = (priceAmountRaw: string) => {
 		const hasInsufficientBalance =
 			isBalanceSuccess &&
@@ -57,11 +58,8 @@ const PriceInput = observer(function PriceInput({
 	};
 
 	const changeListingPrice = (value: string) => {
-		const parsedAmount = parseUnits(
-			value,
-			Number($listingPrice.currency.decimals.get()),
-		);
-
+		setValue(value);
+		const parsedAmount = parseUnits(value, Number(currencyDecimals));
 		$listingPrice.amountRaw.set(parsedAmount.toString());
 		checkBalance && checkInsufficientBalance(parsedAmount.toString());
 	};
@@ -80,10 +78,9 @@ const PriceInput = observer(function PriceInput({
 
 			<NumericInput
 				name="listingPrice"
-				decimals={$listingPrice?.currency.decimals.get()}
+				decimals={currencyDecimals}
 				label="Enter price"
 				labelLocation="top"
-				placeholder="0.00"
 				controls={
 					<CurrencyOptionsSelect
 						$selectedCurrency={$listingPrice?.currency}
@@ -91,15 +88,7 @@ const PriceInput = observer(function PriceInput({
 						chainId={chainId}
 					/>
 				}
-				numeric={true}
-				value={
-					listingPriceAmountRaw
-						? formatUnits(
-								BigInt(listingPriceAmountRaw),
-								Number(currencyDecimals),
-							)
-						: ''
-				}
+				value={value}
 				onChange={(event) => changeListingPrice(event.target.value)}
 				width="full"
 			/>

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

@@ -1,11 +1,3 @@
-import { Close, Content, Overlay, Portal, Root } from '@radix-ui/react-dialog';
-import { switchChainModal$ } from './store';
-import {
-	closeButton,
-	dialogOverlay,
-	switchChainCta,
-	switchChainModalContent,
-} from './styles.css';
 import {
 	Button,
 	CloseIcon,
@@ -13,20 +5,25 @@ import {
 	Spinner,
 	Text,
 } from '@0xsequence/design-system';
-import AlertMessage from '../alertMessage';
 import { observer } from '@legendapp/state/react';
+import { Close, Content, Overlay, Portal, Root } from '@radix-ui/react-dialog';
+import type { SwitchChainErrorType } from 'viem';
 import { useSwitchChain } from 'wagmi';
-import { BaseError } from 'viem';
 import { getPresentableChainName } from '../../../../../../utils/network';
-
-import { UserRejectedRequestError } from 'viem';
-import { SwitchChainNotSupportedError } from 'wagmi';
-import type { SwitchChainCallbacks } from '../../../../../../types/callbacks';
+import type { ChainId } from '../../../../../_internal';
+import AlertMessage from '../alertMessage';
+import { switchChainModal$ } from './store';
+import {
+	closeButton,
+	dialogOverlay,
+	switchChainCta,
+	switchChainModalContent,
+} from './styles.css';
 
 export type ShowSwitchChainModalArgs = {
-	chainIdToSwitchTo: number;
-	onSwitchChain: () => void;
-	callbacks?: SwitchChainCallbacks;
+	chainIdToSwitchTo: ChainId;
+	onSuccess?: () => void;
+	onError?: (error: SwitchChainErrorType) => void;
 };
 
 export const useSwitchChainModal = () => {
@@ -42,42 +39,18 @@ const SwitchChainModal = observer(() => {
 	const isSwitching$ = switchChainModal$.state.isSwitching;
 	const chainName = getPresentableChainName(chainIdToSwitchTo!);
 	const { switchChainAsync } = useSwitchChain();
-	const {
-		onSwitchingNotSupported,
-		onUserRejectedRequest,
-		onUnknownError,
-		onSuccess,
-	}: Partial<SwitchChainCallbacks> =
-		switchChainModal$.state.callbacks.get() || {};
 
 	async function handleSwitchChain() {
 		isSwitching$.set(true);
 
 		try {
-			await switchChainAsync({ chainId: chainIdToSwitchTo! });
+			await switchChainAsync({ chainId: Number(chainIdToSwitchTo!) });
 
-			switchChainModal$.state.onSwitchChain();
-			onSuccess && onSuccess();
+			switchChainModal$.state.onSuccess?.();
 
 			switchChainModal$.close();
 		} catch (error) {
-			if (error instanceof BaseError) {
-				const name = error.name as BaseError['name'];
-
-				switch (name) {
-					case SwitchChainNotSupportedError.name:
-						onSwitchingNotSupported && onSwitchingNotSupported();
-						break;
-					case UserRejectedRequestError.name:
-						onUserRejectedRequest && onUserRejectedRequest();
-						break;
-					default:
-						onUnknownError && onUnknownError(error);
-						break;
-				}
-			} else {
-				onUnknownError && onUnknownError(error);
-			}
+			switchChainModal$.state.onError?.(error as SwitchChainErrorType);
 		} finally {
 			isSwitching$.set(false);
 		}

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

@@ -1,27 +1,28 @@
 import { observable } from '@legendapp/state';
+import type { SwitchChainErrorType } from 'viem';
 import type { ShowSwitchChainModalArgs } from '.';
-import type { SwitchChainCallbacks } from '../../../../../../types/callbacks';
+import type { ChainId } from '../../../../../_internal';
 
 export interface SwitchChainModalState {
 	isOpen: boolean;
 	open: (args: ShowSwitchChainModalArgs) => void;
 	close: () => void;
 	state: {
-		chainIdToSwitchTo?: number;
-		onSwitchChain?: () => void;
+		chainIdToSwitchTo: ChainId | undefined;
 		isSwitching: boolean;
-		callbacks?: SwitchChainCallbacks;
+		onSuccess: (() => void) | undefined;
+		onError: undefined | ((error: SwitchChainErrorType) => void);
 	};
 }
 
 export const initialState: SwitchChainModalState = {
 	isOpen: false,
-	open: ({ chainIdToSwitchTo, onSwitchChain, callbacks }) => {
+	open: ({ chainIdToSwitchTo, onError, onSuccess }) => {
 		switchChainModal$.state.set({
 			...switchChainModal$.state.get(),
 			chainIdToSwitchTo,
-			onSwitchChain,
-			callbacks,
+			onError,
+			onSuccess,
 		});
 		switchChainModal$.isOpen.set(true);
 	},
@@ -33,7 +34,8 @@ export const initialState: SwitchChainModalState = {
 	},
 	state: {
 		chainIdToSwitchTo: undefined,
-		onSwitchChain: () => {},
+		onError: undefined,
+		onSuccess: undefined,
 		isSwitching: false,
 	},
 };

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

@@ -2,6 +2,7 @@ import { Box, Image, Skeleton, Text } from '@0xsequence/design-system';
 import type { Hex } from 'viem';
 import { useCollectible } from '../../../../../hooks';
 import { tokenPreview } from './styles.css';
+import ChessTileImage from '../../../../images/chess-tile.png';
 
 type TokenPreviewProps = {
 	collectionName?: string;
@@ -38,7 +39,7 @@ export default function TokenPreview({
 	return (
 		<Box className={tokenPreview}>
 			<Image
-				src={collectable?.image}
+				src={collectable?.image || ChessTileImage}
 				alt={collectable?.name}
 				width={'9'}
 				height={'9'}
@@ -46,11 +47,21 @@ export default function TokenPreview({
 			/>
 
 			<Box display={'flex'} flexDirection={'column'} marginLeft={'3'}>
-				<Text fontSize={'small'} color={'text80'} fontWeight={'medium'}>
+				<Text
+					fontSize={'small'}
+					color={'text80'}
+					fontWeight={'medium'}
+					fontFamily="body"
+				>
 					{collectionName}
 				</Text>
 
-				<Text fontSize={'small'} fontWeight={'bold'} color={'text100'}>
+				<Text
+					fontSize={'small'}
+					fontWeight={'bold'}
+					color={'text100'}
+					fontFamily="body"
+				>
 					{collectable?.name}
 				</Text>
 			</Box>

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

@@ -1,4 +1,4 @@
-import { Box, NetworkImage, Skeleton, Text } from '@0xsequence/design-system';
+import { Box, Image, Skeleton, Text } from '@0xsequence/design-system';
 import { type Hex, formatUnits } from 'viem';
 import type { Price } from '../../../../../../types';
 import {
@@ -11,6 +11,7 @@ type TransactionDetailsProps = {
 	collectionAddress: Hex;
 	chainId: string;
 	price?: Price;
+	currencyImageUrl?: string;
 };
 
 //TODO: Move this
@@ -21,6 +22,7 @@ export default function TransactionDetails({
 	collectionAddress,
 	chainId,
 	price,
+	currencyImageUrl,
 }: TransactionDetailsProps) {
 	const { data, isLoading: marketplaceConfigLoading } = useMarketplaceConfig();
 
@@ -67,7 +69,7 @@ export default function TransactionDetails({
 			</Text>
 
 			<Box display="flex" alignItems="center" gap="2">
-				<NetworkImage chainId={Number(chainId)} size="xs" />
+				<Image src={currencyImageUrl} width="3" height="3" />
 
 				{priceLoading ? (
 					<Skeleton width="16" height={'4'} />

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

@@ -1,15 +1,15 @@
-import { Box, NetworkImage, Skeleton, Text } from '@0xsequence/design-system';
+import { Box, Image, Skeleton, Text } from '@0xsequence/design-system';
 import { formatDistanceToNow } from 'date-fns';
 
 type TransactionHeaderProps = {
 	title: string;
-	chainId: number;
+	currencyImageUrl?: string;
 	date?: Date;
 };
 
 export default function TransactionHeader({
 	title,
-	chainId,
+	currencyImageUrl,
 	date,
 }: TransactionHeaderProps) {
 	return (
@@ -18,7 +18,7 @@ export default function TransactionHeader({
 				{title}
 			</Text>
 
-			<NetworkImage size="xs" chainId={chainId} />
+			<Image src={currencyImageUrl} width="3" height="3" marginRight="1" />
 
 			{(date && (
 				<Text fontSize="small" color="text50" flexGrow="1" textAlign="right">

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

@@ -2,17 +2,18 @@ import { Box, Image, NetworkImage, Text } from '@0xsequence/design-system';
 import { observer } from '@legendapp/state/react';
 import { type Hex, formatUnits } from 'viem';
 import type { Price } from '../../../../../../types';
-import type { TokenMetadata } from '../../../../../_internal';
 import { useCollection } from '../../../../../hooks';
 import TimeAgo from '../timeAgo';
 import { transactionStatusModal$ } from '../transactionStatusModal/store';
 import { useTransactionPreviewTitle } from './useTransactionPreviewTitle';
+import type { TokenMetadata } from '@0xsequence/metadata';
 
 type TransactionPreviewProps = {
 	price?: Price;
 	collectionAddress: Hex;
 	chainId: string;
 	collectible: TokenMetadata;
+	currencyImageUrl?: string;
 	isConfirming: boolean;
 	isConfirmed: boolean;
 	isFailed: boolean;
@@ -24,6 +25,7 @@ const TransactionPreview = observer(
 		collectionAddress,
 		chainId,
 		collectible,
+		currencyImageUrl,
 		isConfirming,
 		isConfirmed,
 		isFailed,
@@ -95,7 +97,7 @@ const TransactionPreview = observer(
 							justifyContent="flex-end"
 							gap="1"
 						>
-							<NetworkImage chainId={Number(chainId)} size="xs" />
+							<Image src={currencyImageUrl} width="3" height="3" />
 
 							<Text color="text80" fontSize="small" fontWeight="medium">
 								{priceFormatted} {price!.currency.symbol}

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

@@ -10,7 +10,7 @@ import type { QueryKey } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import type { Hex } from 'viem';
 import { useTransactionReceipt } from 'wagmi';
-import type { Price, TokenMetadata } from '../../../../../../types';
+import type { Price } from '../../../../../../types';
 import type { BaseCallbacks } from '../../../../../../types/callbacks';
 import { getQueryClient } from '../../../../../_internal';
 import { useCollectible } from '../../../../../hooks';
@@ -121,15 +121,18 @@ const TransactionStatusModal = observer(() => {
 						<Skeleton width="20" height="4" />
 					)}
 
-					<TransactionPreview
-						price={price}
-						collectionAddress={collectionAddress}
-						chainId={chainId}
-						collectible={collectible as TokenMetadata}
-						isConfirming={isConfirming}
-						isConfirmed={isConfirmed}
-						isFailed={isFailed}
-					/>
+					{collectible && (
+						<TransactionPreview
+							price={price}
+							collectionAddress={collectionAddress}
+							chainId={chainId}
+							collectible={collectible}
+							currencyImageUrl={price?.currency.imageUrl}
+							isConfirming={isConfirming}
+							isConfirmed={isConfirmed}
+							isFailed={isFailed}
+						/>
+					)}
 
 					<TransactionFooter
 						transactionHash={hash!}

package/src/react/ui/modals/_internal/types.ts

@@ -0,0 +1,13 @@
+import type { Hash, Hex } from 'viem';
+
+export type ModalCallbacks = {
+	onSuccess?: (hash: Hash) => void;
+	onError?: (error: Error) => void;
+};
+
+export type BaseModalState = {
+	isOpen: boolean;
+	chainId: string;
+	collectionAddress: Hex;
+	callbacks?: ModalCallbacks;
+};

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

@@ -1,13 +1,14 @@
 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 SwitchChainModal from './_internal/components/switchChainModal';
-import TransactionStatusModal from './_internal/components/transactionStatusModal';
 import { _accountModalOpen$ } from './_internal/stores/accountModal';
+import { BuyModal } from './BuyModal';
 
 export const ModalProvider = observer(() => {
 	return (
@@ -17,6 +18,7 @@ export const ModalProvider = observer(() => {
 			<MakeOfferModal />
 			<TransferModal />
 			<SellModal />
+			<BuyModal />
 			<SuccessfulPurchaseModal />
 			{/* Helper modals */}
 			<SwitchChainModal />

package/src/styles/index.ts

@@ -4,8 +4,6 @@ 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';

package/src/utils/abi/index.ts

@@ -0,0 +1,2 @@
+export * from './marketplace';
+export * from './token';

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

@@ -0,0 +1,3 @@
+export * from './EIP2981';
+export * from './sequence-marketplace-v1';
+export * from './sequence-marketplace-v2';