lbry-desktop/ui/component/walletBalance/view.jsx

189 lines
6.7 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2019-09-30 23:48:30 +02:00
import * as ICONS from 'constants/icons';
2019-11-22 22:13:00 +01:00
import * as MODALS from 'constants/modal_types';
2020-02-21 18:23:04 +01:00
import * as PAGES from 'constants/pages';
import React from 'react';
2018-03-26 23:32:43 +02:00
import CreditAmount from 'component/common/credit-amount';
2019-09-30 23:48:30 +02:00
import Button from 'component/button';
2020-02-21 18:23:04 +01:00
import HelpLink from 'component/common/help-link';
2020-06-01 19:03:19 +02:00
import Card from 'component/common/card';
2020-09-02 22:08:37 +02:00
import LbcSymbol from 'component/common/lbc-symbol';
import I18nMessage from 'component/i18nMessage';
import { formatNumberWithCommas } from 'util/number';
2017-08-17 22:19:29 +02:00
2018-03-26 23:32:43 +02:00
type Props = {
balance: number,
totalBalance: number,
claimsBalance: number,
supportsBalance: number,
tipsBalance: number,
2021-03-10 07:06:59 +01:00
doOpenModal: (string) => void,
2020-02-21 18:23:04 +01:00
hasSynced: boolean,
doFetchUtxoCounts: () => void,
doUtxoConsolidate: () => void,
fetchingUtxoCounts: boolean,
consolidatingUtxos: boolean,
consolidateIsPending: boolean,
massClaimingTips: boolean,
massClaimIsPending: boolean,
utxoCounts: { [string]: number },
2018-03-26 23:32:43 +02:00
};
export const WALLET_CONSOLIDATE_UTXOS = 400;
const LARGE_WALLET_BALANCE = 100;
2018-03-26 23:32:43 +02:00
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 || {};
2019-09-30 23:48:30 +02:00
const totalBalance = balance + tipsBalance + supportsBalance + claimsBalance;
2021-01-20 00:00:52 +01:00
const totalLocked = tipsBalance + claimsBalance + supportsBalance;
const operationPending = massClaimIsPending || massClaimingTips || consolidateIsPending || consolidatingUtxos;
React.useEffect(() => {
if (balance > LARGE_WALLET_BALANCE && detailsExpanded) {
doFetchUtxoCounts();
}
}, [doFetchUtxoCounts, balance, detailsExpanded]);
2017-08-17 22:19:29 +02:00
return (
<Card
title={<LbcSymbol postfix={formatNumberWithCommas(totalBalance)} isTitle />}
subtitle={
2021-01-20 00:00:52 +01:00
totalLocked > 0 ? (
<I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
Your total balance. All of this is yours, but some %lbc% is in use on channels and content right now.
</I18nMessage>
) : (
<span>{__('Your total balance.')}</span>
)
}
actions={
<>
<h2 className="section__title--small">
<I18nMessage tokens={{ lbc_amount: <CreditAmount amount={balance} precision={4} /> }}>
2021-01-20 00:00:52 +01:00
%lbc_amount% immediately spendable
</I18nMessage>
</h2>
<h2 className="section__title--small">
<I18nMessage
tokens={{
lbc_amount: <CreditAmount amount={totalLocked} precision={4} />,
}}
>
2021-01-20 00:02:26 +01:00
%lbc_amount% boosting content
</I18nMessage>
<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>
2019-09-30 23:48:30 +02:00
<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>
2020-02-21 18:23:04 +01:00
</div>
)}
2020-06-01 19:03:19 +02:00
{/* @if TARGET='app' */}
2021-01-26 17:19:18 +01:00
{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={__('Buy')} icon={ICONS.BUY} navigate={`/$/${PAGES.BUY}`} />
2021-03-10 07:06:59 +01:00
<Button button="secondary" label={__('Receive')} icon={ICONS.RECEIVE} navigate={`/$/${PAGES.RECEIVE}`} />
2021-03-10 07:36:02 +01:00
<Button button="secondary" label={__('Send')} icon={ICONS.SEND} navigate={`/$/${PAGES.SEND}`} />
2021-03-25 12:24:49 +01:00
<Button button="secondary" label={__('Swap')} icon={ICONS.COIN_SWAP} navigate={`/$/${PAGES.SWAP}`} />
</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>
)}
</>
}
/>
2017-08-17 22:19:29 +02:00
);
};
export default WalletBalance;