Introduce redux for one of the state stores (#742)

* Introduce redux for one of the state stores

* Remove unused state

* Clean up hooks

* Add types for react-redux and fix error from any type on useSelector

* Strongly type the web3 provider

* Make the popup content into a POJO

* Lint errors

* Clean up method call

* Fix lint error

* Fix lint error

* Lint

.gitignore

@@ -31,3 +31,4 @@ package-lock.json
 
 cypress/videos
 cypress/screenshots
+cypress/fixtures/example.json
\ No newline at end of file

package.json

@@ -15,6 +15,7 @@
     "@material-ui/core": "^4.9.5",
     "@reach/dialog": "^0.2.8",
     "@reach/tooltip": "^0.2.0",
+    "@reduxjs/toolkit": "^1.3.5",
     "@uniswap/sdk": "^2.0.3",
     "@uniswap/v2-core": "1.0.0",
     "@uniswap/v2-periphery": "1.0.0-beta.0",
@@ -41,6 +42,7 @@
     "react-feather": "^2.0.8",
     "react-ga": "^2.5.7",
     "react-i18next": "^10.7.0",
+    "react-redux": "^7.2.0",
     "react-router-dom": "^5.0.0",
     "react-scripts": "^3.4.1",
     "react-spring": "^8.0.27",
@@ -55,6 +57,7 @@
     "@types/node": "^13.13.5",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
+    "@types/react-redux": "^7.1.8",
     "@types/react-router-dom": "^5.0.0",
     "@types/rebass": "^4.0.5",
     "@types/styled-components": "^4.2.0",

src/components/ExchangePage/index.tsx

@@ -7,6 +7,7 @@ import { withRouter, RouteComponentProps } from 'react-router-dom'
 import { BigNumber } from '@ethersproject/bignumber'
 import { MaxUint256 } from '@ethersproject/constants'
 import { Contract } from '@ethersproject/contracts'
+import { useUserAdvanced } from '../../state/application/hooks'
 import { Field, SwapAction, useSwapStateReducer } from './swap-store'
 import { Text } from 'rebass'
 import Card, { BlueCard, GreyCard, YellowCard } from '../../components/Card'
@@ -14,7 +15,6 @@ import { AutoColumn, ColumnCenter } from '../../components/Column'
 import { AutoRow, RowBetween, RowFixed } from '../Row'
 import { ROUTER_ADDRESS } from '../../constants'
 import { useTokenAllowance } from '../../data/Allowances'
-import { useUserAdvanced } from '../../contexts/Application'
 import { useAddressBalance, useAllBalances } from '../../contexts/Balances'
 import { useLocalStorageTokens } from '../../contexts/LocalStorage'
 import { usePair } from '../../data/Reserves'

src/components/Popups/index.tsx

@@ -3,8 +3,14 @@ import styled, { ThemeContext } from 'styled-components'
 import { useMediaLayout } from 'use-media'
 
 import { X } from 'react-feather'
-import { usePopups } from '../../contexts/Application'
+import { PopupContent } from '../../state/application/actions'
+import { usePopups } from '../../state/application/hooks'
+import { Link } from '../../theme'
 import { AutoColumn } from '../Column'
+import DoubleTokenLogo from '../DoubleLogo'
+import Row from '../Row'
+import TxnPopup from '../TxnPopup'
+import { Text } from 'rebass'
 
 const StyledClose = styled(X)`
   position: absolute;
@@ -66,6 +72,33 @@ const Popup = styled.div`
   `}
 `
 
+function PopupItem({ content, popKey }: { content: PopupContent; popKey: string }) {
+  if ('txn' in content) {
+    const {
+      txn: { hash, success, summary }
+    } = content
+    return <TxnPopup popKey={popKey} hash={hash} success={success} summary={summary} />
+  } else if ('poolAdded' in content) {
+    const {
+      poolAdded: { token0, token1 }
+    } = content
+    return (
+      <AutoColumn gap={'10px'}>
+        <Text fontSize={20} fontWeight={500}>
+          Pool Imported
+        </Text>
+        <Row>
+          <DoubleTokenLogo a0={token0?.address ?? ''} a1={token1?.address ?? ''} margin={true} />
+          <Text fontSize={16} fontWeight={500}>
+            UNI {token0?.symbol} / {token1?.symbol}
+          </Text>
+        </Row>
+        <Link>View on Uniswap Info.</Link>
+      </AutoColumn>
+    )
+  }
+}
+
 export default function App() {
   const theme = useContext(ThemeContext)
   // get all popups
@@ -81,7 +114,7 @@ export default function App() {
           return (
             <Popup key={item.key}>
               <StyledClose color={theme.text2} onClick={() => removePopup(item.key)} />
-              {React.cloneElement(item.content, { popKey: item.key })}
+              <PopupItem content={item.content} popKey={item.key} />
             </Popup>
           )
         })}
@@ -100,7 +133,7 @@ export default function App() {
               return (
                 <Popup key={item.key}>
                   <StyledClose color={theme.text2} onClick={() => removePopup(item.key)} />
-                  {React.cloneElement(item.content, { popKey: item.key })}
+                  <PopupItem content={item.content} popKey={item.key} />
                 </Popup>
               )
             })}

src/components/TxnPopup/index.tsx

@@ -3,10 +3,10 @@ import React, { useState } from 'react'
 import { AlertCircle, CheckCircle } from 'react-feather'
 
 import styled from 'styled-components'
-import { usePopups } from '../../contexts/Application'
 
 import { useWeb3React } from '../../hooks'
 import useInterval from '../../hooks/useInterval'
+import { usePopups } from '../../state/application/hooks'
 import { TYPE } from '../../theme'
 
 import { Link } from '../../theme/components'
@@ -35,7 +35,7 @@ export default function TxnPopup({
   hash: string
   success?: boolean
   summary?: string
-  popKey?: number
+  popKey?: string
 }) {
   const { chainId } = useWeb3React()
   const [count, setCount] = useState(1)

src/components/WalletModal/index.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import { isMobile } from 'react-device-detect'
 import { useWeb3React, UnsupportedChainIdError } from '@web3-react/core'
 import { URI_AVAILABLE } from '@web3-react/walletconnect-connector'
+import { useWalletModalOpen, useWalletModalToggle } from '../../state/application/hooks'
 
 import Modal from '../Modal'
 import AccountDetails from '../AccountDetails'
@@ -15,7 +16,6 @@ import { Link } from '../../theme'
 import MetamaskIcon from '../../assets/images/metamask.png'
 import { ReactComponent as Close } from '../../assets/images/x.svg'
 import { injected, walletconnect, fortmatic, portis } from '../../connectors'
-import { useWalletModalToggle, useWalletModalOpen } from '../../contexts/Application'
 import { OVERLAY_READY } from '../../connectors/Fortmatic'
 
 const CloseIcon = styled.div`

src/components/Web3Status/index.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useWeb3React, UnsupportedChainIdError } from '@web3-react/core'
 import { darken, lighten } from 'polished'
 import { Activity } from 'react-feather'
+import { useWalletModalToggle } from '../../state/application/hooks'
 
 import Identicon from '../Identicon'
 import PortisIcon from '../../assets/images/portisIcon.png'
@@ -21,7 +22,6 @@ import { useENSName } from '../../hooks'
 import { shortenAddress } from '../../utils'
 import { useAllTransactions } from '../../contexts/Transactions'
 import { NetworkContextName } from '../../constants'
-import { useWalletModalToggle } from '../../contexts/Application'
 import { injected, walletconnect, walletlink, fortmatic, portis } from '../../connectors'
 
 const SpinnerWrapper = styled(Spinner)`

src/contexts/Application.tsx

-import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
-
-import { useWeb3React } from '../hooks'
-
-const BLOCK_NUMBER = 'BLOCK_NUMBER'
-const USD_PRICE = 'USD_PRICE'
-const WALLET_MODAL_OPEN = 'WALLET_MODAL_OPEN'
-const POPUP_LIST = 'POPUP_LIST'
-const POPUP_KEY = 'POPUP_KEY'
-
-const UPDATE_BLOCK_NUMBER = 'UPDATE_BLOCK_NUMBER'
-const TOGGLE_WALLET_MODAL = 'TOGGLE_WALLET_MODAL'
-
-const ADD_POPUP = 'ADD_POPUP'
-const USER_ADVANCED = 'USER_ADVANCED'
-const TOGGLE_USER_ADVANCED = 'TOGGLE_USER_ADVANCED'
-
-interface ApplicationState {
-  BLOCK_NUMBER: {}
-  USD_PRICE: {}
-  POPUP_LIST: Array<{ key: number; show: boolean; content: React.ReactElement }>
-  POPUP_KEY: number
-  WALLET_MODAL_OPEN: boolean
-  USER_ADVANCED: boolean
-}
-
-const ApplicationContext = createContext<[ApplicationState, { [updater: string]: (...args: any[]) => void }]>([
-  {
-    [BLOCK_NUMBER]: {},
-    [USD_PRICE]: {},
-    [POPUP_LIST]: [],
-    [POPUP_KEY]: 0,
-    [WALLET_MODAL_OPEN]: false,
-    [USER_ADVANCED]: false
-  },
-  {}
-])
-
-function useApplicationContext() {
-  return useContext(ApplicationContext)
-}
-
-function reducer(state: ApplicationState, { type, payload }): ApplicationState {
-  switch (type) {
-    case UPDATE_BLOCK_NUMBER: {
-      const { networkId, blockNumber } = payload
-      return {
-        ...state,
-        [BLOCK_NUMBER]: {
-          ...state?.[BLOCK_NUMBER],
-          [networkId]: blockNumber
-        }
-      }
-    }
-
-    case TOGGLE_WALLET_MODAL: {
-      return { ...state, [WALLET_MODAL_OPEN]: !state[WALLET_MODAL_OPEN] }
-    }
-
-    case TOGGLE_USER_ADVANCED: {
-      return { ...state, [USER_ADVANCED]: !state[USER_ADVANCED] }
-    }
-
-    case ADD_POPUP: {
-      const { newList } = payload
-      return { ...state, [POPUP_LIST]: newList, [POPUP_KEY]: state?.[POPUP_KEY] + 1 }
-    }
-
-    default: {
-      throw Error(`Unexpected action type in ApplicationContext reducer: '${type}'.`)
-    }
-  }
-}
-
-export default function Provider({ children }: { children: React.ReactNode }) {
-  const [state, dispatch] = useReducer(reducer, {
-    [BLOCK_NUMBER]: {},
-    [USD_PRICE]: {},
-    [POPUP_LIST]: [],
-    [POPUP_KEY]: 0,
-    [WALLET_MODAL_OPEN]: false,
-    [USER_ADVANCED]: false
-  })
-
-  const updateBlockNumber = useCallback(
-    (networkId, blockNumber) => {
-      dispatch({ type: UPDATE_BLOCK_NUMBER, payload: { networkId, blockNumber } })
-    },
-    [dispatch]
-  )
-
-  const toggleWalletModal = useCallback(() => {
-    dispatch({ type: TOGGLE_WALLET_MODAL, payload: null })
-  }, [dispatch])
-
-  const toggleUserAdvanced = useCallback(() => {
-    dispatch({ type: TOGGLE_USER_ADVANCED, payload: null })
-  }, [dispatch])
-
-  const setPopups = useCallback(
-    newList => {
-      dispatch({ type: ADD_POPUP, payload: { newList } })
-    },
-    [dispatch]
-  )
-
-  return (
-    <ApplicationContext.Provider
-      value={useMemo(() => [state, { updateBlockNumber, toggleWalletModal, toggleUserAdvanced, setPopups }], [
-        state,
-        updateBlockNumber,
-        toggleWalletModal,
-        toggleUserAdvanced,
-        setPopups
-      ])}
-    >
-      {children}
-    </ApplicationContext.Provider>
-  )
-}
-
-export function Updater() {
-  const { library, chainId } = useWeb3React()
-
-  const [, { updateBlockNumber }] = useApplicationContext()
-
-  // update block number
-  useEffect(() => {
-    if (library) {
-      let stale = false
-
-      const update = () => {
-        library
-          .getBlockNumber()
-          .then(blockNumber => {
-            if (!stale) {
-              updateBlockNumber(chainId, blockNumber)
-            }
-          })
-          .catch(() => {
-            if (!stale) {
-              updateBlockNumber(chainId, null)
-            }
-          })
-      }
-
-      update()
-      library.on('block', update)
-
-      return () => {
-        stale = true
-        library.removeListener('block', update)
-      }
-    }
-  }, [chainId, library, updateBlockNumber])
-
-  return null
-}
-
-export function useBlockNumber() {
-  const { chainId } = useWeb3React()
-
-  const [state] = useApplicationContext()
-
-  return state?.[BLOCK_NUMBER]?.[chainId]
-}
-
-export function useWalletModalOpen() {
-  const [state] = useApplicationContext()
-
-  return state[WALLET_MODAL_OPEN]
-}
-
-export function useWalletModalToggle() {
-  const [, { toggleWalletModal }] = useApplicationContext()
-
-  return toggleWalletModal
-}
-
-export function useUserAdvanced() {
-  const [state] = useApplicationContext()
-
-  return state[USER_ADVANCED]
-}
-
-export function useToggleUserAdvanced() {
-  const [, { toggleUserAdvanced }] = useApplicationContext()
-  return toggleUserAdvanced
-}
-
-export function usePopups(): [
-  ApplicationState['POPUP_LIST'],
-  (content: React.ReactElement) => void,
-  (key: number) => void
-] {
-  const [state, { setPopups }] = useApplicationContext()
-
-  const index = state[POPUP_KEY]
-  const currentPopups = state[POPUP_LIST]
-
-  function addPopup(content: React.ReactElement): void {
-    const newItem = {
-      show: true,
-      key: index,
-      content: content
-    }
-    currentPopups.push(newItem)
-    setPopups(currentPopups)
-  }
-
-  function removePopup(key: number): void {
-    currentPopups.map(item => {
-      if (key === item.key) {
-        item.show = false
-      }
-      return true
-    })
-    setPopups(currentPopups)
-  }
-
-  const activePopups = currentPopups.filter(item => {
-    return item.show
-  })
-
-  return [activePopups, addPopup, removePopup]
-}

src/contexts/Balances.tsx

 import React, { createContext, useContext, useReducer, useRef, useMemo, useCallback, useEffect, ReactNode } from 'react'
 import { TokenAmount, Token, JSBI, WETH } from '@uniswap/sdk'
+import { useBlockNumber } from '../state/application/hooks'
 
 import { useAllTokens } from './Tokens'
-import { useBlockNumber } from './Application'
 import { useWeb3React, useDebounce } from '../hooks'
 
 import { getEtherBalance, getTokenBalance, isAddress } from '../utils'
@@ -158,28 +158,46 @@ function useBalancesContext() {
 export default function Provider({ children }: { children: ReactNode }) {
   const [state, dispatch] = useReducer(reducer, undefined, initialize)
 
-  const startListening = useCallback((chainId, address, tokenAddress) => {
+  const startListening = useCallback(
+    (chainId, address, tokenAddress) => {
       dispatch({ type: Action.START_LISTENING, payload: { chainId, address, tokenAddress } })
-  }, [])
+    },
+    [dispatch]
+  )
 
-  const stopListening = useCallback((chainId, address, tokenAddress) => {
+  const stopListening = useCallback(
+    (chainId, address, tokenAddress) => {
       dispatch({ type: Action.STOP_LISTENING, payload: { chainId, address, tokenAddress } })
-  }, [])
+    },
+    [dispatch]
+  )
 
-  const update = useCallback((chainId, address, tokenAddress, value, blockNumber) => {
+  const update = useCallback(
+    (chainId, address, tokenAddress, value, blockNumber) => {
       dispatch({ type: Action.UPDATE, payload: { chainId, address, tokenAddress, value, blockNumber } })
-  }, [])
+    },
+    [dispatch]
+  )
 
-  const batchUpdateAccount = useCallback((chainId, address, tokenAddresses, values, blockNumber) => {
-    dispatch({ type: Action.BATCH_UPDATE_ACCOUNT, payload: { chainId, address, tokenAddresses, values, blockNumber } })
-  }, [])
+  const batchUpdateAccount = useCallback(
+    (chainId, address, tokenAddresses, values, blockNumber) => {
+      dispatch({
+        type: Action.BATCH_UPDATE_ACCOUNT,
+        payload: { chainId, address, tokenAddresses, values, blockNumber }
+      })
+    },
+    [dispatch]
+  )
 
-  const batchUpdateExchanges = useCallback((chainId, pairAddresses, tokenAddresses, values, blockNumber) => {
+  const batchUpdateExchanges = useCallback(
+    (chainId, pairAddresses, tokenAddresses, values, blockNumber) => {
       dispatch({
         type: Action.BATCH_UPDATE_EXCHANGES,
         payload: { chainId, pairAddresses, tokenAddresses, values, blockNumber }
       })
-  }, [])
+    },
+    [dispatch]
+  )
 
   return (
     <BalancesContext.Provider

src/contexts/Transactions.tsx

 import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
 
-import TxnPopup from '../components/TxnPopup'
-
 import { useWeb3React } from '../hooks'
-import { useBlockNumber, usePopups } from './Application'
+import { useBlockNumber, usePopups } from '../state/application/hooks'
 
 const ADD = 'ADD'
 const CHECK = 'CHECK'
@@ -140,23 +138,17 @@ export function Updater() {
                   finalize(chainId, hash, receipt)
                   // add success or failure popup
                   if (receipt.status === 1) {
-                    addPopup(
-                      <TxnPopup
-                        popKey={1}
-                        hash={hash}
-                        success={true}
-                        summary={allTransactions[hash]?.response?.summary}
-                      />
-                    )
+                    addPopup({
+                      txn: {
+                        hash,
+                        success: true,
+                        summary: allTransactions[hash]?.response?.summary
+                      }
+                    })
                   } else {
-                    addPopup(
-                      <TxnPopup
-                        popKey={2}
-                        hash={hash}
-                        success={false}
-                        summary={allTransactions[hash]?.response?.summary}
-                      />
-                    )
+                    addPopup({
+                      txn: { hash, success: false, summary: allTransactions[hash]?.response?.summary }
+                    })
                   }
                 }
               }

src/hooks/index.ts

+import { Web3Provider } from '@ethersproject/providers'
 import { useState, useMemo, useCallback, useEffect, useRef } from 'react'
 import { useWeb3React as useWeb3ReactCore } from '@web3-react/core'
 import { isMobile } from 'react-device-detect'
@@ -9,8 +10,8 @@ import { NetworkContextName } from '../constants'
 import { getContract, getExchangeContract, isAddress } from '../utils'
 
 export function useWeb3React() {
-  const context = useWeb3ReactCore()
-  const contextNetwork = useWeb3ReactCore(NetworkContextName)
+  const context = useWeb3ReactCore<Web3Provider>()
+  const contextNetwork = useWeb3ReactCore<Web3Provider>(NetworkContextName)
   return context.active ? context : contextNetwork
 }
 

src/index.tsx

@@ -3,14 +3,16 @@ import ReactDOM from 'react-dom'
 import ReactGA from 'react-ga'
 import { Web3ReactProvider, createWeb3ReactRoot } from '@web3-react/core'
 import { Web3Provider } from '@ethersproject/providers'
+import { Provider } from 'react-redux'
 
 import { NetworkContextName } from './constants'
 import { isMobile } from 'react-device-detect'
 import LocalStorageContextProvider, { Updater as LocalStorageContextUpdater } from './contexts/LocalStorage'
-import ApplicationContextProvider, { Updater as ApplicationContextUpdater } from './contexts/Application'
 import TransactionContextProvider, { Updater as TransactionContextUpdater } from './contexts/Transactions'
 import BalancesContextProvider, { Updater as BalancesContextUpdater } from './contexts/Balances'
 import App from './pages/App'
+import store from './state'
+import { Updater as ApplicationContextUpdater } from './state/application/updater'
 import ThemeProvider, { FixedGlobalStyle, ThemedGlobalStyle } from './theme'
 import './i18n'
 
@@ -36,11 +38,9 @@ ReactGA.pageview(window.location.pathname + window.location.search)
 function ContextProviders({ children }: { children: React.ReactNode }) {
   return (
     <LocalStorageContextProvider>
-      <ApplicationContextProvider>
       <TransactionContextProvider>
         <BalancesContextProvider>{children}</BalancesContextProvider>
       </TransactionContextProvider>
-      </ApplicationContextProvider>
     </LocalStorageContextProvider>
   )
 }
@@ -61,6 +61,7 @@ ReactDOM.render(
     <FixedGlobalStyle />
     <Web3ReactProvider getLibrary={getLibrary}>
       <Web3ProviderNetwork getLibrary={getLibrary}>
+        <Provider store={store}>
           <ContextProviders>
             <Updaters />
             <ThemeProvider>
@@ -70,6 +71,7 @@ ReactDOM.render(
               </>
             </ThemeProvider>
           </ContextProviders>
+        </Provider>
       </Web3ProviderNetwork>
     </Web3ReactProvider>
   </>,

src/state/application/actions.ts

+import { createAction } from '@reduxjs/toolkit'
+
+export type PopupContent =
+  | {
+      txn: {
+        hash: string
+        success?: boolean
+        summary?: string
+      }
+    }
+  | {
+      poolAdded: {
+        token0?: {
+          address?: string
+          symbol?: string
+        }
+        token1: {
+          address?: string
+          symbol?: string
+        }
+      }
+    }
+
+export const updateBlockNumber = createAction<{ networkId: number; blockNumber: number | null }>('updateBlockNumber')
+export const toggleWalletModal = createAction<void>('toggleWalletModal')
+export const toggleUserAdvanced = createAction<void>('toggleUserAdvanced')
+export const addPopup = createAction<{ content: PopupContent }>('addPopup')
+export const removePopup = createAction<{ key: string }>('removePopup')

src/state/application/hooks.ts

+import { useCallback } from 'react'
+import { useWeb3React } from '../../hooks'
+import { addPopup, PopupContent, removePopup, toggleWalletModal } from './actions'
+import { useSelector, useDispatch } from 'react-redux'
+import { AppState } from '../index'
+
+export function useBlockNumber() {
+  const { chainId } = useWeb3React()
+
+  return useSelector((state: AppState) => state.application.blockNumber[chainId])
+}
+
+export function useWalletModalOpen() {
+  return useSelector((state: AppState) => state.application.walletModalOpen)
+}
+
+export function useWalletModalToggle() {
+  const dispatch = useDispatch()
+  return useCallback(() => dispatch(toggleWalletModal()), [dispatch])
+}
+
+export function useUserAdvanced() {
+  return useSelector((state: AppState) => state.application.userAdvanced)
+}
+
+export function usePopups(): [
+  AppState['application']['popupList'],
+  (content: PopupContent) => void,
+  (key: string) => void
+] {
+  const dispatch = useDispatch()
+  const activePopups = useSelector((state: AppState) => state.application.popupList.filter(item => item.show))
+
+  const wrappedAddPopup = useCallback(
+    (content: PopupContent) => {
+      dispatch(addPopup({ content }))
+    },
+    [dispatch]
+  )
+
+  const wrappedRemovePopup = useCallback(
+    (key: string) => {
+      dispatch(removePopup({ key }))
+    },
+    [dispatch]
+  )
+
+  return [activePopups, wrappedAddPopup, wrappedRemovePopup]
+}

src/state/application/reducer.ts

+import { createReducer, nanoid } from '@reduxjs/toolkit'
+import {
+  addPopup,
+  PopupContent,
+  removePopup,
+  toggleUserAdvanced,
+  toggleWalletModal,
+  updateBlockNumber
+} from './actions'
+
+type PopupList = Array<{ key: string; show: boolean; content: PopupContent }>
+
+interface ApplicationState {
+  blockNumber: { [chainId: number]: number }
+  popupList: PopupList
+  walletModalOpen: boolean
+  userAdvanced: boolean
+}
+
+const initialState: ApplicationState = {
+  blockNumber: {},
+  popupList: [],
+  walletModalOpen: false,
+  userAdvanced: false
+}
+
+export default createReducer(initialState, builder =>
+  builder
+    .addCase(updateBlockNumber, (state, action) => {
+      const { networkId, blockNumber } = action.payload
+      state.blockNumber[networkId] = blockNumber
+    })
+    .addCase(toggleUserAdvanced, state => {
+      state.userAdvanced = !state.userAdvanced
+    })
+    .addCase(toggleWalletModal, state => {
+      state.walletModalOpen = !state.walletModalOpen
+    })
+    .addCase(addPopup, (state, { payload: { content } }) => {
+      state.popupList.push({
+        key: nanoid(),
+        show: true,
+        content
+      })
+    })
+    .addCase(removePopup, (state, { payload: { key } }) => {
+      state.popupList.forEach(p => {
+        if (p.key === key) {
+          p.show = false
+        }
+      })
+    })
+)

src/state/application/updater.ts

+import { useEffect } from 'react'
+import { useWeb3React } from '../../hooks'
+import { updateBlockNumber } from './actions'
+import { useDispatch } from 'react-redux'
+
+export function Updater() {
+  const { library, chainId } = useWeb3React()
+  const dispatch = useDispatch()
+
+  // update block number
+  useEffect(() => {
+    if (library) {
+      let stale = false
+
+      const update = () => {
+        library
+          .getBlockNumber()
+          .then(blockNumber => {
+            if (!stale) {
+              dispatch(updateBlockNumber({ networkId: chainId, blockNumber }))
+            }
+          })
+          .catch(() => {
+            if (!stale) {
+              dispatch(updateBlockNumber({ networkId: chainId, blockNumber: null }))
+            }
+          })
+      }
+
+      update()
+      library.on('block', update)
+
+      return () => {
+        stale = true
+        library.removeListener('block', update)
+      }
+    }
+  }, [dispatch, chainId, library])
+
+  return null
+}

src/state/index.ts

+import { configureStore } from '@reduxjs/toolkit'
+import application from './application/reducer'
+
+const store = configureStore({
+  reducer: {
+    application
+  }
+})
+
+export default store
+
+export type AppState = ReturnType<typeof store.getState>
+export type AppDispatch = typeof store.dispatch

yarn.lock

@@ -2074,6 +2074,16 @@
   resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.1.4.tgz#0dc4ecedf523004337214187db70a46183bd945b"
   integrity sha512-QHbzXjflSlCvDd6vJwdwx16mSB+vUCCQMiU/wK/CgVNPibtpEiIbisyxkpZc55DyDFNUIqP91rSUsNae+ogGDQ==
 
+"@reduxjs/toolkit@^1.3.5":
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.3.5.tgz#37c1ab6de9aa66f95bab25a8e9bd9d8ec3b7b80c"
+  integrity sha512-QVqI2T6kwT/3CVdCa6KjUDdEz9YY1eCLQVcRZamiaOAcKI7kkJSh2P0GjaaKXTjIFy0u9sWCXjzifPJNGoXjlw==
+  dependencies:
+    immer "^6.0.1"
+    redux "^4.0.0"
+    redux-thunk "^2.3.0"
+    reselect "^4.0.0"
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -2413,7 +2423,7 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.5.tgz#527d20ef68571a4af02ed74350164e7a67544860"
   integrity sha512-wLD/Aq2VggCJXSjxEwrMafIP51Z+13H78nXIX0ABEuIGhmB5sNGbR113MOKo+yfw+RDo1ZU3DM6yfnnRF/+ouw==
 
-"@types/hoist-non-react-statics@*":
+"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
   integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
@@ -2527,6 +2537,16 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-redux@^7.1.8":
+  version "7.1.8"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.8.tgz#3631feb559f7858d6ad9eea1d6ef41fa64fe7205"
+  integrity sha512-kpplH7Wg2SYU00sZVT98WBN0ou6QKrYcShRaW+5Vpe5l7bluKWJbWmAL+ieiso07OQzpcP5i1PeY3690640ZWg==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react-router-dom@^5.0.0":
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.5.tgz#7c334a2ea785dbad2b2dcdd83d2cf3d9973da090"
@@ -9216,6 +9236,11 @@ immer@1.10.0:
   resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
   integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==
 
+immer@^6.0.1:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-6.0.5.tgz#77187d13b71c6cee40dde3b8e87a50a7a636d630"
+  integrity sha512-Q2wd90qrgFieIpLzAO2q9NLEdmyp/sr76Ml4Vm5peUKgyTa2CQa3ey8zuzwSKOlKH7grCeGBGUcLLVCVW1aguA==
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -13993,11 +14018,22 @@ react-i18next@^10.7.0:
     "@babel/runtime" "^7.3.1"
     html-parse-stringify2 "2.0.1"
 
-react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4:
+react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-redux@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d"
+  integrity sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    hoist-non-react-statics "^3.3.0"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.9.0"
+
 react-remove-scroll-bar@^1.1.5:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-1.2.0.tgz#07250b2bc581f56315759c454c9b159dd04ba49d"
@@ -14280,6 +14316,19 @@ recursive-readdir@2.2.2:
   dependencies:
     minimatch "3.0.4"
 
+redux-thunk@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
+  integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
+
+redux@^4.0.0:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
+  integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
+  dependencies:
+    loose-envify "^1.4.0"
+    symbol-observable "^1.2.0"
+
 reflexbox@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/reflexbox/-/reflexbox-4.0.6.tgz#fc756d2cc1ca493baf9b96bb27dd640ad8154cf1"
@@ -14564,6 +14613,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+reselect@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
+  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -15938,7 +15992,7 @@ swr@0.1.18:
   dependencies:
     fast-deep-equal "2.0.1"
 
-symbol-observable@^1.1.0:
+symbol-observable@^1.1.0, symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==