display floating wallet balance (#252)

* display floating wallet balance

app/src/component/floatingWalletBalance/index.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { selectBalance } from 'lbry-redux';
+import FloatingWalletBalance from './view';
+
+const select = state => ({
+  balance: selectBalance(state),
+});
+
+export default connect(select, null)(FloatingWalletBalance);

app/src/component/floatingWalletBalance/view.js

@@ -0,0 +1,28 @@
+// @flow
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { formatCredits } from 'lbry-redux'
+import Address from '../address';
+import Button from '../button';
+import floatingButtonStyle from '../../styles/floatingButton';
+
+type Props = {
+  balance: number,
+};
+
+class FloatingWalletBalance extends React.PureComponent<Props> {
+  render() {
+    const { balance, navigation } = this.props;
+
+    return (
+      <TouchableOpacity style={[floatingButtonStyle.container, floatingButtonStyle.bottomRight]}
+                        onPress={() => navigation && navigation.navigate({ routeName: 'Wallet' })}>
+        <Text style={floatingButtonStyle.text}>
+          {(balance || balance === 0) && (formatCredits(balance, 2) + ' LBC')}
+        </Text>
+      </TouchableOpacity>
+    );
+  }
+}
+
+export default FloatingWalletBalance;

app/src/page/discover/index.js

@@ -1,8 +1,14 @@
 import { connect } from 'react-redux';
-import { doFetchFeaturedUris, selectFeaturedUris, selectFetchingFeaturedUris } from 'lbry-redux';
+import {
+  doFetchFeaturedUris,
+  selectBalance,
+  selectFeaturedUris,
+  selectFetchingFeaturedUris
+} from 'lbry-redux';
 import DiscoverPage from './view';
 
 const select = state => ({
+  balance: selectBalance(state),
   featuredUris: selectFeaturedUris(state),
   fetchingFeaturedUris: selectFetchingFeaturedUris(state),
 });

app/src/page/discover/view.js

@@ -10,9 +10,10 @@ import {
 } from 'react-native';
 import { normalizeURI } from 'lbry-redux';
 import moment from 'moment';
+import Colors from '../../styles/colors';
 import FileItem from '../../component/fileItem';
 import discoverStyle from '../../styles/discover';
-import Colors from '../../styles/colors';
+import FloatingWalletBalance from '../../component/floatingWalletBalance';
 import UriBar from '../../component/uriBar';
 
 class DiscoverPage extends React.PureComponent {
@@ -72,6 +73,7 @@ class DiscoverPage extends React.PureComponent {
             keyExtractor={(item, index) => item}
           />
         }
+        <FloatingWalletBalance navigation={navigation} />
         <UriBar navigation={navigation} />
       </View>
     );

app/src/page/file/view.js

@@ -21,6 +21,7 @@ import ChannelPage from '../channel';
 import FileDownloadButton from '../../component/fileDownloadButton';
 import FileItemMedia from '../../component/fileItemMedia';
 import FilePrice from '../../component/filePrice';
+import FloatingWalletBalance from '../../component/floatingWalletBalance';
 import Link from '../../component/link';
 import MediaPlayer from '../../component/mediaPlayer';
 import UriBar from '../../component/uriBar';
@@ -369,7 +370,7 @@ class FilePage extends React.PureComponent {
               </ScrollView>
             </View>
           )}
-
+          {!this.state.fullscreenMode && <FloatingWalletBalance navigation={navigation} />}
           {!this.state.fullscreenMode && <UriBar value={uri} navigation={navigation} />}
         </View>
       );

app/src/page/search/view.js

@@ -11,6 +11,7 @@ import {
 import Colors from '../../styles/colors';
 import PageHeader from '../../component/pageHeader';
 import SearchResultItem from '../../component/searchResultItem';
+import FloatingWalletBalance from '../../component/floatingWalletBalance';
 import UriBar from '../../component/uriBar';
 import searchStyle from '../../styles/search';
 
@@ -18,7 +19,7 @@ class SearchPage extends React.PureComponent {
   static navigationOptions = {
     title: 'Search Results'
   };
-  
+
   componentDidMount() {
     const { navigation, search } = this.props;
     const { searchQuery } = navigation.state.params;
@@ -26,11 +27,11 @@ class SearchPage extends React.PureComponent {
       search(searchQuery);
     }
   }
-  
+
   render() {
     const { isSearching, navigation, uris, query } = this.props;
     const { searchQuery } = navigation.state.params;
-    
+
     return (
       <View style={searchStyle.container}>
         {!isSearching && (!uris || uris.length === 0) &&
@@ -49,6 +50,7 @@ class SearchPage extends React.PureComponent {
               ) : null }
         </ScrollView>
         {isSearching && <ActivityIndicator size="large" color={Colors.LbryGreen} style={searchStyle.loading} /> }
+        <FloatingWalletBalance navigation={navigation} />
         <UriBar value={searchQuery} navigation={navigation} />
       </View>
     );

app/src/page/trending/view.js

@@ -13,6 +13,7 @@ import moment from 'moment';
 import FileItem from '../../component/fileItem';
 import discoverStyle from '../../styles/discover';
 import Colors from '../../styles/colors';
+import FloatingWalletBalance from '../../component/floatingWalletBalance';
 import UriBar from '../../component/uriBar';
 
 class TrendingPage extends React.PureComponent {
@@ -47,6 +48,7 @@ class TrendingPage extends React.PureComponent {
             keyExtractor={(item, index) => item}
           />
         }
+        <FloatingWalletBalance navigation={navigation} />
         <UriBar navigation={navigation} />
       </View>
     );

app/src/styles/colors.js

@@ -4,6 +4,7 @@ const Colors = {
   DarkGrey: '#555555',
   DescriptionGrey: '#999999',
   LbryGreen: '#40b89a',
+  BrighterLbryGreen: '#40b887',
   LightGrey: '#cccccc',
   LighterGrey: '#e5e5e5',
   Orange: '#ffbb00',

app/src/styles/floatingButton.js

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native';
+import Colors from './colors';
+
+const floatingButtonStyle = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    zIndex: 100,
+    borderRadius: 24,
+    padding: 14,
+    paddingLeft: 20,
+    paddingRight: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: Colors.BrighterLbryGreen,
+    shadowColor: 'black',
+    shadowOpacity: 0.1,
+    shadowRadius: StyleSheet.hairlineWidth,
+    shadowOffset: {
+      height: StyleSheet.hairlineWidth,
+    },
+    elevation: 4
+  },
+  text: {
+    color: Colors.White,
+    fontFamily: 'Metropolis-Bold',
+    fontSize: 18,
+  },
+  bottomRight: {
+    right: 10,
+    bottom: 70
+  }
+});
+
+export default floatingButtonStyle;

app/src/styles/wallet.js

@@ -131,10 +131,13 @@ const walletStyle = StyleSheet.create({
     color: '#ffffff',
     fontFamily: 'Metropolis-Regular',
     fontSize: 16,
-    lineHeight: 30
+    lineHeight: 26
   },
   understand: {
-    marginLeft: 16
+    marginLeft: 16,
+    padding: 12,
+    paddingLeft: 18,
+    paddingRight: 18
   },
   currency: {
     alignSelf: 'flex-start',