feat: List known identities in connections view

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

@@ -1,11 +1,42 @@
 import React from 'react'
-import { Box, Heading, Avatar } from 'rimble-ui'
-import Page from '../../layout/Page'
+import { Image } from 'rimble-ui'
+import md5 from 'md5'
 
-interface AvatarProps {}
+interface AvatarProps {
+  did: string
+  source?: string
+  size?: number
+  type?: 'square' | 'rounded' | 'circle'
+  highlight?: boolean
+}
+
+const Component: React.FC<AvatarProps> = ({ did, type, size, source, highlight }) => {
+  const avatarSize = size || 40
+  const avatarType = type || 'rounded'
+  const radius = {
+    square: 0,
+    rounded: 5,
+    circle: avatarSize / 2,
+  }
+
+  const gravatarType = 'identicon'
+  const GRAVATAR_URI = 'https://www.gravatar.com/avatar/'
+  const uri = GRAVATAR_URI + md5(did) + '?s=' + avatarSize * 2 + '&d=' + gravatarType
+  const src = source || uri
+
+  const highlighted = highlight ? { border: 1, padding: 1 } : {}
 
-const Component: React.FC<AvatarProps> = () => {
-  return <Box></Box>
+  return (
+    <Image
+      {...highlighted}
+      borderColor={'#4a4a4a'}
+      alt={`Avatar image for ${did}`}
+      borderRadius={radius[avatarType]}
+      height={avatarSize}
+      width={avatarSize}
+      src={src}
+    />
+  )
 }
 
 export default Component

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

@@ -35,6 +35,19 @@ export const identity = gql`
   }
 `
 
+export const allIdentities = gql`
+  query allIdentities {
+    identities {
+      isManaged
+      did
+      shortId
+      firstName
+      lastName
+      profileImage
+    }
+  }
+`
+
 export const managedIdentities = gql`
   query managedIdentities {
     managedIdentityTypes

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

@@ -1,15 +1,11 @@
 import React, { useContext } from 'react'
-import { Box, Avatar } from 'rimble-ui'
+import { Box } from 'rimble-ui'
 import { AppContext } from '../context/AppProvider'
-import md5 from 'md5'
+import Avatar from '../components/Avatar/Avatar'
 
 const Component = () => {
   const [appState] = useContext(AppContext)
 
-  const gravatarType = 'identicon'
-  const GRAVATAR_URI = 'https://www.gravatar.com/avatar/'
-  const uri = GRAVATAR_URI + md5(appState.defaultDid) + '?s=100' + '&d=' + gravatarType
-
   return (
     <Box
       p={3}
@@ -19,7 +15,7 @@ const Component = () => {
       display={'flex'}
       flexDirection={'column'}
     >
-      <Avatar size="45px" src={uri} />
+      <Avatar size={45} did={appState.defaultDid} type={'circle'} />
       <Box borderRadius={5} width={45} height={45} bg="#FFFFFF" p={3}></Box>
     </Box>
   )

examples/react-graphql/client/src/styles/base.css

@@ -30,7 +30,8 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-tr.interactive_table_row:hover {
+tr.interactive_table_row:hover,
+.identity_row:hover {
   background-color: #313131;
   cursor: pointer;
 }

examples/react-graphql/client/src/views/Connections/Connections.tsx

@@ -1,9 +1,49 @@
 import React from 'react'
 import { Box, Heading } from 'rimble-ui'
 import Page from '../../layout/Page'
+import Avatar from '../../components/Avatar/Avatar'
+import * as queries from '../../gql/queries'
+import { useQuery, useLazyQuery } from 'react-apollo'
+import * as Types from '../../types'
+import Panel from '../../components/Panel/Panel'
 
 const Component = () => {
-  return <Page title={'Connections'}></Page>
+  const { loading, data } = useQuery(queries.allIdentities)
+
+  console.log(data?.identities)
+
+  return (
+    <Page title={'Connections'}>
+      {/* <Avatar did={'ethr:did:0x145'} type={'circle'} size={60} /> */}
+
+      <Box p={3}>
+        <Panel heading={'Known identities'}>
+          <Box>
+            {data?.identities?.map((id: Types.Identity) => {
+              return (
+                <Box
+                  className={'identity_row'}
+                  key={id.did}
+                  mb={2}
+                  py={2}
+                  flexDirection={'row'}
+                  flex={1}
+                  display={'flex'}
+                  alignItems={'center'}
+                >
+                  <Box ml={3}>
+                    <Avatar did={id.did} source={id.profileImage} type={'circle'} highlight={id.isManaged} />
+                  </Box>
+                  <Box ml={3}>{id.shortId}</Box>
+                  <Box ml={3}>{id.isManaged && '(You manage this identity)'}</Box>
+                </Box>
+              )
+            })}
+          </Box>
+        </Panel>
+      </Box>
+    </Page>
+  )
 }
 
 export default Component

examples/react-graphql/client/src/views/Identity/IdentityDetail.tsx

@@ -31,9 +31,6 @@ const Component: React.FC<IdentityDetail> = () => {
   return (
     <>
       <Box borderRadius={1} bg="#222222" mb={32}>
-        <Box p={3} borderBottom={1} borderColor={'#4B4B4B'}>
-          <Heading as={'h5'}>DID Details</Heading>
-        </Box>
         <Box p={3} bg="#222222" mb={10}>
           <Heading as={'h5'} pb={2}>
             did