TON 链上社保（TON401K）前端开发 1 - 连接钱包

这是TON401K 系列的第二篇文章，以下为其他相关内容

快速索引

在上一篇的介绍中我们计划先完成前端后再开发智能合约，同时定下了三个开发阶段及其目标，今天我们先完成第一步，尝试连接钱包

在TON的官方网站，有一份名为基础 TMA 示例的文档，文档中分别有使用纯 JavaScript、HTML 和 CSS 实现的基础且直接的 Telegram 小程序（TMA）另外还有使用 Vite、Typescript、React 的示例。

在开始开发之前，我们必须确定这是一个一次性的项目，还是一个需要多阶段开发甚至需要团队协作的项目。倘若只是一次性的开发过程，那么我们可以优先考虑开发速度。然而，如果需要进行多阶段开发，那么我们就不能忽视维护的难度了。上一篇文章我们已介绍过，TON401K 会分成三阶段进行开发，因此我们会以基础 TMA 示例中的vite 和 react 作为蓝本，同时使用tailwindcss 来进行前端的CSS framework。Vite是一个现代化的前端构建工具，用于快速开发基于Vue、React、Angular等框架的应用。它的目标是提供一种更快、更简单的开发体验。詳細的介紹請參考 vite 的官方網站，我們在此不作詳述。

基础 TMA 示例

首先我們在这里找到示例项目 https://github.com/ton-community/twa-template，下載完成後只需要執行這兩項代碼，便可以在瀏覽器中打開事例的應用程式。文档中有一些写着TWA的内容，其实就是TMA ，telegram小程序之前的名称是Telegram Web App

npm install
npm run dev

这个示例清楚说明了如何在前端接通TON 网络，包括使用Tonconnect 连接钱包和智能合约，我们可以用这个例子作为基础，建立属于我们自己的DAPP前端，当中的hooks 的部分更加可以直接重复使用，非常方便。

前端设计

TON401K的用戶體驗設計如下

存款计划
- 没有存款：向用户显示存款计划
- 有存款计划但未完成：向用户显示存款进度，下次存款时间和计划结蓄时间
- 已完成存款计划：提醒用户取回存款
空投奖励
- 待定，先预留版面

使用TonConnect

要使用 TON401K，用户必须要先让钱包连接到我们的DApp，因为前端的第一个页面就是用Tonconnect 让用户进行web3 登陆。我们可以直接用TMA template 中的 useTonConnect.ts，这里我会作出一个简单修改，强制用户必须要先进行web3 登陆后才可以进入主画面，登陆后我们会向智能合约发送用户的地址来判断用户的状态。因此我們會在打開小程序後直接跳出Tonconnect 按鍵，效果如下：

      <dialog id="login" className={`modal ` + (connected ? `` : `modal-open`)}>
                <div className="modal-box content-center bg-gray-800 z-20">
                    <div className="text-center">
                        <div className="mx-auto my-4 w-60">
                            <h3 className="text-lg font-black content-center  text-gray-200">Connect your TON wallet</h3>
                            <p className="text-xs content-center  text-gray-300 pt-2">
                                {!connected && <TonConnectButton className="mx-auto " />}
                            </p>
                            <div>
                            </div>
                        </div>
                        <div className="grid gap-4 grid-cols-1 pt-2">
                        </div>
                    </div>
                </div>
                <form method="dialog" className="modal-backdrop backdrop-blur z-10">
                    <button>close</button>
                </form>
            </dialog>

我们的做法是在header 中加入上面的代码，如果用户的状态是未使用钱包登陆，connected 为 false 的话，便会弹出Connect Wallet 的对话窗口，通过调用useTonConnect.ts 取得用户的连接状态。成功连接后，我们可以读取用户的钱包数据，之后也可以与智能合约进行交互。

    const { connected, wallet, sender, network } = useTonConnect();

有兴趣了解更多关于TON 和电报生态的请关注 TonPanda的X 并加入我们的电报群，我们的教学文章和数据分析都会在这里第一时间更新 : https://t.me/tonchina

TON 链上社保（TON401K）前端开发 1 – 连接钱包