Skip to main content

List ERC721 Assets with Scripts Template

Learn how to list ERC721 assets for sale on the Myria NFT Marketplace.

Prerequisites

  • Mint at least one ERC721 asset as described here

Implementation

info

You can find full React implementation for ERC721 listing in the Myria React Samples repository.

1. Set up a new React project

Listing ERC721 tokens requires client-side interaction with the MetaMask wallet. It's recommended to use React to implement such a behavior.

You can create a React app via Create React App. Note, the below project relies on Web3.js library and needs custom configuration.

2. Create a myria-client.ts helper

It's recommended to have a separate .ts file for quick access to the MyriaClient.

For more details, use the Myria Core SDK overview.

3. Retrieve the assets

First, get a list of available assets in your wallet. You can use the getAssetByStarkKey() function of the OnchainAssetManager.

The getMyriaErc721ByStarkKey() function has the following parameters:

  • client: MyriaClient instance
  • starkKey: Stark Key of your wallet
import { MyriaClient, OnchainAssetManager } from "myria-core-sdk";

export async function getMyriaErc721ByStarkKey(client: MyriaClient, starkKey: string) {
const assetManager: OnchainAssetManager = new OnchainAssetManager(client);
let assets: any = [];

return await assetManager.getAssetByStarkKey(starkKey).then((data: any) => {
assets = data.data.items
});
}

4. List assets

Listing an ERC721 asset represents a SELL order of the `MINTABLE_ERC721 token. You can list your asset using the *OrderManager`*.

The listErc721() function has the following parameters:

  • client: MyriaClient instance
  • account: public key of your wallet
  • starkKey: Stark Key of your wallet
  • asset: an asset object returned from getMyriaErc721ByStarkKey()
info

You can specify the listing price in ETH by changing the price variable.

import { CreateOrderEntity, FeeType, ModuleFactory, MyriaClient, SignableOrderInput, TokenType } from "myria-core-sdk";

export async function listErc721(client: MyriaClient, account: string, starkKey: string, assetId: string) {
const moduleFactory = new ModuleFactory(client);
const orderManager = moduleFactory.getOrderManager();
const assetManager = moduleFactory.getAssetOnchainManager();
const asset = (await assetManager.getAssetById(assetId)).data;
const price = "0.01";

const signableFee =
(asset.fee && asset?.fee?.length) > 0
? [
{
address: asset?.fee[0].address,
percentage: asset?.fee[0].percentage,
feeType: FeeType.ROYALTY
}
]
: undefined;

const payload: SignableOrderInput = {
orderType: "SELL",
ethAddress: account,
assetRefId: parseInt(assetId, 10),
starkKey: starkKey,
tokenSell: {
type: TokenType.MINTABLE_ERC721,
data: {
tokenId: asset?.tokenId,
tokenAddress: asset?.tokenAddress
}
},
amountSell: "1",
tokenBuy: {
type: TokenType.ETH,
data: {
quantum: "10000000000"
}
},
amountBuy: price + "",
includeFees: signableFee ? true : false,
fees: signableFee
};
const signature = await orderManager?.signableOrder(payload);
const feeSign = signature?.feeInfo
? {
feeLimit: signature?.feeInfo?.feeLimit,
feeToken: signature?.feeInfo?.assetId,
feeVaultId: signature?.feeInfo?.sourceVaultId
}
: undefined;

const feeData = signature?.feeInfo
? [
{
feeType: FeeType.ROYALTY,
percentage: asset?.fee[0].percentage,
address: account
}
]
: undefined;

if (signature) {
const paramCreateOrder: CreateOrderEntity = {
assetRefId: parseInt(assetId, 10),
orderType: "SELL",
feeSign: feeSign,
includeFees: true,
amountSell: signature.amountSell,
amountBuy: signature.amountBuy,
sellerStarkKey: starkKey,
vaultIdSell: signature.vaultIdSell,
vaultIdBuy: signature.vaultIdBuy,
sellerAddress: account,
assetIdBuy: signature.assetIdBuy,
assetIdSell: signature.assetIdSell,
fees: feeData
};
return await orderManager?.createOrder(paramCreateOrder);
}
}

Listing Multiple Assets

The best way to list a large number of NFTs is to run a script, making multiple calls. This does not incur any fees.

A basic sample script is available here.