FIX: Replaced Close asset. Removed bounce animation glitch (#112)

FIX: Replaced Close asset
FIX: Removed bounce animation glitch

BlueComponents.js

@@ -158,7 +158,7 @@ export const BlueNavigationStyle = (navigation, withNavigationCloseButton = fals
   headerTintColor: '#0c2550',
   headerRight: withNavigationCloseButton ? (
     <TouchableOpacity style={{ marginHorizontal: 16 }} onPress={() => navigation.goBack(null)}>
-      <Icon name="times" size={24} type="font-awesome" color="#0c2550" />
+      <Image source={require('./img/close.png')} />
     </TouchableOpacity>
   ) : null,
   headerBackTitle: null,

MainBottomTabs.js

@@ -39,6 +39,9 @@ const WalletsStackNavigator = createStackNavigator({
   TransactionDetails: {
     screen: details,
   },
+  WalletDetails: {
+    screen: WalletDetails,
+  },
   RBF: {
     screen: rbf,
   },
@@ -110,9 +113,6 @@ const MainBottomTabs = createStackNavigator(
     ScanQrWif: {
       screen: scanQrWif,
     },
-    WalletDetails: {
-      screen: WalletDetails,
-    },
     WalletExport: {
       screen: WalletExport,
     },

loc/en.js

@@ -41,7 +41,7 @@ module.exports = {
       bitcoin: 'Bitcoin',
     },
     details: {
-      title: 'wallet details',
+      title: 'Wallet',
       address: 'Address',
       type: 'Type',
       label: 'Label',
@@ -50,6 +50,8 @@ module.exports = {
       are_you_sure: 'Are you sure?',
       yes_delete: 'Yes, delete',
       no_cancel: 'No, cancel',
+      delete: 'Delete',
+      save: 'Save',
       delete_this_wallet: 'Delete this wallet',
       export_backup: 'Export / backup',
       buy_bitcoin: 'Buy Bitcoin',

loc/es.js

@@ -45,6 +45,8 @@ module.exports = {
       address: 'Dirección',
       type: 'Tipo',
       label: 'Etiqueta',
+      delete: 'Eliminar',
+      save: 'Guardar',
       destination: 'destino',
       description: 'descripcion',
       are_you_sure: '¿Estás seguro?',

loc/pt_BR.js

@@ -54,6 +54,8 @@ module.exports = {
       delete_this_wallet: 'Apagar esta wallet',
       export_backup: 'Exportar / backup',
       buy_bitcoin: 'Buy Bitcoin',
+      delete: 'Delete',
+      save: 'Save',
     },
     export: {
       title: 'Exportar Wallet',

loc/pt_PT.js

@@ -44,6 +44,8 @@ module.exports = {
       title: 'wallet',
       address: 'Endereço',
       type: 'Tipo',
+      delete: 'Delete',
+      save: 'Save',
       label: 'Nome',
       destination: 'destination',
       description: 'description',

loc/ru.js

@@ -45,6 +45,8 @@ module.exports = {
       address: 'Адрес',
       type: 'Тип',
       label: 'Метка',
+      delete: 'Delete',
+      save: 'Save',
       are_you_sure: 'Вы уверены?',
       yes_delete: 'Да, удалить',
       destination: 'destination',

loc/ua.js

@@ -44,6 +44,8 @@ module.exports = {
       title: 'Інформація про Гаманець',
       address: 'Адреса',
       type: 'Тип',
+      delete: 'Delete',
+      save: 'Save',
       label: 'Мітка',
       destination: 'destination',
       description: 'description',

screen/settings/settings.js

@@ -39,7 +39,7 @@ export default class Settings extends Component {
             <BlueListItem title={loc.settings.encrypt_storage} />
           </TouchableOpacity>
           <TouchableOpacity onPress={() => this.props.navigation.navigate('Language')}>
-            <BlueListItem title={loc.settings.language}  />
+            <BlueListItem title={loc.settings.language} />
           </TouchableOpacity>
           <BlueListItem title={loc.settings.currency} />
           <TouchableOpacity onPress={() => this.props.navigation.navigate('About')}>

screen/wallets/details.js

@@ -1,18 +1,9 @@
+/* global alert */
 import React, { Component } from 'react';
-import { ActivityIndicator, View } from 'react-native';
-import {
-  BlueFormInput,
-  BlueButton,
-  SafeBlueArea,
-  BlueCard,
-  BlueText,
-  BlueFormLabel,
-  BlueFormInputAddress,
-  BlueSpacing20,
-  BlueNavigationStyle,
-} from '../../BlueComponents';
+import { ActivityIndicator, View, Button, Text, TextInput, Alert } from 'react-native';
+import { BlueButton, SafeBlueArea, BlueCard, BlueFormInputAddress, BlueSpacing20, BlueNavigationStyle } from '../../BlueComponents';
 import PropTypes from 'prop-types';
-import { LightningCustodianWallet } from '../../class/lightning-custodian-wallet'
+import { LightningCustodianWallet } from '../../class/lightning-custodian-wallet';
 let EV = require('../../events');
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
@@ -20,9 +11,17 @@ let loc = require('../../loc');
 
 export default class WalletDetails extends Component {
   static navigationOptions = ({ navigation }) => ({
-    ...BlueNavigationStyle(navigation, true),
+    ...BlueNavigationStyle(),
     title: loc.wallets.details.title,
-    headerLeft: null,
+    headerRight: (
+      <Button
+        color="#0c2550"
+        title={loc.wallets.details.save}
+        onPress={() => {
+          navigation.getParam('saveAction')();
+        }}
+      />
+    ),
   });
 
   constructor(props) {
@@ -42,11 +41,12 @@ export default class WalletDetails extends Component {
     }
 
     this.state = {
-      confirmDelete: false,
       isLoading: true,
+      walletName: wallet.getLabel(),
       wallet,
       address,
     };
+    this.props.navigation.setParams({ saveAction: () => this.setLabel() });
   }
 
   async componentDidMount() {
@@ -55,18 +55,11 @@ export default class WalletDetails extends Component {
     });
   }
 
-  async setLabel(text) {
-    this.state.wallet.setLabel(text);
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-    }
-    this.timeout = setTimeout(() => {
-      BlueApp.saveToDisk();
-    }, 3000);
-
-    this.setState({
-      labelChanged: true,
-    }); /* also, a hack to make screen update new typed text */
+  async setLabel() {
+    this.state.wallet.setLabel(this.state.walletName);
+    BlueApp.saveToDisk();
+    alert('Wallet updated.');
+    this.props.navigation.goBack(null);
   }
 
   render() {
@@ -85,111 +78,108 @@ export default class WalletDetails extends Component {
             if (this.state.wallet.getAddress()) {
               return (
                 <View>
-                  <BlueFormLabel>{loc.wallets.details.address}:</BlueFormLabel>
                   <BlueFormInputAddress value={this.state.wallet.getAddress()} editable />
                 </View>
               );
             }
           })()}
-
-          <BlueFormLabel>{loc.wallets.details.type}:</BlueFormLabel>
-          <BlueFormInput value={this.state.wallet.getTypeReadable()} editable={false} />
-
-          <BlueFormLabel>{loc.wallets.details.label}:</BlueFormLabel>
-          <BlueFormInput
-            value={this.state.wallet.getLabel()}
-            onChangeText={text => {
-              this.setLabel(text);
+          <Text style={{ color: '#0c2550', fontWeight: '500', fontSize: 14, marginVertical: 16 }}>
+            {loc.wallets.add.wallet_name.toLowerCase()}
+          </Text>
+
+          <View
+            style={{
+              flexDirection: 'row',
+              borderColor: '#d2d2d2',
+              borderBottomColor: '#d2d2d2',
+              borderWidth: 1.0,
+              borderBottomWidth: 0.5,
+              backgroundColor: '#f5f5f5',
+              minHeight: 44,
+              height: 44,
+              alignItems: 'center',
+              borderRadius: 4,
             }}
-          />
+          >
+            <TextInput
+              placeholder={loc.send.details.note_placeholder}
+              value={this.state.walletName}
+              onChangeText={text => this.setState({ walletName: text })}
+              numberOfLines={1}
+              style={{ flex: 1, marginHorizontal: 8, minHeight: 33, height: 33 }}
+              editable={!this.state.isLoading}
+            />
+          </View>
+
+          <Text style={{ color: '#0c2550', fontWeight: '500', fontSize: 14, marginVertical: 12 }}>
+            {loc.wallets.details.type.toLowerCase()}
+          </Text>
+          <Text style={{ color: '#81868e', fontWeight: '500', fontSize: 14 }}>{this.state.wallet.getTypeReadable()}</Text>
         </BlueCard>
+        <View>
+          <BlueSpacing20 />
+          <BlueButton
+            icon={{
+              name: 'cloud-upload',
+              type: 'octicon',
+              color: BlueApp.settings.buttonTextColor,
+            }}
+            onPress={() =>
+              this.props.navigation.navigate('WalletExport', {
+                address: this.state.wallet.getAddress(),
+                secret: this.state.wallet.getSecret(),
+              })
+            }
+            title={loc.wallets.details.export_backup}
+          />
 
-        {(() => {
-          if (this.state.confirmDelete) {
-            return (
-              <View style={{ alignItems: 'center' }}>
-                <BlueText>{loc.wallets.details.are_you_sure}</BlueText>
-                <View style={{ flex: 0, flexDirection: 'row' }}>
-                  <View style={{ flex: 0.5 }}>
-                    <BlueButton
-                      icon={{
-                        name: 'stop',
-                        type: 'octicon',
-                        color: BlueApp.settings.buttonTextColor,
-                      }}
-                      onPress={async () => {
-                        BlueApp.deleteWallet(this.state.wallet);
-                        await BlueApp.saveToDisk();
-                        EV(EV.enum.TRANSACTIONS_COUNT_CHANGED);
-                        EV(EV.enum.WALLETS_COUNT_CHANGED);
-                        this.props.navigation.navigate('Wallets');
-                      }}
-                      title={loc.wallets.details.yes_delete}
-                    />
-                  </View>
-                  <View style={{ flex: 0.5 }}>
-                    <BlueButton
-                      onPress={async () => {
-                        this.setState({ confirmDelete: false });
-                      }}
-                      title={loc.wallets.details.no_cancel}
-                    />
-                  </View>
-                </View>
-              </View>
-            );
-          } else {
-            return (
-              <View>
-                <BlueSpacing20 />
-                <BlueButton
-                  icon={{
-                    name: 'stop',
-                    type: 'octicon',
-                    color: BlueApp.settings.buttonTextColor,
-                  }}
-                  onPress={async () => {
-                    this.setState({ confirmDelete: true });
-                  }}
-                  title={loc.wallets.details.delete_this_wallet}
-                />
-                <BlueSpacing20 />
-
-                <BlueButton
-                  icon={{
-                    name: 'cloud-upload',
-                    type: 'octicon',
-                    color: BlueApp.settings.buttonTextColor,
-                  }}
-                  onPress={() =>
-                    this.props.navigation.navigate('WalletExport', {
-                      address: this.state.wallet.getAddress(),
-                      secret: this.state.wallet.getSecret(),
-                    })
-                  }
-                  title={loc.wallets.details.export_backup}
-                />
-
-                <BlueSpacing20 />
-
-                {(this.state.wallet.type !== (new LightningCustodianWallet()).type) && <BlueButton
-                  icon={{
-                    name: 'shopping-cart',
-                    type: 'font-awesome',
-                    color: BlueApp.settings.buttonTextColor,
-                  }}
-                  onPress={() =>
-                    this.props.navigation.navigate('BuyBitcoin', {
-                      address: this.state.wallet.getAddress(),
-                      secret: this.state.wallet.getSecret(),
-                    })
-                  }
-                  title={loc.wallets.details.buy_bitcoin}
-                />}
-              </View>
-            );
-          }
-        })()}
+          <BlueSpacing20 />
+
+          {this.state.wallet.type !== new LightningCustodianWallet().type && (
+            <BlueButton
+              icon={{
+                name: 'shopping-cart',
+                type: 'font-awesome',
+                color: BlueApp.settings.buttonTextColor,
+              }}
+              onPress={() =>
+                this.props.navigation.navigate('BuyBitcoin', {
+                  address: this.state.wallet.getAddress(),
+                  secret: this.state.wallet.getSecret(),
+                })
+              }
+              title={loc.wallets.details.buy_bitcoin}
+            />
+          )}
+          <BlueSpacing20 />
+
+          <Button
+            title={loc.wallets.details.delete}
+            color="#d0021b"
+            onPress={() =>
+              Alert.alert(
+                'Alert',
+                loc.wallets.details.are_you_sure,
+                [
+                  {
+                    text: loc.wallets.details.yes_delete,
+                    onPress: async () => {
+                      BlueApp.deleteWallet(this.state.wallet);
+                      await BlueApp.saveToDisk();
+                      EV(EV.enum.TRANSACTIONS_COUNT_CHANGED);
+                      EV(EV.enum.WALLETS_COUNT_CHANGED);
+                      this.props.navigation.navigate('Wallets');
+                    },
+                    style: 'destructive',
+                  },
+                  { text: loc.wallets.details.no_cancel, onPress: () => {}, style: 'cancel' },
+                ],
+                { cancelable: false },
+              )
+            }
+          />
+        </View>
+        ); } })()}
       </SafeBlueArea>
     );
   }
@@ -205,5 +195,6 @@ WalletDetails.propTypes = {
     }),
     navigate: PropTypes.func,
     goBack: PropTypes.func,
+    setParams: PropTypes.func,
   }),
 };

screen/wallets/list.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, TouchableOpacity, Text, FlatList, RefreshControl, LayoutAnimation, ScrollView } from 'react-native';
+import { View, TouchableOpacity, Text, FlatList, RefreshControl, ScrollView } from 'react-native';
 import {
   BlueTransactionOnchainIcon,
   BlueLoading,
@@ -21,23 +21,6 @@ let A = require('../../analytics');
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
 let loc = require('../../loc');
-const customLayoutSpringAnimation = {
-  duration: 300,
-  create: {
-    type: LayoutAnimation.Types.spring,
-    property: LayoutAnimation.Properties.scaleXY,
-    springDamping: 0.7,
-  },
-  update: {
-    type: LayoutAnimation.Types.spring,
-    springDamping: 0.7,
-  },
-  delete: {
-    type: LayoutAnimation.Types.spring,
-    property: LayoutAnimation.Properties.scaleXY,
-    springDamping: 0.7,
-  },
-};
 
 export default class WalletsList extends Component {
   static navigationOptions = ({ navigation }) => ({
@@ -66,12 +49,6 @@ export default class WalletsList extends Component {
 
   async componentDidMount() {
     this.refreshFunction();
-
-    LayoutAnimation.configureNext(customLayoutSpringAnimation);
-    this.setState({
-      isLoading: false,
-      dataSource: BlueApp.getTransactions(),
-    });
   }
 
   /**
@@ -149,7 +126,6 @@ export default class WalletsList extends Component {
   onSnapToItem(index) {
     console.log('onSnapToItem', index);
     this.lastSnappedTo = index;
-    LayoutAnimation.configureNext(customLayoutSpringAnimation);
 
     if (index < BlueApp.getWallets().length) {
       // not the last

screen/wallets/transactions.js

@@ -366,22 +366,24 @@ export default class WalletTransactions extends Component {
                   <Text />
                   <Text />
 
-                  {!this.isLightning() && <Text
-                    style={{
-                      fontSize: 18,
-                      color: '#9aa0aa',
-                      textAlign: 'center',
-                      textDecorationLine: 'underline',
-                    }}
-                    onPress={() =>
-                      this.props.navigation.navigate('BuyBitcoin', {
-                        address: this.state.wallet.getAddress(),
-                        secret: this.state.wallet.getSecret(),
-                      })
-                    }
-                  >
-                    {loc.wallets.list.tap_here_to_buy}
-                  </Text>}
+                  {!this.isLightning() && (
+                    <Text
+                      style={{
+                        fontSize: 18,
+                        color: '#9aa0aa',
+                        textAlign: 'center',
+                        textDecorationLine: 'underline',
+                      }}
+                      onPress={() =>
+                        this.props.navigation.navigate('BuyBitcoin', {
+                          address: this.state.wallet.getAddress(),
+                          secret: this.state.wallet.getSecret(),
+                        })
+                      }
+                    >
+                      {loc.wallets.list.tap_here_to_buy}
+                    </Text>
+                  )}
                 </View>
               }
               refreshControl={<RefreshControl onRefresh={() => this.refreshTransactions()} refreshing={this.state.isTransactionsLoading} />}