Coin98
English
English
  • Coin98
  • Products
    • Coin98 AI Wallet
    • Coin98 Telegram Wallet
      • How to create a Coin98 Telegram Wallet
      • General Settings
      • How to invite friends on Coin98 Telegram Wallet
      • How to create/import a hot wallet on Coin98 Telegram Wallet
      • How to activate a wallet on Coin98 Telegram Wallet
      • How to manage blockchains on Coin98 Telegram Wallet
      • How to use Watch-only Wallet
      • How to retrieve Seed Phrase/Private key on Coin98 Telegram Wallet
      • How to buy cryptocurrency by fiat on Coin98 Telegram Wallet
      • How to Send a Token
      • How to Receive tokens
      • How to swap natively on Coin98 Telegram Wallet
      • How to contact Live Chat on the Coin98 Telegram Wallet
    • Coin98 Super Wallet
      • Mobile
        • Coin98 Super Wallet V16 UI Overview
        • Getting Started
          • How to download and install Coin98 Super Wallet
          • General Settings
          • How to automatically update Coin98 Super Wallet
          • How to manage notifications on Coin98 Super Wallet
          • How to create or import a Multichain Wallet to Coin98 Super Wallet
          • How to buy cryptocurrency by fiat on Coin98 Super Wallet?
          • How to add a contact on Coin98 Super Wallet
          • FAQs
            • What is the difference between Private Key and Seed phrase?
            • Do I have to backup every time my Wallet updates?
            • Does Coin98 Super Wallet hold my funds?
            • I can't find an answer to my question. Where do I find an answer?
        • Wallet Management
          • How to activate a wallet on Coin98 Super Wallet
          • How to show Seed Phrase / Private key
          • How to import Multi-chain wallets to Coin98 Super Wallet
          • How to switch a single-chain wallet to another chain wallet on Coin98 Super Wallet
          • How to use Seed Phrase Recover Tool
          • How to connect Hardware Wallet on Coin98 Super Wallet
          • How to use Watch-only Wallet
          • How to rename/remove Wallet
          • FAQ: Why did I recover a wallet but my balance shows 0 and the addresses are changed?
        • Social Wallet
          • How to create a Social Wallet
          • How to restore a Social Wallet logged via Email
          • How to manage a Social Wallet
        • Zen Card Wallet
          • How to Create a Zen Card Wallet
          • How to Restore a Zen Card Wallet
          • Migrate Hot Wallets to Zen Card
          • How to Manage Zen Card
          • How to Setup and Manage a Profile for eCard
          • How to Redeem Zen Gift
          • How to Use Zen Card
          • FAQs
        • Asset Management
          • How to manage blockchains on Coin98 Super Wallet
          • How to add Custom Blockchain on Coin98 Super Wallet
          • How to withdraw tokens from Binance to Coin98 Super Wallet
          • How to create a send request for someone
          • How to Send a Token
          • How to send a token to multiple addresses
          • How to add a Custom Token on Coin98 Super Wallet
          • How to Receive (Deposit) a Token
          • How to hide/unhide tokens on Coin98 Super Wallet
          • How to create a token using Token Issuer
          • How to create a portfolio on Coin98 Super Wallet
          • How to track portfolio on Coin98 Super Wallet
          • FAQs
            • Balances Not Loading or Showing on my wallet
            • Why can't I send USDT to other wallets?
        • NFTs
          • How to create a NFT using NFT Issuer
          • How to Receive (Deposit) an NFT
          • How to Send NFT
          • How to send multiple NFTs to an address
          • NFTverse
            • How to buy NFT in Coin98 Super Wallet
            • How to list an NFT on Marketplace
        • SwapX
          • How to swap tokens natively on SwapX
          • How to convert tokens on SwapX?
          • FAQs
            • Why did my transaction fail?
            • What is gas setting
            • Why did I have to pay gas fees for a failed transaction?
            • What is slippage tolerance
            • What is inverse rate
            • What is Unlimited approval?
            • What is Transaction Deadline
            • FAQs
        • BOBA Points - On-chain Rewards Program
          • How to earn BOBA
        • Futures
          • How to trade Futures on Coin98 Super Wallet
        • OneID
          • OneID Profile: Log in with OneID, Manage Profile and Get OneID Referral Link
          • How to link a wallet to a OneID on Coin98 Super Wallet
          • How to use OneID on Coin98 Super Wallet
          • How to perform KYC Verification on Coin98 Super Wallet
        • Stake Master
          • How to unstake Coin98 Staking V1
          • How to use Coin98 PowerPool on Coin98 Super Wallet
          • How to use Dynamic Rate Staking on Coin98 Super Wallet
        • Coin98 Messenger
          • How to change Messenger settings
          • How to start new conversation in Coin98 Messenger
          • How to create a request for someone to send their tokens
          • Cypheus Assistant Bot
          • How to set up a Lucky Gift
          • How to receive a Lucky Gift
          • How to set up a Quiz Gift
          • How to receive a Quiz Gift
          • How to contact Coin98 Live Support via Coin98 Messenger
        • Market
        • Third party platforms and dApps
          • How to use multichain dApp browser on Coin98 Super Wallet
          • How to use Faucet on Coin98 Super Wallet
          • How to manage connections of the wallet
          • How to use Super Connect
        • Coin98 Vault
          • How to use Coin98 Vault on Coin98 Super Wallet
        • Security & Privacy
          • What to do when your wallet has been hacked?
          • How to use Cloud Backup on the Coin98 Super Wallet
          • How to revoke token allowances using Wallet Approval
          • How to use Clear Clipboard on Coin98 Super Wallet?
      • Extension
        • Getting Started
          • How to install Coin98 Extension
          • General Settings
          • How to update Coin98 Extension
          • How to create or import a Multichain Wallet to Coin98 Extension
          • How to buy cryptocurrency by fiat on Coin98 Extension?
          • Get Started with Coin98 Extension: Set a password and Create your new wallet
          • How to change your Coin98 Extension Password
        • Wallet Management
          • How to activate a wallet on Coin98 Extension
          • How to show Seed Phrase / Private key
          • How to switch a single-chain wallet to another chain wallet on Coin98 Extension
          • How to Refresh a Multichain Wallet
          • How to connect Hardware Wallet on Coin98 Extension
          • How to use Watch-only Wallet
          • How to rename/remove Wallet
        • Social Wallet
          • How to create a Social Wallet
          • How to restore a Social Wallet
        • Asset Management
          • How to manage blockchains on Coin98 Extension
          • How to add Custom Network on Coin98 Extension
          • How to Send a Token
          • How to send a token to multiple addresses
          • How to add a Custom Token on Coin98 Extension
          • How to Receive (Deposit) a Token
        • Swap
          • How to swap natively on Coin98 Extension
        • Bridge
          • How to convert tokens on Bridge?
        • Security & Privacy
          • How to use Cloud Backup on the Coin98 Extension
    • Zen Card
      • How to use Zen Card with Coin98 Super Wallet
      • Legal
        • PRIVACY POLICY
        • TERMS OF USE
      • FAQs
    • Coin98 Vault
      • How to claim Vault on Coin98 Super Wallet
      • How to claim Vault with Coin98 Extension
      • How to create Vault to distribute tokens
      • How to Sponsor Gas for Vault
    • Coin98 Staking
      • How to stake C98 on Coin98 Super Wallet
      • How to stake C98 on Coin98 Staking website
      • Fixed Rate Staking
    • Coin98 Token
      • Why is the C98 token issued on Ethereum, BNB Chain, Solana, Polygon and Viction?
      • How can I get Coin98 (C98) Token?
      • Where to trade C98
      • Where can I store my C98
      • Can I get back the money when I sent C98 to the contract address?
      • How to convert C98 token on Coin98 Super Wallet
    • Coin98 Terminals
      • Token Issuer
        • How to use Token Issuer on Coin98 Super Wallet
        • How to use Token Issuer on Coin98 Extension
      • Multisender
        • How to use Multisend
    • Coin98 Markets
      • How to use Coin98 Markets
    • Single Chain Wallet
      • Ancient8 Wallet
        • How to migrate social wallet to V2
        • Terms of Service
        • Privacy Policy
        • Developer Guide
  • Audits
    • Coin98 Token
    • Coin98 Staking
    • Coin98 Vault
    • 🐞BUG BOUNTY
  • Developer Guide
    • Coin98 Adapter
      • Setup Coin98 Adapter for Next.js
      • Setup Coin98 Adapter for React
      • Hooks
        • useWallet
        • useWalletModal
      • Example
    • Coin98 Connect Integration
    • Bitcoin Dapps Integration
    • Ethereum DApps Integration
    • EthereumPoW DApps Integration
    • BNB Chain DApps Integration
    • Kucoin Chain DApps Integration
    • Solana DApps Integration
    • Near DApps Integration
    • Cosmos DApps Integration
      • Keplr Override
        • Basic API
        • Use with CosmJs
        • Use with SecretJS
        • Suggest Chain
    • Secret Network DApps Integration
      • Keplr Override
        • Basic API
        • Use with CosmJs
        • Use with SecretJS
        • Suggest Chain
    • KAVA DApps Integration
      • Keplr Override
        • Basic API
        • Use with CosmJs
        • Use with SecretJS
        • Suggest Chain
    • Persistence DApps Integration
      • Keplr Override
        • Basic API
        • Use with CosmJs
        • Use with SecretJS
        • Suggest Chain
    • Terra DApps Integration
      • Terra Station Override
    • Ronin DApps Integration
    • Arbitrum DApps Integration
    • Optimism DApps Integration
    • Boba Network DApps Integration
    • Harmony DApps Integration
    • Klaytn DApps Integration
    • Fantom DApps Integration
    • Celo DApps Integration
    • Gnosis Chain DApps Integration
    • GateChain DApps Integration
    • Polygon DApps Integration
    • Viction DApps Integration
    • Avalanche DApps Integration
    • OKExChain DApps Integration
    • Heco DApps Integration
    • Aurora DApps Integration
    • Cronos DApps Integration
    • Bittorrent DApps Integration
    • PlatON Network DApps Integration
    • Moonbeam DApps Integration
    • Kardia DApps Integration
    • Aptos Dapps Integration
    • Sui DApps Integration
    • Sei DApps Integration
      • Keplr Override
        • Basic API
        • Use with CosmJs
        • Use with SecretJS
        • Suggest Chain
    • Osmosis DApps Integration
      • Keplr Override
        • Basic API
        • Use with CosmJs
        • Use with SecretJS
        • Suggest Chain
    • Injective DApps Integration
      • Keplr Override
        • Basic API
        • Use with CosmJs
        • Use with SecretJS
        • Suggest Chain
    • Oasis network DApps Integration
    • Evmos DApps Integration
      • Keplr Override
        • Basic API
        • Use with CosmJs
        • Use with SecretJS
        • Suggest Chain
    • Juno network DApps Integration
      • Keplr Override
        • Basic API
        • Use with CosmJs
        • Use with SecretJS
        • Suggest Chain
    • Agoric DApps Integration
      • Keplr Override
        • Basic API
        • Use with CosmJs
        • Use with SecretJS
        • Suggest Chain
    • Archway (Testnet) DApps Integration
      • Keplr Override
        • Basic API
        • Use with CosmJs
        • Use with SecretJS
        • Suggest Chain
    • Stargaze DApps Integration
      • Keplr Override
        • Basic API
        • Use with CosmJs
        • Use with SecretJS
        • Suggest Chain
    • Umee DApps Integration
      • Keplr Override
        • Basic API
        • Use with CosmJs
        • Use with SecretJS
        • Suggest Chain
    • Stride DApps Integration
      • Keplr Override
        • Basic API
        • Use with CosmJs
        • Use with SecretJS
        • Suggest Chain
    • Deeplink
    • Kujira DApps Integration
      • Keplr Override
        • Basic API
        • Use with CosmJs
        • Use with SecretJS
        • Suggest Chain
    • Mantle DApps Integration
    • DApps Integration
      • EVM-compatible DApps Integration
    • Ethereum Coin98 Telegram Wallet SDK Bot Integration
      • Ethereum Coin98 Telegram Wallet SDK Bot Integration For React
      • Ethereum Coin98 Telegram Wallet SDK Bot Integration For Vanilla Javascript
  • Ton SDK Integration Guide For Partners
  • Legal
    • Coin98 Super Wallet
      • Terms of Service
      • Privacy Policy
    • Coin98 Telegram Game
      • Terms of Use
      • Privacy Policy
  • Coin98 Links and Communities
    • Official Coin98 Links
    • Official Communities
  • BRAND ASSETS & GUIDLINES
    • Brand Assets & Guidelines
Powered by GitBook
On this page
  • Coin98 Wallet Provider
  • Quick Start
  • Basic Usage
  • API
  • Projects for reference
  • Links
  • Trouble-shooting guide
  • For Chrome Extension compatible wallet developers
  • Keywords
  1. Developer Guide
  2. Terra DApps Integration

Terra Station Override

PreviousTerra DApps IntegrationNextRonin DApps Integration

Last updated 3 years ago

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)

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>
import {
  WalletProvider,
  NetworkInfo,
  ReadonlyWalletSession,
} from '@terra-money/wallet-provider';

// network information
const mainnet: NetworkInfo = {
  name: 'mainnet',
  chainID: 'columbus-5',
  lcd: 'https://lcd.terra.dev',
};

const testnet: NetworkInfo = {
  name: 'testnet',
  chainID: 'bombay-12',
  lcd: 'https://bombay-lcd.terra.dev',
};

// WalletConnect separates chainId by number.
// Currently TerraStation Mobile uses 0 as Testnet, 1 as Mainnet.
const walletConnectChainIds: Record<number, NetworkInfo> = {
  0: testnet,
  1: mainnet,
};

// ⚠️ If there is no special reason, use `getChainOptions()` instead of `walletConnectChainIds` above.

// Optional
// If you need to modify the modal, such as changing the design, you can put it in,
// and if you don't put the value in, there is a default modal.
async function createReadonlyWalletSession(): Promise<ReadonlyWalletSession> {
  const terraAddress = prompt('YOUR TERRA ADDRESS');
  return {
    network: mainnet,
    terraAddress,
  };
}

// Optional
// WalletConnect Client option.
const connectorOpts: IWalletConnectOptions | undefined = undefined;
const pushServerOpts: IPushServerOptions | undefined = undefined;

// Optional
// Time to wait for the Chrome Extension window.isTerraExtensionAvailable.
// If not entered, wait for default 1000 * 3 miliseconds.
// If you reduce excessively, Session recovery of Chrome Extension may fail.
const waitingChromeExtensionInstallCheck: number | undefined = undefined;

ReactDOM.render(
  <WalletProvider
    defaultNetwork={mainnet}
    walletConnectChainIds={walletConnectChainIds}
    createReadonlyWalletSession={createReadonlyWalletSession}
    connectorOpts={connectorOpts}
    pushServerOpts={pushServerOpts}
    waitingChromeExtensionInstallCheck={waitingChromeExtensionInstallCheck}
  >
    <YOUR_APP />
  </WalletProvider>,
  document.getElementById('root'),
);
useWallet()

This is a React Hook that can receive all the information. (Other hooks are functions for the convenience of Wrapping this useWallet())

export interface Wallet {
  /**
   * current client status
   *
   * this will be one of WalletStatus.INITIALIZING | WalletStatus.WALLET_NOT_CONNECTED | WalletStatus.WALLET_CONNECTED
   *
   * INITIALIZING = checking that the session and the chrome extension installation. (show the loading to users)
   * WALLET_NOT_CONNECTED = there is no connected wallet (show the connect and install options to users)
   * WALLET_CONNECTED = there is aconnected wallet (show the wallet info and disconnect button to users)
   *
   * @see Wallet#refetchStates
   * @see WalletController#status
   */
  status: WalletStatus;
  /**
   * current selected network
   *
   * - if status is INITIALIZING or WALLET_NOT_CONNECTED = this will be the defaultNetwork
   * - if status is WALLET_CONNECTED = this depends on the connected environment
   *
   * @see WalletProviderProps#defaultNetwork
   * @see WalletController#network
   */
  network: NetworkInfo;
  /**
   * available connect types on the browser
   *
   * @see Wallet#connect
   * @see WalletController#availableConnectTypes
   */
  availableConnectTypes: ConnectType[];
  /**
   * available connections includes identifier, name, icon
   *
   * @example
   * ```
   * const { availableConnections, connect } = useWallet()
   *
   * return (
   *  <div>
   *    {
   *      availableConnections.map(({type, identifier, name, icon}) => (
   *        <butotn key={`${type}:${identifier}`} onClick={() => connect(type, identifier)}>
   *          <img src={icon} /> {name}
   *        </button>
   *      ))
   *    }
   *  </div>
   * )
   * ```
   */
  availableConnections: Connection[];
  /**
   * current connected connection
   */
  connection: Connection | undefined;
  /**
   * connect to wallet
   *
   * @example
   * ```
   * const { status, availableConnectTypes, connect } = useWallet()
   *
   * return status === WalletStatus.WALLET_NOT_CONNECTED &&
   *        availableConnectTypes.includs(ConnectType.EXTENSION) &&
   *  <button onClick={() => connect(ConnectType.EXTENSION)}>
   *    Connct Chrome Extension
   *  </button>
   * ```
   *
   * @see Wallet#availableConnectTypes
   * @see WalletController#connect
   */
  connect: (type?: ConnectType, identifier?: string) => void;
  /**
   * manual connect to read only session
   *
   * @see Wallet#connectReadonly
   */
  connectReadonly: (terraAddress: string, network: NetworkInfo) => void;
  /**
   * available install types on the browser
   *
   * in this time, this only contains [ConnectType.EXTENSION]
   *
   * @see Wallet#install
   * @see WalletController#availableInstallTypes
   */
  availableInstallTypes: ConnectType[];
  /**
   * available installations includes identifier, name, icon, url
   *
   * @example
   * ```
   * const { availableInstallations } = useWallet()
   *
   * return (
   *  <div>
   *    {
   *      availableInstallations.map(({type, identifier, name, icon, url}) => (
   *        <a key={`${type}:${identifier}`} href={url}>
   *          <img src={icon} /> {name}
   *        </a>
   *      ))
   *    }
   *  </div>
   * )
   * ```
   *
   * @see Wallet#install
   * @see WalletController#availableInstallations
   */
  availableInstallations: Installation[];
  /**
   * @deprecated Please use availableInstallations
   *
   * install for the connect type
   *
   * @example
   * ```
   * const { status, availableInstallTypes } = useWallet()
   *
   * return status === WalletStatus.WALLET_NOT_CONNECTED &&
   *        availableInstallTypes.includes(ConnectType.EXTENSION) &&
   *  <button onClick={() => install(ConnectType.EXTENSION)}>
   *    Install Extension
   *  </button>
   * ```
   *
   * @see Wallet#availableInstallTypes
   * @see WalletController#install
   */
  install: (type: ConnectType) => void;
  /**
   * connected wallets
   *
   * this will be like
   * `[{ connectType: ConnectType.WALLETCONNECT, terraAddress: 'XXXXXXXXX' }]`
   *
   * in this time, you can get only one wallet. `wallets[0]`
   *
   * @see WalletController#wallets
   */
  wallets: WalletInfo[];
  /**
   * disconnect
   *
   * @example
   * ```
   * const { status, disconnect } = useWallet()
   *
   * return status === WalletStatus.WALLET_CONNECTED &&
   *  <button onClick={() => disconnect()}>
   *    Disconnect
   *  </button>
   * ```
   */
  disconnect: () => void;
  /**
   * reload the connected wallet states
   *
   * in this time, this only work on the ConnectType.EXTENSION
   *
   * @see WalletController#refetchStates
   */
  refetchStates: () => void;
  /**
   * @deprecated please use refetchStates(). this function will remove on next major update
   */
  recheckStatus: () => void;
  /**
   * support features of this connection
   *
   * @example
   * ```
   * const { supportFeatures } = useWallet()
   *
   * return (
   *  <div>
   *    {
   *      supportFeatures.has('post') &&
   *      <button onClick={post}>post</button>
   *    }
   *    {
   *      supportFeatures.has('cw20-token') &&
   *      <button onClick={addCW20Token}>add cw20 token</button>
   *    }
   *  </div>
   * )
   * ```
   *
   * This type is same as `import type { TerraWebExtensionFeatures } from '@terra-money/web-extension-interface'`
   */
  supportFeatures: Set<
    'post' | 'sign' | 'sign-bytes' | 'cw20-token' | 'network'
  >;
  /**
   * post transaction
   *
   * @example
   * ```
   * const { post } = useWallet()
   *
   * const callback = useCallback(async () => {
   *   try {
   *    const result: TxResult = await post({...CreateTxOptions})
   *    // DO SOMETHING...
   *   } catch (error) {
   *     if (error instanceof UserDenied) {
   *       // DO SOMETHING...
   *     } else {
   *       // DO SOMETHING...
   *     }
   *   }
   * }, [])
   * ```
   *
   * @param { CreateTxOptions } tx transaction data
   * @param terraAddress - does not work at this time. for the future extension
   *
   * @return { Promise<TxResult> }
   *
   * @throws { UserDenied } user denied the tx
   * @throws { CreateTxFailed } did not create txhash (error dose not broadcasted)
   * @throws { TxFailed } created txhash (error broadcated)
   * @throws { Timeout } user does not act anything in specific time
   * @throws { TxUnspecifiedError } unknown error
   *
   * @see WalletController#post
   */
  post: (tx: CreateTxOptions, terraAddress?: string) => Promise<TxResult>;
  /**
   * sign transaction
   *
   * @example
   * ```
   * const { sign } = useWallet()
   *
   * const callback = useCallback(async () => {
   *   try {
   *    const result: SignResult = await sign({...CreateTxOptions})
   *
   *    // Broadcast SignResult
   *    const tx = result.result
   *
   *    const lcd = new LCDClient({
   *      chainID: connectedWallet.network.chainID,
   *      URL: connectedWallet.network.lcd,
   *    })
   *
   *    const txResult = await lcd.tx.broadcastSync(tx)
   *
   *    // DO SOMETHING...
   *   } catch (error) {
   *     if (error instanceof UserDenied) {
   *       // DO SOMETHING...
   *     } else {
   *       // DO SOMETHING...
   *     }
   *   }
   * }, [])
   * ```
   *
   * @param { CreateTxOptions } tx transaction data
   * @param terraAddress - does not work at this time. for the future extension
   *
   * @return { Promise<SignResult> }
   *
   * @throws { UserDenied } user denied the tx
   * @throws { CreateTxFailed } did not create txhash (error dose not broadcasted)
   * @throws { TxFailed } created txhash (error broadcated)
   * @throws { Timeout } user does not act anything in specific time
   * @throws { TxUnspecifiedError } unknown error
   *
   * @see WalletController#sign
   */
  sign: (tx: CreateTxOptions, terraAddress?: string) => Promise<SignResult>;
  /**
   * sign any bytes
   *
   * @example
   * ```
   * const { signBytes } = useWallet()
   *
   * const BYTES = Buffer.from('hello world')
   *
   * const callback = useCallback(async () => {
   *   try {
   *     const { result }: SignBytesResult = await signBytes(BYTES)
   *
   *     console.log(result.recid)
   *     console.log(result.signature)
   *     console.log(result.public_key)
   *
   *     const verified: boolean = verifyBytes(BYTES, result)
   *   } catch (error) {
   *     if (error instanceof UserDenied) {
   *       // DO SOMETHING...
   *     } else {
   *       // DO SOMETHING...
   *     }
   *   }
   * }, [])
   * ```
   *
   * @param bytes
   */
  signBytes: (bytes: Buffer, terraAddress?: string) => Promise<SignBytesResult>;
  /**
   * check if tokens are added on the extension
   *
   * @param chainID
   * @param tokenAddrs cw20 token addresses
   *
   * @return token exists
   *
   * @see WalletController#hasCW20Tokens
   */
  hasCW20Tokens: (
    chainID: string,
    ...tokenAddrs: string[]
  ) => Promise<{
    [tokenAddr: string]: boolean;
  }>;
  /**
   * request add token addresses to browser extension
   *
   * @param chainID
   * @param tokenAddrs cw20 token addresses
   *
   * @return token exists
   *
   * @see WalletController#addCW20Tokens
   */
  addCW20Tokens: (
    chainID: string,
    ...tokenAddrs: string[]
  ) => Promise<{
    [tokenAddr: string]: boolean;
  }>;
  /**
   * check if network is added on the extension
   *
   * @param network
   *
   * @return network exists
   *
   * @see WalletController#hasNetwork
   */
  hasNetwork: (network: Omit<NetworkInfo, 'name'>) => Promise<boolean>;
  /**
   * request add network to browser extension
   *
   * @param network
   *
   * @return network exists
   *
   * @see WalletController#addNetwork
   */
  addNetwork: (network: NetworkInfo) => Promise<boolean>;
  /**
   * Some mobile wallet emulates the behavior of chrome extension.
   * It confirms that the current connection environment is such a wallet.
   * (If you are running connect() by checking availableConnectType, you do not need to use this API.)
   *
   * @see WalletController#isChromeExtensionCompatibleBrowser
   */
  isChromeExtensionCompatibleBrowser: () => boolean;
}
useConnectedWallet()
import { useConnectedWallet } from '@terra-money/wallet-provider'

function Component() {
  const connectedWallet = useConnectedWallet()

  const postTx = useCallback(async () => {
    if (!connectedWallet) return

    console.log('walletAddress is', connectedWallet.walletAddress)
    console.log('network is', connectedWallet.network)
    console.log('connectType is', connectedWallet.connectType)

    const result = await connectedWallet.post({...})
  }, [])

  return (
    <button disabled={!connectedWallet || !connectedWallet.availablePost} onClick={() => postTx}>
      Post Tx
    </button>
  )
}
useLCDClient()
import { useLCDClient } from '@terra-money/wallet-provider';

function Component() {
  const lcd = useLCDClient();

  const [result, setResult] = useState('');

  useEffect(() => {
    lcd.treasury.taxRate().then((taxRate) => {
      setResult(taxRate.toString());
    });
  }, []);

  return <div>Result: {result}</div>;
}

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

1. Create dApp for test

There is the dangerously__chromeExtensionCompatibleBrowserCheck option to allow you to create a test environment for wallet development.

By declaring the dangerously__chromeExtensionCompatibleBrowserCheck, you can make your wallet recognized as the chrome extension.

<WalletProvider
  dangerously__chromeExtensionCompatibleBrowserCheck={(userAgent) =>
    /YourWallet/.test(userAgent)
  }
>
  ...
</WalletProvider>

2. Register your wallet as default allow

If your wallet has been developed,

Please send me your wallet App link (Testlight version is OK)

And send me Pull Request by modifying DEFAULT_CHROME_EXTENSION_COMPATIBLE_BROWSER_CHECK in the packages/src/@terra-money/wallet-provider/env.ts file. (or just make an issue is OK)

export const DEFAULT_CHROME_EXTENSION_COMPATIBLE_BROWSER_CHECK = (userAgent: string) => {
-  return /MathWallet\//.test(userAgent);
+  return /MathWallet\//.test(userAgent) || /YourWallet/.test(userAgent);
}

Keywords

none

You can find more templates in . (This is the beginning stage, so it may not be enough yet)

If you make a different type of template, you can register .

https://www.npmjs.com/package/@terra-money/wallet-provider
Wallet Provider + Create-React-App
Wallet Provider + Next.js
Wallet Provider + Vite.js
Wallet Controller + Lit
Wallet Controller + Vue.js
Wallet Controller + Svelte
Wallet Provider + Vite.js
Wallet Controller + Lit
Wallet Controller + Vue.js
Wallet Controller + Svelte
https://templates.terra.money
here
packages/src/@terra-money/use-wallet/useWallet.ts
Anchor Web App
Mirror Web App
Releases (Changelog)
wallet-provider/templates/create-react-app at main · terra-money/wallet-providerGitHub
wallet-provider/templates/next at main · terra-money/wallet-providerGitHub
Logo
Logo