using es6 to populate data

ui/component/walletFiatBalance/view.jsx

@@ -28,6 +28,7 @@ type Props = {
   massClaimingTips: boolean,
   massClaimIsPending: boolean,
   utxoCounts: { [string]: number },
+  accountDetails: any,
 };
 
 export const WALLET_CONSOLIDATE_UTXOS = 400;
@@ -48,7 +49,12 @@ const WalletBalance = (props: Props) => {
     massClaimingTips,
     massClaimIsPending,
     utxoCounts,
+    accountDetails,
   } = props;
+
+  console.log('account details');
+  console.log(accountDetails);
+
   const [detailsExpanded, setDetailsExpanded] = React.useState(false);
 
   const { other: otherCount = 0 } = utxoCounts || {};
@@ -78,7 +84,7 @@ const WalletBalance = (props: Props) => {
       actions={
         <>
           <h2 className="section__title--small">
-            $413 Received Total
+            ${accountDetails && accountDetails.total_tipped / 100 } Received Total
           </h2>
 
           <h2 className="section__title--small">

ui/component/walletFiatTransactions/view.jsx

@@ -11,6 +11,7 @@ import Icon from 'component/common/icon';
 import LbcSymbol from 'component/common/lbc-symbol';
 import I18nMessage from 'component/i18nMessage';
 import { formatNumberWithCommas } from 'util/number';
+import { Lbryio } from 'lbryinc';
 
 type Props = {
   balance: number,
@@ -28,6 +29,7 @@ type Props = {
   massClaimingTips: boolean,
   massClaimIsPending: boolean,
   utxoCounts: { [string]: number },
+  accountDetails: any,
 };
 
 export const WALLET_CONSOLIDATE_UTXOS = 400;
@@ -50,6 +52,8 @@ const WalletBalance = (props: Props) => {
     utxoCounts,
   } = props;
   const [detailsExpanded, setDetailsExpanded] = React.useState(false);
+  const [accountStatusResponse, setAccountStatusResponse] = React.useState();
+
 
   const { other: otherCount = 0 } = utxoCounts || {};
 
@@ -63,6 +67,29 @@ const WalletBalance = (props: Props) => {
     }
   }, [doFetchUtxoCounts, balance, detailsExpanded]);
 
+  var environment = 'test';
+
+  function getAccountStatus(){
+    return Lbryio.call(
+      'account',
+      'status',
+      {
+        environment
+      },
+      'post'
+    );
+  }
+
+  React.useEffect(() => {
+    (async function(){
+      const response = await getAccountStatus();
+
+      setAccountStatusResponse(response);
+
+      console.log(response);
+    })();
+  }, []);
+
   return (
     <Card
       title={<><Icon size="18" icon={ICONS.FINANCE} />313 USD</>}
@@ -80,7 +107,8 @@ const WalletBalance = (props: Props) => {
       }
       actions={
         <>
-          <h4>Hello!</h4>
+          {accountStatusResponse && accountStatusResponse.charges_enabled && <h2>Charges Enabled: True</h2>}
+          {accountStatusResponse && <h2>Total Received Tips: ${accountStatusResponse.total_tipped / 100}</h2>}
           <p>Hello</p>
         </>
       }

ui/page/wallet/view.jsx

@@ -8,6 +8,7 @@ import TxoList from 'component/txoList';
 import Page from 'component/page';
 import Spinner from 'component/spinner';
 import YrblWalletEmpty from 'component/yrblWalletEmpty';
+import { Lbryio } from 'lbryinc';
 
 type Props = {
   history: { action: string, push: (string) => void, replace: (string) => void },
@@ -18,8 +19,33 @@ type Props = {
 const WalletPage = (props: Props) => {
   console.log(props);
 
+  var environment = 'test';
+
   const tab = new URLSearchParams(props.location.search).get('tab');
 
+  const [accountStatusResponse, setAccountStatusResponse] = React.useState();
+
+  function getAccountStatus(){
+    return Lbryio.call(
+      'account',
+      'status',
+      {
+        environment
+      },
+      'post'
+    );
+  }
+
+  React.useEffect(() => {
+    (async function(){
+      const response = await getAccountStatus();
+
+      setAccountStatusResponse(response);
+
+      console.log(response);
+    })();
+  }, []);
+
   React.useEffect(() => {
     // if (tab === 'currency') {
     if (1 === 1) {
@@ -83,7 +109,7 @@ const WalletPage = (props: Props) => {
       {(
         <>
           <div className="fiat-transactions" style={{display: 'none'}}>
-            <WalletFiatBalance />
+            <WalletFiatBalance accountDetails={accountStatusResponse} />
             <div style={{paddingTop: '20px'}}></div>
             <WalletFiatTransactions />
           </div>