mirror of
https://github.com/mempool/mempool.git
synced 2024-12-27 08:44:26 +01:00
Generalize api-docs components to accommodate faq
Also add chunk of faq content.
This commit is contained in:
parent
289ed7b9b3
commit
ef2c845714
@ -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: '<p>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.</p>'
|
||||
},
|
||||
{
|
||||
type: "endpoint",
|
||||
category: "basics",
|
||||
showConditions: bitcoinNetworks,
|
||||
fragment: "what-is-a-mempool-explorer",
|
||||
title: "What is a mempool explorer?",
|
||||
answer: '<p>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. </p><p>The mempool.space website invented the concept of visualizing a Bitcoin node’s mempool as <b>projected blocks</b>, which are visible on the left side of our main dashboard, and the inspiration for our half-filled block logo.</p>'
|
||||
},
|
||||
{
|
||||
type: "endpoint",
|
||||
category: "basics",
|
||||
showConditions: bitcoinNetworks,
|
||||
fragment: "what-is-a-blockchain",
|
||||
title: "What is a blockchain?",
|
||||
answer: "<p>A blockchain is the distributed ledger that records the transactions for a cryptocurrency network. Miners amend the blockchain ledger by mining new blocks.</p>"
|
||||
},
|
||||
{
|
||||
type: "endpoint",
|
||||
category: "basics",
|
||||
showConditions: bitcoinNetworks,
|
||||
fragment: "what-is-a-block-explorer",
|
||||
title: "What is a block explorer?",
|
||||
answer: "<p>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.</p>"
|
||||
},
|
||||
{
|
||||
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: "<p>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.</p>"
|
||||
},
|
||||
{
|
||||
type: "endpoint",
|
||||
category: "help",
|
||||
showConditions: bitcoinNetworks,
|
||||
fragment: "how-to-get-transaction-confirmed-quickly",
|
||||
title: "How can I get my transaction confirmed quickly?",
|
||||
answer: "<p>If your wallet supports RBF, and your transaction was created with RBF enabled, you can bump the fee higher.</p><p>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.</p>"
|
||||
},
|
||||
{
|
||||
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: "<p>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.</p>"
|
||||
},
|
||||
{
|
||||
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."
|
||||
}
|
||||
];
|
||||
|
@ -1,4 +1,4 @@
|
||||
<div *ngFor="let item of restDocs">
|
||||
<div *ngFor="let item of tabData">
|
||||
<p *ngIf="( item.type === 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )">{{ item.title }}</p>
|
||||
<a *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )" [routerLink]="['./']" fragment="{{ item.fragment }}" (click)="navLinkClick($event)">{{ item.title }}</a>
|
||||
</div>
|
||||
|
@ -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<any> = 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 ) {
|
||||
|
@ -1,10 +1,32 @@
|
||||
<ng-container *ngIf="{ val: network$ | async } as network">
|
||||
<div class="container-xl text-left">
|
||||
|
||||
<div id="restAPI" *ngIf="restTabActivated">
|
||||
|
||||
<div id="faq" *ngIf="whichTab === 'faq'">
|
||||
|
||||
<div id="doc-nav-desktop" class="hide-on-mobile" [ngClass]="desktopDocsNavPosition">
|
||||
<app-api-docs-nav (navLinkClickEvent)="anchorLinkClick( $event )" [network]="{ val: network$ | async }"></app-api-docs-nav>
|
||||
<app-api-docs-nav (navLinkClickEvent)="anchorLinkClick( $event )" [network]="{ val: network$ | async }" [whichTab]="whichTab"></app-api-docs-nav>
|
||||
</div>
|
||||
|
||||
<div class="doc-content">
|
||||
|
||||
<div *ngFor="let item of faq">
|
||||
<h3 *ngIf="item.type === 'category'">{{ item.title }}</h3>
|
||||
<div *ngIf="item.type !== 'category'" class="endpoint-container" id="{{ item.fragment }}">
|
||||
<a 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" [innerHTML]="item.answer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="restAPI" *ngIf="whichTab === 'rest'">
|
||||
|
||||
<div id="doc-nav-desktop" class="hide-on-mobile" [ngClass]="desktopDocsNavPosition">
|
||||
<app-api-docs-nav (navLinkClickEvent)="anchorLinkClick( $event )" [network]="{ val: network$ | async }" [whichTab]="whichTab"></app-api-docs-nav>
|
||||
</div>
|
||||
|
||||
<div class="doc-content">
|
||||
@ -65,7 +87,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="websocketAPI" *ngIf="!restTabActivated && ( network.val !== 'bisq' )">
|
||||
<div id="websocketAPI" *ngIf="( whichTab === 'websocket' ) && ( network.val !== 'bisq' )">
|
||||
<div class="api-category">
|
||||
<div class="websocket">
|
||||
<div class="endpoint">
|
||||
|
@ -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;
|
||||
|
@ -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<HTMLElement>( "#" + targetId );
|
||||
const endpointContentEl = document.querySelector<HTMLElement>( "#" + targetId + " .endpoint-content" );
|
||||
const endPointContentElHeight = endpointContentEl.clientHeight;
|
||||
|
@ -9,7 +9,7 @@
|
||||
<a ngbNavLink [routerLink]="['/docs/faq' | relativeUrl]">FAQ</a>
|
||||
<ng-template ngbNavContent>
|
||||
|
||||
<p>FAQ placeholder</p>
|
||||
<app-api-docs [whichTab]="'faq'"></app-api-docs>
|
||||
|
||||
</ng-template>
|
||||
</li>
|
||||
@ -18,7 +18,7 @@
|
||||
<a ngbNavLink [routerLink]="['/docs/api/rest' | relativeUrl]">API - REST</a>
|
||||
<ng-template ngbNavContent>
|
||||
|
||||
<app-api-docs [restTabActivated]="true"></app-api-docs>
|
||||
<app-api-docs [whichTab]="'rest'"></app-api-docs>
|
||||
|
||||
</ng-template>
|
||||
</li>
|
||||
@ -27,7 +27,7 @@
|
||||
<a ngbNavLink [routerLink]="['/docs/api/websocket' | relativeUrl]">API - WebSocket</a>
|
||||
<ng-template ngbNavContent>
|
||||
|
||||
<app-api-docs [restTabActivated]="false"></app-api-docs>
|
||||
<app-api-docs [whichTab]="'websocket'"></app-api-docs>
|
||||
|
||||
</ng-template>
|
||||
</li>
|
||||
|
Loading…
Reference in New Issue
Block a user