Commit 3d44bfa8 authored by Akinwale Ariwodola's avatar Akinwale Ariwodola
Browse files

add wallet balance extra details card

parent 601c589f
import { connect } from 'react-redux';
import { selectClaimsBalance, selectSupportsBalance, selectTipsBalance } from 'lbry-redux';
import WalletBalanceExtra from './view';
const select = state => ({
claimsBalance: selectClaimsBalance(state) || 0,
supportsBalance: selectSupportsBalance(state) || 0,
tipsBalance: selectTipsBalance(state) || 0,
});
export default connect(
select,
null,
)(WalletBalanceExtra);
// @flow
import React from 'react';
import { Image, Text, View } from 'react-native';
import { Lbry, formatCredits } from 'lbry-redux';
import Address from 'component/address';
import Button from 'component/button';
import Colors from 'styles/colors';
import Icon from 'react-native-vector-icons/FontAwesome5';
import walletStyle from 'styles/wallet';
type Props = {
claimsBalance: number,
supportsBalance: number,
tipsBalance: number,
};
class WalletBalanceExtra extends React.PureComponent<Props> {
render() {
const { claimsBalance, supportsBalance, tipsBalance } = this.props;
return (
<View style={walletStyle.balanceExtraCard}>
<View style={walletStyle.walletExtraRow}>
<View style={walletStyle.walletExtraCol}>
<Icon style={walletStyle.walletExtraIcon} color={Colors.LbryGreen} name={'gift'} size={16} />
<Text style={walletStyle.walletExtraCaption}>{__('You also have')}</Text>
<View style={walletStyle.balanceRow}>
<Text style={walletStyle.walletExtraBalance}>{formatCredits(parseFloat(tipsBalance), 2)}</Text>
<Text style={walletStyle.walletExtraCurrency}>LBC</Text>
</View>
<Text style={walletStyle.text}>{__('in tips')}</Text>
</View>
<View style={walletStyle.walletExtraCol}>
<Icon style={walletStyle.walletExtraIcon} color={Colors.LbryGreen} name={'lock'} size={16} />
<Text style={walletStyle.walletExtraCaption}>{__('You staked')}</Text>
<View style={walletStyle.balanceRow}>
<Text style={walletStyle.walletExtraBalance}>{formatCredits(parseFloat(claimsBalance), 2)}</Text>
<Text style={walletStyle.walletExtraCurrency}>LBC</Text>
</View>
<Text style={walletStyle.text}>{__('in your publishes')}</Text>
<View style={[walletStyle.balanceRow, walletStyle.walletExtraTopMargin]}>
<Text style={walletStyle.walletExtraBalance}>{formatCredits(parseFloat(supportsBalance), 2)}</Text>
<Text style={walletStyle.walletExtraCurrency}>LBC</Text>
</View>
<Text style={walletStyle.text}>{__('in your supports')}</Text>
</View>
</View>
</View>
);
}
}
export default WalletBalanceExtra;
......@@ -3,6 +3,7 @@ import { NativeModules, ScrollView, Text, View } from 'react-native';
import TransactionListRecent from 'component/transactionListRecent';
import WalletAddress from 'component/walletAddress';
import WalletBalance from 'component/walletBalance';
import WalletBalanceExtra from 'component/walletBalanceExtra';
import WalletSend from 'component/walletSend';
import WalletRewardsDriver from 'component/walletRewardsDriver';
import WalletSignIn from 'component/walletSignIn';
......@@ -90,6 +91,7 @@ class WalletPage extends React.PureComponent {
>
{!rewardsNotInterested && (!balance || balance === 0) && <WalletRewardsDriver navigation={navigation} />}
<WalletBalance />
<WalletBalanceExtra />
<WalletAddress />
<WalletSend />
<TransactionListRecent navigation={navigation} />
......
......@@ -103,6 +103,12 @@ const walletStyle = StyleSheet.create({
marginLeft: 16,
marginRight: 16,
},
balanceExtraCard: {
backgroundColor: Colors.White,
marginLeft: 16,
marginRight: 16,
padding: 16,
},
balanceBackground: {
position: 'absolute',
alignSelf: 'stretch',
......@@ -191,6 +197,7 @@ const walletStyle = StyleSheet.create({
paddingRight: 18,
},
currency: {
fontFamily: 'Inter-Regular',
alignSelf: 'flex-start',
fontSize: 12,
marginTop: 16,
......@@ -366,6 +373,39 @@ const walletStyle = StyleSheet.create({
fontFamily: 'Inter-Regular',
fontSize: 28,
},
walletExtraRow: {
flexDirection: 'row',
},
walletExtraCol: {
flex: 0.5,
paddingLeft: 24,
},
walletExtraBalance: {
fontFamily: 'Inter-SemiBold',
fontSize: 28,
},
balanceRow: {
flexDirection: 'row',
alignItems: 'center',
},
walletExtraCaption: {
fontFamily: 'Inter-Medium',
fontSize: 14,
},
walletExtraCurrency: {
fontFamily: 'Inter-Regular',
fontSize: 12,
marginTop: 8,
marginLeft: 4,
},
walletExtraTopMargin: {
marginTop: 16,
},
walletExtraIcon: {
position: 'absolute',
left: 0,
top: 0,
},
});
export default walletStyle;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment