From 1b1d1617a09d8400387e483669652ec89273c9e9 Mon Sep 17 00:00:00 2001
From: Lautaro Petaccio <lausuper@gmail.com>
Date: Thu, 4 Jan 2024 17:20:05 -0300
Subject: [PATCH] feat: Add switch network modal loader

---
 src/containers/Navbar/Navbar.container.tsx |  6 ++++--
 src/containers/Navbar/Navbar.tsx           | 22 ++++++++++++++--------
 src/containers/Navbar/Navbar.types.tsx     |  2 ++
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/containers/Navbar/Navbar.container.tsx b/src/containers/Navbar/Navbar.container.tsx
index bd03482e..3950e70a 100644
--- a/src/containers/Navbar/Navbar.container.tsx
+++ b/src/containers/Navbar/Navbar.container.tsx
@@ -5,7 +5,8 @@ import {
   getAddress,
   getMana,
   getChainId,
-  getAppChainId
+  getAppChainId,
+  isSwitchingNetwork
 } from '../../modules/wallet/selectors'
 import { isEnabled } from '../../modules/translation/selectors'
 import {
@@ -23,7 +24,8 @@ const mapState = (state: any): MapStateProps => ({
   isConnected: isConnected(state),
   isConnecting: isConnecting(state),
   hasTranslations: isEnabled(state),
-  appChainId: getAppChainId(state)
+  appChainId: getAppChainId(state),
+  isSwitchingNetwork: isSwitchingNetwork(state)
 })
 
 const mapDispatch = (dispatch: RootDispatch): MapDispatchProps => ({
diff --git a/src/containers/Navbar/Navbar.tsx b/src/containers/Navbar/Navbar.tsx
index ff911521..016e0216 100644
--- a/src/containers/Navbar/Navbar.tsx
+++ b/src/containers/Navbar/Navbar.tsx
@@ -49,7 +49,7 @@ export default class Navbar extends React.PureComponent<NavbarProps> {
           overview: <T id="@dapps.navbar.menu.dao.overview" />,
           governance: <T id="@dapps.navbar.menu.dao.governance" />,
           transparency: <T id="@dapps.navbar.menu.dao.transparency" />,
-          grants: <T id="@dapps.navbar.menu.dao.grants" />,
+          grants: <T id="@dapps.navbar.menu.dao.grants" />
         },
         docs: {
           main: <T id="@dapps.navbar.menu.docs.main" />,
@@ -92,9 +92,13 @@ export default class Navbar extends React.PureComponent<NavbarProps> {
     })
   }
 
-
   render() {
-    const { appChainId, docsUrl, enablePartialSupportAlert } = this.props
+    const {
+      appChainId,
+      docsUrl,
+      enablePartialSupportAlert,
+      isSwitchingNetwork
+    } = this.props
     const expectedChainName = getChainName(appChainId)
     return (
       <>
@@ -121,10 +125,7 @@ export default class Navbar extends React.PureComponent<NavbarProps> {
                   onSwitchNetwork={this.handleSwitchNetwork}
                 />
               ) : null}
-              <NavbarComponent
-                {...this.props}
-                i18n={this.getTranslations()}
-              />
+              <NavbarComponent {...this.props} i18n={this.getTranslations()} />
               {isUnsupported ? (
                 <Modal open size="tiny">
                   <ModalNavigation
@@ -149,7 +150,12 @@ export default class Navbar extends React.PureComponent<NavbarProps> {
                     )}
                   </Modal.Content>
                   <Modal.Actions>
-                    <Button primary onClick={this.handleSwitchNetwork}>
+                    <Button
+                      primary
+                      disabled={isSwitchingNetwork}
+                      loading={isSwitchingNetwork}
+                      onClick={this.handleSwitchNetwork}
+                    >
                       <T
                         id="@dapps.navbar.wrong_network.switch_button"
                         values={{
diff --git a/src/containers/Navbar/Navbar.types.tsx b/src/containers/Navbar/Navbar.types.tsx
index c11031e5..b8831ded 100644
--- a/src/containers/Navbar/Navbar.types.tsx
+++ b/src/containers/Navbar/Navbar.types.tsx
@@ -13,6 +13,7 @@ export type NavbarProps = NavbarComponentProps & {
   hasTranslations?: boolean
   docsUrl?: string
   enablePartialSupportAlert?: boolean
+  isSwitchingNetwork?: boolean
   onSwitchNetwork: typeof switchNetworkRequest
   onSignOut: typeof disconnectWallet
 }
@@ -26,6 +27,7 @@ export type MapStateProps = Pick<
   | 'hasTranslations'
   | 'chainId'
   | 'appChainId'
+  | 'isSwitchingNetwork'
 >
 
 export type MapDispatchProps = Pick<