Skip to content

Latest commit

 

History

History
107 lines (78 loc) · 3.29 KB

migration.mdx

File metadata and controls

107 lines (78 loc) · 3.29 KB
Raw

import Admonition from '@theme/Admonition';

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

Most users will need to specify Node version 16 before continuing. You can manage node versions [with NVM](https://github.com/nvm-sh/nvm). 
```sh
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
  1. 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';
  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.
You can refer to the [WalletKit README](https://github.com/terra-money/wallet-kit#key-differences-with-wallet-provider) 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 ?? '',
    })),
];
To add support for Station mobile, follow the mobile section in the [Get Started guide](./getting-started.mdx#3-add-support-for-station-mobile).

Congratulations, your migration to Wallet Kit is now complete!