chore: rm widget code (#3810)

* chore: rm widget tooling

* chore: rm widget components

* chore: rm widget theme

* chore: rm widget assets

* chore: rm widget business logic

* chore: rm widget meta

* chore: update yarn.lock

* chore: mv type to usage

.github/workflows/bundle.yaml

-name: Widgets
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
-
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Set up node
-        uses: actions/setup-node@v2
-        with:
-          node-version: 14
-          registry-url: https://registry.npmjs.org
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: Build
-        run: yarn widgets:build
\ No newline at end of file

.gitignore

@@ -19,8 +19,6 @@
 
 # builds
 /build
-/cosmos-export
-/dist
 /dts
 
 # misc

INTERFACE_README.md

-# Uniswap Interface
-
-An open source interface for Uniswap -- a protocol for decentralized exchange of Ethereum tokens.
-
-- Website: [uniswap.org](https://uniswap.org/)
-- Interface: [app.uniswap.org](https://app.uniswap.org)
-- Docs: [uniswap.org/docs/](https://docs.uniswap.org/)
-- Twitter: [@Uniswap](https://twitter.com/Uniswap)
-- Reddit: [/r/Uniswap](https://www.reddit.com/r/Uniswap/)
-- Email: [contact@uniswap.org](mailto:contact@uniswap.org)
-- Discord: [Uniswap](https://discord.gg/FCfyBSbCU5)
-- Whitepapers:
-  - [V1](https://hackmd.io/C-DvwDSfSxuh-Gd4WKE_ig)
-  - [V2](https://uniswap.org/whitepaper.pdf)
-  - [V3](https://uniswap.org/whitepaper-v3.pdf)
-
-## Accessing the Uniswap Interface
-
-To access the Uniswap Interface, use an IPFS gateway link from the
-[latest release](https://github.com/Uniswap/uniswap-interface/releases/latest),
-or visit [app.uniswap.org](https://app.uniswap.org).
-
-## Unsupported tokens
-
-Check out `useUnsupportedTokenList()` in [src/state/lists/hooks.ts](./src/state/lists/hooks.ts) for blocking tokens in your instance of the interface.
-
-You can block an entire list of tokens by passing in a tokenlist like [here](./src/constants/lists.ts) or you can block specific tokens by adding them to [unsupported.tokenlist.json](./src/constants/tokenLists/unsupported.tokenlist.json).
-
-## Contributions
-
-For steps on local deployment, development, and code contribution, please see [CONTRIBUTING](./CONTRIBUTING.md).
-
-## Accessing Uniswap V2
-
-The Uniswap Interface supports swapping, adding liquidity, removing liquidity and migrating liquidity for Uniswap protocol V2.
-
-- Swap on Uniswap V2: https://app.uniswap.org/#/swap?use=v2
-- View V2 liquidity: https://app.uniswap.org/#/pool/v2
-- Add V2 liquidity: https://app.uniswap.org/#/add/v2
-- Migrate V2 liquidity to V3: https://app.uniswap.org/#/migrate/v2
-
-## Accessing Uniswap V1
-
-The Uniswap V1 interface for mainnet and testnets is accessible via IPFS gateways
-linked from the [v1.0.0 release](https://github.com/Uniswap/uniswap-interface/releases/tag/v1.0.0).

README.md

-This repo is home to the Uniswap Widgets package and the web app interface [app.uniswap.org](https://app.uniswap.org).
-
 # Uniswap Labs Interface
 
 [![Unit Tests](https://github.com/Uniswap/interface/actions/workflows/unit-tests.yaml/badge.svg)](https://github.com/Uniswap/interface/actions/workflows/unit-tests.yaml)
@@ -8,14 +6,46 @@ This repo is home to the Uniswap Widgets package and the web app interface [app.
 [![Release](https://github.com/Uniswap/interface/actions/workflows/release.yaml/badge.svg)](https://github.com/Uniswap/interface/actions/workflows/release.yaml)
 [![Crowdin](https://badges.crowdin.net/uniswap-interface/localized.svg)](https://crowdin.com/project/uniswap-interface)
 
-The web application hosted at https://app.uniswap.org is a convenient way to access the core functionality of the Uniswap Protocol. 
+An open source interface for Uniswap -- a protocol for decentralized exchange of Ethereum tokens.
+
+- Website: [uniswap.org](https://uniswap.org/)
+- Interface: [app.uniswap.org](https://app.uniswap.org)
+- Docs: [uniswap.org/docs/](https://docs.uniswap.org/)
+- Twitter: [@Uniswap](https://twitter.com/Uniswap)
+- Reddit: [/r/Uniswap](https://www.reddit.com/r/Uniswap/)
+- Email: [contact@uniswap.org](mailto:contact@uniswap.org)
+- Discord: [Uniswap](https://discord.gg/FCfyBSbCU5)
+- Whitepapers:
+  - [V1](https://hackmd.io/C-DvwDSfSxuh-Gd4WKE_ig)
+  - [V2](https://uniswap.org/whitepaper.pdf)
+  - [V3](https://uniswap.org/whitepaper-v3.pdf)
+
+## Accessing the Uniswap Interface
+
+To access the Uniswap Interface, use an IPFS gateway link from the
+[latest release](https://github.com/Uniswap/uniswap-interface/releases/latest),
+or visit [app.uniswap.org](https://app.uniswap.org).
+
+## Unsupported tokens
+
+Check out `useUnsupportedTokenList()` in [src/state/lists/hooks.ts](./src/state/lists/hooks.ts) for blocking tokens in your instance of the interface.
+
+You can block an entire list of tokens by passing in a tokenlist like [here](./src/constants/lists.ts) or you can block specific tokens by adding them to [unsupported.tokenlist.json](./src/constants/tokenLists/unsupported.tokenlist.json).
+
+## Contributions
+
+For steps on local deployment, development, and code contribution, please see [CONTRIBUTING](./CONTRIBUTING.md).
 
-For documentation of the interface including how to contribute or access prior builds, please view the README here: [INTERFACE_README.md](./INTERFACE_README.md)
+## Accessing Uniswap V2
 
-# Uniswap Labs Widgets
+The Uniswap Interface supports swapping, adding liquidity, removing liquidity and migrating liquidity for Uniswap protocol V2.
 
-The `@uniswap/widgets` package is an npm package of React components used to provide subsets of the Uniswap Protocol functionality in a small and configurable user interface element.
+- Swap on Uniswap V2: https://app.uniswap.org/#/swap?use=v2
+- View V2 liquidity: https://app.uniswap.org/#/pool/v2
+- Add V2 liquidity: https://app.uniswap.org/#/add/v2
+- Migrate V2 liquidity to V3: https://app.uniswap.org/#/migrate/v2
 
-The npm package can be found here. [@uniswap/widgets](https://www.npmjs.com/package/@uniswap/widgets)
+## Accessing Uniswap V1
 
-For documentation of the widgets package, please view the README here: [WIDGETS_README.md](./WIDGETS_README.md).
+The Uniswap V1 interface for mainnet and testnets is accessible via IPFS gateways
+linked from the [v1.0.0 release](https://github.com/Uniswap/uniswap-interface/releases/tag/v1.0.0).
\ No newline at end of file

WIDGETS_README.md

-# Uniswap Labs Swap Widget
-
-The Swap Widget bundles the whole swapping experience into a single React component that developers can easily embed in their app with one line of code. 
-
-![swap widget screenshot](https://raw.githubusercontent.com/Uniswap/interface/main/src/assets/images/widget-screenshot.png)
-
-You can customize the theme (colors, fonts, border radius, and more) to match the style of your application. You can also configure your own default token list and optionally set a convenience fee on swaps executed through the widget on your site.
-
-## Installation
-
-Install the widgets library via `npm` or `yarn`. If you do not already use the widget's peerDependencies `redux` and `react-redux`, then you'll need to add them as well. 
-
-```js
-yarn add @uniswap/widgets redux react-redux
-```
-```js
-npm i --save @uniswap/widgets redux react-redux
-```
-
-## Documentation
-
-- [overview](https://docs.uniswap.org/sdk/widgets/swap-widget)
-- [api reference](https://docs.uniswap.org/sdk/widgets/swap-widget/api)
-
-## Example Apps
-
-Uniswap Labs maintains two demo apps in branches of the [widgets-demo](https://github.com/Uniswap/widgets-demo) repo:
-
-- [NextJS](https://github.com/Uniswap/widgets-demo/tree/nextjs)
-- [Create React App](https://github.com/Uniswap/widgets-demo/tree/cra)
-
-Others have also also released the widget in production to their userbase:
-
-- [OpenSea](https://opensea.io/)
-- [Friends With Benefits](https://www.fwb.help/)
-- [Oasis](https://oasis.app/)
-
-## Legal notice
-
-Uniswap Labs encourages integrators to evaluate their own regulatory obligations when integrating this widget into their products, including, but not limited to, those related to economic or trade sanctions compliance.

cosmos.config.json

-{
-  "watchDirs": [
-    "src"
-  ],
-  "webpack": {
-    "configPath": "react-scripts/config/webpack.config",
-    "overridePath": "cosmos.override.cjs"
-  },
-  "port": 5001
-}

cosmos.override.cjs

-/* eslint-disable @typescript-eslint/no-var-requires */
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const { DefinePlugin } = require('webpack')
-
-// Renders the cosmos fixtures in isolation, instead of using public/index.html.
-module.exports = (webpackConfig) => ({
-  ...webpackConfig,
-  plugins: webpackConfig.plugins.map((plugin) => {
-    if (plugin instanceof HtmlWebpackPlugin) {
-      return new HtmlWebpackPlugin({
-        templateContent: '<body></body>',
-      })
-    }
-    if (plugin instanceof DefinePlugin) {
-      return new DefinePlugin({
-        ...plugin.definitions,
-        'process.env': {
-          ...plugin.definitions['process.env'],
-          REACT_APP_IS_WIDGET: true,
-          REACT_APP_LOCALES: '"../locales"',
-        },
-      })
-    }
-    return plugin
-  }),
-})

package.json

@@ -44,16 +44,6 @@
     "@reach/dialog": "^0.10.3",
     "@reach/portal": "^0.10.3",
     "@react-hook/window-scroll": "^1.3.0",
-    "@rollup/plugin-alias": "^3.1.9",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-eslint": "^8.0.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-replace": "^3.0.1",
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@rollup/plugin-url": "^6.1.0",
-    "@svgr/rollup": "^6.2.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.2",
@@ -117,7 +107,6 @@
     "qs": "^6.9.4",
     "react": "^17.0.1",
     "react-confetti": "^6.0.0",
-    "react-cosmos": "^5.6.6",
     "react-dom": "^17.0.1",
     "react-ga4": "^1.4.1",
     "react-is": "^17.0.2",
@@ -129,14 +118,6 @@
     "react-use-gesture": "^6.0.14",
     "redux": "^4.1.2",
     "redux-localstorage-simple": "^2.3.1",
-    "rollup": "^2.63.0",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-dts": "^4.1.0",
-    "rollup-plugin-multi-input": "^1.3.1",
-    "rollup-plugin-node-externals": "^3.1.2",
-    "rollup-plugin-scss": "^3.0.0",
-    "rollup-plugin-typescript2": "^0.31.1",
     "sass": "^1.45.1",
     "serve": "^11.3.2",
     "start-server-and-test": "^1.11.0",
@@ -170,13 +151,10 @@
     "i18n:compile": "yarn i18n:extract && lingui compile",
     "i18n:pseudo": "lingui extract --locale pseudo && lingui compile",
     "prepare": "yarn contracts:compile && yarn graphql:generate && yarn i18n:compile",
-    "prepublishOnly": "yarn widgets:build",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=./custom-test-env.cjs",
-    "test:e2e": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'",
-    "widgets:start": "cosmos",
-    "widgets:build": "rollup --config --failAfterWarnings --configPlugin typescript2"
+    "test:e2e": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'"
   },
   "browserslist": {
     "production": [

rollup.config.ts

-/**
- * Bundles the widgets library, which is released independently of the interface application.
- * This library lives in src/lib, but shares code with the interface application.
- */
-
-import alias from '@rollup/plugin-alias'
-import babel from '@rollup/plugin-babel'
-import commonjs from '@rollup/plugin-commonjs'
-import json from '@rollup/plugin-json'
-import resolve from '@rollup/plugin-node-resolve'
-import replace from '@rollup/plugin-replace'
-import typescript from '@rollup/plugin-typescript'
-import url from '@rollup/plugin-url'
-import svgr from '@svgr/rollup'
-import path from 'path'
-import { RollupWarning } from 'rollup'
-import copy from 'rollup-plugin-copy'
-import del from 'rollup-plugin-delete'
-import dts from 'rollup-plugin-dts'
-// @ts-ignore // missing types
-import multi from 'rollup-plugin-multi-input'
-import externals from 'rollup-plugin-node-externals'
-import sass from 'rollup-plugin-scss'
-import { CompilerOptions } from 'typescript'
-
-const REPLACEMENTS = {
-  'process.env.REACT_APP_IS_WIDGET': true,
-  'process.env.REACT_APP_LOCALES': '"./locales"',
-  // esm requires fully-specified paths:
-  'react/jsx-runtime': 'react/jsx-runtime.js',
-}
-
-const EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx']
-const ASSET_EXTENSIONS = ['.png', '.svg']
-function isAsset(source: string) {
-  const extname = path.extname(source)
-  return extname && [...ASSET_EXTENSIONS, '.css', '.scss'].includes(extname)
-}
-
-function isEthers(source: string) {
-  // @ethersproject/* modules are provided by ethers, with the exception of experimental.
-  return source.startsWith('@ethersproject/') && !source.endsWith('experimental')
-}
-
-const TS_CONFIG = './tsconfig.lib.json'
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { baseUrl, paths }: CompilerOptions = require(TS_CONFIG).compilerOptions
-const aliases = Object.entries({ ...paths }).flatMap(([find, replacements]) => {
-  return replacements.map((replacement) => ({
-    find: path.dirname(find),
-    replacement: path.join(__dirname, baseUrl || '.', path.dirname(replacement)),
-  }))
-})
-
-const plugins = [
-  // Dependency resolution
-  resolve({ extensions: EXTENSIONS }), // resolves third-party modules within node_modules/
-  alias({ entries: aliases }), // resolves paths aliased through the tsconfig (babel does not use tsconfig path resolution)
-
-  // Source code transformation
-  replace({ ...REPLACEMENTS, preventAssignment: true }),
-  json(), // imports json as ES6; doing so enables type-checking and module resolution
-]
-
-const check = {
-  input: 'src/lib/index.tsx',
-  output: { file: 'dist/widgets.tsc', inlineDynamicImports: true },
-  external: (source: string) => isAsset(source) || isEthers(source),
-  plugins: [
-    externals({ exclude: ['constants'], deps: true, peerDeps: true }), // marks builtins, dependencies, and peerDependencies external
-    ...plugins,
-    typescript({ tsconfig: TS_CONFIG }),
-  ],
-  onwarn: squelchTranspilationWarnings, // this pipeline is only for typechecking and generating definitions
-}
-
-const type = {
-  input: 'dist/dts/lib/index.d.ts',
-  output: { file: 'dist/index.d.ts' },
-  external: (source: string) => isAsset(source) || isEthers(source),
-  plugins: [
-    externals({ exclude: ['constants'], deps: true, peerDeps: true }),
-    dts({ compilerOptions: { baseUrl: 'dist/dts' } }),
-    process.env.ROLLUP_WATCH ? undefined : del({ hook: 'buildEnd', targets: ['dist/widgets.tsc', 'dist/dts'] }),
-  ],
-}
-
-/**
- * This exports scheme works for nextjs and for CRA5.
- *
- * It will also work for CRA4 if you use direct imports:
- *   instead of `import { SwapWidget } from '@uniswap/widgets'`,
- *              `import { SwapWidget } from '@uniswap/widgets/dist/index.js'`.
- * I do not know why CRA4 does not seem to use exports for resolution.
- *
- * Note that chunks are enabled. This is so the tokenlist spec can be loaded async,
- * to improve first load time (due to ajv). Locales are also in separate chunks.
- *
- * Lastly, note that JSON and lingui are bundled into the library, as neither are fully
- * supported/compatible with ES Modules. Both _could_ be bundled only with esm, but this
- * yields a less complex pipeline.
- */
-
-const transpile = {
-  input: 'src/lib/index.tsx',
-  output: [
-    {
-      dir: 'dist',
-      format: 'esm',
-      sourcemap: false,
-    },
-    {
-      dir: 'dist/cjs',
-      entryFileNames: '[name].cjs',
-      chunkFileNames: '[name]-[hash].cjs',
-      format: 'cjs',
-      sourcemap: false,
-    },
-  ],
-  external: isEthers,
-  plugins: [
-    externals({
-      exclude: [
-        'constants',
-        /@lingui\/(core|react)/, // @lingui incorrectly exports esm, so it must be bundled in
-        /\.json$/, // esm does not support JSON loading, so it must be bundled in
-      ],
-      deps: true,
-      peerDeps: true,
-    }),
-    ...plugins,
-
-    // Source code transformation
-    url({ include: ASSET_EXTENSIONS.map((extname) => '**/*' + extname), limit: Infinity }), // imports assets as data URIs
-    svgr({ exportType: 'named', svgo: false }), // imports svgs as React components
-    sass({ output: 'dist/fonts.css' }), // generates fonts.css
-    commonjs(), // transforms cjs dependencies into tree-shakeable ES modules
-
-    babel({
-      babelHelpers: 'runtime',
-      presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }], '@babel/preset-typescript'],
-      extensions: EXTENSIONS,
-      plugins: [
-        'macros', // enables @lingui and styled-components macros
-        '@babel/plugin-transform-runtime', // embeds the babel runtime for library distribution
-      ],
-    }),
-  ],
-  onwarn: squelchTypeWarnings, // this pipeline is only for transpilation
-}
-
-const locales = {
-  input: 'src/locales/*.js',
-  output: [
-    {
-      dir: 'dist',
-      format: 'esm',
-      sourcemap: false,
-    },
-  ],
-  plugins: [
-    copy({
-      copyOnce: true,
-      targets: [{ src: 'src/locales/*.js', dest: 'dist/cjs/locales', rename: (name) => `${name}.cjs` }],
-    }),
-    commonjs(),
-    multi(),
-  ],
-}
-
-const config = [check, type, transpile, locales]
-export default config
-
-function squelchTranspilationWarnings(warning: RollupWarning, warn: (warning: RollupWarning) => void) {
-  if (warning.pluginCode === 'TS5055') return
-  warn(warning)
-}
-
-function squelchTypeWarnings(warning: RollupWarning, warn: (warning: RollupWarning) => void) {
-  if (warning.code === 'UNUSED_EXTERNAL_IMPORT') return
-  warn(warning)
-}

src/components/RoutingDiagram/RoutingDiagram.tsx

@@ -5,8 +5,8 @@ import Badge from 'components/Badge'
 import CurrencyLogo from 'components/CurrencyLogo'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
 import Row, { AutoRow } from 'components/Row'
+import { RoutingDiagramEntry } from 'components/swap/SwapRoute'
 import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
-import { RoutingDiagramEntry } from 'lib/components/Swap/RoutingDiagram/utils'
 import { Box } from 'rebass'
 import styled from 'styled-components/macro'
 import { ThemedText, Z_INDEX } from 'theme'

src/components/swap/SwapRoute.tsx

 import { Trans } from '@lingui/macro'
-import { Currency, TradeType } from '@uniswap/sdk-core'
+import { Protocol } from '@uniswap/router-sdk'
+import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
+import { Pair } from '@uniswap/v2-sdk'
+import { FeeAmount } from '@uniswap/v3-sdk'
 import AnimatedDropdown from 'components/AnimatedDropdown'
 import { AutoColumn } from 'components/Column'
 import { LoadingRows } from 'components/Loader/styled'
@@ -8,7 +11,6 @@ import { AutoRow, RowBetween } from 'components/Row'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import useAutoRouterSupported from 'hooks/useAutoRouterSupported'
-import { getTokenPath } from 'lib/components/Swap/RoutingDiagram/utils'
 import { memo, useState } from 'react'
 import { Plus } from 'react-feather'
 import { InterfaceTrade } from 'state/routing/types'
@@ -106,3 +108,41 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
     </Wrapper>
   )
 })
+
+export interface RoutingDiagramEntry {
+  percent: Percent
+  path: [Currency, Currency, FeeAmount][]
+  protocol: Protocol
+}
+
+const V2_DEFAULT_FEE_TIER = 3000
+
+/**
+ * Loops through all routes on a trade and returns an array of diagram entries.
+ */
+export function getTokenPath(trade: InterfaceTrade<Currency, Currency, TradeType>): RoutingDiagramEntry[] {
+  return trade.swaps.map(({ route: { path: tokenPath, pools, protocol }, inputAmount, outputAmount }) => {
+    const portion =
+      trade.tradeType === TradeType.EXACT_INPUT
+        ? inputAmount.divide(trade.inputAmount)
+        : outputAmount.divide(trade.outputAmount)
+    const percent = new Percent(portion.numerator, portion.denominator)
+    const path: RoutingDiagramEntry['path'] = []
+    for (let i = 0; i < pools.length; i++) {
+      const nextPool = pools[i]
+      const tokenIn = tokenPath[i]
+      const tokenOut = tokenPath[i + 1]
+      const entry: RoutingDiagramEntry['path'][0] = [
+        tokenIn,
+        tokenOut,
+        nextPool instanceof Pair ? V2_DEFAULT_FEE_TIER : nextPool.fee,
+      ]
+      path.push(entry)
+    }
+    return {
+      percent,
+      path,
+      protocol,
+    }
+  })
+}

src/hooks/useActiveWeb3React.ts

 /* eslint-disable react-hooks/rules-of-hooks */
 import { Web3Provider } from '@ethersproject/providers'
-import { default as useWidgetsWeb3React } from 'lib/hooks/useActiveWeb3React'
 import { useWeb3React } from 'web3-react-core'
 
 import { NetworkContextName } from '../constants/misc'
 
 export default function useActiveWeb3React() {
-  if (process.env.REACT_APP_IS_WIDGET) {
-    return useWidgetsWeb3React()
-  }
-
   const interfaceContext = useWeb3React<Web3Provider>()
   const interfaceNetworkContext = useWeb3React<Web3Provider>(
     process.env.REACT_APP_IS_WIDGET ? undefined : NetworkContextName

src/lib/.eslintrc.json

-{
-  "extends": ["../../.eslintrc.json"],
-  "plugins": ["better-styled-components"],
-  "rules": {
-    "better-styled-components/sort-declarations-alphabetically": "error",
-    "no-restricted-imports": [
-      "error",
-      {
-        "paths": [
-          {
-            "name": "react-feather",
-            "message": "Please import from lib/icons to ensure performant usage."
-          },
-          {
-            "name": "@uniswap/smart-order-router",
-            "message": "Forbidden import; smart-order-router is lazy-loaded."
-          }
-        ],
-        "patterns": [
-          {
-            "group": ["styled-components"],
-            "message": "Please import styled from lib/theme to get the correct typings."
-          }
-        ]
-      }
-    ]
-  }
-}

src/lib/assets/fonts.scss

-// Use Inter mixin to set font-display: block.
-@use "@fontsource/inter/scss/mixins" as Inter;
-@include Inter.fontFace(
-    $fontName: 'Inter',
-    $weight: 400,
-    $display: block,
-);
-@include Inter.fontFace(
-    $fontName: 'Inter',
-    $weight: 500,
-    $display: block,
-);
-@include Inter.fontFace(
-    $fontName: 'Inter',
-    $weight: 600,
-    $display: block,
-);
-@include Inter.fontFaceVariable(
-    $display: block,
-);
-
-@import "~@fontsource/ibm-plex-mono/400.css";
\ No newline at end of file

src/lib/assets/svg/auto_router.svg

-<svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<defs>
- <linearGradient id="gradient" x1="0" y1="0" x2="1" y2="0" gradientTransform="rotate(95)">
-    <stop id="stop1" offset="0" stop-color="#2274E2"/>
-    <stop id="stop1" offset="0.5" stop-color="#2274E2"/>
-    <stop id="stop2" offset="1" stop-color="#3FB672" />
-  </linearGradient>
-  </defs>
-<path d="M16 16C10 16 9 10 5 10M16 16C16 17.6569 17.3431 19 19 19C20.6569 19 22 17.6569 22 16C22 14.3431 20.6569 13 19 13C17.3431 13 16 14.3431 16 16ZM5 10C9 10 10 4 16 4M5 10H1.5M16 4C16 5.65685 17.3431 7 19 7C20.6569 7 22 5.65685 22 4C22 2.34315 20.6569 1 19 1C17.3431 1 16 2.34315 16 4Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="url(#gradient)" />
-</svg>
\ No newline at end of file

src/lib/assets/svg/check.svg

-<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="10" cy="10" r="10" />
-    <path d="M14 7L8.5 12.5L6 10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

src/lib/assets/svg/expando.svg

-<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" xmlns="http://www.w3.org/2000/svg">
-    <polyline class="left" points="18 15 12 9"></polyline>
-    <polyline class="right" points="12 9 6 15"></polyline>
-</svg>

src/lib/assets/svg/inline_spinner.svg

-    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <mask id="mask">
-        <circle cx="12" cy="12" r="10" fill="black" stroke="black" stroke-width="2" />
-        <rect width="12" height="12" fill="white" stroke-width="0" />
-        <circle cx="2" cy="12" r="1" fill="white" stroke-width="0" />
-        <circle cx="12" cy="2" r="1" fill="white" stroke-width="0" />
-      </mask>
-      <circle
-        cx="12"
-        cy="12"
-        r="6"
-        stroke="none"
-      />
-      <circle
-        id="track"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        fill="none"
-      />
-      <circle
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        fill="none"
-        mask="url(#mask)"
-      />
-    </svg>
\ No newline at end of file

src/lib/assets/svg/logo.svg

-<svg viewBox="0 0 14 15" fill="black" xmlns="http://www.w3.org/2000/svg">
-    <g>
-        <path d="M4.15217 1.55141C3.96412 1.52242 3.95619 1.51902 4.04468 1.5055C4.21427 1.47958 4.61472 1.51491 4.89067 1.58012C5.53489 1.73232 6.12109 2.12221 6.74683 2.81466L6.91307 2.99862L7.15088 2.96062C8.15274 2.8006 9.17194 2.92778 10.0244 3.31918C10.2589 3.42686 10.6287 3.64121 10.6749 3.69629C10.6896 3.71384 10.7166 3.82684 10.7349 3.94742C10.7982 4.36458 10.7665 4.68434 10.6382 4.92317C10.5683 5.05313 10.5644 5.09432 10.6114 5.20554C10.6489 5.2943 10.7534 5.35999 10.8569 5.35985C11.0687 5.35956 11.2968 5.0192 11.4024 4.54561L11.4444 4.3575L11.5275 4.45109C11.9835 4.96459 12.3417 5.66488 12.4032 6.16335L12.4192 6.29332L12.3426 6.17517C12.2107 5.97186 12.0781 5.83346 11.9084 5.72183C11.6024 5.52062 11.2789 5.45215 10.4222 5.40727C9.64839 5.36675 9.21045 5.30106 8.77621 5.16032C8.03738 4.9209 7.66493 4.60204 6.78729 3.4576C6.39748 2.94928 6.15654 2.66804 5.91687 2.44155C5.37228 1.92691 4.83716 1.65701 4.15217 1.55141Z"/>
-        <path d="M10.8494 2.68637C10.8689 2.34575 10.9153 2.12108 11.0088 1.9159C11.0458 1.83469 11.0804 1.76822 11.0858 1.76822C11.0911 1.76822 11.075 1.82816 11.05 1.90142C10.9821 2.10054 10.9709 2.3729 11.0177 2.68978C11.0771 3.09184 11.1109 3.14985 11.5385 3.58416C11.739 3.78788 11.9723 4.0448 12.0568 4.15511L12.2106 4.35568L12.0568 4.21234C11.8688 4.03705 11.4364 3.6952 11.3409 3.64633C11.2768 3.61356 11.2673 3.61413 11.2278 3.65321C11.1914 3.68922 11.1837 3.74333 11.1787 3.99915C11.1708 4.39786 11.1161 4.65377 10.9842 4.90965C10.9128 5.04805 10.9015 5.01851 10.9661 4.8623C11.0143 4.74566 11.0192 4.69439 11.0189 4.30842C11.0181 3.53291 10.9255 3.34647 10.3823 3.02709C10.2447 2.94618 10.0179 2.8295 9.87839 2.76778C9.73887 2.70606 9.62805 2.6523 9.63208 2.64828C9.64746 2.63307 10.1772 2.78675 10.3905 2.86828C10.7077 2.98954 10.76 3.00526 10.7985 2.99063C10.8244 2.98082 10.8369 2.90608 10.8494 2.68637Z"/>
-        <path d="M4.51745 4.01304C4.13569 3.49066 3.89948 2.68973 3.95062 2.091L3.96643 1.90572L4.05333 1.92148C4.21652 1.95106 4.49789 2.05515 4.62964 2.13469C4.9912 2.35293 5.14773 2.64027 5.30697 3.37811C5.35362 3.59423 5.41482 3.8388 5.44298 3.9216C5.48831 4.05487 5.65962 4.36617 5.7989 4.56834C5.89922 4.71395 5.83258 4.78295 5.61082 4.76305C5.27215 4.73267 4.8134 4.41799 4.51745 4.01304Z"/>
-        <path d="M10.3863 7.90088C8.60224 7.18693 7.97389 6.56721 7.97389 5.52157C7.97389 5.36769 7.97922 5.24179 7.98571 5.24179C7.99221 5.24179 8.06124 5.29257 8.1391 5.35465C8.50088 5.64305 8.906 5.76623 10.0275 5.92885C10.6875 6.02455 11.0589 6.10185 11.4015 6.21477C12.4904 6.57371 13.1641 7.30212 13.3248 8.29426C13.3715 8.58255 13.3441 9.12317 13.2684 9.4081C13.2087 9.63315 13.0263 10.0388 12.9779 10.0544C12.9645 10.0587 12.9514 10.0076 12.9479 9.93809C12.9296 9.56554 12.7402 9.20285 12.4221 8.93116C12.0604 8.62227 11.5745 8.37633 10.3863 7.90088Z"/>
-        <path d="M9.13385 8.19748C9.11149 8.06527 9.07272 7.89643 9.04769 7.82228L9.00217 7.68748L9.08672 7.7818C9.20374 7.91233 9.2962 8.07937 9.37457 8.30185C9.43438 8.47165 9.44111 8.52215 9.44066 8.79807C9.4402 9.06896 9.43273 9.12575 9.3775 9.27858C9.29042 9.51959 9.18233 9.69048 9.00097 9.87391C8.67507 10.2036 8.25607 10.3861 7.65143 10.4618C7.54633 10.4749 7.24 10.4971 6.97069 10.511C6.292 10.5461 5.84531 10.6186 5.44393 10.7587C5.38623 10.7788 5.3347 10.7911 5.32947 10.7859C5.31323 10.7698 5.58651 10.6079 5.81223 10.4998C6.1305 10.3474 6.44733 10.2643 7.15719 10.1468C7.50785 10.0887 7.86998 10.0183 7.96194 9.99029C8.83033 9.72566 9.27671 9.04276 9.13385 8.19748Z"/>
-        <path d="M9.95169 9.64109C9.71465 9.13463 9.66022 8.64564 9.79009 8.18961C9.80399 8.14088 9.82632 8.101 9.83976 8.101C9.85319 8.101 9.90913 8.13105 9.96404 8.16777C10.0733 8.24086 10.2924 8.36395 10.876 8.68023C11.6043 9.0749 12.0196 9.3805 12.302 9.72965C12.5493 10.0354 12.7023 10.3837 12.776 10.8084C12.8177 11.0489 12.7932 11.6277 12.7311 11.8699C12.5353 12.6337 12.0802 13.2336 11.4311 13.5837C11.336 13.635 11.2506 13.6771 11.2414 13.6773C11.2321 13.6775 11.2668 13.5899 11.3184 13.4827C11.5367 13.029 11.5616 12.5877 11.3965 12.0965C11.2954 11.7957 11.0893 11.4287 10.6732 10.8084C10.1893 10.0873 10.0707 9.89539 9.95169 9.64109Z"/>
-        <path d="M3.25046 12.3737C3.91252 11.8181 4.73629 11.4234 5.48666 11.3022C5.81005 11.25 6.34877 11.2707 6.64823 11.3469C7.12824 11.469 7.55763 11.7425 7.78094 12.0683C7.99918 12.3867 8.09281 12.6642 8.19029 13.2816C8.22875 13.5252 8.27057 13.7697 8.28323 13.8251C8.35644 14.1451 8.4989 14.4008 8.67544 14.5293C8.95583 14.7333 9.43865 14.7459 9.91362 14.5618C9.99423 14.5305 10.0642 14.5089 10.0691 14.5138C10.0864 14.5308 9.84719 14.6899 9.67847 14.7737C9.45143 14.8864 9.2709 14.93 9.03102 14.93C8.59601 14.93 8.23486 14.7101 7.9335 14.2616C7.87419 14.1733 7.7409 13.909 7.63729 13.6741C7.3191 12.9528 7.16199 12.7331 6.79255 12.4926C6.47104 12.2834 6.05641 12.2459 5.74449 12.3979C5.33475 12.5976 5.22043 13.118 5.51389 13.4478C5.63053 13.5789 5.84803 13.6919 6.02588 13.7139C6.35861 13.7551 6.64455 13.5035 6.64455 13.1696C6.64455 12.9528 6.56071 12.8291 6.34966 12.7344C6.0614 12.6051 5.75156 12.7562 5.75304 13.0254C5.75368 13.1402 5.80396 13.2122 5.91971 13.2643C5.99397 13.2977 5.99569 13.3003 5.93514 13.2878C5.67066 13.2333 5.6087 12.9164 5.82135 12.706C6.07667 12.4535 6.60461 12.5649 6.78591 12.9097C6.86208 13.0545 6.87092 13.3429 6.80451 13.517C6.6559 13.9068 6.22256 14.1117 5.78297 14.0002C5.48368 13.9242 5.36181 13.842 5.00097 13.4726C4.37395 12.8306 4.13053 12.7062 3.22657 12.566L3.05335 12.5391L3.25046 12.3737Z"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M0.308383 0.883984C2.40235 3.40996 3.84457 4.45213 4.00484 4.67231C4.13717 4.85412 4.08737 5.01757 3.86067 5.14567C3.7346 5.21689 3.47541 5.28905 3.34564 5.28905C3.19887 5.28905 3.14847 5.23278 3.14847 5.23278C3.06337 5.15255 3.01544 5.16658 2.5784 4.39555C1.97166 3.45981 1.46389 2.68357 1.45004 2.67057C1.41801 2.64052 1.41856 2.64153 2.51654 4.59413C2.69394 5.0011 2.55182 5.15049 2.55182 5.20845C2.55182 5.32636 2.51946 5.38834 2.37311 5.55059C2.12914 5.8211 2.02008 6.12505 1.94135 6.7541C1.8531 7.45926 1.60492 7.95737 0.917156 8.80989C0.514562 9.30893 0.448686 9.4004 0.3471 9.60153C0.219144 9.85482 0.183961 9.99669 0.169701 10.3165C0.154629 10.6547 0.183983 10.8732 0.287934 11.1965C0.378939 11.4796 0.473932 11.6665 0.716778 12.0403C0.926351 12.3629 1.04702 12.6027 1.04702 12.6965C1.04702 12.7711 1.06136 12.7712 1.38611 12.6983C2.16328 12.5239 2.79434 12.2171 3.14925 11.8411C3.36891 11.6084 3.42048 11.4799 3.42215 11.1611C3.42325 10.9525 3.41587 10.9088 3.35914 10.7888C3.2668 10.5935 3.09869 10.4311 2.72817 10.1794C2.2427 9.84953 2.03534 9.58398 1.97807 9.21878C1.93108 8.91913 1.98559 8.70771 2.25416 8.14825C2.53214 7.56916 2.60103 7.32239 2.64763 6.73869C2.67773 6.36158 2.71941 6.21286 2.82842 6.09348C2.94212 5.969 3.04447 5.92684 3.32584 5.88863C3.78457 5.82635 4.07667 5.70839 4.31677 5.48849C4.52505 5.29772 4.61221 5.11391 4.62558 4.8372L4.63574 4.62747L4.51934 4.49259C4.09783 4.00411 0.0261003 0.5 0.000160437 0.5C-0.00538105 0.5 0.133325 0.672804 0.308383 0.883984ZM1.28364 10.6992C1.37894 10.5314 1.3283 10.3158 1.16889 10.2104C1.01827 10.1109 0.78428 10.1578 0.78428 10.2875C0.78428 10.3271 0.806303 10.3559 0.855937 10.3813C0.939514 10.424 0.945581 10.4721 0.879823 10.5703C0.81323 10.6698 0.818604 10.7573 0.894991 10.8167C1.0181 10.9125 1.19237 10.8598 1.28364 10.6992Z"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.92523 5.99865C4.70988 6.06439 4.50054 6.29124 4.43574 6.5291C4.39621 6.67421 4.41864 6.92875 4.47785 7.00736C4.57351 7.13433 4.66602 7.16778 4.91651 7.16603C5.40693 7.16263 5.83327 6.95358 5.88284 6.69224C5.92347 6.47801 5.73622 6.18112 5.4783 6.05078C5.34521 5.98355 5.06217 5.95688 4.92523 5.99865ZM5.49853 6.44422C5.57416 6.33741 5.54107 6.22198 5.41245 6.14391C5.1675 5.99525 4.79708 6.11827 4.79708 6.34826C4.79708 6.46274 4.99025 6.58765 5.16731 6.58765C5.28516 6.58765 5.44644 6.5178 5.49853 6.44422Z"/>
-    </g>
-</svg>

src/lib/assets/svg/spinner.svg

-    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <mask id="mask">
-        <circle cx="12" cy="12" r="10" stroke="white" stroke-width="2" />
-        <rect width="12" height="12" fill="black" stroke-width="0" />
-        <circle cx="2" cy="12" r="1" fill="white" stroke-width="0" />
-        <circle cx="12" cy="2" r="1" fill="white" stroke-width="0" />
-      </mask>
-      <circle
-        cx="12"
-        cy="12"
-        r="10"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        mask="url(#mask)"
-      />
-    </svg>
\ No newline at end of file

src/lib/assets/svg/wallet.svg

-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 7C2 5.89543 2.89543 5 4 5H20C21.1046 5 22 5.89543 22 7V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V7Z" stroke="currentColor" stroke-width="2"/>
-<path d="M4 19H20C21.1046 19 22 18.1046 22 17V14C22 12.8954 21.1046 12 20 12H16C15.4477 12 14.9935 12.4624 14.7645 12.965C14.4438 13.6688 13.789 14.5 12 14.5C10.29 14.5 9.48213 13.7406 9.1936 13.0589C8.96576 12.5206 8.49905 12 7.91447 12H4C2.89543 12 2 12.8954 2 14V17C2 18.1046 2.89543 19 4 19Z" fill="currentColor"/>
-<path d="M22 13V11C22 9.89543 21.1034 9 19.9989 9C14.0294 9 9.97062 9 4.00115 9C2.89658 9 2 9.89543 2 11V13" stroke="currentColor" stroke-width="2"/>
-</svg>

src/lib/components/ActionButton.tsx

-import { AlertTriangle, Icon, LargeIcon } from 'lib/icons'
-import styled, { Color, css, keyframes, ThemedText } from 'lib/theme'
-import { ReactNode, useMemo } from 'react'
-
-import Button from './Button'
-import Row from './Row'
-
-const StyledButton = styled(Button)`
-  border-radius: ${({ theme }) => theme.borderRadius * 0.75}em;
-  flex-grow: 1;
-  transition: background-color 0.25s ease-out, border-radius 0.25s ease-out, flex-grow 0.25s ease-out;
-
-  :disabled {
-    margin: -1px;
-  }
-`
-
-const ActionRow = styled(Row)``
-
-const grow = keyframes`
-  from {
-    opacity: 0;
-    width: 0;
-  }
-  to {
-    opacity: 1;
-    width: max-content;
-  }
-`
-
-const actionCss = css`
-  border: 1px solid ${({ theme }) => theme.outline};
-  padding: calc(0.25em - 1px);
-  padding-left: calc(0.75em - 1px);
-
-  ${ActionRow} {
-    animation: ${grow} 0.25s ease-in;
-    flex-grow: 1;
-    justify-content: flex-start;
-    white-space: nowrap;
-  }
-
-  ${StyledButton} {
-    border-radius: ${({ theme }) => theme.borderRadius}em;
-    flex-grow: 0;
-    padding: 1em;
-  }
-`
-
-export const Overlay = styled(Row)<{ hasAction: boolean }>`
-  border-radius: ${({ theme }) => theme.borderRadius}em;
-  flex-direction: row-reverse;
-  min-height: 3.5em;
-  transition: padding 0.25s ease-out;
-
-  ${({ hasAction }) => hasAction && actionCss}
-`
-
-export interface Action {
-  message: ReactNode
-  icon?: Icon
-  onClick?: () => void
-  children?: ReactNode
-}
-
-export interface BaseProps {
-  color?: Color
-  action?: Action
-}
-
-export type ActionButtonProps = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps>
-
-export default function ActionButton({ color = 'accent', disabled, action, onClick, children }: ActionButtonProps) {
-  const textColor = useMemo(() => (color === 'accent' && !disabled ? 'onAccent' : 'currentColor'), [color, disabled])
-  return (
-    <Overlay hasAction={Boolean(action)} flex align="stretch">
-      {(action ? action.onClick : true) && (
-        <StyledButton color={color} disabled={disabled} onClick={action?.onClick || onClick}>
-          <ThemedText.TransitionButton buttonSize={action ? 'medium' : 'large'} color={textColor}>
-            {action?.children || children}
-          </ThemedText.TransitionButton>
-        </StyledButton>
-      )}
-      {action && (
-        <ActionRow gap={0.5}>
-          <LargeIcon color="currentColor" icon={action.icon || AlertTriangle} />
-          <ThemedText.Subhead2>{action?.message}</ThemedText.Subhead2>
-        </ActionRow>
-      )}
-    </Overlay>
-  )
-}

src/lib/components/BrandedFooter.tsx

-import { Trans } from '@lingui/macro'
-import Row from 'lib/components/Row'
-import { Logo } from 'lib/icons'
-import styled, { brand, ThemedText } from 'lib/theme'
-import { memo } from 'react'
-
-import ExternalLink from './ExternalLink'
-
-const UniswapA = styled(ExternalLink)`
-  color: ${({ theme }) => theme.secondary};
-  cursor: pointer;
-  text-decoration: none;
-
-  ${Logo} {
-    fill: ${({ theme }) => theme.secondary};
-    height: 1em;
-    transition: transform 0.25s ease, fill 0.25s ease;
-    width: 1em;
-    will-change: transform;
-  }
-
-  :hover ${Logo} {
-    fill: ${brand};
-    transform: rotate(-5deg);
-  }
-`
-
-export default memo(function BrandedFooter() {
-  return (
-    <Row justify="center">
-      <UniswapA href={`https://uniswap.org/`}>
-        <Row gap={0.25}>
-          <Logo />
-          <ThemedText.Caption>
-            <Trans>Powered by the Uniswap protocol</Trans>
-          </ThemedText.Caption>
-        </Row>
-      </UniswapA>
-    </Row>
-  )
-})

src/lib/components/Button.tsx

-import { Icon } from 'lib/icons'
-import styled, { Color, css } from 'lib/theme'
-import { ComponentProps, forwardRef } from 'react'
-
-export const BaseButton = styled.button`
-  background-color: transparent;
-  border: none;
-  border-radius: 0.5em;
-  color: currentColor;
-  cursor: pointer;
-  font-size: inherit;
-  font-weight: inherit;
-  height: inherit;
-  line-height: inherit;
-  margin: 0;
-  padding: 0;
-
-  :enabled {
-    transition: filter 0.125s linear;
-  }
-
-  :disabled {
-    cursor: initial;
-    filter: saturate(0) opacity(0.4);
-  }
-`
-const transitionCss = css`
-  transition: background-color 0.125s linear, border-color 0.125s linear, filter 0.125s linear;
-`
-
-export default styled(BaseButton)<{ color?: Color; transition?: boolean }>`
-  border: 1px solid transparent;
-  color: ${({ color = 'interactive', theme }) => color === 'interactive' && theme.onInteractive};
-
-  :enabled {
-    background-color: ${({ color = 'interactive', theme }) => theme[color]};
-    ${({ transition = true }) => transition && transitionCss};
-  }
-
-  :enabled:hover {
-    background-color: ${({ color = 'interactive', theme }) => theme.onHover(theme[color])};
-  }
-
-  :disabled {
-    border-color: ${({ theme }) => theme.outline};
-    color: ${({ theme }) => theme.secondary};
-  }
-`
-
-const transparentButton = (defaultColor: Color) => styled(BaseButton)<{ color?: Color }>`
-  color: ${({ color = defaultColor, theme }) => theme[color]};
-
-  :enabled:hover {
-    color: ${({ color = defaultColor, theme }) => theme.onHover(theme[color])};
-  }
-`
-
-export const TextButton = transparentButton('accent')
-
-const SecondaryButton = transparentButton('secondary')
-
-interface IconButtonProps {
-  icon: Icon
-  iconProps?: ComponentProps<Icon>
-}
-
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps & ComponentProps<typeof BaseButton>>(
-  function IconButton({ icon: Icon, iconProps, ...props }: IconButtonProps & ComponentProps<typeof BaseButton>, ref) {
-    return (
-      <SecondaryButton {...props} ref={ref}>
-        <Icon {...iconProps} />
-      </SecondaryButton>
-    )
-  }
-)

src/lib/components/Column.tsx

-import styled, { Color, css, Theme } from 'lib/theme'
-
-const Column = styled.div<{
-  align?: string
-  color?: Color
-  justify?: string
-  gap?: number
-  padded?: true
-  flex?: true
-  grow?: true
-  theme: Theme
-  css?: ReturnType<typeof css>
-}>`
-  align-items: ${({ align }) => align ?? 'center'};
-  color: ${({ color, theme }) => color && theme[color]};
-  display: ${({ flex }) => (flex ? 'flex' : 'grid')};
-  flex-direction: column;
-  flex-grow: ${({ grow }) => grow && 1};
-  gap: ${({ gap }) => gap && `${gap}em`};
-  grid-auto-flow: row;
-  grid-template-columns: 1fr;
-  justify-content: ${({ justify }) => justify ?? 'space-between'};
-  padding: ${({ padded }) => padded && '0.75em'};
-
-  ${({ css }) => css}
-`
-
-export default Column

src/lib/components/Dialog.tsx

-import 'wicg-inert'
-
-import { X } from 'lib/icons'
-import styled, { Color, Layer, ThemeProvider } from 'lib/theme'
-import { delayUnmountForAnimation } from 'lib/utils/animations'
-import { createContext, ReactElement, ReactNode, useContext, useEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
-
-import { IconButton } from './Button'
-import Column from './Column'
-import { default as BaseHeader } from './Header'
-import Rule from './Rule'
-
-// Include inert from wicg-inert
-declare global {
-  interface HTMLElement {
-    inert?: boolean
-  }
-}
-
-const Context = createContext({
-  element: null as HTMLElement | null,
-  active: false,
-  setActive: (active: boolean) => undefined as void,
-})
-
-interface ProviderProps {
-  value: HTMLElement | null
-  children: ReactNode
-}
-
-export function Provider({ value, children }: ProviderProps) {
-  // If a Dialog is active, mark the main content inert
-  const ref = useRef<HTMLDivElement>(null)
-  const [active, setActive] = useState(false)
-  const context = { element: value, active, setActive }
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.inert = active
-    }
-  }, [active])
-  return (
-    <div
-      ref={ref}
-      style={{ isolation: 'isolate' }} // creates a new stacking context, preventing the dialog from intercepting non-dialog clicks
-    >
-      <Context.Provider value={context}>{children}</Context.Provider>
-    </div>
-  )
-}
-
-const OnCloseContext = createContext<() => void>(() => void 0)
-
-interface HeaderProps {
-  title?: ReactElement
-  ruled?: boolean
-  children?: ReactNode
-}
-
-export function Header({ title, children, ruled }: HeaderProps) {
-  return (
-    <>
-      <Column>
-        <BaseHeader title={title}>
-          {children}
-          <IconButton color="primary" onClick={useContext(OnCloseContext)} icon={X} />
-        </BaseHeader>
-        {ruled && <Rule padded />}
-      </Column>
-    </>
-  )
-}
-
-export const Modal = styled.div<{ color: Color }>`
-  background-color: ${({ color, theme }) => theme[color]};
-  border-radius: ${({ theme }) => theme.borderRadius * 0.75}em;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  left: 0;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: ${Layer.DIALOG};
-`
-
-interface DialogProps {
-  color: Color
-  children: ReactNode
-  onClose?: () => void
-}
-
-export default function Dialog({ color, children, onClose = () => void 0 }: DialogProps) {
-  const context = useContext(Context)
-  useEffect(() => {
-    context.setActive(true)
-    return () => context.setActive(false)
-  }, [context])
-
-  const modal = useRef<HTMLDivElement>(null)
-  useEffect(() => delayUnmountForAnimation(modal), [])
-
-  useEffect(() => {
-    const close = (e: KeyboardEvent) => e.key === 'Escape' && onClose?.()
-    document.addEventListener('keydown', close, true)
-    return () => document.removeEventListener('keydown', close, true)
-  }, [onClose])
-  return (
-    context.element &&
-    createPortal(
-      <ThemeProvider>
-        <OnCloseContext.Provider value={onClose}>
-          <Modal color={color} ref={modal}>
-            {children}
-          </Modal>
-        </OnCloseContext.Provider>
-      </ThemeProvider>,
-      context.element
-    )
-  )
-}

src/lib/components/Error/ErrorBoundary.tsx

-import { Trans } from '@lingui/macro'
-import React, { ErrorInfo } from 'react'
-
-import Dialog from '../Dialog'
-import ErrorDialog from './ErrorDialog'
-
-export type ErrorHandler = (error: Error, info: ErrorInfo) => void
-
-interface ErrorBoundaryProps {
-  onError?: ErrorHandler
-}
-
-type ErrorBoundaryState = {
-  error: Error | null
-}
-
-export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props)
-    this.state = { error: null }
-  }
-
-  static getDerivedStateFromError(error: Error) {
-    return { error }
-  }
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    this.props.onError?.(error, errorInfo)
-  }
-
-  render() {
-    if (this.state.error) {
-      return (
-        <Dialog color="dialog">
-          <ErrorDialog
-            error={this.state.error}
-            header={<Trans>Something went wrong.</Trans>}
-            action={<Trans>Reload the page</Trans>}
-            onClick={() => window.location.reload()}
-          />
-        </Dialog>
-      )
-    }
-    return this.props.children
-  }
-}

src/lib/components/Error/ErrorDialog.tsx

-import { Trans } from '@lingui/macro'
-import ActionButton from 'lib/components/ActionButton'
-import Column from 'lib/components/Column'
-import Expando from 'lib/components/Expando'
-import { AlertTriangle, Icon, LargeIcon } from 'lib/icons'
-import styled, { Color, ThemedText } from 'lib/theme'
-import { ReactNode, useCallback, useState } from 'react'
-
-const HeaderIcon = styled(LargeIcon)`
-  flex-grow: 1;
-  transition: height 0.25s, width 0.25s;
-
-  svg {
-    transition: height 0.25s, width 0.25s;
-  }
-`
-
-interface StatusHeaderProps {
-  icon: Icon
-  iconColor?: Color
-  iconSize?: number
-  children: ReactNode
-}
-
-export function StatusHeader({ icon: Icon, iconColor, iconSize = 4, children }: StatusHeaderProps) {
-  return (
-    <>
-      <Column flex style={{ flexGrow: 1 }}>
-        <HeaderIcon icon={Icon} color={iconColor} size={iconSize} />
-        <Column gap={0.75} flex style={{ textAlign: 'center' }}>
-          {children}
-        </Column>
-      </Column>
-    </>
-  )
-}
-
-const ErrorHeader = styled(Column)<{ open: boolean }>`
-  transition: gap 0.25s;
-
-  div:last-child {
-    max-height: ${({ open }) => (open ? 0 : 60 / 14)}em; // 3 * line-height
-    overflow-y: hidden;
-    transition: max-height 0.25s;
-  }
-`
-
-interface ErrorDialogProps {
-  header?: ReactNode
-  error: Error
-  action: ReactNode
-  onClick: () => void
-}
-
-export default function ErrorDialog({ header, error, action, onClick }: ErrorDialogProps) {
-  const [open, setOpen] = useState(false)
-  const onExpand = useCallback(() => setOpen((open) => !open), [])
-
-  return (
-    <Column flex padded gap={0.75} align="stretch" style={{ height: '100%' }}>
-      <StatusHeader icon={AlertTriangle} iconColor="error" iconSize={open ? 3 : 4}>
-        <ErrorHeader gap={open ? 0 : 0.75} open={open}>
-          <ThemedText.Subhead1>
-            <Trans>Something went wrong.</Trans>
-          </ThemedText.Subhead1>
-          <ThemedText.Body2>{header}</ThemedText.Body2>
-        </ErrorHeader>
-      </StatusHeader>
-      <Column gap={open ? 0 : 0.75} style={{ transition: 'gap 0.25s' }}>
-        <Expando title={<Trans>Error details</Trans>} open={open} onExpand={onExpand} height={7.5}>
-          <ThemedText.Code userSelect>
-            {error.name}
-            {error.message ? `: ${error.message}` : ''}
-          </ThemedText.Code>
-        </Expando>
-        <ActionButton onClick={onClick}>{action}</ActionButton>
-      </Column>
-    </Column>
-  )
-}

src/lib/components/EtherscanLink.tsx

-import { SupportedChainId } from 'constants/chains'
-import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
-import { Link } from 'lib/icons'
-import styled, { Color } from 'lib/theme'
-import { ReactNode, useMemo } from 'react'
-import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
-
-import ExternalLink from './ExternalLink'
-import Row from './Row'
-
-const StyledExternalLink = styled(ExternalLink)<{ color: Color }>`
-  color: ${({ theme, color }) => theme[color]};
-  text-decoration: none;
-`
-
-interface EtherscanLinkProps {
-  type: ExplorerDataType
-  data?: string
-  color?: Color
-  children: ReactNode
-}
-
-export default function EtherscanLink({ data, type, color = 'currentColor', children }: EtherscanLinkProps) {
-  const { chainId } = useActiveWeb3React()
-  const url = useMemo(
-    () => data && getExplorerLink(chainId || SupportedChainId.MAINNET, data, type),
-    [chainId, data, type]
-  )
-
-  return (
-    <StyledExternalLink href={url} color={color} target="_blank">
-      <Row gap={0.25}>
-        {children}
-        {url && <Link />}
-      </Row>
-    </StyledExternalLink>
-  )
-}

src/lib/components/Expando.tsx

-import { IconButton } from 'lib/components/Button'
-import Column from 'lib/components/Column'
-import Row from 'lib/components/Row'
-import Rule from 'lib/components/Rule'
-import useScrollbar from 'lib/hooks/useScrollbar'
-import { Expando as ExpandoIcon } from 'lib/icons'
-import styled from 'lib/theme'
-import { PropsWithChildren, ReactNode, useState } from 'react'
-
-const HeaderColumn = styled(Column)`
-  transition: gap 0.25s;
-`
-
-const ExpandoColumn = styled(Column)<{ height: number; open: boolean }>`
-  height: ${({ height, open }) => (open ? height : 0)}em;
-  overflow: hidden;
-  position: relative;
-  transition: height 0.25s, padding 0.25s;
-
-  :after {
-    background: linear-gradient(transparent, ${({ theme }) => theme.dialog});
-    bottom: 0;
-    content: '';
-    height: 0.75em;
-    pointer-events: none;
-    position: absolute;
-    width: calc(100% - 1em);
-  }
-`
-
-const InnerColumn = styled(Column)<{ height: number }>`
-  height: ${({ height }) => height}em;
-  padding: 0.5em 0;
-`
-
-interface ExpandoProps {
-  title: ReactNode
-  open: boolean
-  onExpand: () => void
-  // The absolute height of the expanded container, in em.
-  height: number
-}
-
-/** A scrollable Expando with an absolute height. */
-export default function Expando({ title, open, onExpand, height, children }: PropsWithChildren<ExpandoProps>) {
-  const [scrollingEl, setScrollingEl] = useState<HTMLDivElement | null>(null)
-  const scrollbar = useScrollbar(scrollingEl)
-  return (
-    <Column>
-      <HeaderColumn gap={open ? 0.5 : 0.75}>
-        <Rule />
-        <Row>
-          {title}
-          <IconButton color="secondary" onClick={onExpand} icon={ExpandoIcon} iconProps={{ open }} />
-        </Row>
-        <Rule />
-      </HeaderColumn>
-      <ExpandoColumn open={open} height={height}>
-        <InnerColumn flex align="stretch" height={height} ref={setScrollingEl} css={scrollbar}>
-          {children}
-        </InnerColumn>
-      </ExpandoColumn>
-    </Column>
-  )
-  return null
-}

src/lib/components/ExternalLink.tsx

-import { HTMLProps } from 'react'
-
-/**
- * Outbound link
- */
-export default function ExternalLink({
-  target = '_blank',
-  href,
-  rel = 'noopener noreferrer',
-  ...rest
-}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href?: string }) {
-  return (
-    <a target={target} rel={rel} href={href} {...rest}>
-      {rest.children}
-    </a>
-  )
-}

src/lib/components/Header.tsx

-import { largeIconCss } from 'lib/icons'
-import styled, { ThemedText } from 'lib/theme'
-import { ReactElement, ReactNode } from 'react'
-
-import Row from './Row'
-
-const HeaderRow = styled(Row)`
-  height: 1.75em;
-  margin: 0 0.75em 0.75em;
-  padding-top: 0.5em;
-  ${largeIconCss}
-`
-
-export interface HeaderProps {
-  title?: ReactElement
-  children: ReactNode
-}
-
-export default function Header({ title, children }: HeaderProps) {
-  return (
-    <HeaderRow iconSize={1.2}>
-      <Row gap={0.5}>{title && <ThemedText.Subhead1>{title}</ThemedText.Subhead1>}</Row>
-      <Row gap={1}>{children}</Row>
-    </HeaderRow>
-  )
-}

src/lib/components/Input.tsx

-import { loadingOpacity } from 'lib/css/loading'
-import styled, { css } from 'lib/theme'
-import { transparentize } from 'polished'
-import { ChangeEvent, forwardRef, HTMLProps, useCallback } from 'react'
-
-const Input = styled.input`
-  -webkit-appearance: textfield;
-  background-color: transparent;
-  border: none;
-  color: currentColor;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-  margin: 0;
-  outline: none;
-  overflow: hidden;
-  padding: 0;
-  text-align: left;
-  text-overflow: ellipsis;
-  width: 100%;
-
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  [type='number'] {
-    -moz-appearance: textfield;
-  }
-
-  ::-webkit-outer-spin-button,
-  ::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-  }
-
-  ::placeholder {
-    color: ${({ theme }) => theme.secondary};
-  }
-
-  :enabled {
-    transition: color 0.125s linear;
-  }
-
-  :disabled {
-    // Overrides WebKit's override of input:disabled color.
-    -webkit-text-fill-color: ${({ theme }) => transparentize(1 - loadingOpacity, theme.primary)};
-    color: ${({ theme }) => transparentize(1 - loadingOpacity, theme.primary)};
-  }
-`
-
-export default Input
-
-interface StringInputProps extends Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'as' | 'value'> {
-  value: string
-  onChange: (input: string) => void
-}
-
-export const StringInput = forwardRef<HTMLInputElement, StringInputProps>(function StringInput(
-  { value, onChange, ...props }: StringInputProps,
-  ref
-) {
-  return (
-    <Input
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      // universal input options
-      inputMode="text"
-      autoComplete="off"
-      autoCorrect="off"
-      // text-specific options
-      type="text"
-      placeholder={props.placeholder || '-'}
-      minLength={1}
-      spellCheck="false"
-      ref={ref as any}
-      {...props}
-    />
-  )
-})
-
-interface NumericInputProps extends Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'as' | 'value'> {
-  value: string
-  onChange: (input: string) => void
-}
-
-interface EnforcedNumericInputProps extends NumericInputProps {
-  // Validates nextUserInput; returns stringified value, or null if invalid
-  enforcer: (nextUserInput: string) => string | null
-}
-
-const NumericInput = forwardRef<HTMLInputElement, EnforcedNumericInputProps>(function NumericInput(
-  { value, onChange, enforcer, pattern, ...props }: EnforcedNumericInputProps,
-  ref
-) {
-  const validateChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      const nextInput = enforcer(event.target.value.replace(/,/g, '.'))?.replace(/^0+$/, '0')
-      if (nextInput !== undefined) {
-        onChange(nextInput)
-      }
-    },
-    [enforcer, onChange]
-  )
-
-  return (
-    <Input
-      value={value}
-      onChange={validateChange}
-      // universal input options
-      inputMode="decimal"
-      autoComplete="off"
-      autoCorrect="off"
-      // text-specific options
-      type="text"
-      pattern={pattern}
-      placeholder={props.placeholder || '0'}
-      minLength={1}
-      maxLength={79}
-      spellCheck="false"
-      ref={ref as any}
-      {...props}
-    />
-  )
-})
-
-const integerRegexp = /^\d*$/
-const integerEnforcer = (nextUserInput: string) => {
-  if (nextUserInput === '' || integerRegexp.test(nextUserInput)) {
-    const nextInput = parseInt(nextUserInput)
-    return isNaN(nextInput) ? '' : nextInput.toString()
-  }
-  return null
-}
-export const IntegerInput = forwardRef(function IntegerInput(props: NumericInputProps, ref) {
-  return <NumericInput pattern="^[0-9]*$" enforcer={integerEnforcer} ref={ref as any} {...props} />
-})
-
-const decimalRegexp = /^\d*(?:[.])?\d*$/
-const decimalEnforcer = (nextUserInput: string) => {
-  if (nextUserInput === '') {
-    return ''
-  } else if (nextUserInput === '.') {
-    return '0.'
-  } else if (decimalRegexp.test(nextUserInput)) {
-    return nextUserInput
-  }
-  return null
-}
-export const DecimalInput = forwardRef(function DecimalInput(props: NumericInputProps, ref) {
-  return <NumericInput pattern="^[0-9]*[.,]?[0-9]*$" enforcer={decimalEnforcer} ref={ref as any} {...props} />
-})
-
-export const inputCss = css`
-  background-color: ${({ theme }) => theme.container};
-  border: 1px solid ${({ theme }) => theme.container};
-  border-radius: ${({ theme }) => theme.borderRadius}em;
-  cursor: text;
-  padding: calc(0.5em - 1px);
-
-  :hover:not(:focus-within) {
-    background-color: ${({ theme }) => theme.onHover(theme.container)};
-    border-color: ${({ theme }) => theme.onHover(theme.container)};
-  }
-
-  :focus-within {
-    border-color: ${({ theme }) => theme.active};
-  }
-`

src/lib/components/Popover.tsx

-import { Options, Placement } from '@popperjs/core'
-import styled, { Layer } from 'lib/theme'
-import maxSize from 'popper-max-size-modifier'
-import React, { createContext, useContext, useMemo, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
-import { usePopper } from 'react-popper'
-
-const BoundaryContext = createContext<HTMLDivElement | null>(null)
-
-export const BoundaryProvider = BoundaryContext.Provider
-
-const PopoverContainer = styled.div<{ show: boolean }>`
-  background-color: ${({ theme }) => theme.dialog};
-  border: 1px solid ${({ theme }) => theme.outline};
-  border-radius: 0.5em;
-  opacity: ${(props) => (props.show ? 1 : 0)};
-  padding: 10px 12px;
-  transition: visibility 0.25s linear, opacity 0.25s linear;
-  visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
-  z-index: ${Layer.TOOLTIP};
-`
-
-const Reference = styled.div`
-  align-self: flex-start;
-  display: inline-block;
-  height: 1em;
-`
-
-const Arrow = styled.div`
-  height: 8px;
-  width: 8px;
-  z-index: ${Layer.TOOLTIP};
-
-  ::before {
-    background: ${({ theme }) => theme.dialog};
-    border: 1px solid ${({ theme }) => theme.outline};
-    content: '';
-    height: 8px;
-    position: absolute;
-    transform: rotate(45deg);
-    width: 8px;
-  }
-
-  &.arrow-top {
-    bottom: -4px;
-    ::before {
-      border-radius: 1px;
-      border-left: none;
-      border-top: none;
-    }
-  }
-
-  &.arrow-bottom {
-    top: -5px; // includes -1px from border
-    ::before {
-      border-bottom: none;
-      border-right: none;
-      border-radius: 1px;
-    }
-  }
-
-  &.arrow-left {
-    right: -4px;
-    ::before {
-      border-bottom: none;
-      border-left: none;
-      border-radius: 1px;
-    }
-  }
-
-  &.arrow-right {
-    left: -5px; // includes -1px from border
-    ::before {
-      border-radius: 1px;
-      border-right: none;
-      border-top: none;
-    }
-  }
-`
-
-export interface PopoverProps {
-  content: React.ReactNode
-  show: boolean
-  children: React.ReactNode
-  placement: Placement
-  offset?: number
-  contained?: true
-}
-
-export default function Popover({ content, show, children, placement, offset, contained }: PopoverProps) {
-  const boundary = useContext(BoundaryContext)
-  const reference = useRef<HTMLDivElement>(null)
-
-  // Use callback refs to be notified when instantiated
-  const [popover, setPopover] = useState<HTMLDivElement | null>(null)
-  const [arrow, setArrow] = useState<HTMLDivElement | null>(null)
-
-  const options = useMemo((): Options => {
-    const modifiers: Options['modifiers'] = [
-      { name: 'offset', options: { offset: [4, offset || 4] } },
-      { name: 'arrow', options: { element: arrow, padding: 4 } },
-    ]
-    if (contained) {
-      modifiers.push(
-        { name: 'preventOverflow', options: { boundary, padding: 8 } },
-        { name: 'flip', options: { boundary, padding: 8 } },
-        { ...maxSize, options: { boundary, padding: 8 } },
-        {
-          name: 'applyMaxSize',
-          enabled: true,
-          phase: 'beforeWrite',
-          requires: ['maxSize'],
-          fn({ state }) {
-            const { width } = state.modifiersData.maxSize
-            state.styles.popper = {
-              ...state.styles.popper,
-              maxWidth: `${width}px`,
-            }
-          },
-        }
-      )
-    }
-    return {
-      placement,
-      strategy: 'absolute',
-      modifiers,
-    }
-  }, [offset, arrow, contained, placement, boundary])
-
-  const { styles, attributes } = usePopper(reference.current, popover, options)
-
-  return (
-    <>
-      <Reference ref={reference}>{children}</Reference>
-      {boundary &&
-        createPortal(
-          <PopoverContainer show={show} ref={setPopover} style={styles.popper} {...attributes.popper}>
-            {content}
-            <Arrow
-              className={`arrow-${attributes.popper?.['data-popper-placement'] ?? ''}`}
-              ref={setArrow}
-              style={styles.arrow}
-              {...attributes.arrow}
-            />
-          </PopoverContainer>,
-          boundary
-        )}
-    </>
-  )
-}

src/lib/components/RecentTransactionsDialog.tsx

-import { Trans } from '@lingui/macro'
-import { Currency } from '@uniswap/sdk-core'
-import { AlertTriangle, ArrowRight, CheckCircle, Spinner, Trash2 } from 'lib/icons'
-import styled, { ThemedText } from 'lib/theme'
-import { useMemo, useState } from 'react'
-
-import Button from './Button'
-import Column from './Column'
-import { Header } from './Dialog'
-import Row from './Row'
-import TokenImg from './TokenImg'
-
-interface ITokenAmount {
-  value: number
-  token: Currency
-}
-
-export enum TransactionStatus {
-  SUCCESS = 0,
-  ERROR,
-  PENDING,
-}
-
-interface ITransaction {
-  input: ITokenAmount
-  output: ITokenAmount
-  status: TransactionStatus
-}
-
-const TransactionRow = styled(Row)`
-  padding: 0.5em 1em;
-
-  :first-of-type {
-    padding-top: 1em;
-  }
-`
-
-function TokenAmount({ value: { value, token } }: { value: ITokenAmount }) {
-  return (
-    <Row gap={0.375}>
-      <TokenImg token={token} />
-      <ThemedText.Body2>
-        {value.toLocaleString('en')} {token.symbol}
-      </ThemedText.Body2>
-    </Row>
-  )
-}
-
-function Transaction({ tx }: { tx: ITransaction }) {
-  const statusIcon = useMemo(() => {
-    switch (tx.status) {
-      case TransactionStatus.SUCCESS:
-        return <CheckCircle color="success" />
-      case TransactionStatus.ERROR:
-        return <AlertTriangle color="error" />
-      case TransactionStatus.PENDING:
-        return <Spinner />
-    }
-  }, [tx.status])
-  return (
-    <TransactionRow grow>
-      <Row gap={0.75}>
-        <Row flex gap={0.5}>
-          <TokenAmount value={tx.input} />
-          <Row flex justify="flex-end" gap={0.5} grow>
-            <ArrowRight />
-            <TokenAmount value={tx.output} />
-          </Row>
-        </Row>
-        {statusIcon}
-      </Row>
-    </TransactionRow>
-  )
-}
-
-export default function RecentTransactionsDialog() {
-  const [txs, setTxs] = useState([])
-
-  return (
-    <>
-      <Header title={<Trans>Recent transactions</Trans>} ruled>
-        <Button>
-          <Trash2 onClick={() => setTxs([])} />
-        </Button>
-      </Header>
-      <Column>
-        {txs.map((tx, key) => (
-          <Transaction tx={tx} key={key} />
-        ))}
-      </Column>
-    </>
-  )
-}

src/lib/components/Row.tsx

-import styled, { Color, Theme } from 'lib/theme'
-import { Children, ReactNode } from 'react'
-
-const Row = styled.div<{
-  color?: Color
-  align?: string
-  justify?: string
-  pad?: number
-  gap?: number
-  flex?: true
-  grow?: true | 'first' | 'last'
-  children?: ReactNode
-  theme: Theme
-}>`
-  align-items: ${({ align }) => align ?? 'center'};
-  color: ${({ color, theme }) => color && theme[color]};
-  display: ${({ flex }) => (flex ? 'flex' : 'grid')};
-  flex-flow: wrap;
-  flex-grow: ${({ grow }) => grow && 1};
-  gap: ${({ gap }) => gap && `${gap}em`};
-  grid-auto-flow: column;
-  grid-template-columns: ${({ grow, children }) => {
-    if (grow === 'first') return '1fr'
-    if (grow === 'last') return `repeat(${Children.count(children) - 1}, auto) 1fr`
-    if (grow) return `repeat(${Children.count(children)}, 1fr)`
-    return undefined
-  }};
-  justify-content: ${({ justify }) => justify ?? 'space-between'};
-  padding: ${({ pad }) => pad && `0 ${pad}em`};
-`
-
-export default Row

src/lib/components/Rule.tsx

-import styled from 'lib/theme'
-
-const Rule = styled.hr<{ padded?: true; scrollingEdge?: 'top' | 'bottom' }>`
-  border: none;
-  border-bottom: 1px solid ${({ theme }) => theme.outline};
-  margin: 0 ${({ padded }) => (padded ? '0.75em' : 0)};
-  margin-bottom: ${({ scrollingEdge }) => (scrollingEdge === 'bottom' ? -1 : 0)}px;
-  margin-top: ${({ scrollingEdge }) => (scrollingEdge !== 'bottom' ? -1 : 0)}px;
-
-  // Integrators will commonly modify hr width - this overrides any modifications within the widget.
-  max-width: auto;
-  width: auto;
-`
-
-export default Rule

src/lib/components/Swap/Input.tsx

-import { useLingui } from '@lingui/react'
-import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
-import { loadingTransitionCss } from 'lib/css/loading'
-import {
-  useIsSwapFieldIndependent,
-  useSwapAmount,
-  useSwapCurrency,
-  useSwapCurrencyAmount,
-  useSwapInfo,
-} from 'lib/hooks/swap'
-import { usePrefetchCurrencyColor } from 'lib/hooks/useCurrencyColor'
-import { Field } from 'lib/state/swap'
-import styled, { ThemedText } from 'lib/theme'
-import { useMemo } from 'react'
-import { TradeState } from 'state/routing/types'
-import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
-import { maxAmountSpend } from 'utils/maxAmountSpend'
-
-import Column from '../Column'
-import Row from '../Row'
-import TokenImg from '../TokenImg'
-import TokenInput from './TokenInput'
-
-export const USDC = styled(Row)`
-  ${loadingTransitionCss};
-`
-
-export const Balance = styled(ThemedText.Body2)<{ focused: boolean }>`
-  opacity: ${({ focused }) => (focused ? 1 : 0)};
-  transition: opacity 0.25s ${({ focused }) => (focused ? 'ease-in' : 'ease-out')};
-`
-
-const InputColumn = styled(Column)<{ approved?: boolean }>`
-  margin: 0.75em;
-  position: relative;
-
-  ${TokenImg} {
-    filter: ${({ approved }) => (approved ? undefined : 'saturate(0) opacity(0.4)')};
-    transition: filter 0.25s;
-  }
-`
-
-export interface InputProps {
-  disabled: boolean
-  focused: boolean
-}
-
-interface UseFormattedFieldAmountArguments {
-  disabled: boolean
-  currencyAmount?: CurrencyAmount<Currency>
-  fieldAmount?: string
-}
-
-export function useFormattedFieldAmount({ disabled, currencyAmount, fieldAmount }: UseFormattedFieldAmountArguments) {
-  return useMemo(() => {
-    if (disabled) {
-      return ''
-    }
-    if (fieldAmount !== undefined) {
-      return fieldAmount
-    }
-    if (currencyAmount) {
-      return currencyAmount.toSignificant(6)
-    }
-    return ''
-  }, [disabled, currencyAmount, fieldAmount])
-}
-
-export default function Input({ disabled, focused }: InputProps) {
-  const { i18n } = useLingui()
-  const {
-    [Field.INPUT]: { balance, amount: tradeCurrencyAmount, usdc },
-    trade: { state: tradeState },
-  } = useSwapInfo()
-
-  const [inputAmount, updateInputAmount] = useSwapAmount(Field.INPUT)
-  const [inputCurrency, updateInputCurrency] = useSwapCurrency(Field.INPUT)
-  const inputCurrencyAmount = useSwapCurrencyAmount(Field.INPUT)
-
-  // extract eagerly in case of reversal
-  usePrefetchCurrencyColor(inputCurrency)
-
-  const isRouteLoading = disabled || tradeState === TradeState.SYNCING || tradeState === TradeState.LOADING
-  const isDependentField = !useIsSwapFieldIndependent(Field.INPUT)
-  const isLoading = isRouteLoading && isDependentField
-
-  //TODO(ianlapham): mimic logic from app swap page
-  const mockApproved = true
-
-  // account for gas needed if using max on native token
-  const max = useMemo(() => {
-    const maxAmount = maxAmountSpend(balance)
-    return maxAmount?.greaterThan(0) ? maxAmount.toExact() : undefined
-  }, [balance])
-
-  const balanceColor = useMemo(() => {
-    const insufficientBalance =
-      balance &&
-      (inputCurrencyAmount ? inputCurrencyAmount.greaterThan(balance) : tradeCurrencyAmount?.greaterThan(balance))
-    return insufficientBalance ? 'error' : undefined
-  }, [balance, inputCurrencyAmount, tradeCurrencyAmount])
-
-  const amount = useFormattedFieldAmount({
-    disabled,
-    currencyAmount: tradeCurrencyAmount,
-    fieldAmount: inputAmount,
-  })
-
-  return (
-    <InputColumn gap={0.5} approved={mockApproved}>
-      <TokenInput
-        currency={inputCurrency}
-        amount={amount}
-        max={max}
-        disabled={disabled}
-        onChangeInput={updateInputAmount}
-        onChangeCurrency={updateInputCurrency}
-        loading={isLoading}
-      >
-        <ThemedText.Body2 color="secondary" userSelect>
-          <Row>
-            <USDC isLoading={isRouteLoading}>{usdc ? `$${formatCurrencyAmount(usdc, 6, 'en', 2)}` : '-'}</USDC>
-            {balance && (
-              <Balance color={balanceColor} focused={focused}>
-                Balance: <span>{formatCurrencyAmount(balance, 4, i18n.locale)}</span>
-              </Balance>
-            )}
-          </Row>
-        </ThemedText.Body2>
-      </TokenInput>
-      <Row />
-    </InputColumn>
-  )
-}

src/lib/components/Swap/Output.tsx

-import { Trans } from '@lingui/macro'
-import { useLingui } from '@lingui/react'
-import { atom } from 'jotai'
-import { useAtomValue } from 'jotai/utils'
-import BrandedFooter from 'lib/components/BrandedFooter'
-import { useIsSwapFieldIndependent, useSwapAmount, useSwapCurrency, useSwapInfo } from 'lib/hooks/swap'
-import useCurrencyColor from 'lib/hooks/useCurrencyColor'
-import { Field } from 'lib/state/swap'
-import styled, { DynamicThemeProvider, ThemedText } from 'lib/theme'
-import { PropsWithChildren } from 'react'
-import { TradeState } from 'state/routing/types'
-import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
-
-import Column from '../Column'
-import Row from '../Row'
-import { Balance, InputProps, USDC, useFormattedFieldAmount } from './Input'
-import TokenInput from './TokenInput'
-
-export const colorAtom = atom<string | undefined>(undefined)
-
-const OutputColumn = styled(Column)<{ hasColor: boolean | null }>`
-  background-color: ${({ theme }) => theme.module};
-  border-radius: ${({ theme }) => theme.borderRadius - 0.25}em;
-  padding: 0.75em;
-  padding-bottom: 0.5em;
-  position: relative;
-
-  // Set transitions to reduce color flashes when switching color/token.
-  // When color loads, transition the background so that it transitions from the empty or last state, but not _to_ the empty state.
-  transition: ${({ hasColor }) => (hasColor ? 'background-color 0.25s ease-out' : undefined)};
-  > {
-    // When color is loading, delay the color/stroke so that it seems to transition from the last state.
-    transition: ${({ hasColor }) => (hasColor === null ? 'color 0.25s ease-in, stroke 0.25s ease-in' : undefined)};
-  }
-`
-
-export default function Output({ disabled, focused, children }: PropsWithChildren<InputProps>) {
-  const { i18n } = useLingui()
-
-  const {
-    [Field.OUTPUT]: { balance, amount: outputCurrencyAmount, usdc: outputUSDC },
-    trade: { state: tradeState },
-    impact,
-  } = useSwapInfo()
-
-  const [swapOutputAmount, updateSwapOutputAmount] = useSwapAmount(Field.OUTPUT)
-  const [swapOutputCurrency, updateSwapOutputCurrency] = useSwapCurrency(Field.OUTPUT)
-
-  const isRouteLoading = disabled || tradeState === TradeState.SYNCING || tradeState === TradeState.LOADING
-  const isDependentField = !useIsSwapFieldIndependent(Field.OUTPUT)
-  const isLoading = isRouteLoading && isDependentField
-
-  const overrideColor = useAtomValue(colorAtom)
-  const dynamicColor = useCurrencyColor(swapOutputCurrency)
-  const color = overrideColor || dynamicColor
-
-  // different state true/null/false allow smoother color transition
-  const hasColor = swapOutputCurrency ? Boolean(color) || null : false
-
-  const amount = useFormattedFieldAmount({
-    disabled,
-    currencyAmount: outputCurrencyAmount,
-    fieldAmount: swapOutputAmount,
-  })
-
-  return (
-    <DynamicThemeProvider color={color}>
-      <OutputColumn hasColor={hasColor} gap={0.5}>
-        <Row>
-          <ThemedText.Subhead1 color="secondary">
-            <Trans>For</Trans>
-          </ThemedText.Subhead1>
-        </Row>
-        <TokenInput
-          currency={swapOutputCurrency}
-          amount={amount}
-          disabled={disabled}
-          onChangeInput={updateSwapOutputAmount}
-          onChangeCurrency={updateSwapOutputCurrency}
-          loading={isLoading}
-        >
-          <ThemedText.Body2 color="secondary" userSelect>
-            <Row>
-              <USDC gap={0.5} isLoading={isRouteLoading}>
-                {outputUSDC ? `$${formatCurrencyAmount(outputUSDC, 6, 'en', 2)}` : '-'}{' '}
-                {impact && <ThemedText.Body2 color={impact.warning}>({impact.toString()})</ThemedText.Body2>}
-              </USDC>
-              {balance && (
-                <Balance focused={focused}>
-                  Balance: <span>{formatCurrencyAmount(balance, 4, i18n.locale)}</span>
-                </Balance>
-              )}
-            </Row>
-          </ThemedText.Body2>
-        </TokenInput>
-        {children}
-        <BrandedFooter />
-      </OutputColumn>
-    </DynamicThemeProvider>
-  )
-}

src/lib/components/Swap/Price.tsx

-import { useLingui } from '@lingui/react'
-import { Trade } from '@uniswap/router-sdk'
-import { Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
-import Row from 'lib/components/Row'
-import { ThemedText } from 'lib/theme'
-import formatLocaleNumber from 'lib/utils/formatLocaleNumber'
-import { useCallback, useMemo, useState } from 'react'
-import { formatCurrencyAmount, formatPrice } from 'utils/formatCurrencyAmount'
-
-import { TextButton } from '../Button'
-
-interface PriceProps {
-  trade: Trade<Currency, Currency, TradeType>
-  outputUSDC?: CurrencyAmount<Currency>
-}
-
-/** Displays the price of a trade. If outputUSDC is included, also displays the unit price. */
-export default function Price({ trade, outputUSDC }: PriceProps) {
-  const { i18n } = useLingui()
-  const { inputAmount, outputAmount, executionPrice } = trade
-
-  const [base, setBase] = useState<'input' | 'output'>('input')
-  const onClick = useCallback(() => setBase((base) => (base === 'input' ? 'output' : 'input')), [])
-
-  // Compute the usdc price from the output price, so that it aligns with the displayed price.
-  const { price, usdcPrice } = useMemo(() => {
-    switch (base) {
-      case 'input':
-        return {
-          price: executionPrice,
-          usdcPrice: outputUSDC?.multiply(inputAmount.decimalScale).divide(inputAmount),
-        }
-      case 'output':
-        return {
-          price: executionPrice.invert(),
-          usdcPrice: outputUSDC?.multiply(outputAmount.decimalScale).divide(outputAmount),
-        }
-    }
-  }, [base, executionPrice, inputAmount, outputAmount, outputUSDC])
-
-  return (
-    <TextButton color="primary" onClick={onClick}>
-      <ThemedText.Caption>
-        <Row gap={0.25}>
-          {formatLocaleNumber({ number: 1, sigFigs: 1, locale: i18n.locale })} {price.baseCurrency.symbol} ={' '}
-          {formatPrice(price, 6, i18n.locale)} {price.quoteCurrency.symbol}
-          {usdcPrice && (
-            <ThemedText.Caption color="secondary">(${formatCurrencyAmount(usdcPrice, 6, 'en', 2)})</ThemedText.Caption>
-          )}
-        </Row>
-      </ThemedText.Caption>
-    </TextButton>
-  )
-}

src/lib/components/Swap/ReverseButton.tsx

-import { useSwitchSwapCurrencies } from 'lib/hooks/swap'
-import { ArrowDown as ArrowDownIcon, ArrowUp as ArrowUpIcon } from 'lib/icons'
-import styled, { Layer } from 'lib/theme'
-import { useCallback, useState } from 'react'
-
-import Button from '../Button'
-import Row from '../Row'
-
-const ReverseRow = styled(Row)`
-  left: 50%;
-  position: absolute;
-  transform: translate(-50%, -50%);
-  z-index: ${Layer.OVERLAY};
-`
-
-const ArrowUp = styled(ArrowUpIcon)`
-  left: calc(50% - 0.37em);
-  position: absolute;
-  top: calc(50% - 0.82em);
-`
-
-const ArrowDown = styled(ArrowDownIcon)`
-  bottom: calc(50% - 0.82em);
-  position: absolute;
-  right: calc(50% - 0.37em);
-`
-
-const Overlay = styled.div`
-  background-color: ${({ theme }) => theme.container};
-  border-radius: ${({ theme }) => theme.borderRadius}em;
-  padding: 0.25em;
-`
-
-const StyledReverseButton = styled(Button)<{ turns: number }>`
-  border-radius: ${({ theme }) => theme.borderRadius * 0.75}em;
-  color: ${({ theme }) => theme.primary};
-  height: 2.5em;
-  position: relative;
-  width: 2.5em;
-
-  div {
-    transform: rotate(${({ turns }) => turns / 2}turn);
-    transition: transform 0.25s ease-in-out;
-    will-change: transform;
-  }
-`
-
-export default function ReverseButton({ disabled }: { disabled?: boolean }) {
-  const [turns, setTurns] = useState(0)
-  const switchCurrencies = useSwitchSwapCurrencies()
-  const onClick = useCallback(() => {
-    switchCurrencies()
-    setTurns((turns) => ++turns)
-  }, [switchCurrencies])
-
-  return (
-    <ReverseRow justify="center">
-      <Overlay>
-        <StyledReverseButton disabled={disabled} onClick={onClick} turns={turns}>
-          <div>
-            <ArrowUp strokeWidth={3} />
-            <ArrowDown strokeWidth={3} />
-          </div>
-        </StyledReverseButton>
-      </Overlay>
-    </ReverseRow>
-  )
-}

src/lib/components/Swap/RoutingDiagram/index.tsx

-import { Plural, Trans } from '@lingui/macro'
-import { Currency, TradeType } from '@uniswap/sdk-core'
-import { FeeAmount } from '@uniswap/v3-sdk'
-import { ReactComponent as DotLine } from 'assets/svg/dot_line.svg'
-import Column from 'lib/components/Column'
-import Row from 'lib/components/Row'
-import Rule from 'lib/components/Rule'
-import TokenImg from 'lib/components/TokenImg'
-import { AutoRouter } from 'lib/icons'
-import styled, { Layer, ThemedText } from 'lib/theme'
-import { useMemo } from 'react'
-import { InterfaceTrade } from 'state/routing/types'
-
-import { getTokenPath, RoutingDiagramEntry } from './utils'
-
-const StyledAutoRouterLabel = styled(ThemedText.ButtonSmall)`
-  @supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {
-    background-image: linear-gradient(90deg, #2172e5 0%, #54e521 163.16%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-`
-
-function Header({ routes }: { routes: RoutingDiagramEntry[] }) {
-  return (
-    <Row justify="space-between" gap={1}>
-      <ThemedText.Subhead2>
-        <Row gap={0.25}>
-          <AutoRouter />
-          <StyledAutoRouterLabel color="primary" lineHeight={'16px'}>
-            <Trans>Auto Router</Trans>
-          </StyledAutoRouterLabel>
-        </Row>
-      </ThemedText.Subhead2>
-      <ThemedText.Body2>
-        <Plural value={routes.length} _1="Best route via 1 hop" other="Best route via # hops" />
-      </ThemedText.Body2>
-    </Row>
-  )
-}
-
-const Dots = styled(DotLine)`
-  color: ${({ theme }) => theme.outline};
-  position: absolute;
-  z-index: ${Layer.UNDERLAYER};
-`
-
-const RouteRow = styled(Row)`
-  flex-wrap: nowrap;
-`
-
-const RouteNode = styled(Row)`
-  background-color: ${({ theme }) => theme.interactive};
-  border-radius: ${({ theme }) => `${(theme.borderRadius ?? 1) * 0.5}em`};
-  margin-left: 1.625em;
-  padding: 0.25em 0.375em;
-  width: max-content;
-`
-
-const RouteBadge = styled.div`
-  background-color: ${({ theme }) => theme.module};
-  border-radius: ${({ theme }) => `${(theme.borderRadius ?? 1) * 0.25}em`};
-  padding: 0.125em;
-`
-
-function RouteDetail({ route }: { route: RoutingDiagramEntry }) {
-  const protocol = route.protocol.toUpperCase()
-  return (
-    <RouteNode>
-      <Row gap={0.375}>
-        <ThemedText.Caption>{route.percent.toSignificant(2)}%</ThemedText.Caption>
-        <RouteBadge>
-          <ThemedText.Badge color="secondary">{protocol}</ThemedText.Badge>
-        </RouteBadge>
-      </Row>
-    </RouteNode>
-  )
-}
-
-const RoutePool = styled(RouteNode)`
-  margin: 0 0.75em;
-`
-
-function Pool({
-  originCurrency,
-  targetCurrency,
-  feeAmount,
-}: {
-  originCurrency: Currency
-  targetCurrency: Currency
-  feeAmount: FeeAmount
-}) {
-  return (
-    <RoutePool>
-      <ThemedText.Caption>
-        <Row gap={0.25}>
-          <TokenImg token={originCurrency} />
-          <TokenImg token={targetCurrency} style={{ marginLeft: '-0.65em' }} />
-          {feeAmount / 10_000}%
-        </Row>
-      </ThemedText.Caption>
-    </RoutePool>
-  )
-}
-
-function Route({ route }: { route: RoutingDiagramEntry }) {
-  const [originCurrency] = route.path[0]
-  const [, targetCurrency] = route.path[route.path.length - 1]
-
-  return (
-    <Row align="center" style={{ gridTemplateColumns: '1em 1fr 1em' }}>
-      <TokenImg token={originCurrency} />
-      <RouteRow flex style={{ position: 'relative' }}>
-        <Dots />
-        <RouteDetail route={route} />
-        <RouteRow justify="space-evenly" flex>
-          {route.path.map(([originCurrency, targetCurrency, feeAmount], index) => (
-            <Pool key={index} originCurrency={originCurrency} targetCurrency={targetCurrency} feeAmount={feeAmount} />
-          ))}
-        </RouteRow>
-      </RouteRow>
-      <TokenImg token={targetCurrency} />
-    </Row>
-  )
-}
-
-export default function RoutingDiagram({ trade }: { trade: InterfaceTrade<Currency, Currency, TradeType> }) {
-  const routes: RoutingDiagramEntry[] = useMemo(() => getTokenPath(trade), [trade])
-
-  return (
-    <Column gap={0.75}>
-      <Header routes={routes} />
-      <Rule />
-      {routes.map((route, index) => (
-        <Route key={index} route={route} />
-      ))}
-    </Column>
-  )
-}

src/lib/components/Swap/RoutingDiagram/utils.ts

-import { Protocol } from '@uniswap/router-sdk'
-import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
-import { Pair } from '@uniswap/v2-sdk'
-import { FeeAmount } from '@uniswap/v3-sdk'
-import { InterfaceTrade } from 'state/routing/types'
-
-export interface RoutingDiagramEntry {
-  percent: Percent
-  path: [Currency, Currency, FeeAmount][]
-  protocol: Protocol
-}
-
-const V2_DEFAULT_FEE_TIER = 3000
-
-/**
- * Loops through all routes on a trade and returns an array of diagram entries.
- */
-export function getTokenPath(trade: InterfaceTrade<Currency, Currency, TradeType>): RoutingDiagramEntry[] {
-  return trade.swaps.map(({ route: { path: tokenPath, pools, protocol }, inputAmount, outputAmount }) => {
-    const portion =
-      trade.tradeType === TradeType.EXACT_INPUT
-        ? inputAmount.divide(trade.inputAmount)
-        : outputAmount.divide(trade.outputAmount)
-    const percent = new Percent(portion.numerator, portion.denominator)
-    const path: RoutingDiagramEntry['path'] = []
-    for (let i = 0; i < pools.length; i++) {
-      const nextPool = pools[i]
-      const tokenIn = tokenPath[i]
-      const tokenOut = tokenPath[i + 1]
-      const entry: RoutingDiagramEntry['path'][0] = [
-        tokenIn,
-        tokenOut,
-        nextPool instanceof Pair ? V2_DEFAULT_FEE_TIER : nextPool.fee,
-      ]
-      path.push(entry)
-    }
-    return {
-      percent,
-      path,
-      protocol,
-    }
-  })
-}

src/lib/components/Swap/Settings.fixture.tsx

-import { Modal } from '../Dialog'
-import { SettingsDialog } from './Settings'
-
-export default (
-  <Modal color="module">
-    <SettingsDialog />
-  </Modal>
-)

src/lib/components/Swap/Settings/MaxSlippageSelect.tsx

-import { Trans } from '@lingui/macro'
-import { useAtom } from 'jotai'
-import Popover from 'lib/components/Popover'
-import { useTooltip } from 'lib/components/Tooltip'
-import { getSlippageWarning, toPercent } from 'lib/hooks/useSlippage'
-import { AlertTriangle, Check, Icon, LargeIcon, XOctagon } from 'lib/icons'
-import { autoSlippageAtom, maxSlippageAtom } from 'lib/state/settings'
-import styled, { ThemedText } from 'lib/theme'
-import { forwardRef, memo, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-
-import { BaseButton, TextButton } from '../../Button'
-import Column from '../../Column'
-import { DecimalInput, inputCss } from '../../Input'
-import Row from '../../Row'
-import { Label, optionCss } from './components'
-
-const tooltip = (
-  <Trans>Your transaction will revert if the price changes unfavorably by more than this percentage.</Trans>
-)
-const highSlippage = <Trans>High slippage increases the risk of price movement</Trans>
-const invalidSlippage = <Trans>Please enter a valid slippage %</Trans>
-
-const placeholder = '0.10'
-
-const Button = styled(TextButton)<{ selected: boolean }>`
-  ${({ selected }) => optionCss(selected)}
-`
-
-const Custom = styled(BaseButton)<{ selected: boolean }>`
-  ${({ selected }) => optionCss(selected)}
-  ${inputCss}
-  padding: calc(0.75em - 3px) 0.625em;
-`
-
-interface OptionProps {
-  wrapper: typeof Button | typeof Custom
-  selected: boolean
-  onSelect: () => void
-  icon?: ReactNode
-  tabIndex?: number
-  children: ReactNode
-}
-
-const Option = forwardRef<HTMLButtonElement, OptionProps>(function Option(
-  { wrapper: Wrapper, children, selected, onSelect, icon, tabIndex }: OptionProps,
-  ref
-) {
-  return (
-    <Wrapper selected={selected} onClick={onSelect} ref={ref} tabIndex={tabIndex}>
-      <Row gap={0.5}>
-        {children}
-        {icon ? icon : <LargeIcon icon={selected ? Check : undefined} size={1.25} />}
-      </Row>
-    </Wrapper>
-  )
-})
-
-const Warning = memo(function Warning({ state, showTooltip }: { state?: 'warning' | 'error'; showTooltip: boolean }) {
-  let icon: Icon | undefined
-  let content: ReactNode
-  let show = showTooltip
-  switch (state) {
-    case 'error':
-      icon = XOctagon
-      content = invalidSlippage
-      show = true
-      break
-    case 'warning':
-      icon = AlertTriangle
-      content = highSlippage
-      break
-  }
-  return (
-    <Popover
-      key={state}
-      content={<ThemedText.Caption>{content}</ThemedText.Caption>}
-      show={show}
-      placement="top"
-      offset={16}
-      contained
-    >
-      <LargeIcon icon={icon} color={state} size={1.25} />
-    </Popover>
-  )
-})
-
-export default function MaxSlippageSelect() {
-  const [autoSlippage, setAutoSlippage] = useAtom(autoSlippageAtom)
-  const [maxSlippage, setMaxSlippage] = useAtom(maxSlippageAtom)
-  const maxSlippageInput = useMemo(() => maxSlippage?.toString() || '', [maxSlippage])
-
-  const option = useRef<HTMLButtonElement>(null)
-  const showTooltip = useTooltip(option.current)
-
-  const input = useRef<HTMLInputElement>(null)
-  const focus = useCallback(() => input.current?.focus(), [input])
-
-  const [warning, setWarning] = useState<'warning' | 'error' | undefined>(getSlippageWarning(toPercent(maxSlippage)))
-  useEffect(() => {
-    setWarning(getSlippageWarning(toPercent(maxSlippage)))
-  }, [maxSlippage])
-
-  const onInputSelect = useCallback(() => {
-    focus()
-    const percent = toPercent(maxSlippage)
-    const warning = getSlippageWarning(percent)
-    setAutoSlippage(!percent || warning === 'error')
-  }, [focus, maxSlippage, setAutoSlippage])
-
-  const processValue = useCallback(
-    (value: number | undefined) => {
-      const percent = toPercent(value)
-      const warning = getSlippageWarning(percent)
-      setMaxSlippage(value)
-      setAutoSlippage(!percent || warning === 'error')
-    },
-    [setAutoSlippage, setMaxSlippage]
-  )
-
-  return (
-    <Column gap={0.75}>
-      <Label name={<Trans>Max slippage</Trans>} tooltip={tooltip} />
-      <Row gap={0.5} grow="last">
-        <Option wrapper={Button} selected={autoSlippage} onSelect={() => setAutoSlippage(true)}>
-          <ThemedText.ButtonMedium>
-            <Trans>Auto</Trans>
-          </ThemedText.ButtonMedium>
-        </Option>
-        <Option
-          wrapper={Custom}
-          selected={!autoSlippage}
-          onSelect={onInputSelect}
-          icon={warning && <Warning state={warning} showTooltip={showTooltip} />}
-          ref={option}
-          tabIndex={-1}
-        >
-          <Row color={warning === 'error' ? 'error' : undefined}>
-            <DecimalInput
-              size={Math.max(maxSlippageInput.length, 4)}
-              value={maxSlippageInput}
-              onChange={(input) => processValue(+input)}
-              placeholder={placeholder}
-              ref={input}
-            />
-            %
-          </Row>
-        </Option>
-      </Row>
-    </Column>
-  )
-}

src/lib/components/Swap/Settings/MockToggle.tsx

-import { Trans } from '@lingui/macro'
-import { useAtom } from 'jotai'
-import { mockTogglableAtom } from 'lib/state/settings'
-
-import Row from '../../Row'
-import Toggle from '../../Toggle'
-import { Label } from './components'
-
-export default function MockToggle() {
-  const [mockTogglable, toggleMockTogglable] = useAtom(mockTogglableAtom)
-  return (
-    <Row>
-      <Label name={<Trans>Mock Toggle</Trans>} />
-      <Toggle checked={mockTogglable} onToggle={toggleMockTogglable} />
-    </Row>
-  )
-}

src/lib/components/Swap/Settings/TransactionTtlInput.tsx

-import { Trans } from '@lingui/macro'
-import { useDefaultTransactionTtl, useTransactionTtl } from 'lib/hooks/useTransactionDeadline'
-import styled, { ThemedText } from 'lib/theme'
-import { useRef } from 'react'
-
-import Column from '../../Column'
-import { inputCss, IntegerInput } from '../../Input'
-import Row from '../../Row'
-import { Label } from './components'
-
-const tooltip = <Trans>Your transaction will revert if it has been pending for longer than this period of time.</Trans>
-
-const Input = styled(Row)`
-  ${inputCss}
-`
-
-export default function TransactionTtlInput() {
-  const [ttl, setTtl] = useTransactionTtl()
-  const defaultTtl = useDefaultTransactionTtl()
-  const placeholder = defaultTtl.toString()
-  const input = useRef<HTMLInputElement>(null)
-  return (
-    <Column gap={0.75}>
-      <Label name={<Trans>Transaction deadline</Trans>} tooltip={tooltip} />
-      <ThemedText.Body1>
-        <Input justify="start" onClick={() => input.current?.focus()}>
-          <IntegerInput
-            placeholder={placeholder}
-            value={ttl?.toString() ?? ''}
-            onChange={(value) => setTtl(value ? parseFloat(value) : 0)}
-            size={Math.max(ttl?.toString().length || 0, placeholder.length)}
-            ref={input}
-          />
-          <Trans>minutes</Trans>
-        </Input>
-      </ThemedText.Body1>
-    </Column>
-  )
-}

src/lib/components/Swap/Settings/components.tsx

-import styled, { css, ThemedText } from 'lib/theme'
-import { ReactNode } from 'react'
-// eslint-disable-next-line no-restricted-imports
-import { AnyStyledComponent } from 'styled-components'
-
-import Row from '../../Row'
-import Tooltip from '../../Tooltip'
-
-export const optionCss = (selected: boolean) => css`
-  border: 1px solid ${({ theme }) => (selected ? theme.active : theme.outline)};
-  border-radius: ${({ theme }) => theme.borderRadius * 0.75}em;
-  color: ${({ theme }) => theme.primary} !important;
-  display: grid;
-  grid-gap: 0.25em;
-  padding: calc(0.75em - 1px) 0.625em;
-
-  :enabled {
-    border: 1px solid ${({ theme }) => (selected ? theme.active : theme.outline)};
-  }
-
-  :enabled:hover {
-    border-color: ${({ theme }) => theme.onHover(selected ? theme.active : theme.outline)};
-  }
-
-  :enabled:focus-within {
-    border-color: ${({ theme }) => theme.active};
-  }
-`
-
-export function value(Value: AnyStyledComponent) {
-  return styled(Value)<{ selected?: boolean; cursor?: string }>`
-    cursor: ${({ cursor }) => cursor ?? 'pointer'};
-  `
-}
-
-interface LabelProps {
-  name: ReactNode
-  tooltip?: ReactNode
-}
-
-export function Label({ name, tooltip }: LabelProps) {
-  return (
-    <Row gap={0.5} justify="flex-start">
-      <ThemedText.Subhead2>{name}</ThemedText.Subhead2>
-      {tooltip && (
-        <Tooltip placement="top" contained>
-          <ThemedText.Caption>{tooltip}</ThemedText.Caption>
-        </Tooltip>
-      )}
-    </Row>
-  )
-}

src/lib/components/Swap/Settings/index.tsx

-import { Trans } from '@lingui/macro'
-import { useResetAtom } from 'jotai/utils'
-import useScrollbar from 'lib/hooks/useScrollbar'
-import { Settings as SettingsIcon } from 'lib/icons'
-import { settingsAtom } from 'lib/state/settings'
-import styled, { ThemedText } from 'lib/theme'
-import React, { useState } from 'react'
-
-import { IconButton, TextButton } from '../../Button'
-import Column from '../../Column'
-import Dialog, { Header } from '../../Dialog'
-import { BoundaryProvider } from '../../Popover'
-import MaxSlippageSelect from './MaxSlippageSelect'
-import TransactionTtlInput from './TransactionTtlInput'
-
-export function SettingsDialog() {
-  const [boundary, setBoundary] = useState<HTMLDivElement | null>(null)
-  const scrollbar = useScrollbar(boundary, { padded: true })
-  const resetSettings = useResetAtom(settingsAtom)
-  return (
-    <>
-      <Header title={<Trans>Settings</Trans>} ruled>
-        <TextButton onClick={resetSettings}>
-          <ThemedText.ButtonSmall>
-            <Trans>Reset</Trans>
-          </ThemedText.ButtonSmall>
-        </TextButton>
-      </Header>
-      <Column gap={1} style={{ paddingTop: '1em' }} ref={setBoundary} padded css={scrollbar}>
-        <BoundaryProvider value={boundary}>
-          <MaxSlippageSelect />
-          <TransactionTtlInput />
-        </BoundaryProvider>
-      </Column>
-    </>
-  )
-}
-
-const SettingsButton = styled(IconButton)<{ hover: boolean }>`
-  ${SettingsIcon} {
-    transform: ${({ hover }) => hover && 'rotate(45deg)'};
-    transition: ${({ hover }) => hover && 'transform 0.25s'};
-    will-change: transform;
-  }
-`
-
-export default function Settings({ disabled }: { disabled?: boolean }) {
-  const [open, setOpen] = useState(false)
-  const [hover, setHover] = useState(false)
-  return (
-    <>
-      <SettingsButton
-        disabled={disabled}
-        hover={hover}
-        onClick={() => setOpen(true)}
-        onMouseEnter={() => setHover(true)}
-        onMouseLeave={() => setHover(false)}
-        icon={SettingsIcon}
-      />
-      {open && (
-        <Dialog color="module" onClose={() => setOpen(false)}>
-          <SettingsDialog />
-        </Dialog>
-      )}
-    </>
-  )
-}

src/lib/components/Swap/Status.fixture.tsx

-import { Modal } from '../Dialog'
-
-function Fixture() {
-  return null
-  // TODO(zzmp): Mock <StatusDialog tx={} onClose={() => void 0} />
-}
-
-export default (
-  <Modal color="dialog">
-    <Fixture />
-  </Modal>
-)

src/lib/components/Swap/Status/StatusDialog.tsx

-import { Trans } from '@lingui/macro'
-import ErrorDialog, { StatusHeader } from 'lib/components/Error/ErrorDialog'
-import EtherscanLink from 'lib/components/EtherscanLink'
-import Rule from 'lib/components/Rule'
-import SwapSummary from 'lib/components/Swap/Summary'
-import useInterval from 'lib/hooks/useInterval'
-import { CheckCircle, Clock, Spinner } from 'lib/icons'
-import { SwapTransactionInfo, Transaction, TransactionType, WrapTransactionInfo } from 'lib/state/transactions'
-import styled, { ThemedText } from 'lib/theme'
-import ms from 'ms.macro'
-import { useCallback, useMemo, useState } from 'react'
-import { ExplorerDataType } from 'utils/getExplorerLink'
-
-import ActionButton from '../../ActionButton'
-import Column from '../../Column'
-import Row from '../../Row'
-
-const errorMessage = (
-  <Trans>
-    Try increasing your slippage tolerance.
-    <br />
-    NOTE: Fee on transfer and rebase tokens are incompatible with Uniswap V3.
-  </Trans>
-)
-
-const TransactionRow = styled(Row)`
-  flex-direction: row-reverse;
-`
-
-type PendingTransaction = Transaction<SwapTransactionInfo | WrapTransactionInfo>
-
-function ElapsedTime({ tx }: { tx: PendingTransaction }) {
-  const [elapsedMs, setElapsedMs] = useState(0)
-
-  useInterval(() => setElapsedMs(Date.now() - tx.addedTime), tx.receipt ? null : ms`1s`)
-
-  const toElapsedTime = useCallback((ms: number) => {
-    let sec = Math.floor(ms / 1000)
-    const min = Math.floor(sec / 60)
-    sec = sec % 60
-    if (min) {
-      return (
-        <Trans>
-          {min}m {sec}s
-        </Trans>
-      )
-    } else {
-      return <Trans>{sec}s</Trans>
-    }
-  }, [])
-  return (
-    <Row gap={0.5}>
-      <Clock />
-      <ThemedText.Body2>{toElapsedTime(elapsedMs)}</ThemedText.Body2>
-    </Row>
-  )
-}
-
-interface TransactionStatusProps {
-  tx: PendingTransaction
-  onClose: () => void
-}
-
-function TransactionStatus({ tx, onClose }: TransactionStatusProps) {
-  const Icon = useMemo(() => {
-    return tx.receipt?.status ? CheckCircle : Spinner
-  }, [tx.receipt?.status])
-  const heading = useMemo(() => {
-    if (tx.info.type === TransactionType.SWAP) {
-      return tx.receipt?.status ? <Trans>Swap confirmed</Trans> : <Trans>Swap pending</Trans>
-    } else if (tx.info.type === TransactionType.WRAP) {
-      if (tx.info.unwrapped) {
-        return tx.receipt?.status ? <Trans>Unwrap confirmed</Trans> : <Trans>Unwrap pending</Trans>
-      }
-      return tx.receipt?.status ? <Trans>Wrap confirmed</Trans> : <Trans>Wrap pending</Trans>
-    }
-    return tx.receipt?.status ? <Trans>Transaction confirmed</Trans> : <Trans>Transaction pending</Trans>
-  }, [tx.info, tx.receipt?.status])
-
-  return (
-    <Column flex padded gap={0.75} align="stretch" style={{ height: '100%' }}>
-      <StatusHeader icon={Icon} iconColor={tx.receipt?.status ? 'success' : undefined}>
-        <ThemedText.Subhead1>{heading}</ThemedText.Subhead1>
-        {tx.info.type === TransactionType.SWAP ? (
-          <SwapSummary input={tx.info.inputCurrencyAmount} output={tx.info.outputCurrencyAmount} />
-        ) : null}
-      </StatusHeader>
-      <Rule />
-      <TransactionRow flex>
-        <ThemedText.ButtonSmall>
-          <EtherscanLink type={ExplorerDataType.TRANSACTION} data={tx.info.response.hash}>
-            <Trans>View on Etherscan</Trans>
-          </EtherscanLink>
-        </ThemedText.ButtonSmall>
-        <ElapsedTime tx={tx} />
-      </TransactionRow>
-      <ActionButton onClick={onClose}>
-        <Trans>Close</Trans>
-      </ActionButton>
-    </Column>
-  )
-}
-
-export default function TransactionStatusDialog({ tx, onClose }: TransactionStatusProps) {
-  return tx.receipt?.status === 0 ? (
-    <ErrorDialog
-      header={errorMessage}
-      error={new Error('TODO(zzmp)')}
-      action={<Trans>Dismiss</Trans>}
-      onClick={onClose}
-    />
-  ) : (
-    <TransactionStatus tx={tx} onClose={onClose} />
-  )
-}

src/lib/components/Swap/Status/index.ts

-export { default as StatusDialog } from './StatusDialog'

src/lib/components/Swap/Summary.fixture.tsx

-import { tokens } from '@uniswap/default-token-list'
-import { SupportedChainId } from 'constants/chains'
-import { nativeOnChain } from 'constants/tokens'
-import { useUpdateAtom } from 'jotai/utils'
-import { useSwapInfo } from 'lib/hooks/swap'
-import { SwapInfoProvider } from 'lib/hooks/swap/useSwapInfo'
-import { Field, swapAtom } from 'lib/state/swap'
-import { useEffect } from 'react'
-import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
-import invariant from 'tiny-invariant'
-
-import { Modal } from '../Dialog'
-import { SummaryDialog } from './Summary'
-
-const ETH = nativeOnChain(SupportedChainId.MAINNET)
-const UNI = (function () {
-  const token = tokens.find(({ symbol }) => symbol === 'UNI')
-  invariant(token)
-  return new WrappedTokenInfo(token)
-})()
-
-function Fixture() {
-  const setState = useUpdateAtom(swapAtom)
-  const {
-    [Field.INPUT]: { usdc: inputUSDC },
-    [Field.OUTPUT]: { usdc: outputUSDC },
-    trade: { trade },
-    slippage,
-    impact,
-  } = useSwapInfo()
-
-  useEffect(() => {
-    setState({
-      independentField: Field.INPUT,
-      amount: '1',
-      [Field.INPUT]: ETH,
-      [Field.OUTPUT]: UNI,
-    })
-  }, [setState])
-
-  return trade ? (
-    <Modal color="dialog">
-      <SummaryDialog
-        onConfirm={async () => void 0}
-        trade={trade}
-        slippage={slippage}
-        inputUSDC={inputUSDC}
-        outputUSDC={outputUSDC}
-        impact={impact}
-      />
-    </Modal>
-  ) : null
-}
-
-export default (
-  <>
-    <SwapInfoProvider>
-      <Fixture />
-    </SwapInfoProvider>
-  </>
-)

src/lib/components/Swap/Summary/Details.tsx

-import { t } from '@lingui/macro'
-import { useLingui } from '@lingui/react'
-import { Trade } from '@uniswap/router-sdk'
-import { Currency, TradeType } from '@uniswap/sdk-core'
-import { useAtomValue } from 'jotai/utils'
-import Column from 'lib/components/Column'
-import Row from 'lib/components/Row'
-import { Slippage } from 'lib/hooks/useSlippage'
-import { PriceImpact } from 'lib/hooks/useUSDCPriceImpact'
-import { feeOptionsAtom } from 'lib/state/swap'
-import styled, { Color, ThemedText } from 'lib/theme'
-import { useMemo } from 'react'
-import { currencyId } from 'utils/currencyId'
-import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
-import { computeRealizedLPFeeAmount } from 'utils/prices'
-
-const Value = styled.span<{ color?: Color }>`
-  color: ${({ color, theme }) => color && theme[color]};
-  white-space: nowrap;
-`
-
-interface DetailProps {
-  label: string
-  value: string
-  color?: Color
-}
-
-function Detail({ label, value, color }: DetailProps) {
-  return (
-    <ThemedText.Caption userSelect>
-      <Row gap={2}>
-        <span>{label}</span>
-        <Value color={color}>{value}</Value>
-      </Row>
-    </ThemedText.Caption>
-  )
-}
-
-interface DetailsProps {
-  trade: Trade<Currency, Currency, TradeType>
-  slippage: Slippage
-  impact?: PriceImpact
-}
-
-export default function Details({ trade, slippage, impact }: DetailsProps) {
-  const { inputAmount, outputAmount } = trade
-  const inputCurrency = inputAmount.currency
-  const outputCurrency = outputAmount.currency
-  const integrator = window.location.hostname
-  const feeOptions = useAtomValue(feeOptionsAtom)
-  const lpFeeAmount = useMemo(() => computeRealizedLPFeeAmount(trade), [trade])
-  const { i18n } = useLingui()
-
-  const details = useMemo(() => {
-    const rows: Array<[string, string] | [string, string, Color | undefined]> = []
-    // @TODO(ianlapham): Check that provider fee is even a valid list item
-
-    if (feeOptions) {
-      const fee = outputAmount.multiply(feeOptions.fee)
-      if (fee.greaterThan(0)) {
-        const parsedFee = formatCurrencyAmount(fee, 6, i18n.locale)
-        rows.push([t`${integrator} fee`, `${parsedFee} ${outputCurrency.symbol || currencyId(outputCurrency)}`])
-      }
-    }
-
-    if (impact) {
-      rows.push([t`Price impact`, impact.toString(), impact.warning])
-    }
-
-    if (lpFeeAmount) {
-      const parsedLpFee = formatCurrencyAmount(lpFeeAmount, 6, i18n.locale)
-      rows.push([t`Liquidity provider fee`, `${parsedLpFee} ${inputCurrency.symbol || currencyId(inputCurrency)}`])
-    }
-
-    if (trade.tradeType === TradeType.EXACT_OUTPUT) {
-      const localizedMaxSent = formatCurrencyAmount(trade.maximumAmountIn(slippage.allowed), 6, i18n.locale)
-      rows.push([t`Maximum sent`, `${localizedMaxSent} ${inputCurrency.symbol}`])
-    }
-
-    if (trade.tradeType === TradeType.EXACT_INPUT) {
-      const localizedMaxSent = formatCurrencyAmount(trade.minimumAmountOut(slippage.allowed), 6, i18n.locale)
-      rows.push([t`Minimum received`, `${localizedMaxSent} ${outputCurrency.symbol}`])
-    }
-
-    rows.push([t`Slippage tolerance`, `${slippage.allowed.toFixed(2)}%`, slippage.warning])
-
-    return rows
-  }, [
-    feeOptions,
-    i18n.locale,
-    impact,
-    inputCurrency,
-    integrator,
-    lpFeeAmount,
-    outputAmount,
-    outputCurrency,
-    slippage,
-    trade,
-  ])
-
-  return (
-    <Column gap={0.5}>
-      {details.map(([label, detail, color]) => (
-        <Detail key={label} label={label} value={detail} color={color} />
-      ))}
-    </Column>
-  )
-}

src/lib/components/Swap/Summary/Summary.tsx

-import { useLingui } from '@lingui/react'
-import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
-import { PriceImpact } from 'lib/hooks/useUSDCPriceImpact'
-import { ArrowRight } from 'lib/icons'
-import { ThemedText } from 'lib/theme'
-import { PropsWithChildren } from 'react'
-import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
-
-import Column from '../../Column'
-import Row from '../../Row'
-import TokenImg from '../../TokenImg'
-
-interface TokenValueProps {
-  input: CurrencyAmount<Currency>
-  usdc?: CurrencyAmount<Currency>
-}
-
-function TokenValue({ input, usdc, children }: PropsWithChildren<TokenValueProps>) {
-  const { i18n } = useLingui()
-  return (
-    <Column justify="flex-start">
-      <Row gap={0.375} justify="flex-start">
-        <TokenImg token={input.currency} />
-        <ThemedText.Body2 userSelect>
-          {formatCurrencyAmount(input, 6, i18n.locale)} {input.currency.symbol}
-        </ThemedText.Body2>
-      </Row>
-      {usdc && (
-        <ThemedText.Caption color="secondary" userSelect>
-          <Row justify="flex-start" gap={0.25}>
-            ${formatCurrencyAmount(usdc, 6, 'en', 2)}
-            {children}
-          </Row>
-        </ThemedText.Caption>
-      )}
-    </Column>
-  )
-}
-
-interface SummaryProps {
-  input: CurrencyAmount<Currency>
-  output: CurrencyAmount<Currency>
-  inputUSDC?: CurrencyAmount<Currency>
-  outputUSDC?: CurrencyAmount<Currency>
-  impact?: PriceImpact
-}
-
-export default function Summary({ input, output, inputUSDC, outputUSDC, impact }: SummaryProps) {
-  return (
-    <Row gap={impact ? 1 : 0.25}>
-      <TokenValue input={input} usdc={inputUSDC} />
-      <ArrowRight />
-      <TokenValue input={output} usdc={outputUSDC}>
-        {impact && <ThemedText.Caption color={impact.warning}>({impact.toString()})</ThemedText.Caption>}
-      </TokenValue>
-    </Row>
-  )
-}

src/lib/components/Swap/Summary/index.tsx

-import { Trans } from '@lingui/macro'
-import { useLingui } from '@lingui/react'
-import { Trade } from '@uniswap/router-sdk'
-import { Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
-import ActionButton, { Action } from 'lib/components/ActionButton'
-import Column from 'lib/components/Column'
-import { Header } from 'lib/components/Dialog'
-import Expando from 'lib/components/Expando'
-import Row from 'lib/components/Row'
-import { Slippage } from 'lib/hooks/useSlippage'
-import { PriceImpact } from 'lib/hooks/useUSDCPriceImpact'
-import { AlertTriangle, BarChart, Info, Spinner } from 'lib/icons'
-import styled, { ThemedText } from 'lib/theme'
-import { useCallback, useMemo, useState } from 'react'
-import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
-import { tradeMeaningfullyDiffers } from 'utils/tradeMeaningFullyDiffer'
-
-import Price from '../Price'
-import Details from './Details'
-import Summary from './Summary'
-
-export default Summary
-
-const Content = styled(Column)``
-const Heading = styled(Column)``
-const Footing = styled(Column)``
-const Body = styled(Column)<{ open: boolean }>`
-  height: calc(100% - 2.5em);
-
-  ${Content}, ${Heading} {
-    flex-grow: 1;
-    transition: flex-grow 0.25s;
-  }
-
-  ${Footing} {
-    margin-bottom: ${({ open }) => (open ? '-0.75em' : undefined)};
-    max-height: ${({ open }) => (open ? 0 : '3em')};
-    opacity: ${({ open }) => (open ? 0 : 1)};
-    transition: max-height 0.25s, margin-bottom 0.25s, opacity 0.15s 0.1s;
-    visibility: ${({ open }) => (open ? 'hidden' : undefined)};
-  }
-`
-
-function Subhead({ impact, slippage }: { impact?: PriceImpact; slippage: Slippage }) {
-  return (
-    <Row gap={0.5}>
-      {impact?.warning || slippage.warning ? (
-        <AlertTriangle color={impact?.warning || slippage.warning} />
-      ) : (
-        <Info color="secondary" />
-      )}
-      <ThemedText.Subhead2 color={impact?.warning || slippage.warning || 'secondary'}>
-        {impact?.warning ? (
-          <Trans>High price impact</Trans>
-        ) : slippage.warning ? (
-          <Trans>High slippage</Trans>
-        ) : (
-          <Trans>Swap details</Trans>
-        )}
-      </ThemedText.Subhead2>
-    </Row>
-  )
-}
-
-function Estimate({ trade, slippage }: { trade: Trade<Currency, Currency, TradeType>; slippage: Slippage }) {
-  const { i18n } = useLingui()
-  const text = useMemo(() => {
-    switch (trade.tradeType) {
-      case TradeType.EXACT_INPUT:
-        return (
-          <Trans>
-            Output is estimated. You will receive at least{' '}
-            {formatCurrencyAmount(trade.minimumAmountOut(slippage.allowed), 6, i18n.locale)}{' '}
-            {trade.outputAmount.currency.symbol} or the transaction will revert.
-          </Trans>
-        )
-      case TradeType.EXACT_OUTPUT:
-        return (
-          <Trans>
-            Output is estimated. You will send at most{' '}
-            {formatCurrencyAmount(trade.maximumAmountIn(slippage.allowed), 6, i18n.locale)}{' '}
-            {trade.inputAmount.currency.symbol} or the transaction will revert.
-          </Trans>
-        )
-    }
-  }, [i18n.locale, slippage.allowed, trade])
-  return <ThemedText.Caption color="secondary">{text}</ThemedText.Caption>
-}
-
-function ConfirmButton({
-  trade,
-  highPriceImpact,
-  onConfirm,
-}: {
-  trade: Trade<Currency, Currency, TradeType>
-  highPriceImpact: boolean
-  onConfirm: () => Promise<void>
-}) {
-  const [ackPriceImpact, setAckPriceImpact] = useState(false)
-
-  const [ackTrade, setAckTrade] = useState(trade)
-  const doesTradeDiffer = useMemo(
-    () => Boolean(trade && ackTrade && tradeMeaningfullyDiffers(trade, ackTrade)),
-    [ackTrade, trade]
-  )
-
-  const [isPending, setIsPending] = useState(false)
-  const onClick = useCallback(async () => {
-    setIsPending(true)
-    await onConfirm()
-    setIsPending(false)
-  }, [onConfirm])
-
-  const action = useMemo((): Action | undefined => {
-    if (isPending) {
-      return { message: <Trans>Confirm in your wallet</Trans>, icon: Spinner }
-    } else if (doesTradeDiffer) {
-      return {
-        message: <Trans>Price updated</Trans>,
-        icon: BarChart,
-        onClick: () => setAckTrade(trade),
-        children: <Trans>Accept</Trans>,
-      }
-    } else if (highPriceImpact && !ackPriceImpact) {
-      return {
-        message: <Trans>High price impact</Trans>,
-        onClick: () => setAckPriceImpact(true),
-        children: <Trans>Acknowledge</Trans>,
-      }
-    }
-    return
-  }, [ackPriceImpact, doesTradeDiffer, highPriceImpact, isPending, trade])
-
-  return (
-    <ActionButton onClick={onClick} action={action}>
-      <Trans>Confirm swap</Trans>
-    </ActionButton>
-  )
-}
-
-interface SummaryDialogProps {
-  trade: Trade<Currency, Currency, TradeType>
-  slippage: Slippage
-  inputUSDC?: CurrencyAmount<Currency>
-  outputUSDC?: CurrencyAmount<Currency>
-  impact?: PriceImpact
-  onConfirm: () => Promise<void>
-}
-
-export function SummaryDialog({ trade, slippage, inputUSDC, outputUSDC, impact, onConfirm }: SummaryDialogProps) {
-  const { inputAmount, outputAmount } = trade
-
-  const [open, setOpen] = useState(false)
-  const onExpand = useCallback(() => setOpen((open) => !open), [])
-
-  return (
-    <>
-      <Header title={<Trans>Swap summary</Trans>} ruled />
-      <Body flex align="stretch" padded gap={0.75} open={open}>
-        <Heading gap={0.75} flex justify="center">
-          <Summary
-            input={inputAmount}
-            output={outputAmount}
-            inputUSDC={inputUSDC}
-            outputUSDC={outputUSDC}
-            impact={impact}
-          />
-          <Price trade={trade} />
-        </Heading>
-        <Column gap={open ? 0 : 0.75} style={{ transition: 'gap 0.25s' }}>
-          <Expando title={<Subhead impact={impact} slippage={slippage} />} open={open} onExpand={onExpand} height={7}>
-            <Details trade={trade} slippage={slippage} impact={impact} />
-          </Expando>
-          <Footing>
-            <Estimate trade={trade} slippage={slippage} />
-          </Footing>
-          <ConfirmButton trade={trade} highPriceImpact={impact?.warning === 'error'} onConfirm={onConfirm} />
-        </Column>
-      </Body>
-    </>
-  )
-}

src/lib/components/Swap/Swap.fixture.tsx

-import { tokens } from '@uniswap/default-token-list'
-import { TokenInfo } from '@uniswap/token-lists'
-import { SupportedChainId } from 'constants/chains'
-import { DAI, USDC_MAINNET } from 'constants/tokens'
-import { useUpdateAtom } from 'jotai/utils'
-import { TokenListProvider } from 'lib/hooks/useTokenList'
-import { useEffect } from 'react'
-import { useSelect, useValue } from 'react-cosmos/fixture'
-
-import Swap from '.'
-import { colorAtom } from './Output'
-
-const validateColor = (() => {
-  const validator = document.createElement('div').style
-  return (color: string) => {
-    validator.color = ''
-    validator.color = color
-    return validator.color !== ''
-  }
-})()
-
-function Fixture() {
-  const setColor = useUpdateAtom(colorAtom)
-  const [color] = useValue('token color', { defaultValue: '' })
-  useEffect(() => {
-    if (!color || validateColor(color)) {
-      setColor(color)
-    }
-  }, [color, setColor])
-
-  const [convenienceFee] = useValue('convenienceFee', { defaultValue: 100 })
-  const FEE_RECIPIENT_OPTIONS = [
-    '',
-    '0x1D9Cd50Dde9C19073B81303b3d930444d11552f7',
-    '0x0dA5533d5a9aA08c1792Ef2B6a7444E149cCB0AD',
-    '0xE6abE059E5e929fd17bef158902E73f0FEaCD68c',
-  ]
-  const [convenienceFeeRecipient] = useSelect('convenienceFeeRecipient', {
-    options: FEE_RECIPIENT_OPTIONS,
-    defaultValue: FEE_RECIPIENT_OPTIONS[1],
-  })
-
-  const optionsToAddressMap: Record<string, string | undefined> = {
-    None: undefined,
-    Native: 'NATIVE',
-    DAI: DAI.address,
-    USDC: USDC_MAINNET.address,
-  }
-  const addressOptions = Object.keys(optionsToAddressMap)
-
-  const [defaultInputToken] = useSelect('defaultInputToken', {
-    options: addressOptions,
-    defaultValue: addressOptions[1],
-  })
-  const [defaultInputAmount] = useValue('defaultInputAmount', { defaultValue: 1 })
-
-  const [defaultOutputToken] = useSelect('defaultOutputToken', {
-    options: addressOptions,
-    defaultValue: addressOptions[2],
-  })
-  const [defaultOutputAmount] = useValue('defaultOutputAmount', { defaultValue: 0 })
-
-  const tokenListNameMap: Record<string, TokenInfo[] | string> = {
-    'default list': tokens,
-    'mainnet only': tokens.filter((token) => SupportedChainId.MAINNET === token.chainId),
-    'arbitrum only': [
-      {
-        logoURI: 'https://assets.coingecko.com/coins/images/9956/thumb/4943.png?1636636734',
-        chainId: 42161,
-        address: '0xDA10009cBd5D07dd0CeCc66161FC93D7c9000da1',
-        name: 'Dai Stablecoin',
-        symbol: 'DAI',
-        decimals: 18,
-      },
-      {
-        logoURI: 'https://assets.coingecko.com/coins/images/6319/thumb/USD_Coin_icon.png?1547042389',
-        chainId: 42161,
-        address: '0xFF970A61A04b1cA14834A43f5dE4533eBDDB5CC8',
-        name: 'USD Coin (Arb1)',
-        symbol: 'USDC',
-        decimals: 6,
-      },
-    ],
-  }
-
-  const tokenListOptions = Object.keys(tokenListNameMap)
-  const [tokenListName] = useSelect('tokenList', {
-    options: tokenListOptions,
-    defaultValue: tokenListOptions[0],
-  })
-
-  return (
-    <TokenListProvider list={tokenListNameMap[tokenListName]}>
-      <Swap
-        convenienceFee={convenienceFee}
-        convenienceFeeRecipient={convenienceFeeRecipient}
-        defaultInputTokenAddress={optionsToAddressMap[defaultInputToken]}
-        defaultInputAmount={defaultInputAmount}
-        defaultOutputTokenAddress={optionsToAddressMap[defaultOutputToken]}
-        defaultOutputAmount={defaultOutputAmount}
-        onConnectWallet={() => console.log('onConnectWallet')} // this handler is included as a test of functionality, but only logs
-      />
-    </TokenListProvider>
-  )
-}
-
-export default <Fixture />

src/lib/components/Swap/SwapButton/index.tsx

-import { Trans } from '@lingui/macro'
-import { useAtomValue, useUpdateAtom } from 'jotai/utils'
-import { useSwapInfo } from 'lib/hooks/swap'
-import { useSwapApprovalOptimizedTrade } from 'lib/hooks/swap/useSwapApproval'
-import { useSwapCallback } from 'lib/hooks/swap/useSwapCallback'
-import useWrapCallback, { WrapType } from 'lib/hooks/swap/useWrapCallback'
-import { useAddTransaction } from 'lib/hooks/transactions'
-import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
-import { useSetOldestValidBlock } from 'lib/hooks/useIsValidBlock'
-import useTransactionDeadline from 'lib/hooks/useTransactionDeadline'
-import { Spinner } from 'lib/icons'
-import { displayTxHashAtom, feeOptionsAtom, Field } from 'lib/state/swap'
-import { TransactionType } from 'lib/state/transactions'
-import { useTheme } from 'lib/theme'
-import { isAnimating } from 'lib/utils/animations'
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { TradeState } from 'state/routing/types'
-import invariant from 'tiny-invariant'
-
-import ActionButton, { ActionButtonProps } from '../../ActionButton'
-import Dialog from '../../Dialog'
-import { SummaryDialog } from '../Summary'
-import useApprovalData, { useIsPendingApproval } from './useApprovalData'
-
-interface SwapButtonProps {
-  disabled?: boolean
-}
-
-export default memo(function SwapButton({ disabled }: SwapButtonProps) {
-  const { account, chainId } = useActiveWeb3React()
-  const {
-    [Field.INPUT]: {
-      currency: inputCurrency,
-      amount: inputCurrencyAmount,
-      balance: inputCurrencyBalance,
-      usdc: inputUSDC,
-    },
-    [Field.OUTPUT]: { usdc: outputUSDC },
-    trade,
-    slippage,
-    impact,
-  } = useSwapInfo()
-  const feeOptions = useAtomValue(feeOptionsAtom)
-
-  // TODO(zzmp): Return an optimized trade directly from useSwapInfo.
-  const optimizedTrade =
-    // Use trade.trade if there is no swap optimized trade. This occurs if approvals are still pending.
-    useSwapApprovalOptimizedTrade(trade.trade, slippage.allowed, useIsPendingApproval) || trade.trade
-  const deadline = useTransactionDeadline()
-
-  const { type: wrapType, callback: wrapCallback } = useWrapCallback()
-  const { approvalAction, signatureData } = useApprovalData(optimizedTrade, slippage, inputCurrencyAmount)
-  const { callback: swapCallback } = useSwapCallback({
-    trade: optimizedTrade,
-    allowedSlippage: slippage.allowed,
-    recipientAddressOrName: account ?? null,
-    signatureData,
-    deadline,
-    feeOptions,
-  })
-
-  const [open, setOpen] = useState(false)
-  // Close the review modal if there is no available trade.
-  useEffect(() => setOpen((open) => (trade.trade ? open : false)), [trade.trade])
-  // Close the review modal on chain change.
-  useEffect(() => setOpen(false), [chainId])
-
-  const addTransaction = useAddTransaction()
-  const setDisplayTxHash = useUpdateAtom(displayTxHashAtom)
-  const setOldestValidBlock = useSetOldestValidBlock()
-
-  const [isPending, setIsPending] = useState(false)
-  const onWrap = useCallback(async () => {
-    setIsPending(true)
-    try {
-      const transaction = await wrapCallback?.()
-      if (!transaction) return
-      addTransaction({
-        response: transaction,
-        type: TransactionType.WRAP,
-        unwrapped: wrapType === WrapType.UNWRAP,
-        currencyAmountRaw: transaction.value?.toString() ?? '0',
-        chainId,
-      })
-      setDisplayTxHash(transaction.hash)
-    } catch (e) {
-      // TODO(zzmp): Surface errors from wrap.
-      console.log(e)
-    }
-
-    // Only reset pending after any queued animations to avoid layout thrashing, because a
-    // successful wrap will open the status dialog and immediately cover the button.
-    const postWrap = () => {
-      setIsPending(false)
-      document.removeEventListener('animationend', postWrap)
-    }
-    if (isAnimating(document)) {
-      document.addEventListener('animationend', postWrap)
-    } else {
-      postWrap()
-    }
-  }, [addTransaction, chainId, setDisplayTxHash, wrapCallback, wrapType])
-  // Reset the pending state if user updates the swap.
-  useEffect(() => setIsPending(false), [inputCurrencyAmount, trade])
-
-  const onSwap = useCallback(async () => {
-    try {
-      const transaction = await swapCallback?.()
-      if (!transaction) return
-      invariant(trade.trade)
-      addTransaction({
-        response: transaction,
-        type: TransactionType.SWAP,
-        tradeType: trade.trade.tradeType,
-        inputCurrencyAmount: trade.trade.inputAmount,
-        outputCurrencyAmount: trade.trade.outputAmount,
-      })
-      setDisplayTxHash(transaction.hash)
-
-      // Set the block containing the response to the oldest valid block to ensure that the
-      // completed trade's impact is reflected in future fetched trades.
-      transaction.wait(1).then((receipt) => {
-        setOldestValidBlock(receipt.blockNumber)
-      })
-
-      // Only reset open after any queued animations to avoid layout thrashing, because a
-      // successful swap will open the status dialog and immediately cover the summary dialog.
-      const postSwap = () => {
-        setOpen(false)
-        document.removeEventListener('animationend', postSwap)
-      }
-      if (isAnimating(document)) {
-        document.addEventListener('animationend', postSwap)
-      } else {
-        postSwap()
-      }
-    } catch (e) {
-      // TODO(zzmp): Surface errors from swap.
-      console.log(e)
-    }
-  }, [addTransaction, setDisplayTxHash, setOldestValidBlock, swapCallback, trade.trade])
-
-  const disableSwap = useMemo(
-    () =>
-      disabled ||
-      !chainId ||
-      (wrapType === WrapType.NONE && !optimizedTrade) ||
-      !(inputCurrencyAmount && inputCurrencyBalance) ||
-      inputCurrencyBalance.lessThan(inputCurrencyAmount),
-    [disabled, wrapType, optimizedTrade, chainId, inputCurrencyAmount, inputCurrencyBalance]
-  )
-  const actionProps = useMemo((): Partial<ActionButtonProps> | undefined => {
-    if (disableSwap) {
-      return { disabled: true }
-    } else if (wrapType === WrapType.NONE) {
-      return approvalAction
-        ? { action: approvalAction }
-        : trade.state === TradeState.VALID
-        ? { onClick: () => setOpen(true) }
-        : { disabled: true }
-    } else {
-      return isPending
-        ? { action: { message: <Trans>Confirm in your wallet</Trans>, icon: Spinner } }
-        : { onClick: onWrap }
-    }
-  }, [approvalAction, disableSwap, isPending, onWrap, trade.state, wrapType])
-  const Label = useCallback(() => {
-    switch (wrapType) {
-      case WrapType.UNWRAP:
-        return <Trans>Unwrap {inputCurrency?.symbol}</Trans>
-      case WrapType.WRAP:
-        return <Trans>Wrap {inputCurrency?.symbol}</Trans>
-      case WrapType.NONE:
-      default:
-        return <Trans>Review swap</Trans>
-    }
-  }, [inputCurrency?.symbol, wrapType])
-  const onClose = useCallback(() => setOpen(false), [])
-
-  const { tokenColorExtraction } = useTheme()
-  return (
-    <>
-      <ActionButton color={tokenColorExtraction ? 'interactive' : 'accent'} {...actionProps}>
-        <Label />
-      </ActionButton>
-      {open && trade.trade && (
-        <Dialog color="dialog" onClose={onClose}>
-          <SummaryDialog
-            trade={trade.trade}
-            slippage={slippage}
-            inputUSDC={inputUSDC}
-            outputUSDC={outputUSDC}
-            impact={impact}
-            onConfirm={onSwap}
-          />
-        </Dialog>
-      )}
-    </>
-  )
-})

src/lib/components/Swap/SwapButton/useApprovalData.tsx

-import { Trans } from '@lingui/macro'
-import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
-import { Action } from 'lib/components/ActionButton'
-import EtherscanLink from 'lib/components/EtherscanLink'
-import {
-  ApproveOrPermitState,
-  useApproveOrPermit,
-  useSwapApprovalOptimizedTrade,
-  useSwapRouterAddress,
-} from 'lib/hooks/swap/useSwapApproval'
-import { useAddTransaction, usePendingApproval } from 'lib/hooks/transactions'
-import { Slippage } from 'lib/hooks/useSlippage'
-import { Spinner } from 'lib/icons'
-import { TransactionType } from 'lib/state/transactions'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { ExplorerDataType } from 'utils/getExplorerLink'
-
-export function useIsPendingApproval(token?: Token, spender?: string): boolean {
-  return Boolean(usePendingApproval(token, spender))
-}
-
-export default function useApprovalData(
-  trade: ReturnType<typeof useSwapApprovalOptimizedTrade>,
-  slippage: Slippage,
-  currencyAmount?: CurrencyAmount<Currency>
-) {
-  const currency = currencyAmount?.currency
-  const { approvalState, signatureData, handleApproveOrPermit } = useApproveOrPermit(
-    trade,
-    slippage.allowed,
-    useIsPendingApproval,
-    currencyAmount
-  )
-
-  const [isPending, setIsPending] = useState(false)
-  const addTransaction = useAddTransaction()
-  const onApprove = useCallback(async () => {
-    setIsPending(true)
-    const transaction = await handleApproveOrPermit()
-    if (transaction) {
-      addTransaction({ type: TransactionType.APPROVAL, ...transaction })
-    }
-    setIsPending(false)
-  }, [addTransaction, handleApproveOrPermit])
-  // Reset the pending state if currency changes.
-  useEffect(() => setIsPending(false), [currency])
-
-  const approvalHash = usePendingApproval(currency?.isToken ? currency : undefined, useSwapRouterAddress(trade))
-  const approvalAction = useMemo((): Action | undefined => {
-    if (!trade || !currency) return
-
-    switch (approvalState) {
-      case ApproveOrPermitState.REQUIRES_APPROVAL:
-        if (isPending) {
-          return { message: <Trans>Approve in your wallet</Trans>, icon: Spinner }
-        }
-        return {
-          message: <Trans>Approve {currency.symbol} first</Trans>,
-          onClick: onApprove,
-          children: <Trans>Approve</Trans>,
-        }
-      case ApproveOrPermitState.REQUIRES_SIGNATURE:
-        if (isPending) {
-          return { message: <Trans>Allow in your wallet</Trans>, icon: Spinner }
-        }
-        return {
-          message: <Trans>Allow {currency.symbol} first</Trans>,
-          onClick: onApprove,
-          children: <Trans>Allow</Trans>,
-        }
-      case ApproveOrPermitState.PENDING_APPROVAL:
-        return {
-          message: (
-            <EtherscanLink type={ExplorerDataType.TRANSACTION} data={approvalHash}>
-              <Trans>Approval pending</Trans>
-            </EtherscanLink>
-          ),
-          icon: Spinner,
-        }
-      case ApproveOrPermitState.PENDING_SIGNATURE:
-        return { message: <Trans>Allowance pending</Trans>, icon: Spinner }
-      case ApproveOrPermitState.APPROVED:
-        return
-    }
-  }, [approvalHash, approvalState, currency, isPending, onApprove, trade])
-
-  return { approvalAction, signatureData: signatureData ?? undefined }
-}

src/lib/components/Swap/TokenInput.tsx

-import 'setimmediate'
-
-import { Trans } from '@lingui/macro'
-import { Currency } from '@uniswap/sdk-core'
-import TokenSelect from 'lib/components/TokenSelect'
-import { loadingTransitionCss } from 'lib/css/loading'
-import styled, { keyframes, ThemedText } from 'lib/theme'
-import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-
-import Button from '../Button'
-import Column from '../Column'
-import { DecimalInput } from '../Input'
-import Row from '../Row'
-
-const TokenInputRow = styled(Row)`
-  grid-template-columns: 1fr;
-`
-
-const ValueInput = styled(DecimalInput)`
-  color: ${({ theme }) => theme.primary};
-  height: 1.5em;
-  margin: -0.25em 0;
-
-  :hover:not(:focus-within) {
-    color: ${({ theme }) => theme.onHover(theme.primary)};
-  }
-
-  :hover:not(:focus-within)::placeholder {
-    color: ${({ theme }) => theme.onHover(theme.secondary)};
-  }
-
-  ${loadingTransitionCss}
-`
-
-const delayedFadeIn = keyframes`
-  0% {
-    opacity: 0;
-  }
-  25% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-`
-
-const MaxButton = styled(Button)`
-  animation: ${delayedFadeIn} 0.25s linear;
-  border-radius: 0.75em;
-  padding: 0.5em;
-`
-
-interface TokenInputProps {
-  currency?: Currency
-  amount: string
-  max?: string
-  disabled?: boolean
-  onChangeInput: (input: string) => void
-  onChangeCurrency: (currency: Currency) => void
-  loading?: boolean
-  children: ReactNode
-}
-
-export default function TokenInput({
-  currency,
-  amount,
-  max,
-  disabled,
-  onChangeInput,
-  onChangeCurrency,
-  loading,
-  children,
-}: TokenInputProps) {
-  const input = useRef<HTMLInputElement>(null)
-  const onSelect = useCallback(
-    (currency: Currency) => {
-      onChangeCurrency(currency)
-      setImmediate(() => input.current?.focus())
-    },
-    [onChangeCurrency]
-  )
-
-  const maxButton = useRef<HTMLButtonElement>(null)
-  const hasMax = useMemo(() => Boolean(max && max !== amount), [max, amount])
-  const [showMax, setShowMax] = useState<boolean>(hasMax)
-  useEffect(() => setShowMax((hasMax && input.current?.contains(document.activeElement)) ?? false), [hasMax])
-  const onBlur = useCallback((e) => {
-    // Filters out clicks on input or maxButton, because onBlur fires before onClickMax.
-    if (!input.current?.contains(e.relatedTarget) && !maxButton.current?.contains(e.relatedTarget)) {
-      setShowMax(false)
-    }
-  }, [])
-  const onClickMax = useCallback(() => {
-    onChangeInput(max || '')
-    setShowMax(false)
-    setImmediate(() => {
-      input.current?.focus()
-      // Brings the start of the input into view. NB: This only works for clicks, not eg keyboard interactions.
-      input.current?.setSelectionRange(0, null)
-    })
-  }, [max, onChangeInput])
-
-  return (
-    <Column gap={0.25}>
-      <TokenInputRow gap={0.5} onBlur={onBlur}>
-        <ThemedText.H2>
-          <ValueInput
-            value={amount}
-            onFocus={() => setShowMax(hasMax)}
-            onChange={onChangeInput}
-            disabled={disabled || !currency}
-            isLoading={Boolean(loading)}
-            ref={input}
-          ></ValueInput>
-        </ThemedText.H2>
-        {showMax && (
-          <MaxButton onClick={onClickMax} ref={maxButton}>
-            {/* Without a tab index, Safari would not populate the FocusEvent.relatedTarget needed by onBlur. */}
-            <ThemedText.ButtonMedium tabIndex={-1}>
-              <Trans>Max</Trans>
-            </ThemedText.ButtonMedium>
-          </MaxButton>
-        )}
-        <TokenSelect value={currency} collapsed={showMax} disabled={disabled} onSelect={onSelect} />
-      </TokenInputRow>
-      {children}
-    </Column>
-  )
-}

src/lib/components/Swap/Toolbar/Caption.tsx

-import { Trans } from '@lingui/macro'
-import { Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
-import Column from 'lib/components/Column'
-import Rule from 'lib/components/Rule'
-import Tooltip from 'lib/components/Tooltip'
-import { loadingCss } from 'lib/css/loading'
-import { PriceImpact } from 'lib/hooks/useUSDCPriceImpact'
-import { AlertTriangle, Icon, Info, InlineSpinner } from 'lib/icons'
-import styled, { ThemedText } from 'lib/theme'
-import { ReactNode, useCallback } from 'react'
-import { InterfaceTrade } from 'state/routing/types'
-
-import Price from '../Price'
-import RoutingDiagram from '../RoutingDiagram'
-
-const Loading = styled.span`
-  color: ${({ theme }) => theme.secondary};
-  ${loadingCss};
-`
-
-interface CaptionProps {
-  icon?: Icon
-  caption: ReactNode
-}
-
-function Caption({ icon: Icon = AlertTriangle, caption }: CaptionProps) {
-  return (
-    <>
-      <Icon color="secondary" />
-      {caption}
-    </>
-  )
-}
-
-export function Connecting() {
-  return (
-    <Caption
-      icon={InlineSpinner}
-      caption={
-        <Loading>
-          <Trans>Connecting…</Trans>
-        </Loading>
-      }
-    />
-  )
-}
-
-export function ConnectWallet() {
-  return <Caption caption={<Trans>Connect wallet to swap</Trans>} />
-}
-
-export function UnsupportedNetwork() {
-  return <Caption caption={<Trans>Unsupported network - switch to another to trade</Trans>} />
-}
-
-export function InsufficientBalance({ currency }: { currency: Currency }) {
-  return <Caption caption={<Trans>Insufficient {currency?.symbol} balance</Trans>} />
-}
-
-export function InsufficientLiquidity() {
-  return <Caption caption={<Trans>Insufficient liquidity in the pool for your trade</Trans>} />
-}
-
-export function Error() {
-  return <Caption caption={<Trans>Error fetching trade</Trans>} />
-}
-
-export function Empty() {
-  return <Caption icon={Info} caption={<Trans>Enter an amount</Trans>} />
-}
-
-export function LoadingTrade() {
-  return (
-    <Caption
-      icon={InlineSpinner}
-      caption={
-        <Loading>
-          <Trans>Fetching best price…</Trans>
-        </Loading>
-      }
-    />
-  )
-}
-
-export function WrapCurrency({ inputCurrency, outputCurrency }: { inputCurrency: Currency; outputCurrency: Currency }) {
-  const Text = useCallback(
-    () => (
-      <Trans>
-        Convert {inputCurrency.symbol} to {outputCurrency.symbol}
-      </Trans>
-    ),
-    [inputCurrency.symbol, outputCurrency.symbol]
-  )
-
-  return <Caption icon={Info} caption={<Text />} />
-}
-
-export function Trade({
-  trade,
-  outputUSDC,
-  impact,
-}: {
-  trade: InterfaceTrade<Currency, Currency, TradeType>
-  outputUSDC?: CurrencyAmount<Currency>
-  impact?: PriceImpact
-}) {
-  return (
-    <>
-      <Tooltip placement="bottom" icon={impact?.warning ? AlertTriangle : Info}>
-        <Column gap={0.75}>
-          {impact?.warning && (
-            <>
-              <ThemedText.Caption>
-                The output amount is estimated at {impact.toString()} less than the input amount due to high price
-                impact
-              </ThemedText.Caption>
-              <Rule />
-            </>
-          )}
-          <RoutingDiagram trade={trade} />
-        </Column>
-      </Tooltip>
-      <Price trade={trade} outputUSDC={outputUSDC} />
-    </>
-  )
-}

src/lib/components/Swap/Toolbar/index.tsx

-import { ALL_SUPPORTED_CHAIN_IDS } from 'constants/chains'
-import { useIsAmountPopulated, useSwapInfo } from 'lib/hooks/swap'
-import useWrapCallback, { WrapType } from 'lib/hooks/swap/useWrapCallback'
-import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
-import { largeIconCss } from 'lib/icons'
-import { Field } from 'lib/state/swap'
-import styled, { ThemedText } from 'lib/theme'
-import { memo, useMemo } from 'react'
-import { TradeState } from 'state/routing/types'
-
-import Row from '../../Row'
-import Rule from '../../Rule'
-import * as Caption from './Caption'
-
-const ToolbarRow = styled(Row)`
-  padding: 0.5em 0;
-  ${largeIconCss}
-`
-
-export default memo(function Toolbar() {
-  const { active, activating, chainId } = useActiveWeb3React()
-  const {
-    [Field.INPUT]: { currency: inputCurrency, balance: inputBalance, amount: inputAmount },
-    [Field.OUTPUT]: { currency: outputCurrency, usdc: outputUSDC },
-    trade: { trade, state },
-    impact,
-  } = useSwapInfo()
-  const isAmountPopulated = useIsAmountPopulated()
-  const { type: wrapType } = useWrapCallback()
-  const caption = useMemo(() => {
-    if (!active || !chainId) {
-      if (activating) return <Caption.Connecting />
-      return <Caption.ConnectWallet />
-    }
-
-    if (!ALL_SUPPORTED_CHAIN_IDS.includes(chainId)) {
-      return <Caption.UnsupportedNetwork />
-    }
-
-    if (inputCurrency && outputCurrency && isAmountPopulated) {
-      if (state === TradeState.SYNCING || state === TradeState.LOADING) {
-        return <Caption.LoadingTrade />
-      }
-      if (inputBalance && inputAmount?.greaterThan(inputBalance)) {
-        return <Caption.InsufficientBalance currency={inputCurrency} />
-      }
-      if (wrapType !== WrapType.NONE) {
-        return <Caption.WrapCurrency inputCurrency={inputCurrency} outputCurrency={outputCurrency} />
-      }
-      if (state === TradeState.NO_ROUTE_FOUND || (trade && !trade.swaps)) {
-        return <Caption.InsufficientLiquidity />
-      }
-      if (trade?.inputAmount && trade.outputAmount) {
-        return <Caption.Trade trade={trade} outputUSDC={outputUSDC} impact={impact} />
-      }
-      if (state === TradeState.INVALID) {
-        return <Caption.Error />
-      }
-    }
-
-    return <Caption.Empty />
-  }, [
-    activating,
-    active,
-    chainId,
-    impact,
-    inputAmount,
-    inputBalance,
-    inputCurrency,
-    isAmountPopulated,
-    outputCurrency,
-    outputUSDC,
-    state,
-    trade,
-    wrapType,
-  ])
-
-  return (
-    <>
-      <Rule />
-      <ThemedText.Caption>
-        <ToolbarRow justify="flex-start" gap={0.5} iconSize={4 / 3}>
-          {caption}
-        </ToolbarRow>
-      </ThemedText.Caption>
-    </>
-  )
-})

src/lib/components/Swap/index.tsx

-import { Trans } from '@lingui/macro'
-import { useAtom } from 'jotai'
-import { SwapInfoProvider } from 'lib/hooks/swap/useSwapInfo'
-import useSyncConvenienceFee, { FeeOptions } from 'lib/hooks/swap/useSyncConvenienceFee'
-import useSyncTokenDefaults, { TokenDefaults } from 'lib/hooks/swap/useSyncTokenDefaults'
-import { usePendingTransactions } from 'lib/hooks/transactions'
-import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
-import useHasFocus from 'lib/hooks/useHasFocus'
-import useOnSupportedNetwork from 'lib/hooks/useOnSupportedNetwork'
-import { displayTxHashAtom } from 'lib/state/swap'
-import { SwapTransactionInfo, Transaction, TransactionType, WrapTransactionInfo } from 'lib/state/transactions'
-import { useState } from 'react'
-
-import Dialog from '../Dialog'
-import Header from '../Header'
-import { BoundaryProvider } from '../Popover'
-import Wallet from '../Wallet'
-import Input from './Input'
-import Output from './Output'
-import ReverseButton from './ReverseButton'
-import Settings from './Settings'
-import { StatusDialog } from './Status'
-import SwapButton from './SwapButton'
-import Toolbar from './Toolbar'
-import useValidate from './useValidate'
-
-function getTransactionFromMap(
-  txs: { [hash: string]: Transaction },
-  hash?: string
-): Transaction<SwapTransactionInfo | WrapTransactionInfo> | undefined {
-  if (hash) {
-    const tx = txs[hash]
-    if (tx?.info?.type === TransactionType.SWAP) {
-      return tx as Transaction<SwapTransactionInfo>
-    }
-    if (tx?.info?.type === TransactionType.WRAP) {
-      return tx as Transaction<WrapTransactionInfo>
-    }
-  }
-  return
-}
-
-export interface SwapProps extends TokenDefaults, FeeOptions {
-  onConnectWallet?: () => void
-}
-
-export default function Swap(props: SwapProps) {
-  useValidate(props)
-  useSyncConvenienceFee(props)
-  useSyncTokenDefaults(props)
-
-  const { active, account } = useActiveWeb3React()
-  const [wrapper, setWrapper] = useState<HTMLDivElement | null>(null)
-
-  const [displayTxHash, setDisplayTxHash] = useAtom(displayTxHashAtom)
-  const pendingTxs = usePendingTransactions()
-  const displayTx = getTransactionFromMap(pendingTxs, displayTxHash)
-
-  const onSupportedNetwork = useOnSupportedNetwork()
-  const isDisabled = !(active && onSupportedNetwork)
-
-  const focused = useHasFocus(wrapper)
-
-  return (
-    <>
-      <Header title={<Trans>Swap</Trans>}>
-        {active && <Wallet disabled={!account} onClick={props.onConnectWallet} />}
-        <Settings disabled={isDisabled} />
-      </Header>
-      <div ref={setWrapper}>
-        <BoundaryProvider value={wrapper}>
-          <SwapInfoProvider disabled={isDisabled}>
-            <Input disabled={isDisabled} focused={focused} />
-            <ReverseButton disabled={isDisabled} />
-            <Output disabled={isDisabled} focused={focused}>
-              <Toolbar />
-              <SwapButton disabled={isDisabled} />
-            </Output>
-          </SwapInfoProvider>
-        </BoundaryProvider>
-      </div>
-      {displayTx && (
-        <Dialog color="dialog">
-          <StatusDialog tx={displayTx} onClose={() => setDisplayTxHash()} />
-        </Dialog>
-      )}
-    </>
-  )
-}

src/lib/components/Swap/useValidate.tsx

-import { IntegrationError } from 'lib/errors'
-import { FeeOptions } from 'lib/hooks/swap/useSyncConvenienceFee'
-import { DefaultAddress, TokenDefaults } from 'lib/hooks/swap/useSyncTokenDefaults'
-import { PropsWithChildren, useEffect } from 'react'
-
-import { isAddress } from '../../../utils'
-
-function isAddressOrAddressMap(addressOrMap: DefaultAddress): boolean {
-  if (typeof addressOrMap === 'object') {
-    return Object.values(addressOrMap).every((address) => isAddress(address))
-  }
-  if (typeof addressOrMap === 'string') {
-    return typeof isAddress(addressOrMap) === 'string'
-  }
-  return false
-}
-
-type ValidatorProps = PropsWithChildren<TokenDefaults & FeeOptions>
-
-export default function useValidate(props: ValidatorProps) {
-  const { convenienceFee, convenienceFeeRecipient } = props
-  useEffect(() => {
-    if (convenienceFee) {
-      if (convenienceFee > 100 || convenienceFee < 0) {
-        throw new IntegrationError(`convenienceFee must be between 0 and 100 (you set it to ${convenienceFee}).`)
-      }
-      if (!convenienceFeeRecipient) {
-        throw new IntegrationError('convenienceFeeRecipient is required when convenienceFee is set.')
-      }
-
-      if (typeof convenienceFeeRecipient === 'string') {
-        if (!isAddress(convenienceFeeRecipient)) {
-          throw new IntegrationError(
-            `convenienceFeeRecipient must be a valid address (you set it to ${convenienceFeeRecipient}).`
-          )
-        }
-      } else if (typeof convenienceFeeRecipient === 'object') {
-        Object.values(convenienceFeeRecipient).forEach((recipient) => {
-          if (!isAddress(recipient)) {
-            const values = Object.values(convenienceFeeRecipient).join(', ')
-            throw new IntegrationError(
-              `All values in convenienceFeeRecipient object must be valid addresses (you used ${values}).`
-            )
-          }
-        })
-      }
-    }
-  }, [convenienceFee, convenienceFeeRecipient])
-
-  const { defaultInputAmount, defaultOutputAmount } = props
-  useEffect(() => {
-    if (defaultOutputAmount && defaultInputAmount) {
-      throw new IntegrationError('defaultInputAmount and defaultOutputAmount may not both be defined.')
-    }
-    if (defaultInputAmount && (isNaN(+defaultInputAmount) || defaultInputAmount < 0)) {
-      throw new IntegrationError(`defaultInputAmount must be a positive number (you set it to ${defaultInputAmount})`)
-    }
-    if (defaultOutputAmount && (isNaN(+defaultOutputAmount) || defaultOutputAmount < 0)) {
-      throw new IntegrationError(
-        `defaultOutputAmount must be a positive number (you set it to ${defaultOutputAmount}).`
-      )
-    }
-  }, [defaultInputAmount, defaultOutputAmount])
-
-  const { defaultInputTokenAddress, defaultOutputTokenAddress } = props
-  useEffect(() => {
-    if (
-      defaultInputTokenAddress &&
-      !isAddressOrAddressMap(defaultInputTokenAddress) &&
-      defaultInputTokenAddress !== 'NATIVE'
-    ) {
-      throw new IntegrationError(
-        `defaultInputTokenAddress must be a valid address or "NATIVE" (you set it to ${defaultInputTokenAddress}).`
-      )
-    }
-    if (
-      defaultOutputTokenAddress &&
-      !isAddressOrAddressMap(defaultOutputTokenAddress) &&
-      defaultOutputTokenAddress !== 'NATIVE'
-    ) {
-      throw new IntegrationError(
-        `defaultOutputTokenAddress must be a valid address or "NATIVE" (you set it to ${defaultOutputTokenAddress}).`
-      )
-    }
-  }, [defaultInputTokenAddress, defaultOutputTokenAddress])
-}

src/lib/components/Toggle.tsx

-import { t } from '@lingui/macro'
-import styled, { ThemedText } from 'lib/theme'
-import { transparentize } from 'polished'
-import { KeyboardEvent, useCallback } from 'react'
-
-const Input = styled.input<{ text: string }>`
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  align-items: center;
-  appearance: none;
-  background: ${({ theme }) => theme.interactive};
-  border: none;
-  border-radius: ${({ theme }) => theme.borderRadius * 1.25}em;
-  cursor: pointer;
-  display: flex;
-  font-size: inherit;
-  font-weight: inherit;
-  height: 2em;
-  margin: 0;
-  padding: 0;
-
-  position: relative;
-  width: 4.5em;
-
-  :before {
-    background-color: ${({ theme }) => theme.secondary};
-    border-radius: ${({ theme }) => theme.borderRadius * 50}%;
-    content: '';
-    display: inline-block;
-    height: 1.5em;
-    margin-left: 0.25em;
-    position: absolute;
-    width: 1.5em;
-  }
-
-  :hover:before {
-    background-color: ${({ theme }) => transparentize(0.3, theme.secondary)};
-  }
-
-  :checked:before {
-    background-color: ${({ theme }) => theme.accent};
-    margin-left: 2.75em;
-  }
-
-  :hover:checked:before {
-    background-color: ${({ theme }) => transparentize(0.3, theme.accent)};
-  }
-
-  :after {
-    content: '${({ text }) => text}';
-    margin-left: 1.75em;
-    text-align: center;
-    width: 2.75em;
-  }
-
-  :checked:after {
-    margin-left: 0;
-  }
-
-  :before {
-    transition: margin 0.25s ease;
-  }
-`
-
-interface ToggleProps {
-  checked: boolean
-  onToggle: () => void
-}
-
-export default function Toggle({ checked, onToggle }: ToggleProps) {
-  const onKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        onToggle()
-      }
-    },
-    [onToggle]
-  )
-  return (
-    <ThemedText.ButtonMedium>
-      <Input
-        type="checkbox"
-        checked={checked}
-        text={checked ? t`ON` : t`OFF`}
-        onChange={() => onToggle()}
-        onKeyDown={onKeyDown}
-      />
-    </ThemedText.ButtonMedium>
-  )
-}

src/lib/components/TokenImg.tsx

-import { Currency } from '@uniswap/sdk-core'
-import { useToken } from 'lib/hooks/useCurrency'
-import useCurrencyLogoURIs from 'lib/hooks/useCurrencyLogoURIs'
-import { MissingToken } from 'lib/icons'
-import styled from 'lib/theme'
-import { useCallback, useMemo, useState } from 'react'
-
-const badSrcs = new Set<string>()
-
-interface BaseProps {
-  token: Currency
-}
-
-type TokenImgProps = BaseProps & Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof BaseProps>
-
-function TokenImg({ token, ...rest }: TokenImgProps) {
-  // Use the wrapped token info so that it includes the logoURI.
-  const tokenInfo = useToken(token.isToken ? token.wrapped.address : undefined) ?? token
-
-  const srcs = useCurrencyLogoURIs(tokenInfo)
-
-  const [attempt, setAttempt] = useState(0)
-  const src = useMemo(() => {
-    // Trigger a re-render when an error occurs.
-    void attempt
-
-    return srcs.find((src) => !badSrcs.has(src))
-  }, [attempt, srcs])
-  const onError = useCallback(
-    (e) => {
-      if (src) badSrcs.add(src)
-      setAttempt((attempt) => ++attempt)
-    },
-    [src]
-  )
-
-  if (!src) return <MissingToken color="secondary" {...rest} />
-
-  const alt = tokenInfo.name || tokenInfo.symbol
-  return <img src={src} alt={alt} key={alt} onError={onError} {...rest} />
-}
-
-export default styled(TokenImg)<{ size?: number }>`
-  // radial-gradient calculates distance from the corner, not the edge: divide by sqrt(2)
-  background: radial-gradient(
-    ${({ theme }) => theme.module} calc(100% / ${Math.sqrt(2)} - 1.5px),
-    ${({ theme }) => theme.outline} calc(100% / ${Math.sqrt(2)} - 1.5px)
-  );
-  border-radius: 100%;
-  height: ${({ size }) => size || 1}em;
-  width: ${({ size }) => size || 1}em;
-`

src/lib/components/TokenSelect.fixture.tsx

-import DEFAULT_TOKEN_LIST from '@uniswap/default-token-list'
-import { TokenListProvider } from 'lib/hooks/useTokenList'
-
-import { Modal } from './Dialog'
-import { TokenSelectDialog } from './TokenSelect'
-
-export default function Fixture() {
-  return (
-    <Modal color="module">
-      <TokenListProvider list={DEFAULT_TOKEN_LIST.tokens}>
-        <TokenSelectDialog onSelect={() => void 0} onClose={() => void 0} />
-      </TokenListProvider>
-    </Modal>
-  )
-}

src/lib/components/TokenSelect/NoTokensAvailableOnNetwork.tsx

-import { Trans } from '@lingui/macro'
-import { HelpCircle } from 'lib/icons'
-import styled, { css, ThemedText } from 'lib/theme'
-
-import Column from '../Column'
-
-const HelpCircleIcon = styled(HelpCircle)`
-  height: 64px;
-  margin-bottom: 12px;
-  stroke: ${({ theme }) => theme.secondary};
-  width: 64px;
-`
-
-const wrapperCss = css`
-  display: flex;
-  height: 80%;
-  text-align: center;
-  width: 100%;
-`
-
-export default function NoTokensAvailableOnNetwork() {
-  return (
-    <Column align="center" justify="center" css={wrapperCss}>
-      <HelpCircleIcon />
-      <ThemedText.Body1 color="primary">
-        <Trans>No tokens are available on this network. Please switch to another network.</Trans>
-      </ThemedText.Body1>
-    </Column>
-  )
-}

src/lib/components/TokenSelect/TokenBase.tsx

-import { Currency } from '@uniswap/sdk-core'
-import styled, { ThemedText } from 'lib/theme'
-
-import Button from '../Button'
-import Row from '../Row'
-import TokenImg from '../TokenImg'
-
-const TokenButton = styled(Button)`
-  border-radius: ${({ theme }) => theme.borderRadius}em;
-  padding: 0.25em 0.75em 0.25em 0.25em;
-`
-
-interface TokenBaseProps {
-  value: Currency
-  onClick: (value: Currency) => void
-}
-
-export default function TokenBase({ value, onClick }: TokenBaseProps) {
-  return (
-    <TokenButton onClick={() => onClick(value)}>
-      <ThemedText.ButtonMedium>
-        <Row gap={0.5}>
-          <TokenImg token={value} size={1.5} />
-          {value.symbol}
-        </Row>
-      </ThemedText.ButtonMedium>
-    </TokenButton>
-  )
-}

src/lib/components/TokenSelect/TokenButton.tsx

-import { Trans } from '@lingui/macro'
-import { Currency } from '@uniswap/sdk-core'
-import { ChevronDown } from 'lib/icons'
-import styled, { css, ThemedText } from 'lib/theme'
-import { useEffect, useMemo, useState } from 'react'
-
-import Button from '../Button'
-import Row from '../Row'
-import TokenImg from '../TokenImg'
-
-const transitionCss = css`
-  transition: background-color 0.125s linear, border-color 0.125s linear, filter 0.125s linear, width 0.125s ease-out;
-`
-
-const StyledTokenButton = styled(Button)`
-  border-radius: ${({ theme }) => theme.borderRadius}em;
-  padding: 0.25em;
-
-  :enabled {
-    ${({ transition }) => transition && transitionCss};
-  }
-`
-
-const TokenButtonRow = styled(Row)<{ empty: boolean; collapsed: boolean }>`
-  float: right;
-  height: 1.2em;
-  // max-width must have an absolute value in order to transition.
-  max-width: ${({ collapsed }) => (collapsed ? '1.2em' : '12em')};
-  padding-left: ${({ empty }) => empty && 0.5}em;
-  width: fit-content;
-  overflow: hidden;
-  transition: max-width 0.25s linear;
-
-  img {
-    min-width: 1.2em;
-  }
-`
-
-interface TokenButtonProps {
-  value?: Currency
-  collapsed: boolean
-  disabled?: boolean
-  onClick: () => void
-}
-
-export default function TokenButton({ value, collapsed, disabled, onClick }: TokenButtonProps) {
-  const buttonBackgroundColor = useMemo(() => (value ? 'interactive' : 'accent'), [value])
-  const contentColor = useMemo(() => (value || disabled ? 'onInteractive' : 'onAccent'), [value, disabled])
-
-  // Transition the button only if transitioning from a disabled state.
-  // This makes initialization cleaner without adding distracting UX to normal swap flows.
-  const [shouldTransition, setShouldTransition] = useState(disabled)
-  useEffect(() => {
-    if (disabled) {
-      setShouldTransition(true)
-    }
-  }, [disabled])
-
-  // width must have an absolute value in order to transition, so it is taken from the row ref.
-  const [row, setRow] = useState<HTMLDivElement | null>(null)
-  const style = useMemo(() => {
-    if (!shouldTransition) return
-    return { width: row ? row.clientWidth + /* padding= */ 8 + /* border= */ 2 : undefined }
-  }, [row, shouldTransition])
-
-  return (
-    <StyledTokenButton
-      onClick={onClick}
-      color={buttonBackgroundColor}
-      disabled={disabled}
-      style={style}
-      transition={shouldTransition}
-      onTransitionEnd={() => setShouldTransition(false)}
-    >
-      <ThemedText.ButtonLarge color={contentColor}>
-        <TokenButtonRow
-          gap={0.4}
-          empty={!value}
-          collapsed={collapsed}
-          // ref is used to set an absolute width, so it must be reset for each value passed.
-          // To force this, value?.symbol is passed as a key.
-          ref={setRow}
-          key={value?.symbol}
-        >
-          {value ? (
-            <>
-              <TokenImg token={value} size={1.2} />
-              {value.symbol}
-            </>
-          ) : (
-            <Trans>Select a token</Trans>
-          )}
-          <ChevronDown color={contentColor} strokeWidth={3} />
-        </TokenButtonRow>
-      </ThemedText.ButtonLarge>
-    </StyledTokenButton>
-  )
-}

src/lib/components/TokenSelect/TokenOptions.tsx

-import { useLingui } from '@lingui/react'
-import { Currency } from '@uniswap/sdk-core'
-import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
-import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'
-import useNativeEvent from 'lib/hooks/useNativeEvent'
-import useScrollbar from 'lib/hooks/useScrollbar'
-import styled, { ThemedText } from 'lib/theme'
-import {
-  ComponentClass,
-  CSSProperties,
-  forwardRef,
-  KeyboardEvent,
-  memo,
-  SyntheticEvent,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react'
-import AutoSizer from 'react-virtualized-auto-sizer'
-import { areEqual, FixedSizeList, FixedSizeListProps } from 'react-window'
-import { currencyId } from 'utils/currencyId'
-import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
-
-import { BaseButton } from '../Button'
-import Column from '../Column'
-import Row from '../Row'
-import TokenImg from '../TokenImg'
-
-const TokenButton = styled(BaseButton)`
-  border-radius: 0;
-  outline: none;
-  padding: 0.5em 0.75em;
-`
-
-const ITEM_SIZE = 56
-type ItemData = Currency[]
-interface FixedSizeTokenList extends FixedSizeList<ItemData>, ComponentClass<FixedSizeListProps<ItemData>> {}
-const TokenList = styled(FixedSizeList as unknown as FixedSizeTokenList)<{
-  hover: number
-  scrollbar?: ReturnType<typeof useScrollbar>
-}>`
-  ${TokenButton}[data-index='${({ hover }) => hover}'] {
-    background-color: ${({ theme }) => theme.onHover(theme.module)};
-  }
-
-  ${({ scrollbar }) => scrollbar}
-  overscroll-behavior: none; // prevent Firefox's bouncy overscroll effect (because it does not trigger the scroll handler)
-`
-const OnHover = styled.div<{ hover: number }>`
-  background-color: ${({ theme }) => theme.onHover(theme.module)};
-  height: ${ITEM_SIZE}px;
-  left: 0;
-  position: absolute;
-  top: ${({ hover }) => hover * ITEM_SIZE}px;
-  width: 100%;
-`
-
-interface TokenOptionProps {
-  index: number
-  value: Currency
-  style: CSSProperties
-}
-
-interface BubbledEvent extends SyntheticEvent {
-  index?: number
-  token?: Currency
-  ref?: HTMLButtonElement
-}
-
-const TokenBalance = styled.div<{ isLoading: boolean }>`
-  background-color: ${({ theme, isLoading }) => isLoading && theme.secondary};
-  border-radius: 0.25em;
-  padding: 0.375em 0;
-`
-
-function TokenOption({ index, value, style }: TokenOptionProps) {
-  const { i18n } = useLingui()
-  const ref = useRef<HTMLButtonElement>(null)
-  // Annotate the event to be handled later instead of passing in handlers to avoid rerenders.
-  // This prevents token logos from reloading and flashing on the screen.
-  const onEvent = (e: BubbledEvent) => {
-    e.index = index
-    e.token = value
-    e.ref = ref.current ?? undefined
-  }
-
-  const { account } = useActiveWeb3React()
-  const balance = useCurrencyBalance(account, value)
-
-  return (
-    <TokenButton
-      data-index={index}
-      style={style}
-      onClick={onEvent}
-      onBlur={onEvent}
-      onFocus={onEvent}
-      onMouseMove={onEvent}
-      onKeyDown={onEvent}
-      ref={ref}
-    >
-      <ThemedText.Body1>
-        <Row>
-          <Row gap={0.5}>
-            <TokenImg token={value} size={1.5} />
-            <Column flex gap={0.125} align="flex-start">
-              <ThemedText.Subhead1>{value.symbol}</ThemedText.Subhead1>
-              <ThemedText.Caption color="secondary">{value.name}</ThemedText.Caption>
-            </Column>
-          </Row>
-          <TokenBalance isLoading={Boolean(account) && !balance}>
-            {balance?.greaterThan(0) && formatCurrencyAmount(balance, 2, i18n.locale)}
-          </TokenBalance>
-        </Row>
-      </ThemedText.Body1>
-    </TokenButton>
-  )
-}
-
-const itemKey = (index: number, tokens: ItemData) => currencyId(tokens[index])
-const ItemRow = memo(function ItemRow({
-  data: tokens,
-  index,
-  style,
-}: {
-  data: ItemData
-  index: number
-  style: CSSProperties
-}) {
-  return <TokenOption index={index} value={tokens[index]} style={style} />
-},
-areEqual)
-
-interface TokenOptionsHandle {
-  onKeyDown: (e: KeyboardEvent) => void
-  blur: () => void
-}
-
-interface TokenOptionsProps {
-  tokens: Currency[]
-  onSelect: (token: Currency) => void
-}
-
-const TokenOptions = forwardRef<TokenOptionsHandle, TokenOptionsProps>(function TokenOptions(
-  { tokens, onSelect }: TokenOptionsProps,
-  ref
-) {
-  const [focused, setFocused] = useState(false)
-  const [hover, setHover] = useState<{ index: number; currency?: Currency }>({ index: -1 })
-  useEffect(() => {
-    setHover((hover) => {
-      const index = hover.currency ? tokens.indexOf(hover.currency) : -1
-      return { index, currency: tokens[index] }
-    })
-  }, [tokens])
-
-  const list = useRef<FixedSizeList>(null)
-  const [element, setElement] = useState<HTMLElement | null>(null)
-  const scrollTo = useCallback(
-    (index: number | undefined) => {
-      if (index === undefined) return
-      list.current?.scrollToItem(index)
-      if (focused) {
-        element?.querySelector<HTMLElement>(`[data-index='${index}']`)?.focus()
-      }
-      setHover({ index, currency: tokens[index] })
-    },
-    [element, focused, tokens]
-  )
-
-  const onKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-        if (e.key === 'ArrowDown' && hover.index < tokens.length - 1) {
-          scrollTo(hover.index + 1)
-        } else if (e.key === 'ArrowUp' && hover.index > 0) {
-          scrollTo(hover.index - 1)
-        } else if (e.key === 'ArrowUp' && hover.index === -1) {
-          scrollTo(tokens.length - 1)
-        }
-        e.preventDefault()
-      }
-      if (e.key === 'Enter' && hover.index !== -1) {
-        onSelect(tokens[hover.index])
-      }
-    },
-    [hover.index, onSelect, scrollTo, tokens]
-  )
-  const blur = useCallback(() => setHover({ index: -1 }), [])
-  useImperativeHandle(ref, () => ({ onKeyDown, blur }), [blur, onKeyDown])
-
-  const onClick = useCallback(({ token }: BubbledEvent) => token && onSelect(token), [onSelect])
-  const onFocus = useCallback(
-    ({ index }: BubbledEvent) => {
-      setFocused(true)
-      scrollTo(index)
-    },
-    [scrollTo]
-  )
-  const onBlur = useCallback(() => setFocused(false), [])
-  const onMouseMove = useCallback(({ index }: BubbledEvent) => scrollTo(index), [scrollTo])
-
-  const scrollbar = useScrollbar(element, { padded: true })
-  const onHover = useRef<HTMLDivElement>(null)
-  // use native onscroll handler to capture Safari's bouncy overscroll effect
-  useNativeEvent(
-    element,
-    'scroll',
-    useCallback(() => {
-      if (element && onHover.current) {
-        // must be set synchronously to avoid jank (avoiding useState)
-        onHover.current.style.marginTop = `${-element.scrollTop}px`
-      }
-    }, [element])
-  )
-
-  return (
-    <Column
-      align="unset"
-      grow
-      onKeyDown={onKeyDown}
-      onClick={onClick}
-      onBlur={onBlur}
-      onFocus={onFocus}
-      onMouseMove={onMouseMove}
-      style={{ overflow: 'hidden' }}
-    >
-      {/* OnHover is a workaround to Safari's incorrect (overflow: overlay) implementation */}
-      <OnHover hover={hover.index} ref={onHover} />
-      <AutoSizer disableWidth>
-        {({ height }) => (
-          <TokenList
-            hover={hover.index}
-            height={height}
-            width="100%"
-            itemCount={tokens.length}
-            itemData={tokens}
-            itemKey={itemKey}
-            itemSize={ITEM_SIZE}
-            className="scrollbar"
-            ref={list}
-            outerRef={setElement}
-            scrollbar={scrollbar}
-          >
-            {ItemRow}
-          </TokenList>
-        )}
-      </AutoSizer>
-    </Column>
-  )
-})
-
-export default TokenOptions

src/lib/components/TokenSelect/TokenOptionsSkeleton.tsx

-import styled, { ThemedText } from 'lib/theme'
-
-import Column from '../Column'
-import Row from '../Row'
-
-const Img = styled.div`
-  clip-path: circle(50%);
-  height: 1.5em;
-  width: 1.5em;
-`
-const Symbol = styled.div`
-  height: 0.75em;
-  width: 7em;
-`
-const Name = styled.div`
-  height: 0.5em;
-  width: 5.5em;
-`
-const Balance = styled.div`
-  padding: 0.375em 0;
-  width: 1.5em;
-`
-const TokenRow = styled.div`
-  outline: none;
-  padding: 0.6875em 0.75em;
-
-  ${Img}, ${Symbol}, ${Name}, ${Balance} {
-    background-color: ${({ theme }) => theme.secondary};
-    border-radius: 0.25em;
-  }
-`
-
-function TokenOption() {
-  return (
-    <TokenRow>
-      <ThemedText.Body1>
-        <Row>
-          <Row gap={0.5}>
-            <Img />
-            <Column flex gap={0.125} align="flex-start" justify="flex-center">
-              <ThemedText.Subhead1 style={{ display: 'flex' }}>
-                <Symbol />
-              </ThemedText.Subhead1>
-              <ThemedText.Caption style={{ display: 'flex' }}>
-                <Name />
-              </ThemedText.Caption>
-            </Column>
-          </Row>
-          <Balance />
-        </Row>
-      </ThemedText.Body1>
-    </TokenRow>
-  )
-}
-
-export default function TokenOptionsSkeleton() {
-  return (
-    <Column>
-      <TokenOption />
-      <TokenOption />
-      <TokenOption />
-      <TokenOption />
-      <TokenOption />
-    </Column>
-  )
-}

src/lib/components/TokenSelect/index.tsx

-import { t, Trans } from '@lingui/macro'
-import { Currency } from '@uniswap/sdk-core'
-import { Header as DialogHeader } from 'lib/components/Dialog'
-import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
-import { useCurrencyBalances } from 'lib/hooks/useCurrencyBalance'
-import useNativeCurrency from 'lib/hooks/useNativeCurrency'
-import useTokenList, { useIsTokenListLoaded, useQueryTokens } from 'lib/hooks/useTokenList'
-import styled, { ThemedText } from 'lib/theme'
-import { ElementRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-
-import Column from '../Column'
-import Dialog from '../Dialog'
-import { inputCss, StringInput } from '../Input'
-import Row from '../Row'
-import Rule from '../Rule'
-import NoTokensAvailableOnNetwork from './NoTokensAvailableOnNetwork'
-import TokenButton from './TokenButton'
-import TokenOptions from './TokenOptions'
-import TokenOptionsSkeleton from './TokenOptionsSkeleton'
-
-const SearchInput = styled(StringInput)`
-  ${inputCss}
-`
-
-function usePrefetchBalances() {
-  const { account } = useActiveWeb3React()
-  const tokenList = useTokenList()
-  const prefetchedTokenList = useRef<typeof tokenList>()
-  useCurrencyBalances(account, tokenList !== prefetchedTokenList.current ? tokenList : undefined)
-  prefetchedTokenList.current = tokenList
-}
-
-function useAreBalancesLoaded(): boolean {
-  const { account } = useActiveWeb3React()
-  const tokens = useTokenList()
-  const native = useNativeCurrency()
-  const currencies = useMemo(() => [native, ...tokens], [native, tokens])
-  const balances = useCurrencyBalances(account, currencies).filter(Boolean)
-  return !account || currencies.length === balances.length
-}
-
-interface TokenSelectDialogProps {
-  value?: Currency
-  onSelect: (token: Currency) => void
-  onClose: () => void
-}
-
-export function TokenSelectDialog({ value, onSelect, onClose }: TokenSelectDialogProps) {
-  const [query, setQuery] = useState('')
-  const list = useTokenList()
-  const tokens = useQueryTokens(query, list)
-
-  const isTokenListLoaded = useIsTokenListLoaded()
-  const areBalancesLoaded = useAreBalancesLoaded()
-  const [isLoaded, setIsLoaded] = useState(isTokenListLoaded && areBalancesLoaded)
-  // Give the balance-less tokens a small block period to avoid layout thrashing from re-sorting.
-  useEffect(() => {
-    if (!isLoaded) {
-      const timeout = setTimeout(() => setIsLoaded(true), 250)
-      return () => clearTimeout(timeout)
-    }
-    return
-  }, [isLoaded])
-  useEffect(
-    () => setIsLoaded(Boolean(query) || (isTokenListLoaded && areBalancesLoaded)),
-    [query, areBalancesLoaded, isTokenListLoaded]
-  )
-
-  const input = useRef<HTMLInputElement>(null)
-  useEffect(() => input.current?.focus({ preventScroll: true }), [input])
-
-  const [options, setOptions] = useState<ElementRef<typeof TokenOptions> | null>(null)
-
-  const { chainId } = useActiveWeb3React()
-  const listHasTokens = useMemo(() => list.some((token) => token.chainId === chainId), [chainId, list])
-
-  if (!listHasTokens && isLoaded) {
-    return (
-      <Dialog color="module" onClose={onClose}>
-        <DialogHeader title={<Trans>Select a token</Trans>} />
-        <NoTokensAvailableOnNetwork />
-      </Dialog>
-    )
-  }
-
-  return (
-    <Dialog color="module" onClose={onClose}>
-      <DialogHeader title={<Trans>Select a token</Trans>} />
-      <Column gap={0.75}>
-        <Row pad={0.75} grow>
-          <ThemedText.Body1>
-            <SearchInput
-              value={query}
-              onChange={setQuery}
-              placeholder={t`Search by token name or address`}
-              onKeyDown={options?.onKeyDown}
-              onBlur={options?.blur}
-              ref={input}
-            />
-          </ThemedText.Body1>
-        </Row>
-        <Rule padded />
-      </Column>
-      {isLoaded ? (
-        tokens.length ? (
-          <TokenOptions tokens={tokens} onSelect={onSelect} ref={setOptions} />
-        ) : (
-          <Column padded>
-            <Row justify="center">
-              <ThemedText.Body1 color="secondary">
-                <Trans>No results found.</Trans>
-              </ThemedText.Body1>
-            </Row>
-          </Column>
-        )
-      ) : (
-        <TokenOptionsSkeleton />
-      )}
-    </Dialog>
-  )
-}
-
-interface TokenSelectProps {
-  value?: Currency
-  collapsed: boolean
-  disabled?: boolean
-  onSelect: (value: Currency) => void
-}
-
-export default memo(function TokenSelect({ value, collapsed, disabled, onSelect }: TokenSelectProps) {
-  usePrefetchBalances()
-
-  const [open, setOpen] = useState(false)
-  const onOpen = useCallback(() => setOpen(true), [])
-  const selectAndClose = useCallback(
-    (value: Currency) => {
-      onSelect(value)
-      setOpen(false)
-    },
-    [onSelect, setOpen]
-  )
-  return (
-    <>
-      <TokenButton value={value} collapsed={collapsed} disabled={disabled} onClick={onOpen} />
-      {open && <TokenSelectDialog value={value} onSelect={selectAndClose} onClose={() => setOpen(false)} />}
-    </>
-  )
-})

src/lib/components/Tooltip.tsx

-import { Placement } from '@popperjs/core'
-import useHasFocus from 'lib/hooks/useHasFocus'
-import useHasHover from 'lib/hooks/useHasHover'
-import { HelpCircle, Icon } from 'lib/icons'
-import styled from 'lib/theme'
-import { ComponentProps, ReactNode, useRef } from 'react'
-
-import { IconButton } from './Button'
-import Popover from './Popover'
-
-export function useTooltip(tooltip: Node | null | undefined): boolean {
-  const hover = useHasHover(tooltip)
-  const focus = useHasFocus(tooltip)
-  return hover || focus
-}
-
-const IconTooltip = styled(IconButton)`
-  cursor: help;
-`
-
-interface TooltipProps {
-  icon?: Icon
-  iconProps?: ComponentProps<Icon>
-  children: ReactNode
-  placement?: Placement
-  offset?: number
-  contained?: true
-}
-
-export default function Tooltip({
-  icon: Icon = HelpCircle,
-  iconProps,
-  children,
-  placement = 'auto',
-  offset,
-  contained,
-}: TooltipProps) {
-  const tooltip = useRef<HTMLDivElement>(null)
-  const showTooltip = useTooltip(tooltip.current)
-  return (
-    <Popover content={children} show={showTooltip} placement={placement} offset={offset} contained={contained}>
-      <IconTooltip icon={Icon} iconProps={iconProps} ref={tooltip} />
-    </Popover>
-  )
-}

src/lib/components/Wallet.tsx

-import { Trans } from '@lingui/macro'
-import { Wallet as WalletIcon } from 'lib/icons'
-import { ThemedText } from 'lib/theme'
-
-import { TextButton } from './Button'
-import Row from './Row'
-
-interface WalletProps {
-  disabled?: boolean
-  onClick?: () => void
-}
-
-export default function Wallet({ disabled, onClick }: WalletProps) {
-  return disabled ? (
-    <TextButton disabled={!onClick} onClick={onClick} color="secondary" style={{ filter: 'none' }}>
-      <ThemedText.Caption>
-        <Row gap={0.5}>
-          <WalletIcon />
-          <Trans>Connect your wallet</Trans>
-        </Row>
-      </ThemedText.Caption>
-    </TextButton>
-  ) : null
-}

src/lib/cosmos.decorator.tsx

-import { JSXElementConstructor, ReactElement } from 'react'
-
-import Row from './components/Row'
-import Widget from './cosmos/components/Widget'
-
-export default function WidgetDecorator({
-  children,
-}: {
-  children: ReactElement<any, string | JSXElementConstructor<any>>
-}) {
-  return (
-    <Row justify="center">
-      <Widget>{children}</Widget>
-    </Row>
-  )
-}

src/lib/css/loading.ts

-import { css } from 'lib/theme'
-
-export const loadingOpacity = 0.6
-
-export const loadingCss = css`
-  filter: grayscale(1);
-  opacity: ${loadingOpacity};
-`
-
-// need to use isLoading as `loading` is a reserved prop
-export const loadingTransitionCss = css<{ isLoading: boolean }>`
-  opacity: ${({ isLoading }) => isLoading && loadingOpacity};
-  transition: color 0.125s linear, opacity ${({ isLoading }) => (isLoading ? 0 : 0.25)}s ease-in-out;
-`

src/lib/errors.ts

-export class IntegrationError extends Error {
-  constructor(message: string) {
-    super(message)
-    this.name = 'Integration Error'
-  }
-}

src/lib/hooks/useHasHover.ts

-import { useCallback, useEffect, useState } from 'react'
-
-export default function useHasHover(node: Node | null | undefined): boolean {
-  const [hasHover, setHasHover] = useState(false)
-  const onMouseEnter = useCallback(() => setHasHover(true), [])
-  const onMouseLeave = useCallback((e) => setHasHover(false), [])
-  useEffect(() => {
-    node?.addEventListener('mouseenter', onMouseEnter)
-    node?.addEventListener('mouseleave', onMouseLeave)
-    return () => {
-      node?.removeEventListener('mouseenter', onMouseEnter)
-      node?.removeEventListener('mouseleave', onMouseLeave)
-    }
-  }, [node, onMouseEnter, onMouseLeave])
-  return hasHover
-}