Stripe integration fix (#6850)

* fix frontend bug

* show superchats in order properly

* scroll properly when switching tabs

* calculate fiat tips properly

* sum up lbc amounts

* refactor code a bit remove why isnt this working bit

* bugfix cant tip fiat if no lbc balance

* add toast when someone does a tip for a comment

* add error toast for card page

* show error on account connection page

* automatically truncate to two decimals

* close to working perfectly

* show decimals value better

* increase size of input value

* one bug left but almost working perfectly

* reverse so newest transactions come first

* fixing bug caused by floating point precision

* eslint fixes

* remove unused conditional

* get stuff ready for merge

* bugfix and cleanup

* requested changes

* fixing flow errors

* fix last flow error and touchups

* fix i18n and remove logs

Co-authored-by: Anthony <contact@anthonymayfield.com>

ui/component/commentCreate/view.jsx

@@ -131,6 +131,7 @@ export function CommentCreate(props: Props) {
       return;
     }
 
+    // if comment post didn't work, but tip was already made, try again to create comment
     if (commentFailure && tipAmount === successTip.tipAmount) {
       handleCreateComment(successTip.txid);
       return;
@@ -147,6 +148,19 @@ export function CommentCreate(props: Props) {
     const activeChannelName = activeChannelClaim && activeChannelClaim.name;
     const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
 
+    // setup variables for tip API
+    let channelClaimId, tipChannelName;
+    // if there is a signing channel it's on a file
+    if (claim.signing_channel) {
+      channelClaimId = claim.signing_channel.claim_id;
+      tipChannelName = claim.signing_channel.name;
+
+      // otherwise it's on the channel page
+    } else {
+      channelClaimId = claim.claim_id;
+      tipChannelName = claim.name;
+    }
+
     setIsSubmitting(true);
 
     if (activeTab === TAB_LBC) {
@@ -160,6 +174,14 @@ export function CommentCreate(props: Props) {
           setTimeout(() => {
             handleCreateComment(txid);
           }, 1500);
+
+          doToast({
+            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 });
         },
         () => {
@@ -168,27 +190,14 @@ export function CommentCreate(props: Props) {
         }
       );
     } else {
-      // setup variables for tip API
-      let channelClaimId, tipChannelName;
-      // if there is a signing channel it's on a file
-      if (claim.signing_channel) {
-        channelClaimId = claim.signing_channel.claim_id;
-        tipChannelName = claim.signing_channel.name;
-
-        // otherwise it's on the channel page
-      } else {
-        channelClaimId = claim.claim_id;
-        tipChannelName = claim.name;
-      }
-
       const sourceClaimId = claim.claim_id;
       const roundedAmount = Math.round(tipAmount * 100) / 100;
 
       Lbryio.call(
         'customer',
         'tip',
-        {
+        { // round to deal with floating point precision
-          amount: 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_claim_id: channelClaimId,
           tipper_channel_name: activeChannelName,

ui/component/livestreamComments/view.jsx

@@ -22,7 +22,6 @@ type Props = {
   fetchingComments: boolean,
   doSuperChatList: (string) => void,
   superChats: Array<Comment>,
-  superChatsTotalAmount: number,
   myChannels: ?Array<ChannelClaim>,
 };
 
@@ -38,38 +37,27 @@ export default function LivestreamComments(props: Props) {
     embed,
     doCommentSocketConnect,
     doCommentSocketDisconnect,
-    comments,
+    comments: commentsByChronologicalOrder,
     doCommentList,
     fetchingComments,
     doSuperChatList,
-    superChats,
-    superChatsTotalAmount,
     myChannels,
+    superChats: superChatsByTipAmount,
   } = props;
 
+  let superChatsFiatAmount, superChatsTotalAmount;
+
   const commentsRef = React.createRef();
   const [scrollBottom, setScrollBottom] = React.useState(true);
   const [viewMode, setViewMode] = React.useState(VIEW_MODE_CHAT);
   const [performedInitialScroll, setPerformedInitialScroll] = React.useState(false);
   const claimId = claim && claim.claim_id;
-  const commentsLength = comments && comments.length;
+  const commentsLength = commentsByChronologicalOrder && commentsByChronologicalOrder.length;
-  const commentsToDisplay = viewMode === VIEW_MODE_CHAT ? comments : superChats;
+  const commentsToDisplay = viewMode === VIEW_MODE_CHAT ? commentsByChronologicalOrder : superChatsByTipAmount;
 
   const discussionElement = document.querySelector('.livestream__comments');
   const commentElement = document.querySelector('.livestream-comment');
 
-  // todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
-  function isMyComment(channelId: string) {
-    if (myChannels != null && channelId != null) {
-      for (let i = 0; i < myChannels.length; i++) {
-        if (myChannels[i].claim_id === channelId) {
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-
   React.useEffect(() => {
     if (claimId) {
       doCommentList(uri, '', 1, 75);
@@ -115,6 +103,51 @@ export default function LivestreamComments(props: Props) {
     }
   }, [commentsLength, discussionElement, handleScroll, performedInitialScroll, setPerformedInitialScroll]);
 
+  // sum total amounts for fiat tips and lbc tips
+  if (superChatsByTipAmount) {
+    let fiatAmount = 0;
+    let LBCAmount = 0;
+    for (const superChat of superChatsByTipAmount) {
+      if (superChat.is_fiat) {
+        fiatAmount = fiatAmount + superChat.support_amount;
+      } else {
+        LBCAmount = LBCAmount + superChat.support_amount;
+      }
+    }
+
+    superChatsFiatAmount = fiatAmount;
+    superChatsTotalAmount = LBCAmount;
+  }
+
+  let superChatsReversed;
+  // array of superchats organized by fiat or not first, then support amount
+  if (superChatsByTipAmount) {
+    const clonedSuperchats = JSON.parse(JSON.stringify(superChatsByTipAmount));
+
+    // sort by fiat first then by support amount
+    superChatsReversed = clonedSuperchats.sort(function(a, b) {
+      // if both are fiat, organize by support
+      if (a.is_fiat === b.is_fiat) {
+        return b.support_amount - a.support_amount;
+        // otherwise, if they are not both fiat, put the fiat transaction first
+      } else {
+        return (a.is_fiat === b.is_fiat) ? 0 : a.is_fiat ? -1 : 1;
+      }
+    }).reverse();
+  }
+
+  // todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
+  function isMyComment(channelId: string) {
+    if (myChannels != null && channelId != null) {
+      for (let i = 0; i < myChannels.length; i++) {
+        if (myChannels[i].claim_id === channelId) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
   if (!claim) {
     return null;
   }
@@ -130,41 +163,55 @@ export default function LivestreamComments(props: Props) {
     <div className="card livestream__discussion">
       <div className="card__header--between livestream-discussion__header">
         <div className="livestream-discussion__title">{__('Live discussion')}</div>
-        {superChatsTotalAmount > 0 && (
+        {(superChatsTotalAmount || 0) > 0 && (
           <div className="recommended-content__toggles">
+
+            {/* the superchats in chronological order button */}
             <Button
               className={classnames('button-toggle', {
                 'button-toggle--active': viewMode === VIEW_MODE_CHAT,
               })}
               label={__('Chat')}
-              onClick={() => setViewMode(VIEW_MODE_CHAT)}
+              onClick={function() {
+                setViewMode(VIEW_MODE_CHAT);
+                const livestreamCommentsDiv = document.getElementsByClassName('livestream__comments')[0];
+                const divHeight = livestreamCommentsDiv.scrollHeight;
+                livestreamCommentsDiv.scrollTop = divHeight;
+              }}
             />
 
+            {/* the button to show superchats listed by most to least support amount */}
             <Button
               className={classnames('button-toggle', {
                 'button-toggle--active': viewMode === VIEW_MODE_SUPER_CHAT,
               })}
               label={
                 <>
-                  <CreditAmount amount={superChatsTotalAmount} size={8} /> {__('Tipped')}
+                  <CreditAmount amount={superChatsTotalAmount || 0} size={8} /> /
+                  <CreditAmount amount={superChatsFiatAmount || 0} size={8} isFiat /> {' '}{__('Tipped')}
                 </>
               }
-              onClick={() => setViewMode(VIEW_MODE_SUPER_CHAT)}
+              onClick={function() {
+                setViewMode(VIEW_MODE_SUPER_CHAT);
+                const livestreamCommentsDiv = document.getElementsByClassName('livestream__comments')[0];
+                const divHeight = livestreamCommentsDiv.scrollHeight;
+                livestreamCommentsDiv.scrollTop = divHeight * -1;
+              }}
             />
           </div>
         )}
       </div>
       <>
-        {fetchingComments && !comments && (
+        {fetchingComments && !commentsByChronologicalOrder && (
           <div className="main--empty">
             <Spinner />
           </div>
         )}
         <div ref={commentsRef} className="livestream__comments-wrapper">
-          {viewMode === VIEW_MODE_CHAT && superChatsTotalAmount > 0 && superChats && (
+          {viewMode === VIEW_MODE_CHAT && superChatsByTipAmount && (superChatsTotalAmount || 0) > 0 && (
             <div className="livestream-superchats__wrapper">
               <div className="livestream-superchats__inner">
-                {superChats.map((superChat: Comment) => (
+                {superChatsByTipAmount.map((superChat: Comment) => (
                   <Tooltip key={superChat.comment_id} label={superChat.comment}>
                     <div className="livestream-superchat">
                       <div className="livestream-superchat__thumbnail">
@@ -187,9 +234,23 @@ export default function LivestreamComments(props: Props) {
             </div>
           )}
 
-          {!fetchingComments && comments.length > 0 ? (
+          {/* top to bottom comment display */}
+          {!fetchingComments && commentsByChronologicalOrder.length > 0 ? (
             <div className="livestream__comments">
-              {commentsToDisplay.map((comment) => (
+              {viewMode === VIEW_MODE_CHAT && commentsToDisplay.map((comment) => (
+                <LivestreamComment
+                  key={comment.comment_id}
+                  uri={uri}
+                  authorUri={comment.channel_url}
+                  commentId={comment.comment_id}
+                  message={comment.comment}
+                  supportAmount={comment.support_amount}
+                  isFiat={comment.is_fiat}
+                  commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
+                />
+              ))}
+
+              {viewMode === VIEW_MODE_SUPER_CHAT && superChatsReversed && superChatsReversed.map((comment) => (
                 <LivestreamComment
                   key={comment.comment_id}
                   uri={uri}

ui/component/walletSendTip/view.jsx

@@ -122,7 +122,7 @@ function WalletSendTip(props: Props) {
 
   // check if creator has an account saved
   React.useEffect(() => {
-    var tipInputElement = document.getElementById('tip-input');
+    const tipInputElement = document.getElementById('tip-input');
     if (tipInputElement) { tipInputElement.focus() }
   }, []);
 
@@ -141,6 +141,8 @@ function WalletSendTip(props: Props) {
         .then((accountCheckResponse) => {
           if (accountCheckResponse === true && canReceiveFiatTip !== true) {
             setCanReceiveFiatTip(true);
+          } else {
+            setCanReceiveFiatTip(false);
           }
         })
         .catch(function (error) {
@@ -169,7 +171,8 @@ function WalletSendTip(props: Props) {
   }
   const claimTypeText = setClaimTypeText();
 
-  let iconToUse, explainerText;
+  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});
@@ -273,8 +276,8 @@ function WalletSendTip(props: Props) {
           Lbryio.call(
             'customer',
             'tip',
-            {
+            { // round to fix issues with floating point numbers
-              amount: 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_claim_id: channelClaimId,
               tipper_channel_name: sendAnonymously ? '' : activeChannelName,
@@ -295,7 +298,7 @@ function WalletSendTip(props: Props) {
               });
             })
             .catch(function(error) {
-              var 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') {
                 displayError = error.message;
@@ -313,10 +316,53 @@ function WalletSendTip(props: Props) {
     }
   }
 
-  function handleCustomPriceChange(event: SyntheticInputEvent<*>) {
+  const countDecimals = function(value) {
-    const tipAmount = parseFloat(event.target.value);
+    const text = value.toString();
+    const index = text.indexOf('.');
+    return (text.length - index - 1);
+  };
 
-    setCustomTipAmount(tipAmount);
+  function handleCustomPriceChange(event: SyntheticInputEvent<*>) {
+    let tipAmountAsString = event.target.value;
+
+    let tipAmount = parseFloat(tipAmountAsString);
+
+    const howManyDecimals = countDecimals(tipAmountAsString);
+
+    // fiat tip input
+    if (activeTab === TAB_FIAT) {
+      if (Number.isNaN(tipAmount)) {
+        setCustomTipAmount('');
+      }
+
+      // allow maximum of two decimal places
+      if (howManyDecimals > 2) {
+        tipAmount = Math.floor(tipAmount * 100) / 100;
+      }
+
+      // remove decimals, and then get number of digits
+      const howManyDigits = Math.trunc(tipAmount).toString().length;
+
+      if (howManyDigits > 4 && tipAmount !== 1000) {
+        setTipError('Amount cannot be over 1000 dollars');
+        setCustomTipAmount(tipAmount);
+      } else if (tipAmount > 1000) {
+        setTipError('Amount cannot be over 1000 dollars');
+        setCustomTipAmount(tipAmount);
+      } else {
+        setCustomTipAmount(tipAmount);
+      }
+      // LBC tip input
+    } else {
+      // TODO: this is a bit buggy, needs a touchup
+      // if (howManyDecimals > 9) {
+      //   // only allows up to 8 decimal places
+      //   tipAmount = Number(tipAmount.toString().match(/^-?\d+(?:\.\d{0,8})?/)[0]);
+      //
+      //   setTipError('Please only use up to 8 decimals');
+      // }
+      setCustomTipAmount(tipAmount);
+    }
   }
 
   function buildButtonText() {
@@ -331,8 +377,14 @@ function WalletSendTip(props: Props) {
       return false;
     }
 
+    function convertToTwoDecimals(number) {
+      return (Math.round(number * 100) / 100).toFixed(2);
+    }
+
+    const amountToShow = activeTab === TAB_FIAT ? convertToTwoDecimals(tipAmount) : tipAmount;
+
     // if it's a valid number display it, otherwise do an empty string
-    const displayAmount = !isNan(tipAmount) ? tipAmount : '';
+    const displayAmount = !isNan(tipAmount) ? amountToShow : '';
 
     if (activeTab === TAB_BOOST) {
       return (claimIsMine ?  __('Boost Your %claimTypeText%', {claimTypeText}) : __('Boost This %claimTypeText%', {claimTypeText}));
@@ -362,240 +414,242 @@ function WalletSendTip(props: Props) {
   return (
     <Form onSubmit={handleSubmit}>
       {/* if there is no LBC balance, show user frontend to get credits */}
-      {noBalance ? (
+      {/* if there is lbc, the main tip/boost gui with the 3 tabs at the top */}
-        <Card
+      <Card
-          title={<I18nMessage tokens={{ lbc: <LbcSymbol size={22} /> }}>Supporting content requires %lbc%</I18nMessage>}
+        title={<LbcSymbol postfix={claimIsMine ? __('Boost Your %claimTypeText%', {claimTypeText}) : __('Support This %claimTypeText%', {claimTypeText})} size={22} />}
-          subtitle={
+        subtitle={
-            <I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
+          <React.Fragment>
-              With %lbc%, you can send tips to your favorite creators, or help boost their content for more people to
+            {!claimIsMine && (
-              see.
+              <div className="section">
-            </I18nMessage>
+                {/* tip LBC tab button */}
-          }
+                <Button
-          actions={
+                  key="tip"
-            <div className="section__actions">
+                  icon={ICONS.LBC}
-              <Button
+                  label={__('Tip')}
-                icon={ICONS.REWARDS}
+                  button="alt"
-                button="primary"
+                  onClick={() => {
-                label={__('Earn Rewards')}
+                    const tipInputElement = document.getElementById('tip-input');
-                navigate={`/$/${PAGES.REWARDS}`}
+                    if (tipInputElement) { tipInputElement.focus() }
-              />
+                    if (!isConfirming) {
-              <Button icon={ICONS.BUY} button="secondary" label={__('Buy/Swap Credits')} navigate={`/$/${PAGES.BUY}`} />
+                      setActiveTab(TAB_LBC);
-              <Button button="link" label={__('Nevermind')} onClick={closeModal} />
+                    }
+                  }}
+                  className={classnames('button-toggle', { 'button-toggle--active': activeTab === TAB_LBC })}
+                />
+                {/* tip fiat tab button */}
+                {/* @if TARGET='web' */}
+                <Button
+                  key="tip-fiat"
+                  icon={ICONS.FINANCE}
+                  label={__('Tip')}
+                  button="alt"
+                  onClick={() => {
+                    const tipInputElement = document.getElementById('tip-input');
+                    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
+                  key="boost"
+                  icon={ICONS.TRENDING}
+                  label={__('Boost')}
+                  button="alt"
+                  onClick={() => {
+                    const tipInputElement = document.getElementById('tip-input');
+                    if (tipInputElement) { tipInputElement.focus() }
+                    if (!isConfirming) {
+                      setActiveTab(TAB_BOOST);
+                    }
+                  }}
+                  className={classnames('button-toggle', { 'button-toggle--active': activeTab === TAB_BOOST })}
+                />
+              </div>
+            )}
+
+            {/* short explainer under the button */}
+            <div className="section__subtitle">
+              {explainerText + ' '}
+              {/* {activeTab === TAB_FIAT && !hasCardSaved && <Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add A Card')} button="link" />} */}
+              {<Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />}
             </div>
-          }
+          </React.Fragment>
-        />
+        }
-      ) : (
+        actions={
-        // if there is lbc, the main tip/boost gui with the 3 tabs at the top
+          // confirmation modal, allow  user to confirm or cancel transaction
-        <Card
+          isConfirming ? (
-          title={<LbcSymbol postfix={claimIsMine ? __('Boost Your %claimTypeText%', {claimTypeText}) : __('Support This %claimTypeText%', {claimTypeText})} size={22} />}
+            <>
-          subtitle={
+              <div className="section section--padded card--inline confirm__wrapper">
-            <React.Fragment>
-              {!claimIsMine && (
                 <div className="section">
-                  {/* tip LBC tab button */}
+                  <div className="confirm__label">{__('To --[the tip recipient]--')}</div>
+                  <div className="confirm__value">{channelName || title}</div>
+                  <div className="confirm__label">{__('From --[the tip sender]--')}</div>
+                  <div className="confirm__value">
+                    {activeChannelClaim && !incognito ? activeChannelClaim.name : __('Anonymous')}
+                  </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} />}
+                  </div>
+                </div>
+              </div>
+              <div className="section__actions">
+                <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)
+            ? <>
+              <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')}
+                </h3>
+              )}
+
+              {/* section to pick tip/boost amount */}
+              <div className="section">
+                {DEFAULT_TIP_AMOUNTS.map((amount) => (
                   <Button
-                    key="tip"
+                    key={amount}
-                    icon={ICONS.LBC}
+                    disabled={shouldDisableAmountSelector(amount)}
-                    label={__('Tip')}
                     button="alt"
+                    className={classnames('button-toggle button-toggle--expandformobile', {
+                      'button-toggle--active': tipAmount === amount && !useCustomTip,
+                      'button-toggle--disabled': amount > balance,
+                    })}
+                    label={amount}
+                    icon={iconToUse}
                     onClick={() => {
-                      var tipInputElement = document.getElementById('tip-input');
+                      setPresetTipAmount(amount);
-                      if (tipInputElement) { tipInputElement.focus() }
+                      setUseCustomTip(false);
-                      if (!isConfirming) {
-                        setActiveTab(TAB_LBC);
-                      }
                     }}
-                    className={classnames('button-toggle', { 'button-toggle--active': activeTab === TAB_LBC })}
                   />
-                  {/* tip fiat tab button */}
+                ))}
-                  {/* @if TARGET='web' */}
+
+                <Button
+                  button="alt"
+                  className={classnames('button-toggle button-toggle--expandformobile', {
+                    'button-toggle--active': useCustomTip, // set as active
+                  })}
+                  icon={iconToUse}
+                  label={__('Custom')}
+                  onClick={() => setUseCustomTip(true)}
+                  // disabled if it's receive fiat and there is no card or creator can't receive tips
+                  disabled={activeTab === TAB_FIAT && (!hasCardSaved || !canReceiveFiatTip)}
+                />
+
+                {DEFAULT_TIP_AMOUNTS.some((val) => val > balance) && activeTab !== TAB_FIAT && (
                   <Button
-                    key="tip-fiat"
+                    button="secondary"
-                    icon={ICONS.FINANCE}
+                    className="button-toggle-group-action"
-                    label={__('Tip')}
+                    icon={ICONS.BUY}
-                    button="alt"
+                    title={__('Buy or swap more LBRY Credits')}
-                    onClick={() => {
+                    navigate={`/$/${PAGES.BUY}`}
-                      var tipInputElement = document.getElementById('tip-input');
-                      if (tipInputElement) { tipInputElement.focus() }
-                      if (!isConfirming) {
-                        setActiveTab(TAB_FIAT);
-                      }
-                    }}
-                    className={classnames('button-toggle', { 'button-toggle--active': activeTab === TAB_FIAT })}
                   />
-                  {/* @endif */}
+                )}
-                  {/* tip LBC tab button */}
+              </div>
-                  <Button
+
-                    key="boost"
+              {useCustomTip && (
-                    icon={ICONS.TRENDING}
+                <div className="section">
-                    label={__('Boost')}
+                  <FormField
-                    button="alt"
+                    autoFocus
-                    onClick={() => {
+                    name="tip-input"
-                      var tipInputElement = document.getElementById('tip-input');
+                    label={
-                      if (tipInputElement) { tipInputElement.focus() }
+                      <React.Fragment>
-                      if (!isConfirming) {
+                        {__('Custom support amount')}{' '}
-                        setActiveTab(TAB_BOOST);
+                        {activeTab !== TAB_FIAT ? (
-                      }
+                          <I18nMessage
+                            tokens={{ lbc_balance: <CreditAmount precision={4} amount={balance} showLBC={false} /> }}
+                          >
+                            (%lbc_balance% Credits available)
+                          </I18nMessage>
+                        ) : (
+                          'in USD'
+                        )}
+                      </React.Fragment>
+                    }
+                    error={tipError}
+                    min="0"
+                    step="any"
+                    type="number"
+                    style={{
+                      width: activeTab === TAB_FIAT ? '99px' : '160px',
                     }}
-                    className={classnames('button-toggle', { 'button-toggle--active': activeTab === TAB_BOOST })}
+                    placeholder="1.23"
+                    value={customTipAmount}
+                    onChange={(event) => handleCustomPriceChange(event)}
                   />
                 </div>
               )}
 
-              {/* short explainer under the button */}
+              {/* send tip/boost button */}
-              <div className="section__subtitle">
+              <div className="section__actions">
-                {explainerText}
+                <Button
-                {/* {activeTab === TAB_FIAT && !hasCardSaved && <Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add A Card')} button="link" />} */}
+                  autoFocus
-                {<Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />}
+                  icon={isSupport ? ICONS.TRENDING : ICONS.SUPPORT}
+                  button="primary"
+                  type="submit"
+                  disabled={
+                    fetchingChannels ||
+                    isPending ||
+                    tipError ||
+                    !tipAmount ||
+                    (activeTab === TAB_FIAT && (!hasCardSaved || !canReceiveFiatTip))
+                  }
+                  label={buildButtonText()}
+                />
+                {fetchingChannels && <span className="help">{__('Loading your channels...')}</span>}
               </div>
-            </React.Fragment>
+              {activeTab !== TAB_FIAT ? (
-          }
+                <WalletSpendableBalanceHelp />
-          actions={
+              ) : !canReceiveFiatTip ? (
-            // confirmation modal, allow  user to confirm or cancel transaction
+                <div className="help">{__('Only select creators can receive tips at this time')}</div>
-            isConfirming ? (
+              ) : (
-              <>
+                <div className="help">{__('The payment will be made from your saved card')}</div>
-                <div className="section section--padded card--inline confirm__wrapper">
+              )}
-                  <div className="section">
+            </>
-                    <div className="confirm__label">{__('To --[the tip recipient]--')}</div>
+              // if it's LBC and there is no balance, you can prompt to purchase LBC
-                    <div className="confirm__value">{channelName || title}</div>
+               : <Card
-                    <div className="confirm__label">{__('From --[the tip sender]--')}</div>
+                 title={<I18nMessage tokens={{ lbc: <LbcSymbol size={22} /> }}>Supporting content requires %lbc%</I18nMessage>}
-                    <div className="confirm__value">
+                 subtitle={
-                      {activeChannelClaim && !incognito ? activeChannelClaim.name : __('Anonymous')}
+                    <I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
+                      With %lbc%, you can send tips to your favorite creators, or help boost their content for more people to
+                      see.
+                    </I18nMessage>
+                  }
+                 actions={
+                    <div className="section__actions">
+                      <Button
+                        icon={ICONS.REWARDS}
+                        button="primary"
+                        label={__('Earn Rewards')}
+                        navigate={`/$/${PAGES.REWARDS}`}
+                      />
+                      <Button icon={ICONS.BUY} button="secondary" label={__('Buy/Swap Credits')} navigate={`/$/${PAGES.BUY}`} />
+                      <Button button="link" label={__('Nevermind')} onClick={closeModal} />
                     </div>
-                    <div className="confirm__label">{setConfirmLabel()}</div>
+                  }
-                    <div className="confirm__value">
+              />
-                      {activeTab === TAB_FIAT ? <p>$ {tipAmount}</p> : <LbcSymbol postfix={tipAmount} size={22} />}
+          )
-                    </div>
+        }
-                  </div>
+      />
-                </div>
-                <div className="section__actions">
-                  <Button
-                    autoFocus
-                    onClick={handleSubmit}
-                    button="primary"
-                    disabled={isPending}
-                    label={__('Confirm')}
-                  />
-                  <Button button="link" label={__('Cancel')} onClick={() => setIsConfirming(false)} />
-                </div>
-              </>
-            ) : (
-              <>
-                <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')}
-                  </h3>
-                )}
-
-                {/* section to pick tip/boost amount */}
-                <div className="section">
-                  {DEFAULT_TIP_AMOUNTS.map((amount) => (
-                    <Button
-                      key={amount}
-                      disabled={shouldDisableAmountSelector(amount)}
-                      button="alt"
-                      className={classnames('button-toggle button-toggle--expandformobile', {
-                        'button-toggle--active': tipAmount === amount && !useCustomTip,
-                        'button-toggle--disabled': amount > balance,
-                      })}
-                      label={amount}
-                      icon={iconToUse}
-                      onClick={() => {
-                        setPresetTipAmount(amount);
-                        setUseCustomTip(false);
-                      }}
-                    />
-                  ))}
-
-                  <Button
-                    button="alt"
-                    className={classnames('button-toggle button-toggle--expandformobile', {
-                      'button-toggle--active': useCustomTip, // set as active
-                    })}
-                    icon={iconToUse}
-                    label={__('Custom')}
-                    onClick={() => setUseCustomTip(true)}
-                    // disabled if it's receive fiat and there is no card or creator can't receive tips
-                    disabled={activeTab === TAB_FIAT && (!hasCardSaved || !canReceiveFiatTip)}
-                  />
-
-                  {DEFAULT_TIP_AMOUNTS.some((val) => val > balance) && activeTab !== TAB_FIAT && (
-                    <Button
-                      button="secondary"
-                      className="button-toggle-group-action"
-                      icon={ICONS.BUY}
-                      title={__('Buy or swap more LBRY Credits')}
-                      navigate={`/$/${PAGES.BUY}`}
-                    />
-                  )}
-                </div>
-
-                {useCustomTip && (
-                  <div className="section">
-                    <FormField
-                      autoFocus
-                      name="tip-input"
-                      label={
-                        <React.Fragment>
-                          {__('Custom support amount')}{' '}
-                          {activeTab !== TAB_FIAT ? (
-                            <I18nMessage
-                              tokens={{ lbc_balance: <CreditAmount precision={4} amount={balance} showLBC={false} /> }}
-                            >
-                              (%lbc_balance% Credits available)
-                            </I18nMessage>
-                          ) : (
-                            'in USD'
-                          )}
-                        </React.Fragment>
-                      }
-                      className="form-field--price-amount"
-                      error={tipError}
-                      min="0"
-                      step="any"
-                      type="number"
-                      placeholder="1.23"
-                      value={customTipAmount}
-                      onChange={(event) => handleCustomPriceChange(event)}
-                    />
-                  </div>
-                )}
-
-                {/* send tip/boost button */}
-                <div className="section__actions">
-                  <Button
-                    autoFocus
-                    icon={isSupport ? ICONS.TRENDING : ICONS.SUPPORT}
-                    button="primary"
-                    type="submit"
-                    disabled={
-                      fetchingChannels ||
-                      isPending ||
-                      tipError ||
-                      !tipAmount ||
-                      (activeTab === TAB_FIAT && (!hasCardSaved || !canReceiveFiatTip))
-                    }
-                    label={buildButtonText()}
-                  />
-                  {fetchingChannels && <span className="help">{__('Loading your channels...')}</span>}
-                </div>
-                {activeTab !== TAB_FIAT ? (
-                  <WalletSpendableBalanceHelp />
-                ) : !canReceiveFiatTip ? (
-                  <div className="help">{__('Only select creators can receive tips at this time')}</div>
-                ) : (
-                  <div className="help">{__('The payment will be made from your saved card')}</div>
-                )}
-              </>
-            )
-          }
-        />
-      )}
     </Form>
   );
 }

ui/component/walletTipAmountSelector/view.jsx

@@ -263,7 +263,6 @@ function WalletTipAmountSelector(props: Props) {
               //   </div>
               // </>
             }
-            className="form-field--price-amount"
             error={tipError}
             min="0"
             step="any"

ui/page/settingsStripeAccount/index.js

@@ -2,12 +2,14 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import StripeAccountConnection from './view';
 import { selectUser } from 'redux/selectors/user';
+import { doToast } from 'redux/actions/notifications';
 
-// function that receives state parameter and returns object of functions that accept  state
 const select = (state) => ({
   user: selectUser(state),
 });
 
-// const perform = (dispatch) => ({});
+const perform = (dispatch) => ({
+  doToast: (options) => dispatch(doToast(options)),
+});
 
-export default withRouter(connect(select)(StripeAccountConnection));
+export default withRouter(connect(select, perform)(StripeAccountConnection));

ui/page/settingsStripeAccount/view.jsx

@@ -31,6 +31,8 @@ if (isDev) {
 type Props = {
   source: string,
   user: User,
+  doOpenModal: (string, {}) => void,
+  doToast: ({ message: string }) => void,
 };
 
 type State = {
@@ -68,6 +70,8 @@ class StripeAccountConnection extends React.Component<Props, State> {
   componentDidMount() {
     const { user } = this.props;
 
+    let doToast = this.props.doToast;
+
     // $FlowFixMe
     this.experimentalUiEnabled = user && user.experimental_ui;
 
@@ -127,10 +131,8 @@ class StripeAccountConnection extends React.Component<Props, State> {
           ).then((accountListResponse: any) => {
             // TODO type this
             that.setState({
-              accountTransactions: accountListResponse,
+              accountTransactions: accountListResponse.reverse(),
             });
-
-            console.log(accountListResponse);
           });
         }
 
@@ -165,6 +167,9 @@ class StripeAccountConnection extends React.Component<Props, State> {
           // get stripe link and set it on the frontend
           getAndSetAccountLink(true);
         } else {
+          // probably an error from stripe
+          const displayString = __('There was an error getting your account setup, please try again later');
+          doToast({ message: displayString, isError: true });
           // not an error from Beamer, throw it
           throw new Error(error);
         }
@@ -296,7 +301,7 @@ class StripeAccountConnection extends React.Component<Props, State> {
                       </thead>
                       <tbody>
                         {accountTransactions &&
-                          accountTransactions.reverse().map((transaction) => (
+                          accountTransactions.map((transaction) => (
                             <tr key={transaction.name + transaction.created_at}>
                               <td>{moment(transaction.created_at).format('LLL')}</td>
                               <td>

ui/page/settingsStripeCard/view.jsx

@@ -19,6 +19,9 @@ 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 CARD_SETUP_ERROR_RESPONSE = __('There was an error getting your card setup, please try again later');
+
 // eslint-disable-next-line flowtype/no-types-missing-file-annotation
 type Props = {
   disabled: boolean,
@@ -57,8 +60,6 @@ class SettingsStripeCard extends React.Component<Props, State> {
   componentDidMount() {
     let that = this;
 
-    console.log(this.props);
-
     let doToast = this.props.doToast;
 
     const script = document.createElement('script');
@@ -100,8 +101,6 @@ class SettingsStripeCard extends React.Component<Props, State> {
             let topOfDisplay = customer.email.split('@')[0];
             let bottomOfDisplay = '@' + customer.email.split('@')[1];
 
-            console.log(customerStatusResponse.Customer);
-
             let cardDetails = {
               brand: card.brand,
               expiryYear: card.exp_year,
@@ -133,8 +132,6 @@ class SettingsStripeCard extends React.Component<Props, State> {
               },
               'post'
             ).then((customerSetupResponse) => {
-              console.log(customerSetupResponse);
-
               clientSecret = customerSetupResponse.client_secret;
 
               // instantiate stripe elements
@@ -154,14 +151,10 @@ class SettingsStripeCard extends React.Component<Props, State> {
             that.setState({
               customerTransactions: customerTransactionsResponse,
             });
-
-            console.log(customerTransactionsResponse);
           });
           // if the status call fails, either an actual error or need to run setup first
         })
         .catch(function (error) {
-          console.log(error);
-
           // errorString passed from the API (with a 403 error)
           const errorString = 'user as customer is not setup yet';
 
@@ -181,18 +174,17 @@ class SettingsStripeCard extends React.Component<Props, State> {
               },
               'post'
             ).then((customerSetupResponse) => {
-              console.log(customerSetupResponse);
-
               clientSecret = customerSetupResponse.client_secret;
 
               // instantiate stripe elements
               setupStripe();
             });
+            // 500 error from the backend being down
           } else if (error === 'internal_apis_down') {
-            var displayString = 'There was an error from the server, please let support know';
+            doToast({ message: APIS_DOWN_ERROR_RESPONSE, isError: true });
-            doToast({ message: displayString, isError: true });
           } else {
-            console.log('Unseen before error');
+            // probably an error from stripe
+            doToast({ message: CARD_SETUP_ERROR_RESPONSE, isError: true });
           }
         });
     }, 250);
@@ -261,8 +253,6 @@ class SettingsStripeCard extends React.Component<Props, State> {
               })
               .then(function (result) {
                 if (result.error) {
-                  console.log(result);
-
                   changeLoadingState(false);
                   var displayError = document.getElementById('card-errors');
                   displayError.textContent = result.error.message;
@@ -346,8 +336,6 @@ class SettingsStripeCard extends React.Component<Props, State> {
               });
             });
 
-            console.log(result);
-
             changeLoadingState(false);
           });
         };