Skip to main content

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​

💡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 Galaxy Station wallet packages.

_1
npm uninstall @hexxagon/use-wallet @hexxagon/wallet-controller @hexxagon/wallet-provider

  1. Install the @hexxagon/wallet-kit package.

_1
npm install @hexxagon/wallet-kit @hexxagon/galaxy-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 Galaxy Station Mobile, as shown in the code sample below.


_16
import ReactDOM from 'react-dom';
_16
import App from './App';
_16
import GalaxyStationMobileWallet from '@hexxagon/galaxy-station-mobile';
_16
import { getInitialConfig, WalletProvider } from '@hexxagon/wallet-kit';
_16
_16
getInitialConfig().then((defaultNetworks) => {
_16
ReactDOM.render(
_16
<WalletProvider
_16
extraWallets={[new GalaxyStationMobileWallet()]}
_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 Galaxy Station Wallet utility from @hexxagon/wallet-kit instead of prior packages.

_1
import { useWallet, useConnectedWallet } from '@hexxagon/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.
📖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
];

📱Galaxy Station mobile app

To add support for Galaxy Station mobile, follow the mobile section in the Get Started guide.

Congratulations, your migration to Wallet Kit is now complete!