show status and tx hash in tx description

src/components/Header/component/ProviderDetails/UserDetails.jsx

@@ -3,11 +3,11 @@ import * as React from 'react'
 import classNames from 'classnames'
 import OpenInNew from '@material-ui/icons/OpenInNew'
 import { withStyles } from '@material-ui/core/styles'
+import Dot from '@material-ui/icons/FiberManualRecord'
 import Paragraph from '~/components/layout/Paragraph'
 import Link from '~/components/layout/Link'
 import Button from '~/components/layout/Button'
 import Identicon from '~/components/Identicon'
-import Dot from '@material-ui/icons/FiberManualRecord'
 import Hairline from '~/components/layout/Hairline'
 import Img from '~/components/layout/Img'
 import Row from '~/components/layout/Row'

src/logic/wallets/ethAddresses.js

@@ -14,8 +14,7 @@ export const sameAddress = (firstAddress: string, secondAddress: string): boolea
 }
 
 export const shortVersionOf = (address: string, cut: number) => {
-  const initial = cut
   const final = 42 - cut
 
-  return `${address.substring(0, initial)}...${address.substring(final)}`
+  return `${address.substring(0, cut)}...${address.substring(final)}`
 }

src/logic/wallets/getWeb3.js

@@ -32,7 +32,7 @@ export const ETHEREUM_NETWORK_IDS = {
   42: ETHEREUM_NETWORK.KOVAN,
 }
 
-export const openTxInEtherScan = (tx: string, network: string) => `https://${network}.etherscan.io/tx/${tx}`
+export const openTxInEtherScan = (txHash: string, network: string) => `https://${network}.etherscan.io/tx/${txHash}`
 
 export const getEtherScanLink = (address: string, network: string) => `https://${network}.etherscan.io/address/${address}`
 

src/routes/opening/component/index.jsx

@@ -1,10 +1,10 @@
 // @flow
 import * as React from 'react'
-import Block from '~/components/layout/Block'
 import OpenInNew from '@material-ui/icons/OpenInNew'
-import Paragraph from '~/components/layout/Paragraph'
 import LinearProgress from '@material-ui/core/LinearProgress'
 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 Page from '~/components/layout/Page'
 import { openTxInEtherScan } from '~/logic/wallets/getWeb3'

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

@@ -1,7 +1,9 @@
 // @flow
 import React, { useState } from 'react'
+import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
 import Tabs from '@material-ui/core/Tabs'
+import OpenInNew from '@material-ui/icons/OpenInNew'
 import Tab from '@material-ui/core/Tab'
 import Row from '~/components/layout/Row'
 import Block from '~/components/layout/Block'
@@ -11,8 +13,11 @@ import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
 import { type Transaction } from '~/routes/safe/store/models/transaction'
 import { type Owner } from '~/routes/safe/store/models/owner'
+import { openTxInEtherScan } from '~/logic/wallets/getWeb3'
+import { shortVersionOf } from '~/logic/wallets/ethAddresses'
 import { styles } from './style'
 import { formatDate } from '../columns'
+import { secondary } from '~/theme/variables'
 
 type Props = {
   classes: Object,
@@ -21,6 +26,11 @@ type Props = {
   owners: List<Owner>,
 }
 
+const openIconStyle = {
+  height: '13px',
+  color: secondary,
+}
+
 const ExpandedTx = ({
   classes, tx, threshold, owners,
 }: Props) => {
@@ -39,11 +49,18 @@ const ExpandedTx = ({
           <Block className={classes.txDataContainer}>
             <Paragraph noMargin>
               <Bold>TX hash: </Bold>
-              n/a
+              {tx.executionTxHash ? (
+                <a href={openTxInEtherScan(tx.executionTxHash, 'rinkeby')} target="_blank" rel="noopener noreferrer">
+                  {shortVersionOf(tx.executionTxHash, 4)}
+                  <OpenInNew style={openIconStyle} />
+                </a>
+              ) : (
+                'n/a'
+              )}
             </Paragraph>
             <Paragraph noMargin>
               <Bold>TX status: </Bold>
-              n/a
+              {tx.executionTxHash ? 'Success' : 'Awaiting confirmations'}
             </Paragraph>
             <Paragraph noMargin>
               <Bold>TX created: </Bold>

src/routes/safe/store/actions/fetchTransactions.js

@@ -13,6 +13,7 @@ import { EMPTY_DATA } from '~/logic/wallets/ethTransactions'
 import { addTransactions } from './addTransactions'
 import { getHumanFriendlyToken } from '~/logic/tokens/store/actions/fetchTokens'
 import { isAddressAToken } from '~/logic/tokens/utils/tokenHelpers'
+import { TX_TYPE_EXECUTION } from '~/logic/safe/transactions/send'
 
 type ConfirmationServiceModel = {
   owner: string,
@@ -49,6 +50,13 @@ const buildTransactionFrom = async (safeAddress: string, tx: TxServiceModel, saf
   )
   const isToken = await isAddressAToken(tx.to)
 
+  let executionTxHash
+  const executionTx = confirmations.find(conf => conf.type === TX_TYPE_EXECUTION)
+
+  if (executionTx) {
+    executionTxHash = executionTx.hash
+  }
+
   let symbol = 'ETH'
   if (isToken) {
     const tokenContract = await getHumanFriendlyToken()
@@ -67,6 +75,7 @@ const buildTransactionFrom = async (safeAddress: string, tx: TxServiceModel, saf
     isExecuted: tx.isExecuted,
     submissionDate: tx.submissionDate,
     executionDate: tx.executionDate,
+    executionTxHash,
   })
 }
 

src/routes/safe/store/models/transaction.js

@@ -14,6 +14,7 @@ export type TransactionProps = {
   submissionDate: Date,
   executionDate: Date,
   symbol: string,
+  executionTxHash?: string,
 }
 
 export const makeTransaction: RecordFactory<TransactionProps> = Record({
@@ -27,6 +28,7 @@ export const makeTransaction: RecordFactory<TransactionProps> = Record({
   submissionDate: '',
   executionDate: '',
   symbol: '',
+  executionTxHash: undefined,
 })
 
 export type Transaction = RecordOf<TransactionProps>