Demo: Create a wrapper that renders NFTs

[rihp]

Smart-Contrace NFT Rendering (W/ Polywrap)

Idea inspired by zkachette & code snippets below written by dOrgJelli

Example Demo

Use the "blockies" library or something new/similar to generate a unique render (image, 3d, sound, video, etc) that is defined by the NFT's unique-id.

How could it work:

Use an NFT Contract

For example, use Artblocks Curated Contract on mainnet: 0xa7d8d9ef8d8ce8992df33d8b8cf4aebabd5bd270

Alternatively, deploy your own collection on Polygon or a testnet:

• Collection should have 1,000+ tokens minted
• Each NFT is an ERC721 with own unique id
• Potentially, have it so each NFT has a "renderer" function defined (more on this below)

NFT Renderer

This is a simple program that is built using "Polywrap". Polywrap allows you to download & run custom code on-the-fly, regardless of what application you're using.

Polywrap Building

#import { Query } into Ethereum from "ens/ethereum.polywrap.io"
#import { Content } into Nft from "ens/nft-renderer.jpgmafia.io"

type Query {
  nftRender(
    contract: String!
    id: String!
  ): Nft_Content!
}

import {
    Ethereum_Query,
    Nft_Content,
    Input_nftRender
} from "./generated";
import { generateNoiseJpg } from "noise-generator";

export function nftRender(input: Input_nftRender): Nft_Content {
    
    // Get some custom properties
    const generation = Ethereum_Query.callContractView({
        address: input.contract,
        method: "getGeneration",
        args: {
            id: input.id
        }
    });
    
    const rawBytes = generateNoiseJpg(
      hash(input.contract + input.id + generation)
    );
    
    return {
      bytes: rawBytes,
      type: "jpg" // type-safe, only accepts valid values!
    }   
}

Publishing (IPFS + ETH)!

1. Build your wrapper

build/
  query.wasm
  schema.graphql
  polywrap.json
  etc

2. Deploy to IPFS
   polywrap deploy => wrap://ipfs/QmHASH
3. Deploy the NFT contract
   hardhat deploy ./src/NtfWithCustomRenderer.sol
4. Set the renderer in the NFT contract
   contract.setRenderer("wrap://ipfs/QmHASH")

Publishing (ETH-Only) !

1. Build your wrapper

build/
  query.wasm
  schema.graphql
  polywrap.json
  etc

3. Deploy the NFT contract
   hardhat deploy ./src/NtfWithCustomRenderer.sol
4. Set the renderer in the NFT contract

contract.setRendererBytes(
  readDirectoryBytes("./build")
);

Rendering!

Inside your app:

const bytes = await client.invoke({
    // ETH only
    uri: "eth/0xNftWithCustomRenderer/getRenderer",
    // IPFS + ETH
    uri: "ipfs/QmHASH",
    module: "query",
    method: "nftRender",
    input: {
        contract: "0xCONTRACT",
        id: users_id
    }
});

browser.renderJpg(bytes);