Skip to content

Commit

Permalink
refactor: app configuration and routing (#181)
Browse files Browse the repository at this point in the history 
* refactor: app configuration and routing
* feat: add loading indicator to when the networks are loading or on network change
  • Loading branch information
@Ayagoumi
Ayagoumi authored Dec 28, 2023
1 parent 425d1ae commit 1ea29fb
Show file tree
Hide file tree
Showing 9 changed files with 229 additions and 78 deletions.
14 changes: 8 additions & 6 deletions src/components/Navbar/NetworkSwitcher.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { mdiDeleteOutline, mdiPencilOutline, mdiPlus } from '@mdi/js'
import Icon from '@mdi/react'
import {
Box,
Button,
Chip,
CircularProgress,

Check warning on line 5 in src/components/Navbar/NetworkSwitcher.tsx

View workflow job for this annotation

GitHub Actions / yarn-build 

'CircularProgress' is defined but never used
DialogTitle,
MenuItem,
MenuList,
Expand All @@ -12,13 +11,16 @@ import {
Typography,
useTheme,
} from '@mui/material'
import React from 'react'
import useNetwork from '../../hooks/useNetwork'
import { mdiDeleteOutline, mdiPencilOutline, mdiPlus } from '@mdi/js'
import { networkStatusColor, networkStatusName } from '../../utils/networkUtils'
import MHidden from '../@material-extend/MHidden'
import DialogAnimate from '../Animate/DialogAnimate'

import AddNewNetwork from './AddNewNetwork'
import DialogAnimate from '../Animate/DialogAnimate'
import Icon from '@mdi/react'
import MHidden from '../@material-extend/MHidden'
import React from 'react'
import SelectedNetwork from './SelectNetwork'
import useNetwork from '../../hooks/useNetwork'

interface NetworkSwitcherProps {
handleCloseSidebar?: () => void
Expand Down
21 changes: 14 additions & 7 deletions src/hooks/useNetwork.ts
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import {
addNetworks,
changeActiveNetwork,
changeLoading,
changeNetworkStatus,
getActiveNetwork,
getNetworks,
selectNetworkStatus,
} from '@/redux/slices/network'
import { useStore } from 'Explorer/useStore'
import { updateApps, updateNotificationStatus, updateShowButton } from '../redux/slices/app-config'
import { useAppDispatch, useAppSelector } from './reduxHooks'
import { useEffect, useState } from 'react'

import { AvaNetwork } from 'wallet/AvaNetwork'
import store from 'wallet/store'
import { Status } from '../@types'
import { updateApps, updateNotificationStatus, updateShowButton } from '../redux/slices/app-config'
import { useAppDispatch, useAppSelector } from './reduxHooks'
import store from 'wallet/store'
import { useStore } from 'Explorer/useStore'

const useNetwork = (): {
handleChangeNetwork: (arg: string) => void
Expand All @@ -22,6 +24,7 @@ const useNetwork = (): {
handleCloseModal: () => void
switchNetwork: (network: AvaNetwork) => Promise<void>
status: Status
loading: boolean
networks: AvaNetwork[]
open: boolean
edit: boolean
Expand All @@ -39,18 +42,19 @@ const useNetwork = (): {
const networks: AvaNetwork[] = useAppSelector(getNetworks)
const activeNetwork = useAppSelector<AvaNetwork>(getActiveNetwork)
const status: Status = useAppSelector(selectNetworkStatus)
const loading = useAppSelector(state => state.network.loading)

const { changeNetworkExplorer } = useStore()

useEffect(() => {
if (selectedNetwork) {
handleChangeEvent()
}
if (selectedNetwork) handleChangeEvent()

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedNetwork])

const switchNetwork = async (network: AvaNetwork) => {
try {
dispatch(changeLoading(true))
dispatch(changeNetworkStatus(Status.LOADING))
if (store.state.activeWallet?.type === 'multisig') {
await store.dispatch('activateWallet', store.state.wallets[0])
Expand All @@ -74,12 +78,14 @@ const useNetwork = (): {
dispatch(updateNotificationStatus({ message: 'Disconnected', severity: 'error' }))
store.state.Network.status = 'disconnected'
dispatch(changeNetworkStatus(Status.FAILED))
dispatch(changeLoading(false))
} finally {
let newSelectedNetwork = store.state.Network.selectedNetwork
? store.state.Network.selectedNetwork
: network
dispatch(changeActiveNetwork(newSelectedNetwork))
changeNetworkExplorer(newSelectedNetwork)
dispatch(changeLoading(false))
}
}
const handleChangeNetwork = (selected: string) => {
Expand Down Expand Up @@ -146,6 +152,7 @@ const useNetwork = (): {
handleCloseModal,
switchNetwork,
status,
loading,
networks,
open,
edit,
Expand Down
65 changes: 62 additions & 3 deletions src/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,37 @@
:root {
--border-radius-lg: 12px;
--border-radius-sm: 7px;
--border-radius-sm: 6px;
--spacing-space-md: 12px;
--spacing-space-base: 16px;
--primary-btn-border-color: #149ded;
--secondary-color: #149ded;
--primary-border: solid 1px var(--primary-border-color);
--secondary-border: solid 1px var(--secondary-border-color);
--box-shadow: rgb(0 0 0 / 10%) 0px 0px 5px;
--tooltip-bg: rgba(51, 65, 85, 0.92);
--slate-600: #475569;
--negative-background: #e5431f;
--white: #fff;
--camino-slate-slate-300: #cbd4e2;
--camino-slate-slate-600: #475569;
--camino-slate-slate-700: #334155;
--camino-slate-slate-800: #1e293b;
--camino-slate-slate-950: #020617;
--camino-brand-too-blue-to-be-true: #0085ff;
--camino-brand-too-blue-to-be-true-100: rgba(0, 133, 255, 0.25);
--camino-brand-error: #e5431f;
--camino-brand-error-100: rgba(229, 67, 31, 0.25);
--primary-font: 'Inter', sans-serif;
--camino-brand-primary: linear-gradient(90deg, #0085ff 0%, #b440fc 100%);
--tailwind-slate-slate-200: #e2e7f0;
--tailwind-slate-slate-300: #cbd4e2;
--tailwind-slate-slate-600: #475569;
--tailwind-slate-slate-900: #0f182a;
--tailwind-slate-white: #fff;
--spacing-space-sm: 8px;
--spacing-space-md: 12px;
--spacing-space-base: 16px;
--spacing-space-lg: 24px;
}

html[data-theme='day'] {
Expand All @@ -24,7 +49,7 @@ html[data-theme='day'] {
--info: #2c7490;
--info-1: 44, 116, 144;
--bg-wallet: #f5f6fa;
--warning: #f19d38;
--warning: #e5a21f;
--bg-wallet-light: #ffffff;
--primary-border-color: rgba(203, 213, 225, 0.12);
--secondary-border-color: #e2e8f0;
Expand All @@ -35,6 +60,19 @@ html[data-theme='day'] {
--sidebar-background: #fff;
--icon-color: #0f172a;
--icon-color-light: #334155;
--camino-slate-slate-white: #ffffff;
--camino-info-border: rgba(0, 133, 255, 0.5);
--camino-info-background: rgba(0, 133, 255, 0.05);
--camino-positive-border: rgba(9, 222, 107, 0.5);
--camino-positive-background: rgba(9, 222, 107, 0.05);
--camino-warning-border: rgba(229, 162, 31, 0.5);
--camino-warning-background: rgba(229, 162, 31, 0.05);
--camino-negative-border: rgba(229, 67, 31, 0.5);
--camino-negative-background: rgba(229, 67, 31, 0.05);
--camino-warning-color: #334155;
--camino-alert-color: #334155;
--camino-success-color: rgba(24, 183, 40, 1);
--camino-error-color: rgba(229, 67, 31, 1);
}

html[data-theme='night'] {
Expand Down Expand Up @@ -63,6 +101,27 @@ html[data-theme='night'] {
--sidebar-background: #1e293b;
--icon-color: #ffffff;
--icon-color--light: #ffffff;
--camino-brand-too-blue-to-be-true: #0085ff;
--camino-info-border: rgba(0, 133, 255, 0.3);
--camino-info-background: rgba(0, 133, 255, 0.05);
--camino-positive-border: rgba(9, 222, 107, 0.3);
--camino-positive-background: rgba(9, 222, 107, 0.05);
--camino-warning-border: rgba(229, 162, 31, 0.3);
--camino-warning-background: rgba(229, 162, 31, 0.05);
--camino-negative-border: rgba(229, 67, 31, 0.3);
--camino-negative-background: rgba(229, 67, 31, 0.05);
--camino-warning-color: #cbd4e2;
--camino-alert-color: #cbd4e2;
--camino-success-color: rgba(9, 222, 107, 1);
--camino-error-color: rgba(229, 67, 31, 1);
--camino-slate-slate-950: #020617;
--camino-slate-slate-600: #475569;
}
body {
overflow: auto;
background-color: var(--bg) !important;
height: auto;
font-size: 16px !important;
}

#app {
Expand All @@ -76,4 +135,4 @@ html[data-theme='night'] {
font-family: 'Rubik', sans-serif;
transition-duration: 0.2s;
width: 100%;
}
}
145 changes: 113 additions & 32 deletions src/layout/MainLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,36 @@
import { Backdrop, CircularProgress, Paper, Typography } from '@mui/material'
import { Box, Toolbar, useTheme } from '@mui/material'
import React, { useState } from 'react'
import Navbar from '../components/Navbar'
import {
addNetworks,
changeActiveNetwork,
changeLoading,
changeNetworkStatus,
} from '../redux/slices/network'

import Footer from '../components/Footer'
import store from 'wallet/store'
import Navbar from '../components/Navbar'
import Notifications from '../components/Notification'
import { Status } from '../@types'
import { useAppDispatch } from '../hooks/reduxHooks'
import { addNetworks, changeActiveNetwork, changeNetworkStatus } from '../redux/slices/network'
import { changeActiveApp } from '../redux/slices/app-config'
import { matchNetworkStatus } from '../utils/componentsUtils'
import { Box, Toolbar, useTheme } from '@mui/material'
import store from 'wallet/store'
import { useAppDispatch } from '../hooks/reduxHooks'
import { useEffect } from 'react'
import { useEffectOnce } from '../hooks/useEffectOnce'
import { useLocation } from 'react-router-dom'
import { changeActiveApp } from '../redux/slices/app-config'
import useNetwork from '../hooks/useNetwork'
import { useStore } from 'Explorer/useStore'
import Notifications from '../components/Notification'
import { useEffectOnce } from '../hooks/useEffectOnce'

const MainLayout = ({ children }) => {
const [loadNetworks, setLoadNetworks] = useState(true)
const theme = useTheme()
const dispatch = useAppDispatch()
const { updateNetworks, changeNetworkExplorer } = useStore()
const { loading } = useNetwork()
const location = useLocation()
const init = async () => {
dispatch(changeLoading(true))
if (location.pathname.split('/')[1] === 'wallet') dispatch(changeActiveApp('Wallet'))
else if (location.pathname.split('/')[1] === 'explorer')
dispatch(changeActiveApp('Explorer'))
Expand All @@ -39,36 +50,106 @@ const MainLayout = ({ children }) => {
updateNetworks(networks)
changeNetworkExplorer(selectedNetwork)
setLoadNetworks(false)
dispatch(changeLoading(false))
}
useEffectOnce(() => {
init()
})

useEffect(() => {
const html = document.documentElement
if (loading || loadNetworks) html.style.overflow = 'hidden'
else html.style.overflow = 'auto'
}, [loading, loadNetworks])

return (
<Box sx={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
<Navbar />
<Notifications />
<Toolbar
sx={{
minHeight: '65px !important',
p: '0px !important',
[theme.breakpoints.up('md')]: { minHeight: '69px !important' },
}}
/>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
minHeight: 'calc(80vh - 69px)',
padding: '0 1.5rem',
}}
>
{!loadNetworks && <>{children}</>}
<>
<Box sx={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
<Navbar />
<Notifications />
<Toolbar
sx={{
minHeight: '65px !important',
p: '0px !important',
[theme.breakpoints.up('md')]: { minHeight: '69px !important' },
}}
/>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
minHeight: 'calc(80vh - 69px)',
padding: '0 1.5rem',
}}
>
{!loadNetworks && <>{children}</>}
</Box>
<Footer />
</Box>
<Footer />
</Box>
{(loading || loadNetworks) && (
<Backdrop
sx={{ color: '#fff', zIndex: theme => theme.zIndex.drawer + 1 }}
open={true}
>
<Paper
sx={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
position: 'fixed',
padding: '20px',
marginLeft: '10px',
marginRight: '10px',
minHeight: '200px',
backgroundColor: 'var(--camino-slate-slate-800)',
maxWidth: '500px',
}}
>
<Typography
variant="h4"
gutterBottom
sx={{
fontSize: '1.25rem !important',
mb: theme => theme.spacing(3),
textAlign: 'center',
color: 'var(--tailwind-slate-slate-200)',
}}
>
{!loadNetworks
? `Connecting to a new network, please wait.`
: `Loading networks, please wait.`}
</Typography>
<Typography
variant="caption"
gutterBottom
sx={{
textAlign: 'center',
color: 'var(--tailwind-slate-slate-200)',
}}
>
This will only take a few seconds. Please do not close the window.
</Typography>
<Box
sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
mt: theme => theme.spacing(4),
}}
>
<CircularProgress
size={50}
thickness={2}
sx={{ color: 'var(--camino-brand-too-blue-to-be-true)' }}
/>
</Box>
</Paper>
</Backdrop>
)}
</>
)
}

Expand Down
Loading

0 comments on commit 1ea29fb

Please sign in to comment.