remove custom keys (#1739)

src/components/Badge/RangeBadge.tsx

@@ -43,47 +43,35 @@ export default function RangeBadge({
   return (
     <BadgeWrapper>
       {removed ? (
-        <MouseoverTooltip
-          text={t({
-            id: 'pools.labels.inactiveTooltip',
-            message: 'Your position has 0 liquidity, and is not earning fees.',
-          })}
-        >
+        <MouseoverTooltip text={t`Your position has 0 liquidity, and is not earning fees.`}>
           <Badge variant={BadgeVariant.DEFAULT}>
             <AlertCircle width={14} height={14} />
             &nbsp;
             <BadgeText>
-              <Trans id="pools.labels.inactive">Inactive</Trans>
+              <Trans>Inactive</Trans>
             </BadgeText>
           </Badge>
         </MouseoverTooltip>
       ) : inRange ? (
         <MouseoverTooltip
-          text={t({
-            id: 'pools.labels.inRangeTooltip',
-            message: 'The price of this pool is within your selected range. Your position is currently earning fees.',
-          })}
+          text={t`The price of this pool is within your selected range. Your position is currently earning fees.`}
         >
           <Badge variant={BadgeVariant.DEFAULT}>
             <ActiveDot /> &nbsp;
             <BadgeText>
-              <Trans id="pools.labels.inRange">In range</Trans>
+              <Trans>In range</Trans>
             </BadgeText>
           </Badge>
         </MouseoverTooltip>
       ) : (
         <MouseoverTooltip
-          text={t({
-            id: 'pools.labels.outOfRangeTooltip',
-            message:
-              'The price of this pool is outside of your selected range. Your position is not currently earning fees.',
-          })}
+          text={t`The price of this pool is outside of your selected range. Your position is not currently earning fees.`}
         >
           <Badge variant={BadgeVariant.WARNING}>
             <AlertCircle width={14} height={14} />
             &nbsp;
             <BadgeText>
-              <Trans id="pools.labels.outOfRange">Out of range</Trans>
+              <Trans>Out of range</Trans>
             </BadgeText>
           </Badge>
         </MouseoverTooltip>

src/components/CurrencyInputPanel/index.tsx

@@ -199,9 +199,7 @@ export default function CurrencyInputPanel({
           <AutoColumn gap="sm" justify="center">
             <Lock />
             <TYPE.label fontSize="12px" textAlign="center">
-              <Trans id="currencies.input.priceOutsideWarning">
-                The market price is outside your specified price range. Single-asset deposit only.
-              </Trans>
+              <Trans>The market price is outside your specified price range. Single-asset deposit only.</Trans>
             </TYPE.label>
           </AutoColumn>
         </FixedContainer>
@@ -237,7 +235,7 @@ export default function CurrencyInputPanel({
                       ? currency.symbol.slice(0, 4) +
                         '...' +
                         currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)
-                      : currency?.symbol) || t({ id: 'currencies.search.selectToken', message: 'Select a token' })}
+                      : currency?.symbol) || t`Select a token`}
                   </StyledTokenName>
                 )}
               </RowFixed>
@@ -277,7 +275,7 @@ export default function CurrencyInputPanel({
                   </TYPE.body>
                   {showMaxButton && selectedCurrencyBalance ? (
                     <StyledBalanceMax onClick={onMax}>
-                      <Trans id="currencies.input.max">(Max)</Trans>
+                      <Trans>(Max)</Trans>
                     </StyledBalanceMax>
                   ) : null}
                 </RowFixed>

src/components/FeeSelector/index.tsx

@@ -26,12 +26,9 @@ export default function FeeSelector({
   return (
     <AutoColumn gap="16px">
       <DynamicSection gap="md" disabled={disabled}>
-        <TYPE.label>{t({ id: 'pools.feeSelector.title', message: 'Select Pool' })}</TYPE.label>
+        <TYPE.label>{t`Select Pool`}</TYPE.label>
         <TYPE.main fontSize={14} fontWeight={400} style={{ marginBottom: '.5rem', lineHeight: '125%' }}>
-          {t({
-            id: 'pools.feeSelector.subtitle',
-            message: 'Select a pool type based on your preferred liquidity provider fee.',
-          })}
+          {t`Select a pool type based on your preferred liquidity provider fee.`}
         </TYPE.main>
         <RowBetween>
           <ButtonRadioChecked
@@ -40,9 +37,9 @@ export default function FeeSelector({
             onClick={() => handleFeePoolSelect(FeeAmount.LOW)}
           >
             <AutoColumn gap="sm" justify="flex-start">
-              <ResponsiveText>{t({ id: 'pools.feeSelector.lowFee', message: `0.05% fee` })}</ResponsiveText>
+              <ResponsiveText>{t`0.05% fee`}</ResponsiveText>
               <TYPE.main fontWeight={400} fontSize="12px" textAlign="left">
-                {t({ id: 'pools.feeSelector.lowFeeHint', message: 'Best for stable pairs.' })}
+                {t`Best for stable pairs.`}
               </TYPE.main>
             </AutoColumn>
           </ButtonRadioChecked>
@@ -52,9 +49,9 @@ export default function FeeSelector({
             onClick={() => handleFeePoolSelect(FeeAmount.MEDIUM)}
           >
             <AutoColumn gap="sm" justify="flex-start">
-              <ResponsiveText>{t({ id: 'pools.feeSelector.mediumFee', message: `0.3% fee` })}</ResponsiveText>
+              <ResponsiveText>{t`0.3% fee`}</ResponsiveText>
               <TYPE.main fontWeight={400} fontSize="12px" textAlign="left">
-                {t({ id: 'pools.feeSelector.mediumFeeHint', message: 'Best for most pairs.' })}
+                {t`Best for most pairs.`}
               </TYPE.main>
             </AutoColumn>
           </ButtonRadioChecked>
@@ -64,9 +61,9 @@ export default function FeeSelector({
             onClick={() => handleFeePoolSelect(FeeAmount.HIGH)}
           >
             <AutoColumn gap="sm" justify="flex-start">
-              <ResponsiveText>{t({ id: 'pools.feeSelector.highFee', message: '1% fee' })}</ResponsiveText>
+              <ResponsiveText>{t`1% fee`}</ResponsiveText>
               <TYPE.main fontWeight={400} fontSize="12px" textAlign="left">
-                {t({ id: 'pools.feeSelector.highFeeHint', message: 'Best for exotic pairs.' })}
+                {t`Best for exotic pairs.`}
               </TYPE.main>
             </AutoColumn>
           </ButtonRadioChecked>

src/components/Header/index.tsx

@@ -340,7 +340,7 @@ export default function Header() {
       </HeaderRow>
       <HeaderLinks>
         <StyledNavLink id={`swap-nav-link`} to={'/swap'}>
-          <Trans id="nav.swap">Swap</Trans>
+          <Trans>Swap</Trans>
         </StyledNavLink>
         <StyledNavLink
           id={`pool-nav-link`}
@@ -353,13 +353,13 @@ export default function Header() {
             pathname.startsWith('/find')
           }
         >
-          <Trans id="nav.pool">Pool</Trans>
+          <Trans>Pool</Trans>
         </StyledNavLink>
         <StyledNavLink id={`stake-nav-link`} to={'/vote'}>
-          <Trans id="nav.vote">Vote</Trans>
+          <Trans>Vote</Trans>
         </StyledNavLink>
         <StyledExternalLink id={`stake-nav-link`} href={'https://info.uniswap.org'}>
-          <Trans id="nav.charts">
+          <Trans>
             Charts <span style={{ fontSize: '11px', textDecoration: 'none !important' }}>↗</span>
           </Trans>
         </StyledExternalLink>
@@ -377,10 +377,10 @@ export default function Header() {
                 <TYPE.white padding="0 2px">
                   {claimTxn && !claimTxn?.receipt ? (
                     <Dots>
-                      <Trans id="claim.buttons.claimingUNI">Claiming UNI</Trans>
+                      <Trans>Claiming UNI</Trans>
                     </Dots>
                   ) : (
-                    <Trans id="claim.buttons.claimUNI">Claim UNI</Trans>
+                    <Trans>Claim UNI</Trans>
                   )}
                 </TYPE.white>
               </UNIAmount>
@@ -390,7 +390,7 @@ export default function Header() {
           <AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
             {account && userEthBalance ? (
               <BalanceText style={{ flexShrink: 0 }} pl="0.75rem" pr="0.5rem" fontWeight={500}>
-                <Trans id="wallet.ethBalance">{userEthBalance?.toSignificant(4)} ETH</Trans>
+                <Trans>{userEthBalance?.toSignificant(4)} ETH</Trans>
               </BalanceText>
             ) : null}
             <Web3Status />

src/components/NavigationTabs/index.tsx

@@ -63,10 +63,10 @@ export function SwapPoolTabs({ active }: { active: 'swap' | 'pool' }) {
   return (
     <Tabs style={{ marginBottom: '20px', display: 'none', padding: '1rem 1rem 0 1rem' }}>
       <StyledNavLink id={`swap-nav-link`} to={'/swap'} isActive={() => active === 'swap'}>
-        <Trans id="nav.swap">Swap</Trans>
+        <Trans>Swap</Trans>
       </StyledNavLink>
       <StyledNavLink id={`pool-nav-link`} to={'/pool'} isActive={() => active === 'pool'}>
-        <Trans id="nav.pool">Pool</Trans>
+        <Trans>Pool</Trans>
       </StyledNavLink>
     </Tabs>
   )
@@ -80,7 +80,7 @@ export function FindPoolTabs({ origin }: { origin: string }) {
           <StyledArrowLeft />
         </HistoryLink>
         <ActiveText>
-          <Trans id="nav.importPool">Import Pool</Trans>
+          <Trans>Import Pool</Trans>
         </ActiveText>
       </RowBetween>
     </Tabs>
@@ -120,11 +120,11 @@ export function AddRemoveTabs({
         </HistoryLink>
         <TYPE.mediumHeader fontWeight={500} fontSize={20}>
           {creating ? (
-            <Trans id="pools.buttons.createPair">Create a pair</Trans>
+            <Trans>Create a pair</Trans>
           ) : adding ? (
-            <Trans id="pools.buttons.addLiquidity">Add Liquidity</Trans>
+            <Trans>Add Liquidity</Trans>
           ) : (
-            <Trans id="pools.buttons.removeLiquidity">Remove Liquidity</Trans>
+            <Trans>Remove Liquidity</Trans>
           )}
         </TYPE.mediumHeader>
         <SettingsTab placeholderSlippage={defaultSlippage} />

src/components/PositionList/index.tsx

@@ -43,15 +43,15 @@ export default function PositionList({ positions }: PositionListProps) {
     <>
       <DesktopHeader>
         <div>
-          <Trans id="pool.yourPositions">Your positions</Trans>
+          <Trans>Your positions</Trans>
           {positions && ' (' + positions.length + ')'}
         </div>
         <div>
-          <Trans id="pool.priceRange">Price range</Trans>
+          <Trans>Price range</Trans>
         </div>
       </DesktopHeader>
       <MobileHeader>
-        <Trans id="pool.yourPositions">Your positions</Trans>
+        <Trans>Your positions</Trans>
       </MobileHeader>
       {positions.map((p) => {
         return <PositionListItem key={p.tokenId.toString()} positionDetails={p} />

src/components/PositionPreview/index.tsx

@@ -96,10 +96,10 @@ export const PositionPreview = ({
           <Break />
           <RowBetween>
             <TYPE.label>
-              <Trans id="pools.labels.feeTier">Fee Tier</Trans>
+              <Trans>Fee Tier</Trans>
             </TYPE.label>
             <TYPE.label>
-              <Trans id="pools.labels.feeTierValue">{position?.pool?.fee / 10000}%</Trans>
+              <Trans>{position?.pool?.fee / 10000}%</Trans>
             </TYPE.label>
           </RowBetween>
         </AutoColumn>
@@ -119,18 +119,16 @@ export const PositionPreview = ({
           <LightCard width="48%" padding="8px">
             <AutoColumn gap="4px" justify="center">
               <TYPE.main fontSize="12px">
-                <Trans id="pools.minPriceLabel">Min Price</Trans>
+                <Trans>Min Price</Trans>
               </TYPE.main>
               <TYPE.mediumHeader textAlign="center">{`${priceLower.toSignificant(5)}`}</TYPE.mediumHeader>
               <TYPE.main textAlign="center" fontSize="12px">
-                <Trans id="currencies.denominated">
+                <Trans>
                   {quoteCurrency.symbol} per {baseCurrency.symbol}
                 </Trans>
               </TYPE.main>
               <TYPE.small textAlign="center" color={theme.text3} style={{ marginTop: '4px' }}>
-                <Trans id="pools.minMaxPriceHint">
-                  Your position will be 100% composed of {baseCurrency?.symbol} at this price
-                </Trans>
+                <Trans>Your position will be 100% composed of {baseCurrency?.symbol} at this price</Trans>
               </TYPE.small>
             </AutoColumn>
           </LightCard>
@@ -138,18 +136,16 @@ export const PositionPreview = ({
           <LightCard width="48%" padding="8px">
             <AutoColumn gap="4px" justify="center">
               <TYPE.main fontSize="12px">
-                <Trans id="pools.maxPrice">Max Price</Trans>
+                <Trans>Max Price</Trans>
               </TYPE.main>
               <TYPE.mediumHeader textAlign="center">{`${priceUpper.toSignificant(5)}`}</TYPE.mediumHeader>
               <TYPE.main textAlign="center" fontSize="12px">
-                <Trans id="currencies.denominated">
+                <Trans>
                   {quoteCurrency.symbol} per {baseCurrency.symbol}
                 </Trans>
               </TYPE.main>
               <TYPE.small textAlign="center" color={theme.text3} style={{ marginTop: '4px' }}>
-                <Trans id="pools.minMaxPriceHint">
-                  Your position will be 100% composed of {quoteCurrency?.symbol} at this price
-                </Trans>
+                <Trans>Your position will be 100% composed of {quoteCurrency?.symbol} at this price</Trans>
               </TYPE.small>
             </AutoColumn>
           </LightCard>
@@ -157,11 +153,11 @@ export const PositionPreview = ({
         <LightCard padding="12px ">
           <AutoColumn gap="4px" justify="center">
             <TYPE.main fontSize="12px">
-              <Trans id="pools.currentPrice">Current price</Trans>
+              <Trans>Current price</Trans>
             </TYPE.main>
             <TYPE.mediumHeader>{`${price.toSignificant(5)} `}</TYPE.mediumHeader>
             <TYPE.main textAlign="center" fontSize="12px">
-              <Trans id="currencies.denominated">
+              <Trans>
                 {quoteCurrency.symbol} per {baseCurrency.symbol}
               </Trans>
             </TYPE.main>

src/components/SearchModal/CurrencySearch.tsx

@@ -171,7 +171,7 @@ export function CurrencySearch({
       <PaddedColumn gap="16px">
         <RowBetween>
           <Text fontWeight={500} fontSize={16}>
-            <Trans id="currencies.search.selectToken">Select a token</Trans>
+            <Trans>Select a token</Trans>
           </Text>
           <CloseIcon onClick={onDismiss} />
         </RowBetween>
@@ -179,7 +179,7 @@ export function CurrencySearch({
           <SearchInput
             type="text"
             id="token-search-input"
-            placeholder={t({ id: 'currencies.search.placeholder', message: 'Search name or paste address' })}
+            placeholder={t`Search name or paste address`}
             autoComplete="off"
             value={searchQuery}
             ref={inputRef as RefObject<HTMLInputElement>}
@@ -217,7 +217,7 @@ export function CurrencySearch({
       ) : (
         <Column style={{ padding: '20px', height: '100%' }}>
           <TYPE.main color={theme.text3} textAlign="center" mb="20px">
-            <Trans id="currencies.search.noResults">No results found.</Trans>
+            <Trans>No results found.</Trans>
           </TYPE.main>
         </Column>
       )}
@@ -229,7 +229,7 @@ export function CurrencySearch({
                 <Edit />
               </IconWrapper>
               <TYPE.main color={theme.blue1}>
-                <Trans id="tokenLists.manage">Manage Token Lists</Trans>
+                <Trans>Manage Token Lists</Trans>
               </TYPE.main>
             </RowFixed>
           </ButtonText>

src/components/SearchModal/ImportList.tsx

@@ -82,7 +82,7 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
         <RowBetween>
           <ArrowLeft style={{ cursor: 'pointer' }} onClick={() => setModalView(CurrencyModalView.manage)} />
           <TYPE.mediumHeader>
-            <Trans id="tokenLists.importList">Import List</Trans>
+            <Trans>Import List</Trans>
           </TYPE.mediumHeader>
           <CloseIcon onClick={onDismiss} />
         </RowBetween>
@@ -101,7 +101,7 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
                     </TYPE.body>
                     <TextDot />
                     <TYPE.main fontSize={'16px'} ml="6px">
-                      <Trans id="tokensLists.numberOfTokens">{list.tokens.length} tokens</Trans>
+                      <Trans>{list.tokens.length} tokens</Trans>
                     </TYPE.main>
                   </RowFixed>
                   <ExternalLink href={`https://tokenlists.org/token-list?url=${listURL}`}>
@@ -117,22 +117,20 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
             <AutoColumn justify="center" style={{ textAlign: 'center', gap: '16px', marginBottom: '12px' }}>
               <AlertTriangle stroke={theme.red1} size={32} />
               <TYPE.body fontWeight={500} fontSize={20} color={theme.red1}>
-                <Trans id="tokenLists.importWarning">Import at your own risk</Trans>
+                <Trans>Import at your own risk</Trans>
               </TYPE.body>
             </AutoColumn>
 
             <AutoColumn style={{ textAlign: 'center', gap: '16px', marginBottom: '12px' }}>
               <TYPE.body fontWeight={500} color={theme.red1}>
-                <Trans id="tokenLists.importHint1">
+                <Trans>
                   By adding this list you are implicitly trusting that the data is correct. Anyone can create a list,
                   including creating fake versions of existing lists and lists that claim to represent projects that do
                   not have one.
                 </Trans>
               </TYPE.body>
               <TYPE.body fontWeight={600} color={theme.red1}>
-                <Trans id="tokenLists.importHint2">
-                  If you purchase a token from this list, you may not be able to sell it back.
-                </Trans>
+                <Trans>If you purchase a token from this list, you may not be able to sell it back.</Trans>
               </TYPE.body>
             </AutoColumn>
             <AutoRow justify="center" style={{ cursor: 'pointer' }} onClick={() => setConfirmed(!confirmed)}>
@@ -143,7 +141,7 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
                 onChange={() => setConfirmed(!confirmed)}
               />
               <TYPE.body ml="10px" fontSize="16px" color={theme.red1} fontWeight={500}>
-                <Trans id="common.IUnderstand">I understand</Trans>
+                <Trans>I understand</Trans>
               </TYPE.body>
             </AutoRow>
           </Card>
@@ -155,7 +153,7 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
             padding="10px 1rem"
             onClick={handleAddList}
           >
-            <Trans id="tokenLists.buttons.import">Import</Trans>
+            <Trans>Import</Trans>
           </ButtonPrimary>
           {addError ? (
             <TYPE.error title={addError} style={{ textOverflow: 'ellipsis', overflow: 'hidden' }} error>

src/components/Web3ReactManager/index.tsx

@@ -58,7 +58,7 @@ export default function Web3ReactManager({ children }: { children: JSX.Element }
     return (
       <MessageWrapper>
         <Message>
-          <Trans id="errors.unknown">
+          <Trans>
             Oops! An unknown error occurred. Please refresh the page, or visit from another browser or device.
           </Trans>
         </Message>

src/components/Web3Status/index.tsx

@@ -125,11 +125,7 @@ function newTransactionsFirst(a: TransactionDetails, b: TransactionDetails) {
 
 function Sock() {
   return (
-    <span
-      role="img"
-      aria-label={t({ id: 'wallet.hasSocks', message: 'has socks emoji' })}
-      style={{ marginTop: -4, marginBottom: -4 }}
-    >
+    <span role="img" aria-label={t`has socks emoji`} style={{ marginTop: -4, marginBottom: -4 }}>
       🧦
     </span>
   )
@@ -191,7 +187,7 @@ function Web3StatusInner() {
         {hasPendingTransactions ? (
           <RowBetween>
             <Text>
-              <Trans id="transactions.pending">{pending?.length} Pending</Trans>
+              <Trans>{pending?.length} Pending</Trans>
             </Text>{' '}
             <Loader stroke="white" />
           </RowBetween>
@@ -208,18 +204,14 @@ function Web3StatusInner() {
     return (
       <Web3StatusError onClick={toggleWalletModal}>
         <NetworkIcon />
-        <Text>
-          {error instanceof UnsupportedChainIdError
-            ? t({ id: 'error.wrongNetwork', message: 'Wrong Network' })
-            : t({ id: 'error.generic', message: 'Error' })}
-        </Text>
+        <Text>{error instanceof UnsupportedChainIdError ? t`Wrong Network` : t`Error`}</Text>
       </Web3StatusError>
     )
   } else {
     return (
       <Web3StatusConnect id="connect-wallet" onClick={toggleWalletModal} faded={!account}>
         <Text>
-          <Trans id="wallet.connectLongForm">Connect to a wallet</Trans>
+          <Trans>Connect to a wallet</Trans>
         </Text>
       </Web3StatusConnect>
     )

src/pages/AddLiquidity/index.tsx

@@ -259,14 +259,8 @@ export default function AddLiquidity({
               setAttemptingTxn(false)
               addTransaction(response, {
                 summary: noLiquidity
-                  ? t({
-                      id: 'transactions.summary.createPoolAndAddLiquidity',
-                      message: `Create pool and add ${currencyA?.symbol}/${currencyB?.symbol} V3 liquidity`,
-                    })
-                  : t({
-                      id: 'transactions.summary.addLiquidity',
-                      message: `Add ${currencyA?.symbol}/${currencyB?.symbol} V3 liquidity`,
-                    }),
+                  ? t`Create pool and add ${currencyA?.symbol}/${currencyB?.symbol} V3 liquidity`
+                  : t`Add ${currencyA?.symbol}/${currencyB?.symbol} V3 liquidity`,
               })
               setTxHash(response.hash)
               ReactGA.event({
@@ -414,7 +408,7 @@ export default function AddLiquidity({
             bottomContent={() => (
               <ButtonPrimary style={{ marginTop: '1rem' }} onClick={onAdd}>
                 <Text fontWeight={500} fontSize={20}>
-                  <Trans id="transactions.confirmation.button">Add</Trans>
+                  <Trans>Add</Trans>
                 </Text>
               </ButtonPrimary>
             )}
@@ -436,11 +430,11 @@ export default function AddLiquidity({
                 <AutoColumn gap="md">
                   <RowBetween paddingBottom="20px">
                     <TYPE.label>
-                      <Trans id="addLiquidity.labels.selectPair">Select pair</Trans>
+                      <Trans>Select pair</Trans>
                     </TYPE.label>
                     <ButtonText onClick={clearAll}>
                       <TYPE.blue fontSize="12px">
-                        <Trans id="common.clearAll">Clear All</Trans>
+                        <Trans>Clear All</Trans>
                       </TYPE.blue>
                     </ButtonText>
                   </RowBetween>
@@ -479,11 +473,7 @@ export default function AddLiquidity({
             )}
 
             {hasExistingPosition && existingPosition ? (
-              <PositionPreview
-                position={existingPosition}
-                title={t({ id: 'addLiquidity.labels.selectedRange', message: 'Selected Range' })}
-                inRange={!outOfRange}
-              />
+              <PositionPreview position={existingPosition} title={t`Selected Range`} inRange={!outOfRange} />
             ) : (
               <>
                 <FeeSelector
@@ -497,7 +487,7 @@ export default function AddLiquidity({
                     <AutoColumn gap="md">
                       <RowBetween>
                         <TYPE.label>
-                          <Trans id="addLiquidity.labels.selectStartingPrice">Set Starting Price</Trans>
+                          <Trans>Set Starting Price</Trans>
                         </TYPE.label>
                         {baseCurrency && quoteCurrency ? (
                           <RateToggle
@@ -525,7 +515,7 @@ export default function AddLiquidity({
                       </OutlineCard>
                       <RowBetween style={{ backgroundColor: theme.bg1, padding: '12px', borderRadius: '12px' }}>
                         <TYPE.main>
-                          <Trans id="addLiquidity.labels.currentPrice">Current {baseCurrency?.symbol} Price:</Trans>
+                          <Trans>Current {baseCurrency?.symbol} Price:</Trans>
                         </TYPE.main>
                         <TYPE.main>
                           {price ? (
@@ -571,7 +561,7 @@ export default function AddLiquidity({
                 <DynamicSection gap="md" disabled={!feeAmount || invalidPool || (noLiquidity && !startPriceTypedValue)}>
                   <RowBetween>
                     <TYPE.label>
-                      <Trans id="addLiquidity.labels.selectLiquidityRange">Set Price Range</Trans>
+                      <Trans>Set Price Range</Trans>
                     </TYPE.label>
 
                     {baseCurrency && quoteCurrency ? (
@@ -637,7 +627,7 @@ export default function AddLiquidity({
                       <RowBetween>
                         <AlertTriangle stroke={theme.yellow3} size="16px" />
                         <TYPE.yellow ml="12px" fontSize="12px">
-                          <Trans id="inactiveRangeWarning">
+                          <Trans>
                             Your position will not earn fees or be used in trades until the market price moves into your
                             range.
                           </Trans>
@@ -651,9 +641,7 @@ export default function AddLiquidity({
                       <RowBetween>
                         <AlertTriangle stroke={theme.yellow3} size="16px" />
                         <TYPE.yellow ml="12px" fontSize="12px">
-                          <Trans id="error.invalidRangeWarning">
-                            Invalid range selected. The min price must be lower than the max price.
-                          </Trans>
+                          <Trans>Invalid range selected. The min price must be lower than the max price.</Trans>
                         </TYPE.yellow>
                       </RowBetween>
                     </YellowCard>
@@ -666,11 +654,7 @@ export default function AddLiquidity({
               disabled={tickLower === undefined || tickUpper === undefined || invalidPool || invalidRange}
             >
               <AutoColumn gap="md">
-                <TYPE.label>
-                  {hasExistingPosition
-                    ? 'Add more liquidity'
-                    : t({ id: 'liquidity.depositAmounts', message: 'Deposit Amounts' })}
-                </TYPE.label>
+                <TYPE.label>{hasExistingPosition ? 'Add more liquidity' : t`Deposit Amounts`}</TYPE.label>
 
                 <CurrencyInputPanel
                   value={formattedAmounts[Field.CURRENCY_A]}
@@ -705,12 +689,12 @@ export default function AddLiquidity({
               {addIsUnsupported ? (
                 <ButtonPrimary disabled={true} borderRadius="12px" padding={'12px'}>
                   <TYPE.main mb="4px">
-                    <Trans id="error.unsupportedAsset">Unsupported Asset</Trans>
+                    <Trans>Unsupported Asset</Trans>
                   </TYPE.main>
                 </ButtonPrimary>
               ) : !account ? (
                 <ButtonLight onClick={toggleWalletModal} borderRadius="12px" padding={'12px'}>
-                  <Trans id="wallet.connect">Connect wallet</Trans>
+                  <Trans>Connect wallet</Trans>
                 </ButtonLight>
               ) : (
                 <AutoColumn gap={'md'}>

src/pages/Pool/CTACards.tsx

@@ -123,10 +123,10 @@ export default function CTACards() {
       <CTA1 href={'https://docs.uniswap.org/concepts/introduction/liquidity-user-guide'}>
         <ResponsiveColumn>
           <HeaderText>
-            <Trans id="cta.v3.launchAnnouncement">Uniswap V3 is here!</Trans>
+            <Trans>Uniswap V3 is here!</Trans>
           </HeaderText>
           <TYPE.body fontWeight={300} style={{ alignItems: 'center', display: 'flex', maxWidth: '80%' }}>
-            <Trans id="cta.v3.walkthroughAndMigration">Check out our v3 LP walkthrough and migration guides.</Trans>
+            <Trans>Check out our v3 LP walkthrough and migration guides.</Trans>
           </TYPE.body>
           <RowBetween align="flex-end">
             <HeaderText>↗</HeaderText>
@@ -137,10 +137,10 @@ export default function CTACards() {
       <CTA2 href={'https://info.uniswap.org/#/pools'}>
         <ResponsiveColumn>
           <HeaderText style={{ alignSelf: 'flex-start' }}>
-            <Trans id="cta.topPools">Top pools</Trans>
+            <Trans>Top pools</Trans>
           </HeaderText>
           <TYPE.body fontWeight={300} style={{ alignSelf: 'flex-start' }}>
-            <Trans id="cta.v3.explore">Explore popular pools on Uniswap Analytics.</Trans>
+            <Trans>Explore popular pools on Uniswap Analytics.</Trans>
           </TYPE.body>
           <HeaderText style={{ alignSelf: 'flex-end' }}>↗</HeaderText>
         </ResponsiveColumn>

src/pages/Pool/index.tsx

@@ -129,7 +129,7 @@ export default function Pool() {
       content: (
         <MenuItem>
           <PlusCircle size={16} style={{ marginRight: '12px' }} />
-          <Trans id="pools.menu.create">Create a pool</Trans>
+          <Trans>Create a pool</Trans>
         </MenuItem>
       ),
       link: '/add/ETH',
@@ -139,7 +139,7 @@ export default function Pool() {
       content: (
         <MenuItem>
           <ChevronsRight size={16} style={{ marginRight: '12px' }} />
-          <Trans id="pools.menu.migrate">Migrate</Trans>
+          <Trans>Migrate</Trans>
         </MenuItem>
       ),
       link: '/migrate/v2',
@@ -149,7 +149,7 @@ export default function Pool() {
       content: (
         <MenuItem>
           <Layers size={16} style={{ marginRight: '12px' }} />
-          <Trans id="pools.menu.v2Liquidity">V2 liquidity</Trans>
+          <Trans>V2 liquidity</Trans>
         </MenuItem>
       ),
       link: '/pool/v2',
@@ -159,7 +159,7 @@ export default function Pool() {
       content: (
         <MenuItem>
           <BookOpen size={16} style={{ marginRight: '12px' }} />
-          <Trans id="pools.menu.learn">Learn</Trans>
+          <Trans>Learn</Trans>
         </MenuItem>
       ),
       link: 'https://docs.uniswap.org/',
@@ -176,7 +176,7 @@ export default function Pool() {
             <TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
               <HideSmall>
                 <TYPE.mediumHeader>
-                  <Trans id="pools.heading.poolsOverview">Pools Overview</Trans>
+                  <Trans>Pools Overview</Trans>
                 </TYPE.mediumHeader>
               </HideSmall>
               <ButtonRow>
@@ -186,14 +186,14 @@ export default function Pool() {
                   ToggleUI={(props: any) => (
                     <MoreOptionsButton {...props}>
                       <TYPE.body style={{ alignItems: 'center', display: 'flex' }}>
-                        <Trans id="pools.menu.more">More</Trans>
+                        <Trans>More</Trans>
                         <ChevronDown size={15} />
                       </TYPE.body>
                     </MoreOptionsButton>
                   )}
                 />
                 <ResponsiveButtonPrimary id="join-pool-button" as={Link} to="/add/ETH">
-                  + <Trans id="pools.buttons.newPosition">New Position</Trans>
+                  + <Trans>New Position</Trans>
                 </ResponsiveButtonPrimary>
               </ButtonRow>
             </TitleRow>
@@ -203,7 +203,7 @@ export default function Pool() {
             {closedPositions.length > 0 ? (
               <ShowInactiveToggle>
                 <TYPE.darkGray>
-                  <Trans id="pools.toggle.hideClosedPositions">Hide closed positions</Trans>
+                  <Trans>Hide closed positions</Trans>
                 </TYPE.darkGray>
                 <Toggle
                   isActive={userHideClosedPositions}
@@ -235,12 +235,12 @@ export default function Pool() {
                   <TYPE.mediumHeader color={theme.text3} textAlign="center">
                     <Inbox size={48} strokeWidth={1} style={{ marginBottom: '.5rem' }} />
                     <div>
-                      <Trans id="pools.emptyStateHint">Your V3 liquidity positions will appear here.</Trans>
+                      <Trans>Your V3 liquidity positions will appear here.</Trans>
                     </div>
                   </TYPE.mediumHeader>
                   {!account ? (
                     <ButtonPrimary style={{ marginTop: '2em', padding: '8px 16px' }} onClick={toggleWalletModal}>
-                      <Trans id="wallet.connect">Connect a wallet</Trans>
+                      <Trans>Connect a wallet</Trans>
                     </ButtonPrimary>
                   ) : (
                     <ButtonGray
@@ -249,7 +249,7 @@ export default function Pool() {
                       id="import-pool-link"
                       style={{ marginTop: '2em', padding: '8px 16px', borderRadius: '12px', width: 'fit-content' }}
                     >
-                      <Trans id="pools.buttons.migrateV2Liquidity">Migrate V2 liquidity</Trans>?&nbsp;&nbsp;
+                      <Trans>Migrate V2 liquidity</Trans>?&nbsp;&nbsp;
                       <Download size={16} />
                     </ButtonGray>
                   )}
@@ -271,7 +271,7 @@ export default function Pool() {
               >
                 <Layers size={14} style={{ marginRight: '8px' }} />
 
-                <Trans id="pools.buttons.viewV2Liquidity">View V2 Liquidity</Trans>
+                <Trans>View V2 Liquidity</Trans>
               </ButtonOutlined>
               {positions && positions.length > 0 && (
                 <ButtonOutlined
@@ -288,7 +288,7 @@ export default function Pool() {
                 >
                   <ChevronsRight size={16} style={{ marginRight: '8px' }} />
 
-                  <Trans id="pools.buttons.migrateLiquidity">Migrate Liquidity</Trans>
+                  <Trans>Migrate Liquidity</Trans>
                 </ButtonOutlined>
               )}
             </RowFixed>

src/pages/PoolFinder/index.tsx

@@ -83,9 +83,9 @@ export default function PoolFinder() {
     <LightCard padding="45px 10px">
       <Text textAlign="center">
         {!account ? (
-          <Trans id="pools.label.connectWalletToFindPools">Connect to a wallet to find pools</Trans>
+          <Trans>Connect to a wallet to find pools</Trans>
         ) : (
-          <Trans id="pools.labels.selectTokenToFindLiquidity">Select a token to find your liquidity.</Trans>
+          <Trans>Select a token to find your liquidity.</Trans>
         )}
       </Text>
     </LightCard>
@@ -98,7 +98,7 @@ export default function PoolFinder() {
         <BlueCard>
           <AutoColumn gap="10px">
             <TYPE.link fontWeight={400} color={'primaryText1'}>
-              <Trans id="pools.hint.toolHelperText">
+              <Trans>
                 <b>Tip:</b> Use this tool to find pairs that don&apos;t automatically appear in the interface.
               </Trans>
             </TYPE.link>
@@ -119,7 +119,7 @@ export default function PoolFinder() {
             </Row>
           ) : (
             <Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
-              <Trans id="currencies.search.selectToken">Select a token</Trans>
+              <Trans>Select a token</Trans>
             </Text>
           )}
         </ButtonDropdownLight>
@@ -143,7 +143,7 @@ export default function PoolFinder() {
             </Row>
           ) : (
             <Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
-              <Trans id="currencies.search.selectToken">Select a token</Trans>
+              <Trans>Select a token</Trans>
             </Text>
           )}
         </ButtonDropdownLight>
@@ -153,11 +153,11 @@ export default function PoolFinder() {
             style={{ justifyItems: 'center', backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}
           >
             <Text textAlign="center" fontWeight={500}>
-              <Trans id="pools.labels.poolFound">Pool Found!</Trans>
+              <Trans>Pool Found!</Trans>
             </Text>
             <StyledInternalLink to={`/pool`}>
               <Text textAlign="center">
-                <Trans id="pools.buttons.manage">Manage this pool.</Trans>
+                <Trans>Manage this pool.</Trans>
               </Text>
             </StyledInternalLink>
           </ColumnCenter>
@@ -171,11 +171,11 @@ export default function PoolFinder() {
               <LightCard padding="45px 10px">
                 <AutoColumn gap="sm" justify="center">
                   <Text textAlign="center">
-                    <Trans id="pools.label.noLiquidityInPoolYet">You don’t have liquidity in this pool yet.</Trans>
+                    <Trans>You don’t have liquidity in this pool yet.</Trans>
                   </Text>
                   <StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}>
                     <Text textAlign="center">
-                      <Trans id="pools.buttons.addLiquidityPoolFinder">Add liquidity.</Trans>
+                      <Trans>Add liquidity.</Trans>
                     </Text>
                   </StyledInternalLink>
                 </AutoColumn>
@@ -185,10 +185,10 @@ export default function PoolFinder() {
             <LightCard padding="45px 10px">
               <AutoColumn gap="sm" justify="center">
                 <Text textAlign="center">
-                  <Trans id="pools.error.noPoolFound">No pool found.</Trans>
+                  <Trans>No pool found.</Trans>
                 </Text>
                 <StyledInternalLink to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}>
-                  <Trans id="pools.buttons.createPool">Create pool.</Trans>
+                  <Trans>Create pool.</Trans>
                 </StyledInternalLink>
               </AutoColumn>
             </LightCard>
@@ -196,7 +196,7 @@ export default function PoolFinder() {
             <LightCard padding="45px 10px">
               <AutoColumn gap="sm" justify="center">
                 <Text textAlign="center" fontWeight={500}>
-                  <Trans id="pools.errors.invalidPair">Invalid pair.</Trans>
+                  <Trans>Invalid pair.</Trans>
                 </Text>
               </AutoColumn>
             </LightCard>
@@ -204,7 +204,7 @@ export default function PoolFinder() {
             <LightCard padding="45px 10px">
               <AutoColumn gap="sm" justify="center">
                 <Text textAlign="center">
-                  <Trans id="common.loading">Loading</Trans>
+                  <Trans>Loading</Trans>
                   <Dots />
                 </Text>
               </AutoColumn>

src/pages/RemoveLiquidity/V3.tsx

@@ -152,10 +152,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
             setTxnHash(response.hash)
             setAttemptingTxn(false)
             addTransaction(response, {
-              summary: t({
-                id: 'transactions.summary.removeLiquidityV3',
-                message: `Remove ${liquidityValue0.currency.symbol}/${liquidityValue1.currency.symbol} V3 liquidity`,
-              }),
+              summary: t`Remove ${liquidityValue0.currency.symbol}/${liquidityValue1.currency.symbol} V3 liquidity`,
             })
           })
       })
@@ -190,19 +187,16 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
     setTxnHash('')
   }, [onPercentSelectForSlider, txnHash])
 
-  const pendingText = t({
-    id: 'removeLiquidity.confirming.pending',
-    message: `Removing ${liquidityValue0?.toSignificant(6)} ${
-      liquidityValue0?.currency?.symbol
-    } and ${liquidityValue1?.toSignificant(6)} ${liquidityValue1?.currency?.symbol}`,
-  })
+  const pendingText = `Removing ${liquidityValue0?.toSignificant(6)} ${
+    liquidityValue0?.currency?.symbol
+  } and ${liquidityValue1?.toSignificant(6)} ${liquidityValue1?.currency?.symbol}`
 
   function modalHeader() {
     return (
       <AutoColumn gap={'sm'} style={{ padding: '16px' }}>
         <RowBetween align="flex-end">
           <Text fontSize={16} fontWeight={500}>
-            <Trans id="pool.pooledCurrency">Pooled {liquidityValue0?.currency?.symbol}:</Trans>
+            <Trans>Pooled {liquidityValue0?.currency?.symbol}:</Trans>
           </Text>
           <RowFixed>
             <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
@@ -213,7 +207,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
         </RowBetween>
         <RowBetween align="flex-end">
           <Text fontSize={16} fontWeight={500}>
-            <Trans id="pool.pooledCurrency">Pooled {liquidityValue1?.currency?.symbol}:</Trans>
+            <Trans>Pooled {liquidityValue1?.currency?.symbol}:</Trans>
           </Text>
           <RowFixed>
             <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
@@ -225,13 +219,11 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
         {feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) ? (
           <>
             <TYPE.italic fontSize={12} color={theme.text2} textAlign="left" padding={'8px 0 0 0'}>
-              <Trans id="removeLiquidity.hints.collectFeesEarn">
-                You will also collect fees earned from this position.
-              </Trans>
+              <Trans>You will also collect fees earned from this position.</Trans>
             </TYPE.italic>
             <RowBetween>
               <Text fontSize={16} fontWeight={500}>
-                <Trans id="removeLiquidity.label.feesEarned">{feeValue0?.currency?.symbol} Fees Earned:</Trans>
+                <Trans>{feeValue0?.currency?.symbol} Fees Earned:</Trans>
               </Text>
               <RowFixed>
                 <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
@@ -242,7 +234,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
             </RowBetween>
             <RowBetween>
               <Text fontSize={16} fontWeight={500}>
-                <Trans id="removeLiquidity.label.feesEarned">{feeValue1?.currency?.symbol} Fees Earned:</Trans>
+                <Trans>{feeValue1?.currency?.symbol} Fees Earned:</Trans>
               </Text>
               <RowFixed>
                 <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
@@ -254,7 +246,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
           </>
         ) : null}
         <ButtonPrimary mt="16px" onClick={burn}>
-          <Trans id="buttons.remove">Remove</Trans>
+          <Trans>Remove</Trans>
         </ButtonPrimary>
       </AutoColumn>
     )
@@ -269,7 +261,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
         hash={txnHash ?? ''}
         content={() => (
           <ConfirmationModalContent
-            title={t({ id: 'removeLiquidity.labels.removeLiquidity', message: 'Remove Liquidity' })}
+            title={t`Remove Liquidity`}
             onDismiss={handleDismissConfirmation}
             topContent={modalHeader}
           />
@@ -304,24 +296,24 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
               <LightCard>
                 <AutoColumn gap="md">
                   <TYPE.main fontWeight={400}>
-                    <Trans id="labels.amount">Amount</Trans>
+                    <Trans>Amount</Trans>
                   </TYPE.main>
                   <RowBetween>
                     <ResponsiveHeaderText>
-                      <Trans id="removeLiquidity.labels.percentForSlider">{percentForSlider}%</Trans>
+                      <Trans>{percentForSlider}%</Trans>
                     </ResponsiveHeaderText>
                     <AutoRow gap="4px" justify="flex-end">
                       <SmallMaxButton onClick={() => onPercentSelect(25)} width="20%">
-                        <Trans id="number.25Percent">25%</Trans>
+                        <Trans>25%</Trans>
                       </SmallMaxButton>
                       <SmallMaxButton onClick={() => onPercentSelect(50)} width="20%">
-                        <Trans id="number.50Percent">50%</Trans>
+                        <Trans>50%</Trans>
                       </SmallMaxButton>
                       <SmallMaxButton onClick={() => onPercentSelect(75)} width="20%">
-                        <Trans id="number.75Percent">75%</Trans>
+                        <Trans>75%</Trans>
                       </SmallMaxButton>
                       <SmallMaxButton onClick={() => onPercentSelect(100)} width="20%">
-                        <Trans id="labels.max">Max</Trans>
+                        <Trans>Max</Trans>
                       </SmallMaxButton>
                     </AutoRow>
                   </RowBetween>
@@ -332,7 +324,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
                 <AutoColumn gap="md">
                   <RowBetween>
                     <Text fontSize={16} fontWeight={500}>
-                      <Trans id="pool.pooledCurrency">Pooled {liquidityValue0?.currency?.symbol}:</Trans>
+                      <Trans>Pooled {liquidityValue0?.currency?.symbol}:</Trans>
                     </Text>
                     <RowFixed>
                       <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
@@ -343,7 +335,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
                   </RowBetween>
                   <RowBetween>
                     <Text fontSize={16} fontWeight={500}>
-                      <Trans id="pool.pooledCurrency">Pooled {liquidityValue1?.currency?.symbol}:</Trans>
+                      <Trans>Pooled {liquidityValue1?.currency?.symbol}:</Trans>
                     </Text>
                     <RowFixed>
                       <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
@@ -357,9 +349,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
                       <Break />
                       <RowBetween>
                         <Text fontSize={16} fontWeight={500}>
-                          <Trans id="removeLiquidity.label.feesEarned">
-                            {feeValue0?.currency?.symbol} Fees Earned:
-                          </Trans>
+                          <Trans>{feeValue0?.currency?.symbol} Fees Earned:</Trans>
                         </Text>
                         <RowFixed>
                           <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
@@ -392,7 +382,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
                 liquidityValue1.currency.wrapped.equals(WETH9[liquidityValue1.currency.chainId])) ? (
                 <RowBetween>
                   <TYPE.main>
-                    <Trans id="pools.labels.collectFeesAsWETH">Collect as WETH</Trans>
+                    <Trans>Collect as WETH</Trans>
                   </TYPE.main>
                   <Toggle
                     id="receive-as-weth"
@@ -409,11 +399,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
                     disabled={removed || percent === 0 || !liquidityValue0}
                     onClick={() => setShowConfirm(true)}
                   >
-                    {removed ? (
-                      <Trans id="labels.inactive">Inactive</Trans>
-                    ) : (
-                      error ?? <Trans id="labels.remove">Remove</Trans>
-                    )}
+                    {removed ? <Trans>Inactive</Trans> : error ?? <Trans>Remove</Trans>}
                   </ButtonConfirmed>
                 </AutoColumn>
               </div>