diff --git a/src/component/channelSelector/view.js b/src/component/channelSelector/view.js
index 2652307..ccce9f7 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,19 @@ 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>
+ <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 6b9f914..a4036cf 100644
--- a/src/component/walletSend/view.js
+++ b/src/component/walletSend/view.js
@@ -1,9 +1,10 @@
// @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';
+import Icon from 'react-native-vector-icons/FontAwesome5';
import walletStyle from 'styles/wallet';
type DraftTransaction = {
@@ -24,6 +25,7 @@ class WalletSend extends React.PureComponent<Props> {
address: null,
addressChanged: false,
addressValid: false,
+ creditsInputFocused: false,
};
componentWillUpdate(nextProps) {
@@ -118,6 +120,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 +129,12 @@ class WalletSend extends React.PureComponent<Props> {
style={[walletStyle.input, walletStyle.amountInput]}
/>
<Text style={[walletStyle.text, walletStyle.currency]}>LBC</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 abe7c06..740834c 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,19 @@ 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>
+ <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 02c8641..ac6b747 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,12 @@ class FilePage extends React.PureComponent {
style={[filePageStyle.input, filePageStyle.tipAmountInput]}
/>
<Text style={[filePageStyle.text, filePageStyle.currency]}>LBC</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
@@ -1220,9 +1229,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..6eed0a7 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,16 @@ 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>
+ <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 56cb637..5ba0287 100644
--- a/src/styles/channelCreator.js
+++ b/src/styles/channelCreator.js
@@ -30,6 +30,16 @@ const channelCreatorStyle = StyleSheet.create({
fontFamily: 'Inter-UI-Regular',
fontSize: 16,
},
+ balance: {
+ alignItems: 'center',
+ flexDirection: 'row',
+ marginLeft: 24,
+ },
+ balanceText: {
+ fontFamily: 'Inter-UI-SemiBold',
+ fontSize: 14,
+ marginLeft: 4,
+ },
channelNameInput: {
fontFamily: 'Inter-UI-Regular',
fontSize: 16,
diff --git a/src/styles/channelSelector.js b/src/styles/channelSelector.js
index 86804a0..8ac4e29 100644
--- a/src/styles/channelSelector.js
+++ b/src/styles/channelSelector.js
@@ -24,6 +24,16 @@ const channelSelectorStyle = StyleSheet.create({
fontFamily: 'Inter-UI-Regular',
fontSize: 16,
},
+ balance: {
+ alignItems: 'center',
+ flexDirection: 'row',
+ marginLeft: 24,
+ },
+ balanceText: {
+ fontFamily: 'Inter-UI-SemiBold',
+ fontSize: 14,
+ marginLeft: 4,
+ },
channelNameInput: {
fontFamily: 'Inter-UI-Regular',
fontSize: 16,
diff --git a/src/styles/filePage.js b/src/styles/filePage.js
index 0c2ae8e..ec39ac7 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,16 @@ const filePageStyle = StyleSheet.create({
relatedLoading: {
marginTop: 16,
},
+ balance: {
+ alignItems: 'center',
+ flexDirection: 'row',
+ marginLeft: 24,
+ },
+ balanceText: {
+ fontFamily: 'Inter-UI-SemiBold',
+ fontSize: 14,
+ marginLeft: 4,
+ },
});
export default filePageStyle;
diff --git a/src/styles/publish.js b/src/styles/publish.js
index 813b0e7..d7ac27b 100644
--- a/src/styles/publish.js
+++ b/src/styles/publish.js
@@ -466,6 +466,16 @@ const publishStyle = StyleSheet.create({
fontFamily: 'Inter-UI-SemiBold',
fontSize: 12,
},
+ balance: {
+ alignItems: 'center',
+ flexDirection: 'row',
+ marginLeft: 24,
+ },
+ balanceText: {
+ fontFamily: 'Inter-UI-SemiBold',
+ fontSize: 14,
+ marginLeft: 4,
+ },
});
export default publishStyle;
diff --git a/src/styles/wallet.js b/src/styles/wallet.js
index da827a3..c85bc79 100644
--- a/src/styles/wallet.js
+++ b/src/styles/wallet.js
@@ -126,6 +126,16 @@ const walletStyle = StyleSheet.create({
marginLeft: 16,
marginBottom: 16,
},
+ balanceFocus: {
+ alignItems: 'center',
+ flexDirection: 'row',
+ marginLeft: 24,
+ },
+ balanceText: {
+ fontFamily: 'Inter-UI-SemiBold',
+ fontSize: 14,
+ marginLeft: 4,
+ },
infoText: {
color: '#aaaaaa',
fontFamily: 'Inter-UI-Regular',