Merge branch 'main' of https://github.com/gradoally/x2lottery

gradoally · Sep 17, 2024 · e628ba7 · e628ba7
2 parents cc48f0f + e07f72b
commit e628ba7
Show file tree

Hide file tree

Showing 11 changed files with 281 additions and 65 deletions.
diff --git a/.env.example b/.env.example
@@ -1,4 +1,5 @@
 VITE_ENV="development"
 VITE_TELEGRAM_BOT_URL=""
 VITE_TELEGRAM_MANIFEST_URL=""
-VITE_TON_CONTRACT_ADDRESS=""
+VITE_TON_CONTRACT_ADDRESS=""
+VITE_GTAG_ID=""
diff --git a/.env.production b/.env.production
@@ -1,4 +1,5 @@
 VITE_ENV="production"
-VITE_TELEGRAM_BOT_URL="https://t.me/x2lotterybot"
+VITE_TELEGRAM_BOT_URL="t.me/x2lotterybot/play"
 VITE_TELEGRAM_MANIFEST_URL="https://gradoally.github.io/x2lottery/tonconnect-manifest.json"
 VITE_TON_CONTRACT_ADDRESS="EQCnuaUFX1fxduNk5QvUMlexRmwHM08jfO5_zpQpkXjeWbL7"
+VITE_GTAG_ID="G-0R6KDGMBJS"
diff --git a/index.html b/index.html
@@ -7,6 +7,22 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
     />
+
+    <!-- Google tag (gtag.js) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=%VITE_GTAG_ID%"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "%VITE_GTAG_ID%");
+    </script>
+
     <title>x2Lottery</title>
   </head>
   <body class="bg-gray-950 text-white h-screen select-none">

diff --git a/src/App.vue b/src/App.vue
@@ -3,6 +3,7 @@ import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { store } from './common/store'
+import MoneyBackground from './components/common/MoneyBackground.vue';
 
 const router = useRouter()
 
@@ -21,6 +22,7 @@ onMounted(async () => {
 </script>
 
 <template>
+  <MoneyBackground />
 
   <div class="relative z-10">
     <div class="flex flex-col h-[100vh]">

diff --git a/src/common/store/telegram.ts b/src/common/store/telegram.ts
@@ -1,45 +1,50 @@
 import { Reactive, reactive } from "vue";
 import { TonConnectUI, TonConnectUiOptions, Account } from "@tonconnect/ui";
 import { InitDataParsed, retrieveLaunchParams } from "@telegram-apps/sdk";
-import { Address, toNano, TonClient } from "@ton/ton";
+import { Address, Cell, fromNano, toNano, TonClient } from "@ton/ton";
 import { HeadsOrTails } from "../../wrappers/HeadsOrTails";
 import { TonConnectSender } from "../../wrappers/TonConnectSender";
 
 interface Telegram {
   walletAccount: Account | null | undefined;
   tonConnectUI: TonConnectUI | null;
+  tonClient: TonClient | null;
   initDataRaw: string | undefined | null;
   initData: InitDataParsed | undefined | null;
   init: () => Promise<void>;
   initTelegramData: () => void;
   initWallet: () => Promise<void>;
   initConnectWalletButton: (buttonRootId: string | null) => Promise<void>;
-  playGame: (amount: number) => Promise<void>;
+  initClient: () => Promise<void>;
+  playGame: (amount: number) => Promise<string | null>;
+  getData: () => Promise<{ min_bet: string; max_bet: string } | null>;
+  getWalletBalance: () => Promise<string | null>;
 }
 
 export const Telegram: Reactive<Telegram> = reactive<Telegram>({
   walletAccount: null,
   tonConnectUI: null,
+  tonClient: null,
   initData: null,
   initDataRaw: null,
   async init() {
     this.initTelegramData();
     this.initWallet();
+    this.initClient();
   },
   initTelegramData() {
-    const launchParams = retrieveLaunchParams();
-
-    this.initDataRaw = launchParams.initDataRaw;
-    this.initData = launchParams.initData;
+    try {
+      const launchParams = retrieveLaunchParams();
+      this.initDataRaw = launchParams.initDataRaw;
+      this.initData = launchParams.initData;
+    } catch (e) {
+      console.log('not in telegram app');
+    }
   },
   async initWallet() {
     await this.tonConnectUI?.getWallets();
 
-    console.log(this.tonConnectUI);
-
     this.walletAccount = this.tonConnectUI?.account;
-
-    console.log(this.walletAccount);
   },
   async initConnectWalletButton(buttonRootId: string | null) {
     this.tonConnectUI = new TonConnectUI({
@@ -55,8 +60,6 @@ export const Telegram: Reactive<Telegram> = reactive<Telegram>({
     } as TonConnectUiOptions;
 
     this.tonConnectUI.onModalStateChange(async (state) => {
-      console.log(state);
-
       if (
         state.status === "closed" &&
         state.closeReason === "wallet-selected"
@@ -66,17 +69,44 @@ export const Telegram: Reactive<Telegram> = reactive<Telegram>({
     });
 
     this.tonConnectUI.onStatusChange((status) => {
-      if(!status) {
+      if (!status) {
         this.walletAccount = null;
       }
     });
-
-    console.log(this.tonConnectUI);
+  },
+  async initClient() {
+    this.tonClient = new TonClient({
+      endpoint: "https://toncenter.com/api/v2/jsonRPC",
+    });
   },
   async playGame(amount: number) {
     const collectionAddress = import.meta.env.VITE_TON_CONTRACT_ADDRESS;
     const address = Address.parse(collectionAddress);
 
+    const contractProvider = this.tonClient?.open(
+      HeadsOrTails.createFromAddress(address)
+    );
+
+    if (this.tonConnectUI) {
+      const tonConnectSender = new TonConnectSender(this.tonConnectUI);
+
+      await contractProvider?.sendBet(tonConnectSender, toNano(amount));
+
+      const cell = Cell.fromBase64(
+        tonConnectSender.lastTransactionResponse?.boc ?? ""
+      );
+      const buffer = cell.hash();
+      const hashHex = buffer.toString("hex");
+
+      return hashHex;
+    }
+
+    return null;
+  },
+  async getData() {
+    const collectionAddress = import.meta.env.VITE_TON_CONTRACT_ADDRESS;
+    const address = Address.parse(collectionAddress);
+
     const tonClient = new TonClient({
       endpoint: "https://toncenter.com/api/v2/jsonRPC",
     });
@@ -86,10 +116,29 @@ export const Telegram: Reactive<Telegram> = reactive<Telegram>({
     );
 
     if (this.tonConnectUI) {
-      return await contractProvider.sendBet(
-        new TonConnectSender(this.tonConnectUI),
-        toNano(amount)
+      const data = (await contractProvider.getData()).beginParse();
+      data.loadAddress();
+      const min_bet = fromNano(data.loadCoins());
+      const max_bet = fromNano(data.loadCoins());
+
+      return {
+        min_bet,
+        max_bet,
+      };
+    }
+
+    return null;
+  },
+  async getWalletBalance() {
+    try {
+      const balance = await this.tonClient?.getBalance(
+        Address.parse(this.walletAccount?.address ?? "")
       );
+      return fromNano(balance ?? 0);
+    } catch (error) {
+      console.error("Error fetching wallet balance:", error);
     }
+
+    return null;
   },
 });
diff --git a/src/components/common/Button.vue b/src/components/common/Button.vue
@@ -31,7 +31,7 @@ const click = () => {
 </script>
 
 <template>
-  <button :class="classObject" class="rounded-md uppercase disabled:bg-gray-500" @click="click" :disabled="props.disabled">
+  <button :class="classObject" class="text-xl font-black py-4 px-10 rounded-md uppercase disabled:bg-gray-500" @click="click" :disabled="props.disabled">
     <slot></slot>
   </button>
 </template>