Merge pull request #5167 from lbryio/repostFromSearchRebase

New repost flow

package.json

@@ -139,7 +139,7 @@
     "imagesloaded": "^4.1.4",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#92a4263c908f6df5727c379a3b3348935891d806",
+    "lbry-redux": "lbryio/lbry-redux#664df6237d777d7cce31e58479bc98563ea98cb9",
     "lbryinc": "lbryio/lbryinc#eee2cb730ecec95a1344a755035755b0d4dad5cf",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",

static/app-strings.json

@@ -1527,6 +1527,9 @@
   "Explore": "Explore",
   "There is a bug... somewhere": "There is a bug... somewhere",
   "Try refreshing to fix the issue. If that doesn't work, email help@lbry.com for support.": "Try refreshing to fix the issue. If that doesn't work, email help@lbry.com for support.",
+  "No Results": "No Results",
+  "Content preview": "Content preview",
+  "Repost url": "Repost url",
   "Close sidebar - hide channels you are following": "Close sidebar - hide channels you are following",
   "Expand sidebar - view channels you are following.": "Expand sidebar - view channels you are following.",
   "--end--": "--end--"

ui/component/claimEffectiveAmount/view.jsx

@@ -14,7 +14,7 @@ function ClaimEffectiveAmount(props: Props) {
     return null;
   }
 
-  return <CreditAmount amount={Number(claim.meta.effective_amount)} />;
+  return <CreditAmount amount={Number(claim.meta.effective_amount || claim.amount)} />;
 }
 
 export default ClaimEffectiveAmount;

ui/component/claimPreview/claim-preview-loading.jsx

@@ -0,0 +1,30 @@
+// @flow
+import classnames from 'classnames';
+import React from 'react';
+
+type Props = {
+  isChannel: boolean,
+  type: string,
+};
+
+function ClaimPreviewLoading(props: Props) {
+  const { isChannel, type } = props;
+  return (
+    <li
+      className={classnames('claim-preview__wrapper', {
+        'claim-preview__wrapper--channel': isChannel && type !== 'inline',
+        'claim-preview__wrapper--inline': type === 'inline',
+      })}
+    >
+      <div className={classnames('claim-preview', { 'claim-preview--large': type === 'large' })}>
+        <div className="placeholder media__thumb" />
+        <div className="placeholder__wrapper">
+          <div className="placeholder claim-preview__title" />
+          <div className="placeholder media__subtitle" />
+        </div>
+      </div>
+    </li>
+  );
+}
+
+export default ClaimPreviewLoading;

ui/component/claimPreview/claim-preview-no-content.jsx

@@ -0,0 +1,32 @@
+// @flow
+import classnames from 'classnames';
+import React from 'react';
+import Empty from 'component/common/empty';
+
+type Props = {
+  isChannel: boolean,
+  type: string,
+};
+
+function ClaimPreviewNoContent(props: Props) {
+  const { isChannel, type } = props;
+  return (
+    <li
+      className={classnames('claim-preview__wrapper', {
+        'claim-preview__wrapper--channel': isChannel && type !== 'inline',
+        'claim-preview__wrapper--inline': type === 'inline',
+      })}
+    >
+      <div
+        className={classnames('claim-preview', {
+          'claim-preview--large': type === 'large',
+          'claim-preview__empty': true,
+        })}
+      >
+        <Empty text={__('Nothing found here. Like big tech ethics.')} />
+      </div>
+    </li>
+  );
+}
+
+export default ClaimPreviewNoContent;

ui/component/claimPreview/claim-preview-no-mature.jsx

@@ -0,0 +1,35 @@
+// @flow
+import classnames from 'classnames';
+import React from 'react';
+import Empty from 'component/common/empty';
+
+type Props = {
+  isChannel: boolean,
+  type: string,
+};
+
+function ClaimPreviewNoMature(props: Props) {
+  const { isChannel, type } = props;
+  return (
+    <li
+      className={classnames('claim-preview__wrapper', {
+        'claim-preview__wrapper--channel': isChannel && type !== 'inline',
+        'claim-preview__wrapper--inline': type === 'inline',
+      })}
+    >
+      <div className={classnames('claim-preview', { 'claim-preview--large': type === 'large' })}>
+        <div className="media__thumb" />
+        <div
+          className={classnames('claim-preview', {
+            'claim-preview--large': type === 'large',
+            'claim-preview__empty': true,
+          })}
+        >
+          <Empty text={__('Mature content hidden by your preferences')} />
+        </div>
+      </div>
+    </li>
+  );
+}
+
+export default ClaimPreviewNoMature;

ui/component/claimPreview/view.jsx

@@ -22,6 +22,9 @@ import ClaimRepostAuthor from 'component/claimRepostAuthor';
 import FileDownloadLink from 'component/fileDownloadLink';
 import AbandonedChannelPreview from 'component/abandonedChannelPreview';
 import PublishPending from 'component/publishPending';
+import ClaimPreviewLoading from './claim-preview-loading';
+import ClaimPreviewNoMature from './claim-preview-no-mature';
+import ClaimPreviewNoContent from './claim-preview-no-content';
 
 type Props = {
   uri: string,
@@ -58,6 +61,7 @@ type Props = {
   getFile: string => void,
   customShouldHide?: Claim => boolean,
   showUnresolvedClaim?: boolean,
+  showNullPlaceholder?: boolean,
   includeSupportAction?: boolean,
   hideActions?: boolean,
   renderActions?: Claim => ?Node,
@@ -94,6 +98,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     streamingUrl,
     customShouldHide,
     showUnresolvedClaim,
+    showNullPlaceholder,
     includeSupportAction,
     hideActions = false,
     renderActions,
@@ -195,29 +200,22 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     }
   }, [isValid, isResolvingUri, uri, resolveUri, shouldFetch]);
 
-  if (shouldHide) {
+  if (shouldHide && !showNullPlaceholder) {
     return null;
   }
 
-  if (placeholder === 'loading' || claim === undefined || (isResolvingUri && !claim)) {
-    return (
-      <li
-        disabled
-        className={classnames('claim-preview__wrapper', {
-          'claim-preview__wrapper--channel': isChannel && type !== 'inline',
-          'claim-preview__wrapper--inline': type === 'inline',
-        })}
-      >
-        <div className={classnames('claim-preview', { 'claim-preview--large': type === 'large' })}>
-          <div className="placeholder media__thumb" />
-          <div className="placeholder__wrapper">
-            <div className="placeholder claim-preview__title" />
-            <div className="placeholder media__subtitle" />
-          </div>
-        </div>
-      </li>
-    );
+  if (placeholder === 'loading' || (isResolvingUri && !claim)) {
+    return <ClaimPreviewLoading isChannel={isChannel} type={type} />;
   }
+
+  if (claim && showNullPlaceholder && shouldHide && nsfw) {
+    return <ClaimPreviewNoMature isChannel={isChannel} type={type} />;
+  }
+
+  if (!claim && showNullPlaceholder) {
+    return <ClaimPreviewNoContent isChannel={isChannel} type={type} />;
+  }
+
   if (!shouldFetch && showUnresolvedClaim && !isResolvingUri && claim === null) {
     return <AbandonedChannelPreview uri={uri} type />;
   }

ui/component/commentsList/view.jsx

@@ -12,6 +12,7 @@ import CommentCreate from 'component/commentCreate';
 import usePersistedState from 'effects/use-persisted-state';
 import { ENABLE_COMMENT_REACTIONS } from 'config';
 import { sortComments } from 'util/comments';
+import Empty from 'component/common/empty';
 
 type Props = {
   comments: Array<Comment>,
@@ -58,7 +59,7 @@ function CommentList(props: Props) {
     Boolean(reactionsById) || !ENABLE_COMMENT_REACTIONS
   );
   const linkedCommentId = linkedComment && linkedComment.comment_id;
-  const hasNoComments = totalComments === 0;
+  const hasNoComments = !totalComments;
   const moreBelow = totalComments - end > 0;
   const isMyComment = (channelId: string): boolean => {
     if (myChannels != null && channelId != null) {
@@ -210,7 +211,7 @@ function CommentList(props: Props) {
         <>
           <CommentCreate uri={uri} />
 
-          {!isFetchingComments && hasNoComments && <div className="main--empty">{__('Be the first to comment!')}</div>}
+          {!isFetchingComments && hasNoComments && <Empty text={__('That was pretty deep. What do you think?')} />}
 
           <ul className="comments" ref={commentRef}>
             {comments &&

ui/component/common/empty.jsx

@@ -0,0 +1,30 @@
+// @flow
+import React from 'react';
+
+type Props = {
+  text: ?string,
+};
+
+class Empty extends React.PureComponent<Props> {
+  static defaultProps = {
+    text: '',
+  };
+
+  render() {
+    const { text } = this.props;
+
+    return (
+      <div className="empty__wrap">
+        <div>
+          {text && (
+            <div className="empty__content">
+              <p className="empty__text">{text}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Empty;

ui/component/fileActions/view.jsx

@@ -74,7 +74,7 @@ function FileActions(props: Props) {
       push(`/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`);
       doToast({ message: __('A channel is required to repost on %SITE_NAME%', { SITE_NAME }) });
     } else {
-      openModal(MODALS.REPOST, { uri });
+      push(`/$/${PAGES.REPOST_NEW}?from=${encodeURIComponent(uri)}`);
     }
   }
 

ui/component/header/view.jsx

@@ -205,7 +205,7 @@ const Header = (props: Props) => {
               icon={ICONS.ARROW_LEFT}
             />
             {backTitle && <h1 className="header__auth-title">{isMobile ? simpleBackTitle || backTitle : backTitle}</h1>}
-            {authenticated ? (
+            {authenticated || !IS_WEB ? (
               <Button
                 aria-label={__('Your wallet')}
                 navigate={`/$/${PAGES.WALLET}`}

ui/component/repostCreate/index.js

@@ -0,0 +1,45 @@
+import { connect } from 'react-redux';
+import { doHideModal } from 'redux/actions/app';
+import {
+  makeSelectClaimForUri,
+  makeSelectTitleForUri,
+  selectBalance,
+  selectMyChannelClaims,
+  doRepost,
+  selectRepostError,
+  selectRepostLoading,
+  doClearRepostError,
+  selectMyClaimsWithoutChannels,
+  doCheckPublishNameAvailability,
+  doCheckPendingClaims,
+  makeSelectEffectiveAmountForUri,
+  makeSelectIsUriResolving,
+} from 'lbry-redux';
+import { doToast } from 'redux/actions/notifications';
+import RepostCreate from './view';
+
+const select = (state, props) => ({
+  channels: selectMyChannelClaims(state),
+  claim: makeSelectClaimForUri(props.uri)(state),
+  passedRepostClaim: makeSelectClaimForUri(props.name)(state),
+  passedRepostAmount: makeSelectEffectiveAmountForUri(props.name)(state),
+  enteredContentClaim: makeSelectClaimForUri(props.contentUri)(state),
+  enteredRepostClaim: makeSelectClaimForUri(props.repostUri)(state),
+  enteredRepostAmount: makeSelectEffectiveAmountForUri(props.repostUri)(state),
+  title: makeSelectTitleForUri(props.uri)(state),
+  balance: selectBalance(state),
+  error: selectRepostError(state),
+  reposting: selectRepostLoading(state),
+  myClaims: selectMyClaimsWithoutChannels(state),
+  isResolvingPassedRepost: props.name && makeSelectIsUriResolving(`lbry://${props.name}`)(state),
+  isResolvingEnteredRepost: props.repostUri && makeSelectIsUriResolving(`lbry://${props.repostUri}`)(state),
+});
+
+export default connect(select, {
+  doHideModal,
+  doRepost,
+  doClearRepostError,
+  doToast,
+  doCheckPublishNameAvailability,
+  doCheckPendingClaims,
+})(RepostCreate);

ui/component/repostCreate/view.jsx

@@ -0,0 +1,415 @@
+// @flow
+
+import * as ICONS from 'constants/icons';
+import { CHANNEL_NEW, MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR } from 'constants/claim';
+import React from 'react';
+import { useHistory } from 'react-router';
+import Card from 'component/common/card';
+import Button from 'component/button';
+import SelectChannel from 'component/selectChannel';
+import { FormField } from 'component/common/form';
+import { parseURI, isNameValid, creditsToString, isURIValid, normalizeURI } from 'lbry-redux';
+import usePersistedState from 'effects/use-persisted-state';
+import analytics from 'analytics';
+import LbcSymbol from 'component/common/lbc-symbol';
+import ClaimPreview from 'component/claimPreview';
+import { URL as SITE_URL, URL_LOCAL, URL_DEV } from 'config';
+import HelpLink from 'component/common/help-link';
+
+type Props = {
+  doToast: ({ message: string }) => void,
+  doClearRepostError: () => void,
+  doRepost: StreamRepostOptions => Promise<*>,
+  title: string,
+  claim?: StreamClaim,
+  enteredContentClaim?: StreamClaim,
+  balance: number,
+  channels: ?Array<ChannelClaim>,
+  doCheckPublishNameAvailability: string => Promise<*>,
+  error: ?string,
+  reposting: boolean,
+  uri: string,
+  name: string,
+  contentUri: string,
+  setRepostUri: string => void,
+  setContentUri: string => void,
+  doCheckPendingClaims: () => void,
+  redirectUri?: string,
+  passedRepostAmount: number,
+  enteredRepostAmount: number,
+  isResolvingPassedRepost: boolean,
+  isResolvingEnteredRepost: boolean,
+};
+
+function RepostCreate(props: Props) {
+  const {
+    redirectUri,
+    doToast,
+    doClearRepostError,
+    doRepost,
+    claim,
+    enteredContentClaim,
+    balance,
+    channels,
+    reposting,
+    doCheckPublishNameAvailability,
+    uri, // ?from
+    name, // ?to
+    contentUri,
+    setRepostUri,
+    setContentUri,
+    doCheckPendingClaims,
+    enteredRepostAmount,
+    passedRepostAmount,
+    isResolvingPassedRepost,
+    isResolvingEnteredRepost,
+  } = props;
+
+  const defaultName = name || (claim && claim.name) || '';
+  const contentClaimId = claim && claim.claim_id;
+  const enteredClaimId = enteredContentClaim && enteredContentClaim.claim_id;
+  const [repostChannel, setRepostChannel] = usePersistedState('repost-channel', 'anonymous');
+
+  const [repostBid, setRepostBid] = React.useState(0.01);
+  const [repostBidError, setRepostBidError] = React.useState(undefined);
+  const [takeoverAmount, setTakeoverAmount] = React.useState(0);
+  const [enteredRepostName, setEnteredRepostName] = React.useState(defaultName);
+  const [available, setAvailable] = React.useState(true);
+  const [enteredContent, setEnteredContentUri] = React.useState(undefined);
+  const [contentError, setContentError] = React.useState('');
+
+  const { replace, goBack } = useHistory();
+  const resolvingRepost = isResolvingEnteredRepost || isResolvingPassedRepost;
+  const repostUrlName = `lbry://${
+    !repostChannel || repostChannel === CHANNEL_NEW || repostChannel === 'anonymous' ? '' : `${repostChannel}/`
+  }`;
+
+  const contentFirstRender = React.useRef(true);
+  const setAutoRepostBid = amount => {
+    if (balance > amount) {
+      if (amount > 5) {
+        setRepostBid(Number(amount.toFixed(2)));
+      } else {
+        setRepostBid(5);
+      }
+    } else if (balance) {
+      setRepostBid(0.01);
+    }
+  };
+
+  function getSearchUri(value) {
+    const WEB_DEV_PREFIX = `${URL_DEV}/`;
+    const WEB_LOCAL_PREFIX = `${URL_LOCAL}/`;
+    const WEB_PROD_PREFIX = `${SITE_URL}/`;
+    const ODYSEE_PREFIX = `https://odysee.com/`;
+    const includesLbryTvProd = value.includes(WEB_PROD_PREFIX);
+    const includesOdysee = value.includes(ODYSEE_PREFIX);
+    const includesLbryTvLocal = value.includes(WEB_LOCAL_PREFIX);
+    const includesLbryTvDev = value.includes(WEB_DEV_PREFIX);
+    const wasCopiedFromWeb = includesLbryTvDev || includesLbryTvLocal || includesLbryTvProd || includesOdysee;
+    const isLbryUrl = value.startsWith('lbry://') && value !== 'lbry://';
+    const error = '';
+
+    const addLbryIfNot = term => {
+      return term.startsWith('lbry://') ? term : `lbry://${term}`;
+    };
+    if (wasCopiedFromWeb) {
+      let prefix = WEB_PROD_PREFIX;
+      if (includesLbryTvLocal) prefix = WEB_LOCAL_PREFIX;
+      if (includesLbryTvDev) prefix = WEB_DEV_PREFIX;
+      if (includesOdysee) prefix = ODYSEE_PREFIX;
+
+      let query = (value && value.slice(prefix.length).replace(/:/g, '#')) || '';
+      try {
+        const lbryUrl = `lbry://${query}`;
+        parseURI(lbryUrl);
+        return [lbryUrl, null];
+      } catch (e) {
+        return [query, 'error'];
+      }
+    }
+
+    if (!isLbryUrl) {
+      if (value.startsWith('@')) {
+        if (isNameValid(value.slice(1))) {
+          return [value, null];
+        } else {
+          return [value, error];
+        }
+      }
+      return [addLbryIfNot(value), null];
+    } else {
+      try {
+        const isValid = isURIValid(value);
+        if (isValid) {
+          let uri;
+          try {
+            uri = normalizeURI(value);
+          } catch (e) {
+            return [value, null];
+          }
+          return [uri, null];
+        } else {
+          return [value, null];
+        }
+      } catch (e) {
+        return [value, 'error'];
+      }
+    }
+  }
+  // repostName
+  let repostNameError;
+  if (!enteredRepostName) {
+    repostNameError = __('A name is required');
+  } else if (!isNameValid(enteredRepostName, false)) {
+    repostNameError = INVALID_NAME_ERROR;
+  } else if (!available) {
+    repostNameError = __('You already have a claim with this name.');
+  }
+
+  // contentName
+  let contentNameError;
+  if (!enteredContent && enteredContent !== undefined) {
+    contentNameError = __('A name is required');
+  }
+
+  // repostChannel
+  const channelStrings = channels && channels.map(channel => channel.permanent_url).join(',');
+  React.useEffect(() => {
+    if (!repostChannel && channelStrings) {
+      const channels = channelStrings.split(',');
+      const newChannelUrl = channels[0];
+      const { claimName } = parseURI(newChannelUrl);
+      setRepostChannel(claimName);
+    }
+  }, [channelStrings]);
+
+  React.useEffect(() => {
+    if (enteredRepostName && isNameValid(enteredRepostName, false)) {
+      doCheckPublishNameAvailability(enteredRepostName).then(r => setAvailable(r));
+    }
+  }, [enteredRepostName, doCheckPublishNameAvailability]);
+
+  // takeover amount, bid suggestion
+  React.useEffect(() => {
+    const repostTakeoverAmount = Number(enteredRepostAmount)
+      ? Number(enteredRepostAmount) + 0.01
+      : Number(passedRepostAmount) + 0.01;
+
+    if (repostTakeoverAmount) {
+      setTakeoverAmount(Number(repostTakeoverAmount.toFixed(2)));
+      setAutoRepostBid(repostTakeoverAmount);
+    }
+  }, [setTakeoverAmount, enteredRepostAmount, passedRepostAmount]);
+
+  // repost bid error
+  React.useEffect(() => {
+    let rBidError;
+    if (repostBid === 0) {
+      rBidError = __('Deposit cannot be 0');
+    } else if (balance === repostBid) {
+      rBidError = __('Please decrease your deposit to account for transaction fees');
+    } else if (balance < repostBid) {
+      rBidError = __('Deposit cannot be higher than your balance');
+    } else if (repostBid < MINIMUM_PUBLISH_BID) {
+      rBidError = __('Your deposit must be higher');
+    }
+    setRepostBidError(rBidError);
+  }, [setRepostBidError, repostBidError, repostBid]);
+
+  // setContentUri given enteredUri
+  React.useEffect(() => {
+    if (!enteredContent && !contentFirstRender.current) {
+      setContentError(__('A name is required'));
+    }
+    if (enteredContent) {
+      contentFirstRender.current = false;
+      const [searchContent, error] = getSearchUri(enteredContent);
+      if (error) {
+        setContentError(__('Something not quite right..'));
+      } else {
+        setContentError('');
+      }
+      try {
+        const { streamName, channelName, isChannel } = parseURI(searchContent);
+        if (!isChannel && streamName && isNameValid(streamName)) {
+          // contentNameValid = true;
+          setContentUri(searchContent);
+        } else if (isChannel && channelName && isNameValid(channelName)) {
+          // contentNameValid = true;
+          setContentUri(searchContent);
+        }
+      } catch (e) {
+        if (enteredContent !== '@') setContentError('');
+        setContentUri(``);
+      }
+    }
+  }, [enteredContent, setContentUri, setContentError, parseURI, isNameValid]);
+
+  // setRepostName
+  React.useEffect(() => {
+    if (enteredRepostName) {
+      let isValid = false;
+      try {
+        parseURI(enteredRepostName);
+        isValid = true;
+      } catch (e) {
+        isValid = false;
+      }
+      if (isValid) {
+        setRepostUri(enteredRepostName);
+      }
+    }
+  }, [enteredRepostName, setRepostUri, parseURI]);
+
+  const repostClaimId = contentClaimId || enteredClaimId;
+
+  const getRedirect = (entered, passed, redirect) => {
+    if (redirect) {
+      return redirect;
+    } else if (entered) {
+      try {
+        const { claimName } = parseURI(entered);
+        return `/${claimName}`;
+      } catch (e) {
+        return '/';
+      }
+    } else if (passed) {
+      try {
+        const { claimName } = parseURI(passed);
+        return `/${claimName}`;
+      } catch (e) {
+        return '/';
+      }
+    } else {
+      return '/';
+    }
+  };
+
+  function handleSubmit() {
+    const channelToRepostTo = channels && channels.find(channel => channel.name === repostChannel);
+    if (enteredRepostName && repostBid && repostClaimId) {
+      doRepost({
+        name: enteredRepostName,
+        bid: creditsToString(repostBid),
+        channel_id: channelToRepostTo ? channelToRepostTo.claim_id : undefined,
+        claim_id: repostClaimId,
+      }).then((repostClaim: StreamClaim) => {
+        doCheckPendingClaims();
+        analytics.apiLogPublish(repostClaim);
+        doToast({ message: __('Woohoo! Successfully reposted this claim.') });
+        replace(getRedirect(contentUri, uri, redirectUri));
+      });
+    }
+  }
+
+  function cancelIt() {
+    doClearRepostError();
+    goBack();
+  }
+
+  return (
+    <>
+      <Card
+        actions={
+          <div>
+            {uri && (
+              <fieldset-section>
+                <ClaimPreview key={uri} uri={uri} actions={''} type={'inline'} showNullPlaceholder />
+              </fieldset-section>
+            )}
+            {!uri && name && (
+              <>
+                <FormField
+                  label={'Content to repost'}
+                  type="text"
+                  name="content_url"
+                  value={enteredContent}
+                  error={contentError}
+                  onChange={event => setEnteredContentUri(event.target.value)}
+                  placeholder={__('Enter a name or %domain% URL', { domain: SITE_URL })}
+                />
+              </>
+            )}
+            {!uri && (
+              <fieldset-section>
+                <ClaimPreview key={contentUri} uri={contentUri} actions={''} type={'large'} showNullPlaceholder />
+              </fieldset-section>
+            )}
+
+            <React.Fragment>
+              <fieldset-section>
+                <fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
+                  <fieldset-section>
+                    <label htmlFor="auth_first_channel">
+                      {repostNameError ? (
+                        <span className="error__text">{repostNameError}</span>
+                      ) : (
+                        <span>
+                          {__('Repost URL')}
+                          <HelpLink href="https://lbry.com/faq/naming" />
+                        </span>
+                      )}
+                    </label>
+                    <div className="form-field__prefix">{repostUrlName}</div>
+                  </fieldset-section>
+                  <FormField
+                    type="text"
+                    name="repost_name"
+                    value={enteredRepostName}
+                    onChange={event => setEnteredRepostName(event.target.value)}
+                    placeholder={__('Do a thing')}
+                  />
+                </fieldset-group>
+              </fieldset-section>
+              <SelectChannel
+                label={__('Channel to repost on')}
+                hideNew
+                channel={repostChannel}
+                onChannelChange={newChannel => setRepostChannel(newChannel)}
+              />
+
+              <FormField
+                type="number"
+                name="repost_bid"
+                min="0"
+                step="any"
+                placeholder="0.123"
+                className="form-field--price-amount"
+                label={<LbcSymbol postfix={__('Support')} size={14} />}
+                value={repostBid}
+                error={repostBidError}
+                helper={__('Winning amount: %amount%', {
+                  amount: Number(takeoverAmount).toFixed(2),
+                })}
+                disabled={!enteredRepostName || resolvingRepost}
+                onChange={event => setRepostBid(event.target.value)}
+                onWheel={e => e.stopPropagation()}
+              />
+            </React.Fragment>
+
+            <div className="section__actions">
+              <Button
+                icon={ICONS.REPOST}
+                disabled={
+                  resolvingRepost ||
+                  reposting ||
+                  repostBidError ||
+                  repostNameError ||
+                  ((!uri || enteredContent) && contentNameError) ||
+                  (!uri && !enteredContentClaim)
+                }
+                button="primary"
+                label={reposting ? __('Reposting') : __('Repost')}
+                onClick={handleSubmit}
+              />
+              <Button button="link" label={__('Cancel')} onClick={cancelIt} />
+            </div>
+          </div>
+        }
+      />
+    </>
+  );
+}
+
+export default RepostCreate;

ui/component/router/view.jsx

@@ -43,6 +43,7 @@ import CreatorDashboard from 'page/creatorDashboard';
 import RewardsVerifyPage from 'page/rewardsVerify';
 import CheckoutPage from 'page/checkoutPage';
 import ChannelNew from 'page/channelNew';
+import RepostNew from 'page/repost';
 import BuyPage from 'page/buy';
 import NotificationsPage from 'page/notifications';
 import SignInWalletPasswordPage from 'page/signInWalletPassword';
@@ -262,6 +263,7 @@ function AppRouter(props: Props) {
       />
       <PrivateRoute {...props} path={`/$/${PAGES.INVITE}`} component={InvitePage} />
       <PrivateRoute {...props} path={`/$/${PAGES.CHANNEL_NEW}`} component={ChannelNew} />
+      <PrivateRoute {...props} path={`/$/${PAGES.REPOST_NEW}`} component={RepostNew} />
       <PrivateRoute {...props} path={`/$/${PAGES.UPLOADS}`} component={FileListPublished} />
       <PrivateRoute {...props} path={`/$/${PAGES.CREATOR_DASHBOARD}`} component={CreatorDashboard} />
       <PrivateRoute {...props} path={`/$/${PAGES.UPLOAD}`} component={PublishPage} />

ui/component/searchTopClaim/index.js

@@ -1,12 +1,22 @@
 import { connect } from 'react-redux';
-import { doResolveUris } from 'lbry-redux';
+import { doResolveUris, doClearPublish, doPrepareEdit, selectPendingIds } from 'lbry-redux';
 import { makeSelectWinningUriForQuery } from 'redux/selectors/search';
 import SearchTopClaim from './view';
+import { push } from 'connected-react-router';
+import * as PAGES from 'constants/pages';
 
 const select = (state, props) => ({
   winningUri: makeSelectWinningUriForQuery(props.query)(state),
+  pendingIds: selectPendingIds(state),
 });
 
-export default connect(select, {
-  doResolveUris,
-})(SearchTopClaim);
+const perform = dispatch => ({
+  beginPublish: name => {
+    dispatch(doClearPublish());
+    dispatch(doPrepareEdit({ name }));
+    dispatch(push(`/$/${PAGES.UPLOAD}`));
+  },
+  doResolveUris: uris => dispatch(doResolveUris(uris)),
+});
+
+export default connect(select, perform)(SearchTopClaim);

ui/component/searchTopClaim/view.jsx

@@ -6,8 +6,11 @@ import { parseURI } from 'lbry-redux';
 import ClaimPreview from 'component/claimPreview';
 import Button from 'component/button';
 import ClaimEffectiveAmount from 'component/claimEffectiveAmount';
-import HelpLink from 'component/common/help-link';
 import I18nMessage from 'component/i18nMessage';
+import { useHistory } from 'react-router';
+import LbcSymbol from 'component/common/lbc-symbol';
+import { DOMAIN } from 'config';
+import Yrbl from 'component/yrbl';
 
 type Props = {
   query: string,
@@ -15,20 +18,26 @@ type Props = {
   doResolveUris: (Array<string>) => void,
   hideLink?: boolean,
   setChannelActive: boolean => void,
+  beginPublish: string => void,
+  pendingIds: Array<string>,
 };
 
 export default function SearchTopClaim(props: Props) {
-  const { doResolveUris, query = '', winningUri, hideLink = false, setChannelActive } = props;
+  const { doResolveUris, query = '', winningUri, hideLink = false, setChannelActive, beginPublish } = props;
   const uriFromQuery = `lbry://${query}`;
-
+  const { push } = useHistory();
+  let name;
   let channelUriFromQuery;
   let winningUriIsChannel;
   try {
-    const { isChannel } = parseURI(uriFromQuery);
+    const { isChannel, streamName, channelName } = parseURI(uriFromQuery);
     const { isChannel: winnerIsChannel } = parseURI(winningUri);
     winningUriIsChannel = winnerIsChannel;
     if (!isChannel) {
       channelUriFromQuery = `lbry://@${query}`;
+      name = streamName;
+    } else {
+      name = channelName;
     }
   } catch (e) {}
 
@@ -51,33 +60,68 @@ export default function SearchTopClaim(props: Props) {
     }
   }, [doResolveUris, uriFromQuery, channelUriFromQuery]);
 
-  if (!winningUri) {
-    return null;
-  }
-
   return (
     <section className="search">
       <header className="search__header">
-        <div className="claim-preview__actions--header">
-          <span className="media__uri">
-            {__('Most supported')}
-            <HelpLink href="https://lbry.com/faq/tipping" />
-          </span>
-        </div>
-        <div className="card">
-          <ClaimPreview
-            hideRepostLabel
-            uri={winningUri}
-            type="large"
-            placeholder="publish"
-            properties={claim => (
-              <span className="claim-preview__custom-properties">
-                <ClaimEffectiveAmount uri={winningUri} />
-              </span>
-            )}
-          />
-        </div>
-        {!hideLink && (
+        {winningUri && (
+          <div className="claim-preview__actions--header">
+            <a
+              className="media__uri"
+              href="https://lbry.com/faq/trending"
+              title={__('Learn more about LBRY Credits on %DOMAIN%', { DOMAIN })}
+            >
+              <I18nMessage
+                tokens={{
+                  lbc: <LbcSymbol />,
+                }}
+              >
+                Most supported %lbc%
+              </I18nMessage>
+            </a>
+          </div>
+        )}
+        {winningUri && (
+          <div className="card">
+            <ClaimPreview
+              hideRepostLabel
+              uri={winningUri}
+              type="large"
+              placeholder="publish"
+              properties={claim => (
+                <span className="claim-preview__custom-properties">
+                  <ClaimEffectiveAmount uri={winningUri} />
+                </span>
+              )}
+            />
+          </div>
+        )}
+        {!winningUri && uriFromQuery && (
+          <div className="empty empty--centered">
+            <Yrbl
+              type="happy"
+              title={__('Whoa!')}
+              small
+              subtitle={
+                <I18nMessage
+                  tokens={{
+                    repost: (
+                      <Button
+                        button="link"
+                        onClick={() => push(`/$/${PAGES.REPOST_NEW}?to=${name}`)}
+                        label={__('Repost')}
+                      />
+                    ),
+                    publish: <Button button="link" onClick={() => beginPublish(name)} label={'publish'} />,
+                    name: <strong>name</strong>,
+                  }}
+                >
+                  You have found the edge of the internet. %repost% or %publish% your stuff here to claim this spot.
+                </I18nMessage>
+              }
+            />
+          </div>
+        )}
+        {!hideLink && winningUri && (
           <div className="section__actions--between section__actions--no-margin">
             <span />
             <Button

ui/component/yrbl/index.jsx

@@ -11,6 +11,7 @@ type Props = {
   className?: string,
   actions?: Node,
   alwaysShow?: boolean,
+  small: boolean,
 };
 
 const yrblTypes = {
@@ -24,7 +25,7 @@ export default class extends React.PureComponent<Props> {
   };
 
   render() {
-    const { title, subtitle, type, className, actions, alwaysShow = false } = this.props;
+    const { title, subtitle, type, className, actions, small, alwaysShow = false } = this.props;
 
     const image = yrblTypes[type];
 
@@ -32,7 +33,7 @@ export default class extends React.PureComponent<Props> {
       <div className="yrbl__wrap">
         <img
           alt="Friendly gerbil"
-          className={classnames('yrbl', className, {
+          className={classnames(small ? 'yrbl--small' : 'yrbl', className, {
             'yrbl--always-show': alwaysShow,
           })}
           src={`${image}`}

ui/constants/pages.js

@@ -19,6 +19,7 @@ exports.GET_CREDITS = 'getcredits';
 exports.REPORT = 'report';
 exports.REWARDS = 'rewards';
 exports.REWARDS_VERIFY = 'rewards/verify';
+exports.REPOST_NEW = 'repost';
 exports.SEND = 'send';
 exports.SETTINGS = 'settings';
 exports.SETTINGS_NOTIFICATIONS = 'settings/notifications';

ui/modal/modalRepost/view.jsx

@@ -12,7 +12,7 @@ import { parseURI, isNameValid, creditsToString } from 'lbry-redux';
 import usePersistedState from 'effects/use-persisted-state';
 import I18nMessage from 'component/i18nMessage';
 import analytics from 'analytics';
-import LbcSymbol from '../../component/common/lbc-symbol';
+import LbcSymbol from 'component/common/lbc-symbol';
 
 type Props = {
   doHideModal: () => void,

ui/page/publish/view.jsx

@@ -6,7 +6,6 @@ import YrblWalletEmpty from 'component/yrblWalletEmpty';
 
 type Props = {
   balance: number,
-  totalRewardValue: number,
 };
 
 function PublishPage(props: Props) {

ui/page/repost/index.js

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+
+import { doResolveUri, selectBalance } from 'lbry-redux';
+
+import RepostPage from './view';
+
+const select = (state, props) => ({
+  balance: selectBalance(state),
+});
+
+const perform = dispatch => ({
+  resolveUri: uri => dispatch(doResolveUri(uri)),
+});
+
+export default connect(select, perform)(RepostPage);

ui/page/repost/view.jsx

@@ -0,0 +1,77 @@
+// @flow
+import React from 'react';
+import Page from 'component/page';
+import { useHistory } from 'react-router';
+import RepostCreate from 'component/repostCreate';
+import YrblWalletEmpty from 'component/yrblWalletEmpty';
+import useThrottle from 'effects/use-throttle';
+import classnames from 'classnames';
+
+type Props = {
+  balance: number,
+  resolveUri: string => void,
+};
+function RepostPage(props: Props) {
+  const { balance, resolveUri } = props;
+
+  const REPOST_FROM = 'from';
+  const REPOST_TO = 'to';
+  const REDIRECT = 'redirect';
+  const {
+    location: { search },
+  } = useHistory();
+
+  const urlParams = new URLSearchParams(search);
+  const repostFrom = urlParams.get(REPOST_FROM);
+  const redirectUri = urlParams.get(REDIRECT);
+  const repostTo = urlParams.get(REPOST_TO);
+  const [contentUri, setContentUri] = React.useState('');
+  const [repostUri, setRepostUri] = React.useState('');
+  const throttledContentValue = useThrottle(contentUri, 500);
+  const throttledRepostValue = useThrottle(repostUri, 500);
+
+  React.useEffect(() => {
+    if (throttledContentValue) {
+      resolveUri(throttledContentValue);
+    }
+  }, [throttledContentValue, resolveUri]);
+
+  React.useEffect(() => {
+    if (throttledRepostValue) {
+      resolveUri(throttledRepostValue);
+    }
+  }, [throttledRepostValue, resolveUri]);
+
+  React.useEffect(() => {
+    if (repostTo) {
+      resolveUri(repostTo);
+    }
+  }, [repostTo, resolveUri]);
+
+  const decodedFrom = repostFrom && decodeURIComponent(repostFrom);
+  return (
+    <Page
+      noFooter
+      noSideNavigation
+      backout={{
+        title: __('Repost'),
+        backLabel: __('Back'),
+      }}
+    >
+      {balance === 0 && <YrblWalletEmpty />}
+      <div className={classnames({ 'card--disabled': balance === 0 })}>
+        <RepostCreate
+          uri={decodedFrom}
+          name={repostTo}
+          redirectUri={redirectUri}
+          repostUri={repostUri}
+          contentUri={contentUri}
+          setContentUri={setContentUri}
+          setRepostUri={setRepostUri}
+        />
+      </div>
+    </Page>
+  );
+}
+
+export default RepostPage;

ui/page/search/view.jsx

@@ -11,6 +11,7 @@ import Ads from 'web/component/ads';
 import SearchTopClaim from 'component/searchTopClaim';
 import { formatLbryUrlForWeb } from 'util/url';
 import { useHistory } from 'react-router';
+import ClaimPreview from 'component/claimPreview';
 
 type AdditionalOptions = {
   isBackgroundSearch: boolean,
@@ -97,7 +98,6 @@ export default function SearchPage(props: Props) {
         {urlQuery && (
           <>
             {isValid && <SearchTopClaim query={modifiedUrlQuery} />}
-
             <ClaimList
               uris={uris}
               loading={isSearching}
@@ -121,6 +121,7 @@ export default function SearchPage(props: Props) {
                 </>
               }
             />
+            {isSearching && new Array(5).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}
 
             <div className="main--empty help">{__('These search results are provided by LBRY, Inc.')}</div>
           </>

ui/page/top/index.js

@@ -1,5 +1,8 @@
 import { connect } from 'react-redux';
 import TopPage from './view';
+import { doClearPublish, doPrepareEdit, doResolveUris } from 'lbry-redux';
+import { push } from 'connected-react-router';
+import * as PAGES from 'constants/pages';
 
 const select = (state, props) => {
   const { search } = props.location;
@@ -11,4 +14,13 @@ const select = (state, props) => {
   };
 };
 
-export default connect(select)(TopPage);
+const perform = dispatch => ({
+  beginPublish: name => {
+    dispatch(doClearPublish());
+    dispatch(doPrepareEdit({ name }));
+    dispatch(push(`/$/${PAGES.UPLOAD}`));
+  },
+  doResolveUris: uris => dispatch(doResolveUris(uris)),
+});
+
+export default connect(select, perform)(TopPage);

ui/page/top/view.jsx

@@ -7,22 +7,42 @@ import ClaimEffectiveAmount from 'component/claimEffectiveAmount';
 import SearchTopClaim from 'component/searchTopClaim';
 import { ORDER_BY_TOP, FRESH_ALL } from 'constants/claim_search';
 import Button from 'component/button';
+import I18nMessage from 'component/i18nMessage';
+import * as PAGES from 'constants/pages';
 
 type Props = {
   name: string,
+  beginPublish: string => void,
 };
 
 function TopPage(props: Props) {
-  const { name } = props;
+  const { name, beginPublish } = props;
   const [channelActive, setChannelActive] = React.useState(false);
-
+  // if the query was actually '@name', still offer repost for 'name'
+  const queryName = name[0] === '@' ? name.slice(1) : name;
   return (
     <Page>
       <SearchTopClaim query={name} hideLink setChannelActive={setChannelActive} />
       <ClaimListDiscover
-        name={channelActive ? `@${name}` : name}
+        name={channelActive ? `@${queryName}` : queryName}
         defaultFreshness={FRESH_ALL}
         defaultOrderBy={ORDER_BY_TOP}
+        meta={
+          <I18nMessage
+            tokens={{
+              repost: (
+                <Button
+                  button="secondary"
+                  navigate={`/$/${PAGES.REPOST_NEW}?to=${queryName}`}
+                  label={__('Repost Here')}
+                />
+              ),
+              publish: <Button button="secondary" onClick={() => beginPublish(queryName)} label={'Publish Here'} />,
+            }}
+          >
+            %repost% %publish%
+          </I18nMessage>
+        }
         includeSupportAction
         renderProperties={claim => (
           <span className="claim-preview__custom-properties">
@@ -33,7 +53,7 @@ function TopPage(props: Props) {
         header={
           <div className="claim-search__menu-group">
             <Button
-              label={name}
+              label={queryName}
               button="alt"
               onClick={() => setChannelActive(false)}
               className={classnames('button-toggle', {
@@ -41,7 +61,7 @@ function TopPage(props: Props) {
               })}
             />
             <Button
-              label={`@${name}`}
+              label={`@${queryName}`}
               button="alt"
               onClick={() => setChannelActive(true)}
               className={classnames('button-toggle', {

ui/redux/selectors/search.js

@@ -1,7 +1,15 @@
 // @flow
 import { getSearchQueryString } from 'util/query-params';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
-import { parseURI, makeSelectClaimForUri, makeSelectClaimIsNsfw, buildURI, SETTINGS, isClaimNsfw } from 'lbry-redux';
+import {
+  parseURI,
+  makeSelectClaimForUri,
+  makeSelectClaimIsNsfw,
+  buildURI,
+  SETTINGS,
+  isClaimNsfw,
+  makeSelectPendingClaimForUri,
+} from 'lbry-redux';
 import { createSelector } from 'reselect';
 
 type State = { search: SearchState };
@@ -79,7 +87,6 @@ export const makeSelectRecommendedContentForUri = (uri: string) =>
           recommendedContent = searchUris;
         }
       }
-
       return recommendedContent;
     }
   );
@@ -97,11 +104,13 @@ export const makeSelectWinningUriForQuery = (query: string) => {
 
   return createSelector(
     makeSelectClientSetting(SETTINGS.SHOW_MATURE),
+    makeSelectPendingClaimForUri(uriFromQuery),
     makeSelectClaimForUri(uriFromQuery),
     makeSelectClaimForUri(channelUriFromQuery),
-    (matureEnabled, claim1, claim2) => {
+    (matureEnabled, pendingClaim, claim1, claim2) => {
       const claim1Mature = claim1 && isClaimNsfw(claim1);
       const claim2Mature = claim2 && isClaimNsfw(claim2);
+      let pendingAmount = pendingClaim && pendingClaim.amount;
 
       if (!claim1 && !claim2) {
         return undefined;
@@ -124,7 +133,13 @@ export const makeSelectWinningUriForQuery = (query: string) => {
         }
       }
 
-      return Number(effectiveAmount1) > Number(effectiveAmount2) ? claim1.canonical_url : claim2.canonical_url;
+      const returnBeforePending =
+        Number(effectiveAmount1) > Number(effectiveAmount2) ? claim1.canonical_url : claim2.canonical_url;
+      if (pendingAmount && pendingAmount > effectiveAmount1 && pendingAmount > effectiveAmount2) {
+        return pendingAmount.permanent_url;
+      } else {
+        return returnBeforePending;
+      }
     }
   );
 };

ui/scss/all.scss

@@ -58,3 +58,4 @@
 @import 'component/tags';
 @import 'component/wunderbar';
 @import 'component/yrbl';
+@import 'component/empty';

ui/scss/component/_claim-list.scss

@@ -98,6 +98,12 @@
     margin-right: var(--spacing-m);
   }
 
+  .media__thumb-placeholder-text {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-m);
+  }
+
   .channel-thumbnail {
     @include handleChannelGif(6rem);
   }
@@ -115,29 +121,47 @@
     font-size: 14px;
 
     .channel-thumbnail {
-      @include handleChannelGif(5rem);
+      @include handleChannelGif(4rem);
     }
   }
 }
 
+.claim-preview__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .claim-preview--large {
   border: none;
+  min-height: 8rem;
 
   &:hover {
     background-color: transparent;
   }
 
+  @media (max-width: $breakpoint-small) {
+    min-height: 4rem;
+  }
+
   .media__thumb {
     width: 14rem;
     @include handleClaimListGifThumbnail(14rem);
 
     @media (max-width: $breakpoint-small) {
-      width: 5rem;
+      min-height: 5rem;
+      width: 8rem;
     }
   }
 
   .channel-thumbnail {
+    width: 7.5rem;
     @include handleChannelGif(7.5rem);
+
+    @media (max-width: $breakpoint-small) {
+      width: 5rem;
+      @include handleChannelGif(5rem);
+    }
   }
 }
 
@@ -201,6 +225,9 @@
 
 .claim-preview__custom-properties {
   text-align: right;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
 }
 
 .claim-preview-metadata {
@@ -523,3 +550,7 @@
 .claim-link {
   position: relative;
 }
+
+.claim-preview__null-label {
+  margin: auto;
+}

ui/scss/component/_claim-search.scss

@@ -97,3 +97,15 @@
     }
   }
 }
+.claim-search__menu-group--between {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  width: 100%;
+
+  &:last-of-type {
+    .button-toggle:last-of-type {
+      margin-right: 0;
+    }
+  }
+}

ui/scss/component/_empty.scss

@@ -0,0 +1,21 @@
+.empty__wrap {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  text-align: left;
+
+  @media (min-width: $breakpoint-small) {
+    flex-direction: row;
+  }
+}
+
+.empty__text {
+  color: var(--color-text-empty);
+  font-style: italic;
+}
+
+.empty__content {
+  max-width: 400px;
+}

ui/scss/component/_yrbl.scss

@@ -34,6 +34,16 @@
   display: block;
 }
 
+.yrbl--small {
+  display: none;
+
+  @media (min-width: $breakpoint-small) {
+    display: block;
+    height: 8rem;
+    margin-right: calc(var(--spacing-xl));
+  }
+}
+
 .yrbl__content {
   max-width: 400px;
 }

ui/scss/themes/dark.scss

@@ -64,7 +64,8 @@
   --color-text: #d8d8d8;
   --color-text-error: #f5748c;
   --color-text-help-warning: #f5ec74;
-  --color-text-empty: #bbbbbb;
+  --color-text-empty: var(--color-text-subtitle);
+
   --color-text-help: #bbbbbb;
   --color-text-subtitle: #9fafc0;
   --color-text-warning: #212529;
@@ -74,7 +75,7 @@
 
   // Input
   --color-input: #f4f4f5;
-  --color-input-label: #d4d4d4;
+  --color-input-label: #a7a7a7;
   --color-input-placeholder: #f4f4f5;
   --color-input-bg: #464d53;
   --color-input-bg-copyable: #4f5861;

yarn.lock

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