Fix: Manage active wallet

components/Layout/MobileLayout.jsx

@@ -29,6 +29,7 @@ import styled from '@emotion/styled'
 import { useAlgodex } from '@algodex/algodex-hooks'
 import { useEvent } from 'hooks/useEvents'
 import useTranslation from 'next-translate/useTranslation'
+import useWallets from '@/hooks/useWallets'
 
 const WalletSection = styled.section`
   grid-area: 1 / 1 / 3 / 3;

components/Wallet/Connect/WalletConnect.jsx

@@ -29,6 +29,7 @@ import signer from '@algodex/algodex-sdk/lib/wallet/signers/MyAlgoConnect'
 import styled from '@emotion/styled'
 import toast from 'react-hot-toast'
 import { useAlgodex } from '@algodex/algodex-hooks'
+import { useEvent } from 'hooks/useEvents'
 import { useEventDispatch } from '@/hooks/useEvents'
 import useMobileDetect from '@/hooks/useMobileDetect'
 import useTranslation from 'next-translate/useTranslation'
@@ -131,11 +132,30 @@ export function WalletView(props) {
     _peraDisconnect(targetWallet)
   }, [_peraDisconnect])
 
+  const setActiveWalletOnDisconnect = useCallback((wallet) => {
+    const allAddresses = localStorage.getItem('addresses')
+    if (allAddresses) {
+      const parsedAddresses = JSON.parse(allAddresses)
+      const filterWalletToDisconnect = parsedAddresses.filter(_wallet => _wallet.address !== wallet.address)
+      console.log(filterWalletToDisconnect, 'filtered disconnect')
+      // Has remaining wallet
+      if (filterWalletToDisconnect.length) {
+        localStorage.setItem('activeWallet', JSON.stringify(filterWalletToDisconnect[0]))
+      } else {
+        localStorage.removeItem('activeWallet')
+      }
+    }
+  }, [])
+
   const walletDisconnectMap = useMemo(() => ({
-    'my-algo-wallet': (wallet) => {
+    'my-algo-wallet': async (wallet) => {
+      await setActiveWalletOnDisconnect(wallet)
       myAlgoDisconnect(wallet)
     },
-    'wallet-connect': (wallet) => peraDisconnect(wallet)
+    'wallet-connect': async (wallet) => {
+      await setActiveWalletOnDisconnect(wallet)
+      peraDisconnect(wallet)
+    }
   }), [myAlgoDisconnect, peraDisconnect])
 
   const isWalletActive = useCallback((addr) => {
@@ -156,7 +176,6 @@ export function WalletView(props) {
     (wallet) => {
       if (wallet.type === 'wallet-connect') {
         try {
-          console.log(peraConnector.connector, wallet.addr, 'peraConnector.current')
           if (peraConnector.connector.connected) {
             return peraConnector.connector
           }
@@ -179,13 +198,21 @@ export function WalletView(props) {
     [dispatcher, peraConnector.connector]
   )
 
+  useEvent('switch-wallet', (data) => {
+    const {activeWallet} = data
+    localStorage.setItem('activeWallet', JSON.stringify(activeWallet))
+  })
+
   const handleWalletClick = useCallback(async (addr) => {
     const connector = handleConnectionStatus(addr)
     const _addr = {
       ...addr,
       connector
     }
     if (_addr.connector && (_addr.connector._connected || _addr.connector.connected)) {
+      dispatcher('switch-wallet', {
+        activeWallet: _addr
+      })
       !isWalletActive(addr) && setActiveWallet(_addr)
     }
   }, [handleConnectionStatus, isWalletActive, setActiveWallet])

components/Wallet/Table/OpenOrdersTable.jsx

@@ -80,6 +80,7 @@ export function OpenOrdersTable({ orders: _orders }) {
   }
   useEvent('signOut', (data) => {
     if (data.type === 'wallet') {
+      console.log('came here on mobile')
       setWallet({
         ...wallet,
         connector: {

hooks/useWallets.js

@@ -15,8 +15,10 @@
  */
 
 import { createContext, useCallback, useContext, useEffect, useState } from 'react'
+
 import PropTypes from 'prop-types'
 import events from '@algodex/algodex-sdk/lib/events'
+import { find } from 'lodash'
 import { isEqual } from 'lodash/lang'
 import { logInfo } from 'services/logRemote'
 import signer from '@algodex/algodex-sdk/lib/wallet/signers/MyAlgoConnect'
@@ -213,17 +215,57 @@ function useWallets(initialState) {
     const _filteredList = addressesList.filter((wallet) => {
       return wallet.connector && wallet.connector.connected
     })
-    return _filteredList[0]
+    const _activeWallet = localStorage.getItem('activeWallet')
+    if (_activeWallet) {
+      const activeWallet = JSON.parse(_activeWallet)
+      if (_filteredList.length > 0) {
+        const hasActiveWallet = find(_filteredList, (o) => o.address === activeWallet.address)
+        if (typeof hasActiveWallet === 'undefined') {
+          localStorage.setItem('activeWallet', JSON.stringify(_filteredList[0]))
+          return _filteredList[0]
+        } else {
+          return hasActiveWallet
+        }
+      } else {
+        localStorage.removeItem("activeWallet")
+      }
+    } else {
+      return _filteredList[0]
+    }
   }, [])
 
-  const setActiveWallet = (addressesList, action) => {
-    const _connectedWallet = filterConnectedWallet(addressesList)
-    const _activeWallet = handleWalletUpdate(_connectedWallet, action)
-    if (_activeWallet) {
-      setAlgodexWallet(_activeWallet)
-      return
+  const setActiveWallet = useCallback((addressesList, action) => {
+    const _activeWallet = localStorage.getItem('activeWallet')
+    if (_activeWallet && JSON.parse(_activeWallet).type === 'wallet-connect') {
+      const parsedActiveWallet = JSON.parse(_activeWallet)
+      const hasPeraConnect = find(addressesList, (o) => o.address === parsedActiveWallet.address)
+
+      if (hasPeraConnect && hasPeraConnect.connector && (hasPeraConnect.connector.connected || hasPeraConnect.connector._connected)) {
+        if (peraWalletConnector.connector !== null) {
+          const _connectedWallet = filterConnectedWallet(addressesList)
+          const _selectedWallet = handleWalletUpdate(_connectedWallet, action)
+          if (_selectedWallet) {
+            setAlgodexWallet(_selectedWallet)
+            return
+          }
+        }
+      } else if (peraWalletConnector.bridge === '') {
+        const _connectedWallet = filterConnectedWallet(addressesList)
+        const _selectedWallet = handleWalletUpdate(_connectedWallet, action)
+        if (_selectedWallet) {
+          setAlgodexWallet(_selectedWallet)
+          return
+        }
+      }
+    } else {
+      const _connectedWallet = filterConnectedWallet(addressesList)
+      const _selectedWallet = handleWalletUpdate(_connectedWallet, action)
+      if (_selectedWallet) {
+        setAlgodexWallet(_selectedWallet)
+        return
+      }
     }
-  }
+  }, [peraWalletConnector])
 
   const handleWalletUpdate = (wallet, action) => {
     // Update current wallet
@@ -235,7 +277,8 @@ function useWallets(initialState) {
 
     switch (action) {
       case 'update':
-        return _wallet
+        // return _wallet
+        return wallet
       case 'new':
         return wallet
       default:
@@ -275,6 +318,10 @@ function useWallets(initialState) {
       }
       setIsRehydrating(true)
       localStorage.setItem('addresses', JSON.stringify(_allAddresses))
+      if (actionType === 'new') {
+        const newWallet = find(_allAddresses, o => o.address === newAddress[0].address)
+        localStorage.setItem('activeWallet', JSON.stringify(newWallet))
+      }
       setAddresses(_allAddresses)
     }
   }
@@ -293,10 +340,12 @@ function useWallets(initialState) {
     })
     setIsRehydrating(true)
     localStorage.setItem('addresses', JSON.stringify(_allAddresses))
+    if (actionType === 'new') {
+      const newWallet = find(_allAddresses, o => o.address === newAddress[0].address)
+      localStorage.setItem('activeWallet', JSON.stringify(newWallet))
+    }
     setActiveWallet(_allAddresses, actionType)
     setAddresses(_allAddresses)
-    // const _activeWallet = filterConnectedWallet(_allAddresses)
-    // setAlgodexWallet(_activeWallet)
   }
 
   const removeFromExistingList = (filteredAddressesList) => {
@@ -312,41 +361,41 @@ function useWallets(initialState) {
     setActiveWallet(_filteredAddressesList, 'new')
   }
 
-  const removeLastWalletFromList = (addressesList) => {
-    const _wallet = addressesList[0]
-    if (typeof wallet !== 'undefined') {
-      let disconnectedActiveWallet = {}
-      if (wallet.type === 'wallet-connect') {
-        disconnectedActiveWallet = {
-          ..._wallet,
-          connector: {
-            _connected: false,
-            connected: false
-          }
-        }
-      } else {
-        disconnectedActiveWallet = {
-          ..._wallet,
-          connector: {
-            ..._wallet.connector,
-            connected: false
-          }
-        }
-      }
-      setActiveWallet([disconnectedActiveWallet], 'new')
-    } else {
-      let disconnectedActiveWallet = {}
-      disconnectedActiveWallet = {
-        ..._wallet,
-        connector: {
-          ..._wallet.connector,
-          connected: false
-        }
-      }
-      setActiveWallet([disconnectedActiveWallet], 'new')
-    }
-    dispatcher('signOut', { type: 'wallet' })
-  }
+  // const removeLastWalletFromList = (addressesList) => {
+  //   const _wallet = addressesList[0]
+  //   if (typeof wallet !== 'undefined') {
+  //     let disconnectedActiveWallet = {}
+  //     if (wallet.type === 'wallet-connect') {
+  //       disconnectedActiveWallet = {
+  //         ..._wallet,
+  //         connector: {
+  //           _connected: false,
+  //           connected: false
+  //         }
+  //       }
+  //     } else {
+  //       disconnectedActiveWallet = {
+  //         ..._wallet,
+  //         connector: {
+  //           ..._wallet.connector,
+  //           connected: false
+  //         }
+  //       }
+  //     }
+  //     setActiveWallet([disconnectedActiveWallet], 'new')
+  //   } else {
+  //     let disconnectedActiveWallet = {}
+  //     disconnectedActiveWallet = {
+  //       ..._wallet,
+  //       connector: {
+  //         ..._wallet.connector,
+  //         connected: false
+  //       }
+  //     }
+  //     setActiveWallet([disconnectedActiveWallet], 'new')
+  //   }
+  //   dispatcher('signOut', { type: 'wallet' })
+  // }
 
   /**
    * Handles Connection with wallet
@@ -384,12 +433,21 @@ function useWallets(initialState) {
       if (_remainingAddresses.length > 0) {
         removeFromExistingList(_remainingAddresses)
       } else {
-        addressesList.length && removeLastWalletFromList(addressesList)
+        const _wallet =  addressesList[0]
+        let disconnectedActiveWallet = {}
+        disconnectedActiveWallet = {
+          ..._wallet,
+          connector: {
+            ..._wallet.connector,
+            connected: false
+          }
+        }
+        setAlgodexWallet(disconnectedActiveWallet)
+        // addressesList.length && removeLastWalletFromList(addressesList)
       }
       logInfo(
         `Disconnected Successfully with : ${_addresses} removed and ${_remainingAddresses.length} remaining`
       )
-      // setIsRehydrating(true)
       localStorage.setItem('addresses', JSON.stringify(_remainingAddresses))
       setAddresses(_remainingAddresses)
       console.error('Handle removing from storage', _addresses)
@@ -451,3 +509,4 @@ function useWallets(initialState) {
 }
 
 export default useWallets
+