verification wip

config-overrides.js

@@ -1,16 +1,63 @@
-const { useBabelRc, override, addWebpackResolve} = require('customize-cra');
+// const { useBabelRc, override, addWebpackResolve, addWebpackPlugin} = require('customize-cra');
+// const { ProvidePlugin } = require('webpack');
 
-module.exports = override(
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useBabelRc(),
-    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'),
-        }
-    })
-)
+// 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/],
+  };
+};

src/App.css

@@ -36,3 +36,5 @@
 /*    transform: rotate(360deg);*/
 /*  }*/
 /*}*/
+
+/*civic orange: #FF6B4E*/

src/Logo.tsx

@@ -7,6 +7,7 @@ import {
     usePrefersReducedMotion,
 } from "@chakra-ui/react"
 import logo from "./logo.svg"
+import civicLogo from "./public/civic-logo-white.svg"
 
 const spin = keyframes`
   from { transform: rotate(0deg); }
@@ -19,6 +20,6 @@ export const Logo = forwardRef<ImageProps, "img">((props, ref) => {
     const animation = prefersReducedMotion
         ? undefined
         : `${spin} infinite 20s linear`
-
-    return <chakra.img animation={animation} src={logo} ref={ref} {...props} />
+    //animation={animation}
+    return <chakra.img src={civicLogo} ref={ref} {...props} />
 })

src/components/CivicOrangeButton.tsx

@@ -0,0 +1,16 @@
+
+import {Button} from "@chakra-ui/react";
+import {ReactNode} from "react"
+
+interface Props {
+    onClick?: any,
+    text?: ReactNode
+    // any props that come into the component
+}
+
+export const CivicOrangeButton = ({onClick, text, ...props}: Props) => {
+
+    return (
+        <Button onClick={onClick} {...props} style={{backgroundColor: "#FF6B4E"}}>{text}</Button>
+    )
+}

src/components/Credential.tsx

@@ -1,7 +1,8 @@
 import {FC, useCallback, useState} from "react";
 import {useCredentials} from "../hooks/useCredentials";
-import {extractMerkleProofFromCredential, getClaim, MerkleProof} from "../lib/credentials";
+import {extractMerkleProofFromCredential, getClaim, getSignature, MerkleProof} from "../lib/credentials";
 import {VerifiableCredential} from "../types/VerifiableCredential";
+import { CivicOrangeButton } from "./CivicOrangeButton";
 import {
     Box, Button,
     Container,
@@ -33,12 +34,14 @@ export const Credential: FC = () => {
     const selectCredential = useCallback(async (credential: VerifiableCredential) => {
         const merkle = extractMerkleProofFromCredential(credential, claimIdentifier);
         const claim = getClaim(credential, claimIdentifier);
+        const signature = getSignature(credential, claimIdentifier);
 
         setMerkleProof(merkle);
         setClaimValue(claim.value);
 
         set('merkleProof', merkle);
         set('issuer', credential.issuer);
+        set('signature', signature);
     }, [set]);
 
     const store = useCallback(() => {
@@ -65,7 +68,7 @@ export const Credential: FC = () => {
                     <FormLabel>Credential</FormLabel>
                     <Textarea id="credential" placeholder="Credential" onChange={e => setCredentialString(e.target.value)} value={credentialString}/>
                 </FormControl>
-                <Button onClick={store}>Store</Button>
+                <CivicOrangeButton onClick={store} text={"Store a credential"} />
                 <Button onClick={getDummyCredential}>Get Dummy Credential</Button>
                 <Button onClick={clearCredentials}>Clear</Button>
                 <TableContainer>

src/components/Verify.tsx

@@ -2,15 +2,44 @@ import React, {FC, useState} from "react";
 import {useSnarky} from "../hooks/useSnarky";
 import {Button, Container, Input, Stack, Textarea} from "@chakra-ui/react";
 
+import { extractMerkleProofFromPayload, extractSignatureFromPayload, extractIssuerFromPayload, MerkleProof } from "../lib/credentials";
+import { useCredentials } from "../hooks/useCredentials";
+
 export const Verify: FC = () => {
     const snarky = useSnarky();
+    const credentials = useCredentials();
     const [proof, setProof] = useState<string>();
+    const [payload, setPayload] = useState<string>();
+
+    const verifyEverything = async () => {
+        //require payload
+        if(!payload) return
+        //extract the data from the payload
+        const merkleProofData: MerkleProof = extractMerkleProofFromPayload(payload);
+        console.log("Merkle proof data: ", merkleProofData)
+        //1. verify merkle root
+        const verifyMerkleProofResult = await credentials.verifyMerkleProofAction(JSON.stringify(merkleProofData.proof), merkleProofData.merkleRoot, merkleProofData.targetHash)
+        if (verifyMerkleProofResult == false) {
+            console.log("Merkle proof verification failed")
+        }
+        //2. verify credential
+        const signature: string = extractSignatureFromPayload(payload)
+        const issuer: string = extractIssuerFromPayload(payload)
+        const verifySignatureResult = await credentials.verifySignatureAction(merkleProofData.merkleRoot, signature, issuer)
+        if(verifySignatureResult == false){
+            //revert
+        }
+
+        //3. verify proof
+    }
 
     return <Container width="100%">
         <Stack style={{ marginBottom: "2px" }}>
             <label htmlFor="proof">Proof: </label>
             <Input id="proof" onChange={(e) => setProof(e.target.value)} type="text" />
+            <Input id="payload" onChange={(e) => setPayload(e.target.value)} type="text" />
             <Button onClick={() => proof && snarky.verify(proof)}>Verify proof</Button>
+            <Button onClick={verifyEverything}>Verify</Button>
         </Stack>
         {/* <Textarea
             style={{ width: "20vw" }}

src/context/CredentialProof.tsx

@@ -5,12 +5,13 @@ type CredentialProof = {
     merkleProof: MerkleProof | undefined;
     zkProof: string | undefined;
     issuer: string | undefined;
+    signature: string | undefined;
 }
 type CredentialProofContextType = CredentialProof & {
     set: <T extends keyof CredentialProof>(property: T, value: CredentialProof[T]) => void;
 }
 const defaultProofContext = {
-    issuer: undefined, merkleProof: undefined, merkleRoot: undefined, zkProof: undefined, set: () => {}
+    issuer: undefined, merkleProof: undefined, merkleRoot: undefined, zkProof: undefined, signature: undefined, set: () => {}
 };
 const CredentialProofContext = createContext<CredentialProofContextType>(defaultProofContext);