diff --git a/app/src/component/floatingWalletBalance/index.js b/app/src/component/floatingWalletBalance/index.js new file mode 100644 index 0000000..27e9e25 --- /dev/null +++ b/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); diff --git a/app/src/component/floatingWalletBalance/view.js b/app/src/component/floatingWalletBalance/view.js new file mode 100644 index 0000000..8320ecd --- /dev/null +++ b/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 { + render() { + const { balance, navigation } = this.props; + + return ( + navigation && navigation.navigate({ routeName: 'Wallet' })}> + + {(balance || balance === 0) && (formatCredits(balance, 2) + ' LBC')} + + + ); + } +} + +export default FloatingWalletBalance; diff --git a/app/src/page/discover/index.js b/app/src/page/discover/index.js index a587686..0930f68 100644 --- a/app/src/page/discover/index.js +++ b/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), }); diff --git a/app/src/page/discover/view.js b/app/src/page/discover/view.js index a0473b6..fc0133a 100644 --- a/app/src/page/discover/view.js +++ b/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} /> } + ); diff --git a/app/src/page/file/view.js b/app/src/page/file/view.js index d8fa72a..a1ce624 100644 --- a/app/src/page/file/view.js +++ b/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 { )} - + {!this.state.fullscreenMode && } {!this.state.fullscreenMode && } ); diff --git a/app/src/page/search/view.js b/app/src/page/search/view.js index 5caa14c..535dfe6 100644 --- a/app/src/page/search/view.js +++ b/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 ( {!isSearching && (!uris || uris.length === 0) && @@ -49,6 +50,7 @@ class SearchPage extends React.PureComponent { ) : null } {isSearching && } + ); diff --git a/app/src/page/trending/view.js b/app/src/page/trending/view.js index d7f6864..8312b61 100644 --- a/app/src/page/trending/view.js +++ b/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} /> } + ); diff --git a/app/src/styles/colors.js b/app/src/styles/colors.js index d2a47e8..9b1c0b5 100644 --- a/app/src/styles/colors.js +++ b/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', diff --git a/app/src/styles/floatingButton.js b/app/src/styles/floatingButton.js new file mode 100644 index 0000000..a45df1e --- /dev/null +++ b/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; diff --git a/app/src/styles/wallet.js b/app/src/styles/wallet.js index 8b07c67..c82e37e 100644 --- a/app/src/styles/wallet.js +++ b/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',