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

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

_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

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

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.

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