WIP fixes and improvements

src/ui/component/app/index.js

@@ -1,14 +1,7 @@
 import * as SETTINGS from 'constants/settings';
 import { hot } from 'react-hot-loader/root';
 import { connect } from 'react-redux';
-import {
-  selectUser,
-  doRewardList,
-  doFetchRewardedContent,
-  doFetchAccessToken,
-  selectGetSyncErrorMessage,
-  selectUploadCount,
-} from 'lbryinc';
+import { selectUser, doRewardList, doFetchAccessToken, selectGetSyncErrorMessage, selectUploadCount } from 'lbryinc';
 import { doFetchTransactions, doFetchChannelListMine } from 'lbry-redux';
 import { makeSelectClientSetting, selectThemePath } from 'redux/selectors/settings';
 import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded } from 'redux/selectors/app';
@@ -28,8 +21,7 @@ const select = state => ({
 
 const perform = dispatch => ({
   fetchRewards: () => dispatch(doRewardList()),
-  fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
-  fetchTransactions: () => dispatch(doFetchTransactions()),
+  fetchTransactions: (page, pageSize) => dispatch(doFetchTransactions(page, pageSize)),
   fetchAccessToken: () => dispatch(doFetchAccessToken()),
   fetchChannelListMine: () => dispatch(doFetchChannelListMine()),
   signIn: () => dispatch(doSignIn()),

src/ui/component/app/view.jsx

@@ -1,6 +1,7 @@
 // @flow
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
+import { LATEST_PAGE_SIZE } from 'constants/claim';
 import React, { useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
 import analytics from 'analytics';
@@ -31,8 +32,7 @@ type Props = {
   location: { pathname: string, hash: string },
   history: { push: string => void },
   fetchRewards: () => void,
-  fetchRewardedContent: () => void,
-  fetchTransactions: () => void,
+  fetchTransactions: (page, pageSize) => void,
   fetchAccessToken: () => void,
   fetchChannelListMine: () => void,
   signIn: () => void,
@@ -53,7 +53,6 @@ function App(props: Props) {
   const {
     theme,
     fetchRewards,
-    fetchRewardedContent,
     fetchTransactions,
     user,
     fetchAccessToken,
@@ -100,14 +99,13 @@ function App(props: Props) {
   useEffect(() => {
     ReactModal.setAppElement(appRef.current);
     fetchAccessToken();
-    fetchRewardedContent();
 
     // @if TARGET='app'
     fetchRewards();
-    fetchTransactions();
+    fetchTransactions(1, LATEST_PAGE_SIZE);
     fetchChannelListMine(); // This needs to be done for web too...
     // @endif
-  }, [fetchRewards, fetchRewardedContent, fetchTransactions, fetchAccessToken, fetchChannelListMine]);
+  }, [fetchRewards, fetchTransactions, fetchAccessToken, fetchChannelListMine]);
 
   useEffect(() => {
     // $FlowFixMe

src/ui/component/fileProperties/view.jsx

@@ -25,6 +25,9 @@ export default function FileProperties(props: Props) {
       {isSubscribed && <Icon tooltip icon={icons.SUBSCRIBE} />}
       {!claimIsMine && downloaded && <Icon tooltip icon={icons.DOWNLOAD} />}
       {isRewardContent && <Icon tooltip icon={icons.FEATURED} />}
+      trending group:{claim.meta.trending_group}
+      trending mixed:{claim.meta.trending_mixed}
+      {claim.meta.support_amount}
       <FilePrice hideFree uri={uri} />
       <VideoDuration className="media__subtitle" uri={uri} />
     </div>

src/ui/component/publishAdditionalOptions/index.js

@@ -1,42 +1,13 @@
 import { connect } from 'react-redux';
-import {
-  doResolveUri,
-  selectBalance,
-  selectPublishFormValues,
-  selectIsStillEditing,
-  selectMyClaimForUri,
-  selectIsResolvingPublishUris,
-  selectTakeOverAmount,
-  doResetThumbnailStatus,
-  doClearPublish,
-  doUpdatePublishForm,
-  doPrepareEdit,
-} from 'lbry-redux';
-import { doPublishDesktop } from 'redux/actions/publish';
-import { selectUnclaimedRewardValue } from 'lbryinc';
+import { selectPublishFormValues, doUpdatePublishForm } from 'lbry-redux';
 import PublishPage from './view';
 
 const select = state => ({
   ...selectPublishFormValues(state),
-  // The winning claim for a short lbry uri
-  amountNeededForTakeover: selectTakeOverAmount(state),
-  // My previously published claims under this short lbry uri
-  myClaimForUri: selectMyClaimForUri(state),
-  // If I clicked the "edit" button, have I changed the uri?
-  // Need this to make it easier to find the source on previously published content
-  isStillEditing: selectIsStillEditing(state),
-  isResolvingUri: selectIsResolvingPublishUris(state),
-  totalRewardValue: selectUnclaimedRewardValue(state),
-  balance: selectBalance(state),
 });
 
 const perform = dispatch => ({
   updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
-  clearPublish: () => dispatch(doClearPublish()),
-  resolveUri: uri => dispatch(doResolveUri(uri)),
-  publish: () => dispatch(doPublishDesktop()),
-  prepareEdit: (claim, uri) => dispatch(doPrepareEdit(claim, uri)),
-  resetThumbnailStatus: () => dispatch(doResetThumbnailStatus()),
 });
 
 export default connect(

src/ui/component/publishFile/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import * as ICONS from 'constants/icons';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { regexInvalidURI } from 'lbry-redux';
 import FileSelector from 'component/common/file-selector';
 import Button from 'component/button';
@@ -32,6 +32,12 @@ function PublishFile(props: Props) {
     }
   }
 
+  useEffect(() => {
+    if (currentFile) {
+      updatePublishForm();
+    }
+  }, [currentFile]);
+
   function handleFileChange(file: WebFile) {
     // if electron, we'll set filePath to the path string because SDK is handling publishing.
     // if web, we set the filePath (dumb name) to the File() object
@@ -52,10 +58,13 @@ function PublishFile(props: Props) {
     // @endif
     const publishFormParams: { filePath: string | WebFile, name?: string } = {
       filePath: file.path || file,
-      name: file.name,
+      name: '',
     };
-    const parsedFileName = file.name.replace(regexInvalidURI, '');
-    publishFormParams.name = parsedFileName.replace(' ', '-');
+    // Strip off extention and replace invalid characters
+    let fileName = file.name.substr(0, file.name.lastIndexOf('.')) || file.name;
+    let replaceChars = new RegExp(regexInvalidURI, 'gu');
+    let parsedFileName = fileName.replace(replaceChars, '-');
+    publishFormParams.name = parsedFileName;
     updatePublishForm(publishFormParams);
   }
 

src/ui/component/publishForm/index.js

@@ -32,7 +32,7 @@ const perform = dispatch => ({
   updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
   clearPublish: () => dispatch(doClearPublish()),
   resolveUri: uri => dispatch(doResolveUri(uri)),
-  publish: () => dispatch(doPublishDesktop()),
+  publish: filePath => dispatch(doPublishDesktop(filePath)),
   prepareEdit: (claim, uri) => dispatch(doPrepareEdit(claim, uri)),
   resetThumbnailStatus: () => dispatch(doResetThumbnailStatus()),
 });

src/ui/component/publishForm/view.jsx

@@ -26,7 +26,7 @@ import Card from 'component/common/card';
 type Props = {
   disabled: boolean,
   tags: Array<Tag>,
-  publish: PublishParams => void,
+  publish: string => void,
   filePath: ?string,
   bid: ?number,
   editingURI: ?string,
@@ -112,7 +112,7 @@ function PublishForm(props: Props) {
     // We are only going to store the full uri, but we need to resolve the uri with and without the channel name
     let uri;
     try {
-      uri = buildURI({ streamName: name, channelName });
+      uri = name && buildURI({ streamName: name, channelName });
     } catch (e) {}
 
     if (channelName && name) {
@@ -182,7 +182,7 @@ function PublishForm(props: Props) {
           <div className="card__actions">
             <Button
               button="primary"
-              onClick={publish}
+              onClick={() => publish(filePath)}
               label={submitLabel}
               disabled={formDisabled || !formValid || uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS}
             />

src/ui/component/selectThumbnail/index.js

@@ -1,43 +1,23 @@
 import { connect } from 'react-redux';
 import {
-  doResolveUri,
   selectPublishFormValues,
-  selectIsStillEditing,
   selectMyClaimForUri,
-  selectIsResolvingPublishUris,
-  selectTakeOverAmount,
+  doUpdatePublishForm,
   selectFileInfosByOutpoint,
   doResetThumbnailStatus,
-  doClearPublish,
-  doUpdatePublishForm,
-  doPrepareEdit,
 } from 'lbry-redux';
 
 import { doOpenModal } from 'redux/actions/app';
-import { doPublishDesktop } from 'redux/actions/publish';
-import { selectUnclaimedRewardValue } from 'lbryinc';
 import PublishPage from './view';
 
 const select = state => ({
   ...selectPublishFormValues(state),
   fileInfos: selectFileInfosByOutpoint(state),
-  // The winning claim for a short lbry uri
-  amountNeededForTakeover: selectTakeOverAmount(state),
-  // My previously published claims under this short lbry uri
   myClaimForUri: selectMyClaimForUri(state),
-  // If I clicked the "edit" button, have I changed the uri?
-  // Need this to make it easier to find the source on previously published content
-  isStillEditing: selectIsStillEditing(state),
-  isResolvingUri: selectIsResolvingPublishUris(state),
-  totalRewardValue: selectUnclaimedRewardValue(state),
 });
 
 const perform = dispatch => ({
   updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
-  clearPublish: () => dispatch(doClearPublish()),
-  resolveUri: uri => dispatch(doResolveUri(uri)),
-  publish: () => dispatch(doPublishDesktop()),
-  prepareEdit: (claim, uri) => dispatch(doPrepareEdit(claim, uri)),
   resetThumbnailStatus: () => dispatch(doResetThumbnailStatus()),
   openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
 });

src/ui/component/transactionList/view.jsx

@@ -45,7 +45,7 @@ function TransactionList(props: Props) {
         <h2 className="card__title--between">
           {title}
           <div className="card__actions--inline">
-            <RefreshTransactionButton />
+            <RefreshTransactionButton slim={slim} />
             {/* @if TARGET='app' */}
             {!slim && (
               <FileExporter

src/ui/component/transactionListRecent/index.js

@@ -1,14 +1,15 @@
 import { connect } from 'react-redux';
-import { doFetchTransactions, selectRecentTransactions, doFetchClaimListMine } from 'lbry-redux';
+import { doFetchTransactions, makeSelectLatestTransactions } from 'lbry-redux';
 import TransactionListRecent from './view';
 
-const select = state => ({
-  transactions: selectRecentTransactions(state),
-});
+const select = state => {
+  return {
+    transactions: makeSelectLatestTransactions(state),
+  };
+};
 
 const perform = dispatch => ({
-  fetchTransactions: () => dispatch(doFetchTransactions()),
-  fetchMyClaims: () => dispatch(doFetchClaimListMine()),
+  fetchTransactions: (page, pageSize) => dispatch(doFetchTransactions(page, pageSize)),
 });
 
 export default connect(

src/ui/component/transactionListRecent/view.jsx

@@ -1,21 +1,20 @@
 // @flow
 import React from 'react';
 import TransactionList from 'component/transactionList';
+import { LATEST_PAGE_SIZE } from 'constants/claim';
 
 type Props = {
-  fetchTransactions: () => void,
+  fetchTransactions: (page, pageSize) => void,
   fetchingTransactions: boolean,
   hasTransactions: boolean,
   transactions: Array<Transaction>,
-  fetchMyClaims: () => void,
 };
 
 class TransactionListRecent extends React.PureComponent<Props> {
   componentDidMount() {
-    const { fetchMyClaims, fetchTransactions } = this.props;
+    const { fetchTransactions } = this.props;
 
-    fetchMyClaims();
-    fetchTransactions();
+    fetchTransactions(1, LATEST_PAGE_SIZE);
   }
 
   render() {
@@ -24,9 +23,9 @@ class TransactionListRecent extends React.PureComponent<Props> {
       <section className="card">
         <TransactionList
           slim
-          title={__('Recent Transactions')}
+          title={__('Latest Transactions')}
           transactions={transactions}
-          emptyMessage={__("Looks like you don't have any recent transactions.")}
+          emptyMessage={__("Looks like you don't have any transactions.")}
         />
       </section>
     );

src/ui/component/transactionRefreshButton/index.js

@@ -7,7 +7,7 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
-  fetchTransactions: () => dispatch(doFetchTransactions()),
+  fetchTransactions: (page, pageSize) => dispatch(doFetchTransactions(page, pageSize)),
 });
 
 export default connect(

src/ui/component/transactionRefreshButton/view.jsx

@@ -1,10 +1,12 @@
 // @flow
 import React, { PureComponent } from 'react';
 import Button from 'component/button';
+import { LATEST_PAGE_SIZE } from 'constants/claim';
 
 type Props = {
   fetchTransactions: () => void,
   fetchingTransactions: boolean,
+  slim: boolean,
 };
 
 type State = {
@@ -22,11 +24,16 @@ class TransactionRefreshButton extends PureComponent<Props, State> {
   }
 
   handleClick() {
-    const { fetchTransactions } = this.props;
+    const { fetchTransactions, slim } = this.props;
 
     // The fetchTransactions call will be super fast most of the time.
     // Instead of showing a loading spinner for 100ms, change the label and show as "Refreshed!"
-    fetchTransactions();
+    if (slim) {
+      fetchTransactions(1, LATEST_PAGE_SIZE);
+    } else {
+      fetchTransactions(1, 999999);
+    }
+
     this.setState({ label: __('Refreshed!'), disabled: true });
 
     setTimeout(() => {

src/ui/component/walletAddress/view.jsx

@@ -73,7 +73,8 @@ class WalletAddress extends React.PureComponent<Props, State> {
               <Button button="link" label={showQR ? __('Hide QR code') : __('Show QR code')} onClick={this.toggleQR} />
             </div>
             <p className="help">
-              {__('You can generate a new address at any time, and any previous addresses will continue to work.')}
+              {!IS_WEB &&
+                __('You can generate a new address at any time, and any previous addresses will continue to work.')}
             </p>
 
             {showQR && <QRCode value={receiveAddress} paddingTop />}

src/ui/component/walletBackup/view.jsx

@@ -102,7 +102,7 @@ class WalletBackup extends React.PureComponent<Props, State> {
             </li>
             <li>
               {__(
-                'Currently, there is no automatic backup. If you lose access to these files, you will lose your credits.'
+                'If Sync is on, LBRY will backup your wallet and preferences. If disabled, you are responsible for keeping a backup.'
               )}
             </li>
             <li>

src/ui/constants/claim.js

@@ -3,6 +3,7 @@ export const MINIMUM_PUBLISH_BID = 0.00000001;
 export const CHANNEL_ANONYMOUS = 'anonymous';
 export const CHANNEL_NEW = 'new';
 export const PAGE_SIZE = 20;
+export const LATEST_PAGE_SIZE = 20;
 
 export const INVALID_NAME_ERROR =
   __('LBRY names cannot contain spaces or reserved symbols') + ' ' + '($#@;/"<>%{}|^~[]`)';

src/ui/modal/modalPublish/view.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { Modal } from 'modal/modal';
 import ClaimPreview from 'component/claimPreview';
+import Button from 'component/button';
 
 type Props = {
   closeModal: () => void,
@@ -9,14 +10,14 @@ type Props = {
   navigate: string => void,
   uri: string,
   isEdit: boolean,
+  filePath: ?string,
 };
 
 class ModalPublishSuccess extends React.PureComponent<Props> {
   render() {
-    const { closeModal, clearPublish, navigate, uri, isEdit } = this.props;
-    const contentLabel = isEdit ? 'Updates published' : 'File published';
-    const publishMessage = isEdit ? 'updates have been' : 'file has been';
-    const publishType = isEdit ? 'updates' : 'file';
+    const { closeModal, clearPublish, navigate, uri, isEdit, filePath } = this.props;
+    const contentLabel = isEdit ? 'Update published' : 'File published';
+    const publishMessage = isEdit ? 'update is now' : 'file is now';
 
     return (
       <Modal
@@ -35,13 +36,22 @@ class ModalPublishSuccess extends React.PureComponent<Props> {
           closeModal();
         }}
       >
-        <p className="card__subtitle">{__(`Your %publishMessage% published to LBRY.`, { publishMessage })}</p>
+        <p className="card__subtitle">
+          {__(`Your %publishMessage% pending on LBRY. It will take a few minutes to appear for other users.`, {
+            publishMessage,
+          })}
+        </p>
         <div className="card--inline">
           <ClaimPreview uri={uri} />
         </div>
         <p className="help">
-          {__(
-            `The ${publishType} will take a few minutes to appear for other LBRY users. Until then it will be listed as "pending" under your published files.`
+          {filePath && !IS_WEB && (
+            <React.Fragment>
+              {__(
+                `Upload will continue in the background, please do not shut down immediately. Leaving the app running helps the network, thank you!`
+              )}{' '}
+              <Button button="link" href="https://lbry.com/faq/host-content" label={__('Learn More')} />
+            </React.Fragment>
           )}
         </p>
       </Modal>

src/ui/page/transactionHistory/index.js

@@ -1,10 +1,5 @@
 import { connect } from 'react-redux';
-import {
-  doFetchTransactions,
-  doFetchClaimListMine,
-  makeSelectFilteredTransactionsForPage,
-  selectFilteredTransactionCount,
-} from 'lbry-redux';
+import { doFetchTransactions, makeSelectFilteredTransactionsForPage, selectFilteredTransactionCount } from 'lbry-redux';
 import { withRouter } from 'react-router';
 
 import TransactionHistoryPage from './view';
@@ -21,8 +16,7 @@ const select = (state, props) => {
 };
 
 const perform = dispatch => ({
-  fetchTransactions: () => dispatch(doFetchTransactions()),
-  fetchMyClaims: () => dispatch(doFetchClaimListMine()),
+  fetchTransactions: (page, pageSize) => dispatch(doFetchTransactions(page, pageSize)),
 });
 
 export default withRouter(

src/ui/page/transactionHistory/view.jsx

@@ -4,8 +4,7 @@ import TransactionList from 'component/transactionList';
 import Page from 'component/page';
 
 type Props = {
-  fetchMyClaims: () => void,
-  fetchTransactions: () => void,
+  fetchTransactions: (page, pageSize) => void,
   fetchingTransactions: boolean,
   filteredTransactionPage: Array<{}>,
   filteredTransactionsCount: number,
@@ -13,10 +12,9 @@ type Props = {
 
 class TransactionHistoryPage extends React.PureComponent<Props> {
   componentDidMount() {
-    const { fetchMyClaims, fetchTransactions } = this.props;
+    const { fetchTransactions } = this.props;
 
-    fetchMyClaims();
-    fetchTransactions();
+    fetchTransactions(1, 999999);
   }
 
   render() {

src/ui/redux/actions/publish.js

@@ -9,7 +9,7 @@ import analytics from 'analytics';
 import { formatLbryUriForWeb } from 'util/uri';
 import { doOpenModal } from './app';
 
-export const doPublishDesktop = () => (dispatch: Dispatch, getState: () => {}) => {
+export const doPublishDesktop = (filePath: string) => (dispatch: Dispatch, getState: () => {}) => {
   const publishSuccess = successResponse => {
     const state = getState();
     const myClaims = selectMyClaims(state);
@@ -30,7 +30,7 @@ export const doPublishDesktop = () => (dispatch: Dispatch, getState: () => {}) =
     const myNewClaims = isEdit
       ? myClaims.map(claim => (isMatch(claim) ? pendingClaim : claim))
       : myClaims.concat(pendingClaim);
-    actions.push(doOpenModal(MODALS.PUBLISH, { uri: url, isEdit }));
+    actions.push(doOpenModal(MODALS.PUBLISH, { uri: url, isEdit, filePath }));
     actions.push({
       type: ACTIONS.FETCH_CLAIM_LIST_MINE_COMPLETED,
       data: {