feat: refactor plugins (#161)

* refactor: PluginProvider

* feat: refactor core plugins

* fix(pugin): add react deps

* fix(plugin): deps

packages/agent-explorer/src/components/CredentialSummary.tsx

@@ -2,9 +2,8 @@ import React from 'react'
 import { Row, Avatar, Col, Typography, theme, Skeleton, Space, Popover, Tag } from 'antd'
 import { useVeramo } from '@veramo-community/veramo-react'
 import { useQuery } from 'react-query'
-import { getIssuerDID, shortId } from '../utils/did'
+import { getIssuerDID, shortId, CredentialActionsDropdown } from '@veramo-community/agent-explorer-plugin'
 import { UniqueVerifiableCredential } from '@veramo/core'
-import CredentialActionsDropdown from './CredentialActionsDropdown'
 import { EllipsisOutlined } from '@ant-design/icons'
 import { formatRelative } from 'date-fns'
 

packages/agent-explorer/src/components/CredentialTabs.tsx

@@ -4,11 +4,10 @@ import { UniqueVerifiableCredential } from '@veramo/core'
 import { VerifiableCredential } from '@veramo-community/react-components'
 import CredentialInfo from './CredentialInfo'
 import JsonBlock from './Json'
-import { getIssuerDID } from '../utils/did'
+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 CredentialActionsDropdown from './CredentialActionsDropdown'
 
 interface CredentialTabsProps {
  uniqueCredential: UniqueVerifiableCredential

packages/agent-explorer/src/components/DIDDiscoveryBar.tsx

@@ -4,7 +4,7 @@ import { useChat } from '../context/ChatProvider'
 import { useVeramo } from '@veramo-community/veramo-react'
 import { IDIDDiscovery } from '@veramo/did-discovery'
 import { SelectProps } from 'antd/es/select'
-import { shortId } from '../utils/did'
+import { shortId } from '@veramo-community/agent-explorer-plugin'
 
 interface DIDDiscoveryBarProps {
  handleSelect: any

packages/agent-explorer/src/components/IdentifierProfile.tsx

@@ -3,7 +3,7 @@ import { Row, Avatar, Col, Typography, theme, Skeleton } from 'antd'
 import { useVeramo } from '@veramo-community/veramo-react'
 import { useQuery } from 'react-query'
 import { IIdentifierProfilePlugin } from '../context/plugins/IdentifierProfile'
-import { shortId } from '../utils/did'
+import { shortId } from '@veramo-community/agent-explorer-plugin'
 
 interface IdentifierProfileProps {
  did: string

packages/agent-explorer/src/context/plugins/IdentifierProfile.tsx

@@ -6,7 +6,7 @@ import {
 } from '@veramo/core'
 import { IDataStoreORM } from '@veramo/data-store'
 import parse from 'url-parse'
-import { shortId } from '../../utils/did'
+import { shortId } from '@veramo-community/agent-explorer-plugin'
 import md5 from 'md5'
 
 export interface IIdentifierProfile {

packages/agent-explorer/src/layout/App.tsx

@@ -5,22 +5,25 @@ import { ThemeProvider } from '../context/ThemeProvider'
 import { QueryClientProvider, QueryClient } from 'react-query'
 import { ChatProvider } from '../context/ChatProvider'
 import { VeramoWeb3Provider } from '../context/web3/VeramoWeb3Provider'
-import { PluginProvider } from '../context/PluginProvider'
+import { PluginProvider } from '@veramo-community/agent-explorer-plugin'
+import { getcorePlugins } from '../plugins'
 
 declare global {
  interface Window {
  BASE_URL: string
  }
 }
 
+const corePlugins = getcorePlugins()
+
 const App = () => {
  const queryClient = new QueryClient()
 
  return (
  <QueryClientProvider client={queryClient}>
  <ThemeProvider>
  <VeramoWeb3Provider>
- <PluginProvider>
+ <PluginProvider corePlugins={corePlugins}>
  <ChatProvider>
  <BrowserRouter>
  <Layout />

packages/agent-explorer/src/layout/Layout.tsx

@@ -4,7 +4,7 @@ import { Routes, Route, useLocation, Link } from 'react-router-dom'
 import { useVeramo } from '@veramo-community/veramo-react'
 import md5 from 'md5'
 import AgentDropdown from '../components/AgentDropdown'
-import { usePlugins } from '../context/PluginProvider'
+import { usePlugins } from '@veramo-community/agent-explorer-plugin'
 import { Landing } from '../pages/Landing'
 import { Appearance } from '../pages/settings/Appearance'
 import { Plugins } from '../pages/settings/Plugins'

packages/agent-explorer/src/pages/settings/Plugins.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 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 { usePlugins } from '@veramo-community/agent-explorer-plugin'
 import { PageContainer } from '@ant-design/pro-components'
 import { DndContext,
  closestCenter,
@@ -13,9 +13,9 @@ import { DndContext,
  } from '@dnd-kit/core';
 import { SortableContext, useSortable, verticalListSortingStrategy, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
 import {CSS} from '@dnd-kit/utilities';
-import { AgentPlugin } from '@veramo-community/agent-explorer-plugin'
+import { IAgentExplorerPlugin } from '@veramo-community/agent-explorer-plugin'
 
-const communityPlugins: AgentPlugin[] = [
+const communityPlugins: IAgentExplorerPlugin[] = [
  {
  config: {
  url: 'https://cdn.jsdelivr.net/gh/veramolabs/agent-explorer-plugin-social-feed/dist/plugin.js',
@@ -73,7 +73,7 @@ const communityPlugins: AgentPlugin[] = [
  },
 ]
 
-const SortableItem = ({ item }: { item: AgentPlugin}) => {
+const SortableItem = ({ item }: { item: IAgentExplorerPlugin}) => {
  const { notification } = App.useApp()
  const { removePluginConfig, switchPlugin } = usePlugins()
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: item.config.url });

packages/agent-explorer/src/plugins/audit-log/Messages.tsx

@@ -6,7 +6,7 @@ import { useVeramo } from '@veramo-community/veramo-react'
 import md5 from 'md5'
 import { IMessage } from '@veramo/core'
 import { PageContainer } from '@ant-design/pro-components'
-import { shortId } from '../../utils/did'
+import { shortId } from '@veramo-community/agent-explorer-plugin'
 
 const GRAVATAR_URI = 'https://www.gravatar.com/avatar/'
 

packages/agent-explorer/src/plugins/chats/ChatInput.tsx

@@ -5,7 +5,7 @@ import { useVeramo } from '@veramo-community/veramo-react'
 import { useChat } from '../../context/ChatProvider'
 import { v4 } from 'uuid'
 import { useNavigate } from 'react-router-dom'
-import { shortId } from '../../utils/did'
+import { shortId } from '@veramo-community/agent-explorer-plugin'
 
 const { TextArea } = Input
 

packages/agent-explorer/src/plugins/chats/ChatThreadProfileHeader.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Row, Typography, Avatar, Col, theme } from 'antd'
-import { shortId } from '../../utils/did'
+import { shortId } from '@veramo-community/agent-explorer-plugin'
 import { IMessage } from '@veramo/core'
 import { useChat } from '../../context/ChatProvider'
 import { IIdentifierProfile } from '../../context/plugins/IdentifierProfile'

packages/agent-explorer/src/plugins/chats/NewChatThreadModal.tsx

@@ -14,7 +14,7 @@ import { useVeramo } from '@veramo-community/veramo-react'
 import { IDIDDiscovery } from '@veramo/did-discovery'
 import { QrScanner } from '@yudiel/react-qr-scanner'
 import parse from 'url-parse'
-import { shortId } from '../../utils/did'
+import { shortId } from '@veramo-community/agent-explorer-plugin'
 import { decodeBase64url } from '@veramo/utils'
 
 interface NewChatThreadModalProps {

packages/agent-explorer/src/plugins/contacts/Identifier.tsx

@@ -15,7 +15,7 @@ import { IDIDManager, IResolver } from '@veramo/core'
 import IdentifierReceivedCredentials from './IdentifierReceivedCredentials'
 import IdentifierIssuedCredentials from './IdentifierIssuedCredentials'
 import { PageContainer } from '@ant-design/pro-components'
-import { shortId } from '../../utils/did'
+import { shortId } from '@veramo-community/agent-explorer-plugin'
 import { CopyOutlined } from '@ant-design/icons'
 import { IIdentifierProfilePlugin } from '../../context/plugins/IdentifierProfile'
 

packages/agent-explorer/src/plugins/contacts/IdentifierIssuedCredentials.tsx

@@ -8,9 +8,8 @@ import { ProList } from '@ant-design/pro-components'
 import { VerifiableCredential } from '@veramo-community/react-components'
 import { Button } from 'antd'
 import { formatRelative } from 'date-fns'
-import { getIssuerDID } from '../../utils/did'
 import IdentifierProfile from '../../components/IdentifierProfile'
-import CredentialActionsDropdown from '../../components/CredentialActionsDropdown'
+import { CredentialActionsDropdown, getIssuerDID } from '@veramo-community/agent-explorer-plugin'
 
 interface IdentifierCredentialsProps {
  identifier: string

packages/agent-explorer/src/plugins/contacts/IdentifierReceivedCredentials.tsx

@@ -8,9 +8,8 @@ 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 { getIssuerDID } from '../../utils/did'
 import IdentifierProfile from '../../components/IdentifierProfile'
-import CredentialActionsDropdown from '../../components/CredentialActionsDropdown'
+import { CredentialActionsDropdown, getIssuerDID } from '@veramo-community/agent-explorer-plugin'
 
 interface IdentifierCredentialsProps {
  identifier: string

packages/agent-explorer/src/plugins/contacts/index.tsx

@@ -4,6 +4,7 @@ import { IPlugin } from '@veramo-community/agent-explorer-plugin';
 
 import { Contacts } from './Contacts';
 import Identifier from './Identifier';
+import { getCredentialContextMenuItems } from './menu';
 
 const Plugin: IPlugin = {
  //@ts-ignore
@@ -33,7 +34,7 @@ const Plugin: IPlugin = {
  icon: <ContactsOutlined />,
  },
  ],
-
+ getCredentialContextMenuItems
  }
  }
 };

packages/agent-explorer/src/plugins/contacts/menu.tsx

@@ -0,0 +1,28 @@
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { getIssuerDID } from "@veramo-community/agent-explorer-plugin";
+import { UniqueVerifiableCredential } from "@veramo/core-types";
+import { MenuProps } from "antd";
+import { useNavigate } from "react-router";
+
+export const getCredentialContextMenuItems = (credential: UniqueVerifiableCredential): MenuProps['items'] => {
+ const navigate = useNavigate()
+ const { verifiableCredential } = credential
+
+
+ return [ {
+ key: 'issuer',
+ label: 'Issuer',
+ icon: <InfoCircleOutlined />,
+ onClick: () => navigate('/contacts/' + getIssuerDID(verifiableCredential)),
+ },
+ {
+ key: 'subject',
+ label: 'Subject',
+ icon: <InfoCircleOutlined />,
+ onClick: () =>
+ navigate(
+ '/contacts/' +
+ encodeURIComponent(verifiableCredential.credentialSubject.id as string),
+ ),
+ },
+]}

packages/agent-explorer/src/plugins/credentials/Credential.tsx

@@ -8,7 +8,7 @@ import { PageContainer } from '@ant-design/pro-components'
 import CredentialTabs from '../../components/CredentialTabs'
 import { IDataStore } from '@veramo/core'
 import { computeEntryHash } from '@veramo/utils'
-import CredentialActionsDropdown from '../../components/CredentialActionsDropdown'
+import { CredentialActionsDropdown } from '@veramo-community/agent-explorer-plugin'
 import { EllipsisOutlined } from '@ant-design/icons'
 
 const Credential = () => {