From cbcd7525e0d5e4aeffb4fd45efdaf46d25adfad3 Mon Sep 17 00:00:00 2001 From: Maud Date: Tue, 18 Feb 2020 11:05:12 +0100 Subject: [PATCH 1/3] feat: prepended protocol to URLs (#255) --- .env.devnet | 4 ++-- .env.production | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.env.devnet b/.env.devnet index 57ebe9a7..318cd5aa 100644 --- a/.env.devnet +++ b/.env.devnet @@ -1,4 +1,4 @@ -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 @@ -6,4 +6,4 @@ 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 diff --git a/.env.production b/.env.production index 8aa5ef00..8747d47a 100644 --- a/.env.production +++ b/.env.production @@ -1,4 +1,4 @@ -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 @@ -6,4 +6,4 @@ 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 From b2caa4cc17ba6a032a2cab1397a69afde2d45c50 Mon Sep 17 00:00:00 2001 From: Timo Welde Date: Tue, 18 Feb 2020 11:23:59 +0100 Subject: [PATCH 2/3] fix: take delegation id from request (#254) --- src/services/AttestationService.ts | 3 +-- yarn.lock | 6 +++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/services/AttestationService.ts b/src/services/AttestationService.ts index af38cfa9..3322d8a4 100644 --- a/src/services/AttestationService.ts +++ b/src/services/AttestationService.ts @@ -36,8 +36,7 @@ class AttestationService { const attestation = Kilt.Attestation.fromRequestAndPublicIdentity( requestForAttestation, - selectedIdentity, - null + selectedIdentity ) const attestedClaim = Kilt.AttestedClaim.fromRequestAndAttestation( diff --git a/yarn.lock b/yarn.lock index c6101acb..4252eb80 100644 --- a/yarn.lock +++ b/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" From 9b47823234892e3a47ea3c45878bb5a16b02a61b Mon Sep 17 00:00:00 2001 From: Maud Date: Tue, 18 Feb 2020 12:27:37 +0100 Subject: [PATCH 3/3] feat: added QR Code including service address (#253) * feat: added QR Code including service address * chore: optmized SVG * feat: wrap identity fields in an array * feat: made QR Code display toggleable * feat: small style adjutsment Co-authored-by: Timo Welde --- package.json | 1 + src/assets/kilt_small.svg | 1 + src/components/IdentityView/IdentityView.scss | 16 +++++++ src/components/IdentityView/IdentityView.tsx | 37 +++++++++++++-- .../QRCodePublicIdentity.tsx | 32 +++++++++++++ src/utils/PublicIdentity/Encoding.ts | 11 +++++ yarn.lock | 47 +++++++++++++++++++ 7 files changed, 141 insertions(+), 4 deletions(-) create mode 100644 src/assets/kilt_small.svg create mode 100644 src/components/QRCodePublicIdentity/QRCodePublicIdentity.tsx create mode 100644 src/utils/PublicIdentity/Encoding.ts diff --git a/package.json b/package.json index a5c3ca1c..7d2b8267 100644 --- a/package.json +++ b/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", diff --git a/src/assets/kilt_small.svg b/src/assets/kilt_small.svg new file mode 100644 index 00000000..62c388b8 --- /dev/null +++ b/src/assets/kilt_small.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/IdentityView/IdentityView.scss b/src/components/IdentityView/IdentityView.scss index ff5287b0..4e153aaa 100644 --- a/src/components/IdentityView/IdentityView.scss +++ b/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; } + } } diff --git a/src/components/IdentityView/IdentityView.tsx b/src/components/IdentityView/IdentityView.tsx index 39c6b1e5..5027cb77 100644 --- a/src/components/IdentityView/IdentityView.tsx +++ b/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,18 +32,29 @@ type Props = { } type State = { - requestKiltTokens: boolean + showPublicIdentityQRCode: boolean } const FAUCET_URL = process.env.REACT_APP_FAUCET_URL class IdentityView extends React.Component { + 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() { @@ -50,12 +62,12 @@ class IdentityView extends React.Component { 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 { contact.publicIdentity.address ) } - const classes = ['IdentityView', selected ? 'selected' : ''] + const publicIdentityWithServiceAddress = {...identity.getPublicIdentity(), serviceAddress: MessageRepository.URL} + const togglePublicIdentityQRCodeButtonTxt = `${showPublicIdentityQRCode ? "Hide" : "Show"} QR Code` return (
{selected &&

Active identity

} @@ -100,6 +113,22 @@ class IdentityView extends React.Component {
{identity.boxPublicKeyAsHex}
+
+ +
+
+ + { + showPublicIdentityQRCode && +
+ +
+ } +
+
+
diff --git a/src/components/QRCodePublicIdentity/QRCodePublicIdentity.tsx b/src/components/QRCodePublicIdentity/QRCodePublicIdentity.tsx new file mode 100644 index 00000000..4592c50b --- /dev/null +++ b/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 = ({ + publicIdentity, +}) => { + const formattedPublicIdentity = JSON.stringify( + encodePublicIdentity(publicIdentity) + ) + return ( + // the public identity needs to be encoded in order to fit in a scannable QR Code + + ) +} + +export default QRCodePublicIdentity diff --git a/src/utils/PublicIdentity/Encoding.ts b/src/utils/PublicIdentity/Encoding.ts new file mode 100644 index 00000000..07e5c24d --- /dev/null +++ b/src/utils/PublicIdentity/Encoding.ts @@ -0,0 +1,11 @@ +import { IPublicIdentity } from '@kiltprotocol/sdk-js' + +const encodePublicIdentity = ( + publicIdentity: IPublicIdentity +): Array => [ + publicIdentity.address, + publicIdentity.boxPublicKeyAsHex, + ...(publicIdentity.serviceAddress ? [publicIdentity.serviceAddress] : []), +] + +export { encodePublicIdentity } diff --git a/yarn.lock b/yarn.lock index 4252eb80..88cabcb6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"