feat: demo agent explorer ui

packages/demo-explorer/.gitignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+/.eslintcache
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.idea/

packages/demo-explorer/.npmignore

@@ -0,0 +1,2 @@
+public
+src

packages/demo-explorer/README.md

@@ -0,0 +1,31 @@
+# Agent Explorer
+
+## Installation
+
+```bash
+npm -g i agent-explore
+```
+
+## Usage
+
+```bash
+agent-explore serve --port 8080
+```
+
+You can specify a default agent configuration
+
+```bash
+agent-explore serve --port 8080 --schemaUrl https://example.ngrok.io/open-api.json --apiKey test123 --name Agent
+```
+
+## Basic architecture
+
+Agent Explorer is provides a quick and easy UI framework to get started building and testing features in Veramo. If you have an idea to build something you can create a Widget for it and pin it to your dashboard for ease of access. As we use it internally for building new features, POCs and demos we designed it to be as flexible as possible with the most common use cases surfaced.
+
+### Pages
+
+Pages use templates, currently single and double column. These templates are responsive.
+
+## Components
+
+There are 2 types of components. **Standard components** that we all know and love. Functional, can fetch data if needed or not and we have **Widgets** which are React Lazy components. This components can be loaded at runtime and their configuration are saved locally to your browser. This is ideal for developing features in Veramo.

packages/demo-explorer/bin/bin.js

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+
+const express = require('express')
+const favicon = require('express-favicon')
+const commander = require('commander')
+const path = require('path')
+const { ExplorerRouter } = require('../lib/express-router')
+
+commander
+  .command('serve')
+  .description('Launch agent explorer dashboard')
+  .option('-p, --port <number>', 'Set port to serve on')
+  .option('-s, --schemaUrl <string>', 'Set default agent schema url')
+  .option('-n, --name <string>', 'Set default agent name', 'Default')
+  .option('-k, --apiKey <string>', 'Set default agent api key')
+  .action(async (cmd) => {
+    const PORT = process.env.PORT || cmd.port || 5000
+    const app = express()
+
+    app.use(favicon(path.join(__dirname, '../build', 'favicon.ico')))
+
+    const config = []
+
+    if (cmd.schemaUrl) {
+      config.push({
+        schemaUrl: cmd.schemaUrl,
+        name: cmd.name,
+        apiKey: cmd.apiKey,
+      })
+    }
+    app.use(ExplorerRouter(config))
+
+    app.listen(PORT, () => {
+      console.log(`⚡️[server]: Server is running at http://localhost:${PORT}`)
+    })
+  })
+
+if (!process.argv.slice(2).length) {
+  commander.outputHelp()
+} else {
+  commander.parse(process.argv)
+}

packages/demo-explorer/craco.config.js

@@ -0,0 +1,29 @@
+const webpack = require('webpack')
+const path = require('path');
+
+const ouputDir = process.env.REACT_APP_MODE === 'verifier' ? 'build/verifier' : 'build/explorer';
+
+module.exports = {
+  babel: {
+    plugins: ['@babel/plugin-syntax-import-assertions'],
+  },
+  webpack: {
+    configure: (webpackConfig, { env, paths }) => {
+      paths.appBuild = webpackConfig.output.path = path.resolve(ouputDir);
+      webpackConfig.resolve.fallback = {
+        ...webpackConfig.resolve.fallback,
+        http: require.resolve('stream-http'),
+        url: require.resolve('url/'),
+        zlib: require.resolve('browserify-zlib'),
+        https: require.resolve('https-browserify'),
+      }
+      /* ... */
+      return webpackConfig
+    },
+    plugins: [
+      new webpack.ProvidePlugin({
+        Buffer: ['buffer', 'Buffer'],
+      }),
+    ],
+  },
+}

packages/demo-explorer/lib/express-router.js

@@ -0,0 +1,30 @@
+const express = require('express')
+const path = require('path')
+const fs = require('fs/promises')
+
+/**
+ * Express router that serves agent explorer
+ * @param {array} config - example [{schemaUrl: 'https://example.com/open-api.json', apiKey: 'test123', name: 'Agent' }]
+ * @returns express router
+ */
+const ExplorerRouter = (config) => {
+  const router = express.Router()
+  router.use('/static', express.static(path.join(__dirname, '../build/static')))
+
+  router.get('/*', async function (req, res) {
+    let html = (
+      await fs.readFile(path.join(__dirname, '../build', 'index.html'))
+    ).toString()
+    html = html.replace(
+      'window.PRE_CONFIGURED_AGENTS=void 0',
+      'window.PRE_CONFIGURED_AGENTS=' + JSON.stringify(config),
+    )
+    res.send(html)
+  })
+
+  return router
+}
+
+module.exports = {
+  ExplorerRouter,
+}

packages/demo-explorer/package.json

@@ -0,0 +1,187 @@
+{
+  "name": "@vckit/demo-explorer",
+  "version": "1.15.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "18.x"
+  },
+  "license": "Apache-2.0",
+  "files": [
+    "build",
+    "bin",
+    "lib"
+  ],
+  "main": "lib/express-router.js",
+  "bin": {
+    "agent-explore": "./bin/bin.js"
+  },
+  "scripts": {
+    "dev": "craco start",
+    "build": "pnpm run build:explorer && pnpm run build:verifier",
+    "build:explorer": "craco build",
+    "build:verifier": "REACT_APP_MODE=verifier craco build",
+    "test": "craco test --watchAll=false",
+    "release": "semantic-release",
+    "agent-explore": "./bin/bin.js",
+    "upgrade-veramo": "yarn add -D @veramo/core @veramo/did-discovery @veramo/credential-w3c @veramo/data-store @veramo/did-comm @veramo/did-jwt @veramo/did-resolver @veramo/message-handler @veramo/remote-client @veramo/selective-disclosure @veramo/credential-eip712 @veramo/data-store-json @veramo/did-manager @veramo/kms-web3 @veramo/key-manager @veramo/did-provider-ethr @veramo/utils @veramo/did-provider-peer @veramo/kms-local",
+    "upgrade-veramo:next": "yarn add -D @veramo/core@next @veramo/did-discovery@next @veramo/credential-w3c@next @veramo/data-store@next @veramo/did-comm@next @veramo/did-jwt@next @veramo/did-resolver@next @veramo/message-handler@next @veramo/remote-client@next @veramo/selective-disclosure@next @veramo/credential-eip712@next @veramo/data-store-json@next @veramo/did-manager@next @veramo/kms-web3@next @veramo/key-manager@next @veramo/did-provider-ethr@next @veramo/utils@next @veramo/did-provider-peer@next @veramo/kms-local@next"
+  },
+  "homepage": "https://explore.veramo.dev",
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "prettier": {
+    "jsxBracketSameLine": false,
+    "trailingComma": "all",
+    "tabWidth": 2,
+    "printWidth": 80,
+    "singleQuote": true,
+    "semi": false
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "browserslist": {
+    "production": [
+      "chrome >= 67",
+      "edge >= 79",
+      "firefox >= 68",
+      "opera >= 54",
+      "safari >= 14"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@jsonforms/material-renderers": "^3.1.0",
+    "@jsonforms/react": "^3.1.0",
+    "@vckit/example-documents": "workspace:^1.0.0-beta.4",
+    "@vckit/remote-client": "workspace:^1.0.0-beta.4",
+    "commander": "^10.0.1",
+    "express": "^4.18.2",
+    "express-favicon": "^2.0.4"
+  },
+  "release": {
+    "branches": [
+      "main"
+    ],
+    "ci": true,
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/npm",
+      [
+        "@semantic-release/git",
+        {
+          "assets": [
+            "package.json"
+          ],
+          "message": "chore(release): :rocket: New version ${nextRelease.version} [skip ci] \n\n${nextRelease.notes}"
+        }
+      ],
+      "@semantic-release/github"
+    ]
+  },
+  "devDependencies": {
+    "@ant-design/icons": "^5.1.4",
+    "@ant-design/pro-components": "^2.5.3",
+    "@babel/plugin-syntax-import-assertions": "^7.20.0",
+    "@commitlint/cli": "^17.6.5",
+    "@commitlint/config-conventional": "^17.6.5",
+    "@craco/craco": "^7.1.0",
+    "@ethersproject/providers": "^5.7.2",
+    "@rjsf/antd": "^5.7.3",
+    "@rjsf/core": "^5.7.3",
+    "@rjsf/utils": "^5.7.3",
+    "@rjsf/validator-ajv8": "^5.7.3",
+    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^10.0.3",
+    "@semantic-release/release-notes-generator": "^11.0.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/chart.js": "^2.9.37",
+    "@types/express": "^4.17.17",
+    "@types/jest": "^29.5.1",
+    "@types/json-schema": "^7.0.12",
+    "@types/md5": "^2.3.2",
+    "@types/random-words": "^1.1.2",
+    "@types/react": "^18.2.7",
+    "@types/react-dom": "^18.2.4",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/url-parse": "^1.4.8",
+    "@types/uuid": "^9.0.1",
+    "@veramo-community/react-components": "^1.4.0",
+    "@veramo-community/veramo-react": "^1.0.82",
+    "@veramo/core": "5.2.1-next.5",
+    "@veramo/core-types": "5.2.1-next.5",
+    "@veramo/credential-eip712": "5.2.1-next.5",
+    "@veramo/credential-w3c": "5.2.1-next.5",
+    "@veramo/data-store": "5.2.1-next.5",
+    "@veramo/data-store-json": "5.2.1-next.5",
+    "@veramo/did-comm": "5.2.1-next.5",
+    "@veramo/did-discovery": "5.2.1-next.5",
+    "@veramo/did-jwt": "5.2.1-next.5",
+    "@veramo/did-manager": "5.2.1-next.5",
+    "@veramo/did-provider-ethr": "5.2.1-next.5",
+    "@veramo/did-provider-peer": "5.2.1-next.5",
+    "@veramo/did-resolver": "5.2.1-next.5",
+    "@veramo/key-manager": "5.2.1-next.5",
+    "@veramo/kms-local": "5.2.1-next.5",
+    "@veramo/kms-web3": "5.2.1-next.5",
+    "@veramo/message-handler": "5.2.1-next.5",
+    "@veramo/remote-client": "5.2.1-next.5",
+    "@veramo/selective-disclosure": "5.2.1-next.5",
+    "@veramo/utils": "5.2.1-next.5",
+    "@web3-react/core": "^8.2.0",
+    "@web3-react/metamask": "^8.2.1",
+    "@web3-react/types": "^8.2.0",
+    "@web3-react/walletconnect": "^8.2.0",
+    "@yudiel/react-qr-scanner": "^1.1.8",
+    "antd": "~5.5.2",
+    "assert": "npm:assert-browserify@^2.0.0",
+    "browserify-zlib": "^0.2.0",
+    "buffer": "^6.0.3",
+    "crypto": "npm:crypto-browserify@^3.12.0",
+    "date-fns": "^2.30.0",
+    "did-resolver": "^4.1.0",
+    "ethr-did-resolver": "^8.0.0",
+    "https-browserify": "^1.0.0",
+    "husky": "^8.0.3",
+    "md5": "^2.3.0",
+    "prettier": "^2.8.8",
+    "pretty-quick": "^3.1.3",
+    "random-words": "^1.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-error-overlay": "^6.0.11",
+    "react-query": "^3.39.3",
+    "react-router": "^6.11.2",
+    "react-router-dom": "^6.11.2",
+    "react-scripts": "^5.0.1",
+    "semantic-release": "^21.0.2",
+    "stream": "npm:stream-browserify@^3.0.0",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "typescript": "^4.9.5",
+    "url": "^0.11.0",
+    "url-parse": "^1.5.10",
+    "util": "^0.12.5",
+    "uuid": "^9.0.0",
+    "web-did-resolver": "^2.0.24",
+    "web-vitals": "^3.3.2"
+  }
+}

packages/demo-explorer/public/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script>
+      window.PRE_CONFIGURED_AGENTS = void 0
+      // window.PRE_CONFIGURED_AGENTS=[{
+      //   schemaUrl: 'http://localhost:3332/open-api.json',
+      //   apiKey: 'test123',
+      //   name: 'Local'
+      // }]
+    </script>
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Explore data accross multiple DID agents"
+    />
+    <title>Agent Explorer</title>
+    <style>
+      .hide-scroll::-webkit-scrollbar {
+        display: none;
+      }
+    </style>
+  </head>
+  <body style="margin: 0">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="app"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>