mostly done with doing the iteration

ui/component/walletBalance/view.jsx

@@ -10,6 +10,8 @@ import Card from 'component/common/card';
 import LbcSymbol from 'component/common/lbc-symbol';
 import I18nMessage from 'component/i18nMessage';
 import { formatNumberWithCommas } from 'util/number';
+import Icon from 'component/common/icon';
+
 
 type Props = {
   balance: number,
@@ -63,6 +65,7 @@ const WalletBalance = (props: Props) => {
   }, [doFetchUtxoCounts, balance, detailsExpanded]);
 
   return (
+    <div className={'columns'}>
     <Card
       title={<LbcSymbol postfix={formatNumberWithCommas(totalBalance)} isTitle />}
       subtitle={
@@ -181,6 +184,32 @@ 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>
+          </>
+        }
+      />
+    </div>
   );
 };
 

ui/component/walletFiatBalance/view.jsx

@@ -32,57 +32,9 @@ const WalletBalance = (props: Props) => {
 
           <h2 className="section__title--small">
             ${(accountDetails && (accountDetails.total_paid_out / 100)) || 0}  Withdrawn
-            {/* <Button */}
-            {/*  button="link" */}
-            {/*  label={detailsExpanded ? __('View less') : __('View more')} */}
-            {/*  iconRight={detailsExpanded ? ICONS.UP : ICONS.DOWN} */}
-            {/*  onClick={() => setDetailsExpanded(!detailsExpanded)} */}
-            {/* /> */}
           </h2>
 
-          {/* view more section */}
-          {/* commenting out because not implemented, but could be used in the future */}
-          {/* {detailsExpanded && ( */}
-          {/*  <div className="section__subtitle"> */}
-          {/*    <dl> */}
-          {/*      <dt> */}
-          {/*        <span className="dt__text">{__('Earned from uploads')}</span> */}
-          {/*        /!* <span className="help--dt">({__('Earned from channel page')})</span> *!/ */}
-          {/*      </dt> */}
-          {/*      <dd> */}
-          {/*        <span className="dd__text"> */}
-          {/*          {Boolean(1) && ( */}
-          {/*            <Button */}
-          {/*              button="link" */}
-          {/*              className="dd__button" */}
-          {/*              icon={ICONS.UNLOCK} */}
-          {/*            /> */}
-          {/*          )} */}
-          {/*          <CreditAmount amount={1} precision={4} /> */}
-          {/*        </span> */}
-          {/*      </dd> */}
-
-          {/*      <dt> */}
-          {/*        <span className="dt__text">{__('Earned from channel page')}</span> */}
-          {/*        /!* <span className="help--dt">({__('Delete or edit past content to spend')})</span> *!/ */}
-          {/*      </dt> */}
-          {/*      <dd> */}
-          {/*        <CreditAmount amount={1} precision={4} /> */}
-          {/*      </dd> */}
-
-          {/*      /!* <dt> *!/ */}
-          {/*      /!*  <span className="dt__text">{__('...supporting content')}</span> *!/ */}
-          {/*      /!*  <span className="help--dt">({__('Delete supports to spend')})</span> *!/ */}
-          {/*      /!* </dt> *!/ */}
-          {/*      /!* <dd> *!/ */}
-          {/*      /!*  <CreditAmount amount={1} precision={4} /> *!/ */}
-          {/*      /!* </dd> *!/ */}
-          {/*    </dl> */}
-          {/*  </div> */}
-          {/* )} */}
-
           <div className="section__actions">
-            {/* <Button button="primary" label={__('Receive Payout')} icon={ICONS.SEND}  /> */}
             <Button button="secondary" label={__('Account Configuration')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} />
           </div>
         </>

ui/page/wallet/view.jsx

@@ -159,6 +159,7 @@ const WalletPage = (props: Props) => {
     <>
       {/* @if TARGET='web' */}
       <Page>
+        <WalletBalance />
         <Tabs onChange={onTabChange} index={tabIndex}>
           <TabList className="tabs__list--collection-edit-page">
             <Tab>{__('LBRY Credits')}</Tab>
@@ -182,7 +183,6 @@ const WalletPage = (props: Props) => {
                         <YrblWalletEmpty includeWalletLink />
                       ) : (
                         <div className="card-stack">
-                          <WalletBalance />
                           <TxoList search={search} />
                         </div>
                       )}
@@ -193,13 +193,11 @@ const WalletPage = (props: Props) => {
             </TabPanel>
             <TabPanel>
               <div className="section card-stack">
-                <WalletFiatBalance accountDetails={accountStatusResponse} />
                 <WalletFiatAccountHistory transactions={accountTransactionResponse} />
               </div>
             </TabPanel>
             <TabPanel>
               <div className="section card-stack">
-                <WalletFiatPaymentBalance transactions={customerTransactions} accountDetails={accountStatusResponse} />
                 <WalletFiatPaymentHistory transactions={customerTransactions} />
               </div>
             </TabPanel>
@@ -220,7 +218,6 @@ const WalletPage = (props: Props) => {
               <YrblWalletEmpty includeWalletLink />
             ) : (
               <div className="card-stack">
-                <WalletBalance />
                 <TxoList search={search} />
               </div>
             )}