ISCN-AR Widget Reference

ISCN AR web widget API Reference

Base URL

Testnet: https://testnet.like.co/in/widget/iscn-ar

Production: https://like.co/in/widget/iscn-ar

Since postMessage() would be needed for operating this widget, caller is expected to use window.open on the above urls.

Input Params

language	Force UI display locale, options are zh, cn, en
redirect_uri	Act as a whitelist host for postMessage, actual redirect is not implemented, please use with opener below
opener	default 0. If set, would fire a postMessage back to window.opener with redirect_uri host as target, then close current window
mint	set to 1 to skip the success window after ISCN registration and skip to Writing NFT minting screen directly
iscn_id	(optional) For updating existing ISCN record, the encoded ISCN ID for update. Note that the record would be completely overwritten with the new metadata

Query strings are also passed into NFT Portal if user choose to mint NFT after ISCN is registered. Please refer to NFT Portal Reference for the supported query string.

PostMessage input format

Mark widget as ready

Send this action to switch widget to ready to accept mode.

{ action: 'INIT_WIDGET' }

Key	Value
action	INIT_WIDGET

Send ISCN Data

Submit ISCN data to widget

{
    action: 'SUBMIT_ISCN_DATA',
    data: {
      files: [
        {
          filename: 'index.html',
          mimeType: 'text/html',
          data: 'PCFET0NUWVBFIGh0bWw+PGh0bWw+Ci...',
        },
        {
          filename: 'wp-content/uploads/image.png',
          mimeType: 'image/png',
          data: 'iVBORw0KGgoAAAANSUhEUgAABAAAAA...',
        },
      ],
      metadata: {
        name: 'LikeCoin Update | Launching $LIKE Airdrop and Civic Likers Web3',
        tags: ['Airdrop', 'Civic Liker', 'Depub', 'LikeCoin', 'Progress Update'],
        author: 'likecoin',
        description: 'Launch of LikeCoin Airdrop The long-awaited 50 million...',
      }
    },
  }

Key	Description
action	SUBMIT_ISCN_DATA
data	ISCN Data for submission
data.files	Array of files to be uploaded to Arweave, must contain an index.html if more than one file. Please refer to the tables below for file formats
data.metadata	ISCN metadata. Please refer to the tables below for metadata formats

Supported field for ISCN metadata

Metadata keys	Required	Description	Sample
name	Required	Name for the ISCN content	"Computing recursive function with matrix multiplication"
description	Recommended	Description for the ISCN content	"An article on computing recursive function with matrix multiplication."
tags	Optional	Tags for the ISCN content	["matrix", "recursion"]
author	Recommended	Name of the author	"Chung Wu"
authorDescription	Optional	Description of the author	"Developer"
url	Recommended	URL of the content	​"https://nnkken.github.io/post/recursive-relation/"
stakeholders	Optional	Stakeholder list as defined in ISCN specification. If author or publisher is defined, they will be automatically appended into stakeholders by the widget	{ "rewardProportion": 5, "contributionType": "http://schema.org/citation", "footprint": "https://en.wikipedia.org/wiki/Fibonacci_number", "description": "The blog post referred the matrix form of computing Fibonacci numbers." }
fingerprints	Optional	Fingerprint of the content, e.g. SHA hash, IPFS hash and Arweave ID. If files are defined, resulting Arweave ID and IPFS hash will be automatically appended into fingerprints	["hash://sha256/9564b85669d5e96ac969dd0161b8475bbced9e5999c6ec598da718a3045d6f2e"]
publisher	Optional	One of matters, depub , an arbitrary string representing ID of a publisher, or a stakeholder object . Publisher object allow platforms to add itself into stakeholders and define rewardProportion	{"entity":{"description":"Matters is a decentralized, cryptocurrency driven content creation and discussion platform.","@id":"https://matters.news/","name":"Matters"},"rewardProportion":0}
license	Optional	URL of the license of the ISCN content	"https://creativecommons.org/licenses/by-sa/4.0/"
recordNotes	Optional	Arbitrary string that will be recorded in ISCN as note	"This record is created by ISCN widget"
memo	Optional	Arbitrary string that will be recorded in the create ISCN Transaction as memo	"This tx is sent by ISCN widget"

Required fields for data.files:

File Keys	Description
filename	Name of the file, can be a full path containing directory
mimetype	mime type of the file, needed for proper display in IPFS/Arweave gateways
data	Base64 encoded file data

File data should be encoded in base64, with proper mimeType defined. filename can either be the actual filename, or include a directory path as prefix.

If multiple files are to be uploaded, an index.html must be included which would be shown as the default page when the files are accessed through Arweave or IPFS.

Emit event format

ISCN_WIDGET_READY

Fired when widget is ready to receive message

{ 
  action: 'ISCN_WIDGET_READY',
}

ARWEAVE_SUBMITTED

Fired when files are uploaded to Arweave and IPFS

{ 
  action: 'ARWEAVE_SUBMITTED',
  data: {
    ipfsHash,
    arweaveId,
  }
}

ISCN_SUBMITTED

Fired when content is submitted to ISCN

{ 
  action: 'ISCN_SUBMITTED',
  data: {
    tx_hash,
    iscnId,
  }
}

Example Code

const w = window.open('https://like.co/in/widget/iscn-ar?opener=1&redirect_uri=https%3A%2F%2Flike.community');

const ISCN_WIDGET_ORIGIN = 'https://like.co';

function onPostMessage(event) {
  if (event.origin !== ISCN_WIDGET_ORIGIN) {
    return;
  }
  try {
    const { action, data } = JSON.parse(event.data);
    if (action === 'ISCN_WIDGET_READY') {
      w.postMessage(JSON.stringify({ action: 'INIT_WIDGET' }), ISCN_WIDGET_ORIGIN);
      sendISCNPayload();
    } else if (action === 'ARWEAVE_SUBMITTED') {
      const {
        ipfsHash, arweaveId,
      } = data;
      console.log(ipfsHash, arweaveId);
    } else if (action === 'ISCN_SUBMITTED') {
      const {
        tx_hash: txHash, iscnId,
      } = data;
      console.log(txHash, iscnId);
    } else {
      console.log(`Unknown event: ${action}`);
    }
  } catch (err) {
    console.error(err);
  }
}
window.addEventListener('message', onPostMessage, false);

function sendISCNPayload() {
  w.postMessage(JSON.stringify({
    action: 'SUBMIT_ISCN_DATA',
    data: {
      files: [
        {
          filename: 'index.html',
          mimeType: 'text/html',
          data: 'PCFET0NUWVBFIGh0bWw+PGh0bWw+Ci...',
          // bytes encoded in base64
        },
        {
          filename: 'wp-content/uploads/image.png',
          mimeType: 'image/png',
          data: 'iVBORw0KGgoAAAANSUhEUgAABAAAAA...',
        },
      ],
      metadata: {
        name: 'LikeCoin Update | Launching $LIKE Airdrop and Civic Likers Web3',
        tags: ['Airdrop', 'Civic Liker', 'Depub', 'LikeCoin', 'Progress Update'],
        author: 'likecoin',
        description: 'Launch of LikeCoin Airdrop The long-awaited 50 million...',
      }
    },

  }), ISCN_WIDGET_ORIGIN);
}

Interactive Demo

https://codesandbox.io/s/like-co-iscn-ar-demo-ynenq0?file=/pages/index.vue