Ton链 Telegram小程序

admin
admin 2024年11月24日
  • 在其它设备中阅读本文章

Telegram 小程序(TMA)是在 Telegram 中运行的 Web 应用,使用 Web 技术构建——HTML、CSS 和 JavaScript。

Ton(全称:The Open Network)是一个由多个组成部分构成的去中心化和开放的互联网平台。这些组成部分包括:TON 区块链、TON DNS、TON 存储和 TON 网站。TON 区块链是 TON 底层基础设施的核心,由 Telegram 团队最初设计和社区进行开发。

在 Telegram 上构建基于 Ton 链的去中心化的小程序应用,即可拥有潜在的大量 Telegram 用户基础。

核心步骤

  1. 在 Telegram 上面创建机器人,并在机器人下面创建小程序,创建过程中按照提示操作即可
  2. 使用 Web 技术和 Telegram 提供的 SDK 编写小程序前端,构建且部署,得到一个链接,过程和开发部署一般 Web 网站一样
  3. 将创建的小程序和部署的前端链接绑定起来,就是修改小程序的Web App URL为上一步部署好的地址
  4. 然后在 Telegram 客户端里面打开小程序,可在小程序中连接 Ton 链,开发去中心化类别的应用

打开BotFather,并使用/newbot命令,再使用/newapp命令,官方教程

Ton 钱包

Ton Connect 协议有许多的 Ton 链的钱包提供支持,只要钱包支持这个协议,使用此协议的小程序就可以连接到这个 Ton 链钱包。连接钱包后,能获取到钱包的信息以及账户信息,还可以签名并发送交易到 Ton 链上,实现与区块链交互,构建去中心化类别的小程序应用。小程序集成步骤(其它 Web 前端也是如此)如下:

  1. 安装 SDK:yarn add @tonconnect/ui
  2. 初始化:准备一个 manifest.json 文件,配置到项目的根目录,例如 https://myapp.com/tonconnect-manifest.json
  3. 在应用程序中导入 SDK,创建 @tonconnect/ui 的连接器实体对象
  4. 接下来就可以使用此对象提供的接口发送交易,进行 Ton 转账等区块链操作

官方教程

STON.fi

STON.fi 是一个基于 TON 区块链建立的去中心化自动做市商 (AMM),提供几乎零费用、低滑点、极其简单的界面以及支持众多的 TON 钱包连接。并且提供了 SDK,前端可轻松集成后进行代币的兑换。它提供了三种兑换方式(jetton 是 Ton 链的代币,类似于以太坊的 ERC20):

  1. TON => jetton
  2. jetton => jetton
  3. 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 文档

小程序模板

可克隆下面模板,快速进行小程序的开发

  1. React.js https://github.com/Telegram-Mini-Apps/reactjs-template
  2. Next.js https://github.com/Telegram-Mini-Apps/nextjs-template
  3. Solid.js https://github.com/Telegram-Mini-Apps/solidjs-js-template

参考文档

  1. https://docs.ton.org/mandarin/develop/dapps/telegram-apps
  2. https://docs.telegram-mini-apps.com/zh/platform/creating-new-app
  3. https://docs.ston.fi/docs