[Archive] Can't set Provider Globally

Embedded Wallets (Web3Auth)
1

:classical_building: Archived Content from Web3Auth Community

This topic was originally posted by zkPlaty on 7/22/2023.
This content has been migrated from our previous community forum to preserve valuable discussions.

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.

4

@zkPlaty Thanks for sharing your feedback.