lbry-desktop/ui/page/wallet/view.jsx

236 lines
6.5 KiB
React
Raw Normal View History

// @flow
2019-06-17 22:32:38 +02:00
import React from 'react';
Move transactions from Settings to Wallet (#6871) * remove unused conditional get stuff ready for merge bugfix and cleanup requested changes fixing flow errors fix last flow error and touchups fiat and lbc tabs coming along support setting currency as the default tab via query param add wallet fiat balance fixing naming add fiat transactions using es6 to populate data should be fine but keeps crashing transaction listing working add no transactions thing about to add a third tab add third tab add card last 4 to transaction history some renaming show payments successfully show filler for subscriptions display if no transactions or subs working but in the wrong component approaching something thats working showing total tipped amount about to add last couple features cleanup More touchups adding last features calculate the total amount of unique creators tipped couple touchups remove transaction listings from settings add view transactions buttons small optimization add subscriptions section fix lot of linting errors and make command more userful * some copy changes * about to add last couple changes * update still require verification * fix button spacing * hide subscriptions sections and fix links * cleanups before merging * more cleanup * cleanup with last four fix * changing tab functionality * bugfix and fix presentation of cards * fix transactions bug * change order and remove logs * remove unused code in account * more linter fixes * update account balance presentation * fix flow errors
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';
Move transactions from Settings to Wallet (#6871) * remove unused conditional get stuff ready for merge bugfix and cleanup requested changes fixing flow errors fix last flow error and touchups fiat and lbc tabs coming along support setting currency as the default tab via query param add wallet fiat balance fixing naming add fiat transactions using es6 to populate data should be fine but keeps crashing transaction listing working add no transactions thing about to add a third tab add third tab add card last 4 to transaction history some renaming show payments successfully show filler for subscriptions display if no transactions or subs working but in the wrong component approaching something thats working showing total tipped amount about to add last couple features cleanup More touchups adding last features calculate the total amount of unique creators tipped couple touchups remove transaction listings from settings add view transactions buttons small optimization add subscriptions section fix lot of linting errors and make command more userful * some copy changes * about to add last couple changes * update still require verification * fix button spacing * hide subscriptions sections and fix links * cleanups before merging * more cleanup * cleanup with last four fix * changing tab functionality * bugfix and fix presentation of cards * fix transactions bug * change order and remove logs * remove unused code in account * more linter fixes * update account balance presentation * fix flow errors
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';
import TxoList from 'component/txoList';
2019-06-17 22:32:38 +02:00
import Page from 'component/page';
Move transactions from Settings to Wallet (#6871) * remove unused conditional get stuff ready for merge bugfix and cleanup requested changes fixing flow errors fix last flow error and touchups fiat and lbc tabs coming along support setting currency as the default tab via query param add wallet fiat balance fixing naming add fiat transactions using es6 to populate data should be fine but keeps crashing transaction listing working add no transactions thing about to add a third tab add third tab add card last 4 to transaction history some renaming show payments successfully show filler for subscriptions display if no transactions or subs working but in the wrong component approaching something thats working showing total tipped amount about to add last couple features cleanup More touchups adding last features calculate the total amount of unique creators tipped couple touchups remove transaction listings from settings add view transactions buttons small optimization add subscriptions section fix lot of linting errors and make command more userful * some copy changes * about to add last couple changes * update still require verification * fix button spacing * hide subscriptions sections and fix links * cleanups before merging * more cleanup * cleanup with last four fix * changing tab functionality * bugfix and fix presentation of cards * fix transactions bug * change order and remove logs * remove unused code in account * more linter fixes * update account balance presentation * fix flow errors
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';
import YrblWalletEmpty from 'component/yrblWalletEmpty';
Move transactions from Settings to Wallet (#6871) * remove unused conditional get stuff ready for merge bugfix and cleanup requested changes fixing flow errors fix last flow error and touchups fiat and lbc tabs coming along support setting currency as the default tab via query param add wallet fiat balance fixing naming add fiat transactions using es6 to populate data should be fine but keeps crashing transaction listing working add no transactions thing about to add a third tab add third tab add card last 4 to transaction history some renaming show payments successfully show filler for subscriptions display if no transactions or subs working but in the wrong component approaching something thats working showing total tipped amount about to add last couple features cleanup More touchups adding last features calculate the total amount of unique creators tipped couple touchups remove transaction listings from settings add view transactions buttons small optimization add subscriptions section fix lot of linting errors and make command more userful * some copy changes * about to add last couple changes * update still require verification * fix button spacing * hide subscriptions sections and fix links * cleanups before merging * more cleanup * cleanup with last four fix * changing tab functionality * bugfix and fix presentation of cards * fix transactions bug * change order and remove logs * remove unused code in account * more linter fixes * update account balance presentation * fix flow errors
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
type Props = {
2021-07-03 20:32:06 +02:00
history: { action: string, push: (string) => void, replace: (string) => void },
location: { search: string, pathname: string },
totalBalance: ?number,
};
2019-06-17 22:32:38 +02:00
const WalletPage = (props: Props) => {
Move transactions from Settings to Wallet (#6871) * remove unused conditional get stuff ready for merge bugfix and cleanup requested changes fixing flow errors fix last flow error and touchups fiat and lbc tabs coming along support setting currency as the default tab via query param add wallet fiat balance fixing naming add fiat transactions using es6 to populate data should be fine but keeps crashing transaction listing working add no transactions thing about to add a third tab add third tab add card last 4 to transaction history some renaming show payments successfully show filler for subscriptions display if no transactions or subs working but in the wrong component approaching something thats working showing total tipped amount about to add last couple features cleanup More touchups adding last features calculate the total amount of unique creators tipped couple touchups remove transaction listings from settings add view transactions buttons small optimization add subscriptions section fix lot of linting errors and make command more userful * some copy changes * about to add last couple changes * update still require verification * fix button spacing * hide subscriptions sections and fix links * cleanups before merging * more cleanup * cleanup with last four fix * changing tab functionality * bugfix and fix presentation of cards * fix transactions bug * change order and remove logs * remove unused code in account * more linter fixes * update account balance presentation * fix flow errors
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();
Move transactions from Settings to Wallet (#6871) * remove unused conditional get stuff ready for merge bugfix and cleanup requested changes fixing flow errors fix last flow error and touchups fiat and lbc tabs coming along support setting currency as the default tab via query param add wallet fiat balance fixing naming add fiat transactions using es6 to populate data should be fine but keeps crashing transaction listing working add no transactions thing about to add a third tab add third tab add card last 4 to transaction history some renaming show payments successfully show filler for subscriptions display if no transactions or subs working but in the wrong component approaching something thats working showing total tipped amount about to add last couple features cleanup More touchups adding last features calculate the total amount of unique creators tipped couple touchups remove transaction listings from settings add view transactions buttons small optimization add subscriptions section fix lot of linting errors and make command more userful * some copy changes * about to add last couple changes * update still require verification * fix button spacing * hide subscriptions sections and fix links * cleanups before merging * more cleanup * cleanup with last four fix * changing tab functionality * bugfix and fix presentation of cards * fix transactions bug * change order and remove logs * remove unused code in account * more linter fixes * update account balance presentation * fix flow errors
2021-08-13 19:59:43 +02:00
setCustomerTransactions(customerTransactionResponse);
} catch (err) {
console.log(err);
}
})();
}, []);
// @endif
const { totalBalance } = props;
const showIntro = totalBalance === 0;
const loading = totalBalance === undefined;
return (
Move transactions from Settings to Wallet (#6871) * remove unused conditional get stuff ready for merge bugfix and cleanup requested changes fixing flow errors fix last flow error and touchups fiat and lbc tabs coming along support setting currency as the default tab via query param add wallet fiat balance fixing naming add fiat transactions using es6 to populate data should be fine but keeps crashing transaction listing working add no transactions thing about to add a third tab add third tab add card last 4 to transaction history some renaming show payments successfully show filler for subscriptions display if no transactions or subs working but in the wrong component approaching something thats working showing total tipped amount about to add last couple features cleanup More touchups adding last features calculate the total amount of unique creators tipped couple touchups remove transaction listings from settings add view transactions buttons small optimization add subscriptions section fix lot of linting errors and make command more userful * some copy changes * about to add last couple changes * update still require verification * fix button spacing * hide subscriptions sections and fix links * cleanups before merging * more cleanup * cleanup with last four fix * changing tab functionality * bugfix and fix presentation of cards * fix transactions bug * change order and remove logs * remove unused code in account * more linter fixes * update account balance presentation * fix flow errors
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 */}
</>
);
};
Move transactions from Settings to Wallet (#6871) * remove unused conditional get stuff ready for merge bugfix and cleanup requested changes fixing flow errors fix last flow error and touchups fiat and lbc tabs coming along support setting currency as the default tab via query param add wallet fiat balance fixing naming add fiat transactions using es6 to populate data should be fine but keeps crashing transaction listing working add no transactions thing about to add a third tab add third tab add card last 4 to transaction history some renaming show payments successfully show filler for subscriptions display if no transactions or subs working but in the wrong component approaching something thats working showing total tipped amount about to add last couple features cleanup More touchups adding last features calculate the total amount of unique creators tipped couple touchups remove transaction listings from settings add view transactions buttons small optimization add subscriptions section fix lot of linting errors and make command more userful * some copy changes * about to add last couple changes * update still require verification * fix button spacing * hide subscriptions sections and fix links * cleanups before merging * more cleanup * cleanup with last four fix * changing tab functionality * bugfix and fix presentation of cards * fix transactions bug * change order and remove logs * remove unused code in account * more linter fixes * update account balance presentation * fix flow errors
2021-08-13 19:59:43 +02:00
export default WalletPage;