added WalletConnect

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",

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