feat: migration guide copy and mobile support

docs/develop/wallet-kit/wallet-kit-tutorial.mdx → docs/develop/wallet-kit/getting-started.mdx

@@ -2,10 +2,6 @@ import Admonition from '@theme/Admonition';
 
 # Get Started with Wallet Kit
 
-<Admonition type="tip" icon="💡" title="Mobile Support">
-Wallet Kit does not support mobile. For mobile, use[ Wallet Provider](../wallet-provider/wallet-provider-tutorial.mdx). Mobile support will be coming soon. 
-</Admonition>
-
 [Wallet Kit](https://github.com/terra-money/wallet-kit) makes it easy to build Station (browser extension and mobile) functionality into your React application. It contains custom hooks that drastically simplify common tasks like connecting a wallet and triggering transactions.
 
 This guide will cover how to set up a React app, integrate Wallet Kit, check the balance of the connected account, and call a token swap. If you want to integrate Station into an existing React app, jump to the [Wrap your app in `WalletProvider` section](#2-wrap-your-app-in-walletprovider).
@@ -24,9 +20,7 @@ This guide will cover how to set up a React app, integrate Wallet Kit, check the
       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
-    ```
+    ```sh nvm install 16 nvm use 16 ```
   </details>
 </Admonition>
 
@@ -67,6 +61,45 @@ Next, you'll wrap your `App` with `<WalletProvider>` to give all your components
    });
    ```
 
+<Admonition type="info" title="Station Mobile support">
+<details>
+<summary> How to add support Station Mobile?</summary>
+<p>
+
+To support Station Mobile:
+
+1. Install the `@terra-money/terra-station-mobile` package:
+
+   ```sh
+   npm install @terra-money/terra-station-mobile
+   ```
+
+2. Add `TerraStationMobileWallet` to the `extraWallets` array prop in the `WalletProvider` component.
+
+   ```js
+   import ReactDOM from 'react-dom';
+   import './index.css';
+   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'),
+     );
+   });
+   ```
+
+</p>
+</details>
+</Admonition>
+
 2. Start the application to make sure it works:
 
    ```sh

docs/develop/wallet-kit/migration.mdx

@@ -0,0 +1,91 @@
+import Admonition from '@theme/Admonition';
+
+# Migration Guide
+
+This guide will cover how to set up a React app, integrate Wallet Kit, check the balance of the connected account, and call a token swap. If you want to integrate Station into an existing React app, jump to the [Wrap your app in `WalletProvider` section](#2-wrap-your-app-in-walletprovider).
+
+## 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. Dependency Setup
+
+1. To get started, install and uninstall the pre-exsisting Station wallet packages.
+
+   ```sh
+      npm uninstall @terra-money/use-wallet @terra-money/wallet-controller @terra-money/wallet-provider
+   ```
+
+2. Then, install the `@terra-money/wallet-kit` package:
+
+   ```sh
+      npm install @terra-money/wallet-kit @terra-money/terra-station-mobile
+   ```
+
+## 2. Change `WalletProvider` setup
+
+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 below code sample.
+
+   ```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. Code tweaks to comply with Wallet Kit API
+
+1. Fix package imports. Import key 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. For example, `WalletStatus` enum now has properties `CONNECTED` instead of `WALLET_CONNECTED`. And `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 ?? '',
+    })),
+];
+```

sidebars.js

@@ -132,7 +132,8 @@ const sidebars = {
               label: 'Wallet Kit',
               collapsed: true,
               items: [
-                'develop/wallet-kit/wallet-kit-tutorial',
+                'develop/wallet-kit/getting-started',
+                'develop/wallet-kit/migration',
               ],
             },
             {