Migration Guide

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

Prerequisites

• Station Chrome extension
• 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.

sh nvm install 16 nvm use 16

1. Dependency Setup

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

   
   

   _1

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

   
   

2. Then, install the @terra-money/wallet-kit package:

   
   

   _1

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

   
   

2. WalletProvider setup changes

1. Navigate to your index.js in a code editor and change the following in your WalletProvider component. Instead of calling getChainOptions use getInitalConfig and pass in the defaultNetworks as a prop. Its reccomended 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. Code changes to comply with Wallet Kit API

1. Fix package imports. Import key 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. For example, WalletStatus enum now has properties CONNECTED instead of WALLET_CONNECTED. And availableConnections and availableInstallations have been consolidated into availableWallets.

_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

];