feat(borrow): use consistent collateralCryptoAmt

packages/blockchain-wallet-v4-frontend/src/data/components/borrow/model.ts

@@ -1,3 +1,22 @@
+import { CoinType } from 'core/types'
+import { Exchange } from 'blockchain-wallet-v4/src'
+
 export const INVALID_COIN_TYPE = 'Invalid coin type'
 
 export const NO_OFFER_EXISTS = 'NO_OFFER_EXISTS'
+
+export const fiatDisplayName = (coin: CoinType) => {
+  switch (coin) {
+    case 'PAX':
+      return 'USD'
+    default:
+      return 'USD'
+  }
+}
+
+export const getAmount = (value: number, coin: CoinType) => {
+  switch (coin) {
+    case 'BTC':
+      return Exchange.convertBtcToBtc({ value, fromUnit: 'BTC', toUnit: 'SAT' })
+  }
+}

packages/blockchain-wallet-v4-frontend/src/data/components/borrow/sagas.ts

@@ -6,9 +6,9 @@ import { APIType } from 'blockchain-wallet-v4/src/network/api'
 import { BorrowFormValuesType, PaymentType } from './types'
 import { call, put, select, take } from 'redux-saga/effects'
 import { Exchange } from 'blockchain-wallet-v4/src'
+import { fiatDisplayName, getAmount, NO_OFFER_EXISTS } from './model'
 import { FormAction, initialize } from 'redux-form'
 import { LoanType } from 'core/types'
-import { NO_OFFER_EXISTS } from './model'
 import { nth } from 'ramda'
 import { promptForSecondPassword } from 'services/SagaService'
 import BigNumber from 'bignumber.js'
@@ -60,7 +60,8 @@ export default ({
         'NO_COLLATERAL_WITHDRAW_ADDRESS'
       )
 
-      // TODO: Borrow - make dynamic
+      const amount = getAmount(values.collateralCryptoAmt || 0, coin)
+
       const loan: LoanType = yield call(
         api.createLoan,
         collateralWithdrawAddress,
@@ -74,23 +75,16 @@ export default ({
         }
       )
 
-      // console.log(loan)
-      // const loan = yield call(api.createLoan, request)
-      // payment = yield payment.amount(convert loan amount to rate from offer)
-      // payment = yield payment.to(loan.depositAddresses)
-      payment = yield payment.amount(546, ADDRESS_TYPES.ADDRESS)
+      payment = yield payment.amount(amount, ADDRESS_TYPES.ADDRESS)
       payment = yield payment.to(loan.collateral.depositAddresses[coin])
 
       payment = yield payment.build()
       // ask for second password
       const password = yield call(promptForSecondPassword)
       payment = yield payment.sign(password)
-      // sign and publish payment
-      // console.log(values)
-      // console.log(payment)
+      payment = yield payment.publish()
       yield put(actions.form.stopSubmit('borrowForm'))
     } catch (e) {
-      // console.log(e)
       yield put(actions.form.stopSubmit('borrowForm'))
     }
   }
@@ -182,10 +176,20 @@ export default ({
     const form = action.meta.form
     if (form !== 'borrowForm') return
     const coin = S.getCoinType(yield select())
+    const offer = S.getOffer(yield select())
+    if (!offer) return
+    const ratesR = S.getRates(yield select())
+    const rates = ratesR.getOrElse({})
+    const rate = rates[fiatDisplayName(offer.terms.principalCcy)].last
 
     let payment
 
     switch (action.meta.field) {
+      case 'principal':
+        const principal = Number(action.payload)
+        const c = (principal / rate) * offer.terms.collateralRatio
+        yield put(actions.form.change('borrowForm', 'collateralCryptoAmt', c))
+        break
       case 'collateral':
         yield put(A.setPaymentLoading())
         switch (coin) {

packages/blockchain-wallet-v4-frontend/src/data/components/borrow/selectors.ts

@@ -1,6 +1,9 @@
 import { INVALID_COIN_TYPE } from './model'
+import { RatesType } from './types'
+import { RemoteDataType } from 'core/types'
 import { RootState } from '../../rootReducer'
 import { selectors } from 'data'
+import Remote from 'blockchain-wallet-v4/src/remote/remote'
 
 export const getCoinType = (state: RootState) => state.components.borrow.coin
 
@@ -15,14 +18,16 @@ export const getOffer = (state: RootState) => state.components.borrow.offer
 export const getBorrowHistory = (state: RootState) =>
   state.components.borrow.borrowHistory
 
-export const getRates = (state: RootState) => {
+export const getRates = (
+  state: RootState
+): RemoteDataType<string | Error, RatesType> => {
   const coinType = getCoinType(state)
 
   switch (coinType) {
     case 'BTC':
       return selectors.core.data.btc.getRates(state)
     default:
-      throw new Error(INVALID_COIN_TYPE)
+      throw Remote.Failure(INVALID_COIN_TYPE)
   }
 }
 

packages/blockchain-wallet-v4-frontend/src/data/components/borrow/types.ts

@@ -11,6 +11,7 @@ import {
 
 export type BorrowFormValuesType = {
   collateral: any
+  collateralCryptoAmt?: number
   maxCollateral?: number
   maxCollateralCounter?: string
   offer: OfferType
@@ -76,6 +77,7 @@ export type PaymentType = {
   from: Array<string>
   fromAccountIdx: number
   fromType: FromType
+  publish: () => PaymentType
   sign: (pw: string) => PaymentType
   to: (address: string) => PaymentType
   value: () => PaymentType

packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/CollateralizationBar/index.tsx

@@ -71,7 +71,7 @@ const CollateralizationBar: React.FC<Props> = props => {
   const max = Math.ceil(
     offer.terms.collateralRatio * PADDING + offer.terms.collateralRatio
   )
-  const currentRatio = 4
+  const currentRatio = props.loan.collateralisationRatio
   const currentColor =
     currentRatio >= offer.terms.collateralRatio
       ? 'green600'

packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/Summary/index.tsx

@@ -1,11 +1,12 @@
+import { BorrowFormValuesType, RatesType } from 'data/types'
 import {
   coinToString,
   fiatToString,
   formatFiat
 } from 'blockchain-wallet-v4/src/exchange/currency'
-import { CoinType, OfferType } from 'core/types'
 import { FormattedMessage } from 'react-intl'
-import { RatesType } from 'data/types'
+import { model } from 'data'
+import { OfferType } from 'core/types'
 import { TableRow, Title, Value } from 'components/Borrow'
 import { Text } from 'blockchain-info-components'
 import React from 'react'
@@ -17,20 +18,14 @@ type Props = {
   offer: OfferType
   principal?: string
   rates: RatesType
+  values: BorrowFormValuesType
 }
 
 const Table = styled.div`
   margin-top: 16px;
 `
 
-const fiatDisplayName = (coin: CoinType) => {
-  switch (coin) {
-    case 'PAX':
-      return 'USD'
-    default:
-      return 'USD'
-  }
-}
+const { fiatDisplayName } = model.components.borrow
 
 const Summary: React.FC<Props> = props => {
   const fiatName = fiatDisplayName(props.offer.terms.principalCcy)
@@ -88,9 +83,8 @@ const Summary: React.FC<Props> = props => {
           </Title>
           <Value>
             {coinToString({
-              value: props.principal
-                ? (Number(props.principal) / rate) *
-                  props.offer.terms.collateralRatio
+              value: props.values.collateralCryptoAmt
+                ? props.values.collateralCryptoAmt
                 : 0,
               unit: { symbol: props.offer.terms.collateralCcy }
             })}{' '}

packages/blockchain-wallet-v4-frontend/src/modals/WhatsNew/index.tsx

@@ -10,8 +10,8 @@ import React from 'react'
 import styled from 'styled-components'
 
 type OwnPropsType = {
-  position: number,
   close: () => void,
+  position: number,
   total: number,
   userClickedOutside: boolean
 }

packages/blockchain-wallet-v4-frontend/src/scenes/Borrow/BorrowHistory/index.tsx

@@ -5,6 +5,7 @@ import { getData } from './selectors'
 import { LoanType, NabuApiErrorType, RemoteDataType } from 'core/types'
 import { Text } from 'blockchain-info-components'
 import { UserDataType } from 'data/types'
+import Loading from './template.loading'
 import React, { Component } from 'react'
 import Success from './template.success'
 
@@ -36,8 +37,8 @@ class BorrowHistory extends Component<Props> {
         <Success {...val} showLoanDetails={this.showLoanDetails} />
       ),
       Failure: e => <Text>{e.description}</Text>,
-      Loading: () => <div />,
-      NotAsked: () => <div />
+      Loading: () => <Loading />,
+      NotAsked: () => <Loading />
     })
   }
 }

packages/blockchain-wallet-v4-frontend/src/scenes/Borrow/BorrowHistory/template.loading.tsx

@@ -0,0 +1,20 @@
+import { FormattedMessage } from 'react-intl'
+import { History, MainTitle } from './template.success'
+import React from 'react'
+
+interface Props {}
+
+const Loading: React.FC<Props> = () => {
+  return (
+    <History>
+      <MainTitle size='24px' color='grey800' weight={600}>
+        <FormattedMessage
+          id='scenes.borrow.loading.history'
+          defaultMessage='Loading History...'
+        />
+      </MainTitle>
+    </History>
+  )
+}
+
+export default Loading