Usage
As a first step you will need to initialise the core package and at least one connector. The core package is initialized with a list of connectors and a list of chains. The connectors are used to connect to a wallet, and the chains are used to determine which chains are supported by the wallet.
import Onboard from '@sovryn/onboard-core';
import injectedModule from '@sovryn/onboard-injected';
import { OnboardProvider } from '@sovryn/onboard-react';
import walletConnectModule from '@sovryn/onboard-walletconnect';
const injected = injectedModule();
const walletConnect = walletConnectModule();
const chains = [
{
id: '0x1e',
rpcUrl: 'https://public-node.rsk.co',
label: 'RSK',
token: 'RBTC',
blockExplorerUrl: 'https://explorer.rsk.co',
},
];
export const onboard = Onboard({
wallets: [injected, walletConnect],
chains,
});
If you are using the React UI component, you will to add the OnboardProvider
to your app. The OnboardProvider
will provide the core package to the React UI component.
import { OnboardProvider } from '@sovryn/onboard-react';
const App = () => {
return (
<>
<MyApp />
<OnboardProvider />
</>
)
}
Once the core package is initialised, you can use it to connect to a wallet. The connectWallet
function will open a modal that allows the user to select a wallet and connect to it. The disconnectWallet
function will disconnect the user from the wallet.
import { onboard } from './onboard';
const connectWallet = async () => {
await onboard.connectWallet();
};
const disconnectWallet = async () => {
await onboard.disconnectWallet();
};
If you are not using the React UI component, connectWallet
will not show a model. For this reason you should pass a connectors name to connectWallet
- this will allow you to connect to a specific wallet without showing a modal. Because of this, some wallets, like Hardware wallets, will not work without the React UI component.
import { onboard } from './onboard';
const connectWallet = async () => {
await onboard.connectWallet('injected');
};
connectWallet
returns a Promise with array of Wallet
objects. Each Wallet
object contains information about the wallet that was connected to. The Wallet
object also contains a provider
property which is a Web3 provider that can be used to interact with the wallet.
import { onboard } from './onboard';
const connectWallet = async () => {
const wallets = await onboard.connectWallet();
const wallet = wallets[0];
const provider = wallet.provider;
};
You can also retrieve onboard state by calling onboard.state.get()
. It allows you to get the current state of the wallet, including the wallet
object, the address
of the connected wallet, and the provider
that the wallet is connected to. Subscribing to state changes is also possible by calling onboard.state.select('wallets').subscribe
.
import { onboard } from './onboard';
const wallets = onboard.state.get().wallets;
console.log('initial wallets', wallets);
const wallets = onboard.state.select('wallets').subscribe((wallets) => {
console.log('wallets changed', wallets);
});
Changing chain
To change the chain, you can call onboard.setChain
. If wallet does not support changing chains, it will do nothing.
setChain
will only allow you to change to a chain that was passed to the core package when it was initialized.
import { onboard } from './onboard';
const changeChain = async () => {
await onboard.setChain('0x1e');
};
If user is connected to multiple wallets, setChain
will change the chain for the first of them. If you want to change the chain for a specific wallet, you can pass the wallet name to setChain
. This is useful for cross-chain flows, like bridges.
import { onboard } from './onboard';
const changeChain = async () => {
await onboard.setChain('0x1e', undefined, 'ledger');
};
Last updated