add logo to balances table asset column

This commit is contained in:
mmv 2019-04-18 20:02:29 +04:00
parent 8f9eadb6c3
commit e4453c7d0c
12 changed files with 73 additions and 10 deletions

View File

@ -36,7 +36,9 @@ type Props = {
class GnoTableHead extends React.PureComponent<Props> {
changeSort = (property: string, orderAttr: boolean) => () => {
this.props.onSort(property, orderAttr)
const { onSort } = this.props
onSort(property, orderAttr)
}
render() {

View File

@ -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,
}

View File

@ -48,6 +48,11 @@
justify-content: center;
}
.left {
display: flex;
align-items: center;
}
.right {
display: flex;
align-items: center;

View File

@ -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 (
<Block align="left">
<Img src={asset.logoUri} height={26} alt={asset.name} onError={setImageToPlaceholder} />
<Paragraph style={{ marginLeft: 10 }}>{asset.name}</Paragraph>
</Block>
)
}
export default AssetTableCell

View File

@ -0,0 +1,5 @@
// @flow
import AssetTableCell from './AssetTableCell'
export default AssetTableCell

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 B

View File

@ -0,0 +1 @@
<svg height="26" viewBox="0 0 26 26" width="26" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="nonzero"><circle cx="13" cy="13" fill="#eae9ef" r="13"/><path d="m12.9800266 4.09134443c-.0615216.00319594-.1222455.01997459-.1765755.04953761-.05433.02956221-.1014704.07190818-.1374265.12224554l-6.1059363 8.59150972c-.04873785.0687133-.07590285.1526054-.07590285.2373076 0 .0838943.027165.1685862.07590285.2373076l6.1059363 8.5898734c.0375515.0527326.0878889.096678.1462136.1262403.0575269.0295622.1222455.0455429.1877618.0455429.0647186 0 .1302349-.0159797.1877618-.0455429.057527-.0295623.1078623-.0735077.1462136-.1262403l6.1059363-8.5898734c.0487379-.0687132.0759028-.1526054.0759028-.2373076 0-.0838942-.0271649-.1685862-.0759028-.2373076l-6.1073681-8.59150972c-.039151-.05592949-.093481-.10067268-.1542049-.13103259-.0615217-.02956221-.1302349-.04394343-.1981484-.04074851zm.0191757 1.7729551 2.2890102 6.81773647h-4.5774068zm-1.2160533 1.05305516-1.93513509 5.76476311h-2.16199071zm2.4330066 0 4.0971462 5.76476311h-2.1619907zm-6.53015285 6.58292421h2.16117254l1.93513511 5.7631268zm3.02494615 0h4.5774068l-2.2890102 6.8161001zm5.4403622 0h2.1611726l-4.0963281 5.7631268z" fill="#a2a8ba"/></g></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -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<Token>): List<Token> => tokens.fi
class Tokens extends React.Component<Props, State> {
state = {
activeScreen: '',
filter: '',
activeTokensAddresses: Set([]),
activeTokensCalculated: false,

View File

@ -0,0 +1,13 @@
// @flow
import React, { Component } from 'react'
export default class TokenLIst extends Component {
render() {
return (
<div>
token list
</div>
)
}
}

View File

@ -0,0 +1,4 @@
// @flow
import TokenList from './TokenList'
export default TokenList

View File

@ -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<BalanceData>
export const getBalanceData = (activeTokens: List<Token>): Array<BalanceRow> => {
export const getBalanceData = (activeTokens: List<Token>): List<BalanceRow> => {
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<BalanceRow>, hideZero: boolean): Array<BalanceRow> => data.filter((row: BalanceRow) => (hideZero ? row[buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)] !== 0 : true))
export const filterByZero = (data: List<BalanceRow>, hideZero: boolean): List<BalanceRow> => data.filter((row: BalanceRow) => (hideZero ? row[buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)] !== 0 : true))

View File

@ -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<Props, State> {
defaultOrderBy={BALANCE_TABLE_ASSET_ID}
columns={columns}
data={filteredData}
size={filteredData.length}
size={filteredData.size}
defaultFixed
>
{(sortedData: Array<BalanceRow>) => sortedData.map((row: any, index: number) => (
<TableRow tabIndex={-1} key={index} className={classes.hide}>
{autoColumns.map((column: Column) => (
<TableCell key={column.id} style={cellWidth(column.width)} align={column.align} component="td">
{row[column.id]}
{column.id === BALANCE_TABLE_ASSET_ID ? <AssetTableCell asset={row[column.id]} /> : row[column.id]}
</TableCell>
))}
<TableCell component="td">