From a36a8023c7fc3e244158eace9d7e6587a6825464 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 19 Mar 2021 14:47:29 +0800
Subject: [PATCH] Support = Boost | Tip

## Issue
Closes 5226: Figure out odysee-friendly way to re-enable supports

This essentially re-enables staking (now called "Boost") for Odysee.
---
 static/app-strings.json             |  3 +-
 ui/component/walletSendTip/view.jsx | 62 +++++++++++++++--------------
 2 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 17651116a..d25507916 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1169,12 +1169,13 @@
   "Changelog": "Changelog",
   "Boost your content": "Boost your content",
   "Boost This Video": "Boost This Video",
+  "Boost This Content": "Boost This Content",
+  "Boost": "Boost",
   "Send Revocable Support": "Send Revocable Support",
   "Send a %amount% Tip": "Send a %amount% Tip",
   "Channel to show support as": "Channel to show support as",
   "Buy more LBRY Credits": "Buy more LBRY Credits",
   "Support this content": "Support this content",
-  "Make this a tip": "Make this a tip",
   "Custom support amount": "Custom support amount",
   "(%lbc_balance% Credits available)": "(%lbc_balance% Credits available)",
   "Loading your channels...": "Loading your channels...",
diff --git a/ui/component/walletSendTip/view.jsx b/ui/component/walletSendTip/view.jsx
index 9f96efffa..3c147c3a3 100644
--- a/ui/component/walletSendTip/view.jsx
+++ b/ui/component/walletSendTip/view.jsx
@@ -1,5 +1,4 @@
 // @flow
-import { SIMPLE_SITE } from 'config';
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
 import React from 'react';
@@ -64,7 +63,7 @@ function WalletSendTip(props: Props) {
   const { channelName } = parseURI(uri);
   const noBalance = balance === 0;
   const tipAmount = useCustomTip ? customTipAmount : presetTipAmount;
-  const isSupport = claimIsMine ? true : SIMPLE_SITE ? false : !sendAsTip;
+  const isSupport = claimIsMine || !sendAsTip;
 
   React.useEffect(() => {
     const regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
@@ -157,21 +156,37 @@ function WalletSendTip(props: Props) {
         />
       ) : (
         <Card
-          title={
-            claimIsMine
-              ? __('Boost your content')
-              : isSupport
-              ? __('Support this content')
-              : __('Support --[button to support a claim]--')
-          }
+          title={<LbcSymbol postfix={claimIsMine ? __('Boost your content') : __('Support this content')} size={22} />}
           subtitle={
             <React.Fragment>
-              {isSupport
-                ? __(
-                    'This will increase the overall bid amount for this content, which will boost its ability to be discovered while active.'
-                  )
-                : __('Show this channel your appreciation by sending a donation.')}{' '}
-              <Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />.
+              {!claimIsMine && (
+                <div className="section">
+                  <Button
+                    key="tip"
+                    icon={ICONS.SUPPORT}
+                    label={__('Tip')}
+                    button="alt"
+                    onClick={() => setSendAsTip(true)}
+                    className={classnames('button-toggle', { 'button-toggle--active': sendAsTip })}
+                  />
+                  <Button
+                    key="boost"
+                    icon={ICONS.TRENDING}
+                    label={__('Boost')}
+                    button="alt"
+                    onClick={() => setSendAsTip(false)}
+                    className={classnames('button-toggle', { 'button-toggle--active': !sendAsTip })}
+                  />
+                </div>
+              )}
+              <div className="section__subtitle">
+                {isSupport
+                  ? __(
+                      'This will increase the overall bid amount for this content, which will boost its ability to be discovered while active.'
+                    )
+                  : __('Show this channel your appreciation by sending a donation.')}{' '}
+                <Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />
+              </div>
             </React.Fragment>
           }
           actions={
@@ -185,7 +200,7 @@ function WalletSendTip(props: Props) {
                     <div className="confirm__value">
                       {activeChannelClaim && !incognito ? activeChannelClaim.name : __('Anonymous')}
                     </div>
-                    <div className="confirm__label">{__(isSupport ? 'Supporting' : 'Tipping')}</div>
+                    <div className="confirm__label">{__(isSupport ? 'Boosting' : 'Tipping')}</div>
                     <div className="confirm__value">
                       <LbcSymbol postfix={tipAmount} size={22} />
                     </div>
@@ -276,28 +291,17 @@ function WalletSendTip(props: Props) {
                 <div className="section__actions">
                   <Button
                     autoFocus
-                    icon={isSupport ? undefined : ICONS.SUPPORT}
+                    icon={isSupport ? ICONS.TRENDING : ICONS.SUPPORT}
                     button="primary"
                     type="submit"
                     disabled={fetchingChannels || isPending || tipError || !tipAmount}
                     label={
                       isSupport
-                        ? claimIsMine
-                          ? __('Boost This Video')
-                          : __('Send Revocable Support')
+                        ? __('Boost This Content')
                         : __('Send a %amount% Tip', { amount: tipAmount ? `${tipAmount} Credit` : '' })
                     }
                   />
                   {fetchingChannels && <span className="help">{__('Loading your channels...')}</span>}
-                  {!claimIsMine && !fetchingChannels && !SIMPLE_SITE && (
-                    <FormField
-                      name="toggle-is-support"
-                      type="checkbox"
-                      label={__('Make this a tip')}
-                      checked={sendAsTip}
-                      onChange={() => setSendAsTip(!sendAsTip)}
-                    />
-                  )}
                 </div>
                 <WalletSpendableBalanceHelp />
               </>