mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-12-28 01:04:28 +01:00
Code Issues Projects Releases Wiki Activity

Add live mempool blocks to faq (h/t @softsimon)

Browse Source
This commit is contained in:
hunicus 2022-04-12 15:58:20 -04:00
parent 88c50f7107
commit e50b58b8aa
No known key found for this signature in database
GPG Key ID: 3AA9E3763EBB3B23
3 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4433,7 +4433,7 @@ export const faqData = [
showConditions: bitcoinNetworks, showConditions: bitcoinNetworks,
fragment: "what-is-a-mempool-explorer", fragment: "what-is-a-mempool-explorer",
title: "What is a mempool explorer?", title: "What is a mempool explorer?",
answer: "<p>A mempool explorer is a tool that enables you to view real-time and historical information about a node's mempool, visualize its transactions, and search and view those transactions.</p><p>The mempool.space website invented the concept of visualizing a Bitcoin node's mempool as <b>projected blocks</b>. These blocks are the inspiration for our half-filled block logo.</p><p>Here's a snapshot of this visualization (which you can find on <a href='/'>the main dashboard</a>) as of block 729,556 in March 2022. Projected blocks are on the left of the dotted white line, and confirmed blocks are on the right.</p><iframe id='mempool-blocks' style='width: 100%;height: 275px;border: none' src='./resources/mempool-blocks.html' scrolling='no'></iframe>" answer: "<p>A mempool explorer is a tool that enables you to view real-time and historical information about a node's mempool, visualize its transactions, and search and view those transactions.</p><p>The mempool.space website invented the concept of visualizing a Bitcoin node's mempool as <b>projected blocks</b>. These blocks are the inspiration for our half-filled block logo.</p><p>Projected blocks are on the left of the dotted white line, and confirmed blocks are on the right.</p>"
}, },
{ {
type: "endpoint", type: "endpoint",

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

@ -1,6 +1,6 @@
<ng-container *ngIf="{ val: network$ | async } as network"> <ng-container *ngIf="{ val: network$ | async } as network">
<div class="container-xl text-left"> <div class="container-xl text-left">
<div id="faq" *ngIf="whichTab === 'faq'"> <div id="faq" *ngIf="whichTab === 'faq'">
<div id="doc-nav-desktop" class="hide-on-mobile" [ngClass]="desktopDocsNavPosition"> <div id="doc-nav-desktop" class="hide-on-mobile" [ngClass]="desktopDocsNavPosition">
@ -15,12 +15,15 @@
<a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick( $event )" [routerLink]="['./']" fragment="{{ item.fragment }}"><table><tr><td>{{ item.title }}</td><td><span>{{ item.category }}</span></td></tr></table></a> <a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick( $event )" [routerLink]="['./']" fragment="{{ item.fragment }}"><table><tr><td>{{ item.title }}</td><td><span>{{ item.category }}</span></td></tr></table></a>
<div class="endpoint-content"> <div class="endpoint-content">
<div class="endpoint" [innerHTML]="item.answer | noSanitize"></div> <div class="endpoint" [innerHTML]="item.answer | noSanitize"></div>
<div class="blockchain-wrapper" *ngIf="item.fragment === 'what-is-a-mempool-explorer'">
<app-blockchain></app-blockchain>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="restAPI" *ngIf="whichTab === 'rest'"> <div id="restAPI" *ngIf="whichTab === 'rest'">

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

@ -187,6 +187,16 @@ h3 {
border-radius: 0.5rem 0.5rem 0 0; border-radius: 0.5rem 0.5rem 0 0;
} }
.blockchain-wrapper {
position: relative;
width: 100%;
overflow: auto;
scrollbar-width: none;
}
.blockchain-wrapper::-webkit-scrollbar {
display: none;
}
@media (max-width: 992px) { @media (max-width: 992px) {
.hide-on-mobile { .hide-on-mobile {
@ -239,7 +249,7 @@ h3 {
h3 { h3 {
display: none; display: none;
} }
.doc-item-container:last-of-type .endpoint-container { .doc-item-container:last-of-type .endpoint-container {
margin-bottom: 4rem; margin-bottom: 4rem;
} }