Dai Migration - UI Updates (#503)

* skeleton for migration - still need links and adrdess of new contract

* update render conditions

* fix close on click

* updated warning logic

* add mcd to token list

* changes before merge

* remove unused imports

* add checksums

src/components/NavigationTabs/index.js

@@ -4,8 +4,17 @@ import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 import { transparentize, darken } from 'polished'
 
+import { Link } from '../../theme/components'
+
 import { useBodyKeyDown } from '../../hooks'
-import { useBetaMessageManager } from '../../contexts/LocalStorage'
+import { useAddressBalance } from '../../contexts/Balances'
+import { isAddress } from '../../utils'
+import {
+  useBetaMessageManager,
+  useSaiHolderMessageManager,
+  useGeneralDaiMessageManager
+} from '../../contexts/LocalStorage'
+import { useWeb3Context } from 'web3-react'
 
 const tabOrder = [
   {
@@ -36,7 +45,7 @@ const BetaMessage = styled.div`
   margin-bottom: 1rem;
   border: 1px solid ${({ theme }) => transparentize(0.6, theme.wisteriaPurple)};
   background-color: ${({ theme }) => transparentize(0.9, theme.wisteriaPurple)};
-  border-radius: 2rem;
+  border-radius: 1rem;
   font-size: 0.75rem;
   line-height: 1rem;
   text-align: left;
@@ -54,6 +63,49 @@ const BetaMessage = styled.div`
   }
 `
 
+const DaiMessage = styled(BetaMessage)`
+  ${({ theme }) => theme.flexColumnNoWrap}
+  position: relative;
+  word-wrap: wrap;
+  overflow: visible;
+  white-space: normal;
+  padding: 1rem 1rem;
+  padding-right: 2rem;
+  line-height: 1.2rem;
+  cursor: default;
+  color: ${({ theme }) => theme.textColor};
+  div {
+    width: 100%;
+  }
+  &:after {
+    content: '';
+  }
+`
+
+const CloseIcon = styled.div`
+  width: 10px !important;
+  top: 0.5rem;
+  right: 1rem;
+  position: absolute;
+  color: ${({ theme }) => theme.wisteriaPurple};
+  :hover {
+    cursor: pointer;
+  }
+`
+
+const WarningHeader = styled.div`
+  margin-bottom: 10px;
+  font-weight: 500;
+  color: ${({ theme }) => theme.uniswapPink};
+`
+
+const WarningFooter = styled.div`
+  margin-top: 10px;
+  font-size: 10px;
+  textdecoration: italic;
+  color: ${({ theme }) => theme.greyText};
+`
+
 const Tabs = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
   align-items: center;
@@ -108,6 +160,18 @@ function NavigationTabs({ location: { pathname }, history }) {
 
   const [showBetaMessage, dismissBetaMessage] = useBetaMessageManager()
 
+  const [showGeneralDaiMessage, dismissGeneralDaiMessage] = useGeneralDaiMessageManager()
+
+  const [showSaiHolderMessage, dismissSaiHolderMessage] = useSaiHolderMessageManager()
+
+  const { account } = useWeb3Context()
+
+  const daiBalance = useAddressBalance(account, isAddress('0x89d24A6b4CcB1B6fAA2625fE562bDD9a23260359'))
+
+  const daiPoolTokenBalance = useAddressBalance(account, isAddress('0x09cabEC1eAd1c0Ba254B09efb3EE13841712bE14'))
+
+  const onLiquidityPage = pathname === '/pool' || pathname === '/add-liquidity' || pathname === '/remove-liquidity'
+
   const navigate = useCallback(
     direction => {
       const tabIndex = tabOrder.findIndex(({ regex }) => pathname.match(regex))
@@ -125,6 +189,10 @@ function NavigationTabs({ location: { pathname }, history }) {
   useBodyKeyDown('ArrowRight', navigateRight)
   useBodyKeyDown('ArrowLeft', navigateLeft)
 
+  const providerMessage =
+    showSaiHolderMessage && daiPoolTokenBalance && !daiPoolTokenBalance.isZero() && onLiquidityPage
+  const generalMessage = showGeneralDaiMessage && daiBalance && !daiBalance.isZero()
+
   return (
     <>
       <Tabs>
@@ -134,6 +202,41 @@ function NavigationTabs({ location: { pathname }, history }) {
           </StyledNavLink>
         ))}
       </Tabs>
+      {providerMessage && (
+        <DaiMessage>
+          <CloseIcon onClick={dismissSaiHolderMessage}>✕</CloseIcon>
+          <WarningHeader>Missing your DAI?</WarningHeader>
+          <div>
+            Don’t worry, check the{' '}
+            <Link href={'/remove-liquidity?poolTokenAddress=0x89d24A6b4CcB1B6fAA2625fE562bDD9a23260359'}>
+              SAI liquidity pool.
+            </Link>{' '}
+            Your old DAI is now SAI. If you want to migrate,{' '}
+            <Link href="/remove-liquidity?poolTokenAddress=0x89d24A6b4CcB1B6fAA2625fE562bDD9a23260359">
+              remove your SAI liquidity,
+            </Link>{' '}
+            migrate using the <Link href="https://migrate.makerdao.com/">migration tool</Link> then add your migrated
+            DAI to the{' '}
+            <Link href="add-liquidity?token=0x6B175474E89094C44Da98b954EedeAC495271d0F">new DAI liquidity pool.</Link>
+          </div>
+          <WarningFooter>
+            <Link href="https://blog.makerdao.com/looking-ahead-how-to-upgrade-to-multi-collateral-dai/">
+              Read more
+            </Link>{' '}
+            about this change on the official Maker blog.
+          </WarningFooter>
+        </DaiMessage>
+      )}
+      {generalMessage && !providerMessage && (
+        <DaiMessage>
+          <CloseIcon onClick={dismissGeneralDaiMessage}>✕</CloseIcon>
+          <WarningHeader>DAI has upgraded!</WarningHeader>
+          <div>
+            Your old DAI is now SAI. To upgrade use the{' '}
+            <Link href="https://migrate.makerdao.com/">migration tool.</Link>
+          </div>
+        </DaiMessage>
+      )}
       {showBetaMessage && (
         <BetaMessage onClick={dismissBetaMessage}>
           <span role="img" aria-label="warning">

src/contexts/LocalStorage.js

@@ -7,9 +7,16 @@ const CURRENT_VERSION = 0
 const LAST_SAVED = 'LAST_SAVED'
 
 const BETA_MESSAGE_DISMISSED = 'BETA_MESSAGE_DISMISSED'
+const GENERAL_DAI__MESSAGE_DISMISSED = 'GENERAL_DAI__MESSAGE_DISMISSED'
+const SAI_HOLDER__MESSAGE_DISMISSED = 'SAI_HOLDER__MESSAGE_DISMISSED'
 const DARK_MODE = 'DARK_MODE'
 
-const UPDATABLE_KEYS = [BETA_MESSAGE_DISMISSED, DARK_MODE]
+const UPDATABLE_KEYS = [
+  GENERAL_DAI__MESSAGE_DISMISSED,
+  SAI_HOLDER__MESSAGE_DISMISSED,
+  BETA_MESSAGE_DISMISSED,
+  DARK_MODE
+]
 
 const UPDATE_KEY = 'UPDATE_KEY'
 
@@ -42,6 +49,8 @@ function init() {
   const defaultLocalStorage = {
     [VERSION]: CURRENT_VERSION,
     [BETA_MESSAGE_DISMISSED]: false,
+    [GENERAL_DAI__MESSAGE_DISMISSED]: false,
+    [SAI_HOLDER__MESSAGE_DISMISSED]: false,
     [DARK_MODE]: true
   }
 
@@ -82,6 +91,26 @@ export function Updater() {
   return null
 }
 
+export function useSaiHolderMessageManager() {
+  const [state, { updateKey }] = useLocalStorageContext()
+
+  const dismissSaiHolderMessage = useCallback(() => {
+    updateKey(SAI_HOLDER__MESSAGE_DISMISSED, true)
+  }, [updateKey])
+
+  return [!state[SAI_HOLDER__MESSAGE_DISMISSED], dismissSaiHolderMessage]
+}
+
+export function useGeneralDaiMessageManager() {
+  const [state, { updateKey }] = useLocalStorageContext()
+
+  const dismissGeneralDaiMessage = useCallback(() => {
+    updateKey(GENERAL_DAI__MESSAGE_DISMISSED, true)
+  }, [updateKey])
+
+  return [!state[GENERAL_DAI__MESSAGE_DISMISSED], dismissGeneralDaiMessage]
+}
+
 export function useBetaMessageManager() {
   const [state, { updateKey }] = useLocalStorageContext()
 

src/contexts/Tokens.js

@@ -84,8 +84,8 @@ const INITIAL_TOKENS_CONTEXT = {
       [EXCHANGE_ADDRESS]: '0x1C6c712b1F4a7c263B1DBd8F97fb447c945d3b9a'
     },
     '0x89d24A6b4CcB1B6fAA2625fE562bDD9a23260359': {
-      [NAME]: 'Dai Stablecoin v1.0',
-      [SYMBOL]: 'DAI',
+      [NAME]: 'Dai Stablecoin v1.0 (SAI)',
+      [SYMBOL]: 'SAI',
       [DECIMALS]: 18,
       [EXCHANGE_ADDRESS]: '0x09cabEC1eAd1c0Ba254B09efb3EE13841712bE14'
     },
@@ -421,7 +421,7 @@ const INITIAL_TOKENS_CONTEXT = {
     },
     '0x09cabEC1eAd1c0Ba254B09efb3EE13841712bE14': {
       [NAME]: 'Uniswap V1',
-      [SYMBOL]: 'UNI-V1:DAI',
+      [SYMBOL]: 'UNI-V1:SAI',
       [DECIMALS]: 18,
       [EXCHANGE_ADDRESS]: '0x601c32E0580D3aef9437dB52D09f5a5D7E60eC22'
     },
@@ -466,6 +466,12 @@ const INITIAL_TOKENS_CONTEXT = {
       [SYMBOL]: 'ZRX',
       [DECIMALS]: 18,
       [EXCHANGE_ADDRESS]: '0xaE76c84C9262Cdb9abc0C2c8888e62Db8E22A0bF'
+    },
+    '0x6B175474E89094C44Da98b954EedeAC495271d0F': {
+      [NAME]: 'Dai Stablecoin',
+      [SYMBOL]: 'DAI',
+      [DECIMALS]: 18,
+      [EXCHANGE_ADDRESS]: '0x2a1530C4C41db0B0b2bB646CB5Eb1A67b7158667'
     }
   },
   4: {

src/theme/index.js

@@ -54,6 +54,7 @@ const theme = darkMode => ({
   white,
   black,
   textColor: darkMode ? white : '#010101',
+  greyText: darkMode ? white : '#6C7284',
 
   // for setting css on <html>
   backgroundColor: darkMode ? '#333639' : white,
@@ -72,6 +73,7 @@ const theme = darkMode => ({
   mineshaftGray: darkMode ? '#E1E1E1' : '#2B2B2B',
   buttonOutlineGrey: darkMode ? '#FAFAFA' : '#F2F2F2',
   tokenRowHover: darkMode ? '#404040' : '#F2F2F2',
+
   //blacks
   charcoalBlack: darkMode ? '#F2F2F2' : '#404040',
   // blues

src/utils/index.js

@@ -58,10 +58,10 @@ export function getAllQueryParams() {
   params.theme = checkSupportedTheme(getQueryParam(window.location, 'theme'))
 
   params.inputCurrency = isAddress(getQueryParam(window.location, 'inputCurrency'))
-    ? getQueryParam(window.location, 'inputCurrency')
+    ? isAddress(getQueryParam(window.location, 'inputCurrency'))
     : ''
   params.outputCurrency = isAddress(getQueryParam(window.location, 'outputCurrency'))
-    ? getQueryParam(window.location, 'outputCurrency')
+    ? isAddress(getQueryParam(window.location, 'outputCurrency'))
     : getQueryParam(window.location, 'outputCurrency') === 'ETH'
     ? 'ETH'
     : ''
@@ -82,19 +82,23 @@ export function getAllQueryParams() {
   params.tokenAmount = !isNaN(getQueryParam(window.location, 'tokenAmount'))
     ? getQueryParam(window.location, 'tokenAmount')
     : ''
-  params.token = isAddress(getQueryParam(window.location, 'token')) ? getQueryParam(window.location, 'token') : ''
+  params.token = isAddress(getQueryParam(window.location, 'token'))
+    ? isAddress(getQueryParam(window.location, 'token'))
+    : ''
 
   // Remove liquidity params
   params.poolTokenAmount = !isNaN(getQueryParam(window.location, 'poolTokenAmount'))
     ? getQueryParam(window.location, 'poolTokenAmount')
     : ''
   params.poolTokenAddress = isAddress(getQueryParam(window.location, 'poolTokenAddress'))
-    ? getQueryParam(window.location, 'poolTokenAddress')
+    ? isAddress(getQueryParam(window.location, 'poolTokenAddress'))
+      ? isAddress(getQueryParam(window.location, 'poolTokenAddress'))
+      : ''
     : ''
 
   // Create Exchange params
   params.tokenAddress = isAddress(getQueryParam(window.location, 'tokenAddress'))
-    ? getQueryParam(window.location, 'tokenAddress')
+    ? isAddress(getQueryParam(window.location, 'tokenAddress'))
     : ''
 
   return params