124 lines
4.2 KiB
JavaScript
124 lines
4.2 KiB
JavaScript
// @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 Icon from 'component/common/icon';
|
|
import HelpLink from 'component/common/help-link';
|
|
import Card from 'component/common/card';
|
|
import LbcSymbol from 'component/common/lbc-symbol';
|
|
|
|
type Props = {
|
|
balance: number,
|
|
totalBalance: number,
|
|
claimsBalance: number,
|
|
supportsBalance: number,
|
|
tipsBalance: number,
|
|
doOpenModal: string => void,
|
|
hasSynced: boolean,
|
|
};
|
|
|
|
const WalletBalance = (props: Props) => {
|
|
const { balance, claimsBalance, supportsBalance, tipsBalance, doOpenModal, hasSynced } = props;
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<section className="columns">
|
|
<Card
|
|
title={<LbcSymbol postfix={balance} isTitle />}
|
|
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>
|
|
}
|
|
/>
|
|
<div>
|
|
<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 */}
|
|
|
|
<div className="section">
|
|
<div className="section__flex">
|
|
<Icon sectionIcon icon={ICONS.SUPPORT} />
|
|
<h2 className="section__title--small">
|
|
<strong>
|
|
<CreditAmount amount={tipsBalance} precision={8} />
|
|
</strong>{' '}
|
|
{__('earned and bound in tips')}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="section">
|
|
<div className="section__flex">
|
|
<Icon sectionIcon icon={ICONS.LOCK} />
|
|
<div>
|
|
<h2 className="section__title--small">
|
|
<strong>
|
|
<CreditAmount amount={claimsBalance + supportsBalance} precision={8} />
|
|
</strong>{' '}
|
|
{__('currently staked')}
|
|
</h2>
|
|
<div className="section__subtitle">
|
|
<dl>
|
|
<dt>{__('... in your publishes')}</dt>
|
|
<dd>
|
|
<CreditAmount amount={claimsBalance} precision={8} />
|
|
</dd>
|
|
|
|
<dt>{__('... in your supports')}</dt>
|
|
<dd>
|
|
<CreditAmount amount={supportsBalance} precision={8} />
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</React.Fragment>
|
|
</div>
|
|
</section>
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
export default WalletBalance;
|