diff --git a/js/index.html b/js/index.html
new file mode 100644
index 0000000..46ae145
--- /dev/null
+++ b/js/index.html
@@ -0,0 +1,110 @@
+<html>
+	<head>
+		<title>gas3</title>
+		<script defer src="node_modules/alpinejs/dist/cdn.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/dist/mime-js.min.js"></script>
+		<script src="run.js"></script>
+		<script src="booteth/wallet.js"></script>
+		<script src="booteth/session.js"></script>
+		<script src="booteth/eip1193.js"></script>
+		<script src="registry.js"></script>
+		<script src="rpc.js"></script>
+		<script type="module" src="main.js"></script>
+		<script>
+wallet_fallback = sessionwallet_create;
+wallet_detect(ethers);
+		</script>
+		<link rel="stylesheet" type="text/css" href="style.css"></link>
+	</head>
+
+	<body x-data='{
+		needKey: false,	
+		error: "",
+		lock: true,
+		menuSelected: "main",
+}
+'	>
+		
+		<ul id="menu"
+		    x-data='{
+		    	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="menuStatus" @click='menuSelected="state"'>status</a>
+		<div id="main"
+			x-show='needKey && menuSelected == "main"'
+		     	@messagestatechange.window='
+if (checkState(STATE.LOCAL_KEY_PROBE, $event.detail.state)) {
+	needKey = true;
+}
+if (checkState(STATE.LOCAL_KEY_REQUEST | STATE.LOCAL_KEY_UNLOCK, $event.detail.state)) {
+	error = undefined;
+}
+if (checkState(STATE.LOCAL_KEY_REJECT, $event.detail.state)) {
+	error = $event.detail.s;
+}
+if (checkState(STATE.LOCAL_KEY_UNLOCK, $event.detail.state)) {
+	needKey = false;
+	lock = false;
+}
+'
+			>
+			<form onSubmit='return false;'>
+				<input type="password" name="passphrase" id="passphrase" /><br/>
+				<button id="passphraseUnlock"
+					x-data='{
+	keyTitle: "enter new pin",		
+}
+'
+					x-text='keyTitle'
+				      @messagestatechange.window='
+if (checkState(STATE.LOCAL_KEY, $event.detail.state)) {
+	keyTitle = "unlock key with pin";
+}
+'
+					x-on:click='stateChange("unlock key request", STATE.LOCAL_KEY_REQUEST);'
+					></button>
+			<form>
+			<br/><span id="keyError" class="error"
+			      x-text='error'
+				></span>
+		</div>
+
+		<div id="state"
+		     x-show='menuSelected == "state"'
+		     x-data='{
+			stateKey: "locked",
+			stateEvm: "disconnected",
+			stateBalance: "0",
+			stateAddress: "unknown",
+}
+'
+
+			@messagestatechange.window='
+if (checkState(STATE.LOCAL_KEY_UNLOCK, $event.detail.state)) {
+	stateKey = "unlocked";
+}
+if (checkState(STATE.RPC_CONNECT, $event.detail.state)) {
+	stateEvm = "connected";
+}
+console.debug("state", $event.detail.s);
+if (checkState(STATE.RPC_PING, $event.detail.state)) {
+	stateBalance = $event.detail.s["balance"];
+	stateAddress = $event.detail.s["address"];
+	stateChange("reset ping", 0, STATE.RPC_PING);
+}
+'
+			>
+			<dl>
+				<dt>Key</dt>
+				<dd x-text='stateKey'> 
+				<dt>Address</dt>
+				<dd x-text='stateAddress'> 
+				<dt>Balance</dt>
+				<dd x-text='stateBalance'> 
+			</dl>
+		</div>
+	</body>
+</html>
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..90b8ac2
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,67 @@
+import { ethers } from "./node_modules/ethers/dist/ethers.min.js";
+register_ethers(ethers);
+
+var connect = connect_manual_session;
+
+async function checkKey() {
+	const r = localStorage.getItem(KEY_STORAGEKEY);
+	if (r) {
+		stateChange('found existing key', STATE.LOCAL_KEY, STATE.LOCAL_KEY_PROBE);
+	}
+}
+
+// router
+var initRouter = async (e) => {
+	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);
+		checkKey();
+		const v = document.getElementById('passphrase').value;
+		const r = await connect(v);
+		if (r) {
+			stateChange('key request finished', STATE.LOCAL_KEY_UNLOCK, );
+		}
+	}
+};
+
+
+async function connect_manual_session(pw) {
+	let provider = 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 {
+		wallet = await wallet_connect('default', SESSION_ID, pw);
+	} catch(e) {
+		console.error(e);
+	}
+	if (!wallet) {
+		stateChange('wallet unlock fail', STATE.LOCAL_KEY_REJECT, STATE.LOCAL_KEY_REQUEST);
+		return;
+	}
+	checkRpc();
+	scanRegistry(g_registry);
+	return wallet;
+}
+
+function checkRpc() {
+	pingRpc();
+	setTimeout(checkRpc, 3000);
+}
+
+window.addEventListener('load', () => {
+	window.addEventListener('messagestatechange', initRouter);
+	if (DEBUG) {
+		window.addEventListener('messagestatechange', (e) => {
+			console.debug('state change:', e.detail.s);
+		});
+	}
+	stateChange('init key', STATE.LOCAL_KEY_PROBE);
+});
+
diff --git a/js/package.json b/js/package.json
new file mode 100644
index 0000000..25ffc03
--- /dev/null
+++ b/js/package.json
@@ -0,0 +1,13 @@
+{
+	"name": "gas3",
+	"version": "0.0.1-alpha.1",
+	"dependencies": {
+		"alpinejs": "3.10.3",
+		"openpgp": "5.5.0",
+		"jssha": "3.2.0",
+		"MimeJS": "git://git.defalsify.org/mime-js.git#lash/plain-part",
+		"jsqr": "^1.4.0",
+		"qrcode": "1.5.3",
+		"ethers": "6.5.1"
+	}
+}
diff --git a/js/registry.js b/js/registry.js
new file mode 100644
index 0000000..45335e0
--- /dev/null
+++ b/js/registry.js
@@ -0,0 +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"}];
+
+async function scanRegistry(registry) {
+	const o = new ethers.Contract(registry, registryInterface, current_provider);
+	let i = 0;
+	let r = {};
+	while (true) {
+		let identifier;
+		try {
+			identifier = await o.identifier(i);
+		} catch(e) {
+			break;	
+		}
+		if (!identifier) {
+			break;
+		}
+		const v = await o.addressOf(identifier);
+		r[identifier] = v;
+		console.debug('found ' + identifier + '=' + v + ' in registry ' + registry);
+		i++;
+	}
+	return r;
+}
diff --git a/js/rpc.js b/js/rpc.js
new file mode 100644
index 0000000..ebe40d5
--- /dev/null
+++ b/js/rpc.js
@@ -0,0 +1,16 @@
+async function pingRpc() {
+	const address = await current_signer.getAddress();
+	const balance = await current_provider.getBalance(address);
+	let set = STATE.RPC_PING;
+	let rst = 0;
+	let r = {
+		balance: balance,
+		address: address,
+	}
+	if (balance < g_minBalance) {
+		set |= STATE.EVM_BALANCE_LOW;
+	} else {
+		rst = STATE.EVM_BALANCE_LOW;
+	}
+	stateChange(r, set, rst);
+}
diff --git a/js/run.js b/js/run.js
new file mode 100644
index 0000000..bea8461
--- /dev/null
+++ b/js/run.js
@@ -0,0 +1,69 @@
+var STATE = {
+	LOCAL_KEY: 1 << 0,
+	LOCAL_KEY_PROBE: 1 << 1,
+	LOCAL_KEY_REQUEST: 1 << 2,
+	LOCAL_KEY_REJECT: 1 << 3,
+	LOCAL_KEY_UNLOCK: 1 << 4,
+	LOCAL_KEY_LOCK: 1 << 5,
+	RPC_CONNECT: 1 << 6,
+	RPC_CHANGE: 1 << 7,
+	RPC_GONE: 1 << 8,
+	RPC_PING: 1 << 9,
+	EVM_BALANCE_LOW: 1 << 10,
+};
+const STATE_KEYS = Object.keys(STATE);
+var g_state = 0;
+var g_chainId = 1337;
+var g_balance = 0;
+var g_minBalance = 10000000;
+var g_registry = '0xb708175e3f6cd850643aaf7b32212afad50e2549';
+
+const DEBUG = true;
+const SESSION_ID = 'gasgasgas';
+const KEY_STORAGEKEY = 'sessionKey_' + SESSION_ID;
+
+const qp = new URLSearchParams(window.location.search);
+
+// borrowed from forro
+async function stateChange(s, set_states, rst_states) {
+	if (!set_states) {
+		set_states = [];
+	} else if (!Array.isArray(set_states)) {
+		set_states = [set_states];
+	}	
+	if (!rst_states) {
+		rst_states = [];
+	} else if (!Array.isArray(rst_states)) {
+		rst_states = [rst_states];
+	}
+	let new_state = g_state;
+	for (let i = 0; i < set_states.length; i++) {
+		let state = parseInt(set_states[i]);
+		new_state |= state;
+	}
+	for (let i = 0; i < rst_states.length; i++) {
+		let state = parseInt(set_states[i]);
+		new_state = new_state & (0xffffffff & ~rst_states[i]);
+	}
+	old_state = g_state;
+	g_state = new_state;
+
+	const ev = new CustomEvent('messagestatechange', {
+		bubbles: true,
+		cancelable: false,
+		composed: true,
+		detail: {
+			s: s,
+			old_state: old_state,
+			state: new_state,
+		},
+	});
+	window.dispatchEvent(ev);
+}
+
+function checkState(bit_check, bit_field) {
+	if (bit_field != 0 && !bit_field) {
+		bit_field = g_state;
+	}
+	return (bit_check & bit_field) > 0;
+}
diff --git a/js/style.css b/js/style.css
new file mode 100644
index 0000000..6e478e5
--- /dev/null
+++ b/js/style.css
@@ -0,0 +1,5 @@
+body {}
+
+.error {
+	color: #ff0000;
+}
