TRON Wallet Integration Guide: Connect Web3 Wallets & DEX API

Installation & Initialization

To integrate OKX Connect with your DApp, ensure the OKX App is updated to version 6.96.0 or later. Use npm for seamless integration:

npm install okx-connect

Before connecting wallets, create a UI provider object for wallet interactions like transactions and signatures.

Required Parameters

• dappMetaData:

  • name: Your application name (non-unique identifier).
  • icon: URL to a 180x180px PNG/ICO icon (SVG not supported).

• actionsConfiguration:

  • modals: Configure transaction prompts ('before', 'success', 'error', or 'all'). Default: 'before'.
  • returnStrategy: Deep link return behavior after user action (e.g., 'none' or tg://resolve for Telegram Mini Apps).

• uiPreferences:

  • theme: THEME.DARK, THEME.LIGHT, or "SYSTEM".
• language: Default "en_US". Supported locales include ru_RU, zh_CN, ar_AE, etc.

Returns

• OKXUniversalConnectUI instance.

Example

const provider = new OKXUniversalConnectUI({
  dappMetaData: {
    name: "MyDApp",
    icon: "https://example.com/icon.png"
  }
});

Connecting a Wallet

Establish a wallet connection to retrieve addresses for signing transactions.

Parameters

• connectParams:

  • namespaces: Required chain namespaces (e.g., "tron"). Unsupported chains will reject the connection.
  • chains: Array of chain IDs (e.g., ["tron:mainnet"]).
  • optionalNamespaces: Optional chains (proceeds even if unsupported).

  • sessionConfig:

    • redirect: Post-connection deeplink (e.g., tg://resolve for Telegram Mini Apps).

Returns

• Promise with session details:

  • accounts: Connected wallet addresses.
  • methods: Supported wallet methods.

Example

const session = await provider.connect({
  namespaces: { tron: { chains: ["tron:mainnet"] } }
});

Transaction Preparation

Create an OKXTronProvider instance using okxUniversalConnectUI:

const tronProvider = new OKXTronProvider(provider);

Account Information

Fetch wallet details for a specified chain.

Parameters

• chainId: Chain ID (e.g., "tron:mainnet").

Returns

• Object with address.

Example

const account = await tronProvider.getAccount("tron:mainnet");

Signing Messages

Parameters

• message: Text to sign.
• chainId: Optional chain ID.

Returns

• Promise<string>: Signature.

Example

const signature = await tronProvider.signMessage("Hello, TRON!");

Signing Transactions

Parameters

• transaction: Transaction object (generated via TronWeb.transactionBuilder).
• chainId: Optional chain ID.

Returns

• Promise<Object>: Signed transaction.

Example

const signedTx = await tronProvider.signTransaction(txData);

Broadcasting Transactions

Parameters

• transaction: Transaction object.
• chainId: Chain ID.

Returns

• Promise<string>: Transaction hash.

Example

const txHash = await tronProvider.signAndSendTransaction(txData);

Disconnecting Wallets

Terminate the current session to switch or disconnect wallets:

await provider.disconnect();

Event Handling

Listen for wallet events (e.g., session updates or disconnects):

provider.on("session_update", (session) => {
  console.log("Session updated:", session);
});

Error Codes

👉 Explore more Web3 integrations

FAQs

Q: How do I handle unsupported chains?
A: Use optionalNamespaces to proceed with partial support or check chains via provider.getSupportedChains().

Q: Can I customize the wallet connection UI?
A: Yes, configure uiPreferences for themes and language.

Q: What’s the recommended return strategy for Telegram Mini Apps?
A: Set tmaReturnUrl: "back" to close the wallet post-signature.

👉 Get API keys for DEX integration