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

Chore desktop cleanup (#6896)

Browse source 
* some desktop cleanup

* stripe environment

* wallet tabs

* fix

* old copy

* copy

* getClaimTypeText

* appstrings
This commit is contained in:
jessopb 2021-08-17 18:34:16 -04:00 committed by GitHub
parent 4688b4bf58
commit bd973289b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 464 additions and 448 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.env.defaults
View file

@ -19,7 +19,7 @@ THUMBNAIL_CDN_URL=https://image-processor.vanwanet.com/optimize/
WELCOME_VERSION=1.0 WELCOME_VERSION=1.0
# STRIPE # STRIPE
STRIPE_PUBLIC_KEY='pk_test_NoL1JWL7i1ipfhVId5KfDZgo' # STRIPE_PUBLIC_KEY='pk_test_NoL1JWL7i1ipfhVId5KfDZgo'
# Analytics # Analytics
MATOMO_URL=https://analytics.lbry.com/ MATOMO_URL=https://analytics.lbry.com/

3
static/app-strings.json
View file

@ -2090,5 +2090,8 @@
"Expand Comments": "Expand Comments", "Expand Comments": "Expand Comments",
"Expand": "Expand", "Expand": "Expand",
"Load More": "Load More", "Load More": "Load More",
"Collection": "Collection",
"%channelName% isn't live right now, but the chat is! Check back later to watch the stream.": "%channelName% isn't live right now, but the chat is! Check back later to watch the stream.",
"Review": "Review",
"--end--": "--end--" "--end--": "--end--"
} }

31
ui/component/commentCreate/view.jsx
View file

@ -1,6 +1,6 @@
// @flow // @flow
import type { ElementRef } from 'react'; import type { ElementRef } from 'react';
import { SIMPLE_SITE, STRIPE_PUBLIC_KEY } from 'config'; import { SIMPLE_SITE } from 'config';
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import React from 'react'; import React from 'react';
@ -21,12 +21,8 @@ import Empty from 'component/common/empty';
import { getChannelIdFromClaim } from 'util/claim'; import { getChannelIdFromClaim } from 'util/claim';
import { Lbryio } from 'lbryinc'; import { Lbryio } from 'lbryinc';
let stripeEnvironment = 'test'; import { getStripeEnvironment } from 'util/stripe';
// if the key contains pk_live it's a live key let stripeEnvironment = getStripeEnvironment();
// 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';
}
const TAB_FIAT = 'TabFiat'; const TAB_FIAT = 'TabFiat';
const TAB_LBC = 'TabLBC'; const TAB_LBC = 'TabLBC';
@ -245,10 +241,13 @@ export function CommentCreate(props: Props) {
}, 1500); }, 1500);
doToast({ doToast({
message: __("You sent %tipAmount% LBRY Credits as a tip to %tipChannelName%, I'm sure they appreciate it!", { message: __(
"You sent %tipAmount% LBRY Credits as a tip to %tipChannelName%, I'm sure they appreciate it!",
{
tipAmount: tipAmount, // force show decimal places tipAmount: tipAmount, // force show decimal places
tipChannelName, tipChannelName,
}), }
),
}); });
setSuccessTip({ txid, tipAmount }); setSuccessTip({ txid, tipAmount });
@ -265,7 +264,8 @@ export function CommentCreate(props: Props) {
Lbryio.call( Lbryio.call(
'customer', 'customer',
'tip', 'tip',
{ // round to deal with floating point precision {
// round to deal with floating point precision
amount: Math.round(100 * roundedAmount), // convert from dollars to cents amount: Math.round(100 * roundedAmount), // convert from dollars to cents
creator_channel_name: tipChannelName, // creator_channel_name creator_channel_name: tipChannelName, // creator_channel_name
creator_channel_claim_id: channelClaimId, creator_channel_claim_id: channelClaimId,
@ -387,12 +387,7 @@ export function CommentCreate(props: Props) {
} }
}} }}
> >
<FormField <FormField type="textarea" name={'comment_signup_prompt'} placeholder={__('Say something about this...')} />
type="textarea"
name={'comment_signup_prompt'}
placeholder={__('Say something about this...')}
label={isFetchingChannels ? __('Comment') : undefined}
/>
<div className="section__actions--no-margin"> <div className="section__actions--no-margin">
<Button disabled button="primary" label={__('Post --[button to submit something]--')} requiresAuth={IS_WEB} /> <Button disabled button="primary" label={__('Post --[button to submit something]--')} requiresAuth={IS_WEB} />
</div> </div>
@ -534,7 +529,8 @@ export function CommentCreate(props: Props) {
}} }}
/> />
)} )}
{!claimIsMine && ( {/* @if TARGET='web' */}
{!claimIsMine && stripeEnvironment && (
<Button <Button
disabled={disabled} disabled={disabled}
button="alt" button="alt"
@ -546,6 +542,7 @@ export function CommentCreate(props: Props) {
}} }}
/> />
)} )}
{/* @endif */}
{isReply && !minTip && ( {isReply && !minTip && (
<Button <Button
button="link" button="link"

23
ui/component/walletFiatPaymentHistory/view.jsx
View file

@ -4,14 +4,8 @@ import Button from 'component/button';
import Card from 'component/common/card'; import Card from 'component/common/card';
import { Lbryio } from 'lbryinc'; import { Lbryio } from 'lbryinc';
import moment from 'moment'; import moment from 'moment';
import { STRIPE_PUBLIC_KEY } from 'config'; import { getStripeEnvironment } from 'util/stripe';
let stripeEnvironment = getStripeEnvironment();
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';
}
type Props = { type Props = {
accountDetails: any, accountDetails: any,
@ -41,10 +35,13 @@ const WalletBalance = (props: Props) => {
// TODO: this is actually incorrect, last4 should be populated based on the transaction not the current customer details // TODO: this is actually incorrect, last4 should be populated based on the transaction not the current customer details
React.useEffect(() => { React.useEffect(() => {
(async function() { (async function () {
const customerStatusResponse = await getCustomerStatus(); 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); setLastFour(lastFour);
})(); })();
@ -100,7 +97,11 @@ const WalletBalance = (props: Props) => {
))} ))}
</tbody> </tbody>
</table> </table>
{(!accountTransactions || accountTransactions.length === 0) && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>} {(!accountTransactions || accountTransactions.length === 0) && (
<p style={{ textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)' }}>
No Transactions
</p>
)}
</div> </div>
</> </>
} }

114
ui/component/walletSendTip/view.jsx
View file

@ -15,14 +15,8 @@ import LbcSymbol from 'component/common/lbc-symbol';
import { parseURI } from 'lbry-redux'; import { parseURI } from 'lbry-redux';
import usePersistedState from 'effects/use-persisted-state'; import usePersistedState from 'effects/use-persisted-state';
import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp'; import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
import { STRIPE_PUBLIC_KEY } from 'config'; import { getStripeEnvironment } from 'util/stripe';
let stripeEnvironment = getStripeEnvironment();
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';
}
const DEFAULT_TIP_AMOUNTS = [1, 5, 25, 100]; const DEFAULT_TIP_AMOUNTS = [1, 5, 25, 100];
const MINIMUM_FIAT_TIP = 1; const MINIMUM_FIAT_TIP = 1;
@ -100,7 +94,7 @@ function WalletSendTip(props: Props) {
// check if creator has a payment method saved // check if creator has a payment method saved
React.useEffect(() => { React.useEffect(() => {
if (channelClaimId && isAuthenticated) { if (channelClaimId && isAuthenticated && stripeEnvironment) {
Lbryio.call( Lbryio.call(
'customer', 'customer',
'status', 'status',
@ -118,16 +112,18 @@ function WalletSendTip(props: Props) {
setHasSavedCard(Boolean(defaultPaymentMethodId)); setHasSavedCard(Boolean(defaultPaymentMethodId));
}); });
} }
}, [channelClaimId, isAuthenticated]); }, [channelClaimId, isAuthenticated, stripeEnvironment]);
// check if creator has an account saved // check if creator has an account saved
React.useEffect(() => { React.useEffect(() => {
const tipInputElement = document.getElementById('tip-input'); const tipInputElement = document.getElementById('tip-input');
if (tipInputElement) { tipInputElement.focus() } if (tipInputElement) {
tipInputElement.focus();
}
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
if (channelClaimId) { if (channelClaimId && stripeEnvironment) {
Lbryio.call( Lbryio.call(
'account', 'account',
'check', 'check',
@ -149,14 +145,14 @@ function WalletSendTip(props: Props) {
// console.log(error); // console.log(error);
}); });
} }
}, [channelClaimId]); }, [channelClaimId, stripeEnvironment]);
const noBalance = balance === 0; const noBalance = balance === 0;
const tipAmount = useCustomTip ? customTipAmount : presetTipAmount; const tipAmount = useCustomTip ? customTipAmount : presetTipAmount;
const [activeTab, setActiveTab] = React.useState(claimIsMine ? TAB_BOOST : TAB_LBC); const [activeTab, setActiveTab] = React.useState(claimIsMine ? TAB_BOOST : TAB_LBC);
function setClaimTypeText() { function getClaimTypeText() {
if (claim.value_type === 'stream') { if (claim.value_type === 'stream') {
return __('Content'); return __('Content');
} else if (claim.value_type === 'channel') { } else if (claim.value_type === 'channel') {
@ -169,22 +165,24 @@ function WalletSendTip(props: Props) {
return __('Claim'); return __('Claim');
} }
} }
const claimTypeText = setClaimTypeText(); const claimTypeText = getClaimTypeText();
let iconToUse; let iconToUse;
let explainerText = ''; let explainerText = '';
if (activeTab === TAB_BOOST) { if (activeTab === TAB_BOOST) {
iconToUse = ICONS.LBC; iconToUse = ICONS.LBC;
explainerText = __('This refundable boost will improve the discoverability of this %claimTypeText% while active.', {claimTypeText}); explainerText = __('This refundable boost will improve the discoverability of this %claimTypeText% while active.', {
claimTypeText,
});
} else if (activeTab === TAB_FIAT) { } else if (activeTab === TAB_FIAT) {
iconToUse = ICONS.FINANCE; iconToUse = ICONS.FINANCE;
explainerText = __('Show this channel your appreciation by sending a donation in USD. '); explainerText = __('Show this channel your appreciation by sending a donation in USD.');
// if (!hasCardSaved) { // if (!hasCardSaved) {
// explainerText += __('You must add a card to use this functionality.'); // explainerText += __('You must add a card to use this functionality.');
// } // }
} else if (activeTab === TAB_LBC) { } else if (activeTab === TAB_LBC) {
iconToUse = ICONS.LBC; iconToUse = ICONS.LBC;
explainerText = __('Show this channel your appreciation by sending a donation of Credits. '); explainerText = __('Show this channel your appreciation by sending a donation of Credits.');
} }
const isSupport = claimIsMine || activeTab === TAB_BOOST; const isSupport = claimIsMine || activeTab === TAB_BOOST;
@ -276,7 +274,8 @@ function WalletSendTip(props: Props) {
Lbryio.call( Lbryio.call(
'customer', 'customer',
'tip', 'tip',
{ // round to fix issues with floating point numbers {
// round to fix issues with floating point numbers
amount: Math.round(100 * tipAmount), // convert from dollars to cents amount: Math.round(100 * tipAmount), // convert from dollars to cents
creator_channel_name: tipChannelName, // creator_channel_name creator_channel_name: tipChannelName, // creator_channel_name
creator_channel_claim_id: channelClaimId, creator_channel_claim_id: channelClaimId,
@ -297,7 +296,7 @@ function WalletSendTip(props: Props) {
}), }),
}); });
}) })
.catch(function(error) { .catch(function (error) {
let displayError = 'Sorry, there was an error in processing your payment!'; let displayError = 'Sorry, there was an error in processing your payment!';
if (error.message !== 'payment intent failed to confirm') { if (error.message !== 'payment intent failed to confirm') {
@ -316,10 +315,10 @@ function WalletSendTip(props: Props) {
} }
} }
const countDecimals = function(value) { const countDecimals = function (value) {
const text = value.toString(); const text = value.toString();
const index = text.indexOf('.'); const index = text.indexOf('.');
return (text.length - index - 1); return text.length - index - 1;
}; };
function handleCustomPriceChange(event: SyntheticInputEvent<*>) { function handleCustomPriceChange(event: SyntheticInputEvent<*>) {
@ -387,7 +386,9 @@ function WalletSendTip(props: Props) {
const displayAmount = !isNan(tipAmount) ? amountToShow : ''; const displayAmount = !isNan(tipAmount) ? amountToShow : '';
if (activeTab === TAB_BOOST) { if (activeTab === TAB_BOOST) {
return (claimIsMine ? __('Boost Your %claimTypeText%', {claimTypeText}) : __('Boost This %claimTypeText%', {claimTypeText})); return claimIsMine
? __('Boost Your %claimTypeText%', { claimTypeText })
: __('Boost This %claimTypeText%', { claimTypeText });
} else if (activeTab === TAB_FIAT) { } else if (activeTab === TAB_FIAT) {
return __('Send a $%displayAmount% Tip', { displayAmount }); return __('Send a $%displayAmount% Tip', { displayAmount });
} else if (activeTab === TAB_LBC) { } else if (activeTab === TAB_LBC) {
@ -416,7 +417,16 @@ function WalletSendTip(props: Props) {
{/* if there is no LBC balance, show user frontend to get credits */} {/* if there is no LBC balance, show user frontend to get credits */}
{/* if there is lbc, the main tip/boost gui with the 3 tabs at the top */} {/* if there is lbc, the main tip/boost gui with the 3 tabs at the top */}
<Card <Card
title={<LbcSymbol postfix={claimIsMine ? __('Boost Your %claimTypeText%', {claimTypeText}) : __('Support This %claimTypeText%', {claimTypeText})} size={22} />} title={
<LbcSymbol
postfix={
claimIsMine
? __('Boost Your %claimTypeText%', { claimTypeText })
: __('Support This %claimTypeText%', { claimTypeText })
}
size={22}
/>
}
subtitle={ subtitle={
<React.Fragment> <React.Fragment>
{!claimIsMine && ( {!claimIsMine && (
@ -429,7 +439,9 @@ function WalletSendTip(props: Props) {
button="alt" button="alt"
onClick={() => { onClick={() => {
const tipInputElement = document.getElementById('tip-input'); const tipInputElement = document.getElementById('tip-input');
if (tipInputElement) { tipInputElement.focus() } if (tipInputElement) {
tipInputElement.focus();
}
if (!isConfirming) { if (!isConfirming) {
setActiveTab(TAB_LBC); setActiveTab(TAB_LBC);
} }
@ -438,6 +450,7 @@ function WalletSendTip(props: Props) {
/> />
{/* tip fiat tab button */} {/* tip fiat tab button */}
{/* @if TARGET='web' */} {/* @if TARGET='web' */}
{stripeEnvironment && (
<Button <Button
key="tip-fiat" key="tip-fiat"
icon={ICONS.FINANCE} icon={ICONS.FINANCE}
@ -445,13 +458,16 @@ function WalletSendTip(props: Props) {
button="alt" button="alt"
onClick={() => { onClick={() => {
const tipInputElement = document.getElementById('tip-input'); const tipInputElement = document.getElementById('tip-input');
if (tipInputElement) { tipInputElement.focus() } if (tipInputElement) {
tipInputElement.focus();
}
if (!isConfirming) { if (!isConfirming) {
setActiveTab(TAB_FIAT); setActiveTab(TAB_FIAT);
} }
}} }}
className={classnames('button-toggle', { 'button-toggle--active': activeTab === TAB_FIAT })} className={classnames('button-toggle', { 'button-toggle--active': activeTab === TAB_FIAT })}
/> />
)}
{/* @endif */} {/* @endif */}
{/* tip LBC tab button */} {/* tip LBC tab button */}
<Button <Button
@ -461,7 +477,9 @@ function WalletSendTip(props: Props) {
button="alt" button="alt"
onClick={() => { onClick={() => {
const tipInputElement = document.getElementById('tip-input'); const tipInputElement = document.getElementById('tip-input');
if (tipInputElement) { tipInputElement.focus() } if (tipInputElement) {
tipInputElement.focus();
}
if (!isConfirming) { if (!isConfirming) {
setActiveTab(TAB_BOOST); setActiveTab(TAB_BOOST);
} }
@ -493,33 +511,29 @@ function WalletSendTip(props: Props) {
</div> </div>
<div className="confirm__label">{setConfirmLabel()}</div> <div className="confirm__label">{setConfirmLabel()}</div>
<div className="confirm__value"> <div className="confirm__value">
{activeTab === TAB_FIAT ? <p>$ {(Math.round(tipAmount * 100) / 100).toFixed(2)}</p> : <LbcSymbol postfix={tipAmount} size={22} />} {activeTab === TAB_FIAT ? (
<p>$ {(Math.round(tipAmount * 100) / 100).toFixed(2)}</p>
) : (
<LbcSymbol postfix={tipAmount} size={22} />
)}
</div> </div>
</div> </div>
</div> </div>
<div className="section__actions"> <div className="section__actions">
<Button <Button autoFocus onClick={handleSubmit} button="primary" disabled={isPending} label={__('Confirm')} />
autoFocus
onClick={handleSubmit}
button="primary"
disabled={isPending}
label={__('Confirm')}
/>
<Button button="link" label={__('Cancel')} onClick={() => setIsConfirming(false)} /> <Button button="link" label={__('Cancel')} onClick={() => setIsConfirming(false)} />
</div> </div>
</> </>
// only show the prompt to earn more if its lbc or boost tab and no balance ) : !((activeTab === TAB_LBC || activeTab === TAB_BOOST) && noBalance) ? (
// otherwise you can show the full prompt <>
) : (!((activeTab === TAB_LBC || activeTab === TAB_BOOST) && noBalance)
? <>
<div className="section"> <div className="section">
<ChannelSelector /> <ChannelSelector />
</div> </div>
{activeTab === TAB_FIAT && !hasCardSaved && ( {activeTab === TAB_FIAT && !hasCardSaved && (
<h3 className="add-card-prompt"> <h3 className="add-card-prompt">
<Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card')} button="link" /> <Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card')} button="link" />{' '}
{' '}{__('To Tip Creators')} {__('To Tip Creators')}
</h3> </h3>
)} )}
@ -625,13 +639,16 @@ function WalletSendTip(props: Props) {
<div className="help">{__('The payment will be made from your saved card')}</div> <div className="help">{__('The payment will be made from your saved card')}</div>
)} )}
</> </>
) : (
// if it's LBC and there is no balance, you can prompt to purchase LBC // if it's LBC and there is no balance, you can prompt to purchase LBC
: <Card <Card
title={<I18nMessage tokens={{ lbc: <LbcSymbol size={22} /> }}>Supporting content requires %lbc%</I18nMessage>} title={
<I18nMessage tokens={{ lbc: <LbcSymbol size={22} /> }}>Supporting content requires %lbc%</I18nMessage>
}
subtitle={ subtitle={
<I18nMessage tokens={{ lbc: <LbcSymbol /> }}> <I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
With %lbc%, you can send tips to your favorite creators, or help boost their content for more people to With %lbc%, you can send tips to your favorite creators, or help boost their content for more people
see. to see.
</I18nMessage> </I18nMessage>
} }
actions={ actions={
@ -642,7 +659,12 @@ function WalletSendTip(props: Props) {
label={__('Earn Rewards')} label={__('Earn Rewards')}
navigate={`/$/${PAGES.REWARDS}`} navigate={`/$/${PAGES.REWARDS}`}
/> />
<Button icon={ICONS.BUY} button="secondary" label={__('Buy/Swap Credits')} navigate={`/$/${PAGES.BUY}`} /> <Button
icon={ICONS.BUY}
button="secondary"
label={__('Buy/Swap Credits')}
navigate={`/$/${PAGES.BUY}`}
/>
<Button button="link" label={__('Nevermind')} onClick={closeModal} /> <Button button="link" label={__('Nevermind')} onClick={closeModal} />
</div> </div>
} }

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

@ -11,14 +11,8 @@ import classnames from 'classnames';
import usePersistedState from 'effects/use-persisted-state'; import usePersistedState from 'effects/use-persisted-state';
import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp'; import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
import { Lbryio } from 'lbryinc'; import { Lbryio } from 'lbryinc';
import { STRIPE_PUBLIC_KEY } from 'config'; import { getStripeEnvironment } from 'util/stripe';
let stripeEnvironment = getStripeEnvironment();
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';
}
const DEFAULT_TIP_AMOUNTS = [1, 5, 25, 100]; const DEFAULT_TIP_AMOUNTS = [1, 5, 25, 100];
@ -76,6 +70,7 @@ function WalletTipAmountSelector(props: Props) {
// check if creator has a payment method saved // check if creator has a payment method saved
React.useEffect(() => { React.useEffect(() => {
if (stripeEnvironment) {
Lbryio.call( Lbryio.call(
'customer', 'customer',
'status', 'status',
@ -92,10 +87,12 @@ function WalletTipAmountSelector(props: Props) {
setHasSavedCard(Boolean(defaultPaymentMethodId)); setHasSavedCard(Boolean(defaultPaymentMethodId));
}); });
}, []); }
}, [stripeEnvironment]);
// //
React.useEffect(() => { React.useEffect(() => {
if (stripeEnvironment) {
Lbryio.call( Lbryio.call(
'account', 'account',
'check', 'check',
@ -114,7 +111,8 @@ function WalletTipAmountSelector(props: Props) {
.catch(function (error) { .catch(function (error) {
// console.log(error); // console.log(error);
}); });
}, []); }
}, [stripeEnvironment]);
React.useEffect(() => { React.useEffect(() => {
// setHasSavedCard(false); // setHasSavedCard(false);
@ -214,7 +212,7 @@ function WalletTipAmountSelector(props: Props) {
<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{' '} <Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card ')} button="link" /> To{' '}
{__(' Tip Creators')} {__('Tip Creators')}
</span> </span>
</div> </div>
</> </>
@ -282,7 +280,7 @@ function WalletTipAmountSelector(props: Props) {
<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{' '} <Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card ')} button="link" /> To{' '}
{__(' Tip Creators')} {__('Tip Creators')}
</span> </span>
</div> </div>
</> </>

2
ui/constants/stripe.js Normal file
View file

@ -0,0 +1,2 @@
export const TEST = 'test';
export const LIVE = 'live';

43
ui/modal/modalRemoveCard/view.jsx
View file

@ -5,43 +5,19 @@ import Card from 'component/common/card';
import Button from 'component/button'; import Button from 'component/button';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import { Lbryio } from 'lbryinc'; import { Lbryio } from 'lbryinc';
import { STRIPE_PUBLIC_KEY } from 'config'; import { getStripeEnvironment } from 'util/stripe';
let stripeEnvironment = getStripeEnvironment();
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';
}
type Props = { type Props = {
closeModal: () => void, closeModal: () => void,
abandonTxo: (Txo, () => void) => void,
abandonClaim: (string, number, ?() => void) => void,
tx: Txo,
claim: GenericClaim,
cb: () => void,
doResolveUri: (string) => void,
uri: string,
paymentMethodId: string, paymentMethodId: string,
setAsConfirmingCard: () => void, setAsConfirmingCard: () => void, // ?
}; };
export default function ModalRevokeClaim(props: Props) { export default function ModalRemoveCard(props: Props) {
var that = this; const { closeModal, paymentMethodId } = props;
console.log(that);
console.log(props);
const { closeModal, uri, paymentMethodId, setAsConfirmingCard } = props;
console.log(uri);
console.log(setAsConfirmingCard);
function removeCard() { function removeCard() {
console.log(paymentMethodId);
Lbryio.call( Lbryio.call(
'customer', 'customer',
'detach', 'detach',
@ -51,11 +27,9 @@ export default function ModalRevokeClaim(props: Props) {
}, },
'post' 'post'
).then((removeCardResponse) => { ).then((removeCardResponse) => {
console.log(removeCardResponse);
// TODO: add toast here // TODO: add toast here
// closeModal(); // closeModal();
// Is there a better way to handle this? Why reload?
window.location.reload(); window.location.reload();
}); });
} }
@ -63,15 +37,14 @@ export default function ModalRevokeClaim(props: Props) {
return ( return (
<Modal ariaHideApp={false} isOpen contentLabel={'hello'} type="card" onAborted={closeModal}> <Modal ariaHideApp={false} isOpen contentLabel={'hello'} type="card" onAborted={closeModal}>
<Card <Card
title={'Confirm Remove Card'} title={__('Confirm Remove Card')}
// body={getMsgBody(type, isSupport, name)}
actions={ actions={
<div className="section__actions"> <div className="section__actions">
<Button <Button
className="stripe__confirm-remove-card" className="stripe__confirm-remove-card"
button="secondary" button="secondary"
icon={ICONS.DELETE} icon={ICONS.DELETE}
label={'Remove Card'} label={__('Remove Card')}
onClick={removeCard} onClick={removeCard}
/> />
<Button button="link" label={__('Cancel')} onClick={closeModal} /> <Button button="link" label={__('Cancel')} onClick={closeModal} />

5
ui/page/file/view.jsx
View file

@ -12,7 +12,6 @@ import FileRenderDownload from 'component/fileRenderDownload';
import RecommendedContent from 'component/recommendedContent'; import RecommendedContent from 'component/recommendedContent';
import CollectionContent from 'component/collectionContentSidebar'; import CollectionContent from 'component/collectionContentSidebar';
import CommentsList from 'component/commentsList'; import CommentsList from 'component/commentsList';
import { Redirect } from 'react-router';
import Button from 'component/button'; import Button from 'component/button';
import I18nMessage from 'component/i18nMessage'; import I18nMessage from 'component/i18nMessage';
import Empty from 'component/common/empty'; import Empty from 'component/common/empty';
@ -145,10 +144,6 @@ function FilePage(props: Props) {
); );
} }
if (!claimIsMine && isLivestream) {
return <Redirect to={`/$/${PAGES.LIVESTREAM}`} />;
}
if (obscureNsfw && isMature) { if (obscureNsfw && isMature) {
return ( return (
<Page className="file-page" filePage isMarkdown={isMarkdown}> <Page className="file-page" filePage isMarkdown={isMarkdown}>

5
ui/page/settings/view.jsx
View file

@ -20,6 +20,7 @@ import { SIMPLE_SITE } from 'config';
import homepages from 'homepages'; import homepages from 'homepages';
import { Lbryio } from 'lbryinc'; import { Lbryio } from 'lbryinc';
import Yrbl from 'component/yrbl'; import Yrbl from 'component/yrbl';
import { getStripeEnvironment } from 'util/stripe';
type Price = { type Price = {
currency: string, currency: string,
@ -451,7 +452,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
{/* @endif */} {/* @endif */}
{/* @if TARGET='web' */} {/* @if TARGET='web' */}
{user && ( {user && getStripeEnvironment() && (
<Card <Card
title={__('Bank Accounts')} title={__('Bank Accounts')}
subtitle={__('Connect a bank account to receive tips and compensation in your local currency')} subtitle={__('Connect a bank account to receive tips and compensation in your local currency')}
@ -470,7 +471,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
{/* @endif */} {/* @endif */}
{/* @if TARGET='web' */} {/* @if TARGET='web' */}
{isAuthenticated && ( {isAuthenticated && getStripeEnvironment() && (
<Card <Card
title={__('Payment Methods')} title={__('Payment Methods')}
subtitle={__('Add a credit card to tip creators in their local currency')} subtitle={__('Add a credit card to tip creators in their local currency')}

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

@ -7,17 +7,12 @@ import Card from 'component/common/card';
import Page from 'component/page'; import Page from 'component/page';
import { Lbryio } from 'lbryinc'; import { Lbryio } from 'lbryinc';
import { URL, WEBPACK_WEB_PORT, STRIPE_PUBLIC_KEY } from 'config'; import { URL, WEBPACK_WEB_PORT } from 'config';
import { getStripeEnvironment } from 'util/stripe';
const isDev = process.env.NODE_ENV !== 'production'; const isDev = process.env.NODE_ENV !== 'production';
let stripeEnvironment = 'test'; let stripeEnvironment = getStripeEnvironment();
// 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';
}
let successStripeRedirectUrl, failureStripeRedirectUrl; let successStripeRedirectUrl, failureStripeRedirectUrl;
let successEndpoint = '/$/settings/tip_account'; let successEndpoint = '/$/settings/tip_account';
let failureEndpoint = '/$/settings/tip_account'; let failureEndpoint = '/$/settings/tip_account';
@ -46,7 +41,7 @@ type State = {
unpaidBalance: number, unpaidBalance: number,
pageTitle: string, pageTitle: string,
stillRequiringVerification: boolean, stillRequiringVerification: boolean,
accountTransactions: any accountTransactions: any,
}; };
class StripeAccountConnection extends React.Component<Props, State> { class StripeAccountConnection extends React.Component<Props, State> {
@ -144,7 +139,10 @@ class StripeAccountConnection extends React.Component<Props, State> {
stillRequiringVerification: false, stillRequiringVerification: false,
}; };
if ((eventuallyDueInformation && eventuallyDueInformation.length) || (currentlyDueInformation && currentlyDueInformation.length)) { if (
(eventuallyDueInformation && eventuallyDueInformation.length) ||
(currentlyDueInformation && currentlyDueInformation.length)
) {
objectToUpdateState.stillRequiringVerification = true; objectToUpdateState.stillRequiringVerification = true;
getAndSetAccountLink(false); getAndSetAccountLink(false);
} }
@ -233,8 +231,17 @@ class StripeAccountConnection extends React.Component<Props, State> {
<div> <div>
<div> <div>
<h3>{__('Congratulations! Your account has been connected with Odysee.')}</h3> <h3>{__('Congratulations! Your account has been connected with Odysee.')}</h3>
{stillRequiringVerification && <><h3 style={{marginTop: '10px'}}>Although your account is connected it still requires verification to begin receiving tips.</h3> {stillRequiringVerification && (
<h3 style={{marginTop: '10px'}}>Please use the button below to complete your verification process and enable tipping for your account.</h3></> } <>
<h3 style={{ marginTop: '10px' }}>
Although your account is connected it still requires verification to begin receiving tips.
</h3>
<h3 style={{ marginTop: '10px' }}>
Please use the button below to complete your verification process and enable tipping for
your account.
</h3>
</>
)}
</div> </div>
</div> </div>
</div> </div>
@ -254,9 +261,7 @@ class StripeAccountConnection extends React.Component<Props, State> {
<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">
@ -271,19 +276,23 @@ class StripeAccountConnection extends React.Component<Props, State> {
</div> </div>
} }
actions={ actions={
<>{ stillRequiringVerification && <Button <>
{stillRequiringVerification && (
<Button
button="primary" button="primary"
label={__('Complete Verification')} label={__('Complete Verification')}
icon={ICONS.SETTINGS} icon={ICONS.SETTINGS}
navigate={stripeConnectionUrl} navigate={stripeConnectionUrl}
className="stripe__complete-verification-button" className="stripe__complete-verification-button"
/> } />
)}
<Button <Button
button="secondary" button="secondary"
label={__('View Transactions')} label={__('View Transactions')}
icon={ICONS.SETTINGS} icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.WALLET}?tab=fiat-payment-history`} navigate={`/$/${PAGES.WALLET}?tab=fiat-payment-history`}
/></> />
</>
} }
/> />
<br /> <br />

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

@ -5,19 +5,14 @@ import React from 'react';
import Page from 'component/page'; import Page from 'component/page';
import Card from 'component/common/card'; import Card from 'component/common/card';
import { Lbryio } from 'lbryinc'; import { Lbryio } from 'lbryinc';
import { STRIPE_PUBLIC_KEY } from 'config';
import Plastic from 'react-plastic'; import Plastic from 'react-plastic';
import Button from 'component/button'; import Button from 'component/button';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import * as MODALS from 'constants/modal_types'; import * as MODALS from 'constants/modal_types';
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import { STRIPE_PUBLIC_KEY } from 'config';
let stripeEnvironment = 'test'; import { getStripeEnvironment } from 'util/stripe';
// if the key contains pk_live it's a live key let stripeEnvironment = getStripeEnvironment();
// 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';
}
const APIS_DOWN_ERROR_RESPONSE = __('There was an error from the server, please try again later'); const APIS_DOWN_ERROR_RESPONSE = __('There was an error from the server, please try again later');
const CARD_SETUP_ERROR_RESPONSE = __('There was an error getting your card setup, please try again later'); const CARD_SETUP_ERROR_RESPONSE = __('There was an error getting your card setup, please try again later');
@ -79,6 +74,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
// 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
if (stripeEnvironment) {
Lbryio.call( Lbryio.call(
'customer', 'customer',
'status', 'status',
@ -187,6 +183,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
doToast({ message: CARD_SETUP_ERROR_RESPONSE, isError: true }); doToast({ message: CARD_SETUP_ERROR_RESPONSE, isError: true });
} }
}); });
}
}, 250); }, 250);
function setupStripe() { function setupStripe() {

4
ui/page/show/view.jsx
View file

@ -1,5 +1,5 @@
// @flow // @flow
import { DOMAIN } from 'config'; import { DOMAIN, ENABLE_NO_SOURCE_CLAIMS } from 'config';
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { lazyImport } from 'util/lazyImport'; import { lazyImport } from 'util/lazyImport';
@ -199,7 +199,7 @@ function ShowPage(props: Props) {
/> />
</Page> </Page>
); );
} else if (isLivestream) { } else if (isLivestream && ENABLE_NO_SOURCE_CLAIMS) {
innerContent = <LivestreamPage uri={uri} />; innerContent = <LivestreamPage uri={uri} />;
} else { } else {
innerContent = <FilePage uri={uri} location={location} />; innerContent = <FilePage uri={uri} location={location} />;

39
ui/page/wallet/view.jsx
View file

@ -12,8 +12,8 @@ import * as PAGES from 'constants/pages';
import Spinner from 'component/spinner'; import Spinner from 'component/spinner';
import YrblWalletEmpty from 'component/yrblWalletEmpty'; import YrblWalletEmpty from 'component/yrblWalletEmpty';
import { Lbryio } from 'lbryinc'; import { Lbryio } from 'lbryinc';
import { STRIPE_PUBLIC_KEY } from 'config';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs'; import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs';
import { getStripeEnvironment } from 'util/stripe';
const TAB_QUERY = 'tab'; const TAB_QUERY = 'tab';
@ -23,12 +23,7 @@ const TABS = {
PAYMENT_HISTORY: 'fiat-payment-history', PAYMENT_HISTORY: 'fiat-payment-history',
}; };
let stripeEnvironment = 'test'; let stripeEnvironment = getStripeEnvironment();
// 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';
}
type Props = { type Props = {
history: { action: string, push: (string) => void, replace: (string) => void }, history: { action: string, push: (string) => void, replace: (string) => void },
@ -117,8 +112,11 @@ const WalletPage = (props: Props) => {
// calculate account transactions section // calculate account transactions section
React.useEffect(() => { React.useEffect(() => {
(async function() { (async function () {
try { try {
if (!stripeEnvironment) {
return;
}
const response = await getAccountStatus(); const response = await getAccountStatus();
setAccountStatusResponse(response); setAccountStatusResponse(response);
@ -131,23 +129,27 @@ const WalletPage = (props: Props) => {
console.log(err); console.log(err);
} }
})(); })();
}, []); }, [stripeEnvironment]);
// populate customer payment data // populate customer payment data
React.useEffect(() => { React.useEffect(() => {
(async function() { (async function () {
try { try {
// get card payments customer has made // get card payments customer has made
if (!stripeEnvironment) {
return;
}
let customerTransactionResponse = await getPaymentHistory(); let customerTransactionResponse = await getPaymentHistory();
if (customerTransactionResponse && customerTransactionResponse.length) {
customerTransactionResponse.reverse(); customerTransactionResponse.reverse();
}
setCustomerTransactions(customerTransactionResponse); setCustomerTransactions(customerTransactionResponse);
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
})(); })();
}, []); }, [stripeEnvironment]);
// @endif // @endif
@ -157,7 +159,7 @@ const WalletPage = (props: Props) => {
return ( return (
<> <>
{/* @if TARGET='web' */} {stripeEnvironment && (
<Page> <Page>
<Tabs onChange={onTabChange} index={tabIndex}> <Tabs onChange={onTabChange} index={tabIndex}>
<TabList className="tabs__list--collection-edit-page"> <TabList className="tabs__list--collection-edit-page">
@ -199,15 +201,18 @@ const WalletPage = (props: Props) => {
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>
<div className="section card-stack"> <div className="section card-stack">
<WalletFiatPaymentBalance transactions={customerTransactions} accountDetails={accountStatusResponse} /> <WalletFiatPaymentBalance
transactions={customerTransactions}
accountDetails={accountStatusResponse}
/>
<WalletFiatPaymentHistory transactions={customerTransactions} /> <WalletFiatPaymentHistory transactions={customerTransactions} />
</div> </div>
</TabPanel> </TabPanel>
</TabPanels> </TabPanels>
</Tabs> </Tabs>
</Page> </Page>
{/* @endif */} )}
{/* @if TARGET='app' */} {!stripeEnvironment && (
<Page> <Page>
{loading && ( {loading && (
<div className="main--empty"> <div className="main--empty">
@ -227,7 +232,7 @@ const WalletPage = (props: Props) => {
</> </>
)} )}
</Page> </Page>
{/* @endif */} )}
</> </>
); );
}; };

13
ui/util/stripe.js Normal file
View file

@ -0,0 +1,13 @@
// @flow
import { STRIPE_PUBLIC_KEY } from 'config';
import * as STRIPE_CONSTS from 'constants/stripe';
export function getStripeEnvironment() {
if (STRIPE_PUBLIC_KEY) {
if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
return STRIPE_CONSTS.LIVE;
} else {
return STRIPE_CONSTS.TEST;
}
}
return null;
}