diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Terms/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Terms/index.js index b6776c526d6..d3a99c35f67 100644 --- a/packages/blockchain-wallet-v4-frontend/src/components/Terms/index.js +++ b/packages/blockchain-wallet-v4-frontend/src/components/Terms/index.js @@ -200,8 +200,8 @@ const Terms = props => { data-e2e='blockchainTermsLink' > diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/ConfirmBorrow/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/ConfirmBorrow/template.success.tsx index c1dba1e9dc7..d21c770c79a 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/ConfirmBorrow/template.success.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/ConfirmBorrow/template.success.tsx @@ -1,12 +1,15 @@ import { BorrowFormValuesType } from 'data/types' import { Button, HeartbeatLoader, Icon, Text } from 'blockchain-info-components' import { CheckBox, Form, FormItem } from 'components/Form' -import { coinToString } from 'blockchain-wallet-v4/src/exchange/currency' +import { + coinToString, + fiatToString +} from 'blockchain-wallet-v4/src/exchange/currency' import { compose } from 'redux' import { connect } from 'react-redux' import { Field, InjectedFormProps, reduxForm } from 'redux-form' import { FlyoutWrapper } from 'components/Flyout' -import { FormattedMessage } from 'react-intl' +import { FormattedHTMLMessage, FormattedMessage } from 'react-intl' import { LinkDispatchPropsType, OwnProps, SuccessStateType } from '.' import { selectors } from 'data' import React from 'react' @@ -20,7 +23,7 @@ const CustomForm = styled(Form)` ` const Top = styled(FlyoutWrapper)` - padding-bottom: 0px; + height: 100%; ` const TopText = styled(Text)` @@ -33,7 +36,21 @@ const Bottom = styled(FlyoutWrapper)` display: flex; flex-direction: column; justify-content: space-between; - height: 100%; +` + +const TermsContainer = styled.div` + padding-top: 40px; + border-top: 1px solid ${props => props.theme.grey100}; +` + +const BasicTerms = styled(Text)` + font-weight: 500; + line-height: 28px; + margin: 40px 0; + color: ${props => props.theme.grey600}; + b { + color: ${props => props.theme.grey800}; + } ` const ErrorText = styled(Text)` @@ -73,6 +90,24 @@ type Props = OwnProps & FormProps const Success: React.FC & Props> = props => { + const principalAmt = fiatToString({ + value: props.values ? Number(props.values.principal) : 0, + unit: { symbol: '$' } + }) + + const collateralAmt = coinToString({ + value: props.values + ? props.values.principal + ? (Number(props.values.principal) / + (props.rates[props.offer.terms.principalCcy] + ? props.rates[props.offer.terms.principalCcy].last + : props.rates['USD'].last)) * + props.offer.terms.collateralRatio + : 0 + : 0, + unit: { symbol: props.offer.terms.collateralCcy } + }) + return ( @@ -95,7 +130,17 @@ const Success: React.FC & Props> = props => { defaultMessage='Confirm Loan' /> -
+ + + + & Props> = props => { > -
-
+ {props.error && (