Add: Update GoodID and claim flow

package.json

@@ -36,5 +36,8 @@
     "pinst": "^3.0.0",
     "prettier": "2.8.8",
     "typescript": "^4.9.3"
+  },
+  "resolutions": {
+    "@veramo/core-types": "5.6.1-next.45+d5375bd03"
   }
 }

packages/sdk-v2/package.json

@@ -42,6 +42,9 @@
     "@types/node": "18.0.0",
     "@types/react-native": "0.70.4",
     "@usedapp/core": "^1.2.13",
+    "@veramo/core-types": "5.6.1-next.45",
+    "@veramo/did-provider-ethr": "^5.6.1-next.45",
+    "@veramo/did-provider-key": "^5.6.1-next.45",
     "babel-jest": "^27.3.1",
     "babel-loader": "^8.2.3",
     "babel-plugin-module-resolver": "^4.1.0",
@@ -51,7 +54,9 @@
     "css-loader": "^6.5.1",
     "ctix": "^1.4.0",
     "dexie-react-hooks": "^1.1.6",
+    "did-resolver": "^4.1.0",
     "ethers": "5.7.2",
+    "ethr-did-resolver": "^10.1.5",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.3.1",
@@ -67,7 +72,8 @@
     "style-loader": "^3.3.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.2.2",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "web-did-resolver": "^2.0.27"
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^1.6.4",
@@ -83,6 +89,8 @@
     "@sentry/react-native": "^5.15.1",
     "@solana/web3.js": "^1.72.0",
     "@types/react": "^18.2.28",
+    "@veramo-community/veramo-react": "^1.6.7",
+    "@veramo/did-resolver": "next",
     "@walletconnect/client": "^1.8.0",
     "@walletconnect/qrcode-modal": "^1.8.0",
     "@web3-onboard/coinbase": "^2.2.6",

packages/sdk-v2/src/contexts/goodid/GoodIdContext.tsx

@@ -0,0 +1,37 @@
+import React, { createContext } from "react";
+
+import type { VerifiableCredential } from "../../sdk/goodid/types";
+import { createCredentialsDb, useCredentials } from "../../sdk/goodid";
+
+type IGoodIdContext = {
+  createCredential?: (credential: VerifiableCredential) => Promise<void>;
+  getActiveCredentials?: () => Promise<VerifiableCredential[] | undefined>;
+  db: any;
+};
+
+export const GoodIdContext = createContext<IGoodIdContext>({
+  db: undefined
+});
+
+interface IGoodIdContextProvider {
+  children: any;
+  localDb?: any; //todo: define db interface for wallet
+}
+
+export const GoodIdContextProvider = ({ children, localDb }: IGoodIdContextProvider) => {
+  const db = localDb ? new localDb() : createCredentialsDb();
+
+  const { createCredential, getActiveCredentials } = useCredentials(db);
+
+  return (
+    <GoodIdContext.Provider
+      value={{
+        createCredential,
+        getActiveCredentials,
+        db
+      }}
+    >
+      {children}
+    </GoodIdContext.Provider>
+  );
+};

packages/sdk-v2/src/contexts/goodid/index.ts

@@ -0,0 +1 @@
+export * from "./GoodIdContext";

packages/sdk-v2/src/contexts/index.ts

@@ -1,3 +1,4 @@
-export * from './newsfeed';
-export * from './Web3Context';
-export * from './web3modal';
+export * from "./goodid";
+export * from "./newsfeed";
+export * from "./Web3Context";
+export * from "./web3modal";

packages/sdk-v2/src/sdk/goodid/db/createDb.ts

@@ -0,0 +1,17 @@
+import Dexie from "dexie";
+
+/**
+ * Schema definition for the credentials collection
+ * - `type`: should indicate the type of the credential
+ * - Other fields are according to Veramo's Credential schema
+ */
+
+const schema = {
+  credentials: ",type, credentialSubject.id, issuer.id, issuanceDate"
+};
+
+export const createCredentialsDb = () => {
+  const db = new Dexie("GoodIdCredentials", { autoOpen: false });
+  db.version(1).stores(schema);
+  return db;
+};

packages/sdk-v2/src/sdk/goodid/db/index.ts

@@ -0,0 +1 @@
+export * from "./createDb";

packages/sdk-v2/src/sdk/goodid/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useCredentials";

packages/sdk-v2/src/sdk/goodid/hooks/useCredentials.ts

@@ -0,0 +1,34 @@
+import { useCallback } from "react";
+import type { VerifiableCredential } from "../types";
+
+// todo: create credential should consider update if already exists
+// todo: add db updateCredential
+// todo: add db deleteCredential
+
+export const useCredentials = (db: any) => {
+  const getActiveCredentials: () => Promise<VerifiableCredential[] | undefined> = useCallback(async () => {
+    try {
+      await db.open();
+      const credentialsList = (await db.credentials.toArray()) as VerifiableCredential[];
+      console.log("credentialsList -->", { credentialsList });
+      return credentialsList;
+    } catch (error) {
+      console.error("Failed to get active credentials:", error);
+    } finally {
+      await db.close();
+    }
+  }, [db]);
+
+  const createCredential = async (credential: VerifiableCredential) => {
+    try {
+      await db.open();
+      await db.credentials.add(credential, [credential.type[1]]);
+    } catch (error) {
+      console.error("Failed to create credential:", error);
+    } finally {
+      await db.close();
+    }
+  };
+
+  return { getActiveCredentials, createCredential };
+};

packages/sdk-v2/src/sdk/goodid/index.ts

@@ -0,0 +1,3 @@
+export * from "./db";
+export * from "./hooks";
+export * from "./types";

packages/sdk-v2/src/sdk/goodid/types.ts

@@ -0,0 +1,30 @@
+// Reference: https://veramo.io/docs/basics/verifiable_data
+export interface CredentialProof {
+  type: string;
+  jwt: string;
+}
+
+export interface CredentialSubject {
+  id: string;
+  [key: string]: any;
+}
+
+export interface Issuer {
+  id: string;
+}
+
+export interface VerifiableCredential {
+  credentialSubject: CredentialSubject;
+  issuer: Issuer;
+  type: string[];
+  "@context": string[];
+  issuanceDate: string;
+  proof: CredentialProof;
+}
+
+// Might change
+export enum CredentialTypes {
+  VerifiableAgeCredential = "Age",
+  VerifiableGenderCredential = "Gender",
+  VerifiableLocationCredential = "Location"
+}

packages/sdk-v2/src/sdk/goodid/utils/resolverAgent.ts

@@ -0,0 +1,33 @@
+// 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";
+
+// const INFURA_PROJECT_ID = "9411575f49c84289a51a7dab811049cb";
+
+// export const agent = createAgent<IResolver>({
+//   plugins: [
+//     new DIDResolverPlugin({
+//       resolver: new Resolver({
+//         ...ethrDidResolver({ infuraProjectId: INFURA_PROJECT_ID }),
+//         ...webDidResolver()
+//       })
+//     })
+//   ]
+// });
+
+//   // const { agent } = useVeramo();
+//   // const resolvedDids = useCallback(async () => {
+//   //   const resolvedDid = await agent?.resolveDid("did:web:example.com");
+//   //   console.log("createdIdentifier -->", { resolvedDid, identifiers });
+//   // }, [agent]);
+
+//   // useEffect(() => {
+//   //   if (agent) {
+//   //     const resolveDids = resolvedDids();
+//   //     console.log({ resolveDids });
+//   //   }
+//   // }, [agent]);
+export {};

packages/sdk-v2/src/sdk/index.ts

@@ -1,12 +1,13 @@
-export * from './analytics';
-export * from './base';
-export * from './buygd';
-export * from './claim';
-export * from './constants';
-export * from './faucet';
-export * from './ipfs';
-export * from './microbridge';
-export * from './newsfeed';
-export * from './onboard';
-export * from './savings';
-export * from './storage';
+export * from "./analytics";
+export * from "./base";
+export * from "./buygd";
+export * from "./claim";
+export * from "./constants";
+export * from "./faucet";
+export * from "./goodid";
+export * from "./ipfs";
+export * from "./microbridge";
+export * from "./newsfeed";
+export * from "./onboard";
+export * from "./savings";
+export * from "./storage";

packages/sdk-v2/src/stories/goodid/CredentialsExample.stories.tsx

@@ -0,0 +1,102 @@
+import React, { useContext, useEffect, useState } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+// import { useVeramo, VeramoProvider } from "@veramo-community/veramo-react";
+import { View, Text } from "react-native";
+import { useEthers } from "@usedapp/core";
+
+import type { VerifiableCredential } from "../../sdk/goodid/types";
+import { W3Wrapper } from "../W3Wrapper";
+import { GoodIdContext, GoodIdContextProvider } from "../../contexts/goodid/GoodIdContext";
+
+const GoodIdWrapper = ({ children }) => {
+  return <GoodIdContextProvider>{children}</GoodIdContextProvider>;
+};
+
+enum CredentialTypes {
+  VerifiableLocationCredential = "Location",
+  VerifiableAgeCredential = "Age",
+  VerifiableGenderCredential = "Gender"
+}
+
+const mockCredential = {
+  credentialSubject: {
+    id: "", // example. Id will be set on server
+    countryCode: "US"
+  },
+  issuer: {
+    id: "did:key:p3Ls9vx5d7NDeqHwJG42bBxB2kzMEOgXB3tjVPQHqy1fjZrY"
+  },
+  type: ["VerifiableCredential", "VerifiableLocationCredential"],
+  "@context": ["https://www.w3.org/2018/credentials/v1"],
+  issuanceDate: "2024-02-19T08:56:34.000Z",
+  proof: {
+    type: "JwtProof2020",
+    jwt: "eyJhbGciOiJFZERTQSIsInR5cCI6IkpXVCJ9.eyJ2YyI6eyJAY29udGV4dCI6WyJodHRwczovL3d3dy53My5vcmcvMjAxOC9jcmVkZW50aWFscy92MSJdLCJ0eXBlIjpbIlZlcmlmaWFibGVDcmVkZW50aWFsIl0sImNyZWRlbnRpYWxTdWJqZWN0Ijp7InlvdSI6IlJvY2sifX0sInN1YiI6ImRpZDp3ZWI6ZXhhbXBsZS5jb20iLCJuYmYiOjE3MDgzMzI5OTQsImlzcyI6ImRpZDprZXk6ejZNa3Fuc1BzakRpZnFtaEZLMjlnVmdWN2hqU0FVZlNGN2d1VVFSVHRzM2ViV3Y0In0.ViJUzFSe3l3j7opIgDhgKKx-xtiXP3RpjWckyFsnYiCEm7WOv3WTZAVLkGVNXwAsevJZ6Pg9h1X_nSRytLNJAw"
+  }
+};
+
+const CredentialsView = () => {
+  const { account } = useEthers();
+  const [credentials, setCredentials] = useState<VerifiableCredential[] | undefined>([]);
+  const { createCredential, getActiveCredentials } = useContext(GoodIdContext);
+
+  useEffect(() => {
+    const fetchCredentials = async () => {
+      if (getActiveCredentials) {
+        const credentials = await getActiveCredentials();
+
+        const filteredCredentials = credentials?.filter(
+          credential =>
+            credential.credentialSubject.id === account && Object.keys(CredentialTypes).includes(credential.type[1])
+        );
+        console.log("filteredCredentials", filteredCredentials);
+        setCredentials(filteredCredentials ?? []);
+      }
+    };
+
+    // note: does not yet consider already existing credential
+    const createMockCredential = async () => {
+      if (createCredential && account) {
+        mockCredential.credentialSubject.id = account; //example: only for demo purpose is this needed
+        await createCredential(mockCredential).then(() => fetchCredentials());
+      }
+    };
+
+    void createMockCredential();
+  }, [account]);
+
+  return (
+    <View>
+      <Text>Which credentials do you have verified?</Text>
+      {credentials?.map((credential, index) => {
+        return (
+          <View key={index}>
+            <Text style={{ fontWeight: "bold" }}>{CredentialTypes[credential.type[0]]}</Text>
+            <Text>{credential.credentialSubject.countryCode}</Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+const Page = (params: object) => {
+  return (
+    <W3Wrapper withMetaMask={true}>
+      {/* @ts-ignore */}
+      {/* <VeramoProvider agents={[agent]}> */}
+      <GoodIdWrapper>
+        <CredentialsView {...params} />
+      </GoodIdWrapper>
+      {/* </VeramoProvider> */}
+    </W3Wrapper>
+  );
+};
+
+export default {
+  title: "Example component for showing credentials from storage",
+  component: Page
+} as ComponentMeta<typeof Page>;
+
+const Template: ComponentStory<typeof Page> = Page;
+
+export const CredentialsExample = Template.bind({});