From 0a3e1d84dbabea08c3887607c749863f73c97b48 Mon Sep 17 00:00:00 2001
From: SondreB <sondre@outlook.com>
Date: Thu, 1 Dec 2022 00:27:01 +0100
Subject: [PATCH] Add a basic example on DID Resolve

---
 package-lock.json          | 45 ++++++++++++++++++++++++++++++++++++++
 package.json               |  2 ++
 src/app/app.component.html | 39 +++++++++++++++++++++++++--------
 src/app/app.component.ts   | 10 +++++++++
 src/styles.scss            |  8 +++++++
 5 files changed, 95 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 19e846a..2232a09 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,8 +18,10 @@
         "@angular/platform-browser": "^14.2.0",
         "@angular/platform-browser-dynamic": "^14.2.0",
         "@angular/router": "^14.2.0",
+        "@blockcore/did-resolver": "^0.0.3",
         "@blockcore/provider": "^0.0.12",
         "bitcoinjs-message": "^2.2.0",
+        "did-resolver": "^4.0.1",
         "rxjs": "~7.5.0",
         "stream-browserify": "^3.0.0",
         "tslib": "^2.3.0",
@@ -2296,6 +2298,23 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "node_modules/@blockcore/did-resolver": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@blockcore/did-resolver/-/did-resolver-0.0.3.tgz",
+      "integrity": "sha512-8l8XIkcqTiSZgeVeyVNkWtuCYMoFt983aWy9bjS0cclMKkqp+1vjYolLIYCBUqUP9cnmC2UffiM7xMIU7Lgi/A==",
+      "dependencies": {
+        "@blockcore/dns": "^0.0.11",
+        "did-resolver": "^4.0.1"
+      }
+    },
+    "node_modules/@blockcore/did-resolver/node_modules/@blockcore/dns": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/@blockcore/dns/-/dns-0.0.11.tgz",
+      "integrity": "sha512-Nk8k5Zn3w742iV2+nE97eWufJ70gLMzIU5YktQsvzPH4bZVBEpLhjlRZxmZBd0zBITSb3eMzpspjgjVfi0cpGA==",
+      "engines": {
+        "node": ">=18.*"
+      }
+    },
     "node_modules/@blockcore/dns": {
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/@blockcore/dns/-/dns-0.0.9.tgz",
@@ -5015,6 +5034,11 @@
       "integrity": "sha512-uJaamHkagcZtHPqCIHZxnFrXlunQXgBOsZSUOWwFw31QJCAbyTBoHMW75YOTur5ZNx8pIeAKgf6GWIgaqqiLhA==",
       "dev": true
     },
+    "node_modules/did-resolver": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/did-resolver/-/did-resolver-4.0.1.tgz",
+      "integrity": "sha512-eHs2VLKhcANmh08S87PKvOauIAmSOd7nb7AlhNxcvOyDAIGQY1UfbiqI1VOW5IDKvOO6aEWY+5edOt1qrCp1Eg=="
+    },
     "node_modules/diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
@@ -13911,6 +13935,22 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "@blockcore/did-resolver": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@blockcore/did-resolver/-/did-resolver-0.0.3.tgz",
+      "integrity": "sha512-8l8XIkcqTiSZgeVeyVNkWtuCYMoFt983aWy9bjS0cclMKkqp+1vjYolLIYCBUqUP9cnmC2UffiM7xMIU7Lgi/A==",
+      "requires": {
+        "@blockcore/dns": "^0.0.11",
+        "did-resolver": "^4.0.1"
+      },
+      "dependencies": {
+        "@blockcore/dns": {
+          "version": "0.0.11",
+          "resolved": "https://registry.npmjs.org/@blockcore/dns/-/dns-0.0.11.tgz",
+          "integrity": "sha512-Nk8k5Zn3w742iV2+nE97eWufJ70gLMzIU5YktQsvzPH4bZVBEpLhjlRZxmZBd0zBITSb3eMzpspjgjVfi0cpGA=="
+        }
+      }
+    },
     "@blockcore/dns": {
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/@blockcore/dns/-/dns-0.0.9.tgz",
@@ -15984,6 +16024,11 @@
       "integrity": "sha512-uJaamHkagcZtHPqCIHZxnFrXlunQXgBOsZSUOWwFw31QJCAbyTBoHMW75YOTur5ZNx8pIeAKgf6GWIgaqqiLhA==",
       "dev": true
     },
+    "did-resolver": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/did-resolver/-/did-resolver-4.0.1.tgz",
+      "integrity": "sha512-eHs2VLKhcANmh08S87PKvOauIAmSOd7nb7AlhNxcvOyDAIGQY1UfbiqI1VOW5IDKvOO6aEWY+5edOt1qrCp1Eg=="
+    },
     "diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
diff --git a/package.json b/package.json
index 82d82a8..16ef3c7 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,10 @@
     "@angular/platform-browser": "^14.2.0",
     "@angular/platform-browser-dynamic": "^14.2.0",
     "@angular/router": "^14.2.0",
+    "@blockcore/did-resolver": "^0.0.3",
     "@blockcore/provider": "^0.0.12",
     "bitcoinjs-message": "^2.2.0",
+    "did-resolver": "^4.0.1",
     "rxjs": "~7.5.0",
     "stream-browserify": "^3.0.0",
     "tslib": "^2.3.0",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 37cd6a6..c9102fc 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -37,6 +37,25 @@
     </p>
   </div>
 
+  <mat-card class="card">
+    <mat-card-header>
+      <mat-card-title>DID Resolve (lookup)</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      This sample does not interact with the wallet, but performs an standard DID Resolve using the <a href="https://www.npmjs.com/package/@blockcore/did-resolver" target="_blank">@blockcore/did-resolver</a> library.
+
+      <mat-form-field class="input-full-width" appearance="outline">
+        <mat-label>DID ID</mat-label>
+        <input matInput type="text" [(ngModel)]="didLookup" />
+      </mat-form-field>
+
+      <p class="long" *ngIf="didLookupResponse">DID Document: {{ didLookupResponse | json }}</p>
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-flat-button color="primary" (click)="resolveDid()">DID Resolve</button>
+    </mat-card-actions>
+  </mat-card>
+
   <div class="actions" *ngIf="provider">
     <br />
 
@@ -107,9 +126,7 @@
         <mat-card-title>DID Supported Methods</mat-card-title>
       </mat-card-header>
       <mat-card-content>
-        <p *ngIf="didSupportedMethodsResponse">
-          DID Methods: {{didSupportedMethodsResponse}}
-        </p>
+        <p *ngIf="didSupportedMethodsResponse">DID Methods: {{ didSupportedMethodsResponse }}</p>
       </mat-card-content>
       <mat-card-actions>
         <button mat-flat-button color="primary" (click)="didSupportedMethods()">Supported DID Methods</button>
@@ -122,8 +139,9 @@
       </mat-card-header>
       <mat-card-content>
         <p *ngIf="didRequestResponse">
-          DID: {{didRequestResponse.did}}<br>
-          Proof: {{didRequestResponse.proof}}<br>
+          DID: {{ didRequestResponse.did }}<br />
+          <span class="long">Proof: {{ didRequestResponse.proof }}</span
+          ><br />
         </p>
       </mat-card-content>
       <mat-card-actions>
@@ -157,16 +175,19 @@
         </mat-form-field>
 
         <p *ngIf="vcRequestResponse">
-          DID: {{vcRequestResponse.did}}<br><br>
-          VC: <span class="long">{{vcRequestResponse.vc}}</span><br>
+          DID: {{ vcRequestResponse.did }}<br /><br />
+          VC: <span class="long">{{ vcRequestResponse.vc }}</span
+          ><br />
         </p>
       </mat-card-content>
       <mat-card-actions>
-        <button mat-flat-button color="primary" (click)="vcRequest()">Send VC Request</button> 
+        <button mat-flat-button color="primary" (click)="vcRequest()">Send VC Request</button>
       </mat-card-actions>
     </mat-card>
 
+
+
     <router-outlet></router-outlet>
   </div>
-  <br>
+  <br />
 </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index c10dd91..1740522 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { WebProvider } from '@blockcore/provider';
 import * as bitcoinMessage from 'bitcoinjs-message';
 const { v4: uuidv4 } = require('uuid');
+import { DIDResolutionOptions, Resolver } from 'did-resolver';
+import is from '@blockcore/did-resolver';
 
 @Component({
   selector: 'app-root',
@@ -187,6 +189,14 @@ export class AppComponent implements OnInit {
   }
 
   vcRequestResponse: any;
+  didLookup = 'did:is:0f254e55a2633d468e92aa7dd5a76c0c9101fab8e282c8c20b3fefde0d68f217';
+  didLookupResponse: any | undefined;
+
+  async resolveDid() {
+    const isResolver = is.getResolver();
+    const resolver = new Resolver(isResolver);
+    this.didLookupResponse = await resolver.resolve(this.didLookup, {});
+  }
 
   async vcRequest() {
     const result = await this.request('vc.request', [
diff --git a/src/styles.scss b/src/styles.scss
index b488dfe..8803243 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -17,3 +17,11 @@ body {
   padding-left: 1em;
   padding-right: 1em;
 }
+
+a {
+  color: white;
+}
+
+a:hover {
+  color: silver;
+}
\ No newline at end of file