improve ux for insufficient balance for channel creation and publish (#58)

src/component/fileRewardsDriver/view.js

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

src/constants.js

@@ -138,6 +138,8 @@ const Constants = {
   MORE_PLACEHOLDER: '_more',
 
   TRUE_STRING: 'true',
+
+  MINIMUM_TRANSACTION_BALANCE: 0.1,
 };
 
 export default Constants;

src/page/channelCreator/view.js

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

src/page/publish/view.js

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

src/styles/colors.js

@@ -19,6 +19,7 @@ const Colors = {
   VeryLightGrey: '#f1f1f1',
   White: '#ffffff',
   UriDescBlue: '#3971db',
+  RewardDriverBlue: '#2196f3',
 
   StatsAudio: '#f6a637',
   StatsImage: '#ff4a7d',

src/styles/filePage.js

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

src/styles/publish.js

@@ -297,7 +297,7 @@ const publishStyle = StyleSheet.create({
   },
   rewardDriverCard: {
     alignItems: 'center',
-    backgroundColor: Colors.BrighterLbryGreen,
+    backgroundColor: Colors.RewardDriverBlue,
     flexDirection: 'row',
     paddingLeft: 16,
     paddingRight: 16,

src/styles/wallet.js

@@ -198,7 +198,7 @@ const walletStyle = StyleSheet.create({
   },
   rewardDriverCard: {
     alignItems: 'center',
-    backgroundColor: Colors.BrighterLbryGreen,
+    backgroundColor: Colors.RewardDriverBlue,
     flexDirection: 'row',
     padding: 16,
     marginLeft: 16,