use trans macro instead of t wherever possible

src/components/Badge/RangeBadge.tsx

@@ -4,7 +4,7 @@ import Badge, { BadgeVariant } from 'components/Badge'
 import styled from 'styled-components/macro'
 
 import { MouseoverTooltip } from '../../components/Tooltip'
-import { Trans, t } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { AlertCircle } from 'react-feather'
 
 const BadgeWrapper = styled.div`
@@ -43,7 +43,7 @@ export default function RangeBadge({
   return (
     <BadgeWrapper>
       {removed ? (
-        <MouseoverTooltip text={t`Your position has 0 liquidity, and is not earning fees.`}>
+        <MouseoverTooltip text={<Trans>Your position has 0 liquidity, and is not earning fees.</Trans>}>
           <Badge variant={BadgeVariant.DEFAULT}>
             <AlertCircle width={14} height={14} />
             &nbsp;
@@ -54,7 +54,11 @@ export default function RangeBadge({
         </MouseoverTooltip>
       ) : inRange ? (
         <MouseoverTooltip
-          text={t`The price of this pool is within your selected range. Your position is currently earning fees.`}
+          text={
+            <Trans>
+              The price of this pool is within your selected range. Your position is currently earning fees.
+            </Trans>
+          }
         >
           <Badge variant={BadgeVariant.DEFAULT}>
             <ActiveDot /> &nbsp;
@@ -65,7 +69,11 @@ export default function RangeBadge({
         </MouseoverTooltip>
       ) : (
         <MouseoverTooltip
-          text={t`The price of this pool is outside of your selected range. Your position is not currently earning fees.`}
+          text={
+            <Trans>
+              The price of this pool is outside of your selected range. Your position is not currently earning fees.
+            </Trans>
+          }
         >
           <Badge variant={BadgeVariant.WARNING}>
             <AlertCircle width={14} height={14} />

src/components/CurrencyInputPanel/index.tsx

@@ -149,7 +149,7 @@ interface CurrencyInputPanelProps {
   onUserInput: (value: string) => void
   onMax?: () => void
   showMaxButton: boolean
-  label?: string
+  label?: ReactNode
   onCurrencySelect?: (currency: Currency) => void
   currency?: Currency | null
   hideBalance?: boolean

src/components/FeeSelector/index.tsx

 import React from 'react'
 import { FeeAmount } from '@uniswap/v3-sdk'
-import { t } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { AutoColumn } from 'components/Column'
 import { DynamicSection } from 'pages/AddLiquidity/styled'
 import { TYPE } from 'theme'
@@ -26,9 +26,11 @@ export default function FeeSelector({
   return (
     <AutoColumn gap="16px">
       <DynamicSection gap="md" disabled={disabled}>
-        <TYPE.label>{t`Select Pool`}</TYPE.label>
+        <TYPE.label>
+          <Trans>Select Pool</Trans>
+        </TYPE.label>
         <TYPE.main fontSize={14} fontWeight={400} style={{ marginBottom: '.5rem', lineHeight: '125%' }}>
-          {t`Select a pool type based on your preferred liquidity provider fee.`}
+          <Trans>Select a pool type based on your preferred liquidity provider fee.</Trans>
         </TYPE.main>
         <RowBetween>
           <ButtonRadioChecked
@@ -37,9 +39,11 @@ export default function FeeSelector({
             onClick={() => handleFeePoolSelect(FeeAmount.LOW)}
           >
             <AutoColumn gap="sm" justify="flex-start">
-              <ResponsiveText>{t`0.05% fee`}</ResponsiveText>
+              <ResponsiveText>
+                <Trans>0.05% fee</Trans>
+              </ResponsiveText>
               <TYPE.main fontWeight={400} fontSize="12px" textAlign="left">
-                {t`Best for stable pairs.`}
+                <Trans>Best for stable pairs.</Trans>
               </TYPE.main>
             </AutoColumn>
           </ButtonRadioChecked>
@@ -49,9 +53,11 @@ export default function FeeSelector({
             onClick={() => handleFeePoolSelect(FeeAmount.MEDIUM)}
           >
             <AutoColumn gap="sm" justify="flex-start">
-              <ResponsiveText>{t`0.3% fee`}</ResponsiveText>
+              <ResponsiveText>
+                <Trans>0.3% fee</Trans>
+              </ResponsiveText>
               <TYPE.main fontWeight={400} fontSize="12px" textAlign="left">
-                {t`Best for most pairs.`}
+                <Trans>Best for most pairs.</Trans>
               </TYPE.main>
             </AutoColumn>
           </ButtonRadioChecked>
@@ -61,9 +67,11 @@ export default function FeeSelector({
             onClick={() => handleFeePoolSelect(FeeAmount.HIGH)}
           >
             <AutoColumn gap="sm" justify="flex-start">
-              <ResponsiveText>{t`1% fee`}</ResponsiveText>
+              <ResponsiveText>
+                <Trans>1% fee</Trans>
+              </ResponsiveText>
               <TYPE.main fontWeight={400} fontSize="12px" textAlign="left">
-                {t`Best for exotic pairs.`}
+                <Trans>Best for exotic pairs.</Trans>
               </TYPE.main>
             </AutoColumn>
           </ButtonRadioChecked>

src/components/PositionPreview/index.tsx

-import React, { useState, useCallback, useContext } from 'react'
+import React, { useState, useCallback, useContext, ReactNode } from 'react'
 import { Position } from '@uniswap/v3-sdk'
 import { LightCard } from 'components/Card'
 import { AutoColumn } from 'components/Column'
@@ -22,7 +22,7 @@ export const PositionPreview = ({
   baseCurrencyDefault,
 }: {
   position: Position
-  title?: string
+  title?: ReactNode
   inRange: boolean
   baseCurrencyDefault?: Currency | undefined
 }) => {

src/components/QuestionHelper/index.tsx

-import React, { useCallback, useState } from 'react'
+import React, { ReactNode, useCallback, useState } from 'react'
 import styled from 'styled-components/macro'
 import Tooltip from '../Tooltip'
 
@@ -24,32 +24,11 @@ const QuestionWrapper = styled.div`
   }
 `
 
-const LightQuestionWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.2rem;
-  border: none;
-  background: none;
-  outline: none;
-  cursor: default;
-  border-radius: 36px;
-  width: 24px;
-  height: 24px;
-  background-color: rgba(255, 255, 255, 0.1);
-  color: ${({ theme }) => theme.white};
-
-  :hover,
-  :focus {
-    opacity: 0.7;
-  }
-`
-
 const QuestionMark = styled.span`
   font-size: 14px;
 `
 
-export default function QuestionHelper({ text }: { text: string; size?: number }) {
+export default function QuestionHelper({ text }: { text: ReactNode; size?: number }) {
   const [show, setShow] = useState<boolean>(false)
 
   const open = useCallback(() => setShow(true), [setShow])
@@ -65,20 +44,3 @@ export default function QuestionHelper({ text }: { text: string; size?: number }
     </span>
   )
 }
-
-export function LightQuestionHelper({ text }: { text: string }) {
-  const [show, setShow] = useState<boolean>(false)
-
-  const open = useCallback(() => setShow(true), [setShow])
-  const close = useCallback(() => setShow(false), [setShow])
-
-  return (
-    <span style={{ marginLeft: 4 }}>
-      <Tooltip text={text} show={show}>
-        <LightQuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close}>
-          <QuestionMark>?</QuestionMark>
-        </LightQuestionWrapper>
-      </Tooltip>
-    </span>
-  )
-}

src/components/SearchModal/CommonBases.tsx

-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import React from 'react'
 import { Text } from 'rebass'
 import { Currency } from '@uniswap/sdk-core'
@@ -44,7 +44,7 @@ export default function CommonBases({
         <Text fontWeight={500} fontSize={14}>
           <Trans>Common bases</Trans>
         </Text>
-        <QuestionHelper text={t`These tokens are commonly paired with other tokens.`} />
+        <QuestionHelper text={<Trans>These tokens are commonly paired with other tokens.</Trans>} />
       </AutoRow>
       <AutoRow gap="4px">
         {bases.map((currency: Currency) => {

src/components/SearchModal/CurrencyList.tsx

-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import React, { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
 import { FixedSizeList } from 'react-window'
@@ -133,7 +133,11 @@ function CurrencyRow({
           {currency.symbol}
         </Text>
         <TYPE.darkGray ml="0px" fontSize={'12px'} fontWeight={300}>
-          {currency.name} {!currency.isNative && !isOnSelectedList && customAdded && '• ' + t`Added by user`}
+          {!currency.isNative && !isOnSelectedList && customAdded ? (
+            <Trans>{currency.name} • Added by user</Trans>
+          ) : (
+            currency.name
+          )}
         </TYPE.darkGray>
       </Column>
       <TokenTags currency={currency} />
@@ -163,7 +167,11 @@ function BreakLineComponent({ style }: { style: CSSProperties }) {
             </TYPE.main>
           </RowFixed>
           <QuestionHelper
-            text={t`Tokens from inactive lists. Import specific tokens below or click 'Manage' to activate more lists.`}
+            text={
+              <Trans>
+                Tokens from inactive lists. Import specific tokens below or click Manage to activate more lists.
+              </Trans>
+            }
           />
         </RowBetween>
       </LightGreyCard>

src/components/Settings/index.tsx

@@ -199,7 +199,9 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
                   <Trans>Toggle Expert Mode</Trans>
                 </TYPE.black>
                 <QuestionHelper
-                  text={t`Allow high price impact trades and skip the confirm screen. Use at your own risk.`}
+                  text={
+                    <Trans>Allow high price impact trades and skip the confirm screen. Use at your own risk.</Trans>
+                  }
                 />
               </RowFixed>
               <Toggle
@@ -223,7 +225,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
                 <TYPE.black fontWeight={400} fontSize={14} color={theme.text2}>
                   <Trans>Disable Multihops</Trans>
                 </TYPE.black>
-                <QuestionHelper text={t`Restricts swaps to direct pairs only.`} />
+                <QuestionHelper text={<Trans>Restricts swaps to direct pairs only.</Trans>} />
               </RowFixed>
               <Toggle
                 id="toggle-disable-multihop-button"

src/components/Tooltip/index.tsx

-import React, { useCallback, useState } from 'react'
+import React, { ReactNode, useCallback, useState } from 'react'
 import styled from 'styled-components/macro'
 import Popover, { PopoverProps } from '../Popover'
 
@@ -10,11 +10,11 @@ const TooltipContainer = styled.div`
 `
 
 interface TooltipProps extends Omit<PopoverProps, 'content'> {
-  text: string
+  text: ReactNode
 }
 
 interface TooltipContentProps extends Omit<PopoverProps, 'content'> {
-  content: React.ReactNode
+  content: ReactNode
 }
 
 export default function Tooltip({ text, ...rest }: TooltipProps) {

src/components/TransactionConfirmationModal/index.tsx

 import { Currency } from '@uniswap/sdk-core'
-import React, { useContext } from 'react'
+import React, { ReactNode, useContext } from 'react'
 import styled, { ThemeContext } from 'styled-components'
 import { getExplorerLink, ExplorerDataType } from '../../utils/getExplorerLink'
 import Modal from '../Modal'
@@ -45,7 +45,7 @@ export function ConfirmationPendingContent({
   inline,
 }: {
   onDismiss: () => void
-  pendingText: string
+  pendingText: ReactNode
   inline?: boolean // not in modal
 }) {
   return (
@@ -153,10 +153,10 @@ export function ConfirmationModalContent({
   onDismiss,
   topContent,
 }: {
-  title: string
+  title: ReactNode
   onDismiss: () => void
-  topContent: () => React.ReactNode
-  bottomContent?: () => React.ReactNode | undefined
+  topContent: () => ReactNode
+  bottomContent?: () => ReactNode | undefined
 }) {
   return (
     <Wrapper>
@@ -212,7 +212,7 @@ interface ConfirmationModalProps {
   hash: string | undefined
   content: () => React.ReactNode
   attemptingTxn: boolean
-  pendingText: string
+  pendingText: React.ReactNode
   currencyToAdd?: Currency | undefined
 }
 

src/components/TransactionSettings/index.tsx

@@ -159,7 +159,9 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
             <Trans>Slippage tolerance</Trans>
           </TYPE.black>
           <QuestionHelper
-            text={t`Your transaction will revert if the price changes unfavorably by more than this percentage.`}
+            text={
+              <Trans>Your transaction will revert if the price changes unfavorably by more than this percentage.</Trans>
+            }
           />
         </RowFixed>
         <RowBetween>
@@ -208,11 +210,13 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
               color: slippageError ? 'red' : '#F3841E',
             }}
           >
-            {slippageError
-              ? t`Enter a valid slippage percentage`
-              : tooLow
-              ? t`Your transaction may fail`
-              : t`Your transaction may be frontrun`}
+            {slippageError ? (
+              <Trans>Enter a valid slippage percentage</Trans>
+            ) : tooLow ? (
+              <Trans>Your transaction may fail</Trans>
+            ) : (
+              <Trans>Your transaction may be frontrun</Trans>
+            )}
           </RowBetween>
         ) : null}
       </AutoColumn>

src/components/WalletModal/index.tsx

@@ -16,7 +16,7 @@ import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useWalletModalToggle } from '../../state/application/hooks'
 import { ExternalLink, TYPE } from '../../theme'
 import AccountDetails from '../AccountDetails'
-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 
 import Modal from '../Modal'
 import Option from './Option'
@@ -240,7 +240,7 @@ export default function WalletModal({
                 id={`connect-${key}`}
                 key={key}
                 color={'#E8831D'}
-                header={t`Install Metamask`}
+                header={<Trans>Install Metamask</Trans>}
                 subheader={null}
                 link={'https://metamask.io/'}
                 icon={MetamaskIcon}

src/components/Web3Status/index.tsx

@@ -204,7 +204,7 @@ function Web3StatusInner() {
     return (
       <Web3StatusError onClick={toggleWalletModal}>
         <NetworkIcon />
-        <Text>{error instanceof UnsupportedChainIdError ? t`Wrong Network` : t`Error`}</Text>
+        <Text>{error instanceof UnsupportedChainIdError ? <Trans>Wrong Network</Trans> : <Trans>Error</Trans>}</Text>
       </Web3StatusError>
     )
   } else {

src/components/vote/DelegateModal.tsx

-import React, { useState } from 'react'
+import React, { ReactNode, useState } from 'react'
 import { UNI } from '../../constants/tokens'
 
 import Modal from '../Modal'
@@ -38,7 +38,7 @@ const TextButton = styled.div`
 interface VoteModalProps {
   isOpen: boolean
   onDismiss: () => void
-  title: string
+  title: ReactNode
 }
 
 export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalProps) {

src/pages/AddLiquidity/index.tsx

@@ -473,7 +473,11 @@ export default function AddLiquidity({
             )}
 
             {hasExistingPosition && existingPosition ? (
-              <PositionPreview position={existingPosition} title={t`Selected Range`} inRange={!outOfRange} />
+              <PositionPreview
+                position={existingPosition}
+                title={<Trans>Selected Range</Trans>}
+                inRange={!outOfRange}
+              />
             ) : (
               <>
                 <FeeSelector

src/pages/AddLiquidityV2/index.tsx

@@ -320,7 +320,7 @@ export default function AddLiquidity({
             hash={txHash}
             content={() => (
               <ConfirmationModalContent
-                title={noLiquidity ? t`You are creating a pool` : t`You will receive`}
+                title={noLiquidity ? <Trans>You are creating a pool</Trans> : <Trans>You will receive</Trans>}
                 onDismiss={handleDismissConfirmation}
                 topContent={modalHeader}
                 bottomContent={modalBottom}

src/pages/MigrateV2/MigrateV2Pair.tsx

 import JSBI from 'jsbi'
-import React, { useCallback, useMemo, useState, useEffect } from 'react'
+import React, { useCallback, useMemo, useState, useEffect, ReactNode } from 'react'
 import { Fraction, Percent, Price, Token, CurrencyAmount, WETH9 } from '@uniswap/sdk-core'
 import { FACTORY_ADDRESS } from '@uniswap/v2-sdk'
 import { Redirect, RouteComponentProps } from 'react-router'
@@ -34,7 +34,7 @@ import { TransactionResponse } from '@ethersproject/providers'
 import { useIsTransactionPending, useTransactionAdder } from 'state/transactions/hooks'
 import { useV3DerivedMintInfo, useRangeHopCallbacks, useV3MintActionHandlers } from 'state/mint/v3/hooks'
 import { Bound, resetMintState } from 'state/mint/v3/actions'
-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { AlertCircle, AlertTriangle, ArrowDown } from 'react-feather'
 import FeeSelector from 'components/FeeSelector'
 import RangeSelector from 'components/RangeSelector'
@@ -54,7 +54,7 @@ const ZERO = JSBI.BigInt(0)
 
 const DEFAULT_MIGRATE_SLIPPAGE_TOLERANCE = new Percent(75, 10_000)
 
-function EmptyState({ message }: { message: string }) {
+function EmptyState({ message }: { message: ReactNode }) {
   return (
     <AutoColumn style={{ minHeight: 200, justifyContent: 'center', alignItems: 'center' }}>
       <TYPE.body>{message}</TYPE.body>
@@ -750,7 +750,7 @@ export default function MigrateV2Pair({
             token1={token1}
           />
         ) : (
-          <EmptyState message={t`Loading`} />
+          <EmptyState message={<Trans>Loading</Trans>} />
         )}
       </AutoColumn>
     </BodyWrapper>

src/pages/MigrateV2/index.tsx

@@ -18,7 +18,7 @@ import MigrateSushiPositionCard from 'components/PositionCard/Sushi'
 import { PairState, useV2Pairs } from 'hooks/useV2Pairs'
 import { getCreate2Address } from '@ethersproject/address'
 import { pack, keccak256 } from '@ethersproject/solidity'
-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 
 function EmptyState({ message }: { message: ReactNode }) {
   return (
@@ -115,7 +115,7 @@ export default function MigrateV2() {
             <Trans>Migrate V2 Liquidity</Trans>
           </TYPE.mediumHeader>
           <div>
-            <QuestionHelper text={t`Migrate your liquidity tokens from Uniswap V2 to Uniswap V3.`} />
+            <QuestionHelper text={<Trans>Migrate your liquidity tokens from Uniswap V2 to Uniswap V3.</Trans>} />
           </div>
         </AutoRow>
 

src/pages/Pool/PositionPage.tsx

@@ -19,7 +19,7 @@ import Badge from 'components/Badge'
 import { ButtonConfirmed, ButtonPrimary, ButtonGray } from 'components/Button'
 import { DarkCard, LightCard } from 'components/Card'
 import CurrencyLogo from 'components/CurrencyLogo'
-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { currencyId } from 'utils/currencyId'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 import { useV3PositionFees } from 'hooks/useV3PositionFees'
@@ -503,12 +503,12 @@ export function PositionPage({
         hash={collectMigrationHash ?? ''}
         content={() => (
           <ConfirmationModalContent
-            title={t`Claim fees`}
+            title={<Trans>Claim fees</Trans>}
             onDismiss={() => setShowConfirm(false)}
             topContent={modalHeader}
           />
         )}
-        pendingText={t`Collecting fees`}
+        pendingText={<Trans>Collecting fees</Trans>}
       />
       <AutoColumn gap="md">
         <AutoColumn gap="sm">

src/pages/RemoveLiquidity/V3.tsx

@@ -261,7 +261,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
         hash={txnHash ?? ''}
         content={() => (
           <ConfirmationModalContent
-            title={t`Remove Liquidity`}
+            title={<Trans>Remove Liquidity</Trans>}
             onDismiss={handleDismissConfirmation}
             topContent={modalHeader}
           />

src/pages/RemoveLiquidity/index.tsx

@@ -432,7 +432,7 @@ export default function RemoveLiquidity({
             hash={txHash ? txHash : ''}
             content={() => (
               <ConfirmationModalContent
-                title={t`You will receive`}
+                title={<Trans>You will receive</Trans>}
                 onDismiss={handleDismissConfirmation}
                 topContent={modalHeader}
                 bottomContent={modalBottom}

src/pages/Swap/index.tsx

@@ -55,7 +55,7 @@ import { isTradeBetter } from '../../utils/isTradeBetter'
 import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import { warningSeverity } from '../../utils/prices'
 import AppBody from '../AppBody'
-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 
 const StyledInfo = styled(Info)`
   opacity: 0.4;
@@ -377,7 +377,9 @@ export default function Swap({ history }: RouteComponentProps) {
           <AutoColumn gap={'md'}>
             <div style={{ display: 'relative' }}>
               <CurrencyInputPanel
-                label={independentField === Field.OUTPUT && !showWrap ? t`From (at most)` : t`From`}
+                label={
+                  independentField === Field.OUTPUT && !showWrap ? <Trans>From (at most)</Trans> : <Trans>From</Trans>
+                }
                 value={formattedAmounts[Field.INPUT]}
                 showMaxButton={showMaxButton}
                 currency={currencies[Field.INPUT]}
@@ -402,7 +404,7 @@ export default function Swap({ history }: RouteComponentProps) {
               <CurrencyInputPanel
                 value={formattedAmounts[Field.OUTPUT]}
                 onUserInput={handleTypeOutput}
-                label={independentField === Field.INPUT && !showWrap ? t`To (at least)` : t`To`}
+                label={independentField === Field.INPUT && !showWrap ? <Trans>To (at least)</Trans> : <Trans>To</Trans>}
                 showMaxButton={false}
                 hideBalance={false}
                 fiatValue={fiatValueOutput ?? undefined}
@@ -572,9 +574,12 @@ export default function Swap({ history }: RouteComponentProps) {
                           <CheckCircle size="20" color={theme.green1} />
                         ) : (
                           <MouseoverTooltip
-                            text={t`You must give the Uniswap smart contracts permission to use your ${
-                              currencies[Field.INPUT]?.symbol
-                            }. You only have to do this once per token.`}
+                            text={
+                              <Trans>
+                                You must give the Uniswap smart contracts permission to use your{' '}
+                                {currencies[Field.INPUT]?.symbol}. You only have to do this once per token.
+                              </Trans>
+                            }
                           >
                             <HelpCircle size="20" color={'white'} style={{ marginLeft: '8px' }} />
                           </MouseoverTooltip>

src/pages/Vote/VotePage.tsx

@@ -201,7 +201,7 @@ export default function VotePage({
   return (
     <PageWrapper gap="lg" justify="center">
       <VoteModal isOpen={showVoteModal} onDismiss={toggleVoteModal} proposalId={proposalData?.id} support={support} />
-      <DelegateModal isOpen={showDelegateModal} onDismiss={toggleDelegateModal} title={t`Unlock Votes`} />
+      <DelegateModal isOpen={showDelegateModal} onDismiss={toggleDelegateModal} title={<Trans>Unlock Votes</Trans>} />
       <ProposalInfo gap="lg" justify="start">
         <RowBetween style={{ width: '100%' }}>
           <ArrowWrapper to="/vote">

src/pages/Vote/index.tsx

@@ -29,7 +29,7 @@ import Loader from '../../components/Loader'
 import FormattedCurrencyAmount from '../../components/FormattedCurrencyAmount'
 import { useModalOpen, useToggleDelegateModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/actions'
-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 
 const PageWrapper = styled(AutoColumn)``
 
@@ -139,7 +139,7 @@ export default function Vote() {
       <DelegateModal
         isOpen={showDelegateModal}
         onDismiss={toggleDelegateModal}
-        title={showUnlockVoting ? t`Unlock Votes` : t`Update Delegation`}
+        title={showUnlockVoting ? <Trans>Unlock Votes</Trans> : <Trans>Update Delegation</Trans>}
       />
       <TopSection gap="md">
         <VoteCard>