add supports to 'top' page

package.json

@@ -130,7 +130,7 @@
     "imagesloaded": "^4.1.4",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#916ef0f6474f8666d491df75516621b6ffcfbfce",
+    "lbry-redux": "lbryio/lbry-redux#adebb2d6259e9f69ca055a8a8c0c01fac0af6124",
     "lbryinc": "lbryio/lbryinc#6a59102c52673502569d2c43bd4ee58c315fb2e4",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",

ui/component/claimList/view.jsx

@@ -31,6 +31,7 @@ type Props = {
   headerLabel?: string | Node,
   showUnresolvedClaims?: boolean,
   renderProperties: ?(Claim) => Node,
+  includeSupportAction?: boolean,
 };
 
 export default function ClaimList(props: Props) {
@@ -51,6 +52,7 @@ export default function ClaimList(props: Props) {
     headerLabel,
     showUnresolvedClaims,
     renderProperties,
+    includeSupportAction,
   } = props;
   const [scrollBottomCbMap, setScrollBottomCbMap] = useState({});
   const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
@@ -134,6 +136,7 @@ export default function ClaimList(props: Props) {
               key={uri}
               uri={uri}
               type={type}
+              includeSupportAction={includeSupportAction}
               showUnresolvedClaim={showUnresolvedClaims}
               properties={renderProperties || (type !== 'small' ? undefined : false)}
               showUserBlocked={showHiddenByUser}

ui/component/claimListDiscover/view.jsx

@@ -51,6 +51,7 @@ type Props = {
   headerLabel?: string | Node,
   name?: string,
   renderProperties?: Claim => Node,
+  includeSupportAction?: boolean,
 };
 
 function ClaimListDiscover(props: Props) {
@@ -74,6 +75,7 @@ function ClaimListDiscover(props: Props) {
     header,
     name,
     renderProperties,
+    includeSupportAction,
   } = props;
   const didNavigateForward = history.action === 'PUSH';
   const [page, setPage] = useState(1);
@@ -282,6 +284,7 @@ function ClaimListDiscover(props: Props) {
         pageSize={PAGE_SIZE}
         empty={noResults}
         renderProperties={renderProperties}
+        includeSupportAction={includeSupportAction}
       />
 
       <div className="card">

ui/component/claimPreview/view.jsx

@@ -14,6 +14,7 @@ import ClaimTags from 'component/claimTags';
 import SubscribeButton from 'component/subscribeButton';
 import ChannelThumbnail from 'component/channelThumbnail';
 import BlockButton from 'component/blockButton';
+import ClaimSupportButton from 'component/claimSupportButton';
 import useGetThumbnail from 'effects/use-get-thumbnail';
 import ClaimPreviewTitle from 'component/claimPreviewTitle';
 import ClaimPreviewSubtitle from 'component/claimPreviewSubtitle';
@@ -56,6 +57,7 @@ type Props = {
   getFile: string => void,
   customShouldHide?: Claim => boolean,
   showUnresolvedClaim?: boolean,
+  includeSupportAction?: boolean,
 };
 
 const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
@@ -87,6 +89,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     streamingUrl,
     customShouldHide,
     showUnresolvedClaim,
+    includeSupportAction,
   } = props;
   const shouldFetch =
     claim === undefined || (claim !== null && claim.value_type === 'channel' && isEmpty(claim.meta) && !pending);
@@ -279,6 +282,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                       {!hideBlock && isChannel && !isSubscribed && !claimIsMine && (
                         <BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
                       )}
+                      {includeSupportAction && <ClaimSupportButton uri={uri} />}
                     </div>
                   )}
                 </React.Fragment>

ui/component/claimSupportButton/index.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import { doOpenModal } from 'redux/actions/app';
+import ClaimSupportButton from './view';
+
+export default connect(
+  null,
+  {
+    doOpenModal,
+  }
+)(ClaimSupportButton);

ui/component/claimSupportButton/view.jsx

@@ -0,0 +1,25 @@
+// @flow
+import * as MODALS from 'constants/modal_types';
+import * as ICONS from 'constants/icons';
+import React from 'react';
+import Button from 'component/button';
+
+type Props = {
+  uri: string,
+  doOpenModal: (string, {}) => void,
+};
+
+export default function ClaimSupportButton(props: Props) {
+  const { doOpenModal, uri } = props;
+
+  return (
+    <Button
+      button="alt"
+      icon={ICONS.SUPPORT}
+      label={__('Support')}
+      requiresAuth={IS_WEB}
+      title={__('Support this claim')}
+      onClick={() => doOpenModal(MODALS.SEND_TIP, { uri, isSupport: true })}
+    />
+  );
+}

ui/component/walletSendTip/index.js

@@ -11,7 +11,7 @@ import WalletSendTip from './view';
 const select = (state, props) => ({
   isPending: selectIsSendingSupport(state),
   title: makeSelectTitleForUri(props.uri)(state),
-  claim: makeSelectClaimForUri(props.uri)(state),
+  claim: makeSelectClaimForUri(props.uri, false)(state),
   balance: selectBalance(state),
 });
 

ui/modal/modalSendTip/view.jsx

@@ -4,6 +4,7 @@ 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,
@@ -17,13 +18,11 @@ class ModalSendTip extends React.PureComponent<Props> {
     const { closeModal, uri, claimIsMine, isSupport } = this.props;
 
     return (
-      <Modal
+      <Modal onAborted={closeModal} isOpen type="card">
-        onAborted={closeModal}
+        <Card
-        isOpen
-        type="custom"
           title={
             claimIsMine || isSupport ? (
-            __('Add support to this claim')
+              __('Support This Claim')
             ) : (
               <I18nMessage
                 tokens={{
@@ -34,7 +33,7 @@ class ModalSendTip extends React.PureComponent<Props> {
               </I18nMessage>
             )
           }
-      >
+          actions={
             <SendTip
               uri={uri}
               claimIsMine={claimIsMine}
@@ -42,6 +41,8 @@ class ModalSendTip extends React.PureComponent<Props> {
               onCancel={closeModal}
               sendTipCallback={closeModal}
             />
+          }
+        />
       </Modal>
     );
   }

ui/page/top/view.jsx

@@ -19,6 +19,7 @@ function TopPage(props: Props) {
         defaultTypeSort={TYPE_TOP}
         defaultTimeSort={TIME_ALL}
         defaultOrderBy={['effective_amount']}
+        includeSupportAction
         renderProperties={claim => (
           <span className="media__subtitle">
             <ClaimEffectiveAmount uri={claim.repost_url || claim.canonical_url} />

yarn.lock

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