From be58951dec0602a6a606649951fead8b0918780f Mon Sep 17 00:00:00 2001 From: Alyona Tammur Date: Sat, 30 Nov 2024 12:58:19 +0100 Subject: [PATCH 1/3] init frontend --- dist/script.dev.js | 57 +++++++++++++++ index.html | 171 ++++++--------------------------------------- script.js | 70 +++++++++++++++++++ style.css | 78 +++++++++++++++++++++ 4 files changed, 227 insertions(+), 149 deletions(-) create mode 100644 dist/script.dev.js create mode 100644 script.js create mode 100644 style.css diff --git a/dist/script.dev.js b/dist/script.dev.js new file mode 100644 index 0000000..8d76c86 --- /dev/null +++ b/dist/script.dev.js @@ -0,0 +1,57 @@ +"use strict"; + +// Init TWA +Telegram.WebApp.ready(); // Event occurs whenever theme settings are changed in the user's Telegram app (including switching to night mode). + +Telegram.WebApp.onEvent("themeChanged", function () { + document.documentElement.className = Telegram.WebApp.colorScheme; +}); // Show main button + +Telegram.WebApp.MainButton.setParams({ + text: "Main Button" +}); +Telegram.WebApp.MainButton.onClick(function () { + Telegram.WebApp.showAlert("Main Button was clicked"); +}); +Telegram.WebApp.MainButton.show(); // Function to call showPopup API + +function showPopup() { + Telegram.WebApp.showPopup({ + title: "Title", + message: "Some message", + buttons: [{ + id: "link", + type: "default", + text: "Open ton.org" + }, { + type: "cancel" + }] + }, function (btn) { + if (btn === "link") { + Telegram.WebApp.openLink("https://ton.org/"); + } + }); +} // Function to toggle main TWA button + + +function toggleMainButton() { + if (Telegram.WebApp.MainButton.isVisible) { + Telegram.WebApp.MainButton.hide(); + } else { + Telegram.WebApp.MainButton.show(); + } +} + +function setViewportData() { + var sizeEl = document.getElementById("viewport-params-size"); + sizeEl.innerText = "width: " + window.innerWidth + " x " + "height: " + Telegram.WebApp.viewportStableHeight; + var expandEl = document.querySelector("#viewport-params-expand"); + expandEl.innerText = "Is Expanded: " + (Telegram.WebApp.isExpanded ? "true" : "false"); +} + +Telegram.WebApp.setHeaderColor("secondary_bg_color"); +setViewportData(); +Telegram.WebApp.onEvent("viewportChanged", setViewportData); +Telegram.WebApp.onEvent("themeChanged", function () { + document.body.setAttribute("style", "--bg-color:" + Telegram.WebApp.backgroundColor); +}); \ No newline at end of file diff --git a/index.html b/index.html index e855c60..8cd9ac7 100644 --- a/index.html +++ b/index.html @@ -1,162 +1,35 @@ - - - + + + - Telegram Mini Apps Vanilla JS Sample App - - - - -
-
- logo of telegram web apps -
-

Modals

- - - -

Links

- - -

Buttons

- - + + + +
+

Loyalty Token Bot

+

Our bot simplifies the process of creating and managing loyalty tokens for your business, transforming the way you reward and engage with your customers.

+ +
- + - - + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..bcc9721 --- /dev/null +++ b/script.js @@ -0,0 +1,70 @@ +// Init TWA +Telegram.WebApp.ready(); + +// Event occurs whenever theme settings are changed in the user's Telegram app (including switching to night mode). +Telegram.WebApp.onEvent("themeChanged", function () { + document.documentElement.className = Telegram.WebApp.colorScheme; +}); + +// Show main button +Telegram.WebApp.MainButton.setParams({ + text: "Main Button", +}); +Telegram.WebApp.MainButton.onClick(function () { + Telegram.WebApp.showAlert("Main Button was clicked"); +}); +Telegram.WebApp.MainButton.show(); + +// Function to call showPopup API +function showPopup() { + Telegram.WebApp.showPopup( + { + title: "Title", + message: "Some message", + buttons: [ + { id: "link", type: "default", text: "Open ton.org" }, + { type: "cancel" }, + ], + }, + function (btn) { + if (btn === "link") { + Telegram.WebApp.openLink("https://ton.org/"); + } + } + ); +} + +// Function to toggle main TWA button +function toggleMainButton() { + if (Telegram.WebApp.MainButton.isVisible) { + Telegram.WebApp.MainButton.hide(); + } else { + Telegram.WebApp.MainButton.show(); + } +} + +function setViewportData() { + var sizeEl = document.getElementById("viewport-params-size"); + sizeEl.innerText = + "width: " + + window.innerWidth + + " x " + + "height: " + + Telegram.WebApp.viewportStableHeight; + + var expandEl = document.querySelector("#viewport-params-expand"); + expandEl.innerText = + "Is Expanded: " + (Telegram.WebApp.isExpanded ? "true" : "false"); +} + +Telegram.WebApp.setHeaderColor("secondary_bg_color"); + +setViewportData(); +Telegram.WebApp.onEvent("viewportChanged", setViewportData); + +Telegram.WebApp.onEvent("themeChanged", function () { + document.body.setAttribute( + "style", + "--bg-color:" + Telegram.WebApp.backgroundColor + ); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..80ac1a9 --- /dev/null +++ b/style.css @@ -0,0 +1,78 @@ +body { + --bg-color: var(--tg-theme-bg-color); + font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, + Verdana, sans-serif; + background-color: var(--bg-color); + color: var(--tg-theme-text-color); + margin: 48px 24px; + padding: 0; + color-scheme: var(--tg-color-scheme); +} + +a { + color: var(--tg-theme-link-color); +} +#viewport { + position: fixed; + left: 0; + right: 0; + top: 0; + height: var(--tg-viewport-stable-height, 100vh); + pointer-events: none; + transition: all 0.2s ease; +} +#viewport:after { + content: ""; + display: block; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + border-width: 4px; + border-style: solid; + border-image: linear-gradient( + 45deg, + rgba(64, 224, 208, 0.5), + rgba(173, 255, 47, 0.5) + ) + 1; +} + +#viewport-params-size, +#viewport-params-expand { + content: attr(text); + position: absolute; + display: inline-block; + background: var(--tg-theme-link-color, rgb(64, 224, 208)); + right: 4px; + left: auto; + font-size: 8px; + padding: 4px; + vertical-align: top; +} +#viewport-params-size { + top: 4px; +} +#viewport-params-expand { + top: 30px; +} + +.main-display { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + width: 100vw; + background-color: var(--bg-color); + color: var(--tg-theme-text-color); + font-family: var(--tg-theme-font-family); + font-size: var(--tg-theme-font-size); + line-height: var(--tg-theme-line-height); + overflow: hidden; +} + +.center { + align: "center"; +} From 493d5641a624b74348e2edaa581fb3e8797cd5e2 Mon Sep 17 00:00:00 2001 From: Ren Wro <134458911+RenWro@users.noreply.github.com> Date: Sat, 30 Nov 2024 13:35:32 +0100 Subject: [PATCH 2/3] Update script.js --- script.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/script.js b/script.js index bcc9721..ed0430a 100644 --- a/script.js +++ b/script.js @@ -68,3 +68,17 @@ Telegram.WebApp.onEvent("themeChanged", function () { "--bg-color:" + Telegram.WebApp.backgroundColor ); }); + +// Integrate StarkNet Libraries +import * as starknet from 'https://cdn.jsdelivr.net/npm/starknet@5.19.5/+esm'; + +const starkProvider = new starknet.SequencerProvider({ + baseUrl: starknet.constants.BaseUrl.SN_MAIN +}); + +async function getChainId() { + const chainId = await starkProvider.getChainId(); + console.log("StarkNet Chain ID:", chainId); +} + +getChainId(); From 8be7371156268daac75104c29ba2f331ece62faf Mon Sep 17 00:00:00 2001 From: Ren Wro <134458911+RenWro@users.noreply.github.com> Date: Sat, 30 Nov 2024 13:43:07 +0100 Subject: [PATCH 3/3] Update style.css Darker theme + extra api integration --- style.css | 46 +++++++++++++++++++++++++++++++--------------- 1 file changed, 31 insertions(+), 15 deletions(-) diff --git a/style.css b/style.css index 80ac1a9..df40a0a 100644 --- a/style.css +++ b/style.css @@ -1,26 +1,31 @@ body { - --bg-color: var(--tg-theme-bg-color); - font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, - Verdana, sans-serif; + --bg-color: #1e1e1e; /* Dark background color */ + --text-color: #e0e0e0; /* Light text color */ + --link-color: #00e676; /* Bright green link color */ + --border-color: #303030; /* Dark border color */ + font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif; background-color: var(--bg-color); - color: var(--tg-theme-text-color); + color: var(--text-color); margin: 48px 24px; padding: 0; - color-scheme: var(--tg-color-scheme); + color-scheme: dark; } a { - color: var(--tg-theme-link-color); + color: var(--link-color); } + #viewport { position: fixed; left: 0; right: 0; top: 0; - height: var(--tg-viewport-stable-height, 100vh); + height: 100vh; pointer-events: none; transition: all 0.2s ease; + border: 1px solid var(--border-color); } + #viewport:after { content: ""; display: block; @@ -31,12 +36,7 @@ a { bottom: 0; border-width: 4px; border-style: solid; - border-image: linear-gradient( - 45deg, - rgba(64, 224, 208, 0.5), - rgba(173, 255, 47, 0.5) - ) - 1; + border-image: linear-gradient(45deg, rgba(0, 230, 118, 0.5), rgba(0, 184, 212, 0.5)) 1; } #viewport-params-size, @@ -44,16 +44,18 @@ a { content: attr(text); position: absolute; display: inline-block; - background: var(--tg-theme-link-color, rgb(64, 224, 208)); + background: var(--link-color); right: 4px; left: auto; font-size: 8px; padding: 4px; vertical-align: top; } + #viewport-params-size { top: 4px; } + #viewport-params-expand { top: 30px; } @@ -66,7 +68,7 @@ a { height: 100vh; width: 100vw; background-color: var(--bg-color); - color: var(--tg-theme-text-color); + color: var(--text-color); font-family: var(--tg-theme-font-family); font-size: var(--tg-theme-font-size); line-height: var(--tg-theme-line-height); @@ -76,3 +78,17 @@ a { .center { align: "center"; } + +.main-button { + background-color: var(--link-color); + border: 1px solid var(--border-color); + color: var(--text-color); + padding: 10px 20px; + margin: 10px; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.main-button:hover { + background-color: rgba(0, 230, 118, 0.8); +}