Introduce redux for one of the state stores (Uniswap#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

@@ -30,4 +30,5 @@ notes.txt
 package-lock.json
 
 cypress/videos
-cypress/screenshots
+cypress/screenshots
+cypress/fixtures/example.json

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,14 +7,14 @@ 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'
 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)`