improve ux for insufficient balance for channel creation and publish (#58)
This commit is contained in:
parent
b258654d60
commit
eca6af122b
8 changed files with 48 additions and 21 deletions
|
@ -9,7 +9,7 @@ class FileRewardsDriver extends React.PureComponent<Props> {
|
|||
|
||||
return (
|
||||
<TouchableOpacity style={filePageStyle.rewardDriverCard} onPress={() => navigation.navigate('Rewards')}>
|
||||
<Icon name="award" size={16} style={filePageStyle.rewardIcon} />
|
||||
<Icon name="award" size={16} style={filePageStyle.rewardDriverIcon} />
|
||||
<Text style={filePageStyle.rewardDriverText}>Earn some credits to access this content.</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
|
|
@ -138,6 +138,8 @@ const Constants = {
|
|||
MORE_PLACEHOLDER: '_more',
|
||||
|
||||
TRUE_STRING: 'true',
|
||||
|
||||
MINIMUM_TRANSACTION_BALANCE: 0.1,
|
||||
};
|
||||
|
||||
export default Constants;
|
||||
|
|
|
@ -32,9 +32,11 @@ import channelIconStyle from 'styles/channelIcon';
|
|||
import seedrandom from 'seedrandom';
|
||||
|
||||
export default class ChannelCreator extends React.PureComponent {
|
||||
scrollView = null;
|
||||
|
||||
state = {
|
||||
autoStyle: null,
|
||||
canSave: false,
|
||||
canSave: true,
|
||||
claimId: null,
|
||||
currentSelectedValue: Constants.ITEM_ANONYMOUS,
|
||||
currentPhase: null,
|
||||
|
@ -161,9 +163,6 @@ export default class ChannelCreator extends React.PureComponent {
|
|||
if (!fetchingChannels) {
|
||||
fetchChannelListMine();
|
||||
}
|
||||
if (balance >= 0.1) {
|
||||
this.setState({ canSave: true });
|
||||
}
|
||||
|
||||
DeviceEventEmitter.addListener('onDocumentPickerFilePicked', this.onFilePicked);
|
||||
DeviceEventEmitter.addListener('onDocumentPickerCanceled', this.onPickerCanceled);
|
||||
|
@ -392,6 +391,16 @@ export default class ChannelCreator extends React.PureComponent {
|
|||
website,
|
||||
} = this.state;
|
||||
|
||||
if (balance < Constants.MINIMUM_TRANSACTION_BALANCE) {
|
||||
notify({
|
||||
message: 'Creating a channel requires credits. Press the blue bar to get some for free.',
|
||||
});
|
||||
if (this.scrollView) {
|
||||
this.scrollView.scrollTo({ x: 0, y: 0, animated: true });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (newChannelName.trim().length === 0 || !isNameValid(newChannelName.substr(1), false)) {
|
||||
notify({ message: 'Your channel name contains invalid characters.' });
|
||||
return;
|
||||
|
@ -528,9 +537,9 @@ export default class ChannelCreator extends React.PureComponent {
|
|||
};
|
||||
|
||||
handleNewChannelPress = () => {
|
||||
const { balance, pushDrawerStack } = this.props;
|
||||
const { pushDrawerStack } = this.props;
|
||||
pushDrawerStack(Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM);
|
||||
this.setState({ canSave: balance >= 0.1, currentPhase: Constants.PHASE_CREATE });
|
||||
this.setState({ currentPhase: Constants.PHASE_CREATE });
|
||||
};
|
||||
|
||||
handleCreateCancel = () => {
|
||||
|
@ -548,7 +557,7 @@ export default class ChannelCreator extends React.PureComponent {
|
|||
|
||||
resetChannelCreator = () => {
|
||||
this.setState({
|
||||
canSave: false,
|
||||
canSave: true,
|
||||
claimId: null,
|
||||
editMode: false,
|
||||
displayName: null,
|
||||
|
@ -610,7 +619,7 @@ export default class ChannelCreator extends React.PureComponent {
|
|||
|
||||
pushDrawerStack(Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM);
|
||||
this.setState({
|
||||
canSave: balance >= 0.1,
|
||||
canSave: true,
|
||||
claimId: channel.claim_id,
|
||||
currentPhase: Constants.PHASE_CREATE,
|
||||
displayName: value && value.title ? value.title : channel.name.substring(1),
|
||||
|
@ -841,7 +850,7 @@ export default class ChannelCreator extends React.PureComponent {
|
|||
)}
|
||||
|
||||
{currentPhase === Constants.PHASE_CREATE && (
|
||||
<ScrollView style={channelCreatorStyle.createChannelContainer}>
|
||||
<ScrollView ref={ref => (this.scrollView = ref)} style={channelCreatorStyle.createChannelContainer}>
|
||||
<View style={channelCreatorStyle.imageSelectors}>
|
||||
<TouchableOpacity style={channelCreatorStyle.coverImageTouchArea} onPress={this.onCoverImagePress}>
|
||||
<Image
|
||||
|
@ -886,7 +895,7 @@ export default class ChannelCreator extends React.PureComponent {
|
|||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
{balance < 0.1 && <ChannelRewardsDriver navigation={navigation} />}
|
||||
{balance < Constants.MINIMUM_TRANSACTION_BALANCE && <ChannelRewardsDriver navigation={navigation} />}
|
||||
|
||||
<View style={channelCreatorStyle.card}>
|
||||
<View style={channelCreatorStyle.textInputLayout}>
|
||||
|
@ -1046,7 +1055,7 @@ export default class ChannelCreator extends React.PureComponent {
|
|||
<Link style={channelCreatorStyle.cancelLink} text="Cancel" onPress={this.handleCreateCancel} />
|
||||
<Button
|
||||
style={channelCreatorStyle.createButton}
|
||||
disabled={!canSave || uploadingImage || !newChannelName || newChannelName.trim().length === 0}
|
||||
disabled={!canSave || uploadingImage}
|
||||
text={editMode ? 'Update' : 'Create'}
|
||||
onPress={this.handleCreateChannelClick}
|
||||
/>
|
||||
|
|
|
@ -76,8 +76,10 @@ const languages = {
|
|||
class PublishPage extends React.PureComponent {
|
||||
camera = null;
|
||||
|
||||
scrollView = null;
|
||||
|
||||
state = {
|
||||
canPublish: false,
|
||||
canPublish: true,
|
||||
canUseCamera: false,
|
||||
documentPickerOpen: false,
|
||||
editMode: false,
|
||||
|
@ -186,7 +188,6 @@ class PublishPage extends React.PureComponent {
|
|||
NativeModules.Gallery.getThumbnailPath().then(thumbnailPath => this.setState({ thumbnailPath }));
|
||||
this.setState(
|
||||
{
|
||||
canPublish: balance >= 0.1,
|
||||
loadingVideos: true,
|
||||
},
|
||||
() => {
|
||||
|
@ -319,7 +320,7 @@ class PublishPage extends React.PureComponent {
|
|||
};
|
||||
|
||||
handlePublishPressed = () => {
|
||||
const { notify, publish, updatePublishForm } = this.props;
|
||||
const { balance, notify, publish, updatePublishForm } = this.props;
|
||||
const {
|
||||
editMode,
|
||||
bid,
|
||||
|
@ -340,6 +341,16 @@ class PublishPage extends React.PureComponent {
|
|||
uri,
|
||||
} = this.state;
|
||||
|
||||
if (balance < Constants.MINIMUM_TRANSACTION_BALANCE) {
|
||||
notify({
|
||||
message: 'Publishing content requires credits. Press the blue bar to get some for free.',
|
||||
});
|
||||
if (this.scrollView) {
|
||||
this.scrollView.scrollTo({ x: 0, y: 0, animated: true });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!title || title.trim().length === 0) {
|
||||
notify({ message: 'Please provide a title' });
|
||||
return;
|
||||
|
@ -961,7 +972,7 @@ class PublishPage extends React.PureComponent {
|
|||
this.updateThumbnailUriForMedia(currentMedia);
|
||||
}
|
||||
content = (
|
||||
<ScrollView style={publishStyle.publishDetails}>
|
||||
<ScrollView ref={ref => (this.scrollView = ref)} style={publishStyle.publishDetails}>
|
||||
<TouchableOpacity style={publishStyle.mainThumbnailContainer} onPress={this.handleThumbnailPressed}>
|
||||
<FastImage
|
||||
style={publishStyle.mainThumbnail}
|
||||
|
@ -980,7 +991,7 @@ class PublishPage extends React.PureComponent {
|
|||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
{!this.state.canPublish && <PublishRewardsDriver navigation={navigation} />}
|
||||
{balance < Constants.MINIMUM_TRANSACTION_BALANCE && <PublishRewardsDriver navigation={navigation} />}
|
||||
|
||||
<View style={publishStyle.card}>
|
||||
<View style={publishStyle.textInputLayout}>
|
||||
|
@ -1190,7 +1201,7 @@ class PublishPage extends React.PureComponent {
|
|||
<View style={publishStyle.rightActionButtons}>
|
||||
<Button
|
||||
style={publishStyle.publishButton}
|
||||
disabled={!this.state.canPublish || this.state.uploadThumbnailStarted}
|
||||
disabled={this.state.uploadThumbnailStarted}
|
||||
text={this.state.editMode ? 'Save changes' : 'Publish'}
|
||||
onPress={this.handlePublishPressed}
|
||||
/>
|
||||
|
|
|
@ -19,6 +19,7 @@ const Colors = {
|
|||
VeryLightGrey: '#f1f1f1',
|
||||
White: '#ffffff',
|
||||
UriDescBlue: '#3971db',
|
||||
RewardDriverBlue: '#2196f3',
|
||||
|
||||
StatsAudio: '#f6a637',
|
||||
StatsImage: '#ff4a7d',
|
||||
|
|
|
@ -348,13 +348,17 @@ const filePageStyle = StyleSheet.create({
|
|||
},
|
||||
rewardDriverCard: {
|
||||
alignItems: 'center',
|
||||
backgroundColor: Colors.BrighterLbryGreen,
|
||||
backgroundColor: Colors.RewardDriverBlue,
|
||||
flexDirection: 'row',
|
||||
paddingLeft: 16,
|
||||
paddingRight: 16,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 12,
|
||||
},
|
||||
rewardDriverIcon: {
|
||||
color: Colors.White,
|
||||
marginRight: 8,
|
||||
},
|
||||
rewardDriverText: {
|
||||
fontFamily: 'Inter-UI-Regular',
|
||||
color: Colors.White,
|
||||
|
|
|
@ -297,7 +297,7 @@ const publishStyle = StyleSheet.create({
|
|||
},
|
||||
rewardDriverCard: {
|
||||
alignItems: 'center',
|
||||
backgroundColor: Colors.BrighterLbryGreen,
|
||||
backgroundColor: Colors.RewardDriverBlue,
|
||||
flexDirection: 'row',
|
||||
paddingLeft: 16,
|
||||
paddingRight: 16,
|
||||
|
|
|
@ -198,7 +198,7 @@ const walletStyle = StyleSheet.create({
|
|||
},
|
||||
rewardDriverCard: {
|
||||
alignItems: 'center',
|
||||
backgroundColor: Colors.BrighterLbryGreen,
|
||||
backgroundColor: Colors.RewardDriverBlue,
|
||||
flexDirection: 'row',
|
||||
padding: 16,
|
||||
marginLeft: 16,
|
||||
|
|
Loading…
Reference in a new issue