add logo to balances table asset column
This commit is contained in:
parent
8f9eadb6c3
commit
e4453c7d0c
|
@ -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() {
|
||||
|
|
|
@ -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,
|
||||
}
|
||||
|
|
|
@ -48,6 +48,11 @@
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
@ -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
|
|
@ -0,0 +1,5 @@
|
|||
// @flow
|
||||
|
||||
import AssetTableCell from './AssetTableCell'
|
||||
|
||||
export default AssetTableCell
|
Binary file not shown.
Before Width: | Height: | Size: 108 B |
|
@ -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 |
|
@ -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,
|
||||
|
|
|
@ -0,0 +1,13 @@
|
|||
// @flow
|
||||
|
||||
import React, { Component } from 'react'
|
||||
|
||||
export default class TokenLIst extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
token list
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
|
@ -0,0 +1,4 @@
|
|||
// @flow
|
||||
import TokenList from './TokenList'
|
||||
|
||||
export default TokenList
|
|
@ -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))
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue