Skip to main content

Migrate from Wallet Provider

This guide will cover how to migrate your existing codebase to use Wallet Kit instead of the now deprecated Wallet Provider.

Prerequisites​

💡Node version 16
Most users will need to specify Node version 16 before continuing. You can manage node versions with NVM.

_1
nvm install 16 nvm use 16

1. Set up dependencies​

  1. To get started, uninstall the deprecated Station wallet packages.

_1
npm uninstall @terra-money/use-wallet @terra-money/wallet-controller @terra-money/wallet-provider

  1. Install the @terra-money/wallet-kit package.

_1
npm install @terra-money/wallet-kit @terra-money/terra-station-mobile

2. Change the WalletProvider setup​

Navigate to index.js in a code editor and change the following in the WalletProvider component.

Instead of calling getChainOptions, use getInitalConfig and pass in the defaultNetworks as a prop. It is recommended to also add Station Mobile, as shown in the code sample below.


_16
import ReactDOM from 'react-dom';
_16
import App from './App';
_16
import TerraStationMobileWallet from '@terra-money/terra-station-mobile';
_16
import { getInitialConfig, WalletProvider } from '@terra-money/wallet-kit';
_16
_16
getInitialConfig().then((defaultNetworks) => {
_16
ReactDOM.render(
_16
<WalletProvider
_16
extraWallets={[new TerraStationMobileWallet()]}
_16
defaultNetworks={defaultNetworks}
_16
>
_16
<App />
_16
</WalletProvider>,
_16
document.getElementById('root'),
_16
);
_16
});

3. Comply with the Wallet Kit API​

  1. Fix the package imports. Import the Station Wallet utility from @terra-money/wallet-kit instead of prior packages.

_1
import { useWallet, useConnectedWallet } from '@terra-money/wallet-kit';

  1. Fix minor code changes. The WalletStatus enum now has the CONNECTED property instead of WALLET_CONNECTED. availableConnections and availableInstallations have been consolidated into availableWallets.
📖API

You can refer to the WalletKit README for more information on the WalletKit API.


_18
const { connect, availableWallets } = useWallet();
_18
_18
const list = [
_18
...availableWallets
_18
.filter(({ isInstalled }) => isInstalled)
_18
.map(({ id, name, icon }) => ({
_18
src: icon,
_18
children: name,
_18
onClick: () => connect(id),
_18
})),
_18
...availableWallets
_18
.filter(({ isInstalled, website }) => !isInstalled && website)
_18
.map(({ name, icon, website }) => ({
_18
src: icon,
_18
children: t(`Install ${name}`),
_18
href: website ?? '',
_18
})),
_18
];

📱Station mobile app

To add support for Station mobile, follow the mobile section in the Get Started guide.

Congratulations, your migration to Wallet Kit is now complete!