[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,7 +1,11 @@
 // @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';
 
@@ -9,12 +13,13 @@ 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 +53,38 @@ export default function SettingAccount(props: Props) {
             <SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />
           </div>
           {/* @endif */}
+
+          {/* @if TARGET='web' */}
+          {user && user.fiat_enabled && (
+            <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 && (
+            <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

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