improved interface

gradoally · Sep 11, 2024 · 9b55b05 · 9b55b05
1 parent 4f14d58
commit 9b55b05
Show file tree

Hide file tree

Showing 7 changed files with 207 additions and 53 deletions.
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,30 +1,36 @@
 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();
@@ -35,11 +41,7 @@ export const Telegram: Reactive<Telegram> = reactive<Telegram>({
   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({
@@ -52,8 +54,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"
@@ -63,17 +63,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",
     });
@@ -83,10 +110,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>