Ton链 Telegram小程序
Telegram 小程序(TMA)是在 Telegram 中运行的 Web 应用,使用 Web 技术构建——HTML、CSS 和 JavaScript。
Ton(全称:The Open Network)是一个由多个组成部分构成的去中心化和开放的互联网平台。这些组成部分包括:TON 区块链、TON DNS、TON 存储和 TON 网站。TON 区块链是 TON 底层基础设施的核心,由 Telegram 团队最初设计和社区进行开发。
在 Telegram 上构建基于 Ton 链的去中心化的小程序应用,即可拥有潜在的大量 Telegram 用户基础。
核心步骤
- 在 Telegram 上面创建机器人,并在机器人下面创建小程序,创建过程中按照提示操作即可
- 使用 Web 技术和 Telegram 提供的 SDK 编写小程序前端,构建且部署,得到一个链接,过程和开发部署一般 Web 网站一样
- 将创建的小程序和部署的前端链接绑定起来,就是修改小程序的
Web App URL
为上一步部署好的地址 - 然后在 Telegram 客户端里面打开小程序,可在小程序中连接 Ton 链,开发去中心化类别的应用
打开BotFather,并使用/newbot
命令,再使用/newapp
命令,官方教程
Ton 钱包
Ton Connect 协议有许多的 Ton 链的钱包提供支持,只要钱包支持这个协议,使用此协议的小程序就可以连接到这个 Ton 链钱包。连接钱包后,能获取到钱包的信息以及账户信息,还可以签名并发送交易到 Ton 链上,实现与区块链交互,构建去中心化类别的小程序应用。小程序集成步骤(其它 Web 前端也是如此)如下:
- 安装 SDK:yarn add @tonconnect/ui
- 初始化:准备一个 manifest.json 文件,配置到项目的根目录,例如 https://myapp.com/tonconnect-manifest.json
- 在应用程序中导入 SDK,创建 @tonconnect/ui 的连接器实体对象
- 接下来就可以使用此对象提供的接口发送交易,进行 Ton 转账等区块链操作
STON.fi
STON.fi 是一个基于 TON 区块链建立的去中心化自动做市商 (AMM),提供几乎零费用、低滑点、极其简单的界面以及支持众多的 TON 钱包连接。并且提供了 SDK,前端可轻松集成后进行代币的兑换。它提供了三种兑换方式(jetton 是 Ton 链的代币,类似于以太坊的 ERC20):
- TON => jetton
- jetton => jetton
- jetton => Ton
下面是使用 Ton 币购买 jetton 代币的示例,更多细节参考 官方文档
import { TonClient, toNano } from "@ton/ton";
import { DEX, pTON } from "@ston-fi/sdk";
const client = new TonClient({
endpoint: "https://toncenter.com/api/v2/jsonRPC",
});
const router = client.open(new DEX.v1.Router());
// swap 1 TON to STON but not less than 1 nano STON
const txParams = await router.getSwapTonToJettonTxParams({
userWalletAddress: "", // ! replace with your address
proxyTon: new pTON.v1(),
offerAmount: toNano("1"),
askJettonAddress: "EQA2kCVNwVsil2EM2mB0SkXytxCqQjS4mttjDpnXmwG9T6bO", // STON
minAskAmount: "1",
queryId: 12345,
});
除了智能合约和前端 SDK,它还提供 REST API 来简化与 STON.fi 协议的交互。其 API 整合来自 STON.fi 合约的数据,并汇总有关池、jetton 以及整个 STON.fi 协议等的数据。比如下面的接口可进行资产查询:
https://api.ston.fi/v1/assets/search?search_string=Ton
更多接口查看 swagger 文档
小程序模板
可克隆下面模板,快速进行小程序的开发
- React.js https://github.com/Telegram-Mini-Apps/reactjs-template
- Next.js https://github.com/Telegram-Mini-Apps/nextjs-template
- Solid.js https://github.com/Telegram-Mini-Apps/solidjs-js-template
参考文档