From f5d756c9d944bd306ee6320b7cbd3e3020c0fbb9 Mon Sep 17 00:00:00 2001
From: michalsmiarowski <michal.smiarowski@thesis.co>
Date: Thu, 14 Dec 2023 20:16:26 +0100
Subject: [PATCH] Fix Ledger Live use effect bug

Fix bug that was introduced in a3352e07e1261c21c8f33cf48c1f598fc818f625. 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                      |  6 ++++--
 .../ledger-live-app/useRequestBitcoinAccount.ts      |  6 ++++--
 .../ledger-live-app/useRequestEthereumAccount.ts     | 12 ++++++++----
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 8760096e2..55b0f65e5 100644
--- a/src/components/Navbar/index.tsx
+++ b/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
diff --git a/src/hooks/ledger-live-app/useRequestBitcoinAccount.ts b/src/hooks/ledger-live-app/useRequestBitcoinAccount.ts
index b589e6100..e6b60a3f1 100644
--- a/src/hooks/ledger-live-app/useRequestBitcoinAccount.ts
+++ b/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"
diff --git a/src/hooks/ledger-live-app/useRequestEthereumAccount.ts b/src/hooks/ledger-live-app/useRequestEthereumAccount.ts
index daa5de550..a529ef69f 100644
--- a/src/hooks/ledger-live-app/useRequestEthereumAccount.ts
+++ b/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,6 +28,7 @@ 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`
@@ -34,10 +36,12 @@ export function useRequestEthereumAccount(): UseRequestAccountReturn {
     // 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"