(feature): [Safe Apps] App Transaction List Details (#601)

* Adding IconText component

* Get origin for TXs in Redux

* Adding Icon and name app to transaction list

* Fix customTx condition

* Fix HTML element for text

* simplify condition

src/components-v2/dataDisplay/IconText/index.js

@@ -0,0 +1,25 @@
+// @flow
+import React from 'react'
+import styled from 'styled-components'
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+const Icon = styled.img`
+  max-width: 15px;
+  max-height: 15px;
+  margin-right: 5px;
+`
+const Text = styled.span`
+  height: 17px;
+`
+
+const IconText = ({ iconUrl, text }: { iconUrl: string, text: string }) => (
+  <Wrapper>
+    <Icon src={iconUrl} alt={text} />
+    <Text>{text}</Text>
+  </Wrapper>
+)
+
+export default IconText

src/components-v2/dataDisplay/index.js

@@ -1,3 +1,4 @@
 // @flow
 export { default as DividerLine } from './DividerLine'
 export { default as TextBox } from './TextBox'
+export { default as IconText } from './IconText'

src/routes/safe/components/Apps/appsList.js

@@ -1,5 +1,5 @@
 // @flow
-export default [
+const appList = [
   {
     id: 1,
     name: 'Compound',
@@ -38,3 +38,7 @@ export default [
     },
   },
 ]
+
+export default appList
+
+export const getAppInfo = (appName: string) => appList.find(app => app.name === appName)

src/routes/safe/components/Transactions/TxsTable/TxType/index.jsx

@@ -1,21 +1,13 @@
 // @flow
-import { makeStyles } from '@material-ui/core/styles'
 import * as React from 'react'
-
-import CustomTxIcon from './assets/custom.svg'
-import IncomingTxIcon from './assets/incoming.svg'
-import OutgoingTxIcon from './assets/outgoing.svg'
-import SettingsTxIcon from './assets/settings.svg'
-import { styles } from './style'
-
-import Block from '~/components/layout/Block'
-import Img from '~/components/layout/Img'
-import Paragraph from '~/components/layout/Paragraph/'
 import { type TransactionType } from '~/routes/safe/store/models/transaction'
+import { getAppInfo } from '~/routes/safe/components/Apps/appsList'
+import { IconText } from '~/components-v2'
 
-type Props = {
-  txType: TransactionType,
-}
+import OutgoingTxIcon from './assets/outgoing.svg'
+import IncomingTxIcon from './assets/incoming.svg'
+import CustomTxIcon from './assets/custom.svg'
+import SettingsTxIcon from './assets/settings.svg'
 
 const typeToIcon = {
   outgoing: OutgoingTxIcon,
@@ -37,19 +29,11 @@ const typeToLabel = {
   upgrade: 'Contract Upgrade',
 }
 
-const useStyles = makeStyles(styles)
+const TxType = ({ txType, origin }: { txType: TransactionType, origin: string | null }) => {
+  const iconUrl = txType === 'third-party-app' ? getAppInfo(origin).iconUrl : typeToIcon[txType]
+  const text = txType === 'third-party-app' ? origin : typeToLabel[txType]
 
-const TxType = ({ txType }: Props) => {
-  const classes = useStyles()
-
-  return (
-    <Block className={classes.container}>
-      <Img alt={typeToLabel[txType]} className={classes.img} src={typeToIcon[txType]} />
-      <Paragraph className={classes.type} noMargin>
-        {typeToLabel[txType]}
-      </Paragraph>
-    </Block>
-  )
+  return <IconText iconUrl={iconUrl} text={text} />
 }
 
 export default TxType

src/routes/safe/components/Transactions/TxsTable/TxType/style.js

@@ -1,12 +0,0 @@
-// @flow
-export const styles = () => ({
-  container: {
-    display: 'flex',
-  },
-  img: {
-    marginRight: '5px',
-  },
-  type: {
-    height: '17px',
-  },
-})

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

@@ -75,7 +75,7 @@ const getTransactionTableData = (tx: Transaction, cancelTx: ?Transaction): Trans
   } else if (tx.cancellationTx) {
     txType = 'cancellation'
   } else if (tx.customTx) {
-    txType = 'custom'
+    txType = tx.origin ? 'third-party-app' : 'custom'
   } else if (tx.creationTx) {
     txType = 'creation'
   } else if (tx.upgradeTx) {
@@ -84,7 +84,7 @@ const getTransactionTableData = (tx: Transaction, cancelTx: ?Transaction): Trans
 
   return {
     [TX_TABLE_ID]: tx.blockNumber,
-    [TX_TABLE_TYPE_ID]: <TxType txType={txType} />,
+    [TX_TABLE_TYPE_ID]: <TxType origin={tx.origin} txType={txType} />,
     [TX_TABLE_DATE_ID]: txDate ? formatDate(txDate) : '',
     [buildOrderFieldFrom(TX_TABLE_DATE_ID)]: txDate ? getTime(parseISO(txDate)) : null,
     [TX_TABLE_AMOUNT_ID]: getTxAmount(tx),

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

@@ -92,8 +92,8 @@ export const buildTransactionFrom = async (safeAddress: string, tx: TxServiceMod
   const cancellationTx = sameAddress(tx.to, safeAddress) && Number(tx.value) === 0 && !tx.data
   const isSendTokenTx = isTokenTransfer(tx.data, Number(tx.value))
   const isMultiSendTx = isMultisendTransaction(tx.data, Number(tx.value))
-  const customTx = !sameAddress(tx.to, safeAddress) && !!tx.data && !isSendTokenTx && !isMultiSendTx
   const isUpgradeTx = isMultiSendTx && isUpgradeTransaction(tx.data)
+  const customTx = !sameAddress(tx.to, safeAddress) && !!tx.data && !isSendTokenTx && !isUpgradeTx
 
   let refundParams = null
   if (tx.gasPrice > 0) {
@@ -176,6 +176,7 @@ export const buildTransactionFrom = async (safeAddress: string, tx: TxServiceMod
     customTx,
     cancellationTx,
     creationTx: tx.creationTx,
+    origin: tx.origin,
   })
 }
 

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

@@ -50,6 +50,7 @@ export type TransactionProps = {
   decodedParams?: Object,
   refundParams?: Object,
   type: string,
+  origin: string | null,
 }
 
 export const makeTransaction: RecordFactory<TransactionProps> = Record({
@@ -85,6 +86,7 @@ export const makeTransaction: RecordFactory<TransactionProps> = Record({
   decodedParams: {},
   refundParams: null,
   type: 'outgoing',
+  origin: null,
 })
 
 export type Transaction = RecordOf<TransactionProps>