qrread.html (6524B)
1 <html> 2 <head> 3 <title>qr read</title> 4 <script src="node_modules/jsqr/dist/jsQR.js"></script> 5 <script src="node_modules/ethers/dist/ethers.umd.min.js"></script> 6 <script src="src/wala.js"></script> 7 <script src="qrread.js"></script> 8 <script src="qrread_ui.js"></script> 9 <link rel="stylesheet" href="style.css"></link> 10 <script> 11 12 const MAX_MINT = 4; 13 const BATCH_UNIT_VALUE = 500; 14 15 window.addEventListener('load', () => { 16 // settings.batchUnitValue = BATCH_UNIT_VALUE; 17 actLoad(); 18 // for (let i = 1; i <= MAX_MINT; i<<=1) { 19 // const opt = document.createElement('option'); 20 // opt.setAttribute('value', i); 21 // opt.innerHTML = i.toString(); 22 // document.getElementById('requestAmount').appendChild(opt); 23 // } 24 document.getElementById('keyFileSubmit').addEventListener("click", (o) => { 25 const keyFile = document.getElementById("keyFile").value; 26 const keyFilePassword = document.getElementById("keyFilePassword").value; 27 const submit = document.getElementById('keyFileSubmit'); 28 submit.setAttribute('disabled', 1); 29 return keyFileHandler(keyFile, keyFilePassword); 30 }); 31 document.getElementById('chainSubmit').addEventListener("click", (o) => { 32 const submit = document.getElementById('chainSubmit'); 33 submit.setAttribute('disabled', 1); 34 const chainId = document.getElementById("chainId").value; 35 const chainRpcUrl = document.getElementById("chainRpcUrl").value; 36 chainHandler(chainRpcUrl, chainId); 37 let metaUrl = document.getElementById("metaUrl").value; 38 if (metaUrl != '') { 39 metaHandler(metaUrl); 40 } 41 }); 42 document.getElementById('contractSubmit').addEventListener("click", (o) => { 43 const tokenAddress = document.getElementById("contractAddress").value; 44 const voucherAddress = document.getElementById("voucherAddress").value; 45 return contractHandler(tokenAddress, voucherAddress); 46 }); 47 document.getElementById('requestSubmit').addEventListener("click", (o) => { 48 let tokenBatch = undefined; 49 const batches = document.getElementsByName('tokenBatch'); 50 for(let i = 0; i < batches.length; i++){ 51 if(batches[i].checked){ 52 const tbid = batches[i].getAttribute('id'); 53 const tbidp = tbid.split('.'); 54 tokenBatch = tbidp[1] + '.' + tbidp[2]; 55 console.debug('using batch', tokenBatch); 56 } 57 } 58 const amount = document.getElementById("requestAmount").value; 59 return requestHandler(tokenBatch, amount); 60 }); 61 document.getElementById('scanAbort').addEventListener("click", (o) => { 62 const e = new CustomEvent('uistate', { 63 detail: { 64 delta: STATE.SCAN_STOP, 65 settings: settings, 66 }, 67 bubbles: true, 68 cancelable: true, 69 composed: false, 70 }); 71 const ee = new CustomEvent('uistate', { 72 detail: { 73 delta: STATE.SCAN_DONE, 74 settings: settings, 75 }, 76 bubbles: true, 77 cancelable: true, 78 composed: false, 79 }); 80 window.dispatchEvent(e); 81 window.dispatchEvent(ee); 82 }); 83 document.getElementById('scanReturn').addEventListener("click", (o) => { 84 const e = new CustomEvent('uistate', { 85 detail: { 86 delta: STATE.SCAN_DONE, 87 settings: settings, 88 }, 89 bubbles: true, 90 cancelable: true, 91 composed: false, 92 }); 93 window.dispatchEvent(e); 94 }); 95 96 document.getElementById('scanConfirm').addEventListener("click", (o) => { 97 const e = new CustomEvent('uistate', { 98 detail: { 99 delta: STATE.SCAN_CONFIRM, 100 settings: settings, 101 }, 102 bubbles: true, 103 cancelable: true, 104 composed: false, 105 }); 106 window.dispatchEvent(e); 107 }); 108 109 document.getElementById('keyFileGenerate').addEventListener("click", (o) => { 110 //const btn = document.getElementById('keyFileGenerate'); 111 //btn.setAttribute('disabled', 1); 112 document.getElementById('keyFile').value = null; 113 const passphrase = document.getElementById('keyFilePassword').value; 114 generateWallet(passphrase); 115 }); 116 117 document.getElementById('scanManualMint').addEventListener("click", (o) => { 118 const addr = document.getElementById("scanAddress").value; 119 manualConfirmHandler(addr); 120 }); 121 122 setStatus('waiting for wallet', STATUS_BUSY); 123 }); 124 125 </script> 126 </head> 127 <dl id="settingsView"> 128 <dt>Status</dt> 129 <dd><span id="statusText" class="statusBusy">Initializing...</span></dd> 130 </dl> 131 <div id="setup"> 132 <div class="pane" id="start"> 133 <label for="keyFile">Keyfile JSON text</label> 134 <textarea cols="80" rows="24" id="keyFile"></textarea> 135 <label for="keyFilePassword">Keyfile passphrase</label> 136 <input type="password" id="keyFilePassword" /> 137 <button id="keyFileGenerate">generate wallet</button> 138 <button id="keyFileSubmit">unlock wallet</button> 139 </div> 140 <div class="pane" id="connect"> 141 <label for="chainRpcUrl">RPC URL</label> 142 <input type="text" id="chainRpcUrl" value="http://localhost:8545" /> 143 <label for="chainId">Chain ID</label> 144 <input type="text" id="chainId" /> 145 <label for="metaUrl">Data URL (optional)</label> 146 <input type="text" id="metaUrl" value="" /> 147 <button id="chainSubmit">connect to network</button> 148 </div> 149 <div class="pane" id="contract"> 150 <label for="contractAddress">NFT Contract address</label> 151 <input type="text" id="contractAddress" size="42" /> 152 <label for="voucherAddress">Voucher address</label> 153 <input type="text" id="voucherAddress" size="42" /> 154 155 <button id="contractSubmit">connect to contract</button> 156 </div> 157 </div> 158 <div id="runtime"> 159 <div class="pane" id="product"> 160 <label for="requestTokenChooser">Choose NFT token</label> 161 <div id="tokenChooser"></div> 162 <label for="requestAmount">Choose mint amount</label> 163 <input type="text" id="requestAmount"></input> 164 <button id="requestSubmit">create request</button> 165 </div> 166 <div class="pane" id="read"> 167 <h2>Mint token(s)</h2> 168 <dl> 169 <dt>Token Id</dt> 170 <dd id="scanTokenId"></dd> 171 <dt>Token Name</dt> 172 <dd id="scanTokenMetaName">(unavailable)</dd> 173 <dt>Token Description</dt> 174 <dd id="scanTokenMetaDescription">(unavailable)</dd> 175 <dt>Token Image</dt> 176 <dd id="scanTokenMetaImage">(unavailable)</dd> 177 <dt>Batch</dt> 178 <dd id="scanTokenBatch"></dd> 179 <dt>NFT units</dt> 180 <dd id="scanTokenAmount"></dd> 181 <dt>Voucher amount</dt> 182 <dd id="scanVoucherAmount"></dd> 183 </dl> 184 <div class="out"> 185 <canvas id="qr-canvas" width="400" height="400"></canvas> 186 </div> 187 <label for="scanAddress">Recipient address</label> 188 <input type="text" id="scanAddress" size="42" /> 189 <ol id="txList"></ol> 190 <button id="scanManualMint">mint</button> 191 <button id="scanConfirm">confirm</button> 192 <button id="scanAbort">abort</button> 193 <button id="scanReturn">return</button> 194 </div> 195 <div> 196 </html>