machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add template to documentation.

Browse Source 
Add support for BASE_MODULE=[mempool, bisq, liquid].
 Add print results do CommonJS examples.
 Add support for custom domains.
 Remove basecurrency from /volume endpoint.
This commit is contained in:
Miguel Medeiros 2021-09-03 07:04:19 -03:00
parent ad6503c7b3
commit a151c5cddd
No known key found for this signature in database
GPG Key ID: 819EDEE4673F3EBB
4 changed files with 4446 additions and 4392 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2371
frontend/src/app/components/api-docs/api-docs.component.html
View File

File diff suppressed because it is too large Load Diff

6082
frontend/src/app/components/api-docs/api-docs.component.ts
View File

File diff suppressed because it is too large Load Diff

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

@ -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>
<pre><code [innerText]="wrapCurl(code.codeSample.curl)"></code></pre>
<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]="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>
<pre><code [innerText]="wrapESmodule(code.codeSample.esModule)"></code></pre>
<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)"></code></pre>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="navCodeTemplate"></div>
<div *ngIf="code.responseSample" class="response">
<div class="subtitle"><ng-container i18n="API Docs API response">Response</ng-container> <app-clipboard [text]="code.responseSample"></app-clipboard></div>
<pre><code [innerText]="code.responseSample"></code></pre>
<div *ngIf="code.codeTemplate && wrapResponse(code) !== ''" class="response">
<div class="subtitle"><ng-container i18n="API Docs API response">Response</ng-container> <app-clipboard [text]="wrapResponse(code)"></app-clipboard></div>
<pre><code [innerText]="wrapResponse(code)"></code></pre>
</div>
</div>

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

@ -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: {
codeSample: {
esModule: string;
commonJS: string;
curl: string;
},
responseSample: string;
};
hostname = document.location.hostname;
@Input() code: any;
@Input() hostname: string;
@Input() method: 'get' | 'post' | 'websocket' = 'get';
env: Env;
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,39 +34,103 @@ 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) {
let codeText: string;
if (this.network === 'bisq' || this.network === 'liquid'){
codeText = code.replace('%{1}', this.network);
normalizeHostsESModule(codeText: string) {
if (this.env.BASE_MODULE === 'mempool') {
if (['liquid', 'bisq'].includes(this.network)) {
codeText = codeText.replace('%{0}', this.network);
} 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) {
let codeText = this.normalizeCodeHostname(code);
if (this.network && this.network !== 'mainnet') {
normalizeHostsCommonJS(codeText: string) {
if (this.env.BASE_MODULE === 'mempool') {
if (['liquid', 'bisq'].includes(this.network)) {
codeText = codeText.replace('%{0}', this.network);
} else {
codeText = codeText.replace('%{0}', 'bitcoin');
}
if(['', 'main', 'liquid', 'bisq'].includes(this.network)) {
codeText = codeText.replace('mempoolJS();', `mempoolJS({
hostname: '${this.hostname}/${this.network}'
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: 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.layer === 'bisq') {
if (this.env.BASE_MODULE === 'bisq') {
importText = `import bisqJS from "@mempool/bisq.js";`;
}
if (this.layer === 'liquid') {
if (this.env.BASE_MODULE === 'liquid') {
importText = `import liquidJS from "@mempool/liquid.js";`;
}
@ -77,23 +141,37 @@ const init = async () => {
};
init();`;
}
}
wrapCommonJS(code: string) {
let codeText = this.normalizeCodeHostname(code);
wrapCommonJS(code: any) {
let codeText: string;
if (code.codeTemplate) {
codeText = this.normalizeHostsCommonJS(code.codeTemplate.commonJS);
if (this.network && this.network !== 'mainnet') {
codeText = codeText.replace('mempoolJS();', `mempoolJS({
hostname: '${this.hostname}/${this.network}'
});` );
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 = `<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>`;
}
if (this.layer === 'liquid') {
if (this.env.BASE_MODULE === 'liquid') {
importText = `<script src="https://liquid.network/liquid.js"></script>`;
}
return `<!DOCTYPE html>
<html>
<head>
@ -105,14 +183,11 @@ init();`;
init();
</script>
</head>
<body></body>
<body>
<pre id="result"></pre>
</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 +198,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 +206,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 +217,72 @@ 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.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}`;
}
}