From c66cfb28b58851d78966253632e4ae4620c97ab7 Mon Sep 17 00:00:00 2001
From: zeppi <jessopb@gmail.com>
Date: Tue, 19 Oct 2021 13:57:24 -0400
Subject: [PATCH] tip modal no fiat

---
 static/app-strings.json                       |   1 +
 ui/component/router/view.jsx                  |   4 -
 ui/component/settingAccount/view.jsx          |  35 +-
 ui/component/walletBalance/view.jsx           | 250 +++++-----
 .../walletFiatAccountHistory/index.js         |   3 -
 .../walletFiatAccountHistory/view.jsx         |  77 ---
 ui/component/walletFiatBalance/index.js       |   3 -
 ui/component/walletFiatBalance/view.jsx       |  97 ----
 .../walletFiatPaymentBalance/index.js         |   3 -
 .../walletFiatPaymentBalance/view.jsx         |  76 ---
 .../walletFiatPaymentHistory/index.js         |   3 -
 .../walletFiatPaymentHistory/view.jsx         | 109 -----
 ui/component/walletSendTip/view.jsx           | 284 +----------
 ui/page/settingsStripeAccount/index.js        |  12 -
 ui/page/settingsStripeAccount/view.jsx        | 313 ------------
 ui/page/settingsStripeCard/index.js           |  23 -
 ui/page/settingsStripeCard/view.jsx           | 444 ------------------
 17 files changed, 135 insertions(+), 1602 deletions(-)
 delete mode 100644 ui/component/walletFiatAccountHistory/index.js
 delete mode 100644 ui/component/walletFiatAccountHistory/view.jsx
 delete mode 100644 ui/component/walletFiatBalance/index.js
 delete mode 100644 ui/component/walletFiatBalance/view.jsx
 delete mode 100644 ui/component/walletFiatPaymentBalance/index.js
 delete mode 100644 ui/component/walletFiatPaymentBalance/view.jsx
 delete mode 100644 ui/component/walletFiatPaymentHistory/index.js
 delete mode 100644 ui/component/walletFiatPaymentHistory/view.jsx
 delete mode 100644 ui/page/settingsStripeAccount/index.js
 delete mode 100644 ui/page/settingsStripeAccount/view.jsx
 delete mode 100644 ui/page/settingsStripeCard/index.js
 delete mode 100644 ui/page/settingsStripeCard/view.jsx

diff --git a/static/app-strings.json b/static/app-strings.json
index d42de1470..4ba96f4db 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -2193,5 +2193,6 @@
   "Trending for #Art": "Trending for #Art",
   "Trending for #Btc": "Trending for #Btc",
   "Trending for #Music": "Trending for #Music",
+  "You sent %lbc% as a tip, Mahalo!": "You sent %lbc% as a tip, Mahalo!",
   "--end--": "--end--"
 }
diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index 6d42cb2a3..27e6fc0ed 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -56,8 +56,6 @@ import RepostNew from 'page/repost';
 import RewardsPage from 'page/rewards';
 import RewardsVerifyPage from 'page/rewardsVerify';
 import SearchPage from 'page/search';
-import SettingsStripeCard from 'page/settingsStripeCard';
-import SettingsStripeAccount from 'page/settingsStripeAccount';
 
 import SettingsCreatorPage from 'page/settingsCreator';
 import SettingsNotificationsPage from 'page/settingsNotifications';
@@ -279,8 +277,6 @@ function AppRouter(props: Props) {
         component={isAuthenticated || !IS_WEB ? ChannelsFollowingPage : DiscoverPage}
       />
       <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_NOTIFICATIONS}`} component={SettingsNotificationsPage} />
-      <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} component={SettingsStripeCard} />
-      <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} component={SettingsStripeAccount} />
       <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_UPDATE_PWD}`} component={UpdatePasswordPage} />
       <PrivateRoute
         {...props}
diff --git a/ui/component/settingAccount/view.jsx b/ui/component/settingAccount/view.jsx
index 812e3818c..6e6d50e5f 100644
--- a/ui/component/settingAccount/view.jsx
+++ b/ui/component/settingAccount/view.jsx
@@ -8,7 +8,6 @@ import Card from 'component/common/card';
 import SettingsRow from 'component/settingsRow';
 import SyncToggle from 'component/syncToggle';
 import { getPasswordFromCookie } from 'util/saved-passwords';
-import { getStripeEnvironment } from 'util/stripe';
 
 type Props = {
   // --- select ---
@@ -21,7 +20,7 @@ type Props = {
 };
 
 export default function SettingAccount(props: Props) {
-  const { isAuthenticated, walletEncrypted, user, myChannels, doWalletStatus } = props;
+  const { isAuthenticated, walletEncrypted, myChannels, doWalletStatus } = props;
   const [storedPassword, setStoredPassword] = React.useState(false);
 
   // Determine if password is stored.
@@ -62,38 +61,6 @@ export default function SettingAccount(props: Props) {
             <SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />
             {/* @endif */}
 
-            {/* @if TARGET='web' */}
-            {user && getStripeEnvironment() && (
-              <SettingsRow
-                title={__('Bank Accounts')}
-                subtitle={__('Connect a bank account to receive tips and compensation in your local currency.')}
-              >
-                <Button
-                  button="inverse"
-                  label={__('Manage')}
-                  icon={ICONS.ARROW_RIGHT}
-                  navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`}
-                />
-              </SettingsRow>
-            )}
-            {/* @endif */}
-
-            {/* @if TARGET='web' */}
-            {isAuthenticated && getStripeEnvironment() && (
-              <SettingsRow
-                title={__('Payment Methods')}
-                subtitle={__('Add a credit card to tip creators in their local currency.')}
-              >
-                <Button
-                  button="inverse"
-                  label={__('Manage')}
-                  icon={ICONS.ARROW_RIGHT}
-                  navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`}
-                />
-              </SettingsRow>
-            )}
-            {/* @endif */}
-
             {myChannels && (
               <SettingsRow title={__('Comments')} subtitle={__('View your past comments.')}>
                 <Button
diff --git a/ui/component/walletBalance/view.jsx b/ui/component/walletBalance/view.jsx
index 5288b63d5..6746d5c36 100644
--- a/ui/component/walletBalance/view.jsx
+++ b/ui/component/walletBalance/view.jsx
@@ -10,7 +10,6 @@ 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,
@@ -64,139 +63,124 @@ const WalletBalance = (props: Props) => {
   }, [doFetchUtxoCounts, balance, detailsExpanded]);
 
   return (
-    <div className={'columns'}>
-      <div className="column">
-        <Card
-          title={<LbcSymbol postfix={formatNumberWithCommas(totalBalance)} isTitle />}
-          subtitle={
-            totalLocked > 0 ? (
-              <I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
-                Your total balance. All of this is yours, but some %lbc% is in use on channels and content right now.
+    <Card
+      title={<LbcSymbol postfix={formatNumberWithCommas(totalBalance)} isTitle />}
+      subtitle={
+        totalLocked > 0 ? (
+          <I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
+            Your total balance. All of this is yours, but some %lbc% is in use on channels and content right now.
+          </I18nMessage>
+        ) : (
+          <span>{__('Your total balance.')}</span>
+        )
+      }
+      actions={
+        <>
+          <h2 className="section__title--small">
+            <I18nMessage tokens={{ lbc_amount: <CreditAmount amount={balance} precision={4} /> }}>
+              %lbc_amount% immediately spendable
+            </I18nMessage>
+          </h2>
+
+          <h2 className="section__title--small">
+            <I18nMessage
+              tokens={{
+                lbc_amount: <CreditAmount amount={totalLocked} precision={4} />,
+              }}
+            >
+              %lbc_amount% boosting content
+            </I18nMessage>
+            <Button
+              button="link"
+              label={detailsExpanded ? __('View less') : __('View more')}
+              iconRight={detailsExpanded ? ICONS.UP : ICONS.DOWN}
+              onClick={() => setDetailsExpanded(!detailsExpanded)}
+            />
+          </h2>
+          {detailsExpanded && (
+            <div className="section__subtitle">
+              <dl>
+                <dt>
+                  <span className="dt__text">{__('...earned from others')}</span>
+                  <span className="help--dt">({__('Unlock to spend')})</span>
+                </dt>
+                <dd>
+                  <span className="dd__text">
+                    {Boolean(tipsBalance) && (
+                      <Button
+                        button="link"
+                        className="dd__button"
+                        disabled={operationPending}
+                        icon={ICONS.UNLOCK}
+                        onClick={() => doOpenModal(MODALS.MASS_TIP_UNLOCK)}
+                      />
+                    )}
+                    <CreditAmount amount={tipsBalance} precision={4} />
+                  </span>
+                </dd>
+
+                <dt>
+                  <span className="dt__text">{__('...on initial publishes')}</span>
+                  <span className="help--dt">({__('Delete or edit past content to spend')})</span>
+                </dt>
+                <dd>
+                  <CreditAmount amount={claimsBalance} precision={4} />
+                </dd>
+
+                <dt>
+                  <span className="dt__text">{__('...supporting content')}</span>
+                  <span className="help--dt">({__('Delete supports to spend')})</span>
+                </dt>
+                <dd>
+                  <CreditAmount amount={supportsBalance} precision={4} />
+                </dd>
+              </dl>
+            </div>
+          )}
+
+          {/* @if TARGET='app' */}
+          {hasSynced ? (
+            <p className="section help">
+              {__('A backup of your wallet is synced with lbry.tv.')}
+              <HelpLink href="https://lbry.com/faq/account-sync" />
+            </p>
+          ) : (
+            <p className="help--warning">
+              {__('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={__('Send')} icon={ICONS.SEND} navigate={`/$/${PAGES.SEND}`} />
+          </div>
+          {(otherCount > WALLET_CONSOLIDATE_UTXOS || consolidateIsPending || consolidatingUtxos) && (
+            <p className="help">
+              <I18nMessage
+                tokens={{
+                  now: (
+                    <Button
+                      button="link"
+                      onClick={() => doUtxoConsolidate()}
+                      disabled={operationPending}
+                      label={
+                        consolidateIsPending || consolidatingUtxos ? __('Consolidating...') : __('Consolidate Now')
+                      }
+                    />
+                  ),
+                  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
+                take some time. %now%%help%
               </I18nMessage>
-            ) : (
-              <span>{__('Your total balance.')}</span>
-            )
-          }
-          actions={
-            <>
-              <h2 className="section__title--small">
-                <I18nMessage tokens={{ lbc_amount: <CreditAmount amount={balance} precision={4} /> }}>
-                  %lbc_amount% immediately spendable
-                </I18nMessage>
-              </h2>
-
-              <h2 className="section__title--small">
-                <I18nMessage
-                  tokens={{
-                    lbc_amount: <CreditAmount amount={totalLocked} precision={4} />,
-                  }}
-                >
-                  %lbc_amount% boosting content
-                </I18nMessage>
-                <Button
-                  button="link"
-                  label={detailsExpanded ? __('View less') : __('View more')}
-                  iconRight={detailsExpanded ? ICONS.UP : ICONS.DOWN}
-                  onClick={() => setDetailsExpanded(!detailsExpanded)}
-                />
-              </h2>
-              {detailsExpanded && (
-                <div className="section__subtitle">
-                  <dl>
-                    <dt>
-                      <span className="dt__text">{__('...earned from others')}</span>
-                      <span className="help--dt">({__('Unlock to spend')})</span>
-                    </dt>
-                    <dd>
-                      <span className="dd__text">
-                        {Boolean(tipsBalance) && (
-                          <Button
-                            button="link"
-                            className="dd__button"
-                            disabled={operationPending}
-                            icon={ICONS.UNLOCK}
-                            onClick={() => doOpenModal(MODALS.MASS_TIP_UNLOCK)}
-                          />
-                        )}
-                        <CreditAmount amount={tipsBalance} precision={4} />
-                      </span>
-                    </dd>
-
-                    <dt>
-                      <span className="dt__text">{__('...on initial publishes')}</span>
-                      <span className="help--dt">({__('Delete or edit past content to spend')})</span>
-                    </dt>
-                    <dd>
-                      <CreditAmount amount={claimsBalance} precision={4} />
-                    </dd>
-
-                    <dt>
-                      <span className="dt__text">{__('...supporting content')}</span>
-                      <span className="help--dt">({__('Delete supports to spend')})</span>
-                    </dt>
-                    <dd>
-                      <CreditAmount amount={supportsBalance} precision={4} />
-                    </dd>
-                  </dl>
-                </div>
-              )}
-
-              {/* @if TARGET='app' */}
-              {hasSynced ? (
-                <p className="section help">
-                  {__('A backup of your wallet is synced with lbry.tv.')}
-                  <HelpLink href="https://lbry.com/faq/account-sync" />
-                </p>
-              ) : (
-                <p className="help--warning">
-                  {__(
-                    '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={__('Send')} icon={ICONS.SEND} navigate={`/$/${PAGES.SEND}`} />
-              </div>
-              {(otherCount > WALLET_CONSOLIDATE_UTXOS || consolidateIsPending || consolidatingUtxos) && (
-                <p className="help">
-                  <I18nMessage
-                    tokens={{
-                      now: (
-                        <Button
-                          button="link"
-                          onClick={() => doUtxoConsolidate()}
-                          disabled={operationPending}
-                          label={
-                            consolidateIsPending || consolidatingUtxos ? __('Consolidating...') : __('Consolidate Now')
-                          }
-                        />
-                      ),
-                      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 take some time. %now%%help%
-                  </I18nMessage>
-                </p>
-              )}
-            </>
-          }
-        />
-      </div>
-      <div className="column">
-        {/* fiat balance card */}
-        <WalletFiatBalance />
-      </div>
-    </div>
+            </p>
+          )}
+        </>
+      }
+    />
   );
 };
 
diff --git a/ui/component/walletFiatAccountHistory/index.js b/ui/component/walletFiatAccountHistory/index.js
deleted file mode 100644
index 8fed953a8..000000000
--- a/ui/component/walletFiatAccountHistory/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import FiatAccountHistory from './view';
-
-export default FiatAccountHistory;
diff --git a/ui/component/walletFiatAccountHistory/view.jsx b/ui/component/walletFiatAccountHistory/view.jsx
deleted file mode 100644
index ff97a32f6..000000000
--- a/ui/component/walletFiatAccountHistory/view.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-// @flow
-import React from 'react';
-import Button from 'component/button';
-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 (
-    <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 className="wallet__fiat-transactions">No Transactions</p>}
-    </div>
-  );
-};
-
-export default WalletBalance;
diff --git a/ui/component/walletFiatBalance/index.js b/ui/component/walletFiatBalance/index.js
deleted file mode 100644
index b35b2d4af..000000000
--- a/ui/component/walletFiatBalance/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import WalletFiatBalance from './view';
-
-export default WalletFiatBalance;
diff --git a/ui/component/walletFiatBalance/view.jsx b/ui/component/walletFiatBalance/view.jsx
deleted file mode 100644
index 1473e1a6c..000000000
--- a/ui/component/walletFiatBalance/view.jsx
+++ /dev/null
@@ -1,97 +0,0 @@
-// @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';
-import { Lbryio } from 'lbryinc';
-import { getStripeEnvironment } from 'util/stripe';
-let stripeEnvironment = getStripeEnvironment();
-
-const WalletBalance = () => {
-  const [accountStatusResponse, setAccountStatusResponse] = React.useState();
-
-  function getAccountStatus() {
-    return Lbryio.call(
-      'account',
-      '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} />
-              {(accountStatusResponse &&
-                (accountStatusResponse.total_received_unpaid - accountStatusResponse.total_paid_out) / 100) ||
-                0}{' '}
-              USD
-            </>
-          }
-          subtitle={
-            accountStatusResponse && accountStatusResponse.total_received_unpaid > 0 ? (
-              <I18nMessage>
-                This is your pending balance that will be automatically sent to your bank account.
-              </I18nMessage>
-            ) : (
-              <I18nMessage>When you begin to receive tips your balance will be updated here.</I18nMessage>
-            )
-          }
-          actions={
-            <>
-              <h2 className="section__title--small">
-                ${(accountStatusResponse && accountStatusResponse.total_received_unpaid / 100) || 0} {__('Total Received Tips')}
-              </h2>
-
-              <h2 className="section__title--small">
-                ${(accountStatusResponse && accountStatusResponse.total_paid_out / 100) || 0} {__('Withdrawn')}
-              </h2>
-
-              <div className="section__actions">
-                <Button
-                  button="secondary"
-                  label={__('Bank Accounts')}
-                  icon={ICONS.SETTINGS}
-                  navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`}
-                />
-                <Button
-                  button="secondary"
-                  label={__('Payment Methods')}
-                  icon={ICONS.SETTINGS}
-                  navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`}
-                />
-              </div>
-            </>
-          }
-        />
-      }
-    </>
-  );
-};
-
-export default WalletBalance;
diff --git a/ui/component/walletFiatPaymentBalance/index.js b/ui/component/walletFiatPaymentBalance/index.js
deleted file mode 100644
index d40e374be..000000000
--- a/ui/component/walletFiatPaymentBalance/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import WalletFiatPaymentBalance from './view';
-
-export default WalletFiatPaymentBalance;
diff --git a/ui/component/walletFiatPaymentBalance/view.jsx b/ui/component/walletFiatPaymentBalance/view.jsx
deleted file mode 100644
index 3b8032d3a..000000000
--- a/ui/component/walletFiatPaymentBalance/view.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-// @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;
diff --git a/ui/component/walletFiatPaymentHistory/index.js b/ui/component/walletFiatPaymentHistory/index.js
deleted file mode 100644
index 0d41b2e19..000000000
--- a/ui/component/walletFiatPaymentHistory/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import WalletFiatPaymentHistory from './view';
-
-export default WalletFiatPaymentHistory;
diff --git a/ui/component/walletFiatPaymentHistory/view.jsx b/ui/component/walletFiatPaymentHistory/view.jsx
deleted file mode 100644
index 798355a04..000000000
--- a/ui/component/walletFiatPaymentHistory/view.jsx
+++ /dev/null
@@ -1,109 +0,0 @@
-// @flow
-import React from 'react';
-import Button from 'component/button';
-import { Lbryio } from 'lbryinc';
-import moment from 'moment';
-import { getStripeEnvironment } from 'util/stripe';
-let stripeEnvironment = getStripeEnvironment();
-
-type Props = {
-  accountDetails: any,
-  transactions: any,
-};
-
-const WalletBalance = (props: Props) => {
-  // receive transactions from parent component
-  const { transactions: accountTransactions } = props;
-
-  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 (
-    <>
-      <div className="section card-stack">
-        <div className="table__wrapper">
-          <table className="table table--transactions">
-            {/* table header */}
-            <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>
-            {/* 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=""
-                        navigate={'/' + transaction.channel_name + ':' + transaction.channel_claim_id}
-                        label={transaction.channel_name}
-                        button="link"
-                      />
-                    </td>
-                    {/* link to content or channel */}
-                    <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>
-                    {/* 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>
-          {/* show some markup if there's no transactions */}
-          {(!accountTransactions || accountTransactions.length === 0) && (
-            <p className="wallet__fiat-transactions">No Transactions</p>
-          )}
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default WalletBalance;
diff --git a/ui/component/walletSendTip/view.jsx b/ui/component/walletSendTip/view.jsx
index 2f843c9d9..30f24f2b0 100644
--- a/ui/component/walletSendTip/view.jsx
+++ b/ui/component/walletSendTip/view.jsx
@@ -15,17 +15,10 @@ import LbcSymbol from 'component/common/lbc-symbol';
 import { parseURI } from 'util/lbryURI';
 import usePersistedState from 'effects/use-persisted-state';
 import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
-import { getStripeEnvironment } from 'util/stripe';
-let stripeEnvironment = getStripeEnvironment();
 
 const DEFAULT_TIP_AMOUNTS = [1, 5, 25, 100];
-const MINIMUM_FIAT_TIP = 1;
-const MAXIMUM_FIAT_TIP = 1000;
-
-const DEFAULT_TIP_ERROR = __('Sorry, there was an error in processing your payment!');
 
 const TAB_BOOST = 'TabBoost';
-const TAB_FIAT = 'TabFiat';
 const TAB_LBC = 'TabLBC';
 type SupportParams = { amount: number, claim_id: string, channel_id?: string };
 
@@ -63,8 +56,6 @@ function WalletSendTip(props: Props) {
     fetchingChannels,
     incognito,
     activeChannelClaim,
-    doToast,
-    isAuthenticated,
   } = props;
 
   /** REACT STATE **/
@@ -73,12 +64,6 @@ function WalletSendTip(props: Props) {
   const [useCustomTip, setUseCustomTip] = usePersistedState('comment-support:useCustomTip', false);
   const [isConfirming, setIsConfirming] = React.useState(false);
 
-  // only allow certain creators to receive tips
-  const [canReceiveFiatTip, setCanReceiveFiatTip] = React.useState(); // dont persist because it needs to be calc'd per creator
-
-  // show things conditionally based on if a user has a card already
-  const [hasCardSaved, setHasSavedCard] = usePersistedState('comment-support:hasCardSaved', false);
-
   // show the tip error on the frontend
   const [tipError, setTipError] = React.useState();
 
@@ -104,46 +89,6 @@ function WalletSendTip(props: Props) {
   // channel name used in url
   const { channelName } = parseURI(uri);
 
-  const activeChannelName = activeChannelClaim && activeChannelClaim.name;
-  const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
-
-  // setup variables for backend tip API
-  let channelClaimId, tipChannelName;
-  // if there is a signing channel it's on a file
-  if (claim.signing_channel) {
-    channelClaimId = claim.signing_channel.claim_id;
-    tipChannelName = claim.signing_channel.name;
-
-    // otherwise it's on the channel page
-  } else {
-    channelClaimId = claim.claim_id;
-    tipChannelName = claim.name;
-  }
-
-  const sourceClaimId = claim.claim_id;
-
-  // check if creator has a payment method saved
-  React.useEffect(() => {
-    if (channelClaimId && isAuthenticated && stripeEnvironment) {
-      Lbryio.call(
-        'customer',
-        'status',
-        {
-          environment: stripeEnvironment,
-        },
-        'post'
-      ).then((customerStatusResponse) => {
-        const defaultPaymentMethodId =
-          customerStatusResponse.Customer &&
-          customerStatusResponse.Customer.invoice_settings &&
-          customerStatusResponse.Customer.invoice_settings.default_payment_method &&
-          customerStatusResponse.Customer.invoice_settings.default_payment_method.id;
-
-        setHasSavedCard(Boolean(defaultPaymentMethodId));
-      });
-    }
-  }, [channelClaimId, isAuthenticated, stripeEnvironment]);
-
   // focus tip element if it exists
   React.useEffect(() => {
     const tipInputElement = document.getElementById('tip-input');
@@ -152,32 +97,6 @@ function WalletSendTip(props: Props) {
     }
   }, []);
 
-  // check if user can receive tips
-  React.useEffect(() => {
-    if (channelClaimId && stripeEnvironment) {
-      Lbryio.call(
-        'account',
-        'check',
-        {
-          channel_claim_id: channelClaimId,
-          channel_name: tipChannelName,
-          environment: stripeEnvironment,
-        },
-        'post'
-      )
-        .then((accountCheckResponse) => {
-          if (accountCheckResponse === true && canReceiveFiatTip !== true) {
-            setCanReceiveFiatTip(true);
-          } else {
-            setCanReceiveFiatTip(false);
-          }
-        })
-        .catch(function (error) {
-          // console.log(error);
-        });
-    }
-  }, [channelClaimId, stripeEnvironment]);
-
   // if user has no balance, used to show conditional frontend
   const noBalance = balance === 0;
 
@@ -208,12 +127,6 @@ function WalletSendTip(props: Props) {
     explainerText = __('This refundable boost will improve the discoverability of this %claimTypeText% while active.', {
       claimTypeText,
     });
-  } else if (activeTab === TAB_FIAT) {
-    iconToUse = ICONS.FINANCE;
-    explainerText = __('Show this channel your appreciation by sending a donation in USD.');
-    // if (!hasCardSaved) {
-    //   explainerText += __('You must add a card to use this functionality.');
-    // }
   } else if (activeTab === TAB_LBC) {
     iconToUse = ICONS.LBC;
     explainerText = __('Show this channel your appreciation by sending a donation of Credits.');
@@ -233,7 +146,7 @@ function WalletSendTip(props: Props) {
     }
 
     // if it's not fiat, aka it's boost or lbc tip
-    else if (activeTab !== TAB_FIAT) {
+    else {
       regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
       const validTipInput = regexp.test(String(tipAmount));
 
@@ -249,17 +162,6 @@ function WalletSendTip(props: Props) {
         tipError = __('Amount must be higher');
       }
       //  if tip fiat tab
-    } else {
-      regexp = RegExp(/^(\d*([.]\d{0,2})?)$/);
-      const validTipInput = regexp.test(String(tipAmount));
-
-      if (!validTipInput) {
-        tipError = __('Amount must have no more than 2 decimal places');
-      } else if (tipAmount < MINIMUM_FIAT_TIP) {
-        tipError = __('Amount must be at least one dollar');
-      } else if (tipAmount > MAXIMUM_FIAT_TIP) {
-        tipError = __('Amount cannot be over 1000 dollars');
-      }
     }
 
     setTipError(tipError);
@@ -289,7 +191,7 @@ function WalletSendTip(props: Props) {
   function handleSubmit() {
     if (tipAmount && claimId) {
       // send an instant tip (no need to go to an exchange first)
-      if (instantTipEnabled && activeTab !== TAB_FIAT) {
+      if (instantTipEnabled) {
         if (instantTipMax.currency === 'LBC') {
           sendSupportOrConfirm(instantTipMax.amount);
         } else {
@@ -299,106 +201,17 @@ function WalletSendTip(props: Props) {
           });
         }
         // sending fiat tip
-      } else if (activeTab === TAB_FIAT) {
-        if (!isConfirming) {
-          setIsConfirming(true);
-        } else if (isConfirming) {
-          let sendAnonymously = !activeChannelClaim || incognito;
-
-          // hit backend to send tip
-          Lbryio.call(
-            'customer',
-            'tip',
-            {
-              // round to fix issues with floating point numbers
-              amount: Math.round(100 * tipAmount), // convert from dollars to cents
-              creator_channel_name: tipChannelName, // creator_channel_name
-              creator_channel_claim_id: channelClaimId,
-              tipper_channel_name: sendAnonymously ? '' : activeChannelName,
-              tipper_channel_claim_id: sendAnonymously ? '' : activeChannelId,
-              currency: 'USD',
-              anonymous: sendAnonymously,
-              source_claim_id: sourceClaimId,
-              environment: stripeEnvironment,
-            },
-            'post'
-          )
-            .then((customerTipResponse) => {
-              doToast({
-                message: __("You sent $%amount% as a tip to %tipChannelName%, I'm sure they appreciate it!", {
-                  amount: tipAmount,
-                  tipChannelName,
-                }),
-              });
-            })
-            .catch(function (error) {
-              // show error message from Stripe if one exists (being passed from backend by Beamer's API currently)
-              let displayError;
-              if (error.message) {
-                displayError = error.message;
-              } else {
-                displayError = DEFAULT_TIP_ERROR;
-              }
-
-              doToast({ message: displayError, isError: true });
-            });
-
-          closeModal();
-        }
-        // if it's a boost (?)
       } else {
         sendSupportOrConfirm();
       }
     }
   }
 
-  const countDecimals = function (value) {
-    const text = value.toString();
-    const index = text.indexOf('.');
-    return text.length - index - 1;
-  };
-
   function handleCustomPriceChange(event: SyntheticInputEvent<*>) {
     let tipAmountAsString = event.target.value;
 
     let tipAmount = parseFloat(tipAmountAsString);
-
-    const howManyDecimals = countDecimals(tipAmountAsString);
-
-    // fiat tip input
-    if (activeTab === TAB_FIAT) {
-      if (Number.isNaN(tipAmount)) {
-        setCustomTipAmount('');
-      }
-
-      // allow maximum of two decimal places
-      if (howManyDecimals > 2) {
-        tipAmount = Math.floor(tipAmount * 100) / 100;
-      }
-
-      // remove decimals, and then get number of digits
-      const howManyDigits = Math.trunc(tipAmount).toString().length;
-
-      if (howManyDigits > 4 && tipAmount !== 1000) {
-        setTipError('Amount cannot be over 1000 dollars');
-        setCustomTipAmount(tipAmount);
-      } else if (tipAmount > 1000) {
-        setTipError('Amount cannot be over 1000 dollars');
-        setCustomTipAmount(tipAmount);
-      } else {
-        setCustomTipAmount(tipAmount);
-      }
-      // LBC tip input
-    } else {
-      // TODO: this is a bit buggy, needs a touchup
-      // if (howManyDecimals > 9) {
-      //   // only allows up to 8 decimal places
-      //   tipAmount = Number(tipAmount.toString().match(/^-?\d+(?:\.\d{0,8})?/)[0]);
-      //
-      //   setTipError('Please only use up to 8 decimals');
-      // }
-      setCustomTipAmount(tipAmount);
-    }
+    setCustomTipAmount(tipAmount);
   }
 
   function buildButtonText() {
@@ -407,28 +220,17 @@ function WalletSendTip(props: Props) {
       // testing for NaN ES5 style https://stackoverflow.com/a/35912757/3973137
       // also sometimes it's returned as a string
       // eslint-disable-next-line
-      if (tipAmount !== tipAmount || tipAmount === 'NaN') {
-        return true;
-      }
-      return false;
+      return tipAmount !== tipAmount || tipAmount === 'NaN';
     }
 
-    function convertToTwoDecimals(number) {
-      return (Math.round(number * 100) / 100).toFixed(2);
-    }
-
-    const amountToShow = activeTab === TAB_FIAT ? convertToTwoDecimals(tipAmount) : tipAmount;
-
     // if it's a valid number display it, otherwise do an empty string
-    const displayAmount = !isNan(tipAmount) ? amountToShow : '';
+    const displayAmount = !isNan(tipAmount) ? tipAmount : '';
 
     // build button text based on tab
     if (activeTab === TAB_BOOST) {
       return claimIsMine
         ? __('Boost Your %claimTypeText%', { claimTypeText })
         : __('Boost This %claimTypeText%', { claimTypeText });
-    } else if (activeTab === TAB_FIAT) {
-      return __('Send a $%displayAmount% Tip', { displayAmount });
     } else if (activeTab === TAB_LBC) {
       return __('Send a %displayAmount% Credit Tip', { displayAmount });
     }
@@ -436,17 +238,13 @@ function WalletSendTip(props: Props) {
 
   // dont allow user to click send button
   function shouldDisableAmountSelector(amount) {
-    return (
-      (amount > balance && activeTab !== TAB_FIAT) || (activeTab === TAB_FIAT && (!hasCardSaved || !canReceiveFiatTip))
-    );
+    return amount > balance;
   }
 
   // showed on confirm page above amount
   function setConfirmLabel() {
     if (activeTab === TAB_LBC) {
       return __('Tipping Credit');
-    } else if (activeTab === TAB_FIAT) {
-      return __('Tipping Fiat (USD)');
     } else if (activeTab === TAB_BOOST) {
       return __('Boosting');
     }
@@ -488,27 +286,6 @@ function WalletSendTip(props: Props) {
                   }}
                   className={classnames('button-toggle', { 'button-toggle--active': activeTab === TAB_LBC })}
                 />
-                {/* tip fiat tab button */}
-                {/* @if TARGET='web' */}
-                {stripeEnvironment && (
-                  <Button
-                    key="tip-fiat"
-                    icon={ICONS.FINANCE}
-                    label={__('Tip')}
-                    button="alt"
-                    onClick={() => {
-                      const tipInputElement = document.getElementById('tip-input');
-                      if (tipInputElement) {
-                        tipInputElement.focus();
-                      }
-                      if (!isConfirming) {
-                        setActiveTab(TAB_FIAT);
-                      }
-                    }}
-                    className={classnames('button-toggle', { 'button-toggle--active': activeTab === TAB_FIAT })}
-                  />
-                )}
-                {/* @endif */}
                 {/* tip LBC tab button */}
                 <Button
                   key="boost"
@@ -551,11 +328,7 @@ function WalletSendTip(props: Props) {
                   </div>
                   <div className="confirm__label">{setConfirmLabel()}</div>
                   <div className="confirm__value">
-                    {activeTab === TAB_FIAT ? (
-                      <p>$ {(Math.round(tipAmount * 100) / 100).toFixed(2)}</p>
-                    ) : (
-                      <LbcSymbol postfix={tipAmount} size={22} />
-                    )}
+                    <LbcSymbol postfix={tipAmount} size={22} />
                   </div>
                 </div>
               </div>
@@ -570,14 +343,6 @@ function WalletSendTip(props: Props) {
                 <ChannelSelector />
               </div>
 
-              {/* prompt to save a card */}
-              {activeTab === TAB_FIAT && !hasCardSaved && (
-                <h3 className="add-card-prompt">
-                  <Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add a Card')} button="link" />{' '}
-                  {__('To Tip Creators')}
-                </h3>
-              )}
-
               {/* section to pick tip/boost amount */}
               <div className="section">
                 {DEFAULT_TIP_AMOUNTS.map((amount) => (
@@ -607,10 +372,9 @@ function WalletSendTip(props: Props) {
                   label={__('Custom')}
                   onClick={() => setUseCustomTip(true)}
                   // disabled if it's receive fiat and there is no card or creator can't receive tips
-                  disabled={activeTab === TAB_FIAT && (!hasCardSaved || !canReceiveFiatTip)}
                 />
 
-                {DEFAULT_TIP_AMOUNTS.some((val) => val > balance) && activeTab !== TAB_FIAT && (
+                {DEFAULT_TIP_AMOUNTS.some((val) => val > balance) && (
                   <Button
                     button="secondary"
                     className="button-toggle-group-action"
@@ -629,15 +393,11 @@ function WalletSendTip(props: Props) {
                     label={
                       <React.Fragment>
                         {__('Custom support amount')}{' '}
-                        {activeTab !== TAB_FIAT ? (
-                          <I18nMessage
-                            tokens={{ lbc_balance: <CreditAmount precision={4} amount={balance} showLBC={false} /> }}
-                          >
-                            (%lbc_balance% Credits available)
-                          </I18nMessage>
-                        ) : (
-                          'in USD'
-                        )}
+                        <I18nMessage
+                          tokens={{ lbc_balance: <CreditAmount precision={4} amount={balance} showLBC={false} /> }}
+                        >
+                          (%lbc_balance% Credits available)
+                        </I18nMessage>
                       </React.Fragment>
                     }
                     error={tipError}
@@ -645,7 +405,7 @@ function WalletSendTip(props: Props) {
                     step="any"
                     type="number"
                     style={{
-                      width: activeTab === TAB_FIAT ? '99px' : '160px',
+                      width: '160px',
                     }}
                     placeholder="1.23"
                     value={customTipAmount}
@@ -661,24 +421,12 @@ function WalletSendTip(props: Props) {
                   icon={isSupport ? ICONS.TRENDING : ICONS.SUPPORT}
                   button="primary"
                   type="submit"
-                  disabled={
-                    fetchingChannels ||
-                    isPending ||
-                    tipError ||
-                    !tipAmount ||
-                    (activeTab === TAB_FIAT && (!hasCardSaved || !canReceiveFiatTip))
-                  }
+                  disabled={fetchingChannels || isPending || tipError || !tipAmount}
                   label={buildButtonText()}
                 />
                 {fetchingChannels && <span className="help">{__('Loading your channels...')}</span>}
               </div>
-              {activeTab !== TAB_FIAT ? (
-                <WalletSpendableBalanceHelp />
-              ) : !canReceiveFiatTip ? (
-                <div className="help">{__('Only creators that verify cash accounts can receive tips')}</div>
-              ) : (
-                <div className="help">{__('The payment will be made from your saved card')}</div>
-              )}
+              <WalletSpendableBalanceHelp />
             </>
           ) : (
             // if it's LBC and there is no balance, you can prompt to purchase LBC
diff --git a/ui/page/settingsStripeAccount/index.js b/ui/page/settingsStripeAccount/index.js
deleted file mode 100644
index 7df77d4e5..000000000
--- a/ui/page/settingsStripeAccount/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
-import StripeAccountConnection from './view';
-import { doToast } from 'redux/actions/notifications';
-
-const select = (state) => ({});
-
-const perform = (dispatch) => ({
-  doToast: (options) => dispatch(doToast(options)),
-});
-
-export default withRouter(connect(select, perform)(StripeAccountConnection));
diff --git a/ui/page/settingsStripeAccount/view.jsx b/ui/page/settingsStripeAccount/view.jsx
deleted file mode 100644
index 505e32188..000000000
--- a/ui/page/settingsStripeAccount/view.jsx
+++ /dev/null
@@ -1,313 +0,0 @@
-// @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 } from 'config';
-import { getStripeEnvironment } from 'util/stripe';
-
-const isDev = process.env.NODE_ENV !== 'production';
-
-let stripeEnvironment = getStripeEnvironment();
-let successStripeRedirectUrl, failureStripeRedirectUrl;
-let successEndpoint = '/$/settings/tip_account';
-let failureEndpoint = '/$/settings/tip_account';
-if (isDev) {
-  successStripeRedirectUrl = 'http://localhost:' + WEBPACK_WEB_PORT + successEndpoint;
-  failureStripeRedirectUrl = 'http://localhost:' + WEBPACK_WEB_PORT + failureEndpoint;
-} else {
-  successStripeRedirectUrl = URL + successEndpoint;
-  failureStripeRedirectUrl = URL + failureEndpoint;
-}
-
-type Props = {
-  source: string,
-  doOpenModal: (string, {}) => void,
-  doToast: ({ message: string }) => void,
-};
-
-type State = {
-  error: boolean,
-  loading: boolean,
-  content: ?string,
-  stripeConnectionUrl: string,
-  accountConfirmed: boolean,
-  accountPendingConfirmation: boolean,
-  accountNotConfirmedButReceivedTips: boolean,
-  unpaidBalance: number,
-  pageTitle: string,
-  stillRequiringVerification: boolean,
-  accountTransactions: any,
-};
-
-class StripeAccountConnection extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      error: false,
-      content: null,
-      loading: true,
-      accountConfirmed: false,
-      accountPendingConfirmation: false,
-      accountNotConfirmedButReceivedTips: false,
-      unpaidBalance: 0,
-      stripeConnectionUrl: '',
-      pageTitle: 'Add Payout Method',
-      stillRequiringVerification: false,
-      accountTransactions: [],
-    };
-  }
-
-  componentDidMount() {
-    let doToast = this.props.doToast;
-
-    var that = this;
-
-    function getAndSetAccountLink(stillNeedToConfirmAccount) {
-      Lbryio.call(
-        'account',
-        'link',
-        {
-          return_url: successStripeRedirectUrl,
-          refresh_url: failureStripeRedirectUrl,
-          environment: stripeEnvironment,
-        },
-        'post'
-      ).then((accountLinkResponse) => {
-        // stripe link for user to navigate to and confirm account
-        const stripeConnectionUrl = accountLinkResponse.url;
-
-        // set connection url on frontend
-        that.setState({
-          stripeConnectionUrl,
-        });
-
-        // show the account confirmation link if not created already
-        if (stillNeedToConfirmAccount) {
-          that.setState({
-            accountPendingConfirmation: true,
-          });
-        }
-      });
-    }
-
-    // call the account status endpoint
-    Lbryio.call(
-      'account',
-      'status',
-      {
-        environment: stripeEnvironment,
-      },
-      'post'
-    )
-      .then((accountStatusResponse) => {
-        const yetToBeCashedOutBalance = accountStatusResponse.total_received_unpaid;
-        if (yetToBeCashedOutBalance) {
-          that.setState({
-            unpaidBalance: yetToBeCashedOutBalance,
-          });
-
-          Lbryio.call(
-            'account',
-            'list',
-            {
-              environment: stripeEnvironment,
-            },
-            'post'
-          ).then((accountListResponse: any) => {
-            // TODO type this
-            that.setState({
-              accountTransactions: accountListResponse.reverse(),
-            });
-          });
-        }
-
-        // if charges already enabled, no need to generate an account link
-        if (accountStatusResponse.charges_enabled) {
-          // account has already been confirmed
-
-          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.length)
-          ) {
-            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({
-            accountNotConfirmedButReceivedTips: true,
-          });
-
-          getAndSetAccountLink();
-
-          // user has not received any amount or confirmed an account
-        } else {
-          // get stripe link and set it on the frontend
-          // pass true so it updates the frontend
-          getAndSetAccountLink(true);
-        }
-      })
-      .catch(function (error) {
-        // errorString passed from the API (with a 403 error)
-        const errorString = 'account not linked to user, please link first';
-
-        // if it's beamer's error indicating the account is not linked yet
-        if (error.message.indexOf(errorString) > -1) {
-          // get stripe link and set it on the frontend
-          getAndSetAccountLink(true);
-        } else {
-          // probably an error from stripe
-          const displayString = __('There was an error getting your account setup, please try again later');
-          doToast({ message: displayString, isError: true });
-          // not an error from Beamer, throw it
-          throw new Error(error);
-        }
-      });
-  }
-
-  render() {
-    const {
-      stripeConnectionUrl,
-      accountConfirmed,
-      accountPendingConfirmation,
-      unpaidBalance,
-      accountNotConfirmedButReceivedTips,
-      pageTitle,
-      stillRequiringVerification,
-    } = this.state;
-
-    return (
-      <Page
-        noFooter
-        noSideNavigation
-        settingsPage
-        className="card-stack"
-        backout={{ title: pageTitle, backLabel: __('Back') }}
-      >
-        <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>
-                      <h3>{__('Getting your bank account connection status...')}</h3>
-                    </div>
-                  </div>
-                </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>
-                        <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>
-          }
-          // only show additional buttons if its for additional verification or to show transaction page
-          actions={(stillRequiringVerification || accountConfirmed) &&
-            <>
-              {stillRequiringVerification && (
-                <Button
-                  button="primary"
-                  label={__('Complete Verification')}
-                  icon={ICONS.SETTINGS}
-                  navigate={stripeConnectionUrl}
-                  className="stripe__complete-verification-button"
-                />
-              )}
-              {accountConfirmed && (
-                <Button
-                  button="secondary"
-                  label={__('View Transactions')}
-                  icon={ICONS.SETTINGS}
-                  navigate={`/$/${PAGES.WALLET}?fiatType=incoming&tab=fiat-payment-history&currency=fiat`}
-                />
-              )}
-            </>
-          }
-        />
-        <br />
-      </Page>
-    );
-  }
-}
-
-export default StripeAccountConnection;
diff --git a/ui/page/settingsStripeCard/index.js b/ui/page/settingsStripeCard/index.js
deleted file mode 100644
index e61f53f22..000000000
--- a/ui/page/settingsStripeCard/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { connect } from 'react-redux';
-import { doSetClientSetting } from 'redux/actions/settings';
-import { selectosNotificationsEnabled } from 'redux/selectors/settings';
-import { selectUserVerifiedEmail, selectUserEmail } from 'redux/selectors/user';
-import { doOpenModal } from 'redux/actions/app';
-import { doToast } from 'redux/actions/notifications';
-
-import SettingsStripeCard from './view';
-
-const select = (state) => ({
-  osNotificationsEnabled: selectosNotificationsEnabled(state),
-  isAuthenticated: Boolean(selectUserVerifiedEmail(state)),
-  email: selectUserEmail(state),
-});
-
-const perform = (dispatch) => ({
-  setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
-  doOpenModal,
-  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
-  doToast: (options) => dispatch(doToast(options)),
-});
-
-export default connect(select, perform)(SettingsStripeCard);
diff --git a/ui/page/settingsStripeCard/view.jsx b/ui/page/settingsStripeCard/view.jsx
deleted file mode 100644
index 48042c5f0..000000000
--- a/ui/page/settingsStripeCard/view.jsx
+++ /dev/null
@@ -1,444 +0,0 @@
-// restore flow
-/* eslint-disable no-undef */
-/* eslint-disable react/prop-types */
-import React from 'react';
-import Page from 'component/page';
-import Card from 'component/common/card';
-import { Lbryio } from 'lbryinc';
-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';
-import { STRIPE_PUBLIC_KEY } from 'config';
-import { getStripeEnvironment } from 'util/stripe';
-let stripeEnvironment = getStripeEnvironment();
-
-const APIS_DOWN_ERROR_RESPONSE = __('There was an error from the server, please try again later');
-const CARD_SETUP_ERROR_RESPONSE = __('There was an error getting your card setup, please try again later');
-
-// eslint-disable-next-line flowtype/no-types-missing-file-annotation
-type Props = {
-  disabled: boolean,
-  label: ?string,
-  email: ?string,
-  scriptFailedToLoad: boolean,
-  doOpenModal: (string, {}) => void,
-  openModal: (string, {}) => void,
-  setAsConfirmingCard: () => void,
-};
-
-// type State = {
-//   open: boolean,
-//   currentFlowStage: string,
-//   customerTransactions: Array<any>,
-//   pageTitle: string,
-//   userCardDetails: any, // fill this out
-//   scriptFailedToLoad: boolean,
-// };
-
-class SettingsStripeCard extends React.Component<Props, State> {
-  constructor(props) {
-    // :Props
-    super(props);
-    this.state = {
-      open: false,
-      scriptFailedToLoad: false,
-      currentFlowStage: 'loading', // loading, confirmingCard, cardConfirmed
-      customerTransactions: [],
-      pageTitle: 'Add Card',
-      userCardDetails: {},
-      paymentMethodId: '',
-    };
-  }
-
-  componentDidMount() {
-    let that = this;
-
-    let doToast = this.props.doToast;
-
-    const script = document.createElement('script');
-    script.src = 'https://js.stripe.com/v3/';
-    script.async = true;
-
-    // $FlowFixMe
-    document.body.appendChild(script);
-
-    // public key of the stripe account
-    let publicKey = STRIPE_PUBLIC_KEY;
-
-    // client secret of the SetupIntent (don't share with anyone but customer)
-    let clientSecret = '';
-
-    // setting a timeout to let the client secret populate
-    // TODO: fix this, should be a cleaner way
-    setTimeout(function () {
-      // check if customer has card setup already
-      if (stripeEnvironment) {
-        Lbryio.call(
-          'customer',
-          'status',
-          {
-            environment: stripeEnvironment,
-          },
-          'post'
-        )
-          .then((customerStatusResponse) => {
-            // user has a card saved if their defaultPaymentMethod has an id
-            const defaultPaymentMethod = customerStatusResponse.Customer.invoice_settings.default_payment_method;
-            let userHasAlreadySetupPayment = Boolean(defaultPaymentMethod && defaultPaymentMethod.id);
-
-            // show different frontend if user already has card
-            if (userHasAlreadySetupPayment) {
-              let card = customerStatusResponse.PaymentMethods[0].card;
-
-              let customer = customerStatusResponse.Customer;
-
-              let topOfDisplay = customer.email.split('@')[0];
-              let bottomOfDisplay = '@' + customer.email.split('@')[1];
-
-              let cardDetails = {
-                brand: card.brand,
-                expiryYear: card.exp_year,
-                expiryMonth: card.exp_month,
-                lastFour: card.last4,
-                topOfDisplay: topOfDisplay,
-                bottomOfDisplay: bottomOfDisplay,
-              };
-
-              that.setState({
-                currentFlowStage: 'cardConfirmed',
-                pageTitle: 'Tip History',
-                userCardDetails: cardDetails,
-                paymentMethodId: customerStatusResponse.PaymentMethods[0].id,
-              });
-
-              // otherwise, prompt them to save a card
-            } else {
-              that.setState({
-                currentFlowStage: 'confirmingCard',
-              });
-
-              // get a payment method secret for frontend
-              Lbryio.call(
-                'customer',
-                'setup',
-                {
-                  environment: stripeEnvironment,
-                },
-                'post'
-              ).then((customerSetupResponse) => {
-                clientSecret = customerSetupResponse.client_secret;
-
-                // instantiate stripe elements
-                setupStripe();
-              });
-            }
-
-            // get customer transactions
-            Lbryio.call(
-              'customer',
-              'list',
-              {
-                environment: stripeEnvironment,
-              },
-              'post'
-            ).then((customerTransactionsResponse) => {
-              that.setState({
-                customerTransactions: customerTransactionsResponse,
-              });
-            });
-            // if the status call fails, either an actual error or need to run setup first
-          })
-          .catch(function (error) {
-            // errorString passed from the API (with a 403 error)
-            const errorString = 'user as customer is not setup yet';
-
-            // if it's beamer's error indicating the account is not linked yet
-            if (error.message && error.message.indexOf(errorString) > -1) {
-              // send them to save a card
-              that.setState({
-                currentFlowStage: 'confirmingCard',
-              });
-
-              // get a payment method secret for frontend
-              Lbryio.call(
-                'customer',
-                'setup',
-                {
-                  environment: stripeEnvironment,
-                },
-                'post'
-              ).then((customerSetupResponse) => {
-                clientSecret = customerSetupResponse.client_secret;
-
-                // instantiate stripe elements
-                setupStripe();
-              });
-              // 500 error from the backend being down
-            } else if (error === 'internal_apis_down') {
-              doToast({ message: APIS_DOWN_ERROR_RESPONSE, isError: true });
-            } else {
-              // probably an error from stripe
-              doToast({ message: CARD_SETUP_ERROR_RESPONSE, isError: true });
-            }
-          });
-      }
-    }, 250);
-
-    function setupStripe() {
-      // TODO: have to fix this, using so that the script is available
-      setTimeout(function () {
-        var stripeElements = function (publicKey, setupIntent) {
-          var stripe = Stripe(publicKey);
-          var elements = stripe.elements();
-
-          // Element styles
-          var style = {
-            base: {
-              fontSize: '16px',
-              color: '#32325d',
-              fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
-              fontSmoothing: 'antialiased',
-              '::placeholder': {
-                color: 'rgba(0,0,0,0.4)',
-              },
-            },
-          };
-
-          var card = elements.create('card', { style: style });
-
-          card.mount('#card-element');
-
-          // Element focus ring
-          card.on('focus', function () {
-            var el = document.getElementById('card-element');
-            el.classList.add('focused');
-          });
-
-          card.on('blur', function () {
-            var el = document.getElementById('card-element');
-            el.classList.remove('focused');
-          });
-
-          card.on('ready', function () {
-            card.focus();
-          });
-
-          var email = that.props.email;
-
-          function submitForm(event) {
-            event.preventDefault();
-
-            // if client secret wasn't loaded properly
-            if (!clientSecret) {
-              var displayErrorText = 'There was an error in generating your payment method. Please contact a developer';
-              var displayError = document.getElementById('card-errors');
-              displayError.textContent = displayErrorText;
-
-              return;
-            }
-
-            changeLoadingState(true);
-
-            stripe
-              .confirmCardSetup(clientSecret, {
-                payment_method: {
-                  card: card,
-                  billing_details: { email: email },
-                },
-              })
-              .then(function (result) {
-                if (result.error) {
-                  changeLoadingState(false);
-                  var displayError = document.getElementById('card-errors');
-                  displayError.textContent = result.error.message;
-                } else {
-                  // The PaymentMethod was successfully set up
-                  // hide and show the proper divs
-                  orderComplete(stripe, clientSecret);
-                }
-              });
-          }
-
-          // Handle payment submission when user clicks the pay button.
-          var button = document.getElementById('submit');
-          button.addEventListener('click', function (event) {
-            submitForm(event);
-          });
-
-          // currently doesn't work because the iframe javascript context is different
-          // would be nice though if it's even technically possible
-          // window.addEventListener('keyup', function(event) {
-          //   if (event.keyCode === 13) {
-          //     submitForm(event);
-          //   }
-          // }, false);
-        };
-
-        // TODO: possible bug here where clientSecret isn't done
-        stripeElements(publicKey, clientSecret);
-
-        // Show a spinner on payment submission
-        var changeLoadingState = function (isLoading) {
-          if (isLoading) {
-            // $FlowFixMe
-            document.querySelector('button').disabled = true;
-            // $FlowFixMe
-            document.querySelector('#stripe-spinner').classList.remove('hidden');
-            // $FlowFixMe
-            document.querySelector('#button-text').classList.add('hidden');
-          } else {
-            // $FlowFixMe
-            document.querySelector('button').disabled = false;
-            // $FlowFixMe
-            document.querySelector('#stripe-spinner').classList.add('hidden');
-            // $FlowFixMe
-            document.querySelector('#button-text').classList.remove('hidden');
-          }
-        };
-
-        // shows a success / error message when the payment is complete
-        var orderComplete = function (stripe, clientSecret) {
-          stripe.retrieveSetupIntent(clientSecret).then(function (result) {
-            Lbryio.call(
-              'customer',
-              'status',
-              {
-                environment: stripeEnvironment,
-              },
-              'post'
-            ).then((customerStatusResponse) => {
-              let card = customerStatusResponse.PaymentMethods[0].card;
-
-              let customer = customerStatusResponse.Customer;
-
-              let topOfDisplay = customer.email.split('@')[0];
-              let bottomOfDisplay = '@' + customer.email.split('@')[1];
-
-              let cardDetails = {
-                brand: card.brand,
-                expiryYear: card.exp_year,
-                expiryMonth: card.exp_month,
-                lastFour: card.last4,
-                topOfDisplay,
-                bottomOfDisplay,
-              };
-
-              that.setState({
-                currentFlowStage: 'cardConfirmed',
-                pageTitle: 'Tip History',
-                userCardDetails: cardDetails,
-                paymentMethodId: customerStatusResponse.PaymentMethods[0].id,
-              });
-            });
-
-            changeLoadingState(false);
-          });
-        };
-      }, 0);
-    }
-  }
-
-  render() {
-    let that = this;
-
-    function setAsConfirmingCard() {
-      that.setState({
-        currentFlowStage: 'confirmingCard',
-      });
-    }
-
-    const { scriptFailedToLoad, openModal } = this.props;
-
-    const { currentFlowStage, pageTitle, userCardDetails, paymentMethodId } = this.state;
-
-    return (
-      <Page
-        noFooter
-        noSideNavigation
-        settingsPage
-        className="card-stack"
-        backout={{ title: __(pageTitle), backLabel: __('Back') }}
-      >
-        {/* if Stripe javascript didn't load */}
-        <div>
-          {scriptFailedToLoad && (
-            <div className="error__text">{__('There was an error connecting to Stripe. Please try again later.')}</div>
-          )}
-        </div>
-
-        {/* initial markup to show while getting information */}
-        {currentFlowStage === 'loading' && (
-          <div className="headerCard toConfirmCard">
-            <Card title={__('Connect your card with Odysee')} subtitle={__('Getting your card connection status...')} />
-          </div>
-        )}
-
-        {/* customer has not added a card yet */}
-        {currentFlowStage === 'confirmingCard' && (
-          <div className="sr-root">
-            <div className="sr-main">
-              <div className="sr-payment-form card cardInput">
-                <div className="sr-form-row">
-                  <label className="payment-details">Card Details</label>
-                  <div className="sr-input sr-element sr-card-element" id="card-element" />
-                </div>
-                <div className="sr-field-error" id="card-errors" role="alert" />
-                <button className="linkButton" id="submit">
-                  <div className="stripe__spinner hidden" id="stripe-spinner" />
-                  <span id="button-text">{__('Add Card')}</span>
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* if the user has already confirmed their card */}
-        {currentFlowStage === 'cardConfirmed' && (
-          <div className="successCard">
-            <Card
-              title={__('Card Details')}
-              body={
-                <>
-                  <Plastic
-                    type={userCardDetails.brand}
-                    name={userCardDetails.topOfDisplay + ' ' + userCardDetails.bottomOfDisplay}
-                    expiry={userCardDetails.expiryMonth + '/' + userCardDetails.expiryYear}
-                    number={'____________' + userCardDetails.lastFour}
-                  />
-                  <br />
-                  <Button
-                    button="primary"
-                    label={__('Remove Card')}
-                    icon={ICONS.DELETE}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      openModal(MODALS.CONFIRM_REMOVE_CARD, {
-                        paymentMethodId: paymentMethodId,
-                        setAsConfirmingCard: setAsConfirmingCard,
-                      });
-                    }}
-                  />
-                  <Button
-                    button="secondary"
-                    label={__('View Transactions')}
-                    icon={ICONS.SETTINGS}
-                    navigate={`/$/${PAGES.WALLET}?fiatType=outgoing&tab=fiat-payment-history&currency=fiat`}
-                    style={{marginLeft: '10px'}}
-                  />
-                </>
-              }
-            />
-            <br />
-          </div>
-        )}
-      </Page>
-    );
-  }
-}
-
-export default SettingsStripeCard;
-/* eslint-enable no-undef */
-/* eslint-enable react/prop-types */