[Account] grab stripe-related settings

ui/component/settingAccount/index.js

@@ -1,11 +1,12 @@
 import { connect } from 'react-redux';
 import { doWalletStatus, selectWalletIsEncrypted } from 'lbry-redux';
-import { selectUserVerifiedEmail } from 'redux/selectors/user';
+import { selectUser, selectUserVerifiedEmail } from 'redux/selectors/user';
 import SettingAccount from './view';
 
 const select = (state) => ({
   isAuthenticated: selectUserVerifiedEmail(state),
   walletEncrypted: selectWalletIsEncrypted(state),
+  user: selectUser(state),
 });
 
 const perform = (dispatch) => ({

ui/component/settingAccount/view.jsx

@@ -1,20 +1,26 @@
 // @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 SettingAccountPassword from 'component/settingAccountPassword';
+import SettingsRow from 'component/settingsRow';
 import SyncToggle from 'component/syncToggle';
 import { getPasswordFromCookie } from 'util/saved-passwords';
+import { getStripeEnvironment } from 'util/stripe';
 
 type Props = {
   // --- select ---
   isAuthenticated: boolean,
   walletEncrypted: boolean,
+  user: User,
   // --- perform ---
   doWalletStatus: () => void,
 };
 
 export default function SettingAccount(props: Props) {
-  const { isAuthenticated, walletEncrypted, doWalletStatus } = props;
+  const { isAuthenticated, walletEncrypted, user, doWalletStatus } = props;
   const [storedPassword, setStoredPassword] = React.useState(false);
 
   // Determine if password is stored.
@@ -48,6 +54,38 @@ export default function SettingAccount(props: Props) {
             <SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />
           </div>
           {/* @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="secondary"
+                label={__('Manage')}
+                icon={ICONS.SETTINGS}
+                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="secondary"
+                label={__('Manage')}
+                icon={ICONS.SETTINGS}
+                navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`}
+              />
+            </SettingsRow>
+          )}
+          {/* @endif */}
         </>
       }
     />

ui/page/settings/index.js

@@ -10,7 +10,7 @@ import {
 import { makeSelectClientSetting, selectDaemonSettings } from 'redux/selectors/settings';
 import { selectMyChannelUrls, SETTINGS } from 'lbry-redux';
 import SettingsPage from './view';
-import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user';
+import { selectUserVerifiedEmail } from 'redux/selectors/user';
 
 const select = (state) => ({
   daemonSettings: selectDaemonSettings(state),
@@ -19,7 +19,6 @@ const select = (state) => ({
   autoDownload: makeSelectClientSetting(SETTINGS.AUTO_DOWNLOAD)(state),
   hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
   myChannelUrls: selectMyChannelUrls(state),
-  user: selectUser(state),
 });
 
 const perform = (dispatch) => ({

ui/page/settings/view.jsx

@@ -13,7 +13,6 @@ import FileSelector from 'component/common/file-selector';
 import Card from 'component/common/card';
 import classnames from 'classnames';
 import Yrbl from 'component/yrbl';
-import { getStripeEnvironment } from 'util/stripe';
 
 type Price = {
   currency: string,
@@ -40,7 +39,6 @@ type Props = {
   enterSettings: () => void,
   exitSettings: () => void,
   myChannelUrls: ?Array<string>,
-  user: User,
 };
 
 class SettingsPage extends React.PureComponent<Props> {
@@ -71,7 +69,6 @@ class SettingsPage extends React.PureComponent<Props> {
       setDaemonSetting,
       toggle3PAnalytics,
       myChannelUrls,
-      user,
     } = this.props;
     const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
 
@@ -171,44 +168,6 @@ class SettingsPage extends React.PureComponent<Props> {
             />
             {/* @endif */}
 
-            {/* @if TARGET='web' */}
-            {user && getStripeEnvironment() && (
-              <Card
-                title={__('Bank Accounts')}
-                subtitle={__('Connect a bank account to receive tips and compensation in your local currency')}
-                actions={
-                  <div className="section__actions">
-                    <Button
-                      button="secondary"
-                      label={__('Manage')}
-                      icon={ICONS.SETTINGS}
-                      navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`}
-                    />
-                  </div>
-                }
-              />
-            )}
-            {/* @endif */}
-
-            {/* @if TARGET='web' */}
-            {isAuthenticated && getStripeEnvironment() && (
-              <Card
-                title={__('Payment Methods')}
-                subtitle={__('Add a credit card to tip creators in their local currency')}
-                actions={
-                  <div className="section__actions">
-                    <Button
-                      button="secondary"
-                      label={__('Manage')}
-                      icon={ICONS.SETTINGS}
-                      navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`}
-                    />
-                  </div>
-                }
-              />
-            )}
-            {/* @endif */}
-
             {(isAuthenticated || !IS_WEB) && (
               <>
                 <Card