-
Notifications
You must be signed in to change notification settings - Fork 199
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #577 from terra-money/st-722-wallet-kit
- Loading branch information
Showing
8 changed files
with
158 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
import Admonition from '@theme/Admonition'; | ||
|
||
# Migration Guide | ||
|
||
This guide will cover how to migrate your existing codebase to use Wallet Kit instead of the now deprecated Wallet Provider. | ||
|
||
## Prerequisites | ||
|
||
- [Station Chrome extension](../../learn/station/download/station-extension.mdx) | ||
- [NPM](https://www.npmjs.com/) | ||
- [NVM](https://github.com/nvm-sh/nvm) | ||
- Node.js version 16 | ||
|
||
<Admonition type="tip" icon="💡" title="Node version 16"> | ||
<details> | ||
<summary> Most users will need to specify Node version 16 before continuing. You can | ||
manage node versions [with NVM](https://github.com/nvm-sh/nvm). </summary> | ||
|
||
```sh | ||
nvm install 16 nvm use 16 | ||
``` | ||
|
||
</details> | ||
</Admonition> | ||
|
||
## 1. Set up dependencies | ||
|
||
1. To get started, uninstall the deprecated Station wallet packages. | ||
|
||
```sh | ||
npm uninstall @terra-money/use-wallet @terra-money/wallet-controller @terra-money/wallet-provider | ||
``` | ||
|
||
2. Install the `@terra-money/wallet-kit` package. | ||
|
||
```sh | ||
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. | ||
|
||
```js | ||
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. | ||
```js | ||
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`. | ||
```js | ||
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 ?? '', | ||
})), | ||
]; | ||
``` | ||
Congratulations, your migration to Wallet Kit is now complete! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters