2-03.md

Step 3: Add Metadata

Now that we've seen how a dummy endpoint can be sprung up so easily, let's make one that's a little more useful. Create a new file in your lambda directory called metadata.js and fill it with the same hello world code from before. (Or just duplicate the helloworld.js file)

cp ./lambda/helloworld.js ./lambda/metadata.js

Now we can take a moment to actually read what's going on in our helloworld.js file

exports.handler = function(event, context, callback) {
  callback(null, {
    statusCode: 200,
    body: "Hello, World"
  });
};

The handler function takes 3 parameters, event which has to do with the event that triggers the function, context which tells you about the context of the event, and callback which can be called to end the request and fill it with content and header information. We'll be handling requests for our token metadata that will follow the format we built into our Metadata.sol contract. That means it will be a GET request with the token ID built into the route of the URL like https://domain.com/metadata/{tokenId}. In order to pass GET parameters typically we would use a format like: https://domain.com/metadata?tokenId={tokenId}. We could define our tokenURI to follow a format like that, but that's pretty ugly. Let's work with that format for now and make it look pretty later. If we access our domain like that let's try to log out the event to see if we can find the tokenId parameter being passed. Of course this is easier to do in our local setup so let's follow that URL like https://localhost:9000/metadata?tokenId=666

And add a console.log to our handler function so we can read what's going on in those parameters:

exports.handler = function(event, context, callback) {
  console.log("EVENT", event)
  console.log("CONTEXT", context)
  callback(null, {
    statusCode: 200,
    body: "Hello, World"
  });
};

Now restart your netlify-lambda utility (if it's still running)

npx netlify-lambda serve lambda

and visit the URL. Now if you check the console that was running the server you'll see the contents of event and context

$ npx netlify-lambda serve lambda
netlify-lambda: Starting server
Lambda server is listening on 9000
Hash: 6507b49ec95292f0e68a
Version: webpack 4.27.1
Time: 665ms
Built at: 2018-12-13 19:18:56
        Asset      Size  Chunks             Chunk Names
helloworld.js  1.03 KiB       0  [emitted]  helloworld
  metadata.js  1.08 KiB       1  [emitted]  metadata
Entrypoint helloworld = helloworld.js
Entrypoint metadata = metadata.js
[0] ./helloworld.js 129 bytes {0} [built]
[1] ./metadata.js 195 bytes {1} [built]
Request from ::1: GET /metadata?tokenId=666
EVENT { path: '/metadata',
  httpMethod: 'GET',
  queryStringParameters: { tokenId: '666' },
  headers:
   { host: 'localhost:9000',
     connection: 'keep-alive',
     'cache-control': 'max-age=0',
     'upgrade-insecure-requests': '1',
     'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36',
     accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
     'accept-encoding': 'gzip, deflate, br',
     'accept-language': 'en-US,en;q=0.9' },
  body: 'W29iamVjdCBPYmplY3Rd',
  isBase64Encoded: true }
CONTEXT {}
Response with status 200 in 8 ms.

There you can see it's inside of the event parameter under queryStringParameters.

To be compliant with EIP-721 and EIP-1047: Token Metadata JSON Schema should follow the format like so:

{
    "title": "Asset Metadata",
    "type": "object",
    "properties": {
        "name": {
            "type": "string",
            "description": "Identifies the asset to which this token represents",
        },
        "description": {
            "type": "string",
            "description": "Describes the asset to which this token represents",
        },
        "image": {
            "type": "string",
            "description": "A URI pointing to a resource with mime type image/* representing the asset to which this token represents. Consider making any images at a width between 320 and 1080 pixels and aspect ratio between 1.91:1 and 4:5 inclusive.",
        }
    }
}

Lets just try returning this, except replacing the name with the tokenId. And returning an image that can be autogenerated, like https://dummyimage.com/600x400/000000/fff/&text=test%20image

const tokenId = event.queryStringParameters.tokenId
const metadata =  {
    "name": "Token #" + tokenId,
    "description": "Describes the asset to which this token represents",
    "image": "https://dummyimage.com/600x400/000000/fff/&text=token%20" + tokenId,
}

Then return it in our callback function, making sure to stringify the JSON object before returning it

callback(null, {
    statusCode: 200,
    body: JSON.stringify(metadata)
});

Now when we check our endpoint (and if you have a nice JSON prettier chrome extension) it will look like this:

Commit your code and push to git / netlify

git add . && git commit -m 'metadata endpoint' && git push

Go to step 4