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

.eslintrc.js

 /* 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',
           {

.github/actions/setup/action.yml

@@ -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

.github/workflows/test.yml

@@ -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:

.gitignore

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

.swcrc

+{
+  "$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"
+      }
+    }
+  }
+}

babel-plugin-macros.config.js

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

codecov.yml

@@ -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:

craco.config.cjs

@@ -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
     },

lingui.config.ts

 /* 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

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",

src/components/About/AboutFooter.tsx

 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'
 

src/components/About/Card.tsx

 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'
 

src/components/About/Icons.tsx

-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'

src/components/About/ProtocolBanner.tsx

 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'
 

src/components/About/constants.tsx

 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'

src/components/AccountDrawer/AuthenticatedHeader.tsx

@@ -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'
 

src/components/AccountDrawer/DefaultMenu.tsx

@@ -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'

src/components/AccountDrawer/DownloadButton.tsx

 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'
 

src/components/AccountDrawer/GitVersionRow.tsx

 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`

src/components/AccountDrawer/IconButton.tsx

 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'

src/components/AccountDrawer/MiniPortfolio/Activity/ActivityRow.tsx

@@ -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'

src/components/AccountDrawer/MiniPortfolio/Activity/OffchainActivityModal.tsx

@@ -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'
 

src/components/AccountDrawer/MiniPortfolio/Activity/index.tsx

@@ -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'

src/components/AccountDrawer/MiniPortfolio/Activity/parseRemote.tsx

@@ -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()
 

src/components/AccountDrawer/MiniPortfolio/ExpandoRow.tsx

@@ -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 }>`

src/components/AccountDrawer/MiniPortfolio/NFTs/NFTItem.tsx

@@ -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)`

src/components/AccountDrawer/MiniPortfolio/NFTs/index.tsx

@@ -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'

src/components/AccountDrawer/MiniPortfolio/Pools/cache.ts

@@ -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 }>({})

src/components/AccountDrawer/MiniPortfolio/Pools/index.tsx

@@ -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'

src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.tsx

@@ -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};
 `

src/components/AccountDrawer/MiniPortfolio/PortfolioRow.tsx

 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;

src/components/AccountDrawer/MiniPortfolio/Tokens/index.tsx

@@ -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 '../..'

src/components/AccountDrawer/MiniPortfolio/index.tsx

@@ -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'

src/components/AccountDrawer/SettingsMenu.tsx

@@ -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'
 

src/components/AccountDrawer/SettingsToggle.tsx

 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)`

src/components/AccountDrawer/SlideOutMenu.tsx

 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`

src/components/AccountDrawer/UniwalletModal.tsx

@@ -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'
 

src/components/AccountDrawer/index.tsx

@@ -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'

src/components/AddressInputPanel/index.tsx

@@ -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'

src/components/AirdropModal/index.tsx

@@ -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'

src/components/Badge/RangeBadge.tsx

 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'
 

src/components/Badge/index.tsx

 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',

src/components/Banner/UniswapWalletBanner.tsx

@@ -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'

src/components/Button/index.tsx

@@ -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'
 

src/components/Card/index.tsx

 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%'};

src/components/Charts/AnimatedInLineChart.tsx

 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,
 }
 

src/components/Charts/FadeInLineChart.tsx

@@ -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'
 

src/components/Charts/LineChart.tsx

@@ -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[]

src/components/Charts/SparklineChart.tsx

@@ -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'

src/components/Column/index.tsx

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

src/components/Common/index.tsx

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

src/components/ConnectedAccountBlocked/index.tsx

 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'

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -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'
 

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -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'

src/components/CurrencyInputPanel/index.tsx

@@ -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'
 

src/components/DoubleLogo/index.tsx

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

src/components/ErrorBoundary/index.tsx

@@ -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'

src/components/Expand/index.tsx

@@ -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'
 

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -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;

src/components/FeeSelector/FeeOption.tsx

@@ -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'

src/components/FeeSelector/index.tsx

@@ -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'

src/components/FiatOnrampModal/index.tsx

@@ -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'
 

src/components/HoverInlineText/index.tsx

 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

src/components/Icons/AlertTriangleFilled.tsx

-import { useTheme } from 'styled-components/macro'
+import { useTheme } from 'styled-components'
 
 import { StyledSVG } from './shared'
 

src/components/Icons/LoadingSpinner.tsx

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

src/components/Icons/shared.tsx

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

src/components/Identicon/StatusIcon.tsx

 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'
 

src/components/Identicon/index.tsx

 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`};

src/components/InputStepCounter/InputStepCounter.tsx

@@ -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'

src/components/LiquidityChartRangeInput/Area.tsx

 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'
 

src/components/LiquidityChartRangeInput/AxisBottom.tsx

 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 {

src/components/LiquidityChartRangeInput/Brush.tsx

@@ -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;

src/components/LiquidityChartRangeInput/Line.tsx

 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;

src/components/LiquidityChartRangeInput/Zoom.tsx

@@ -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'
 

src/components/LiquidityChartRangeInput/index.tsx

@@ -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'

src/components/Loader/styled.tsx

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

src/components/Logo/AssetLogo.tsx

@@ -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};

src/components/Menu/index.tsx

 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'

src/components/Modal/index.tsx

@@ -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'

src/components/ModalViews/index.tsx

 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'

src/components/NavBar/Bag.tsx

@@ -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`

src/components/NavBar/Blur.tsx

-import styled from 'styled-components/macro'
+import styled from 'styled-components'
 
 const MAX_STRENGTH = 5
 const BLUR_STEPS = 20

src/components/NavBar/ChainSelector.tsx

@@ -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'

src/components/NavBar/ChainSelectorRow.tsx

@@ -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
 

src/components/NavBar/MenuDropdown.tsx

@@ -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'
 

src/components/NavBar/SearchBar.tsx

 // 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) => {

src/components/NavBar/SearchBarDropdown.tsx

@@ -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'

src/components/NavBar/SuggestionRow.tsx

@@ -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'

src/components/NavBar/index.tsx

@@ -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'

src/components/NavigationTabs/index.tsx

@@ -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'
 

src/components/NetworkAlert/NetworkAlert.tsx

@@ -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'

src/components/NumericalInput/index.tsx

 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 }>`

src/components/Polling/ChainConnectivityWarning.tsx

@@ -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`

src/components/Polling/index.tsx

@@ -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()

src/components/Popover/index.tsx

@@ -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 }>`

src/components/Popups/ClaimPopup.tsx

@@ -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 {

src/components/Popups/PopupContent.tsx

@@ -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'
 

src/components/Popups/index.tsx

 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'

src/components/PositionCard/Sushi.tsx

@@ -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'

src/components/PositionCard/V2.tsx

@@ -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'