Merge pull request #975 from numbersprotocol/feature-display-token-and-caption

Feature display NFT token and caption

Author: shc261392

src/app/features/home/details/details.page.html

@@ -72,10 +72,7 @@
             </ion-label>
           </ion-item>
           <ion-item>
-            <ion-icon
-              src="/assets/images/media-id-solid-black.svg"
-              slot="start"
-            ></ion-icon>
+            <ion-icon src="/assets/images/media-id.svg" slot="start"></ion-icon>
             <ion-label
               (click)="openCertificate()"
               *ngIf="detailedCapture.id; else notRegistered"
@@ -86,6 +83,25 @@
               {{ 'notRegistered' | transloco }}
             </ng-template>
           </ion-item>
+          <ng-container *ngrxLet="detailedCapture.nftToken$ as nftToken">
+            <ion-item *ngIf="nftToken">
+              <ion-icon src="/assets/images/nft.svg" slot="start"></ion-icon>
+              <ion-label>
+                {{ nftToken.tokenType }}
+                <a href="{{ nftToken.explorerUrl }}">
+                  {{ nftToken.tokenId }}
+                </a>
+              </ion-label>
+            </ion-item>
+          </ng-container>
+          <ng-container *ngrxLet="detailedCapture.caption$ as caption">
+            <ion-item *ngIf="caption">
+              <ion-icon name="document-text" slot="start"></ion-icon>
+              <ion-label text-wrap>
+                {{ caption }}
+              </ion-label>
+            </ion-item>
+          </ng-container>
         </ion-list>
         <div class="text-center">
           <ion-button routerLink="information">

src/app/features/home/details/information/session/information-session.service.ts

@@ -151,6 +151,35 @@ export class DetailedCapture {
     )[0];
   });
 
+  readonly caption$ = defer(async () => {
+    if (!(this.proofOrDiaBackendAsset instanceof Proof))
+      return this.proofOrDiaBackendAsset.caption;
+  });
+
+  readonly nftToken$ = defer(() => {
+    if (this.proofOrDiaBackendAsset instanceof Proof)
+      return this.diaBackendAsset$.pipe(
+        map(asset => {
+          const tokenInfo = asset?.nft_token_id
+            ? getTokenInfo(
+                asset.nft_blockchain_name,
+                asset.nft_contract_address,
+                asset.nft_token_id
+              )
+            : null;
+          return tokenInfo;
+        })
+      );
+    const tokenInfo = this.proofOrDiaBackendAsset.nft_token_id
+      ? getTokenInfo(
+          this.proofOrDiaBackendAsset.nft_blockchain_name,
+          this.proofOrDiaBackendAsset.nft_contract_address,
+          this.proofOrDiaBackendAsset.nft_token_id
+        )
+      : null;
+    return of(tokenInfo);
+  });
+
   constructor(
     private readonly proofOrDiaBackendAsset: Proof | DiaBackendAsset,
     private readonly mediaStore: MediaStore,
@@ -191,3 +220,29 @@ export function normalizeGeolocation({
     return { latitude: Number(latitude), longitude: Number(longitude) };
   return undefined;
 }
+
+function getTokenInfo(
+  nftBlockchainName: string,
+  nftContractAddress: string,
+  nftTokenId: string
+) {
+  return {
+    tokenId: nftTokenId,
+    tokenType: nftBlockchainName === 'thundercore' ? 'TT721' : 'ERC721',
+    explorerUrl: getExplorerUrl(
+      nftBlockchainName,
+      nftContractAddress,
+      nftTokenId
+    ),
+  };
+}
+
+function getExplorerUrl(
+  nftBlockchainName: string,
+  nftContractAddress: string,
+  nftTokenId: string
+) {
+  return nftBlockchainName === 'thundercore'
+    ? `https://viewblock.io/thundercore/address/${nftContractAddress}?txsType=nft&specific=${nftTokenId}`
+    : `https://etherscan.io/token/${nftContractAddress}?a=${nftTokenId}`;
+}

src/app/shared/dia-backend/asset/dia-backend-asset-repository.service.ts

@@ -324,6 +324,7 @@ export interface DiaBackendAsset extends Tuple {
   readonly nft_token_uri: string;
   readonly nft_blockchain_name: string;
   readonly nft_contract_address: string;
+  readonly caption: string;
 }
 
 export type AssetDownloadField =