FAQ placeholder
+ +Documentation
-
-
+
-
- FAQ
+ FAQ
FAQ placeholder
@@ -15,7 +15,7 @@ -
- API - REST
+ API - REST
@@ -24,7 +24,7 @@ -
- API - WebSocket
+ API - WebSocket
diff --git a/frontend/src/app/components/docs/docs.component.ts b/frontend/src/app/components/docs/docs.component.ts index f75900dc2..042ed435b 100644 --- a/frontend/src/app/components/docs/docs.component.ts +++ b/frontend/src/app/components/docs/docs.component.ts @@ -24,13 +24,13 @@ export class DocsComponent implements OnInit { if( url[1].path === "faq" ) { this.activeTab = 0; } else if( url[2].path === "rest" ) { - this.activeTab = 1; + this.activeTab = 1; } else { this.activeTab = 2; } - + this.env = this.stateService.env; - this.showWebSocketTab = ( ! ( ( this.env.BASE_MODULE === "bisq" ) || ( this.stateService.network === "bisq" ) || ( this.stateService.network === "liquidtestnet" ) ) ); - this.showFaqTab = ( ( this.stateService.network === "" ) || ( this.stateService.network === "signet" ) || ( this.stateService.network === "testnet" ) ) ? true : false; + this.showWebSocketTab = ( ! ( ( this.stateService.network === "bisq" ) || ( this.stateService.network === "liquidtestnet" ) ) ); + this.showFaqTab = ( this.env.BASE_MODULE === 'mempool' ) ? true : false; } } From 289ed7b9b3372cc9041cd9a5af948af49151e28d Mon Sep 17 00:00:00 2001 From: hunicus <93150691+hunicus@users.noreply.github.com> Date: Thu, 24 Mar 2022 10:52:50 -0400 Subject: [PATCH 03/37] Make faq tab default when navigating to docs --- frontend/src/app/app-routing.module.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 713fec384..42ae7cdd5 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -137,7 +137,7 @@ let routes: Routes = [ }, { path: 'docs', - redirectTo: 'docs/api/rest' + redirectTo: 'docs/faq' }, { path: 'api', @@ -284,7 +284,7 @@ let routes: Routes = [ }, { path: 'docs', - redirectTo: 'docs/api/rest' + redirectTo: 'docs/faq' }, { path: 'api', @@ -424,7 +424,7 @@ let routes: Routes = [ }, { path: 'docs', - redirectTo: 'docs/api/rest' + redirectTo: 'docs/faq' }, { path: 'api', From ef2c84571447e01a2a0dfd41c020bcd6710b0101 Mon Sep 17 00:00:00 2001 From: hunicus <93150691+hunicus@users.noreply.github.com> Date: Sat, 26 Mar 2022 09:09:37 -0400 Subject: [PATCH 04/37] Generalize api-docs components to accommodate faq Also add chunk of faq content. --- .../src/app/components/docs/api-docs-data.ts | 174 ++++++++++++++++++ .../docs/api-docs-nav.component.html | 2 +- .../components/docs/api-docs-nav.component.ts | 10 +- .../components/docs/api-docs.component.html | 30 ++- .../components/docs/api-docs.component.scss | 8 + .../app/components/docs/api-docs.component.ts | 8 +- .../app/components/docs/docs.component.html | 6 +- 7 files changed, 225 insertions(+), 13 deletions(-) diff --git a/frontend/src/app/components/docs/api-docs-data.ts b/frontend/src/app/components/docs/api-docs-data.ts index 42fefcfe1..79df8bb25 100644 --- a/frontend/src/app/components/docs/api-docs-data.ts +++ b/frontend/src/app/components/docs/api-docs-data.ts @@ -4411,3 +4411,177 @@ export const restApiDocsData = [ }, ]; +export const faqData = [ + { + type: "category", + category: "basics", + fragment: "basics", + title: "Basics", + showConditions: bitcoinNetworks + }, + { + type: "endpoint", + category: "basics", + showConditions: bitcoinNetworks, + fragment: "what-is-a-mempool", + title: "What is a mempool?", + answer: ' A mempool (short for "memory pool") is a data structure that holds the queue of pending and unconfirmed transactions for a cryptocurrency network node. Every node on the network has its own mempool, which may contain different transactions.
' + }, + { + type: "endpoint", + category: "basics", + showConditions: bitcoinNetworks, + fragment: "what-is-a-mempool-explorer", + title: "What is a mempool explorer?", + answer: 'A mempool explorer is a tool that enables you to explore a node’s mempool, by visualizing the transactions contained within it, and allowing you to search and view those pending transactions, as well as general information about the node’s mempool.
The mempool.space website invented the concept of visualizing a Bitcoin node’s mempool as projected blocks, which are visible on the left side of our main dashboard, and the inspiration for our half-filled block logo.
' + }, + { + type: "endpoint", + category: "basics", + showConditions: bitcoinNetworks, + fragment: "what-is-a-blockchain", + title: "What is a blockchain?", + answer: "A blockchain is the distributed ledger that records the transactions for a cryptocurrency network. Miners amend the blockchain ledger by mining new blocks.
" + }, + { + type: "endpoint", + category: "basics", + showConditions: bitcoinNetworks, + fragment: "what-is-a-block-explorer", + title: "What is a block explorer?", + answer: "A block explorer is a tool that enables you to explore the blockchain of a cryptocurrency for real-time and historical information about a blockchain, including data related to blocks, transactions, addresses, and more.
" + }, + { + type: "endpoint", + category: "basics", + showConditions: bitcoinNetworks, + fragment: "what-is-mining", + title: "What is mining?", + answer: "Because reasons." + }, + { + type: "endpoint", + category: "basics", + showConditions: bitcoinNetworks, + fragment: "what-are-mining-pools", + title: "What are mining pools?", + answer: "Because reasons." + }, + { + type: "category", + category: "help", + fragment: "help-stuck-transaction", + title: "Help! My transaction is stuck", + showConditions: bitcoinNetworks + }, + { + type: "endpoint", + category: "help", + showConditions: bitcoinNetworks, + fragment: "why-is-transaction-stuck-in-the-mempool", + title: "Why is my transaction stuck in the mempool?", + answer: "Miners decide which transactions get included into the blocks they mine, and so they usually prioritize the transactions which pay them the highest transaction fees, measured in sats per virtual byte. This means to get confirmed sooner, you need to pay a higher fee.
" + }, + { + type: "endpoint", + category: "help", + showConditions: bitcoinNetworks, + fragment: "how-to-get-transaction-confirmed-quickly", + title: "How can I get my transaction confirmed quickly?", + answer: "If your wallet supports RBF, and your transaction was created with RBF enabled, you can bump the fee higher.
If your wallet does not support RBF, you can increase the effective fee rate of your transaction by spending its change output using a higher fee. This is called CPFP.
" + }, + { + type: "endpoint", + category: "help", + showConditions: bitcoinNetworks, + fragment: "how-prevent-stuck-transaction-in-future", + title: "How can I prevent a transaction from getting stuck in the future?", + answer: "You must use an adequate fee rate. Also consider using RBF if your wallet supports it so that you can bump the fee rate if needed.
" + }, + { + type: "category", + category: "using", + fragment: "using-this-website", + title: "Using this website", + showConditions: bitcoinNetworks + }, + { + type: "endpoint", + category: "how-to", + showConditions: bitcoinNetworks, + fragment: "looking-up-transactions", + title: "How can I look up a transaction?", + answer: "Because reasons." + }, + { + type: "endpoint", + category: "how-to", + showConditions: bitcoinNetworks, + fragment: "looking-up-addresses", + title: "How can I look up an address?", + answer: "Because reasons." + }, + { + type: "endpoint", + category: "how-to", + showConditions: bitcoinNetworks, + fragment: "looking-up-blocks", + title: "How can I look up a block?", + answer: "Because reasons." + }, + { + type: "endpoint", + category: "how-to", + showConditions: bitcoinNetworks, + fragment: "looking-up-fee-estimates", + title: "How can I look up fee estimates?", + answer: "Because reasons." + }, + { + type: "endpoint", + category: "how-to", + showConditions: bitcoinNetworks, + fragment: "looking-up-historical-trends", + title: "How can I explore historical trends?", + answer: "Because reasons." + }, + { + type: "category", + category: "advanced", + fragment: "advanced", + title: "Advanced", + showConditions: bitcoinNetworks + }, + { + type: "endpoint", + category: "advanced", + showConditions: bitcoinNetworks, + fragment: "who-runs-this-website", + title: "Who runs this website?", + answer: "Because reasons." + }, + { + type: "endpoint", + category: "advanced", + showConditions: bitcoinNetworks, + fragment: "host-my-own-instance-on-raspberry-pi", + title: "How can I host my own instance on a Raspberry Pi?", + answer: "Because reasons." + }, + { + type: "endpoint", + category: "advanced", + showConditions: bitcoinNetworks, + fragment: "host-my-own-instance-on-linux-server", + title: "How can I host my own instance on a Linux server?", + answer: "Because reasons." + }, + { + type: "endpoint", + category: "advanced", + showConditions: bitcoinNetworks, + fragment: "install-mempool-with-docker", + title: "Can I install Mempool using Docker?", + answer: "Because reasons." + } +]; diff --git a/frontend/src/app/components/docs/api-docs-nav.component.html b/frontend/src/app/components/docs/api-docs-nav.component.html index 83eaaf9e8..c8460ada4 100644 --- a/frontend/src/app/components/docs/api-docs-nav.component.html +++ b/frontend/src/app/components/docs/api-docs-nav.component.html @@ -1,4 +1,4 @@ -+diff --git a/frontend/src/app/components/docs/api-docs-nav.component.ts b/frontend/src/app/components/docs/api-docs-nav.component.ts index 90588860e..a7ec45569 100644 --- a/frontend/src/app/components/docs/api-docs-nav.component.ts +++ b/frontend/src/app/components/docs/api-docs-nav.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { restApiDocsData } from './api-docs-data'; +import { faqData } from './api-docs-data'; @Component({ selector: 'app-api-docs-nav', @@ -9,13 +10,18 @@ import { restApiDocsData } from './api-docs-data'; export class ApiDocsNavComponent implements OnInit { @Input() network: any; + @Input() whichTab: string; @Output() navLinkClickEvent: EventEmitter{{ item.title }}
{{ item.title }}= new EventEmitter(); - restDocs: any[]; + tabData: any[]; constructor() { } ngOnInit(): void { - this.restDocs = restApiDocsData; + if( this.whichTab === 'rest' ) { + this.tabData = restApiDocsData; + } else if( this.whichTab = 'faq' ) { + this.tabData = faqData; + } } navLinkClick( event ) { diff --git a/frontend/src/app/components/docs/api-docs.component.html b/frontend/src/app/components/docs/api-docs.component.html index 88a48f975..e213d6a62 100644 --- a/frontend/src/app/components/docs/api-docs.component.html +++ b/frontend/src/app/components/docs/api-docs.component.html @@ -1,10 +1,32 @@ - -+ + + ++ +-@@ -65,7 +87,7 @@+diff --git a/frontend/src/app/components/docs/api-docs.component.scss b/frontend/src/app/components/docs/api-docs.component.scss index cb3770622..35ec9e423 100644 --- a/frontend/src/app/components/docs/api-docs.component.scss +++ b/frontend/src/app/components/docs/api-docs.component.scss @@ -152,6 +152,14 @@ h3 { float: right; } +.endpoint-container .section-header table { + width: 100%; +} + +.endpoint-container .section-header table td:first-child { + padding-right: 24px; +} + #doc-nav-mobile { position: fixed; top: 20px; diff --git a/frontend/src/app/components/docs/api-docs.component.ts b/frontend/src/app/components/docs/api-docs.component.ts index 5e2300fed..32ef12741 100644 --- a/frontend/src/app/components/docs/api-docs.component.ts +++ b/frontend/src/app/components/docs/api-docs.component.ts @@ -4,7 +4,7 @@ import { Observable, merge, of } from 'rxjs'; import { SeoService } from 'src/app/services/seo.service'; import { tap } from 'rxjs/operators'; import { ActivatedRoute } from "@angular/router"; -import { restApiDocsData, wsApiDocsData } from './api-docs-data'; +import { faqData, restApiDocsData, wsApiDocsData } from './api-docs-data'; @Component({ selector: 'app-api-docs', @@ -18,8 +18,9 @@ export class ApiDocsComponent implements OnInit { env: Env; code: any; baseNetworkUrl = ''; - @Input() restTabActivated: Boolean; + @Input() whichTab: string; desktopDocsNavPosition = "relative"; + faq: any[]; restDocs: any[]; wsDocs: any; screenWidth: number; @@ -62,6 +63,7 @@ export class ApiDocsComponent implements OnInit { this.hostname = `${document.location.protocol}//${this.hostname}`; + this.faq = faqData; this.restDocs = restApiDocsData; this.wsDocs = wsApiDocsData; @@ -79,7 +81,7 @@ export class ApiDocsComponent implements OnInit { } openEndpointContainer( targetId ) { - if( ( window.innerWidth <= 992 ) && this.restTabActivated && targetId ) { + if( ( window.innerWidth <= 992 ) && ( ( this.whichTab === 'rest' ) || ( this.whichTab === 'faq' ) ) && targetId ) { const endpointContainerEl = document.querySelector( "#" + targetId ); const endpointContentEl = document.querySelector ( "#" + targetId + " .endpoint-content" ); const endPointContentElHeight = endpointContentEl.clientHeight; diff --git a/frontend/src/app/components/docs/docs.component.html b/frontend/src/app/components/docs/docs.component.html index 21d6ca93e..19a664e46 100644 --- a/frontend/src/app/components/docs/docs.component.html +++ b/frontend/src/app/components/docs/docs.component.html @@ -9,7 +9,7 @@ FAQ - @@ -18,7 +18,7 @@ API - RESTFAQ placeholder
+- @@ -27,7 +27,7 @@ API - WebSocket+ - From c6c335921ccc382e505a456ed4d26bab77d56f7d Mon Sep 17 00:00:00 2001 From: hunicus <93150691+hunicus@users.noreply.github.com> Date: Sat, 26 Mar 2022 23:31:49 -0400 Subject: [PATCH 05/37] Finish adding non-graphical faq content --- .../src/app/components/docs/api-docs-data.ts | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/components/docs/api-docs-data.ts b/frontend/src/app/components/docs/api-docs-data.ts index 79df8bb25..ed4703641 100644 --- a/frontend/src/app/components/docs/api-docs-data.ts +++ b/frontend/src/app/components/docs/api-docs-data.ts @@ -4425,7 +4425,7 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "what-is-a-mempool", title: "What is a mempool?", - answer: '+ A mempool (short for "memory pool") is a data structure that holds the queue of pending and unconfirmed transactions for a cryptocurrency network node. Every node on the network has its own mempool, which may contain different transactions.
' + answer: "A mempool (short for \"memory pool\") holds the queue of pending and unconfirmed transactions for a cryptocurrency network node. There is no one global mempool: every node on the network maintains its own mempool, so different nodes may hold different transactions in their mempools.
" }, { type: "endpoint", @@ -4433,7 +4433,7 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "what-is-a-mempool-explorer", title: "What is a mempool explorer?", - answer: 'A mempool explorer is a tool that enables you to explore a node’s mempool, by visualizing the transactions contained within it, and allowing you to search and view those pending transactions, as well as general information about the node’s mempool.
The mempool.space website invented the concept of visualizing a Bitcoin node’s mempool as projected blocks, which are visible on the left side of our main dashboard, and the inspiration for our half-filled block logo.
' + answer: "A mempool explorer is a tool that enables you to explore a node's mempool by visualizing its transactions, searching and viewing those transactions, and viewing aggregate and historical data about a node's mempool.
The mempool.space website invented the concept of visualizing a Bitcoin node's mempool as projected blocks. These blocks are the inspiration for our half-filled block logo.
Here's a snapshot of this visualization (which you can find on the main dashboard) as of block 729,131 in March 2022. Projected blocks are on the left, and confirmed blocks are on the right.
" }, { type: "endpoint", @@ -4441,7 +4441,7 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "what-is-a-blockchain", title: "What is a blockchain?", - answer: "A blockchain is the distributed ledger that records the transactions for a cryptocurrency network. Miners amend the blockchain ledger by mining new blocks.
" + answer: "A blockchain is a distributed ledger that records the transactions for a cryptocurrency network. Miners amend the blockchain ledger by mining new blocks.
" }, { type: "endpoint", @@ -4449,7 +4449,7 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "what-is-a-block-explorer", title: "What is a block explorer?", - answer: "A block explorer is a tool that enables you to explore the blockchain of a cryptocurrency for real-time and historical information about a blockchain, including data related to blocks, transactions, addresses, and more.
" + answer: "A block explorer is a tool that enables you to explore real-time and historical information about the blockchain of a cryptocurrency. This includes data related to blocks, transactions, addresses, and more.
" }, { type: "endpoint", @@ -4457,7 +4457,7 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "what-is-mining", title: "What is mining?", - answer: "Because reasons." + answer: "Mining is the process by which unconfirmed transactions are confirmed. Miners select unconfirmed transactions from their mempools and arrange them into a block such that they solve a particular math problem.The first miner on the network that finds a suitable block gets all the transaction fees from the transactions in that block. As a result, miners tend to prioritize transactions with higher transaction fees.
" }, { type: "endpoint", @@ -4465,7 +4465,7 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "what-are-mining-pools", title: "What are mining pools?", - answer: "Because reasons." + answer: "Mining pools are groups of miners that combine their computational power in order to increase the probability of finding new blocks." }, { type: "category", @@ -4480,15 +4480,15 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "why-is-transaction-stuck-in-the-mempool", title: "Why is my transaction stuck in the mempool?", - answer: "Miners decide which transactions get included into the blocks they mine, and so they usually prioritize the transactions which pay them the highest transaction fees, measured in sats per virtual byte. This means to get confirmed sooner, you need to pay a higher fee.
" + answer: "Miners decide which transactions are included in the blocks they mine, so they usually prioritize transactions which pay them the highest transaction fees (transaction fees are measured in sats per virtual byte, or sat/vB). If your transcation is stuck in the mempool, your transaction probably has a lower transaction fee relative to other transactions currently in the mempool.
" }, { type: "endpoint", category: "help", showConditions: bitcoinNetworks, fragment: "how-to-get-transaction-confirmed-quickly", - title: "How can I get my transaction confirmed quickly?", - answer: "If your wallet supports RBF, and your transaction was created with RBF enabled, you can bump the fee higher.
If your wallet does not support RBF, you can increase the effective fee rate of your transaction by spending its change output using a higher fee. This is called CPFP.
" + title: "How can I get my transaction confirmed more quickly?", + answer: "If your wallet supports RBF, and if your transaction was created with RBF enabled, you can bump the fee higher.
Otherwise, if your wallet does not support RBF, you can increase the effective fee rate of your transaction by spending its change output using a higher fee. This is called CPFP.
" }, { type: "endpoint", @@ -4496,7 +4496,7 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "how-prevent-stuck-transaction-in-future", title: "How can I prevent a transaction from getting stuck in the future?", - answer: "You must use an adequate fee rate. Also consider using RBF if your wallet supports it so that you can bump the fee rate if needed.
" + answer: "You must use an adequate transaction fee commensurate with how quickly you need the transaction to be confirmed. Also consider using RBF if your wallet supports it so that you can bump the fee rate if needed.
" }, { type: "category", @@ -4558,7 +4558,7 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "who-runs-this-website", title: "Who runs this website?", - answer: "Because reasons." + answer: "The official mempool.space website is operated by The Mempool Open Source Project. See more information on our About page. There are also many unofficial instances of this website operated by individual members of the Bitcoin community." }, { type: "endpoint", @@ -4566,7 +4566,7 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "host-my-own-instance-on-raspberry-pi", title: "How can I host my own instance on a Raspberry Pi?", - answer: "Because reasons." + answer: "We support one-click installation on a number of Raspberry Pi fullnode distros including Umbrel, RaspiBlitz, MyNode, and RoninDojo." }, { type: "endpoint", @@ -4574,7 +4574,7 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "host-my-own-instance-on-linux-server", title: "How can I host my own instance on a Linux server?", - answer: "Because reasons." + answer: "You can manually install mempool on your own Linux server, but this requires advanced sysadmin skills since you will be manually configuring everything. We do not provide support for manual deployments." }, { type: "endpoint", @@ -4582,6 +4582,6 @@ export const faqData = [ showConditions: bitcoinNetworks, fragment: "install-mempool-with-docker", title: "Can I install Mempool using Docker?", - answer: "Because reasons." + answer: "Yes, we publish Docker images (or you can build your own), and provide an example docker-compose template." } ]; From 663cf100d17d29175077999549083a641dac65f4 Mon Sep 17 00:00:00 2001 From: hunicus <93150691+hunicus@users.noreply.github.com> Date: Sun, 27 Mar 2022 01:19:48 -0400 Subject: [PATCH 06/37] Add no-sanitize pipe --- frontend/src/app/app.module.ts | 2 ++ frontend/src/app/shared/pipes/no-sanitize.pipe.ts | 11 +++++++++++ 2 files changed, 13 insertions(+) create mode 100644 frontend/src/app/shared/pipes/no-sanitize.pipe.ts diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 807c88ade..007763305 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -56,6 +56,7 @@ import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, fa 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'; @@ -119,6 +120,7 @@ import { DataCyDirective } from './data-cy.directive'; DashboardComponent, DifficultyComponent, ApiDocsComponent, + NoSanitizePipe, CodeTemplateComponent, TermsOfServiceComponent, PrivacyPolicyComponent, diff --git a/frontend/src/app/shared/pipes/no-sanitize.pipe.ts b/frontend/src/app/shared/pipes/no-sanitize.pipe.ts new file mode 100644 index 000000000..039eafb76 --- /dev/null +++ b/frontend/src/app/shared/pipes/no-sanitize.pipe.ts @@ -0,0 +1,11 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; + +@Pipe({ name: 'noSanitize' }) +export class NoSanitizePipe implements PipeTransform { + constructor(private domSanitizer: DomSanitizer) { } + + transform(html: string): SafeHtml { + return this.domSanitizer.bypassSecurityTrustHtml(html); + } +} From 0b5cba15d64f3e046b2342081e9903a2e02e750d Mon Sep 17 00:00:00 2001 From: nymkappa- P2WSH witness script +P2TR tapscript ++ P2WSH witness script +diff --git a/frontend/src/app/shared/pipes/asm-styler/asm-styler.pipe.ts b/frontend/src/app/shared/pipes/asm-styler/asm-styler.pipe.ts index f6f1a59ad..54a02e405 100644 --- a/frontend/src/app/shared/pipes/asm-styler/asm-styler.pipe.ts +++ b/frontend/src/app/shared/pipes/asm-styler/asm-styler.pipe.ts @@ -281,6 +281,7 @@ export class AsmStylerPipe implements PipeTransform { case 'CHECKSIGVERIFY': case 'CHECKMULTISIG': case 'CHECKMULTISIGVERIFY': + case 'CHECKSIGADD': style = 'crypto'; break; From c4db7ec5f684aded5a465b0eb34d6c3774dc652d Mon Sep 17 00:00:00 2001 From: nymkappa { - const connection = await DB.getConnection(); - try { - const [rows]: any[] = await connection.query(`SELECT MIN(height) as minHeight FROM blocks`); - connection.release(); - - return rows[0].minHeight; - } catch (e) { - connection.release(); - logger.err('$getOldestIndexedBlockHeight() error' + (e instanceof Error ? e.message : e)); - throw e; - } - } - /** * Get general block stats */ diff --git a/frontend/src/app/components/pool/pool.component.html b/frontend/src/app/components/pool/pool.component.html index 962a3ba9f..04d87df74 100644 --- a/frontend/src/app/components/pool/pool.component.html +++ b/frontend/src/app/components/pool/pool.component.html @@ -1,5 +1,6 @@ +--+
+--
+ Tags -- {{ poolStats.pool.regexes }} + + {{ poolStats.pool.regexes }}- Tags + Tags {{ poolStats.pool.regexes }}@@ -33,17 +33,17 @@- -Addresses -- - {{ poolStats.pool.addresses[0] }} - - @@ -77,105 +76,192 @@ ++- -
- Mined Blocks -{{ formatNumber(poolStats.blockCount, this.locale, '1.0-0') }} + ++ - +Hashrate (24h) ++ + +
++ + + +Estimated + +Reported + +Luck +{{ poolStats.estimatedHashrate | amountShortener : 1 : 'H/s' }} ++ + +{{ poolStats.reportedHashrate | amountShortener : 1 : 'H/s' }} +{{ formatNumber(poolStats.luck, this.locale, '1.2-2') }}% +- - -- Mined Blocks - {{ formatNumber(poolStats.blockCount, this.locale, '1.0-0') }}++ Hashrate (24h) + + +
+ + + +Estimated + +Reported + +Luck +{{ poolStats.estimatedHashrate | amountShortener : 1 : 'H/s' }} ++ + +{{ poolStats.reportedHashrate | amountShortener : 1 : 'H/s' }} +{{ formatNumber(poolStats.luck, this.locale, '1.2-2') }}% +- Empty Blocks -{{ formatNumber(poolStats.emptyBlocks, this.locale, '1.0-0') }} ++ + + +~ +~ ++ - +Mined Blocks ++ + +
++ + + +24h +1w +All +{{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['24h'], this.locale, '1.0-0') }}%) +{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['1w'], this.locale, '1.0-0') }}%) +{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['all'], this.locale, '1.0-0') }}%) + +- - Empty Blocks - {{ formatNumber(poolStats.emptyBlocks, this.locale, '1.0-0') }}++ Mined Blocks + + +
+ + + +24h +1w +All +{{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['24h'], this.locale, '1.0-0') }}%) +{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['1w'], this.locale, '1.0-0') }}%) +{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['all'], this.locale, '1.0-0') }}%) + +- ~ +~ - -
diff --git a/frontend/src/app/components/pool/pool.component.scss b/frontend/src/app/components/pool/pool.component.scss index 14d5146b1..9103f38f5 100644 --- a/frontend/src/app/components/pool/pool.component.scss +++ b/frontend/src/app/components/pool/pool.component.scss @@ -50,6 +50,9 @@ div.scrollable { .box { padding-bottom: 5px; + @media (min-width: 767.98px) { + min-height: 187px; + } } .label { @@ -170,6 +173,10 @@ div.scrollable { font-size: 10px; padding-top: 0; padding-bottom: 0; + outline: none; + box-shadow: none; +} +.small-button.mobile { transform: translateY(-20px); @media (min-width: 767.98px) { transform: translateY(-17px); From bc9063e490ca0a1f03ae5643e29bbdde4b47ec01 Mon Sep 17 00:00:00 2001 From: softsimonHeight -Timestamp -Mined -- Coinbase Tag -- Reward -Fees -Txs -Size - - -- - +- {{ block.height - }} - -- {{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }} - -- -- - - -- -- - -- - {{ block.tx_count | number }} - -- -- - --+ + +Height +Timestamp +Mined ++ Coinbase Tag ++ Reward +Fees +Txs +Size + + ++ + ++ {{ block.height + }} + ++ {{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }} + ++ ++ + + ++ ++ + ++ + {{ block.tx_count | number }} + ++ ++ + +++ + Height +Timestamp +Mined ++ Coinbase Tag ++ Reward +Fees +Txs +Size +@@ -209,6 +295,7 @@ + @@ -167,9 +174,12 @@@@ -220,18 +307,18 @@--+ +
+--
+ Tags -+ @@ -243,71 +330,149 @@ + Addresses -+ + -+ +- ~ -Addresses ++ ++diff --git a/frontend/src/app/components/pool/pool.component.scss b/frontend/src/app/components/pool/pool.component.scss index 60bc4ab7d..14d5146b1 100644 --- a/frontend/src/app/components/pool/pool.component.scss +++ b/frontend/src/app/components/pool/pool.component.scss @@ -36,6 +36,7 @@ @media (max-width: 768px) { margin-bottom: 10px; } + height: 400px; } div.scrollable { @@ -52,15 +53,22 @@ div.scrollable { } .label { - width: 30%; + width: 25%; + @media (min-width: 767.98px) { + vertical-align: middle; + } @media (max-width: 767.98px) { font-weight: bold; } } +.label.addresses { + vertical-align: top; + padding-top: 25px; +} .data { text-align: right; - padding-left: 25%; + padding-left: 5%; @media (max-width: 992px) { text-align: left; padding-left: 12px; @@ -114,10 +122,6 @@ div.scrollable { } } -.fees { - width: 0%; -} - .size { width: 12%; @media (max-width: 1000px) { @@ -146,6 +150,10 @@ div.scrollable { .skeleton-loader { max-width: 200px; } +.skeleton-loader.data { + max-width: 70px; +} + .loadingGraphs { position: absolute; @@ -159,8 +167,34 @@ div.scrollable { .small-button { height: 20px; - transform: translateY(-20px); font-size: 10px; padding-top: 0; padding-bottom: 0; + transform: translateY(-20px); + @media (min-width: 767.98px) { + transform: translateY(-17px); + } +} + +.block-count-title { + color: #4a68b9; + font-size: 14px; + text-align: left; + @media (max-width: 767.98px) { + text-align: center; + } +} + +.table-data tr { + background-color: transparent; +} +.table-data td { + text-align: left; + @media (max-width: 767.98px) { + text-align: center; + } +} + +.taller-row { + height: 75px; } \ No newline at end of file diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts index c41cb4971..764601a64 100644 --- a/frontend/src/app/components/pool/pool.component.ts +++ b/frontend/src/app/components/pool/pool.component.ts @@ -8,6 +8,7 @@ import { ApiService } from 'src/app/services/api.service'; import { StateService } from 'src/app/services/state.service'; import { selectPowerOfTen } from 'src/app/bitcoin.utils'; import { formatNumber } from '@angular/common'; +import { SeoService } from 'src/app/services/seo.service'; @Component({ selector: 'app-pool', @@ -41,6 +42,7 @@ export class PoolComponent implements OnInit { private apiService: ApiService, private route: ActivatedRoute, public stateService: StateService, + private seoService: SeoService, ) { } @@ -66,6 +68,7 @@ export class PoolComponent implements OnInit { this.loadMoreSubject.next(this.blocks[this.blocks.length - 1]?.height); }), map((poolStats) => { + this.seoService.setTitle(poolStats.pool.name); let regexes = '"'; for (const regex of poolStats.pool.regexes) { regexes += regex + '", "'; @@ -73,6 +76,10 @@ export class PoolComponent implements OnInit { poolStats.pool.regexes = regexes.slice(0, -3); poolStats.pool.addresses = poolStats.pool.addresses; + if (poolStats.reportedHashrate) { + poolStats.luck = poolStats.estimatedHashrate / poolStats.reportedHashrate * 100; + } + return Object.assign({ logo: `./resources/mining-pools/` + poolStats.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg' }, poolStats); @@ -97,7 +104,21 @@ export class PoolComponent implements OnInit { } prepareChartOptions(data) { + let title: object; + if (data.length === 0) { + title = { + textStyle: { + color: 'grey', + fontSize: 15 + }, + text: `No data`, + left: 'center', + top: 'center' + }; + } + this.chartOptions = { + title: title, animation: false, color: [ new graphic.LinearGradient(0, 0, 0, 0.65, [ @@ -178,7 +199,7 @@ export class PoolComponent implements OnInit { }, }, ], - dataZoom: [{ + dataZoom: data.length === 0 ? undefined : [{ type: 'inside', realtime: true, zoomLock: true, diff --git a/frontend/src/app/interfaces/node-api.interface.ts b/frontend/src/app/interfaces/node-api.interface.ts index bcda5ff4c..4998a0d70 100644 --- a/frontend/src/app/interfaces/node-api.interface.ts +++ b/frontend/src/app/interfaces/node-api.interface.ts @@ -93,8 +93,19 @@ export interface PoolInfo { } export interface PoolStat { pool: PoolInfo; - blockCount: number; - emptyBlocks: number; + blockCount: { + all: number, + '24h': number, + '1w': number, + }; + blockShare: { + all: number, + '24h': number, + '1w': number, + }; + estimatedHashrate: number; + reportedHashrate: number; + luck?: number; } export interface BlockExtension { diff --git a/frontend/src/app/shared/pipes/amount-shortener.pipe.ts b/frontend/src/app/shared/pipes/amount-shortener.pipe.ts index 319dc2a5a..a31a5712e 100644 --- a/frontend/src/app/shared/pipes/amount-shortener.pipe.ts +++ b/frontend/src/app/shared/pipes/amount-shortener.pipe.ts @@ -4,8 +4,9 @@ import { Pipe, PipeTransform } from '@angular/core'; name: 'amountShortener' }) export class AmountShortenerPipe implements PipeTransform { - transform(num: number, ...args: number[]): unknown { + transform(num: number, ...args: any[]): unknown { const digits = args[0] || 1; + const unit = args[1] || undefined; if (num < 1000) { return num.toFixed(digits); @@ -21,7 +22,12 @@ export class AmountShortenerPipe implements PipeTransform { { value: 1e18, symbol: 'E' } ]; const rx = /\.0+$|(\.[0-9]*[1-9])0+$/; - var item = lookup.slice().reverse().find((item) => num >= item.value); - return item ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol : '0'; + const item = lookup.slice().reverse().find((item) => num >= item.value); + + if (unit !== undefined) { + return item ? (num / item.value).toFixed(digits).replace(rx, '$1') + ' ' + item.symbol + unit : '0'; + } else { + return item ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol : '0'; + } } } \ No newline at end of file From c733782d04781aa76d4f836e57dff81c61b6e483 Mon Sep 17 00:00:00 2001 From: nymkappa+- -
- Mined Blocks + ++ - +Hashrate (24h) - + + +
+ + + +Estimated + +Reported + +Luck ++ + ++ + ++ + + +- - -- Mined Blocks - - -++ Hashrate (24h) + + +
+ + + +Estimated + +Reported + +Luck ++ + ++ + ++ + + +- Empty Blocks + ++ - +Mined Blocks - + + +
+ + + +24h +1w +All ++ + ++ + ++ + + +- - Empty Blocks - - -++ Mined Blocks + + +
+ + + +24h +1w +All ++ + ++ + ++ + + +-The mempool.space website, the liquid.network website, the bisq.markets website, their associated API services, and related network and server infrastructure (collectively, the "Website") are operated by Mempool Space K.K. in Japan ("Mempool", "We", or "Us") and self-hosted from AS142052.
+The mempool.space website, the liquid.network website, the bisq.markets website, their associated API services, and related network and server infrastructure (collectively, the "Website") are operated by Mempool Space K.K. in Japan ("Mempool", "We", or "Us") and self-hosted from AS142052.
This website and its API service (collectively, the "Website") are operated by a member of the Bitcoin community ("We" or "Us"). Mempool Space K.K. in Japan ("Mempool") has no affiliation with the operator of this Website, and does not sponsor or endorse the information provided herein.
diff --git a/frontend/src/app/components/terms-of-service/terms-of-service.component.html b/frontend/src/app/components/terms-of-service/terms-of-service.component.html index 44643c855..35a6413bd 100644 --- a/frontend/src/app/components/terms-of-service/terms-of-service.component.html +++ b/frontend/src/app/components/terms-of-service/terms-of-service.component.html @@ -11,7 +11,7 @@-The mempool.space website, the liquid.network website, the bisq.markets website, their associated API services, and related network and server infrastructure (collectively, the "Website") are operated by Mempool Space K.K. in Japan ("Mempool", "We", or "Us") and self-hosted from AS142052.
+The mempool.space website, the liquid.network website, the bisq.markets website, their associated API services, and related network and server infrastructure (collectively, the "Website") are operated by Mempool Space K.K. in Japan ("Mempool", "We", or "Us") and self-hosted from AS142052.
This website and its API service (collectively, the "Website") are operated by a member of the Bitcoin community ("We" or "Us"). Mempool Space K.K. in Japan ("Mempool") has no affiliation with the operator of this Website, and does not sponsor or endorse the information provided herein.
From 0c3f9c895e35b4a3f6f2eeffe39a5b6ba21a49bd Mon Sep 17 00:00:00 2001 From: TechMiX
-+
{{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transaction {{ (transactions?.length | number) || '?' }} of {{ txCount | number }} transactions diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html index 8970bd372..8b511b30c 100644 --- a/frontend/src/app/components/block/block.component.html +++ b/frontend/src/app/components/block/block.component.html @@ -163,7 +163,7 @@-+
{{ i }} transaction {{ i }} transactions diff --git a/frontend/src/app/components/docs/docs.component.ts b/frontend/src/app/components/docs/docs.component.ts index 7ef6cade6..e2de9113d 100644 --- a/frontend/src/app/components/docs/docs.component.ts +++ b/frontend/src/app/components/docs/docs.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, HostBinding } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Env, StateService } from 'src/app/services/state.service'; @@ -13,6 +13,8 @@ export class DocsComponent implements OnInit { env: Env; showWebSocketTab = true; + @HostBinding('attr.dir') dir = 'ltr'; + constructor( private route: ActivatedRoute, private stateService: StateService, diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts index fd2a52b5e..de62989bf 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core'; import { EChartsOption, graphic } from 'echarts'; import { Observable } from 'rxjs'; import { delay, map, retryWhen, share, startWith, switchMap, tap } from 'rxjs/operators'; @@ -35,6 +35,8 @@ export class HashrateChartComponent implements OnInit { renderer: 'svg', }; + @HostBinding('attr.dir') dir = 'ltr'; + hashrateObservable$: Observable; isLoading = true; formatNumber = formatNumber; diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts index abfa8f61d..d664650d0 100644 --- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts +++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, LOCALE_ID, OnInit, HostBinding } from '@angular/core'; import { EChartsOption } from 'echarts'; import { Observable } from 'rxjs'; import { delay, map, retryWhen, share, startWith, switchMap, tap } from 'rxjs/operators'; @@ -33,6 +33,8 @@ export class HashrateChartPoolsComponent implements OnInit { renderer: 'svg', }; + @HostBinding('attr.dir') dir = 'ltr'; + hashrateObservable$: Observable ; isLoading = true; diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts index 236ac3b2d..bf78266e0 100644 --- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts +++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, Input, NgZone, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, NgZone, OnInit, HostBinding } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { Router } from '@angular/router'; import { EChartsOption, PieSeriesOption } from 'echarts'; @@ -31,6 +31,8 @@ export class PoolRankingComponent implements OnInit { }; chartInstance: any = undefined; + @HostBinding('attr.dir') dir = 'ltr'; + miningStatsObservable$: Observable ; constructor( diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html index a0c92cbb4..1b6844cda 100644 --- a/frontend/src/app/components/transaction/transaction.component.html +++ b/frontend/src/app/components/transaction/transaction.component.html @@ -200,7 +200,7 @@ - +Details
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 09c885987..aee1456e4 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -698,6 +698,16 @@ th { margin-right: 0px; text-align: right; } + + .nav-pills { + @extend .nav-pills; + display: inline-block; + } + + .description { + direction: rtl; + } + .dropdown { margin-right: 1rem; margin-left: 0; @@ -712,12 +722,29 @@ th { left: 0px; right: auto; } - .fa-arrow-alt-circle-right { - @extend .fa-arrow-alt-circle-right; + .fa-circle-right { + @extend .fa-circle-right; -webkit-transform: scaleX(-1); transform: scaleX(-1); } + .btn.ml-2 { + margin-right: 0.5rem !important; + } + + .pool-name { + @extend .pool-name; + padding-right: 10px; + } + + .endpoint-container { + @extend .endpoint-container; + .section-header { + @extend .section-header; + text-align: left; + } + } + .table td { text-align: right; .fiat { @@ -809,6 +836,14 @@ th { } } + .full-container { + @extend .full-container; + .formRadioGroup { + @extend .formRadioGroup; + direction: ltr; + } + } + .mempool-graph { @extend .mempool-graph; direction: ltr; From 9a389cc9cdd4cda21af918a1e97ebd3143b5a869 Mon Sep 17 00:00:00 2001 From: TechMiXAddresses - {{ poolStats.pool.addresses[0] }} - - {{ - address }}
+++ {{ + address }}+
+@@ -147,9 +151,12 @@ -{{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['24h'], this.locale, '1.0-0') }}%) -{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['1w'], this.locale, '1.0-0') }}%) -{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['all'], this.locale, '1.0-0') }}%) +{{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 * + poolStats.blockShare['24h'], this.locale, '1.0-0') }}%) +{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 * + poolStats.blockShare['1w'], this.locale, '1.0-0') }}%) +{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 * + poolStats.blockShare['all'], this.locale, '1.0-0') }}%) {{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['24h'], this.locale, '1.0-0') }}%) -{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['1w'], this.locale, '1.0-0') }}%) -{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 * poolStats.blockShare['all'], this.locale, '1.0-0') }}%) +{{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 * + poolStats.blockShare['24h'], this.locale, '1.0-0') }}%) +{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 * + poolStats.blockShare['1w'], this.locale, '1.0-0') }}%) +{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 * + poolStats.blockShare['all'], this.locale, '1.0-0') }}%)