tip/support marriage

ui/component/common/icon-custom.jsx

@@ -154,15 +154,6 @@ export const icons = {
       <line x1="21" y1="21" x2="16.65" y2="16.65" />
     </g>
   ),
-  [ICONS.TIP]: buildIcon(
-    <g>
-      <polyline points="20 12 20 22 4 22 4 12" />
-      <rect x="2" y="7" width="20" height="5" />
-      <line x1="12" y1="22" x2="12" y2="7" />
-      <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z" />
-      <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z" />
-    </g>
-  ),
   [ICONS.SHARE]: buildIcon(
     <g>
       <circle cx="18" cy="5" r="3" />
@@ -276,8 +267,11 @@ export const icons = {
   ),
   [ICONS.SUPPORT]: buildIcon(
     <g>
-      <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" />
+      <polyline points="20 12 20 22 4 22 4 12" />
-      <polyline points="17 6 23 6 23 12" />
+      <rect x="2" y="7" width="20" height="5" />
+      <line x1="12" y1="22" x2="12" y2="7" />
+      <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z" />
+      <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z" />
     </g>
   ),
   [ICONS.EYE]: buildIcon(

ui/component/creatorAnalytics/view.jsx

@@ -122,7 +122,7 @@ export default function CreatorAnalytics(props: Props) {
                       follower_count_weekly_change: stats.ChannelSubChange || 0,
                     })}
                   </span>
-                  {stats.ChannelSubChange > 0 && <Icon icon={ICONS.SUPPORT} iconColor="green" size={18} />}
+                  {stats.ChannelSubChange > 0 && <Icon icon={ICONS.TRENDING} iconColor="green" size={18} />}
                 </div>
               }
             />
@@ -136,7 +136,7 @@ export default function CreatorAnalytics(props: Props) {
                       all_content_views_weekly_change: stats.AllContentViewChange || 0,
                     })}
                   </span>
-                  {stats.AllContentViewChange > 0 && <Icon icon={ICONS.SUPPORT} iconColor="green" size={18} />}
+                  {stats.AllContentViewChange > 0 && <Icon icon={ICONS.TRENDING} iconColor="green" size={18} />}
                 </div>
               }
             />
@@ -156,7 +156,7 @@ export default function CreatorAnalytics(props: Props) {
                       lbc_received_changed: stats.LBCReceivedChange || 0,
                     })}
                   </span>
-                  {stats.LBCReceivedChange > 0 && <Icon icon={ICONS.SUPPORT} iconColor="green" size={18} />}
+                  {stats.LBCReceivedChange > 0 && <Icon icon={ICONS.TRENDING} iconColor="green" size={18} />}
                 </div>
                 <p className="help">
                   {__(
@@ -182,7 +182,7 @@ export default function CreatorAnalytics(props: Props) {
                         ? __('1 view', { view_count: stats.VideoViewsTopNew })
                         : __('%view_count% views', { view_count: stats.VideoViewsTopNew })}
                     </span>
-                    {stats.VideoViewsTopNew > 0 && <Icon icon={ICONS.SUPPORT} iconColor="green" size={18} />}
+                    {stats.VideoViewsTopNew > 0 && <Icon icon={ICONS.TRENDING} iconColor="green" size={18} />}
                   </div>
                 </React.Fragment>
               }
@@ -230,7 +230,7 @@ export default function CreatorAnalytics(props: Props) {
                       all_time_views_weekly_change: stats.VideoViewChangeTopAllTime,
                     })}
                   </span>
-                  {stats.VideoViewChangeTopAllTime > 0 && <Icon icon={ICONS.SUPPORT} iconColor="green" size={18} />}
+                  {stats.VideoViewChangeTopAllTime > 0 && <Icon icon={ICONS.TRENDING} iconColor="green" size={18} />}
                 </div>
               </React.Fragment>
             }

ui/component/fileActions/index.js

@@ -1,8 +1,6 @@
 import { connect } from 'react-redux';
-import * as SETTINGS from 'constants/settings';
 import { makeSelectClaimIsMine, makeSelectFileInfoForUri, makeSelectClaimForUri, doPrepareEdit } from 'lbry-redux';
 import { makeSelectCostInfoForUri } from 'lbryinc';
-import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { doOpenModal } from 'redux/actions/app';
 import fs from 'fs';
 import FileActions from './view';
@@ -14,7 +12,6 @@ const select = (state, props) => ({
   fileInfo: makeSelectFileInfoForUri(props.uri)(state),
   renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
   costInfo: makeSelectCostInfoForUri(props.uri)(state),
-  supportOption: makeSelectClientSetting(SETTINGS.SUPPORT_OPTION)(state),
 });
 
 const perform = dispatch => ({

ui/component/fileActions/view.jsx

@@ -1,5 +1,7 @@
 // @flow
 import type { Node } from 'react';
+import * as PAGES from 'constants/pages';
+import * as CS from 'constants/claim_search';
 import * as MODALS from 'constants/modal_types';
 import * as ICONS from 'constants/icons';
 import React from 'react';
@@ -8,6 +10,7 @@ import FileDownloadLink from 'component/fileDownloadLink';
 import { buildURI } from 'lbry-redux';
 import * as RENDER_MODES from 'constants/file_render_modes';
 import useIsMobile from 'effects/use-is-mobile';
+import ClaimSupportButton from 'component/claimSupportButton';
 
 type Props = {
   uri: string,
@@ -18,11 +21,10 @@ type Props = {
   fileInfo: FileListItem,
   costInfo: ?{ cost: number },
   renderMode: string,
-  supportOption: boolean,
 };
 
 function FileActions(props: Props) {
-  const { fileInfo, uri, openModal, claimIsMine, claim, costInfo, renderMode, supportOption, prepareEdit } = props;
+  const { fileInfo, uri, openModal, claimIsMine, claim, costInfo, renderMode, prepareEdit } = props;
   const isMobile = useIsMobile();
   const webShareable = costInfo && costInfo.cost === 0 && RENDER_MODES.WEB_SHAREABLE_MODES.includes(renderMode);
   const showDelete = claimIsMine || (fileInfo && (fileInfo.written_bytes > 0 || fileInfo.blobs_completed > 0));
@@ -61,34 +63,25 @@ function FileActions(props: Props) {
           label={__('Share')}
           onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable })}
         />
+
+        <div className="button-group">
           <Button
             button="alt"
             icon={ICONS.REPOST}
-          label={__('Repost %count%', { count: claim.meta.reposted > 0 ? `(${claim.meta.reposted})` : '' })}
+            label={__('Repost')}
             requiresAuth={IS_WEB}
             onClick={() => openModal(MODALS.REPOST, { uri })}
           />
-
+          {claim.meta.reposted > 0 && (
-        {!claimIsMine && (
             <Button
               button="alt"
-            icon={ICONS.TIP}
+              label={claim.meta.reposted}
-            label={__('Tip')}
               requiresAuth={IS_WEB}
-            title={__('Send a tip to this creator')}
+              navigate={`/$/${PAGES.DISCOVER}?${CS.REPOSTED_URI_KEY}=${encodeURIComponent(uri)}`}
-            onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: false })}
-          />
-        )}
-        {(claimIsMine || (!claimIsMine && supportOption)) && (
-          <Button
-            button="alt"
-            icon={ICONS.SUPPORT}
-            label={__('Support')}
-            requiresAuth={IS_WEB}
-            title={__('Support this claim')}
-            onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: true })}
             />
           )}
+        </div>
+        <ClaimSupportButton uri={uri} />
       </ActionWrapper>
 
       <ActionWrapper>

ui/component/fileDetails/view.jsx

@@ -1,13 +1,10 @@
 // @flow
-import * as PAGES from 'constants/pages';
-import * as CS from 'constants/claim_search';
 import React, { Fragment, PureComponent } from 'react';
 import Button from 'component/button';
 import path from 'path';
 import Card from 'component/common/card';
 
 type Props = {
-  uri: string,
   claim: StreamClaim,
   fileInfo: FileListItem,
   metadata: StreamMetadata,
@@ -18,7 +15,7 @@ type Props = {
 
 class FileDetails extends PureComponent<Props> {
   render() {
-    const { uri, claim, contentType, fileInfo, metadata, openFolder } = this.props;
+    const { claim, contentType, fileInfo, metadata, openFolder } = this.props;
 
     if (!claim || !metadata) {
       return <span className="empty">{__('Empty claim or metadata info.')}</span>;
@@ -52,18 +49,6 @@ class FileDetails extends PureComponent<Props> {
                   <td> {__('Content Type')}</td>
                   <td>{mediaType}</td>
                 </tr>
-                {claim && claim.meta.reposted > 0 && (
-                  <tr>
-                    <td>{__('Reposts')}</td>
-                    <td>
-                      <Button
-                        button="link"
-                        label={__('View %count% reposts', { count: claim.meta.reposted })}
-                        navigate={`/$/${PAGES.DISCOVER}?${CS.REPOSTED_URI_KEY}=${encodeURIComponent(uri)}`}
-                      />
-                    </td>
-                  </tr>
-                )}
                 {fileSize && (
                   <tr>
                     <td> {__('File Size')}</td>

ui/component/walletBalance/view.jsx

@@ -83,7 +83,7 @@ const WalletBalance = (props: Props) => {
 
             <div className="section">
               <div className="section__flex">
-                <Icon sectionIcon icon={ICONS.TIP} />
+                <Icon sectionIcon icon={ICONS.SUPPORT} />
                 <h2 className="section__title--small">
                   <strong>
                     <CreditAmount badge={false} amount={tipsBalance} precision={8} />

ui/component/walletSendTip/view.jsx

@@ -1,23 +1,26 @@
 // @flow
+import * as MODALS from 'constants/modal_types';
+import * as ICONS from 'constants/icons';
 import React from 'react';
 import Button from 'component/button';
-import { parseURI } from 'lbry-redux';
 import { FormField, Form } from 'component/common/form';
 import { MINIMUM_PUBLISH_BID } from 'constants/claim';
 import useIsMobile from 'effects/use-is-mobile';
 import CreditAmount from 'component/common/credit-amount';
 import I18nMessage from 'component/i18nMessage';
-import * as MODALS from 'constants/modal_types';
 import { Lbryio } from 'lbryinc';
+import Card from 'component/common/card';
+import classnames from 'classnames';
+
+const DEFAULT_TIP_AMOUNTS = [5, 10, 50];
 
 type Props = {
   uri: string,
-  claimIsMine: boolean,
+  // claimIsMine: boolean,
   title: string,
   claim: StreamClaim,
   isPending: boolean,
   sendSupport: (number, string, boolean) => void,
-  onCancel: () => void,
   closeModal: () => void,
   balance: number,
   isSupport: boolean,
@@ -31,22 +34,21 @@ function WalletSendTip(props: Props) {
     uri,
     title,
     isPending,
-    onCancel,
+    // claimIsMine,
-    claimIsMine,
-    isSupport,
     balance,
-    claim,
+    claim = {},
     instantTipEnabled,
     instantTipMax,
     openModal,
     sendSupport,
     closeModal,
   } = props;
-  const [tipAmount, setTipAmount] = React.useState(0);
+  const [tipAmount, setTipAmount] = React.useState(DEFAULT_TIP_AMOUNTS[0]);
   const [tipError, setTipError] = React.useState();
+  const [isSupport, setIsSupport] = React.useState(false);
+  const [showMore, setShowMore] = React.useState(false);
   const { claim_id: claimId } = claim;
   const isMobile = useIsMobile();
-  const { channelName } = parseURI(uri);
 
   function sendSupportOrConfirm(instantTipMaxAmount = null) {
     if (!isSupport && (!instantTipMaxAmount || !instantTipEnabled || tipAmount > instantTipMaxAmount)) {
@@ -99,22 +101,55 @@ function WalletSendTip(props: Props) {
     setTipError(tipError);
   }
 
-  const label =
+  // const label =
-    tipAmount && tipAmount !== 0
+  //   tipAmount && tipAmount !== 0
-      ? __(isSupport ? 'Support %amount% LBC' : 'Tip %amount% LBC', {
+  //     ? __(isSupport ? 'Support %amount% LBC' : 'Tip %amount% LBC', {
-          amount: tipAmount.toFixed(8).replace(/\.?0+$/, ''),
+  //         amount: tipAmount.toFixed(8).replace(/\.?0+$/, ''),
-        })
+  //       })
-      : __('Amount');
+  //     : __('Amount');
 
   return (
-    <React.Fragment>
     <Form onSubmit={handleSubmit}>
+      <Card
+        title={__('Support This Content')}
+        subtitle={
+          <React.Fragment>
+            {__(
+              'This will increase the overall bid amount for this content, which will boost its ability to be discovered while active.'
+            )}{' '}
+            <Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />.
+          </React.Fragment>
+        }
+        actions={
+          <>
+            <div className="section">
+              {DEFAULT_TIP_AMOUNTS.map(amount => (
+                <Button
+                  key={amount}
+                  button="alt"
+                  className={classnames('button-toggle', { 'button-toggle--active': tipAmount === amount })}
+                  label={`${amount} LBC`}
+                  onClick={() => setTipAmount(amount)}
+                />
+              ))}
+              <Button
+                button="alt"
+                className={classnames('button-toggle', {
+                  'button-toggle--active': !DEFAULT_TIP_AMOUNTS.includes(tipAmount),
+                })}
+                label={__('Custom')}
+                onClick={() => setShowMore(true)}
+              />
+            </div>
+
+            {showMore && (
+              <div className="section">
                 <FormField
                   autoFocus
                   name="tip-input"
                   label={
                     <React.Fragment>
-              {label}{' '}
+                      {'Custom support amount'}{' '}
                       {isMobile && (
                         <I18nMessage tokens={{ lbc_balance: <CreditAmount badge={false} amount={balance} /> }}>
                           (%lbc_balance% available)
@@ -129,39 +164,74 @@ function WalletSendTip(props: Props) {
                   type="number"
                   placeholder="1.23"
                   onChange={event => handleSupportPriceChange(event)}
-          inputButton={
+                />
+              </div>
+            )}
+
+            <div className="section__actions">
               <Button
+                autoFocus
+                icon={isSupport ? undefined : ICONS.SUPPORT}
                 button="primary"
                 type="submit"
-              label={__('Confirm')}
+                label={
+                  isSupport
+                    ? __('Send Revokable Support')
+                    : __('Send a %amount% Tip', { amount: tipAmount ? `${tipAmount} LBC` : '' })
+                }
                 disabled={isPending || tipError || !tipAmount}
               />
-          }
+              <FormField
-          helper={
+                name="toggle-is-support"
-            <React.Fragment>
+                type="checkbox"
-              {claimIsMine || isSupport
+                label={__('Make this support permanent')}
-                ? __(
+                checked={!isSupport}
-                    'This will increase the overall bid amount for %title%, which will boost its ability to be discovered while active.',
+                onChange={() => setIsSupport(!isSupport)}
-                    {
+              />
-                      title: title || '@' + channelName,
+            </div>
-                    }
+          </>
-                  )
-                : __(
-                    'This will appear as a tip for %title%, which will boost its ability to be discovered while active.',
-                    {
-                      title: title || '@' + channelName,
-                    }
-                  )}{' '}
-              <Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />.
-            </React.Fragment>
         }
       />
     </Form>
-      <div className="section__actions">
-        <Button button="link" label={__('Cancel')} onClick={onCancel} />
-      </div>
-    </React.Fragment>
   );
 }
 
 export default WalletSendTip;
+
+// <Button
+//   button="primary"
+//   type="submit"
+//   label={__('Confirm')}
+//   disabled={isPending || tipError || !tipAmount}
+// />;
+
+// <div className="section__actions">
+//   <FormField
+//     autoFocus
+//     name="tip-input"
+//     label={
+//       <React.Fragment>
+//         {label}{' '}
+//         {isMobile && (
+//           <I18nMessage tokens={{ lbc_balance: <CreditAmount badge={false} amount={balance} /> }}>
+//             (%lbc_balance% available)
+//           </I18nMessage>
+//         )}
+//       </React.Fragment>
+//     }
+//     className="form-field--price-amount"
+//     error={tipError}
+//     min="0"
+//     step="any"
+//     type="number"
+//     placeholder="1.23"
+//     onChange={event => handleSupportPriceChange(event)}
+//   />
+//   <FormField
+//     name="toggle-is-support"
+//     type="checkbox"
+//     label={__('Send this as a tip instead')}
+//     checked={!isSupport}
+//     onChange={() => setIsSupport(!isSupport)}
+//   />
+// </div>;

ui/constants/icons.js

@@ -36,7 +36,6 @@ export const LOCK = 'Lock';
 export const WEB = 'Globe';
 export const SHARE = 'Share2';
 export const EXTERNAL = 'ExternalLink';
-export const TIP = 'Gift';
 export const PLAY = 'Play';
 export const FACEBOOK = 'Facebook';
 export const TWITTER = 'Twitter';

ui/constants/settings.js

@@ -17,7 +17,6 @@ export const AUTOPLAY = 'autoplay';
 export const OS_NOTIFICATIONS_ENABLED = 'os_notifications_enabled';
 export const AUTO_DOWNLOAD = 'auto_download';
 export const AUTO_LAUNCH = 'auto_launch';
-export const SUPPORT_OPTION = 'support_option';
 export const HIDE_BALANCE = 'hide_balance';
 export const HIDE_SPLASH_ANIMATION = 'hide_splash_animation';
 export const FLOATING_PLAYER = 'floating_player';

ui/modal/modalSendTip/view.jsx

@@ -2,9 +2,6 @@
 import React from 'react';
 import { Modal } from 'modal/modal';
 import SendTip from 'component/walletSendTip';
-import UriIndicator from 'component/uriIndicator';
-import I18nMessage from 'component/i18nMessage';
-import Card from 'component/common/card';
 
 type Props = {
   closeModal: () => void,
@@ -15,26 +12,11 @@ type Props = {
 
 class ModalSendTip extends React.PureComponent<Props> {
   render() {
-    const { closeModal, uri, claimIsMine, isSupport } = this.props;
+    const { closeModal, uri, claimIsMine } = this.props;
 
     return (
       <Modal onAborted={closeModal} isOpen type="card">
-        <Card
+        <SendTip uri={uri} claimIsMine={claimIsMine} onCancel={closeModal} />
-          title={
-            claimIsMine || isSupport ? (
-              __('Support This Claim')
-            ) : (
-              <I18nMessage
-                tokens={{
-                  url: <UriIndicator uri={uri} inline />,
-                }}
-              >
-                Send a tip to %url%
-              </I18nMessage>
-            )
-          }
-          actions={<SendTip uri={uri} claimIsMine={claimIsMine} isSupport={isSupport} onCancel={closeModal} />}
-        />
       </Modal>
     );
   }

ui/page/channel/index.js

@@ -11,7 +11,6 @@ import {
 } from 'lbry-redux';
 import { selectBlackListedOutpoints, doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc';
 import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
-import { doOpenModal } from 'redux/actions/app';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import ChannelPage from './view';
 
@@ -25,17 +24,12 @@ const select = (state, props) => ({
   isSubscribed: makeSelectIsSubscribed(props.uri, true)(state),
   channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
   blackListedOutpoints: selectBlackListedOutpoints(state),
-  supportOption: makeSelectClientSetting(settings.SUPPORT_OPTION)(state),
   showMature: makeSelectClientSetting(settings.SHOW_MATURE)(state),
   subCount: makeSelectSubCountForUri(props.uri)(state),
 });
 
 const perform = dispatch => ({
-  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
   fetchSubCount: claimId => dispatch(doFetchSubCount(claimId)),
 });
 
-export default connect(
+export default connect(select, perform)(ChannelPage);
-  select,
-  perform
-)(ChannelPage);

ui/page/channel/view.jsx

@@ -1,6 +1,5 @@
 // @flow
 import * as ICONS from 'constants/icons';
-import * as MODALS from 'constants/modal_types';
 import React, { useState, useEffect } from 'react';
 import { parseURI } from 'lbry-redux';
 import { Lbryio } from 'lbryinc';
@@ -25,6 +24,7 @@ import HelpLink from 'component/common/help-link';
 import { DEBOUNCE_WAIT_DURATION_MS } from 'constants/search';
 import ClaimList from 'component/claimList';
 import DateTime from 'component/dateTime';
+import ClaimSupportButton from 'component/claimSupportButton';
 
 const PAGE_VIEW_QUERY = `view`;
 const ABOUT_PAGE = `about`;
@@ -50,8 +50,6 @@ type Props = {
     txid: string,
     nout: number,
   }>,
-  openModal: (id: string, { uri: string, claimIsMine?: boolean, isSupport?: boolean }) => void,
-  supportOption: boolean,
   fetchSubCount: string => void,
   subCount: number,
   showMature: boolean,
@@ -71,8 +69,6 @@ function ChannelPage(props: Props) {
     isSubscribed,
     channelIsBlocked,
     blackListedOutpoints,
-    openModal,
-    supportOption,
     showMature,
     fetchSubCount,
     subCount,
@@ -203,24 +199,7 @@ function ChannelPage(props: Props) {
       <header className="channel-cover">
         <div className="channel__quick-actions">
           {!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} />}
-          {!channelIsMine && (
+          {!channelIsBlocked && <ClaimSupportButton uri={uri} />}
-            <Button
-              button="alt"
-              icon={ICONS.TIP}
-              label={__('Tip')}
-              title={__('Send a tip to this creator')}
-              onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: false })}
-            />
-          )}
-          {(channelIsMine || (!channelIsMine && supportOption)) && (
-            <Button
-              button="alt"
-              icon={ICONS.SUPPORT}
-              label={__('Support')}
-              title={__('Support this creator')}
-              onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: true })}
-            />
-          )}
           {!channelIsBlocked && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />}
           {!isSubscribed && <BlockButton uri={permanentUrl} />}
         </div>

ui/page/settings/index.js

@@ -41,7 +41,6 @@ const select = state => ({
   walletEncrypted: selectWalletIsEncrypted(state),
   osNotificationsEnabled: selectosNotificationsEnabled(state),
   autoDownload: makeSelectClientSetting(SETTINGS.AUTO_DOWNLOAD)(state),
-  supportOption: makeSelectClientSetting(SETTINGS.SUPPORT_OPTION)(state),
   userBlockedChannelsCount: selectBlockedChannelsCount(state),
   hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
   floatingPlayer: makeSelectClientSetting(SETTINGS.FLOATING_PLAYER)(state),

ui/page/settings/view.jsx

@@ -75,7 +75,6 @@ type Props = {
   updateWalletStatus: () => void,
   walletEncrypted: boolean,
   osNotificationsEnabled: boolean,
-  supportOption: boolean,
   userBlockedChannelsCount?: number,
   hideBalance: boolean,
   confirmForgetPassword: ({}) => void,
@@ -239,7 +238,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
       setDaemonSetting,
       setClientSetting,
       toggle3PAnalytics,
-      supportOption,
       hideBalance,
       userBlockedChannelsCount,
       floatingPlayer,
@@ -488,11 +486,11 @@ class SettingsPage extends React.PureComponent<Props, State> {
                 actions={
                   <p>
                     <React.Fragment>
-				              {
+                      {userBlockedChannelsCount === 0
-                        userBlockedChannelsCount === 0 ? __("You don't have blocked channels.")
+                        ? __("You don't have blocked channels.")
-				                : userBlockedChannelsCount === 1 ? __('You have one blocked channel.') +' '
+                        : userBlockedChannelsCount === 1
-				                : __('You have %channels% blocked channels.', {channels: userBlockedChannelsCount})+' '
+                        ? __('You have one blocked channel.') + ' '
-                      }
+                        : __('You have %channels% blocked channels.', { channels: userBlockedChannelsCount }) + ' '}
                       {
                         <Button
                           button="link"
@@ -743,35 +741,11 @@ class SettingsPage extends React.PureComponent<Props, State> {
               }
             />
             {/* @endif */}
-            {(!IS_WEB || isAuthenticated) && (
+            {!IS_WEB && (
               <Card
                 title={__('Experimental Settings')}
                 actions={
                   <React.Fragment>
-                    <FormField
-                      type="checkbox"
-                      name="support_option"
-                      onChange={() => setClientSetting(SETTINGS.SUPPORT_OPTION, !supportOption)}
-                      checked={supportOption}
-                      label={__('Enable claim support')}
-                      helper={
-                        <I18nMessage
-                          tokens={{
-                            discovery_link: (
-                              <Button button="link" label={__('discovery')} href="https://lbry.com/faq/trending" />
-                            ),
-                            vanity_names_link: (
-                              <Button button="link" label={__('vanity names')} href="https://lbry.com/faq/naming" />
-                            ),
-                          }}
-                        >
-                          This will add a Support button along side tipping. Similar to tips, supports help
-                          %discovery_link% but the LBC is returned to your wallet if revoked. Both also help secure your
-                          %vanity_names_link%.
-                        </I18nMessage>
-                      }
-                    />
-
                     {/* @if TARGET='app' */}
                     {/*
                   Disabling below until we get downloads to work with shared subscriptions code

ui/redux/reducers/settings.js

@@ -30,7 +30,6 @@ const defaultState = {
     [SETTINGS.LANGUAGE]: settingLanguage.find(language => SUPPORTED_LANGUAGES[language]),
     [SETTINGS.THEME]: __('light'),
     [SETTINGS.THEMES]: [__('light'), __('dark')],
-    [SETTINGS.SUPPORT_OPTION]: false,
     [SETTINGS.HIDE_SPLASH_ANIMATION]: false,
     [SETTINGS.HIDE_BALANCE]: false,
     [SETTINGS.OS_NOTIFICATIONS_ENABLED]: true,

ui/scss/component/_button.scss

@@ -141,3 +141,18 @@ svg + .button__label,
     opacity: 1;
   }
 }
+
+.button-group {
+  display: flex;
+
+  .button:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: 1px solid var(--color-button-border);
+  }
+
+  .button:nth-child(2) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}

ui/scss/component/_form-field.scss

@@ -12,7 +12,7 @@ input-submit {
 }
 
 input[type='number'] {
-  width: 8em;
+  width: 5rem;
 }
 
 fieldset-group {

ui/scss/component/_icon.scss

@@ -6,7 +6,6 @@
   padding: 1.5rem;
   margin-top: 0;
   margin-bottom: 0;
-  height: 3.5rem;
   width: 3.5rem;
   border-radius: calc(3.5rem / 2);
   position: relative;

ui/scss/component/section.scss

@@ -122,9 +122,11 @@
     }
   }
 
-  .button--primary ~ .button--link {
+  .button--primary ~ .button--link,
+  .button--secondary ~ .button--link {
     margin-left: var(--spacing-s);
-    padding: var(--spacing-xs);
+    padding: var(--spacing-s) var(--spacing-m);
+    height: var(--button-height);
   }
 }
 

ui/scss/themes/dark.scss

@@ -25,6 +25,7 @@
   --color-button-alt-bg-hover: #3e464d;
   --color-button-alt-text: #e2e9f0;
   --color-header-button: var(--color-link-icon);
+  --color-button-border: var(--color-gray-5);
 
   // Color
   --color-focus: #2d69a5;

ui/scss/themes/light.scss

@@ -4,6 +4,7 @@
   --color-link-active: var(--color-primary);
   --color-navigation-link: var(--color-gray-5);
   --color-header-button: #f7f7f7;
+  --color-button-border: var(--color-gray-3);
 
   // Color
   --color-background: #f9f9f9;