Get Started with Wallet Kit
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 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.
Prerequisites
- The latest version of the Station Chrome extension (Station Wallet 7.4.2 and above)
- NPM
- NVM
- Node.js version 16
Most users will need to specify Node version 16 before continuing. You can manage node versions with NVM.
1. Project Setup
-
To get started, you'll need some basic React scaffolding. To generate this, run the following in your terminal:
-
Then, install the
@terra-money/wallet-kit
package:
2. Wrap your app in WalletProvider
Next, you'll wrap your App
with <WalletProvider>
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
.
Navigate to your Index.js
in a code editor and replace the code with the following:
3. Add support for station Mobile
To support Station Mobile:
-
Install the
@terra-money/terra-station-mobile
package: -
Add
TerraStationMobileWallet
to theextraWallets
array prop in theWalletProvider
component.
4. Start the application
Start the application to make sure it works:
Your browser should open to http://localhost:3000/
and you should see the react logo with a black background and some text.
Getting polyfill
errors?
To solve these errors, can downgrade react-scripts
: 4.0.3
in your package.json
and reinstall your dependencies as a quick fix:
-
Navigate to
my-terra-app
in your terminal and run the following: -
Reinstall your dependencies:
-
Restart your app:
- Create a new directory called
components
in thesource
directory. This directory will house components to trigger different actions from our connected wallet.
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.
-
Create a new component file called
Connect.js
. -
Populate the
Connect.js
file with the following:
- Open
App.js
in your code editor and replace the code with the following:
-
Refresh your browser. There should be some new text and buttons in your browser.
-
Make sure your Station extension is connected to a wallet. Click Connect EXTENSION and the app will connect to your wallet.
The status
, network
, and wallets
properties in your browser provide useful information about the state of the Terra wallet. Before connecting, the status
variable will be WALLET_NOT_CONNECTED
and upon connection, the status becomes WALLET_CONNECTED
. In addition, the wallets
array now has one entry with the connectType
and terraAddress
you used to connect.
You should be able to see these changes in real-time.
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.
Be aware that you will not see any tokens if your wallet is empty.
-
Create a file in your
Components
folder namedQuery.js
. -
Populate
Query.js
with the following: -
Open
App.js
in your code editor and addimport Query from './components/Query'
to line 3, and<Query />
to line 10. The whole file should look like the following: -
Refresh your browser. Your wallet balance will appear in micro-denominations. Multiply by for an accurate balance.
7. Send a transaction
You can also create and send transactions to the Terra network while using Wallet Kit. You can use Feather.js to generate a sample transaction:
Before broadcasting this example transaction, ensure you're on the Terra testnet. To change networks, click the gear icon in your Station extension, click on Networks, then select Testnets.
You can request testnet funds from the Terra Testnet Faucet.
To transfer LUNA, you will need to supply a message containing the sender address, recipient address, and send amount (in this case 1 LUNA), as well as fee parameters. Once the message is constructed, the post
method on connectedWallet
broadcasts it to the network.
Wallet Provider supplies useful error types. This example will handle the UserDenied
error case, but you can find other cases for error handling on GitHub.
-
Create a file in your
Components
folder namedTx.js
. -
Populate
Tx.js
with the following. To make this example interchain retreive thebaseAsset
from the network object.📝noteBecause all coins are denominated in micro-units, you will need to multiply any coins by . For example, 1000000 uluna = 1 LUNA.
-
Open
App.js
in your code editor and addimport Tx from './components/Tx'
to line 4, and<Tx />
to line 12. The whole file should look like the following: -
After refreshing your browser, you'll see a new Send button. Click the button to send your transaction. Your Station extension will ask you to confirm the transaction.