Merge pull request #764 from mempool/simon/electrum-error-msg-fix

Handle string error messages.

backend/src/api/bitcoin/electrum-api.ts

@@ -93,7 +93,7 @@ class BitcoindElectrsApi extends BitcoinApi implements AbstractBitcoinApi {
       if (e === 'failed to get confirmed status') {
         e = 'The number of transactions on this address exceeds the Electrum server limit';
       }
-      throw new Error(e instanceof Error ? e.message : 'Error');
+      throw new Error(typeof e === 'string' ? e : 'Error');
     }
   }
 
@@ -131,7 +131,7 @@ class BitcoindElectrsApi extends BitcoinApi implements AbstractBitcoinApi {
       if (e === 'failed to get confirmed status') {
         e = 'The number of transactions on this address exceeds the Electrum server limit';
       }
-      throw new Error(e instanceof Error ? e.message : 'Error');
+      throw new Error(typeof e === 'string' ? e : 'Error');
     }
   }
 

frontend/package-lock.json

@@ -2412,19 +2412,18 @@
       "dev": true
     },
     "node_modules/@npmcli/git": {
-      "version": "2.0.6",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/git/-/git-2.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/@npmcli/git/-/git-2.1.0.tgz",
-      "integrity": "sha512-a1MnTfeRPBaKbFY07fd+6HugY1WAkKJzdiJvlRub/9o5xz2F/JtPacZZapx5zRJUQFIzSL677vmTSxEcDMrDbg==",
+      "integrity": "sha512-/hBFX/QG1b+N7PZBFs0bi+evgRZcK9nWBxQKZkGoXUT5hJSwl5c4d7y8/hm+NQZRPhQ67RzFaj5UM9YeyKoryw==",
       "dev": true,
       "dependencies": {
-        "@npmcli/promise-spawn": "^1.1.0",
+        "@npmcli/promise-spawn": "^1.3.2",
         "lru-cache": "^6.0.0",
-        "mkdirp": "^1.0.3",
+        "mkdirp": "^1.0.4",
-        "npm-pick-manifest": "^6.0.0",
+        "npm-pick-manifest": "^6.1.1",
         "promise-inflight": "^1.0.1",
         "promise-retry": "^2.0.1",
-        "semver": "^7.3.2",
+        "semver": "^7.3.5",
-        "unique-filename": "^1.1.1",
         "which": "^2.0.2"
       }
     },
@@ -2434,6 +2433,18 @@
       "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
       "dev": true
     },
+    "node_modules/@npmcli/git/node_modules/hosted-git-info": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.2.tgz",
+      "integrity": "sha512-c9OGXbZ3guC/xOlCg1Ci/VgWlwsqDv1yMQL1CWqXDL0hDjXuNcq0zuR4xqPSuasI3kqFDhqSyTjREz5gzq0fXg==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@npmcli/git/node_modules/mkdirp": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
@@ -2446,6 +2457,32 @@
         "node": ">=10"
       }
     },
+    "node_modules/@npmcli/git/node_modules/npm-package-arg": {
+      "version": "8.1.5",
+      "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.5.tgz",
+      "integrity": "sha512-LhgZrg0n0VgvzVdSm1oiZworPbTxYHUJCgtsJW8mGvlDpxTM1vSJc3m5QZeUkhAHIzbz3VCHd/R4osi1L1Tg/Q==",
+      "dev": true,
+      "dependencies": {
+        "hosted-git-info": "^4.0.1",
+        "semver": "^7.3.4",
+        "validate-npm-package-name": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@npmcli/git/node_modules/npm-pick-manifest": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-6.1.1.tgz",
+      "integrity": "sha512-dBsdBtORT84S8V8UTad1WlUyKIY9iMsAmqxHbLdeEeBNMLQDlDWWra3wYUx9EBEIiG/YwAy0XyNHDd2goAsfuA==",
+      "dev": true,
+      "dependencies": {
+        "npm-install-checks": "^4.0.0",
+        "npm-normalize-package-bin": "^1.0.1",
+        "npm-package-arg": "^8.1.2",
+        "semver": "^7.3.4"
+      }
+    },
     "node_modules/@npmcli/git/node_modules/promise-retry": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
@@ -12864,9 +12901,9 @@
       }
     },
     "node_modules/path-parse": {
-      "version": "1.0.6",
+      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-platform": {
       "version": "0.11.15",
@@ -16477,9 +16514,9 @@
       }
     },
     "node_modules/tar": {
-      "version": "6.1.6",
+      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
-      "integrity": "sha512-oaWyu5dQbHaYcyZCTfyPpC+VmI62/OM2RTUYavTk1MDr1cwW5Boi3baeYQKiZbY2uSQJGr+iMOzb/JFxLrft+g==",
+      "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
       "dev": true,
       "dependencies": {
         "chownr": "^2.0.0",
@@ -17489,9 +17526,9 @@
       }
     },
     "node_modules/url-parse": {
-      "version": "1.5.1",
+      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
-      "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==",
+      "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
       "devOptional": true,
       "dependencies": {
         "querystringify": "^2.1.1",
@@ -22008,19 +22045,18 @@
       "dev": true
     },
     "@npmcli/git": {
-      "version": "2.0.6",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/git/-/git-2.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/@npmcli/git/-/git-2.1.0.tgz",
-      "integrity": "sha512-a1MnTfeRPBaKbFY07fd+6HugY1WAkKJzdiJvlRub/9o5xz2F/JtPacZZapx5zRJUQFIzSL677vmTSxEcDMrDbg==",
+      "integrity": "sha512-/hBFX/QG1b+N7PZBFs0bi+evgRZcK9nWBxQKZkGoXUT5hJSwl5c4d7y8/hm+NQZRPhQ67RzFaj5UM9YeyKoryw==",
       "dev": true,
       "requires": {
-        "@npmcli/promise-spawn": "^1.1.0",
+        "@npmcli/promise-spawn": "^1.3.2",
         "lru-cache": "^6.0.0",
-        "mkdirp": "^1.0.3",
+        "mkdirp": "^1.0.4",
-        "npm-pick-manifest": "^6.0.0",
+        "npm-pick-manifest": "^6.1.1",
         "promise-inflight": "^1.0.1",
         "promise-retry": "^2.0.1",
-        "semver": "^7.3.2",
+        "semver": "^7.3.5",
-        "unique-filename": "^1.1.1",
         "which": "^2.0.2"
       },
       "dependencies": {
@@ -22030,12 +22066,44 @@
           "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
           "dev": true
         },
+        "hosted-git-info": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.2.tgz",
+          "integrity": "sha512-c9OGXbZ3guC/xOlCg1Ci/VgWlwsqDv1yMQL1CWqXDL0hDjXuNcq0zuR4xqPSuasI3kqFDhqSyTjREz5gzq0fXg==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
         "mkdirp": {
           "version": "1.0.4",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
           "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
           "dev": true
         },
+        "npm-package-arg": {
+          "version": "8.1.5",
+          "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.5.tgz",
+          "integrity": "sha512-LhgZrg0n0VgvzVdSm1oiZworPbTxYHUJCgtsJW8mGvlDpxTM1vSJc3m5QZeUkhAHIzbz3VCHd/R4osi1L1Tg/Q==",
+          "dev": true,
+          "requires": {
+            "hosted-git-info": "^4.0.1",
+            "semver": "^7.3.4",
+            "validate-npm-package-name": "^3.0.0"
+          }
+        },
+        "npm-pick-manifest": {
+          "version": "6.1.1",
+          "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-6.1.1.tgz",
+          "integrity": "sha512-dBsdBtORT84S8V8UTad1WlUyKIY9iMsAmqxHbLdeEeBNMLQDlDWWra3wYUx9EBEIiG/YwAy0XyNHDd2goAsfuA==",
+          "dev": true,
+          "requires": {
+            "npm-install-checks": "^4.0.0",
+            "npm-normalize-package-bin": "^1.0.1",
+            "npm-package-arg": "^8.1.2",
+            "semver": "^7.3.4"
+          }
+        },
         "promise-retry": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
@@ -30884,9 +30952,9 @@
       "dev": true
     },
     "path-parse": {
-      "version": "1.0.6",
+      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "path-platform": {
       "version": "0.11.15",
@@ -33897,9 +33965,9 @@
       "dev": true
     },
     "tar": {
-      "version": "6.1.6",
+      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
-      "integrity": "sha512-oaWyu5dQbHaYcyZCTfyPpC+VmI62/OM2RTUYavTk1MDr1cwW5Boi3baeYQKiZbY2uSQJGr+iMOzb/JFxLrft+g==",
+      "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
       "dev": true,
       "requires": {
         "chownr": "^2.0.0",
@@ -34741,9 +34809,9 @@
       }
     },
     "url-parse": {
-      "version": "1.5.1",
+      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
-      "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==",
+      "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
       "devOptional": true,
       "requires": {
         "querystringify": "^2.1.1",

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

@@ -1,20 +1,20 @@
 <div class="code">
   <ul ngbNav #navCodeTemplate="ngbNav" class="nav-tabs code-tab">
-    <li ngbNavItem *ngIf="code.codeSample.curl">
+    <li ngbNavItem *ngIf="code.codeTemplate.curl && method !== 'websocket'">
       <a ngbNavLink>cURL</a>
       <ng-template ngbNavContent>
-        <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapCurl(code.codeSample.curl)"></app-clipboard></div>
+        <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapCurlTemplate(code)"></app-clipboard></div>
-        <pre><code [innerText]="wrapCurl(code.codeSample.curl)"></code></pre>
+        <pre><code [innerText]="wrapCurlTemplate(code)"></code></pre>
       </ng-template>
     </li>
     <li ngbNavItem>
       <a ngbNavLink>CommonJS</a>
       <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="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapCommonJS(code)"></app-clipboard></div>
         <div class="links">
           <a [href]="npmGithubLink()" target="_blank">github repository</a>
         </div>
-        <pre><code [innerText]="wrapCommonJS(code.codeSample.commonJS)"></code></pre>
+        <pre><code [innerText]="wrapCommonJS(code)"></code></pre>
       </ng-template>
     </li>
     <li ngbNavItem>
@@ -26,14 +26,14 @@
           <a [href]="npmModuleLink()" target="_blank">npm package</a>
         </div>
         <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>
+        <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapEsModule(code)"></app-clipboard></div>
-        <pre><code [innerText]="wrapESmodule(code.codeSample.esModule)"></code></pre>
+        <pre><code [innerText]="wrapEsModule(code)"></code></pre>
       </ng-template>
     </li>
   </ul>
   <div [ngbNavOutlet]="navCodeTemplate"></div>
-  <div *ngIf="code.responseSample" class="response">
+  <div *ngIf="code.codeTemplate && wrapResponse(code) !== ''" class="response">
-    <div class="subtitle"><ng-container i18n="API Docs API response">Response</ng-container> <app-clipboard [text]="code.responseSample"></app-clipboard></div>
+    <div class="subtitle"><ng-container i18n="API Docs API response">Response</ng-container> <app-clipboard [text]="wrapResponse(code)"></app-clipboard></div>
-    <pre><code [innerText]="code.responseSample"></code></pre>
+    <pre><code [innerText]="wrapResponse(code)"></code></pre>
   </div>
 </div>

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

@@ -1,32 +1,32 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Env, StateService } from 'src/app/services/state.service';
 
 @Component({
   selector: 'app-code-template',
   templateUrl: './code-template.component.html',
   styleUrls: ['./code-template.component.scss']
 })
-export class CodeTemplateComponent {
+export class CodeTemplateComponent implements OnInit {
   @Input() network: string;
-  @Input() layer: string;
+  @Input() code: any;
-  @Input() code: {
+  @Input() hostname: string;
-    codeSample: {
+  @Input() method: 'get' | 'post' | 'websocket' = 'get';
-      esModule: string;
+  env: Env;
-      commonJS: string;
-      curl: string;
-    },
-    responseSample: string;
-  };
-  hostname = document.location.hostname;
 
   constructor(
+    private stateService: StateService,
   ) { }
 
+  ngOnInit(): void {
+    this.env = this.stateService.env;
+  }
+
   npmGithubLink(){
     let npmLink = `https://github.com/mempool/mempool.js`;
-    if (this.layer === 'bisq') {
+    if (this.network === 'bisq') {
       npmLink = `https://github.com/mempool/mempool.js/tree/main/npm-bisq-js`;
     }
-    if (this.layer === 'liquid') {
+    if (this.network === 'liquid') {
       npmLink = `https://github.com/mempool/mempool.js/tree/main/npm-liquid-js`;
     }
     return npmLink;
@@ -34,67 +34,153 @@ export class CodeTemplateComponent {
 
   npmModuleLink() {
     let npmLink = `https://www.npmjs.org/package/@mempool/mempool.js`;
-    if (this.layer === 'bisq') {
+    if (this.network === 'bisq') {
       npmLink = `https://www.npmjs.org/package/@mempool/bisq.js`;
     }
-    if (this.layer === 'liquid') {
+    if (this.network === 'liquid') {
       npmLink = `https://www.npmjs.org/package/@mempool/liquid.js`;
     }
     return npmLink;
   }
 
-  normalizeCodeHostname(code: string) {
+  normalizeHostsESModule(codeText: string) {
-    let codeText: string;
+    if (this.env.BASE_MODULE === 'mempool') {
-    if (this.network === 'bisq' || this.network === 'liquid'){
+      if (['liquid', 'bisq'].includes(this.network)) {
-      codeText = code.replace('%{1}', this.network);
+        codeText = codeText.replace('%{0}', this.network);
-    }else{
+      } else {
-      codeText = code.replace('%{1}', 'bitcoin');
+        codeText = codeText.replace('%{0}', 'bitcoin');
+      }
+      if(['', 'main', 'liquid', 'bisq'].includes(this.network)) {
+        codeText = codeText.replace('mempoolJS();', `mempoolJS({
+    hostname: '${document.location.hostname}'
+  });`);
+      } else {
+        codeText = codeText.replace('mempoolJS();', `mempoolJS({
+    hostname: '${document.location.hostname}',
+    network: '${this.network}'
+  });`);
+      }
+    }
+
+    if (this.env.BASE_MODULE === 'bisq') {
+      codeText = codeText.replace('} = mempoolJS();', ` = bisqJS();`);
+      codeText = codeText.replace('{ %{0}: ', '');
+    }
+
+    if (this.env.BASE_MODULE === 'liquid') {
+      codeText = codeText.replace('} = mempoolJS();', ` = liquidJS();`);
+      codeText = codeText.replace('{ %{0}: ', '');
     }
     return codeText;
   }
 
-  wrapESmodule(code: string) {
+  normalizeHostsCommonJS(codeText: string) {
-    let codeText = this.normalizeCodeHostname(code);
+    if (this.env.BASE_MODULE === 'mempool') {
-
+      if (['liquid', 'bisq'].includes(this.network)) {
-    if (this.network && this.network !== 'mainnet') {
+        codeText = codeText.replace('%{0}', this.network);
-      codeText = codeText.replace('mempoolJS();', `mempoolJS({
+      } else {
-    hostname: '${this.hostname}/${this.network}'
+        codeText = codeText.replace('%{0}', 'bitcoin');
-  });` );
+      }
+      if(['', 'main', 'liquid', 'bisq'].includes(this.network)) {
+        codeText = codeText.replace('mempoolJS();', `mempoolJS({
+          hostname: '${document.location.hostname}'
+        });`);
+      } else {
+        codeText = codeText.replace('mempoolJS();', `mempoolJS({
+          hostname: '${document.location.hostname}',
+          network: '${this.network}'
+        });`);
+      }
     }
 
-    let importText = `import mempoolJS from "@mempool/mempool.js";`;
+    if (this.env.BASE_MODULE === 'bisq') {
-    if (this.layer === 'bisq') {
+      codeText = codeText.replace('} = mempoolJS();', ` = bisqJS();`);
-      importText = `import bisqJS from "@mempool/bisq.js";`;
+      codeText = codeText.replace('{ %{0}: ', '');
-    }
-    if (this.layer === 'liquid') {
-      importText = `import liquidJS from "@mempool/liquid.js";`;
     }
 
-    return `${importText}
+    if (this.env.BASE_MODULE === 'liquid') {
+      codeText = codeText.replace('} = mempoolJS();', ` = liquidJS();`);
+      codeText = codeText.replace('{ %{0}: ', '');
+    }
+    return codeText;
+  }
+
+  wrapEsModule(code: any) {
+    let codeText: string;
+    if (code.codeTemplate) {
+      codeText = this.normalizeHostsESModule(code.codeTemplate.esModule);
+
+      if(this.network === '' || this.network === 'main') {
+        codeText = this.replaceJSPlaceholder(codeText, code.codeSampleMainnet.esModule);
+      }
+      if (this.network === 'testnet') {
+      codeText = this.replaceJSPlaceholder(codeText, code.codeSampleTestnet.esModule);
+      }
+      if (this.network === 'signet') {
+        codeText = this.replaceJSPlaceholder(codeText, code.codeSampleSignet.esModule);
+      }
+      if (this.network === 'liquid') {
+        codeText = this.replaceJSPlaceholder(codeText, code.codeSampleLiquid.esModule);
+      }
+      if (this.network === 'bisq') {
+        codeText = this.replaceJSPlaceholder(codeText, code.codeSampleBisq.esModule);
+      }
+
+      let importText = `import mempoolJS from "@mempool/mempool.js";`;
+      if (this.env.BASE_MODULE === 'bisq') {
+        importText = `import bisqJS from "@mempool/bisq.js";`;
+      }
+      if (this.env.BASE_MODULE === 'liquid') {
+        importText = `import liquidJS from "@mempool/liquid.js";`;
+      }
+
+      return `${importText}
 
 const init = async () => {
   ${codeText}
 };
 init();`;
+    }
   }
 
-  wrapCommonJS(code: string) {
+  wrapCommonJS(code: any) {
-    let codeText = this.normalizeCodeHostname(code);
+    let codeText: string;
+    if (code.codeTemplate) {
+      codeText = this.normalizeHostsCommonJS(code.codeTemplate.commonJS);
 
-    if (this.network && this.network !== 'mainnet') {
+      if(this.network === '' || this.network === 'main') {
-      codeText = codeText.replace('mempoolJS();', `mempoolJS({
+        codeText = this.replaceJSPlaceholder(codeText, code.codeSampleMainnet.esModule);
-          hostname: '${this.hostname}/${this.network}'
+      }
-        });` );
+      if (this.network === 'testnet') {
-    }
+      codeText = this.replaceJSPlaceholder(codeText, code.codeSampleTestnet.esModule);
+      }
+      if (this.network === 'signet') {
+        codeText = this.replaceJSPlaceholder(codeText, code.codeSampleSignet.esModule);
+      }
+      if (this.network === 'liquid') {
+        codeText = this.replaceJSPlaceholder(codeText, code.codeSampleLiquid.esModule);
+      }
+      if (this.network === 'bisq') {
+        codeText = this.replaceJSPlaceholder(codeText, code.codeSampleBisq.esModule);
+      }
 
-    let importText = `<script src="https://mempool.space/mempool.js"></script>`;
+      let importText = `<script src="https://mempool.space/mempool.js"></script>`;
-    if (this.layer === 'bisq') {
+      if (this.env.BASE_MODULE === 'bisq') {
-      importText = `<script src="https://bisq.markets/bisq.js"></script>`;
+        importText = `<script src="https://bisq.markets/bisq.js"></script>`;
-    }
+      }
-    if (this.layer === 'liquid') {
+      if (this.env.BASE_MODULE === 'liquid') {
-      importText = `<script src="https://liquid.network/liquid.js"></script>`;
+        importText = `<script src="https://liquid.network/liquid.js"></script>`;
-    }
+      }
-    return `<!DOCTYPE html>
+
+      let resultHtml = '<pre id="result"></pre>';
+      if (this.method === 'websocket') {
+        resultHtml = `<pre id="result-blocks"></pre>
+    <pre id="result-mempool-info"></pre>
+    <pre id="result-transactions"></pre>
+    <pre id="result-mempool-blocks"></pre>`;
+      }
+
+      return `<!DOCTYPE html>
 <html>
   <head>
     ${importText}
@@ -105,14 +191,11 @@ init();`;
       init();
     </script>
   </head>
-  <body></body>
+  <body>
+    ${resultHtml}
+  </body>
 </html>`;
-  }
-  wrapCurl(code: string) {
-    if (this.network && this.network !== 'mainnet') {
-      return code.replace('mempool.space/', `mempool.space/${this.network}/`);
     }
-    return code;
   }
 
   wrapImportTemplate() {
@@ -123,7 +206,7 @@ npm install @mempool/mempool.js --save
 # yarn
 yarn add @mempool/mempool.js`;
 
-    if (this.layer === 'bisq') {
+    if (this.env.BASE_MODULE === 'bisq') {
       importTemplate = `# npm
 npm install @mempool/bisq.js --save
 
@@ -131,7 +214,7 @@ npm install @mempool/bisq.js --save
 yarn add @mempool/bisq.js`;
     }
 
-    if (this.layer === 'liquid') {
+    if (this.env.BASE_MODULE === 'liquid') {
       importTemplate = `# npm
 npm install @mempool/liquid.js --save
 
@@ -142,4 +225,78 @@ yarn add @mempool/liquid.js`;
     return importTemplate;
   }
 
+  wrapCurlTemplate(code: any) {
+    if (code.codeTemplate) {
+      if (this.network === 'testnet') {
+        return this.replaceCurlPlaceholder(code.codeTemplate.curl, code.codeSampleTestnet);
+      }
+      if (this.network === 'signet') {
+        return this.replaceCurlPlaceholder(code.codeTemplate.curl, code.codeSampleSignet);
+      }
+      if (this.network === 'liquid') {
+        return this.replaceCurlPlaceholder(code.codeTemplate.curl, code.codeSampleLiquid);
+      }
+      if (this.network === 'bisq') {
+        return this.replaceCurlPlaceholder(code.codeTemplate.curl, code.codeSampleBisq);
+      }
+      if (this.network === '' || this.network === 'main') {
+        return this.replaceCurlPlaceholder(code.codeTemplate.curl, code.codeSampleMainnet);
+      }
+    }
+  }
+
+  wrapResponse(code: any) {
+    if (this.method === 'websocket') {
+      return '';
+    }
+    if (this.network === 'testnet') {
+      return code.codeSampleTestnet.response;
+    }
+    if (this.network === 'signet') {
+      return code.codeSampleSignet.response;
+    }
+    if (this.network === 'liquid') {
+      return code.codeSampleLiquid.response;
+    }
+    if (this.network === 'bisq') {
+      return code.codeSampleBisq.response;
+    }
+    return code.codeSampleMainnet.response;
+  }
+
+  replaceJSPlaceholder(text: string, code: any) {
+    for (let index = 0; index < code.length; index++) {
+      const textReplace = code[index];
+      const indexNumber = index + 1;
+      text = text.replace('%{' + indexNumber + '}', textReplace);
+    }
+    return text;
+  }
+
+  replaceCurlPlaceholder(curlText: any, code: any) {
+    let text = curlText;
+    for (let index = 0; index < code.curl.length; index++) {
+      const textReplace = code.curl[index];
+      const indexNumber = index + 1;
+      text = text.replace('%{' + indexNumber + '}', textReplace);
+    }
+
+    if (this.env.BASE_MODULE === 'mempool') {
+      if (this.network === 'main' || this.network === '') {
+        if (this.method === 'post') {
+          return `curl POST -sSLd "${text}"`;
+        }
+        return `curl -sSL "${this.hostname}${text}"`;
+      }
+      if (this.method === 'post') {
+        text = text.replace('/api', `/${this.network}/api`);
+        return `curl POST -sSLd "${text}"`;
+      }
+      return `curl -sSL "${this.hostname}/${this.network}${text}"`;
+    }
+    if (this.env.BASE_MODULE !== 'mempool') {
+      return `curl -sSL "${this.hostname}${text}"`;
+    }
+  }
+
 }