Can't set Provider Globally

Help - Plug n Play PnP Web SDKs
1

Please provide the following details too when asking for help in this category:

const [provider, setProvider] = useState(null);

  • SDK Version: “@web3auth/core”: “^4.6.0”,
    “@web3auth/modal”: “^6.1.5”,
    “@web3auth/react-native-sdk”: “^4.0.0”,
    “@web3auth/torus-wallet-connector-plugin”: “^6.1.4”,
  • Platform: Nextjs
  • Browser Console Screenshots:
    image
const torusPlugin = useMemo(() => {
    return new TorusWalletConnectorPlugin({
        torusWalletOpts: {},
        walletInitOptions: {
          whiteLabel: {
            theme: { isDark: true, colors: { primary: "#00a8ff" } },
            logoDark: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
            logoLight: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
          },
          useWalletConnect: true,
          enableLogging: true,
        },
    });
  }, []);

  useEffect(() => {
    const initializeWeb3Auth = async () => {
      try {
        const web3auth = new Web3Auth({
          uiConfig: {
            appName: "G-Stream",
            appLogo: "",
            theme: "light",
            loginMethodsOrder: ["twitter"],
            defaultLanguage: "en",
            primaryButton: "socialLogin",
  
          },
          clientId: "B.......",
          web3AuthNetwork: "cyan",
          chainConfig: {
            chainNamespace: "eip155",
            chainId: "0x13881", // hex of 80001, polygon testnet
            rpcTarget: "https://rpc.ankr.com/polygon_mumbai",
            // Avoid using public rpcTarget in production.
            // Use services like Infura, Quicknode etc
            displayName: "Polygon Mumbai Testnet",
            blockExplorer: "https://mumbai.polygonscan.com/",
            ticker: "MATIC",
            tickerName: "Matic",
          },
        });
  
        setWeb3auth(web3auth);
        subscribeAuthEvents(web3auth, setIsLoading);
  
        await web3auth.initModal({
          modalConfig: modalConfig,
        });
        
        
        const provider2 = (web3auth.provider);
        const rpc =  new RPC(provider2);
        setProvider(rpc)
        console.log("provider set", provider)
  
        await web3auth.addPlugin(torusPlugin);

      } catch (e) {
        console.log(err.message);
      }
    };

    initializeWeb3Auth();
  }, [torusPlugin]);

return {
    ...
    connectWeb3Auth,
    provider,
    ...
  };


// Connect function that fires when user wants to log in

  const connectWeb3Auth = async () => {
    if (!web3auth) {
      console.log("Web3Auth not initialized");
      return;
    }

    setIsLoading(true); // Set isLoading to true before awaiting the web3auth.connect()

    try {
      await web3auth.connect();
      setIsWeb3AuthInitialized(true);
      await getUserInfo();
      await getAccounts();
    } catch (error) {
      console.error("Error connecting wallet:", error);
      setIsWeb3AuthInitialized(false); // Set the initialization state to false in case of an error
    } finally {
      setIsLoading(false); // Set isLoading to false once there's a response (or an error)
    }
  };

My file structure:

layout.tsx
/components > Header, Provider, Hooks, Flow/Flows.tsx

I’m trying to access web3auth provider (account linked to social user) in different file (Flow.tsx). If I import it directly, when I click Log In, console log does it “modal visible”, but there’s no modal. Next I tried to setting it globally.

"use client"

import React, { createContext, useContext, useMemo } from 'react';

const Web3ProviderContext = createContext();

export const useWeb3Provider = () => useContext(Web3ProviderContext);

export const Web3ProviderProvider = ({ children, provider }) => {
  const value = useMemo(() => provider, [provider]);

  return <Web3ProviderContext.Provider value={value}>{children}</Web3ProviderContext.Provider>;
};

In Layout.tsx:


import { Web3ProviderProvider } from '../components/provider/Web3ProviderContext'
import useWeb3auth from '../components/hooks/useWeb3auth'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const { provider } = useWeb3auth();

  return (
      <Web3ProviderProvider provider={provider}>
        <html lang="en">
          <body className="inter flex flex-col h-screen">
            <div className="flex flex-1">
              <div>
                <Sidebar />
              </div>
              <div className="w-full flex flex-col">
                <Header />
                {children}
              </div>
            </div>
          </body>
        </html>
      </Web3ProviderProvider>
  );
}

Same issue.

2

@zkPlaty Thanks for reaching out.

Your issue has been forwarded to our team and we will get back with further updates once more information becomes available.

3

There were no errors btw. Modal should’ve been visible, but it wasn’t for some reason.

I fixed it for now by using global context and setting all constants accessible throughout the application by wrapping the layout.

2 Likes
4

@zkPlaty Thanks for sharing your feedback.