build: replace babel with swc (#7056)
* 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
GitHub
parent
3afe7fe9f2
commit
08501234a8
|
|
@ -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',
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ schema.graphql
|
|||
/coverage
|
||||
/cache
|
||||
/functions/coverage
|
||||
/.swc
|
||||
|
||||
# builds
|
||||
/build
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
/* eslint-env node */
|
||||
|
||||
const isDev = process.env.NODE_ENV === 'development'
|
||||
|
||||
module.exports = {
|
||||
styledComponents: {
|
||||
fileName: isDev,
|
||||
displayName: isDev,
|
||||
},
|
||||
}
|
||||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
// 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/]
|
||||
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.
|
||||
/Failed to parse source map/,
|
||||
]
|
||||
|
||||
return webpackConfig
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
34
package.json
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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,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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }>`
|
||||
|
|
|
|||
|
|
@ -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)`
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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 }>({})
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 '../..'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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)`
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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,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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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%'};
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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[]
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import styled from 'styled-components/macro'
|
||||
import styled from 'styled-components'
|
||||
import { Gap } from 'theme'
|
||||
|
||||
export const Column = styled.div<{
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { css } from 'styled-components/macro'
|
||||
import { css } from 'styled-components'
|
||||
|
||||
export const ScrollBarStyles = css<{ $isHorizontalScroll?: boolean }>`
|
||||
// Firefox scrollbar styling
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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,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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useTheme } from 'styled-components/macro'
|
||||
import { useTheme } from 'styled-components'
|
||||
|
||||
import { StyledSVG } from './shared'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useTheme } from 'styled-components/macro'
|
||||
import { useTheme } from 'styled-components'
|
||||
|
||||
import { StyledRotatingSVG, StyledSVG } from './shared'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import styled, { css, keyframes } from 'styled-components/macro'
|
||||
import styled, { css, keyframes } from 'styled-components'
|
||||
|
||||
const rotateAnimation = keyframes`
|
||||
from {
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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`};
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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,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;
|
||||
|
|
|
|||
|
|
@ -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,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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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,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};
|
||||
|
|
|
|||
|
|
@ -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,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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import styled from 'styled-components/macro'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const MAX_STRENGTH = 5
|
||||
const BLUR_STEPS = 20
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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 }>`
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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 }>`
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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
Loading…
Reference in New Issue