# Tron Provider

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

```javascript
// 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:

```tsx
// 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:

<pre class="language-javascript"><code class="lang-javascript"><strong>/** pure js */
</strong>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()
</code></pre>

## 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.

<pre class="language-tsx" data-overflow="wrap"><code class="lang-tsx">// interface
signMessage(message: string, privateKey?: string): Promise&#x3C;string>;

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

### **Sign Transaction**

To sign a transaction, you need first initiate a client with`tronweb` for connecting to the network.&#x20;

```tsx
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.

{% code overflow="wrap" %}

```tsx
// 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);
```

{% endcode %}

## **Example**

We provide an [example ](https://socialwallet-react-prod.tomo.inc/tron)of a tron provider as follows:

### React

<pre class="language-tsx" data-overflow="wrap"><code class="lang-tsx">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 (
    &#x3C;TomoContextProvider
      theme={Theme.Light}
      chainTypes={['tron']}
      clientId={CLIENT_ID}
    >
      &#x3C;App />
    &#x3C;/TomoContextProvider>
  )
}

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

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

      &#x3C;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
      &#x3C;/button>

      &#x3C;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
      &#x3C;/button>
    &#x3C;/div>
  )
}

<strong>let tronWeb: TronWebType | null = null
</strong>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
}

</code></pre>

### Pure JavaScript

```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
}

```