@0xsequence/marketplace-sdk 0.3.1 → 0.3.3

package/src/react/ui/components/collectible-card/Footer.tsx

@@ -51,6 +51,7 @@ export const Footer = ({
 				alignItems="center"
 				justifyContent="space-between"
 				position="relative"
+				width="full"
 			>
 				<Text
 					color="text100"
@@ -64,8 +65,12 @@ export const Footer = ({
 
 				{highestOffer && onOfferClick && (
 					<IconButton
+						size="xs"
 						variant="primary"
 						className={offerBellButton}
+						position="absolute"
+						right="0"
+						top="0"
 						onClick={(e) => {
 							e.stopPropagation();
 							onOfferClick?.();
@@ -94,35 +99,34 @@ export const Footer = ({
 				</Box>
 			)}
 
-			{!!balance && type !== ContractType.ERC721 && (
-				<Text
-					background="backgroundSecondary"
-					color="text80"
-					fontSize="small"
-					textAlign="left"
-					fontFamily="body"
-					paddingX="2"
-					paddingY="1"
-					borderRadius="sm"
-				>
-					Owned: {balance}
-				</Text>
-			)}
-
-			{type === ContractType.ERC721 && (
-				<Text
-					background="backgroundSecondary"
-					color="text80"
-					fontSize="small"
-					textAlign="left"
-					fontFamily="body"
-					paddingX="2"
-					paddingY="1"
-					borderRadius="sm"
-				>
-					ERC-721
-				</Text>
-			)}
+			<TokenTypeBalancePill balance={balance} type={type as ContractType} />
 		</Box>
 	);
 };
+
+const TokenTypeBalancePill = ({
+	balance,
+	type,
+}: { balance?: string; type: ContractType }) => {
+	const displayText =
+		type === ContractType.ERC1155
+			? !!balance
+				? `Owned: ${balance}`
+				: 'ERC-1155'
+			: 'ERC-721';
+
+	return (
+		<Text
+			background="backgroundSecondary"
+			color="text80"
+			fontSize="small"
+			textAlign="left"
+			fontFamily="body"
+			paddingX="2"
+			paddingY="1"
+			borderRadius="sm"
+		>
+			{displayText}
+		</Text>
+	);
+};

package/src/react/ui/modals/BuyModal/_store.ts

@@ -15,6 +15,7 @@ export interface BuyModalState {
 	state: {
 		order: Order;
 		quantity: string;
+		modalId: number;
 	};
 	callbacks?: ModalCallbacks;
 }
@@ -30,8 +31,9 @@ export const initialState: BuyModalState = {
 		defaultCallbacks?: ModalCallbacks;
 	}) => {
 		buyModal$.state.set({
-			...buyModal$.state.get(),
+			quantity: args.order.quantityAvailableFormatted,
 			order: args.order,
+			modalId: buyModal$.state.modalId.get() + 1,
 		});
 		buyModal$.callbacks.set(callbacks || defaultCallbacks);
 		buyModal$.isOpen.set(true);
@@ -46,6 +48,7 @@ export const initialState: BuyModalState = {
 	state: {
 		order: undefined as unknown as Order,
 		quantity: '1',
+		modalId: 0
 	},
 	callbacks: undefined,
 };

package/src/react/ui/modals/BuyModal/index.tsx

@@ -1,13 +1,14 @@
 import type { Hex } from 'viem';
 import { buyModal$ } from './_store';
-import { ContractType, type Order } from '../../../_internal';
-import { observer, useSelector } from '@legendapp/state/react';
+import { ContractType, MarketplaceKind, type Order } from '../../../_internal';
+import { observer, Show, useSelector } from '@legendapp/state/react';
 import { useCollectible, useCollection } from '../../../hooks';
 import { ActionModal } from '../_internal/components/actionModal';
 import { useEffect } from 'react';
 import QuantityInput from '..//_internal/components/quantityInput';
 import { useBuyCollectable } from '../../../hooks/useBuyCollectable';
 import type { ModalCallbacks } from '../_internal/types';
+import { TokenMetadata } from '@0xsequence/indexer';
 
 export type ShowBuyModalArgs = {
 	chainId: string;
@@ -24,28 +25,22 @@ export const useBuyModal = (callbacks?: ModalCallbacks) => {
 	};
 };
 
-export const BuyModal = () => {
-	const isOpen = useSelector(buyModal$.isOpen);
-	const { data: collection } = useCollection({
-		chainId: buyModal$.state.order.chainId.get(),
-		collectionAddress: buyModal$.state.order.collectionContractAddress.get(),
-	});
+export const BuyModal = () => (
+	<Show if={buyModal$.isOpen}>
+		<BuyModalContent />
+	</Show>
+);
 
-	if (!isOpen || !collection) return null;
-
-	return collection.type === ContractType.ERC721 ? (
-		<CheckoutModal />
-	) : (
-		<ERC1155QuantityModal />
-	);
-};
-
-const CheckoutModal = observer(() => {
-	const order = buyModal$.state.order.get();
-	const chainId = String(order.chainId);
-	const collectionAddress = order.collectionContractAddress as Hex;
-	const collectibleId = order.tokenId;
+export const BuyModalContent = () => {
+	const chainId = String(useSelector(buyModal$.state.order.chainId))
+	const collectionAddress = useSelector(buyModal$.state.order.collectionContractAddress) as Hex
+	const collectibleId = useSelector(buyModal$.state.order.tokenId)
+	const modalId = useSelector(buyModal$.state.modalId)
 
+	const { data: collection } = useCollection({
+		chainId,
+		collectionAddress,
+	});
 	const { buy } = useBuyCollectable({
 		chainId,
 		collectionAddress,
@@ -57,39 +52,72 @@ const CheckoutModal = observer(() => {
 		collectibleId,
 	});
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-	useEffect(() => {
-		if (!collectable) return;
-		buy({
-			orderId: order.orderId,
-			collectableDecimals: collectable.decimals || 0,
-			quantity: '1',
-			marketplace: order.marketplace,
-		});
-	}, [order, collectable]);
+	if (modalId == 0 || !collection || !collectable || !buy) return null;
 
-	return <></>;
-});
+	return collection.type === ContractType.ERC721 ? (
+		<CheckoutModal
+			key={modalId}
+			buy={buy}
+			collectable={collectable}
+			order={buyModal$.state.order.get()}
+		/>
+	) : (
+		<ERC1155QuantityModal
+			buy={buy}
+			collectable={collectable}
+			order={buyModal$.state.order.get()}
+			chainId={chainId}
+			collectionAddress={collectionAddress}
+			collectibleId={collectibleId}
+		/>
+	);
+};
 
-const ERC1155QuantityModal = observer(() => {
-	const order = buyModal$.state.order.get();
-	const chainId = String(order.chainId);
-	const collectionAddress = order.collectionContractAddress as Hex;
-	const collectibleId = order.tokenId;
+interface CheckoutModalProps {
+	buy: (params: {
+		orderId: string;
+		collectableDecimals: number;
+		quantity: string;
+		marketplace: MarketplaceKind;
+	}) => void;
+	collectable: TokenMetadata;
+	order: Order;
+}
 
-	const { buy } = useBuyCollectable({
-		chainId,
-		collectionAddress,
-	});
+function CheckoutModal({ buy, collectable, order }: CheckoutModalProps) {
+	useEffect(() => {
+		const executeBuy = () => {
+			console.log('executeBuy');
+			if (!collectable) return;
+			buy({
+				orderId: order.orderId,
+				collectableDecimals: collectable.decimals || 0,
+				quantity: '1',
+				marketplace: order.marketplace,
+			});
+			buyModal$.close();
+		};
 
-	const { data: collectable } = useCollectible({
-		chainId,
-		collectionAddress,
-		collectibleId,
-	});
+		executeBuy();
+	}, []);
 
-	if (!order || !collectable) return null;
+	return <></>;
+}
+
+interface ERC1155QuantityModalProps extends CheckoutModalProps {
+	chainId: string;
+	collectionAddress: Hex;
+	collectibleId: string;
+}
 
+const ERC1155QuantityModal = observer(({
+	buy,
+	collectable,
+	order,
+	chainId,
+	collectionAddress,
+	collectibleId
+}: ERC1155QuantityModalProps) => {
 	return (
 		<ActionModal
 			store={buyModal$}

package/src/react/ui/modals/CreateListingModal/index.tsx

@@ -1,10 +1,11 @@
 import { Box } from '@0xsequence/design-system';
 import { Show, observer } from '@legendapp/state/react';
+import type { QueryKey } from '@tanstack/react-query';
 import type { Hash, Hex } from 'viem';
 import {
-	collectableKeys,
 	type ContractType,
 	StepType,
+	collectableKeys,
 } from '../../../_internal';
 import { useCollectible, useCollection } from '../../../hooks';
 import { useCreateListing } from '../../../hooks/useCreateListing';
@@ -12,6 +13,8 @@ import {
 	ActionModal,
 	type ActionModalProps,
 } from '../_internal/components/actionModal/ActionModal';
+import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
+import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
 import ExpirationDateSelect from '../_internal/components/expirationDateSelect';
 import FloorPriceText from '../_internal/components/floorPriceText';
 import PriceInput from '../_internal/components/priceInput';
@@ -19,15 +22,12 @@ import QuantityInput from '../_internal/components/quantityInput';
 import TokenPreview from '../_internal/components/tokenPreview';
 import TransactionDetails from '../_internal/components/transactionDetails';
 import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
+import type { ModalCallbacks } from '../_internal/types';
 import { createListingModal$ } from './_store';
 import {
 	getCreateListingTransactionMessage,
 	getCreateListingTransactionTitle,
 } from './_utils/getCreateListingTransactionTitleMessage';
-import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
-import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
-import type { ModalCallbacks } from '../_internal/types';
-import type { QueryKey } from '@tanstack/react-query';
 
 export type ShowCreateListingModalArgs = {
 	collectionAddress: Hex;
@@ -104,7 +104,11 @@ export const Modal = observer(
 				createListingModal$.close();
 			},
 			onError: (error) => {
-				createListingModal$.onError?.(error);
+				if (typeof createListingModal$.callbacks?.onError === 'function') {
+					createListingModal$.onError(error);
+				} else {
+					console.debug('onError callback not provided:', error);
+				}
 			},
 		});
 

package/src/react/ui/modals/MakeOfferModal/index.tsx

@@ -100,11 +100,19 @@ const ModalContent = observer(
 				makeOfferModal$.close();
 			},
 			onSuccess: (hash) => {
-				makeOfferModal$.callbacks?.onSuccess?.(hash);
+				if (typeof makeOfferModal$.callbacks?.onSuccess === 'function') {
+					makeOfferModal$.callbacks.onSuccess(hash);
+				} else {
+					console.debug('onSuccess callback not provided:', hash);
+				}
 			},
 			onError: (error) => {
-				makeOfferModal$.callbacks?.onError?.(error);
-			},
+				if (typeof makeOfferModal$.callbacks?.onError === 'function') {
+					makeOfferModal$.callbacks.onError(error);
+				} else {
+					console.debug('onError callback not provided:', error);
+				}
+			}
 		});
 
 		const dateToUnixTime = (date: Date) =>

package/src/react/ui/modals/SellModal/index.tsx

@@ -90,11 +90,19 @@ const ModalContent = observer(
 				sellModal$.close();
 			},
 			onSuccess: (hash) => {
-				sellModal$.callbacks?.onSuccess?.(hash);
+				if (typeof sellModal$.callbacks?.onSuccess === 'function') {
+					sellModal$.callbacks.onSuccess(hash);
+				} else {
+					console.debug('onSuccess callback not provided:', hash);
+				}
 			},
 			onError: (error) => {
-				sellModal$.callbacks?.onError?.(error);
-			},
+				if (typeof sellModal$.callbacks?.onError === 'function') {
+					sellModal$.callbacks.onError(error);
+				} else {
+					console.debug('onError callback not provided:', error);
+				}
+			}
 		});
 
 		const {
@@ -169,9 +177,9 @@ const ModalContent = observer(
 					price={
 						currency
 							? {
-									amountRaw: order?.priceAmount,
-									currency,
-								}
+								amountRaw: order?.priceAmount,
+								currency,
+							}
 							: undefined
 					}
 					currencyImageUrl={currency?.imageUrl}

package/src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx

@@ -48,7 +48,7 @@ const EnterWalletAddressView = () => {
 
 	return (
 		<Box display="grid" gap="6" flexGrow="1">
-			<Text color="white" fontSize="large" fontWeight="bold">
+			<Text color="white" fontSize="large" fontWeight="bold" fontFamily="body">
 				Transfer your item
 			</Text>
 
@@ -80,6 +80,7 @@ const EnterWalletAddressView = () => {
 							color={insufficientBalance ? 'negative' : 'text50'}
 							fontSize="small"
 							fontWeight="medium"
+							fontFamily="body"
 						>
 							{`You have ${balanceAmount} of this item`}
 						</Text>

package/src/react/ui/modals/TransferModal/_views/followWalletInstructions/index.tsx

@@ -6,7 +6,7 @@ import { Box, Button, Text } from '@0xsequence/design-system';
 const FollowWalletInstructionsView = observer(() => {
 	return (
 		<Box display="grid" gap="6" flexGrow="1">
-			<Text color="white" fontSize="large" fontWeight="bold">
+			<Text color="white" fontSize="large" fontWeight="bold" fontFamily="body">
 				Transfer your item
 			</Text>
 

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

@@ -10,7 +10,7 @@ type AlertMessageProps = {
 export default function AlertMessage({ message, type }: AlertMessageProps) {
 	return (
 		<Box className={`${alertMessageBox} ${alertMessageBoxVariants[type]}`}>
-			<Text color="white" fontSize="normal" fontWeight="medium">
+			<Text color="white" fontSize="normal" fontWeight="medium" fontFamily="body">
 				{message}
 			</Text>
 

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

@@ -46,7 +46,7 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 	const options = currencies.map(
 		(currency) =>
 			({
-				label: currency.name,
+				label: currency.symbol,
 				value: currency.contractAddress,
 			}) satisfies SelectOption,
 	);
@@ -61,12 +61,7 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 	};
 
 	return (
-		<CustomSelect
-			items={options}
-			placeholder={options[0].label}
-			onValueChange={onChange}
-			defaultValue={options[0].value}
-		/>
+		<CustomSelect items={options} onValueChange={onChange} placeholder="" />
 	);
 });
 

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

@@ -84,6 +84,7 @@ const ExpirationDateSelect = observer(function ExpirationDateSelect({
 				textAlign={'left'}
 				width={'full'}
 				color={'text100'}
+				fontFamily="body"
 			>
 				Set expiry
 			</Text>

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

@@ -48,6 +48,7 @@ export default function FloorPriceText({
 			textAlign={'left'}
 			width={'full'}
 			color={'text50'}
+			fontFamily="body"
 		>
 			{floorPriceDifferenceText}
 		</Text>

package/src/react/ui/modals/_internal/components/transaction-footer/index.tsx

@@ -1,3 +1,4 @@
+import { ChainId, networks } from '@0xsequence/network';
 import { truncateMiddle } from '../../../../../../utils';
 import SvgPositiveCircleIcon from '../../../../icons/PositiveCircleIcon';
 import { Box, Spinner, Text } from '@0xsequence/design-system';
@@ -8,6 +9,7 @@ type TransactionFooterProps = {
 	isConfirming: boolean;
 	isConfirmed: boolean;
 	isFailed: boolean;
+	chainId: ChainId;
 };
 
 export default function TransactionFooter({
@@ -15,6 +17,7 @@ export default function TransactionFooter({
 	isConfirming,
 	isConfirmed,
 	isFailed,
+	chainId,
 }: TransactionFooterProps) {
 	const icon =
 		(isConfirming && <Spinner size="md" />) ||
@@ -24,25 +27,43 @@ export default function TransactionFooter({
 		(isConfirming && 'Processing transaction') ||
 		(isConfirmed && 'Transaction complete') ||
 		(isFailed && 'Transaction failed');
+
+	const transactionUrl = `${networks[chainId as unknown as ChainId]?.blockExplorer?.rootUrl}tx/${transactionHash}`;
 	return (
 		<Box display="flex" alignItems="center">
 			{icon}
 
-			<Text color="text50" fontSize="normal" fontWeight="medium" marginLeft="2">
-				{title}
-			</Text>
-
 			<Text
-				// TODO: Replace "polygonLight" with the actual color from design system
-				color="polygonLight"
-				flexGrow="1"
-				textAlign="right"
+				color="text50"
 				fontSize="normal"
 				fontWeight="medium"
 				marginLeft="2"
+				fontFamily="body"
 			>
-				{truncateMiddle(transactionHash, 4, 4)}
+				{title}
 			</Text>
+
+			<Box
+				as="a"
+				flexGrow="1"
+				marginLeft="2"
+				href={transactionUrl}
+				target="_blank"
+				rel="noopener noreferrer"
+				textAlign="right"
+				textDecoration="none"
+			>
+				<Text
+					// TODO: Replace "polygonLight" with the actual color from design system
+					color="polygonLight"
+					textAlign="right"
+					fontSize="normal"
+					fontWeight="medium"
+					fontFamily="body"
+				>
+					{truncateMiddle(transactionHash, 4, 4)}
+				</Text>
+			</Box>
 		</Box>
 	);
 }

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

@@ -64,7 +64,7 @@ export default function TransactionDetails({
 			justifyContent={'space-between'}
 			alignItems={'center'}
 		>
-			<Text fontSize={'small'} color={'text50'}>
+			<Text fontSize={'small'} color={'text50'} fontFamily="body">
 				Total earnings
 			</Text>
 
@@ -74,7 +74,7 @@ export default function TransactionDetails({
 				{priceLoading ? (
 					<Skeleton width="16" height={'4'} />
 				) : (
-					<Text fontSize={'small'} color={'text100'}>
+					<Text fontSize={'small'} color={'text100'} fontFamily="body">
 						{formattedAmount} {price.currency.symbol}
 					</Text>
 				)}

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

@@ -14,14 +14,26 @@ export default function TransactionHeader({
 }: TransactionHeaderProps) {
 	return (
 		<Box display="flex" alignItems="center" width="full">
-			<Text fontSize="small" fontWeight="medium" color="text80" marginRight="1">
+			<Text
+				fontSize="small"
+				fontWeight="medium"
+				color="text80"
+				marginRight="1"
+				fontFamily="body"
+			>
 				{title}
 			</Text>
 
 			<Image src={currencyImageUrl} width="3" height="3" marginRight="1" />
 
 			{(date && (
-				<Text fontSize="small" color="text50" flexGrow="1" textAlign="right">
+				<Text
+					fontSize="small"
+					color="text50"
+					flexGrow="1"
+					textAlign="right"
+					fontFamily="body"
+				>
 					{formatDistanceToNow(date)} ago
 				</Text>
 			)) || <Skeleton width="8" height="4" />}

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

@@ -7,6 +7,7 @@ import TimeAgo from '../timeAgo';
 import { transactionStatusModal$ } from '../transactionStatusModal/store';
 import { useTransactionPreviewTitle } from './useTransactionPreviewTitle';
 import type { TokenMetadata } from '@0xsequence/metadata';
+import ChessTileImage from '../../../../images/chess-tile.png';
 
 type TransactionPreviewProps = {
 	price?: Price;
@@ -55,6 +56,7 @@ const TransactionPreview = observer(
 						fontSize="small"
 						fontWeight="medium"
 						marginRight="1"
+						fontFamily="body"
 					>
 						{title}
 					</Text>
@@ -66,7 +68,7 @@ const TransactionPreview = observer(
 
 				<Box display="flex" alignItems="center" marginTop="2">
 					<Image
-						src={collectibleImage}
+						src={collectibleImage || ChessTileImage}
 						alt={collectibleName}
 						width="9"
 						height="9"
@@ -80,11 +82,16 @@ const TransactionPreview = observer(
 						alignItems="flex-start"
 						gap="0.5"
 					>
-						<Text color="text80" fontSize="small" fontWeight="medium">
+						<Text
+							color="text80"
+							fontSize="small"
+							fontWeight="medium"
+							fontFamily="body"
+						>
 							{collectibleName}
 						</Text>
 
-						<Text color="text100" fontSize="small">
+						<Text color="text100" fontSize="small" fontFamily="body">
 							{collectionName}
 						</Text>
 					</Box>
@@ -99,7 +106,12 @@ const TransactionPreview = observer(
 						>
 							<Image src={currencyImageUrl} width="3" height="3" />
 
-							<Text color="text80" fontSize="small" fontWeight="medium">
+							<Text
+								color="text80"
+								fontSize="small"
+								fontWeight="medium"
+								fontFamily="body"
+							>
 								{priceFormatted} {price!.currency.symbol}
 							</Text>
 						</Box>