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) => ({
-  user: selectUser(state),
-});
+const select = (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;
-
-    if (user.fiat_enabled) {
-      return (
-        <Page backout={{ title: pageTitle, backLabel: __('Done') }} noFooter noSideNavigation>
-          <Card
-            title={<div className="table__header-text">{__('Connect a bank account')}</div>}
-            isBodyList
-            body={
-              <div>
-                {/* show while waiting for account status */}
-                {!accountConfirmed && !accountPendingConfirmation && !accountNotConfirmedButReceivedTips && (
-                  <div className="card__body-actions">
+    return (
+      <Page backout={{ title: pageTitle, backLabel: __('Done') }} noFooter noSideNavigation>
+        <Card
+          title={<div className="table__header-text">{__('Connect a bank account')}</div>}
+          isBodyList
+          body={
+            <div>
+              {/* show while waiting for account status */}
+              {!accountConfirmed && !accountPendingConfirmation && !accountNotConfirmedButReceivedTips && (
+                <div className="card__body-actions">
+                  <div>
                     <div>
-                      <div>
-                        <h3>{__('Getting your bank account connection status...')}</h3>
-                      </div>
+                      <h3>{__('Getting your bank account connection status...')}</h3>
                     </div>
                   </div>
-                )}
-                {/* user has yet to complete their integration */}
-                {!accountConfirmed && accountPendingConfirmation && (
-                  <div className="card__body-actions">
+                </div>
+              )}
+              {/* user has yet to complete their integration */}
+              {!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>
-                )}
-                {/* user has completed their integration */}
-                {accountConfirmed && (
-                  <div className="card__body-actions">
-                    <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>
-                )}
-                {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;
-    }
+                </div>
+              )}
+            </div>
+          }
+          actions={
+            <>{ stillRequiringVerification && <Button
+              button="primary"
+              label={__('Complete Verification')}
+              icon={ICONS.SETTINGS}
+              navigate={stripeConnectionUrl}
+              className="stripe__complete-verification-button"
+            /> }
+            <Button
+              button="secondary"
+              label={__('View Transactions')}
+              icon={ICONS.SETTINGS}
+              navigate={`/$/${PAGES.WALLET}?tab=account-history`}
+            /></>
+          }
+        />
+        <br />
+      </Page>
+    );
   }
 }
 

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 { search } = location;
+  const {
+    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 && (
-        <div className="main--empty">
-          <Spinner delayed />
-        </div>
-      )}
-      {!loading && (
-        <>
-          {showIntro ? (
-            <YrblWalletEmpty includeWalletLink />
-          ) : (
-            <div className="card-stack">
-              <WalletBalance />
-              <TxoList search={search} />
-            </div>
-          )}
-        </>
-      )}
-    </Page>
+    <>
+      {/* @if TARGET='web' */}
+      <Page>
+        <Tabs onChange={onTabChange} index={tabIndex}>
+          <TabList className="tabs__list--collection-edit-page">
+            <Tab>{__('LBRY Credits')}</Tab>
+            <Tab>{__('Account History')}</Tab>
+            <Tab>{__('Payment History')}</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <div className="section card-stack">
+                <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>
+              </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;
+}