Getting a weird import error when trying to use wagmi with the modal SDK in nextJS. I tried messing with the packages myself but it would only create a web of further errors. figured I’d ask before I went too far down the rabbit hole
Please provide the following details too when asking for help in this category:
-
SDK Version:
- @web3Auth/modal ^5.0.1
- @web3Auth/base ^5.0.1
- @web3Auth/openlogin-adapter ^5.0.1
- @web3Auth/web3auth-wagmi-connector ^3.0.1 - latest I could find
- ethers ^5.7.2
- wagmi ^0.12.1
-
Platform: NextJS
-
Browser Console Screenshots:
Please provide the Web3Auth initialization and login code snippet below:
./pages/_app.js
import { useEffect, useState } from 'react';
import { WagmiConfig, createClient, configureChains } from "wagmi";
import { mainnet, goerli, polygon, polygonMumbai, optimism, optimismGoerli } from 'wagmi/chains';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import WagmiAuthConnector from '../lib/web3AuthConnector';
...
const initConstruct = async () => {
try {
const { chains, provider, webSocketProvider } = configureChains(chainArr, alchemyArr);
const client = createClient({
autoConnect: true,
connectors: [
WagmiAuthConnector(chains),
new WalletConnectConnector({
chains,
options: {
qrcode: true,
},
}),
new InjectedConnector({
chains,
options: {
name: "Injected"
}
})
],
provider,
webSocketProvider
})
setClient(client)
} catch(err) {
console.log(err);
}
}
initConstruct();
./lib/web3AuthConnector.js
import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
import { Web3Auth } from "@web3auth/modal";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { CHAIN_NAMESPACES } from "@web3auth/base";
export const WagmiAuthConnector = ({ chains }) => {
const name = "Lynk";
// Create Web3Auth Instance
const web3AuthInstance = new Web3Auth({
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT,
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,
blockExplorer: chains[0]?.blockExplorers.default?.url,
},
uiConfig: {
theme: "dark",
loginMethodsOrder: ["google", "facebook", "twitter"],
defaultLanguage: "en",
// appLogo: "https://web3auth.io/community/images/w3a-L-Favicon-1.svg", // Your App Logo Here
appName: name,
},
});
// Add openlogin adapter for customisations
const openloginAdapterInstance = new OpenloginAdapter({
adapterSettings: {
network: "testnet",
uxMode: "popup",
whiteLabel: {
name: name,
// 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: theme === "dark" ? true : false,
},
},
});
web3AuthInstance.configureAdapter(openloginAdapterInstance);
return new Web3AuthConnector({
chains: chains,
options: {
web3AuthInstance
}
})
};```