diff --git a/web-modal-sdk/wagmi-examples/wagmi-modal-example/src/App.tsx b/web-modal-sdk/wagmi-examples/wagmi-modal-example/src/App.tsx
index 68c108aa8..60c35c153 100644
--- a/web-modal-sdk/wagmi-examples/wagmi-modal-example/src/App.tsx
+++ b/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 (
-
-
+
-
-
+
);
}
diff --git a/web-modal-sdk/wagmi-examples/wagmi-modal-example/src/ContextProvider.tsx b/web-modal-sdk/wagmi-examples/wagmi-modal-example/src/ContextProvider.tsx
new file mode 100644
index 000000000..c688e9c5e
--- /dev/null
+++ b/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(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 (
+
+
+
+ {children}
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/web-modal-sdk/wagmi-examples/wagmi-modal-example/src/Web3AuthConnectorInstance.tsx b/web-modal-sdk/wagmi-examples/wagmi-modal-example/src/Web3AuthConnectorInstance.tsx
index 6840c77c5..ba28148d2 100644
--- a/web-modal-sdk/wagmi-examples/wagmi-modal-example/src/Web3AuthConnectorInstance.tsx
+++ b/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;
}
\ No newline at end of file
diff --git a/web-no-modal-sdk/wagmi/wagmi-no-modal-example/src/App.tsx b/web-no-modal-sdk/wagmi/wagmi-no-modal-example/src/App.tsx
index 68c108aa8..23c158a53 100644
--- a/web-no-modal-sdk/wagmi/wagmi-no-modal-example/src/App.tsx
+++ b/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 (
-
-
+
-
-
+
);
}
diff --git a/web-no-modal-sdk/wagmi/wagmi-no-modal-example/src/ContextProvider.tsx b/web-no-modal-sdk/wagmi/wagmi-no-modal-example/src/ContextProvider.tsx
new file mode 100644
index 000000000..c688e9c5e
--- /dev/null
+++ b/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(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 (
+
+
+
+ {children}
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/web-no-modal-sdk/wagmi/wagmi-no-modal-example/src/Web3AuthConnectorInstance.tsx b/web-no-modal-sdk/wagmi/wagmi-no-modal-example/src/Web3AuthConnectorInstance.tsx
index e0c06982b..e5a178871 100644
--- a/web-no-modal-sdk/wagmi/wagmi-no-modal-example/src/Web3AuthConnectorInstance.tsx
+++ b/web-no-modal-sdk/wagmi/wagmi-no-modal-example/src/Web3AuthConnectorInstance.tsx
@@ -3,61 +3,67 @@ import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
import { Web3AuthNoModal } from "@web3auth/no-modal";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK, UX_MODE } from "@web3auth/base";
-import { Chain } from "wagmi/chains";
import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
-export default function Web3AuthConnectorInstance(chains: Chain[]) {
- // Create Web3Auth Instance
- const name = "My App Name";
+// WAGMI Libraries
+import { Chain } from "wagmi/chains";
+
+// Create Web3AuthConnector Instance
+export function Web3AuthConnectorInstance(web3AuthInstance: Web3AuthNoModal) {
+ return Web3AuthConnector({
+ web3AuthInstance,
+ loginParams: {
+ loginProvider: "google",
+ },
+ });
+}
+
+// Create Web3Auth Instance
+export function Web3AuthInstance(chains: Chain[], appName: string) {
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,
+ 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 Web3AuthNoModal({
- clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
- chainConfig,
- privateKeyProvider,
- uiConfig: {
- appName: name,
+ clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
+ chainConfig,
+ privateKeyProvider,
+ uiConfig: {
+ appName: appName,
defaultLanguage: "en",
logoLight: "https://web3auth.io/images/web3authlog.png",
logoDark: "https://web3auth.io/images/web3authlogodark.png",
mode: "light",
- },
- web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
- enableLogging: true,
+ },
+ web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+ enableLogging: true,
});
const openloginAdapter = new OpenloginAdapter({
- adapterSettings: {
+ adapterSettings: {
uxMode: UX_MODE.REDIRECT,
- }
+ }
});
web3AuthInstance.configureAdapter(openloginAdapter);
const walletServicesPlugin = new WalletServicesPlugin({
- walletInitOptions: {
+ walletInitOptions: {
whiteLabel: {
- showWidgetButton: true,
+ showWidgetButton: true,
+ }
}
- }
});
web3AuthInstance.addPlugin(walletServicesPlugin);
- return Web3AuthConnector({
- web3AuthInstance,
- loginParams: {
- loginProvider: "google",
- },
- });
+ return web3AuthInstance;
}
\ No newline at end of file