feat: Show Request in sidepanel

examples/react-graphql/client/src/components/Credential/Credential.tsx

@@ -27,7 +27,7 @@ const Component: React.FC<Props> = ({ onClick, detailMode, fields, jwt, iss, sub
           <Text fontWeight={'bold'}>{iss.shortId}</Text>
           <Box flexDirection={'row'} display={'flex'}>
             <Icon name={'PlayArrow'} />
-            <Text>{sub.shortId}</Text>
+            <Text>{sub?.shortId}</Text>
           </Box>
         </Box>
       </Box>

examples/react-graphql/client/src/components/MessageItem/MessageItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Heading, Text, Icon, Avatar } from 'rimble-ui'
+import { Box, Heading, Text, Icon, Avatar, Button } from 'rimble-ui'
 import * as Types from '../../types'
 
 import './MessageItem.css'
@@ -10,6 +10,11 @@ interface Props {
    */
   activity?: string
 
+  /**
+   * The type of message
+   */
+  type: string
+
   /**
    * The issuer of this message item
    */
@@ -18,22 +23,48 @@ interface Props {
   /**
    * The subject
    */
+  showRequest: () => void
   receiver: Types.Identity
   attachments: any
   renderAttachments?: (attachmentItem: any, itemIndex: number) => React.ReactNode
 }
 
-const Component: React.FC<Props> = ({ attachments, renderAttachments, sender, receiver }) => {
+const Component: React.FC<Props> = ({
+  attachments,
+  renderAttachments,
+  sender,
+  receiver,
+  type,
+  showRequest,
+}) => {
   return (
     <Box className={'message_item'} p={3}>
       <Box flexDirection={'row'} display={'flex'} alignItems={'center'}>
         <Avatar size={'50'} src="https://airswap-token-images.s3.amazonaws.com/DAI.png" />
         <Box ml={2}>
-          <Text>
-            <b>{sender.shortId}</b> sent a message to <b>{receiver ? receiver.shortId : 'You'}</b>
-          </Text>
+          {type == 'sdr' ? (
+            <Text>
+              <b>{sender.shortId}</b> requested information from <b>you</b>
+            </Text>
+          ) : type == 'w3c.vc' ? (
+            <Text>
+              <b>{sender.did === receiver?.did ? 'You' : sender.shortId}</b> issued a credential to
+              <b> {receiver ? receiver.shortId : 'yourself'}</b>
+            </Text>
+          ) : (
+            <Text>
+              <b>You</b> shared credentials with <b>{receiver ? receiver.shortId : 'yourself'}</b>
+            </Text>
+          )}
         </Box>
       </Box>
+      {type == 'sdr' && (
+        <Box p={3}>
+          <Button size={'medium'} onClick={showRequest}>
+            Show Request
+          </Button>
+        </Box>
+      )}
       {attachments && attachments.length > 0 && renderAttachments && (
         <Box p={3} pl={4}>
           {attachments.map((item: any, itemIndex: number) => {

examples/react-graphql/client/src/components/Request/Request.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Box, Heading } from 'rimble-ui'
+import * as Types from '../../types'
+
+interface Props {
+  sender: Types.Identity
+  receiver: Types.Identity
+  sdr: any
+}
+
+const Component: React.FC<Props> = ({ sdr }) => {
+  console.log(sdr)
+
+  return <Box>Show contents from query. Results are logged in console..</Box>
+}
+
+export default Component

examples/react-graphql/client/src/gql/mutations.ts

@@ -0,0 +1,32 @@
+import { gql } from 'apollo-boost'
+
+export const deleteIdentity = gql`
+  mutation deleteIdentity($type: String, $did: String) {
+    deleteIdentity(type: $type, did: $did)
+  }
+`
+
+export const actionSignVc = gql`
+  mutation actionSignVc($did: String!, $data: VerifiableCredentialInput!) {
+    actionSignVc(did: $did, data: $data)
+  }
+`
+
+export const actionSignSDR = gql`
+  mutation signSDR($did: String!, $data: SDRInput!) {
+    actionSignSDR(did: $did, data: $data)
+  }
+`
+export const actionSendJwt = gql`
+  mutation actionSendJwt($from: String!, $to: String!, $jwt: String!) {
+    actionSendJwt(from: $from, to: $to, jwt: $jwt)
+  }
+`
+
+export const createIdentity = gql`
+  mutation createIdentity($type: String) {
+    createIdentity(type: $type) {
+      did
+    }
+  }
+`

examples/react-graphql/client/src/gql/queries.ts

@@ -0,0 +1,177 @@
+import { gql } from 'apollo-boost'
+
+export const credential = gql`
+  query credential($id: ID!) {
+    credential(id: $id) {
+      hash
+      rowId
+      iss {
+        did
+        shortId
+      }
+      sub {
+        did
+        shortId
+      }
+      jwt
+      nbf
+      iat
+      fields {
+        isObj
+        type
+        value
+      }
+    }
+  }
+`
+
+export const identity = gql`
+  query identity($did: ID!) {
+    identity(did: $did) {
+      did
+      type
+      shortId
+    }
+  }
+`
+
+export const managedIdentities = gql`
+  query managedIdentities {
+    managedIdentityTypes
+    managedIdentities {
+      did
+      type
+      shortId
+    }
+  }
+`
+
+export const queryMessage = gql`
+  query message($id: ID!, $defaultDid: ID!) {
+    message(id: $id) {
+      id
+      threadId
+      type
+      timestamp
+      sdr(sub: $defaultDid) {
+        iss {
+          did {
+            did
+            shortId
+          }
+          url
+        }
+        claimType
+        reason
+        essential
+        vc {
+          hash
+          rowId
+          iss {
+            did
+            shortId
+            profileImage
+          }
+          sub {
+            did
+            shortId
+            profileImage
+          }
+          jwt
+          fields {
+            type
+            value
+            isObj
+          }
+        }
+      }
+      sender {
+        did
+        shortId
+        profileImage
+      }
+    }
+  }
+`
+
+export const allMessages = gql`
+  query allMessages($activeDid: ID!) {
+    identity(did: $activeDid) {
+      did
+      messagesAll {
+        id
+        raw
+        data
+        threadId
+        type
+        timestamp
+        sender {
+          did
+          shortId
+          profileImage
+        }
+        sdr(sub: $activeDid) {
+          iss {
+            did {
+              did
+              shortId
+            }
+            url
+          }
+          claimType
+          reason
+          essential
+          vc {
+            hash
+            rowId
+            iss {
+              did
+              shortId
+              profileImage
+            }
+            sub {
+              did
+              shortId
+              profileImage
+            }
+            jwt
+            fields {
+              type
+              value
+              isObj
+            }
+          }
+        }
+        receiver {
+          did
+          shortId
+          profileImage
+        }
+        vc {
+          rowId
+          hash
+          iss {
+            did
+            shortId
+            profileImage
+          }
+          sub {
+            did
+            shortId
+            profileImage
+          }
+          fields {
+            type
+            value
+            isObj
+          }
+        }
+        metaData {
+          type
+          id
+          data
+        }
+      }
+    }
+  }
+`

examples/react-graphql/client/src/layout/Layout.tsx

@@ -13,16 +13,22 @@ import Issue from '../views/Issue/Issue'
 import Sidebar from './Sidebar'
 import SidePanel from './SidePanel'
 import NavigationLeft from './NavigationLeft'
+
 import Credential from '../components/Credential/Credential'
+import RequestDetail from '../components/Request/Request'
 
-import * as queries from '../queries'
+import * as queries from '../gql/queries'
 
 interface DashboardProps {}
 
 const renderCredentialQuery = (props: any) => {
   return <Credential detailMode {...props?.credential} />
 }
 
+const renderSDRQuery = (props: any) => {
+  return <RequestDetail {...props?.message} />
+}
+
 const Dashboard: React.FC<DashboardProps> = () => {
   return (
     <Router>
@@ -76,6 +82,14 @@ const Dashboard: React.FC<DashboardProps> = () => {
               renderQuery={renderCredentialQuery}
             ></SidePanel>
           </Route>
+          <Route path="/activity/sdr/:id">
+            <SidePanel
+              title={'Selective Disclosure'}
+              closeUrl={'/activity'}
+              query={queries.queryMessage}
+              renderQuery={renderSDRQuery}
+            ></SidePanel>
+          </Route>
         </Switch>
       </Flex>
     </Router>

examples/react-graphql/client/src/layout/SidePanel.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useContext } from 'react'
 import { Box, Heading, Icon } from 'rimble-ui'
 import { useHistory, useParams } from 'react-router-dom'
 import { useQuery, useLazyQuery } from '@apollo/react-hooks'
+import { AppContext } from '../context/AppProvider'
 
 interface Props {
   title: string
@@ -11,11 +12,12 @@ interface Props {
 }
 
 const Component: React.FC<Props> = ({ title, closeUrl, query, children, renderQuery }) => {
-  let history = useHistory()
+  const [appState] = useContext(AppContext)
+  const history = useHistory()
   const { id } = useParams()
 
   const [getQuery, { loading, data }] = useLazyQuery(query, {
-    variables: { id },
+    variables: { id, defaultDid: appState.defaultDid },
   })
 
   useEffect(() => {