diff --git a/src/component/walletBalanceExtra/index.js b/src/component/walletBalanceExtra/index.js new file mode 100644 index 0000000..e893037 --- /dev/null +++ b/src/component/walletBalanceExtra/index.js @@ -0,0 +1,14 @@ +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); diff --git a/src/component/walletBalanceExtra/view.js b/src/component/walletBalanceExtra/view.js new file mode 100644 index 0000000..59b26bd --- /dev/null +++ b/src/component/walletBalanceExtra/view.js @@ -0,0 +1,54 @@ +// @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 { + render() { + const { claimsBalance, supportsBalance, tipsBalance } = this.props; + + return ( + + + + + {__('You also have')} + + {formatCredits(parseFloat(tipsBalance), 2)} + LBC + + {__('in tips')} + + + + + {__('You staked')} + + {formatCredits(parseFloat(claimsBalance), 2)} + LBC + + {__('in your publishes')} + + {formatCredits(parseFloat(supportsBalance), 2)} + LBC + + {__('in your supports')} + + + + ); + } +} + +export default WalletBalanceExtra; diff --git a/src/page/wallet/view.js b/src/page/wallet/view.js index 6ce9ba7..06dd592 100644 --- a/src/page/wallet/view.js +++ b/src/page/wallet/view.js @@ -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) && } + diff --git a/src/styles/wallet.js b/src/styles/wallet.js index 7d26807..12c074d 100644 --- a/src/styles/wallet.js +++ b/src/styles/wallet.js @@ -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;