button test

softstack · Apr 3, 2024 · 7d5f73e · 7d5f73e
1 parent a636557
commit 7d5f73e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useWeb3ModalAccount } from '@web3modal/ethers/react';
 import { useTonWallet } from '@tonconnect/ui-react';
+import WebApp from '@twa-dev/sdk';
 
 import './App.css';
 
@@ -28,6 +29,11 @@ enum View {
     WALLET = 3,
 }
 
+WebApp.MainButton.enable();
+WebApp.MainButton.color = '#007aff';
+WebApp.MainButton.setText('Add to your Home Screen');
+WebApp.MainButton.show();
+
 function App() {
     const [view, setView] = useState<View>(View.LANDING);
 
@@ -56,6 +62,26 @@ function App() {
         }
     }, [isConnected]);
 
+    // Handle MainButton changes on view change
+    useEffect(() => {
+        if (view === View.LANDING) {
+            WebApp.MainButton.show();
+            WebApp.MainButton.setText('Add to your Home Screen');
+            WebApp.MainButton.onClick = skip;
+        }
+        if (view === View.CONNECT) {
+            WebApp.MainButton.hide();
+        }
+        if (view === View.CONNECTED) {
+            WebApp.MainButton.show();
+            WebApp.MainButton.setText('Open my Wallet');
+        }
+        if (view === View.WALLET) {
+            WebApp.MainButton.show();
+            WebApp.MainButton.setText('Contact Sales');
+        }
+    }, [view]);
+
     // TON Connect
     const tonWallet = useTonWallet();
     useEffect(() => {

diff --git a/src/main.tsx b/src/main.tsx
@@ -24,11 +24,6 @@ WebApp.ready();
 // Expand the Telegram Mini App to full screen
 WebApp.expand();
 
-WebApp.MainButton.enable();
-WebApp.MainButton.color = '#000000';
-WebApp.MainButton.setText('test');
-WebApp.MainButton.show();
-
 // Wallet Connect Config
 // 1. Get projectId
 const projectId = '10bc66667bce58aa9b1b9284ac74e731';