From c58aecb35ed27e85b76f9e74ece6dc12ef5f50e1 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Wed, 18 Dec 2019 10:22:33 +0100 Subject: [PATCH 1/2] display balance when LBC input text is focused (#97) * display balance when LBC input text is focused * use coins icon instead of 'Bal:' text --- src/component/channelSelector/view.js | 13 +++++++++++-- src/component/walletSend/view.js | 12 +++++++++++- src/page/channelCreator/view.js | 11 ++++++++++- src/page/file/view.js | 18 ++++++++++++++---- src/page/publish/view.js | 10 ++++++++++ src/styles/channelCreator.js | 10 ++++++++++ src/styles/channelSelector.js | 10 ++++++++++ src/styles/filePage.js | 13 +++++++++++-- src/styles/publish.js | 10 ++++++++++ src/styles/wallet.js | 10 ++++++++++ 10 files changed, 107 insertions(+), 10 deletions(-) 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} /> LBC + + {this.state.creditsInputFocused && } + {this.state.creditsInputFocused && ( + {formatCredits(parseFloat(balance), 1, true)} + )} + {__('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 { address: null, addressChanged: false, addressValid: false, + creditsInputFocused: false, }; componentWillUpdate(nextProps) { @@ -118,6 +120,8 @@ class WalletSend extends React.PureComponent { (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 { style={[walletStyle.input, walletStyle.amountInput]} /> LBC + + {this.state.creditsInputFocused && } + {this.state.creditsInputFocused && ( + {formatCredits(parseFloat(balance), 1, true)} + )} +