show payments successfully
This commit is contained in:
Anthony
parent
2d9005a8c2
commit
4c0bc66498
4 changed files with 273 additions and 55 deletions
40
ui/component/walletFiatPaymentBalance/index.js
Normal file
40
ui/component/walletFiatPaymentBalance/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);
|
||||
148
ui/component/walletFiatPaymentBalance/view.jsx
Normal file
148
ui/component/walletFiatPaymentBalance/view.jsx
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
// @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 },
|
||||
accountDetails: any,
|
||||
};
|
||||
|
||||
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,
|
||||
accountDetails,
|
||||
} = props;
|
||||
|
||||
console.log('account details');
|
||||
console.log(accountDetails);
|
||||
|
||||
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 (
|
||||
<>{1 == 1 && <Card
|
||||
title={<><Icon size="18" icon={ICONS.FINANCE} />{accountDetails && accountDetails.total_received_unpaid/100} USD</>}
|
||||
subtitle={
|
||||
<I18nMessage>
|
||||
This is your remaining balance that can still be withdrawn to your bank account
|
||||
</I18nMessage>
|
||||
}
|
||||
actions={
|
||||
<>
|
||||
<h2 className="section__title--small">
|
||||
${accountDetails && accountDetails.total_tipped / 100 } Received Total
|
||||
</h2>
|
||||
|
||||
<h2 className="section__title--small">
|
||||
${accountDetails && accountDetails.total_paid_out/100 } Withdrawn
|
||||
<Button
|
||||
button="link"
|
||||
label={detailsExpanded ? __('View less') : __('View more')}
|
||||
iconRight={detailsExpanded ? ICONS.UP : ICONS.DOWN}
|
||||
onClick={() => setDetailsExpanded(!detailsExpanded)}
|
||||
/>
|
||||
</h2>
|
||||
|
||||
{/* view more section */}
|
||||
{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>
|
||||
)}
|
||||
|
||||
<div className="section__actions">
|
||||
<Button button="primary" label={__('Receive Payout')} icon={ICONS.SEND} />
|
||||
<Button button="secondary" label={__('Account Configuration')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} />
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
/>}</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WalletBalance;
|
||||
|
|
@ -64,6 +64,9 @@ const WalletBalance = (props: Props) => {
|
|||
|
||||
const [detailsExpanded, setDetailsExpanded] = React.useState(false);
|
||||
const [accountStatusResponse, setAccountStatusResponse] = React.useState();
|
||||
const [paymentHistoryTransactions, setPaymentHistoryTransactions] = React.useState();
|
||||
|
||||
const [lastFour, setLastFour] = React.useState();
|
||||
|
||||
|
||||
const { other: otherCount = 0 } = utxoCounts || {};
|
||||
|
|
@ -91,13 +94,40 @@ const WalletBalance = (props: Props) => {
|
|||
);
|
||||
}
|
||||
|
||||
function getPaymentHistory() {
|
||||
return Lbryio.call(
|
||||
'customer',
|
||||
'list',
|
||||
{
|
||||
environment,
|
||||
},
|
||||
'post'
|
||||
)};
|
||||
|
||||
function getCustomerStatus(){
|
||||
return Lbryio.call(
|
||||
'customer',
|
||||
'status',
|
||||
{
|
||||
environment,
|
||||
},
|
||||
'post'
|
||||
)
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
|
||||
|
||||
(async function(){
|
||||
const response = await getAccountStatus();
|
||||
let response = await getPaymentHistory();
|
||||
|
||||
setAccountStatusResponse(response);
|
||||
const customerStatusResponse = await getCustomerStatus();
|
||||
|
||||
setLastFour(customerStatusResponse.PaymentMethods[0].card.last4);
|
||||
|
||||
if (response.length > 10) response.length = 10;
|
||||
|
||||
setPaymentHistoryTransactions(response);
|
||||
|
||||
console.log(response);
|
||||
})();
|
||||
|
|
@ -105,8 +135,8 @@ const WalletBalance = (props: Props) => {
|
|||
|
||||
return (
|
||||
<Card
|
||||
title={'Tip History'}
|
||||
body={1 == 1 && (
|
||||
title={__('Payment History')}
|
||||
body={
|
||||
<>
|
||||
<div className="table__wrapper">
|
||||
<table className="table table--transactions">
|
||||
|
|
@ -116,14 +146,13 @@ const WalletBalance = (props: Props) => {
|
|||
<th>{<>{__('Receiving Channel Name')}</>}</th>
|
||||
<th>{__('Tip Location')}</th>
|
||||
<th>{__('Amount (USD)')} </th>
|
||||
<th>{__('Processing Fee')}</th>
|
||||
<th>{__('Odysee Fee')}</th>
|
||||
<th>{__('Received Amount')}</th>
|
||||
<th>{__('Card Last 4')}</th>
|
||||
<th>{__('Anonymous')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{accountTransactions &&
|
||||
accountTransactions.map((transaction) => (
|
||||
{paymentHistoryTransactions &&
|
||||
paymentHistoryTransactions.reverse().map((transaction) => (
|
||||
<tr key={transaction.name + transaction.created_at}>
|
||||
<td>{moment(transaction.created_at).format('LLL')}</td>
|
||||
<td>
|
||||
|
|
@ -147,17 +176,15 @@ const WalletBalance = (props: Props) => {
|
|||
/>
|
||||
</td>
|
||||
<td>${transaction.tipped_amount / 100}</td>
|
||||
<td>${transaction.transaction_fee / 100}</td>
|
||||
<td>${transaction.application_fee / 100}</td>
|
||||
<td>${transaction.received_amount / 100}</td>
|
||||
<td>{lastFour}</td>
|
||||
<td>{transaction.private_tip ? 'Yes' : 'No'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{!accountTransactions && <p style={{textAlign:"center", marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import React from 'react';
|
|||
import { withRouter } from 'react-router';
|
||||
import WalletBalance from 'component/walletBalance';
|
||||
import WalletFiatBalance from 'component/walletFiatBalance';
|
||||
import WalletFiatBalance from 'component/walletFiatBalance';
|
||||
import WalletFiatAccountHistory from 'component/walletFiatAccountHistory';
|
||||
import WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory';
|
||||
import TxoList from 'component/txoList';
|
||||
|
|
@ -177,7 +178,7 @@ const WalletPage = (props: Props) => {
|
|||
<>
|
||||
<div className="fiat-transactions" style={{display: 'none'}}>
|
||||
<WalletFiatBalance accountDetails={accountStatusResponse} />
|
||||
<div style={{paddingTop: '20px'}}></div>
|
||||
<div style={{paddingTop: '25px'}}></div>
|
||||
<WalletFiatAccountHistory transactions={accountTransactionResponse}/>
|
||||
</div>
|
||||
</>
|
||||
|
|
@ -185,6 +186,8 @@ const WalletPage = (props: Props) => {
|
|||
|
||||
<>
|
||||
<div className="payment-history-tab" style={{display: 'none'}}>
|
||||
<WalletFiatBalance accountDetails={accountStatusResponse} />
|
||||
<div style={{paddingTop: '25px'}}></div>
|
||||
<WalletFiatPaymentHistory transactions={accountTransactionResponse}/>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in a new issue