Skip to content

Commit

Permalink
feat: Add switch network modal loader
Browse files Browse the repository at this point in the history
  • Loading branch information
LautaroPetaccio committed Jan 4, 2024
1 parent 03f1aeb commit 1b1d161
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 10 deletions.
6 changes: 4 additions & 2 deletions src/containers/Navbar/Navbar.container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import {
getAddress,
getMana,
getChainId,
getAppChainId
getAppChainId,
isSwitchingNetwork
} from '../../modules/wallet/selectors'
import { isEnabled } from '../../modules/translation/selectors'
import {
Expand All @@ -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 => ({
Expand Down
22 changes: 14 additions & 8 deletions src/containers/Navbar/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" />,
Expand Down Expand Up @@ -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 (
<>
Expand All @@ -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
Expand All @@ -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={{
Expand Down
2 changes: 2 additions & 0 deletions src/containers/Navbar/Navbar.types.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export type NavbarProps = NavbarComponentProps & {
hasTranslations?: boolean
docsUrl?: string
enablePartialSupportAlert?: boolean
isSwitchingNetwork?: boolean
onSwitchNetwork: typeof switchNetworkRequest
onSignOut: typeof disconnectWallet
}
Expand All @@ -26,6 +27,7 @@ export type MapStateProps = Pick<
| 'hasTranslations'
| 'chainId'
| 'appChainId'
| 'isSwitchingNetwork'
>

export type MapDispatchProps = Pick<
Expand Down

0 comments on commit 1b1d161

Please sign in to comment.