2020-04-10 19:31:36 +02:00
|
|
|
// @flow
|
2019-06-17 22:32:38 +02:00
|
|
|
import React from 'react';
|
2021-08-13 19:59:43 +02:00
|
|
|
import { useHistory } from 'react-router';
|
2019-06-17 22:32:38 +02:00
|
|
|
import WalletBalance from 'component/walletBalance';
|
2021-08-13 19:59:43 +02:00
|
|
|
import WalletFiatBalance from 'component/walletFiatBalance';
|
|
|
|
import WalletFiatPaymentBalance from 'component/walletFiatPaymentBalance';
|
|
|
|
import WalletFiatAccountHistory from 'component/walletFiatAccountHistory';
|
|
|
|
import WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory';
|
2020-04-10 19:31:36 +02:00
|
|
|
import TxoList from 'component/txoList';
|
2019-06-17 22:32:38 +02:00
|
|
|
import Page from 'component/page';
|
2021-08-13 19:59:43 +02:00
|
|
|
import * as PAGES from 'constants/pages';
|
2020-06-01 19:03:19 +02:00
|
|
|
import Spinner from 'component/spinner';
|
2020-08-26 19:19:03 +02:00
|
|
|
import YrblWalletEmpty from 'component/yrblWalletEmpty';
|
2021-08-13 19:59:43 +02:00
|
|
|
import { Lbryio } from 'lbryinc';
|
|
|
|
import { STRIPE_PUBLIC_KEY } from 'config';
|
|
|
|
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs';
|
|
|
|
|
|
|
|
const TAB_QUERY = 'tab';
|
|
|
|
|
|
|
|
const TABS = {
|
|
|
|
LBRY_CREDITS_TAB: 'credits',
|
|
|
|
ACCOUNT_HISTORY: 'fiat-account-history',
|
|
|
|
PAYMENT_HISTORY: 'fiat-payment-history',
|
|
|
|
};
|
|
|
|
|
|
|
|
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';
|
|
|
|
}
|
2019-06-17 22:32:38 +02:00
|
|
|
|
2020-04-10 19:31:36 +02:00
|
|
|
type Props = {
|
2021-07-03 20:32:06 +02:00
|
|
|
history: { action: string, push: (string) => void, replace: (string) => void },
|
2020-04-10 19:31:36 +02:00
|
|
|
location: { search: string, pathname: string },
|
2021-02-05 18:46:07 +01:00
|
|
|
totalBalance: ?number,
|
2020-04-10 19:31:36 +02:00
|
|
|
};
|
2019-06-17 22:32:38 +02:00
|
|
|
|
2020-04-10 19:31:36 +02:00
|
|
|
const WalletPage = (props: Props) => {
|
2021-08-13 19:59:43 +02:00
|
|
|
const {
|
|
|
|
location: { search },
|
|
|
|
push,
|
|
|
|
} = useHistory();
|
|
|
|
|
|
|
|
// @if TARGET='web'
|
|
|
|
const urlParams = new URLSearchParams(search);
|
|
|
|
|
|
|
|
const currentView = urlParams.get(TAB_QUERY) || TABS.LBRY_CREDITS_TAB;
|
|
|
|
|
|
|
|
let tabIndex;
|
|
|
|
switch (currentView) {
|
|
|
|
case TABS.LBRY_CREDITS_TAB:
|
|
|
|
tabIndex = 0;
|
|
|
|
break;
|
|
|
|
case TABS.PAYMENT_HISTORY:
|
|
|
|
tabIndex = 1;
|
|
|
|
break;
|
|
|
|
case TABS.ACCOUNT_HISTORY:
|
|
|
|
tabIndex = 2;
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
tabIndex = 0;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
function onTabChange(newTabIndex) {
|
|
|
|
let url = `/$/${PAGES.WALLET}?`;
|
|
|
|
|
|
|
|
if (newTabIndex === 0) {
|
|
|
|
url += `${TAB_QUERY}=${TABS.LBRY_CREDITS_TAB}`;
|
|
|
|
} else if (newTabIndex === 1) {
|
|
|
|
url += `${TAB_QUERY}=${TABS.PAYMENT_HISTORY}`;
|
|
|
|
} else if (newTabIndex === 2) {
|
|
|
|
url += `${TAB_QUERY}=${TABS.ACCOUNT_HISTORY}`;
|
|
|
|
} else {
|
|
|
|
url += `${TAB_QUERY}=${TABS.LBRY_CREDITS_TAB}`;
|
|
|
|
}
|
|
|
|
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 {
|
|
|
|
const response = await getAccountStatus();
|
|
|
|
|
|
|
|
setAccountStatusResponse(response);
|
|
|
|
|
|
|
|
// TODO: some weird naming clash hence getAccountTransactionsa
|
|
|
|
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
|
2021-08-13 20:22:33 +02:00
|
|
|
let customerTransactionResponse = await getPaymentHistory();
|
|
|
|
|
|
|
|
customerTransactionResponse.reverse();
|
2021-08-13 19:59:43 +02:00
|
|
|
|
|
|
|
setCustomerTransactions(customerTransactionResponse);
|
|
|
|
} catch (err) {
|
|
|
|
console.log(err);
|
|
|
|
}
|
|
|
|
})();
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
// @endif
|
|
|
|
|
|
|
|
const { totalBalance } = props;
|
2021-02-05 18:46:07 +01:00
|
|
|
const showIntro = totalBalance === 0;
|
|
|
|
const loading = totalBalance === undefined;
|
2020-04-10 19:31:36 +02:00
|
|
|
|
|
|
|
return (
|
2021-08-13 19:59:43 +02:00
|
|
|
<>
|
|
|
|
{/* @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>
|
|
|
|
</TabList>
|
|
|
|
<TabPanels>
|
|
|
|
<TabPanel>
|
|
|
|
<div className="section card-stack">
|
|
|
|
<div className="lbc-transactions">
|
|
|
|
{/* if the transactions are loading */}
|
|
|
|
{loading && (
|
|
|
|
<div className="main--empty">
|
|
|
|
<Spinner delayed />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{/* when the transactions are finished loading */}
|
|
|
|
{!loading && (
|
|
|
|
<>
|
|
|
|
{showIntro ? (
|
|
|
|
<YrblWalletEmpty includeWalletLink />
|
|
|
|
) : (
|
|
|
|
<div className="card-stack">
|
|
|
|
<WalletBalance />
|
|
|
|
<TxoList search={search} />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</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>
|
|
|
|
{/* @endif */}
|
|
|
|
{/* @if TARGET='app' */}
|
|
|
|
<Page>
|
|
|
|
{loading && (
|
|
|
|
<div className="main--empty">
|
|
|
|
<Spinner delayed />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{!loading && (
|
|
|
|
<>
|
|
|
|
{showIntro ? (
|
|
|
|
<YrblWalletEmpty includeWalletLink />
|
|
|
|
) : (
|
|
|
|
<div className="card-stack">
|
|
|
|
<WalletBalance />
|
|
|
|
<TxoList search={search} />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</Page>
|
|
|
|
{/* @endif */}
|
|
|
|
</>
|
2020-04-10 19:31:36 +02:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2021-08-13 19:59:43 +02:00
|
|
|
export default WalletPage;
|