remove old/unused transactions route code

src/routes/safe/components/Layout.jsx

@@ -18,8 +18,9 @@ import {
   sm, xs, secondary, smallFontSize, border, secondaryText,
 } from '~/theme/variables'
 import { copyToClipboard } from '~/utils/clipboard'
+import { type Actions } from '../container/actions'
 import Balances from './Balances'
-import Transactions from './TransactionsNew'
+import Transactions from './Transactions'
 import Settings from './Settings'
 
 export const BALANCES_TAB_BTN_TEST_ID = 'balances-tab-btn'
@@ -31,13 +32,9 @@ type State = {
   tabIndex: number,
 }
 
-type Props = SelectorProps & {
+type Props = SelectorProps & Actions & {
   classes: Object,
   granted: boolean,
-  updateSafe: Function,
-  createTransaction: Function,
-  processTransaction: Function,
-  fetchTransactions: Function,
 }
 
 const openIconStyle = {

src/routes/safe/components/Transactions/Collapsed/Confirmations.jsx

@@ -1,83 +0,0 @@
-// @flow
-import * as React from 'react'
-import openHoc, { type Open } from '~/components/hoc/OpenHoc'
-import { withStyles } from '@material-ui/core/styles'
-import Collapse from '@material-ui/core/Collapse'
-import IconButton from '@material-ui/core/IconButton'
-import ListItemText from '~/components/List/ListItemText'
-import List from '@material-ui/core/List'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemIcon from '@material-ui/core/ListItemIcon'
-import Avatar from '@material-ui/core/Avatar'
-import Group from '@material-ui/icons/Group'
-import Person from '@material-ui/icons/Person'
-import ExpandLess from '@material-ui/icons/ExpandLess'
-import ExpandMore from '@material-ui/icons/ExpandMore'
-import { type WithStyles } from '~/theme/mui'
-import { type Confirmation, type ConfirmationProps } from '~/routes/safe/store/models/confirmation'
-
-const styles = {
-  nested: {
-    paddingLeft: '40px',
-  },
-}
-
-type Props = Open & WithStyles & {
-  confirmations: List<Confirmation>,
-  threshold: number,
-}
-
-const GnoConfirmation = ({ owner, type, hash }: ConfirmationProps) => {
-  const address = owner.get('address')
-  const confirmed = type === 'confirmation'
-  const text = confirmed ? 'Confirmed' : 'Not confirmed'
-  const hashText = confirmed ? `Confirmation hash: ${hash}` : undefined
-
-  return (
-    <React.Fragment>
-      <ListItem key={address}>
-        <ListItemIcon>
-          <Person />
-        </ListItemIcon>
-        <ListItemText
-          cut
-          primary={`${owner.get('name')} [${text}]`}
-          secondary={hashText}
-        />
-      </ListItem>
-    </React.Fragment>
-  )
-}
-
-const Confirmaitons = openHoc(({
-  open, toggle, confirmations, threshold,
-}: Props) => (
-  <React.Fragment>
-    <ListItem onClick={toggle}>
-      <Avatar>
-        <Group />
-      </Avatar>
-      <ListItemText primary="Threshold" secondary={`${threshold} confirmation${threshold === 1 ? '' : 's'} needed`} />
-      <ListItemIcon>
-        {open
-          ? <IconButton disableRipple><ExpandLess /></IconButton>
-          : <IconButton disableRipple><ExpandMore /></IconButton>
-        }
-      </ListItemIcon>
-    </ListItem>
-    <Collapse in={open} timeout="auto" unmountOnExit>
-      <List component="div" disablePadding style={{ width: '100%' }}>
-        {confirmations.map(confirmation => (
-          <GnoConfirmation
-            key={confirmation.get('owner').get('address')}
-            owner={confirmation.get('owner')}
-            type={confirmation.get('type')}
-            hash={confirmation.get('hash')}
-          />
-        ))}
-      </List>
-    </Collapse>
-  </React.Fragment>
-))
-
-export default withStyles(styles)(Confirmaitons)

src/routes/safe/components/Transactions/Collapsed/index.jsx

@@ -1,52 +0,0 @@
-// @flow
-import * as React from 'react'
-import { List as ImmutableList } from 'immutable'
-import Row from '~/components/layout/Row'
-import Col from '~/components/layout/Col'
-import List from '@material-ui/core/List'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemText from '~/components/List/ListItemText'
-import Avatar from '@material-ui/core/Avatar'
-import Group from '@material-ui/icons/Group'
-import MailOutline from '@material-ui/icons/MailOutline'
-import { type Confirmation } from '~/routes/safe/store/models/confirmation'
-import Confirmations from './Confirmations'
-
-type Props = {
-  safeName: string,
-  confirmations: ImmutableList<Confirmation>,
-  destination: string,
-  threshold: number,
-}
-
-const listStyle = {
-  width: '100%',
-}
-
-class Collapsed extends React.PureComponent<Props, {}> {
-  render() {
-    const {
-      confirmations, destination, safeName, threshold,
-    } = this.props
-
-    return (
-      <Row>
-        <Col sm={12} top="xs" overflow>
-          <List style={listStyle}>
-            <ListItem>
-              <Avatar><Group /></Avatar>
-              <ListItemText primary={safeName} secondary="Safe Name" />
-            </ListItem>
-            <Confirmations confirmations={confirmations} threshold={threshold} />
-            <ListItem>
-              <Avatar><MailOutline /></Avatar>
-              <ListItemText primary="Destination" secondary={destination} />
-            </ListItem>
-          </List>
-        </Col>
-      </Row>
-    )
-  }
-}
-
-export default Collapsed

src/routes/safe/components/Transactions/NoTransactions/index.jsx

@@ -5,8 +5,10 @@ import Col from '~/components/layout/Col'
 import Row from '~/components/layout/Row'
 import Paragraph from '~/components/layout/Paragraph/index'
 
-const NoRights = () => (
+export const NO_TRANSACTION_ROW_TEST_ID = 'no-transaction-row'
-  <Row>
+
+const NoTransactions = () => (
+  <Row data-testid={NO_TRANSACTION_ROW_TEST_ID}>
     <Col xs={12} center="xs" sm={10} smOffset={2} start="sm" margin="md">
       <Paragraph size="lg">
         <Bold>No transactions found for this safe</Bold>
@@ -15,4 +17,4 @@ const NoRights = () => (
   </Row>
 )
 
-export default NoRights
+export default NoTransactions

src/routes/safe/components/Transactions/Transaction/index.jsx

@@ -1,131 +0,0 @@
-// @flow
-import * as React from 'react'
-import { List } from 'immutable'
-import { connect } from 'react-redux'
-import openHoc, { type Open } from '~/components/hoc/OpenHoc'
-import ExpandLess from '@material-ui/icons/ExpandLess'
-import ExpandMore from '@material-ui/icons/ExpandMore'
-import IconButton from '@material-ui/core/IconButton'
-import ListItemText from '~/components/List/ListItemText'
-import Row from '~/components/layout/Row'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemIcon from '@material-ui/core/ListItemIcon'
-import Avatar from '@material-ui/core/Avatar'
-import AttachMoney from '@material-ui/icons/AttachMoney'
-import Atm from '@material-ui/icons/LocalAtm'
-import DoneAll from '@material-ui/icons/DoneAll'
-import CompareArrows from '@material-ui/icons/CompareArrows'
-import Collapsed from '~/routes/safe/components/Transactions/Collapsed'
-import { type Transaction } from '~/routes/safe/store/models/transaction'
-import Hairline from '~/components/layout/Hairline/index'
-import Button from '~/components/layout/Button'
-import { sameAddress } from '~/logic/wallets/ethAddresses'
-import { type Confirmation } from '~/routes/safe/store/models/confirmation'
-import selector, { type SelectorProps } from './selector'
-
-type Props = Open &
-  SelectorProps & {
-    transaction: Transaction,
-    safeName: string,
-    threshold: number,
-    onProcessTx: (tx: Transaction, alreadyConfirmed: number) => void,
-  }
-
-export const PROCESS_TXS = 'PROCESS TRANSACTION'
-
-class GnoTransaction extends React.PureComponent<Props> {
-  onProccesClick = () => {
-    const { onProcessTx, transaction, confirmed } = this.props
-
-    onProcessTx(transaction, confirmed)
-  }
-
-  hasConfirmed = (userAddress: string, confirmations: List<Confirmation>): boolean => (
-    confirmations
-      .filter(
-        (conf: Confirmation) => (
-          sameAddress(userAddress, conf.get('owner').get('address')) && conf.get('type') === 'confirmation'
-        ),
-      )
-      .count() > 0
-  )
-
-  render() {
-    const {
-      open, toggle, transaction, confirmed, safeName, userAddress, executionHash, threshold,
-    } = this.props
-
-    const confirmationText = executionHash
-      ? 'Already executed'
-      : `${confirmed} of the ${threshold} confirmations needed`
-    const userConfirmed = this.hasConfirmed(userAddress, transaction.get('confirmations'))
-
-    return (
-      <React.Fragment>
-        <Row>
-          <ListItem onClick={toggle}>
-            <Avatar>
-              <Atm />
-            </Avatar>
-            <ListItemText primary="Tx Name" secondary={transaction.get('name')} />
-            <Avatar>
-              <AttachMoney />
-            </Avatar>
-            <ListItemText primary="Value" secondary={`${transaction.get('value')} ETH`} />
-            <Avatar>
-              <DoneAll />
-            </Avatar>
-            <ListItemText primary="Status" secondary={confirmationText} />
-            <ListItemIcon>
-              {open ? (
-                <IconButton disableRipple>
-                  <ExpandLess />
-                </IconButton>
-              ) : (
-                <IconButton disableRipple>
-                  <ExpandMore />
-                </IconButton>
-              )}
-            </ListItemIcon>
-          </ListItem>
-        </Row>
-        <Row>
-          <ListItem>
-            {executionHash && (
-              <React.Fragment>
-                <Avatar>
-                  <CompareArrows />
-                </Avatar>
-                <ListItemText cut primary="Transaction Hash" secondary={executionHash} />
-              </React.Fragment>
-            )}
-            {!executionHash && userConfirmed && (
-              <React.Fragment>
-                <Avatar>
-                  <CompareArrows />
-                </Avatar>
-                <ListItemText cut primary="Confirmed" secondary="Waiting for the rest of confirmations" />
-              </React.Fragment>
-            )}
-            {!executionHash && !userConfirmed && (
-              <Button variant="contained" color="primary" onClick={this.onProccesClick}>
-                {PROCESS_TXS}
-              </Button>
-            )}
-          </ListItem>
-        </Row>
-        {open && (
-          <Collapsed
-            safeName={safeName}
-            confirmations={transaction.get('confirmations')}
-            destination={transaction.get('destination')}
-            threshold={threshold}
-          />
-        )}
-        <Hairline margin="md" />
-      </React.Fragment>
-    )
-  }
-}
-
-export default openHoc(connect(selector)(GnoTransaction))

src/routes/safe/components/Transactions/Transaction/selector.js

@@ -1,34 +0,0 @@
-// @flow
-import { createStructuredSelector } from 'reselect'
-import { confirmationsTransactionSelector } from '~/routes/safe/store/selectors/index'
-import { userAccountSelector } from '~/logic/wallets/store/selectors'
-import { type Transaction } from '~/routes/safe/store/models/transaction'
-import { type GlobalState } from '~/store'
-import { type Confirmation } from '~/routes/safe/store/models/confirmation'
-
-export type SelectorProps = {
-  confirmed: typeof confirmationsTransactionSelector,
-  userAddress: typeof userAccountSelector,
-  executionHash: string,
-}
-
-type TxProps = {
-  transaction: Transaction,
-}
-
-const transactionHashSector = (state: GlobalState, props: TxProps) => {
-  if (!props.transaction) {
-    return undefined
-  }
-
-  const confirmations = props.transaction.get('confirmations')
-  const executedConf = confirmations.find((conf: Confirmation) => conf.get('type') === 'execution')
-
-  return executedConf ? executedConf.get('hash') : undefined
-}
-
-export default createStructuredSelector<Object, *>({
-  executionHash: transactionHashSector,
-  confirmed: confirmationsTransactionSelector,
-  userAddress: userAccountSelector,
-})

src/routes/safe/components/Transactions/actions.js

@@ -1,12 +0,0 @@
-// @flow
-import fetchTransactions from '~/routes/safe/store/actions/fetchTransactions'
-
-type FetchTransactions = typeof fetchTransactions
-
-export type Actions = {
-  fetchTransactions: FetchTransactions,
-}
-
-export default {
-  fetchTransactions,
-}

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

@@ -1,65 +1,58 @@
 // @flow
-import * as React from 'react'
+import React, { useEffect } from 'react'
 import { List } from 'immutable'
-import { connect } from 'react-redux'
-import { type Transaction } from '~/routes/safe/store/models/transaction'
 import NoTransactions from '~/routes/safe/components/Transactions/NoTransactions'
-import GnoTransaction from '~/routes/safe/components/Transactions/Transaction'
+import TxsTable from '~/routes/safe/components/Transactions/TxsTable'
-import { sameAddress } from '~/logic/wallets/ethAddresses'
+import { type Transaction } from '~/routes/safe/store/models/transaction'
-import { type Confirmation } from '~/routes/safe/store/models/confirmation'
+import { type Owner } from '~/routes/safe/store/models/owner'
-import { processTransaction } from '~/logic/safe/safeFrontendOperations'
-import selector, { type SelectorProps } from './selector'
-import actions, { type Actions } from './actions'
 
-type Props = SelectorProps & Actions & {
+type Props = {
-  safeName: string,
   safeAddress: string,
   threshold: number,
-
+  fetchTransactions: Function,
-}
+  transactions: List<Transaction>,
-class Transactions extends React.Component<Props, {}> {
+  owners: List<Owner>,
-  componentDidMount() {
+  userAddress: string,
-    const { fetchTransactions, safeAddress } = this.props
+  granted: boolean,
-
+  createTransaction: Function,
-    fetchTransactions(safeAddress)
+  processTransaction: Function,
-  }
-
-  onProcessTx = async (tx: Transaction, alreadyConfirmed: number) => {
-    const {
-      fetchTransactions, safeAddress, userAddress, threshold,
-    } = this.props
-
-    const confirmations = tx.get('confirmations')
-    const usersConfirmed = List(confirmations.map((confirmation: Confirmation) =>
-      confirmation.get('owner').get('address')))
-    const userHasAlreadyConfirmed = confirmations.filter((confirmation: Confirmation) => {
-      const ownerAddress = confirmation.get('owner').get('address')
-      const samePerson = sameAddress(ownerAddress, userAddress)
-
-      return samePerson && confirmation.get('type') === 'confirmation'
-    }).count() > 0
-
-    if (userHasAlreadyConfirmed) {
-      throw new Error('Owner has already confirmed this transaction')
-    }
-
-    await processTransaction(safeAddress, tx, alreadyConfirmed, userAddress, threshold, usersConfirmed)
-    fetchTransactions(safeAddress)
-  }
-
-  render() {
-    const { transactions, safeName, threshold } = this.props
-    const hasTransactions = transactions.count() > 0
-
-    return (
-      <React.Fragment>
-        { hasTransactions
-          ? transactions.map((tx: Transaction) => <GnoTransaction key={tx.get('nonce')} safeName={safeName} onProcessTx={this.onProcessTx} transaction={tx} threshold={threshold} />)
-          : <NoTransactions />
-        }
-      </React.Fragment>
-    )
-  }
 }
 
-export default connect(selector, actions)(Transactions)
+const Transactions = ({
+  transactions = List(),
+  owners,
+  threshold,
+  userAddress,
+  granted,
+  safeAddress,
+  createTransaction,
+  processTransaction,
+  fetchTransactions,
+}: Props) => {
+  useEffect(() => {
+    fetchTransactions(safeAddress)
+  }, [safeAddress])
+
+  const hasTransactions = transactions.size > 0
+
+  return (
+    <React.Fragment>
+      {hasTransactions ? (
+        <TxsTable
+          transactions={transactions}
+          threshold={threshold}
+          owners={owners}
+          userAddress={userAddress}
+          granted={granted}
+          safeAddress={safeAddress}
+          createTransaction={createTransaction}
+          processTransaction={processTransaction}
+        />
+      ) : (
+        <NoTransactions />
+      )}
+    </React.Fragment>
+  )
+}
+
+export default Transactions

src/routes/safe/components/Transactions/selector.js

@@ -1,16 +0,0 @@
-// @flow
-import { List } from 'immutable'
-import { createStructuredSelector } from 'reselect'
-import { type Transaction } from '~/routes/safe/store/models/transaction'
-import { safeTransactionsSelector } from '~/routes/safe/store/selectors/index'
-import { userAccountSelector } from '~/logic/wallets/store/selectors'
-
-export type SelectorProps = {
-  transactions: List<Transaction>,
-  userAddress: typeof userAccountSelector,
-}
-
-export default createStructuredSelector<Object, *>({
-  transactions: safeTransactionsSelector,
-  userAddress: userAccountSelector,
-})

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

@@ -1,20 +0,0 @@
-// @flow
-import * as React from 'react'
-import Bold from '~/components/layout/Bold'
-import Col from '~/components/layout/Col'
-import Row from '~/components/layout/Row'
-import Paragraph from '~/components/layout/Paragraph/index'
-
-export const NO_TRANSACTION_ROW_TEST_ID = 'no-transaction-row'
-
-const NoTransactions = () => (
-  <Row data-testid={NO_TRANSACTION_ROW_TEST_ID}>
-    <Col xs={12} center="xs" sm={10} smOffset={2} start="sm" margin="md">
-      <Paragraph size="lg">
-        <Bold>No transactions found for this safe</Bold>
-      </Paragraph>
-    </Col>
-  </Row>
-)
-
-export default NoTransactions

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

@@ -1,58 +0,0 @@
-// @flow
-import React, { useEffect } from 'react'
-import { List } from 'immutable'
-import NoTransactions from '~/routes/safe/components/TransactionsNew/NoTransactions'
-import TxsTable from '~/routes/safe/components/TransactionsNew/TxsTable'
-import { type Transaction } from '~/routes/safe/store/models/transaction'
-import { type Owner } from '~/routes/safe/store/models/owner'
-
-type Props = {
-  safeAddress: string,
-  threshold: number,
-  fetchTransactions: Function,
-  transactions: List<Transaction>,
-  owners: List<Owner>,
-  userAddress: string,
-  granted: boolean,
-  createTransaction: Function,
-  processTransaction: Function,
-}
-
-const Transactions = ({
-  transactions = List(),
-  owners,
-  threshold,
-  userAddress,
-  granted,
-  safeAddress,
-  createTransaction,
-  processTransaction,
-  fetchTransactions,
-}: Props) => {
-  useEffect(() => {
-    fetchTransactions(safeAddress)
-  }, [safeAddress])
-
-  const hasTransactions = transactions.size > 0
-
-  return (
-    <React.Fragment>
-      {hasTransactions ? (
-        <TxsTable
-          transactions={transactions}
-          threshold={threshold}
-          owners={owners}
-          userAddress={userAddress}
-          granted={granted}
-          safeAddress={safeAddress}
-          createTransaction={createTransaction}
-          processTransaction={processTransaction}
-        />
-      ) : (
-        <NoTransactions />
-      )}
-    </React.Fragment>
-  )
-}
-
-export default Transactions

src/test/safe.dom.funds.threshold>1.test.js

@@ -10,10 +10,10 @@ import '@testing-library/jest-dom/extend-expect'
 import { BALANCE_ROW_TEST_ID } from '~/routes/safe/components/Balances'
 import { fillAndSubmitSendFundsForm } from './utils/transactions'
 import { TRANSACTIONS_TAB_BTN_TEST_ID } from '~/routes/safe/components/Layout'
-import { TRANSACTION_ROW_TEST_ID } from '~/routes/safe/components/TransactionsNew/TxsTable'
+import { TRANSACTION_ROW_TEST_ID } from '~/routes/safe/components/Transactions/TxsTable'
 import { useTestAccountAt, resetTestAccount } from './utils/accounts'
-import { CONFIRM_TX_BTN_TEST_ID, EXECUTE_TX_BTN_TEST_ID } from '~/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersColumn/ButtonRow'
+import { CONFIRM_TX_BTN_TEST_ID, EXECUTE_TX_BTN_TEST_ID } from '~/routes/safe/components/Transactions/TxsTable/ExpandedTx/OwnersColumn/ButtonRow'
-import { APPROVE_TX_MODAL_SUBMIT_BTN_TEST_ID } from '~/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/ApproveTxModal'
+import { APPROVE_TX_MODAL_SUBMIT_BTN_TEST_ID } from '~/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal'
 
 afterEach(resetTestAccount)
 

src/test/utils/transactions/transactionList.helper.js

@@ -3,12 +3,12 @@ import { fireEvent } from '@testing-library/react'
 import { sleep } from '~/utils/timer'
 import { shortVersionOf } from '~/logic/wallets/ethAddresses'
 import { TRANSACTIONS_TAB_BTN_TEST_ID } from '~/routes/safe/components/Layout'
-import { TRANSACTION_ROW_TEST_ID } from '~/routes/safe/components/TransactionsNew/TxsTable'
+import { TRANSACTION_ROW_TEST_ID } from '~/routes/safe/components/Transactions/TxsTable'
 import {
   TRANSACTIONS_DESC_ADD_OWNER_TEST_ID,
   TRANSACTIONS_DESC_REMOVE_OWNER_TEST_ID,
   TRANSACTIONS_DESC_SEND_TEST_ID,
-} from '~/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/TxDescription'
+} from '~/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription'
 
 export const getLastTransaction = async (SafeDom: React.Component<any, any>) => {
   // Travel to transactions