display balance when LBC input text is focused #97
10 changed files with 61 additions and 30 deletions
|
@ -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.')}
|
||||
|
|
|
@ -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')}
|
||||
|
|
|
@ -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.')}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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.')}
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in a new issue