Feat/global-components (#164)

* feat: move IdentifierProfile to plugin * feat: move CredentialSummary to plugin * feat(plugin): add VerifiableCredentialComponent * feat: refactoring * feat: add BrainShare plugin * fix: generic vc template
decentralized-identity · Sep 27, 2023 · 9640325 · 9640325
1 parent f490e7b
commit 9640325
Show file tree

Hide file tree

Showing 33 changed files with 305 additions and 985 deletions.
diff --git a/packages/agent-explore/package.json b/packages/agent-explore/package.json
@@ -96,15 +96,14 @@
     "@types/express": "^4.17.17",
     "@types/jest": "^29.5.1",
     "@types/md5": "^2.3.2",
-    "@types/react": "^18.2.7",
-    "@types/react-dom": "^18.2.4",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
     "@types/react-router-dom": "^5.3.3",
     "@types/url-parse": "^1.4.8",
     "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "@typescript-eslint/parser": "^6.4.0",
     "@veramo-community/agent-explorer-plugin": "workspace:*",
-    "@veramo-community/react-components": "^1.5.0",
     "@veramo-community/veramo-react": "^1.1.0",
     "@veramo/core": "5.5.2-next.4",
     "@veramo/core-types": "5.5.2-next.4",

diff --git a/packages/agent-explore/src/components/CredentialInfo.tsx b/packages/agent-explore/src/components/CredentialInfo.tsx
@@ -27,7 +27,7 @@ const CredentialInfo: React.FC<CredentialInfoProps> = ({ credential }) => {
     <>
       <Descriptions
         bordered
-        column={{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }}
+        column={{ xxl: 1, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }}
       >
         <Descriptions.Item label="Type">
           {(credential.type as string[]).join(',')}

diff --git a/packages/agent-explore/src/components/CredentialTabs.tsx b/packages/agent-explore/src/components/CredentialTabs.tsx
@@ -1,13 +1,8 @@
 import React from 'react'
-import { Button, Row, Tabs, Card } from 'antd'
+import { Input, Tabs } from 'antd'
 import { UniqueVerifiableCredential } from '@veramo/core'
-import { VerifiableCredential } from '@veramo-community/react-components'
 import CredentialInfo from './CredentialInfo'
-import JsonBlock from './Json'
-import { getIssuerDID, CredentialActionsDropdown } from '@veramo-community/agent-explorer-plugin'
-import IdentifierProfile from './IdentifierProfile'
-import { EllipsisOutlined } from '@ant-design/icons'
-import { formatRelative } from 'date-fns'
+import { VerifiableCredentialComponent } from '@veramo-community/agent-explorer-plugin'
 
 interface CredentialTabsProps {
   uniqueCredential: UniqueVerifiableCredential
@@ -20,28 +15,9 @@ const CredentialTabs: React.FC<CredentialTabsProps> = ({ uniqueCredential }) =>
       items={[
         {
           key: '0',
-          label: 'Pretty',
+          label: 'Credential',
           children: (
-            <Card
-              title={<IdentifierProfile did={getIssuerDID(verifiableCredential)} />}
-              extra={
-                <Row align={'middle'}>
-                  <div>
-                    {formatRelative(
-                      new Date(verifiableCredential.issuanceDate),
-                      new Date(),
-                    )}
-                  </div>{' '}
-                  <CredentialActionsDropdown uniqueCredential={uniqueCredential}>
-                    <Button type="text">
-                      <EllipsisOutlined />
-                    </Button>
-                  </CredentialActionsDropdown>
-                </Row>
-              }
-            >
-              <VerifiableCredential credential={verifiableCredential} />
-            </Card>
+            <VerifiableCredentialComponent credential={uniqueCredential} />
           ),
         },
         {
@@ -52,7 +28,13 @@ const CredentialTabs: React.FC<CredentialTabsProps> = ({ uniqueCredential }) =>
         {
           key: '2',
           label: 'Data',
-          children: <JsonBlock title="Raw JSON" data={verifiableCredential} />,
+          children: <Input.TextArea 
+            value={JSON.stringify(verifiableCredential, null, 2)} 
+            style={{
+              height: '50vh',
+              fontFamily: 'monospace',
+            }}
+            />,
         },
       ]}
     />

diff --git a/packages/agent-explore/src/components/Json.tsx b/packages/agent-explore/src/components/Json.tsx
diff --git a/packages/agent-explore/src/context/web3/VeramoWeb3Provider.tsx b/packages/agent-explore/src/context/web3/VeramoWeb3Provider.tsx
@@ -4,7 +4,7 @@ import { createAgent, IAgentPlugin, IResolver, TAgent } from '@veramo/core'
 import { ConnectorInfo, createWeb3Agent } from './web3Agent'
 import { hooks as metamaskHooks, metaMask } from './metaMask'
 import { AgentRestClient } from '@veramo/remote-client'
-import { IdentifierProfilePlugin } from '../plugins/IdentifierProfile'
+import { IdentifierProfilePlugin } from '@veramo-community/agent-explorer-plugin'
 
 export const VeramoWeb3Provider = ({
   children,

diff --git a/packages/agent-explore/src/context/web3/web3Agent.ts b/packages/agent-explore/src/context/web3/web3Agent.ts
@@ -48,7 +48,7 @@ import { SaveMessageHandler } from './saveMessageHandler'
 import {
   IdentifierProfilePlugin,
   IIdentifierProfilePlugin,
-} from '../plugins/IdentifierProfile'
+} from '@veramo-community/agent-explorer-plugin'
 import { DIDDiscovery } from '@veramo/did-discovery'
 // FIXME: This import causes an error: Module not found: Error: Can't resolve 'react-native-sqlite-storage' in '[...]/node_modules/typeorm/browser/driver/react-native'
 // import { DataStoreDiscoveryProvider } from '@veramo/data-store'

diff --git a/packages/agent-explore/src/index.tsx b/packages/agent-explore/src/index.tsx
@@ -7,7 +7,7 @@ import * as antd from 'antd'
 import * as antdPro from '@ant-design/pro-components';
 import * as reactquery from 'react-query';
 import * as veramoreact from '@veramo-community/veramo-react'
-import * as veramoreactcomponents from '@veramo-community/react-components'
+import * as agentexplorerplugin from '@veramo-community/agent-explorer-plugin'
 import * as reactrouterdom from 'react-router-dom'
 import * as uuid from 'uuid'
 import * as datefns from 'date-fns'
@@ -20,7 +20,7 @@ declare global {
     antdPro: any
     reactquery: any
     veramoreact: any
-    veramoreactcomponents: any
+    agentexplorerplugin: any
     reactrouterdom: any
     uuid: any
     datefns: any
@@ -33,7 +33,7 @@ window.antd = antd
 window.antdPro = antdPro
 window.reactquery = reactquery
 window.veramoreact = veramoreact
-window.veramoreactcomponents = veramoreactcomponents
+window.agentexplorerplugin = agentexplorerplugin
 window.reactrouterdom = reactrouterdom
 window.uuid = uuid
 window.datefns = datefns

diff --git a/packages/agent-explore/src/layout/Layout.tsx b/packages/agent-explore/src/layout/Layout.tsx
@@ -36,7 +36,7 @@ const Layout = () => {
   const mainMenuItems: MenuDataItem = []
 
   plugins.forEach((plugin) => {
-    if (plugin.config.enabled 
+    if (plugin.config?.enabled 
       && plugin.menuItems 
       && (
         !plugin.requiredMethods 
@@ -141,7 +141,7 @@ const Layout = () => {
           <Route path="/settings/web3" element={<Web3 />} />
           <Route path="/settings/version" element={<Version />} />
           {plugins.map((plugin) => {
-            if (plugin.config.enabled && plugin.routes) {
+            if (plugin.config?.enabled && plugin.routes) {
               return plugin.routes.map((route) => {
                 return (
                   <Route

diff --git a/packages/agent-explore/src/pages/settings/Plugins.tsx b/packages/agent-explore/src/pages/settings/Plugins.tsx
@@ -16,6 +16,17 @@ import {CSS} from '@dnd-kit/utilities';
 import { IAgentExplorerPlugin } from '@veramo-community/agent-explorer-plugin'
 
 const communityPlugins: IAgentExplorerPlugin[] = [
+  {
+    config: {
+      url: 'https://cdn.jsdelivr.net/gh/veramolabs/brainshare-agent-explorer-plugin/dist/plugin.js',
+      enabled: true,
+    },
+    name: 'Brain share',
+    description: 'Decentralized wiki',
+    requiredMethods: [],
+    routes: [],
+    menuItems: [],
+  },
   {
     config: {
       url: 'https://cdn.jsdelivr.net/gh/veramolabs/agent-explorer-plugin-social-feed/dist/plugin.js',
@@ -76,16 +87,16 @@ const communityPlugins: IAgentExplorerPlugin[] = [
 const SortableItem = ({ item }: { item: IAgentExplorerPlugin}) => {
   const { notification } = App.useApp()
   const { removePluginConfig, switchPlugin } = usePlugins()
-  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: item.config.url });
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: item.config?.url || '' });
   const actions: React.ReactNode[] = []
-  if (!item.config.url.startsWith('core://')) {
+  if (!item.config?.url.startsWith('core://')) {
     actions.push(<Button
       icon={<DeleteOutlined />}
       danger
       type="text"
       onClick={() => {
         if (window.confirm(`Delete ${item.name}`)) {
-          removePluginConfig(item.config.url)
+          removePluginConfig(item.config?.url || '')
           notification.success({
             message: 'Plugin removed',
           })
@@ -94,7 +105,7 @@ const SortableItem = ({ item }: { item: IAgentExplorerPlugin}) => {
     />)
   }
 
-  actions.push(<Switch checked={item.config.enabled} onChange={(checked) => switchPlugin(item.config.url, checked)} />)
+  actions.push(<Switch checked={item.config?.enabled} onChange={(checked) => switchPlugin(item.config?.url || '', checked)} />)
   actions.push(<MenuOutlined ref={setNodeRef} {...attributes} {...listeners} className="draggable-item"/>)
   return (
     <List.Item 
@@ -125,14 +136,14 @@ export const Plugins = () => {
     const { active, over } = event;
 
     if (active.id !== over.id) {
-      const activeIndex = plugins.findIndex((plugin) => plugin.config.url === active.id);
-      const overIndex = plugins.findIndex((plugin) => plugin.config.url === over.id);
+      const activeIndex = plugins.findIndex((plugin) => plugin.config?.url === active.id);
+      const overIndex = plugins.findIndex((plugin) => plugin.config?.url === over.id);
 
       if (activeIndex !== -1 && overIndex !== -1) {
         const reorderedPlugins = [...plugins];
         [reorderedPlugins[activeIndex], reorderedPlugins[overIndex]] = [reorderedPlugins[overIndex], reorderedPlugins[activeIndex]];
 
-        updatePluginConfigs(reorderedPlugins.map((plugin) => plugin.config));
+        updatePluginConfigs(reorderedPlugins.map((plugin) => plugin.config || {url: '', enabled: true}));
       }
     }
   };
@@ -158,12 +169,12 @@ export const Plugins = () => {
       >
 
         <SortableContext 
-          items={plugins.map((plugin) => plugin.config.url)} 
+          items={plugins.map((plugin) => plugin.config?.url || '')} 
           strategy={verticalListSortingStrategy}
           >
           <List
             dataSource={plugins}
-            renderItem={(item) => <SortableItem item={item} key={item.config.url}/>}
+            renderItem={(item) => <SortableItem item={item} key={item.config?.url}/>}
           />
         </SortableContext>
         <DragOverlay />
@@ -183,10 +194,10 @@ export const Plugins = () => {
                     actions={[
                       <Button 
                       type="primary"
-                      disabled={plugins.find((plugin) => plugin.config.url === item.config.url) !== undefined}
+                      disabled={plugins.find((plugin) => plugin.config?.url === item.config?.url) !== undefined}
                       onClick={() => {
                         setDrawerOpen(false)
-                        addPluginConfig({url: item.config.url, enabled: true})
+                        addPluginConfig({url: item.config?.url || '', enabled: true})
                         setUrl('')
                       }}
                       >Add</Button>

diff --git a/packages/agent-explore/src/plugins/chats/ChatHeader.tsx b/packages/agent-explore/src/plugins/chats/ChatHeader.tsx
@@ -7,11 +7,10 @@ import { IDIDDiscovery } from '@veramo/did-discovery'
 import { useQuery } from 'react-query'
 import { FormOutlined, QrcodeOutlined } from '@ant-design/icons'
 import { IIdentifier } from '@veramo/core'
-import IdentifierProfile from '../../components/IdentifierProfile'
-import {
-  IIdentifierProfile,
-  IIdentifierProfilePlugin,
-} from '../../context/plugins/IdentifierProfile'
+import { 
+  IdentifierProfile, 
+  IIdentifierProfile, 
+  IIdentifierProfilePlugin } from '@veramo-community/agent-explorer-plugin'
 import NewChatThreadModal from './NewChatThreadModal'
 import { useNavigate } from 'react-router-dom'
 import ChatInviteQRCodeModal from './ChatInviteQRCodeModal'

diff --git a/packages/agent-explore/src/plugins/chats/ChatThreadProfileHeader.tsx b/packages/agent-explore/src/plugins/chats/ChatThreadProfileHeader.tsx
@@ -3,7 +3,7 @@ import { Row, Typography, Avatar, Col, theme } from 'antd'
 import { shortId } from '@veramo-community/agent-explorer-plugin'
 import { IMessage } from '@veramo/core'
 import { useChat } from '../../context/ChatProvider'
-import { IIdentifierProfile } from '../../context/plugins/IdentifierProfile'
+import { IIdentifierProfile } from '@veramo-community/agent-explorer-plugin'
 const { useToken } = theme
 const { Text } = Typography
 

diff --git a/packages/agent-explore/src/plugins/chats/ChatWindow.tsx b/packages/agent-explore/src/plugins/chats/ChatWindow.tsx
@@ -8,7 +8,7 @@ import { useQuery } from 'react-query'
 import { useVeramo } from '@veramo-community/veramo-react'
 import { scrollMessages } from './scroll'
 import { useChat } from '../../context/ChatProvider'
-import IdentifierProfile from '../../components/IdentifierProfile'
+import { IdentifierProfile } from '@veramo-community/agent-explorer-plugin'
 import { Button, Col, Row, theme } from 'antd'
 
 const ChatWindow: React.FC = () => {

diff --git a/packages/agent-explore/src/plugins/contacts/Contacts.tsx b/packages/agent-explore/src/plugins/contacts/Contacts.tsx
@@ -6,7 +6,7 @@ import { useVeramo } from '@veramo-community/veramo-react'
 import { PageContainer } from '@ant-design/pro-components'
 import { IIdentifier } from '@veramo/core'
 import { CopyOutlined } from '@ant-design/icons'
-import IdentifierProfile from '../../components/IdentifierProfile'
+import { IdentifierProfile } from '@veramo-community/agent-explorer-plugin'
 
 const { Search } = Input
 

diff --git a/packages/agent-explore/src/plugins/contacts/Identifier.tsx b/packages/agent-explore/src/plugins/contacts/Identifier.tsx
@@ -15,9 +15,8 @@ import { IDIDManager, IResolver } from '@veramo/core'
 import IdentifierReceivedCredentials from './IdentifierReceivedCredentials'
 import IdentifierIssuedCredentials from './IdentifierIssuedCredentials'
 import { PageContainer } from '@ant-design/pro-components'
-import { shortId } from '@veramo-community/agent-explorer-plugin'
+import { shortId, IIdentifierProfilePlugin } from '@veramo-community/agent-explorer-plugin'
 import { CopyOutlined } from '@ant-design/icons'
-import { IIdentifierProfilePlugin } from '../../context/plugins/IdentifierProfile'
 
 const { TextArea } = Input
 const { TabPane } = Tabs

diff --git a/packages/agent-explore/src/plugins/contacts/IdentifierIssuedCredentials.tsx b/packages/agent-explore/src/plugins/contacts/IdentifierIssuedCredentials.tsx
@@ -5,11 +5,9 @@ import { useQuery } from 'react-query'
 import { useVeramo } from '@veramo-community/veramo-react'
 import { IDataStoreORM, UniqueVerifiableCredential } from '@veramo/core'
 import { ProList } from '@ant-design/pro-components'
-import { VerifiableCredential } from '@veramo-community/react-components'
 import { Button } from 'antd'
 import { formatRelative } from 'date-fns'
-import IdentifierProfile from '../../components/IdentifierProfile'
-import { CredentialActionsDropdown, getIssuerDID } from '@veramo-community/agent-explorer-plugin'
+import { CredentialActionsDropdown, getIssuerDID, IdentifierProfile, VerifiableCredentialComponent } from '@veramo-community/agent-explorer-plugin'
 
 interface IdentifierCredentialsProps {
   identifier: string
@@ -80,7 +78,7 @@ const IdentifierIssuedCredentials: React.FC<IdentifierCredentialsProps> = ({
           ],
           content: (
             <div style={{ width: '100%' }}>
-              <VerifiableCredential credential={item.verifiableCredential} />
+              <VerifiableCredentialComponent credential={item} />
             </div>
           ),
           hash: item.hash,

diff --git a/packages/agent-explore/src/plugins/contacts/IdentifierReceivedCredentials.tsx b/packages/agent-explore/src/plugins/contacts/IdentifierReceivedCredentials.tsx
@@ -7,9 +7,7 @@ import { useQuery } from 'react-query'
 import { useVeramo } from '@veramo-community/veramo-react'
 import { IDataStoreORM, UniqueVerifiableCredential } from '@veramo/core'
 import { ProList } from '@ant-design/pro-components'
-import { VerifiableCredential } from '@veramo-community/react-components'
-import IdentifierProfile from '../../components/IdentifierProfile'
-import { CredentialActionsDropdown, getIssuerDID } from '@veramo-community/agent-explorer-plugin'
+import { CredentialActionsDropdown, getIssuerDID, IdentifierProfile, VerifiableCredentialComponent } from '@veramo-community/agent-explorer-plugin'
 
 interface IdentifierCredentialsProps {
   identifier: string
@@ -80,7 +78,7 @@ const IdentifierReceivedCredentials: React.FC<IdentifierCredentialsProps> = ({
           ],
           content: (
             <div style={{ width: '100%' }}>
-              <VerifiableCredential credential={item.verifiableCredential} />
+              <VerifiableCredentialComponent credential={item} />
             </div>
           ),
           hash: item.hash,

diff --git a/packages/agent-explore/src/plugins/credential-verifier/CredentialVerifier.tsx b/packages/agent-explore/src/plugins/credential-verifier/CredentialVerifier.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
 import { useVeramo } from '@veramo-community/veramo-react'
-import '@veramo-community/react-components/dist/cjs/index.css'
 import { PageContainer } from '@ant-design/pro-components'
 import CredentialTabs from '../../components/CredentialTabs'
 import { ICredentialPlugin, IVerifyResult } from '@veramo/core'

diff --git a/packages/agent-explore/src/plugins/credentials/Credential.tsx b/packages/agent-explore/src/plugins/credentials/Credential.tsx
@@ -2,8 +2,6 @@ import React from 'react'
 import { useParams } from 'react-router-dom'
 import { useQuery } from 'react-query'
 import { useVeramo } from '@veramo-community/veramo-react'
-
-import '@veramo-community/react-components/dist/cjs/index.css'
 import { PageContainer } from '@ant-design/pro-components'
 import CredentialTabs from '../../components/CredentialTabs'
 import { IDataStore } from '@veramo/core'