craft-nft

A standalone NFT implementation for real-world arts and crafts assets
Log | Files | Refs | README

commit 651de7d06b4721caa61237970d69d09185ef3b09
parent e526fdaf395bc73ce1ae75ce8499aa7c25b4335e
Author: lash <dev@holbrook.no>
Date:   Tue, 20 Dec 2022 08:57:14 +0000

Add code comments for js example implmentation + use event emit for mint

Diffstat:
Mjs/index.html | 4+++-
Mjs/manual_test_browser.js | 54+++++++++++++++++++++++++++++++++++++++++++++++++++---
Mjs/src/common.js | 28+++++++++++++++++++++++++++-
3 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/js/index.html b/js/index.html @@ -1,6 +1,8 @@ <html> <head> - <title>Manual test of web3, metamask</title> + <title>Manual test of Craft NFT using web3js, metamask</title> + <meta name="author" value="Louis Holbrook <dev@holbrook.no> (https://holbrook.no)" /> + <meta name="generator" value="vim" /> <script src="node_modules/jssha/dist/sha256.js"></script> <script src="dist/craft_nft.js"></script> <script src="manual_test_browser.js"></script> diff --git a/js/manual_test_browser.js b/js/manual_test_browser.js @@ -1,3 +1,9 @@ +// This file contains a rought-edged example implementation of a user interface for reading and writing Craft NFT tokens. + + +/** + * Emitted when a new token has been found. + */ window.addEventListener('token', (e) => { const li = document.createElement('li'); const a = document.createElement('a'); @@ -9,6 +15,9 @@ window.addEventListener('token', (e) => { }); +/** + * Emitted when a new batch allocation of a token has been found. + */ window.addEventListener('tokenBatch', async (e) => { let currentTokenId = document.getElementById('token_id').innerHTML; if (currentTokenId.substring(0, 2) == '0x') { @@ -38,7 +47,14 @@ window.addEventListener('tokenBatch', async (e) => { }); -async function generatePayload() { +/** + * Request creation of a new token allocation. + * + * Parameters for the allocation are read directly from the DOM. + * + * Interpreted parameters are emitted with the tokenRequest event. + */ +async function generateAllocation() { let tokenData = { name: undefined, description: undefined, @@ -86,16 +102,36 @@ async function generatePayload() { } +/** + * Request minting of a new token from an existing allocation. + * + * Parameters for the minting are read directly from the DOM. + * + * Interpreted parameters are emitted with the tokenMint event. + */ async function generateMint() { const tokenId = document.getElementById('token_mint_id').innerHTML; let batch = document.getElementById('token_mint_batch').innerHTML; batch = parseInt(batch, 10); const recipient = document.getElementById('token_mint_recipient').value; - window.craftnft.mintToken(session, tokenId, batch, recipient); + const tokenRequestEvent = new CustomEvent('tokenMint', { + detail: { + recipient: recipient, + digest: tokenId, + batch: batch, + }, + bubbles: true, + cancelable: true, + composed: false, + }); + window.dispatchEvent(tokenRequestEvent); uiViewToken(tokenId); } +/** + * Render the mint token view. + */ async function uiMintToken(tokenId, batch) { document.getElementById('token_mint_id').innerHTML = tokenId; document.getElementById('token_mint_batch').innerHTML = batch; @@ -106,6 +142,9 @@ async function uiMintToken(tokenId, batch) { } +/** + * Render the Unique Token part of the allocated token view. + */ async function uiViewTokenSingle(tokenId) { let li = document.createElement('li'); li.setAttribute('id', 'token_' + tokenId + '_single'); @@ -129,6 +168,9 @@ async function uiViewTokenSingle(tokenId) { } +/** + * Render the allocated token view. + */ async function uiViewToken(tokenId) { let tokenData = { @@ -184,6 +226,9 @@ async function uiViewToken(tokenId) { } +/** + * Render the create token allocation view. + */ async function uiCreateToken() { document.getElementById('interactive').style.visibility = 'visible'; document.getElementById('detail').style.visibility = 'hidden'; @@ -191,6 +236,9 @@ async function uiCreateToken() { } +/** + * UI entry point. + */ async function run(w3, generated_session) { session = generated_session; console.debug('running with session', session); @@ -218,7 +266,7 @@ async function run(w3, generated_session) { document.getElementById('data_name').innerHTML = session.name; document.getElementById('data_symbol').innerHTML = session.symbol; document.getElementById('data_supply').innerHTML = session.supply; - document.getElementById('panel_submit').addEventListener('click', generatePayload); + document.getElementById('panel_submit').addEventListener('click', generateAllocation); document.getElementById('mint_submit').addEventListener('click', generateMint); if (session.contentGateway !== undefined) { diff --git a/js/src/common.js b/js/src/common.js @@ -1,3 +1,11 @@ +// This file contains browser interface code that is not explicitly linked to a specific implementation. + + +/** + * The session object keeps the current known state of backends and settings during user interface execution. + * + * These are the only global properties. + */ var session = { account: undefined, contractAddress: undefined, @@ -11,10 +19,16 @@ var session = { }; +/** + * Entry point. + * + * Passes UI entry point function to be executed after successful initialization. + */ window.addEventListener('load', async () => { const provider = window.craftnft.loadProvider(); const conn = window.craftnft.loadConn(provider); - // none of the suggestions tried so far worked (accountsChanged on provider, update on conn.provider publicconfigstore ... + // TODO: if provider state changes (e.g. metamask change account) we need to catch this and update the session. + // however, none of the suggestions tried so far worked (accountsChanged on provider, update on conn.provider publicconfigstore ... // window.addEventListener('update', async (e) => { // const oldAccount = session.account; // const newAccount = await conn.eth.getAccounts(); @@ -41,10 +55,22 @@ window.addEventListener('load', async () => { config.abi = abi config.bin = bin + // run() is defined in the implementation file. window.craftnft.startSession(conn, config, session, run); }); + +/** + * Emitted when the user requests a token allocation with the UI. + */ window.addEventListener('tokenRequest', async(e) => { window.craftnft.allocateToken(session, e.detail.digest, e.detail.tokenData.amount); }); + +/** + * Emitted when the user requests a token minting with the UI. + */ +window.addEventListener('tokenMint', async(e) => { + window.craftnft.mintToken(session, e.detail.digest, e.detail.batch, e.detail.recipient); +});