@mirshko/use-wallet

An easy-to-integrate React hook for connecting and interacting with a Web3 wallet.

Uses Web3Modal and Zustand.

Forked from gimmixorg/use-wallet, this version changes to an ESM only version and handles lazy importing Web3Modal and the Ethers.js Provider via Dynamic Imports to lower the initial bundle size of apps using this package.

Installation

yarn add @mirshko/use-wallet

npm add @mirshko/use-wallet

Example Connect / Disconnect button

const ConnectWalletButton = () => {
  const { account, connect, disconnect } = useWallet();

  return (
    <>
      {!account ? (
        <button onClick={() => connect()}>Connect Wallet</button>
      ) : (
        <button onClick={() => disconnect()}>Disconnect Wallet</button>
      )}
    </>
  );
};

The connect function passes along an optional config to a Web3Modal instance for additional customization.

You can use the account information from useWallet anywhere inside your React app, without any extra set up.

const UserAddress = () => {
  const { account } = useWallet();

  if (!account) return null;

  return <>{account}</>;
};

To run a transaction or sign a message, use the provider object returned by the hook for connected wallets. This is a standard Ethers.js Provider.

const SignMessageButton = () => {
  const { account, provider } = useWallet();

  const signMessage = async () => {
    if (!provider) {
      return;
    }

    const signer = provider.getSigner();

    const signature = await signer.signMessage('Hello!');

    console.log(signature);
  };

  if (!account) {
    return null;
  }

  return <button onClick={signMessage}>Sign Message</button>;
};