Add script to locally serve application

This commit is contained in:
lash 2023-09-05 03:19:53 +01:00
parent f345404416
commit e3d2d58950
Signed by: lash
GPG Key ID: 21D2E7BB88C2A746
9 changed files with 264 additions and 27 deletions

33
js/build.sh Normal file
View File

@ -0,0 +1,33 @@
#!/bin/bash
PUP_BIN=/home/lash/src/build/pup/pup
cat node_modules/openpgp/dist/openpgp.min.js node_modules/MimeJS/src/base64.js node_modules/MimeJS/dist/mime-js.min.js node_modules/jssha/dist/sha256.js run.js booteth/wallet.js booteth/session.js booteth/eip1193.js registry.js wala.js promise.js rpc.js > tmp.js
node node_modules/uglify-js/bin/uglifyjs tmp.js > src.js
echo -n "<html><head>" > standalone.html
cat index.html | $PUP_BIN "head title" >> standalone.html
cat index.html | $PUP_BIN "head style" >> standalone.html
echo -n "<script defer src='data:text/javascript;base64," >> standalone.html
base64 node_modules/alpinejs/dist/cdn.min.js -w0 >> standalone.html
echo -n "'></script>" >> standalone.html
#echo -n "<script>" >> standalone.html
#cat src.js >> standalone.html
#echo "</script><script type='module'>" >> standalone.html
echo -n "<script src='data:text/javascript;base64," >> standalone.html
base64 src.js -w0 >> standalone.html
echo "'></script><script type='module'>" >> standalone.html
echo -n "import { ethers } from 'data:text/javascript;base64," >> standalone.html
base64 node_modules/ethers/dist/ethers.min.js -w0 >> standalone.html
echo -en "';\nregister_ethers(ethers);\n</script><script type='module' src='data:text/javascript;base64," >> standalone.html
node node_modules/uglify-js/bin/uglifyjs main.js | base64 -w0 >> standalone.html
echo -n "'></script>" >> standalone.html
cat <<eof >> standalone.html
<script>
wallet_fallback = sessionwallet_create;
wallet_detect(ethers);
</script>
</head>
eof
cat index.html | $PUP_BIN "body" >> standalone.html
echo -n "</html>" >> standalone.html

View File

@ -5,13 +5,20 @@
<script src="node_modules/openpgp/dist/openpgp.min.js"></script> <script src="node_modules/openpgp/dist/openpgp.min.js"></script>
<script src="node_modules/MimeJS/src/base64.js"></script> <script src="node_modules/MimeJS/src/base64.js"></script>
<script src="node_modules/MimeJS/dist/mime-js.min.js"></script> <script src="node_modules/MimeJS/dist/mime-js.min.js"></script>
<script src="node_modules/jssha/dist/sha256.js"></script>
<script src="run.js"></script> <script src="run.js"></script>
<script src="booteth/wallet.js"></script> <script src="booteth/wallet.js"></script>
<script src="booteth/session.js"></script> <script src="booteth/session.js"></script>
<script src="booteth/eip1193.js"></script> <script src="booteth/eip1193.js"></script>
<script src="registry.js"></script> <script src="registry.js"></script>
<script src="wala.js"></script>
<script src="promise.js"></script>
<script src="rpc.js"></script> <script src="rpc.js"></script>
<script type="module" src="main.js"></script> <script type="module">
import { ethers } from "./node_modules/ethers/dist/ethers.min.js";
register_ethers(ethers);
</script>
<script src="main.js"></script>
<script> <script>
wallet_fallback = sessionwallet_create; wallet_fallback = sessionwallet_create;
wallet_detect(ethers); wallet_detect(ethers);
@ -31,8 +38,9 @@ wallet_detect(ethers);
x-data='{ x-data='{
keyTitle: "unlock key", keyTitle: "unlock key",
}'> }'>
<li><a id="menuKey" href="javascript:void(null);" x-text='keyTitle' @click='menuSelected="main"' ></a> <li><a href="javascript:void(null);" id="menuKey" x-text='keyTitle' @click='menuSelected="main"' ></a>
<li><a href="javascript:void(null);" id="menuStatus" @click='menuSelected="state"'>status</a> <li><a href="javascript:void(null);" id="menuStatus" @click='menuSelected="state"'>status</a>
<li><a href="javascript:void(null);" id="menuPromise" @click='menuSelected="promise"'>promises</a>
<div id="main" <div id="main"
x-show='needKey && menuSelected == "main"' x-show='needKey && menuSelected == "main"'
@messagestatechange.window=' @messagestatechange.window='
@ -79,21 +87,39 @@ if (checkState(STATE.LOCAL_KEY, $event.detail.state)) {
stateEvm: "disconnected", stateEvm: "disconnected",
stateBalance: "0", stateBalance: "0",
stateAddress: "unknown", stateAddress: "unknown",
stateContractRegistry: "unknown",
stateContractAccountsIndex: "unknown",
stateContractFaucet: "unknown",
} }
' '
@messagestatechange.window=' @messagestatechange.window='
dirty = false;
if (checkState(STATE.LOCAL_KEY_UNLOCK, $event.detail.state)) { if (checkState(STATE.LOCAL_KEY_UNLOCK, $event.detail.state)) {
stateKey = "unlocked"; stateKey = "unlocked";
dirty = true;
} }
if (checkState(STATE.RPC_CONNECT, $event.detail.state)) { if (checkState(STATE.RPC_CONNECT, $event.detail.state)) {
stateEvm = "connected"; stateEvm = $event.detail.s["network"];
dirty = true;
} }
console.debug("state", $event.detail.s);
if (checkState(STATE.RPC_PING, $event.detail.state)) { if (checkState(STATE.RPC_PING, $event.detail.state)) {
stateBalance = $event.detail.s["balance"]; stateBalance = $event.detail.s["balance"];
stateAddress = $event.detail.s["address"]; stateAddress = $event.detail.s["address"];
stateChange("reset ping", 0, STATE.RPC_PING); stateChange("reset ping", 0, STATE.RPC_PING);
dirty = true;
}
if (checkState(STATE.EVM_REGISTRY, $event.detail.state)) {
stateContractRegistry = $event.detail.s.registry;
stateContractAccountsIndex = $event.detail.s.accounts;
stateContractFaucet = $event.detail.s.faucet;
stateChange("reset ping", 0, STATE.EVM_REGISTRY);
}
if (checkState(STATE.RPC_CHANGE, $event.detail.state)) {
stateEvm = $event.detail.s["chainId"];
}
if (dirty) {
stateChange("reset ping", 0, STATE.RPC_PING | STATE.RPC_CONNECT | STATE.RPC_CHANGE | STATE.EVM_REGISTRY | STATE.LOCAL_KEY_UNLOCK);
} }
' '
> >
@ -104,7 +130,33 @@ if (checkState(STATE.RPC_PING, $event.detail.state)) {
<dd x-text='stateAddress'> <dd x-text='stateAddress'>
<dt>Balance</dt> <dt>Balance</dt>
<dd x-text='stateBalance'> <dd x-text='stateBalance'>
<dt>Chain id</dt>
<dd x-text='stateEvm'>
<dt>Registry contract</dt>
<dd x-text='stateContractRegistry'>
<dt>Accounts index contract</dt>
<dd x-text='stateContractAccountsIndex'>
<dt>Faucet contract</dt>
<dd x-text='stateContractFaucet'>
</dl> </dl>
</div> </div>
<div id="promise"
x-show='menuSelected == "promise"'
>
<ul id="promiseList"></ul>
<h2>Add promise</h2>
<form onSubmit='return false;' id="promiseForm">
<input type="text" name="label" id="promiseLabel" /><br/>
<textarea name="description" id="promiseDescription" ></textarea><br/>
<button id="promiseSubmit"
x-data='{
promiseTitle: "create",
}'
x-text='promiseTitle'
x-on:click='stateChange("new promise", STATE.PROMISE_NEW);'
></button>
</form>
</div>
</body> </body>
</html> </html>

View File

@ -1,8 +1,6 @@
import { ethers } from "./node_modules/ethers/dist/ethers.min.js";
register_ethers(ethers);
var connect = connect_manual_session; var connect = connect_manual_session;
async function checkKey() { async function checkKey() {
const r = localStorage.getItem(KEY_STORAGEKEY); const r = localStorage.getItem(KEY_STORAGEKEY);
if (r) { if (r) {
@ -10,32 +8,46 @@ async function checkKey() {
} }
} }
// router // router
var initRouter = async (e) => { var initRouter = async (e) => {
if (checkState(STATE.LOCAL_KEY_REQUEST, e.detail.state)) { if (checkState(STATE.LOCAL_KEY_REQUEST, e.detail.state)) {
stateChange('process key unlock request', 0, STATE.LOCAL_KEY_REQUEST | STATE.LOCAL_KEY_PROBE | STATE.LOCAL_KEY_REJECT); stateChange('process key unlock request', 0, STATE.LOCAL_KEY_REQUEST | STATE.LOCAL_KEY_PROBE | STATE.LOCAL_KEY_REJECT);
checkKey(); checkKey(); const v = document.getElementById('passphrase').value;
const v = document.getElementById('passphrase').value;
const r = await connect(v); const r = await connect(v);
if (r) { if (r) {
stateChange('key request finished', STATE.LOCAL_KEY_UNLOCK, ); stateChange('key request finished', STATE.LOCAL_KEY_UNLOCK, );
} }
} }
if (checkState(STATE.RPC_CHANGE, e.detail.state)) {
scan_rpc();
stateChange('reset rpc change', 0, STATE.RPC_CHANGE);
g_poll_rpc = 3000;
}
if (checkState(STATE.RPC_GONE, e.detail.state)) {
//stateChange('reset rpc change', 0, STATE.RPC_CHANGE);
g_poll_rpc = 1000;
}
if (checkState(STATE.PROMISE_NEW, e.detail.state)) {
stateChange('reset rpc change', 0, STATE.PROMISE_NEW);
const o = {
label: document.getElementById('promiseLabel').value,
description: document.getElementById('promiseDescription').value,
};
handlePromise(o);
}
}; };
async function scan_rpc(pw) {
const contracts = await scanRegistry(g_registry);
stateChange(contracts, STATE.EVM_REGISTRY);
}
async function connect_manual_session(pw) { async function connect_manual_session(pw) {
let provider = undefined;
let wallet = undefined; let wallet = undefined;
try {
provider = await provider_connect('default');
} catch(e) {
console.error(e);
}
if (!provider) {
stateChange('no provider', STATE.RPC_GONE, STATE.LOCAL_KEY_REQUEST);
return;
}
try { try {
wallet = await wallet_connect('default', SESSION_ID, pw); wallet = await wallet_connect('default', SESSION_ID, pw);
} catch(e) { } catch(e) {
@ -45,16 +57,36 @@ async function connect_manual_session(pw) {
stateChange('wallet unlock fail', STATE.LOCAL_KEY_REJECT, STATE.LOCAL_KEY_REQUEST); stateChange('wallet unlock fail', STATE.LOCAL_KEY_REJECT, STATE.LOCAL_KEY_REQUEST);
return; return;
} }
checkRpc(); checkWallet();
scanRegistry(g_registry);
return wallet; return wallet;
} }
async function handlePromise(o) {
console.debug('processing promise', o);
await putPromise(o);
scanPromises();
}
function checkWallet() {
pingWallet();
setTimeout(checkWallet, g_poll_wallet);
}
function checkRpc() { function checkRpc() {
pingRpc(); pingRpc();
setTimeout(checkRpc, 3000); setTimeout(checkRpc, g_poll_rpc);
} }
function checkPersist() {
g_persist.forEach((v) => {
v.put('foo');
});
}
window.addEventListener('load', () => { window.addEventListener('load', () => {
window.addEventListener('messagestatechange', initRouter); window.addEventListener('messagestatechange', initRouter);
if (DEBUG) { if (DEBUG) {
@ -63,5 +95,8 @@ window.addEventListener('load', () => {
}); });
} }
stateChange('init key', STATE.LOCAL_KEY_PROBE); stateChange('init key', STATE.LOCAL_KEY_PROBE);
const w = new Wala('http://localhost:8081');
g_persist.push(w);
checkPersist();
checkRpc();
}); });

View File

@ -9,5 +9,8 @@
"jsqr": "^1.4.0", "jsqr": "^1.4.0",
"qrcode": "1.5.3", "qrcode": "1.5.3",
"ethers": "6.5.1" "ethers": "6.5.1"
},
"devDependencies": {
"uglify-js": "^3.17.4"
} }
} }

32
js/promise.js Normal file
View File

@ -0,0 +1,32 @@
async function putPromise(o) {
let c = 0;
const v = JSON.stringify(o);
const h = new jsSHA("SHA-256", "TEXT", { encoding: "UTF8" });
h.update(v);
const z = h.getHash("HEX");
g_persistIndex.push(z);
localStorage.setItem('persist', JSON.stringify(g_persistIndex));
for (let i = 0; i < g_persist.length; i++) {
const o = g_persist[i];
const r = await o.put(v);
c++;
stateChange(r, STATE.PROMISE_PERSIST);
}
}
async function scanPromises() {
const promises = localStorage.getItem('persist');
const o = JSON.parse(promises);
const eList = document.createElement('ul');
eList.setAttribute('id', 'promiseList');
o.forEach(async (v) => {
const r = await g_persist[0].get(v); // replace with fadfada
const o = JSON.parse(r);
console.debug('o', o);
const eItem = document.createElement('li');
eItem.innerText = o.label;
eList.appendChild(eItem);
});
document.getElementById('promiseList').remove();
document.getElementById('promise').prepend(eList);
}

View File

@ -1,5 +1,23 @@
const registryInterface = [{"inputs":[{"internalType":"bytes32[]","name":"_identifiers","type":"bytes32[]"}],"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"bytes32","name":"_key","type":"bytes32"},{"indexed":false,"internalType":"address","name":"_address","type":"address"}],"name":"AddressKey","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"_previousOwner","type":"address"},{"indexed":true,"internalType":"address","name":"_newOwner","type":"address"}],"name":"OwnershipTransferred","type":"event"},{"inputs":[{"internalType":"bytes32","name":"_identifier","type":"bytes32"}],"name":"addressOf","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"}],"name":"identifier","outputs":[{"internalType":"bytes32","name":"","type":"bytes32"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"identifierCount","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"owner","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"bytes32","name":"_identifier","type":"bytes32"},{"internalType":"address","name":"_address","type":"address"}],"name":"set","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"bytes4","name":"_sum","type":"bytes4"}],"name":"supportsInterface","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"pure","type":"function"},{"inputs":[{"internalType":"address","name":"_newOwner","type":"address"}],"name":"transferOwnership","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"}]; const registryInterface = [{"inputs":[{"internalType":"bytes32[]","name":"_identifiers","type":"bytes32[]"}],"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"bytes32","name":"_key","type":"bytes32"},{"indexed":false,"internalType":"address","name":"_address","type":"address"}],"name":"AddressKey","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"_previousOwner","type":"address"},{"indexed":true,"internalType":"address","name":"_newOwner","type":"address"}],"name":"OwnershipTransferred","type":"event"},{"inputs":[{"internalType":"bytes32","name":"_identifier","type":"bytes32"}],"name":"addressOf","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"","type":"uint256"}],"name":"identifier","outputs":[{"internalType":"bytes32","name":"","type":"bytes32"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"identifierCount","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"owner","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"bytes32","name":"_identifier","type":"bytes32"},{"internalType":"address","name":"_address","type":"address"}],"name":"set","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"bytes4","name":"_sum","type":"bytes4"}],"name":"supportsInterface","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"pure","type":"function"},{"inputs":[{"internalType":"address","name":"_newOwner","type":"address"}],"name":"transferOwnership","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"}];
function fromIdentifier(s) {
let r = '';
if (s.substr(0, 2) == '0x') {
s = s.substr(2);
}
for (let i = 0; i < 64; i += 2) {
const v = s.substring(i, i+2);
if (v == '00') {
break;
}
r += String.fromCharCode(parseInt(v, 16));
console.log('v', v, r);
}
return r;
}
async function scanRegistry(registry) { async function scanRegistry(registry) {
const o = new ethers.Contract(registry, registryInterface, current_provider); const o = new ethers.Contract(registry, registryInterface, current_provider);
let i = 0; let i = 0;
@ -15,8 +33,9 @@ async function scanRegistry(registry) {
break; break;
} }
const v = await o.addressOf(identifier); const v = await o.addressOf(identifier);
r[identifier] = v; const identifierString = fromIdentifier(identifier);
console.debug('found ' + identifier + '=' + v + ' in registry ' + registry); r[identifierString] = v;
console.debug('found ' + identifierString + ' = ' + v + ' in registry ' + registry);
i++; i++;
} }
return r; return r;

View File

@ -1,4 +1,4 @@
async function pingRpc() { async function pingWallet() {
const address = await current_signer.getAddress(); const address = await current_signer.getAddress();
const balance = await current_provider.getBalance(address); const balance = await current_provider.getBalance(address);
let set = STATE.RPC_PING; let set = STATE.RPC_PING;
@ -14,3 +14,22 @@ async function pingRpc() {
} }
stateChange(r, set, rst); stateChange(r, set, rst);
} }
async function pingRpc() {
let provider = undefined;
try {
provider = await provider_connect('default');
} catch(e) {
console.error(e);
}
if (!provider) {
stateChange('no provider', STATE.RPC_GONE, STATE.LOCAL_KEY_REQUEST);
return;
}
const network = await current_provider.getNetwork();
console.debug('chainid', network.chainId);
if (network.chainId != g_chainId) {
g_chainId = network.chainId;
stateChange({'chainId': g_chainId}, STATE.RPC_CHANGE | STATE.RPC_CONNECT);
}
}

View File

@ -10,19 +10,28 @@ var STATE = {
RPC_GONE: 1 << 8, RPC_GONE: 1 << 8,
RPC_PING: 1 << 9, RPC_PING: 1 << 9,
EVM_BALANCE_LOW: 1 << 10, EVM_BALANCE_LOW: 1 << 10,
EVM_REGISTRY: 1 << 11,
PROMISE_NEW: 1 << 12,
PROMISE_PERSIST: 1 << 13,
}; };
const STATE_KEYS = Object.keys(STATE); const STATE_KEYS = Object.keys(STATE);
var g_state = 0; var g_state = 0;
var g_chainId = 1337; var g_chainId = 0;
var g_balance = 0; var g_balance = 0;
var g_minBalance = 10000000; var g_minBalance = 10000000;
var g_poll_wallet = 3000;
var g_poll_rpc = 1000;
var g_registry = '0xb708175e3f6cd850643aaf7b32212afad50e2549'; var g_registry = '0xb708175e3f6cd850643aaf7b32212afad50e2549';
var g_persist = []
var g_persistIndex = [];
const DEBUG = true; const DEBUG = true;
const SESSION_ID = 'gasgasgas'; const SESSION_ID = 'gasgasgas';
const KEY_STORAGEKEY = 'sessionKey_' + SESSION_ID; const KEY_STORAGEKEY = 'sessionKey_' + SESSION_ID;
const PERSIST_STORAGEKEY = 'persistKey_' + SESSION_ID; // replace with addressdeclarator
const qp = new URLSearchParams(window.location.search); const qp = new URLSearchParams(window.location.search);
console.debug('uuid', qp.get("u"));
// borrowed from forro // borrowed from forro
async function stateChange(s, set_states, rst_states) { async function stateChange(s, set_states, rst_states) {

35
js/wala.js Normal file
View File

@ -0,0 +1,35 @@
function Wala(url) {
this._url = url;
}
Wala.prototype.put = async function(v, filename, mimetype) {
let headers = {};
if (filename !== undefined) {
headers['X-Filename'] = filename;
}
let r = await fetch(this._url, {
method: 'put',
headers: headers,
body: v,
});
if (!r.ok) {
throw ('failed put');
}
return r.text();
}
Wala.prototype.get = async function(k, binary=false) {
const url = this.url(k)
let r = await fetch(url);
if (!r.ok) {
throw ('failed get');
}
if (binary) {
return r.blob();
}
return r.text();
}
Wala.prototype.url = function(k) {
return this._url + '/' + k;
}