From 4898b610d97ef8ea0e40bf92a98cb3cd1e1972c4 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Wed, 26 Oct 2022 15:17:03 +0100 Subject: [PATCH 01/11] Persisted active wallet --- components/Wallet/Connect/WalletConnect.jsx | 10 +- hooks/useWallets.js | 112 ++++++++++++++++++-- 2 files changed, 110 insertions(+), 12 deletions(-) diff --git a/components/Wallet/Connect/WalletConnect.jsx b/components/Wallet/Connect/WalletConnect.jsx index 31d6974c0..7becda283 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' @@ -156,7 +157,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 +179,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 +191,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/hooks/useWallets.js b/hooks/useWallets.js index 5413c6a68..475f67052 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' @@ -116,6 +118,7 @@ function useWallets(initialState) { * settting addresses. */ useEffect(() => { + console.log('came here secod') const res = localStorage.getItem('addresses') if (res) { const _addresses = _mergeAddresses(JSON.parse(localStorage.getItem('addresses')), addresses) @@ -124,9 +127,11 @@ function useWallets(initialState) { * You can work with initial state */ if (typeof _wallet === 'undefined') { + console.log('came here initial', _addresses) setIsRehydrating(true) setAddresses(_addresses) } else { + console.log('came here others') setActiveWallet([_wallet], 'update') } } @@ -141,7 +146,10 @@ function useWallets(initialState) { * Watches for changes in Addresses and Pera Connection. */ useEffect(() => { + + console.log('came here first') const res = localStorage.getItem('addresses') + console.log(JSON.parse(res), 'response from storage') // Check if addresses exist in local storage if (res && res.length && isRehydrating) { const _reHydratedWallet = async () => { @@ -167,8 +175,10 @@ function useWallets(initialState) { } }) if (mappedAddresses.length && _wallet === undefined) { + console.log(mappedAddresses, 'first portion') setActiveWallet(mappedAddresses, 'new') } else { + console.log(mappedAddresses, 'second portion') setActiveWallet(mappedAddresses, 'update') } } @@ -210,20 +220,74 @@ function useWallets(initialState) { * This is used to ensure consistency in activeWallet */ const filterConnectedWallet = useCallback((addressesList) => { + console.log(addressesList, 'addresses list') const _filteredList = addressesList.filter((wallet) => { - return wallet.connector && wallet.connector.connected + return wallet.connector && (wallet.connector.connected || wallet.connector._connected) + // return wallet.connector && wallet.connector.connected }) + console.log(_filteredList, 'addresses list filtered') + const _activeWallet = localStorage.getItem('activeWallet') + if (_activeWallet) { + const activeWallet = JSON.parse(_activeWallet) + console.log(activeWallet, _filteredList, 'both come here') + // There is a list of address + if (_filteredList.length > 0) { + // Find the active wallet + const hasActiveWallet = find(_filteredList, (o) => o.address === activeWallet.address) + if (typeof hasActiveWallet === 'undefined') { + localStorage.setItem('activeWallet', JSON.stringify(_filteredList[0])) + console.log('is first', _filteredList[0]) + return _filteredList[0] + } else { + console.log('is updating', hasActiveWallet) + return hasActiveWallet + } + } else { + localStorage.removeItem("activeWallet") + } + } 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) + // Ensure wallet connector is active + const hasPeraConnect = find(addressesList, (o) => o.address === parsedActiveWallet.address) + if (hasPeraConnect && hasPeraConnect.connector && hasPeraConnect.connector.connected){ + const _connectedWallet = filterConnectedWallet(addressesList) + // console.log(_connectedWallet, 'connected wallet') + const _selectedWallet = handleWalletUpdate(_connectedWallet, action) + + // if there is address in local storage, + // and that address is connected, use the address as active address + + // console.log(_selectedWallet, 'wallet to update here') + if (_selectedWallet) { + // localStorage.setItem('activeWallet', JSON.stringify(_selectedWallet)) + setAlgodexWallet(_selectedWallet) + return + } + } + } else { + const _connectedWallet = filterConnectedWallet(addressesList) + // console.log(_connectedWallet, 'connected wallet') + const _selectedWallet = handleWalletUpdate(_connectedWallet, action) + + // if there is address in local storage, + // and that address is connected, use the address as active address + + // console.log(_selectedWallet, 'wallet to update here') + if (_selectedWallet) { + // localStorage.setItem('activeWallet', JSON.stringify(_selectedWallet)) + setAlgodexWallet(_selectedWallet) + return + } } - } + + + }, [peraWalletConnector]) const handleWalletUpdate = (wallet, action) => { // Update current wallet @@ -235,17 +299,42 @@ function useWallets(initialState) { switch (action) { case 'update': + console.log('update', _wallet) return _wallet case 'new': + console.log('new', wallet) return wallet default: if (_wallet === undefined) { + console.log('deault first', wallet) return wallet } + console.log('deault secid', _wallet) return _wallet } } + // const saveSelectedWallet = () => { + // // Get active address from local storage + // const _activeWallet = localStorage.getItem('activeWallet') + // if (_activeWallet) { + // const activeWallet = JSON.parse(_activeWallet) + // // There is a list of address + // if (_filteredList.length > 0) { + // // Find the active wallet + // 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") + // } + // } + // } + /** * IMPORTANT * If for any reason Pera does not have an active connection @@ -295,8 +384,6 @@ function useWallets(initialState) { localStorage.setItem('addresses', JSON.stringify(_allAddresses)) setActiveWallet(_allAddresses, actionType) setAddresses(_allAddresses) - // const _activeWallet = filterConnectedWallet(_allAddresses) - // setAlgodexWallet(_activeWallet) } const removeFromExistingList = (filteredAddressesList) => { @@ -390,7 +477,7 @@ function useWallets(initialState) { `Disconnected Successfully with : ${_addresses} removed and ${_remainingAddresses.length} remaining` ) // setIsRehydrating(true) - localStorage.setItem('addresses', JSON.stringify(_remainingAddresses)) + localStorage.setItem('addresses', JSON.stringify(_remainingAddresses)) setAddresses(_remainingAddresses) console.error('Handle removing from storage', _addresses) }, @@ -402,11 +489,14 @@ function useWallets(initialState) { if (_addresses.length > 0) { logInfo('Handling Reconnecting session') setIsRehydrating(true) + // console.log(localStorage.getItem('activeWallet'), 'Hello here') const sameWalletClient = addresses.filter((wallet) => wallet.type === _addresses[0].type) const accounts = await http.indexer.fetchAccounts(_addresses) if (sameWalletClient.length > _addresses.length) { + // console.log('up here') addNewWalletToAddressesList(sameWalletClient, _addresses, 'update') } else { + // console.log('down here') replaceWalletInAddressList(_addresses, accounts, 'update') } dispatcher('signIn', { type: 'wallet' }) From 395a250e190412629f68b0c5f953add82eea9982 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Wed, 26 Oct 2022 22:28:37 +0100 Subject: [PATCH 02/11] Fix updating state --- hooks/useWallets.js | 639 +++++++++++++++++++++++++++++++++++++++----- 1 file changed, 572 insertions(+), 67 deletions(-) diff --git a/hooks/useWallets.js b/hooks/useWallets.js index 475f67052..b1655b6b0 100644 --- a/hooks/useWallets.js +++ b/hooks/useWallets.js @@ -1,3 +1,516 @@ +// /* +// * Algodex Frontend (algodex-react) +// * Copyright (C) 2021 - 2022 Algodex VASP (BVI) Corp. +// * This program is free software: you can redistribute it and/or modify +// * it under the terms of the GNU Affero General Public License as published +// * by the Free Software Foundation, either version 3 of the License, or +// * (at your option) any later version. + +// * This program is distributed in the hope that it will be useful, +// * but WITHOUT ANY WARRANTY; without even the implied warranty of +// * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// * GNU Affero General Public License for more details. +// * You should have received a copy of the GNU Affero General Public License +// * along with this program. If not, see . +// */ + +// 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' +// import useAccountsInfo from '@/hooks/useAccountsInfo' +// import { useAlgodex } from '@algodex/algodex-hooks' +// import { useEvent } from 'hooks/useEvents' +// import { useEventDispatch } from './useEvents' +// import useMyAlgoConnect from './useMyAlgoConnect' +// import usePeraConnection from './usePeraConnection' +// import useWalletConnect from './useWalletConnect' + +// /** +// * +// * @param {Array} a +// * @param {Array} b +// * @return {Array} +// * @private +// */ +// function _mergeAddresses(a, b) { +// if (!Array.isArray(a) || !Array.isArray(b)) { +// throw new TypeError('Must be an array of addresses!') +// } +// const map = new Map() +// a.forEach((wallet) => map.set(wallet.address, wallet)) +// b.forEach((wallet) => map.set(wallet.address, { ...map.get(wallet.address), ...wallet })) +// return Array.from(map.values()) +// } +// export const WalletsContext = createContext() +// export function WalletsProvider({ children }) { +// const [addresses, setAddresses] = useState([]) +// const { connector: walletConnect } = useWalletConnect() +// return ( +// +// {children} +// +// ) +// } +// WalletsProvider.propTypes = { +// children: PropTypes.node +// } +// /** +// * Use Wallets Hooks +// * @param {Object} initialState Wallet Initial State +// * @return {*} +// */ +// function useWallets(initialState) { +// const dispatcher = useEventDispatch() +// const { connector: myAlgoConnector } = useMyAlgoConnect() +// const context = useContext(WalletsContext) +// const { peraWalletConnector } = usePeraConnection() +// if (context === undefined) { +// throw new Error('Must be inside of a Wallets Provider') +// } +// const [wallet, setWallet] = useState(initialState) +// const [addresses, setAddresses] = context + +// const { http, wallet: _wallet, setWallet: setAlgodexWallet } = useAlgodex() + +// const onEvents = useCallback( +// (props) => { +// const { type, wallet: _wallet } = props +// if (type === 'change' && !isEqual(wallet, _wallet)) { +// setWallet(_wallet) +// } +// }, +// [setWallet, wallet] +// ) +// useEffect(() => { +// events.on('wallet', onEvents) +// return () => { +// events.off('wallet', onEvents) +// } +// }, [onEvents]) + +// const handleRemoveWallet = (disconnectedWallet) => { +// const res = localStorage.getItem('addresses') +// if (res) { +// const _connectedAddresses = JSON.parse(res).filter( +// (wallet) => wallet.address !== disconnectedWallet.address +// ) +// localStorage.setItem('addresses', JSON.stringify(_connectedAddresses)) +// setIsRehydrating(true) +// setAddresses(_connectedAddresses) +// } +// } + +// useEvent('bridge-disconnected', (data) => { +// handleRemoveWallet(data.activeWallet) +// console.log(data.activeWallet, 'active wallet to dsiconnect') +// }) + +// /** +// * Fetches all Addresses from Local storage +// * and populate addresses list. +// * +// * Ensures there is no duplicate race conndition while +// * settting addresses. +// */ +// useEffect(() => { +// const res = localStorage.getItem('addresses') +// if (res) { +// const _addresses = _mergeAddresses(JSON.parse(localStorage.getItem('addresses')), addresses) +// /** +// * If initialState (wallet) is set, don't set addresses +// * You can work with initial state +// */ +// if (typeof _wallet === 'undefined') { +// setIsRehydrating(true) +// setAddresses(_addresses) +// } else { +// setActiveWallet([_wallet], 'update') +// } +// } +// }, []) + +// const [isRehydrating, setIsRehydrating] = useState(false) + +// /** +// * Get Hydrated Addresses +// * Ensures addresses are properly Hydrated at all times +// * +// * Watches for changes in Addresses and Pera Connection. +// */ +// useEffect(() => { +// const res = localStorage.getItem('addresses') +// // Check if addresses exist in local storage +// if (res && res.length && isRehydrating) { +// const _reHydratedWallet = async () => { +// setIsRehydrating(true) +// // '@randlabs/myalgo-connect' is imported dynamically +// // because it uses the window object +// const myAlgoConnector = {} +// const MyAlgoConnect = (await import('@randlabs/myalgo-connect')).default +// MyAlgoConnect.prototype.sign = signer +// myAlgoConnector.current = new MyAlgoConnect() +// myAlgoConnector.current.connected = true +// const mappedAddresses = JSON.parse(res).map((addr) => { +// if (addr.type === 'my-algo-wallet') { +// return { +// ...addr, +// connector: myAlgoConnector.current +// } +// } else { +// return { +// ...addr, +// connector: peraWalletConnector.connector +// } +// } +// }) +// if (mappedAddresses.length && _wallet === undefined) { +// setActiveWallet(mappedAddresses, 'new') +// } else { +// setActiveWallet(mappedAddresses, 'update') +// } +// } +// _reHydratedWallet() +// setIsRehydrating(false) +// } +// }, [addresses, peraWalletConnector]) + +// /** +// * Do rehydration when new data is fetched, during +// * +// */ + +// const walletsQuery = useAccountsInfo(addresses) + +// useEffect(() => { +// const res = localStorage.getItem('addresses') +// if (res && _wallet && walletsQuery.data && !isRehydrating) { +// const mappedAddresses = addresses.map((wallet, idx) => { +// if (_wallet.address === wallet.address) { +// setAlgodexWallet({ +// ..._wallet, +// ...walletsQuery.data[idx] +// }) +// } +// return { ...wallet, ...walletsQuery.data[idx] } +// }) +// const _mappedAddresses = mappedAddresses.filter((wallet) => Object.keys(wallet).length) +// setAddresses(_mappedAddresses) + +// // Below is commented out because setting localstorage breaks with myAlgo Popup +// // localStorage.setItem('addresses', JSON.stringify(mappedAddresses)) +// } +// }, [walletsQuery.data]) + +// /** +// * Returns the first occurence of connected wallets is a list of addresses. +// * +// * This is used to ensure consistency in activeWallet +// */ +// const filterConnectedWallet = useCallback((addressesList) => { +// const _filteredList = addressesList.filter((wallet) => { +// return wallet.connector && wallet.connector.connected +// }) +// // if (_filteredList.length < 1) { +// // localStorage.removeItem("activeWallet") +// // } +// // 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] +// // } +// // console.log('came in') +// // const _activeWallet = localStorage.getItem('activeWallet') +// // if (_activeWallet) { +// // const activeWallet = JSON.parse(_activeWallet) +// // if (_filteredList.length > 0) { +// // // const hasActiveWallet = _filteredList.find((o) => o.address === activeWallet.address) +// // // console.log(hasActiveWallet, 'active wallet') +// // // if (typeof hasActiveWallet === 'undefined') { +// // // localStorage.setItem('activeWallet', JSON.stringify(_filteredList[0])) +// // // } else { +// // // return hasActiveWallet +// // // } +// // } +// // } +// return _filteredList[0] +// }, []) + +// const setActiveWallet = (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){ +// // console.log('called', addressesList) +// // const _connectedWallet = filterConnectedWallet(addressesList) +// // const _selectedWallet = handleWalletUpdate(_connectedWallet, action) +// // if (_selectedWallet) { +// // setAlgodexWallet(_selectedWallet) +// // // localStorage.setItem('activeWallet', JSON.stringify(_selectedWallet)) +// // return +// // } +// // } +// // } else { +// // console.log('called second', addressesList) +// // const _connectedWallet = filterConnectedWallet(addressesList) +// // const _selectedWallet = handleWalletUpdate(_connectedWallet, action) +// // if (_selectedWallet) { +// // setAlgodexWallet(_selectedWallet) +// // // localStorage.setItem('activeWallet', JSON.stringify(_selectedWallet)) +// // return +// // } +// // } +// const _connectedWallet = filterConnectedWallet(addressesList) +// const _selectedWallet = handleWalletUpdate(_connectedWallet, action) +// if (_selectedWallet) { +// setAlgodexWallet(_selectedWallet) +// return +// } +// } + +// const handleWalletUpdate = (wallet, action) => { +// // Update current wallet +// // Set new wallet +// if (!wallet) { +// console.error('No wallet provided') +// return +// } + +// switch (action) { +// case 'update': +// return _wallet +// case 'new': +// return wallet +// default: +// if (_wallet === undefined) { +// return wallet +// } +// return _wallet +// } +// } + +// /** +// * IMPORTANT +// * If for any reason Pera does not have an active connection +// * or connection is null, remove all instance of pera wallet from the app +// */ +// const removePeraWalletFromLocStorage = () => { +// // To be implemented +// } + +// // Ensure PeraWallet is connection or disconnect Pera + +// /** +// * Update Addresses from local storage +// * Update Addresses when rehydration happes +// */ + +// const addNewWalletToAddressesList = async (sameClient, newAddress, actionType = 'new') => { +// const otherWalletClients = +// addresses.filter((wallet) => wallet.type !== newAddress[0].type) || [] + +// const accounts = await http.indexer.fetchAccounts(newAddress) +// const mergedPrivateAddresses = _mergeAddresses(newAddress, accounts) +// const _allAddresses = _mergeAddresses(otherWalletClients, mergedPrivateAddresses) +// if (sameClient.length > newAddress.length) { +// if (_allAddresses.length > 0) { +// setActiveWallet(_allAddresses, actionType) +// } +// setIsRehydrating(true) +// localStorage.setItem('addresses', JSON.stringify(_allAddresses)) +// setAddresses(_allAddresses) +// } +// } + +// const replaceWalletInAddressList = (newAddress, accounts, actionType = 'new') => { +// const allAddresses = _mergeAddresses(addresses, _mergeAddresses(newAddress, accounts)) +// const _otherAddresses = JSON.parse(localStorage.getItem('addresses')) +// const _allAddresses = _mergeAddresses(_otherAddresses || [], allAddresses).map((wallet) => { +// if (wallet.type === 'wallet-connect') { +// return { +// ...wallet, +// connector: peraWalletConnector.connector +// } +// } +// return wallet +// }) +// setIsRehydrating(true) +// localStorage.setItem('addresses', JSON.stringify(_allAddresses)) +// setActiveWallet(_allAddresses, actionType) +// setAddresses(_allAddresses) +// } + +// const removeFromExistingList = (filteredAddressesList) => { +// const _filteredAddressesList = filteredAddressesList.map((wallet) => { +// if (wallet.type === 'wallet-connect') { +// return { +// ...wallet, +// connector: peraWalletConnector.connector +// } +// } +// return wallet +// }) +// 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' }) +// } + +// /** +// * Handles Connection with wallet +// */ +// const handleConnect = useCallback( +// async (_addresses) => { +// if (_addresses.length > 0) { +// logInfo('Handling Connect') +// const sameWalletClient = addresses.filter((wallet) => wallet.type === _addresses[0].type) +// const accounts = await http.indexer.fetchAccounts(_addresses) +// if (sameWalletClient.length > _addresses.length) { +// addNewWalletToAddressesList(sameWalletClient, _addresses) +// } else { +// replaceWalletInAddressList(_addresses, accounts) +// } +// dispatcher('signIn', { type: 'wallet' }) +// } +// }, +// [setAddresses] +// ) + +// // Handle any Disconnect +// const handleDisconnect = useCallback( +// (_addresses) => { +// setIsRehydrating(true) +// const locStorageAddr = JSON.parse(localStorage.getItem('addresses')) +// const addressesList = locStorageAddr.length > 0 ? locStorageAddr : addresses || [] +// const remainingAddresses = +// addressesList.filter((wallet) => { +// if (_addresses && _addresses[0]) { +// return wallet.address !== _addresses[0] +// } +// }) || [] +// let _remainingAddresses = [...remainingAddresses] +// if (_remainingAddresses.length > 0) { +// removeFromExistingList(_remainingAddresses) +// } else { +// 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) +// }, +// [setAddresses] +// ) + +// const sessionUpdate = useCallback( +// async (_addresses) => { +// if (_addresses.length > 0) { +// logInfo('Handling Reconnecting session') +// setIsRehydrating(true) +// const sameWalletClient = addresses.filter((wallet) => wallet.type === _addresses[0].type) +// const accounts = await http.indexer.fetchAccounts(_addresses) +// if (sameWalletClient.length > _addresses.length) { +// addNewWalletToAddressesList(sameWalletClient, _addresses, 'update') +// } else { +// replaceWalletInAddressList(_addresses, accounts, 'update') +// } +// dispatcher('signIn', { type: 'wallet' }) +// } +// }, +// [setAddresses] +// ) + +// // My Algo Connect/Disconnect +// const { connect: myAlgoConnect, disconnect: myAlgoDisconnect } = useMyAlgoConnect( +// handleConnect, +// handleDisconnect +// ) +// // My Algo/Disconnect +// // const { +// // connect: peraConnect, +// // disconnect: peraDisconnect, +// // connector: _peraConnector +// // } = useWalletConnect(handleConnect, handleDisconnect, sessionUpdate) +// // Pera Connect/Disconnect + +// const { connect: peraConnectOriginal, disconnect: peraDisconnectOriginal } = usePeraConnection( +// handleConnect, +// handleDisconnect, +// sessionUpdate +// ) + +// return { +// wallet: _wallet, +// setWallet: setAlgodexWallet, +// addresses, +// myAlgoConnect, +// peraConnect: peraConnectOriginal, +// peraDisconnect: peraDisconnectOriginal, +// // peraConnect, +// // peraDisconnect, +// myAlgoDisconnect, +// myAlgoConnector, +// // peraConnector: _peraConnector +// peraConnector: peraWalletConnector +// } +// } + +// export default useWallets + + /* * Algodex Frontend (algodex-react) * Copyright (C) 2021 - 2022 Algodex VASP (BVI) Corp. @@ -15,10 +528,8 @@ */ 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' @@ -29,6 +540,7 @@ import { useEventDispatch } from './useEvents' import useMyAlgoConnect from './useMyAlgoConnect' import usePeraConnection from './usePeraConnection' import useWalletConnect from './useWalletConnect' +import { find } from 'lodash' /** * @@ -118,7 +630,6 @@ function useWallets(initialState) { * settting addresses. */ useEffect(() => { - console.log('came here secod') const res = localStorage.getItem('addresses') if (res) { const _addresses = _mergeAddresses(JSON.parse(localStorage.getItem('addresses')), addresses) @@ -127,11 +638,9 @@ function useWallets(initialState) { * You can work with initial state */ if (typeof _wallet === 'undefined') { - console.log('came here initial', _addresses) setIsRehydrating(true) setAddresses(_addresses) } else { - console.log('came here others') setActiveWallet([_wallet], 'update') } } @@ -146,10 +655,7 @@ function useWallets(initialState) { * Watches for changes in Addresses and Pera Connection. */ useEffect(() => { - - console.log('came here first') const res = localStorage.getItem('addresses') - console.log(JSON.parse(res), 'response from storage') // Check if addresses exist in local storage if (res && res.length && isRehydrating) { const _reHydratedWallet = async () => { @@ -175,10 +681,8 @@ function useWallets(initialState) { } }) if (mappedAddresses.length && _wallet === undefined) { - console.log(mappedAddresses, 'first portion') setActiveWallet(mappedAddresses, 'new') } else { - console.log(mappedAddresses, 'second portion') setActiveWallet(mappedAddresses, 'update') } } @@ -219,74 +723,102 @@ function useWallets(initialState) { * * This is used to ensure consistency in activeWallet */ + // const filterConnectedWallet = useCallback((addressesList) => { + // const _filteredList = addressesList.filter((wallet) => { + // return wallet.connector && wallet.connector.connected + // }) + // return _filteredList[0] + // }, []) + const filterConnectedWallet = useCallback((addressesList) => { - console.log(addressesList, 'addresses list') const _filteredList = addressesList.filter((wallet) => { - return wallet.connector && (wallet.connector.connected || wallet.connector._connected) - // return wallet.connector && wallet.connector.connected + // return wallet.connector && (wallet.connector.connected || wallet.connector._connected) + return wallet.connector && wallet.connector.connected }) - console.log(_filteredList, 'addresses list filtered') + // if (_filteredList.length < 1) { + // localStorage.removeItem("activeWallet") + // } const _activeWallet = localStorage.getItem('activeWallet') + console.log(_activeWallet, 'active wallet fiilterred') if (_activeWallet) { const activeWallet = JSON.parse(_activeWallet) - console.log(activeWallet, _filteredList, 'both come here') - // There is a list of address + console.log(activeWallet, 'activeWallet parsed') if (_filteredList.length > 0) { - // Find the active wallet + console.log(_filteredList, '_filteredList') const hasActiveWallet = find(_filteredList, (o) => o.address === activeWallet.address) + console.log(hasActiveWallet, 'hasActiveWallet') if (typeof hasActiveWallet === 'undefined') { localStorage.setItem('activeWallet', JSON.stringify(_filteredList[0])) - console.log('is first', _filteredList[0]) return _filteredList[0] } else { - console.log('is updating', hasActiveWallet) return hasActiveWallet } } else { localStorage.removeItem("activeWallet") } + } else { + return _filteredList[0] } - return _filteredList[0] + // console.log('came in') + // const _activeWallet = localStorage.getItem('activeWallet') + // if (_activeWallet) { + // const activeWallet = JSON.parse(_activeWallet) + // if (_filteredList.length > 0) { + // const hasActiveWallet = _filteredList.find((o) => o.address === activeWallet.address) + // console.log(hasActiveWallet, 'active wallet') + // if (typeof hasActiveWallet === 'undefined') { + // localStorage.setItem('activeWallet', JSON.stringify(_filteredList[0])) + // } else { + // return hasActiveWallet + // } + // } + // } + // 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') + console.log(_activeWallet, 'actiive wallet') if (_activeWallet && JSON.parse(_activeWallet).type === 'wallet-connect') { const parsedActiveWallet = JSON.parse(_activeWallet) - // Ensure wallet connector is active const hasPeraConnect = find(addressesList, (o) => o.address === parsedActiveWallet.address) + console.log('called outsiide with everything', addressesList, hasPeraConnect, parsedActiveWallet) if (hasPeraConnect && hasPeraConnect.connector && hasPeraConnect.connector.connected){ + console.log('called', addressesList) const _connectedWallet = filterConnectedWallet(addressesList) - // console.log(_connectedWallet, 'connected wallet') const _selectedWallet = handleWalletUpdate(_connectedWallet, action) - - // if there is address in local storage, - // and that address is connected, use the address as active address - - // console.log(_selectedWallet, 'wallet to update here') if (_selectedWallet) { - // localStorage.setItem('activeWallet', JSON.stringify(_selectedWallet)) setAlgodexWallet(_selectedWallet) + // localStorage.setItem('activeWallet', JSON.stringify(_selectedWallet)) return } } } else { + console.log('called second', addressesList) const _connectedWallet = filterConnectedWallet(addressesList) - // console.log(_connectedWallet, 'connected wallet') + console.log(_connectedWallet, 'actiive wallet to connect') const _selectedWallet = handleWalletUpdate(_connectedWallet, action) - - // if there is address in local storage, - // and that address is connected, use the address as active address - - // console.log(_selectedWallet, 'wallet to update here') if (_selectedWallet) { - // localStorage.setItem('activeWallet', JSON.stringify(_selectedWallet)) setAlgodexWallet(_selectedWallet) + // localStorage.setItem('activeWallet', JSON.stringify(_selectedWallet)) return } - } - - + } + // const _connectedWallet = filterConnectedWallet(addressesList) + // const _selectedWallet = handleWalletUpdate(_connectedWallet, action) + // if (_selectedWallet) { + // setAlgodexWallet(_selectedWallet) + // return + // } }, [peraWalletConnector]) const handleWalletUpdate = (wallet, action) => { @@ -299,42 +831,17 @@ function useWallets(initialState) { switch (action) { case 'update': - console.log('update', _wallet) return _wallet case 'new': - console.log('new', wallet) return wallet default: if (_wallet === undefined) { - console.log('deault first', wallet) return wallet } - console.log('deault secid', _wallet) return _wallet } } - // const saveSelectedWallet = () => { - // // Get active address from local storage - // const _activeWallet = localStorage.getItem('activeWallet') - // if (_activeWallet) { - // const activeWallet = JSON.parse(_activeWallet) - // // There is a list of address - // if (_filteredList.length > 0) { - // // Find the active wallet - // 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") - // } - // } - // } - /** * IMPORTANT * If for any reason Pera does not have an active connection @@ -477,7 +984,7 @@ function useWallets(initialState) { `Disconnected Successfully with : ${_addresses} removed and ${_remainingAddresses.length} remaining` ) // setIsRehydrating(true) - localStorage.setItem('addresses', JSON.stringify(_remainingAddresses)) + localStorage.setItem('addresses', JSON.stringify(_remainingAddresses)) setAddresses(_remainingAddresses) console.error('Handle removing from storage', _addresses) }, @@ -489,14 +996,11 @@ function useWallets(initialState) { if (_addresses.length > 0) { logInfo('Handling Reconnecting session') setIsRehydrating(true) - // console.log(localStorage.getItem('activeWallet'), 'Hello here') const sameWalletClient = addresses.filter((wallet) => wallet.type === _addresses[0].type) const accounts = await http.indexer.fetchAccounts(_addresses) if (sameWalletClient.length > _addresses.length) { - // console.log('up here') addNewWalletToAddressesList(sameWalletClient, _addresses, 'update') } else { - // console.log('down here') replaceWalletInAddressList(_addresses, accounts, 'update') } dispatcher('signIn', { type: 'wallet' }) @@ -541,3 +1045,4 @@ function useWallets(initialState) { } export default useWallets + From 7f08c4cb336cee199cbc91419fac3aaa1b379ae0 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Wed, 26 Oct 2022 22:30:57 +0100 Subject: [PATCH 03/11] Some cleanups --- hooks/useWallets.js | 554 -------------------------------------------- 1 file changed, 554 deletions(-) diff --git a/hooks/useWallets.js b/hooks/useWallets.js index b1655b6b0..90a97be9e 100644 --- a/hooks/useWallets.js +++ b/hooks/useWallets.js @@ -1,516 +1,3 @@ -// /* -// * Algodex Frontend (algodex-react) -// * Copyright (C) 2021 - 2022 Algodex VASP (BVI) Corp. -// * This program is free software: you can redistribute it and/or modify -// * it under the terms of the GNU Affero General Public License as published -// * by the Free Software Foundation, either version 3 of the License, or -// * (at your option) any later version. - -// * This program is distributed in the hope that it will be useful, -// * but WITHOUT ANY WARRANTY; without even the implied warranty of -// * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// * GNU Affero General Public License for more details. -// * You should have received a copy of the GNU Affero General Public License -// * along with this program. If not, see . -// */ - -// 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' -// import useAccountsInfo from '@/hooks/useAccountsInfo' -// import { useAlgodex } from '@algodex/algodex-hooks' -// import { useEvent } from 'hooks/useEvents' -// import { useEventDispatch } from './useEvents' -// import useMyAlgoConnect from './useMyAlgoConnect' -// import usePeraConnection from './usePeraConnection' -// import useWalletConnect from './useWalletConnect' - -// /** -// * -// * @param {Array} a -// * @param {Array} b -// * @return {Array} -// * @private -// */ -// function _mergeAddresses(a, b) { -// if (!Array.isArray(a) || !Array.isArray(b)) { -// throw new TypeError('Must be an array of addresses!') -// } -// const map = new Map() -// a.forEach((wallet) => map.set(wallet.address, wallet)) -// b.forEach((wallet) => map.set(wallet.address, { ...map.get(wallet.address), ...wallet })) -// return Array.from(map.values()) -// } -// export const WalletsContext = createContext() -// export function WalletsProvider({ children }) { -// const [addresses, setAddresses] = useState([]) -// const { connector: walletConnect } = useWalletConnect() -// return ( -// -// {children} -// -// ) -// } -// WalletsProvider.propTypes = { -// children: PropTypes.node -// } -// /** -// * Use Wallets Hooks -// * @param {Object} initialState Wallet Initial State -// * @return {*} -// */ -// function useWallets(initialState) { -// const dispatcher = useEventDispatch() -// const { connector: myAlgoConnector } = useMyAlgoConnect() -// const context = useContext(WalletsContext) -// const { peraWalletConnector } = usePeraConnection() -// if (context === undefined) { -// throw new Error('Must be inside of a Wallets Provider') -// } -// const [wallet, setWallet] = useState(initialState) -// const [addresses, setAddresses] = context - -// const { http, wallet: _wallet, setWallet: setAlgodexWallet } = useAlgodex() - -// const onEvents = useCallback( -// (props) => { -// const { type, wallet: _wallet } = props -// if (type === 'change' && !isEqual(wallet, _wallet)) { -// setWallet(_wallet) -// } -// }, -// [setWallet, wallet] -// ) -// useEffect(() => { -// events.on('wallet', onEvents) -// return () => { -// events.off('wallet', onEvents) -// } -// }, [onEvents]) - -// const handleRemoveWallet = (disconnectedWallet) => { -// const res = localStorage.getItem('addresses') -// if (res) { -// const _connectedAddresses = JSON.parse(res).filter( -// (wallet) => wallet.address !== disconnectedWallet.address -// ) -// localStorage.setItem('addresses', JSON.stringify(_connectedAddresses)) -// setIsRehydrating(true) -// setAddresses(_connectedAddresses) -// } -// } - -// useEvent('bridge-disconnected', (data) => { -// handleRemoveWallet(data.activeWallet) -// console.log(data.activeWallet, 'active wallet to dsiconnect') -// }) - -// /** -// * Fetches all Addresses from Local storage -// * and populate addresses list. -// * -// * Ensures there is no duplicate race conndition while -// * settting addresses. -// */ -// useEffect(() => { -// const res = localStorage.getItem('addresses') -// if (res) { -// const _addresses = _mergeAddresses(JSON.parse(localStorage.getItem('addresses')), addresses) -// /** -// * If initialState (wallet) is set, don't set addresses -// * You can work with initial state -// */ -// if (typeof _wallet === 'undefined') { -// setIsRehydrating(true) -// setAddresses(_addresses) -// } else { -// setActiveWallet([_wallet], 'update') -// } -// } -// }, []) - -// const [isRehydrating, setIsRehydrating] = useState(false) - -// /** -// * Get Hydrated Addresses -// * Ensures addresses are properly Hydrated at all times -// * -// * Watches for changes in Addresses and Pera Connection. -// */ -// useEffect(() => { -// const res = localStorage.getItem('addresses') -// // Check if addresses exist in local storage -// if (res && res.length && isRehydrating) { -// const _reHydratedWallet = async () => { -// setIsRehydrating(true) -// // '@randlabs/myalgo-connect' is imported dynamically -// // because it uses the window object -// const myAlgoConnector = {} -// const MyAlgoConnect = (await import('@randlabs/myalgo-connect')).default -// MyAlgoConnect.prototype.sign = signer -// myAlgoConnector.current = new MyAlgoConnect() -// myAlgoConnector.current.connected = true -// const mappedAddresses = JSON.parse(res).map((addr) => { -// if (addr.type === 'my-algo-wallet') { -// return { -// ...addr, -// connector: myAlgoConnector.current -// } -// } else { -// return { -// ...addr, -// connector: peraWalletConnector.connector -// } -// } -// }) -// if (mappedAddresses.length && _wallet === undefined) { -// setActiveWallet(mappedAddresses, 'new') -// } else { -// setActiveWallet(mappedAddresses, 'update') -// } -// } -// _reHydratedWallet() -// setIsRehydrating(false) -// } -// }, [addresses, peraWalletConnector]) - -// /** -// * Do rehydration when new data is fetched, during -// * -// */ - -// const walletsQuery = useAccountsInfo(addresses) - -// useEffect(() => { -// const res = localStorage.getItem('addresses') -// if (res && _wallet && walletsQuery.data && !isRehydrating) { -// const mappedAddresses = addresses.map((wallet, idx) => { -// if (_wallet.address === wallet.address) { -// setAlgodexWallet({ -// ..._wallet, -// ...walletsQuery.data[idx] -// }) -// } -// return { ...wallet, ...walletsQuery.data[idx] } -// }) -// const _mappedAddresses = mappedAddresses.filter((wallet) => Object.keys(wallet).length) -// setAddresses(_mappedAddresses) - -// // Below is commented out because setting localstorage breaks with myAlgo Popup -// // localStorage.setItem('addresses', JSON.stringify(mappedAddresses)) -// } -// }, [walletsQuery.data]) - -// /** -// * Returns the first occurence of connected wallets is a list of addresses. -// * -// * This is used to ensure consistency in activeWallet -// */ -// const filterConnectedWallet = useCallback((addressesList) => { -// const _filteredList = addressesList.filter((wallet) => { -// return wallet.connector && wallet.connector.connected -// }) -// // if (_filteredList.length < 1) { -// // localStorage.removeItem("activeWallet") -// // } -// // 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] -// // } -// // console.log('came in') -// // const _activeWallet = localStorage.getItem('activeWallet') -// // if (_activeWallet) { -// // const activeWallet = JSON.parse(_activeWallet) -// // if (_filteredList.length > 0) { -// // // const hasActiveWallet = _filteredList.find((o) => o.address === activeWallet.address) -// // // console.log(hasActiveWallet, 'active wallet') -// // // if (typeof hasActiveWallet === 'undefined') { -// // // localStorage.setItem('activeWallet', JSON.stringify(_filteredList[0])) -// // // } else { -// // // return hasActiveWallet -// // // } -// // } -// // } -// return _filteredList[0] -// }, []) - -// const setActiveWallet = (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){ -// // console.log('called', addressesList) -// // const _connectedWallet = filterConnectedWallet(addressesList) -// // const _selectedWallet = handleWalletUpdate(_connectedWallet, action) -// // if (_selectedWallet) { -// // setAlgodexWallet(_selectedWallet) -// // // localStorage.setItem('activeWallet', JSON.stringify(_selectedWallet)) -// // return -// // } -// // } -// // } else { -// // console.log('called second', addressesList) -// // const _connectedWallet = filterConnectedWallet(addressesList) -// // const _selectedWallet = handleWalletUpdate(_connectedWallet, action) -// // if (_selectedWallet) { -// // setAlgodexWallet(_selectedWallet) -// // // localStorage.setItem('activeWallet', JSON.stringify(_selectedWallet)) -// // return -// // } -// // } -// const _connectedWallet = filterConnectedWallet(addressesList) -// const _selectedWallet = handleWalletUpdate(_connectedWallet, action) -// if (_selectedWallet) { -// setAlgodexWallet(_selectedWallet) -// return -// } -// } - -// const handleWalletUpdate = (wallet, action) => { -// // Update current wallet -// // Set new wallet -// if (!wallet) { -// console.error('No wallet provided') -// return -// } - -// switch (action) { -// case 'update': -// return _wallet -// case 'new': -// return wallet -// default: -// if (_wallet === undefined) { -// return wallet -// } -// return _wallet -// } -// } - -// /** -// * IMPORTANT -// * If for any reason Pera does not have an active connection -// * or connection is null, remove all instance of pera wallet from the app -// */ -// const removePeraWalletFromLocStorage = () => { -// // To be implemented -// } - -// // Ensure PeraWallet is connection or disconnect Pera - -// /** -// * Update Addresses from local storage -// * Update Addresses when rehydration happes -// */ - -// const addNewWalletToAddressesList = async (sameClient, newAddress, actionType = 'new') => { -// const otherWalletClients = -// addresses.filter((wallet) => wallet.type !== newAddress[0].type) || [] - -// const accounts = await http.indexer.fetchAccounts(newAddress) -// const mergedPrivateAddresses = _mergeAddresses(newAddress, accounts) -// const _allAddresses = _mergeAddresses(otherWalletClients, mergedPrivateAddresses) -// if (sameClient.length > newAddress.length) { -// if (_allAddresses.length > 0) { -// setActiveWallet(_allAddresses, actionType) -// } -// setIsRehydrating(true) -// localStorage.setItem('addresses', JSON.stringify(_allAddresses)) -// setAddresses(_allAddresses) -// } -// } - -// const replaceWalletInAddressList = (newAddress, accounts, actionType = 'new') => { -// const allAddresses = _mergeAddresses(addresses, _mergeAddresses(newAddress, accounts)) -// const _otherAddresses = JSON.parse(localStorage.getItem('addresses')) -// const _allAddresses = _mergeAddresses(_otherAddresses || [], allAddresses).map((wallet) => { -// if (wallet.type === 'wallet-connect') { -// return { -// ...wallet, -// connector: peraWalletConnector.connector -// } -// } -// return wallet -// }) -// setIsRehydrating(true) -// localStorage.setItem('addresses', JSON.stringify(_allAddresses)) -// setActiveWallet(_allAddresses, actionType) -// setAddresses(_allAddresses) -// } - -// const removeFromExistingList = (filteredAddressesList) => { -// const _filteredAddressesList = filteredAddressesList.map((wallet) => { -// if (wallet.type === 'wallet-connect') { -// return { -// ...wallet, -// connector: peraWalletConnector.connector -// } -// } -// return wallet -// }) -// 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' }) -// } - -// /** -// * Handles Connection with wallet -// */ -// const handleConnect = useCallback( -// async (_addresses) => { -// if (_addresses.length > 0) { -// logInfo('Handling Connect') -// const sameWalletClient = addresses.filter((wallet) => wallet.type === _addresses[0].type) -// const accounts = await http.indexer.fetchAccounts(_addresses) -// if (sameWalletClient.length > _addresses.length) { -// addNewWalletToAddressesList(sameWalletClient, _addresses) -// } else { -// replaceWalletInAddressList(_addresses, accounts) -// } -// dispatcher('signIn', { type: 'wallet' }) -// } -// }, -// [setAddresses] -// ) - -// // Handle any Disconnect -// const handleDisconnect = useCallback( -// (_addresses) => { -// setIsRehydrating(true) -// const locStorageAddr = JSON.parse(localStorage.getItem('addresses')) -// const addressesList = locStorageAddr.length > 0 ? locStorageAddr : addresses || [] -// const remainingAddresses = -// addressesList.filter((wallet) => { -// if (_addresses && _addresses[0]) { -// return wallet.address !== _addresses[0] -// } -// }) || [] -// let _remainingAddresses = [...remainingAddresses] -// if (_remainingAddresses.length > 0) { -// removeFromExistingList(_remainingAddresses) -// } else { -// 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) -// }, -// [setAddresses] -// ) - -// const sessionUpdate = useCallback( -// async (_addresses) => { -// if (_addresses.length > 0) { -// logInfo('Handling Reconnecting session') -// setIsRehydrating(true) -// const sameWalletClient = addresses.filter((wallet) => wallet.type === _addresses[0].type) -// const accounts = await http.indexer.fetchAccounts(_addresses) -// if (sameWalletClient.length > _addresses.length) { -// addNewWalletToAddressesList(sameWalletClient, _addresses, 'update') -// } else { -// replaceWalletInAddressList(_addresses, accounts, 'update') -// } -// dispatcher('signIn', { type: 'wallet' }) -// } -// }, -// [setAddresses] -// ) - -// // My Algo Connect/Disconnect -// const { connect: myAlgoConnect, disconnect: myAlgoDisconnect } = useMyAlgoConnect( -// handleConnect, -// handleDisconnect -// ) -// // My Algo/Disconnect -// // const { -// // connect: peraConnect, -// // disconnect: peraDisconnect, -// // connector: _peraConnector -// // } = useWalletConnect(handleConnect, handleDisconnect, sessionUpdate) -// // Pera Connect/Disconnect - -// const { connect: peraConnectOriginal, disconnect: peraDisconnectOriginal } = usePeraConnection( -// handleConnect, -// handleDisconnect, -// sessionUpdate -// ) - -// return { -// wallet: _wallet, -// setWallet: setAlgodexWallet, -// addresses, -// myAlgoConnect, -// peraConnect: peraConnectOriginal, -// peraDisconnect: peraDisconnectOriginal, -// // peraConnect, -// // peraDisconnect, -// myAlgoDisconnect, -// myAlgoConnector, -// // peraConnector: _peraConnector -// peraConnector: peraWalletConnector -// } -// } - -// export default useWallets - - /* * Algodex Frontend (algodex-react) * Copyright (C) 2021 - 2022 Algodex VASP (BVI) Corp. @@ -739,14 +226,10 @@ function useWallets(initialState) { // localStorage.removeItem("activeWallet") // } const _activeWallet = localStorage.getItem('activeWallet') - console.log(_activeWallet, 'active wallet fiilterred') if (_activeWallet) { const activeWallet = JSON.parse(_activeWallet) - console.log(activeWallet, 'activeWallet parsed') if (_filteredList.length > 0) { - console.log(_filteredList, '_filteredList') const hasActiveWallet = find(_filteredList, (o) => o.address === activeWallet.address) - console.log(hasActiveWallet, 'hasActiveWallet') if (typeof hasActiveWallet === 'undefined') { localStorage.setItem('activeWallet', JSON.stringify(_filteredList[0])) return _filteredList[0] @@ -759,66 +242,29 @@ function useWallets(initialState) { } else { return _filteredList[0] } - // console.log('came in') - // const _activeWallet = localStorage.getItem('activeWallet') - // if (_activeWallet) { - // const activeWallet = JSON.parse(_activeWallet) - // if (_filteredList.length > 0) { - // const hasActiveWallet = _filteredList.find((o) => o.address === activeWallet.address) - // console.log(hasActiveWallet, 'active wallet') - // if (typeof hasActiveWallet === 'undefined') { - // localStorage.setItem('activeWallet', JSON.stringify(_filteredList[0])) - // } else { - // return hasActiveWallet - // } - // } - // } - // 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') - console.log(_activeWallet, 'actiive wallet') if (_activeWallet && JSON.parse(_activeWallet).type === 'wallet-connect') { const parsedActiveWallet = JSON.parse(_activeWallet) const hasPeraConnect = find(addressesList, (o) => o.address === parsedActiveWallet.address) - console.log('called outsiide with everything', addressesList, hasPeraConnect, parsedActiveWallet) if (hasPeraConnect && hasPeraConnect.connector && hasPeraConnect.connector.connected){ - console.log('called', addressesList) const _connectedWallet = filterConnectedWallet(addressesList) const _selectedWallet = handleWalletUpdate(_connectedWallet, action) if (_selectedWallet) { setAlgodexWallet(_selectedWallet) - // localStorage.setItem('activeWallet', JSON.stringify(_selectedWallet)) return } } } else { - console.log('called second', addressesList) const _connectedWallet = filterConnectedWallet(addressesList) - console.log(_connectedWallet, 'actiive wallet to connect') const _selectedWallet = handleWalletUpdate(_connectedWallet, action) if (_selectedWallet) { setAlgodexWallet(_selectedWallet) - // localStorage.setItem('activeWallet', JSON.stringify(_selectedWallet)) return } } - // const _connectedWallet = filterConnectedWallet(addressesList) - // const _selectedWallet = handleWalletUpdate(_connectedWallet, action) - // if (_selectedWallet) { - // setAlgodexWallet(_selectedWallet) - // return - // } }, [peraWalletConnector]) const handleWalletUpdate = (wallet, action) => { From b7030e320b4e090d326d562e114b60de065dc61c Mon Sep 17 00:00:00 2001 From: Ikechi Date: Thu, 27 Oct 2022 13:18:46 +0100 Subject: [PATCH 04/11] Reset active wallet on disconnect --- components/Wallet/Connect/WalletConnect.jsx | 22 +++++++++++++++++++-- hooks/useWallets.js | 10 +++------- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/components/Wallet/Connect/WalletConnect.jsx b/components/Wallet/Connect/WalletConnect.jsx index 7becda283..42e4136d1 100644 --- a/components/Wallet/Connect/WalletConnect.jsx +++ b/components/Wallet/Connect/WalletConnect.jsx @@ -132,11 +132,29 @@ export function WalletView(props) { _peraDisconnect(targetWallet) }, [_peraDisconnect]) + const setActiveWalletOnDisconnect = (wallet) => { + const allAddresses = localStorage.getItem('addresses') + if (allAddresses) { + const parsedAddresses = JSON.parse(allAddresses) + const filterWalletToDisconnect = parsedAddresses.filter(_wallet => _wallet.address !== wallet.address) + // 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) => { diff --git a/hooks/useWallets.js b/hooks/useWallets.js index 90a97be9e..06802e6b4 100644 --- a/hooks/useWallets.js +++ b/hooks/useWallets.js @@ -219,12 +219,8 @@ function useWallets(initialState) { const filterConnectedWallet = useCallback((addressesList) => { const _filteredList = addressesList.filter((wallet) => { - // return wallet.connector && (wallet.connector.connected || wallet.connector._connected) - return wallet.connector && wallet.connector.connected + return wallet.connector && (wallet.connector.connected || wallet.connector._connected) }) - // if (_filteredList.length < 1) { - // localStorage.removeItem("activeWallet") - // } const _activeWallet = localStorage.getItem('activeWallet') if (_activeWallet) { const activeWallet = JSON.parse(_activeWallet) @@ -249,7 +245,7 @@ function useWallets(initialState) { 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){ + if (hasPeraConnect && hasPeraConnect.connector && hasPeraConnect.connector.connected) { const _connectedWallet = filterConnectedWallet(addressesList) const _selectedWallet = handleWalletUpdate(_connectedWallet, action) if (_selectedWallet) { @@ -264,7 +260,7 @@ function useWallets(initialState) { setAlgodexWallet(_selectedWallet) return } - } + } }, [peraWalletConnector]) const handleWalletUpdate = (wallet, action) => { From 4e2641c51abdb723ba728efc6ab172d3e1852fe4 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Thu, 27 Oct 2022 17:02:16 +0100 Subject: [PATCH 05/11] Add functionality to set new wallet connection as connected wallet address --- hooks/useWallets.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/hooks/useWallets.js b/hooks/useWallets.js index 06802e6b4..6acf7fa60 100644 --- a/hooks/useWallets.js +++ b/hooks/useWallets.js @@ -275,9 +275,11 @@ function useWallets(initialState) { case 'update': return _wallet case 'new': + // localStorage.setItem('activeWallet', JSON.stringify(wallet)) return wallet default: if (_wallet === undefined) { + // localStorage.setItem('activeWallet', JSON.stringify(wallet)) return wallet } return _wallet @@ -313,6 +315,12 @@ function useWallets(initialState) { } setIsRehydrating(true) localStorage.setItem('addresses', JSON.stringify(_allAddresses)) + console.log(_allAddresses, newAddress, actionType, 'adding new') + if (actionType === 'new') { + const newWallet = find(_allAddresses, o => o.address === newAddress[0].address) + localStorage.setItem('activeWallet', JSON.stringify(newWallet)) + } + // localStorage.setItem('activeWallet', JSON.stringify(_allAddresses[0])) setAddresses(_allAddresses) } } @@ -331,6 +339,11 @@ function useWallets(initialState) { }) setIsRehydrating(true) localStorage.setItem('addresses', JSON.stringify(_allAddresses)) + console.log(_allAddresses, newAddress, actionType, 'adding update') + if (actionType === 'new') { + const newWallet = find(_allAddresses, o => o.address === newAddress[0].address) + localStorage.setItem('activeWallet', JSON.stringify(newWallet)) + } setActiveWallet(_allAddresses, actionType) setAddresses(_allAddresses) } From b25c5e9d3e4d0d80ae4f06589ae061e177d9e59d Mon Sep 17 00:00:00 2001 From: Ikechi Date: Thu, 27 Oct 2022 17:05:35 +0100 Subject: [PATCH 06/11] Some cleanups --- components/Wallet/Connect/WalletConnect.jsx | 8 ++++---- hooks/useWallets.js | 5 ----- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/components/Wallet/Connect/WalletConnect.jsx b/components/Wallet/Connect/WalletConnect.jsx index 42e4136d1..ef86e5b9f 100644 --- a/components/Wallet/Connect/WalletConnect.jsx +++ b/components/Wallet/Connect/WalletConnect.jsx @@ -132,7 +132,7 @@ export function WalletView(props) { _peraDisconnect(targetWallet) }, [_peraDisconnect]) - const setActiveWalletOnDisconnect = (wallet) => { + const setActiveWalletOnDisconnect = useCallback((wallet) => { const allAddresses = localStorage.getItem('addresses') if (allAddresses) { const parsedAddresses = JSON.parse(allAddresses) @@ -144,15 +144,15 @@ export function WalletView(props) { localStorage.removeItem('activeWallet') } } - } + }, []) const walletDisconnectMap = useMemo(() => ({ 'my-algo-wallet': async (wallet) => { - await setActiveWalletOnDisconnect(wallet) + setActiveWalletOnDisconnect(wallet) myAlgoDisconnect(wallet) }, 'wallet-connect': async (wallet) => { - await setActiveWalletOnDisconnect(wallet) + setActiveWalletOnDisconnect(wallet) peraDisconnect(wallet) } }), [myAlgoDisconnect, peraDisconnect]) diff --git a/hooks/useWallets.js b/hooks/useWallets.js index 6acf7fa60..788b5eca6 100644 --- a/hooks/useWallets.js +++ b/hooks/useWallets.js @@ -275,11 +275,9 @@ function useWallets(initialState) { case 'update': return _wallet case 'new': - // localStorage.setItem('activeWallet', JSON.stringify(wallet)) return wallet default: if (_wallet === undefined) { - // localStorage.setItem('activeWallet', JSON.stringify(wallet)) return wallet } return _wallet @@ -315,12 +313,10 @@ function useWallets(initialState) { } setIsRehydrating(true) localStorage.setItem('addresses', JSON.stringify(_allAddresses)) - console.log(_allAddresses, newAddress, actionType, 'adding new') if (actionType === 'new') { const newWallet = find(_allAddresses, o => o.address === newAddress[0].address) localStorage.setItem('activeWallet', JSON.stringify(newWallet)) } - // localStorage.setItem('activeWallet', JSON.stringify(_allAddresses[0])) setAddresses(_allAddresses) } } @@ -339,7 +335,6 @@ function useWallets(initialState) { }) setIsRehydrating(true) localStorage.setItem('addresses', JSON.stringify(_allAddresses)) - console.log(_allAddresses, newAddress, actionType, 'adding update') if (actionType === 'new') { const newWallet = find(_allAddresses, o => o.address === newAddress[0].address) localStorage.setItem('activeWallet', JSON.stringify(newWallet)) From af6ef90c29218954915455cd51aa71f7fcc859bf Mon Sep 17 00:00:00 2001 From: Ikechi Date: Fri, 28 Oct 2022 19:14:29 +0100 Subject: [PATCH 07/11] Fix mobile implementation --- components/Wallet/Connect/WalletConnect.jsx | 5 +- hooks/useWallets.js | 96 ++++++++++++++++++++- 2 files changed, 95 insertions(+), 6 deletions(-) diff --git a/components/Wallet/Connect/WalletConnect.jsx b/components/Wallet/Connect/WalletConnect.jsx index ef86e5b9f..22ac8bb57 100644 --- a/components/Wallet/Connect/WalletConnect.jsx +++ b/components/Wallet/Connect/WalletConnect.jsx @@ -137,6 +137,7 @@ export function WalletView(props) { 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])) @@ -148,11 +149,11 @@ export function WalletView(props) { const walletDisconnectMap = useMemo(() => ({ 'my-algo-wallet': async (wallet) => { - setActiveWalletOnDisconnect(wallet) + await setActiveWalletOnDisconnect(wallet) myAlgoDisconnect(wallet) }, 'wallet-connect': async (wallet) => { - setActiveWalletOnDisconnect(wallet) + await setActiveWalletOnDisconnect(wallet) peraDisconnect(wallet) } }), [myAlgoDisconnect, peraDisconnect]) diff --git a/hooks/useWallets.js b/hooks/useWallets.js index 788b5eca6..75b1fee39 100644 --- a/hooks/useWallets.js +++ b/hooks/useWallets.js @@ -219,8 +219,10 @@ function useWallets(initialState) { const filterConnectedWallet = useCallback((addressesList) => { const _filteredList = addressesList.filter((wallet) => { - return wallet.connector && (wallet.connector.connected || wallet.connector._connected) + // return wallet.connector && (wallet.connector.connected || wallet.connector._connected) + return wallet.connector && wallet.connector.connected }) + // return _filteredList[0] const _activeWallet = localStorage.getItem('activeWallet') if (_activeWallet) { const activeWallet = JSON.parse(_activeWallet) @@ -240,12 +242,71 @@ function useWallets(initialState) { } }, []) + const handleActiveWallet = (peraWalletConnector) => { + // Get active wallet + // Check if active wallet is pera-connect + // check if _connector of pera wallet is true + // if _connector is true, check if peraconnect.connector !== null is true + + console.log(peraWalletConnector, 'pera waperaWalletConnector') + console.log(peraWalletConnector.connector, typeof peraWalletConnector.connector, 'pera waperaWalletConnector') + } + + useEffect(() => { + // 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) + // } + const addressesList = localStorage.getItem('addresses') + if (addressesList) { + setActiveWallet(JSON.parse(addressesList)) + } + }, [peraWalletConnector]) + + const setActiveWallet = useCallback((addressesList, action) => { + console.log('came back here') const _activeWallet = localStorage.getItem('activeWallet') + console.log('came back here') if (_activeWallet && JSON.parse(_activeWallet).type === 'wallet-connect') { + console.log(_activeWallet, 'active wallet inside') const parsedActiveWallet = JSON.parse(_activeWallet) const hasPeraConnect = find(addressesList, (o) => o.address === parsedActiveWallet.address) - if (hasPeraConnect && hasPeraConnect.connector && hasPeraConnect.connector.connected) { + console.log(hasPeraConnect, 'hasPeraConnect inside') + // // if (hasPeraConnect && hasPeraConnect.connector && hasPeraConnect.connector.connected) { + // if (hasPeraConnect && peraWalletConnector.connector !== null) { + // const _connectedWallet = filterConnectedWallet(addressesList) + // const _selectedWallet = handleWalletUpdate(_connectedWallet, action) + // if (_selectedWallet) { + // setAlgodexWallet(_selectedWallet) + // return + // } + // } else { + // console.log(Object.keys(peraWalletConnector), peraWalletConnector, 'pera waperaWalletConnector') + // console.log(peraWalletConnector.connector, typeof peraWalletConnector.connector, 'pera waperaWalletConnector') + // const _connectedWallet = filterConnectedWallet(addressesList) + // const _selectedWallet = handleWalletUpdate(_connectedWallet, action) + // if (_selectedWallet) { + // setAlgodexWallet(_selectedWallet) + // return + // } + // } + + // if (hasPeraConnect && hasPeraConnect.connector && hasPeraConnect.connector.connected) { + console.log(hasPeraConnect, 'has perra connect') + 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 === '') { + console.log(Object.values(peraWalletConnector), peraWalletConnector.bridge, peraWalletConnector, 'pera waperaWalletConnector') + console.log(peraWalletConnector.connector, typeof peraWalletConnector.connector, 'pera waperaWalletConnector') const _connectedWallet = filterConnectedWallet(addressesList) const _selectedWallet = handleWalletUpdate(_connectedWallet, action) if (_selectedWallet) { @@ -254,13 +315,29 @@ function useWallets(initialState) { } } } else { + console.log('secondsecion inside') const _connectedWallet = filterConnectedWallet(addressesList) + console.log('secondsecion _connectedWallet', _connectedWallet) const _selectedWallet = handleWalletUpdate(_connectedWallet, action) - if (_selectedWallet) { + console.log('secondsecion _selectedWallet', _selectedWallet) + if (_selectedWallet && _selectedWallet.connector._connected === true) { + console.log('wallet to set first', _selectedWallet) setAlgodexWallet(_selectedWallet) + } else if (_connectedWallet.connector.connected) { + console.log('wallet to set secod', _connectedWallet) + setAlgodexWallet(_connectedWallet) + } else { + console.log('no wallet to set wallet to set') return } } + // handleActiveWallet(peraWalletConnector) + // const _connectedWallet = filterConnectedWallet(addressesList) + // const _selectedWallet = handleWalletUpdate(_connectedWallet, action) + // if (_selectedWallet) { + // setAlgodexWallet(_selectedWallet) + // return + // } }, [peraWalletConnector]) const handleWalletUpdate = (wallet, action) => { @@ -273,13 +350,24 @@ function useWallets(initialState) { switch (action) { case 'update': - return _wallet + console.log('handleWalletUpdate update', _wallet) + console.log('handleWalletUpdate gas bew', wallet) + if (_wallet && (_wallet.connector.connected !== false || _wallet.connector._connected !== false)) { + // return _wallet + return wallet + } else { + return wallet + } + // return wallet case 'new': + console.log('handleWalletUpdate new', wallet) return wallet default: if (_wallet === undefined) { + console.log('handleWalletUpdate undefinend', wallet) return wallet } + console.log('handleWalletUpdate defualt', _wallet) return _wallet } } From eed822a8f4d1287e503cdb7d30563b3e4355168d Mon Sep 17 00:00:00 2001 From: Ikechi Date: Sat, 29 Oct 2022 00:33:52 +0100 Subject: [PATCH 08/11] Debugging last wallet disconnect --- components/Layout/MobileLayout.jsx | 1 + components/Wallet/Table/OpenOrdersTable.jsx | 1 + hooks/useWallets.js | 94 ++++++++++++++------- 3 files changed, 65 insertions(+), 31 deletions(-) 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/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 75b1fee39..4042d060a 100644 --- a/hooks/useWallets.js +++ b/hooks/useWallets.js @@ -109,6 +109,19 @@ function useWallets(initialState) { console.log(data.activeWallet, 'active wallet to dsiconnect') }) + useEvent('signOut', (data) => { + if (data.type === 'wallet') { + console.log('came here on mobile', wallet) + setWallet({ + ...wallet, + connector: { + ...wallet.connector, + connected: false + } + }) + } + }) + /** * Fetches all Addresses from Local storage * and populate addresses list. @@ -242,16 +255,6 @@ function useWallets(initialState) { } }, []) - const handleActiveWallet = (peraWalletConnector) => { - // Get active wallet - // Check if active wallet is pera-connect - // check if _connector of pera wallet is true - // if _connector is true, check if peraconnect.connector !== null is true - - console.log(peraWalletConnector, 'pera waperaWalletConnector') - console.log(peraWalletConnector.connector, typeof peraWalletConnector.connector, 'pera waperaWalletConnector') - } - useEffect(() => { // const _activeWallet = localStorage.getItem('activeWallet') // if (_activeWallet && JSON.parse(_activeWallet).type === 'wallet-connect') { @@ -266,7 +269,6 @@ function useWallets(initialState) { const setActiveWallet = useCallback((addressesList, action) => { - console.log('came back here') const _activeWallet = localStorage.getItem('activeWallet') console.log('came back here') if (_activeWallet && JSON.parse(_activeWallet).type === 'wallet-connect') { @@ -315,19 +317,31 @@ function useWallets(initialState) { } } } else { - console.log('secondsecion inside') + // console.log('secondsecion inside') + // const _connectedWallet = filterConnectedWallet(addressesList) + // console.log('secondsecion _connectedWallet', _connectedWallet) + // const _selectedWallet = handleWalletUpdate(_connectedWallet, action) + // console.log('secondsecion _selectedWallet', _selectedWallet) + // if (_selectedWallet) { + // setAlgodexWallet(_selectedWallet) + // return + // } + // if (_selectedWallet && _selectedWallet.connector._connected === true) { + // if (_selectedWallet && _selectedWallet.connector._connected === true) { + // console.log('wallet to set first', _selectedWallet) + // console.log('wallet to set first', _selectedWallet) + // setAlgodexWallet(_selectedWallet) + // } else if (_connectedWallet.connector.connected) { + // console.log('wallet to set secod', _connectedWallet) + // setAlgodexWallet(_connectedWallet) + // } else { + // console.log('no wallet to set wallet to set') + // return + // } const _connectedWallet = filterConnectedWallet(addressesList) - console.log('secondsecion _connectedWallet', _connectedWallet) const _selectedWallet = handleWalletUpdate(_connectedWallet, action) - console.log('secondsecion _selectedWallet', _selectedWallet) - if (_selectedWallet && _selectedWallet.connector._connected === true) { - console.log('wallet to set first', _selectedWallet) + if (_selectedWallet) { setAlgodexWallet(_selectedWallet) - } else if (_connectedWallet.connector.connected) { - console.log('wallet to set secod', _connectedWallet) - setAlgodexWallet(_connectedWallet) - } else { - console.log('no wallet to set wallet to set') return } } @@ -343,6 +357,7 @@ function useWallets(initialState) { const handleWalletUpdate = (wallet, action) => { // Update current wallet // Set new wallet + console.log('handle wallet update', wallet) if (!wallet) { console.error('No wallet provided') return @@ -350,15 +365,15 @@ function useWallets(initialState) { switch (action) { case 'update': - console.log('handleWalletUpdate update', _wallet) - console.log('handleWalletUpdate gas bew', wallet) - if (_wallet && (_wallet.connector.connected !== false || _wallet.connector._connected !== false)) { - // return _wallet - return wallet - } else { - return wallet - } - // return wallet + return _wallet + // console.log('handleWalletUpdate update', _wallet) + // console.log('handleWalletUpdate gas bew', wallet) + // if (_wallet && (_wallet.connector.connected !== false || _wallet.connector._connected !== false)) { + // return _wallet + // // return wallet + // } else { + // return wallet + // } case 'new': console.log('handleWalletUpdate new', wallet) return wallet @@ -465,8 +480,10 @@ function useWallets(initialState) { } } } + console.log([disconnectedActiveWallet], 'defied walled') setActiveWallet([disconnectedActiveWallet], 'new') } else { + console.log(_wallet, wallet, 'both here') let disconnectedActiveWallet = {} disconnectedActiveWallet = { ..._wallet, @@ -475,6 +492,8 @@ function useWallets(initialState) { connected: false } } + console.log(disconnectedActiveWallet, 'unedneded walled') + // setAlgodexWallet(disconnectedActiveWallet) setActiveWallet([disconnectedActiveWallet], 'new') } dispatcher('signOut', { type: 'wallet' }) @@ -516,7 +535,19 @@ 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 + } + } + console.log(addressesList, disconnectedActiveWallet, 'unedneded walled') + setAlgodexWallet(disconnectedActiveWallet) + // addressesList.length && removeLastWalletFromList(addressesList) + // removeLastWalletFromList(_remainingAddresses) } logInfo( `Disconnected Successfully with : ${_addresses} removed and ${_remainingAddresses.length} remaining` @@ -525,6 +556,7 @@ function useWallets(initialState) { localStorage.setItem('addresses', JSON.stringify(_remainingAddresses)) setAddresses(_remainingAddresses) console.error('Handle removing from storage', _addresses) + console.log('_remainingAddresses', _remainingAddresses) }, [setAddresses] ) From 60e76fd40bb22f3f32f308e31ec98e46b19e9b3d Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 31 Oct 2022 11:43:18 +0100 Subject: [PATCH 09/11] Fix disconnecting last wallet on mobile --- hooks/useWallets.js | 46 ++++++++++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/hooks/useWallets.js b/hooks/useWallets.js index 4042d060a..bc186515e 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' @@ -27,7 +29,6 @@ import { useEventDispatch } from './useEvents' import useMyAlgoConnect from './useMyAlgoConnect' import usePeraConnection from './usePeraConnection' import useWalletConnect from './useWalletConnect' -import { find } from 'lodash' /** * @@ -109,18 +110,18 @@ function useWallets(initialState) { console.log(data.activeWallet, 'active wallet to dsiconnect') }) - useEvent('signOut', (data) => { - if (data.type === 'wallet') { - console.log('came here on mobile', wallet) - setWallet({ - ...wallet, - connector: { - ...wallet.connector, - connected: false - } - }) - } - }) + // useEvent('signOut', (data) => { + // if (data.type === 'wallet') { + // console.log('came here on mobile', wallet) + // setWallet({ + // ...wallet, + // connector: { + // ...wallet.connector, + // connected: false + // } + // }) + // } + // }) /** * Fetches all Addresses from Local storage @@ -261,10 +262,10 @@ function useWallets(initialState) { // const parsedActiveWallet = JSON.parse(_activeWallet) // const hasPeraConnect = find(addressesList, (o) => o.address === parsedActiveWallet.address) // } - const addressesList = localStorage.getItem('addresses') - if (addressesList) { - setActiveWallet(JSON.parse(addressesList)) - } + // const addressesList = localStorage.getItem('addresses') + // if (addressesList) { + // setActiveWallet(JSON.parse(addressesList)) + // } }, [peraWalletConnector]) @@ -365,7 +366,8 @@ function useWallets(initialState) { switch (action) { case 'update': - return _wallet + // return _wallet + return wallet // console.log('handleWalletUpdate update', _wallet) // console.log('handleWalletUpdate gas bew', wallet) // if (_wallet && (_wallet.connector.connected !== false || _wallet.connector._connected !== false)) { @@ -456,6 +458,7 @@ function useWallets(initialState) { } return wallet }) + console.log(_filteredAddressesList, '_filteredAddressesList') setActiveWallet(_filteredAddressesList, 'new') } @@ -483,7 +486,7 @@ function useWallets(initialState) { console.log([disconnectedActiveWallet], 'defied walled') setActiveWallet([disconnectedActiveWallet], 'new') } else { - console.log(_wallet, wallet, 'both here') + // console.log(_wallet, wallet, 'both here') let disconnectedActiveWallet = {} disconnectedActiveWallet = { ..._wallet, @@ -492,7 +495,7 @@ function useWallets(initialState) { connected: false } } - console.log(disconnectedActiveWallet, 'unedneded walled') + // console.log(disconnectedActiveWallet, 'unedneded walled') // setAlgodexWallet(disconnectedActiveWallet) setActiveWallet([disconnectedActiveWallet], 'new') } @@ -533,6 +536,7 @@ function useWallets(initialState) { }) || [] let _remainingAddresses = [...remainingAddresses] if (_remainingAddresses.length > 0) { + console.log(_remainingAddresses, 'first section') removeFromExistingList(_remainingAddresses) } else { const _wallet = addressesList[0] @@ -544,7 +548,7 @@ function useWallets(initialState) { connected: false } } - console.log(addressesList, disconnectedActiveWallet, 'unedneded walled') + console.log(addressesList, 'address list second') setAlgodexWallet(disconnectedActiveWallet) // addressesList.length && removeLastWalletFromList(addressesList) // removeLastWalletFromList(_remainingAddresses) From 731e037c2ede429ac63ef747c2ae8732ae54c777 Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 31 Oct 2022 11:51:35 +0100 Subject: [PATCH 10/11] Cleanup --- hooks/useWallets.js | 83 +-------------------------------------------- 1 file changed, 1 insertion(+), 82 deletions(-) diff --git a/hooks/useWallets.js b/hooks/useWallets.js index bc186515e..3b0f52d3f 100644 --- a/hooks/useWallets.js +++ b/hooks/useWallets.js @@ -110,19 +110,6 @@ function useWallets(initialState) { console.log(data.activeWallet, 'active wallet to dsiconnect') }) - // useEvent('signOut', (data) => { - // if (data.type === 'wallet') { - // console.log('came here on mobile', wallet) - // setWallet({ - // ...wallet, - // connector: { - // ...wallet.connector, - // connected: false - // } - // }) - // } - // }) - /** * Fetches all Addresses from Local storage * and populate addresses list. @@ -271,33 +258,10 @@ function useWallets(initialState) { const setActiveWallet = useCallback((addressesList, action) => { const _activeWallet = localStorage.getItem('activeWallet') - console.log('came back here') if (_activeWallet && JSON.parse(_activeWallet).type === 'wallet-connect') { - console.log(_activeWallet, 'active wallet inside') const parsedActiveWallet = JSON.parse(_activeWallet) const hasPeraConnect = find(addressesList, (o) => o.address === parsedActiveWallet.address) - console.log(hasPeraConnect, 'hasPeraConnect inside') - // // if (hasPeraConnect && hasPeraConnect.connector && hasPeraConnect.connector.connected) { - // if (hasPeraConnect && peraWalletConnector.connector !== null) { - // const _connectedWallet = filterConnectedWallet(addressesList) - // const _selectedWallet = handleWalletUpdate(_connectedWallet, action) - // if (_selectedWallet) { - // setAlgodexWallet(_selectedWallet) - // return - // } - // } else { - // console.log(Object.keys(peraWalletConnector), peraWalletConnector, 'pera waperaWalletConnector') - // console.log(peraWalletConnector.connector, typeof peraWalletConnector.connector, 'pera waperaWalletConnector') - // const _connectedWallet = filterConnectedWallet(addressesList) - // const _selectedWallet = handleWalletUpdate(_connectedWallet, action) - // if (_selectedWallet) { - // setAlgodexWallet(_selectedWallet) - // return - // } - // } - - // if (hasPeraConnect && hasPeraConnect.connector && hasPeraConnect.connector.connected) { - console.log(hasPeraConnect, 'has perra connect') + if (hasPeraConnect && hasPeraConnect.connector && (hasPeraConnect.connector.connected || hasPeraConnect.connector._connected)) { if (peraWalletConnector.connector !== null) { const _connectedWallet = filterConnectedWallet(addressesList) @@ -308,8 +272,6 @@ function useWallets(initialState) { } } } else if (peraWalletConnector.bridge === '') { - console.log(Object.values(peraWalletConnector), peraWalletConnector.bridge, peraWalletConnector, 'pera waperaWalletConnector') - console.log(peraWalletConnector.connector, typeof peraWalletConnector.connector, 'pera waperaWalletConnector') const _connectedWallet = filterConnectedWallet(addressesList) const _selectedWallet = handleWalletUpdate(_connectedWallet, action) if (_selectedWallet) { @@ -318,27 +280,6 @@ function useWallets(initialState) { } } } else { - // console.log('secondsecion inside') - // const _connectedWallet = filterConnectedWallet(addressesList) - // console.log('secondsecion _connectedWallet', _connectedWallet) - // const _selectedWallet = handleWalletUpdate(_connectedWallet, action) - // console.log('secondsecion _selectedWallet', _selectedWallet) - // if (_selectedWallet) { - // setAlgodexWallet(_selectedWallet) - // return - // } - // if (_selectedWallet && _selectedWallet.connector._connected === true) { - // if (_selectedWallet && _selectedWallet.connector._connected === true) { - // console.log('wallet to set first', _selectedWallet) - // console.log('wallet to set first', _selectedWallet) - // setAlgodexWallet(_selectedWallet) - // } else if (_connectedWallet.connector.connected) { - // console.log('wallet to set secod', _connectedWallet) - // setAlgodexWallet(_connectedWallet) - // } else { - // console.log('no wallet to set wallet to set') - // return - // } const _connectedWallet = filterConnectedWallet(addressesList) const _selectedWallet = handleWalletUpdate(_connectedWallet, action) if (_selectedWallet) { @@ -358,7 +299,6 @@ function useWallets(initialState) { const handleWalletUpdate = (wallet, action) => { // Update current wallet // Set new wallet - console.log('handle wallet update', wallet) if (!wallet) { console.error('No wallet provided') return @@ -368,23 +308,12 @@ function useWallets(initialState) { case 'update': // return _wallet return wallet - // console.log('handleWalletUpdate update', _wallet) - // console.log('handleWalletUpdate gas bew', wallet) - // if (_wallet && (_wallet.connector.connected !== false || _wallet.connector._connected !== false)) { - // return _wallet - // // return wallet - // } else { - // return wallet - // } case 'new': - console.log('handleWalletUpdate new', wallet) return wallet default: if (_wallet === undefined) { - console.log('handleWalletUpdate undefinend', wallet) return wallet } - console.log('handleWalletUpdate defualt', _wallet) return _wallet } } @@ -458,7 +387,6 @@ function useWallets(initialState) { } return wallet }) - console.log(_filteredAddressesList, '_filteredAddressesList') setActiveWallet(_filteredAddressesList, 'new') } @@ -483,10 +411,8 @@ function useWallets(initialState) { } } } - console.log([disconnectedActiveWallet], 'defied walled') setActiveWallet([disconnectedActiveWallet], 'new') } else { - // console.log(_wallet, wallet, 'both here') let disconnectedActiveWallet = {} disconnectedActiveWallet = { ..._wallet, @@ -495,8 +421,6 @@ function useWallets(initialState) { connected: false } } - // console.log(disconnectedActiveWallet, 'unedneded walled') - // setAlgodexWallet(disconnectedActiveWallet) setActiveWallet([disconnectedActiveWallet], 'new') } dispatcher('signOut', { type: 'wallet' }) @@ -536,7 +460,6 @@ function useWallets(initialState) { }) || [] let _remainingAddresses = [...remainingAddresses] if (_remainingAddresses.length > 0) { - console.log(_remainingAddresses, 'first section') removeFromExistingList(_remainingAddresses) } else { const _wallet = addressesList[0] @@ -548,19 +471,15 @@ function useWallets(initialState) { connected: false } } - console.log(addressesList, 'address list second') setAlgodexWallet(disconnectedActiveWallet) // addressesList.length && removeLastWalletFromList(addressesList) - // removeLastWalletFromList(_remainingAddresses) } 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) - console.log('_remainingAddresses', _remainingAddresses) }, [setAddresses] ) From 68920491651bbed1eaaad006e0224cf85c875d4f Mon Sep 17 00:00:00 2001 From: Ikechi Date: Mon, 31 Oct 2022 12:45:24 +0100 Subject: [PATCH 11/11] Cleanups --- hooks/useWallets.js | 99 ++++++++++++++++----------------------------- 1 file changed, 35 insertions(+), 64 deletions(-) diff --git a/hooks/useWallets.js b/hooks/useWallets.js index 3b0f52d3f..e0af4f961 100644 --- a/hooks/useWallets.js +++ b/hooks/useWallets.js @@ -211,19 +211,10 @@ function useWallets(initialState) { * * This is used to ensure consistency in activeWallet */ - // const filterConnectedWallet = useCallback((addressesList) => { - // const _filteredList = addressesList.filter((wallet) => { - // return wallet.connector && wallet.connector.connected - // }) - // return _filteredList[0] - // }, []) - const filterConnectedWallet = useCallback((addressesList) => { const _filteredList = addressesList.filter((wallet) => { - // return wallet.connector && (wallet.connector.connected || wallet.connector._connected) return wallet.connector && wallet.connector.connected }) - // return _filteredList[0] const _activeWallet = localStorage.getItem('activeWallet') if (_activeWallet) { const activeWallet = JSON.parse(_activeWallet) @@ -243,19 +234,6 @@ function useWallets(initialState) { } }, []) - useEffect(() => { - // 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) - // } - // const addressesList = localStorage.getItem('addresses') - // if (addressesList) { - // setActiveWallet(JSON.parse(addressesList)) - // } - }, [peraWalletConnector]) - - const setActiveWallet = useCallback((addressesList, action) => { const _activeWallet = localStorage.getItem('activeWallet') if (_activeWallet && JSON.parse(_activeWallet).type === 'wallet-connect') { @@ -287,13 +265,6 @@ function useWallets(initialState) { return } } - // handleActiveWallet(peraWalletConnector) - // const _connectedWallet = filterConnectedWallet(addressesList) - // const _selectedWallet = handleWalletUpdate(_connectedWallet, action) - // if (_selectedWallet) { - // setAlgodexWallet(_selectedWallet) - // return - // } }, [peraWalletConnector]) const handleWalletUpdate = (wallet, action) => { @@ -390,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