Use-react-wallet - Easier onboarding for new protocols and applications

use-react-wallet @openmev-sdk

openmev-sdk/packages/use-react-wallet at master · manifoldfinance/openmev-sdk · GitHub

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

Overview

Utilizes:

Connect or 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. Use the @openmev/ethers-provider if you want OpenMEV support

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

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>