add wallet balance extra details card

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

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

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) && <WalletRewardsDriver navigation={navigation} />}
           <WalletBalance />
+          <WalletBalanceExtra />
           <WalletAddress />
           <WalletSend />
           <TransactionListRecent navigation={navigation} />

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;