feat(Layout): remove Remote data dep. on transaction list item

packages/blockchain-info-components/index.d.ts

@@ -3,6 +3,7 @@ import { DefaultTheme } from 'styled-components'
 
 export function BlockchainLoader(...args: any): any
 export function Button(...args: any): any
+export function ComponentDropdown(...args): any
 export function FontGlobalStyles(...args: any): any
 export function Icon(...args: any): any
 export function IconGlobalStyles(...args: any): any
@@ -24,5 +25,6 @@ export const Text: StatelessComponent<{
   style?: CSSProperties
   uppercase?: boolean
   lineHeight?: string
+  onClick?: () => void
 }>
 export function TextGroup(...args: any): any

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionFilters/index.tsx

@@ -0,0 +1,72 @@
+import { actions, selectors } from 'data'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { RootState } from 'data/rootReducer'
+import Menu from './template'
+import React from 'react'
+
+// FIXME: TypeScript use CoinType
+type OwnProps = {
+  coin: 'BTC' | 'BCH' | 'ETH' | 'PAX' | 'XLM'
+}
+
+type LinkStatePropsType = {
+  legacyEthAddress: null | boolean
+}
+
+type LinkDispatchPropsType = {
+  modalActions: typeof actions.modals,
+  bchActions: typeof actions.components.bchTransactions,
+  btcActions: typeof actions.components.btcTransactions
+}
+
+type Props = OwnProps & LinkDispatchPropsType & LinkStatePropsType
+
+class TransactionFiltersContainer extends React.PureComponent<Props> {
+  onShowPrivateKey = () => {
+    const { coin, modalActions } = this.props
+
+    if (coin === 'ETH')
+      modalActions.showModal('ShowEthPrivateKey', { isLegacy: false })
+    if (coin === 'XLM') modalActions.showModal('ShowXlmPrivateKey')
+  }
+
+  onShowEthPrivateKeyLegacy = () => {
+    this.props.modalActions.showModal('ShowEthPrivateKey', { isLegacy: true })
+  }
+
+  handleClickReporting = () => {
+    const { coin } = this.props
+    if (coin === 'BTC') this.props.btcActions.reportClicked()
+    if (coin === 'BCH') this.props.bchActions.reportClicked()
+  }
+
+  render () {
+    const isLegacyEthAddr = this.props.coin === 'ETH' && this.props.legacyEthAddress
+
+    return <Menu
+      coin={this.props.coin}
+      handleClickReporting={this.handleClickReporting}
+      onShowPrivateKey={this.onShowPrivateKey}
+      onShowEthPrivateKeyLegacy={this.onShowEthPrivateKeyLegacy}
+      isLegacyEthAddr={isLegacyEthAddr}
+    />
+  }
+}
+
+const mapStateToProps = (state: RootState) => ({
+  legacyEthAddr: selectors.core.kvStore.eth
+    .getLegacyAccountAddress(state)
+    .getOrElse(null)
+})
+
+const mapDispatchToProps = dispatch => ({
+  btcActions: bindActionCreators(actions.components.btcTransactions, dispatch),
+  bchActions: bindActionCreators(actions.components.bchTransactions, dispatch),
+  modalActions: bindActionCreators(actions.modals, dispatch)
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TransactionFiltersContainer)

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionFilters/template.tsx

@@ -0,0 +1,147 @@
+import { ComponentDropdown, Icon, Link, Text } from 'blockchain-info-components'
+import { compose } from 'redux'
+import { Field, reduxForm } from 'redux-form'
+import { FormattedMessage } from 'react-intl'
+import { includes } from 'ramda'
+import { model } from 'data'
+import { StickyHeader } from 'components/Layout'
+import { TabMenuTransactionStatus, TextBox } from 'components/Form'
+import HorizontalMenu from 'components/HorizontalMenu'
+import media from 'services/ResponsiveService'
+import React from 'react'
+import styled from 'styled-components'
+
+const { WALLET_TX_SEARCH } = model.form
+
+const Search = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  width: 300px;
+
+  ${media.laptop`
+    width: inherit;
+  `}
+  ${media.tablet`
+    margin-top: 8px;
+  `}
+`
+const EthPrivateKeysWrapper = styled.div`
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin-right: 10px;
+  min-width: 115px;
+`
+const ExportEthPrivateKeyText = styled(Text)`
+  cursor: pointer;
+`
+const ReportingIcon = styled(Icon)`
+  width: 40px;
+  margin-right: 10px;
+`
+const SearchField = styled<any>(Field)`
+  > div > span {
+    top: 14px;
+    font-size: 18px;
+  }
+`
+const PRIVATE_KEY_EXPORT_COINS = ['ETH', 'XLM']
+const TX_EXPORT_COINS = ['BTC', 'BCH']
+
+const EthPrivateKeys = () => (
+  <Link weight={500} size='12px'>
+    <FormattedMessage
+      id='scenes.transactions.menu.ethprivatekeys'
+      defaultMessage='Private Keys'
+    />
+  </Link>
+)
+const TransactionFilters = ({
+  coin,
+  handleClickReporting,
+  onShowPrivateKey,
+  onShowEthPrivateKeyLegacy,
+  isLegacyEthAddr
+}) => (
+    <StickyHeader>
+      <HorizontalMenu>
+        <Field
+          name='status'
+          statuses={['', 'sent', 'received', 'transferred']}
+          component={TabMenuTransactionStatus}
+        />
+        <Search>
+          {includes(coin, PRIVATE_KEY_EXPORT_COINS) && (
+            <EthPrivateKeysWrapper>
+              {isLegacyEthAddr ? (
+                <ComponentDropdown
+                  down
+                  forceSelected
+                  color={'gray-5'}
+                  selectedComponent={<EthPrivateKeys />}
+                  components={[
+                    <ExportEthPrivateKeyText
+                      size='small'
+                      onClick={onShowPrivateKey}
+                    >
+                      <FormattedMessage
+                        id='scenes.transactions.export.ethkey'
+                        defaultMessage='Export Private Key'
+                      />
+                    </ExportEthPrivateKeyText>,
+                    <ExportEthPrivateKeyText
+                      size='small'
+                      onClick={onShowEthPrivateKeyLegacy}
+                    >
+                      <FormattedMessage
+                        id='scenes.transactions.export.ethkeyarchived'
+                        defaultMessage='Export Archived Private Key'
+                      />
+                    </ExportEthPrivateKeyText>
+                  ]}
+                />
+              ) : (
+                  <Link
+                    size={'12px'}
+                    weight={400}
+                    onClick={onShowPrivateKey}
+                    data-e2e='exportPrivateKeyLink'
+                  >
+                    <FormattedMessage
+                      id='scenes.transactions.export.ethkey'
+                      defaultMessage='Export Private Key'
+                    />
+                  </Link>
+                )}
+            </EthPrivateKeysWrapper>
+          )}
+          {includes(coin, TX_EXPORT_COINS) && (
+            <ReportingIcon
+              color='grey400'
+              cursor
+              data-e2e='generateTxReport'
+              name='download'
+              onClick={handleClickReporting}
+              size='20px'
+            />
+          )}
+          <SearchField
+            component={TextBox}
+            data-e2e='transactionsMenuSearchBox'
+            height='45px'
+            icon='magnifier'
+            name='search'
+            placeholder='Search'
+          />
+        </Search>
+      </HorizontalMenu>
+    </StickyHeader>
+  )
+
+export default compose<any>(reduxForm({
+  form: WALLET_TX_SEARCH,
+  initialValues: { source: 'all' }
+}))(TransactionFilters)