mvp for 'top' page

ui/component/claimList/view.jsx

@@ -30,6 +30,7 @@ type Props = {
   showHiddenByUser: boolean,
   headerLabel?: string | Node,
   showUnresolvedClaims?: boolean,
+  renderProperties: ?(Claim) => Node,
 };
 
 export default function ClaimList(props: Props) {
@@ -49,6 +50,7 @@ export default function ClaimList(props: Props) {
     showHiddenByUser,
     headerLabel,
     showUnresolvedClaims,
+    renderProperties,
   } = props;
   const [scrollBottomCbMap, setScrollBottomCbMap] = useState({});
   const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
@@ -133,7 +135,7 @@ export default function ClaimList(props: Props) {
               uri={uri}
               type={type}
               showUnresolvedClaim={showUnresolvedClaims}
-              properties={type !== 'small' ? undefined : false}
+              properties={renderProperties || (type !== 'small' ? undefined : false)}
               showUserBlocked={showHiddenByUser}
               customShouldHide={(claim: StreamClaim) => {
                 // Hack to hide spee.ch thumbnail publishes

ui/component/claimListDiscover/view.jsx

@@ -13,11 +13,11 @@ import { toCapitalCase } from 'util/string';
 import I18nMessage from 'component/i18nMessage';
 
 const PAGE_SIZE = 20;
-const TIME_DAY = 'day';
+export const TIME_DAY = 'day';
-const TIME_WEEK = 'week';
+export const TIME_WEEK = 'week';
-const TIME_MONTH = 'month';
+export const TIME_MONTH = 'month';
-const TIME_YEAR = 'year';
+export const TIME_YEAR = 'year';
-const TIME_ALL = 'all';
+export const TIME_ALL = 'all';
 
 export const TYPE_TRENDING = 'trending';
 export const TYPE_TOP = 'top';
@@ -45,7 +45,12 @@ type Props = {
   hiddenNsfwMessage?: Node,
   channelIds?: Array<string>,
   defaultTypeSort?: string,
+  defaultTimeSort?: string,
+  defaultOrderBy?: Array<string>,
+  header?: Node,
   headerLabel?: string | Node,
+  name?: string,
+  renderProperties?: Claim => Node,
 };
 
 function ClaimListDiscover(props: Props) {
@@ -63,7 +68,12 @@ function ClaimListDiscover(props: Props) {
     hiddenUris,
     hiddenNsfwMessage,
     defaultTypeSort,
+    defaultTimeSort,
+    defaultOrderBy,
     headerLabel,
+    header,
+    name,
+    renderProperties,
   } = props;
   const didNavigateForward = history.action === 'PUSH';
   const [page, setPage] = useState(1);
@@ -71,7 +81,7 @@ function ClaimListDiscover(props: Props) {
   const [forceRefresh, setForceRefresh] = useState();
   const urlParams = new URLSearchParams(search);
   const typeSort = urlParams.get('type') || defaultTypeSort || TYPE_TRENDING;
-  const timeSort = urlParams.get('time') || TIME_WEEK;
+  const timeSort = urlParams.get('time') || defaultTimeSort || TIME_WEEK;
   const tagsInUrl = urlParams.get('t') || '';
   const options: {
     page_size: number,
@@ -83,9 +93,11 @@ function ClaimListDiscover(props: Props) {
     not_tags: Array<string>,
     order_by: Array<string>,
     release_time?: string,
+    name?: string,
   } = {
     page_size: PAGE_SIZE,
     page,
+    name,
     // no_totals makes it so the sdk doesn't have to calculate total number pages for pagination
     // it's faster, but we will need to remove it if we start using total_pages
     no_totals: true,
@@ -96,11 +108,12 @@ function ClaimListDiscover(props: Props) {
       !channelIds && hiddenUris && hiddenUris.length ? hiddenUris.map(hiddenUri => hiddenUri.split('#')[1]) : [],
     not_tags: !showNsfw ? MATURE_TAGS : [],
     order_by:
-      typeSort === TYPE_TRENDING
+      defaultOrderBy ||
+      (typeSort === TYPE_TRENDING
         ? ['trending_group', 'trending_mixed']
         : typeSort === TYPE_NEW
         ? ['release_time']
-        : ['effective_amount'], // Sort by top
+        : ['effective_amount']), // Sort by top
   };
 
   if (typeSort === TYPE_TOP && timeSort !== TIME_ALL) {
@@ -216,7 +229,7 @@ function ClaimListDiscover(props: Props) {
     }
   }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect, forceRefresh]);
 
-  const header = (
+  const defaultHeader = (
     <Fragment>
       {SEARCH_TYPES.map(type => (
         <Button
@@ -261,13 +274,14 @@ function ClaimListDiscover(props: Props) {
         id={claimSearchCacheQuery}
         loading={loading}
         uris={uris}
-        header={header}
+        header={header || defaultHeader}
         headerLabel={headerLabel}
         headerAltControls={meta}
         onScrollBottom={handleScrollBottom}
         page={page}
         pageSize={PAGE_SIZE}
         empty={noResults}
+        renderProperties={renderProperties}
       />
 
       <div className="card">

ui/component/claimPreview/view.jsx

@@ -49,7 +49,7 @@ type Props = {
   channelIsBlocked: boolean,
   isSubscribed: boolean,
   actions: boolean | Node | string | number,
-  properties: boolean | Node | string | number,
+  properties: boolean | Node | string | number | (Claim => Node),
   onClick?: any => any,
   hideBlock?: boolean,
   streamingUrl: ?string,
@@ -205,7 +205,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
       </li>
     );
   }
-
   if (!shouldFetch && showUnresolvedClaim && !isResolvingUri && claim === null) {
     return <AbandonedChannelPreview uri={uri} type />;
   }
@@ -284,7 +283,17 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                   )}
                 </React.Fragment>
               )}
-              {properties !== undefined ? properties : <ClaimTags uri={uri} type={type} />}
+              {claim && (
+                <React.Fragment>
+                  {typeof properties === 'function' ? (
+                    properties(claim)
+                  ) : properties !== undefined ? (
+                    properties
+                  ) : (
+                    <ClaimTags uri={uri} type={type} />
+                  )}
+                </React.Fragment>
+              )}
             </div>
           )}
         </div>

ui/component/fileDetails/view.jsx

@@ -54,6 +54,10 @@ class FileDetails extends PureComponent<Props> {
                 <td> {__('Content Type')}</td>
                 <td>{mediaType}</td>
               </tr>
+              <tr>
+                <td> {__('Bid Amount')}</td>
+                <td>{claim.amount} LBC</td>
+              </tr>
               {fileSize && (
                 <tr>
                   <td> {__('File Size')}</td>

ui/component/router/view.jsx

@@ -29,6 +29,7 @@ import SignInPage from 'page/signIn';
 import SignInVerifyPage from 'page/signInVerify';
 import ChannelsPage from 'page/channels';
 import EmbedWrapperPage from 'page/embedWrapper';
+import TopPage from 'page/top';
 
 // Tell the browser we are handling scroll restoration
 if ('scrollRestoration' in history) {
@@ -98,6 +99,7 @@ function AppRouter(props: Props) {
       <Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} />
       <Route path={`/$/${PAGES.AUTH_VERIFY}`} exact component={SignInVerifyPage} />
       <Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} />
+      <Route path={`/$/${PAGES.TOP}`} exact component={TopPage} />
       <Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} />
       <Route path={`/$/${PAGES.INVITE}/:referrer`} exact component={InvitedPage} />
 

ui/constants/pages.js

@@ -28,3 +28,4 @@ exports.WALLET = 'wallet';
 exports.BLOCKED = 'blocked';
 exports.CHANNELS = 'channels';
 exports.EMBED = 'embed';
+exports.TOP = 'top';

ui/page/search/view.jsx

@@ -1,5 +1,6 @@
 // @flow
 import * as ICONS from 'constants/icons';
+import * as PAGES from 'constants/pages';
 import React, { useEffect, Fragment } from 'react';
 import { regexInvalidURI } from 'lbry-redux';
 import ClaimPreview from 'component/claimPreview';
@@ -52,7 +53,18 @@ export default function SearchPage(props: Props) {
         {urlQuery && (
           <Fragment>
             <header className="search__header">
-              <ClaimUri uri={uriFromQuery} />
+              <div className="claim-preview__actions--header">
+                <ClaimUri uri={uriFromQuery} />
+                <Button
+                  className="media__uri--right"
+                  button="alt"
+                  label={__('View top claims for %normalized_uri%', {
+                    normalized_uri: uriFromQuery,
+                  })}
+                  navigate={`/$/${PAGES.TOP}?name=${modifiedUrlQuery}`}
+                  icon={ICONS.TOP}
+                />
+              </div>
               <div className="card">
                 <ClaimPreview uri={uriFromQuery} type="large" placeholder="publish" />
               </div>

ui/page/top/index.js

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import TopPage from './view';
+
+const select = (state, props) => {
+  const { search } = props.location;
+  const urlParams = new URLSearchParams(search);
+  const name = urlParams.get('name');
+
+  return {
+    name,
+  };
+};
+
+export default connect(select)(TopPage);

ui/page/top/view.jsx

@@ -0,0 +1,28 @@
+// @flow
+import React from 'react';
+import Page from 'component/page';
+import ClaimListDiscover from 'component/claimListDiscover';
+import { TYPE_TOP, TIME_ALL } from 'component/claimListDiscover/view';
+
+type Props = {
+  name: string,
+};
+
+function TopPage(props: Props) {
+  const { name } = props;
+
+  return (
+    <Page>
+      <ClaimListDiscover
+        name={name}
+        defaultTypeSort={TYPE_TOP}
+        defaultTimeSort={TIME_ALL}
+        defaultOrderBy={['effective_amount']}
+        renderProperties={claim => <span className="media__subtitle">{claim.meta.effective_amount} LBC</span>}
+        header={<span>{__('Top claims at lbry://%name%', { name })}</span>}
+      />
+    </Page>
+  );
+}
+
+export default TopPage;

ui/scss/component/_claim-list.scss

@@ -120,8 +120,6 @@
 
 .claim-preview--large {
   border: none;
-  padding: 0;
-  padding: var(--spacing-small);
 
   &:hover {
     background-color: transparent;
@@ -228,6 +226,10 @@
   width: 100%;
 }
 
+.claim-preview__actions--header {
+  @extend .claim-preview__actions;
+}
+
 .claim-preview__button {
   margin-left: 2rem;
 }

ui/scss/component/_media.scss

@@ -54,6 +54,11 @@
   text-overflow: ellipsis;
 }
 
+.media__uri--right {
+  @extend .media__uri;
+  right: 0;
+}
+
 .media__uri--large {
   margin-bottom: var(--spacing-medium);
 }