Merge pull request #6917 from lbryio/squashed-and-merged

Wallet redesign

ui/component/common/credit-amount.jsx

@@ -49,6 +49,11 @@ class CreditAmount extends React.PureComponent<Props> {
       isFiat,
     } = this.props;
     const minimumRenderableAmount = 10 ** (-1 * precision);
+
+    // return null, otherwise it will try and convert undefined to a string
+    if (amount === undefined) {
+      return null;
+    }
     const fullPrice = formatFullPrice(amount, 2);
     const isFree = parseFloat(amount) === 0;
 

ui/component/inviteNew/view.jsx

@@ -11,7 +11,7 @@ import LbcSymbol from 'component/common/lbc-symbol';
 
 type Props = {
   errorMessage: ?string,
-  inviteNew: string => void,
+  inviteNew: (string) => void,
   isPending: boolean,
   referralLink: string,
   referralCode: string,
@@ -35,10 +35,10 @@ function InviteNew(props: Props) {
   const [referralSource, setReferralSource] = useState(referralCode);
 
   const handleReferralChange = React.useCallback(
-    code => {
+    (code) => {
       setReferralSource(code);
       // TODO: keep track of this in an array?
-      const matchingChannel = channels && channels.find(ch => ch.name === code);
+      const matchingChannel = channels && channels.find((ch) => ch.name === code);
       if (matchingChannel) {
         analytics.apiLogPublish(matchingChannel);
       }
@@ -68,12 +68,13 @@ function InviteNew(props: Props) {
   }, [topChannel, handleReferralChange]);
 
   function lookupUrlByClaimName(name, channels) {
-    const claim = channels.find(channel => channel.name === name);
+    const claim = channels.find((channel) => channel.name === name);
     return claim && claim.canonical_url ? claim.canonical_url.replace('lbry://', '') : name;
   }
 
   return (
     <div className={'columns'}>
+      <div className="column">
         <Card
           title={__('Invites')}
           subtitle={
@@ -90,9 +91,9 @@ function InviteNew(props: Props) {
                   type="select"
                   label={__('Customize link')}
                   value={referralSource}
-                onChange={e => handleReferralChange(e.target.value)}
+                  onChange={(e) => handleReferralChange(e.target.value)}
                 >
-                {channels.map(channel => (
+                  {channels.map((channel) => (
                     <option key={channel.claim_id} value={channel.name}>
                       {channel.name}
                     </option>
@@ -103,7 +104,8 @@ function InviteNew(props: Props) {
             </React.Fragment>
           }
         />
-
+      </div>
+      <div className="column">
         <Card
           title={__('Invite by email')}
           subtitle={
@@ -124,7 +126,7 @@ function InviteNew(props: Props) {
                   inputButton={
                     <Button button="secondary" type="submit" label={__('Invite')} disabled={isPending || !email} />
                   }
-                onChange={event => {
+                  onChange={(event) => {
                     handleEmailChanged(event);
                   }}
                 />
@@ -132,7 +134,9 @@ function InviteNew(props: Props) {
                   <I18nMessage
                     tokens={{
                       rewards_link: <Button button="link" navigate="/$/rewards" label={__('rewards')} />,
-                    referral_faq_link: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />,
+                      referral_faq_link: (
+                        <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />
+                      ),
                     }}
                   >
                     Read our %referral_faq_link% to learn more about rewards.
@@ -143,6 +147,7 @@ function InviteNew(props: Props) {
           }
         />
       </div>
+    </div>
   );
 }
 

ui/component/txoList/view.jsx

@@ -12,6 +12,20 @@ import { toCapitalCase } from 'util/string';
 import classnames from 'classnames';
 import HelpLink from 'component/common/help-link';
 import FileExporter from 'component/common/file-exporter';
+import WalletFiatPaymentHistory from 'component/walletFiatPaymentHistory';
+import WalletFiatAccountHistory from 'component/walletFiatAccountHistory';
+import { Lbryio } from 'lbryinc';
+import { getStripeEnvironment } from 'util/stripe';
+let stripeEnvironment = getStripeEnvironment();
+
+// constants to be used in query params
+const QUERY_NAME_CURRENCY = 'currency';
+const QUERY_NAME_TAB = 'tab';
+const QUERY_NAME_FIAT_TYPE = 'fiatType';
+// TODO: this tab will be renamed
+const DEFAULT_CURRENCY_PARAM = 'credits';
+const DEFAULT_TAB_PARAM = 'fiat-payment-history';
+const DEFAULT_FIAT_TYPE_PARAM = 'incoming';
 
 type Props = {
   search: string,
@@ -28,7 +42,7 @@ type Props = {
 };
 
 type Delta = {
-  dkey: string,
+  changedParameterKey: string,
   value: string,
 };
 
@@ -45,12 +59,91 @@ function TxoList(props: Props) {
     transactionsFile,
   } = props;
 
+  const [accountTransactionResponse, setAccountTransactionResponse] = React.useState([]);
+  const [customerTransactions, setCustomerTransactions] = React.useState([]);
+
+  function getPaymentHistory() {
+    return Lbryio.call(
+      'customer',
+      'list',
+      {
+        environment: stripeEnvironment,
+      },
+      'post'
+    );
+  }
+
+  function getAccountTransactions() {
+    return Lbryio.call(
+      'account',
+      'list',
+      {
+        environment: stripeEnvironment,
+      },
+      'post'
+    );
+  }
+
+  // calculate account transactions section
+  React.useEffect(() => {
+    (async function() {
+      try {
+        const accountTransactionResponse = await getAccountTransactions();
+
+        // reverse so order is from most recent to latest
+        if (accountTransactionResponse && accountTransactionResponse.length) {
+          accountTransactionResponse.reverse();
+        }
+
+        // TODO: remove this once pagination is implemented
+        if (accountTransactionResponse && accountTransactionResponse.length && accountTransactionResponse.length > 25) {
+          accountTransactionResponse.length = 25;
+        }
+
+        setAccountTransactionResponse(accountTransactionResponse);
+      } catch (err) {
+        console.log(err);
+      }
+    })();
+  }, []);
+
+  // populate customer payment data
+  React.useEffect(() => {
+    (async function() {
+      try {
+        // get card payments customer has made
+        let customerTransactionResponse = await getPaymentHistory();
+        // console.log('amount of transactions');
+        // console.log(customerTransactionResponse.length);
+
+        // reverse so order is from most recent to latest
+        if (customerTransactionResponse && customerTransactionResponse.length) {
+          customerTransactionResponse.reverse();
+        }
+
+        // TODO: remove this once pagination is implemented
+        if (customerTransactionResponse && customerTransactionResponse.length && customerTransactionResponse.length > 25) {
+          customerTransactionResponse.length = 25;
+        }
+
+        setCustomerTransactions(customerTransactionResponse);
+      } catch (err) {
+        console.log(err);
+      }
+    })();
+  }, []);
+
   const urlParams = new URLSearchParams(search);
   const page = urlParams.get(TXO.PAGE) || String(1);
   const pageSize = urlParams.get(TXO.PAGE_SIZE) || String(TXO.PAGE_SIZE_DEFAULT);
   const type = urlParams.get(TXO.TYPE) || TXO.ALL;
   const subtype = urlParams.get(TXO.SUB_TYPE);
   const active = urlParams.get(TXO.ACTIVE) || TXO.ALL;
+  const currency = urlParams.get(QUERY_NAME_CURRENCY) || DEFAULT_CURRENCY_PARAM;
+  const fiatType = urlParams.get(QUERY_NAME_FIAT_TYPE) || DEFAULT_FIAT_TYPE_PARAM;
+  // tab used in the wallet section
+  // TODO: need to change this eventually
+  const tab = urlParams.get(QUERY_NAME_TAB) || DEFAULT_TAB_PARAM;
 
   const currentUrlParams = {
     page,
@@ -58,11 +151,15 @@ function TxoList(props: Props) {
     active,
     type,
     subtype,
+    currency,
+    fiatType,
+    tab,
   };
 
   const hideStatus =
     type === TXO.SENT || (currentUrlParams.type === TXO.RECEIVED && currentUrlParams.subtype !== TXO.TIP);
 
+  // this is for sdk params
   const params = {};
   if (currentUrlParams.type) {
     if (currentUrlParams.type === TXO.ALL) {
@@ -121,7 +218,8 @@ function TxoList(props: Props) {
 
   function updateUrl(delta: Delta) {
     const newUrlParams = new URLSearchParams();
-    switch (delta.dkey) {
+
+    switch (delta.changedParameterKey) {
       case TXO.PAGE:
         if (currentUrlParams.type) {
           newUrlParams.set(TXO.TYPE, currentUrlParams.type);
@@ -133,6 +231,8 @@ function TxoList(props: Props) {
           newUrlParams.set(TXO.ACTIVE, currentUrlParams.active);
         }
         newUrlParams.set(TXO.PAGE, delta.value);
+        newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
+        newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
         break;
       case TXO.TYPE:
         newUrlParams.set(TXO.TYPE, delta.value);
@@ -151,6 +251,8 @@ function TxoList(props: Props) {
         }
         newUrlParams.set(TXO.PAGE, String(1));
         newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize);
+        newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
+        newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
         break;
       case TXO.SUB_TYPE:
         if (currentUrlParams.type) {
@@ -160,6 +262,8 @@ function TxoList(props: Props) {
         newUrlParams.set(TXO.SUB_TYPE, delta.value);
         newUrlParams.set(TXO.PAGE, String(1));
         newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize);
+        newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
+        newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
         break;
       case TXO.ACTIVE:
         if (currentUrlParams.type) {
@@ -171,6 +275,25 @@ function TxoList(props: Props) {
         newUrlParams.set(TXO.ACTIVE, delta.value);
         newUrlParams.set(TXO.PAGE, String(1));
         newUrlParams.set(TXO.PAGE_SIZE, currentUrlParams.pageSize);
+        newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
+        newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
+        break;
+      // toggling the currency type (lbc/fiat)
+      case QUERY_NAME_CURRENCY:
+        newUrlParams.set(QUERY_NAME_CURRENCY, delta.value);
+        newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
+        // only set fiat type (incoming|outgoing) if fiat is being used
+        if (delta.value === 'credits') {
+          newUrlParams.delete(QUERY_NAME_FIAT_TYPE);
+        } else {
+          newUrlParams.set(QUERY_NAME_FIAT_TYPE, currentUrlParams.fiatType);
+        }
+        break;
+      // toggling the fiat type (incoming/outgoing)
+      case QUERY_NAME_FIAT_TYPE:
+        newUrlParams.set(QUERY_NAME_FIAT_TYPE, delta.value);
+        newUrlParams.set(QUERY_NAME_TAB, currentUrlParams.tab);
+        newUrlParams.set(QUERY_NAME_CURRENCY, currentUrlParams.currency);
         break;
     }
 
@@ -188,31 +311,45 @@ function TxoList(props: Props) {
 
   return (
     <Card
-      title={<div className="table__header-text">{__(`Transactions`)}</div>}
+      title={
-      titleActions={
+        <><div className="table__header-text txo__table_header">{__(`Transactions`)}</div>
-        <div className="card__actions--inline">
+          <div className="txo__radios_container">
-          {!isFetchingTransactions && transactionsFile === null && (
+            <fieldset-section style={{display: 'inline'}} className="txo__radios_fieldset">
-            <label>{<span className="error__text">{__('Failed to process fetched data.')}</span>}</label>
+              {/* toggle between LBC and fiat buttons */}
-          )}
+              <div className={'txo__radios'}>
-          <div className="txo__export">
+                {/* toggle to LBC */}
-            <FileExporter
+                <Button
-              data={transactionsFile}
+                  button="alt"
-              label={__('Export')}
+                  onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_CURRENCY, value: 'credits' })}
-              tooltip={__('Fetch transaction data for export')}
+                  className={classnames(`button-toggle`, {
-              defaultFileName={'transactions-history.csv'}
+                    'button-toggle--active': currency === 'credits',
-              onFetch={() => fetchTransactions()}
+                  })}
-              progressMsg={isFetchingTransactions ? __('Fetching data') : ''}
+                  label={__('Credits')}
+                />
+                {/* toggle to fiat */}
+                <Button
+                  button="alt"
+                  onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_CURRENCY, value: 'fiat' })}
+                  className={classnames(`button-toggle`, {
+                    'button-toggle--active': currency === 'fiat',
+                  })}
+                  label={__('USD')}
                 />
               </div>
-          <Button button="alt" icon={ICONS.REFRESH} label={__('Refresh')} onClick={() => fetchTxoPage()} />
+            </fieldset-section>
           </div>
+        </>
+
       }
       isBodyList
-      body={
+      body={currency === 'credits'
-        <div>
+        ? <div>
+          {/* LBC transactions section */}
           <div className="card__body-actions">
-            <div className="card__actions">
+            <div className="card__actions card__actions--between">
+              <div className="card__actions--inline">
                 <div>
+                  {/* LBC transaction type dropdown */}
                   <FormField
                     type="select"
                     name="type"
@@ -223,7 +360,7 @@ function TxoList(props: Props) {
                       </>
                     }
                     value={type || 'all'}
-                  onChange={(e) => handleChange({ dkey: TXO.TYPE, value: e.target.value })}
+                    onChange={(e) => handleChange({ changedParameterKey: TXO.TYPE, value: e.target.value, tab })}
                   >
                     {Object.values(TXO.DROPDOWN_TYPES).map((v) => {
                       const stringV = String(v);
@@ -242,7 +379,7 @@ function TxoList(props: Props) {
                       name="subtype"
                       label={__('Payment Type')}
                       value={subtype || 'all'}
-                    onChange={(e) => handleChange({ dkey: TXO.SUB_TYPE, value: e.target.value })}
+                      onChange={(e) => handleChange({ changedParameterKey: TXO.SUB_TYPE, value: e.target.value, tab })}
                     >
                       {Object.values(TXO.DROPDOWN_SUBTYPES).map((v) => {
                         const stringV = String(v);
@@ -260,25 +397,28 @@ function TxoList(props: Props) {
                     <fieldset-section>
                       <label>{__('Status')}</label>
                       <div className={'txo__radios'}>
+                        {/* active transactions button */}
                         <Button
                           button="alt"
-                        onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'active' })}
+                          onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'active' })}
                           className={classnames(`button-toggle`, {
                             'button-toggle--active': active === TXO.ACTIVE,
                           })}
                           label={__('Active')}
                         />
+                        {/* historical transactions button */}
                         <Button
                           button="alt"
-                        onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'spent' })}
+                          onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'spent' })}
                           className={classnames(`button-toggle`, {
                             'button-toggle--active': active === 'spent',
                           })}
                           label={__('Historical')}
                         />
+                        {/* all transactions button */}
                         <Button
                           button="alt"
-                        onClick={(e) => handleChange({ dkey: TXO.ACTIVE, value: 'all' })}
+                          onClick={(e) => handleChange({ changedParameterKey: TXO.ACTIVE, value: 'all' })}
                           className={classnames(`button-toggle`, {
                             'button-toggle--active': active === 'all',
                           })}
@@ -289,11 +429,70 @@ function TxoList(props: Props) {
                   </div>
                 )}
               </div>
+              {/* export and refresh buttons */}
+              <div className="card__actions--inline">
+                {!isFetchingTransactions && transactionsFile === null && (
+                  <label>{<span className="error__text">{__('Failed to process fetched data.')}</span>}</label>
+                )}
+                <div className="txo__export">
+                  <FileExporter
+                    data={transactionsFile}
+                    label={__('Export')}
+                    tooltip={__('Fetch transaction data for export')}
+                    defaultFileName={'transactions-history.csv'}
+                    onFetch={() => fetchTransactions()}
+                    progressMsg={isFetchingTransactions ? __('Fetching data') : ''}
+                  />
                 </div>
+                <Button button="alt" icon={ICONS.REFRESH} label={__('Refresh')} onClick={() => fetchTxoPage()} />
+              </div>
+            </div>
+          </div>
+          {/* listing of the lbc transactions */}
           <TransactionListTable txos={txoPage} />
           <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} />
         </div>
+        : <div>
+        {/* FIAT SECTION ( toggle buttons and transactions) */}
+          <div className="section card-stack">
+            <div className="card__body-actions">
+              <div className="card__actions">
+                <div>
+                  <fieldset-section>
+                    <label>{__('Type')}</label>
+                    <div className={'txo__radios'}>
+                      {/* incoming transactions button */}
+                      <Button
+                        button="alt"
+                        onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'incoming'})}
+                        className={classnames(`button-toggle`, {
+                          'button-toggle--active': fiatType === 'incoming',
+                        })}
+                        label={__('Incoming')}
+                      />
+                      {/* incoming transactions button */}
+                      <Button
+                        button="alt"
+                        onClick={(e) => handleChange({ changedParameterKey: QUERY_NAME_FIAT_TYPE, value: 'outgoing'})}
+                        className={classnames(`button-toggle`, {
+                          'button-toggle--active': fiatType === 'outgoing',
+                        })}
+                        label={__('Outgoing')}
+                      />
+                    </div>
+                  </fieldset-section>
+                </div>
+              </div>
+            </div>
+            {/* listing of the transactions */}
+            { fiatType === 'incoming' && <WalletFiatAccountHistory transactions={accountTransactionResponse} /> }
+            { fiatType === 'outgoing' && <WalletFiatPaymentHistory transactions={customerTransactions} /> }
+            {/* TODO: have to finish pagination */}
+            {/* <Paginate totalPages={Math.ceil(txoItemCount / Number(pageSize))} /> */}
+          </div>
+        </div>
       }
+
     />
   );
 }

ui/component/walletBalance/view.jsx

@@ -10,6 +10,7 @@ import Card from 'component/common/card';
 import LbcSymbol from 'component/common/lbc-symbol';
 import I18nMessage from 'component/i18nMessage';
 import { formatNumberWithCommas } from 'util/number';
+import WalletFiatBalance from 'component/walletFiatBalance';
 
 type Props = {
   balance: number,
@@ -63,6 +64,8 @@ const WalletBalance = (props: Props) => {
   }, [doFetchUtxoCounts, balance, detailsExpanded]);
 
   return (
+    <div className={'columns'}>
+      <div className="column">
         <Card
           title={<LbcSymbol postfix={formatNumberWithCommas(totalBalance)} isTitle />}
           subtitle={
@@ -146,14 +149,21 @@ const WalletBalance = (props: Props) => {
                 </p>
               ) : (
                 <p className="help--warning">
-              {__('Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.')}
+                  {__(
+                    'Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.'
+                  )}
                   <HelpLink navigate={`/$/${PAGES.BACKUP}`} />
                 </p>
               )}
               {/* @endif */}
               <div className="section__actions">
                 <Button button="primary" label={__('Buy')} icon={ICONS.BUY} navigate={`/$/${PAGES.BUY}`} />
-            <Button button="secondary" label={__('Receive')} icon={ICONS.RECEIVE} navigate={`/$/${PAGES.RECEIVE}`} />
+                <Button
+                  button="secondary"
+                  label={__('Receive')}
+                  icon={ICONS.RECEIVE}
+                  navigate={`/$/${PAGES.RECEIVE}`}
+                />
                 <Button button="secondary" label={__('Send')} icon={ICONS.SEND} navigate={`/$/${PAGES.SEND}`} />
               </div>
               {(otherCount > WALLET_CONSOLIDATE_UTXOS || consolidateIsPending || consolidatingUtxos) && (
@@ -173,14 +183,20 @@ const WalletBalance = (props: Props) => {
                       help: <HelpLink href="https://lbry.com/faq/transaction-types" />,
                     }}
                   >
-                Your wallet has a lot of change lying around. Consolidating will speed up your transactions. This could
+                    Your wallet has a lot of change lying around. Consolidating will speed up your transactions. This
-                take some time. %now%%help%
+                    could take some time. %now%%help%
                   </I18nMessage>
                 </p>
               )}
             </>
           }
         />
+      </div>
+      <div className="column">
+        {/* fiat balance card */}
+        <WalletFiatBalance />
+      </div>
+    </div>
   );
 };
 

ui/component/walletFiatAccountHistory/view.jsx

@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 import Button from 'component/button';
-import Card from 'component/common/card';
 import moment from 'moment';
 
 type Props = {
@@ -21,15 +20,11 @@ const WalletBalance = (props: Props) => {
   }
 
   // if there are more than 10 transactions, limit it to 10 for the frontend
-  if (accountTransactions && accountTransactions.length > 10) {
+  // if (accountTransactions && accountTransactions.length > 10) {
-    accountTransactions.length = 10;
+  //   accountTransactions.length = 10;
-  }
+  // }
 
   return (
-    <><Card
-      title={'Tip History'}
-      body={(
-          <>
     <div className="table__wrapper">
       <table className="table table--transactions">
         <thead>
@@ -76,12 +71,9 @@ const WalletBalance = (props: Props) => {
         ))}
         </tbody>
       </table>
-              {!accountTransactions && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
+      {!accountTransactions && <p className="wallet__fiat-transactions">No Transactions</p>}
     </div>
-          </>
+
-      )}
-    />
-  </>
   );
 };
 

ui/component/walletFiatBalance/view.jsx

@@ -6,84 +6,64 @@ import Button from 'component/button';
 import Card from 'component/common/card';
 import Icon from 'component/common/icon';
 import I18nMessage from 'component/i18nMessage';
+import { Lbryio } from 'lbryinc';
+import { getStripeEnvironment } from 'util/stripe';
+let stripeEnvironment = getStripeEnvironment();
 
-type Props = {
+const WalletBalance = () => {
-  accountDetails: any,
+  const [accountStatusResponse, setAccountStatusResponse] = React.useState();
-};
 
-const WalletBalance = (props: Props) => {
+  function getAccountStatus() {
-  const {
+    return Lbryio.call(
-    accountDetails,
+      'account',
-  } = props;
+      'status',
+      {
+        environment: stripeEnvironment,
+      },
+      'post'
+    );
+  }
+
+  // calculate account transactions section
+  React.useEffect(() => {
+    (async function () {
+      try {
+        if (!stripeEnvironment) {
+          return;
+        }
+        const response = await getAccountStatus();
+
+        setAccountStatusResponse(response);
+      } catch (err) {
+        console.log(err);
+      }
+    })();
+  }, [stripeEnvironment]);
 
   return (
     <>{<Card
-      title={<><Icon size={18} icon={ICONS.FINANCE} />{(accountDetails && ((accountDetails.total_received_unpaid - accountDetails.total_paid_out) / 100)) || 0} USD</>}
+      title={<><Icon size={18} icon={ICONS.FINANCE} />{(accountStatusResponse && ((accountStatusResponse.total_received_unpaid - accountStatusResponse.total_paid_out) / 100)) || 0} USD</>}
-      subtitle={accountDetails && accountDetails.total_received_unpaid > 0 &&
+      subtitle={accountStatusResponse && accountStatusResponse.total_received_unpaid > 0 ? (
           <I18nMessage>
             This is your pending balance that will be automatically sent to your bank account
-          </I18nMessage>
+          </I18nMessage>) : (
+        <I18nMessage>
+          When you begin to receive tips your balance will be updated here
+        </I18nMessage>)
       }
       actions={
         <>
           <h2 className="section__title--small">
-            ${(accountDetails && (accountDetails.total_received_unpaid / 100)) || 0} Total Received Tips
+            ${(accountStatusResponse && (accountStatusResponse.total_received_unpaid / 100)) || 0} Total Received Tips
           </h2>
 
           <h2 className="section__title--small">
-            ${(accountDetails && (accountDetails.total_paid_out / 100)) || 0}  Withdrawn
+            ${(accountStatusResponse && (accountStatusResponse.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={__('Bank Accounts')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} />
-            <Button button="secondary" label={__('Account Configuration')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} />
+            <Button button="secondary" label={__('Payment Methods')} icon={ICONS.SETTINGS} navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} />
           </div>
         </>
       }

ui/component/walletFiatPaymentHistory/view.jsx

@@ -1,7 +1,6 @@
 // @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 { getStripeEnvironment } from 'util/stripe';
@@ -16,10 +15,6 @@ const WalletBalance = (props: Props) => {
   // receive transactions from parent component
   const { transactions: accountTransactions } = props;
 
-  // const [accountStatusResponse, setAccountStatusResponse] = React.useState();
-
-  // const [subscriptions, setSubscriptions] = React.useState();
-
   const [lastFour, setLastFour] = React.useState();
 
   function getCustomerStatus() {
@@ -35,13 +30,10 @@ const WalletBalance = (props: Props) => {
 
   // TODO: this is actually incorrect, last4 should be populated based on the transaction not the current customer details
   React.useEffect(() => {
-    (async function () {
+    (async function() {
         const customerStatusResponse = await getCustomerStatus();
 
-      const lastFour =
+        const lastFour = customerStatusResponse.PaymentMethods && customerStatusResponse.PaymentMethods.length && customerStatusResponse.PaymentMethods[0].card.last4;
-        customerStatusResponse.PaymentMethods &&
-        customerStatusResponse.PaymentMethods.length &&
-        customerStatusResponse.PaymentMethods[0].card.last4;
 
         setLastFour(lastFour);
     })();
@@ -49,12 +41,10 @@ const WalletBalance = (props: Props) => {
 
   return (
     <>
-      <Card
+      <div className="section card-stack">
-        title={__('Payment History')}
-        body={
-          <>
         <div className="table__wrapper">
           <table className="table table--transactions">
+            {/* table header */}
             <thead>
             <tr>
               <th className="date-header">{__('Date')}</th>
@@ -65,11 +55,14 @@ const WalletBalance = (props: Props) => {
               <th>{__('Anonymous')}</th>
             </tr>
             </thead>
+            {/* list data for transactions */}
             <tbody>
             {accountTransactions &&
             accountTransactions.map((transaction) => (
               <tr key={transaction.name + transaction.created_at}>
+                {/* date */}
                 <td>{moment(transaction.created_at).format('LLL')}</td>
+                {/* receiving channel name */}
                 <td>
                   <Button
                     className=""
@@ -78,6 +71,7 @@ const WalletBalance = (props: Props) => {
                     button="link"
                   />
                 </td>
+                {/* link to content or channel */}
                 <td>
                   <Button
                     className=""
@@ -90,22 +84,21 @@ const WalletBalance = (props: Props) => {
                     button="link"
                   />
                 </td>
+                {/* how much tipped */}
                 <td>${transaction.tipped_amount / 100}</td>
+                {/* TODO: this is incorrect need it per transactions not per user */}
+                {/* last four of credit card  */}
                 <td>{lastFour}</td>
+                {/* whether tip is anonymous or not */}
                 <td>{transaction.private_tip ? 'Yes' : 'No'}</td>
               </tr>
             ))}
             </tbody>
           </table>
-              {(!accountTransactions || accountTransactions.length === 0) && (
+          {/* show some markup if there's no transactions */}
-                <p style={{ textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)' }}>
+          {(!accountTransactions || accountTransactions.length === 0) && <p className="wallet__fiat-transactions">No Transactions</p>}
-                  No Transactions
+        </div>
-                </p>
-              )}
       </div>
-          </>
-        }
-      />
   </>
   );
 };

ui/page/settingsStripeAccount/view.jsx

@@ -281,7 +281,8 @@ class StripeAccountConnection extends React.Component<Props, State> {
               )}
             </div>
           }
-          actions={
+          // only show additional buttons if its for additional verification or to show transaction page
+          actions={(stillRequiringVerification || accountConfirmed) &&
             <>
               {stillRequiringVerification && (
                 <Button
@@ -292,12 +293,14 @@ class StripeAccountConnection extends React.Component<Props, State> {
                   className="stripe__complete-verification-button"
                 />
               )}
+              {accountConfirmed && (
                 <Button
                   button="secondary"
                   label={__('View Transactions')}
                   icon={ICONS.SETTINGS}
-                navigate={`/$/${PAGES.WALLET}?tab=fiat-payment-history`}
+                  navigate={`/$/${PAGES.WALLET}?fiatType=incoming&tab=fiat-payment-history&currency=fiat`}
                 />
+              )}
             </>
           }
         />

ui/page/settingsStripeCard/view.jsx

@@ -426,7 +426,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
                   button="primary"
                   label={__('View Transactions')}
                   icon={ICONS.SETTINGS}
-                  navigate={`/$/${PAGES.WALLET}?tab=fiat-account-history`}
+                  navigate={`/$/${PAGES.WALLET}?fiatType=outgoing&tab=fiat-payment-history&currency=fiat`}
                 />
               }
             />

ui/page/wallet/view.jsx

@@ -2,18 +2,12 @@
 import React from 'react';
 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 { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs';
-import { getStripeEnvironment } from 'util/stripe';
 
 const TAB_QUERY = 'tab';
 
@@ -23,8 +17,6 @@ const TABS = {
   PAYMENT_HISTORY: 'fiat-payment-history',
 };
 
-let stripeEnvironment = getStripeEnvironment();
-
 type Props = {
   history: { action: string, push: (string) => void, replace: (string) => void },
   location: { search: string, pathname: string },
@@ -73,84 +65,6 @@ const WalletPage = (props: Props) => {
     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 {
-        if (!stripeEnvironment) {
-          return;
-        }
-        const response = await getAccountStatus();
-
-        setAccountStatusResponse(response);
-
-        // TODO: some weird naming clash hence getAccountTransactionsa
-        const getAccountTransactions = await getAccountTransactionsa();
-
-        setAccountTransactionResponse(getAccountTransactions);
-      } catch (err) {
-        console.log(err);
-      }
-    })();
-  }, [stripeEnvironment]);
-
-  // populate customer payment data
-  React.useEffect(() => {
-    (async function () {
-      try {
-        // get card payments customer has made
-        if (!stripeEnvironment) {
-          return;
-        }
-        let customerTransactionResponse = await getPaymentHistory();
-        if (customerTransactionResponse && customerTransactionResponse.length) {
-          customerTransactionResponse.reverse();
-        }
-
-        setCustomerTransactions(customerTransactionResponse);
-      } catch (err) {
-        console.log(err);
-      }
-    })();
-  }, [stripeEnvironment]);
-
   // @endif
 
   const { totalBalance } = props;
@@ -159,15 +73,19 @@ const WalletPage = (props: Props) => {
 
   return (
     <>
-      {stripeEnvironment && (
+      {/* @if TARGET='web' */}
       <Page>
         <Tabs onChange={onTabChange} index={tabIndex}>
           <TabList className="tabs__list--collection-edit-page">
-              <Tab>{__('LBRY Credits')}</Tab>
+            <Tab>{__('Balance')}</Tab>
-              <Tab>{__('Account History')}</Tab>
+            <Tab>{__('Transactions')}</Tab>
-              <Tab>{__('Payment History')}</Tab>
           </TabList>
           <TabPanels>
+            {/* balances for lbc and fiat */}
+            <TabPanel>
+              <WalletBalance />
+            </TabPanel>
+            {/* transactions panel */}
             <TabPanel>
               <div className="section card-stack">
                 <div className="lbc-transactions">
@@ -184,7 +102,6 @@ const WalletPage = (props: Props) => {
                         <YrblWalletEmpty includeWalletLink />
                       ) : (
                         <div className="card-stack">
-                            <WalletBalance />
                           <TxoList search={search} />
                         </div>
                       )}
@@ -193,26 +110,11 @@ const WalletPage = (props: Props) => {
                 </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 */}
-      {!stripeEnvironment && (
+      {/* @if TARGET='app' */}
       <Page>
         {loading && (
           <div className="main--empty">
@@ -225,14 +127,13 @@ const WalletPage = (props: Props) => {
               <YrblWalletEmpty includeWalletLink />
             ) : (
               <div className="card-stack">
-                  <WalletBalance />
                 <TxoList search={search} />
               </div>
             )}
           </>
         )}
       </Page>
-      )}
+      {/* @endif */}
     </>
   );
 };

ui/scss/component/_txo-list.scss

@@ -10,3 +10,21 @@
     display: block;
   }
 }
+
+.txo__table_header {
+  width: 124px;
+  display: inline-block;
+}
+
+// displaying fiat transactions (incoming/outgoing) in wallet
+.wallet__fiat-transactions {
+  text-align: center;
+  margin-top: 13px;
+  margin-bottom: 9px;
+  font-size: 13px;
+  color: rgb(171, 171, 171);
+}
+
+.txo__radios_container, .txo__radios, .txo__radios_fieldset {
+  display: inline !important;
+}