When asking for help in this category, please make sure to provide the following details:
- SDK Version(package.json):
"@toruslabs/eccrypto": "^5.0.4",
"@web3auth/auth-adapter": "^9.4.0",
"@web3auth/base": "^9.4.0",
"@web3auth/base-provider": "^9.4.0",
"@web3auth/default-evm-adapter": "^9.4.2",
"@web3auth/modal": "^9.4.2",
-
Platform: React Js with Vite
-
Screen Shots:
-
Code Snippet:
import { web3AuthChainConfig, web3AuthCliedId } from "@root/constants";
import { WALLET_ADAPTERS, WEB3AUTH_NETWORK } from "@web3auth/base";
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
import { Web3Auth } from "@web3auth/modal";
import { useEffect, useState } from "react";
const privateKeyProvider = new CommonPrivateKeyProvider({
config: { chainConfig: web3AuthChainConfig },
});
const web3AuthOptions = {
clientId: web3AuthCliedId,
privateKeyProvider,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
};
const web3auth = new Web3Auth(web3AuthOptions);
const useWeb3AuthModal = () => {
const [, setLoggedIn] = useState(false);
const [, setProvider] = useState(null);
useEffect(() => {
const init = async () => {
try {
await web3auth.initModal({
modalConfig: {
[WALLET_ADAPTERS.AUTH]: {
label: "openlogin",
loginMethods: {
apple: {
name: "apple",
showOnModal: false,
},
discord: {
name: "discord",
showOnModal: false,
},
facebook: {
name: "facebook",
showOnModal: false,
},
farcaster: {
name: "farcaster",
showOnModal: false,
},
github: {
name: "github",
showOnModal: false,
},
google: {
name: "google",
showOnModal: true,
},
kakao: {
name: "kakao",
showOnModal: false,
},
line: {
name: "line",
showOnModal: false,
},
linkedin: {
name: "linkedin",
showOnModal: false,
},
reddit: {
name: "reddit",
showOnModal: false,
},
sms_passwordless: {
name: "sms_passwordless",
showOnModal: false,
},
twitch: {
name: "twitch",
showOnModal: false,
},
twitter: {
name: "twitter",
showOnModal: false,
},
wechat: {
name: "wechat",
showOnModal: false,
},
weibo: {
name: "weibo",
showOnModal: false,
},
},
},
},
});
setProvider(web3auth.provider);
if (web3auth.connected) {
setLoggedIn(true);
}
} catch (error) {
console.error(error);
}
};
init();
}, []);
const login = async () => {
const web3authProvider = await web3auth.connect();
setProvider(web3authProvider);
if (web3auth.connected) {
setLoggedIn(true);
}
};
return { login };
};
export default useWeb3AuthModal;
In the Modal I am unable to see the Wallets like Keplr.
I want to Add it under the Google Button. Like the below
Or It is nit even showing the Continue With Wallet Button.
Can we show Continue with Wallet with only Keplr Wallet?
