// @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'; let stripeEnvironment = getStripeEnvironment(); type Props = { accountDetails: any, transactions: any, }; 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() { return Lbryio.call( 'customer', 'status', { environment: stripeEnvironment, }, 'post' ); } // TODO: this is actually incorrect, last4 should be populated based on the transaction not the current customer details React.useEffect(() => { (async function () { const customerStatusResponse = await getCustomerStatus(); const lastFour = customerStatusResponse.PaymentMethods && customerStatusResponse.PaymentMethods.length && customerStatusResponse.PaymentMethods[0].card.last4; setLastFour(lastFour); })(); }, []); return ( <>
{accountTransactions && accountTransactions.map((transaction) => ( ))}
{__('Date')} {<>{__('Receiving Channel Name')}} {__('Tip Location')} {__('Amount (USD)')} {__('Card Last 4')} {__('Anonymous')}
{moment(transaction.created_at).format('LLL')} ${transaction.tipped_amount / 100} {lastFour} {transaction.private_tip ? 'Yes' : 'No'}
{(!accountTransactions || accountTransactions.length === 0) && (

No Transactions

)}
} /> ); }; export default WalletBalance;