Skip to main content

Integrate Web3Auth with the Tron Blockchain in JavaScript

Overview​

While using the Web3Auth Web SDK, you get an EIP1193-compatible provider, similar to the MetaMask provider. This provider can be used with libraries like TronWeb to make blockchain calls such as getting the user's account, fetching balances, signing transactions, sending transactions, etc. We have highlighted a few examples to get you started quickly.

Installation​

To interact with the Tron blockchain, you can use the Web3Auth provider and TronWeb.

NPM Installation​

npm install @web3auth/no-modal @web3auth/ethereum-provider @web3auth/auth-adapter @web3auth/wallet-services-plugin tronweb

Getting the ChainConfig​

For different Tron networks, you can use the appropriate chain configuration.

const TRON_SHASTA_TESTNET = {
  chainNamespace: "eip155",
  chainId: "0x94a9059e", // Tron Shasta Testnet Chain ID
  rpcTarget: "https://api.shasta.trongrid.io/jsonrpc",
  displayName: "TRON Shasta Testnet",
  blockExplorerUrl: "https://shasta.tronscan.org",
  ticker: "TRX",
  tickerName: "TRON",
  logo: "https://cryptologos.cc/logos/tron-trx-logo.png",
};

Initializing and Instantiating the Web3Auth SDK​

We will now initialize Web3Auth with the TRON configuration.

import { Web3AuthNoModal } from "@web3auth/no-modal";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { AuthAdapter } from "@web3auth/auth-adapter";
import { TRON_SHASTA_TESTNET } from "./chainConfig";
import TronRpc from "./tronRPC";

const clientId = "YOUR_CLIENT_ID"; // Replace with your Web3Auth client ID

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig: TRON_SHASTA_TESTNET },
});

const web3auth = new Web3AuthNoModal({
  clientId, // Your Web3Auth Client ID
  chainConfig: TRON_SHASTA_TESTNET, // Using Tron Shasta Testnet
  privateKeyProvider,
});

const authAdapter = new AuthAdapter({
  adapterSettings: {
    uxMode: "redirect",
  },
});
web3auth.configureAdapter(authAdapter);
await web3auth.init();

Getting the Web3Auth Provider​

After initializing Web3Auth, the next step is to authenticate and retrieve the provider to interact with the Tron blockchain.

await web3auth.connect();

// Get the provider
const provider = web3auth.provider;

Once logged in, Web3Auth provides a JWT token and access to the Tron provider.

Fetching User Info​

After logging in, you can retrieve information about the user.

const user = await web3auth.getUserInfo();
console.log(user);

Get Account and Balance​

Once logged in, we can use tronRpc.ts to fetch the user’s account and balance.

// tronRpc.ts should be implemented as per previous example
const tronRpc = new TronRpc(provider);
await tronRpc.init();

// Get the user's Tron account address
const accounts = await tronRpc.getAccounts();
console.log("Account: ", accounts[0]);

// Get the balance
const balance = await tronRpc.getBalance();
console.log("Balance: ", balance);

Send Transaction​

You can send a transaction using the user's private key.

const transaction = await tronRpc.sendTransaction();
console.log("Transaction Hash: ", transaction);

This will send a transaction from the user's Tron account.

Sign a Message​

You can also sign a message using the private key of the logged-in user.

const signedMessage = await tronRpc.signMessage("Hello Tron!");
console.log("Signed Message: ", signedMessage);

This will return the signature of the message.

Conclusion​

With Web3Auth, you can easily integrate Tron blockchain capabilities into your application. By using the TronWeb library, you can perform various blockchain operations such as fetching accounts, sending transactions, signing messages, and interacting with smart contracts.