UX tweaks and support for donations via BTCPay

all for demo site only:
- remove github's javascript buttons from homepage in favor of github-api-request followed by self-rendered buttons
- donation modal with support for BTCPay-backed donations of set denominations and hidden-but-expandable old donation addresses
- tweak footer style and remove old donation addresses in favor of another donation button that shows the modal

app.js

@@ -242,6 +242,26 @@ function loadMiningPoolConfigs() {
 	}
 }
 
+function getSourcecodeProjectMetadata() {
+	var options = {
+		url: "https://api.github.com/repos/janoside/btc-rpc-explorer",
+		headers: {
+			'User-Agent': 'request'
+		}
+	};
+
+	request(options, function(error, response, body) {
+		if (error == null && response && response.statusCode && response.statusCode == 200) {
+			var responseBody = JSON.parse(body);
+
+			global.sourcecodeProjectMetadata = responseBody;
+
+		} else {
+			console.log(`Error 3208fh3ew7eghfg: ${error}, StatusCode: ${response.statusCode}, Response: ${JSON.stringify(response)}`);
+		}
+	});
+}
+
 
 app.runOnStartup = function() {
 	global.config = config;
@@ -281,16 +301,16 @@ app.runOnStartup = function() {
 		console.log("Error 923grf20fge: " + err + ", error json: " + JSON.stringify(err));
 	});
 
-	if (config.donationAddresses) {
+	if (config.donations.addresses) {
 		var getDonationAddressQrCode = function(coinId) {
-			qrcode.toDataURL(config.donationAddresses[coinId].address, function(err, url) {
+			qrcode.toDataURL(config.donations.addresses[coinId].address, function(err, url) {
 				global.donationAddressQrCodeUrls[coinId] = url;
 			});
 		};
 
 		global.donationAddressQrCodeUrls = {};
 
-		config.donationAddresses.coins.forEach(function(item) {
+		config.donations.addresses.coins.forEach(function(item) {
 			getDonationAddressQrCode(item);
 		});
 	}
@@ -299,8 +319,8 @@ app.runOnStartup = function() {
 	global.specialBlocks = {};
 	global.specialAddresses = {};
 
-	if (config.donationAddresses && config.donationAddresses[coinConfig.ticker]) {
+	if (config.donations.addresses && config.donations.addresses[coinConfig.ticker]) {
-		global.specialAddresses[config.donationAddresses[coinConfig.ticker].address] = {type:"donation"};
+		global.specialAddresses[config.donations.addresses[coinConfig.ticker].address] = {type:"donation"};
 	}
 
 	if (global.coinConfig.historicalData) {
@@ -341,6 +361,11 @@ app.runOnStartup = function() {
 		});
 	}
 
+	if (config.demoSite) {
+		getSourcecodeProjectMetadata();
+		setInterval(getSourcecodeProjectMetadata, 3600000);
+	}
+
 	if (global.exchangeRates == null) {
 		utils.refreshExchangeRates();
 	}

app/config.js

@@ -135,12 +135,19 @@ module.exports = {
 		{name:(coins[currentCoin].name + " Fun"), url:"/fun", desc:"See fun/interesting historical blockchain data.", fontawesome:"fas fa-certificate"}
 	],
 
-	donationAddresses:{
+	donations:{
-		coins:["BTC", "LTC"],
+		addresses:{
-		sites:{"BTC":"https://btc.chaintools.io", "LTC":"https://ltc.chaintools.io"},
+			coins:["BTC", "LTC"],
-
+			sites:{"BTC":"https://btc.chaintools.io", "LTC":"https://ltc.chaintools.io"},
-		"BTC":{address:"3NPGpNyLLmVKCEcuipBs7G4KpQJoJXjDGe"},
+
-		"LTC":{address:"ME4pXiXuWfEi1ANBDo9irUJVcZBhsTx14i"}
+			"BTC":{address:"3NPGpNyLLmVKCEcuipBs7G4KpQJoJXjDGe"},
+			"LTC":{address:"ME4pXiXuWfEi1ANBDo9irUJVcZBhsTx14i"}
+		},
+		btcpayserver:{
+			host:"https://btcpay.chaintools.io",
+			storeId:"DUUExHMvKNAFukrJZHCShMhwZvfPq87QnkUhvE6h5kh2",
+			notifyEmail:"chaintools.io@gmail.com"
+		}
 	},
 
 	headerDropdownLinks: {

app/utils.js

@@ -282,7 +282,7 @@ function refreshExchangeRates() {
 
 	if (coins[config.coin].exchangeRateData) {
 		request(coins[config.coin].exchangeRateData.jsonUrl, function(error, response, body) {
-			if (!error && response && response.statusCode && response.statusCode == 200) {
+			if (error == null && response && response.statusCode && response.statusCode == 200) {
 				var responseBody = JSON.parse(body);
 
 				var exchangeRates = coins[config.coin].exchangeRateData.responseBodySelectorFunction(responseBody);
@@ -312,10 +312,7 @@ function refreshExchangeRates() {
 					console.log("Unable to get exchange rate data");
 				}
 			} else {
-				console.log("Error:");
+				console.log(`Error 39r7h2390fgewfgds: ${error}, StatusCode: ${response.statusCode}, Response: ${JSON.stringify(response)}`);
-				console.log(error);
-				console.log("Response:");
-				console.log(response);
 			}
 		});
 	}

public/css/styling.css

@@ -225,13 +225,10 @@ strong {
 
 
 
-footer {
+
-	border-top: solid 5px #597FA5;
-	border-bottom: solid 5px #597FA5;
-}
 
 footer a {
-	color: #ccc;
+	color: #ddd;
 	text-decoration: underline;
 }
 

views/about.pug

@@ -14,21 +14,3 @@ block content
 	p Pull requests are welcome! 
 		a(href="https://github.com/janoside/btc-rpc-explorer") github.com/janoside/btc-rpc-explorer
 		
-	if (config.donationAddresses)
-		hr
-
-		p If you value this tool and want to support my work on this project, please consider a small donation. Anything is appreciated!
-
-		each coin, index in config.donationAddresses.coins
-			div(style="display: inline-block;", class="text-md-center mb-3", class=(index > 0 ? "ml-md-5" : false))
-				if (config.donationAddresses[coin].urlPrefix)
-					a(href=(config.donationAddresses[coin].urlPrefix + config.donationAddresses[coin].address)) #{coinConfigs[coin].name} (#{coin})
-				else
-					span #{coinConfigs[coin].name} (#{coin})
-
-				br
-				span #{config.donationAddresses[coin].address}
-				br
-				img(src=donationAddressQrCodeUrls[coin], alt=config.donationAddresses[coin].address, style="border: solid 1px #ccc;")
-				br
-		

views/includes/donation-modal.pug

@@ -0,0 +1,71 @@
+#exampleModalCenter.modal.fade(tabindex='-1' role='dialog' aria-labelledby='exampleModalCenterTitle' aria-hidden='true')
+	.modal-dialog.modal-lg.modal-dialog-centered(role='document')
+		.modal-content
+			.modal-header
+				h5#exampleModalCenterTitle.modal-title Support Development
+				button.close(type='button' data-dismiss='modal' aria-label='Close')
+					span(aria-hidden='true') ×
+			.modal-body
+				p Any and all support is greatly appreciated!
+
+				if (config.donations.btcpayserver)
+					h6
+						span(class="mr-2") Donate via  
+						img(src="/img/logo/btcpay.png", alt="BTCPay", style="height: 30px;", class="mr-2")
+						a(class="text-dark", href="https://github.com/btcpayserver/btcpayserver") BTCPay
+					- var amounts = [1, 5, 10, 25, 100];
+					- var icons = [ "thumbs-up", "beer", "hamburger", "utensils", "grin-hearts" ];
+					div(class="mb-2")
+						each amount, amtIndex in amounts
+							form(method="POST" action=(config.donations.btcpayserver.host + "/api/v1/invoices"), style="display: inline;")
+								input(type='hidden' name='storeId' value=config.donations.btcpayserver.storeId)
+								input(type='hidden' name='price' value=amount)
+								input(type='hidden' name='currency' value='USD')
+								input(type='hidden' name='notifyEmail' value=config.donations.btcpayserver.notifyEmail)
+
+								button.btn.btn-primary.btn-lg(type='submit', class="mr-2 mb-2")
+									i(class=("fas mr-2 fa-" + icons[amtIndex]))
+									span $#{amount.toLocaleString()}
+
+						form(method="POST" action=(config.donations.btcpayserver.host + "/api/v1/invoices"), style="display: inline;")
+							input(type='hidden' name='storeId' value=config.donations.btcpayserver.storeId)
+							input(type='hidden' name='price' value="0.00000001")
+							input(type='hidden' name='currency' value='BTC')
+							input(type='hidden' name='notifyEmail' value=config.donations.btcpayserver.notifyEmail)
+
+							button.btn.btn-primary.btn-lg(type='submit', class="mr-2 mb-2")
+								i(class="fas mr-2 fa-bolt")
+								span 1 satoshi
+
+					script.
+						function showDonateByAddress(link) {
+							var donateByAddressDiv = document.getElementById("donate-by-address");
+							donateByAddressDiv.classList.remove("d-none");
+							link.classList.add("d-none");
+						}
+
+					a(href="javascript:void(0)", onclick="showDonateByAddress(this);") Or donate by address
+
+				div(id="donate-by-address", class="d-none mt-4")
+					h6 Donate by address
+
+					div(class="mb-3")
+						each coin, index in config.donations.addresses.coins
+							div(class="monospace")
+								if (coinConfig.ticker == coin)
+									span #{coin}: 
+									a(href=("/address/" + config.donations.addresses[coin].address), class="text-wrap") #{config.donations.addresses[coin].address}
+								else
+									span #{coin}: 
+									a(href=(config.donations.addresses.sites[coin] + "/address/" + config.donations.addresses[coin].address), class="text-wrap") #{config.donations.addresses[coin].address}
+
+					each coin, index in config.donations.addresses.coins
+						div(style="display: inline-block; max-width: 150px;", class="text-center mb-3 word-wrap monospace", class=(index > 0 ? "ml-md-3" : false))
+							img(src=donationAddressQrCodeUrls[coin], alt=config.donations.addresses[coin].address, style="border: solid 1px #ccc;")
+							br
+							span #{coin}
+
+			.modal-footer
+				button.btn.btn-secondary(type='button' data-dismiss='modal') Close
+
+

views/index.pug

@@ -19,15 +19,31 @@ block content
 				a(href="https://github.com/janoside/btc-rpc-explorer") project description
 				span  for a list of features and instructions for running.
 
-			div(style="height: 34px;")
+			div(class="clearfix")
-				a(class="github-button", href="https://github.com/janoside/btc-rpc-explorer", data-icon="octicon-star", data-size="large", data-show-count="true", aria-label="Star janoside/btc-rpc-explorer on GitHub", style="padding-right: 10px;") Star
+				if (global.sourcecodeProjectMetadata)
+					a(href="https://github.com/janoside/btc-rpc-explorer", class="btn btn-primary mr-3 mb-1")
+						i(class="fas fa-star mr-2")
+						span(class="mr-2") Star 
+						span.font-weight-light #{global.sourcecodeProjectMetadata.stargazers_count}
+
+					a(href="https://github.com/janoside/btc-rpc-explorer/fork", class="btn btn-primary mr-3 mb-1")
+						i(class="fas fa-code-branch mr-2")
+						span(class="mr-2") Fork 
+						span.font-weight-light #{global.sourcecodeProjectMetadata.forks_count}
+						
+					button.btn.btn-primary(type="button", class="btn btn-primary mb-1", data-toggle="modal", data-target="#exampleModalCenter")
+						i(class="fas fa-heart mr-2")
+						span Donate via 
+						span(class="font-weight-light") BTCPay
+
 				
-				span    
-				a(class="github-button", href="https://github.com/janoside/btc-rpc-explorer/fork", data-icon="octicon-repo-forked", data-size="large", data-show-count="true", aria-label="Fork janoside/btc-rpc-explorer on GitHub") Fork
 
 			a(href="/changeSetting?name=hideHomepageBanner&value=true", class="close", aria-label="Close", style="text-decoration: none;")
 				span(aria-hidden="true") ×
 
+	
+
+
 	div(class="card mb-3 shadow-sm")
 		div(class="card-header")
 			h2(class="h6 mb-0") Network Summary
@@ -172,5 +188,3 @@ block content
 								each item, index in chainTxStats
 									td(class="monospace") #{new Decimal(item.txrate).toDecimalPlaces(4)}
 									
-block endOfBody
-	script(async, defer, src="https://buttons.github.io/buttons.js")

views/layout.pug

@@ -117,7 +117,10 @@ html(lang="en")
 
 			div(style="margin-bottom: 30px;")
 
-			footer(class="footer bg-dark text-light pt-3 pb-1 px-3", style="margin-top: 50px;")
+			if (config.demoSite)
+				include ./includes/donation-modal.pug
+
+			footer(class="footer border-top border-bottom border-primary bg-dark text-light pt-3 pb-1 px-3", style="margin-top: 50px; border-width: 5px !important;")
 				div(class="container")
 					div(class="row")
 						div(class="col-md-5")
@@ -151,19 +154,10 @@ html(lang="en")
 
 						div(class="col-md-7 text-md-right")
 							dl
-								dt Support Development of #{coinConfig.siteTitle}
 								dd
-									div(class="text-md-right text-center")
+									button.btn.btn-primary(type="button", class="btn btn-primary", data-toggle="modal", data-target="#exampleModalCenter")
-										each coin, index in config.donationAddresses.coins
+										i(class="fas fa-heart mr-2")
-											div(style="display: inline-block; max-width: 150px;", class="text-center mb-3 word-wrap monospace", class=(index > 0 ? "ml-md-3" : false))
+										span Support Development
-												img(src=donationAddressQrCodeUrls[coin], alt=config.donationAddresses[coin].address, style="border: solid 1px #ccc;")
-												br
-												if (coinConfig.ticker == coin)
-													span #{coin}: 
-													a(href=("/address/" + config.donationAddresses[coin].address)) #{config.donationAddresses[coin].address}
-												else
-													span #{coin}: 
-													a(href=(config.donationAddresses.sites[coin] + "/address/" + config.donationAddresses[coin].address)) #{config.donationAddresses[coin].address}
 		
 		script(src="/js/jquery.min.js", integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=")
 		script(src="/js/popper.min.js", integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut")