React Usage
Head over to AlphaWallet Cloud to sign in or sign up. Create (or use an existing) project and copy its associated Project ID. We will need this in a later step.
- npm
- Yarn
npm install @web3modal/ethereum @web3modal/react wagmi ethers@^5
INFO
Ensure to use latest versions for tools like next, react-scripts, babel, webpack etc. to support es2020 features.
import {
EthereumClient,
modalConnectors,
AlphaWalletProvider,
} from "@web3modal/ethereum";
import { Web3Modal } from "@web3modal/react";
import { configureChains, createClient, WagmiConfig } from "wagmi";
import { arbitrum, mainnet, polygon } from "wagmi/chains";
Configure wagmi and Web3Modal clients. Refer to wagmi docs to see how to set up custom chains, providers and work with their client.
INFO
Minimum version of wagmi 0.11.3 is required to use
version: "2"const chains = [arbitrum, mainnet, polygon];
// Wagmi client
const { provider } = configureChains(chains, [
AlphaWalletProvider({ projectId: "<YOUR_PROJECT_ID>" }),
]);
const wagmiClient = createClient({
autoConnect: true,
connectors: modalConnectors({
projectId: "<YOUR_PROJECT_ID>",
version: "1", // or "2"
appName: "web3Modal",
chains,
}),
provider,
});
// Web3Modal Ethereum Client
const ethereumClient = new EthereumClient(wagmiClient, chains);
You don't have to wrap
Web3Modal inside WagmiConfig. In fact, we recommend placing it somewhere outside of your main app, thus removing extra re-rendering work. See Configuration docs for full Web3Modal prop list.function App() {
return (
<>
<WagmiConfig client={wagmiClient}>
<HomePage />
</WagmiConfig>
<Web3Modal
projectId="<YOUR_PROJECT_ID>"
ethereumClient={ethereumClient}
/>
</>
);
}
import { Web3Button } from "@web3modal/react";
export const YourApp = () => {
return <Web3Button />;
};
Last modified 8mo ago