From b6bb5f05ec21418fbb4c7f36bad0f5d85f82273c Mon Sep 17 00:00:00 2001 From: zeppi Date: Tue, 19 Oct 2021 09:35:45 -0400 Subject: [PATCH] credits only on tx page --- ui/component/txoList/view.jsx | 353 ++++++++-------------------------- 1 file changed, 78 insertions(+), 275 deletions(-) diff --git a/ui/component/txoList/view.jsx b/ui/component/txoList/view.jsx index 1f98abb42..79c5c2a6b 100644 --- a/ui/component/txoList/view.jsx +++ b/ui/component/txoList/view.jsx @@ -12,20 +12,6 @@ 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 { Lbryio } from 'lbryinc'; -import { getStripeEnvironment } from 'util/stripe'; -let stripeEnvironment = getStripeEnvironment(); - -// constants to be used in query params -const QUERY_NAME_CURRENCY = 'currency'; -const QUERY_NAME_TAB = 'tab'; -const QUERY_NAME_FIAT_TYPE = 'fiatType'; -// TODO: this tab will be renamed -const DEFAULT_CURRENCY_PARAM = 'credits'; -const DEFAULT_TAB_PARAM = 'fiat-payment-history'; -const DEFAULT_FIAT_TYPE_PARAM = 'incoming'; type Props = { search: string, @@ -59,95 +45,12 @@ 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 getAccountTransactions() { - return Lbryio.call( - 'account', - 'list', - { - environment: stripeEnvironment, - }, - 'post' - ); - } - - // calculate account transactions section - React.useEffect(() => { - (async function () { - try { - const accountTransactionResponse = await getAccountTransactions(); - - // reverse so order is from most recent to latest - if (accountTransactionResponse && accountTransactionResponse.length) { - accountTransactionResponse.reverse(); - } - - // TODO: remove this once pagination is implemented - if (accountTransactionResponse && accountTransactionResponse.length && accountTransactionResponse.length > 25) { - accountTransactionResponse.length = 25; - } - - setAccountTransactionResponse(accountTransactionResponse); - } 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); - - // reverse so order is from most recent to latest - if (customerTransactionResponse && customerTransactionResponse.length) { - customerTransactionResponse.reverse(); - } - - // TODO: remove this once pagination is implemented - if ( - customerTransactionResponse && - customerTransactionResponse.length && - customerTransactionResponse.length > 25 - ) { - customerTransactionResponse.length = 25; - } - - 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(QUERY_NAME_CURRENCY) || DEFAULT_CURRENCY_PARAM; - const fiatType = urlParams.get(QUERY_NAME_FIAT_TYPE) || DEFAULT_FIAT_TYPE_PARAM; - // tab used in the wallet section - // TODO: need to change this eventually - const tab = urlParams.get(QUERY_NAME_TAB) || DEFAULT_TAB_PARAM; const currentUrlParams = { page, @@ -155,9 +58,6 @@ function TxoList(props: Props) { active, type, subtype, - currency, - fiatType, - tab, }; const hideStatus = @@ -165,6 +65,7 @@ function TxoList(props: Props) { // this is for sdk params const params = {}; + if (currentUrlParams.type) { if (currentUrlParams.type === TXO.ALL) { params[TXO.EXCLUDE_INTERNAL_TRANSFERS] = true; @@ -235,8 +136,6 @@ function TxoList(props: Props) { newUrlParams.set(TXO.ACTIVE, currentUrlParams.active); } newUrlParams.set(TXO.PAGE, delta.value); - newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab); - newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency); break; case TXO.TYPE: newUrlParams.set(TXO.TYPE, delta.value); @@ -255,8 +154,6 @@ function TxoList(props: Props) { } newUrlParams.set(TXO.PAGE, String(1)); newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize); - newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab); - newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency); break; case TXO.SUB_TYPE: if (currentUrlParams.type) { @@ -266,8 +163,6 @@ function TxoList(props: Props) { newUrlParams.set(TXO.SUB_TYPE, delta.value); newUrlParams.set(TXO.PAGE, String(1)); newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize); - newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab); - newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency); break; case TXO.ACTIVE: if (currentUrlParams.type) { @@ -279,25 +174,6 @@ function TxoList(props: Props) { newUrlParams.set(TXO.ACTIVE, delta.value); newUrlParams.set(TXO.PAGE, String(1)); newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize); - newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab); - newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency); - break; - // toggling the currency type (lbc/fiat) - case QUERY_NAME_CURRENCY: - newUrlParams.set(QUERY_NAME_CURRENCY, delta.value); - newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab); - // only set fiat type (incoming|outgoing) if fiat is being used - if (delta.value === 'credits') { - newUrlParams.delete(QUERY_NAME_FIAT_TYPE); - } else { - newUrlParams.set(QUERY_NAME_FIAT_TYPE, currentUrlParams.fiatType); - } - break; - // toggling the fiat type (incoming/outgoing) - case QUERY_NAME_FIAT_TYPE: - newUrlParams.set(QUERY_NAME_FIAT_TYPE, delta.value); - newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab); - newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency); break; } @@ -318,56 +194,49 @@ function TxoList(props: Props) { title={ <>
{__(`Transactions`)}
-
- - {/* toggle between LBC and fiat buttons */} -
- {/* toggle to LBC */} -
- -
} isBodyList body={ - currency === 'credits' ? ( -
- {/* LBC transactions section */} -
-
-
+
+ {/* LBC transactions section */} +
+
+
+
+ {/* LBC transaction type dropdown */} + + {__('Type')} + + + } + value={type || 'all'} + onChange={(e) => handleChange({ changedParameterKey: TXO.TYPE, value: e.target.value })} + > + {Object.values(TXO.DROPDOWN_TYPES).map((v) => { + const stringV = String(v); + return ( + + ); + })} + +
+ {(type === TXO.SENT || type === TXO.RECEIVED) && (
- {/* LBC transaction type dropdown */} - {__('Type')} - - - } - value={type || 'all'} - onChange={(e) => handleChange({ changedParameterKey: TXO.TYPE, value: e.target.value, tab })} + name="subtype" + label={__('Payment Type')} + value={subtype || 'all'} + onChange={(e) => handleChange({ changedParameterKey: TXO.SUB_TYPE, value: e.target.value })} > - {Object.values(TXO.DROPDOWN_TYPES).map((v) => { + {Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => { const stringV = String(v); return (
- {(type === TXO.SENT || type === TXO.RECEIVED) && ( -
- - handleChange({ changedParameterKey: TXO.SUB_TYPE, value: e.target.value, tab }) - } - > - {Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => { - const stringV = String(v); - return ( - - ); - })} - -
- )} - {!hideStatus && ( -
- - -
- {/* active transactions button */} -
- -
- )} -
- {/* export and refresh buttons */} -
- {!isFetchingTransactions && transactionsFile === null && ( - - )} -
- fetchTransactions()} - progressMsg={isFetchingTransactions ? __('Fetching data') : ''} - /> -
-
-
-
- {/* listing of the lbc transactions */} - - -
- ) : ( -
- {/* FIAT SECTION ( toggle buttons and transactions) */} -
-
-
+ )} + {!hideStatus && (
- +
- {/* incoming transactions button */} + {/* active transactions button */}
-
+ )} +
+ {/* export and refresh buttons */} +
+ {!isFetchingTransactions && transactionsFile === null && ( + + )} +
+ fetchTransactions()} + progressMsg={isFetchingTransactions ? __('Fetching data') : ''} + /> +
+
- {/* listing of the transactions */} - {fiatType === 'incoming' && } - {fiatType === 'outgoing' && } - {/* TODO: have to finish pagination */} - {/* */}
- ) + {/* listing of the lbc transactions */} + + +
} /> );