ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build: replace babel with swc (#7056)

Browse Source 
* chore: refactor ms.macro to ms

* build: upgrade lingui@4

* chore: avoid styled-components/macro

* build: replace babel loader with swc

* build: upgrade vanilla-extract

* build: simplify e2e config

* build: migrate jest to swc

* build: dedup

* whoops

* fix: initial translations

* build: coverage

* build: ignore static extract warning

* build: rm old babel pkg

* test: rm e2e codecov

* build: fix swc cache

* cleanup

* fix visible t9ns

* cleanup

* cleanup setup

* crank it

* actual merge conflict resolution

* fix: restore locale initialization
This commit is contained in:
Zach Pomerantz 2023-08-08 10:38:37 -07:00 committed by GitHub
parent 3afe7fe9f2
commit 08501234a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
323 changed files with 1065 additions and 1232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@ -1,5 +1,6 @@
/* eslint-env node */
const { node: restrictedImports } = require('@uniswap/eslint-config/restrictedImports')
require('@uniswap/eslint-config/load')
const rulesDirPlugin = require('eslint-plugin-rulesdir')
@ -27,6 +28,7 @@ module.exports = {
{
files: ['**/*.ts', '**/*.tsx'],
rules: {
'@typescript-eslint/no-restricted-imports': ['error', restrictedImports],
'import/no-restricted-paths': [
'error',
{

36
.github/actions/setup/action.yml vendored
View File

@ -24,10 +24,6 @@ runs:
run: yarn install --frozen-lockfile --ignore-scripts
shell: bash
# Validators compile quickly, so caching can be omitted.
- run: yarn ajv
shell: bash
# Contracts are compiled from source. If source hasn't changed, the contracts do not need to be re-compiled.
- uses: actions/cache@v3
id: contracts-cache
@ -40,30 +36,10 @@ runs:
run: yarn contracts
shell: bash
# GraphQL is generated from schema and client-side graphql queries. The schema is always fetched and changes to
# client-side queries are hard to detect, so it is always re-generated.
# TODO(WEB-2498): Cache based on both fetched schema and client-side graphql queries.
# This will require some processing: cp all literal graphql tags into a separate file and hash it?
- run: yarn graphql
shell: bash
# Messages are extracted from source.
# A record of source file content hashes and catalogs is maintained in node_modules/.cache/lingui.
# Messages are always extracted, but extraction may short-circuit from the custom extractor's cache.
- uses: ./.github/actions/cache-on-main
with:
path: node_modules/.cache
key: ${{ runner.os }}-i18n-extract-${{ github.run_id }}
restore-keys: ${{ runner.os }}-i18n-extract-
- run: yarn i18n:extract
shell: bash
# Translations are compiled from messages. If messages haven't changed, the translations do not need to be re-compiled.
- uses: actions/cache@v3
id: i18n-compile-cache
with:
path: src/locales/*.js
key: ${{ runner.os }}-i18n-compile-${{ hashFiles('src/locales/*.po') }}
- if: steps.i18n-compile-cache.outputs.cache-hit !='true'
run: yarn i18n:compile
# These operations cannot be cached, so they are run concurrently
# - ajv: Validators compile quickly, so caching can be omitted.
# - graphql: GraphQL is generated from schema and client-side graphql queries. The schema is always fetched and
# changes to client-side queries are hard to detect, so it is always re-generated.
# - i18n: Messages are extracted from source and compiled. No caching extractor is available (out-of-the-box).
- run: yarn concurrently --max-processes=100% npm:ajv npm:graphql npm:i18n
shell: bash

23
.github/workflows/test.yml vendored
View File

@ -81,22 +81,20 @@ jobs:
name: Unit tests
SLACK_WEBHOOK_URL: ${{ secrets.SLACK_TEST_REPORTER_WEBHOOK }}
build-e2e:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: ./.github/actions/setup
- uses: ./.github/actions/cache-on-main
with:
path: node_modules/.cache
key: ${{ runner.os }}-build-e2e-${{ github.run_id }}
restore-keys: ${{ runner.os }}-build-e2e-
- run: yarn build:e2e
env:
NODE_OPTIONS: "--max_old_space_size=4096"
path: node_modules/.swc
key: ${{ runner.os }}-swc-${{ github.run_id }}
restore-keys: ${{ runner.os }}-swc-
- run: yarn build
- uses: actions/upload-artifact@v3
with:
name: build-e2e
name: build
path: build
if-no-files-found: error
@ -124,7 +122,7 @@ jobs:
- run: exit 0
cypress-test-matrix:
needs: [build-e2e, cypress-rerun]
needs: [build, cypress-rerun]
runs-on: ubuntu-latest
strategy:
fail-fast: false
@ -143,7 +141,7 @@ jobs:
- uses: actions/download-artifact@v3
with:
name: build-e2e
name: build
path: build
- uses: ./.github/actions/cache-on-main
@ -175,11 +173,6 @@ jobs:
COMMIT_INFO_TIMESTAMP: ${{ github.event.pull_request.updated_at || github.event.head_commit.timestamp }}
CYPRESS_PULL_REQUEST_ID: ${{ github.event.pull_request.number }}
CYPRESS_PULL_REQUEST_URL: ${{ github.event.pull_request.html_url }}
- uses: codecov/codecov-action@v3
with:
token: ${{ secrets.CODECOV_TOKEN }}
fail_ci_if_error: false
flags: e2e-tests
- if: failure() && github.ref_name == 'main'
uses: ./.github/actions/report
with:

1
.gitignore vendored
View File

@ -20,6 +20,7 @@ schema.graphql
/coverage
/cache
/functions/coverage
/.swc
# builds
/build

29
.swcrc Normal file
View File

@ -0,0 +1,29 @@
{
"$schema": "https://json.schemastore.org/swcrc",
"jsc": {
"keepClassNames": true,
"experimental": {
"plugins": [
[
"@lingui/swc-plugin",
{}
],
[
"@swc/plugin-styled-components",
{
"displayName": true
}
]
]
},
"parser": {
"syntax": "typescript",
"tsx": true
},
"transform": {
"react": {
"runtime": "automatic"
}
}
}
}

10
babel-plugin-macros.config.js
View File

@ -1,10 +0,0 @@
/* eslint-env node */
const isDev = process.env.NODE_ENV === 'development'
module.exports = {
styledComponents: {
fileName: isDev,
displayName: isDev,
},
}

9
codecov.yml
View File

@ -11,7 +11,6 @@ ignore:
coverage:
status:
# Omit merging unit/e2e reports into the defaults, as it is nonsensical.
project: off
patch: off
@ -28,17 +27,9 @@ flag_management:
target: 80%
individual_flags:
- name: unit-tests
- name: e2e-tests
# Wait until all machines have reported coverage - e2e tests run across 4 machines.
after_n_builds: 4
statuses:
- type: patch
target: 0%
comment:
layout: flags
# Wait until all machines have reported coverage - e2e tests run across 4 machines + unit tests across 1.
after_n_builds: 5
hide_comment_details: false
github_checks:

85
craco.config.cjs
View File

@ -5,12 +5,15 @@ const { execSync } = require('child_process')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
const { DefinePlugin, IgnorePlugin, ProvidePlugin } = require('webpack')
const TerserPlugin = require('terser-webpack-plugin')
const { IgnorePlugin, ProvidePlugin } = require('webpack')
const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin')
const commitHash = execSync('git rev-parse HEAD').toString().trim()
const isProduction = process.env.NODE_ENV === 'production'
process.env.REACT_APP_GIT_COMMIT_HASH = commitHash
// Linting and type checking are only necessary as part of development and testing.
// Omit them from production builds, as they slow down the feedback loop.
const shouldLintOrTypeCheck = !isProduction
@ -21,32 +24,6 @@ function getCacheDirectory(cacheName) {
}
module.exports = {
babel: {
plugins: [
'@vanilla-extract/babel-plugin',
...(process.env.REACT_APP_ADD_COVERAGE_INSTRUMENTATION
? [
[
'istanbul',
{
all: true,
include: ['src/**/*.tsx', 'src/**/*.ts'],
exclude: [
'src/**/*.css',
'src/**/*.css.ts',
'src/**/*.test.ts',
'src/**/*.test.tsx',
'src/**/*.spec.ts',
'src/**/*.spec.tsx',
'src/**/graphql/**/*',
'src/**/*.d.ts',
],
},
],
]
: []),
],
},
eslint: {
enable: shouldLintOrTypeCheck,
pluginOptions(eslintConfig) {
@ -69,11 +46,16 @@ module.exports = {
configure(jestConfig) {
return Object.assign(jestConfig, {
cacheDirectory: getCacheDirectory('jest'),
transform: Object.assign(jestConfig.transform, {
transform: {
...Object.entries(jestConfig.transform).reduce((transform, [key, value]) => {
if (value.match(/babel/)) return transform
return { ...transform, [key]: value }
}, {}),
// Transform vanilla-extract using its own transformer.
// See https://sandroroth.com/blog/vanilla-extract-cra#jest-transform.
'\\.css\\.ts$': '@vanilla-extract/jest-transform',
}),
'\\.(t|j)sx?$': '@swc/jest',
},
// Use @uniswap/conedison's build directly, as jest does not support its exports.
transformIgnorePatterns: ['@uniswap/conedison/format', '@uniswap/conedison/provider'],
moduleNameMapper: {
@ -88,12 +70,9 @@ module.exports = {
// Webpack 5 does not polyfill node globals, so we do so for those necessary:
new ProvidePlugin({
// - react-markdown requires process.cwd
process: 'process/browser',
process: 'process/browser.js',
}),
// vanilla-extract has poor performance on M1 machines with 'debug' identifiers, so we use 'short' instead.
// See https://vanilla-extract.style/documentation/integrations/webpack/#identifiers for docs.
// See https://github.com/vanilla-extract-css/vanilla-extract/issues/771#issuecomment-1249524366.
new VanillaExtractPlugin({ identifiers: 'short' }),
new VanillaExtractPlugin(),
new RetryChunkLoadPlugin({
cacheBust: `function() {
return 'cache-bust=' + Date.now();
@ -109,14 +88,6 @@ module.exports = {
// Configure webpack plugins:
webpackConfig.plugins = webpackConfig.plugins
.map((plugin) => {
// Extend process.env with dynamic values (eg commit hash).
// This will make dynamic values available to JavaScript only, not to interpolated HTML (ie index.html).
if (plugin instanceof DefinePlugin) {
Object.assign(plugin.definitions['process.env'], {
REACT_APP_GIT_COMMIT_HASH: JSON.stringify(commitHash),
})
}
// CSS ordering is mitigated through scoping / naming conventions, so we can ignore order warnings.
// See https://webpack.js.org/plugins/mini-css-extract-plugin/#remove-order-warnings.
if (plugin instanceof MiniCssExtractPlugin) {
@ -163,13 +134,9 @@ module.exports = {
// Configure webpack transpilation (create-react-app specifies transpilation rules in a oneOf):
webpackConfig.module.rules[1].oneOf = webpackConfig.module.rules[1].oneOf.map((rule) => {
// The fallback rule (eg for dependencies).
if (rule.loader && rule.loader.match(/babel-loader/) && !rule.include) {
// Allow not-fully-specified modules so that legacy packages are still able to build.
rule.resolve = { fullySpecified: false }
// The class properties transform is required for @uniswap/analytics to build.
rule.options.plugins.push('@babel/plugin-proposal-class-properties')
if (rule.loader && rule.loader.match(/babel-loader/)) {
rule.loader = 'swc-loader'
delete rule.options
}
return rule
})
@ -177,6 +144,15 @@ module.exports = {
// Configure webpack optimization:
webpackConfig.optimization = Object.assign(
webpackConfig.optimization,
{
minimize: isProduction,
minimizer: [
new TerserPlugin({
minify: TerserPlugin.swcMinify,
parallel: require('os').cpus().length,
}),
],
},
isProduction
? {
splitChunks: {
@ -192,16 +168,15 @@ module.exports = {
: {}
)
// Configure webpack caching:
webpackConfig.cache = Object.assign(webpackConfig.cache, {
cacheDirectory: getCacheDirectory('webpack'),
})
// Configure webpack resolution. webpackConfig.cache is unused with swc-loader, but the resolver can still cache:
webpackConfig.resolve = Object.assign(webpackConfig.resolve, { unsafeCache: true })
// Ignore failed source mappings to avoid spamming the console.
webpackConfig.ignoreWarnings = [
// Source mappings for a package will fail if the package does not provide them, but the build will still succeed,
// so it is unnecessary (and bothersome) to log it. This should be turned off when debugging missing sourcemaps.
// See https://webpack.js.org/loaders/source-map-loader#ignoring-warnings.
webpackConfig.ignoreWarnings = [/Failed to parse source map/]
/Failed to parse source map/,
]
return webpackConfig
},

61
lingui.config.ts
View File

@ -1,64 +1,4 @@
/* eslint-env node */
import { default as babelExtractor } from '@lingui/cli/api/extractors/babel'
import { createHash } from 'crypto'
import { mkdirSync, readFileSync, writeFileSync } from 'fs'
import { existsSync } from 'fs'
import * as path from 'path'
/** A custom caching extractor built on top of babelExtractor. */
const cachingExtractor: typeof babelExtractor = {
/** Delegates to babelExtractor.match. */
match(filename: string) {
return babelExtractor.match(filename)
},
/**
* Checks a cache before extraction, only delegating to babelExtractor.extract if the file has changed.
*
* The lingui extractor works by extracting JSON (the catalog) from `filename` to `buildDir/filename.json`.
* Caching works by man-in-the-middling this:
* - File freshness is computed as a hash of `filename` contents.
* - Before extracting, we check the cache to see if we already have a fresh catalog for the file.
* If we do, we copy it to `localeDir/filename.json`. Copying is significantly faster than extracting.
* - After extracting, we copy the catalog to the cache.
*/
extract(filename: string, localeDir: string, ...options: unknown[]) {
// This runs from node_modules/@lingui/conf, so we need to back out to the root.
const root = __dirname.split('/node_modules')[0]
// This logic mimics catalogFilename in @lingui/babel-plugin-extract-messages.
const buildDir = path.join(localeDir, '_build')
const localePath = path.join(buildDir, filename + '.json')
const filePath = path.join(root, filename)
const fileHash = createHash('sha256').update(readFileSync(filePath)).digest('hex')
const cacheRoot = path.join(root, 'node_modules/.cache/lingui')
const cachePath = path.join(cacheRoot, filename + '.json')
// If we have a matching cached copy of the catalog, we can copy it to localePath and return early.
if (existsSync(cachePath)) {
const { hash, catalog } = JSON.parse(readFileSync(cachePath, 'utf8'))
if (hash === fileHash) {
if (catalog) {
mkdirSync(path.dirname(localePath), { recursive: true })
writeFileSync(localePath, JSON.stringify(catalog, null, 2))
}
return
}
}
babelExtractor.extract(filename, localeDir, ...options)
// Cache the extracted catalog.
mkdirSync(path.dirname(cachePath), { recursive: true })
if (existsSync(localePath)) {
const catalog = JSON.parse(readFileSync(localePath, 'utf8'))
writeFileSync(cachePath, JSON.stringify({ hash: fileHash, catalog }))
} else {
writeFileSync(cachePath, JSON.stringify({ hash: fileHash }))
}
},
}
const linguiConfig = {
catalogs: [
@ -120,7 +60,6 @@ const linguiConfig = {
rootDir: '.',
runtimeConfigModule: ['@lingui/core', 'i18n'],
sourceLocale: 'en-US',
extractors: [cachingExtractor],
}
export default linguiConfig

34
package.json
View File

@ -20,7 +20,6 @@
"start": "craco start",
"start:cloud": "NODE_OPTIONS=--dns-result-order=ipv4first PORT=3001 npx wrangler pages dev --node-compat --proxy=3001 --port=3000 -- yarn start",
"build": "craco build",
"build:e2e": "REACT_APP_CSP_ALLOW_UNSAFE_EVAL=true REACT_APP_ADD_COVERAGE_INSTRUMENTATION=true craco build",
"analyze": "source-map-explorer 'build/static/js/*.js' --only-mapped",
"serve": "serve build -l 3000",
"lint": "yarn eslint --ignore-path .gitignore --cache --cache-location node_modules/.cache/eslint/ .",
@ -69,12 +68,15 @@
]
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@babel/preset-env": "^7.22.7",
"@cloudflare/workers-types": "^4.20230710.1",
"@craco/craco": "^7.1.0",
"@ethersproject/experimental": "^5.4.0",
"@lingui/cli": "^3.9.0",
"@lingui/cli": "^4.3.0",
"@lingui/swc-plugin": "^4.0.4",
"@swc/core": "^1.3.72",
"@swc/jest": "^0.2.27",
"@swc/plugin-styled-components": "^1.5.70",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1",
"@testing-library/user-event": "^14.4.3",
@ -86,7 +88,7 @@
"@types/lingui__core": "^2.7.1",
"@types/lingui__macro": "^2.7.4",
"@types/lingui__react": "^2.8.3",
"@types/ms.macro": "^2.0.0",
"@types/ms": "^0.7.31",
"@types/multicodec": "^1.0.0",
"@types/node": "^13.13.5",
"@types/qs": "^6.9.2",
@ -104,12 +106,10 @@
"@types/wcag-contrast": "^3.0.0",
"@uniswap/default-token-list": "^11.2.0",
"@uniswap/eslint-config": "^1.2.0",
"@vanilla-extract/babel-plugin": "^1.1.7",
"@vanilla-extract/jest-transform": "^1.1.1",
"@vanilla-extract/webpack-plugin": "^2.1.11",
"@vanilla-extract/webpack-plugin": "^2.2.0",
"@walletconnect/types": "^2.8.6",
"babel-jest": "^29.6.1",
"babel-plugin-istanbul": "^6.1.1",
"browser-cache-mock": "^0.1.7",
"buffer": "^6.0.3",
"concurrently": "^8.0.1",
@ -126,7 +126,7 @@
"jest-fail-on-console": "^3.1.1",
"jest-fetch-mock": "^3.0.3",
"jest-styled-components": "^7.0.8",
"ms.macro": "^2.0.0",
"mini-css-extract-plugin": "^2.7.6",
"path-browserify": "^1.0.1",
"prettier": "^2.8.8",
"process": "^0.11.10",
@ -134,10 +134,13 @@
"resize-observer-polyfill": "^1.5.1",
"serve": "^11.3.2",
"source-map-explorer": "^2.5.3",
"swc-loader": "^0.2.3",
"terser-webpack-plugin": "^5.3.9",
"ts-jest": "^29.1.1",
"ts-transform-graphql-tag": "^0.2.1",
"typechain": "^5.0.0",
"typescript": "^4.9.4",
"webpack": "^5.88.2",
"webpack-retry-chunk-load-plugin": "^3.1.1",
"wrangler": "^3.4.0",
"yarn-deduplicate": "^6.0.0"
@ -155,9 +158,9 @@
"@graphql-codegen/typescript-react-apollo": "^3.3.7",
"@graphql-codegen/typescript-resolvers": "^3.2.1",
"@juggle/resize-observer": "^3.4.0",
"@lingui/core": "^3.14.0",
"@lingui/macro": "^3.14.0",
"@lingui/react": "^3.14.0",
"@lingui/core": "^4.3.0",
"@lingui/macro": "^4.3.0",
"@lingui/react": "^4.3.0",
"@looksrare/sdk": "^0.10.2",
"@metamask/jazzicon": "^2.0.0",
"@opensea/seaport-js": "^1.2.0",
@ -189,10 +192,10 @@
"@uniswap/v3-core": "^1.0.1",
"@uniswap/v3-periphery": "^1.1.1",
"@uniswap/v3-sdk": "^3.10.0",
"@vanilla-extract/css": "^1.7.2",
"@vanilla-extract/css-utils": "^0.1.2",
"@vanilla-extract/dynamic": "^2.0.2",
"@vanilla-extract/sprinkles": "^1.4.1",
"@vanilla-extract/css": "^1.12.0",
"@vanilla-extract/css-utils": "^0.1.3",
"@vanilla-extract/dynamic": "^2.0.3",
"@vanilla-extract/sprinkles": "^1.6.1",
"@visx/axis": "^2.12.2",
"@visx/event": "^2.6.0",
"@visx/glyph": "^2.10.0",
@ -228,6 +231,7 @@
"jotai": "^1.3.7",
"jsbi": "^3.1.4",
"make-plural": "^7.0.0",
"ms": "^2.1.3",
"multicodec": "^3.0.1",
"multihashes": "^4.0.2",
"node-vibrant": "^3.2.1-alpha.1",

2
src/components/About/AboutFooter.tsx
View File

@ -1,7 +1,7 @@
import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
import { TraceEvent } from 'analytics'
import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { BREAKPOINTS, ExternalLink, StyledRouterLink } from 'theme'
import { useIsDarkMode } from 'theme/components/ThemeToggle'

2
src/components/About/Card.tsx
View File

@ -1,7 +1,7 @@
import { BrowserEvent, SharedEventName } from '@uniswap/analytics-events'
import { TraceEvent } from 'analytics'
import { Link } from 'react-router-dom'
import styled, { DefaultTheme } from 'styled-components/macro'
import styled, { DefaultTheme } from 'styled-components'
import { BREAKPOINTS } from 'theme'
import { useIsDarkMode } from 'theme/components/ThemeToggle'

2
src/components/About/Icons.tsx
View File

@ -1,4 +1,4 @@
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ReactComponent as DiscordI } from './images/discord.svg'
import { ReactComponent as GithubI } from './images/github.svg'

2
src/components/About/ProtocolBanner.tsx
View File

@ -1,5 +1,5 @@
import { ButtonEmpty } from 'components/Button'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { BREAKPOINTS } from 'theme'
import { useIsDarkMode } from 'theme/components/ThemeToggle'

2
src/components/About/constants.tsx
View File

@ -1,6 +1,6 @@
import { InterfaceElementName } from '@uniswap/analytics-events'
import { DollarSign, Terminal } from 'react-feather'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { lightTheme } from 'theme/colors'
import darkArrowImgSrc from './images/aboutArrowDark.png'

2
src/components/AccountDrawer/AuthenticatedHeader.tsx
View File

@ -21,7 +21,7 @@ import { ArrowDownRight, ArrowUpRight, CreditCard, IconProps, Info, LogOut, Sett
import { useNavigate } from 'react-router-dom'
import { useAppDispatch } from 'state/hooks'
import { updateSelectedWallet } from 'state/user/reducer'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
import { CopyHelper, ExternalLink, ThemedText } from 'theme'
import { shortenAddress } from 'utils'

2
src/components/AccountDrawer/DefaultMenu.tsx
View File

@ -2,7 +2,7 @@ import { useWeb3React } from '@web3-react/core'
import Column from 'components/Column'
import WalletModal from 'components/WalletModal'
import { useCallback, useEffect, useState } from 'react'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import AuthenticatedHeader from './AuthenticatedHeader'
import SettingsMenu from './SettingsMenu'

2
src/components/AccountDrawer/DownloadButton.tsx
View File

@ -1,6 +1,6 @@
import { InterfaceElementName } from '@uniswap/analytics-events'
import { PropsWithChildren, useCallback } from 'react'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ClickableStyle } from 'theme'
import { openDownloadApp } from 'utils/openDownloadApp'

2
src/components/AccountDrawer/GitVersionRow.tsx
View File

@ -1,7 +1,7 @@
import { Trans } from '@lingui/macro'
import Tooltip from 'components/Tooltip'
import useCopyClipboard from 'hooks/useCopyClipboard'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ThemedText } from 'theme'
const Container = styled.div`

2
src/components/AccountDrawer/IconButton.tsx
View File

@ -1,6 +1,6 @@
import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
import { Icon } from 'react-feather'
import styled, { css, DefaultTheme } from 'styled-components/macro'
import styled, { css, DefaultTheme } from 'styled-components'
import useResizeObserver from 'use-resize-observer'
import { TRANSITION_DURATIONS } from '../../theme/styles'

2
src/components/AccountDrawer/MiniPortfolio/Activity/ActivityRow.tsx
View File

@ -7,7 +7,7 @@ import Row from 'components/Row'
import { TransactionStatus } from 'graphql/data/__generated__/types-and-hooks'
import useENSName from 'hooks/useENSName'
import { useCallback } from 'react'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { EllipsisStyle, ThemedText } from 'theme'
import { shortenAddress } from 'utils'
import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'

2
src/components/AccountDrawer/MiniPortfolio/Activity/OffchainActivityModal.tsx
View File

@ -16,7 +16,7 @@ import { X } from 'react-feather'
import { InterfaceTrade } from 'state/routing/types'
import { useOrder } from 'state/signatures/hooks'
import { UniswapXOrderDetails } from 'state/signatures/types'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ExternalLink, ThemedText } from 'theme'
import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'

2
src/components/AccountDrawer/MiniPortfolio/Activity/index.tsx
View File

@ -8,7 +8,7 @@ import { PollingInterval } from 'graphql/data/util'
import { atom, useAtom } from 'jotai'
import { EmptyWalletModule } from 'nft/components/profile/view/EmptyWalletContent'
import { useEffect, useMemo } from 'react'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ThemedText } from 'theme'
import { PortfolioSkeleton, PortfolioTabWrapper } from '../PortfolioRow'

18
src/components/AccountDrawer/MiniPortfolio/Activity/parseRemote.tsx
View File

@ -19,7 +19,7 @@ import {
TransactionDetailsPartsFragment,
} from 'graphql/data/__generated__/types-and-hooks'
import { logSentryErrorForUnsupportedChain, supportedChainIdFromGQLChain } from 'graphql/data/util'
import ms from 'ms.macro'
import ms from 'ms'
import { useEffect, useState } from 'react'
import { isAddress } from 'utils'
@ -387,12 +387,12 @@ const getTimeSince = (timestamp: number) => {
let interval
// TODO(cartcrom): use locale to determine date shorthands to use for non-english
if ((interval = seconds / ms`1y`) > 1) return Math.floor(interval) + 'y'
if ((interval = seconds / ms`30d`) > 1) return Math.floor(interval) + 'mo'
if ((interval = seconds / ms`1d`) > 1) return Math.floor(interval) + 'd'
if ((interval = seconds / ms`1h`) > 1) return Math.floor(interval) + 'h'
if ((interval = seconds / ms`1m`) > 1) return Math.floor(interval) + 'm'
else return Math.floor(seconds / ms`1s`) + 's'
if ((interval = seconds / ms(`1y`)) > 1) return Math.floor(interval) + 'y'
if ((interval = seconds / ms(`30d`)) > 1) return Math.floor(interval) + 'mo'
if ((interval = seconds / ms(`1d`)) > 1) return Math.floor(interval) + 'd'
if ((interval = seconds / ms(`1h`)) > 1) return Math.floor(interval) + 'h'
if ((interval = seconds / ms(`1m`)) > 1) return Math.floor(interval) + 'm'
else return Math.floor(seconds / ms(`1s`)) + 's'
}
/**
@ -406,11 +406,11 @@ export function useTimeSince(timestamp: number) {
useEffect(() => {
const refreshTime = () =>
setTimeout(() => {
if (Math.floor(Date.now() - timestamp * 1000) / ms`61s` <= 1) {
if (Math.floor(Date.now() - timestamp * 1000) / ms(`61s`) <= 1) {
setTimeSince(getTimeSince(timestamp))
timeout = refreshTime()
}
}, ms`1s`)
}, ms(`1s`))
let timeout = refreshTime()

2
src/components/AccountDrawer/MiniPortfolio/ExpandoRow.tsx
View File

@ -3,7 +3,7 @@ import Column from 'components/Column'
import Row from 'components/Row'
import { PropsWithChildren } from 'react'
import { ChevronDown } from 'react-feather'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ThemedText } from 'theme'
const ExpandIcon = styled(ChevronDown)<{ $expanded: boolean }>`

2
src/components/AccountDrawer/MiniPortfolio/NFTs/NFTItem.tsx
View File

@ -10,7 +10,7 @@ import { VerifiedIcon } from 'nft/components/icons'
import { WalletAsset } from 'nft/types'
import { floorFormatter } from 'nft/utils'
import { useNavigate } from 'react-router-dom'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ThemedText } from 'theme'
const FloorPrice = styled(Row)`

2
src/components/AccountDrawer/MiniPortfolio/NFTs/index.tsx
View File

@ -3,7 +3,7 @@ import { LoadingAssets } from 'nft/components/collection/CollectionAssetLoading'
import { EmptyWalletModule } from 'nft/components/profile/view/EmptyWalletContent'
import { useState } from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { useAccountDrawer } from '../..'
import { DEFAULT_NFT_QUERY_AMOUNT } from '../constants'

4
src/components/AccountDrawer/MiniPortfolio/Pools/cache.ts
View File

@ -3,7 +3,7 @@ import { Pool, Position } from '@uniswap/v3-sdk'
import { useAllTokensMultichain } from 'hooks/Tokens'
import { atom, useAtom } from 'jotai'
import { atomWithStorage } from 'jotai/utils'
import ms from 'ms.macro'
import ms from 'ms'
import { useCallback } from 'react'
import { deserializeToken, serializeToken } from 'state/user/hooks'
import { SerializedToken } from 'state/user/types'
@ -25,7 +25,7 @@ export type PositionInfo = {
prices?: [number?, number?]
}
const POSITION_CACHE_EXPIRY = ms`1m` // 1 minute is arbitrary here
const POSITION_CACHE_EXPIRY = ms(`1m`) // 1 minute is arbitrary here
// Allows reusing recently fetched positions between component mounts
type CachedPositionsEntry = { result: PositionInfo[]; stale: boolean }
const cachedPositionsAtom = atom<{ [address: string]: CachedPositionsEntry | undefined }>({})

2
src/components/AccountDrawer/MiniPortfolio/Pools/index.tsx
View File

@ -12,7 +12,7 @@ import { useSwitchChain } from 'hooks/useSwitchChain'
import { EmptyWalletModule } from 'nft/components/profile/view/EmptyWalletContent'
import { useCallback, useMemo, useReducer } from 'react'
import { useNavigate } from 'react-router-dom'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ThemedText } from 'theme'
import { ExpandoRow } from '../ExpandoRow'

2
src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.tsx
View File

@ -10,7 +10,7 @@ import useTokenLogoSource from 'hooks/useAssetLogoSource'
import useENSAvatar from 'hooks/useENSAvatar'
import React from 'react'
import { Loader } from 'react-feather'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
const UnknownContract = styled(UnknownStatus)`
color: ${({ theme }) => theme.textSecondary};
`

2
src/components/AccountDrawer/MiniPortfolio/PortfolioRow.tsx
View File

@ -1,7 +1,7 @@
import Column, { AutoColumn } from 'components/Column'
import Row from 'components/Row'
import { LoadingBubble } from 'components/Tokens/loading'
import styled, { css, keyframes } from 'styled-components/macro'
import styled, { css, keyframes } from 'styled-components'
export const PortfolioRowWrapper = styled(Row)<{ onClick?: any }>`
gap: 12px;

2
src/components/AccountDrawer/MiniPortfolio/Tokens/index.tsx
View File

@ -10,7 +10,7 @@ import { useAtomValue } from 'jotai/utils'
import { EmptyWalletModule } from 'nft/components/profile/view/EmptyWalletContent'
import { useCallback, useMemo, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { EllipsisStyle, ThemedText } from 'theme'
import { useToggleAccountDrawer } from '../..'

2
src/components/AccountDrawer/MiniPortfolio/index.tsx
View File

@ -7,7 +7,7 @@ import { AutoRow } from 'components/Row'
import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
import { useIsNftPage } from 'hooks/useIsNftPage'
import { useEffect, useState } from 'react'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
import { BREAKPOINTS, ThemedText } from 'theme'
import { ActivityTab } from './Activity'

2
src/components/AccountDrawer/SettingsMenu.tsx
View File

@ -4,7 +4,7 @@ import { useActiveLocale } from 'hooks/useActiveLocale'
import { useLocationLinkProps } from 'hooks/useLocationLinkProps'
import { Check } from 'react-feather'
import { Link } from 'react-router-dom'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
import { ClickableStyle, ThemedText } from 'theme'
import ThemeToggle from 'theme/components/ThemeToggle'

2
src/components/AccountDrawer/SettingsToggle.tsx
View File

@ -1,7 +1,7 @@
import Column from 'components/Column'
import Row from 'components/Row'
import Toggle from 'components/Toggle'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ThemedText } from 'theme'
const StyledColumn = styled(Column)`

2
src/components/AccountDrawer/SlideOutMenu.tsx
View File

@ -1,6 +1,6 @@
import { ScrollBarStyles } from 'components/Common'
import { ArrowLeft } from 'react-feather'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ClickableStyle, ThemedText } from 'theme'
const Menu = styled.div`

2
src/components/AccountDrawer/UniwalletModal.tsx
View File

@ -11,7 +11,7 @@ import { ConnectionType } from 'connection/types'
import { UniwalletConnect as UniwalletConnectV2 } from 'connection/WalletConnectV2'
import { QRCodeSVG } from 'qrcode.react'
import { useEffect, useState } from 'react'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
import { CloseIcon, ThemedText } from 'theme'
import { isIOS } from 'utils/userAgent'

2
src/components/AccountDrawer/index.tsx
View File

@ -8,7 +8,7 @@ import { useAtomValue, useUpdateAtom } from 'jotai/utils'
import { useCallback, useEffect, useRef, useState } from 'react'
import { ChevronsRight } from 'react-feather'
import { useGesture } from 'react-use-gesture'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { BREAKPOINTS, ClickableStyle } from 'theme'
import { Z_INDEX } from 'theme/zIndex'
import { isMobile } from 'utils/userAgent'

2
src/components/AddressInputPanel/index.tsx
View File

@ -3,7 +3,7 @@ import { Trans } from '@lingui/macro'
import { t } from '@lingui/macro'
import { useWeb3React } from '@web3-react/core'
import { ChangeEvent, ReactNode, useCallback } from 'react'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
import { flexColumnNoWrap } from 'theme/styles'
import useENS from '../../hooks/useENS'

2
src/components/AirdropModal/index.tsx
View File

@ -16,7 +16,7 @@ import { useEffect, useState } from 'react'
import { AlertTriangle } from 'react-feather'
import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
import { ApplicationModal } from 'state/application/reducer'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { CloseIcon, ThemedText } from 'theme'
import Modal from '../Modal'

2
src/components/Badge/RangeBadge.tsx
View File

@ -1,6 +1,6 @@
import { Trans } from '@lingui/macro'
import { AlertTriangle, Slash } from 'react-feather'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
import { MouseoverTooltip } from '../../components/Tooltip'

2
src/components/Badge/index.tsx
View File

@ -1,6 +1,6 @@
import { readableColor } from 'polished'
import { PropsWithChildren } from 'react'
import styled, { DefaultTheme } from 'styled-components/macro'
import styled, { DefaultTheme } from 'styled-components'
export enum BadgeVariant {
DEFAULT = 'DEFAULT',

2
src/components/Banner/UniswapWalletBanner.tsx
View File

@ -10,7 +10,7 @@ import { useScreenSize } from 'hooks/useScreenSize'
import { X } from 'react-feather'
import { useLocation } from 'react-router-dom'
import { useHideUniswapWalletBanner } from 'state/user/hooks'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ThemedText } from 'theme'
import { Z_INDEX } from 'theme/zIndex'
import { openDownloadApp, openWalletMicrosite } from 'utils/openDownloadApp'

2
src/components/Button/index.tsx
View File

@ -2,7 +2,7 @@ import { darken } from 'polished'
import { forwardRef } from 'react'
import { Check, ChevronDown } from 'react-feather'
import { Button as RebassButton, ButtonProps as ButtonPropsOriginal } from 'rebass/styled-components'
import styled, { DefaultTheme, useTheme } from 'styled-components/macro'
import styled, { DefaultTheme, useTheme } from 'styled-components'
import { RowBetween } from '../Row'

2
src/components/Card/index.tsx
View File

@ -1,5 +1,5 @@
import { Box } from 'rebass/styled-components'
import styled from 'styled-components/macro'
import styled from 'styled-components'
const Card = styled(Box)<{ width?: string; padding?: string; border?: string; $borderRadius?: string }>`
width: ${({ width }) => width ?? '100%'};

6
src/components/Charts/AnimatedInLineChart.tsx
View File

@ -1,18 +1,18 @@
import { Group } from '@visx/group'
import { LinePath } from '@visx/shape'
import { easeSinOut } from 'd3'
import ms from 'ms.macro'
import ms from 'ms'
import React from 'react'
import { useEffect, useRef, useState } from 'react'
import { animated, useSpring } from 'react-spring'
import { useTheme } from 'styled-components/macro'
import { useTheme } from 'styled-components'
import { LineChartProps } from './LineChart'
type AnimatedInLineChartProps<T> = Omit<LineChartProps<T>, 'height' | 'width' | 'children'>
const config = {
duration: ms`0.8s`,
duration: ms(`0.8s`),
easing: easeSinOut,
}

2
src/components/Charts/FadeInLineChart.tsx
View File

@ -4,7 +4,7 @@ import { easeCubicInOut } from 'd3'
import React from 'react'
import { useEffect, useRef, useState } from 'react'
import { animated, useSpring } from 'react-spring'
import { useTheme } from 'styled-components/macro'
import { useTheme } from 'styled-components'
import { LineChartProps } from './LineChart'

2
src/components/Charts/LineChart.tsx
View File

@ -3,7 +3,7 @@ import { LinePath } from '@visx/shape'
import { CurveFactory } from 'd3'
import React from 'react'
import { ReactNode } from 'react'
import { useTheme } from 'styled-components/macro'
import { useTheme } from 'styled-components'
export interface LineChartProps<T> {
data: T[]

2
src/components/Charts/SparklineChart.tsx
View File

@ -3,7 +3,7 @@ import { curveCardinal, scaleLinear } from 'd3'
import { SparklineMap, TopToken } from 'graphql/data/TopTokens'
import { PricePoint } from 'graphql/data/util'
import { memo } from 'react'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
import { getPriceBounds } from '../Tokens/TokenDetails/PriceChart'
import LineChart from './LineChart'

2
src/components/Column/index.tsx
View File

@ -1,4 +1,4 @@
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { Gap } from 'theme'
export const Column = styled.div<{

2
src/components/Common/index.tsx
View File

@ -1,4 +1,4 @@
import { css } from 'styled-components/macro'
import { css } from 'styled-components'
export const ScrollBarStyles = css<{ $isHorizontalScroll?: boolean }>`
// Firefox scrollbar styling

2
src/components/ConnectedAccountBlocked/index.tsx
View File

@ -1,7 +1,7 @@
import { Trans } from '@lingui/macro'
import Column from 'components/Column'
import { BlockedIcon } from 'components/TokenSafety/TokenSafetyIcon'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
import { ExternalLink, ThemedText } from 'theme'
import { CopyHelper } from '../../theme'

2
src/components/CurrencyInputPanel/FiatValue.tsx
View File

@ -5,7 +5,7 @@ import Row from 'components/Row'
import { LoadingBubble } from 'components/Tokens/loading'
import { MouseoverTooltip } from 'components/Tooltip'
import { useMemo } from 'react'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ThemedText } from 'theme'
import { warningSeverity } from 'utils/prices'

2
src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
View File

@ -13,7 +13,7 @@ import { isSupportedChain } from 'constants/chains'
import { darken } from 'polished'
import { ReactNode, useCallback, useState } from 'react'
import { Lock } from 'react-feather'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'

2
src/components/CurrencyInputPanel/index.tsx
View File

@ -8,7 +8,7 @@ import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/
import { isSupportedChain } from 'constants/chains'
import { darken } from 'polished'
import { ReactNode, useCallback, useState } from 'react'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'

2
src/components/DoubleLogo/index.tsx
View File

@ -1,5 +1,5 @@
import { Currency } from '@uniswap/sdk-core'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import CurrencyLogo from '../Logo/CurrencyLogo'

2
src/components/ErrorBoundary/index.tsx
View File

@ -6,7 +6,7 @@ import { ChevronUpIcon } from 'nft/components/icons'
import { useIsMobile } from 'nft/hooks'
import React, { PropsWithChildren, useState } from 'react'
import { Copy } from 'react-feather'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { isSentryEnabled } from 'utils/env'
import { CopyToClipboard, ExternalLink, ThemedText } from '../../theme'

2
src/components/Expand/index.tsx
View File

@ -2,7 +2,7 @@ import AnimatedDropdown from 'components/AnimatedDropdown'
import Column from 'components/Column'
import React, { PropsWithChildren, ReactElement } from 'react'
import { ChevronDown } from 'react-feather'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import Row, { RowBetween } from '../Row'

2
src/components/FeatureFlagModal/FeatureFlagModal.tsx
View File

@ -11,7 +11,7 @@ import { Children, PropsWithChildren, ReactElement, ReactNode, useCallback, useS
import { X } from 'react-feather'
import { useModalIsOpen, useToggleFeatureFlags } from 'state/application/hooks'
import { ApplicationModal } from 'state/application/reducer'
import styled from 'styled-components/macro'
import styled from 'styled-components'
const StyledModal = styled.div`
position: fixed;

2
src/components/FeeSelector/FeeOption.tsx
View File

@ -5,7 +5,7 @@ import { AutoColumn } from 'components/Column'
import { useFeeTierDistribution } from 'hooks/useFeeTierDistribution'
import { PoolState } from 'hooks/usePools'
import React from 'react'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ThemedText } from 'theme'
import { FeeTierPercentageBadge } from './FeeTierPercentageBadge'

2
src/components/FeeSelector/index.tsx
View File

@ -13,7 +13,7 @@ import usePrevious from 'hooks/usePrevious'
import { DynamicSection } from 'pages/AddLiquidity/styled'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Box } from 'rebass'
import styled, { keyframes } from 'styled-components/macro'
import styled, { keyframes } from 'styled-components'
import { ThemedText } from 'theme'
import { FeeOption } from './FeeOption'

2
src/components/FiatOnrampModal/index.tsx
View File

@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from 'react'
import { useHref } from 'react-router-dom'
import { useCloseModal, useModalIsOpen } from 'state/application/hooks'
import { ApplicationModal } from 'state/application/reducer'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
import { CustomLightSpinner, ThemedText } from 'theme'
import { useIsDarkMode } from 'theme/components/ThemeToggle'

2
src/components/HoverInlineText/index.tsx
View File

@ -1,6 +1,6 @@
import Tooltip from 'components/Tooltip'
import { useState } from 'react'
import styled from 'styled-components/macro'
import styled from 'styled-components'
const TextWrapper = styled.span<{
margin: boolean

2
src/components/Icons/AlertTriangleFilled.tsx
View File

@ -1,4 +1,4 @@
import { useTheme } from 'styled-components/macro'
import { useTheme } from 'styled-components'
import { StyledSVG } from './shared'

2
src/components/Icons/LoadingSpinner.tsx
View File

@ -1,4 +1,4 @@
import { useTheme } from 'styled-components/macro'
import { useTheme } from 'styled-components'
import { StyledRotatingSVG, StyledSVG } from './shared'

2
src/components/Icons/shared.tsx
View File

@ -1,4 +1,4 @@
import styled, { css, keyframes } from 'styled-components/macro'
import styled, { css, keyframes } from 'styled-components'
const rotateAnimation = keyframes`
from {

2
src/components/Identicon/StatusIcon.tsx
View File

@ -1,7 +1,7 @@
import { Unicon } from 'components/Unicon'
import { Connection, ConnectionType } from 'connection/types'
import useENSAvatar from 'hooks/useENSAvatar'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { useIsDarkMode } from 'theme/components/ThemeToggle'
import { flexColumnNoWrap } from 'theme/styles'

2
src/components/Identicon/index.tsx
View File

@ -1,7 +1,7 @@
import jazzicon from '@metamask/jazzicon'
import useENSAvatar from 'hooks/useENSAvatar'
import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'
import styled from 'styled-components/macro'
import styled from 'styled-components'
const StyledIdenticon = styled.div<{ iconSize: number }>`
height: ${({ iconSize }) => `${iconSize}px`};

2
src/components/InputStepCounter/InputStepCounter.tsx
View File

@ -5,7 +5,7 @@ import { OutlineCard } from 'components/Card'
import { AutoColumn } from 'components/Column'
import { ReactNode, useCallback, useEffect, useState } from 'react'
import { Minus, Plus } from 'react-feather'
import styled, { keyframes } from 'styled-components/macro'
import styled, { keyframes } from 'styled-components'
import { ThemedText } from 'theme'
import { Input as NumericalInput } from '../NumericalInput'

2
src/components/LiquidityChartRangeInput/Area.tsx
View File

@ -1,6 +1,6 @@
import { area, curveStepAfter, ScaleLinear } from 'd3'
import React, { useMemo } from 'react'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ChartEntry } from './types'

2
src/components/LiquidityChartRangeInput/AxisBottom.tsx
View File

@ -1,6 +1,6 @@
import { Axis as d3Axis, axisBottom, NumberValue, ScaleLinear, select } from 'd3'
import React, { useMemo } from 'react'
import styled from 'styled-components/macro'
import styled from 'styled-components'
const StyledGroup = styled.g`
line {

2
src/components/LiquidityChartRangeInput/Brush.tsx
View File

@ -2,7 +2,7 @@ import { brushHandleAccentPath, brushHandlePath, OffScreenHandle } from 'compone
import { BrushBehavior, brushX, D3BrushEvent, ScaleLinear, select } from 'd3'
import usePrevious from 'hooks/usePrevious'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styled from 'styled-components/macro'
import styled from 'styled-components'
const Handle = styled.path<{ color: string }>`
cursor: ew-resize;

2
src/components/LiquidityChartRangeInput/Line.tsx
View File

@ -1,6 +1,6 @@
import { ScaleLinear } from 'd3'
import React, { useMemo } from 'react'
import styled from 'styled-components/macro'
import styled from 'styled-components'
const StyledLine = styled.line`
opacity: 0.5;

2
src/components/LiquidityChartRangeInput/Zoom.tsx
View File

@ -2,7 +2,7 @@ import { ButtonGray } from 'components/Button'
import { ScaleLinear, select, zoom, ZoomBehavior, zoomIdentity, ZoomTransform } from 'd3'
import React, { useEffect, useMemo, useRef } from 'react'
import { RefreshCcw, ZoomIn, ZoomOut } from 'react-feather'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ZoomLevels } from './types'

2
src/components/LiquidityChartRangeInput/index.tsx
View File

@ -10,7 +10,7 @@ import { ReactNode, useCallback, useMemo } from 'react'
import { BarChart2, CloudOff, Inbox } from 'react-feather'
import { batch } from 'react-redux'
import { Bound } from 'state/mint/v3/actions'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
import { ThemedText } from '../../theme'
import { Chart } from './Chart'

2
src/components/Loader/styled.tsx
View File

@ -1,4 +1,4 @@
import styled, { css, keyframes } from 'styled-components/macro'
import styled, { css, keyframes } from 'styled-components'
export const loadingAnimation = keyframes`
0% {

2
src/components/Logo/AssetLogo.tsx
View File

@ -2,7 +2,7 @@ import { ChainId } from '@uniswap/sdk-core'
import { getChainInfo } from 'constants/chainInfo'
import useTokenLogoSource from 'hooks/useAssetLogoSource'
import React, { useState } from 'react'
import styled from 'styled-components/macro'
import styled from 'styled-components'
export const MissingImageLogo = styled.div<{ size?: string }>`
--size: ${({ size }) => size};

2
src/components/Menu/index.tsx
View File

@ -1,6 +1,6 @@
import { FunctionComponent, PropsWithChildren, useRef } from 'react'
import { Link } from 'react-router-dom'
import styled, { css } from 'styled-components/macro'
import styled, { css } from 'styled-components'
import { ReactComponent as MenuIcon } from '../../assets/images/menu.svg'
import { useOnClickOutside } from '../../hooks/useOnClickOutside'

2
src/components/Modal/index.tsx
View File

@ -2,7 +2,7 @@ import { DialogContent, DialogOverlay } from '@reach/dialog'
import React from 'react'
import { animated, useSpring, useTransition } from 'react-spring'
import { useGesture } from 'react-use-gesture'
import styled, { css } from 'styled-components/macro'
import styled, { css } from 'styled-components'
import { Z_INDEX } from 'theme/zIndex'
import { isMobile } from '../../utils/userAgent'

2
src/components/ModalViews/index.tsx
View File

@ -1,7 +1,7 @@
import { Trans } from '@lingui/macro'
import { useWeb3React } from '@web3-react/core'
import { ArrowUpCircle } from 'react-feather'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
import Circle from '../../assets/images/blue-loader.svg'
import { CloseIcon, CustomLightSpinner, ThemedText } from '../../theme'

2
src/components/NavBar/Bag.tsx
View File

@ -3,7 +3,7 @@ import { useIsNftProfilePage } from 'hooks/useIsNftPage'
import { BagIcon, HundredsOverflowIcon, TagIcon } from 'nft/components/icons'
import { useBag, useSellAsset } from 'nft/hooks'
import { useCallback } from 'react'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { shallow } from 'zustand/shallow'
const CounterDot = styled.div`

2
src/components/NavBar/Blur.tsx
View File

@ -1,4 +1,4 @@
import styled from 'styled-components/macro'
import styled from 'styled-components'
const MAX_STRENGTH = 5
const BLUR_STEPS = 20

2
src/components/NavBar/ChainSelector.tsx
View File

@ -25,7 +25,7 @@ import { Column, Row } from 'nft/components/Flex'
import { useIsMobile } from 'nft/hooks'
import { useCallback, useMemo, useRef, useState } from 'react'
import { AlertTriangle, ChevronDown, ChevronUp } from 'react-feather'
import { useTheme } from 'styled-components/macro'
import { useTheme } from 'styled-components'
import { getSupportedChainIdsFromWalletConnectSession } from 'utils/getSupportedChainIdsFromWalletConnectSession'
import * as styles from './ChainSelector.css'

2
src/components/NavBar/ChainSelectorRow.tsx
View File

@ -5,7 +5,7 @@ import Loader from 'components/Icons/LoadingSpinner'
import { getChainInfo } from 'constants/chainInfo'
import { useBaseEnabledChains } from 'featureFlags/flags/baseEnabled'
import { CheckMarkIcon } from 'nft/components/icons'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
const LOGO_SIZE = 20

2
src/components/NavBar/MenuDropdown.tsx
View File

@ -19,7 +19,7 @@ import { themeVars } from 'nft/css/sprinkles.css'
import { ReactNode, useReducer, useRef } from 'react'
import { NavLink, NavLinkProps } from 'react-router-dom'
import { useToggleModal } from 'state/application/hooks'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
import { isDevelopmentEnv, isStagingEnv } from 'utils/env'
import { openDownloadApp } from 'utils/openDownloadApp'

23
src/components/NavBar/SearchBar.tsx
View File

@ -1,5 +1,6 @@
// eslint-disable-next-line no-restricted-imports
import { t } from '@lingui/macro'
import { useLingui } from '@lingui/react'
import { BrowserEvent, InterfaceElementName, InterfaceEventName, InterfaceSectionName } from '@uniswap/analytics-events'
import { useWeb3React } from '@web3-react/core'
import { sendAnalyticsEvent, Trace, TraceEvent, useTrace } from 'analytics'
@ -16,9 +17,9 @@ import { Column, Row } from 'nft/components/Flex'
import { magicalGradientOnHover } from 'nft/css/common.css'
import { useIsMobile, useIsTablet } from 'nft/hooks'
import { useIsNavSearchInputVisible } from 'nft/hooks/useIsNavSearchInputVisible'
import { ChangeEvent, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'
import { ChangeEvent, useCallback, useEffect, useReducer, useRef, useState } from 'react'
import { useLocation } from 'react-router-dom'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ChevronLeftIcon, MagnifyingGlassIcon, NavMagnifyingGlassIcon } from '../../nft/components/icons'
import { NavIcon } from './NavIcon'
@ -103,17 +104,13 @@ export const SearchBar = () => {
hasInput: debouncedSearchValue && debouncedSearchValue.length > 0,
...trace,
}
const placeholderText = useMemo(() => {
if (isMobileOrTablet) {
return t`Search`
} else {
if (shouldDisableNFTRoutes) {
return t`Search tokens`
} else {
return t`Search tokens and NFT collections`
}
}
}, [isMobileOrTablet, shouldDisableNFTRoutes])
const { i18n } = useLingui() // subscribe to locale changes
const placeholderText = isMobileOrTablet
? t(i18n)`Search`
: shouldDisableNFTRoutes
? t(i18n)`Search tokens`
: t(i18n)`Search tokens and NFT collections`
const handleKeyPress = useCallback(
(event: any) => {

2
src/components/NavBar/SearchBarDropdown.tsx
View File

@ -19,7 +19,7 @@ import { subheadSmall } from 'nft/css/common.css'
import { GenieCollection, TrendingCollection } from 'nft/types'
import { useEffect, useMemo, useState } from 'react'
import { useLocation } from 'react-router-dom'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ThemedText } from 'theme'
import { ClockIcon, TrendingArrow } from '../../nft/components/icons'

2
src/components/NavBar/SuggestionRow.tsx
View File

@ -17,7 +17,7 @@ import { ethNumberStandardFormatter } from 'nft/utils/currency'
import { putCommas } from 'nft/utils/putCommas'
import { useCallback, useEffect, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ThemedText } from 'theme'
import { DeltaText, getDeltaArrow } from '../Tokens/TokenDetails/PriceChart'

2
src/components/NavBar/index.tsx
View File

@ -13,7 +13,7 @@ import { useProfilePageState } from 'nft/hooks'
import { ProfilePageStateType } from 'nft/types'
import { ReactNode, useCallback } from 'react'
import { NavLink, NavLinkProps, useLocation, useNavigate } from 'react-router-dom'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { useIsNavSearchInputVisible } from '../../nft/hooks/useIsNavSearchInputVisible'
import { Bag } from './Bag'

2
src/components/NavigationTabs/index.tsx
View File

@ -8,7 +8,7 @@ import { Box } from 'rebass'
import { useAppDispatch } from 'state/hooks'
import { resetMintState } from 'state/mint/actions'
import { resetMintState as resetMintV3State } from 'state/mint/v3/actions'
import styled, { useTheme } from 'styled-components/macro'
import styled, { useTheme } from 'styled-components'
import { ThemedText } from 'theme'
import { flexRowNoWrap } from 'theme/styles'

2
src/components/NetworkAlert/NetworkAlert.tsx
View File

@ -4,7 +4,7 @@ import { useWeb3React } from '@web3-react/core'
import { getChainInfo } from 'constants/chainInfo'
import { useBaseEnabledChains } from 'featureFlags/flags/baseEnabled'
import { ArrowUpRight } from 'react-feather'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ExternalLink, HideSmall } from 'theme'
import { colors } from 'theme/colors'
import { useDarkModeManager } from 'theme/components/ThemeToggle'

2
src/components/NumericalInput/index.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { escapeRegExp } from 'utils'
const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`

2
src/components/Polling/ChainConnectivityWarning.tsx
View File

@ -3,7 +3,7 @@ import { ChainId } from '@uniswap/sdk-core'
import { useWeb3React } from '@web3-react/core'
import { getChainInfoOrDefault, L2ChainInfo } from 'constants/chainInfo'
import { AlertTriangle } from 'react-feather'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { ExternalLink, MEDIA_WIDTHS } from 'theme'
const BodyRow = styled.div`

8
src/components/Polling/index.tsx
View File

@ -7,9 +7,9 @@ import { useIsLandingPage } from 'hooks/useIsLandingPage'
import { useIsNftPage } from 'hooks/useIsNftPage'
import useMachineTimeMs from 'hooks/useMachineTime'
import useBlockNumber from 'lib/hooks/useBlockNumber'
import ms from 'ms.macro'
import ms from 'ms'
import { useEffect, useMemo, useState } from 'react'
import styled, { keyframes } from 'styled-components/macro'
import styled, { keyframes } from 'styled-components'
import { ExternalLink, ThemedText } from 'theme'
import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
@ -97,8 +97,8 @@ const Spinner = styled.div<{ warning: boolean }>`
top: -3px;
`
const DEFAULT_MS_BEFORE_WARNING = ms`10m`
const NETWORK_HEALTH_CHECK_MS = ms`10s`
const DEFAULT_MS_BEFORE_WARNING = ms(`10m`)
const NETWORK_HEALTH_CHECK_MS = ms(`10s`)
export default function Polling() {
const { chainId } = useWeb3React()

2
src/components/Popover/index.tsx
View File

@ -3,7 +3,7 @@ import Portal from '@reach/portal'
import useInterval from 'lib/hooks/useInterval'
import React, { CSSProperties, useCallback, useMemo, useState } from 'react'
import { usePopper } from 'react-popper'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { Z_INDEX } from 'theme/zIndex'
const PopoverContainer = styled.div<{ show: boolean }>`

2
src/components/Popups/ClaimPopup.tsx
View File

@ -4,7 +4,7 @@ import { useWeb3React } from '@web3-react/core'
import { sendEvent } from 'components/analytics'
import { useCallback, useEffect } from 'react'
import { Heart, X } from 'react-feather'
import styled, { keyframes } from 'styled-components/macro'
import styled, { keyframes } from 'styled-components'
import tokenLogo from '../../assets/images/token-logo.png'
import {

2
src/components/Popups/PopupContent.tsx
View File

@ -15,7 +15,7 @@ import useENSName from 'hooks/useENSName'
import { X } from 'react-feather'
import { useOrder } from 'state/signatures/hooks'
import { useTransaction } from 'state/transactions/hooks'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { EllipsisStyle, ThemedText } from 'theme'
import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'

2
src/components/Popups/index.tsx
View File

@ -1,6 +1,6 @@
import { ChainId } from '@uniswap/sdk-core'
import { useWeb3React } from '@web3-react/core'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { MEDIA_WIDTHS } from 'theme'
import { useActivePopups } from '../../state/application/hooks'

2
src/components/PositionCard/Sushi.tsx
View File

@ -4,7 +4,7 @@ import Badge, { BadgeVariant } from 'components/Badge'
import { transparentize } from 'polished'
import { Link } from 'react-router-dom'
import { Text } from 'rebass'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { useColor } from '../../hooks/useColor'
import { unwrappedToken } from '../../utils/unwrappedToken'

2
src/components/PositionCard/V2.tsx
View File

@ -8,7 +8,7 @@ import { useState } from 'react'
import { ChevronDown, ChevronUp } from 'react-feather'
import { Link } from 'react-router-dom'
import { Text } from 'rebass'
import styled from 'styled-components/macro'
import styled from 'styled-components'
import { BIG_INT_ZERO } from '../../constants/misc'
import { useColor } from '../../hooks/useColor'

Some files were not shown because too many files have changed in this diff Show More