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 againt o create comment
     if (commentFailure && tipAmount === successTip.tipAmount) {
       handleCreateComment(successTip.txid);
       return;
@@ -147,6 +148,21 @@ 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;
+    }
+
+    console.log(activeChannelClaim);
+
     setIsSubmitting(true);
 
     if (activeTab === TAB_LBC) {
@@ -160,6 +176,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,18 +192,6 @@ 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;
@@ -187,8 +199,8 @@ export function CommentCreate(props: Props) {
       Lbryio.call(
         'customer',
         'tip',
-        {
-          amount: 100 * roundedAmount, // convert from dollars to cents
+        { // 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,
           tipper_channel_name: activeChannelName,

ui/component/livestreamComments/view.jsx

@@ -22,7 +22,9 @@ type Props = {
   fetchingComments: boolean,
   doSuperChatList: (string) => void,
   superChats: Array<Comment>,
+  superChatsReversed: Array,
   superChatsTotalAmount: number,
+  superChatsFiatAmount: number,
   myChannels: ?Array<ChannelClaim>,
 };
 
@@ -38,15 +40,16 @@ export default function LivestreamComments(props: Props) {
     embed,
     doCommentSocketConnect,
     doCommentSocketDisconnect,
-    comments,
+    comments, // superchats in chronological format
     doCommentList,
     fetchingComments,
     doSuperChatList,
-    superChats,
-    superChatsTotalAmount,
     myChannels,
+    superChats, // superchats organized by tip amount
   } = props;
 
+  let { superChatsReversed, superChatsFiatAmount, superChatsTotalAmount } = props;
+
   const commentsRef = React.createRef();
   const [scrollBottom, setScrollBottom] = React.useState(true);
   const [viewMode, setViewMode] = React.useState(VIEW_MODE_CHAT);
@@ -58,6 +61,36 @@ export default function LivestreamComments(props: Props) {
   const discussionElement = document.querySelector('.livestream__comments');
   const commentElement = document.querySelector('.livestream-comment');
 
+  // sum total amounts for fiat tips and lbc tips
+  if (superChats) {
+    let fiatAmount = 0;
+    let LBCAmount = 0;
+    for (const superChat of superChats) {
+      if (superChat.is_fiat) {
+        fiatAmount = fiatAmount + superChat.support_amount;
+      } else {
+        LBCAmount = LBCAmount + superChat.support_amount;
+      }
+    }
+
+    superChatsFiatAmount = fiatAmount;
+    superChatsTotalAmount = LBCAmount;
+  }
+
+  // array of superchats organized by fiat or not first, then support amount
+  if (superChats) {
+    const clonedSuperchats = JSON.parse(JSON.stringify(superChats));
+
+    // sort by fiat first then by support amount
+    superChatsReversed = clonedSuperchats.sort(function(a,b) {
+      if (a.is_fiat === b.is_fiat) {
+        return b.support_amount - a.support_amount;
+      } 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) {
@@ -71,6 +104,7 @@ export default function LivestreamComments(props: Props) {
   }
 
   React.useEffect(() => {
+
     if (claimId) {
       doCommentList(uri, '', 1, 75);
       doSuperChatList(uri);
@@ -132,24 +166,38 @@ export default function LivestreamComments(props: Props) {
         <div className="livestream-discussion__title">{__('Live discussion')}</div>
         {superChatsTotalAmount > 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} size={8} /> /
+                  <CreditAmount amount={superChatsFiatAmount} size={8} isFiat={true} /> {' '}{__('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>
         )}
@@ -187,9 +235,23 @@ export default function LivestreamComments(props: Props) {
             </div>
           )}
 
+          {/* top to bottom comment display */}
           {!fetchingComments && comments.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

@@ -273,8 +273,8 @@ function WalletSendTip(props: Props) {
           Lbryio.call(
             'customer',
             'tip',
-            {
-              amount: 100 * tipAmount, // convert from dollars to cents
+            { // 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,
               tipper_channel_name: sendAnonymously ? '' : activeChannelName,
@@ -313,10 +313,49 @@ function WalletSendTip(props: Props) {
     }
   }
 
-  function handleCustomPriceChange(event: SyntheticInputEvent<*>) {
-    const tipAmount = parseFloat(event.target.value);
+  var countDecimals = function(value) {
+    var text = value.toString();
+    var 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);
+
+    // allow maximum two decimals
+    if (activeTab === TAB_FIAT) {
+
+      if (Number.isNaN(tipAmount)) {
+        setCustomTipAmount('');
+      }
+
+      if (howManyDecimals > 2) {
+        tipAmount = Math.floor(tipAmount * 100) / 100;
+      }
+
+      const howManyDigits = Math.trunc(tipAmount).toString().length;
+
+      if (howManyDigits > 4 && tipAmount !== 1000) {
+        setTipError('Amount cannot be over 1000 dollars');
+      } else if (tipAmount > 1000) {
+        setTipError('Amount cannot be over 1000 dollars');
+        setCustomTipAmount(tipAmount);
+      } else {
+        setCustomTipAmount(tipAmount);
+      }
+    } else {
+      if (howManyDecimals > 9) {
+          tipAmount = Number(tipAmount.toString().match(/^-?\d+(?:\.\d{0,8})?/)[0]);
+
+        setTipError('Please only use up to 8 decimals')
+      }
+      setCustomTipAmount(tipAmount);
+    }
   }
 
   function buildButtonText() {
@@ -331,8 +370,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,7 +407,7 @@ function WalletSendTip(props: Props) {
   return (
     <Form onSubmit={handleSubmit}>
       {/* if there is no LBC balance, show user frontend to get credits */}
-      {noBalance ? (
+      {1 == 2 ? (
         <Card
           title={<I18nMessage tokens={{ lbc: <LbcSymbol size={22} /> }}>Supporting content requires %lbc%</I18nMessage>}
           subtitle={
@@ -444,7 +489,7 @@ function WalletSendTip(props: Props) {
 
               {/* short explainer under the button */}
               <div className="section__subtitle">
-                {explainerText}
+                {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>
@@ -464,7 +509,7 @@ function WalletSendTip(props: Props) {
                     </div>
                     <div className="confirm__label">{setConfirmLabel()}</div>
                     <div className="confirm__value">
-                      {activeTab === TAB_FIAT ? <p>$ {tipAmount}</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>
@@ -479,8 +524,10 @@ function WalletSendTip(props: Props) {
                   <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>
@@ -559,6 +606,9 @@ function WalletSendTip(props: Props) {
                       min="0"
                       step="any"
                       type="number"
+                      style={{
+                        width: activeTab === TAB_FIAT ? '99px' : '160px',
+                      }}
                       placeholder="1.23"
                       value={customTipAmount}
                       onChange={(event) => handleCustomPriceChange(event)}
@@ -591,7 +641,28 @@ function WalletSendTip(props: Props) {
                 ) : (
                   <div className="help">{__('The payment will be made from your saved card')}</div>
                 )}
-              </>
+              </> : <>
+                  <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.
+                      </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>
+                    }
+                /></>
             )
           }
         />

ui/page/settingsStripeAccount/index.js

@@ -2,12 +2,15 @@ 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,7 @@ if (isDev) {
 type Props = {
   source: string,
   user: User,
+  doOpenModal: (string, {}) => void,
 };
 
 type State = {
@@ -68,6 +69,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,7 +130,7 @@ class StripeAccountConnection extends React.Component<Props, State> {
           ).then((accountListResponse: any) => {
             // TODO type this
             that.setState({
-              accountTransactions: accountListResponse,
+              accountTransactions: accountListResponse.reverse(),
             });
 
             console.log(accountListResponse);
@@ -165,9 +168,13 @@ class StripeAccountConnection extends React.Component<Props, State> {
           // get stripe link and set it on the frontend
           getAndSetAccountLink(true);
         } else {
+          // probably an error from stripe
+          var displayString = 'There was an error getting your account setup, please let support know';
+          doToast({ message: displayString, isError: true });
           // not an error from Beamer, throw it
           throw new Error(error);
         }
+
       });
   }
 
@@ -296,7 +303,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

@@ -188,10 +188,15 @@ class SettingsStripeCard extends React.Component<Props, State> {
               // 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: displayString, isError: true });
           } else {
+            // probably an error from stripe
+            var displayString = 'There was an error getting your card setup, please let support know';
+            doToast({ message: displayString, isError: true });
+
             console.log('Unseen before error');
           }
         });

ui/scss/component/_form-field.scss

@@ -404,9 +404,9 @@ fieldset-group {
   }
 }
 
-.form-field--price-amount {
-  max-width: 6em;
-}
+  //.form-field--price-amount {
+  //  max-width: 6em;
+  //}
 
 .form-field--price-amount--auto {
   width: auto;