Update migration styles (#78)

* re-work migrate page

* Layout Tweaks

* cleanup
Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>

src/components/Badge/index.tsx

@@ -7,7 +7,9 @@ export enum BadgeVariant {
   DEFAULT = 'DEFAULT',
   NEGATIVE = 'NEGATIVE',
   POSITIVE = 'POSITIVE',
+  PRIMARY = 'PRIMARY',
   WARNING = 'WARNING',
+
   WARNING_OUTLINE = 'WARNING_OUTLINE',
 }
 
@@ -21,6 +23,8 @@ function pickBackgroundColor(variant: BadgeVariant | undefined, theme: DefaultTh
       return theme.error
     case BadgeVariant.POSITIVE:
       return theme.success
+    case BadgeVariant.PRIMARY:
+      return theme.primary1
     case BadgeVariant.WARNING:
       return theme.warning
     case BadgeVariant.WARNING_OUTLINE:

src/components/InputStepCounter/InputStepCounter.tsx

@@ -38,7 +38,7 @@ const FocusedOutlineCard = styled(OutlineCard)<{ active?: boolean; pulsing?: boo
 `
 
 const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
-  background-color: ${({ theme }) => theme.bg0};
+  background-color: transparent;
   text-align: left;
   margin-right: 2px;
 `

src/components/PositionCard/Sushi.tsx

@@ -17,6 +17,7 @@ import DoubleCurrencyLogo from '../DoubleLogo'
 import { RowFixed, AutoRow } from '../Row'
 import { Dots } from '../swap/styleds'
 import { FixedHeightRow } from '.'
+import Badge, { BadgeVariant } from 'components/Badge'
 
 const StyledPositionCard = styled(LightCard)<{ bgColor: any }>`
   border: none;
@@ -49,7 +50,8 @@ export default function SushiPositionCard({ tokenA, tokenB, liquidityToken, bord
             <Text fontWeight={500} fontSize={20}>
               {!currency0 || !currency1 ? <Dots>Loading</Dots> : `${currency0.symbol}/${currency1.symbol}`}
             </Text>
-            (Sushi)
+
+            <Badge variant={BadgeVariant.WARNING}>Sushi</Badge>
           </AutoRow>
           <RowFixed gap="8px">
             <ButtonEmpty

src/pages/MigrateV2/MigrateV2Pair.tsx

@@ -21,7 +21,7 @@ import { BodyWrapper } from '../AppBody'
 import { V3_MIGRATOR_ADDRESSES } from 'constants/v3'
 import { PoolState, usePool } from 'hooks/usePools'
 import { FeeAmount, Pool, Position, priceToClosestTick, TickMath } from '@uniswap/v3-sdk'
-import { LightCard, PinkCard, YellowCard } from 'components/Card'
+import { BlueCard, DarkGreyCard, LightCard, YellowCard } from 'components/Card'
 import { ApprovalState, useApproveCallback } from 'hooks/useApproveCallback'
 import { Dots } from 'components/swap/styleds'
 import { ButtonConfirmed } from 'components/Button'
@@ -33,7 +33,7 @@ import { useIsTransactionPending, useTransactionAdder } from 'state/transactions
 import { useDerivedMintInfo, useMintActionHandlers, useRangeHopCallbacks } from 'state/mint/hooks'
 import { Bound } from 'state/mint/actions'
 import { useTranslation } from 'react-i18next'
-import { AlertTriangle, ChevronDown } from 'react-feather'
+import { AlertCircle, AlertTriangle, ArrowDown } from 'react-feather'
 import FeeSelector from 'components/FeeSelector'
 import RangeSelector from 'components/RangeSelector'
 import RateToggle from 'components/RateToggle'
@@ -42,6 +42,8 @@ import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
 import { formatTokenAmount } from 'utils/formatTokenAmount'
 import useTheme from 'hooks/useTheme'
 import { unwrappedToken } from 'utils/wrappedCurrency'
+import DoubleCurrencyLogo from 'components/DoubleLogo'
+import Badge, { BadgeVariant } from 'components/Badge'
 
 const ZERO = JSBI.BigInt(0)
 
@@ -58,30 +60,31 @@ function LiquidityInfo({ token0Amount, token1Amount }: { token0Amount: TokenAmou
   const currency1 = unwrappedToken(token1Amount.token)
 
   return (
-    <>
-      <RowBetween my="1rem">
+    <AutoColumn gap="8px">
+      <RowBetween>
+        <RowFixed>
+          <CurrencyLogo size="20px" style={{ marginRight: '8px' }} currency={currency0} />
           <Text fontSize={16} fontWeight={500}>
-          Pooled {currency0.symbol}:
+            {currency0.symbol}
           </Text>
-        <RowFixed>
-          <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+        </RowFixed>
+        <Text fontSize={16} fontWeight={500}>
           <FormattedCurrencyAmount currencyAmount={token0Amount} />
         </Text>
-          <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency0} />
-        </RowFixed>
       </RowBetween>
-      <RowBetween mb="1rem">
+      <RowBetween>
+        <RowFixed>
+          <CurrencyLogo size="20px" style={{ marginRight: '8px' }} currency={currency1} />
           <Text fontSize={16} fontWeight={500}>
-          Pooled {currency1.symbol}:
+            {currency1.symbol}
           </Text>
-        <RowFixed>
-          <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+        </RowFixed>
+
+        <Text fontSize={16} fontWeight={500}>
           <FormattedCurrencyAmount currencyAmount={token1Amount} />
         </Text>
-          <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency1} />
-        </RowFixed>
       </RowBetween>
-    </>
+    </AutoColumn>
   )
 }
 
@@ -310,7 +313,7 @@ function V2PairMigration({
       .then((response: TransactionResponse) => {
         ReactGA.event({
           category: 'Migrate',
-          action: 'V2->V3',
+          action: `${isNotUniswap ? 'SushiSwap' : 'V2'}->V3`,
           label: `${currency0.symbol}/${currency1.symbol}`,
         })
 
@@ -323,6 +326,7 @@ function V2PairMigration({
         setConfirmingMigration(false)
       })
   }, [
+    isNotUniswap,
     migrator,
     noLiquidity,
     blockTimestamp,
@@ -349,7 +353,8 @@ function V2PairMigration({
   return (
     <AutoColumn gap="20px">
       <TYPE.body my={9} style={{ fontWeight: 400 }}>
-        This tool will safely migrate your V2 liquidity to V3. The process is completely trustless thanks to the{' '}
+        This tool will safely migrate your {isNotUniswap ? 'SushiSwap' : 'V2'} liquidity to V3. The process is
+        completely trustless thanks to the{' '}
         {chainId && migratorAddress && (
           <ExternalLink href={getEtherscanLink(chainId, migratorAddress, 'address')}>
             <TYPE.blue display="inline">Uniswap migration contract↗</TYPE.blue>
@@ -359,43 +364,69 @@ function V2PairMigration({
       </TYPE.body>
 
       <LightCard>
+        <AutoColumn gap="lg">
+          <RowBetween>
+            <RowFixed style={{ marginLeft: '8px' }}>
+              <DoubleCurrencyLogo currency0={currency0} currency1={currency1} margin={false} size={20} />
+              <TYPE.mediumHeader style={{ marginLeft: '8px' }}>
+                {currency0.symbol}/{currency1.symbol} LP Tokens
+              </TYPE.mediumHeader>
+            </RowFixed>
+            <Badge variant={BadgeVariant.WARNING}>{isNotUniswap ? 'Sushi' : 'V2'}</Badge>
+          </RowBetween>
           <LiquidityInfo token0Amount={token0Value} token1Amount={token1Value} />
+        </AutoColumn>
       </LightCard>
 
       <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <ChevronDown size={24} />
+        <ArrowDown size={24} />
       </div>
 
+      <LightCard>
+        <AutoColumn gap="lg">
+          <RowBetween>
+            <RowFixed style={{ marginLeft: '8px' }}>
+              <DoubleCurrencyLogo currency0={currency0} currency1={currency1} margin={false} size={20} />
+              <TYPE.mediumHeader style={{ marginLeft: '8px' }}>
+                {currency0.symbol}/{currency1.symbol} LP NFT
+              </TYPE.mediumHeader>
+            </RowFixed>
+            <Badge variant={BadgeVariant.PRIMARY}>V3</Badge>
+          </RowBetween>
+
+          <FeeSelector feeAmount={feeAmount} handleFeePoolSelect={setFeeAmount} />
           {noLiquidity && (
-        <PinkCard>
-          <TYPE.body style={{ marginBottom: 8, fontWeight: 400 }}>
+            <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 V2 price. Your transaction cost will include the gas to create the pool.
+                current {isNotUniswap ? 'SushiSwap' : 'V2'} price. Your transaction cost will include the gas to create
+                the pool.
               </TYPE.body>
 
+              {v2SpotPrice && (
                 <AutoColumn gap="8px">
                   <RowBetween>
-              <TYPE.body>V2 {invertPrice ? currency1.symbol : currency0.symbol} Price:</TYPE.body>
-              <TYPE.black>
+                    <TYPE.body fontWeight={600} fontSize={14}>
+                      {isNotUniswap ? 'SushiSwap' : 'V2'} {invertPrice ? currency1.symbol : currency0.symbol} Price:{' '}
                       {invertPrice
                         ? `${v2SpotPrice?.invert()?.toSignificant(6)} ${currency0.symbol}`
                         : `${v2SpotPrice?.toSignificant(6)} ${currency1.symbol}`}
-              </TYPE.black>
+                    </TYPE.body>
                   </RowBetween>
                 </AutoColumn>
-        </PinkCard>
+              )}
+            </BlueCard>
           )}
 
-      {largePriceDifference && (
+          {largePriceDifference ? (
             <YellowCard>
-          <TYPE.body style={{ marginBottom: 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.
-          </TYPE.body>
               <AutoColumn gap="8px">
                 <RowBetween>
-              <TYPE.body>V2 {invertPrice ? currency1.symbol : currency0.symbol} Price:</TYPE.body>
-              <TYPE.black>
+                  <TYPE.body fontSize={14}>
+                    {isNotUniswap ? 'SushiSwap' : 'V2'} {invertPrice ? currency1.symbol : currency0.symbol} Price:
+                  </TYPE.body>
+                  <TYPE.black fontSize={14}>
                     {invertPrice
                       ? `${v2SpotPrice?.invert()?.toSignificant(6)} ${currency0.symbol}`
                       : `${v2SpotPrice?.toSignificant(6)} ${currency1.symbol}`}
@@ -403,8 +434,8 @@ function V2PairMigration({
                 </RowBetween>
 
                 <RowBetween>
-              <TYPE.body>V3 {invertPrice ? currency1.symbol : currency0.symbol} Price:</TYPE.body>
-              <TYPE.black>
+                  <TYPE.body fontSize={14}>V3 {invertPrice ? currency1.symbol : currency0.symbol} Price:</TYPE.body>
+                  <TYPE.black fontSize={14}>
                     {invertPrice
                       ? `${v3SpotPrice?.invert()?.toSignificant(6)} ${currency0.symbol}`
                       : `${v3SpotPrice?.toSignificant(6)} ${currency1.symbol}`}
@@ -412,14 +443,29 @@ function V2PairMigration({
                 </RowBetween>
 
                 <RowBetween>
-              <TYPE.body color="inherit">Price Difference:</TYPE.body>
-              <TYPE.black color="inherit">{priceDifferenceFraction?.toSignificant(4)}%</TYPE.black>
+                  <TYPE.body fontSize={14} color="inherit">
+                    Price Difference:
+                  </TYPE.body>
+                  <TYPE.black fontSize={14} color="inherit">
+                    {priceDifferenceFraction?.toSignificant(4)}%
+                  </TYPE.black>
                 </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.
+              </TYPE.body>
             </YellowCard>
-      )}
-
-      <FeeSelector feeAmount={feeAmount} handleFeePoolSelect={setFeeAmount} />
+          ) : !noLiquidity && v3SpotPrice ? (
+            <RowBetween>
+              <TYPE.body fontSize={14}>V3 {invertPrice ? currency1.symbol : currency0.symbol} Price:</TYPE.body>
+              <TYPE.black fontSize={14}>
+                {invertPrice
+                  ? `${v3SpotPrice?.invert()?.toSignificant(6)} ${currency0.symbol}`
+                  : `${v3SpotPrice?.toSignificant(6)} ${currency1.symbol}`}
+              </TYPE.black>
+            </RowBetween>
+          ) : null}
 
           <RowBetween>
             <TYPE.label>{t('selectLiquidityRange')}</TYPE.label>
@@ -470,14 +516,24 @@ function V2PairMigration({
             </YellowCard>
           ) : null}
 
-      <LightCard>
           {v3Amount0Min && v3Amount1Min ? (
+            <DarkGreyCard>
+              <AutoColumn gap="md">
                 <LiquidityInfo token0Amount={v3Amount0Min} token1Amount={v3Amount1Min} />
+                {chainId && refund0 && refund1 ? (
+                  <TYPE.black fontSize={12}>
+                    {formatTokenAmount(refund0, 4)} {token0.equals(WETH9[chainId]) ? 'ETH' : token0.symbol} and{' '}
+                    {formatTokenAmount(refund1, 4)} {token1.equals(WETH9[chainId]) ? 'ETH' : token1.symbol} will be
+                    refunded to your wallet due to selected price range.
+                  </TYPE.black>
+                ) : null}
+              </AutoColumn>
+            </DarkGreyCard>
           ) : null}
 
-        <div style={{ display: 'flex', marginTop: '1rem' }}>
+          <AutoColumn gap="12px">
             {!isSuccessfullyMigrated && !isMigrationPending ? (
-            <AutoColumn gap="12px" style={{ flex: '1', marginRight: 12 }}>
+              <AutoColumn gap="12px" style={{ flex: '1' }}>
                 <ButtonConfirmed
                   confirmed={approval === ApprovalState.APPROVED || signatureData !== null}
                   disabled={
@@ -495,7 +551,7 @@ function V2PairMigration({
                   ) : approval === ApprovalState.APPROVED || signatureData !== null ? (
                     'Approved'
                   ) : (
-                  'Approve'
+                    'Unlock LP tokens for migration'
                   )}
                 </ButtonConfirmed>
               </AutoColumn>
@@ -517,25 +573,9 @@ function V2PairMigration({
                 {isSuccessfullyMigrated ? 'Success!' : isMigrationPending ? <Dots>Migrating</Dots> : 'Migrate'}
               </ButtonConfirmed>
             </AutoColumn>
-        </div>
-
-        {chainId && refund0 && refund1 ? (
-          <div style={{ marginTop: '1rem' }}>
-            <TYPE.darkGray style={{ textAlign: 'center' }}>
-              {formatTokenAmount(refund0, 4)} {token0.equals(WETH9[chainId]) ? 'ETH' : token0.symbol} and{' '}
-              {formatTokenAmount(refund1, 4)} {token1.equals(WETH9[chainId]) ? 'ETH' : token1.symbol} will be refunded
-              to your wallet.
-            </TYPE.darkGray>
-          </div>
-        ) : null}
+          </AutoColumn>
+        </AutoColumn>
       </LightCard>
-      <TYPE.darkGray style={{ textAlign: 'center' }}>
-        {`Your Uniswap V2 ${invertPrice ? currency0?.symbol : currency1?.symbol} / ${
-          invertPrice ? currency1?.symbol : currency0?.symbol
-        } liquidity tokens will become a Uniswap V3 ${invertPrice ? currency0?.symbol : currency1?.symbol} / ${
-          invertPrice ? currency1?.symbol : currency0?.symbol
-        } NFT.`}
-      </TYPE.darkGray>
     </AutoColumn>
   )
 }
@@ -562,7 +602,7 @@ export default function MigrateV2Pair({
 
   // get liquidity token balance
   const liquidityToken: Token | undefined = useMemo(
-    () => (chainId && validatedAddress ? new Token(chainId, validatedAddress, 18, 'UNI-V2', 'Uniswap V2') : undefined),
+    () => (chainId && validatedAddress ? new Token(chainId, validatedAddress, 18) : undefined),
     [chainId, validatedAddress]
   )
 

src/state/user/reducer.test.ts

 import { createStore, Store } from 'redux'
-import { DEFAULT_DEADLINE_FROM_NOW, INITIAL_ALLOWED_SLIPPAGE } from '../../constants'
+import { DEFAULT_DEADLINE_FROM_NOW } from '../../constants'
 import { updateVersion } from '../global/actions'
 import reducer, { initialState, UserState } from './reducer'