getDefaultExternalAdapters doesn’t work with my project id, only getInjectedAdapters works.
I even made sure to use the same versions as the sample:
“@web3auth/base”: “^9.2.2”,
“@web3auth/default-evm-adapter”: “^9.2.2”,
“@web3auth/ethereum-provider”: “^9.2.2”,
“@web3auth/modal”: “^9.2.2”,
Here’s the code:
/* eslint-disable no-console */
“use client”;
import { CHAIN_NAMESPACES, IAdapter, IProvider, WEB3AUTH_NETWORK } from “@web3auth/base”;
import { EthereumPrivateKeyProvider } from “@web3auth/ethereum-provider”;
import { getDefaultExternalAdapters, getInjectedAdapters } from “@web3auth/default-evm-adapter”;
import { Web3Auth, Web3AuthOptions } from “@web3auth/modal”;
import { useEffect, useState } from “react”;
import { Button } from “@/components/ui/button”;
// import RPC from “./ethersRPC”;
import RPC from “./viemRPC”;
// import RPC from “./web3RPC”;
const clientId = “I use my prod client id here. It works when I use the one from sample code”; // get from https://dashboard.web3auth.io
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: “0x89”,
rpcTarget: “https://rpc.ankr.com/polygon”,
displayName: “Polygon Mainnet”,
blockExplorerUrl: “https://polygon.etherscan.io”,
ticker: “POL”,
tickerName: “Polygon Ecosystem Token”,
};
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig },
});
const web3AuthOptions: Web3AuthOptions = {
clientId,
// web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider,
};
const web3auth = new Web3Auth(web3AuthOptions);
console.log("Web3auth: ", web3auth);
function App() {
const [provider, setProvider] = useState<IProvider | null>(null);
const [loggedIn, setLoggedIn] = useState(false);
useEffect(() => {
const init = async () => {
try {
const adapters = await getDefaultExternalAdapters({ options: web3AuthOptions });
adapters.forEach((adapter: IAdapter) => {
const web3authObject = web3auth.configureAdapter(adapter);
console.log(web3authObject);
});
// IMP START - SDK Initialization
await web3auth.initModal();
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);
}
};
const getUserInfo = async () => {
const user = await web3auth.getUserInfo();
uiConsole(user);
};
const logout = async () => {
await web3auth.logout();
setProvider(null);
setLoggedIn(false);
uiConsole(“logged out”);
};
// Check the RPC file for the implementation
const getAccounts = async () => {
if (!provider) {
uiConsole(“provider not initialized yet”);
return;
}
const address = await RPC.getAccounts(provider);
uiConsole(address);
};
const getBalance = async () => {
if (!provider) {
uiConsole(“provider not initialized yet”);
return;
}
const balance = await RPC.getBalance(provider);
uiConsole(balance);
};
const signMessage = async () => {
if (!provider) {
uiConsole(“provider not initialized yet”);
return;
}
const signedMessage = await RPC.signMessage(provider);
uiConsole(signedMessage);
};
const sendTransaction = async () => {
if (!provider) {
uiConsole(“provider not initialized yet”);
return;
}
uiConsole(“Sending Transaction…”);
const transactionReceipt = await RPC.sendTransaction(provider);
uiConsole(transactionReceipt);
};
const getConnectedAdapterName = async () => {
if (!provider) {
uiConsole(“provider not initialized yet”);
return;
}
uiConsole(“getConnectedAdapterName…”);
const adapter = web3auth.connectedAdapterName;
uiConsole(adapter);
};
function uiConsole(…args: any[]): void {
const el = document.querySelector(“#console>p”);
if (el) {
el.innerHTML = JSON.stringify(args || {}, null, 2);
console.log(…args);
}
}
const loggedInView = (
<>
Get User Info
Get Accounts
Get Balance
Sign Message
Send Transaction
getConnectedAdapterName
Log Out
</>
);
const unloggedInView = (
Login
);
return (
Web3Auth
{" "}
& NextJS Quick Start
<div className="grid">{loggedIn ? loggedInView : unloggedInView}</div>
<div id="console" style={{ whiteSpace: "pre-line" }}>
<p style={{ whiteSpace: "pre-line" }}></p>
</div>
<footer className="footer">
<a
href="https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/quick-starts/nextjs-modal-quick-start"
target="_blank"
rel="noopener noreferrer"
>
Source code
</a>
<a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FWeb3Auth%2Fweb3auth-pnp-examples%2Ftree%2Fmain%2Fweb-modal-sdk%2Fquick-starts%2Fnextjs-modal-quick-start&project-name=w3a-nextjs-modal&repository-name=w3a-nextjs-modal">
<img src="https://vercel.com/button" alt="Deploy with Vercel" />
</a>
</footer>
</div>
);
}
export default App;