From e4453c7d0ce6071f15b2e3f93b3f7271b4e016c0 Mon Sep 17 00:00:00 2001 From: mmv Date: Thu, 18 Apr 2019 20:02:29 +0400 Subject: [PATCH] add logo to balances table asset column --- src/components/Table/TableHead.jsx | 4 ++- src/components/layout/Block/index.jsx | 2 +- src/components/layout/Block/index.scss | 5 +++ .../Balances/AssetTableCell/AssetTableCell.js | 31 ++++++++++++++++++ .../Balances/AssetTableCell/index.js | 5 +++ .../Tokens/assets/token_placeholder.png | Bin 108 -> 0 bytes .../Tokens/assets/token_placeholder.svg | 1 + .../safe/component/Balances/Tokens/index.jsx | 3 +- .../Tokens/screens/tokenList/TokenList.js | 13 ++++++++ .../Tokens/screens/tokenList/index.js | 4 +++ .../safe/component/Balances/dataFetcher.js | 10 +++--- src/routes/safe/component/Balances/index.jsx | 5 +-- 12 files changed, 73 insertions(+), 10 deletions(-) create mode 100644 src/routes/safe/component/Balances/AssetTableCell/AssetTableCell.js create mode 100644 src/routes/safe/component/Balances/AssetTableCell/index.js delete mode 100644 src/routes/safe/component/Balances/Tokens/assets/token_placeholder.png create mode 100644 src/routes/safe/component/Balances/Tokens/assets/token_placeholder.svg create mode 100644 src/routes/safe/component/Balances/Tokens/screens/tokenList/TokenList.js create mode 100644 src/routes/safe/component/Balances/Tokens/screens/tokenList/index.js diff --git a/src/components/Table/TableHead.jsx b/src/components/Table/TableHead.jsx index 3e98054c..7a400200 100644 --- a/src/components/Table/TableHead.jsx +++ b/src/components/Table/TableHead.jsx @@ -36,7 +36,9 @@ type Props = { class GnoTableHead extends React.PureComponent { changeSort = (property: string, orderAttr: boolean) => () => { - this.props.onSort(property, orderAttr) + const { onSort } = this.props + + onSort(property, orderAttr) } render() { diff --git a/src/components/layout/Block/index.jsx b/src/components/layout/Block/index.jsx index d399bb82..12e2702c 100644 --- a/src/components/layout/Block/index.jsx +++ b/src/components/layout/Block/index.jsx @@ -10,7 +10,7 @@ const cx = classNames.bind(styles) type Props = { margin?: Size, padding?: Size, - align?: 'center' | 'right', + align?: 'center' | 'right' | 'left', children: React$Node, className?: string, } diff --git a/src/components/layout/Block/index.scss b/src/components/layout/Block/index.scss index 8abbbde4..1c388ae5 100644 --- a/src/components/layout/Block/index.scss +++ b/src/components/layout/Block/index.scss @@ -48,6 +48,11 @@ justify-content: center; } +.left { + display: flex; + align-items: center; +} + .right { display: flex; align-items: center; diff --git a/src/routes/safe/component/Balances/AssetTableCell/AssetTableCell.js b/src/routes/safe/component/Balances/AssetTableCell/AssetTableCell.js new file mode 100644 index 00000000..40a31b7f --- /dev/null +++ b/src/routes/safe/component/Balances/AssetTableCell/AssetTableCell.js @@ -0,0 +1,31 @@ +// @flow +import * as React from 'react' +import Block from '~/components/layout/Block' +import Img from '~/components/layout/Img' +import Paragraph from '~/components/layout/Paragraph' +import TokenPlaceholder from '../Tokens/assets/token_placeholder.svg' + +const setImageToPlaceholder = (e) => { + e.target.onerror = null + e.target.src = TokenPlaceholder +} + +type Props = { + asset: { + logoUri: string, + name: string, + }, +} + +const AssetTableCell = (props: Props) => { + const { asset } = props + + return ( + + {asset.name} + {asset.name} + + ) +} + +export default AssetTableCell diff --git a/src/routes/safe/component/Balances/AssetTableCell/index.js b/src/routes/safe/component/Balances/AssetTableCell/index.js new file mode 100644 index 00000000..483cf0c7 --- /dev/null +++ b/src/routes/safe/component/Balances/AssetTableCell/index.js @@ -0,0 +1,5 @@ +// @flow + +import AssetTableCell from './AssetTableCell' + +export default AssetTableCell diff --git a/src/routes/safe/component/Balances/Tokens/assets/token_placeholder.png b/src/routes/safe/component/Balances/Tokens/assets/token_placeholder.png deleted file mode 100644 index aaa220178ae478b6367300067c68b755e1abdc9a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 108 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnL3?x0byx0z;*aCb)T%SLG{-2+3;i0edfFhg) z9+AZi417mGm~pB$pEOXA$J50zgkxrMg2WvlZvg}2Q)&NoKo*0itDnm{r-UW|Qal>* diff --git a/src/routes/safe/component/Balances/Tokens/assets/token_placeholder.svg b/src/routes/safe/component/Balances/Tokens/assets/token_placeholder.svg new file mode 100644 index 00000000..b62cdaa9 --- /dev/null +++ b/src/routes/safe/component/Balances/Tokens/assets/token_placeholder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/routes/safe/component/Balances/Tokens/index.jsx b/src/routes/safe/component/Balances/Tokens/index.jsx index 2ff9511b..0fab6f03 100644 --- a/src/routes/safe/component/Balances/Tokens/index.jsx +++ b/src/routes/safe/component/Balances/Tokens/index.jsx @@ -25,7 +25,7 @@ import Row from '~/components/layout/Row' import { ETH_ADDRESS } from '~/logic/tokens/utils/tokenHelpers' import { type Token } from '~/logic/tokens/store/model/token' import actions, { type Actions } from './actions' -import TokenPlaceholder from './assets/token_placeholder.png' +import TokenPlaceholder from './assets/token_placeholder.svg' import { styles } from './style' type Props = Actions & { @@ -54,6 +54,7 @@ const filterBy = (filter: string, tokens: List): List => tokens.fi class Tokens extends React.Component { state = { + activeScreen: '', filter: '', activeTokensAddresses: Set([]), activeTokensCalculated: false, diff --git a/src/routes/safe/component/Balances/Tokens/screens/tokenList/TokenList.js b/src/routes/safe/component/Balances/Tokens/screens/tokenList/TokenList.js new file mode 100644 index 00000000..dc33db22 --- /dev/null +++ b/src/routes/safe/component/Balances/Tokens/screens/tokenList/TokenList.js @@ -0,0 +1,13 @@ +// @flow + +import React, { Component } from 'react' + +export default class TokenLIst extends Component { + render() { + return ( +
+ token list +
+ ) + } +} diff --git a/src/routes/safe/component/Balances/Tokens/screens/tokenList/index.js b/src/routes/safe/component/Balances/Tokens/screens/tokenList/index.js new file mode 100644 index 00000000..7aa87181 --- /dev/null +++ b/src/routes/safe/component/Balances/Tokens/screens/tokenList/index.js @@ -0,0 +1,4 @@ +// @flow +import TokenList from './TokenList' + +export default TokenList diff --git a/src/routes/safe/component/Balances/dataFetcher.js b/src/routes/safe/component/Balances/dataFetcher.js index f54ffd83..1cd13cbf 100644 --- a/src/routes/safe/component/Balances/dataFetcher.js +++ b/src/routes/safe/component/Balances/dataFetcher.js @@ -9,21 +9,21 @@ export const BALANCE_TABLE_BALANCE_ID = 'balance' export const BALANCE_TABLE_VALUE_ID = 'value' type BalanceData = { - asset: string, + asset: Object, balance: string, } export type BalanceRow = SortRow -export const getBalanceData = (activeTokens: List): Array => { +export const getBalanceData = (activeTokens: List): List => { const rows = activeTokens.map((token: Token) => ({ - [BALANCE_TABLE_ASSET_ID]: token.name, + [BALANCE_TABLE_ASSET_ID]: { name: token.name, logoUri: token.logoUri }, [BALANCE_TABLE_BALANCE_ID]: `${token.balance} ${token.symbol}`, [buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: Number(token.balance), [FIXED]: token.get('symbol') === 'ETH', })) - return Array.from(rows) + return rows } export const generateColumns = () => { @@ -56,4 +56,4 @@ export const generateColumns = () => { return List([assetRow, balanceRow, actions]) } -export const filterByZero = (data: Array, hideZero: boolean): Array => data.filter((row: BalanceRow) => (hideZero ? row[buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)] !== 0 : true)) +export const filterByZero = (data: List, hideZero: boolean): List => data.filter((row: BalanceRow) => (hideZero ? row[buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)] !== 0 : true)) diff --git a/src/routes/safe/component/Balances/index.jsx b/src/routes/safe/component/Balances/index.jsx index f1c61517..bff62c62 100644 --- a/src/routes/safe/component/Balances/index.jsx +++ b/src/routes/safe/component/Balances/index.jsx @@ -19,6 +19,7 @@ import Table from '~/components/Table' import { getBalanceData, generateColumns, BALANCE_TABLE_ASSET_ID, type BalanceRow, filterByZero, } from './dataFetcher' +import AssetTableCell from './AssetTableCell' import Tokens from './Tokens' import Send from './Send' import Receive from './Receive' @@ -116,14 +117,14 @@ class Balances extends React.Component { defaultOrderBy={BALANCE_TABLE_ASSET_ID} columns={columns} data={filteredData} - size={filteredData.length} + size={filteredData.size} defaultFixed > {(sortedData: Array) => sortedData.map((row: any, index: number) => ( {autoColumns.map((column: Column) => ( - {row[column.id]} + {column.id === BALANCE_TABLE_ASSET_ID ? : row[column.id]} ))}