Remove account ref in operations list

src/components/AccountPage/index.js

@@ -157,9 +157,10 @@ class AccountPage extends PureComponent<Props, State> {
           />
         </Box>
         <OperationsList
-          title={t('account:lastOperations')}
+          account={account}
-          operations={account.operations}
           minConfirmations={account.settings.minConfirmations}
+          operations={account.operations}
+          title={t('account:lastOperations')}
         />
       </Box>
     )

src/components/DashboardPage/index.js

@@ -191,10 +191,10 @@ class DashboardPage extends PureComponent<Props, State> {
             </Box>
             <OperationsList
               canShowMore
-              title={t('dashboard:recentActivity')}
-              withAccounts
-              operations={allOperations}
               onAccountClick={account => push(`/account/${account.id}`)}
+              operations={allOperations}
+              title={t('dashboard:recentActivity')}
+              withAccount
             />
           </Fragment>
         )}

src/components/OperationsList/index.js

@@ -9,7 +9,7 @@ import noop from 'lodash/noop'
 import isEqual from 'lodash/isEqual'
 import { getIconByCoinType } from '@ledgerhq/currencies/react'
 
-import type { Operation as OperationType, T } from 'types/common'
+import type { Account, Operation as OperationType, T } from 'types/common'
 
 import IconAngleDown from 'icons/AngleDown'
 import Box, { Card } from 'components/base/Box'
@@ -98,18 +98,21 @@ const ShowMore = styled(Box).attrs({
 `
 
 const Operation = ({
+  account,
   t,
   onAccountClick,
   tx,
-  withAccounts,
+  withAccount,
   minConfirmations,
 }: {
+  account: Account | null,
   t: T,
   onAccountClick?: Function,
   tx: OperationType,
-  withAccounts?: boolean,
+  withAccount?: boolean,
   minConfirmations: number,
 }) => {
+  const acc = account || tx.account
   const time = moment(tx.receivedAt)
   const Icon = getIconByCoinType(get(tx, 'account.currency.coinType'))
   return (
@@ -120,24 +123,20 @@ const Operation = ({
           <Hour>{time.format('HH:mm')}</Hour>
         </Box>
       </Cell>
-      {withAccounts &&
+      {withAccount &&
-        tx.account && (
+        acc && (
           <Cell
             size={ACCOUNT_COL_SIZE}
             horizontal
             flow={2}
             style={{ cursor: 'pointer' }}
-            onClick={() => onAccountClick && onAccountClick(tx.account)}
+            onClick={() => onAccountClick && onAccountClick(acc)}
           >
-            <Box
+            <Box alignItems="center" justifyContent="center" style={{ color: acc.currency.color }}>
-              alignItems="center"
-              justifyContent="center"
-              style={{ color: tx.account.currency.color }}
-            >
               {Icon && <Icon size={16} />}
             </Box>
             <Box ff="Open Sans|SemiBold" fontSize={4} color="dark">
-              {tx.account.name}
+              {acc.name}
             </Box>
           </Cell>
         )}
@@ -166,13 +165,7 @@ const Operation = ({
         </Box>
       </Cell>
       <Cell size={AMOUNT_COL_SIZE} justifyContent="flex-end">
-        <FormattedVal
+        <FormattedVal val={tx.amount} unit={acc && acc.unit} showCode fontSize={4} alwaysShowSign />
-          val={tx.amount}
-          unit={get(tx, 'account.unit')}
-          showCode
-          fontSize={4}
-          alwaysShowSign
-        />
       </Cell>
       <Cell size={CONFIRMATION_COL_SIZE} px={0} align="center" justify="flex-start">
         <ConfirmationCheck
@@ -187,23 +180,25 @@ const Operation = ({
 
 Operation.defaultProps = {
   onAccountClick: noop,
-  withAccounts: false,
+  withAccount: false,
 }
 
 type Props = {
-  t: T,
+  account: Account | null,
+  canShowMore: boolean,
+  minConfirmations: number,
   onAccountClick?: Function,
   operations: OperationType[],
-  withAccounts?: boolean,
+  t: T,
-  minConfirmations: number,
   title?: string,
-  canShowMore: boolean,
+  withAccount?: boolean,
 }
 
 class OperationsList extends Component<Props> {
   static defaultProps = {
+    account: null,
     onAccountClick: noop,
-    withAccounts: false,
+    withAccount: false,
     minConfirmations: 2,
     canShowMore: false,
   }
@@ -230,13 +225,14 @@ class OperationsList extends Component<Props> {
 
   render() {
     const {
-      operations,
+      account,
-      title,
-      withAccounts,
-      onAccountClick,
-      minConfirmations,
       canShowMore,
+      minConfirmations,
+      onAccountClick,
+      operations,
       t,
+      title,
+      withAccount,
     } = this.props
 
     this._hashCache = this.getHashCache(operations)
@@ -246,7 +242,7 @@ class OperationsList extends Component<Props> {
         <Card flow={1} title={title} p={0}>
           <Box horizontal pt={4}>
             <HeaderCol size={DATE_COL_SIZE}>{t('operationsList:date')}</HeaderCol>
-            {withAccounts && (
+            {withAccount && (
               <HeaderCol size={ACCOUNT_COL_SIZE}>{t('operationsList:account')}</HeaderCol>
             )}
             <HeaderCol grow>{t('operationsList:address')}</HeaderCol>
@@ -257,14 +253,15 @@ class OperationsList extends Component<Props> {
           </Box>
 
           <Box>
-            {operations.map(trans => (
+            {operations.map(tx => (
               <Operation
+                account={account}
                 t={t}
-                key={`{${trans.hash}-${trans.account ? trans.account.id : ''}`}
+                key={`{${tx.hash}${tx.account ? `-${tx.account.id}` : ''}`}
-                withAccounts={withAccounts}
+                withAccount={withAccount}
                 onAccountClick={onAccountClick}
                 minConfirmations={minConfirmations}
-                tx={trans}
+                tx={tx}
               />
             ))}
           </Box>

src/reducers/accounts.js

@@ -99,31 +99,12 @@ export function canCreateAccount(state: State): boolean {
 }
 
 export function serializeAccounts(accounts: Array<Object>) {
-  return accounts.map((account, key) => {
+  return accounts.map((account, key) => ({
-    const a = {
+    ...account,
-      id: account.id,
+    currency: getCurrencyByCoinType(account.coinType),
-      address: account.address,
+    name: account.name || `${key}`,
-      addresses: account.addresses,
+    unit: account.unit || getDefaultUnitByCoinType(account.coinType),
-      balance: account.balance,
+  }))
-      balanceByDay: account.balanceByDay,
-      coinType: account.coinType,
-      currency: getCurrencyByCoinType(account.coinType),
-      index: account.index,
-      name: account.name || `${key}`,
-      path: account.path,
-      rootPath: account.rootPath,
-      unit: account.unit || getDefaultUnitByCoinType(account.coinType),
-      settings: account.settings,
-    }
-
-    return {
-      ...a,
-      operations: account.operations.map(t => ({
-        ...t,
-        account: a,
-      })),
-    }
-  })
 }
 
 export function deserializeAccounts(accounts: Account[]) {
@@ -136,11 +117,11 @@ export function deserializeAccounts(accounts: Account[]) {
     coinType: account.coinType,
     index: account.index,
     name: account.name,
+    operations: account.operations,
     path: account.path,
     rootPath: account.rootPath,
-    operations: account.operations.map(({ account, ...t }) => t),
-    unit: account.unit,
     settings: account.settings,
+    unit: account.unit,
   }))
 }