Practical overview
When it fits
Use Foton when a TypeScript application needs a common toolkit for TON wallet and blockchain interactions, or when following its documented React Counter dApp tutorial.
Who it is for
- TypeScript developers building dApps on TON.
- Developers integrating TON wallet connection, transactions, blockchain queries or smart-contract workflows into an application.
- Developers exploring a React Counter dApp through Foton's tutorial.
Documented uses
- Connect a TON wallet to an application.
- Send transactions and query the TON blockchain.
- Deploy and interact with TON smart contracts.
- Use Blueprint and TON Connect integrations when working on code migrations.
Requirements & limits
The repository is public and the source code is licensed under MIT.
- Foton combines several TON wallet and blockchain tasks behind a common API.
- Blueprint and TON Connect integrations are documented for code migrations.
- Type-safe interfaces include autocomplete for contract methods and returns.
- The project warns that it is not ready for production use and that releases may contain breaking changes.
Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.
Set up a React Counter dApp with Foton
Prepare a Vite React TypeScript app, compile a Tact counter contract, and configure Foton clients for TON testnet.
Before you start
- Node.js version 18 or higher.
- A Vite app using the React framework and TypeScript + SWC preset.
- The tutorial’s dependencies: vite-plugin-node-polyfills, @tact-lang/compiler, @fotonjs/core, and @ton/core.
Steps
Create a Vite app and select React with the TypeScript + SWC preset; install vite-plugin-node-polyfills and configure Vite to include the buffer polyfill.
Write the Counter contract in contracts/counter.tact, install @tact-lang/compiler, configure tact.config.json and a compile script, then compile it and export the generated Counter class from contracts/index.ts.
Install @fotonjs/core and @ton/core, then add a TON Connect manifest under public/tonconnect-manifest.json. The manifest must be accessible at its URL; the tutorial provides a Foton-hosted manifest for apps not yet deployed.
Configure wallet, public, and contract clients in src/ton-clients.ts for testnet, using the compiled Counter class and the manifest URL.
Expected outcome
A React app scaffold with a compiled Counter contract and Foton clients configured for wallet connection, blockchain reads, and contract operations; the tutorial continues with wallet and contract hooks.
Guide limitations
- The project is under active development and releases may introduce breaking changes; the documentation says it is not ready for production use.
- The tutorial’s manifest requirement is accessibility by URL; a deployed app can use its own manifest, while an app not yet deployed can use the provided Foton manifest.
- The tutorial specifies testnet for development; it does not establish production deployment steps.
Compare options for Wallet connections
These projects document a common task and share a project role. This is a source-based comparison, not an execution benchmark or a guarantee of interchangeability.
| Project | Documented purpose | Platform | Access and requirements |
|---|---|---|---|
| Foton | Connect a TON wallet to an application. | Web | The repository is public and the source code is licensed under MIT. |
| Sample Project Gradle | Connect a Java web3j application to an Ethereum node. | CLI | |
| Eth Nextjs Boilerplate | Create a dApp frontend with wallet connection and an example transaction flow. | CLI, Web |
Sources & review
Source record details
- Source availability
- Active
- Sources checked
- 14 October 2026
- Original website title
- VanishMax/foton · Official homepage title · retained in its source language