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={ <> <div className="table__header-text txo__table_header">{__(`Transactions`)}</div> - <div className="txo__radios_container"> - <fieldset-section style={{ display: 'inline' }} className="txo__radios_fieldset"> - {/* toggle between LBC and fiat buttons */} - <div className={'txo__radios'}> - {/* toggle to LBC */} - <Button - button="alt" - onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_CURRENCY, value: 'credits' })} - className={classnames(`button-toggle`, { - 'button-toggle--active': currency === 'credits', - })} - label={__('Credits --[transactions tab]--')} - /> - {/* toggle to fiat */} - <Button - button="alt" - onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_CURRENCY, value: 'fiat' })} - className={classnames(`button-toggle`, { - 'button-toggle--active': currency === 'fiat', - })} - label={__('USD --[transactions tab]--')} - /> - </div> - </fieldset-section> - </div> </> } isBodyList body={ - currency === 'credits' ? ( - <div> - {/* LBC transactions section */} - <div className="card__body-actions"> - <div className="card__actions card__actions--between"> - <div className="card__actions--inline"> + <div> + {/* LBC transactions section */} + <div className="card__body-actions"> + <div className="card__actions card__actions--between"> + <div className="card__actions--inline"> + <div> + {/* LBC transaction type dropdown */} + <FormField + type="select" + name="type" + label={ + <> + {__('Type')} + <HelpLink href="https://lbry.com/faq/transaction-types" /> + </> + } + 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 ( + <option key={stringV} value={stringV}> + {stringV && __(toCapitalCase(stringV))} + </option> + ); + })} + </FormField> + </div> + {(type === TXO.SENT || type === TXO.RECEIVED) && ( <div> - {/* LBC transaction type dropdown */} <FormField type="select" - name="type" - label={ - <> - {__('Type')} - <HelpLink href="https://lbry.com/faq/transaction-types" /> - </> - } - 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 ( <option key={stringV} value={stringV}> @@ -377,133 +246,67 @@ function TxoList(props: Props) { })} </FormField> </div> - {(type === TXO.SENT || type === TXO.RECEIVED) && ( - <div> - <FormField - type="select" - name="subtype" - label={__('Payment Type')} - value={subtype || 'all'} - onChange={(e) => - handleChange({ changedParameterKey: TXO.SUB_TYPE, value: e.target.value, tab }) - } - > - {Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => { - const stringV = String(v); - return ( - <option key={stringV} value={stringV}> - {stringV && __(toCapitalCase(stringV))} - </option> - ); - })} - </FormField> - </div> - )} - {!hideStatus && ( - <div> - <fieldset-section> - <label>{__('Status')}</label> - <div className={'txo__radios'}> - {/* active transactions button */} - <Button - button="alt" - onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'active' })} - className={classnames(`button-toggle`, { - 'button-toggle--active': active === TXO.ACTIVE, - })} - label={__('Active')} - /> - {/* historical transactions button */} - <Button - button="alt" - onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'spent' })} - className={classnames(`button-toggle`, { - 'button-toggle--active': active === 'spent', - })} - label={__('Historical')} - /> - {/* all transactions button */} - <Button - button="alt" - onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'all' })} - className={classnames(`button-toggle`, { - 'button-toggle--active': active === 'all', - })} - label={__('All')} - /> - </div> - </fieldset-section> - </div> - )} - </div> - {/* export and refresh buttons */} - <div className="card__actions--inline"> - {!isFetchingTransactions && transactionsFile === null && ( - <label>{<span className="error__text">{__('Failed to process fetched data.')}</span>}</label> - )} - <div className="txo__export"> - <FileExporter - data={transactionsFile} - label={__('Export')} - tooltip={__('Fetch transaction data for export')} - defaultFileName={'transactions-history.csv'} - onFetch={() => fetchTransactions()} - progressMsg={isFetchingTransactions ? __('Fetching data') : ''} - /> - </div> - <Button button="alt" icon={ICONS.REFRESH} label={__('Refresh')} onClick={() => fetchTxoPage()} /> - </div> - </div> - </div> - {/* listing of the lbc transactions */} - <TransactionListTable txos={txoPage} /> - <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} /> - </div> - ) : ( - <div> - {/* FIAT SECTION ( toggle buttons and transactions) */} - <div className="section card-stack"> - <div className="card__body-actions"> - <div className="card__actions"> + )} + {!hideStatus && ( <div> <fieldset-section> - <label>{__('Type')}</label> + <label>{__('Status')}</label> <div className={'txo__radios'}> - {/* incoming transactions button */} + {/* active transactions button */} <Button button="alt" - onClick={(e) => - handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'incoming' }) - } + onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'active' })} className={classnames(`button-toggle`, { - 'button-toggle--active': fiatType === 'incoming', + 'button-toggle--active': active === TXO.ACTIVE, })} - label={__('Incoming')} + label={__('Active')} /> - {/* incoming transactions button */} + {/* historical transactions button */} <Button button="alt" - onClick={(e) => - handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'outgoing' }) - } + onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'spent' })} className={classnames(`button-toggle`, { - 'button-toggle--active': fiatType === 'outgoing', + 'button-toggle--active': active === 'spent', })} - label={__('Outgoing')} + label={__('Historical')} + /> + {/* all transactions button */} + <Button + button="alt" + onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'all' })} + className={classnames(`button-toggle`, { + 'button-toggle--active': active === 'all', + })} + label={__('All')} /> </div> </fieldset-section> </div> - </div> + )} + </div> + {/* export and refresh buttons */} + <div className="card__actions--inline"> + {!isFetchingTransactions && transactionsFile === null && ( + <label>{<span className="error__text">{__('Failed to process fetched data.')}</span>}</label> + )} + <div className="txo__export"> + <FileExporter + data={transactionsFile} + label={__('Export')} + tooltip={__('Fetch transaction data for export')} + defaultFileName={'transactions-history.csv'} + onFetch={() => fetchTransactions()} + progressMsg={isFetchingTransactions ? __('Fetching data') : ''} + /> + </div> + <Button button="alt" icon={ICONS.REFRESH} label={__('Refresh')} onClick={() => fetchTxoPage()} /> </div> - {/* listing of the transactions */} - {fiatType === 'incoming' && <WalletFiatAccountHistory transactions={accountTransactionResponse} />} - {fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={customerTransactions} />} - {/* TODO: have to finish pagination */} - {/* <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} /> */} </div> </div> - ) + {/* listing of the lbc transactions */} + <TransactionListTable txos={txoPage} /> + <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} /> + </div> } /> );