fix: replace `t` with `<Trans>` where possible (#2516)

* replace t macro with <Trans>

* replace t macro with <Trans>

* add lint rule for t

* fixed more ts

.eslintrc.json

@@ -48,6 +48,11 @@
           {
             "name": "styled-components",
             "message": "Please import from styled-components/macro."
+          },
+          {
+            "name": "@lingui/macro",
+            "importNames": ["t"],
+            "message": "Please use <Trans> instead of t"
           }
         ],
         "patterns": [

src/components/AddressInputPanel/index.tsx

+// eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
 import { ReactNode, useCallback, useContext } from 'react'
 import styled, { ThemeContext } from 'styled-components/macro'

src/components/Menu/index.tsx

+// eslint-disable-next-line no-restricted-imports
 import { t } from '@lingui/macro'
 import { Trans } from '@lingui/macro'
 import { CHAIN_INFO, L2_CHAIN_IDS, SupportedChainId } from 'constants/chains'

src/components/SearchModal/CurrencySearch.tsx

+// eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
 import { Currency, Token } from '@uniswap/sdk-core'
 import useDebounce from 'hooks/useDebounce'

src/components/SearchModal/ManageLists.tsx

+// eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
 import { TokenList } from '@uniswap/token-lists'
 import Card from 'components/Card'

src/components/Settings/index.tsx

+// eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
 import { SupportedChainId } from 'constants/chains'

src/components/TransactionSettings/index.tsx

-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
 import { L2_CHAIN_IDS } from 'constants/chains'
 import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
@@ -233,7 +233,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
               <Trans>Transaction deadline</Trans>
             </TYPE.black>
             <QuestionHelper
-              text={t`Your transaction will revert if it is pending for more than this period of time.`}
+              text={<Trans>Your transaction will revert if it is pending for more than this period of time.</Trans>}
             />
           </RowFixed>
           <RowFixed>

src/components/Web3Status/index.tsx

+// eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
 import { AbstractConnector } from '@web3-react/abstract-connector'
 import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'

src/components/earn/ClaimRewardModal.tsx

 import { TransactionResponse } from '@ethersproject/providers'
-import { t, Trans } from '@lingui/macro'
-import { useState } from 'react'
+import { Trans } from '@lingui/macro'
+import { ReactNode, useState } from 'react'
 import styled from 'styled-components/macro'
 
 import { useStakingContract } from '../../hooks/useContract'
@@ -61,12 +61,12 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta
     }
   }
 
-  let error: string | undefined
+  let error: ReactNode | undefined
   if (!account) {
-    error = t`Connect Wallet`
+    error = <Trans>Connect Wallet</Trans>
   }
   if (!stakingInfo?.stakedAmount) {
-    error = error ?? t`Enter an amount`
+    error = error ?? <Trans>Enter an amount</Trans>
   }
 
   return (

src/components/earn/UnstakingModal.tsx

 import { TransactionResponse } from '@ethersproject/providers'
-import { t, Trans } from '@lingui/macro'
-import { useState } from 'react'
+import { Trans } from '@lingui/macro'
+import { ReactNode, useState } from 'react'
 import styled from 'styled-components/macro'
 
 import { useStakingContract } from '../../hooks/useContract'
@@ -63,12 +63,12 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
     }
   }
 
-  let error: string | undefined
+  let error: ReactNode | undefined
   if (!account) {
-    error = t`Connect a wallet`
+    error = <Trans>Connect a wallet</Trans>
   }
   if (!stakingInfo?.stakedAmount) {
-    error = error ?? t`Enter an amount`
+    error = error ?? <Trans>Enter an amount</Trans>
   }
 
   return (

src/hooks/useSwapCallback.ts → src/hooks/useSwapCallback.tsx

 import { BigNumber } from '@ethersproject/bignumber'
-import { t } from '@lingui/macro'
+// eslint-disable-next-line no-restricted-imports
+import { t, Trans } from '@lingui/macro'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { Router, Trade as V2Trade } from '@uniswap/v2-sdk'
 import { SwapRouter, Trade as V3Trade } from '@uniswap/v3-sdk'
-import { useMemo } from 'react'
+import { ReactNode, useMemo } from 'react'
 
 import { SWAP_ROUTER_ADDRESSES } from '../constants/addresses'
 import { TransactionType } from '../state/transactions/actions'
@@ -191,7 +192,7 @@ function useSwapCallArguments(
  * This object seems to be undocumented by ethers.
  * @param error an error from the ethers provider
  */
-function swapErrorToUserReadableMessage(error: any): string {
+function swapErrorToUserReadableMessage(error: any): ReactNode {
   let reason: string | undefined
   while (Boolean(error)) {
     reason = error.reason ?? error.message ?? reason
@@ -202,30 +203,64 @@ function swapErrorToUserReadableMessage(error: any): string {
 
   switch (reason) {
     case 'UniswapV2Router: EXPIRED':
-      return t`The transaction could not be sent because the deadline has passed. Please check that your transaction deadline is not too low.`
+      return (
+        <Trans>
+          The transaction could not be sent because the deadline has passed. Please check that your transaction deadline
+          is not too low.
+        </Trans>
+      )
     case 'UniswapV2Router: INSUFFICIENT_OUTPUT_AMOUNT':
     case 'UniswapV2Router: EXCESSIVE_INPUT_AMOUNT':
-      return t`This transaction will not succeed either due to price movement or fee on transfer. Try increasing your slippage tolerance.`
+      return (
+        <Trans>
+          This transaction will not succeed either due to price movement or fee on transfer. Try increasing your
+          slippage tolerance.
+        </Trans>
+      )
     case 'TransferHelper: TRANSFER_FROM_FAILED':
-      return t`The input token cannot be transferred. There may be an issue with the input token.`
+      return <Trans>The input token cannot be transferred. There may be an issue with the input token.</Trans>
     case 'UniswapV2: TRANSFER_FAILED':
-      return t`The output token cannot be transferred. There may be an issue with the output token.`
+      return <Trans>The output token cannot be transferred. There may be an issue with the output token.</Trans>
     case 'UniswapV2: K':
-      return t`The Uniswap invariant x*y=k was not satisfied by the swap. This usually means one of the tokens you are swapping incorporates custom behavior on transfer.`
+      return (
+        <Trans>
+          The Uniswap invariant x*y=k was not satisfied by the swap. This usually means one of the tokens you are
+          swapping incorporates custom behavior on transfer.
+        </Trans>
+      )
     case 'Too little received':
     case 'Too much requested':
     case 'STF':
-      return t`This transaction will not succeed due to price movement. Try increasing your slippage tolerance. Note: fee on transfer and rebase tokens are incompatible with Uniswap V3.`
+      return (
+        <Trans>
+          This transaction will not succeed due to price movement. Try increasing your slippage tolerance. Note: fee on
+          transfer and rebase tokens are incompatible with Uniswap V3.
+        </Trans>
+      )
     case 'TF':
-      return t`The output token cannot be transferred. There may be an issue with the output token. Note: fee on transfer and rebase tokens are incompatible with Uniswap V3.`
+      return (
+        <Trans>
+          The output token cannot be transferred. There may be an issue with the output token. Note: fee on transfer and
+          rebase tokens are incompatible with Uniswap V3.
+        </Trans>
+      )
     default:
       if (reason?.indexOf('undefined is not an object') !== -1) {
         console.error(error, reason)
-        return t`An error occurred when trying to execute this swap. You may need to increase your slippage tolerance. If that does not work, there may be an incompatibility with the token you are trading. Note: fee on transfer and rebase tokens are incompatible with Uniswap V3.`
+        return (
+          <Trans>
+            An error occurred when trying to execute this swap. You may need to increase your slippage tolerance. If
+            that does not work, there may be an incompatibility with the token you are trading. Note: fee on transfer
+            and rebase tokens are incompatible with Uniswap V3.
+          </Trans>
+        )
       }
-      return t`Unknown error${
-        reason ? `: "${reason}"` : ''
-      }. Try increasing your slippage tolerance. Note: fee on transfer and rebase tokens are incompatible with Uniswap V3.`
+      return (
+        <Trans>
+          Unknown error${reason ? `: "${reason}"` : ''}. Try increasing your slippage tolerance. Note: fee on transfer
+          and rebase tokens are incompatible with Uniswap V3.
+        </Trans>
+      )
   }
 }
 
@@ -236,7 +271,7 @@ export function useSwapCallback(
   allowedSlippage: Percent, // in bips
   recipientAddressOrName: string | null, // the ENS name or address of the recipient of the trade, or null if swap should be returned to sender
   signatureData: SignatureData | undefined | null
-): { state: SwapCallbackState; callback: null | (() => Promise<string>); error: string | null } {
+): { state: SwapCallbackState; callback: null | (() => Promise<string>); error: ReactNode | null } {
   const { account, chainId, library } = useActiveWeb3React()
 
   const swapCalls = useSwapCallArguments(trade, allowedSlippage, recipientAddressOrName, signatureData)
@@ -248,11 +283,11 @@ export function useSwapCallback(
 
   return useMemo(() => {
     if (!trade || !library || !account || !chainId) {
-      return { state: SwapCallbackState.INVALID, callback: null, error: 'Missing dependencies' }
+      return { state: SwapCallbackState.INVALID, callback: null, error: <Trans>Missing dependencies</Trans> }
     }
     if (!recipient) {
       if (recipientAddressOrName !== null) {
-        return { state: SwapCallbackState.INVALID, callback: null, error: 'Invalid recipient' }
+        return { state: SwapCallbackState.INVALID, callback: null, error: <Trans>Invalid recipient</Trans> }
       } else {
         return { state: SwapCallbackState.LOADING, callback: null, error: null }
       }
@@ -290,11 +325,11 @@ export function useSwapCallback(
                   .call(tx)
                   .then((result) => {
                     console.debug('Unexpected successful call after failed estimate gas', call, gasError, result)
-                    return { call, error: new Error('Unexpected issue with estimating the gas. Please try again.') }
+                    return { call, error: <Trans>Unexpected issue with estimating the gas. Please try again.</Trans> }
                   })
                   .catch((callError) => {
                     console.debug('Call threw error', call, callError)
-                    return { call, error: new Error(swapErrorToUserReadableMessage(callError)) }
+                    return { call, error: swapErrorToUserReadableMessage(callError) }
                   })
               })
           })
@@ -313,7 +348,7 @@ export function useSwapCallback(
           const firstNoErrorCall = estimatedCalls.find<SwapCallEstimate>(
             (call): call is SwapCallEstimate => !('error' in call)
           )
-          if (!firstNoErrorCall) throw new Error('Unexpected error. Could not estimate gas for the swap.')
+          if (!firstNoErrorCall) throw new Error(t`Unexpected error. Could not estimate gas for the swap.`)
           bestCallOption = firstNoErrorCall
         }
 
@@ -362,12 +397,12 @@ export function useSwapCallback(
           .catch((error) => {
             // if the user rejected the tx, pass this along
             if (error?.code === 4001) {
-              throw new Error('Transaction rejected.')
+              throw new Error(t`Transaction rejected.`)
             } else {
               // otherwise, the error was unexpected and we need to convey that
               console.error(`Swap failed`, error, address, calldata, value)
 
-              throw new Error(`Swap failed: ${swapErrorToUserReadableMessage(error)}`)
+              throw new Error(t`Swap failed: ${swapErrorToUserReadableMessage(error)}`)
             }
           })
       },

src/pages/AddLiquidity/index.tsx

 import { BigNumber } from '@ethersproject/bignumber'
 import { TransactionResponse } from '@ethersproject/providers'
-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 import { FeeAmount, NonfungiblePositionManager } from '@uniswap/v3-sdk'
 import DowntimeWarning from 'components/DowntimeWarning'
@@ -560,7 +560,7 @@ export default function AddLiquidity({
           hash={txHash}
           content={() => (
             <ConfirmationModalContent
-              title={t`Add Liquidity`}
+              title={<Trans>Add Liquidity</Trans>}
               onDismiss={handleDismissConfirmation}
               topContent={() => (
                 <Review

src/pages/AddLiquidityV2/index.tsx

 import { BigNumber } from '@ethersproject/bignumber'
 import { TransactionResponse } from '@ethersproject/providers'
-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
 import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
@@ -270,9 +270,12 @@ export default function AddLiquidity({
     )
   }
 
-  const pendingText = t`Supplying ${parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)} ${
-    currencies[Field.CURRENCY_A]?.symbol
-  } and ${parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)} ${currencies[Field.CURRENCY_B]?.symbol}`
+  const pendingText = (
+    <Trans>
+      Supplying ${parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)} ${currencies[Field.CURRENCY_A]?.symbol} and $
+      {parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)} ${currencies[Field.CURRENCY_B]?.symbol}
+    </Trans>
+  )
 
   const handleCurrencyASelect = useCallback(
     (currencyA: Currency) => {

src/pages/CreateProposal/ProposalEditor.tsx

+// eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
 import { ResizingTextArea, TextInput } from 'components/TextInput'
 import React, { memo } from 'react'

src/pages/RemoveLiquidity/index.tsx

 import { BigNumber } from '@ethersproject/bignumber'
 import { Contract } from '@ethersproject/contracts'
 import { TransactionResponse } from '@ethersproject/providers'
-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { Currency, Percent } from '@uniswap/sdk-core'
 import { useCallback, useContext, useMemo, useState } from 'react'
 import { ArrowDown, Plus } from 'react-feather'
@@ -371,9 +371,12 @@ export default function RemoveLiquidity({
     )
   }
 
-  const pendingText = t`Removing ${parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)} ${
-    currencyA?.symbol
-  } and ${parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)} ${currencyB?.symbol}`
+  const pendingText = (
+    <Trans>
+      Removing ${parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)} ${currencyA?.symbol} and $
+      {parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)} ${currencyB?.symbol}
+    </Trans>
+  )
 
   const liquidityPercentChangeCallback = useCallback(
     (value: number) => {

src/pages/Vote/VotePage.tsx

 import { BigNumber } from '@ethersproject/bignumber'
+// eslint-disable-next-line no-restricted-imports
 import { t, Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'

src/state/burn/hooks.ts → src/state/burn/hooks.tsx

-import { t } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import JSBI from 'jsbi'
-import { useCallback } from 'react'
+import { ReactNode, useCallback } from 'react'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 
 import { useTotalSupply } from '../../hooks/useTotalSupply'
@@ -28,7 +28,7 @@ export function useDerivedBurnInfo(
     [Field.CURRENCY_A]?: CurrencyAmount<Currency>
     [Field.CURRENCY_B]?: CurrencyAmount<Currency>
   }
-  error?: string
+  error?: ReactNode
 } {
   const { account } = useActiveWeb3React()
 
@@ -122,13 +122,13 @@ export function useDerivedBurnInfo(
         : undefined,
   }
 
-  let error: string | undefined
+  let error: ReactNode | undefined
   if (!account) {
-    error = t`Connect Wallet`
+    error = <Trans>Connect Wallet</Trans>
   }
 
   if (!parsedAmounts[Field.LIQUIDITY] || !parsedAmounts[Field.CURRENCY_A] || !parsedAmounts[Field.CURRENCY_B]) {
-    error = error ?? t`Enter an amount`
+    error = error ?? <Trans>Enter an amount</Trans>
   }
 
   return { pair, parsedAmounts, error }

src/state/burn/v3/hooks.ts → src/state/burn/v3/hooks.tsx

-import { t } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 import { Position } from '@uniswap/v3-sdk'
 import { useToken } from 'hooks/Tokens'
 import { usePool } from 'hooks/usePools'
 import { useV3PositionFees } from 'hooks/useV3PositionFees'
 import { useActiveWeb3React } from 'hooks/web3'
-import { useCallback, useMemo } from 'react'
+import { ReactNode, useCallback, useMemo } from 'react'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 import { PositionDetails } from 'types/position'
 import { unwrappedToken } from 'utils/unwrappedToken'
@@ -28,7 +28,7 @@ export function useDerivedV3BurnInfo(
   feeValue0?: CurrencyAmount<Currency>
   feeValue1?: CurrencyAmount<Currency>
   outOfRange: boolean
-  error?: string
+  error?: ReactNode
 } {
   const { account } = useActiveWeb3React()
   const { percent } = useBurnV3State()
@@ -74,12 +74,12 @@ export function useDerivedV3BurnInfo(
   const outOfRange =
     pool && position ? pool.tickCurrent < position.tickLower || pool.tickCurrent > position.tickUpper : false
 
-  let error: string | undefined
+  let error: ReactNode | undefined
   if (!account) {
-    error = t`Connect Wallet`
+    error = <Trans>Connect Wallet</Trans>
   }
   if (percent === 0) {
-    error = error ?? t`Enter a percent`
+    error = error ?? <Trans>Enter a percent</Trans>
   }
   return {
     position: positionSDK,

src/state/governance/hooks.ts

@@ -4,6 +4,7 @@ import { Contract } from '@ethersproject/contracts'
 import { TransactionResponse } from '@ethersproject/providers'
 import { toUtf8String, Utf8ErrorFuncs, Utf8ErrorReason } from '@ethersproject/strings'
 import { formatUnits } from '@ethersproject/units'
+// eslint-disable-next-line no-restricted-imports
 import { t } from '@lingui/macro'
 import { abi as GOV_ABI } from '@uniswap/governance/build/GovernorAlpha.json'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'

src/state/mint/hooks.ts → src/state/mint/hooks.tsx

-import { t } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent, Price, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import JSBI from 'jsbi'
-import { useCallback, useMemo } from 'react'
+import { ReactNode, useCallback, useMemo } from 'react'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 
 import { useTotalSupply } from '../../hooks/useTotalSupply'
@@ -59,7 +59,7 @@ export function useDerivedMintInfo(
   noLiquidity?: boolean
   liquidityMinted?: CurrencyAmount<Token>
   poolTokenPercentage?: Percent
-  error?: string
+  error?: ReactNode
 } {
   const { account } = useActiveWeb3React()
 
@@ -176,27 +176,27 @@ export function useDerivedMintInfo(
     }
   }, [liquidityMinted, totalSupply])
 
-  let error: string | undefined
+  let error: ReactNode | undefined
   if (!account) {
-    error = t`Connect Wallet`
+    error = <Trans>Connect Wallet</Trans>
   }
 
   if (pairState === PairState.INVALID) {
-    error = error ?? t`Invalid pair`
+    error = error ?? <Trans>Invalid pair</Trans>
   }
 
   if (!parsedAmounts[Field.CURRENCY_A] || !parsedAmounts[Field.CURRENCY_B]) {
-    error = error ?? t`Enter an amount`
+    error = error ?? <Trans>Enter an amount</Trans>
   }
 
   const { [Field.CURRENCY_A]: currencyAAmount, [Field.CURRENCY_B]: currencyBAmount } = parsedAmounts
 
   if (currencyAAmount && currencyBalances?.[Field.CURRENCY_A]?.lessThan(currencyAAmount)) {
-    error = t`Insufficient ${currencies[Field.CURRENCY_A]?.symbol} balance`
+    error = <Trans>Insufficient ${currencies[Field.CURRENCY_A]?.symbol} balance</Trans>
   }
 
   if (currencyBAmount && currencyBalances?.[Field.CURRENCY_B]?.lessThan(currencyBAmount)) {
-    error = t`Insufficient ${currencies[Field.CURRENCY_B]?.symbol} balance`
+    error = <Trans>Insufficient ${currencies[Field.CURRENCY_B]?.symbol} balance</Trans>
   }
 
   return {

src/state/mint/v3/hooks.ts → src/state/mint/v3/hooks.tsx

-import { t } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Price, Rounding, Token } from '@uniswap/sdk-core'
 import {
   encodeSqrtRatioX96,
@@ -13,7 +13,7 @@ import {
 } from '@uniswap/v3-sdk'
 import { usePool } from 'hooks/usePools'
 import JSBI from 'jsbi'
-import { useCallback, useMemo } from 'react'
+import { ReactNode, useCallback, useMemo } from 'react'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 import { getTickToPrice } from 'utils/getTickToPrice'
 
@@ -112,7 +112,7 @@ export function useV3DerivedMintInfo(
   parsedAmounts: { [field in Field]?: CurrencyAmount<Currency> }
   position: Position | undefined
   noLiquidity?: boolean
-  errorMessage?: string
+  errorMessage?: ReactNode
   invalidPool: boolean
   outOfRange: boolean
   invalidRange: boolean
@@ -218,7 +218,7 @@ export function useV3DerivedMintInfo(
   // if pool exists use it, if not use the mock pool
   const poolForPosition: Pool | undefined = pool ?? mockPool
 
-  // lower and upper limits in the tick space for `feeAmount`
+  // lower and upper limits in the tick space for `feeAmoun<Trans>
   const tickSpaceLimits: {
     [bound in Bound]: number | undefined
   } = useMemo(
@@ -423,34 +423,34 @@ export function useV3DerivedMintInfo(
     tickUpper,
   ])
 
-  let errorMessage: string | undefined
+  let errorMessage: ReactNode | undefined
   if (!account) {
-    errorMessage = t`Connect Wallet`
+    errorMessage = <Trans>Connect Wallet</Trans>
   }
 
   if (poolState === PoolState.INVALID) {
-    errorMessage = errorMessage ?? t`Invalid pair`
+    errorMessage = errorMessage ?? <Trans>Invalid pair</Trans>
   }
 
   if (invalidPrice) {
-    errorMessage = errorMessage ?? t`Invalid price input`
+    errorMessage = errorMessage ?? <Trans>Invalid price input</Trans>
   }
 
   if (
     (!parsedAmounts[Field.CURRENCY_A] && !depositADisabled) ||
     (!parsedAmounts[Field.CURRENCY_B] && !depositBDisabled)
   ) {
-    errorMessage = errorMessage ?? t`Enter an amount`
+    errorMessage = errorMessage ?? <Trans>Enter an amount</Trans>
   }
 
   const { [Field.CURRENCY_A]: currencyAAmount, [Field.CURRENCY_B]: currencyBAmount } = parsedAmounts
 
   if (currencyAAmount && currencyBalances?.[Field.CURRENCY_A]?.lessThan(currencyAAmount)) {
-    errorMessage = t`Insufficient ${currencies[Field.CURRENCY_A]?.symbol} balance`
+    errorMessage = <Trans>Insufficient ${currencies[Field.CURRENCY_A]?.symbol} balance</Trans>
   }
 
   if (currencyBAmount && currencyBalances?.[Field.CURRENCY_B]?.lessThan(currencyBAmount)) {
-    errorMessage = t`Insufficient ${currencies[Field.CURRENCY_B]?.symbol} balance`
+    errorMessage = <Trans>Insufficient ${currencies[Field.CURRENCY_B]?.symbol} balance</Trans>
   }
 
   const invalidPool = poolState === PoolState.INVALID

src/state/stake/hooks.ts → src/state/stake/hooks.tsx

 import { Interface } from '@ethersproject/abi'
-import { t } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { abi as STAKING_REWARDS_ABI } from '@uniswap/liquidity-staker/build/StakingRewards.json'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
 import JSBI from 'jsbi'
-import { useMemo } from 'react'
+import { ReactNode, useMemo } from 'react'
 
 import { DAI, UNI, USDC, USDT, WBTC, WETH9_EXTENDED } from '../../constants/tokens'
 import { useActiveWeb3React } from '../../hooks/web3'
@@ -250,7 +250,7 @@ export function useDerivedStakeInfo(
   userLiquidityUnstaked: CurrencyAmount<Token> | undefined
 ): {
   parsedAmount?: CurrencyAmount<Token>
-  error?: string
+  error?: ReactNode
 } {
   const { account } = useActiveWeb3React()
 
@@ -261,12 +261,12 @@ export function useDerivedStakeInfo(
       ? parsedInput
       : undefined
 
-  let error: string | undefined
+  let error: ReactNode | undefined
   if (!account) {
-    error = t`Connect Wallet`
+    error = <Trans>Connect Wallet</Trans>
   }
   if (!parsedAmount) {
-    error = error ?? t`Enter an amount`
+    error = error ?? <Trans>Enter an amount</Trans>
   }
 
   return {

src/state/swap/hooks.ts → src/state/swap/hooks.tsx

 import { parseUnits } from '@ethersproject/units'
-import { t } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade } from '@uniswap/v3-sdk'
@@ -8,7 +8,7 @@ import { useBestV2Trade } from 'hooks/useBestV2Trade'
 import { useBestV3Trade } from 'hooks/useBestV3Trade'
 import JSBI from 'jsbi'
 import { ParsedQs } from 'qs'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 import { V3TradeState } from 'state/routing/types'
 import { isTradeBetter } from 'utils/isTradeBetter'
@@ -121,7 +121,7 @@ export function useDerivedSwapInfo(toggledVersion: Version | undefined): {
   currencies: { [field in Field]?: Currency | null }
   currencyBalances: { [field in Field]?: CurrencyAmount<Currency> }
   parsedAmount: CurrencyAmount<Currency> | undefined
-  inputError?: string
+  inputError?: ReactNode
   v2Trade: V2Trade<Currency, Currency, TradeType> | undefined
   v3Trade: {
     trade: V3Trade<Currency, Currency, TradeType> | null
@@ -195,25 +195,25 @@ export function useDerivedSwapInfo(toggledVersion: Version | undefined): {
     [Field.OUTPUT]: outputCurrency,
   }
 
-  let inputError: string | undefined
+  let inputError: ReactNode | undefined
   if (!account) {
-    inputError = t`Connect Wallet`
+    inputError = <Trans>Connect Wallet</Trans>
   }
 
   if (!parsedAmount) {
-    inputError = inputError ?? t`Enter an amount`
+    inputError = inputError ?? <Trans>Enter an amount</Trans>
   }
 
   if (!currencies[Field.INPUT] || !currencies[Field.OUTPUT]) {
-    inputError = inputError ?? t`Select a token`
+    inputError = inputError ?? <Trans>Select a token</Trans>
   }
 
   const formattedTo = isAddress(to)
   if (!to || !formattedTo) {
-    inputError = inputError ?? t`Enter a recipient`
+    inputError = inputError ?? <Trans>Enter a recipient</Trans>
   } else {
     if (BAD_RECIPIENT_ADDRESSES[formattedTo] || (v2Trade && involvesAddress(v2Trade, formattedTo))) {
-      inputError = inputError ?? t`Invalid recipient`
+      inputError = inputError ?? <Trans>Invalid recipient</Trans>
     }
   }
 
@@ -223,7 +223,7 @@ export function useDerivedSwapInfo(toggledVersion: Version | undefined): {
   const [balanceIn, amountIn] = [currencyBalances[Field.INPUT], bestTrade?.maximumAmountIn(allowedSlippage)]
 
   if (balanceIn && amountIn && balanceIn.lessThan(amountIn)) {
-    inputError = t`Insufficient ${amountIn.currency.symbol} balance`
+    inputError = <Trans>Insufficient ${amountIn.currency.symbol} balance</Trans>
   }
 
   return {