Refactor: Remove useAppState and the global state it contains, implem…

…ent in other ways (#103)

* refactor: remove statistics and app.tipBlockNumber from AppState

* refactor: remove primaryColor, secondaryColor, and chartColor from State.App

* refactor: remove language from State.App

* refactor: remove toast from State.App

* refactor: remove app from AppState

* refactor: remove maintenanceAlertVisible from State.Components

* refactor: remove headerSearchBarVisible from State.Components

* refactor: remove the last global state mobileMenuVisible

* feat: remove MaintenanceMsg in the Alert component

* feat: stop using the reorgStartedAt property

package.json

@@ -23,6 +23,7 @@
     "jsbi": "3.2.5",
     "lint-staged": "^13.2.3",
     "moment": "2.29.4",
+    "observable-hooks": "^4.2.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-i18next": "11.18.6",

src/App.tsx

@@ -4,10 +4,10 @@ import { ThemeProvider } from 'styled-components'
 import 'antd/dist/antd.css'
 import Routers from './routes'
 import Toast from './components/Toast'
-import withProviders, { useAppState } from './contexts/providers'
 import useInitApp from './contexts/providers/hook'
 import { isMainnet } from './utils/chain'
 import { DASQueryContextProvider } from './contexts/providers/dasQuery'
+import { getPrimaryColor, getSecondaryColor } from './constants/common'
 
 const appStyle = {
   width: '100vw',
@@ -17,15 +17,14 @@ const appStyle = {
 
 const queryClient = new QueryClient()
 
-const App = withProviders(() => {
+const App = () => {
   useInitApp()
-  const { app } = useAppState()
   const theme = useMemo(
     () => ({
-      primary: app.primaryColor,
-      secondary: app.secondaryColor,
+      primary: getPrimaryColor(),
+      secondary: getSecondaryColor(),
     }),
-    [app.primaryColor, app.secondaryColor],
+    [],
   )
 
   return (
@@ -40,6 +39,6 @@ const App = withProviders(() => {
       </div>
     </ThemeProvider>
   )
-})
+}
 
 export default App

src/components/Card/HashCard/index.tsx

@@ -5,9 +5,7 @@ import CopyIcon from '../../../assets/copy.png'
 import i18n from '../../../utils/i18n'
 import { v2AxiosIns } from '../../../service/http/fetcher'
 import { copyElementValue } from '../../../utils/util'
-import { AppActions } from '../../../contexts/actions'
 import SmallLoading from '../../Loading/SmallLoading'
-import { useDispatch } from '../../../contexts/providers'
 import { useIsMobile, useNewAddr, useDeprecatedAddr } from '../../../utils/hook'
 import SimpleButton from '../../SimpleButton'
 import { ReactComponent as OpenInNew } from '../../../assets/open_in_new.svg'
@@ -16,6 +14,7 @@ import { HashCardPanel, LoadingPanel } from './styled'
 import styles from './styles.module.scss'
 import AddressText from '../../AddressText'
 import { useDASAccount } from '../../../contexts/providers/dasQuery'
+import { useSetToast } from '../../Toast'
 
 const DASInfo: FC<{ address: string }> = ({ address }) => {
   const alias = useDASAccount(address)
@@ -50,7 +49,7 @@ export default ({
   showDASInfoOnHeader?: boolean | string
 }) => {
   const isMobile = useIsMobile()
-  const dispatch = useDispatch()
+  const setToast = useSetToast()
 
   const isTx = i18n.t('transaction.transaction') === title
   const newAddr = useNewAddr(hash)
@@ -59,12 +58,7 @@ export default ({
 
   const handleExportTxClick = async () => {
     const res = await v2AxiosIns(`transactions/${hash}/raw`).catch(error => {
-      dispatch({
-        type: AppActions.ShowToastMessage,
-        payload: {
-          message: error.message,
-        },
-      })
+      setToast({ message: error.message })
     })
     if (!res) return
 
@@ -110,12 +104,7 @@ export default ({
               className="hash__copy_icon"
               onClick={() => {
                 copyElementValue(document.getElementById('hash__value'))
-                dispatch({
-                  type: AppActions.ShowToastMessage,
-                  payload: {
-                    message: i18n.t('common.copied'),
-                  },
-                })
+                setToast({ message: i18n.t('common.copied') })
               }}
             >
               {!loading && <img src={CopyIcon} alt="copy" />}

src/components/Content/index.tsx

@@ -1,18 +1,12 @@
 import { ReactNode } from 'react'
 import styled from 'styled-components'
-import { useAppState } from '../../contexts/providers'
-import MobileMenu from '../Header/MobileMenu'
 
 const ContentPanel = styled.div`
   width: 100%;
   overflow-x: hidden;
   flex: 1;
-  margin-top: var(--navbar-height);
   background: #ededed;
 `
 export default ({ children, style }: { children: ReactNode; style?: any }) => {
-  const {
-    components: { mobileMenuVisible },
-  } = useAppState()
-  return <ContentPanel style={style}>{mobileMenuVisible ? <MobileMenu /> : children}</ContentPanel>
+  return <ContentPanel style={style}>{children}</ContentPanel>
 }

src/components/Dropdown/Language/index.tsx

@@ -1,6 +1,4 @@
 import i18n, { currentLanguage, changeLanguage } from '../../../utils/i18n'
-import { useDispatch } from '../../../contexts/providers'
-import { AppActions } from '../../../contexts/actions'
 import { LanguagePanel } from './styled'
 import SimpleButton from '../../SimpleButton'
 
@@ -12,19 +10,12 @@ export const languageText = (lan: 'en' | 'zh' | null, reverse?: boolean) => {
 }
 
 export default ({ setShow, left, top }: { setShow: Function; left: number; top: number }) => {
-  const dispatch = useDispatch()
   const hideDropdown = () => {
     setShow(false)
   }
   const handleLanguage = () => {
     hideDropdown()
     changeLanguage(currentLanguage() === 'en' ? 'zh' : 'en')
-    dispatch({
-      type: AppActions.UpdateAppLanguage,
-      payload: {
-        language: currentLanguage() === 'en' ? 'zh' : 'en',
-      },
-    })
   }
   return (
     <LanguagePanel left={left} top={top} onMouseLeave={hideDropdown}>

src/components/Header/BlockchainComp/index.tsx

@@ -4,7 +4,6 @@ import { isMainnet } from '../../../utils/chain'
 import WhiteDropdownIcon from '../../../assets/white_dropdown.png'
 import BlueDropUpIcon from '../../../assets/blue_drop_up.png'
 import GreenDropUpIcon from '../../../assets/green_drop_up.png'
-import { useAppState } from '../../../contexts/providers'
 import { HeaderBlockchainPanel, MobileSubMenuPanel } from './styled'
 import SimpleButton from '../../SimpleButton'
 import ChainDropdown from '../../Dropdown/ChainType'
@@ -27,15 +26,12 @@ const handleVersion = (nodeVersion: string) => {
 }
 
 const BlockchainDropdown: FC<{ nodeVersion: string }> = ({ nodeVersion }) => {
-  const {
-    app: { language },
-  } = useAppState()
   const [showChainType, setShowChainType] = useState(false)
   const [chainTypeLeft, setChainTypeLeft] = useState(0)
   const [chainTypeTop, setChainTypeTop] = useState(0)
 
   useLayoutEffect(() => {
-    if (showChainType && language) {
+    if (showChainType) {
       const chainDropdownComp = document.getElementById('header__blockchain__panel')
       if (chainDropdownComp) {
         const chainDropdownReact = chainDropdownComp.getBoundingClientRect()
@@ -45,7 +41,7 @@ const BlockchainDropdown: FC<{ nodeVersion: string }> = ({ nodeVersion }) => {
         }
       }
     }
-  }, [showChainType, language])
+  }, [showChainType])
   return (
     <HeaderBlockchainPanel
       id="header__blockchain__panel"