Merge branch 'ft-address_stats'

* ft-address_stats:
  Added more significant digits to the ETH balance
  Fixes issue with large number ETH accounts
  Added logic to show a message when waiting for the RPC to respond
  Extended width of the popup container
  Formalised the content font styling
  Added more logic to populate the address popover container
  Added more styling for the popup container
  Allowed for quiknode logo to be used by the web
  Added quiknode logo
  Added logic so it only does a lookup once. Added logic to put divs for the stat content holder
  Added styling for the onhover to show the ETH balance
  Fixed logic to fetch the ETH balance for an address
  Added logic to fetch the rpc provider - soon will be configurable and in local storage like other settings. This is the default value
  Got the address onhover event in a workable state, console logging address balances. Need to tidy the code up a lot.
  Added the web3 light js library
  Increased version number and loaded the web3 library
  Removed screenshots

css/app.css

@@ -50,10 +50,10 @@
 }
 
 #ext-etheraddresslookup-report {
-	margin-bottom: 20px;
-	padding: 8px 20px 8px 17px;
-	width: 100%;
-	font-size: 10pt;
+    margin-bottom: 20px;
+    padding: 8px 20px 8px 17px;
+    width: 100%;
+    font-size: 10pt;
 }
 
 .ext-etheraddresslookup-center {
@@ -96,4 +96,48 @@
     box-shadow: inset rgba(255, 255, 255, 0.6) 0 2px 2px, inset rgba(0, 0, 0, 0.3) 0 -2px 6px;
     display: inline-block;
     margin-bottom: -0.2em;
+}
+
+.ext-etheraddresslookup-address_stats_hover {
+    z-index: 10;
+    position: absolute;
+}
+
+.ext-etheraddresslookup-address_stats_hover .ext-etheraddresslookup-address_stats_hover_content {
+    display: none;
+    position: absolute;
+    bottom: 5%;
+    left: 5%;
+    right: 5%;
+    top: 10%;
+    background-color: #fff;
+    color: #000;
+    padding: .5em;
+    z-index: 99999;
+    width: 275px;
+    height: 120px;
+    border: 2px solid #e4e4e4;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+.ext-etheraddresslookup-address_stats_hover .ext-etheraddresslookup-address_stats_hover_content > p {
+    margin: 5%;
+    font-size: 10pt;
+    text-decoration: none;
+    font-style: normal;
+    font-family: 'Verdana';
+}
+.ext-etheraddresslookup-address_stats_hover .ext-etheraddresslookup-address_stats_hover_content > a > img {
+    display: inline;
+    width: 100px;
+    height: 22px;
+    bottom: 0%;
+    right: 5%;
+    position: absolute;
+    margin: 0;
+}
+
+.ext-etheraddresslookup-0xaddress:hover .ext-etheraddresslookup-address_stats_hover .ext-etheraddresslookup-address_stats_hover_content {
+    display: inline-block;
 }

js/DomManipulator.js

@@ -2,9 +2,10 @@ let objBrowser = chrome ? chrome : browser;
 
 class EtherAddressLookup {
 
-    constructor()
+    constructor(objWeb3)
     {
         console.log("Init EAL");
+        this.objWeb3 = objWeb3;
         this.setDefaultExtensionSettings();
         this.init();
     }
@@ -13,6 +14,7 @@ class EtherAddressLookup {
     {
         this.blHighlight = false;
         this.strBlockchainExplorer = "https://etherscan.io/address";
+        this.strRpcProvider = "https://localhost:8545";
 
         this.intSettingsCount = 0;
         this.intSettingsTotalCount = 2;
@@ -85,9 +87,9 @@ class EtherAddressLookup {
         // Register Replace Patterns
         this.replacePatterns = [
             // Ethereum Address Replace
-            '$1<a title="See this address on the blockchain explorer" ' +
-            'href="' + this.strBlockchainExplorer + '/$2" ' +
-            'class="ext-etheraddresslookup-link" ' +
+            '$1<a href="' + this.strBlockchainExplorer + '/$2" ' +
+            'data-address="$2"' +
+            'class="ext-etheraddresslookup-link ext-etheraddresslookup-0xaddress" ' +
             'target="'+ this.target +'">' +
             '<div class="ext-etheraddresslookup-blockie" data-ether-address="$2" ></div> $2' +
             '</a>$3',
@@ -139,6 +141,8 @@ class EtherAddressLookup {
                 this.blacklistedDomainCheck();
             }
             this.convertAddressToLink();
+
+            this.setAddressOnHoverBehaviour();
         }
     }
 
@@ -334,10 +338,58 @@ class EtherAddressLookup {
         }
         return false;
     }
+
+    //Sets the on hover behaviour for the address
+    // - get the address stats with rpc
+    setAddressOnHoverBehaviour()
+    {
+        var objNodes = document.getElementsByClassName("ext-etheraddresslookup-0xaddress");
+        for (var i = 0; i < objNodes.length; i++) {
+            objNodes[i].addEventListener('mouseover', this.event_0xAddressHover, false);
+        }
+    }
+
+    //The event handler for 0x address mouseover.
+    //It will do the logic to call the web3 rpc to get the address balance.
+    event_0xAddressHover()
+    {
+        if(this.children.length > 1 && this.children[1].className == "ext-etheraddresslookup-address_stats_hover") {
+            return false;
+        }
+
+        var objHoverNode = document.createElement("div");
+        objHoverNode.className = "ext-etheraddresslookup-address_stats_hover";
+        var objHoverNodeContent = document.createElement("div");
+        objHoverNodeContent.className = "ext-etheraddresslookup-address_stats_hover_content";
+        objHoverNodeContent.innerHTML = "<p><strong>Fetching Data...</strong></p>";
+        objHoverNodeContent.innerHTML += "<a href='https://quiknode.io/?ref=EtherAddressLookup' target='_blank' title='RPC node managed by Quiknode.io'><img src='"+ chrome.runtime.getURL("/images/powered-by-quiknode.png") +"' /></a>";
+
+        objHoverNode.appendChild(objHoverNodeContent);
+        this.appendChild(objHoverNode);
+
+        //Get the RPC provider for the user
+        objBrowser.runtime.sendMessage({func: "rpc_provider"}, function(objResponse) {
+            var web3 = new Web3(new Web3.providers.HttpProvider(objResponse.resp));
+            var str0xAddress = this.getAttribute("data-address");
+            var strAccountBalance = parseFloat(web3.fromWei(web3.eth.getBalance(str0xAddress).toString(10), "ether")).toLocaleString('en-US', {maximumSignificantDigits: 9});
+            var intTransactionCount = parseInt(web3.eth.getTransactionCount(str0xAddress)).toLocaleString();
+            var blIsContractAddress = web3.eth.getCode(str0xAddress) == "0x" ? false: true;
+
+            var objHoverNodeContent = this.children[1].children[0];
+            objHoverNodeContent.innerHTML = "<p><strong>ETH:</strong> "+ strAccountBalance +"</p>";
+            objHoverNodeContent.innerHTML += "<p><strong>Transactions out:</strong> "+ intTransactionCount +"</p>";
+            if(blIsContractAddress) {
+                objHoverNodeContent.innerHTML += "<p><small>This is a contract address</small></p>";
+            }
+            objHoverNodeContent.innerHTML += "<a href='https://quiknode.io/?ref=EtherAddressLookup' target='_blank' title='RPC node managed by Quiknode.io'><img src='"+ chrome.runtime.getURL("/images/powered-by-quiknode.png") +"' /></a>";
+
+            return false;
+        }.bind(this));
+    }
 }
 
 window.addEventListener("load", function() {
-    let objEtherAddressLookup = new EtherAddressLookup();
+    let objEtherAddressLookup = new EtherAddressLookup(Web3);
 });
 
 //Send message from the extension to here.

js/options.js

@@ -70,6 +70,9 @@ objBrowser.runtime.onMessage.addListener(
                 console.log("Getting whitelisted domain list");
                 strResponse = getWhitelistedDomains();
                 break;
+            case 'rpc_provider' :
+                    strResponse = "https://instantly-clear-sloth.quiknode.io/fc551b4e-b3bf-4b0b-b438-aeb6c9c311f5/pF749Rxn3Mn8vgaCD4FM_A==/";
+                break;
             default:
                 strResponse = "unsupported";
                 break;

manifest.json

@@ -4,7 +4,7 @@
   "name": "EtherAddressLookup",
   "short_name": "EtherAddressLookup",
   "description": "Adds links to strings that look like Ethereum addresses to your favorite blockchain explorer.",
-  "version": "1.11.0",
+  "version": "1.12.0",
 
   "browser_action": {
     "default_icon": "images/icon.png",
@@ -31,7 +31,10 @@
   },{
     "run_at": "document_end",
     "matches": ["http://*/*", "https://*/*"],
-    "js": ["js/DomManipulator.js"],
+    "js": [
+      "js/app/lib/web3-light.min.js",
+      "js/DomManipulator.js"
+    ],
     "css": ["css/app.css"]
   }],
 
@@ -43,5 +46,9 @@
     "16": "images/ether-16x16.png",
     "48": "images/ether-48x48.png",
     "128": "images/ether-128x128.png"
-  }
+  },
+
+  "web_accessible_resources": [
+    "images/powered-by-quiknode.png"
+  ]
 }