Implement template

Telegram-Mini-Apps · Aug 1, 2024 · b3f1175 · b3f1175
1 parent cd48df1
commit b3f1175
Show file tree

Hide file tree

Showing 35 changed files with 1,674 additions and 429 deletions.
diff --git a/.github/deployment-branches.png b/.github/deployment-branches.png
diff --git a/.github/workflows/github-pages-deploy.yml b/.github/workflows/github-pages-deploy.yml
@@ -0,0 +1,45 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['master']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # Upload dist repository
+          path: './dist'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2
diff --git a/dist/css/displayData.css b/dist/css/displayData.css
@@ -0,0 +1,19 @@
+.display-data__line {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  gap: 10px;
+  flex-flow: wrap;
+}
+
+.display-data__line-title {
+  border: 1px solid var(--tg-theme-accent-text-color);
+  background-color: var(--tg-theme-bg-color);
+  border-radius: 5px;
+  padding: 2px 8px 4px;
+  box-sizing: border-box;
+}
+
+.display-data__line-value {
+  word-break: break-word;
+}
diff --git a/dist/css/homePage.css b/dist/css/homePage.css
@@ -0,0 +1,23 @@
+.index-page__links {
+  list-style: none;
+  padding-left: 0;
+}
+
+.index-page__link {
+  font-weight: bold;
+  display: inline-flex;
+  gap: 5px;
+}
+
+.index-page__link-item + .index-page__link-item {
+  margin-top: 10px;
+}
+
+.index-page__link-icon {
+  width: 20px;
+  display: block;
+}
+
+.index-page__link-icon svg {
+  display: block;
+}
diff --git a/dist/css/index.css b/dist/css/index.css
@@ -0,0 +1,29 @@
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.5;
+
+    background: var(--tg-theme-secondary-bg-color, white);
+    color: var(--tg-theme-text-color, black);
+  }
+
+  blockquote {
+    margin: 0;
+  }
+
+  blockquote p {
+    padding: 15px;
+    background: #eee;
+    border-radius: 5px;
+  }
+
+  pre {
+    overflow: auto;
+  }
+
+  h1 {
+    margin-top: 0.67em;
+  }
diff --git a/dist/css/initDataPage.css b/dist/css/initDataPage.css
@@ -0,0 +1,7 @@
+.init-data-page__section + .init-data-page__section {
+  margin-top: 12px;
+}
+
+.init-data-page__section-title {
+  margin-bottom: 4px;
+}
diff --git a/dist/css/link.css b/dist/css/link.css
@@ -0,0 +1,4 @@
+.link {
+  text-decoration: none;
+  color: var(--tg-theme-link-color);
+}
diff --git a/dist/css/page.css b/dist/css/page.css
@@ -0,0 +1,8 @@
+.page {
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.page__disclaimer {
+  margin-bottom: 16px;
+}
diff --git a/dist/css/rgb.css b/dist/css/rgb.css
@@ -0,0 +1,12 @@
+.rgb {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.rgb__icon {
+  width: 18px;
+  aspect-ratio: 1;
+  border: 1px solid #555;
+  border-radius: 50%;
+}
diff --git a/dist/css/tonConnectPage.css b/dist/css/tonConnectPage.css
@@ -0,0 +1,9 @@
+.ton-connect-page__button-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.ton-connect-page__provider {
+  margin-bottom: 16px;
+}
diff --git a/dist/css/walletProvider.css b/dist/css/walletProvider.css
@@ -0,0 +1,27 @@
+.wallet-provider {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.wallet-provider__image {
+  border-radius: 5px;
+}
+
+.wallet-provider__meta {
+  display: flex;
+  flex-direction: column;
+}
+
+.wallet-provider__wallet-name {
+  font-weight: bold;
+  font-size: 20px;
+  margin: 0;
+}
+
+.wallet-provider__app-name {
+  opacity: .4;
+  font-weight: 400;
+  font-size: 14px;
+  vertical-align: top;
+}
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,56 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta
+    name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+  >
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Telegram Mini Apps example</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+    rel="stylesheet"
+  >
+
+  <link href="css/index.css" rel="stylesheet">
+  <link href="css/homePage.css" rel="stylesheet">
+  <link href="css/initDataPage.css" rel="stylesheet">
+  <link href="css/tonConnectPage.css" rel="stylesheet">
+  <link href="css/walletProvider.css" rel="stylesheet">
+  <link href="css/rgb.css" rel="stylesheet">
+  <link href="css/page.css" rel="stylesheet">
+  <link href="css/link.css" rel="stylesheet">
+  <link href="css/displayData.css" rel="stylesheet">
+
+  <script src="https://cdn.jsdelivr.net/npm/@telegram-apps/[email protected]/dist/index.iife.js"></script>
+  <script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>
+  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+</head>
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <script src="js/utils.js"></script>
+  <script src="js/mockEnv.js"></script>
+  <script src="js/initNavigrator.js"></script>
+  <script src="js/initComponents.js"></script>
+  <script src="js/initTonConnect.js"></script>
+
+  <script src="js/components/DisplayData.js"></script>
+  <script src="js/components/Link.js"></script>
+  <script src="js/components/Page.js"></script>
+  <script src="js/components/RGB.js"></script>
+  <script src="js/components/TonConnectButton.js"></script>
+  <script src="js/components/WalletProvider.js"></script>
+  <script src="js/components/PageComponent.js"></script>
+
+  <script src="js/pages/HomePage.js"></script>
+  <script src="js/pages/InitDataPage.js"></script>
+  <script src="js/pages/LaunchParamsPage.js"></script>
+  <script src="js/pages/ThemeParamsPage.js"></script>
+  <script src="js/pages/TonConnectPage.js"></script>
+
+  <script src="js/index.js"></script>
+</body>
+</html>
diff --git a/dist/js/components/DisplayData.js b/dist/js/components/DisplayData.js
@@ -0,0 +1,40 @@
+class DisplayData {
+  constructor({ rows }) {
+    this.el = $('<div/>');
+    this.setRows(rows);
+  }
+
+  /**
+   * @returns {HTMLDivElement}
+   */
+  element() {
+    return this.el[0];
+  }
+
+  setRows(rows) {
+    this.el.empty().append(
+      ...rows.map(row => {
+        const lineValue = $('<span class="display-data__line-value"/>');
+        if (typeof row.value === 'string' && window.telegramApps.sdk.isRGB(row.value)) {
+          lineValue.append(new RGB({ color: row.value }).element());
+        } else if (row.value === false) {
+          lineValue.text('❌');
+        } else if (row.value === true) {
+          lineValue.text('✔️');
+        } else if (row.value === undefined) {
+          lineValue.html('<i>empty</i>');
+        } else if (row.value instanceof HTMLElement) {
+          lineValue.append(row.value);
+        } else {
+          lineValue.append(row.value.toString());
+        }
+
+        return $('<div class="display-data__line"/>').append(
+          $('<span class="display-data__line-title"/>').text(row.title),
+          lineValue,
+        );
+      }),
+    );
+    return this;
+  }
+}
diff --git a/dist/js/components/Link.js b/dist/js/components/Link.js
@@ -0,0 +1,32 @@
+class Link {
+  constructor({ href, class: className }, context) {
+    const targetUrl = new URL(href, window.location.toString());
+    const currentUrl = new URL(window.location.toString());
+    const isExternal = targetUrl.protocol !== currentUrl.protocol
+      || targetUrl.host !== currentUrl.host;
+
+    this.el = $('<a/>')
+      .attr('class', 'link')
+      .addClass(className ?? '')
+      .attr('href', isExternal ? href : context.navigator.renderPath(href));
+
+    if (isExternal) {
+      this.el.on('click', (e) => {
+        e.preventDefault();
+        context.utils.openLink(targetUrl.toString());
+      });
+    }
+  }
+
+  appendChild(...children) {
+    this.el.append(...filterChildren(children));
+    return this;
+  }
+
+  /**
+   * @returns {HTMLAnchorElement}
+   */
+  element() {
+    return this.el[0];
+  }
+}
diff --git a/dist/js/components/Page.js b/dist/js/components/Page.js
@@ -0,0 +1,28 @@
+class Page {
+  constructor({ title }) {
+    this.el = $('<div class="page"/>').append($('<h1/>').text(title));
+  }
+
+  appendChild(...children) {
+    this.el.append(...filterChildren(children));
+    return this;
+  }
+
+  /**
+   * @returns {HTMLDivElement}
+   */
+  element() {
+    return this.el[0];
+  }
+
+  setDisclaimer(disclaimer) {
+    if (this.disclaimer) {
+      this.disclaimer.empty().append(...toArray(disclaimer));
+    } else {
+      this.disclaimer = $('<div class="page__disclaimer"/>')
+        .append(...toArray(disclaimer))
+        .insertAfter(this.el.children('h1'));
+    }
+    return this;
+  }
+}
diff --git a/dist/js/components/PageComponent.js b/dist/js/components/PageComponent.js
@@ -0,0 +1,13 @@
+class PageComponent {
+  constructor(page) {
+    this.page = page;
+  }
+
+  /**
+   * @param {HTMLElement} root
+   * @returns {void}
+   */
+  render(root) {
+    $(root).empty().append(this.page.element());
+  }
+}