From 4c0bc66498d837568e781c2a238a74b819e2f822 Mon Sep 17 00:00:00 2001 From: Anthony Date: Thu, 29 Jul 2021 18:32:50 +0200 Subject: [PATCH] show payments successfully --- .../walletFiatPaymentBalance/index.js | 40 +++++ .../walletFiatPaymentBalance/view.jsx | 148 ++++++++++++++++++ .../walletFiatPaymentHistory/view.jsx | 135 +++++++++------- ui/page/wallet/view.jsx | 5 +- 4 files changed, 273 insertions(+), 55 deletions(-) create mode 100644 ui/component/walletFiatPaymentBalance/index.js create mode 100644 ui/component/walletFiatPaymentBalance/view.jsx diff --git a/ui/component/walletFiatPaymentBalance/index.js b/ui/component/walletFiatPaymentBalance/index.js new file mode 100644 index 000000000..83b0a30cf --- /dev/null +++ b/ui/component/walletFiatPaymentBalance/index.js @@ -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); diff --git a/ui/component/walletFiatPaymentBalance/view.jsx b/ui/component/walletFiatPaymentBalance/view.jsx new file mode 100644 index 000000000..7e099cbe4 --- /dev/null +++ b/ui/component/walletFiatPaymentBalance/view.jsx @@ -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 && {accountDetails && accountDetails.total_received_unpaid/100} USD} + subtitle={ + + This is your remaining balance that can still be withdrawn to your bank account + + } + actions={ + <> +

+ ${accountDetails && accountDetails.total_tipped / 100 } Received Total +

+ +

+ ${accountDetails && accountDetails.total_paid_out/100 } Withdrawn +

+ + {/* view more section */} + {detailsExpanded && ( +
+
+
+ {__('...earned from others')} + ({__('Unlock to spend')}) +
+
+ + {Boolean(tipsBalance) && ( +
+ +
+ {__('...on initial publishes')} + ({__('Delete or edit past content to spend')}) +
+
+ +
+ +
+ {__('...supporting content')} + ({__('Delete supports to spend')}) +
+
+ +
+
+
+ )} + +
+
+ + } + />} + ); +}; + +export default WalletBalance; diff --git a/ui/component/walletFiatPaymentHistory/view.jsx b/ui/component/walletFiatPaymentHistory/view.jsx index bd7447b69..4f2847b6a 100644 --- a/ui/component/walletFiatPaymentHistory/view.jsx +++ b/ui/component/walletFiatPaymentHistory/view.jsx @@ -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,59 +135,56 @@ const WalletBalance = (props: Props) => { return ( -
- - - - - - - - - - + title={__('Payment History')} + body={ + <> +
+
{__('Date')}{<>{__('Receiving Channel Name')}}{__('Tip Location')}{__('Amount (USD)')} {__('Processing Fee')}{__('Odysee Fee')}{__('Received Amount')}
+ + + + + + + + + + + + {paymentHistoryTransactions && + paymentHistoryTransactions.reverse().map((transaction) => ( + + + + + + + - - - {accountTransactions && - accountTransactions.map((transaction) => ( - - - - - - - - - - ))} - -
{__('Date')}{<>{__('Receiving Channel Name')}}{__('Tip Location')}{__('Amount (USD)')} {__('Card Last 4')}{__('Anonymous')}
{moment(transaction.created_at).format('LLL')} + + ${transaction.tipped_amount / 100}{lastFour}{transaction.private_tip ? 'Yes' : 'No'}
{moment(transaction.created_at).format('LLL')} - - ${transaction.tipped_amount / 100}${transaction.transaction_fee / 100}${transaction.application_fee / 100}${transaction.received_amount / 100}
- {!accountTransactions &&

No Transactions

} -
- - )} + ))} + + + + + } /> ); }; diff --git a/ui/page/wallet/view.jsx b/ui/page/wallet/view.jsx index fdd5441e3..d35c113b2 100644 --- a/ui/page/wallet/view.jsx +++ b/ui/page/wallet/view.jsx @@ -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) => { <>
-
+
@@ -185,6 +186,8 @@ const WalletPage = (props: Props) => { <>
+ +