Add new documentation for Liquid and Bisq.

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

@@ -12,7 +12,7 @@
       <ng-template ngbNavContent>
         <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapCommonJS(code.codeSample.commonJS)"></app-clipboard></div>
         <div class="links">
-          <a href="https://github.com/mempool/mempool.js" target="_blank">github repository</a>
+          <a [href]="npmGithubLink()" target="_blank">github repository</a>
         </div>
         <pre><code [innerText]="wrapCommonJS(code.codeSample.commonJS)"></code></pre>
       </ng-template>
@@ -20,12 +20,12 @@
     <li ngbNavItem>
       <a ngbNavLink>ES Module</a>
       <ng-template ngbNavContent>
-        <div class="subtitle"><ng-container i18n="API Docs install lib">Install Package</ng-container> <app-clipboard [text]="esModuleInstall"></app-clipboard></div>
+        <div class="subtitle"><ng-container i18n="API Docs install lib">Install Package</ng-container> <app-clipboard [text]="wrapImportTemplate()"></app-clipboard></div>
         <div class="links">
-          <a href="https://github.com/mempool/mempool.js" target="_blank">github repository</a>
-          <a href="https://www.npmjs.org/package/@mempool/mempool.js" target="_blank">npm package</a>
+          <a [href]="npmGithubLink()" target="_blank">github repository</a>
+          <a [href]="npmModuleLink()" target="_blank">npm package</a>
         </div>
-        <pre><code [innerText]="esModuleInstall"></code></pre>
+        <pre><code [innerText]="wrapImportTemplate()"></code></pre>
         <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapESmodule(code.codeSample.esModule)"></app-clipboard></div>
         <pre><code [innerText]="wrapESmodule(code.codeSample.esModule)"></code></pre>
       </ng-template>

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

@@ -7,6 +7,7 @@ import { Component, Input } from '@angular/core';
 })
 export class CodeTemplateComponent {
   @Input() network: string;
+  @Input() layer: string;
   @Input() code: {
     codeSample: {
       esModule: string;
@@ -16,15 +17,32 @@ export class CodeTemplateComponent {
     responseSample: string;
   };
   hostname = document.location.hostname;
-  esModuleInstall = `# npm
-npm install @mempool/mempool.js --save
-
-# yarn
-yarn add @mempool/mempool.js`;
 
   constructor(
   ) { }
 
+  npmGithubLink(){
+    let npmLink = `https://github.com/mempool/mempool.js`;
+    if (this.layer === 'bisq') {
+      npmLink = `https://github.com/mempool/mempool.js/tree/main/npm-bisq-js`;
+    }
+    if (this.layer === 'liquid') {
+      npmLink = `https://github.com/mempool/mempool.js/tree/main/npm-liquid-js`;
+    }
+    return npmLink;
+  }
+
+  npmModuleLink() {
+    let npmLink = `https://www.npmjs.org/package/@mempool/mempool.js`;
+    if (this.layer === 'bisq') {
+      npmLink = `https://www.npmjs.org/package/@mempool/bisq.js`;
+    }
+    if (this.layer === 'liquid') {
+      npmLink = `https://www.npmjs.org/package/@mempool/liquid.js`;
+    }
+    return npmLink;
+  }
+
   normalizeCodeHostname(code: string) {
     let codeText: string;
     if (this.network === 'bisq' || this.network === 'liquid'){
@@ -44,7 +62,15 @@ yarn add @mempool/mempool.js`;
   });` );
     }
 
-    return `import mempoolJS from "@mempool/mempool.js";
+    let importText = `import mempoolJS from "@mempool/mempool.js";`;
+    if (this.layer === 'bisq') {
+      importText = `import bisqJS from "@mempool/bisq.js";`;
+    }
+    if (this.layer === 'liquid') {
+      importText = `import liquidJS from "@mempool/liquid.js";`;
+    }
+
+    return `${importText}
 
 const init = async () => {
   ${codeText}
@@ -60,10 +86,18 @@ init();`;
           hostname: '${this.hostname}/${this.network}'
         });` );
     }
+
+    let importText = `<script src="https://mempool.space/mempool.js"></script>`;
+    if (this.layer === 'bisq') {
+      importText = `<script src="https://bisq.markets/bisq.js"></script>`;
+    }
+    if (this.layer === 'liquid') {
+      importText = `<script src="https://liquid.network/liquid.js"></script>`;
+    }
     return `<!DOCTYPE html>
 <html>
   <head>
-    <script src="https://mempool.space/mempool.js"></script>
+    ${importText}
     <script>
       const init = async () => {
         ${codeText}
@@ -81,4 +115,31 @@ init();`;
     return code;
   }
 
+  wrapImportTemplate() {
+
+    let importTemplate = `# npm
+npm install @mempool/mempool.js --save
+
+# yarn
+yarn add @mempool/mempool.js`;
+
+    if (this.layer === 'bisq') {
+      importTemplate = `# npm
+npm install @mempool/bisq.js --save
+
+# yarn
+yarn add @mempool/bisq.js`;
+    }
+
+    if (this.layer === 'liquid') {
+      importTemplate = `# npm
+npm install @mempool/liquid.js --save
+
+# yarn
+yarn add @mempool/liquid.js`;
+    }
+
+    return importTemplate;
+  }
+
 }