improve ux for insufficient balance for channel creation and publish

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/page/channelCreator/view.js

@@ -34,7 +34,7 @@ import seedrandom from 'seedrandom';
 export default class ChannelCreator extends React.PureComponent {
   state = {
     autoStyle: null,
-    canSave: false,
+    canSave: true,
     claimId: null,
     currentSelectedValue: Constants.ITEM_ANONYMOUS,
     currentPhase: null,
@@ -161,9 +161,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 +389,14 @@ export default class ChannelCreator extends React.PureComponent {
       website,
     } = this.state;
 
+    if (balance < 0.1) {
+      notify({
+        message:
+          "You don't have enough credits to create a channel. Press the blue bar to earn some credits from rewards!",
+      });
+      return;
+    }
+
     if (newChannelName.trim().length === 0 || !isNameValid(newChannelName.substr(1), false)) {
       notify({ message: 'Your channel name contains invalid characters.' });
       return;
@@ -528,9 +533,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 +553,7 @@ export default class ChannelCreator extends React.PureComponent {
 
   resetChannelCreator = () => {
     this.setState({
-      canSave: false,
+      canSave: true,
       claimId: null,
       editMode: false,
       displayName: null,
@@ -610,7 +615,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),
@@ -1046,7 +1051,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

@@ -77,7 +77,7 @@ class PublishPage extends React.PureComponent {
   camera = null;
 
   state = {
-    canPublish: false,
+    canPublish: true,
     canUseCamera: false,
     documentPickerOpen: false,
     editMode: false,
@@ -186,7 +186,6 @@ class PublishPage extends React.PureComponent {
       NativeModules.Gallery.getThumbnailPath().then(thumbnailPath => this.setState({ thumbnailPath }));
       this.setState(
         {
-          canPublish: balance >= 0.1,
           loadingVideos: true,
         },
         () => {
@@ -319,7 +318,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 +339,14 @@ class PublishPage extends React.PureComponent {
       uri,
     } = this.state;
 
+    if (balance < 0.1) {
+      notify({
+        message:
+          "You don't have enough credits to publish this content. Press the blue bar at the top to earn some credits from rewards!",
+      });
+      return;
+    }
+
     if (!title || title.trim().length === 0) {
       notify({ message: 'Please provide a title' });
       return;
@@ -980,7 +987,7 @@ class PublishPage extends React.PureComponent {
               </View>
             )}
           </TouchableOpacity>
-          {!this.state.canPublish && <PublishRewardsDriver navigation={navigation} />}
+          {balance < 0.1 && <PublishRewardsDriver navigation={navigation} />}
 
           <View style={publishStyle.card}>
             <View style={publishStyle.textInputLayout}>
@@ -1190,7 +1197,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,