Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ren wro patch 2 #7

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Ren wro patch 2 #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
be58951
init frontend
alyonafuria Nov 30, 2024
493d564
Update script.js
RenWro Nov 30, 2024
8be7371
Update style.css
RenWro Nov 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions dist/script.dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
});
171 changes: 22 additions & 149 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,162 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Telegram Mini Apps Vanilla JS Sample App</title>
<style>
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 .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, .5), rgba(173, 255, 47, .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;
}
<title>Loyalty Token Bot</title>
<link rel="stylesheet" href="style.css">

</style>
</head>

<body>
<main>
<div align="center">
<a href="https://ton.org/"><img width="48" src="./assets/tapps.png" alt="logo of telegram web apps"></a>
</div>
<h1>Modals</h1>
<button onclick="Telegram.WebApp.showAlert('Hello World!');">Launch Alert</button>
<button onclick="showPopup();">Launch Popup</button>

<h1>Links</h1>
<ul>
<li>
<a href="javascript:Telegram.WebApp.openTelegramLink('https://t.me/trendingapps');">Open link within Telegram</a>
</li>
<li>
<a href="javascript:Telegram.WebApp.openLink('https://ton.org/');">Open link in external browser</a>
</li>
<li>
<a href="javascript:Telegram.WebApp.openLink('https://telegra.ph/api',{try_instant_view:true});">Open link inside Telegram webview</a>
</li>
</ul>

<h1>Buttons</h1>
<button onclick="Telegram.WebApp.expand();">Expand Webview</button>
<button onclick="toggleMainButton();">Toggle Main Button</button>
</head>

<body>
<main class="main-display">
<h1>Loyalty Token Bot</h1>
<p>Our bot simplifies the process of creating and managing loyalty tokens for your business, transforming the way you reward and engage with your customers.</p>
<button class="main-button" onclick="Telegram.WebApp.expand();">Create a token</button>
<button class="main-button" onclick="Telegram.WebApp.expand();">Transfer tokens</button>
</main>
<div id="viewport"></div>
<div id="viewport-params-size"></div>
<div id="viewport-params-expand"></div>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script>
// 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);
});

</script>
<script src="script.js"></script>

<!-- Eruda is console for mobile browsers -->
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
</body>
<script>
eruda.init();
</script>
</body>
</html>
84 changes: 84 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
// 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
);
});

// Integrate StarkNet Libraries
import * as starknet from 'https://cdn.jsdelivr.net/npm/[email protected]/+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();
Loading