Merge pull request #1 from yssf-io/walletconnect

Added WalletConnect

README.md

@@ -19,9 +19,11 @@ We forked two repositories and added functionality to make everything work.
 - ✅ Modify the Next.js frontend of `zkrsa` in order to accept an endpoint that stores signature data from someone scanning their passports
 - ✅ Get zkrsa working with the signature format we are able to retrieve from the Android app
 - ✅ Contract to mint the SBT when proof is valid
+- 🚧 WalletConnect integration to get the address
+- 🚧 Let user send their proof onchain to mint the SBT
 - ✅ Commit to minter address in circuit to avoid front-running
 - 🚧 On-chain registry of CSCA pubkeys based on the official ICAO masterlist
 - 🚧 Decompose the hashed eContent of the passport into the private user data and reconstitute them in the circuit
-- 🚧 Modify the Android app to let people send their signature data to the Next.js backend (and store it temporarily)
+- ✅ Modify the Android app to let people send their signature data to the Next.js backend (and store it temporarily)
 - 🚧 Safe Module to claim a Safe if holding the right SBT
 - 🚧 Using Sismo Data Groups or EAS Attestations to let people prove they own such an SBT without revealing which one

zkrsa/frontend/package.json

@@ -15,6 +15,8 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.10.12",
+    "@web3modal/ethereum": "^2.7.0",
+    "@web3modal/react": "^2.7.0",
     "axios": "^1.1.3",
     "circom": "0.5.45",
     "dotenv": "^16.3.1",
@@ -22,7 +24,9 @@
     "pg": "^8.11.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "sqlite3": "^5.1.6"
+    "sqlite3": "^5.1.6",
+    "viem": "^1.4.0",
+    "wagmi": "^1.3.9"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^13.0.2",
@@ -51,6 +55,6 @@
     "tailwindcss": "^3.1.8",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
-    "typescript": "4.8.4"
+    "typescript": "^5.1.6"
   }
 }

zkrsa/frontend/src/components/Navigation.tsx

@@ -24,7 +24,7 @@ export const Title: NextComponentType = () => {
     return (
         <div className="flex justify-center mt-10 my-4">
             <div className="w-1/2 text-beige text-center font-work-sans text-4xl">
-                zkRSA signature verification
+                Proof of Baguette 🥖
             </div>
         </div>
     );
@@ -65,15 +65,9 @@ export const Description: NextComponentType = () => {
     return (
         <div className="flex font-roboto-light-300 my-10 text-beige justify-center">
             <div className="w-3/4 text-center">
-                Generate a zero-knowledge proof for a valid RSA signature. You
-                can generate a signature using our repo{' '}
-                <a
-                    className="hover:text-gold"
-                    href="https://github.com/dmpierre/zkrsa"
-                >
-                    here
-                </a>
-                .
+                Mint a Soulbound Token with your Passport. You need to follow
+                the steps on our Android app, after which you can enter your
+                passport number and click on Generate proof.
             </div>
         </div>
     );

zkrsa/frontend/src/pages/_app.tsx

@@ -3,6 +3,25 @@ import '../../styles/globals.css';
 import type { AppProps } from 'next/app';
 import { useState } from 'react';
 import { Proof } from '../types';
+import {
+    EthereumClient,
+    w3mConnectors,
+    w3mProvider,
+} from '@web3modal/ethereum';
+import { Web3Modal } from '@web3modal/react';
+import { configureChains, createConfig, WagmiConfig } from 'wagmi';
+import { arbitrum, mainnet, polygon } from 'wagmi/chains';
+
+const chains = [mainnet];
+const projectId = '995f7eebe283b9908e661cf08b88b492';
+
+const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
+const wagmiConfig = createConfig({
+    autoConnect: true,
+    connectors: w3mConnectors({ projectId, chains }),
+    publicClient,
+});
+const ethereumClient = new EthereumClient(wagmiConfig, chains);
 
 function MyApp({ Component, pageProps }: AppProps) {
     const [vkeyVerifier, setvkeyVerifier] = useState<null | any>(null);
@@ -11,17 +30,23 @@ function MyApp({ Component, pageProps }: AppProps) {
     const [proof, setproof] = useState<null | Proof>(null);
 
     return (
-        <Component
-            {...pageProps}
-            proof={proof}
-            setproof={setproof}
-            vkeyState={vkeyState}
-            setvkeyState={setvkeyState}
-            vkeyProof={vkeyProof}
-            setvkeyProof={setvkeyProof}
-            vkeyVerifier={vkeyVerifier}
-            setvkeyVerifier={setvkeyVerifier}
-        />
+        <div>
+            <WagmiConfig config={wagmiConfig}>
+                <Component
+                    {...pageProps}
+                    proof={proof}
+                    setproof={setproof}
+                    vkeyState={vkeyState}
+                    setvkeyState={setvkeyState}
+                    vkeyProof={vkeyProof}
+                    setvkeyProof={setvkeyProof}
+                    vkeyVerifier={vkeyVerifier}
+                    setvkeyVerifier={setvkeyVerifier}
+                />
+            </WagmiConfig>
+
+            <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
+        </div>
     );
 }
 

zkrsa/frontend/src/pages/index.tsx

@@ -1,5 +1,5 @@
 import type { NextPage } from 'next';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
     ButtonGenerateProof,
     ButtonExportProof,
@@ -13,6 +13,8 @@ import {
 } from '../components/Inputs';
 import { NavMenu, Title, Description, Footer } from '../components/Navigation';
 import { PropsAppPage } from '../types';
+import { Web3Button } from '@web3modal/react';
+
 /**
  * @dev for exporting json proof and public signals data
  */
@@ -35,6 +37,9 @@ const Home: NextPage<PropsAppPage> = ({
 
     return (
         <div>
+            <div className="mt-5 ml-5">
+                <Web3Button />
+            </div>
             <Title></Title>
             <Description></Description>
             <NavMenu></NavMenu>
@@ -50,7 +55,13 @@ const Home: NextPage<PropsAppPage> = ({
                         />
                     </div>
                 )}
-                <InputHash sethash={sethash} hash={hash}></InputHash>
+                {hash && signature && publicKey ? (
+                    <div className="text-green-500 font-roboto-light-300 text-5xl">
+                        🎊 You exist! 🎊
+                    </div>
+                ) : null}
+
+                {/*<InputHash sethash={sethash} hash={hash}></InputHash>
                 <InputSignature
                     setsignature={setsignature}
                     signature={signature}
@@ -58,7 +69,7 @@ const Home: NextPage<PropsAppPage> = ({
                 <InputPublicKey
                     setpublicKey={setpublicKey}
                     publicKey={publicKey}
-                ></InputPublicKey>
+                ></InputPublicKey>*/}
             </div>
             <div className="mt-4 flex flex-col w-11/12">
                 <ButtonGenerateProof