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] 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: '<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."
+  }
+];
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 @@
-<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>
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<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 ) {
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 @@
 <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">
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<HTMLElement>( "#" + targetId );
       const endpointContentEl = document.querySelector<HTMLElement>( "#" + 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 @@
         <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>