feat: delegation QR code (#263)

src/components/MyDelegationsListView/MyDelegationsListView.tsx

@@ -12,12 +12,15 @@ import Permissions from '../Permissions/Permissions'
 import SelectDelegationAction from '../SelectDelegationAction/SelectDelegationAction'
 
 import './MyDelegationsListView.scss'
+import QRCodeDelegationID from '../QRCodeDelegationID/QRCodeDelegationID'
+import { IMyIdentity } from '../../types/Contact'
+import FeedbackService from '../../services/FeedbackService'
+import { NotificationType } from '../../types/UserFeedback'
 
 type Props = {
   onCreateDelegation: () => void
   delegationEntries: IMyDelegation[]
   onRemoveDelegation: (delegation: IMyDelegation) => void
-
   isPCR: boolean
 }
 
@@ -37,6 +40,21 @@ class MyDelegationsListView extends React.Component<Props, State> {
     )
   }
 
+  private static showQRCode(
+    delegation: IMyDelegation,
+    identity: IMyIdentity
+  ): void {
+    FeedbackService.addBlockingNotification({
+      message: (
+        <QRCodeDelegationID
+          selectedIdentity={identity}
+          delegationId={delegation.id}
+        />
+      ),
+      type: NotificationType.INFO,
+    })
+  }
+
   constructor(props: Props) {
     super(props)
     this.state = {}
@@ -138,6 +156,12 @@ class MyDelegationsListView extends React.Component<Props, State> {
                           )
                         }
                         onDelete={() => this.handleDelete(delegationEntry)}
+                        onQRCode={(selectedIdentity: IMyIdentity) =>
+                          MyDelegationsListView.showQRCode(
+                            delegationEntry,
+                            selectedIdentity
+                          )
+                        }
                       />
                     </div>
                   </td>

src/components/QRCodeDelegationID/QRCodeDelegationID.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { QRCode } from 'react-qrcode-logo'
+import logo from '../../assets/kilt_small.svg'
+import {
+  encodePublicIdentityWithDelegation,
+  IAttesterWithDelegation,
+} from '../../utils/PublicIdentity/Encoding'
+import { IMyDelegation } from '../../state/ducks/Delegations'
+import { IMyIdentity } from '../../types/Contact'
+
+type Props = {
+  delegationId: IMyDelegation['id']
+  selectedIdentity: IMyIdentity
+}
+
+const QRCodeDelegationID: React.FunctionComponent<Props> = ({
+  delegationId,
+  selectedIdentity,
+}) => {
+  const publicIdentityWithDelegation: IAttesterWithDelegation = {
+    publicIdentity: selectedIdentity.identity.getPublicIdentity(),
+    delegationId,
+  }
+  const formattedDelegationID = JSON.stringify(
+    encodePublicIdentityWithDelegation(publicIdentityWithDelegation)
+  )
+  return (
+    <QRCode
+      size={250}
+      logoImage={logo}
+      logoWidth={44}
+      logoHeight={44}
+      fgColor="#751869"
+      quietZone={4}
+      qrStyle="dots"
+      value={formattedDelegationID}
+    />
+  )
+}
+
+export default QRCodeDelegationID

src/components/QRCodePublicIdentity/QRCodePublicIdentity.tsx

@@ -3,7 +3,7 @@ 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'
+import { encodePublicIdentity } from '../../utils/PublicIdentity/Encoding'
 
 type Props = {
   publicIdentity: IPublicIdentity

src/components/SelectDelegationAction/SelectDelegationAction.tsx

@@ -1,6 +1,8 @@
 import * as sdk from '@kiltprotocol/sdk-js'
 import React from 'react'
 import { connect, MapStateToProps } from 'react-redux'
+import { IMyIdentity } from '../../types/Contact'
+import * as Wallet from '../../state/ducks/Wallet'
 import * as Delegations from '../../state/ducks/Delegations'
 import { IMyDelegation } from '../../state/ducks/Delegations'
 import * as UiState from '../../state/ducks/UiState'
@@ -11,6 +13,7 @@ import SelectAction, { Action } from '../SelectAction/SelectAction'
 
 type StateProps = {
   debugMode: boolean
+  selectedIdentity: IMyIdentity
 }
 
 type OwnProps = {
@@ -23,6 +26,7 @@ type OwnProps = {
   onDelete?: (delegationEntry: IMyDelegation) => void
   onRevokeAttestations?: () => void
   onRevokeDelegation?: () => void
+  onQRCode?: (selectedIdentity: IMyIdentity) => void
 }
 
 type Props = StateProps & OwnProps
@@ -109,6 +113,22 @@ class SelectDelegationAction extends React.Component<Props> {
     return undefined
   }
 
+  private getQRCodeAction(): Action | undefined {
+    const { delegation, debugMode, onQRCode, selectedIdentity } = this.props
+    if (!delegation || !onQRCode) {
+      return undefined
+    }
+
+    if (debugMode || (!delegation.revoked && this.isMine())) {
+      return {
+        callback: onQRCode.bind(selectedIdentity),
+        label: 'Show QR Code',
+      }
+    }
+
+    return undefined
+  }
+
   private isMine(): boolean {
     const { delegation } = this.props
     if (!delegation) {
@@ -128,6 +148,7 @@ class SelectDelegationAction extends React.Component<Props> {
       this.getDeleteAction(),
       this.getRevokeDelegationAction(),
       this.getRevokeAttestationsAction(),
+      this.getQRCodeAction(),
     ].filter((action: Action) => action)
 
     return (
@@ -146,6 +167,7 @@ const mapStateToProps: MapStateToProps<
   ReduxState
 > = state => ({
   debugMode: UiState.getDebugMode(state),
+  selectedIdentity: Wallet.getSelectedIdentity(state),
 })
 
 export default connect(mapStateToProps)(SelectDelegationAction)

src/utils/PublicIdentity/Encoding.ts

@@ -1,9 +1,25 @@
-import { IPublicIdentity } from '@kiltprotocol/sdk-js'
+import { IPublicIdentity, IDelegationNode } from '@kiltprotocol/sdk-js'
 
 const encodePublicIdentity = (publicIdentity: IPublicIdentity): string[] => [
   publicIdentity.address,
   publicIdentity.boxPublicKeyAsHex,
   ...(publicIdentity.serviceAddress ? [publicIdentity.serviceAddress] : []),
 ]
 
-export default encodePublicIdentity
+export type IAttesterWithDelegation = {
+  publicIdentity: IPublicIdentity
+  delegationId: IDelegationNode['id']
+}
+
+const encodePublicIdentityWithDelegation = (
+  publicIdentityWithDelegation: IAttesterWithDelegation
+): string[] => [
+  publicIdentityWithDelegation.delegationId,
+  publicIdentityWithDelegation.publicIdentity.address,
+  publicIdentityWithDelegation.publicIdentity.boxPublicKeyAsHex,
+  ...(publicIdentityWithDelegation.publicIdentity.serviceAddress
+    ? [publicIdentityWithDelegation.publicIdentity.serviceAddress]
+    : []),
+]
+
+export { encodePublicIdentity, encodePublicIdentityWithDelegation }