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

87 lines
2.8 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';
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';
import Icon from 'component/common/icon';
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,
2019-11-22 22:13:00 +01:00
doOpenModal: string => void,
2018-03-26 23:32:43 +02:00
};
const WalletBalance = (props: Props) => {
2019-11-22 22:13:00 +01:00
const { balance, claimsBalance, supportsBalance, tipsBalance, doOpenModal } = props;
2019-09-30 23:48:30 +02:00
2017-08-17 22:19:29 +02:00
return (
2019-09-30 23:48:30 +02:00
<React.Fragment>
<section className="section__flex-wrap">
<div>
<h2 className="section__title">{__('Available Balance')}</h2>
<span className="section__title--large">
{(balance || balance === 0) && <CreditAmount badge={false} amount={balance} precision={8} />}
</span>
<div className="section__actions">
2019-11-22 22:13:00 +01:00
<Button button="primary" label={__('Your Address')} onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)} />
<Button
button="secondary"
icon={ICONS.SEND}
label={__('Send Credits')}
onClick={() => doOpenModal(MODALS.WALLET_SEND)}
/>
2019-09-30 23:48:30 +02:00
</div>
</div>
2019-09-30 23:48:30 +02:00
<div>
<div className="section">
<div className="section__flex">
<Icon sectionIcon icon={ICONS.TIP} />
<h2 className="section__title--small">
<strong>
<CreditAmount badge={false} amount={tipsBalance} precision={8} />
</strong>{' '}
2019-10-16 03:14:21 +02:00
{__('earned and bound in tips')}
2019-09-30 23:48:30 +02:00
</h2>
</div>
</div>
<div className="section">
<div className="section__flex">
<Icon sectionIcon icon={ICONS.LOCK} />
<div>
<h2 className="section__title--small">
2019-10-16 03:14:21 +02:00
<strong>
<CreditAmount badge={false} amount={claimsBalance + supportsBalance} precision={8} />
</strong>{' '}
{__('currently staked')}
2019-09-30 23:48:30 +02:00
</h2>
<div className="section__subtitle">
<dl>
2019-10-03 23:40:54 +02:00
<dt>{__('... in your publishes')}</dt>
2019-09-30 23:48:30 +02:00
<dd>
<CreditAmount badge={false} amount={claimsBalance} precision={8} />
</dd>
2019-10-03 23:40:54 +02:00
<dt>{__('... in your supports')}</dt>
2019-09-30 23:48:30 +02:00
<dd>
<CreditAmount badge={false} amount={supportsBalance} precision={8} />
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
2019-09-30 23:48:30 +02:00
</section>
</React.Fragment>
2017-08-17 22:19:29 +02:00
);
};
export default WalletBalance;