Reducer Refactor

craco.config.js

@@ -1,6 +1,3 @@
-
-const now = Math.floor(new Date().getTime() / 1000)
-
 module.exports = {
   webpack: {
     plugins: {

package.json

@@ -9,10 +9,8 @@
     "@reach/portal": "^0.15.0",
     "@reduxjs/toolkit": "^1.5.1",
     "@typechain/ethers-v5": "^7.0.1",
-    "@types/jest": "^26.0.23",
     "@types/ledgerhq__hw-transport-webusb": "^4.70.1",
     "@types/lodash": "^4.14.170",
-    "@types/luxon": "^2.0.7",
     "@types/multicodec": "^2.1.0",
     "@types/node": "^14.14.37",
     "@types/react": "^17.0.11",
@@ -125,13 +123,19 @@
     "@ethersproject/strings": "^5.3.0",
     "@ethersproject/units": "^5.3.0",
     "@sentry/react": "^6.9.0",
+    "@types/jest": "^27.4.1",
+    "@types/lodash.mapvalues": "^4.6.6",
+    "@types/luxon": "^2.0.9",
     "@types/react-date-range": "^1.1.8",
     "@types/react-vis": "^1.11.7",
     "@ubeswap/sdk": "^2.1.0",
+    "@ubeswap/token-math": "^4.4.4",
     "axios": "^0.21.4",
     "bignumber.js": "^9.0.1",
     "graphql": "^15.7.1",
+    "jsbi": "^4.1.0",
     "lodash": "^4.17.21",
+    "lodash.mapvalues": "^4.6.0",
     "randombytes": "^2.1.0",
     "react-circular-progressbar": "^2.0.4",
     "react-countdown": "^2.3.2",

src/components/CurrencyInputPanel/index.tsx

@@ -1,5 +1,5 @@
-import { Pair, Token } from '@ubeswap/sdk'
 import { useColor } from 'hooks/useColor'
+import { Token, TokenAmount } from 'lib/token-utils'
 import { darken } from 'polished'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -12,7 +12,6 @@ import { useIsDarkMode } from '../../state/user/hooks'
 import { useTokenBalance } from '../../state/wallet/hooks'
 import { TYPE } from '../../theme'
 import CurrencyLogo from '../CurrencyLogo'
-import DoubleCurrencyLogo from '../DoubleLogo'
 import { Input as NumericalInput } from '../NumericalInput'
 import { RowBetween } from '../Row'
 import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
@@ -47,7 +46,6 @@ const CurrencySelect = styled.button<{
   walletConnected: boolean
   bgColor: any
   isDarkMode: boolean
-  pair: boolean
 }>`
   display: flex;
   align-items: center;
@@ -64,7 +62,7 @@ const CurrencySelect = styled.button<{
   cursor: pointer;
   user-select: none;
   border: none;
-  width: ${({ pair }) => (pair ? '14rem' : '10rem')};
+  width: 10rem;
   height: 2.4rem;
   padding: 0 8px;
 
@@ -139,14 +137,13 @@ export enum TokenType {
 interface CurrencyInputPanelProps {
   value: string
   onUserInput: (value: string) => void
-  onMax?: () => void
+  onMax?: (max?: TokenAmount) => void
   showMaxButton: boolean
   label?: string
   onCurrencySelect?: (currency: Token) => void
   currency?: Token | null
   disableCurrencySelect?: boolean
   hideBalance?: boolean
-  pair?: Pair | null
   hideInput?: boolean
   disableInput?: boolean
   otherCurrency?: Token | null
@@ -165,7 +162,6 @@ export default function CurrencyInputPanel({
   disableCurrencySelect = false,
   hideBalance = false,
   disableInput = false,
-  pair = null, // used for double token logo
   hideInput = false,
   otherCurrency,
   id,
@@ -197,7 +193,7 @@ export default function CurrencyInputPanel({
               </TYPE.body>
               {connected && (
                 <TYPE.body
-                  onClick={onMax}
+                  onClick={() => (onMax ? onMax(selectedCurrencyBalance) : null)}
                   color={theme.text2}
                   fontWeight={500}
                   fontSize={14}
@@ -217,7 +213,6 @@ export default function CurrencyInputPanel({
             bgColor={tokenSelectBackground}
             selected={!!currency}
             walletConnected={connected}
-            pair={!!pair}
             className="open-currency-select-button"
             onClick={() => {
               if (!disableCurrencySelect) {
@@ -226,24 +221,15 @@ export default function CurrencyInputPanel({
             }}
           >
             <Aligner>
-              {pair ? (
-                <DoubleCurrencyLogo currency0={pair.token0} currency1={pair.token1} size={24} margin={true} />
-              ) : currency ? (
-                <CurrencyLogo currency={currency} size={'24px'} />
-              ) : null}
-              {pair ? (
-                <StyledTokenName active={!!currency} className="pair-name-container">
-                  {pair?.token0.symbol}:{pair?.token1.symbol}
-                </StyledTokenName>
-              ) : (
-                <StyledTokenName className="token-symbol-container" active={Boolean(currency && currency.symbol)}>
-                  {(currency && currency.symbol && currency.symbol.length > 20
-                    ? currency.symbol.slice(0, 4) +
-                      '...' +
-                      currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)
-                    : currency?.symbol) || t('Select Token')}
-                </StyledTokenName>
-              )}
+              {currency ? <CurrencyLogo currency={currency} size={'24px'} /> : null}
+              <StyledTokenName className="token-symbol-container" active={Boolean(currency && currency.symbol)}>
+                {(currency && currency.symbol && currency.symbol.length > 20
+                  ? currency.symbol.slice(0, 4) +
+                    '...' +
+                    currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)
+                  : currency?.symbol) || t('Select Token')}
+              </StyledTokenName>
+
               {!disableCurrencySelect && <StyledDropDown selected={!!currency} />}
             </Aligner>
           </CurrencySelect>

src/components/CurrencyLogo/index.tsx

@@ -1,9 +1,8 @@
-import { Token } from '@ubeswap/sdk'
+import { Token } from 'lib/token-utils'
 import React, { useMemo } from 'react'
 import styled from 'styled-components'
 
 import useHttpLocations from '../../hooks/useHttpLocations'
-import { WrappedTokenInfo } from '../../state/lists/hooks'
 import Logo from '../Logo'
 
 const StyledLogo = styled(Logo)<{ size: string }>`
@@ -23,15 +22,11 @@ export default function CurrencyLogo({
   size?: string
   style?: React.CSSProperties
 }) {
-  const uriLocations = useHttpLocations(currency instanceof WrappedTokenInfo ? currency.logoURI : undefined)
+  const uriLocations = useHttpLocations(currency?.icon ?? undefined)
 
   const srcs: string[] = useMemo(() => {
-    if (currency instanceof Token) {
-      if (currency instanceof WrappedTokenInfo) {
-        return [...uriLocations, currency.logoURI ?? currency.address]
-      }
-
-      return []
+    if (currency) {
+      return [...uriLocations, currency.icon ?? currency.address]
     }
     return []
   }, [currency, uriLocations])

src/components/CurrencyPoolLogo/index.tsx

@@ -1,4 +1,4 @@
-import { Token } from '@ubeswap/sdk'
+import { Token } from 'lib/token-utils'
 import React from 'react'
 import styled from 'styled-components'
 

src/components/DoubleLogo/index.tsx

@@ -1,4 +1,4 @@
-import { Token } from '@ubeswap/sdk'
+import { Token } from 'lib/token-utils'
 import React from 'react'
 import styled from 'styled-components'
 

src/components/FormattedCurrencyAmount/index.tsx

@@ -1,4 +1,5 @@
-import { Fraction, JSBI, TokenAmount } from '@ubeswap/sdk'
+import JSBI from 'jsbi'
+import { Fraction, TokenAmount } from 'lib/token-utils'
 import React from 'react'
 
 const CURRENCY_AMOUNT_MIN = new Fraction(JSBI.BigInt(1), JSBI.BigInt(1000000))

src/components/Header/URLWarning.tsx

@@ -1,4 +1,4 @@
-import { ChainId } from '@ubeswap/sdk'
+import { ChainId } from 'lib/token-utils'
 import React from 'react'
 import { isMobile } from 'react-device-detect'
 import { AlertTriangle, X } from 'react-feather'
@@ -25,9 +25,9 @@ export const StyledClose = styled(X)`
 `
 
 const appURL: { [id in ChainId]: string } = {
-  [ChainId.MAINNET]: 'mobius.money',
-  [ChainId.ALFAJORES]: 'app-alfajores.mobius.money',
-  [ChainId.BAKLAVA]: 'app-baklava.mobius.money',
+  [ChainId.Mainnet]: 'mobius.money',
+  [ChainId.Alfajores]: 'app-alfajores.mobius.money',
+  [ChainId.Baklava]: 'app-baklava.mobius.money',
 }
 
 export default function URLWarning() {

src/components/Header/UbeBalanceContent.tsx

@@ -1,10 +1,9 @@
 import Loader from 'components/Loader'
 import QuestionHelper from 'components/QuestionHelper'
-import { useMobi } from 'hooks/Tokens'
 import React from 'react'
 import { X } from 'react-feather'
+import { useMobiPrice } from 'state/application/hooks'
 import styled from 'styled-components'
-import { useCUSDPrice } from 'utils/useCUSDPrice'
 
 import tokenLogo from '../../assets/images/MOBI-200.png'
 import { CHAIN, MOBI } from '../../constants'
@@ -44,8 +43,7 @@ export default function UbeBalanceContent({ setShowUbeBalanceModal }: { setShowU
   const ube = MOBI[CHAIN]
 
   const total = useAggregateUbeBalance()
-  const mobi = useMobi()
-  const mobiprice = useCUSDPrice(mobi)
+  const mobiprice = useMobiPrice()
   const ret = useCirculatingSupply()
 
   return (

src/components/Header/index.tsx

@@ -1,7 +1,7 @@
-import { CELO, TokenAmount } from '@ubeswap/sdk'
 import { CardNoise } from 'components/earn/styled'
 import Modal from 'components/Modal'
 import usePrevious from 'hooks/usePrevious'
+import { TokenAmount } from 'lib/token-utils'
 import { darken } from 'polished'
 import React, { useState } from 'react'
 import { isMobile } from 'react-device-detect'
@@ -17,6 +17,7 @@ import { CountUp } from 'use-count-up'
 
 import Logo from '../../assets/svg/mobius.svg'
 import { CHAIN } from '../../constants'
+import { CELO } from '../../constants/tokens'
 import { useWeb3Context } from '../../hooks'
 import useTheme from '../../hooks/useTheme'
 import { useDarkModeManager } from '../../state/user/hooks'