UI Adjustments (#77)

* UI Changes to better match the Overflow Design

BlueComponents.js

@@ -190,11 +190,13 @@ export class BlueListItem extends Component {
   render() {
     return (
       <ListItem
+        bottomDivider
         {...this.props}
         containerStyle={{
           backgroundColor: 'transparent',
-          borderBottomColor: 'transparent',
+          borderBottomStartRadius: 20,
-          borderBottomWidth: 0,
+          borderBottomEndRadius: 20,
+          borderBottomColor: '#ededed',
         }}
         titleStyle={{
           color: BlueApp.settings.foregroundColor,
@@ -202,6 +204,7 @@ export class BlueListItem extends Component {
           fontWeight: '500',
         }}
         subtitleStyle={{ color: '#9aa0aa' }}
+        subtitleNumberOfLines={2}
       />
     );
   }
@@ -470,11 +473,6 @@ const stylesBlueIcon = StyleSheet.create({
   container: {
     flex: 1,
   },
-  containerRefresh: {
-    flex: 1,
-    position: 'absolute',
-    right: 10,
-  },
   box1: {
     position: 'relative',
     top: 15,
@@ -551,30 +549,6 @@ export class BluePlusIcon extends Component {
   }
 }
 
-export class BlueRefreshIcon extends Component {
-  render() {
-    return (
-      <TouchableOpacity {...this.props} style={stylesBlueIcon.containerRefresh}>
-        <View style={stylesBlueIcon.box1}>
-          <View style={stylesBlueIcon.ballTransparrent}>
-            <Ionicons
-              {...this.props}
-              name={'ios-refresh'}
-              size={30}
-              style={{
-                color: BlueApp.settings.foregroundColor,
-                backgroundColor: 'transparent',
-                left: 8,
-                top: 2,
-              }}
-            />
-          </View>
-        </View>
-      </TouchableOpacity>
-    );
-  }
-}
-
 export class BlueTransactionIncommingIcon extends Component {
   render() {
     return (
@@ -692,15 +666,7 @@ export class BlueTransactionOutgoingIcon extends Component {
 export class BlueReceiveButtonIcon extends Component {
   render() {
     return (
-      <TouchableOpacity
+      <TouchableOpacity {...this.props}>
-        {...this.props}
-        style={{
-          flex: 1,
-          position: 'absolute',
-          bottom: 30,
-          right: width / 2 + 5,
-        }}
-      >
         <View>
           <View
             style={{
@@ -712,6 +678,7 @@ export class BlueReceiveButtonIcon extends Component {
               backgroundColor: '#ccddf9',
               borderBottomLeftRadius: 15,
               borderTopLeftRadius: 15,
+              alignItems: 'center',
             }}
           >
             <View
@@ -721,9 +688,10 @@ export class BlueReceiveButtonIcon extends Component {
                 borderBottomLeftRadius: 15,
                 backgroundColor: 'transparent',
                 transform: [{ rotate: '-45deg' }],
+                alignItems: 'center',
               }}
             >
-              <Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color="#2f5fb3" iconStyle={{ left: 0, top: 15 }} />
+              <Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color="#2f5fb3" iconStyle={{ left: 5, top: 12 }} />
             </View>
             <Text
               style={{
@@ -731,12 +699,10 @@ export class BlueReceiveButtonIcon extends Component {
                 fontSize: (isIpad && 10) || 16,
                 fontWeight: '500',
                 left: 5,
-                top: 12,
                 backgroundColor: 'transparent',
-                position: 'relative',
               }}
             >
-              {loc.receive.list.header}
+              {loc.receive.header}
             </Text>
           </View>
         </View>
@@ -748,15 +714,7 @@ export class BlueReceiveButtonIcon extends Component {
 export class BlueSendButtonIcon extends Component {
   render() {
     return (
-      <TouchableOpacity
+      <TouchableOpacity {...this.props}>
-        {...this.props}
-        style={{
-          flex: 1,
-          position: 'absolute',
-          bottom: 30,
-          left: width / 2 + 5,
-        }}
-      >
         <View>
           <View
             style={{
@@ -768,6 +726,8 @@ export class BlueSendButtonIcon extends Component {
               backgroundColor: '#ccddf9',
               borderBottomRightRadius: 15,
               borderTopRightRadius: 15,
+              alignItems: 'center',
+              paddingLeft: 15,
             }}
           >
             <View
@@ -780,20 +740,17 @@ export class BlueSendButtonIcon extends Component {
                 transform: [{ rotate: '225deg' }],
               }}
             >
-              <Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color="#2f5fb3" iconStyle={{ left: 0, top: 0 }} />
+              <Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color="#2f5fb3" iconStyle={{ left: 2, top: 6 }} />
             </View>
             <Text
               style={{
                 color: '#2f5fb3',
                 fontSize: (isIpad && 10) || 16,
                 fontWeight: '500',
-                left: 5,
-                top: 12,
                 backgroundColor: 'transparent',
-                position: 'relative',
               }}
             >
-              {loc.send.list.header}
+              {loc.send.header}
             </Text>
           </View>
         </View>
@@ -898,7 +855,7 @@ export class NewWalletPannel extends Component {
     return (
       <TouchableOpacity
         {...this.props}
-        style={{ paddingRight: 10, left: -20, paddingTop: 20 }}
+        style={{ paddingRight: 10, left: -20, marginVertical: 6 }}
         onPress={() => {
           if (this.handleClick) {
             this.handleClick();
@@ -910,7 +867,7 @@ export class NewWalletPannel extends Component {
           style={{
             padding: 15,
             borderRadius: 10,
-            height: 145,
+            height: 164,
             justifyContent: 'center',
             alignItems: 'center',
           }}
@@ -953,7 +910,7 @@ export class NewWalletPannel extends Component {
 
 let sliderWidth = width * 1;
 let itemWidth = width * 0.82;
-let sliderHeight = 175;
+let sliderHeight = 181;
 
 export class WalletsCarousel extends Component {
   constructor(props) {
@@ -1013,14 +970,20 @@ export class WalletsCarousel extends Component {
     return (
       <TouchableOpacity
         activeOpacity={1}
-        style={{ paddingRight: 10, left: -20, paddingTop: 20 }}
+        style={{ paddingRight: 10, left: -20, marginVertical: 6 }}
         onPress={() => {
           if (WalletsCarousel.handleClick) {
             WalletsCarousel.handleClick(index);
           }
         }}
       >
-        <LinearGradient colors={[gradient1, gradient2]} style={{ padding: 15, borderRadius: 10, height: 145 }}>
+        <LinearGradient
+          shadowOpacity={0.4}
+          shadowOffset={{ width: 0, height: 0 }}
+          shadowRadius={4}
+          colors={[gradient1, gradient2]}
+          style={{ padding: 15, borderRadius: 10, height: 164 }}
+        >
           <Image
             source={(new LightningCustodianWallet().type === item.type && require('./img/lnd-shape.png')) || require('./img/btc-shape.png')}
             style={{
@@ -1034,6 +997,7 @@ export class WalletsCarousel extends Component {
 
           <Text style={{ backgroundColor: 'transparent' }} />
           <Text
+            numberOfLines={1}
             style={{
               backgroundColor: 'transparent',
               fontSize: 19,
@@ -1043,6 +1007,7 @@ export class WalletsCarousel extends Component {
             {item.getLabel()}
           </Text>
           <Text
+            numberOfLines={1}
             style={{
               backgroundColor: 'transparent',
               fontWeight: 'bold',
@@ -1054,6 +1019,7 @@ export class WalletsCarousel extends Component {
           </Text>
           <Text style={{ backgroundColor: 'transparent' }} />
           <Text
+            numberOfLines={1}
             style={{
               backgroundColor: 'transparent',
               fontSize: 13,
@@ -1063,6 +1029,7 @@ export class WalletsCarousel extends Component {
             {loc.wallets.list.latest_transaction}
           </Text>
           <Text
+            numberOfLines={1}
             style={{
               backgroundColor: 'transparent',
               fontWeight: 'bold',

loc/en.js

@@ -87,16 +87,13 @@ module.exports = {
       conf: 'conf',
     },
     details: {
-      title: 'transaction details',
+      title: 'transaction',
       from: 'Inputs',
       to: 'Outputs',
     },
   },
   send: {
-    list: {
+    header: 'Send',
-      tabBarLabel: 'Send',
-      header: 'send',
-    },
     details: {
       title: 'create transaction',
       amount_fiels_is_not_valid: 'Amount field is not valid',
@@ -127,10 +124,7 @@ module.exports = {
     },
   },
   receive: {
-    list: {
+    header: 'Receive',
-      tabBarLabel: 'Receive',
-      header: 'receive',
-    },
     details: {
       title: 'Share this address with payer',
     },

screen/receive/details.js

@@ -12,7 +12,7 @@ const { width } = Dimensions.get('window');
 export default class ReceiveDetails extends Component {
   static navigationOptions = {
     header: ({ navigation }) => {
-      return <BlueHeaderDefaultSub leftText={loc.receive.list.header} onClose={() => navigation.goBack(null)} />;
+      return <BlueHeaderDefaultSub leftText={loc.receive.header} onClose={() => navigation.goBack(null)} />;
     },
   };
 

screen/transactions/details.js

@@ -1,29 +1,10 @@
 import React, { Component } from 'react';
-import { View, Dimensions } from 'react-native';
+import { View, ScrollView } from 'react-native';
-import {
+import { BlueButton, SafeBlueArea, BlueCard, BlueText, BlueHeaderDefaultSub, BlueLoading, BlueSpacing20 } from '../../BlueComponents';
-  BlueButton,
-  SafeBlueArea,
-  BlueCard,
-  BlueText,
-  BlueHeaderDefaultSub,
-  BlueLoading,
-  BlueSpacing20,
-  BlueSpacing,
-  BlueSpacing40,
-} from '../../BlueComponents';
 import PropTypes from 'prop-types';
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
 let loc = require('../../loc');
-const { height, width } = Dimensions.get('window');
-const aspectRatio = height / width;
-let isIpad;
-if (aspectRatio > 1.6) {
-  isIpad = false;
-} else {
-  isIpad = true;
-}
-
 function onlyUnique(value, index, self) {
   return self.indexOf(value) === index;
 }
@@ -94,71 +75,63 @@ export default class TransactionsDetails extends Component {
 
     return (
       <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
-        {(() => {
+        <ScrollView style={{ flex: 1 }}>
-          if (isIpad) {
+          <BlueCard>
-            return <BlueSpacing40 />;
+            {(() => {
-          } else {
+              if (BlueApp.tx_metadata[this.state.tx.hash]) {
-            return <BlueSpacing />;
+                if (BlueApp.tx_metadata[this.state.tx.hash]['memo']) {
-          }
+                  return (
-        })()}
+                    <View>
-
+                      <BlueText h4>{BlueApp.tx_metadata[this.state.tx.hash]['memo']}</BlueText>
-        <BlueCard>
+                      <BlueSpacing20 />
-          {(() => {
+                    </View>
-            if (BlueApp.tx_metadata[this.state.tx.hash]) {
+                  );
-              if (BlueApp.tx_metadata[this.state.tx.hash]['memo']) {
+                }
-                return (
-                  <View>
-                    <BlueText h4>{BlueApp.tx_metadata[this.state.tx.hash]['memo']}</BlueText>
-                    <BlueSpacing20 />
-                  </View>
-                );
               }
+            })()}
+
+            <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>{loc.transactions.details.from}</BlueText>
+            <BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.from.filter(onlyUnique).join(', ')}</BlueText>
+
+            <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>{loc.transactions.details.to}</BlueText>
+            <BlueText style={{ marginBottom: 26, color: 'grey' }}>
+              {arrDiff(this.state.from, this.state.to.filter(onlyUnique)).join(', ')}
+            </BlueText>
+
+            <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Txid</BlueText>
+            <BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.tx.hash}</BlueText>
+
+            <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Received</BlueText>
+            <BlueText style={{ marginBottom: 26, color: 'grey' }}>{formatTime(this.state.tx.received)}</BlueText>
+
+            <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Confirmed</BlueText>
+            <BlueText style={{ marginBottom: 26, color: 'grey' }}>{formatTime(this.state.tx.block_height)}</BlueText>
+
+            <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Confirmations</BlueText>
+            <BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.tx.confirmations}</BlueText>
+
+            <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Inputs</BlueText>
+            <BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.tx.inputs.length}</BlueText>
+
+            <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Outputs</BlueText>
+            <BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.tx.outputs.length}</BlueText>
+          </BlueCard>
+
+          {(() => {
+            if (this.state.tx.confirmations === 0) {
+              return (
+                <BlueButton
+                  onPress={() =>
+                    this.props.navigation.navigate('RBF', {
+                      txid: this.state.tx.hash,
+                    })
+                  }
+                  title="Replace-By-Fee (RBF)"
+                />
+              );
             }
           })()}
-
+        </ScrollView>
-          <BlueText style={{ fontSize: 16, fontWeight: '500' }}>{loc.transactions.details.from}</BlueText>
-          <BlueText style={{ marginBottom: 6, color: 'grey' }}>{this.state.from.filter(onlyUnique).join(', ')}</BlueText>
-
-          <BlueText style={{ fontSize: 16, fontWeight: '500' }}>{loc.transactions.details.to}</BlueText>
-          <BlueText style={{ marginBottom: 6, color: 'grey' }}>
-            {arrDiff(this.state.from, this.state.to.filter(onlyUnique)).join(', ')}
-          </BlueText>
-
-          <BlueText style={{ fontSize: 16, fontWeight: '500' }}>Txid</BlueText>
-          <BlueText style={{ marginBottom: 6, color: 'grey' }}>{this.state.tx.hash}</BlueText>
-
-          <BlueText style={{ fontSize: 16, fontWeight: '500' }}>received</BlueText>
-          <BlueText style={{ marginBottom: 6, color: 'grey' }}>{formatTime(this.state.tx.received)}</BlueText>
-
-          <BlueText style={{ fontSize: 16, fontWeight: '500' }}>confirmed</BlueText>
-          <BlueText style={{ marginBottom: 6, color: 'grey' }}>{formatTime(this.state.tx.confirmed)}</BlueText>
-
-          <BlueText style={{ fontSize: 16, fontWeight: '500' }}>confirmations</BlueText>
-          <BlueText style={{ marginBottom: 6, color: 'grey' }}>{this.state.tx.confirmations}</BlueText>
-
-          <BlueText style={{ fontSize: 16, fontWeight: '500' }}>inputs</BlueText>
-          <BlueText style={{ marginBottom: 6, color: 'grey' }}>{this.state.tx.inputs.length}</BlueText>
-
-          <BlueText style={{ fontSize: 16, fontWeight: '500' }}>outputs</BlueText>
-          <BlueText style={{ marginBottom: 6, color: 'grey' }}>{this.state.tx.outputs.length}</BlueText>
-
-          <BlueText style={{ marginBottom: 10 }} />
-        </BlueCard>
-
-        {(() => {
-          if (this.state.tx.confirmations === 0) {
-            return (
-              <BlueButton
-                onPress={() =>
-                  this.props.navigation.navigate('RBF', {
-                    txid: this.state.tx.hash,
-                  })
-                }
-                title="Replace-By-Fee (RBF)"
-              />
-            );
-          }
-        })()}
       </SafeBlueArea>
     );
   }

screen/wallets/list.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, TouchableOpacity, Text, FlatList } from 'react-native';
+import { View, TouchableOpacity, Text, FlatList, RefreshControl } from 'react-native';
 import {
   BlueText,
   BlueTransactionOnchainIcon,
@@ -13,7 +13,6 @@ import {
   BlueTransactionOffchainIcon,
   BlueSendButtonIcon,
   BlueReceiveButtonIcon,
-  BlueRefreshIcon,
   BlueList,
   BlueListItem,
   BlueHeaderDefaultMain,
@@ -104,16 +103,13 @@ export default class WalletsList extends Component {
         showSend = wallet.allowSend();
         showReceive = wallet.allowReceive();
       }
-      let showRereshButton = (BlueApp.getWallets().length > 0 && true) || false;
 
       if (wallet && wallet.type === new LightningCustodianWallet().type && !showSend) {
         showManageFundsBig = true;
         showManageFundsSmallButton = false;
-        showRereshButton = false;
       }
 
       if (wallet && wallet.type === new LightningCustodianWallet().type && wallet.getBalance() > 0) {
-        showRereshButton = false;
         showManageFundsSmallButton = true;
       }
 
@@ -124,7 +120,6 @@ export default class WalletsList extends Component {
         showSendButton: showSend,
         showManageFundsBigButton: showManageFundsBig,
         showManageFundsSmallButton,
-        showRereshButton,
         dataSource: BlueApp.getTransactions(this.lastSnappedTo || 0),
       });
     }, 1);
@@ -160,7 +155,6 @@ export default class WalletsList extends Component {
       showManageFundsBigButton: false,
       showManageFundsSmallButton: false,
       showSendButton: false,
-      showRereshButton: false,
       // TODO: погуглить че это за ебала ds.cloneWithRows, можно ли быстрее сделать прогрузку транзакций на экран
       dataSource: BlueApp.getTransactions(index),
     });
@@ -178,16 +172,13 @@ export default class WalletsList extends Component {
         showReceive = wallet.allowReceive();
       }
       console.log({ showSend });
-      let showRereshButton = true;
       let showManageFundsSmallButton = true;
       if (wallet && wallet.type === new LightningCustodianWallet().type && !showSend) {
         showManageFundsBig = true;
-        showRereshButton = false;
         showManageFundsSmallButton = false;
       }
 
       if (wallet && wallet.type === new LightningCustodianWallet().type) {
-        showRereshButton = false;
       } else {
         showManageFundsSmallButton = false;
       }
@@ -201,7 +192,6 @@ export default class WalletsList extends Component {
             showManageFundsBigButton: showManageFundsBig,
             showManageFundsSmallButton,
             showSendButton: showSend,
-            showRereshButton,
           }),
         50,
       ); // just to animate it, no real function
@@ -268,7 +258,7 @@ export default class WalletsList extends Component {
     }
   }
 
-  _keyExtractor = item => item.hash;
+  _keyExtractor = (item, index) => index.toString();
 
   render() {
     const { navigate } = this.props.navigation;
@@ -321,230 +311,221 @@ export default class WalletsList extends Component {
         })()}
 
         {(() => {
-          if (this.state.isTransactionsLoading) {
+          return (
-            return <BlueLoading />;
+            <View style={{ flex: 1 }}>
-          } else {
+              <View style={{ flexDirection: 'row', height: 50 }}>
-            return (
+                <Text
-              <View style={{ flex: 1 }}>
-                <View style={{ flexDirection: 'row', height: 50 }}>
-                  <Text
-                    style={{
-                      paddingLeft: 15,
-                      paddingTop: 15,
-                      fontWeight: 'bold',
-                      fontSize: 24,
-                      color: BlueApp.settings.foregroundColor,
-                    }}
-                  >
-                    {loc.transactions.list.title}
-                  </Text>
-                  {(() => {
-                    if (this.state.showRereshButton) {
-                      return <BlueRefreshIcon onPress={() => this.refreshTransactions()} />;
-                    }
-                  })()}
-                </View>
-
-                <View
                   style={{
-                    top: 20,
+                    paddingLeft: 15,
+                    paddingTop: 15,
+                    fontWeight: 'bold',
+                    fontSize: 24,
+                    color: BlueApp.settings.foregroundColor,
                   }}
                 >
-                  {(() => {
+                  {loc.transactions.list.title}
-                    if (BlueApp.getTransactions(this.lastSnappedTo || 0).length === 0) {
+                </Text>
-                      return (
-                        <View>
-                          <Text
-                            style={{
-                              fontSize: 18,
-                              color: '#9aa0aa',
-                              textAlign: 'center',
-                            }}
-                          >
-                            {(this.isLightning() &&
-                              'Lightning wallet should be used for your daily\ntransactions. Fees are unfairly cheap and\nspeed is blazing fast.') ||
-                              loc.wallets.list.empty_txs1}
-                          </Text>
-                          <Text
-                            style={{
-                              fontSize: 18,
-                              color: '#9aa0aa',
-                              textAlign: 'center',
-                            }}
-                          >
-                            {(this.isLightning() && '\nTo start using it tap on "manage funds"\nand topup your balance') ||
-                              loc.wallets.list.empty_txs2}
-                          </Text>
-                        </View>
-                      );
-                    }
-                  })()}
-                </View>
-
-                <View style={{ flex: 1 }}>
-                  <BlueList>
-                    <FlatList
-                      data={this.state.dataSource}
-                      extraData={this.state.dataSource}
-                      keyExtractor={this._keyExtractor}
-                      renderItem={rowData => {
-                        return (
-                          <BlueListItem
-                            avatar={(() => {
-                              // is it lightning refill tx?
-                              if (rowData.item.category === 'receive' && rowData.item.confirmations < 3) {
-                                return (
-                                  <View style={{ width: 25 }}>
-                                    <BlueTransactionPendingIcon />
-                                  </View>
-                                );
-                              }
-
-                              if (rowData.item.type && rowData.item.type === 'bitcoind_tx') {
-                                return (
-                                  <View style={{ width: 25 }}>
-                                    <BlueTransactionOnchainIcon />
-                                  </View>
-                                );
-                              }
-                              if (rowData.item.type === 'paid_invoice') {
-                                // is it lightning offchain payment?
-                                return (
-                                  <View style={{ width: 25 }}>
-                                    <BlueTransactionOffchainIcon />
-                                  </View>
-                                );
-                              }
-
-                              if (!rowData.item.confirmations) {
-                                return (
-                                  <View style={{ width: 25 }}>
-                                    <BlueTransactionPendingIcon />
-                                  </View>
-                                );
-                              } else if (rowData.item.value < 0) {
-                                return (
-                                  <View style={{ width: 25 }}>
-                                    <BlueTransactionOutgoingIcon />
-                                  </View>
-                                );
-                              } else {
-                                return (
-                                  <View style={{ width: 25 }}>
-                                    <BlueTransactionIncommingIcon />
-                                  </View>
-                                );
-                              }
-                            })()}
-                            title={loc.transactionTimeToReadable(rowData.item.received)}
-                            subtitle={
-                              (rowData.item.confirmations < 7 ? loc.transactions.list.conf + ': ' + rowData.item.confirmations + ' ' : '') +
-                              this.txMemo(rowData.item.hash) +
-                              (rowData.item.memo || '')
-                            }
-                            onPress={() => {
-                              if (rowData.item.hash) {
-                                navigate('TransactionDetails', {
-                                  hash: rowData.item.hash,
-                                });
-                              }
-                            }}
-                            badge={{
-                              value: 3,
-                              textStyle: { color: 'orange' },
-                              containerStyle: { marginTop: 0 },
-                            }}
-                            chevron={false}
-                            chevronColor="transparent"
-                            rightTitle={new BigNumber((rowData.item.value && rowData.item.value) || 0).div(100000000).toString()}
-                            rightTitleStyle={{
-                              position: 'relative',
-                              right: -30,
-                              top: -7,
-                              fontWeight: '600',
-                              fontSize: 16,
-                              color: rowData.item.value / 100000000 < 0 ? BlueApp.settings.foregroundColor : '#37c0a1',
-                            }}
-                          />
-                        );
-                      }}
-                    />
-                  </BlueList>
-                </View>
               </View>
-            );
+
-          }
+              <View
+                style={{
+                  top: 20,
+                }}
+              >
+                {(() => {
+                  if (BlueApp.getTransactions(this.lastSnappedTo || 0).length === 0) {
+                    return (
+                      <View>
+                        <Text
+                          style={{
+                            fontSize: 18,
+                            color: '#9aa0aa',
+                            textAlign: 'center',
+                          }}
+                        >
+                          {(this.isLightning() &&
+                            'Lightning wallet should be used for your daily\ntransactions. Fees are unfairly cheap and\nspeed is blazing fast.') ||
+                            loc.wallets.list.empty_txs1}
+                        </Text>
+                        <Text
+                          style={{
+                            fontSize: 18,
+                            color: '#9aa0aa',
+                            textAlign: 'center',
+                          }}
+                        >
+                          {(this.isLightning() && '\nTo start using it tap on "manage funds"\nand topup your balance') ||
+                            loc.wallets.list.empty_txs2}
+                        </Text>
+                      </View>
+                    );
+                  }
+                })()}
+              </View>
+
+              <View style={{ flex: 1 }}>
+                <BlueList>
+                  <FlatList
+                    refreshControl={
+                      <RefreshControl onRefresh={() => this.refreshTransactions()} refreshing={this.state.isTransactionsLoading} />
+                    }
+                    data={this.state.dataSource}
+                    extraData={this.state.dataSource}
+                    keyExtractor={this._keyExtractor}
+                    renderItem={rowData => {
+                      return (
+                        <BlueListItem
+                          avatar={(() => {
+                            // is it lightning refill tx?
+                            if (rowData.item.category === 'receive' && rowData.item.confirmations < 3) {
+                              return (
+                                <View style={{ width: 25 }}>
+                                  <BlueTransactionPendingIcon />
+                                </View>
+                              );
+                            }
+
+                            if (rowData.item.type && rowData.item.type === 'bitcoind_tx') {
+                              return (
+                                <View style={{ width: 25 }}>
+                                  <BlueTransactionOnchainIcon />
+                                </View>
+                              );
+                            }
+                            if (rowData.item.type === 'paid_invoice') {
+                              // is it lightning offchain payment?
+                              return (
+                                <View style={{ width: 25 }}>
+                                  <BlueTransactionOffchainIcon />
+                                </View>
+                              );
+                            }
+
+                            if (!rowData.item.confirmations) {
+                              return (
+                                <View style={{ width: 25 }}>
+                                  <BlueTransactionPendingIcon />
+                                </View>
+                              );
+                            } else if (rowData.item.value < 0) {
+                              return (
+                                <View style={{ width: 25 }}>
+                                  <BlueTransactionOutgoingIcon />
+                                </View>
+                              );
+                            } else {
+                              return (
+                                <View style={{ width: 25 }}>
+                                  <BlueTransactionIncommingIcon />
+                                </View>
+                              );
+                            }
+                          })()}
+                          title={loc.transactionTimeToReadable(rowData.item.received)}
+                          subtitle={
+                            (rowData.item.confirmations < 7 ? loc.transactions.list.conf + ': ' + rowData.item.confirmations + ' ' : '') +
+                            this.txMemo(rowData.item.hash) +
+                            (rowData.item.memo || '')
+                          }
+                          onPress={() => {
+                            if (rowData.item.hash) {
+                              navigate('TransactionDetails', {
+                                hash: rowData.item.hash,
+                              });
+                            }
+                          }}
+                          badge={{
+                            value: 3,
+                            textStyle: { color: 'orange' },
+                            containerStyle: { marginTop: 0 },
+                          }}
+                          hideChevron
+                          rightTitle={new BigNumber((rowData.item.value && rowData.item.value) || 0).div(100000000).toString()}
+                          rightTitleStyle={{
+                            fontWeight: '600',
+                            fontSize: 16,
+                            color: rowData.item.value / 100000000 < 0 ? BlueApp.settings.foregroundColor : '#37c0a1',
+                          }}
+                        />
+                      );
+                    }}
+                  />
+                </BlueList>
+              </View>
+            </View>
+          );
         })()}
+        <View style={{ flex: 1, flexDirection: 'row', alignSelf: 'center', position: 'absolute', bottom: 30 }}>
+          {(() => {
+            if (this.state.showReceiveButton) {
+              return (
+                <BlueReceiveButtonIcon
+                  onPress={() => {
+                    let start = +new Date();
+                    let walletIndex = this.lastSnappedTo || 0;
+                    console.log('receiving on #', walletIndex);
 
-        {(() => {
+                    let c = 0;
-          if (this.state.showReceiveButton) {
+                    for (let w of BlueApp.getWallets()) {
-            return (
+                      if (c++ === walletIndex) {
-              <BlueReceiveButtonIcon
+                        console.log('found receiving address, secret=', w.getAddress(), ',', w.getSecret());
-                onPress={() => {
+                        navigate('ReceiveDetails', { address: w.getAddress(), secret: w.getSecret() });
-                  let start = +new Date();
+                        if (w.getAddress()) {
-                  let walletIndex = this.lastSnappedTo || 0;
+                          // EV(EV.enum.RECEIVE_ADDRESS_CHANGED, w.getAddress());
-                  console.log('receiving on #', walletIndex);
+                        }
-
-                  let c = 0;
-                  for (let w of BlueApp.getWallets()) {
-                    if (c++ === walletIndex) {
-                      console.log('found receiving address, secret=', w.getAddress(), ',', w.getSecret());
-                      navigate('ReceiveDetails', { address: w.getAddress(), secret: w.getSecret() });
-                      if (w.getAddress()) {
-                        // EV(EV.enum.RECEIVE_ADDRESS_CHANGED, w.getAddress());
                       }
                     }
-                  }
+                    let end = +new Date();
-                  let end = +new Date();
+                    console.log('took', (end - start) / 1000, 'sec');
-                  console.log('took', (end - start) / 1000, 'sec');
+                  }}
-                }}
+                />
-              />
+              );
-            );
+            }
-          }
+          })()}
-        })()}
 
-        {(() => {
+          {(() => {
-          if (this.state.showSendButton) {
+            if (this.state.showSendButton) {
-            return (
+              return (
-              <BlueSendButtonIcon
+                <BlueSendButtonIcon
-                onPress={() => {
+                  onPress={() => {
-                  let walletIndex = this.lastSnappedTo || 0;
+                    let walletIndex = this.lastSnappedTo || 0;
 
-                  let c = 0;
+                    let c = 0;
-                  for (let w of BlueApp.getWallets()) {
+                    for (let w of BlueApp.getWallets()) {
-                    if (c++ === walletIndex) {
+                      if (c++ === walletIndex) {
-                      if (w.type === new LightningCustodianWallet().type) {
+                        if (w.type === new LightningCustodianWallet().type) {
-                        navigate('ScanLndInvoice', { fromSecret: w.getSecret() });
+                          navigate('ScanLndInvoice', { fromSecret: w.getSecret() });
-                      } else {
+                        } else {
-                        navigate('SendDetails', { fromAddress: w.getAddress(), fromSecret: w.getSecret() });
+                          navigate('SendDetails', { fromAddress: w.getAddress(), fromSecret: w.getSecret() });
+                        }
                       }
                     }
-                  }
+                  }}
-                }}
+                />
-              />
+              );
-            );
+            }
-          }
+          })()}
-        })()}
 
-        {(() => {
+          {(() => {
-          if (this.state.showManageFundsBigButton) {
+            if (this.state.showManageFundsBigButton) {
-            return (
+              return (
-              <ManageFundsBigButton
+                <ManageFundsBigButton
-                onPress={() => {
+                  onPress={() => {
-                  let walletIndex = this.lastSnappedTo || 0;
+                    let walletIndex = this.lastSnappedTo || 0;
 
-                  let c = 0;
+                    let c = 0;
-                  for (let w of BlueApp.getWallets()) {
+                    for (let w of BlueApp.getWallets()) {
-                    if (c++ === walletIndex) {
+                      if (c++ === walletIndex) {
-                      console.log('navigating to secret ', w.getSecret());
+                        console.log('navigating to secret ', w.getSecret());
-                      navigate('ManageFunds', { fromSecret: w.getSecret() });
+                        navigate('ManageFunds', { fromSecret: w.getSecret() });
+                      }
                     }
-                  }
+                  }}
-                }}
+                />
-              />
+              );
-            );
+            }
-          }
+          })()}
-        })()}
+        </View>
       </SafeBlueArea>
     );
   }