feat: refactor identifier management (#143)

package.json

@@ -145,7 +145,7 @@
     "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "@typescript-eslint/parser": "^6.4.0",
-    "@veramo-community/react-components": "^1.4.0",
+    "@veramo-community/react-components": "^1.5.0",
     "@veramo-community/veramo-react": "^1.0.82",
     "@veramo/core": "5.4.2-next.10",
     "@veramo/core-types": "5.2.1-next.5",

src/components/CredentialInfo.tsx

@@ -55,7 +55,7 @@ const CredentialInfo: React.FC<CredentialInfoProps> = ({ credential }) => {
       >
         {data.map((i) => (
           <Descriptions.Item label={i.key} key={i.key}>
-            {i.value}
+            {i.value.startsWith('data:image') ? (<img src={i.value} alt={i.key} style={{width: 200}} />) : i.value}
           </Descriptions.Item>
         ))}
       </Descriptions>

src/context/plugins/IdentifierProfile.tsx

@@ -61,6 +61,7 @@ export class IdentifierProfilePlugin implements IAgentPlugin {
             order: [{ column: 'issuanceDate', direction: 'DESC' }],
           },
         )
+        console.log({result})
         if (result.length > 0) {
           const { name, picture } =
             result[0].verifiableCredential.credentialSubject

src/pages/settings/Plugins.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Input, List, Space, Switch, App, Drawer } from 'antd'
+import { Button, Input, List, Space, Switch, App, Drawer, Typography } from 'antd'
 import { DeleteOutlined, MenuOutlined, PlusOutlined} from '@ant-design/icons'
 import { usePlugins } from '../../context/PluginProvider'
 import { PageContainer } from '@ant-design/pro-components'
@@ -15,6 +15,31 @@ import { SortableContext, useSortable, verticalListSortingStrategy, sortableKeyb
 import {CSS} from '@dnd-kit/utilities';
 import { AgentPlugin } from '../../types'
 
+const communityPlugins: AgentPlugin[] = [
+  {
+    config: {
+      url: 'https://cdn.jsdelivr.net/gh/veramolabs/agent-explorer-plugin-developer-tools/dist/plugin.js',
+      enabled: true,
+    },
+    name: 'Developer Tools',
+    description: 'Collection of tools for experimenting with verifiable data',
+    requiredMethods: [],
+    routes: [],
+    menuItems: [],
+  },
+  {
+    config: {
+      url: 'https://cdn.jsdelivr.net/gh/simonas-notcat/agent-explorer-plugin-codyfight/dist/plugin.js',
+      enabled: true,
+    },
+    name: 'Codyfight',
+    description: 'AI Bot for Codyfight.com',
+    requiredMethods: [],
+    routes: [],
+    menuItems: [],
+  },
+]
+
 const SortableItem = ({ item }: { item: AgentPlugin}) => {
   const { notification } = App.useApp()
   const { removePluginConfig, switchPlugin } = usePlugins()
@@ -95,7 +120,7 @@ export const Plugins = () => {
             type="primary"
             title="Add new external plugin"
             onClick={() => setDrawerOpen(true)}
-          />,
+          >Add</Button>,
         ]}
       >
 
@@ -116,21 +141,46 @@ export const Plugins = () => {
           width={500}
           onClose={() => setDrawerOpen(false)}
           open={isDrawerOpen}
-        >        
-          <Space.Compact style={{ width: '100%' }}>
-            <Input 
-              value={url} 
-              onChange={(e) => setUrl(e.target.value)}
+        > 
+          <Space direction='vertical' style={{width: '100%'}}>
+            <Typography.Title level={5}>Community plugins</Typography.Title>
+              <List
+                dataSource={communityPlugins}
+                renderItem={(item) => <List.Item 
+                    actions={[
+                      <Button 
+                      type="primary"
+                      disabled={plugins.find((plugin) => plugin.config.url === item.config.url) !== undefined}
+                      onClick={() => {
+                        setDrawerOpen(false)
+                        addPluginConfig({url: item.config.url, enabled: true})
+                        setUrl('')
+                      }}
+                      >Add</Button>
+                    ]}
+                    ><List.Item.Meta
+                    title={item.name}
+                    description={item.description}
+                />
+              </List.Item>}
               />
-            <Button 
-              type="primary"
-              onClick={() => {
-                setDrawerOpen(false)
-                addPluginConfig({url, enabled: true})
-                setUrl('')
-              }}
-              >Add</Button>
-          </Space.Compact>
+            <Typography.Title level={5}>Custom plugin</Typography.Title>            
+            <Space.Compact style={{ width: '100%' }}>
+              <Input 
+                value={url} 
+                onChange={(e) => setUrl(e.target.value)}
+                placeholder="https://example.com/plugin.js"
+                />
+              <Button 
+                type="primary"
+                onClick={() => {
+                  setDrawerOpen(false)
+                  addPluginConfig({url, enabled: true})
+                  setUrl('')
+                }}
+                >Add</Button>
+            </Space.Compact>
+          </Space>       
         </Drawer>
       </PageContainer>
     </DndContext>

src/plugins/known-identifiers/KnownIdentifiers.tsx → src/plugins/contacts/Contacts.tsx

@@ -10,7 +10,7 @@ import IdentifierProfile from '../../components/IdentifierProfile'
 
 const { Search } = Input
 
-const KnownIdentifiers = () => {
+export const Contacts = () => {
   const { notification } = App.useApp()
   const { agent } = useVeramo()
   const navigate = useNavigate()
@@ -26,7 +26,7 @@ const KnownIdentifiers = () => {
       dataIndex: 'did',
       key: 'did',
       render: (did: string) => (
-        <Link to={'/known-identifiers/' + encodeURIComponent(did)}>
+        <Link to={'/contacts/' + encodeURIComponent(did)}>
           <IdentifierProfile did={did} />
         </Link>
       ),
@@ -55,7 +55,7 @@ const KnownIdentifiers = () => {
     <PageContainer>
       <Search
         placeholder="Resolve DID"
-        onSearch={(value) => navigate('/identifier/' + value)}
+        onSearch={(value) => navigate('/contacts/' + value)}
         style={{ width: 400, marginBottom: 20 }}
       />
       <Table
@@ -69,4 +69,3 @@ const KnownIdentifiers = () => {
   )
 }
 
-export default KnownIdentifiers

src/plugins/managed-identifiers/IdentifierIssuedCredentials.tsx → src/plugins/contacts/IdentifierIssuedCredentials.tsx

@@ -50,7 +50,7 @@ const IdentifierIssuedCredentials: React.FC<IdentifierCredentialsProps> = ({
       onItem={(record: any) => {
         return {
           onClick: () => {
-            navigate('/credential/' + record.hash)
+            navigate('/credentials/' + record.hash)
           },
         }
       }}

src/plugins/known-identifiers/IdentifierReceivedCredentials.tsx → src/plugins/contacts/IdentifierReceivedCredentials.tsx

@@ -50,7 +50,7 @@ const IdentifierReceivedCredentials: React.FC<IdentifierCredentialsProps> = ({
       onItem={(record: any) => {
         return {
           onClick: () => {
-            navigate('/credential/' + record.hash)
+            navigate('/credentials/' + record.hash)
           },
         }
       }}

src/plugins/known-identifiers/index.tsx → src/plugins/contacts/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { GlobalOutlined } from '@ant-design/icons'
+import { ContactsOutlined } from '@ant-design/icons'
 import { IPlugin } from '../../types';
 
-import KnownIdentifiers from './KnownIdentifiers';
+import { Contacts } from './Contacts';
 import Identifier from './Identifier';
 
 const Plugin: IPlugin = {
@@ -11,26 +11,26 @@ const Plugin: IPlugin = {
         return {
           config: {
             enabled: true,
-            url: 'core://known-identifiers',
+            url: 'core://contacts',
           },
-          name: 'Known Identifiers',
-          description: 'Explore known identifiers',
+          name: 'Contacts',
+          description: 'Explore contacts',
           requiredMethods: ['dataStoreORMGetIdentifiers'],
           routes: [
             {
-              path: '/known-identifiers',
-              element: <KnownIdentifiers />,
+              path: '/Contacts',
+              element: <Contacts />,
             },
             {
-              path: '/known-identifiers/:id',
+              path: '/contacts/:id',
               element: <Identifier />,
             },
           ],
           menuItems: [
             {
-              name: 'Known identifiers',
-              path: '/known-identifiers',
-              icon: <GlobalOutlined />,
+              name: 'Contacts',
+              path: '/contacts',
+              icon: <ContactsOutlined />,
             },
           ],
 

src/plugins/credentials/Credentials.tsx

@@ -35,7 +35,7 @@ const Credentials = () => {
         onItem={(record: any) => {
           return {
             onClick: () => {
-              navigate('/credential/' + record.hash)
+              navigate('/credentials/' + record.hash)
             },
           }
         }}

src/plugins/known-identifiers/IdentifierIssuedCredentials.tsx → src/plugins/identifiers/IdentifierIssuedCredentials.tsx

@@ -50,7 +50,7 @@ const IdentifierIssuedCredentials: React.FC<IdentifierCredentialsProps> = ({
       onItem={(record: any) => {
         return {
           onClick: () => {
-            navigate('/credential/' + record.hash)
+            navigate('/credentials/' + record.hash)
           },
         }
       }}

src/plugins/managed-identifiers/IdentifierKey.tsx → src/plugins/identifiers/IdentifierKey.tsx

@@ -37,14 +37,13 @@ const IdentifierKey: React.FC<IdentifierModuleProps> = ({ item, i, did }) => {
       key={i}
       actions={[
         <Button
+          type='text'
           icon={<DeleteOutlined />}
           disabled={false /* check if current agent controls this DID */}
           onClick={() => {
             showModal()
           }}
-        >
-          Remove Key
-        </Button>,
+        />,
       ]}
     >
       <List.Item.Meta

src/plugins/managed-identifiers/IdentifierReceivedCredentials.tsx → src/plugins/identifiers/IdentifierReceivedCredentials.tsx

@@ -50,7 +50,7 @@ const IdentifierReceivedCredentials: React.FC<IdentifierCredentialsProps> = ({
       onItem={(record: any) => {
         return {
           onClick: () => {
-            navigate('/credential/' + record.hash)
+            navigate('/credentials/' + record.hash)
           },
         }
       }}

src/plugins/managed-identifiers/IdentifierService.tsx → src/plugins/identifiers/IdentifierService.tsx

@@ -35,15 +35,14 @@ const IdentifierServices: React.FC<IdentifierModuleProps> = ({
       key={i}
       actions={[
         <Button
+          type='text'
           icon={<DeleteOutlined />}
           disabled={false /* check if current agent controls this DID */}
           onClick={() => {
             console.log('remove service')
             showModal()
           }}
-        >
-          Remove Service
-        </Button>,
+        />,
       ]}
     >
       <List.Item.Meta