Feat/web3auth wallet

web/package.json

@@ -88,6 +88,9 @@
     "@supabase/supabase-js": "^2.39.3",
     "@tanstack/react-query": "^5.40.1",
     "@types/react-modal": "^3.16.3",
+    "@web3auth/ethereum-provider": "^8.12.4",
+    "@web3auth/modal": "^8.12.6",
+    "@web3auth/web3auth-wagmi-connector": "^6.0.0",
     "@web3modal/wagmi": "^4.1.10",
     "@yornaath/batshit": "^0.9.0",
     "amqplib": "^0.10.3",

web/src/context/Web3Provider.tsx

@@ -3,13 +3,14 @@ import React from "react";
 import { createWeb3Modal } from "@web3modal/wagmi/react";
 import { type Chain } from "viem";
 import { createConfig, fallback, http, WagmiProvider, webSocket } from "wagmi";
-import { mainnet, arbitrumSepolia, arbitrum, gnosisChiado, gnosis, sepolia } from "wagmi/chains";
+import { arbitrum, arbitrumSepolia, gnosis, gnosisChiado, mainnet, sepolia } from "wagmi/chains";
 import { walletConnect } from "wagmi/connectors";
 
 import { ALL_CHAINS, DEFAULT_CHAIN } from "consts/chains";
 import { isProductionDeployment } from "consts/index";
 
 import { lightTheme } from "styles/themes";
+import { Web3AuthConnectorInstance, Web3AuthInstance } from "~src/utils/Web3AuthInstance";
 
 const alchemyApiKey = import.meta.env.ALCHEMY_API_KEY ?? "";
 const isProduction = isProductionDeployment();
@@ -56,10 +57,14 @@ export const getTransports = () => {
 const chains = ALL_CHAINS as [Chain, ...Chain[]];
 const transports = getTransports();
 const projectId = import.meta.env.WALLETCONNECT_PROJECT_ID ?? "";
+
+// Create Web3Auth Instance
+const web3AuthInstance = Web3AuthInstance(chains, "Kleros-V2");
+
 const wagmiConfig = createConfig({
   chains,
   transports,
-  connectors: [walletConnect({ projectId })],
+  connectors: [walletConnect({ projectId }), Web3AuthConnectorInstance(web3AuthInstance)],
 });
 
 createWeb3Modal({

web/src/utils/Web3AuthInstance.tsx

@@ -0,0 +1,75 @@
+// Web3Auth Libraries
+import { CHAIN_NAMESPACES, WALLET_ADAPTERS, WEB3AUTH_NETWORK } from "@web3auth/base";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+import { Web3Auth } from "@web3auth/modal";
+import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
+import { Chain } from "wagmi/chains";
+
+// Create Web3AuthConnector Instance
+export function Web3AuthConnectorInstance(web3AuthInstance: Web3Auth) {
+  const modalConfig = {
+    [WALLET_ADAPTERS.OPENLOGIN]: {
+      label: "openlogin",
+      loginMethods: {
+        facebook: {
+          // it will hide the facebook option from the Web3Auth modal.
+          name: "facebook login",
+          showOnModal: false,
+        },
+      },
+      // setting it to false will hide all social login methods from modal.
+      showOnModal: true,
+    },
+  };
+
+  return Web3AuthConnector({
+    web3AuthInstance,
+    modalConfig,
+  });
+}
+
+export function Web3AuthInstance(chains: Chain[], appName: string) {
+  // Create Web3Auth Instance
+  const name = appName;
+  console.log(chains[0].id);
+  const chainConfig = {
+    chainNamespace: CHAIN_NAMESPACES.EIP155,
+    chainId: "0x" + chains[0].id.toString(16),
+    rpcTarget: chains[0].rpcUrls.default.http[0], // This is the public RPC we have added, please pass on your own endpoint while creating an app
+    displayName: chains[0].name,
+    tickerName: chains[0].nativeCurrency?.name,
+    ticker: chains[0].nativeCurrency?.symbol,
+    blockExplorerUrl: chains[0].blockExplorers?.default.url[0] as string,
+  };
+
+  const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
+
+  const web3AuthInstance = new Web3Auth({
+    clientId: "BL8AeNAyRT1eZuwyXy3DimD4Ez4Bedcx2f7BxgQQdMVRE5fnlqtQp__XK-rGec1C5vbdQCTIxvtb7nPtgrpmjHQ",
+    chainConfig,
+    privateKeyProvider,
+    uiConfig: {
+      appName: name,
+      loginMethodsOrder: ["github", "google"],
+      defaultLanguage: "en",
+      modalZIndex: "2147483647",
+      logoLight: "https://web3auth.io/images/web3authlog.png",
+      logoDark: "https://web3auth.io/images/web3authlogodark.png",
+      uxMode: "popup",
+      mode: "light",
+    },
+    web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
+    enableLogging: true,
+  });
+
+  /*   const walletServicesPlugin = new WalletServicesPlugin({
+    walletInitOptions: {
+      whiteLabel: {
+        showWidgetButton: true,
+      }
+    }
+  });
+  web3AuthInstance.addPlugin(walletServicesPlugin); */
+
+  return web3AuthInstance;
+}