highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-04-08 03:48:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into nymkappa/bugfix/initial-indexing

Browse Source
This commit is contained in:
wiz 2022-05-07 13:51:24 +09:00 committed by GitHub
commit 5281c48697
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 1981 additions and 1678 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

485
README.md
View File

@ -1,358 +1,104 @@
# The Mempool Open Source Project™ [![mempool](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/ry4br7/master&style=flat-square)](https://dashboard.cypress.io/projects/ry4br7/runs)
Mempool is the fully featured visualizer, explorer, and API service running on [mempool.space](https://mempool.space/), an open source project developed and operated for the benefit of the Bitcoin community, with a focus on the emerging transaction fee market to help our transition into a multi-layer ecosystem.
Mempool is the fully-featured mempool visualizer, explorer, and API service running at [mempool.space](https://mempool.space/).
![mempool](https://mempool.space/resources/screenshots/v2.3.0-dashboard.png)
![mempool](https://mempool.space/resources/screenshots/v2.4.0-dashboard.png)
## Installation Methods
# Installation Methods
Mempool can be self-hosted on a wide variety of your own hardware, ranging from a simple one-click installation on a Raspberry Pi distro, all the way to an advanced high availability cluster of powerful servers for a production instance. We support the following installation methods, ranked in order from simple to advanced:
Mempool can be self-hosted on a wide variety of your own hardware, ranging from a simple one-click installation on a Raspberry Pi full-node distro all the way to a robust production instance on a powerful FreeBSD server.
1) One-click installation on: [Umbrel](https://github.com/getumbrel/umbrel), [RaspiBlitz](https://github.com/rootzoll/raspiblitz), [RoninDojo](https://code.samourai.io/ronindojo/RoninDojo), or [MyNode](https://github.com/mynodebtc/mynode).
2) [Docker installation on Linux using docker-compose](https://github.com/mempool/mempool/tree/master/docker)
3) [Manual installation on Linux or FreeBSD](https://github.com/mempool/mempool#manual-installation)
4) [Production installation on a powerful FreeBSD server](https://github.com/mempool/mempool/tree/master/production)
5) [High Availability cluster using powerful FreeBSD servers](https://github.com/mempool/mempool/tree/master/production#high-availability)
We support the following installation methods, ranked in order from simple to advanced:
# Docker Installation
1) [One-click installation on full-node distros](#one-click-installation)
2) [Docker installation on Linux using docker-compose](./docker)
3) [Manual installation on Linux or FreeBSD](#manual-installation)
4) [Production installation on a powerful FreeBSD server](./production)
The `docker` directory contains the Dockerfiles used to build and release the official images and a `docker-compose.yml` file that is intended for end users to run a Mempool instance with minimal effort.
This doc offers install notes on the one-click method and manual install method. Follow the links above for install notes on Docker and production installations.
## bitcoind only configuration
<a id="one-click-installation"></a>
## One-Click Installation
To run an instance with the default settings, use the following command:
Mempool can be conveniently installed on the following full-node distros:
- [Umbrel](https://github.com/getumbrel/umbrel)
- [RaspiBlitz](https://github.com/rootzoll/raspiblitz)
- [RoninDojo](https://code.samourai.io/ronindojo/RoninDojo)
- [myNode](https://github.com/mynodebtc/mynode)
- [Start9](https://github.com/Start9Labs/embassy-os)
<a id="manual-installation"></a>
## Manual Installation
The following instructions are for a manual installation on Linux or FreeBSD. You may need to change file and directory paths to match your OS.
You will need [Bitcoin Core](https://github.com/bitcoin/bitcoin), [Electrum Server](https://github.com/romanz/electrs), [Node.js](https://github.com/nodejs/node), [MariaDB](https://github.com/mariadb/server), and [Nginx](https://github.com/nginx/nginx). Below, we walk through how to configure each of these.
### 1. Get Latest Mempool Release
Clone the Mempool repo, and checkout the latest release tag:
```bash
$ docker-compose up
$ git clone https://github.com/mempool/mempool
$ cd mempool
$ latestrelease=$(curl -s https://api.github.com/repos/mempool/mempool/releases/latest|grep tag_name|head -1|cut -d '"' -f4)
$ git checkout $latestrelease
```
The default configuration will allow you to run Mempool using `bitcoind` as the backend, so address lookups will be disabled. It assumes you have added RPC credentials for the `mempool` user with a `mempool` password in your `bitcoin.conf` file:
```
rpcuser=mempool
rpcpassword=mempool
```
If you want to use your current credentials, update them in the `docker-compose.yml` file:
```
api:
environment:
MEMPOOL_BACKEND: "none"
RPC_HOST: "172.27.0.1"
RPC_PORT: "8332"
RPC_USER: "mempool"
RPC_PASS: "mempool"
```
Note: the IP in the example above refers to Docker's default gateway IP address so the container can hit the `bitcoind` instance running on the host machine. If your setup is different, update it accordingly.
You can check if the instance is running by visiting http://localhost - the graphs will be populated as new transactions are detected.
## bitcoind+electrum configuration
In order to run with a `electrum` compatible server as the backend, in addition to the settings required for running with `bitcoind` above, you will need to make the following changes to the `docker-compose.yml` file:
- Under the `api` service, change the value of the `MEMPOOL_BACKEND` key from `none` to `electrum`:
```
api:
environment:
MEMPOOL_BACKEND: "none"
```
- Under the `api` service, set the `ELECTRUM_HOST` and `ELECTRUM_PORT` keys to your Docker host IP address and set `ELECTRUM_TLS_ENABLED` to `false`:
```
api:
environment:
ELECTRUM_HOST: "172.27.0.1"
ELECTRUM_PORT: "50002"
ELECTRUM_TLS_ENABLED: "false"
```
You can update any of the backend settings in the `mempool-config.json` file using the following environment variables to override them under the same `api` `environment` section.
JSON:
```
"MEMPOOL": {
"NETWORK": "mainnet",
"BACKEND": "electrum",
"HTTP_PORT": 8999,
"SPAWN_CLUSTER_PROCS": 0,
"API_URL_PREFIX": "/api/v1/",
"POLL_RATE_MS": 2000,
"CACHE_DIR": "./cache",
"CLEAR_PROTECTION_MINUTES": 20,
"RECOMMENDED_FEE_PERCENTILE": 50,
"BLOCK_WEIGHT_UNITS": 4000000,
"INITIAL_BLOCKS_AMOUNT": 8,
"MEMPOOL_BLOCKS_AMOUNT": 8,
"PRICE_FEED_UPDATE_INTERVAL": 600,
"USE_SECOND_NODE_FOR_MINFEE": false,
"EXTERNAL_ASSETS": ["https://raw.githubusercontent.com/mempool/mining-pools/master/pools.json"],
"STDOUT_LOG_MIN_PRIORITY": "info"
},
```
docker-compose overrides:
```
MEMPOOL_NETWORK: ""
MEMPOOL_BACKEND: ""
MEMPOOL_HTTP_PORT: ""
MEMPOOL_SPAWN_CLUSTER_PROCS: ""
MEMPOOL_API_URL_PREFIX: ""
MEMPOOL_POLL_RATE_MS: ""
MEMPOOL_CACHE_DIR: ""
MEMPOOL_CLEAR_PROTECTION_MINUTES: ""
MEMPOOL_RECOMMENDED_FEE_PERCENTILE: ""
MEMPOOL_BLOCK_WEIGHT_UNITS: ""
MEMPOOL_INITIAL_BLOCKS_AMOUNT: ""
MEMPOOL_MEMPOOL_BLOCKS_AMOUNT: ""
MEMPOOL_PRICE_FEED_UPDATE_INTERVAL: ""
MEMPOOL_USE_SECOND_NODE_FOR_MINFEE: ""
MEMPOOL_EXTERNAL_ASSETS: ""
MEMPOOL_STDOUT_LOG_MIN_PRIORITY: ""
```
JSON:
```
"CORE_RPC": {
"HOST": "127.0.0.1",
"PORT": 8332,
"USERNAME": "mempool",
"PASSWORD": "mempool"
},
```
docker-compose overrides:
```
CORE_RPC_HOST: ""
CORE_RPC_PORT: ""
CORE_RPC_USERNAME: ""
CORE_RPC_PASSWORD: ""
```
JSON:
```
"ELECTRUM": {
"HOST": "127.0.0.1",
"PORT": 50002,
"TLS_ENABLED": true
},
```
docker-compose overrides:
```
ELECTRUM_HOST: ""
ELECTRUM_PORT: ""
ELECTRUM_TLS: ""
```
JSON:
```
"ESPLORA": {
"REST_API_URL": "http://127.0.0.1:3000"
},
```
docker-compose overrides:
```
ESPLORA_REST_API_URL: ""
```
JSON:
```
"SECOND_CORE_RPC": {
"HOST": "127.0.0.1",
"PORT": 8332,
"USERNAME": "mempool",
"PASSWORD": "mempool"
},
```
docker-compose overrides:
```
SECOND_CORE_RPC_HOST: ""
SECOND_CORE_RPC_PORT: ""
SECOND_CORE_RPC_USERNAME: ""
SECOND_CORE_RPC_PASSWORD: ""
```
JSON:
```
"DATABASE": {
"ENABLED": true,
"HOST": "127.0.0.1",
"PORT": 3306,
"DATABASE": "mempool",
"USERNAME": "mempool",
"PASSWORD": "mempool"
},
```
docker-compose overrides:
```
DATABASE_ENABLED: ""
DATABASE_HOST: ""
DATABASE_PORT: ""
DATABASE_DATABASE: ""
DATABASE_USERAME: ""
DATABASE_PASSWORD: ""
```
JSON:
```
"SYSLOG": {
"ENABLED": true,
"HOST": "127.0.0.1",
"PORT": 514,
"MIN_PRIORITY": "info",
"FACILITY": "local7"
},
```
docker-compose overrides:
```
SYSLOG_ENABLED: ""
SYSLOG_HOST: ""
SYSLOG_PORT: ""
SYSLOG_MIN_PRIORITY: ""
SYSLOG_FACILITY: ""
```
JSON:
```
"STATISTICS": {
"ENABLED": true,
"TX_PER_SECOND_SAMPLE_PERIOD": 150
},
```
docker-compose overrides:
```
STATISTICS_ENABLED: ""
STATISTICS_TX_PER_SECOND_SAMPLE_PERIOD: ""
```
JSON:
```
"BISQ": {
"ENABLED": false,
"DATA_PATH": "/bisq/statsnode-data/btc_mainnet/db"
}
```
docker-compose overrides:
```
BISQ_ENABLED: ""
BISQ_DATA_PATH: ""
```
JSON:
```
"SOCKS5PROXY": {
"ENABLED": false,
"HOST": "127.0.0.1",
"PORT": "9050",
"USERNAME": "",
"PASSWORD": ""
}
```
docker-compose overrides:
```
SOCKS5PROXY_ENABLED: ""
SOCKS5PROXY_HOST: ""
SOCKS5PROXY_PORT: ""
SOCKS5PROXY_USERNAME: ""
SOCKS5PROXY_PASSWORD: ""
```
JSON:
```
"PRICE_DATA_SERVER": {
"TOR_URL": "http://wizpriceje6q5tdrxkyiazsgu7irquiqjy2dptezqhrtu7l2qelqktid.onion/getAllMarketPrices",
"CLEARNET_URL": "https://price.bisq.wiz.biz/getAllMarketPrices"
}
```
docker-compose overrides:
```
PRICE_DATA_SERVER_TOR_URL: ""
PRICE_DATA_SERVER_CLEARNET_URL: ""
```
# Manual Installation
The following instructions are for a manual installation on Linux or FreeBSD. The file and directory paths may need to be changed to match your OS.
## Dependencies
* [Bitcoin](https://github.com/bitcoin/bitcoin)
* [Electrum](https://github.com/romanz/electrs)
* [NodeJS](https://github.com/nodejs/node)
* [MariaDB](https://github.com/mariadb/server)
* [Nginx](https://github.com/nginx/nginx)
## Mempool
Clone the mempool repo, and checkout the latest release tag:
```bash
git clone https://github.com/mempool/mempool
cd mempool
latestrelease=$(curl -s https://api.github.com/repos/mempool/mempool/releases/latest|grep tag_name|head -1|cut -d '"' -f4)
git checkout $latestrelease
```
## Bitcoin Core (bitcoind)
### 2. Configure Bitcoin Core
Enable RPC and txindex in `bitcoin.conf`:
```bash
rpcuser=mempool
rpcpassword=mempool
txindex=1
```
## MySQL
Install MariaDB from OS package manager:
```bash
# Linux
apt-get install mariadb-server mariadb-client
# macOS
brew install mariadb
mysql.server start
```
Create database and grant privileges:
```bash
MariaDB [(none)]> drop database mempool;
Query OK, 0 rows affected (0.00 sec)
MariaDB [(none)]> create database mempool;
Query OK, 1 row affected (0.00 sec)
MariaDB [(none)]> grant all privileges on mempool.* to 'mempool'@'%' identified by 'mempool';
Query OK, 0 rows affected (0.00 sec)
```
## Mempool Backend
Install mempool dependencies from npm and build the backend:
```bash
# backend
cd backend
npm install --prod
npm run build
rpcuser=mempool
rpcpassword=mempool
txindex=1
```
In the `backend` folder, make a copy of the sample config and modify it to fit your settings.
### 3. Get & Configure MySQL
Install MariaDB from your OS package manager:
```bash
cp mempool-config.sample.json mempool-config.json
# Debian, Ubuntu, etc.
$ apt-get install mariadb-server mariadb-client
# macOS
$ brew install mariadb
$ mysql.server start
```
Edit `mempool-config.json` to add your Bitcoin Core node RPC credentials:
Create a database and grant privileges:
```bash
MariaDB [(none)]> drop database mempool;
Query OK, 0 rows affected (0.00 sec)
MariaDB [(none)]> create database mempool;
Query OK, 1 row affected (0.00 sec)
MariaDB [(none)]> grant all privileges on mempool.* to 'mempool'@'%' identified by 'mempool';
Query OK, 0 rows affected (0.00 sec)
```
### 4. Build Mempool Backend
Install Mempool dependencies with npm and build the backend:
```bash
$ cd backend
$ npm install --prod
$ npm run build
```
In the `backend` folder, make a copy of the sample config:
```bash
$ cp mempool-config.sample.json mempool-config.json
```
Edit `mempool-config.json` with your Bitcoin Core node RPC credentials:
```bash
{
"MEMPOOL": {
@ -385,66 +131,63 @@ Edit `mempool-config.json` to add your Bitcoin Core node RPC credentials:
Start the backend:
```bash
npm run start
$ npm run start
```
When it's running you should see output like this:
When it's running, you should see output like this:
```bash
Mempool updated in 0.189 seconds
Updating mempool
Mempool updated in 0.096 seconds
Updating mempool
Mempool updated in 0.099 seconds
Updating mempool
Calculated fee for transaction 1 / 10
Calculated fee for transaction 2 / 10
Calculated fee for transaction 3 / 10
Calculated fee for transaction 4 / 10
Calculated fee for transaction 5 / 10
Calculated fee for transaction 6 / 10
Calculated fee for transaction 7 / 10
Calculated fee for transaction 8 / 10
Calculated fee for transaction 9 / 10
Calculated fee for transaction 10 / 10
Mempool updated in 0.243 seconds
Updating mempool
Mempool updated in 0.189 seconds
Updating mempool
Mempool updated in 0.096 seconds
Updating mempool
Mempool updated in 0.099 seconds
Updating mempool
Calculated fee for transaction 1 / 10
Calculated fee for transaction 2 / 10
Calculated fee for transaction 3 / 10
Calculated fee for transaction 4 / 10
Calculated fee for transaction 5 / 10
Calculated fee for transaction 6 / 10
Calculated fee for transaction 7 / 10
Calculated fee for transaction 8 / 10
Calculated fee for transaction 9 / 10
Calculated fee for transaction 10 / 10
Mempool updated in 0.243 seconds
Updating mempool
```
## Mempool Frontend
### 5. Build Mempool Frontend
Install mempool dependencies from npm and build the frontend static HTML/CSS/JS:
Install the Mempool dependencies with npm and build the frontend:
```bash
# frontend
cd frontend
npm install --prod
npm run build
$ cd frontend
$ npm install --prod
$ npm run build
```
Install the output into nginx webroot folder:
Install the output into the nginx webroot folder:
```bash
sudo rsync -av --delete dist/ /var/www/
$ sudo rsync -av --delete dist/ /var/www/
```
## nginx + certbot
### 6. `nginx` + `certbot`
Install the supplied nginx.conf and nginx-mempool.conf in /etc/nginx
Install the supplied `nginx.conf` and `nginx-mempool.conf` in `/etc/nginx`:
```bash
# install nginx and certbot
apt-get install -y nginx python3-certbot-nginx
# install nginx and certbot
$ apt-get install -y nginx python3-certbot-nginx
# install the mempool configuration for nginx
cp nginx.conf nginx-mempool.conf /etc/nginx/
# replace example.com with your domain name
certbot --nginx -d example.com
# install the mempool configuration for nginx
$ cp nginx.conf nginx-mempool.conf /etc/nginx/
# replace example.com with your domain name
$ certbot --nginx -d example.com
```
If everything went okay you should see the beautiful mempool :grin:
If everything went well, you should see the beautiful mempool :grin:
If you get stuck on "loading blocks", this means the websocket can't connect.
Check your nginx proxy setup, firewalls, etc. and open an issue if you need help.
If you get stuck on "loading blocks", this means the websocket can't connect. Check your nginx proxy setup, firewalls, etc. and open an issue if you need help.

869
backend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
backend/package.json
View File

@ -29,20 +29,20 @@
},
"dependencies": {
"@mempool/electrum-client": "^1.1.7",
"@types/ws": "8.2.2",
"axios": "0.24.0",
"axios": "~0.27.2",
"bitcoinjs-lib": "6.0.1",
"crypto-js": "^4.0.0",
"express": "^4.17.1",
"express": "^4.18.0",
"mysql2": "2.3.3",
"node-worker-threads-pool": "^1.4.3",
"socks-proxy-agent": "^6.1.1",
"typescript": "4.4.4",
"ws": "8.3.0"
"node-worker-threads-pool": "^1.5.1",
"socks-proxy-agent": "^6.2.0",
"typescript": "~4.6.3",
"ws": "~8.3.0"
},
"devDependencies": {
"@types/compression": "^1.0.1",
"@types/express": "^4.17.2",
"@types/compression": "^1.7.2",
"@types/ws": "~8.5.3",
"@types/express": "^4.17.13",
"tslint": "^6.1.0"
}
}

2
backend/src/api/database-migration.ts
View File

@ -56,7 +56,7 @@ class DatabaseMigration {
}
if (DatabaseMigration.currentVersion > databaseSchemaVersion) {
logger.notice('MIGRATIONS: Upgrading datababse schema');
logger.notice('MIGRATIONS: Upgrading database schema');
try {
await this.$migrateTableSchemaFromVersion(databaseSchemaVersion);
logger.notice(`MIGRATIONS: OK. Database schema have been migrated from version ${databaseSchemaVersion} to ${DatabaseMigration.currentVersion} (latest version)`);

334
docker/README.md Normal file
View File

@ -0,0 +1,334 @@
# Docker Installation
This directory contains the Dockerfiles used to build and release the official images and a `docker-compose.yml` for end users to run a Mempool instance with minimal effort.
You can choose to configure Mempool to run with a basic backend powered by just `bitcoind`, or with `bitcoind` along with an Electrum-compatible server for full functionality.
## `bitcoind`-only Configuration
_Note: address lookups require an Electrum server and will not work with this configuration._
Make sure `bitcoind` is running and synced.
The default Docker configuration assumes you have added RPC credentials for a `mempool` user with a `mempool` password in your `bitcoin.conf` file, like so:
```
rpcuser=mempool
rpcpassword=mempool
```
If you want to use different credentials, specify them in the `docker-compose.yml` file:
```
api:
environment:
MEMPOOL_BACKEND: "none"
CORE_RPC_HOST: "172.27.0.1"
CORE_RPC_PORT: "8332"
CORE_RPC_USERNAME: "customuser"
CORE_RPC_PASSWORD: "custompassword"
```
The IP address in the example above refers to Docker's default gateway IP address so that the container can hit the `bitcoind` instance running on the host machine. If your setup is different, update it accordingly.
Now, run:
```bash
$ docker-compose up
```
Your Mempool instance should be running at http://localhost. The graphs will be populated as new transactions are detected.
## `bitcoind` + Electrum Server Configuration
First, configure `bitcoind` as specified above, and make sure your Electrum server is running and synced.
Then, make sure the following variables are set in `docker-compose.yml`, as shown below, so Mempool can connect to your Electrum server:
```
api:
environment:
MEMPOOL_BACKEND: "electrum"
ELECTRUM_HOST: "172.27.0.1"
ELECTRUM_PORT: "50002"
ELECTRUM_TLS_ENABLED: "false"
```
Of course, if your Docker host IP address is different, update accordingly.
With `bitcoind` and Electrum Server set up, run Mempool with:
```bash
$ docker-compose up
```
## Further Configuration
Optionally, you can override any other backend settings from `mempool-config.json`.
Below we list all settings from `mempool-config.json` and the corresponding overrides you can make in the `api` > `environment` section of `docker-compose.yml`.
<br/>
`mempool-config.json`:
```
"MEMPOOL": {
"NETWORK": "mainnet",
"BACKEND": "electrum",
"HTTP_PORT": 8999,
"SPAWN_CLUSTER_PROCS": 0,
"API_URL_PREFIX": "/api/v1/",
"POLL_RATE_MS": 2000,
"CACHE_DIR": "./cache",
"CLEAR_PROTECTION_MINUTES": 20,
"RECOMMENDED_FEE_PERCENTILE": 50,
"BLOCK_WEIGHT_UNITS": 4000000,
"INITIAL_BLOCKS_AMOUNT": 8,
"MEMPOOL_BLOCKS_AMOUNT": 8,
"PRICE_FEED_UPDATE_INTERVAL": 600,
"USE_SECOND_NODE_FOR_MINFEE": false,
"EXTERNAL_ASSETS": ["https://raw.githubusercontent.com/mempool/mining-pools/master/pools.json"],
"STDOUT_LOG_MIN_PRIORITY": "info"
},
```
Corresponding `docker-compose.yml` overrides:
```
api:
environment:
MEMPOOL_NETWORK: ""
MEMPOOL_BACKEND: ""
MEMPOOL_HTTP_PORT: ""
MEMPOOL_SPAWN_CLUSTER_PROCS: ""
MEMPOOL_API_URL_PREFIX: ""
MEMPOOL_POLL_RATE_MS: ""
MEMPOOL_CACHE_DIR: ""
MEMPOOL_CLEAR_PROTECTION_MINUTES: ""
MEMPOOL_RECOMMENDED_FEE_PERCENTILE: ""
MEMPOOL_BLOCK_WEIGHT_UNITS: ""
MEMPOOL_INITIAL_BLOCKS_AMOUNT: ""
MEMPOOL_MEMPOOL_BLOCKS_AMOUNT: ""
MEMPOOL_PRICE_FEED_UPDATE_INTERVAL: ""
MEMPOOL_USE_SECOND_NODE_FOR_MINFEE: ""
MEMPOOL_EXTERNAL_ASSETS: ""
MEMPOOL_STDOUT_LOG_MIN_PRIORITY: ""
...
```
<br/>
`mempool-config.json`:
```
"CORE_RPC": {
"HOST": "127.0.0.1",
"PORT": 8332,
"USERNAME": "mempool",
"PASSWORD": "mempool"
},
```
Corresponding `docker-compose.yml` overrides:
```
api:
environment:
CORE_RPC_HOST: ""
CORE_RPC_PORT: ""
CORE_RPC_USERNAME: ""
CORE_RPC_PASSWORD: ""
...
```
<br/>
`mempool-config.json`:
```
"ELECTRUM": {
"HOST": "127.0.0.1",
"PORT": 50002,
"TLS_ENABLED": true
},
```
Corresponding `docker-compose.yml` overrides:
```
api:
environment:
ELECTRUM_HOST: ""
ELECTRUM_PORT: ""
ELECTRUM_TLS: ""
...
```
<br/>
`mempool-config.json`:
```
"ESPLORA": {
"REST_API_URL": "http://127.0.0.1:3000"
},
```
Corresponding `docker-compose.yml` overrides:
```
api:
environment:
ESPLORA_REST_API_URL: ""
...
```
<br/>
`mempool-config.json`:
```
"SECOND_CORE_RPC": {
"HOST": "127.0.0.1",
"PORT": 8332,
"USERNAME": "mempool",
"PASSWORD": "mempool"
},
```
Corresponding `docker-compose.yml` overrides:
```
api:
environment:
SECOND_CORE_RPC_HOST: ""
SECOND_CORE_RPC_PORT: ""
SECOND_CORE_RPC_USERNAME: ""
SECOND_CORE_RPC_PASSWORD: ""
...
```
<br/>
`mempool-config.json`:
```
"DATABASE": {
"ENABLED": true,
"HOST": "127.0.0.1",
"PORT": 3306,
"DATABASE": "mempool",
"USERNAME": "mempool",
"PASSWORD": "mempool"
},
```
Corresponding `docker-compose.yml` overrides:
```
api:
environment:
DATABASE_ENABLED: ""
DATABASE_HOST: ""
DATABASE_PORT: ""
DATABASE_DATABASE: ""
DATABASE_USERAME: ""
DATABASE_PASSWORD: ""
...
```
<br/>
`mempool-config.json`:
```
"SYSLOG": {
"ENABLED": true,
"HOST": "127.0.0.1",
"PORT": 514,
"MIN_PRIORITY": "info",
"FACILITY": "local7"
},
```
Corresponding `docker-compose.yml` overrides:
```
api:
environment:
SYSLOG_ENABLED: ""
SYSLOG_HOST: ""
SYSLOG_PORT: ""
SYSLOG_MIN_PRIORITY: ""
SYSLOG_FACILITY: ""
...
```
<br/>
`mempool-config.json`:
```
"STATISTICS": {
"ENABLED": true,
"TX_PER_SECOND_SAMPLE_PERIOD": 150
},
```
Corresponding `docker-compose.yml` overrides:
```
api:
environment:
STATISTICS_ENABLED: ""
STATISTICS_TX_PER_SECOND_SAMPLE_PERIOD: ""
...
```
<br/>
`mempool-config.json`:
```
"BISQ": {
"ENABLED": false,
"DATA_PATH": "/bisq/statsnode-data/btc_mainnet/db"
}
```
Corresponding `docker-compose.yml` overrides:
```
api:
environment:
BISQ_ENABLED: ""
BISQ_DATA_PATH: ""
...
```
<br/>
`mempool-config.json`:
```
"SOCKS5PROXY": {
"ENABLED": false,
"HOST": "127.0.0.1",
"PORT": "9050",
"USERNAME": "",
"PASSWORD": ""
}
```
Corresponding `docker-compose.yml` overrides:
```
api:
environment:
SOCKS5PROXY_ENABLED: ""
SOCKS5PROXY_HOST: ""
SOCKS5PROXY_PORT: ""
SOCKS5PROXY_USERNAME: ""
SOCKS5PROXY_PASSWORD: ""
...
```
<br/>
`mempool-config.json`:
```
"PRICE_DATA_SERVER": {
"TOR_URL": "http://wizpriceje6q5tdrxkyiazsgu7irquiqjy2dptezqhrtu7l2qelqktid.onion/getAllMarketPrices",
"CLEARNET_URL": "https://price.bisq.wiz.biz/getAllMarketPrices"
}
```
Corresponding `docker-compose.yml` overrides:
```
api:
environment:
PRICE_DATA_SERVER_TOR_URL: ""
PRICE_DATA_SERVER_CLEARNET_URL: ""
...
```

1690
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

42
frontend/package.json
View File

@ -61,18 +61,18 @@
"cypress:run:ci:staging": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-staging 4200 cypress:run:record"
},
"dependencies": {
"@angular-devkit/build-angular": "^13.2.4",
"@angular/animations": "~13.2.3",
"@angular/cli": "~13.2.4",
"@angular/common": "~13.2.3",
"@angular/compiler": "~13.2.3",
"@angular/core": "~13.2.3",
"@angular/forms": "~13.2.3",
"@angular/localize": "^13.2.3",
"@angular/platform-browser": "~13.2.3",
"@angular/platform-browser-dynamic": "~13.2.3",
"@angular/platform-server": "~13.2.3",
"@angular/router": "~13.2.3",
"@angular-devkit/build-angular": "^13.3.4",
"@angular/animations": "~13.3.5",
"@angular/cli": "~13.3.4",
"@angular/common": "~13.3.5",
"@angular/compiler": "~13.3.5",
"@angular/core": "~13.3.5",
"@angular/forms": "~13.3.5",
"@angular/localize": "^13.3.5",
"@angular/platform-browser": "~13.3.5",
"@angular/platform-browser-dynamic": "~13.3.5",
"@angular/platform-server": "~13.3.5",
"@angular/router": "~13.3.5",
"@fortawesome/angular-fontawesome": "0.10.1",
"@fortawesome/fontawesome-common-types": "0.3.0",
"@fortawesome/fontawesome-svg-core": "1.3.0",
@ -81,12 +81,12 @@
"@mempool/mempool.js": "2.3.0",
"@ng-bootstrap/ng-bootstrap": "^11.0.0",
"@nguniversal/express-engine": "12.1.3",
"@types/qrcode": "1.4.1",
"bootstrap": "4.5.0",
"@types/qrcode": "~1.4.2",
"bootstrap": "~4.5.0",
"browserify": "^17.0.0",
"clipboard": "^2.0.4",
"clipboard": "^2.0.10",
"domino": "^2.1.6",
"echarts": "5.3.0",
"echarts": "~5.3.2",
"express": "^4.17.1",
"lightweight-charts": "^3.3.0",
"ngx-bootrap-multiselect": "^2.0.0",
@ -100,9 +100,9 @@
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular/compiler-cli": "~13.2.3",
"@angular/language-service": "~13.2.3",
"@nguniversal/builders": "~13.0.2",
"@angular/compiler-cli": "~13.3.5",
"@angular/language-service": "~13.3.5",
"@nguniversal/builders": "~13.1.0",
"@types/express": "^4.17.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
@ -111,10 +111,10 @@
"http-proxy-middleware": "^1.0.5",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"karma": "~6.3.19",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine": "~5.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",

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

@ -14,7 +14,6 @@ import { AssetsNavComponent } from './components/assets/assets-nav/assets-nav.co
import { StatusViewComponent } from './components/status-view/status-view.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
import { DocsComponent } from './components/docs/docs.component';
import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
@ -138,25 +137,13 @@ let routes: Routes = [
path: 'about',
component: AboutComponent,
},
{
path: 'docs/api/:type',
component: DocsComponent
},
{
path: 'docs/faq',
component: DocsComponent
},
{
path: 'docs/api',
redirectTo: 'docs/api/rest'
},
{
path: 'docs',
redirectTo: 'docs/faq'
loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
},
{
path: 'api',
redirectTo: 'docs/api/rest'
loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
},
{
path: 'terms-of-service',
@ -281,25 +268,13 @@ let routes: Routes = [
children: [],
component: AddressComponent
},
{
path: 'docs/api/:type',
component: DocsComponent
},
{
path: 'docs/faq',
component: DocsComponent
},
{
path: 'docs/api',
redirectTo: 'docs/api/rest'
},
{
path: 'docs',
redirectTo: 'docs/faq'
loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
},
{
path: 'api',
redirectTo: 'docs/api/rest'
loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
},
],
},
@ -421,25 +396,13 @@ let routes: Routes = [
children: [],
component: AddressComponent
},
{
path: 'docs/api/:type',
component: DocsComponent
},
{
path: 'docs/faq',
component: DocsComponent
},
{
path: 'docs/api',
redirectTo: 'docs/api/rest'
},
{
path: 'docs',
redirectTo: 'docs/faq'
loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
},
{
path: 'api',
redirectTo: 'docs/api/rest'
loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
},
],
},
@ -567,21 +530,13 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
}
]
},
{
path: 'docs/api/:type',
component: DocsComponent
},
{
path: 'docs/api',
redirectTo: 'docs/api/rest'
},
{
path: 'docs',
redirectTo: 'docs/api/rest'
loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
},
{
path: 'api',
redirectTo: 'docs/api/rest'
loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
},
{
path: 'about',
@ -679,21 +634,13 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
}
]
},
{
path: 'docs/api/:type',
component: DocsComponent
},
{
path: 'docs/api',
redirectTo: 'docs/api/rest'
},
{
path: 'docs',
redirectTo: 'docs/api/rest'
loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
},
{
path: 'api',
redirectTo: 'docs/api/rest'
loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule)
},
{
path: 'about',
@ -743,7 +690,6 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled'
})],
exports: [RouterModule]
})
export class AppRoutingModule { }

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

@ -12,7 +12,6 @@ import { StartComponent } from './components/start/start.component';
import { ElectrsApiService } from './services/electrs-api.service';
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 { AddressComponent } from './components/address/address.component';
@ -20,15 +19,12 @@ import { SearchFormComponent } from './components/search-form/search-form.compon
import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
import { WebsocketService } from './services/websocket.service';
import { AddressLabelsComponent } from './components/address-labels/address-labels.component';
import { MempoolBlocksComponent } from './components/mempool-blocks/mempool-blocks.component';
import { MasterPageComponent } from './components/master-page/master-page.component';
import { BisqMasterPageComponent } from './components/bisq-master-page/bisq-master-page.component';
import { LiquidMasterPageComponent } from './components/liquid-master-page/liquid-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 { BlockchainBlocksComponent } from './components/blockchain-blocks/blockchain-blocks.component';
import { BlockchainComponent } from './components/blockchain/blockchain.component';
import { FooterComponent } from './components/footer/footer.component';
import { AudioService } from './services/audio.service';
import { MempoolBlockComponent } from './components/mempool-block/mempool-block.component';
@ -53,11 +49,6 @@ import { DifficultyComponent } from './components/difficulty/difficulty.componen
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl } from '@fortawesome/free-solid-svg-icons';
import { ApiDocsComponent } from './components/docs/api-docs.component';
import { DocsComponent } from './components/docs/docs.component';
import { ApiDocsNavComponent } from './components/docs/api-docs-nav.component';
import { NoSanitizePipe } from './shared/pipes/no-sanitize.pipe';
import { CodeTemplateComponent } from './components/docs/code-template.component';
import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
@ -93,20 +84,16 @@ import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/
BisqMasterPageComponent,
LiquidMasterPageComponent,
TelevisionComponent,
BlockchainComponent,
StartComponent,
BlockchainBlocksComponent,
StatisticsComponent,
TransactionComponent,
BlockComponent,
TransactionsListComponent,
AddressComponent,
AmountComponent,
LatestBlocksComponent,
SearchFormComponent,
TimeSpanComponent,
AddressLabelsComponent,
MempoolBlocksComponent,
FooterComponent,
MempoolBlockComponent,
FeeDistributionGraphComponent,
@ -122,16 +109,11 @@ import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/
FeesBoxComponent,
DashboardComponent,
DifficultyComponent,
ApiDocsComponent,
NoSanitizePipe,
CodeTemplateComponent,
TermsOfServiceComponent,
PrivacyPolicyComponent,
TrademarkPolicyComponent,
SponsorComponent,
PushTransactionComponent,
DocsComponent,
ApiDocsNavComponent,
AssetsNavComponent,
AssetsFeaturedComponent,
AssetGroupComponent,

14
frontend/src/app/bisq/bisq.routing.module.ts
View File

@ -7,7 +7,6 @@ import { BisqBlockComponent } from './bisq-block/bisq-block.component';
import { BisqBlocksComponent } from './bisq-blocks/bisq-blocks.component';
import { BisqAddressComponent } from './bisq-address/bisq-address.component';
import { BisqStatsComponent } from './bisq-stats/bisq-stats.component';
import { DocsComponent } from '../components/docs/docs.component';
import { BisqDashboardComponent } from './bisq-dashboard/bisq-dashboard.component';
import { BisqMarketComponent } from './bisq-market/bisq-market.component';
import { BisqMainDashboardComponent } from './bisq-main-dashboard/bisq-main-dashboard.component';
@ -60,21 +59,13 @@ const routes: Routes = [
path: 'about',
component: AboutComponent,
},
{
path: 'docs/api/:type',
component: DocsComponent
},
{
path: 'docs/api',
redirectTo: 'docs/api/rest'
},
{
path: 'docs',
redirectTo: 'docs/api/rest'
loadChildren: () => import('../docs/docs.module').then(m => m.DocsModule)
},
{
path: 'api',
redirectTo: 'docs/api/rest'
loadChildren: () => import('../docs/docs.module').then(m => m.DocsModule)
},
{
path: 'terms-of-service',
@ -88,6 +79,5 @@ const routes: Routes = [
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class BisqRoutingModule { }

0
frontend/src/app/components/docs/api-docs-data.ts → frontend/src/app/docs/api-docs/api-docs-data.ts
View File

0
frontend/src/app/components/docs/api-docs-nav.component.html → frontend/src/app/docs/api-docs/api-docs-nav.component.html
View File

0
frontend/src/app/components/docs/api-docs-nav.component.scss → frontend/src/app/docs/api-docs/api-docs-nav.component.scss
View File

0
frontend/src/app/components/docs/api-docs-nav.component.ts → frontend/src/app/docs/api-docs/api-docs-nav.component.ts
View File

0
frontend/src/app/components/docs/api-docs.component.html → frontend/src/app/docs/api-docs/api-docs.component.html
View File

0
frontend/src/app/components/docs/api-docs.component.scss → frontend/src/app/docs/api-docs/api-docs.component.scss
View File

4
frontend/src/app/components/docs/api-docs.component.ts → frontend/src/app/docs/api-docs/api-docs.component.ts
View File

@ -1,7 +1,7 @@
import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { Env, StateService } from 'src/app/services/state.service';
import { Env, StateService } from '../../services/state.service';
import { Observable, merge, of } from 'rxjs';
import { SeoService } from 'src/app/services/seo.service';
import { SeoService } from '../../services/seo.service';
import { tap } from 'rxjs/operators';
import { ActivatedRoute } from "@angular/router";
import { faqData, restApiDocsData, wsApiDocsData } from './api-docs-data';

0
frontend/src/app/components/docs/code-template.component.html → frontend/src/app/docs/code-template/code-template.component.html
View File

0
frontend/src/app/components/docs/code-template.component.scss → frontend/src/app/docs/code-template/code-template.component.scss
View File

2
frontend/src/app/components/docs/code-template.component.ts → frontend/src/app/docs/code-template/code-template.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Input, OnInit } from '@angular/core';
import { Env, StateService } from 'src/app/services/state.service';
import { Env, StateService } from '../../services/state.service';
@Component({
selector: 'app-code-template',

22
frontend/src/app/docs/docs.module.ts Normal file
View File

@ -0,0 +1,22 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { ApiDocsComponent } from './/api-docs/api-docs.component';
import { DocsComponent } from './docs/docs.component';
import { ApiDocsNavComponent } from './api-docs/api-docs-nav.component';
import { CodeTemplateComponent } from './code-template/code-template.component';
import { DocsRoutingModule } from './docs.routing.module';
@NgModule({
declarations: [
ApiDocsComponent,
CodeTemplateComponent,
ApiDocsNavComponent,
DocsComponent,
],
imports: [
CommonModule,
SharedModule,
DocsRoutingModule,
]
})
export class DocsModule { }

58
frontend/src/app/docs/docs.routing.module.ts Normal file
View File

@ -0,0 +1,58 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DocsComponent } from './docs/docs.component';
const browserWindow = window || {};
// @ts-ignore
const browserWindowEnv = browserWindow.__env || {};
let routes: Routes = [];
if (browserWindowEnv.BASE_MODULE && (browserWindowEnv.BASE_MODULE === 'bisq' || browserWindowEnv.BASE_MODULE === 'liquid')) {
routes = [
{
path: '',
redirectTo: 'api/rest'
},
{
path: 'api/:type',
component: DocsComponent
},
{
path: 'api',
redirectTo: 'api/rest'
},
{
path: '**',
redirectTo: 'api/rest'
}
];
} else {
routes = [
{
path: '',
redirectTo: 'faq'
},
{
path: 'api/:type',
component: DocsComponent
},
{
path: 'faq',
component: DocsComponent
},
{
path: 'api',
redirectTo: 'api/rest'
},
{
path: '**',
redirectTo: 'api/faq'
}
];
}
@NgModule({
imports: [RouterModule.forChild(routes)],
})
export class DocsRoutingModule { }

0
frontend/src/app/components/docs/docs.component.html → frontend/src/app/docs/docs/docs.component.html
View File

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

8
frontend/src/app/components/docs/docs.component.ts → frontend/src/app/docs/docs/docs.component.ts
View File

@ -1,7 +1,7 @@
import { Component, OnInit, HostBinding } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Env, StateService } from 'src/app/services/state.service';
import { WebsocketService } from 'src/app/services/websocket.service';
import { Env, StateService } from '../../services/state.service';
import { WebsocketService } from '../../services/websocket.service';
@Component({
selector: 'app-docs',
@ -26,9 +26,9 @@ export class DocsComponent implements OnInit {
ngOnInit(): void {
this.websocket.want(['blocks']);
const url = this.route.snapshot.url;
if( url[1].path === "faq" ) {
if (url[0].path === "faq" ) {
this.activeTab = 0;
} else if( url[2].path === "rest" ) {
} else if( url[1].path === "rest" ) {
this.activeTab = 1;
} else {
this.activeTab = 2;

19
frontend/src/app/shared/shared.module.ts
View File

@ -12,6 +12,7 @@ import { RelativeUrlPipe } from './pipes/relative-url/relative-url.pipe';
import { ScriptpubkeyTypePipe } from './pipes/scriptpubkey-type-pipe/scriptpubkey-type.pipe';
import { BytesPipe } from './pipes/bytes-pipe/bytes.pipe';
import { WuBytesPipe } from './pipes/bytes-pipe/wubytes.pipe';
import { BlockchainComponent } from '../components/blockchain/blockchain.component';
import { TimeSinceComponent } from '../components/time-since/time-since.component';
import { TimeUntilComponent } from '../components/time-until/time-until.component';
import { ClipboardComponent } from '../components/clipboard/clipboard.component';
@ -23,6 +24,11 @@ import { TxFeeRatingComponent } from '../components/tx-fee-rating/tx-fee-rating.
import { ReactiveFormsModule } from '@angular/forms';
import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component';
import { ColoredPriceDirective } from './directives/colored-price.directive';
import { NoSanitizePipe } from './pipes/no-sanitize.pipe';
import { MempoolBlocksComponent } from '../components/mempool-blocks/mempool-blocks.component';
import { BlockchainBlocksComponent } from '../components/blockchain-blocks/blockchain-blocks.component';
import { AmountComponent } from '../components/amount/amount.component';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [
@ -36,6 +42,7 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
LanguageSelectorComponent,
ScriptpubkeyTypePipe,
RelativeUrlPipe,
NoSanitizePipe,
Hex2asciiPipe,
AsmStylerPipe,
AbsolutePipe,
@ -47,9 +54,14 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
Decimal2HexPipe,
FeeRoundingPipe,
ColoredPriceDirective,
BlockchainComponent,
MempoolBlocksComponent,
BlockchainBlocksComponent,
AmountComponent,
],
imports: [
CommonModule,
RouterModule,
ReactiveFormsModule,
NgbNavModule,
NgbTooltipModule,
@ -61,8 +73,10 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
providers: [
VbytesPipe,
RelativeUrlPipe,
NoSanitizePipe,
],
exports: [
RouterModule,
NgbAccordionModule,
NgbNavModule,
CommonModule,
@ -92,6 +106,11 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
Decimal2HexPipe,
FeeRoundingPipe,
ColoredPriceDirective,
NoSanitizePipe,
BlockchainComponent,
MempoolBlocksComponent,
BlockchainBlocksComponent,
AmountComponent,
]
})
export class SharedModule {}

BIN
frontend/src/resources/screenshots/v2.4.0-dashboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB