I used Connector, But now widget dont appaer after login (Wallet Service). I’m using last version of all packages.
connect.tsx
import { darkTheme, lightTheme, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { WagmiProvider/*, http*/ } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { getDefaultConfig } from '@rainbow-me/rainbowkit'
import { getOtherWallets, getPopularWallets, getV2Wallets } from './rainbow';
import { getWalletClient as CoreGetWalletClient } from 'wagmi/actions';
import {
Web3AuthInnerContext,
Web3AuthProvider,
} from "@web3auth/modal-react-hooks";
import { useWalletServicesPlugin, WalletServicesProvider } from "@web3auth/wallet-services-plugin-react-hooks";
import web3AuthContextConfig, { web3auth } from './w3aContext';
import { WalletServicesPlugin } from '@web3auth/wallet-services-plugin';
export const wagmiConfig = getDefaultConfig({
appName: 'Kalias',
projectId: import.meta.env.VITE_WC_PROJECT_ID,
chains: [eth],
wallets: [getPopularWallets({ wallets: []/* particleWallets */ }), getV2Wallets(), getOtherWallets()],
//transports: {
// http,
//},
})
const queryClient = new QueryClient()
export const getWalletClient = () => CoreGetWalletClient(wagmiConfig);
export const WalletConnect = ({ children }: PropsWithChildren<unknown>) => {
const { colorMode } = useColorMode();
const walletServicesPlugin = new WalletServicesPlugin({
wsEmbedOpts: {
},
walletInitOptions: { whiteLabel: { showWidgetButton: true, buttonPosition: "top-right", hideSwap:true }, },
});
const initWeb3Auth = useCallback(async () => {
try {
// await web3auth.init(); return error
} catch (error) {
console.error("failed to init w3a error: " + error);
}
try{
web3auth.addPlugin(walletServicesPlugin);
web3auth.getPlugin(walletServicesPlugin.name);
} catch(e){
console.log("failed to add plugin error: " + e); // no error
}
}, []);
useEffect(() => {
initWeb3Auth();
}, [initWeb3Auth]);
return (
<WagmiProvider config={wagmiConfig}>
<QueryClientProvider client={queryClient}>
<Web3AuthProvider config={web3AuthContextConfig}>
<WalletServicesProvider context={Web3AuthInnerContext}>
<RainbowKitProvider theme={theme[colorMode]}>
{children}
</RainbowKitProvider>
</WalletServicesProvider>
</Web3AuthProvider>
</QueryClientProvider>
</WagmiProvider>
);
};
RainbowWeb3authConnector.tsx
import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
import { Web3Auth } from "@web3auth/modal";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { CHAIN_NAMESPACES, UX_MODE, WALLET_ADAPTERS, WEB3AUTH_NETWORK } from "@web3auth/base";
import { Wallet, WalletDetailsParams } from "@rainbow-me/rainbowkit";
import { createConnector as createWagmiConnector } from "wagmi";
const clientId = "xxx";
export const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: '0x' + eth.id.toString(16),
rpcTarget: eth.rpcUrls.default.http[0],
displayName: eth.name,
blockExplorerUrl: eth.blockExplorers.default.url,
};
const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
const web3AuthInstance = new Web3Auth({
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider,
uiConfig: {
uxMode: UX_MODE.POPUP,
modalZIndex: "99999999999999999",
}
});
export const rainbowWeb3AuthConnector = (): Wallet => ({
id: "web3auth",
name: "social",
rdns: "web3auth",
iconUrl: "https://web3auth.io/images/web3authlog.png",
iconBackground: "#fff",
installed: true,
downloadUrls: {},
createConnector: (walletDetails: WalletDetailsParams) =>
createWagmiConnector((config) => ({
...Web3AuthConnector({
web3AuthInstance,
modalConfig: {
[WALLET_ADAPTERS.AUTH]: {
label: "openlogin",
loginMethods: {
google: {
name: "google",
showOnModal: true,
mainOption: true
},
email_passwordless: {
name: "email_passwordless",
showOnModal: true,
}, },
},
},}
)(config),
...walletDetails,
})),
});
w3aContext.tsx
import { WEB3AUTH_NETWORK } from "@web3auth/base";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { Web3Auth, Web3AuthOptions } from "@web3auth/modal";
import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
import { chainConfig } from "./RainbowWeb3authConnector";
const clientId = "xxx";
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: {
chainConfig,
},
});
const web3AuthOptions: Web3AuthOptions = {
chainConfig,
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
privateKeyProvider,
};
const walletServicesPlugin = new WalletServicesPlugin({
wsEmbedOpts: {},
walletInitOptions: { whiteLabel: { showWidgetButton: true, buttonPosition: "top-right", hideSwap:true }, },
});
export const web3auth = new Web3Auth(web3AuthOptions);
const web3AuthContextConfig = {
web3AuthOptions,
plugins: [walletServicesPlugin],
};
export default web3AuthContextConfig;