display balance when LBC input text is focused #97

Merged
akinwale merged 2 commits from input-focus-balance into master 2019-12-18 10:22:34 +01:00
10 changed files with 61 additions and 30 deletions
Showing only changes of commit 9609f423df - Show all commits

View file

@ -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.')}

View file

@ -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')}

View file

@ -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.')}

View file

@ -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

View file

@ -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.')}

View file

@ -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',

View file

@ -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',

View file

@ -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,
},
});

View file

@ -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,
},
});

View file

@ -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',