Coin98 Finance
English
Search…
⌃K

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

npx terra-templates get wallet-provider:create-react-app your-app-name
cd your-app-name
yarn install
yarn start

Next.js

npx terra-templates get wallet-provider:next your-app-name
cd your-app-name
yarn install
yarn run dev

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.
<html lang="en">
<head>
<meta name="terra-wallet" />
</head>
</html>
If you have used react-router-dom's <BrowserRouter>, useLocation(), you can easily understand it.
import {
NetworkInfo,
WalletProvider,
WalletStatus,
getChainOptions,
} from '@terra-money/wallet-provider';
import React from 'react';
import ReactDOM from 'react-dom';
// getChainOptions(): Promise<{ defaultNetwork, walletConnectChainIds }>
getChainOptions().then((chainOptions) => {
ReactDOM.render(
<WalletProvider {...chainOptions}>
<YOUR_APP />
</WalletProvider>,
document.getElementById('root'),
);
});
First, you need to wrap your React App with the <WalletProvider> component.
import { useWallet } from '@terra-money/wallet-provider';
import React from 'react';
function Component() {
const { status, network, wallets } = useWallet();
return (
<div>
<section>
<pre>
{JSON.stringify(
{
status,
network,
wallets,
},
null,
2,
)}
</pre>
</section>
</div>
);
}
Afterwards, you can use React Hooks such as useWallet(), useConnectedWallet() and useLCDClient() anywhere in your app.

API

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

Projects for reference

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