Skip to content

Commit

Permalink
Fix Ledger Live use effect bug
Browse files Browse the repository at this point in the history
Fix bug that was introduced in a3352e0. The
`useRequestEthereumAccount` hook that supposed to be used only in embed mode,
was firing it's `useEffect` in the website where it set the empty account in the
redux state. This prevented some functionality in the dApp to work properly. For
example the Operator Mapping Card was not displayed when user connected the
account on the Staking page.

The fix is adding `isEmbed` check for all `useEffects` related to ledger live
app.
  • Loading branch information
michalsmiarowski committed Dec 14, 2023
1 parent a3352e0 commit f5d756c
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 8 deletions.
6 changes: 4 additions & 2 deletions src/components/Navbar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@ import { walletConnected } from "../../store/account"
import { useRequestEthereumAccount } from "../../hooks/ledger-live-app"
import { useIsActive } from "../../hooks/useIsActive"
import { useConnectWallet } from "../../hooks/useConnectWallet"
import { useIsEmbed } from "../../hooks/useIsEmbed"

const Navbar: FC = () => {
const { isActive, account, chainId, deactivate } = useIsActive()
const dispatch = useAppDispatch()
const connectWallet = useConnectWallet()
const { isEmbed } = useIsEmbed()

const { account: ledgerLiveAccount, requestAccount } =
useRequestEthereumAccount()
Expand All @@ -20,10 +22,10 @@ const Navbar: FC = () => {
}

useEffect(() => {
if (ledgerLiveAccountAddress) {
if (ledgerLiveAccountAddress && isEmbed) {
dispatch(walletConnected(ledgerLiveAccountAddress))
}
}, [ledgerLiveAccountAddress, dispatch])
}, [ledgerLiveAccountAddress, dispatch, isEmbed])

return (
<NavbarComponent
Expand Down
6 changes: 4 additions & 2 deletions src/hooks/ledger-live-app/useRequestBitcoinAccount.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useCallback, useEffect } from "react"
import { useLedgerLiveApp } from "../../contexts/LedgerLiveAppContext"
import { useWalletApiReactTransport } from "../../contexts/TransportProvider"
import { supportedChainId } from "../../utils/getEnvVariable"
import { useIsEmbed } from "../useIsEmbed"

type UseRequestAccountState = {
pending: boolean
Expand All @@ -22,10 +23,11 @@ export function useRequestBitcoinAccount(): UseRequestAccountReturn {
const { walletApiReactTransport } = useWalletApiReactTransport()
const useRequestAccountReturn = useWalletApiRequestAccount()
const { account, requestAccount } = useRequestAccountReturn
const { isEmbed } = useIsEmbed()

useEffect(() => {
setBtcAccount(account || undefined)
}, [account])
if (isEmbed) setBtcAccount(account || undefined)
}, [account, isEmbed])

const requestBitcoinAccount = useCallback(async () => {
const currencyId = supportedChainId === "1" ? "bitcoin" : "bitcoin_testnet"
Expand Down
12 changes: 8 additions & 4 deletions src/hooks/ledger-live-app/useRequestEthereumAccount.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useWalletApiReactTransport } from "../../contexts/TransportProvider"
import { walletConnected } from "../../store/account"
import { supportedChainId } from "../../utils/getEnvVariable"
import { useAppDispatch } from "../store/useAppDispatch"
import { useIsEmbed } from "../useIsEmbed"

type UseRequestAccountState = {
pending: boolean
Expand All @@ -27,17 +28,20 @@ export function useRequestEthereumAccount(): UseRequestAccountReturn {
const { account, requestAccount } = useRequestAccountReturn
const dispatch = useAppDispatch()
const { setIsSdkInitializing } = useIsTbtcSdkInitializing()
const { isEmbed } = useIsEmbed()

useEffect(() => {
// Setting the eth account in LedgerLiveAppContext through `setEthAccount`
// method will trigger the useEffect in Threshold Context that will
// reinitialize the lib and tBTC SDK. We can set the is initializing flag
// here to indicate as early as as possible that the sdk is in the
// initializing process.
setIsSdkInitializing(true)
setEthAccount(account || undefined)
dispatch(walletConnected(account?.address || ""))
}, [account])
if (isEmbed) {
setIsSdkInitializing(true)
setEthAccount(account || undefined)
dispatch(walletConnected(account?.address || ""))
}
}, [account, isEmbed])

const requestEthereumAccount = useCallback(async () => {
const currencyId = supportedChainId === "1" ? "ethereum" : "ethereum_goerli"
Expand Down

0 comments on commit f5d756c

Please sign in to comment.