feat(tron): add support for tron ecosystem

packages/wallet-management/package.json

@@ -41,7 +41,10 @@
     "ENS",
     "web3",
     "blockchain",
-    "lifi"
+    "lifi",
+    "tron",
+    "solana",
+    "bitcoin"
   ],
   "dependencies": {
     "@emotion/react": "^11.14.0",

packages/wallet-management/src/components/TronListItemButton.tsx

@@ -0,0 +1,68 @@
+import { ChainId, ChainType } from '@lifi/sdk'
+import { useTronContext } from '@lifi/widget-provider'
+import { useLastConnectedAccount } from '../hooks/useAccount.js'
+import { useWalletManagementEvents } from '../hooks/useWalletManagementEvents.js'
+import { getChainTypeIcon } from '../icons.js'
+import { WalletManagementEvent } from '../types/events.js'
+import { WalletTagType } from '../types/walletTagType.js'
+import { CardListItemButton } from './CardListItemButton.js'
+import type { WalletListItemButtonProps } from './types.js'
+
+export const TronListItemButton = ({
+  ecosystemSelection,
+  connector,
+  tagType,
+  onConnected,
+  onConnecting,
+  onError,
+}: WalletListItemButtonProps) => {
+  const emitter = useWalletManagementEvents()
+  const { connect, disconnect, isConnected } = useTronContext()
+  const connectorDisplayName = ecosystemSelection ? 'Tron' : connector.name
+  const { setLastConnectedAccount } = useLastConnectedAccount()
+
+  const connectWallet = async () => {
+    if (tagType === WalletTagType.Connected) {
+      onConnected?.()
+      return
+    }
+
+    try {
+      onConnecting?.()
+      if (isConnected) {
+        await disconnect()
+      }
+      await connect(connector.id ?? connector.name, (address: string) => {
+        setLastConnectedAccount(connector)
+        emitter.emit(WalletManagementEvent.WalletConnected, {
+          address: address,
+          chainId: ChainId.TRN,
+          chainType: ChainType.TVM,
+          connectorId: connector.id ?? connector.name,
+          connectorName: connector.name,
+        })
+        onConnected?.()
+      })
+    } catch (error) {
+      onError?.(error)
+    }
+  }
+
+  return (
+    <CardListItemButton
+      key={connectorDisplayName}
+      icon={
+        ecosystemSelection
+          ? getChainTypeIcon(ChainType.TVM)
+          : (connector.icon ?? '')
+      }
+      onClick={connectWallet}
+      title={connectorDisplayName}
+      tagType={
+        ecosystemSelection && tagType !== WalletTagType.Connected
+          ? undefined
+          : tagType
+      }
+    />
+  )
+}

packages/wallet-management/src/components/WalletMenuContent.tsx

@@ -28,6 +28,7 @@ import { CardListItemButton } from './CardListItemButton.js'
 import { EthereumListItemButton } from './EthereumListItemButton.js'
 import { SolanaListItemButton } from './SolanaListItemButton.js'
 import { SuiListItemButton } from './SuiListItemButton.js'
+import { TronListItemButton } from './TronListItemButton.js'
 import type { WalletListItemButtonProps } from './types.js'
 import { WalletInfoDisplay } from './WalletInfoDisplay.js'
 import { WalletMenuContentEmpty } from './WalletMenuContentEmpty.js'
@@ -180,6 +181,9 @@ export const WalletMenuContent: React.FC<WalletMenuContentProps> = ({
       case ChainType.MVM:
         ListItemButtonComponent = SuiListItemButton
         break
+      case ChainType.TVM:
+        ListItemButtonComponent = TronListItemButton
+        break
     }
 
     return ListItemButtonComponent ? (

packages/wallet-management/src/hooks/useAccount.ts

@@ -5,6 +5,7 @@ import {
   useEthereumContext,
   useSolanaContext,
   useSuiContext,
+  useTronContext,
   type WalletConnector,
 } from '@lifi/widget-provider'
 import { useMemo } from 'react'
@@ -53,6 +54,7 @@ export const useAccount = (args?: UseAccountArgs): AccountResult => {
   const { account: bitcoinAccount } = useBitcoinContext()
   const { account: solanaAccount } = useSolanaContext()
   const { account: suiAccount } = useSuiContext()
+  const { account: tronAccount } = useTronContext()
   const { lastConnectedAccount } = useLastConnectedAccount()
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: run only when wallet changes
@@ -62,6 +64,7 @@ export const useAccount = (args?: UseAccountArgs): AccountResult => {
       solanaAccount,
       bitcoinAccount,
       suiAccount,
+      tronAccount,
     ].filter(Boolean) as Account[]
     const connectedAccounts = accounts.filter(
       (account) => account.isConnected && account.address
@@ -110,6 +113,8 @@ export const useAccount = (args?: UseAccountArgs): AccountResult => {
     bitcoinAccount?.chainId,
     suiAccount?.address,
     suiAccount?.status,
+    tronAccount?.address,
+    tronAccount?.status,
     args?.chainType,
     lastConnectedAccount,
   ])

packages/wallet-management/src/hooks/useAccountDisconnect.ts

@@ -5,6 +5,7 @@ import {
   useEthereumContext,
   useSolanaContext,
   useSuiContext,
+  useTronContext,
   type WalletConnector,
 } from '@lifi/widget-provider'
 import {
@@ -18,6 +19,7 @@ export const useAccountDisconnect = () => {
   const { disconnect: bitcoinDisconnect } = useBitcoinContext()
   const { disconnect: solanaDisconnect } = useSolanaContext()
   const { disconnect: suiDisconnect } = useSuiContext()
+  const { disconnect: tronDisconnect } = useTronContext()
   const emitter = useWalletManagementEvents()
 
   return async (account: Account) => {
@@ -41,6 +43,9 @@ export const useAccountDisconnect = () => {
       case ChainType.MVM:
         await suiDisconnect()
         break
+      case ChainType.TVM:
+        await tronDisconnect()
+        break
     }
     emitter.emit(WalletManagementEvent.WalletDisconnected, walletDisconnected)
   }

packages/wallet-management/src/hooks/useCombinedWallets.ts

@@ -4,6 +4,7 @@ import {
   useEthereumContext,
   useSolanaContext,
   useSuiContext,
+  useTronContext,
   type WalletConnector,
 } from '@lifi/widget-provider'
 import { useMemo } from 'react'
@@ -30,6 +31,7 @@ const combineWalletLists = (
   bitcoinConnectorList: WalletConnector[],
   solanaWalletList: WalletConnector[],
   suiWalletList: WalletConnector[],
+  tronWalletList: WalletConnector[],
   walletEcosystemsOrder?: Record<string, ChainType[]>
 ): CombinedWallet[] => {
   const walletMap = new Map<string, CombinedWallet>()
@@ -87,6 +89,18 @@ const combineWalletLists = (
     walletMap.set(normalizedName, existing)
   })
 
+  tronWalletList.forEach((tron) => {
+    const normalizedName = normalizeName(tron.name)
+    const existing = walletMap.get(normalizedName) || {
+      id: tron.name,
+      name: tron.name,
+      icon: tron.icon,
+      connectors: [] as CombinedWalletConnector[],
+    }
+    existing.connectors.push({ connector: tron, chainType: ChainType.TVM })
+    walletMap.set(normalizedName, existing)
+  })
+
   let combinedWallets = Array.from(walletMap.values())
   if (walletEcosystemsOrder) {
     combinedWallets = combinedWallets.map((wallet) => {
@@ -113,6 +127,7 @@ export const useCombinedWallets = () => {
   const { installedWallets: installedBitcoinWallets } = useBitcoinContext()
   const { installedWallets: installedSolanaWallets } = useSolanaContext()
   const { installedWallets: installedSuiWallets } = useSuiContext()
+  const { installedWallets: installedTronWallets } = useTronContext()
 
   const combinedWallets = useMemo(() => {
     const includeEcosystem = (chainType: ChainType) =>
@@ -124,6 +139,7 @@ export const useCombinedWallets = () => {
       includeEcosystem(ChainType.UTXO) ? installedBitcoinWallets : [],
       includeEcosystem(ChainType.SVM) ? installedSolanaWallets : [],
       includeEcosystem(ChainType.MVM) ? installedSuiWallets : [],
+      includeEcosystem(ChainType.TVM) ? installedTronWallets : [],
       walletConfig.walletEcosystemsOrder
     )
 
@@ -135,6 +151,7 @@ export const useCombinedWallets = () => {
     installedBitcoinWallets,
     installedSolanaWallets,
     installedSuiWallets,
+    installedTronWallets,
     walletConfig,
   ])
 

packages/widget-playground-next/src/app/AppProvider.tsx

@@ -21,6 +21,7 @@ export const AppProvider = ({ children }: PropsWithChildren) => {
   return (
     <EnvVariablesProvider
       EVMWalletConnectId={process.env.NEXT_PUBLIC_EVM_WALLET_CONNECT!}
+      TVMWalletConnectId={process.env.NEXT_PUBLIC_TVM_WALLET_CONNECT!}
     >
       <QueryClientProvider client={queryClient}>
         <WidgetConfigProvider defaultWidgetConfig={defaultWidgetConfig}>

packages/widget-playground-vite/.env

@@ -1,2 +1,3 @@
 VITE_EVM_WALLET_CONNECT=5432e3507d41270bee46b7b85bbc2ef8
+VITE_TVM_WALLET_CONNECT=5432e3507d41270bee46b7b85bbc2ef8
 VITE_API_URL=https://li.quest/v1

packages/widget-playground-vite/src/App.tsx

@@ -18,6 +18,7 @@ const AppProvider = ({ children }: PropsWithChildren) => {
   return (
     <EnvVariablesProvider
       EVMWalletConnectId={import.meta.env.VITE_EVM_WALLET_CONNECT}
+      TVMWalletConnectId={import.meta.env.VITE_TVM_WALLET_CONNECT}
     >
       <QueryClientProvider client={queryClient}>
         <WidgetConfigProvider defaultWidgetConfig={defaultWidgetConfig}>

packages/widget-playground/package.json

@@ -35,6 +35,7 @@
     "@lifi/widget-provider-ethereum": "workspace:*",
     "@lifi/widget-provider-solana": "workspace:*",
     "@lifi/widget-provider-sui": "workspace:*",
+    "@lifi/widget-provider-tron": "workspace:*",
     "@metamask/sdk": "~0.34.0",
     "@monaco-editor/react": "^4.7.0",
     "@mui/icons-material": "^7.3.6",
@@ -55,7 +56,8 @@
     "react-dom": "^19.2.4",
     "viem": "^2.45.1",
     "wagmi": "^3.3.2",
-    "zustand": "^5.0.11"
+    "zustand": "^5.0.11",
+    "@tronweb3/tronwallet-adapter-react-hooks": "^1.1.11"
   },
   "devDependencies": {
     "@types/lodash.isequal": "^4.5.8",

packages/widget-playground/src/defaultWidgetConfig.ts

@@ -4,6 +4,7 @@ import { BitcoinProvider } from '@lifi/widget-provider-bitcoin'
 import { EthereumProvider } from '@lifi/widget-provider-ethereum'
 import { SolanaProvider } from '@lifi/widget-provider-solana'
 import { SuiProvider } from '@lifi/widget-provider-sui'
+import { TronProvider } from '@lifi/widget-provider-tron'
 
 export const widgetBaseConfig: WidgetConfig = {
   // fromChain: 137,
@@ -44,6 +45,9 @@ export const widgetBaseConfig: WidgetConfig = {
     SuiProvider(),
     SolanaProvider(),
     BitcoinProvider(),
+    TronProvider({
+      walletConnect: true,
+    }),
   ],
   variant: 'wide',
   // subvariant: 'split',

packages/widget-playground/src/providers/EnvVariablesProvider.tsx

@@ -3,18 +3,23 @@ import { createContext, useContext } from 'react'
 
 const EnvVariablesContext = createContext({
   EVMWalletConnectId: '',
+  TVMWalletConnectId: '',
 })
 
 interface EvnVariablesProviderProps extends PropsWithChildren {
   EVMWalletConnectId: string
+  TVMWalletConnectId: string
 }
 
 export const EnvVariablesProvider = ({
   children,
   EVMWalletConnectId,
+  TVMWalletConnectId,
 }: EvnVariablesProviderProps) => {
   return (
-    <EnvVariablesContext.Provider value={{ EVMWalletConnectId }}>
+    <EnvVariablesContext.Provider
+      value={{ EVMWalletConnectId, TVMWalletConnectId }}
+    >
       {children}
     </EnvVariablesContext.Provider>
   )

packages/widget-provider-ethereum/src/providers/EthereumBaseProvider.tsx

@@ -1,4 +1,5 @@
 import type { ExtendedChain } from '@lifi/sdk'
+import { resolveConfig } from '@lifi/widget-provider'
 import { type FC, type PropsWithChildren, useRef } from 'react'
 import { WagmiProvider } from 'wagmi'
 import { defaultBaseAccountConfig } from '../config/baseAccount.js'
@@ -11,7 +12,6 @@ import {
   createDefaultWagmiConfig,
   type DefaultWagmiConfigResult,
 } from '../utils/createDefaultWagmiConfig.js'
-import { resolveConfig } from '../utils/resolveConfig.js'
 
 interface EthereumBaseProviderProps {
   config?: EthereumProviderConfig

packages/widget-provider-ethereum/src/providers/EthereumProviderValues.tsx

@@ -5,7 +5,11 @@ import {
   isDelegationDesignatorCode,
   isGaslessStep,
 } from '@lifi/sdk-provider-ethereum'
-import { EthereumContext, isWalletInstalled } from '@lifi/widget-provider'
+import {
+  EthereumContext,
+  isWalletInstalled,
+  resolveConfig,
+} from '@lifi/widget-provider'
 import {
   type FC,
   type PropsWithChildren,
@@ -39,7 +43,6 @@ import type {
   CreateConnectorFnExtended,
   EthereumProviderConfig,
 } from '../types.js'
-import { resolveConfig } from '../utils/resolveConfig.js'
 
 interface EthereumProviderValuesProps {
   isExternalContext: boolean

packages/widget-provider-tron/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@lifi/widget-provider-tron",
+  "version": "4.0.0-alpha.0",
+  "description": "LI.FI Widget Provider for Tron blockchain integration.",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "watch": "tsc -w -p ./tsconfig.json",
+    "build": "pnpm clean && pnpm build:esm && pnpm build:clean",
+    "build:esm": "tsc --build",
+    "build:prerelease": "node ../../scripts/prerelease.js && cpy '../../*.md' .",
+    "build:postrelease": "node ../../scripts/postrelease.js && rm -rf *.md",
+    "build:clean": "rm -rf tsconfig.tsbuildinfo ./dist/tsconfig.tsbuildinfo",
+    "release:build": "pnpm build",
+    "clean": "pnpm build:clean && rm -rf dist",
+    "check:types": "tsc --noEmit",
+    "check:circular-deps": "madge --circular $(find ./src -name '*.ts' -o -name '*.tsx')",
+    "check:circular-deps-graph": "madge --circular $(find ./src -name '*.ts' -o -name '*.tsx') --image graph.svg"
+  },
+  "author": "Eugene Chybisov <eugene@li.finance>",
+  "homepage": "https://github.com/lifinance/widget",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lifinance/widget.git",
+    "directory": "packages/widget-provider-tron"
+  },
+  "bugs": {
+    "url": "https://github.com/lifinance/widget/issues"
+  },
+  "license": "Apache-2.0",
+  "keywords": [
+    "widget",
+    "lifi-widget",
+    "wallet",
+    "web3",
+    "lifi",
+    "tron",
+    "trx"
+  ],
+  "dependencies": {
+    "@lifi/sdk": "^4.0.0-alpha.21",
+    "@lifi/sdk-provider-tron": "^4.0.0-alpha.21",
+    "@lifi/widget-provider": "workspace:*",
+    "@tronweb3/tronwallet-abstract-adapter": "^1.1.10",
+    "@tronweb3/tronwallet-adapters": "^1.2.21"
+  },
+  "peerDependencies": {
+    "@tronweb3/tronwallet-adapter-react-hooks": "^1.1.11"
+  },
+  "devDependencies": {
+    "cpy-cli": "^7.0.0",
+    "madge": "^8.0.0",
+    "react": "^19.2.4",
+    "typescript": "^5.9.3"
+  }
+}