@0xsequence/marketplace-sdk 0.7.0 → 0.8.0

package/src/react/ui/modals/_internal/components/actionModal/ActionModal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type React from 'react';
-import { type ComponentProps, useState } from 'react';
+import type { ComponentProps } from 'react';
 
 import { Button, Modal, Spinner, Text } from '@0xsequence/design-system';
 import { observer } from '@legendapp/state/react';
@@ -9,7 +9,6 @@ import { useWallet } from '../../../../../_internal/wallet/useWallet';
 import { MODAL_OVERLAY_PROPS } from '../consts';
 import { MODAL_CONTENT_PROPS } from '../consts';
 import { useSwitchChainModal } from '../switchChainModal';
-import WaasFeeOptionsBox from '../waasFeeOptionsBox';
 
 export interface ActionModalProps {
 	isOpen: boolean;
@@ -17,7 +16,7 @@ export interface ActionModalProps {
 	title: string;
 	children: React.ReactNode;
 	ctas: {
-		label: string;
+		label: React.ReactNode;
 		onClick: (() => Promise<void>) | (() => void);
 		pending?: boolean;
 		disabled?: boolean;
@@ -29,6 +28,7 @@ export interface ActionModalProps {
 	modalLoading?: boolean;
 	spinnerContainerClassname?: string;
 	disableAnimation?: boolean;
+	hideCtas?: boolean;
 }
 
 export const ActionModal = observer(
@@ -42,10 +42,10 @@ export const ActionModal = observer(
 		disableAnimation,
 		modalLoading,
 		spinnerContainerClassname,
+		hideCtas,
 	}: ActionModalProps) => {
-		const [isSelectingFees, setIsSelectingFees] = useState(false);
 		const { show: showSwitchChainModal } = useSwitchChainModal();
-		const { wallet } = useWallet();
+		const { wallet, isLoading, isError } = useWallet();
 
 		const checkChain = async ({ onSuccess }: { onSuccess: () => void }) => {
 			const walletChainId = await wallet?.getChainId();
@@ -85,53 +85,54 @@ export const ActionModal = observer(
 						{title}
 					</Text>
 
-					{modalLoading ? (
+					{modalLoading || isLoading || isError ? (
 						<div
 							className={`flex ${spinnerContainerClassname} w-full items-center justify-center`}
 						>
-							<Spinner size="lg" />
+							{isError && (
+								<Text className="text-center font-body text-error100 text-small">
+									Error loading modal
+								</Text>
+							)}
+							{isLoading && <Spinner size="lg" />}
 						</div>
 					) : (
 						children
 					)}
 
-					<div className="flex w-full flex-col gap-2">
-						{ctas.map(
-							(cta) =>
-								!cta.hidden && (
-									<Button
-										className="w-full rounded-[12px] [&>div]:justify-center"
-										key={cta.label}
-										onClick={async () => {
-											await checkChain({
-												onSuccess: () => {
-													cta.onClick();
-												},
-											});
-										}}
-										variant={cta.variant || 'primary'}
-										pending={cta.pending}
-										disabled={cta.disabled || isSelectingFees}
-										size="lg"
-										data-testid={cta.testid}
-										label={
-											<div className="flex items-center justify-center gap-2">
-												{cta.pending && <Spinner size="sm" />}
+					{!hideCtas && !isLoading && !isError && (
+						<div className="flex w-full flex-col gap-2">
+							{ctas.map(
+								(cta) =>
+									!cta.hidden && (
+										<Button
+											className="w-full rounded-[12px] [&>div]:justify-center"
+											key={cta.onClick.toString()}
+											onClick={async () => {
+												await checkChain({
+													onSuccess: () => {
+														cta.onClick();
+													},
+												});
+											}}
+											variant={cta.variant || 'primary'}
+											pending={cta.pending}
+											disabled={cta.disabled}
+											size="lg"
+											data-testid={cta.testid}
+											label={
+												<div className="flex items-center justify-center gap-2">
+													{cta.pending && <Spinner size="sm" />}
 
-												{cta.label}
-											</div>
-										}
-									/>
-								),
-						)}
-					</div>
+													{cta.label}
+												</div>
+											}
+										/>
+									),
+							)}
+						</div>
+					)}
 				</div>
-
-				<WaasFeeOptionsBox
-					chainId={chainId}
-					onFeeOptionsLoaded={() => setIsSelectingFees(true)}
-					onFeeOptionConfirmed={() => setIsSelectingFees(false)}
-				/>
 			</Modal>
 		);
 	},

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

@@ -1,10 +1,9 @@
 import { type Observable, observable } from '@legendapp/state';
 import type { Address } from 'viem';
-import type { ChainId } from '../../../../../_internal';
 
 export interface ActionModalState {
 	isOpen: boolean;
-	chainId: ChainId | null;
+	chainId: number | null;
 	collectionAddress: Address | null;
 }
 

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

@@ -5,7 +5,7 @@ import type { Observable } from '@legendapp/state';
 import { observer } from '@legendapp/state/react';
 import { useEffect } from 'react';
 import type { Hex } from 'viem';
-import type { ChainId, Currency } from '../../../../../_internal';
+import type { Currency } from '../../../../../_internal';
 import { useCurrencies } from '../../../../../hooks';
 import {
 	CustomSelect,
@@ -14,7 +14,7 @@ import {
 
 type CurrencyOptionsSelectProps = {
 	collectionAddress: Hex;
-	chainId: ChainId;
+	chainId: number;
 	selectedCurrency$: Observable<Currency | null | undefined>;
 	secondCurrencyAsDefault?: boolean;
 	includeNativeCurrency?: boolean;

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

@@ -5,6 +5,7 @@ import type { Observable } from '@legendapp/state';
 import { observer } from '@legendapp/state/react';
 import { addDays } from 'date-fns';
 import { useState } from 'react';
+import { cn } from '../../../../../../utils';
 import CalendarDropdown from '../calendarDropdown';
 
 const setToEndOfDay = (date: Date): Date => {
@@ -47,11 +48,13 @@ export type RangeType =
 type ExpirationDateSelectProps = {
 	className?: string;
 	$date: Observable<Date>;
+	disabled?: boolean;
 };
 
 const ExpirationDateSelect = observer(function ExpirationDateSelect({
 	className,
 	$date,
+	disabled,
 }: ExpirationDateSelectProps) {
 	const [calendarDropdownOpen, setCalendarDropdownOpen] = useState(false);
 
@@ -82,7 +85,12 @@ const ExpirationDateSelect = observer(function ExpirationDateSelect({
 	}
 
 	return (
-		<div className="relative w-full">
+		<div
+			className={cn(
+				'relative w-full',
+				disabled && 'pointer-events-none opacity-50',
+			)}
+		>
 			<Text
 				className="w-full text-left font-body font-medium text-xs"
 				fontWeight={'medium'}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { Text } from '@0xsequence/design-system';
+import { Button, Text } from '@0xsequence/design-system';
 import type { Hex } from 'viem';
 import type { Price } from '../../../../../../types';
 import { useComparePrices, useLowestListing } from '../../../../../hooks';
@@ -10,11 +10,13 @@ export default function FloorPriceText({
 	collectionAddress,
 	tokenId,
 	price,
+	onBuyNow,
 }: {
-	chainId: string;
+	chainId: number;
 	collectionAddress: Hex;
 	tokenId: string;
 	price: Price;
+	onBuyNow?: () => void;
 }) {
 	const { data: listing, isLoading: listingLoading } = useLowestListing({
 		tokenId: tokenId,
@@ -26,6 +28,7 @@ export default function FloorPriceText({
 	});
 
 	const floorPriceRaw = listing?.order?.priceAmount;
+	const floorPriceFormatted = listing?.order?.priceAmountFormatted;
 
 	const { data: priceComparison, isLoading: comparisonLoading } =
 		useComparePrices({
@@ -50,24 +53,36 @@ export default function FloorPriceText({
 	}
 
 	let floorPriceDifferenceText = 'Same as floor price';
+	let showBuyNowButton = false;
 
 	if (priceComparison) {
 		if (priceComparison.status === 'same') {
 			floorPriceDifferenceText = 'Same as floor price';
+			showBuyNowButton = true;
+		} else if (priceComparison.status === 'below') {
+			floorPriceDifferenceText = `${priceComparison.percentageDifferenceFormatted}% below floor price`;
 		} else {
-			floorPriceDifferenceText = `${priceComparison.percentageDifferenceFormatted}% ${
-				priceComparison.status === 'below' ? 'below' : 'above'
-			} floor price`;
+			floorPriceDifferenceText = `${priceComparison.percentageDifferenceFormatted}% above floor price`;
+			showBuyNowButton = true;
 		}
 	}
 
 	return (
-		<Text
-			className="w-full text-left font-body text-sm"
-			fontWeight={'medium'}
-			color={'text50'}
-		>
-			{floorPriceDifferenceText}
-		</Text>
+		<div className="flex w-full items-center justify-between gap-2">
+			<Text className="text-left font-body font-medium text-muted text-xs">
+				{floorPriceDifferenceText}
+			</Text>
+
+			{showBuyNowButton && onBuyNow && (
+				<Button
+					size="xs"
+					variant="text"
+					className="text-indigo-400 text-xs"
+					onClick={onBuyNow}
+				>
+					Buy for {floorPriceFormatted} {price.currency.symbol}
+				</Button>
+			)}
+		</div>
 	);
 }

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

@@ -64,7 +64,7 @@ const createMockPrice = (amount = '0'): Price => ({
 describe('PriceInput', () => {
 	const defaultProps = {
 		collectionAddress: '0xCollection' as `0x${string}`,
-		chainId: '1',
+		chainId: 1,
 		$price: observable<Price | undefined>(createMockPrice()),
 		includeNativeCurrency: false,
 		secondCurrencyAsDefault: false,

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

@@ -7,13 +7,14 @@ import { useEffect, useRef, useState } from 'react';
 import { type Hex, parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
 import type { Price } from '../../../../../../types';
+import { cn } from '../../../../../../utils';
 import { useCurrencyBalance } from '../../../../../hooks/useCurrencyBalance';
 import CurrencyImage from '../currencyImage';
 import CurrencyOptionsSelect from '../currencyOptionsSelect';
 
 type PriceInputProps = {
 	collectionAddress: Hex;
-	chainId: string;
+	chainId: number;
 	secondCurrencyAsDefault?: boolean;
 	$price: Observable<Price | undefined>;
 	includeNativeCurrency?: boolean;
@@ -22,6 +23,7 @@ type PriceInputProps = {
 		enabled: boolean;
 		callback: (state: boolean) => void;
 	};
+	disabled?: boolean;
 };
 
 export default function PriceInput({
@@ -32,15 +34,23 @@ export default function PriceInput({
 	checkBalance,
 	secondCurrencyAsDefault,
 	includeNativeCurrency,
+	disabled,
 }: PriceInputProps) {
 	const { address: accountAddress } = useAccount();
+	const inputRef = useRef<HTMLInputElement>(null);
 	const currencyDecimals = use$($price.currency.decimals);
 	const currencyAddress = use$($price.currency.contractAddress);
 	const priceAmountRaw = use$($price.amountRaw);
 
+	useEffect(() => {
+		if (inputRef.current) {
+			inputRef.current.focus();
+		}
+	}, []);
+
 	const { data: balance, isSuccess: isBalanceSuccess } = useCurrencyBalance({
 		currencyAddress: currencyAddress as undefined | Hex,
-		chainId: Number(chainId),
+		chainId,
 		userAddress: accountAddress,
 	});
 
@@ -93,13 +103,19 @@ export default function PriceInput({
 	};
 
 	return (
-		<div className="relative flex w-full flex-col">
+		<div
+			className={cn(
+				'relative flex w-full flex-col',
+				disabled && 'pointer-events-none opacity-50',
+			)}
+		>
 			<div className="absolute top-8 left-2 flex items-center">
 				<CurrencyImage price$={$price} />
 			</div>
 
 			<div className="[&>label>div>.rounded-xl]:h-9 [&>label>div>.rounded-xl]:rounded-sm [&>label>div>.rounded-xl]:px-2 [&>label]:gap-1">
 				<NumericInput
+					ref={inputRef}
 					className="ml-5 w-full text-xs"
 					name="price-input"
 					decimals={currencyDecimals}

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

@@ -18,6 +18,7 @@ type QuantityInputProps = {
 	decimals: number;
 	maxQuantity: string;
 	className?: string;
+	disabled?: boolean;
 };
 
 export default observer(function QuantityInput({
@@ -26,6 +27,7 @@ export default observer(function QuantityInput({
 	decimals,
 	maxQuantity,
 	className,
+	disabled,
 }: QuantityInputProps) {
 	const dnMaxQuantity = dn.from(maxQuantity, decimals);
 	const dnOne = dn.from('1', decimals);
@@ -124,6 +126,7 @@ export default observer(function QuantityInput({
 			className={cn(
 				'flex w-full flex-col [&>label>div>div:has(:disabled):hover]:opacity-100 [&>label>div>div:has(:disabled)]:opacity-100 [&>label>div>div>input]:text-xs [&>label>div>div]:h-9 [&>label>div>div]:rounded [&>label>div>div]:pr-0 [&>label>div>div]:pl-3 [&>label>div>div]:text-xs [&>label]:gap-[2px]',
 				className,
+				disabled && 'pointer-events-none opacity-50',
 			)}
 		>
 			<NumericInput

package/src/react/ui/modals/_internal/components/selectWaasFeeOptions/_components/ActionButtons.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { Button, Skeleton, Spinner } from '@0xsequence/design-system';
+
+const ActionButtons = ({
+	onCancel,
+	onConfirm,
+	disabled,
+	loading,
+	confirmed,
+	tokenSymbol,
+}: {
+	onCancel: () => void;
+	onConfirm: () => void;
+	disabled: boolean;
+	loading: boolean;
+	confirmed: boolean;
+	tokenSymbol?: string;
+}) => (
+	<div className="mt-4 flex w-full items-center justify-end gap-2">
+		<Button
+			pending={loading}
+			onClick={onCancel}
+			label={<div className="flex items-center gap-2">Cancel</div>}
+			variant={'ghost'}
+			shape="square"
+			size="md"
+		/>
+
+		<Button
+			disabled={disabled}
+			pending={loading || confirmed}
+			onClick={onConfirm}
+			label={
+				<div className="flex items-center gap-2">
+					{!confirmed ? (
+						tokenSymbol ? (
+							`Continue with ${tokenSymbol}`
+						) : (
+							<div className="flex items-center gap-2">
+								Continue with
+								<Skeleton className="h-[20px] w-6 animate-shimmer" />
+							</div>
+						)
+					) : (
+						<div className="flex items-center gap-2">
+							<Spinner size="sm" />
+							Confirming
+						</div>
+					)}
+				</div>
+			}
+			variant={'primary'}
+			shape="square"
+			size="md"
+		/>
+	</div>
+);
+
+export default ActionButtons;

package/src/react/ui/modals/_internal/components/selectWaasFeeOptions/_components/BalanceIndicator.tsx

@@ -0,0 +1,30 @@
+import { Text, WarningIcon } from '@0xsequence/design-system';
+import { CheckmarkIcon } from '@0xsequence/design-system';
+
+const BalanceIndicator = ({
+	insufficientBalance,
+	currencyBalance,
+	selectedFeeOption,
+}: {
+	insufficientBalance: boolean;
+	currencyBalance?: { formatted: string };
+	selectedFeeOption?: { token: { symbol: string } };
+}) => (
+	<div className="flex items-center gap-2">
+		{insufficientBalance ? (
+			<WarningIcon className="text-negative" size="xs" />
+		) : (
+			<CheckmarkIcon className="text-positive" size="xs" />
+		)}
+
+		<Text
+			className="font-body font-medium text-xs"
+			color={insufficientBalance ? 'negative' : 'text100'}
+		>
+			You have {currencyBalance?.formatted || '0'}{' '}
+			{selectedFeeOption?.token.symbol}
+		</Text>
+	</div>
+);
+
+export default BalanceIndicator;

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

@@ -0,0 +1,126 @@
+'use client';
+
+import { getNetwork } from '@0xsequence/connect';
+import { Divider, Skeleton, Text } from '@0xsequence/design-system';
+import { NetworkType } from '@0xsequence/network';
+import { observer } from '@legendapp/state/react';
+import type { FeeOption } from '../../../../../../types/waas-types';
+import { cn } from '../../../../../../utils';
+import WaasFeeOptionsSelect from '../waasFeeOptionsSelect/WaasFeeOptionsSelect';
+import ActionButtons from './_components/ActionButtons';
+import BalanceIndicator from './_components/BalanceIndicator';
+import { selectWaasFeeOptions$ } from './store';
+import useWaasFeeOptionManager from './useWaasFeeOptionManager';
+
+type SelectWaasFeeOptionsProps = {
+	onCancel?: () => void;
+	chainId: number;
+	titleOnConfirm?: string;
+	className?: string;
+};
+
+const SelectWaasFeeOptions = observer(
+	({
+		chainId,
+		onCancel,
+		titleOnConfirm,
+		className,
+	}: SelectWaasFeeOptionsProps) => {
+		const network = getNetwork(chainId);
+		const isTestnet = network.type === NetworkType.TESTNET;
+		const {
+			selectedFeeOption$,
+			selectedFeeOption,
+			pendingFeeOptionConfirmation,
+			currencyBalance,
+			currencyBalanceLoading,
+			insufficientBalance,
+			feeOptionsConfirmed,
+			handleConfirmFeeOption,
+		} = useWaasFeeOptionManager(chainId);
+
+		console.log('pendingFeeOptionConfirmation', pendingFeeOptionConfirmation);
+
+		const handleCancelFeeOption = () => {
+			selectWaasFeeOptions$.hide();
+
+			onCancel?.();
+		};
+
+		if (
+			!selectWaasFeeOptions$.isVisible.get() ||
+			isTestnet ||
+			!selectedFeeOption
+		) {
+			return null;
+		}
+
+		return (
+			<div
+				className={cn(
+					'flex w-full flex-col gap-2 rounded-2xl bg-button-emphasis p-0 backdrop-blur-md',
+					className,
+				)}
+			>
+				<Divider className="mt-0 mb-4" />
+
+				<Text className="mb-2 font-body text-large" fontWeight="bold">
+					{feeOptionsConfirmed ? titleOnConfirm : 'Select a fee option'}
+				</Text>
+
+				{!feeOptionsConfirmed && !pendingFeeOptionConfirmation && (
+					<Skeleton className="h-[52px] w-full animate-shimmer rounded-xl" />
+				)}
+
+				{(feeOptionsConfirmed || pendingFeeOptionConfirmation) && (
+					<div
+						className={cn(
+							'[&>label>button>span]:overflow-hidden [&>label>button]:w-full [&>label>button]:text-xs [&>label]:flex [&>label]:w-full',
+							feeOptionsConfirmed && 'pointer-events-none opacity-70',
+						)}
+					>
+						<WaasFeeOptionsSelect
+							options={
+								(pendingFeeOptionConfirmation?.options as FeeOption[]) || [
+									selectedFeeOption,
+								]
+							}
+							selectedFeeOption$={selectedFeeOption$}
+						/>
+					</div>
+				)}
+
+				<div className="flex w-full items-start justify-between">
+					{!feeOptionsConfirmed &&
+						(!pendingFeeOptionConfirmation || currencyBalanceLoading) && (
+							<Skeleton className="h-[20px] w-2/3 animate-shimmer rounded-xl" />
+						)}
+
+					{(feeOptionsConfirmed ||
+						(pendingFeeOptionConfirmation && !currencyBalanceLoading)) && (
+						<BalanceIndicator
+							insufficientBalance={insufficientBalance}
+							currencyBalance={currencyBalance}
+							selectedFeeOption={selectedFeeOption}
+						/>
+					)}
+				</div>
+
+				<ActionButtons
+					onCancel={handleCancelFeeOption}
+					onConfirm={handleConfirmFeeOption}
+					disabled={
+						!selectedFeeOption?.token ||
+						insufficientBalance ||
+						currencyBalanceLoading
+					}
+					loading={currencyBalanceLoading}
+					confirmed={feeOptionsConfirmed}
+					tokenSymbol={selectedFeeOption?.token.symbol}
+				/>
+			</div>
+		);
+	},
+);
+
+export default SelectWaasFeeOptions;

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

@@ -0,0 +1,25 @@
+import { observable } from '@legendapp/state';
+import type {
+	FeeOption,
+	WaasFeeOptionConfirmation,
+} from '../../../../../../types/waas-types';
+
+type SelectWaasFeeOptionsState = {
+	selectedFeeOption: FeeOption | undefined;
+	pendingFeeOptionConfirmation: WaasFeeOptionConfirmation | undefined;
+	isVisible: boolean;
+	hide: () => void;
+};
+
+const initialState = {
+	selectedFeeOption: undefined,
+	pendingFeeOptionConfirmation: undefined,
+	isVisible: false,
+	hide: () => {
+		selectWaasFeeOptions$.isVisible.set(false);
+		selectWaasFeeOptions$.selectedFeeOption.set(undefined);
+		selectWaasFeeOptions$.pendingFeeOptionConfirmation.set(undefined);
+	},
+} as SelectWaasFeeOptionsState;
+
+export const selectWaasFeeOptions$ = observable(initialState);