From f69d346a27940b93c801db76471818fb235439c6 Mon Sep 17 00:00:00 2001
From: Charlie McKenzie <charlie@dreamoftrees.com>
Date: Thu, 18 Jan 2024 13:46:15 +1100
Subject: [PATCH] WT-1948 fix: Only show loading shimmer once balance API
 request started (#1359)

---
 .../src/widgets/wallet/WalletWidget.tsx       |  2 +-
 .../components/NetworkMenu/NetworkMenu.cy.tsx |  6 +++---
 .../components/NetworkMenu/NetworkMenu.tsx    |  9 +--------
 .../wallet/views/WalletBalances.cy.tsx        | 20 +++++++++----------
 .../widgets/wallet/views/WalletBalances.tsx   |  4 +---
 5 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.tsx
index c61c0d51d8..fcb6555304 100644
--- a/packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.tsx
@@ -201,7 +201,7 @@ export function WalletWidget(props: WalletWidgetInputs) {
             <LoadingView loadingText={loadingText} />
           )}
           {viewState.view.type === WalletWidgetViews.WALLET_BALANCES && (
-            <WalletBalances balancesLoading={balancesLoading} setBalancesLoading={setBalancesLoading} />
+            <WalletBalances balancesLoading={balancesLoading} />
           )}
           {viewState.view.type === WalletWidgetViews.SETTINGS && <Settings />}
           {viewState.view.type === WalletWidgetViews.COIN_INFO && (
diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.cy.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.cy.tsx
index 7befffa2e1..6131c7885a 100644
--- a/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.cy.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.cy.tsx
@@ -50,7 +50,7 @@ describe('Network Menu', () => {
         <ConnectLoaderTestComponent
           initialStateOverride={connectLoaderState}
         >
-          <NetworkMenu setBalancesLoading={() => {}} />
+          <NetworkMenu />
         </ConnectLoaderTestComponent>
       </ViewContextTestComponent>,
     );
@@ -75,7 +75,7 @@ describe('Network Menu', () => {
           <WalletContext.Provider
             value={{ walletState, walletDispatch: () => {} }}
           >
-            <NetworkMenu setBalancesLoading={() => {}} />
+            <NetworkMenu />
           </WalletContext.Provider>
         </ConnectLoaderTestComponent>
       </ViewContextTestComponent>,
@@ -119,7 +119,7 @@ describe('Network Menu', () => {
           <WalletContext.Provider
             value={{ walletState, walletDispatch: () => {} }}
           >
-            <NetworkMenu setBalancesLoading={() => {}} />
+            <NetworkMenu />
           </WalletContext.Provider>
         </ConnectLoaderTestComponent>
       </ViewContextTestComponent>,
diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.tsx
index cb291767e7..feaa518477 100644
--- a/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.tsx
@@ -34,11 +34,7 @@ import {
 import { EventTargetContext } from '../../../../context/event-target-context/EventTargetContext';
 import { UserJourney, useAnalytics } from '../../../../context/analytics-provider/SegmentAnalyticsProvider';
 
-export interface NetworkMenuProps {
-  setBalancesLoading: (loading: boolean) => void;
-}
-
-export function NetworkMenu({ setBalancesLoading }: NetworkMenuProps) {
+export function NetworkMenu() {
   const { t } = useTranslation();
   const { connectLoaderState } = useContext(ConnectLoaderContext);
   const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
@@ -65,8 +61,6 @@ export function NetworkMenu({ setBalancesLoading }: NetworkMenuProps) {
       });
 
       try {
-        setBalancesLoading(true);
-
         const switchNetworkResult = await checkout.switchNetwork({
           provider,
           chainId,
@@ -74,7 +68,6 @@ export function NetworkMenu({ setBalancesLoading }: NetworkMenuProps) {
 
         sendNetworkSwitchEvent(eventTarget, switchNetworkResult.provider, switchNetworkResult.network);
       } catch (err: any) {
-        setBalancesLoading(false);
         if (err.type === CheckoutErrorType.USER_REJECTED_REQUEST_ERROR) {
           // ignore error
         } else {
diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.cy.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.cy.tsx
index 1f21fd0191..c13ad6cfdb 100644
--- a/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.cy.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.cy.tsx
@@ -103,7 +103,7 @@ describe('WalletBalances', () => {
               initialStateOverride={baseWalletState}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+              <WalletBalances balancesLoading={false} />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -123,7 +123,7 @@ describe('WalletBalances', () => {
               initialStateOverride={baseWalletState}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading setBalancesLoading={() => {}} />
+              <WalletBalances balancesLoading />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -145,7 +145,7 @@ describe('WalletBalances', () => {
               initialStateOverride={baseWalletState}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+              <WalletBalances balancesLoading={false} />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -167,7 +167,7 @@ describe('WalletBalances', () => {
               initialStateOverride={{ ...baseWalletState, tokenBalances: [] }}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+              <WalletBalances balancesLoading={false} />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -225,7 +225,7 @@ describe('WalletBalances', () => {
               initialStateOverride={baseWalletState}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+              <WalletBalances balancesLoading={false} />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -287,7 +287,7 @@ describe('WalletBalances', () => {
               initialStateOverride={walletState}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+              <WalletBalances balancesLoading={false} />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -348,7 +348,7 @@ describe('WalletBalances', () => {
               initialStateOverride={walletState}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+              <WalletBalances balancesLoading={false} />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -417,7 +417,7 @@ describe('WalletBalances', () => {
                 <WalletContext.Provider
                   value={{ walletState: testWalletState, walletDispatch: () => {} }}
                 >
-                  <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+                  <WalletBalances balancesLoading={false} />
                 </WalletContext.Provider>
               </ConnectLoaderTestComponent>
             </ViewContextTestComponent>
@@ -445,7 +445,7 @@ describe('WalletBalances', () => {
               <WalletContext.Provider
                 value={{ walletState: testWalletState, walletDispatch: () => {} }}
               >
-                <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+                <WalletBalances balancesLoading={false} />
               </WalletContext.Provider>
             </ConnectLoaderTestComponent>
           </ViewContextTestComponent>
@@ -479,7 +479,7 @@ describe('WalletBalances', () => {
               <WalletContext.Provider
                 value={{ walletState, walletDispatch: () => {} }}
               >
-                <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+                <WalletBalances balancesLoading={false} />
               </WalletContext.Provider>
             </ConnectLoaderTestComponent>
           </ViewContextTestComponent>
diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.tsx
index 52ee4d3671..dfa7fb4de6 100644
--- a/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.tsx
@@ -45,11 +45,9 @@ import { BalanceInfo, mapTokenBalancesWithConversions } from '../functions/token
 
 type WalletBalancesProps = {
   balancesLoading: boolean;
-  setBalancesLoading: (balances: boolean) => void;
 };
 export function WalletBalances({
   balancesLoading,
-  setBalancesLoading,
 }: WalletBalancesProps) {
   const { t } = useTranslation();
   const { connectLoaderState } = useContext(ConnectLoaderContext);
@@ -236,7 +234,7 @@ export function WalletBalances({
         sx={walletBalanceOuterContainerStyles}
       >
         <Box sx={walletBalanceContainerStyles}>
-          {showNetworkMenu && <NetworkMenu setBalancesLoading={setBalancesLoading} />}
+          {showNetworkMenu && <NetworkMenu />}
           <TotalTokenBalance totalBalance={totalFiatAmount} loading={balancesLoading} />
           <Box
             sx={walletBalanceListContainerStyles(showNetworkMenu, showAddCoins)}