New API docummentation. (#544)

* Install hljs package.

* Add highlight.js stylesheet and js to index.html.

* Add new instructions for API documentation.

* Add network value to code-template component.

* Add curl examples.

* Fix tab order of bisq api page.

* Add esmodules instalation instructions.
Add external links to repositories.

* Add self-hosted hljs styles.

* Add response code examples.
Add dynamic networks to curl examples.
Remove reponse code box if not needed.

* Self hosted highlight.min.js.

* Bumping "ws" dependency to fix vulnerability.

* npm audit fix

* npm audit fix

* Remove Hightlight.js dependency.
Add new style to code-template-component.

* Remove hljs css.

* Change NgbModule and NgbAccordionModule  to shared

* Fix NgbAccordionModule import.

frontend/package-lock.json

@@ -5040,7 +5040,6 @@
       "integrity": "sha512-ctjwuntPfZZT2mNj2NDIVu51t9cvbhl/16epc5xEwyzyDt76pX9UgwvY+MbXrf/C/FWwdtmNtfP698BKI+9leQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "tslib": "^1.10.0"
       }
@@ -5050,7 +5049,6 @@
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.0.0.tgz",
       "integrity": "sha512-6Pxgsrf0qF9iFFqmIcWmjJGkkCaCm6V5QNnxMy2KloO3SDq6QuMVRbN9RtC8Urmo25LP+eZ6ZgYqFYpdD8Hd9w==",
       "dev": true,
-      "peer": true,
       "peerDependencies": {
         "rxjs": "^6.5.3",
         "tslib": "^1.10.0",
@@ -24159,6 +24157,8 @@
       "integrity": "sha512-cOyGQgMdhnRYtW2xrJUNrNYDjEgwQ+BrE2y93Bwz3h4DJ6vJRLfupemU5N3pbYsUlBHJf0u1j1UGk+NLW4d97g==",
       "dev": true,
       "requires": {
+        "@angular/compiler": "9.0.0",
+        "@angular/core": "9.0.0",
         "app-root-path": "^3.0.0",
         "aria-query": "^3.0.0",
         "axobject-query": "2.0.2",
@@ -24174,17 +24174,17 @@
       },
       "dependencies": {
         "@angular/compiler": {
-          "version": "https://registry.npmjs.org/@angular/compiler/-/compiler-9.0.0.tgz",
+          "version": "9.0.0",
+          "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-9.0.0.tgz",
           "integrity": "sha512-ctjwuntPfZZT2mNj2NDIVu51t9cvbhl/16epc5xEwyzyDt76pX9UgwvY+MbXrf/C/FWwdtmNtfP698BKI+9leQ==",
           "dev": true,
-          "peer": true,
           "requires": {}
         },
         "@angular/core": {
-          "version": "https://registry.npmjs.org/@angular/core/-/core-9.0.0.tgz",
+          "version": "9.0.0",
+          "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.0.0.tgz",
           "integrity": "sha512-6Pxgsrf0qF9iFFqmIcWmjJGkkCaCm6V5QNnxMy2KloO3SDq6QuMVRbN9RtC8Urmo25LP+eZ6ZgYqFYpdD8Hd9w==",
           "dev": true,
-          "peer": true,
           "requires": {}
         },
         "source-map": {

frontend/src/app/app.module.ts

@@ -47,6 +47,7 @@ import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontaweso
 import { faAngleDown, faAngleUp, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
   faLink, faList, faSearch, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faAngleDoubleUp, faChevronDown, faFileAlt } from '@fortawesome/free-solid-svg-icons';
 import { ApiDocsComponent } from './components/api-docs/api-docs.component';
+import { CodeTemplateComponent } from './components/api-docs/code-template.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
 import { StorageService } from './services/storage.service';
 import { HttpCacheInterceptor } from './services/http-cache.interceptor';
@@ -85,6 +86,7 @@ import { SponsorComponent } from './components/sponsor/sponsor.component';
     FeesBoxComponent,
     DashboardComponent,
     ApiDocsComponent,
+    CodeTemplateComponent,
     TermsOfServiceComponent,
     SponsorComponent,
   ],

frontend/src/app/components/api-docs/api-docs.component.scss

@@ -14,3 +14,59 @@ tr {
 .nowrap {
   white-space: nowrap;
 }
+
+li.nav-item {
+  width: 100%;
+  @media (min-width: 676px){
+    width: auto;
+  }
+}
+
+.nav-tabs .nav-link.active {
+  border-bottom: 1px solid #fff;
+  @media (min-width: 676px){
+    border-bottom: 1px solid #11131f;
+  }
+}
+
+.code-tab { 
+  width: auto;
+  margin: 20px auto 10px;
+  li.nav-item {
+    width: auto;
+  }
+
+}
+
+.code {
+  .tab-content {
+    padding: 0px;
+  }
+  .nav-tabs .nav-link.active {
+    border-bottom: 1px solid #11131f;
+  }
+  .subtitle {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.description {
+  margin-top: 20px;
+}
+.title {
+  font-weight: bold;
+  color: #ffffff;
+  font-size: 1.25rem;
+}
+.subtitle {
+  font-weight: bold;
+}
+.divider {
+  width: 100%;
+  margin: 30px auto;
+  height: 1px;
+  background: #333;
+}
+.websocket {
+  padding: 15px;
+}

frontend/src/app/components/api-docs/code-template.component.html

@@ -0,0 +1,39 @@
+<div class="code">
+  <ul ngbNav #navCodeTemplate="ngbNav" class="nav-tabs code-tab">
+    <li ngbNavItem>
+      <a ngbNavLink>ES Module</a>
+      <ng-template ngbNavContent>
+        <div class="subtitle">Install Package <app-clipboard [text]="esModuleInstall"></app-clipboard></div>
+        <div class="links">
+          <a href="https://github.com/mempool/mempool.js">github repository</a>
+          <a href="https://www.npmjs.org/package/@mempool/mempool.js">npm package</a>
+        </div>
+        <pre><code [innerText]="esModuleInstall"></code></pre>
+        <div class="subtitle">Code Example <app-clipboard [text]="wrapESmodule(code.codeSample.esModule)"></app-clipboard></div>
+        <pre><code [innerText]="wrapESmodule(code.codeSample.esModule)"></code></pre>
+      </ng-template>
+    </li>
+    <li ngbNavItem>
+      <a ngbNavLink>Common JS</a>
+      <ng-template ngbNavContent>
+        <div class="subtitle">Code Example <app-clipboard [text]="wrapCommonJS(code.codeSample.commonJS)"></app-clipboard></div>
+        <div class="links">
+          <a href="https://github.com/mempool/mempool.js">github repository</a>
+        </div>
+        <pre><code [innerText]="wrapCommonJS(code.codeSample.commonJS)"></code></pre>
+      </ng-template>
+    </li>
+    <li ngbNavItem *ngIf="code.codeSample.curl">
+      <a ngbNavLink>CURL</a>
+      <ng-template ngbNavContent>
+        <div class="subtitle">Code Example <app-clipboard [text]="wrapCurl(code.codeSample.curl)"></app-clipboard></div>
+        <pre><code [innerText]="wrapCurl(code.codeSample.curl)"></code></pre>
+      </ng-template>
+    </li>
+  </ul>
+  <div [ngbNavOutlet]="navCodeTemplate"></div>
+  <div *ngIf="code.responseSample" class="response">
+    <div class="subtitle">Response <app-clipboard [text]="code.responseSample"></app-clipboard></div>
+    <pre><code [innerText]="code.responseSample"></code></pre>
+  </div>
+</div>

frontend/src/app/components/api-docs/code-template.component.scss

@@ -0,0 +1,91 @@
+.text-small {
+  font-size: 12px;
+}
+
+code {
+  background-color: #1d1f31;
+  font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
+}
+
+tr {
+  white-space: inherit;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+li.nav-item {
+  width: 100%;
+  @media (min-width: 676px){
+    width: auto;
+  }
+}
+
+.nav-tabs .nav-link.active {
+  border-bottom: 1px solid #fff;
+  @media (min-width: 676px){
+    border-bottom: 1px solid #11131f;
+  }
+}
+
+.code-tab { 
+  width: auto;
+  margin: 20px auto 10px;
+  li.nav-item {
+    width: auto;
+  }
+
+}
+
+.code {
+  .tab-content {
+    padding: 0px;
+  }
+  .nav-tabs .nav-link.active {
+    border-bottom: 1px solid #11131f;
+  }
+  .subtitle {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.description {
+  margin-top: 20px;
+}
+.title {
+  font-weight: bold;
+  color: #ffffff;
+  font-size: 1.25rem;
+}
+.subtitle {
+  font-weight: bold;
+}
+.divider {
+  width: 100%;
+  margin: 30px auto;
+  height: 1px;
+  background: #333;
+}
+.websocket {
+  padding: 15px;
+}
+
+.links {
+  margin-bottom: 5px;
+  a {
+    font-size: 14px;
+    margin: 0px 10px 0px 0px;
+  }
+}
+
+pre {
+  display: block;
+  font-size: 87.5%;
+  color: #f18920;
+  background-color: #1d1f31;
+  padding: 30px;
+  code{
+    background-color: transparent;
+  }
+}

frontend/src/app/components/api-docs/code-template.component.ts

@@ -0,0 +1,84 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-code-template',
+  templateUrl: './code-template.component.html',
+  styleUrls: ['./code-template.component.scss']
+})
+export class CodeTemplateComponent {
+  @Input() network: string;
+  @Input() code: {
+    codeSample: {
+      esModule: string;
+      commonJS: string;
+      curl: string;
+    },
+    responseSample: string;
+  };
+  hostname = document.location.hostname;
+  esModuleInstall = `# npm
+npm install @mempool/mempool.js --save
+
+# yarn
+yarn add @mempool/mempool.js`;
+
+  constructor(
+  ) { }
+
+  normalizeCodeHostname(code: string) {
+    let codeText: string;
+    if (this.network === 'bisq' || this.network === 'liquid'){
+      codeText = code.replace('%{1}', this.network);
+    }else{
+      codeText = code.replace('%{1}', 'bitcoin');
+    }
+    return codeText;
+  }
+
+  wrapESmodule(code: string) {
+    let codeText = this.normalizeCodeHostname(code);
+
+    if (this.network && this.network !== 'mainnet') {
+      codeText = codeText.replace('mempoolJS();', `mempoolJS({
+    hostname: '${this.hostname}/${this.network}'
+  });` );
+    }
+
+    return `import mempoolJS from "@mempool/mempool.js";
+
+const init = async () => {
+  ${codeText}
+};
+init();`;
+  }
+
+  wrapCommonJS(code: string) {
+    let codeText = this.normalizeCodeHostname(code);
+
+    if (this.network && this.network !== 'mainnet') {
+      codeText = codeText.replace('mempoolJS();', `mempoolJS({
+          hostname: '${this.hostname}/${this.network}'
+        });` );
+    }
+    return `<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://mempool.space/mempool.js"></script>
+    <script>
+      const init = async () => {
+        ${codeText}
+      };
+      init();
+    </script>
+  </head>
+  <body></body>
+</html>`;
+  }
+  wrapCurl(code: string) {
+    if (this.network && this.network !== 'mainnet') {
+      return code.replace('mempool.space/', `mempool.space/${this.network}/`);
+    }
+    return code;
+  }
+
+}

frontend/src/app/shared/shared.module.ts

@@ -14,7 +14,7 @@ import { TimeSinceComponent } from '../components/time-since/time-since.componen
 import { ClipboardComponent } from '../components/clipboard/clipboard.component';
 import { QrcodeComponent } from '../components/qrcode/qrcode.component';
 import { FiatComponent } from '../fiat/fiat.component';
-import { NgbNavModule, NgbTooltipModule, NgbButtonsModule, NgbPaginationModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule, NgbTooltipModule, NgbButtonsModule, NgbPaginationModule, NgbDropdownModule, NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
 import { TxFeaturesComponent } from '../components/tx-features/tx-features.component';
 import { TxFeeRatingComponent } from '../components/tx-fee-rating/tx-fee-rating.component';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -50,11 +50,13 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
     NgbButtonsModule,
     NgbPaginationModule,
     NgbDropdownModule,
+    NgbAccordionModule,
   ],
   providers: [
     VbytesPipe,
   ],
   exports: [
+    NgbAccordionModule,
     NgbNavModule,
     CommonModule,
     ReactiveFormsModule,

frontend/src/styles.scss

@@ -54,7 +54,7 @@ html, body {
 
 body {
   background-color: #11131f;
-  min-width: 320px;
+  min-width: 375px;
   padding-bottom: 60px;
 }
 
@@ -631,3 +631,41 @@ th {
 		max-width: 480px;
 	}
 }
+
+.tab-pane {
+  .card {
+    background-color: transparent;
+    padding: 0;
+  
+    button {
+      text-align: left;
+      display: block;
+      width: 100%;
+      padding: 1rem 2rem;
+      color: #fff;
+      font-weight: bold;
+      &:focus, &:hover, &:active {
+        text-decoration: none;
+        outline: none;
+        box-shadow: none;
+      }
+    }
+  
+    .card-header {
+      padding: 0;
+    }
+  
+    .collapsed{
+      background-color: #2d3348;
+      color: #1bd8f4;
+    }
+  }
+  
+  .subtitle {
+    font-weight: bold;
+    margin-bottom: 3px;
+    button {
+      padding: 0px !important;
+    }
+  }
+}