Ant Design Web3 officially provides adapters for multiple frameworks such as wagmi and ethers to adapt to Ethereum. We recommend using @ant-design/web3-wagmi. It is an Ant Design Web3 Ethereum adapter based on wagmi 2.x. It provides the ability to connect to Ethereum and other EVM compatible chains for the components of @ant-design/web3.
If you are using wagmi 1.x, you can check @ant-design/web3-wagmi@1.2.0 documentation.
Through it, you don't need to handle the connection status of the component, chain data request and other logic by yourself. It will provide relevant global status and interfaces for the components through Web3ConfigProvider.
If you want to use ethers in your project, we provide the @ant-design/web3-ethers adapter, which is compatible with the latest v6 and v5 versions. You can view the documentation to use it.
Currently, we officially provide the adapter of Ethereum, and you can also develop your own adapter to support other chains. You can read the adapter documentation to learn more about the adapter.
We support rich configurations of wallets, protocols, and interaction methods. For most DApps, we recommend using the following configuration:
The recommended configuration mainly includes:
quickConnect to provide quick connection entry to simplify user operations.simple mode to simplify the interface.queryClient for easy subsequent customization of related configurations.In general, we do not recommend customizing the wagmi configuration. When you customize the wagmi configuration and pass it to WagmiWeb3ConfigProvider, it will override the default configuration we automatically generate.
Automatically add wallets based on EIP6963. Under the EIP6963 protocol, it can avoid conflicts caused by users installing multiple wallets, and can automatically identify the wallets that users have installed.
In order to reduce the size of the package, you need to configure wallets to import wallets. You can export related resources from @ant-design/web3-wagmi. If you don't have the resources you need, you can submit GitHub issue to tell us. You can also configure it yourself or submit a PR to support it.
In addition, we recommend setting eip6963 to true to avoid conflicts when users install multiple wallets. When the eip6963 is configured, you no longer need to configure the wagmi injected Connector. wagmi's multiInjectedProviderDiscovery configuration defaults to true and will automatically add detected wallets.
We have built-in Mainnet, and the remaining chains need to configure chains to import related resources to support. The import method is similar to the wallet.
SIWE means Sign-In with Ethereum. Your website can verify user login through signatures. Below is an example where the backend interface is mocked. You need to implement it in your project.
You need to connect to an address containing ENS and balance to see the example effect.
When the showQrModal configuration is not false, the built-in web3modal pop-up window of WalletConnect will be used.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| config | wagmi config | WagmiConfig | Support for automatically generating configurations such as chains and wallets is available after 2.8.0 | - |
| queryClient | React Query queryClient | new QueryClient() | - | - |
| wallets | Wallets | WalletFactory[] | - | - |
| chains | Chains | ChainAssetWithWagmiChain[] | - | - |
| ens | Whether to display ENS | boolean | - | - |
| balance | Whether to display balance | boolean | - | - |
| locale | Multilingual settings | Locale | - | - |
| eip6963 | Whether to use EIP6963 protocol wallet and related configurations | boolean | EIP6963Config | false | 2.2.0 |
| initialState | Initial state to hydrate into the Wagmi Config. Useful for SSR. | State | undefined | - | - |
| reconnectOnMount | Whether or not to reconnect previously connected connectors on mount. | boolean | undefined | true | - |
| walletConnect | WalletConnect configuration | false | WalletConnectOptions | - | 2.8.0 |
| transports | Transport configuration | Transport | - | 2.8.0 |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| name | Wallet name | Connector | - | - |
| create | Method for creating a wallet | (connector: Connector) => Promise<Wallet> | - | - |
The above
Connectorrefers to theConnectorin wagmi, andWalletis Wallet.
A Class for creating your own wallet, it meets the interface requirements of WalletFactory. For specific use, please refer to the example in Customize Wallet Information.
Based on Chain[] adds the wagmiChain field to support chain configuration. Import it in a way similar to import { Mainnet } from '@ant-design/web3-wagmi';.
Based on the WalletConnectParameters configuration, it adds the useWalletConnectOfficialModal field to control whether to use the official WalletConnect pop-up window.
export interface WalletConnectOptionsextends Pick<WalletConnectParameters,| 'disableProviderPing'| 'isNewChainsStale'| 'projectId'| 'metadata'| 'relayUrl'| 'storageOptions'| 'qrModalOptions'> {useWalletConnectOfficialModal?: boolean;}