Merge pull request #36 from makerdao/develop

0.2.4

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mcd-cdp-portal",
   "description": "The primary web interface for interacting with the Multi-Collateral Dai smart contract system.",
-  "version": "0.2.3-rc.1",
+  "version": "0.2.4-rc.1",
   "license": "MIT",
   "private": true,
   "homepage": "https://mcd.makerdao.com",
@@ -14,16 +14,16 @@
     "@craco/craco": "^3.4.1",
     "@hot-loader/react-dom": "^16.8.4",
     "@makerdao/currency": "^0.9.3",
-    "@makerdao/dai": "0.15.1-kovan.1",
+    "@makerdao/dai": "0.15.1-kovan.2",
     "@makerdao/dai-plugin-config": "^0.0.3",
     "@makerdao/dai-plugin-ledger-web": "^0.9.7",
-    "@makerdao/dai-plugin-mcd": "0.1.2",
+    "@makerdao/dai-plugin-mcd": "0.1.3",
     "@makerdao/dai-plugin-trezor-web": "^0.9.6",
     "@makerdao/multicall": "0.5.1-alpha.5",
-    "@makerdao/ui-components-core": "0.1.0",
-    "@makerdao/ui-components-footer": "^0.1.0",
-    "@makerdao/ui-components-header": "^0.1.0",
-    "@makerdao/ui-components-onboarding": "^0.1.0",
+    "@makerdao/ui-components-core": "0.2.1",
+    "@makerdao/ui-components-footer": "^0.1.7",
+    "@makerdao/ui-components-header": "^0.1.7",
+    "@makerdao/ui-components-onboarding": "^0.1.2",
     "@walletconnect/browser": "^1.0.0-beta.6",
     "@walletconnect/qrcode-modal": "^1.0.0-beta.6",
     "bignumber.js": "^8.0.2",

src/components/CDPCreate.js

@@ -1,15 +1,12 @@
 import React from 'react';
 import { hot } from 'react-hot-loader/root';
-import { Flex, Grid, Box, Text } from '@makerdao/ui-components-core';
 import StepperUI from 'components/StepperUI';
+import StepperHeader from 'components/StepperHeader';
 import {
   CDPCreateSelectCollateral,
   CDPCreateConfirmCDP,
   CDPCreateDeposit
 } from 'components/CDPCreateScreens';
-import { ReactComponent as CloseIcon } from 'images/close-circle.svg';
-import WalletSelection from './WalletSelection';
-import useMaker from 'hooks/useMaker';
 
 const screens = [
   ['Select Collateral', props => <CDPCreateSelectCollateral {...props} />],
@@ -74,41 +71,6 @@ function reducer(state, action) {
   }
 }
 
-const CDPCreateHeader = ({ onClose }) => {
-  const { account } = useMaker();
-  return (
-    <Flex justifyContent="flex-end" alignItems="center" mr="xl" mb="m">
-      <Grid
-        gridColumnGap="l"
-        gridTemplateColumns="auto auto auto"
-        alignItems="center"
-      >
-        <Box width="auto">
-          <WalletSelection
-            currentAccount={account}
-            textColor="steel"
-            t="textM"
-            readOnly
-          />
-        </Box>
-
-        <Grid
-          onClick={onClose}
-          gridTemplateColumns="auto auto"
-          alignItems="center"
-          gridColumnGap="xs"
-          css={{ cursor: 'pointer' }}
-        >
-          <CloseIcon />
-          <Text color="steel" t="textM" fontWeight="medium">
-            Close
-          </Text>
-        </Grid>
-      </Grid>
-    </Flex>
-  );
-};
-
 function CDPCreate({ onClose }) {
   const [{ step, selectedIlk, ...cdpParams }, dispatch] = React.useReducer(
     reducer,
@@ -126,7 +88,7 @@ function CDPCreate({ onClose }) {
     <StepperUI
       step={step}
       steps={screens.map(([title]) => title)}
-      renderStepperHeader={() => <CDPCreateHeader onClose={onClose} />}
+      renderStepperHeader={() => <StepperHeader onClose={onClose} />}
     >
       {screens.map(([, getComponent], screenIndex) =>
         getComponent({ ...screenProps, screenIndex, key: screenIndex })

src/components/CDPCreateScreens/CDPCreateConfirmCDP.js

@@ -10,7 +10,6 @@ import {
   Link
 } from '@makerdao/ui-components-core';
 import LoadingLayout from 'layouts/LoadingLayout';
-import { getColor } from 'styles/theme';
 import useMaker from 'hooks/useMaker';
 import lang from 'languages';
 import { MAX_UINT_BN } from 'utils/units';
@@ -69,10 +68,8 @@ const CDPCreateConfirmSummary = ({
                   pt={!!index && 's'}
                   gridTemplateColumns="5fr 1fr"
                   justifyItems="start"
-                  css={{
-                    [index !== 0 ? 'borderTop' : '']: '1px solid',
-                    borderColor: getColor('grayLight6')
-                  }}
+                  borderTop={index !== 0 ? '1px solid' : null}
+                  color="grey.200"
                 >
                   <Text>{title}</Text>
                   <Text fontWeight="bold">{value}</Text>
@@ -87,10 +84,10 @@ const CDPCreateConfirmSummary = ({
                 onChange={() => setHasReadTOS(state => !state)}
                 mr="xs"
               />
-              <Text color="gray2">
+              <Text color="grey.500">
                 {lang.formatString(
                   lang.terms_of_service_text,
-                  <Link color="greenPastel">{lang.terms_of_service}</Link>
+                  <Link>{lang.terms_of_service}</Link>
                 )}
               </Text>
             </Box>
@@ -136,7 +133,6 @@ const CDPCreateConfirmed = ({ hash, onClose }) => {
               </Grid>
             ) : (
               <Link
-                t="textS"
                 target="_blank"
                 href={etherscanLink(hash, networkIdToName(networkId))}
               >
@@ -156,7 +152,7 @@ const CDPCreateConfirmed = ({ hash, onClose }) => {
 };
 
 const CDPCreateConfirmCDP = ({ dispatch, cdpParams, selectedIlk, onClose }) => {
-  const { maker } = useMaker();
+  const { maker, newTxListener } = useMaker();
 
   const { gemsToLock, daiToDraw } = cdpParams;
 
@@ -175,21 +171,16 @@ const CDPCreateConfirmCDP = ({ dispatch, cdpParams, selectedIlk, onClose }) => {
         daiToDraw
       );
 
+    newTxListener(txObject, 'Creating CDP');
+
     maker.service('transactionManager').listen(txObject, {
       pending: tx => setOpenCDPTxHash(tx.hash)
     });
   }
 
   async function ensureProxyWithGemApprovals() {
     try {
-      let proxyAddress = await maker.service('proxy').currentProxy();
-      if (!proxyAddress) {
-        await maker.service('proxy').build();
-        await new Promise(res => setTimeout(res, 2500));
-        while (!proxyAddress) {
-          proxyAddress = await maker.service('proxy').getProxyAddress();
-        }
-      }
+      const proxyAddress = await maker.service('proxy').ensureProxy();
       if (selectedIlk.currency.symbol !== 'ETH') {
         const gemToken = maker.getToken(selectedIlk.currency.symbol);
         const gemAllowanceSet = (await gemToken.allowance(

src/components/CDPCreateScreens/CDPCreateDeposit.js

@@ -53,11 +53,12 @@ function OpenCDPForm({
         }
       />,
       <Box key="ba">
-        <Text t="smallCaps" color="gray2" fontWeight="medium">
-          {lang.your_balance}{' '}
-        </Text>
+        <Text t="subheading">{lang.your_balance} </Text>
         <Text
-          t="textS"
+          t="caption"
+          display="inline-block"
+          ml="s"
+          color="darkLavender"
           onClick={() => {
             handleInputChange({
               target: {
@@ -88,12 +89,15 @@ function OpenCDPForm({
       />,
       <Grid gridRowGap="xs" key="keytodrawinfo">
         <Box key="ba">
-          <Text t="smallCaps" color="gray2" fontWeight="medium">
+          <Text t="subheading">
             {lang.cdp_create.deposit_form_field3_after2}{' '}
-            <Text t="textS">{selectedIlk.data.liquidationRatio}</Text>{' '}
+            <Text t="subheading">{selectedIlk.data.liquidationRatio}</Text>{' '}
           </Text>
           <Text
-            t="textS"
+            display="inline-block"
+            ml="s"
+            t="caption"
+            color="darkLavender"
             onClick={() => {
               handleInputChange({
                 target: {
@@ -111,7 +115,7 @@ function OpenCDPForm({
   ];
 
   return (
-    <Grid gridRowGap="l" px="l" py="m" maxWidth="100%">
+    <Grid gridRowGap="l" px="xl" py="l" maxWidth="100%">
       <Grid
         gridTemplateColumns="auto"
         gridRowGap="l"
@@ -122,14 +126,12 @@ function OpenCDPForm({
           return (
             <Grid gridRowGap="s" key={title}>
               <Grid gridRowGap="xs">
-                <TextBlock t="textM" fontWeight="medium">
+                <TextBlock t="h5" lineHeight="normal">
                   {title}
                 </TextBlock>
-                <TextBlock t="textS" color="gray2">
-                  {text}
-                </TextBlock>
+                <TextBlock t="body">{text}</TextBlock>
               </Grid>
-              <Box>{input}</Box>
+              <Box py="2xs">{input}</Box>
               {renderAfter}
             </Grid>
           );
@@ -147,7 +149,7 @@ const CDPCreateDepositSidebar = ({
   const { liquidationPenalty, liquidationRatio, rate } = selectedIlk.data;
   return (
     <Fragment>
-      <Card px="l" pb="m">
+      <Card px="l" pb="l">
         <Box>
           {[
             [
@@ -162,12 +164,10 @@ const CDPCreateDepositSidebar = ({
             [lang.liquidation_penalty, `${liquidationPenalty}%`]
           ].map(([title, value]) => (
             <Grid mt="m" gridRowGap="xs" key={title}>
-              <TextBlock t="textM" fontWeight="medium">
+              <TextBlock t="h5" lineHeight="normal">
                 {title}
               </TextBlock>
-              <TextBlock t="textS" color="black3">
-                {value}
-              </TextBlock>
+              <TextBlock t="body">{value}</TextBlock>
             </Grid>
           ))}
         </Box>

src/components/CDPCreateScreens/CDPCreateSelectCollateral.js

@@ -25,12 +25,10 @@ const CDPCreateSelectCollateralSidebar = () => (
         ]
       ].map(([title, text]) => (
         <Grid mb="m" key={title} gridRowGap="xs">
-          <TextBlock t="textM" fontWeight="medium">
+          <TextBlock t="h5" lineHeight="normal">
             {title}
           </TextBlock>
-          <TextBlock t="textS" color="black3">
-            {text}
-          </TextBlock>
+          <TextBlock t="body">{text}</TextBlock>
         </Grid>
       ))}
     </Box>
@@ -48,12 +46,7 @@ function IlkTableRowView({ ilk, checked, dispatch }) {
   }, []);
 
   return (
-    <tbody
-      css={`
-        border-bottom: 1px solid;
-        border-bottom-color: ${({ theme }) => theme.colors.grayLight6};
-      `}
-    >
+    <Table.tbody borderBottom="1px solid" borderColor="grey.200">
       <tr>
         <td>
           <Radio
@@ -82,7 +75,7 @@ function IlkTableRowView({ ilk, checked, dispatch }) {
         <td>{ilk.data.liquidationPenalty} %</td>
         <td>{prettifyNumber(userGemBalance)}</td>
       </tr>
-    </tbody>
+    </Table.tbody>
   );
 }
 

src/components/CDPCreateScreens/ScreenHeader.js

@@ -6,11 +6,9 @@ const ScreenHeader = ({ title, text }) => {
   return (
     <Box textAlign="center" pt="m">
       <Box pb="m">
-        <TextBlock t="headingL" fontWeight="medium">
-          {title}
-        </TextBlock>
+        <TextBlock t="h2">{title}</TextBlock>
       </Box>
-      <TextBlock t="textL" color="gray2">
+      <TextBlock t="body" fontSize="1.8rem">
         {text}
       </TextBlock>
     </Box>

src/components/CDPList.js

@@ -2,13 +2,13 @@ import React, { memo, Fragment, useState, useEffect } from 'react';
 import styled from 'styled-components';
 // import { ReactComponent as MakerSmall } from '../images/maker-small.svg';
 import { ReactComponent as Plus } from '../images/plus.svg';
-import { Flex } from '@makerdao/ui-components-core';
+import { Flex, Text } from '@makerdao/ui-components-core';
 import RatioDisplay from './RatioDisplay';
 import { Link } from 'react-navi';
-import { NavLabel } from 'components/Typography';
 import useModal from 'hooks/useModal';
 import useMaker from 'hooks/useMaker';
-import { getColor } from 'styles/theme';
+
+const SHOW_MIGRATE_BUTTON = false;
 
 const NavbarItemContainer = styled(Link)`
   display: block;
@@ -17,7 +17,7 @@ const NavbarItemContainer = styled(Link)`
 const DashedFakeButton = styled(Flex)`
   border: 1px dashed;
   cursor: pointer;
-  border-color: ${({ theme }) => theme.colors.blackLight};
+  border-color: ${({ theme }) => theme.colors.blackLighter};
 `;
 
 const NavbarItem = ({ href, label, ratio, owned, active, ...props }) => (
@@ -26,18 +26,13 @@ const NavbarItem = ({ href, label, ratio, owned, active, ...props }) => (
       flexDirection="column"
       alignItems="center"
       justifyContent="center"
-      bg={active ? 'greenPastel' : owned ? 'blackLight' : 'grayLight7'}
-      borderRadius="4px"
+      bg={active ? 'teal.500' : owned ? 'blackLighter' : 'grey.200'}
+      borderRadius="default"
       height="50px"
     >
-      <NavLabel
-        t="p6"
-        css={{
-          color: owned ? 'white' : getColor('black5')
-        }}
-      >
+      <Text t="p6" fontWeight="bold" color={owned ? 'white' : 'darkPurple'}>
         {label}
-      </NavLabel>
+      </Text>
       <RatioDisplay ratio={ratio} active={active} />
     </Flex>
   </NavbarItemContainer>
@@ -103,6 +98,20 @@ const CDPList = memo(function({ currentPath, viewedAddress, currentQuery }) {
           <Plus />
         </DashedFakeButton>
       )}
+      {/* delete once we finalize migration buttons */}
+      {!account || !SHOW_MIGRATE_BUTTON ? null : (
+        <DashedFakeButton
+          onClick={() =>
+            show({ modalType: 'cdpmigrate', modalTemplate: 'basic' })
+          }
+          justifyContent="center"
+          borderRadius="4px"
+          py="s"
+          color="grey.300"
+        >
+          Mig
+        </DashedFakeButton>
+      )}
     </Fragment>
   );
 });