LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

lint

Browse source
This commit is contained in:
zeppi 2021-07-17 12:08:53 -04:00 committed by jessopb
parent 7bb5df97fd
commit 27aa4e4a22
9 changed files with 196 additions and 195 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
flow-typed/Comment.js vendored
View file

@ -14,6 +14,7 @@ declare type Comment = {
is_pinned: boolean, is_pinned: boolean,
support_amount: number, support_amount: number,
replies: number, // number of direct replies (i.e. excluding nested replies). replies: number, // number of direct replies (i.e. excluding nested replies).
is_fiat?: boolean,
}; };
declare type PerChannelSettings = { declare type PerChannelSettings = {

4
ui/component/common/credit-amount.jsx
View file

@ -18,7 +18,7 @@ type Props = {
size?: number, size?: number,
superChat?: boolean, superChat?: boolean,
superChatLight?: boolean, superChatLight?: boolean,
isFiat?: boolean isFiat?: boolean,
}; };
class CreditAmount extends React.PureComponent<Props> { class CreditAmount extends React.PureComponent<Props> {
@ -75,7 +75,7 @@ class CreditAmount extends React.PureComponent<Props> {
if (showLBC && !isFiat) { if (showLBC && !isFiat) {
amountText = <LbcSymbol postfix={amountText} size={size} />; amountText = <LbcSymbol postfix={amountText} size={size} />;
} else if (showLBC && isFiat) { } else if (showLBC && isFiat) {
amountText = <p> ${(Math.round(amountText * 100) / 100).toFixed(2)}</p>; amountText = <p> ${(Math.round(Number(amountText) * 100) / 100).toFixed(2)}</p>;
} }
if (fee) { if (fee) {

4
ui/component/stripeAccountConnection/index.js
View file

@ -8,6 +8,6 @@ const select = (state) => ({
user: selectUser(state), user: selectUser(state),
}); });
const perform = (dispatch) => ({}); // const perform = (dispatch) => ({});
export default withRouter(connect(select, perform)(StripeAccountConnection)); export default withRouter(connect(select)(StripeAccountConnection));

2
ui/component/walletSpendableBalanceHelp/index.js
View file

@ -2,7 +2,7 @@ import { connect } from 'react-redux';
import { selectBalance } from 'lbry-redux'; import { selectBalance } from 'lbry-redux';
import WalletSpendableBalanceHelp from './view'; import WalletSpendableBalanceHelp from './view';
const select = (state, props) => ({ const select = (state) => ({
balance: selectBalance(state), balance: selectBalance(state),
}); });

2
ui/component/walletTipAmountSelector/index.js
View file

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { makeSelectClaimForUri, selectBalance } from 'lbry-redux'; import { selectBalance } from 'lbry-redux';
import WalletTipAmountSelector from './view'; import WalletTipAmountSelector from './view';
import { selectUserVerifiedEmail } from 'redux/selectors/user'; import { selectUserVerifiedEmail } from 'redux/selectors/user';

48
ui/component/walletTipAmountSelector/view.jsx
View file

@ -33,10 +33,11 @@ type Props = {
claim: StreamClaim, claim: StreamClaim,
uri: string, uri: string,
onTipErrorChange: (string) => void, onTipErrorChange: (string) => void,
activeTab: string,
}; };
function WalletTipAmountSelector(props: Props) { function WalletTipAmountSelector(props: Props) {
const { balance, amount, onChange, activeTab, isAuthenticated, claim, uri, onTipErrorChange } = props; const { balance, amount, onChange, activeTab, claim, onTipErrorChange } = props;
const [useCustomTip, setUseCustomTip] = usePersistedState('comment-support:useCustomTip', false); const [useCustomTip, setUseCustomTip] = usePersistedState('comment-support:useCustomTip', false);
const [tipError, setTipError] = React.useState(); const [tipError, setTipError] = React.useState();
@ -106,19 +107,18 @@ function WalletTipAmountSelector(props: Props) {
setCanReceiveFiatTip(true); setCanReceiveFiatTip(true);
} }
}) })
.catch(function(error) { .catch(function (error) {
// console.log(error); // console.log(error);
}); });
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
// setHasSavedCard(false); // setHasSavedCard(false);
// setCanReceiveFiatTip(true); // setCanReceiveFiatTip(true);
const regexp = RegExp(/^(\d*([.]\d{0,8})?)$/); const regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
const validTipInput = regexp.test(String(amount)); const validTipInput = regexp.test(String(amount));
let tipError; let tipError = '';
if (amount === 0) { if (amount === 0) {
tipError = __('Amount must be a positive number'); tipError = __('Amount must be a positive number');
@ -196,49 +196,52 @@ function WalletTipAmountSelector(props: Props) {
)} )}
</div> </div>
{useCustomTip && activeTab === TAB_FIAT && !hasCardSaved && {useCustomTip && activeTab === TAB_FIAT && !hasCardSaved && (
<> <>
<div className="help"> <div className="help">
<span className="help--spendable"> <span className="help--spendable">
<Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card ')} button="link" /> To {__(' Tip Creators')} <Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card ')} button="link" /> To{' '}
{__(' Tip Creators')}
</span> </span>
</div> </div>
</> </>
} )}
{/* has card saved but cant creator cant receive tips */} {/* has card saved but cant creator cant receive tips */}
{useCustomTip && activeTab === TAB_FIAT && hasCardSaved && !canReceiveFiatTip && {useCustomTip && activeTab === TAB_FIAT && hasCardSaved && !canReceiveFiatTip && (
<> <>
<div className="help"> <div className="help">
<span className="help--spendable">Only select creators can receive tips at this time</span> <span className="help--spendable">Only select creators can receive tips at this time</span>
</div> </div>
</> </>
} )}
{/* has card saved but cant creator cant receive tips */} {/* has card saved but cant creator cant receive tips */}
{useCustomTip && activeTab === TAB_FIAT && hasCardSaved && canReceiveFiatTip && {useCustomTip && activeTab === TAB_FIAT && hasCardSaved && canReceiveFiatTip && (
<> <>
<div className="help"> <div className="help">
<span className="help--spendable">Send a tip directly from your attached card</span> <span className="help--spendable">Send a tip directly from your attached card</span>
</div> </div>
</> </>
} )}
{useCustomTip && ( {useCustomTip && (
<div className="comment__tip-input"> <div className="comment__tip-input">
<FormField <FormField
autoFocus autoFocus
name="tip-input" name="tip-input"
label={ activeTab === TAB_LBC ? label={
activeTab === TAB_LBC ? (
<React.Fragment> <React.Fragment>
{__('Custom support amount')}{' '} {__('Custom support amount')}{' '}
<I18nMessage tokens={{ lbc_balance: <CreditAmount precision={4} amount={balance} /> }}> <I18nMessage tokens={{ lbc_balance: <CreditAmount precision={4} amount={balance} /> }}>
(%lbc_balance% available) (%lbc_balance% available)
</I18nMessage> </I18nMessage>
</React.Fragment> </React.Fragment>
) : (
// TODO: add conditional based on hasSavedCard // TODO: add conditional based on hasSavedCard
: <> <></>
</> )
// <> // <>
// <div className=""> // <div className="">
@ -258,38 +261,37 @@ function WalletTipAmountSelector(props: Props) {
</div> </div>
)} )}
{/*// TODO: add conditional based on hasSavedCard*/}
{/* lbc tab */} {/* lbc tab */}
{activeTab === TAB_LBC && <WalletSpendableBalanceHelp />} {activeTab === TAB_LBC && <WalletSpendableBalanceHelp />}
{/* fiat button but no card saved */} {/* fiat button but no card saved */}
{!useCustomTip && activeTab === TAB_FIAT && !hasCardSaved && {!useCustomTip && activeTab === TAB_FIAT && !hasCardSaved && (
<> <>
<div className="help"> <div className="help">
<span className="help--spendable"> <span className="help--spendable">
<Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card ')} button="link" /> To {__(' Tip Creators')} <Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card ')} button="link" /> To{' '}
{__(' Tip Creators')}
</span> </span>
</div> </div>
</> </>
} )}
{/* has card saved but cant creator cant receive tips */} {/* has card saved but cant creator cant receive tips */}
{!useCustomTip && activeTab === TAB_FIAT && hasCardSaved && !canReceiveFiatTip && {!useCustomTip && activeTab === TAB_FIAT && hasCardSaved && !canReceiveFiatTip && (
<> <>
<div className="help"> <div className="help">
<span className="help--spendable">Only select creators can receive tips at this time</span> <span className="help--spendable">Only select creators can receive tips at this time</span>
</div> </div>
</> </>
} )}
{/* has card saved but cant creator cant receive tips */} {/* has card saved but cant creator cant receive tips */}
{!useCustomTip && activeTab === TAB_FIAT && hasCardSaved && canReceiveFiatTip && {!useCustomTip && activeTab === TAB_FIAT && hasCardSaved && canReceiveFiatTip && (
<> <>
<div className="help"> <div className="help">
<span className="help--spendable">Send a tip directly from your attached card</span> <span className="help--spendable">Send a tip directly from your attached card</span>
</div> </div>
</> </>
} )}
</> </>
); );
} }

4
ui/page/settingsStripeAccount/index.js
View file

@ -8,6 +8,6 @@ const select = (state) => ({
user: selectUser(state), user: selectUser(state),
}); });
const perform = (dispatch) => ({}); // const perform = (dispatch) => ({});
export default withRouter(connect(select, perform)(StripeAccountConnection)); export default withRouter(connect(select)(StripeAccountConnection));

33
ui/page/settingsStripeAccount/view.jsx
View file

@ -44,6 +44,7 @@ type State = {
accountNotConfirmedButReceivedTips: boolean, accountNotConfirmedButReceivedTips: boolean,
unpaidBalance: number, unpaidBalance: number,
pageTitle: string, pageTitle: string,
accountTransactions: any, // define this type
}; };
class StripeAccountConnection extends React.Component<Props, State> { class StripeAccountConnection extends React.Component<Props, State> {
@ -123,9 +124,8 @@ class StripeAccountConnection extends React.Component<Props, State> {
environment: stripeEnvironment, environment: stripeEnvironment,
}, },
'post' 'post'
) ).then((accountListResponse: any) => {
.then((accountListResponse) => { // TODO type this
that.setState({ that.setState({
accountTransactions: accountListResponse, accountTransactions: accountListResponse,
}); });
@ -227,16 +227,15 @@ class StripeAccountConnection extends React.Component<Props, State> {
<div> <div>
<br /> <br />
<h3> <h3>
{__( {__('Your pending account balance is $%balance% USD.', { balance: unpaidBalance / 100 })}
'Your pending account balance is $%balance% USD.',
{ balance: unpaidBalance / 100 }
)}
</h3> </h3>
</div> </div>
) : ( ) : (
<div> <div>
<br /> <br />
<h3>{__('Your account balance is $0 USD. When you receive a tip you will see it here.')}</h3> <h3>
{__('Your account balance is $0 USD. When you receive a tip you will see it here.')}
</h3>
</div> </div>
)} )}
</div> </div>
@ -251,16 +250,15 @@ class StripeAccountConnection extends React.Component<Props, State> {
<div> <div>
<br /> <br />
<h3> <h3>
{__( {__('Your pending account balance is $%balance% USD.', { balance: unpaidBalance / 100 })}
'Your pending account balance is $%balance% USD.',
{ balance: unpaidBalance / 100 }
)}
</h3> </h3>
</div> </div>
<br /> <br />
<div> <div>
<h3> <h3>
{__('Connect your bank account to be able to cash your pending balance out to your account.')} {__(
'Connect your bank account to be able to cash your pending balance out to your account.'
)}
</h3> </h3>
</div> </div>
<div className="section__actions"> <div className="section__actions">
@ -277,10 +275,8 @@ class StripeAccountConnection extends React.Component<Props, State> {
/> />
<br /> <br />
{/* customer already has transactions */} {/* customer already has transactions */}
{accountTransactions && accountTransactions.length > 0 && ( {accountTransactions && accountTransactions.length > 0 && (
<Card <Card
title={__('Tip History')} title={__('Tip History')}
body={ body={
@ -315,9 +311,12 @@ class StripeAccountConnection extends React.Component<Props, State> {
<Button <Button
className="stripe__card-link-text" className="stripe__card-link-text"
navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id} navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
label={transaction.channel_claim_id === transaction.source_claim_id ? 'Channel Page' : 'File Page'} label={
transaction.channel_claim_id === transaction.source_claim_id
? 'Channel Page'
: 'File Page'
}
button="link" button="link"
/> />
</td> </td>
<td>${transaction.tipped_amount / 100}</td> <td>${transaction.tipped_amount / 100}</td>

75
ui/page/settingsStripeCard/view.jsx
View file

@ -55,11 +55,11 @@ class SettingsStripeCard extends React.Component<Props, State> {
} }
componentDidMount() { componentDidMount() {
var that = this; let that = this;
console.log(this.props); console.log(this.props);
var doToast = this.props.doToast; let doToast = this.props.doToast;
const script = document.createElement('script'); const script = document.createElement('script');
script.src = 'https://js.stripe.com/v3/'; script.src = 'https://js.stripe.com/v3/';
@ -69,14 +69,14 @@ class SettingsStripeCard extends React.Component<Props, State> {
document.body.appendChild(script); document.body.appendChild(script);
// public key of the stripe account // public key of the stripe account
var publicKey = STRIPE_PUBLIC_KEY; let publicKey = STRIPE_PUBLIC_KEY;
// client secret of the SetupIntent (don't share with anyone but customer) // client secret of the SetupIntent (don't share with anyone but customer)
var clientSecret = ''; let clientSecret = '';
// setting a timeout to let the client secret populate // setting a timeout to let the client secret populate
// TODO: fix this, should be a cleaner way // TODO: fix this, should be a cleaner way
setTimeout(function() { setTimeout(function () {
// check if customer has card setup already // check if customer has card setup already
Lbryio.call( Lbryio.call(
'customer', 'customer',
@ -89,20 +89,20 @@ class SettingsStripeCard extends React.Component<Props, State> {
.then((customerStatusResponse) => { .then((customerStatusResponse) => {
// user has a card saved if their defaultPaymentMethod has an id // user has a card saved if their defaultPaymentMethod has an id
const defaultPaymentMethod = customerStatusResponse.Customer.invoice_settings.default_payment_method; const defaultPaymentMethod = customerStatusResponse.Customer.invoice_settings.default_payment_method;
var userHasAlreadySetupPayment = Boolean(defaultPaymentMethod && defaultPaymentMethod.id); let userHasAlreadySetupPayment = Boolean(defaultPaymentMethod && defaultPaymentMethod.id);
// show different frontend if user already has card // show different frontend if user already has card
if (userHasAlreadySetupPayment) { if (userHasAlreadySetupPayment) {
var card = customerStatusResponse.PaymentMethods[0].card; let card = customerStatusResponse.PaymentMethods[0].card;
var customer = customerStatusResponse.Customer; let customer = customerStatusResponse.Customer;
var topOfDisplay = customer.email.split('@')[0]; let topOfDisplay = customer.email.split('@')[0];
var bottomOfDisplay = '@' + customer.email.split('@')[1]; let bottomOfDisplay = '@' + customer.email.split('@')[1];
console.log(customerStatusResponse.Customer); console.log(customerStatusResponse.Customer);
var cardDetails = { let cardDetails = {
brand: card.brand, brand: card.brand,
expiryYear: card.exp_year, expiryYear: card.exp_year,
expiryMonth: card.exp_month, expiryMonth: card.exp_month,
@ -159,7 +159,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
}); });
// if the status call fails, either an actual error or need to run setup first // if the status call fails, either an actual error or need to run setup first
}) })
.catch(function(error) { .catch(function (error) {
console.log(error); console.log(error);
// errorString passed from the API (with a 403 error) // errorString passed from the API (with a 403 error)
@ -189,7 +189,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
setupStripe(); setupStripe();
}); });
} else if (error === 'internal_apis_down') { } else if (error === 'internal_apis_down') {
var displayString = 'There was an error from the server, please let support know' var displayString = 'There was an error from the server, please let support know';
doToast({ message: displayString, isError: true }); doToast({ message: displayString, isError: true });
} else { } else {
console.log('Unseen before error'); console.log('Unseen before error');
@ -197,11 +197,10 @@ class SettingsStripeCard extends React.Component<Props, State> {
}); });
}, 250); }, 250);
function setupStripe() { function setupStripe() {
// TODO: have to fix this, using so that the script is available // TODO: have to fix this, using so that the script is available
setTimeout(function() { setTimeout(function () {
var stripeElements = function(publicKey, setupIntent) { var stripeElements = function (publicKey, setupIntent) {
var stripe = Stripe(publicKey); var stripe = Stripe(publicKey);
var elements = stripe.elements(); var elements = stripe.elements();
@ -223,17 +222,17 @@ class SettingsStripeCard extends React.Component<Props, State> {
card.mount('#card-element'); card.mount('#card-element');
// Element focus ring // Element focus ring
card.on('focus', function() { card.on('focus', function () {
var el = document.getElementById('card-element'); var el = document.getElementById('card-element');
el.classList.add('focused'); el.classList.add('focused');
}); });
card.on('blur', function() { card.on('blur', function () {
var el = document.getElementById('card-element'); var el = document.getElementById('card-element');
el.classList.remove('focused'); el.classList.remove('focused');
}); });
card.on('ready', function() { card.on('ready', function () {
card.focus(); card.focus();
}); });
@ -260,7 +259,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
billing_details: { email: email }, billing_details: { email: email },
}, },
}) })
.then(function(result) { .then(function (result) {
if (result.error) { if (result.error) {
console.log(result); console.log(result);
@ -277,7 +276,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
// Handle payment submission when user clicks the pay button. // Handle payment submission when user clicks the pay button.
var button = document.getElementById('submit'); var button = document.getElementById('submit');
button.addEventListener('click', function(event) { button.addEventListener('click', function (event) {
submitForm(event); submitForm(event);
}); });
@ -294,7 +293,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
stripeElements(publicKey, clientSecret); stripeElements(publicKey, clientSecret);
// Show a spinner on payment submission // Show a spinner on payment submission
var changeLoadingState = function(isLoading) { var changeLoadingState = function (isLoading) {
if (isLoading) { if (isLoading) {
// $FlowFixMe // $FlowFixMe
document.querySelector('button').disabled = true; document.querySelector('button').disabled = true;
@ -313,8 +312,8 @@ class SettingsStripeCard extends React.Component<Props, State> {
}; };
// shows a success / error message when the payment is complete // shows a success / error message when the payment is complete
var orderComplete = function(stripe, clientSecret) { var orderComplete = function (stripe, clientSecret) {
stripe.retrieveSetupIntent(clientSecret).then(function(result) { stripe.retrieveSetupIntent(clientSecret).then(function (result) {
Lbryio.call( Lbryio.call(
'customer', 'customer',
'status', 'status',
@ -323,14 +322,14 @@ class SettingsStripeCard extends React.Component<Props, State> {
}, },
'post' 'post'
).then((customerStatusResponse) => { ).then((customerStatusResponse) => {
var card = customerStatusResponse.PaymentMethods[0].card; let card = customerStatusResponse.PaymentMethods[0].card;
var customer = customerStatusResponse.Customer; let customer = customerStatusResponse.Customer;
var topOfDisplay = customer.email.split('@')[0]; let topOfDisplay = customer.email.split('@')[0];
var bottomOfDisplay = '@' + customer.email.split('@')[1]; let bottomOfDisplay = '@' + customer.email.split('@')[1];
var cardDetails = { let cardDetails = {
brand: card.brand, brand: card.brand,
expiryYear: card.exp_year, expiryYear: card.exp_year,
expiryMonth: card.exp_month, expiryMonth: card.exp_month,
@ -356,17 +355,16 @@ class SettingsStripeCard extends React.Component<Props, State> {
} }
} }
render() { render() {
var that = this; let that = this;
function setAsConfirmingCard(){ function setAsConfirmingCard() {
that.setState({ that.setState({
currentFlowStage: 'confirmingCard', currentFlowStage: 'confirmingCard',
}) });
} }
const { scriptFailedToLoad, doOpenModal, openModal } = this.props; const { scriptFailedToLoad, openModal } = this.props;
const { currentFlowStage, customerTransactions, pageTitle, userCardDetails, paymentMethodId } = this.state; const { currentFlowStage, customerTransactions, pageTitle, userCardDetails, paymentMethodId } = this.state;
@ -442,7 +440,6 @@ class SettingsStripeCard extends React.Component<Props, State> {
subtitle={__('You have not sent any tips yet. When you do they will appear here. ')} subtitle={__('You have not sent any tips yet. When you do they will appear here. ')}
/> />
)} )}
</div> </div>
)} )}
@ -480,9 +477,12 @@ class SettingsStripeCard extends React.Component<Props, State> {
<Button <Button
className="stripe__card-link-text" className="stripe__card-link-text"
navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id} navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
label={transaction.channel_claim_id === transaction.source_claim_id ? 'Channel Page' : 'File Page'} label={
transaction.channel_claim_id === transaction.source_claim_id
? 'Channel Page'
: 'File Page'
}
button="link" button="link"
/> />
</td> </td>
<td>${transaction.tipped_amount / 100}</td> <td>${transaction.tipped_amount / 100}</td>
@ -496,7 +496,6 @@ class SettingsStripeCard extends React.Component<Props, State> {
} }
/> />
)} )}
</Page> </Page>
); );
} }