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