From 46d02629f2ee3b91fac02f2eb3c1e6763d95117d Mon Sep 17 00:00:00 2001 From: Enes Date: Mon, 17 Nov 2025 21:30:49 +0300 Subject: [PATCH 1/2] feat: add ton adapter docs, refactor some sections and components --- appkit/javascript/core/installation.mdx | 223 ++++++++++----- appkit/next/core/installation.mdx | 224 +++++++++------ appkit/nuxt/core/installation.mdx | 189 +++++++------ appkit/react-native/core/installation.mdx | 256 ++++++++++-------- appkit/react/core/installation.mdx | 224 +++++++++------ appkit/svelte/core/installation.mdx | 109 +++++--- appkit/vue/core/installation.mdx | 208 +++++++++----- .../javascript/ton/about/implementation.mdx | 50 ++++ .../javascript/ton/about/triggermodal.mdx | 19 ++ .../appkit/next/ton/about/implementation.mdx | 47 ++++ .../appkit/next/ton/about/triggermodal.mdx | 11 + .../next/wagmi/about/implementation.mdx | 11 +- .../appkit/nuxt/ton/about/implementation.mdx | 66 +++++ .../appkit/nuxt/ton/about/triggermodal.mdx | 13 + .../appkit/react/ton/about/implementation.mdx | 47 ++++ .../appkit/react/ton/about/triggermodal.mdx | 11 + .../svelte/ton/about/implementation.mdx | 51 ++++ .../appkit/svelte/ton/about/triggermodal.mdx | 20 ++ .../appkit/vue/ton/about/implementation.mdx | 49 ++++ .../appkit/vue/ton/about/triggermodal.mdx | 11 + snippets/cloud-banner.mdx | 15 +- 21 files changed, 1305 insertions(+), 549 deletions(-) create mode 100644 snippets/appkit/javascript/ton/about/implementation.mdx create mode 100644 snippets/appkit/javascript/ton/about/triggermodal.mdx create mode 100644 snippets/appkit/next/ton/about/implementation.mdx create mode 100644 snippets/appkit/next/ton/about/triggermodal.mdx create mode 100644 snippets/appkit/nuxt/ton/about/implementation.mdx create mode 100644 snippets/appkit/nuxt/ton/about/triggermodal.mdx create mode 100644 snippets/appkit/react/ton/about/implementation.mdx create mode 100644 snippets/appkit/react/ton/about/triggermodal.mdx create mode 100644 snippets/appkit/svelte/ton/about/implementation.mdx create mode 100644 snippets/appkit/svelte/ton/about/triggermodal.mdx create mode 100644 snippets/appkit/vue/ton/about/implementation.mdx create mode 100644 snippets/appkit/vue/ton/about/triggermodal.mdx diff --git a/appkit/javascript/core/installation.mdx b/appkit/javascript/core/installation.mdx index ca03a0eb0..29f823f53 100644 --- a/appkit/javascript/core/installation.mdx +++ b/appkit/javascript/core/installation.mdx @@ -2,33 +2,29 @@ title: Installation --- -import CloudBanner from "/snippets/cloud-banner.mdx"; +import CloudBanner from '/snippets/cloud-banner.mdx' -import WagmiImplementation from "/snippets/appkit/javascript/wagmi/about/implementation.mdx"; -import WagmiModal from "/snippets/appkit/javascript/wagmi/about/triggermodal.mdx"; +import WagmiImplementation from '/snippets/appkit/javascript/wagmi/about/implementation.mdx' -import Ethers5Implementation from "/snippets/appkit/javascript/ethers5/implementation.mdx"; +import Ethers5Implementation from '/snippets/appkit/javascript/ethers5/implementation.mdx' -import EthersImplementation from "/snippets/appkit/javascript/ethers/about/implementation.mdx"; -import EthersModal from "/snippets/appkit/javascript/ethers/about/triggermodal.mdx"; +import EthersImplementation from '/snippets/appkit/javascript/ethers/about/implementation.mdx' -import SolanaImplementation from "/snippets/appkit/javascript/solana/about/implementation.mdx"; -import SolanaModal from "/snippets/appkit/javascript/solana/about/triggermodal.mdx"; -import SolanaPrograms from "/snippets/appkit/javascript/solana/about/programs.mdx"; +import SolanaImplementation from '/snippets/appkit/javascript/solana/about/implementation.mdx' +import SolanaPrograms from '/snippets/appkit/javascript/solana/about/programs.mdx' -import BitcoinImplementation from "/snippets/appkit/javascript/bitcoin/about/implementation.mdx"; -import BitcoinModal from "/snippets/appkit/javascript/bitcoin/about/triggermodal.mdx"; +import BitcoinImplementation from '/snippets/appkit/javascript/bitcoin/about/implementation.mdx' -import CoreImplementation from "/snippets/appkit/javascript/core/about/implementation.mdx"; -import CoreModal from "/snippets/appkit/javascript/core/about/triggermodal.mdx"; +import TonImplementation from '/snippets/appkit/javascript/ton/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 and other networks. AppKit Core with Universal Provider library, enable compatibility across any blockchain protocol. +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. - We recommend using - [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to get + We recommend using [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to get started with AppKit JavaScript. @@ -153,6 +149,29 @@ pnpm add @reown/appkit @reown/appkit-adapter-bitcoin + + + + + +```bash npm +npm install @reown/appkit @reown/appkit-adapter-ton +``` + +```bash Yarn +yarn add @reown/appkit @reown/appkit-adapter-ton +``` + +```bash Bun +bun add @reown/appkit @reown/appkit-adapter-ton +``` + +```bash pnpm +pnpm add @reown/appkit @reown/appkit-adapter-ton +``` + + + @@ -224,6 +243,14 @@ Check the JavaScript Bitcoin example + + + +Check the JavaScript TON example + + + + @@ -238,34 +265,81 @@ Check the JavaScript AppKit Core example for Sui and Stacks ## Trigger the modal - - - + - - +To open AppKit you can use our [**web component**](/appkit/javascript/core/components) or build your own button with AppKit [**actions**](/appkit/javascript/core/actions#open-and-close-the-modal). - + - - +```tsx Components.html + + + + + HTML AppKit Example + + + + + + +``` - +You can trigger the modal by calling the `open` function from the modal instance. - - +```js JSFunctions.js +const modal = createAppKit({ + adapters: [wagmiAdapter], + networks: [mainnet, arbitrum], + projectId +}) - +modal.open() - - +// You can also select the modal's view when calling the open function +modal.open({ view: 'Account' }) +modal.open({ view: 'Connect' }) +modal.open({ view: 'Networks' }) +``` - + - + - +To open AppKit Core you need to call the `connect` function from the Universal Connector. + +```tsx + + +
+ + +
+``` @@ -294,6 +368,7 @@ bun a @wagmi/core ```bash pnpm pnpm add @wagmi/core ``` + [Wagmi actions](https://wagmi.sh/core/api/actions/readContract) can help us interact with wallets and smart contracts: @@ -301,17 +376,17 @@ pnpm add @wagmi/core For this use case, we need to import the `wagmiConfig`from our AppKit WagmiAdapter configuration. ```tsx -import { readContract } from "@wagmi/core"; -import { USDTAbi } from "../abi/USDTAbi"; +import { readContract } from '@wagmi/core' +import { USDTAbi } from '../abi/USDTAbi' -const USDTAddress = "0x..."; +const USDTAddress = '0x...' const data = readContract(wagmiConfig, { address: USDTAddress, abi: USDTAbi, - functionName: "totalSupply", - args: [], -}); + functionName: 'totalSupply', + args: [] +}) ``` Read more about Wagmi actions for smart contract interaction [here](https://wagmi.sh/core/actions/readContract). @@ -322,29 +397,29 @@ Read more about Wagmi actions for smart contract interaction [here](https://wagm [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts: ```tsx -import { BrowserProvider, Contract, parseEther } from "ethers"; +import { BrowserProvider, Contract, parseEther } from 'ethers' -const provider = await modal.subscribeProviders((state) => { - return state["eip155"]; -}); +const provider = await modal.subscribeProviders(state => { + return state['eip155'] +}) -const addressFrom = await modal.subscribeAccount((state) => { - return state; -}); +const addressFrom = await modal.subscribeAccount(state => { + return state +}) -if (!provider) throw Error("No provider found"); -if (!addressFrom) throw Error("No address found"); +if (!provider) throw Error('No provider found') +if (!addressFrom) throw Error('No address found') function sendTransaction() { const tx = { from: addressFrom, - to: "0x...", // any address - value: parseEther("0.0001"), - }; - const ethersProvider = new BrowserProvider(provider); - const signer = await ethersProvider.getSigner(); - const tx = await signer.sendTransaction(tx); - console.log("transaction:", tx); + to: '0x...', // any address + value: parseEther('0.0001') + } + const ethersProvider = new BrowserProvider(provider) + const signer = await ethersProvider.getSigner() + const tx = await signer.sendTransaction(tx) + console.log('transaction:', tx) } ``` @@ -362,33 +437,35 @@ If you are starting from scratch, you can use the following methods to set up yo If you're using Cursor IDE (or another AI based IDE) to build a project with Reown AppKit, Reown provides a `.mdc` file that enhances your development experience. The `reown-appkit.mdc` [file here](https://github.com/reown-com/reown-docs/blob/main/reown-appkit.mdc) contains Cursor-specific rules and type hints for Reown AppKit. - To use it in your project: +To use it in your project: + +1. Copy the `reown-appkit.mdc` file from this repository +2. Create a `.cursor/rules` folder in your project's root directory (if it doesn't exist) +3. Place the `.mdc` file in your project's `.cursor/rules` folder - 1. Copy the `reown-appkit.mdc` file from this repository - 2. Create a `.cursor/rules` folder in your project's root directory (if it doesn't exist) - 3. Place the `.mdc` file in your project's `.cursor/rules` folder +For more info, refer to [Cursor's documentation](https://docs.cursor.com/context/rules#project-rules). - For more info, refer to [Cursor's documentation](https://docs.cursor.com/context/rules#project-rules). Reown offers a dedicated CLI to set up a minimal version of AppKit in the easiest and quickest way possible. - To do this, please run the command below. +To do this, please run the command below. + +```bash +npx @reown/appkit-cli +``` - ```bash - npx @reown/appkit-cli - ``` +After running the command, you will be prompted to confirm the installation of the CLI. Upon your confirmation, the CLI will request the following details: - After running the command, you will be prompted to confirm the installation of the CLI. Upon your confirmation, the CLI will request the following details: +1. **Project Name**: Enter the name for your project. +2. **Framework**: Select your preferred framework or library. Currently, you have three options: React, Next.js, and Vue. +3. **Network-Specific libraries**: Choose whether you want to install Wagmi, Ethers, Solana, or Multichain (EVM + Solana). - 1. **Project Name**: Enter the name for your project. - 2. **Framework**: Select your preferred framework or library. Currently, you have three options: React, Next.js, and Vue. - 3. **Network-Specific libraries**: Choose whether you want to install Wagmi, Ethers, Solana, or Multichain (EVM + Solana). +After providing the project name and selecting your preferences, the CLI will install a minimal example of AppKit with your preferred blockchain library. The example will be pre-configured with a `projectId` that will only work on `localhost`. - After providing the project name and selecting your preferences, the CLI will install a minimal example of AppKit with your preferred blockchain library. The example will be pre-configured with a `projectId` that will only work on `localhost`. +To fully configure your project, please obtain a `projectId` from the Reown Dashboard and update your project accordingly. - To fully configure your project, please obtain a `projectId` from the Reown Dashboard and update your project accordingly. +**Refer to [this section](#cloud-configuration) for more information.** - **Refer to [this section](#cloud-configuration) for more information.** - \ No newline at end of file + diff --git a/appkit/next/core/installation.mdx b/appkit/next/core/installation.mdx index fbacc9dc4..8103208c2 100644 --- a/appkit/next/core/installation.mdx +++ b/appkit/next/core/installation.mdx @@ -2,34 +2,29 @@ title: Installation --- -import CloudBanner from "/snippets/cloud-banner.mdx"; +import CloudBanner from '/snippets/cloud-banner.mdx' -import WagmiImplementation from "/snippets/appkit/next/wagmi/about/implementation.mdx"; -import WagmiModal from "/snippets/appkit/next/wagmi/about/triggermodal.mdx"; +import WagmiImplementation from '/snippets/appkit/next/wagmi/about/implementation.mdx' -import Ethers5Implementation from "/snippets/appkit/next/ethers5/implementation.mdx"; -import Ethers5Modal from "/snippets/appkit/next/ethers5/triggermodal.mdx"; +import Ethers5Implementation from '/snippets/appkit/next/ethers5/implementation.mdx' -import EthersImplementation from "/snippets/appkit/next/ethers/about/implementation.mdx"; -import EthersModal from "/snippets/appkit/next/ethers/about/triggermodal.mdx"; +import EthersImplementation from '/snippets/appkit/next/ethers/about/implementation.mdx' -import SolanaImplementation from "/snippets/appkit/next/solana/about/implementation.mdx"; -import SolanaModal from "/snippets/appkit/next/solana/about/triggermodal.mdx"; -import SolanaPrograms from "/snippets/appkit/next/solana/about/programs.mdx"; +import SolanaImplementation from '/snippets/appkit/next/solana/about/implementation.mdx' +import SolanaPrograms from '/snippets/appkit/next/solana/about/programs.mdx' -import BitcoinImplementation from "/snippets/appkit/next/bitcoin/about/implementation.mdx"; -import BitcoinModal from "/snippets/appkit/next/bitcoin/about/triggermodal.mdx"; +import BitcoinImplementation from '/snippets/appkit/next/bitcoin/about/implementation.mdx' -import CoreImplementation from "/snippets/appkit/react/core/about/implementation.mdx"; -import CoreModal from "/snippets/appkit/react/core/about/triggermodal.mdx"; +import TonImplementation from '/snippets/appkit/next/ton/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 and other networks. AppKit Core with Universal Provider library, enable compatibility across any blockchain protocol. +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. - These steps are specific to [Next.js](https://nextjs.org/) app router. For - other React frameworks read the [React - documentation](../../react/core/installation). + These steps are specific to [Next.js](https://nextjs.org/) app router. For other React frameworks + read the [React documentation](../../react/core/installation). ## Installation @@ -155,6 +150,29 @@ pnpm add @reown/appkit @reown/appkit-adapter-bitcoin + + + + + +```bash npm +npm install @reown/appkit @reown/appkit-adapter-ton +``` + +```bash Yarn +yarn add @reown/appkit @reown/appkit-adapter-ton +``` + +```bash Bun +bun add @reown/appkit @reown/appkit-adapter-ton +``` + +```bash pnpm +pnpm add @reown/appkit @reown/appkit-adapter-ton +``` + + + @@ -225,6 +243,13 @@ Check the Next Bitcoin example + + + +Check the Next TON example + + + @@ -236,34 +261,71 @@ Check the Next Bitcoin example ## Trigger the modal - + - +To open AppKit you can use our [**React components**](/appkit/react/core/components) or build your own button with AppKit [**hooks**](/appkit/react/core/hooks#useAppKit). - - + - +```tsx AppKitButton.tsx +import { AppKitButton } from '@reown/appkit/react' - - +export default function ConnectButton() { + return +} +``` - +```tsx useAppKit.tsx +import { useAppKit } from '@reown/appkit/react' - - +export default function ConnectButton() { + const { open } = useAppKit() - + return ( + <> + + + + ) +} +``` + + - + - +To open AppKit Core you need to call the `connect` function from the Universal Connector. - - +```tsx +// get the session from the universal connector +const handleConnect = async () => { + if (!universalConnector) { + return + } - + const { session: providerSession } = await universalConnector.connect() + setSession(providerSession) +} + +// disconnect the universal connector +const handleDisconnect = async () => { + if (!universalConnector) { + return + } + await universalConnector.disconnect() + setSession(null) +} + +... + +return ( +
+ + +
+) +``` @@ -276,17 +338,17 @@ Check the Next Bitcoin example [Wagmi hooks](https://wagmi.sh/react/api/hooks/useReadContract) can help us interact with wallets and smart contracts: ```tsx -import { useReadContract } from "wagmi"; -import { USDTAbi } from "../abi/USDTAbi"; +import { useReadContract } from 'wagmi' +import { USDTAbi } from '../abi/USDTAbi' -const USDTAddress = "0x..."; +const USDTAddress = '0x...' function App() { const result = useReadContract({ abi: USDTAbi, address: USDTAddress, - functionName: "totalSupply", - }); + functionName: 'totalSupply' + }) } ``` @@ -298,38 +360,38 @@ Read more about Wagmi hooks for smart contract interaction [here](https://wagmi. [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts: ```tsx -import { useAppKitProvider, useAppKitAccount } from "@reown/appkit/react"; -import { BrowserProvider, Contract, formatUnits } from "ethers"; +import { useAppKitProvider, useAppKitAccount } from '@reown/appkit/react' +import { BrowserProvider, Contract, formatUnits } from 'ethers' -const USDTAddress = "0x617f3112bf5397D0467D315cC709EF968D9ba546"; +const USDTAddress = '0x617f3112bf5397D0467D315cC709EF968D9ba546' // The ERC-20 Contract ABI, which is a common contract interface // for tokens (this is the Human-Readable ABI format) const USDTAbi = [ - "function name() view returns (string)", - "function symbol() view returns (string)", - "function balanceOf(address) view returns (uint)", - "function transfer(address to, uint amount)", - "event Transfer(address indexed from, address indexed to, uint amount)", -]; + 'function name() view returns (string)', + 'function symbol() view returns (string)', + 'function balanceOf(address) view returns (uint)', + 'function transfer(address to, uint amount)', + 'event Transfer(address indexed from, address indexed to, uint amount)' +] function Components() { - const { address, caipAddress, isConnected } = useAppKitAccount(); - const { walletProvider } = useAppKitProvider("eip155"); + const { address, caipAddress, isConnected } = useAppKitAccount() + const { walletProvider } = useAppKitProvider('eip155') async function getBalance() { - if (!isConnected) throw Error("User disconnected"); + if (!isConnected) throw Error('User disconnected') - const ethersProvider = new BrowserProvider(walletProvider); - const signer = await ethersProvider.getSigner(); + const ethersProvider = new BrowserProvider(walletProvider) + const signer = await ethersProvider.getSigner() // The Contract object - const USDTContract = new Contract(USDTAddress, USDTAbi, signer); - const USDTBalance = await USDTContract.balanceOf(address); + const USDTContract = new Contract(USDTAddress, USDTAbi, signer) + const USDTBalance = await USDTContract.balanceOf(address) - console.log(formatUnits(USDTBalance, 18)); + console.log(formatUnits(USDTBalance, 18)) } - return ; + return } ``` @@ -348,11 +410,11 @@ Next.js relies on [SSR](https://nextjs.org/docs/pages/building-your-application/ ```ts // Path: next.config.js const nextConfig = { - webpack: (config) => { - config.externals.push("pino-pretty", "lokijs", "encoding"); - return config; - }, -}; + webpack: config => { + config.externals.push('pino-pretty', 'lokijs', 'encoding') + return config + } +} ``` - [Learn more about SSR with Wagmi](https://wagmi.sh/react/guides/ssr) @@ -360,7 +422,7 @@ const nextConfig = { ## Video Tutorial
-