@starterra/starterra-tool-dapp NPM

starterra-tool-dapp

Easy to use library to connect with Terra wallet in custom dApp.

Vision

Our vision is to extend wallet provider library with ready to use react component.

Wallet component

Features

Connect/Disconnect using different providers (web extension or mobile)
Display balance of provided tokens, both native and cw20
Token transfer functionality
Link to Terra Finder
Possibilty to turn on read only mode

Install

npm install --save @material-ui/core
npm install --save @starterra/starterra-tool-dapp

Usage

import React from 'react'
import { WalletProvider, Wallet, Tokens } from '@starterra/starterra-tool-dapp'
import '@starterra/starterra-tool-dapp/dist/index.css'

const avaliableNetworks = {
  0: {
    name: "testnet",
    chainID: "bombay-12",
    lcd: "https://bombay-lcd.terra.dev",
  },
  1: {
    name: "mainnet",
    chainID: "columbus-5",
    lcd: "https://lcd.terra.dev",
  },
};


const testnetTokens: Tokens = [
  {
    address: "uluna",
    name: "LUNA",
    isDefault: false,
    decimal: 6,
  },
  {
    address: "uusd",
    name: "UST",
    isDefault: true,
    decimal: 6,
  },
  {
    address: "terra1747mad58h0w4y589y3sk84r5efqdev9q4r02pc",
    name: "ANC",
    isDefault: false,
    decimal: 6,
  },
];
    return (
    <WalletProvider
      defaultNetwork={avaliableNetworks[0]}
      walletConnectChainIds={avaliableNetworks}
    >
      <Wallet tokens={testnetTokens} readOnlyMode={false}/>
    </WalletProvider>
    )
  }
}

Using wallet provider

You can use all hooks and functions provided by wallet-provider

import React from 'react'
import { useWallet, useConnectedWallet } from '@starterra/starterra-tool-dapp'

const Sample = () => {
  const { network } = useWallet()
  const connectedWallet = useConnectedWallet()

  return (
    <div>
      <p>{network.name}</p>
      <p>{connectedWallet?.terraAddress}</p>
    </div>
  )
}

export default Sample

Just remeber to make this child compoment of WalletProvider

const App = () => {
  return (
    <WalletProvider
      defaultNetwork={avaliableNetworks[0]}
      walletConnectChainIds={avaliableNetworks}
    >
      <Wallet tokens={testnetTokens} readOnlyMode={false}/>
      <Sample/>
    </WalletProvider>
  )
}

Sample mainnet list

const mainnetTokens: Tokens = [
  {
    address: 'uluna',
    name: 'LUNA',
    isDefault: false,
    decimal: 6
  },
  {
    address: 'uusd',
    name: 'UST',
    isDefault: true,
    decimal: 6
  },
  {
    address: 'ukrw',
    name: 'KRW',
    isDefault: false,
    decimal: 6
  },
  {
    address: 'usdr',
    name: 'SDR',
    isDefault: false,
    decimal: 6
  },
  {
    address: 'terra15gwkyepfc6xgca5t5zefzwy42uts8l2m4g40k6',
    name: 'MIR',
    isDefault: false,
    decimal: 6
  },
  {
    address: 'terra14z56l0fp2lsf86zy3hty2z47ezkhnthtr9yq76',
    name: 'ANC',
    isDefault: false,
    decimal: 6
  }
]