Add ContextProvider component to web-no-modal-sdk and web-modal-sdk

web-modal-sdk/wagmi-examples/wagmi-modal-example/src/App.tsx

@@ -1,41 +1,35 @@
 // WAGMI Libraries
-import { WagmiProvider, createConfig, http, useAccount, useConnect, useDisconnect } from "wagmi";
-import { coinbaseWallet, walletConnect } from "wagmi/connectors";
-import { sepolia, mainnet, polygon } from "wagmi/chains";
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query' 
+import { useWalletClient, useAccount, useConnect, useDisconnect } from "wagmi";
+import { useEffect } from 'react';
 
 import { SendTransaction } from "./sendTransaction";
 import { SwitchChain } from "./switchNetwork";
 import { Balance } from "./balance";
 import { WriteContract } from "./writeContract";
 
-import Web3AuthConnectorInstance from "./Web3AuthConnectorInstance";
-import "./App.css";
-
-const queryClient = new QueryClient() 
+// context to get the userInfo with web3auth.getUserInfo()
+import { ContextProvider, useWeb3Auth } from "./ContextProvider";
 
-// Set up client
-const config = createConfig({
-  chains: [mainnet, sepolia, polygon],
-  transports: {
-    [mainnet.id]: http(),
-    [sepolia.id]: http(),
-    [polygon.id]: http(),
-  },
-  connectors: [
-    walletConnect({
-      projectId: "3314f39613059cb687432d249f1658d2",
-      showQrModal: true,
-    }),
-    coinbaseWallet({ appName: 'wagmi' }),
-    Web3AuthConnectorInstance([mainnet, sepolia, polygon]),
-  ],
-});
+import "./App.css";
 
 function Profile() {
   const { address, connector, isConnected } = useAccount();
   const { connect, connectors, error } = useConnect();
   const { disconnect } = useDisconnect();
+  const { data: walletClient } = useWalletClient();
+  let web3Auth = useWeb3Auth();
+
+  useEffect(() => {
+    const getUserInfo = async () => {
+      try {
+        var userInfo = await web3Auth?.getUserInfo();
+      } catch (e) {
+        console.log("Cannot get userInfo.");
+      }
+      console.log("/app, userInfo", userInfo);
+    };
+    getUserInfo();
+  }, [walletClient]);
 
   if (isConnected) {
     return (
@@ -70,13 +64,11 @@ function Profile() {
 // Pass client to React Context Provider
 function App() {
   return (
-    <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>
+    <ContextProvider>
       <div className="container">
         <Profile />
       </div>
-      </QueryClientProvider>
-    </WagmiProvider>
+    </ContextProvider>
   );
 }
 

web-modal-sdk/wagmi-examples/wagmi-modal-example/src/ContextProvider.tsx

@@ -0,0 +1,52 @@
+// WAGMI Libraries
+import { WagmiProvider, createConfig, http, useAccount, useConnect, useDisconnect } from "wagmi";
+import { coinbaseWallet, walletConnect } from "wagmi/connectors";
+import { Web3AuthNoModal } from "@web3auth/no-modal";
+import { sepolia, mainnet, polygon, Chain } from "wagmi/chains";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query' 
+import React, { useContext } from 'react';
+
+import { Web3AuthConnectorInstance, Web3AuthInstance} from "./Web3AuthConnectorInstance";
+
+// some configurations
+const appName = "wagmi";
+const projectWalletConnectId = "3314f39613059cb687432d249f1658d2";
+const chains_available: [Chain, ...Chain[]] = [mainnet, sepolia, polygon];
+
+const queryClient = new QueryClient() 
+
+// Create Web3Auth Instance
+const web3AuthInstance = Web3AuthInstance(chains_available, appName);
+
+export const Web3AuthContext = React.createContext<Web3AuthNoModal | null>(web3AuthInstance);
+export const useWeb3Auth = () => useContext(Web3AuthContext);
+
+export const ContextProvider = ({ children }: { children: React.ReactNode }) => {
+    // Set up wagmi client
+    const config = createConfig({
+        chains: chains_available,
+        transports: {
+            [mainnet.id]: http(),
+            [sepolia.id]: http(),
+            [polygon.id]: http(),
+        },
+        connectors: [
+            walletConnect({
+            projectId: projectWalletConnectId,
+            showQrModal: true,
+            }),
+            coinbaseWallet({ appName: appName }),
+            Web3AuthConnectorInstance(web3AuthInstance),
+        ],
+    });
+
+    return (
+        <Web3AuthContext.Provider value={web3AuthInstance}>
+            <WagmiProvider config={config}>
+                <QueryClientProvider client={queryClient}>
+                    {children}
+                </QueryClientProvider>
+            </WagmiProvider>
+        </Web3AuthContext.Provider>
+    );
+};

web-modal-sdk/wagmi-examples/wagmi-modal-example/src/Web3AuthConnectorInstance.tsx

@@ -6,20 +6,43 @@ import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK, WALLET_ADAPTERS } from "@web3auth/b
 import { Chain } from "wagmi/chains";
 import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
 
-export default function Web3AuthConnectorInstance(chains: Chain[]) {
-  // Create Web3Auth Instance
-  const name = "My App Name";
-  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,
-  };
+// 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;
+   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 privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
 
   const web3AuthInstance = new Web3Auth({
     clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
@@ -39,32 +62,14 @@ export default function Web3AuthConnectorInstance(chains: Chain[]) {
     enableLogging: true,
   });
 
-  const walletServicesPlugin = new WalletServicesPlugin({
+/*   const walletServicesPlugin = new WalletServicesPlugin({
     walletInitOptions: {
       whiteLabel: {
         showWidgetButton: true,
       }
     }
   });
-  web3AuthInstance.addPlugin(walletServicesPlugin);
+  web3AuthInstance.addPlugin(walletServicesPlugin); */
 
-  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,
-  });
+  return web3AuthInstance;
 }

web-no-modal-sdk/wagmi/wagmi-no-modal-example/src/App.tsx

@@ -1,41 +1,35 @@
 // WAGMI Libraries
-import { WagmiProvider, createConfig, http, useAccount, useConnect, useDisconnect } from "wagmi";
-import { coinbaseWallet, walletConnect } from "wagmi/connectors";
-import { sepolia, mainnet, polygon } from "wagmi/chains";
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query' 
+import { useWalletClient,useAccount, useConnect, useDisconnect } from "wagmi";
+import { useEffect } from 'react';
 
 import { SendTransaction } from "./sendTransaction";
 import { SwitchChain } from "./switchNetwork";
 import { Balance } from "./balance";
 import { WriteContract } from "./writeContract";
 
-import Web3AuthConnectorInstance from "./Web3AuthConnectorInstance";
 import "./App.css";
 
-const queryClient = new QueryClient() 
-
-// Set up client
-const config = createConfig({
-  chains: [mainnet, sepolia, polygon],
-  transports: {
-    [mainnet.id]: http(),
-    [sepolia.id]: http(),
-    [polygon.id]: http(),
-  },
-  connectors: [
-    walletConnect({
-      projectId: "3314f39613059cb687432d249f1658d2",
-      showQrModal: true,
-    }),
-    coinbaseWallet({ appName: 'wagmi' }),
-    Web3AuthConnectorInstance([mainnet, sepolia, polygon]),
-  ],
-});
+// context to get the userInfo with web3auth.getUserInfo()
+import { ContextProvider, useWeb3Auth } from "./ContextProvider";
 
 function Profile() {
   const { address, connector, isConnected } = useAccount();
   const { connect, connectors, error } = useConnect();
   const { disconnect } = useDisconnect();
+  const { data: walletClient } = useWalletClient();
+  let web3Auth = useWeb3Auth();
+
+  useEffect(() => {
+    const getUserInfo = async () => {
+      try {
+        var userInfo = await web3Auth?.getUserInfo();
+      } catch (e) {
+        console.log("Cannot get userInfo first time, likely web3Auth not fully updated");
+      }
+      console.log("/app, userInfo", userInfo);
+    };
+    getUserInfo();
+  }, [walletClient]);
 
   if (isConnected) {
     return (
@@ -70,13 +64,11 @@ function Profile() {
 // Pass client to React Context Provider
 function App() {
   return (
-    <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>
+    <ContextProvider>
       <div className="container">
         <Profile />
       </div>
-      </QueryClientProvider>
-    </WagmiProvider>
+    </ContextProvider>
   );
 }
 

web-no-modal-sdk/wagmi/wagmi-no-modal-example/src/ContextProvider.tsx

@@ -0,0 +1,52 @@
+// WAGMI Libraries
+import { WagmiProvider, createConfig, http, useAccount, useConnect, useDisconnect } from "wagmi";
+import { coinbaseWallet, walletConnect } from "wagmi/connectors";
+import { Web3AuthNoModal } from "@web3auth/no-modal";
+import { sepolia, mainnet, polygon, Chain } from "wagmi/chains";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query' 
+import React, { useContext } from 'react';
+
+import { Web3AuthConnectorInstance, Web3AuthInstance} from "./Web3AuthConnectorInstance";
+
+// some configurations
+const appName = "wagmi";
+const projectWalletConnectId = "3314f39613059cb687432d249f1658d2";
+const chains_available: [Chain, ...Chain[]] = [mainnet, sepolia, polygon];
+
+const queryClient = new QueryClient() 
+
+// Create Web3Auth Instance
+const web3AuthInstance = Web3AuthInstance(chains_available, appName);
+
+export const Web3AuthContext = React.createContext<Web3AuthNoModal | null>(web3AuthInstance);
+export const useWeb3Auth = () => useContext(Web3AuthContext);
+
+export const ContextProvider = ({ children }: { children: React.ReactNode }) => {
+    // Set up wagmi client
+    const config = createConfig({
+        chains: chains_available,
+        transports: {
+            [mainnet.id]: http(),
+            [sepolia.id]: http(),
+            [polygon.id]: http(),
+        },
+        connectors: [
+            walletConnect({
+            projectId: projectWalletConnectId,
+            showQrModal: true,
+            }),
+            coinbaseWallet({ appName: appName }),
+            Web3AuthConnectorInstance(web3AuthInstance),
+        ],
+    });
+
+    return (
+        <Web3AuthContext.Provider value={web3AuthInstance}>
+            <WagmiProvider config={config}>
+                <QueryClientProvider client={queryClient}>
+                    {children}
+                </QueryClientProvider>
+            </WagmiProvider>
+        </Web3AuthContext.Provider>
+    );
+};