diff --git a/components/Layout/MobileLayout.jsx b/components/Layout/MobileLayout.jsx index 4cfedc015..e3b944e00 100644 --- a/components/Layout/MobileLayout.jsx +++ b/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; diff --git a/components/Wallet/Connect/WalletConnect.jsx b/components/Wallet/Connect/WalletConnect.jsx index 31d6974c0..22ac8bb57 100644 --- a/components/Wallet/Connect/WalletConnect.jsx +++ b/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,6 +198,11 @@ 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 = { @@ -186,6 +210,9 @@ export function WalletView(props) { connector } if (_addr.connector && (_addr.connector._connected || _addr.connector.connected)) { + dispatcher('switch-wallet', { + activeWallet: _addr + }) !isWalletActive(addr) && setActiveWallet(_addr) } }, [handleConnectionStatus, isWalletActive, setActiveWallet]) diff --git a/components/Wallet/Table/OpenOrdersTable.jsx b/components/Wallet/Table/OpenOrdersTable.jsx index 31af6175f..3107843ac 100644 --- a/components/Wallet/Table/OpenOrdersTable.jsx +++ b/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: { diff --git a/hooks/useWallets.js b/hooks/useWallets.js index 5413c6a68..e0af4f961 100644 --- a/hooks/useWallets.js +++ b/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 +