Merge pull request #52 from makerdao/develop

0.2.6

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.5-rc.1",
+  "version": "0.2.6-rc.1",
   "license": "MIT",
   "private": true,
   "homepage": "https://mcd.makerdao.com",
@@ -13,11 +13,11 @@
   "dependencies": {
     "@craco/craco": "^3.4.1",
     "@hot-loader/react-dom": "^16.8.4",
-    "@makerdao/currency": "^0.9.3",
+    "@makerdao/currency": "^0.9.5",
     "@makerdao/dai": "0.15.3",
     "@makerdao/dai-plugin-config": "^0.0.3",
     "@makerdao/dai-plugin-ledger-web": "^0.9.7",
-    "@makerdao/dai-plugin-mcd": "0.1.6",
+    "@makerdao/dai-plugin-mcd": "0.1.8",
     "@makerdao/dai-plugin-trezor-web": "^0.9.6",
     "@makerdao/multicall": "0.6.1",
     "@makerdao/ui-components-core": "0.2.1",
@@ -30,8 +30,7 @@
     "body-scroll-lock": "^2.6.1",
     "eslint-plugin-react-hooks": "^1.5.0",
     "immer": "^3.1.1",
-    "lodash.round": "^4.0.4",
-    "lodash.uniqby": "^4.7.0",
+    "lodash": "^4.17.11",
     "mixpanel-browser": "^2.26.0",
     "navi": "^0.12.4",
     "prop-types": "^15.7.2",

src/components/BrowserProviderConnect.js

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import lang from 'languages';
+import styled from 'styled-components';
+
+import { useNavigation } from 'react-navi';
+import { Button, Flex } from '@makerdao/ui-components-core';
+import { ReactComponent as MetaMaskLogo } from 'images/metamask.svg';
+import { ReactComponent as TrustLogo } from 'images/trust-logo.svg';
+import { ReactComponent as ImTokenLogo } from 'images/imtoken-logo.svg';
+import coinbaseWalletLogo from 'images/coinbase-wallet.png';
+import alphaWalletLogo from 'images/alpha-wallet-logo.png';
+import useMaker from 'hooks/useMaker';
+import { wallets } from 'utils/web3';
+
+// hack to get around button padding for now
+const MMLogo = styled(MetaMaskLogo)`
+  margin-top: -5px;
+  margin-bottom: -5px;
+`;
+
+export default function BrowserProviderConnect({ provider }) {
+  const {
+    authenticated: makerAuthenticated,
+    connectBrowserProvider
+  } = useMaker();
+  const navigation = useNavigation();
+
+  return (
+    <Button
+      variant="secondary-outline"
+      width="225px"
+      disabled={!makerAuthenticated}
+      onClick={async () => {
+        try {
+          const connectedAddress = await connectBrowserProvider();
+
+          const { search } = (await navigation.getRoute()).url;
+
+          navigation.navigate({
+            pathname: `owner/${connectedAddress}`,
+            search
+          });
+        } catch (err) {
+          window.alert(err);
+        }
+      }}
+    >
+      <Flex alignItems="center">
+        {provider === wallets.METAMASK && <MMLogo />}
+        {provider === wallets.TRUST && <TrustLogo width="20px" height="20px" />}
+        {provider === wallets.IMTOKEN && (
+          <ImTokenLogo
+            css={`
+              pointer-events: none;
+            `}
+            width="20px"
+            height="20px"
+          />
+        )}
+        {provider === wallets.COINBASE && (
+          <img src={coinbaseWalletLogo} width="20px" height="20px" alt="" />
+        )}
+        {provider === wallets.ALPHA && (
+          <img src={alphaWalletLogo} width="20px" height="20px" alt="" />
+        )}
+        <span style={{ margin: 'auto' }}>
+          {lang.landing_page[provider] || 'Active Wallet'}
+        </span>
+      </Flex>
+    </Button>
+  );
+}

src/components/CDPCreate.js

@@ -1,21 +1,26 @@
-import React, { useReducer } from 'react';
+import React, { useReducer, useEffect } from 'react';
 import { hot } from 'react-hot-loader/root';
 import StepperUI from 'components/StepperUI';
 import StepperHeader from 'components/StepperHeader';
 import {
   CDPCreateSelectCollateral,
+  CDPCreateSetAllowance,
   CDPCreateConfirmCDP,
   CDPCreateDeposit
 } from 'components/CDPCreateScreens';
+import useMaker from 'hooks/useMaker';
 
 const screens = [
   ['Select Collateral', props => <CDPCreateSelectCollateral {...props} />],
+  ['Proxy Setup', props => <CDPCreateSetAllowance {...props} />],
   ['Generate Dai', props => <CDPCreateDeposit {...props} />],
   ['Confirmation', props => <CDPCreateConfirmCDP {...props} />]
 ];
 
 const initialState = {
   step: 0,
+  proxyAddress: null,
+  hasAllowance: null,
   selectedIlk: {
     userGemBalance: '',
     currency: null,
@@ -31,14 +36,28 @@ function reducer(state, action) {
   const { type, payload } = action;
   switch (type) {
     case 'increment-step':
+      const skipProxySetupForward =
+        state.step === 0 && state.proxyAddress && state.hasAllowance;
       return {
         ...state,
-        step: state.step + 1
+        step: state.step + (skipProxySetupForward ? 2 : 1)
       };
     case 'decrement-step':
+      const skipProxySetupBackwards =
+        state.step === 2 && state.proxyAddress && state.hasAllowance;
       return {
         ...state,
-        step: state.step - 1
+        step: state.step - (skipProxySetupBackwards ? 2 : 1)
+      };
+    case 'set-proxy-address':
+      return {
+        ...state,
+        proxyAddress: payload.address
+      };
+    case 'set-ilk-allowance':
+      return {
+        ...state,
+        hasAllowance: payload.hasAllowance
       };
     case 'set-ilk':
       return {
@@ -72,13 +91,27 @@ function reducer(state, action) {
 }
 
 function CDPCreate({ onClose }) {
-  const [{ step, selectedIlk, ...cdpParams }, dispatch] = useReducer(
-    reducer,
-    initialState
-  );
+  const { maker, account } = useMaker();
+  const [
+    { step, selectedIlk, proxyAddress, hasAllowance, ...cdpParams },
+    dispatch
+  ] = useReducer(reducer, initialState);
+
+  useEffect(() => {
+    const checkProxy = async () => {
+      try {
+        const address = await maker.service('proxy').currentProxy();
+        dispatch({ type: 'set-proxy-address', payload: { address } });
+      } catch (err) {}
+    };
+
+    checkProxy();
+  }, [maker, account]);
 
   const screenProps = {
     selectedIlk,
+    proxyAddress,
+    hasAllowance,
     cdpParams,
     dispatch,
     onClose

src/components/CDPCreateScreens/CDPCreateConfirmCDP.js

@@ -9,11 +9,9 @@ import {
   Button,
   Link
 } from '@makerdao/ui-components-core';
-import LoadingLayout from 'layouts/LoadingLayout';
 import useMaker from 'hooks/useMaker';
 import useStore from 'hooks/useStore';
 import lang from 'languages';
-import { MAX_UINT_BN } from 'utils/units';
 import { calcCDPParams } from 'utils/cdp';
 import { formatCollateralizationRatio } from 'utils/ui';
 import { etherscanLink } from 'utils/ethereum';
@@ -115,9 +113,25 @@ const CDPCreateConfirmSummary = ({
 
 const CDPCreateConfirmed = ({ hash, onClose }) => {
   const { maker } = useMaker();
+  const [waitTime, setWaitTime] = useState('8 minutes');
 
   const networkId = maker.service('web3').networkId();
   const isTestchain = ![1, 42].includes(networkId);
+  useEffect(() => {
+    (async () => {
+      // this is the default transaction speed
+      const waitInMinutes = await maker.service('gas').getWaitTime('fast');
+      const roundedWaitInMinutes = Math.round(waitInMinutes);
+      const roundedWaitInSeconds = Math.round(waitInMinutes * 6) * 10;
+
+      const waitTime =
+        roundedWaitInMinutes === 0
+          ? `${roundedWaitInSeconds} seconds`
+          : `${roundedWaitInMinutes} minutes`;
+
+      setWaitTime(waitTime);
+    })();
+  });
 
   return (
     <Box
@@ -128,7 +142,7 @@ const CDPCreateConfirmed = ({ hash, onClose }) => {
     >
       <ScreenHeader
         title={lang.cdp_create.confirmed_title}
-        text={lang.cdp_create.confirmed_text}
+        text={lang.formatString(lang.cdp_create.confirmed_text, waitTime)}
       />
       <Flex my="l" justifyContent="center">
         <Grid gridRowGap="s">
@@ -167,7 +181,6 @@ const CDPCreateConfirmCDP = ({ dispatch, cdpParams, selectedIlk, onClose }) => {
 
   const { gemsToLock, daiToDraw } = cdpParams;
 
-  const [canCreateCDP, setCanCreateCDP] = useState(false);
   const [openCDPTxHash, setOpenCDPTxHash] = useState(null);
 
   async function capturedDispatch(payload) {
@@ -192,30 +205,6 @@ const CDPCreateConfirmCDP = ({ dispatch, cdpParams, selectedIlk, onClose }) => {
     });
   }
 
-  async function ensureProxyWithGemApprovals() {
-    try {
-      const proxyAddress = await maker.service('proxy').ensureProxy();
-      if (selectedIlk.currency.symbol !== 'ETH') {
-        const gemToken = maker.getToken(selectedIlk.currency.symbol);
-        const gemAllowanceSet = (await gemToken.allowance(
-          maker.currentAddress(),
-          proxyAddress
-        )).eq(MAX_UINT_BN);
-
-        if (!gemAllowanceSet) await gemToken.approveUnlimited(proxyAddress);
-      }
-      setCanCreateCDP(true);
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  useEffect(() => {
-    ensureProxyWithGemApprovals();
-  }, []);
-
-  if (!canCreateCDP) return <LoadingLayout background="#F6F8F9" />;
-
   if (openCDPTxHash)
     return <CDPCreateConfirmed hash={openCDPTxHash} onClose={onClose} />;
 

src/components/CDPCreateScreens/CDPCreateDeposit.js

@@ -3,7 +3,11 @@ import { Box, Grid, Text, Input, Card } from '@makerdao/ui-components-core';
 import { greaterThanOrEqual } from 'utils/bignumber';
 import { TextBlock } from 'components/Typography';
 import { getUsdPrice, calcCDPParams } from 'utils/cdp';
-import { cdpParamsAreValid, formatCollateralizationRatio } from 'utils/ui';
+import {
+  cdpParamsAreValid,
+  formatCollateralizationRatio,
+  prettifyNumber
+} from 'utils/ui';
 
 import lang from 'languages';
 import ScreenFooter from './ScreenFooter';
@@ -67,7 +71,7 @@ function OpenCDPForm({
             });
           }}
         >
-          {selectedIlk.userGemBalance} {selectedIlk.data.gem}
+          {prettifyNumber(selectedIlk.userGemBalance)} {selectedIlk.data.gem}
         </Text>
       </Box>
     ],
@@ -90,7 +94,6 @@ function OpenCDPForm({
         <Box key="ba">
           <Text t="subheading">
             {lang.cdp_create.deposit_form_field3_after2}{' '}
-            <Text t="subheading">{selectedIlk.data.liquidationRatio}</Text>{' '}
           </Text>
           <Text
             display="inline-block"
@@ -106,7 +109,7 @@ function OpenCDPForm({
               });
             }}
           >
-            {daiAvailable} DAI
+            {prettifyNumber(daiAvailable)} DAI
           </Text>
         </Box>
       </Grid>