diff --git a/api-references/indexer/endpoints/indexer.json b/api-references/indexer/endpoints/indexer.json index 796e31ed..ddcd4241 100644 --- a/api-references/indexer/endpoints/indexer.json +++ b/api-references/indexer/endpoints/indexer.json @@ -4823,7 +4823,7 @@ "page": 1, "pageSize": 100 }, - "orderbookContractAddress": "0xB537a160472183f2150d42EB1c3DD6684A55f74c", + "orderbookContractAddress": "0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712", "collectionAddress": "0x602d5dc17490794267c7fa5f58a453eb9159a86d", "currencyAddresses": [ "0x7ceb23fd6bc0add59e62ac25578270cff1b9f619", @@ -4880,7 +4880,7 @@ "orderStatus": "OPEN", "createdBy": "0xf43a1defbd32243fd83fe702f7817dde3319246e", "blockNumber": 63027844, - "orderbookContractAddress": "0xb537a160472183f2150d42eb1c3dd6684a55f74c", + "orderbookContractAddress": "0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712", "createdAt": 1728909642 } ] diff --git a/api-references/marketplace/examples/get-orderbook.mdx b/api-references/marketplace/examples/get-orderbook.mdx index e6e44794..4bf6cc0d 100644 --- a/api-references/marketplace/examples/get-orderbook.mdx +++ b/api-references/marketplace/examples/get-orderbook.mdx @@ -51,7 +51,7 @@ curl --request POST \ } ] }, - "orderbookContractAddress": "0xB537a160472183f2150d42EB1c3DD6684A55f74c" + "orderbookContractAddress": "0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712" }' ``` @@ -83,7 +83,7 @@ import fetch from "cross-fetch"; }, ], }, - orderbookContractAddress: "0xB537a160472183f2150d42EB1c3DD6684A55f74c", + orderbookContractAddress: "0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712", }), } ); diff --git a/api-references/marketplace/examples/get-top-orders.mdx b/api-references/marketplace/examples/get-top-orders.mdx index 6f0ecefb..a2814994 100644 --- a/api-references/marketplace/examples/get-top-orders.mdx +++ b/api-references/marketplace/examples/get-top-orders.mdx @@ -16,7 +16,7 @@ curl --request POST \ "currencyAddresses": [ "0xa9c88358862211870db6f18bc9b3f6e4f8b3eae7" ], - "orderbookContractAddress": "0xB537a160472183f2150d42EB1c3DD6684A55f74c", + "orderbookContractAddress": "0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712", "tokenIDs": ["0","1", "2", "3", "4", "5"], "isListing": true, "priceSort": "DESC" @@ -38,7 +38,7 @@ curl --request POST \ body: JSON.stringify({ collectionAddress: "0x1693ffc74edbb50d6138517fe5cd64fd1c917709", currencyAddresses: ["0xa9c88358862211870db6f18bc9b3f6e4f8b3eae7"], - orderbookContractAddress: "0xB537a160472183f2150d42EB1c3DD6684A55f74c", + orderbookContractAddress: "0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712", tokenIDs: ["0", "1", "2", "3", "4", "5"], isListing: true, priceSort: "DESC", diff --git a/api-references/marketplace/examples/get-user-activities.mdx b/api-references/marketplace/examples/get-user-activities.mdx index 81dd5e0d..e0ace2bd 100644 --- a/api-references/marketplace/examples/get-user-activities.mdx +++ b/api-references/marketplace/examples/get-user-activities.mdx @@ -16,7 +16,7 @@ Enables you to retrieve activity data for a specific user, including orders and ```shell cURL curl -X POST -H "Content-Type: application/json" https://marketplace-api.sequence.app/arbitrum-sepolia/rpc/Marketplace/GetUserActivities -d '{ - "orderbookContractAddress": "0xB537a160472183f2150d42EB1c3DD6684A55f74c", + "orderbookContractAddress": "0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712", "collectionAddress": "0x1693ffc74edbb50d6138517fe5cd64fd1c917709", "currencyAddresses": [ "0xa9c88358862211870db6f18bc9b3f6e4f8b3eae7" @@ -39,7 +39,7 @@ import fetch from "cross-fetch"; "Content-Type": "application/json", }, body: JSON.stringify({ - "orderbookContractAddress": "0xB537a160472183f2150d42EB1c3DD6684A55f74c", + "orderbookContractAddress": "0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712", "collectionAddress": "0x1693ffc74edbb50d6138517fe5cd64fd1c917709", "currencyAddresses": [ "0xa9c88358862211870db6f18bc9b3f6e4f8b3eae7" diff --git a/api-references/marketplace/examples/orderbook-transactions.mdx b/api-references/marketplace/examples/orderbook-transactions.mdx index 8fdaf553..a2bc4808 100644 --- a/api-references/marketplace/examples/orderbook-transactions.mdx +++ b/api-references/marketplace/examples/orderbook-transactions.mdx @@ -4,7 +4,7 @@ sidebarTitle: Creating Market Orders & Listings --- -All transactions run through a contract at address `0xB537a160472183f2150d42EB1c3DD6684A55f74c` on all currently offered networks. +All transactions run through a contract at address `0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712` on all currently offered networks. ## Create a Request @@ -65,12 +65,12 @@ const dataCreateRequest = sequenceMarketInterface.encodeFunctionData( ); const dataApprove = erc1155Interface.encodeFunctionData("setApprovalForAll", [ - "0xB537a160472183f2150d42EB1c3DD6684A55f74c", // sequence market contract (same address on all offered networks) + "0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712", // sequence market contract (same address on all offered networks) true, ]); const tx = { - to: "0xB537a160472183f2150d42EB1c3DD6684A55f74c", // sequence market contract (same address on all offered networks) + to: "0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712", // sequence market contract (same address on all offered networks) data: dataCreateRequest, }; @@ -119,7 +119,7 @@ const sequenceMarketInterface = new ethers.Interface([ const amountBigNumber = ethers.parseUnits(String(price), 18); // currency price based on correct decimals for token contract const dataApprove = erc20Interface.encodeFunctionData("approve", [ - "0xB537a160472183f2150d42EB1c3DD6684A55f74c", // sequence market contract (same address on all offered networks) + "0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712", // sequence market contract (same address on all offered networks) amountBigNumber, ]); @@ -134,7 +134,7 @@ const txApprove = { }; const tx = { - to: "0xB537a160472183f2150d42EB1c3DD6684A55f74c", // sequence market contract (same address on all offered networks) + to: "0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712", // sequence market contract (same address on all offered networks) data: dataAcceptRequest, }; diff --git a/docs.json b/docs.json index 36f974b7..7e729bb8 100644 --- a/docs.json +++ b/docs.json @@ -122,23 +122,17 @@ "pages": [ "solutions/monetization-overview", { - "group": "Marketplaces", + "group": "White-label Marketplace", "pages": [ - { - "group": "White-label Marketplace", - "pages": [ - "solutions/marketplaces/white-label-marketplace/overview", - "solutions/marketplaces/white-label-marketplace/guide", - "solutions/marketplaces/white-label-marketplace/video-walkthrough" - ] - }, - { - "group": "Build your Custom Marketplace", - "pages": [ - "solutions/marketplaces/orderbook/overview", - "solutions/marketplaces/orderbook/starter" - ] - } + "solutions/marketplaces/white-label-marketplace/overview", + "solutions/marketplaces/white-label-marketplace/guide" + ] + }, + { + "group": "Build your Custom Marketplace", + "pages": [ + "solutions/marketplaces/custom-marketplace/overview", + "solutions/marketplaces/custom-marketplace/getting-started" ] }, { @@ -228,6 +222,21 @@ "sdk/web/custom-connectors" ] }, + { + "group": "Marketplace SDK", + "pages": [ + "sdk/marketplace-sdk/overview", + "sdk/marketplace-sdk/getting-started", + { + "group": "Hooks", + "pages": [ + "sdk/marketplace-sdk/hooks/overview", + "sdk/marketplace-sdk/hooks/marketplace-actions", + "sdk/marketplace-sdk/hooks/marketplace-data-hooks" + ] + } + ] + }, { "group": "Game Engine SDKs", "pages": [ diff --git a/guides/custom-marketplace.mdx b/guides/custom-marketplace.mdx index ae1050a0..31389500 100644 --- a/guides/custom-marketplace.mdx +++ b/guides/custom-marketplace.mdx @@ -292,7 +292,7 @@ First, we check that the marketplace is approved for the contract, with some log ```js const ERC1155Contract = '0x1693ffc74edbb50d6138517fe5cd64fd1c917709' -const MarketPlaceContract = '0xB537a160472183f2150d42EB1c3DD6684A55f74c' +const MarketPlaceContract = '0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712' function App() { @@ -370,7 +370,7 @@ const createRequest = async () => { // is not approved const dataApprove = erc1155Interface.encodeFunctionData( "setApprovalForAll", - ["0xB537a160472183f2150d42EB1c3DD6684A55f74c", true] + ["0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712", true] ); const txApprove = { @@ -622,7 +622,7 @@ We begin with the same flow as before, accounting for sending multi-batch transa setAcceptData(data) // we'll need this later, only for Web SDK enabled transactions const tx = { - to: MarketPlaceContract, // 0xB537a160472183f2150d42EB1c3DD6684A55f74c + to: MarketPlaceContract, // 0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712 data: data } @@ -639,7 +639,7 @@ We begin with the same flow as before, accounting for sending multi-batch transa "function approve(address spender, uint256 amount) external returns (bool)" ]); - const spenderAddress = "0xB537a160472183f2150d42EB1c3DD6684A55f74c"; + const spenderAddress = "0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712"; const maxUint256 = ethers.constants.MaxUint256; const dataApprove = erc20Interface.encodeFunctionData("approve", [spenderAddress, maxUint256]); diff --git a/images/marketplace/builder_add_new_custom_currency.png b/images/marketplace/builder_add_new_custom_currency.png index fd88122f..5bcb2527 100644 Binary files a/images/marketplace/builder_add_new_custom_currency.png and b/images/marketplace/builder_add_new_custom_currency.png differ diff --git a/images/marketplace/builder_add_new_custom_currency_2.png b/images/marketplace/builder_add_new_custom_currency_2.png new file mode 100644 index 00000000..40ff38ee Binary files /dev/null and b/images/marketplace/builder_add_new_custom_currency_2.png differ diff --git a/images/marketplace/builder_add_new_custom_currency_3.png b/images/marketplace/builder_add_new_custom_currency_3.png new file mode 100644 index 00000000..332a14a0 Binary files /dev/null and b/images/marketplace/builder_add_new_custom_currency_3.png differ diff --git a/sdk/marketplace-sdk/getting-started.mdx b/sdk/marketplace-sdk/getting-started.mdx new file mode 100644 index 00000000..8cb591df --- /dev/null +++ b/sdk/marketplace-sdk/getting-started.mdx @@ -0,0 +1,280 @@ +--- +title: "Getting Started with Marketplace SDK" +description: Learn how to get started with Marketplace SDK by installing the necessary packages and setting up configs +sidebarTitle: Getting Started +--- + +Prior to beginning this integration, ensure you have installed and configured our Web SDK. For setup instructions, please refer to the [Web SDK - Getting started](/sdk/web/getting-started) documentation. Once complete, return here to proceed. + +Otherwise, we will walk you through the process of installing Marketplace SDK, instantiating the SDK and providing you some hooks to work with our marketplace + +## Installing Marketplace SDK Packages + +Marketplace SDK is modular, allowing you to install only the necessary packages. To get started, install the `@0xsequence/marketplace-sdk` core package, as well as install other dependencies necessary dependencies. + +```bash +npm install @0xsequence/kit @0xsequence/kit-checkout @0xsequence/kit-wallet @0xsequence/marketplace-sdk @0xsequence/design-system@^1 @0xsequence/network wagmi ethers@^6 viem 0xsequence @tanstack/react-query @tanstack/react-query-devtools @legendapp/state framer-motion@^8.5.2 pino-pretty +# or +pnpm add @0xsequence/kit @0xsequence/kit-checkout @0xsequence/kit-wallet @0xsequence/marketplace-sdk @0xsequence/design-system@^1 @0xsequence/network wagmi ethers@^6 viem 0xsequence @tanstack/react-query @tanstack/react-query-devtools @legendapp/state framer-motion@^8.5.2 pino-pretty +# or +yarn add @0xsequence/kit @0xsequence/kit-checkout @0xsequence/kit-wallet @0xsequence/marketplace-sdk @0xsequence/design-system@^1 @0xsequence/network wagmi ethers@^6 viem 0xsequence @tanstack/react-query @tanstack/react-query-devtools @legendapp/state framer-motion@^8.5.2 pino-pretty +``` + +# Setting Up your Dapp + +To utilize the core marketplace-sdk wrapper to interact with your marketplace from your application, follow these steps: + + + + +Ensuring that your Web SDK is properly integrated is crucial before getting started with Marketplace SDK. To verify this, simply check if you can log in and log out successfully. + + + + + +Next, a configuration variable for Marketplace SDK will need to be created. In this file, we will define and manage essential configuration settings for our Marketplace SDK, including environment variables. This centralized approach ensures that configuration values are easily accessible and maintainable. + +#### config.ts + + +```ts vite +import type { SdkConfig } from '@0xsequence/marketplace-sdk'; + +const projectAccessKey = import.meta.env.VITE_PROJECT_ACCESS_KEY; +const projectId = import.meta.env.VITE_PROJECT_ID!; +const waasConfigKey = import.meta.env.VITE_WAAS_CONFIG_KEY; +const googleClientId = import.meta.env.VITE_GOOGLE_CLIENT_ID; +const appleClientId = import.meta.env.VITE_APPLE_CLIENT_ID; +const appleRedirectURI = window.location.origin + window.location.pathname; +const walletConnectId = import.meta.env.VITE_WALLET_CONNECT_ID; + +export function getConfig() { + const embedded = waasConfigKey + ? ({ + waasConfigKey, + googleClientId, + appleClientId, + appleRedirectURI, + } satisfies NonNullable["embedded"]) + : undefined; + + const config = { + projectId, + projectAccessKey, + wallet: { + walletConnectProjectId: walletConnectId, + embedded, + }, + } satisfies SdkConfig; + + return config; +} +``` + +```ts nextjs server side rendering +import type { SdkConfig } from '@0xsequence/marketplace-sdk'; + +const projectAccessKey = process.env.NEXT_PUBLIC_PROJECT_ACCESS_KEY!; +const projectId = process.env.NEXT_PUBLIC_PROJECT_ID!; +const waasConfigKey = process.env.NEXT_PUBLIC_WAAS_CONFIG_KEY!; +const googleClientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID; +const appleClientId = process.env.NEXT_PUBLIC_APPLE_CLIENT_ID; +const walletConnectId = process.env.NEXT_PUBLIC_WALLET_CONNECT_ID; + +export function getConfig(host: string) { + const embedded = waasConfigKey + ? ({ + waasConfigKey, + googleClientId, + appleClientId, + appleRedirectURI: appleClientId ? host : '', + } satisfies NonNullable['embedded']) + : undefined; + + const config = { + projectId, + projectAccessKey, + wallet: { + walletConnectProjectId: walletConnectId, + embedded, + }, + } satisfies SdkConfig; + + return config; +} +``` + +```ts nextjs client side rendering +import type { SdkConfig } from '@0xsequence/marketplace-sdk'; + +const projectAccessKey = process.env.NEXT_PUBLIC_PROJECT_ACCESS_KEY!; +const projectId = process.env.NEXT_PUBLIC_PROJECT_ID!; +const waasConfigKey = process.env.NEXT_PUBLIC_WAAS_CONFIG_KEY!; +const googleClientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID; +const appleClientId = process.env.NEXT_PUBLIC_APPLE_CLIENT_ID; +const appleRedirectURI = + typeof window !== "undefined" ? `https://${window.location.host}` : ""; +const walletConnectId = process.env.NEXT_PUBLIC_WALLET_CONNECT_ID; + +export function getConfig() { + const embedded = waasConfigKey + ? ({ + waasConfigKey, + googleClientId, + appleClientId, + appleRedirectURI, + } satisfies NonNullable['embedded']) + : undefined; + + const config = { + projectId, + projectAccessKey, + wallet: { + walletConnectProjectId: walletConnectId, + embedded, + }, + } satisfies SdkConfig; + + return config; +} +``` + + + + + +Next, a Ssr Client for Marketplace SDK will need to be created. This SSR Client serves as an entry point for initializing the marketplace SDK on the Next.js server, enabling efficient data fetching and configuration setup before rendering the UI. + +#### Understanding the SSR Client + +The SSR Client allows you to access key marketplace data and configurations, which are essential for properly initializing the SDK on the server side. The following data can be retrieved: + +This setup ensures a seamless integration of the marketplace SDK with server-side rendering, improving performance and user experience. + +#### ssrClient.ts + + +```ts vite +// You can omit this step with VITE +``` + +```ts nextjs server side rendering +import { getConfig } from './config'; +import { createSSRClient } from '@0xsequence/marketplace-sdk/react/ssr'; +import { QueryClient } from '@tanstack/react-query'; +import { headers } from 'next/headers'; + +export const ssrClient = async () => { + const headersList = headers(); + + return createSSRClient({ + cookie: headersList.get('cookie') || '', + config: getConfig(`https://${headersList.get('x-forwarded-host') || headersList.get('host')}/`), + queryClient: new QueryClient(), + }); +}; +``` + +```ts nextjs client side rendering +// You can omit this step in NEXT.js if your layout uses 'use client' instead of server-side rendering +``` + + + + + + + +Open your `Providers.tsx` file, where the Web SDK is configured, and integrate the Marketplace SDK providers. + + +```ts vite +import { + MarketplaceProvider, + ModalProvider, +} from "@0xsequence/marketplace-sdk/react"; +import { getConfig } from "./config"; + +const sdkConfig = getConfig(); + +// Into your React component: + +return ( + /* Your other providers should be placed here (they should wrap MarketplaceProvider) */ + + + {children} + + + + /* Your other providers should close here */ +); +``` + +```ts nextjs server side rendering +import { + MarketplaceProvider, + ModalProvider, + marketplaceConfigOptions, +} from "@0xsequence/marketplace-sdk/react"; + +import { + QueryClient, + QueryClientProvider, + useQuery, +} from '@tanstack/react-query'; + +import { ssrClient } from '../ssrClient.ts'; + +// Into your React component: + +const { getInitialState, config: sdkConfig } = ssrClient(); +const sdkInitialState = await getInitialState(); + +return ( + /* Your other providers should be placed here (they should wrap MarketplaceProvider) */ + + + {children} + + + + /* Your other providers should close here */ +); +``` + +```ts nextjs client side rendering +import { + MarketplaceProvider, + ModalProvider, +} from "@0xsequence/marketplace-sdk/react"; +import { getConfig } from "./config"; + +const sdkConfig = getConfig(); + +// Into your React component: + +return ( + /* Your other providers should be placed here (they should wrap MarketplaceProvider) */ + + + {children} + + + + /* Your other providers should close here */ +); +``` + + + + + + +Congratulations! Now you’re ready to explore the available hooks in our Marketplace SDK. Interested? Check out the [Marketplace SDK hooks](/sdk/marketplace-sdk/hooks/overview) documentation to learn more. + + + + + \ No newline at end of file diff --git a/sdk/marketplace-sdk/hooks/marketplace-actions.mdx b/sdk/marketplace-sdk/hooks/marketplace-actions.mdx new file mode 100644 index 00000000..830850db --- /dev/null +++ b/sdk/marketplace-sdk/hooks/marketplace-actions.mdx @@ -0,0 +1,223 @@ +--- +title: "Marketplace Actions" +description: The action hooks are essential for interacting with the Marketplace in your application. Useful for making listings, making offers, and performing buy and sell actions. +sidebarTitle: "Marketplace Actions" +--- + +## useCreateListingModal + +The useCreateListingModal hook is used to list an item for sale on the Marketplace. It provides the necessary functionality to create and manage a new listing. + +```ts +import { useCreateListingModal } from "@0xsequence/marketplace-sdk/react"; + +## Into your React component: + +const { show: showListModal } = useCreateListingModal({ onError }); + +const onClickList = () => { + showListModal({ + collectionAddress, + chainId, + collectibleId, + orderbookKind, + }); +}; + +return +``` + + + + + ```ts + interface useCreateListingModal { + onSuccess?: ({ hash, orderId }: { + hash?: Hash; + orderId?: string; + }) => void; + onError?: (error: Error) => void; + } + ``` + + + + + ```ts + interface ShowCreateListingModalArgs { + collectionAddress: Hex; + chainId: string; + collectibleId: string; + orderbookKind?: OrderbookKind; + callbacks?: ModalCallbacks; + } + ``` + + + + + +## useBuyModal + +The useBuyModal hook allows users to purchase an NFT that is listed for sale on the Marketplace. It handles the buying process and transaction execution. + +```ts +import { useBuyModal } from "@0xsequence/marketplace-sdk/react"; + +## Into your React component: + +const { show: showBuyModal } = useBuyModal({ + onSuccess(hash) { + console.log("Buy transaction sent with hash: ", hash); + }, + onError, +}); + +const onClickBuy = () => { + showBuyModal({ + chainId, + collectionAddress, + tokenId, + order, + }); +}; + +return +``` + + + + + ```ts + interface useBuyModal { + onSuccess?: ({ hash, orderId }: { + hash?: Hash; + orderId?: string; + }) => void; + onError?: (error: Error) => void; + } + ``` + + + + + ```ts + interface ShowBuyModalArgs { + chainId: string; + collectionAddress: Hex; + tokenId: string; + order: Order; + } + ``` + + + + + +## useMakeOfferModal + +The useMakeOfferModal hook enables users to place an offer on an NFT. It facilitates creating and submitting offers within the Marketplace. + +```ts +import { useMakeOfferModal } from "@0xsequence/marketplace-sdk/react"; + +## Into your React component: + +const { show: showOfferModal } = useMakeOfferModal({ + onError, +}); + +const onClickOffer = () => { + showOfferModal({ + collectionAddress, + chainId, + collectibleId, + orderbookKind, + }); +}; + +return +``` + + + + + ```ts + interface useMakeOfferModal { + onSuccess?: ({ hash, orderId }: { + hash?: Hash; + orderId?: string; + }) => void; + onError?: (error: Error) => void; + } + ``` + + + + + ```ts + interface ShowMakeOfferModalArgs { + collectionAddress: Hex; + chainId: string; + collectibleId: string; + orderbookKind?: OrderbookKind; + callbacks?: ModalCallbacks; + } + ``` + + + + + +## useSellModal + +The useSellModal hook is used to sell an NFT by accepting an existing offer. It provides the necessary functionality to complete the selling process. + +```ts +import { useSellModal } from "@0xsequence/marketplace-sdk/react"; + +## Into your React component: + +const { show: showSellModal } = useSellModal({ onError }); + +const onAcceptOffer = () => { + showSellModal({ + collectionAddress, + chainId, + tokenId, + order, + }); +}; + +return +``` + + + + + ```ts + interface useSellModal { + onSuccess?: ({ hash, orderId }: { + hash?: Hash; + orderId?: string; + }) => void; + onError?: (error: Error) => void; + } + ``` + + + + + ```ts + interface ShowSellModalArgs { + collectionAddress: Hex; + chainId: string; + tokenId: string; + order: Order; + callbacks?: ModalCallbacks; + } + ``` + + + + \ No newline at end of file diff --git a/sdk/marketplace-sdk/hooks/marketplace-data-hooks.mdx b/sdk/marketplace-sdk/hooks/marketplace-data-hooks.mdx new file mode 100644 index 00000000..a1f9eb7d --- /dev/null +++ b/sdk/marketplace-sdk/hooks/marketplace-data-hooks.mdx @@ -0,0 +1,349 @@ +--- +title: "Marketplace Data Hooks" +description: Collection of GET hooks for retrieving key Marketplace data. Useful for fetching and managing Marketplace information in your UI. +sidebarTitle: Marketplace Data Hooks +--- + +## useMarketplaceConfig + +The useMarketplaceConfig hook retrieves your Marketplace's configuration, including collections, social links, title, and other settings from Builder. + +```ts +import { useMarketplaceConfig } from "@0xsequence/marketplace-sdk/react"; + +## Into your React component: + +const data = useMarketplaceConfig(); +``` + + + + + + Unique identifier of the marketplace publisher. + + + + The title of the marketplace. + + + + A brief description of the marketplace. + + + + Social media links associated with the marketplace. + + + + URL of the marketplace's favicon. + + + + URL of the Marketplace banner for landing page + + + + Array of collections from the marketplace. + + + + Configuration options for wallet integrations. + + + + Layout configuration for the marketplace's landing page. + + + + URL of the marketplace's logo. + + + + URL of the marketplace's banner. + + + + URL of the custom font used in the marketplace. + + + + URL of the ogImage + + + + Custom CSS styles for the marketplace. + + + + URL of the marketplace manifest file. + + + + +## useListCollectibles + +The useListCollectibles hook retrieves the current listings and offers in a collection from your Marketplace. Useful for accessing and managing listings and offers efficiently. + +```ts +import { OrderSide } from '@0xsequence/marketplace-sdk'; +import { useListCollectibles } from '@0xsequence/marketplace-sdk/react'; + +## Into your React component: + +const { + data: collectibles, + isLoading: collectiblesLoading, + fetchNextPage: fetchNextCollectibles, +} = useListCollectibles({ + chainId, + collectionAddress, + filter: { + // # Optional filters + includeEmpty, + searchText, + properties, + }, + side: OrderSide.listing, +}); + +const collectiblesFlat = + collectibles?.pages.flatMap((p) => p.collectibles) ?? []; + +return ( +
+ {collectiblesFlat?.map((collectible) => ( + // Your Collectibles component + ))} +
+); +``` + + + + + ```ts + interface UseListCollectiblesArgs { + chainId: string; + side: OrderSide; + collectionAddress: `0x${string}`; + page?: { + page: number; + pageSize: number; + sort?: { + order: SortOrder$1; + column: string; + }[]; + more?: boolean; + }; + filter?: { + includeEmpty: boolean; + searchText?: string; + properties?: { + type: PropertyType; + name: string; + values?: any[]; + max?: number; + min?: number; + }[]; + marketplaces?: MarketplaceKind[]; + inAccounts?: string[]; + notInAccounts?: string[]; + ordersCreatedBy?: string[]; + ordersNotCreatedBy?: string[]; + }; + query?: { + enabled?: boolean; + }; + } + ``` + + + + + + Contains the paginated collectible orders data. + + + + List of collectible orders returned in pages. + + + + Indicates whether the data is currently loading. + + + + This function allows you to fetch the next "page" of results. + + + + +## useListCollectiblesPaginated + +The useListCollectiblesPaginated hook efficiently retrieves and manages current listings and offers from your Marketplace, making it ideal for displaying paginated NFTs within a collection. + +```ts +import { OrderSide } from '@0xsequence/marketplace-sdk'; +import { useListCollectiblesPaginated } from '@0xsequence/marketplace-sdk/react'; + +const chainId = 137; +const searchText = ""; +const enabled = true; +const includeEmpty = true; +const properties = []; +const pageSize = 30; +const currentPage = 1; +const collectionAddress = "0x0e5566a108e617baedbebb44e3fcc7bf03e3a839"; + +## Into your React component: + +const { + data: collectiblesResponse, + isLoading: collectiblesLoading, +} = useListCollectiblesPaginated({ + chainId: String(chainId), + collectionAddress, + side: OrderSide.listing, + filter: { + // # Optional filters + includeEmpty, + searchText, + properties, + }, + page: { + page: currentPage, + pageSize, + }, + query: { + page: currentPage, + pageSize, + enabled, + }, +}); + +const collectiblesList = collectiblesResponse?.collectibles ?? []; + +return ( +
+ {collectiblesList?.map((collectible) => ( + // Your Collectibles component + ))} +
+); +``` + + + + ```ts + interface UseListCollectiblesPaginatedArgs { + chainId: string; + side: OrderSide; + collectionAddress: `0x${string}`; + page?: { + page: number; + pageSize: number; + sort?: { + order: SortOrder$1; + column: string; + }[]; + more?: boolean; + }; + filter?: { + includeEmpty: boolean; + searchText?: string; + properties?: { + type: PropertyType; + name: string; + values?: any[]; + max?: number; + min?: number; + }[]; + marketplaces?: MarketplaceKind[]; + inAccounts?: string[]; + notInAccounts?: string[]; + ordersCreatedBy?: string[]; + ordersNotCreatedBy?: string[]; + }; + query: { + page: number; + pageSize: number; + enabled?: boolean; + }; + } + ``` + + + + + Contains the collectible orders data. + + + + List of collectible orders. + + + + Indicates whether the data is currently loading. + + + + +## useCountOfCollectables + +The useCountOfCollectables hook returns the number of NFTs in a collection. + +```ts +import { OrderSide } from '@0xsequence/marketplace-sdk'; +import { useCountOfCollectables } from '@0xsequence/marketplace-sdk/react'; + +const countOfCollectables = useCountOfCollectables({ + chainId: String(chainId), + collectionAddress: collectionId, + side: OrderSide.listing, + filter: { + searchText: text, + includeEmpty, + properties, + }, +}); +``` + + + + ```ts + interface UseCountOfCollectables { + chainId: ChainId; + collectionAddress: CollectionAddress; + query?: { enabled?: boolean }; + filter?: { + includeEmpty: boolean; + searchText?: string; + properties?: { + name: string; + type: PropertyType; + min?: number; + max?: number; + values?: any[]; + }[]; + marketplaces?: MarketplaceKind[]; + inAccounts?: string[]; + notInAccounts?: string[]; + ordersCreatedBy?: string[]; + ordersNotCreatedBy?: string[]; + }; + side?: OrderSide; + } + ``` + + + + + Numeric response data. + + + + Indicates whether the data is currently loading. + + + \ No newline at end of file diff --git a/sdk/marketplace-sdk/hooks/overview.mdx b/sdk/marketplace-sdk/hooks/overview.mdx new file mode 100644 index 00000000..9adeb7bc --- /dev/null +++ b/sdk/marketplace-sdk/hooks/overview.mdx @@ -0,0 +1,18 @@ +--- +title: "Marketplace SDK Hooks" +description: Marketplace SDK provides a collection of optimized hooks to seamlessly and efficiently integrate marketplace functionality into your applications. These hooks enable smooth and secure user experience management. +sidebarTitle: Overview +--- + +It includes hooks for both retrieving marketplace data and performing actions such as buying, selling, creating, and accepting offers. + +Refer to the documentation to learn how to use them and maximize your integration. + + + + Collection of GET hooks for retrieving key Marketplace data. Useful for fetching and managing Marketplace information in your UI + + + Manage listings, offers, and purchases by integrating Marketplace Actions. + + \ No newline at end of file diff --git a/sdk/marketplace-sdk/overview.mdx b/sdk/marketplace-sdk/overview.mdx new file mode 100644 index 00000000..ae3ef71e --- /dev/null +++ b/sdk/marketplace-sdk/overview.mdx @@ -0,0 +1,20 @@ +--- +title: "Marketplace SDK" +description: Marketplace SDK is a comprehensive toolkit that seamlessly integrates our Marketplaces into applications. +sidebarTitle: Overview +--- + +Why use the Marketplace SDK? It provides a seamless way to integrate Sequence's marketplace with minimal effort. Leverage its powerful hooks to retrieve marketplace data and execute essential actions such as listings, purchases, offers, and offer acceptance. + + + + Learn about the prerequisites and setup required to work with the Marketplace SDK. + + + Explore how to integrate your marketplace using our available hooks. + + + +## Next Steps + +Ready to integrate Marketplace SDK into your application? Check out our [Quickstart guide](/sdk/marketplace-sdk/getting-started). \ No newline at end of file diff --git a/sdk/web/hooks/useCheckoutModal.mdx b/sdk/web/hooks/useCheckoutModal.mdx index df884b4d..8539773a 100644 --- a/sdk/web/hooks/useCheckoutModal.mdx +++ b/sdk/web/hooks/useCheckoutModal.mdx @@ -24,7 +24,7 @@ function App() { const handleCheckout = () => { // NFT purchase settings const chainId = ChainId.POLYGON - const orderbookAddress = '0xB537a160472183f2150d42EB1c3DD6684A55f74c' + const orderbookAddress = '0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712' const nftQuantity = '1' const orderId = 'your-order-id' const tokenContractAddress = '0xabcdef...' // NFT contract address diff --git a/solutions/marketplaces/custom-marketplace/getting-started.mdx b/solutions/marketplaces/custom-marketplace/getting-started.mdx new file mode 100644 index 00000000..078d17a2 --- /dev/null +++ b/solutions/marketplaces/custom-marketplace/getting-started.mdx @@ -0,0 +1,28 @@ +--- +title: "Getting Started with Custom Marketplace" +description: Quickstart for Marketplace boilerplate powered by Sequence stack for web3 gaming. +sidebarTitle: Getting Started +--- + + + +Utilize the Sequence marketplace protocols to build a marketplace that enables [Shopify-like](https://www.shopify.com/) control over custom code development with Sequence source code. + +The [codebase that you can clone](https://github.com/0xsequence-demos/marketplace-boilerplate) from CLI and begin with immediately enables users to perform offers and listings for collectible items. Customize which network your collections are on using [this guide](/solutions/collectibles/contracts/deploy-an-item-collection) to deploy a collection using the [Sequence Builder](https://sequence.build). Add your collections to your marketplace by following [this guide](/solutions/marketplaces/white-label-marketplace/guide) from step 4, `Add a collectible to Marketplace`, onwards. + +## Quickstart: Marketplace Boilerplate + +To get started quickly with a one-liner command in your bash terminal, use the following command and follow the prompts to initialize the environment: + +```shell +npx sequence-cli marketplace create-marketplace-boilerplate +``` + +## Try a Demo + + +Check out our [demo](https://marketplace-boilerplate.pages.dev/) to see a boilerplate marketplace in action. + + +## Walkthrough +Lastly, take a look at our [end to end guide](/guides/custom-marketplace) to get you off the ground running with your own marketplace & learn about the infrastructure that powers Sequence. This guide leverages several components of the sequence stack such as our Marketplace APIs and Indexer - all the components needed for accelerating development time & building a scalable in-game or browser based marketplace. diff --git a/solutions/marketplaces/orderbook/overview.mdx b/solutions/marketplaces/custom-marketplace/overview.mdx similarity index 72% rename from solutions/marketplaces/orderbook/overview.mdx rename to solutions/marketplaces/custom-marketplace/overview.mdx index 1f9672ef..c2729ce5 100644 --- a/solutions/marketplaces/orderbook/overview.mdx +++ b/solutions/marketplaces/custom-marketplace/overview.mdx @@ -1,57 +1,57 @@ ---- - -title: "Sequence Market" -description: The Sequence Marketplace API service provides a seamless way to interact with Sequence marketplace protocols for building custom marketplaces efficiently. -sidebarTitle: Overview ---- - - - -The Sequence Marketplace API service offers a simple and convenient way to interact with Sequence marketplace protocols, to build a marketplace to accelerate your development time to market. The API is designed to be easy to use and to have all the features you need to build a comprehensive marketplace. - - - -Sequence Market contract is audited and can be found at https://github.com/0xsequence/marketplace-contracts - -The officially maintained contract address is `0xB537a160472183f2150d42EB1c3DD6684A55f74c`, and is available with the same address on all networks supported by the sequence stack. - - -## Overview -### Build anywhere, with any token - - - Launch and scale on one of our 14 EVM networks. - - - Our Marketplace Protocol integrates payment in ERC20s and can accommodate ERC721s or ERC1155s. - - - Build applications using web, mobile, Unity, and Unreal SDKs to enable reach across all modern hardware. - - - -### Getting started - - - Use or copy a demo boilerplate marketplace for a Dim Sum experience, or, for a game of your own. - - - End-to-end walkthrough of how to build a complete custom marketplace. - - - Query the on-chain orderbook to enable reading: user activities, top orders, or queries based on metadata attributes. - - - -### Sequence Market Protocol - - - All contracts are open source and have been audited by Quanstamp to enable world-class security in application development. - - - In an on-chain fashion, listings can be created to enable full decentralization with various features like time expiry and order cancellation with fine-tuned control. - - - Listings can be queried and then the ID passed on-chain to be accepted in order to transfer collectibles in just two transactions. - +--- +title: "Sequence Market" +description: Build and Customize Your Web3 Game Marketplace with Sequence Marketplace. +sidebarTitle: Overview +--- + +The Sequence Marketplace provides game builders with a boilerplate marketplace that comes with a solid foundation, allowing users to buy, list, make offers, and accept offers from the start. + + +Sequence Market contract is audited and can be found at https://github.com/0xsequence/marketplace-contracts + +The officially maintained contract address is `0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712`, and is available with the same address on all networks supported by the sequence stack. + + +## Overview + +### Getting started + + + A starter Marketplace boilerplate, powered by Sequence. + + + End-to-end walkthrough of how to build a complete custom marketplace. + + + A toolkit that seamlessly integrates our Marketplaces into applications. + + + +### Build anywhere, with any token + + + Launch and scale on one of our 14 EVM networks. + + + Our Marketplace Protocol integrates payment in ERC20s and can accommodate ERC721s or ERC1155s. + + + Build applications using web, mobile, Unity, and Unreal SDKs to enable reach across all modern hardware. + + + Query the on-chain orderbook to enable reading: user activities, top orders, or queries based on metadata attributes. + + + +### Sequence Market Protocol + + + All contracts are open source and have been audited by Quanstamp to enable world-class security in application development. + + + In an on-chain fashion, listings can be created to enable full decentralization with various features like time expiry and order cancellation with fine-tuned control. + + + Listings can be queried and then the ID passed on-chain to be accepted in order to transfer collectibles in just two transactions. + \ No newline at end of file diff --git a/solutions/marketplaces/orderbook/starter.mdx b/solutions/marketplaces/orderbook/starter.mdx deleted file mode 100644 index b54bb6ab..00000000 --- a/solutions/marketplaces/orderbook/starter.mdx +++ /dev/null @@ -1,56 +0,0 @@ ---- - -title: "Starter Marketplace" -description: Quickstart for Marketplace Orderbook for the Sequence infrastructure stack for web3 gaming. -sidebarTitle: Starter Template ---- - - - -Utilize the Sequence marketplace protocols to build a marketplace that enables [Shopify-like](https://www.shopify.com/) control over custom code development with Sequence source code. - -The [codebase that you can clone](/solutions/marketplaces/orderbook/starter#quickstart-marketplace-boilerplate) from CLI and begin with immediately enables users to perform offers and listings for collectible items. Customize which network your collections are on using [this guide](/solutions/collectibles/contracts/deploy-an-item-collection) to deploy a collection using the [Sequence Builder](https://sequence.build) - -## Try a Demo - - -Check out our [demo](https://marketplace-boilerplate.pages.dev/) to see a boilerplate marketplace in action. - - -## Quickstart: Marketplace Boilerplate - -To get started quickly with a one-liner command in your bash terminal, use the following command and follow the prompts to initialize the environment: - -```shell -npx sequence-cli marketplace create-marketplace-boilerplate -``` - -## Custom Marketplace - - -Get started quickly with an [example](https://github.com/0xsequence-demos/demo-aviator-custom-marketplace) leveraging our Marketplace API and on-chain contracts to use as a starting point for your own. - - -## Example API Call -Pull top orders for a specific collection: - -```bash class=wrap -curl --request POST \ ---url https://marketplace-api.sequence.app/arbitrum-sepolia/rpc/Marketplace/GetTopOrders \ ---header 'Content-Type: application/json' \ ---data '{ - "collectionAddress": "0x1693ffc74edbb50d6138517fe5cd64fd1c917709", - "currencyAddresses": [ - "0xa9c88358862211870db6f18bc9b3f6e4f8b3eae7" - ], - "orderbookContractAddress": "0xB537a160472183f2150d42EB1c3DD6684A55f74c", - "tokenIDs": ["0","1", "2", "3", "4", "5"], - "isListing": true, - "priceSort": "DESC" -}' -``` - -For more resources on leveraging the Sequence Market Protocol, check out the [in-depth documentation](/api-references/marketplace/examples/orderbook-transactions). - -## Walkthrough -Lastly, take a look at our [end to end guide](/guides/custom-marketplace) to get you off the ground running with your own marketplace & learn about the infrastructure that powers Sequence. This guide leverages several components of the sequence stack such as our Marketplace APIs and Indexer - all the components needed for accelerating development time & building a scalable in-game or browser based marketplace. diff --git a/solutions/marketplaces/white-label-marketplace/guide.mdx b/solutions/marketplaces/white-label-marketplace/guide.mdx index 9d7c570a..ae94427f 100644 --- a/solutions/marketplaces/white-label-marketplace/guide.mdx +++ b/solutions/marketplaces/white-label-marketplace/guide.mdx @@ -4,6 +4,20 @@ description: Follow this 8-step guide to learn how to use the Sequence Builder w sidebarTitle: Guide --- +## Watch a Marketplace be Launched in Minutes + + +Get started quickly at [Sequence Builder](https://sequence.build/) to launch your marketplace. + + +Watch as a Sequence team member curates both Skyweaver and Azuki into a custom marketplace by customizing themes and features in the Sequence Builder. + + + ## Launch a Marketplace @@ -40,23 +54,7 @@ Next, select the `+ Add contract` button, and copy and paste a contract address Repeat this step until you are happy with your marketplace curation. - - -For each Collectible, choose the type of marketplace with how you want your users to transact: Sequence Market, P2P, or, AMM. - -![choose marketplace type](/images/marketplace/builder_markeplace_setting_update_marketplace_type.png) - -#### Sequence Market -This marketplace type enables users to create custom listings and offers on a decentralized orderbook, available for anyone to partake in commerce, allowing for time expiry of orders, custom pricing, and ERC20 custom currency types, as well as other features. - -#### P2P -This marketplace type sources from various marketplaces on the internet, like Opensea, Blur, Magic Eden, LooksRare, SudoSwap, NFTX, etc. For this marketplace type, there is no custom currency. - -#### AMM -This marketplace type enables users to trade ERC1155 tokens using the Niftyswap protocol, which creates liquidity pools with any ERC20 token through an Automated Market Maker (AMM) mechanism. - - - + Add a currency to transact with on the marketplace, by first accessing settings for a collectible: @@ -68,8 +66,34 @@ Then add new custom currency: Input a currency token into the search field: -![add new custom currency](/images/marketplace/builder_add_new_custom_currency.png) +![add new custom currency](/images/marketplace/builder_add_new_custom_currency_2.png) + +Select the currency, then confirm and save it: + +![add new custom currency](/images/marketplace/builder_add_new_custom_currency_3.png) + + + +For each Collectible, choose the type of marketplace with how you want your users to transact: Sequence Market, P2P, or, AMM. + +![choose marketplace type](/images/marketplace/builder_markeplace_setting_update_marketplace_type.png) + +#### Sequence Market +This marketplace type enables users to create custom listings and offers on a decentralized orderbook, available for anyone to partake in commerce, allowing for time expiry of orders, custom pricing, and ERC20 custom currency types, as well as other features. + +#### Blur +Your NFTs will appear on https://blur.io/ + +#### OpenSea +Your NFTs will appear on https://opensea.io/en + +#### LooksRare +Your NFTs will appear on https://looksrare.org/ + +#### Magic Eden +Your NFTs will appear on https://magiceden.io/ + @@ -122,16 +146,6 @@ Update the header logo of the marketplace at the top of the screen. Update the favicon logo for the website to be displayed in the tab of the browser. -##### `Theme` - -Update the overall theme colors of the marketplace. - -##### `Corners` - -Adjust the corners of the collectible cards based on configuration. - -##### `Font` - Add a default or custom font diff --git a/solutions/marketplaces/white-label-marketplace/overview.mdx b/solutions/marketplaces/white-label-marketplace/overview.mdx index b77191e3..4cd474ff 100644 --- a/solutions/marketplaces/white-label-marketplace/overview.mdx +++ b/solutions/marketplaces/white-label-marketplace/overview.mdx @@ -1,10 +1,10 @@ ---- - -title: "Launch your White-label Marketplace" +--- + +title: "Launch your White-label Marketplace" description: Sequence Builder offers game builders a white-label marketplace that can be easily customized and integrated into their game experience without any coding experience needed. sidebarTitle: Overview ---- - +--- + Sequence Builder provides game builders with a white-label marketplace that can be launched in seconds. With Builder, you can customize your marketplace and integrate it directly into your game experience, all with no-coding experience necessary. [See below for a guide and walkthrough](/solutions/marketplaces/white-label-marketplace/overview#learn-to-launch-a-marketplace) @@ -27,7 +27,4 @@ You can also aggregate listings from major platforms like OpenSea or LooksRare, Follow a readable guide with screenshots that guide you through creating and customizing a white-label marketplace. - - Watch and learn how to launch a white-label marketplace in minutes. - \ No newline at end of file diff --git a/solutions/marketplaces/white-label-marketplace/video-walkthrough.mdx b/solutions/marketplaces/white-label-marketplace/video-walkthrough.mdx deleted file mode 100644 index 431d2380..00000000 --- a/solutions/marketplaces/white-label-marketplace/video-walkthrough.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Launching Your White-Label Marketplace with Sequence Builder -description: Watch a video walkthrough to learn how to use the Sequence Builder, which offers game builders a white-label marketplace that can be easily customized and integrated into their game experience without any coding experience needed. -sidebarTitle: Video Walkthrough ---- - -## Watch a Marketplace be Launched in Minutes - - -Get started quickly at [Sequence Builder](https://sequence.build/) to launch your marketplace. - - -Watch as a Sequence team member curates both Skyweaver and Azuki into a custom marketplace by customizing themes and features in the Sequence Builder. - - - \ No newline at end of file diff --git a/solutions/monetization-overview.mdx b/solutions/monetization-overview.mdx index 8311756a..3cf74021 100644 --- a/solutions/monetization-overview.mdx +++ b/solutions/monetization-overview.mdx @@ -49,7 +49,7 @@ Earn more revenue, create sustainable economic models, allow users to pay with n Fully audited, open source, and available on all chains Sequence supports. The Sequence Market Protocol is a fully scalable and efficient marketplace protocol utilized by organizations such as Ubisoft. - + Instead of starting from scratch, use our starter marketplace as a template to build your own custom marketplace. diff --git a/solutions/overview.mdx b/solutions/overview.mdx index 4e068705..758494c4 100644 --- a/solutions/overview.mdx +++ b/solutions/overview.mdx @@ -42,7 +42,7 @@ To learn more about how to leverage the powerful features that Sequence has to o Launch an in-game collectibles marketplace within minutes. - + Integrate custom in-game marketplaces with our APIs.