diff --git a/ui/component/walletFiatBalance/index.js b/ui/component/walletFiatBalance/index.js
new file mode 100644
index 000000000..83b0a30cf
--- /dev/null
+++ b/ui/component/walletFiatBalance/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);
diff --git a/ui/component/walletFiatBalance/view.jsx b/ui/component/walletFiatBalance/view.jsx
new file mode 100644
index 000000000..074c76fe3
--- /dev/null
+++ b/ui/component/walletFiatBalance/view.jsx
@@ -0,0 +1,180 @@
+// @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>
+ )
+ }
+ actions={
+ <>
+ <h2 className="section__title--small">
+ <Icon size="12" icon={ICONS.FINANCE} />
+ 413 Received Total
+ </h2>
+
+ <h2 className="section__title--small">
+ $100 Already Withdrawn!!!!
+ <Button
+ button="link"
+ label={detailsExpanded ? __('View less') : __('View more')}
+ iconRight={detailsExpanded ? ICONS.UP : ICONS.DOWN}
+ onClick={() => setDetailsExpanded(!detailsExpanded)}
+ />
+ </h2>
+ {detailsExpanded && (
+ <div className="section__subtitle">
+ <dl>
+ <dt>
+ <span className="dt__text">{__('...earned from others')}</span>
+ <span className="help--dt">({__('Unlock to spend')})</span>
+ </dt>
+ <dd>
+ <span className="dd__text">
+ {Boolean(tipsBalance) && (
+ <Button
+ button="link"
+ className="dd__button"
+ disabled={operationPending}
+ icon={ICONS.UNLOCK}
+ onClick={() => doOpenModal(MODALS.MASS_TIP_UNLOCK)}
+ />
+ )}
+ <CreditAmount amount={tipsBalance} precision={4} />
+ </span>
+ </dd>
+
+ <dt>
+ <span className="dt__text">{__('...on initial publishes')}</span>
+ <span className="help--dt">({__('Delete or edit past content to spend')})</span>
+ </dt>
+ <dd>
+ <CreditAmount amount={claimsBalance} precision={4} />
+ </dd>
+
+ <dt>
+ <span className="dt__text">{__('...supporting content')}</span>
+ <span className="help--dt">({__('Delete supports to spend')})</span>
+ </dt>
+ <dd>
+ <CreditAmount amount={supportsBalance} precision={4} />
+ </dd>
+ </dl>
+ </div>
+ )}
+
+ {/* @if TARGET='app' */}
+ {hasSynced ? (
+ <p className="section help">
+ {__('A backup of your wallet is synced with lbry.tv.')}
+ <HelpLink href="https://lbry.com/faq/account-sync" />
+ </p>
+ ) : (
+ <p className="help--warning">
+ {__('Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.')}
+ <HelpLink navigate={`/$/${PAGES.BACKUP}`} />
+ </p>
+ )}
+ {/* @endif */}
+ <div className="section__actions">
+ <Button button="primary" label={__('Receive Payout')} icon={ICONS.SEND} navigate={`/$/${PAGES.SEND}`} />
+ <Button button="secondary" label={__('Account Configuration')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SEND}`} />
+ </div>
+ {(otherCount > WALLET_CONSOLIDATE_UTXOS || consolidateIsPending || consolidatingUtxos) && (
+ <p className="help">
+ <I18nMessage
+ tokens={{
+ now: (
+ <Button
+ button="link"
+ onClick={() => doUtxoConsolidate()}
+ disabled={operationPending}
+ label={
+ consolidateIsPending || consolidatingUtxos ? __('Consolidating...') : __('Consolidate Now')
+ }
+ />
+ ),
+ help: <HelpLink href="https://lbry.com/faq/transaction-types" />,
+ }}
+ >
+ Your wallet has a lot of change lying around. Consolidating will speed up your transactions. This could
+ take some time. %now%%help%
+ </I18nMessage>
+ </p>
+ )}
+ </>
+ }
+ />
+ );
+};
+
+export default WalletBalance;
diff --git a/ui/page/wallet/view.jsx b/ui/page/wallet/view.jsx
index 7c92b2e7d..5a9071539 100644
--- a/ui/page/wallet/view.jsx
+++ b/ui/page/wallet/view.jsx
@@ -2,6 +2,7 @@
import React from 'react';
import { withRouter } from 'react-router';
import WalletBalance from 'component/walletBalance';
+import WalletFiatBalance from 'component/WalletFiatBalance';
import TxoList from 'component/txoList';
import Page from 'component/page';
import Spinner from 'component/spinner';
@@ -18,32 +19,27 @@ const WalletPage = (props: Props) => {
const tab = new URLSearchParams(props.location.search).get('tab');
- React.useEffect(()=>{
- if(tab === 'currency'){
+ React.useEffect(() => {
+ // if (tab === 'currency') {
+ if (1 === 1) {
document.getElementsByClassName('lbc-transactions')[0].style.display = 'none';
document.getElementsByClassName('fiat-transactions')[0].style.display = 'inline';
document.getElementsByClassName('lbc-tab-switcher')[0].style.textDecoration = 'none';
document.getElementsByClassName('fiat-tab-switcher')[0].style.textDecoration = 'underline';
}
- },[])
-
+ }, []);
const { location, totalBalance } = props;
const { search } = location;
const showIntro = totalBalance === 0;
const loading = totalBalance === undefined;
- const TAB_LBC_TRANSACTIONS = 'TabLBCTransactions';
- const TAB_FIAT_TRANSACTIONS = 'TabFiatTransactions';
-
- const [activeTab, setActiveTab] = React.useState(TAB_LBC_TRANSACTIONS);
-
return (
<Page>
{/* tabs to switch between fiat and lbc */}
<h2 className="lbc-tab-switcher"
- style={{display: 'inline-block', paddingBottom: '16px', marginRight: '14px', textUnderlineOffset: '4px', textDecoration: 'underline', fontSize: '18px'}}
+ style={{display: 'inline-block', paddingBottom: '16px', marginRight: '14px', textUnderlineOffset: '4px', textDecoration: 'underline', fontSize: '18px', marginLeft: '3px'}}
onClick={() => {
document.getElementsByClassName('lbc-transactions')[0].style.display = 'inline';
document.getElementsByClassName('fiat-transactions')[0].style.display = 'none';
@@ -60,9 +56,8 @@ const WalletPage = (props: Props) => {
document.getElementsByClassName('lbc-tab-switcher')[0].style.textDecoration = 'none';
document.getElementsByClassName('fiat-tab-switcher')[0].style.textDecoration = 'underline';
-
}}
- >Fiat Transactions</h2>
+ >USD Transactions</h2>
<div className="lbc-transactions">
{/* if the transactions are loading */}
{ loading && (
@@ -87,7 +82,7 @@ const WalletPage = (props: Props) => {
{(
<>
<div className="fiat-transactions" style={{display: 'none'}}>
- <h2>Here's your fiat transactions</h2>
+ <WalletFiatBalance />
</div>
</>
)}