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> {
|
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() {
|
||||||
|
|
|
@ -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,
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 { 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,
|
||||||
|
|
|
@ -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'
|
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))
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in New Issue