From 37e2786c5e55595e56e07d2bcd6e8514d0c5899d Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Thu, 24 Mar 2022 08:55:20 -0400
Subject: [PATCH 01/10] Add faq tab placeholder

---
 frontend/src/app/app-routing.module.ts          |  4 ++++
 .../src/app/components/docs/docs.component.html | 17 +++++++++++++----
 .../src/app/components/docs/docs.component.ts   | 11 ++++++++++-
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 003bbcf0d..37fb1d62d 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -127,6 +127,10 @@ let routes: Routes = [
         path: 'docs/api/:type',
         component: DocsComponent
       },
+      {
+        path: 'docs/faq',
+        component: DocsComponent
+      },
       {
         path: 'docs/api',
         redirectTo: 'docs/api/rest'
diff --git a/frontend/src/app/components/docs/docs.component.html b/frontend/src/app/components/docs/docs.component.html
index 8dc4a9e72..d6b43f064 100644
--- a/frontend/src/app/components/docs/docs.component.html
+++ b/frontend/src/app/components/docs/docs.component.html
@@ -4,9 +4,18 @@
     <h2 i18n="documentation.title">Documentation</h2>
 
     <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs">
+    
+      <li [ngbNavItem]="0" *ngIf="showFaqTab">
+        <a ngbNavLink routerLink="/docs/faq">FAQ</a>
+        <ng-template ngbNavContent>
 
-      <li [ngbNavItem]="0">
-        <a ngbNavLink routerLink="../rest">API - REST</a>
+          <p>FAQ placeholder</p>
+
+        </ng-template>
+      </li>
+
+      <li [ngbNavItem]="1">
+        <a ngbNavLink routerLink="/docs/api/rest">API - REST</a>
         <ng-template ngbNavContent>
 
           <app-api-docs [restTabActivated]="true"></app-api-docs>
@@ -14,8 +23,8 @@
         </ng-template>
       </li>
 
-      <li [ngbNavItem]="1" *ngIf="showWebSocketTab">
-        <a ngbNavLink routerLink="../websocket">API - WebSocket</a>
+      <li [ngbNavItem]="2" *ngIf="showWebSocketTab">
+        <a ngbNavLink routerLink="/docs/api/websocket">API - WebSocket</a>
         <ng-template ngbNavContent>
 
           <app-api-docs [restTabActivated]="false"></app-api-docs>
diff --git a/frontend/src/app/components/docs/docs.component.ts b/frontend/src/app/components/docs/docs.component.ts
index 605a453ab..f75900dc2 100644
--- a/frontend/src/app/components/docs/docs.component.ts
+++ b/frontend/src/app/components/docs/docs.component.ts
@@ -12,6 +12,7 @@ export class DocsComponent implements OnInit {
   activeTab = 0;
   env: Env;
   showWebSocketTab = true;
+  showFaqTab = true;
 
   constructor(
     private route: ActivatedRoute,
@@ -20,8 +21,16 @@ export class DocsComponent implements OnInit {
 
   ngOnInit(): void {
     const url = this.route.snapshot.url;
-    this.activeTab = ( url[2].path === "rest" ) ? 0 : 1;
+    if( url[1].path === "faq" ) {
+        this.activeTab = 0;
+    } else if( url[2].path === "rest" ) {
+        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;
   }
 }

From 61faf316446aa76e3aabd82a288d8fd27d73c64e Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Thu, 24 Mar 2022 10:38:32 -0400
Subject: [PATCH 02/10] Fix routing for faq tab

Make API links relative + add routing for signet and
testnet.
---
 frontend/src/app/app-routing.module.ts               | 8 ++++++++
 frontend/src/app/components/docs/docs.component.html | 8 ++++----
 frontend/src/app/components/docs/docs.component.ts   | 8 ++++----
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 37fb1d62d..713fec384 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -274,6 +274,10 @@ let routes: Routes = [
             path: 'docs/api/:type',
             component: DocsComponent
           },
+          {
+            path: 'docs/faq',
+            component: DocsComponent
+          },
           {
             path: 'docs/api',
             redirectTo: 'docs/api/rest'
@@ -410,6 +414,10 @@ let routes: Routes = [
             path: 'docs/api/:type',
             component: DocsComponent
           },
+          {
+            path: 'docs/faq',
+            component: DocsComponent
+          },
           {
             path: 'docs/api',
             redirectTo: 'docs/api/rest'
diff --git a/frontend/src/app/components/docs/docs.component.html b/frontend/src/app/components/docs/docs.component.html
index d6b43f064..21d6ca93e 100644
--- a/frontend/src/app/components/docs/docs.component.html
+++ b/frontend/src/app/components/docs/docs.component.html
@@ -4,9 +4,9 @@
     <h2 i18n="documentation.title">Documentation</h2>
 
     <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs">
-    
+
       <li [ngbNavItem]="0" *ngIf="showFaqTab">
-        <a ngbNavLink routerLink="/docs/faq">FAQ</a>
+        <a ngbNavLink [routerLink]="['/docs/faq' | relativeUrl]">FAQ</a>
         <ng-template ngbNavContent>
 
           <p>FAQ placeholder</p>
@@ -15,7 +15,7 @@
       </li>
 
       <li [ngbNavItem]="1">
-        <a ngbNavLink routerLink="/docs/api/rest">API - REST</a>
+        <a ngbNavLink [routerLink]="['/docs/api/rest' | relativeUrl]">API - REST</a>
         <ng-template ngbNavContent>
 
           <app-api-docs [restTabActivated]="true"></app-api-docs>
@@ -24,7 +24,7 @@
       </li>
 
       <li [ngbNavItem]="2" *ngIf="showWebSocketTab">
-        <a ngbNavLink routerLink="/docs/api/websocket">API - WebSocket</a>
+        <a ngbNavLink [routerLink]="['/docs/api/websocket' | relativeUrl]">API - WebSocket</a>
         <ng-template ngbNavContent>
 
           <app-api-docs [restTabActivated]="false"></app-api-docs>
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/10] 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/10] 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>

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/10] 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: '<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>'
+    answer: "<p>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.</p>"
   },
   {
     type: "endpoint",
@@ -4433,7 +4433,7 @@ export const faqData = [
     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>'
+    answer: "<p>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. </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,131 in March 2022. Projected blocks are on the left, and confirmed blocks are on the right.</p>"
   },
   {
     type: "endpoint",
@@ -4441,7 +4441,7 @@ export const faqData = [
     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>"
+    answer: "<p>A blockchain is a distributed ledger that records the transactions for a cryptocurrency network. Miners amend the blockchain ledger by mining new blocks.</p>"
   },
   {
     type: "endpoint",
@@ -4449,7 +4449,7 @@ export const faqData = [
     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>"
+    answer: "<p>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.</p>"
   },
   {
     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.</p><p>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.</p>"
   },
   {
     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: "<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>"
+    answer: "<p>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.</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>"
+    title: "How can I get my transaction confirmed more quickly?",
+    answer: "<p>If your wallet supports RBF, and if your transaction was created with RBF enabled, you can bump the fee higher.</p><p>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.</p>"
   },
   {
     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: "<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>"
+    answer: "<p>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.</p>"
   },
   {
     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 <a href='/about'>on our About page</a>. 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 <a href='https://github.com/mempool/mempool/tree/master/docker' target='_blank'>an example docker-compose template</a>."
   }
 ];

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/10] 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 039e6bbe7785a372619ecbb26c650244e916ffb2 Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Tue, 12 Apr 2022 15:31:45 -0400
Subject: [PATCH 07/10] Add answers, fix accordions, tweak footer styling

Main purpose of this commit is to remove iframes from git
history. This commit squashes several commits that came
after iframes were added.
---
 .../src/app/components/docs/api-docs-data.ts  | 28 +++++++++----------
 .../components/docs/api-docs.component.html   | 10 +++----
 .../components/docs/api-docs.component.scss   |  4 +++
 .../app/components/docs/api-docs.component.ts | 20 ++++++++++---
 4 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/frontend/src/app/components/docs/api-docs-data.ts b/frontend/src/app/components/docs/api-docs-data.ts
index ed4703641..a369ac63b 100644
--- a/frontend/src/app/components/docs/api-docs-data.ts
+++ b/frontend/src/app/components/docs/api-docs-data.ts
@@ -4433,7 +4433,7 @@ export const faqData = [
     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 its transactions, searching and viewing those transactions, and viewing aggregate and historical data about a node's mempool. </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,131 in March 2022. Projected blocks are on the left, and confirmed blocks are on the right.</p>"
+    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>"
   },
   {
     type: "endpoint",
@@ -4457,7 +4457,7 @@ export const faqData = [
     showConditions: bitcoinNetworks,
     fragment: "what-is-mining",
     title: "What is mining?",
-    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.</p><p>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.</p>"
+    answer: "Mining is the process by which unconfirmed transactions in a mempool are confirmed into a block on a blockchain. Miners select unconfirmed transactions from their mempools and arrange them into a block such that they solve a particular math problem.</p><p>The first miner on the network to find a suitable block earns all the transaction fees from the transactions in that block. As a result, miners tend to prioritize transactions with higher transaction fees.</p>"
   },
   {
     type: "endpoint",
@@ -4478,9 +4478,9 @@ export const faqData = [
     type: "endpoint",
     category: "help",
     showConditions: bitcoinNetworks,
-    fragment: "why-is-transaction-stuck-in-the-mempool",
+    fragment: "why-is-transaction-stuck-in-mempool",
     title: "Why is my transaction stuck in the mempool?",
-    answer: "<p>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.</p>"
+    answer: "<p>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 it's been a while and your transcation hasn't been confirmed, your transaction probably has a lower transaction fee relative to other transactions currently in the mempool.</p>"
   },
   {
     type: "endpoint",
@@ -4494,7 +4494,7 @@ export const faqData = [
     type: "endpoint",
     category: "help",
     showConditions: bitcoinNetworks,
-    fragment: "how-prevent-stuck-transaction-in-future",
+    fragment: "how-prevent-stuck-transaction",
     title: "How can I prevent a transaction from getting stuck in the future?",
     answer: "<p>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.</p>"
   },
@@ -4511,7 +4511,7 @@ export const faqData = [
     showConditions: bitcoinNetworks,
     fragment: "looking-up-transactions",
     title: "How can I look up a transaction?",
-    answer: "Because reasons."
+    answer: "Search for the transaction ID in the search box at the top-right of this website."
   },
   {
     type: "endpoint",
@@ -4519,7 +4519,7 @@ export const faqData = [
     showConditions: bitcoinNetworks,
     fragment: "looking-up-addresses",
     title: "How can I look up an address?",
-    answer: "Because reasons."
+    answer: "Search for the address in the search box at the top-right of this website."
   },
   {
     type: "endpoint",
@@ -4527,7 +4527,7 @@ export const faqData = [
     showConditions: bitcoinNetworks,
     fragment: "looking-up-blocks",
     title: "How can I look up a block?",
-    answer: "Because reasons."
+    answer: "Search for the block number (or block hash) in the search box at the top-right of this website."
   },
   {
     type: "endpoint",
@@ -4535,7 +4535,7 @@ export const faqData = [
     showConditions: bitcoinNetworks,
     fragment: "looking-up-fee-estimates",
     title: "How can I look up fee estimates?",
-    answer: "Because reasons."
+    answer: "<p>See real-time fee estimates on <a href='/'>the main dashboard</a>.</p><p>Low priority is suggested for confirmation within 6 blocks (~1 hour), Medium priority is suggested for confirmation within 3 blocks (~30 minutes), and High priority is suggested for confirmation in the next block (~10 minutes).</p>"
   },
   {
     type: "endpoint",
@@ -4543,7 +4543,7 @@ export const faqData = [
     showConditions: bitcoinNetworks,
     fragment: "looking-up-historical-trends",
     title: "How can I explore historical trends?",
-    answer: "Because reasons."
+    answer: "See the <a href='/graphs'>graphs page</a> for aggregate trends over time: mempool size over time and incoming transaction velocity over time."
   },
   {
     type: "category",
@@ -4558,21 +4558,21 @@ export const faqData = [
     showConditions: bitcoinNetworks,
     fragment: "who-runs-this-website",
     title: "Who runs this website?",
-    answer: "The official mempool.space website is operated by The Mempool Open Source Project. See more information <a href='/about'>on our About page</a>. There are also many unofficial instances of this website operated by individual members of the Bitcoin community."
+    answer: "The official mempool.space website is operated by The Mempool Open Source Project. See more information on our <a href='/about'>About page</a>. There are also many unofficial instances of this website operated by individual members of the Bitcoin community."
   },
   {
     type: "endpoint",
     category: "advanced",
     showConditions: bitcoinNetworks,
-    fragment: "host-my-own-instance-on-raspberry-pi",
+    fragment: "host-my-own-instance-raspberry-pi",
     title: "How can I host my own instance on a Raspberry Pi?",
-    answer: "We support one-click installation on a number of Raspberry Pi fullnode distros including Umbrel, RaspiBlitz, MyNode, and RoninDojo."
+    answer: "We support one-click installation on a number of Raspberry Pi full-node distros including Umbrel, RaspiBlitz, MyNode, and RoninDojo."
   },
   {
     type: "endpoint",
     category: "advanced",
     showConditions: bitcoinNetworks,
-    fragment: "host-my-own-instance-on-linux-server",
+    fragment: "host-my-own-instance-linux-server",
     title: "How can I host my own instance on a Linux server?",
     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."
   },
diff --git a/frontend/src/app/components/docs/api-docs.component.html b/frontend/src/app/components/docs/api-docs.component.html
index e213d6a62..f33c777c9 100644
--- a/frontend/src/app/components/docs/api-docs.component.html
+++ b/frontend/src/app/components/docs/api-docs.component.html
@@ -9,12 +9,12 @@
 
       <div class="doc-content">
 
-        <div *ngFor="let item of faq">
+        <div class="doc-item-container" *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>
+            <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" [innerHTML]="item.answer"></div>
+              <div class="endpoint" [innerHTML]="item.answer | noSanitize"></div>
             </div>
           </div>
         </div>
@@ -33,10 +33,10 @@
 
         <p class="hide-on-mobile no-bottom-space">Reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title">API service</ng-container>.</p>
 
-        <div *ngFor="let item of restDocs">
+        <div class="doc-item-container" *ngFor="let item of restDocs">
           <h3 *ngIf="( item.type === 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )">{{ item.title }}</h3>
           <div *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )" class="endpoint-container" id="{{ item.fragment }}">
-            <a class="section-header" (click)="anchorLinkClick( $event )" [routerLink]="['./']" fragment="{{ item.fragment }}">{{ item.title }} <span>{{ item.category }}</span></a>
+            <a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick( $event )" [routerLink]="['./']" fragment="{{ item.fragment }}">{{ item.title }} <span>{{ item.category }}</span></a>
             <div class="endpoint-content">
               <div class="endpoint">
                 <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
diff --git a/frontend/src/app/components/docs/api-docs.component.scss b/frontend/src/app/components/docs/api-docs.component.scss
index 35ec9e423..ce74cd951 100644
--- a/frontend/src/app/components/docs/api-docs.component.scss
+++ b/frontend/src/app/components/docs/api-docs.component.scss
@@ -239,4 +239,8 @@ h3 {
   h3 {
     display: none;
   }
+  
+  .doc-item-container:last-of-type .endpoint-container {
+    margin-bottom: 4rem;
+  }
 }
diff --git a/frontend/src/app/components/docs/api-docs.component.ts b/frontend/src/app/components/docs/api-docs.component.ts
index 32ef12741..39f611310 100644
--- a/frontend/src/app/components/docs/api-docs.component.ts
+++ b/frontend/src/app/components/docs/api-docs.component.ts
@@ -34,7 +34,9 @@ export class ApiDocsComponent implements OnInit {
   ngAfterViewInit() {
     const that = this;
     setTimeout( () => {
-      this.openEndpointContainer( this.route.snapshot.fragment );
+      if( this.route.snapshot.fragment ) {
+        this.openEndpointContainer( this.route.snapshot.fragment );
+      }
       window.addEventListener('scroll', function() {
         that.desktopDocsNavPosition = ( window.pageYOffset > 182 ) ? "fixed" : "relative";
       });
@@ -73,7 +75,16 @@ export class ApiDocsComponent implements OnInit {
   }
 
   anchorLinkClick( event: any ) {
-    const targetId = event.target.hash.substring(1);
+    let targetId = "";
+    if( event.target.nodeName === "A" ) {
+      targetId = event.target.hash.substring(1);
+    } else {
+      let element = event.target;
+      while( element.nodeName !== "A" ) {
+        element = element.parentElement;
+      }
+      targetId = element.hash.substring(1);
+    }
     if( this.route.snapshot.fragment === targetId ) {
       document.getElementById( targetId ).scrollIntoView();
     }
@@ -81,6 +92,7 @@ export class ApiDocsComponent implements OnInit {
   }
 
   openEndpointContainer( targetId ) {
+    const tabHeaderHeight = document.getElementById( targetId + "-tab-header" ).scrollHeight;
     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" );
@@ -92,8 +104,8 @@ export class ApiDocsComponent implements OnInit {
         endpointContentEl.style.opacity = "0";
         endpointContentEl.classList.remove( "open" );
       } else {
-        endpointContainerEl.style.height = endPointContentElHeight + 90 + "px";
-        endpointContentEl.style.top = "90px";
+        endpointContainerEl.style.height = endPointContentElHeight + tabHeaderHeight + 28 + "px";
+        endpointContentEl.style.top = tabHeaderHeight + 28 + "px";
         endpointContentEl.style.opacity = "1";
         endpointContentEl.classList.add( "open" );
       }

From 88c50f7107e0c8cd807a15e2ef251b22586c7e3b Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Tue, 12 Apr 2022 15:33:24 -0400
Subject: [PATCH 08/10] Resolve conflict resulting from 315b759

---
 frontend/src/app/components/docs/docs.component.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/app/components/docs/docs.component.ts b/frontend/src/app/components/docs/docs.component.ts
index 042ed435b..89bbd48b7 100644
--- a/frontend/src/app/components/docs/docs.component.ts
+++ b/frontend/src/app/components/docs/docs.component.ts
@@ -32,5 +32,10 @@ export class DocsComponent implements OnInit {
     this.env = this.stateService.env;
     this.showWebSocketTab = ( ! ( ( this.stateService.network === "bisq" ) || ( this.stateService.network === "liquidtestnet" ) ) );
     this.showFaqTab = ( this.env.BASE_MODULE === 'mempool' ) ? true : false;
+    document.querySelector<HTMLElement>( "html" ).style.scrollBehavior = "smooth";
+  }
+
+  ngOnDestroy(): void {
+    document.querySelector<HTMLElement>( "html" ).style.scrollBehavior = "auto";
   }
 }

From e50b58b8aa1716df03dedb7e73c8ffe7b8b2f679 Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Tue, 12 Apr 2022 15:58:20 -0400
Subject: [PATCH 09/10] Add live mempool blocks to faq (h/t @softsimon)

---
 frontend/src/app/components/docs/api-docs-data.ts    |  2 +-
 .../src/app/components/docs/api-docs.component.html  |  9 ++++++---
 .../src/app/components/docs/api-docs.component.scss  | 12 +++++++++++-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/docs/api-docs-data.ts b/frontend/src/app/components/docs/api-docs-data.ts
index a369ac63b..3e7d442c7 100644
--- a/frontend/src/app/components/docs/api-docs-data.ts
+++ b/frontend/src/app/components/docs/api-docs-data.ts
@@ -4433,7 +4433,7 @@ export const faqData = [
     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 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",
diff --git a/frontend/src/app/components/docs/api-docs.component.html b/frontend/src/app/components/docs/api-docs.component.html
index f33c777c9..6cb5839a0 100644
--- a/frontend/src/app/components/docs/api-docs.component.html
+++ b/frontend/src/app/components/docs/api-docs.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="{ val: network$ | async } as network">
   <div class="container-xl text-left">
-  
+
     <div id="faq" *ngIf="whichTab === 'faq'">
 
       <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>
             <div class="endpoint-content">
               <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 id="restAPI" *ngIf="whichTab === 'rest'">
diff --git a/frontend/src/app/components/docs/api-docs.component.scss b/frontend/src/app/components/docs/api-docs.component.scss
index ce74cd951..91c85c346 100644
--- a/frontend/src/app/components/docs/api-docs.component.scss
+++ b/frontend/src/app/components/docs/api-docs.component.scss
@@ -187,6 +187,16 @@ h3 {
   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) {
 
   .hide-on-mobile {
@@ -239,7 +249,7 @@ h3 {
   h3 {
     display: none;
   }
-  
+
   .doc-item-container:last-of-type .endpoint-container {
     margin-bottom: 4rem;
   }

From 01f474628a19f9c24c237b5380e4e49383db49da Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Tue, 12 Apr 2022 18:06:32 -0400
Subject: [PATCH 10/10] Add websocket service to avoid issues with blocks

---
 frontend/src/app/components/docs/docs.component.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/docs/docs.component.ts b/frontend/src/app/components/docs/docs.component.ts
index 3b18c1891..2d0d0b55a 100644
--- a/frontend/src/app/components/docs/docs.component.ts
+++ b/frontend/src/app/components/docs/docs.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, HostBinding } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Env, StateService } from 'src/app/services/state.service';
+import { WebsocketService } from 'src/app/services/websocket.service';
 
 @Component({
   selector: 'app-docs',
@@ -19,9 +20,11 @@ export class DocsComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private stateService: StateService,
+    private websocket: WebsocketService,
   ) { }
 
   ngOnInit(): void {
+    this.websocket.want(['blocks']);
     const url = this.route.snapshot.url;
     if( url[1].path === "faq" ) {
         this.activeTab = 0;
@@ -34,7 +37,7 @@ export class DocsComponent implements OnInit {
     this.env = this.stateService.env;
     this.showWebSocketTab = ( ! ( ( this.stateService.network === "bisq" ) || ( this.stateService.network === "liquidtestnet" ) ) );
     this.showFaqTab = ( this.env.BASE_MODULE === 'mempool' ) ? true : false;
-    
+
     document.querySelector<HTMLElement>( "html" ).style.scrollBehavior = "smooth";
   }