feat(Borrow): start thinking about summary

blockchain · Jan 21, 2020 · 1cd02c4 · 1cd02c4
1 parent c9982ad
commit 1cd02c4
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 28 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/template.success.tsx
@@ -1,19 +1,35 @@
+import { Button, Text } from 'blockchain-info-components'
 import { Field } from 'redux-form'
 import { Form, FormLabel, NumberBox, SelectBoxBtcAddresses } from 'components/Form'
 import { FormattedMessage } from 'react-intl'
 import { LinkDispatchPropsType } from '.'
 import { maximumAmount } from './validation'
-import { PaymentType } from 'data/types'
-import { Text } from 'blockchain-info-components'
+import { PaymentType } from 'data/components/borrow/types'
+import { Summary } from '../Summary'
 import FiatDisplay from 'components/Display/FiatDisplay'
 import React from 'react'
 import styled from 'styled-components'
 
 const Wrapper = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`
+const Padded = styled.div`
   padding: 40px;
+`
+
+const Top = styled(Padded)`
   background: ${props => props.theme.grey000};
 `
 
+const Bottom = styled(Padded)`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+`
+
 const CustomFormLabel = styled(FormLabel)`
   display: block;
   margin-top: 24px;
@@ -45,33 +61,45 @@ type Props = LinkDispatchPropsType & PaymentType
 const Success: React.FC<Props> = (props) => {
   return (
     <Wrapper>
-      {/* TODO: Borrow - make dynamic */}
-      <Text color='grey900' size='24px' weight={600}><FormattedMessage id='modals.borrow.borrowusd' defaultMessage='Borrow USD' /></Text>
-      <Form>
-        <CustomFormLabel>
-          <Text color='grey600' weight={500} size='14px'>
-            <FormattedMessage id='modals.borrow.iwanttoborrow' defaultMessage='I want to borrow' />
-          </Text>
-        </CustomFormLabel>
-        <AmountFieldContainer>
-          <CustomField component={NumberBox} errorBottom name='principal' autofocus max={props.effectiveBalance} validate={[maximumAmount]} />
-          <MaxAmountContainer>
-            <InlineText color='grey600' weight={500} size='12px'>
-              <FormattedMessage id='modals.borrow.canborrow' defaultMessage='You can borrow up to' />
-              <br />
-              <FiatDisplay onClick={() => props.borrowActions.handleMaxCollateralClick()} cursor='pointer' color='blue600' size='12px' weight={500} coin='BTC'>{props.effectiveBalance}</FiatDisplay>
-              {' '}USD Pax
+      <Top>
+        {/* TODO: Borrow - make dynamic */}
+        <Text color='grey900' size='24px' weight={600}><FormattedMessage id='modals.borrow.borrowusd' defaultMessage='Borrow USD' /></Text>
+        <Form>
+          <CustomFormLabel>
+            <Text color='grey600' weight={500} size='14px'>
+              <FormattedMessage id='modals.borrow.iwanttoborrow' defaultMessage='I want to borrow' />
+            </Text>
+          </CustomFormLabel>
+          <AmountFieldContainer>
+            <CustomField component={NumberBox} errorBottom name='principal' autofocus max={props.effectiveBalance} validate={[maximumAmount]} />
+            <MaxAmountContainer>
+              <InlineText color='grey600' weight={500} size='12px'>
+                <FormattedMessage id='modals.borrow.canborrow' defaultMessage='You can borrow up to' />
+                <br />
+                <FiatDisplay onClick={() => props.borrowActions.handleMaxCollateralClick()} cursor='pointer' color='blue600' size='12px' weight={500} coin='BTC'>{props.effectiveBalance}</FiatDisplay>
+                {' '}USD Pax
               </InlineText>
-          </MaxAmountContainer>
-        </AmountFieldContainer>
-        <CustomFormLabel>
-          <Text color='grey600' weight={500} size='14px'>
-            <FormattedMessage id='modals.borrow.collateralfrom' defaultMessage='Send collateral from' />
-          </Text>
-        </CustomFormLabel>
-        {/* TODO: Borrow - handle other coins */}
-        <Field component={SelectBoxBtcAddresses} includeAll={false} name='collateral' />
-      </Form>
+            </MaxAmountContainer>
+          </AmountFieldContainer>
+          <CustomFormLabel>
+            <Text color='grey600' weight={500} size='14px'>
+              <FormattedMessage id='modals.borrow.collateralfrom' defaultMessage='Send collateral from' />
+            </Text>
+          </CustomFormLabel>
+          {/* TODO: Borrow - handle other coins */}
+          <Field component={SelectBoxBtcAddresses} includeAll={false} name='collateral' />
+        </Form>
+      </Top>
+      <Bottom>
+        <Summary />
+        <div>
+          <Button nature='primary'>
+            <Text size='16px' weight={600} color='white'>
+              <FormattedMessage id='modals.borrow.collateralform.create' defaultMessage='Create Loan' />
+            </Text>
+          </Button>
+        </div>
+      </Bottom>
     </Wrapper>
   )
 }

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/Summary/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/Summary/index.tsx
@@ -0,0 +1,35 @@
+import { connect } from 'react-redux'
+import { FormattedMessage } from 'react-intl'
+import { Text } from 'blockchain-info-components'
+import React, { Component } from 'react'
+
+interface Props {
+
+}
+interface State {
+
+}
+
+export class Summary extends Component<Props, State> {
+  state = {}
+
+  render () {
+    return (
+      <div>
+        <Text color='grey900' weight={600}>
+          <FormattedMessage id='modals.borrow.summary' defaultMessage='Summary' />
+        </Text>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = (state) => ({
+
+})
+
+const mapDispatchToProps = {
+
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Summary)