Add keplr to help page

gnoland/website/static/css/app.css

@@ -148,6 +148,12 @@ div.func_spec div.shell_command {
 	color: #777;
 }
 
+div.func_spec button.keplr_exec {
+	font-family: "Lucida Console", "Monaco", monospace;
+	margin-left: 50px;
+	font-size: 0.9em;
+}
+
 div.func_spec div.shell_command span {
 	display: inline-block;
 	margin-bottom: 10px;

gnoland/website/static/js/realm_help.js

@@ -20,6 +20,13 @@ function main() {
 			updateCommand(u(node));
 		});
 	});
+
+	u(".keplr_exec").on("click", function(e) {
+		var el = u(e.currentTarget);
+		var sender = el.data("sender");
+		var msg = el.data("msg");
+		sendTx(sender, JSON.parse(msg));
+	});
 };
 
 function setMyAddress(addr) {
@@ -97,6 +104,96 @@ function updateCommand(x) {
 	var command = args.join(" ");
 	command = command;
 	shell.append(u("<span>").text(command)).append(u("<br>"));
+
+	// set keplr params
+	var keplrExec = x.find(".keplr_exec");
+	const msg = createMsg(myAddr, realmPath, funcName, vals);
+	keplrExec.data({msg: JSON.stringify(msg), sender: myAddr});
+}
+
+function createMsg(sender, pkgPath, funcName, args) {
+	return  {
+		type: "/vm.m_call",
+		value: {
+			caller: sender,
+			send: "",
+			pkg_path: pkgPath,
+			func: funcName,
+			args: args,
+		}
+	};
+}
+
+function createSignDoc(account, msg, chainId, gas) {
+	return {
+	  msgs: [msg],
+	  fee: { amount: [{
+		amount: "1",
+		denom: "gnot"
+	  }], gas: gas },
+	  chain_id: chainId,
+	  memo: "",
+	  account_number: account.account_number,
+	  sequence: account.sequence,
+	};
+  }
+
+function sendTx(sender, msg) {
+	// validate params
+
+	// get account info.
+	var account = {account_number: 0, sequence: 0};
+	const signDoc = createSignDoc(account, msg, "testchain", "2000000");
+	const chainId = "testchain";
+	window.keplr.enable(chainId).then(function () {
+		return keplr.signAmino(chainId, sender, signDoc, {
+			preferNoSetFee: true, // 1gnot fixed fee 
+		});
+	}).then(function (signature) {
+		const tx = makeStdTx(signature.signed, signature.signature);
+		return broadcastTx(tx);
+	}).then(function (result) {
+		console.log(result.txHash);
+	}).catch(function (err) {
+		console.log(err);
+	});
+}
+
+function makeStdTx(content, signature) {
+	const feeAmount = content.fee.amount;
+
+	return {
+		msg: content.msgs.map(function (msg) {
+			return {
+				"@type": msg.type,
+				...msg.value
+			};
+		}),
+		fee: {
+			gas_wanted: content.fee.gas,
+			gas_fee: feeAmount.length ? `${content.fee.amount[0].amount}${content.fee.amount[0].denom}`: "",
+		},
+		signatures: [{
+			pub_key: {
+				"@type": signature.pub_key.type,
+				value: signature.pub_key.value,
+			},
+			signature: signature.signature,
+		}],
+		memo: content.memo,
+	};
+}
+
+function broadcastTx(tx) {
+	return fetch("/txs", {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json"
+		},
+		body: JSON.stringify(tx)
+	}).then(function (response) {
+		return response.json();
+	});
 }
 
 // Jae: why isn't this a library somewhere?

gnoland/website/views/realm_help.html

@@ -80,6 +80,12 @@
             <div class="shell_command"/>
         </td>
     </tr>
+    <tr class="wallet">
+        <th>keplr wallet</th>
+        <td>
+            <button class="keplr_exec">Execute</button>
+        </td>
+    </tr>
 </table>
 </div>
 {{ end }}