add wallet fiat balance
This commit is contained in:
Anthony
parent
47200bb5e7
commit
4f14e017fe
3 changed files with 228 additions and 13 deletions
40
ui/component/walletFiatBalance/index.js
Normal file
40
ui/component/walletFiatBalance/index.js
Normal file
|
|
@ -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);
|
||||
180
ui/component/walletFiatBalance/view.jsx
Normal file
180
ui/component/walletFiatBalance/view.jsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue