tx descriptions for settings

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

@@ -27,35 +27,83 @@ type Props = {
   tx: Transaction,
 }
 
-const TxDescription = ({ tx, classes }: Props) => {
+type TransferDescProps = {
-  const {
+  value: string,
-    recipient, value, modifySettingsTx, replacedOwner, removedOwner, addedOwner, newThreshold,
+  symbol: string,
-  } = getTxData(tx)
+  recipient: string,
+}
 
-  return (
+type DescriptionDescProps = {
-    <Block className={classes.txDataContainer}>
+  removedOwner?: string,
+  addedOwner?: string,
+  newThreshold?: string,
+}
+
+type AddressLinkProps = {
+  address: string
+}
+
+const RinkebyAddressLink = ({ address }: AddressLinkProps) => (
+  <a href={getEtherScanLink(address, 'rinkeby')} target="_blank" rel="noopener noreferrer">
+    {shortVersionOf(address, 4)}
+    <OpenInNew style={openIconStyle} />
+  </a>
+)
+
+const TransferDescription = ({ value = '', symbol, recipient }: TransferDescProps) => (
   <Paragraph noMargin>
-        {modifySettingsTx ? (
-          <Bold>Modify Safe Settings</Bold>
-        ) : (
-          <>
     <Bold>
       Send
       {' '}
       {value}
       {' '}
-              {tx.symbol}
+      {symbol}
       {' '}
 to:
     </Bold>
     <br />
-            <a href={getEtherScanLink(recipient, 'rinkeby')} target="_blank" rel="noopener noreferrer">
+    <RinkebyAddressLink address={recipient} />
-              {shortVersionOf(recipient, 4)}
-              <OpenInNew style={openIconStyle} />
-            </a>
-          </>
-        )}
   </Paragraph>
+)
+
+const SettingsDescription = ({ removedOwner, addedOwner, newThreshold }: DescriptionDescProps) => (
+  <>
+    {newThreshold && (
+      <Paragraph>
+        <Bold>Change required confirmations:</Bold>
+        <br />
+        {newThreshold}
+      </Paragraph>
+    )}
+    {removedOwner && (
+      <Paragraph>
+        <Bold>Remove owner:</Bold>
+        <br />
+        <RinkebyAddressLink address={removedOwner} />
+      </Paragraph>
+    )}
+    {addedOwner && (
+      <Paragraph>
+        <Bold>Add owner:</Bold>
+        <br />
+        <RinkebyAddressLink address={addedOwner} />
+      </Paragraph>
+    )}
+  </>
+)
+
+const TxDescription = ({ tx, classes }: Props) => {
+  const {
+    recipient, value, modifySettingsTx, removedOwner, addedOwner, newThreshold,
+  } = getTxData(tx)
+
+  return (
+    <Block className={classes.txDataContainer}>
+      {modifySettingsTx ? (
+        <SettingsDescription removedOwner={removedOwner} newThreshold={newThreshold} addedOwner={addedOwner} />
+      ) : (
+        <TransferDescription value={value} symbol={tx.symbol} recipient={recipient} />
+      )}
     </Block>
   )
 }

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/TxDescription/utils.js

@@ -5,7 +5,16 @@ import { getWeb3 } from '~/logic/wallets/getWeb3'
 const web3 = getWeb3()
 const { toBN, fromWei } = web3.utils
 
-export const getTxData = (tx: Transaction) => {
+type DecodedTxData = {
+  recipient: string,
+  value?: string,
+  modifySettingsTx?: boolean,
+  removedOwner?: string,
+  newThreshold?: string,
+  addedOwner?: string,
+}
+
+export const getTxData = (tx: Transaction): DecodedTxData => {
   const txData = {}
 
   if (tx.isTokenTransfer && tx.decodedParams) {
@@ -29,7 +38,7 @@ export const getTxData = (tx: Transaction) => {
         txData.addedOwner = tx.decodedParams.args[1]
         txData.newThreshold = tx.decodedParams.args[1]
       } else if (tx.decodedParams.methodName === 'swapOwner') {
-        txData.replacedOwner = tx.decodedParams.args[0]
+        txData.addedOwner = tx.decodedParams.args[0]
         txData.removedOwner = tx.decodedParams.args[1]
         txData.newThreshold = tx.decodedParams.args[2]
       }