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

To get started, uninstall the deprecated Station wallet packages.

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

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

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

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!

Migration Guide

Prerequisites​

1. Set up dependencies​

2. Change the WalletProvider setup​

3. Comply with the Wallet Kit API​

Prerequisites

1. Set up dependencies

2. Change the `WalletProvider` setup

3. Comply with the Wallet Kit API