Wallet List Sorting

src/modules/Core/Account/settings.js

@@ -99,6 +99,7 @@ export const setDenominationKeyRequest = (account, currencyCode, denomination) =
   })
 
 // Helper Functions
+
 export const getSyncedSettings = (account) =>
   getSyncedSettingsFile(account).getText()
   .then((text) => JSON.parse(text))

src/modules/UI/Settings/selectors.js

@@ -37,6 +37,14 @@ export const getDisplayDenominationKey = (state: any, currencyCode: string) => {
   return selectedDenominationKey
 }
 
+export const getDisplayDenominationFromSettings = (settings: any, currencyCode: string) => {
+  const currencySettings = settings[currencyCode] || isoFiatDenominations[currencyCode]
+  const selectedDenominationKey = currencySettings.denomination
+  const denominations = currencySettings.denominations
+  const selectedDenomination = denominations.find((denomination) => denomination.multiplier === selectedDenominationKey)
+  return selectedDenomination
+}
+
 export const getDisplayDenomination = (state: any, currencyCode: string) => {
   const selectedDenominationKey = getDisplayDenominationKey(state, currencyCode)
   const denominations = getDenominations(state, currencyCode)
@@ -67,11 +75,6 @@ export const getBitcoinPlugin = (state: any) => {
   return bitcoinPlugin
 }
 
-export const getLitecoinPlugin = (state: any) => {
-  const litecoinPlugin = getPlugin(state, 'litecoin')
-  return litecoinPlugin
-}
-
 export const getEthereumPlugin = (state: any) => {
   const ethereumPlugin = getPlugin(state, 'ethereum')
   return ethereumPlugin
@@ -100,4 +103,4 @@ export const getAutoLogoutTimeInMinutes = (state: any) => {
   const autoLogoutTimeInSeconds = getAutoLogoutTimeInSeconds(state)
   const autoLogoutTimeInMinutes = autoLogoutTimeInSeconds / 60
   return autoLogoutTimeInMinutes
-}
+}

src/modules/UI/scenes/Request/Request.ui.js

@@ -18,6 +18,7 @@ import LinearGradient from 'react-native-linear-gradient'
 
 import * as WALLET_API from '../../../Core/Wallets/api.js'
 
+import {saveToLog} from './action.js'
 
 export default class Request extends Component {
   constructor (props) {
@@ -31,14 +32,13 @@ export default class Request extends Component {
   }
 
   componentWillReceiveProps (nextProps) {
-    if (nextProps.loading) return
-
-    if (nextProps.abcWallet.id !== this.props.abcWallet.id) {
-      const {abcWallet, currencyCode} = nextProps
-      WALLET_API.getReceiveAddress(abcWallet, currencyCode)
+    if (nextProps.coreWallet.id !== this.props.coreWallet.id) {
+      const {coreWallet, currencyCode} = nextProps
+      WALLET_API.getReceiveAddress(coreWallet, currencyCode)
       .then((receiveAddress) => {
         const {publicAddress} = receiveAddress
-        const encodedURI = this.props.abcWallet.encodeUri(receiveAddress)
+        this.props.dispatch(saveToLog('testing'))
+        const encodedURI = this.props.coreWallet.encodeUri(receiveAddress)
         this.setState({
           encodedURI,
           publicAddress

src/modules/UI/scenes/WalletList/WalletList.ui.js

@@ -20,7 +20,7 @@ import {Actions} from 'react-native-router-flux'
 import styles from './style'
 import SortableListView from 'react-native-sortable-listview'
 import FullWalletListRow from './components/WalletListRow/FullWalletListRowConnector'
-import SortableWalletListRow from './components/WalletListRow/SortableWalletListRowConnector'
+import SortableWalletListRow from './components/WalletListRow/SortableWalletListRow.ui.js'
 import strings from '../../../../locales/default'
 import {sprintf} from 'sprintf-js'
 
@@ -74,7 +74,6 @@ export default class WalletList extends Component {
   }
 
   componentDidMount () {
-    console.log('in WalletList->componentDidMount')
     Permissions.request('contacts').then((response) => {
       if (response === 'authorized') {
         Contacts.getAll((err, contacts) => {
@@ -90,7 +89,6 @@ export default class WalletList extends Component {
   }
 
   executeWalletRowOption = (walletId: string, option: string) => {
-    // console.log('in executeWalletRowOption, option is: ', option)
     switch (option) {
     case options[0].value: // 'rename'
       console.log('executing rename')
@@ -118,17 +116,29 @@ export default class WalletList extends Component {
       break
     }
   }
-
   render () {
-    // console.log('beginning of walletList render, this is: ', this.state)
     const {wallets} = this.props
     let walletsArray = []
+    let activeWallets = {}
     for (let wallet in wallets) {
       let theWallet = wallets[wallet]
       theWallet.key = wallet
       theWallet.executeWalletRowOption = this.executeWalletRowOption
       walletsArray.push(theWallet)
+      if (this.props.activeWalletIds.includes(wallet)) activeWallets[wallet] = wallets[wallet]
     }
+
+    let activeWalletsArray = this.props.activeWalletIds.map(function (x) {
+      let tempWalletObj = {key: x}
+      return wallets[x] || tempWalletObj
+    })
+
+    let activeWalletsObject = {}
+    this.props.activeWalletIds.forEach(function (x) {
+      let tempWalletObj = wallets[x] ? wallets[x] : {key: null}
+      activeWalletsObject[x] = tempWalletObj
+    })
+
     return (
       <View style={styles.container}>
         {this.renderDeleteWalletModal()}
@@ -185,36 +195,34 @@ export default class WalletList extends Component {
           </LinearGradient>
 
           {
-            Object.keys(wallets).length > 0
-              ? this.renderActiveSortableList(walletsArray)
-              : <ActivityIndicator style={{flex: 1, alignSelf: 'center'}} size={'large'} />
+            Object.keys(this.props.wallets).length > 0 ? this.renderActiveSortableList(activeWalletsArray, activeWalletsObject) : <ActivityIndicator style={{flex: 1, alignSelf: 'center'}} size={'large'} />
           }
 
         </View>
       </View>
     )
   }
 
-  renderActiveSortableList = (walletsArray: Array<any>) => {
+  renderActiveSortableList = (activeWalletsArray: any, activeWalletsObject: any) => {
     const {width} = Dimensions.get('window')
     return (
       <View style={[styles.listsContainer, UTILS.border()]}>
-        <Animated.View testID={'sortableList'} style={[{flex: 1, opacity: this.state.sortableListOpacity, zIndex: this.state.sortableListZIndex}, styles.sortableList, UTILS.border()]}>
+        <Animated.View testID={'sortableList'} style={[UTILS.border(), {flex: 1, opacity: this.state.sortableListOpacity, zIndex: this.state.sortableListZIndex}, styles.sortableList, UTILS.border()]}>
           <SortableListView
             style={{flex: 1, width}}
-            data={this.props.wallets}
-            order={this.sortActiveWallets(this.props.wallets)}
+            data={activeWalletsObject}
+            order={this.props.activeWalletIds}
             onRowMoved={this.onActiveRowMoved}
             render={sprintf(strings.enUS['fragmet_wallets_list_archive_title_capitalized'])}
-            renderRow={this.renderActiveRow /*, this.onActiveRowMoved*/}
-            sortableMode={this.state.sortableMode}
+            renderRow={(row) => <SortableWalletListRow data={row} dimensions={this.props.dimensions} />}
             executeWalletRowOption={this.executeWalletRowOption}
-            activeOpacity={0.6} />
+            dimensions={this.props.dimensions}
+          />
         </Animated.View>
-
         <Animated.View testID={'fullList'} style={[{flex: 1, opacity: this.state.fullListOpacity, zIndex: this.state.fullListZIndex}, styles.fullList]}>
-          <FlatList style={{flex: 1, width}}
-            data={walletsArray}
+          <FlatList
+            style={{flex: 1, width}}
+            data={activeWalletsArray}
             extraData={this.props.wallets}
             renderItem={(item) => <FullWalletListRow data={item} />}
             sortableMode={this.state.sortableMode}
@@ -224,11 +232,8 @@ export default class WalletList extends Component {
     )
   }
 
-  renderActiveRow = (row: any) => <SortableWalletListRow data={row} />
-
   enableSorting = () => {
     // start animation, use callback to setState, then setState's callback to execute 2nd animation
-    // console.log('enabling sorting, this is: ', this)
     let sortableToOpacity = 1
     let sortableListToZIndex = 100
     let fullListToOpacity = 0
@@ -267,7 +272,6 @@ export default class WalletList extends Component {
   }
 
   disableSorting = () => {
-    // console.log('disabling sorting')
     let sortableToOpacity = 0
     let sortableListToZIndex = 0
     let fullListToOpacity = 1
@@ -333,11 +337,7 @@ export default class WalletList extends Component {
   }
 
   onActiveRowMoved = (action: any) => {
-    const wallets = this.props.wallets
-    const activeOrderedWallets = Object.keys(wallets).filter((key) => !wallets[key].archived) // filter out archived wallets
-    .sort((a, b) => wallets[a].sortIndex - wallets[b].sortIndex) // sort them according to their (previous) sortIndices
-    const order = activeOrderedWallets
-    const newOrder = this.getNewOrder(order, action) // pass the old order to getNewOrder with the action ( from, to, and  )
+    const newOrder = this.getNewOrder(this.props.activeWalletIds, action) // pass the old order to getNewOrder with the action ( from, to, and  )
 
     this.props.updateActiveWalletsOrder(newOrder)
     this.forceUpdate()

src/modules/UI/scenes/WalletList/WalletListConnector.js

@@ -27,7 +27,8 @@ const mapStateToProps = (state) => {
     walletName: state.ui.scenes.walletList.walletName,
     walletId: state.ui.scenes.walletList.walletId,
     walletOrder: state.ui.wallets.walletListOrder,
-    currencyConverter
+    currencyConverter,
+    dimensions: state.ui.scenes.dimensions
   }
 }
 

src/modules/UI/scenes/WalletList/action.js

@@ -115,11 +115,7 @@ export const updateActiveWalletsOrder = (activeWalletIds) => (dispatch, getState
   dispatch(updateActiveWalletsOrderStart(activeWalletIds))
   ACCOUNT_API.updateActiveWalletsOrderRequest(account, activeWalletIds)
     .then(() => {
-      // console.log('response', response)
       dispatch(updateActiveWalletsOrderSuccess(activeWalletIds))
-      for (let k in activeWalletIds) {
-        dispatch(updateIndividualWalletSortIndex(activeWalletIds[k], k))
-      }
     })
     .catch((e) => console.log(e))
 }

src/modules/UI/scenes/WalletList/components/WalletListRow/FullWalletListRow.ui.js

@@ -5,16 +5,45 @@ import {bns} from 'biggystring'
 import {
   View,
   TouchableHighlight,
-  Animated,
+  ActivityIndicator
 } from 'react-native'
+import {connect} from 'react-redux'
 import {Actions} from 'react-native-router-flux'
-import styles from '../../style'
-import T from '../../../../components/FormattedText/FormattedText.ui'
+import styles from '../../style.js'
+import T from '../../../../components/FormattedText'
 import RowOptions from './WalletListRowOptions.ui'
-import WalletListTokenRow from './WalletListTokenRowConnector'
-import * as UTILS from '../../../../../utils'
+import WalletListTokenRow from './WalletListTokenRowConnector.js'
+import {border as b, cutOffText, truncateDecimals} from '../../../../../utils.js'
+import {selectWallet} from '../../../../Wallets/action.js'
+import * as SETTINGS_SELECTORS from '../../../../Settings/selectors'
+
+export const findDenominationSymbol = (denoms, value) => {
+  for (const v of denoms) {
+    if (v.name === value) {
+      return v.symbol
+    }
+  }
+}
+
+
+class FullWalletRow extends Component {
+  render () {
+    return (
+      <View>
+        {this.props.data.item.id ? (
+          <FullWalletListRowConnect data={this.props.data} />
+        ) : (
+          <FullListRowEmptyData />
+        )}
+      </View>
+    )
+  }
+}
+
+export default FullWalletRow
+
+class FullWalletListRow extends Component {
 
-export default class FullWalletListRow extends Component {
   _onPressSelectWallet = (walletId, currencyCode) => {
     this.props.selectWallet(walletId, currencyCode)
     Actions.transactionList({params: 'walletList'})
@@ -30,27 +59,30 @@ export default class FullWalletListRow extends Component {
     let name = walletData.name || sprintf(strings.enUS['string_no_name'])
     let symbol = denomination.symbol
     return (
-      <Animated.View style={[{width: this.props.dimensions.deviceDimensions.width}]}>
-        <TouchableHighlight
-          style={[styles.rowContainer]}
-          underlayColor={'#eee'}
-          {...this.props.sortHandlers}
-          onPress={() => this._onPressSelectWallet(id, currencyCode)}>
-          <View style={[styles.rowContent]}>
-            <View style={[styles.rowNameTextWrap]}>
-              <T style={[styles.rowNameText]} numberOfLines={1}>{UTILS.cutOffText(name, 34)}</T>
-            </View>
-            <View style={[styles.rowBalanceTextWrap]}>
-              <T style={[styles.rowBalanceAmountText]}>
-                {UTILS.truncateDecimals(bns.divf(walletData.primaryNativeBalance, multiplier).toString(), 6)}
-              </T>
-              <T style={[styles.rowBalanceDenominationText]}>{walletData.currencyCode} ({symbol || ''})</T>
-            </View>
-            <RowOptions sortableMode={this.props.sortableMode} executeWalletRowOption={walletData.executeWalletRowOption} walletKey={id} archived={walletData.archived} />
+      <View style={[{width: this.props.dimensions.deviceDimensions.width}, b()]}>
+          <View>
+            <TouchableHighlight
+              style={[styles.rowContainer]}
+              underlayColor={'#eee'}
+              {...this.props.sortHandlers}
+              onPress={() => this._onPressSelectWallet(id, currencyCode)}
+            >
+              <View style={[styles.rowContent]}>
+                <View style={[styles.rowNameTextWrap]}>
+                  <T style={[styles.rowNameText]} numberOfLines={1}>{cutOffText(name, 34)}</T>
+                </View>
+                <View style={[styles.rowBalanceTextWrap]}>
+                  <T style={[styles.rowBalanceAmountText]}>
+                    {truncateDecimals(bns.divf(walletData.primaryNativeBalance, multiplier).toString(), 6)}
+                  </T>
+                  <T style={[styles.rowBalanceDenominationText]}>{walletData.currencyCode} ({symbol || ''})</T>
+                </View>
+                <RowOptions sortableMode={this.props.sortableMode} executeWalletRowOption={walletData.executeWalletRowOption} walletKey={id} archived={walletData.archived} />
+              </View>
+            </TouchableHighlight>
+            {this.renderTokenRow(id, walletData.nativeBalances, this.props.active)}
           </View>
-        </TouchableHighlight>
-        {this.renderTokenRow(id, walletData.nativeBalances, this.props.active)}
-      </Animated.View>
+      </View>
     )
   }
 
@@ -66,3 +98,36 @@ export default class FullWalletListRow extends Component {
     return tokens
   }
 }
+
+const mapStateToProps = (state, ownProps) => {
+  const displayDenomination = SETTINGS_SELECTORS.getDisplayDenomination(state, ownProps.data.item.currencyCode)
+  const exchangeDenomination = SETTINGS_SELECTORS.getExchangeDenomination(state, ownProps.data.item.currencyCode)
+  return {
+    dimensions: state.ui.scenes.dimensions,
+    displayDenomination,
+    exchangeDenomination
+  }
+}
+const mapDispatchToProps = (dispatch) => ({
+  selectWallet: (walletId, currencyCode) => dispatch(selectWallet(walletId, currencyCode))
+})
+
+export const FullWalletListRowConnect =  connect(mapStateToProps, mapDispatchToProps)(FullWalletListRow)
+
+class FullListRowEmptyData extends Component {
+  render () {
+    return (
+      <TouchableHighlight
+        style={[styles.rowContainer], {height: 50, backgroundColor: 'white', padding: 16, paddingLeft: 20, paddingRight: 20, justifyContent: 'space-between', borderBottomWidth: 1, borderColor: '#EEE'}}
+        underlayColor={'#eee'}
+        {...this.props.sortHandlers}
+      >
+        <View style={[styles.rowContent]}>
+          <View style={[styles.rowNameTextWrap]}>
+            <ActivityIndicator style={{height: 18, width: 18}}/>
+          </View>
+        </View>
+      </TouchableHighlight>
+    )
+  }
+}

src/modules/UI/scenes/WalletList/components/WalletListRow/FullWalletListRowConnector.js

@@ -1,21 +1,3 @@
-import {connect} from 'react-redux'
 import FullWalletListRow from './FullWalletListRow.ui'
 
-import {selectWallet} from '../../../../Wallets/action'
-import * as SETTINGS_SELECTORS from '../../../../Settings/selectors'
-
-const mapStateToProps = (state, ownProps) => {
-  const displayDenomination = SETTINGS_SELECTORS.getDisplayDenomination(state, ownProps.data.item.currencyCode)
-  const exchangeDenomination = SETTINGS_SELECTORS.getExchangeDenomination(state, ownProps.data.item.currencyCode)
-
-  return {
-    dimensions: state.ui.scenes.dimensions,
-    displayDenomination,
-    exchangeDenomination
-  }
-}
-const mapDispatchToProps = (dispatch) => ({
-  selectWallet: (walletId, currencyCode) => dispatch(selectWallet(walletId, currencyCode))
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(FullWalletListRow)
+export default FullWalletListRow