Building with ZORA API

Early experiment with ZORA API to get info on a specific NFT and display it in a basic UI

Getting Sales Data

Let’s start by figuring out what data we’ll need if we want to display recent Zorbs sales on a scatter chart. At a bare minimum, we’ll need two pieces of data in order to plot a point: the timestamp for the sale, and the sale price.

requesting the bare minimum
  • Token ID
  • Token Metadata
Zora API query for the 500 most recent Zorb sales
output for our Zora API query

SVG SEGUE

Some NFTs store their data completely on-chain, making use of the Scalable Vector Graphics (SVG) file format to achieve a small data footprint while still packing in a lot of potential when it comes to the image being stored. I covered this topic in detail back in October 2021 if you’re interested in further reading on the subject. If you’re familiar with the topic already and just want to get on with the tutorial, keep reading for the speed run version.

Deciphering the Data

Ok, so how do we get from that blob of image data to individual Zorb colors?

decoding base64 image data
a Zorb reconstituted from on-chain metadata
hsl color visualizer
  1. We know how to ask the Zora API for recent Zorbs sales data.
  2. We know how to decode the SVG image data for any Zorb.
  3. We know how determine the HSL values that correspond to a Zorb’s color.

Displaying the Data

If you’re not opposed to working with third-party libraries, canvasJS offers a number of highly customizable options, and will work perfectly for the purposes of this tutorial. I ended up going for the Multi Series Scatter/Point Chart, as it allows marker customization on a per-entry basis, perfect for the multitude of Zorb colors we’ll need to handle. Even better, it can handle HSL values right out of the box, so you don’t have to worry about converting the color to RGB or hex.

we’ll have some more data conversions to do before we’re through
basic canvasJS template to display recent Zorb sales
one is the zorbliest number

Bringing it all together

I’ve implemented this part in Objective-C, but you can use whatever programming language you’re most comfortable with — plenty of libraries and frameworks exist allowing you to call GraphQL directly from JavaScript.

obj-c code to grab the latest Zorb sales data
obj-c code to programmatically create a canvasJS template and populate it with Zorb sales data
a price discrepancy on OpenSea compared with what’s on-chain

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store