From 15b076fd2024cbae40f121382db5e9bbcf7c5e49 Mon Sep 17 00:00:00 2001 From: Anthony Date: Wed, 18 Aug 2021 20:06:12 +0200 Subject: [PATCH] fix merge conflicts --- ui/component/common/credit-amount.jsx | 5 + ui/component/txoList/view.jsx | 233 ++++++++++++++++-- ui/component/walletBalance/view.jsx | 7 + .../walletFiatAccountHistory/view.jsx | 111 ++++----- ui/component/walletFiatBalance/view.jsx | 104 ++++---- .../walletFiatPaymentHistory/view.jsx | 133 +++++----- ui/page/wallet/view.jsx | 215 +++++----------- 7 files changed, 441 insertions(+), 367 deletions(-) diff --git a/ui/component/common/credit-amount.jsx b/ui/component/common/credit-amount.jsx index b22e63cab..92adbba4c 100644 --- a/ui/component/common/credit-amount.jsx +++ b/ui/component/common/credit-amount.jsx @@ -49,6 +49,11 @@ class CreditAmount extends React.PureComponent { isFiat, } = this.props; const minimumRenderableAmount = 10 ** (-1 * precision); + + // return null, otherwise it will try and convert undefined to a string + if (amount === undefined) { + return null; + } const fullPrice = formatFullPrice(amount, 2); const isFree = parseFloat(amount) === 0; diff --git a/ui/component/txoList/view.jsx b/ui/component/txoList/view.jsx index e07b3e6b1..9153842b5 100644 --- a/ui/component/txoList/view.jsx +++ b/ui/component/txoList/view.jsx @@ -12,6 +12,17 @@ import { toCapitalCase } from 'util/string'; import classnames from 'classnames'; import HelpLink from 'component/common/help-link'; import FileExporter from 'component/common/file-exporter'; +import WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory'; +import WalletFiatAccountHistory from 'component/walletFiatAccountHistory'; +import { STRIPE_PUBLIC_KEY } from '../../../config'; +import { Lbryio } from 'lbryinc'; + +let stripeEnvironment = 'test'; +// if the key contains pk_live it's a live key +// update the environment for the calls to the backend to indicate which environment to hit +if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) { + stripeEnvironment = 'live'; +} type Props = { search: string, @@ -30,6 +41,7 @@ type Props = { type Delta = { dkey: string, value: string, + tab: string }; function TxoList(props: Props) { @@ -45,12 +57,72 @@ function TxoList(props: Props) { transactionsFile, } = props; + const [accountTransactionResponse, setAccountTransactionResponse] = React.useState([]); + const [customerTransactions, setCustomerTransactions] = React.useState([]); + + function getPaymentHistory() { + return Lbryio.call( + 'customer', + 'list', + { + environment: stripeEnvironment, + }, + 'post' + ); + } + + function getAccountTransactionsa() { + return Lbryio.call( + 'account', + 'list', + { + environment: stripeEnvironment, + }, + 'post' + ); + } + + // calculate account transactions section + React.useEffect(() => { + (async function() { + try { + const getAccountTransactions = await getAccountTransactionsa(); + + setAccountTransactionResponse(getAccountTransactions); + } catch (err) { + console.log(err); + } + })(); + }, []); + + // populate customer payment data + React.useEffect(() => { + (async function() { + try { + // get card payments customer has made + let customerTransactionResponse = await getPaymentHistory(); + // console.log('amount of transactions'); + // console.log(customerTransactionResponse.length); + + if (customerTransactionResponse && customerTransactionResponse.length) { + customerTransactionResponse.reverse(); + } + + setCustomerTransactions(customerTransactionResponse); + } catch (err) { + console.log(err); + } + })(); + }, []); + const urlParams = new URLSearchParams(search); const page = urlParams.get(TXO.PAGE) || String(1); const pageSize = urlParams.get(TXO.PAGE_SIZE) || String(TXO.PAGE_SIZE_DEFAULT); const type = urlParams.get(TXO.TYPE) || TXO.ALL; const subtype = urlParams.get(TXO.SUB_TYPE); const active = urlParams.get(TXO.ACTIVE) || TXO.ALL; + const currency = urlParams.get('currency') || 'credits'; + const fiatType = urlParams.get('fiatType') || 'incoming'; const currentUrlParams = { page, @@ -58,6 +130,8 @@ function TxoList(props: Props) { active, type, subtype, + currency, + fiatType, }; const hideStatus = @@ -119,8 +193,32 @@ function TxoList(props: Props) { history.push(url); } + // let currency = 'credits'; function updateUrl(delta: Delta) { const newUrlParams = new URLSearchParams(); + + const existingCurrency = newUrlParams.get('currency') || 'credits'; + + const existingFiatType = newUrlParams.get('fiatType') || 'incoming'; + + console.log(existingFiatType); + + console.log(newUrlParams); + + // set tab name to account for wallet page tab + newUrlParams.set('tab', delta.tab); + + // only update currency if it's being changed + if (delta.currency) { + newUrlParams.set('currency', delta.currency); + } + + if (delta.fiatType) { + newUrlParams.set('fiatType', delta.fiatType); + } else { + newUrlParams.set('fiatType', existingFiatType); + } + switch (delta.dkey) { case TXO.PAGE: if (currentUrlParams.type) { @@ -179,6 +277,10 @@ function TxoList(props: Props) { const paramsString = JSON.stringify(params); + // tab used in the wallet section + // TODO: change the name of this eventually + const tab = 'fiat-payment-history'; + useEffect(() => { if (paramsString && updateTxoPageParams) { const params = JSON.parse(paramsString); @@ -188,28 +290,54 @@ function TxoList(props: Props) { return ( {__(`Transactions`)}} - titleActions={ -
- {!isFetchingTransactions && transactionsFile === null && ( - - )} -
- fetchTransactions()} - progressMsg={isFetchingTransactions ? __('Fetching data') : ''} - /> + title={ + <>
{__(`Transactions`)}
+
+ +
+
+
-
+ + + } + titleActions={<> + //
+ // {!isFetchingTransactions && transactionsFile === null && ( + // + // )} + //
+ // fetchTransactions()} + // progressMsg={isFetchingTransactions ? __('Fetching data') : ''} + // /> + //
+ //
} isBodyList - body={ -
+ body={currency === 'credits' + ?
@@ -223,7 +351,7 @@ function TxoList(props: Props) { } value={type || 'all'} - onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value })} + onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value, tab })} > {Object.values(TXO.DROPDOWN_TYPES).map((v) => { const stringV = String(v); @@ -242,7 +370,7 @@ function TxoList(props: Props) { name="subtype" label={__('Payment Type')} value={subtype || 'all'} - onChange={(e) => handleChange({ dkey: TXO.SUB_TYPE, value: e.target.value })} + onChange={(e) => handleChange({ dkey: TXO.SUB_TYPE, value: e.target.value, tab })} > {Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => { const stringV = String(v); @@ -262,7 +390,7 @@ function TxoList(props: Props) {
)} +
+ {!isFetchingTransactions && transactionsFile === null && ( + + )} +
+ fetchTransactions()} + progressMsg={isFetchingTransactions ? __('Fetching data') : ''} + /> +
+
+ {/* listing of the transactions */}
+ :
+ {/* fiat section (buttons and transactions) */} +
+
+
+ {!hideStatus && ( +
+ + +
+
+ +
+ )} +
+
+ {/* listing of the transactions */} + { fiatType === 'incoming' && } + { fiatType === 'outgoing' && } + {/* TODO: have to finish pagination */} + {/* */} +
+
} + /> ); } diff --git a/ui/component/walletBalance/view.jsx b/ui/component/walletBalance/view.jsx index 6746d5c36..4b6c06ca5 100644 --- a/ui/component/walletBalance/view.jsx +++ b/ui/component/walletBalance/view.jsx @@ -10,6 +10,8 @@ import Card from 'component/common/card'; import LbcSymbol from 'component/common/lbc-symbol'; import I18nMessage from 'component/i18nMessage'; import { formatNumberWithCommas } from 'util/number'; +import Icon from 'component/common/icon'; +import WalletFiatBalance from 'component/walletFiatBalance'; type Props = { balance: number, @@ -63,6 +65,7 @@ const WalletBalance = (props: Props) => { }, [doFetchUtxoCounts, balance, detailsExpanded]); return ( +
} subtitle={ @@ -181,6 +184,10 @@ const WalletBalance = (props: Props) => { } /> + + {/* fiat balance card */} + +
); }; diff --git a/ui/component/walletFiatAccountHistory/view.jsx b/ui/component/walletFiatAccountHistory/view.jsx index 49b1ff299..07616c2f7 100644 --- a/ui/component/walletFiatAccountHistory/view.jsx +++ b/ui/component/walletFiatAccountHistory/view.jsx @@ -21,67 +21,60 @@ const WalletBalance = (props: Props) => { } // if there are more than 10 transactions, limit it to 10 for the frontend - if (accountTransactions && accountTransactions.length > 10) { - accountTransactions.length = 10; - } + // if (accountTransactions && accountTransactions.length > 10) { + // accountTransactions.length = 10; + // } return ( - <> -
- - - - - - - - - - - - - - {accountTransactions && - accountTransactions.map((transaction) => ( - - - - - - - - - - ))} - -
{__('Date')}{<>{__('Receiving Channel Name')}}{__('Tip Location')}{__('Amount (USD)')} {__('Processing Fee')}{__('Odysee Fee')}{__('Received Amount')}
{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

} -
- - )} - /> - +
+ + + + + + + + + + + + + + {accountTransactions && + accountTransactions.map((transaction) => ( + + + + + + + + + + ))} + +
{__('Date')}{<>{__('Receiving Channel Name')}}{__('Tip Location')}{__('Amount (USD)')} {__('Processing Fee')}{__('Odysee Fee')}{__('Received Amount')}
{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/component/walletFiatBalance/view.jsx b/ui/component/walletFiatBalance/view.jsx index 9c71623ba..a58373e7f 100644 --- a/ui/component/walletFiatBalance/view.jsx +++ b/ui/component/walletFiatBalance/view.jsx @@ -6,83 +6,69 @@ import Button from 'component/button'; import Card from 'component/common/card'; import Icon from 'component/common/icon'; import I18nMessage from 'component/i18nMessage'; +import { Lbryio } from 'lbryinc'; +import { STRIPE_PUBLIC_KEY } from 'config'; -type Props = { - accountDetails: any, -}; +let stripeEnvironment = 'test'; +// if the key contains pk_live it's a live key +// update the environment for the calls to the backend to indicate which environment to hit +if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) { + stripeEnvironment = 'live'; +} const WalletBalance = (props: Props) => { - const { - accountDetails, - } = props; + const [accountStatusResponse, setAccountStatusResponse] = React.useState(); + + function getAccountStatus() { + return Lbryio.call( + 'account', + 'status', + { + environment: stripeEnvironment, + }, + 'post' + ); + } + + // calculate account transactions section + React.useEffect(() => { + (async function () { + try { + if (!stripeEnvironment) { + return; + } + const response = await getAccountStatus(); + + setAccountStatusResponse(response); + + } catch (err) { + console.log(err); + } + })(); + }, [stripeEnvironment]); return ( <>{{(accountDetails && ((accountDetails.total_received_unpaid - accountDetails.total_paid_out) / 100)) || 0} USD} - subtitle={accountDetails && accountDetails.total_received_unpaid > 0 && + title={<>{(accountStatusResponse && ((accountStatusResponse.total_received_unpaid - accountStatusResponse.total_paid_out) / 100)) || 0} USD} + subtitle={accountStatusResponse && accountStatusResponse.total_received_unpaid > 0 ? ( This is your pending balance that will be automatically sent to your bank account - + ) : ( + + When you begin to receive tips your balance will be updated here + ) } actions={ <>

- ${(accountDetails && (accountDetails.total_received_unpaid / 100)) || 0} Total Received Tips + ${(accountStatusResponse && (accountStatusResponse.total_received_unpaid / 100)) || 0} Total Received Tips

- ${(accountDetails && (accountDetails.total_paid_out / 100)) || 0} Withdrawn - {/*

- {/* view more section */} - {/* commenting out because not implemented, but could be used in the future */} - {/* {detailsExpanded && ( */} - {/*
*/} - {/*
*/} - {/*
*/} - {/* {__('Earned from uploads')} */} - {/* /!* ({__('Earned from channel page')}) *!/ */} - {/*
*/} - {/*
*/} - {/* */} - {/* {Boolean(1) && ( */} - {/*
*/} - - {/*
*/} - {/* {__('Earned from channel page')} */} - {/* /!* ({__('Delete or edit past content to spend')}) *!/ */} - {/*
*/} - {/*
*/} - {/* */} - {/*
*/} - - {/* /!*
*!/ */} - {/* /!* {__('...supporting content')} *!/ */} - {/* /!* ({__('Delete supports to spend')}) *!/ */} - {/* /!*
*!/ */} - {/* /!*
*!/ */} - {/* /!* *!/ */} - {/* /!*
*!/ */} - {/*
*/} - {/*
*/} - {/* )} */} -
- {/*
diff --git a/ui/component/walletFiatPaymentHistory/view.jsx b/ui/component/walletFiatPaymentHistory/view.jsx index 45d55bde7..1e0ea0383 100644 --- a/ui/component/walletFiatPaymentHistory/view.jsx +++ b/ui/component/walletFiatPaymentHistory/view.jsx @@ -1,7 +1,6 @@ // @flow import React from 'react'; import Button from 'component/button'; -import Card from 'component/common/card'; import { Lbryio } from 'lbryinc'; import moment from 'moment'; import { getStripeEnvironment } from 'util/stripe'; @@ -16,10 +15,6 @@ const WalletBalance = (props: Props) => { // receive transactions from parent component const { transactions: accountTransactions } = props; - // const [accountStatusResponse, setAccountStatusResponse] = React.useState(); - - // const [subscriptions, setSubscriptions] = React.useState(); - const [lastFour, setLastFour] = React.useState(); function getCustomerStatus() { @@ -35,78 +30,76 @@ const WalletBalance = (props: Props) => { // TODO: this is actually incorrect, last4 should be populated based on the transaction not the current customer details React.useEffect(() => { - (async function () { - const customerStatusResponse = await getCustomerStatus(); + (async function() { + const customerStatusResponse = await getCustomerStatus(); - const lastFour = - customerStatusResponse.PaymentMethods && - customerStatusResponse.PaymentMethods.length && - customerStatusResponse.PaymentMethods[0].card.last4; + const lastFour = customerStatusResponse.PaymentMethods && customerStatusResponse.PaymentMethods.length && customerStatusResponse.PaymentMethods[0].card.last4; - setLastFour(lastFour); + setLastFour(lastFour); })(); }, []); return ( <> - -
- - - - - - - - - - - - - {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'}
- {(!accountTransactions || accountTransactions.length === 0) && ( -

- No Transactions -

- )} -
- - } - /> - +
+
+ + {/* table header */} + + + + + + + + + + + {/* list data for transactions */} + + {accountTransactions && + accountTransactions.map((transaction) => ( + + {/* date */} + + {/* receiving channel name */} + + {/* link to content or channel */} + + {/* how much tipped */} + + {/* TODO: this is incorrect need it per transactions not per user */} + {/* last four of credit card */} + + {/* whether tip is anonymous or not */} + + + ))} + +
{__('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'}
+ {/* show some markup if there's no transactions */} + {(!accountTransactions || accountTransactions.length === 0) &&

No Transactions

} +
+
+ ); }; diff --git a/ui/page/wallet/view.jsx b/ui/page/wallet/view.jsx index d056e74d9..a2c071327 100644 --- a/ui/page/wallet/view.jsx +++ b/ui/page/wallet/view.jsx @@ -2,10 +2,6 @@ import React from 'react'; import { useHistory } from 'react-router'; import WalletBalance from 'component/walletBalance'; -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'; import Page from 'component/page'; import * as PAGES from 'constants/pages'; @@ -73,84 +69,6 @@ const WalletPage = (props: Props) => { push(url); } - const [accountStatusResponse, setAccountStatusResponse] = React.useState(); - const [accountTransactionResponse, setAccountTransactionResponse] = React.useState([]); - const [customerTransactions, setCustomerTransactions] = React.useState([]); - - function getPaymentHistory() { - return Lbryio.call( - 'customer', - 'list', - { - environment: stripeEnvironment, - }, - 'post' - ); - } - - function getAccountStatus() { - return Lbryio.call( - 'account', - 'status', - { - environment: stripeEnvironment, - }, - 'post' - ); - } - - function getAccountTransactionsa() { - return Lbryio.call( - 'account', - 'list', - { - environment: stripeEnvironment, - }, - 'post' - ); - } - - // calculate account transactions section - React.useEffect(() => { - (async function () { - try { - if (!stripeEnvironment) { - return; - } - const response = await getAccountStatus(); - - setAccountStatusResponse(response); - - // TODO: some weird naming clash hence getAccountTransactionsa - const getAccountTransactions = await getAccountTransactionsa(); - - setAccountTransactionResponse(getAccountTransactions); - } catch (err) { - console.log(err); - } - })(); - }, [stripeEnvironment]); - - // populate customer payment data - React.useEffect(() => { - (async function () { - try { - // get card payments customer has made - if (!stripeEnvironment) { - return; - } - let customerTransactionResponse = await getPaymentHistory(); - if (customerTransactionResponse && customerTransactionResponse.length) { - customerTransactionResponse.reverse(); - } - - setCustomerTransactions(customerTransactionResponse); - } catch (err) { - console.log(err); - } - })(); - }, [stripeEnvironment]); - // @endif const { totalBalance } = props; @@ -159,80 +77,67 @@ const WalletPage = (props: Props) => { return ( <> - {stripeEnvironment && ( - - - - {__('LBRY Credits')} - {__('Account History')} - {__('Payment History')} - - - -
-
- {/* if the transactions are loading */} - {loading && ( -
- -
- )} - {/* when the transactions are finished loading */} - {!loading && ( - <> - {showIntro ? ( - - ) : ( -
- - -
- )} - - )} -
+ {/* @if TARGET='web' */} + + + + {__('Balance')} + {__('Transactions')} + + + {/* balances for lbc and fiat */} + + + + {/* transactions panel */} + +
+
+ {/* if the transactions are loading */} + {loading && ( +
+ +
+ )} + {/* when the transactions are finished loading */} + {!loading && ( + <> + {showIntro ? ( + + ) : ( +
+ +
+ )} + + )}
- - -
- - -
- - -
- - -
- - - - - )} - {!stripeEnvironment && ( - - {loading && ( -
- -
- )} - {!loading && ( - <> - {showIntro ? ( - - ) : ( -
- - -
- )} - - )} - - )} +
+ + + + + {/* @endif */} + {/* @if TARGET='app' */} + + {loading && ( +
+ +
+ )} + {!loading && ( + <> + {showIntro ? ( + + ) : ( +
+ +
+ )} + + )} + + {/* @endif */} ); };