Integrating with Web3-React
Integrating with Web3-React
#Integrating Magic Connect with Web3-React
👉 Web3-React-Magic Example
This guide walks through the process of integrating Magic Connect with your dApp using web3-react, version 8. This walkthrough primarily focuses on the initial setup, providing you with the basic components to customize the integration to suit your individual needs.
If you don’t have an existing app, you can use npx create-next-app@latest --typescript to generate a template Next.js project or you can use a similar template of your choosing.
#Step 1: Install web3-react and web3-react-magic
Begin by installing the @web3-react/core and web3-react-magic dependencies.
01npm i @web3-react/core@8.1.2-beta.0
02npm i web3-react-magic
#Step 2: Magic Connect Connector Setup
With the dependencies installed you can configure the Magic Connect connector. This integrates Magic Connect into web3-react so that you can manage multiple wallets, including Magic, using web3-react. Note that you can get a Magic Connect publishable API key (required in the code snippet below) by signing up for a free account at https://magic.link and creating a new Magic Connect app in the developer dashboard.
01// ./connectors/magicConnect.tsx
02import { initializeConnector } from "@web3-react/core"
03import { MagicConnect } from "web3-react-magic"
04
05export const [magicConnect, hooks] = initializeConnector<MagicConnect>(
06 (actions) =>
07 new MagicConnect({
08 actions,
09 options: {
10 apiKey: 'YOUR_PUBLISHABLE_API_KEY',
11 networkOptions: {
12 rpcUrl: 'RPC_URL',
13 chainId: 'CHAIN_ID',
14 },
15 },
16 })
17)
#Step 3: Web3ReactProvider Setup
Next, configure the Web3ReactProvider to specify the application’s supported wallets.
Start by creating an array defining the Web3React connectors and their hooks. In this example, we're only using the MagicConnect connector. Wrap your application with the Web3ReactProvider and pass the connectors array as a prop to the Web3ReactProvider.
01// ./pages/_app.tsx
02import type { AppProps } from "next/app"
03import { Web3ReactHooks, Web3ReactProvider } from "@web3-react/core"
04import { MagicConnect } from "web3-react-magic"
05import {
06 hooks as magicConnectHooks,
07 magicConnect,
08} from "../connectors/magicConnect"
09
10const connectors: [MagicConnect, Web3ReactHooks][] = [
11 [magicConnect, magicConnectHooks],
12]
13
14export default function App({ Component, pageProps }: AppProps) {
15 return (
16 <Web3ReactProvider connectors={connectors}>
17 <Component {...pageProps} />
18 </Web3ReactProvider>
19 )
20}
#Step 4: Support connecting and disconnecting from wallets
To create a component that connects and disconnects from a wallet, import the useWeb3React hook and extract the connector and isActive properties. Then, implement the functions to handle connecting and disconnecting from the connector.
01// ./pages/index.tsx
02import { useWeb3React } from "@web3-react/core"
03import { Connector } from "@web3-react/types"
04import { magicConnect } from "../connectors/magicConnect"
05
06export default function Home() {
07 const { connector, isActive } = useWeb3React()
08
09 const handleConnect = async (connector: Connector) => {
10 try {
11 await connector.activate()
12 } catch (error) {
13 console.error(error)
14 }
15 }
16
17 const handleDisconnect = async () => {
18 try {
19 if (connector?.deactivate) {
20 void connector.deactivate()
21 } else {
22 void connector.resetState()
23 }
24 } catch (error) {
25 console.error(error)
26 }
27 }
28
29 return (
30 <>
31 {isActive ? (
32 <button onClick={handleDisconnect}>Disconnect</button>
33 ) : (
34 <button onClick={() => handleConnect(magicConnect)}>Connect</button>
35 )}
36 </>
37 )
38}
#Step 5: Display Magic Wallet
If you want to allow the user to display their Magic wallet, you’ll need to conditionally add a button when the connected wallet is a Magic wallet. You can do this by checking the connector type. If the connector is an instance of MagicConnect and the walletType is “magic”, you can show the wallet using connector.magic?.wallet.showUI().
01// ./pages/index.tsx
02...
03import { MagicConnect } from "web3-react-magic"
04import { useState, useEffect } from "react"
05
06...
07const [showButton, setShowButton] = useState(false)
08
09...
10const handleOpenWallet = async () => {
11 if (connector instanceof MagicConnect) {
12 await connector.magic?.wallet.showUI()
13 }
14}
15
16const checkWalletType = async () => {
17 if (connector instanceof MagicConnect) {
18 const walletInfo = await connector.magic?.wallet.getInfo()
19 const isMagicWallet = walletInfo?.walletType === "magic"
20 setShowButton(isMagicWallet)
21 }
22}
23
24useEffect(() => {
25 checkWalletType()
26}, [handleConnect])
27
28return (
29 <>
30 {isActive ? (
31 <>
32 <button onClick={handleDisconnect}>Disconnect</button>
33 {showButton ? (
34 <button onClick={handleOpenWallet}>Wallet</button>
35 ) : null}
36 </>
37 ) : (
38 <button onClick={() => handleConnect(magicConnect)}>Connect</button>
39 )}
40 </>
41)