make fiat balance programatic again

ui/component/walletBalance/view.jsx

@@ -11,6 +11,7 @@ import LbcSymbol from 'component/common/lbc-symbol';
 import I18nMessage from 'component/i18nMessage';
 import { formatNumberWithCommas } from 'util/number';
 import Icon from 'component/common/icon';
+import WalletFiatBalance from 'component/walletFiatBalance';
 
 type Props = {
   balance: number,
@@ -184,30 +185,8 @@ const WalletBalance = (props: Props) => {
       }
     />
 
-      <Card
-        title={<><Icon size={18} icon={ICONS.FINANCE} />32 USD</>}
-        subtitle={32 &&
-        <I18nMessage>
-          This is your pending balance that will be automatically sent to your bank account
-        </I18nMessage>
-        }
-        actions={
-          <>
-            <h2 className="section__title--small">
-              $32 Total Received Tips
-            </h2>
-
-            <h2 className="section__title--small">
-              $0 Withdrawn
-            </h2>
-
-            <div className="section__actions">
-              <Button button="secondary" label={__('Manage Accounts')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} />
-              <Button button="secondary" label={__('Manage Cards')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} />
-            </div>
-          </>
-        }
-      />
+      {/* fiat balance card */}
+      <WalletFiatBalance />
     </div>
   );
 };

ui/component/walletFiatBalance/view.jsx

@@ -6,32 +6,66 @@ import Button from 'component/button';
 import Card from 'component/common/card';
 import Icon from 'component/common/icon';
 import I18nMessage from 'component/i18nMessage';
+import { Lbryio } from 'lbryinc';
+import { STRIPE_PUBLIC_KEY } from 'config';
 
-type Props = {
-  accountDetails: any,
-};
+let stripeEnvironment = 'test';
+// if the key contains pk_live it's a live key
+// update the environment for the calls to the backend to indicate which environment to hit
+if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
+  stripeEnvironment = 'live';
+}
 
 const WalletBalance = (props: Props) => {
-  const {
-    accountDetails,
-  } = props;
+  const [accountStatusResponse, setAccountStatusResponse] = React.useState();
+
+  function getAccountStatus() {
+    return Lbryio.call(
+      'account',
+      'status',
+      {
+        environment: stripeEnvironment,
+      },
+      'post'
+    );
+  }
+
+  // calculate account transactions section
+  React.useEffect(() => {
+    (async function () {
+      try {
+        if (!stripeEnvironment) {
+          return;
+        }
+        const response = await getAccountStatus();
+
+        setAccountStatusResponse(response);
+
+      } catch (err) {
+        console.log(err);
+      }
+    })();
+  }, [stripeEnvironment]);
 
   return (
     <>{<Card
-      title={<><Icon size={18} icon={ICONS.FINANCE} />{(accountDetails && ((accountDetails.total_received_unpaid - accountDetails.total_paid_out) / 100)) || 0} USD</>}
-      subtitle={accountDetails && accountDetails.total_received_unpaid > 0 &&
+      title={<><Icon size={18} icon={ICONS.FINANCE} />{(accountStatusResponse && ((accountStatusResponse.total_received_unpaid - accountStatusResponse.total_paid_out) / 100)) || 0} USD</>}
+      subtitle={accountStatusResponse && accountStatusResponse.total_received_unpaid > 0 ? (
           <I18nMessage>
             This is your pending balance that will be automatically sent to your bank account
-          </I18nMessage>
+          </I18nMessage>) : (
+        <I18nMessage>
+          When you begin to receive tips your balance will be updated here
+        </I18nMessage>)
       }
       actions={
         <>
           <h2 className="section__title--small">
-            ${(accountDetails && (accountDetails.total_received_unpaid / 100)) || 0} Total Received Tips
+            ${(accountStatusResponse && (accountStatusResponse.total_received_unpaid / 100)) || 0} Total Received Tips
           </h2>
 
           <h2 className="section__title--small">
-            ${(accountDetails && (accountDetails.total_paid_out / 100)) || 0}  Withdrawn
+            ${(accountStatusResponse && (accountStatusResponse.total_paid_out / 100)) || 0}  Withdrawn
           </h2>
 
           <div className="section__actions">

ui/page/wallet/view.jsx

@@ -74,16 +74,7 @@ const WalletPage = (props: Props) => {
     push(url);
   }
 
-  function getAccountStatus() {
-    return Lbryio.call(
-      'account',
-      'status',
-      {
-        environment: stripeEnvironment,
-      },
-      'post'
-    );
-  }
+  // @endif
 
   const { totalBalance } = props;
   const showIntro = totalBalance === 0;