Boilerplate starter template for a new Telegram Web App (TWA) interacting with the TON blockchain

Overview

TON Starter Template - Telegram Web App (TWA)

Starter template for a new TWA interacting with the TON blockchain

Overview

This project is part of a set of 3 typical repositories needed for a blockchain dapp running on TON blockchain:

The project is highly-opinionated, and there are many other alternate routes it could have taken. Some examples:

  • Supports only tonhub and its corresponding session mediating library, ton-x. Feel free to contribute support for other wallets!
  • Uses vite with react (alternative to create-react-app)
  • Uses the ton npm package

Prerequesities

  • Node.js v16 (other versions may work, needs more testing)
  • Tonhub wallet installed on a mobile phone

What does this repo contain?

  • A react-based TWA-ready app, interacting with TON
  • Github actions set to deploy app to github pages
  • A script to connect a telegram bot to the deployed app

How to use

  1. Create a template from this repo with the "Use this template" button

    1. Choose a name for your repo
    2. Important! mark "Include all branches", otherwise github pages deployment will not work. image
  2. Clone this repo and run npm install

  3. Create a new bot with botfather

    1. Type /newbot
    2. Choose a name for your bot, e.g. My Ton TWA
    3. Choose a username for your bot, e.g. my_ton_twa_482765_bot
    4. Take note of the access token, e.g. 5712441624:AAHmiHvwrrju1F3h29rlVOZLRLnv-B8ZZZ
    5. Run node configure.js to link your bot to the webapp

Development

  1. Run npm run dev and edit the code as needed
  2. On push to the main branch, the app will be automatically deployed via github actions.

Roadmap

  • Jetton transfer support
  • Light/dark theme handling

License

MIT

You might also like...

Ember.js - A JavaScript framework for creating ambitious web applications

Ember.js - A JavaScript framework for creating ambitious web applications

Ember.js is a JavaScript framework that greatly reduces the time, effort and resources needed to build any web application. It is focused on making yo

Jan 4, 2023

Our original Web Component library.

Polymer โ„น๏ธ Note: This is the current stable version of the Polymer library. At Google I/O 2018 we announced a new Web Component base class, LitElement

Jan 3, 2023

๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

vue-next This is the repository for Vue 3.0. Quickstart Via CDN: script src="https://unpkg.com/vue@next"/script In-browser playground on Codepen S

Jan 4, 2023

OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice.

OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice.

OpenUI5. Build Once. Run on any device. What is it? OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on al

Dec 31, 2022

The AMP web component framework.

AMP โšก โšก โšก โšก Metrics Tooling AMP is a web component framework for easily creating user-first websites, stories, ads, emails and more. AMP is an open so

Jan 4, 2023

The simplest way to create web components from plain objects and pure functions! ๐Ÿ’ฏ

๐Ÿ… One of the four nominated projects to the "Breakthrough of the year" category of Open Source Award in 2019 hybrids is a UI library for creating web

Dec 27, 2022

Create blazing fast multithreaded Web Apps

Create blazing fast multithreaded Web Apps

Welcome to neo.mjs! neo.mjs enables you to create scalable & high performant Apps using more than just one CPU, without the need to take care of a wor

Dec 31, 2022

Dojo Framework. A Progressive Framework for Modern Web Apps

@dojo/framework Dojo is a progressive framework for modern web applications built with TypeScript. Visit us at dojo.io for documentation, tutorials, c

Dec 25, 2022

๐Ÿ™‹โ€โ™€๏ธ 3kb library for tiny web apps

3kb library for tiny web apps. Sometimes, all you want to do is to try and do somethingโ€”No boilerplate, bundlers, or complex build processes. Lucia ai

Dec 27, 2022
Comments
  • feat: transaction watcher

    feat: transaction watcher

    Solves #8

    • Extended sendTxn logic to return state of current transaction and watch for it.
    • Added TransactionWatcher component consuming state of transaction

    Example can be found in Counter

    opened by dvlkv 1
Owner
TON @ DeFi.org
A community of DeFi thought leaders on TON blockchain
TON @ DeFi.org
The new open source website for SheCodeNairobi website ๐Ÿฅณ

She-codes Africa Nairobi Chapter Hello Stranger, this is the official open source website for She-codes-Africa Nairobi Chapter, in collaboration with

She Code Africa Nairobi 17 Jan 4, 2023
Yet Another JSX using tagged template

์šฐ์•„ํ•œ JSX Yet Another Simple JSX using tagged template ์–ธ์–ด์˜ ํ•œ๊ณ„๊ฐ€ ๊ณง ์„ธ๊ณ„์˜ ํ•œ๊ณ„๋‹ค - Ludwig Wittgenstein ์šฐ์•„ํ•œ JSX๊ฐ€ ์บ ํผ๋“ค์˜ ํ‘œํ˜„์˜ ์ž์œ ๋ฅผ ๋„“ํžˆ๊ณ  ์„ธ๊ณ„๋ฅผ ๋„“ํžˆ๋Š”๋ฐ ๋„์›€์ด ๋˜์—ˆ์œผ๋ฉด ํ•ฉ๋‹ˆ๋‹ค Example i

null 20 Sep 22, 2022
๐ŸŒฒThe perfect personal website template.

Conifer ?? Conifer is an easy to use, fun and rewarding template to help you build your own personal website. It is 100% free to use- and aimed at tho

Toby 7 Nov 27, 2022
The official web app of OwnStore suite.

This project is part of OwnStore suite. Learn more here: https://ownstore.dev The suite contains the following projects: Website API CMS Doc Apps TWA

OwnStore 32 Dec 19, 2022
A Web Component compiler for building fast, reusable UI components and static site generated Progressive Web Apps

Stencil: A Compiler for Web Components and PWAs npm init stencil Stencil is a simple compiler for generating Web Components and static site generated

Ionic 11.3k Jan 4, 2023
Give your JS App some Backbone with Models, Views, Collections, and Events

____ __ __ /\ _`\ /\ \ /\ \ __ \ \ \ \ \ __ ___\ \ \/'\\ \ \_

Jeremy Ashkenas 28k Jan 9, 2023
App development framework based on cocos creator3.1.1

todo: Waiting for English translation cx-cocos App development framework based on cocos creator3.1.1 ไธ€ไธชๅŸบไบŽcocos creator3.1.1็š„ๅบ”็”จAppๅ’Œๆธธๆˆๅผ€ๅ‘ๆก†ๆžถ ๅ…ณ้”ฎ่ฏ๏ผšcocos cre

null 63 Dec 7, 2022
๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Supporting Vue.js Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome ba

vuejs 201.6k Jan 7, 2023
AngularJS - HTML enhanced for web apps!

AngularJS AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade/Pug and

Angular 59.3k Jan 1, 2023
Cybernetically enhanced web apps

What is Svelte? Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient

Svelte 64.3k Dec 31, 2022