@0xsequence/marketplace-sdk 0.8.12 → 0.10.0

package/src/react/ui/modals/CreateListingModal/hooks/useTransactionSteps.tsx

@@ -1,19 +1,19 @@
 import type { Observable } from '@legendapp/state';
-import { type Address, type Hex, formatUnits } from 'viem';
+import { type Address, formatUnits, type Hex } from 'viem';
 import { OrderbookKind, type Price } from '../../../../../types';
 import { getSequenceMarketplaceRequestId } from '../../../../../utils/getSequenceMarketRequestId';
 import {
+	balanceQueries,
+	collectableKeys,
 	ExecuteType,
+	getMarketplaceClient,
 	type Step,
 	StepType,
 	type TransactionSteps,
-	balanceQueries,
-	collectableKeys,
-	getMarketplaceClient,
 } from '../../../../_internal';
 import { useAnalytics } from '../../../../_internal/databeat';
-import { TransactionType } from '../../../../_internal/types';
 import type { ListingInput } from '../../../../_internal/types';
+import { TransactionType } from '../../../../_internal/types';
 import type {
 	SignatureStep,
 	TransactionStep as WalletTransactionStep,
@@ -26,6 +26,7 @@ import {
 } from '../../../../hooks';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../../_internal/types';
+
 interface UseTransactionStepsArgs {
 	listingInput: ListingInput;
 	chainId: number;
@@ -110,7 +111,7 @@ export const useTransactionSteps = ({
 			await wallet.handleConfirmTransactionStep(hash, Number(chainId));
 			steps$.approval.isExecuting.set(false);
 			steps$.approval.exist.set(false);
-		} catch (error) {
+		} catch (_error) {
 			steps$.approval.isExecuting.set(false);
 		}
 	};

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

@@ -1,5 +1,5 @@
 import type { ModalCallbacks } from '../_internal/types';
-import { type OpenCreateListingModalArgs, createListingModal$ } from './store';
+import { createListingModal$, type OpenCreateListingModalArgs } from './store';
 
 type ShowCreateListingModalArgs = Exclude<
 	OpenCreateListingModalArgs,

package/src/react/ui/modals/CreateListingModal/store.ts

@@ -1,6 +1,6 @@
 import { observable } from '@legendapp/state';
 import { addDays } from 'date-fns/addDays';
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import { type Currency, OrderbookKind } from '../../../../types';
 import type { CollectionType, TransactionSteps } from '../../../_internal';
 import type { BaseModalState, ModalCallbacks } from '../_internal/types';
@@ -22,7 +22,7 @@ type CreateListingState = BaseModalState & {
 };
 
 export type OpenCreateListingModalArgs = {
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
 	collectibleId: string;
 	orderbookKind?: OrderbookKind;
@@ -58,7 +58,7 @@ const steps = {
 
 const initialState: CreateListingState = {
 	isOpen: false,
-	collectionAddress: '' as Hex,
+	collectionAddress: '' as Address,
 	chainId: 0,
 	collectibleId: '',
 	orderbookKind: OrderbookKind.sequence_marketplace_v2,

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

@@ -1,12 +1,12 @@
 'use client';
 
-import { getNetwork } from '@0xsequence/connect';
 import { NetworkType } from '@0xsequence/network';
-import { Show, observer } from '@legendapp/state/react';
+import { observer, Show, use$ } from '@legendapp/state/react';
 import { useState } from 'react';
 import { parseUnits } from 'viem';
 import type { FeeOption } from '../../../../types/waas-types';
 import { dateToUnixTime } from '../../../../utils/date';
+import { getNetwork } from '../../../../utils/network';
 import { ContractType } from '../../../_internal';
 import { useWallet } from '../../../_internal/wallet/useWallet';
 import {
@@ -15,7 +15,6 @@ import {
 	useLowestListing,
 	useMarketCurrencies,
 } from '../../../hooks';
-import { useBuyModal } from '../BuyModal';
 import { ActionModal } from '../_internal/components/actionModal/ActionModal';
 import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
 import ExpirationDateSelect from '../_internal/components/expirationDateSelect';
@@ -23,9 +22,13 @@ import FloorPriceText from '../_internal/components/floorPriceText';
 import PriceInput from '../_internal/components/priceInput';
 import QuantityInput from '../_internal/components/quantityInput';
 import SelectWaasFeeOptions from '../_internal/components/selectWaasFeeOptions';
-import { selectWaasFeeOptions$ } from '../_internal/components/selectWaasFeeOptions/store';
+import {
+	selectWaasFeeOptionsStore,
+	useSelectWaasFeeOptionsStore,
+} from '../_internal/components/selectWaasFeeOptions/store';
 import TokenPreview from '../_internal/components/tokenPreview';
 import { useSelectWaasFeeOptions } from '../_internal/hooks/useSelectWaasFeeOptions';
+import { useBuyModal } from '../BuyModal';
 import { useMakeOffer } from './hooks/useMakeOffer';
 import { makeOfferModal$ } from './store';
 
@@ -58,6 +61,8 @@ const Modal = observer(() => {
 	});
 	const { wallet } = useWallet();
 	const isProcessing = makeOfferModal$.offerIsBeingProcessed.get();
+	const { isVisible: feeOptionsVisible, selectedFeeOption } =
+		useSelectWaasFeeOptionsStore();
 
 	const {
 		shouldHideActionButton: shouldHideOfferButton,
@@ -65,9 +70,8 @@ const Modal = observer(() => {
 		getActionLabel,
 	} = useSelectWaasFeeOptions({
 		isProcessing,
-		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
-		selectedFeeOption:
-			selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+		feeOptionsVisible,
+		selectedFeeOption: selectedFeeOption as FeeOption,
 	});
 
 	const {
@@ -150,7 +154,7 @@ const Modal = observer(() => {
 
 		try {
 			if (wallet?.isWaaS) {
-				selectWaasFeeOptions$.isVisible.set(true);
+				selectWaasFeeOptionsStore.send({ type: 'show' });
 			}
 
 			await makeOffer({
@@ -205,7 +209,7 @@ const Modal = observer(() => {
 				chainId={Number(chainId)}
 				onClose={() => {
 					makeOfferModal$.close();
-					selectWaasFeeOptions$.hide();
+					selectWaasFeeOptionsStore.send({ type: 'hide' });
 					steps$.transaction.isExecuting.set(false);
 				}}
 				title="Make an offer"
@@ -224,8 +228,14 @@ const Modal = observer(() => {
 				<PriceInput
 					chainId={chainId}
 					collectionAddress={collectionAddress}
-					$price={makeOfferModal$.offerPrice}
-					onPriceChange={() => makeOfferModal$.offerPriceChanged.set(true)}
+					price={offerPrice}
+					onPriceChange={(newPrice) => {
+						makeOfferModal$.offerPrice.set(newPrice);
+						makeOfferModal$.offerPriceChanged.set(true);
+					}}
+					onCurrencyChange={(newCurrency) => {
+						makeOfferModal$.offerPrice.currency.set(newCurrency);
+					}}
 					includeNativeCurrency={false}
 					checkBalance={{
 						enabled: true,
@@ -236,8 +246,14 @@ const Modal = observer(() => {
 
 				{collection?.type === ContractType.ERC1155 && (
 					<QuantityInput
-						$quantity={makeOfferModal$.quantity}
-						$invalidQuantity={makeOfferModal$.invalidQuantity}
+						quantity={use$(makeOfferModal$.quantity)}
+						invalidQuantity={use$(makeOfferModal$.invalidQuantity)}
+						onQuantityChange={(quantity) =>
+							makeOfferModal$.quantity.set(quantity)
+						}
+						onInvalidQuantityChange={(invalid) =>
+							makeOfferModal$.invalidQuantity.set(invalid)
+						}
 						decimals={collectible?.decimals || 0}
 						maxQuantity={String(Number.MAX_SAFE_INTEGER)}
 						disabled={shouldHideOfferButton}
@@ -268,7 +284,8 @@ const Modal = observer(() => {
 						/>
 					)}
 				<ExpirationDateSelect
-					$date={makeOfferModal$.expiry}
+					date={makeOfferModal$.expiry.get()}
+					onDateChange={(date) => makeOfferModal$.expiry.set(date)}
 					disabled={shouldHideOfferButton}
 				/>
 

package/src/react/ui/modals/MakeOfferModal/__tests__/Modal.test.tsx

@@ -2,9 +2,9 @@ import { cleanup, render, renderHook, waitFor } from '@test';
 import { TEST_COLLECTIBLE } from '@test/const';
 import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { useMakeOfferModal } from '..';
 import { CurrencyStatus, WalletKind } from '../../../../_internal';
 import * as walletModule from '../../../../_internal/wallet/useWallet';
+import { useMakeOfferModal } from '..';
 import { MakeOfferModal } from '../Modal';
 import { makeOfferModal$ } from '../store';
 

package/src/react/ui/modals/MakeOfferModal/hooks/useGetTokenApproval.tsx

@@ -4,10 +4,10 @@ import {
 	type ContractType,
 	type CreateReq,
 	type GenerateOfferTransactionArgs,
+	getMarketplaceClient,
 	type OrderbookKind,
 	type QueryArg,
 	StepType,
-	getMarketplaceClient,
 } from '../../../../_internal';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 import { useConfig } from '../../../../hooks/useConfig';

package/src/react/ui/modals/MakeOfferModal/hooks/useMakeOffer.tsx

@@ -55,7 +55,6 @@ export const useMakeOffer = ({
 			},
 		});
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (tokenApproval?.step && !tokenApprovalIsLoading) {
 			steps$.approval.exist.set(true);

package/src/react/ui/modals/MakeOfferModal/hooks/useTransactionSteps.tsx

@@ -1,19 +1,19 @@
 import type { Observable } from '@legendapp/state';
-import { type Address, type Hex, formatUnits } from 'viem';
+import { type Address, formatUnits, type Hex } from 'viem';
 import { OrderbookKind, type Price } from '../../../../../types';
 import { getSequenceMarketplaceRequestId } from '../../../../../utils/getSequenceMarketRequestId';
 import {
+	balanceQueries,
+	collectableKeys,
 	ExecuteType,
+	getMarketplaceClient,
 	type Step,
 	StepType,
 	type TransactionSteps,
-	balanceQueries,
-	collectableKeys,
-	getMarketplaceClient,
 } from '../../../../_internal';
 import { useAnalytics } from '../../../../_internal/databeat';
-import { TransactionType } from '../../../../_internal/types';
 import type { OfferInput } from '../../../../_internal/types';
+import { TransactionType } from '../../../../_internal/types';
 import type {
 	SignatureStep,
 	TransactionStep,
@@ -58,7 +58,7 @@ export const useTransactionSteps = ({
 		});
 	const { data: currency } = useCurrency({
 		chainId,
-		currencyAddress: offerInput.offer.currencyAddress,
+		currencyAddress: offerInput.offer.currencyAddress as Address,
 	});
 
 	const getOfferSteps = async () => {
@@ -106,7 +106,7 @@ export const useTransactionSteps = ({
 			await wallet.handleConfirmTransactionStep(hash, Number(chainId));
 			steps$.approval.isExecuting.set(false);
 			steps$.approval.exist.set(false);
-		} catch (error) {
+		} catch (_error) {
 			steps$.approval.isExecuting.set(false);
 		}
 	};

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

@@ -1,5 +1,5 @@
 import type { ModalCallbacks } from '../_internal/types';
-import { type OpenMakeOfferModalArgs, makeOfferModal$ } from './store';
+import { makeOfferModal$, type OpenMakeOfferModalArgs } from './store';
 
 export type ShowMakeOfferModalArgs = Exclude<
 	OpenMakeOfferModalArgs,

package/src/react/ui/modals/MakeOfferModal/store.ts

@@ -1,6 +1,6 @@
 import { observable } from '@legendapp/state';
 import { addDays } from 'date-fns/addDays';
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import type { Currency, OrderbookKind, Price } from '../../../../types';
 import type { CollectionType, TransactionSteps } from '../../../_internal';
 import type { BaseModalState, ModalCallbacks } from '../_internal/types';
@@ -19,7 +19,7 @@ type MakeOfferState = BaseModalState & {
 };
 
 export type OpenMakeOfferModalArgs = {
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
 	collectibleId: string;
 	orderbookKind?: OrderbookKind;
@@ -55,7 +55,7 @@ const steps = {
 
 const initialState: MakeOfferState = {
 	isOpen: false,
-	collectionAddress: '' as Hex,
+	collectionAddress: '' as Address,
 	chainId: 0,
 	collectibleId: '',
 	orderbookKind: undefined,

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

@@ -1,11 +1,11 @@
 'use client';
 
-import { getNetwork } from '@0xsequence/connect';
 import { NetworkType } from '@0xsequence/network';
-import { Show, observer } from '@legendapp/state/react';
-import { parseUnits } from 'viem';
+import { observer, Show } from '@legendapp/state/react';
+import { type Address, parseUnits } from 'viem';
 import type { Price } from '../../../../types';
 import type { FeeOption } from '../../../../types/waas-types';
+import { getNetwork } from '../../../../utils/network';
 import type { MarketplaceKind } from '../../../_internal/api/marketplace.gen';
 import { useWallet } from '../../../_internal/wallet/useWallet';
 import { useCollection, useCurrency } from '../../../hooks';
@@ -15,7 +15,10 @@ import {
 } from '../_internal/components/actionModal/ActionModal';
 import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
 import SelectWaasFeeOptions from '../_internal/components/selectWaasFeeOptions';
-import { selectWaasFeeOptions$ } from '../_internal/components/selectWaasFeeOptions/store';
+import {
+	selectWaasFeeOptionsStore,
+	useSelectWaasFeeOptionsStore,
+} from '../_internal/components/selectWaasFeeOptions/store';
 import TokenPreview from '../_internal/components/tokenPreview';
 import TransactionDetails from '../_internal/components/transactionDetails';
 import TransactionHeader from '../_internal/components/transactionHeader';
@@ -50,10 +53,11 @@ const Modal = observer(() => {
 		isError: currencyError,
 	} = useCurrency({
 		chainId,
-		currencyAddress: order?.priceCurrencyAddress ?? '',
+		currencyAddress: order?.priceCurrencyAddress as Address | undefined,
 	});
 	const { wallet } = useWallet();
-	const feeOptionsVisible = selectWaasFeeOptions$.isVisible.get();
+	const { isVisible: feeOptionsVisible, selectedFeeOption } =
+		useSelectWaasFeeOptionsStore();
 	const network = getNetwork(Number(chainId));
 	const isTestnet = network.type === NetworkType.TESTNET;
 	const isProcessing = sellModal$.sellIsBeingProcessed.get();
@@ -61,9 +65,8 @@ const Modal = observer(() => {
 	const { shouldHideActionButton: shouldHideSellButton } =
 		useSelectWaasFeeOptions({
 			isProcessing,
-			feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
-			selectedFeeOption:
-				selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+			feeOptionsVisible,
+			selectedFeeOption: selectedFeeOption as FeeOption,
 		});
 
 	const { isLoading, executeApproval, sell } = useSell({
@@ -109,7 +112,7 @@ const Modal = observer(() => {
 
 		try {
 			if (wallet?.isWaaS) {
-				selectWaasFeeOptions$.isVisible.set(true);
+				selectWaasFeeOptionsStore.send({ type: 'show' });
 			}
 
 			await sell({
@@ -164,7 +167,7 @@ const Modal = observer(() => {
 			chainId={Number(chainId)}
 			onClose={() => {
 				sellModal$.close();
-				selectWaasFeeOptions$.hide();
+				selectWaasFeeOptionsStore.send({ type: 'hide' });
 				steps$.transaction.isExecuting.set(false);
 			}}
 			title="You have an offer"

package/src/react/ui/modals/SellModal/__tests__/Modal.test.tsx

@@ -2,13 +2,15 @@ import { cleanup, render, renderHook, screen, waitFor } from '@test';
 import { TEST_COLLECTIBLE } from '@test/const';
 import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { useSellModal } from '..';
 import { StepType, WalletKind } from '../../../../_internal';
-import { createMockStep } from '../../../../_internal/api/__mocks__/marketplace.msw';
-import { mockOrder } from '../../../../_internal/api/__mocks__/marketplace.msw';
+import {
+	createMockStep,
+	mockOrder,
+} from '../../../../_internal/api/__mocks__/marketplace.msw';
 import * as walletModule from '../../../../_internal/wallet/useWallet';
-import { SellModal } from '../Modal';
+import { useSellModal } from '..';
 import * as useGetTokenApprovalDataModule from '../hooks/useGetTokenApproval';
+import { SellModal } from '../Modal';
 
 const defaultArgs = {
 	collectionAddress: TEST_COLLECTIBLE.collectionAddress,

package/src/react/ui/modals/SellModal/hooks/useGetTokenApproval.tsx

@@ -1,10 +1,10 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
 import {
 	type GenerateSellTransactionArgs,
+	getMarketplaceClient,
 	type MarketplaceKind,
 	type OrderData,
 	StepType,
-	getMarketplaceClient,
 } from '../../../../_internal';
 import { useWallet } from '../../../../_internal/wallet/useWallet';
 import { useConfig } from '../../../../hooks/useConfig';

package/src/react/ui/modals/SellModal/hooks/useSell.tsx

@@ -43,7 +43,6 @@ export const useSell = ({
 			marketplace,
 		});
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (tokenApproval?.step && !tokenApprovalIsLoading) {
 			steps$.approval.exist.set(true);

package/src/react/ui/modals/SellModal/hooks/useTransactionSteps.tsx

@@ -1,15 +1,15 @@
 import type { Observable } from '@legendapp/state';
-import { formatUnits } from 'viem';
 import type { Address, Hex } from 'viem';
+import { formatUnits } from 'viem';
 import {
+	balanceQueries,
+	collectableKeys,
 	ExecuteType,
+	getMarketplaceClient,
 	type MarketplaceKind,
 	type Step,
 	StepType,
 	type TransactionSteps,
-	balanceQueries,
-	collectableKeys,
-	getMarketplaceClient,
 } from '../../../../_internal';
 import { useAnalytics } from '../../../../_internal/databeat';
 import { TransactionType } from '../../../../_internal/types';
@@ -23,9 +23,9 @@ import {
 	useGenerateSellTransaction,
 	useMarketCurrencies,
 } from '../../../../hooks';
-import { useMarketPlatformFee } from '../../BuyModal/hooks/useMarketPlatformFee';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../../_internal/types';
+import { useMarketPlatformFee } from '../../BuyModal/hooks/useMarketPlatformFee';
 import type { SellOrder } from './useSell';
 export type ExecutionState = 'approval' | 'sell' | null;
 
@@ -119,7 +119,7 @@ export const useTransactionSteps = ({
 			await wallet.handleConfirmTransactionStep(hash, Number(chainId));
 			steps$.approval.isExecuting.set(false);
 			steps$.approval.exist.set(false);
-		} catch (error) {
+		} catch (_error) {
 			steps$.approval.isExecuting.set(false);
 		}
 	};

package/src/react/ui/modals/SellModal/store.ts

@@ -1,10 +1,10 @@
 import { observable } from '@legendapp/state';
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import type { Order, TransactionSteps } from '../../../_internal';
 import type { BaseModalState, ModalCallbacks } from '../_internal/types';
 
 export type OpenSellModalArgs = {
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
 	tokenId: string;
 	order: Order;
@@ -25,7 +25,7 @@ type Actions = {
 
 const initialState: SellModalState & Actions = {
 	isOpen: false,
-	collectionAddress: '' as Hex,
+	collectionAddress: '' as Address,
 	chainId: 0,
 	tokenId: '',
 	order: undefined,

package/src/react/ui/modals/SuccessfulPurchaseModal/__tests__/Modal.test.tsx

@@ -1,7 +1,7 @@
 import { cleanup, render, screen } from '@test';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import SuccessfulPurchaseModal, { useSuccessfulPurchaseModal } from '..';
 import type { ModalCallbacks } from '../../_internal/types';
+import SuccessfulPurchaseModal, { useSuccessfulPurchaseModal } from '..';
 import { successfulPurchaseModalStore } from '../store';
 
 describe('SuccessfulPurchaseModal', () => {

package/src/react/ui/modals/TransferModal/__tests__/__snapshots__/store.test.ts.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TransferModal Store > Initial State > should have correct initial state > initial-store-state 1`] = `
+{
+  "chainId": 0,
+  "collectibleId": "",
+  "collectionAddress": "0x",
+  "hash": undefined,
+  "isOpen": false,
+  "onError": undefined,
+  "onSuccess": undefined,
+  "quantity": "1",
+  "receiverAddress": "",
+  "transferIsProcessing": false,
+  "view": "enterReceiverAddress",
+}
+`;