Tron Provider

After setting up your wallet, you can have access to the Tron provider:

// react
const { providers } = useTomo()
const { tronProvider } = providers;

// pure js
const tronProvider = window.tomo_tron

Get Tron Address

the Tron address from the wallet state or provider. In React framework:

// get address from wallet state
const { walletState } = useTomo()
const tronAddress = walletState.tronAddress

// or get address from provider
const { providers } = useTomo()
const tronAddress = await providers.tronProvider.getAddress()

Or Pure JS:

/** pure js */
import { getWalletState } from '@tomo-inc/tomo-web-sdk';
// get from wallet state
const walletState = getWalletState()
const tronAddress = walletState.tronAddress

// or get from provider
const tronAddress = await window.tomo_tron.getAddress()

Provider Functions

Signing a Message

It uses the Tron provider to sign a plain text offchain message, which returns the signature of the given message.

// interface
signMessage(message: string, privateKey?: string): Promise<string>;

// Social Wallet does not support signing messages currently, will support soon.
const signedMessage = await tronProvider.signMessage('hello world')

Sign Transaction

To sign a transaction, you need first initiate a client withtronweb for connecting to the network.

let tronWeb: TronWebType | null = null
export async function getTronWeb() {
  if (tronWeb) return tronWeb
  const {
    default: { TronWeb }
  } = await import('tronweb')
  tronWeb = new TronWeb({
    fullHost:
      'https://orbital-dimensional-season.tron-mainnet.quiknode.pro/d14878573fe23f8f40621a303ee2eaa3c812ba1c'
  })
  return tronWeb as TronWebType
}

Then, create the transaction and sign with our tronProvider . Eventually, you need to send the transaction again through the tronWeb client.

// interface
import { SignedTransaction, Transaction } from 'tronweb/lib/esm/types'
signTransaction(transaction: Transaction): Promise<SignedTransaction>;

// example 1: send TRX
const unSignedTransaction = await tronWeb.transactionBuilder.sendTrx(to, amount, from);
const signedTransaction = await tronProvider.signTransaction(unSignedTransaction)
await tronWeb.trx.sendRawTransaction(signedTransaction);

// example 2: call smart contract
const transactionWrapper = await tronWeb.transactionBuilder.triggerSmartContract(contractAddress, functionSelector, triggerSmartContractOptions, contractFunctionParameter, issuerAddress)
const signedTransaction = await tronProvider.signTransaction(transactionWrapper.transaction)
await tronWeb.trx.sendRawTransaction(signedTransaction);

Example

React

import { parseUnits } from 'viem'
import type { TronWeb as TronWebType } from 'tronweb' // "^6.0.0"
import { TomoContextProvider, useTomo } from '@tomo-inc/tomo-web-sdk'

const CLIENT_ID = 'Your client id'

enum Theme {
  Light = 'light',
  Dark = 'dark'
}

export default function TronDemo() {
  return (
    <TomoContextProvider
      theme={Theme.Light}
      chainTypes={['tron']}
      clientId={CLIENT_ID}
    >
      <App />
    </TomoContextProvider>
  )
}

export function App() {
  const { providers, walletState, openConnectModal } = useTomo()
  const { tronProvider } = providers

  return (
    <div style={{ display: 'flex', gap: '10px' }}>
      <button
        onClick={() => {
          openConnectModal()
        }}
      >
        openConnectModal
      </button>

      <button
        onClick={async () => {
          if (!tronProvider) throw new Error('tronProvider not found')

          const amount = '0.000001'
          const to = 'xxx'
          const from = walletState.tronAddress
          const decimals = 6
          const amountInSunBigInt = parseUnits(amount.toString(), decimals)
          const tronWeb = await getTronWeb()
          const unSignedTransaction = await tronWeb.transactionBuilder.sendTrx(
            to,
            Number(amountInSunBigInt),
            from
          )

          const signedTransaction =
            await tronProvider.signTransaction(unSignedTransaction)
          console.log('signTx res:', signedTransaction)

          const res = await tronWeb.trx.sendRawTransaction(signedTransaction)
          console.log('sendTx res:', res)
        }}
      >
        sign transaction
      </button>

      <button
        onClick={async () => {
          if (!tronProvider) throw new Error('tronProvider not found')

          const decimals = 6
          const amount = '0.000001'
          const to = 'xxx'
          const from = walletState.tronAddress
          const usdtContractAddr = 'TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t'
          const functionSelector = 'transfer(address,uint256)'

          const amountInSunBigInt = parseUnits(amount.toString(), decimals)
          const parameters = [
            { type: 'address', value: to },
            { type: 'uint256', value: amountInSunBigInt }
          ]
          const triggerSmartContractOptions = {}
          const tronWeb = await getTronWeb()
          const transactionWrapper =
            await tronWeb.transactionBuilder.triggerSmartContract(
              usdtContractAddr,
              functionSelector,
              triggerSmartContractOptions,
              parameters,
              from
            )
          const transaction = transactionWrapper.transaction
          const signedTransaction =
            await tronProvider.signTransaction(transaction)
          console.log('signTx res:', signedTransaction)

          const res = await tronWeb.trx.sendRawTransaction(signedTransaction)
          console.log('sendTx res:', res)
        }}
      >
        sign token transaction
      </button>
    </div>
  )
}

let tronWeb: TronWebType | null = null
export async function getTronWeb() {
  if (tronWeb) return tronWeb
  const {
    default: { TronWeb }
  } = await import('tronweb')
  tronWeb = new TronWeb({
    fullHost:
      'https://orbital-dimensional-season.tron-mainnet.quiknode.pro/d14878573fe23f8f40621a303ee2eaa3c812ba1c'
  })
  return tronWeb as TronWebType
}

Pure JavaScript

import { parseUnits } from 'viem'
import type { TronWeb as TronWebType } from 'tronweb' // "^6.0.0"
import { initTomoModal } from '@tomo-inc/tomo-web-sdk'

const CLIENT_ID = 'Your client id'

enum Theme {
  Light = 'light',
  Dark = 'dark'
}

initTomoModal({
  theme: Theme.Light,
  clientId: CLIENT_ID,
  chainTypes: ['tron']
})

export default function TronDemo() {
  return (
    <div style={{ display: 'flex', gap: '10px' }}>
      <button
        onClick={() => {
          window.openTomoConnectModal?.()
        }}
      >
        openConnectModal
      </button>

      <button
        onClick={async () => {
          const tronProvider = window.tomo_tron
          if (!tronProvider) throw new Error('tronProvider not found')

          const amount = '0.000001'
          const to = 'xxx'
          const from = await tronProvider.getAddress()
          const decimals = 6
          const amountInSunBigInt = parseUnits(amount.toString(), decimals)
          const tronWeb = await getTronWeb()
          const unSignedTransaction = await tronWeb.transactionBuilder.sendTrx(
            to,
            Number(amountInSunBigInt),
            from
          )

          const signedTransaction =
            await tronProvider.signTransaction(unSignedTransaction)
          console.log('signTx res:', signedTransaction)

          const res = await tronWeb.trx.sendRawTransaction(signedTransaction)
          console.log('sendTx res:', res)
        }}
      >
        sign transaction
      </button>

      <button
        onClick={async () => {
          const tronProvider = window.tomo_tron
          if (!tronProvider) throw new Error('tronProvider not found')

          const decimals = 6
          const amount = '0.000001'
          const to = 'xxx'
          const from = await tronProvider.getAddress()
          const usdtContractAddr = 'TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t'
          const functionSelector = 'transfer(address,uint256)'

          const amountInSunBigInt = parseUnits(amount.toString(), decimals)
          const parameters = [
            { type: 'address', value: to },
            { type: 'uint256', value: amountInSunBigInt }
          ]
          const triggerSmartContractOptions = {}
          const tronWeb = await getTronWeb()
          const transactionWrapper =
            await tronWeb.transactionBuilder.triggerSmartContract(
              usdtContractAddr,
              functionSelector,
              triggerSmartContractOptions,
              parameters,
              from
            )
          const transaction = transactionWrapper.transaction
          const signedTransaction =
            await tronProvider.signTransaction(transaction)
          console.log('signTx res:', signedTransaction)

          const res = await tronWeb.trx.sendRawTransaction(signedTransaction)
          console.log('sendTx res:', res)
        }}
      >
        sign token transaction
      </button>
    </div>
  )
}

let tronWeb: TronWebType | null = null
export async function getTronWeb() {
  if (tronWeb) return tronWeb
  const {
    default: { TronWeb }
  } = await import('tronweb')
  tronWeb = new TronWeb({
    fullHost:
      'https://orbital-dimensional-season.tron-mainnet.quiknode.pro/d14878573fe23f8f40621a303ee2eaa3c812ba1c'
  })
  return tronWeb as TronWebType
}