Add keplr wallet 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,23 @@ 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");
+		if (!window.keplr) {
+			alert("Please install keplr extension.");
+			return;
+		}
+
+		walletFn.keplr.signAndBroadcast(sender, JSON.parse(msg)).then(function (result) {
+			alert("Tx: " + result.txhash);
+		}).catch(function (err) {
+			console.log(err);
+			alert("Error: " + err);
+		});
+	});
 };
 
 function setMyAddress(addr) {
@@ -97,6 +114,11 @@ 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 = walletFn.createVmCallMsg(myAddr, realmPath, funcName, vals);
+	keplrExec.data({msg: JSON.stringify(msg), sender: myAddr});
 }
 
 // Jae: why isn't this a library somewhere?

gnoland/website/static/js/wallet.js

@@ -0,0 +1,162 @@
+var remote = "http://gno.land:36657",
+    chainId = "testchain",
+    walletFn = {keplr: {}};
+
+walletFn.createVmCallMsg = function (sender, pkgPath, funcName, args) {
+	return  {
+		type: "/vm.m_call",
+		value: {
+			caller: sender,
+			send: "",
+			pkg_path: pkgPath,
+			func: funcName,
+			args: args,
+		}
+	};
+};
+
+walletFn.createSignDoc = function(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,
+	};
+};
+
+walletFn.keplr.signAndBroadcast = function(sender, msg) {
+	return window.keplr.experimentalSuggestChain(walletFn.getTestnetKeplrConfig())
+	.then(function () {
+		return window.keplr.enable(chainId);
+	})
+	.then(function () {
+		return walletFn.getAccount(sender);
+	})
+	.then(function(account) {
+		const signDoc = walletFn.createSignDoc(account, msg, chainId, "2000000");
+		return window.keplr.signAmino(chainId, sender, signDoc, {
+			// use app fee (1gnot fixed fee)
+			preferNoSetFee: true, 
+		});
+	})
+	.then(function (signature) {
+		const tx = gnopb.makeProtoTx(signature.signed, signature.signature);
+		return walletFn.broadcastTx(tx);
+	});
+};
+
+walletFn.getTestnetKeplrConfig = function() {
+	const addressPrefix = "g";
+	const gnoToken = {
+		coinDenom: "GNOT",
+		coinMinimalDenom: "gnot",
+		coinDecimals: 6,
+		// coinGeckoId: ""
+	};
+
+	return {
+		chainId: chainId,
+		chainName: "GNO Testnet",
+		rpc: 'http://gno.land:36657',
+		rest: 'https://lcd.gno.tools',  // source: https://github.com/disperze/gno-api
+		bech32Config: {
+			bech32PrefixAccAddr: `${addressPrefix}`,
+			bech32PrefixAccPub: `${addressPrefix}pub`,
+			bech32PrefixValAddr: `${addressPrefix}valoper`,
+			bech32PrefixValPub: `${addressPrefix}valoperpub`,
+			bech32PrefixConsAddr: `${addressPrefix}valcons`,
+			bech32PrefixConsPub: `${addressPrefix}valconspub`,
+		},
+		currencies: [gnoToken],
+		feeCurrencies: [gnoToken],
+		stakeCurrency: gnoToken,
+		gasPriceStep: {
+			low: 0.000000001, // min 1gnot for any tx
+			average: 0.000000001,
+			high: 0.000000001,
+		},
+		bip44: { coinType: 118 },
+		// custom feature for GNO chains.
+		features: ["gno"]
+	};
+};
+
+walletFn.getAccount = function(address) {
+	return walletFn.rpcCall("abci_query", {path: `auth/accounts/${address}`})
+	.then(function (data) {
+		const response = data.result.response.ResponseBase;
+		if (response.Error) {
+			throw new Error(response.Log);
+		}
+
+		const account = JSON.parse(atob(response.Data));
+		if (!account) {
+			throw new Error("Account not found");
+		}
+
+		return account.BaseAccount;
+	});
+};
+
+walletFn.broadcastTx = function(tx) {
+	return walletFn.rpcCall("broadcast_tx_commit", {tx: walletFn.tob64(tx)}).then(function (data) {
+		if (data.error) {
+			throw new Error(data.error.message);
+		}
+
+		const checkTx = data.result.check_tx.ResponseBase;
+		if (checkTx.Error) {
+			throw new Error(checkTx.Log);
+		}
+
+		const deliverTx = data.result.deliver_tx.ResponseBase;
+		if (deliverTx.Error) {
+			throw new Error(deliverTx.Log);
+		}
+
+		return {
+			height: data.result.height,
+			txhash: walletFn.base64ToHex(data.result.hash),
+			gasWanted: deliverTx.GasWanted,
+			gasUsed: deliverTx.GasUsed,
+		};
+	});
+};
+
+walletFn.tob64 = function(data) {
+	return btoa(String.fromCharCode.apply(null, data));
+};
+
+walletFn.base64ToHex = function(data) {
+	return atob(data)
+		.split('')
+		.map(function (c) {
+		  return ('0' + c.charCodeAt(0).toString(16)).slice(-2);
+		})
+	   .join('')
+	   .toUpperCase();
+}
+
+walletFn.rpcCall = function(method, params) {
+	const payload  = {
+		"jsonrpc": "2.0",
+		"method": method,
+		"params": params,
+		"id": 1
+	};
+
+	return fetch(remote, {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json"
+		},
+		body: JSON.stringify(payload)
+	}).then(function (response) {
+		return response.json();
+	});
+}

gnoland/website/views/home.html

@@ -17,6 +17,7 @@
 Welcome to Gno.land.
 
  * [Install `gnokey`](https://github.com/gnolang/gno/)
+ * [Install Keplr wallet](https://gno.land/r/boards:gnolang/157)
  * [Acquire testnet tokens](/faucet)
  * [Read the quickstart guide](/r/boards:gnolang/4)
 

gnoland/website/views/realm_help.html

@@ -5,6 +5,8 @@
         <link rel="stylesheet" href="/static/css/app.css"/>
         <script src="/static/js/umbrella.min.js"></script>
         <script src="/static/js/marked.min.js"></script>
+        <script src="/static/js/gnopb.min.js"></script>
+        <script src="/static/js/wallet.js"></script>
         <script src="/static/js/realm_help.js"></script>
     </head>
     <body onload="main()">
@@ -80,6 +82,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 }}