Passing Blockchain Data into OpenSea Token Attributes

Passing Blockchain Data into OpenSea Token Attributes

By Dappcentral | dappdevelopment | 7 Oct 2019


When developing NFT's for OpenSea, the developer can specify a getter function in the token contract which supplies the api endpoint for the token's attributes. The OpenSea documentation outline this process clearly: https://docs.opensea.io/docs/2-adding-metadata

For our recent dapp, People's Casino, each of our tokens are also a stand alone gambling games. Each of these games has a separate "kitty" or "prize pool" that the token owner can top up. We thought it would be an exciting feature if we could get this information into OpenSea as an attribute.

Since this "prize pool" data is in the dapp contract, we would need to query the blockchain to get the most recent value. To query the blockchain, we would need some kind of wallet / Ethereum node. This is where Infura comes in. Infura allows you to create an an account, and have your code utilize it to query the blockchain.

First we logged in to Infura, and created a new project for our token. Click on VIEW PROJECT, and you will see a section with your KEYS. This is the information you will use in your code to access Infura, and get the data you need.

Next we need to go our API code. In our case, we use Netlify's Javascript functions. These are an abstraction of AWS Lambdas. First we need to install the Javascript library "truffle-hdwallet-provider".

npm i truffle-hdwallet-provider

Then in our code we need these 3 imports:

import Web3 from "web3"
import HDWalletProvider from "truffle-hdwallet-provider"
import ContractJson from "./../contracts/PeoplesCasino.json"

Web3 and the HDWalletProvider are our Ethereum node libraries, and the ContractJson is the file which holds the ABI for our contract. (This was created when we compiled our contract with Truffle.   Then we get the information we need in this function:

const getCasinoHoldings = tokenId => {
  // No need to hide, this is a throwaway address
  const MNEMONIC = "oil disagree hunt blush insane........."
  const INFURA_KEY = "18959c............"
  const provider = new HDWalletProvider(
    MNEMONIC,
    `https://mainnet.infura.io/v3/${INFURA_KEY}`
  )
  const web3Instance = new Web3(provider)
  const contract = new web3Instance.eth.Contract(
    ContractJson.abi,
    CONTRACT_ADDRESSES[1],
    { gasLimit: "1000000" }
  )
  return contract.methods
    .getHouseReserve(tokenId)
    .call()
    .then(amount => {
      const ethAmount = web3Instance.utils.fromWei(String(amount), "ether")
      return Math.floor(ethAmount * 100000) / 100000
    })
}

The mnemonic is the seed for a wallet. This was created just for this project, and since we didn't need it to hold any ETH (our contract call was not payable), we had no fear hard coding it in our project.
The function in our contract to get our value is called "getHouseReserve" and after getting the value, we round it down to 5 dp.

Now after we commit the code, we can force OpenSea to reload the data:   https://api.opensea.io/api/v1/asset/<CONTRACT_ADDRESS>/1/?force_update=true

And now we reload our token on OpenSea, and have a look:   351665157-8efb86ec63fe893e2ef6883f4415ec10e00b3b797a36cd51f472907958849ea6.jpeg   Since this is a value which changes every time a token owner deposits / withdrawals money from their casino, or a player completes a bet with a casino, we added a fetch call to our code that calls the force on Open Sea every time.   And there you have it. We now have live data from the blockchain, in our Open Sea attributes. This now makes it easier for a player to see which casinos are currently active and ready to be played.


Dappcentral
Dappcentral

Dapp developer


dappdevelopment
dappdevelopment

Development in the cryptosphere.

Send a $0.01 microtip in crypto to the author, and earn yourself as you read!

20% to author / 80% to me.
We pay the tips from our rewards pool.