feat(sb): design review feedback addressed p1

blockchain · Jul 26, 2020 · 9c5d000 · 9c5d000
1 parent 53e2bcc
commit 9c5d000
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 24 deletions.
diff --git a/config/mocks/wallet-options-v4.json b/config/mocks/wallet-options-v4.json
@@ -20,7 +20,7 @@
           "coinCode": "EUR",
           "coinTicker": "EUR",
           "colorCode": "fiat",
-          "displayName": "Euro",
+          "displayName": "Euros",
           "icons": {
             "default": "eur",
             "circle": "eur",
@@ -39,7 +39,7 @@
           "coinCode": "GBP",
           "coinTicker": "GBP",
           "colorCode": "fiat",
-          "displayName": "British Pound",
+          "displayName": "Pounds",
           "icons": {
             "default": "gbp",
             "circle": "gbp",

diff --git a/packages/blockchain-info-components/src/Colors/DarkMode.ts b/packages/blockchain-info-components/src/Colors/DarkMode.ts
@@ -68,7 +68,7 @@ const DarkTheme: DefaultTheme = {
   red700: '#B2251B',
   red800: '#99180F',
   red900: '#800900',
-  fiat: '#339F7B',
+  fiat: '#00B26B',
   'fiat-light': 'rgba(0, 178, 107, 0.15)',
   algo: '#000000',
   btc: '#FF9B22',

diff --git a/packages/blockchain-info-components/src/Colors/Default.ts b/packages/blockchain-info-components/src/Colors/Default.ts
@@ -67,7 +67,7 @@ const Default = {
   red700: '#B2251B',
   red800: '#99180F',
   red900: '#800900',
-  fiat: '#339F7B',
+  fiat: '#00B26B',
   'fiat-light': 'rgba(0, 178, 107, 0.15)',
   algo: '#000000',
   btc: '#FF9B22',

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Form/SelectBoxCurrency/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Form/SelectBoxCurrency/index.js
@@ -22,8 +22,8 @@ const mapStateToProps = state => ({
     { text: 'Chilean Peso', value: 'CLP' },
     { text: 'Chinese Yuan', value: 'CNY' },
     { text: 'Danish Krone', value: 'DKK' },
-    { text: 'Euro', value: 'EUR' },
-    { text: 'British Pound', value: 'GBP' },
+    { text: 'Euros', value: 'EUR' },
+    { text: 'Pounds', value: 'GBP' },
     { text: 'Hong Kong Dollar', value: 'HKD' },
     { text: 'Icelandic Króna', value: 'ISK' },
     { text: 'Indian Rupee', value: 'INR' },

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/CustodialTx/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/CustodialTx/index.tsx
@@ -4,11 +4,16 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { CustodialTransactionRow } from '../components'
+import { fiatToString } from 'core/exchange/currency'
 import { SBTransactionType } from 'core/types'
+import FiatDisplay from 'components/Display/FiatDisplay'
 
-import { fiatToString } from 'core/exchange/currency'
 import { IconTx, Timestamp } from './model'
+import { Props as OwnProps } from '../TransactionList'
 
+const StyledCustodialTransactionRow = styled(CustodialTransactionRow)`
+  cursor: initial;
+`
 const Col = styled.div<{ width: string }>`
   width: ${props => props.width};
 `
@@ -19,10 +24,13 @@ const Row = styled(Col)`
 const Status = styled.div`
   margin-left: 16px;
 `
+const StyledFiatDisplay = styled(FiatDisplay)`
+  justify-content: flex-end;
+`
 
 const CustodialTxListItem: React.FC<Props> = props => {
   return (
-    <CustodialTransactionRow>
+    <StyledCustodialTransactionRow>
       <Row width='30%'>
         <IconTx {...props} />
         <Status>
@@ -65,12 +73,23 @@ const CustodialTxListItem: React.FC<Props> = props => {
             unit: props.tx.amount.symbol
           })}
         </Text>
+        {props.coin !== props.currency && (
+          <StyledFiatDisplay
+            coin={props.coin}
+            size='14px'
+            weight={500}
+            color='grey600'
+            style={{ marginTop: '4px', alignSelf: 'flex-end' }}
+          >
+            {props.tx.amount.value}
+          </StyledFiatDisplay>
+        )}
       </Col>
-    </CustodialTransactionRow>
+    </StyledCustodialTransactionRow>
   )
 }
 
-export type Props = {
+export type Props = OwnProps & {
   tx: SBTransactionType
 }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionList/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionList/index.tsx
@@ -1,10 +1,10 @@
 import {
-  CoinType,
   FiatType,
   ProcessedTxType,
   RemoteDataType,
   SBOrderType,
-  SBTransactionType
+  SBTransactionType,
+  WalletCurrencyType
 } from 'core/types'
 import DataError from 'components/DataError'
 import React, { PureComponent } from 'react'
@@ -33,9 +33,7 @@ class TransactionList extends PureComponent<Props> {
     const { coin, coinTicker, currency, data } = this.props
 
     return data.cata({
-      Success: (
-        transactions: Array<SBOrderType | SBTransactionType | ProcessedTxType>
-      ) => (
+      Success: (transactions: SuccessStateType) => (
         <TransactionsWrapper>
           {transactions.map(tx => {
             return 'hash' in tx ? (
@@ -49,7 +47,7 @@ class TransactionList extends PureComponent<Props> {
             ) : 'pair' in tx ? (
               <SimpleBuyListItem order={tx} />
             ) : (
-              <CustodialTxListItem tx={tx} />
+              <CustodialTxListItem tx={tx} {...this.props} />
             )
           })}
         </TransactionsWrapper>
@@ -64,7 +62,7 @@ class TransactionList extends PureComponent<Props> {
 }
 
 export type Props = {
-  coin: CoinType
+  coin: WalletCurrencyType
   coinTicker: string
   currency: FiatType
   data: RemoteDataType<
@@ -77,4 +75,8 @@ export type Props = {
   sourceType?: string
 }
 
+export type SuccessStateType = Array<
+  SBOrderType | SBTransactionType | ProcessedTxType
+>
+
 export default TransactionList
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/index.tsx
@@ -6,6 +6,7 @@ import {
   CoinTypeEnum,
   FiatType,
   SupportedCoinType,
+  WalletCurrencyType,
   WalletFiatEnum,
   WalletFiatType
 } from 'core/types'
@@ -86,7 +87,10 @@ const StatsContainer = styled.div`
 class TransactionsContainer extends React.PureComponent<Props> {
   componentDidMount () {
     this.props.initTxs()
-    this.props.miscActions.fetchPrice24H(this.props.coin, this.props.currency)
+    this.props.miscActions.fetchPrice24H(
+      this.props.coin as CoinType,
+      this.props.currency
+    )
   }
 
   componentDidUpdate (prevProps) {
@@ -164,7 +168,7 @@ class TransactionsContainer extends React.PureComponent<Props> {
             </StatsContainer>
           </Header>
           {(hasTxResults || isSearchEntered) && coin in CoinTypeEnum && (
-            <TransactionFilters coin={coin} />
+            <TransactionFilters coin={coin as CoinType} />
           )}
           {!hasTxResults ? (
             isSearchEntered ? (
@@ -173,7 +177,7 @@ class TransactionsContainer extends React.PureComponent<Props> {
               </SceneWrapper>
             ) : (
               <SceneWrapper centerContent>
-                <CoinIntroduction coin={coin} />
+                <CoinIntroduction coin={coin as CoinType} />
               </SceneWrapper>
             )
           ) : sourceType && sourceType === 'INTEREST' ? (
@@ -245,7 +249,7 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps) => {
 const connector = connect(mapStateToProps, mapDispatchToProps)
 
 export type OwnProps = {
-  coin: CoinType
+  coin: WalletCurrencyType
   isCoinErc20: boolean
 }
 

diff --git a/packages/blockchain-wallet-v4/src/exchange/currencies/EUR.ts b/packages/blockchain-wallet-v4/src/exchange/currencies/EUR.ts
@@ -1,7 +1,7 @@
 export default {
   code: 'EUR',
   base: 'CENT',
-  displayName: 'Euro',
+  displayName: 'Euros',
   trade: 'EUR',
   units: {
     CENT: {

diff --git a/packages/blockchain-wallet-v4/src/exchange/currencies/GBP.ts b/packages/blockchain-wallet-v4/src/exchange/currencies/GBP.ts
@@ -1,7 +1,7 @@
 export default {
   code: 'GBP',
   base: 'CENT',
-  displayName: 'British Pound',
+  displayName: 'Pounds',
   trade: 'GBP',
   units: {
     CENT: {

diff --git a/packages/blockchain-wallet-v4/src/redux/walletOptions/types.ts b/packages/blockchain-wallet-v4/src/redux/walletOptions/types.ts
@@ -41,7 +41,7 @@ export type SupportedFiatType = {
   coinCode: WalletFiatType
   coinTicker: WalletFiatType
   colorCode: 'fiat'
-  displayName: 'Euro' | 'British Pounds'
+  displayName: 'Euros' | 'Pounds'
   icons: {
     circle: 'eur' | 'gbp'
     circleFilled: 'eur' | 'gbp'