update: update with nebPay(post tx hash to server) and update UI

Author: yupnano

README.md

@@ -58,6 +58,8 @@ window.addEventListener('message', function(e) {
 ```
 
 #### 3.2 Using NebPay SDK
+
+Please refer to Dapp Example [SuperDictionary](https://github.com/15010159959/super-dictionary) to learn how to use this extension.
 
 When developing your Dapp page, you can also use [NebPay SDK](https://github.com/nebulasio/nebPay) to communicate with ExtensionWallet. Just as the example below.
 

background.js

@@ -264,7 +264,8 @@ chrome.runtime.onMessage.addListener(
                 var txData = {
                     "to":request.params.pay.to,
                     "value":request.params.pay.value,
-                    "serialNumber":request.params.serialNumber
+                    "serialNumber":request.params.serialNumber,
+                    "callback":request.params.callback
                 };
                 if(type === "deploy")
                     txData.contract ={

example/nebPay.js

@@ -1,7 +1,7 @@
 require=(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 "use strict";
 
-var payUrl = "http://18.221.150.42/api/pay";
+var payUrl = "https://pay.nebulas.io/api/pay";
 
 module.exports = {
     payUrl: payUrl
@@ -17,7 +17,7 @@ var openExtension = function (params) {
     if (params.listener) {
         callbackMap[params.serialNumber] = params.listener;
     }
-    params.callback = undefined; //postMessage can't contains a function attr
+    //params.callback = undefined;     //postMessage can't contains a function attr
     params.listener = undefined; //postMessage can't contains a function attr
 
     window.postMessage({
@@ -143,7 +143,7 @@ Pay.prototype = {
 
 function openApp(params, options) {
 	// if (typeof window !== "undefined") {
-	params.callback = Config.payUrl;
+	//params.callback = Config.payUrl;
 	var appParams = {
 		category: "jump",
 		des: "confirmTransfer",
@@ -6495,8 +6495,8 @@ var defaultOptions = {
 		showQRCode: false,
 		container: undefined
 	},
-	// callback is the return url/func after payment
-	callback: undefined,
+	// callback is the return url after payment
+	callback: config.payUrl,
 	//listener：specify a listener function to handle payment feedback message(only valid for browser extension)
 	listener: undefined,
 	// if use nrc20pay ,should input nrc20 params like address, name, symbol, decimals

html/js/sendNas.js

@@ -15,6 +15,7 @@ $("#generate").on("click", onClickGenerate);
 $("#reject").on("click", onClickReject);
 $("#modal-confirm .s").on("click", onClickModalConfirmS);
 $("#send_transaction").on("click", onClickSendTransaction);
+$("#change-wallet").on("click", onClickChangeWallet);
 
 uiBlock.insert({
     footer: ".footer",
@@ -25,6 +26,15 @@ uiBlock.insert({
     selectWalletFile: [".select-wallet-file", onUnlockFile]
 });
 
+function hideKeyFileInput(){
+    $(".select-wallet-file").hide()
+    $(".change_wallet").show()
+}
+
+function onClickChangeWallet(){
+    $(".select-wallet-file").show()
+    $(".change_wallet").hide()
+}
 
 function onUnlockFile(swf, fileJson, account, password) {
 
@@ -85,13 +95,7 @@ function onUnlockFile(swf, fileJson, account, password) {
 }
 
 function onClickReject() {
-    // port.postMessage({
-    //     src: "popup",dst:"background",
-    //     data: {
-    //         reject : "true"
-    //     }
-    //
-    // })
+
     messageToBackground("reject","true")
 
     messageToBackground("default","Error: Transaction rejected by user")
@@ -102,12 +106,6 @@ function onClickReject() {
 
 function onClickGenerate() {
 
-    // port.postMessage({
-    //     src: "popup",dst:"background",
-    //     data: {
-    //         generate : "true"
-    //     }
-    // })
     messageToBackground("generate","true")
 
     var fromAddress, toAddress, balance, amount, gaslimit, gasprice, nonce, bnAmount;
@@ -182,6 +180,56 @@ function onClickSendTransaction() {
     $("#value").val($("#amount").val()).trigger("input");
 }
 
+var request = function(obj) {
+    return new Promise((resolve, reject) => {
+        let xhr = new XMLHttpRequest();
+        xhr.open(obj.method || "GET", obj.url);
+        if (obj.headers) {
+            Object.keys(obj.headers).forEach(key => {
+                xhr.setRequestHeader(key, obj.headers[key]);
+            });
+        }
+        xhr.onload = () => {
+            if (xhr.status >= 200 && xhr.status < 300) {
+                resolve(xhr.response);
+            } else {
+                reject(xhr.statusText);
+            }
+        };
+        xhr.onerror = () => reject(xhr.statusText);
+        xhr.send(obj.body);
+    });
+};
+
+
+function psotTxhashToServer(txTobeProcessed, mTxHash){
+
+    if(!txTobeProcessed.callback){
+        console.log("this tx has no \"callback\"")
+        return
+    }
+    var url = txTobeProcessed.callback;
+    var payId = txTobeProcessed.serialNumber;
+    var txHash= mTxHash;
+
+    url = `${url}?payId=${payId}&txHash=${txHash}`;
+
+    var obj = {
+        url: url,
+        method: "POST",
+        body: {}
+    };
+
+    request(obj).then(function (resp) {
+        console.log("psotTxhashToServer result:" + JSON.stringify(resp))
+    }).catch(function (err) {
+        console.log("psotTxhashToServer error:" + JSON.stringify(err))
+    })
+    //     .then(function () {
+    //     window.location.href = "check.html?" + mTxHash;
+    // })
+}
+
 function onClickModalConfirmS() {
     var mTxHash;
 
@@ -192,16 +240,14 @@ function onClickModalConfirmS() {
 
             console.log("txHash got...")  //send txhash msg to background.js
 
-            // port.postMessage({
-            //     src: "popup",dst:"background",
-            //     serialNumber: serialNumber || "",
-            //     data: {
-            //         txhash : resp
-            //     }
-            // });
             messageToBackground("txhash",resp)
 
-            window.location.href = "check.html?" + mTxHash;
+            psotTxhashToServer(txTobeProcessed, mTxHash);
+
+            //window.location.href = "check.html?" + mTxHash;
+            setTimeout(() => {
+                window.location.href = "check.html?" + mTxHash;
+            }, 1000)
 
             return neb.api.getTransactionReceipt(mTxHash);
         }).then(function (resp) {
@@ -210,13 +256,7 @@ function onClickModalConfirmS() {
             $("#receipt_div").show();
 
             console.log("txReceipt got...")  //send txhash msg to background.js
-            // port.postMessage({
-            //     src: "popup",dst:"background",
-            //     serialNumber: serialNumber || "",
-            //     data: {
-            //         receipt : resp
-            //     }
-            // });
+
             messageToBackground("receipt",resp)
 
             // TODO 重新点击需要reset页面状态，清理setTimeout

html/sendNas.html

@@ -55,6 +55,11 @@
     <div class=header></div>
     <div class="container select-wallet-file"></div>
 
+    <div class="container change_wallet active1">
+        <div>Your wallet file is imported.</div>
+        <button id="change-wallet"  class="btn btn-block">change another wallet</button>
+    </div>
+
     <div id=send class="container send">
         <div class="form-group row">
             <div class=col-md-6>

popup.js

@@ -1,3 +1,4 @@
+'use strict';
 
 //this port communicate with background
 var port = chrome.runtime.connect({name: "popup"});
@@ -22,21 +23,22 @@ port.onDisconnect.addListener(function(message) {
     console.log("Port disconnected: " + JSON.stringify(message))
 });
 
+//post message to background
 function messageToBackground(name,msg) {
     var data = {}
     data[name] = msg
     port.postMessage({
         src: "popup",dst:"background",
-        serialNumber: serialNumber || "",
+        serialNumber: txTobeProcessed.serialNumber || "",
         data : data
         // data: {
         //     name : msg
         // }
     });
 }
 
-var txTobeProcessed
-var serialNumber
+var txTobeProcessed = ""
+//var serialNumber
 
 function processTx(tx) {
     txTobeProcessed = tx
@@ -47,7 +49,7 @@ function processTx(tx) {
     if(tx.serialNumber)             //value send by nebPay is using unit of Wei
         $("#amount").val(Unit.fromBasic(tx.value, "nas"));
 
-    serialNumber = tx.serialNumber || "";
+    //serialNumber = tx.serialNumber || "";
     if(!!tx.contract){
         $("#contract_div").css("display","unset");
         $("#contract").val(JSON.stringify(tx.contract))
@@ -71,31 +73,21 @@ var AccAddress ;
 
 function getNextTx() {
     console.log("to get next unapprovedTxs")
-    // port.postMessage({
-    //     src: "popup",
-    //     dst:"background",
-    //     data: {
-    //         getNextTx : 'true'
-    //     }
-    // });
+
     messageToBackground("getNextTx","true")
 
 }
+
+//tell background to check if the network is changed
 function changeNetwork() {
     var url = localSave.getItem("apiPrefix")
-    var chainId = localSave.getItem("chainId")
+    //var chainId = localSave.getItem("chainId")
     console.log("to change network")
-    // port.postMessage({
-    //     src: "popup",
-    //     dst:"background",
-    //     data: {
-    //         network : url,
-    //         chainId : chainId
-    //     })
-    // });
+
     messageToBackground("changeNetwork",url)
 }
 
+//
 function restoreAccount() {
 
     chrome.storage.local.get(['keyInfo'], function(result) {
@@ -106,10 +98,10 @@ function restoreAccount() {
             $(".container select-wallet-file").addClass("active1")
             console.log("unlockFile:")
             UnlockFile(result.fileJson, result.password)
+            hideKeyFileInput()
             getNextTx()
         }
 
-
     });
 }