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,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;
+    }
+
     console.log(activeChannelClaim);
 
     setIsSubmitting(true);
@@ -162,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 });
         },
         () => {
@@ -170,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;
 
@@ -190,8 +200,8 @@ export function CommentCreate(props: Props) {
       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,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/walletFiatAccountHistory/index.js

@@ -0,0 +1,40 @@
+import { connect } from 'react-redux';
+import {
+  selectBalance,
+  selectClaimsBalance,
+  selectSupportsBalance,
+  selectTipsBalance,
+  selectIsFetchingUtxoCounts,
+  selectUtxoCounts,
+  doFetchUtxoCounts,
+  doUtxoConsolidate,
+  selectIsConsolidatingUtxos,
+  selectIsMassClaimingTips,
+  selectPendingConsolidateTxid,
+  selectPendingMassClaimTxid,
+} from 'lbry-redux';
+import { doOpenModal } from 'redux/actions/app';
+import { selectSyncHash } from 'redux/selectors/sync';
+import { selectClaimedRewards } from 'redux/selectors/rewards';
+import WalletBalance from './view';
+
+const select = state => ({
+  balance: selectBalance(state),
+  claimsBalance: selectClaimsBalance(state) || 0,
+  supportsBalance: selectSupportsBalance(state) || 0,
+  tipsBalance: selectTipsBalance(state) || 0,
+  rewards: selectClaimedRewards(state),
+  hasSynced: Boolean(selectSyncHash(state)),
+  fetchingUtxoCounts: selectIsFetchingUtxoCounts(state),
+  consolidatingUtxos: selectIsConsolidatingUtxos(state),
+  massClaimingTips: selectIsMassClaimingTips(state),
+  utxoCounts: selectUtxoCounts(state),
+  consolidateIsPending: selectPendingConsolidateTxid(state),
+  massClaimIsPending: selectPendingMassClaimTxid(state),
+});
+
+export default connect(select, {
+  doOpenModal,
+  doFetchUtxoCounts,
+  doUtxoConsolidate,
+})(WalletBalance);

ui/component/walletFiatAccountHistory/view.jsx

@@ -0,0 +1,181 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import * as MODALS from 'constants/modal_types';
+import * as PAGES from 'constants/pages';
+import React from 'react';
+import CreditAmount from 'component/common/credit-amount';
+import Button from 'component/button';
+import HelpLink from 'component/common/help-link';
+import Card from 'component/common/card';
+import Icon from 'component/common/icon';
+import LbcSymbol from 'component/common/lbc-symbol';
+import I18nMessage from 'component/i18nMessage';
+import { formatNumberWithCommas } from 'util/number';
+import { Lbryio } from 'lbryinc';
+import moment from 'moment';
+
+type Props = {
+  accountDetails: any,
+  transactions: any,
+};
+
+const WalletBalance = (props: Props) => {
+  const {
+
+  } = props;
+
+  // receive transactions from parent component
+  let accountTransactions = props.transactions;
+
+  // reverse so most recent payments come first
+  if(accountTransactions){
+    accountTransactions = accountTransactions.reverse();
+  }
+
+  if(accountTransactions && accountTransactions.length > 10 ){
+    accountTransactions.length = 10;
+  }
+
+  const [detailsExpanded, setDetailsExpanded] = React.useState(false);
+  const [accountStatusResponse, setAccountStatusResponse] = React.useState();
+  const [subscriptions, setSubscriptions] = React.useState([]);
+  
+  var environment = 'test';
+
+  function getAccountStatus(){
+    return Lbryio.call(
+      'account',
+      'status',
+      {
+        environment
+      },
+      'post'
+    );
+  }
+
+  React.useEffect(() => {
+
+
+    (async function(){
+      const response = await getAccountStatus();
+
+      setAccountStatusResponse(response);
+
+      console.log(response);
+    })();
+  }, []);
+
+  return (
+    <><Card
+      title={'Tip History'}
+      body={1 == 1 && (
+          <>
+            <div className="table__wrapper">
+              <table className="table table--transactions">
+                <thead>
+                <tr>
+                  <th className="date-header">{__('Date')}</th>
+                  <th>{<>{__('Receiving Channel Name')}</>}</th>
+                  <th>{__('Tip Location')}</th>
+                  <th>{__('Amount (USD)')} </th>
+                  <th>{__('Processing Fee')}</th>
+                  <th>{__('Odysee Fee')}</th>
+                  <th>{__('Received Amount')}</th>
+                </tr>
+                </thead>
+                <tbody>
+                {accountTransactions &&
+                accountTransactions.map((transaction) => (
+                  <tr key={transaction.name + transaction.created_at}>
+                    <td>{moment(transaction.created_at).format('LLL')}</td>
+                    <td>
+                      <Button
+                        className="stripe__card-link-text"
+                        navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
+                        label={transaction.channel_name}
+                        button="link"
+                      />
+                    </td>
+                    <td>
+                      <Button
+                        className="stripe__card-link-text"
+                        navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
+                        label={
+                          transaction.channel_claim_id === transaction.source_claim_id
+                            ? 'Channel Page'
+                            : 'File Page'
+                        }
+                        button="link"
+                      />
+                    </td>
+                    <td>${transaction.tipped_amount / 100}</td>
+                    <td>${transaction.transaction_fee / 100}</td>
+                    <td>${transaction.application_fee / 100}</td>
+                    <td>${transaction.received_amount / 100}</td>
+                  </tr>
+                ))}
+                </tbody>
+              </table>
+              {!accountTransactions && <p style={{textAlign:"center", marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
+            </div>
+          </>
+      )}
+    />
+
+  <Card
+    title={__('Subscriptions')}
+    body={
+      <>
+        <div className="table__wrapper">
+          <table className="table table--transactions">
+            <thead>
+            <tr>
+              <th className="date-header">{__('Date')}</th>
+              <th>{<>{__('Receiving Channel Name')}</>}</th>
+              <th>{__('Tip Location')}</th>
+              <th>{__('Amount (USD)')} </th>
+              <th>{__('Card Last 4')}</th>
+              <th>{__('Anonymous')}</th>
+            </tr>
+            </thead>
+            <tbody>
+            {subscriptions &&
+            subscriptions.reverse().map((transaction) => (
+              <tr key={transaction.name + transaction.created_at}>
+                <td>{moment(transaction.created_at).format('LLL')}</td>
+                <td>
+                  <Button
+                    className="stripe__card-link-text"
+                    navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
+                    label={transaction.channel_name}
+                    button="link"
+                  />
+                </td>
+                <td>
+                  <Button
+                    className="stripe__card-link-text"
+                    navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
+                    label={
+                      transaction.channel_claim_id === transaction.source_claim_id
+                        ? 'Channel Page'
+                        : 'File Page'
+                    }
+                    button="link"
+                  />
+                </td>
+                <td>${transaction.tipped_amount / 100}</td>
+                <td>{lastFour}</td>
+                <td>{transaction.private_tip ? 'Yes' : 'No'}</td>
+              </tr>
+            ))}
+            </tbody>
+          </table>
+          {(!subscriptions || subscriptions.length === 0) && <p style={{textAlign:"center", marginTop: '22px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Subscriptions</p>}
+        </div>
+      </>
+    }
+  /></>
+  );
+};
+
+export default WalletBalance;

ui/component/walletFiatBalance/index.js

@@ -0,0 +1,40 @@
+import { connect } from 'react-redux';
+import {
+  selectBalance,
+  selectClaimsBalance,
+  selectSupportsBalance,
+  selectTipsBalance,
+  selectIsFetchingUtxoCounts,
+  selectUtxoCounts,
+  doFetchUtxoCounts,
+  doUtxoConsolidate,
+  selectIsConsolidatingUtxos,
+  selectIsMassClaimingTips,
+  selectPendingConsolidateTxid,
+  selectPendingMassClaimTxid,
+} from 'lbry-redux';
+import { doOpenModal } from 'redux/actions/app';
+import { selectSyncHash } from 'redux/selectors/sync';
+import { selectClaimedRewards } from 'redux/selectors/rewards';
+import WalletBalance from './view';
+
+const select = state => ({
+  balance: selectBalance(state),
+  claimsBalance: selectClaimsBalance(state) || 0,
+  supportsBalance: selectSupportsBalance(state) || 0,
+  tipsBalance: selectTipsBalance(state) || 0,
+  rewards: selectClaimedRewards(state),
+  hasSynced: Boolean(selectSyncHash(state)),
+  fetchingUtxoCounts: selectIsFetchingUtxoCounts(state),
+  consolidatingUtxos: selectIsConsolidatingUtxos(state),
+  massClaimingTips: selectIsMassClaimingTips(state),
+  utxoCounts: selectUtxoCounts(state),
+  consolidateIsPending: selectPendingConsolidateTxid(state),
+  massClaimIsPending: selectPendingMassClaimTxid(state),
+});
+
+export default connect(select, {
+  doOpenModal,
+  doFetchUtxoCounts,
+  doUtxoConsolidate,
+})(WalletBalance);

ui/component/walletFiatBalance/view.jsx

@@ -0,0 +1,103 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import * as MODALS from 'constants/modal_types';
+import * as PAGES from 'constants/pages';
+import React from 'react';
+import CreditAmount from 'component/common/credit-amount';
+import Button from 'component/button';
+import HelpLink from 'component/common/help-link';
+import Card from 'component/common/card';
+import Icon from 'component/common/icon';
+import LbcSymbol from 'component/common/lbc-symbol';
+import I18nMessage from 'component/i18nMessage';
+import { formatNumberWithCommas } from 'util/number';
+
+type Props = {
+  accountDetails: any,
+};
+
+const WalletBalance = (props: Props) => {
+  const {
+    accountDetails,
+  } = props;
+
+  console.log('account details');
+  console.log(accountDetails);
+
+  const [detailsExpanded, setDetailsExpanded] = React.useState(false);
+
+  return (
+    <>{1 == 1 && <Card
+      title={<><Icon size="18" icon={ICONS.FINANCE} />{accountDetails && accountDetails.total_received_unpaid/100 || 0} USD</>}
+      subtitle={
+          <I18nMessage>
+            This is your remaining balance that can still be withdrawn to your bank account
+          </I18nMessage>
+      }
+      actions={
+        <>
+          <h2 className="section__title--small">
+            ${accountDetails && accountDetails.total_tipped / 100 || 0} Total Received Tips
+          </h2>
+
+          <h2 className="section__title--small">
+            ${accountDetails && accountDetails.total_paid_out/100 || 0}  Withdrawn
+            <Button
+              button="link"
+              label={detailsExpanded ? __('View less') : __('View more')}
+              iconRight={detailsExpanded ? ICONS.UP : ICONS.DOWN}
+              onClick={() => setDetailsExpanded(!detailsExpanded)}
+            />
+          </h2>
+
+          {/* view more section */}
+          {detailsExpanded && (
+            <div className="section__subtitle">
+              <dl>
+                <dt>
+                  <span className="dt__text">{__('Earned from uploads')}</span>
+                  {/*<span className="help--dt">({__('Earned from channel page')})</span>*/}
+                </dt>
+                <dd>
+                  <span className="dd__text">
+                    {Boolean(1) && (
+                      <Button
+                        button="link"
+                        className="dd__button"
+                        icon={ICONS.UNLOCK}
+                      />
+                    )}
+                    <CreditAmount amount={1} precision={4} />
+                  </span>
+                </dd>
+
+                <dt>
+                  <span className="dt__text">{__('Earned from channel page')}</span>
+                  {/*<span className="help--dt">({__('Delete or edit past content to spend')})</span>*/}
+                </dt>
+                <dd>
+                  <CreditAmount amount={1} precision={4} />
+                </dd>
+
+                {/*<dt>*/}
+                {/*  <span className="dt__text">{__('...supporting content')}</span>*/}
+                {/*  <span className="help--dt">({__('Delete supports to spend')})</span>*/}
+                {/*</dt>*/}
+                {/*<dd>*/}
+                {/*  <CreditAmount amount={1} precision={4} />*/}
+                {/*</dd>*/}
+              </dl>
+            </div>
+          )}
+
+          <div className="section__actions">
+            <Button button="primary" label={__('Receive Payout')} icon={ICONS.SEND}  />
+            <Button button="secondary" label={__('Account Configuration')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} />
+          </div>
+        </>
+      }
+    />}</>
+  );
+};
+
+export default WalletBalance;

ui/component/walletFiatPaymentBalance/index.js

@@ -0,0 +1,40 @@
+import { connect } from 'react-redux';
+import {
+  selectBalance,
+  selectClaimsBalance,
+  selectSupportsBalance,
+  selectTipsBalance,
+  selectIsFetchingUtxoCounts,
+  selectUtxoCounts,
+  doFetchUtxoCounts,
+  doUtxoConsolidate,
+  selectIsConsolidatingUtxos,
+  selectIsMassClaimingTips,
+  selectPendingConsolidateTxid,
+  selectPendingMassClaimTxid,
+} from 'lbry-redux';
+import { doOpenModal } from 'redux/actions/app';
+import { selectSyncHash } from 'redux/selectors/sync';
+import { selectClaimedRewards } from 'redux/selectors/rewards';
+import WalletBalance from './view';
+
+const select = state => ({
+  balance: selectBalance(state),
+  claimsBalance: selectClaimsBalance(state) || 0,
+  supportsBalance: selectSupportsBalance(state) || 0,
+  tipsBalance: selectTipsBalance(state) || 0,
+  rewards: selectClaimedRewards(state),
+  hasSynced: Boolean(selectSyncHash(state)),
+  fetchingUtxoCounts: selectIsFetchingUtxoCounts(state),
+  consolidatingUtxos: selectIsConsolidatingUtxos(state),
+  massClaimingTips: selectIsMassClaimingTips(state),
+  utxoCounts: selectUtxoCounts(state),
+  consolidateIsPending: selectPendingConsolidateTxid(state),
+  massClaimIsPending: selectPendingMassClaimTxid(state),
+});
+
+export default connect(select, {
+  doOpenModal,
+  doFetchUtxoCounts,
+  doUtxoConsolidate,
+})(WalletBalance);

ui/component/walletFiatPaymentBalance/view.jsx

@@ -0,0 +1,75 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import * as MODALS from 'constants/modal_types';
+import * as PAGES from 'constants/pages';
+import React from 'react';
+import CreditAmount from 'component/common/credit-amount';
+import Button from 'component/button';
+import HelpLink from 'component/common/help-link';
+import Card from 'component/common/card';
+import Icon from 'component/common/icon';
+import LbcSymbol from 'component/common/lbc-symbol';
+import I18nMessage from 'component/i18nMessage';
+import { formatNumberWithCommas } from 'util/number';
+
+type Props = {
+  totalTippedAmount: number,
+  accountDetails: any,
+  transactions: any,
+};
+
+
+
+const WalletBalance = (props: Props) => {
+  const {
+    accountDetails,
+    totalTippedAmount,
+    transactions,
+  } = props;
+
+  const [detailsExpanded, setDetailsExpanded] = React.useState(false);
+  const [totalCreatorsSupported, setTotalCreatorsSupported] = React.useState(false);
+
+  // calculate how many unique users tipped
+  React.useEffect(() => {
+    if(transactions){
+      let channelNames = []
+
+      for(const transaction of transactions){
+        channelNames.push(transaction.channel_name)
+        console.log(transaction.channel_name);
+      }
+
+      let unique = [...new Set(channelNames)];
+      setTotalCreatorsSupported(unique.length);
+    }
+  }, [transactions]);
+
+  return (
+    <>{1 == 1 && <Card
+      title={<><Icon size="18" icon={ICONS.FINANCE} />{totalTippedAmount} USD</>}
+      subtitle={
+          <I18nMessage>
+            The total amount you have tipped to different creators
+          </I18nMessage>
+      }
+      actions={
+        <>
+          <h2 className="section__title--small">
+            {transactions && transactions.length} Total Tips
+          </h2>
+
+          <h2 className="section__title--small">
+            {totalCreatorsSupported || 0} Creators Supported
+          </h2>
+
+          <div className="section__actions">
+            <Button button="secondary" label={__('Manage Cards')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} />
+          </div>
+        </>
+      }
+    />}</>
+  );
+};
+
+export default WalletBalance;

ui/component/walletFiatPaymentHistory/index.js

@@ -0,0 +1,40 @@
+import { connect } from 'react-redux';
+import {
+  selectBalance,
+  selectClaimsBalance,
+  selectSupportsBalance,
+  selectTipsBalance,
+  selectIsFetchingUtxoCounts,
+  selectUtxoCounts,
+  doFetchUtxoCounts,
+  doUtxoConsolidate,
+  selectIsConsolidatingUtxos,
+  selectIsMassClaimingTips,
+  selectPendingConsolidateTxid,
+  selectPendingMassClaimTxid,
+} from 'lbry-redux';
+import { doOpenModal } from 'redux/actions/app';
+import { selectSyncHash } from 'redux/selectors/sync';
+import { selectClaimedRewards } from 'redux/selectors/rewards';
+import WalletBalance from './view';
+
+const select = state => ({
+  balance: selectBalance(state),
+  claimsBalance: selectClaimsBalance(state) || 0,
+  supportsBalance: selectSupportsBalance(state) || 0,
+  tipsBalance: selectTipsBalance(state) || 0,
+  rewards: selectClaimedRewards(state),
+  hasSynced: Boolean(selectSyncHash(state)),
+  fetchingUtxoCounts: selectIsFetchingUtxoCounts(state),
+  consolidatingUtxos: selectIsConsolidatingUtxos(state),
+  massClaimingTips: selectIsMassClaimingTips(state),
+  utxoCounts: selectUtxoCounts(state),
+  consolidateIsPending: selectPendingConsolidateTxid(state),
+  massClaimIsPending: selectPendingMassClaimTxid(state),
+});
+
+export default connect(select, {
+  doOpenModal,
+  doFetchUtxoCounts,
+  doUtxoConsolidate,
+})(WalletBalance);

ui/component/walletFiatPaymentHistory/view.jsx

@@ -0,0 +1,219 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import * as MODALS from 'constants/modal_types';
+import * as PAGES from 'constants/pages';
+import React from 'react';
+import CreditAmount from 'component/common/credit-amount';
+import Button from 'component/button';
+import HelpLink from 'component/common/help-link';
+import Card from 'component/common/card';
+import Icon from 'component/common/icon';
+import LbcSymbol from 'component/common/lbc-symbol';
+import I18nMessage from 'component/i18nMessage';
+import { formatNumberWithCommas } from 'util/number';
+import { Lbryio } from 'lbryinc';
+import moment from 'moment';
+
+type Props = {
+  accountDetails: any,
+  transactions: any,
+  totalTippedAmount: number,
+};
+
+const WalletBalance = (props: Props) => {
+  const {
+
+  } = props;
+
+  // receive transactions from parent component
+  let accountTransactions = props.transactions;
+
+  console.log('heres transactions')
+  console.log(accountTransactions);
+
+  // let totalTippedAmount = props.totalTippedAmount;
+
+  // totalTippedAmount = 0;
+
+
+
+  // reverse so most recent payments come first
+  if(accountTransactions){
+    accountTransactions = accountTransactions.reverse();
+  }
+
+  const [detailsExpanded, setDetailsExpanded] = React.useState(false);
+  const [accountStatusResponse, setAccountStatusResponse] = React.useState();
+  const [paymentHistoryTransactions, setPaymentHistoryTransactions] = React.useState();
+  const [subscriptions, setSubscriptions] = React.useState();
+  const [totalTippedAmount, setTotalTippedAmount] = React.useState(0);
+
+
+  const [lastFour, setLastFour] = React.useState();
+
+  var environment = 'test';
+
+  function getPaymentHistory() {
+    return Lbryio.call(
+    'customer',
+    'list',
+    {
+      environment,
+    },
+    'post'
+  )};
+
+  function getCustomerStatus(){
+    return Lbryio.call(
+      'customer',
+      'status',
+      {
+        environment,
+      },
+      'post'
+    )
+  }
+
+  React.useEffect(() => {
+    (async function(){
+        let response = accountTransactions;
+
+        console.log('payment transactions');
+        console.log(response);
+
+        const customerStatusResponse = await getCustomerStatus();
+
+        setLastFour(customerStatusResponse.PaymentMethods[0].card.last4);
+
+        if (response && response.length > 10) response.length = 10;
+
+        setPaymentHistoryTransactions(response);
+
+        const subscriptions  = [...response];
+
+        if(subscriptions && subscriptions.length > 2){
+          subscriptions.length = 2
+          setSubscriptions([])
+        } else {
+          setSubscriptions([])
+        }
+
+        console.log(response);
+
+    })();
+  }, [accountTransactions]);
+
+  return (
+    <>
+      <Card
+        title={__('Payment History')}
+        body={
+          <>
+            <div className="table__wrapper">
+              <table className="table table--transactions">
+                <thead>
+                <tr>
+                  <th className="date-header">{__('Date')}</th>
+                  <th>{<>{__('Receiving Channel Name')}</>}</th>
+                  <th>{__('Tip Location')}</th>
+                  <th>{__('Amount (USD)')} </th>
+                  <th>{__('Card Last 4')}</th>
+                  <th>{__('Anonymous')}</th>
+                </tr>
+                </thead>
+                <tbody>
+                {accountTransactions &&
+                accountTransactions.map((transaction) => (
+                  <tr key={transaction.name + transaction.created_at}>
+                    <td>{moment(transaction.created_at).format('LLL')}</td>
+                    <td>
+                      <Button
+                        className="stripe__card-link-text"
+                        navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
+                        label={transaction.channel_name}
+                        button="link"
+                      />
+                    </td>
+                    <td>
+                      <Button
+                        className="stripe__card-link-text"
+                        navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
+                        label={
+                          transaction.channel_claim_id === transaction.source_claim_id
+                            ? 'Channel Page'
+                            : 'File Page'
+                        }
+                        button="link"
+                      />
+                    </td>
+                    <td>${transaction.tipped_amount / 100}</td>
+                    <td>{lastFour}</td>
+                    <td>{transaction.private_tip ? 'Yes' : 'No'}</td>
+                  </tr>
+                ))}
+                </tbody>
+              </table>
+              {(!accountTransactions || accountTransactions.length === 0) && <p style={{textAlign:"center", marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
+            </div>
+          </>
+        }
+      />
+
+    <Card
+      title={__('Subscriptions')}
+      body={
+        <>
+          <div className="table__wrapper">
+            <table className="table table--transactions">
+              <thead>
+              <tr>
+                <th className="date-header">{__('Date')}</th>
+                <th>{<>{__('Receiving Channel Name')}</>}</th>
+                <th>{__('Tip Location')}</th>
+                <th>{__('Amount (USD)')} </th>
+                <th>{__('Card Last 4')}</th>
+                <th>{__('Anonymous')}</th>
+              </tr>
+              </thead>
+              <tbody>
+              {subscriptions &&
+              subscriptions.reverse().map((transaction) => (
+                <tr key={transaction.name + transaction.created_at}>
+                  <td>{moment(transaction.created_at).format('LLL')}</td>
+                  <td>
+                    <Button
+                      className="stripe__card-link-text"
+                      navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
+                      label={transaction.channel_name}
+                      button="link"
+                    />
+                  </td>
+                  <td>
+                    <Button
+                      className="stripe__card-link-text"
+                      navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
+                      label={
+                        transaction.channel_claim_id === transaction.source_claim_id
+                          ? 'Channel Page'
+                          : 'File Page'
+                      }
+                      button="link"
+                    />
+                  </td>
+                  <td>${transaction.tipped_amount / 100}</td>
+                  <td>{lastFour}</td>
+                  <td>{transaction.private_tip ? 'Yes' : 'No'}</td>
+                </tr>
+              ))}
+              </tbody>
+            </table>
+            {(!subscriptions || subscriptions.length === 0) && <p style={{textAlign:"center", marginTop: '22px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Subscriptions</p>}
+          </div>
+        </>
+      }
+    />
+  </>
+  );
+};
+
+export default WalletBalance;

ui/component/walletSendTip/view.jsx

@@ -25,6 +25,8 @@ if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
 }
 
 const DEFAULT_TIP_AMOUNTS = [1, 5, 25, 100];
+const MINIMUM_FIAT_TIP = 1;
+const MAXIMUM_FIAT_TIP = 1000;
 
 const TAB_BOOST = 'TabBoost';
 const TAB_FIAT = 'TabFiat';
@@ -186,8 +188,7 @@ function WalletSendTip(props: Props) {
 
   React.useEffect(() => {
     // Regex for number up to 8 decimal places
-    const regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
+    let regexp;
-    const validTipInput = regexp.test(String(tipAmount));
     let tipError;
 
     if (tipAmount === 0) {
@@ -198,8 +199,13 @@ function WalletSendTip(props: Props) {
 
     // if it's not fiat, aka it's boost or lbc tip
     else if (activeTab !== TAB_FIAT) {
+      regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
+      const validTipInput = regexp.test(String(tipAmount));
+
       if (!validTipInput) {
         tipError = __('Amount must have no more than 8 decimal places');
+      } else if (!validTipInput) {
+        tipError = __('Amount must have no more than 8 decimal places');
       } else if (tipAmount === balance) {
         tipError = __('Please decrease the amount to account for transaction fees');
       } else if (tipAmount > balance) {
@@ -209,9 +215,14 @@ function WalletSendTip(props: Props) {
       }
     //  if tip fiat tab
     } else {
-      if (tipAmount < 1) {
+      regexp = RegExp(/^(\d*([.]\d{0,2})?)$/);
+      const validTipInput = regexp.test(String(tipAmount));
+
+      if (!validTipInput) {
+        tipError = __('Amount must have no more than 2 decimal places');
+      } else if (tipAmount < MINIMUM_FIAT_TIP) {
         tipError = __('Amount must be at least one dollar');
-      } else if (tipAmount > 1000) {
+      } else if (tipAmount > MAXIMUM_FIAT_TIP) {
         tipError = __('Amount cannot be over 1000 dollars');
       }
     }
@@ -262,8 +273,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,
@@ -302,10 +313,49 @@ function WalletSendTip(props: Props) {
     }
   }
 
-  function handleCustomPriceChange(event: SyntheticInputEvent<*>) {
+  var countDecimals = function(value) {
-    const tipAmount = parseFloat(event.target.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() {
@@ -320,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}));
@@ -351,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={
@@ -433,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>
@@ -453,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>
@@ -468,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>
@@ -544,10 +602,13 @@ function WalletSendTip(props: Props) {
                         </React.Fragment>
                       }
                       className="form-field--price-amount"
-                      error={tipError && activeTab !== TAB_FIAT}
+                      error={tipError}
                       min="0"
                       step="any"
                       type="number"
+                      style={{
+                        width: activeTab === TAB_FIAT ? '99px' : '160px',
+                      }}
                       placeholder="1.23"
                       value={customTipAmount}
                       onChange={(event) => handleCustomPriceChange(event)}
@@ -565,7 +626,7 @@ function WalletSendTip(props: Props) {
                     disabled={
                       fetchingChannels ||
                       isPending ||
-                      (tipError && activeTab !== TAB_FIAT) ||
+                      tipError ||
                       !tipAmount ||
                       (activeTab === TAB_FIAT && (!hasCardSaved || !canReceiveFiatTip))
                     }
@@ -580,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/component/walletTipAmountSelector/view.jsx

@@ -120,9 +120,7 @@ function WalletTipAmountSelector(props: Props) {
     // setHasSavedCard(false);
     // setCanReceiveFiatTip(true);
 
-    const regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
+    let regexp, tipError;
-    const validTipInput = regexp.test(String(amount));
-    let tipError = '';
 
     if (amount === 0) {
       tipError = __('Amount must be a positive number');
@@ -132,6 +130,9 @@ function WalletTipAmountSelector(props: Props) {
 
     // if it's not fiat, aka it's boost or lbc tip
     else if (activeTab !== TAB_FIAT) {
+      regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
+      const validTipInput = regexp.test(String(amount));
+
       if (!validTipInput) {
         tipError = __('Amount must have no more than 8 decimal places');
       } else if (amount === balance) {
@@ -143,7 +144,12 @@ function WalletTipAmountSelector(props: Props) {
       }
       //  if tip fiat tab
     } else {
-      if (amount < 1) {
+      regexp = RegExp(/^(\d*([.]\d{0,2})?)$/);
+      const validTipInput = regexp.test(String(amount));
+
+      if (!validTipInput) {
+        tipError = __('Amount must have no more than 2 decimal places');
+      } else if (amount < 1) {
         tipError = __('Amount must be at least one dollar');
       } else if (amount > 1000) {
         tipError = __('Amount cannot be over 1000 dollars');
@@ -154,8 +160,10 @@ function WalletTipAmountSelector(props: Props) {
     onTipErrorChange(tipError);
   }, [amount, balance, setTipError, activeTab]);
 
+  // parse number as float and sets it in the parent component
   function handleCustomPriceChange(amount: number) {
     const tipAmount = parseFloat(amount);
+
     onChange(tipAmount);
   }
 
@@ -229,6 +237,7 @@ function WalletTipAmountSelector(props: Props) {
         </>
       )}
 
+      {/* custom number input form */}
       {useCustomTip && (
         <div className="comment__tip-input">
           <FormField

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

@@ -1,9 +1,11 @@
 // @flow
 import * as ICONS from 'constants/icons';
+import * as PAGES from 'constants/pages';
 import React from 'react';
 import Button from 'component/button';
 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 moment from 'moment';
@@ -31,6 +33,7 @@ if (isDev) {
 type Props = {
   source: string,
   user: User,
+  doOpenModal: (string, {}) => void,
 };
 
 type State = {
@@ -68,6 +71,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 +132,7 @@ class StripeAccountConnection extends React.Component<Props, State> {
           ).then((accountListResponse: any) => {
             // TODO type this
             that.setState({
-              accountTransactions: accountListResponse,
+              accountTransactions: accountListResponse.reverse(),
             });
 
             console.log(accountListResponse);
@@ -163,11 +168,15 @@ class StripeAccountConnection extends React.Component<Props, State> {
         // if it's beamer's error indicating the account is not linked yet
         if (error.message.indexOf(errorString) > -1) {
           // get stripe link and set it on the frontend
-          getAndSetAccountLink();
+          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);
         }
+
       });
   }
 
@@ -223,25 +232,11 @@ class StripeAccountConnection extends React.Component<Props, State> {
                     <div>
                       <div>
                         <h3>{__('Congratulations! Your account has been connected with Odysee.')}</h3>
-                        {unpaidBalance > 0 ? (
-                          <div>
-                            <br />
-                            <h3>
-                              {__('Your pending account balance is $%balance% USD.', { balance: unpaidBalance / 100 })}
-                            </h3>
-                          </div>
-                        ) : (
-                          <div>
-                            <br />
-                            <h3>
-                              {__('Your account balance is $0 USD. When you receive a tip you will see it here.')}
-                            </h3>
-                          </div>
-                        )}
                       </div>
                     </div>
                   </div>
                 )}
+                {/* TODO: hopefully we won't be using this anymore and can remove it */}
                 {accountNotConfirmedButReceivedTips && (
                   <div className="card__body-actions">
                     <div>
@@ -272,66 +267,16 @@ class StripeAccountConnection extends React.Component<Props, State> {
                 )}
               </div>
             }
+            actions={
+              <Button
+                button="primary"
+                label={__('View Transactions')}
+                icon={ICONS.SETTINGS}
+                navigate={`/$/${PAGES.WALLET}?tab=account-history`}
+              />
+            }
           />
           <br />
-
-          {/* customer already has transactions */}
-          {accountTransactions && accountTransactions.length > 0 && (
-            <Card
-              title={__('Tip History')}
-              body={
-                <>
-                  <div className="table__wrapper">
-                    <table className="table table--transactions">
-                      <thead>
-                        <tr>
-                          <th className="date-header">{__('Date')}</th>
-                          <th>{<>{__('Receiving Channel Name')}</>}</th>
-                          <th>{__('Tip Location')}</th>
-                          <th>{__('Amount (USD)')} </th>
-                          <th>{__('Processing Fee')}</th>
-                          <th>{__('Odysee Fee')}</th>
-                          <th>{__('Received Amount')}</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {accountTransactions &&
-                          accountTransactions.reverse().map((transaction) => (
-                            <tr key={transaction.name + transaction.created_at}>
-                              <td>{moment(transaction.created_at).format('LLL')}</td>
-                              <td>
-                                <Button
-                                  className="stripe__card-link-text"
-                                  navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
-                                  label={transaction.channel_name}
-                                  button="link"
-                                />
-                              </td>
-                              <td>
-                                <Button
-                                  className="stripe__card-link-text"
-                                  navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
-                                  label={
-                                    transaction.channel_claim_id === transaction.source_claim_id
-                                      ? 'Channel Page'
-                                      : 'File Page'
-                                  }
-                                  button="link"
-                                />
-                              </td>
-                              <td>${transaction.tipped_amount / 100}</td>
-                              <td>${transaction.transaction_fee / 100}</td>
-                              <td>${transaction.application_fee / 100}</td>
-                              <td>${transaction.received_amount / 100}</td>
-                            </tr>
-                          ))}
-                      </tbody>
-                    </table>
-                  </div>
-                </>
-              }
-            />
-          )}
         </Page>
       );
     } else {

ui/page/settingsStripeCard/view.jsx

@@ -11,6 +11,8 @@ 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
@@ -188,10 +190,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');
           }
         });
@@ -430,72 +437,18 @@ class SettingsStripeCard extends React.Component<Props, State> {
                   />
                 </>
               }
+              actions={
+                <Button
+                  button="primary"
+                  label={__('View Transactions')}
+                  icon={ICONS.SETTINGS}
+                  navigate={`/$/${PAGES.WALLET}?tab=payment-history`}
+                />
+              }
             />
             <br />
-
-            {/* if a user has no transactions yet */}
-            {(!customerTransactions || customerTransactions.length === 0) && (
-              <Card
-                title={__('Tip History')}
-                subtitle={__('You have not sent any tips yet. When you do they will appear here. ')}
-              />
-            )}
           </div>
         )}
-
-        {/* customer already has transactions */}
-        {customerTransactions && customerTransactions.length > 0 && (
-          <Card
-            title={__('Tip History')}
-            body={
-              <>
-                <div className="table__wrapper">
-                  <table className="table table--transactions">
-                    <thead>
-                      <tr>
-                        <th className="date-header">{__('Date')}</th>
-                        <th>{<>{__('Receiving Channel Name')}</>}</th>
-                        <th>{__('Tip Location')}</th>
-                        <th>{__('Amount (USD)')} </th>
-                        <th>{__('Anonymous')}</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {customerTransactions &&
-                        customerTransactions.reverse().map((transaction) => (
-                          <tr key={transaction.name + transaction.created_at}>
-                            <td>{moment(transaction.created_at).format('LLL')}</td>
-                            <td>
-                              <Button
-                                className="stripe__card-link-text"
-                                navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
-                                label={transaction.channel_name}
-                                button="link"
-                              />
-                            </td>
-                            <td>
-                              <Button
-                                className="stripe__card-link-text"
-                                navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
-                                label={
-                                  transaction.channel_claim_id === transaction.source_claim_id
-                                    ? 'Channel Page'
-                                    : 'File Page'
-                                }
-                                button="link"
-                              />
-                            </td>
-                            <td>${transaction.tipped_amount / 100}</td>
-                            <td>{transaction.private_tip ? 'Yes' : 'No'}</td>
-                          </tr>
-                        ))}
-                    </tbody>
-                  </table>
-                </div>
-              </>
-            }
-          />
-        )}
       </Page>
     );
   }

ui/page/wallet/view.jsx

@@ -2,10 +2,15 @@
 import React from 'react';
 import { withRouter } from 'react-router';
 import WalletBalance from 'component/walletBalance';
+import WalletFiatBalance from 'component/walletFiatBalance';
+import WalletFiatPaymentBalance from 'component/walletFiatPaymentBalance';
+import WalletFiatAccountHistory from 'component/walletFiatAccountHistory';
+import WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory';
 import TxoList from 'component/txoList';
 import Page from 'component/page';
 import Spinner from 'component/spinner';
 import YrblWalletEmpty from 'component/yrblWalletEmpty';
+import { Lbryio } from 'lbryinc';
 
 type Props = {
   history: { action: string, push: (string) => void, replace: (string) => void },
@@ -14,6 +19,151 @@ type Props = {
 };
 
 const WalletPage = (props: Props) => {
+  console.log(props);
+
+  var stripeEnvironment = 'test';
+  var environment = 'test';
+
+  const tab = new URLSearchParams(props.location.search).get('tab');
+
+  const [accountStatusResponse, setAccountStatusResponse] = React.useState();
+  const [accountTransactionResponse, setAccountTransactionResponse] = React.useState();
+  const [customerTransactions, setCustomerTransactions] = React.useState();
+  const [totalTippedAmount, setTotalTippedAmount] = React.useState(0);
+
+
+  function getPaymentHistory() {
+    return Lbryio.call(
+      'customer',
+      'list',
+      {
+        environment: stripeEnvironment,
+      },
+      'post'
+    )};
+
+  function getCustomerStatus(){
+    return Lbryio.call(
+      'customer',
+      'status',
+      {
+        environment: stripeEnvironment,
+      },
+      'post'
+    )
+  }
+
+  function getAccountStatus(){
+    return Lbryio.call(
+      'account',
+      'status',
+      {
+        environment: stripeEnvironment,
+      },
+      'post'
+    );
+  }
+
+  function getAccountTransactionsa(){
+    return Lbryio.call(
+      'account',
+      'list',
+      {
+        environment: stripeEnvironment,
+      },
+      'post'
+    );
+  }
+
+
+  // calculate account transactions section
+  React.useEffect(() => {
+    (async function(){
+      try {
+        const response = await getAccountStatus();
+
+        setAccountStatusResponse(response);
+
+        // TODO: some weird naming clash hence getAccountTransactionsa
+        const getAccountTransactions = await getAccountTransactionsa();
+
+        setAccountTransactionResponse(getAccountTransactions)
+
+      } catch (err){
+        console.log(err);
+      }
+    })();
+  }, []);
+
+  // populate customer payment data
+  React.useEffect(() => {
+    (async function(){
+      try {
+        // get card payments customer has made
+        const customerTransactionResponse = await getPaymentHistory();
+
+        let totalTippedAmount = 0;
+
+        for(const transaction of customerTransactionResponse){
+          totalTippedAmount = totalTippedAmount + transaction.tipped_amount
+        }
+
+        setTotalTippedAmount(totalTippedAmount / 100);
+
+        setCustomerTransactions(customerTransactionResponse)
+
+      } catch (err){
+        console.log(err);
+      }
+    })();
+  }, []);
+
+  function focusLBCTab(){
+    document.getElementsByClassName('lbc-transactions')[0].style.display = 'inline';
+    document.getElementsByClassName('fiat-transactions')[0].style.display = 'none';
+    document.getElementsByClassName('payment-history-tab')[0].style.display = 'none';
+
+    document.getElementsByClassName('lbc-tab-switcher')[0].style.textDecoration = 'underline';
+    document.getElementsByClassName('fiat-tab-switcher')[0].style.textDecoration = 'none';
+    document.getElementsByClassName('fiat-payment-history-switcher')[0].style.textDecoration = 'none';
+
+  }
+
+  function focusAccountHistoryTab(){
+    document.getElementsByClassName('lbc-transactions')[0].style.display = 'none';
+    document.getElementsByClassName('payment-history-tab')[0].style.display = 'none';
+    document.getElementsByClassName('fiat-transactions')[0].style.display = 'inline';
+
+    document.getElementsByClassName('lbc-tab-switcher')[0].style.textDecoration = 'none';
+    document.getElementsByClassName('fiat-tab-switcher')[0].style.textDecoration = 'underline';
+    document.getElementsByClassName('fiat-payment-history-switcher')[0].style.textDecoration = 'none';
+
+  }
+
+  function focusPaymentHistoryTab(){
+    document.getElementsByClassName('lbc-transactions')[0].style.display = 'none';
+    document.getElementsByClassName('fiat-transactions')[0].style.display = 'none';
+    document.getElementsByClassName('payment-history-tab')[0].style.display = 'inline';
+
+    document.getElementsByClassName('lbc-tab-switcher')[0].style.textDecoration = 'none';
+    document.getElementsByClassName('fiat-tab-switcher')[0].style.textDecoration = 'none';
+    document.getElementsByClassName('fiat-payment-history-switcher')[0].style.textDecoration = 'underline';
+
+  }
+
+  // select the first tab
+  React.useEffect(() => {
+    if (tab === 'account-history') {
+    // if (1 === 2) {
+      focusAccountHistoryTab();
+    } else if (tab === 'payment-history'){
+    // } else if (1 === 2){
+      focusPaymentHistoryTab();
+    } else {
+      focusLBCTab()
+    }
+  }, []);
+
   const { location, totalBalance } = props;
   const { search } = location;
   const showIntro = totalBalance === 0;
@@ -21,23 +171,66 @@ const WalletPage = (props: Props) => {
 
   return (
     <Page>
-      {loading && (
+      {/* tabs to switch between fiat and lbc */}
-        <div className="main--empty">
+      {/* lbc button */}
-          <Spinner delayed />
+      <h2 className="lbc-tab-switcher"
-        </div>
+        style={{display: 'inline-block', paddingBottom: '16px', marginRight: '14px', textUnderlineOffset: '4px', fontSize: '18px', marginLeft: '3px'}}
-      )}
+        onClick={() => {
-      {!loading && (
+          focusLBCTab();
-        <>
+        }}
-          {showIntro ? (
+      >LBC Wallet</h2>
-            <YrblWalletEmpty includeWalletLink />
+      {/* account history button */}
-          ) : (
+      <h2 className="fiat-tab-switcher"
-            <div className="card-stack">
+        style={{display: 'inline-block', textUnderlineOffset: '4px', fontSize: '18px', marginRight: '14px'}}
-              <WalletBalance />
+        onClick={() => {
-              <TxoList search={search} />
+          focusAccountHistoryTab();
-            </div>
+        }}
-          )}
+      >Account History</h2>
-        </>
+      {/* payment history button */}
-      )}
+      <h2 className="fiat-payment-history-switcher"
+        style={{display: 'inline-block', textUnderlineOffset: '4px', fontSize: '18px'}}
+        onClick={() => {
+            focusPaymentHistoryTab();
+          }}
+      >Payment History</h2>
+
+      {/* lbc wallet section */}
+      <div className="lbc-transactions">
+        {/* if the transactions are loading */}
+        { loading && (
+          <div className="main--empty">
+            <Spinner delayed />
+          </div>
+        )}
+        {/* when the transactions are finished loading */}
+        { !loading && (
+          <>
+            {showIntro ? (
+              <YrblWalletEmpty includeWalletLink />
+            ) : (
+              <div className="card-stack">
+                <WalletBalance />
+                <TxoList search={search} />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* account received transactions section */}
+      <div className="fiat-transactions" style={{display: 'none'}}>
+          <WalletFiatBalance accountDetails={accountStatusResponse} />
+          <div style={{paddingTop: '25px'}}></div>
+          <WalletFiatAccountHistory transactions={accountTransactionResponse}/>
+      </div>
+
+      {/* fiat payment history for tips made by user */}
+      <div className="payment-history-tab" style={{display: 'none'}}>
+        <WalletFiatPaymentBalance transactions={customerTransactions} totalTippedAmount={totalTippedAmount} accountDetails={accountStatusResponse} />
+        <div style={{paddingTop: '25px'}}></div>
+        <WalletFiatPaymentHistory transactions={customerTransactions}/>
+      </div>
+
     </Page>
   );
 };

ui/scss/component/_form-field.scss

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