Fix SelectAccounts components, clean stuffs

src/components/IsUnlocked/index.js

@@ -57,6 +57,12 @@ class IsUnlocked extends PureComponent<Props, State> {
     ...defaultState,
   }
 
+  componentWillMount() {
+    if (this.props.isLocked) {
+      stopSyncAccounts()
+    }
+  }
+
   componentWillReceiveProps(nextProps) {
     if (this.props.isLocked && !nextProps.isLocked) {
       startSyncAccounts(nextProps.accounts)

src/components/SelectAccount.js

@@ -12,6 +12,10 @@ import Text from 'components/base/Text'
 
 import type { Account } from 'types/common'
 
+function renderItem(accounts) {
+  return item => <span>{(accounts.find(a => a.id === item) || {}).name}</span>
+}
+
 const mapStateToProps: MapStateToProps<*, *, *> = state => ({
   accounts: values(getAccounts(state)),
 })
@@ -24,12 +28,13 @@ type Props = {
 
 const SelectAccount = ({ accounts, value, onChange }: Props) => (
   <Select
+    itemToString={item => item}
     value={value}
     placeholder="Choose an account"
-    items={accounts}
+    items={accounts.map(a => a.id)}
-    keyProp="id"
     onChange={onChange}
-    itemToString={item => (item ? item.name : '')}
+    renderItem={renderItem(accounts)}
+    renderSelected={renderItem(accounts)}
     renderHighlight={(text, key) => (
       <Text key={key} fontWeight="bold">
         {text}
@@ -37,5 +42,4 @@ const SelectAccount = ({ accounts, value, onChange }: Props) => (
     )}
   />
 )
-
 export default connect(mapStateToProps)(SelectAccount)

src/components/base/Select/index.js

@@ -15,7 +15,7 @@ import Search from 'components/base/Search'
 import Triangles from './Triangles'
 
 type Props = {
-  items: Array<Object>,
+  items: Array<any>,
   value?: Object | null,
   itemToString?: Function,
   onChange?: Function,
@@ -24,7 +24,7 @@ type Props = {
   searchable?: boolean,
   placeholder?: string,
   renderHighlight?: string => Element<*>,
-  renderSelected?: Object => Element<*>,
+  renderSelected?: any => Element<*>,
   renderItem?: (*) => Element<*>,
   keyProp?: string,
 }
@@ -98,11 +98,15 @@ class Select extends PureComponent<Props> {
   renderItems = (items: Array<Object>, downshiftProps: Object) => {
     const { renderItem, keyProp } = this.props
     const { getItemProps, highlightedIndex } = downshiftProps
+
     return (
       <Dropdown>
         {items.length ? (
           items.map((item, i) => (
-            <ItemWrapper key={keyProp ? item[keyProp] : item.key} {...getItemProps({ item })}>
+            <ItemWrapper
+              key={keyProp ? item[keyProp] : item.key || item}
+              {...getItemProps({ item })}
+            >
               <Item highlighted={i === highlightedIndex}>
                 {renderItem ? renderItem(item) : <span>{item.name_highlight || item.name}</span>}
               </Item>

src/constants.js

@@ -1,2 +1,2 @@
 export const CHECK_UPDATE_TIMEOUT = 5e3
-export const SYNC_ACCOUNT_TIMEOUT = 2e3
+export const SYNC_ACCOUNT_TIMEOUT = 3e3