diff --git a/ui/component/walletFiatBalance/view.jsx b/ui/component/walletFiatBalance/view.jsx index 7e099cbe4..0d22daa1d 100644 --- a/ui/component/walletFiatBalance/view.jsx +++ b/ui/component/walletFiatBalance/view.jsx @@ -57,18 +57,6 @@ const WalletBalance = (props: 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 ( <>{1 == 1 && <Card title={<><Icon size="18" icon={ICONS.FINANCE} />{accountDetails && accountDetails.total_received_unpaid/100} USD</>} diff --git a/ui/component/walletFiatPaymentHistory/view.jsx b/ui/component/walletFiatPaymentHistory/view.jsx index 4f2847b6a..40f5f520d 100644 --- a/ui/component/walletFiatPaymentHistory/view.jsx +++ b/ui/component/walletFiatPaymentHistory/view.jsx @@ -65,35 +65,13 @@ const WalletBalance = (props: Props) => { const [detailsExpanded, setDetailsExpanded] = React.useState(false); const [accountStatusResponse, setAccountStatusResponse] = React.useState(); const [paymentHistoryTransactions, setPaymentHistoryTransactions] = React.useState(); + const [subscriptions, setSubscriptions] = React.useState(); + const [lastFour, setLastFour] = React.useState(); - - 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]); - var environment = 'test'; - function getAccountStatus(){ - return Lbryio.call( - 'account', - 'status', - { - environment - }, - 'post' - ); - } - function getPaymentHistory() { return Lbryio.call( 'customer', @@ -116,8 +94,6 @@ const WalletBalance = (props: Props) => { } React.useEffect(() => { - - (async function(){ let response = await getPaymentHistory(); @@ -129,13 +105,76 @@ const WalletBalance = (props: Props) => { setPaymentHistoryTransactions(response); + const subscriptions = [...response]; + + if(subscriptions.length > 2){ + subscriptions.length = 2 + setSubscriptions(subscriptions) + } else { + setSubscriptions([]) + } + console.log(response); })(); }, []); return ( + <> + <Card + title={__('Payment History')} + body={ + <> + <div className="table__wrapper"> + <table className="table table--transactions"> + <thead> + <tr> + <th className="date-header">{__('Date')}</th> + <th>{<>{__('Receiving Channel Name')}</>}</th> + <th>{__('Tip Location')}</th> + <th>{__('Amount (USD)')} </th> + <th>{__('Card Last 4')}</th> + <th>{__('Anonymous')}</th> + </tr> + </thead> + <tbody> + {paymentHistoryTransactions && + paymentHistoryTransactions.reverse().map((transaction) => ( + <tr key={transaction.name + transaction.created_at}> + <td>{moment(transaction.created_at).format('LLL')}</td> + <td> + <Button + className="stripe__card-link-text" + navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id} + label={transaction.channel_name} + button="link" + /> + </td> + <td> + <Button + className="stripe__card-link-text" + navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id} + label={ + transaction.channel_claim_id === transaction.source_claim_id + ? 'Channel Page' + : 'File Page' + } + button="link" + /> + </td> + <td>${transaction.tipped_amount / 100}</td> + <td>{lastFour}</td> + <td>{transaction.private_tip ? 'Yes' : 'No'}</td> + </tr> + ))} + </tbody> + </table> + </div> + </> + } + /> + <Card - title={__('Payment History')} + title={__('Subscriptions')} body={ <> <div className="table__wrapper"> @@ -151,8 +190,8 @@ const WalletBalance = (props: Props) => { </tr> </thead> <tbody> - {paymentHistoryTransactions && - paymentHistoryTransactions.reverse().map((transaction) => ( + {subscriptions && + subscriptions.reverse().map((transaction) => ( <tr key={transaction.name + transaction.created_at}> <td>{moment(transaction.created_at).format('LLL')}</td> <td> @@ -186,6 +225,7 @@ const WalletBalance = (props: Props) => { </> } /> + </> ); }; diff --git a/ui/page/wallet/view.jsx b/ui/page/wallet/view.jsx index d35c113b2..2342f2c18 100644 --- a/ui/page/wallet/view.jsx +++ b/ui/page/wallet/view.jsx @@ -3,7 +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 WalletFiatPaymentBalance from 'component/walletFiatPaymentBalance'; import WalletFiatAccountHistory from 'component/walletFiatAccountHistory'; import WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory'; import TxoList from 'component/txoList'; @@ -186,7 +186,7 @@ const WalletPage = (props: Props) => { <> <div className="payment-history-tab" style={{display: 'none'}}> - <WalletFiatBalance accountDetails={accountStatusResponse} /> + <WalletFiatPaymentBalance accountDetails={accountStatusResponse} /> <div style={{paddingTop: '25px'}}></div> <WalletFiatPaymentHistory transactions={accountTransactionResponse}/> </div>