This is how i instantiate the modal
// Web3Auth Libraries
import { Web3Auth } from '@web3auth/modal'
import { Chain } from 'wagmi'
import { Web3AuthConnector } from './Web3AuthConnector'
export default function Web3AuthConnectorInstance(chains: Chain[]) {
// Create Web3Auth Instance
const web3AuthInstance = new Web3Auth({
clientId: process.env.NEXT_PUBLIC_WEB3_AUTH_ID!,
chainConfig: {
chainNamespace: '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,
},
uiConfig: {
loginMethodsOrder: ['facebook', 'google'],
defaultLanguage: 'en',
},
web3AuthNetwork: 'cyan',
})
return new Web3AuthConnector({
chains: chains as any,
options: {
web3AuthInstance,
},
})
}
And im getting this:
im copying import { Web3AuthConnector } from './Web3AuthConnector' from a local place because when using wagmi connector I was also getting this error:
file:///Users/mauro/app/node_modules/@web3auth/web3auth-wagmi-connector/dist/web3authWagmiConnector.esm.js:3
import { log, WALLET_ADAPTERS, ADAPTER_STATUS, CHAIN_NAMESPACES } from '@web3auth/base';
^^^^^^^^^^^^^^
SyntaxError: Named export 'ADAPTER_STATUS' not found. The requested module '@web3auth/base' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from '@web3auth/base';
const { log, WALLET_ADAPTERS, ADAPTER_STATUS, CHAIN_NAMESPACES } = pkg;
my local version is just a copy paste of whats in your js file so I donāt think that should be causing the issue
Iām not using any whitelabel so I donāt think it should be triggered here. I canāt use my app right now.
Just for reference, hereās how the connector that I copy pasted looks
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import { Connector } from "@wagmi/core";
import {
log,
WALLET_ADAPTERS,
ADAPTER_STATUS,
CHAIN_NAMESPACES,
} from "@web3auth/base";
import {
getAddress,
UserRejectedRequestError,
createWalletClient,
custom,
SwitchChainError,
} from "viem";
const IS_SERVER = typeof window === "undefined";
function isIWeb3AuthModal(obj) {
return typeof obj.initModal !== "undefined";
}
function normalizeChainId(chainId) {
if (typeof chainId === "string")
return Number.parseInt(
chainId,
chainId.trim().substring(0, 2) === "0x" ? 16 : 10
);
if (typeof chainId === "bigint") return Number(chainId);
return chainId;
}
class Web3AuthConnector extends Connector {
constructor(_ref) {
let { chains, options } = _ref;
super({
chains,
options,
});
_defineProperty(this, "ready", !IS_SERVER);
_defineProperty(this, "id", "web3auth");
_defineProperty(this, "name", "Web3Auth");
_defineProperty(this, "provider", null);
_defineProperty(this, "loginParams", void 0);
_defineProperty(this, "modalConfig", void 0);
_defineProperty(this, "web3AuthInstance", void 0);
_defineProperty(this, "onAccountsChanged", (accounts) => {
if (accounts.length === 0) this.emit("disconnect");
else
this.emit("change", {
account: getAddress(accounts[0]),
});
});
_defineProperty(this, "onChainChanged", (chainId) => {
const id = normalizeChainId(chainId);
const unsupported = this.isChainUnsupported(id);
log.info("chainChanged", id, unsupported);
this.emit("change", {
chain: {
id,
unsupported,
},
});
});
this.web3AuthInstance = options.web3AuthInstance;
this.loginParams = options.loginParams || null;
this.modalConfig = options.modalConfig || null;
}
async connect() {
let { chainId } =
arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
try {
this.emit("message", {
type: "connecting",
});
await this.getProvider();
this.provider.on("accountsChanged", this.onAccountsChanged);
this.provider.on("chainChanged", this.onChainChanged);
if (!this.web3AuthInstance.connected) {
if (isIWeb3AuthModal(this.web3AuthInstance)) {
await this.web3AuthInstance.connect();
} else if (this.loginParams) {
await this.web3AuthInstance.connectTo(
WALLET_ADAPTERS.OPENLOGIN,
this.loginParams
);
} else {
log.error(
"please provide valid loginParams when using @web3auth/no-modal"
);
throw new UserRejectedRequestError(
"please provide valid loginParams when using @web3auth/no-modal"
);
}
}
const [account, connectedChainId] = await Promise.all([
this.getAccount(),
this.getChainId(),
]);
let unsupported = this.isChainUnsupported(connectedChainId);
let id = connectedChainId;
if (chainId && connectedChainId !== chainId) {
// try switching chain
const chain = await this.switchChain(chainId);
id = chain.id;
unsupported = this.isChainUnsupported(id);
}
return {
account,
chain: {
id,
unsupported,
},
};
} catch (error) {
log.error("error while connecting", error);
this.onDisconnect();
throw new UserRejectedRequestError("Something went wrong");
}
}
async getWalletClient() {
let { chainId } =
arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
const [provider, account] = await Promise.all([
this.getProvider(),
this.getAccount(),
]);
const chain = this.chains.find((x) => x.id === chainId);
if (!provider) throw new Error("provider is required.");
return createWalletClient({
account,
chain,
transport: custom(provider),
});
}
async getAccount() {
const provider = await this.getProvider();
const accounts = await provider.request({
method: "eth_accounts",
});
return getAddress(accounts[0]);
}
async getProvider() {
if (this.provider) {
return this.provider;
}
if (this.web3AuthInstance.status === ADAPTER_STATUS.NOT_READY) {
if (isIWeb3AuthModal(this.web3AuthInstance)) {
await this.web3AuthInstance.initModal({
modalConfig: this.modalConfig,
});
} else if (this.loginParams) {
await this.web3AuthInstance.init();
} else {
log.error(
"please provide valid loginParams when using @web3auth/no-modal"
);
throw new UserRejectedRequestError(
"please provide valid loginParams when using @web3auth/no-modal"
);
}
}
this.provider = this.web3AuthInstance.provider;
return this.provider;
}
async isAuthorized() {
try {
const account = await this.getAccount();
return !!account;
} catch {
return false;
}
}
async getChainId() {
await this.getProvider();
const chainId = await this.provider.request({
method: "eth_chainId",
});
log.info("chainId", chainId);
return normalizeChainId(chainId);
}
async switchChain(chainId) {
try {
var _chain$blockExplorers, _chain$nativeCurrency, _chain$nativeCurrency2;
const chain = this.chains.find((x) => x.id === chainId);
if (!chain)
throw new SwitchChainError(new Error("chain not found on connector."));
await this.web3AuthInstance.addChain({
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: `0x${chain.id.toString(16)}`,
rpcTarget: chain.rpcUrls.default.http[0],
displayName: chain.name,
blockExplorer:
((_chain$blockExplorers = chain.blockExplorers) === null ||
_chain$blockExplorers === void 0
? void 0
: _chain$blockExplorers.default.url[0]) || "",
ticker:
((_chain$nativeCurrency = chain.nativeCurrency) === null ||
_chain$nativeCurrency === void 0
? void 0
: _chain$nativeCurrency.symbol) || "ETH",
tickerName:
((_chain$nativeCurrency2 = chain.nativeCurrency) === null ||
_chain$nativeCurrency2 === void 0
? void 0
: _chain$nativeCurrency2.name) || "Ethereum",
decimals: chain.nativeCurrency.decimals || 18,
});
log.info("Chain Added: ", chain.name);
await this.web3AuthInstance.switchChain({
chainId: `0x${chain.id.toString(16)}`,
});
log.info("Chain Switched to ", chain.name);
return chain;
} catch (error) {
log.error("Error: Cannot change chain", error);
throw new SwitchChainError(error);
}
}
async disconnect() {
await this.web3AuthInstance.logout();
const provider = await this.getProvider();
provider.removeListener("accountsChanged", this.onAccountsChanged);
provider.removeListener("chainChanged", this.onChainChanged);
}
isChainUnsupported(chainId) {
return !this.chains.some((x) => x.id === chainId);
}
onDisconnect() {
this.emit("disconnect");
}
}
export { Web3AuthConnector };
//# sourceMappingURL=web3authWagmiConnector.esm.js.map
And hereās the typescript declaration that I also copied from you
import {
Address,
Chain,
Connector,
ConnectorData,
WalletClient,
} from "@wagmi/core";
import { type SafeEventEmitterProvider } from "@web3auth/base";
import type { Options } from "./interfaces";
export declare class Web3AuthConnector extends Connector<
SafeEventEmitterProvider,
Options
> {
ready: boolean;
readonly id = "web3auth";
readonly name = "Web3Auth";
protected provider: SafeEventEmitterProvider | null;
private loginParams;
private modalConfig;
private web3AuthInstance;
constructor({ chains, options }: { chains?: Chain[]; options: Options });
connect({ chainId }?: { chainId?: number }): Promise<Required<ConnectorData>>;
getWalletClient({ chainId }?: { chainId?: number }): Promise<WalletClient>;
getAccount(): Promise<Address>;
getProvider(): Promise<SafeEventEmitterProvider>;
isAuthorized(): Promise<boolean>;
getChainId(): Promise<number>;
switchChain(chainId: number): Promise<Chain>;
disconnect(): Promise<void>;
protected onAccountsChanged: (accounts: string[]) => void;
protected isChainUnsupported(chainId: number): boolean;
protected onChainChanged: (chainId: string | number) => void;
protected onDisconnect(): void;
}
Sadly this also wasnāt enough for wagmi and had to do this
const web3Auth = Web3AuthConnectorInstance(chains) as any
export const config = createConfig({
autoConnect: true,
connectors: [web3Auth],
publicClient,
webSocketPublicClient,
})
I just want to fix the whitelabel issue for now.
