Merge pull request #1048 from lightninglabs/on-chain-balance

On chain balance

Author: tanx

src/computed/wallet.js

@@ -16,6 +16,9 @@ const ComputedWallet = store => {
     get walletAddressUri() {
       return store.walletAddress ? `bitcoin:${store.walletAddress}` : '';
     },
+    get balanceLabel() {
+      return toAmountLabel(store.balanceSatoshis, store.settings);
+    },
     get totalBalanceSatoshis() {
       const {
         balanceSatoshis,

src/view/channel.js

@@ -12,6 +12,7 @@ import { ResizeableSpinner } from '../component/spinner';
 import { H1Text, CopyText } from '../component/text';
 import Text from '../component/text';
 import PlusIcon from '../../src/asset/icon/plus';
+import BitcoinIcon from '../../src/asset/icon/bitcoin';
 import LightningBoltGradientIcon from '../../src/asset/icon/lightning-bolt-gradient';
 import { color, font } from '../component/style';
 
@@ -96,6 +97,7 @@ const ChannelList = ({ store, channel }) => {
     channelBalanceInactiveLabel,
     channelBalancePendingLabel,
     channelBalanceClosingLabel,
+    balanceLabel,
     unitLabel,
   } = store;
   return (
@@ -105,6 +107,7 @@ const ChannelList = ({ store, channel }) => {
         channelBalanceInactiveLabel={channelBalanceInactiveLabel}
         channelBalancePendingLabel={channelBalancePendingLabel}
         channelBalanceClosingLabel={channelBalanceClosingLabel}
+        balanceLabel={balanceLabel}
         unitLabel={unitLabel}
       />
       <ListContent>
@@ -164,6 +167,7 @@ const ChannelSummary = ({
   channelBalanceInactiveLabel,
   channelBalancePendingLabel,
   channelBalanceClosingLabel,
+  balanceLabel,
   unitLabel,
 }) => (
   <View style={summaryStyles.wrapper}>
@@ -195,6 +199,15 @@ const ChannelSummary = ({
         {channelBalanceClosingLabel} {unitLabel}
       </Text>
     </View>
+    <View style={summaryStyles.box}>
+      <View style={summaryStyles.alert}>
+        <BitcoinIcon height={170 * 0.06} width={135 * 0.06} />
+      </View>
+      <Text style={summaryStyles.txt}>On-chain</Text>
+      <Text style={[summaryStyles.txt, summaryStyles.total]}>
+        {balanceLabel} {unitLabel}
+      </Text>
+    </View>
   </View>
 );
 
@@ -203,6 +216,7 @@ ChannelSummary.propTypes = {
   channelBalanceInactiveLabel: PropTypes.string.isRequired,
   channelBalancePendingLabel: PropTypes.string.isRequired,
   channelBalanceClosingLabel: PropTypes.string.isRequired,
+  balanceLabel: PropTypes.string.isRequired,
   unitLabel: PropTypes.string,
 };
 

test/unit/computed/wallet.spec.js

@@ -13,6 +13,7 @@ describe('Computed Wallet Unit Tests', () => {
       store.channelBalanceForceClosingSatoshis = 0;
       ComputedWallet(store);
       expect(store.walletAddressUri, 'to equal', '');
+      expect(store.balanceLabel, 'to match', /0[,.]00/);
       expect(store.totalBalanceSatoshis, 'to equal', 0);
       expect(store.totalBalanceLabel, 'to match', /0[,.]00/);
       expect(store.unitFiatLabel, 'to equal', '$');
@@ -40,6 +41,7 @@ describe('Computed Wallet Unit Tests', () => {
       store.channelBalanceSatoshis = 10000;
       store.channelBalanceForceClosingSatoshis = 100;
       ComputedWallet(store);
+      expect(store.balanceLabel, 'to match', /3[,.]447[,.]56/);
       expect(store.totalBalanceSatoshis, 'to equal', 100010100);
       expect(store.totalBalanceLabel, 'to match', /6[,.]895[,.]82/);
       expect(store.unitFiatLabel, 'to equal', '$');
@@ -56,6 +58,7 @@ describe('Computed Wallet Unit Tests', () => {
       store.channelBalanceForceClosingSatoshis = 100;
       store.settings.unit = 'bit';
       ComputedWallet(store);
+      expect(store.balanceLabel, 'to match', /500[,.]000[,.]01/);
       expect(store.totalBalanceSatoshis, 'to equal', 100010101);
       expect(store.totalBalanceLabel, 'to match', /1[,.]000[,.]101[,.]01/);
       expect(store.unitFiatLabel, 'to equal', 'bits');