Refactor with core (#33)

* Update index.ts * feature(service worker): add offline support (#1319) * Revert "feature(service worker): add offline support (#1319)" (#1320) This reverts commit 34dfb41. * Revert "Revert "feature(service worker): add offline support (#1319)" (#1320)" (#1321) This reverts commit db3328c. * unregisters all installed service workers (#1322) * fix: modals stealing focus across frames (#1326) * improvement(lists): add BA SEC tokens to unsupported list (#1327) * show hidden search results by default * update break styles * optimize filter, use debounce on input * increase debounce time * add ba association list * handle dismiss (#1328) * split up sdk use between core and v2 * Fix code style issues with ESLint * remove service worker Co-authored-by: Moody Salem <moodysalem@users.noreply.github.com> Co-authored-by: Jordan Frankfurt <jordanwfrankfurt@gmail.com> Co-authored-by: Hyperion <72735936+moontools-hyperion@users.noreply.github.com> Co-authored-by: Lint Action <lint-action@samuelmeuli.com>
Uniswap · Mar 24, 2021 · 878fc9c · 878fc9c
1 parent 32e679c
commit 878fc9c
Show file tree

Hide file tree

Showing 106 changed files with 522 additions and 212 deletions.
diff --git a/package.json b/package.json
@@ -41,7 +41,6 @@
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",
     "@uniswap/merkle-distributor": "1.0.1",
-    "@uniswap/sdk": "3.0.3",
     "@uniswap/token-lists": "^1.0.0-beta.19",
     "@uniswap/v2-core": "1.0.0",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
@@ -94,19 +93,25 @@
     "react-window": "^1.8.5",
     "rebass": "^4.0.7",
     "redux-localstorage-simple": "^2.3.1",
-    "serve": "^11.3.0",
+    "serve": "^11.3.2",
     "start-server-and-test": "^1.11.0",
     "styled-components": "^4.2.0",
     "styled-system": "^5.1.5",
     "typescript": "^3.8.3",
     "use-count-up": "^2.2.5",
-    "wcag-contrast": "^3.0.0"
+    "wcag-contrast": "^3.0.0",
+    "workbox-core": "^6.1.0",
+    "workbox-expiration": "^6.1.0",
+    "workbox-precaching": "^6.1.0",
+    "workbox-routing": "^6.1.0",
+    "workbox-strategies": "^6.1.0"
   },
   "resolutions": {
     "@walletconnect/web3-provider": "1.1.1-alpha.0"
   },
   "scripts": {
     "start": "react-scripts start",
+    "start:service-worker": "yarn build && yarn serve -s build",
     "build": "react-scripts build",
     "eject": "react-scripts eject",
     "integration-test": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run'",
@@ -134,6 +139,8 @@
   "license": "GPL-3.0-or-later",
   "dependencies": {
     "@uniswap/default-token-list": "^2.0.0",
+    "@uniswap/sdk-core": "^1.0.8",
+    "@uniswap/v2-sdk": "^1.0.6",
     "lightweight-charts": "^3.3.0"
   }
 }
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,7 @@
 {
-  "short_name": "Uniswap",
-  "name": "Uniswap",
+  "background_color": "#fff",
+  "display": "standalone",
+  "homepage_url": "https://app.uniswap.org",
   "icons": [
     {
       "src": "./images/192x192_App_Icon.png",
@@ -16,7 +17,8 @@
     }
   ],
   "orientation": "portrait",
-  "display": "standalone",
-  "theme_color": "#ff007a",
-  "background_color": "#fff"
+  "name": "Uniswap",
+  "short_name": "Uniswap",
+  "start_url": ".",
+  "theme_color": "#ff007a"
 }
diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx
@@ -1,4 +1,5 @@
-import { Currency, Pair } from '@uniswap/sdk'
+import { Pair } from '@uniswap/v2-sdk'
+import { Currency } from '@uniswap/sdk-core'
 import React, { useState, useCallback } from 'react'
 import styled from 'styled-components'
 import { darken } from 'polished'

diff --git a/src/components/CurrencyLogo/index.tsx b/src/components/CurrencyLogo/index.tsx
@@ -1,4 +1,4 @@
-import { Currency, ETHER, Token } from '@uniswap/sdk'
+import { Currency, ETHER, Token } from '@uniswap/sdk-core'
 import React, { useMemo } from 'react'
 import styled from 'styled-components'
 

diff --git a/src/components/DoubleLogo/index.tsx b/src/components/DoubleLogo/index.tsx
@@ -1,4 +1,4 @@
-import { Currency } from '@uniswap/sdk'
+import { Currency } from '@uniswap/sdk-core'
 import React from 'react'
 import styled from 'styled-components'
 import CurrencyLogo from '../CurrencyLogo'

diff --git a/src/components/FormattedCurrencyAmount/index.tsx b/src/components/FormattedCurrencyAmount/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import { CurrencyAmount, Fraction, JSBI } from '@uniswap/sdk'
+import { CurrencyAmount, Fraction } from '@uniswap/sdk-core'
+import { JSBI } from '@uniswap/v2-sdk'
 
 const CURRENCY_AMOUNT_MIN = new Fraction(JSBI.BigInt(1), JSBI.BigInt(1000000))
 

diff --git a/src/components/Header/UniBalanceContent.tsx b/src/components/Header/UniBalanceContent.tsx
@@ -1,4 +1,4 @@
-import { ChainId, TokenAmount } from '@uniswap/sdk'
+import { ChainId, TokenAmount } from '@uniswap/sdk-core'
 import React, { useMemo } from 'react'
 import { X } from 'react-feather'
 import styled from 'styled-components'

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,4 +1,4 @@
-import { ChainId, TokenAmount } from '@uniswap/sdk'
+import { ChainId, TokenAmount } from '@uniswap/sdk-core'
 import React, { useState } from 'react'
 import { Text } from 'rebass'
 import { NavLink } from 'react-router-dom'

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -117,7 +117,13 @@ export default function Modal({
       {fadeTransition.map(
         ({ item, key, props }) =>
           item && (
-            <StyledDialogOverlay key={key} style={props} onDismiss={onDismiss} initialFocusRef={initialFocusRef}>
+            <StyledDialogOverlay
+              key={key}
+              style={props}
+              onDismiss={onDismiss}
+              initialFocusRef={initialFocusRef}
+              unstable_lockFocusAcrossFrames={false}
+            >
               <StyledDialogContent
                 {...(isMobile
                   ? {

diff --git a/src/components/Popups/ClaimPopup.tsx b/src/components/Popups/ClaimPopup.tsx
@@ -1,4 +1,4 @@
-import { TokenAmount } from '@uniswap/sdk'
+import { TokenAmount } from '@uniswap/sdk-core'
 import React, { useEffect } from 'react'
 import { X } from 'react-feather'
 import styled, { keyframes } from 'styled-components'

diff --git a/src/components/PositionCard/V1.tsx b/src/components/PositionCard/V1.tsx
@@ -1,6 +1,6 @@
-import { Token, TokenAmount, WETH } from '@uniswap/sdk'
 import React, { useContext } from 'react'
 import { Link, RouteComponentProps, withRouter } from 'react-router-dom'
+import { Token, TokenAmount, WETH9 } from '@uniswap/sdk-core'
 import { Text } from 'rebass'
 import { ThemeContext } from 'styled-components'
 import { useActiveWeb3React } from '../../hooks'
@@ -27,7 +27,7 @@ function V1PositionCard({ token, V1LiquidityBalance }: PositionCardProps) {
           <RowFixed>
             <DoubleCurrencyLogo currency0={token} margin={true} size={20} />
             <Text fontWeight={500} fontSize={20} style={{ marginLeft: '' }}>
-              {`${chainId && token.equals(WETH[chainId]) ? 'WETH' : token.symbol}/ETH`}
+              {`${chainId && token.equals(WETH9[chainId]) ? 'WETH' : token.symbol}/ETH`}
             </Text>
             <Text
               fontSize={12}

diff --git a/src/components/PositionCard/index.tsx b/src/components/PositionCard/index.tsx
@@ -1,4 +1,5 @@
-import { JSBI, Pair, Percent, TokenAmount } from '@uniswap/sdk'
+import { Percent, TokenAmount } from '@uniswap/sdk-core'
+import { JSBI, Pair } from '@uniswap/v2-sdk'
 import { darken } from 'polished'
 import React, { useState } from 'react'
 import { ChevronDown, ChevronUp } from 'react-feather'

diff --git a/src/components/PositionList/PositionList.stories.tsx b/src/components/PositionList/PositionList.stories.tsx
@@ -1,17 +1,18 @@
 import { Story } from '@storybook/react/types-6-0'
-import { TokenAmount } from '@uniswap/sdk'
 import React from 'react'
 import { basisPointsToPercent } from 'utils'
 import { DAI, WBTC } from '../../constants'
 import Component, { PositionListProps } from './index'
+import { TokenAmount } from '@uniswap/sdk-core'
+import JSBI from 'jsbi'
 
 const FEE_BIPS = {
   FIVE: basisPointsToPercent(5),
   THIRTY: basisPointsToPercent(30),
   ONE_HUNDRED: basisPointsToPercent(100),
 }
-const daiAmount = new TokenAmount(DAI, BigInt(500) * BigInt(10e18))
-const wbtcAmount = new TokenAmount(WBTC, BigInt(1) * BigInt(10e7))
+const daiAmount = new TokenAmount(DAI, JSBI.BigInt(500 * 10 ** 18))
+const wbtcAmount = new TokenAmount(WBTC, JSBI.BigInt(10 ** 7))
 const positions = [
   {
     feesEarned: {

diff --git a/src/components/PositionList/index.tsx b/src/components/PositionList/index.tsx
@@ -1,4 +1,3 @@
-import { Percent, TokenAmount } from '@uniswap/sdk'
 import Badge, { BadgeVariant } from 'components/Badge'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
 import React from 'react'
@@ -215,7 +214,7 @@ export default function PositionList({ loading, positions, showUnwrapped }: Posi
           const symbol1 = tokenAmount1.token.symbol || ''
           const currency0 = showUnwrapped ? tokenAmount0.token : unwrappedToken(tokenAmount0.token)
           const currency1 = showUnwrapped ? tokenAmount1.token : unwrappedToken(tokenAmount1.token)
-          const limitCrossed = tokenAmount0.equalTo(BigInt(0)) || tokenAmount1.equalTo(BigInt(0))
+          const limitCrossed = tokenAmount0.equalTo(0) || tokenAmount1.equalTo(0)
 
           const key = `${feeLevel.toFixed()}-${symbol0}-${tokenAmount0.toFixed(2)}-${symbol1}-${tokenAmount1.toFixed(
             2

diff --git a/src/components/SearchModal/CommonBases.tsx b/src/components/SearchModal/CommonBases.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Text } from 'rebass'
-import { ChainId, Currency, currencyEquals, ETHER, Token } from '@uniswap/sdk'
+import { ChainId, Currency, currencyEquals, ETHER, Token } from '@uniswap/sdk-core'
 import styled from 'styled-components'
 
 import { SUGGESTED_BASES } from '../../constants'

diff --git a/src/components/SearchModal/CurrencyList.tsx b/src/components/SearchModal/CurrencyList.tsx
@@ -1,4 +1,4 @@
-import { Currency, CurrencyAmount, currencyEquals, ETHER, Token } from '@uniswap/sdk'
+import { Currency, CurrencyAmount, currencyEquals, ETHER, Token } from '@uniswap/sdk-core'
 import React, { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'

diff --git a/src/components/SearchModal/CurrencySearch.tsx b/src/components/SearchModal/CurrencySearch.tsx
@@ -1,4 +1,4 @@
-import { Currency, ETHER, Token } from '@uniswap/sdk'
+import { Currency, ETHER, Token } from '@uniswap/sdk-core'
 import React, { KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import ReactGA from 'react-ga'
 import { useTranslation } from 'react-i18next'

diff --git a/src/components/SearchModal/CurrencySearchModal.tsx b/src/components/SearchModal/CurrencySearchModal.tsx
@@ -1,4 +1,4 @@
-import { Currency, Token } from '@uniswap/sdk'
+import { Currency, Token } from '@uniswap/sdk-core'
 import React, { useCallback, useEffect, useState } from 'react'
 import useLast from '../../hooks/useLast'
 import Modal from '../Modal'

diff --git a/src/components/SearchModal/ImportRow.tsx b/src/components/SearchModal/ImportRow.tsx
@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react'
-import { Token } from '@uniswap/sdk'
+import { Token } from '@uniswap/sdk-core'
 import { AutoRow, RowFixed } from 'components/Row'
 import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'

diff --git a/src/components/SearchModal/ImportToken.tsx b/src/components/SearchModal/ImportToken.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Token, Currency } from '@uniswap/sdk'
+import { Token, Currency } from '@uniswap/sdk-core'
 import styled from 'styled-components'
 import { TYPE, CloseIcon } from 'theme'
 import Card from 'components/Card'

diff --git a/src/components/SearchModal/Manage.tsx b/src/components/SearchModal/Manage.tsx
@@ -5,7 +5,7 @@ import { ArrowLeft } from 'react-feather'
 import { Text } from 'rebass'
 import { CloseIcon } from 'theme'
 import styled from 'styled-components'
-import { Token } from '@uniswap/sdk'
+import { Token } from '@uniswap/sdk-core'
 import { ManageLists } from './ManageLists'
 import ManageTokens from './ManageTokens'
 import { TokenList } from '@uniswap/token-lists'

diff --git a/src/components/SearchModal/ManageTokens.tsx b/src/components/SearchModal/ManageTokens.tsx
@@ -6,7 +6,7 @@ import { TYPE, ExternalLinkIcon, TrashIcon, ButtonText, ExternalLink } from 'the
 import { useToken } from 'hooks/Tokens'
 import styled from 'styled-components'
 import { useUserAddedTokens, useRemoveUserAddedToken } from 'state/user/hooks'
-import { Token } from '@uniswap/sdk'
+import { Token } from '@uniswap/sdk-core'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { getEtherscanLink, isAddress } from 'utils'
 import { useActiveWeb3React } from 'hooks'

diff --git a/src/components/SearchModal/filtering.ts b/src/components/SearchModal/filtering.ts
@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import { isAddress } from '../../utils'
-import { Token } from '@uniswap/sdk'
+import { Token } from '@uniswap/sdk-core'
 
 export function filterTokens(tokens: Token[], search: string): Token[] {
   if (search.length === 0) return tokens

diff --git a/src/components/SearchModal/sorting.ts b/src/components/SearchModal/sorting.ts
@@ -1,4 +1,4 @@
-import { Token, TokenAmount } from '@uniswap/sdk'
+import { Token, TokenAmount } from '@uniswap/sdk-core'
 import { useMemo } from 'react'
 import { useAllTokenBalances } from '../../state/wallet/hooks'
 

diff --git a/src/components/TokenWarningModal/index.tsx b/src/components/TokenWarningModal/index.tsx
@@ -1,21 +1,21 @@
-import { Token } from '@uniswap/sdk'
-import React, { useCallback } from 'react'
+import { Token } from '@uniswap/sdk-core'
+import React from 'react'
 import Modal from '../Modal'
 import { ImportToken } from 'components/SearchModal/ImportToken'
 
 export default function TokenWarningModal({
   isOpen,
   tokens,
   onConfirm,
+  onDismiss,
 }: {
   isOpen: boolean
   tokens: Token[]
   onConfirm: () => void
+  onDismiss: () => void
 }) {
-  const handleDismiss = useCallback(() => null, [])
-
   return (
-    <Modal isOpen={isOpen} onDismiss={handleDismiss} maxHeight={90}>
+    <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={100}>
       <ImportToken tokens={tokens} handleCurrencySelect={onConfirm} />
     </Modal>
   )

diff --git a/src/components/TransactionConfirmationModal/index.tsx b/src/components/TransactionConfirmationModal/index.tsx
@@ -1,4 +1,4 @@
-import { ChainId, Currency } from '@uniswap/sdk'
+import { ChainId, Currency } from '@uniswap/sdk-core'
 import React, { useContext } from 'react'
 import styled, { ThemeContext } from 'styled-components'
 import Modal from '../Modal'

diff --git a/src/components/claim/AddressClaimModal.tsx b/src/components/claim/AddressClaimModal.tsx
@@ -17,7 +17,7 @@ import { isAddress } from 'ethers/lib/utils'
 import Confetti from '../Confetti'
 import { CardNoise, CardBGImage, CardBGImageSmaller } from '../earn/styled'
 import { useIsTransactionPending } from '../../state/transactions/hooks'
-import { TokenAmount } from '@uniswap/sdk'
+import { TokenAmount } from '@uniswap/sdk-core'
 import { getEtherscanLink, shortenAddress } from '../../utils'
 
 const ContentWrapper = styled(AutoColumn)`

diff --git a/src/components/claim/ClaimModal.tsx b/src/components/claim/ClaimModal.tsx
@@ -1,4 +1,5 @@
-import { JSBI, TokenAmount } from '@uniswap/sdk'
+import { TokenAmount } from '@uniswap/sdk-core'
+import { JSBI } from '@uniswap/v2-sdk'
 import { isAddress } from 'ethers/lib/utils'
 import React, { useEffect, useState } from 'react'
 import { Text } from 'rebass'

diff --git a/src/components/earn/PoolCard.tsx b/src/components/earn/PoolCard.tsx
@@ -4,7 +4,8 @@ import { RowBetween } from '../Row'
 import styled from 'styled-components'
 import { TYPE, StyledInternalLink } from '../../theme'
 import DoubleCurrencyLogo from '../DoubleLogo'
-import { ETHER, JSBI, TokenAmount } from '@uniswap/sdk'
+import { ETHER, TokenAmount } from '@uniswap/sdk-core'
+import { JSBI } from '@uniswap/v2-sdk'
 import { ButtonPrimary } from '../Button'
 import { StakingInfo } from '../../state/stake/hooks'
 import { useColor } from '../../hooks/useColor'

diff --git a/src/components/earn/StakingModal.tsx b/src/components/earn/StakingModal.tsx
@@ -9,7 +9,8 @@ import { TYPE, CloseIcon } from '../../theme'
 import { ButtonConfirmed, ButtonError } from '../Button'
 import ProgressCircles from '../ProgressSteps'
 import CurrencyInputPanel from '../CurrencyInputPanel'
-import { TokenAmount, Pair } from '@uniswap/sdk'
+import { Pair } from '@uniswap/v2-sdk'
+import { TokenAmount } from '@uniswap/sdk-core'
 import { useActiveWeb3React } from '../../hooks'
 import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import { usePairContract, useStakingContract } from '../../hooks/useContract'

diff --git a/src/components/swap/AdvancedSwapDetails.tsx b/src/components/swap/AdvancedSwapDetails.tsx
@@ -1,4 +1,5 @@
-import { Trade, TradeType } from '@uniswap/sdk'
+import { TradeType } from '@uniswap/sdk-core'
+import { Trade } from '@uniswap/v2-sdk'
 import React, { useContext } from 'react'
 import styled, { ThemeContext } from 'styled-components'
 import { Field } from '../../state/swap/actions'

diff --git a/src/components/swap/ConfirmSwapModal.tsx b/src/components/swap/ConfirmSwapModal.tsx
@@ -1,4 +1,5 @@
-import { currencyEquals, Trade } from '@uniswap/sdk'
+import { currencyEquals } from '@uniswap/sdk-core'
+import { Trade } from '@uniswap/v2-sdk'
 import React, { useCallback, useMemo } from 'react'
 import TransactionConfirmationModal, {
   ConfirmationModalContent,

diff --git a/src/components/swap/FormattedPriceImpact.tsx b/src/components/swap/FormattedPriceImpact.tsx
@@ -1,4 +1,4 @@
-import { Percent } from '@uniswap/sdk'
+import { Percent } from '@uniswap/sdk-core'
 import React from 'react'
 import { ONE_BIPS } from '../../constants'
 import { warningSeverity } from '../../utils/prices'

diff --git a/src/components/swap/SwapModalFooter.tsx b/src/components/swap/SwapModalFooter.tsx
@@ -1,4 +1,5 @@
-import { Trade, TradeType } from '@uniswap/sdk'
+import { Trade } from '@uniswap/v2-sdk'
+import { TradeType } from '@uniswap/sdk-core'
 import React, { useContext, useMemo, useState } from 'react'
 import { Repeat } from 'react-feather'
 import { Text } from 'rebass'

diff --git a/src/components/swap/SwapModalHeader.tsx b/src/components/swap/SwapModalHeader.tsx
@@ -1,4 +1,5 @@
-import { Trade, TradeType } from '@uniswap/sdk'
+import { TradeType } from '@uniswap/sdk-core'
+import { Trade } from '@uniswap/v2-sdk'
 import React, { useContext, useMemo } from 'react'
 import { ArrowDown, AlertTriangle } from 'react-feather'
 import { Text } from 'rebass'

diff --git a/src/components/swap/SwapRoute.tsx b/src/components/swap/SwapRoute.tsx
@@ -1,4 +1,4 @@
-import { Trade } from '@uniswap/sdk'
+import { Trade } from '@uniswap/v2-sdk'
 import React, { Fragment, memo, useContext } from 'react'
 import { ChevronRight } from 'react-feather'
 import { Flex } from 'rebass'

diff --git a/src/components/swap/TradePrice.tsx b/src/components/swap/TradePrice.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Price } from '@uniswap/sdk'
+import { Price } from '@uniswap/sdk-core'
 import { useContext } from 'react'
 import { Repeat } from 'react-feather'
 import { Text } from 'rebass'

diff --git a/src/components/swap/UnsupportedCurrencyFooter.tsx b/src/components/swap/UnsupportedCurrencyFooter.tsx
@@ -9,7 +9,7 @@ import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'
 import { useActiveWeb3React } from 'hooks'
 import { getEtherscanLink } from 'utils'
-import { Currency, Token } from '@uniswap/sdk'
+import { Currency, Token } from '@uniswap/sdk-core'
 import { wrappedCurrency } from 'utils/wrappedCurrency'
 import { useUnsupportedTokens } from '../../hooks/Tokens'
 
@@ -64,7 +64,6 @@ export default function UnsupportedCurrencyFooter({
           <AutoColumn gap="lg">
             <RowBetween>
               <TYPE.mediumHeader>Unsupported Assets</TYPE.mediumHeader>
-
               <CloseIcon onClick={() => setShowDetails(false)} />
             </RowBetween>
             {tokens.map((token) => {

diff --git a/src/components/swap/confirmPriceImpactWithoutFee.ts b/src/components/swap/confirmPriceImpactWithoutFee.ts
@@ -1,4 +1,4 @@
-import { Percent } from '@uniswap/sdk'
+import { Percent } from '@uniswap/sdk-core'
 import { ALLOWED_PRICE_IMPACT_HIGH, PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN } from '../../constants'
 
 /**