0.3.0 • Published 2 years ago
use-signer v0.3.0
useSigner
Use signer is a React Hook designed to provide convenient access to a web3modal.
Features
- Select a wallet from the available ones
- Disconnect from a wallet
- Get access to an ethers.js Signer and Provider
- Get the wallet
address
, the networkchainId
and the current walletstatus
Get started
Install the library on your project:
npm install use-signer
Usage
Add the provider at the root of your React app
import { useSigner, UseSignerProvider } from "use-signer";
import { IProviderOptions } from "web3modal";
const App = () => {
return (
<UseSignerProvider>
<AppBody />
</UseSignerProvider>
);
};
Optionally, parameterize the wallets shown by web3modal
:
import { useSigner, UseSignerProvider } from "use-signer";
import { IProviderOptions } from "web3modal";
import WalletConnectProvider from "@walletconnect/web3-provider";
const App = () => {
const DEFAULT_CHAIN_ID = 1;
// Customize the wallets you support
// See: https://github.com/Web3Modal/web3modal#custom-provider
const providerOptions: IProviderOptions = {
metamask: {
// custom settings
}
walletconnect: {
package: WalletConnectProvider,
options: {
infuraId: "1234...",
},
},
};
return (
<UseSignerProvider providerOptions={providerOptions} defaultChainId={1}>
<AppBody />
</UseSignerProvider>
);
};
Use the hook on any child component:
const AppBody = () => {
const { provider, signer, status, address, chainId, methods } = useSigner();
const onClickSelect = () => {
const cacheProvider = true;
const networkId = "mainnet";
methods.selectWallet(cacheProvider, networkId); // cacheProvider and networkId are optional
}
const onClickDisconnect = () => methods.disconnect();
return (
<div style={{ fontFamily: "sans-serif" }}>
<h2>Use Signer example</h2>
<p>{provider ? "Provider available" : "No provider"}</p>
<p>{signer ? "Signer available" : "No signer"}</p>
<p>Status: {status}</p>
<p>Address: {address}</p>
<p>Chain ID: {chainId}</p>
<div>
{status === "disconnected"
? <button onClick={onClickSelect}>Connect wallet</button>
: status === "connected"
? <button onClick={onClickDisconnect}>Disconnect</button>
: <span>Connecting...</span>}
</div>
</div>
);
};
Methods
When calling useSigner()
you can invoke the following methods:
methods.selectWallet()
- Opens the Web3 pop up. Throws an Error if something fails
- Accepts an optional
cacheProvider
andnetworkId
parameters
methods.disconnect()
- Closes the connection to the currently active connection
methods.refreshChainId()
- Updates the current chainId
Fields
When calling useSigner()
you receive the following variables:
provider
- An ethers.js Web3Provider (if available)
signer
- An ethers.js JsonRpcSigner (if available)
status
- Whether web3modal is connected to a wallet or not
- Can be
"disconnected", "connecting" or "connected"
address
- The address of the currently active wallet (if available)
chainId
- The chainId of the currently selected network
Available commands
yarn build
yarn lint
yarn lint -- --fix
yarn size
yarn start
yarn test
Example
Start the example web server:
yarn example
See in the example
folder: pages/_app.tsx
and pages/index.tsx
Navigate to localhost:8080