update copy

public/locales/en.json

@@ -89,7 +89,7 @@
   "toleranceExplanation": "Lowering this limit decreases your risk of frontrunning. However, this makes more likely that your transaction will fail due to normal price movements.",
   "tokenSearchPlaceholder": "Search name or paste address",
   "selectFee": "Select Fee",
-  "selectLiquidityRange": "Select Price Range",
+  "selectLiquidityRange": "Set Price Range",
   "selectPool": "Select Fee Tier",
   "depositAmounts": "Deposit Amounts",
   "fee": "fee",
@@ -97,8 +97,8 @@
   "percent": "Percent",
   "rate": "Rate",
   "currentRate": "Current {{label}} Price:",
-  "inactiveRangeWarning": "Your position will not be active or earn fees until the selected rates come into range.",
-  "invalidRangeWarning": "Invalid Range entered. Lower range must be lower than upper range.",
+  "inactiveRangeWarning": "Your position will not earn fees or be used in trades until the market price moves into your range.",
+  "invalidRangeWarning": "Invalid range selected. The min price must be lower than the max price.",
   "connectWallet": "Connect Wallet",
   "unsupportedAsset": "Unsupported Asset",
   "feePool": "Fee Pool",
@@ -106,11 +106,11 @@
   "rebalanceMessage": "Your underlying tokens will be automatically rebalanced when the rate of the pool changes and may be different when you withdraw the position.",
   "addEarnHelper": "You will earn fees from trades proportional to your share of the pool.",
   "learnMoreAboutFess": " Learn more about earning fees.",
-  "selectAPool": "Select a pool to provide liquidity to.",
+  "selectAPool": "Choose the best fee tier for your selected pair.",
   "poolType": "Select a fee tier based on your preferred liquidity provider fee.",
   "rangeWarning": "Your liquidity will only be active and earning fees when the rate of the pool is within this price range.",
   "chooseLiquidityAmount": "Choose an amount of tokens to open this liquidity position. If you don’t have enough tokens you can trade for them with a Swap.",
   "inputTokenDynamic": "Input {{label}}",
-  "selectStartingPrice": "Select Starting Price",
+  "selectStartingPrice": "Set Starting Price",
   "newPoolPrice": "Select the market rate for the tokens being added."
 }

src/components/Badge/RangeBadge.tsx

@@ -40,7 +40,7 @@ export default function RangeBadge({ inRange }: { inRange?: boolean }) {
     <BadgeWrapper>
       {inRange ? (
         <MouseoverTooltip
-          text={`The price of this pair is within your selected range. Your positions is earning fees.`}
+          text={`The price of this pair is within your selected range. Your position is currently earning fees.`}
         >
           <Badge variant={BadgeVariant.DEFAULT}>
             <ActiveDot /> &nbsp;
@@ -49,7 +49,7 @@ export default function RangeBadge({ inRange }: { inRange?: boolean }) {
         </MouseoverTooltip>
       ) : (
         <MouseoverTooltip
-          text={`The price of this pair is outside of your selected range. Your positions is not earning fees.`}
+          text={`The price of this pair is outside of your selected range. Your position is not currently earning fees. `}
         >
           <Badge variant={BadgeVariant.WARNING}>
             <AlertCircle width={14} height={14} />

src/components/CurrencyInputPanel/index.tsx

@@ -203,7 +203,9 @@ export default function CurrencyInputPanel({
         <FixedContainer>
           <AutoColumn gap="sm" justify="center">
             <Lock />
-            <TYPE.label fontSize="12px">Single-asset deposit only, price out of range.</TYPE.label>
+            <TYPE.label fontSize="12px" textAlign="center">
+              The market price is outside your specified price range. Single-asset deposit only.
+            </TYPE.label>
           </AutoColumn>
         </FixedContainer>
       )}

src/components/FeeSelector/index.tsx

@@ -41,7 +41,7 @@ export default function FeeSelector({
             <AutoColumn gap="sm" justify="flex-start">
               <ResponsiveText>0.05% {t('fee')}</ResponsiveText>
               <TYPE.main fontWeight={400} fontSize="12px" textAlign="left">
-                Optimized for stable assets.
+                Best for stable pairs.
               </TYPE.main>
             </AutoColumn>
           </ButtonRadioChecked>
@@ -53,7 +53,7 @@ export default function FeeSelector({
             <AutoColumn gap="sm" justify="flex-start">
               <ResponsiveText>0.3% {t('fee')}</ResponsiveText>
               <TYPE.main fontWeight={400} fontSize="12px" textAlign="left">
-                The classic Uniswap pool fee.
+                Best for most pairs.
               </TYPE.main>
             </AutoColumn>
           </ButtonRadioChecked>
@@ -65,7 +65,7 @@ export default function FeeSelector({
             <AutoColumn gap="sm" justify="flex-start">
               <ResponsiveText>1% {t('fee')}</ResponsiveText>
               <TYPE.main fontWeight={400} fontSize="12px" textAlign="left">
-                Best for volatile assets.
+                Best for exotic pairs.
               </TYPE.main>
             </AutoColumn>
           </ButtonRadioChecked>

src/components/PositionListItem/index.tsx

@@ -228,12 +228,6 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
     ;[priceLower, priceUpper, base, quote] = [priceUpper?.invert(), priceLower?.invert(), quote, base]
   }
 
-  const quotePrice = useMemo(() => {
-    return manuallyInverted
-      ? position?.pool.priceOf(position?.pool.token0)
-      : position?.pool.priceOf(position?.pool.token1)
-  }, [manuallyInverted, position?.pool])
-
   return (
     <Row to={positionSummaryLink}>
       <RowFixed>
@@ -250,11 +244,7 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
         <BadgeWrapper>
           {outOfRange ? (
             <MouseoverTooltip
-              text={`The price of this pair is outside of your selected range. Your positions is not earning fees. Current price: ${quotePrice?.toSignificant(
-                6
-              )} ${manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} / ${
-                manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol
-              }`}
+              text={`The price of this pair is outside of your selected range. Your position is not currently earning fees.`}
             >
               <Badge variant={BadgeVariant.WARNING}>
                 <AlertCircle width={14} height={14} style={{ marginRight: '' }} />
@@ -264,11 +254,7 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
             </MouseoverTooltip>
           ) : (
             <MouseoverTooltip
-              text={`The price of this pair is within your selected range. Your positions is earning fees. Current price: ${quotePrice?.toSignificant(
-                6
-              )} ${manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} / ${
-                manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol
-              }`}
+              text={`The price of this pair is within your selected range. Your position is currently earning fees.`}
             >
               <Badge variant={BadgeVariant.DEFAULT}>
                 <ActiveDot /> &nbsp;

src/components/PositionPreview/index.tsx

@@ -113,30 +113,28 @@ export const PositionPreview = ({
         <RowBetween>
           <LightCard width="48%" padding="8px">
             <AutoColumn gap="4px" justify="center">
-              <TYPE.main fontSize="12px">Min price</TYPE.main>
+              <TYPE.main fontSize="12px">Min Price</TYPE.main>
               <TYPE.mediumHeader textAlign="center">{`${priceLower.toSignificant(5)}`}</TYPE.mediumHeader>
               <TYPE.main
                 textAlign="center"
                 fontSize="12px"
               >{` ${quoteCurrency.symbol}/${baseCurrency.symbol}`}</TYPE.main>
               <TYPE.small textAlign="center" color={theme.text3} style={{ marginTop: '4px' }}>
-                Position will be <CurrencyLogo currency={baseCurrency} size="10px" /> 100% {baseCurrency?.symbol} at
-                this price.
+                Your position will be 100% composed of {baseCurrency?.symbol} at this price
               </TYPE.small>
             </AutoColumn>
           </LightCard>
 
           <LightCard width="48%" padding="8px">
             <AutoColumn gap="4px" justify="center">
-              <TYPE.main fontSize="12px">Max price</TYPE.main>
+              <TYPE.main fontSize="12px">Max Price</TYPE.main>
               <TYPE.mediumHeader textAlign="center">{`${priceUpper.toSignificant(5)}`}</TYPE.mediumHeader>
               <TYPE.main
                 textAlign="center"
                 fontSize="12px"
               >{` ${quoteCurrency.symbol}/${baseCurrency.symbol}`}</TYPE.main>
               <TYPE.small textAlign="center" color={theme.text3} style={{ marginTop: '4px' }}>
-                Position will be <CurrencyLogo currency={quoteCurrency} size="10px" /> 100% {quoteCurrency?.symbol} at
-                this price.
+                Your position will be 100% composed of {quoteCurrency?.symbol} at this price
               </TYPE.small>
             </AutoColumn>
           </LightCard>

src/components/RangeSelector/index.tsx

@@ -49,7 +49,7 @@ export default function RangeSelector({
         increment={isSorted ? getIncrementLower : getDecrementUpper}
         feeAmount={feeAmount}
         label={leftPrice ? `${currencyB?.symbol}` : '-'}
-        title={'Min price'}
+        title={'Min Price'}
         tokenA={currencyA?.symbol}
         tokenB={currencyB?.symbol}
       />
@@ -63,7 +63,7 @@ export default function RangeSelector({
         label={rightPrice ? `${currencyB?.symbol}` : '-'}
         tokenA={currencyA?.symbol}
         tokenB={currencyB?.symbol}
-        title={'Max price'}
+        title={'Max Price'}
       />
     </RowBetween>
   )

src/components/Settings/index.tsx

@@ -205,7 +205,7 @@ export default function SettingsTab() {
                 <TYPE.black fontWeight={400} fontSize={14} color={theme.text2}>
                   Toggle Expert Mode
                 </TYPE.black>
-                <QuestionHelper text="Bypasses confirmation modals and allows high slippage trades. Use at your own risk." />
+                <QuestionHelper text="Allow high price impact trades and skip the confirm screen. Use at your own risk." />
               </RowFixed>
               <Toggle
                 id="toggle-expert-mode-button"

src/components/TransactionSettings/index.tsx

@@ -228,7 +228,7 @@ export default function SlippageTabs({ rawSlippage, setRawSlippage, deadline, se
           <TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
             Transaction deadline
           </TYPE.black>
-          <QuestionHelper text="Your transaction will revert if it is pending for more than this long." />
+          <QuestionHelper text="Your transaction will revert if it is pending for more than this period of time." />
         </RowFixed>
         <RowFixed>
           <OptionCustom style={{ width: '80px' }} tabIndex={-1}>

src/components/swap/UnsupportedCurrencyFooter.tsx

@@ -89,8 +89,8 @@ export default function UnsupportedCurrencyFooter({
             })}
             <AutoColumn gap="lg">
               <TYPE.body fontWeight={500}>
-                Some assets are not available through this interface because they may not work well with our smart
-                contract or we are unable to allow trading for legal reasons.
+                Some assets are not available through this interface because they may not work well with the smart
+                contracts or we are unable to allow trading for legal reasons.
               </TYPE.body>
             </AutoColumn>
           </AutoColumn>

src/pages/AddLiquidity/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useContext, useMemo, useState, useEffect } from 're
 import { TransactionResponse } from '@ethersproject/providers'
 import { Currency, TokenAmount, ETHER, currencyEquals } from '@uniswap/sdk-core'
 import { WETH9 } from '@uniswap/sdk-core'
-import { AlertTriangle } from 'react-feather'
+import { AlertTriangle, AlertCircle } from 'react-feather'
 import ReactGA from 'react-ga'
 import { useV3NFTPositionManagerContract } from '../../hooks/useContract'
 import { RouteComponentProps } from 'react-router-dom'
@@ -391,7 +391,7 @@ export default function AddLiquidity({
               <>
                 <AutoColumn gap="md">
                   <RowBetween paddingBottom="20px">
-                    <TYPE.label>Select a pair</TYPE.label>
+                    <TYPE.label>Select pair</TYPE.label>
                     <ButtonText onClick={clearAll}>
                       <TYPE.blue fontSize="12px">Clear All</TYPE.blue>
                     </ButtonText>
@@ -443,9 +443,6 @@ export default function AddLiquidity({
                 {noLiquidity && (
                   <DynamicSection disabled={!currencyA || !currencyB}>
                     <AutoColumn gap="md">
-                      <BlueCard width="100%" padding="1rem">
-                        You are the first to provide liquidity to this pool.
-                      </BlueCard>
                       <RowBetween>
                         <TYPE.label>{t('selectStartingPrice')}</TYPE.label>
                         {baseCurrency && quoteCurrency ? (
@@ -482,6 +479,27 @@ export default function AddLiquidity({
                           )}
                         </TYPE.main>
                       </RowBetween>
+                      <BlueCard
+                        style={{
+                          display: 'flex',
+                          flexDirection: 'column',
+                          alignItems: 'center',
+                          padding: ' 1.5rem 1.25rem',
+                        }}
+                      >
+                        <AlertCircle color={theme.text1} size={32} style={{ marginBottom: '12px', opacity: 0.8 }} />
+                        <TYPE.body
+                          fontSize={14}
+                          style={{ marginBottom: 8, fontWeight: 500, opacity: 0.8 }}
+                          textAlign="center"
+                        >
+                          You are the first liquidity provider for this Uniswap V3 pool.
+                        </TYPE.body>
+
+                        <TYPE.body fontWeight={500} textAlign="center" fontSize={14} style={{ opacity: 0.8 }}>
+                          The transaction cost will be much higher as it includes the gas to create the pool.
+                        </TYPE.body>
+                      </BlueCard>
                     </AutoColumn>
                   </DynamicSection>
                 )}
@@ -504,9 +522,11 @@ export default function AddLiquidity({
                     ) : null}
                   </RowBetween>
                   <TYPE.main fontSize={14} fontWeight={400} style={{ marginBottom: '.5rem', lineHeight: '125%' }}>
-                    Your liquidity will only be active and earning fees when the price of the pool is within this price
-                    range.{' '}
-                    <ExternalLink href={''} style={{ fontSize: '14px' }}>
+                    Your liquidity will only earn fees when the market price of the pair is within your range.
+                    <ExternalLink
+                      href={'https://docs.uniswap.org/concepts/introduction/liquidity-user-guide'}
+                      style={{ fontSize: '14px' }}
+                    >
                       Need help picking a range?
                     </ExternalLink>
                   </TYPE.main>

src/pages/MigrateV2/MigrateV2Pair.tsx

@@ -400,16 +400,19 @@ function V2PairMigration({
           {noLiquidity && (
             <BlueCard style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
               <AlertCircle color={theme.text1} style={{ marginBottom: '12px', opacity: 0.8 }} />
-              <TYPE.body fontSize={14} style={{ marginBottom: 8, fontWeight: 400, opacity: 0.8 }} textAlign="center">
-                You are the first liquidity provider for this Uniswap V3 pool. Your liquidity will be migrated at the
-                current {isNotUniswap ? 'SushiSwap' : 'V2'} price. Your transaction cost will include the gas to create
-                the pool.
+              <TYPE.body fontSize={14} style={{ marginBottom: 8, fontWeight: 500, opacity: 0.8 }} textAlign="center">
+                You are the first liquidity provider for this Uniswap V3 pool. Your liquidity will migrate at the
+                current {isNotUniswap ? 'SushiSwap' : 'V2'} price.
+              </TYPE.body>
+
+              <TYPE.body fontWeight={500} textAlign="center" fontSize={14} style={{ marginTop: '8px', opacity: 0.8 }}>
+                Your transaction cost will be much higher as it includes the gas to create the pool.
               </TYPE.body>
 
               {v2SpotPrice && (
-                <AutoColumn gap="8px">
+                <AutoColumn gap="8px" style={{ marginTop: '12px' }}>
                   <RowBetween>
-                    <TYPE.body fontWeight={600} fontSize={14}>
+                    <TYPE.body fontWeight={500} fontSize={14}>
                       {isNotUniswap ? 'SushiSwap' : 'V2'} {invertPrice ? currency1.symbol : currency0.symbol} Price:{' '}
                       {invertPrice
                         ? `${v2SpotPrice?.invert()?.toSignificant(6)} ${currency0.symbol}`
@@ -454,8 +457,9 @@ function V2PairMigration({
                 </RowBetween>
               </AutoColumn>
               <TYPE.body fontSize={14} style={{ marginTop: 8, fontWeight: 400 }}>
-                You should only deposit liquidity into Uniswap V3 at a price you believe is correct. If the price seems
-                incorrect, you can either make a swap to move the price or wait for someone else to do so.
+                You should only deposit liquidity into Uniswap V3 at a price you believe is correct. <br />
+                If the price seems incorrect, you can either make a swap to move the price or wait for someone else to
+                do so.
               </TYPE.body>
             </YellowCard>
           ) : !noLiquidity && v3SpotPrice ? (
@@ -551,9 +555,9 @@ function V2PairMigration({
                   {approval === ApprovalState.PENDING ? (
                     <Dots>Approving</Dots>
                   ) : approval === ApprovalState.APPROVED || signatureData !== null ? (
-                    'Approved'
+                    'Allowed'
                   ) : (
-                    'Unlock LP tokens for migration'
+                    'Allow LP token migration'
                   )}
                 </ButtonConfirmed>
               </AutoColumn>
@@ -650,7 +654,7 @@ export default function MigrateV2Pair({
         <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
           <BackArrow to="/migrate/v2" />
           <TYPE.mediumHeader>Migrate V2 Liquidity</TYPE.mediumHeader>
-          <div>
+          <div style={{ opacity: 0 }}>
             <QuestionHelper text="Migrate your liquidity tokens from Uniswap V2 to Uniswap V3." />
           </div>
         </AutoRow>

src/pages/MigrateV2/index.tsx

@@ -158,7 +158,7 @@ export default function MigrateV2() {
 
         <AutoColumn justify={'center'} gap="md">
           <Text textAlign="center" fontSize={14} style={{ padding: '.5rem 0 .5rem 0' }}>
-            {"Don't see a pool you joined?"}{' '}
+            {'Don’t see one of your v2 positions?'}{' '}
             <StyledInternalLink id="import-pool-link" to={'/find?origin=/migrate/v2'}>
               {'Import it.'}
             </StyledInternalLink>

src/pages/Pool/CTACards.tsx

@@ -100,9 +100,11 @@ const HeaderText = styled(TYPE.label)`
 
 const ResponsiveColumn = styled(AutoColumn)`
   gap: 12px;
+  height: 100%;
   ${({ theme }) => theme.mediaWidth.upToMedium`
     gap: 8px;
   `};
+  justify-content: space-between;
 `
 
 const StyledImage = styled.img`
@@ -118,13 +120,11 @@ export default function CTACards() {
 
   return (
     <CTASection>
-      <CTA1 href={''}>
+      <CTA1 href={'https://docs.uniswap.org/concepts/introduction/liquidity-user-guide'}>
         <ResponsiveColumn>
-          <HeaderText>{t('What’s new in V3 Liquidity Pools?')}</HeaderText>
+          <HeaderText>{t('Uniswap V3 is here!')}</HeaderText>
           <TYPE.body fontWeight={300} style={{ alignItems: 'center', display: 'flex', maxWidth: '80%' }}>
-            {t(
-              'Learn all about concentrated liquidity and get informed about how to choose ranges that make sense for you.'
-            )}
+            {t('Check out our v3 LP walkthrough and migration guides.')}
           </TYPE.body>
           <RowBetween align="flex-end">
             <HeaderText>{t('↗')}</HeaderText>
@@ -132,14 +132,15 @@ export default function CTACards() {
           </RowBetween>
         </ResponsiveColumn>
       </CTA1>
-      <CTA2 href={''}>
-        {/* <TextureBG /> */}
+      <CTA2 href={'https://info.uniswap.org/#/pools'}>
         <ResponsiveColumn>
-          <HeaderText>{t('Top pools')}</HeaderText>
-          <TYPE.body fontWeight={300} style={{ alignItems: 'center', display: 'flex' }}>
-            {t('Explore the top pools with Uniswap Analytics.')}
+          <AutoColumn gap="0px">
+            <HeaderText style={{ alignSelf: 'flex-start' }}>{t('Top pools')}</HeaderText>
+            <TYPE.body fontWeight={300} style={{ alignSelf: 'flex-start' }}>
+              {t('Explore popular pools on Uniswap Analytics.')}
             </TYPE.body>
-          <HeaderText>{t('↗')}</HeaderText>
+          </AutoColumn>
+          <HeaderText style={{ alignSelf: 'flex-end' }}>{t('↗')}</HeaderText>
         </ResponsiveColumn>
       </CTA2>
     </CTASection>

src/pages/Pool/PositionPage.tsx

@@ -387,7 +387,7 @@ export function PositionPage({
         hash={collectMigrationHash ?? ''}
         content={() => (
           <ConfirmationModalContent
-            title={'Collect fees'}
+            title={'Claim fees'}
             onDismiss={() => setShowConfirm(false)}
             topContent={modalHeader}
           />
@@ -397,7 +397,7 @@ export function PositionPage({
       <AutoColumn gap="md">
         <AutoColumn gap="sm">
           <Link style={{ textDecoration: 'none', width: 'fit-content', marginBottom: '0.5rem' }} to="/pool">
-            <HoverText>{'← Back to overview'}</HoverText>
+            <HoverText>{'← Back to Pools Overview'}</HoverText>
           </Link>
           <ResponsiveRow>
             <RowFixed>
@@ -534,7 +534,7 @@ export function PositionPage({
                 <AutoColumn gap="md">
                   <RowBetween style={{ alignItems: 'flex-start' }}>
                     <AutoColumn gap="md">
-                      <Label>Fees Earned</Label>
+                      <Label>Unclaimed fees</Label>
                       {fiatValueOfFees?.greaterThan(new Fraction(1, 100)) ? (
                         <TYPE.largeHeader color={theme.green1} fontSize="36px" fontWeight={500}>
                           ${fiatValueOfFees.toFixed(2)}

src/pages/RemoveLiquidity/index.tsx

@@ -444,7 +444,7 @@ export default function RemoveLiquidity({
             <LightCard>
               <AutoColumn gap="20px">
                 <RowBetween>
-                  <Text fontWeight={500}>Amount</Text>
+                  <Text fontWeight={500}>Remove Amount</Text>
                   <ClickableText
                     fontWeight={500}
                     onClick={() => {

src/pages/Swap/index.tsx

@@ -522,8 +522,8 @@ export default function Swap({ history }: RouteComponentProps) {
                           />
                           {/* we need to shorten this string on mobile */}
                           {approvalState === ApprovalState.APPROVED || signatureState === UseERC20PermitState.SIGNED
-                            ? currencies[Field.INPUT]?.symbol + ' unlocked for trading.'
-                            : 'Allow Uniswap to spend your ' + currencies[Field.INPUT]?.symbol}
+                            ? 'You can now trade ' + currencies[Field.INPUT]?.symbol
+                            : 'Allow the Uniswap Protocol to use your UNI ' + currencies[Field.INPUT]?.symbol}
                         </span>
                         {approvalState === ApprovalState.PENDING ? (
                           <Loader stroke="white" />
@@ -533,9 +533,9 @@ export default function Swap({ history }: RouteComponentProps) {
                         ) : (
                           <MouseoverTooltip
                             text={
-                              'You cannot swap until you give Uniswap permission to spend your ' +
+                              'You must give the Uniswap smart contracts permission to use your' +
                               currencies[Field.INPUT]?.symbol +
-                              '. You only have to do this once per token and only when you are selling a token for the first time.'
+                              '. You only have to do this once per token.'
                             }
                           >
                             <HelpCircle size="20" color={'white'} />
@@ -567,7 +567,7 @@ export default function Swap({ history }: RouteComponentProps) {
                       error={isValid && priceImpactSeverity > 2}
                     >
                       <Text fontSize={16} fontWeight={500}>
-                        {priceImpactTooHigh ? `Price Impact High` : `Swap${priceImpactSeverity > 2 ? ' Anyway' : ''}`}
+                        {priceImpactTooHigh ? `High Price Impact` : `Swap${priceImpactSeverity > 2 ? ' Anyway' : ''}`}
                       </Text>
                     </ButtonError>
                   </AutoColumn>