feat:

 1. Change signing response structure to be compatible with both old and new wallets.
 2. fix tron logo link
 3. add trx balance
 4. update tronweb to v6 version
 5. compatible with both new and old structures in wallet

Author: Sam

advanced/dapps/react-dapp-v2/package.json

@@ -55,7 +55,7 @@
     "react-scripts": "^4.0.3",
     "solana-wallet": "^1.0.1",
     "styled-components": "^6.1.15",
-    "tronweb": "^4.4.0",
+    "tronweb": "^6.0.4",
     "web-vitals": "^0.2.4"
   },
   "devDependencies": {

advanced/dapps/react-dapp-v2/pnpm-lock.yaml

@@ -20,12 +20,12 @@ export const TronChainData: ChainsMap = {
 export const TronMetadata: NamespaceMetadata = {
   // Tron Mainnet
   "0x2b6653dc": {
-    logo: "https://tronscan.io/static/media/TRON.4a760cebd163969b2ee874abf2415e9a.svg",
+    logo: "/assets/tron.png",
     rgb: "183, 62, 49",
   },
   // Tron TestNet
   "0xcd8690dc": {
-    logo: "https://tronscan.io/static/media/TRON.4a760cebd163969b2ee874abf2415e9a.svg",
+    logo: "/assets/tron.png",
     rgb: "183, 62, 49",
   },
 };

advanced/dapps/react-dapp-v2/public/assets/tron.png

@@ -14,6 +14,7 @@ const btcLogo = getChainMetadata(
   "bip122:000000000933ea01ad0ee984209779ba"
 ).logo;
 const suiLogo = getChainMetadata("sui:mainnet").logo;
+const tronLogo = getChainMetadata("tron:0x2b6653dc").logo;
 const SAsset = styled.div`
   width: 100%;
   padding: 20px;
@@ -55,6 +56,8 @@ function getAssetIcon(asset: AssetData): JSX.Element {
       return <Icon src={btcLogo} />;
     case "sui":
       return <Icon src={suiLogo} />;
+    case "trx":
+      return <Icon src={tronLogo} />;
     default:
       return <Icon src={"/assets/eth20.svg"} />;
   }

advanced/dapps/react-dapp-v2/src/chains/tron.ts

@@ -26,8 +26,7 @@ import {
   Transaction as SolanaTransaction,
   clusterApiUrl,
 } from "@solana/web3.js";
-// @ts-expect-error
-import TronWeb from "tronweb";
+import { TronWeb } from "tronweb";
 import {
   IPactCommand,
   PactCommand,
@@ -1646,7 +1645,7 @@ export function JsonRpcContextProvider({
         const testContract = isTestnet
           ? "TXYZopYRdj2D9XRtbG411XZZ3kM5VkAeBf"
           : "TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t";
-        const testTransaction =
+        const { transaction } =
           await tronWeb.transactionBuilder.triggerSmartContract(
             testContract,
             "approve(address,uint256)",
@@ -1658,17 +1657,26 @@ export function JsonRpcContextProvider({
             address
           );
 
-        const result = await client!.request<{ signature: any }>({
+        const sessionProperties = session!.sessionProperties;
+        const isV1Method = sessionProperties?.tron_method_version === "v1";
+
+        const result = await client!.request<{
+          signature: any;
+          result?: { signature: any };
+        }>({
           chainId,
           topic: session!.topic,
           request: {
             method: DEFAULT_TRON_METHODS.TRON_SIGN_TRANSACTION,
-            params: {
-              address,
-              transaction: {
-                ...testTransaction,
-              },
-            },
+            params: isV1Method
+              ? {
+                  address,
+                  transaction,
+                }
+              : {
+                  address,
+                  transaction: { transaction },
+                },
           },
         });
         console.log("tron sign transaction result", result);
@@ -1677,7 +1685,7 @@ export function JsonRpcContextProvider({
           method: DEFAULT_TRON_METHODS.TRON_SIGN_TRANSACTION,
           address,
           valid: true,
-          result: result.signature,
+          result: result.result?.signature ?? result.signature,
         };
       }
     ),

advanced/dapps/react-dapp-v2/src/components/Asset.tsx

@@ -5,6 +5,7 @@ import { AssetData } from "./types";
 import { PactCommand } from "@kadena/client";
 import { apiGetBip122AccountBalance } from "./bip122";
 import { getSuiClient } from "./sui";
+import { TronWeb }  from "tronweb";
 
 export type RpcProvidersByChainId = Record<
   number,
@@ -165,6 +166,10 @@ export async function apiGetAccountBalance(
     return apiGetSuiAccountBalance(address, chainId);
   }
 
+  if (namespace === "tron") {
+    return apiGetTronAccountBalance(address, networkId);
+  }
+
   if (namespace !== "eip155") {
     return { balance: "", symbol: "", name: "" };
   }
@@ -186,6 +191,50 @@ export async function apiGetAccountBalance(
   return { balance, ...token };
 }
 
+export const apiGetTronAccountBalance = async (
+  address: string,
+  networkId: string
+): Promise<AssetData> => {
+  try {
+
+    let fullHost: string;
+    
+    switch (networkId) {
+      case "0x2b6653dc": 
+        fullHost = 'https://api.trongrid.io';
+        break;
+      case "0x94a9059e": 
+        fullHost = 'https://api.shasta.trongrid.io';
+        break;
+      case "0xcd8690dc": 
+        fullHost = 'https://nile.trongrid.io';
+        break;
+      default:
+        fullHost = 'https://api.trongrid.io';
+    }
+
+    const tronWeb = new TronWeb({
+      fullHost: fullHost
+    });
+    const balance = await tronWeb.trx.getBalance(address);
+    
+    const balanceInTrx = tronWeb.fromSun(balance);
+    
+    return {
+      balance: balanceInTrx.toString(),
+      symbol: "TRX",
+      name: "TRX"
+    };
+  } catch (error) {
+    console.error("Failed to fetch TRON balance:", error);
+    return { 
+      balance: "0", 
+      symbol: "TRX", 
+      name: "TRON" 
+    };
+  }
+};
+
 export const apiGetSuiAccountBalance = async (
   address: string,
   chainId: string

advanced/dapps/react-dapp-v2/src/contexts/JsonRpcContext.tsx

@@ -23,7 +23,7 @@ export const TRON_MAINNET_CHAINS: TRONChains = {
   'tron:0x2b6653dc': {
     chainId: '0x2b6653dc',
     name: 'Tron',
-    logo: 'https://tronscan.io/static/media/TRON.4a760cebd163969b2ee874abf2415e9a.svg',
+    logo: '/chain-logos/tron.png',
     rgb: '183, 62, 49',
     fullNode: 'https://api.trongrid.io',
     namespace: 'tron'
@@ -34,7 +34,7 @@ export const TRON_TEST_CHAINS: TRONChains = {
   'tron:0xcd8690dc': {
     chainId: '0xcd8690dc',
     name: 'Tron Testnet',
-    logo: 'https://tronscan.io/static/media/TRON.4a760cebd163969b2ee874abf2415e9a.svg',
+    logo: '/chain-logos/tron.png',
     rgb: '183, 62, 49',
     fullNode: 'https://nile.trongrid.io/',
     namespace: 'tron'

advanced/dapps/react-dapp-v2/src/helpers/api.ts

@@ -51,7 +51,8 @@ export default class TronLib {
   }
 
   public async signTransaction(transaction: any) {
-    const signedtxn = await this.tronWeb.trx.sign(transaction.transaction)
+    // Compatible with both new and old structures at the handler level
+    const signedtxn = await this.tronWeb.trx.sign(transaction)
     return signedtxn
   }
 }