.env.defaults

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

static/app-strings.json

@@ -2090,5 +2090,8 @@
   "Expand Comments": "Expand Comments",
   "Expand": "Expand",
   "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--"
 }

ui/component/commentCreate/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 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 ICONS from 'constants/icons';
 import React from 'react';
@@ -21,12 +21,8 @@ import Empty from 'component/common/empty';
 import { getChannelIdFromClaim } from 'util/claim';
 import { Lbryio } from 'lbryinc';
 
-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';
-}
+import { getStripeEnvironment } from 'util/stripe';
+let stripeEnvironment = getStripeEnvironment();
 
 const TAB_FIAT = 'TabFiat';
 const TAB_LBC = 'TabLBC';
@@ -245,10 +241,13 @@ export function CommentCreate(props: Props) {
           }, 1500);
 
           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
                 tipChannelName,
-            }),
+              }
+            ),
           });
 
           setSuccessTip({ txid, tipAmount });
@@ -265,7 +264,8 @@ export function CommentCreate(props: Props) {
       Lbryio.call(
         'customer',
         '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
           creator_channel_name: tipChannelName, // creator_channel_name
           creator_channel_claim_id: channelClaimId,
@@ -387,12 +387,7 @@ export function CommentCreate(props: Props) {
           }
         }}
       >
-        <FormField
-          type="textarea"
-          name={'comment_signup_prompt'}
-          placeholder={__('Say something about this...')}
-          label={isFetchingChannels ? __('Comment') : undefined}
-        />
+        <FormField type="textarea" name={'comment_signup_prompt'} placeholder={__('Say something about this...')} />
         <div className="section__actions--no-margin">
           <Button disabled button="primary" label={__('Post --[button to submit something]--')} requiresAuth={IS_WEB} />
         </div>
@@ -534,7 +529,8 @@ export function CommentCreate(props: Props) {
                 }}
               />
             )}
-            {!claimIsMine && (
+            {/* @if TARGET='web' */}
+            {!claimIsMine && stripeEnvironment && (
               <Button
                 disabled={disabled}
                 button="alt"
@@ -546,6 +542,7 @@ export function CommentCreate(props: Props) {
                 }}
               />
             )}
+            {/* @endif */}
             {isReply && !minTip && (
               <Button
                 button="link"

ui/component/walletFiatPaymentHistory/view.jsx

@@ -4,14 +4,8 @@ import Button from 'component/button';
 import Card from 'component/common/card';
 import { Lbryio } from 'lbryinc';
 import moment from 'moment';
-import { STRIPE_PUBLIC_KEY } from 'config';
-
-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';
-}
+import { getStripeEnvironment } from 'util/stripe';
+let stripeEnvironment = getStripeEnvironment();
 
 type Props = {
   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
   React.useEffect(() => {
-    (async function() {
+    (async function () {
       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);
     })();
@@ -100,7 +97,11 @@ const WalletBalance = (props: Props) => {
                     ))}
                 </tbody>
               </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>
           </>
         }

ui/component/walletSendTip/view.jsx

@@ -15,14 +15,8 @@ import LbcSymbol from 'component/common/lbc-symbol';
 import { parseURI } from 'lbry-redux';
 import usePersistedState from 'effects/use-persisted-state';
 import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
-import { STRIPE_PUBLIC_KEY } from 'config';
-
-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';
-}
+import { getStripeEnvironment } from 'util/stripe';
+let stripeEnvironment = getStripeEnvironment();
 
 const DEFAULT_TIP_AMOUNTS = [1, 5, 25, 100];
 const MINIMUM_FIAT_TIP = 1;
@@ -100,7 +94,7 @@ function WalletSendTip(props: Props) {
 
   // check if creator has a payment method saved
   React.useEffect(() => {
-    if (channelClaimId && isAuthenticated) {
+    if (channelClaimId && isAuthenticated && stripeEnvironment) {
       Lbryio.call(
         'customer',
         'status',
@@ -118,16 +112,18 @@ function WalletSendTip(props: Props) {
         setHasSavedCard(Boolean(defaultPaymentMethodId));
       });
     }
-  }, [channelClaimId, isAuthenticated]);
+  }, [channelClaimId, isAuthenticated, stripeEnvironment]);
 
   // check if creator has an account saved
   React.useEffect(() => {
     const tipInputElement = document.getElementById('tip-input');
-    if (tipInputElement) { tipInputElement.focus() }
+    if (tipInputElement) {
+      tipInputElement.focus();
+    }
   }, []);
 
   React.useEffect(() => {
-    if (channelClaimId) {
+    if (channelClaimId && stripeEnvironment) {
       Lbryio.call(
         'account',
         'check',
@@ -149,14 +145,14 @@ function WalletSendTip(props: Props) {
           // console.log(error);
         });
     }
-  }, [channelClaimId]);
+  }, [channelClaimId, stripeEnvironment]);
 
   const noBalance = balance === 0;
   const tipAmount = useCustomTip ? customTipAmount : presetTipAmount;
 
   const [activeTab, setActiveTab] = React.useState(claimIsMine ? TAB_BOOST : TAB_LBC);
 
-  function setClaimTypeText() {
+  function getClaimTypeText() {
     if (claim.value_type === 'stream') {
       return __('Content');
     } else if (claim.value_type === 'channel') {
@@ -169,22 +165,24 @@ function WalletSendTip(props: Props) {
       return __('Claim');
     }
   }
-  const claimTypeText = setClaimTypeText();
+  const claimTypeText = getClaimTypeText();
 
   let iconToUse;
   let explainerText = '';
   if (activeTab === TAB_BOOST) {
     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) {
     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) {
     //   explainerText += __('You must add a card to use this functionality.');
     // }
   } else if (activeTab === TAB_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;
@@ -276,7 +274,8 @@ function WalletSendTip(props: Props) {
           Lbryio.call(
             'customer',
             '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
               creator_channel_name: tipChannelName, // creator_channel_name
               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!';
 
               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 index = text.indexOf('.');
-    return (text.length - index - 1);
+    return text.length - index - 1;
   };
 
   function handleCustomPriceChange(event: SyntheticInputEvent<*>) {
@@ -387,7 +386,9 @@ function WalletSendTip(props: Props) {
     const displayAmount = !isNan(tipAmount) ? amountToShow : '';
 
     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) {
       return __('Send a $%displayAmount% Tip', { displayAmount });
     } 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 lbc, the main tip/boost gui with the 3 tabs at the top */}
       <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={
           <React.Fragment>
             {!claimIsMine && (
@@ -429,7 +439,9 @@ function WalletSendTip(props: Props) {
                   button="alt"
                   onClick={() => {
                     const tipInputElement = document.getElementById('tip-input');
-                    if (tipInputElement) { tipInputElement.focus() }
+                    if (tipInputElement) {
+                      tipInputElement.focus();
+                    }
                     if (!isConfirming) {
                       setActiveTab(TAB_LBC);
                     }
@@ -438,6 +450,7 @@ function WalletSendTip(props: Props) {
                 />
                 {/* tip fiat tab button */}
                 {/* @if TARGET='web' */}
+                {stripeEnvironment && (
                   <Button
                     key="tip-fiat"
                     icon={ICONS.FINANCE}
@@ -445,13 +458,16 @@ function WalletSendTip(props: Props) {
                     button="alt"
                     onClick={() => {
                       const tipInputElement = document.getElementById('tip-input');
-                    if (tipInputElement) { tipInputElement.focus() }
+                      if (tipInputElement) {
+                        tipInputElement.focus();
+                      }
                       if (!isConfirming) {
                         setActiveTab(TAB_FIAT);
                       }
                     }}
                     className={classnames('button-toggle', { 'button-toggle--active': activeTab === TAB_FIAT })}
                   />
+                )}
                 {/* @endif */}
                 {/* tip LBC tab button */}
                 <Button
@@ -461,7 +477,9 @@ function WalletSendTip(props: Props) {
                   button="alt"
                   onClick={() => {
                     const tipInputElement = document.getElementById('tip-input');
-                    if (tipInputElement) { tipInputElement.focus() }
+                    if (tipInputElement) {
+                      tipInputElement.focus();
+                    }
                     if (!isConfirming) {
                       setActiveTab(TAB_BOOST);
                     }
@@ -493,33 +511,29 @@ function WalletSendTip(props: Props) {
                   </div>
                   <div className="confirm__label">{setConfirmLabel()}</div>
                   <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 className="section__actions">
-                <Button
-                  autoFocus
-                  onClick={handleSubmit}
-                  button="primary"
-                  disabled={isPending}
-                  label={__('Confirm')}
-                />
+                <Button autoFocus onClick={handleSubmit} button="primary" disabled={isPending} label={__('Confirm')} />
                 <Button button="link" label={__('Cancel')} onClick={() => setIsConfirming(false)} />
               </div>
             </>
-            // only show the prompt to earn more if its lbc or boost tab and no balance
-            // otherwise you can show the full prompt
-          ) : (!((activeTab === TAB_LBC || activeTab === TAB_BOOST) && noBalance)
-            ? <>
+          ) : !((activeTab === TAB_LBC || activeTab === TAB_BOOST) && noBalance) ? (
+            <>
               <div className="section">
                 <ChannelSelector />
               </div>
 
               {activeTab === TAB_FIAT && !hasCardSaved && (
                 <h3 className="add-card-prompt">
-                  <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')}
                 </h3>
               )}
 
@@ -625,13 +639,16 @@ function WalletSendTip(props: Props) {
                 <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
-               : <Card
-                 title={<I18nMessage tokens={{ lbc: <LbcSymbol size={22} /> }}>Supporting content requires %lbc%</I18nMessage>}
+            <Card
+              title={
+                <I18nMessage tokens={{ lbc: <LbcSymbol size={22} /> }}>Supporting content requires %lbc%</I18nMessage>
+              }
               subtitle={
                 <I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
-                      With %lbc%, you can send tips to your favorite creators, or help boost their content for more people to
-                      see.
+                  With %lbc%, you can send tips to your favorite creators, or help boost their content for more people
+                  to see.
                 </I18nMessage>
               }
               actions={
@@ -642,7 +659,12 @@ function WalletSendTip(props: Props) {
                     label={__('Earn 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} />
                 </div>
               }

ui/component/walletTipAmountSelector/view.jsx

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

ui/constants/stripe.js

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

ui/modal/modalRemoveCard/view.jsx

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

ui/page/file/view.jsx

@@ -12,7 +12,6 @@ import FileRenderDownload from 'component/fileRenderDownload';
 import RecommendedContent from 'component/recommendedContent';
 import CollectionContent from 'component/collectionContentSidebar';
 import CommentsList from 'component/commentsList';
-import { Redirect } from 'react-router';
 import Button from 'component/button';
 import I18nMessage from 'component/i18nMessage';
 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) {
     return (
       <Page className="file-page" filePage isMarkdown={isMarkdown}>

ui/page/settings/view.jsx

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

ui/page/settingsStripeAccount/view.jsx

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

ui/page/settingsStripeCard/view.jsx

@@ -5,19 +5,14 @@ import React from 'react';
 import Page from 'component/page';
 import Card from 'component/common/card';
 import { Lbryio } from 'lbryinc';
-import { STRIPE_PUBLIC_KEY } from 'config';
 import Plastic from 'react-plastic';
 import Button from 'component/button';
 import * as ICONS from 'constants/icons';
 import * as MODALS from 'constants/modal_types';
 import * as PAGES from 'constants/pages';
-
-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';
-}
+import { STRIPE_PUBLIC_KEY } from 'config';
+import { getStripeEnvironment } from 'util/stripe';
+let stripeEnvironment = getStripeEnvironment();
 
 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');
@@ -79,6 +74,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
     // TODO: fix this, should be a cleaner way
     setTimeout(function () {
       // check if customer has card setup already
+      if (stripeEnvironment) {
         Lbryio.call(
           'customer',
           'status',
@@ -187,6 +183,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
               doToast({ message: CARD_SETUP_ERROR_RESPONSE, isError: true });
             }
           });
+      }
     }, 250);
 
     function setupStripe() {

ui/page/show/view.jsx

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

ui/page/wallet/view.jsx

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

ui/util/stripe.js

@@ -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;
+}