Skip to content

Commit

Permalink
Merge branch 'ft-custom_rpc_node'
Browse files Browse the repository at this point in the history
* ft-custom_rpc_node:
  Added logic to check the perform_address_lookups setting to add the event_0xaddress on hover behaviour
  Added logic to handle toggling address lookups (via rpc)
  Added logic to handle setting address lookups and a browser call endpoint
  Added line break
  Added logic to disable the RPC node address lookups
  Increased version number
  Added a small indicator to the popup box to show green/red box if any of the RPC commands fail
  Removed br's and used css properties instead for that house style
  Fixes style issues being inherited by the webpage. Now the popup has a house style. Yay
  Issue #247 - Made RPC calls async to prevent lag when waiting for RPC responses
  Added padding and margins
  Added twitter link
  Added Quiknode link to copy
  Added logic so the RPC node can be changed
  Added elements to give the user the ability to change the RPC node
  Added logic to modify the RPC node
  • Loading branch information
409H committed Jan 5, 2018
2 parents 7be0701 + 2700095 commit bd0dc3c
Show file tree
Hide file tree
Showing 8 changed files with 294 additions and 20 deletions.
30 changes: 28 additions & 2 deletions css/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@
}

.ext-etheraddresslookup-address_stats_hover .ext-etheraddresslookup-address_stats_hover_content {
all: initial;
display: none;
position: absolute;
bottom: 5%;
Expand All @@ -121,12 +122,14 @@
overflow-y: hidden;
}

.ext-etheraddresslookup-address_stats_hover .ext-etheraddresslookup-address_stats_hover_content > p {
margin: 5%;
.ext-etheraddresslookup-address_stats_hover .ext-etheraddresslookup-address_stats_hover_content > span {
all: initial;
font-size: 10pt;
text-decoration: none;
font-style: normal;
font-family: 'Verdana';
display: block;
line-height: 2em;
}
.ext-etheraddresslookup-address_stats_hover .ext-etheraddresslookup-address_stats_hover_content > a > img {
display: inline;
Expand All @@ -140,4 +143,27 @@

.ext-etheraddresslookup-0xaddress:hover .ext-etheraddresslookup-address_stats_hover .ext-etheraddresslookup-address_stats_hover_content {
display: inline-block;
}

.ext-etheraddresslookup-address_stats_hover_node_error {
all: initial;
background: #d02626;
border-radius: 50%;
height: 10px;
width: 10px;
position: absolute;
right: 5%;
display: none;
z-index: 2;
}
.ext-etheraddresslookup-address_stats_hover_node_ok {
all: initial;
background: #32a735;
border-radius: 50%;
height: 10px;
width: 10px;
position: absolute;
right: 5%;
display: none;
z-index: 1;
}
93 changes: 80 additions & 13 deletions js/DomManipulator.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ class EtherAddressLookup {
setDefaultExtensionSettings()
{
this.blHighlight = false;
this.blPerformAddressLookups = true;
this.strBlockchainExplorer = "https://etherscan.io/address";
this.strRpcProvider = "https://localhost:8545";

Expand Down Expand Up @@ -41,6 +42,12 @@ class EtherAddressLookup {
++this.intSettingsCount;
}.bind(this));

//Get the perform address lookup option
objBrowser.runtime.sendMessage({func: "perform_address_lookups"}, function(objResponse) {
this.blPerformAddressLookups = objResponse.resp;
++this.intSettingsCount;
}.bind(this));

//Update the DOM once all settings have been received...
setTimeout(function() {
// Needs to happen after user settings have been collected
Expand Down Expand Up @@ -142,7 +149,9 @@ class EtherAddressLookup {
}
this.convertAddressToLink();

this.setAddressOnHoverBehaviour();
if(this.blPerformAddressLookups > 0) {
this.setAddressOnHoverBehaviour();
}
}
}

Expand Down Expand Up @@ -357,12 +366,18 @@ class EtherAddressLookup {
return false;
}

let intUniqueId = (new Date()).getTime();

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>";
objHoverNodeContent.innerHTML = "<p id='ext-etheraddresslookup-fetching_data_"+intUniqueId+"'><strong>Fetching Data...</strong></p>";
objHoverNodeContent.innerHTML += "<div id='ext-etheraddresslookup-address_stats_hover_node_error_"+intUniqueId+"' class='ext-etheraddresslookup-address_stats_hover_node_error'></div>";
objHoverNodeContent.innerHTML += "<div id='ext-etheraddresslookup-address_stats_hover_node_ok_"+intUniqueId+"' class='ext-etheraddresslookup-address_stats_hover_node_ok'></div>";
objHoverNodeContent.innerHTML += "<span id='ext-etheraddresslookup-address_balance_"+intUniqueId+"'></span>";
objHoverNodeContent.innerHTML += "<span id='ext-etheraddresslookup-transactions_out_"+intUniqueId+"'></span>";
objHoverNodeContent.innerHTML += "<span id='ext-etheraddresslookup-contract_address_"+intUniqueId+"'></span>";

objHoverNode.appendChild(objHoverNodeContent);
this.appendChild(objHoverNode);
Expand All @@ -371,17 +386,69 @@ class EtherAddressLookup {
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>";
let objHoverNodeContent = this.children[1].children[0];

//Get transaction count
web3.eth.getTransactionCount(str0xAddress, function(error, result) {
if(objHoverNodeContent.children[0].id == "ext-etheraddresslookup-fetching_data_"+intUniqueId) {
objHoverNodeContent.children[0].style.display = 'none';
}

var intTransactionCount = "";
if(error) {
intTransactionCount = -1;
objHoverNodeContent.querySelector("#ext-etheraddresslookup-address_stats_hover_node_error_"+intUniqueId).style.display = "inline";
} else {
objHoverNodeContent.querySelector("#ext-etheraddresslookup-address_stats_hover_node_ok_"+intUniqueId).style.display = "inline";
intTransactionCount = parseInt(result).toLocaleString();
}

var objTransactionCount = objHoverNodeContent.querySelector("#ext-etheraddresslookup-transactions_out_"+intUniqueId);
objTransactionCount.innerHTML = "<strong>Transactions out:</strong> "+ intTransactionCount;
});

//Get the account balance
web3.eth.getBalance(str0xAddress, function(error, result) {
if(objHoverNodeContent.children[0].id == "ext-etheraddresslookup-fetching_data_"+intUniqueId) {
objHoverNodeContent.children[0].style.display = 'none';
}

var flEthBalance = "";
if(error) {
flEthBalance = -1;
objHoverNodeContent.querySelector("#ext-etheraddresslookup-address_stats_hover_node_error_"+intUniqueId).style.display = "inline";
} else {
objHoverNodeContent.querySelector("#ext-etheraddresslookup-address_stats_hover_node_ok_"+intUniqueId).style.display = "inline";
flEthBalance = web3.fromWei(result.toString(10), "ether").toLocaleString("en-US", {maximumSignificantDigits: 9});
}

var objAddressBalance = objHoverNodeContent.querySelector("#ext-etheraddresslookup-address_balance_"+intUniqueId);
objAddressBalance.innerHTML += "<strong>ETH:</strong> "+ flEthBalance;
});

//See if the address is a contract
web3.eth.getCode(str0xAddress, function(error, result) {
if(objHoverNodeContent.children[0].id == "ext-etheraddresslookup-fetching_data_"+intUniqueId) {
objHoverNodeContent.children[0].style.display = 'none';
}

var objContractAddress = objHoverNodeContent.querySelector("#ext-etheraddresslookup-contract_address_"+intUniqueId);

if(error) {
objContractAddress.innerHTML += "<small>Unable to determine if contract</small>";
objHoverNodeContent.querySelector("#ext-etheraddresslookup-address_stats_hover_node_error_"+intUniqueId).style.display = "inline";
} else {
objHoverNodeContent.querySelector("#ext-etheraddresslookup-address_stats_hover_node_ok_"+intUniqueId).style.display = "inline";
var blIsContractAddress = result == "0x" ? false : true;
if (blIsContractAddress) {
objContractAddress.innerHTML += "<small>This is a contract address</small>";
}
}
});

if(objResponse.resp.includes("quiknode.io")) {
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>";
}
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));
Expand Down
104 changes: 104 additions & 0 deletions js/app/rpcNodeSelector.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
let objBrowser = chrome ? chrome : browser;

class RpcNodeSelector
{

constructor()
{
//No need to do anything here.
}

/**
* Populates the RPC node input box with the current RPC node endpoint.
*/
populateRpcNodeInput()
{
objBrowser.runtime.sendMessage({func: "rpc_provider"}, function(objResponse) {
document.getElementById("ext-etheraddresslookup-rpcnode_modify_url").value = objResponse.resp;
});
}

resetFormValues(objEvent)
{
objBrowser.runtime.sendMessage({func: "rpc_default_provider"}, function(objResponse) {
document.getElementById("ext-etheraddresslookup-rpcnode_modify_url").value = objResponse.resp;
});

objEvent.preventDefault();
}

saveFormValues(objEvent)
{
var objRpcValue = document.getElementById("ext-etheraddresslookup-rpcnode_modify_url");

document.getElementById("ext-etheraddresslookup-rpcnode_connected_status").classList.add("hide-me");
document.getElementById("ext-etheraddresslookup-rpcnode_eth_version").classList.add("hide-me");
document.getElementById("ext-etheraddresslookup-rpcnode_api_version").classList.add("hide-me");
document.getElementById("ext-etheraddresslookup-rpcnode_network_version").classList.add("hide-me");

var objRpcSuccessNode = document.getElementById("ext-etheraddresslookup-rpcnode_success");
objRpcSuccessNode.classList.add("hide-me");

if( RpcNodeSelector.rpcEndpointIsAvailable(objRpcValue.value) ) {
localStorage.setItem("ext-etheraddresslookup-rpc_node", objRpcValue.value)
}

objEvent.preventDefault();

RpcNodeSelector.updateNodeDetails();

return false;
}

static rpcEndpointIsAvailable(strHttpProvider)
{
var objWeb3 = new Web3(new Web3.providers.HttpProvider(strHttpProvider));
var objRpcErrorNode = document.getElementById("ext-etheraddresslookup-rpcnode_errors");
objRpcErrorNode.innerText = "";
objRpcErrorNode.classList.add("hide-me");

try {
var strVersion = objWeb3.version.ethereum;
} catch (objException) {
objRpcErrorNode.innerText = objException.message;
objRpcErrorNode.classList.remove("hide-me");
return false;
}

var objRpcSuccessNode = document.getElementById("ext-etheraddresslookup-rpcnode_success");
objRpcSuccessNode.classList.remove("hide-me");

console.log("RPC Node Version: "+ strVersion);
return true;
}

static updateNodeDetails()
{
var strWeb3Provider = localStorage.getItem("ext-etheraddresslookup-rpc_node");
var objWeb3 = new Web3(new Web3.providers.HttpProvider(strWeb3Provider));

document.getElementById("ext-etheraddresslookup-rpcnode_connected_status").classList.remove("hide-me");
document.getElementById("ext-etheraddresslookup-rpcnode_eth_version").classList.remove("hide-me");
document.getElementById("ext-etheraddresslookup-rpcnode_api_version").classList.remove("hide-me");
document.getElementById("ext-etheraddresslookup-rpcnode_network_version").classList.remove("hide-me");

var blConnected = objWeb3.isConnected();
document.getElementById("ext-etheraddresslookup-rpcnode_connected_status").innerHTML = (blConnected ? "CONNECTED" : "DISCONNECTED") + "<br />";
if(blConnected) {
document.getElementById("ext-etheraddresslookup-rpcnode_eth_version").innerHTML = "ETH Version: " + objWeb3.version.ethereum +"<br />";
document.getElementById("ext-etheraddresslookup-rpcnode_api_version").innerHTML = "API Version: " + objWeb3.version.api +"<br />";
document.getElementById("ext-etheraddresslookup-rpcnode_network_version").innerHTML = "API Version: " + objWeb3.version.network +"<br />";
}
}

}

//On page load do everything.
(function() {
let objRpcNodeSelector = new RpcNodeSelector();
objRpcNodeSelector.populateRpcNodeInput();

var objForm = document.getElementById("ext-etheraddresslookup-rpcnode_modify_form");
objForm.addEventListener("reset", objRpcNodeSelector.resetFormValues, true);
objForm.addEventListener("submit", objRpcNodeSelector.saveFormValues, true);
})();
22 changes: 22 additions & 0 deletions js/app/toggleAddressLookups.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
//On page load it checks/unchecks the checkbox
(function() {
refreshPerformAddressLookups();
})();

//Sets the local storage to remember their RPC address lookup setting
function togglePerformAddressLookups()
{
var objAddressLookups = document.getElementById("ext-etheraddresslookup-perform_address_lookups");
var intAddressLookups = objAddressLookups.checked ? 1 : 0;
localStorage.setItem("ext-etheraddresslookup-perform_address_lookups", intAddressLookups);

refreshPerformAddressLookups();
}

function refreshPerformAddressLookups() {
var intAddressLookups = localStorage.getItem("ext-etheraddresslookup-perform_address_lookups");
if(intAddressLookups === null) {
intAddressLookups = 1;
}
document.getElementById("ext-etheraddresslookup-perform_address_lookups").checked = (intAddressLookups == 1 ? true : false);
}
23 changes: 22 additions & 1 deletion js/options.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ let objBrowser = chrome ? chrome : browser;
objOptionBlockchainExplorer.addEventListener('change', toggleBlockchainExplorer);
}

//Toggle the address lookups option and set it in LocalStorage
var objAddressLookups = document.getElementById('ext-etheraddresslookup-perform_address_lookups');
if(objAddressLookups) {
objAddressLookups.addEventListener('click', togglePerformAddressLookups);
}

//Toggle the blacklist domains option and set it in LocalStorage
var objBlacklistDomains = document.getElementById('ext-etheraddresslookup-blacklist_domains');
if(objBlacklistDomains) {
Expand Down Expand Up @@ -97,7 +103,22 @@ objBrowser.runtime.onMessage.addListener(
strResponse = getWhitelistedDomains();
break;
case 'rpc_provider' :
strResponse = "https://freely-central-lark.quiknode.io/9fe4c4a0-2ea2-4ac1-ab64-f92990cd2914/118-xxADc8hKSSB9joCb-g==/";
if(localStorage.getItem("ext-etheraddresslookup-rpc_node") === null) {
strResponse = "https://freely-central-lark.quiknode.io/9fe4c4a0-2ea2-4ac1-ab64-f92990cd2914/118-xxADc8hKSSB9joCb-g==/";
} else {
strResponse = localStorage.getItem("ext-etheraddresslookup-rpc_node");
}
break;
case 'rpc_default_provider' :
strResponse = "https://freely-central-lark.quiknode.io/9fe4c4a0-2ea2-4ac1-ab64-f92990cd2914/118-xxADc8hKSSB9joCb-g==/";
break;
case 'perform_address_lookups' :
//This option is enabled by default
if(localStorage.getItem("ext-etheraddresslookup-perform_address_lookups") === null) {
strResponse = 1;
} else {
strResponse = localStorage.getItem("ext-etheraddresslookup-perform_address_lookups");
}
break;
default:
strResponse = "unsupported";
Expand Down
2 changes: 1 addition & 1 deletion manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -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.13.2",
"version": "1.14",

"browser_action": {
"default_icon": "images/icon.png",
Expand Down
Loading

0 comments on commit bd0dc3c

Please sign in to comment.