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] 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;
   }