add logo to balances table asset column

src/components/Table/TableHead.jsx

@@ -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() {

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

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;

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 (
+    <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

src/routes/safe/component/Balances/AssetTableCell/index.js

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

src/routes/safe/component/Balances/Tokens/assets/token_placeholder.svg

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

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

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 (
+      <div>
+        token list
+      </div>
+    )
+  }
+}

src/routes/safe/component/Balances/Tokens/screens/tokenList/index.js

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

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<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))

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<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">