Merge pull request #6917 from lbryio/squashed-and-merged
Wallet redesign
This commit is contained in:
mayeaux
GitHub
commit
ef5701bb38
11 changed files with 729 additions and 617 deletions
|
|
@ -49,6 +49,11 @@ class CreditAmount extends React.PureComponent<Props> {
|
|||
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;
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import LbcSymbol from 'component/common/lbc-symbol';
|
|||
|
||||
type Props = {
|
||||
errorMessage: ?string,
|
||||
inviteNew: string => void,
|
||||
inviteNew: (string) => void,
|
||||
isPending: boolean,
|
||||
referralLink: string,
|
||||
referralCode: string,
|
||||
|
|
@ -35,10 +35,10 @@ function InviteNew(props: Props) {
|
|||
const [referralSource, setReferralSource] = useState(referralCode);
|
||||
|
||||
const handleReferralChange = React.useCallback(
|
||||
code => {
|
||||
(code) => {
|
||||
setReferralSource(code);
|
||||
// TODO: keep track of this in an array?
|
||||
const matchingChannel = channels && channels.find(ch => ch.name === code);
|
||||
const matchingChannel = channels && channels.find((ch) => ch.name === code);
|
||||
if (matchingChannel) {
|
||||
analytics.apiLogPublish(matchingChannel);
|
||||
}
|
||||
|
|
@ -68,12 +68,13 @@ function InviteNew(props: Props) {
|
|||
}, [topChannel, handleReferralChange]);
|
||||
|
||||
function lookupUrlByClaimName(name, channels) {
|
||||
const claim = channels.find(channel => channel.name === name);
|
||||
const claim = channels.find((channel) => channel.name === name);
|
||||
return claim && claim.canonical_url ? claim.canonical_url.replace('lbry://', '') : name;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={'columns'}>
|
||||
<div className="column">
|
||||
<Card
|
||||
title={__('Invites')}
|
||||
subtitle={
|
||||
|
|
@ -90,9 +91,9 @@ function InviteNew(props: Props) {
|
|||
type="select"
|
||||
label={__('Customize link')}
|
||||
value={referralSource}
|
||||
onChange={e => handleReferralChange(e.target.value)}
|
||||
onChange={(e) => handleReferralChange(e.target.value)}
|
||||
>
|
||||
{channels.map(channel => (
|
||||
{channels.map((channel) => (
|
||||
<option key={channel.claim_id} value={channel.name}>
|
||||
{channel.name}
|
||||
</option>
|
||||
|
|
@ -103,7 +104,8 @@ function InviteNew(props: Props) {
|
|||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div className="column">
|
||||
<Card
|
||||
title={__('Invite by email')}
|
||||
subtitle={
|
||||
|
|
@ -124,7 +126,7 @@ function InviteNew(props: Props) {
|
|||
inputButton={
|
||||
<Button button="secondary" type="submit" label={__('Invite')} disabled={isPending || !email} />
|
||||
}
|
||||
onChange={event => {
|
||||
onChange={(event) => {
|
||||
handleEmailChanged(event);
|
||||
}}
|
||||
/>
|
||||
|
|
@ -132,7 +134,9 @@ function InviteNew(props: Props) {
|
|||
<I18nMessage
|
||||
tokens={{
|
||||
rewards_link: <Button button="link" navigate="/$/rewards" label={__('rewards')} />,
|
||||
referral_faq_link: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />,
|
||||
referral_faq_link: (
|
||||
<Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />
|
||||
),
|
||||
}}
|
||||
>
|
||||
Read our %referral_faq_link% to learn more about rewards.
|
||||
|
|
@ -143,6 +147,7 @@ function InviteNew(props: Props) {
|
|||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,20 @@ 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,
|
||||
|
|
@ -28,7 +42,7 @@ type Props = {
|
|||
};
|
||||
|
||||
type Delta = {
|
||||
dkey: string,
|
||||
changedParameterKey: string,
|
||||
value: string,
|
||||
};
|
||||
|
||||
|
|
@ -45,12 +59,91 @@ 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,
|
||||
|
|
@ -58,11 +151,15 @@ function TxoList(props: Props) {
|
|||
active,
|
||||
type,
|
||||
subtype,
|
||||
currency,
|
||||
fiatType,
|
||||
tab,
|
||||
};
|
||||
|
||||
const hideStatus =
|
||||
type === TXO.SENT || (currentUrlParams.type === TXO.RECEIVED && currentUrlParams.subtype !== TXO.TIP);
|
||||
|
||||
// this is for sdk params
|
||||
const params = {};
|
||||
if (currentUrlParams.type) {
|
||||
if (currentUrlParams.type === TXO.ALL) {
|
||||
|
|
@ -121,7 +218,8 @@ function TxoList(props: Props) {
|
|||
|
||||
function updateUrl(delta: Delta) {
|
||||
const newUrlParams = new URLSearchParams();
|
||||
switch (delta.dkey) {
|
||||
|
||||
switch (delta.changedParameterKey) {
|
||||
case TXO.PAGE:
|
||||
if (currentUrlParams.type) {
|
||||
newUrlParams.set(TXO.TYPE, currentUrlParams.type);
|
||||
|
|
@ -133,6 +231,8 @@ 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);
|
||||
|
|
@ -151,6 +251,8 @@ 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) {
|
||||
|
|
@ -160,6 +262,8 @@ 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) {
|
||||
|
|
@ -171,6 +275,25 @@ 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;
|
||||
}
|
||||
|
||||
|
|
@ -188,31 +311,45 @@ function TxoList(props: Props) {
|
|||
|
||||
return (
|
||||
<Card
|
||||
title={<div className="table__header-text">{__(`Transactions`)}</div>}
|
||||
titleActions={
|
||||
<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') : ''}
|
||||
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')}
|
||||
/>
|
||||
{/* 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')}
|
||||
/>
|
||||
</div>
|
||||
<Button button="alt" icon={ICONS.REFRESH} label={__('Refresh')} onClick={() => fetchTxoPage()} />
|
||||
</fieldset-section>
|
||||
</div>
|
||||
</>
|
||||
|
||||
}
|
||||
isBodyList
|
||||
body={
|
||||
<div>
|
||||
body={currency === 'credits'
|
||||
? <div>
|
||||
{/* LBC transactions section */}
|
||||
<div className="card__body-actions">
|
||||
<div className="card__actions">
|
||||
<div className="card__actions card__actions--between">
|
||||
<div className="card__actions--inline">
|
||||
<div>
|
||||
{/* LBC transaction type dropdown */}
|
||||
<FormField
|
||||
type="select"
|
||||
name="type"
|
||||
|
|
@ -223,7 +360,7 @@ function TxoList(props: Props) {
|
|||
</>
|
||||
}
|
||||
value={type || 'all'}
|
||||
onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value })}
|
||||
onChange={(e) => handleChange({ changedParameterKey: TXO.TYPE, value: e.target.value, tab })}
|
||||
>
|
||||
{Object.values(TXO.DROPDOWN_TYPES).map((v) => {
|
||||
const stringV = String(v);
|
||||
|
|
@ -242,7 +379,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({ changedParameterKey: TXO.SUB_TYPE, value: e.target.value, tab })}
|
||||
>
|
||||
{Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => {
|
||||
const stringV = String(v);
|
||||
|
|
@ -260,25 +397,28 @@ function TxoList(props: Props) {
|
|||
<fieldset-section>
|
||||
<label>{__('Status')}</label>
|
||||
<div className={'txo__radios'}>
|
||||
{/* active transactions button */}
|
||||
<Button
|
||||
button="alt"
|
||||
onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'active' })}
|
||||
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({ dkey: TXO.ACTIVE, value: 'spent' })}
|
||||
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({ dkey: TXO.ACTIVE, value: 'all' })}
|
||||
onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'all' })}
|
||||
className={classnames(`button-toggle`, {
|
||||
'button-toggle--active': active === 'all',
|
||||
})}
|
||||
|
|
@ -289,11 +429,70 @@ function TxoList(props: Props) {
|
|||
</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>
|
||||
<fieldset-section>
|
||||
<label>{__('Type')}</label>
|
||||
<div className={'txo__radios'}>
|
||||
{/* incoming transactions button */}
|
||||
<Button
|
||||
button="alt"
|
||||
onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'incoming'})}
|
||||
className={classnames(`button-toggle`, {
|
||||
'button-toggle--active': fiatType === 'incoming',
|
||||
})}
|
||||
label={__('Incoming')}
|
||||
/>
|
||||
{/* incoming transactions button */}
|
||||
<Button
|
||||
button="alt"
|
||||
onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'outgoing'})}
|
||||
className={classnames(`button-toggle`, {
|
||||
'button-toggle--active': fiatType === 'outgoing',
|
||||
})}
|
||||
label={__('Outgoing')}
|
||||
/>
|
||||
</div>
|
||||
</fieldset-section>
|
||||
</div>
|
||||
</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>
|
||||
}
|
||||
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import Card from 'component/common/card';
|
|||
import LbcSymbol from 'component/common/lbc-symbol';
|
||||
import I18nMessage from 'component/i18nMessage';
|
||||
import { formatNumberWithCommas } from 'util/number';
|
||||
import WalletFiatBalance from 'component/walletFiatBalance';
|
||||
|
||||
type Props = {
|
||||
balance: number,
|
||||
|
|
@ -63,6 +64,8 @@ const WalletBalance = (props: Props) => {
|
|||
}, [doFetchUtxoCounts, balance, detailsExpanded]);
|
||||
|
||||
return (
|
||||
<div className={'columns'}>
|
||||
<div className="column">
|
||||
<Card
|
||||
title={<LbcSymbol postfix={formatNumberWithCommas(totalBalance)} isTitle />}
|
||||
subtitle={
|
||||
|
|
@ -146,14 +149,21 @@ const WalletBalance = (props: Props) => {
|
|||
</p>
|
||||
) : (
|
||||
<p className="help--warning">
|
||||
{__('Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.')}
|
||||
{__(
|
||||
'Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.'
|
||||
)}
|
||||
<HelpLink navigate={`/$/${PAGES.BACKUP}`} />
|
||||
</p>
|
||||
)}
|
||||
{/* @endif */}
|
||||
<div className="section__actions">
|
||||
<Button button="primary" label={__('Buy')} icon={ICONS.BUY} navigate={`/$/${PAGES.BUY}`} />
|
||||
<Button button="secondary" label={__('Receive')} icon={ICONS.RECEIVE} navigate={`/$/${PAGES.RECEIVE}`} />
|
||||
<Button
|
||||
button="secondary"
|
||||
label={__('Receive')}
|
||||
icon={ICONS.RECEIVE}
|
||||
navigate={`/$/${PAGES.RECEIVE}`}
|
||||
/>
|
||||
<Button button="secondary" label={__('Send')} icon={ICONS.SEND} navigate={`/$/${PAGES.SEND}`} />
|
||||
</div>
|
||||
{(otherCount > WALLET_CONSOLIDATE_UTXOS || consolidateIsPending || consolidatingUtxos) && (
|
||||
|
|
@ -173,14 +183,20 @@ const WalletBalance = (props: Props) => {
|
|||
help: <HelpLink href="https://lbry.com/faq/transaction-types" />,
|
||||
}}
|
||||
>
|
||||
Your wallet has a lot of change lying around. Consolidating will speed up your transactions. This could
|
||||
take some time. %now%%help%
|
||||
Your wallet has a lot of change lying around. Consolidating will speed up your transactions. This
|
||||
could take some time. %now%%help%
|
||||
</I18nMessage>
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="column">
|
||||
{/* fiat balance card */}
|
||||
<WalletFiatBalance />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import Button from 'component/button';
|
||||
import Card from 'component/common/card';
|
||||
import moment from 'moment';
|
||||
|
||||
type Props = {
|
||||
|
|
@ -21,15 +20,11 @@ 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 (
|
||||
<><Card
|
||||
title={'Tip History'}
|
||||
body={(
|
||||
<>
|
||||
<div className="table__wrapper">
|
||||
<table className="table table--transactions">
|
||||
<thead>
|
||||
|
|
@ -76,12 +71,9 @@ const WalletBalance = (props: Props) => {
|
|||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{!accountTransactions && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
|
||||
{!accountTransactions && <p className="wallet__fiat-transactions">No Transactions</p>}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -6,84 +6,64 @@ 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 { getStripeEnvironment } from 'util/stripe';
|
||||
let stripeEnvironment = getStripeEnvironment();
|
||||
|
||||
type Props = {
|
||||
accountDetails: any,
|
||||
};
|
||||
const WalletBalance = () => {
|
||||
const [accountStatusResponse, setAccountStatusResponse] = React.useState();
|
||||
|
||||
const WalletBalance = (props: Props) => {
|
||||
const {
|
||||
accountDetails,
|
||||
} = props;
|
||||
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 (
|
||||
<>{<Card
|
||||
title={<><Icon size={18} icon={ICONS.FINANCE} />{(accountDetails && ((accountDetails.total_received_unpaid - accountDetails.total_paid_out) / 100)) || 0} USD</>}
|
||||
subtitle={accountDetails && accountDetails.total_received_unpaid > 0 &&
|
||||
title={<><Icon size={18} icon={ICONS.FINANCE} />{(accountStatusResponse && ((accountStatusResponse.total_received_unpaid - accountStatusResponse.total_paid_out) / 100)) || 0} USD</>}
|
||||
subtitle={accountStatusResponse && accountStatusResponse.total_received_unpaid > 0 ? (
|
||||
<I18nMessage>
|
||||
This is your pending balance that will be automatically sent to your bank account
|
||||
</I18nMessage>
|
||||
</I18nMessage>) : (
|
||||
<I18nMessage>
|
||||
When you begin to receive tips your balance will be updated here
|
||||
</I18nMessage>)
|
||||
}
|
||||
actions={
|
||||
<>
|
||||
<h2 className="section__title--small">
|
||||
${(accountDetails && (accountDetails.total_received_unpaid / 100)) || 0} Total Received Tips
|
||||
${(accountStatusResponse && (accountStatusResponse.total_received_unpaid / 100)) || 0} Total Received Tips
|
||||
</h2>
|
||||
|
||||
<h2 className="section__title--small">
|
||||
${(accountDetails && (accountDetails.total_paid_out / 100)) || 0} Withdrawn
|
||||
{/* <Button */}
|
||||
{/* button="link" */}
|
||||
{/* label={detailsExpanded ? __('View less') : __('View more')} */}
|
||||
{/* iconRight={detailsExpanded ? ICONS.UP : ICONS.DOWN} */}
|
||||
{/* onClick={() => setDetailsExpanded(!detailsExpanded)} */}
|
||||
{/* /> */}
|
||||
${(accountStatusResponse && (accountStatusResponse.total_paid_out / 100)) || 0} Withdrawn
|
||||
</h2>
|
||||
|
||||
{/* view more section */}
|
||||
{/* commenting out because not implemented, but could be used in the future */}
|
||||
{/* {detailsExpanded && ( */}
|
||||
{/* <div className="section__subtitle"> */}
|
||||
{/* <dl> */}
|
||||
{/* <dt> */}
|
||||
{/* <span className="dt__text">{__('Earned from uploads')}</span> */}
|
||||
{/* /!* <span className="help--dt">({__('Earned from channel page')})</span> *!/ */}
|
||||
{/* </dt> */}
|
||||
{/* <dd> */}
|
||||
{/* <span className="dd__text"> */}
|
||||
{/* {Boolean(1) && ( */}
|
||||
{/* <Button */}
|
||||
{/* button="link" */}
|
||||
{/* className="dd__button" */}
|
||||
{/* icon={ICONS.UNLOCK} */}
|
||||
{/* /> */}
|
||||
{/* )} */}
|
||||
{/* <CreditAmount amount={1} precision={4} /> */}
|
||||
{/* </span> */}
|
||||
{/* </dd> */}
|
||||
|
||||
{/* <dt> */}
|
||||
{/* <span className="dt__text">{__('Earned from channel page')}</span> */}
|
||||
{/* /!* <span className="help--dt">({__('Delete or edit past content to spend')})</span> *!/ */}
|
||||
{/* </dt> */}
|
||||
{/* <dd> */}
|
||||
{/* <CreditAmount amount={1} precision={4} /> */}
|
||||
{/* </dd> */}
|
||||
|
||||
{/* /!* <dt> *!/ */}
|
||||
{/* /!* <span className="dt__text">{__('...supporting content')}</span> *!/ */}
|
||||
{/* /!* <span className="help--dt">({__('Delete supports to spend')})</span> *!/ */}
|
||||
{/* /!* </dt> *!/ */}
|
||||
{/* /!* <dd> *!/ */}
|
||||
{/* /!* <CreditAmount amount={1} precision={4} /> *!/ */}
|
||||
{/* /!* </dd> *!/ */}
|
||||
{/* </dl> */}
|
||||
{/* </div> */}
|
||||
{/* )} */}
|
||||
|
||||
<div className="section__actions">
|
||||
{/* <Button button="primary" label={__('Receive Payout')} icon={ICONS.SEND} /> */}
|
||||
<Button button="secondary" label={__('Account Configuration')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} />
|
||||
<Button button="secondary" label={__('Bank Accounts')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} />
|
||||
<Button button="secondary" label={__('Payment Methods')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} />
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,13 +30,10 @@ 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 () {
|
||||
(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);
|
||||
})();
|
||||
|
|
@ -49,12 +41,10 @@ const WalletBalance = (props: Props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
title={__('Payment History')}
|
||||
body={
|
||||
<>
|
||||
<div className="section card-stack">
|
||||
<div className="table__wrapper">
|
||||
<table className="table table--transactions">
|
||||
{/* table header */}
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="date-header">{__('Date')}</th>
|
||||
|
|
@ -65,11 +55,14 @@ const WalletBalance = (props: Props) => {
|
|||
<th>{__('Anonymous')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{/* list data for transactions */}
|
||||
<tbody>
|
||||
{accountTransactions &&
|
||||
accountTransactions.map((transaction) => (
|
||||
<tr key={transaction.name + transaction.created_at}>
|
||||
{/* date */}
|
||||
<td>{moment(transaction.created_at).format('LLL')}</td>
|
||||
{/* receiving channel name */}
|
||||
<td>
|
||||
<Button
|
||||
className=""
|
||||
|
|
@ -78,6 +71,7 @@ const WalletBalance = (props: Props) => {
|
|||
button="link"
|
||||
/>
|
||||
</td>
|
||||
{/* link to content or channel */}
|
||||
<td>
|
||||
<Button
|
||||
className=""
|
||||
|
|
@ -90,22 +84,21 @@ const WalletBalance = (props: Props) => {
|
|||
button="link"
|
||||
/>
|
||||
</td>
|
||||
{/* how much tipped */}
|
||||
<td>${transaction.tipped_amount / 100}</td>
|
||||
{/* TODO: this is incorrect need it per transactions not per user */}
|
||||
{/* last four of credit card */}
|
||||
<td>{lastFour}</td>
|
||||
{/* whether tip is anonymous or not */}
|
||||
<td>{transaction.private_tip ? 'Yes' : 'No'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{(!accountTransactions || accountTransactions.length === 0) && (
|
||||
<p style={{ textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)' }}>
|
||||
No Transactions
|
||||
</p>
|
||||
)}
|
||||
{/* show some markup if there's no transactions */}
|
||||
{(!accountTransactions || accountTransactions.length === 0) && <p className="wallet__fiat-transactions">No Transactions</p>}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -281,7 +281,8 @@ class StripeAccountConnection extends React.Component<Props, State> {
|
|||
)}
|
||||
</div>
|
||||
}
|
||||
actions={
|
||||
// only show additional buttons if its for additional verification or to show transaction page
|
||||
actions={(stillRequiringVerification || accountConfirmed) &&
|
||||
<>
|
||||
{stillRequiringVerification && (
|
||||
<Button
|
||||
|
|
@ -292,12 +293,14 @@ class StripeAccountConnection extends React.Component<Props, State> {
|
|||
className="stripe__complete-verification-button"
|
||||
/>
|
||||
)}
|
||||
{accountConfirmed && (
|
||||
<Button
|
||||
button="secondary"
|
||||
label={__('View Transactions')}
|
||||
icon={ICONS.SETTINGS}
|
||||
navigate={`/$/${PAGES.WALLET}?tab=fiat-payment-history`}
|
||||
navigate={`/$/${PAGES.WALLET}?fiatType=incoming&tab=fiat-payment-history¤cy=fiat`}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -426,7 +426,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
|
|||
button="primary"
|
||||
label={__('View Transactions')}
|
||||
icon={ICONS.SETTINGS}
|
||||
navigate={`/$/${PAGES.WALLET}?tab=fiat-account-history`}
|
||||
navigate={`/$/${PAGES.WALLET}?fiatType=outgoing&tab=fiat-payment-history¤cy=fiat`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,12 @@
|
|||
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';
|
||||
import Spinner from 'component/spinner';
|
||||
import YrblWalletEmpty from 'component/yrblWalletEmpty';
|
||||
import { Lbryio } from 'lbryinc';
|
||||
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs';
|
||||
import { getStripeEnvironment } from 'util/stripe';
|
||||
|
||||
const TAB_QUERY = 'tab';
|
||||
|
||||
|
|
@ -23,8 +17,6 @@ const TABS = {
|
|||
PAYMENT_HISTORY: 'fiat-payment-history',
|
||||
};
|
||||
|
||||
let stripeEnvironment = getStripeEnvironment();
|
||||
|
||||
type Props = {
|
||||
history: { action: string, push: (string) => void, replace: (string) => void },
|
||||
location: { search: string, pathname: string },
|
||||
|
|
@ -73,84 +65,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,15 +73,19 @@ const WalletPage = (props: Props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
{stripeEnvironment && (
|
||||
{/* @if TARGET='web' */}
|
||||
<Page>
|
||||
<Tabs onChange={onTabChange} index={tabIndex}>
|
||||
<TabList className="tabs__list--collection-edit-page">
|
||||
<Tab>{__('LBRY Credits')}</Tab>
|
||||
<Tab>{__('Account History')}</Tab>
|
||||
<Tab>{__('Payment History')}</Tab>
|
||||
<Tab>{__('Balance')}</Tab>
|
||||
<Tab>{__('Transactions')}</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
{/* balances for lbc and fiat */}
|
||||
<TabPanel>
|
||||
<WalletBalance />
|
||||
</TabPanel>
|
||||
{/* transactions panel */}
|
||||
<TabPanel>
|
||||
<div className="section card-stack">
|
||||
<div className="lbc-transactions">
|
||||
|
|
@ -184,7 +102,6 @@ const WalletPage = (props: Props) => {
|
|||
<YrblWalletEmpty includeWalletLink />
|
||||
) : (
|
||||
<div className="card-stack">
|
||||
<WalletBalance />
|
||||
<TxoList search={search} />
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -193,26 +110,11 @@ const WalletPage = (props: Props) => {
|
|||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<div className="section card-stack">
|
||||
<WalletFiatBalance accountDetails={accountStatusResponse} />
|
||||
<WalletFiatAccountHistory transactions={accountTransactionResponse} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<div className="section card-stack">
|
||||
<WalletFiatPaymentBalance
|
||||
transactions={customerTransactions}
|
||||
accountDetails={accountStatusResponse}
|
||||
/>
|
||||
<WalletFiatPaymentHistory transactions={customerTransactions} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Page>
|
||||
)}
|
||||
{!stripeEnvironment && (
|
||||
{/* @endif */}
|
||||
{/* @if TARGET='app' */}
|
||||
<Page>
|
||||
{loading && (
|
||||
<div className="main--empty">
|
||||
|
|
@ -225,14 +127,13 @@ const WalletPage = (props: Props) => {
|
|||
<YrblWalletEmpty includeWalletLink />
|
||||
) : (
|
||||
<div className="card-stack">
|
||||
<WalletBalance />
|
||||
<TxoList search={search} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Page>
|
||||
)}
|
||||
{/* @endif */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,3 +10,21 @@
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.txo__table_header {
|
||||
width: 124px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// displaying fiat transactions (incoming/outgoing) in wallet
|
||||
.wallet__fiat-transactions {
|
||||
text-align: center;
|
||||
margin-top: 13px;
|
||||
margin-bottom: 9px;
|
||||
font-size: 13px;
|
||||
color: rgb(171, 171, 171);
|
||||
}
|
||||
|
||||
.txo__radios_container, .txo__radios, .txo__radios_fieldset {
|
||||
display: inline !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue