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> { class GnoTableHead extends React.PureComponent<Props> {
changeSort = (property: string, orderAttr: boolean) => () => { changeSort = (property: string, orderAttr: boolean) => () => {
this.props.onSort(property, orderAttr) const { onSort } = this.props
onSort(property, orderAttr)
} }
render() { render() {

View File

@ -10,7 +10,7 @@ const cx = classNames.bind(styles)
type Props = { type Props = {
margin?: Size, margin?: Size,
padding?: Size, padding?: Size,
align?: 'center' | 'right', align?: 'center' | 'right' | 'left',
children: React$Node, children: React$Node,
className?: string, className?: string,
} }

View File

@ -48,6 +48,11 @@
justify-content: center; justify-content: center;
} }
.left {
display: flex;
align-items: center;
}
.right { .right {
display: flex; display: flex;
align-items: center; 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 { ETH_ADDRESS } from '~/logic/tokens/utils/tokenHelpers'
import { type Token } from '~/logic/tokens/store/model/token' import { type Token } from '~/logic/tokens/store/model/token'
import actions, { type Actions } from './actions' import actions, { type Actions } from './actions'
import TokenPlaceholder from './assets/token_placeholder.png' import TokenPlaceholder from './assets/token_placeholder.svg'
import { styles } from './style' import { styles } from './style'
type Props = Actions & { 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> { class Tokens extends React.Component<Props, State> {
state = { state = {
activeScreen: '',
filter: '', filter: '',
activeTokensAddresses: Set([]), activeTokensAddresses: Set([]),
activeTokensCalculated: false, 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' export const BALANCE_TABLE_VALUE_ID = 'value'
type BalanceData = { type BalanceData = {
asset: string, asset: Object,
balance: string, balance: string,
} }
export type BalanceRow = SortRow<BalanceData> 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) => ({ 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}`, [BALANCE_TABLE_BALANCE_ID]: `${token.balance} ${token.symbol}`,
[buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: Number(token.balance), [buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: Number(token.balance),
[FIXED]: token.get('symbol') === 'ETH', [FIXED]: token.get('symbol') === 'ETH',
})) }))
return Array.from(rows) return rows
} }
export const generateColumns = () => { export const generateColumns = () => {
@ -56,4 +56,4 @@ export const generateColumns = () => {
return List([assetRow, balanceRow, actions]) 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 { import {
getBalanceData, generateColumns, BALANCE_TABLE_ASSET_ID, type BalanceRow, filterByZero, getBalanceData, generateColumns, BALANCE_TABLE_ASSET_ID, type BalanceRow, filterByZero,
} from './dataFetcher' } from './dataFetcher'
import AssetTableCell from './AssetTableCell'
import Tokens from './Tokens' import Tokens from './Tokens'
import Send from './Send' import Send from './Send'
import Receive from './Receive' import Receive from './Receive'
@ -116,14 +117,14 @@ class Balances extends React.Component<Props, State> {
defaultOrderBy={BALANCE_TABLE_ASSET_ID} defaultOrderBy={BALANCE_TABLE_ASSET_ID}
columns={columns} columns={columns}
data={filteredData} data={filteredData}
size={filteredData.length} size={filteredData.size}
defaultFixed defaultFixed
> >
{(sortedData: Array<BalanceRow>) => sortedData.map((row: any, index: number) => ( {(sortedData: Array<BalanceRow>) => sortedData.map((row: any, index: number) => (
<TableRow tabIndex={-1} key={index} className={classes.hide}> <TableRow tabIndex={-1} key={index} className={classes.hide}>
{autoColumns.map((column: Column) => ( {autoColumns.map((column: Column) => (
<TableCell key={column.id} style={cellWidth(column.width)} align={column.align} component="td"> <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>
))} ))}
<TableCell component="td"> <TableCell component="td">