WAGMI
WAGMI
#Overview
WAGMI is a development library that streamlines Ethereum development. Popular among developers for its ease in managing multiple wallets, it becomes even more powerful when combined with Magic. This integration streamlines user interactions across various wallets while leveraging Magic's blazing-fast and secure passwordless login. This guide details the integration process using Magic's DedicatedWalletConnector. For an immediate hands-on experience, explore our demo on GitHub.
#Installation
Add wagmi and @magiclabs/wagmi-connector using your chosen package manager.
01npm install wagmi @magiclabs/wagmi-connector
#Initialization
To initialize, import the necessary dependencies from Magic and WAGMI in your root file (i.e. App.tsx).
Next, add the Magic DedicatedWalletConnector and its configuration as the connectors value of the config.
Finally, pass the configuration to the WagmiConfig component to make WAGMI hooks available across the whole application.
01import { configureChains, createConfig, WagmiConfig } from "wagmi";
02import { mainnet } from "wagmi/chains";
03import { publicProvider } from "wagmi/providers/public";
04import { DedicatedWalletConnector } from "@magiclabs/wagmi-connector";
05import Dashboard from "./components/Dashboard";
06
07const { chains, publicClient, webSocketPublicClient } = configureChains(
08 [mainnet],
09 [publicProvider()]
10);
11
12const config = createConfig({
13 autoConnect: true,
14 publicClient,
15 webSocketPublicClient,
16 connectors: [
17 new DedicatedWalletConnector({
18 chains,
19 options: {
20 apiKey: "PUBLISHABLE_API_KEY",
21 isDarkMode: true,
22 /* If using OAuth, make sure to enable OAuth options from magic dashboard */
23 oauthOptions: {
24 providers: [""],
25 },
26 magicSdkConfiguration: {
27 network: {
28 rpcUrl: RPC_URL,
29 chainId: CHAIN_ID,
30 },
31 },
32 },
33 }),
34 ],
35});
36
37function App() {
38 return (
39 <WagmiConfig config={config}>
40 <Dashboard />
41 </WagmiConfig>
42 );
43}
44
45export default App;
#Usage
With the Magic connector added, you can use WAGMI hooks for everything else per their documentation.
#Connect to the network
01import { useConnect } from 'wagmi'
02
03const SignIn = () => {
04 const { connect, connectors, isLoading, isIdle } = useConnect()
05
06 return (
07 <div className="sign-in-container">
08 <button
09 onClick={() => connect({ connector: connectors[0] })}
10 >
11 {isLoading ? "Loading..." : isIdle ? "Connect" : "Connecting..."}
12 </button>
13 </div>
14 )
15}
16
17export default SignIn
#Sign message
01import { useSignMessage } from 'wagmi'
02
03function Component() {
04 const { data, isError, isLoading, isSuccess, signMessage } = useSignMessage({
05 message: 'Signed from Magic',
06 })
07
08 return (
09 <div>
10 <button disabled={isLoading} onClick={() => signMessage()}>
11 Sign message
12 </button>
13 {isSuccess && <div>Signature: {data}</div>}
14 {isError && <div>Error signing message</div>}
15 </div>
16 )
17}
#Send transaction
01import { useSendTransaction } from 'wagmi'
02import { parseEther } from "ethers/lib/utils"
03
04function Component() {
05 const { data, isIdle, isError, isLoading, isSuccess, sendTransaction } =
06 useSendTransaction({
07 to: 'example.eth',
08 value: parseEther("1"),
09 })
10
11 return (
12 <div>
13 {isIdle && (
14 <button disabled={isLoading} onClick={() => sendTransaction()}>
15 Send Transaction
16 </button>
17 )}
18 {isLoading && <div>Check Wallet</div>}
19 {isSuccess && <div>Transaction: {JSON.stringify(data)}</div>}
20 {isError && <div>Error sending transaction</div>}
21 </div>
22 )
23}
#Check balance
01import { useBalance } from 'wagmi'
02
03function Component() {
04 const { data, isError, isLoading } = useBalance({
05 address: 'example.eth',
06 })
07
08 if (isLoading) return <div>Fetching balance…</div>
09 if (isError) return <div>Error fetching balance</div>
10 return (
11 <div>
12 Balance: {data?.formatted} {data?.symbol}
13 </div>
14 )
15}