display floating wallet balance (#252)

* display floating wallet balance
This commit is contained in:
Akinwale Ariwodola 2018-08-24 11:10:30 +01:00 committed by GitHub
parent 9a89d4c44c
commit 94f9ad6cc4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 96 additions and 8 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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