Migration Guide

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

Prerequisites

• The latest version of the Station Chrome extension (Station Wallet 7.4.2 and above)
• NPM
• NVM
• Node.js version 16

💡Node version 16

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

nvm install 16 nvm use 16

1. Set up dependencies

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

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

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

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.

import ReactDOM from 'react-dom';

import App from './App';

import TerraStationMobileWallet from '@terra-money/terra-station-mobile';

import { getInitialConfig, WalletProvider } from '@terra-money/wallet-kit';

getInitialConfig().then((defaultNetworks) => {

ReactDOM.render(

<WalletProvider

extraWallets={[new TerraStationMobileWallet()]}

defaultNetworks={defaultNetworks}

>

<App />

</WalletProvider>,

document.getElementById('root'),

);

});

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.

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

2. 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.

const { connect, availableWallets } = useWallet();

const list = [

...availableWallets

.filter(({ isInstalled }) => isInstalled)

.map(({ id, name, icon }) => ({

src: icon,

children: name,

onClick: () => connect(id),

})),

...availableWallets

.filter(({ isInstalled, website }) => !isInstalled && website)

.map(({ name, icon, website }) => ({

src: icon,

children: t(`Install ${name}`),

href: website ?? '',

})),

];

📱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!