Update token list (#3520)

* feat: make Expando element

* fix: cleanup

* fix: simplify margin

* fix: summary height

* fix: special case gap transition

cypress/integration/swap.test.ts

@@ -3,11 +3,11 @@ describe('Swap', () => {
     cy.visit('/swap')
   })
 
-  it('starts with an ETH/USDC swap and quotes it', () => {
-    cy.get('#swap-currency-input .token-amount-input').should('have.value', '1')
+  it('starts with ETH selected by default', () => {
+    cy.get('#swap-currency-input .token-amount-input').should('have.value', '')
     cy.get('#swap-currency-input .token-symbol-container').should('contain.text', 'ETH')
-    cy.get('#swap-currency-output .token-amount-input').should('not.have.value', '')
-    cy.get('#swap-currency-output .token-symbol-container').should('contain.text', 'USDC')
+    cy.get('#swap-currency-output .token-amount-input').should('not.have.value')
+    cy.get('#swap-currency-output .token-symbol-container').should('contain.text', 'Select a token')
   })
 
   it('can enter an amount into input', () => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniswap/widgets",
-  "version": "0.0.20-beta",
+  "version": "0.0.23-beta",
   "description": "Uniswap Interface",
   "homepage": ".",
   "files": [
@@ -9,6 +9,7 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "main": "dist/cjs/index.cjs",
+  "module": "dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -214,7 +215,7 @@
     "@uniswap/redux-multicall": "^1.0.0",
     "@uniswap/router-sdk": "^1.0.3",
     "@uniswap/sdk-core": "^3.0.1",
-    "@uniswap/smart-order-router": "^2.5.10",
+    "@uniswap/smart-order-router": "^2.5.20",
     "@uniswap/token-lists": "^1.0.0-beta.27",
     "@uniswap/v2-sdk": "^3.0.1",
     "@uniswap/v3-sdk": "^3.8.2",

src/assets/svg/auto_router.svg

@@ -1,10 +0,0 @@
-<svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<defs>
- <linearGradient id="gradient1" 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(#gradient1)" />
-</svg>

src/assets/svg/dot_line.svg

@@ -1,3 +1,3 @@
-<svg width="100%" height="35"  viewBox="800 0 300 200" xmlns="http://www.w3.org/2000/svg">
-    <line x1="0" x2="2000" y1="100" y2="100" stroke="currentColor" stroke-width="20" stroke-linecap="round" stroke-dasharray="1, 45"/>
+<svg width="100%" height="35"  viewBox="850 0 300 200" xmlns="http://www.w3.org/2000/svg">
+    <line x1="0" x2="3000" y1="100" y2="100" stroke="currentColor" stroke-width="20" stroke-linecap="round" stroke-dasharray="1, 45"/>
 </svg>

src/components/PositionListItem/index.tsx

@@ -157,7 +157,7 @@ export function getPriceOrderingFromPositionForUI(position?: Position): {
 
   // if token1 is an ETH-/BTC-stable asset, set it as the base token
   const bases = [...Object.values(WRAPPED_NATIVE_CURRENCY), WBTC]
-  if (bases.some((base) => base.equals(token1))) {
+  if (bases.some((base) => base && base.equals(token1))) {
     return {
       priceLower: position.token0PriceUpper.invert(),
       priceUpper: position.token0PriceLower.invert(),

src/components/swap/AutoRouterIcon.tsx

@@ -0,0 +1,35 @@
+import { useRef } from 'react'
+
+let uniqueId = 0
+const getUniqueId = () => uniqueId++
+
+export default function AutoRouterIcon({ className, id }: { className?: string; id?: string }) {
+  const componentIdRef = useRef(id ?? getUniqueId())
+  const componentId = `AutoRouterIconGradient${componentIdRef.current}`
+
+  return (
+    <svg
+      width="23"
+      height="20"
+      viewBox="0 0 23 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <defs>
+        <linearGradient id={componentId} x1="0" y1="0" x2="1" y2="0" gradientTransform="rotate(95)">
+          <stop id="stop1" offset="0" stopColor="#2274E2" />
+          <stop id="stop1" offset="0.5" stopColor="#2274E2" />
+          <stop id="stop2" offset="1" stopColor="#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"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke={`url(#${componentId})`}
+      />
+    </svg>
+  )
+}

src/components/swap/RouterLabel.tsx

@@ -3,8 +3,8 @@ import useAutoRouterSupported from 'hooks/useAutoRouterSupported'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
-import { ReactComponent as AutoRouterIcon } from '../../assets/svg/auto_router.svg'
 import { ReactComponent as StaticRouterIcon } from '../../assets/svg/static_route.svg'
+import AutoRouterIcon from './AutoRouterIcon'
 
 const StyledAutoRouterIcon = styled(AutoRouterIcon)`
   height: 16px;

src/constants/chains.ts

@@ -39,7 +39,12 @@ export const ALL_SUPPORTED_CHAIN_IDS: SupportedChainId[] = Object.values(Support
   (id) => typeof id === 'number'
 ) as SupportedChainId[]
 
-export const SUPPORTED_GAS_ESTIMATE_CHAIN_IDS = [SupportedChainId.MAINNET, SupportedChainId.POLYGON]
+export const SUPPORTED_GAS_ESTIMATE_CHAIN_IDS = [
+  SupportedChainId.MAINNET,
+  SupportedChainId.POLYGON,
+  SupportedChainId.OPTIMISM,
+  SupportedChainId.ARBITRUM_ONE,
+]
 
 /**
  * All the chain IDs that are running the Ethereum protocol.

src/constants/governance.ts

@@ -23,3 +23,5 @@ export const DEFAULT_AVERAGE_BLOCK_TIME_IN_SECS = 13
 export const AVERAGE_BLOCK_TIME_IN_SECS: { [chainId: number]: number } = {
   1: DEFAULT_AVERAGE_BLOCK_TIME_IN_SECS,
 }
+
+export const LATEST_GOVERNOR_INDEX = 2

src/constants/routing.ts

@@ -44,7 +44,9 @@ type ChainCurrencyList = {
 }
 
 const WRAPPED_NATIVE_CURRENCIES_ONLY: ChainTokenList = Object.fromEntries(
-  Object.entries(WRAPPED_NATIVE_CURRENCY).map(([key, value]) => [key, [value]])
+  Object.entries(WRAPPED_NATIVE_CURRENCY)
+    .map(([key, value]) => [key, [value]])
+    .filter(Boolean)
 )
 
 // used to construct intermediary pairs for trading
@@ -96,7 +98,7 @@ export const ADDITIONAL_BASES: { [chainId: number]: { [tokenAddress: string]: To
  */
 export const CUSTOM_BASES: { [chainId: number]: { [tokenAddress: string]: Token[] } } = {
   [SupportedChainId.MAINNET]: {
-    [AMPL.address]: [DAI, WRAPPED_NATIVE_CURRENCY[SupportedChainId.MAINNET]],
+    [AMPL.address]: [DAI, WRAPPED_NATIVE_CURRENCY[SupportedChainId.MAINNET] as Token],
   },
 }
 
@@ -110,29 +112,35 @@ export const COMMON_BASES: ChainCurrencyList = {
     USDC_MAINNET,
     USDT,
     WBTC,
-    WRAPPED_NATIVE_CURRENCY[SupportedChainId.MAINNET],
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.MAINNET] as Token,
   ],
   [SupportedChainId.ROPSTEN]: [
     nativeOnChain(SupportedChainId.ROPSTEN),
-    WRAPPED_NATIVE_CURRENCY[SupportedChainId.ROPSTEN],
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.ROPSTEN] as Token,
   ],
   [SupportedChainId.RINKEBY]: [
     nativeOnChain(SupportedChainId.RINKEBY),
-    WRAPPED_NATIVE_CURRENCY[SupportedChainId.RINKEBY],
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.RINKEBY] as Token,
+  ],
+  [SupportedChainId.GOERLI]: [
+    nativeOnChain(SupportedChainId.GOERLI),
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.GOERLI] as Token,
+  ],
+  [SupportedChainId.KOVAN]: [
+    nativeOnChain(SupportedChainId.KOVAN),
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.KOVAN] as Token,
   ],
-  [SupportedChainId.GOERLI]: [nativeOnChain(SupportedChainId.GOERLI), WRAPPED_NATIVE_CURRENCY[SupportedChainId.GOERLI]],
-  [SupportedChainId.KOVAN]: [nativeOnChain(SupportedChainId.KOVAN), WRAPPED_NATIVE_CURRENCY[SupportedChainId.KOVAN]],
   [SupportedChainId.ARBITRUM_ONE]: [
     nativeOnChain(SupportedChainId.ARBITRUM_ONE),
     DAI_ARBITRUM_ONE,
     USDC_ARBITRUM,
     USDT_ARBITRUM_ONE,
     WBTC_ARBITRUM_ONE,
-    WRAPPED_NATIVE_CURRENCY[SupportedChainId.ARBITRUM_ONE],
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.ARBITRUM_ONE] as Token,
   ],
   [SupportedChainId.ARBITRUM_RINKEBY]: [
     nativeOnChain(SupportedChainId.ARBITRUM_RINKEBY),
-    WRAPPED_NATIVE_CURRENCY[SupportedChainId.ARBITRUM_RINKEBY],
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.ARBITRUM_RINKEBY] as Token,
   ],
   [SupportedChainId.OPTIMISM]: [
     nativeOnChain(SupportedChainId.OPTIMISM),
@@ -152,7 +160,7 @@ export const COMMON_BASES: ChainCurrencyList = {
   ],
   [SupportedChainId.POLYGON_MUMBAI]: [
     nativeOnChain(SupportedChainId.POLYGON_MUMBAI),
-    WRAPPED_NATIVE_CURRENCY[SupportedChainId.POLYGON_MUMBAI],
+    WRAPPED_NATIVE_CURRENCY[SupportedChainId.POLYGON_MUMBAI] as Token,
     WETH_POLYGON_MUMBAI,
   ],
 }

src/constants/tokenLists/unsupported.tokenlist.json

@@ -1108,6 +1108,13 @@
       "name": "Ukraine DAO",
       "symbol": "Ukraine",
       "decimals": 18
+    },
+    {
+      "chainId": 1,
+      "address": "0x8290D7a64F25e6b5002d98367E8367c1b532b534",
+      "name": "oneUNI",
+      "symbol": "oneUNI",
+      "decimals": 18
     }
   ]
 }

src/constants/tokens.ts

@@ -12,6 +12,7 @@ import {
   USDC_RINKEBY,
   USDC_ROPSTEN,
 } from '@uniswap/smart-order-router'
+import invariant from 'tiny-invariant'
 
 import { UNI_ADDRESS } from './addresses'
 import { SupportedChainId } from './chains'
@@ -208,8 +209,8 @@ export const UNI: { [chainId: number]: Token } = {
   [SupportedChainId.KOVAN]: new Token(SupportedChainId.KOVAN, UNI_ADDRESS[42], 18, 'UNI', 'Uniswap'),
 }
 
-export const WRAPPED_NATIVE_CURRENCY: { [chainId: number]: Token } = {
-  ...WETH9,
+export const WRAPPED_NATIVE_CURRENCY: { [chainId: number]: Token | undefined } = {
+  ...(WETH9 as Record<SupportedChainId, Token>),
   [SupportedChainId.OPTIMISM]: new Token(
     SupportedChainId.OPTIMISM,
     '0x4200000000000000000000000000000000000006',
@@ -265,7 +266,9 @@ class MaticNativeCurrency extends NativeCurrency {
 
   get wrapped(): Token {
     if (!isMatic(this.chainId)) throw new Error('Not matic')
-    return WRAPPED_NATIVE_CURRENCY[this.chainId]
+    const wrapped = WRAPPED_NATIVE_CURRENCY[this.chainId]
+    invariant(wrapped instanceof Token)
+    return wrapped
   }
 
   public constructor(chainId: number) {
@@ -276,7 +279,8 @@ class MaticNativeCurrency extends NativeCurrency {
 
 export class ExtendedEther extends Ether {
   public get wrapped(): Token {
-    if (this.chainId in WRAPPED_NATIVE_CURRENCY) return WRAPPED_NATIVE_CURRENCY[this.chainId]
+    const wrapped = WRAPPED_NATIVE_CURRENCY[this.chainId]
+    if (wrapped) return wrapped
     throw new Error('Unsupported chain ID')
   }
 

src/hooks/useBestTrade.ts

@@ -36,21 +36,8 @@ export function useBestTrade(
     debouncedOtherCurrency
   )
 
-  const isLoading = amountSpecified !== undefined && debouncedAmount === undefined
-
-  // consider trade debouncing when inputs/outputs do not match
-  const debouncing =
-    routingAPITrade.trade &&
-    amountSpecified &&
-    (tradeType === TradeType.EXACT_INPUT
-      ? !routingAPITrade.trade.inputAmount.equalTo(amountSpecified) ||
-        !amountSpecified.currency.equals(routingAPITrade.trade.inputAmount.currency) ||
-        !debouncedOtherCurrency?.equals(routingAPITrade.trade.outputAmount.currency)
-      : !routingAPITrade.trade.outputAmount.equalTo(amountSpecified) ||
-        !amountSpecified.currency.equals(routingAPITrade.trade.outputAmount.currency) ||
-        !debouncedOtherCurrency?.equals(routingAPITrade.trade.inputAmount.currency))
-
-  const useFallback = !autoRouterSupported || (!debouncing && routingAPITrade.state === TradeState.NO_ROUTE_FOUND)
+  const isLoading = routingAPITrade.state === TradeState.LOADING
+  const useFallback = !autoRouterSupported || routingAPITrade.state === TradeState.NO_ROUTE_FOUND
 
   // only use client side router if routing api trade failed or is not supported
   const bestV3Trade = useClientSideV3Trade(
@@ -63,9 +50,8 @@ export function useBestTrade(
   return useMemo(
     () => ({
       ...(useFallback ? bestV3Trade : routingAPITrade),
-      ...(debouncing ? { state: TradeState.SYNCING } : {}),
       ...(isLoading ? { state: TradeState.LOADING } : {}),
     }),
-    [bestV3Trade, debouncing, isLoading, routingAPITrade, useFallback]
+    [bestV3Trade, isLoading, routingAPITrade, useFallback]
   )
 }

src/hooks/useCurrentBlockTimestamp.ts

@@ -1,10 +1,15 @@
 import { BigNumber } from '@ethersproject/bignumber'
 import { useSingleCallResult } from 'lib/hooks/multicall'
+import { useMemo } from 'react'
 
 import { useInterfaceMulticall } from './useContract'
 
 // gets the current timestamp from the blockchain
 export default function useCurrentBlockTimestamp(): BigNumber | undefined {
   const multicall = useInterfaceMulticall()
-  return useSingleCallResult(multicall, 'getCurrentBlockTimestamp')?.result?.[0]
+  const resultStr: string | undefined = useSingleCallResult(
+    multicall,
+    'getCurrentBlockTimestamp'
+  )?.result?.[0]?.toString()
+  return useMemo(() => (typeof resultStr === 'string' ? BigNumber.from(resultStr) : undefined), [resultStr])
 }

src/hooks/useGasPrice.ts

@@ -1,5 +1,6 @@
 import JSBI from 'jsbi'
 import { useSingleCallResult } from 'lib/hooks/multicall'
+import { useMemo } from 'react'
 
 import { useContract } from './useContract'
 import useENSAddress from './useENSAddress'
@@ -22,5 +23,5 @@ export default function useGasPrice(): JSBI | undefined {
   const contract = useContract(address ?? undefined, CHAIN_DATA_ABI, false)
 
   const resultStr = useSingleCallResult(contract, 'latestAnswer').result?.[0]?.toString()
-  return typeof resultStr === 'string' ? JSBI.BigInt(resultStr) : undefined
+  return useMemo(() => (typeof resultStr === 'string' ? JSBI.BigInt(resultStr) : undefined), [resultStr])
 }

src/hooks/useIsArgentWallet.ts

@@ -9,5 +9,5 @@ export default function useIsArgentWallet(): boolean {
   const argentWalletDetector = useArgentWalletDetectorContract()
   const inputs = useMemo(() => [account ?? undefined], [account])
   const call = useSingleCallResult(argentWalletDetector, 'isArgentWallet', inputs, NEVER_RELOAD)
-  return call?.result?.[0] ?? false
+  return Boolean(call?.result?.[0])
 }

src/hooks/usePools.ts

@@ -1,9 +1,10 @@
 import { Interface } from '@ethersproject/abi'
-import { Currency, Token } from '@uniswap/sdk-core'
+import { BigintIsh, Currency, Token } from '@uniswap/sdk-core'
 import IUniswapV3PoolStateJson from '@uniswap/v3-core/artifacts/contracts/interfaces/pool/IUniswapV3PoolState.sol/IUniswapV3PoolState.json'
 import { computePoolAddress } from '@uniswap/v3-sdk'
 import { FeeAmount, Pool } from '@uniswap/v3-sdk'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import JSBI from 'jsbi'
 import { useMultipleContractSingleData } from 'lib/hooks/multicall'
 import { useMemo } from 'react'
 
@@ -14,6 +15,44 @@ const { abi: IUniswapV3PoolStateABI } = IUniswapV3PoolStateJson
 
 const POOL_STATE_INTERFACE = new Interface(IUniswapV3PoolStateABI) as IUniswapV3PoolStateInterface
 
+// Classes are expensive to instantiate, so this caches the recently instantiated pools.
+// This avoids re-instantiating pools as the other pools in the same request are loaded.
+class PoolCache {
+  // pools is a FIFO, using unshift/pop. This makes recent entries faster to find.
+  private static pools: Pool[] = []
+
+  static getPool(
+    tokenA: Token,
+    tokenB: Token,
+    fee: FeeAmount,
+    sqrtPriceX96: BigintIsh,
+    liquidity: BigintIsh,
+    tick: number
+  ): Pool {
+    // Evict after 128 entries. Empirically, a swap uses 64 entries.
+    if (this.pools.length > 128) {
+      this.pools = this.pools.slice(0, 64)
+    }
+
+    const found = this.pools.find(
+      (pool) =>
+        pool.token0 === tokenA &&
+        pool.token1 === tokenB &&
+        pool.fee === fee &&
+        JSBI.EQ(pool.sqrtRatioX96, sqrtPriceX96) &&
+        JSBI.EQ(pool.liquidity, liquidity) &&
+        pool.tickCurrent === tick
+    )
+    if (found) {
+      return found
+    }
+
+    const pool = new Pool(tokenA, tokenB, fee, sqrtPriceX96, liquidity, tick)
+    this.pools.unshift(pool)
+    return pool
+  }
+}
+
 export enum PoolState {
   LOADING,
   NOT_EXISTS,
@@ -26,58 +65,66 @@ export function usePools(
 ): [PoolState, Pool | null][] {
   const { chainId } = useActiveWeb3React()
 
-  const transformed: ([Token, Token, FeeAmount] | null)[] = useMemo(() => {
-    return poolKeys.map(([currencyA, currencyB, feeAmount]) => {
-      if (!chainId || !currencyA || !currencyB || !feeAmount) return null
+  const poolTokens: ([Token, Token, FeeAmount] | undefined)[] = useMemo(() => {
+    if (!chainId) return new Array(poolKeys.length)
 
-      const tokenA = currencyA?.wrapped
-      const tokenB = currencyB?.wrapped
-      if (!tokenA || !tokenB || tokenA.equals(tokenB)) return null
-      const [token0, token1] = tokenA.sortsBefore(tokenB) ? [tokenA, tokenB] : [tokenB, tokenA]
-      return [token0, token1, feeAmount]
+    return poolKeys.map(([currencyA, currencyB, feeAmount]) => {
+      if (currencyA && currencyB && feeAmount) {
+        const tokenA = currencyA.wrapped
+        const tokenB = currencyB.wrapped
+        if (tokenA.equals(tokenB)) return undefined
+
+        return tokenA.sortsBefore(tokenB) ? [tokenA, tokenB, feeAmount] : [tokenB, tokenA, feeAmount]
+      }
+      return undefined
     })
   }, [chainId, poolKeys])
 
   const poolAddresses: (string | undefined)[] = useMemo(() => {
     const v3CoreFactoryAddress = chainId && V3_CORE_FACTORY_ADDRESSES[chainId]
+    if (!v3CoreFactoryAddress) return new Array(poolTokens.length)
 
-    return transformed.map((value) => {
-      if (!v3CoreFactoryAddress || !value) return undefined
-      return computePoolAddress({
-        factoryAddress: v3CoreFactoryAddress,
-        tokenA: value[0],
-        tokenB: value[1],
-        fee: value[2],
-      })
-    })
-  }, [chainId, transformed])
+    return poolTokens.map(
+      (value) =>
+        value &&
+        computePoolAddress({
+          factoryAddress: v3CoreFactoryAddress,
+          tokenA: value[0],
+          tokenB: value[1],
+          fee: value[2],
+        })
+    )
+  }, [chainId, poolTokens])
 
   const slot0s = useMultipleContractSingleData(poolAddresses, POOL_STATE_INTERFACE, 'slot0')
   const liquidities = useMultipleContractSingleData(poolAddresses, POOL_STATE_INTERFACE, 'liquidity')
 
   return useMemo(() => {
     return poolKeys.map((_key, index) => {
-      const [token0, token1, fee] = transformed[index] ?? []
-      if (!token0 || !token1 || !fee) return [PoolState.INVALID, null]
+      const tokens = poolTokens[index]
+      if (!tokens) return [PoolState.INVALID, null]
+      const [token0, token1, fee] = tokens
 
+      if (!slot0s[index]) return [PoolState.INVALID, null]
       const { result: slot0, loading: slot0Loading, valid: slot0Valid } = slot0s[index]
+
+      if (!liquidities[index]) return [PoolState.INVALID, null]
       const { result: liquidity, loading: liquidityLoading, valid: liquidityValid } = liquidities[index]
 
-      if (!slot0Valid || !liquidityValid) return [PoolState.INVALID, null]
+      if (!tokens || !slot0Valid || !liquidityValid) return [PoolState.INVALID, null]
       if (slot0Loading || liquidityLoading) return [PoolState.LOADING, null]
-
       if (!slot0 || !liquidity) return [PoolState.NOT_EXISTS, null]
-
       if (!slot0.sqrtPriceX96 || slot0.sqrtPriceX96.eq(0)) return [PoolState.NOT_EXISTS, null]
 
       try {
-        return [PoolState.EXISTS, new Pool(token0, token1, fee, slot0.sqrtPriceX96, liquidity[0], slot0.tick)]
+        const pool = PoolCache.getPool(token0, token1, fee, slot0.sqrtPriceX96, liquidity[0], slot0.tick)
+        return [PoolState.EXISTS, pool]
       } catch (error) {
         console.error('Error when constructing the pool', error)
         return [PoolState.NOT_EXISTS, null]
       }
     })
-  }, [liquidities, poolKeys, slot0s, transformed])
+  }, [liquidities, poolKeys, slot0s, poolTokens])
 }
 
 export function usePool(

src/hooks/useTotalSupply.ts

@@ -1,6 +1,6 @@
-import { BigNumber } from '@ethersproject/bignumber'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useSingleCallResult } from 'lib/hooks/multicall'
+import { useMemo } from 'react'
 
 import { useTokenContract } from './useContract'
 
@@ -9,7 +9,10 @@ import { useTokenContract } from './useContract'
 export function useTotalSupply(token?: Currency): CurrencyAmount<Token> | undefined {
   const contract = useTokenContract(token?.isToken ? token.address : undefined, false)
 
-  const totalSupply: BigNumber = useSingleCallResult(contract, 'totalSupply')?.result?.[0]
+  const totalSupplyStr: string | undefined = useSingleCallResult(contract, 'totalSupply')?.result?.[0]?.toString()
 
-  return token?.isToken && totalSupply ? CurrencyAmount.fromRawAmount(token, totalSupply.toString()) : undefined
+  return useMemo(
+    () => (token?.isToken && totalSupplyStr ? CurrencyAmount.fromRawAmount(token, totalSupplyStr) : undefined),
+    [token, totalSupplyStr]
+  )
 }

src/hooks/useUSDCPrice.ts

@@ -78,17 +78,18 @@ export function useStablecoinAmountFromFiatValue(fiatValue: string | null | unde
   const { chainId } = useActiveWeb3React()
   const stablecoin = chainId ? STABLECOIN_AMOUNT_OUT[chainId]?.currency : undefined
 
-  if (fiatValue === null || fiatValue === undefined || !chainId || !stablecoin) {
-    return undefined
-  }
+  return useMemo(() => {
+    if (fiatValue === null || fiatValue === undefined || !chainId || !stablecoin) {
+      return undefined
+    }
 
-  // trim for decimal precision when parsing
-  const parsedForDecimals = parseFloat(fiatValue).toFixed(stablecoin.decimals).toString()
-
-  try {
-    // parse USD string into CurrencyAmount based on stablecoin decimals
-    return tryParseCurrencyAmount(parsedForDecimals, stablecoin)
-  } catch (error) {
-    return undefined
-  }
+    // trim for decimal precision when parsing
+    const parsedForDecimals = parseFloat(fiatValue).toFixed(stablecoin.decimals).toString()
+    try {
+      // parse USD string into CurrencyAmount based on stablecoin decimals
+      return tryParseCurrencyAmount(parsedForDecimals, stablecoin)
+    } catch (error) {
+      return undefined
+    }
+  }, [chainId, fiatValue, stablecoin])
 }

src/lib/assets/svg/inline_spinner.svg

@@ -0,0 +1,35 @@
+    <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>

src/lib/assets/svg/spinner.svg

@@ -1,12 +1,11 @@
     <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <mask id="mask">
-        <rect width="24" height="24" fill="white" stroke-width="0" />
+        <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
-        id="circle"
         cx="12"
         cy="12"
         r="10"

src/lib/components/Badge.tsx

@@ -1,11 +0,0 @@
-import styled, { Color } from 'lib/theme'
-
-import Row from './Row'
-
-const Badge = styled(Row)<{ borderRadius?: number; padding?: string; color?: Color }>`
-  background-color: ${({ theme, color = 'outline' }) => theme[color]};
-  border-radius: ${({ borderRadius }) => `${borderRadius ?? 0.5}em`};
-  padding: ${({ padding }) => padding ?? '0.25em 0.375em'};
-`
-
-export default Badge

src/lib/components/BrandedFooter.tsx

@@ -2,6 +2,7 @@ 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'
 
@@ -24,7 +25,7 @@ const UniswapA = styled(ExternalLink)`
   }
 `
 
-export default function BrandedFooter() {
+export default memo(function BrandedFooter() {
   return (
     <Row justify="center">
       <UniswapA href={`https://uniswap.org/`}>
@@ -37,4 +38,4 @@ export default function BrandedFooter() {
       </UniswapA>
     </Row>
   )
-}
+})

src/lib/components/Error/ErrorDialog.tsx

@@ -1,14 +1,10 @@
 import { Trans } from '@lingui/macro'
-import useScrollbar from 'lib/hooks/useScrollbar'
-import { AlertTriangle, Expando, Icon, Info, LargeIcon } from 'lib/icons'
+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, useState } from 'react'
-
-import ActionButton from '../ActionButton'
-import { IconButton } from '../Button'
-import Column from '../Column'
-import Row from '../Row'
-import Rule from '../Rule'
+import { ReactNode, useCallback, useState } from 'react'
 
 const HeaderIcon = styled(LargeIcon)`
   flex-grow: 1;
@@ -35,7 +31,6 @@ export function StatusHeader({ icon: Icon, iconColor, iconSize = 4, children }:
           {children}
         </Column>
       </Column>
-      <Rule />
     </>
   )
 }
@@ -49,40 +44,6 @@ const ErrorHeader = styled(Column)<{ open: boolean }>`
     transition: max-height 0.25s;
   }
 `
-const ErrorColumn = styled(Column)``
-const ExpandoColumn = styled(Column)<{ open: boolean }>`
-  flex-grow: ${({ open }) => (open ? 2 : 0)};
-  transition: flex-grow 0.25s, gap 0.25s;
-
-  ${Rule} {
-    margin-bottom: ${({ open }) => (open ? 0 : 0.75)}em;
-    transition: margin-bottom 0.25s;
-  }
-
-  ${ErrorColumn} {
-    flex-basis: 0;
-    flex-grow: ${({ open }) => (open ? 1 : 0)};
-    overflow-y: hidden;
-    position: relative;
-    transition: flex-grow 0.25s;
-
-    ${Column} {
-      height: 6.825em;
-      padding: ${({ open }) => (open ? '0.5em 0' : 0)};
-      transition: padding 0.25s;
-
-      :after {
-        background: linear-gradient(#ffffff00, ${({ theme }) => theme.dialog});
-        bottom: 0;
-        content: '';
-        height: 0.75em;
-        pointer-events: none;
-        position: absolute;
-        width: calc(100% - 1em);
-      }
-    }
-  }
-`
 
 interface ErrorDialogProps {
   header?: ReactNode
@@ -93,8 +54,8 @@ interface ErrorDialogProps {
 
 export default function ErrorDialog({ header, error, action, onClick }: ErrorDialogProps) {
   const [open, setOpen] = useState(false)
-  const [details, setDetails] = useState<HTMLDivElement | null>(null)
-  const scrollbar = useScrollbar(details)
+  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}>
@@ -105,27 +66,15 @@ export default function ErrorDialog({ header, error, action, onClick }: ErrorDia
           <ThemedText.Body2>{header}</ThemedText.Body2>
         </ErrorHeader>
       </StatusHeader>
-      <Row>
-        <Row gap={0.5}>
-          <Info color="secondary" />
-          <ThemedText.Subhead2 color="secondary">
-            <Trans>Error details</Trans>
-          </ThemedText.Subhead2>
-        </Row>
-        <IconButton color="secondary" onClick={() => setOpen(!open)} icon={Expando} iconProps={{ open }} />
-      </Row>
-      <ExpandoColumn flex align="stretch" open={open}>
-        <Rule />
-        <ErrorColumn>
-          <Column gap={0.5} ref={setDetails} css={scrollbar}>
-            <ThemedText.Code>
-              {error.name}
-              {error.message ? `: ${error.message}` : ''}
-            </ThemedText.Code>
-          </Column>
-        </ErrorColumn>
+      <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>
-      </ExpandoColumn>
+      </Column>
     </Column>
   )
 }

src/lib/components/Expando.tsx

@@ -0,0 +1,66 @@
+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(#ffffff00, ${({ 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/Input.tsx

@@ -1,4 +1,3 @@
-import JSBI from 'jsbi'
 import styled, { css } from 'lib/theme'
 import { forwardRef, HTMLProps, useCallback, useEffect, useState } from 'react'
 
@@ -78,12 +77,16 @@ interface EnforcedNumericInputProps extends NumericInputProps {
 }
 
 function isNumericallyEqual(a: string, b: string) {
-  const [aInteger, aDecimal] = a.split('.')
-  const [bInteger, bDecimal] = b.split('.')
-  return (
-    JSBI.equal(JSBI.BigInt(aInteger ?? 0), JSBI.BigInt(bInteger ?? 0)) &&
-    JSBI.equal(JSBI.BigInt(aDecimal ?? 0), JSBI.BigInt(bDecimal ?? 0))
-  )
+  const [aInteger, aDecimal] = toParts(a)
+  const [bInteger, bDecimal] = toParts(b)
+  return aInteger === bInteger && aDecimal === bDecimal
+
+  function toParts(num: string) {
+    let [integer, decimal] = num.split('.')
+    integer = integer?.match(/([1-9]\d*)/)?.[1] || ''
+    decimal = decimal?.match(/(\d*[1-9])/)?.[1] || ''
+    return [integer, decimal]
+  }
 }
 
 const NumericInput = forwardRef<HTMLInputElement, EnforcedNumericInputProps>(function NumericInput(

src/lib/components/Popover.tsx

@@ -14,7 +14,7 @@ const PopoverContainer = styled.div<{ show: boolean }>`
   border: 1px solid ${({ theme }) => theme.outline};
   border-radius: 0.5em;
   opacity: ${(props) => (props.show ? 1 : 0)};
-  padding: 8px;
+  padding: 10px 12px;
   transition: visibility 0.25s linear, opacity 0.25s linear;
   visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
   z-index: ${Layer.TOOLTIP};

src/lib/components/Rule.tsx

@@ -6,6 +6,10 @@ const Rule = styled.hr<{ padded?: true; scrollingEdge?: 'top' | 'bottom' }>`
   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

@@ -1,7 +1,7 @@
 import { useLingui } from '@lingui/react'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import { useUSDCValue } from 'hooks/useUSDCPrice'
-import { loadingOpacityCss } from 'lib/css/loading'
+import { loadingTransitionCss } from 'lib/css/loading'
 import {
   useIsSwapFieldIndependent,
   useSwapAmount,
@@ -22,8 +22,8 @@ import Row from '../Row'
 import TokenImg from '../TokenImg'
 import TokenInput from './TokenInput'
 
-export const LoadingRow = styled(Row)<{ $loading: boolean }>`
-  ${loadingOpacityCss};
+export const USDC = styled(Row)`
+  ${loadingTransitionCss};
 `
 
 export const Balance = styled(ThemedText.Body2)<{ focused: boolean }>`
@@ -105,7 +105,7 @@ export default function Input({ disabled, focused }: InputProps) {
 
   const amount = useFormattedFieldAmount({
     disabled,
-    currencyAmount: inputCurrencyAmount,
+    currencyAmount: swapInputCurrencyAmount,
     fieldAmount: swapInputAmount,
   })
 
@@ -120,12 +120,14 @@ export default function Input({ disabled, focused }: InputProps) {
         onChangeCurrency={updateSwapInputCurrency}
         loading={isLoading}
       >
-        <ThemedText.Body2 color="secondary">
+        <ThemedText.Body2 color="secondary" userSelect>
           <Row>
-            <LoadingRow $loading={isLoading}>{inputUSDC ? `$${inputUSDC.toFixed(2)}` : '-'}</LoadingRow>
+            <USDC isLoading={isRouteLoading}>
+              {inputUSDC ? `$${formatCurrencyAmount(inputUSDC, 6, 'en', 2)}` : '-'}
+            </USDC>
             {balance && (
               <Balance color={balanceColor} focused={focused}>
-                Balance: <span style={{ userSelect: 'text' }}>{formatCurrencyAmount(balance, 4, i18n.locale)}</span>
+                Balance: <span>{formatCurrencyAmount(balance, 4, i18n.locale)}</span>
               </Balance>
             )}
           </Row>

src/lib/components/Swap/Output.tsx

@@ -1,22 +1,20 @@
 import { Trans } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
-import { useUSDCValue } from 'hooks/useUSDCPrice'
 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 useUSDCPriceImpact from 'lib/hooks/useUSDCPriceImpact'
 import { Field } from 'lib/state/swap'
 import styled, { DynamicThemeProvider, ThemedText } from 'lib/theme'
-import { PropsWithChildren, useMemo } from 'react'
+import { PropsWithChildren } from 'react'
 import { TradeState } from 'state/routing/types'
-import { computeFiatValuePriceImpact } from 'utils/computeFiatValuePriceImpact'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
-import { getPriceImpactWarning } from 'utils/prices'
 
 import Column from '../Column'
 import Row from '../Row'
-import { Balance, InputProps, LoadingRow, useFormattedFieldAmount } from './Input'
+import { Balance, InputProps, USDC, useFormattedFieldAmount } from './Input'
 import TokenInput from './TokenInput'
 
 export const colorAtom = atom<string | undefined>(undefined)
@@ -60,23 +58,11 @@ export default function Output({ disabled, focused, children }: PropsWithChildre
   // different state true/null/false allow smoother color transition
   const hasColor = swapOutputCurrency ? Boolean(color) || null : false
 
-  const inputUSDC = useUSDCValue(inputCurrencyAmount)
-  const outputUSDC = useUSDCValue(outputCurrencyAmount)
-
-  const priceImpact = useMemo(() => {
-    const fiatValuePriceImpact = computeFiatValuePriceImpact(inputUSDC, outputUSDC)
-    if (!fiatValuePriceImpact) return null
-
-    const color = getPriceImpactWarning(fiatValuePriceImpact)
-    const sign = fiatValuePriceImpact.lessThan(0) ? '+' : ''
-    const displayedPriceImpact = parseFloat(fiatValuePriceImpact.multiply(-1)?.toSignificant(3))
-    return (
-      <ThemedText.Body2 color={color}>
-        ({sign}
-        {displayedPriceImpact}%)
-      </ThemedText.Body2>
-    )
-  }, [inputUSDC, outputUSDC])
+  const {
+    outputUSDC,
+    priceImpact,
+    warning: priceImpactWarning,
+  } = useUSDCPriceImpact(inputCurrencyAmount, outputCurrencyAmount)
 
   const amount = useFormattedFieldAmount({
     disabled,
@@ -100,14 +86,15 @@ export default function Output({ disabled, focused, children }: PropsWithChildre
           onChangeCurrency={updateSwapOutputCurrency}
           loading={isLoading}
         >
-          <ThemedText.Body2 color="secondary">
+          <ThemedText.Body2 color="secondary" userSelect>
             <Row>
-              <LoadingRow gap={0.5} $loading={isLoading}>
-                {outputUSDC ? `$${outputUSDC.toFixed(2)}` : '-'} {priceImpact}
-              </LoadingRow>
+              <USDC gap={0.5} isLoading={isRouteLoading}>
+                {outputUSDC ? `$${formatCurrencyAmount(outputUSDC, 6, 'en', 2)}` : '-'}{' '}
+                {priceImpact && <ThemedText.Body2 color={priceImpactWarning}>({priceImpact})</ThemedText.Body2>}
+              </USDC>
               {balance && (
                 <Balance focused={focused}>
-                  Balance: <span style={{ userSelect: 'text' }}>{formatCurrencyAmount(balance, 4, i18n.locale)}</span>
+                  Balance: <span>{formatCurrencyAmount(balance, 4, i18n.locale)}</span>
                 </Balance>
               )}
             </Row>

src/lib/components/Swap/Price.tsx

@@ -0,0 +1,54 @@
+import { useLingui } from '@lingui/react'
+import { Trade } from '@uniswap/router-sdk'
+import { Currency, CurrencyAmount, Token, 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<Token>
+}
+
+/** 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/RoutingDiagram/index.tsx

@@ -1,8 +1,7 @@
 import { Plural, Trans } from '@lingui/macro'
 import { Currency, TradeType } from '@uniswap/sdk-core'
 import { FeeAmount } from '@uniswap/v3-sdk'
-import { ReactComponent as DotLineImage } from 'assets/svg/dot_line.svg'
-import Badge from 'lib/components/Badge'
+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'
@@ -14,47 +13,6 @@ import { InterfaceTrade } from 'state/routing/types'
 
 import { getTokenPath, RoutingDiagramEntry } from './utils'
 
-const Wrapper = styled(Column)`
-  padding: 0.25em;
-`
-
-const RouteRow = styled(Row)`
-  grid-template-columns: 1em 1.15em 1fr 1em;
-  min-width: 430px;
-`
-
-const RouteDetailsContainer = styled(Row)`
-  padding: 0.1em 0.5em;
-  position: relative;
-`
-
-const DotsContainer = styled.div`
-  align-items: center;
-  display: flex;
-  opacity: 0.5;
-  position: absolute;
-  width: calc(100% - 1em);
-  z-index: ${Layer.UNDERLAYER};
-`
-
-const DotsContainerShort = styled(DotsContainer)`
-  overflow: hidden;
-  position: relative;
-  width: 71px;
-`
-
-const Dots = styled(DotLineImage)`
-  path {
-    stroke: ${({ theme }) => theme.secondary};
-  }
-`
-
-const DetailsRow = styled(Row)`
-  display: grid;
-  grid-template-columns: 4.8125em 1fr;
-  width: 100%;
-`
-
 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%);
@@ -63,6 +21,66 @@ const StyledAutoRouterLabel = styled(ThemedText.ButtonSmall)`
   }
 `
 
+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,
@@ -73,15 +91,36 @@ function Pool({
   feeAmount: FeeAmount
 }) {
   return (
-    <Badge padding="0 4px" color="dialog">
-      <Badge gap={0.375}>
-        <Row>
+    <RoutePool>
+      <ThemedText.Caption>
+        <Row gap={0.25}>
           <TokenImg token={originCurrency} />
-          <TokenImg token={targetCurrency} />
+          <TokenImg token={targetCurrency} style={{ marginLeft: '-0.65em' }} />
+          {feeAmount / 10_000}%
         </Row>
-        <ThemedText.Subhead2>{feeAmount / 10_000}%</ThemedText.Subhead2>
-      </Badge>
-    </Badge>
+      </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>
   )
 }
 
@@ -89,55 +128,12 @@ export default function RoutingDiagram({ trade }: { trade: InterfaceTrade<Curren
   const routes: RoutingDiagramEntry[] = useMemo(() => getTokenPath(trade), [trade])
 
   return (
-    <Wrapper gap={0.75}>
-      <Row justify="space-between">
-        <Row gap={0.25}>
-          <AutoRouter />
-          <StyledAutoRouterLabel color="primary" lineHeight={'16px'}>
-            <Trans>Auto Router</Trans>
-          </StyledAutoRouterLabel>
-        </Row>
-        <ThemedText.ButtonSmall>
-          <Plural value={routes.length} _1="Best route via 1 hop" other="Best route via # hops" />
-        </ThemedText.ButtonSmall>
-      </Row>
+    <Column gap={0.75}>
+      <Header routes={routes} />
       <Rule />
       {routes.map((route, index) => (
-        <RouteRow key={index} align="center">
-          <TokenImg token={trade.inputAmount.currency} />
-          <DotsContainerShort>
-            <Dots />
-          </DotsContainerShort>
-          <RouteDetailsContainer justify="flex-start" flex>
-            <DotsContainer>
-              <Dots />
-            </DotsContainer>
-            <DetailsRow>
-              <Badge padding="0 4px" color="dialog">
-                <Badge gap={0.375}>
-                  <ThemedText.ButtonSmall color="secondary">{route.percent.toSignificant(2)}%</ThemedText.ButtonSmall>
-                  <Badge padding="0.125em" borderRadius={0.25} color="module">
-                    <ThemedText.Badge color="secondary" fontSize={'0.5rem'}>
-                      {route.protocol.toUpperCase()}
-                    </ThemedText.Badge>
-                  </Badge>
-                </Badge>
-              </Badge>
-              <Row justify="space-evenly" flex style={{ width: '100%' }}>
-                {route.path.map(([originCurrency, targetCurrency, feeAmount], index) => (
-                  <Pool
-                    key={index}
-                    originCurrency={originCurrency}
-                    targetCurrency={targetCurrency}
-                    feeAmount={feeAmount}
-                  />
-                ))}
-              </Row>
-            </DetailsRow>
-          </RouteDetailsContainer>
-          <TokenImg token={trade.outputAmount.currency} />
-        </RouteRow>
+        <Route key={index} route={route} />
       ))}
-    </Wrapper>
+    </Column>
   )
 }

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

@@ -2,7 +2,7 @@ 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/useAllowedSlippage'
+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'

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

@@ -22,7 +22,7 @@ const UNI = (function () {
 function Fixture() {
   const setState = useUpdateAtom(swapAtom)
   const {
-    allowedSlippage,
+    slippage,
     trade: { trade },
   } = useSwapInfo()
 
@@ -37,7 +37,7 @@ function Fixture() {
 
   return trade ? (
     <Modal color="dialog">
-      <SummaryDialog onConfirm={() => void 0} trade={trade} allowedSlippage={allowedSlippage} />
+      <SummaryDialog onConfirm={() => void 0} trade={trade} slippage={slippage} />
     </Modal>
   ) : null
 }

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

@@ -3,15 +3,14 @@ import { useLingui } from '@lingui/react'
 import { Trade } from '@uniswap/router-sdk'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { useAtomValue } from 'jotai/utils'
-import { getSlippageWarning } from 'lib/hooks/useAllowedSlippage'
+import Column from 'lib/components/Column'
+import Row from 'lib/components/Row'
 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, computeRealizedPriceImpact, getPriceImpactWarning } from 'utils/prices'
-
-import Row from '../../Row'
+import { computeRealizedLPFeeAmount } from 'utils/prices'
 
 const Value = styled.span<{ color?: Color }>`
   color: ${({ color, theme }) => color && theme[color]};
@@ -26,7 +25,7 @@ interface DetailProps {
 
 function Detail({ label, value, color }: DetailProps) {
   return (
-    <ThemedText.Caption>
+    <ThemedText.Caption userSelect>
       <Row gap={2}>
         <span>{label}</span>
         <Value color={color}>{value}</Value>
@@ -37,16 +36,16 @@ function Detail({ label, value, color }: DetailProps) {
 
 interface DetailsProps {
   trade: Trade<Currency, Currency, TradeType>
-  allowedSlippage: Percent
+  slippage: { auto: boolean; allowed: Percent; warning?: Color }
+  usdcPriceImpact: { priceImpact?: string; warning?: Color }
 }
 
-export default function Details({ trade, allowedSlippage }: DetailsProps) {
+export default function Details({ trade, slippage, usdcPriceImpact }: DetailsProps) {
   const { inputAmount, outputAmount } = trade
   const inputCurrency = inputAmount.currency
   const outputCurrency = outputAmount.currency
   const integrator = window.location.hostname
   const feeOptions = useAtomValue(feeOptionsAtom)
-  const priceImpact = useMemo(() => computeRealizedPriceImpact(trade), [trade])
   const lpFeeAmount = useMemo(() => computeRealizedLPFeeAmount(trade), [trade])
   const { i18n } = useLingui()
 
@@ -62,7 +61,9 @@ export default function Details({ trade, allowedSlippage }: DetailsProps) {
       }
     }
 
-    rows.push([t`Price impact`, `${priceImpact.toFixed(2)}%`, getPriceImpactWarning(priceImpact)])
+    if (usdcPriceImpact.priceImpact) {
+      rows.push([t`Price impact`, usdcPriceImpact.priceImpact, usdcPriceImpact.warning])
+    }
 
     if (lpFeeAmount) {
       const parsedLpFee = formatCurrencyAmount(lpFeeAmount, 6, i18n.locale)
@@ -70,24 +71,24 @@ export default function Details({ trade, allowedSlippage }: DetailsProps) {
     }
 
     if (trade.tradeType === TradeType.EXACT_OUTPUT) {
-      const localizedMaxSent = formatCurrencyAmount(trade.maximumAmountIn(allowedSlippage), 6, i18n.locale)
+      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(allowedSlippage), 6, i18n.locale)
+      const localizedMaxSent = formatCurrencyAmount(trade.minimumAmountOut(slippage.allowed), 6, i18n.locale)
       rows.push([t`Minimum received`, `${localizedMaxSent} ${outputCurrency.symbol}`])
     }
 
-    rows.push([t`Slippage tolerance`, `${allowedSlippage.toFixed(2)}%`, getSlippageWarning(allowedSlippage)])
+    rows.push([t`Slippage tolerance`, `${slippage.allowed.toFixed(2)}%`, slippage.warning])
 
     return rows
   }, [
     feeOptions,
-    priceImpact,
+    usdcPriceImpact,
     lpFeeAmount,
     trade,
-    allowedSlippage,
+    slippage,
     outputAmount,
     i18n.locale,
     integrator,
@@ -96,10 +97,10 @@ export default function Details({ trade, allowedSlippage }: DetailsProps) {
   ])
 
   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

@@ -1,54 +1,37 @@
 import { useLingui } from '@lingui/react'
-import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
-import { useUSDCValue } from 'hooks/useUSDCPrice'
+import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
+import useUSDCPriceImpact from 'lib/hooks/useUSDCPriceImpact'
 import { ArrowRight } from 'lib/icons'
-import styled from 'lib/theme'
 import { ThemedText } from 'lib/theme'
-import { useMemo } from 'react'
-import { computeFiatValuePriceImpact } from 'utils/computeFiatValuePriceImpact'
+import { PropsWithChildren } from 'react'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 import Column from '../../Column'
 import Row from '../../Row'
 import TokenImg from '../../TokenImg'
 
-const Percent = styled.span<{ gain: boolean }>`
-  color: ${({ gain, theme }) => (gain ? theme.success : theme.error)};
-`
-
 interface TokenValueProps {
   input: CurrencyAmount<Currency>
-  usdc?: boolean
-  change?: number
+  usdc?: CurrencyAmount<Token>
 }
 
-function TokenValue({ input, usdc, change }: TokenValueProps) {
+function TokenValue({ input, usdc, children }: PropsWithChildren<TokenValueProps>) {
   const { i18n } = useLingui()
-  const percent = useMemo(() => {
-    if (change) {
-      const percent = change.toPrecision(3)
-      return change > 0 ? `(+${percent}%)` : `(${percent}%)`
-    }
-    return undefined
-  }, [change])
-
-  const usdcAmount = useUSDCValue(input)
-
   return (
     <Column justify="flex-start">
       <Row gap={0.375} justify="flex-start">
         <TokenImg token={input.currency} />
-        <ThemedText.Body2>
+        <ThemedText.Body2 userSelect>
           {formatCurrencyAmount(input, 6, i18n.locale)} {input.currency.symbol}
         </ThemedText.Body2>
       </Row>
-      {usdc && usdcAmount && (
-        <Row justify="flex-start">
-          <ThemedText.Caption color="secondary">
-            ${formatCurrencyAmount(usdcAmount, 2, i18n.locale)}
-            {change && <Percent gain={change > 0}> {percent}</Percent>}
-          </ThemedText.Caption>
-        </Row>
+      {usdc && (
+        <ThemedText.Caption color="secondary" userSelect>
+          <Row justify="flex-start" gap={0.25}>
+            ${formatCurrencyAmount(usdc, 6, 'en', 2)}
+            {children}
+          </Row>
+        </ThemedText.Caption>
       )}
     </Column>
   )
@@ -57,23 +40,19 @@ function TokenValue({ input, usdc, change }: TokenValueProps) {
 interface SummaryProps {
   input: CurrencyAmount<Currency>
   output: CurrencyAmount<Currency>
-  usdc?: boolean
+  usdcPriceImpact?: ReturnType<typeof useUSDCPriceImpact>
 }
 
-export default function Summary({ input, output, usdc }: SummaryProps) {
-  const inputUSDCValue = useUSDCValue(input)
-  const outputUSDCValue = useUSDCValue(output)
-
-  const priceImpact = useMemo(() => {
-    const computedChange = computeFiatValuePriceImpact(inputUSDCValue, outputUSDCValue)
-    return computedChange ? parseFloat(computedChange.multiply(-1)?.toSignificant(3)) : undefined
-  }, [inputUSDCValue, outputUSDCValue])
+export default function Summary({ input, output, usdcPriceImpact }: SummaryProps) {
+  const { inputUSDC, outputUSDC, priceImpact, warning: priceImpactWarning } = usdcPriceImpact || {}
 
   return (
-    <Row gap={usdc ? 1 : 0.25}>
-      <TokenValue input={input} usdc={usdc} />
+    <Row gap={usdcPriceImpact ? 1 : 0.25}>
+      <TokenValue input={input} usdc={inputUSDC} />
       <ArrowRight />
-      <TokenValue input={output} usdc={usdc} change={priceImpact} />
+      <TokenValue input={output} usdc={outputUSDC}>
+        {priceImpact && <ThemedText.Caption color={priceImpactWarning}>({priceImpact})</ThemedText.Caption>}
+      </TokenValue>
     </Row>
   )
 }

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

@@ -1,121 +1,116 @@
 import { Trans } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { Trade } from '@uniswap/router-sdk'
-import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
-import { IconButton } from 'lib/components/Button'
-import { useSwapTradeType } from 'lib/hooks/swap'
-import { getSlippageWarning } from 'lib/hooks/useAllowedSlippage'
-import useScrollbar from 'lib/hooks/useScrollbar'
-import { AlertTriangle, BarChart, Expando, Info } from 'lib/icons'
-import styled, { ThemedText } from 'lib/theme'
-import formatLocaleNumber from 'lib/utils/formatLocaleNumber'
-import { useMemo, useState } from 'react'
-import { formatCurrencyAmount, formatPrice } from 'utils/formatCurrencyAmount'
-import { computeRealizedPriceImpact, getPriceImpactWarning } from 'utils/prices'
+import { Currency, 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 useUSDCPriceImpact from 'lib/hooks/useUSDCPriceImpact'
+import { AlertTriangle, BarChart, Info } from 'lib/icons'
+import styled, { Color, ThemedText } from 'lib/theme'
+import { useCallback, useMemo, useState } from 'react'
+import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 import { tradeMeaningfullyDiffers } from 'utils/tradeMeaningFullyDiffer'
 
-import ActionButton, { Action } from '../../ActionButton'
-import Column from '../../Column'
-import { Header } from '../../Dialog'
-import Row from '../../Row'
-import Rule from '../../Rule'
+import Price from '../Price'
 import Details from './Details'
 import Summary from './Summary'
 
 export default Summary
 
-const SummaryColumn = styled(Column)``
-const ExpandoColumn = styled(Column)``
-const DetailsColumn = styled(Column)``
-const Estimate = styled(ThemedText.Caption)``
+const Content = styled(Column)``
+const Heading = styled(Column)``
+const Footing = styled(Column)``
 const Body = styled(Column)<{ open: boolean }>`
   height: calc(100% - 2.5em);
 
-  ${SummaryColumn} {
-    flex-grow: ${({ open }) => (open ? 0 : 1)};
+  ${Content}, ${Heading} {
+    flex-grow: 1;
     transition: flex-grow 0.25s;
   }
 
-  ${ExpandoColumn} {
-    flex-grow: ${({ open }) => (open ? 1 : 0)};
-    transition: flex-grow 0.25s;
-
-    ${DetailsColumn} {
-      flex-basis: ${({ open }) => (open ? 7.5 : 0)}em;
-      overflow-y: hidden;
-      position: relative;
-      transition: flex-basis 0.25s;
-
-      ${Column} {
-        height: 7.5em;
-        grid-template-rows: repeat(auto-fill, 1em);
-        padding: ${({ open }) => (open ? '0.5em 0' : 0)};
-        transition: padding 0.25s;
-
-        :after {
-          background: linear-gradient(#ffffff00, ${({ theme }) => theme.dialog});
-          bottom: 0;
-          content: '';
-          height: 0.75em;
-          pointer-events: none;
-          position: absolute;
-          width: calc(100% - 1em);
-        }
-      }
-    }
-
-    ${Estimate} {
-      max-height: ${({ open }) => (open ? 0 : 56 / 12)}em; // 2 * line-height + padding
-      min-height: 0;
-      overflow-y: hidden;
-      padding: ${({ open }) => (open ? 0 : '1em 0')};
-      transition: ${({ open }) =>
-        open
-          ? 'max-height 0.1s ease-out, padding 0.25s ease-out'
-          : 'flex-grow 0.25s ease-out, max-height 0.1s ease-in, padding 0.25s ease-out'};
-    }
+  ${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)};
   }
 `
 
-interface SummaryDialogProps {
-  trade: Trade<Currency, Currency, TradeType>
-  allowedSlippage: Percent
-  onConfirm: () => void
+function Subhead({ priceImpact, slippage }: { priceImpact: { warning?: Color }; slippage: Slippage }) {
+  return (
+    <Row gap={0.5}>
+      {priceImpact.warning || slippage.warning ? (
+        <AlertTriangle color={priceImpact.warning || slippage.warning} />
+      ) : (
+        <Info color="secondary" />
+      )}
+      <ThemedText.Subhead2 color={priceImpact.warning || slippage.warning || 'secondary'}>
+        {priceImpact.warning ? (
+          <Trans>High price impact</Trans>
+        ) : slippage.warning ? (
+          <Trans>High slippage</Trans>
+        ) : (
+          <Trans>Swap details</Trans>
+        )}
+      </ThemedText.Subhead2>
+    </Row>
+  )
 }
 
-export function SummaryDialog({ trade, allowedSlippage, onConfirm }: SummaryDialogProps) {
-  const { inputAmount, outputAmount, executionPrice } = trade
-  const inputCurrency = inputAmount.currency
-  const outputCurrency = outputAmount.currency
-  const priceImpact = useMemo(() => computeRealizedPriceImpact(trade), [trade])
-  const tradeType = useSwapTradeType()
+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>
+}
 
-  const [open, setOpen] = useState(false)
-  const [details, setDetails] = useState<HTMLDivElement | null>(null)
-  const scrollbar = useScrollbar(details)
-
-  const warning = useMemo(() => {
-    return getPriceImpactWarning(priceImpact) || getSlippageWarning(allowedSlippage)
-  }, [allowedSlippage, priceImpact])
-
+function ConfirmButton({
+  trade,
+  highPriceImpact,
+  onConfirm,
+}: {
+  trade: Trade<Currency, Currency, TradeType>
+  highPriceImpact: boolean
+  onConfirm: () => void
+}) {
   const [ackPriceImpact, setAckPriceImpact] = useState(false)
-
-  const [confirmedTrade, setConfirmedTrade] = useState(trade)
+  const [ackTrade, setAckTrade] = useState(trade)
   const doesTradeDiffer = useMemo(
-    () => Boolean(trade && confirmedTrade && tradeMeaningfullyDiffers(trade, confirmedTrade)),
-    [confirmedTrade, trade]
+    () => Boolean(trade && ackTrade && tradeMeaningfullyDiffers(trade, ackTrade)),
+    [ackTrade, trade]
   )
-
   const action = useMemo((): Action | undefined => {
     if (doesTradeDiffer) {
       return {
         message: <Trans>Price updated</Trans>,
         icon: BarChart,
-        onClick: () => setConfirmedTrade(trade),
+        onClick: () => setAckTrade(trade),
         children: <Trans>Accept</Trans>,
       }
-    } else if (getPriceImpactWarning(priceImpact) === 'error' && !ackPriceImpact) {
+    } else if (highPriceImpact && !ackPriceImpact) {
       return {
         message: <Trans>High price impact</Trans>,
         onClick: () => setAckPriceImpact(true),
@@ -123,60 +118,50 @@ export function SummaryDialog({ trade, allowedSlippage, onConfirm }: SummaryDial
       }
     }
     return
-  }, [ackPriceImpact, doesTradeDiffer, priceImpact, trade])
+  }, [ackPriceImpact, doesTradeDiffer, highPriceImpact, trade])
 
-  if (!(inputAmount && outputAmount && inputCurrency && outputCurrency)) {
-    return null
-  }
+  return (
+    <ActionButton onClick={onConfirm} action={action}>
+      <Trans>Confirm swap</Trans>
+    </ActionButton>
+  )
+}
+
+interface SummaryDialogProps {
+  trade: Trade<Currency, Currency, TradeType>
+  slippage: Slippage
+  onConfirm: () => void
+}
+
+export function SummaryDialog({ trade, slippage, onConfirm }: SummaryDialogProps) {
+  const { inputAmount, outputAmount } = trade
+  const usdcPriceImpact = useUSDCPriceImpact(inputAmount, outputAmount)
+
+  const [open, setOpen] = useState(false)
+  const onExpand = useCallback(() => setOpen((open) => !open), [])
 
   return (
     <>
       <Header title={<Trans>Swap summary</Trans>} ruled />
-      <Body flex align="stretch" gap={0.75} padded open={open}>
-        <SummaryColumn gap={0.75} flex justify="center">
-          <Summary input={inputAmount} output={outputAmount} usdc={true} />
-          <ThemedText.Caption>
-            {formatLocaleNumber({ number: 1, sigFigs: 1, locale: i18n.locale })} {inputCurrency.symbol} ={' '}
-            {formatPrice(executionPrice, 6, i18n.locale)} {outputCurrency.symbol}
-          </ThemedText.Caption>
-        </SummaryColumn>
-        <Rule />
-        <Row>
-          <Row gap={0.5}>
-            {warning ? <AlertTriangle color={warning} /> : <Info color="secondary" />}
-            <ThemedText.Subhead2 color="secondary">
-              <Trans>Swap details</Trans>
-            </ThemedText.Subhead2>
-          </Row>
-          <IconButton color="secondary" onClick={() => setOpen(!open)} icon={Expando} iconProps={{ open }} />
-        </Row>
-        <ExpandoColumn flex align="stretch">
-          <Rule />
-          <DetailsColumn>
-            <Column gap={0.5} ref={setDetails} css={scrollbar}>
-              <Details trade={trade} allowedSlippage={allowedSlippage} />
-            </Column>
-          </DetailsColumn>
-          <Estimate color="secondary">
-            <Trans>Output is estimated.</Trans>{' '}
-            {tradeType === TradeType.EXACT_INPUT && (
-              <Trans>
-                You will receive at least{' '}
-                {formatCurrencyAmount(trade.minimumAmountOut(allowedSlippage), 6, i18n.locale)} {outputCurrency.symbol}{' '}
-                or the transaction will revert.
-              </Trans>
-            )}
-            {tradeType === TradeType.EXACT_OUTPUT && (
-              <Trans>
-                You will send at most {formatCurrencyAmount(trade.maximumAmountIn(allowedSlippage), 6, i18n.locale)}{' '}
-                {inputCurrency.symbol} or the transaction will revert.
-              </Trans>
-            )}
-          </Estimate>
-          <ActionButton onClick={onConfirm} action={action}>
-            <Trans>Confirm swap</Trans>
-          </ActionButton>
-        </ExpandoColumn>
+      <Body flex align="stretch" padded gap={0.75} open={open}>
+        <Heading gap={0.75} flex justify="center">
+          <Summary input={inputAmount} output={outputAmount} usdcPriceImpact={usdcPriceImpact} />
+          <Price trade={trade} />
+        </Heading>
+        <Column gap={open ? 0 : 0.75} style={{ transition: 'gap 0.25s' }}>
+          <Expando
+            title={<Subhead priceImpact={usdcPriceImpact} slippage={slippage} />}
+            open={open}
+            onExpand={onExpand}
+            height={7.25}
+          >
+            <Details trade={trade} slippage={slippage} usdcPriceImpact={usdcPriceImpact} />
+          </Expando>
+          <Footing>
+            <Estimate trade={trade} slippage={slippage} />
+          </Footing>
+          <ConfirmButton trade={trade} highPriceImpact={usdcPriceImpact.warning === 'error'} onConfirm={onConfirm} />
+        </Column>
       </Body>
     </>
   )

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

@@ -37,38 +37,33 @@ function Fixture() {
     defaultValue: FEE_RECIPIENT_OPTIONS[1],
   })
 
-  const optionsToAddressMap: Record<string, string> = {
-    none: '',
+  const optionsToAddressMap: Record<string, string | undefined> = {
+    None: undefined,
     Native: 'NATIVE',
     DAI: DAI.address,
     USDC: USDC_MAINNET.address,
   }
   const addressOptions = Object.keys(optionsToAddressMap)
-  const [defaultInput] = useSelect('defaultInputAddress', {
-    options: addressOptions,
-    defaultValue: addressOptions[2],
-  })
-  const inputOptions = ['', '0', '100', '-1']
-  const [defaultInputAmount] = useSelect('defaultInputAmount', {
-    options: inputOptions,
-    defaultValue: inputOptions[2],
-  })
-  const [defaultOutput] = useSelect('defaultOutputAddress', {
+
+  const [defaultInputToken] = useSelect('defaultInputToken', {
     options: addressOptions,
     defaultValue: addressOptions[1],
   })
-  const [defaultOutputAmount] = useSelect('defaultOutputAmount', {
-    options: inputOptions,
-    defaultValue: inputOptions[0],
+  const [defaultInputAmount] = useValue('defaultInputAmount', { defaultValue: 1 })
+
+  const [defaultOutputToken] = useSelect('defaultOutputToken', {
+    options: addressOptions,
+    defaultValue: addressOptions[2],
   })
+  const [defaultOutputAmount] = useValue('defaultOutputAmount', { defaultValue: 0 })
 
   return (
     <Swap
       convenienceFee={convenienceFee}
       convenienceFeeRecipient={convenienceFeeRecipient}
-      defaultInputAddress={optionsToAddressMap[defaultInput]}
+      defaultInputTokenAddress={optionsToAddressMap[defaultInputToken]}
       defaultInputAmount={defaultInputAmount}
-      defaultOutputAddress={optionsToAddressMap[defaultOutput]}
+      defaultOutputTokenAddress={optionsToAddressMap[defaultOutputToken]}
       defaultOutputAmount={defaultOutputAmount}
       tokenList={tokens}
       onConnectWallet={() => console.log('onConnectWallet')} // this handler is included as a test of functionality, but only logs

src/lib/components/Swap/SwapButton.tsx

@@ -1,25 +1,24 @@
 import { Trans } from '@lingui/macro'
 import { Token } from '@uniswap/sdk-core'
-import { useERC20PermitFromTrade } from 'hooks/useERC20Permit'
 import { useUpdateAtom } from 'jotai/utils'
 import { WrapErrorText } from 'lib/components/Swap/WrapErrorText'
 import { useSwapCurrencyAmount, useSwapInfo, useSwapTradeType } from 'lib/hooks/swap'
-import useSwapApproval, {
-  ApprovalState,
+import {
+  ApproveOrPermitState,
+  useApproveOrPermit,
   useSwapApprovalOptimizedTrade,
   useSwapRouterAddress,
 } from 'lib/hooks/swap/useSwapApproval'
 import { useSwapCallback } from 'lib/hooks/swap/useSwapCallback'
 import useWrapCallback, { WrapError, WrapType } from 'lib/hooks/swap/useWrapCallback'
-import { useAddTransaction } from 'lib/hooks/transactions'
-import { usePendingApproval } from 'lib/hooks/transactions'
+import { useAddTransaction, usePendingApproval } from 'lib/hooks/transactions'
 import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
 import useTransactionDeadline from 'lib/hooks/useTransactionDeadline'
 import { Spinner } from 'lib/icons'
 import { displayTxHashAtom, Field } from 'lib/state/swap'
 import { TransactionType } from 'lib/state/transactions'
 import { useTheme } from 'lib/theme'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import invariant from 'tiny-invariant'
 import { ExplorerDataType } from 'utils/getExplorerLink'
 
@@ -36,13 +35,13 @@ function useIsPendingApproval(token?: Token, spender?: string): boolean {
   return Boolean(usePendingApproval(token, spender))
 }
 
-export default function SwapButton({ disabled }: SwapButtonProps) {
+export default memo(function SwapButton({ disabled }: SwapButtonProps) {
   const { account, chainId } = useActiveWeb3React()
 
   const { tokenColorExtraction } = useTheme()
 
   const {
-    allowedSlippage,
+    slippage,
     currencies: { [Field.INPUT]: inputCurrency },
     currencyBalances: { [Field.INPUT]: inputCurrencyBalance },
     feeOptions,
@@ -65,87 +64,94 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
   // 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, allowedSlippage, useIsPendingApproval) || trade.trade
+    useSwapApprovalOptimizedTrade(trade.trade, slippage.allowed, useIsPendingApproval) || trade.trade
 
   const approvalCurrencyAmount = useSwapCurrencyAmount(Field.INPUT)
-  const [approval, getApproval] = useSwapApproval(
+
+  const { approvalState, signatureData, handleApproveOrPermit } = useApproveOrPermit(
     optimizedTrade,
-    allowedSlippage,
+    slippage.allowed,
     useIsPendingApproval,
     approvalCurrencyAmount
   )
+
   const approvalHash = usePendingApproval(
     inputCurrency?.isToken ? inputCurrency : undefined,
     useSwapRouterAddress(optimizedTrade)
   )
 
   const addTransaction = useAddTransaction()
-  const addApprovalTransaction = useCallback(() => {
-    getApproval().then((transaction) => {
+  const onApprove = useCallback(() => {
+    handleApproveOrPermit().then((transaction) => {
       if (transaction) {
         addTransaction({ type: TransactionType.APPROVAL, ...transaction })
       }
     })
-  }, [addTransaction, getApproval])
+  }, [addTransaction, handleApproveOrPermit])
 
   const { type: wrapType, callback: wrapCallback, error: wrapError, loading: wrapLoading } = useWrapCallback()
 
+  const disableSwap = useMemo(
+    () =>
+      disabled ||
+      !chainId ||
+      wrapLoading ||
+      (wrapType !== WrapType.NOT_APPLICABLE && wrapError) ||
+      approvalState === ApproveOrPermitState.PENDING_SIGNATURE ||
+      !(inputTradeCurrencyAmount && inputCurrencyBalance) ||
+      inputCurrencyBalance.lessThan(inputTradeCurrencyAmount),
+    [disabled, chainId, wrapLoading, wrapType, wrapError, approvalState, inputTradeCurrencyAmount, inputCurrencyBalance]
+  )
+
   const actionProps = useMemo((): Partial<ActionButtonProps> | undefined => {
-    if (disabled || wrapLoading) return { disabled: true }
-    if (!disabled && chainId) {
-      const hasSufficientInputForTrade =
-        inputTradeCurrencyAmount && inputCurrencyBalance && !inputCurrencyBalance.lessThan(inputTradeCurrencyAmount)
-      if (approval === ApprovalState.NOT_APPROVED) {
-        const currency = inputCurrency || approvalCurrencyAmount?.currency
-        invariant(currency)
-        return {
-          action: {
-            message: <Trans>Approve {currency.symbol} first</Trans>,
-            onClick: addApprovalTransaction,
-            children: <Trans>Approve</Trans>,
-          },
-        }
-      } else if (approval === ApprovalState.PENDING) {
-        return {
-          disabled: true,
-          action: {
-            message: (
-              <EtherscanLink type={ExplorerDataType.TRANSACTION} data={approvalHash}>
-                <Trans>Approval pending</Trans>
-              </EtherscanLink>
+    if (disableSwap) {
+      return { disabled: true }
+    }
+    if (
+      wrapType === WrapType.NOT_APPLICABLE &&
+      (approvalState === ApproveOrPermitState.REQUIRES_APPROVAL ||
+        approvalState === ApproveOrPermitState.REQUIRES_SIGNATURE)
+    ) {
+      const currency = inputCurrency || approvalCurrencyAmount?.currency
+      invariant(currency)
+      return {
+        action: {
+          message:
+            approvalState === ApproveOrPermitState.REQUIRES_SIGNATURE ? (
+              <Trans>Allow {currency.symbol} first</Trans>
+            ) : (
+              <Trans>Approve {currency.symbol} first</Trans>
             ),
-            icon: Spinner,
-            onClick: addApprovalTransaction,
-            children: <Trans>Approve</Trans>,
-          },
-        }
-      } else if (hasSufficientInputForTrade || (wrapType !== WrapType.NOT_APPLICABLE && !wrapError)) {
-        return {}
+          onClick: onApprove,
+          children:
+            approvalState === ApproveOrPermitState.REQUIRES_SIGNATURE ? <Trans>Allow</Trans> : <Trans>Approve</Trans>,
+        },
       }
     }
-    return { disabled: true }
-  }, [
-    addApprovalTransaction,
-    approval,
-    approvalCurrencyAmount?.currency,
-    approvalHash,
-    chainId,
-    disabled,
-    inputCurrency,
-    inputCurrencyBalance,
-    inputTradeCurrencyAmount,
-    wrapError,
-    wrapLoading,
-    wrapType,
-  ])
+    if (approvalState === ApproveOrPermitState.PENDING_APPROVAL) {
+      return {
+        disabled: true,
+        action: {
+          message: (
+            <EtherscanLink type={ExplorerDataType.TRANSACTION} data={approvalHash}>
+              <Trans>Approval pending</Trans>
+            </EtherscanLink>
+          ),
+          icon: Spinner,
+          onClick: () => void 0, // @TODO: should not require an onclick
+          children: <Trans>Approve</Trans>,
+        },
+      }
+    }
+    return {}
+  }, [approvalCurrencyAmount?.currency, approvalHash, approvalState, disableSwap, inputCurrency, onApprove, wrapType])
 
   const deadline = useTransactionDeadline()
-  const { signatureData } = useERC20PermitFromTrade(optimizedTrade, allowedSlippage, deadline)
 
   // the callback to execute the swap
   const { callback: swapCallback } = useSwapCallback({
     trade: optimizedTrade,
-    allowedSlippage,
+    allowedSlippage: slippage.allowed,
     recipientAddressOrName: account ?? null,
     signatureData,
     deadline,
@@ -178,7 +184,7 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
   }, [addTransaction, inputTradeCurrencyAmount, outputTradeCurrencyAmount, setDisplayTxHash, swapCallback, tradeType])
 
   const ButtonText = useCallback(() => {
-    if (wrapError !== WrapError.NO_ERROR) {
+    if ((wrapType === WrapType.WRAP || wrapType === WrapType.UNWRAP) && wrapError !== WrapError.NO_ERROR) {
       return <WrapErrorText wrapError={wrapError} />
     }
     switch (wrapType) {
@@ -223,9 +229,9 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
       </ActionButton>
       {activeTrade && (
         <Dialog color="dialog" onClose={handleDialogClose}>
-          <SummaryDialog trade={activeTrade} allowedSlippage={allowedSlippage} onConfirm={onConfirm} />
+          <SummaryDialog trade={activeTrade} slippage={slippage} onConfirm={onConfirm} />
         </Dialog>
       )}
     </>
   )
-}
+})

src/lib/components/Swap/SwapPropValidator.tsx

@@ -1,6 +1,7 @@
 import { BigNumber } from '@ethersproject/bignumber'
-import { DefaultAddress, SwapProps } from 'lib/components/Swap'
 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'
@@ -15,7 +16,7 @@ function isAddressOrAddressMap(addressOrMap: DefaultAddress): boolean {
   return false
 }
 
-type ValidatorProps = PropsWithChildren<SwapProps>
+type ValidatorProps = PropsWithChildren<TokenDefaults & FeeOptions>
 
 export default function SwapPropValidator(props: ValidatorProps) {
   const { convenienceFee, convenienceFeeRecipient } = props
@@ -47,7 +48,7 @@ export default function SwapPropValidator(props: ValidatorProps) {
     }
   }, [convenienceFee, convenienceFeeRecipient])
 
-  const { defaultInputAddress, defaultInputAmount, defaultOutputAddress, defaultOutputAmount } = props
+  const { defaultInputTokenAddress, defaultInputAmount, defaultOutputTokenAddress, defaultOutputAmount } = props
   useEffect(() => {
     if (defaultOutputAmount && defaultInputAmount) {
       throw new IntegrationError('defaultInputAmount and defaultOutputAmount may not both be defined.')
@@ -60,17 +61,25 @@ export default function SwapPropValidator(props: ValidatorProps) {
         `defaultOutputAmount must be a positive number. (You set it to ${defaultOutputAmount})`
       )
     }
-    if (defaultInputAddress && !isAddressOrAddressMap(defaultInputAddress) && defaultInputAddress !== 'NATIVE') {
+    if (
+      defaultInputTokenAddress &&
+      !isAddressOrAddressMap(defaultInputTokenAddress) &&
+      defaultInputTokenAddress !== 'NATIVE'
+    ) {
       throw new IntegrationError(
-        `defaultInputAddress(es) must be a valid address or "NATIVE". (You set it to ${defaultInputAddress}`
+        `defaultInputTokenAddress(es) must be a valid address or "NATIVE". (You set it to ${defaultInputTokenAddress}`
       )
     }
-    if (defaultOutputAddress && !isAddressOrAddressMap(defaultOutputAddress) && defaultOutputAddress !== 'NATIVE') {
+    if (
+      defaultOutputTokenAddress &&
+      !isAddressOrAddressMap(defaultOutputTokenAddress) &&
+      defaultOutputTokenAddress !== 'NATIVE'
+    ) {
       throw new IntegrationError(
-        `defaultOutputAddress(es) must be a valid address or "NATIVE". (You set it to ${defaultOutputAddress}`
+        `defaultOutputTokenAddress(es) must be a valid address or "NATIVE". (You set it to ${defaultOutputTokenAddress}`
       )
     }
-  }, [defaultInputAddress, defaultInputAmount, defaultOutputAddress, defaultOutputAmount])
+  }, [defaultInputTokenAddress, defaultInputAmount, defaultOutputTokenAddress, defaultOutputAmount])
 
   return <>{props.children}</>
 }

src/lib/components/Swap/TokenInput.tsx

@@ -2,7 +2,7 @@ import 'setimmediate'
 
 import { Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
-import { loadingOpacityCss } from 'lib/css/loading'
+import { loadingTransitionCss } from 'lib/css/loading'
 import styled, { keyframes, ThemedText } from 'lib/theme'
 import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
@@ -16,7 +16,7 @@ const TokenInputRow = styled(Row)`
   grid-template-columns: 1fr;
 `
 
-const ValueInput = styled(DecimalInput)<{ $loading: boolean }>`
+const ValueInput = styled(DecimalInput)`
   color: ${({ theme }) => theme.primary};
   height: 1em;
 
@@ -28,7 +28,7 @@ const ValueInput = styled(DecimalInput)<{ $loading: boolean }>`
     color: ${({ theme }) => theme.onHover(theme.secondary)};
   }
 
-  ${loadingOpacityCss}
+  ${loadingTransitionCss}
 `
 
 const delayedFadeIn = keyframes`
@@ -108,7 +108,7 @@ export default function TokenInput({
             onFocus={() => setShowMax(hasMax)}
             onChange={onChangeInput}
             disabled={disabled || !currency}
-            $loading={Boolean(loading)}
+            isLoading={Boolean(loading)}
             ref={input}
           ></ValueInput>
         </ThemedText.H2>

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

@@ -1,17 +1,24 @@
 import { Trans } from '@lingui/macro'
 import { Currency, TradeType } from '@uniswap/sdk-core'
-import useUSDCPrice from 'hooks/useUSDCPrice'
+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 { WrapType } from 'lib/hooks/swap/useWrapCallback'
-import { AlertTriangle, Icon, Info, Spinner } from 'lib/icons'
-import { ThemedText } from 'lib/theme'
-import { ReactNode, useCallback, useMemo, useState } from 'react'
+import useUSDCPriceImpact 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 { TextButton } from '../../Button'
-import Row from '../../Row'
+import Price from '../Price'
 import RoutingDiagram from '../RoutingDiagram'
 
+const Loading = styled.span`
+  color: ${({ theme }) => theme.secondary};
+  ${loadingCss};
+`
+
 interface CaptionProps {
   icon?: Icon
   caption: ReactNode
@@ -47,7 +54,16 @@ export function Empty() {
 }
 
 export function LoadingTrade() {
-  return <Caption icon={Spinner} caption={<Trans>Fetching best price…</Trans>} />
+  return (
+    <Caption
+      icon={InlineSpinner}
+      caption={
+        <Loading>
+          <Trans>Fetching best price…</Trans>
+        </Loading>
+      }
+    />
+  )
 }
 
 export function WrapCurrency({ loading, wrapType }: { loading: boolean; wrapType: WrapType.UNWRAP | WrapType.WRAP }) {
@@ -62,40 +78,24 @@ export function WrapCurrency({ loading, wrapType }: { loading: boolean; wrapType
 }
 
 export function Trade({ trade }: { trade: InterfaceTrade<Currency, Currency, TradeType> }) {
-  const [flip, setFlip] = useState(true)
-  const { inputAmount, outputAmount, executionPrice } = trade
-  const fiatValueInput = useUSDCPrice(inputAmount.currency)
-  const fiatValueOutput = useUSDCPrice(outputAmount.currency)
-
-  const ratio = useMemo(() => {
-    const [a, b] = flip ? [outputAmount, inputAmount] : [inputAmount, outputAmount]
-    const priceString = (!flip ? executionPrice : executionPrice?.invert())?.toSignificant(6)
-
-    const ratio = `1 ${a.currency.symbol} = ${priceString} ${b.currency.symbol}`
-    const usdc = !flip
-      ? fiatValueInput
-        ? ` ($${fiatValueInput.toSignificant(6)})`
-        : null
-      : fiatValueOutput
-      ? ` ($${fiatValueOutput.toSignificant(6)})`
-      : null
-
-    return (
-      <Row gap={0.25} style={{ userSelect: 'text' }}>
-        {ratio}
-        {usdc && <ThemedText.Caption color="secondary">{usdc}</ThemedText.Caption>}
-      </Row>
-    )
-  }, [executionPrice, fiatValueInput, fiatValueOutput, flip, inputAmount, outputAmount])
-
+  const { inputAmount: input, outputAmount: output } = trade
+  const { outputUSDC, priceImpact, warning: priceImpactWarning } = useUSDCPriceImpact(input, output)
   return (
     <>
-      <Tooltip placement="bottom" icon={Info}>
-        <RoutingDiagram trade={trade} />
+      <Tooltip placement="bottom" icon={priceImpactWarning ? AlertTriangle : Info}>
+        <Column gap={0.75}>
+          {priceImpactWarning && (
+            <>
+              <ThemedText.Caption>
+                The output amount is estimated at {priceImpact} less than the input amount due to high price impact
+              </ThemedText.Caption>
+              <Rule />
+            </>
+          )}
+          <RoutingDiagram trade={trade} />
+        </Column>
       </Tooltip>
-      <TextButton color="primary" onClick={() => setFlip(!flip)}>
-        {ratio}
-      </TextButton>
+      <Price trade={trade} outputUSDC={outputUSDC} />
     </>
   )
 }

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

@@ -5,7 +5,7 @@ import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
 import { largeIconCss } from 'lib/icons'
 import { Field } from 'lib/state/swap'
 import styled, { ThemedText } from 'lib/theme'
-import { useMemo } from 'react'
+import { memo, useMemo } from 'react'
 import { TradeState } from 'state/routing/types'
 
 import Row from '../../Row'
@@ -17,7 +17,7 @@ const ToolbarRow = styled(Row)`
   ${largeIconCss}
 `
 
-export default function Toolbar({ disabled }: { disabled?: boolean }) {
+export default memo(function Toolbar({ disabled }: { disabled?: boolean }) {
   const { chainId } = useActiveWeb3React()
   const {
     trade: { trade, state },
@@ -78,4 +78,4 @@ export default function Toolbar({ disabled }: { disabled?: boolean }) {
       </ThemedText.Caption>
     </>
   )
-}
+})

src/lib/components/Swap/index.tsx

@@ -2,8 +2,8 @@ import { Trans } from '@lingui/macro'
 import { TokenInfo } from '@uniswap/token-lists'
 import { useAtom } from 'jotai'
 import { SwapInfoUpdater } from 'lib/hooks/swap/useSwapInfo'
-import useSyncConvenienceFee from 'lib/hooks/swap/useSyncConvenienceFee'
-import useSyncSwapDefaults from 'lib/hooks/swap/useSyncSwapDefaults'
+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'
@@ -26,8 +26,6 @@ import SwapButton from './SwapButton'
 import SwapPropValidator from './SwapPropValidator'
 import Toolbar from './Toolbar'
 
-export type DefaultAddress = string | { [chainId: number]: string | 'NATIVE' } | 'NATIVE'
-
 function getTransactionFromMap(
   txs: { [hash: string]: Transaction },
   hash?: string
@@ -44,20 +42,14 @@ function getTransactionFromMap(
   return
 }
 
-export interface SwapProps {
+export interface SwapProps extends TokenDefaults, FeeOptions {
   tokenList?: string | TokenInfo[]
-  defaultInputAddress?: DefaultAddress
-  defaultInputAmount?: string
-  defaultOutputAddress?: DefaultAddress
-  defaultOutputAmount?: string
-  convenienceFee?: number
-  convenienceFeeRecipient?: string | { [chainId: number]: string }
   onConnectWallet?: () => void
 }
 
 export default function Swap(props: SwapProps) {
   useSyncTokenList(props.tokenList)
-  useSyncSwapDefaults(props)
+  useSyncTokenDefaults(props)
   useSyncConvenienceFee(props)
 
   const { active, account } = useActiveWeb3React()

src/lib/components/TokenImg.tsx

@@ -1,18 +1,23 @@
 import { Currency } from '@uniswap/sdk-core'
+import { useToken } from 'lib/hooks/useCurrency'
 import useCurrencyLogoURIs from 'lib/hooks/useCurrencyLogoURIs'
-import { Slash } from 'lib/icons'
+import { MissingToken } from 'lib/icons'
 import styled from 'lib/theme'
 import { useCallback, useEffect, useState } from 'react'
 
 const badSrcs = new Set<string>()
 
-interface TokenImgProps {
-  className?: string
+interface BaseProps {
   token: Currency
 }
 
-function TokenImg({ className, token }: TokenImgProps) {
-  const srcs = useCurrencyLogoURIs(token)
+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 [src, setSrc] = useState<string | undefined>()
   useEffect(() => {
     setSrc(srcs.find((src) => !badSrcs.has(src)))
@@ -23,9 +28,9 @@ function TokenImg({ className, token }: TokenImgProps) {
   }, [src, srcs])
 
   if (src) {
-    return <img className={className} src={src} alt={token.name || token.symbol} onError={onError} />
+    return <img src={src} alt={tokenInfo.name || tokenInfo.symbol} onError={onError} {...rest} />
   }
-  return <Slash className={className} color="secondary" />
+  return <MissingToken color="secondary" {...rest} />
 }
 
 export default styled(TokenImg)<{ size?: number }>`

src/lib/components/TokenSelect/TokenButton.tsx

@@ -22,9 +22,14 @@ const StyledTokenButton = styled(Button)<{ empty?: boolean }>`
 
 const TokenButtonRow = styled(Row)<{ collapsed: boolean }>`
   height: 1.2em;
-  max-width: ${({ collapsed }) => (collapsed ? '1.2' : '8.2')}em;
-  overflow-x: hidden;
+  // max-width must have an absolute value in order to transition.
+  max-width: ${({ collapsed }) => (collapsed ? '1.2em' : '12em')};
+  overflow: hidden;
   transition: max-width 0.25s linear;
+
+  img {
+    min-width: 1.2em;
+  }
 `
 
 interface TokenButtonProps {

src/lib/components/TokenSelect/index.tsx

@@ -5,7 +5,7 @@ import { useCurrencyBalances } from 'lib/hooks/useCurrencyBalance'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import useTokenList, { useIsTokenListLoaded, useQueryCurrencies } from 'lib/hooks/useTokenList'
 import styled, { ThemedText } from 'lib/theme'
-import { ElementRef, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ElementRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { currencyId } from 'utils/currencyId'
 
 import Column from '../Column'
@@ -97,7 +97,21 @@ export function TokenSelectDialog({ value, onSelect }: TokenSelectDialogProps) {
         )}
         <Rule padded />
       </Column>
-      {isLoaded ? <TokenOptions tokens={tokens} onSelect={onSelect} ref={setOptions} /> : <TokenOptionsSkeleton />}
+      {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 />
+      )}
     </>
   )
 }
@@ -109,10 +123,11 @@ interface TokenSelectProps {
   onSelect: (value: Currency) => void
 }
 
-export default function TokenSelect({ value, collapsed, disabled, onSelect }: TokenSelectProps) {
+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)
@@ -122,7 +137,7 @@ export default function TokenSelect({ value, collapsed, disabled, onSelect }: To
   )
   return (
     <>
-      <TokenButton value={value} collapsed={collapsed} disabled={disabled} onClick={() => setOpen(true)} />
+      <TokenButton value={value} collapsed={collapsed} disabled={disabled} onClick={onOpen} />
       {open && (
         <Dialog color="module" onClose={() => setOpen(false)}>
           <TokenSelectDialog value={value} onSelect={selectAndClose} />
@@ -130,4 +145,4 @@ export default function TokenSelect({ value, collapsed, disabled, onSelect }: To
       )}
     </>
   )
-}
+})

src/lib/components/Web3Provider.tsx

@@ -1,40 +0,0 @@
-import { initializeConnector } from '@web3-react/core'
-import { EIP1193 } from '@web3-react/eip1193'
-import { Actions, Connector, Provider as Eip1193Provider } from '@web3-react/types'
-import { Url } from '@web3-react/url'
-import { SetStateAction } from 'jotai'
-import { RESET, useUpdateAtom } from 'jotai/utils'
-import { injectedAtom, urlAtom, Web3ReactState } from 'lib/state/web3'
-import { ReactNode, useEffect } from 'react'
-
-interface Web3ProviderProps {
-  jsonRpcEndpoint?: string
-  provider?: Eip1193Provider
-  children: ReactNode
-}
-
-function useConnector<T extends { new (actions: Actions, initializer: I): Connector }, I>(
-  Connector: T,
-  initializer: I | undefined,
-  setContext: (update: typeof RESET | SetStateAction<Web3ReactState>) => void
-) {
-  return useEffect(() => {
-    if (initializer) {
-      const state = initializeConnector((actions) => new Connector(actions, initializer))
-      state[0].activate()
-      setContext(state)
-    } else {
-      setContext(RESET)
-    }
-  }, [Connector, initializer, setContext])
-}
-
-export default function Web3Provider({ jsonRpcEndpoint, provider, children }: Web3ProviderProps) {
-  const setUrl = useUpdateAtom(urlAtom)
-  useConnector(Url, jsonRpcEndpoint, setUrl)
-
-  const setInjected = useUpdateAtom(injectedAtom)
-  useConnector(EIP1193, provider, setInjected)
-
-  return <>{children}</>
-}

src/lib/components/Widget.tsx

@@ -3,6 +3,7 @@ import { Provider as Eip1193Provider } from '@web3-react/types'
 import { DEFAULT_LOCALE, SupportedLocale } from 'constants/locales'
 import { Provider as AtomProvider } from 'jotai'
 import { TransactionsUpdater } from 'lib/hooks/transactions'
+import { Web3Provider } from 'lib/hooks/useActiveWeb3React'
 import { BlockUpdater } from 'lib/hooks/useBlockNumber'
 import useEip1193Provider from 'lib/hooks/useEip1193Provider'
 import { UNMOUNTING } from 'lib/hooks/useUnmount'
@@ -15,7 +16,6 @@ import { Provider as ReduxProvider } from 'react-redux'
 import { Modal, Provider as DialogProvider } from './Dialog'
 import ErrorBoundary, { ErrorHandler } from './Error/ErrorBoundary'
 import WidgetPropValidator from './Error/WidgetsPropsValidator'
-import Web3Provider from './Web3Provider'
 
 const WidgetWrapper = styled.div<{ width?: number | string }>`
   -moz-osx-font-smoothing: grayscale;
@@ -23,6 +23,7 @@ const WidgetWrapper = styled.div<{ width?: number | string }>`
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background-color: ${({ theme }) => theme.container};
   border-radius: ${({ theme }) => theme.borderRadius}em;
+  box-sizing: border-box;
   color: ${({ theme }) => theme.primary};
   display: flex;
   flex-direction: column;
@@ -30,7 +31,7 @@ const WidgetWrapper = styled.div<{ width?: number | string }>`
   font-size: 16px;
   font-smooth: always;
   font-variant: none;
-  height: 348px;
+  height: 356px;
   min-width: 300px;
   padding: 0.25em;
   position: relative;
@@ -39,10 +40,10 @@ const WidgetWrapper = styled.div<{ width?: number | string }>`
 
   * {
     box-sizing: border-box;
-    font-family: ${({ theme }) => theme.fontFamily};
+    font-family: ${({ theme }) => (typeof theme.fontFamily === 'string' ? theme.fontFamily : theme.fontFamily.font)};
 
     @supports (font-variation-settings: normal) {
-      font-family: ${({ theme }) => theme.fontFamilyVariable};
+      font-family: ${({ theme }) => (typeof theme.fontFamily === 'string' ? undefined : theme.fontFamily.variable)};
     }
   }
 `

src/lib/css/loading.ts

@@ -1,8 +1,14 @@
 import { css } from 'lib/theme'
 
-// need to use $loading as `loading` is a reserved prop
-export const loadingOpacityCss = css<{ $loading: boolean }>`
-  filter: ${({ $loading }) => ($loading ? 'grayscale(1)' : 'none')};
-  opacity: ${({ $loading }) => ($loading ? '0.4' : '1')};
+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 }>`
+  ${({ isLoading }) => isLoading && loadingCss};
   transition: opacity 0.2s ease-in-out;
 `

src/lib/hooks/swap/index.ts

@@ -83,7 +83,7 @@ export function useIsAmountPopulated() {
 export function useSwapAmount(field: Field): [string | undefined, (amount: string) => void] {
   const amount = useAtomValue(amountAtom)
   const isFieldIndependent = useIsSwapFieldIndependent(field)
-  const value = useMemo(() => (isFieldIndependent ? amount : undefined), [amount, isFieldIndependent])
+  const value = isFieldIndependent ? amount : undefined
   const updateSwap = useUpdateAtom(swapAtom)
   const updateAmount = useCallback(
     (amount: string) =>
@@ -101,8 +101,9 @@ export function useSwapCurrencyAmount(field: Field): CurrencyAmount<Currency> |
   const isAmountPopulated = useIsAmountPopulated()
   const [swapAmount] = useSwapAmount(field)
   const [swapCurrency] = useSwapCurrency(field)
+  const currencyAmount = useMemo(() => tryParseCurrencyAmount(swapAmount, swapCurrency), [swapAmount, swapCurrency])
   if (isFieldIndependent && isAmountPopulated) {
-    return tryParseCurrencyAmount(swapAmount, swapCurrency)
+    return currencyAmount
   }
   return
 }

src/lib/hooks/swap/useSwapApproval.ts

@@ -4,7 +4,9 @@ import { Pair, Route as V2Route, Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Pool, Route as V3Route, Trade as V3Trade } from '@uniswap/v3-sdk'
 import { SWAP_ROUTER_ADDRESSES, V2_ROUTER_ADDRESS, V3_ROUTER_ADDRESS } from 'constants/addresses'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
-import { useMemo } from 'react'
+import { useERC20PermitFromTrade, UseERC20PermitState } from 'hooks/useERC20Permit'
+import useTransactionDeadline from 'lib/hooks/useTransactionDeadline'
+import { useCallback, useMemo } from 'react'
 import invariant from 'tiny-invariant'
 import { getTxOptimizedSwapRouter, SwapRouterVersion } from 'utils/getTxOptimizedSwapRouter'
 
@@ -134,3 +136,78 @@ export function useSwapApprovalOptimizedTrade(
     }
   }, [trade, optimizedSwapRouter])
 }
+
+export enum ApproveOrPermitState {
+  REQUIRES_APPROVAL,
+  PENDING_APPROVAL,
+  REQUIRES_SIGNATURE,
+  PENDING_SIGNATURE,
+  APPROVED,
+}
+
+/**
+ * Returns all relevant statuses and callback functions for approvals.
+ * Considers both standard approval and ERC20 permit.
+ */
+export const useApproveOrPermit = (
+  trade:
+    | V2Trade<Currency, Currency, TradeType>
+    | V3Trade<Currency, Currency, TradeType>
+    | Trade<Currency, Currency, TradeType>
+    | undefined,
+  allowedSlippage: Percent,
+  useIsPendingApproval: (token?: Token, spender?: string) => boolean,
+  amount?: CurrencyAmount<Currency> // defaults to trade.maximumAmountIn(allowedSlippage)
+) => {
+  const deadline = useTransactionDeadline()
+
+  // Check approvals on ERC20 contract based on amount.
+  const [approval, getApproval] = useSwapApproval(trade, allowedSlippage, useIsPendingApproval, amount)
+
+  // Check status of permit and whether token supports it.
+  const {
+    state: signatureState,
+    signatureData,
+    gatherPermitSignature,
+  } = useERC20PermitFromTrade(trade, allowedSlippage, deadline)
+
+  const notApproved = approval === ApprovalState.NOT_APPROVED && !(signatureState === UseERC20PermitState.SIGNED)
+
+  // If permit is supported, trigger a signature, if not create approval transaction.
+  const handleApproveOrPermit = useCallback(async () => {
+    if (signatureState === UseERC20PermitState.NOT_SIGNED && gatherPermitSignature) {
+      try {
+        return await gatherPermitSignature()
+      } catch (error) {
+        // Try to approve if gatherPermitSignature failed for any reason other than the user rejecting it.
+        if (error?.code !== 4001) {
+          return getApproval()
+        }
+      }
+    } else {
+      return getApproval()
+    }
+  }, [signatureState, gatherPermitSignature, getApproval])
+
+  const approvalState = useMemo(() => {
+    if (approval === ApprovalState.PENDING) {
+      return ApproveOrPermitState.PENDING_APPROVAL
+    }
+    if (signatureState === UseERC20PermitState.LOADING) {
+      return ApproveOrPermitState.PENDING_SIGNATURE
+    }
+    if (notApproved && Boolean(gatherPermitSignature)) {
+      return ApproveOrPermitState.REQUIRES_SIGNATURE
+    }
+    if (notApproved) {
+      return ApproveOrPermitState.REQUIRES_APPROVAL
+    }
+    return ApproveOrPermitState.APPROVED
+  }, [approval, gatherPermitSignature, notApproved, signatureState])
+
+  return {
+    approvalState,
+    signatureData,
+    handleApproveOrPermit,
+  }
+}

src/lib/hooks/swap/useSwapInfo.tsx

@@ -11,8 +11,9 @@ import { InterfaceTrade, TradeState } from 'state/routing/types'
 
 import { isAddress } from '../../../utils'
 import useActiveWeb3React from '../useActiveWeb3React'
-import useAllowedSlippage from '../useAllowedSlippage'
+import useSlippage, { Slippage } from '../useSlippage'
 import { useBestTrade } from './useBestTrade'
+import useWrapCallback, { WrapType } from './useWrapCallback'
 
 interface SwapInfo {
   currencies: { [field in Field]?: Currency }
@@ -22,7 +23,7 @@ interface SwapInfo {
     trade?: InterfaceTrade<Currency, Currency, TradeType>
     state: TradeState
   }
-  allowedSlippage: Percent
+  slippage: Slippage
   feeOptions: FeeOptions | undefined
 }
 
@@ -35,61 +36,52 @@ const BAD_RECIPIENT_ADDRESSES: { [address: string]: true } = {
 // from the current swap inputs, compute the best trade and return it.
 function useComputeSwapInfo(): SwapInfo {
   const { account } = useActiveWeb3React()
-
+  const { type: wrapType } = useWrapCallback()
+  const isWrapping = wrapType === WrapType.WRAP || wrapType === WrapType.UNWRAP
   const {
     independentField,
     amount,
     [Field.INPUT]: inputCurrency,
     [Field.OUTPUT]: outputCurrency,
   } = useAtomValue(swapAtom)
-
+  const isExactIn = independentField === Field.INPUT
   const feeOptions = useAtomValue(feeOptionsAtom)
 
-  const to = account
-
-  const relevantTokenBalances = useCurrencyBalances(
-    account,
-    useMemo(() => [inputCurrency ?? undefined, outputCurrency ?? undefined], [inputCurrency, outputCurrency])
-  )
-
-  const isExactIn = independentField === Field.INPUT
   const parsedAmount = useMemo(
     () => tryParseCurrencyAmount(amount, (isExactIn ? inputCurrency : outputCurrency) ?? undefined),
     [inputCurrency, isExactIn, outputCurrency, amount]
   )
-
-  //@TODO(ianlapham): this would eventually be replaced with routing api logic.
+  // TODO(ianlapham): this would eventually be replaced with routing api logic.
   const trade = useBestTrade(
     isExactIn ? TradeType.EXACT_INPUT : TradeType.EXACT_OUTPUT,
     parsedAmount,
     (isExactIn ? outputCurrency : inputCurrency) ?? undefined
   )
-
-  const currencies = useMemo(
-    () => ({
-      [Field.INPUT]: inputCurrency ?? undefined,
-      [Field.OUTPUT]: outputCurrency ?? undefined,
-    }),
-    [inputCurrency, outputCurrency]
-  )
-
-  const currencyBalances = useMemo(
-    () => ({
-      [Field.INPUT]: relevantTokenBalances[0],
-      [Field.OUTPUT]: relevantTokenBalances[1],
-    }),
-    [relevantTokenBalances]
-  )
-
   const tradeCurrencyAmounts = useMemo(
     () => ({
-      [Field.INPUT]: trade.trade?.inputAmount,
-      [Field.OUTPUT]: trade.trade?.outputAmount,
+      // Use same amount for input and output if user is wrapping.
+      [Field.INPUT]: isWrapping || isExactIn ? parsedAmount : trade.trade?.inputAmount,
+      [Field.OUTPUT]: isWrapping || !isExactIn ? parsedAmount : trade.trade?.outputAmount,
     }),
-    [trade.trade?.inputAmount, trade.trade?.outputAmount]
+    [isExactIn, isWrapping, parsedAmount, trade.trade?.inputAmount, trade.trade?.outputAmount]
   )
+  const slippage = useSlippage(trade.trade)
 
-  const allowedSlippage = useAllowedSlippage(trade.trade)
+  const currencies = useMemo(
+    () => ({ [Field.INPUT]: inputCurrency, [Field.OUTPUT]: outputCurrency }),
+    [inputCurrency, outputCurrency]
+  )
+  const [inputCurrencyBalance, outputCurrencyBalance] = useCurrencyBalances(
+    account,
+    useMemo(() => [inputCurrency, outputCurrency], [inputCurrency, outputCurrency])
+  )
+  const currencyBalances = useMemo(
+    () => ({
+      [Field.INPUT]: inputCurrencyBalance,
+      [Field.OUTPUT]: outputCurrencyBalance,
+    }),
+    [inputCurrencyBalance, outputCurrencyBalance]
+  )
 
   const inputError = useMemo(() => {
     let inputError: ReactNode | undefined
@@ -106,24 +98,24 @@ function useComputeSwapInfo(): SwapInfo {
       inputError = inputError ?? <Trans>Enter an amount</Trans>
     }
 
-    const formattedTo = isAddress(to)
-    if (!to || !formattedTo) {
+    const formattedAddress = isAddress(account)
+    if (!account || !formattedAddress) {
       inputError = inputError ?? <Trans>Enter a recipient</Trans>
     } else {
-      if (BAD_RECIPIENT_ADDRESSES[formattedTo]) {
+      if (BAD_RECIPIENT_ADDRESSES[formattedAddress]) {
         inputError = inputError ?? <Trans>Invalid recipient</Trans>
       }
     }
 
     // compare input balance to max input based on version
-    const [balanceIn, amountIn] = [currencyBalances[Field.INPUT], trade.trade?.maximumAmountIn(allowedSlippage)]
+    const [balanceIn, amountIn] = [currencyBalances[Field.INPUT], trade.trade?.maximumAmountIn(slippage.allowed)]
 
     if (balanceIn && amountIn && balanceIn.lessThan(amountIn)) {
       inputError = <Trans>Insufficient {amountIn.currency.symbol} balance</Trans>
     }
 
     return inputError
-  }, [account, allowedSlippage, currencies, currencyBalances, parsedAmount, to, trade.trade])
+  }, [account, slippage.allowed, currencies, currencyBalances, parsedAmount, trade.trade])
 
   return useMemo(
     () => ({
@@ -132,10 +124,10 @@ function useComputeSwapInfo(): SwapInfo {
       inputError,
       trade,
       tradeCurrencyAmounts,
-      allowedSlippage,
+      slippage,
       feeOptions,
     }),
-    [currencies, currencyBalances, inputError, trade, tradeCurrencyAmounts, allowedSlippage, feeOptions]
+    [currencies, currencyBalances, inputError, trade, tradeCurrencyAmounts, slippage, feeOptions]
   )
 }
 
@@ -144,7 +136,7 @@ const swapInfoAtom = atom<SwapInfo>({
   currencyBalances: {},
   trade: { state: TradeState.INVALID },
   tradeCurrencyAmounts: {},
-  allowedSlippage: new Percent(0),
+  slippage: { auto: true, allowed: new Percent(0) },
   feeOptions: undefined,
 })
 

src/lib/hooks/swap/useSyncConvenienceFee.ts

@@ -4,12 +4,12 @@ import { useUpdateAtom } from 'jotai/utils'
 import { feeOptionsAtom } from 'lib/state/swap'
 import { useEffect } from 'react'
 
-interface FeeOptionsArgs {
+export interface FeeOptions {
   convenienceFee?: number
   convenienceFeeRecipient?: string | string | { [chainId: number]: string }
 }
 
-export default function useSyncConvenienceFee({ convenienceFee, convenienceFeeRecipient }: FeeOptionsArgs) {
+export default function useSyncConvenienceFee({ convenienceFee, convenienceFeeRecipient }: FeeOptions) {
   const { chainId } = useActiveWeb3React()
   const updateFeeOptions = useUpdateAtom(feeOptionsAtom)
 

src/lib/hooks/swap/useSyncSwapDefaults.ts

@@ -1,70 +0,0 @@
-import { Currency } from '@uniswap/sdk-core'
-import { nativeOnChain } from 'constants/tokens'
-import { useUpdateAtom } from 'jotai/utils'
-import { DefaultAddress } from 'lib/components/Swap'
-import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
-import { useToken } from 'lib/hooks/useCurrency'
-import { Field, Swap, swapAtom } from 'lib/state/swap'
-import { useCallback, useLayoutEffect, useState } from 'react'
-
-function useDefaultToken(
-  defaultAddress: DefaultAddress | undefined,
-  chainId: number | undefined
-): Currency | null | undefined {
-  let address = undefined
-  if (typeof defaultAddress === 'string') {
-    address = defaultAddress
-  } else if (typeof defaultAddress === 'object' && chainId) {
-    address = defaultAddress[chainId]
-  }
-  const token = useToken(address)
-  if (chainId && address === 'NATIVE') {
-    return nativeOnChain(chainId)
-  }
-  return token
-}
-
-interface UseSwapDefaultsArgs {
-  defaultInputAddress?: DefaultAddress
-  defaultInputAmount?: string
-  defaultOutputAddress?: DefaultAddress
-  defaultOutputAmount?: string
-}
-
-export default function useSyncSwapDefaults({
-  defaultInputAddress,
-  defaultInputAmount,
-  defaultOutputAddress,
-  defaultOutputAmount,
-}: UseSwapDefaultsArgs) {
-  const updateSwap = useUpdateAtom(swapAtom)
-  const { chainId } = useActiveWeb3React()
-  const defaultInputToken = useDefaultToken(defaultInputAddress, chainId)
-  const defaultOutputToken = useDefaultToken(defaultOutputAddress, chainId)
-
-  const setToDefaults = useCallback(() => {
-    const defaultSwapState: Swap = {
-      amount: '',
-      [Field.INPUT]: defaultInputToken || undefined,
-      [Field.OUTPUT]: defaultOutputToken || undefined,
-      independentField: Field.INPUT,
-    }
-    if (defaultInputAmount && defaultInputToken) {
-      defaultSwapState.amount = defaultInputAmount
-    } else if (defaultOutputAmount && defaultOutputToken) {
-      defaultSwapState.independentField = Field.OUTPUT
-      defaultSwapState.amount = defaultOutputAmount
-    }
-    updateSwap((swap) => ({ ...swap, ...defaultSwapState }))
-  }, [defaultInputToken, defaultOutputToken, defaultInputAmount, defaultOutputAmount, updateSwap])
-
-  const [previousChainId, setPreviousChainId] = useState(chainId)
-  useLayoutEffect(() => {
-    setPreviousChainId(chainId)
-  }, [chainId])
-  useLayoutEffect(() => {
-    if (chainId && chainId !== previousChainId) {
-      setToDefaults()
-    }
-  }, [chainId, previousChainId, setToDefaults])
-}

src/lib/hooks/swap/useSyncTokenDefaults.ts

@@ -0,0 +1,83 @@
+import { Currency } from '@uniswap/sdk-core'
+import { nativeOnChain } from 'constants/tokens'
+import { useUpdateAtom } from 'jotai/utils'
+import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
+import { useToken } from 'lib/hooks/useCurrency'
+import useNativeCurrency from 'lib/hooks/useNativeCurrency'
+import { Field, Swap, swapAtom } from 'lib/state/swap'
+import { useCallback, useLayoutEffect, useState } from 'react'
+
+import useOnSupportedNetwork from '../useOnSupportedNetwork'
+
+export type DefaultAddress = string | { [chainId: number]: string | 'NATIVE' } | 'NATIVE'
+
+export interface TokenDefaults {
+  defaultInputTokenAddress?: DefaultAddress
+  defaultInputAmount?: number | string
+  defaultOutputTokenAddress?: DefaultAddress
+  defaultOutputAmount?: number | string
+}
+
+function useDefaultToken(
+  defaultAddress: DefaultAddress | undefined,
+  chainId: number | undefined
+): Currency | undefined {
+  let address = undefined
+  if (typeof defaultAddress === 'string') {
+    address = defaultAddress
+  } else if (typeof defaultAddress === 'object' && chainId) {
+    address = defaultAddress[chainId]
+  }
+  const token = useToken(address)
+
+  const onSupportedNetwork = useOnSupportedNetwork()
+
+  // Only use native currency if chain ID is in supported chains. ExtendedEther will error otherwise.
+  if (chainId && address === 'NATIVE' && onSupportedNetwork) {
+    return nativeOnChain(chainId)
+  }
+  return token ?? undefined
+}
+
+export default function useSyncTokenDefaults({
+  defaultInputTokenAddress,
+  defaultInputAmount,
+  defaultOutputTokenAddress,
+  defaultOutputAmount,
+}: TokenDefaults) {
+  const updateSwap = useUpdateAtom(swapAtom)
+  const { chainId } = useActiveWeb3React()
+  const onSupportedNetwork = useOnSupportedNetwork()
+  const nativeCurrency = useNativeCurrency()
+  const defaultOutputToken = useDefaultToken(defaultOutputTokenAddress, chainId)
+  const defaultInputToken =
+    useDefaultToken(defaultInputTokenAddress, chainId) ??
+    // Default the input token to the native currency if it is not the output token.
+    (defaultOutputToken !== nativeCurrency && onSupportedNetwork ? nativeCurrency : undefined)
+
+  const setToDefaults = useCallback(() => {
+    const defaultSwapState: Swap = {
+      amount: '',
+      [Field.INPUT]: defaultInputToken,
+      [Field.OUTPUT]: defaultOutputToken,
+      independentField: Field.INPUT,
+    }
+    if (defaultInputToken && defaultInputAmount) {
+      defaultSwapState.amount = defaultInputAmount.toString()
+    } else if (defaultOutputToken && defaultOutputAmount) {
+      defaultSwapState.independentField = Field.OUTPUT
+      defaultSwapState.amount = defaultOutputAmount.toString()
+    }
+    updateSwap((swap) => ({ ...swap, ...defaultSwapState }))
+  }, [defaultInputAmount, defaultInputToken, defaultOutputAmount, defaultOutputToken, updateSwap])
+
+  const [previousChainId, setPreviousChainId] = useState(chainId)
+  useLayoutEffect(() => {
+    setPreviousChainId(chainId)
+  }, [chainId])
+  useLayoutEffect(() => {
+    if (chainId && chainId !== previousChainId) {
+      setToDefaults()
+    }
+  }, [chainId, previousChainId, setToDefaults])
+}

src/lib/hooks/swap/useWrapCallback.tsx

@@ -44,33 +44,25 @@ export default function useWrapCallback(): UseWrapCallbackReturns {
   const { account, chainId } = useActiveWeb3React()
   const [{ loading, error }, setWrapState] = useAtom(wrapState)
   const wrappedNativeCurrencyContract = useWETHContract()
-  const {
-    amount,
-    independentField,
-    [Field.INPUT]: inputCurrency,
-    [Field.OUTPUT]: outputCurrency,
-  } = useAtomValue(swapAtom)
+  const { amount, [Field.INPUT]: inputCurrency, [Field.OUTPUT]: outputCurrency } = useAtomValue(swapAtom)
 
   const wrapType = useMemo(() => {
     if (!inputCurrency || !outputCurrency || !chainId) {
       return WrapType.NOT_APPLICABLE
     }
-    const wrappedNativeCurrency = WRAPPED_NATIVE_CURRENCY[chainId]
-    if (inputCurrency.isNative && wrappedNativeCurrency.equals(outputCurrency)) {
+    if (inputCurrency.isNative && WRAPPED_NATIVE_CURRENCY[chainId]?.equals(outputCurrency)) {
       return WrapType.WRAP
     }
-    if (wrappedNativeCurrency.equals(inputCurrency) && outputCurrency.isNative) {
+    if (WRAPPED_NATIVE_CURRENCY[chainId]?.equals(inputCurrency) && outputCurrency.isNative) {
       return WrapType.UNWRAP
     }
     return WrapType.NOT_APPLICABLE
   }, [chainId, inputCurrency, outputCurrency])
 
-  const isExactIn = independentField === Field.INPUT
-  const parsedAmount = useMemo(
-    () => tryParseCurrencyAmount(amount, (isExactIn ? inputCurrency : outputCurrency) ?? undefined),
-    [inputCurrency, isExactIn, outputCurrency, amount]
+  const parsedAmountIn = useMemo(
+    () => tryParseCurrencyAmount(amount, inputCurrency ?? undefined),
+    [inputCurrency, amount]
   )
-  const parsedAmountIn = isExactIn ? parsedAmount : undefined
 
   const relevantTokenBalances = useCurrencyBalances(
     account,
@@ -84,7 +76,7 @@ export default function useWrapCallback(): UseWrapCallbackReturns {
     [relevantTokenBalances]
   )
 
-  const hasInputAmount = Boolean(parsedAmount?.greaterThan('0'))
+  const hasInputAmount = Boolean(parsedAmountIn?.greaterThan('0'))
   const sufficientBalance = parsedAmountIn && !currencyBalances[Field.INPUT]?.lessThan(parsedAmountIn)
 
   useEffect(() => {
@@ -119,7 +111,11 @@ export default function useWrapCallback(): UseWrapCallbackReturns {
     setWrapState((state) => ({ ...state, loading: true }))
     const result = await (wrapType === WrapType.WRAP
       ? wrappedNativeCurrencyContract.deposit({ value: `0x${parsedAmountIn.quotient.toString(16)}` })
-      : wrappedNativeCurrencyContract.withdraw(`0x${parsedAmountIn.quotient.toString(16)}`))
+      : wrappedNativeCurrencyContract.withdraw(`0x${parsedAmountIn.quotient.toString(16)}`)
+    ).catch((e: unknown) => {
+      setWrapState((state) => ({ ...state, loading: false }))
+      throw e
+    })
     // resolve loading state after one confirmation
     result.wait(1).finally(() => setWrapState((state) => ({ ...state, loading: false })))
     return Promise.resolve(result)

src/lib/hooks/useActiveWeb3React.ts

@@ -1,19 +0,0 @@
-import { Web3ReactHooks } from '@web3-react/core'
-import { useAtomValue } from 'jotai/utils'
-import { injectedAtom, urlAtom, Web3ReactState } from 'lib/state/web3'
-
-export function useActiveWeb3ReactState(): Web3ReactState {
-  const injected = useAtomValue(injectedAtom)
-  const url = useAtomValue(urlAtom)
-  return injected[1].useIsActive() ? injected : url
-}
-
-export function useActiveWeb3ReactHooks(): Web3ReactHooks {
-  const [, hooks] = useActiveWeb3ReactState()
-  return hooks
-}
-
-export default function useActiveWeb3React() {
-  const { useProvider, useWeb3React } = useActiveWeb3ReactHooks()
-  return useWeb3React(useProvider())
-}

src/lib/hooks/useActiveWeb3React.tsx

@@ -0,0 +1,63 @@
+import { getPriorityConnector, initializeConnector, Web3ReactHooks } from '@web3-react/core'
+import { EIP1193 } from '@web3-react/eip1193'
+import { EMPTY } from '@web3-react/empty'
+import { Actions, Connector, Provider as Eip1193Provider } from '@web3-react/types'
+import { Url } from '@web3-react/url'
+import { useAtom, WritableAtom } from 'jotai'
+import { useAtomValue } from 'jotai/utils'
+import { atomWithDefault, RESET, useUpdateAtom } from 'jotai/utils'
+import { PropsWithChildren, useEffect } from 'react'
+
+const [connector, hooks] = initializeConnector(() => EMPTY)
+const EMPTY_CONNECTOR: [Connector, Web3ReactHooks] = [connector, hooks]
+const urlConnectorAtom = atomWithDefault<[Connector, Web3ReactHooks]>(() => EMPTY_CONNECTOR)
+const injectedConnectorAtom = atomWithDefault<[Connector, Web3ReactHooks]>(() => EMPTY_CONNECTOR)
+const web3Atom = atomWithDefault<ReturnType<typeof hooks.useWeb3React>>(() => ({
+  connector: EMPTY_CONNECTOR[0],
+  library: undefined,
+  chainId: undefined,
+  account: undefined,
+  active: false,
+  error: undefined,
+}))
+
+export default function useActiveWeb3React() {
+  return useAtomValue(web3Atom)
+}
+
+function useConnector<T extends { new (actions: Actions, initializer: I): Connector }, I>(
+  connectorAtom: WritableAtom<[Connector, Web3ReactHooks], typeof RESET | [Connector, Web3ReactHooks]>,
+  Connector: T,
+  initializer: I | undefined
+) {
+  const [connector, setConnector] = useAtom(connectorAtom)
+  useEffect(() => {
+    if (initializer) {
+      const [connector, hooks] = initializeConnector((actions) => new Connector(actions, initializer))
+      connector.activate()
+      setConnector([connector, hooks])
+    } else {
+      setConnector(RESET)
+    }
+  }, [Connector, initializer, setConnector])
+  return connector
+}
+
+interface Web3ProviderProps {
+  provider?: Eip1193Provider
+  jsonRpcEndpoint?: string
+}
+
+export function Web3Provider({ provider, jsonRpcEndpoint, children }: PropsWithChildren<Web3ProviderProps>) {
+  const injectedConnector = useConnector(injectedConnectorAtom, EIP1193, provider)
+  const urlConnector = useConnector(urlConnectorAtom, Url, jsonRpcEndpoint)
+  const priorityConnector = getPriorityConnector(injectedConnector, urlConnector)
+  const priorityProvider = priorityConnector.usePriorityProvider()
+  const priorityWeb3React = priorityConnector.usePriorityWeb3React(priorityProvider)
+  const setWeb3 = useUpdateAtom(web3Atom)
+  useEffect(() => {
+    setWeb3(priorityWeb3React)
+  }, [priorityWeb3React, setWeb3])
+
+  return <>{children}</>
+}

src/lib/hooks/useAllowedSlippage.ts

@@ -1,27 +0,0 @@
-import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
-import useAutoSlippageTolerance from 'hooks/useAutoSlippageTolerance'
-import { useAtomValue } from 'jotai/utils'
-import { autoSlippageAtom, maxSlippageAtom } from 'lib/state/settings'
-import { InterfaceTrade } from 'state/routing/types'
-
-export function toPercent(maxSlippage: number | undefined): Percent | undefined {
-  if (!maxSlippage) return undefined
-  const numerator = Math.floor(maxSlippage * 100)
-  return new Percent(numerator, 10_000)
-}
-
-/** Returns the user-inputted max slippage. */
-export default function useAllowedSlippage(trade: InterfaceTrade<Currency, Currency, TradeType> | undefined): Percent {
-  const autoSlippage = useAutoSlippageTolerance(trade)
-  const maxSlippage = toPercent(useAtomValue(maxSlippageAtom))
-  return useAtomValue(autoSlippageAtom) ? autoSlippage : maxSlippage ?? autoSlippage
-}
-
-export const MAX_VALID_SLIPPAGE = new Percent(1, 2)
-export const MIN_HIGH_SLIPPAGE = new Percent(1, 100)
-
-export function getSlippageWarning(slippage?: Percent): 'warning' | 'error' | undefined {
-  if (slippage?.greaterThan(MAX_VALID_SLIPPAGE)) return 'error'
-  if (slippage?.greaterThan(MIN_HIGH_SLIPPAGE)) return 'warning'
-  return
-}

src/lib/hooks/useHasFocus.ts

@@ -1,6 +1,14 @@
 import { useCallback, useEffect, useState } from 'react'
 
 export default function useHasFocus(node: Node | null | undefined): boolean {
+  useEffect(() => {
+    if (node instanceof HTMLElement) {
+      // tabIndex is required to receive blur events from non-button elements.
+      node.tabIndex = node.tabIndex || -1
+      // Without explicitly omitting outline, Safari will now outline this node when focused.
+      node.style.outline = node.style.outline || 'none'
+    }
+  }, [node])
   const [hasFocus, setHasFocus] = useState(node?.contains(document?.activeElement) ?? false)
   const onFocus = useCallback(() => setHasFocus(true), [])
   const onBlur = useCallback((e) => setHasFocus(node?.contains(e.relatedTarget) ?? false), [node])

src/lib/hooks/useSlippage.ts

@@ -0,0 +1,41 @@
+import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
+import useAutoSlippageTolerance from 'hooks/useAutoSlippageTolerance'
+import { useAtomValue } from 'jotai/utils'
+import { autoSlippageAtom, maxSlippageAtom } from 'lib/state/settings'
+import { useMemo } from 'react'
+import { InterfaceTrade } from 'state/routing/types'
+
+export function toPercent(maxSlippage: number | undefined): Percent | undefined {
+  if (!maxSlippage) return undefined
+  const numerator = Math.floor(maxSlippage * 100)
+  return new Percent(numerator, 10_000)
+}
+
+export interface Slippage {
+  auto: boolean
+  allowed: Percent
+  warning?: 'warning' | 'error'
+}
+
+/** Returns the allowed slippage, and whether it is auto-slippage. */
+export default function useSlippage(trade: InterfaceTrade<Currency, Currency, TradeType> | undefined): Slippage {
+  const shouldUseAutoSlippage = useAtomValue(autoSlippageAtom)
+  const autoSlippage = useAutoSlippageTolerance(shouldUseAutoSlippage ? trade : undefined)
+  const maxSlippageValue = useAtomValue(maxSlippageAtom)
+  const maxSlippage = useMemo(() => toPercent(maxSlippageValue), [maxSlippageValue])
+  return useMemo(() => {
+    const auto = shouldUseAutoSlippage || !maxSlippage
+    const allowed = shouldUseAutoSlippage ? autoSlippage : maxSlippage ?? autoSlippage
+    const warning = auto ? undefined : getSlippageWarning(allowed)
+    return { auto, allowed, warning }
+  }, [autoSlippage, maxSlippage, shouldUseAutoSlippage])
+}
+
+export const MAX_VALID_SLIPPAGE = new Percent(1, 2)
+export const MIN_HIGH_SLIPPAGE = new Percent(1, 100)
+
+export function getSlippageWarning(slippage?: Percent): 'warning' | 'error' | undefined {
+  if (slippage?.greaterThan(MAX_VALID_SLIPPAGE)) return 'error'
+  if (slippage?.greaterThan(MIN_HIGH_SLIPPAGE)) return 'warning'
+  return
+}

src/lib/hooks/useTokenList/index.ts

@@ -1,7 +1,7 @@
 import { NativeCurrency, Token } from '@uniswap/sdk-core'
 import { TokenInfo, TokenList } from '@uniswap/token-lists'
-import { atom } from 'jotai'
-import { useAtomValue, useUpdateAtom } from 'jotai/utils'
+import { atom, useAtom } from 'jotai'
+import { useAtomValue } from 'jotai/utils'
 import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
 import resolveENSContentHash from 'lib/utils/resolveENSContentHash'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -14,31 +14,35 @@ import { validateTokens } from './validateTokenList'
 
 export const DEFAULT_TOKEN_LIST = 'https://gateway.ipfs.io/ipns/tokens.uniswap.org'
 
-const chainTokenMapAtom = atom<ChainTokenMap | undefined>(undefined)
+const chainTokenMapAtom = atom<ChainTokenMap | null>(null)
 
 export function useIsTokenListLoaded() {
   return Boolean(useAtomValue(chainTokenMapAtom))
 }
 
 export function useSyncTokenList(list: string | TokenInfo[] = DEFAULT_TOKEN_LIST): void {
-  const { chainId, library } = useActiveWeb3React()
-  const setChainTokenMap = useUpdateAtom(chainTokenMapAtom)
-
   // Error boundaries will not catch (non-rendering) async errors, but it should still be shown
   const [error, setError] = useState<Error>()
   if (error) throw error
 
+  const [chainTokenMap, setChainTokenMap] = useAtom(chainTokenMapAtom)
+  useEffect(() => setChainTokenMap(null), [list, setChainTokenMap])
+
+  const { chainId, library } = useActiveWeb3React()
   const resolver = useCallback(
     (ensName: string) => {
       if (library && chainId === 1) {
-        // TODO(zzmp): Use network resolver when wallet is not on chainId === 1.
         return resolveENSContentHash(ensName, library)
       }
       throw new Error('Could not construct mainnet ENS resolver')
     },
     [chainId, library]
   )
+
   useEffect(() => {
+    // If the list was already loaded, don't reload it.
+    if (chainTokenMap) return
+
     let stale = false
     activateList(list)
     return () => {
@@ -53,19 +57,20 @@ export function useSyncTokenList(list: string | TokenInfo[] = DEFAULT_TOKEN_LIST
         } else {
           tokens = await validateTokens(list)
         }
-        const tokenMap = tokensToChainTokenMap(tokens) // also caches the fetched tokens, so it is invoked even if stale
+        // tokensToChainTokenMap also caches the fetched tokens, so it must be invoked even if stale.
+        const map = tokensToChainTokenMap(tokens)
         if (!stale) {
-          setChainTokenMap(tokenMap)
+          setChainTokenMap(map)
           setError(undefined)
         }
       } catch (e: unknown) {
         if (!stale) {
-          setChainTokenMap(undefined)
+          // Do not update the token map, in case the map was already resolved without error on mainnet.
           setError(e as Error)
         }
       }
     }
-  }, [list, resolver, setChainTokenMap])
+  }, [chainTokenMap, list, resolver, setChainTokenMap])
 }
 
 export default function useTokenList(): WrappedTokenInfo[] {

src/lib/hooks/useUSDCPriceImpact.ts

@@ -0,0 +1,38 @@
+import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
+import { useUSDCValue } from 'hooks/useUSDCPrice'
+import { useMemo } from 'react'
+import { computeFiatValuePriceImpact } from 'utils/computeFiatValuePriceImpact'
+import { getPriceImpactWarning } from 'utils/prices'
+
+/**
+ * Computes input/output USDC equivalents and the price impact.
+ * Returns the price impact as a human readable string.
+ */
+export default function useUSDCPriceImpact(
+  inputAmount: CurrencyAmount<Currency> | undefined,
+  outputAmount: CurrencyAmount<Currency> | undefined
+): {
+  inputUSDC?: CurrencyAmount<Token>
+  outputUSDC?: CurrencyAmount<Token>
+  priceImpact?: string
+  warning?: 'warning' | 'error'
+} {
+  const inputUSDC = useUSDCValue(inputAmount) ?? undefined
+  const outputUSDC = useUSDCValue(outputAmount) ?? undefined
+  return useMemo(() => {
+    const priceImpact = computeFiatValuePriceImpact(inputUSDC, outputUSDC)
+    const warning = getPriceImpactWarning(priceImpact)
+    return {
+      inputUSDC,
+      outputUSDC,
+      priceImpact: priceImpact && toHumanReadablePriceImpact(priceImpact),
+      warning,
+    }
+  }, [inputUSDC, outputUSDC])
+}
+
+function toHumanReadablePriceImpact(priceImpact: Percent): string {
+  const sign = priceImpact.lessThan(0) ? '+' : ''
+  const number = parseFloat(priceImpact.multiply(-1)?.toSignificant(3))
+  return `${sign}${number}%`
+}

src/lib/i18n.tsx

@@ -81,7 +81,7 @@ export async function dynamicActivate(locale: SupportedLocale) {
   // There are no default messages in production; instead, bundle the default to save a network request:
   // see https://github.com/lingui/js-lingui/issues/388#issuecomment-497779030
   const catalog =
-    locale === DEFAULT_LOCALE ? DEFAULT_CATALOG : await import(`${process.env.REACT_APP_LOCALES}/${locale}`)
+    locale === DEFAULT_LOCALE ? DEFAULT_CATALOG : await import(`${process.env.REACT_APP_LOCALES}/${locale}.js`)
   // Bundlers will either export it as default or as a named export named default.
   i18n.load(locale, catalog.messages || catalog.default.messages)
   i18n.activate(locale)

src/lib/icons/index.tsx

@@ -1,9 +1,12 @@
+import MissingTokenIcon from 'lib/assets/missing-token-image.png'
 import { ReactComponent as RouterIcon } from 'lib/assets/svg/auto_router.svg'
 import { ReactComponent as CheckIcon } from 'lib/assets/svg/check.svg'
 import { ReactComponent as ExpandoIcon } from 'lib/assets/svg/expando.svg'
+import { ReactComponent as InlineSpinnerIcon } from 'lib/assets/svg/inline_spinner.svg'
 import { ReactComponent as LogoIcon } from 'lib/assets/svg/logo.svg'
 import { ReactComponent as SpinnerIcon } from 'lib/assets/svg/spinner.svg'
 import { ReactComponent as WalletIcon } from 'lib/assets/svg/wallet.svg'
+import { loadingCss } from 'lib/css/loading'
 import styled, { Color, css, keyframes } from 'lib/theme'
 import { FunctionComponent, SVGProps } from 'react'
 /* eslint-disable no-restricted-imports */
@@ -30,6 +33,10 @@ import {
 
 type SVGIcon = FunctionComponent<SVGProps<SVGSVGElement>>
 
+const StyledImage = styled.img`
+  height: 1em;
+  width: 1em;
+`
 function icon(Icon: FeatherIcon | SVGIcon) {
   return styled(Icon)<{ color?: Color }>`
     clip-path: stroke-box;
@@ -90,6 +97,9 @@ export const Trash2 = icon(Trash2Icon)
 export const Wallet = icon(WalletIcon)
 export const X = icon(XIcon)
 export const XOctagon = icon(XOctagonIcon)
+export const MissingToken = (props: React.ImgHTMLAttributes<HTMLImageElement>) => (
+  <StyledImage src={MissingTokenIcon} alt="Missing token" {...props} />
+)
 
 export const Check = styled(icon(CheckIcon))`
   circle {
@@ -99,17 +109,18 @@ export const Check = styled(icon(CheckIcon))`
 `
 
 export const Expando = styled(icon(ExpandoIcon))<{ open: boolean }>`
-  path {
+  .left,
+  .right {
     transition: transform 0.25s ease-in-out;
     will-change: transform;
+  }
 
-    &:first-child {
-      transform: ${({ open }) => open && 'translateX(-25%)'};
-    }
+  .left {
+    transform: ${({ open }) => (open ? undefined : 'translateX(-25%)')};
+  }
 
-    &:last-child {
-      transform: ${({ open }) => open && 'translateX(25%)'};
-    }
+  .right {
+    transform: ${({ open }) => (open ? undefined : 'translateX(25%)')};
   }
 `
 
@@ -133,3 +144,14 @@ export const Spinner = styled(icon(SpinnerIcon))<{ color?: Color }>`
   stroke-linecap: round;
   stroke-width: 2;
 `
+
+export const InlineSpinner = styled(icon(InlineSpinnerIcon))<{ color?: Color }>`
+  animation: ${rotate} 1s cubic-bezier(0.83, 0, 0.17, 1) infinite;
+  color: ${({ color = 'active', theme }) => theme[color]};
+  fill: ${({ color = 'active', theme }) => theme[color]};
+
+  #track {
+    stroke: ${({ theme }) => theme.secondary};
+    ${loadingCss};
+  }
+`

src/lib/index.tsx

@@ -1,10 +1,18 @@
 import Swap, { SwapProps } from './components/Swap'
 import Widget, { WidgetProps } from './components/Widget'
+
+export type { ErrorHandler } from './components/Error/ErrorBoundary'
+export type { FeeOptions } from './hooks/swap/useSyncConvenienceFee'
+export type { DefaultAddress, TokenDefaults } from './hooks/swap/useSyncTokenDefaults'
+export type { Theme } from './theme'
 export { darkTheme, lightTheme } from './theme'
-export type { Theme } from './theme/theme'
+export type { Provider as EthersProvider } from '@ethersproject/abstract-provider'
+export type { TokenInfo } from '@uniswap/token-lists'
+export type { Provider as Eip1193Provider } from '@web3-react/types'
+export type { SupportedLocale } from 'constants/locales'
 export { SUPPORTED_LOCALES } from 'constants/locales'
 
-type SwapWidgetProps = SwapProps & WidgetProps
+export type SwapWidgetProps = SwapProps & WidgetProps
 
 export function SwapWidget(props: SwapWidgetProps) {
   return (

src/lib/state/web3.ts

@@ -1,11 +0,0 @@
-import { initializeConnector, Web3ReactHooks } from '@web3-react/core'
-import { EMPTY } from '@web3-react/empty'
-import { Connector, Web3ReactStore } from '@web3-react/types'
-import { atomWithDefault } from 'jotai/utils'
-
-export type Web3ReactState = [Connector, Web3ReactHooks, Web3ReactStore]
-
-const EMPTY_CONNECTOR = initializeConnector(() => EMPTY)
-
-export const urlAtom = atomWithDefault<Web3ReactState>(() => EMPTY_CONNECTOR)
-export const injectedAtom = atomWithDefault<Web3ReactState>(() => EMPTY_CONNECTOR)

src/lib/theme/index.tsx

@@ -73,8 +73,10 @@ export const darkTheme: Colors = {
 
 export const defaultTheme = {
   borderRadius: 1,
-  fontFamily: '"Inter", sans-serif',
-  fontFamilyVariable: '"InterVariable", sans-serif',
+  fontFamily: {
+    font: '"Inter", sans-serif',
+    variable: '"InterVariable", sans-serif',
+  },
   fontFamilyCode: 'IBM Plex Mono',
   tokenColorExtraction: false,
   ...lightTheme,

src/lib/theme/theme.ts

@@ -27,8 +27,12 @@ export type Color = keyof Colors
 
 export interface Attributes {
   borderRadius: boolean | number
-  fontFamily: string
-  fontFamilyVariable: string
+  fontFamily:
+    | string
+    | {
+        font: string
+        variable: string
+      }
   fontFamilyCode: string
   tokenColorExtraction: boolean
 }

src/lib/theme/type.tsx

@@ -3,12 +3,19 @@ import { Text, TextProps as TextPropsWithCss } from 'rebass'
 import styled, { useTheme } from './styled'
 import { Color } from './theme'
 
-type TextProps = Omit<TextPropsWithCss, 'css' | 'color'> & { color?: Color }
+type TextProps = Omit<TextPropsWithCss, 'css' | 'color' | 'userSelect'> & {
+  color?: Color
+  userSelect?: true
+}
 
-const TextWrapper = styled(Text)<{ color?: Color; lineHeight: string }>`
+const TextWrapper = styled(Text)<{ color?: Color; lineHeight: string; noWrap?: true; userSelect?: true }>`
   color: ${({ color = 'currentColor', theme }) => theme[color as Color]};
   // Avoid the need for placeholders by setting min-height to line-height.
   min-height: ${({ lineHeight }) => lineHeight};
+  // user-select is set to 'none' at the root element (Widget), but is desired for displayed data.
+  // user-select must be configured through styled-components for cross-browser compat (eg to auto-generate prefixed properties).
+  user-select: ${({ userSelect }) => userSelect && 'text'};
+  white-space: ${({ noWrap }) => noWrap && 'nowrap'};
 `
 
 const TransitionTextWrapper = styled(TextWrapper)`
@@ -16,23 +23,33 @@ const TransitionTextWrapper = styled(TextWrapper)`
 `
 
 export function H1(props: TextProps) {
-  return <TextWrapper className="headline headline-1" fontSize={36} fontWeight={400} lineHeight="36px" {...props} />
+  return (
+    <TextWrapper className="headline headline-1" fontSize={36} fontWeight={400} lineHeight="36px" noWrap {...props} />
+  )
 }
 
 export function H2(props: TextProps) {
-  return <TextWrapper className="headline headline-2" fontSize={32} fontWeight={400} lineHeight="32px" {...props} />
+  return (
+    <TextWrapper className="headline headline-2" fontSize={32} fontWeight={400} lineHeight="32px" noWrap {...props} />
+  )
 }
 
 export function H3(props: TextProps) {
-  return <TextWrapper className="headline headline-3" fontSize={20} fontWeight={400} lineHeight="20px" {...props} />
+  return (
+    <TextWrapper className="headline headline-3" fontSize={20} fontWeight={400} lineHeight="20px" noWrap {...props} />
+  )
 }
 
 export function Subhead1(props: TextProps) {
-  return <TextWrapper className="subhead subhead-1" fontSize={16} fontWeight={500} lineHeight="16px" {...props} />
+  return (
+    <TextWrapper className="subhead subhead-1" fontSize={16} fontWeight={500} lineHeight="16px" noWrap {...props} />
+  )
 }
 
 export function Subhead2(props: TextProps) {
-  return <TextWrapper className="subhead subhead-2" fontSize={14} fontWeight={500} lineHeight="14px" {...props} />
+  return (
+    <TextWrapper className="subhead subhead-2" fontSize={14} fontWeight={500} lineHeight="14px" noWrap {...props} />
+  )
 }
 
 export function Body1(props: TextProps) {
@@ -48,19 +65,25 @@ export function Caption(props: TextProps) {
 }
 
 export function Badge(props: TextProps) {
-  return <TextWrapper className="badge" fontSize={8} fontWeight={600} lineHeight="8px" {...props} />
+  return <TextWrapper className="badge" fontSize="8px" fontWeight={600} lineHeight="8px" noWrap {...props} />
 }
 
 export function ButtonLarge(props: TextProps) {
-  return <TextWrapper className="button button-large" fontSize={20} fontWeight={500} lineHeight="20px" {...props} />
+  return (
+    <TextWrapper className="button button-large" fontSize={20} fontWeight={500} lineHeight="20px" noWrap {...props} />
+  )
 }
 
 export function ButtonMedium(props: TextProps) {
-  return <TextWrapper className="button button-medium" fontSize={16} fontWeight={500} lineHeight="16px" {...props} />
+  return (
+    <TextWrapper className="button button-medium" fontSize={16} fontWeight={500} lineHeight="16px" noWrap {...props} />
+  )
 }
 
 export function ButtonSmall(props: TextProps) {
-  return <TextWrapper className="button button-small" fontSize={14} fontWeight={500} lineHeight="14px" {...props} />
+  return (
+    <TextWrapper className="button button-small" fontSize={14} fontWeight={500} lineHeight="14px" noWrap {...props} />
+  )
 }
 
 export function TransitionButton(props: TextProps & { buttonSize: 'small' | 'medium' | 'large' }) {
@@ -73,6 +96,7 @@ export function TransitionButton(props: TextProps & { buttonSize: 'small' | 'med
       fontSize={fontSize}
       fontWeight={500}
       lineHeight={lineHeight}
+      noWrap
       {...props}
     />
   )

src/lib/utils/formatLocaleNumber.ts

@@ -6,19 +6,35 @@ interface FormatLocaleNumberArgs {
   locale: string | null | undefined
   options?: Intl.NumberFormatOptions
   sigFigs?: number
+  fixedDecimals?: number
 }
 
-export default function formatLocaleNumber({ number, locale, sigFigs, options = {} }: FormatLocaleNumberArgs): string {
+export default function formatLocaleNumber({
+  number,
+  locale,
+  sigFigs,
+  fixedDecimals,
+  options = {},
+}: FormatLocaleNumberArgs): string {
   let localeArg: string | string[]
   if (!locale || (locale && !SUPPORTED_LOCALES.includes(locale))) {
     localeArg = DEFAULT_LOCALE
   } else {
     localeArg = [locale, DEFAULT_LOCALE]
   }
-  options.maximumSignificantDigits = options.maximumSignificantDigits || sigFigs
+  options.minimumFractionDigits = options.minimumFractionDigits || fixedDecimals
+  options.maximumFractionDigits = options.maximumFractionDigits || fixedDecimals
+
+  // Fixed decimals should override significant figures.
+  options.maximumSignificantDigits = options.maximumSignificantDigits || fixedDecimals ? undefined : sigFigs
+
+  let numberString: number
   if (typeof number === 'number') {
-    return number.toLocaleString(localeArg, options)
+    numberString = fixedDecimals ? parseFloat(number.toFixed(fixedDecimals)) : number
   } else {
-    return parseFloat(number.toSignificant(sigFigs)).toLocaleString(localeArg, options)
+    const baseString = parseFloat(number.toSignificant(sigFigs))
+    numberString = fixedDecimals ? parseFloat(baseString.toFixed(fixedDecimals)) : baseString
   }
+
+  return numberString.toLocaleString(localeArg, options)
 }

src/locales/af-ZA.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:10\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: af_ZA\n"
 "Language-Team: Afrikaans\n"
@@ -192,6 +192,10 @@ msgstr "Adres het geen eis nie"
 msgid "Against"
 msgstr "Teen"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Laat toe"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Laat migrasie van LP-teken toe"
@@ -204,6 +208,10 @@ msgstr "Laat handel oor hoë prysimpak toe en slaan die bevestigingsskerm oor. G
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Laat die Uniswap-protokol toe om u {0} te gebruik"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Laat eers {0} toe"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Toegelaat"
@@ -450,8 +458,8 @@ msgstr "Versamel"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Versamel as WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Versamel as {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Gedetailleerd"
 msgid "Details"
 msgstr "Besonderhede"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Ondersteun die Oekraïense regering direk deur tokens te skenk."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Ontkoppel"
@@ -696,6 +708,10 @@ msgstr "Verwerp"
 msgid "Docs"
 msgstr "Dokumente"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Skenk aan die Oekraïne"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Sien u nie een van u v2-posisies nie? <0> Voer dit in.</0>"
@@ -885,10 +901,15 @@ msgstr "Versteek geslote posisies"
 msgid "High Price Impact"
 msgstr "Hoë prysimpak"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Hoë prys impak"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Hoë gly"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Hoë glip verhoog die risiko van prysbeweging"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Geen voorstelle gevind nie."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Geen resultate gevind."
 
@@ -1288,10 +1310,6 @@ msgstr "Optimistiese Etherscan"
 msgid "Out of range"
 msgstr "Buite bereik"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "Uitset word geskat."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "Die uitset word geskat. As die prys met meer as {0}% verander, sal u tra
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "Die uitset word geskat. U sal minstens <0>{0} {1}</0> ontvang, anders gaan die transaksie terug."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "Uitset word geskat. Jy sal ten minste {0} {1} ontvang of die transaksie sal terugdraai."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "Uitset word geskat. Jy sal hoogstens {0} {1} stuur of die transaksie sal terugdraai."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "Uitset sal na <0>{0}</0> gestuur word"
@@ -2352,14 +2378,6 @@ msgstr "U sal ook fooie wat u uit hierdie posisie verdien, invorder."
 msgid "You will receive"
 msgstr "U sal ontvang"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Jy sal ten minste {0} {1} of die transaksie sal terugdraai."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Jy sal hoogstens {0} {1} of die transaksie sal terugdraai."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "U V2-likiditeit"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/ar-SA.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:10\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: ar_SA\n"
 "Language-Team: Arabic\n"
@@ -192,6 +192,10 @@ msgstr "العنوان ليس لديه مطالبة متاحة"
 msgid "Against"
 msgstr "ضد"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "السماح"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "السماح بترحيل رمز LP"
@@ -204,6 +208,10 @@ msgstr "السماح بتداول تأثير الأسعار المرتفعة و
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "السماح لبروتوكول Uniswap باستخدام {0} الخاص بك"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "اسمح بـ {0} أولاً"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "مسموح"
@@ -450,8 +458,8 @@ msgstr "اجمع"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "اجمع كـ WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "اجمع كـ {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "مفصل"
 msgid "Details"
 msgstr "التفاصيل"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "دعم الحكومة الأوكرانية مباشرة من خلال التبرع بالرموز."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "قطع الاتصال"
@@ -696,6 +708,10 @@ msgstr "تجاهل"
 msgid "Docs"
 msgstr "الوثائق"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "تبرع لأوكرانيا"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "لا ترى أحد مراكز v2 الخاصة بك؟ <0>قم باستيراده.</0>"
@@ -885,10 +901,15 @@ msgstr "إخفاء المراكز المغلقة"
 msgid "High Price Impact"
 msgstr "تأثير ارتفاع السعر"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "تأثير سعر مرتفع"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "ارتفاع سعر الانزلاق"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "يزيد الانزلاق العالي من مخاطر حركة السعر"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "لا توجد مقترحات."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "لا توجد نتائج."
 
@@ -1288,10 +1310,6 @@ msgstr "متفائل Etherscan"
 msgid "Out of range"
 msgstr "خارج النطاق"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "الناتج يقدر."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "الناتج تقديري. إذا تغير السعر بأكثر من {0
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "الناتج تقديري. سوف تتلقى على الأقل <0>{0} {1}</0> أو سوف تعود المعاملة."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "الناتج يقدر. سوف تتلقى {0} {1} على الأقل أو ستعود المعاملة."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "الناتج يقدر. سوف ترسل {0} {1} على الأكثر وإلا ستعود المعاملة."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "سيتم إرسال الناتج إلى <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "سوف تحصل أيضا على الرسوم المكتسبة من هذ
 msgid "You will receive"
 msgstr "سوف تستقبل"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "سوف تتلقى {0} {1} على الأقل أو ستعود المعاملة."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "سوف ترسل {0} {1} على الأكثر وإلا ستعود المعاملة."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "سيولة V2 الخاصة بك"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/ca-ES.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: ca_ES\n"
 "Language-Team: Catalan\n"
@@ -192,6 +192,10 @@ msgstr "L'adreça no té cap reclamació disponible"
 msgid "Against"
 msgstr "En contra"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Permetre"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Permet la migració de token LP"
@@ -204,6 +208,10 @@ msgstr "Permet operacions amb alt impacte en els preus i ometre la pantalla de c
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Permetre que el protocol Uniswap utilitzi el vostre {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Primer permeteu {0}"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Es permet"
@@ -450,8 +458,8 @@ msgstr "Cobra"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Cobra com a WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Recull com a {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Detallada"
 msgid "Details"
 msgstr "Detalls"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Donar suport directe al govern ucraïnès donant fitxes."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Desconnecta"
@@ -696,6 +708,10 @@ msgstr "Destitueix"
 msgid "Docs"
 msgstr "Documents"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Donar a Ucraïna"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "No veieu cap de les vostres posicions v2? <0> Importeu-la.</0>"
@@ -885,10 +901,15 @@ msgstr "Amaga les posicions tancades"
 msgid "High Price Impact"
 msgstr "Alt impacte en els preus"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Alt impacte en el preu"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Alt lliscament"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Un gran lliscament augmenta el risc de moviment de preus"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "No s'ha trobat cap proposta."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Sense resultats."
 
@@ -1288,10 +1310,6 @@ msgstr "Etherscan optimista"
 msgid "Out of range"
 msgstr "Fora de rang"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "La sortida s'estima."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "S’estima la producció. Si el preu canvia més del {0}%, la vostra tra
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "S’estima la producció. Rebrà com a mínim <0>{0} {1}</0> o la transacció es revertirà."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "La sortida s'estima. Rebràs almenys {0} {1} o la transacció es revertirà."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "La sortida s'estima. Enviareu com a màxim {0} {1} o la transacció es revertirà."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "La sortida s’enviarà a <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "També cobrarà els honoraris obtinguts per aquesta posició."
 msgid "You will receive"
 msgstr "Rebreu"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Rebràs almenys {0} {1} o la transacció es revertirà."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Enviareu com a màxim {0} {1} o la transacció es revertirà."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "La vostra liquiditat V2"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/cs-CZ.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: cs_CZ\n"
 "Language-Team: Czech\n"
@@ -192,6 +192,10 @@ msgstr "Adresa nemá žádný dostupný nárok"
 msgid "Against"
 msgstr "Proti"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Dovolit"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Povolit migraci žetonů LP"
@@ -204,6 +208,10 @@ msgstr "Povolit obchody s vysokým dopadem na cenu a přeskočit obrazovku s pot
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Povolit protokolu Uniswap používat váš {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Nejprve povolte {0}"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Povoleno"
@@ -450,8 +458,8 @@ msgstr "Sbírat"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Sbírat jako WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Sbírejte jako {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Podrobně"
 msgid "Details"
 msgstr "Podrobnosti"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Přímo podpořte ukrajinskou vládu darováním tokenů."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Odpojit"
@@ -696,6 +708,10 @@ msgstr "Zamítnout"
 msgid "Docs"
 msgstr "Dokumenty"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Darujte Ukrajině"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Nevidíte některou ze svých pozic v2? <0>Importujte ji.</0>"
@@ -885,10 +901,15 @@ msgstr "Skrýt zavřené pozice"
 msgid "High Price Impact"
 msgstr "Vysoký dopad na cenu"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Vysoký cenový dopad"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Vysoký skluz"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Vysoký skluz zvyšuje riziko pohybu cen"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Nebyly nalezeny žádné návrhy."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Nebyly nalezeny žádné výsledky."
 
@@ -1288,10 +1310,6 @@ msgstr "Optimistický Etherscan"
 msgid "Out of range"
 msgstr "Mimo rozsah"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "Výkon se odhaduje."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "Výstup je odhadnutý. Jestliže se cena změní o více než {0} %, Va
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "Výstup je odhadnutý. Obdržíte alespoň <0>{0} {1}</0>, nebo bude transakce vzata zpět."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "Výkon se odhaduje. Obdržíte alespoň {0} {1} nebo se transakce vrátí zpět."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "Výkon se odhaduje. Odešlete maximálně {0} {1} nebo se transakce vrátí zpět."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "Výstup bude odeslán na <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "Budete také pobírat poplatky získané z této pozice."
 msgid "You will receive"
 msgstr "Obdržíte"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Obdržíte alespoň {0} {1} nebo se transakce vrátí zpět."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Odešlete maximálně {0} {1} nebo se transakce vrátí zpět."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Vaše likvidita V2"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/da-DK.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: da_DK\n"
 "Language-Team: Danish\n"
@@ -192,6 +192,10 @@ msgstr "Adresse har ingen tilgængelig krav"
 msgid "Against"
 msgstr "Imod"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Give lov til"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Tillad overførsel af LP-token"
@@ -204,6 +208,10 @@ msgstr "Tillad høj pris påvirkning handler og springer over bekræftelsesskær
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Tillad Uniswap-protokollen at bruge din {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Tillad {0} først"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Tilladt"
@@ -450,8 +458,8 @@ msgstr "Indsaml"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Indsaml som WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Saml som {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Detaljeret"
 msgid "Details"
 msgstr "Detaljer"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Støt den ukrainske regering direkte ved at donere tokens."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Afbryd"
@@ -696,6 +708,10 @@ msgstr "Afvis"
 msgid "Docs"
 msgstr "Dokumenter"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Doner til Ukraine"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Kan du ikke se en af dine v2-positioner? <0>Importér den.</0>"
@@ -885,10 +901,15 @@ msgstr "Skjul lukkede positioner"
 msgid "High Price Impact"
 msgstr "Høj prispåvirkning"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Høj prispåvirkning"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Høj glidning"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Høj glidning øger risikoen for prisbevægelser"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Ingen forslag fundet."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Ingen resultater fundet."
 
@@ -1288,10 +1310,6 @@ msgstr "Optimistisk Etherscan"
 msgid "Out of range"
 msgstr "Ikke inden for rækkevidde"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "Output er estimeret."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "Output er et estimat. Hvis prisen ændrer sig mere end {0} %, bliver din
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "Output er anslået. Du vil modtage mindst <0>{0} {1}</0> ellers bliver din transaktion tilbageført."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "Output er estimeret. Du modtager mindst {0} {1} , ellers vil transaktionen vende tilbage."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "Output er estimeret. Du sender højst {0} {1} , ellers vil transaktionen vende tilbage."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "Output vil blive sendt til <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "Du vil også indsamle gebyrer optjent fra denne position."
 msgid "You will receive"
 msgstr "Du vil modtage"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Du modtager mindst {0} {1} ellers vil transaktionen vende tilbage."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Du sender højst {0} {1} ellers vil transaktionen vende tilbage."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Din V2-likviditet"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/de-DE.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: de_DE\n"
 "Language-Team: German\n"
@@ -192,6 +192,10 @@ msgstr "Adresse hat keinen gültigen Anspruch"
 msgid "Against"
 msgstr "Gegen"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Erlauben"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "LP-Token Migration erlauben"
@@ -204,6 +208,10 @@ msgstr "Erlaube hohe Preisauswirkungen und überspringe den Bestätigungsbildsch
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Erlaube dem Uniswap Protokoll, {0} zu verwenden"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Lassen Sie zuerst {0} zu"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Erlaubt"
@@ -450,8 +458,8 @@ msgstr "Beziehen"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Als WETH beziehen"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Sammeln Sie als {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Detailliert"
 msgid "Details"
 msgstr "Details"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Unterstützen Sie die ukrainische Regierung direkt, indem Sie Token spenden."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Verbindung trennen"
@@ -696,6 +708,10 @@ msgstr "Verwerfen"
 msgid "Docs"
 msgstr "Dokumentation"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Spende für die Ukraine"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Sie sehen eine Ihrer v2-Positionen nicht? <0>Importiere sie.</0>"
@@ -885,10 +901,15 @@ msgstr "Geschlossene Positionen ausblenden"
 msgid "High Price Impact"
 msgstr "Hoher Preiseinfluss"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Hohe Preiswirkung"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Hoher Schlupf"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Eine hohe Slippage erhöht das Risiko von Preisbewegungen"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Keine Vorschläge gefunden."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Keine Ergebnisse gefunden."
 
@@ -1288,10 +1310,6 @@ msgstr "Optimism Etherscan"
 msgid "Out of range"
 msgstr "Nicht im Bereich"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "Die Ausgabe wird geschätzt."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "Ausgabemenge geschätzt. Wenn sich der Preis um mehr als {0}% ändert, w
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "Ausgabemenge geschätzt. Sie erhalten mindestens <0>{0} {1}</0> oder die Transaktion wird rückgängig gemacht."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "Die Ausgabe wird geschätzt. Sie erhalten mindestens {0} {1} oder die Transaktion wird rückgängig gemacht."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "Die Ausgabe wird geschätzt. Sie senden höchstens {0} {1} oder die Transaktion wird rückgängig gemacht."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "Ausgabe wird an <0>{0}</0> gesendet"
@@ -2352,14 +2378,6 @@ msgstr "Sie werden auch die Gebühren einziehen, die diese Position eingenommen
 msgid "You will receive"
 msgstr "Sie werden erhalten"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Sie erhalten mindestens {0} {1} oder die Transaktion wird rückgängig gemacht."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Sie senden höchstens {0} {1} oder die Transaktion wird rückgängig gemacht."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Ihre V2-Liquidität"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/el-GR.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: el_GR\n"
 "Language-Team: Greek\n"
@@ -192,6 +192,10 @@ msgstr "Η διεύθυνση δεν έχει διαθέσιμη διεκδίκ
 msgid "Against"
 msgstr "Εναντίον"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Επιτρέπω"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Επιτρέψτε τη μεταφορά μάρκας παρόχου ρευστότητας (LP)"
@@ -204,6 +208,10 @@ msgstr "Επιτρέψτε τις διαπραγματεύσεις υψηλής
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Επιτρέψτε στο πρωτόκολλο Uniswap να χρησιμοποιήσει το {0} σας"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Επιτρέψτε πρώτα το {0}"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Επιτρέπεται"
@@ -450,8 +458,8 @@ msgstr "Συλλογή"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Συλλέξτε ως WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Συλλέξτε ως {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Λεπτομερής"
 msgid "Details"
 msgstr "Λεπτομέρειες"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Υποστηρίξτε άμεσα την κυβέρνηση της Ουκρανίας δωρίζοντας μάρκες."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Αποσύνδεση"
@@ -696,6 +708,10 @@ msgstr "Απόρριψη"
 msgid "Docs"
 msgstr "Έγγραφα"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Κάντε δωρεά στην Ουκρανία"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Δεν βλέπετε μία από τις θέσεις σας στο v2; <0> Εισαγάγετε τη.</0>"
@@ -885,10 +901,15 @@ msgstr "Απόκρυψη κλειστών θέσεων"
 msgid "High Price Impact"
 msgstr "Υψηλή Επίδραση Τιμών"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Υψηλό αντίκτυπο στην τιμή"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Υψηλή ολίσθηση"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Η υψηλή ολίσθηση αυξάνει τον κίνδυνο μεταβολής των τιμών"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Δεν βρέθηκαν προτάσεις."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Δεν βρέθηκαν αποτελέσματα."
 
@@ -1288,10 +1310,6 @@ msgstr "Αισιόδοξη Ethercan"
 msgid "Out of range"
 msgstr "Εκτός εύρους"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "Εκτιμάται η παραγωγή."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "Το αποτέλεσμα εκτιμήθηκε. Αν η τιμή αλλ
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "Το αποτέλεσμα εκτιμήθηκε. Θα λάβετε τουλάχιστον <0>{0} {1}</0> ή η συναλλαγή θα υπαναχωρήσει."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "Εκτιμάται η παραγωγή. Θα λάβετε τουλάχιστον {0} {1} ή η συναλλαγή θα επανέλθει."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "Εκτιμάται η παραγωγή. Θα στείλετε το πολύ {0} {1} ή η συναλλαγή θα επανέλθει."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "Το αποτέλεσμα θα σταλεί στο <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "Θα εισπράξετε επίσης τις χρεώσεις που κ
 msgid "You will receive"
 msgstr "Θα λάβετε"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Θα λάβετε τουλάχιστον {0} {1} ή η συναλλαγή θα επανέλθει."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Θα στείλετε το πολύ {0} {1} ή η συναλλαγή θα επανέλθει."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Η ρευστότητα V2 σας"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/es-ES.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: es_ES\n"
 "Language-Team: Spanish\n"
@@ -192,6 +192,10 @@ msgstr "La dirección no tiene reclamo disponible"
 msgid "Against"
 msgstr "Contra"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Permitir"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Permitir migración de token LP"
@@ -204,6 +208,10 @@ msgstr "Permitir operaciones de alto impacto de precio y omitir la pantalla de c
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Permitir que el protocolo Uniswap utilice su {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Permitir {0} primero"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Permitido"
@@ -450,8 +458,8 @@ msgstr "Recoger"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Recoger como WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Recoger como {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Detallado"
 msgid "Details"
 msgstr "Detalles"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Apoye directamente al gobierno ucraniano mediante la donación de tokens."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Desconectar"
@@ -696,6 +708,10 @@ msgstr "Descartar"
 msgid "Docs"
 msgstr "Documentos"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Donar a Ucrania"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "¿No puede visualizar una de sus posiciones v2? <0>Impórtelo.</0>"
@@ -885,10 +901,15 @@ msgstr "Ocultar posiciones cerradas"
 msgid "High Price Impact"
 msgstr "Impacto de precio alto"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Alto impacto de precio"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Alto deslizamiento"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Un alto deslizamiento aumenta el riesgo de movimiento de precios"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "No se encontraron propuestas."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "No se han encontrado resultados."
 
@@ -1288,10 +1310,6 @@ msgstr "Etherscan optimista"
 msgid "Out of range"
 msgstr "Fuera de rango"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "La producción es estimada."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "El rendimiento es estimado. Si el precio cambia en más de {0} %, su tra
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "El rendimiento es estimado. Recibirá al menos <0>{0} {1}</0> o la transacción se revertirá."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "La producción es estimada. Recibirá al menos {0} {1} o la transacción se revertirá."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "La producción es estimada. Enviarás como máximo {0} {1} o la transacción se revertirá."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "Lo producido se enviará a <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "También cobrará las comisiones ganadas por esta posición."
 msgid "You will receive"
 msgstr "Recibirá"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Recibirá al menos {0} {1} o la transacción se revertirá."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Enviarás como máximo {0} {1} o la transacción se revertirá."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Su liquidez V2"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/fi-FI.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: fi_FI\n"
 "Language-Team: Finnish\n"
@@ -192,6 +192,10 @@ msgstr "Osoitteella ei ole lunastettavaa"
 msgid "Against"
 msgstr "Vastaan"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Sallia"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Salli LP-rahakkeen siirtäminen"
@@ -204,6 +208,10 @@ msgstr "Salli korkean hintavaikutuksen kaupat ja ohita vahvistusnäyttö. Käyt
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Salli Uniswap-protokollan käyttää {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Salli ensin {0}"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Sallittu"
@@ -450,8 +458,8 @@ msgstr "Kerää"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Kerää WETH:na"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Kerää {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Yksityiskohtainen"
 msgid "Details"
 msgstr "Tiedot"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Tue suoraan Ukrainan hallitusta lahjoittamalla rahakkeita."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Katkaise yhteys"
@@ -696,6 +708,10 @@ msgstr "Sulje"
 msgid "Docs"
 msgstr "Asiakirjat"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Lahjoita Ukrainalle"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Etkö näe yhtä v2-positiostasi? <0>Tuo se.</0>"
@@ -885,10 +901,15 @@ msgstr "Piilota suljetut positiot"
 msgid "High Price Impact"
 msgstr "Korkea hintavaikutus"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Korkea hintavaikutus"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Korkea luisto"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Suuri lipsahdus lisää hintojen liikkeiden riskiä"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Ehdotuksia ei löytynyt."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Tuloksia ei löytynyt."
 
@@ -1288,10 +1310,6 @@ msgstr "Optimistinen eetteriskannaus"
 msgid "Out of range"
 msgstr "Alueen ulkopuolella"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "Tuotos on arvioitu."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "Tuotto on arvio. Jos hinta muuttuu enemmän kuin {0}%, tapahtuma perutaa
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "Tuotos on arvioitu. Saat vähintään <0>{0} {1}</0> tai tapahtuma perutaan."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "Tuotos on arvioitu. Saat vähintään {0} {1} tai tapahtuma palautuu."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "Tuotos on arvioitu. Lähetät enintään {0} {1} tai tapahtuma palautuu."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "Tuotto lähetetään kohteeseen <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "Keräät myös tästä positiosta ansaittuja palkkioita."
 msgid "You will receive"
 msgstr "Tulet vastaanottamaan"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Saat vähintään {0} {1} tai tapahtuma palautuu."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Lähetät enintään {0} {1} tai tapahtuma palautuu."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Sinun V2-likviditeettisi"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/fr-FR.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: fr_FR\n"
 "Language-Team: French\n"
@@ -192,6 +192,10 @@ msgstr "L'adresse n'a pas de revendication disponible"
 msgid "Against"
 msgstr "Contre"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Permettre"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Autoriser la migration des jetons LP"
@@ -204,6 +208,10 @@ msgstr "Autoriser les transactions à impact élevé et enlève l'écran de conf
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Autoriser le protocole Uniswap à utiliser vos {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Autoriser {0} en premier"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Autorisé"
@@ -450,8 +458,8 @@ msgstr "Collecter"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Collecter en WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Collecter comme {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Détaillé"
 msgid "Details"
 msgstr "Détails"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Soutenez directement le gouvernement ukrainien en faisant don de jetons."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Déconnecter"
@@ -696,6 +708,10 @@ msgstr "Refuser"
 msgid "Docs"
 msgstr "Documents"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Faire un don à l'Ukraine"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Vous ne voyez pas une de vos positions v2 ? <0>Importez-la.</0>"
@@ -885,10 +901,15 @@ msgstr "Masquer les positions fermées"
 msgid "High Price Impact"
 msgstr "Impact sur les prix élevés"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Impact prix élevé"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Glissement élevé"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Un glissement élevé augmente le risque de mouvement des prix"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Aucune proposition trouvée."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Aucun résultat trouvé."
 
@@ -1288,10 +1310,6 @@ msgstr "Etherscan optimiste"
 msgid "Out of range"
 msgstr "Hors de portée"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "La production est estimée."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "La sortie est estimée. Si le prix change de plus de {0}% votre transact
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "La sortie est estimée. Vous recevrez au moins <0>{0} {1}</0> ou la transaction sera annulée."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "La production est estimée. Vous recevrez au moins {0} {1} ou la transaction sera annulée."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "La production est estimée. Vous enverrez au plus {0} {1} ou la transaction sera annulée."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "La sortie sera envoyée à <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "Vous percevrez également des frais provenant de cette position."
 msgid "You will receive"
 msgstr "Vous allez recevoir"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Vous recevrez au moins {0} {1} ou la transaction sera annulée."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Vous enverrez au plus {0} {1} ou la transaction sera annulée."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Votre liquidité V2"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/he-IL.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: he_IL\n"
 "Language-Team: Hebrew\n"
@@ -192,6 +192,10 @@ msgstr "לכתובת אין כל תביעה זמינה"
 msgid "Against"
 msgstr "נגד"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "להתיר"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "אפשר העברת אסימון LP"
@@ -204,6 +208,10 @@ msgstr "אפשר עסקאות עם השפעות מחיר גבוהות ודלג
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "אפשר לפרוטוקול Uniswap להשתמש ב- {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "אפשר קודם {0}"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "מוּתָר"
@@ -450,8 +458,8 @@ msgstr "לגבות"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "לגבות כ- WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "אסוף כ {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "מְפוֹרָט"
 msgid "Details"
 msgstr "פרטים"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "תמכו ישירות בממשלת אוקראינה על ידי תרומת אסימונים."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "לְנַתֵק"
@@ -696,6 +708,10 @@ msgstr "לשחרר"
 msgid "Docs"
 msgstr "מסמכים"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "לתרום לאוקראינה"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "אינך רואה את אחת מעמדות ה- v2 שלך? <0> יבא אותו.</0>"
@@ -885,10 +901,15 @@ msgstr "הסתר עמדות סגורות"
 msgid "High Price Impact"
 msgstr "השפעה על מחיר גבוה"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "השפעה גבוהה על המחיר"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "החלקה גבוהה"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "החלקה גבוהה מגבירה את הסיכון לתנועת מחירים"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "לא נמצאו הצעות."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "לא נמצאו תוצאות."
 
@@ -1288,10 +1310,6 @@ msgstr "את'רקאן אופטימי"
 msgid "Out of range"
 msgstr "מחוץ לטווח"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "התפוקה מוערכת."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "התפוקה משוערת. אם המחיר ישתנה ביותר מ- {0}
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "התפוקה משוערת. תקבל <0>{0} {1}</0> או שהעסקה תחזור."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "התפוקה מוערכת. תקבל לפחות {0} {1} או שהעסקה תחזור."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "התפוקה מוערכת. אתה תשלח לכל היותר {0} {1} או שהעסקה תחזור."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "התפוקה תישלח אל <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "אתה גם יגבה עמלות שהרווחת מתפקיד זה."
 msgid "You will receive"
 msgstr "אתה תקבל"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "תקבל לפחות {0} {1} או שהעסקה תחזור."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "אתה תשלח לכל היותר {0} {1} או שהעסקה תחזור."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "נזילות ה- V2 שלך"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/hu-HU.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: hu_HU\n"
 "Language-Team: Hungarian\n"
@@ -192,6 +192,10 @@ msgstr "A címnek nincs elérhető követelése"
 msgid "Against"
 msgstr "Ellen"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Lehetővé teszi"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "LP token migráció engedélyezése"
@@ -204,6 +208,10 @@ msgstr "Engedélyezze a magas árfolyamú kereskedéseket, és hagyja ki a meger
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Engedélyezze az Uniswap protokollnak a(z) {0} használatát"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Először engedélyezze a {0} -t"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Engedélyezve"
@@ -450,8 +458,8 @@ msgstr "Begyűjtés"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Begyűjtés WETH-ként"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Gyűjtse {nativeWrappedSymbol}-ként"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Részletes"
 msgid "Details"
 msgstr "Részletek"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Közvetlenül támogassa az ukrán kormányt zsetonok adományozásával."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Kapcsolat bontása"
@@ -696,6 +708,10 @@ msgstr "Elvetés"
 msgid "Docs"
 msgstr "Dokumentumok"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Adományozz Ukrajnának"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Nem látja az egyik v2 pozícióját? <0> Importálja.</0>"
@@ -886,10 +902,15 @@ msgstr "Zárt pozíciók elrejtése"
 msgid "High Price Impact"
 msgstr "Magas árhatás"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Magas árhatás"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Magas csúszás"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "A nagy csúszás növeli az ármozgások kockázatát"
@@ -1232,6 +1253,7 @@ msgid "No proposals found."
 msgstr "Nem található javaslat."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Nincs találat."
 
@@ -1289,10 +1311,6 @@ msgstr "Optimista Etherscan"
 msgid "Out of range"
 msgstr "Tartományon kívül"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "A kimenet becsült."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1302,6 +1320,14 @@ msgstr "Az output becsült érték. Ha az ár {0}%-nál nagyobb mértékben vál
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "A teljesítmény becsült. Legalább <0>{0} {1}</0> vagy a tranzakció visszaáll."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "A kimenet becsült. Legalább {0} {1} -et fog kapni, különben a tranzakció visszaáll."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "A kimenet becsült. Legfeljebb {0} {1} -et küld, vagy a tranzakció visszaáll."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "A kimenet a következőre lesz elküldve: <0>{0}</0>"
@@ -2353,14 +2379,6 @@ msgstr "Ezen a pozíción megszerzett díjakat is beszedi."
 msgid "You will receive"
 msgstr "Kapni fog"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "{0} {1} fog kapni, különben a tranzakció visszaáll."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "{0} {1} küld, vagy a tranzakció visszaáll."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Saját V2 likviditása"
@@ -2508,8 +2526,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/id-ID.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: id_ID\n"
 "Language-Team: Indonesian\n"
@@ -192,6 +192,10 @@ msgstr "Alamat tidak memiliki klaim yang tersedia"
 msgid "Against"
 msgstr "Melawan"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Mengizinkan"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Izinkan migrasi token LP"
@@ -204,6 +208,10 @@ msgstr "Izinkan perdagangan berdampak harga tinggi dan lewati layar konfirmasi.
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Izinkan Protokol Uniswap untuk menggunakan {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Izinkan {0} dulu"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Diizinkan"
@@ -450,8 +458,8 @@ msgstr "Tagih"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Tagih sebagai WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Kumpulkan sebagai {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Terperinci"
 msgid "Details"
 msgstr "Perincian"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Dukung langsung pemerintah Ukraina dengan menyumbangkan token."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Putuskan"
@@ -696,6 +708,10 @@ msgstr "Buang"
 msgid "Docs"
 msgstr "Docs"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Donasi ke Ukraina"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Tidak melihat salah satu posisi v2 Anda? <0> Impor.</0>"
@@ -885,10 +901,15 @@ msgstr "Sembunyikan posisi tertutup"
 msgid "High Price Impact"
 msgstr "Dampak Harga Tinggi"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Dampak harga tinggi"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Slip tinggi"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Slippage tinggi meningkatkan risiko pergerakan harga"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Proposal tidak ditemukan."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Hasil tidak ditemukan."
 
@@ -1288,10 +1310,6 @@ msgstr "Optimis Etherscan"
 msgid "Out of range"
 msgstr "Diluar jangkauan"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "Keluaran diperkirakan."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "Output diperkirakan. Jika harga berubah lebih dari {0}%, transaksi Anda
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "Output diperkirakan. Anda akan menerima setidaknya <0>{0} {1}</0> atau transaksi akan dikembalikan."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "Keluaran diperkirakan. Anda akan menerima setidaknya {0} {1} atau transaksi akan dibatalkan."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "Keluaran diperkirakan. Anda akan mengirimkan paling banyak {0} {1} atau transaksi akan kembali."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "Output akan dikirim ke <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "Anda juga akan memungut biaya yang diperoleh dari posisi ini."
 msgid "You will receive"
 msgstr "Anda akan menerima"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Anda akan menerima setidaknya {0} {1} atau transaksi akan dibatalkan."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Anda akan mengirimkan paling banyak {0} {1} atau transaksi akan kembali."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Likuiditas V2 Anda"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/it-IT.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: it_IT\n"
 "Language-Team: Italian\n"
@@ -192,6 +192,10 @@ msgstr "L'indirizzo non ha alcun reclamo disponibile"
 msgid "Against"
 msgstr "Contro"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Permettere"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Consenti la migrazione del token LP"
@@ -204,6 +208,10 @@ msgstr "Consenti scambi ad alto impatto sui prezzi e salta la schermata di confe
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Permetti al Protocollo Uniswap di utilizzare il tuo {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Consenti prima {0}"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Consentito"
@@ -450,8 +458,8 @@ msgstr "Raccogli"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Raccogli come WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Raccogli come {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Dettagliato"
 msgid "Details"
 msgstr "Dettagli"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Sostieni direttamente il governo ucraino donando token."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Disconnessione"
@@ -696,6 +708,10 @@ msgstr "Ignora"
 msgid "Docs"
 msgstr "Documenti"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Dona all'Ucraina"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Non vedi una delle tue posizioni v2? <0>Importala.</0>"
@@ -885,10 +901,15 @@ msgstr "Nascondi posizioni chiuse"
 msgid "High Price Impact"
 msgstr "Impatto Ad Alto Prezzo"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Elevato impatto sui prezzi"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Elevato slittamento"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Un elevato slippage aumenta il rischio di oscillazione dei prezzi"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Nessuna proposta trovata."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Nessun risultato trovato."
 
@@ -1288,10 +1310,6 @@ msgstr "Etherscan ottimista"
 msgid "Out of range"
 msgstr "Fuori portata"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "La produzione è stimata."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "L'output è stimato. Se il prezzo cambia di più di {0}% la transazione
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "L'output è stimato. Riceverai almeno <0>{0} {1}</0> o la transazione verrà ripristinata."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "La produzione è stimata. Riceverai almeno {0} {1} o la transazione verrà annullata."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "La produzione è stimata. Invierai al massimo {0} {1} o la transazione verrà annullata."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "L'output verrà inviato a <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "Raccoglierai anche le commissioni guadagnate da questa posizione."
 msgid "You will receive"
 msgstr "Riceverai"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Riceverai almeno {0} {1} o la transazione verrà annullata."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Invierai al massimo {0} {1} o la transazione verrà annullata."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "La tua liquidità V2"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/ja-JP.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: ja_JP\n"
 "Language-Team: Japanese\n"
@@ -192,6 +192,10 @@ msgstr "請求可能なアドレスではありません"
 msgid "Against"
 msgstr "反対"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "許可する"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "LPトークンの移行を許可する"
@@ -204,6 +208,10 @@ msgstr "価格への大きな影響がある取引を許可し、確認画面を
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "{0} の使用をUniswapに許可する"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "最初に {0} を許可する"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "許可"
@@ -450,8 +458,8 @@ msgstr "取得する"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "WETHで取得"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "{nativeWrappedSymbol}として収集"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "詳細"
 msgid "Details"
 msgstr "詳細"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "トークンを寄付することにより、ウクライナ政府を直接支援します。"
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "接続を解除"
@@ -696,6 +708,10 @@ msgstr "注文を取り下げる"
 msgid "Docs"
 msgstr "資料"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "ウクライナに寄付する"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "V2の流動性が表示されない場合、該当のトークンを<0>インポート</0>してください"
@@ -885,10 +901,15 @@ msgstr "決済したポジションを隠す"
 msgid "High Price Impact"
 msgstr "大きな価格への影響"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "価格への影響が大きい"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "高いスリッページ"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "高いスリッページは価格変動のリスクを高めます"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "提案が見つかりません。"
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "結果が見つかりませんでした。"
 
@@ -1288,10 +1310,6 @@ msgstr "Optimistic Etherscan"
 msgid "Out of range"
 msgstr "範囲外"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "出力は推定されます。"
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "取引結果は概算です。価格が {0}%以上変化した場合、
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "取引結果は概算です。<0>{0} {1}</0> 以上を買えない場合は、取引は差し戻されます。"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "出力は推定されます。少なくとも {1} を受け取るか、トランザクションが元に戻り {0}。"
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "出力は推定されます。最大 {0} {1} を送信するか、トランザクションが元に戻ります。"
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "結果は <0>{0}</0> に送信されます"
@@ -2352,14 +2378,6 @@ msgstr "また、このポジションから得られた報酬も受け取りま
 msgid "You will receive"
 msgstr "受け取る数量"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "少なくとも {0} {1} を受け取るか、取引は元に戻ります。"
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "あなたは、最大でお送りします {0} {1} またはトランザクションが戻ります。"
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "V2の流動性"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/ko-KR.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: ko_KR\n"
 "Language-Team: Korean\n"
@@ -192,6 +192,10 @@ msgstr "주소에 사용 가능한 청구가 없습니다."
 msgid "Against"
 msgstr "반대"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "허용하다"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "LP 토큰 마이그레이션 허용"
@@ -204,6 +208,10 @@ msgstr "높은 가격 영향 거래를 허용하고 확인 화면을 건너 뜁
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Uniswap 프로토콜이 귀하의 {0}을(를) 사용하도록 허용"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "먼저 {0} 허용"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "허용됨"
@@ -450,8 +458,8 @@ msgstr "수집"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "WETH로 수집"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "{nativeWrappedSymbol}으로 수집"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "자세히"
 msgid "Details"
 msgstr "세부 정보"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "토큰을 기부하여 우크라이나 정부를 직접 지원합니다."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "연결 해제"
@@ -696,6 +708,10 @@ msgstr "해제"
 msgid "Docs"
 msgstr "문서"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "우크라이나에 기부"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "v2 포지션 중 하나가 보이지 않습니까? <0>가져 오십시오.</0>"
@@ -885,10 +901,15 @@ msgstr "닫은 포지션 숨기기"
 msgid "High Price Impact"
 msgstr "높은 가격 영향"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "높은 가격 영향"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "높은 미끄러짐"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "높은 미끄러짐은 가격 변동의 위험을 증가시킵니다."
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "제안이 없습니다."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "결과가 없습니다."
 
@@ -1288,10 +1310,6 @@ msgstr "Optimistic Etherscan"
 msgid "Out of range"
 msgstr "범위를 벗어남"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "예상되는 결과값."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "산출은 추정됩니다. 가격이 {0}% 이상 변경되면 거래가
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "산출은 추정됩니다. 최소한 <0>{0} {1}</0>을(를) 받거나 그렇지 않으면 거래가 취소됩니다."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "출력이 예상됩니다. 당신은 적어도 {0} {1} 을 받게 될 것입니다. 그렇지 않으면 거래가 되돌릴 것입니다."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "출력이 예상됩니다. 최대 {0} {1} 을 보내지 않으면 거래가 취소됩니다."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "산출은 <0>{0}</0>(으)로 이체됩니다"
@@ -2352,14 +2378,6 @@ msgstr "이 포지션에서 얻은 수수료도 징수합니다."
 msgid "You will receive"
 msgstr "다음을 받게 됩니다"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "당신은 적어도 {0} {1} 을 받게 될 것입니다. 그렇지 않으면 거래가 되돌릴 것입니다."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "{0} {1} 을 보내지 않으면 거래가 취소됩니다."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "V2 유동성"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/nl-NL.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: nl_NL\n"
 "Language-Team: Dutch\n"
@@ -192,6 +192,10 @@ msgstr "Adres heeft geen beschikbare claim"
 msgid "Against"
 msgstr "Tegen"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Toestaan"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "LP token migratie toestaan"
@@ -204,6 +208,10 @@ msgstr "Sta transacties met hoge prijsimpact toe en sla het bevestigingsscherm o
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Sta het Uniswap Protocol toe om uw {0} te gebruiken"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Sta eerst {0} toe"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Toegestaan"
@@ -450,8 +458,8 @@ msgstr "Verzamel"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Verzamel als WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Verzamel als {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Gedetailleerd"
 msgid "Details"
 msgstr "Details"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Ondersteun rechtstreeks de Oekraïense regering door tokens te doneren."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Verbinding verbreken"
@@ -696,6 +708,10 @@ msgstr "Afwijzen"
 msgid "Docs"
 msgstr "Documenten"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Doneer aan Oekraïne"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Ziet u één van uw v2 posities niet? <0>Importeer deze.</0>"
@@ -885,10 +901,15 @@ msgstr "Verberg gesloten posities"
 msgid "High Price Impact"
 msgstr "Hoge prijsimpact"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Hoge prijsimpact"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Hoge slip"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Hoge slippen verhoogt het risico van prijsbewegingen"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Geen voorstellen gevonden."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Geen resultaten gevonden."
 
@@ -1288,10 +1310,6 @@ msgstr "Optimistische Etherscan"
 msgid "Out of range"
 msgstr "Buiten bereik"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "De output wordt geschat."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "Uitvoer wordt geschat. Als de prijs met meer dan {0}% wijzigt, wordt uw
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "Uitvoer wordt ingeschat. U ontvangt ten minste <0>{0} {1}</0> of de transactie wordt teruggedraaid."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "De output wordt geschat. U ontvangt minimaal {0} {1} of de transactie wordt teruggedraaid."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "De output wordt geschat. U stuurt maximaal {0} {1} of de transactie wordt teruggedraaid."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "Uitvoer zal worden verzonden naar <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "U zult ook vergoedingen innen die vanuit deze positie zijn verdiend."
 msgid "You will receive"
 msgstr "U ontvangt"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "U ontvangt minimaal {0} {1} of de transactie wordt teruggedraaid."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "U stuurt maximaal {0} {1} of de transactie wordt teruggedraaid."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Uw V2-liquiditeit"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/no-NO.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: no_NO\n"
 "Language-Team: Norwegian\n"
@@ -192,6 +192,10 @@ msgstr "Adressen har ikke noen tilgjengelig krav"
 msgid "Against"
 msgstr "Mot"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Tillate"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Tillat migrering av LP-pollett"
@@ -204,6 +208,10 @@ msgstr "Tillat høyprispåvirkede handel og hopp over bekreftelsesskjermen. Bruk
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Tillat Uniswap-protokollen å bruke din {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Tillat {0} først"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Tillatt"
@@ -450,8 +458,8 @@ msgstr "Samle"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Samle som WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Samle som {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Detaljert"
 msgid "Details"
 msgstr "Detaljer"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Støtt den ukrainske regjeringen direkte ved å donere tokens."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Frakoble"
@@ -696,6 +708,10 @@ msgstr "Avvis"
 msgid "Docs"
 msgstr "Dokumenter"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Doner til Ukraina"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Ser du ikke en av dine v2-posisjoner? <0>Importer den.</0>"
@@ -885,10 +901,15 @@ msgstr "Skjul avsluttede posisjoner"
 msgid "High Price Impact"
 msgstr "Høy pris konsekvens"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Høy prispåvirkning"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Høy utglidning"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Høy glidning øker risikoen for prisbevegelser"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Ingen forslag funnet."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Ingen resultater."
 
@@ -1288,10 +1310,6 @@ msgstr "Optimistisk Etherscan"
 msgid "Out of range"
 msgstr "Utenfor rekkevidde"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "Utgang er estimert."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "Utdata er estimert. Hvis prisen endrer seg med mer enn {0} % vil transak
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "Utgangen er estimert. Du vil motta minst <0>{0} {1}</0> eller transaksjonen vil tilbakestilles."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "Utgang er estimert. Du vil motta minst {0} {1} eller transaksjonen går tilbake."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "Utgang er estimert. Du sender maksimalt {0} {1} eller transaksjonen går tilbake."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "Utgangen vil bli sendt til <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "Du vil også samle inn gebyrer tjent fra denne posisjonen."
 msgid "You will receive"
 msgstr "Du vil motta"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Du vil motta minst {0} {1} eller transaksjonen går tilbake."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Du sender maksimalt {0} {1} eller transaksjonen går tilbake."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Din V2-likviditet"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/pl-PL.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: pl_PL\n"
 "Language-Team: Polish\n"
@@ -192,6 +192,10 @@ msgstr "Adres nie posiada dostępnych włości"
 msgid "Against"
 msgstr "Przeciwko"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Dopuszczać"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Zezwalaj na migrację tokenu LP"
@@ -204,6 +208,10 @@ msgstr "Pozwól na transakcje o wysokim wpływie cenowym i pominąć ekran potwi
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Zezwól protokołowi Uniswap na używanie {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Zezwól najpierw na {0}"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Dozwolone"
@@ -450,8 +458,8 @@ msgstr "Zbierz"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Zbierz jako WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Zbierz jako {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Szczegółowy"
 msgid "Details"
 msgstr "Szczegóły"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Bezpośrednio wesprzyj ukraiński rząd przekazując tokeny."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Rozłącz"
@@ -696,6 +708,10 @@ msgstr "Odrzuć"
 msgid "Docs"
 msgstr "Dokumentacja"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Wpłać na Ukrainę"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Nie widzisz jednej z pozycji v2? <0>Importuj ją.</0>"
@@ -885,10 +901,15 @@ msgstr "Ukryj zamknięte pozycje"
 msgid "High Price Impact"
 msgstr "Wpływ Wysokiej Ceny"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Wysoki wpływ na cenę"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Wysoki poślizg"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Wysoki poślizg zwiększa ryzyko zmiany ceny"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Nie znaleziono propozycji."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Nie znaleziono wyników."
 
@@ -1288,10 +1310,6 @@ msgstr "Optymistyczny Etherscan"
 msgid "Out of range"
 msgstr "Poza zasięgiem"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "Produkcja jest szacowana."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "Wyjście jest szacowane. Jeśli cena zmieni się o ponad {0}%, Twoja tra
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "Wartość wyjściowa jest szacowana. Otrzymasz co najmniej <0>{0} {1}</0> lub transakcja zostanie przywrócona."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "Produkcja jest szacowana. Otrzymasz co najmniej {0} {1} lub transakcja zostanie cofnięta."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "Produkcja jest szacowana. Wyślesz maksymalnie {0} {1} lub transakcja zostanie cofnięta."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "Wyjście zostanie wysłane do <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "Będziesz również pobierać opłaty zarobione na tej pozycji."
 msgid "You will receive"
 msgstr "Otrzymasz"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Otrzymasz co najmniej {0} {1} lub transakcja zostanie cofnięta."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Wyślesz maksymalnie {0} {1} lub transakcja zostanie cofnięta."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Twoja płynność V2"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/pt-BR.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: pt_BR\n"
 "Language-Team: Portuguese, Brazilian\n"
@@ -192,6 +192,10 @@ msgstr "O endereço tem não resgates disponíveis"
 msgid "Against"
 msgstr "Contra"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Permitir"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Permitir a migração de tokens LP"
@@ -204,6 +208,10 @@ msgstr "Permitir negociações de preço de alto impacto e ignorar a tela de con
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Permitir que o Protocolo Uniswap utilize seu {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Permitir {0} primeiro"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Permitido"
@@ -450,8 +458,8 @@ msgstr "Coletar"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Coletar como WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Coletar como {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Detalhado"
 msgid "Details"
 msgstr "Detalhes"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Apoie diretamente o governo ucraniano doando tokens."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Desconectar"
@@ -696,6 +708,10 @@ msgstr "Dispensar"
 msgid "Docs"
 msgstr "Docs"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Doe para a Ucrânia"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Não está vendo uma de suas posições V2? <0>Importe-a.</0>"
@@ -885,10 +901,15 @@ msgstr "Ocultar posições fechadas"
 msgid "High Price Impact"
 msgstr "Impacto de preços altos"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Impacto de preço alto"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Deslizamento alto"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Alta derrapagem aumenta o risco de movimento de preços"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Nenhuma proposta encontrada."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Nenhum resultado encontrado."
 
@@ -1288,10 +1310,6 @@ msgstr "Etherscan otimista"
 msgid "Out of range"
 msgstr "Fora da faixa"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "A saída é estimada."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "Os resultados são estimativas. Se o preço for alterado em de {0}%, sua
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "Os resultados são estimativas. Você receberá pelo menos <0>{0} {1}</0> ou a operação será revertida."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "A saída é estimada. Você receberá pelo menos {0} {1} ou a transação será revertida."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "A saída é estimada. Você enviará no máximo {0} {1} ou a transação será revertida."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "O resultado será enviado para <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "Você também receberá as taxas auferidas nessa posição."
 msgid "You will receive"
 msgstr "Você receberá"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Você receberá pelo menos {0} {1} ou a transação será revertida."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Você enviará no máximo {0} {1} ou a transação será revertida."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Sua liquidez V2"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/pt-PT.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: pt_PT\n"
 "Language-Team: Portuguese\n"
@@ -192,6 +192,10 @@ msgstr "O endereço não tem reivindicação disponível"
 msgid "Against"
 msgstr "Contra"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Permitir"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Permitir migração de token LP"
@@ -204,6 +208,10 @@ msgstr "Permitir negociações de alto impacto nos preços e ignorar o ecrã de
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Permitir que o Protocolo Uniswap use o seu {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Permitir {0} primeiro"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Permitido"
@@ -450,8 +458,8 @@ msgstr "Recolher"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Recolher como WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Coletar como {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Detalhada"
 msgid "Details"
 msgstr "Detalhes"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Apoie diretamente o governo ucraniano doando tokens."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Desligar"
@@ -696,6 +708,10 @@ msgstr "Descartar"
 msgid "Docs"
 msgstr "Documentação"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Doe para a Ucrânia"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Não vê uma das suas posições v2? <0>Importar.</0>"
@@ -885,10 +901,15 @@ msgstr "Ocultar posições fechadas"
 msgid "High Price Impact"
 msgstr "Impacto de preço elevado"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Impacto de preço alto"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Deslizamento alto"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Alta derrapagem aumenta o risco de movimento de preços"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Nenhuma proposta encontrada."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Nenhum resultado encontrado."
 
@@ -1288,10 +1310,6 @@ msgstr "Etherscan otimista"
 msgid "Out of range"
 msgstr "Fora do intervalo"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "A saída é estimada."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "A saída é estimada. Se o preço mudar em mais de {0}% a sua transaçã
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "A saída é estimada. Irá receber pelo menos <0>{0} {1}</0> ou a transação será revertida."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "A saída é estimada. Você receberá pelo menos {0} {1} ou a transação será revertida."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "A saída é estimada. Você enviará no máximo {0} {1} ou a transação será revertida."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "A saída será enviada para <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "Também irá cobrar comissões obtidas nesta posição."
 msgid "You will receive"
 msgstr "Irá receber"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Você receberá pelo menos {0} {1} ou a transação será revertida."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Você enviará no máximo {0} {1} ou a transação será revertida."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "A sua liquidez V2"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/ro-RO.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: ro_RO\n"
 "Language-Team: Romanian\n"
@@ -192,6 +192,10 @@ msgstr "Adresa nu are nici o cerere disponibilă"
 msgid "Against"
 msgstr "Împotrivă"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Permite"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Permite migrarea token-ului LP"
@@ -204,6 +208,10 @@ msgstr "Permite tranzacțiile cu impact asupra prețurilor mari și sari peste e
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Permite Protocolului Uniswap să îți utilizeze {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Permiteți mai întâi {0}"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Permis"
@@ -450,8 +458,8 @@ msgstr "Colectează"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Colectează ca WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Colectați ca {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Detaliat"
 msgid "Details"
 msgstr "Detalii"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Sprijiniți direct guvernul ucrainean donând jetoane."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Deconectare"
@@ -696,6 +708,10 @@ msgstr "Respinge"
 msgid "Docs"
 msgstr "Documente"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Donează Ucrainei"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Nu vezi una dintre pozițiile tale v2? <0>Import-o.</0>"
@@ -885,10 +901,15 @@ msgstr "Ascunde pozițiile închise"
 msgid "High Price Impact"
 msgstr "Impact Preț Ridicat"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Impact ridicat asupra prețului"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Alunecare mare"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Alunecarea mare crește riscul de mișcare a prețurilor"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Nicio propunere găsită."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Nici un rezultat găsit."
 
@@ -1288,10 +1310,6 @@ msgstr "Etherscan optimist"
 msgid "Out of range"
 msgstr "Prea departe"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "Ieșirea este estimată."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "Ieșirea este estimată. Dacă prețul se schimbă cu mai mult de {0}% t
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "Ieșirea este estimată. Vei primi cel puțin <0>{0} {1}</0> sau tranzacția va reveni."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "Ieșirea este estimată. Veți primi cel puțin {0} {1} sau tranzacția va reveni."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "Ieșirea este estimată. Veți trimite cel mult {0} {1} sau tranzacția va reveni."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "Ieșirea va fi trimisă la <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "De asemenea, vei colecta taxele câștigate din această poziție."
 msgid "You will receive"
 msgstr "Vei primi"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Veți primi cel puțin {0} {1} sau tranzacția va reveni."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Veți trimite cel mult {0} {1} sau tranzacția va reveni."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Lichiditatea ta V2"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/ru-RU.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: ru_RU\n"
 "Language-Team: Russian\n"
@@ -192,6 +192,10 @@ msgstr "У адреса нет прав требования"
 msgid "Against"
 msgstr "Против"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Одобрить"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Разрешить перенос LP-токенов"
@@ -204,6 +208,10 @@ msgstr "Разрешить сделки с высоким влиянием на
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Разрешить протоколу Uniswap использовать ваши {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Сначала одобрите {0}"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Разрешено"
@@ -218,7 +226,7 @@ msgstr "Произошла ошибка при попытке произвест
 
 #: src/lib/components/Swap/SwapButton.tsx
 msgid "Approval pending"
-msgstr "Ожидается подтверждение"
+msgstr "Одобрение подтверждается"
 
 #: src/components/earn/StakingModal.tsx
 #: src/lib/components/Swap/SwapButton.tsx
@@ -450,8 +458,8 @@ msgstr "Получить"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Получить как WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Получить в виде {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Подробно"
 msgid "Details"
 msgstr "Подробности"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Поддержите правительство Украины напрямую, пожертвовав токены."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Отключить"
@@ -696,6 +708,10 @@ msgstr "Закрыть"
 msgid "Docs"
 msgstr "Документация"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Пожертвуйте Украине"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Не видите какую-то из ваших позиций в V2? <0>Импортируйте её.</0>"
@@ -885,10 +901,15 @@ msgstr "Скрыть закрытые позиции"
 msgid "High Price Impact"
 msgstr "Высокое влияние на цену"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Высокое влияние на цену"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Высокое проскальзывание"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Высокое проскальзывание увеличивает риск изменения цены"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Предложений не найдено."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Ничего не найдено."
 
@@ -1288,10 +1310,6 @@ msgstr "Etherscan для Optimism"
 msgid "Out of range"
 msgstr "Вне диапазона"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "Сумма к получению — оценочная."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "Сумма к получению — оценочная. Если цен
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "Сумма к получению — оценочная. Вы получите как минимум <0>{0} {1}</0>, или транзакция откатится."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "Сумма к получению — оценочная. Вы получите как минимум {0} {1}, или транзакция откатится."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "Сумма к продаже — оценочная. Вы продадите максимум {0} {1}, или транзакция откатится."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "Сумма к получению будет отправлена на <0>{0}</0>"
@@ -1710,7 +1736,7 @@ msgstr "Всё равно обменять"
 
 #: src/lib/components/Swap/Status/StatusDialog.tsx
 msgid "Swap confirmed"
-msgstr "Обмен подтвержден"
+msgstr "Обмен подтверждён"
 
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "Swap details"
@@ -2071,7 +2097,7 @@ msgstr "Развернуть <0/> в {0}"
 
 #: src/lib/components/Swap/Status/StatusDialog.tsx
 msgid "Unwrap confirmed"
-msgstr "Развернуть подтверждено"
+msgstr "Разворачивание подтверждено"
 
 #: src/lib/components/Swap/Toolbar/Caption.tsx
 msgid "Unwrap native currency."
@@ -2079,11 +2105,11 @@ msgstr "Развернуть нативную валюту."
 
 #: src/lib/components/Swap/Status/StatusDialog.tsx
 msgid "Unwrap pending"
-msgstr "Развернуть в ожидании"
+msgstr "Разворачивание подтверждается"
 
 #: src/lib/components/Swap/Toolbar/Caption.tsx
 msgid "Unwrapping native currency."
-msgstr "Распаковка нативной валюты."
+msgstr "Разворачивание нативной валюты."
 
 #: src/pages/Vote/Landing.tsx
 msgid "Update Delegation"
@@ -2264,19 +2290,19 @@ msgstr "Завернуть <0/> в {0}"
 
 #: src/lib/components/Swap/Status/StatusDialog.tsx
 msgid "Wrap confirmed"
-msgstr "Обертывание подтверждено"
+msgstr "Обёртывание подтверждено"
 
 #: src/lib/components/Swap/Toolbar/Caption.tsx
 msgid "Wrap native currency."
-msgstr "Оберните нативную валюту."
+msgstr "Обернуть нативную валюту."
 
 #: src/lib/components/Swap/Status/StatusDialog.tsx
 msgid "Wrap pending"
-msgstr "Ожидание переноса"
+msgstr "Обёртывание подтверждается"
 
 #: src/lib/components/Swap/Toolbar/Caption.tsx
 msgid "Wrapping native currency."
-msgstr "Накрутка нативной валюты."
+msgstr "Обёртывание нативной валюты."
 
 #: src/components/WalletModal/index.tsx
 #: src/components/Web3Status/index.tsx
@@ -2352,14 +2378,6 @@ msgstr "Вы также будете получать комиссию, зара
 msgid "You will receive"
 msgstr "Вы получите"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Вы получите как минимум {0} {1}, иначе транзакция откатится."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Вы отправите не более {0} {1}, иначе транзакция откатится."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Ваша ликвидность в V2"
@@ -2495,11 +2513,11 @@ msgstr "из списка токенов {0}"
 
 #: src/lib/components/Swap/RoutingDiagram/index.tsx
 msgid "{0, plural, =1 {Best route via 1 hop} other {Best route via # hops}}"
-msgstr "{0, plural, =1 {Лучший маршрут через 1 прыжок} other {Лучший маршрут через #hops}}"
+msgstr "{0, plural, =1 {Лучший маршрут — 1 прыжок} few {Лучший маршрут — # прыжка} many {Лучший маршрут — # прыжков} other {Лучший маршрут — # прыжок}}"
 
 #: src/components/SearchModal/ImportToken.tsx
 msgid "{0, plural, =1 {Import token} other {Import tokens}}"
-msgstr "{0, plural, =1 {Импортный токен} other {Импортируйте токены}}"
+msgstr "{0, plural, =1 {Импортировать токен} other {Импортировать токены}}"
 
 #: src/components/RateToggle/index.tsx
 #: src/components/RateToggle/index.tsx
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 
@@ -2616,7 +2632,7 @@ msgstr "Уровень комиссии {0}%"
 
 #: src/components/RoutingDiagram/RoutingDiagram.tsx
 msgid "{0}% pool"
-msgstr "Пул с {0}%"
+msgstr "Пул {0}%"
 
 #: src/components/FeeSelector/FeeTierPercentageBadge.tsx
 msgid "{0}% select"

src/locales/sl-SI.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-15 09:06\n"
 "Last-Translator: \n"
 "Language: sl_SI\n"
 "Language-Team: Slovenian\n"
@@ -192,6 +192,10 @@ msgstr "Ta naslov nima terjatve"
 msgid "Against"
 msgstr "Proti"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Dovoli"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Dovoli migracijo likvidnostnih (LP) žetonov"
@@ -204,6 +208,10 @@ msgstr "Dovolite trgovanje z visokim vplivom na ceno in preskočite zaslon za po
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Dovoli protokolu Uniswap, da uporabi vaše {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Najprej dovoli {0}"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Dovoljeno"
@@ -450,8 +458,8 @@ msgstr "Prevzemi"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Prevzemi kot WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Zberi kot {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Podrobnosti"
 msgid "Details"
 msgstr "Podrobnosti"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Neposredno podprite ukrajinsko vlado z donacijo žetonov."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Prekini povezavo"
@@ -696,6 +708,10 @@ msgstr "Opusti"
 msgid "Docs"
 msgstr "Dokumentacija"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Donirajte Ukrajini"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Ne vidite katerega od svojih pologov V2? <0>Uvozite ga.</0>"
@@ -801,7 +817,7 @@ msgstr "Razširjeni rezultati z onemogočenih seznamov žetonov"
 
 #: src/components/swap/AdvancedSwapDetails.tsx
 msgid "Expected Output"
-msgstr "Pričakovani rezultat"
+msgstr "Pričakovani izhodni znesek"
 
 #: src/components/Settings/index.tsx
 msgid "Expert Mode"
@@ -885,10 +901,15 @@ msgstr "Skrij zaprte pozicije"
 msgid "High Price Impact"
 msgstr "Visok vpliv na ceno"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Visok vpliv na ceno"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Visok zdrs"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Visok zdrs povečuje tveganje spremembe cene"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Ni predlogov."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Ni rezultatov."
 
@@ -1288,10 +1310,6 @@ msgstr "Optimistic Etherscan"
 msgid "Out of range"
 msgstr "Zunaj razpona"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "Končni znesek je ocenjen."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1299,11 +1317,19 @@ msgstr "Izhodni znesek je ocenjen. Če se cena spremeni za več kot {0} %, bo tr
 
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
-msgstr "Rezultat je ocenjen. Prejeli boste vsaj <0>{0} {1}</0> ali pa bo transakcija stornirana."
+msgstr "Izhodni znesek je ocenjen. Prejeli boste vsaj <0>{0} {1}</0> ali pa bo transakcija stornirana."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "Izhodni znesek je ocenjen. Prejeli boste vsaj {0} {1} ali pa bo transakcija stornirana."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "Izhodni znesek je ocenjen. Poslali boste največ {0} {1} ali pa bo transakcija stornirana."
 
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
-msgstr "Izhod bo poslan na <0>{0}</0>"
+msgstr "Izhodni znesek bo poslan na <0>{0}</0>"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Owner"
@@ -1710,7 +1736,7 @@ msgstr "Vseeno zamenjaj"
 
 #: src/lib/components/Swap/Status/StatusDialog.tsx
 msgid "Swap confirmed"
-msgstr "Zamenjava potrjena"
+msgstr "Menjava potrjena"
 
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "Swap details"
@@ -1727,7 +1753,7 @@ msgstr "Menjava je spodletela: {0}"
 
 #: src/lib/components/Swap/Status/StatusDialog.tsx
 msgid "Swap pending"
-msgstr "Zamenjava v teku"
+msgstr "Menjava v teku"
 
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "Swap summary"
@@ -1783,7 +1809,7 @@ msgstr "Strošek pošiljanja te transakcije presega polovico vrednosti vhodnega
 
 #: src/components/Header/Polling.tsx
 msgid "The current fast gas amount for sending a transaction on L1. Gas fees are paid in Ethereum's native currency Ether (ETH) and denominated in GWEI."
-msgstr "Trenutna količina plina za hitro pošiljanje transakcije na L1. Provizije za plin se plačajo v valuti ether (ETH), domači valuti omrežja Ethereum, in so denominirane v enoti Gwei."
+msgstr "Trenutna količina plina za hitro pošiljanje transakcije na L1. Provizije za plin se plačajo v valuti ether (ETH), avtohtoni valuti omrežja Ethereum, in so denominirane v enoti Gwei."
 
 #: src/components/CurrencyInputPanel/FiatValue.tsx
 msgid "The estimated difference between the USD values of input and output amounts."
@@ -2071,19 +2097,19 @@ msgstr "Odvijte <0/> v {0}"
 
 #: src/lib/components/Swap/Status/StatusDialog.tsx
 msgid "Unwrap confirmed"
-msgstr "Razvijanje potrjeno"
+msgstr "Odvijanje potrjeno"
 
 #: src/lib/components/Swap/Toolbar/Caption.tsx
 msgid "Unwrap native currency."
-msgstr "Odvijte domačo valuto."
+msgstr "Odvijanje avtohtone valute."
 
 #: src/lib/components/Swap/Status/StatusDialog.tsx
 msgid "Unwrap pending"
-msgstr "Razvijanje čaka"
+msgstr "Odvijanje v teku"
 
 #: src/lib/components/Swap/Toolbar/Caption.tsx
 msgid "Unwrapping native currency."
-msgstr "Razvijanje domače valute."
+msgstr "Odvijanje avtohtone valute."
 
 #: src/pages/Vote/Landing.tsx
 msgid "Update Delegation"
@@ -2264,7 +2290,7 @@ msgstr "Ovijte <0/> v {0}"
 
 #: src/lib/components/Swap/Status/StatusDialog.tsx
 msgid "Wrap confirmed"
-msgstr "Zavijanje potrjeno"
+msgstr "Ovijanje potrjeno"
 
 #: src/lib/components/Swap/Toolbar/Caption.tsx
 msgid "Wrap native currency."
@@ -2272,11 +2298,11 @@ msgstr "Zavijte domačo valuto."
 
 #: src/lib/components/Swap/Status/StatusDialog.tsx
 msgid "Wrap pending"
-msgstr "Zavijanje čaka"
+msgstr "Ovijanje v teku"
 
 #: src/lib/components/Swap/Toolbar/Caption.tsx
 msgid "Wrapping native currency."
-msgstr "Zavijanje domače valute."
+msgstr "Ovijanje avtohtone valute."
 
 #: src/components/WalletModal/index.tsx
 #: src/components/Web3Status/index.tsx
@@ -2352,14 +2378,6 @@ msgstr "Ta pozicija vam bo tudi služila provizije."
 msgid "You will receive"
 msgstr "Prejeli boste"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Prejeli boste vsaj {0} {1} ali pa bo transakcija stornirana."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Poslali boste največ {0} {1} ali pa bo transakcija stornirana."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Vaša likvidnost V2"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/sr-SP.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: sr_SP\n"
 "Language-Team: Serbian (Cyrillic)\n"
@@ -192,6 +192,10 @@ msgstr "Адреса нема доступних потраживања"
 msgid "Against"
 msgstr "Против"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Дозволи"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Дозволи миграцију ЛП токена"
@@ -204,6 +208,10 @@ msgstr "Омогућите трговање утицајем високе цен
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Дозволите Uniswap протоколу да користи вашу {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Прво дозволи {0}"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Дозвољен"
@@ -450,8 +458,8 @@ msgstr "Сакупи"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Сакупи као WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Сакупи као {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Детаљно"
 msgid "Details"
 msgstr "Детаљи"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Директно подржите украјинску владу донирањем токена."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Прекини везу"
@@ -696,6 +708,10 @@ msgstr "Одбаци"
 msgid "Docs"
 msgstr "Документи"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Донирајте Украјини"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Не видите ниједну од ваших V2 позиција? <0> Увезите их.</0>"
@@ -885,10 +901,15 @@ msgstr "Сакриј затворене позиције"
 msgid "High Price Impact"
 msgstr "Утицај високе цене"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Висок утицај на цену"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Високо клизање"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Високо клизање повећава ризик од кретања цена"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Није пронађен ниједан предлог."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Нема резултата."
 
@@ -1288,10 +1310,6 @@ msgstr "Оптимистични Етхерсцан"
 msgid "Out of range"
 msgstr "Ван опсега"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "Излаз је процењен."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "Излаз се процењује. Ако се цена промени
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "Излаз се процењује. Добићете најмање <0>{0} {1}</0> или ће се трансакција вратити."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "Излаз је процењен. Добићете најмање {0} {1} или ће се трансакција вратити."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "Излаз је процењен. Послаћете највише {0} {1} или ће се трансакција вратити."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "Излаз ће бити послат на <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "Такође ћете прикупљати накнаде зарађен
 msgid "You will receive"
 msgstr "Добићете"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Добићете најмање {0} {1} или ће се трансакција вратити."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Послаћете највише {0} {1} или ће се трансакција вратити."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Ваша V2 ликвидност"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/sv-SE.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: sv_SE\n"
 "Language-Team: Swedish\n"
@@ -192,6 +192,10 @@ msgstr "Adressen har inget tillgängligt krav"
 msgid "Against"
 msgstr "Mot"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Tillåta"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Tillåt migrering av LP-token"
@@ -204,6 +208,10 @@ msgstr "Tillåt transaktioner med hög prispåverkan och hoppa över bekräftels
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Tillåt Uniswap-protokollet att använda din {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Tillåt {0} först"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Tillåten"
@@ -450,8 +458,8 @@ msgstr "Samla"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Samla som WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Samla som {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Detaljerad"
 msgid "Details"
 msgstr "Information"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Stöd direkt den ukrainska regeringen genom att donera tokens."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Koppla från"
@@ -696,6 +708,10 @@ msgstr "Avfärda"
 msgid "Docs"
 msgstr "Dokument"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Donera till Ukraina"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Ser du inte en av dina v2-positioner? <0>Importera den.</0>"
@@ -885,10 +901,15 @@ msgstr "Dölj stängda positioner"
 msgid "High Price Impact"
 msgstr "Hög prispåverkan"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Hög prispåverkan"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Hög glidning"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Hög glidning ökar risken för prisrörelser"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Inga förslag hittades."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Inga resultat hittades."
 
@@ -1288,10 +1310,6 @@ msgstr "Optimistisk Etherscan"
 msgid "Out of range"
 msgstr "Utanför intervallet"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "Utgången är uppskattad."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "Beräknad utdata. Om priset ändras med mer än {0} procent återställs
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "Utmatningen är uppskattad. Du kommer att få minst <0>{0} {1}</0> annars kommer transaktionen att återställas."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "Utgången är uppskattad. Du kommer att få minst {0} {1} eller så återgår transaktionen."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "Utgången är uppskattad. Du skickar högst {0} {1} annars återgår transaktionen."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "Utmatningen kommer att skickas till <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "Du kommer också att samla in avgifter som tjänats in från den här po
 msgid "You will receive"
 msgstr "Du kommer att få"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Du kommer att få minst {0} {1} eller så återgår transaktionen."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Du skickar högst {0} {1} annars återgår transaktionen."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Din V2-likviditet"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"
 

src/locales/sw-TZ.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: uniswap-interface\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2022-03-02 19:11\n"
+"PO-Revision-Date: 2022-03-14 20:11\n"
 "Last-Translator: \n"
 "Language: sw_TZ\n"
 "Language-Team: Swahili, Tanzania\n"
@@ -192,6 +192,10 @@ msgstr "Anwani haina dai linalopatikana"
 msgid "Against"
 msgstr "Kupinga"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow"
+msgstr "Ruhusu"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allow LP token migration"
 msgstr "Ruhusu uhamiaji wa ishara za LP"
@@ -204,6 +208,10 @@ msgstr "Ruhusu biashara ya athari za bei ya juu na uruke skrini ya thibitisho. T
 msgid "Allow the Uniswap Protocol to use your {0}"
 msgstr "Ruhusu Itifaki ya Uniswap kutumia {0}"
 
+#: src/lib/components/Swap/SwapButton.tsx
+msgid "Allow {0} first"
+msgstr "Ruhusu {0} kwanza"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "Allowed"
 msgstr "Ruhusu"
@@ -450,8 +458,8 @@ msgstr "Kusanya"
 
 #: src/pages/Pool/PositionPage.tsx
 #: src/pages/RemoveLiquidity/V3.tsx
-msgid "Collect as WETH"
-msgstr "Kusanya kama WETH"
+msgid "Collect as {nativeWrappedSymbol}"
+msgstr "Kusanya kama {nativeWrappedSymbol}"
 
 #: src/pages/Pool/PositionPage.tsx
 msgid "Collect fees"
@@ -679,6 +687,10 @@ msgstr "Kina kina"
 msgid "Details"
 msgstr "Maelezo"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Directly support the Ukrainian government by donating tokens."
+msgstr "Uunge mkono moja kwa moja serikali ya Kiukreni kwa kutoa tokeni."
+
 #: src/components/AccountDetails/index.tsx
 msgid "Disconnect"
 msgstr "Tenganisha"
@@ -696,6 +708,10 @@ msgstr "Ondoa"
 msgid "Docs"
 msgstr "Hati"
 
+#: src/components/Popups/DonationLink.tsx
+msgid "Donate to Ukraine"
+msgstr "Changia kwa Ukraine"
+
 #: src/pages/MigrateV2/index.tsx
 msgid "Don’t see one of your v2 positions? <0>Import it.</0>"
 msgstr "Je! Huoni moja ya nafasi zako za v2? <0> Ingiza.</0>"
@@ -885,10 +901,15 @@ msgstr "Ficha nafasi zilizofungwa"
 msgid "High Price Impact"
 msgstr "Athari ya Bei ya Juu"
 
+#: src/lib/components/Swap/Summary/index.tsx
 #: src/lib/components/Swap/Summary/index.tsx
 msgid "High price impact"
 msgstr "Athari ya bei ya juu"
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "High slippage"
+msgstr "Utelezi wa hali ya juu"
+
 #: src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
 msgid "High slippage increases the risk of price movement"
 msgstr "Utelezi wa juu huongeza hatari ya harakati za bei"
@@ -1231,6 +1252,7 @@ msgid "No proposals found."
 msgstr "Hakuna mapendekezo yaliyopatikana."
 
 #: src/components/SearchModal/CurrencySearch.tsx
+#: src/lib/components/TokenSelect/index.tsx
 msgid "No results found."
 msgstr "Hakuna matokeo yaliyopatikana."
 
@@ -1288,10 +1310,6 @@ msgstr "Matarajio ya Etherscan"
 msgid "Out of range"
 msgstr "Kati ya masafa"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "Output is estimated."
-msgstr "Pato linakadiriwa."
-
 #: src/pages/AddLiquidityV2/index.tsx
 #: src/pages/RemoveLiquidity/index.tsx
 msgid "Output is estimated. If the price changes by more than {0}% your transaction will revert."
@@ -1301,6 +1319,14 @@ msgstr "Pato inakadiriwa. Ikiwa bei itabadilika kwa zaidi ya {0}% shughuli yako
 msgid "Output is estimated. You will receive at least <0>{0} {1}</0> or the transaction will revert."
 msgstr "Pato inakadiriwa. Utapokea angalau <0>{0} {1}</0> au shughuli itarejea."
 
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will receive at least {0} {1} or the transaction will revert."
+msgstr "Pato linakadiriwa. Utapokea angalau {0} {1} au muamala utarejeshwa."
+
+#: src/lib/components/Swap/Summary/index.tsx
+msgid "Output is estimated. You will send at most {0} {1} or the transaction will revert."
+msgstr "Pato linakadiriwa. Utatuma angalau {0} {1} au muamala utarejeshwa."
+
 #: src/components/swap/SwapModalHeader.tsx
 msgid "Output will be sent to <0>{0}</0>"
 msgstr "Pato litatumwa kwa <0>{0}</0>"
@@ -2352,14 +2378,6 @@ msgstr "Pia utakusanya ada inayopatikana kutoka kwa nafasi hii."
 msgid "You will receive"
 msgstr "Utapokea"
 
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will receive at least {0} {1} or the transaction will revert."
-msgstr "Utapokea angalau {0} {1} au muamala utarejeshwa."
-
-#: src/lib/components/Swap/Summary/index.tsx
-msgid "You will send at most {0} {1} or the transaction will revert."
-msgstr "Utatuma angalau {0} {1} au muamala utarejeshwa."
-
 #: src/pages/Pool/v2.tsx
 msgid "Your V2 liquidity"
 msgstr "Ukiritimba wako wa V2"
@@ -2507,8 +2525,6 @@ msgid "{0}"
 msgstr "{0}"
 
 #: src/components/PositionCard/index.tsx
-#: src/pages/Vote/VotePage.tsx
-#: src/pages/Vote/VotePage.tsx
 msgid "{0} %"
 msgstr "{0} %"