Zk proof compiling

config-overrides.js

@@ -1,5 +1,63 @@
-const { useBabelRc, override } = require('customize-cra');
+// const { useBabelRc, override, addWebpackResolve, addWebpackPlugin} = require('customize-cra');
+// const { ProvidePlugin } = require('webpack');
 
-module.exports = override(
-    useBabelRc()
-);
+// module.exports = override(
+//     // eslint-disable-next-line react-hooks/rules-of-hooks
+//     useBabelRc(),
+//     addWebpackPlugin(
+//         new ProvidePlugin({
+//             Buffer: ['buffer', 'Buffer'],
+//         }),
+//     ),
+//     addWebpackResolve({
+//         fallback: {
+//             assert: require.resolve('assert'),
+//             buffer: require.resolve('buffer'),
+//             crypto: require.resolve('crypto-browserify'),
+//             fs: false,
+//             path: require.resolve('path-browserify'),
+//             stream: require.resolve('stream-browserify'),
+//         }
+//     }),
+
+// )
+
+const { ProvidePlugin } = require('webpack');
+
+module.exports = function (config, env) {
+  return {
+    ...config,
+    module: {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        {
+          test: /\.(m?js|ts)$/,
+          enforce: 'pre',
+          use: ['source-map-loader'],
+        },
+      ],
+    },
+    plugins: [
+      ...config.plugins,
+    //   new ProvidePlugin({
+    //     process: 'process/browser',
+    //   }),
+      new ProvidePlugin({
+        Buffer: ['buffer', 'Buffer'],
+      }),
+    ],
+    resolve: {
+      ...config.resolve,
+      fallback: {
+        assert: require.resolve('assert'),
+        buffer: require.resolve('buffer'),
+        stream: require.resolve('stream-browserify'),
+        crypto: require.resolve('crypto-browserify'),
+        fs: false,
+        path: require.resolve('path-browserify'),
+      },
+    },
+    ignoreWarnings: [/Failed to parse source map/],
+  };
+};

package.json

@@ -3,18 +3,34 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/react": "^2.3.6",
+    "@chakra-ui/theme": "^2.1.14",
+    "@chakra-ui/theme-tools": "^2.0.12",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@identity.com/credential-commons": "^3.0.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "assert": "^2.0.0",
+    "bs58": "^5.0.0",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
+    "framer-motion": "^7.5.3",
     "http-proxy-middleware": "^2.0.6",
+    "merkle-tools": "^1.4.1",
+    "path-browserify": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.6.0",
     "react-scripts": "5.0.1",
-    "snarkyjs": "^0.6.0",
+    "snarkyjs": "^0.6.1",
+    "stream-browserify": "^3.0.0",
+    "tweetnacl": "^1.0.3",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },
@@ -32,9 +48,11 @@
   },
   "browserslist": {
     "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+      "chrome >= 67",
+      "edge >= 79",
+      "firefox >= 68",
+      "opera >= 54",
+      "safari >= 14"
     ],
     "development": [
       "last 1 chrome version",

scripts/createCredential.ts

@@ -0,0 +1,78 @@
+import { decode, encode } from 'bs58';
+import { VC, Claim, schemaLoader, CVCSchemaLoader } from '@identity.com/credential-commons'
+import {VerifiableCredential} from "./VerifiableCredential";
+import * as nacl from 'tweetnacl';
+
+export const DOCUMENT_CREDENTIAL_TYPE = 'credential-cvc:IdDocument-v3';
+
+type Pii = {
+    document: {
+        type: string;
+        number: string;
+        gender: string;
+        name: { givenNames: string; familyNames: string };
+        dateOfBirth: { day: number; month: number; year: number };
+        placeOfBirth: string;
+        issueCountry: string;
+        nationality: string;
+    }
+}
+
+const getIssuerVerificationMethod = (issuerDid: string): string => `${issuerDid}#default`;
+
+const buildClaims = async (pii: Pii) => {
+    const typeClaim = await Claim.create('claim-cvc:Document.type-v1', pii.document.type);
+    const nameClaim = await Claim.create('claim-cvc:Document.name-v1', pii.document.name);
+    const dateOfBirthClaim = await Claim.create('claim-cvc:Document.dateOfBirth-v1', pii.document.dateOfBirth);
+    const issueCountryClaim = await Claim.create('claim-cvc:Document.issueCountry-v1', pii.document.issueCountry);
+    const evidencesClaim = await Claim.create('claim-cvc:Document.evidences-v1', {});
+    return [typeClaim, nameClaim, dateOfBirthClaim, issueCountryClaim, evidencesClaim];
+};
+
+export const createIdDocumentCredential = async (
+    pii: Pii,
+    subjectDID: string,
+    issuerDid: string,
+    issuerPrivateKey: string
+): Promise<VerifiableCredential> => {
+    const claims = await buildClaims(pii);
+    const issuerKeypair = nacl.sign.keyPair.fromSecretKey(decode(issuerPrivateKey));
+    return VC.create(DOCUMENT_CREDENTIAL_TYPE, issuerDid, null, subjectDID, claims, null, {
+        verificationMethod: getIssuerVerificationMethod(issuerDid),
+        keypair: issuerKeypair,
+    });
+};
+
+( async () => {
+    // load civic schemas on startup and store them in memory
+    schemaLoader.addLoader(new CVCSchemaLoader(undefined, null));
+
+    const subject = nacl.sign.keyPair();
+    const issuer = nacl.sign.keyPair();
+    const credential = await createIdDocumentCredential(
+        {
+            document: {
+                type: 'passport',
+                number: '123456789',
+                gender: 'M',
+                name: {
+                    givenNames: 'John',
+                    familyNames: 'Doe',
+                },
+                dateOfBirth: { day: 1, month: 1, year: 1990 },
+                placeOfBirth: 'London',
+                issueCountry: 'GBR',
+                nationality: 'UK'
+            },
+        },
+        'did:sol:' + encode(subject.publicKey),
+        'did:sol:' + encode(issuer.publicKey),
+        encode(issuer.secretKey)
+    );
+
+    console.log(JSON.stringify(credential, null, 2));
+
+    const msg = new TextEncoder().encode(credential.proof.merkleRoot);
+    const signature = nacl.sign.detached(msg, issuer.secretKey);
+    console.log('signature', Buffer.from(signature).toString('hex'));
+})().catch(console.error);

scripts/verifyCredential.ts

@@ -0,0 +1,26 @@
+import * as nacl from 'tweetnacl';
+import { decode } from 'bs58';
+import {TextEncoder} from "util";
+
+const credential = require('../src/dummyCredential.json');
+
+const merkleRootString = credential.proof.merkleRoot;
+// credential-commons requires this rather than the more natural Buffer.from(merkleRootString, 'hex')
+const merkleRoot = new TextEncoder().encode(merkleRootString);
+
+const signatureString = credential.proof.merkleRootSignature.signature;
+const signature = Buffer.from(signatureString, 'hex');
+
+const signerPublicKeyString = credential.issuer.replace(/(did:.*:)/, '');
+console.log("Signer before decode: ", signerPublicKeyString)
+const signerPublicKey = decode(signerPublicKeyString);
+console.log("Signer pub key: ", signerPublicKey)
+
+console.log('verifying signature...', {
+    merkleRootString,
+    signatureString,
+    issuer: credential.issuer,
+    signerPublicKeyString,
+});
+const verification = nacl.sign.detached.verify(merkleRoot, signature, signerPublicKey);
+console.log('signature verified', verification);

scripts/verifyMerkleWitness.ts

@@ -0,0 +1,16 @@
+import MerkleTools, {Proof} from 'merkle-tools';
+const credential = require('../dummyCredential.json');
+
+const claim = credential.proof.leaves[0];
+const proof = claim.node;
+const targetHash = claim.targetHash;
+const merkleRoot = credential.proof.merkleRoot;
+
+const merkleTools = new MerkleTools({ hashType: 'sha256' });
+
+// the TS type is wrong for this field in merkle-tools. So we cast here to fool TS.
+const castedProof = proof as unknown as Proof<string>;
+
+const isValid = merkleTools.validateProof(castedProof, targetHash, merkleRoot);
+
+console.log('proof is valid', isValid);

src/App.css

@@ -1,38 +1,40 @@
-.App {
-  text-align: center;
-}
+/*.App {*/
+/*  text-align: center;*/
+/*}*/
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
+/*.App-logo {*/
+/*  height: 40vmin;*/
+/*  pointer-events: none;*/
+/*}*/
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
+/*@media (prefers-reduced-motion: no-preference) {*/
+/*  .App-logo {*/
+/*    animation: App-logo-spin infinite 20s linear;*/
+/*  }*/
+/*}*/
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
+/*.App-header {*/
+/*  background-color: #282c34;*/
+/*  min-height: 100vh;*/
+/*  display: flex;*/
+/*  flex-direction: column;*/
+/*  align-items: center;*/
+/*  justify-content: center;*/
+/*  font-size: calc(10px + 2vmin);*/
+/*  color: white;*/
+/*}*/
 
-.App-link {
-  color: #61dafb;
-}
+/*.App-link {*/
+/*  color: #61dafb;*/
+/*}*/
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+/*@keyframes App-logo-spin {*/
+/*  from {*/
+/*    transform: rotate(0deg);*/
+/*  }*/
+/*  to {*/
+/*    transform: rotate(360deg);*/
+/*  }*/
+/*}*/
+
+/*civic orange: #FF6B4E*/