Feat/send user email to db (#17)

Author: elihylui

src/renderer/App.tsx

@@ -15,6 +15,8 @@ import { WalletContextProvider } from './context/walletContext';
 import Faucet from './pages/Faucet';
 import { CONFIG } from './config';
 import { RunnerContextProvider } from './context/runnerContext';
+import { useEffect, useState } from 'react';
+import { web3AuthInstance } from './Web3AuthInstance'
 
 export default function App() {
   const flockTheme = {
@@ -76,20 +78,6 @@ export default function App() {
     blockExplorer: chains[0]?.blockExplorers.default?.url,
   };
 
-  const web3AuthInstance = new Web3Auth({
-    clientId: CONFIG.WEB3_AUTH_CLIENT_ID,
-    web3AuthNetwork: 'cyan',
-    // @ts-ignore
-    chainConfig,
-    authMode: 'WALLET',
-    uiConfig: {
-      theme: 'light',
-      appName: 'FLock Client',
-      appLogo:
-        'https://drive.google.com/uc?export=download&id=1Pm_naD3LlamhxkEVv-i2VBVG2RC4DYaZ',
-    },
-  });
-
   const privateKeyProvider = new EthereumPrivateKeyProvider({
     config: { chainConfig },
   });

src/renderer/Web3AuthInstance.tsx

@@ -0,0 +1,34 @@
+import { configureChains } from 'wagmi';
+import { polygonMumbai } from 'wagmi/chains';
+import { alchemyProvider } from 'wagmi/providers/alchemy';
+import { Web3Auth } from '@web3auth/modal';
+import { CONFIG } from './config'; // Make sure to import the relevant config
+
+const { chains } = configureChains([polygonMumbai], [
+  alchemyProvider({ apiKey: 'Qsvi2mE7TTt44pEwkojqyqdRb1s0xAQV' }),
+]);
+
+const chainConfig = {
+  chainNamespace: 'eip155',
+  chainId: `0x${chains[0].id.toString(16)}`,
+  // @ts-ignore
+  rpcTarget: CONFIG.WEB3_AUTH_RPC,
+  displayName: chains[0].name,
+  tickerName: chains[0].nativeCurrency?.name,
+  ticker: chains[0].nativeCurrency?.symbol,
+  blockExplorer: chains[0]?.blockExplorers.default?.url,
+};
+
+export const web3AuthInstance = new Web3Auth({
+  clientId: CONFIG.WEB3_AUTH_CLIENT_ID,
+  web3AuthNetwork: 'cyan',
+  // @ts-ignore
+  chainConfig,
+  authMode: 'WALLET',
+  uiConfig: {
+    theme: 'light',
+    appName: 'FLock Client',
+    appLogo:
+      'https://drive.google.com/uc?export=download&id=1Pm_naD3LlamhxkEVv-i2VBVG2RC4DYaZ',
+  },
+});

src/renderer/components/Wallet.tsx

@@ -1,8 +1,10 @@
 import { Box, Button, Heading, Layer, Text } from 'grommet';
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { WalletContext } from 'renderer/context/walletContext';
 import truncateEthAddress from 'truncate-eth-address';
 import { useAccount, useConnect, useDisconnect } from 'wagmi';
+import { web3AuthInstance } from '../Web3AuthInstance';
+import { getPublicCompressed } from "@toruslabs/eccrypto";
 
 function Wallet() {
   const { address } = useAccount();
@@ -21,6 +23,53 @@ function Wallet() {
     wagmiDisconnect();
   };
 
+  interface UserInfo {
+    email: string;
+    address: string;
+    name?: string;
+    profileImage?: string;
+    aggregateVerifier?: string;
+    verifier?: string;
+    verifierId?: string;
+    typeOfLogin?: string;
+    dappShare?: string;
+    idToken?: string; //jwt
+    oAuthIdToken?: string;
+    oAuthAccessToken?: string;
+  }
+
+  const loadUserInfo = async () => {
+      try {
+        const privateKey = await web3AuthInstance.provider?.request({
+          method: "eth_private_key", 
+        }) as string;
+
+        const publicKey = getPublicCompressed(Buffer.from(privateKey.padStart(64, "0"), "hex")).toString("hex");
+        const user = await web3AuthInstance.getUserInfo();
+
+        const res = await fetch("https://us-central1-flock-demo-design.cloudfunctions.net/postEmailToDB", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: "Bearer " + user.idToken, 
+          },
+          body: JSON.stringify({ pubKey: publicKey, email: user.email, wallet: address }),
+        });
+
+        console.log(res, "success!")
+        return res.json();
+      
+      } catch (error) {
+        console.error('Error loading user info:', error);
+      }
+  };
+
+  useEffect(() => {
+    if (address) {
+      loadUserInfo(); 
+    }
+  }, [address]);
+
   if (showWalletSettings) {
     return (
       <Layer onEsc={() => setShowWalletSettings(false)} full>