add status component for the table

src/components/Table/index.jsx

@@ -167,7 +167,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
 }
 
 GnoTable.defaultProps = {
-  defaultOrder: 'asc'
+  defaultOrder: 'asc',
 }
 
 export default withStyles(styles)(GnoTable)

src/routes/safe/components/TransactionsNew/TxsTable/Status/assets/awaiting.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13">
+    <path fill="#2E73D9" fill-rule="nonzero" d="M2.332 0C1.412 0 .666.746.666 1.666v.333A.666.666 0 0 0 0 2.665V5.33c0 .368.298.666.666.666h3.332a.666.666 0 0 0 .666-.666V2.665A.666.666 0 0 0 3.998 2v-.333C3.998.746 3.252 0 2.332 0zm0 .666a1 1 0 0 1 1 1v.333h-2v-.333a1 1 0 0 1 1-1zm9.434 0a.634.634 0 0 0-.46.187l-1.225 1.232 2.498 2.499 1.226-1.233a.655.655 0 0 0 0-.932L12.246.853a.703.703 0 0 0-.48-.187zM9.368 2.792l-7.37 7.369v2.498h2.5l7.368-7.369-2.498-2.498z"/>
+</svg>

src/routes/safe/components/TransactionsNew/TxsTable/Status/assets/error.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <path fill="#FD7890" fill-rule="nonzero" d="M7.7 7.7H6.3V3.5h1.4v4.2zm0 2.8H6.3V9.1h1.4v1.4zM7 0a7 7 0 1 0 0 14A7 7 0 0 0 7 0z"/>
+</svg>

src/routes/safe/components/TransactionsNew/TxsTable/Status/assets/ok.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <path fill="#346D6D" fill-rule="nonzero" d="M7 0a7 7 0 1 1 0 14A7 7 0 0 1 7 0zm-.913 9.8L11.2 5.139 10.17 4.2 6.087 7.916 3.83 5.865l-1.03.939L6.087 9.8z"/>
+</svg>

src/routes/safe/components/TransactionsNew/TxsTable/Status/index.jsx

@@ -0,0 +1,35 @@
+// @flow
+import * as React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import Block from '~/components/layout/Block'
+import Paragraph from '~/components/layout/Paragraph/'
+import Img from '~/components/layout/Img'
+import ErrorIcon from './assets/error.svg'
+import OkIcon from './assets/ok.svg'
+import AwaitingIcon from './assets/awaiting.svg'
+import { styles } from './style'
+
+type Props = {
+  classes: Object,
+  status: 'pending' | 'awaiting' | 'success' | 'failed',
+}
+
+const statusToIcon = {
+  success: OkIcon,
+  failed: ErrorIcon,
+  awaiting: AwaitingIcon,
+}
+
+const statusIconStyle={
+  height: '14px',
+  width: '14px',
+}
+
+const Status = ({ classes, status }: Props) => (
+  <Block className={`${classes.container} ${classes[status]}`}>
+    <Img src={statusToIcon[status]} alt="OK Icon" style={statusIconStyle} />
+    <Paragraph noMargin className={classes.statusText}>{status}</Paragraph>
+  </Block>
+)
+
+export default withStyles(styles)(Status)

src/routes/safe/components/TransactionsNew/TxsTable/Status/style.js

@@ -0,0 +1,30 @@
+// @flow
+import { smallFontSize, boldFont, sm } from '~/theme/variables'
+
+export const styles = () => ({
+  container: {
+    display: 'flex',
+    fontSize: smallFontSize,
+    fontWeight: boldFont,
+    width: '105px',
+    padding: sm,
+    alignItems: 'center',
+    boxSizing: 'border-box',
+  },
+  success: {
+    backgroundColor: '#d7f3f3',
+    color: '#346d6d',
+  },
+  failed: {
+    backgroundColor: 'transparent',
+    color: '#fd7890',
+  },
+  awaiting: {
+    backgroundColor: '#dfebff',
+    color: '#2e73d9',
+  },
+  statusText: {
+    marginLeft: 'auto',
+    textTransform: 'uppercase',
+  },
+})

src/routes/safe/components/TransactionsNew/TxsTable/columns.js

@@ -33,7 +33,7 @@ export const getTxTableData = (transactions: List<Transaction>): List<BalanceRow
     [TX_TABLE_TYPE_ID]: 'Outgoing transfer',
     [TX_TABLE_DATE_ID]: formatDate(tx.isExecuted ? tx.executionDate : tx.submissionDate),
     [TX_TABLE_AMOUNT_ID]: Number(tx.value) > 0 ? fromWei(toBN(tx.value), 'ether') : 'n/a',
-    [TX_TABLE_STATUS_ID]: tx.isExecuted ? 'done' : 'peding',
+    [TX_TABLE_STATUS_ID]: tx.isExecuted ? 'success' : 'pending',
   }))
 
   return rows

src/routes/safe/components/TransactionsNew/TxsTable/index.jsx

@@ -21,6 +21,7 @@ import {
   getTxTableData, generateColumns, TX_TABLE_NONCE_ID, type BalanceRow,
 } from './columns'
 import { styles } from './style'
+import Status from './Status'
 
 type State = {
 
@@ -64,33 +65,11 @@ class Balances extends React.Component<Props, State> {
                   {row[column.id]}
                 </TableCell>
               ))}
-              {/* <TableCell component="td">
+              <TableCell component="td">
                 <Row align="end" className={classes.actions}>
-                  {granted && (
-                    <Button
-                      variant="contained"
-                      size="small"
-                      color="secondary"
-                      className={classes.send}
-                      onClick={() => this.showSendFunds(row.asset.name)}
-                      data-testid="balance-send-btn"
-                    >
-                      <CallMade className={classNames(classes.leftIcon, classes.iconSmall)} />
-                        Send
-                    </Button>
-                  )}
-                  <Button
-                    variant="contained"
-                    size="small"
-                    color="secondary"
-                    className={classes.receive}
-                    onClick={this.onShow('Receive')}
-                  >
-                    <CallReceived className={classNames(classes.leftIcon, classes.iconSmall)} />
-                      Receive
-                  </Button>
+                  <Status status={row.status} />
                 </Row>
-              </TableCell> */}
+              </TableCell>
             </TableRow>
           ))
           }

src/routes/safe/components/TransactionsNew/TxsTable/style.js

@@ -30,10 +30,6 @@ export const styles = (theme: Object) => ({
       backgroundColor: '#fff3e2',
     },
   },
-  actions: {
-    justifyContent: 'flex-end',
-    visibility: 'hidden',
-  },
   send: {
     minWidth: '0px',
     marginRight: sm,