mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-01-18 05:12:35 +01:00
Code Issues Projects Releases Wiki Activity

New base code for mempool blockchain explorerer

Browse Source
This commit is contained in:
Simon Lindh 2020-02-16 22:15:07 +07:00 committed by wiz
parent ca40fc7045
commit ac95c09ea6
No known key found for this signature in database
GPG Key ID: A394E332255A6173
204 changed files with 6959 additions and 14341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
Dockerfile
View File

@ -1,57 +0,0 @@
FROM alpine:latest
RUN mkdir /mempool.space/
COPY ./backend /mempool.space/backend/
COPY ./frontend /mempool.space/frontend/
COPY ./mariadb-structure.sql /mempool.space/mariadb-structure.sql
RUN apk add mariadb mariadb-client git nginx npm rsync bash
RUN mysql_install_db --user=mysql --datadir=/var/lib/mysql/
RUN /usr/bin/mysqld_safe --datadir='/var/lib/mysql/'& \
sleep 60 && \
mysql -e "create database mempool" && \
mysql -e "grant all privileges on mempool.* to 'mempool'@'localhost' identified by 'mempool'" && \
mysql mempool < /mempool.space/mariadb-structure.sql
RUN sed -i "/^skip-networking/ c#skip-networking" /etc/my.cnf.d/mariadb-server.cnf
RUN export NG_CLI_ANALYTICS=ci && \
npm install -g typescript && \
cd /mempool.space/frontend && \
npm install && \
cd /mempool.space/backend && \
npm install && \
tsc
COPY ./nginx-nossl-docker.conf /etc/nginx/nginx.conf
ENV ENV dev
ENV DB_HOST localhost
ENV DB_PORT 3306
ENV DB_USER mempool
ENV DB_PASSWORD mempool
ENV DB_DATABASE mempool
ENV API_ENDPOINT /api/v1/
ENV CHAT_SSL_ENABLED false
ENV MEMPOOL_REFRESH_RATE_MS 500
ENV INITIAL_BLOCK_AMOUNT 8
ENV DEFAULT_PROJECTED_BLOCKS_AMOUNT 3
ENV KEEP_BLOCK_AMOUNT 24
ENV BITCOIN_NODE_HOST bitcoinhost
ENV BITCOIN_NODE_PORT 8332
ENV BITCOIN_NODE_USER bitcoinuser
ENV BITCOIN_NODE_PASS bitcoinpass
ENV TX_PER_SECOND_SPAN_SECONDS 150
ENV BACKEND_API bitcoind
ENV ELECTRS_API_URL https://www.blockstream.info/api
RUN cd /mempool.space/frontend/ && \
npm run build && \
rsync -av --delete dist/mempool/ /var/www/html/
EXPOSE 80
COPY ./entrypoint.sh /mempool.space/entrypoint.sh
RUN chmod +x /mempool.space/entrypoint.sh
WORKDIR /mempool.space
CMD ["/mempool.space/entrypoint.sh"]

10
README.md
View File

@ -1,4 +1,5 @@
# mempool.space
🚨This is beta software, and may have issues!🚨
Please help us test and report bugs to our GitHub issue tracker.
Mempool visualizer for the Bitcoin blockchain. Live demo: https://mempool.space/
@ -12,13 +13,6 @@ Mempool visualizer for the Bitcoin blockchain. Live demo: https://mempool.space/
* MySQL or MariaDB (default config)
* Nginx (use supplied nginx.conf)
## Checking out release tag
```bash
git clone https://github.com/mempool-space/mempool.space
cd mempool.space
git checkout v1.0.0 # put latest release tag here
```
## Bitcoin Core (bitcoind)
Enable RPC and txindex in bitcoin.conf
@ -34,6 +28,8 @@ Enable RPC and txindex in bitcoin.conf
Install dependencies and build code:
```bash
cd mempool.space
# Install TypeScript Globally
npm install -g typescript

24
backend/mempool-config.sample.json
View File

@ -1,25 +1,19 @@
{
"ENV": "dev",
"HTTP_PORT": 8999,
"DB_HOST": "localhost",
"DB_PORT": 3306,
"DB_USER": "mempool",
"DB_PASSWORD": "mempool",
"DB_DATABASE": "mempool",
"HTTP_PORT": 3000,
"API_ENDPOINT": "/api/v1/",
"CHAT_SSL_ENABLED": false,
"CHAT_SSL_PRIVKEY": "",
"CHAT_SSL_CERT": "",
"CHAT_SSL_CHAIN": "",
"MEMPOOL_REFRESH_RATE_MS": 500,
"INITIAL_BLOCK_AMOUNT": 8,
"ELECTRS_POLL_RATE_MS": 2000,
"MEMPOOL_REFRESH_RATE_MS": 10000,
"DEFAULT_PROJECTED_BLOCKS_AMOUNT": 3,
"KEEP_BLOCK_AMOUNT": 24,
"BITCOIN_NODE_HOST": "localhost",
"BITCOIN_NODE_PORT": 8332,
"BITCOIN_NODE_USER": "",
"BITCOIN_NODE_PASS": "",
"BACKEND_API": "bitcoind",
"ELECTRS_API_URL": "https://www.blockstream.info/api",
"TX_PER_SECOND_SPAN_SECONDS": 150
"INITIAL_BLOCK_AMOUNT": 8,
"TX_PER_SECOND_SPAN_SECONDS": 150,
"ELECTRS_API_URL": "https://www.blockstream.info/testnet/api",
"SSL": false,
"SSL_CERT_FILE_PATH": "/etc/letsencrypt/live/mysite/fullchain.pem",
"SSL_KEY_FILE_PATH": "/etc/letsencrypt/live/mysite/privkey.pem"
}

23
backend/package.json
View File

@ -1,31 +1,26 @@
{
"name": "mempool-backend",
"name": "mempool-space-explorer-backend",
"version": "1.0.0",
"description": "Bitcoin Mempool Visualizer",
"description": "Mempool space backend",
"main": "index.ts",
"scripts": {
"build": "tsc",
"start": "npm run build && node dist/index.js"
},
"author": {
"name": "Simon Lindh",
"url": "https://github.com/mempool-space/mempool.space"
},
"license": "MIT",
"dependencies": {
"bitcoin": "^3.0.1",
"compression": "^1.7.3",
"express": "^4.16.3",
"compression": "^1.7.4",
"express": "^4.17.1",
"mysql2": "^1.6.1",
"request": "^2.88.0",
"ws": "^6.0.0"
"ws": "^7.2.0"
},
"devDependencies": {
"@types/express": "^4.16.0",
"@types/mysql2": "github:types/mysql2",
"@types/compression": "^1.0.1",
"@types/express": "^4.17.2",
"@types/request": "^2.48.2",
"@types/ws": "^6.0.1",
"@types/ws": "^6.0.4",
"tslint": "^5.11.0",
"typescript": "^3.1.1"
"typescript": "~3.6.4"
}
}

19
backend/src/api/bitcoin/bitcoin-api-abstract-factory.ts
View File

@ -1,19 +0,0 @@
import { IMempoolInfo, ITransaction, IBlock } from '../../interfaces';
export interface AbstractBitcoinApi {
getMempoolInfo(): Promise<IMempoolInfo>;
getRawMempool(): Promise<ITransaction['txid'][]>;
getRawTransaction(txId: string): Promise<ITransaction>;
getBlockCount(): Promise<number>;
getBlockAndTransactions(hash: string): Promise<IBlock>;
getBlockHash(height: number): Promise<string>;
getBlock(hash: string): Promise<IBlock>;
getBlockTransactions(hash: string): Promise<IBlock>;
getBlockTransactionsFromIndex(hash: string, index: number): Promise<IBlock>;
getBlocks(): Promise<string>;
getBlocksFromHeight(height: number): Promise<string>;
getAddress(address: string): Promise<IBlock>;
getAddressTransactions(address: string): Promise<IBlock>;
getAddressTransactionsFromLastSeenTxid(address: string, lastSeenTxid: string): Promise<IBlock>;
}

16
backend/src/api/bitcoin/bitcoin-api-factory.ts
View File

@ -1,16 +0,0 @@
const config = require('../../../mempool-config.json');
import { AbstractBitcoinApi } from './bitcoin-api-abstract-factory';
import BitcoindApi from './bitcoind-api';
import ElectrsApi from './electrs-api';
function factory(): AbstractBitcoinApi {
switch (config.BACKEND_API) {
case 'electrs':
return new ElectrsApi();
case 'bitcoind':
default:
return new BitcoindApi();
}
}
export default factory();

110
backend/src/api/bitcoin/bitcoind-api.ts
View File

@ -1,110 +0,0 @@
const config = require('../../../mempool-config.json');
import * as bitcoin from 'bitcoin';
import { ITransaction, IMempoolInfo, IBlock } from '../../interfaces';
import { AbstractBitcoinApi } from './bitcoin-api-abstract-factory';
class BitcoindApi implements AbstractBitcoinApi {
client: any;
constructor() {
this.client = new bitcoin.Client({
host: config.BITCOIN_NODE_HOST,
port: config.BITCOIN_NODE_PORT,
user: config.BITCOIN_NODE_USER,
pass: config.BITCOIN_NODE_PASS,
});
}
getMempoolInfo(): Promise<IMempoolInfo> {
return new Promise((resolve, reject) => {
this.client.getMempoolInfo((err: Error, mempoolInfo: any) => {
if (err) {
return reject(err);
}
resolve(mempoolInfo);
});
});
}
getRawMempool(): Promise<ITransaction['txid'][]> {
return new Promise((resolve, reject) => {
this.client.getRawMemPool((err: Error, transactions: ITransaction['txid'][]) => {
if (err) {
return reject(err);
}
resolve(transactions);
});
});
}
getRawTransaction(txId: string): Promise<ITransaction> {
return new Promise((resolve, reject) => {
this.client.getRawTransaction(txId, true, (err: Error, txData: ITransaction) => {
if (err) {
return reject(err);
}
resolve(txData);
});
});
}
getBlockCount(): Promise<number> {
return new Promise((resolve, reject) => {
this.client.getBlockCount((err: Error, response: number) => {
if (err) {
return reject(err);
}
resolve(response);
});
});
}
getBlockAndTransactions(hash: string, verbosity: 1 | 2 = 1): Promise<IBlock> {
return new Promise((resolve, reject) => {
this.client.getBlock(hash, verbosity, (err: Error, block: IBlock) => {
if (err) {
return reject(err);
}
resolve(block);
});
});
}
getBlockHash(height: number): Promise<string> {
return new Promise((resolve, reject) => {
this.client.getBlockHash(height, (err: Error, response: string) => {
if (err) {
return reject(err);
}
resolve(response);
});
});
}
getBlock(hash: string): Promise<IBlock> {
throw new Error('Method not implemented.');
}
getBlocks(): Promise<string> {
throw new Error('Method not implemented.');
}
getBlocksFromHeight(height: number): Promise<string> {
throw new Error('Method not implemented.');
}
getBlockTransactions(hash: string): Promise<IBlock> {
throw new Error('Method not implemented.');
}
getBlockTransactionsFromIndex(hash: string, index: number): Promise<IBlock> {
throw new Error('Method not implemented.');
}
getAddress(address: string): Promise<IBlock> {
throw new Error('Method not implemented.');
}
getAddressTransactions(address: string): Promise<IBlock> {
throw new Error('Method not implemented.');
}
getAddressTransactionsFromLastSeenTxid(address: string, lastSeenTxid: string): Promise<IBlock> {
throw new Error('Method not implemented.');
}
}
export default BitcoindApi;

146
backend/src/api/bitcoin/electrs-api.ts
View File

@ -1,33 +1,15 @@
const config = require('../../../mempool-config.json');
import { ITransaction, IMempoolInfo, IBlock } from '../../interfaces';
import { AbstractBitcoinApi } from './bitcoin-api-abstract-factory';
import { Transaction, Block } from '../../interfaces';
import * as request from 'request';
class ElectrsApi implements AbstractBitcoinApi {
class ElectrsApi {
constructor() {
}
getMempoolInfo(): Promise<IMempoolInfo> {
getRawMempool(): Promise<Transaction['txid'][]> {
return new Promise((resolve, reject) => {
request(config.ELECTRS_API_URL + '/mempool', { json: true, timeout: 10000 }, (err, res, response) => {
if (err) {
reject(err);
} else if (res.statusCode !== 200) {
reject(response);
} else {
resolve({
size: response.count,
bytes: response.vsize,
});
}
});
});
}
getRawMempool(): Promise<ITransaction['txid'][]> {
return new Promise((resolve, reject) => {
request(config.ELECTRS_API_URL + '/mempool/txids', { json: true, timeout: 10000 }, (err, res, response) => {
request(config.ELECTRS_API_URL + '/mempool/txids', { json: true, timeout: 10000, forever: true }, (err, res, response) => {
if (err) {
reject(err);
} else if (res.statusCode !== 200) {
@ -39,24 +21,21 @@ class ElectrsApi implements AbstractBitcoinApi {
});
}
getRawTransaction(txId: string): Promise<ITransaction> {
getRawTransaction(txId: string): Promise<Transaction> {
return new Promise((resolve, reject) => {
request(config.ELECTRS_API_URL + '/tx/' + txId, { json: true, timeout: 10000 }, (err, res, response) => {
request(config.ELECTRS_API_URL + '/tx/' + txId, { json: true, timeout: 10000, forever: true }, (err, res, response) => {
if (err) {
reject(err);
} else if (res.statusCode !== 200) {
reject(response);
} else {
response.vsize = Math.round(response.weight / 4);
response.fee = response.fee / 100000000;
response.blockhash = response.status.block_hash;
resolve(response);
}
});
});
}
getBlockCount(): Promise<number> {
getBlockHeightTip(): Promise<number> {
return new Promise((resolve, reject) => {
request(config.ELECTRS_API_URL + '/blocks/tip/height', { json: true, timeout: 10000 }, (err, res, response) => {
if (err) {
@ -70,37 +49,9 @@ class ElectrsApi implements AbstractBitcoinApi {
});
}
getBlockAndTransactions(hash: string): Promise<IBlock> {
getTxIdsForBlock(hash: string): Promise<Block> {
return new Promise((resolve, reject) => {
request(config.ELECTRS_API_URL + '/block/' + hash, { json: true, timeout: 10000 }, (err, res, response) => {
if (err) {
reject(err);
} else if (res.statusCode !== 200) {
reject(response);
} else {
request(config.ELECTRS_API_URL + '/block/' + hash + '/txids', { json: true, timeout: 10000 }, (err2, res2, response2) => {
if (err2) {
reject(err2);
} else if (res.statusCode !== 200) {
reject(response);
} else {
const block = response;
block.hash = hash;
block.nTx = block.tx_count;
block.time = block.timestamp;
block.tx = response2;
resolve(block);
}
});
}
});
});
}
getBlockHash(height: number): Promise<string> {
return new Promise((resolve, reject) => {
request(config.ELECTRS_API_URL + '/block-height/' + height, { json: true, timeout: 10000 }, (err, res, response) => {
request(config.ELECTRS_API_URL + '/block/' + hash + '/txids', { json: true, timeout: 10000 }, (err, res, response) => {
if (err) {
reject(err);
} else if (res.statusCode !== 200) {
@ -112,9 +63,9 @@ class ElectrsApi implements AbstractBitcoinApi {
});
}
getBlocks(): Promise<string> {
getBlockHash(height: number): Promise<string> {
return new Promise((resolve, reject) => {
request(config.ELECTRS_API_URL + '/blocks', { json: true, timeout: 10000 }, (err, res, response) => {
request(config.ELECTRS_API_URL + '/block-height/' + height, { json: true, timeout: 10000 }, (err, res, response) => {
if (err) {
reject(err);
} else if (res.statusCode !== 200) {
@ -140,7 +91,7 @@ class ElectrsApi implements AbstractBitcoinApi {
});
}
getBlock(hash: string): Promise<IBlock> {
getBlock(hash: string): Promise<Block> {
return new Promise((resolve, reject) => {
request(config.ELECTRS_API_URL + '/block/' + hash, { json: true, timeout: 10000 }, (err, res, response) => {
if (err) {
@ -153,77 +104,6 @@ class ElectrsApi implements AbstractBitcoinApi {
});
});
}
getBlockTransactions(hash: string): Promise<IBlock> {
return new Promise((resolve, reject) => {
request(config.ELECTRS_API_URL + '/block/' + hash + '/txs', { json: true, timeout: 10000 }, (err, res, response) => {
if (err) {
reject(err);
} else if (res.statusCode !== 200) {
reject(response);
} else {
resolve(response);
}
});
});
}
getBlockTransactionsFromIndex(hash: string, index: number): Promise<IBlock> {
return new Promise((resolve, reject) => {
request(config.ELECTRS_API_URL + '/block/' + hash + '/txs/' + index, { json: true, timeout: 10000 }, (err, res, response) => {
if (err) {
reject(err);
} else if (res.statusCode !== 200) {
reject(response);
} else {
resolve(response);
}
});
});
}
getAddress(address: string): Promise<IBlock> {
return new Promise((resolve, reject) => {
request(config.ELECTRS_API_URL + '/address/' + address, { json: true, timeout: 10000 }, (err, res, response) => {
if (err) {
reject(err);
} else if (res.statusCode !== 200) {
reject(response);
} else {
resolve(response);
}
});
});
}
getAddressTransactions(address: string): Promise<IBlock> {
return new Promise((resolve, reject) => {
request(config.ELECTRS_API_URL + '/address/' + address + '/txs', { json: true, timeout: 10000 }, (err, res, response) => {
if (err) {
reject(err);
} else if (res.statusCode !== 200) {
reject(response);
} else {
resolve(response);
}
});
});
}
getAddressTransactionsFromLastSeenTxid(address: string, lastSeenTxid: string): Promise<IBlock> {
return new Promise((resolve, reject) => {
request(config.ELECTRS_API_URL + '/address/' + address + '/txs/chain/' + lastSeenTxid,
{ json: true, timeout: 10000 }, (err, res, response) => {
if (err) {
reject(err);
} else if (res.statusCode !== 200) {
reject(response);
} else {
resolve(response);
}
});
});
}
}
export default ElectrsApi;
export default new ElectrsApi();

205
backend/src/api/blocks.ts
View File

@ -1,206 +1,61 @@
const config = require('../../mempool-config.json');
import bitcoinApi from './bitcoin/bitcoin-api-factory';
import { DB } from '../database';
import { IBlock, ITransaction } from '../interfaces';
import memPool from './mempool';
import bitcoinApi from './bitcoin/electrs-api';
import { Block } from '../interfaces';
class Blocks {
private blocks: IBlock[] = [];
private newBlockCallback: Function | undefined;
private blocks: Block[] = [];
private currentBlockHeight = 0;
private newBlockCallback: Function = () => {};
constructor() {
setInterval(this.$clearOldTransactionsAndBlocksFromDatabase.bind(this), 86400000);
constructor() { }
public getBlocks(): Block[] {
return this.blocks;
}
public setNewBlockCallback(fn: Function) {
this.newBlockCallback = fn;
}
public getBlocks(): IBlock[] {
return this.blocks;
}
public formatBlock(block: IBlock) {
return {
hash: block.hash,
height: block.height,
nTx: block.nTx - 1,
size: block.size,
time: block.time,
weight: block.weight,
fees: block.fees,
minFee: block.minFee,
maxFee: block.maxFee,
medianFee: block.medianFee,
};
}
public async updateBlocks() {
try {
const blockCount = await bitcoinApi.getBlockCount();
const blockHeightTip = await bitcoinApi.getBlockHeightTip();
if (this.blocks.length === 0) {
this.currentBlockHeight = blockCount - config.INITIAL_BLOCK_AMOUNT;
this.currentBlockHeight = blockHeightTip - config.INITIAL_BLOCK_AMOUNT;
} else {
this.currentBlockHeight = this.blocks[this.blocks.length - 1].height;
}
while (this.currentBlockHeight < blockCount) {
while (this.currentBlockHeight < blockHeightTip) {
if (this.currentBlockHeight === 0) {
this.currentBlockHeight = blockHeightTip;
} else {
this.currentBlockHeight++;
console.log(`New block found (#${this.currentBlockHeight})!`);
}
let block: IBlock | undefined;
const storedBlock = await this.$getBlockFromDatabase(this.currentBlockHeight);
if (storedBlock) {
block = storedBlock;
} else {
const blockHash = await bitcoinApi.getBlockHash(this.currentBlockHeight);
block = await bitcoinApi.getBlockAndTransactions(blockHash);
const block = await bitcoinApi.getBlock(blockHash);
const txIds = await bitcoinApi.getTxIdsForBlock(blockHash);
const coinbase = await memPool.getRawTransaction(block.tx[0], true);
if (coinbase && coinbase.totalOut) {
block.fees = coinbase.totalOut;
}
const mempool = memPool.getMempool();
let found = 0;
let notFound = 0;
let transactions: ITransaction[] = [];
for (let i = 1; i < block.tx.length; i++) {
if (mempool[block.tx[i]]) {
transactions.push(mempool[block.tx[i]]);
found++;
} else {
console.log(`Fetching block tx ${i} of ${block.tx.length}`);
const tx = await memPool.getRawTransaction(block.tx[i]);
if (tx) {
transactions.push(tx);
}
notFound++;
}
}
transactions.sort((a, b) => b.feePerVsize - a.feePerVsize);
transactions = transactions.filter((tx: ITransaction) => tx.feePerVsize);
block.minFee = transactions[transactions.length - 1] ? transactions[transactions.length - 1].feePerVsize : 0;
block.maxFee = transactions[0] ? transactions[0].feePerVsize : 0;
block.medianFee = this.median(transactions.map((tx) => tx.feePerVsize));
console.log(`New block found (#${this.currentBlockHeight})! `
+ `${found} of ${block.tx.length} found in mempool. ${notFound} not found.`);
if (this.newBlockCallback) {
this.newBlockCallback(block);
}
this.$saveBlockToDatabase(block);
this.$saveTransactionsToDatabase(block.height, transactions);
}
block.medianFee = 2;
block.feeRange = [1, 3];
this.blocks.push(block);
if (this.blocks.length > config.KEEP_BLOCK_AMOUNT) {
this.blocks.shift();
}
this.newBlockCallback(block, txIds);
}
} catch (err) {
console.log('Error getBlockCount', err);
}
}
private async $getBlockFromDatabase(height: number): Promise<IBlock | undefined> {
try {
const connection = await DB.pool.getConnection();
const query = `
SELECT * FROM blocks WHERE height = ?
`;
const [rows] = await connection.query<any>(query, [height]);
connection.release();
if (rows[0]) {
return rows[0];
}
} catch (e) {
console.log('$get() block error', e);
}
}
private async $saveBlockToDatabase(block: IBlock) {
try {
const connection = await DB.pool.getConnection();
const query = `
INSERT IGNORE INTO blocks
(height, hash, size, weight, minFee, maxFee, time, fees, nTx, medianFee)
VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
`;
const params: (any)[] = [
block.height,
block.hash,
block.size,
block.weight,
block.minFee,
block.maxFee,
block.time,
block.fees,
block.nTx - 1,
block.medianFee,
];
await connection.query(query, params);
connection.release();
} catch (e) {
console.log('$create() block error', e);
}
}
private async $saveTransactionsToDatabase(blockheight: number, transactions: ITransaction[]) {
try {
const connection = await DB.pool.getConnection();
for (let i = 0; i < transactions.length; i++) {
const query = `
INSERT IGNORE INTO transactions
(blockheight, txid, fee, feePerVsize)
VALUES(?, ?, ?, ?)
`;
const params: (any)[] = [
blockheight,
transactions[i].txid,
transactions[i].fee,
transactions[i].feePerVsize,
];
await connection.query(query, params);
}
connection.release();
} catch (e) {
console.log('$create() transaction error', e);
}
}
private async $clearOldTransactionsAndBlocksFromDatabase() {
try {
const connection = await DB.pool.getConnection();
let query = `DELETE FROM blocks WHERE height < ?`;
await connection.query<any>(query, [this.currentBlockHeight - config.KEEP_BLOCK_AMOUNT]);
query = `DELETE FROM transactions WHERE blockheight < ?`;
await connection.query<any>(query, [this.currentBlockHeight - config.KEEP_BLOCK_AMOUNT]);
connection.release();
} catch (e) {
console.log('$clearOldTransactionsFromDatabase() error', e);
console.log('updateBlocks error', err);
}
}
private median(numbers: number[]) {
if (!numbers.length) { return 0; }
let medianNr = 0;
const numsLen = numbers.length;
numbers.sort();
@ -211,6 +66,20 @@ class Blocks {
}
return medianNr;
}
private getFeesInRange(transactions: any[], rangeLength: number) {
const arr = [transactions[transactions.length - 1].feePerVsize];
const chunk = 1 / (rangeLength - 1);
let itemsToAdd = rangeLength - 2;
while (itemsToAdd > 0) {
arr.push(transactions[Math.floor(transactions.length * chunk * itemsToAdd)].feePerVsize);
itemsToAdd--;
}
arr.push(transactions[0].feePerVsize);
return arr;
}
}
export default new Blocks();

6
backend/src/api/fee-api.ts
View File

@ -1,11 +1,11 @@
import projectedBlocks from './projected-blocks';
import projectedBlocks from './mempool-blocks';
import { DB } from '../database';
class FeeApi {
constructor() { }
public getRecommendedFee() {
const pBlocks = projectedBlocks.getProjectedBlocks();
const pBlocks = projectedBlocks.getMempoolBlocks();
if (!pBlocks.length) {
return {
'fastestFee': 0,
@ -15,7 +15,7 @@ class FeeApi {
}
let firstMedianFee = Math.ceil(pBlocks[0].medianFee);
if (pBlocks.length === 1 && pBlocks[0].blockWeight <= 2000000) {
if (pBlocks.length === 1 && pBlocks[0].blockVSize <= 500000) {
firstMedianFee = 1;
}

97
backend/src/api/mempool-blocks.ts Normal file
View File

@ -0,0 +1,97 @@
const config = require('../../mempool-config.json');
import { MempoolBlock, SimpleTransaction } from '../interfaces';
class MempoolBlocks {
private mempoolBlocks: MempoolBlock[] = [];
constructor() {}
public getMempoolBlocks(): MempoolBlock[] {
return this.mempoolBlocks;
}
public updateMempoolBlocks(memPool: { [txid: string]: SimpleTransaction }): void {
const latestMempool = memPool;
const memPoolArray: SimpleTransaction[] = [];
for (const i in latestMempool) {
if (latestMempool.hasOwnProperty(i)) {
memPoolArray.push(latestMempool[i]);
}
}
memPoolArray.sort((a, b) => b.feePerVsize - a.feePerVsize);
const transactionsSorted = memPoolArray.filter((tx) => tx.feePerVsize);
this.mempoolBlocks = this.calculateMempoolBlocks(transactionsSorted);
}
private calculateMempoolBlocks(transactionsSorted: SimpleTransaction[]): MempoolBlock[] {
const mempoolBlocks: MempoolBlock[] = [];
let blockWeight = 0;
let blockSize = 0;
let transactions: SimpleTransaction[] = [];
transactionsSorted.forEach((tx) => {
if (blockWeight + tx.vsize < 1000000 || mempoolBlocks.length === config.DEFAULT_PROJECTED_BLOCKS_AMOUNT) {
blockWeight += tx.vsize;
blockSize += tx.size;
transactions.push(tx);
} else {
mempoolBlocks.push(this.dataToMempoolBlocks(transactions, blockSize, blockWeight, mempoolBlocks.length));
blockWeight = 0;
blockSize = 0;
transactions = [];
}
});
if (transactions.length) {
mempoolBlocks.push(this.dataToMempoolBlocks(transactions, blockSize, blockWeight, mempoolBlocks.length));
}
return mempoolBlocks;
}
private dataToMempoolBlocks(transactions: SimpleTransaction[], blockSize: number, blockVSize: number, blocksIndex: number): MempoolBlock {
let rangeLength = 3;
if (blocksIndex === 0) {
rangeLength = 8;
}
if (transactions.length > 4000) {
rangeLength = 5;
} else if (transactions.length > 10000) {
rangeLength = 8;
} else if (transactions.length > 25000) {
rangeLength = 10;
}
return {
blockSize: blockSize,
blockVSize: blockVSize,
nTx: transactions.length,
medianFee: this.median(transactions.map((tx) => tx.feePerVsize)),
feeRange: this.getFeesInRange(transactions, rangeLength),
};
}
private median(numbers: number[]) {
let medianNr = 0;
const numsLen = numbers.length;
numbers.sort();
if (numsLen % 2 === 0) {
medianNr = (numbers[numsLen / 2 - 1] + numbers[numsLen / 2]) / 2;
} else {
medianNr = numbers[(numsLen - 1) / 2];
}
return medianNr;
}
private getFeesInRange(transactions: SimpleTransaction[], rangeLength: number) {
const arr = [transactions[transactions.length - 1].feePerVsize];
const chunk = 1 / (rangeLength - 1);
let itemsToAdd = rangeLength - 2;
while (itemsToAdd > 0) {
arr.push(transactions[Math.floor(transactions.length * chunk * itemsToAdd)].feePerVsize);
itemsToAdd--;
}
arr.push(transactions[0].feePerVsize);
return arr;
}
}
export default new MempoolBlocks();

101
backend/src/api/mempool.ts
View File

@ -1,10 +1,10 @@
const config = require('../../mempool-config.json');
import bitcoinApi from './bitcoin/bitcoin-api-factory';
import { ITransaction, IMempoolInfo, IMempool } from '../interfaces';
import bitcoinApi from './bitcoin/electrs-api';
import { MempoolInfo, SimpleTransaction, Transaction } from '../interfaces';
class Mempool {
private mempool: IMempool = {};
private mempoolInfo: IMempoolInfo | undefined;
private mempoolCache: any = {};
private mempoolInfo: MempoolInfo | undefined;
private mempoolChangedCallback: Function | undefined;
private txPerSecondArray: number[] = [];
@ -21,15 +21,18 @@ class Mempool {
this.mempoolChangedCallback = fn;
}
public getMempool(): { [txid: string]: ITransaction } {
return this.mempool;
public getMempool(): { [txid: string]: SimpleTransaction } {
return this.mempoolCache;
}
public setMempool(mempoolData: any) {
this.mempool = mempoolData;
this.mempoolCache = mempoolData;
if (this.mempoolChangedCallback && mempoolData) {
this.mempoolChangedCallback(mempoolData);
}
}
public getMempoolInfo(): IMempoolInfo | undefined {
public getMempoolInfo(): MempoolInfo | undefined {
return this.mempoolInfo;
}
@ -41,52 +44,16 @@ class Mempool {
return this.vBytesPerSecond;
}
public async updateMemPoolInfo() {
public async getRawTransaction(txId: string): Promise<SimpleTransaction | false> {
try {
this.mempoolInfo = await bitcoinApi.getMempoolInfo();
} catch (err) {
console.log('Error getMempoolInfo', err);
}
}
public async getRawTransaction(txId: string, isCoinbase = false): Promise<ITransaction | false> {
try {
const transaction = await bitcoinApi.getRawTransaction(txId);
let totalOut = 0;
transaction.vout.forEach((output) => totalOut += output.value);
if (config.BACKEND_API === 'electrs') {
transaction.feePerWeightUnit = (transaction.fee * 100000000) / transaction.weight || 0;
transaction.feePerVsize = (transaction.fee * 100000000) / (transaction.vsize) || 0;
transaction.totalOut = totalOut / 100000000;
} else {
let totalIn = 0;
if (!isCoinbase) {
for (let i = 0; i < transaction.vin.length; i++) {
try {
const result = await bitcoinApi.getRawTransaction(transaction.vin[i].txid);
transaction.vin[i]['value'] = result.vout[transaction.vin[i].vout].value;
totalIn += result.vout[transaction.vin[i].vout].value;
} catch (err) {
console.log('Locating historical tx error');
}
}
}
if (totalIn > totalOut) {
transaction.fee = parseFloat((totalIn - totalOut).toFixed(8));
transaction.feePerWeightUnit = (transaction.fee * 100000000) / (transaction.vsize * 4) || 0;
transaction.feePerVsize = (transaction.fee * 100000000) / (transaction.vsize) || 0;
} else if (!isCoinbase) {
transaction.fee = 0;
transaction.feePerVsize = 0;
transaction.feePerWeightUnit = 0;
console.log('Minus fee error!');
}
transaction.totalOut = totalOut;
}
return transaction;
const transaction: Transaction = await bitcoinApi.getRawTransaction(txId);
return {
txid: transaction.txid,
fee: transaction.fee,
size: transaction.size,
vsize: transaction.weight / 4,
feePerVsize: transaction.fee / (transaction.weight / 4)
};
} catch (e) {
console.log(txId + ' not found');
return false;
@ -100,12 +67,13 @@ class Mempool {
let txCount = 0;
try {
const transactions = await bitcoinApi.getRawMempool();
const diff = transactions.length - Object.keys(this.mempool).length;
for (const tx of transactions) {
if (!this.mempool[tx]) {
const transaction = await this.getRawTransaction(tx);
const diff = transactions.length - Object.keys(this.mempoolCache).length;
for (const txid of transactions) {
if (!this.mempoolCache[txid]) {
const transaction = await this.getRawTransaction(txid);
if (transaction) {
this.mempool[tx] = transaction;
this.mempoolCache[txid] = transaction;
txCount++;
this.txPerSecondArray.push(new Date().getTime());
this.vBytesPerSecondArray.push({
@ -114,33 +82,34 @@ class Mempool {
});
hasChange = true;
if (diff > 0) {
console.log('Calculated fee for transaction ' + txCount + ' / ' + diff);
console.log('Fetched transaction ' + txCount + ' / ' + diff);
} else {
console.log('Calculated fee for transaction ' + txCount);
console.log('Fetched transaction ' + txCount);
}
} else {
console.log('Error finding transaction in mempool.');
}
}
if ((new Date().getTime()) - start > config.MEMPOOL_REFRESH_RATE_MS * 10) {
if ((new Date().getTime()) - start > config.MEMPOOL_REFRESH_RATE_MS) {
break;
}
}
const newMempool: IMempool = {};
// Replace mempool to clear already confirmed transactions
const newMempool: any = {};
transactions.forEach((tx) => {
if (this.mempool[tx]) {
newMempool[tx] = this.mempool[tx];
if (this.mempoolCache[tx]) {
newMempool[tx] = this.mempoolCache[tx];
} else {
hasChange = true;
}
});
this.mempool = newMempool;
this.mempoolCache = newMempool;
if (hasChange && this.mempoolChangedCallback) {
this.mempoolChangedCallback(this.mempool);
this.mempoolChangedCallback(this.mempoolCache);
}
const end = new Date().getTime();

102
backend/src/api/projected-blocks.ts
View File

@ -1,102 +0,0 @@
const config = require('../../mempool-config.json');
import { ITransaction, IProjectedBlock, IMempool, IProjectedBlockInternal } from '../interfaces';
class ProjectedBlocks {
private transactionsSorted: ITransaction[] = [];
constructor() {}
public getProjectedBlockFeesForBlock(index: number) {
const projectedBlock = this.getProjectedBlocksInternal()[index];
if (!projectedBlock) {
throw new Error('No projected block for that index');
}
return projectedBlock.txFeePerVsizes.map((fpv) => {
return {'fpv': fpv};
});
}
public updateProjectedBlocks(memPool: IMempool): void {
const latestMempool = memPool;
const memPoolArray: ITransaction[] = [];
for (const i in latestMempool) {
if (latestMempool.hasOwnProperty(i)) {
memPoolArray.push(latestMempool[i]);
}
}
memPoolArray.sort((a, b) => b.feePerWeightUnit - a.feePerWeightUnit);
this.transactionsSorted = memPoolArray.filter((tx) => tx.feePerWeightUnit);
}
public getProjectedBlocks(txId?: string, numberOfBlocks: number = config.DEFAULT_PROJECTED_BLOCKS_AMOUNT): IProjectedBlock[] {
return this.getProjectedBlocksInternal(numberOfBlocks).map((projectedBlock) => {
return {
blockSize: projectedBlock.blockSize,
blockWeight: projectedBlock.blockWeight,
nTx: projectedBlock.nTx,
minFee: projectedBlock.minFee,
maxFee: projectedBlock.maxFee,
minWeightFee: projectedBlock.minWeightFee,
maxWeightFee: projectedBlock.maxWeightFee,
medianFee: projectedBlock.medianFee,
fees: projectedBlock.fees,
hasMytx: txId ? projectedBlock.txIds.some((tx) => tx === txId) : false
};
});
}
private getProjectedBlocksInternal(numberOfBlocks: number = config.DEFAULT_PROJECTED_BLOCKS_AMOUNT): IProjectedBlockInternal[] {
const projectedBlocks: IProjectedBlockInternal[] = [];
let blockWeight = 0;
let blockSize = 0;
let transactions: ITransaction[] = [];
this.transactionsSorted.forEach((tx) => {
if (blockWeight + tx.vsize * 4 < 4000000 || projectedBlocks.length === numberOfBlocks) {
blockWeight += tx.weight || tx.vsize * 4;
blockSize += tx.size;
transactions.push(tx);
} else {
projectedBlocks.push(this.dataToProjectedBlock(transactions, blockSize, blockWeight));
blockWeight = 0;
blockSize = 0;
transactions = [];
}
});
if (transactions.length) {
projectedBlocks.push(this.dataToProjectedBlock(transactions, blockSize, blockWeight));
}
return projectedBlocks;
}
private dataToProjectedBlock(transactions: ITransaction[], blockSize: number, blockWeight: number): IProjectedBlockInternal {
return {
blockSize: blockSize,
blockWeight: blockWeight,
nTx: transactions.length,
minFee: transactions[transactions.length - 1].feePerVsize,
maxFee: transactions[0].feePerVsize,
minWeightFee: transactions[transactions.length - 1].feePerWeightUnit,
maxWeightFee: transactions[0].feePerWeightUnit,
medianFee: this.median(transactions.map((tx) => tx.feePerVsize)),
txIds: transactions.map((tx) => tx.txid),
txFeePerVsizes: transactions.map((tx) => tx.feePerVsize).reverse(),
fees: transactions.map((tx) => tx.fee).reduce((acc, currValue) => acc + currValue),
};
}
private median(numbers: number[]) {
let medianNr = 0;
const numsLen = numbers.length;
numbers.sort();
if (numsLen % 2 === 0) {
medianNr = (numbers[numsLen / 2 - 1] + numbers[numsLen / 2]) / 2;
} else {
medianNr = numbers[(numsLen - 1) / 2];
}
return medianNr;
}
}
export default new ProjectedBlocks();

43
backend/src/api/statistics.ts
View File

@ -1,7 +1,7 @@
import memPool from './mempool';
import { DB } from '../database';
import { ITransaction, IMempoolStats } from '../interfaces';
import { Statistic, SimpleTransaction } from '../interfaces';
class Statistics {
protected intervalTimer: NodeJS.Timer | undefined;
@ -37,42 +37,28 @@ class Statistics {
console.log('Running statistics');
let memPoolArray: ITransaction[] = [];
let memPoolArray: SimpleTransaction[] = [];
for (const i in currentMempool) {
if (currentMempool.hasOwnProperty(i)) {
memPoolArray.push(currentMempool[i]);
}
}
// Remove 0 and undefined
memPoolArray = memPoolArray.filter((tx) => tx.feePerWeightUnit);
memPoolArray = memPoolArray.filter((tx) => tx.feePerVsize);
if (!memPoolArray.length) {
return;
}
memPoolArray.sort((a, b) => a.feePerWeightUnit - b.feePerWeightUnit);
memPoolArray.sort((a, b) => a.feePerVsize - b.feePerVsize);
const totalWeight = memPoolArray.map((tx) => tx.vsize).reduce((acc, curr) => acc + curr) * 4;
const totalFee = memPoolArray.map((tx) => tx.fee).reduce((acc, curr) => acc + curr);
const logFees = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200,
250, 300, 350, 400, 500, 600, 700, 800, 900, 1000, 1200, 1400, 1600, 1800, 2000];
const weightUnitFees: { [feePerWU: number]: number } = {};
const weightVsizeFees: { [feePerWU: number]: number } = {};
memPoolArray.forEach((transaction) => {
for (let i = 0; i < logFees.length; i++) {
if ((logFees[i] === 2000 && transaction.feePerWeightUnit >= 2000) || transaction.feePerWeightUnit <= logFees[i]) {
if (weightUnitFees[logFees[i]]) {
weightUnitFees[logFees[i]] += transaction.vsize * 4;
} else {
weightUnitFees[logFees[i]] = transaction.vsize * 4;
}
break;
}
}
});
memPoolArray.forEach((transaction) => {
for (let i = 0; i < logFees.length; i++) {
if ((logFees[i] === 2000 && transaction.feePerVsize >= 2000) || transaction.feePerVsize <= logFees[i]) {
@ -93,10 +79,7 @@ class Statistics {
vbytes_per_second: Math.round(vBytesPerSecond),
mempool_byte_weight: totalWeight,
total_fee: totalFee,
fee_data: JSON.stringify({
'wu': weightUnitFees,
'vsize': weightVsizeFees
}),
fee_data: '',
vsize_1: weightVsizeFees['1'] || 0,
vsize_2: weightVsizeFees['2'] || 0,
vsize_3: weightVsizeFees['3'] || 0,
@ -143,7 +126,7 @@ class Statistics {
}
}
private async $create(statistics: IMempoolStats): Promise<number | undefined> {
private async $create(statistics: Statistic): Promise<number | undefined> {
try {
const connection = await DB.pool.getConnection();
const query = `INSERT INTO statistics(
@ -295,7 +278,7 @@ class Statistics {
AVG(vsize_2000) AS vsize_2000 FROM statistics GROUP BY UNIX_TIMESTAMP(added) DIV ${groupBy} ORDER BY id DESC LIMIT ${days}`;
}
public async $get(id: number): Promise<IMempoolStats | undefined> {
public async $get(id: number): Promise<Statistic | undefined> {
try {
const connection = await DB.pool.getConnection();
const query = `SELECT * FROM statistics WHERE id = ?`;
@ -307,7 +290,7 @@ class Statistics {
}
}
public async $list2H(): Promise<IMempoolStats[]> {
public async $list2H(): Promise<Statistic[]> {
try {
const connection = await DB.pool.getConnection();
const query = `SELECT * FROM statistics ORDER BY id DESC LIMIT 120`;
@ -320,7 +303,7 @@ class Statistics {
}
}
public async $list24H(): Promise<IMempoolStats[]> {
public async $list24H(): Promise<Statistic[]> {
try {
const connection = await DB.pool.getConnection();
const query = this.getQueryForDays(120, 720);
@ -332,7 +315,7 @@ class Statistics {
}
}
public async $list1W(): Promise<IMempoolStats[]> {
public async $list1W(): Promise<Statistic[]> {
try {
const connection = await DB.pool.getConnection();
const query = this.getQueryForDays(120, 5040);
@ -345,7 +328,7 @@ class Statistics {
}
}
public async $list1M(): Promise<IMempoolStats[]> {
public async $list1M(): Promise<Statistic[]> {
try {
const connection = await DB.pool.getConnection();
const query = this.getQueryForDays(120, 20160);
@ -358,7 +341,7 @@ class Statistics {
}
}
public async $list3M(): Promise<IMempoolStats[]> {
public async $list3M(): Promise<Statistic[]> {
try {
const connection = await DB.pool.getConnection();
const query = this.getQueryForDays(120, 60480);
@ -371,7 +354,7 @@ class Statistics {
}
}
public async $list6M(): Promise<IMempoolStats[]> {
public async $list6M(): Promise<Statistic[]> {
try {
const connection = await DB.pool.getConnection();
const query = this.getQueryForDays(120, 120960);

246
backend/src/index.ts
View File

@ -6,40 +6,42 @@ import * as http from 'http';
import * as https from 'https';
import * as WebSocket from 'ws';
import bitcoinApi from './api/bitcoin/bitcoin-api-factory';
import diskCache from './api/disk-cache';
import memPool from './api/mempool';
import blocks from './api/blocks';
import projectedBlocks from './api/projected-blocks';
import statistics from './api/statistics';
import { IBlock, IMempool, ITransaction, IMempoolStats } from './interfaces';
import routes from './routes';
import blocks from './api/blocks';
import memPool from './api/mempool';
import mempoolBlocks from './api/mempool-blocks';
import diskCache from './api/disk-cache';
import statistics from './api/statistics';
import { Block, SimpleTransaction, Statistic } from './interfaces';
import fiatConversion from './api/fiat-conversion';
class MempoolSpace {
class Server {
private wss: WebSocket.Server;
private server: https.Server | http.Server;
private app: any;
constructor() {
this.app = express();
this.app
.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
})
.use(compression());
if (config.ENV === 'dev') {
this.server = http.createServer(this.app);
this.wss = new WebSocket.Server({ server: this.server });
} else {
if (config.SSL === true) {
const credentials = {
cert: fs.readFileSync('/etc/letsencrypt/live/mempool.space/fullchain.pem'),
key: fs.readFileSync('/etc/letsencrypt/live/mempool.space/privkey.pem'),
cert: fs.readFileSync(config.SSL_CERT_FILE_PATH),
key: fs.readFileSync(config.SSL_KEY_FILE_PATH),
};
this.server = https.createServer(credentials, this.app);
this.wss = new WebSocket.Server({ server: this.server });
} else {
this.server = http.createServer(this.app);
this.wss = new WebSocket.Server({ server: this.server });
}
this.setUpRoutes();
@ -50,20 +52,15 @@ class MempoolSpace {
statistics.startStatistics();
fiatConversion.startService();
const opts = {
host: '127.0.0.1',
port: 8999
};
this.server.listen(opts, () => {
console.log(`Server started on ${opts.host}:${opts.port}`);
this.server.listen(config.HTTP_PORT, () => {
console.log(`Server started on port ${config.HTTP_PORT}`);
});
}
private async runMempoolIntervalFunctions() {
await blocks.updateBlocks();
await memPool.updateMemPoolInfo();
await memPool.updateMempool();
setTimeout(this.runMempoolIntervalFunctions.bind(this), config.MEMPOOL_REFRESH_RATE_MS);
setTimeout(this.runMempoolIntervalFunctions.bind(this), config.ELECTRS_POLL_RATE_MS);
}
private setUpMempoolCache() {
@ -81,161 +78,36 @@ class MempoolSpace {
private setUpWebsocketHandling() {
this.wss.on('connection', (client: WebSocket) => {
let theBlocks = blocks.getBlocks();
theBlocks = theBlocks.concat([]).splice(theBlocks.length - config.INITIAL_BLOCK_AMOUNT);
const formatedBlocks = theBlocks.map((b) => blocks.formatBlock(b));
client.send(JSON.stringify({
'mempoolInfo': memPool.getMempoolInfo(),
'blocks': formatedBlocks,
'projectedBlocks': projectedBlocks.getProjectedBlocks(),
'txPerSecond': memPool.getTxPerSecond(),
'vBytesPerSecond': memPool.getVBytesPerSecond(),
'conversions': fiatConversion.getTickers()['BTCUSD'],
}));
client.on('message', async (message: any) => {
client.on('message', (message: any) => {
try {
const parsedMessage = JSON.parse(message);
if (parsedMessage.action === 'want') {
client['want-stats'] = parsedMessage.data.indexOf('stats') > -1;
client['want-blocks'] = parsedMessage.data.indexOf('blocks') > -1;
client['want-projected-blocks'] = parsedMessage.data.indexOf('projected-blocks') > -1;
client['want-live-2h-chart'] = parsedMessage.data.indexOf('live-2h-chart') > -1;
}
if (parsedMessage.action === 'track-tx' && parsedMessage.txId && /^[a-fA-F0-9]{64}$/.test(parsedMessage.txId)) {
const tx = await memPool.getRawTransaction(parsedMessage.txId);
if (tx) {
console.log('Now tracking: ' + parsedMessage.txId);
client['trackingTx'] = true;
if (parsedMessage && parsedMessage.txId && /^[a-fA-F0-9]{64}$/.test(parsedMessage.txId)) {
client['txId'] = parsedMessage.txId;
client['tx'] = tx;
if (tx.blockhash) {
const currentBlocks = blocks.getBlocks();
const foundBlock = currentBlocks.find((block) => block.tx && block.tx.some((i: string) => i === parsedMessage.txId));
if (foundBlock) {
console.log('Found block by looking in local cache');
client['blockHeight'] = foundBlock.height;
} else {
const theBlock = await bitcoinApi.getBlockAndTransactions(tx.blockhash);
if (theBlock) {
client['blockHeight'] = theBlock.height;
}
}
} else {
client['blockHeight'] = 0;
}
client.send(JSON.stringify({
'projectedBlocks': projectedBlocks.getProjectedBlocks(client['txId']),
'track-tx': {
tracking: true,
blockHeight: client['blockHeight'],
tx: client['tx'],
}
}));
} else {
console.log('TX NOT FOUND, NOT TRACKING');
client['trackingTx'] = false;
client['blockHeight'] = 0;
client['tx'] = null;
client.send(JSON.stringify({
'track-tx': {
tracking: false,
blockHeight: 0,
message: 'not-found',
}
}));
}
}
if (parsedMessage.action === 'stop-tracking-tx') {
console.log('STOP TRACKING');
client['trackingTx'] = false;
client.send(JSON.stringify({
'track-tx': {
tracking: false,
blockHeight: 0,
message: 'not-found',
}
}));
}
} catch (e) {
console.log(e);
}
});
client.on('close', () => {
client['trackingTx'] = false;
});
});
blocks.setNewBlockCallback((block: IBlock) => {
const formattedBlocks = blocks.formatBlock(block);
this.wss.clients.forEach((client) => {
if (client.readyState !== WebSocket.OPEN) {
const _blocks = blocks.getBlocks();
if (!_blocks) {
return;
}
client.send(JSON.stringify({
'blocks': _blocks,
'conversions': fiatConversion.getTickers()['BTCUSD'],
'mempool-blocks': mempoolBlocks.getMempoolBlocks(),
}));
const response = {};
if (client['trackingTx'] === true && client['blockHeight'] === 0) {
if (block.tx.some((tx: ITransaction) => tx === client['txId'])) {
client['blockHeight'] = block.height;
}
}
response['track-tx'] = {
tracking: client['trackingTx'] || false,
blockHeight: client['blockHeight'],
};
response['block'] = formattedBlocks;
client.send(JSON.stringify(response));
});
});
memPool.setMempoolChangedCallback((newMempool: IMempool) => {
projectedBlocks.updateProjectedBlocks(newMempool);
const pBlocks = projectedBlocks.getProjectedBlocks();
const mempoolInfo = memPool.getMempoolInfo();
const txPerSecond = memPool.getTxPerSecond();
const vBytesPerSecond = memPool.getVBytesPerSecond();
this.wss.clients.forEach((client: WebSocket) => {
if (client.readyState !== WebSocket.OPEN) {
return;
}
const response = {};
if (client['want-stats']) {
response['mempoolInfo'] = mempoolInfo;
response['txPerSecond'] = txPerSecond;
response['vBytesPerSecond'] = vBytesPerSecond;
response['track-tx'] = {
tracking: client['trackingTx'] || false,
blockHeight: client['blockHeight'],
};
}
if (client['want-projected-blocks'] && client['trackingTx'] && client['blockHeight'] === 0) {
response['projectedBlocks'] = projectedBlocks.getProjectedBlocks(client['txId']);
} else if (client['want-projected-blocks']) {
response['projectedBlocks'] = pBlocks;
}
if (Object.keys(response).length) {
client.send(JSON.stringify(response));
}
});
});
statistics.setNewStatisticsEntryCallback((stats: IMempoolStats) => {
statistics.setNewStatisticsEntryCallback((stats: Statistic) => {
this.wss.clients.forEach((client: WebSocket) => {
if (client.readyState !== WebSocket.OPEN) {
return;
@ -248,14 +120,47 @@ class MempoolSpace {
}
});
});
blocks.setNewBlockCallback((block: Block, txIds: string[]) => {
this.wss.clients.forEach((client) => {
if (client.readyState !== WebSocket.OPEN) {
return;
}
if (client['txId'] && txIds.indexOf(client['txId']) > -1) {
client['txId'] = null;
client.send(JSON.stringify({
'block': block,
'txConfirmed': true,
}));
} else {
client.send(JSON.stringify({
'block': block,
}));
}
});
});
memPool.setMempoolChangedCallback((newMempool: { [txid: string]: SimpleTransaction }) => {
mempoolBlocks.updateMempoolBlocks(newMempool);
const pBlocks = mempoolBlocks.getMempoolBlocks();
this.wss.clients.forEach((client: WebSocket) => {
if (client.readyState !== WebSocket.OPEN) {
return;
}
client.send(JSON.stringify({
'mempool-blocks': pBlocks
}));
});
});
}
private setUpRoutes() {
this.app
.get(config.API_ENDPOINT + 'transactions/height/:id', routes.$getgetTransactionsForBlock)
.get(config.API_ENDPOINT + 'transactions/projected/:id', routes.getgetTransactionsForProjectedBlock)
.get(config.API_ENDPOINT + 'fees/recommended', routes.getRecommendedFees)
.get(config.API_ENDPOINT + 'fees/projected-blocks', routes.getProjectedBlocks)
.get(config.API_ENDPOINT + 'fees/mempool-blocks', routes.getMempoolBlocks)
.get(config.API_ENDPOINT + 'statistics/2h', routes.get2HStatistics)
.get(config.API_ENDPOINT + 'statistics/24h', routes.get24HStatistics.bind(routes))
.get(config.API_ENDPOINT + 'statistics/1w', routes.get1WHStatistics.bind(routes))
@ -263,22 +168,7 @@ class MempoolSpace {
.get(config.API_ENDPOINT + 'statistics/3m', routes.get3MStatistics.bind(routes))
.get(config.API_ENDPOINT + 'statistics/6m', routes.get6MStatistics.bind(routes))
;
if (config.BACKEND_API === 'electrs') {
this.app
.get(config.API_ENDPOINT + 'explorer/blocks', routes.getBlocks)
.get(config.API_ENDPOINT + 'explorer/blocks/:height', routes.getBlocks)
.get(config.API_ENDPOINT + 'explorer/tx/:id', routes.getRawTransaction)
.get(config.API_ENDPOINT + 'explorer/block/:hash', routes.getBlock)
.get(config.API_ENDPOINT + 'explorer/block/:hash/tx', routes.getBlockTransactions)
.get(config.API_ENDPOINT + 'explorer/block/:hash/tx/:index', routes.getBlockTransactionsFromIndex)
.get(config.API_ENDPOINT + 'explorer/address/:address', routes.getAddress)
.get(config.API_ENDPOINT + 'explorer/address/:address/tx', routes.getAddressTransactions)
.get(config.API_ENDPOINT + 'explorer/address/:address/tx/chain/:txid', routes.getAddressTransactionsFromTxid)
;
}
}
}
}
const mempoolSpace = new MempoolSpace();
const server = new Server();

167
backend/src/interfaces.ts
View File

@ -1,4 +1,4 @@
export interface IMempoolInfo {
export interface MempoolInfo {
size: number;
bytes: number;
usage?: number;
@ -7,80 +7,110 @@ export interface IMempoolInfo {
minrelaytxfee?: number;
}
export interface ITransaction {
export interface MempoolBlock {
blockSize: number;
blockVSize: number;
nTx: number;
medianFee: number;
feeRange: number[];
}
export interface Transaction {
txid: string;
hash: string;
version: number;
size: number;
vsize: number;
weight: number;
locktime: number;
fee: number;
size: number;
weight: number;
vin: Vin[];
vout: Vout[];
hex: string;
status: Status;
}
export interface SimpleTransaction {
txid: string;
fee: number;
feePerWeightUnit: number;
feePerVsize: number;
blockhash?: string;
confirmations?: number;
time?: number;
blocktime?: number;
totalOut?: number;
}
export interface IBlock {
hash: string;
confirmations: number;
strippedsize: number;
size: number;
weight: number;
height: number;
version: number;
versionHex: string;
merkleroot: string;
tx: any;
time: number;
mediantime: number;
nonce: number;
bits: string;
difficulty: number;
chainwork: string;
nTx: number;
previousblockhash: string;
fees: number;
minFee?: number;
maxFee?: number;
medianFee?: number;
vsize: number;
feePerVsize: number;
}
interface ScriptSig {
asm: string;
hex: string;
export interface Prevout {
scriptpubkey: string;
scriptpubkey_asm: string;
scriptpubkey_type: string;
scriptpubkey_address: string;
value: number;
}
interface Vin {
export interface Vin {
txid: string;
vout: number;
scriptSig: ScriptSig;
sequence: number;
prevout: Prevout;
scriptsig: string;
scriptsig_asm: string;
inner_redeemscript_asm?: string;
is_coinbase: boolean;
sequence: any;
witness?: string[];
inner_witnessscript_asm?: string;
}
interface ScriptPubKey {
asm: string;
hex: string;
reqSigs: number;
type: string;
addresses: string[];
}
interface Vout {
export interface Vout {
scriptpubkey: string;
scriptpubkey_asm: string;
scriptpubkey_type: string;
scriptpubkey_address: string;
value: number;
n: number;
scriptPubKey: ScriptPubKey;
}
export interface IMempoolStats {
export interface Status {
confirmed: boolean;
block_height?: number;
block_hash?: string;
block_time?: number;
}
export interface Block {
id: string;
height: number;
version: number;
timestamp: number;
tx_count: number;
size: number;
weight: number;
merkle_root: string;
previousblockhash: string;
nonce: any;
bits: number;
medianFee?: number;
feeRange?: number[];
}
export interface Address {
address: string;
chain_stats: ChainStats;
mempool_stats: MempoolStats;
}
export interface ChainStats {
funded_txo_count: number;
funded_txo_sum: number;
spent_txo_count: number;
spent_txo_sum: number;
tx_count: number;
}
export interface MempoolStats {
funded_txo_count: number;
funded_txo_sum: number;
spent_txo_count: number;
spent_txo_sum: number;
tx_count: number;
}
export interface Statistic {
id?: number;
added: string;
unconfirmed_transactions: number;
@ -130,23 +160,10 @@ export interface IMempoolStats {
vsize_2000: number;
}
export interface IProjectedBlockInternal extends IProjectedBlock {
txIds: string[];
txFeePerVsizes: number[];
export interface Outspend {
spent: boolean;
txid: string;
vin: number;
status: Status;
}
export interface IProjectedBlock {
blockSize: number;
blockWeight: number;
maxFee: number;
maxWeightFee: number;
medianFee: number;
minFee: number;
minWeightFee: number;
nTx: number;
fees: number;
hasMyTxId?: boolean;
}
export interface IMempool { [txid: string]: ITransaction; }

142
backend/src/routes.ts
View File

@ -1,7 +1,6 @@
import statistics from './api/statistics';
import feeApi from './api/fee-api';
import projectedBlocks from './api/projected-blocks';
import bitcoinApi from './api/bitcoin/bitcoin-api-factory';
import mempoolBlocks from './api/mempool-blocks';
class Routes {
private cache = {};
@ -50,149 +49,14 @@ class Routes {
res.send(result);
}
public async $getgetTransactionsForBlock(req, res) {
const result = await feeApi.$getTransactionsForBlock(req.params.id);
res.send(result);
}
public async getgetTransactionsForProjectedBlock(req, res) {
public async getMempoolBlocks(req, res) {
try {
const result = await projectedBlocks.getProjectedBlockFeesForBlock(req.params.id);
const result = await mempoolBlocks.getMempoolBlocks();
res.send(result);
} catch (e) {
res.status(500).send(e.message);
}
}
public async getProjectedBlocks(req, res) {
try {
let txId: string | undefined;
if (req.query.txId && /^[a-fA-F0-9]{64}$/.test(req.query.txId)) {
txId = req.query.txId;
}
const result = await projectedBlocks.getProjectedBlocks(txId, 6);
res.send(result);
} catch (e) {
res.status(500).send(e.message);
}
}
public async getBlocks(req, res) {
try {
let result: string;
if (req.params.height) {
result = await bitcoinApi.getBlocksFromHeight(req.params.height);
} else {
result = await bitcoinApi.getBlocks();
}
res.send(result);
} catch (e) {
res.status(500).send(e.message);
}
}
public async getRawTransaction(req, res) {
try {
const result = await bitcoinApi.getRawTransaction(req.params.id);
res.send(result);
} catch (e) {
if (e.response) {
res.status(e.response.status).send(e.response.data);
} else {
res.status(500, e.message);
}
}
}
public async getBlock(req, res) {
try {
const result = await bitcoinApi.getBlock(req.params.hash);
res.send(result);
} catch (e) {
if (e.response) {
res.status(e.response.status).send(e.response.data);
} else {
res.status(500, e.message);
}
}
}
public async getBlockTransactions(req, res) {
try {
const result = await bitcoinApi.getBlockTransactions(req.params.hash);
res.send(result);
} catch (e) {
if (e.response) {
res.status(e.response.status).send(e.response.data);
} else {
if (e.response) {
res.status(e.response.status).send(e.response.data);
} else {
res.status(500, e.message);
}
}
}
}
public async getBlockTransactionsFromIndex(req, res) {
try {
const result = await bitcoinApi.getBlockTransactionsFromIndex(req.params.hash, req.params.index);
res.send(result);
} catch (e) {
if (e.response) {
res.status(e.response.status).send(e.response.data);
} else {
if (e.response) {
res.status(e.response.status).send(e.response.data);
} else {
res.status(500, e.message);
}
}
}
}
public async getAddress(req, res) {
try {
const result = await bitcoinApi.getAddress(req.params.address);
res.send(result);
} catch (e) {
if (e.response) {
res.status(e.response.status).send(e.response.data);
} else {
if (e.response) {
res.status(e.response.status).send(e.response.data);
} else {
res.status(500, e.message);
}
}
}
}
public async getAddressTransactions(req, res) {
try {
const result = await bitcoinApi.getAddressTransactions(req.params.address);
res.send(result);
} catch (e) {
if (e.response) {
res.status(e.response.status).send(e.response.data);
} else {
res.status(500, e.message);
}
}
}
public async getAddressTransactionsFromTxid(req, res) {
try {
const result = await bitcoinApi.getAddressTransactionsFromLastSeenTxid(req.params.address, req.params.txid);
res.send(result);
} catch (e) {
if (e.response) {
res.status(e.response.status).send(e.response.data);
} else {
res.status(500, e.message);
}
}
}
}
export default new Routes();

152
backend/yarn.lock
View File

@ -31,6 +31,13 @@
resolved "https://registry.yarnpkg.com/@types/caseless/-/caseless-0.12.2.tgz#f65d3d6389e01eeb458bd54dc8f52b95a9463bc8"
integrity sha512-6ckxMjBBD8URvjB6J3NcnuAn5Pkl7t3TizAg+xdlzzQGSPSmBcXf8KoIH0ua/i+tio+ZRUHEXp0HEmvaR4kt0w==
"@types/compression@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@types/compression/-/compression-1.0.1.tgz#f3682a6b3ce2dbd4aece48547153ebc592281fa7"
integrity sha512-GuoIYzD70h+4JUqUabsm31FGqvpCYHGKcLtor7nQ/YvUyNX0o9SJZ9boFI5HjFfbOda5Oe/XOvNK6FES8Y/79w==
dependencies:
"@types/express" "*"
"@types/connect@*":
version "3.4.32"
resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.32.tgz#aa0e9616b9435ccad02bc52b5b454ffc2c70ba28"
@ -39,17 +46,17 @@
"@types/node" "*"
"@types/express-serve-static-core@*":
version "4.16.10"
resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.16.10.tgz#3c1313c6e6b75594561b473a286f016a9abf2132"
integrity sha512-gM6evDj0OvTILTRKilh9T5dTaGpv1oYiFcJAfgSejuMJgGJUsD9hKEU2lB4aiTNy4WwChxRnjfYFuBQsULzsJw==
version "4.17.0"
resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.0.tgz#e80c25903df5800e926402b7e8267a675c54a281"
integrity sha512-Xnub7w57uvcBqFdIGoRg1KhNOeEj0vB6ykUM7uFWyxvbdE89GFyqgmUcanAriMr4YOxNFZBAWkfcWIb4WBPt3g==
dependencies:
"@types/node" "*"
"@types/range-parser" "*"
"@types/express@^4.16.0":
version "4.17.1"
resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.1.tgz#4cf7849ae3b47125a567dfee18bfca4254b88c5c"
integrity sha512-VfH/XCP0QbQk5B5puLqTLEeFgR8lfCJHZJKkInZ9mkYd+u8byX0kztXEQxEk4wZXJs8HI+7km2ALXjn4YKcX9w==
"@types/express@*", "@types/express@^4.17.2":
version "4.17.2"
resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.2.tgz#a0fb7a23d8855bac31bc01d5a58cadd9b2173e6c"
integrity sha512-5mHFNyavtLoJmnusB8OKJ5bshSzw+qkMIBAobLrIM48HJvunFva9mOa6aBwh64lBFyNwBbs0xiEFuj4eU/NjCA==
dependencies:
"@types/body-parser" "*"
"@types/express-serve-static-core" "*"
@ -60,20 +67,10 @@
resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.1.tgz#dc488842312a7f075149312905b5e3c0b054c79d"
integrity sha512-FwI9gX75FgVBJ7ywgnq/P7tw+/o1GUbtP0KzbtusLigAOgIgNISRK0ZPl4qertvXSIE8YbsVJueQ90cDt9YYyw==
"@types/mysql2@github:types/mysql2":
version "1.0.0"
resolved "https://codeload.github.com/types/mysql2/tar.gz/217efd4ccf9eccc0797522aa745d8a9e264f6a75"
dependencies:
"@types/mysql" types/mysql#v2.0.0
"@types/mysql@types/mysql#v2.0.0":
version "2.0.0"
resolved "https://codeload.github.com/types/mysql/tar.gz/da645a82afd66419ed439dddf174648aa68ba1f9"
"@types/node@*":
version "12.11.1"
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.11.1.tgz#1fd7b821f798b7fa29f667a1be8f3442bb8922a3"
integrity sha512-TJtwsqZ39pqcljJpajeoofYRfeZ7/I/OMUQ5pR4q5wOKf2ocrUvBAZUMhWsOvKx3dVc/aaV5GluBivt0sWqA5A==
version "12.12.17"
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.17.tgz#191b71e7f4c325ee0fb23bc4a996477d92b8c39b"
integrity sha512-Is+l3mcHvs47sKy+afn2O1rV4ldZFU7W8101cNlOd+MRbjM4Onida8jSZnJdTe/0Pcf25g9BNIUsuugmE6puHA==
"@types/range-parser@*":
version "1.2.3"
@ -99,14 +96,14 @@
"@types/mime" "*"
"@types/tough-cookie@*":
version "2.3.5"
resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-2.3.5.tgz#9da44ed75571999b65c37b60c9b2b88db54c585d"
integrity sha512-SCcK7mvGi3+ZNz833RRjFIxrn4gI1PPR3NtuIS+6vMkvmsGjosqTJwRt5bAEFLRz+wtJMWv8+uOnZf2hi2QXTg==
version "2.3.6"
resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-2.3.6.tgz#c880579e087d7a0db13777ff8af689f4ffc7b0d5"
integrity sha512-wHNBMnkoEBiRAd3s8KTKwIuO9biFtTf0LehITzBhSco+HQI0xkXZbLOD55SW3Aqw3oUkHstkm5SPv58yaAdFPQ==
"@types/ws@^6.0.1":
version "6.0.3"
resolved "https://registry.yarnpkg.com/@types/ws/-/ws-6.0.3.tgz#b772375ba59d79066561c8d87500144d674ba6b3"
integrity sha512-yBTM0P05Tx9iXGq00BbJPo37ox68R5vaGTXivs6RGh/BQ6QP5zqZDGWdAO6JbRE/iR1l80xeGAwCQS2nMV9S/w==
"@types/ws@^6.0.4":
version "6.0.4"
resolved "https://registry.yarnpkg.com/@types/ws/-/ws-6.0.4.tgz#7797707c8acce8f76d8c34b370d4645b70421ff1"
integrity sha512-PpPrX7SZW9re6+Ha8ojZG4Se8AZXgf0GK6zmfqEuCsY49LFDNXO3SByp44X3dFEqtB73lkCDAdUazhAjVPiNwg==
dependencies:
"@types/node" "*"
@ -159,7 +156,7 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
async-limiter@~1.0.0:
async-limiter@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
@ -175,17 +172,9 @@ aws-sign2@~0.7.0:
integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
aws4@^1.8.0:
version "1.8.0"
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
axios@^0.19.0:
version "0.19.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
integrity sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==
dependencies:
follow-redirects "1.5.10"
is-buffer "^2.0.2"
version "1.9.0"
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.0.tgz#24390e6ad61386b0a747265754d2a17219de862c"
integrity sha512-Uvq6hVe90D0B2WEnUqtdgY1bATGz3mw33nH9Y+dmA+w5DHvUmBgkr5rM/KCHpCsiFNRUfokW/szpPPgMK2hm4A==
balanced-match@^1.0.0:
version "1.0.0"
@ -199,11 +188,6 @@ bcrypt-pbkdf@^1.0.0:
dependencies:
tweetnacl "^0.14.3"
bitcoin@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/bitcoin/-/bitcoin-3.0.1.tgz#ff9e0b62a71bbb8adddb34ee2e427dac21c1096f"
integrity sha1-/54LYqcbu4rd2zTuLkJ9rCHBCW8=
body-parser@1.19.0:
version "1.19.0"
resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
@ -288,7 +272,7 @@ compressible@~2.0.16:
dependencies:
mime-db ">= 1.40.0 < 2"
compression@^1.7.3:
compression@^1.7.4:
version "1.7.4"
resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.4.tgz#95523eff170ca57c29a0ca41e6fe131f41e5bb8f"
integrity sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==
@ -347,13 +331,6 @@ debug@2.6.9:
dependencies:
ms "2.0.0"
debug@=3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
dependencies:
ms "2.0.0"
delayed-stream@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@ -422,7 +399,7 @@ etag@~1.8.1:
resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
express@^4.16.3:
express@^4.17.1:
version "4.17.1"
resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
@ -496,13 +473,6 @@ finalhandler@~1.1.2:
statuses "~1.5.0"
unpipe "~1.0.0"
follow-redirects@1.5.10:
version "1.5.10"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
dependencies:
debug "=3.1.0"
forever-agent@~0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
@ -556,9 +526,9 @@ getpass@^0.1.1:
assert-plus "^1.0.0"
glob@^7.1.1:
version "7.1.4"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==
version "7.1.6"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
dependencies:
fs.realpath "^1.0.0"
inflight "^1.0.4"
@ -624,9 +594,9 @@ iconv-lite@0.4.24:
safer-buffer ">= 2.1.2 < 3"
iconv-lite@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.5.0.tgz#59cdde0a2a297cc2aeb0c6445a195ee89f127550"
integrity sha512-NnEhI9hIEKHOzJ4f697DMz9IQEXr/MMJ5w64vN2/4Ai+wRnvV7SBrL0KLoRlwaKVghOc7LQ5YkPLuX146b6Ydw==
version "0.5.1"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.5.1.tgz#b2425d3c7b18f7219f2ca663d103bddb91718d64"
integrity sha512-ONHr16SQvKZNSqjQT9gy5z24Jw+uqfO02/ngBSBoqChZ+W8qXX7GPRa1RoUnzGADw8K63R1BXUMzarCVQBpY8Q==
dependencies:
safer-buffer ">= 2.1.2 < 3"
@ -653,11 +623,6 @@ ipaddr.js@1.9.0:
resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.0.tgz#37df74e430a0e47550fe54a2defe30d8acd95f65"
integrity sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==
is-buffer@^2.0.2:
version "2.0.4"
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==
is-property@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
@ -751,22 +716,17 @@ methods@~1.1.2:
resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
mime-db@1.40.0:
version "1.40.0"
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.40.0.tgz#a65057e998db090f732a68f6c276d387d4126c32"
integrity sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==
"mime-db@>= 1.40.0 < 2":
mime-db@1.42.0, "mime-db@>= 1.40.0 < 2":
version "1.42.0"
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.42.0.tgz#3e252907b4c7adb906597b4b65636272cf9e7bac"
integrity sha512-UbfJCR4UAVRNgMpfImz05smAXK7+c+ZntjaA26ANtkXLlOe947Aag5zdIcKQULAiF9Cq4WxBi9jUs5zkA84bYQ==
mime-types@^2.1.12, mime-types@~2.1.19, mime-types@~2.1.24:
version "2.1.24"
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.24.tgz#b6f8d0b3e951efb77dedeca194cff6d16f676f81"
integrity sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==
version "2.1.25"
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.25.tgz#39772d46621f93e2a80a856c53b86a62156a6437"
integrity sha512-5KhStqB5xpTAeGqKBAMgwaYMnQik7teQN4IAzC7npDv6kzeU6prfkR67bc87J1kWMPGkoaZSq1npmexMgkmEVg==
dependencies:
mime-db "1.40.0"
mime-db "1.42.0"
mime@1.6.0:
version "1.6.0"
@ -891,9 +851,9 @@ pseudomap@^1.0.2:
integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
psl@^1.1.24:
version "1.4.0"
resolved "https://registry.yarnpkg.com/psl/-/psl-1.4.0.tgz#5dd26156cdb69fa1fdb8ab1991667d3f80ced7c2"
integrity sha512-HZzqCGPecFLyoRj5HLfuDSKYTJkAfB5thKBIkRHtGjWwY7p1dAyveIbXIq4tO0KYfDF2tHqPUgY9SDnGm00uFw==
version "1.6.0"
resolved "https://registry.yarnpkg.com/psl/-/psl-1.6.0.tgz#60557582ee23b6c43719d9890fb4170ecd91e110"
integrity sha512-SYKKmVel98NCOYXpkwUqZqh0ahZeeKfmisiLIcEZdsb+WbLv02g/dI5BUmZnIyOe7RzZtLax81nnb2HbvC2tzA==
punycode@^1.4.1:
version "1.4.1"
@ -957,9 +917,9 @@ request@^2.88.0:
uuid "^3.3.2"
resolve@^1.3.2:
version "1.12.0"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
integrity sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==
version "1.13.1"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.13.1.tgz#be0aa4c06acd53083505abb35f4d66932ab35d16"
integrity sha512-CxqObCX8K8YtAhOBRg+lrcdn+LK+WYOS8tSjqSFbjtrI5PnS63QPhZl4+yKfrU9tdsbMu9Anr/amegT87M9Z6w==
dependencies:
path-parse "^1.0.6"
@ -1078,9 +1038,9 @@ tslib@^1.8.0, tslib@^1.8.1:
integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
tslint@^5.11.0:
version "5.20.0"
resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.20.0.tgz#fac93bfa79568a5a24e7be9cdde5e02b02d00ec1"
integrity sha512-2vqIvkMHbnx8acMogAERQ/IuINOq6DFqgF8/VDvhEkBqQh/x6SP0Y+OHnKth9/ZcHQSroOZwUQSN18v8KKF0/g==
version "5.20.1"
resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.20.1.tgz#e401e8aeda0152bc44dd07e614034f3f80c67b7d"
integrity sha512-EcMxhzCFt8k+/UP5r8waCf/lzmeSyVlqxqMEDQE7rWYiQky8KpIBz1JAoYXfROHrPZ1XXd43q8yQnULOLiBRQg==
dependencies:
"@babel/code-frame" "^7.0.0"
builtin-modules "^1.1.1"
@ -1123,7 +1083,7 @@ type-is@~1.6.17, type-is@~1.6.18:
media-typer "0.3.0"
mime-types "~2.1.24"
typescript@^3.1.1:
typescript@~3.6.4:
version "3.6.4"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.6.4.tgz#b18752bb3792bc1a0281335f7f6ebf1bbfc5b91d"
integrity sha512-unoCll1+l+YK4i4F8f22TaNVPRHcD9PA3yCuZ8g5e0qGqlVlJ/8FSateOLLSagn+Yg5+ZwuPkL8LFUc0Jcvksg==
@ -1169,12 +1129,12 @@ wrappy@1:
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
ws@^6.0.0:
version "6.2.1"
resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
ws@^7.2.0:
version "7.2.0"
resolved "https://registry.yarnpkg.com/ws/-/ws-7.2.0.tgz#422eda8c02a4b5dba7744ba66eebbd84bcef0ec7"
integrity sha512-+SqNqFbwTm/0DC18KYzIsMTnEWpLwJsiasW/O17la4iDRRIO9uaHbvKiAS3AHgTiuuWerK/brj4O6MYZkei9xg==
dependencies:
async-limiter "~1.0.0"
async-limiter "^1.0.0"
yallist@^2.1.2:
version "2.1.2"

51
entrypoint.sh
View File

@ -1,51 +0,0 @@
#!/bin/bash
## Start SQL
mysqld_safe&
sleep 5
## http server:
nginx
## Set up some files:
cd /mempool.space/backend
rm -f cache.json
touch cache.json
## Build mempool-config.json file ourseleves.
## We used to use jq for this but that produced output which caused bugs,
## specifically numbers were surrounded by quotes, which breaks things.
## Old command was jq -n env > mempool-config.json
## This way is more complex, but more compatible with the backend functions.
## Define a function to allow us to easily get indexes of the = string in from the env output:
strindex() {
x="${1%%$2*}"
[[ "$x" = "$1" ]] && echo -1 || echo "${#x}"
}
## Regex to check if we have a number or not:
NumberRegEx='^[0-9]+$'
## Delete the old file, and start a new one:
rm -f mempool-config.json
echo "{" >> mempool-config.json
## For each env we add into the mempool-config.json file in one of two ways.
## Either:
## "Variable": "Value",
## if a string, or
## "Variable": Value,
## if a integer
for e in `env`; do
if [[ ${e:`strindex "$e" "="`+1} =~ $NumberRegEx ]] ; then
## Integer add:
echo "\""${e:0:`strindex "$e" "="`}"\": "${e:`strindex "$e" "="`+1}"," >> mempool-config.json
else
## String add:
echo "\""${e:0:`strindex "$e" "="`}"\": \""${e:`strindex "$e" "="`+1}$"\"," >> mempool-config.json
fi
done
## Take out the trailing , from the last entry.
## This means replacing the file with one that is missing the last character
echo `sed '$ s/.$//' mempool-config.json` > mempool-config.json
## And finally finish off:
echo "}" >> mempool-config.json
## Start mempoolspace:
node dist/index.js

2
frontend/.editorconfig
View File

@ -1,4 +1,4 @@
# Editor configuration, see http://editorconfig.org
# Editor configuration, see https://editorconfig.org
root = true
[*]

7
frontend/.gitignore vendored
View File

@ -4,10 +4,16 @@
/dist
/tmp
/out-tsc
# Only exists if Bazel was run
/bazel-out
# dependencies
/node_modules
# profiling files
chrome-profiler-events.json
speed-measure-plugin.json
# IDEs and editors
/.idea
.project
@ -23,6 +29,7 @@
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# misc
/.sass-cache

27
frontend/README.md Normal file
View File

@ -0,0 +1,27 @@
# Mempool Space
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.1.2.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

90
frontend/angular.json
View File

@ -3,25 +3,26 @@
"version": 1,
"newProjectRoot": "projects",
"projects": {
"mempool": {
"root": "",
"sourceRoot": "src",
"mempoolspace": {
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/mempool",
"outputPath": "dist/mempoolspace",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
@ -44,45 +45,38 @@
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
"electrs": {
"fileReplacements": [
"buildOptimizer": true,
"budgets": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment-electrs.prod.ts"
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "mempool:build"
"browserTarget": "mempoolspace:build"
},
"configurations": {
"production": {
"browserTarget": "mempool:build:production"
"browserTarget": "mempoolspace:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "mempool:build"
"browserTarget": "mempoolspace:build"
}
},
"test": {
@ -90,54 +84,44 @@
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.scss"
],
"scripts": [],
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
]
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"mempool-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "mempool:serve"
}
"devServerTarget": "mempoolspace:serve"
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
"configurations": {
"production": {
"devServerTarget": "mempoolspace:serve:production"
}
}
}
}
},
"defaultProject": "mempool"
}},
"defaultProject": "mempoolspace"
}

12
frontend/browserslist Normal file
View File

@ -0,0 +1,12 @@
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running:
# npx browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

6
frontend/e2e/protractor.conf.js
View File

@ -1,8 +1,12 @@
// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
/**
* @type { import("protractor").Config }
*/
exports.config = {
allScriptsTimeout: 11000,
specs: [
@ -21,7 +25,7 @@ exports.config = {
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.e2e.json')
project: require('path').join(__dirname, './tsconfig.json')
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}

11
frontend/e2e/src/app.e2e-spec.ts
View File

@ -1,4 +1,5 @@
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
describe('workspace-project App', () => {
let page: AppPage;
@ -9,6 +10,14 @@ describe('workspace-project App', () => {
it('should display welcome message', () => {
page.navigateTo();
expect(page.getParagraphText()).toEqual('Welcome to app!');
expect(page.getTitleText()).toEqual('Welcome to mempoolspace!');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE,
} as logging.Entry));
});
});

6
frontend/e2e/src/app.po.ts
View File

@ -2,10 +2,10 @@ import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo() {
return browser.get('/');
return browser.get(browser.baseUrl) as Promise<any>;
}
getParagraphText() {
return element(by.css('app-root h1')).getText();
getTitleText() {
return element(by.css('app-root h1')).getText() as Promise<string>;
}
}

2
frontend/e2e/tsconfig.e2e.json → frontend/e2e/tsconfig.json
View File

@ -1,7 +1,7 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"outDir": "../out-tsc/e2e",
"module": "commonjs",
"target": "es5",
"types": [

7
frontend/src/karma.conf.js → frontend/karma.conf.js
View File

@ -16,8 +16,8 @@ module.exports = function (config) {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage'),
reports: ['html', 'lcovonly'],
dir: require('path').join(__dirname, './coverage/mempoolspace'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
@ -26,6 +26,7 @@ module.exports = function (config) {
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
singleRun: false,
restartOnFileChange: true
});
};

9036
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

73
frontend/package.json
View File

@ -1,50 +1,55 @@
{
"name": "mempool-frontend",
"version": "1.0.0",
"description": "Bitcoin Mempool Visualizer",
"name": "mempoolspace",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --aot --proxy-config proxy.conf.json",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build --prod",
"build-electrs": "ng build --prod --configuration=electrs",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"author": {
"name": "Simon Lindh",
"url": "https://github.com/mempool-space/mempool.space"
},
"license": "MIT",
"private": true,
"dependencies": {
"@angular/animations": "^8.2.11",
"@angular/common": "^8.2.11",
"@angular/compiler": "^8.2.11",
"@angular/core": "^8.2.11",
"@angular/forms": "^8.2.11",
"@angular/platform-browser": "^8.2.11",
"@angular/platform-browser-dynamic": "^8.2.11",
"@angular/router": "^8.2.11",
"@ng-bootstrap/ng-bootstrap": "^5.1.1",
"angularx-qrcode": "^1.7.0-beta.5",
"bootstrap": "^4.3.1",
"chartist": "^0.11.2",
"core-js": "^3.4.1",
"ng-chartist": "^2.0.0-beta.1",
"rxjs": "^6.5.3",
"tslib": "^1.9.0",
"@angular/animations": "~9.0.0",
"@angular/common": "~9.0.0",
"@angular/compiler": "~9.0.0",
"@angular/core": "~9.0.0",
"@angular/forms": "~9.0.0",
"@angular/localize": "^9.0.1",
"@angular/platform-browser": "~9.0.0",
"@angular/platform-browser-dynamic": "~9.0.0",
"@angular/router": "~9.0.0",
"@ng-bootstrap/ng-bootstrap": "^5.3.0",
"@types/qrcode": "^1.3.4",
"bootstrap": "^4.4.1",
"chartist": "^0.11.4",
"clipboard": "^2.0.4",
"qrcode": "^1.4.4",
"rxjs": "~6.5.3",
"tlite": "^0.1.9",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.800.0",
"@angular/cli": "~8.3.12",
"@angular/compiler-cli": "^8.2.11",
"@angular/language-service": "^8.2.11",
"@types/chartist": "^0.9.46",
"@types/node": "~8.9.4",
"codelyzer": "~5.1.0",
"@angular-devkit/build-angular": "~0.900.1",
"@angular/cli": "~9.0.1",
"@angular/compiler-cli": "~9.0.0",
"@angular/language-service": "~9.0.0",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
"typescript": "~3.6.4"
}
}

5
frontend/proxy.conf.json
View File

@ -2,10 +2,5 @@
"/api": {
"target": "http://localhost:8999/",
"secure": false
},
"/ws": {
"target": "http://localhost:8999/",
"secure": false,
"ws": true
}
}

50
frontend/src/app/app-routing.module.ts
View File

@ -1,10 +1,13 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BlockchainComponent } from './blockchain/blockchain.component';
import { AboutComponent } from './about/about.component';
import { StatisticsComponent } from './statistics/statistics.component';
import { TelevisionComponent } from './television/television.component';
import { MasterPageComponent } from './master-page/master-page.component';
import { StartComponent } from './components/start/start.component';
import { TransactionComponent } from './components/transaction/transaction.component';
import { BlockComponent } from './components/block/block.component';
import { AddressComponent } from './components/address/address.component';
import { MasterPageComponent } from './components/master-page/master-page.component';
import { AboutComponent } from './components/about/about.component';
import { TelevisionComponent } from './components/television/television.component';
import { StatisticsComponent } from './components/statistics/statistics.component';
const routes: Routes = [
{
@ -13,30 +16,30 @@ const routes: Routes = [
children: [
{
path: '',
children: [],
component: BlockchainComponent
},
{
path: 'tx/:id',
children: [],
component: BlockchainComponent
},
{
path: 'about',
children: [],
component: AboutComponent
},
{
path: 'statistics',
component: StatisticsComponent,
component: StartComponent,
},
{
path: 'graphs',
component: StatisticsComponent,
},
{
path: 'explorer',
loadChildren: './explorer/explorer.module#ExplorerModule',
path: 'about',
component: AboutComponent,
},
{
path: 'tx/:id',
children: [],
component: TransactionComponent
},
{
path: 'block/:id',
children: [],
component: BlockComponent
},
{
path: 'address/:id',
children: [],
component: AddressComponent
},
],
},
@ -49,6 +52,7 @@ const routes: Routes = [
redirectTo: ''
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]

1
frontend/src/app/app.component.html
View File

@ -1 +0,0 @@
<router-outlet></router-outlet>

10
frontend/src/app/app.component.ts
View File

@ -1,10 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor() { }
}

106
frontend/src/app/app.module.ts
View File

@ -1,56 +1,88 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BlockchainComponent } from './blockchain/blockchain.component';
import { AppRoutingModule } from './app-routing.module';
import { SharedModule } from './shared/shared.module';
import { MemPoolService } from './services/mem-pool.service';
import { HttpClientModule } from '@angular/common/http';
import { FooterComponent } from './footer/footer.component';
import { AboutComponent } from './about/about.component';
import { TxBubbleComponent } from './tx-bubble/tx-bubble.component';
import { ReactiveFormsModule } from '@angular/forms';
import { BlockModalComponent } from './blockchain-blocks/block-modal/block-modal.component';
import { StatisticsComponent } from './statistics/statistics.component';
import { ProjectedBlockModalComponent } from './blockchain-projected-blocks/projected-block-modal/projected-block-modal.component';
import { TelevisionComponent } from './television/television.component';
import { BlockchainBlocksComponent } from './blockchain-blocks/blockchain-blocks.component';
import { BlockchainProjectedBlocksComponent } from './blockchain-projected-blocks/blockchain-projected-blocks.component';
import { ApiService } from './services/api.service';
import { MasterPageComponent } from './master-page/master-page.component';
import { FeeDistributionGraphComponent } from './fee-distribution-graph/fee-distribution-graph.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbButtonsModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './components/app/app.component';
import { StartComponent } from './components/start/start.component';
import { ElectrsApiService } from './services/electrs-api.service';
import { TimeSincePipe } from './pipes/time-since/time-since.pipe';
import { BytesPipe } from './pipes/bytes-pipe/bytes.pipe';
import { VbytesPipe } from './pipes/bytes-pipe/vbytes.pipe';
import { WuBytesPipe } from './pipes/bytes-pipe/wubytes.pipe';
import { TransactionComponent } from './components/transaction/transaction.component';
import { TransactionsListComponent } from './components/transactions-list/transactions-list.component';
import { AmountComponent } from './components/amount/amount.component';
import { StateService } from './services/state.service';
import { BlockComponent } from './components/block/block.component';
import { ShortenStringPipe } from './pipes/shorten-string-pipe/shorten-string.pipe';
import { AddressComponent } from './components/address/address.component';
import { SearchFormComponent } from './components/search-form/search-form.component';
import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
import { WebsocketService } from './services/websocket.service';
import { TimeSinceComponent } from './components/time-since/time-since.component';
import { AddressLabelsComponent } from './components/address-labels/address-labels.component';
import { MempoolBlocksComponent } from './components/mempool-blocks/mempool-blocks.component';
import { CeilPipe } from './pipes/math-ceil/math-ceil.pipe';
import { LatestTransactionsComponent } from './components/latest-transactions/latest-transactions.component';
import { QrcodeComponent } from './components/qrcode/qrcode.component';
import { ClipboardComponent } from './components/clipboard/clipboard.component';
import { MasterPageComponent } from './components/master-page/master-page.component';
import { AboutComponent } from './components/about/about.component';
import { TelevisionComponent } from './components/television/television.component';
import { StatisticsComponent } from './components/statistics/statistics.component';
import { ChartistComponent } from './components/statistics/chartist.component';
import { BlockchainBlocksComponent } from './components/blockchain-blocks/blockchain-blocks.component';
import { BlockchainComponent } from './components/blockchain/blockchain.component';
@NgModule({
declarations: [
AppComponent,
BlockchainComponent,
FooterComponent,
StatisticsComponent,
AboutComponent,
TxBubbleComponent,
BlockModalComponent,
ProjectedBlockModalComponent,
TelevisionComponent,
BlockchainBlocksComponent,
BlockchainProjectedBlocksComponent,
MasterPageComponent,
FeeDistributionGraphComponent,
TelevisionComponent,
BlockchainComponent,
StartComponent,
BlockchainBlocksComponent,
StatisticsComponent,
TransactionComponent,
BlockComponent,
TransactionsListComponent,
TimeSincePipe,
BytesPipe,
VbytesPipe,
WuBytesPipe,
CeilPipe,
ShortenStringPipe,
AddressComponent,
AmountComponent,
SearchFormComponent,
LatestBlocksComponent,
TimeSinceComponent,
AddressLabelsComponent,
MempoolBlocksComponent,
LatestTransactionsComponent,
QrcodeComponent,
ClipboardComponent,
ChartistComponent,
],
imports: [
ReactiveFormsModule,
BrowserModule,
HttpClientModule,
AppRoutingModule,
SharedModule,
HttpClientModule,
ReactiveFormsModule,
BrowserAnimationsModule,
NgbButtonsModule,
],
providers: [
ApiService,
MemPoolService,
],
entryComponents: [
BlockModalComponent,
ProjectedBlockModalComponent,
ElectrsApiService,
StateService,
WebsocketService,
VbytesPipe,
],
bootstrap: [AppComponent]
})

37
frontend/src/app/blockchain-blocks/block-modal/block-modal.component.html
View File

@ -1,37 +0,0 @@
<div class="modal-header">
<h4 class="modal-title">Fee distribution for block
<a *ngIf="!isElectrsEnabled" href="https://www.blockstream.info/block-height/{{ block.height }}" target="_blank">#{{ block.height }}</a>
<a *ngIf="isElectrsEnabled" (click)="activeModal.dismiss()" [routerLink]="['/explorer/block/', block.hash]">#{{ block.height }}</a>
</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div>
<table class="table table-borderless table-sm">
<tr>
<th>Median fee:</th>
<td>~{{ block.medianFee | ceil }} sat/vB <span *ngIf="conversions">(~<span class="green-color">{{ conversions.USD * (block.medianFee/100000000)*250 | currency:'USD':'symbol':'1.2-2' }}</span>/tx)</span></td>
<th>Block size:</th>
<td>{{ block.size | bytes: 2 }}</td>
</tr>
<tr>
<th>Fee span:</th>
<td class="yellow-color">{{ block.minFee | ceil }} - {{ block.maxFee | ceil }} sat/vB</td>
<th>Tx count:</th>
<td>{{ block.nTx }} transactions</td>
</tr>
<tr>
<th>Total fees:</th>
<td>{{ (block.fees - blockSubsidy) | number: '1.2-2' }} BTC <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * (block.fees - blockSubsidy) | currency:'USD':'symbol':'1.0-0' }}</span>)</span></td>
<th>Block reward + fees:</th>
<td>{{ block.fees | number: '1.2-2' }} BTC <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * block.fees | currency:'USD':'symbol':'1.0-0' }}</span>)</span></td>
</tr>
</table>
</div>
<hr>
<app-fee-distribution-graph [blockHeight]="block.height"></app-fee-distribution-graph>
</div>

1
frontend/src/app/blockchain-blocks/block-modal/block-modal.component.scss
View File

@ -1 +0,0 @@

35
frontend/src/app/blockchain-blocks/block-modal/block-modal.component.ts
View File

@ -1,35 +0,0 @@
import { Component, OnInit, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { IBlock } from '../../blockchain/interfaces';
import { MemPoolService } from '../../services/mem-pool.service';
import { environment } from '../../../environments/environment';
@Component({
selector: 'app-block-modal',
templateUrl: './block-modal.component.html',
styleUrls: ['./block-modal.component.scss']
})
export class BlockModalComponent implements OnInit {
@Input() block: IBlock;
blockSubsidy = 50;
isElectrsEnabled = !!environment.electrs;
conversions: any;
constructor(
public activeModal: NgbActiveModal,
private memPoolService: MemPoolService,
) { }
ngOnInit() {
this.memPoolService.conversions$
.subscribe((conversions) => {
this.conversions = conversions;
});
let halvenings = Math.floor(this.block.height / 210000);
while (halvenings > 0) {
this.blockSubsidy = this.blockSubsidy / 2;
halvenings--;
}
}
}

21
frontend/src/app/blockchain-blocks/blockchain-blocks.component.html
View File

@ -1,21 +0,0 @@
<div class="blocks-container" *ngIf="blocks.length">
<div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
<div (click)="openBlockModal(block);" class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="getStyleForBlock(block)">
<div class="block-height">
<a *ngIf="!isElectrsEnabled" href="https://www.blockstream.info/block-height/{{ block.height }}" target="_blank">#{{ block.height }}</a>
<a *ngIf="isElectrsEnabled" [routerLink]="['/explorer/block/', block.hash]">#{{ block.height }}</a>
</div>
<div class="block-body">
<div class="fees">
~{{ block.medianFee | ceil }} sat/vB
<br/>
<span class="yellow-color">{{ block.minFee | ceil }} - {{ block.maxFee | ceil }} sat/vB</span>
</div>
<div class="block-size">{{ block.size | bytes: 2 }}</div>
<div class="transaction-count">{{ block.nTx }} transactions</div>
<br /><br />
<div class="time-difference">{{ block.time | timeSince : trigger }} ago</div>
</div>
</div>
</div>
</div>

20
frontend/src/app/blockchain-projected-blocks/blockchain-projected-blocks.component.html
View File

@ -1,20 +0,0 @@
<div class="projected-blocks-container">
<div *ngFor="let projectedBlock of projectedBlocks; let i = index; trackBy: trackByProjectedFn">
<div (click)="openProjectedBlockModal(projectedBlock, i);" class="bitcoin-block text-center projected-block" id="projected-block-{{ i }}" [ngStyle]="getStyleForProjectedBlockAtIndex(i)">
<div class="block-body" *ngIf="projectedBlocks?.length">
<div class="fees">
~{{ projectedBlock.medianFee | ceil }} sat/vB
<br/>
<span class="yellow-color">{{ projectedBlock.minFee | ceil }} - {{ projectedBlock.maxFee | ceil }} sat/vB</span>
</div>
<div class="block-size">{{ projectedBlock.blockSize | bytes: 2 }}</div>
<div class="transaction-count">{{ projectedBlock.nTx }} transactions</div>
<div class="time-difference" *ngIf="i !== 3">In ~{{ 10 * i + 10 }} minutes</div>
<ng-template [ngIf]="i === 3 && projectedBlocks?.length >= 4 && (projectedBlock.blockWeight / 4000000 | ceil) > 1">
<div class="time-difference">+{{ projectedBlock.blockWeight / 4000000 | ceil }} blocks</div>
</ng-template>
</div>
<span class="animated-border"></span>
</div>
</div>
</div>

58
frontend/src/app/blockchain-projected-blocks/blockchain-projected-blocks.component.ts
View File

@ -1,58 +0,0 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { IProjectedBlock, IBlock } from '../blockchain/interfaces';
import { ProjectedBlockModalComponent } from './projected-block-modal/projected-block-modal.component';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { MemPoolService } from '../services/mem-pool.service';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-blockchain-projected-blocks',
templateUrl: './blockchain-projected-blocks.component.html',
styleUrls: ['./blockchain-projected-blocks.component.scss']
})
export class BlockchainProjectedBlocksComponent implements OnInit, OnDestroy {
projectedBlocks: IProjectedBlock[];
subscription: Subscription;
constructor(
private modalService: NgbModal,
private memPoolService: MemPoolService,
) { }
ngOnInit() {
this.subscription = this.memPoolService.projectedBlocks$
.subscribe((projectedblocks) => this.projectedBlocks = projectedblocks);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
trackByProjectedFn(index: number) {
return index;
}
openProjectedBlockModal(block: IBlock, index: number) {
const modalRef = this.modalService.open(ProjectedBlockModalComponent, { size: 'lg' });
modalRef.componentInstance.block = block;
modalRef.componentInstance.index = index;
}
getStyleForProjectedBlockAtIndex(index: number) {
const greenBackgroundHeight = 100 - (this.projectedBlocks[index].blockWeight / 4000000) * 100;
if (window.innerWidth <= 768) {
return {
'top': 40 + index * 155 + 'px',
'background': `repeating-linear-gradient(#554b45, #554b45 ${greenBackgroundHeight}%,
#bd7c13 ${Math.max(greenBackgroundHeight, 0)}%, #c5345a 100%)`,
};
} else {
return {
'right': 40 + index * 155 + 'px',
'background': `repeating-linear-gradient(#554b45, #554b45 ${greenBackgroundHeight}%,
#bd7c13 ${Math.max(greenBackgroundHeight, 0)}%, #c5345a 100%)`,
};
}
}
}

30
frontend/src/app/blockchain-projected-blocks/projected-block-modal/projected-block-modal.component.html
View File

@ -1,30 +0,0 @@
<div class="modal-header">
<h4 class="modal-title">Fee distribution for projected block</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div>
<table class="table table-borderless table-sm">
<tr>
<th>Median fee:</th>
<td>~{{ block.medianFee | ceil }} sat/vB <span *ngIf="conversions">(~<span class="green-color">{{ conversions.USD * (block.medianFee/100000000)*250 | currency:'USD':'symbol':'1.2-2' }}</span>/tx)</span></td>
<th>Tx count:</th>
<td>{{ block.nTx }} transactions</td>
</tr>
<tr>
<th>Fee span:</th>
<td class="yellow-color">{{ block.minFee | ceil }} - {{ block.maxFee | ceil }} sat/vB</td>
</tr>
<tr>
<th>Total fees:</th>
<td>{{ block.fees | number: '1.2-2' }} BTC <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * block.fees| currency:'USD':'symbol':'1.0-0' }}</span>)</span></td>
</tr>
</table>
</div>
<hr>
<app-fee-distribution-graph [projectedBlockIndex]="index"></app-fee-distribution-graph>
</div>

29
frontend/src/app/blockchain-projected-blocks/projected-block-modal/projected-block-modal.component.ts
View File

@ -1,29 +0,0 @@
import { Component, OnInit, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { MemPoolService } from '../../services/mem-pool.service';
import { IBlock } from 'src/app/blockchain/interfaces';
@Component({
selector: 'app-projected-block-modal',
templateUrl: './projected-block-modal.component.html',
styleUrls: ['./projected-block-modal.component.scss']
})
export class ProjectedBlockModalComponent implements OnInit {
@Input() block: IBlock;
@Input() index: number;
conversions: any;
constructor(
public activeModal: NgbActiveModal,
private memPoolService: MemPoolService,
) { }
ngOnInit() {
this.memPoolService.conversions$
.subscribe((conversions) => {
this.conversions = conversions;
});
}
}

177
frontend/src/app/blockchain/interfaces.ts
View File

@ -1,177 +0,0 @@
export interface IMempoolInfo {
size: number;
bytes: number;
usage: number;
maxmempool: number;
mempoolminfee: number;
minrelaytxfee: number;
}
export interface IMempoolDefaultResponse {
mempoolInfo?: IMempoolInfo;
blocks?: IBlock[];
block?: IBlock;
projectedBlocks?: IProjectedBlock[];
'live-2h-chart'?: IMempoolStats;
txPerSecond?: number;
vBytesPerSecond: number;
'track-tx'?: ITrackTx;
conversions?: any;
}
export interface ITrackTx {
tx?: ITransaction;
blockHeight: number;
tracking: boolean;
message?: string;
}
export interface IProjectedBlock {
blockSize: number;
blockWeight: number;
maxFee: number;
maxWeightFee: number;
medianFee: number;
minFee: number;
minWeightFee: number;
nTx: number;
hasMytx: boolean;
}
export interface IStrippedBlock {
bits: number;
difficulty: number;
hash: string;
height: number;
nTx: number;
size: number;
strippedsize: number;
time: number;
weight: number;
}
export interface ITransaction {
txid: string;
hash: string;
version: number;
size: number;
vsize: number;
locktime: number;
vin: Vin[];
vout: Vout[];
hex: string;
fee: number;
feePerVsize: number;
feePerWeightUnit: number;
}
export interface IBlock {
hash: string;
confirmations: number;
strippedsize: number;
size: number;
weight: number;
height: number;
version: number;
versionHex: string;
merkleroot: string;
tx: ITransaction[];
time: number;
mediantime: number;
nonce: number;
bits: string;
difficulty: number;
chainwork: string;
nTx: number;
previousblockhash: string;
minFee: number;
maxFee: number;
medianFee: number;
fees: number;
}
interface ScriptSig {
asm: string;
hex: string;
}
interface Vin {
txid: string;
vout: number;
scriptSig: ScriptSig;
sequence: number;
}
interface ScriptPubKey {
asm: string;
hex: string;
reqSigs: number;
type: string;
addresses: string[];
}
interface Vout {
value: number;
n: number;
scriptPubKey: ScriptPubKey;
}
export interface IMempoolStats {
id: number;
added: string;
unconfirmed_transactions: number;
tx_per_second: number;
vbytes_per_second: number;
mempool_byte_weight: number;
fee_data: IFeeData;
vsize_1: number;
vsize_2: number;
vsize_3: number;
vsize_4: number;
vsize_5: number;
vsize_6: number;
vsize_8: number;
vsize_10: number;
vsize_12: number;
vsize_15: number;
vsize_20: number;
vsize_30: number;
vsize_40: number;
vsize_50: number;
vsize_60: number;
vsize_70: number;
vsize_80: number;
vsize_90: number;
vsize_100: number;
vsize_125: number;
vsize_150: number;
vsize_175: number;
vsize_200: number;
vsize_250: number;
vsize_300: number;
vsize_350: number;
vsize_400: number;
vsize_500: number;
vsize_600: number;
vsize_700: number;
vsize_800: number;
vsize_900: number;
vsize_1000: number;
vsize_1200: number;
vsize_1400: number;
vsize_1600: number;
vsize_1800: number;
vsize_2000: number;
}
export interface IBlockTransaction {
f: number;
fpv: number;
}
interface IFeeData {
wu: { [ fee: string ]: number };
vsize: { [ fee: string ]: number };
}

16
frontend/src/app/about/about.component.html → frontend/src/app/components/about/about.component.html
View File

@ -4,10 +4,10 @@
<h2>About</h2>
<p>Mempool.Space is a realtime Bitcoin blockchain visualizer and statistics website focused on SegWit.</p>
<p>Created by <a href="http://t.me/softcrypto">@softcrypto</a> (Telegram). <a href="https://twitter.com/softcrypt0">@softcrypt0</a> (Twitter).
<br />Designed by <a href="https://emeraldo.io">emeraldo.io</a>.
<br />Hosted by <a href="https://twitter.com/wiz">@wiz</a></p>
<p>Mempool.Space is a realtime Bitcoin blockchain explorer and mempool visualizer.</p>
<p>Created by <a href="https://twitter.com/softbtc">@softbtc</a>
<br />Hosted by <a href="https://twitter.com/wiz">@wiz</a>
<br />Designed by <a href="https://instagram.com/markjborg">@markjborg</a>
<h2>Fee API</h2>
@ -19,18 +19,10 @@
<br />
<h1>Donate</h1>
<h3>Segwit native</h3>
<img src="./assets/btc-qr-code-segwit.png" width="200" height="200" />
<br />
bc1qqrmgr60uetlmrpylhtllawyha9z5gw6hwdmk2t
<br /><br />
<h3>Segwit compatibility</h3>
<img src="./assets/btc-qr-code.png" width="200" height="200" />
<br />
3Ccig4G4u8hbExnxBJHeE5ZmxxWxvEQ65f
<br /><br />
<h3>PayNym</h3>

0
frontend/src/app/about/about.component.scss → frontend/src/app/components/about/about.component.scss
View File

6
frontend/src/app/about/about.component.ts → frontend/src/app/components/about/about.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../services/api.service';
import { WebsocketService } from '../../services/websocket.service';
@Component({
selector: 'app-about',
@ -9,11 +9,11 @@ import { ApiService } from '../services/api.service';
export class AboutComponent implements OnInit {
constructor(
private apiService: ApiService,
private websocketService: WebsocketService,
) { }
ngOnInit() {
this.apiService.webSocketWant([]);
this.websocketService.want([]);
}
}

1
frontend/src/app/components/address-labels/address-labels.component.html Normal file
View File

@ -0,0 +1 @@
<span *ngIf="multisig" class="badge badge-pill badge-warning">multisig {{ multisigM }} of {{ multisigN }}</span>

3
frontend/src/app/components/address-labels/address-labels.component.scss Normal file
View File

@ -0,0 +1,3 @@
.badge {
margin-right: 2px;
}

25
frontend/src/app/components/address-labels/address-labels.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AddressLabelsComponent } from './address-labels.component';
describe('AddressLabelsComponent', () => {
let component: AddressLabelsComponent;
let fixture: ComponentFixture<AddressLabelsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AddressLabelsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AddressLabelsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

60
frontend/src/app/components/address-labels/address-labels.component.ts Normal file
View File

@ -0,0 +1,60 @@
import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
import { Vin, Vout } from '../../interfaces/electrs.interface';
@Component({
selector: 'app-address-labels',
templateUrl: './address-labels.component.html',
styleUrls: ['./address-labels.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AddressLabelsComponent implements OnInit {
@Input() vin: Vin;
@Input() vout: Vout;
multisig = false;
multisigM: number;
multisigN: number;
constructor() { }
ngOnInit() {
if (this.vin) {
this.handleVin();
} else if (this.vout) {
this.handleVout();
}
}
handleVin() {
if (this.vin.inner_witnessscript_asm && this.vin.inner_witnessscript_asm.indexOf('OP_CHECKMULTISIG') > -1) {
const matches = this.getMatches(this.vin.inner_witnessscript_asm, /OP_PUSHNUM_([0-9])/g, 1);
this.multisig = true;
this.multisigM = matches[0];
this.multisigN = matches[1];
}
if (this.vin.inner_redeemscript_asm && this.vin.inner_redeemscript_asm.indexOf('OP_CHECKMULTISIG') > -1) {
const matches = this.getMatches(this.vin.inner_redeemscript_asm, /OP_PUSHNUM_([0-9])/g, 1);
this.multisig = true;
this.multisigM = matches[0];
this.multisigN = matches[1];
}
}
handleVout() {
}
getMatches(str: string, regex: RegExp, index: number) {
if (!index) {
index = 1;
}
const matches = [];
let match;
while (match = regex.exec(str)) {
matches.push(match[index]);
}
return matches;
}
}

100
frontend/src/app/components/address/address.component.html Normal file
View File

@ -0,0 +1,100 @@
<div class="container">
<h1 style="float: left;">Address</h1>
<a [routerLink]="['/address/', addressString]" style="line-height: 55px; margin-left: 10px;">{{ addressString }}</a>
<app-clipboard [text]="addressString"></app-clipboard>
<br>
<div class="clearfix"></div>
<ng-template [ngIf]="!isLoadingAddress && !error">
<div class="box">
<div class="row">
<div class="col">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td>Number of transactions</td>
<td>{{ address.chain_stats.tx_count + address.mempool_stats.tx_count }}</td>
</tr>
<tr>
<td>Total received</td>
<td>{{ (address.chain_stats.funded_txo_sum + address.mempool_stats.funded_txo_sum) / 100000000 | number: '1.2-2' }} BTC</td>
</tr>
<tr>
<td>Total sent</td>
<td>{{ (address.chain_stats.spent_txo_sum + address.mempool_stats.spent_txo_sum) / 100000000 | number: '1.2-2' }} BTC</td>
</tr>
</tbody>
</table>
</div>
<div class="col text-right">
<div class="qr-wrapper">
<app-qrcode [data]="address.address"></app-qrcode>
<!--qrcode id="qrCode" [qrdata]="address.address" [size]="128" [level]="'M'"></qrcode>-->
</div>
</div>
</div>
</div>
<br>
<h2><ng-template [ngIf]="transactions?.length">{{ transactions?.length || '?' }} of </ng-template>{{ address.chain_stats.tx_count + address.mempool_stats.tx_count }} transactions</h2>
<app-transactions-list [transactions]="transactions" [showConfirmations]="true"></app-transactions-list>
<div class="text-center">
<ng-template [ngIf]="isLoadingTransactions">
<div class="spinner-border"></div>
<br><br>
</ng-template>
<button *ngIf="transactions?.length && transactions?.length !== (address.chain_stats.tx_count + address.mempool_stats.tx_count)" type="button" class="btn btn-primary" (click)="loadMore()">Load more</button>
</div>
</ng-template>
<ng-template [ngIf]="isLoadingAddress && !error">
<div class="box">
<div class="row">
<div class="col">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
<div class="col">
</div>
</div>
</div>
<br>
<div class="text-center">
<div class="spinner-border"></div>
<br><br>
</div>
</ng-template>
<ng-template [ngIf]="error">
<div class="text-center">
Error loading address data.
<br>
<i>{{ error.error }}</i>
</div>
</ng-template>
</div>
<br>

5
frontend/src/app/explorer/address/address.component.scss → frontend/src/app/components/address/address.component.scss
View File

@ -1,11 +1,6 @@
.header-bg {
background-color:#653b9c;
font-size: 14px;
}
.header-bg a {
color: #FFF;
text-decoration: underline;
}
.qr-wrapper {
background-color: #FFF;

26
frontend/src/app/explorer/address/address.component.ts → frontend/src/app/components/address/address.component.ts
View File

@ -1,7 +1,8 @@
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { ApiService } from 'src/app/services/api.service';
import { ElectrsApiService } from '../../services/electrs-api.service';
import { switchMap } from 'rxjs/operators';
import { Address, Transaction } from '../../interfaces/electrs.interface';
@Component({
selector: 'app-address',
@ -9,17 +10,16 @@ import { switchMap } from 'rxjs/operators';
styleUrls: ['./address.component.scss']
})
export class AddressComponent implements OnInit {
address: any;
address: Address;
addressString: string;
isLoadingAddress = true;
latestBlockHeight: number;
transactions: any[];
transactions: Transaction[];
isLoadingTransactions = true;
error: any;
constructor(
private route: ActivatedRoute,
private apiService: ApiService,
private ref: ChangeDetectorRef,
private electrsApiService: ElectrsApiService,
) { }
ngOnInit() {
@ -27,15 +27,17 @@ export class AddressComponent implements OnInit {
switchMap((params: ParamMap) => {
this.error = undefined;
this.isLoadingAddress = true;
const address: string = params.get('id') || '';
return this.apiService.getAddress$(address);
this.isLoadingTransactions = true;
this.transactions = null;
this.addressString = params.get('id') || '';
return this.electrsApiService.getAddress$(this.addressString);
})
)
.subscribe((address) => {
this.address = address;
this.isLoadingAddress = false;
window.scrollTo(0, 0);
this.getAddressTransactions(address.address);
this.ref.markForCheck();
},
(error) => {
console.log(error);
@ -45,7 +47,7 @@ export class AddressComponent implements OnInit {
}
getAddressTransactions(address: string) {
this.apiService.getAddressTransactions$(address)
this.electrsApiService.getAddressTransactions$(address)
.subscribe((transactions: any) => {
this.transactions = transactions;
this.isLoadingTransactions = false;
@ -54,7 +56,7 @@ export class AddressComponent implements OnInit {
loadMore() {
this.isLoadingTransactions = true;
this.apiService.getAddressTransactionsFromHash$(this.address.id, this.transactions[this.transactions.length - 1].txid)
this.electrsApiService.getAddressTransactionsFromHash$(this.address.address, this.transactions[this.transactions.length - 1].txid)
.subscribe((transactions) => {
this.transactions = this.transactions.concat(transactions);
this.isLoadingTransactions = false;

6
frontend/src/app/components/amount/amount.component.html Normal file
View File

@ -0,0 +1,6 @@
<ng-container *ngIf="(viewFiat$ | async) && (conversions$ | async) as conversions; else viewFiatVin">
<span>{{ conversions.USD * (satoshis / 100000000) | currency:'USD':'symbol':'1.2-2' }}</span>
</ng-container>
<ng-template #viewFiatVin>
{{ satoshis / 100000000 }} BTC
</ng-template>

3
frontend/src/app/components/amount/amount.component.scss Normal file
View File

@ -0,0 +1,3 @@
.green-color {
color: #3bcc49;
}

25
frontend/src/app/components/amount/amount.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AmountComponent } from './amount.component';
describe('AmountComponent', () => {
let component: AmountComponent;
let fixture: ComponentFixture<AmountComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AmountComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AmountComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

26
frontend/src/app/components/amount/amount.component.ts Normal file
View File

@ -0,0 +1,26 @@
import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
import { StateService } from '../../services/state.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-amount',
templateUrl: './amount.component.html',
styleUrls: ['./amount.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AmountComponent implements OnInit {
conversions$: Observable<any>;
viewFiat$: Observable<boolean>;
@Input() satoshis: number;
constructor(
private stateService: StateService,
) { }
ngOnInit() {
this.viewFiat$ = this.stateService.viewFiat$.asObservable();
this.conversions$ = this.stateService.conversions$.asObservable();
}
}

1
frontend/src/app/components/app/app.component.html Normal file
View File

@ -0,0 +1 @@
<router-outlet></router-outlet>

7
frontend/src/app/components/app/app.component.scss Normal file
View File

@ -0,0 +1,7 @@
footer {
max-width: 960px;
}
.logo {
height: 40px;
}

35
frontend/src/app/components/app/app.component.spec.ts Normal file
View File

@ -0,0 +1,35 @@
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'mempoolspace'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('mempoolspace');
});
it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to mempoolspace!');
});
});

15
frontend/src/app/components/app/app.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { WebsocketService } from '../../services/websocket.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(
public router: Router,
private websocketService: WebsocketService,
) { }
}

134
frontend/src/app/components/block/block.component.html Normal file
View File

@ -0,0 +1,134 @@
<div class="container">
<app-blockchain></app-blockchain>
<h1>Block <ng-template [ngIf]="blockHeight"><a [routerLink]="['/block/', blockHash]">#{{ blockHeight }}</a></ng-template></h1>
<ng-template [ngIf]="!isLoadingBlock && !error">
<br>
<div class="box">
<div class="row">
<div class="col">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td>Timestamp</td>
<td>{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }} <i>(<app-time-since [time]="block.timestamp"></app-time-since> ago)</i></td>
</tr>
<tr>
<td>Number of transactions</td>
<td>{{ block.tx_count }}</td>
</tr>
<tr>
<td>Size</td>
<td>{{ block.size | bytes: 2 }}</td>
</tr>
<tr>
<td>Weight</td>
<td>{{ block.weight | wuBytes: 2 }}</td>
</tr>
<tr>
<td>Status</td>
<td><button *ngIf="latestBlock" class="btn btn-sm btn-success">{{ (latestBlock.height - block.height + 1) }} confirmation{{ (latestBlock.height - block.height + 1) === 1 ? '' : 's' }}</button></td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td>Hash</td>
<td><a [routerLink]="['/block/', block.id]" title="{{ block.id }}" >{{ block.id | shortenString : 32 }}</a></td>
</tr>
<tr>
<td>Previous Block</td>
<td><a [routerLink]="['/block/', block.previousblockhash]" [state]="{ data: { blockHeight: blockHeight - 1 } }" title="{{ block.previousblockhash }}">{{ block.previousblockhash | shortenString : 32 }}</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<br>
<h2><ng-template [ngIf]="transactions?.length">{{ transactions?.length || '?' }} of </ng-template>{{ block.tx_count }} transactions</h2>
<br>
<app-transactions-list [transactions]="transactions"></app-transactions-list>
<div class="text-center">
<ng-template [ngIf]="isLoadingTransactions">
<div class="spinner-border"></div>
<br><br>
</ng-template>
<button *ngIf="transactions?.length && transactions?.length !== block.tx_count" type="button" class="btn btn-primary" (click)="loadMore()">Load more</button>
</div>
</ng-template>
<ng-template [ngIf]="isLoadingBlock && !error">
<br>
<div class="box">
<div class="row">
<div class="col">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<br>
<div class="text-center">
<div class="spinner-border"></div>
<br><br>
</div>
</ng-template>
<ng-template [ngIf]="error">
<div class="text-center">
Error loading block data.
<br>
<i>{{ error.error }}</i>
</div>
</ng-template>
</div>
<br>

0
frontend/src/app/explorer/block/block.component.scss → frontend/src/app/components/block/block.component.scss
View File

52
frontend/src/app/explorer/block/block.component.ts → frontend/src/app/components/block/block.component.ts
View File

@ -1,9 +1,10 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { ApiService } from 'src/app/services/api.service';
import { MemPoolService } from 'src/app/services/mem-pool.service';
import { ElectrsApiService } from '../../services/electrs-api.service';
import { switchMap } from 'rxjs/operators';
import { ChangeDetectorRef } from '@angular/core';
import { Block, Transaction } from '../../interfaces/electrs.interface';
import { of } from 'rxjs';
import { StateService } from '../../services/state.service';
@Component({
selector: 'app-block',
@ -11,48 +12,59 @@ import { ChangeDetectorRef } from '@angular/core';
styleUrls: ['./block.component.scss']
})
export class BlockComponent implements OnInit {
block: any;
block: Block;
blockHeight: number;
blockHash: string;
isLoadingBlock = true;
latestBlockHeight: number;
transactions: any[];
latestBlock: Block;
transactions: Transaction[];
isLoadingTransactions = true;
error: any;
constructor(
private route: ActivatedRoute,
private apiService: ApiService,
private memPoolService: MemPoolService,
private ref: ChangeDetectorRef,
private electrsApiService: ElectrsApiService,
private stateService: StateService,
) { }
ngOnInit() {
this.route.paramMap.pipe(
switchMap((params: ParamMap) => {
this.error = undefined;
this.isLoadingBlock = true;
const blockHash: string = params.get('id') || '';
return this.apiService.getBlock$(blockHash);
this.error = undefined;
if (history.state.data && history.state.data.blockHeight) {
this.blockHeight = history.state.data.blockHeight;
}
this.blockHash = blockHash;
if (history.state.data && history.state.data.block) {
return of(history.state.data.block);
} else {
this.isLoadingBlock = true;
return this.electrsApiService.getBlock$(blockHash);
}
})
)
.subscribe((block) => {
.subscribe((block: Block) => {
this.block = block;
this.blockHeight = block.height;
this.isLoadingBlock = false;
this.getBlockTransactions(block.id);
this.ref.markForCheck();
window.scrollTo(0, 0);
},
(error) => {
this.error = error;
this.isLoadingBlock = false;
});
this.memPoolService.blocks$
.subscribe((block) => {
this.latestBlockHeight = block.height;
});
this.stateService.blocks$
.subscribe((block) => this.latestBlock = block);
}
getBlockTransactions(hash: string) {
this.apiService.getBlockTransactions$(hash)
this.electrsApiService.getBlockTransactions$(hash)
.subscribe((transactions: any) => {
this.transactions = transactions;
this.isLoadingTransactions = false;
@ -61,7 +73,7 @@ export class BlockComponent implements OnInit {
loadMore() {
this.isLoadingTransactions = true;
this.apiService.getBlockTransactions$(this.block.id, this.transactions.length)
this.electrsApiService.getBlockTransactions$(this.block.id, this.transactions.length)
.subscribe((transactions) => {
this.transactions = this.transactions.concat(transactions);
this.isLoadingTransactions = false;

20
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html Normal file
View File

@ -0,0 +1,20 @@
<div class="blocks-container" *ngIf="blocks.length">
<div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
<div [routerLink]="['/block/', block.id]" [state]="{ data: { block: block } }" class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="getStyleForBlock(block)">
<div class="block-height">
<a [routerLink]="['/block/', block.id]" [state]="{ data: { block: block } }">#{{ block.height }}</a>
</div>
<div class="block-body">
<div class="fees">
~{{ block.medianFee | ceil }} sat/vB
<br/>
<span class="yellow-color">{{ block.feeRange[0] | ceil }} - {{ block.feeRange[block.feeRange.length - 1] | ceil }} sat/vB</span>
</div>
<div class="block-size">{{ block.size | bytes: 2 }}</div>
<div class="transaction-count">{{ block.tx_count }} transactions</div>
<br /><br />
<div class="time-difference">{{ block.timestamp | timeSince : trigger }} ago</div>
</div>
</div>
</div>
</div>

0
frontend/src/app/blockchain-blocks/blockchain-blocks.component.scss → frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
View File

32
frontend/src/app/blockchain-blocks/blockchain-blocks.component.ts → frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@ -1,10 +1,7 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { IBlock } from '../blockchain/interfaces';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { BlockModalComponent } from './block-modal/block-modal.component';
import { MemPoolService } from '../services/mem-pool.service';
import { Subscription } from 'rxjs';
import { environment } from '../../environments/environment';
import { Block } from 'src/app/interfaces/electrs.interface';
import { StateService } from 'src/app/services/state.service';
@Component({
selector: 'app-blockchain-blocks',
@ -12,19 +9,17 @@ import { environment } from '../../environments/environment';
styleUrls: ['./blockchain-blocks.component.scss']
})
export class BlockchainBlocksComponent implements OnInit, OnDestroy {
blocks: IBlock[] = [];
blocks: Block[] = [];
blocksSubscription: Subscription;
interval: any;
trigger = 0;
isElectrsEnabled = !!environment.electrs;
constructor(
private modalService: NgbModal,
private memPoolService: MemPoolService,
private stateService: StateService,
) { }
ngOnInit() {
this.blocksSubscription = this.memPoolService.blocks$
this.blocksSubscription = this.stateService.blocks$
.subscribe((block) => {
if (this.blocks.some((b) => b.height === block.height)) {
return;
@ -41,27 +36,22 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
clearInterval(this.interval);
}
trackByBlocksFn(index: number, item: IBlock) {
trackByBlocksFn(index: number, item: Block) {
return item.height;
}
openBlockModal(block: IBlock) {
const modalRef = this.modalService.open(BlockModalComponent, { size: 'lg' });
modalRef.componentInstance.block = block;
}
getStyleForBlock(block: IBlock) {
getStyleForBlock(block: Block) {
const greenBackgroundHeight = 100 - (block.weight / 4000000) * 100;
if (window.innerWidth <= 768) {
return {
'top': 155 * this.blocks.indexOf(block) + 'px',
'background': `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
top: 155 * this.blocks.indexOf(block) + 'px',
background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
#9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
};
} else {
return {
'left': 155 * this.blocks.indexOf(block) + 'px',
'background': `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
left: 155 * this.blocks.indexOf(block) + 'px',
background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
#9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
};
}

6
frontend/src/app/blockchain/blockchain.component.html → frontend/src/app/components/blockchain/blockchain.component.html
View File

@ -11,14 +11,10 @@
</div>
<div class="text-center" class="blockchain-wrapper">
<div class="position-container">
<app-blockchain-projected-blocks></app-blockchain-projected-blocks>
<app-mempool-blocks></app-mempool-blocks>
<app-blockchain-blocks></app-blockchain-blocks>
<div id="divider" *ngIf="!isLoading"></div>
</div>
</div>
<app-tx-bubble></app-tx-bubble>
<app-footer></app-footer>

8
frontend/src/app/blockchain/blockchain.component.scss → frontend/src/app/components/blockchain/blockchain.component.scss
View File

@ -1,8 +1,8 @@
#divider {
width: 3px;
height: 3000px;
height: 200px;
left: 0;
top: -1000px;
top: -50px;
background-image: url('/assets/divider-new.png');
background-repeat: repeat-y;
position: absolute;
@ -17,12 +17,14 @@
.blockchain-wrapper {
overflow: hidden;
height: 250px;
}
.position-container {
position: absolute;
left: 50%;
top: calc(50% - 60px);
/* top: calc(50% - 60px); */
top: 180px;
}
@media (max-width: 767.98px) {

27
frontend/src/app/blockchain/blockchain.component.ts → frontend/src/app/components/blockchain/blockchain.component.ts
View File

@ -1,9 +1,9 @@
import { Component, OnInit, OnDestroy, Renderer2 } from '@angular/core';
import { MemPoolService, ITxTracking } from '../services/mem-pool.service';
import { ApiService } from '../services/api.service';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Subscription } from 'rxjs';
import { take } from 'rxjs/operators';
import { WebsocketService } from 'src/app/services/websocket.service';
import { StateService } from 'src/app/services/state.service';
@Component({
selector: 'app-blockchain',
@ -19,14 +19,14 @@ export class BlockchainComponent implements OnInit, OnDestroy {
isLoading = true;
constructor(
private memPoolService: MemPoolService,
private apiService: ApiService,
private renderer: Renderer2,
private route: ActivatedRoute,
private websocketService: WebsocketService,
private stateService: StateService,
) {}
ngOnInit() {
this.apiService.webSocketWant(['stats', 'blocks', 'projected-blocks']);
/*
this.apiService.webSocketWant(['stats', 'blocks', 'mempool-blocks']);
this.txTrackingSubscription = this.memPoolService.txTracking$
.subscribe((response: ITxTracking) => {
@ -36,9 +36,9 @@ export class BlockchainComponent implements OnInit, OnDestroy {
setTimeout(() => { this.txShowTxNotFound = false; }, 2000);
}
});
*/
this.renderer.addClass(document.body, 'disable-scroll');
/*
this.route.paramMap
.subscribe((params: ParamMap) => {
if (this.memPoolService.txTracking$.value.enabled) {
@ -53,6 +53,9 @@ export class BlockchainComponent implements OnInit, OnDestroy {
this.apiService.webSocketStartTrackTx(txId);
});
*/
/*
this.memPoolService.txIdSearch$
.subscribe((txId) => {
if (txId) {
@ -64,11 +67,12 @@ export class BlockchainComponent implements OnInit, OnDestroy {
}
console.log('enabling tracking loading from idSearch!');
this.txTrackingLoading = true;
this.apiService.webSocketStartTrackTx(txId);
this.websocketService.startTrackTx(txId);
}
});
*/
this.blocksSubscription = this.memPoolService.blocks$
this.blocksSubscription = this.stateService.blocks$
.pipe(
take(1)
)
@ -77,7 +81,6 @@ export class BlockchainComponent implements OnInit, OnDestroy {
ngOnDestroy() {
this.blocksSubscription.unsubscribe();
this.txTrackingSubscription.unsubscribe();
this.renderer.removeClass(document.body, 'disable-scroll');
// this.txTrackingSubscription.unsubscribe();
}
}

5
frontend/src/app/components/clipboard/clipboard.component.html Normal file
View File

@ -0,0 +1,5 @@
<span #buttonWrapper [attr.data-tlite]="'Copied!'">
<button #btn class="btn btn-sm btn-link pt-0" style="line-height: 1;" [attr.data-clipboard-text]="text">
<img src="./assets/clippy.svg" width="13">
</button>
</span>

0
frontend/src/app/app.component.scss → frontend/src/app/components/clipboard/clipboard.component.scss
View File

25
frontend/src/app/components/clipboard/clipboard.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ClipboardComponent } from './clipboard.component';
describe('ClipboardComponent', () => {
let component: ClipboardComponent;
let fixture: ComponentFixture<ClipboardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ClipboardComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ClipboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

33
frontend/src/app/components/clipboard/clipboard.component.ts Normal file
View File

@ -0,0 +1,33 @@
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, Input } from '@angular/core';
import * as ClipboardJS from 'clipboard';
import * as tlite from 'tlite';
@Component({
selector: 'app-clipboard',
templateUrl: './clipboard.component.html',
styleUrls: ['./clipboard.component.scss']
})
export class ClipboardComponent implements AfterViewInit {
@ViewChild('btn') btn: ElementRef;
@ViewChild('buttonWrapper') buttonWrapper: ElementRef;
@Input() text: string;
clipboard: any;
constructor() { }
ngAfterViewInit() {
this.clipboard = new ClipboardJS(this.btn.nativeElement);
this.clipboard.on('success', (e) => {
tlite.show(this.buttonWrapper.nativeElement);
setTimeout(() => {
tlite.hide(this.buttonWrapper.nativeElement);
}, 1000);
});
}
onDestroy() {
this.clipboard.destroy();
}
}

43
frontend/src/app/components/latest-blocks/latest-blocks.component.html Normal file
View File

@ -0,0 +1,43 @@
<table class="table table-borderless">
<thead>
<th style="width: 120px;">Height</th>
<th class="d-none d-md-block" style="width: 300px;">Timestamp</th>
<th style="width: 200px;">Mined</th>
<th style="width: 150px;">Transactions</th>
<th style="width: 175px;">Size</th>
<th class="d-none d-md-block">Filled</th>
</thead>
<tbody>
<tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
<td><a [routerLink]="['./block', block.id]" [state]="{ data: { block: block } }">#{{ block.height }}</a></td>
<td class="d-none d-md-block">{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
<td>{{ block.timestamp | timeSince : trigger }} ago</td>
<td>{{ block.tx_count }}</td>
<td>{{ block.size | bytes: 2 }}</td>
<td class="d-none d-md-block">
<div class="progress position-relative">
<div class="progress-bar bg-success" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
</div>
</td>
</tr>
<ng-template [ngIf]="isLoading">
<tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</ng-template>
</tbody>
</table>
<div class="text-center">
<ng-template [ngIf]="isLoading">
<div class="spinner-border"></div>
<br><br>
</ng-template>
<br>
<button *ngIf="blocks.length" [disabled]="isLoading" type="button" class="btn btn-primary" (click)="loadMore()">Load more</button>
</div>

0
frontend/src/app/blockchain-projected-blocks/projected-block-modal/projected-block-modal.component.scss → frontend/src/app/components/latest-blocks/latest-blocks.component.scss
View File

25
frontend/src/app/components/latest-blocks/latest-blocks.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LatestBlocksComponent } from './latest-blocks.component';
describe('LatestBlocksComponent', () => {
let component: LatestBlocksComponent;
let fixture: ComponentFixture<LatestBlocksComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LatestBlocksComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LatestBlocksComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

78
frontend/src/app/components/latest-blocks/latest-blocks.component.ts Normal file
View File

@ -0,0 +1,78 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ElectrsApiService } from '../../services/electrs-api.service';
import { StateService } from '../../services/state.service';
import { Block } from '../../interfaces/electrs.interface';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-latest-blocks',
templateUrl: './latest-blocks.component.html',
styleUrls: ['./latest-blocks.component.scss'],
})
export class LatestBlocksComponent implements OnInit, OnDestroy {
blocks: any[] = [];
blockSubscription: Subscription;
isLoading = true;
interval: any;
trigger = 0;
constructor(
private electrsApiService: ElectrsApiService,
private stateService: StateService,
) { }
ngOnInit() {
this.blockSubscription = this.stateService.blocks$
.subscribe((block) => {
if (block === null || !this.blocks.length) {
return;
}
if (block.height === this.blocks[0].height) {
return;
}
// If we are out of sync, reload the blocks instead
if (block.height > this.blocks[0].height + 1) {
this.loadInitialBlocks();
return;
}
if (block.height === this.blocks[0].height) {
return;
}
this.blocks.pop();
this.blocks.unshift(block);
});
this.loadInitialBlocks();
this.interval = window.setInterval(() => this.trigger++, 1000 * 60);
}
ngOnDestroy() {
clearInterval(this.interval);
this.blockSubscription.unsubscribe();
}
loadInitialBlocks() {
this.electrsApiService.listBlocks$()
.subscribe((blocks) => {
this.blocks = blocks;
this.isLoading = false;
});
}
loadMore() {
this.isLoading = true;
this.electrsApiService.listBlocks$(this.blocks[this.blocks.length - 1].height - 1)
.subscribe((blocks) => {
this.blocks = this.blocks.concat(blocks);
this.isLoading = false;
});
}
trackByBlock(index: number, block: Block) {
return block.height;
}
}

28
frontend/src/app/components/latest-transactions/latest-transactions.component.html Normal file
View File

@ -0,0 +1,28 @@
<table class="table table-borderless">
<thead>
<th>Transaction ID</th>
<th style="width: 200px;">Value</th>
<th style="width: 125px;">Size</th>
<th style="width: 150px;">Fee</th>
</thead>
<tbody>
<ng-container *ngIf="(transactions$ | async) as transactions">
<ng-template [ngIf]="!isLoading">
<tr *ngFor="let transaction of transactions">
<td><a [routerLink]="['./tx/', transaction.txid]">{{ transaction.txid }}</a></td>
<td>{{ transaction.value / 100000000 }} BTC</td>
<td>{{ transaction.vsize | vbytes: 2 }}</td>
<td>{{ transaction.fee / transaction.vsize | number : '1.2-2'}} sats/vB</td>
</tr>
</ng-template>
</ng-container>
<ng-template [ngIf]="isLoading">
<tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</ng-template>
</tbody>
</table>

0
frontend/src/app/explorer/explorer/explorer.component.scss → frontend/src/app/components/latest-transactions/latest-transactions.component.scss
View File

25
frontend/src/app/components/latest-transactions/latest-transactions.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LatestTransactionsComponent } from './latest-transactions.component';
describe('LatestTransactionsComponent', () => {
let component: LatestTransactionsComponent;
let fixture: ComponentFixture<LatestTransactionsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LatestTransactionsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LatestTransactionsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

31
frontend/src/app/components/latest-transactions/latest-transactions.component.ts Normal file
View File

@ -0,0 +1,31 @@
import { Component, OnInit } from '@angular/core';
import { ElectrsApiService } from '../../services/electrs-api.service';
import { Observable, timer } from 'rxjs';
import { Recent } from '../../interfaces/electrs.interface';
import { flatMap, tap } from 'rxjs/operators';
@Component({
selector: 'app-latest-transactions',
templateUrl: './latest-transactions.component.html',
styleUrls: ['./latest-transactions.component.scss']
})
export class LatestTransactionsComponent implements OnInit {
transactions$: Observable<Recent[]>;
isLoading = true;
constructor(
private electrsApiService: ElectrsApiService,
) { }
ngOnInit() {
this.transactions$ = timer(0, 10000)
.pipe(
flatMap(() => {
return this.electrsApiService.getRecentTransaction$()
.pipe(
tap(() => this.isLoading = false)
);
})
);
}
}

31
frontend/src/app/components/master-page/master-page.component.html Normal file
View File

@ -0,0 +1,31 @@
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" routerLink="/"><img src="./assets/mempool-space-logo.png" width="180" class="logo"> <span class="badge badge-warning" style="margin-left: 10px;" *ngIf="isOffline">Offline</span></a>
<button class="navbar-toggler" type="button" (click)="collapse()" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarCollapse" [ngClass]="{'show': navCollapsed}">
<ul class="navbar-nav mr-auto">
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link" routerLink="/" (click)="collapse()">Explorer</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/graphs" (click)="collapse()">Graphs</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/tv" (click)="collapse()">TV view &nbsp;<img src="./assets/expand.png" width="15"/></a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/about" (click)="collapse()">About</a>
</li>
</ul>
<app-search-form location="top"></app-search-form>
</div>
</nav>
</header>
<br />
<router-outlet></router-outlet>

0
frontend/src/app/master-page/master-page.component.scss → frontend/src/app/components/master-page/master-page.component.scss
View File

27
frontend/src/app/components/master-page/master-page.component.ts Normal file
View File

@ -0,0 +1,27 @@
import { Component, OnInit } from '@angular/core';
import { StateService } from '../../services/state.service';
@Component({
selector: 'app-master-page',
templateUrl: './master-page.component.html',
styleUrls: ['./master-page.component.scss']
})
export class MasterPageComponent implements OnInit {
navCollapsed = false;
isOffline = false;
constructor(
private stateService: StateService,
) { }
ngOnInit() {
this.stateService.isOffline$
.subscribe((state) => {
this.isOffline = state;
});
}
collapse(): void {
this.navCollapsed = !this.navCollapsed;
}
}

20
frontend/src/app/components/mempool-blocks/mempool-blocks.component.html Normal file
View File

@ -0,0 +1,20 @@
<div class="mempool-blocks-container">
<div *ngFor="let projectedBlock of mempoolBlocks; let i = index; trackBy: trackByFn">
<div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="getStyleForMempoolBlockAtIndex(i)">
<div class="block-body" *ngIf="mempoolBlocks?.length">
<div class="fees">
~{{ projectedBlock.medianFee | ceil }} sat/vB
<br/>
<span class="yellow-color">{{ projectedBlock.feeRange[0] | ceil }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | ceil }} sat/vB</span>
</div>
<div class="block-size">{{ projectedBlock.blockSize | bytes: 2 }}</div>
<div class="transaction-count">{{ projectedBlock.nTx }} transactions</div>
<div class="time-difference" *ngIf="i !== 3">In ~{{ 10 * i + 10 }} minutes</div>
<ng-template [ngIf]="i === 3 && mempoolBlocks?.length >= 4 && (projectedBlock.blockVSize / 1000000 | ceil) > 1">
<div class="time-difference">+{{ projectedBlock.blockVSize / 1000000 | ceil }} blocks</div>
</ng-template>
</div>
<span class="animated-border"></span>
</div>
</div>
</div>

11
frontend/src/app/blockchain-projected-blocks/blockchain-projected-blocks.component.scss → frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
View File

@ -1,7 +1,6 @@
.bitcoin-block {
width: 125px;
height: 125px;
cursor: pointer;
}
.block-size {
@ -9,7 +8,7 @@
font-weight: bold;
}
.projected-blocks-container {
.mempool-blocks-container {
position: absolute;
top: 0px;
right: 0px;
@ -20,7 +19,7 @@
opacity: 1;
}
.projected-block {
.mempool-block {
position: absolute;
top: 0;
}
@ -54,7 +53,7 @@
}
@media (max-width: 767.98px) {
.projected-blocks-container {
.mempool-blocks-container {
position: absolute;
left: -165px;
top: -40px;
@ -87,11 +86,11 @@
transform-origin: top;
}
.projected-block.bitcoin-block::after {
.mempool-block.bitcoin-block::after {
background-color: #403834;
}
.projected-block.bitcoin-block::before {
.mempool-block.bitcoin-block::before {
background-color: #2d2825;
}
}

83
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts Normal file
View File

@ -0,0 +1,83 @@
import { Component, OnInit, OnDestroy, Input, EventEmitter, Output } from '@angular/core';
import { Subscription } from 'rxjs';
import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
import { StateService } from 'src/app/services/state.service';
@Component({
selector: 'app-mempool-blocks',
templateUrl: './mempool-blocks.component.html',
styleUrls: ['./mempool-blocks.component.scss']
})
export class MempoolBlocksComponent implements OnInit, OnDestroy {
mempoolBlocks: MempoolBlock[];
mempoolBlocksSubscription: Subscription;
blockWidth = 125;
blockMarginLeft = 20;
@Input() txFeePerVSize: number;
@Output() rightPosition: EventEmitter<number> = new EventEmitter<number>(true);
@Output() blockDepth: EventEmitter<number> = new EventEmitter<number>(true);
constructor(
private stateService: StateService,
) { }
ngOnInit() {
this.mempoolBlocksSubscription = this.stateService.mempoolBlocks$
.subscribe((blocks) => {
this.mempoolBlocks = blocks;
this.calculateTransactionPosition();
});
}
ngOnDestroy() {
this.mempoolBlocksSubscription.unsubscribe();
}
trackByFn(index: number) {
return index;
}
getStyleForMempoolBlockAtIndex(index: number) {
const greenBackgroundHeight = 100 - this.mempoolBlocks[index].blockVSize / 1000000 * 100;
return {
'right': 40 + index * 155 + 'px',
'background': `repeating-linear-gradient(to right, #554b45, #554b45 ${greenBackgroundHeight}%,
#bd7c13 ${Math.max(greenBackgroundHeight, 0)}%, #c5345a 100%)`,
};
}
calculateTransactionPosition() {
if (!this.txFeePerVSize) {
return;
}
for (const block of this.mempoolBlocks) {
for (let i = 0; i < block.feeRange.length - 1; i++) {
if (this.txFeePerVSize < block.feeRange[i + 1] && this.txFeePerVSize >= block.feeRange[i]) {
const txInBlockIndex = this.mempoolBlocks.indexOf(block);
const feeRangeIndex = block.feeRange.findIndex((val, index) => this.txFeePerVSize < block.feeRange[index + 1]);
const feeRangeChunkSize = 1 / (block.feeRange.length - 1);
const txFee = this.txFeePerVSize - block.feeRange[i];
const max = block.feeRange[i + 1] - block.feeRange[i];
const blockLocation = txFee / max;
const chunkPositionOffset = blockLocation * feeRangeChunkSize;
const feePosition = feeRangeChunkSize * feeRangeIndex + chunkPositionOffset;
const blockedFilledPercentage = (block.blockVSize > 1000000 ? 1000000 : block.blockVSize) / 1000000;
const arrowRightPosition = txInBlockIndex * (this.blockMarginLeft + this.blockWidth)
+ ((1 - feePosition) * blockedFilledPercentage * this.blockWidth);
this.rightPosition.next(arrowRightPosition);
this.blockDepth.next(txInBlockIndex);
break;
}
}
}
}
}

1
frontend/src/app/components/qrcode/qrcode.component.html Normal file
View File

@ -0,0 +1 @@
<canvas #canvas></canvas>

0
frontend/src/app/explorer/transaction/transaction.component.scss → frontend/src/app/components/qrcode/qrcode.component.scss
View File

25
frontend/src/app/components/qrcode/qrcode.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { QrcodeComponent } from './qrcode.component';
describe('QrcodeComponent', () => {
let component: QrcodeComponent;
let fixture: ComponentFixture<QrcodeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ QrcodeComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(QrcodeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

43
frontend/src/app/components/qrcode/qrcode.component.ts Normal file
View File

@ -0,0 +1,43 @@
import { Component, Input, AfterViewInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import * as QRCode from 'qrcode/build/qrcode.js';
@Component({
selector: 'app-qrcode',
templateUrl: './qrcode.component.html',
styleUrls: ['./qrcode.component.scss']
})
export class QrcodeComponent implements AfterViewInit, OnDestroy {
@Input() data: string;
@ViewChild('canvas') canvas: ElementRef;
qrcodeObject: any;
constructor() { }
ngAfterViewInit() {
const opts = {
errorCorrectionLevel: 'H',
margin: 0,
color: {
dark: '#000',
light: '#fff'
},
width: 125,
height: 125,
};
if (!this.data) {
return;
}
QRCode.toCanvas(this.canvas.nativeElement, this.data.toUpperCase(), opts, (error: any) => {
if (error) {
console.error(error);
}
});
}
ngOnDestroy() {
}
}

29
frontend/src/app/components/search-form/search-form.component.html Normal file
View File

@ -0,0 +1,29 @@
<ng-template [ngIf]="location === 'start'" [ngIfElse]="top">
<form [formGroup]="searchForm" (submit)="searchForm.valid && search()" novalidate>
<div class="form-row">
<div class="col-12 col-md-10 mb-2 mb-md-0">
<input formControlName="searchText" type="text" class="form-control form-control-lg" [placeholder]="searchBoxPlaceholderText">
</div>
<div class="col-12 col-md-2">
<button type="submit" class="btn btn-block btn-lg btn-primary">{{ searchButtonText }}</button>
</div>
</div>
</form>
</ng-template>
<ng-template #top>
<form [formGroup]="searchForm" (submit)="searchForm.valid && search()" novalidate>
<div class="form-row">
<div style="width: 350px;" class="mr-2">
<input formControlName="searchText" type="text" class="form-control" [placeholder]="searchBoxPlaceholderText">
</div>
<div>
<button type="submit" class="btn btn-block btn-primary">{{ searchButtonText }}</button>
</div>
</div>
</form>
</ng-template>

0
frontend/src/app/fee-distribution-graph/fee-distribution-graph.component.scss → frontend/src/app/components/search-form/search-form.component.scss
View File

25
frontend/src/app/components/search-form/search-form.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SearchFormComponent } from './search-form.component';
describe('SearchFormComponent', () => {
let component: SearchFormComponent;
let fixture: ComponentFixture<SearchFormComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SearchFormComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SearchFormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

44
frontend/src/app/components/search-form/search-form.component.ts Normal file
View File

@ -0,0 +1,44 @@
import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
@Component({
selector: 'app-search-form',
templateUrl: './search-form.component.html',
styleUrls: ['./search-form.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SearchFormComponent implements OnInit {
@Input() location: string;
searchForm: FormGroup;
searchButtonText = 'Search';
searchBoxPlaceholderText = 'Transaction, address, block hash...';
regexAddress = /^([a-km-zA-HJ-NP-Z1-9]{26,35}|[a-km-zA-HJ-NP-Z1-9]{80}|[a-z]{2,5}1[ac-hj-np-z02-9]{8,87})$/;
constructor(
private formBuilder: FormBuilder,
private router: Router,
) { }
ngOnInit() {
this.searchForm = this.formBuilder.group({
searchText: ['', Validators.required],
});
}
search() {
const searchText = this.searchForm.value.searchText.trim();
if (searchText) {
if (this.regexAddress.test(searchText)) {
this.router.navigate(['/address/', searchText]);
} else {
this.router.navigate(['/tx/', searchText]);
}
this.searchForm.setValue({
searchText: '',
});
}
}
}

20
frontend/src/app/components/start/start.component.html Normal file
View File

@ -0,0 +1,20 @@
<app-blockchain></app-blockchain>
<div class="box">
<div class="container">
<ul class="nav nav-tabs mb-2">
<li class="nav-item">
<a class="nav-link" [class.active]="view === 'blocks'" href="#" (click)="view = 'blocks'">Blocks</a>
</li>
<li class="nav-item">
<a class="nav-link" [class.active]="view === 'transactions'" href="#" (click)="view = 'transactions'">Transactions</a>
</li>
</ul>
<app-latest-blocks *ngIf="view === 'blocks'; else latestTransactions"></app-latest-blocks>
<ng-template #latestTransactions>
<app-latest-transactions></app-latest-transactions>
</ng-template>
</div>
</div>

3
frontend/src/app/components/start/start.component.scss Normal file
View File

@ -0,0 +1,3 @@
.search-container {
padding-top: 50px;
}

Some files were not shown because too many files have changed in this diff Show More