Move transactions from Settings to Wallet (#6871)

* remove unused conditional

get stuff ready for merge

bugfix and cleanup

requested changes

fixing flow errors

fix last flow error and touchups

fiat and lbc tabs coming along

support setting currency as the default tab via query param

add wallet fiat balance

fixing naming

add fiat transactions

using es6 to populate data

should be fine but keeps crashing

transaction listing working

add no transactions thing

about to add a third tab

add third tab

add card last 4 to transaction history

some renaming

show payments successfully

show filler for subscriptions

display if no transactions or subs

working but in the wrong component

approaching something thats working

showing total tipped amount

about to add last couple features

cleanup

More touchups

adding last features

calculate the total amount of unique creators tipped

couple touchups

remove transaction listings from settings

add view transactions buttons

small optimization

add subscriptions section

fix lot of linting errors and make command more userful

* some copy changes

* about to add last couple changes

* update still require verification

* fix button spacing

* hide subscriptions sections and fix links

* cleanups before merging

* more cleanup

* cleanup with last four fix

* changing tab functionality

* bugfix and fix presentation of cards

* fix transactions bug

* change order and remove logs

* remove unused code in account

* more linter fixes

* update account balance presentation

* fix flow errors

package.json

@@ -38,7 +38,7 @@
     "build:dir": "yarn build -- --dir -c.compression=store -c.mac.identity=null",
     "crossenv": "./node_modules/cross-env/dist/bin/cross-env",
     "lint": "eslint 'ui/**/*.{js,jsx}' && eslint 'web/**/*.{js,jsx}' && eslint 'electron/**/*.js' && flow",
-    "lint-fix": "eslint --fix 'ui/**/*.{js,jsx}' && eslint --fix 'web/**/*.{js,jsx}' && eslint --fix 'electron/**/*.js' && flow",
+    "lint-fix": "eslint --fix --quiet 'ui/**/*.{js,jsx}' && eslint --fix --quiet 'web/**/*.{js,jsx}' && eslint --fix --quiet 'electron/**/*.js'",
     "format": "prettier 'src/**/*.{js,jsx,scss,json}' --write",
     "flow-defs": "flow-typed install",
     "precommit": "lint-staged",

ui/component/common/tabs.jsx

@@ -28,7 +28,7 @@ import { useRect } from '@reach/rect';
 //   </TabPanels>
 // </Tabs>
 //
-// the base @reach/tabs components handle all the focus/accessibilty labels
+// the base @reach/tabs components handle all the focus/accessibility labels
 // We're just adding some styling
 
 type TabsProps = {

ui/component/walletFiatAccountHistory/index.js

@@ -0,0 +1,3 @@
+import FiatAccountHistory from './view';
+
+export default FiatAccountHistory;

ui/component/walletFiatAccountHistory/view.jsx

@@ -0,0 +1,88 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+import Card from 'component/common/card';
+import moment from 'moment';
+
+type Props = {
+  accountDetails: any,
+  transactions: any,
+};
+
+const WalletBalance = (props: Props) => {
+  // receive transactions from parent component
+  const { transactions } = props;
+
+  let accountTransactions;
+
+  // reverse so most recent payments come first
+  if (transactions && transactions.length) {
+    accountTransactions = transactions.reverse();
+  }
+
+  // if there are more than 10 transactions, limit it to 10 for the frontend
+  if (accountTransactions && accountTransactions.length > 10) {
+    accountTransactions.length = 10;
+  }
+
+  return (
+    <><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.map((transaction) => (
+                  <tr key={transaction.name + transaction.created_at}>
+                    <td>{moment(transaction.created_at).format('LLL')}</td>
+                    <td>
+                      <Button
+                        className=""
+                        navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
+                        label={transaction.channel_name}
+                        button="link"
+                      />
+                    </td>
+                    <td>
+                      <Button
+                        className=""
+                        navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
+                        label={
+                          transaction.channel_claim_id === transaction.source_claim_id
+                            ? 'Channel Page'
+                            : 'Content 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>
+          </>
+      )}
+    />
+  </>
+  );
+};
+
+export default WalletBalance;

ui/component/walletFiatBalance/index.js

@@ -0,0 +1,3 @@
+import WalletFiatBalance from './view';
+
+export default WalletFiatBalance;

ui/component/walletFiatBalance/view.jsx

@@ -0,0 +1,94 @@
+// @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 Icon from 'component/common/icon';
+import I18nMessage from 'component/i18nMessage';
+
+type Props = {
+  accountDetails: any,
+};
+
+const WalletBalance = (props: Props) => {
+  const {
+    accountDetails,
+  } = props;
+
+  return (
+    <>{<Card
+      title={<><Icon size={18} icon={ICONS.FINANCE} />{(accountDetails && ((accountDetails.total_received_unpaid - accountDetails.total_paid_out) / 100)) || 0} USD</>}
+      subtitle={accountDetails && accountDetails.total_received_unpaid > 0 &&
+          <I18nMessage>
+            This is your pending balance that will be automatically sent to your bank account
+          </I18nMessage>
+      }
+      actions={
+        <>
+          <h2 className="section__title--small">
+            ${(accountDetails && (accountDetails.total_received_unpaid / 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 */}
+          {/* commenting out because not implemented, but could be used in the future */}
+          {/* {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,3 @@
+import WalletFiatPaymentBalance from './view';
+
+export default WalletFiatPaymentBalance;

ui/component/walletFiatPaymentBalance/view.jsx

@@ -0,0 +1,76 @@
+// @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';
+
+type Props = {
+  totalTippedAmount: number,
+  accountDetails: any,
+  transactions: any,
+};
+
+const WalletBalance = (props: Props) => {
+  const {
+    // accountDetails,
+    transactions,
+  } = props;
+
+  // let cardDetails = {
+  //   brand: card.brand,
+  //   expiryYear: card.exp_year,
+  //   expiryMonth: card.exp_month,
+  //   lastFour: card.last4,
+  //   topOfDisplay: topOfDisplay,
+  //   bottomOfDisplay: bottomOfDisplay,
+  // };
+
+  // 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);
+      }
+
+      let unique = [...new Set(channelNames)];
+      setTotalCreatorsSupported(unique.length);
+    }
+  }, [transactions]);
+
+  return (
+    <>{<Card
+      // TODO: implement hasActiveCard and show the current card the user would charge to
+      // subtitle={hasActiveCard && <h2>Hello</h2>
+      //   // <Plastic
+      //   //   type={userCardDetails.brand}
+      //   //   name={userCardDetails.topOfDisplay + ' ' + userCardDetails.bottomOfDisplay}
+      //   //   expiry={userCardDetails.expiryMonth + '/' + userCardDetails.expiryYear}
+      //   //   number={'____________' + userCardDetails.lastFour}
+      //   // />
+      // }
+      actions={
+        <>
+          <h2 className="section__title--small">
+            {(transactions && transactions.length) || 0} 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,3 @@
+import WalletFiatPaymentHistory from './view';
+
+export default WalletFiatPaymentHistory;

ui/component/walletFiatPaymentHistory/view.jsx

@@ -0,0 +1,118 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+import Card from 'component/common/card';
+import { Lbryio } from 'lbryinc';
+import moment from 'moment';
+import { STRIPE_PUBLIC_KEY } from 'config';
+
+let stripeEnvironment = 'test';
+// if the key contains pk_live it's a live key
+// update the environment for the calls to the backend to indicate which environment to hit
+if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
+  stripeEnvironment = 'live';
+}
+
+type Props = {
+  accountDetails: any,
+  transactions: any,
+};
+
+const WalletBalance = (props: Props) => {
+  // receive transactions from parent component
+  const { transactions } = props;
+
+  let accountTransactions;
+
+  // reverse so most recent payments come first
+  if (transactions && transactions.length) {
+    accountTransactions = transactions.reverse();
+  }
+  // const [accountStatusResponse, setAccountStatusResponse] = React.useState();
+
+  // const [subscriptions, setSubscriptions] = React.useState();
+
+  const [lastFour, setLastFour] = React.useState();
+
+  function getCustomerStatus() {
+    return Lbryio.call(
+      'customer',
+      'status',
+      {
+        environment: stripeEnvironment,
+      },
+      'post'
+    );
+  }
+
+  // TODO: this is actually incorrect, last4 should be populated based on the transaction not the current customer details
+  React.useEffect(() => {
+    (async function() {
+        const customerStatusResponse = await getCustomerStatus();
+
+        const lastFour = customerStatusResponse.PaymentMethods && customerStatusResponse.PaymentMethods.length && customerStatusResponse.PaymentMethods[0].card.last4;
+
+        setLastFour(lastFour);
+    })();
+  }, []);
+
+  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=""
+                        navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
+                        label={transaction.channel_name}
+                        button="link"
+                      />
+                    </td>
+                    <td>
+                      <Button
+                        className=""
+                        navigate={'/' + transaction.channel_name + ':' + transaction.source_claim_id}
+                        label={
+                          transaction.channel_claim_id === transaction.source_claim_id
+                            ? 'Channel Page'
+                            : 'Content 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>
+          </>
+        }
+      />
+  </>
+  );
+};
+
+export default WalletBalance;

ui/page/settings/view.jsx

@@ -208,44 +208,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
         }}
         className="card-stack"
       >
-        {/* @if TARGET='web' */}
-        {user && user.fiat_enabled && (
-          <Card
-            title={__('Bank Accounts')}
-            subtitle={__('Connect a bank account to receive tips and compensation in your local currency')}
-            actions={
-              <div className="section__actions">
-                <Button
-                  button="secondary"
-                  label={__('Manage')}
-                  icon={ICONS.SETTINGS}
-                  navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`}
-                />
-              </div>
-            }
-          />
-        )}
-        {/* @endif */}
-
-        {/* @if TARGET='web' */}
-        {isAuthenticated && (
-          <Card
-            title={__('Payment Methods')}
-            subtitle={__('Add a credit card to tip creators in their local currency')}
-            actions={
-              <div className="section__actions">
-                <Button
-                  button="secondary"
-                  label={__('Manage')}
-                  icon={ICONS.SETTINGS}
-                  navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`}
-                />
-              </div>
-            }
-          />
-        )}
-        {/* @endif */}
-
         <Card title={__('Language')} actions={<SettingLanguage />} />
         {homepages && Object.keys(homepages).length > 1 && (
           <Card title={__('Homepage')} actions={<HomepageSelector />} />
@@ -488,6 +450,44 @@ class SettingsPage extends React.PureComponent<Props, State> {
             />
             {/* @endif */}
 
+            {/* @if TARGET='web' */}
+            {user && (
+              <Card
+                title={__('Bank Accounts')}
+                subtitle={__('Connect a bank account to receive tips and compensation in your local currency')}
+                actions={
+                  <div className="section__actions">
+                    <Button
+                      button="secondary"
+                      label={__('Manage')}
+                      icon={ICONS.SETTINGS}
+                      navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`}
+                    />
+                  </div>
+                }
+              />
+            )}
+            {/* @endif */}
+
+            {/* @if TARGET='web' */}
+            {isAuthenticated && (
+              <Card
+                title={__('Payment Methods')}
+                subtitle={__('Add a credit card to tip creators in their local currency')}
+                actions={
+                  <div className="section__actions">
+                    <Button
+                      button="secondary"
+                      label={__('Manage')}
+                      icon={ICONS.SETTINGS}
+                      navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`}
+                    />
+                  </div>
+                }
+              />
+            )}
+            {/* @endif */}
+
             {(isAuthenticated || !IS_WEB) && (
               <>
                 <Card

ui/page/settingsStripeAccount/index.js

@@ -1,12 +1,9 @@
 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';
 
-const select = (state) => ({
+const select = (state) => ({});
-  user: selectUser(state),
-});
 
 const perform = (dispatch) => ({
   doToast: (options) => dispatch(doToast(options)),

ui/page/settingsStripeAccount/view.jsx

@@ -1,12 +1,13 @@
 // @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';
 
 const isDev = process.env.NODE_ENV !== 'production';
 
@@ -30,7 +31,6 @@ if (isDev) {
 
 type Props = {
   source: string,
-  user: User,
   doOpenModal: (string, {}) => void,
   doToast: ({ message: string }) => void,
 };
@@ -40,13 +40,13 @@ type State = {
   loading: boolean,
   content: ?string,
   stripeConnectionUrl: string,
-  // alreadyUpdated: boolean,
   accountConfirmed: boolean,
   accountPendingConfirmation: boolean,
   accountNotConfirmedButReceivedTips: boolean,
   unpaidBalance: number,
   pageTitle: string,
-  accountTransactions: any, // define this type
+  stillRequiringVerification: boolean,
+  accountTransactions: any
 };
 
 class StripeAccountConnection extends React.Component<Props, State> {
@@ -62,19 +62,14 @@ class StripeAccountConnection extends React.Component<Props, State> {
       unpaidBalance: 0,
       stripeConnectionUrl: '',
       pageTitle: 'Add Payout Method',
+      stillRequiringVerification: true,
       accountTransactions: [],
-      // alreadyUpdated: false,
     };
   }
 
   componentDidMount() {
-    const { user } = this.props;
-
     let doToast = this.props.doToast;
 
-    // $FlowFixMe
-    this.experimentalUiEnabled = user && user.experimental_ui;
-
     var that = this;
 
     function getAndSetAccountLink(stillNeedToConfirmAccount) {
@@ -140,9 +135,22 @@ class StripeAccountConnection extends React.Component<Props, State> {
         if (accountStatusResponse.charges_enabled) {
           // account has already been confirmed
 
-          that.setState({
+          const eventuallyDueInformation = accountStatusResponse.account_info.requirements.eventually_due;
+
+          const currentlyDueInformation = accountStatusResponse.account_info.requirements.currently_due;
+
+          let objectToUpdateState = {
             accountConfirmed: true,
-          });
+            stillRequiringVerification: false,
+          };
+
+          if ((eventuallyDueInformation && eventuallyDueInformation.length) || (currentlyDueInformation && currentlyDueInformation)) {
+            objectToUpdateState.stillRequiringVerification = true;
+            getAndSetAccountLink(false);
+          }
+
+          that.setState(objectToUpdateState);
+
           // user has not confirmed an account but have received payments
         } else if (accountStatusResponse.total_received_unpaid > 0) {
           that.setState({
@@ -184,35 +192,72 @@ class StripeAccountConnection extends React.Component<Props, State> {
       unpaidBalance,
       accountNotConfirmedButReceivedTips,
       pageTitle,
-      accountTransactions,
+      stillRequiringVerification,
     } = this.state;
 
-    const { user } = this.props;
+    return (
-
+      <Page backout={{ title: pageTitle, backLabel: __('Done') }} noFooter noSideNavigation>
-    if (user.fiat_enabled) {
+        <Card
-      return (
+          title={<div className="table__header-text">{__('Connect a bank account')}</div>}
-        <Page backout={{ title: pageTitle, backLabel: __('Done') }} noFooter noSideNavigation>
+          isBodyList
-          <Card
+          body={
-            title={<div className="table__header-text">{__('Connect a bank account')}</div>}
+            <div>
-            isBodyList
+              {/* show while waiting for account status */}
-            body={
+              {!accountConfirmed && !accountPendingConfirmation && !accountNotConfirmedButReceivedTips && (
-              <div>
+                <div className="card__body-actions">
-                {/* show while waiting for account status */}
+                  <div>
-                {!accountConfirmed && !accountPendingConfirmation && !accountNotConfirmedButReceivedTips && (
-                  <div className="card__body-actions">
                     <div>
-                      <div>
+                      <h3>{__('Getting your bank account connection status...')}</h3>
-                        <h3>{__('Getting your bank account connection status...')}</h3>
-                      </div>
                     </div>
                   </div>
-                )}
+                </div>
-                {/* user has yet to complete their integration */}
+              )}
-                {!accountConfirmed && accountPendingConfirmation && (
+              {/* user has yet to complete their integration */}
-                  <div className="card__body-actions">
+              {!accountConfirmed && accountPendingConfirmation && (
+                <div className="card__body-actions">
+                  <div>
                     <div>
+                      <h3>{__('Connect your bank account to Odysee to receive donations directly from users')}</h3>
+                    </div>
+                    <div className="section__actions">
+                      <a href={stripeConnectionUrl}>
+                        <Button button="secondary" label={__('Connect your bank account')} icon={ICONS.FINANCE} />
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              )}
+              {/* user has completed their integration */}
+              {accountConfirmed && (
+                <div className="card__body-actions">
+                  <div>
+                    <div>
+                      <h3>{__('Congratulations! Your account has been connected with Odysee.')}</h3>
+                      {stillRequiringVerification && <><h3 style={{marginTop: '10px'}}>Although your account is connected it still requires verification to begin receiving tips.</h3>
+                      <h3 style={{marginTop: '10px'}}>Please use the button below to complete your verification process and enable tipping for your account.</h3></> }
+                    </div>
+                  </div>
+                </div>
+              )}
+              {/* TODO: hopefully we won't be using this anymore and can remove it */}
+              {accountNotConfirmedButReceivedTips && (
+                <div className="card__body-actions">
+                  <div>
+                    <div>
+                      <h3>{__('Congratulations, you have already begun receiving tips on Odysee!')}</h3>
                       <div>
-                        <h3>{__('Connect your bank account to Odysee to receive donations directly from users')}</h3>
+                        <br />
+                        <h3>
+                          {__('Your pending account balance is $%balance% USD.', { balance: unpaidBalance / 100 })}
+                        </h3>
+                      </div>
+                      <br />
+                      <div>
+                        <h3>
+                          {__(
+                            'Connect your bank account to be able to cash your pending balance out to your account.'
+                          )}
+                        </h3>
                       </div>
                       <div className="section__actions">
                         <a href={stripeConnectionUrl}>
@@ -221,127 +266,29 @@ class StripeAccountConnection extends React.Component<Props, State> {
                       </div>
                     </div>
                   </div>
-                )}
+                </div>
-                {/* user has completed their integration */}
+              )}
-                {accountConfirmed && (
+            </div>
-                  <div className="card__body-actions">
+          }
-                    <div>
+          actions={
-                      <div>
+            <>{ stillRequiringVerification && <Button
-                        <h3>{__('Congratulations! Your account has been connected with Odysee.')}</h3>
+              button="primary"
-                        {unpaidBalance > 0 ? (
+              label={__('Complete Verification')}
-                          <div>
+              icon={ICONS.SETTINGS}
-                            <br />
+              navigate={stripeConnectionUrl}
-                            <h3>
+              className="stripe__complete-verification-button"
-                              {__('Your pending account balance is $%balance% USD.', { balance: unpaidBalance / 100 })}
+            /> }
-                            </h3>
+            <Button
-                          </div>
+              button="secondary"
-                        ) : (
+              label={__('View Transactions')}
-                          <div>
+              icon={ICONS.SETTINGS}
-                            <br />
+              navigate={`/$/${PAGES.WALLET}?tab=account-history`}
-                            <h3>
+            /></>
-                              {__('Your account balance is $0 USD. When you receive a tip you will see it here.')}
+          }
-                            </h3>
+        />
-                          </div>
+        <br />
-                        )}
+      </Page>
-                      </div>
+    );
-                    </div>
-                  </div>
-                )}
-                {accountNotConfirmedButReceivedTips && (
-                  <div className="card__body-actions">
-                    <div>
-                      <div>
-                        <h3>{__('Congratulations, you have already begun receiving tips on Odysee!')}</h3>
-                        <div>
-                          <br />
-                          <h3>
-                            {__('Your pending account balance is $%balance% USD.', { balance: unpaidBalance / 100 })}
-                          </h3>
-                        </div>
-                        <br />
-                        <div>
-                          <h3>
-                            {__(
-                              'Connect your bank account to be able to cash your pending balance out to your account.'
-                            )}
-                          </h3>
-                        </div>
-                        <div className="section__actions">
-                          <a href={stripeConnectionUrl}>
-                            <Button button="secondary" label={__('Connect your bank account')} icon={ICONS.FINANCE} />
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-            }
-          />
-          <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.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 {
-      return <></>; // probably null;
-    }
   }
 }
 

ui/page/settingsStripeCard/view.jsx

@@ -6,11 +6,11 @@ import Page from 'component/page';
 import Card from 'component/common/card';
 import { Lbryio } from 'lbryinc';
 import { STRIPE_PUBLIC_KEY } from 'config';
-import moment from 'moment';
 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
@@ -354,13 +354,13 @@ class SettingsStripeCard extends React.Component<Props, State> {
 
     const { scriptFailedToLoad, openModal } = this.props;
 
-    const { currentFlowStage, customerTransactions, pageTitle, userCardDetails, paymentMethodId } = this.state;
+    const { currentFlowStage, pageTitle, userCardDetails, paymentMethodId } = this.state;
 
     return (
       <Page backout={{ title: pageTitle, backLabel: __('Done') }} noFooter noSideNavigation>
         <div>
           {scriptFailedToLoad && (
-            <div className="error__text">There was an error connecting to Stripe. Please try again later.</div>
+            <div className="error__text">{__('There was an error connecting to Stripe. Please try again later.')}</div>
           )}
         </div>
 
@@ -418,72 +418,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

@@ -1,11 +1,34 @@
 // @flow
 import React from 'react';
-import { withRouter } from 'react-router';
+import { useHistory } 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 * as PAGES from 'constants/pages';
 import Spinner from 'component/spinner';
 import YrblWalletEmpty from 'component/yrblWalletEmpty';
+import { Lbryio } from 'lbryinc';
+import { STRIPE_PUBLIC_KEY } from 'config';
+import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs';
+
+const TAB_QUERY = 'tab';
+
+const TABS = {
+  LBRY_CREDITS_TAB: 'credits',
+  ACCOUNT_HISTORY: 'fiat-account-history',
+  PAYMENT_HISTORY: 'fiat-payment-history',
+};
+
+let stripeEnvironment = 'test';
+// if the key contains pk_live it's a live key
+// update the environment for the calls to the backend to indicate which environment to hit
+if (STRIPE_PUBLIC_KEY.indexOf('pk_live') > -1) {
+  stripeEnvironment = 'live';
+}
 
 type Props = {
   history: { action: string, push: (string) => void, replace: (string) => void },
@@ -14,32 +37,197 @@ type Props = {
 };
 
 const WalletPage = (props: Props) => {
-  const { location, totalBalance } = props;
+  const {
-  const { search } = location;
+    location: { search },
+    push,
+  } = useHistory();
+
+  // @if TARGET='web'
+  const urlParams = new URLSearchParams(search);
+
+  const currentView = urlParams.get(TAB_QUERY) || TABS.LBRY_CREDITS_TAB;
+
+  let tabIndex;
+  switch (currentView) {
+    case TABS.LBRY_CREDITS_TAB:
+      tabIndex = 0;
+      break;
+    case TABS.PAYMENT_HISTORY:
+      tabIndex = 1;
+      break;
+    case TABS.ACCOUNT_HISTORY:
+      tabIndex = 2;
+      break;
+    default:
+      tabIndex = 0;
+      break;
+  }
+
+  function onTabChange(newTabIndex) {
+    let url = `/$/${PAGES.WALLET}?`;
+
+    if (newTabIndex === 0) {
+      url += `${TAB_QUERY}=${TABS.LBRY_CREDITS_TAB}`;
+    } else if (newTabIndex === 1) {
+      url += `${TAB_QUERY}=${TABS.PAYMENT_HISTORY}`;
+    } else if (newTabIndex === 2) {
+      url += `${TAB_QUERY}=${TABS.ACCOUNT_HISTORY}`;
+    } else {
+      url += `${TAB_QUERY}=${TABS.LBRY_CREDITS_TAB}`;
+    }
+    push(url);
+  }
+
+  const [accountStatusResponse, setAccountStatusResponse] = React.useState();
+  const [accountTransactionResponse, setAccountTransactionResponse] = React.useState([]);
+  const [customerTransactions, setCustomerTransactions] = React.useState([]);
+
+  function getPaymentHistory() {
+    return Lbryio.call(
+      'customer',
+      'list',
+      {
+        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();
+
+        setCustomerTransactions(customerTransactionResponse);
+      } catch (err) {
+        console.log(err);
+      }
+    })();
+  }, []);
+
+  // @endif
+
+  const { totalBalance } = props;
   const showIntro = totalBalance === 0;
   const loading = totalBalance === undefined;
 
   return (
-    <Page>
+    <>
-      {loading && (
+      {/* @if TARGET='web' */}
-        <div className="main--empty">
+      <Page>
-          <Spinner delayed />
+        <Tabs onChange={onTabChange} index={tabIndex}>
-        </div>
+          <TabList className="tabs__list--collection-edit-page">
-      )}
+            <Tab>{__('LBRY Credits')}</Tab>
-      {!loading && (
+            <Tab>{__('Account History')}</Tab>
-        <>
+            <Tab>{__('Payment History')}</Tab>
-          {showIntro ? (
+          </TabList>
-            <YrblWalletEmpty includeWalletLink />
+          <TabPanels>
-          ) : (
+            <TabPanel>
-            <div className="card-stack">
+              <div className="section card-stack">
-              <WalletBalance />
+                <div className="lbc-transactions">
-              <TxoList search={search} />
+                  {/* if the transactions are loading */}
-            </div>
+                  {loading && (
-          )}
+                    <div className="main--empty">
-        </>
+                      <Spinner delayed />
-      )}
+                    </div>
-    </Page>
+                  )}
+                  {/* when the transactions are finished loading */}
+                  {!loading && (
+                    <>
+                      {showIntro ? (
+                        <YrblWalletEmpty includeWalletLink />
+                      ) : (
+                        <div className="card-stack">
+                          <WalletBalance />
+                          <TxoList search={search} />
+                        </div>
+                      )}
+                    </>
+                  )}
+                </div>
+              </div>
+            </TabPanel>
+            <TabPanel>
+              <div className="section card-stack">
+                <WalletFiatBalance accountDetails={accountStatusResponse} />
+                <WalletFiatAccountHistory transactions={accountTransactionResponse} />
+              </div>
+            </TabPanel>
+            <TabPanel>
+              <div className="section card-stack">
+                <WalletFiatPaymentBalance transactions={customerTransactions} accountDetails={accountStatusResponse} />
+                <WalletFiatPaymentHistory transactions={customerTransactions} />
+              </div>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </Page>
+      {/* @endif */}
+      {/* @if TARGET='app' */}
+      <Page>
+        {loading && (
+          <div className="main--empty">
+            <Spinner delayed />
+          </div>
+        )}
+        {!loading && (
+          <>
+            {showIntro ? (
+              <YrblWalletEmpty includeWalletLink />
+            ) : (
+              <div className="card-stack">
+                <WalletBalance />
+                <TxoList search={search} />
+              </div>
+            )}
+          </>
+        )}
+      </Page>
+      {/* @endif */}
+    </>
   );
 };
 
-export default withRouter(WalletPage);
+export default WalletPage;

ui/scss/component/_stripe-card.scss

@@ -340,3 +340,7 @@ pre {
 //.successCard, .toConfirmCard {
 //  max-width: 94%
 //}
+
+.stripe__complete-verification-button {
+  margin-right: 10px !important;
+}