Merge branch 'develop'

.env.devnet

@@ -1,9 +1,9 @@
-REACT_APP_SERVICE_HOST=//services.devnet.kilt.io
+REACT_APP_SERVICE_HOST=https://services.devnet.kilt.io
 REACT_APP_SERVICE_PORT=443
 
 REACT_APP_NODE_HOST=full-nodes-lb.devnet.kilt.io
 REACT_APP_NODE_WS_PORT=443
 
 REACT_APP_FAUCET_URL=https://faucet-devnet.kilt.io
 
-PUBLIC_URL=//demo.devnet.kilt.io
+PUBLIC_URL=https://demo.devnet.kilt.io

.env.production

@@ -1,9 +1,9 @@
-REACT_APP_SERVICE_HOST=//services.kilt.io
+REACT_APP_SERVICE_HOST=https://services.kilt.io
 REACT_APP_SERVICE_PORT=443
 
 REACT_APP_NODE_HOST=full-nodes.kilt.io
 REACT_APP_NODE_WS_PORT=443
 
 REACT_APP_FAUCET_URL=https://faucet.kilt.io
 
-PUBLIC_URL=//demo.kilt.io
+PUBLIC_URL=https://demo.kilt.io

package.json

@@ -59,6 +59,7 @@
     "react-dev-utils": "^5.0.2",
     "react-dom": "^16.6.3",
     "react-json-view": "^1.19.1",
+    "react-qrcode-logo": "^2.2.1",
     "react-redux": "^5.1.1",
     "react-router-dom": "^4.3.1",
     "react-schema-based-json-editor": "^7.20.2",

src/components/IdentityView/IdentityView.scss

@@ -60,4 +60,20 @@
       border: $base-border;
     }
   }
+
+  & button {
+    &.QRCodeToggle {
+      @include button-secondary;
+    }
+  }
+
+  & .QRCode {
+    animation: appear $base-transition-time;
+    margin-top: $base-padding;
+  }
+
+  @keyframes appear {
+    0%   { opacity: 0; }
+    100% { opacity: 1; }
+  }
 }

src/components/IdentityView/IdentityView.tsx

@@ -16,6 +16,7 @@ import ContactPresentation from '../ContactPresentation/ContactPresentation'
 import './IdentityView.scss'
 import MessageRepository from '../../services/MessageRepository'
 import { Identity } from '@kiltprotocol/sdk-js'
+import QRCodePublicIdentity from '../QRCodePublicIdentity/QRCodePublicIdentity'
 
 type Props = {
   // input
@@ -31,31 +32,42 @@ type Props = {
 }
 
 type State = {
-  requestKiltTokens: boolean
+  showPublicIdentityQRCode: boolean
 }
 
 const FAUCET_URL = process.env.REACT_APP_FAUCET_URL
 
 class IdentityView extends React.Component<Props, State> {
+
   constructor(props: Props) {
     super(props)
-
     this.registerContact = this.registerContact.bind(this)
     this.toggleContacts = this.toggleContacts.bind(this)
     this.openKiltFaucet = this.openKiltFaucet.bind(this)
+    this.state = {
+      showPublicIdentityQRCode: false
+    }
+    this.togglePublicIdentityQRCode = this.togglePublicIdentityQRCode.bind(this)
+  }
+
+  private togglePublicIdentityQRCode() {
+    const { showPublicIdentityQRCode } = this.state
+    this.setState({
+      showPublicIdentityQRCode: !showPublicIdentityQRCode,
+    })
   }
 
   public render() {
     const {
       contacts,
       myIdentity,
       selected,
-
       onDelete,
       onSelect,
       onCreateDid,
       onDeleteDid,
     } = this.props
+    const { showPublicIdentityQRCode } = this.state
     const { metaData, phrase, did, identity } = myIdentity
     const contact: Contact | undefined = contacts.find(
       (myContact: Contact) =>
@@ -69,8 +81,9 @@ class IdentityView extends React.Component<Props, State> {
         contact.publicIdentity.address
       )
     }
-
     const classes = ['IdentityView', selected ? 'selected' : '']
+    const publicIdentityWithServiceAddress = {...identity.getPublicIdentity(), serviceAddress: MessageRepository.URL}
+    const togglePublicIdentityQRCodeButtonTxt = `${showPublicIdentityQRCode ? "Hide" : "Show"} QR Code`
     return (
       <section className={classes.join(' ')}>
         {selected && <h2>Active identity</h2>}
@@ -100,6 +113,22 @@ class IdentityView extends React.Component<Props, State> {
             <label>Encryption Public Key</label>
             <div>{identity.boxPublicKeyAsHex}</div>
           </div>
+          <div>
+            <label>Public identity (scan to send a message)</label>
+            <div>
+              <div>
+                <button className="QRCodeToggle" onClick={this.togglePublicIdentityQRCode}>
+                  {togglePublicIdentityQRCodeButtonTxt}
+                </button>
+                {
+                  showPublicIdentityQRCode &&
+                  <div className="QRCode">
+                    <QRCodePublicIdentity publicIdentity={publicIdentityWithServiceAddress}/>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
           <div>
             <label>{myIdentity.did ? 'DID Document' : 'DID'}</label>
             <div>

src/components/QRCodePublicIdentity/QRCodePublicIdentity.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { QRCode } from 'react-qrcode-logo'
+import { IPublicIdentity } from '@kiltprotocol/sdk-js'
+import logo from '../../assets/kilt_small.svg'
+import { encodePublicIdentity } from '../../utils/PublicIdentity/Encoding'
+
+type Props = {
+  publicIdentity: IPublicIdentity
+}
+
+const QRCodePublicIdentity: React.FunctionComponent<Props> = ({
+  publicIdentity,
+}) => {
+  const formattedPublicIdentity = JSON.stringify(
+    encodePublicIdentity(publicIdentity)
+  )
+  return (
+    // the public identity needs to be encoded in order to fit in a scannable QR Code
+    <QRCode
+      size={200}
+      logoImage={logo}
+      logoWidth={44}
+      logoHeight={44}
+      fgColor="#751869"
+      quietZone={4}
+      qrStyle="dots"
+      value={formattedPublicIdentity}
+    />
+  )
+}
+
+export default QRCodePublicIdentity

src/services/AttestationService.ts

@@ -36,8 +36,7 @@ class AttestationService {
 
     const attestation = Kilt.Attestation.fromRequestAndPublicIdentity(
       requestForAttestation,
-      selectedIdentity,
-      null
+      selectedIdentity
     )
 
     const attestedClaim = Kilt.AttestedClaim.fromRequestAndAttestation(

src/utils/PublicIdentity/Encoding.ts

@@ -0,0 +1,11 @@
+import { IPublicIdentity } from '@kiltprotocol/sdk-js'
+
+const encodePublicIdentity = (
+  publicIdentity: IPublicIdentity
+): Array<string> => [
+  publicIdentity.address,
+  publicIdentity.boxPublicKeyAsHex,
+  ...(publicIdentity.serviceAddress ? [publicIdentity.serviceAddress] : []),
+]
+
+export { encodePublicIdentity }

yarn.lock

@@ -241,9 +241,9 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.2.tgz#63985d3d8b02530e0869962f4da09142ee8e200e"
 
 "@kiltprotocol/sdk-js@^0.x":
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/@kiltprotocol/sdk-js/-/sdk-js-0.17.0.tgz#9af16539859219c988aaa69e3642d7cdb94537fe"
-  integrity sha512-O+imN6Z2h854iD891EaJO276oVDWVvZzrC+keOB1YByZYplyyk7etVv+Ekr2PAsWGAtVCKI6as2QX4m0BLLwFQ==
+  version "0.17.1"
+  resolved "https://registry.yarnpkg.com/@kiltprotocol/sdk-js/-/sdk-js-0.17.1.tgz#9f6ffadfa2649fb2fd79a06e31449cd3f1954c42"
+  integrity sha512-e9Yrc9OlYGG2gsta7hNSYPSrs8WqQI6VeLgNqwofK/Swf+nOlavURiVT+Rg/6Bm1usV4MFyo933XUKfPPLZVRw==
   dependencies:
     "@polkadot/api" "^0.96.1"
     "@polkadot/keyring" "^1.7.0-beta.5"
@@ -5804,6 +5804,11 @@ lodash.flow@^3.3.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+
 lodash.isfunction@^3.0.8:
   version "3.0.9"
   resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051"
@@ -7230,6 +7235,11 @@ q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
 
+qrcode-generator@^1.4.1:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/qrcode-generator/-/qrcode-generator-1.4.4.tgz#63f771224854759329a99048806a53ed278740e7"
+  integrity sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==
+
 qs@6.5.2, qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
@@ -7362,6 +7372,16 @@ react-dom@16:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
+react-dom@^16.4.1:
+  version "16.12.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
+  integrity sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.18.0"
+
 react-dom@^16.6.3:
   version "16.6.3"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0"
@@ -7403,6 +7423,16 @@ react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
 
+react-qrcode-logo@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-qrcode-logo/-/react-qrcode-logo-2.2.1.tgz#c409a1a37bc8eb76ef10343ff2e6f00b94facac8"
+  integrity sha512-eXFSJW8HVPMT2ea4pLkbG8apHJ/aIPpQ4kX0HmsSm0wN+K+bleRNgElbjIPS4G7n0lxcA7N6pw+KAxMWPJFoqA==
+  dependencies:
+    lodash.isequal "^4.5.0"
+    qrcode-generator "^1.4.1"
+    react "^16.4.1"
+    react-dom "^16.4.1"
+
 react-redux@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.1.tgz#88e368682c7fa80e34e055cd7ac56f5936b0f52f"
@@ -7501,6 +7531,15 @@ react@16:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
+react@^16.4.1:
+  version "16.12.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
+  integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
 react@^16.6.3:
   version "16.6.3"
   resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c"
@@ -8055,6 +8094,14 @@ scheduler@^0.13.6:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
+  integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-based-json-editor@^7.22.0:
   version "7.22.0"
   resolved "https://registry.yarnpkg.com/schema-based-json-editor/-/schema-based-json-editor-7.22.0.tgz#6e278ec7278ad4ee774daec28f67fbcaae26d782"