@veramo-community/veramo-react - npm Package Compare versions

Comparing version 0.3.5 to 1.0.0

package.json

 {
   "name": "@veramo-community/veramo-react",
-  "version": "0.3.5",
+  "version": "1.0.0",
   "main": "./lib/index.js",
@@ -14,4 +14,4 @@ "types": "./lib/index.d.ts",
   "dependencies": {
-    "@veramo/core": "^1.1.1-next.41",
-    "@veramo/remote-client": "^1.1.1-next.41",
+    "@veramo/core": "^1.2.3-next.12",
+    "@veramo/remote-client": "^1.2.3-next.12",
     "uuid": "^8.3.2"
@@ -24,2 +24,6 @@ },
     "@commitlint/config-conventional": "^11.0.0",
+    "@semantic-release/commit-analyzer": "^8.0.1",
+    "@semantic-release/git": "^9.0.0",
+    "@semantic-release/npm": "^7.1.3",
+    "@semantic-release/release-notes-generator": "^9.0.2",
     "@testing-library/jest-dom": "^5.11.9",
@@ -31,8 +35,8 @@ "@testing-library/react-hooks": "^5.0.3",
     "@types/uuid": "^8.3.0",
-    "@veramo/credential-w3c": "^1.1.1-next.41",
-    "@veramo/data-store": "^1.1.1-next.41",
-    "@veramo/did-comm": "^1.1.1-next.41",
-    "@veramo/did-resolver": "^1.1.1-next.41",
-    "@veramo/message-handler": "^1.1.1-next.41",
-    "@veramo/selective-disclosure": "^1.1.1-next.41",
+    "@veramo/credential-w3c": "^1.2.3-next.12",
+    "@veramo/data-store": "^1.2.3-next.12",
+    "@veramo/did-comm": "^1.2.3-next.12",
+    "@veramo/did-resolver": "^1.2.3-next.12",
+    "@veramo/message-handler": "^1.2.3-next.12",
+    "@veramo/selective-disclosure": "^1.2.3-next.12",
     "babel-jest": "^26.6.3",
@@ -46,2 +50,3 @@ "husky": "^4.3.8",
     "react-test-renderer": "^17.0.1",
+    "semantic-release": "^17.4.3",
     "ts-jest": "^26.4.4",
@@ -55,3 +60,4 @@ "typescript": "^4.0.3"
     "test:watch": "yarn test --watch --verbose",
-    "upgrade-veramo": "yarn add @veramo/core@next @veramo/remote-client@next; yarn add -D @veramo/credential-w3c@next @veramo/data-store@next  @veramo/selective-disclosure@next @veramo/did-comm@next @veramo/message-handler@next @veramo/did-resolver@next"
+    "upgrade-veramo": "yarn add @veramo/core@next @veramo/remote-client@next; yarn add -D @veramo/credential-w3c@next @veramo/data-store@next @veramo/selective-disclosure@next @veramo/did-comm@next @veramo/message-handler@next @veramo/did-resolver@next",
+    "release": "semantic-release"
   },
@@ -72,2 +78,23 @@ "prettier": {
   },
+  "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"
+    ]
+  },
   "eslintConfig": {
@@ -74,0 +101,0 @@ "extends": [

README.md

@@ -5,2 +5,187 @@ # Getting Started with Veramo React
 
+## Motivation
+
+When using veramo in your front end React apps you may need to manage the state of multiple remote and local agents. Veramo React makes it easy to manage agents without needing to write or maintain boilerplate code. It also enables making new features available to front-end stacks without developers needing to implement them manually.
+
+When you add an agent configuration it is persisted to local storage. A randomly generated ID is assigned to each agent.
+
+## Install and set up
+
+```bash
+yarn add @veramo-community/veramo-react
+```
+
+**_NOTE:_** Veramo React depends on `@next` versions of `@veramo`
+
+Installation includes `@veramo/core@next` and `@veramo/remote-client@next`. You will **NOT** need to add additional `@veramo` dependencies to your app if you are just working with remote agents.
+
+The following sippet is a simplified extract from [Veramo Agent Explorer](https://github.com/veramolabs/agent-explorer) that uses [React Query](https://github.com/tannerlinsley/react-query) ontop of `Veramo React` to manage the data layer including caching and global data syncing.
+
+```tsx
+import React from 'react'
+import { BrowserRouter, Route } from 'react-router-dom'
+import { VeramoProvider } from '@veramo-community/veramo-react'
+import { QueryClientProvider, QueryClient } from 'react-query'
+import { PageModuleProvider } from '../context/WidgetProvider'
+import App from '../App'
+
+const queryClient = new QueryClient()
+
+export default = () => (
+  <QueryClientProvider client={queryClient}>
+    <VeramoProvider>
+      <BrowserRouter>
+        <Route component={App} />
+      </BrowserRouter>
+    </VeramoProvider>
+  </QueryClientProvider>
+)
+```
+
+## Create local agent
+
+Create an agent in your app and export it. You will need to install additional dependencies
+
+```bash
+yarn add @veramo/did-resolver@next ethr-did-resolver did-resolver web-did-resolver
+```
+
+```tsx
+import { createAgent, IResolver } from '@veramo/core'
+
+import { DIDResolverPlugin } from '@veramo/did-resolver'
+import { Resolver } from 'did-resolver'
+import { getResolver as ethrDidResolver } from 'ethr-did-resolver'
+import { getResolver as webDidResolver } from 'web-did-resolver'
+
+// You will need to get a project ID from infura https://www.infura.io
+const INFURA_PROJECT_ID = '<your PROJECT_ID here>'
+
+export const agent = createAgent<IResolver>({
+  plugins: [
+    new DIDResolverPlugin({
+      resolver: new Resolver({
+        ...ethrDidResolver({ infuraProjectId: INFURA_PROJECT_ID }),
+        ...webDidResolver(),
+      }),
+    }),
+  ],
+})
+```
+
+In the provider setup above, add the following to bootstrap the local agent. You can also call [addAgent](#addAgent) to add while your application is running.
+
+```tsx
+import {agent} from '../veramo'
+
+<VeramoProvider agent={[agent]}>...<VeramoProvider>
+```
+
+## `useVeramo hook`
+
+The primary hook that provides the following API to your app. The below syntax uses React Query to fetch the data and uses the cache key of `credentials + agentID` to identify the data to your app.
+
+```tsx
+import { useVeramo } from '@veramo-community/veramo-react'
+import { useQuery } from 'react-query'
+
+export default = () => {
+    const { agent } = useVeramo()
+    const { data } = useQuery(
+        ['credentials', { agentId: agent?.context.id }],
+        () => agent?.dataStoreORMGetVerifiableCredentials())
+
+    return (
+        <div>
+            {
+                data.map((credential) => (
+                    <div>{credential.issuer.id}</div>
+                )
+            }
+        <div>
+    )
+}
+```
+
+If you are not using React Query you can just call `agent?.dataStoreORMGetVerifiableCredentials()` and manage the data like any async data source.
+
+## API
+
+### `agent`
+
+The current active agent object. Call agent methods as normal:
+
+```jsx
+agent[METHOD]
+```
+
+### `agents`
+
+A list of all configured agents.
+
+### `activeAgentId`
+
+The ID of the currently active agent.
+
+### `setActiveAgentId`
+
+Set the current active agent by ID
+
+### `addAgent`
+
+Add a local agent. Create a local agent as per example in `Create local agent` section.
+
+```tsx
+import { agent } from '../veramo'
+import { useVeramo } from '@veramo-community/veramo-react'
+
+// Inside a function component
+
+const { addAgentConfig } = useVeramo()
+
+const addLocalAgent = () => {
+  addAgent(agent)
+}
+```
+
+### `removeAgent`
+
+Remove an agent by ID.
+
+### `addAgentConfig`
+
+Add a remote agent configuration.
+
+```tsx
+import { useVeramo } from '@veramo-community/veramo-react'
+
+// Inside a function component
+const { addAgentConfig } = useVeramo()
+
+const newAgentConfig = () => {
+  addAgentConfig({
+    context: { name: 'Agent Name', schema: schemaUrl },
+    remoteAgents: [
+      {
+        url: agentUrl,
+        enabledMethods: Object.keys(schema['x-methods']),
+        token: apiKey,
+      },
+    ],
+  })
+}
+```
+
+### `updateAgentConfig`
+
+Update the configuration of an agent.
+
+### `getAgentConfig`
+
+Get the current configuration for an agent.
+
+### `getAgent`
+
+Get an agent by ID.
+
 ## Local development
@@ -7,0 +192,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59677

increased by13.36%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

206

increased by880.95%

Worsened metrics

Dev dependency count

31

increased by19.23%

Number of package files

20

decreased by-9.09%

Dependency changes

• + Added@veramo/core@1.2.3-unstable.41(transitive)

• + Added@veramo/remote-client@1.2.3-unstable.41(transitive)

• + Addeddid-jwt-vc@2.1.3(transitive)

• - Removed@veramo/core@1.2.0(transitive)

• - Removed@veramo/remote-client@1.2.0(transitive)

• - Removeddid-jwt-vc@2.1.0(transitive)

• Updated@veramo/core@^1.2.3-next.12

• Updated@veramo/remote-client@^1.2.3-next.12