Merge pull request #2647 from lbryio/support-option

feat: experimental support option

package.json

@@ -124,7 +124,7 @@
     "jsmediatags": "^3.8.1",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#5080eb3ea1f09ce03c4f50d9224feddf737628d3",
+    "lbry-redux": "lbryio/lbry-redux#e550f0ff0448fcad5f3d0365ec7ad744376b41cf",
     "lbryinc": "lbryio/lbryinc#a93596c51c8fb0a226cb84df04c26a6bb60a45fb",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",

src/ui/component/rewardSummary/view.jsx

@@ -41,7 +41,7 @@ class RewardSummary extends React.Component<Props> {
               navigate="/$/rewards"
               label={hasRewards ? __('Claim Rewards') : __('View Rewards')}
             />
-            <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/rewards" />
+            <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/rewards" />.
           </div>
         </div>
       </section>

src/ui/component/tagsSelect/view.jsx

@@ -92,7 +92,10 @@ export default function TagSelect(props: Props) {
           </ul>
           <TagsSearch onSelect={onSelect} suggestMature={suggestMature && !hasMatureTag} />
           {help !== false && (
-            <p className="help">{help || __("The tags you follow will change what's trending for you.")}</p>
+            <p className="help">
+              {help || __("The tags you follow will change what's trending for you. ")}
+              <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/trending" />.
+            </p>
           )}
         </div>
       </div>

src/ui/component/walletSendTip/index.js

@@ -16,7 +16,7 @@ const select = (state, props) => ({
 });
 
 const perform = dispatch => ({
-  sendSupport: (amount, claimId, uri) => dispatch(doSendTip(amount, claimId, uri)),
+  sendSupport: (amount, claimId) => dispatch(doSendTip(amount, claimId)),
 });
 
 export default connect(

src/ui/component/walletSendTip/view.jsx

@@ -13,6 +13,7 @@ type Props = {
   onCancel: () => void,
   sendTipCallback?: () => void,
   balance: number,
+  isSupport: boolean,
 };
 
 type State = {
@@ -32,11 +33,11 @@ class WalletSendTip extends React.PureComponent<Props, State> {
   }
 
   handleSendButtonClicked() {
-    const { claim, uri, sendSupport, sendTipCallback } = this.props;
+    const { claim, sendSupport, sendTipCallback } = this.props;
     const { claim_id: claimId } = claim;
     const { tipAmount } = this.state;
 
-    sendSupport(tipAmount, claimId, uri);
+    sendSupport(tipAmount, claimId);
 
     // ex: close modal
     if (sendTipCallback) {
@@ -70,7 +71,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { title, isPending, uri, onCancel, claimIsMine } = this.props;
+    const { title, isPending, uri, onCancel, claimIsMine, isSupport } = this.props;
     const { tipAmount, tipError } = this.state;
 
     return (
@@ -99,11 +100,11 @@ class WalletSendTip extends React.PureComponent<Props, State> {
             }
             helper={
               <p>
-                {claimIsMine
+                {claimIsMine || isSupport
-                  ? __('This will increase your overall bid amount for ')
+                  ? __('This will increase the overall bid amount for ')
                   : __('This will appear as a tip for ')}
                 {`"${title}" which will boost its ability to be discovered while active.`}{' '}
-                <Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />
+                <Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />.
               </p>
             }
           />

src/ui/constants/settings.js

@@ -16,3 +16,4 @@ export const AUTOPLAY = 'autoplay';
 export const RESULT_COUNT = 'resultCount';
 export const OS_NOTIFICATIONS_ENABLED = 'osNotificationsEnabled';
 export const AUTO_DOWNLOAD = 'autoDownload';
+export const SUPPORT_OPTION = 'supportOption';

src/ui/modal/modalRevokeClaim/view.jsx

@@ -21,6 +21,8 @@ class ModalRevokeClaim extends React.PureComponent<Props> {
   getButtonLabel(type: string) {
     if (type === txnTypes.TIP) {
       return 'Confirm Tip Unlock';
+    } else if (type === txnTypes.SUPPORT) {
+      return 'Confirm Support Revoke';
     }
     return 'Confirm Claim Revoke';
   }
@@ -75,8 +77,8 @@ class ModalRevokeClaim extends React.PureComponent<Props> {
     return (
       <Modal
         isOpen
-        title={type === txnTypes.TIP ? __('Confirm Tip Unlock') : __('Confirm Claim Revoke')}
+        title={this.getButtonLabel(type)}
-        contentLabel={__('Confirm Claim Revoke')}
+        contentLabel={this.getButtonLabel(type)}
         type="confirm"
         confirmButtonLabel={this.getButtonLabel(type)}
         onConfirmed={this.revokeClaim}

src/ui/modal/modalSendTip/view.jsx

@@ -8,11 +8,12 @@ type Props = {
   closeModal: () => void,
   uri: string,
   claimIsMine: boolean,
+  isSupport: boolean,
 };
 
 class ModalSendTip extends React.PureComponent<Props> {
   render() {
-    const { closeModal, uri, claimIsMine } = this.props;
+    const { closeModal, uri, claimIsMine, isSupport } = this.props;
 
     return (
       <Modal
@@ -21,11 +22,23 @@ class ModalSendTip extends React.PureComponent<Props> {
         type="custom"
         title={
           <React.Fragment>
-            {claimIsMine ? __('Add support to') : __('Send a tip')} <UriIndicator uri={uri} />
+            {claimIsMine || isSupport ? (
+              __('Add support to this claim')
+            ) : (
+              <span>
+                {__('Send a tip to')} <UriIndicator uri={uri} />
+              </span>
+            )}
           </React.Fragment>
         }
       >
-        <SendTip uri={uri} claimIsMine={claimIsMine} onCancel={closeModal} sendTipCallback={closeModal} />
+        <SendTip
+          uri={uri}
+          claimIsMine={claimIsMine}
+          isSupport={isSupport}
+          onCancel={closeModal}
+          sendTipCallback={closeModal}
+        />
       </Modal>
     );
   }

src/ui/page/file/index.js

@@ -42,6 +42,7 @@ const select = (state, props) => ({
   title: makeSelectTitleForUri(props.uri)(state),
   thumbnail: makeSelectThumbnailForUri(props.uri)(state),
   nsfw: makeSelectClaimIsNsfw(props.uri)(state),
+  supportOption: makeSelectClientSetting(settings.SUPPORT_OPTION)(state),
 });
 
 const perform = dispatch => ({

src/ui/page/file/view.jsx

@@ -41,13 +41,14 @@ type Props = {
   channelUri: string,
   viewCount: number,
   prepareEdit: ({}, string, {}) => void,
-  openModal: (id: string, { uri: string }) => void,
+  openModal: (id: string, { uri: string, claimIsMine: boolean, isSupport: boolean }) => void,
   markSubscriptionRead: (string, string) => void,
   fetchViewCount: string => void,
   balance: number,
   title: string,
   thumbnail: ?string,
   nsfw: boolean,
+  supportOption: boolean,
 };
 
 class FilePage extends React.Component<Props> {
@@ -149,6 +150,7 @@ class FilePage extends React.Component<Props> {
       title,
       thumbnail,
       nsfw,
+      supportOption,
     } = this.props;
 
     // File info
@@ -246,9 +248,17 @@ class FilePage extends React.Component<Props> {
                     <Button
                       button="alt"
                       icon={claimIsMine ? icons.SUPPORT : icons.TIP}
-                      label={claimIsMine ? __('Add support') : __('Send a tip')}
+                      label={claimIsMine ? __('Support') : __('Tip')}
-                      onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine })}
+                      onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: false })}
                     />
+                    {!claimIsMine && supportOption && (
+                      <Button
+                        button="alt"
+                        icon={icons.SUPPORT}
+                        label={__('Support')}
+                        onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: true })}
+                      />
+                    )}
                   </React.Fragment>
                 }
                 <Button

src/ui/page/rewards/view.jsx

@@ -40,7 +40,7 @@ class RewardsPage extends PureComponent<Props> {
                   {__(
                     'This step is optional. You can continue to use this app without rewards, but LBC may be needed for some tasks.'
                   )}{' '}
-                  <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/rewards" />
+                  <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/rewards" />.
                 </p>
               </header>
 

src/ui/page/settings/index.js

@@ -25,6 +25,7 @@ const select = state => ({
   walletEncrypted: selectWalletIsEncrypted(state),
   osNotificationsEnabled: selectosNotificationsEnabled(state),
   autoDownload: makeSelectClientSetting(settings.AUTO_DOWNLOAD)(state),
+  supportOption: makeSelectClientSetting(settings.SUPPORT_OPTION)(state),
 });
 
 const perform = dispatch => ({

src/ui/page/settings/view.jsx

@@ -44,6 +44,7 @@ type Props = {
   updateWalletStatus: () => void,
   walletEncrypted: boolean,
   osNotificationsEnabled: boolean,
+  supportOption: boolean,
 };
 
 type State = {
@@ -150,6 +151,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
       autoDownload,
       setDaemonSetting,
       setClientSetting,
+      supportOption,
     } = this.props;
 
     const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
@@ -276,9 +278,9 @@ class SettingsPage extends React.PureComponent<Props, State> {
                   name="show_nsfw"
                   onChange={() => setClientSetting(SETTINGS.SHOW_NSFW, !showNsfw)}
                   checked={showNsfw}
-                  label={__('Show NSFW content')}
+                  label={__('Show mature content')}
                   helper={__(
-                    'NSFW content may include nudity, intense sexuality, profanity, or other adult content. By displaying NSFW content, you are affirming you are of legal age to view mature content in your country or jurisdiction.  '
+                    'Mature content may include nudity, intense sexuality, profanity, or other adult content. By displaying mature content, you are affirming you are of legal age to view mature content in your country or jurisdiction.  '
                   )}
                 />
               </Form>
@@ -368,7 +370,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
                   name="encrypt_wallet"
                   onChange={() => this.onChangeEncryptWallet()}
                   checked={walletEncrypted}
-                  label={__('Encrypt my wallet with a custom password.')}
+                  label={__('Encrypt my wallet with a custom password')}
                   helper={
                     <React.Fragment>
                       {__('Secure your local wallet data with a custom password.')}{' '}
@@ -386,6 +388,23 @@ class SettingsPage extends React.PureComponent<Props, State> {
               </header>
 
               <Form className="card__content">
+                <FormField
+                  type="setting"
+                  name="support_option"
+                  onChange={() => setClientSetting(SETTINGS.SUPPORT_OPTION, !supportOption)}
+                  checked={supportOption}
+                  label={__('Enable claim support')}
+                  helper={
+                    <React.Fragment>
+                      {__('This will add a Support button along side tipping. Similar to tips, supports help ')}
+                      <Button button="link" label={__(' discovery ')} href="https://lbry.com/faq/trending" />
+                      {__(' but the LBC is returned to your wallet if revoked.')}
+                      {__(' Both also help secure ')}
+                      <Button button="link" label={__('vanity names')} href="https://lbry.com/faq/naming" />.
+                    </React.Fragment>
+                  }
+                />
+
                 <FormField
                   type="setting"
                   name="auto_download"

src/ui/redux/reducers/settings.js

@@ -24,6 +24,7 @@ const defaultState = {
     [SETTINGS.THEME]: getLocalStorageSetting(SETTINGS.THEME, 'light'),
     [SETTINGS.THEMES]: getLocalStorageSetting(SETTINGS.THEMES, []),
     [SETTINGS.AUTOMATIC_DARK_MODE_ENABLED]: getLocalStorageSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, false),
+    [SETTINGS.SUPPORT_OPTION]: getLocalStorageSetting(SETTINGS.SUPPORT_OPTION, false),
     [SETTINGS.AUTOPLAY]: getLocalStorageSetting(SETTINGS.AUTOPLAY, false),
     [SETTINGS.RESULT_COUNT]: Number(getLocalStorageSetting(SETTINGS.RESULT_COUNT, 50)),
     [SETTINGS.AUTO_DOWNLOAD]: getLocalStorageSetting(SETTINGS.AUTO_DOWNLOAD, true),

static/locales/en.json

@@ -578,5 +578,19 @@
   "Invalid character %s in name: %s.": "Invalid character %s in name: %s.",
   "The better your tags are, the easier it will be for people to discover your channel.": "The better your tags are, the easier it will be for people to discover your channel.",
   "Thumbnail (300 x 300)": "Thumbnail (300 x 300)",
-  "Cover (1000 x 160)": "Cover (1000 x 160)"
+  "Cover (1000 x 160)": "Cover (1000 x 160)",
+  "The tags you follow will change what's trending for you. ": "The tags you follow will change what's trending for you. ",
+  "Mature": "Mature",
+  "This will increase the overall bid amount for ": "This will increase the overall bid amount for ",
+  "This will appear as a tip for ": "This will appear as a tip for ",
+  "Show mature content": "Show mature content",
+  "Mature content may include nudity, intense sexuality, profanity, or other adult content. By displaying mature content, you are affirming you are of legal age to view mature content in your country or jurisdiction.  ": "Mature content may include nudity, intense sexuality, profanity, or other adult content. By displaying mature content, you are affirming you are of legal age to view mature content in your country or jurisdiction.  ",
+  "Encrypt my wallet with a custom password": "Encrypt my wallet with a custom password",
+  "Enable claim support": "Enable claim support",
+  "This will add a Support button along side tipping. Similar to tips, supports help ": "This will add a Support button along side tipping. Similar to tips, supports help ",
+  " discovery ": " discovery ",
+  " but the LBC is returned to your wallet if revoked.": " but the LBC is returned to your wallet if revoked.",
+  " Both also help secure ": " Both also help secure ",
+  "vanity names": "vanity names",
+  "Add support to this claim": "Add support to this claim"
 }

yarn.lock

@@ -6653,9 +6653,9 @@ lazy-val@^1.0.3, lazy-val@^1.0.4:
     yargs "^13.2.2"
     zstd-codec "^0.1.1"
 
-lbry-redux@lbryio/lbry-redux#5080eb3ea1f09ce03c4f50d9224feddf737628d3:
+lbry-redux@lbryio/lbry-redux#e550f0ff0448fcad5f3d0365ec7ad744376b41cf:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/5080eb3ea1f09ce03c4f50d9224feddf737628d3"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/e550f0ff0448fcad5f3d0365ec7ad744376b41cf"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"