Rarible protocol ethereum sdk react example

In this example we're using Metamask wallet to interact with ethereum blockchain.

What we have done in this example:

• Configure RaribleSDK
• Create Lazy mint NFT item
• Create sell order
• Purchase (buy item) an order
• Get your own NFT from your current wallet

Lets start new react ts project and add dependencies

npx create-react-app protocol-example --template typescript
yarn add @rarible/protocol-ethereum-sdk@0.1.4 @ethereumjs/common@^2.4.0 @ethereumjs/tx@^3.3.0 @rarible/action@0.2.5 @rarible/protocol-api-client@0.1.4 ethereumjs-util@^7.1.0 tslib@^2.3.1 web3@1.2.11 web3-eth-contract@1.2.11 web3-utils@1.2.11 @rarible/types@0.1.2

create-react-app - creates blank react app project. Learn more about command options on their github CRA repo

Configuring RaribleSDK

For this example we use simple non styled .tsx template and local state management. full example of app you can find in src/ folder in root of repository in App.tsx and Dashboard.tsx components.

Let's create a new function in the App.tsx file named handleInit. Which serves to check the presence of the Metamask provider in the browser and create an instance of the SDK.

functionhandleInit(){const{ ethereum }=windowasany;if(ethereum&&ethereum.isMetaMask){console.log('Ethereum successfully detected!');// set thereum provider into state to connet to wallet in next stepssetProvider(ethereum)// add listener on accountsChanged event to render actual addressethereum.on('accountsChanged',function(accounts: string[]){setAccounts(accounts)});// configure web3constweb3=newWeb3(ethereum)// configure raribleSdkconstraribleSdk=createRaribleSdk(newWeb3Ethereum({ web3 }),network)// set created Rarible SDK into statesetSdk(raribleSdk)// set current account if already connectedweb3.eth.getAccounts().then(e=>{setAccounts(e)})}else{console.log('Please install MetaMask!');}}

Now we will create a hook that will be launched when the App component is mounted, and add to it a simple check for the presence of the provider object in the browser and run the previously created handleInit function if it exists.

useEffect(()=>{if((windowasany).ethereum){handleInit();}else{window.addEventListener('ethereum#initialized',handleInit,{once: true,});setTimeout(handleInit,3000);}},[])

Mint NFT items

We can mint ERC721 or ERC1155 nft items through Rarible SDK, and both of it can be minted "on chain" of "off chain"( lazy).

The code below shows how you can mint nft token using SDK. Full component code example located in src/Dashboard.tsx

typeMintForm={id: string,type: NftCollection_Type,isLazySupported: boolean,isLazy: boolean,loading: boolean}constmintFormInitial: MintForm={id: "0x6ede7f3c26975aad32a475e1021d8f6f39c89d82",// default collection on "rinkeby" that supports lazy mintingtype: "ERC721",isLazy: true,isLazySupported: true,loading: false,}...constDashboard: React.FC<DashboardProps>=({ provider, sdk, accounts })=>{const[collection,setCollection]=useState<MintForm>(mintFormInitial)...
...
constmint=async()=>{lettokenId: stringconstprepareCollection={id: toAddress(collection.id),type: collection.type,supportsLazyMint: collection.isLazySupported,}if(isLazyErc721Collection(prepareCollection)){tokenId=awaitsdk.nft.mint({collection: prepareCollection,uri: "/ipfs/QmWLsBu6nS4ovaHbGAXprD1qEssJu4r5taQfB74sCG51tp",creators: [{account: toAddress(accounts[0]),value: 10000}],royalties: [],lazy: collection.isLazy,})}elseif(isLazyErc1155Collection(prepareCollection)){tokenId=awaitsdk.nft.mint({collection: prepareCollection,uri: "/ipfs/QmWLsBu6nS4ovaHbGAXprD1qEssJu4r5taQfB74sCG51tp",creators: [{account: toAddress(accounts[0]),value: 10000}],royalties: [],supply: toBigNumber('1'),lazy: collection.isLazy,})}elseif(isLegacyErc721Collection(prepareCollection)){tokenId=awaitsdk.nft.mint({collection: prepareCollection,uri: "/ipfs/QmWLsBu6nS4ovaHbGAXprD1qEssJu4r5taQfB74sCG51tp",royalties: [],})}elseif(isLegacyErc1155Collection(prepareCollection)){tokenId=awaitsdk.nft.mint({collection: prepareCollection,uri: "/ipfs/QmWLsBu6nS4ovaHbGAXprD1qEssJu4r5taQfB74sCG51tp",royalties: [],supply: 1,})}else{tokenId=""console.log("Wrong collection")}if(tokenId){/** * Get minted nft through SDK */if(collection.isLazySupported&&!collection.isLazy){awaitretry(30,async()=>{// wait when indexer aggregate an onChain nftawaitgetTokenById(tokenId)},)}else{awaitgetTokenById(tokenId)}}}

Create sell order

Function below creates a order for sale.

constcreateSellOrder=async()=>{if(createOrderForm.contract&&createOrderForm.tokenId&&createOrderForm.price){// Create an orderconstresultOrder=awaitsdk?.order.sell({makeAssetType: {assetClass: "ERC721",contract: toAddress(createOrderForm.contract),tokenId: toBigNumber(createOrderForm.tokenId),},// asset type, must includes contract address and tokenIdamount: 1,// amount to sell, in our case for ERC721 always will be 1maker: toAddress(accounts[0]),// who sell an itemoriginFees: [],// fees descriptionpayouts: [],// payoutsprice: toBigNumber(createOrderForm.price),takeAssetType: {assetClass: "ETH"},// for what currency}).then(a=>a.runAll())if(resultOrder){setOrder(resultOrder)setPurchaseOrderForm({ ...purchaseOrderForm,hash: resultOrder.hash})}}}

Purchase (buy item) an order

consthandlePurchaseOrder=async()=>{if(order){awaitsdk?.order.fill(order,{amount: parseInt(purchaseOrderForm.amount)}).then(a=>a.runAll())}}

sdk.order.fill takes the order object (which we got in the previous step) and the amount to buy as arguments, and returns hash of transaction

Get your own NFT from your current wallet

consthandleGetMyNfts=async()=>{constitems=awaitsdk?.apis.nftItem.getNftItemsByOwner({owner: accounts[0]})setOwnedItems(items?.items)}