Add a check for wallet's network

HipoFinance · Oct 9, 2023 · b7f161b · b7f161b
1 parent 9631d8d
commit b7f161b
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 28 deletions.
diff --git a/src/ErrorDisplay.tsx b/src/ErrorDisplay.tsx
@@ -12,7 +12,7 @@ const ErrorDisplay = observer(({ model }: Props) => {
         <div
             className={
                 'fixed bottom-2 mx-4 flex max-w-screen-sm rounded-2xl bg-orange p-4 text-white drop-shadow dark:text-dark-600' +
-                (model.errorInTonAccess ? '' : ' hidden')
+                (model.errorMessage === '' ? ' hidden' : '')
             }
         >
             <img src={error} className='h-6 dark:hidden' />

diff --git a/src/Model.ts b/src/Model.ts
@@ -17,6 +17,9 @@ const treasuryAddresses = {
 const depositCoinsFee = 0x76a14bbn
 const unstakeTokensFee = 0x7f2b933n
 
+const errorMessageTonAccess = 'Unable to access blockchain'
+const errorMessageNetworkMismatch = 'Your wallet must also be on '
+
 type ActiveTab = 'stake' | 'unstake'
 
 type WaitForTransaction = 'no' | 'wait' | 'timeout' | 'done'
@@ -36,19 +39,21 @@ export class Model {
     amount = ''
     waitForTransaction: WaitForTransaction = 'no'
     ongoingRequests = 0
-    errorInTonAccess = false
+    errorMessage = ''
 
     // unobserved state
     dark = false
+    tonConnectButtonRootId: string
     tonConnectUI?: TonConnectUI
     switchNetworkCounter = 0
     timeoutConnectTonAccess?: ReturnType<typeof setTimeout>
     timeoutReadLastBlock?: ReturnType<typeof setTimeout>
     timeoutSwitchNetwork?: ReturnType<typeof setTimeout>
-    timeoutErrorInTonAccess?: ReturnType<typeof setTimeout>
+    timeoutErrorMessage?: ReturnType<typeof setTimeout>
 
-    constructor(network: Network) {
+    constructor(network: Network, tonConnectButtonRootId: string) {
         this.network = network
+        this.tonConnectButtonRootId = tonConnectButtonRootId
 
         makeObservable(this, {
             network: observable,
@@ -64,7 +69,7 @@ export class Model {
             amount: observable,
             waitForTransaction: observable,
             ongoingRequests: observable,
-            errorInTonAccess: observable,
+            errorMessage: observable,
 
             isWalletConnected: computed,
             isMainnet: computed,
@@ -102,11 +107,11 @@ export class Model {
             setWaitForTransaction: action,
             beginRequest: action,
             endRequest: action,
-            setErrorInTonAccess: action,
+            setErrorMessage: action,
         })
     }
 
-    init(buttonRootId: string) {
+    init() {
         this.dark =
             localStorage.theme === 'dark' ||
             (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
@@ -119,7 +124,7 @@ export class Model {
             }
         }
 
-        this.initTonConnect(buttonRootId)
+        this.initTonConnect()
 
         autorun(() => {
             this.connectTonAccess()
@@ -328,15 +333,21 @@ export class Model {
     setNetwork = (network: Network) => {
         this.network = network
         this.tonClient = undefined
+        this.address = undefined
         this.tonBalance = undefined
         this.treasury = undefined
         this.treasuryState = undefined
         this.htonWalletAddress = undefined
         this.htonWallet = undefined
         this.htonWalletState = undefined
         this.amount = ''
+        this.errorMessage = ''
         clearTimeout(this.timeoutConnectTonAccess)
         clearTimeout(this.timeoutReadLastBlock)
+        clearTimeout(this.timeoutErrorMessage)
+        if (this.tonConnectUI?.connected === true) {
+            void this.tonConnectUI.disconnect()
+        }
     }
 
     setTonClient = (endpoint: string) => {
@@ -372,13 +383,13 @@ export class Model {
         this.ongoingRequests -= 1
     }
 
-    setErrorInTonAccess = (errorInTonAccess: boolean) => {
-        this.errorInTonAccess = errorInTonAccess
-        clearTimeout(this.timeoutErrorInTonAccess)
-        if (errorInTonAccess) {
-            this.timeoutErrorInTonAccess = setTimeout(() => {
-                this.setErrorInTonAccess(false)
-            }, retryDelay - 500)
+    setErrorMessage = (errorMessage: string, delay: number) => {
+        this.errorMessage = errorMessage
+        clearTimeout(this.timeoutErrorMessage)
+        if (errorMessage !== '') {
+            this.timeoutErrorMessage = setTimeout(() => {
+                this.setErrorMessage('', 0)
+            }, delay)
         }
     }
 
@@ -388,7 +399,7 @@ export class Model {
         getHttpV4Endpoint({ network })
             .then(this.setTonClient)
             .catch(() => {
-                this.setErrorInTonAccess(true)
+                this.setErrorMessage(errorMessageTonAccess, retryDelay - 500)
                 this.timeoutConnectTonAccess = setTimeout(this.connectTonAccess, retryDelay)
             })
     }
@@ -445,7 +456,7 @@ export class Model {
                 this.htonWalletState = htonWalletState
             })
         } catch (e) {
-            this.setErrorInTonAccess(true)
+            this.setErrorMessage(errorMessageTonAccess, retryDelay - 500)
             clearTimeout(this.timeoutReadLastBlock)
             this.timeoutReadLastBlock = setTimeout(() => void this.readLastBlock(), retryDelay)
         } finally {
@@ -533,13 +544,11 @@ export class Model {
         return this.checkIfBalanceChanged(tonBalance, counter + 1)
     }
 
-    initTonConnect = (buttonRootId: string) => {
-        if (document.getElementById(buttonRootId) != null) {
-            this.connectWallet(buttonRootId)
+    initTonConnect = () => {
+        if (document.getElementById(this.tonConnectButtonRootId) != null) {
+            this.connectWallet()
         } else {
-            setTimeout(() => {
-                this.initTonConnect(buttonRootId)
-            }, 10)
+            setTimeout(this.initTonConnect, 10)
         }
     }
 
@@ -549,10 +558,10 @@ export class Model {
         }
     }
 
-    connectWallet = (buttonRootId: string) => {
+    connectWallet = () => {
         this.tonConnectUI = new TonConnectUI({
             manifestUrl: 'https://app.hipo.finance/tonconnect-manifest.json',
-            buttonRootId,
+            buttonRootId: this.tonConnectButtonRootId,
             actionsConfiguration: {
                 skipRedirectToWallet: 'never',
                 twaReturnUrl: 'https://t.me/HipoFinanceBot',
@@ -622,7 +631,25 @@ export class Model {
             },
         })
         this.tonConnectUI.onStatusChange((wallet) => {
-            this.setAddress(wallet == null ? undefined : Address.parseRaw(wallet.account.address))
+            if (wallet != null) {
+                const chain = wallet.account.chain
+                if (
+                    (chain === CHAIN.MAINNET && this.network === 'mainnet') ||
+                    (chain === CHAIN.TESTNET && this.network === 'testnet')
+                ) {
+                    this.setAddress(Address.parseRaw(wallet.account.address))
+                } else {
+                    runInAction(() => {
+                        this.setAddress(undefined)
+                        this.setErrorMessage(
+                            errorMessageNetworkMismatch + (this.isMainnet ? 'MainNet' : 'TestNet'),
+                            10000,
+                        )
+                    })
+                }
+            } else {
+                this.setAddress(undefined)
+            }
         })
     }
 

diff --git a/src/main.tsx b/src/main.tsx
@@ -5,8 +5,8 @@ import { Model } from './Model.ts'
 import '@twa-dev/sdk'
 import './index.css'
 
-const model = new Model('testnet')
-model.init('ton-connect-button')
+const model = new Model('testnet', 'ton-connect-button')
+model.init()
 
 ReactDOM.createRoot(document.querySelector('#root') ?? document.body).render(
     <React.StrictMode>