Orderbook Transactions
This guide covers the creation of a custom marketplace using tools from the Sequence stack. It includes steps for minting tokens, wallet authentication, blockchain queries, multi-wallet types, request creation, order accepting, and optional integration of an embedded wallet.
In this guide we will go through the process of creating a custom marketplace from a few simple tools from the Sequence stack.
The tools will enable you to perform:
- Minting: Minting of tokens to your wallet from the Sequence Builder
- Wallet Authentication: Use of Sequence Kit to authenticate a user
- Blockchain Queries: Querying of token balances using the Indexer
- Multi-wallet Types: Allow users to either use a Sequence Wallet or an EOA
- Request Creation: Creation of sell listing requests on the Sequence Market Protocol
- Order Accepting: Accepting of top orders from the Marketplace
- (Optional) Enable Embedded Wallet: Add a more seamless UX experience with no-confirmation transactions
See an example simplified marketplace dapp that enables users to mint collectibles, sell the collectibles with the Sequence Marketplace Protocol, and make purchases with USDC on base-sepolia
by getting a top order from the Marketplace.
The code can be found here
1. Minting
The first step is to create a collectible from the Sequence Builder and mint a few tokens, which can be accomplished with this guide and to use the tokenId
you minted in the following steps to query and fulfill orders.
2. Wallet Authentication
For your project, you’ll need a way to authenticate your user with a wallet.
Your choice from the Sequence stack is to use either an Embedded Wallet for headless and web2-like UX, or a Ecosystem Wallet with Sequence Kit to reach more types of wallets.
For this guide we’ll use an Universal Sequence Wallet
with Sequence Kit
connector (with an option for an Embedded Wallet
) which can authenticate users using Google or Apple auth, in addition to user brought wallets like Coinbase or Metamask.
Install Packages
Either you can create a vanilla js/html/css project from a template like this for a templated setup, or we will walk you through how to use react from scratch here.
Start by creating a project in a folder of your name choosing:
Then, begin by installing the required packages in the <project_name> folder
Then in src
next to index.tsx
in the folder, create a config.ts
file with the following contents:
Be sure to include a .env
file in the root of your project to include client
secrets
Next, import the config
to be consumed by the WagmiProvider
in the index.tsx
And finally, add a button in the App.tsx
to make the Sequence Kit modal appear
Great! You should have an application that can authorize a user and return a wallet address.
You can now test it with:
3. Blockchain Queries
Once you have one or a few collectibles minted, you can query the data from the contract address from your deployment, which can be found here:
You can query data using the indexer, using this code where an account address and contract address (retrieved from the Sequence Builder deployed contract) are inputted into the indexer api
This will be important when you’re determining a tokenID
to create a request on the marketplace, for this demo we’ll assume you’re dealing with a single tokenID
Where the response of the indexer call, yields the follow data:
4. Multi-wallet Types
Due to the fact that we’re using Sequence Kit
for this example that allows you to use a Sequence wallet, in addition to your own brought EOA wallet
, sending transactions to the blockchain will differ due to the fact that with a Sequence wallet
, you can send batch transactions to optimize gas costs, whereas with wagmi
using an EOA you can only send 1 transaction at a time.
To accomplish this, we take a few steps to create a local state variable that checks for the authorized wallet
In the Sequence Market protocol, when you create a listing, it’s referred to
as a request
, and when you accept a request it’s called an order
.
5. Request Creation
For this example, we’ll be using Arbitrum Sepolia USDC
from the community faucet
Head over there to first get some tokens, so that you can make listing with your request
Then, in order to create a request for the orderbook, we’ll need to first make sure we enable the marketplace orderbook contract with approval to transfer your tokens
First, we check that the marketplace is approved for the contract, with some logic
Next, we’ll need to craft the transaction with the correct ABI to generate the expected calldata for the various paths of: not being approved versus approved, and if it is a sequence wallet or not.
Finally, for the path where the transaction does not take place from a sequence wallet and is not approved, we must submit a transaction once there is a transaction receipt from the useSendTransaction
hook using a mutex to confirm which transaction the hash came from. This is done in a react useEffect
function.
In computer programming, a mutual exclusion (mutex) is a program object that prevents multiple threads from accessing the same shared resource simultaneously.
Great you’re done creating requests to the Sequence Market protocol, now you can implement a button and try the flow.
6. Order Accepting
Now that we have an order on the marketplace, we need to do a few things:
Query the Marketplace
: query the marketplace for anorderId
that you want to accept an order forCurrency Balance
: check for currency balance using the indexerToken Approval
: check for currency approval for the marketplace to transfer tokens
Query the Marketplace
Lets query the marketplace orderbook to get the pricePerToken
and orderId
the order is for
Currency Balance
We’ll use the indexer to query the balance and see if the user has enough token to pay for the order. This can be accomplished with the following code:
You’ll need to make sure when you perform an equality check on the token contract address, that it is inputted as all lowercase
Token Approval
Next, we’ll check for token approval for the Marketplace to be able to transfer the currency token
Finally, we’ll complete the needed logic with actually sending a transaction to the blockchain
We begin with the same flow as before, accounting for sending multi-batch transaction if it’s a sequence wallet and not approved, or, if the Marketplace is approved to spend your tokens, only submitting a single transaction
Then in the flow for not being a sequence wallet and requiring approval, we’ll include another useEffect
with the mutex check implemented like before
Great, everything is complete if you add the function click handler attached to a button
7. (Optional) Integrate Embedded Wallet into Sequence Kit
In order to make your sequence kit connector as Embedded Wallet enabled, we’ll need to install a few package version and update our config.ts
we used at the beginning of the guide
The Embedded Wallet feature allows no-confirmation transactions, which can create a smoother UX
The last step, is to make sure to update our team with the Google and Apple authorized URLs (e.g. http://localhost:3000) to call the Embeded Wallet login flow from