feat: Show gravatar for did

decentralized-identity · Jan 24, 2020 · f537372 · f537372
1 parent 1351a56
commit f537372
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 32 deletions.
diff --git a/examples/react-graphql/client/@types/md5.d.ts b/examples/react-graphql/client/@types/md5.d.ts
@@ -0,0 +1 @@
+declare module 'md5'
diff --git a/examples/react-graphql/client/package.json b/examples/react-graphql/client/package.json
@@ -15,6 +15,7 @@
     "@types/styled-components": "^4.4.2",
     "apollo-boost": "^0.4.7",
     "graphql": "^14.5.8",
+    "md5": "^2.2.1",
     "react": "^16.12.0",
     "react-apollo": "^3.1.3",
     "react-dom": "^16.12.0",

diff --git a/examples/react-graphql/client/src/index.tsx b/examples/react-graphql/client/src/index.tsx
@@ -4,7 +4,7 @@ import Layout from './layout/Layout'
 import ApolloClient from 'apollo-boost'
 import { ApolloProvider } from 'react-apollo'
 import * as serviceWorker from './serviceWorker'
-import { BaseStyles, theme } from 'rimble-ui'
+import { BaseStyles, theme, ToastMessage } from 'rimble-ui'
 import { ThemeProvider } from 'styled-components'
 import { AppProvider } from './context/AppProvider'
 
@@ -41,6 +41,7 @@ ReactDOM.render(
         })}
       >
         <BaseStyles id="base_styles_container">
+          <ToastMessage.Provider ref={(node: any) => (window.toastProvider = node)} />
           <Layout />
         </BaseStyles>
       </ThemeProvider>

diff --git a/examples/react-graphql/client/src/layout/Sidebar.tsx b/examples/react-graphql/client/src/layout/Sidebar.tsx
@@ -1,7 +1,15 @@
-import React from 'react'
-import { Box } from 'rimble-ui'
+import React, { useContext } from 'react'
+import { Box, Avatar } from 'rimble-ui'
+import { AppContext } from '../context/AppProvider'
+import md5 from 'md5'
 
 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}
@@ -11,7 +19,7 @@ const Component = () => {
       display={'flex'}
       flexDirection={'column'}
     >
-      <Box borderRadius={25} width={50} height={50} bg="#FFFFFF" p={3}></Box>
+      <Avatar size="45px" src={uri} />
       <Box borderRadius={5} width={45} height={45} bg="#FFFFFF" p={3}></Box>
     </Box>
   )

diff --git a/examples/react-graphql/client/src/queries.ts b/examples/react-graphql/client/src/queries.ts
@@ -6,6 +6,7 @@ export const managedIdentities = gql`
     managedIdentities {
       did
       type
+      shortId
     }
   }
 `

diff --git a/examples/react-graphql/client/src/views/Activity/Activity.tsx b/examples/react-graphql/client/src/views/Activity/Activity.tsx
@@ -1,5 +1,19 @@
-import React, { useContext } from 'react'
-import { Flex, Box, Text, Heading, Button, Icon, Table, Field, Input, Card, Loader } from 'rimble-ui'
+import React, { useContext, useState } from 'react'
+import {
+  Flex,
+  Box,
+  Text,
+  Heading,
+  Button,
+  Icon,
+  Table,
+  Field,
+  Input,
+  Card,
+  Loader,
+  QR,
+  Modal,
+} from 'rimble-ui'
 import Panel from '../../components/Panel/Panel'
 import Page from '../../layout/Page'
 import * as queries from '../../queries'
@@ -10,6 +24,8 @@ interface Activity {}
 
 const Activity: React.FC<Activity> = () => {
   const [appState] = useContext(AppContext)
+  const [isQROpen, setIsQROpen] = useState(false)
+  const [qrValue, setQrValue] = useState('')
 
   const { loading: messagesLoading, data: messagesData } = useQuery(queries.allMessages, {
     variables: { activeDid: appState.defaultDid },
@@ -19,6 +35,20 @@ const Activity: React.FC<Activity> = () => {
 
   return (
     <Page title={'Activity'}>
+      <Modal isOpen={isQROpen}>
+        <Button.Text
+          icononly
+          icon={'Close'}
+          color={'moon-gray'}
+          position={'absolute'}
+          top={0}
+          right={0}
+          mt={3}
+          mr={3}
+          onClick={() => setIsQROpen(false)}
+        />
+        <QR value={qrValue} size={500} />
+      </Modal>
       <Panel heading={'Messages'} headerBorder={0}>
         <Table border={0} color={'#FFFFFF'} borderColor={'#4B4B4B'}>
           <thead>
@@ -49,11 +79,12 @@ const Activity: React.FC<Activity> = () => {
                 </td>
                 <td>
                   <Icon
-                    name="Search"
-                    size="30"
+                    style={{ cursor: 'pointer' }}
+                    name={'Visibility'}
+                    size={'30'}
                     onClick={() => {
-                      // setQrValue(msg.raw)
-                      // setIsQROpen(true)
+                      setQrValue(msg.raw)
+                      setIsQROpen(true)
                     }}
                   />
                 </td>

diff --git a/examples/react-graphql/client/src/views/Identity/IdentitiyManager.tsx b/examples/react-graphql/client/src/views/Identity/IdentitiyManager.tsx
@@ -57,22 +57,26 @@ const Component = () => {
           </thead>
           <tbody>
             {managedIdentitiesData?.managedIdentities?.map(
-              (identity: { did: string; type: string; shortId: string; name: string }) => (
-                <tr
-                  key={identity.did}
-                  className={`interactive_table_row ${
-                    highlightedIdentity === identity.did ? 'highlighted' : ''
-                  }`}
-                  onClick={() => showIdentityDetail(identity.did)}
-                >
-                  <td>{identity.did}</td>
-                  <td>{identity.type}</td>
-                  <td>{identity.shortId}</td>
-                  <td className={'icon_cell'}>
-                    {defaultDid === identity.did && <Icon name={'Check'} color={'green'} />}
-                  </td>
-                </tr>
-              ),
+              (identity: { did: string; type: string; shortId: string; name: string }) => {
+                console.log(identity)
+
+                return (
+                  <tr
+                    key={identity.did}
+                    className={`interactive_table_row ${
+                      highlightedIdentity === identity.did ? 'highlighted' : ''
+                    }`}
+                    onClick={() => showIdentityDetail(identity.did)}
+                  >
+                    <td>{identity.did}</td>
+                    <td>{identity.type}</td>
+                    <td>{identity.shortId}</td>
+                    <td className={'icon_cell'}>
+                      {defaultDid === identity.did && <Icon name={'Check'} color={'green'} />}
+                    </td>
+                  </tr>
+                )
+              },
             )}
           </tbody>
         </Table>

diff --git a/examples/react-graphql/client/src/views/Identity/IdentityDetail.tsx b/examples/react-graphql/client/src/views/Identity/IdentityDetail.tsx
@@ -21,7 +21,7 @@ const Component = () => {
         bg="#222222"
       >
         <Heading as={'h4'}>Identity</Heading>
-        <Icon name={'Close'} onClick={() => history.push('/identities')} />
+        <Icon name={'Close'} onClick={() => history.push('/identities')} style={{ cursor: 'pointer' }} />
       </Box>
       <Box p={3} pb={64} className={'scroll-container'}>
         <Box borderRadius={1} bg="#222222" mb={32}>

diff --git a/examples/react-graphql/client/src/views/Issue/Issue.tsx b/examples/react-graphql/client/src/views/Issue/Issue.tsx
@@ -1,18 +1,23 @@
 import React, { useState, useContext } from 'react'
-import { Box, Heading, Button, Field, Text, Form, Flex, Card, Input, Loader } from 'rimble-ui'
+import { Box, Button, Field, Text, Form, Flex, Input, Loader, ToastMessage } from 'rimble-ui'
 import Page from '../../layout/Page'
 import Panel from '../../components/Panel/Panel'
 import { AppContext } from '../../context/AppProvider'
 import { useQuery, useMutation } from '@apollo/react-hooks'
 import * as queries from '../../queries'
 
+declare global {
+  interface Window {
+    toastProvider: any
+  }
+}
+
 const Component = () => {
   const [appState] = useContext(AppContext)
   const [isSending, setIsSending] = useState(false)
   const [receiver, setReceiver] = useState('did:web:uport.me')
   const [claimType, setClaimType] = useState('name')
   const [claimValue, setClaimValue] = useState('Alice')
-
   const [signVc] = useMutation(queries.actionSignVc)
   const [sendJwt] = useMutation(queries.actionSendJwt, {
     refetchQueries: [
@@ -56,9 +61,9 @@ const Component = () => {
 
       console.log(dataSend)
 
-      // window.toastProvider.addMessage('Credential sent!', { variant: 'success' })
+      window.toastProvider.addMessage('Credential sent!', { variant: 'success' })
     } catch (e) {
-      // window.toastProvider.addMessage(e.message, { variant: 'failure' })
+      window.toastProvider.addMessage(e.message, { variant: 'failure' })
     }
 
     setIsSending(false)

diff --git a/examples/react-graphql/client/yarn.lock b/examples/react-graphql/client/yarn.lock
@@ -2967,6 +2967,11 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+charenc@~0.0.1:
+  version "0.0.2"
+  resolved "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
+  integrity sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=
+
 chokidar@^2.0.2, chokidar@^2.0.4, chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -3415,6 +3420,11 @@ [email protected], cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+crypt@~0.0.1:
+  version "0.0.2"
+  resolved "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
+  integrity sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=
+
 crypto-browserify@^3.11.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
@@ -5692,7 +5702,7 @@ is-binary-path@^1.0.0:
   dependencies:
     binary-extensions "^1.0.0"
 
-is-buffer@^1.0.2, is-buffer@^1.1.5:
+is-buffer@^1.0.2, is-buffer@^1.1.5, is-buffer@~1.1.1:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
@@ -6852,6 +6862,15 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
+md5@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz#53ab38d5fe3c8891ba465329ea23fac0540126f9"
+  integrity sha1-U6s41f48iJG6RlMp6iP6wFQBJvk=
+  dependencies:
+    charenc "~0.0.1"
+    crypt "~0.0.1"
+    is-buffer "~1.1.1"
+
 [email protected]:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,6 +6,7 @@ export const managedIdentities = gql` @@
         managedIdentities {
           did
           type
+          shortId
         }
       }
     `
@@ Expand Down @@