diff --git a/backend/mempool-config.sample.json b/backend/mempool-config.sample.json index 5c03a7d5e..85be1e664 100644 --- a/backend/mempool-config.sample.json +++ b/backend/mempool-config.sample.json @@ -22,5 +22,7 @@ "BISQ_MARKETS_DATA_PATH": "/bisq/seednode-data/btc_mainnet/db", "SSL": false, "SSL_CERT_FILE_PATH": "/etc/letsencrypt/live/mysite/fullchain.pem", - "SSL_KEY_FILE_PATH": "/etc/letsencrypt/live/mysite/privkey.pem" + "SSL_KEY_FILE_PATH": "/etc/letsencrypt/live/mysite/privkey.pem", + "BTCPAY_URL": "", + "BTCPAY_AUTH": "" } diff --git a/backend/src/api/donations.ts b/backend/src/api/donations.ts new file mode 100644 index 000000000..ced8ad31b --- /dev/null +++ b/backend/src/api/donations.ts @@ -0,0 +1,125 @@ +const config = require('../../mempool-config.json'); +import * as request from 'request'; +import { DB } from '../database'; + +class Donations { + private notifyDonationStatusCallback: ((invoiceId: string) => void) | undefined; + private options = { + baseUrl: config.BTCPAY_URL, + headers: { + 'Content-Type': 'application/json', + 'Authorization': config.BTCPAY_AUTH, + }, + }; + + constructor() { } + + setNotfyDonationStatusCallback(fn: any) { + this.notifyDonationStatusCallback = fn; + } + + createRequest(amount: number, orderId: string): Promise { + const postData = { + 'price': amount, + 'orderId': orderId, + 'currency': 'BTC', + 'itemDesc': 'Sponsor mempool.space', + 'notificationUrl': 'https://mempool.space/api/v1/donations-webhook', + 'redirectURL': 'https://mempool.space/about' + }; + return new Promise((resolve, reject) => { + request.post({ + uri: '/invoices', + json: postData, + ...this.options, + }, (err, res, body) => { + if (err) { return reject(err); } + const formattedBody = { + id: body.data.id, + amount: parseFloat(body.data.btcPrice), + address: body.data.bitcoinAddress, + }; + resolve(formattedBody); + }); + }); + } + + async $handleWebhookRequest(data: any) { + if (!data || !data.id) { + return; + } + const response = await this.getStatus(data.id); + if (response.status === 'complete') { + if (this.notifyDonationStatusCallback) { + this.notifyDonationStatusCallback(data.id); + } + + let imageUrl = ''; + if (response.orderId !== '') { + try { + imageUrl = await this.$getTwitterImageUrl(response.orderId); + } catch (e) { + console.log('Error fetching twitter image from Hive', e.message); + } + } + + this.$addDonationToDatabase(response, imageUrl); + } + } + + private getStatus(id: string): Promise { + return new Promise((resolve, reject) => { + request.get({ + uri: '/invoices/' + id, + json: true, + ...this.options, + }, (err, res, body) => { + if (err) { return reject(err); } + resolve(body.data); + }); + }); + } + + async $getDonationsFromDatabase() { + try { + const connection = await DB.pool.getConnection(); + const query = `SELECT handle, imageUrl FROM donations WHERE handle != ''`; + const [rows] = await connection.query(query); + connection.release(); + return rows; + } catch (e) { + console.log('$getDonationsFromDatabase() error', e); + } + } + + private async $addDonationToDatabase(response: any, imageUrl: string): Promise { + try { + const connection = await DB.pool.getConnection(); + const query = `INSERT INTO donations(added, amount, handle, order_id, imageUrl) VALUES (NOW(), ?, ?, ?, ?)`; + const params: (string | number)[] = [ + response.btcPaid, + response.orderId, + response.id, + imageUrl, + ]; + const [result]: any = await connection.query(query, params); + connection.release(); + } catch (e) { + console.log('$addDonationToDatabase() error', e); + } + } + + private async $getTwitterImageUrl(handle: string): Promise { + return new Promise((resolve, reject) => { + request.get({ + uri: `https://api.hive.one/v1/influencers/screen_name/${handle}/?format=json`, + json: true, + }, (err, res, body) => { + if (err) { return reject(err); } + resolve(body.data.imageUrl); + }); + }); + } +} + +export default new Donations(); diff --git a/backend/src/api/websocket-handler.ts b/backend/src/api/websocket-handler.ts index 073c51756..9957356d3 100644 --- a/backend/src/api/websocket-handler.ts +++ b/backend/src/api/websocket-handler.ts @@ -99,6 +99,10 @@ class WebsocketHandler { response['pong'] = true; } + if (parsedMessage['track-donation'] && parsedMessage['track-donation'].length === 22) { + client['track-donation'] = parsedMessage['track-donation']; + } + if (Object.keys(response).length) { client.send(JSON.stringify(response)); } @@ -109,6 +113,21 @@ class WebsocketHandler { }); } + handleNewDonation(id: string) { + if (!this.wss) { + throw new Error('WebSocket.Server is not set'); + } + + this.wss.clients.forEach((client: WebSocket) => { + if (client.readyState !== WebSocket.OPEN) { + return; + } + if (client['track-donation'] === id) { + client.send(JSON.stringify({ donationConfirmed: true })); + } + }); + } + handleNewStatistic(stats: OptimizedStatistic) { if (!this.wss) { throw new Error('WebSocket.Server is not set'); diff --git a/backend/src/index.ts b/backend/src/index.ts index 3673a31be..8baac48f0 100644 --- a/backend/src/index.ts +++ b/backend/src/index.ts @@ -18,6 +18,7 @@ import websocketHandler from './api/websocket-handler'; import fiatConversion from './api/fiat-conversion'; import bisq from './api/bisq/bisq'; import bisqMarkets from './api/bisq/markets'; +import donations from './api/donations'; class Server { private wss: WebSocket.Server | undefined; @@ -62,7 +63,9 @@ class Server { res.setHeader('Access-Control-Allow-Origin', '*'); next(); }) - .use(compression()); + .use(compression()) + .use(express.urlencoded({ extended: true })) + .use(express.json()); if (config.SSL === true) { const credentials = { @@ -122,6 +125,7 @@ class Server { statistics.setNewStatisticsEntryCallback(websocketHandler.handleNewStatistic.bind(websocketHandler)); blocks.setNewBlockCallback(websocketHandler.handleNewBlock.bind(websocketHandler)); memPool.setMempoolChangedCallback(websocketHandler.handleMempoolChange.bind(websocketHandler)); + donations.setNotfyDonationStatusCallback(websocketHandler.handleNewDonation.bind(websocketHandler)); } setUpHttpApiRoutes() { @@ -163,6 +167,14 @@ class Server { .get(config.API_ENDPOINT + 'bisq/markets/volumes', routes.getBisqMarketVolumes.bind(routes)) ; } + + if (config.BTCPAY_URL) { + this.app + .get(config.API_ENDPOINT + 'donations', routes.getDonations.bind(routes)) + .post(config.API_ENDPOINT + 'donations', routes.createDonationRequest.bind(routes)) + .post(config.API_ENDPOINT + 'donations-webhook', routes.donationWebhook.bind(routes)) + ; + } } } diff --git a/backend/src/routes.ts b/backend/src/routes.ts index ecf827dee..0442fcb7a 100644 --- a/backend/src/routes.ts +++ b/backend/src/routes.ts @@ -9,6 +9,7 @@ import bisq from './api/bisq/bisq'; import bisqMarket from './api/bisq/markets-api'; import { RequiredSpec } from './interfaces'; import { MarketsApiError } from './api/bisq/interfaces'; +import donations from './api/donations'; class Routes { private cache = {}; @@ -98,6 +99,55 @@ class Routes { res.json(backendInfo.getBackendInfo()); } + public async createDonationRequest(req: Request, res: Response) { + const constraints: RequiredSpec = { + 'amount': { + required: true, + types: ['@float'] + }, + 'orderId': { + required: true, + types: ['@string'] + } + }; + + const p = this.parseRequestParameters(req.body, constraints); + if (p.error) { + res.status(400).send(p.error); + return; + } + + if (p.amount < 0.01) { + res.status(400).send('Amount needs to be at least 0.01'); + return; + } + + try { + const result = await donations.createRequest(p.amount, p.orderId); + res.json(result); + } catch (e) { + res.status(500).send(e.message); + } + } + + public async getDonations(req: Request, res: Response) { + try { + const result = await donations.$getDonationsFromDatabase(); + res.json(result); + } catch (e) { + res.status(500).send(e.message); + } + } + + public async donationWebhook(req: Request, res: Response) { + try { + donations.$handleWebhookRequest(req.body); + res.end(); + } catch (e) { + res.status(500).send(e); + } + } + public getBisqStats(req: Request, res: Response) { const result = bisq.getStats(); res.json(result); @@ -173,7 +223,7 @@ class Routes { }, }; - const p = this.parseRequestParameters(req, constraints); + const p = this.parseRequestParameters(req.query, constraints); if (p.error) { res.status(400).json(this.getBisqMarketErrorResponse(p.error)); return; @@ -195,7 +245,7 @@ class Routes { }, }; - const p = this.parseRequestParameters(req, constraints); + const p = this.parseRequestParameters(req.query, constraints); if (p.error) { res.status(400).json(this.getBisqMarketErrorResponse(p.error)); return; @@ -254,7 +304,7 @@ class Routes { } }; - const p = this.parseRequestParameters(req, constraints); + const p = this.parseRequestParameters(req.query, constraints); if (p.error) { res.status(400).json(this.getBisqMarketErrorResponse(p.error)); return; @@ -281,7 +331,7 @@ class Routes { }, }; - const p = this.parseRequestParameters(req, constraints); + const p = this.parseRequestParameters(req.query, constraints); if (p.error) { res.status(400).json(this.getBisqMarketErrorResponse(p.error)); return; @@ -323,7 +373,7 @@ class Routes { }, }; - const p = this.parseRequestParameters(req, constraints); + const p = this.parseRequestParameters(req.query, constraints); if (p.error) { res.status(400).json(this.getBisqMarketErrorResponse(p.error)); return; @@ -365,7 +415,7 @@ class Routes { }, }; - const p = this.parseRequestParameters(req, constraints); + const p = this.parseRequestParameters(req.query, constraints); if (p.error) { res.status(400).json(this.getBisqMarketErrorResponse(p.error)); return; @@ -387,7 +437,7 @@ class Routes { }, }; - const p = this.parseRequestParameters(req, constraints); + const p = this.parseRequestParameters(req.query, constraints); if (p.error) { res.status(400).json(this.getBisqMarketErrorResponse(p.error)); return; @@ -401,15 +451,15 @@ class Routes { } } - private parseRequestParameters(req: Request, params: RequiredSpec): { [name: string]: any; } { + private parseRequestParameters(requestParams: object, params: RequiredSpec): { [name: string]: any; } { const final = {}; for (const i in params) { if (params.hasOwnProperty(i)) { - if (params[i].required && !req.query[i]) { + if (params[i].required && requestParams[i] === undefined) { return { error: i + ' parameter missing'}; } - if (typeof req.query[i] === 'string') { - const str = (req.query[i] || '').toString().toLowerCase(); + if (typeof requestParams[i] === 'string') { + const str = (requestParams[i] || '').toString().toLowerCase(); if (params[i].types.indexOf('@number') > -1) { const number = parseInt((str).toString(), 10); final[i] = number; @@ -422,6 +472,8 @@ class Routes { } else { return { error: i + ' parameter invalid'}; } + } else if (typeof requestParams[i] === 'number') { + final[i] = requestParams[i]; } } } diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html index 549b4fe5a..df1a09dc3 100644 --- a/frontend/src/app/components/about/about.component.html +++ b/frontend/src/app/components/about/about.component.html @@ -12,7 +12,49 @@

- +

❤️ Sponsors

+ +
+

+ + + +
+
+
+
+ ₿ +
+ +
+
+
+ @ +
+ +
+
+ +
+
+
+ +
+
+ +
+
+

{{ donationObj.address }}

+

Waiting for transaction...

+ +
+ +
+

Donation confirmed!
Thank you!

+

If you specified a Twitter handle, the profile photo should now be visible on this page when you reload.

+
+ +

GitHub

diff --git a/frontend/src/app/components/about/about.component.scss b/frontend/src/app/components/about/about.component.scss index 5e208bcf8..16713b38d 100644 --- a/frontend/src/app/components/about/about.component.scss +++ b/frontend/src/app/components/about/about.component.scss @@ -14,3 +14,17 @@ tr { .nowrap { white-space: nowrap; } + +.qr-wrapper { + background-color: #FFF; + padding: 10px; + display: inline-block; +} + +.profile_photo { + width: 80px; + height: 80px; + background-size: 100%, 100%; + border-radius: 50%; + cursor: pointer; +} diff --git a/frontend/src/app/components/about/about.component.ts b/frontend/src/app/components/about/about.component.ts index 4c1494132..86765a336 100644 --- a/frontend/src/app/components/about/about.component.ts +++ b/frontend/src/app/components/about/about.component.ts @@ -3,22 +3,29 @@ import { WebsocketService } from '../../services/websocket.service'; import { SeoService } from 'src/app/services/seo.service'; import { StateService } from 'src/app/services/state.service'; import { Observable } from 'rxjs'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { ApiService } from 'src/app/services/api.service'; @Component({ selector: 'app-about', templateUrl: './about.component.html', styleUrls: ['./about.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, }) export class AboutComponent implements OnInit { active = 1; hostname = document.location.hostname; gitCommit$: Observable; + donationForm: FormGroup; + donationStatus = 1; + sponsors$: Observable; + donationObj: any; constructor( private websocketService: WebsocketService, private seoService: SeoService, private stateService: StateService, + private formBuilder: FormBuilder, + private apiService: ApiService, ) { } ngOnInit() { @@ -31,5 +38,32 @@ export class AboutComponent implements OnInit { if (document.location.port !== '') { this.hostname = this.hostname + ':' + document.location.port; } + + this.donationForm = this.formBuilder.group({ + amount: [0.001], + handle: [''], + }); + + this.sponsors$ = this.apiService.getDonation$(); + this.stateService.donationConfirmed$.subscribe(() => this.donationStatus = 4); + } + + submitDonation() { + if (this.donationForm.invalid) { + return; + } + this.apiService.requestDonation$( + this.donationForm.get('amount').value, + this.donationForm.get('handle').value + ) + .subscribe((response) => { + this.websocketService.trackDonation(response.id); + this.donationObj = response; + this.donationStatus = 3; + }); + } + + openTwitterProfile(handle: string) { + window.open('https://twitter.com/' + handle, '_blank'); } } diff --git a/frontend/src/app/interfaces/websocket.interface.ts b/frontend/src/app/interfaces/websocket.interface.ts index bc40e00e1..893dc1f99 100644 --- a/frontend/src/app/interfaces/websocket.interface.ts +++ b/frontend/src/app/interfaces/websocket.interface.ts @@ -14,10 +14,12 @@ export interface WebsocketResponse { tx?: Transaction; rbfTransaction?: Transaction; transactions?: TransactionStripped[]; + donationConfirmed?: boolean; 'track-tx'?: string; 'track-address'?: string; 'track-asset'?: string; 'watch-mempool'?: boolean; + 'track-donation'?: string; } export interface MempoolBlock { diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index b43f8f6e0..5f97481fb 100644 --- a/frontend/src/app/services/api.service.ts +++ b/frontend/src/app/services/api.service.ts @@ -61,4 +61,16 @@ export class ApiService { }); return this.httpClient.get(this.apiBaseUrl + '/transaction-times', { params }); } + + requestDonation$(amount: number, orderId: string): Observable { + const params = { + amount: amount, + orderId: orderId, + }; + return this.httpClient.post(this.apiBaseUrl + '/donations', params); + } + + getDonation$(): Observable { + return this.httpClient.get(this.apiBaseUrl + '/donations'); + } } diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index 7c28ca773..d3eb1ea65 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -34,6 +34,7 @@ export class StateService { vbytesPerSecond$ = new ReplaySubject(1); lastDifficultyAdjustment$ = new ReplaySubject(1); gitCommit$ = new ReplaySubject(1); + donationConfirmed$ = new Subject(); live2Chart$ = new Subject(); diff --git a/frontend/src/app/services/websocket.service.ts b/frontend/src/app/services/websocket.service.ts index a3d8b9145..d986bd467 100644 --- a/frontend/src/app/services/websocket.service.ts +++ b/frontend/src/app/services/websocket.service.ts @@ -155,6 +155,10 @@ export class WebsocketService { this.stateService.gitCommit$.next(response['git-commit']); } + if (response.donationConfirmed) { + this.stateService.donationConfirmed$.next(true); + } + if (this.goneOffline === true) { this.goneOffline = false; if (this.lastWant) { @@ -189,6 +193,10 @@ export class WebsocketService { this.isTrackingTx = true; } + trackDonation(id: string) { + this.websocketSubject.next({ 'track-donation': id }); + } + stopTrackingTransaction() { if (!this.isTrackingTx) { return; diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 9eb5e36d2..c88ed18f2 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -21,6 +21,11 @@ $pagination-hover-bg: #12131e; $pagination-hover-border-color: #1d1f31; $pagination-disabled-bg: #1d1f31; +.input-group-text { + background-color: #1c2031 !important; + border: 1px solid #20263e !important; +} + $link-color: #1bd8f4; $link-decoration: none !default; $link-hover-color: darken($link-color, 15%) !default; diff --git a/mariadb-structure.sql b/mariadb-structure.sql index 4d567ed91..770f8029a 100644 --- a/mariadb-structure.sql +++ b/mariadb-structure.sql @@ -84,3 +84,19 @@ ALTER TABLE `transactions` ALTER TABLE `statistics` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT; + + +CREATE TABLE `donations` ( + `id` int(11) NOT NULL, + `added` datetime NOT NULL, + `amount` float NOT NULL, + `handle` varchar(250) NOT NULL, + `order_id` varchar(25) NOT NULL, + `imageUrl` varchar(250) NOT NULL +) ENGINE=InnoDB DEFAULT CHARSET=utf8; + +ALTER TABLE `donations` + ADD PRIMARY KEY (`id`); + +ALTER TABLE `donations` + MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;