Onboarding + youtube transfer + channels page

.flowconfig

@@ -24,6 +24,7 @@ module.name_mapper='^app\(.*\)$' -> '<PROJECT_ROOT>/src/ui/app\1'
 module.name_mapper='^native\(.*\)$' -> '<PROJECT_ROOT>/src/ui/native\1'
 module.name_mapper='^analytics\(.*\)$' -> '<PROJECT_ROOT>/src/ui/analytics\1'
 module.name_mapper='^i18n\(.*\)$' -> '<PROJECT_ROOT>/src/ui/i18n\1'
+module.name_mapper='^effects\(.*\)$' -> '<PROJECT_ROOT>/src/ui/effects\1'
 module.name_mapper='^config\(.*\)$' -> '<PROJECT_ROOT>/config\1'
 
 

flow-typed/18nj.js

@@ -0,0 +1,2 @@
+// @flow
+declare function __(a: string, b?: {}): string;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lbry",
-  "version": "0.35.7",
+  "version": "0.36.0-rc.1",
   "description": "A browser for the LBRY network, a digital marketplace controlled by its users.",
   "keywords": [
     "lbry"
@@ -129,7 +129,7 @@
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
     "lbry-redux": "lbryio/lbry-redux#04ae0913a444abac200731c7ed53796d763a0bbb",
-    "lbryinc": "lbryio/lbryinc#d99232ebc754a49649a2ff4132478415faef08e2",
+    "lbryinc": "lbryio/lbryinc#a44576194e1f5f60e37d328ddfdca40bd6165c2d",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",
     "lodash-es": "^4.17.14",
@@ -151,6 +151,7 @@
     "raw-loader": "^2.0.0",
     "rc-progress": "^2.0.6",
     "react": "^16.8.2",
+    "react-confetti": "^4.0.1",
     "react-dom": "^16.8.2",
     "react-draggable": "^3.3.0",
     "react-ga": "^2.5.7",

src/ui/component/app/index.js

@@ -1,7 +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, selectAccessToken } from 'lbryinc';
+import { selectUser, doRewardList, doFetchRewardedContent, doFetchAccessToken } from 'lbryinc';
 import { doFetchTransactions, doFetchChannelListMine } from 'lbry-redux';
 import { makeSelectClientSetting, selectThemePath } from 'redux/selectors/settings';
 import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded } from 'redux/selectors/app';
@@ -12,7 +12,6 @@ const select = state => ({
   user: selectUser(state),
   theme: selectThemePath(state),
   language: makeSelectClientSetting(SETTINGS.LANGUAGE)(state),
-  accessToken: selectAccessToken(state),
   autoUpdateDownloaded: selectAutoUpdateDownloaded(state),
   isUpgradeAvailable: selectIsUpgradeAvailable(state),
 });
@@ -22,9 +21,9 @@ const perform = dispatch => ({
   fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
   fetchTransactions: () => dispatch(doFetchTransactions()),
   fetchAccessToken: () => dispatch(doFetchAccessToken()),
-  requestDownloadUpgrade: () => dispatch(doDownloadUpgradeRequested()),
   fetchChannelListMine: () => dispatch(doFetchChannelListMine()),
-  onSignedIn: () => dispatch(doSignIn()),
+  signIn: () => dispatch(doSignIn()),
+  requestDownloadUpgrade: () => dispatch(doDownloadUpgradeRequested()),
 });
 
 export default hot(

src/ui/component/app/view.jsx

@@ -11,7 +11,7 @@ import useKonamiListener from 'util/enhanced-layout';
 import Yrbl from 'component/yrbl';
 import FileViewer from 'component/fileViewer';
 import { withRouter } from 'react-router';
-import usePrevious from 'util/use-previous';
+import usePrevious from 'effects/use-previous';
 import Button from 'component/button';
 
 export const MAIN_WRAPPER_CLASS = 'main-wrapper';
@@ -27,11 +27,13 @@ type Props = {
   fetchRewardedContent: () => void,
   fetchTransactions: () => void,
   fetchAccessToken: () => void,
-  autoUpdateDownloaded: boolean,
-  isUpgradeAvailable: boolean,
+  fetchChannelListMine: () => void,
+  signIn: () => void,
   requestDownloadUpgrade: () => void,
   fetchChannelListMine: () => void,
   onSignedIn: () => void,
+  isUpgradeAvailable: boolean,
+  autoUpdateDownloaded: boolean,
 };
 
 function App(props: Props) {
@@ -42,11 +44,11 @@ function App(props: Props) {
     fetchTransactions,
     user,
     fetchAccessToken,
-    requestDownloadUpgrade,
+    fetchChannelListMine,
+    signIn,
     autoUpdateDownloaded,
     isUpgradeAvailable,
-    fetchChannelListMine,
-    onSignedIn,
+    requestDownloadUpgrade,
   } = props;
   const appRef = useRef();
   const isEnhancedLayout = useKonamiListener();
@@ -94,7 +96,7 @@ function App(props: Props) {
     if (previousHasVerifiedEmail === false && hasVerifiedEmail) {
       analytics.emailVerifiedEvent();
     }
-  }, [previousHasVerifiedEmail, hasVerifiedEmail, onSignedIn]);
+  }, [previousHasVerifiedEmail, hasVerifiedEmail, signIn]);
 
   useEffect(() => {
     if (previousRewardApproved === false && isRewardApproved) {
@@ -105,9 +107,9 @@ function App(props: Props) {
   // Keep this at the end to ensure initial setup effects are run first
   useEffect(() => {
     if (!previousHasVerifiedEmail && hasVerifiedEmail) {
-      onSignedIn();
+      signIn();
     }
-  }, [previousHasVerifiedEmail, hasVerifiedEmail, onSignedIn]);
+  }, [previousHasVerifiedEmail, hasVerifiedEmail, signIn]);
 
   if (!user) {
     return null;

src/ui/component/blockButton/view.jsx

@@ -3,7 +3,7 @@ import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
 import React, { useRef } from 'react';
 import Button from 'component/button';
-import useHover from 'util/use-hover';
+import useHover from 'effects/use-hover';
 
 type Props = {
   permanentUrl: ?string,

src/ui/component/channelContent/view.jsx

@@ -64,7 +64,7 @@ function ChannelContent(props: Props) {
         </div>
       )}
 
-      {!channelIsMine && <HiddenNsfwClaims className="card__subtitle" uri={uri} />}
+      {!channelIsMine && <HiddenNsfwClaims uri={uri} />}
 
       {hasContent && !channelIsBlocked && !channelIsBlackListed && (
         <ClaimList header={false} uris={claimsInChannel.map(claim => claim && claim.canonical_url)} />

src/ui/component/channelEdit/view.jsx

@@ -182,7 +182,7 @@ function ChannelForm(props: Props) {
           onChange={text => setParams({ ...params, description: text })}
         />
         <TagSelect
-          title={false}
+          title={__('Add Tags')}
           suggestMature
           help={__('The better your tags are, the easier it will be for people to discover your channel.')}
           empty={__('No tags added')}

src/ui/component/claimList/view.jsx

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 import ClaimPreview from 'component/claimPreview';
 import Spinner from 'component/spinner';
 import { FormField } from 'component/common/form';
-import usePersistedState from 'util/use-persisted-state';
+import usePersistedState from 'effects/use-persisted-state';
 
 const SORT_NEW = 'new';
 const SORT_OLD = 'old';

src/ui/component/claimPreview/view.jsx

@@ -1,4 +1,5 @@
 // @flow
+import type { Node } from 'react';
 import React, { Fragment, useEffect, forwardRef } from 'react';
 import classnames from 'classnames';
 import { parseURI, convertToShareLink } from 'lbry-redux';
@@ -45,6 +46,9 @@ type Props = {
   channelIsBlocked: boolean,
   isSubscribed: boolean,
   beginPublish: string => void,
+  actions: boolean | Node | string | number,
+  properties: boolean | Node | string | number,
+  onClick?: any => any,
 };
 
 const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
@@ -70,12 +74,14 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     channelIsBlocked,
     isSubscribed,
     beginPublish,
+    actions,
+    properties,
+    onClick,
   } = props;
   const shouldFetch = claim === undefined || (claim !== null && claim.value_type === 'channel' && isEmpty(claim.meta));
   const abandoned = !isResolvingUri && !claim;
   const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
   const showPublishLink = abandoned && placeholder === 'publish';
-  const includeChannelTooltip = type !== 'inline' && type !== 'tooltip';
   const hideActions = type === 'small' || type === 'tooltip';
 
   let name;
@@ -90,6 +96,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   }
 
   const isChannel = isValid ? parseURI(uri).isChannel : false;
+  const includeChannelTooltip = type !== 'inline' && type !== 'tooltip' && !isChannel;
   const signingChannel = claim && claim.signing_channel;
   let shouldHide =
     placeholder !== 'loading' && ((abandoned && !showPublishLink) || (!claimIsMine && obscureNsfw && nsfw));
@@ -129,8 +136,10 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     }
   }
 
-  function onClick(e) {
-    if ((isChannel || title) && !pending) {
+  function handleOnClick(e) {
+    if (onClick) {
+      onClick(e);
+    } else if ((isChannel || title) && !pending) {
       history.push(formatLbryUriForWeb(uri));
     }
   }
@@ -161,7 +170,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     <li
       ref={ref}
       role="link"
-      onClick={pending || type === 'inline' ? undefined : onClick}
+      onClick={pending || type === 'inline' ? undefined : handleOnClick}
       onContextMenu={handleContextMenu}
       className={classnames('claim-preview', {
         'claim-preview--small': type === 'small' || type === 'tooltip',
@@ -178,12 +187,16 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
           <div className="claim-preview-title">
             {claim ? <TruncatedText text={title || claim.name} lines={1} /> : <span>{__('Nothing here')}</span>}
           </div>
-          {!hideActions && (
+          {!hideActions && actions !== undefined ? (
+            actions
+          ) : (
             <div className="card__actions--inline">
-              {isChannel && !channelIsBlocked && (
+              {isChannel && !channelIsBlocked && !claimIsMine && (
                 <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
               )}
-              {isChannel && !isSubscribed && <BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />}
+              {isChannel && !isSubscribed && !claimIsMine && (
+                <BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
+              )}
               {!isChannel && claim && <FileProperties uri={uri} />}
             </div>
           )}
@@ -219,7 +232,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
               </div>
             )}
           </div>
-          <ClaimTags uri={uri} type={type} />
+          {properties !== undefined ? properties : <ClaimTags uri={uri} type={type} />}
         </div>
       </div>
     </li>

src/ui/component/commentCreate/view.jsx

@@ -5,7 +5,7 @@ import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
 import ChannelSection from 'component/selectChannel';
 import UnsupportedOnWeb from 'component/common/unsupported-on-web';
-import usePersistedState from 'util/use-persisted-state';
+import usePersistedState from 'effects/use-persisted-state';
 
 type Props = {
   uri: string,

src/ui/component/common/card.jsx

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import Icon from 'component/common/icon';
 
 type Props = {
-  title: string | Node,
+  title?: string | Node,
   subtitle?: string | Node,
   body?: string | Node,
   actions?: string | Node,
@@ -16,15 +16,17 @@ export default function Card(props: Props) {
   const { title, subtitle, body, actions, icon } = props;
   return (
     <section className={classnames('card')}>
-      <div className="card__header">
-        <div className="section__flex">
-          {icon && <Icon sectionIcon icon={icon} />}
-          <div>
-            <h2 className="section__title">{title}</h2>
-            <p className="section__subtitle">{subtitle}</p>
+      {title && (
+        <div className="card__header">
+          <div className="section__flex">
+            {icon && <Icon sectionIcon icon={icon} />}
+            <div>
+              <h2 className="section__title">{title}</h2>
+              <p className="section__subtitle">{subtitle}</p>
+            </div>
           </div>
         </div>
-      </div>
+      )}
 
       {body && <div className={classnames('card__body', { 'card__body--with-icon': icon })}>{body}</div>}
       {actions && (

src/ui/component/common/form-components/form-field.jsx

@@ -104,9 +104,11 @@ export class FormField extends React.PureComponent<Props> {
         input = (
           <Wrapper>
             <checkbox-element {...elementProps}>
-              <input id={name} type="checkbox" {...inputProps} />
-              <label htmlFor={name}>{label}</label>
-              <checkbox-toggle onClick={inputProps.onChange} />
+              <input id={name} type="checkbox" {...inputProps} tabIndex={0} />
+              <label htmlFor={name} tabIndex={-1}>
+                {label}
+              </label>
+              <checkbox-toggle onClick={inputProps.onChange} tabIndex={-1} />
             </checkbox-element>
           </Wrapper>
         );

src/ui/component/common/icon-custom.jsx

@@ -303,6 +303,13 @@ export const icons = {
       <line x1="15" y1="12" x2="3" y2="12" />
     </g>
   ),
+  [ICONS.SIGN_IN]: buildIcon(
+    <g>
+      <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
+      <polyline points="10 17 15 12 10 7" />
+      <line x1="15" y1="12" x2="3" y2="12" />
+    </g>
+  ),
   [ICONS.SIGN_OUT]: buildIcon(
     <g>
       <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />

src/ui/component/errorBoundary/view.jsx

@@ -75,16 +75,14 @@ class ErrorBoundary extends React.Component<Props, State> {
             title={__('Aw shucks!')}
             subtitle={
               <Fragment>
-                <p>
-                  {__("There was an error. It's been reported and will be fixed")}. {__('Try')}{' '}
-                  <Button
-                    button="link"
-                    className="load-screen__button"
-                    label={__('refreshing the app')}
-                    onClick={this.refresh}
-                  />{' '}
-                  {__("to fix it. If that doesn't work, press CMD/CTRL-R to reset to the homepage.")}.
-                </p>
+                {__("There was an error. It's been reported and will be fixed")}. {__('Try')}{' '}
+                <Button
+                  button="link"
+                  className="load-screen__button"
+                  label={__('refreshing the app')}
+                  onClick={this.refresh}
+                />{' '}
+                {__("to fix it. If that doesn't work, press CMD/CTRL-R to reset to the homepage.")}.
               </Fragment>
             }
           />

src/ui/component/fileViewer/view.jsx

@@ -6,8 +6,8 @@ import classnames from 'classnames';
 import LoadingScreen from 'component/common/loading-screen';
 import FileRender from 'component/fileRender';
 import UriIndicator from 'component/uriIndicator';
-import usePersistedState from 'util/use-persisted-state';
-import usePrevious from 'util/use-previous';
+import usePersistedState from 'effects/use-persisted-state';
+import usePrevious from 'effects/use-previous';
 import { FILE_WRAPPER_CLASS } from 'page/file/view';
 import Draggable from 'react-draggable';
 import Tooltip from 'component/common/tooltip';
@@ -86,7 +86,7 @@ export default function FileViewer(props: Props) {
     function handleResize() {
       const element = document.querySelector(`.${FILE_WRAPPER_CLASS}`);
       if (!element) {
-        console.error("Can't find file viewer wrapper to attach to the inline viewer to");
+        console.error("Can't find file viewer wrapper to attach to the inline viewer to"); // eslint-disable-line
         return;
       }
 

src/ui/component/header/index.js

@@ -3,8 +3,8 @@ import { connect } from 'react-redux';
 import { selectBalance, formatCredits } from 'lbry-redux';
 import { selectUserVerifiedEmail } from 'lbryinc';
 import { doSetClientSetting } from 'redux/actions/settings';
-import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { doSignOut } from 'redux/actions/app';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
 import Header from './view';
 
 const select = state => ({