Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/romanovichim/TONQuest5
https://github.com/romanovichim/TONQuest5
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/romanovichim/TONQuest5
- Owner: romanovichim
- Created: 2023-07-27T11:02:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-08T17:55:39.000Z (about 1 year ago)
- Last Synced: 2024-07-31T20:37:35.608Z (5 months ago)
- Language: TypeScript
- Size: 68.4 KB
- Stars: 8
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-ton - 🚩 Challenge 5: Create UI to Interact with the Contract in 5 Minutes
README
# TON Speedrun
## 🚩 Challenge 5: Create UI to interact with the contract in 5 minutes
🎫 Let's take an open source contract and build a simple website that will allow you to log in, send a transaction to the contract and see the result of the transaction by requesting the Get method.
📺 Get a full-fledged web 3 application with a backend in the form of a smart contract.
💬 Meet other builders working in TON and get help in the [official dev chat](https://t.me/tondev_eng) or [TON learn tg](https://t.me/ton_learn)
---
# Checkpoint 0: 📦 Install 📚
Required:
* [Git](https://git-scm.com/downloads)
* [Node](https://nodejs.org/en/download/) (Use Version 18 LTS)
* [Yarn](https://classic.yarnpkg.com/en/docs/install/#mac-stable)
(⚠️ Don't install the linux package `yarn` make sure you install yarn with `npm i -g yarn` or even `sudo npm i -g yarn`!)
```sh
git clone https://github.com/romanovichim/TONQuest5.git
```
```sh
cd challenge-5
yarn install
```
---
# Checkpoint 1: Manifest and Button
The balance between comfort and security in web3 applications is the division into:
- applications - the logic of interactions with smart contracts
- wallets - the place where funds are safely stored and the place where you confirm the transactions that you send
In TON, [TONConnect](https://www.npmjs.com/package/@tonconnect/sdk) is used for authorization using a wallet in the application.
To confirm the transaction in the wallet, you understand what kind of application it is, a manifest describing the application is created. Uncomment the manifest into the file `main.tsx`:
TonConnect allows you to create an authorization very quickly with one, yes, one component - go to the file and uncomment:
Let's run the application:
```sh
yarn dev
```
Enter the link in the browser.
---
# Checkpoint 2: 🔑 Connect/Disconnect 🔓
After loading you must see:
Click on the button and you will see a QR and the ability to select a wallet:
Select Tonkeeper in wallets tab, QR will change:
We log in using Tonkeeper, the button will change and will display your address. In the drop-down list there will be a disconnect button and the ability to copy the address.
Disconnect and move on to the next checkpoint.
---
# Checkpoint 3: 🤖 Counter Contract 📜
In this quest, we will use this example of a [smart contract](https://github.com/ton-org/blueprint/tree/5b234d83fae6e73234ed32a38cdf0b1558f7cc93/example). The contract, when receiving a message, increments the counter value, which is stored in register c4 of the contract. There is also a Get method that returns the value of the counter.
The example has a wrapper, we will use it for the convenience of interacting with the contract in the file useContractWrapper.ts
I have already deployed the contract for your convenience.
const contract = new Counter(
Address.parse("kQB6UE8yqAonG8AM6tz8PtTE-JQ5svQwWjUWUM4ycZWId39V")
);
The only question left is how to call Get method. We will use https://testnet.toncenter.com/api/v2/jsonRPC , we will call the method every 5 seconds so that the user can see if their transaction has changed the contract data.
---
# Checkpoint 4: 💻 Add ui 💻
Let's use the wrapper of our contract, comment out the piece of code with the button from the previous step.
And uncomment the code below - this will be primitive ui:
---
# Checkpoint 5: 📫 Send transaction and Check result in 📮
Launch the application and follow the link:
```sh
yarn dev
```
Log in and click on the button to increase the counter(Send increase by 1):
Confirm the transaction in the wallet and wait for the counter to increase:
---
# ⚔️ Side Quests
Quick results are great, but to play longer, enjoy the ecosystem, I suggest you the following tutorials:
- Dive deep into the React ui [login button](https://github.com/romanovichim/TonFunClessons_Eng/blob/main/lessons/tonconnect/button.md)
- Dive deep into the React ui [send transaction](https://github.com/romanovichim/TonFunClessons_Eng/blob/main/lessons/tonconnect/sendtx.md)
# 🏆 Reward
Congratulations on successfully completing this challenge! Before we conclude, let's take a quick look at the exciting reward awaiting you from the "TON Speedrun" collection:
Ready to claim your reward? Just scan the QR code, which can be generated using the script below:
```sh
yarn reward
```