From 041647d1f6c4056af8177689f6caa68faab49e77 Mon Sep 17 00:00:00 2001
From: Anthony <contact@anthonymayfield.com>
Date: Thu, 12 Aug 2021 13:53:28 +0200
Subject: [PATCH] fix lot of linting errors and make command more userful

---
 package.json                                  |  2 +-
 .../walletFiatAccountHistory/view.jsx         | 33 +++------
 ui/component/walletFiatBalance/view.jsx       | 30 ++++----
 .../walletFiatPaymentBalance/view.jsx         | 21 ++----
 .../walletFiatPaymentHistory/view.jsx         | 64 +++++++----------
 ui/page/settingsStripeAccount/view.jsx        |  3 +-
 ui/page/settingsStripeCard/view.jsx           |  4 +-
 ui/page/wallet/view.jsx                       | 70 ++++++++-----------
 8 files changed, 87 insertions(+), 140 deletions(-)

diff --git a/package.json b/package.json
index e6765f310..eb99f3de0 100644
--- a/package.json
+++ b/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",
diff --git a/ui/component/walletFiatAccountHistory/view.jsx b/ui/component/walletFiatAccountHistory/view.jsx
index 3c83c3d69..dd40d08c4 100644
--- a/ui/component/walletFiatAccountHistory/view.jsx
+++ b/ui/component/walletFiatAccountHistory/view.jsx
@@ -1,16 +1,7 @@
 // @flow
-import * as ICONS from 'constants/icons';
-import * as MODALS from 'constants/modal_types';
-import * as PAGES from 'constants/pages';
 import React from 'react';
-import CreditAmount from 'component/common/credit-amount';
 import Button from 'component/button';
-import HelpLink from 'component/common/help-link';
 import Card from 'component/common/card';
-import Icon from 'component/common/icon';
-import LbcSymbol from 'component/common/lbc-symbol';
-import I18nMessage from 'component/i18nMessage';
-import { formatNumberWithCommas } from 'util/number';
 import { Lbryio } from 'lbryinc';
 import moment from 'moment';
 
@@ -20,43 +11,37 @@ type Props = {
 };
 
 const WalletBalance = (props: Props) => {
-  const {
-
-  } = props;
-
   // receive transactions from parent component
   let accountTransactions = props.transactions;
 
   // reverse so most recent payments come first
-  if(accountTransactions){
+  if (accountTransactions) {
     accountTransactions = accountTransactions.reverse();
   }
 
-  if(accountTransactions && accountTransactions.length > 10 ){
+  if (accountTransactions && accountTransactions.length > 10) {
     accountTransactions.length = 10;
   }
 
-  const [detailsExpanded, setDetailsExpanded] = React.useState(false);
+  // const [detailsExpanded, setDetailsExpanded] = React.useState(false);
   const [accountStatusResponse, setAccountStatusResponse] = React.useState();
   const [subscriptions, setSubscriptions] = React.useState([]);
 
   var environment = 'test';
 
-  function getAccountStatus(){
+  function getAccountStatus() {
     return Lbryio.call(
       'account',
       'status',
       {
-        environment
+        environment,
       },
       'post'
     );
   }
 
   React.useEffect(() => {
-
-
-    (async function(){
+    (async function() {
       const response = await getAccountStatus();
 
       setAccountStatusResponse(response);
@@ -68,7 +53,7 @@ const WalletBalance = (props: Props) => {
   return (
     <><Card
       title={'Tip History'}
-      body={1 == 1 && (
+      body={(
           <>
             <div className="table__wrapper">
               <table className="table table--transactions">
@@ -116,7 +101,7 @@ 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 style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
             </div>
           </>
       )}
@@ -170,7 +155,7 @@ const WalletBalance = (props: Props) => {
             ))}
             </tbody>
           </table>
-          {(!subscriptions || subscriptions.length === 0) && <p style={{textAlign:"center", marginTop: '22px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Subscriptions</p>}
+          {(!subscriptions || subscriptions.length === 0) && <p style={{textAlign: 'center', marginTop: '22px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Subscriptions</p>}
         </div>
       </>
     }
diff --git a/ui/component/walletFiatBalance/view.jsx b/ui/component/walletFiatBalance/view.jsx
index fbf08ba55..4661aa2f9 100644
--- a/ui/component/walletFiatBalance/view.jsx
+++ b/ui/component/walletFiatBalance/view.jsx
@@ -1,16 +1,12 @@
 // @flow
 import * as ICONS from 'constants/icons';
-import * as MODALS from 'constants/modal_types';
 import * as PAGES from 'constants/pages';
 import React from 'react';
 import CreditAmount from 'component/common/credit-amount';
 import Button from 'component/button';
-import HelpLink from 'component/common/help-link';
 import Card from 'component/common/card';
 import Icon from 'component/common/icon';
-import LbcSymbol from 'component/common/lbc-symbol';
 import I18nMessage from 'component/i18nMessage';
-import { formatNumberWithCommas } from 'util/number';
 
 type Props = {
   accountDetails: any,
@@ -27,8 +23,8 @@ const WalletBalance = (props: Props) => {
   const [detailsExpanded, setDetailsExpanded] = React.useState(false);
 
   return (
-    <>{1 == 1 && <Card
-      title={<><Icon size="18" icon={ICONS.FINANCE} />{accountDetails && accountDetails.total_received_unpaid/100 || 0} USD</>}
+    <>{<Card
+      title={<><Icon size="18" icon={ICONS.FINANCE} />{(accountDetails && (accountDetails.total_received_unpaid / 100)) || 0} USD</>}
       subtitle={
           <I18nMessage>
             This is your remaining balance that can still be withdrawn to your bank account
@@ -37,11 +33,11 @@ const WalletBalance = (props: Props) => {
       actions={
         <>
           <h2 className="section__title--small">
-            ${accountDetails && accountDetails.total_tipped / 100 || 0} Total Received Tips
+            ${(accountDetails && (accountDetails.total_tipped / 100)) || 0} Total Received Tips
           </h2>
 
           <h2 className="section__title--small">
-            ${accountDetails && accountDetails.total_paid_out/100 || 0}  Withdrawn
+            ${(accountDetails && (accountDetails.total_paid_out / 100)) || 0}  Withdrawn
             <Button
               button="link"
               label={detailsExpanded ? __('View less') : __('View more')}
@@ -56,7 +52,7 @@ const WalletBalance = (props: Props) => {
               <dl>
                 <dt>
                   <span className="dt__text">{__('Earned from uploads')}</span>
-                  {/*<span className="help--dt">({__('Earned from channel page')})</span>*/}
+                  {/* <span className="help--dt">({__('Earned from channel page')})</span> */}
                 </dt>
                 <dd>
                   <span className="dd__text">
@@ -73,19 +69,19 @@ const WalletBalance = (props: Props) => {
 
                 <dt>
                   <span className="dt__text">{__('Earned from channel page')}</span>
-                  {/*<span className="help--dt">({__('Delete or edit past content to spend')})</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>*/}
+                {/* <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>
           )}
diff --git a/ui/component/walletFiatPaymentBalance/view.jsx b/ui/component/walletFiatPaymentBalance/view.jsx
index 669806d08..20b5c121a 100644
--- a/ui/component/walletFiatPaymentBalance/view.jsx
+++ b/ui/component/walletFiatPaymentBalance/view.jsx
@@ -1,16 +1,11 @@
 // @flow
 import * as ICONS from 'constants/icons';
-import * as MODALS from 'constants/modal_types';
 import * as PAGES from 'constants/pages';
 import React from 'react';
-import CreditAmount from 'component/common/credit-amount';
 import Button from 'component/button';
-import HelpLink from 'component/common/help-link';
 import Card from 'component/common/card';
 import Icon from 'component/common/icon';
-import LbcSymbol from 'component/common/lbc-symbol';
 import I18nMessage from 'component/i18nMessage';
-import { formatNumberWithCommas } from 'util/number';
 
 type Props = {
   totalTippedAmount: number,
@@ -18,25 +13,23 @@ type Props = {
   transactions: any,
 };
 
-
-
 const WalletBalance = (props: Props) => {
   const {
-    accountDetails,
+    // accountDetails,
     totalTippedAmount,
     transactions,
   } = props;
 
-  const [detailsExpanded, setDetailsExpanded] = React.useState(false);
+  // const [detailsExpanded, setDetailsExpanded] = React.useState(false);
   const [totalCreatorsSupported, setTotalCreatorsSupported] = React.useState(false);
 
   // calculate how many unique users tipped
   React.useEffect(() => {
-    if(transactions){
-      let channelNames = []
+    if (transactions) {
+      let channelNames = [];
 
-      for(const transaction of transactions){
-        channelNames.push(transaction.channel_name)
+      for (const transaction of transactions) {
+        channelNames.push(transaction.channel_name);
         console.log(transaction.channel_name);
       }
 
@@ -46,7 +39,7 @@ const WalletBalance = (props: Props) => {
   }, [transactions]);
 
   return (
-    <>{1 == 1 && <Card
+    <>{<Card
       title={<><Icon size="18" icon={ICONS.FINANCE} />{totalTippedAmount} USD</>}
       subtitle={
           <I18nMessage>
diff --git a/ui/component/walletFiatPaymentHistory/view.jsx b/ui/component/walletFiatPaymentHistory/view.jsx
index a9c9f9f83..5eeb1e879 100644
--- a/ui/component/walletFiatPaymentHistory/view.jsx
+++ b/ui/component/walletFiatPaymentHistory/view.jsx
@@ -1,16 +1,7 @@
 // @flow
-import * as ICONS from 'constants/icons';
-import * as MODALS from 'constants/modal_types';
-import * as PAGES from 'constants/pages';
 import React from 'react';
-import CreditAmount from 'component/common/credit-amount';
 import Button from 'component/button';
-import HelpLink from 'component/common/help-link';
 import Card from 'component/common/card';
-import Icon from 'component/common/icon';
-import LbcSymbol from 'component/common/lbc-symbol';
-import I18nMessage from 'component/i18nMessage';
-import { formatNumberWithCommas } from 'util/number';
 import { Lbryio } from 'lbryinc';
 import moment from 'moment';
 
@@ -21,49 +12,43 @@ type Props = {
 };
 
 const WalletBalance = (props: Props) => {
-  const {
-
-  } = props;
-
   // receive transactions from parent component
   let accountTransactions = props.transactions;
 
-  console.log('heres transactions')
+  console.log('heres transactions');
   console.log(accountTransactions);
 
   // let totalTippedAmount = props.totalTippedAmount;
 
   // totalTippedAmount = 0;
 
-
-
   // reverse so most recent payments come first
-  if(accountTransactions){
+  if (accountTransactions) {
     accountTransactions = accountTransactions.reverse();
   }
 
-  const [detailsExpanded, setDetailsExpanded] = React.useState(false);
-  const [accountStatusResponse, setAccountStatusResponse] = React.useState();
+  // const [detailsExpanded, setDetailsExpanded] = React.useState(false);
+  // const [accountStatusResponse, setAccountStatusResponse] = React.useState();
+  // const [totalTippedAmount, setTotalTippedAmount] = React.useState(0);
+
   const [paymentHistoryTransactions, setPaymentHistoryTransactions] = React.useState();
   const [subscriptions, setSubscriptions] = React.useState();
-  const [totalTippedAmount, setTotalTippedAmount] = React.useState(0);
-
 
   const [lastFour, setLastFour] = React.useState();
 
   var environment = 'test';
 
-  function getPaymentHistory() {
-    return Lbryio.call(
-    'customer',
-    'list',
-    {
-      environment,
-    },
-    'post'
-  )};
+  // function getPaymentHistory() {
+  //   return Lbryio.call(
+  //   'customer',
+  //   'list',
+  //   {
+  //     environment,
+  //   },
+  //   'post'
+  // ); };
 
-  function getCustomerStatus(){
+  function getCustomerStatus() {
     return Lbryio.call(
       'customer',
       'status',
@@ -71,11 +56,11 @@ const WalletBalance = (props: Props) => {
         environment,
       },
       'post'
-    )
+    );
   }
 
   React.useEffect(() => {
-    (async function(){
+    (async function() {
         let response = accountTransactions;
 
         console.log('payment transactions');
@@ -91,15 +76,14 @@ const WalletBalance = (props: Props) => {
 
         const subscriptions  = [...response];
 
-        if(subscriptions && subscriptions.length > 2){
-          subscriptions.length = 2
-          setSubscriptions([])
+        if (subscriptions && subscriptions.length > 2) {
+          subscriptions.length = 2;
+          setSubscriptions([]);
         } else {
-          setSubscriptions([])
+          setSubscriptions([]);
         }
 
         console.log(response);
-
     })();
   }, [accountTransactions]);
 
@@ -153,7 +137,7 @@ const WalletBalance = (props: Props) => {
                 ))}
                 </tbody>
               </table>
-              {(!accountTransactions || accountTransactions.length === 0) && <p style={{textAlign:"center", marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
+              {(!accountTransactions || accountTransactions.length === 0) && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>}
             </div>
           </>
         }
@@ -207,7 +191,7 @@ const WalletBalance = (props: Props) => {
               ))}
               </tbody>
             </table>
-            {(!subscriptions || subscriptions.length === 0) && <p style={{textAlign:"center", marginTop: '22px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Subscriptions</p>}
+            {(!subscriptions || subscriptions.length === 0) && <p style={{textAlign: 'center', marginTop: '22px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Subscriptions</p>}
           </div>
         </>
       }
diff --git a/ui/page/settingsStripeAccount/view.jsx b/ui/page/settingsStripeAccount/view.jsx
index ea91bf98d..79cbdc6bb 100644
--- a/ui/page/settingsStripeAccount/view.jsx
+++ b/ui/page/settingsStripeAccount/view.jsx
@@ -8,7 +8,6 @@ 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';
 
@@ -186,7 +185,7 @@ class StripeAccountConnection extends React.Component<Props, State> {
       unpaidBalance,
       accountNotConfirmedButReceivedTips,
       pageTitle,
-      accountTransactions,
+      // accountTransactions,
     } = this.state;
 
     const { user } = this.props;
diff --git a/ui/page/settingsStripeCard/view.jsx b/ui/page/settingsStripeCard/view.jsx
index ee05abcb9..175e2e055 100644
--- a/ui/page/settingsStripeCard/view.jsx
+++ b/ui/page/settingsStripeCard/view.jsx
@@ -6,14 +6,12 @@ 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
 // update the environment for the calls to the backend to indicate which environment to hit
@@ -370,7 +368,7 @@ 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>
diff --git a/ui/page/wallet/view.jsx b/ui/page/wallet/view.jsx
index d0dce8e17..2bc991b5d 100644
--- a/ui/page/wallet/view.jsx
+++ b/ui/page/wallet/view.jsx
@@ -21,8 +21,7 @@ type Props = {
 const WalletPage = (props: Props) => {
   console.log(props);
 
-  var stripeEnvironment = 'test';
-  var environment = 'test';
+  const stripeEnvironment = 'test';
 
   const tab = new URLSearchParams(props.location.search).get('tab');
 
@@ -31,7 +30,6 @@ const WalletPage = (props: Props) => {
   const [customerTransactions, setCustomerTransactions] = React.useState();
   const [totalTippedAmount, setTotalTippedAmount] = React.useState(0);
 
-
   function getPaymentHistory() {
     return Lbryio.call(
       'customer',
@@ -40,20 +38,20 @@ const WalletPage = (props: Props) => {
         environment: stripeEnvironment,
       },
       'post'
-    )};
+    ); };
 
-  function getCustomerStatus(){
-    return Lbryio.call(
-      'customer',
-      'status',
-      {
-        environment: stripeEnvironment,
-      },
-      'post'
-    )
-  }
+  // function getCustomerStatus() {
+  //   return Lbryio.call(
+  //     'customer',
+  //     'status',
+  //     {
+  //       environment: stripeEnvironment,
+  //     },
+  //     'post'
+  //   );
+  // }
 
-  function getAccountStatus(){
+  function getAccountStatus() {
     return Lbryio.call(
       'account',
       'status',
@@ -64,7 +62,7 @@ const WalletPage = (props: Props) => {
     );
   }
 
-  function getAccountTransactionsa(){
+  function getAccountTransactionsa() {
     return Lbryio.call(
       'account',
       'list',
@@ -75,10 +73,9 @@ const WalletPage = (props: Props) => {
     );
   }
 
-
   // calculate account transactions section
   React.useEffect(() => {
-    (async function(){
+    (async function() {
       try {
         const response = await getAccountStatus();
 
@@ -87,9 +84,8 @@ const WalletPage = (props: Props) => {
         // TODO: some weird naming clash hence getAccountTransactionsa
         const getAccountTransactions = await getAccountTransactionsa();
 
-        setAccountTransactionResponse(getAccountTransactions)
-
-      } catch (err){
+        setAccountTransactionResponse(getAccountTransactions);
+      } catch (err) {
         console.log(err);
       }
     })();
@@ -97,28 +93,27 @@ const WalletPage = (props: Props) => {
 
   // populate customer payment data
   React.useEffect(() => {
-    (async function(){
+    (async function() {
       try {
         // get card payments customer has made
         const customerTransactionResponse = await getPaymentHistory();
 
         let totalTippedAmount = 0;
 
-        for(const transaction of customerTransactionResponse){
-          totalTippedAmount = totalTippedAmount + transaction.tipped_amount
+        for (const transaction of customerTransactionResponse) {
+          totalTippedAmount = totalTippedAmount + transaction.tipped_amount;
         }
 
         setTotalTippedAmount(totalTippedAmount / 100);
 
-        setCustomerTransactions(customerTransactionResponse)
-
-      } catch (err){
+        setCustomerTransactions(customerTransactionResponse);
+      } catch (err) {
         console.log(err);
       }
     })();
   }, []);
 
-  function focusLBCTab(){
+  function focusLBCTab() {
     document.getElementsByClassName('lbc-transactions')[0].style.display = 'inline';
     document.getElementsByClassName('fiat-transactions')[0].style.display = 'none';
     document.getElementsByClassName('payment-history-tab')[0].style.display = 'none';
@@ -126,10 +121,9 @@ const WalletPage = (props: Props) => {
     document.getElementsByClassName('lbc-tab-switcher')[0].style.textDecoration = 'underline';
     document.getElementsByClassName('fiat-tab-switcher')[0].style.textDecoration = 'none';
     document.getElementsByClassName('fiat-payment-history-switcher')[0].style.textDecoration = 'none';
-
   }
 
-  function focusAccountHistoryTab(){
+  function focusAccountHistoryTab() {
     document.getElementsByClassName('lbc-transactions')[0].style.display = 'none';
     document.getElementsByClassName('payment-history-tab')[0].style.display = 'none';
     document.getElementsByClassName('fiat-transactions')[0].style.display = 'inline';
@@ -137,10 +131,9 @@ const WalletPage = (props: Props) => {
     document.getElementsByClassName('lbc-tab-switcher')[0].style.textDecoration = 'none';
     document.getElementsByClassName('fiat-tab-switcher')[0].style.textDecoration = 'underline';
     document.getElementsByClassName('fiat-payment-history-switcher')[0].style.textDecoration = 'none';
-
   }
 
-  function focusPaymentHistoryTab(){
+  function focusPaymentHistoryTab() {
     document.getElementsByClassName('lbc-transactions')[0].style.display = 'none';
     document.getElementsByClassName('fiat-transactions')[0].style.display = 'none';
     document.getElementsByClassName('payment-history-tab')[0].style.display = 'inline';
@@ -148,7 +141,6 @@ const WalletPage = (props: Props) => {
     document.getElementsByClassName('lbc-tab-switcher')[0].style.textDecoration = 'none';
     document.getElementsByClassName('fiat-tab-switcher')[0].style.textDecoration = 'none';
     document.getElementsByClassName('fiat-payment-history-switcher')[0].style.textDecoration = 'underline';
-
   }
 
   // select the first tab
@@ -156,11 +148,11 @@ const WalletPage = (props: Props) => {
     if (tab === 'account-history') {
     // if (1 === 2) {
       focusAccountHistoryTab();
-    } else if (tab === 'payment-history'){
+    } else if (tab === 'payment-history') {
     // } else if (1 === 2){
       focusPaymentHistoryTab();
     } else {
-      focusLBCTab()
+      focusLBCTab();
     }
   }, []);
 
@@ -220,15 +212,15 @@ const WalletPage = (props: Props) => {
       {/* account received transactions section */}
       <div className="fiat-transactions" style={{display: 'none'}}>
           <WalletFiatBalance accountDetails={accountStatusResponse} />
-          <div style={{paddingTop: '25px'}}></div>
-          <WalletFiatAccountHistory transactions={accountTransactionResponse}/>
+          <div style={{paddingTop: '25px'}} />
+          <WalletFiatAccountHistory transactions={accountTransactionResponse} />
       </div>
 
       {/* fiat payment history for tips made by user */}
       <div className="payment-history-tab" style={{display: 'none'}}>
         <WalletFiatPaymentBalance transactions={customerTransactions} totalTippedAmount={totalTippedAmount} accountDetails={accountStatusResponse} />
-        <div style={{paddingTop: '25px'}}></div>
-        <WalletFiatPaymentHistory transactions={customerTransactions}/>
+        <div style={{paddingTop: '25px'}} />
+        <WalletFiatPaymentHistory transactions={customerTransactions} />
       </div>
 
     </Page>