feat(prices): add market cap to table and fix responsiveness

blockchain · May 18, 2022 · 896d17b · 896d17b
1 parent 6ca6ed8
commit 896d17b
Show file tree

Hide file tree

Showing 13 changed files with 118 additions and 118 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/package.json b/packages/blockchain-wallet-v4-frontend/package.json
@@ -141,7 +141,8 @@
     "react-redux": "7.2.3",
     "react-router-bootstrap": "0.25.0",
     "react-router-dom": "4.3.1",
-    "react-table": "7.6.3",
+    "react-table": "7.8.0",
+    "react-table-container": "2.0.3",
     "react-tooltip": "3.10.0",
     "react-use-measure": "2.0.4",
     "react-virtualized-auto-sizer": "1.0.6",

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Table/index.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Table/index.tsx
@@ -2,11 +2,16 @@ import styled from 'styled-components'
 
 import { Text } from 'blockchain-info-components'
 
-export const TableWrapper = styled.div<{ height?: string }>`
+export const TableWrapper = styled.div<{
+  cellWidth?: string
+  height?: string
+  minCellWidth?: string
+}>`
   display: block;
   max-width: 100%;
   height: ${(props) => props.height || '100%'};
   width: 100%;
+
   .tableWrap {
     display: block;
     max-width: 100%;
@@ -32,7 +37,8 @@ export const TableWrapper = styled.div<{ height?: string }>`
       display: table-cell;
       margin: 0;
       text-align: left;
-      width: 20%;
+      min-width: ${(props) => (props.minCellWidth ? props.minCellWidth : '50px')};
+      width: ${(props) => (props.cellWidth ? props.cellWidth : '20%')};
     }
 
     .td {
@@ -46,7 +52,7 @@ export const TableWrapper = styled.div<{ height?: string }>`
       display: table;
       width: 100%;
       &:first-child {
-        border-top: 0px;
+        border-top: 0;
       }
     }
   }
@@ -80,4 +86,5 @@ export const HeaderText = styled.div`
 `
 export const HeaderToggle = styled.span`
   color: ${(props) => props.theme.grey500};
+  margin-left: 4px;
 `
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/prices/slice.ts b/packages/blockchain-wallet-v4-frontend/src/data/prices/slice.ts
@@ -10,7 +10,7 @@ const createPricesKvPairs = (prices) => {
     map(
       (x) => ({
         // @ts-ignore
-        [x.split('-')[0]]: prices[x] ? prices[x].price : 0
+        [x.split('-')[0]]: prices[x] ? prices[x] : null
       }),
       keys(prices)
     )

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Navigation/template.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Navigation/template.tsx
@@ -109,14 +109,6 @@ const Navigation = (props: OwnProps & Props) => {
             </Destination>
           </MenuItem>
         </LinkContainer>
-        <LinkContainer to='/prices' activeClassName='active'>
-          <MenuItem data-e2e='pricesLink'>
-            <MenuIcon className='icon' name='compass' size='24px' />
-            <Destination>
-              <FormattedMessage id='copy.prices' defaultMessage='Prices' />
-            </Destination>
-          </MenuItem>
-        </LinkContainer>
       </>
       {coinList.cata({
         Failure: () => null,

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/Table/actions.column.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/Table/actions.column.tsx
@@ -17,56 +17,33 @@ const CellWrapper = styled.div`
 
 export const getActionsColumn = (
   modalActions: TableColumnsType['modalActions'],
-  buySellActions: TableColumnsType['buySellActions'],
-  swapActions: TableColumnsType['swapActions'],
-  formActions: TableColumnsType['formActions']
+  buySellActions: TableColumnsType['buySellActions']
 ) => ({
   Cell: ({ row: { original: values } }) => (
     <CellWrapper>
       {values.products.includes('CustodialWalletBalance') ? (
-        <>
-          <Button
-            data-e2e={`${values.coin}BuySellBtn`}
-            height='32px'
-            nature='primary'
-            onClick={() => {
-              buySellActions.showModal({
-                cryptoCurrency: values.coin,
-                orderType: OrderType.BUY,
-                origin: 'Prices'
-              })
-            }}
-            width='96px'
-            style={{ marginRight: '12px' }}
-          >
-            <Text size='14px' color='white' weight={600}>
-              {Number(values.balance) > 0 ? (
-                <FormattedMessage id='buttons.buy_sell' defaultMessage='Buy & Sell' />
-              ) : (
-                <FormattedMessage id='buttons.buy' defaultMessage='Buy' />
-              )}
-            </Text>
-          </Button>
-          <Button
-            data-e2e={`${values.coin}SwapBtn`}
-            height='32px'
-            nature='empty-blue'
-            onClick={() => {
-              formActions.destroy('initSwap')
-              modalActions.showModal('SWAP_MODAL', {
-                origin: 'Prices'
-              })
-              swapActions.setStep({
-                step: 'INIT_SWAP'
-              })
-            }}
-            width='68px'
-          >
-            <Text size='14px' color='blue600' weight={600}>
-              <FormattedMessage id='buttons.swap' defaultMessage='Swap' />
-            </Text>
-          </Button>
-        </>
+        <Button
+          data-e2e={`${values.coin}BuySellBtn`}
+          height='32px'
+          nature='primary'
+          onClick={() => {
+            buySellActions.showModal({
+              cryptoCurrency: values.coin,
+              orderType: OrderType.BUY,
+              origin: 'Prices'
+            })
+          }}
+          width='96px'
+          style={{ marginRight: '12px' }}
+        >
+          <Text size='14px' color='white' weight={600}>
+            {Number(values.balance) > 0 ? (
+              <FormattedMessage id='buttons.buy_sell' defaultMessage='Buy & Sell' />
+            ) : (
+              <FormattedMessage id='buttons.buy' defaultMessage='Buy' />
+            )}
+          </Text>
+        </Button>
       ) : null}
     </CellWrapper>
   ),

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/Table/balance.column.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/Table/balance.column.tsx
@@ -1,26 +1,23 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
-import styled from 'styled-components'
 
 import { Exchange } from '@core'
-import CoinDisplay from 'components/Display/CoinDisplay'
-import { CellHeaderText } from 'components/Table'
-
-const BalanceDisplay = styled(CoinDisplay)`
-  font-style: normal;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 24px;
-  color: ${(props) => props.color};
-`
+import { CellHeaderText, CellText } from 'components/Table'
 
 export const getBalanceColumn = () => ({
   Cell: ({ row: { original: values } }) => {
     const { balance, coin } = values
+    const { coinfig } = window.coins[coin]
+    const amt = Exchange.convertCoinToCoin({
+      coin,
+      isFiat: coinfig.type.name === 'FIAT',
+      value: balance
+    })
+
     return (
-      <BalanceDisplay coin={coin} color={balance !== '0' ? 'grey900' : 'grey400'}>
-        {balance}
-      </BalanceDisplay>
+      <CellText>
+        {Number(amt).toFixed(4)} {coin}
+      </CellText>
     )
   },
   Header: () => (

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/Table/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/Table/index.tsx
@@ -1,17 +1,19 @@
 import { TableColumnsType } from '..'
 import { getActionsColumn } from './actions.column'
 import { getBalanceColumn } from './balance.column'
+import { getMarketCapColumn } from './marketCap.column'
 import { getNameColumn } from './name.column'
 import { getPriceColumn } from './price.column'
 import { getPriceChangeColumn } from './priceChange.column'
 
 export const getTableColumns =
-  ({ buySellActions, formActions, modalActions, swapActions, walletCurrency }: TableColumnsType) =>
+  ({ buySellActions, modalActions, walletCurrency }: TableColumnsType) =>
   () =>
     [
       getNameColumn(modalActions),
       getPriceColumn(walletCurrency),
       getPriceChangeColumn(),
+      getMarketCapColumn(walletCurrency),
       getBalanceColumn(),
-      getActionsColumn(modalActions, buySellActions, swapActions, formActions)
+      getActionsColumn(modalActions, buySellActions)
     ]
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/Table/marketCap.column.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/Table/marketCap.column.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import BigNumber from 'bignumber.js'
+
+import { fiatToString } from '@core/exchange/utils'
+import { CellHeaderText, CellText } from 'components/Table'
+
+import { TableColumnsType } from '..'
+
+export const getMarketCapColumn = (walletCurrency: TableColumnsType['walletCurrency']) => ({
+  Cell: ({ row: { original: values } }) => (
+    <CellText>{fiatToString({ unit: walletCurrency, value: values.marketCap })}</CellText>
+  ),
+  Header: () => (
+    <CellHeaderText>
+      <FormattedMessage id='copy.market)_cap' defaultMessage='Market Cap' />
+    </CellHeaderText>
+  ),
+  accessor: 'marketCap',
+  disableGlobalFilter: true,
+  sortType: (a, b, id) => {
+    const aBigNum = new BigNumber(a.original[id])
+    const bBigNum = new BigNumber(b.original[id])
+
+    if (aBigNum.isGreaterThan(bBigNum)) return 1
+    if (bBigNum.isGreaterThan(aBigNum)) return -1
+    return 0
+  }
+})
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/index.tsx
@@ -8,7 +8,7 @@ import styled from 'styled-components'
 import { ExtractSuccess } from '@core/types'
 import { Icon, Text } from 'blockchain-info-components'
 import TextBox from 'components/Form/TextBox'
-import { Header, PageTitle, SceneWrapper, SubTitle, Title } from 'components/Layout'
+import { PageTitle, SceneWrapper, StickyHeader, SubTitle, Title } from 'components/Layout'
 import { actions, selectors } from 'data'
 
 import { getData } from './selectors'
@@ -34,7 +34,7 @@ const SearchIconWrapper = styled.div`
 
 const Scene = ({ children }) => (
   <SceneWrapper>
-    <Header>
+    <StickyHeader style={{ paddingBottom: '20px' }}>
       <PageTitle>
         <div>
           <Title>
@@ -65,7 +65,7 @@ const Scene = ({ children }) => (
           </SearchIconWrapper>
         </TextFilterWrapper>
       </PageTitle>
-    </Header>
+    </StickyHeader>
     {children}
   </SceneWrapper>
 )
@@ -110,22 +110,18 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => ({
   buySellActions: bindActionCreators(actions.components.buySell, dispatch),
-  formActions: bindActionCreators(actions.form, dispatch),
   modalActions: bindActionCreators(actions.modals, dispatch),
   priceActions: bindActionCreators(actions.prices, dispatch),
-  routerActions: bindActionCreators(actions.router, dispatch),
-  swapActions: bindActionCreators(actions.components.swap, dispatch)
+  routerActions: bindActionCreators(actions.router, dispatch)
 })
 
 const connector = connect(mapStateToProps, mapDispatchToProps)
 const enhance = compose(reduxForm({ form: 'prices' }), connector)
 
 export type TableColumnsType = {
   buySellActions: ReturnType<typeof mapDispatchToProps>['buySellActions']
-  formActions: ReturnType<typeof mapDispatchToProps>['formActions']
   modalActions: ReturnType<typeof mapDispatchToProps>['modalActions']
   routerActions: ReturnType<typeof mapDispatchToProps>['routerActions']
-  swapActions: ReturnType<typeof mapDispatchToProps>['swapActions']
   walletCurrency: ReturnType<typeof selectors.core.settings.getCurrency>
 }
 export type Props = ConnectedProps<typeof connector>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/scenes/Prices/selectors.ts
@@ -16,13 +16,15 @@ export const getData = createDeepEqualSelector(
       coinPrices: ExtractSuccess<typeof coinPricesR>,
       coinPricesPrevious: ExtractSuccess<typeof coinPricesPreviousR>
     ) => {
-      const cryptos = selectors.core.data.coins.getAllCoins()
-
-      const m = cryptos.map((coin: string) => {
+      const coinList = selectors.core.data.coins.getAllCoins()
+      const coinPricesList = coinList.map((coin: string) => {
         const { coinfig } = window.coins[coin]
-
-        const currentPrice = coinPrices[coinfig.symbol]
-        const yesterdayPrice = coinPricesPrevious[coinfig.symbol]
+        const currentPrice = coinPrices[coinfig.symbol]?.price
+        const yesterdayPrice = coinPricesPrevious[coinfig.symbol]?.price
+        // some market caps returned as null
+        const marketCap = coinPrices[coinfig.symbol]?.marketCap
+          ? coinPrices[coinfig.symbol]?.marketCap
+          : 0
         const coinBalance = getBalanceSelector(coinfig.symbol)(state).getOrElse(0).valueOf()
         const priceChangeNum = Number(((currentPrice - yesterdayPrice) / yesterdayPrice) * 100)
         const priceChangeStr = Number.isNaN(priceChangeNum) ? '0' : priceChangeNum.toPrecision(2)
@@ -34,15 +36,17 @@ export const getData = createDeepEqualSelector(
               : coinBalance,
           coin: coinfig.symbol,
           coinModel: coin,
+          marketCap,
           name: `${coinfig.name} (${coinfig.displaySymbol})`,
           price: currentPrice,
           priceChange: priceChangeStr,
           products: coinfig.products
         }
       })
 
-      return m?.filter(({ price }) => {
-        return !!price || price === 0
+      // filter out undefined coins, zero value coins and coins with inflated marketcaps
+      return coinPricesList?.filter((coin) => {
+        return coin.price && coin.price !== 0 && coin.coin !== 'HOKK'
       })
     }