feat(Layout): start styling custom transaction list filter dropdown

packages/blockchain-info-components/src/Form/CreatableInput/template.js

@@ -12,10 +12,14 @@ const StyledCreatableSelect = styled(CreatableSelect)`
   font-size: ${props => (props.fontSize === 'small' ? '14px' : '16px')};
 
   .bc__menu {
+    border-radius: 4px;
+    box-shadow: initial;
+    border: 1px solid ${props => props.theme.grey100};
     background-color: ${props => props.theme.white};
   }
 
   .bc__menu-list {
+    border-radius: 4px;
     padding: 0;
   }
 

packages/blockchain-info-components/src/Form/SelectInput/template.js

@@ -11,10 +11,14 @@ const StyledSelect = styled(Select)`
   font-size: ${props => (props.fontSize === 'small' ? '14px' : '16px')};
 
   .bc__menu {
+    border-radius: 4px;
+    box-shadow: initial;
+    border: 1px solid ${props => props.theme.grey100};
     background-color: ${props => props.theme.white};
   }
 
   .bc__menu-list {
+    border-radius: 4px;
     padding: 0;
   }
 

packages/blockchain-wallet-v4-frontend/src/components/Form/SelectBoxBtcAddresses/selectors.js → packages/blockchain-wallet-v4-frontend/src/components/Form/SelectBoxBtcAddresses/selectors.ts

@@ -14,6 +14,7 @@ import {
   prepend,
   prop,
   reduce,
+  // @ts-ignore
   sequence,
   set,
   sort
@@ -41,7 +42,17 @@ const allImportedAddresses = {
   ]
 }
 
-export const getData = (state, ownProps) => {
+export const getData = (
+  state,
+  ownProps: {
+    exclude?: Array<string>
+    excludeHDWallets?: boolean
+    excludeImported?: boolean
+    excludeLockbox?: boolean
+    includeAll?: boolean
+    includeExchangeAddress?: boolean
+  }
+) => {
   const {
     exclude = [],
     excludeHDWallets,
@@ -62,6 +73,7 @@ export const getData = (state, ownProps) => {
     }
     return label
   }
+  // @ts-ignore
   const excluded = filter(x => !exclude.includes(x.label))
   const toDropdown = map(x => ({ label: buildDisplay(x), value: x }))
   const toGroup = curry((label, options) => [{ label, options }])
@@ -88,12 +100,14 @@ export const getData = (state, ownProps) => {
             .map(toGroup('Imported Addresses'))
             .map(x =>
               set(
+                // @ts-ignore
                 compose(
                   lensIndex(0),
                   lensProp('options')
                 ),
                 sort(
                   descend(path(['value', 'balance'])),
+                  // @ts-ignore
                   prop('options', head(x))
                 ),
                 x
@@ -110,6 +124,7 @@ export const getData = (state, ownProps) => {
         ? exchangeAddress.map(toExchange).map(toGroup('Exchange'))
         : Remote.of([])
     ]).map(([b1, b2, b3, b4]) => {
+      // @ts-ignore
       const data = reduce(concat, [], [b1, b2, b3, b4])
       if (includeAll) {
         return { data: prepend(allWallets, data) }

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

@@ -11,7 +11,7 @@ type OwnProps = {
 }
 
 type LinkStatePropsType = {
-  legacyEthAddress: null | boolean
+  legacyEthAddr: null | boolean
 }
 
 type LinkDispatchPropsType = {
@@ -20,7 +20,7 @@ type LinkDispatchPropsType = {
   btcActions: typeof actions.components.btcTransactions
 }
 
-type Props = OwnProps & LinkDispatchPropsType & LinkStatePropsType
+type Props = OwnProps & LinkStatePropsType & LinkDispatchPropsType
 
 class TransactionFiltersContainer extends React.PureComponent<Props> {
   onShowPrivateKey = () => {
@@ -42,7 +42,7 @@ class TransactionFiltersContainer extends React.PureComponent<Props> {
   }
 
   render () {
-    const isLegacyEthAddr = this.props.coin === 'ETH' && this.props.legacyEthAddress
+    const isLegacyEthAddr = this.props.coin === 'ETH' && this.props.legacyEthAddr
 
     return <Menu
       coin={this.props.coin}
@@ -54,7 +54,7 @@ class TransactionFiltersContainer extends React.PureComponent<Props> {
   }
 }
 
-const mapStateToProps = (state: RootState) => ({
+const mapStateToProps = (state: RootState): LinkStatePropsType => ({
   legacyEthAddr: selectors.core.kvStore.eth
     .getLegacyAccountAddress(state)
     .getOrElse(null)

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

@@ -1,18 +1,14 @@
 import { ComponentDropdown, Icon, Link, Text } from 'blockchain-info-components'
-import { compose } from 'redux'
-import { Field, reduxForm } from 'redux-form'
+import { Field } 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;
@@ -141,7 +137,4 @@ const TransactionFilters = ({
     </StickyHeader>
   )
 
-export default compose<any>(reduxForm({
-  form: WALLET_TX_SEARCH,
-  initialValues: { source: 'all' }
-}))(TransactionFilters)
+export default TransactionFilters