WA-521 Adapt components to new API model refactor

src/routes/safe/component/Safe/index.jsx

@@ -77,7 +77,7 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
   onListTransactions = () => {
     const { safe } = this.props
 
-    this.setState({ component: <Transactions safeName={safe.get('name')} safeAddress={safe.get('address')} /> })
+    this.setState({ component: <Transactions threshold={safe.get('threshold')} safeName={safe.get('name')} safeAddress={safe.get('address')} /> })
   }
 
   onEditThreshold = () => {

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

@@ -27,10 +27,11 @@ type Props = Open & WithStyles & {
   threshold: number,
 }
 
-const GnoConfirmation = ({ owner, status, hash }: ConfirmationProps) => {
+const GnoConfirmation = ({ owner, type, hash }: ConfirmationProps) => {
   const address = owner.get('address')
-  const text = status ? 'Confirmed' : 'Not confirmed'
+  const confirmed = type === 'confirmed'
-  const hashText = status ? `Confirmation hash: ${hash}` : undefined
+  const text = confirmed ? 'Confirmed' : 'Not confirmed'
+  const hashText = confirmed ? `Confirmation hash: ${hash}` : undefined
 
   return (
     <React.Fragment>
@@ -70,7 +71,7 @@ const Confirmaitons = openHoc(({
           <GnoConfirmation
             key={confirmation.get('owner').get('address')}
             owner={confirmation.get('owner')}
-            status={confirmation.get('status')}
+            type={confirmation.get('type')}
             hash={confirmation.get('hash')}
           />
         ))}

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

@@ -26,6 +26,7 @@ import selector, { type SelectorProps } from './selector'
 type Props = Open & SelectorProps & {
   transaction: Transaction,
   safeName: string,
+  threshold: number,
   onProcessTx: (tx: Transaction, alreadyConfirmed: number) => void,
 }
 
@@ -35,15 +36,14 @@ class GnoTransaction extends React.PureComponent<Props, {}> {
   onProccesClick = () => this.props.onProcessTx(this.props.transaction, this.props.confirmed)
 
   hasConfirmed = (userAddress: string, confirmations: List<Confirmation>): boolean =>
-    confirmations.filter((conf: Confirmation) => sameAddress(userAddress, conf.get('owner').get('address')) && conf.get('status')).count() > 0
+    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,
+      open, toggle, transaction, confirmed, safeName, userAddress, executionHash, threshold,
     } = this.props
 
-    const txHash = transaction.get('tx')
+    const confirmationText = executionHash ? 'Already executed' : `${confirmed} of the ${threshold} confirmations needed`
-    const confirmationText = txHash ? 'Already executed' : `${confirmed} of the ${transaction.get('threshold')} confirmations needed`
     const userConfirmed = this.hasConfirmed(userAddress, transaction.get('confirmations'))
 
     return (
@@ -72,19 +72,19 @@ class GnoTransaction extends React.PureComponent<Props, {}> {
         </Row>
         <Row>
           <ListItem>
-            { txHash &&
+            { executionHash &&
               <React.Fragment>
                 <Avatar><CompareArrows /></Avatar>
-                <ListItemText cut primary="Transaction Hash" secondary={txHash} />
+                <ListItemText cut primary="Transaction Hash" secondary={executionHash} />
               </React.Fragment>
             }
-            { !txHash && userConfirmed &&
+            { !executionHash && userConfirmed &&
               <React.Fragment>
                 <Avatar><CompareArrows /></Avatar>
                 <ListItemText cut primary="Confirmed" secondary="Waiting for the rest of confirmations" />
               </React.Fragment>
             }
-            { !txHash && !userConfirmed &&
+            { !executionHash && !userConfirmed &&
               <Button
                 variant="raised"
                 color="primary"
@@ -100,7 +100,7 @@ class GnoTransaction extends React.PureComponent<Props, {}> {
             safeName={safeName}
             confirmations={transaction.get('confirmations')}
             destination={transaction.get('destination')}
-            threshold={transaction.get('threshold')}
+            threshold={threshold}
           /> }
         <Hairline />
       </React.Fragment>

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

@@ -1,14 +1,34 @@
 // @flow
 import { createStructuredSelector } from 'reselect'
 import { confirmationsTransactionSelector } from '~/routes/safe/store/selectors/index'
-import { userAccountSelector } from '~/wallets/store/selectors/index'
+import { userAccountSelector } from '~/wallets/store/selectors'
+import { type Transaction } from '~/routes/safe/store/model/transaction'
+import { type GlobalState } from '~/store'
+import { type Confirmation } from '~/routes/safe/store/model/confirmation'
 
 export type SelectorProps = {
   confirmed: confirmationsTransactionSelector,
   userAddress: 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') === 'executed')
+
+  return executedConf.get('hash')
 }
 
 export default createStructuredSelector({
+  executionHash: transactionHashSector,
   confirmed: confirmationsTransactionSelector,
   userAddress: userAccountSelector,
 })

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

@@ -11,6 +11,7 @@ import actions, { type Actions } from './actions'
 type Props = SelectorProps & Actions & {
   safeName: string,
   safeAddress: string,
+  threshold: number,
 
 }
 class Transactions extends React.Component<Props, {}> {
@@ -24,13 +25,13 @@ class Transactions extends React.Component<Props, {}> {
   }
 
   render() {
-    const { transactions, safeName } = this.props
+    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} />)
+          ? transactions.map((tx: Transaction) => <GnoTransaction key={tx.get('nonce')} safeName={safeName} onProcessTx={this.onProcessTx} transaction={tx} threshold={threshold} />)
           : <NoTransactions />
         }
       </React.Fragment>

src/routes/safe/container/selector.js

@@ -5,7 +5,7 @@ import { safeSelector, type RouterProps, type SafeSelectorProps } from '~/routes
 import { providerNameSelector, userAccountSelector } from '~/wallets/store/selectors/index'
 import { type Safe } from '~/routes/safe/store/model/safe'
 import { type Owner } from '~/routes/safe/store/model/owner'
-import { type GlobalState } from '~/store/index'
+import { type GlobalState } from '~/store'
 import { sameAddress } from '~/wallets/ethAddresses'
 import { activeTokensSelector } from '~/routes/tokens/store/selectors'
 import { type Token } from '~/routes/tokens/store/model/token'

src/routes/safe/store/selectors/index.js

@@ -58,7 +58,7 @@ export const confirmationsTransactionSelector: Selector<GlobalState, Transaction
       return 0
     }
 
-    return confirmations.filter(((confirmation: Confirmation) => confirmation.get('status'))).count()
+    return confirmations.filter(((confirmation: Confirmation) => confirmation.get('type') === 'confirmation')).count()
   },
 )