LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-08-23 17:47:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

credits only on tx page

Browse source
This commit is contained in:
zeppi 2021-10-19 09:35:45 -04:00 • committed by jessopb
parent 32dd7ef952
commit b6bb5f05ec
1 changed files with 78 additions and 275 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

353
ui/component/txoList/view.jsx
View file

@ -12,20 +12,6 @@ import { toCapitalCase } from 'util/string';
import classnames from 'classnames'; import classnames from 'classnames';
import HelpLink from 'component/common/help-link'; import HelpLink from 'component/common/help-link';
import FileExporter from 'component/common/file-exporter'; 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 = { type Props = {
search: string, search: string,
@ -59,95 +45,12 @@ function TxoList(props: Props) {
transactionsFile, transactionsFile,
} = props; } = 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 urlParams = new URLSearchParams(search);
const page = urlParams.get(TXO.PAGE) || String(1); const page = urlParams.get(TXO.PAGE) || String(1);
const pageSize = urlParams.get(TXO.PAGE_SIZE) || String(TXO.PAGE_SIZE_DEFAULT); const pageSize = urlParams.get(TXO.PAGE_SIZE) || String(TXO.PAGE_SIZE_DEFAULT);
const type = urlParams.get(TXO.TYPE) || TXO.ALL; const type = urlParams.get(TXO.TYPE) || TXO.ALL;
const subtype = urlParams.get(TXO.SUB_TYPE); const subtype = urlParams.get(TXO.SUB_TYPE);
const active = urlParams.get(TXO.ACTIVE) || TXO.ALL; 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 = { const currentUrlParams = {
page, page,
@ -155,9 +58,6 @@ function TxoList(props: Props) {
active, active,
type, type,
subtype, subtype,
currency,
fiatType,
tab,
}; };
const hideStatus = const hideStatus =
@ -165,6 +65,7 @@ function TxoList(props: Props) {
// this is for sdk params // this is for sdk params
const params = {}; const params = {};
if (currentUrlParams.type) { if (currentUrlParams.type) {
if (currentUrlParams.type === TXO.ALL) { if (currentUrlParams.type === TXO.ALL) {
params[TXO.EXCLUDE_INTERNAL_TRANSFERS] = true; params[TXO.EXCLUDE_INTERNAL_TRANSFERS] = true;
@ -235,8 +136,6 @@ function TxoList(props: Props) {
newUrlParams.set(TXO.ACTIVE, currentUrlParams.active); newUrlParams.set(TXO.ACTIVE, currentUrlParams.active);
} }
newUrlParams.set(TXO.PAGE, delta.value); newUrlParams.set(TXO.PAGE, delta.value);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break; break;
case TXO.TYPE: case TXO.TYPE:
newUrlParams.set(TXO.TYPE, delta.value); newUrlParams.set(TXO.TYPE, delta.value);
@ -255,8 +154,6 @@ function TxoList(props: Props) {
} }
newUrlParams.set(TXO.PAGE, String(1)); newUrlParams.set(TXO.PAGE, String(1));
newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize); newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break; break;
case TXO.SUB_TYPE: case TXO.SUB_TYPE:
if (currentUrlParams.type) { if (currentUrlParams.type) {
@ -266,8 +163,6 @@ function TxoList(props: Props) {
newUrlParams.set(TXO.SUB_TYPE, delta.value); newUrlParams.set(TXO.SUB_TYPE, delta.value);
newUrlParams.set(TXO.PAGE, String(1)); newUrlParams.set(TXO.PAGE, String(1));
newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize); newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize);
newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
break; break;
case TXO.ACTIVE: case TXO.ACTIVE:
if (currentUrlParams.type) { if (currentUrlParams.type) {
@ -279,25 +174,6 @@ function TxoList(props: Props) {
newUrlParams.set(TXO.ACTIVE, delta.value); newUrlParams.set(TXO.ACTIVE, delta.value);
newUrlParams.set(TXO.PAGE, String(1)); newUrlParams.set(TXO.PAGE, String(1));
newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize); 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; break;
} }
@ -318,56 +194,49 @@ function TxoList(props: Props) {
title={ title={
<> <>
<div className="table__header-text txo__table_header">{__(`Transactions`)}</div> <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 isBodyList
body={ body={
currency === 'credits' ? ( <div>
<div> {/* LBC transactions section */}
{/* LBC transactions section */} <div className="card__body-actions">
<div className="card__body-actions"> <div className="card__actions card__actions--between">
<div className="card__actions card__actions--between"> <div className="card__actions--inline">
<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> <div>
{/* LBC transaction type dropdown */}
<FormField <FormField
type="select" type="select"
name="type" name="subtype"
label={ label={__('Payment Type')}
<> value={subtype || 'all'}
{__('Type')} onChange={(e) => handleChange({ changedParameterKey: TXO.SUB_TYPE, value: e.target.value })}
<HelpLink href="https://lbry.com/faq/transaction-types" />
</>
}
value={type || 'all'}
onChange={(e) => handleChange({ changedParameterKey: TXO.TYPE, value: e.target.value, tab })}
> >
{Object.values(TXO.DROPDOWN_TYPES).map((v) => { {Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => {
const stringV = String(v); const stringV = String(v);
return ( return (
<option key={stringV} value={stringV}> <option key={stringV} value={stringV}>
@ -377,133 +246,67 @@ function TxoList(props: Props) {
})} })}
</FormField> </FormField>
</div> </div>
{(type === TXO.SENT || type === TXO.RECEIVED) && ( )}
<div> {!hideStatus && (
<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">
<div> <div>
<fieldset-section> <fieldset-section>
<label>{__('Type')}</label> <label>{__('Status')}</label>
<div className={'txo__radios'}> <div className={'txo__radios'}>
{/* incoming transactions button */} {/* active transactions button */}
<Button <Button
button="alt" button="alt"
onClick={(e) => onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'active' })}
handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'incoming' })
}
className={classnames(`button-toggle`, { 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
button="alt" button="alt"
onClick={(e) => onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'spent' })}
handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'outgoing' })
}
className={classnames(`button-toggle`, { 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> </div>
</fieldset-section> </fieldset-section>
</div> </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> </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>
</div> </div>
) {/* listing of the lbc transactions */}
<TransactionListTable txos={txoPage} />
<Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
</div>
} }
/> />
); );