Merge pull request #701 from threshold-network/fix-ledger-live-use-ef…

…fect-bug

Fix Ledger Live use effect bug

Fix bug that was introduced in #655. 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.

src/components/Navbar/index.tsx

@@ -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()
@@ -20,10 +22,10 @@ const Navbar: FC = () => {
   }
 
   useEffect(() => {
-    if (ledgerLiveAccountAddress) {
+    if (ledgerLiveAccountAddress && isEmbed) {
       dispatch(walletConnected(ledgerLiveAccountAddress))
     }
-  }, [ledgerLiveAccountAddress, dispatch])
+  }, [ledgerLiveAccountAddress, dispatch, isEmbed])
 
   return (
     <NavbarComponent

src/hooks/ledger-live-app/useRequestBitcoinAccount.ts

@@ -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
@@ -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"

src/hooks/ledger-live-app/useRequestEthereumAccount.ts

@@ -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
@@ -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"