From f621695d41b989e9dfcce65c8b96711eb5b15307 Mon Sep 17 00:00:00 2001 From: Enes Date: Tue, 17 Feb 2026 10:18:49 +0300 Subject: [PATCH 1/2] docs: add TRON adapter installation documentation - Add TRON installation instructions to React, Vue, JavaScript, and Next.js - Create TRON implementation snippets for each framework - Include wallet adapter installation and configuration details - Follow existing TON documentation pattern - Add TRON to supported networks list in introduction sections Includes: - Installation tabs with npm/yarn/bun/pnpm commands - Implementation examples with TronAdapter configuration - Wallet adapter setup instructions (TronLink, MetaMask, etc.) - Network configuration (tronMainnet, tronShastaTestnet) --- appkit/javascript/core/installation.mdx | 37 +++++- appkit/next/core/installation.mdx | 10 +- appkit/react/core/installation.mdx | 74 +++++++++++- appkit/vue/core/installation.mdx | 32 +++++- .../javascript/tron/about/implementation.mdx | 105 ++++++++++++++++++ .../react/tron/about/implementation.mdx | 102 +++++++++++++++++ .../appkit/vue/tron/about/implementation.mdx | 104 +++++++++++++++++ 7 files changed, 450 insertions(+), 14 deletions(-) create mode 100644 snippets/appkit/javascript/tron/about/implementation.mdx create mode 100644 snippets/appkit/react/tron/about/implementation.mdx create mode 100644 snippets/appkit/vue/tron/about/implementation.mdx diff --git a/appkit/javascript/core/installation.mdx b/appkit/javascript/core/installation.mdx index 23569dd44..b9d9e19cb 100644 --- a/appkit/javascript/core/installation.mdx +++ b/appkit/javascript/core/installation.mdx @@ -17,11 +17,14 @@ import BitcoinImplementation from '/snippets/appkit/javascript/bitcoin/about/imp import TonImplementation from '/snippets/appkit/javascript/ton/about/implementation.mdx' +import TronImplementation from '/snippets/appkit/javascript/tron/about/implementation.mdx' + import CoreImplementation from '/snippets/appkit/javascript/core/about/implementation.mdx' -AppKit provides seamless integration with multiple blockchain ecosystems. . It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, -[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON and other networks. AppKit Core with Universal Provider library, enable compatibility across any blockchain protocol. -Choose one of these to get started. +AppKit provides seamless integration with multiple blockchain ecosystems. It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, +[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON, TRON and other networks. + +AppKit Core with [Universal Provider](https://www.npmjs.com/package/@walletconnect/universal-provider) library, enable compatibility across any blockchain protocol. We recommend using [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to get @@ -172,6 +175,29 @@ pnpm add @reown/appkit @reown/appkit-adapter-ton + + + + + +```bash npm +npm install @reown/appkit @reown/appkit-adapter-tron +``` + +```bash Yarn +yarn add @reown/appkit @reown/appkit-adapter-tron +``` + +```bash Bun +bun add @reown/appkit @reown/appkit-adapter-tron +``` + +```bash pnpm +pnpm add @reown/appkit @reown/appkit-adapter-tron +``` + + + @@ -251,6 +277,11 @@ Check the JavaScript TON example + + + + + diff --git a/appkit/next/core/installation.mdx b/appkit/next/core/installation.mdx index c31d6f345..aa14d94e3 100644 --- a/appkit/next/core/installation.mdx +++ b/appkit/next/core/installation.mdx @@ -19,8 +19,10 @@ import TonImplementation from '/snippets/appkit/next/ton/about/implementation.md import CoreImplementation from '/snippets/appkit/react/core/about/implementation.mdx' -AppKit provides seamless integration with multiple blockchain ecosystems. . It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, -[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON and other networks. AppKit Core with Universal Provider library, enable compatibility across any blockchain protocol. +AppKit provides seamless integration with multiple blockchain ecosystems. It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, +[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON and other networks. + +AppKit Core with [Universal Provider](https://www.npmjs.com/package/@walletconnect/universal-provider) library, enable compatibility across any blockchain protocol. These steps are specific to [Next.js](https://nextjs.org/) app router. For other React frameworks @@ -29,9 +31,9 @@ AppKit provides seamless integration with multiple blockchain ecosystems. . It s ## Installation -**If you prefer referring to a video tutorial for this, please [click here](#video-tutorial).** +If you prefer referring to a video tutorial for this, please [click here](#video-tutorial). -**Setting up from scratch? → Try out the [AppKit CLI templates](#alternative-installation) or the [AI-assisted setup](#alternative-installation).** +Setting up from scratch? Try out the [AppKit CLI templates](#alternative-installation) or the [AI-assisted setup](#alternative-installation). ## Custom Installation diff --git a/appkit/react/core/installation.mdx b/appkit/react/core/installation.mdx index f0835dc4c..414527ed2 100644 --- a/appkit/react/core/installation.mdx +++ b/appkit/react/core/installation.mdx @@ -17,18 +17,22 @@ import BitcoinImplementation from '/snippets/appkit/react/bitcoin/about/implemen import TonImplementation from '/snippets/appkit/react/ton/about/implementation.mdx' +import TronImplementation from '/snippets/appkit/react/tron/about/implementation.mdx' + import CoreImplementation from '/snippets/appkit/react/core/about/implementation.mdx' AppKit provides seamless integration with multiple blockchain ecosystems. It supports [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, -[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON and other networks. AppKit Core with Universal Provider library, enable compatibility across any blockchain protocol. +[@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, as well as Bitcoin, TON, TRON and other networks. + +AppKit Core with [Universal Provider](https://www.npmjs.com/package/@walletconnect/universal-provider) library, enable compatibility across any blockchain protocol. Choose one of these to get started. ## Installation -**If you prefer referring to a video tutorial for this, please [click here](#video-tutorial).** +If you prefer referring to a video tutorial for this, please [click here](#video-tutorial). -**Setting up from scratch? → Try out the [AppKit CLI templates](#alternative-installation) or the [AI-assisted setup](#alternative-installation).** +Setting up from scratch? Try out the [AppKit CLI templates](#alternative-installation) or the [AI-assisted setup](#alternative-installation). ## Custom Installation @@ -177,6 +181,29 @@ pnpm add @reown/appkit @reown/appkit-adapter-ton + + + + + +```bash npm +npm install @reown/appkit @reown/appkit-adapter-tron +``` + +```bash Yarn +yarn add @reown/appkit @reown/appkit-adapter-tron +``` + +```bash Bun +bun add @reown/appkit @reown/appkit-adapter-tron +``` + +```bash pnpm +pnpm add @reown/appkit @reown/appkit-adapter-tron +``` + + + @@ -211,9 +238,13 @@ Create a new project on [Reown Dashboard](https://dashboard.reown.com) and obtai ## Implementation -### `AppKitProvider` Component +AppKit providers two different approaches on React to initialize it. + + -AppKit now provides an `AppKitProvider` React component for easy integration in React applications. This component wraps your app and provides the AppKit context to all child components. + + +Use `AppKitProvider` React component for easy integration in React applications. This component wraps your app and provides the AppKit context to all child components. ```tsx import { AppKitProvider } from '@reown/appkit/react' @@ -234,7 +265,33 @@ function App() { } ``` -### Framework Specific Implementation + + + +Use `createAppKit` method from `@reown/appkit/react` to initialize AppKit instance and call it on the root of your application with desired parameters depending on your use case. + +```tsx +import { createAppKit } from '@reown/appkit/react' + +createAppKit({ + networks: [ + /* Your networks */ + ], + adapters: [ + /* Your adapters */ + ], + ...appKitProps +}) + +function App() { + return <>{children} +} +``` + + + + +### Adapter Configuration @@ -281,6 +338,11 @@ Check the React Bitcoin example + + + + + diff --git a/appkit/vue/core/installation.mdx b/appkit/vue/core/installation.mdx index fe9287fb9..0921bdd47 100644 --- a/appkit/vue/core/installation.mdx +++ b/appkit/vue/core/installation.mdx @@ -16,9 +16,11 @@ import BitcoinImplementation from '/snippets/appkit/vue/bitcoin/about/implementa import TonImplementation from '/snippets/appkit/vue/ton/about/implementation.mdx' +import TronImplementation from '/snippets/appkit/vue/tron/about/implementation.mdx' + ## Introduction -AppKit has support for [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, Bitcoin and TON. +AppKit has support for [Wagmi](https://wagmi.sh/) and [Ethers v6](https://docs.ethers.org/v6/) on Ethereum, [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) on Solana, Bitcoin, TON and TRON. Choose one of these to get started. ## Installation @@ -165,6 +167,29 @@ pnpm add @reown/appkit @reown/appkit-adapter-ton + + + + + +```bash npm +npm install @reown/appkit @reown/appkit-adapter-tron +``` + +```bash Yarn +yarn add @reown/appkit @reown/appkit-adapter-tron +``` + +```bash Bun +bun add @reown/appkit @reown/appkit-adapter-tron +``` + +```bash pnpm +pnpm add @reown/appkit @reown/appkit-adapter-tron +``` + + + @@ -220,6 +245,11 @@ Check the Vue TON example + + + + + diff --git a/snippets/appkit/javascript/tron/about/implementation.mdx b/snippets/appkit/javascript/tron/about/implementation.mdx new file mode 100644 index 000000000..950bcdc14 --- /dev/null +++ b/snippets/appkit/javascript/tron/about/implementation.mdx @@ -0,0 +1,105 @@ +AppKit TRON is built on top of the AppKit library and provides a set of components and actions to easily connect TRON wallets with your decentralized application. + +On top of your app set up the following configuration. + +```tsx +// App.tsx +import { createAppKit } from '@reown/appkit' +import { TronAdapter } from '@reown/appkit-adapter-tron' +import { tronMainnet, tronShastaTestnet } from '@reown/appkit/networks' + +// Import wallet adapters you want to support +import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink' + +// 1. Get projectId from https://dashboard.reown.com +const projectId = 'YOUR_PROJECT_ID' + +// 2. Set the networks +const networks = [tronMainnet, tronShastaTestnet] + +// 3. Set up TRON Adapter with wallet adapters +const tronAdapter = new TronAdapter({ + walletAdapters: [ + new TronLinkAdapter({ + openUrlWhenWalletNotFound: false, + checkTimeout: 3000 + }) + ] +}) + +// 4. Create a metadata object - optional +const metadata = { + name: 'AppKit', + description: 'AppKit TRON Example', + url: 'https://example.com', // origin must match your domain & subdomain + icons: ['https://avatars.githubusercontent.com/u/179229932'] +} + +// 5. Create modal +const modal = createAppKit({ + adapters: [tronAdapter], + networks, + metadata, + projectId, + features: { + analytics: true, // Optional - defaults to your Dashboard configuration + email: false, + socials: [] + } +}) + +// 6. Trigger modal programaticaly +const openConnectModalBtn = document.getElementById('open-connect-modal') +const openNetworkModalBtn = document.getElementById('open-network-modal') + +openConnectModalBtn.addEventListener('click', () => modal.open()) +openNetworkModalBtn.addEventListener('click', () => modal.open({ view: 'Networks' })) +``` + +## Install Wallet Adapters + +TRON adapter requires you to install wallet adapters separately. This gives you control over which wallets to support and reduces bundle size. + +```bash npm +npm install @tronweb3/tronwallet-adapter-tronlink +``` + +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-tronlink +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-tronlink +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-tronlink +``` + +### Additional Wallet Adapters + +You can install additional TRON wallet adapters: + +```bash +npm install @tronweb3/tronwallet-adapter-metamask-tron +npm install @tronweb3/tronwallet-adapter-trust +npm install @tronweb3/tronwallet-adapter-okxwallet +npm install @tronweb3/tronwallet-adapter-bitkeep +npm install @tronweb3/tronwallet-adapter-binance +``` + +Then add them to the `walletAdapters` array: + +```tsx +import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink' +import { MetaMaskAdapter } from '@tronweb3/tronwallet-adapter-metamask-tron' +import { TrustAdapter } from '@tronweb3/tronwallet-adapter-trust' + +const tronAdapter = new TronAdapter({ + walletAdapters: [ + new TronLinkAdapter({ openUrlWhenWalletNotFound: false, checkTimeout: 3000 }), + new MetaMaskAdapter(), + new TrustAdapter() + ] +}) +``` diff --git a/snippets/appkit/react/tron/about/implementation.mdx b/snippets/appkit/react/tron/about/implementation.mdx new file mode 100644 index 000000000..136782099 --- /dev/null +++ b/snippets/appkit/react/tron/about/implementation.mdx @@ -0,0 +1,102 @@ +AppKit TRON provides a set of React components and hooks to easily connect TRON wallets with your application. + +On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders. + +```tsx +// App.tsx +import { createAppKit } from '@reown/appkit/react' +import { TronAdapter } from '@reown/appkit-adapter-tron' +import { tronMainnet, tronShastaTestnet } from '@reown/appkit/networks' + +// Import wallet adapters you want to support +import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink' + +// 1. Get projectId from https://dashboard.reown.com +const projectId = 'YOUR_PROJECT_ID' + +// 2. Set the networks +const networks = [tronMainnet, tronShastaTestnet] + +// 3. Set up TRON Adapter with wallet adapters +const tronAdapter = new TronAdapter({ + walletAdapters: [ + new TronLinkAdapter({ + openUrlWhenWalletNotFound: false, + checkTimeout: 3000 + }) + ] +}) + +// 4. Create a metadata object - optional +const metadata = { + name: 'AppKit', + description: 'AppKit TRON Example', + url: 'https://example.com', // origin must match your domain & subdomain + icons: ['https://avatars.githubusercontent.com/u/179229932'] +} + +// 5. Create modal +createAppKit({ + adapters: [tronAdapter], + networks, + metadata, + projectId, + features: { + analytics: true, // Optional - defaults to your Dashboard configuration + email: false, + socials: [] + } +}) + +export default function App() { + return +} +``` + +## Install Wallet Adapters + +TRON adapter requires you to install wallet adapters separately. This gives you control over which wallets to support and reduces bundle size. + +```bash npm +npm install @tronweb3/tronwallet-adapter-tronlink +``` + +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-tronlink +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-tronlink +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-tronlink +``` + +### Additional Wallet Adapters + +You can install additional TRON wallet adapters: + +```bash +npm install @tronweb3/tronwallet-adapter-metamask-tron +npm install @tronweb3/tronwallet-adapter-trust +npm install @tronweb3/tronwallet-adapter-okxwallet +npm install @tronweb3/tronwallet-adapter-bitkeep +npm install @tronweb3/tronwallet-adapter-binance +``` + +Then add them to the `walletAdapters` array: + +```tsx +import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink' +import { MetaMaskAdapter } from '@tronweb3/tronwallet-adapter-metamask-tron' +import { TrustAdapter } from '@tronweb3/tronwallet-adapter-trust' + +const tronAdapter = new TronAdapter({ + walletAdapters: [ + new TronLinkAdapter({ openUrlWhenWalletNotFound: false, checkTimeout: 3000 }), + new MetaMaskAdapter(), + new TrustAdapter() + ] +}) +``` diff --git a/snippets/appkit/vue/tron/about/implementation.mdx b/snippets/appkit/vue/tron/about/implementation.mdx new file mode 100644 index 000000000..1166a0055 --- /dev/null +++ b/snippets/appkit/vue/tron/about/implementation.mdx @@ -0,0 +1,104 @@ +AppKit TRON provides a set of Vue components and composables to easily connect TRON wallets with your application. + +On top of your app set up the following configuration, making sure that all functions are called outside any Vue component to avoid unwanted rerenders. + +In your `App.vue` file set up the following configuration. + +```tsx + + + +``` + +## Install Wallet Adapters + +TRON adapter requires you to install wallet adapters separately. This gives you control over which wallets to support and reduces bundle size. + +```bash npm +npm install @tronweb3/tronwallet-adapter-tronlink +``` + +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-tronlink +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-tronlink +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-tronlink +``` + +### Additional Wallet Adapters + +You can install additional TRON wallet adapters: + +```bash +npm install @tronweb3/tronwallet-adapter-metamask-tron +npm install @tronweb3/tronwallet-adapter-trust +npm install @tronweb3/tronwallet-adapter-okxwallet +npm install @tronweb3/tronwallet-adapter-bitkeep +npm install @tronweb3/tronwallet-adapter-binance +``` + +Then add them to the `walletAdapters` array: + +```tsx +import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink' +import { MetaMaskAdapter } from '@tronweb3/tronwallet-adapter-metamask-tron' +import { TrustAdapter } from '@tronweb3/tronwallet-adapter-trust' + +const tronAdapter = new TronAdapter({ + walletAdapters: [ + new TronLinkAdapter({ openUrlWhenWalletNotFound: false, checkTimeout: 3000 }), + new MetaMaskAdapter(), + new TrustAdapter() + ] +}) +``` From 90b1bd1e51f750da1a31cada87400f9db9d865c4 Mon Sep 17 00:00:00 2001 From: Enes Date: Tue, 17 Feb 2026 10:29:51 +0300 Subject: [PATCH 2/2] docs: improve TRON wallet adapter installation instructions - Use tabs for wallet adapter installation (TronLink, MetaMask, Trust, OKX, BitKeep, Binance) - Add link to official wallet adapter documentation (walletadapter.org) - Improve 'Using Multiple Wallet Adapters' section with clearer instructions - Replace horizontal code blocks with tabbed interface for better UX - Add Note callout with reference to complete wallet adapter list --- .../javascript/tron/about/implementation.mdx | 131 +++++++++++++++++- .../react/tron/about/implementation.mdx | 131 +++++++++++++++++- .../appkit/vue/tron/about/implementation.mdx | 131 +++++++++++++++++- 3 files changed, 375 insertions(+), 18 deletions(-) diff --git a/snippets/appkit/javascript/tron/about/implementation.mdx b/snippets/appkit/javascript/tron/about/implementation.mdx index 950bcdc14..1d0dfc5bf 100644 --- a/snippets/appkit/javascript/tron/about/implementation.mdx +++ b/snippets/appkit/javascript/tron/about/implementation.mdx @@ -60,6 +60,10 @@ openNetworkModalBtn.addEventListener('click', () => modal.open({ view: 'Networks TRON adapter requires you to install wallet adapters separately. This gives you control over which wallets to support and reduces bundle size. + + + + ```bash npm npm install @tronweb3/tronwallet-adapter-tronlink ``` @@ -76,30 +80,145 @@ bun add @tronweb3/tronwallet-adapter-tronlink pnpm add @tronweb3/tronwallet-adapter-tronlink ``` -### Additional Wallet Adapters + + -You can install additional TRON wallet adapters: + + -```bash +```bash npm npm install @tronweb3/tronwallet-adapter-metamask-tron +``` + +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-metamask-tron +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-metamask-tron +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-metamask-tron +``` + + + + + + + +```bash npm npm install @tronweb3/tronwallet-adapter-trust +``` + +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-trust +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-trust +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-trust +``` + + + + + + + +```bash npm npm install @tronweb3/tronwallet-adapter-okxwallet +``` + +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-okxwallet +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-okxwallet +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-okxwallet +``` + + + + + + + +```bash npm npm install @tronweb3/tronwallet-adapter-bitkeep +``` + +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-bitkeep +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-bitkeep +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-bitkeep +``` + + + + + + + +```bash npm npm install @tronweb3/tronwallet-adapter-binance ``` -Then add them to the `walletAdapters` array: +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-binance +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-binance +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-binance +``` + + + + + + +For a complete list of available TRON wallet adapters, visit the [official wallet adapter documentation](https://walletadapter.org/docs/guide/wallet-reference.html). + + +### Using Multiple Wallet Adapters + +After installing your desired wallet adapters, import and add them to the `walletAdapters` array when creating the TRON adapter: ```tsx import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink' import { MetaMaskAdapter } from '@tronweb3/tronwallet-adapter-metamask-tron' import { TrustAdapter } from '@tronweb3/tronwallet-adapter-trust' +import { OkxWalletAdapter } from '@tronweb3/tronwallet-adapter-okxwallet' const tronAdapter = new TronAdapter({ walletAdapters: [ - new TronLinkAdapter({ openUrlWhenWalletNotFound: false, checkTimeout: 3000 }), + new TronLinkAdapter({ + openUrlWhenWalletNotFound: false, + checkTimeout: 3000 + }), new MetaMaskAdapter(), - new TrustAdapter() + new TrustAdapter(), + new OkxWalletAdapter({ + openUrlWhenWalletNotFound: false + }) ] }) ``` diff --git a/snippets/appkit/react/tron/about/implementation.mdx b/snippets/appkit/react/tron/about/implementation.mdx index 136782099..43601abe6 100644 --- a/snippets/appkit/react/tron/about/implementation.mdx +++ b/snippets/appkit/react/tron/about/implementation.mdx @@ -57,6 +57,10 @@ export default function App() { TRON adapter requires you to install wallet adapters separately. This gives you control over which wallets to support and reduces bundle size. + + + + ```bash npm npm install @tronweb3/tronwallet-adapter-tronlink ``` @@ -73,30 +77,145 @@ bun add @tronweb3/tronwallet-adapter-tronlink pnpm add @tronweb3/tronwallet-adapter-tronlink ``` -### Additional Wallet Adapters + + -You can install additional TRON wallet adapters: + + -```bash +```bash npm npm install @tronweb3/tronwallet-adapter-metamask-tron +``` + +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-metamask-tron +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-metamask-tron +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-metamask-tron +``` + + + + + + + +```bash npm npm install @tronweb3/tronwallet-adapter-trust +``` + +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-trust +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-trust +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-trust +``` + + + + + + + +```bash npm npm install @tronweb3/tronwallet-adapter-okxwallet +``` + +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-okxwallet +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-okxwallet +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-okxwallet +``` + + + + + + + +```bash npm npm install @tronweb3/tronwallet-adapter-bitkeep +``` + +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-bitkeep +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-bitkeep +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-bitkeep +``` + + + + + + + +```bash npm npm install @tronweb3/tronwallet-adapter-binance ``` -Then add them to the `walletAdapters` array: +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-binance +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-binance +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-binance +``` + + + + + + +For a complete list of available TRON wallet adapters, visit the [official wallet adapter documentation](https://walletadapter.org/docs/guide/wallet-reference.html). + + +### Using Multiple Wallet Adapters + +After installing your desired wallet adapters, import and add them to the `walletAdapters` array when creating the TRON adapter: ```tsx import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink' import { MetaMaskAdapter } from '@tronweb3/tronwallet-adapter-metamask-tron' import { TrustAdapter } from '@tronweb3/tronwallet-adapter-trust' +import { OkxWalletAdapter } from '@tronweb3/tronwallet-adapter-okxwallet' const tronAdapter = new TronAdapter({ walletAdapters: [ - new TronLinkAdapter({ openUrlWhenWalletNotFound: false, checkTimeout: 3000 }), + new TronLinkAdapter({ + openUrlWhenWalletNotFound: false, + checkTimeout: 3000 + }), new MetaMaskAdapter(), - new TrustAdapter() + new TrustAdapter(), + new OkxWalletAdapter({ + openUrlWhenWalletNotFound: false + }) ] }) ``` diff --git a/snippets/appkit/vue/tron/about/implementation.mdx b/snippets/appkit/vue/tron/about/implementation.mdx index 1166a0055..be8430486 100644 --- a/snippets/appkit/vue/tron/about/implementation.mdx +++ b/snippets/appkit/vue/tron/about/implementation.mdx @@ -59,6 +59,10 @@ createAppKit({ TRON adapter requires you to install wallet adapters separately. This gives you control over which wallets to support and reduces bundle size. + + + + ```bash npm npm install @tronweb3/tronwallet-adapter-tronlink ``` @@ -75,30 +79,145 @@ bun add @tronweb3/tronwallet-adapter-tronlink pnpm add @tronweb3/tronwallet-adapter-tronlink ``` -### Additional Wallet Adapters + + -You can install additional TRON wallet adapters: + + -```bash +```bash npm npm install @tronweb3/tronwallet-adapter-metamask-tron +``` + +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-metamask-tron +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-metamask-tron +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-metamask-tron +``` + + + + + + + +```bash npm npm install @tronweb3/tronwallet-adapter-trust +``` + +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-trust +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-trust +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-trust +``` + + + + + + + +```bash npm npm install @tronweb3/tronwallet-adapter-okxwallet +``` + +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-okxwallet +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-okxwallet +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-okxwallet +``` + + + + + + + +```bash npm npm install @tronweb3/tronwallet-adapter-bitkeep +``` + +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-bitkeep +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-bitkeep +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-bitkeep +``` + + + + + + + +```bash npm npm install @tronweb3/tronwallet-adapter-binance ``` -Then add them to the `walletAdapters` array: +```bash Yarn +yarn add @tronweb3/tronwallet-adapter-binance +``` + +```bash Bun +bun add @tronweb3/tronwallet-adapter-binance +``` + +```bash pnpm +pnpm add @tronweb3/tronwallet-adapter-binance +``` + + + + + + +For a complete list of available TRON wallet adapters, visit the [official wallet adapter documentation](https://walletadapter.org/docs/guide/wallet-reference.html). + + +### Using Multiple Wallet Adapters + +After installing your desired wallet adapters, import and add them to the `walletAdapters` array when creating the TRON adapter: ```tsx import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink' import { MetaMaskAdapter } from '@tronweb3/tronwallet-adapter-metamask-tron' import { TrustAdapter } from '@tronweb3/tronwallet-adapter-trust' +import { OkxWalletAdapter } from '@tronweb3/tronwallet-adapter-okxwallet' const tronAdapter = new TronAdapter({ walletAdapters: [ - new TronLinkAdapter({ openUrlWhenWalletNotFound: false, checkTimeout: 3000 }), + new TronLinkAdapter({ + openUrlWhenWalletNotFound: false, + checkTimeout: 3000 + }), new MetaMaskAdapter(), - new TrustAdapter() + new TrustAdapter(), + new OkxWalletAdapter({ + openUrlWhenWalletNotFound: false + }) ] }) ```