Browse Source

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
fix-133-memory-crash
Dan Janosik 6 years ago
parent
commit
348de5b19a
No known key found for this signature in database GPG Key ID: C6F8CE9FFDB2CED2
  1. 35
      app.js
  2. 19
      app/config.js
  3. 7
      app/utils.js
  4. 7
      public/css/styling.css
  5. BIN
      public/img/logo/btcpay.png
  6. 18
      views/about.pug
  7. 71
      views/includes/donation-modal.pug
  8. 28
      views/index.pug
  9. 20
      views/layout.pug

35
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]) {
global.specialAddresses[config.donationAddresses[coinConfig.ticker].address] = {type:"donation"};
if (config.donations.addresses && config.donations.addresses[coinConfig.ticker]) {
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();
}

19
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:{
coins:["BTC", "LTC"],
sites:{"BTC":"https://btc.chaintools.io", "LTC":"https://ltc.chaintools.io"},
"BTC":{address:"3NPGpNyLLmVKCEcuipBs7G4KpQJoJXjDGe"},
"LTC":{address:"ME4pXiXuWfEi1ANBDo9irUJVcZBhsTx14i"}
donations:{
addresses:{
coins:["BTC", "LTC"],
sites:{"BTC":"https://btc.chaintools.io", "LTC":"https://ltc.chaintools.io"},
"BTC":{address:"3NPGpNyLLmVKCEcuipBs7G4KpQJoJXjDGe"},
"LTC":{address:"ME4pXiXuWfEi1ANBDo9irUJVcZBhsTx14i"}
},
btcpayserver:{
host:"https://btcpay.chaintools.io",
storeId:"DUUExHMvKNAFukrJZHCShMhwZvfPq87QnkUhvE6h5kh2",
notifyEmail:"chaintools.io@gmail.com"
}
},
headerDropdownLinks: {

7
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);
console.log("Response:");
console.log(response);
console.log(`Error 39r7h2390fgewfgds: ${error}, StatusCode: ${response.statusCode}, Response: ${JSON.stringify(response)}`);
}
});
}

7
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;
}

BIN
public/img/logo/btcpay.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

18
views/about.pug

@ -13,22 +13,4 @@ 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

71
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

28
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;")
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
div(class="clearfix")
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
@ -171,6 +187,4 @@ block content
th(class="text-left") Rate
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")

20
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")
each coin, index in config.donationAddresses.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.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}
button.btn.btn-primary(type="button", class="btn btn-primary", data-toggle="modal", data-target="#exampleModalCenter")
i(class="fas fa-heart mr-2")
span Support Development
script(src="/js/jquery.min.js", integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=")
script(src="/js/popper.min.js", integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut")

Loading…
Cancel
Save