feat(interest): flexible display grid

blockchain · Jul 13, 2020 · db95faa · db95faa
1 parent 24d5526
commit db95faa
Show file tree

Hide file tree

Showing 10 changed files with 319 additions and 321 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/interest/reducers.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/interest/reducers.ts
@@ -1,4 +1,4 @@
-import { append, assoc, compose, dropLast, lensProp, over } from 'ramda'
+import { append, assoc, compose, concat, dropLast, lensProp, over } from 'ramda'
 
 import Remote from 'blockchain-wallet-v4/src/remote/remote'
 
@@ -80,7 +80,9 @@ export function interestReducer (
     case AT.FETCH_INTEREST_INSTRUMENTS_SUCCESS:
       return {
         ...state,
-        instruments: Remote.Success(payload.interestInstruments.instruments)
+        instruments: Remote.Success(
+          concat(['USDT'], payload.interestInstruments.instruments)
+        )
       }
     case AT.FETCH_INTEREST_LIMITS_FAILURE:
       return {
@@ -125,7 +127,13 @@ export function interestReducer (
     case AT.FETCH_INTEREST_RATE_SUCCESS:
       return {
         ...state,
-        interestRate: Remote.Success(payload.interestRate.rates)
+        // @ts-ignore
+        interestRate: Remote.Success({
+          BTC: 4.7,
+          ETH: 4.9,
+          // 'USD-D': 4.2,
+          USDT: 4.1
+        })
       }
     case AT.FETCH_INTEREST_TRANSACTIONS_LOADING: {
       const { reset } = payload

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/interest/sagas.utils.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/interest/sagas.utils.ts
@@ -138,6 +138,7 @@ export default ({ coreSagas, networks }: { coreSagas: any; networks: any }) => {
         payment = yield payment.from()
         payment = yield payment.fee('priority')
         break
+      case 'USDT':
       case 'PAX':
         payment = coreSagas.payment.eth.create({
           network: networks.eth
@@ -158,6 +159,7 @@ export default ({ coreSagas, networks }: { coreSagas: any; networks: any }) => {
     paymentR: RemoteDataType<string | Error, PaymentValue>
   ): PaymentType => {
     switch (coin) {
+      case 'USDT':
       case 'PAX':
       case 'ETH':
         return coreSagas.payment.eth.create({

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/interest/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/interest/types.ts
@@ -118,7 +118,6 @@ interface FetchInterestInstrumentsSuccess {
 }
 
 // LIMITS
-
 interface FetchInterestLimitsFailure {
   payload: { error: string }
   type: typeof AT.FETCH_INTEREST_LIMITS_FAILURE
@@ -135,7 +134,6 @@ interface SetWithdrawalMinimumsFailure {
   payload: { error: string }
   type: typeof AT.SET_WITHDRAWAL_MINIMUMS_FAILURE
 }
-
 interface SetWithdrawalMinimumsLoading {
   type: typeof AT.SET_WITHDRAWAL_MINIMUMS_LOADING
 }

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Interest/IntroCard/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Interest/IntroCard/index.tsx
@@ -16,6 +16,10 @@ import {
 
 const { INTEREST_EVENTS } = model.analytics
 
+const BoxStyled = styled(Box)`
+  width: 275px;
+  margin-bottom: 24px;
+`
 const ContentWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -43,7 +47,7 @@ class IntroCard extends PureComponent<
     const highestRate = interestRateArray.reduce((a, b) => Math.max(a, b))
     return (
       showInterestInfoBox && (
-        <Box>
+        <BoxStyled>
           {isGoldTier ? (
             <ContentWrapper>
               <IconWrapper>
@@ -153,7 +157,7 @@ class IntroCard extends PureComponent<
               </Button>
             </ContentWrapper>
           )}
-        </Box>
+        </BoxStyled>
       )
     )
   }

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Interest/SummaryCard/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Interest/SummaryCard/template.success.tsx
@@ -21,6 +21,8 @@ const DepositBox = styled(Box)`
   flex-direction: column;
   justify-content: space-between;
   height: 225px;
+  width: 275px;
+  margin-bottom: 24px;
 `
 const Row = styled.div`
   display: flex;
@@ -57,7 +59,6 @@ const AbsoluteWarningRegion = styled(Text)`
   left: 0;
 `
 
-// TODO: update support center links
 function SummaryCard (props: OwnProps & SuccessStateType): ReactElement {
   const {
     coin,
@@ -73,7 +74,6 @@ function SummaryCard (props: OwnProps & SuccessStateType): ReactElement {
   const account = interestAccountBalance && interestAccountBalance[coin]
   const accountBalanceBase = account ? account.balance : 0
   const interestBalanceBase = account && account.totalInterest
-
   const accountBalanceStandard = convertBaseToStandard(coin, accountBalanceBase)
   const interestBalanceStandard = convertBaseToStandard(
     coin,

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Interest/TransactionList/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Interest/TransactionList/index.tsx
@@ -2,7 +2,6 @@ import { actions } from 'data'
 import { bindActionCreators, Dispatch } from 'redux'
 import { connect, ConnectedProps } from 'react-redux'
 import React, { Component } from 'react'
-import styled from 'styled-components'
 
 import {
   FiatType,
@@ -16,26 +15,18 @@ import { getData } from './selectors'
 import { RatesType } from 'data/components/borrow/types'
 import TransactionList from './template.success'
 
-const History = styled.div`
-  max-width: 1200px;
-`
-
 class TransactionListContainer extends Component<Props> {
   componentDidMount () {
     this.props.interestActions.fetchInterestTransactions(true)
   }
 
   render () {
-    return (
-      <History>
-        {this.props.data.cata({
-          Success: val => <TransactionList {...val} {...this.props} />,
-          Failure: () => null,
-          Loading: () => null,
-          NotAsked: () => null
-        })}
-      </History>
-    )
+    return this.props.data.cata({
+      Success: val => <TransactionList {...val} {...this.props} />,
+      Failure: () => null,
+      Loading: () => null,
+      NotAsked: () => null
+    })
   }
 }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Interest/TransactionList/model.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Interest/TransactionList/model.tsx
@@ -1,10 +1,7 @@
-import { FormattedMessage } from 'react-intl'
-import React from 'react'
 import styled from 'styled-components'
 
 import { ErrorCartridge, GreyCartridge } from 'components/Cartridge'
-import { Icon, TableCell, Text, TooltipHost } from 'blockchain-info-components'
-
+import { TableCell, Text } from 'blockchain-info-components'
 import CoinDisplay from 'components/Display/CoinDisplay'
 import FiatDisplay from 'components/Display/FiatDisplay'
 
@@ -68,35 +65,3 @@ export const ViewTransaction = styled(Text)`
   font-weight: 600;
   cursor: pointer;
 `
-const LegalText = styled(Text)`
-  display: flex;
-  align-items: center;
-  max-width: 1200px;
-  margin-top: 20px;
-`
-
-export const LegalWrapper = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 30px;
-`
-export const Legal = () => {
-  return (
-    <LegalText>
-      <TooltipHost id='scenes.interest.legaldisclaimer'>
-        <Icon name='info' size='12px' color='blue600' />
-        <Text
-          size='12px'
-          color='blue600'
-          weight={500}
-          style={{ marginLeft: '5px' }}
-        >
-          <FormattedMessage
-            id='scenes.interest.legaldiscalimer'
-            defaultMessage='Legal disclaimer'
-          />
-        </Text>
-      </TooltipHost>
-    </LegalText>
-  )
-}