add fiat transactions

ui/component/walletFiatTransactions/index.js

@@ -0,0 +1,40 @@
+import { connect } from 'react-redux';
+import {
+  selectBalance,
+  selectClaimsBalance,
+  selectSupportsBalance,
+  selectTipsBalance,
+  selectIsFetchingUtxoCounts,
+  selectUtxoCounts,
+  doFetchUtxoCounts,
+  doUtxoConsolidate,
+  selectIsConsolidatingUtxos,
+  selectIsMassClaimingTips,
+  selectPendingConsolidateTxid,
+  selectPendingMassClaimTxid,
+} from 'lbry-redux';
+import { doOpenModal } from 'redux/actions/app';
+import { selectSyncHash } from 'redux/selectors/sync';
+import { selectClaimedRewards } from 'redux/selectors/rewards';
+import WalletBalance from './view';
+
+const select = state => ({
+  balance: selectBalance(state),
+  claimsBalance: selectClaimsBalance(state) || 0,
+  supportsBalance: selectSupportsBalance(state) || 0,
+  tipsBalance: selectTipsBalance(state) || 0,
+  rewards: selectClaimedRewards(state),
+  hasSynced: Boolean(selectSyncHash(state)),
+  fetchingUtxoCounts: selectIsFetchingUtxoCounts(state),
+  consolidatingUtxos: selectIsConsolidatingUtxos(state),
+  massClaimingTips: selectIsMassClaimingTips(state),
+  utxoCounts: selectUtxoCounts(state),
+  consolidateIsPending: selectPendingConsolidateTxid(state),
+  massClaimIsPending: selectPendingMassClaimTxid(state),
+});
+
+export default connect(select, {
+  doOpenModal,
+  doFetchUtxoCounts,
+  doUtxoConsolidate,
+})(WalletBalance);

ui/component/walletFiatTransactions/view.jsx

@@ -0,0 +1,91 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import * as MODALS from 'constants/modal_types';
+import * as PAGES from 'constants/pages';
+import React from 'react';
+import CreditAmount from 'component/common/credit-amount';
+import Button from 'component/button';
+import HelpLink from 'component/common/help-link';
+import Card from 'component/common/card';
+import Icon from 'component/common/icon';
+import LbcSymbol from 'component/common/lbc-symbol';
+import I18nMessage from 'component/i18nMessage';
+import { formatNumberWithCommas } from 'util/number';
+
+type Props = {
+  balance: number,
+  totalBalance: number,
+  claimsBalance: number,
+  supportsBalance: number,
+  tipsBalance: number,
+  doOpenModal: (string) => void,
+  hasSynced: boolean,
+  doFetchUtxoCounts: () => void,
+  doUtxoConsolidate: () => void,
+  fetchingUtxoCounts: boolean,
+  consolidatingUtxos: boolean,
+  consolidateIsPending: boolean,
+  massClaimingTips: boolean,
+  massClaimIsPending: boolean,
+  utxoCounts: { [string]: number },
+};
+
+export const WALLET_CONSOLIDATE_UTXOS = 400;
+const LARGE_WALLET_BALANCE = 100;
+
+const WalletBalance = (props: Props) => {
+  const {
+    balance,
+    claimsBalance,
+    supportsBalance,
+    tipsBalance,
+    doOpenModal,
+    hasSynced,
+    doUtxoConsolidate,
+    doFetchUtxoCounts,
+    consolidatingUtxos,
+    consolidateIsPending,
+    massClaimingTips,
+    massClaimIsPending,
+    utxoCounts,
+  } = props;
+  const [detailsExpanded, setDetailsExpanded] = React.useState(false);
+
+  const { other: otherCount = 0 } = utxoCounts || {};
+
+  const totalBalance = balance + tipsBalance + supportsBalance + claimsBalance;
+  const totalLocked = tipsBalance + claimsBalance + supportsBalance;
+  const operationPending = massClaimIsPending || massClaimingTips || consolidateIsPending || consolidatingUtxos;
+
+  React.useEffect(() => {
+    if (balance > LARGE_WALLET_BALANCE && detailsExpanded) {
+      doFetchUtxoCounts();
+    }
+  }, [doFetchUtxoCounts, balance, detailsExpanded]);
+
+  return (
+    <Card
+      title={<><Icon size="18" icon={ICONS.FINANCE} />313 USD</>}
+      subtitle={
+        totalLocked > 0 ? (
+          <I18nMessage>
+            This is your remaining balance that can still be withdrawn to your bank account
+          </I18nMessage>
+        ) : (
+          <span>{__('Your total balance.')}</span>
+        )
+      }
+      body={
+        <h1>Hello!</h1>
+      }
+      actions={
+        <>
+          <h4>Hello!</h4>
+          <p>Hello</p>
+        </>
+      }
+    />
+  );
+};
+
+export default WalletBalance;

ui/page/wallet/view.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { withRouter } from 'react-router';
 import WalletBalance from 'component/walletBalance';
 import WalletFiatBalance from 'component/walletFiatBalance';
+import WalletFiatTransactions from 'component/walletFiatTransactions';
 import TxoList from 'component/txoList';
 import Page from 'component/page';
 import Spinner from 'component/spinner';
@@ -83,6 +84,8 @@ const WalletPage = (props: Props) => {
         <>
           <div className="fiat-transactions" style={{display: 'none'}}>
             <WalletFiatBalance />
+            <div style={{paddingTop: '20px'}}></div>
+            <WalletFiatTransactions />
           </div>
         </>
       )}