From 30bdd1753bd7348bc789f93279d167d97a105b46 Mon Sep 17 00:00:00 2001 From: plubber Date: Thu, 10 Aug 2023 15:31:50 -0400 Subject: [PATCH 1/6] feat: migration guide copy and mobile support --- ...t-kit-tutorial.mdx => getting-started.mdx} | 47 ++++++++-- docs/develop/wallet-kit/migration.mdx | 91 +++++++++++++++++++ sidebars.js | 3 +- 3 files changed, 133 insertions(+), 8 deletions(-) rename docs/develop/wallet-kit/{wallet-kit-tutorial.mdx => getting-started.mdx} (92%) create mode 100644 docs/develop/wallet-kit/migration.mdx diff --git a/docs/develop/wallet-kit/wallet-kit-tutorial.mdx b/docs/develop/wallet-kit/getting-started.mdx similarity index 92% rename from docs/develop/wallet-kit/wallet-kit-tutorial.mdx rename to docs/develop/wallet-kit/getting-started.mdx index 91577abc9..f30399567 100644 --- a/docs/develop/wallet-kit/wallet-kit-tutorial.mdx +++ b/docs/develop/wallet-kit/getting-started.mdx @@ -2,10 +2,6 @@ import Admonition from '@theme/Admonition'; # Get Started with Wallet Kit - -Wallet Kit does not support mobile. For mobile, use[ Wallet Provider](../wallet-provider/wallet-provider-tutorial.mdx). Mobile support will be coming soon. - - [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).{' '} - ```sh - nvm install 16 nvm use 16 - ``` + ```sh nvm install 16 nvm use 16 ``` @@ -67,6 +61,45 @@ Next, you'll wrap your `App` with `` to give all your components }); ``` + +
+ How to add support Station Mobile? +

+ +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( + + + , + document.getElementById('root'), + ); + }); + ``` + +

+
+ + 2. Start the application to make sure it works: ```sh diff --git a/docs/develop/wallet-kit/migration.mdx b/docs/develop/wallet-kit/migration.mdx new file mode 100644 index 000000000..0cd20e37d --- /dev/null +++ b/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 + + +
+ + {' '} + 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. 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( + + + , + 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 ?? '', + })), +]; +``` diff --git a/sidebars.js b/sidebars.js index 3fbb845b9..1c2b41e5f 100644 --- a/sidebars.js +++ b/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', ], }, { From 7687500ad14bf93457f242b79d3bd2799bb7d77a Mon Sep 17 00:00:00 2001 From: plubber Date: Thu, 10 Aug 2023 15:34:34 -0400 Subject: [PATCH 2/6] fix: copy fixes --- docs/develop/wallet-kit/migration.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/develop/wallet-kit/migration.mdx b/docs/develop/wallet-kit/migration.mdx index 0cd20e37d..06b3c92a2 100644 --- a/docs/develop/wallet-kit/migration.mdx +++ b/docs/develop/wallet-kit/migration.mdx @@ -2,7 +2,7 @@ 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). +This guide will cover how to set migrate your existing codebase to use Wallet Kit instead of the now deprecated Wallet Provider. ## Prerequisites @@ -24,7 +24,7 @@ This guide will cover how to set up a React app, integrate Wallet Kit, check the ## 1. Dependency Setup -1. To get started, install and uninstall the pre-exsisting Station wallet packages. +1. To get started, and uninstall deprecated Station wallet packages. ```sh npm uninstall @terra-money/use-wallet @terra-money/wallet-controller @terra-money/wallet-provider @@ -36,9 +36,9 @@ This guide will cover how to set up a React app, integrate Wallet Kit, check the npm install @terra-money/wallet-kit @terra-money/terra-station-mobile ``` -## 2. Change `WalletProvider` setup +## 2. `WalletProvider` setup changes -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. +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 code sample below. ```js import ReactDOM from 'react-dom'; @@ -59,7 +59,7 @@ This guide will cover how to set up a React app, integrate Wallet Kit, check the }); ``` -## 3. Code tweaks to comply with Wallet Kit API +## 3. Code changes to comply with Wallet Kit API 1. Fix package imports. Import key Station wallet utility from @terra-money/wallet-kit instead of prior packages. From e072e1029c2fefff0aa7d638837e2f9fda509d40 Mon Sep 17 00:00:00 2001 From: plubber Date: Thu, 10 Aug 2023 16:05:26 -0400 Subject: [PATCH 3/6] fix: linking issues --- docs/develop/get-started.mdx | 2 +- docs/develop/wallet-kit/getting-started.mdx | 2 +- docs/develop/wallet-provider/sign-bytes.mdx | 2 +- docs/develop/wallet-provider/station-extension.mdx | 2 +- docs/develop/wallet-provider/wallet-provider-tutorial.mdx | 2 +- docs/develop/which-tools.mdx | 4 ++-- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/develop/get-started.mdx b/docs/develop/get-started.mdx index b9919738d..576436b06 100644 --- a/docs/develop/get-started.mdx +++ b/docs/develop/get-started.mdx @@ -49,7 +49,7 @@ Use feather.js to create bots, power NFT mints, and for all-purpose back-end ser ### Wallet Kit -If you have a back end for your app and want a front end to connect to Station, use Wallet Kit. Follow the [Wallet Kit tutorial](wallet-kit/wallet-kit-tutorial.mdx) to get started. +If you have a back end for your app and want a front end to connect to Station, use Wallet Kit. Follow the [Wallet Kit tutorial](wallet-kit/getting-started.mdx) to get started. ### Other Tools diff --git a/docs/develop/wallet-kit/getting-started.mdx b/docs/develop/wallet-kit/getting-started.mdx index f30399567..cebc67493 100644 --- a/docs/develop/wallet-kit/getting-started.mdx +++ b/docs/develop/wallet-kit/getting-started.mdx @@ -271,7 +271,7 @@ Be aware that you will not see any tokens if your wallet is empty. ## 5. Sending a transaction -You can also create and send transactions to the Terra network while using Wallet Kit. You can use [Feather.js](../feather-js/README.mdx) to generate a sample transaction: +You can also create and send transactions to the Terra network while using Wallet Kit. You can use [Feather.js](../feather-js/getting-started) to generate a sample transaction: ```sh npm install @terra-money/feather.js diff --git a/docs/develop/wallet-provider/sign-bytes.mdx b/docs/develop/wallet-provider/sign-bytes.mdx index 8f2dd61aa..9b2ae129a 100644 --- a/docs/develop/wallet-provider/sign-bytes.mdx +++ b/docs/develop/wallet-provider/sign-bytes.mdx @@ -4,7 +4,7 @@ import Admonition from '@theme/Admonition'; -Wallet-Provider is deprecated. Use [Wallet Kit](../wallet-kit/wallet-kit-tutorial.mdx) instead. +Wallet-Provider is deprecated. Use [Wallet Kit](../wallet-kit/getting-started.mdx) instead. diff --git a/docs/develop/wallet-provider/station-extension.mdx b/docs/develop/wallet-provider/station-extension.mdx index 0eaab4889..95a8fbe81 100644 --- a/docs/develop/wallet-provider/station-extension.mdx +++ b/docs/develop/wallet-provider/station-extension.mdx @@ -4,7 +4,7 @@ import Admonition from '@theme/Admonition'; -Wallet-Provider is deprecated. Use [Wallet Kit](../wallet-kit/wallet-kit-tutorial.mdx) instead. +Wallet-Provider is deprecated. Use [Wallet Kit](../wallet-kit/getting-started.mdx) instead. diff --git a/docs/develop/wallet-provider/wallet-provider-tutorial.mdx b/docs/develop/wallet-provider/wallet-provider-tutorial.mdx index 58313efbc..0f88aff3f 100644 --- a/docs/develop/wallet-provider/wallet-provider-tutorial.mdx +++ b/docs/develop/wallet-provider/wallet-provider-tutorial.mdx @@ -4,7 +4,7 @@ import Admonition from '@theme/Admonition'; -Wallet-Provider is deprecated. Use [Wallet Kit](../wallet-kit/wallet-kit-tutorial.mdx) instead. +Wallet-Provider is deprecated. Use [Wallet Kit](../wallet-kit/getting-started.mdx) instead. diff --git a/docs/develop/which-tools.mdx b/docs/develop/which-tools.mdx index ade92cd31..ea93b489b 100644 --- a/docs/develop/which-tools.mdx +++ b/docs/develop/which-tools.mdx @@ -18,7 +18,7 @@ Terra-Development-Suite │ // link[5:14] /develop/feather-js/getting-started ├── Feather.js: JavaScript SDK. │ -│ // link[5:14] /develop/wallet-kit/wallet-kit-tutorial +│ // link[5:14] /develop/wallet-kit/getting-started ├── Wallet Kit: React tooling for frontend integrations. │ └── Other tools @@ -47,7 +47,7 @@ Use feather.js to create bots, mint NFTs, and build out back-end services. Follo ## Wallet Kit -Wallet Kit makes it easy to connect a React-based web app to Station. Follow the [Wallet kit tutorial](wallet-kit/wallet-kit-tutorial.mdx) to get started. +Wallet Kit makes it easy to connect a React-based web app to Station. Follow the [Wallet kit tutorial](wallet-kit/getting-started.mdx) to get started. ### Other Tools From 672642cba62eab4b427ef053b3911f6e48a53243 Mon Sep 17 00:00:00 2001 From: evanorti <87997759+evanorti@users.noreply.github.com> Date: Thu, 10 Aug 2023 20:01:52 -0400 Subject: [PATCH 4/6] Update getting-started.mdx --- docs/develop/wallet-kit/getting-started.mdx | 38 +++++++++------------ 1 file changed, 17 insertions(+), 21 deletions(-) diff --git a/docs/develop/wallet-kit/getting-started.mdx b/docs/develop/wallet-kit/getting-started.mdx index cebc67493..e13a09e13 100644 --- a/docs/develop/wallet-kit/getting-started.mdx +++ b/docs/develop/wallet-kit/getting-started.mdx @@ -2,9 +2,9 @@ import Admonition from '@theme/Admonition'; # Get Started with Wallet Kit -[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. +[Wallet Kit](https://github.com/terra-money/wallet-kit) makes it easy to build Station functionality into your React application. It contains custom hooks that drastically simplify common tasks like connecting a wallet and triggering transactions for both Station mobile and the Station extension. -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). +This guide covers 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 @@ -15,12 +15,11 @@ 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).{' '} - - ```sh nvm install 16 nvm use 16 ``` + 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 + ```
@@ -43,7 +42,7 @@ This guide will cover how to set up a React app, integrate Wallet Kit, check the Next, you'll wrap your `App` with `` to give all your components access to useful data, hooks, and utilities. You'll also need to pass in information about Terra networks, such as the `mainnet` or `chainId`, into the provider via `getInitialConfig`. -1. Navigate to your `Index.js` in a code editor and replace the code with the following: +Navigate to your `Index.js` in a code editor and replace the code with the following: ```js import ReactDOM from 'react-dom'; @@ -61,10 +60,7 @@ Next, you'll wrap your `App` with `` to give all your components }); ``` - -
- How to add support Station Mobile? -

+## 3. Add support for station Mobile To support Station Mobile: @@ -96,11 +92,11 @@ To support Station Mobile: }); ``` -

-
- -2. Start the application to make sure it works: + +## 4. Start the application + +Start the application to make sure it works: ```sh npm start @@ -140,7 +136,7 @@ To solve these errors, can downgrade `react-scripts`: `4.0.3` in your `package.j 3. Create a new directory called `components` in the `source` directory. This directory will house components to trigger different actions from our connected wallet. -## 3. Put `useWallet` to work +## 5. Put `useWallet` to work Now that `App.js` has inherited the context of `WalletProvider`, you can start putting your imports to work. You'll use the multi-purpose `useWallet` and `useConnectedWallet` hooks to connect your Station extension to your web browser. @@ -207,7 +203,7 @@ The `status`, `network`, and `wallets` properties in your browser provide useful You should be able to see these changes in real-time. -## 4. Querying a wallet balance +## 6. Query a wallet balance It's common for an app to show the connected user's LUNA balance. To achieve this you'll need two hooks. The first is `useLcdClient`. An `LCDClient` is essentially a REST-based adapter for the Terra blockchain. You can use it to query an account balance. The second is `useConnectedWallet`, which tells you if a wallet is connected and, if so, basic information about that wallet such as its address. @@ -269,9 +265,9 @@ Be aware that you will not see any tokens if your wallet is empty. 4. Refresh your browser. Your wallet balance will appear in micro-denominations. Multiply by $10^6$ for an accurate balance. -## 5. Sending a transaction +## 7. Send a transaction -You can also create and send transactions to the Terra network while using Wallet Kit. You can use [Feather.js](../feather-js/getting-started) to generate a sample transaction: +You can also create and send transactions to the Terra network while using Wallet Kit. You can use [Feather.js](../feather-js/getting-started.mdx) to generate a sample transaction: ```sh npm install @terra-money/feather.js From c353927e97f423f6bf258b151a4bbf628901172c Mon Sep 17 00:00:00 2001 From: evanorti <87997759+evanorti@users.noreply.github.com> Date: Thu, 10 Aug 2023 20:01:55 -0400 Subject: [PATCH 5/6] Update migration.mdx --- docs/develop/wallet-kit/migration.mdx | 80 ++++++++++++++------------- 1 file changed, 42 insertions(+), 38 deletions(-) diff --git a/docs/develop/wallet-kit/migration.mdx b/docs/develop/wallet-kit/migration.mdx index 06b3c92a2..750c6d5f1 100644 --- a/docs/develop/wallet-kit/migration.mdx +++ b/docs/develop/wallet-kit/migration.mdx @@ -2,7 +2,7 @@ import Admonition from '@theme/Admonition'; # Migration Guide -This guide will cover how to set migrate your existing codebase to use Wallet Kit instead of the now deprecated Wallet Provider. +This guide will cover how to migrate your existing codebase to use Wallet Kit instead of the now deprecated Wallet Provider. ## Prerequisites @@ -13,61 +13,64 @@ This guide will cover how to set migrate your existing codebase to use Wallet Ki
- - {' '} - 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 ``` + 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. Dependency Setup +## 1. Set up dependencies -1. To get started, and uninstall deprecated Station wallet packages. +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 - ``` +```sh +npm uninstall @terra-money/use-wallet @terra-money/wallet-controller @terra-money/wallet-provider +``` -2. Then, install the `@terra-money/wallet-kit` package: +2. Install the `@terra-money/wallet-kit` package. - ```sh - npm install @terra-money/wallet-kit @terra-money/terra-station-mobile - ``` +```sh +npm install @terra-money/wallet-kit @terra-money/terra-station-mobile +``` -## 2. `WalletProvider` setup changes +## 2. Change the `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 code sample below. +Navigate to `index.js` in a code editor and change the following in the `WalletProvider` component. - ```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'; +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. - getInitialConfig().then((defaultNetworks) => { - ReactDOM.render( - - - , - document.getElementById('root'), - ); - }); - ``` +```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( + + + , + document.getElementById('root'), + ); +}); +``` -## 3. Code changes to comply with Wallet Kit API +## 3. Comply with the Wallet Kit API -1. Fix package imports. Import key Station wallet utility from @terra-money/wallet-kit instead of prior packages. +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. For example, `WalletStatus` enum now has properties `CONNECTED` instead of `WALLET_CONNECTED`. And `availableConnections` and `availableInstallations` have been consolidated into `availableWallets`. +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(); @@ -89,3 +92,4 @@ const list = [ })), ]; ``` +Congratulations, your migration to Wallet Kit is now complete! \ No newline at end of file From 74ce993cdaaf8eec2e58fc4ff636e898b6bb1eae Mon Sep 17 00:00:00 2001 From: evanorti <87997759+evanorti@users.noreply.github.com> Date: Thu, 10 Aug 2023 20:01:59 -0400 Subject: [PATCH 6/6] Update wallet-provider-tutorial.mdx --- .../wallet-provider/wallet-provider-tutorial.mdx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/develop/wallet-provider/wallet-provider-tutorial.mdx b/docs/develop/wallet-provider/wallet-provider-tutorial.mdx index 0f88aff3f..e19026e10 100644 --- a/docs/develop/wallet-provider/wallet-provider-tutorial.mdx +++ b/docs/develop/wallet-provider/wallet-provider-tutorial.mdx @@ -10,7 +10,7 @@ Wallet-Provider is deprecated. Use [Wallet Kit](../wallet-kit/getting-started.md [Wallet Provider](https://github.com/terra-money/wallet-provider) 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 Provider, check the balance of the connected account, and call a token swap. If you want to integrate Station into an existing react app you can skip past the `Project Setup` section. +This guide will cover how to set up a React app, integrate Wallet Provider, check the balance of the connected account, and call a token swap. If you want to integrate Station into an existing React app you can skip past the `Project Setup` section. @@ -30,12 +30,12 @@ If you're using a frontend framework other than React you'll need to use [Wallet
- - {' '} - 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 ``` + 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 + ```