Merge pull request #248 from KILTprotocol/demo-did-document

feat: DID document

src/components/IdentityView/IdentityView.scss

@@ -2,11 +2,10 @@
   position: relative;
   padding: $base-padding;
   margin: {
-    bottom: 2*$base-padding;
+    bottom: 2 * $base-padding;
   }
 
   & .attributes {
-
     & > div {
       @include label-input-combo;
     }
@@ -24,9 +23,7 @@
     @include detailPresentation;
 
     &.internal {
-
       & .ui--IdentityIcon {
-
         &:after {
           font-size: 16px;
           margin: {
@@ -38,31 +35,14 @@
     }
   }
 
-  & .didDelete {
-    @include button-icon-only-inline($icon-trash-o);
-  }
-
-  & .didCreate {
-    @include button-icon-only-inline($icon-plus);
-  }
-
   & .did {
     margin-right: 10px;
   }
 
-  & .toggleContacts {
-    @include button-icon-only($icon-star);
-    @include favorite;
-
-    &.isMyContact {
-      color: $color-grey-light;
-    }
-  }
-
   & .instruction {
     margin: {
       top: $base-padding;
-      bottom: 2*$base-padding;
+      bottom: 2 * $base-padding;
     }
   }
 

src/components/IdentityView/IdentityView.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react'
 import { connect } from 'react-redux'
-
 import ContactRepository from '../../services/ContactRepository'
 import errorService from '../../services/ErrorService'
 import { notifySuccess } from '../../services/FeedbackService'
 import * as Balances from '../../state/ducks/Balances'
 import * as Contacts from '../../state/ducks/Contacts'
 import * as Wallet from '../../state/ducks/Wallet'
+import DidDocumentView from '../../containers/DidDocumentView/DidDocumentView'
 import PersistentStore, {
   State as ReduxState,
 } from '../../state/PersistentStore'
@@ -56,7 +56,7 @@ class IdentityView extends React.Component<Props, State> {
       onCreateDid,
       onDeleteDid,
     } = this.props
-
+    const { metaData, phrase, did, identity } = myIdentity
     const contact: Contact | undefined = contacts.find(
       (myContact: Contact) =>
         myContact.publicIdentity.address === myIdentity.identity.address
@@ -71,63 +71,94 @@ class IdentityView extends React.Component<Props, State> {
     }
 
     const classes = ['IdentityView', selected ? 'selected' : '']
-
     return (
       <section className={classes.join(' ')}>
         {selected && <h2>Active identity</h2>}
-        <ContactPresentation address={myIdentity.identity.address} size={50} />
+        <ContactPresentation address={identity.address} size={50} />
         <div className="attributes">
           <div>
             <label>Alias</label>
-            <div>{myIdentity.metaData.name}</div>
+            <div>{metaData.name}</div>
           </div>
           <div>
             <label>Phrase</label>
-            <div>{myIdentity.phrase}</div>
+            <div>{phrase}</div>
           </div>
           <div>
             <label>KILT Address</label>
-            <div>{myIdentity.identity.address}</div>
+            <div>{identity.address}</div>
           </div>
           <div>
             <label>Seed (as hex)</label>
-            <div>{myIdentity.identity.seedAsHex}</div>
+            <div>{identity.seedAsHex}</div>
           </div>
           <div>
             <label>Public Key</label>
-            <div>{myIdentity.identity.signPublicKeyAsHex}</div>
+            <div>{identity.signPublicKeyAsHex}</div>
           </div>
           <div>
             <label>Encryption Public Key</label>
-            <div>{myIdentity.identity.boxPublicKeyAsHex}</div>
+            <div>{identity.boxPublicKeyAsHex}</div>
           </div>
           <div>
-            <label>DID</label>
+            <label>{myIdentity.did ? 'DID Document' : 'DID'}</label>
             <div>
-              {myIdentity.did ? (
-                <span className="did">{myIdentity.did}</span>
+              {did?.document ? (
+                <span className="did">
+                  <DidDocumentView didDocument={did.document}>
+                    {did.identifier}
+                  </DidDocumentView>
+                </span>
               ) : (
-                ''
+                <>
+                  <div>No DID is attached to this identity.</div>
+                </>
               )}
-              <span className="didActions">
-                {onCreateDid && !myIdentity.did && (
-                  <button
-                    title="Generate DID..."
-                    className="didCreate"
-                    onClick={onCreateDid.bind(this, myIdentity)}
-                  />
-                )}
-                {onDeleteDid && myIdentity.did && (
-                  <button
-                    title="Delete DID"
-                    className="didDelete"
-                    onClick={onDeleteDid.bind(this, myIdentity)}
-                  />
-                )}
-              </span>
             </div>
           </div>
         </div>
+        <span className="actions" />
+        <div className="actions">
+          {onCreateDid && !did && (
+            <button
+              title="Generate DID..."
+              onClick={onCreateDid.bind(this, myIdentity)}
+            >
+              Register DID
+            </button>
+          )}
+          {onDeleteDid && did && (
+            <button
+              title="Delete DID"
+              onClick={onDeleteDid.bind(this, myIdentity)}
+            >
+              Delete DID
+            </button>
+          )}
+          {(!contact || (contact && contact.metaData.unregistered)) && (
+            <button onClick={this.registerContact}>
+              Register Global Contact
+            </button>
+          )}
+          <button
+            className={`toggleContacts ${
+              contact && contact.metaData.addedAt
+                ? 'isMyContact'
+                : 'isNotMyContact'
+            }`}
+            onClick={this.toggleContacts}
+            title={
+              contact && contact.metaData.addedAt
+                ? 'Remove from Favourite Contact'
+                : 'Add to Favourite Contact'
+            }
+          >
+            {contact && contact.metaData.addedAt
+              ? 'Unfavourize Contact'
+              : 'Favourize Contact'}
+          </button>
+          <span />
+        </div>
         <div className="actions">
           {!selected && (
             <>
@@ -150,20 +181,6 @@ class IdentityView extends React.Component<Props, State> {
             </>
           )}
 
-          <button
-            className={`toggleContacts ${
-              contact && contact.metaData.addedAt
-                ? 'isMyContact'
-                : 'isNotMyContact'
-            }`}
-            onClick={this.toggleContacts}
-            title={
-              contact && contact.metaData.addedAt
-                ? 'Remove from my contacts'
-                : 'Add to my contacts'
-            }
-          />
-
           {!(balance > 0) && (
             <button
               className="requestTokens"
@@ -173,11 +190,6 @@ class IdentityView extends React.Component<Props, State> {
               Request Tokens
             </button>
           )}
-
-          {(!contact || (contact && contact.metaData.unregistered)) && (
-            <button onClick={this.registerContact}>Register</button>
-          )}
-          <span />
         </div>
       </section>
     )
@@ -221,7 +233,6 @@ class IdentityView extends React.Component<Props, State> {
 
   private toggleContacts() {
     const { contacts, myIdentity } = this.props
-
     let contact = contacts.find(
       (myContact: Contact) =>
         myContact.publicIdentity.address === myIdentity.identity.address

src/containers/DidDocumentView/DidDocumentView.scss

@@ -0,0 +1,38 @@
+.DidView {
+  &h1 {
+    @include h1('Wallet');
+  }
+
+  &table {
+    $label-width: 30%;
+    width: 100%;
+    &td {
+      &:first-child {
+        width: $label-width;
+      }
+
+      &:last-child {
+        width: 100% - $label-width;
+      }
+    }
+
+    &tr {
+      &:first-child {
+        &td {
+          &:last-child {
+            @include baseFont-bold;
+          }
+        }
+      }
+    }
+  }
+
+  &.IdentityView {
+    &.selected {
+      border: 3px solid $color-primary;
+      &h2 {
+        color: $color-primary;
+      }
+    }
+  }
+}

src/containers/DidDocumentView/DidDocumentView.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { Contact } from '../../types/Contact'
+import './DidDocumentView.scss'
+import Code from '../../components/Code/Code'
+
+type Props = {
+  didDocument: object
+  children: any
+}
+
+const DidDocumentView = (props: Props) => {
+  const { didDocument } = props
+  return (
+    <div className="attributes">
+      <Code>{didDocument}</Code>
+    </div>
+  )
+}
+
+export default DidDocumentView

src/services/ContactRepository.ts

@@ -133,7 +133,7 @@ class ContactRepository {
         PersistentStore.store.getState()
       )
       const contact = {
-        did: { address: identifier },
+        did: { identifier },
         metaData: {
           addedAt: Date.now(),
           addedBy: selectedIdentity.identity.address,

src/services/DidService.ts

@@ -2,10 +2,8 @@ import * as sdk from '@kiltprotocol/sdk-js'
 import * as Wallet from '../state/ducks/Wallet'
 import persistentStore from '../state/PersistentStore'
 import { Contact, MyIdentity } from '../types/Contact'
-import BlockchainService from './BlockchainService'
 import ContactRepository from './ContactRepository'
 import MessageRepository from './MessageRepository'
-import { object } from 'prop-types'
 
 export class DidService {
   public static readonly URL = `${process.env.REACT_APP_SERVICE_HOST}:${
@@ -22,6 +20,7 @@ export class DidService {
     const documentStore: sdk.IDid['documentStore'] = `${
       ContactRepository.URL
     }/${myIdentity.identity.address}`
+
     const did = sdk.Did.fromIdentity(myIdentity.identity, documentStore)
     const didDocument = did.createDefaultDidDocument(`${MessageRepository.URL}`)
     const hash = sdk.Crypto.hashStr(JSON.stringify(didDocument))
@@ -36,23 +35,23 @@ export class DidService {
     } as Contact)
 
     const status = await did.store(myIdentity.identity)
-    if (status.type !== 'Finalised') {
+    if (status.type !== 'Finalized') {
       throw new Error(
         `Error creating DID for identity ${myIdentity.metaData.name}`
       )
     }
 
     persistentStore.store.dispatch(
       Wallet.Store.updateIdentityAction(myIdentity.identity.address, {
-        did: did.identifier,
+        did: { identifier: did.identifier, document: didDocument },
       })
     )
     return did
   }
 
   public static async deleteDid(myIdentity: MyIdentity) {
     const status = await sdk.Did.remove(myIdentity.identity)
-    if (status.type !== 'Finalised') {
+    if (status.type !== 'Finalized') {
       throw new Error(
         `Error deleting DID for identity ${myIdentity.metaData.name}`
       )

src/types/Contact.d.ts

@@ -11,7 +11,7 @@ export interface Contact {
     unregistered?: boolean
   }
   did?: {
-    address?: string
+    identifier?: string
     document?: object
   }
   signature?: string
@@ -28,6 +28,6 @@ export interface MyIdentity {
   }
   phrase: string
 
-  did?: sdk.IDid['identifier']
+  did?: Contact['did']
   createdAt?: number
 }