Powered by

A design system from Family

Libraries

ConnectKit uses two key open source libraries, wagmi and ethers, to achieve its intended use cases. Both libaries may be helpful if your app requires any additional functionality outside of ConnectKit.


wagmi

ConnectKit uses wagmi internally and therefore it's possible to use hooks from wagmi to fetch data such as info about the connected account. Below are a couple of examples of some wagmi hooks in use.

Connected Wallet Info

Start by importing useAccount from wagmi into your app. Then simply use the hook as following:

,
Example.jsx
1import { useAccount } from "wagmi";
2
3const App = () => {
4 const { address } = useAccount();
5 return <div>{address ?? "Loading address"}</div>;
6};

That's it—you should now be able to access things like the address and ENS name for the active account. You can read more about useAccount on wagmi.

Disconnecting Account

Let's say you wanted to build a disconnect button that interacts with ConnectKit. Start by importing useDisconnect from wagmi into your app. Then simply use the hook as following:

,
Example.jsx
1import { useDisconnect } from "wagmi";
2
3const App = () => {
4 const { disconnect } = useDisconnect();
5 return <button onClick={disconnect}>Disconnect</button>;
6};

Additional Hooks

In the examples above, we use some of wagmi's hooks for some common use cases. Make sure to check out the wagmi documentation for a full list of all available hooks and their use cases.

ethers

ethers is a general purpose library for interacting with the Ethereum blockchain. It provides methods and functionality around parsing data and interacting with smart contracts.