WalletConnect SDK

@groupos/walletconnect is a package for adding and utilizing WalletConnect in decentralized applications (dApps). The package exposes a simple useWalletConnect React hook for easy pairing, state management, and request resolution.

The package wraps @walletconnect/web3wallet, leaving the core functionality of establishing a connection and passing messages unchanged.

Quickstart

Install

npm i @groupos/walletconnect @walletconnect/web3wallet

Add hook

After making a new WalletConnect project on their dashboard, you can paste your own projectId value to the hook, along with an intended address and chainId to connect with.

import { useWalletConnect } from "@groupos/walletconnect";

function Page() {
  const { pair, reset, cancelRequest, isPaired, requests } = useWalletConnect({
    projectId: "WALLETCONNECT_PROJECT_ID",
    accountAddress: "0xc517c83f417b73dA98647dad0FCB80af9f3b9531",
    chainId: 1,
  });

  return (
    <main>
      {!isPaired ? (
        <input onChange={(e) => pair(e.target.value)} />
      ) : (
        <div>
          {requests.length === 0 ? (
            <div>
              <p>Requests will appear here.</p>
              <button onClick={reset}>Reset</button>
            </div>
          ) : (
            <div>
              {requests.map((request, i) => (
                <div>
                  <p>{request.type}</p>
                  <div>{JSON.stringify(request.data)}</div>
                  <button onClick={() => cancelRequest({ request })}>
                    Cancel
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </main>
  );
}