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..1d0dfc5bf --- /dev/null +++ b/snippets/appkit/javascript/tron/about/implementation.mdx @@ -0,0 +1,224 @@ +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 +``` + + + + + + + +```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 +``` + +```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 MetaMaskAdapter(), + new TrustAdapter(), + new OkxWalletAdapter({ + openUrlWhenWalletNotFound: false + }) + ] +}) +``` diff --git a/snippets/appkit/react/tron/about/implementation.mdx b/snippets/appkit/react/tron/about/implementation.mdx new file mode 100644 index 000000000..43601abe6 --- /dev/null +++ b/snippets/appkit/react/tron/about/implementation.mdx @@ -0,0 +1,221 @@ +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 +``` + + + + + + + +```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 +``` + +```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 MetaMaskAdapter(), + new TrustAdapter(), + new OkxWalletAdapter({ + openUrlWhenWalletNotFound: false + }) + ] +}) +``` diff --git a/snippets/appkit/vue/tron/about/implementation.mdx b/snippets/appkit/vue/tron/about/implementation.mdx new file mode 100644 index 000000000..be8430486 --- /dev/null +++ b/snippets/appkit/vue/tron/about/implementation.mdx @@ -0,0 +1,223 @@ +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 +``` + + + + + + + +```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 +``` + +```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 MetaMaskAdapter(), + new TrustAdapter(), + new OkxWalletAdapter({ + openUrlWhenWalletNotFound: false + }) + ] +}) +```