use-react-wallet

React hook for connecting and interacting with Web3 Wallet Providers via OpenMEV RPC or any other RPC

• Overview
  • Connect or Disconnect button
    • Connecting
    • Transaction Signing
• Experimental
  • Usage
• License

Overview

use-react-wallet combines the following packages to provide an oppionanted react hook:

• Web3Modal
• Zustand

Connectivity

Connect / Disconnect Button

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

Connecting

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}</>;
};

Transaction Signing

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.

Note Ethersjs has depreciated personal_sign methods

const SignMessageButton = () => {
  const { account, provider } = useWallet();
    if (!account) return null;
        const signMessage = async () => {
            const signature = await provider.getSigner().signMessage("Hello!");
            console.log(signature);
  }
  return <button onClick={signMessage}>Sign Message</>;
}

Unstable Features

These features are a developer preview, and may incur breaking changes

Experimental

useSafeTimeout is a utility Hook that allows you to safely call setTimeout and clearTimeout within a component, ensuring that all timeouts are cleared when the component unmounts.

Usage

<State>
  {([]) => {
    const { safeSetTimeout, safeClearTimeout } = useSafeTimeout();
    let timeoutId = null;

    const handleOnClick = () => {
      timeoutId = safeSetTimeout(() => window.alert('hello!'), 5000);
    };

    const cancelTimeout = () => {
      safeClearTimeout(timeoutId);
    };

    return (
      <>
        <Button onClick={handleOnClick}>Click me</Button>
        <Button onClick={cancelTimeout}>Cancel timeout</Button>
      </>
    );
  }}
</State>

License

Apache-2.0