@0xsequence/marketplace-sdk 0.0.1

package/src/react/hooks/useRoyaltyPercentage.tsx

@@ -0,0 +1,45 @@
+import { type ChainId, type QueryArg, collectableKeys } from '@internal';
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { Hex } from 'viem';
+import { getContract } from 'viem';
+import { EIP2981_ABI } from '../../utils/abi/abi/standard/EIP2981';
+import { getPublicRpcClient } from '../../utils/get-public-rpc-client';
+
+type UseRoyaletyPercentageArgs = {
+	chainId: ChainId;
+	collectionAddress: string;
+	collectibleId: string;
+} & QueryArg;
+
+const fetchRoyaletyPercentage = async (args: UseRoyaletyPercentageArgs) => {
+	const publicClient = getPublicRpcClient(args.chainId);
+
+	const contract = getContract({
+		address: args.collectionAddress as Hex,
+		abi: EIP2981_ABI,
+		client: publicClient,
+	});
+
+	try {
+		const [_, royaltyPercentage] = await contract.read.royaltyInfo([
+			BigInt(args.collectibleId),
+			100n,
+		]);
+
+		return royaltyPercentage;
+	} catch {
+		//TODO: dont swallow errors
+		return 0n;
+	}
+};
+
+export const royaletyPercentageOptions = (args: UseRoyaletyPercentageArgs) =>
+	queryOptions({
+		...args.query,
+		queryKey: [...collectableKeys.royaltyPercentage, args],
+		queryFn: () => fetchRoyaletyPercentage(args),
+	});
+
+export const useRoyaltyPercentage = (args: UseRoyaletyPercentageArgs) => {
+	return useQuery(royaletyPercentageOptions(args));
+};

package/src/react/hooks/useTransferTokens.tsx

@@ -0,0 +1,81 @@
+import type { ContractType, ChainId } from '@internal';
+import { ERC1155_ABI } from '../../utils';
+import { type Abi, erc721Abi, type Address, type Hex } from 'viem';
+import { useAccount, useWriteContract } from 'wagmi';
+
+interface BaseTransferParams {
+	chainId: ChainId;
+	collectionAddress: Hex;
+	tokenId: string;
+	receiverAddress: Address;
+}
+
+interface ERC721TransferParams extends BaseTransferParams {
+	contractType: ContractType.ERC721;
+}
+
+interface ERC1155TransferParams extends BaseTransferParams {
+	contractType: ContractType.ERC1155;
+	quantity: string;
+}
+
+export type TransferTokensParams = ERC721TransferParams | ERC1155TransferParams;
+
+const prepareTransferConfig = (
+	params: TransferTokensParams,
+	accountAddress: Address,
+) => {
+	if (params.contractType === 'ERC721') {
+		return {
+			abi: erc721Abi as Abi,
+			address: params.collectionAddress,
+			functionName: 'safeTransferFrom',
+			args: [
+				accountAddress,
+				params.receiverAddress,
+				BigInt(params.tokenId),
+			] as const,
+		} as const;
+	}
+
+	return {
+		abi: ERC1155_ABI as Abi,
+		address: params.collectionAddress,
+		functionName: 'safeTransferFrom',
+		args: [
+			accountAddress,
+			params.receiverAddress,
+			BigInt(params.tokenId),
+			params.quantity,
+			'0x', // data
+		] as const,
+	};
+};
+
+export const useTransferTokens = () => {
+	const { address: accountAddress } = useAccount();
+	const {
+		writeContractAsync,
+		data: hash,
+		isPending,
+		isError,
+		isSuccess,
+	} = useWriteContract();
+
+	const transferTokensAsync = async (params: TransferTokensParams) => {
+		if (!accountAddress) {
+			throw new Error('No wallet connected');
+		}
+
+		const config = prepareTransferConfig(params, accountAddress);
+		return await writeContractAsync(config);
+	};
+
+	return {
+		transferTokensAsync,
+		hash,
+		transferring: isPending,
+		transferFailed: isError,
+		transferSuccess: isSuccess,
+	};
+};

package/src/react/index.ts

@@ -0,0 +1,5 @@
+export * from './provider';
+export * from './hooks';
+export * from './_internal/api/get-query-client';
+export * from './_internal/wagmi/create-config';
+export * from './ui/index';

package/src/react/provider.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { createContext } from 'react';
+import '@0xsequence/design-system/styles.css';
+import type { SdkConfig } from '@types';
+import { PROVIDER_ID } from './_internal/get-provider';
+
+export const MarketplaceSdkContext = createContext({} as SdkConfig);
+
+export type MarketplaceSdkProviderProps = {
+	config: SdkConfig;
+	children: React.ReactNode;
+};
+
+export function MarketplaceProvider({
+	config,
+	children,
+}: MarketplaceSdkProviderProps) {
+	return (
+		<MarketplaceSdkContext.Provider value={config}>
+			<div id={PROVIDER_ID}>{children}</div>
+		</MarketplaceSdkContext.Provider>
+	);
+}

package/src/react/ssr/create-ssr-client.ts

@@ -0,0 +1,31 @@
+import { type State, cookieToInitialState } from 'wagmi';
+import type { SdkConfig } from '../../types/sdk-config';
+import { getQueryClient } from '../_internal/api/get-query-client';
+import { createWagmiConfig } from '../_internal/wagmi/create-config';
+import { marketplaceConfigOptions } from '../hooks/options/marketplaceConfigOptions.ts';
+
+type InitSSRClientArgs = {
+	cookie: string;
+	config: SdkConfig;
+};
+
+type InitialState = { wagmi?: State };
+
+const marketplaceConfig = async (config: SdkConfig) => {
+	const queryClient = getQueryClient();
+	const configOptions = marketplaceConfigOptions(config);
+	return queryClient.fetchQuery(configOptions);
+};
+
+const initialState = async (args: InitSSRClientArgs): Promise<InitialState> => {
+	const marketConfig = await marketplaceConfig(args.config);
+	const wagmiConfig = createWagmiConfig(marketConfig, args.config, true);
+	return { wagmi: cookieToInitialState(wagmiConfig, args.cookie) };
+};
+
+export const createSSRClient = (args: InitSSRClientArgs) => {
+	const getMarketplaceConfig = async () => marketplaceConfig(args.config);
+	const getInitialState = async () => initialState(args);
+	const config = args.config;
+	return { getInitialState, getMarketplaceConfig, config };
+};

package/src/react/ssr/index.ts

@@ -0,0 +1 @@
+export * from './create-ssr-client';

package/src/react/ui/icons/ArrowUp.tsx

@@ -0,0 +1,29 @@
+import { iconVariants } from './styles.css';
+import { Box, type IconProps } from '@0xsequence/design-system';
+
+const Svg = () => (
+	<svg
+		width="12"
+		height="12"
+		viewBox="0 0 12 12"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M8.65039 6.03638L9.28679 5.39999L5.96859 2.08179L2.65039 5.39999L3.28679 6.03638L5.51859 3.80458V9.91822H6.41859V3.80458L8.65039 6.03638Z"
+			fill="#D1D1D1"
+		/>
+	</svg>
+);
+
+const SvgArrowUpIcon = ({ size = 'sm', ...props }: IconProps) => (
+	<Box
+		as={Svg}
+		className={iconVariants({
+			size,
+		})}
+		{...props}
+	/>
+);
+
+export default SvgArrowUpIcon;

package/src/react/ui/icons/CalendarIcon.tsx

@@ -0,0 +1,29 @@
+import { Box, type IconProps } from '@0xsequence/design-system';
+import { iconVariants } from './styles.css';
+
+const Svg = () => (
+	<svg
+		width="20"
+		height="20"
+		viewBox="0 0 20 20"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M4.57634 17.5C3.73146 17.5 3.08946 17.2816 2.65034 16.8449C2.21678 16.4081 2 15.7586 2 14.8965V5.10352C2 4.24135 2.21678 3.59189 2.65034 3.15513C3.08946 2.71838 3.73146 2.5 4.57634 2.5H15.4237C16.2741 2.5 16.9161 2.72121 17.3497 3.16364C17.7832 3.6004 18 4.24702 18 5.10352V14.8965C18 15.753 17.7832 16.3996 17.3497 16.8364C16.9161 17.2788 16.2741 17.5 15.4237 17.5H4.57634ZM4.55133 15.9515H15.4403C15.7738 15.9515 16.0295 15.8636 16.2074 15.6877C16.3908 15.5062 16.4825 15.2396 16.4825 14.888V7.44328C16.4825 7.08593 16.3908 6.81934 16.2074 6.64351C16.0295 6.46767 15.7738 6.37975 15.4403 6.37975H4.55133C4.21782 6.37975 3.96213 6.46767 3.78426 6.64351C3.61195 6.81934 3.52579 7.08593 3.52579 7.44328V14.888C3.52579 15.2396 3.61195 15.5062 3.78426 15.6877C3.96213 15.8636 4.21782 15.9515 4.55133 15.9515ZM8.48671 9.17896C8.34775 9.17896 8.25048 9.15343 8.19489 9.10238C8.13931 9.05133 8.11152 8.95207 8.11152 8.80459V8.33664C8.11152 8.19484 8.13931 8.09841 8.19489 8.04736C8.25048 7.99064 8.34775 7.96228 8.48671 7.96228H8.94528C9.0898 7.96228 9.18708 7.99064 9.2371 8.04736C9.29269 8.09841 9.32048 8.19484 9.32048 8.33664V8.80459C9.32048 8.95207 9.29269 9.05133 9.2371 9.10238C9.18708 9.15343 9.0898 9.17896 8.94528 9.17896H8.48671ZM11.0714 9.17896C10.9269 9.17896 10.8268 9.15343 10.7712 9.10238C10.7212 9.05133 10.6962 8.95207 10.6962 8.80459V8.33664C10.6962 8.19484 10.7212 8.09841 10.7712 8.04736C10.8268 7.99064 10.9269 7.96228 11.0714 7.96228H11.5383C11.6773 7.96228 11.7745 7.99064 11.8301 8.04736C11.8857 8.09841 11.9135 8.19484 11.9135 8.33664V8.80459C11.9135 8.95207 11.8857 9.05133 11.8301 9.10238C11.7745 9.15343 11.6773 9.17896 11.5383 9.17896H11.0714ZM13.6477 9.17896C13.5088 9.17896 13.4115 9.15343 13.3559 9.10238C13.3003 9.05133 13.2725 8.95207 13.2725 8.80459V8.33664C13.2725 8.19484 13.3003 8.09841 13.3559 8.04736C13.4115 7.99064 13.5088 7.96228 13.6477 7.96228H14.1146C14.2592 7.96228 14.3564 7.99064 14.4065 8.04736C14.462 8.09841 14.4898 8.19484 14.4898 8.33664V8.80459C14.4898 8.95207 14.462 9.05133 14.4065 9.10238C14.3564 9.15343 14.2592 9.17896 14.1146 9.17896H13.6477ZM5.90203 11.7825C5.75751 11.7825 5.65746 11.7541 5.60188 11.6974C5.55185 11.6407 5.52684 11.5442 5.52684 11.4081V10.9317C5.52684 10.7842 5.55185 10.6849 5.60188 10.6339C5.65746 10.5828 5.75751 10.5573 5.90203 10.5573H6.36894C6.5079 10.5573 6.60518 10.5828 6.66076 10.6339C6.71635 10.6849 6.74414 10.7842 6.74414 10.9317V11.4081C6.74414 11.5442 6.71635 11.6407 6.66076 11.6974C6.60518 11.7541 6.5079 11.7825 6.36894 11.7825H5.90203ZM8.48671 11.7825C8.34775 11.7825 8.25048 11.7541 8.19489 11.6974C8.13931 11.6407 8.11152 11.5442 8.11152 11.4081V10.9317C8.11152 10.7842 8.13931 10.6849 8.19489 10.6339C8.25048 10.5828 8.34775 10.5573 8.48671 10.5573H8.94528C9.0898 10.5573 9.18708 10.5828 9.2371 10.6339C9.29269 10.6849 9.32048 10.7842 9.32048 10.9317V11.4081C9.32048 11.5442 9.29269 11.6407 9.2371 11.6974C9.18708 11.7541 9.0898 11.7825 8.94528 11.7825H8.48671ZM11.0714 11.7825C10.9269 11.7825 10.8268 11.7541 10.7712 11.6974C10.7212 11.6407 10.6962 11.5442 10.6962 11.4081V10.9317C10.6962 10.7842 10.7212 10.6849 10.7712 10.6339C10.8268 10.5828 10.9269 10.5573 11.0714 10.5573H11.5383C11.6773 10.5573 11.7745 10.5828 11.8301 10.6339C11.8857 10.6849 11.9135 10.7842 11.9135 10.9317V11.4081C11.9135 11.5442 11.8857 11.6407 11.8301 11.6974C11.7745 11.7541 11.6773 11.7825 11.5383 11.7825H11.0714ZM13.6477 11.7825C13.5088 11.7825 13.4115 11.7541 13.3559 11.6974C13.3003 11.6407 13.2725 11.5442 13.2725 11.4081V10.9317C13.2725 10.7842 13.3003 10.6849 13.3559 10.6339C13.4115 10.5828 13.5088 10.5573 13.6477 10.5573H14.1146C14.2592 10.5573 14.3564 10.5828 14.4065 10.6339C14.462 10.6849 14.4898 10.7842 14.4898 10.9317V11.4081C14.4898 11.5442 14.462 11.6407 14.4065 11.6974C14.3564 11.7541 14.2592 11.7825 14.1146 11.7825H13.6477ZM5.90203 14.369C5.75751 14.369 5.65746 14.3434 5.60188 14.2924C5.55185 14.2414 5.52684 14.1421 5.52684 13.9946V13.5267C5.52684 13.3849 5.55185 13.2884 5.60188 13.2374C5.65746 13.1807 5.75751 13.1523 5.90203 13.1523H6.36894C6.5079 13.1523 6.60518 13.1807 6.66076 13.2374C6.71635 13.2884 6.74414 13.3849 6.74414 13.5267V13.9946C6.74414 14.1421 6.71635 14.2414 6.66076 14.2924C6.60518 14.3434 6.5079 14.369 6.36894 14.369H5.90203ZM8.48671 14.369C8.34775 14.369 8.25048 14.3434 8.19489 14.2924C8.13931 14.2414 8.11152 14.1421 8.11152 13.9946V13.5267C8.11152 13.3849 8.13931 13.2884 8.19489 13.2374C8.25048 13.1807 8.34775 13.1523 8.48671 13.1523H8.94528C9.0898 13.1523 9.18708 13.1807 9.2371 13.2374C9.29269 13.2884 9.32048 13.3849 9.32048 13.5267V13.9946C9.32048 14.1421 9.29269 14.2414 9.2371 14.2924C9.18708 14.3434 9.0898 14.369 8.94528 14.369H8.48671ZM11.0714 14.369C10.9269 14.369 10.8268 14.3434 10.7712 14.2924C10.7212 14.2414 10.6962 14.1421 10.6962 13.9946V13.5267C10.6962 13.3849 10.7212 13.2884 10.7712 13.2374C10.8268 13.1807 10.9269 13.1523 11.0714 13.1523H11.5383C11.6773 13.1523 11.7745 13.1807 11.8301 13.2374C11.8857 13.2884 11.9135 13.3849 11.9135 13.5267V13.9946C11.9135 14.1421 11.8857 14.2414 11.8301 14.2924C11.7745 14.3434 11.6773 14.369 11.5383 14.369H11.0714Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+const SvgCalendarIcon = ({ size = 'sm', ...props }: IconProps) => (
+	<Box
+		as={Svg}
+		className={iconVariants({
+			size,
+		})}
+		{...props}
+	/>
+);
+
+export default SvgCalendarIcon;

package/src/react/ui/icons/InfoIcon.tsx

@@ -0,0 +1,36 @@
+import { Box, type IconProps } from '@0xsequence/design-system';
+import { iconVariants } from './styles.css';
+
+const Svg = () => (
+	<svg
+		width="20"
+		height="20"
+		viewBox="0 0 20 20"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path d="M10.75 8.75V13.75H9.25V8.75H10.75Z" fill="white" />
+		<path
+			d="M9.37508 7.47656C9.55997 7.65885 9.78263 7.75 10.043 7.75C10.2097 7.75 10.3634 7.70833 10.504 7.625C10.6446 7.53906 10.7579 7.42578 10.8438 7.28516C10.9324 7.14193 10.9779 6.98438 10.9805 6.8125C10.9779 6.55729 10.8829 6.33854 10.6954 6.15625C10.5079 5.97396 10.2904 5.88281 10.043 5.88281C9.78263 5.88281 9.55997 5.97396 9.37508 6.15625C9.19279 6.33854 9.10294 6.55729 9.10555 6.8125C9.10294 7.07031 9.19279 7.29167 9.37508 7.47656Z"
+			fill="white"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+const SvgInfoIcon = ({ size = 'sm', ...props }: IconProps) => (
+	<Box
+		as={Svg}
+		className={iconVariants({
+			size,
+		})}
+		{...props}
+	/>
+);
+
+export default SvgInfoIcon;

package/src/react/ui/icons/InventoryIcon.tsx

@@ -0,0 +1,41 @@
+import { Box, type IconProps } from '@0xsequence/design-system';
+import { iconVariants } from './styles.css';
+
+const Svg = () => (
+	<svg
+		width="20"
+		height="20"
+		viewBox="0 0 20 20"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M2 4C2 2.89543 2.85961 2 3.92 2H6.48C7.54039 2 8.4 2.89543 8.4 4V6.66667C8.4 7.77124 7.54039 8.66667 6.48 8.66667H3.92C2.85961 8.66667 2 7.77124 2 6.66667V4Z"
+			fill="white"
+		/>
+		<path
+			d="M11.6 4C11.6 2.89543 12.4596 2 13.52 2H16.08C17.1404 2 18 2.89543 18 4V6.66667C18 7.77124 17.1404 8.66667 16.08 8.66667H13.52C12.4596 8.66667 11.6 7.77124 11.6 6.66667V4Z"
+			fill="white"
+		/>
+		<path
+			d="M2 13.3333C2 12.2288 2.85961 11.3333 3.92 11.3333H6.48C7.54039 11.3333 8.4 12.2288 8.4 13.3333V16C8.4 17.1046 7.54039 18 6.48 18H3.92C2.85961 18 2 17.1046 2 16V13.3333Z"
+			fill="white"
+		/>
+		<path
+			d="M11.6 13.3333C11.6 12.2288 12.4596 11.3333 13.52 11.3333H16.08C17.1404 11.3333 18 12.2288 18 13.3333V16C18 17.1046 17.1404 18 16.08 18H13.52C12.4596 18 11.6 17.1046 11.6 16V13.3333Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+const SvgInventoryIcon = ({ size = 'sm', ...props }: IconProps) => (
+	<Box
+		as={Svg}
+		className={iconVariants({
+			size,
+		})}
+		{...props}
+	/>
+);
+
+export default SvgInventoryIcon;

package/src/react/ui/icons/MinusIcon.tsx

@@ -0,0 +1,31 @@
+import { Box, type IconProps } from '@0xsequence/design-system';
+import { iconVariants } from './styles.css';
+
+const Svg = () => (
+	<svg
+		width="16"
+		height="16"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M13.2303 8.60039L3.4375 8.60039L3.4375 7.40039L13.2303 7.40039V8.60039Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+const SvgMinusIcon = ({ size = 'sm', ...props }: IconProps) => (
+	<Box
+		as={Svg}
+		className={iconVariants({
+			size,
+		})}
+		{...props}
+	/>
+);
+
+export default SvgMinusIcon;

package/src/react/ui/icons/PlusIcon.tsx

@@ -0,0 +1,29 @@
+import { Box, type IconProps } from '@0xsequence/design-system';
+import { iconVariants } from './styles.css';
+
+const Svg = () => (
+	<svg
+		width="16"
+		height="16"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M8.65529 7.45725V2.40039H7.45529V7.45724H2.39844V8.65725H7.45529V13.7141H8.65529V8.65725H13.7121V7.45725H8.65529Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+const SvgPlusIcon = ({ size = 'sm', ...props }: IconProps) => (
+	<Box
+		as={Svg}
+		className={iconVariants({
+			size,
+		})}
+		{...props}
+	/>
+);
+
+export default SvgPlusIcon;

package/src/react/ui/icons/PositiveCircleIcon.tsx

@@ -0,0 +1,35 @@
+import { Box, type IconProps } from '@0xsequence/design-system';
+import { iconVariants } from './styles.css';
+
+const Svg = () => (
+	<svg
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M21.6004 11.9999C21.6004 17.3018 17.3023 21.5999 12.0004 21.5999C6.69846 21.5999 2.40039 17.3018 2.40039 11.9999C2.40039 6.69797 6.69846 2.3999 12.0004 2.3999C17.3023 2.3999 21.6004 6.69797 21.6004 11.9999Z"
+			fill="#14A554"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M16.5798 7.79868L10.8701 16.7999L7.20039 12.6764L8.03544 11.9332L10.7199 14.9497L15.6359 7.1999L16.5798 7.79868Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+const SvgPositiveCircleIcon = ({ size = 'sm', ...props }: IconProps) => (
+	<Box
+		as={Svg}
+		className={iconVariants({
+			size,
+		})}
+		{...props}
+	/>
+);
+
+export default SvgPositiveCircleIcon;

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

@@ -0,0 +1,7 @@
+export * from './CalendarIcon';
+export * from './InventoryIcon';
+export * from './MinusIcon';
+export * from './PlusIcon';
+export * from './ArrowUp';
+export * from './InfoIcon';
+export * from './PositiveCircleIcon';

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

@@ -0,0 +1,35 @@
+import { vars } from '@0xsequence/design-system';
+import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
+
+export const iconVariants = recipe({
+	base: {
+		flexShrink: 0,
+	},
+
+	variants: {
+		size: {
+			xs: {
+				height: vars.lineHeights[4],
+				width: vars.lineHeights[4],
+			},
+			sm: {
+				height: vars.lineHeights[5],
+				width: vars.lineHeights[5],
+			},
+			md: {
+				height: vars.lineHeights[6],
+				width: vars.lineHeights[6],
+			},
+			lg: {
+				height: vars.lineHeights[7],
+				width: vars.lineHeights[7],
+			},
+			xl: {
+				height: vars.lineHeights[9],
+				width: vars.lineHeights[9],
+			},
+		},
+	},
+});
+
+export type IconVariants = RecipeVariants<typeof iconVariants>;

package/src/react/ui/index.ts

@@ -0,0 +1,6 @@
+export * from './modals/modal-provider';
+export { useCreateListingModal } from './modals/CreateListingModal';
+export { useMakeOfferModal } from './modals/MakeOfferModal';
+export { useSuccessfulPurchaseModal } from './modals/SuccessfulPurchaseModal';
+export { useTransferModal } from './modals/TransferModal';
+export { useSellModal } from './modals/SellModal';

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

@@ -0,0 +1,29 @@
+import { Box, Button, Modal, Text } from '@0xsequence/design-system';
+import { observable } from '@legendapp/state';
+import { observer } from '@legendapp/state/react';
+import { useAccount } from 'wagmi';
+
+const accountModalOpen$ = observable(false);
+
+export const useAccountModal = () => {
+	return {
+		show: () => accountModalOpen$.set(true),
+		hide: () => accountModalOpen$.set(false),
+		toggle: () => accountModalOpen$.toggle(),
+	};
+};
+
+export const AccountModal = observer(function AccountModal() {
+	const { address } = useAccount();
+	return (
+		accountModalOpen$.get() && (
+			<Modal>
+				<Box>
+					<Text>Wallet address</Text>
+					<Text>{address}</Text>
+				</Box>
+				<Button label="Sign out" />
+			</Modal>
+		)
+	);
+});