Commit 65129604 authored by lynn's avatar lynn Committed by GitHub

chore: upgrade to react 18 (#3992)

* chore: upgrade to react 18

* fix: update tests

* fix: fix lint issues and remove unnecessary react hooks testing library

* fix: add types for stricter typescript checks

* fix: fix additional typescript check issues

* fix: revert to prev commmit

* rebase

* rebase

* fix: fix lint issues and remove unnecessary react hooks testing library

* fix: add types for stricter typescript checks

* fix: fix additional typescript check issues

* rebase

* fix: rebase

* fix

* eslint fix

* fix: package.json changes

* fix: package.json changes

* fix yarn lock

* fix version package.json

* fix: downgrade react-router-dom to original

* fix: undo modification of .github/workflows/release.yaml

* fix: revert cypress testing version update

* rebase

* rebase

* fix: fix lint issues and remove unnecessary react hooks testing library

* fix: add types for stricter typescript checks

* fix: fix additional typescript check issues

* rebase

* chore: upgrade to react 18

* fix: update tests

* fix: fix lint issues and remove unnecessary react hooks testing library

* fix: add types for stricter typescript checks

* fix: fix additional typescript check issues

* fix

* eslint fix

* fix: package.json changes

* fix: package.json changes

* fix yarn lock

* fix version package.json

* fix: downgrade react-router-dom to original

* fix: undo modification of .github/workflows/release.yaml

* fix: revert cypress testing version update

* fix

* fix: error boundary change

* yarn.lock change

* fix: cypress tests finally passing due to zzmp redux multicall fix HOORAY

* undo service worker changes

* build: dedup lockfile

* yarn.lock + lint

* update snapshot tests

* checkpoint

* yarn.lock

* fix: fix type errors during build

* fixes

* fix yarn.lock

* dedup yarn

* fix: import react components explicitly instead of all of react

* dedup

* yarn.lock

* yarn.lock

* dedup

* yarn

* dedup

* dedupe use-sync-external-store

* fix build issues

* dedup use-sync-external-store
Co-authored-by: default avatarZach Pomerantz <zzmp@uniswap.org>
parent 4e0c9b36
...@@ -61,9 +61,8 @@ ...@@ -61,9 +61,8 @@
"@graphql-codegen/typescript-operations": "^1.18.2", "@graphql-codegen/typescript-operations": "^1.18.2",
"@graphql-codegen/typescript-rtk-query": "^1.1.1", "@graphql-codegen/typescript-rtk-query": "^1.1.1",
"@lingui/cli": "^3.9.0", "@lingui/cli": "^3.9.0",
"@testing-library/jest-dom": "^5.14.1", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.0.0", "@testing-library/react": "^13.1",
"@testing-library/react-hooks": "^7.0.2",
"@typechain/ethers-v5": "^7.0.0", "@typechain/ethers-v5": "^7.0.0",
"@types/array.prototype.flat": "^1.2.1", "@types/array.prototype.flat": "^1.2.1",
"@types/array.prototype.flatmap": "^1.2.2", "@types/array.prototype.flatmap": "^1.2.2",
...@@ -76,10 +75,10 @@ ...@@ -76,10 +75,10 @@
"@types/multicodec": "^1.0.0", "@types/multicodec": "^1.0.0",
"@types/node": "^13.13.5", "@types/node": "^13.13.5",
"@types/qs": "^6.9.2", "@types/qs": "^6.9.2",
"@types/react": "^17.0.2", "@types/react": "^18.0.15",
"@types/react-dom": "^17.0.1", "@types/react-dom": "^18.0.6",
"@types/react-redux": "^7.1.16", "@types/react-redux": "^7.1.24",
"@types/react-router-dom": "^5.0.0", "@types/react-router-dom": "^5.3.3",
"@types/react-virtualized-auto-sizer": "^1.0.0", "@types/react-virtualized-auto-sizer": "^1.0.0",
"@types/react-window": "^1.8.2", "@types/react-window": "^1.8.2",
"@types/rebass": "^4.0.7", "@types/rebass": "^4.0.7",
...@@ -110,9 +109,9 @@ ...@@ -110,9 +109,9 @@
"@coinbase/wallet-sdk": "^3.3.0", "@coinbase/wallet-sdk": "^3.3.0",
"@fontsource/ibm-plex-mono": "^4.5.1", "@fontsource/ibm-plex-mono": "^4.5.1",
"@fontsource/inter": "^4.5.1", "@fontsource/inter": "^4.5.1",
"@lingui/core": "^3.9.0", "@lingui/core": "^3.14.0",
"@lingui/macro": "^3.9.0", "@lingui/macro": "^3.14.0",
"@lingui/react": "^3.9.0", "@lingui/react": "^3.14.0",
"@metamask/jazzicon": "^2.0.0", "@metamask/jazzicon": "^2.0.0",
"@popperjs/core": "^2.4.4", "@popperjs/core": "^2.4.4",
"@reach/dialog": "^0.10.3", "@reach/dialog": "^0.10.3",
...@@ -169,15 +168,15 @@ ...@@ -169,15 +168,15 @@
"popper-max-size-modifier": "^0.2.0", "popper-max-size-modifier": "^0.2.0",
"prettier": "^2.2.1", "prettier": "^2.2.1",
"qs": "^6.9.4", "qs": "^6.9.4",
"react": "^17.0.1", "react": "^18.2.0",
"react-confetti": "^6.0.0", "react-confetti": "^6.0.0",
"react-dom": "^17.0.1", "react-dom": "^18.2.0",
"react-feather": "^2.0.8", "react-feather": "^2.0.8",
"react-ga4": "^1.4.1", "react-ga4": "^1.4.1",
"react-is": "^17.0.2", "react-is": "^17.0.2",
"react-markdown": "^4.3.1", "react-markdown": "^4.3.1",
"react-popper": "^2.2.3", "react-popper": "^2.2.3",
"react-redux": "^7.2.2", "react-redux": "^8.0.2",
"react-router-dom": "^5.0.0", "react-router-dom": "^5.0.0",
"react-spring": "^8.0.27", "react-spring": "^8.0.27",
"react-use-gesture": "^6.0.14", "react-use-gesture": "^6.0.14",
......
...@@ -2,10 +2,11 @@ import { Trans } from '@lingui/macro' ...@@ -2,10 +2,11 @@ import { Trans } from '@lingui/macro'
import { useWeb3React } from '@web3-react/core' import { useWeb3React } from '@web3-react/core'
import CopyHelper from 'components/AccountDetails/Copy' import CopyHelper from 'components/AccountDetails/Copy'
import { getConnection, getConnectionName, getIsCoinbaseWallet, getIsMetaMask } from 'connection/utils' import { getConnection, getConnectionName, getIsCoinbaseWallet, getIsMetaMask } from 'connection/utils'
import { useCallback, useContext } from 'react' import { Context, useCallback, useContext } from 'react'
import { ExternalLink as LinkIcon } from 'react-feather' import { ExternalLink as LinkIcon } from 'react-feather'
import { useAppDispatch } from 'state/hooks' import { useAppDispatch } from 'state/hooks'
import { updateSelectedWallet } from 'state/user/reducer' import { updateSelectedWallet } from 'state/user/reducer'
import { DefaultTheme } from 'styled-components/macro'
import styled, { ThemeContext } from 'styled-components/macro' import styled, { ThemeContext } from 'styled-components/macro'
import { isMobile } from 'utils/userAgent' import { isMobile } from 'utils/userAgent'
...@@ -205,7 +206,7 @@ export default function AccountDetails({ ...@@ -205,7 +206,7 @@ export default function AccountDetails({
const { chainId, account, connector } = useWeb3React() const { chainId, account, connector } = useWeb3React()
const connectionType = getConnection(connector).type const connectionType = getConnection(connector).type
const theme = useContext(ThemeContext) const theme = useContext(ThemeContext as Context<DefaultTheme>)
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
const isMetaMask = getIsMetaMask() const isMetaMask = getIsMetaMask()
......
...@@ -2,8 +2,8 @@ import { Trans } from '@lingui/macro' ...@@ -2,8 +2,8 @@ import { Trans } from '@lingui/macro'
// eslint-disable-next-line no-restricted-imports // eslint-disable-next-line no-restricted-imports
import { t } from '@lingui/macro' import { t } from '@lingui/macro'
import { useWeb3React } from '@web3-react/core' import { useWeb3React } from '@web3-react/core'
import { ReactNode, useCallback, useContext } from 'react' import { ChangeEvent, Context, ReactNode, useCallback, useContext } from 'react'
import styled, { ThemeContext } from 'styled-components/macro' import styled, { DefaultTheme, ThemeContext } from 'styled-components/macro'
import useENS from '../../hooks/useENS' import useENS from '../../hooks/useENS'
import { ExternalLink, ThemedText } from '../../theme' import { ExternalLink, ThemedText } from '../../theme'
...@@ -87,12 +87,12 @@ export default function AddressInputPanel({ ...@@ -87,12 +87,12 @@ export default function AddressInputPanel({
onChange: (value: string) => void onChange: (value: string) => void
}) { }) {
const { chainId } = useWeb3React() const { chainId } = useWeb3React()
const theme = useContext(ThemeContext) const theme = useContext(ThemeContext as Context<DefaultTheme>)
const { address, loading, name } = useENS(value) const { address, loading, name } = useENS(value)
const handleInput = useCallback( const handleInput = useCallback(
(event) => { (event: ChangeEvent<HTMLInputElement>) => {
const input = event.target.value const input = event.target.value
const withoutSpaces = input.replace(/\s+/g, '') const withoutSpaces = input.replace(/\s+/g, '')
onChange(withoutSpaces) onChange(withoutSpaces)
......
import { Trans } from '@lingui/macro' import { Trans } from '@lingui/macro'
import { sendEvent } from 'components/analytics' import { sendEvent } from 'components/analytics'
import React, { ErrorInfo } from 'react' import React, { ErrorInfo, PropsWithChildren } from 'react'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
import store, { AppState } from '../../state' import store, { AppState } from '../../state'
...@@ -56,8 +56,8 @@ async function updateServiceWorker(): Promise<ServiceWorkerRegistration> { ...@@ -56,8 +56,8 @@ async function updateServiceWorker(): Promise<ServiceWorkerRegistration> {
return ready.update() as unknown as Promise<ServiceWorkerRegistration> return ready.update() as unknown as Promise<ServiceWorkerRegistration>
} }
export default class ErrorBoundary extends React.Component<unknown, ErrorBoundaryState> { export default class ErrorBoundary extends React.Component<PropsWithChildren<unknown>, ErrorBoundaryState> {
constructor(props: unknown) { constructor(props: PropsWithChildren<unknown>) {
super(props) super(props)
this.state = { error: null } this.state = { error: null }
} }
......
...@@ -103,7 +103,7 @@ export default function LiquidityChartRangeInput({ ...@@ -103,7 +103,7 @@ export default function LiquidityChartRangeInput({
}) })
const onBrushDomainChangeEnded = useCallback( const onBrushDomainChangeEnded = useCallback(
(domain, mode) => { (domain: [number, number], mode: string | undefined) => {
let leftRangeValue = Number(domain[0]) let leftRangeValue = Number(domain[0])
const rightRangeValue = Number(domain[1]) const rightRangeValue = Number(domain[1])
......
...@@ -6,7 +6,7 @@ import { L2_CHAIN_IDS } from 'constants/chains' ...@@ -6,7 +6,7 @@ import { L2_CHAIN_IDS } from 'constants/chains'
import { LOCALE_LABEL, SUPPORTED_LOCALES, SupportedLocale } from 'constants/locales' import { LOCALE_LABEL, SUPPORTED_LOCALES, SupportedLocale } from 'constants/locales'
import { useActiveLocale } from 'hooks/useActiveLocale' import { useActiveLocale } from 'hooks/useActiveLocale'
import { useLocationLinkProps } from 'hooks/useLocationLinkProps' import { useLocationLinkProps } from 'hooks/useLocationLinkProps'
import React, { useEffect, useRef, useState } from 'react' import { FunctionComponent, PropsWithChildren, useEffect, useRef, useState } from 'react'
import { import {
BookOpen, BookOpen,
Check, Check,
...@@ -311,7 +311,7 @@ export default function Menu() { ...@@ -311,7 +311,7 @@ export default function Menu() {
interface NewMenuProps { interface NewMenuProps {
flyoutAlignment?: FlyoutAlignment flyoutAlignment?: FlyoutAlignment
ToggleUI?: React.FunctionComponent ToggleUI?: FunctionComponent<PropsWithChildren<unknown>>
menuItems: { menuItems: {
content: any content: any
link: string link: string
......
import { Protocol } from '@uniswap/router-sdk' import { Protocol } from '@uniswap/router-sdk'
import { Currency, Percent } from '@uniswap/sdk-core' import { Currency, Percent } from '@uniswap/sdk-core'
import { FeeAmount } from '@uniswap/v3-sdk' import { FeeAmount } from '@uniswap/v3-sdk'
import { RoutingDiagramEntry } from 'components/swap/SwapRoute'
import { DAI, USDC_MAINNET, WBTC } from 'constants/tokens' import { DAI, USDC_MAINNET, WBTC } from 'constants/tokens'
import { render } from 'test-utils' import { render } from 'test-utils'
import RoutingDiagram, { RoutingDiagramEntry } from './RoutingDiagram' import RoutingDiagram from './RoutingDiagram'
const percent = (strings: TemplateStringsArray) => new Percent(parseInt(strings[0]), 100) const percent = (strings: TemplateStringsArray) => new Percent(parseInt(strings[0]), 100)
......
...@@ -197,6 +197,12 @@ function BreakLineComponent({ style }: { style: CSSProperties }) { ...@@ -197,6 +197,12 @@ function BreakLineComponent({ style }: { style: CSSProperties }) {
) )
} }
interface TokenRowProps {
data: Array<Currency | BreakLine>
index: number
style: CSSProperties
}
const formatAnalyticsEventProperties = ( const formatAnalyticsEventProperties = (
token: Token, token: Token,
index: number, index: number,
...@@ -253,7 +259,7 @@ export default function CurrencyList({ ...@@ -253,7 +259,7 @@ export default function CurrencyList({
}, [currencies, otherListTokens]) }, [currencies, otherListTokens])
const Row = useCallback( const Row = useCallback(
function TokenRow({ data, index, style }) { function TokenRow({ data, index, style }: TokenRowProps) {
const row: Currency | BreakLine = data[index] const row: Currency | BreakLine = data[index]
if (isBreakLine(row)) { if (isBreakLine(row)) {
......
...@@ -12,7 +12,7 @@ import useToggle from 'hooks/useToggle' ...@@ -12,7 +12,7 @@ import useToggle from 'hooks/useToggle'
import useNativeCurrency from 'lib/hooks/useNativeCurrency' import useNativeCurrency from 'lib/hooks/useNativeCurrency'
import { getTokenFilter } from 'lib/hooks/useTokenList/filtering' import { getTokenFilter } from 'lib/hooks/useTokenList/filtering'
import { tokenComparator, useSortTokensByQuery } from 'lib/hooks/useTokenList/sorting' import { tokenComparator, useSortTokensByQuery } from 'lib/hooks/useTokenList/sorting'
import { KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { ChangeEvent, KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Edit } from 'react-feather' import { Edit } from 'react-feather'
import AutoSizer from 'react-virtualized-auto-sizer' import AutoSizer from 'react-virtualized-auto-sizer'
import { FixedSizeList } from 'react-window' import { FixedSizeList } from 'react-window'
...@@ -146,7 +146,7 @@ export function CurrencySearch({ ...@@ -146,7 +146,7 @@ export function CurrencySearch({
// manage focus on modal show // manage focus on modal show
const inputRef = useRef<HTMLInputElement>() const inputRef = useRef<HTMLInputElement>()
const handleInput = useCallback((event) => { const handleInput = useCallback((event: ChangeEvent<HTMLInputElement>) => {
const input = event.target.value const input = event.target.value
const checksummedInput = isAddress(input) const checksummedInput = isAddress(input)
setSearchQuery(checksummedInput || input) setSearchQuery(checksummedInput || input)
......
...@@ -8,7 +8,7 @@ import { UNSUPPORTED_LIST_URLS } from 'constants/lists' ...@@ -8,7 +8,7 @@ import { UNSUPPORTED_LIST_URLS } from 'constants/lists'
import { useListColor } from 'hooks/useColor' import { useListColor } from 'hooks/useColor'
import parseENSAddress from 'lib/utils/parseENSAddress' import parseENSAddress from 'lib/utils/parseENSAddress'
import uriToHttp from 'lib/utils/uriToHttp' import uriToHttp from 'lib/utils/uriToHttp'
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { ChangeEvent, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { CheckCircle, Settings } from 'react-feather' import { CheckCircle, Settings } from 'react-feather'
import { usePopper } from 'react-popper' import { usePopper } from 'react-popper'
import { useAppDispatch, useAppSelector } from 'state/hooks' import { useAppDispatch, useAppSelector } from 'state/hooks'
...@@ -266,7 +266,7 @@ export function ManageLists({ ...@@ -266,7 +266,7 @@ export function ManageLists({
// sort by active but only if not visible // sort by active but only if not visible
const activeListUrls = useActiveListUrls() const activeListUrls = useActiveListUrls()
const handleInput = useCallback((e) => { const handleInput = useCallback((e: ChangeEvent<HTMLInputElement>) => {
setListUrlInput(e.target.value) setListUrlInput(e.target.value)
}, []) }, [])
......
...@@ -6,7 +6,7 @@ import Column from 'components/Column' ...@@ -6,7 +6,7 @@ import Column from 'components/Column'
import CurrencyLogo from 'components/CurrencyLogo' import CurrencyLogo from 'components/CurrencyLogo'
import Row, { RowBetween, RowFixed } from 'components/Row' import Row, { RowBetween, RowFixed } from 'components/Row'
import { useToken } from 'hooks/Tokens' import { useToken } from 'hooks/Tokens'
import { RefObject, useCallback, useMemo, useRef, useState } from 'react' import { ChangeEvent, RefObject, useCallback, useMemo, useRef, useState } from 'react'
import { useRemoveUserAddedToken, useUserAddedTokens } from 'state/user/hooks' import { useRemoveUserAddedToken, useUserAddedTokens } from 'state/user/hooks'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
import { ButtonText, ExternalLink, ExternalLinkIcon, ThemedText, TrashIcon } from 'theme' import { ButtonText, ExternalLink, ExternalLinkIcon, ThemedText, TrashIcon } from 'theme'
...@@ -51,7 +51,7 @@ export default function ManageTokens({ ...@@ -51,7 +51,7 @@ export default function ManageTokens({
// manage focus on modal show // manage focus on modal show
const inputRef = useRef<HTMLInputElement>() const inputRef = useRef<HTMLInputElement>()
const handleInput = useCallback((event) => { const handleInput = useCallback((event: ChangeEvent<HTMLInputElement>) => {
const input = event.target.value const input = event.target.value
const checksummedInput = isAddress(input) const checksummedInput = isAddress(input)
setSearchQuery(checksummedInput || input) setSearchQuery(checksummedInput || input)
......
import { useCallback } from 'react' import { ChangeEvent, useCallback } from 'react'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
const StyledRangeInput = styled.input<{ size: number }>` const StyledRangeInput = styled.input<{ size: number }>`
...@@ -106,7 +106,7 @@ export default function Slider({ ...@@ -106,7 +106,7 @@ export default function Slider({
...rest ...rest
}: InputSliderProps) { }: InputSliderProps) {
const changeCallback = useCallback( const changeCallback = useCallback(
(e) => { (e: ChangeEvent<HTMLInputElement>) => {
onChange(parseInt(e.target.value)) onChange(parseInt(e.target.value))
}, },
[onChange] [onChange]
......
import React, { memo, useCallback, useRef } from 'react' import React, { ChangeEvent, memo, useCallback, useRef } from 'react'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
const Input = styled.input<{ error?: boolean; fontSize?: string }>` const Input = styled.input<{ error?: boolean; fontSize?: string }>`
...@@ -77,7 +77,7 @@ export const TextInput = ({ ...@@ -77,7 +77,7 @@ export const TextInput = ({
fontSize: string fontSize: string
}) => { }) => {
const handleInput = useCallback( const handleInput = useCallback(
(event) => { (event: ChangeEvent<HTMLInputElement>) => {
onUserInput(event.target.value) onUserInput(event.target.value)
}, },
[onUserInput] [onUserInput]
...@@ -117,7 +117,7 @@ export const ResizingTextArea = memo( ...@@ -117,7 +117,7 @@ export const ResizingTextArea = memo(
const inputRef = useRef<HTMLTextAreaElement>(document.createElement('textarea')) const inputRef = useRef<HTMLTextAreaElement>(document.createElement('textarea'))
const handleInput = useCallback( const handleInput = useCallback(
(event) => { (event: ChangeEvent<HTMLTextAreaElement>) => {
inputRef.current.style.height = 'auto' inputRef.current.style.height = 'auto'
inputRef.current.style.height = inputRef.current.scrollHeight + 'px' inputRef.current.style.height = inputRef.current.scrollHeight + 'px'
onUserInput(event.target.value) onUserInput(event.target.value)
......
import { renderHook } from '@testing-library/react-hooks' import { renderHook } from '@testing-library/react'
import { CurrencyAmount, TradeType } from '@uniswap/sdk-core' import { CurrencyAmount, TradeType } from '@uniswap/sdk-core'
import { DAI, USDC_MAINNET } from 'constants/tokens' import { DAI, USDC_MAINNET } from 'constants/tokens'
import { TradeState } from 'state/routing/types' import { TradeState } from 'state/routing/types'
...@@ -45,7 +45,7 @@ beforeEach(() => { ...@@ -45,7 +45,7 @@ beforeEach(() => {
}) })
describe('#useBestV3Trade ExactIn', () => { describe('#useBestV3Trade ExactIn', () => {
it('does not compute routing api trade when routing API is not supported', () => { it('does not compute routing api trade when routing API is not supported', async () => {
mockUseAutoRouterSupported.mockReturnValue(false) mockUseAutoRouterSupported.mockReturnValue(false)
expectRouterMock(TradeState.INVALID) expectRouterMock(TradeState.INVALID)
expectClientSideMock(TradeState.VALID) expectClientSideMock(TradeState.VALID)
...@@ -57,7 +57,7 @@ describe('#useBestV3Trade ExactIn', () => { ...@@ -57,7 +57,7 @@ describe('#useBestV3Trade ExactIn', () => {
expect(result.current).toEqual({ state: TradeState.VALID, trade: undefined }) expect(result.current).toEqual({ state: TradeState.VALID, trade: undefined })
}) })
it('does not compute routing api trade when window is not focused', () => { it('does not compute routing api trade when window is not focused', async () => {
mockUseIsWindowVisible.mockReturnValue(false) mockUseIsWindowVisible.mockReturnValue(false)
expectRouterMock(TradeState.NO_ROUTE_FOUND) expectRouterMock(TradeState.NO_ROUTE_FOUND)
expectClientSideMock(TradeState.VALID) expectClientSideMock(TradeState.VALID)
......
...@@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from 'react' ...@@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from 'react'
export default function useCopyClipboard(timeout = 500): [boolean, (toCopy: string) => void] { export default function useCopyClipboard(timeout = 500): [boolean, (toCopy: string) => void] {
const [isCopied, setIsCopied] = useState(false) const [isCopied, setIsCopied] = useState(false)
const staticCopy = useCallback((text) => { const staticCopy = useCallback((text: string) => {
const didCopy = copy(text) const didCopy = copy(text)
setIsCopied(didCopy) setIsCopied(didCopy)
}, []) }, [])
......
...@@ -6,7 +6,7 @@ import 'components/analytics' ...@@ -6,7 +6,7 @@ import 'components/analytics'
import { BlockNumberProvider } from 'lib/hooks/useBlockNumber' import { BlockNumberProvider } from 'lib/hooks/useBlockNumber'
import { MulticallUpdater } from 'lib/state/multicall' import { MulticallUpdater } from 'lib/state/multicall'
import { StrictMode } from 'react' import { StrictMode } from 'react'
import ReactDOM from 'react-dom' import { createRoot } from 'react-dom/client'
import { Provider } from 'react-redux' import { Provider } from 'react-redux'
import { HashRouter } from 'react-router-dom' import { HashRouter } from 'react-router-dom'
...@@ -42,7 +42,9 @@ function Updaters() { ...@@ -42,7 +42,9 @@ function Updaters() {
) )
} }
ReactDOM.render( const container = document.getElementById('root') as HTMLElement
createRoot(container).render(
<StrictMode> <StrictMode>
<Provider store={store}> <Provider store={store}>
<HashRouter> <HashRouter>
...@@ -61,8 +63,7 @@ ReactDOM.render( ...@@ -61,8 +63,7 @@ ReactDOM.render(
</LanguageProvider> </LanguageProvider>
</HashRouter> </HashRouter>
</Provider> </Provider>
</StrictMode>, </StrictMode>
document.getElementById('root')
) )
if (process.env.REACT_APP_SERVICE_WORKER !== 'false') { if (process.env.REACT_APP_SERVICE_WORKER !== 'false') {
......
...@@ -14,12 +14,12 @@ import { MouseoverTooltip } from 'components/Tooltip' ...@@ -14,12 +14,12 @@ import { MouseoverTooltip } from 'components/Tooltip'
import { useSwapCallback } from 'hooks/useSwapCallback' import { useSwapCallback } from 'hooks/useSwapCallback'
import useTransactionDeadline from 'hooks/useTransactionDeadline' import useTransactionDeadline from 'hooks/useTransactionDeadline'
import JSBI from 'jsbi' import JSBI from 'jsbi'
import { useCallback, useContext, useEffect, useMemo, useState } from 'react' import { Context, useCallback, useContext, useEffect, useMemo, useState } from 'react'
import { ArrowDown, CheckCircle, HelpCircle } from 'react-feather' import { ArrowDown, CheckCircle, HelpCircle } from 'react-feather'
import { RouteComponentProps } from 'react-router-dom' import { RouteComponentProps } from 'react-router-dom'
import { Text } from 'rebass' import { Text } from 'rebass'
import { TradeState } from 'state/routing/types' import { TradeState } from 'state/routing/types'
import styled, { ThemeContext } from 'styled-components/macro' import styled, { DefaultTheme, ThemeContext } from 'styled-components/macro'
import AddressInputPanel from '../../components/AddressInputPanel' import AddressInputPanel from '../../components/AddressInputPanel'
import { ButtonConfirmed, ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button' import { ButtonConfirmed, ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button'
...@@ -104,7 +104,7 @@ export default function Swap({ history }: RouteComponentProps) { ...@@ -104,7 +104,7 @@ export default function Swap({ history }: RouteComponentProps) {
[chainId, defaultTokens, urlLoadedTokens] [chainId, defaultTokens, urlLoadedTokens]
) )
const theme = useContext(ThemeContext) const theme = useContext(ThemeContext as Context<DefaultTheme>)
// toggle wallet when disconnected // toggle wallet when disconnected
const toggleWalletModal = useToggleWalletModal() const toggleWalletModal = useToggleWalletModal()
...@@ -149,6 +149,7 @@ export default function Swap({ history }: RouteComponentProps) { ...@@ -149,6 +149,7 @@ export default function Swap({ history }: RouteComponentProps) {
() => [!trade?.swaps, TradeState.LOADING === tradeState, TradeState.SYNCING === tradeState], () => [!trade?.swaps, TradeState.LOADING === tradeState, TradeState.SYNCING === tradeState],
[trade, tradeState] [trade, tradeState]
) )
// show price estimates based on wrap trade // show price estimates based on wrap trade
const inputValue = showWrap ? parsedAmount : trade?.inputAmount const inputValue = showWrap ? parsedAmount : trade?.inputAmount
const outputValue = showWrap ? parsedAmount : trade?.outputAmount const outputValue = showWrap ? parsedAmount : trade?.outputAmount
...@@ -373,7 +374,7 @@ export default function Swap({ history }: RouteComponentProps) { ...@@ -373,7 +374,7 @@ export default function Swap({ history }: RouteComponentProps) {
}, [attemptingTxn, showConfirm, swapErrorMessage, trade, txHash]) }, [attemptingTxn, showConfirm, swapErrorMessage, trade, txHash])
const handleInputSelect = useCallback( const handleInputSelect = useCallback(
(inputCurrency) => { (inputCurrency: Currency) => {
setApprovalSubmitted(false) // reset 2 step UI for approvals setApprovalSubmitted(false) // reset 2 step UI for approvals
onCurrencySelection(Field.INPUT, inputCurrency) onCurrencySelection(Field.INPUT, inputCurrency)
}, },
...@@ -389,7 +390,7 @@ export default function Swap({ history }: RouteComponentProps) { ...@@ -389,7 +390,7 @@ export default function Swap({ history }: RouteComponentProps) {
}, [maxInputAmount, onUserInput]) }, [maxInputAmount, onUserInput])
const handleOutputSelect = useCallback( const handleOutputSelect = useCallback(
(outputCurrency) => onCurrencySelection(Field.OUTPUT, outputCurrency), (outputCurrency: Currency) => onCurrencySelection(Field.OUTPUT, outputCurrency),
[onCurrencySelection] [onCurrencySelection]
) )
......
...@@ -2,7 +2,7 @@ import { TradeType } from '@uniswap/sdk-core' ...@@ -2,7 +2,7 @@ import { TradeType } from '@uniswap/sdk-core'
import { VoteOption } from '../governance/types' import { VoteOption } from '../governance/types'
interface SerializableTransactionReceipt { export interface SerializableTransactionReceipt {
to: string to: string
from: string from: string
contractAddress: string contractAddress: string
......
...@@ -7,6 +7,7 @@ import { useAppDispatch, useAppSelector } from 'state/hooks' ...@@ -7,6 +7,7 @@ import { useAppDispatch, useAppSelector } from 'state/hooks'
import { L2_CHAIN_IDS } from '../../constants/chains' import { L2_CHAIN_IDS } from '../../constants/chains'
import { useAddPopup } from '../application/hooks' import { useAddPopup } from '../application/hooks'
import { checkedTransaction, finalizeTransaction } from './reducer' import { checkedTransaction, finalizeTransaction } from './reducer'
import { SerializableTransactionReceipt } from './types'
export default function Updater() { export default function Updater() {
const { chainId } = useWeb3React() const { chainId } = useWeb3React()
...@@ -16,11 +17,12 @@ export default function Updater() { ...@@ -16,11 +17,12 @@ export default function Updater() {
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
const onCheck = useCallback( const onCheck = useCallback(
({ chainId, hash, blockNumber }) => dispatch(checkedTransaction({ chainId, hash, blockNumber })), ({ chainId, hash, blockNumber }: { chainId: number; hash: string; blockNumber: number }) =>
dispatch(checkedTransaction({ chainId, hash, blockNumber })),
[dispatch] [dispatch]
) )
const onReceipt = useCallback( const onReceipt = useCallback(
({ chainId, hash, receipt }) => { ({ chainId, hash, receipt }: { chainId: number; hash: string; receipt: SerializableTransactionReceipt }) => {
dispatch( dispatch(
finalizeTransaction({ finalizeTransaction({
chainId, chainId,
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment