While setting up web3auth with React, I am getting an empty modal. Any idea why?
- SDK Version: 5.1.0
My codebase:
import React, { useState, useEffect, useRef, Fragment } from "react";
import { Link, useLocation } from 'react-router-dom'
import { useNavigate } from 'react-router-dom';
import LoginCss from "../../css/Login.module.css"
import '../../css/forgot-password.css'
//import "../../css/web3auth.css"
import { URLS } from '../app-url'
import { errorPopup, successPopup, warningPopup } from '../../utils/PopUpMessage';
import axios from 'axios'
import { ethers } from "ethers";
import Web3 from 'web3';
//Web3Auth
import { Web3Auth } from "@web3auth/modal";
import { CHAIN_NAMESPACES, SafeEventEmitterProvider } from "@web3auth/base";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
//import { WalletConnectV2Adapter, getWalletConnectV2Settings } from "@web3auth/wallet-connect-v2-adapter";
import { MetamaskAdapter } from "@web3auth/metamask-adapter";
const clientId = process.env.REACT_APP_CLIENT_ID
export default function Login({ setUserNameUrl , setAccount , setFooterAccount ,changeIsLogin}) {
const navigator = useNavigate();
const username = localStorage.getItem('username')
const [popup, setPopup] = useState("")
const [user, setUser] = useState({
username: '',
password: ''
})
//web3Auth
const [web3auth, setWeb3auth] = useState(null)
const [provider, setProvider] = useState(null)
useEffect(() => {
setAccount("Login")
setFooterAccount("forgotFooter")
if(username){
navigator(`/debug/`)
warningPopup("Please try logging out and in again")
}else{
navigator("/loginBETA")
}
const init = async () => {
try {
const web3auth = new Web3Auth({
clientId,
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: "0x1",
},
uiConfig: {
theme: "dark",
loginMethodsOrder: ["github", "google"],
defaultLanguage: "en",
appLogo: "https://web3auth.io/community/images/w3a-L-Favicon-1.svg", // Your App Logo Here
},
web3AuthNetwork: "cyan",
});
const openloginAdapter = new OpenloginAdapter({
loginSettings: {
mfaLevel: "default",
},
adapterSettings: {
whiteLabel: {
name: "Buckets",
logoLight: "https://web3auth.io/community/images/w3a-L-Favicon-1.svg",
logoDark: "https://web3auth.io/community/images/w3a-D-Favicon-1.svg",
defaultLanguage: "en",
dark: true, // whether to enable dark mode. defaultValue: false
},
},
});
web3auth.configureAdapter(openloginAdapter);
// adding metamask adapter
const metamaskAdapter = new MetamaskAdapter({
clientId,
sessionTime: 3600, // 1 hour in seconds
web3AuthNetwork: "cyan",
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: "0x1",
rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
},
});
// we can change the above settings using this function
metamaskAdapter.setAdapterSettings({
sessionTime: 86400, // 1 day in seconds
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: "0x1",
rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
},
web3AuthNetwork: "cyan",
});
// it will add/update the metamask adapter in to web3auth class
web3auth.configureAdapter(metamaskAdapter);
setWeb3auth(web3auth)
await web3auth.initModal()
if (web3auth.provider) {
setProvider(web3auth.provider)
}
} catch (error) {
console.error(error)
}
};
init();
}, []);
const loginWeb3Auth = async () => {
if (!web3auth) {
errorPopup("web3auth not initialized yet");
return;
}
const web3authProvider = await web3auth.connect();
setProvider(web3authProvider);
successPopup("Logged in Successfully!");
};
const authenticateUser = async () => {
if (!web3auth) {
errorPopup("web3auth not initialized yet");
return;
}
const idToken = await web3auth.authenticateUser();
errorPopup(idToken);
};
const getUserInfo = async () => {
if (!web3auth) {
errorPopup("web3auth not initialized yet");
return;
}
const user = await web3auth.getUserInfo();
errorPopup(user);
};
const logout2 = async () => {
if (!web3auth) {
errorPopup("web3auth not initialized yet");
return;
}
await web3auth.logout();
setProvider(null);
};
function web3Login() {
return(
<div className="mb-4 mt-4">
<p className="text-center" align="justify"><i>That's the way.</i></p>
<p className="text-center" align="justify"><i>Web2 logins are no longer available.
Login with your wallet provider or create a new wallet below.</i></p>
<button type="button" id="btn-login" className="btn btn-orange shadow-sm" onClick={loginWeb3Auth} >
Connect to Buckets
</button>
</div>
)
}
return (
<>
<div className="bucket-background">
<div className="container">
<div className="row justify-content-center">
<div className="col-xl-10 col-lg-12 col-md-9">
<div className="card o-hidden border-0 shadow-lg my-5">
<div className="card-body p-0">
{/* <!-- Nested Row within Card Body --> */}
<div className="row">
<div className="col-lg-6 d-none d-lg-block bg-password-image"></div>
<div className="col-lg-6">
<div className="p-5">
<div className="text-center">
{web3Login()}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}
) not getting the BigInt error.