Archived Content from Web3Auth Community
This topic was originally posted by dev19 on 3/19/2024.
This content has been migrated from our previous community forum to preserve valuable discussions.
We recently upgraded to the latest version of Web3Auth to support chain switch. However, weâve noticed a significant slowdown in the wallet login process. The total time for a user to log in using socials has increased considerably, impacting the overall user experience.
Could you please investigate this issue? Iâve provided all the relevant integration details below for your reference.
âdependenciesâ: {
âweb3auth/baseâ: â^8.0.0â, // removed @ to create this post
âweb3auth/ethereum-providerâ: â^8.0.1â, // removed @ to create this post
âweb3auth/no-modalâ: â^8.0.1â, // removed @ to create this post
âweb3auth/openlogin-adapterâ: â^8.0.1â, // removed @ to create this post
âweb3auth/wallet-services-pluginâ: â^8.0.1â, // removed @ to create this post
âweb3auth/web3auth-wagmi-connectorâ: â^6.0.0â, // removed @ to create this post
âethersâ: â^5.7.2â,
ânextâ: â^14.0.3â,
âreactâ: â^18.2.0â,
âreact-domâ: â^18.2.0â,
âviemâ: â^2.7.12â,
âwagmiâ: â^2.5.7â
},
âdevDependenciesâ: {
âsafe-global/safe-core-sdk-typesâ: â^2.3.0â, // removed @ to create this post
âtypes/nodeâ: â^20.9.4â, // removed @ to create this post
âtypes/reactâ: â^18.2.38â, // removed @ to create this post
âtypes/react-domâ: â^18.2.17â, // removed @ to create this post
âtypescriptâ: â^5.3.2â
}
web3authInsatnce
import { Web3AuthNoModal } from âweb3auth/no-modalâ; // removed @ to create this post
import { EthereumPrivateKeyProvider } from âweb3auth/ethereum-providerâ; // removed @ to create this post
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK, UX_MODE } from âweb3auth/baseâ; // removed @ to create this post
import { Chain } from âwagmi/chainsâ;
import { OpenloginAdapter } from âweb3auth/openlogin-adapterâ; // removed @ to create this post
export default function Web3AuthConnectorInstance(chains: Chain[]) {
// Create Web3Auth Instance
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: â0xâ + chains[0].id.toString(16),
rpcTarget: chains[0].rpcUrls.default.http[0], // This is the public RPC we have added, please pass on your own endpoint while creating an app
displayName: chains[0].name,
tickerName: chains[0].nativeCurrency?.name,
ticker: chains[0].nativeCurrency?.symbol,
blockExplorerUrl: chains[0].blockExplorers?.default.url[0] as string,
};
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig },
});
const web3AuthInstance = new Web3AuthNoModal({
clientId: process.env.NEXT_PUBLIC_WEB3_AUTH_CLIENT_ID || ââ,
chainConfig,
privateKeyProvider,
uiConfig: {
appName: âParifiâ,
appUrl: âhttps://parifi.orgâ,
defaultLanguage: âenâ, // en, de, ja, ko, zh, es, fr, pt, nl
theme: {
primary: â#ea633eâ,
},
},
web3AuthNetwork: WEB3AUTH_NETWORK.CYAN,
enableLogging: true,
});
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
uxMode: UX_MODE.REDIRECT,
},
});
web3AuthInstance.configureAdapter(openloginAdapter);
return web3AuthInstance;
}
wagmiConfig
âuse clientâ;
import { type ReactNode } from âreactâ;
import { createConfig, http } from âwagmiâ;
import { walletConnect } from âwagmi/connectorsâ;
import { injected } from âwagmi/connectorsâ;
import { coinbaseWallet } from âwagmi/connectorsâ;
import { arbitrumSepolia } from âwagmi/chainsâ;
import { Web3AuthConnector } from â@web3auth/web3auth-wagmi-connectorâ;
import Web3AuthConnectorInstance from â./web3AuthConnectorInstanceâ;
import { LOGIN_PROVIDER } from â@web3auth/openlogin-adapterâ;
import { WagmiProvider } from âwagmiâ;
import { QueryClient, QueryClientProvider } from â@tanstack/react-queryâ;
type LoginProvider = (typeof LOGIN_PROVIDER)[keyof typeof LOGIN_PROVIDER];
export function getWeb3AuthConnector(
loginProvider: LoginProvider,
hint?: string,
) {
return Web3AuthConnector({
// Web3AuthConnectorInstance([mainnet, sepolia, polygon]),
web3AuthInstance: Web3AuthConnectorInstance([arbitrumSepolia]),
loginParams: {
loginProvider: loginProvider,
extraLoginOptions: {
login_hint: hint,
},
},
});
}
const projectId = ââ;
export const coinbaseConnector = coinbaseWallet({
appName: âParifiâ,
});
export const injectedConnector = injected();
export const walletConnectConnector = walletConnect({
projectId: projectId,
showQrModal: true,
});
export const wagmiConfig = createConfig({
chains: [arbitrumSepolia],
transports: {
[arbitrumSepolia.id]: http(),
},
connectors: [
injected(),
walletConnect({
projectId: projectId,
showQrModal: true,
}),
coinbaseWallet({
appName: âParifiâ,
}),
âŚObject.values(LOGIN_PROVIDER)
.filter(
(provider) =>
provider !== âemail_passwordlessâ && provider !== âsms_passwordlessâ,
)
.map((provider) => getWeb3AuthConnector(provider)),
],
});
const queryClient = new QueryClient();
export default function WagmiProviderP({ children }: { children: ReactNode }) {
return (
{children}
);
}
login code
const { connect }= useConnect({
onSuccess:(data)=> {
if (!data.chain.unsupported)
router.push(/${chainNameById[data.chain.id]}/perpetuals?market=ETH);
},
});
constgeneralConnector =({
connector,
loginProvider,
}:{
connector:Connector<any,any>;
loginProvider:string;
}) => {
if (!isClientSide()) return;
logger.info(âgeneralConnectorâ,{ connector, loginProvider });
returnconnect({ connector: connector });
};
generalConnector({ connector:getWeb3AuthConnector(âgoogleâ), loginProvider:âgoogleâ, }) } {icons.google_icon}
