Supported multiple keychain accounts

Author: Booyoun-Kim

README.md

@@ -32,6 +32,9 @@ var keystation = new Keystation();
 keystation.client = "YOUR_WEB_URL";
 keystation.lcd = "https://lcd-do-not-abuse.cosmostation.io";
 keystation.path = "44/118/0/0/0";
+
+// The account parameter is required for users having multiple keychain accounts.
+var keystationAccount = "";
 ```
 
 ```js
@@ -45,16 +48,19 @@ var popup = keystation.openWindow("signin", prefix);
 var txJson = {"account_number":"18012","chain_id":"cosmoshub-2","fee":{"amount":[{"amount":"5000","denom":"uatom"}],"gas":"200000"},"memo":"","msgs":[{"type":"cosmos-sdk/MsgSend","value":{"amount":[{"amount":"10000","denom":"uatom"}],"from_address":"cosmos1z67fshyr48pa9a6htdz4qd0zullfk6y0fgvxv7","to_address":"cosmos10nv3yj0jdxf02vxyc0tavf97fdvppdth6wmcn3"}}],"sequence":"24"};
 
 var txJsonStr = JSON.stringify(txJson);
-var popup = keystation.openWindow("transaction", txJsonStr);
+var popup = keystation.openWindow("transaction", txJsonStr, keystationAccount);
 ```
 
 ```js
 // add an EventListener
 window.addEventListener("message", function(e) {
     if (e.origin != "https://keystation.cosmostation.io") return;
     console.log(e.data);
+    // e.data.account : User's keychain account. Remember this account!
+	keystationAccount = e.data.account;
 } , false);
 ```
+If the user is log in as Alice, he or she should use Alice account to sign transaction.
 
 ## Supporting Transaction Message Types
 

example/index.html

@@ -21,6 +21,10 @@
 		keystation.lcd = "https://lcd-do-not-abuse.cosmostation.io";
 		keystation.path = "44/118/0/0/0";
 
+		// The account parameter is required for users having multiple keychain accounts.
+		// Remember it and use to sign a transaction
+		var keystationAccount = "";
+
 		function login() {
 			var prefix = "cosmos";
 			var popup = keystation.openWindow("signin", prefix);
@@ -34,7 +38,7 @@
 
 		function send() {
 			var txJsonStr = $.trim($("textarea").val());
-			var popup = keystation.openWindow("transaction", txJsonStr);
+			var popup = keystation.openWindow("transaction", txJsonStr, keystationAccount);
 			var popupTick = setInterval(function() {
 				if (popup.closed) {
 					clearInterval(popupTick);
@@ -46,6 +50,8 @@
 		window.addEventListener("message", function(e) {
 			if (e.origin != "https://keystation.cosmostation.io") return;
 			console.log(e.data);
+			// e.data.account : User's keychain account. Remember this account!
+			keystationAccount = e.data.account;
 			document.getElementById("result").innerHTML = JSON.stringify(e.data);
 		} , false);
 	</script>

main.go

@@ -36,13 +36,15 @@ func main() {
 		HandlerFunc(signInHandler).
 		Methods("GET")
 	r.Path("/session").
+		Queries("account", "{account}").
 		Queries("client", "{client}").
 		Queries("lcd", "{lcd}").
 		Queries("path", "{path}").
 		Queries("payload", "{payload}").
 		HandlerFunc(sessionInHandler).
 		Methods("GET")
 	r.Path("/tx").
+		Queries("account", "{account}").
 		Queries("client", "{client}").
 		Queries("lcd", "{lcd}").
 		Queries("path", "{path}").

model.go

@@ -23,16 +23,19 @@ type importTemplateParams struct {
 type sessionTemplateParams struct {
 	QueryUrl string
 	Payload string
+	Account string
 }
 
 type ImportForm struct {
+	Account string
 	Client string
 	Lcd string
 	Path string
 	Payload string
 }
 
 type txTemplateParams struct {
+	Account string
 	Client string
 	Lcd string
 	Path string

service.go

@@ -98,11 +98,18 @@ func signInHandler(w http.ResponseWriter, r *http.Request) {
 func sessionInHandler(w http.ResponseWriter, r *http.Request) {
 	// HTML 폼 전송 처리
 	importForm := ImportForm{
+		Account: r.FormValue("account"),
 		Client: r.FormValue("client"),
 		Path: r.FormValue("path"),
 		Payload: r.FormValue("payload"),
 	}
 
+	account, err := url.QueryUnescape(importForm.Account)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
 	client, err := url.QueryUnescape(importForm.Client)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
@@ -139,6 +146,7 @@ func sessionInHandler(w http.ResponseWriter, r *http.Request) {
 	params := sessionTemplateParams{}
 	params.QueryUrl = "import?client=" + url.QueryEscape(client) + "&lcd=" + url.QueryEscape(lcd) + "&path=" + url.QueryEscape(path) + "&payload=" + url.QueryEscape(payloadForQuery)
 	params.Payload = payload	// address
+	params.Account = account	// keychain account
 
 	sessionTemplate.Execute(w, params)
 	return
@@ -147,6 +155,12 @@ func sessionInHandler(w http.ResponseWriter, r *http.Request) {
 func txHandler(w http.ResponseWriter, r *http.Request) {
 	vars := mux.Vars(r)
 
+	account, err := url.QueryUnescape(vars["account"])
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
 	client, err := url.QueryUnescape(vars["client"])
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
@@ -172,6 +186,7 @@ func txHandler(w http.ResponseWriter, r *http.Request) {
 	}
 
 	params := txTemplateParams{}
+	params.Account = account
 	params.Client = client
 	params.Lcd = lcd
 	params.Path = path

www/js/pin.js

@@ -152,8 +152,13 @@
                         var prefix = getParameterByName('payload');
                         var address = getKeyStationMainAddress(decryptedMnemonics, hdPathResult, prefix);
 
+                        var msgObj = {
+                           "address": address,
+                           "account": $(".input-account").val()
+                        }
+
                         setTimeout(function () {
-                           window.opener.postMessage(address, "*");
+                           window.opener.postMessage(msgObj, "*");
                            window.close();
                         }, 500);
                      } else if (window.pinType == "tx") {

www/lib/keystation.js

@@ -30,7 +30,8 @@ function Keystation(client, lcd, path) {
 	this.keystationUrl = "https://keystation.cosmostation.io";
 }
 
-Keystation.prototype.openWindow = function(type, payload) {
+Keystation.prototype.openWindow = function(type, payload, account = "") {
+	// The account parameter is required for users having multiple keychain accounts.
 	var apiUrl = "";
 	switch (type) {
 		case "signin":
@@ -41,5 +42,5 @@ Keystation.prototype.openWindow = function(type, payload) {
 			break;
 	}
 
-	return PopupCenter(this.keystationUrl + '/' + apiUrl + '?client=' + encodeURIComponent(this.client) + '&lcd=' + encodeURIComponent(this.lcd) + '&path=' + encodeURIComponent(this.path) + '&payload=' + encodeURIComponent(payload),'','400','690', {toolbar:1, resizable:1, location:1, menubar:1, status:1});
+	return PopupCenter(this.keystationUrl + '/' + apiUrl + '?account=' + encodeURIComponent(account) + '&client=' + encodeURIComponent(this.client) + '&lcd=' + encodeURIComponent(this.lcd) + '&path=' + encodeURIComponent(this.path) + '&payload=' + encodeURIComponent(payload),'','400','690', {toolbar:1, resizable:1, location:1, menubar:1, status:1});
 }

www/session.html

@@ -23,8 +23,12 @@
 		gtag('config', 'UA-146700011-1');
 	</script>
 	<script>
-		function sendEventToParent(data) {
-			window.opener.postMessage(data, "*");
+		function sendEventToParent(address, account) {
+			var msgObj = {
+				"address": address,
+				"account": account
+			}
+			window.opener.postMessage(msgObj, "*");
 			window.close();
 		}
 	</script>
@@ -38,7 +42,7 @@ <h2 id="session-page-title">Save your Account to Keychain</h2>
 			<form class="keystation-form">
 				<img src="img/keychain.png" alt="" width="100%"><br><br>
 				<p>You MUST press "Save" in order to complete registration of your account. If this pop-up does not appear, please press the Key logo on the top right corner of your browser.</p>
-				<button type="button" onclick="sendEventToParent({{.Payload}})">Next</button>
+				<button type="button" onclick="sendEventToParent({{.Payload}}, {{.Account}})">Next</button>
 			</form>
 			<a href="https://support.google.com/chrome/answer/95606?co=GENIE.Platform%3DDesktop&hl=en" target="_blank">How can I manage saved mnemonics?</a>
 			<div class="form-fotter">

www/transaction.html

@@ -34,7 +34,7 @@ <h1><img src="img/keystation_logo_.png" alt="" width="145"></h1>
 			<h2>Sign Transaction</h2>
 			<form class="keystation-form">
 				<input style="display:none;" type="text" tabindex="-1"
-					   spellcheck="false">
+					   spellcheck="false" name="account" value="{{.Account}}">
 				<input style="display:none;" type="password" autocomplete="current-password" tabindex="-1"
 					   spellcheck="false">
 				<div class="keystation-url-info">