Skip to content

🐛 Persist active wallet #657

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
IYTEC wants to merge 1 commit into
base: development
Choose a base branch
from
Open

🐛 Persist active wallet #657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/Layout/OriginalLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ import TradeHistory from '@/components/Asset/TradeHistory'
// import Typography from '@mui/material/Typography'
import Wallet from '@/components/Wallet/Connect/WalletConnect'
import styled from '@emotion/styled'

import { useAlgodex } from '@algodex/algodex-hooks'

// import useTranslation from 'next-translate/useTranslation'

// import { Typography, Typography } from '@/components/Typography'
Expand Down
23 changes: 22 additions & 1 deletion components/Wallet/Connect/WalletConnect.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@ export function WalletView(props) {
})
//You may want to filter by active address array to avoid rehydration?
localStorage.setItem('addresses', JSON.stringify(remainingAddresses))

setAddresses(remainingAddresses)
if (remainingAddresses.length === 0) {
dispatcher('signOut', {
Expand All @@ -192,6 +193,7 @@ export function WalletView(props) {
setSignedIn(false)
}
// setActiveWallet(remainingAddresses[0] || null)
persistActiveWallet(remainingAddresses[0] || addresses[0] || {})
}

const peraDisconnect = (targetWallet) => {
Expand All @@ -206,6 +208,7 @@ export function WalletView(props) {
type: 'wallet'
})
setSignedIn(false)
persistActiveWallet(remainingAddresses[0] || addresses[0] || {})
// setActiveWallet(remainingAddresses[0])
}
if (typeof targetWallet.connector.killSession !== 'undefined')
Expand Down Expand Up @@ -241,6 +244,18 @@ export function WalletView(props) {
// return signedIn ? 'default' : 'primary'
// }

const persistActiveWallet = (addr) => {
Object.keys(addr).length > 1 && localStorage.setItem('activeWallet', JSON.stringify(addr))
}

// Set Active Wallet when page renders
useEffect(() => {
const activeWallet = JSON.parse(localStorage.getItem('activeWallet'))
Copy link
Contributor

@atrefonas atrefonas Jul 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does JSON.parse work on a null string?

Copy link
Contributor Author

@IYTEC IYTEC Jul 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, it doesn't work on null string

Copy link
Contributor Author

@IYTEC IYTEC Jul 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this case, if there are no activeWallet, it just returns null. Nothing to set

Copy link
Collaborator

@ericsharma ericsharma Jul 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@IYTEC I like what you are doing but I am going to hold off merging this in because I do see some edge-cases with this implementation. Perhaps next week we can get hop on a call and talk about it. But for one thing, setActiveWallet() will throw an error some of the time because the actual hook is setting the wallet on the Algodex Api instance. Since it is internally going through our API it will be subject to AJV schema validation and will throw errors when passed an empty object.

if (activeWallet) {
setActiveWallet(activeWallet)
Copy link
Collaborator

@ericsharma ericsharma Jul 29, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@IYTEC I actually think that all we would need to do to avoid the edge case would be to check the return
const activeWallet = JSON.parse(localStorage.getItem('activeWallet')) and only call setActiveWallet(activeWallet) when it isn't an empty object. Great work either way! Lets take the weekend to think about it but we can probably merge this in with minimal tweaking on Monday 🕺

Copy link
Contributor Author

@IYTEC IYTEC Jul 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! No problem, we will go through it on Monday

}
}, [])

const isWalletActive = (addr) => {
return activeWallet?.address === addr
}
Expand All @@ -250,7 +265,13 @@ export function WalletView(props) {
}

const handleWalletClick = async (addr) => {
!isWalletActive(addr) && setActiveWallet(addr)
// !isWalletActive(addr) && setActiveWallet(addr)
if (!isWalletActive(addr)) {
setActiveWallet(addr)
console.log(addresses, 'adddresses')
persistActiveWallet(addr)
// localStorage.setItem('activeWallet', JSON.stringify(addr))
}
}

const walletsQuery = useAccountsInfo(addresses)
Expand Down