From 3662834fbae588f4c000a2d95eb89891f7c81c3f Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Fri, 13 Dec 2019 17:02:53 +0100
Subject: [PATCH 1/2] display balance when LBC input text is focused

---
 src/component/channelSelector/view.js | 12 ++++++++++--
 src/component/walletSend/view.js      | 10 +++++++++-
 src/page/channelCreator/view.js       | 10 +++++++++-
 src/page/file/view.js                 | 17 +++++++++++++----
 src/page/publish/view.js              |  9 +++++++++
 src/styles/channelCreator.js          |  5 +++++
 src/styles/channelSelector.js         |  5 +++++
 src/styles/filePage.js                |  8 ++++++--
 src/styles/publish.js                 |  5 +++++
 src/styles/wallet.js                  |  5 +++++
 10 files changed, 76 insertions(+), 10 deletions(-)

diff --git a/src/component/channelSelector/view.js b/src/component/channelSelector/view.js
index 2652307..1f109ac 100644
--- a/src/component/channelSelector/view.js
+++ b/src/component/channelSelector/view.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { CLAIM_VALUES, isNameValid } from 'lbry-redux';
+import { CLAIM_VALUES, formatCredits, isNameValid } from 'lbry-redux';
 import { ActivityIndicator, NativeModules, Picker, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { logPublish } from 'utils/helper';
 import Button from 'component/button';
@@ -14,6 +14,7 @@ export default class ChannelSelector extends React.PureComponent {
     super(props);
 
     this.state = {
+      creditsInputFocused: false,
       currentSelectedValue: Constants.ITEM_ANONYMOUS,
       newChannelName: '',
       newChannelBid: 0.1,
@@ -188,7 +189,7 @@ export default class ChannelSelector extends React.PureComponent {
 
   render() {
     const channel = this.state.addingChannel ? 'new' : this.props.channel;
-    const { enabled, fetchingChannels, channels = [] } = this.props;
+    const { balance, enabled, fetchingChannels, channels = [] } = this.props;
     const pickerItems = [Constants.ITEM_ANONYMOUS, Constants.ITEM_CREATE_A_CHANNEL].concat(
       channels ? channels.map(ch => ch.name) : []
     );
@@ -244,11 +245,18 @@ export default class ChannelSelector extends React.PureComponent {
                 style={channelSelectorStyle.bidAmountInput}
                 value={String(newChannelBid)}
                 onChangeText={this.handleNewChannelBidChange}
+                onFocus={() => this.setState({ creditsInputFocused: true })}
+                onBlur={() => this.setState({ creditsInputFocused: false })}
                 placeholder={'0.00'}
                 keyboardType={'number-pad'}
                 underlineColorAndroid={Colors.NextLbryGreen}
               />
               <Text style={channelSelectorStyle.currency}>LBC</Text>
+              <Text style={channelSelectorStyle.balance}>
+                {this.state.creditsInputFocused
+                  ? __('Bal: %balance%', { balance: formatCredits(parseFloat(balance), 1, true) })
+                  : ''}
+              </Text>
             </View>
             <Text style={channelSelectorStyle.helpText}>
               {__('This LBC remains yours. It is a deposit to reserve the name and can be undone at any time.')}
diff --git a/src/component/walletSend/view.js b/src/component/walletSend/view.js
index 6b9f914..17aae7d 100644
--- a/src/component/walletSend/view.js
+++ b/src/component/walletSend/view.js
@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { regexAddress } from 'lbry-redux';
+import { formatCredits, regexAddress } from 'lbry-redux';
 import { Alert, Clipboard, TextInput, Text, View } from 'react-native';
 import Button from 'component/button';
 import Colors from 'styles/colors';
@@ -24,6 +24,7 @@ class WalletSend extends React.PureComponent<Props> {
     address: null,
     addressChanged: false,
     addressValid: false,
+    creditsInputFocused: false,
   };
 
   componentWillUpdate(nextProps) {
@@ -118,6 +119,8 @@ class WalletSend extends React.PureComponent<Props> {
             <TextInput
               ref={ref => (this.amountInput = ref)}
               onChangeText={value => this.setState({ amount: value })}
+              onFocus={() => this.setState({ creditsInputFocused: true })}
+              onBlur={() => this.setState({ creditsInputFocused: false })}
               keyboardType={'numeric'}
               placeholder={'0'}
               underlineColorAndroid={Colors.NextLbryGreen}
@@ -125,6 +128,11 @@ class WalletSend extends React.PureComponent<Props> {
               style={[walletStyle.input, walletStyle.amountInput]}
             />
             <Text style={[walletStyle.text, walletStyle.currency]}>LBC</Text>
+            <Text style={walletStyle.balanceFocus}>
+              {this.state.creditsInputFocused
+                ? __('Bal: %balance%', { balance: formatCredits(parseFloat(balance), 1, true) })
+                : ''}
+            </Text>
           </View>
           <Button
             text={__('Send')}
diff --git a/src/page/channelCreator/view.js b/src/page/channelCreator/view.js
index abe7c06..9c68625 100644
--- a/src/page/channelCreator/view.js
+++ b/src/page/channelCreator/view.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { CLAIM_VALUES, isNameValid, regexInvalidURI } from 'lbry-redux';
+import { CLAIM_VALUES, formatCredits, isNameValid, regexInvalidURI } from 'lbry-redux';
 import {
   ActivityIndicator,
   Alert,
@@ -38,6 +38,7 @@ export default class ChannelCreator extends React.PureComponent {
     autoStyle: null,
     canSave: true,
     claimId: null,
+    creditsInputFocused: false,
     currentSelectedValue: Constants.ITEM_ANONYMOUS,
     currentPhase: null,
     displayName: null,
@@ -960,11 +961,18 @@ export default class ChannelCreator extends React.PureComponent {
                   style={channelCreatorStyle.bidAmountInput}
                   value={String(newChannelBid)}
                   onChangeText={this.handleNewChannelBidChange}
+                  onFocus={() => this.setState({ creditsInputFocused: true })}
+                  onBlur={() => this.setState({ creditsInputFocused: false })}
                   placeholder={'0.00'}
                   keyboardType={'number-pad'}
                   underlineColorAndroid={Colors.NextLbryGreen}
                 />
                 <Text style={channelCreatorStyle.currency}>LBC</Text>
+                <Text style={channelCreatorStyle.balance}>
+                  {this.state.creditsInputFocused
+                    ? __('Bal: %balance%', { balance: formatCredits(parseFloat(balance), 1, true) })
+                    : ''}
+                </Text>
               </View>
               <Text style={channelCreatorStyle.helpText}>
                 {__('This LBC remains yours. It is a deposit to reserve the name and can be undone at any time.')}
diff --git a/src/page/file/view.js b/src/page/file/view.js
index 02c8641..4bad9ea 100644
--- a/src/page/file/view.js
+++ b/src/page/file/view.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Lbry, normalizeURI, parseURI } from 'lbry-redux';
+import { Lbry, formatCredits, normalizeURI, parseURI } from 'lbry-redux';
 import { Lbryio } from 'lbryinc';
 import {
   ActivityIndicator,
@@ -66,6 +66,7 @@ class FilePage extends React.PureComponent {
       autoOpened: false,
       autoDownloadStarted: false,
       autoPlayMedia: false,
+      creditsInputFocused: false,
       downloadButtonShown: false,
       downloadPressed: false,
       fileViewLogged: false,
@@ -1163,6 +1164,8 @@ class FilePage extends React.PureComponent {
                           editable={!this.state.sendTipStarted}
                           ref={ref => (this.tipAmountInput = ref)}
                           onChangeText={value => this.setState({ tipAmount: value })}
+                          onFocus={() => this.setState({ creditsInputFocused: true })}
+                          onBlur={() => this.setState({ creditsInputFocused: false })}
                           underlineColorAndroid={Colors.NextLbryGreen}
                           keyboardType={'numeric'}
                           placeholder={'0'}
@@ -1171,6 +1174,11 @@ class FilePage extends React.PureComponent {
                           style={[filePageStyle.input, filePageStyle.tipAmountInput]}
                         />
                         <Text style={[filePageStyle.text, filePageStyle.currency]}>LBC</Text>
+                        <Text style={filePageStyle.balance}>
+                          {this.state.creditsInputFocused
+                            ? __('Bal: %balance%', { balance: formatCredits(parseFloat(balance), 1, true) })
+                            : ''}
+                        </Text>
                       </View>
                       {this.state.sendTipStarted && <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />}
                       <Link
@@ -1220,9 +1228,10 @@ class FilePage extends React.PureComponent {
               </ScrollView>
             </View>
           )}
-          {!this.state.fullscreenMode && !this.state.showImageViewer && !this.state.showWebView && (
-            <FloatingWalletBalance navigation={navigation} />
-          )}
+          {!this.state.creditsInputFocused &&
+            !this.state.fullscreenMode &&
+            !this.state.showImageViewer &&
+            !this.state.showWebView && <FloatingWalletBalance navigation={navigation} />}
         </View>
       );
     }
diff --git a/src/page/publish/view.js b/src/page/publish/view.js
index adc9ac6..b27f7e3 100644
--- a/src/page/publish/view.js
+++ b/src/page/publish/view.js
@@ -19,6 +19,7 @@ import {
   isNameValid,
   batchActions,
   buildURI,
+  formatCredits,
   normalizeURI,
   parseURI,
   regexInvalidURI,
@@ -83,6 +84,7 @@ class PublishPage extends React.PureComponent {
   state = {
     canPublish: true,
     canUseCamera: false,
+    creditsInputFocused: false,
     documentPickerOpen: false,
     editMode: false,
     titleFocused: false,
@@ -1133,8 +1135,15 @@ class PublishPage extends React.PureComponent {
                 keyboardType={'numeric'}
                 value={String(this.state.bid)}
                 onChangeText={this.handleBidChange}
+                onFocus={() => this.setState({ creditsInputFocused: true })}
+                onBlur={() => this.setState({ creditsInputFocused: false })}
               />
               <Text style={publishStyle.currency}>LBC</Text>
+              <Text style={publishStyle.balance}>
+                {this.state.creditsInputFocused
+                  ? __('Bal: %balance%', { balance: formatCredits(parseFloat(balance), 1, true) })
+                  : ''}
+              </Text>
             </View>
             <Text style={publishStyle.helpText}>
               {__('This LBC remains yours and the deposit can be undone at any time.')}
diff --git a/src/styles/channelCreator.js b/src/styles/channelCreator.js
index 56cb637..bce7551 100644
--- a/src/styles/channelCreator.js
+++ b/src/styles/channelCreator.js
@@ -30,6 +30,11 @@ const channelCreatorStyle = StyleSheet.create({
     fontFamily: 'Inter-UI-Regular',
     fontSize: 16,
   },
+  balance: {
+    fontFamily: 'Inter-UI-SemiBold',
+    fontSize: 14,
+    marginLeft: 24,
+  },
   channelNameInput: {
     fontFamily: 'Inter-UI-Regular',
     fontSize: 16,
diff --git a/src/styles/channelSelector.js b/src/styles/channelSelector.js
index 86804a0..bc34b1d 100644
--- a/src/styles/channelSelector.js
+++ b/src/styles/channelSelector.js
@@ -24,6 +24,11 @@ const channelSelectorStyle = StyleSheet.create({
     fontFamily: 'Inter-UI-Regular',
     fontSize: 16,
   },
+  balance: {
+    fontFamily: 'Inter-UI-SemiBold',
+    fontSize: 14,
+    marginLeft: 24,
+  },
   channelNameInput: {
     fontFamily: 'Inter-UI-Regular',
     fontSize: 16,
diff --git a/src/styles/filePage.js b/src/styles/filePage.js
index 0c2ae8e..ea50cd2 100644
--- a/src/styles/filePage.js
+++ b/src/styles/filePage.js
@@ -277,6 +277,7 @@ const filePageStyle = StyleSheet.create({
   amountRow: {
     flexDirection: 'row',
     flex: 0.75,
+    alignItems: 'center',
   },
   button: {
     backgroundColor: Colors.LbryGreen,
@@ -299,9 +300,7 @@ const filePageStyle = StyleSheet.create({
     letterSpacing: 1,
   },
   currency: {
-    alignSelf: 'flex-start',
     fontSize: 12,
-    marginTop: 15,
     marginLeft: 4,
   },
   descriptionToggle: {
@@ -447,6 +446,11 @@ const filePageStyle = StyleSheet.create({
   relatedLoading: {
     marginTop: 16,
   },
+  balance: {
+    fontFamily: 'Inter-UI-SemiBold',
+    fontSize: 14,
+    marginLeft: 24,
+  },
 });
 
 export default filePageStyle;
diff --git a/src/styles/publish.js b/src/styles/publish.js
index 813b0e7..1b25c2d 100644
--- a/src/styles/publish.js
+++ b/src/styles/publish.js
@@ -466,6 +466,11 @@ const publishStyle = StyleSheet.create({
     fontFamily: 'Inter-UI-SemiBold',
     fontSize: 12,
   },
+  balance: {
+    fontFamily: 'Inter-UI-SemiBold',
+    fontSize: 14,
+    marginLeft: 24,
+  },
 });
 
 export default publishStyle;
diff --git a/src/styles/wallet.js b/src/styles/wallet.js
index da827a3..18cba8e 100644
--- a/src/styles/wallet.js
+++ b/src/styles/wallet.js
@@ -126,6 +126,11 @@ const walletStyle = StyleSheet.create({
     marginLeft: 16,
     marginBottom: 16,
   },
+  balanceFocus: {
+    fontFamily: 'Inter-UI-SemiBold',
+    fontSize: 14,
+    marginLeft: 24,
+  },
   infoText: {
     color: '#aaaaaa',
     fontFamily: 'Inter-UI-Regular',
-- 
2.45.2


From 9609f423df92c4255b966544f34cb859f236df20 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Sun, 15 Dec 2019 11:41:27 +0100
Subject: [PATCH 2/2] use coins icon instead of 'Bal:' text

---
 src/component/channelSelector/view.js | 11 ++++++-----
 src/component/walletSend/view.js      | 12 +++++++-----
 src/page/channelCreator/view.js       | 11 ++++++-----
 src/page/file/view.js                 | 11 ++++++-----
 src/page/publish/view.js              | 11 ++++++-----
 src/styles/channelCreator.js          |  7 ++++++-
 src/styles/channelSelector.js         |  7 ++++++-
 src/styles/filePage.js                |  7 ++++++-
 src/styles/publish.js                 |  7 ++++++-
 src/styles/wallet.js                  |  7 ++++++-
 10 files changed, 61 insertions(+), 30 deletions(-)

diff --git a/src/component/channelSelector/view.js b/src/component/channelSelector/view.js
index 1f109ac..ccce9f7 100644
--- a/src/component/channelSelector/view.js
+++ b/src/component/channelSelector/view.js
@@ -252,11 +252,12 @@ export default class ChannelSelector extends React.PureComponent {
                 underlineColorAndroid={Colors.NextLbryGreen}
               />
               <Text style={channelSelectorStyle.currency}>LBC</Text>
-              <Text style={channelSelectorStyle.balance}>
-                {this.state.creditsInputFocused
-                  ? __('Bal: %balance%', { balance: formatCredits(parseFloat(balance), 1, true) })
-                  : ''}
-              </Text>
+              <View style={channelSelectorStyle.balance}>
+                {this.state.creditsInputFocused && <Icon name="coins" size={12} />}
+                {this.state.creditsInputFocused && (
+                  <Text style={channelSelectorStyle.balanceText}>{formatCredits(parseFloat(balance), 1, true)}</Text>
+                )}
+              </View>
             </View>
             <Text style={channelSelectorStyle.helpText}>
               {__('This LBC remains yours. It is a deposit to reserve the name and can be undone at any time.')}
diff --git a/src/component/walletSend/view.js b/src/component/walletSend/view.js
index 17aae7d..a4036cf 100644
--- a/src/component/walletSend/view.js
+++ b/src/component/walletSend/view.js
@@ -4,6 +4,7 @@ import { formatCredits, regexAddress } from 'lbry-redux';
 import { Alert, Clipboard, TextInput, Text, View } from 'react-native';
 import Button from 'component/button';
 import Colors from 'styles/colors';
+import Icon from 'react-native-vector-icons/FontAwesome5';
 import walletStyle from 'styles/wallet';
 
 type DraftTransaction = {
@@ -128,11 +129,12 @@ class WalletSend extends React.PureComponent<Props> {
               style={[walletStyle.input, walletStyle.amountInput]}
             />
             <Text style={[walletStyle.text, walletStyle.currency]}>LBC</Text>
-            <Text style={walletStyle.balanceFocus}>
-              {this.state.creditsInputFocused
-                ? __('Bal: %balance%', { balance: formatCredits(parseFloat(balance), 1, true) })
-                : ''}
-            </Text>
+            <View style={walletStyle.balanceFocus}>
+              {this.state.creditsInputFocused && <Icon name="coins" size={12} />}
+              {this.state.creditsInputFocused && (
+                <Text style={walletStyle.balanceText}>{formatCredits(parseFloat(balance), 1, true)}</Text>
+              )}
+            </View>
           </View>
           <Button
             text={__('Send')}
diff --git a/src/page/channelCreator/view.js b/src/page/channelCreator/view.js
index 9c68625..740834c 100644
--- a/src/page/channelCreator/view.js
+++ b/src/page/channelCreator/view.js
@@ -968,11 +968,12 @@ export default class ChannelCreator extends React.PureComponent {
                   underlineColorAndroid={Colors.NextLbryGreen}
                 />
                 <Text style={channelCreatorStyle.currency}>LBC</Text>
-                <Text style={channelCreatorStyle.balance}>
-                  {this.state.creditsInputFocused
-                    ? __('Bal: %balance%', { balance: formatCredits(parseFloat(balance), 1, true) })
-                    : ''}
-                </Text>
+                <View style={channelCreatorStyle.balance}>
+                  {this.state.creditsInputFocused && <Icon name="coins" size={12} />}
+                  {this.state.creditsInputFocused && (
+                    <Text style={channelCreatorStyle.balanceText}>{formatCredits(parseFloat(balance), 1, true)}</Text>
+                  )}
+                </View>
               </View>
               <Text style={channelCreatorStyle.helpText}>
                 {__('This LBC remains yours. It is a deposit to reserve the name and can be undone at any time.')}
diff --git a/src/page/file/view.js b/src/page/file/view.js
index 4bad9ea..ac6b747 100644
--- a/src/page/file/view.js
+++ b/src/page/file/view.js
@@ -1174,11 +1174,12 @@ class FilePage extends React.PureComponent {
                           style={[filePageStyle.input, filePageStyle.tipAmountInput]}
                         />
                         <Text style={[filePageStyle.text, filePageStyle.currency]}>LBC</Text>
-                        <Text style={filePageStyle.balance}>
-                          {this.state.creditsInputFocused
-                            ? __('Bal: %balance%', { balance: formatCredits(parseFloat(balance), 1, true) })
-                            : ''}
-                        </Text>
+                        <View style={filePageStyle.balance}>
+                          {this.state.creditsInputFocused && <Icon name="coins" size={12} />}
+                          {this.state.creditsInputFocused && (
+                            <Text style={filePageStyle.balanceText}>{formatCredits(parseFloat(balance), 1, true)}</Text>
+                          )}
+                        </View>
                       </View>
                       {this.state.sendTipStarted && <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />}
                       <Link
diff --git a/src/page/publish/view.js b/src/page/publish/view.js
index b27f7e3..6eed0a7 100644
--- a/src/page/publish/view.js
+++ b/src/page/publish/view.js
@@ -1139,11 +1139,12 @@ class PublishPage extends React.PureComponent {
                 onBlur={() => this.setState({ creditsInputFocused: false })}
               />
               <Text style={publishStyle.currency}>LBC</Text>
-              <Text style={publishStyle.balance}>
-                {this.state.creditsInputFocused
-                  ? __('Bal: %balance%', { balance: formatCredits(parseFloat(balance), 1, true) })
-                  : ''}
-              </Text>
+              <View style={publishStyle.balance}>
+                {this.state.creditsInputFocused && <Icon name="coins" size={12} />}
+                {this.state.creditsInputFocused && (
+                  <Text style={publishStyle.balanceText}>{formatCredits(parseFloat(balance), 1, true)}</Text>
+                )}
+              </View>
             </View>
             <Text style={publishStyle.helpText}>
               {__('This LBC remains yours and the deposit can be undone at any time.')}
diff --git a/src/styles/channelCreator.js b/src/styles/channelCreator.js
index bce7551..5ba0287 100644
--- a/src/styles/channelCreator.js
+++ b/src/styles/channelCreator.js
@@ -31,9 +31,14 @@ const channelCreatorStyle = StyleSheet.create({
     fontSize: 16,
   },
   balance: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginLeft: 24,
+  },
+  balanceText: {
     fontFamily: 'Inter-UI-SemiBold',
     fontSize: 14,
-    marginLeft: 24,
+    marginLeft: 4,
   },
   channelNameInput: {
     fontFamily: 'Inter-UI-Regular',
diff --git a/src/styles/channelSelector.js b/src/styles/channelSelector.js
index bc34b1d..8ac4e29 100644
--- a/src/styles/channelSelector.js
+++ b/src/styles/channelSelector.js
@@ -25,9 +25,14 @@ const channelSelectorStyle = StyleSheet.create({
     fontSize: 16,
   },
   balance: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginLeft: 24,
+  },
+  balanceText: {
     fontFamily: 'Inter-UI-SemiBold',
     fontSize: 14,
-    marginLeft: 24,
+    marginLeft: 4,
   },
   channelNameInput: {
     fontFamily: 'Inter-UI-Regular',
diff --git a/src/styles/filePage.js b/src/styles/filePage.js
index ea50cd2..ec39ac7 100644
--- a/src/styles/filePage.js
+++ b/src/styles/filePage.js
@@ -447,9 +447,14 @@ const filePageStyle = StyleSheet.create({
     marginTop: 16,
   },
   balance: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginLeft: 24,
+  },
+  balanceText: {
     fontFamily: 'Inter-UI-SemiBold',
     fontSize: 14,
-    marginLeft: 24,
+    marginLeft: 4,
   },
 });
 
diff --git a/src/styles/publish.js b/src/styles/publish.js
index 1b25c2d..d7ac27b 100644
--- a/src/styles/publish.js
+++ b/src/styles/publish.js
@@ -467,9 +467,14 @@ const publishStyle = StyleSheet.create({
     fontSize: 12,
   },
   balance: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginLeft: 24,
+  },
+  balanceText: {
     fontFamily: 'Inter-UI-SemiBold',
     fontSize: 14,
-    marginLeft: 24,
+    marginLeft: 4,
   },
 });
 
diff --git a/src/styles/wallet.js b/src/styles/wallet.js
index 18cba8e..c85bc79 100644
--- a/src/styles/wallet.js
+++ b/src/styles/wallet.js
@@ -127,9 +127,14 @@ const walletStyle = StyleSheet.create({
     marginBottom: 16,
   },
   balanceFocus: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginLeft: 24,
+  },
+  balanceText: {
     fontFamily: 'Inter-UI-SemiBold',
     fontSize: 14,
-    marginLeft: 24,
+    marginLeft: 4,
   },
   infoText: {
     color: '#aaaaaa',
-- 
2.45.2