Merge pull request #5 from sun-rhythms/anton-antuskov

Antuskov Workshop TWA

antuskov/.env

@@ -0,0 +1 @@
+VITE_CONTRACT_ADDRESS=EQCM3b63cele_wx64hUJecFvmYA-xHbU4O0lyj3AJxqcLVEe

antuskov/.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

antuskov/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 TON @ DeFi.org
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

antuskov/README.md

@@ -0,0 +1,42 @@
+# twa-template
+> Starter template for a new TWA interacting with the TON blockchain 
+
+# Overview
+The project is highly-opinionated, and there are many other alternate routes it could have taken. Some examples:
+- Supports Ton Connect 2 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)
+* A TON Connect compatible wallet (e.g. [Tonkeeper](https://tonkeeper.com/))
+
+# 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](https://user-images.githubusercontent.com/5641469/191731317-14e742fd-accb-47d4-a794-fad01148a377.png) 
+
+2. Clone this repo and run `yarn`
+
+3. Create a new bot with [botfather](https://t.me/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 `yarn configbot` 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
+
+# License
+MIT

antuskov/configure.js

@@ -0,0 +1,89 @@
+import axios from "axios";
+import { createInterface } from "readline";
+import fs from "fs";
+import { promisify } from "util";
+
+const rl = createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+
+const question = (question) =>
+  new Promise((resolve) => rl.question(question, resolve));
+
+function exitError(error) {
+  console.error(`Error! ${error}`);
+  process.exit(1);
+}
+
+const banner = `
+████████╗██╗    ██╗ █████╗     ████████╗███████╗███╗   ███╗██████╗ ██╗      █████╗ ████████╗███████╗
+╚══██╔══╝██║    ██║██╔══██╗    ╚══██╔══╝██╔════╝████╗ ████║██╔══██╗██║     ██╔══██╗╚══██╔══╝██╔════╝
+   ██║   ██║ █╗ ██║███████║       ██║   █████╗  ██╔████╔██║██████╔╝██║     ███████║   ██║   █████╗  
+   ██║   ██║███╗██║██╔══██║       ██║   ██╔══╝  ██║╚██╔╝██║██╔═══╝ ██║     ██╔══██║   ██║   ██╔══╝  
+   ██║   ╚███╔███╔╝██║  ██║       ██║   ███████╗██║ ╚═╝ ██║██║     ███████╗██║  ██║   ██║   ███████╗
+   ╚═╝    ╚══╝╚══╝ ╚═╝  ╚═╝       ╚═╝   ╚══════╝╚═╝     ╚═╝╚═╝     ╚══════╝╚═╝  ╚═╝   ╚═╝   ╚══════╝
+`;
+
+console.log(banner);
+
+let githubUsername, githubRepo, botUsername;
+
+(async () => {
+  try {
+    const file = fs.readFileSync(".git/config").toString();
+    const url = file.match(/url = (.*)/)[1];
+    console.log(url);
+    const params = url.match(/github.com[/:]([^/]*)\/(.*)\.git/);
+    githubUsername = params[1];
+    githubRepo = params[2];
+  } catch (e) {}
+
+  const accessToken = await question("Enter your bot access token: ");
+  if (!accessToken?.length > 0) exitError("Token is required");
+
+  const githubUsernameQ = await question(
+    `Enter your github username${
+      githubUsername ? ` (${githubUsername})` : ``
+    }: `
+  );
+  githubUsername = githubUsernameQ || githubUsername;
+  if (!githubUsername?.length > 0) exitError("Github username is required");
+
+  const githubRepoQ = await question(
+    `Enter your forked repo name${githubRepo ? ` (${githubRepo})` : ``}: `
+  );
+  githubRepo = githubRepoQ || githubRepo;
+  if (!githubRepo?.length > 0) exitError("Repo name is required");
+
+  const getBot = await axios.get(
+    `https://api.telegram.org/bot${accessToken}/getMe`
+  ).catch(exitError);
+
+  botUsername = getBot.data.result.username;
+  const url = `https://${githubUsername}.github.io/${githubRepo}`;
+
+  console.log(`\n\nSetting bot ${botUsername} webapp url to ${url}`);
+
+  const resp = await axios.post(
+    `https://api.telegram.org/bot${accessToken}/setChatMenuButton`,
+    {
+      menu_button: {
+        type: "web_app",
+        text: "Launch Webapp",
+        web_app: {
+          url: url,
+        },
+      },
+    }
+  ).catch(exitError);
+
+  if (resp.status === 200) {
+    console.log(
+      `\nYou're all set! Visit https://t.me/${botUsername} to interact with your bot`
+    );
+    process.exit();
+  } else {
+    exitError(`\nSomething went wrong! ${resp.error}`);
+  }
+})();

antuskov/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ton Sample TWA</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

antuskov/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "ton-starter-twa-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "homepage": "https://eanisei.github.io/hack-ton-berfest",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "configbot": "node configure.js",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d dist"
+  },
+  "dependencies": {
+    "@aws-crypto/sha256-js": "^5.0.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@orbs-network/ton-access": "^2.3.3",
+    "@tanstack/react-query": "^4.24.4",
+    "@tonconnect/ui-react": "^2.0.0-beta.2",
+    "@twa-dev/sdk": "^6.7.0",
+    "buffer": "^6.0.3",
+    "fortawesome": "^0.0.1-security",
+    "gh-pages": "^5.0.0",
+    "is-mobile": "^3.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.6",
+    "ton": "^13.5.0",
+    "ton-core": "^0.49.1",
+    "ton-crypto": "^3.2.0",
+    "use-local-storage": "^2.3.6",
+    "vite-plugin-node-polyfills": "^0.7.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@types/styled-components": "^5.1.26",
+    "@vitejs/plugin-react": "^3.0.1",
+    "typescript": "^4.9.5",
+    "vite": "^4.0.4"
+  }
+}

antuskov/public/tonconnect-manifest.json

@@ -0,0 +1,5 @@
+{
+  "url": "https://raw.githubusercontent.com/ton-community/tutorials/main/03-client/test/public/tonconnect-manifest.json",
+  "name": "Hack-TON-berfest",
+  "iconUrl": ""
+}

antuskov/src/App.css

@@ -0,0 +1,5 @@
+:root {
+  --tg-theme-bg-color: #efeff3;
+  --tg-theme-button-color: #2eaddc;
+  --tg-theme-button-text-color: white;
+}

antuskov/src/App.tsx

@@ -0,0 +1,61 @@
+import './App.css';
+import styled from 'styled-components';
+import { Button, FlexBoxCol, FlexBoxRow } from './components/styled/styled';
+import { CHAIN, TonConnectButton } from '@tonconnect/ui-react';
+import { useTonConnect } from './hooks/useTonConnect';
+import '@twa-dev/sdk';
+import { BusinessCard } from './components/BusinessCard';
+import logo from './assets/hack-ton-berfest.jpg';
+import { useMemo } from 'react';
+
+const StyledApp = styled.div`
+  background-color: #12172c;
+  color: white;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: #222;
+    color: white;
+  }
+  min-height: 100vh;
+  padding: 20px 20px;
+`;
+
+const AppContainer = styled.div`
+  max-width: 900px;
+  margin: 0 auto;
+`;
+
+const Logo = styled.div`
+  height: 48px;
+`;
+function App() {
+  const { network } = useTonConnect();
+
+  const currentNetwork = useMemo(() => {
+    switch (network) {
+      case CHAIN.MAINNET:
+        return 'mainnet';
+      case CHAIN.TESTNET:
+        return 'testnet';
+      default:
+        return 'N/A';
+    }
+  }, [network]);
+
+  return (
+    <StyledApp>
+      <AppContainer className={'container'}>
+        <FlexBoxCol>
+          <FlexBoxRow>
+            <img src={logo} height={48} />
+            <TonConnectButton />
+            <Button>{currentNetwork}</Button>
+          </FlexBoxRow>
+          <BusinessCard />
+        </FlexBoxCol>
+      </AppContainer>
+    </StyledApp>
+  );
+}
+
+export default App;