Merge pull request #1010 from mempool/simon/liquid-icons-api

Liquid icons api

frontend/src/app/components/docs/api-docs-nav.component.html

@@ -30,8 +30,10 @@
 <ng-template [ngIf]="network.val === 'liquid'">
   <p>Assets</p>
   <a [routerLink]="['./']" fragment="get-assets" (click)="collapseItem.toggle()">GET Assets</a>
+  <a [routerLink]="['./']" fragment="get-assets-icons" (click)="collapseItem.toggle()">GET Assets Icons</a>
   <a [routerLink]="['./']" fragment="get-asset-transactions" (click)="collapseItem.toggle()">GET Asset Transactions</a>
   <a [routerLink]="['./']" fragment="get-asset-supply" (click)="collapseItem.toggle()">GET Asset Supply</a>
+  <a [routerLink]="['./']" fragment="get-asset-icon" (click)="collapseItem.toggle()">GET Asset Icon</a>
 </ng-template>
 
 <p>Blocks</p>

frontend/src/app/components/docs/api-docs-nav.component.ts

@@ -8,7 +8,7 @@ import { Component, OnInit, Input } from '@angular/core';
 export class ApiDocsNavComponent implements OnInit {
 
   @Input() network: any;
-  @Input() collapseItem: any;
+  @Input() collapseItem: any = { toggle: () => {} };
 
   constructor() { }
 

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

@@ -275,6 +275,32 @@
             <app-code-template [hostname]="hostname" [code]="code.assetSupply" [network]="network.val" ></app-code-template>
           </div>
 
+          <div class="endpoint-container" id="get-assets-icons">
+            <a class="section-header" [routerLink]="['./']" fragment="get-assets-icons">GET Asset Icons <span>Assets</span></a>
+            <div class="endpoint">
+              <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+              <a [href]="wrapUrl(network.val, code.assetIcons)" target="_blank">GET /liquid/api/v1/assets/icons</a>
+            </div>
+            <div class="description">
+              <div class="subtitle" i18n>Description</div>
+              <div>Get all the Asset IDs that has icons.</div>
+            </div>
+            <app-code-template [hostname]="hostname" [code]="code.assetIcons" [network]="network.val" ></app-code-template>
+          </div>
+
+          <div class="endpoint-container" id="get-asset-icon">
+            <a class="section-header" [routerLink]="['./']" fragment="get-asset-icon">GET Asset Icon <span>Assets</span></a>
+            <div class="endpoint">
+              <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+              <a [href]="wrapUrl(network.val, code.assetIcon)" target="_blank">GET /liquid/api/v1/asset/:asset_id/icon</a>
+            </div>
+            <div class="description">
+              <div class="subtitle" i18n>Description</div>
+              <div>Get the icon of the specified asset.</div>
+            </div>
+            <app-code-template [hostname]="hostname" [code]="code.assetIcon" [network]="network.val" ></app-code-template>
+          </div>
+
         </div>
 
         <div class="api-category">

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

@@ -642,24 +642,6 @@ export class ApiDocsComponent implements OnInit {
   console.log(asset);
           `,
         },
-        codeSampleMainnet: {
-          esModule: [],
-          commonJS: [],
-          curl: [],
-          response: ''
-        },
-        codeSampleTestnet: {
-          esModule: [],
-          commonJS: [],
-          curl: [],
-          response: ''
-        },
-        codeSampleSignet: {
-          esModule: [],
-          commonJS: [],
-          curl: [],
-          response: ''
-        },
         codeSampleLiquid: {
           esModule: [`6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d`],
           commonJS: [`6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d`],
@@ -693,6 +675,47 @@ export class ApiDocsComponent implements OnInit {
           response: ''
         },
       },
+      assetIcons: {
+        codeTemplate: {
+          curl: `/api/v1/assets/icons`,
+          commonJS: `
+        const { %{0}: { assets } } = mempoolJS();
+
+        const assetsIcons = await assets.getAssetsIcons();
+
+        document.getElementById("result").textContent = JSON.stringify(assetsIcons, undefined, 2);
+        `,
+          esModule: `
+  const { %{0}: { assets } } = mempoolJS();
+
+  const assetsIcons = await assets.getAssetsIcons();
+  console.log(assetsIcons);
+          `,
+        },
+        codeSampleLiquid: {
+          esModule: [`6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d`],
+          commonJS: [`6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d`],
+          curl: [`6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d`],
+          response: `[
+  "6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d",
+  "ce091c998b83c78bb71a632313ba3760f1763d9cfcffae02258ffa9865a37bd2"
+  ...
+]`,
+        },
+      },
+      assetIcon: {
+        noWrap: true,
+        codeTemplate: {
+          curl: `/api/v1/asset/%{1}/icon`,
+          commonJS: `<img src="https://liquid.place/api/v1/asset/%{1}/icon">`,
+        },
+        codeSampleLiquid: {
+          esModule: [`6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d`],
+          commonJS: [`6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d`],
+          curl: [`6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d`],
+          response: `PNG`,
+        },
+      },
       assetTransactions: {
         codeTemplate: {
           curl: `/api/asset/%{1}/txs`,

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

@@ -164,6 +164,10 @@ init();`;
         codeText = this.replaceJSPlaceholder(codeText, code.codeSampleBisq.esModule);
       }
 
+      if (code.noWrap) {
+        return codeText;
+      }
+
       let importText = `<script src="https://mempool.space/mempool.js"></script>`;
       if (this.env.BASE_MODULE === 'bisq') {
         importText = `<script src="https://bisq.markets/bisq.js"></script>`;