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

130 lines
4.4 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';
import Icon from 'component/common/icon';
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';
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,
2020-02-21 18:23:04 +01:00
hasSynced: boolean,
2018-03-26 23:32:43 +02:00
};
const WalletBalance = (props: Props) => {
2020-02-21 18:23:04 +01:00
const { balance, claimsBalance, supportsBalance, tipsBalance, doOpenModal, hasSynced } = 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="columns">
2020-06-01 19:03:19 +02:00
<Card
title={
<span>
{(balance || balance === 0) && (
<CreditAmount badge={false} amount={balance} precision={8} showLBC={false} />
)}{' '}
<span className="section__title--small">LBC</span>
</span>
}
subtitle={__('Available Balance')}
actions={
<div className="section__actions">
<Button button="primary" label={__('Buy')} icon={ICONS.BUY} navigate={`/$/${PAGES.BUY}`} />
<Button
button="secondary"
label={__('Receive')}
icon={ICONS.RECEIVE}
onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)}
/>
<Button
button="secondary"
label={__('Send')}
icon={ICONS.SEND}
onClick={() => doOpenModal(MODALS.WALLET_SEND)}
/>
</div>
}
/>
2019-09-30 23:48:30 +02:00
<div>
2020-06-01 19:03:19 +02:00
<React.Fragment>
{/* @if TARGET='app' */}
{hasSynced ? (
<div className="section">
<div className="section__flex">
<Icon sectionIcon icon={ICONS.LOCK} />
<h2 className="section__title--small">
{__('A backup of your wallet is synced with lbry.tv.')}
<HelpLink href="https://lbry.com/faq/account-sync" />
</h2>
</div>
</div>
) : (
<div className="section">
<div className="section__flex">
<Icon sectionIcon icon={ICONS.UNLOCK} />
<h2 className="section__title--small">
{__(
'Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.'
)}
<HelpLink navigate={`/$/${PAGES.BACKUP}`} />
</h2>
</div>
</div>
)}
{/* @endif */}
2019-09-30 23:48:30 +02:00
2020-02-21 18:23:04 +01:00
<div className="section">
<div className="section__flex">
2020-06-01 19:03:19 +02:00
<Icon sectionIcon icon={ICONS.TIP} />
2020-02-21 18:23:04 +01:00
<h2 className="section__title--small">
2020-06-01 19:03:19 +02:00
<strong>
<CreditAmount badge={false} amount={tipsBalance} precision={8} />
</strong>{' '}
{__('earned and bound in tips')}
2020-02-21 18:23:04 +01:00
</h2>
</div>
</div>
2020-06-01 19:03:19 +02:00
2020-02-21 18:23:04 +01:00
<div className="section">
<div className="section__flex">
2020-06-01 19:03:19 +02:00
<Icon sectionIcon icon={ICONS.LOCK} />
<div>
<h2 className="section__title--small">
<strong>
<CreditAmount badge={false} amount={claimsBalance + supportsBalance} precision={8} />
</strong>{' '}
{__('currently staked')}
</h2>
<div className="section__subtitle">
<dl>
<dt>{__('... in your publishes')}</dt>
<dd>
<CreditAmount badge={false} amount={claimsBalance} precision={8} />
</dd>
2019-09-30 23:48:30 +02:00
2020-06-01 19:03:19 +02:00
<dt>{__('... in your supports')}</dt>
<dd>
<CreditAmount badge={false} amount={supportsBalance} precision={8} />
</dd>
</dl>
</div>
2019-09-30 23:48:30 +02:00
</div>
</div>
</div>
2020-06-01 19:03:19 +02:00
</React.Fragment>
</div>
2019-09-30 23:48:30 +02:00
</section>
</React.Fragment>
2017-08-17 22:19:29 +02:00
);
};
export default WalletBalance;