🚩 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 or TON learn tg

---

Checkpoint 0: 📦 Install 📚

Required:

• Git
• Node (Use Version 18 LTS)
• Yarn

(⚠️ Don't install the linux package yarn make sure you install yarn with npm i -g yarn or even sudo npm i -g yarn!)

git clone https://github.com/romanovichim/TONQuest5.git

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 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:

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. 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:

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
• Dive deep into the React ui send transaction

🏆 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:

yarn reward