Terra Station Override
Terra station NPM package :

Coin98 Wallet Provider

Library to make React dApps easier using Coin98 Extension with Terra Station.

Quick Start

Use templates to get your projects started quickly

Code Sandbox

If you want to test features quickly, you can simply run them on CodeSandbox without having to download Templates.
And if you need to start your project from local computer, use the templates below. 👇

Create React App

1
npx terra-templates get wallet-provider:create-react-app your-app-name
2
cd your-app-name
3
yarn install
4
yarn start
Copied!
wallet-provider/templates/create-react-app at main · terra-money/wallet-provider
GitHub

Next.js

1
npx terra-templates get wallet-provider:next your-app-name
2
cd your-app-name
3
yarn install
4
yarn run dev
Copied!
wallet-provider/templates/next at main · terra-money/wallet-provider
GitHub

Other templates

Community templates (experimental)

You can find more templates in https://templates.terra.money. (This is the beginning stage, so it may not be enough yet)
If you make a different type of template, you can register here.

Basic Usage

First, please add <meta name="terra-wallet" /> on your html page.
Since then, browser extensions (e.g. Terra Station chrome extension) will not attempt to connect in a Web app where this <meta name="terra-wallet"> tag is not found.
1
<html lang="en">
2
<head>
3
<meta name="terra-wallet" />
4
</head>
5
</html>
Copied!
If you have used react-router-dom's <BrowserRouter>, useLocation(), you can easily understand it.
1
import {
2
NetworkInfo,
3
WalletProvider,
4
WalletStatus,
5
getChainOptions,
6
} from '@terra-money/wallet-provider';
7
import React from 'react';
8
import ReactDOM from 'react-dom';
9
10
// getChainOptions(): Promise<{ defaultNetwork, walletConnectChainIds }>
11
getChainOptions().then((chainOptions) => {
12
ReactDOM.render(
13
<WalletProvider {...chainOptions}>
14
<YOUR_APP />
15
</WalletProvider>,
16
document.getElementById('root'),
17
);
18
});
Copied!
First, you need to wrap your React App with the <WalletProvider> component.
1
import { useWallet } from '@terra-money/wallet-provider';
2
import React from 'react';
3
4
function Component() {
5
const { status, network, wallets } = useWallet();
6
7
return (
8
<div>
9
<section>
10
<pre>
11
{JSON.stringify(
12
{
13
status,
14
network,
15
wallets,
16
},
17
null,
18
2,
19
)}
20
</pre>
21
</section>
22
</div>
23
);
24
}
Copied!
Afterwards, you can use React Hooks such as useWallet(), useConnectedWallet() and useLCDClient() anywhere in your app.

API

<WalletProvider>
useWallet()
useConnectedWallet()
useLCDClient()

Projects for reference

Links

Trouble-shooting guide

wallet-provider contains the original source codes in sourcemaps.
You can check src/@terra-money/wallet-provider/ in the Chrome Devtools / Sources Tab, and you can also use breakpoints here for debug.
(It may not be visible depending on your development settings such as Webpack.)

For Chrome Extension compatible wallet developers

Chrome Extension compatible wallet development guide

Keywords

none