.eslintrc.json

@@ -39,6 +39,7 @@
     "no-return-assign": 0,
     "react/require-default-props": 0,
     "react/jsx-closing-tag-location": 0,
-    "jsx-a11y/no-noninteractive-element-to-interactive-role": 0
+    "jsx-a11y/no-noninteractive-element-to-interactive-role": 0,
+    "class-methods-use-this": 0
   }
 }

.flowconfig

@@ -17,10 +17,10 @@ module.name_mapper='^types\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/types\1'
 module.name_mapper='^component\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/component\1'
 module.name_mapper='^page\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/page\1'
 module.name_mapper='^lbry\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/lbry\1'
-module.name_mapper='^rewards\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/rewards\1'
 module.name_mapper='^modal\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/modal\1'
 module.name_mapper='^app\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/app\1'
 module.name_mapper='^native\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/native\1'
 module.name_mapper='^analytics\(.*\)$' -> '<PROJECT_ROOT>/src/renderer/analytics\1'
 
+
 [strict]

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 /node_modules
 /dist
 /static/daemon/lbrynet*

.travis.yml

@@ -4,19 +4,20 @@ matrix:
     env: TARGET=mac
     osx_image: xcode9.2
     language: node_js
-      node_js: "9"
+    node_js: '9'
   - os: linux
     env: TARGET=windows
     services: docker
     language: node_js
-      node_js: "9"
+    node_js: '9'
   - os: linux
     env: TARGET=linux
     language: node_js
-      node_js: "9"
+    node_js: '9'
 cache: false
 before_install:
-  - |
+- |
+  unset TRAVIS_COMMIT_MESSAGE;
   if [ "$TRAVIS_OS_NAME" == "osx" ]; then
     mkdir -p /tmp/git-lfs && curl -L https://github.com/github/git-lfs/releases/download/v2.3.1/git-lfs-$([ "$TRAVIS_OS_NAME" == "linux" ] && echo "linux" || echo "darwin")-amd64-2.3.1.tar.gz | tar -xz -C /tmp/git-lfs --strip-components 1
     export PATH="/tmp/git-lfs:$PATH"
@@ -28,22 +29,48 @@ before_install:
     export PATH="$HOME/.yarn/bin:$PATH"
   fi
 before_script:
-  - git lfs pull
+- git lfs pull
 script:
-  - |
+- |
   if [ "$TARGET" == "windows" ]; then
-      docker run --rm \
+    # Remove any special characters before adding to our list of ENVs
-        --env-file <(env | grep -iE 'DEBUG|TARGET|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS|APPVEYOR_|CSC_|GH_|GITHUB_|BT_|AWS_|STRIP|BUILD_') \
+    # https://github.com/electron-userland/electron-builder/issues/2450#issuecomment-421788155
+    ENVS=`env | grep -iE '(DEBUG|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS|APPVEYOR_|CSC_|_TOKEN|_KEY|AWS_|STRIP|BUILD_|TARGET)([A-Z]|_)*=' | sed -n '/^[^\t]/s/=.*//p' | sed '/^$/d' | sed 's/^/-e /g' | tr '\n' ' '`
+    docker run $ENVS --rm \
       -v ${PWD}:/project \
       electronuserland/builder:wine \
-        /bin/bash -c "yarn --link-duplicates --pure-lockfile && yarn build --win --publish onTag";
+      /bin/bash -c "env | grep -v '\r' | grep -iE 'DEBUG|TARGET|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS|APPVEYOR_|CSC_|GH_|GITHUB_|BT_|AWS_|STRIP|BUILD_|WIN_' && yarn --link-duplicates --pure-lockfile && yarn build --win --publish onTag";
   fi
-  - if [ "$TARGET" == "mac" ]; then yarn build --publish onTag; fi
+- if [ "$TARGET" == "mac" ]; then yarn build --publish onTag; fi
-  - if [ "$TARGET" == "linux" ]; then yarn --link-duplicates --pure-lockfile && yarn build --linux --publish onTag; fi
+- if [ "$TARGET" == "linux" ]; then yarn --link-duplicates --pure-lockfile && yarn
+  build --linux --publish onTag; fi
 addons:
   artifacts:
     working_dir: dist
     paths:
     - $(git ls-files -o dist/{*.dmg,*.exe,*.deb} | tr "\n" ":")
     target_paths:
-     - /app/build-${TRAVIS_BUILD_NUMBER}_commit-${TRAVIS_COMMIT:0:7}$([ ! -z ${TRAVIS_TAG} ] && echo _tag-${TRAVIS_TAG})
+    - "/app/build-${TRAVIS_BUILD_NUMBER}_commit-${TRAVIS_COMMIT:0:7}$([ ! -z ${TRAVIS_TAG}
+      ] && echo _tag-${TRAVIS_TAG})"
+env:
+  global:
+  - ARTIFACTS_REGION=us-east-1
+  - ARTIFACTS_BUCKET=build.lbry.io
+  - DANGER_GITHUB_API_TOKEN=f8b612049cbda985c251e18ae36c7a2b9c6c92df
+  - ARTIFACTS_DEBUG=1
+  - WIN_CSC_LINK=https://s3.amazonaws.com/files.lbry.io/cert/win-csc-2018-2019-08.p12
+  - CSC_LINK=https://s3.amazonaws.com/files.lbry.io/cert/osx-cert.p12
+    #AWS_SECRET_ACCESS_KEY
+  - secure: aF0dZ1ub0r6X5SaTH7YYRpV8cl2gkU2tA7y2tkvGZQL0+Vv2FvkhwaXREa9IM9djm7r3W7I8vEekk6Skn300kIBwQ04COxgu+Oeqjsc2a529wmF9AN5EwKExKkVQFIjMjpMBmd/fE05PD29C0vULdtIMX8uhDe5zFE+tGD1QmwKVZ+55oCxJmt7vsQwQr46s/BsPODrZhvSUPWTUG4HSsc5DJwe/XYY+35vWQsnpCkBVabAZg+lnOpqLioRNzTsBX1oSkqTX9uvOC6fN+NlpbJWetzXsBciFcMHQCx9UHxu+Ibn3W3V8FVYRuFLAinhIg+JoVQHU8mH60ggjizATpgx12riP9e/Uwho5x5bgIYmnIBf4AHqupPv40iC/THMvsS08hCQHicu+/WiAvvN8wNQ1sqpj0+RTreB+4/qdRdwTs70t4jNV83cP+nAuekMCC7uYQ08GLmFNaa+x8NgDZa3JQv7EmXU0ALWVPeJ9UEV+dhEs5iI+7bLEhTUOuvBBWo17F4pst3pfS1j7md1x4wKFRWyP7IFmjK+L1KiAH94c/LIz2Nlp5yCDfbcwU5W/wCHYAxu5c8qnAlkxeub0GpxtZ66j6oOehk1lsHYxaZcBxyn7XhM1A6Mjxgy9OG0WGyYun8iH3aa4WcY0BO21l7je75s7l0qNSRS80st8kUE=
+    #AWS_ACCESS_KEY_ID
+  - secure: HHlUGaEjk0qsW9qb/93jdFhJypiDuJ0e6Z4UClW3ciMfdZ22Ur4D0oL0mgVguigTjdkf1Yy4Z1kWtWvtvQ8DBI+mdOl5GTMpX5nMattcuK/4gFXmqz30S3c07IPkilGKkAT64JqRGT7AvQTaV/tXqNNN9BbWCTAJSnhfzYJFvZQjnSmAAQvbqzMWEEein53244fWbDio462T7vzfbEHJD1pVUSrAMrKDgFSrIKJf4GQHceUk+fqWBjAsWN8USboo88JSLXn5qhD3ZczsgtZ2gi2KTvdfrHfZ5SpOzwc2AGr8U1laQzzW8c8xsPJPmM/3dCri/clcXassa4t/+2INYTPhKbmaD9hvjFRRMpoNjMCmPRJOmojxit8tqzCrw4nSGdr3/Bt0JjpLq90mfyL83YYU4gJXF97KzTl0lCy/DFXjBiHA9riRJVaXn3CI6L0i1RLCJI+C/rT9ErFB767t0aQtXlIWSZQ+IqWaoUdp57t0e2EtbRcjK7IYIXLNgZSbR0bY/TS005D/xZkexCpAtcV9F6iqDYP3HbGyiQqC75se0MqpNrZAx1a7WsSnumOcmtuU6LRriwjM0GXEACfGLCp4w4LBzKPwrOOg4QOhewHKgxpUff8KMlfTZ+Z8B7NBNjKSPbxiMedmpsiWpPRy6VeyvwNz32PUpjdsF3tIYMk=
+    #GH_TOKEN
+  - secure: g0gSiOmCKFzxLFV//oogmex+MkumCcGJ8CtvLzojAw1qhI1P6dGRH06yuCgBNW4PQGbbrYR2tntGEeq66LZ1bU7BJ2bdkv5lBi15JPH4POpA3OSc88YebitKIyIBI2WHA3VNCkF1JEFvrfTUX+4PjP+9h6vZ9tdfzezNTpc70SrGkWMhaoe+F8u6jCL63VBpnncf0foz3WlqUFNoIdinQLYxI6S2QmHz1p1HToC+MOosBgWDufX2+6B/Efq7JDFZgx/zItFzR1OCafKx8rScUd4woAqK+8mt862IzzEbztTv6IPSdhx/hsbO7rHMcjDFk/MuDeC9TaaXqMvvKmLuvWKH+dy4BvIiJJ/WuDfzumrw+8BvTbcnXFXkEXTlkQnZD0otBZsmI4/OPH5vIGUmVIwBFXjPBcNq/Xwig8hRCxrdioEZPO4C17fMCdOn3gAx+GcMddfAIKnrlG/XK2jL8kCylL7++OEkedzYiHWA7p9eaJDjxYmIxKcfYTyF4VIMYS/wAC5W1zi1AjM5BiUhBGp/Vd+f3UUTOsqWOmS4A8cqhK/rbx4xgdwUuv2DoljeQtWd2xdZFr10L2ErmEIdfdtZBVyauaGOhhXUqpSAB5PAwSRNNWkZFCJXmqMHemih4jlfN/KS+rujh5dbyXz81BPjyxrDAziO4Q19rz7hmVI=
+    #ARTIFACTS_KEY
+  - secure: giJRkODdgvMpaLh58c3UKTy6j3IjUVQ2wVvLmECN8caVLuBnEp3U56rUT7sQPzeMoaF9goOLKXD1o+qKdGsLz2Dedi/3vFr3IXTgpYwO03eMkylYUDUwKXV1Fv14ME+wknw/Fshmty1XAc/RwlTaCks9usIRT9OE75HvV8ILVfLdSwwRR/TKFEdEDjAY/3ROVFsleDKBIe1AG/AHeN37Mwqfo39zpN5Zidm3HUegujsMsHtPQtUUCvCxiaiBtqIz79WQuiXjelLWrV53k+ulpptz4T6M8FO5jxBCL5HQMbYy4J8BhukAPHUcTVzarsDe1XEmP6xtClcAydMiHmzUBh9VbvRF8AKwGGO41g6OasgMaJ/eUlACGWTIS2AsqgkXCEgWRtswwI4edLgT/F74fKxGV82zRYLcmjWceGc9H6m2YfIIQZ2PNsDloFgTWa63oZ1sT20fWmNohD3IgVK21rjrCnMbp5/RfBdihR1+GsS8wMA15nhUW3SHfSHKV0009FZdDjxgmigjjmFt1/SM8YGZDijQc7DoUsrScR9n2JR+KVqEED3BYOviw0M0blb6b2dqK0A3+N5C1RGt8Uu8AAuAzdPDviL38m4n1UOdI1Tij1boSfr1USvfipPfQXrqSWHIY3RITMmjPREmcdj2dbhjoUEFaFfp/b3sJxUI3I4=
+    #ARTIFACTS_SECRET
+  - secure: RtPES82DBisaCkernDm10u8mzNc8K4EyyTJUCopcFFJHfFpleuJOoXNFZGXixjHXWTxqc5+IjLThBZFG6krTpD4ocftfkBNeVDXL91JsGRW6X4VBpKaJp1UJZZiYjpPZRJDwVuIb570WcX3xXmsvAwwdODkeXgBZoOw+LZIz4HV3OACi5iaWCx4+2WvQiaz/6mRkLlw9iY1m9gCGQXXUSWyY+bGWsOdGWpfp/VfzpX7mBJbcIYjvRYSnBtVUFkEzxHlaR/CFc7Jio45EUImhBKqKV8QGAiv9AowcWqQn8y2SuW8J66bkaZGbGpyEdsRQDJKUU5naRIFJ/002e4XjI2moBfSHHnFTMH/AawA4b+gCjein8jDiRugJw8AqC4KpG660SFJwC4A8IxfPcXWcykahrL6kJhs+NFbyxQEJIMUqP6UAAiPAuUr/Whq1F8x5b39pEibRZ3Vv0Bix/lUj4cWZYRBL1ckoUgSCeG7llkAdnxLuQKfDvTw+HFcWGq7yg/ye7H7CwpBJkSSOlnQ61nuucC82hVqBGoPGbFW3vjS0BqesLcaO7kwW/fdBnIxwLiWWHDWol0aLfQLEzjUzpS+tA1YYKvrG+yNMEeYtHEK9ZcltQD52uEtjK26DIY8tQU8PxMlXha6/XTOlt8MIcl8IPULmVWKT9k8LPTFQiXc=
+    #CSC_KEY_PASSWORD
+  - secure: TDKeF7/WGwR+di+JhNp29x7NPzVMO/q+72n58zB5goI1NUKaeKgjeWbfVYx9f+4G9a9/pdDVUfORt8i6OW8ZhhqYS4E8G5F56q+oX3nrjNqM8NqoK09ehZS/wdYGbenG9oTfXYenDdwusZV4Fq0BRRLjqAIXPQCKg3//MKseh/1fHDGVGXpYUimHRSCkwspbbfB/9Qw9KEBjweeXiAwB+5F+E7fPlVtqsIvtkkED1hKe0Z8HdECC6JTZ0ZHPDDFGV3aondXQDgUlfchnZ6HDdNDO5y/hPEj0laiZQ7BssenJ8Z7qjHc5O9AKXfG+6WFICHvtgjQ0+x6rk6gpvJcyI1x2+Kck/s0EcSkFY+Yz81BxdehIeKPn9U8LpGaFbtxsp01661yeaIpAqT/PqFsdj/kFXFT6gwZlGGPMBm2WgQR4A61qkOO1jokqz/z6CnY+MNeE8E1Fh4bFoZ0JwUJFJugoyDahHpVlLw5lZaSipJO6RZ1xjoZ3XGmxvtkM4dQ16xQ++Q8EgD878uCWn2jZ5YTQdKANfXYTKSiQfoEjLeX0T6I6GSdim4ZURjcolmGNMH/3jhISOXj+e2UkLc6jwO4Ek084o6ciJ2JjqEhXvXOCeRJ2I9cf2dEk7CvtbitiDly6XATo2FP4hqNdcNNWyj/jFvuTwFT6hzBqLk1BCBc=
+    #WIN_CSC_KEY_PASSWORD
+  - secure: LBwkNMw5paoxpeLcNvAbrSLghLH0kXmgctBkUK6hgqJ/6WReWKlERUCwWQp/NcAB5Nb8fUTV8hXz1UjeQG1HH65geRcxya9sf9xu446e2gRdYGfYk7AhZdIw97IlwTYv2tpnjejiVXIoClQjKRYtOkRC4BIGW+Ydun1hwEUXTVMCplOzPhpLrkJCIDDDdM4eJjWm6ZMshCKRlnt42sNdx63FHBAH72rqBnt2jd+ISIadASnWz0nQlN5aIvXR6cLZfSl8Qt/JDL+LXzWX+pNA4BegCtW3hBoLrW18QdNPxrvPCvKjRCC3LHuv+KEGbzGv/QkXg5f9BKZehIZ/hjYgxysjeHBI8yOfCoyrDafxSIso5ja2TtL9lLpW90gbkbtEFiaL2XOMUbQcwWQ6RShSoLZxgiAl6zUmrq3UtS30OjnjWgMj+WnU2BcgpmpPzU0Hz/fblX6/EnwXhPNRYZvm5JyhVRYLZypLWuV4XsWGuLbUOOrsYi7UvU+xo+3AaxbUW4A6XuQ/DUh0ZVNlpPGcVi7A2tx4/46Wm0oLwQ5NYVukHbEiHWZ4HuKqSionwtgG0T2a6/7JQdH7gb+/86z4YHmK89dd/aE84hBUGTB/pNvvtDBYBE3c60SzL0CFPJZrbz9E0gVhLfsHO+5/VCFIipgM8mYoVzsq+cONKbqUPCg=

CHANGELOG.md

@@ -5,6 +5,28 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
 
 ## [Unreleased]
 
+### Added
+* Allow typing of encryption password without clicking entry box ([#1977](https://github.com/lbryio/lbry-desktop/pull/1977))
+
+### Changed
+* Make tooltip smarter ([#1979](https://github.com/lbryio/lbry-desktop/pull/1979))
+
+### Fixed
+* Invite table cutoff with large number of invites ([#1985](https://github.com/lbryio/lbry-desktop/pull/1985))
+
+
+## [0.25.1] - 2018-09-18
+
+### Fixed
+ * Paragraph rendering now properly includes a margin for new paragraphs ([#1939](https://github.com/lbryio/lbry-desktop/pull/1939))
+ * Alignment of "navigate to page" input next to pagination on channel pages ([#1941](https://github.com/lbryio/lbry-desktop/pull/1941))
+ * Table spacing with claim name in transactions table ([#1942](https://github.com/lbryio/lbry-desktop/pull/1942))
+ * Ability to click away from tip screen without the cancel button ([#1944](https://github.com/lbryio/lbry-desktop/pull/1944))
+ * Disallow invalid tip amounts ([#1947](https://github.com/lbryio/lbry-desktop/pull/1947))
+ * Ensure we record views for downloaded content from subscriptions and autoplay ([#1962](https://github.com/lbryio/lbry-desktop/pull/1962))
+
+## [0.25.0] - 2018-08-29
+
 ### Added
  * Wallet encryption/decryption user flows in settings ([#1785](https://github.com/lbryio/lbry-desktop/pull/1785))
  * Suggestions for recommended content on file page ([#1845](https://github.com/lbryio/lbry-desktop/pull/1845))
@@ -18,14 +40,15 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
  * Desktop notification when publish is completed ([#1892](https://github.com/lbryio/lbry-desktop/pull/1892))
  * FAQ to Publishing Area ([#1833](https://github.com/lbryio/lbry-desktop/pull/1833))
  * FAQ to wallet security area ([#1917](https://github.com/lbryio/lbry-desktop/pull/1917))
+
 ### Changed
  * Upgraded LBRY Protocol to [version 0.21.2](https://github.com/lbryio/lbry/releases/tag/v0.21.2) fixing a download bug.
- * Searching now shows results by default, including direct lbry:// URL tile
+ * Searching now shows results by default, including direct lbry:// URL tile ([#1875](https://github.com/lbryio/lbry-desktop/pull/))
  * Replaced checkboxes with toggles throughout app ([#1834](https://github.com/lbryio/lbry-desktop/pull/1834))
  * Removed price tile when content is Free ([#1845](https://github.com/lbryio/lbry-desktop/pull/1845))
  * Pass error message from spee.ch API during thumbnail upload ([#1840](https://github.com/lbryio/lbry-desktop/pull/1840))
  * Use router pattern for rendering file viewer ([#1544](https://github.com/lbryio/lbry-desktop/pull/1544))
- * Missing word "to" added to the Bid Help Text (#1854)
+ * Missing word "to" added to the Bid Help Text ([#1854](https://github.com/lbryio/lbry-desktop/pull/1854))
  * Updated to electron@2 ([#1858](https://github.com/lbryio/lbry-desktop/pull/1858))
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "LBRY",
-  "version": "0.25.0",
+  "version": "0.25.1",
   "description": "A browser for the LBRY network, a digital marketplace controlled by its users.",
   "keywords": [
     "lbry"
@@ -30,7 +30,7 @@
     "flow-defs": "flow-typed install",
     "release": "yarn compile && electron-builder build",
     "precommit": "lint-staged",
-    "preinstall": "yarn cache clean lbry-redux",
+    "preinstall": "yarn cache clean lbry-redux && yarn cache clean lbryinc",
     "postinstall": "electron-builder install-app-deps && node build/downloadDaemon.js"
   },
   "dependencies": {
@@ -50,7 +50,8 @@
     "formik": "^0.10.4",
     "hast-util-sanitize": "^1.1.2",
     "keytar": "^4.2.1",
-    "lbry-redux": "lbryio/lbry-redux#421321a78397251589e5a890f4caa95e79975e2b",
+    "lbry-redux": "lbryio/lbry-redux#c079b108c3bc4ba2b4fb85fb112b52cfc040c301",
+    "lbryinc": "lbryio/lbryinc#de7ff055605b02a24821f0f9bab1d206eb7f235d",
     "localforage": "^1.7.1",
     "mammoth": "^1.4.6",
     "mime": "^2.3.1",

src/renderer/analytics.js

@@ -1,6 +1,6 @@
 // @flow
 import mixpanel from 'mixpanel-browser';
-import Lbryio from 'lbryio';
+import { Lbryio } from 'lbryinc';
 import isDev from 'electron-is-dev';
 
 if (isDev) {

src/renderer/app.js

@@ -38,4 +38,7 @@ global.__ = i18n.__;
 global.__n = i18n.__n;
 global.app = app;
 
+// Lbryinc needs access to the redux store for dispatching auth-releated actions
+global.store = app.store;
+
 export default app;

src/renderer/component/address/view.jsx

@@ -4,9 +4,14 @@ import { clipboard } from 'electron';
 import { FormRow } from 'component/common/form';
 import Button from 'component/button';
 import * as icons from 'constants/icons';
-
+/*
+noSnackbar added due to issue 1945
+https://github.com/lbryio/lbry-desktop/issues/1945
+"Snackbars and modals can't be displayed at the same time"
+*/
 type Props = {
   address: string,
+  noSnackbar: boolean,
   doNotify: ({ message: string, displayType: Array<string> }) => void,
 };
 
@@ -20,7 +25,7 @@ export default class Address extends React.PureComponent<Props> {
   input: ?HTMLInputElement;
 
   render() {
-    const { address, doNotify } = this.props;
+    const { address, doNotify, noSnackbar } = this.props;
 
     return (
       <FormRow verticallyCentered padded stretch>
@@ -43,10 +48,12 @@ export default class Address extends React.PureComponent<Props> {
           icon={icons.CLIPBOARD}
           onClick={() => {
             clipboard.writeText(address);
+            if (!noSnackbar) {
               doNotify({
                 message: __('Address copied'),
                 displayType: ['snackbar'],
               });
+            }
           }}
         />
       </FormRow>

src/renderer/component/app/index.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { selectPageTitle, selectHistoryIndex, selectActiveHistoryEntry } from 'lbry-redux';
 import { doRecordScroll } from 'redux/actions/navigation';
-import { selectUser } from 'redux/selectors/user';
+import { selectUser } from 'lbryinc';
 import { doAlertError } from 'redux/actions/app';
 import App from './view';
 
@@ -17,4 +17,7 @@ const perform = dispatch => ({
   recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)),
 });
 
-export default connect(select, perform)(App);
+export default connect(
+  select,
+  perform
+)(App);

src/renderer/component/cardVerify/index.js

@@ -1,12 +1,14 @@
-import React from 'react';
 import { connect } from 'react-redux';
-import { selectUserEmail } from 'redux/selectors/user';
+import { selectUserEmail } from 'lbryinc';
 import CardVerify from './view';
 
 const select = state => ({
   email: selectUserEmail(state),
 });
 
-const perform = dispatch => ({});
+const perform = () => ({});
 
-export default connect(select, perform)(CardVerify);
+export default connect(
+  select,
+  perform
+)(CardVerify);

src/renderer/component/channelTile/view.jsx

@@ -79,7 +79,7 @@ class ChannelTile extends React.PureComponent<Props> {
                   'card__title--large': size === 'large',
                 })}
               >
-                <TruncatedText lines={1}>{channelName || uri}</TruncatedText>
+                <TruncatedText text={channelName || uri} lines={1} />
               </div>
               <div
                 className={classnames('card__subtitle', {

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

@@ -24,9 +24,27 @@ type Props = {
   stretch?: boolean,
   affixClass?: string, // class applied to prefix/postfix label
   firstInList?: boolean, // at the top of a list, no padding top
+  autoFocus?: boolean,
+  inputProps: {
+    disabled?: boolean,
+  },
 };
 
 export class FormField extends React.PureComponent<Props> {
+  constructor(props) {
+    super(props);
+    this.input = React.createRef();
+  }
+
+  componentDidMount() {
+    const { autoFocus } = this.props;
+    const input = this.input.current;
+
+    if (input && autoFocus) {
+      input.focus();
+    }
+  }
+
   render() {
     const {
       render,
@@ -40,6 +58,7 @@ export class FormField extends React.PureComponent<Props> {
       children,
       stretch,
       affixClass,
+      autoFocus,
       ...inputProps
     } = this.props;
 
@@ -79,7 +98,7 @@ export class FormField extends React.PureComponent<Props> {
       } else if (type === 'checkbox') {
         input = <Toggle id={name} {...inputProps} />;
       } else {
-        input = <input type={type} id={name} {...inputProps} />;
+        input = <input type={type} id={name} {...inputProps} ref={this.input} />;
       }
     }
 

src/renderer/component/common/form-components/form-row.jsx

@@ -9,6 +9,7 @@ type Props = {
   verticallyCentered?: boolean,
   stretch?: boolean,
   alignRight?: boolean,
+  centered?: boolean,
 };
 
 export class FormRow extends React.PureComponent<Props> {
@@ -17,7 +18,7 @@ export class FormRow extends React.PureComponent<Props> {
   };
 
   render() {
-    const { children, padded, verticallyCentered, stretch, alignRight } = this.props;
+    const { children, padded, verticallyCentered, stretch, alignRight, centered } = this.props;
     return (
       <div
         className={classnames('form-row', {
@@ -25,6 +26,7 @@ export class FormRow extends React.PureComponent<Props> {
           'form-row--vertically-centered': verticallyCentered,
           'form-row--stretch': stretch,
           'form-row--right': alignRight,
+          'form-row--centered': centered,
         })}
       >
         {children}

src/renderer/component/common/icon.jsx

@@ -8,6 +8,7 @@ import Tooltip from 'component/common/tooltip';
 // These are copied from `scss/vars`, can they both come from the same source?
 const RED_COLOR = '#e2495e';
 const GREEN_COLOR = '#44b098';
+const BLUE_COLOR = '#49b2e2';
 
 type Props = {
   icon: string,
@@ -33,6 +34,8 @@ class IconComponent extends React.PureComponent<Props> {
         return RED_COLOR;
       case 'green':
         return GREEN_COLOR;
+      case 'blue':
+        return BLUE_COLOR;
       default:
         return undefined;
     }

src/renderer/component/common/tooltip.jsx

@@ -16,8 +16,67 @@ class ToolTip extends React.PureComponent<Props> {
     direction: 'bottom',
   };
 
+  constructor(props) {
+    super(props);
+    this.tooltip = React.createRef();
+    this.state = {
+      direction: this.props.direction,
+    };
+  }
+
+  componentDidMount() {
+    this.handleVisibility();
+  }
+
+  getVisibility = () => {
+    const node = this.tooltip.current;
+    const rect = node.getBoundingClientRect();
+
+    // Get parent-container
+    const viewport = document.getElementById('content');
+
+    const visibility = {
+      top: rect.top >= 0,
+      left: rect.left >= 0,
+      right: rect.right <= viewport.offsetWidth,
+      bottom: rect.bottom <= viewport.offsetHeight,
+    };
+
+    return visibility;
+  };
+
+  invertDirection = () => {
+    // Get current direction
+    const { direction } = this.state;
+    // Inverted directions
+    const directions = {
+      top: 'bottom',
+      left: 'right',
+      right: 'left',
+      bottom: 'top',
+    };
+
+    const inverted = directions[direction];
+
+    // Update direction
+    if (inverted) {
+      this.setState({ direction: inverted });
+    }
+  };
+
+  handleVisibility = () => {
+    const { direction } = this.state;
+    const visibility = this.getVisibility();
+
+    // Invert direction if tooltip is outside viewport bounds
+    if (!visibility[direction]) {
+      this.invertDirection();
+    }
+  };
+
   render() {
-    const { children, label, body, icon, direction, onComponent } = this.props;
+    const { direction } = this.state;
+    const { children, label, body, icon, onComponent } = this.props;
 
     const tooltipContent = children || label;
     const bodyLength = body.length;
@@ -25,6 +84,8 @@ class ToolTip extends React.PureComponent<Props> {
 
     return (
       <span
+        onFocus={this.handleVisibility}
+        onMouseOver={this.handleVisibility}
         className={classnames('tooltip', {
           'tooltip--label': label && !icon,
           'tooltip--icon': icon,
@@ -37,6 +98,7 @@ class ToolTip extends React.PureComponent<Props> {
       >
         {tooltipContent}
         <span
+          ref={this.tooltip}
           className={classnames('tooltip__body', {
             'tooltip__body--short': isShortDescription,
           })}

src/renderer/component/common/truncated-text.jsx

@@ -2,13 +2,13 @@
 import * as React from 'react';
 
 type Props = {
-  lines: ?number,
+  text: string,
-  children: React.Node,
+  lines: number,
 };
 
 const TruncatedText = (props: Props) => (
-  <span className="truncated-text" style={{ WebkitLineClamp: props.lines }}>
+  <span title={props.text} className="truncated-text" style={{ WebkitLineClamp: props.lines }}>
-    {props.children}
+    {props.text}
   </span>
 );
 

src/renderer/component/fileCard/index.js

@@ -8,7 +8,10 @@ import {
   makeSelectClaimIsMine,
 } from 'lbry-redux';
 import { doNavigate } from 'redux/actions/navigation';
-import { selectRewardContentClaimIds } from 'redux/selectors/content';
+import {
+  selectRewardContentClaimIds,
+  makeSelectContentPositionForUri,
+} from 'redux/selectors/content';
 import { selectShowNsfw } from 'redux/selectors/settings';
 import { selectPendingPublish } from 'redux/selectors/publish';
 import FileCard from './view';
@@ -32,12 +35,14 @@ const select = (state, props) => {
     rewardedContentClaimIds: selectRewardContentClaimIds(state, props),
     ...fileCardInfo,
     pending: !!pendingPublish,
+    position: makeSelectContentPositionForUri(props.uri)(state),
   };
 };
 
 const perform = dispatch => ({
   navigate: (path, params) => dispatch(doNavigate(path, params)),
   resolveUri: uri => dispatch(doResolveUri(uri)),
+  clearHistoryUri: uri => dispatch(doClearContentHistoryUri(uri)),
 });
 
 export default connect(

src/renderer/component/fileCard/view.jsx

@@ -5,13 +5,12 @@ import type { Claim, Metadata } from 'types/claim';
 import CardMedia from 'component/cardMedia';
 import TruncatedText from 'component/common/truncated-text';
 import Icon from 'component/common/icon';
-import FilePrice from 'component/filePrice';
 import UriIndicator from 'component/uriIndicator';
 import * as icons from 'constants/icons';
 import classnames from 'classnames';
-import { openCopyLinkMenu } from '../../util/contextMenu';
+import FilePrice from 'component/filePrice';
+import { openCopyLinkMenu } from 'util/contextMenu';
 
-// TODO: iron these out
 type Props = {
   uri: string,
   claim: ?Claim,
@@ -21,11 +20,11 @@ type Props = {
   rewardedContentClaimIds: Array<string>,
   obscureNsfw: boolean,
   claimIsMine: boolean,
-  showPrice: boolean,
   pending?: boolean,
   /* eslint-disable react/no-unused-prop-types */
   resolveUri: string => void,
   isResolvingUri: boolean,
+  showPrice: boolean,
   /* eslint-enable react/no-unused-prop-types */
 };
 
@@ -59,8 +58,8 @@ class FileCard extends React.PureComponent<Props> {
       rewardedContentClaimIds,
       obscureNsfw,
       claimIsMine,
-      showPrice,
       pending,
+      showPrice,
     } = this.props;
 
     const shouldHide = !claimIsMine && !pending && obscureNsfw && metadata && metadata.nsfw;
@@ -94,7 +93,7 @@ class FileCard extends React.PureComponent<Props> {
         <CardMedia thumbnail={thumbnail} />
         <div className="card__title-identity">
           <div className="card__title--small card__title--file-card">
-            <TruncatedText lines={2}>{title}</TruncatedText>
+            <TruncatedText text={title} lines={2} />
           </div>
           <div className="card__subtitle">
             {pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />}

src/renderer/component/fileDownloadLink/index.js

@@ -7,8 +7,7 @@ import {
   makeSelectClaimForUri,
 } from 'lbry-redux';
 import { doOpenFileInShell } from 'redux/actions/file';
-import { doPurchaseUri, doStartDownload } from 'redux/actions/content';
+import { doPurchaseUri, doStartDownload, doSetPlayingUri } from 'redux/actions/content';
-import { doPause } from 'redux/actions/media';
 import FileDownloadLink from './view';
 
 const select = (state, props) => ({
@@ -24,7 +23,7 @@ const perform = dispatch => ({
   openInShell: path => dispatch(doOpenFileInShell(path)),
   purchaseUri: uri => dispatch(doPurchaseUri(uri)),
   restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)),
-  doPause: () => dispatch(doPause()),
+  pause: () => dispatch(doSetPlayingUri(null)),
 });
 
 export default connect(

src/renderer/component/fileDownloadLink/view.jsx

@@ -22,7 +22,7 @@ type Props = {
   restartDownload: (string, number) => void,
   openInShell: string => void,
   purchaseUri: string => void,
-  doPause: () => void,
+  pause: () => void,
 };
 
 class FileDownloadLink extends React.PureComponent<Props> {
@@ -50,14 +50,14 @@ class FileDownloadLink extends React.PureComponent<Props> {
       purchaseUri,
       costInfo,
       loading,
-      doPause,
+      pause,
       claim,
     } = this.props;
 
     const openFile = () => {
       if (fileInfo) {
         openInShell(fileInfo.download_path);
-        doPause();
+        pause();
       }
     };
 

src/renderer/component/fileList/view.jsx

@@ -145,7 +145,8 @@ class FileList extends React.PureComponent<Props, State> {
         name: claimName,
         claim_name: claimNameDownloaded,
         claim_id: claimId,
-        outpoint,
+        txid,
+        nout,
       } = fileInfo;
       const uriParams = {};
 
@@ -155,6 +156,7 @@ class FileList extends React.PureComponent<Props, State> {
       uriParams.contentName = name;
       uriParams.claimId = claimId;
       const uri = buildURI(uriParams);
+      const outpoint = `${txid}:${nout}`;
 
       // See https://github.com/lbryio/lbry-desktop/issues/1327 for discussion around using outpoint as the key
       content.push(<FileCard key={outpoint} uri={uri} checkPending={checkPending} />);

src/renderer/component/fileTile/view.jsx

@@ -127,7 +127,7 @@ class FileTile extends React.PureComponent<Props> {
                   'card__title--large': size === 'large',
                 })}
               >
-                <TruncatedText lines={size === 'small' ? 2 : 3}>{title || name}</TruncatedText>
+                <TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />
               </div>
               <div
                 className={classnames('card__subtitle', {
@@ -151,7 +151,7 @@ class FileTile extends React.PureComponent<Props> {
                     'card__subtext--large': size === 'large',
                   })}
                 >
-                  <TruncatedText lines={size === 'large' ? 4 : 3}>{description}</TruncatedText>
+                  <TruncatedText text={description} lines={size === 'large' ? 4 : 3} />
                 </div>
               )}
               {!name && (

src/renderer/component/fileViewer/index.js

@@ -2,9 +2,8 @@ import { connect } from 'react-redux';
 import * as settings from 'constants/settings';
 import { doChangeVolume } from 'redux/actions/app';
 import { selectVolume } from 'redux/selectors/app';
-import { doPlayUri, doSetPlayingUri } from 'redux/actions/content';
+import { doPlayUri, doSetPlayingUri, savePosition } from 'redux/actions/content';
-import { doPlay, doPause, savePosition } from 'redux/actions/media';
+import { doClaimEligiblePurchaseRewards } from 'lbryinc';
-import { doClaimEligiblePurchaseRewards } from 'redux/actions/rewards';
 import {
   makeSelectMetadataForUri,
   makeSelectContentTypeForUri,
@@ -16,8 +15,7 @@ import {
   selectSearchBarFocused,
 } from 'lbry-redux';
 import { makeSelectClientSetting, selectShowNsfw } from 'redux/selectors/settings';
-import { selectMediaPaused, makeSelectMediaPositionForUri } from 'redux/selectors/media';
+import { selectPlayingUri, makeSelectContentPositionForUri } from 'redux/selectors/content';
-import { selectPlayingUri } from 'redux/selectors/content';
 import { selectFileInfoErrors } from 'redux/selectors/file_info';
 import FileViewer from './view';
 
@@ -32,8 +30,7 @@ const select = (state, props) => ({
   playingUri: selectPlayingUri(state),
   contentType: makeSelectContentTypeForUri(props.uri)(state),
   volume: selectVolume(state),
-  mediaPaused: selectMediaPaused(state),
+  position: makeSelectContentPositionForUri(props.uri)(state),
-  mediaPosition: makeSelectMediaPositionForUri(props.uri)(state),
   autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),
   searchBarFocused: selectSearchBarFocused(state),
   fileInfoErrors: selectFileInfoErrors(state),
@@ -43,10 +40,9 @@ const perform = dispatch => ({
   play: uri => dispatch(doPlayUri(uri)),
   cancelPlay: () => dispatch(doSetPlayingUri(null)),
   changeVolume: volume => dispatch(doChangeVolume(volume)),
-  doPlay: () => dispatch(doPlay()),
-  doPause: () => dispatch(doPause()),
-  savePosition: (claimId, position) => dispatch(savePosition(claimId, position)),
   claimRewards: () => dispatch(doClaimEligiblePurchaseRewards()),
+  savePosition: (claimId, outpoint, position) =>
+    dispatch(savePosition(claimId, outpoint, position)),
 });
 
 export default connect(

src/renderer/component/fileViewer/internal/player.jsx

@@ -27,9 +27,11 @@ class MediaPlayer extends React.PureComponent {
     this.toggleFullScreenVideo = this.toggleFullScreen.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     const el = this.refs.media.children[0];
-    if (!this.props.paused && nextProps.paused && !el.paused) el.pause();
+    if (this.props.playingUri && !nextProps.playingUri && !el.paused) {
+      el.pause();
+    }
   }
 
   componentDidMount() {
@@ -86,11 +88,15 @@ class MediaPlayer extends React.PureComponent {
     document.addEventListener('keydown', this.togglePlayListener);
     const mediaElement = this.media.children[0];
     if (mediaElement) {
-      mediaElement.currentTime = position || 0;
+      if (position) {
-      mediaElement.addEventListener('play', () => this.props.doPlay());
+        mediaElement.currentTime = position;
-      mediaElement.addEventListener('pause', () => this.props.doPause());
+      }
       mediaElement.addEventListener('timeupdate', () =>
-        this.props.savePosition(claim.claim_id, mediaElement.currentTime)
+        this.props.savePosition(
+          claim.claim_id,
+          `${claim.txid}:${claim.nout}`,
+          mediaElement.currentTime
+        )
       );
       mediaElement.addEventListener('click', this.togglePlayListener);
       mediaElement.addEventListener('loadedmetadata', loadedMetadata.bind(this), {
@@ -136,7 +142,6 @@ class MediaPlayer extends React.PureComponent {
     if (mediaElement) {
       mediaElement.removeEventListener('click', this.togglePlayListener);
     }
-    this.props.doPause();
   }
 
   toggleFullScreen(event) {

src/renderer/component/fileViewer/view.jsx

@@ -34,11 +34,8 @@ type Props = {
   volume: number,
   claim: Claim,
   uri: string,
-  doPlay: () => void,
+  savePosition: (string, string, number) => void,
-  doPause: () => void,
+  position: ?number,
-  savePosition: (string, number) => void,
-  mediaPaused: boolean,
-  mediaPosition: ?number,
   className: ?string,
   obscureNsfw: boolean,
   play: string => void,
@@ -127,14 +124,14 @@ class FileViewer extends React.PureComponent<Props> {
   }
 
   handleAutoplay = (props: Props) => {
-    const { autoplay, playingUri, fileInfo, costInfo, isDownloading, uri, play, metadata } = props;
+    const { autoplay, playingUri, fileInfo, costInfo, isDownloading, uri, metadata } = props;
 
     const playable = autoplay && playingUri !== uri && metadata && !metadata.nsfw;
 
     if (playable && costInfo && costInfo.cost === 0 && !fileInfo && !isDownloading) {
-      play(uri);
+      this.playContent();
     } else if (playable && fileInfo && fileInfo.blobs_completed > 0) {
-      play(uri);
+      this.playContent();
     }
   };
 
@@ -202,11 +199,8 @@ class FileViewer extends React.PureComponent<Props> {
       volume,
       claim,
       uri,
-      doPlay,
-      doPause,
       savePosition,
-      mediaPaused,
+      position,
-      mediaPosition,
       className,
       obscureNsfw,
       mediaType,
@@ -251,14 +245,12 @@ class FileViewer extends React.PureComponent<Props> {
                 downloadCompleted={fileInfo.completed}
                 changeVolume={changeVolume}
                 volume={volume}
-                doPlay={doPlay}
-                doPause={doPause}
                 savePosition={savePosition}
                 claim={claim}
                 uri={uri}
-                paused={mediaPaused}
+                position={position}
-                position={mediaPosition}
                 startedPlayingCb={this.startedPlayingCb}
+                playingUri={playingUri}
               />
             )}
           </div>

src/renderer/component/inviteList/index.js

@@ -1,6 +1,5 @@
-import React from 'react';
 import { connect } from 'react-redux';
-import { selectUserInvitees, selectUserInviteStatusIsPending } from 'redux/selectors/user';
+import { selectUserInvitees, selectUserInviteStatusIsPending } from 'lbryinc';
 import InviteList from './view';
 
 const select = state => ({
@@ -8,6 +7,9 @@ const select = state => ({
   isPending: selectUserInviteStatusIsPending(state),
 });
 
-const perform = dispatch => ({});
+const perform = () => ({});
 
-export default connect(select, perform)(InviteList);
+export default connect(
+  select,
+  perform
+)(InviteList);

src/renderer/component/inviteList/view.jsx

@@ -1,10 +1,20 @@
+// @flow
 import React from 'react';
 import Icon from 'component/common/icon';
 import RewardLink from 'component/rewardLink';
-import rewards from 'rewards.js';
+import { rewards } from 'lbryinc';
 import * as icons from 'constants/icons';
 
-class InviteList extends React.PureComponent {
+type Props = {
+  invitees: ?Array<{
+    email: string,
+    invite_accepted: boolean,
+    invite_reward_claimed: boolean,
+    invite_reward_claimable: boolean,
+  }>,
+};
+
+class InviteList extends React.PureComponent<Props> {
   render() {
     const { invitees } = this.props;
 
@@ -31,8 +41,8 @@ class InviteList extends React.PureComponent {
                 </tr>
               </thead>
               <tbody>
-                {invitees.map((invitee, index) => (
+                {invitees.map(invitee => (
-                  <tr key={index}>
+                  <tr key={invitee.email}>
                     <td>{invitee.email}</td>
                     <td className="text-center">
                       {invitee.invite_accepted ? (

src/renderer/component/inviteNew/index.js

@@ -3,8 +3,8 @@ import {
   selectUserInvitesRemaining,
   selectUserInviteNewIsPending,
   selectUserInviteNewErrorMessage,
-} from 'redux/selectors/user';
+  doUserInviteNew,
-import { doUserInviteNew } from 'redux/actions/user';
+} from 'lbryinc';
 import InviteNew from './view';
 
 const select = state => ({
@@ -17,4 +17,7 @@ const perform = dispatch => ({
   inviteNew: email => dispatch(doUserInviteNew(email)),
 });
 
-export default connect(select, perform)(InviteNew);
+export default connect(
+  select,
+  perform
+)(InviteNew);

src/renderer/component/page/index.js

@@ -4,11 +4,10 @@ import {
   selectPageTitle,
   selectIsBackDisabled,
   selectIsForwardDisabled,
-  selectNavLinks,
 } from 'lbry-redux';
 import { doNavigate, doHistoryBack, doHistoryForward } from 'redux/actions/navigation';
 import { doDownloadUpgrade } from 'redux/actions/app';
-import { selectIsUpgradeAvailable } from 'redux/selectors/app';
+import { selectIsUpgradeAvailable, selectNavLinks } from 'redux/selectors/app';
 import { formatCredits } from 'util/formatCredits';
 import Page from './view';
 
@@ -28,4 +27,7 @@ const perform = dispatch => ({
   downloadUpgrade: () => dispatch(doDownloadUpgrade()),
 });
 
-export default connect(select, perform)(Page);
+export default connect(
+  select,
+  perform
+)(Page);

src/renderer/component/publishForm/internal/bid-help-text.jsx

@@ -1,74 +1,38 @@
 // @flow
 import * as React from 'react';
-import Button from 'component/button';
-import { buildURI } from 'lbry-redux';
-import type { Claim } from 'types/claim';
 
 type Props = {
   uri: ?string,
   isResolvingUri: boolean,
-  winningBidForClaimUri: ?number,
+  amountNeededForTakeover: ?number,
-  myClaimForUri: ?Claim,
-  isStillEditing: boolean,
-  onEditMyClaim: (any, string) => void,
 };
 
 class BidHelpText extends React.PureComponent<Props> {
   render() {
-    const {
+    const { uri, isResolvingUri, amountNeededForTakeover } = this.props;
-      uri,
+    let bidHelpText;
-      isResolvingUri,
-      winningBidForClaimUri,
-      myClaimForUri,
-      onEditMyClaim,
-      isStillEditing,
-    } = this.props;
-
-    if (!uri) {
-      return __('Create a URL for this content.');
-    }
-
-    if (isStillEditing) {
-      return __(
-        'You are currently editing this claim. If you change the URL, you will need to reselect a file.'
-      );
-    }
 
+    if (uri) {
       if (isResolvingUri) {
-      return __('Checking the winning claim amount...');
+        bidHelpText = __('Checking the winning claim amount...');
+      } else if (!amountNeededForTakeover) {
+        bidHelpText = __('Any amount will give you the winning bid.');
+      } else {
+        bidHelpText = `${__('If you bid more than')} ${amountNeededForTakeover} LBC, ${__(
+          'when someone navigates to'
+        )} ${uri} ${__('it will load your published content')}. ${__(
+          'However, you can get a longer version of this URL for any bid'
+        )}.`;
+      }
     }
-
-    if (myClaimForUri) {
-      const editUri = buildURI({
-        contentName: myClaimForUri.name,
-        claimId: myClaimForUri.claim_id,
-      });
 
     return (
       <React.Fragment>
-          {__('You already have a claim at')}
+        {__('This LBC remains yours and the deposit can be undone at any time.')}
-          {` ${uri} `}
+        <div>{bidHelpText}</div>
-          <Button
-            button="link"
-            label="Edit it"
-            onClick={() => onEditMyClaim(myClaimForUri, editUri)}
-          />
-          <br />
-          {__('Publishing will update your existing claim.')}
       </React.Fragment>
     );
   }
-
-    return winningBidForClaimUri ? (
-      <React.Fragment>
-        {__('A deposit greater than')} {winningBidForClaimUri} {__('is needed to win')}
-        {` ${uri}. `}
-        {__('However, you can still get this URL for any amount.')}
-      </React.Fragment>
-    ) : (
-      __('Any amount will give you the winning bid.')
-    );
-  }
 }
 
 export default BidHelpText;

src/renderer/component/publishForm/internal/name-help-text.jsx

@@ -0,0 +1,49 @@
+// @flow
+import * as React from 'react';
+import Button from 'component/button';
+import { buildURI } from 'lbry-redux';
+import type { Claim } from 'types/claim';
+
+type Props = {
+  uri: ?string,
+  myClaimForUri: ?Claim,
+  isStillEditing: boolean,
+  onEditMyClaim: (any, string) => void,
+};
+
+class NameHelpText extends React.PureComponent<Props> {
+  render() {
+    const { uri, myClaimForUri, onEditMyClaim, isStillEditing } = this.props;
+
+    let nameHelpText;
+
+    if (isStillEditing) {
+      nameHelpText = __(
+        'You are currently editing this claim. If you change the URL, you will need to reselect a file.'
+      );
+    } else if (uri && myClaimForUri) {
+      const editUri = buildURI({
+        contentName: myClaimForUri.name,
+        claimId: myClaimForUri.claim_id,
+      });
+
+      nameHelpText = (
+        <React.Fragment>
+          {__('You already have a claim at')}
+          {` ${uri} `}
+          <Button
+            button="link"
+            label="Edit it"
+            onClick={() => onEditMyClaim(myClaimForUri, editUri)}
+          />
+          <br />
+          {__('Publishing will update your existing claim.')}
+        </React.Fragment>
+      );
+    }
+
+    return <React.Fragment>{nameHelpText || __('Create a URL for this content.')}</React.Fragment>;
+  }
+}
+
+export default NameHelpText;

src/renderer/component/publishForm/view.jsx

@@ -13,6 +13,7 @@ import { CHANNEL_NEW, CHANNEL_ANONYMOUS, MINIMUM_PUBLISH_BID } from 'constants/c
 import * as icons from 'constants/icons';
 import type { Claim } from 'types/claim';
 import BidHelpText from './internal/bid-help-text';
+import NameHelpText from './internal/name-help-text';
 import LicenseType from './internal/license-type';
 
 type Props = {
@@ -53,8 +54,9 @@ type Props = {
   clearPublish: () => void,
   resolveUri: string => void,
   scrollToTop: () => void,
-  prepareEdit: ({ }) => void,
+  prepareEdit: ({}) => void,
   resetThumbnailStatus: () => void,
+  amountNeededForTakeover: ?number,
 };
 
 class PublishForm extends React.PureComponent<Props> {
@@ -84,6 +86,7 @@ class PublishForm extends React.PureComponent<Props> {
     // If they are midway through a channel creation, treat it as anonymous until it completes
     const channelName = channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : channel;
 
+    // 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({ contentName: name, channelName });
@@ -92,6 +95,11 @@ class PublishForm extends React.PureComponent<Props> {
     }
 
     if (uri) {
+      if (channelName) {
+        // resolve without the channel name so we know the winning bid for it
+        const uriLessChannel = buildURI({ contentName: name });
+        resolveUri(uriLessChannel);
+      }
       resolveUri(uri);
       return uri;
     }
@@ -295,8 +303,9 @@ class PublishForm extends React.PureComponent<Props> {
           {name && nameError && <div>{__('The URL you created is not valid')}</div>}
           {!bid && <div>{__('A bid amount is required')}</div>}
           {!!bid && bidError && <div>{bidError}</div>}
-          {uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS
+          {uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS && (
-          && <div>{__('Please wait for thumbnail to finish uploading')}</div>}
+            <div>{__('Please wait for thumbnail to finish uploading')}</div>
+          )}
           {!tosAccepted && <div>{__('You must agree to the terms of service')}</div>}
           {!!editingURI &&
             !isStillEditing &&
@@ -338,6 +347,7 @@ class PublishForm extends React.PureComponent<Props> {
       thumbnailPath,
       resetThumbnailStatus,
       isStillEditing,
+      amountNeededForTakeover,
     } = this.props;
 
     const formDisabled = (!filePath && !editingURI) || publishing;
@@ -350,19 +360,17 @@ class PublishForm extends React.PureComponent<Props> {
       submitLabel = !publishing ? __('Publish') : __('Publishing...');
     }
 
+    const shortUri = buildURI({ contentName: name });
+
     return (
       <Form onSubmit={this.handlePublish}>
         <section className={classnames('card card--section', { 'card--disabled': publishing })}>
           <div className="card__title">{__('Content')}</div>
           <div className="card__subtitle">
-            {isStillEditing ? __('Editing a claim') : __('What are you publishing?')}
+            {isStillEditing ? __('Editing a claim') : __('What are you publishing?')}{' '}
-            {' '}{__(
+            {__('Read our')}{' '}
-              'Read our'
-            )}{' '}
             <Button button="link" label={__('FAQ')} href="https://lbry.io/faq/how-to-publish" />{' '}
-            {__(
+            {__('to learn more.')}
-              'to learn more.'
-            )}
           </div>
           {(filePath || !!editingURI) && (
             <div className="card-media__internal-links">
@@ -496,6 +504,7 @@ class PublishForm extends React.PureComponent<Props> {
               <FormRow>
                 <FormField
                   stretch
+                  label={__('Name')}
                   prefix={`lbry://${
                     !channel || channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW
                       ? ''
@@ -508,12 +517,9 @@ class PublishForm extends React.PureComponent<Props> {
                   onChange={event => this.handleNameChange(event.target.value)}
                   error={nameError}
                   helper={
-                    <BidHelpText
+                    <NameHelpText
                       isStillEditing={isStillEditing}
                       uri={uri}
-                      editingURI={editingURI}
-                      isResolvingUri={isResolvingUri}
-                      winningBidForClaimUri={winningBidForClaimUri}
                       myClaimForUri={myClaimForUri}
                       onEditMyClaim={this.editExistingClaim}
                     />
@@ -534,8 +540,14 @@ class PublishForm extends React.PureComponent<Props> {
                 min="0"
                 disabled={!name}
                 onChange={event => this.handleBidChange(parseFloat(event.target.value))}
-                helper={__('This LBC remains yours and the deposit can be undone at any time.')}
                 placeholder={winningBidForClaimUri ? winningBidForClaimUri + 0.1 : 0.1}
+                helper={
+                  <BidHelpText
+                    uri={shortUri}
+                    isResolvingUri={isResolvingUri}
+                    amountNeededForTakeover={amountNeededForTakeover}
+                  />
+                }
               />
             </div>
           </section>

src/renderer/component/rewardLink/index.js

@@ -3,9 +3,10 @@ import {
   makeSelectClaimRewardError,
   makeSelectRewardByType,
   makeSelectIsRewardClaimPending,
-} from 'redux/selectors/rewards';
+  doClaimRewardType,
+  doClaimRewardClearError,
+} from 'lbryinc';
 import { doNavigate } from 'redux/actions/navigation';
-import { doClaimRewardType, doClaimRewardClearError } from 'redux/actions/rewards';
 import RewardLink from './view';
 
 const makeSelect = () => {
@@ -23,9 +24,12 @@ const makeSelect = () => {
 };
 
 const perform = dispatch => ({
-  claimReward: reward => dispatch(doClaimRewardType(reward.reward_type, true)),
+  claimReward: reward => dispatch(doClaimRewardType(reward.reward_type)),
   clearError: reward => dispatch(doClaimRewardClearError(reward)),
   navigate: path => dispatch(doNavigate(path)),
 });
 
-export default connect(makeSelect, perform)(RewardLink);
+export default connect(
+  makeSelect,
+  perform
+)(RewardLink);

src/renderer/component/rewardListClaimed/index.js

@@ -1,10 +1,12 @@
-import React from 'react';
 import { connect } from 'react-redux';
-import { selectClaimedRewards } from 'redux/selectors/rewards';
+import { selectClaimedRewards } from 'lbryinc';
 import RewardListClaimed from './view';
 
 const select = state => ({
   rewards: selectClaimedRewards(state),
 });
 
-export default connect(select, null)(RewardListClaimed);
+export default connect(
+  select,
+  null
+)(RewardListClaimed);

src/renderer/component/rewardSummary/index.js

@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
-import { selectUnclaimedRewardValue, selectFetchingRewards } from 'redux/selectors/rewards';
+import { selectUnclaimedRewardValue, selectFetchingRewards, doRewardList } from 'lbryinc';
-import { doRewardList } from 'redux/actions/rewards';
 import { doFetchRewardedContent } from 'redux/actions/content';
 import RewardSummary from './view';
 

src/renderer/component/rewardTile/index.js

@@ -1,5 +1,12 @@
-import React from 'react';
 import { connect } from 'react-redux';
+import { MODALS, doNotify } from 'lbry-redux';
 import RewardTile from './view';
 
-export default connect(null, null)(RewardTile);
+const perform = dispatch => ({
+  openRewardCodeModal: () => dispatch(doNotify({ id: MODALS.REWARD_GENERATED_CODE })),
+});
+
+export default connect(
+  null,
+  perform
+)(RewardTile);

src/renderer/component/rewardTile/view.jsx

@@ -3,10 +3,11 @@ import React from 'react';
 import Icon from 'component/common/icon';
 import RewardLink from 'component/rewardLink';
 import Button from 'component/button';
-import rewards from 'rewards';
+import { rewards } from 'lbryinc';
 import * as icons from 'constants/icons';
 
 type Props = {
+  openRewardCodeModal: () => void,
   reward: {
     id: string,
     reward_title: string,
@@ -19,7 +20,7 @@ type Props = {
 };
 
 const RewardTile = (props: Props) => {
-  const { reward } = props;
+  const { reward, openRewardCodeModal } = props;
   const claimed = !!reward.transaction_id;
 
   return (
@@ -27,6 +28,9 @@ const RewardTile = (props: Props) => {
       <div className="card__title">{reward.reward_title}</div>
       <div className="card__subtitle">{reward.reward_description}</div>
       <div className="card__actions">
+        {reward.reward_type === rewards.TYPE_GENERATED_CODE && (
+          <Button button="primary" onClick={openRewardCodeModal} label={__('Enter Code')} />
+        )}
         {reward.reward_type === rewards.TYPE_REFERRAL && (
           <Button button="primary" navigate="/invite" label={__('Go To Invites')} />
         )}

src/renderer/component/router/view.jsx

@@ -18,6 +18,7 @@ import InvitePage from 'page/invite';
 import BackupPage from 'page/backup';
 import SubscriptionsPage from 'page/subscriptions';
 import SearchPage from 'page/search';
+import UserHistoryPage from 'page/userHistory';
 
 const route = (props, page, routesMap) => {
   const component = routesMap[page];
@@ -53,6 +54,7 @@ const Router = props => {
     wallet: <WalletPage params={params} />,
     subscriptions: <SubscriptionsPage params={params} />,
     search: <SearchPage {...params} />,
+    user_history: <UserHistoryPage {...params} />,
   });
 };
 

src/renderer/component/selectThumbnail/view.jsx

@@ -55,13 +55,24 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
     const thumbnailSrc =
       !thumbnail || thumbnailError ? Native.imagePath(thumbnailErrorImage) : thumbnail;
 
+    /*
+      Note:
+      We are using backgroundImage instead of an <img /> to zoom if the selected thumbnail isn't
+      the proper aspect ratio. This is to avoid blackbars on the side of images and inconsistent thumbnails
+      We still need to render the image to see if there is an error loading the url
+    */
+
     return (
       <div className="card__content">
         {status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? (
           <div className="column">
+            <div
+              className="column__item thumbnail-preview card__media"
+              style={{ backgroundImage: `url(${thumbnailSrc})` }}
+            >
               <img
+                style={{ display: 'none' }}
                 src={thumbnailSrc}
-              className="column__item thumbnail-preview"
                 alt={__('Thumbnail Preview')}
                 onError={() => {
                   this.setState({
@@ -71,6 +82,7 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
                   });
                 }}
               />
+            </div>
             <div className="column__item">
               <FormField
                 className="input--thumbnail"

src/renderer/component/sideBar/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { selectNavLinks } from 'lbry-redux';
+import { selectNavLinks } from 'redux/selectors/app';
 import { selectNotifications } from 'redux/selectors/subscriptions';
 import SideBar from './view';
 

src/renderer/component/socialShare/index.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { makeSelectClaimForUri } from 'lbry-redux';
+import SocialShare from './view';
+
+const select = (state, props) => ({
+  claim: makeSelectClaimForUri(props.uri)(state),
+});
+
+export default connect(select)(SocialShare);

src/renderer/component/socialShare/view.jsx

@@ -0,0 +1,79 @@
+// @flow
+import React from 'react';
+import type { Claim } from 'types/claim';
+import Button from 'component/button';
+import * as icons from 'constants/icons';
+import Tooltip from 'component/common/tooltip';
+import Address from 'component/address';
+
+type Props = {
+  claim: Claim,
+  onDone: () => void,
+};
+
+class SocialShare extends React.PureComponent<Props> {
+  constructor(props: Props) {
+    super(props);
+
+    this.input = undefined;
+  }
+
+  input: ?HTMLInputElement;
+
+  render() {
+    const {
+      claim_id: claimId,
+      name: claimName,
+      channel_name: channelName,
+      value,
+    } = this.props.claim;
+    const channelClaimId =
+      value && value.publisherSignature && value.publisherSignature.certificateId;
+    const { onDone } = this.props;
+    const speechPrefix = 'http://spee.ch/';
+    const speechURL =
+      channelName && channelClaimId
+        ? `${speechPrefix}${channelName}:${channelClaimId}/${claimName}`
+        : `${speechPrefix}${claimName}#${claimId}`;
+
+    return (
+      <section className="card__content">
+        <Address address={speechURL} noSnackbar />
+        <div className="card__actions card__actions--center">
+          <Tooltip onComponent body={__('Facebook')}>
+            <Button
+              iconColor="blue"
+              icon={icons.FACEBOOK}
+              button="alt"
+              label={__('')}
+              href={`https://facebook.com/sharer/sharer.php?u=${speechURL}`}
+            />
+          </Tooltip>
+          <Tooltip onComponent body={__('Twitter')}>
+            <Button
+              iconColor="blue"
+              icon={icons.TWITTER}
+              button="alt"
+              label={__('')}
+              href={`https://twitter.com/home?status=${speechURL}`}
+            />
+          </Tooltip>
+          <Tooltip onComponent body={__('View on Spee.ch')}>
+            <Button
+              icon={icons.GLOBE}
+              iconColor="blue"
+              button="alt"
+              label={__('')}
+              href={`${speechURL}`}
+            />
+          </Tooltip>
+        </div>
+        <div className="card__actions">
+          <Button button="link" label={__('Done')} onClick={onDone} />
+        </div>
+      </section>
+    );
+  }
+}
+
+export default SocialShare;

src/renderer/component/transactionList/index.js

@@ -1,8 +1,7 @@
 import { connect } from 'react-redux';
-import { selectClaimedRewardsByTransactionId } from 'redux/selectors/rewards';
+import { selectClaimedRewardsByTransactionId } from 'lbryinc';
 import { doNavigate } from 'redux/actions/navigation';
-import { doNotify } from 'lbry-redux';
+import { selectAllMyClaimsByOutpoint, doNotify } from 'lbry-redux';
-import { selectAllMyClaimsByOutpoint } from 'lbry-redux';
 import TransactionList from './view';
 
 const select = state => ({
@@ -15,4 +14,7 @@ const perform = dispatch => ({
   openModal: (modal, props) => dispatch(doNotify(modal, props)),
 });
 
-export default connect(select, perform)(TransactionList);
+export default connect(
+  select,
+  perform
+)(TransactionList);

src/renderer/component/userEmailNew/index.js

@@ -1,7 +1,5 @@
-import React from 'react';
 import { connect } from 'react-redux';
-import { doUserEmailNew, doUserInviteNew } from 'redux/actions/user';
+import { selectEmailNewIsPending, selectEmailNewErrorMessage, doUserEmailNew } from 'lbryinc';
-import { selectEmailNewIsPending, selectEmailNewErrorMessage } from 'redux/selectors/user';
 import UserEmailNew from './view';
 
 const select = state => ({
@@ -13,4 +11,7 @@ const perform = dispatch => ({
   addUserEmail: email => dispatch(doUserEmailNew(email)),
 });
 
-export default connect(select, perform)(UserEmailNew);
+export default connect(
+  select,
+  perform
+)(UserEmailNew);

src/renderer/component/userEmailNew/view.jsx

@@ -47,7 +47,7 @@ class UserEmailNew extends React.PureComponent<Props, State> {
         </p>
         <p>{__("We'll never sell your email, and you can unsubscribe at any time.")}</p>
         <Form onSubmit={this.handleSubmit}>
-          <FormRow>
+          <FormRow padded>
             <FormField
               stretch
               type="email"
@@ -63,6 +63,9 @@ class UserEmailNew extends React.PureComponent<Props, State> {
             <Submit label="Submit" disabled={isPending} />
             {cancelButton}
           </div>
+          <div className="card__content help">
+            {`${__('Your email may be used to sync usage data across devices.')} `}
+          </div>
         </Form>
       </div>
     );

src/renderer/component/userEmailVerify/index.js

@@ -1,14 +1,12 @@
 import { connect } from 'react-redux';
-import {
-  doUserEmailVerify,
-  doUserEmailVerifyFailure,
-  doUserResendVerificationEmail,
-} from 'redux/actions/user';
 import {
   selectEmailVerifyIsPending,
   selectEmailToVerify,
   selectEmailVerifyErrorMessage,
-} from 'redux/selectors/user';
+  doUserEmailVerify,
+  doUserEmailVerifyFailure,
+  doUserResendVerificationEmail,
+} from 'lbryinc';
 import UserEmailVerify from './view';
 
 const select = state => ({
@@ -23,4 +21,7 @@ const perform = dispatch => ({
   resendVerificationEmail: email => dispatch(doUserResendVerificationEmail(email)),
 });
 
-export default connect(select, perform)(UserEmailVerify);
+export default connect(
+  select,
+  perform
+)(UserEmailVerify);

src/renderer/component/userEmailVerify/view.jsx

@@ -56,7 +56,7 @@ class UserEmailVerify extends React.PureComponent<Props, State> {
     return (
       <Form onSubmit={this.handleSubmit}>
         <p>Please enter the verification code emailed to {email}.</p>
-        <FormRow>
+        <FormRow padded>
           <FormField
             stretch
             name="code"

src/renderer/component/userHistory/index.js

@@ -0,0 +1,27 @@
+import { connect } from 'react-redux';
+import { selectHistoryPageCount, makeSelectHistoryForPage } from 'redux/selectors/content';
+import { doNavigate } from 'redux/actions/navigation';
+import { selectCurrentParams, makeSelectCurrentParam } from 'lbry-redux';
+import { doClearContentHistoryUri } from 'redux/actions/content';
+import UserHistory from './view';
+
+const select = state => {
+  const paramPage = Number(makeSelectCurrentParam('page')(state) || 0);
+  return {
+    pageCount: selectHistoryPageCount(state),
+    page: paramPage,
+    params: selectCurrentParams(state),
+    history: makeSelectHistoryForPage(paramPage)(state),
+  };
+};
+
+const perform = dispatch => ({
+  navigate: (path, params) => dispatch(doNavigate(path, params)),
+  clearHistoryUri: uri => dispatch(doClearContentHistoryUri(uri)),
+
+});
+
+export default connect(
+  select,
+  perform
+)(UserHistory);

src/renderer/component/userHistory/view.jsx

@@ -0,0 +1,167 @@
+// @flow
+import * as React from 'react';
+import Button from 'component/button';
+import { FormField, FormRow } from 'component/common/form';
+import ReactPaginate from 'react-paginate';
+import UserHistoryItem from 'component/userHistoryItem';
+
+type HistoryItem = {
+  uri: string,
+  lastViewed: number,
+};
+
+type Props = {
+  history: Array<HistoryItem>,
+  page: number,
+  pageCount: number,
+  navigate: (string, {}) => void,
+  clearHistoryUri: string => void,
+  params: { page: number },
+};
+
+type State = {
+  itemsSelected: {},
+};
+
+class UserHistoryPage extends React.PureComponent<Props, State> {
+  constructor() {
+    super();
+
+    this.state = {
+      itemsSelected: {},
+    };
+
+    (this: any).selectAll = this.selectAll.bind(this);
+    (this: any).unselectAll = this.unselectAll.bind(this);
+    (this: any).removeSelected = this.removeSelected.bind(this);
+  }
+
+  onSelect(uri: string) {
+    const { itemsSelected } = this.state;
+
+    const newItemsSelected = { ...itemsSelected };
+    if (itemsSelected[uri]) {
+      delete newItemsSelected[uri];
+    } else {
+      newItemsSelected[uri] = true;
+    }
+
+    this.setState({
+      itemsSelected: { ...newItemsSelected },
+    });
+  }
+
+  changePage(pageNumber: number) {
+    const { params } = this.props;
+    const newParams = { ...params, page: pageNumber };
+    this.props.navigate('/user_history', newParams);
+  }
+
+  paginate(e: SyntheticKeyboardEvent<*>) {
+    const pageFromInput = Number(e.currentTarget.value);
+    if (
+      pageFromInput &&
+      e.keyCode === 13 &&
+      !Number.isNaN(pageFromInput) &&
+      pageFromInput > 0 &&
+      pageFromInput <= this.props.pageCount
+    ) {
+      this.changePage(pageFromInput);
+    }
+  }
+
+  selectAll() {
+    const { history } = this.props;
+    const newSelectedState = {};
+    history.forEach(({ uri }) => (newSelectedState[uri] = true));
+    this.setState({ itemsSelected: newSelectedState });
+  }
+
+  unselectAll() {
+    this.setState({
+      itemsSelected: {},
+    });
+  }
+
+  removeSelected() {
+    const { clearHistoryUri } = this.props;
+    const { itemsSelected } = this.state;
+
+    Object.keys(itemsSelected).forEach(uri => clearHistoryUri(uri));
+    this.setState({
+      itemsSelected: {},
+    });
+  }
+
+  render() {
+    const { history, page, pageCount } = this.props;
+    const { itemsSelected } = this.state;
+
+    const allSelected = Object.keys(itemsSelected).length === history.length;
+    const selectHandler = allSelected ? this.unselectAll : this.selectAll;
+    return (
+      <React.Fragment>
+        <div className="card__actions card__actions--between">
+          {Object.keys(itemsSelected).length ? (
+            <Button button="link" label={__('Delete')} onClick={this.removeSelected} />
+          ) : (
+            <span>
+              {/* Using an empty span so spacing stays the same if the button isn't rendered */}
+            </span>
+          )}
+
+          <Button
+            button="link"
+            label={allSelected ? __('Cancel') : __('Select All')}
+            onClick={selectHandler}
+          />
+        </div>
+        {!!history.length && (
+          <table className="card--section table table--stretch table--history">
+            <tbody>
+              {history.map(item => (
+                <UserHistoryItem
+                  key={item.uri}
+                  uri={item.uri}
+                  lastViewed={item.lastViewed}
+                  selected={!!itemsSelected[item.uri]}
+                  onSelect={() => {
+                    this.onSelect(item.uri);
+                  }}
+                />
+              ))}
+            </tbody>
+          </table>
+        )}
+        {pageCount > 1 && (
+          <FormRow padded verticallyCentered centered>
+            <ReactPaginate
+              pageCount={pageCount}
+              pageRangeDisplayed={2}
+              previousLabel="‹"
+              nextLabel="›"
+              activeClassName="pagination__item--selected"
+              pageClassName="pagination__item"
+              previousClassName="pagination__item pagination__item--previous"
+              nextClassName="pagination__item pagination__item--next"
+              breakClassName="pagination__item pagination__item--break"
+              marginPagesDisplayed={2}
+              onPageChange={e => this.changePage(e.selected)}
+              forcePage={page}
+              initialPage={page}
+              containerClassName="pagination"
+            />
+
+            <FormField
+              className="paginate-channel"
+              onKeyUp={e => this.paginate(e)}
+              prefix={__('Go to page:')}
+              type="text"
+            />
+          </FormRow>
+        )}
+      </React.Fragment>
+    );
+  }
+}
+export default UserHistoryPage;

src/renderer/component/userHistoryItem/index.js

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

src/renderer/component/userHistoryItem/view.jsx

@@ -0,0 +1,64 @@
+// @flow
+import React from 'react';
+import type { Claim } from 'types/claim';
+import moment from 'moment';
+import classnames from 'classnames';
+import Button from 'component/button';
+
+type Props = {
+  lastViewed: number,
+  uri: string,
+  claim: ?Claim,
+  selected: boolean,
+  onSelect: () => void,
+  resolveUri: string => void,
+};
+
+class UserHistoryItem extends React.PureComponent<Props> {
+  componentDidMount() {
+    const { claim, uri, resolveUri } = this.props;
+
+    if (!claim) {
+      resolveUri(uri);
+    }
+  }
+
+  render() {
+    const { lastViewed, selected, onSelect, claim } = this.props;
+
+    let name;
+    let title;
+    let uri;
+    if (claim && claim.value && claim.value.stream) {
+      ({ name } = claim);
+      ({ title } = claim.value.stream.metadata);
+      uri = claim.permanent_url;
+    }
+
+    return (
+      <tr
+        onClick={onSelect}
+        className={classnames({
+          history__selected: selected,
+        })}
+      >
+        <td>
+          <input checked={selected} type="checkbox" onClick={onSelect} />
+        </td>
+        <td>{moment(lastViewed).from(moment())}</td>
+        <td>{title}</td>
+        <td>
+          <Button
+            tourniquet
+            button="link"
+            label={name ? `lbry://${name}` : `lbry://...`}
+            navigate="/show"
+            navigateParams={{ uri }}
+          />
+        </td>
+      </tr>
+    );
+  }
+}
+
+export default UserHistoryItem;

src/renderer/component/userPhoneNew/index.js

@@ -1,7 +1,5 @@
-import React from 'react';
 import { connect } from 'react-redux';
-import { doUserPhoneNew } from 'redux/actions/user';
+import { selectPhoneNewErrorMessage, doUserPhoneNew } from 'lbryinc';
-import { selectPhoneNewErrorMessage } from 'redux/selectors/user';
 import UserPhoneNew from './view';
 
 const select = state => ({
@@ -9,7 +7,10 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
-  addUserPhone: (phone, country_code) => dispatch(doUserPhoneNew(phone, country_code)),
+  addUserPhone: (phone, countryCode) => dispatch(doUserPhoneNew(phone, countryCode)),
 });
 
-export default connect(select, perform)(UserPhoneNew);
+export default connect(
+  select,
+  perform
+)(UserPhoneNew);

src/renderer/component/userPhoneVerify/index.js

@@ -1,11 +1,11 @@
-import React from 'react';
 import { connect } from 'react-redux';
-import { doUserPhoneVerify, doUserPhoneReset } from 'redux/actions/user';
 import {
+  doUserPhoneVerify,
+  doUserPhoneReset,
   selectPhoneToVerify,
   selectPhoneVerifyErrorMessage,
   selectUserCountryCode,
-} from 'redux/selectors/user';
+} from 'lbryinc';
 import UserPhoneVerify from './view';
 
 const select = state => ({
@@ -19,4 +19,7 @@ const perform = dispatch => ({
   verifyUserPhone: code => dispatch(doUserPhoneVerify(code)),
 });
 
-export default connect(select, perform)(UserPhoneVerify);
+export default connect(
+  select,
+  perform
+)(UserPhoneVerify);

src/renderer/component/userVerify/index.js

@@ -1,13 +1,13 @@
 import { connect } from 'react-redux';
 import { doNotify, MODALS } from 'lbry-redux';
 import { doNavigate } from 'redux/actions/navigation';
-import { doUserIdentityVerify } from 'redux/actions/user';
-import rewards from 'rewards';
-import { makeSelectRewardByType } from 'redux/selectors/rewards';
 import {
+  doUserIdentityVerify,
+  rewards,
+  makeSelectRewardByType,
   selectIdentityVerifyIsPending,
   selectIdentityVerifyErrorMessage,
-} from 'redux/selectors/user';
+} from 'lbryinc';
 import UserVerify from './view';
 
 const select = state => {
@@ -26,4 +26,7 @@ const perform = dispatch => ({
   verifyPhone: () => dispatch(doNotify({ id: MODALS.PHONE_COLLECTION })),
 });
 
-export default connect(select, perform)(UserVerify);
+export default connect(
+  select,
+  perform
+)(UserVerify);

src/renderer/component/userVerify/view.jsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import Button from 'component/button';
 import CardVerify from 'component/cardVerify';
-import lbryio from 'lbryio';
+import Lbryio from 'lbryinc';
 import * as icons from 'constants/icons';
 
 type Props = {
@@ -51,7 +51,7 @@ class UserVerify extends React.PureComponent<Props> {
               label={__('Perform Card Verification')}
               disabled={isPending}
               token={this.onToken}
-              stripeKey={lbryio.getStripeToken()}
+              stripeKey={Lbryio.getStripeToken()}
             />
           </div>
           <div className="card__content">

src/renderer/component/walletSendTip/view.jsx

@@ -2,7 +2,6 @@
 import React from 'react';
 import Button from 'component/button';
 import { FormField } from 'component/common/form';
-import UriIndicator from 'component/uriIndicator';
 import type { Claim } from 'types/claim';
 
 type Props = {
@@ -18,7 +17,7 @@ type Props = {
 
 type State = {
   tipAmount: number,
-  newTipError: string,
+  tipError: string,
 };
 
 class WalletSendTip extends React.PureComponent<Props, State> {
@@ -27,9 +26,8 @@ class WalletSendTip extends React.PureComponent<Props, State> {
 
     this.state = {
       tipAmount: 0,
-      newTipError: '',
+      tipError: '',
     };
-
     (this: any).handleSendButtonClicked = this.handleSendButtonClicked.bind(this);
   }
 
@@ -48,37 +46,46 @@ class WalletSendTip extends React.PureComponent<Props, State> {
 
   handleSupportPriceChange(event: SyntheticInputEvent<*>) {
     const { balance } = this.props;
+    const regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
+    const validTipInput = regexp.test(event.target.value);
     const tipAmount = parseFloat(event.target.value);
-    let newTipError;
+    let tipError;
-    if (tipAmount === balance) {
+
-      newTipError = __('Please decrease your tip to account for transaction fees');
+    if (!tipAmount) {
+      tipError = __('Tip must be a number');
+    } else if (tipAmount <= 0) {
+      tipError = __('Tip must be a positive number');
+    } else if (!validTipInput) {
+      tipError = __('Tip must have no more than 8 decimal places');
+    } else if (tipAmount === balance) {
+      tipError = __('Please decrease your tip to account for transaction fees');
     } else if (tipAmount > balance) {
-      newTipError = __('Not enough credits');
+      tipError = __('Not enough credits');
     }
 
     this.setState({
       tipAmount,
-      newTipError,
+      tipError,
     });
   }
 
   render() {
-    const { title, isPending, uri, onCancel, balance } = this.props;
+    const { title, isPending, uri, onCancel } = this.props;
-    const { tipAmount, newTipError } = this.state;
+    const { tipAmount, tipError } = this.state;
 
     return (
-      <div>
+      <section className="card__content">
-        <div className="card__title">
-          <h1>
-            {__('Send a tip to')} <UriIndicator uri={uri} />
-          </h1>
-        </div>
-        <div className="card__content">
         <FormField
-            label={__('Amount')}
+          autoFocus
+          label={
+            (tipAmount &&
+              tipAmount !== 0 &&
+              `Tip ${tipAmount.toFixed(8).replace(/\.?0+$/, '')} LBC`) ||
+            __('Amount')
+          }
           postfix={__('LBC')}
           className="input--price-amount"
-            error={newTipError}
+          error={tipError}
           min="0"
           step="any"
           type="number"
@@ -86,7 +93,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
           onChange={event => this.handleSupportPriceChange(event)}
           helper={
             <span>
-                {__(`This will appear as a tip for ${title} located at ${uri}.`)}{' '}
+              {__(`This will appear as a tip for "${title}".`)}{' '}
               <Button label={__('Learn more')} button="link" href="https://lbry.io/faq/tipping" />
             </span>
           }
@@ -95,18 +102,12 @@ class WalletSendTip extends React.PureComponent<Props, State> {
           <Button
             button="primary"
             label={__('Send')}
-              disabled={isPending || tipAmount <= 0 || tipAmount > balance || tipAmount === balance}
+            disabled={isPending || tipError}
             onClick={this.handleSendButtonClicked}
           />
-            <Button
+          <Button button="link" label={__('Cancel')} onClick={onCancel} navigateParams={{ uri }} />
-              button="link"
-              label={__('Cancel')}
-              onClick={onCancel}
-              navigateParams={{ uri }}
-            />
-          </div>
-        </div>
         </div>
+      </section>
     );
   }
 }

src/renderer/constants/action_types.js

@@ -73,7 +73,11 @@ export const CREATE_CHANNEL_COMPLETED = 'CREATE_CHANNEL_COMPLETED';
 export const PUBLISH_STARTED = 'PUBLISH_STARTED';
 export const PUBLISH_COMPLETED = 'PUBLISH_COMPLETED';
 export const PUBLISH_FAILED = 'PUBLISH_FAILED';
-export const SET_PLAYING_URI = 'PLAY_URI';
+export const SET_PLAYING_URI = 'SET_PLAYING_URI';
+export const SET_CONTENT_POSITION = 'SET_CONTENT_POSITION';
+export const SET_CONTENT_LAST_VIEWED = 'SET_CONTENT_LAST_VIEWED';
+export const CLEAR_CONTENT_HISTORY_URI = 'CLEAR_CONTENT_HISTORY_URI';
+export const CLEAR_CONTENT_HISTORY_ALL = 'CLEAR_CONTENT_HISTORY_ALL';
 
 // Files
 export const FILE_LIST_STARTED = 'FILE_LIST_STARTED';
@@ -181,14 +185,6 @@ export const FETCH_SUBSCRIPTIONS_START = 'FETCH_SUBSCRIPTIONS_START';
 export const FETCH_SUBSCRIPTIONS_FAIL = 'FETCH_SUBSCRIPTIONS_FAIL';
 export const FETCH_SUBSCRIPTIONS_SUCCESS = 'FETCH_SUBSCRIPTIONS_SUCCESS';
 
-// Video controls
-export const SET_VIDEO_PAUSE = 'SET_VIDEO_PAUSE';
-
-// Media controls
-export const MEDIA_PLAY = 'MEDIA_PLAY';
-export const MEDIA_PAUSE = 'MEDIA_PAUSE';
-export const MEDIA_POSITION = 'MEDIA_POSITION';
-
 // Publishing
 export const CLEAR_PUBLISH = 'CLEAR_PUBLISH';
 export const UPDATE_PUBLISH_FORM = 'UPDATE_PUBLISH_FORM';

src/renderer/constants/content.js

@@ -0,0 +1 @@
+export const HISTORY_ITEMS_PER_PAGE = 50;

src/renderer/constants/icons.js

@@ -30,3 +30,5 @@ export const EXTERNAL_LINK = 'ExternalLink';
 export const GIFT = 'Gift';
 export const EYE = 'Eye';
 export const PLAY = 'Play';
+export const FACEBOOK = 'Facebook';
+export const TWITTER = 'Twitter';

src/renderer/index.js

@@ -11,9 +11,10 @@ import { doConditionalAuthNavigate, doDaemonReady, doAutoUpdate } from 'redux/ac
 import { doNotify, doBlackListedOutpointsSubscribe, isURIValid } from 'lbry-redux';
 import { doNavigate } from 'redux/actions/navigation';
 import { doDownloadLanguages, doUpdateIsNightAsync } from 'redux/actions/settings';
-import { doUserEmailVerify, doAuthenticate } from 'redux/actions/user';
+import { doUserEmailVerify, doAuthenticate, Lbryio } from 'lbryinc';
 import 'scss/all.scss';
 import store from 'store';
+import pjson from 'package.json';
 import app from './app';
 import analytics from './analytics';
 import doLogWarningConsoleMessage from './logWarningConsoleMessage';
@@ -23,6 +24,40 @@ const APPPAGEURL = 'lbry://?';
 
 autoUpdater.logger = remote.require('electron-log');
 
+// We need to override Lbryio for getting/setting the authToken
+// We interect with ipcRenderer to get the auth key from a users keyring
+Lbryio.setOverride('setAuthToken', status => {
+  Lbryio.call(
+    'user',
+    'new',
+    {
+      auth_token: '',
+      language: 'en',
+      app_id: status.installation_id,
+    },
+    'post'
+  ).then(response => {
+    if (!response.auth_token) {
+      throw new Error(__('auth_token is missing from response'));
+    }
+
+    ipcRenderer.send('set-auth-token', response.auth_token);
+  });
+});
+
+Lbryio.setOverride(
+  'getAuthToken',
+  () =>
+    new Promise(resolve => {
+      ipcRenderer.once('auth-token-response', (event, token) => {
+        Lbryio.authToken = token;
+        resolve(token);
+      });
+
+      ipcRenderer.send('get-auth-token');
+    })
+);
+
 ipcRenderer.on('open-uri-requested', (event, uri, newSession) => {
   if (uri && uri.startsWith('lbry://')) {
     if (uri.startsWith('lbry://?verify=')) {
@@ -156,7 +191,7 @@ const init = () => {
     ReactDOM.render(
       <Provider store={store}>
         <SplashScreen
-          authenticate={() => app.store.dispatch(doAuthenticate())}
+          authenticate={() => app.store.dispatch(doAuthenticate(pjson.version))}
           onReadyToLaunch={onDaemonReady}
         />
       </Provider>,

src/renderer/lbryio.js

@@ -1,155 +0,0 @@
-import { ipcRenderer } from 'electron';
-import { Lbry } from 'lbry-redux';
-import querystring from 'querystring';
-
-const Lbryio = {
-  enabled: true,
-  authenticationPromise: null,
-};
-
-const CONNECTION_STRING = process.env.LBRY_APP_API_URL
-  ? process.env.LBRY_APP_API_URL.replace(/\/*$/, '/') // exactly one slash at the end
-  : 'https://api.lbry.io/';
-
-Lbryio.call = (resource, action, params = {}, method = 'get') => {
-  if (!Lbryio.enabled) {
-    console.log(__('Internal API disabled'));
-    return Promise.reject(new Error(__('LBRY internal API is disabled')));
-  }
-
-  if (!(method === 'get' || method === 'post')) {
-    return Promise.reject(new Error(__('Invalid method')));
-  }
-
-  function checkAndParse(response) {
-    if (response.status >= 200 && response.status < 300) {
-      return response.json();
-    }
-    return response.json().then(json => {
-      let error;
-      if (json.error) {
-        error = new Error(json.error);
-      } else {
-        error = new Error('Unknown API error signature');
-      }
-      error.response = response; // This is primarily a hack used in actions/user.js
-      return Promise.reject(error);
-    });
-  }
-
-  function makeRequest(url, options) {
-    return fetch(url, options).then(checkAndParse);
-  }
-
-  return Lbryio.getAuthToken().then(token => {
-    const fullParams = { auth_token: token, ...params };
-    const qs = querystring.stringify(fullParams);
-    let url = `${CONNECTION_STRING}${resource}/${action}?${qs}`;
-
-    let options = {
-      method: 'GET',
-    };
-
-    if (method === 'post') {
-      options = {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        body: qs,
-      };
-      url = `${CONNECTION_STRING}${resource}/${action}`;
-    }
-
-    return makeRequest(url, options).then(response => response.data);
-  });
-};
-
-Lbryio.authToken = null;
-
-Lbryio.getAuthToken = () =>
-  new Promise(resolve => {
-    if (Lbryio.authToken) {
-      resolve(Lbryio.authToken);
-    } else {
-      ipcRenderer.once('auth-token-response', (event, token) => {
-        Lbryio.authToken = token;
-        return resolve(token);
-      });
-      ipcRenderer.send('get-auth-token');
-    }
-  });
-
-Lbryio.setAuthToken = token => {
-  Lbryio.authToken = token ? token.toString().trim() : null;
-  ipcRenderer.send('set-auth-token', token);
-};
-
-Lbryio.getCurrentUser = () => Lbryio.call('user', 'me');
-
-Lbryio.authenticate = () => {
-  if (!Lbryio.enabled) {
-    return new Promise(resolve => {
-      resolve({
-        id: 1,
-        language: 'en',
-        primary_email: 'disabled@lbry.io',
-        has_verified_email: true,
-        is_identity_verified: true,
-        is_reward_approved: false,
-      });
-    });
-  }
-
-  if (Lbryio.authenticationPromise === null) {
-    Lbryio.authenticationPromise = new Promise((resolve, reject) => {
-      Lbryio.getAuthToken()
-        .then(token => {
-          if (!token || token.length > 60) {
-            return false;
-          }
-
-          // check that token works
-          return Lbryio.getCurrentUser()
-            .then(() => true)
-            .catch(() => false);
-        })
-        .then(isTokenValid => {
-          if (isTokenValid) {
-            return reject;
-          }
-
-          return Lbry.status()
-            .then(status =>
-              Lbryio.call(
-                'user',
-                'new',
-                {
-                  auth_token: '',
-                  language: 'en',
-                  app_id: status.installation_id,
-                },
-                'post'
-              )
-            )
-            .then(response => {
-              if (!response.auth_token) {
-                throw new Error(__('auth_token is missing from response'));
-              }
-              return Lbryio.setAuthToken(response.auth_token);
-            });
-        })
-        .then(Lbryio.getCurrentUser)
-        .then(resolve, reject);
-    });
-  }
-
-  return Lbryio.authenticationPromise;
-};
-
-Lbryio.getStripeToken = () =>
-  CONNECTION_STRING.startsWith('http://localhost:')
-    ? 'pk_test_NoL1JWL7i1ipfhVId5KfDZgo'
-    : 'pk_live_e8M4dRNnCCbmpZzduEUZBgJO';
-
-export default Lbryio;

src/renderer/modal/modal.jsx

@@ -23,6 +23,7 @@ type ModalProps = {
   expandButtonLabel?: string,
   hideButtonLabel?: string,
   fullScreen: boolean,
+  title: string,
 };
 
 export class Modal extends React.PureComponent<ModalProps> {
@@ -51,6 +52,7 @@ export class Modal extends React.PureComponent<ModalProps> {
       fullScreen,
       className,
       overlayClassName,
+      title,
       ...modalProps
     } = this.props;
     return (
@@ -65,6 +67,7 @@ export class Modal extends React.PureComponent<ModalProps> {
           ![null, undefined, ''].includes(overlayClassName) ? overlayClassName : 'modal-overlay'
         }
       >
+        <h1 className="modal__header">{title}</h1>
         <div>{children}</div>
         {type === 'custom' ? null : ( // custom modals define their own buttons
           <div className="card__actions card__actions--center">

src/renderer/modal/modalAffirmPurchase/view.jsx

@@ -1,8 +1,18 @@
+// @flow
 import React from 'react';
 import FilePrice from 'component/filePrice';
 import { Modal } from 'modal/modal';
+import type { Metadata } from 'types/claim';
 
-class ModalAffirmPurchase extends React.PureComponent {
+type Props = {
+  closeModal: () => void,
+  loadVideo: string => void,
+  uri: string,
+  cancelPurchase: () => void,
+  metadata: Metadata,
+};
+
+class ModalAffirmPurchase extends React.PureComponent<Props> {
   constructor() {
     super();
 
@@ -25,15 +35,18 @@ class ModalAffirmPurchase extends React.PureComponent {
       <Modal
         type="confirm"
         isOpen
+        title={__('Confirm Purchase')}
         contentLabel={__('Confirm Purchase')}
         onConfirmed={this.onAffirmPurchase}
         onAborted={cancelPurchase}
       >
-        {__('This will purchase')} <strong>{title}</strong> {__('for')}{' '}
+        <section className="card__content">
+          {__('This will purchase')} <strong>{`"${title}"`}</strong> {__('for')}{' '}
           <strong>
             <FilePrice uri={uri} showFullPrice inheritStyle showLBC={false} />
           </strong>{' '}
           {__('credits')}.
+        </section>
       </Modal>
     );
   }

src/renderer/modal/modalAuthFailure/view.jsx

@@ -1,7 +1,12 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
 
-class ModalAuthFailure extends React.PureComponent {
+type Props = {
+  close: () => void,
+};
+
+class ModalAuthFailure extends React.PureComponent<Props> {
   render() {
     const { close } = this.props;
 
@@ -9,6 +14,7 @@ class ModalAuthFailure extends React.PureComponent {
       <Modal
         isOpen
         contentLabel={__('Unable to Authenticate')}
+        title={__('Authentication Failure')}
         type="confirm"
         confirmButtonLabel={__('Reload')}
         abortButtonLabel={__('Continue')}
@@ -17,12 +23,13 @@ class ModalAuthFailure extends React.PureComponent {
         }}
         onAborted={close}
       >
-        <h3>{__('Authentication Failure')}</h3>
+        <section className="card__content">
           <p>
             {__(
               'If reloading does not fix this, or you see this at every start up, please email help@lbry.io.'
             )}
           </p>
+        </section>
       </Modal>
     );
   }

src/renderer/modal/modalAutoUpdateConfirm/view.jsx

@@ -1,11 +1,15 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
-import { Line } from 'rc-progress';
 import Button from 'component/button';
+import { ipcRenderer } from 'electron';
 
-const { ipcRenderer } = require('electron');
+type Props = {
+  closeModal: () => void,
+  declineAutoUpdate: () => void,
+};
 
-class ModalAutoUpdateConfirm extends React.PureComponent {
+class ModalAutoUpdateConfirm extends React.PureComponent<Props> {
   render() {
     const { closeModal, declineAutoUpdate } = this.props;
 
@@ -14,6 +18,7 @@ class ModalAutoUpdateConfirm extends React.PureComponent {
         isOpen
         type="confirm"
         contentLabel={__('Update Downloaded')}
+        title={__('LBRY Update Ready')}
         confirmButtonLabel={__('Upgrade')}
         abortButtonLabel={__('Not now')}
         onConfirmed={() => {
@@ -24,10 +29,9 @@ class ModalAutoUpdateConfirm extends React.PureComponent {
           closeModal();
         }}
       >
-        <section>
+        <section className="card__content">
-          <h3 className="text-center">{__('LBRY Update Ready')}</h3>
           <p>{__('Your LBRY update is ready. Restart LBRY now to use it!')}</p>
-          <p className="meta text-center">
+          <p className="meta">
             {__('Want to know what has changed?')} See the{' '}
             <Button
               button="link"

src/renderer/modal/modalAutoUpdateDownloaded/view.jsx

@@ -26,6 +26,7 @@ class ModalAutoUpdateDownloaded extends React.PureComponent<Props> {
         isOpen
         type="confirm"
         contentLabel={__('Update Downloaded')}
+        title={__('LBRY Leveled Up')}
         confirmButtonLabel={__('Use it Now')}
         abortButtonLabel={__('Upgrade on Close')}
         confirmButtonDisabled={this.state.disabled}
@@ -39,8 +40,7 @@ class ModalAutoUpdateDownloaded extends React.PureComponent<Props> {
           closeModal();
         }}
       >
-        <section>
+        <section className="card__content">
-          <h3 className="text-center">{__('LBRY Leveled Up')}</h3>
           <p>
             {__(
               'A new version of LBRY has been released, downloaded, and is ready for you to use pending a restart.'

src/renderer/modal/modalConfirmThumbnailUpload/view.jsx

@@ -25,12 +25,14 @@ class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
     return (
       <Modal
         isOpen
+        title={__('Upload Thumbnail')}
         contentLabel={__('Confirm Thumbnail Upload')}
         type="confirm"
         confirmButtonLabel={__('Upload')}
         onConfirmed={() => this.upload()}
         onAborted={closeModal}
       >
+        <section className="card__content">
           <p>{__('Are you sure you want to upload this thumbnail to spee.ch')}?</p>
           <blockquote>{path}</blockquote>
           <FormField
@@ -40,6 +42,7 @@ class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
             checked={nsfw}
             onChange={event => updatePublishForm({ nsfw: event.target.checked })}
           />
+        </section>
       </Modal>
     );
   }

src/renderer/modal/modalConfirmTransaction/view.jsx

@@ -21,21 +21,20 @@ class ModalConfirmTransaction extends React.PureComponent<Props> {
     return (
       <Modal
         isOpen
+        title={__('Send LBC')}
         contentLabel={__('Confirm Transaction')}
         type="confirm"
-        confirmButtonLabel={__('Continue')}
+        confirmButtonLabel={__('Send')}
         onConfirmed={() => this.onConfirmed()}
         onAborted={closeModal}
       >
-        <p>{__('Are you sure you want to ')}</p>
+        <section className="card__content">
-        <h1>
-          {__('send ')} {amount} LBC
-        </h1>
           <p>{__('Sending: ')}</p>
           <blockquote>{amount} LBC</blockquote>
           <p>{__('To address: ')}</p>
           <blockquote>{address}</blockquote>
           <p>{__('Once the transaction is sent, it cannot be reversed.')}</p>
+        </section>
       </Modal>
     );
   }

src/renderer/modal/modalCreditIntro/index.js

@@ -1,9 +1,8 @@
 import { connect } from 'react-redux';
 import { doNavigate } from 'redux/actions/navigation';
 import { doSetClientSetting } from 'redux/actions/settings';
-import { selectUserIsRewardApproved } from 'redux/selectors/user';
+import { selectUserIsRewardApproved, selectUnclaimedRewardValue } from 'lbryinc';
 import { selectBalance, doHideNotification } from 'lbry-redux';
-import { selectUnclaimedRewardValue } from 'redux/selectors/rewards';
 import * as settings from 'constants/settings';
 import ModalCreditIntro from './view';
 
@@ -25,4 +24,7 @@ const perform = dispatch => () => ({
   },
 });
 
-export default connect(select, perform)(ModalCreditIntro);
+export default connect(
+  select,
+  perform
+)(ModalCreditIntro);

src/renderer/modal/modalCreditIntro/view.jsx

@@ -17,9 +17,8 @@ const ModalCreditIntro = (props: Props) => {
   const totalRewardRounded = Math.floor(totalRewardValue / 10) * 10;
 
   return (
-    <Modal type="custom" isOpen contentLabel="Welcome to LBRY">
+    <Modal type="custom" isOpen contentLabel="Welcome to LBRY" title={__('LBRY Credits Needed')}>
-      <section>
+      <section className="card__content">
-        <h3 className="modal__header">{__('Computer Wizard Needs Tokens Badly')}</h3>
         <p>
           Some actions require LBRY credits (<em>
             <CurrencySymbol />

src/renderer/modal/modalDownloading/view.jsx

@@ -1,9 +1,18 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
 import { Line } from 'rc-progress';
 import Button from 'component/button';
 
-class ModalDownloading extends React.PureComponent {
+type Props = {
+  downloadProgress: ?number,
+  downloadComplete: boolean,
+  downloadItem: string,
+  startUpgrade: () => void,
+  cancelUpgrade: () => void,
+};
+
+class ModalDownloading extends React.PureComponent<Props> {
   render() {
     const {
       downloadProgress,
@@ -14,13 +23,17 @@ class ModalDownloading extends React.PureComponent {
     } = this.props;
 
     return (
-      <Modal isOpen contentLabel={__('Downloading Update')} type="custom">
+      <Modal
-        {__('Downloading Update')}
+        title={__('Downloading Update')}
-        {downloadProgress ? `: ${downloadProgress}%` : null}
+        isOpen
+        contentLabel={__('Downloading Update')}
+        type="custom"
+      >
+        <section className="card__content">
+          {downloadProgress ? `${downloadProgress}% ${__('complete')}` : null}
           <Line percent={downloadProgress || 0} strokeWidth="4" />
           {downloadComplete ? (
-          <div>
+            <React.Fragment>
-            <br />
               <p>{__('Click "Begin Upgrade" to start the upgrade process.')}</p>
               <p>
                 {__(
@@ -34,7 +47,7 @@ class ModalDownloading extends React.PureComponent {
               </p>
               <blockquote>sudo dpkg -i {downloadItem}</blockquote>
               <p>{__('After the install is complete, please reopen the app.')}</p>
-          </div>
+            </React.Fragment>
           ) : null}
           <div className="modal__buttons">
             {downloadComplete ? (
@@ -52,6 +65,7 @@ class ModalDownloading extends React.PureComponent {
               onClick={cancelUpgrade}
             />
           </div>
+        </section>
       </Modal>
     );
   }

src/renderer/modal/modalEmailCollection/index.js

@@ -2,7 +2,7 @@ import * as settings from 'constants/settings';
 import { connect } from 'react-redux';
 import { doHideNotification } from 'lbry-redux';
 import { doSetClientSetting } from 'redux/actions/settings';
-import { selectEmailToVerify, selectUser } from 'redux/selectors/user';
+import { selectEmailToVerify, selectUser } from 'lbryinc';
 import ModalEmailCollection from './view';
 
 const select = state => ({
@@ -17,4 +17,7 @@ const perform = dispatch => () => ({
   },
 });
 
-export default connect(select, perform)(ModalEmailCollection);
+export default connect(
+  select,
+  perform
+)(ModalEmailCollection);

src/renderer/modal/modalEmailCollection/view.jsx

@@ -16,7 +16,6 @@ class ModalEmailCollection extends React.PureComponent<Props> {
     const { closeModal, email, user } = this.props;
 
     const cancelButton = <Button button="link" onClick={closeModal} label={__('Not Now')} />;
-
     if (user && !user.has_verified_email && !email) {
       return <UserEmailNew cancelButton={cancelButton} />;
     } else if (user && !user.has_verified_email) {
@@ -35,16 +34,8 @@ class ModalEmailCollection extends React.PureComponent<Props> {
     }
 
     return (
-      <Modal type="custom" isOpen contentLabel="Email">
+      <Modal type="custom" isOpen contentLabel="Email" title={__('Can We Stay In Touch?')}>
-        <section>
+        <section className="card__content">{this.renderInner()}</section>
-          <h3 className="modal__header">Can We Stay In Touch?</h3>
-          <div className="card__content">{this.renderInner()}</div>
-          <div className="card__content">
-            <div className="help">
-              {`${__('Your email may be used to sync usage data across devices.')} `}
-            </div>
-          </div>
-        </section>
       </Modal>
     );
   }

src/renderer/modal/modalError/view.jsx

@@ -1,8 +1,14 @@
+// @flow
 import React from 'react';
 import Native from 'native';
 import { ExpandableModal } from 'modal/modal';
 
-class ModalError extends React.PureComponent {
+type Props = {
+  error: string | { message: string },
+  closeModal: () => void,
+};
+
+class ModalError extends React.PureComponent<Props> {
   render() {
     const { closeModal, error } = this.props;
 
@@ -23,37 +29,39 @@ class ModalError extends React.PureComponent {
       const label = errorKeyLabels[key];
       errorInfoList.push(
         <li key={key}>
-          <strong>{label}</strong>: <code>{val}</code>
+          <strong>{label}</strong>: {val}
         </li>
       );
     }
+
     const errorInfo = <ul className="error-modal__error-list">{errorInfoList}</ul>;
 
     return (
       <ExpandableModal
         isOpen
         contentLabel={__('Error')}
-        className="error-modal"
+        title={
-        overlayClassName="error-modal-overlay"
+          <React.Fragment>
-        onConfirmed={closeModal}
+            {__('Error')}{' '}
-        extraContent={errorInfo}
-      >
-        <h3 className="modal__header">{__('Error')}</h3>
-
-        <div className="error-modal__content">
-          <div>
             <img
               alt=""
               className="error-modal__warning-symbol"
               src={Native.imagePath('warning.png')}
             />
-          </div>
+          </React.Fragment>
+        }
+        className="error-modal"
+        overlayClassName="error-modal-overlay"
+        onConfirmed={closeModal}
+        extraContent={errorInfo}
+      >
+        <section className="card__content">
           <p>
             {__(
               "We're sorry that LBRY has encountered an error. This has been reported and we will investigate the problem."
             )}
           </p>
-        </div>
+        </section>
       </ExpandableModal>
     );
   }

src/renderer/modal/modalFileTimeout/view.jsx

@@ -1,15 +1,33 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
+import type { Metadata } from 'types/claim';
 
-class ModalFileTimeout extends React.PureComponent {
+type Props = {
+  metadata: Metadata,
+  closeModal: () => void,
+};
+
+class ModalFileTimeout extends React.PureComponent<Props> {
   render() {
     const {
       metadata: { title },
+      closeModal,
     } = this.props;
 
     return (
-      <Modal isOpen contentLabel={__('Download failed')} onConfirmed={closeModal}>
+      <Modal
-        {__('LBRY was unable to download the stream')} <strong>{title}</strong>.
+        isOpen
+        title={__('Unable to Download')}
+        contentLabel={__('Download failed')}
+        onConfirmed={closeModal}
+      >
+        <section className="card__content">
+          <p className="card__error-msg">
+            {__('LBRY was unable to download the stream')}:
+            <div>{`"${title}"`}</div>
+          </p>
+        </section>
       </Modal>
     );
   }

src/renderer/modal/modalFirstReward/index.js

@@ -1,7 +1,6 @@
-import rewards from 'rewards';
+import { rewards, makeSelectRewardByType } from 'lbryinc';
 import { connect } from 'react-redux';
 import { doHideNotification } from 'lbry-redux';
-import { makeSelectRewardByType } from 'redux/selectors/rewards';
 import ModalFirstReward from './view';
 
 const select = state => {
@@ -16,4 +15,7 @@ const perform = dispatch => ({
   closeModal: () => dispatch(doHideNotification()),
 });
 
-export default connect(select, perform)(ModalFirstReward);
+export default connect(
+  select,
+  perform
+)(ModalFirstReward);

src/renderer/modal/modalFirstReward/view.jsx

@@ -1,10 +1,12 @@
-// I"ll come back to This
+// @flow
-/* esline-disable */
 import React from 'react';
 import { Modal } from 'modal/modal';
-import CreditAmount from 'component/common/credit-amount';
 
-class ModalFirstReward extends React.PureComponent {
+type Props = {
+  closeModal: () => void,
+};
+
+class ModalFirstReward extends React.PureComponent<Props> {
   render() {
     const { closeModal } = this.props;
 
@@ -14,10 +16,10 @@ class ModalFirstReward extends React.PureComponent {
         overlayClassName="modal-overlay modal-overlay--clear"
         isOpen
         contentLabel={__('Welcome to LBRY')}
+        title={__('Your First Reward')}
         onConfirmed={closeModal}
       >
-        <section>
+        <section className="card__content">
-          <h3 className="modal__header">{__('Your First Reward')}</h3>
           <p>{__('You just earned your first reward!')}</p>
           <p>
             {__(
@@ -41,4 +43,3 @@ class ModalFirstReward extends React.PureComponent {
 }
 
 export default ModalFirstReward;
-/* eslint-enable */

src/renderer/modal/modalFirstSubscription/view.jsx

@@ -1,14 +1,19 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';
 
-const ModalFirstSubscription = props => {
+type Props = {
+  closeModal: () => void,
+  navigate: string => void,
+};
+
+const ModalFirstSubscription = (props: Props) => {
   const { closeModal, navigate } = props;
 
   return (
-    <Modal type="custom" isOpen contentLabel="Subscriptions 101">
+    <Modal type="custom" isOpen contentLabel="Subscriptions 101" title={__('Subscriptions 101')}>
-      <section>
+      <section className="card__content">
-        <h3 className="modal__header">{__('Subscriptions 101')}</h3>
         <p>{__('You just subscribed to your first channel. Awesome!')}</p>
         <p>{__('A few quick things to know:')}</p>
         <p className="card__content">

src/renderer/modal/modalIncompatibleDaemon/view.jsx

@@ -15,6 +15,7 @@ class ModalIncompatibleDaemon extends React.PureComponent<Props> {
     return (
       <Modal
         isOpen
+        title={__('Incompatible Daemon')}
         contentLabel={__('Incompatible daemon running')}
         type="confirm"
         confirmButtonLabel={__('Close LBRY and daemon')}
@@ -22,9 +23,11 @@ class ModalIncompatibleDaemon extends React.PureComponent<Props> {
         onConfirmed={quitAnyDaemon}
         onAborted={quit}
       >
+        <p>
           {__(
             'This browser is running with an incompatible version of the LBRY protocol, please close the LBRY app and rerun the installation package to repair it. '
           )}
+        </p>
         <Button
           button="link"
           label={__('Learn more')}

src/renderer/modal/modalOpenExternalLink/view.jsx

@@ -23,13 +23,14 @@ class ModalOpenExternalLink extends React.PureComponent<Props> {
     return (
       <Modal
         isOpen
+        title={__('Warning!')}
         contentLabel={__('Confirm External Link')}
         type="confirm"
         confirmButtonLabel={__('Continue')}
         onConfirmed={() => this.openExternalLink()}
         onAborted={closeModal}
       >
-        <h1>Warning!</h1>
+        <section className="card__content">
           <p>{__('This link leads to an external website.')}</p>
           <blockquote>{uri}</blockquote>
           <p>
@@ -37,6 +38,7 @@ class ModalOpenExternalLink extends React.PureComponent<Props> {
               'LBRY Inc is not responsible for its content, click continue to proceed at your own risk.'
             )}
           </p>
+        </section>
       </Modal>
     );
   }

src/renderer/modal/modalPhoneCollection/index.js

@@ -1,9 +1,6 @@
-import React from 'react';
-import * as settings from 'constants/settings';
 import { connect } from 'react-redux';
 import { doHideNotification } from 'lbry-redux';
-import { doSetClientSetting } from 'redux/actions/settings';
+import { selectPhoneToVerify, selectUser } from 'lbryinc';
-import { selectPhoneToVerify, selectUser } from 'redux/selectors/user';
 import { doNavigate } from 'redux/actions/navigation';
 import ModalPhoneCollection from './view';
 
@@ -19,4 +16,7 @@ const perform = dispatch => () => ({
   },
 });
 
-export default connect(select, perform)(ModalPhoneCollection);
+export default connect(
+  select,
+  perform
+)(ModalPhoneCollection);

src/renderer/modal/modalPhoneCollection/view.jsx

@@ -1,10 +1,19 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';
 import UserPhoneNew from 'component/userPhoneNew';
 import UserPhoneVerify from 'component/userPhoneVerify';
 
-class ModalPhoneCollection extends React.PureComponent {
+type Props = {
+  phone: ?number,
+  user: {
+    phone_number: ?number,
+  },
+  closeModal: () => void,
+};
+
+class ModalPhoneCollection extends React.PureComponent<Props> {
   renderInner() {
     const { closeModal, phone, user } = this.props;
 
@@ -15,7 +24,7 @@ class ModalPhoneCollection extends React.PureComponent {
     } else if (!user.phone_number) {
       return <UserPhoneVerify cancelButton={cancelButton} />;
     }
-    closeModal();
+    return closeModal();
   }
 
   render() {
@@ -27,11 +36,8 @@ class ModalPhoneCollection extends React.PureComponent {
     }
 
     return (
-      <Modal type="custom" isOpen contentLabel="Phone">
+      <Modal type="custom" isOpen contentLabel="Phone" title={__('Verify Your Phone')}>
-        <section>
+        <section className="card__content">{this.renderInner()}</section>
-          <h3 className="modal__header">Verify Your Phone</h3>
-          {this.renderInner()}
-        </section>
       </Modal>
     );
   }

src/renderer/modal/modalPublish/view.jsx

@@ -16,6 +16,7 @@ class ModalSendTip extends React.PureComponent<Props> {
     return (
       <Modal
         isOpen
+        title={__('Success')}
         contentLabel={__('File published')}
         onConfirmed={() => {
           clearPublish();
@@ -23,6 +24,7 @@ class ModalSendTip extends React.PureComponent<Props> {
           closeModal();
         }}
       >
+        <section className="card__content">
           <p>{__('Your file has been published to LBRY at the address')}</p>
           <p className="card__success-msg">{uri}</p>
           <p>
@@ -30,6 +32,7 @@ class ModalSendTip extends React.PureComponent<Props> {
               'The file will take a few minutes to appear for other LBRY users. Until then it will be listed as "pending" under your published files.'
             )}
           </p>
+        </section>
       </Modal>
     );
   }

src/renderer/modal/modalRemoveFile/view.jsx

@@ -60,14 +60,17 @@ class ModalRemoveFile extends React.PureComponent<Props, State> {
     return (
       <Modal
         isOpen
+        title={__('Remove File')}
         contentLabel={__('Confirm File Remove')}
         type="confirm"
         confirmButtonLabel={__('Remove')}
         onConfirmed={() => deleteFile(outpoint, deleteChecked, abandonClaimChecked)}
         onAborted={closeModal}
       >
+        <section className="card__content">
           <p>
-          {__("Are you sure you'd like to remove")} <cite>{title}</cite> {__('from the LBRY app?')}
+            {__("Are you sure you'd like to remove")} <cite>{`"${title}"`}</cite>{' '}
+            {__('from the LBRY app?')}
           </p>
 
           <FormRow padded>
@@ -88,6 +91,7 @@ class ModalRemoveFile extends React.PureComponent<Props, State> {
               />
             </FormRow>
           )}
+        </section>
       </Modal>
     );
   }

src/renderer/modal/modalRevokeClaim/view.jsx

@@ -1,10 +1,52 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
 import * as txnTypes from 'constants/transaction_types';
 
-class ModalRevokeClaim extends React.PureComponent {
+type Props = {
-  constructor(props) {
+  closeModal: () => void,
-    super(props);
+  abandonClaim: (string, number) => void,
+  txid: string,
+  nout: number,
+};
+
+class ModalRevokeClaim extends React.PureComponent<Props> {
+  constructor() {
+    super();
+
+    (this: any).revokeClaim = this.revokeClaim.bind(this);
+  }
+
+  getButtonLabel(type) {
+    if (type === txnTypes.TIP) {
+      return 'Confirm Tip Unlock';
+    }
+    return 'Confirm Claim Revoke';
+  }
+
+  getMsgBody(type) {
+    if (type === txnTypes.TIP) {
+      return (
+        <React.Fragment>
+          <p>{__('Are you sure you want to unlock these credits?')}</p>
+          <p>
+            {__(
+              'These credits are permanently yours and can be unlocked at any time. Unlocking them allows you to spend them, but can hurt the performance of your content in lookups and search results. It is recommended you leave tips locked until you need or want to spend them.'
+            )}
+          </p>
+        </React.Fragment>
+      );
+    }
+    return (
+      <React.Fragment>
+        <p>{__('Are you sure want to revoke this claim?')}</p>
+        <p>
+          {__(
+            'This will prevent others from resolving and accessing the content you published. It will return the LBC to your spendable balance, less a small transaction fee.'
+          )}
+        </p>
+      </React.Fragment>
+    );
   }
 
   revokeClaim() {
@@ -14,52 +56,6 @@ class ModalRevokeClaim extends React.PureComponent {
     this.props.abandonClaim(txid, nout);
   }
 
-  getButtonLabel(type) {
-    if (type == txnTypes.TIP) {
-      return 'Confirm Tip Unlock';
-    }
-    return 'Confirm Claim Revoke';
-  }
-
-  getMsgBody(type) {
-    if (type == txnTypes.TIP) {
-      return (
-        <div>
-          <h3>{__('Confirm Tip Unlock')}</h3>
-          <p>
-            {__('Are you sure you want to unlock these credits?')}
-            <br />
-            <br />
-            {__(
-              'These credits are permanently yours and can be\
-             unlocked at any time. Unlocking them allows you to\
-             spend them, but can hurt the performance of your\
-             content in lookups and search results. It is\
-             recommended you leave tips locked until you\
-             need or want to spend them.'
-            )}
-          </p>
-        </div>
-      );
-    }
-    return (
-      <div>
-        <h3>{__('Confirm Claim Revoke')}</h3>
-        <p>
-          {__('Are you sure want to revoke this claim?')}
-          <br />
-          <br />
-          {__(
-            'This will prevent others from resolving and\
-              accessing the content you published. It will return\
-              the LBC to your spendable balance, less a small\
-              transaction fee.'
-          )}
-        </p>
-      </div>
-    );
-  }
-
   render() {
     const { transactionItems, txid, nout, closeModal } = this.props;
     const { type } = transactionItems.find(claim => claim.txid == txid && claim.nout == nout);
@@ -67,13 +63,14 @@ class ModalRevokeClaim extends React.PureComponent {
     return (
       <Modal
         isOpen
+        title={type === txnTypes.TIP ? __('Confirm Tip Unlock') : __('Confirm Claim Revoke')}
         contentLabel={__('Confirm Claim Revoke')}
         type="confirm"
         confirmButtonLabel={this.getButtonLabel(type)}
-        onConfirmed={this.revokeClaim.bind(this)}
+        onConfirmed={this.revokeClaim}
         onAborted={closeModal}
       >
-        {this.getMsgBody(type)}
+        <section className="card__content">{this.getMsgBody(type)}</section>
       </Modal>
     );
   }

src/renderer/modal/modalRewardApprovalRequired/view.jsx

@@ -1,13 +1,20 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
 
-class ModalRewardApprovalRequired extends React.PureComponent {
+type Props = {
+  closeModal: () => void,
+  doAuth: () => void,
+};
+
+class ModalRewardApprovalRequired extends React.PureComponent<Props> {
   render() {
     const { closeModal, doAuth } = this.props;
 
     return (
       <Modal
         isOpen
+        title={__('Hmm. Are you real?')}
         contentLabel={__('Human Verification Required')}
         onConfirmed={doAuth}
         onAborted={closeModal}
@@ -15,8 +22,7 @@ class ModalRewardApprovalRequired extends React.PureComponent {
         confirmButtonLabel={__("I'm Totally Real")}
         abortButtonLabel={__('Never Mind')}
       >
-        <section>
+        <section className="card__content">
-          <h3 className="modal__header">{__('This is awkward. Are you real?')}</h3>
           <p>
             {__(
               "Before we can give you any credits, we need to perform a brief check to make sure you're a new and unique person."

src/renderer/modal/modalRewardCode/index.js

@@ -0,0 +1,28 @@
+// @flow
+import { connect } from 'react-redux';
+import { doHideNotification } from 'lbry-redux';
+import {
+  makeSelectClaimRewardError,
+  doClaimRewardType,
+  makeSelectIsRewardClaimPending,
+  rewards as REWARD_TYPES,
+} from 'lbryinc';
+import ModalRewardCode from './view';
+
+const select = (state): {} => ({
+  rewardIsPending: makeSelectIsRewardClaimPending()(state, {
+    reward_type: REWARD_TYPES.TYPE_REWARD_CODE,
+  }),
+  error: makeSelectClaimRewardError()(state, { reward_type: REWARD_TYPES.TYPE_REWARD_CODE }),
+});
+
+const perform = dispatch => ({
+  closeModal: () => dispatch(doHideNotification()),
+  submitRewardCode: (code: string) =>
+    dispatch(doClaimRewardType(REWARD_TYPES.TYPE_REWARD_CODE, { params: { code } })),
+});
+
+export default connect(
+  select,
+  perform
+)(ModalRewardCode);

src/renderer/modal/modalRewardCode/view.jsx

@@ -0,0 +1,81 @@
+// @flow
+import * as React from 'react';
+import { FormRow, FormField } from 'component/common/form';
+import { Modal } from 'modal/modal';
+import Button from 'component/button';
+
+type Props = {
+  closeModal: () => void,
+  error: ?string,
+  rewardIsPending: boolean,
+  submitRewardCode: string => void,
+};
+
+type State = {
+  rewardCode: string,
+};
+
+class ModalRewardCode extends React.PureComponent<Props, State> {
+  constructor() {
+    super();
+
+    this.state = {
+      rewardCode: '',
+    };
+
+    (this: any).handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit() {
+    const { rewardCode } = this.state;
+    const { submitRewardCode } = this.props;
+    submitRewardCode(rewardCode);
+  }
+
+  render() {
+    const { closeModal, rewardIsPending, error } = this.props;
+    const { rewardCode } = this.state;
+
+    return (
+      <Modal
+        isOpen
+        title={__('Enter Reward Code')}
+        contentLabel={__('Enter Reward Code')}
+        type="confirm"
+        confirmButtonLabel={__('Redeem')}
+        abortButtonLabel={__('Cancel')}
+        onConfirmed={this.handleSubmit}
+        onAborted={closeModal}
+        confirmButtonDisabled={rewardIsPending}
+      >
+        <section className="card__content">
+          <FormRow>
+            <FormField
+              stretch
+              autoFocus
+              type="text"
+              label={__('Code')}
+              placeholder="0123abc"
+              error={error}
+              value={rewardCode}
+              onChange={e => this.setState({ rewardCode: e.target.value })}
+              helper={
+                <React.Fragment>
+                  {__('Redeem a custom reward code for LBC')}
+                  {'. '}
+                  <Button
+                    button="link"
+                    href="https://lbry.io/faq/rewards#reward-code"
+                    label={__('Learn more')}
+                  />.
+                </React.Fragment>
+              }
+            />
+          </FormRow>
+        </section>
+      </Modal>
+    );
+  }
+}
+
+export default ModalRewardCode;

src/renderer/modal/modalRouter/index.js

@@ -9,7 +9,7 @@ import {
   selectNotificationProps,
 } from 'lbry-redux';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
-import { selectUser, selectUserIsVerificationCandidate } from 'redux/selectors/user';
+import { selectUser, selectUserIsVerificationCandidate } from 'lbryinc';
 
 import ModalRouter from './view';
 
@@ -32,4 +32,7 @@ const perform = dispatch => ({
   openModal: notification => dispatch(doNotify(notification)),
 });
 
-export default connect(select, perform)(ModalRouter);
+export default connect(
+  select,
+  perform
+)(ModalRouter);

src/renderer/modal/modalRouter/view.jsx

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { MODALS } from 'lbry-redux';
 import ModalError from 'modal/modalError';
@@ -19,20 +20,23 @@ import ModalEmailCollection from 'modal/modalEmailCollection';
 import ModalPhoneCollection from 'modal/modalPhoneCollection';
 import ModalFirstSubscription from 'modal/modalFirstSubscription';
 import ModalConfirmTransaction from 'modal/modalConfirmTransaction';
-import ModalSendTip from '../modalSendTip';
+import ModalSocialShare from 'modal/modalSocialShare';
-import ModalPublish from '../modalPublish';
+import ModalSendTip from 'modal/modalSendTip';
-import ModalOpenExternalLink from '../modalOpenExternalLink';
+import ModalPublish from 'modal/modalPublish';
+import ModalOpenExternalLink from 'modal/modalOpenExternalLink';
 import ModalConfirmThumbnailUpload from 'modal/modalConfirmThumbnailUpload';
 import ModalWalletEncrypt from 'modal/modalWalletEncrypt';
 import ModalWalletDecrypt from 'modal/modalWalletDecrypt';
 import ModalWalletUnlock from 'modal/modalWalletUnlock';
+import ModalRewardCode from 'modal/modalRewardCode';
 
 type Props = {
-  modal: string,
+  notification: { id: string },
+  notificationProps: {},
 };
 
 class ModalRouter extends React.PureComponent<Props> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -50,7 +54,7 @@ class ModalRouter extends React.PureComponent<Props> {
   }
 
   showTransitionModals(props) {
-    const { modal, modalProps, openModal, page } = props;
+    const { modal, openModal, page } = props;
 
     if (modal) {
       return;
@@ -79,6 +83,8 @@ class ModalRouter extends React.PureComponent<Props> {
     if (!isWelcomeAcknowledged && user && !user.is_reward_approved && !user.is_identity_verified) {
       return MODALS.WELCOME;
     }
+
+    return undefined;
   }
 
   checkShowEmail(props) {
@@ -91,6 +97,8 @@ class ModalRouter extends React.PureComponent<Props> {
     ) {
       return MODALS.EMAIL_COLLECTION;
     }
+
+    return undefined;
   }
 
   checkShowCreditIntro(props) {
@@ -103,6 +111,8 @@ class ModalRouter extends React.PureComponent<Props> {
     ) {
       return MODALS.INSUFFICIENT_CREDITS;
     }
+
+    return undefined;
   }
 
   isPaidShowPage(props) {
@@ -160,6 +170,8 @@ class ModalRouter extends React.PureComponent<Props> {
         return <ModalFirstSubscription {...notificationProps} />;
       case MODALS.SEND_TIP:
         return <ModalSendTip {...notificationProps} />;
+      case MODALS.SOCIAL_SHARE:
+        return <ModalSocialShare {...notificationProps} />;
       case MODALS.PUBLISH:
         return <ModalPublish {...notificationProps} />;
       case MODALS.CONFIRM_EXTERNAL_LINK:
@@ -174,6 +186,8 @@ class ModalRouter extends React.PureComponent<Props> {
         return <ModalWalletDecrypt {...notificationProps} />;
       case MODALS.WALLET_UNLOCK:
         return <ModalWalletUnlock {...notificationProps} />;
+      case MODALS.REWARD_GENERATED_CODE:
+        return <ModalRewardCode {...notificationProps} />;
       default:
         return null;
     }

src/renderer/modal/modalSendTip/view.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { Modal } from 'modal/modal';
 import SendTip from 'component/walletSendTip';
+import UriIndicator from 'component/uriIndicator';
 
 type Props = {
   closeModal: () => void,
@@ -13,7 +14,16 @@ class ModalSendTip extends React.PureComponent<Props> {
     const { closeModal, uri } = this.props;
 
     return (
-      <Modal isOpen type="custom">
+      <Modal
+        onAborted={closeModal}
+        isOpen
+        type="custom"
+        title={
+          <React.Fragment>
+            {__('Send a tip to')} <UriIndicator uri={uri} />
+          </React.Fragment>
+        }
+      >
         <SendTip uri={uri} onCancel={closeModal} sendTipCallback={closeModal} />
       </Modal>
     );

src/renderer/modal/modalSocialShare/index.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import { doHideNotification } from 'lbry-redux';
+import ModalSocialShare from './view';
+
+const perform = dispatch => ({
+  closeModal: () => dispatch(doHideNotification()),
+});
+
+export default connect(
+  null,
+  perform
+)(ModalSocialShare);

src/renderer/modal/modalSocialShare/view.jsx

@@ -0,0 +1,22 @@
+// @flow
+import React from 'react';
+import { Modal } from 'modal/modal';
+import SocialShare from 'component/socialShare';
+
+type Props = {
+  closeModal: () => void,
+  uri: string,
+};
+
+class ModalSocialShare extends React.PureComponent<Props> {
+  render() {
+    const { closeModal, uri } = this.props;
+    return (
+      <Modal isOpen onAborted={closeModal} type="custom" title={__('Share')}>
+        <SocialShare uri={uri} onDone={closeModal} />
+      </Modal>
+    );
+  }
+}
+
+export default ModalSocialShare;

src/renderer/modal/modalTransactionFailed/view.jsx

@@ -1,14 +1,22 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
 
-class ModalTransactionFailed extends React.PureComponent {
+type Props = {
+  closeModal: () => void,
+};
+
+class ModalTransactionFailed extends React.PureComponent<Props> {
   render() {
     const { closeModal } = this.props;
 
     return (
-      <Modal isOpen contentLabel={__('Transaction failed')} onConfirmed={closeModal}>
+      <Modal
-        {__('Transaction failed.')}:
+        isOpen
-      </Modal>
+        contentLabel={__('Transaction failed')}
+        title={__('Transaction Failed')}
+        onConfirmed={closeModal}
+      />
     );
   }
 }

src/renderer/modal/modalUpgrade/view.jsx

@@ -1,8 +1,14 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';
 
-class ModalUpgrade extends React.PureComponent {
+type Props = {
+  downloadUpgrade: () => void,
+  skipUpgrade: () => void,
+};
+
+class ModalUpgrade extends React.PureComponent<Props> {
   render() {
     const { downloadUpgrade, skipUpgrade } = this.props;
 
@@ -10,19 +16,19 @@ class ModalUpgrade extends React.PureComponent {
       <Modal
         isOpen
         contentLabel={__('Upgrade available')}
+        title={__('LBRY Leveled Up')}
         type="confirm"
         confirmButtonLabel={__('Upgrade')}
         abortButtonLabel={__('Skip')}
         onConfirmed={downloadUpgrade}
         onAborted={skipUpgrade}
       >
-        <h3 className="text-center">{__('LBRY Leveled Up')}</h3>
+        <div className="card__content">
-        <br />
           <p>
             {__('An updated version of LBRY is now available.')}{' '}
             {__('Your version is out of date and may be unreliable or insecure.')}
           </p>
-        <p className="meta text-center">
+          <p className="meta">
             {__('Want to know what has changed?')} See the{' '}
             <Button
               button="link"
@@ -30,6 +36,7 @@ class ModalUpgrade extends React.PureComponent {
               href="https://github.com/lbryio/lbry-desktop/releases"
             />.
           </p>
+        </div>
       </Modal>
     );
   }

src/renderer/modal/modalWalletDecrypt/view.jsx

@@ -1,12 +1,12 @@
 // @flow
 import React from 'react';
-import { Form, FormRow, FormField } from 'component/common/form';
+import { Form } from 'component/common/form';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';
 
 type Props = {
   closeModal: () => void,
-  unlockWallet: string => void,
+  decryptWallet: () => void,
   walletDecryptSucceded: boolean,
   updateWalletStatus: boolean,
 };
@@ -16,11 +16,6 @@ class ModalWalletDecrypt extends React.PureComponent<Props> {
     submitted: false, // Prior actions could be marked complete
   };
 
-  submitDecryptForm() {
-    this.setState({ submitted: true });
-    this.props.decryptWallet();
-  }
-
   componentDidUpdate() {
     const { props, state } = this;
 
@@ -30,12 +25,18 @@ class ModalWalletDecrypt extends React.PureComponent<Props> {
     }
   }
 
+  submitDecryptForm() {
+    this.setState({ submitted: true });
+    this.props.decryptWallet();
+  }
+
   render() {
-    const { closeModal, walletDecryptSucceded } = this.props;
+    const { closeModalgaa } = this.props;
 
     return (
       <Modal
         isOpen
+        title={__('Decrypt Wallet')}
         contentLabel={__('Decrypt Wallet')}
         type="confirm"
         confirmButtonLabel={__('Decrypt Wallet')}
@@ -43,10 +44,13 @@ class ModalWalletDecrypt extends React.PureComponent<Props> {
         onConfirmed={() => this.submitDecryptForm()}
         onAborted={closeModal}
       >
+        <section className="card__content">
           <Form onSubmit={() => this.submitDecryptForm()}>
+            <p>
               {__(
                 'Your wallet has been encrypted with a local password, performing this action will remove this password.'
               )}
+            </p>
             <div className="card__actions">
               <Button
                 button="link"
@@ -55,6 +59,7 @@ class ModalWalletDecrypt extends React.PureComponent<Props> {
               />
             </div>
           </Form>
+        </section>
       </Modal>
     );
   }

src/renderer/modal/modalWalletEncrypt/view.jsx

@@ -82,6 +82,7 @@ class ModalWalletEncrypt extends React.PureComponent<Props> {
     return (
       <Modal
         isOpen
+        title={__('Encrypt Wallet')}
         contentLabel={__('Encrypt Wallet')}
         type="confirm"
         confirmButtonLabel={__('Encrypt Wallet')}
@@ -89,13 +90,17 @@ class ModalWalletEncrypt extends React.PureComponent<Props> {
         onConfirmed={() => this.submitEncryptForm()}
         onAborted={closeModal}
       >
+        <section className="card__content">
           <Form onSubmit={() => this.submitEncryptForm()}>
+            <p>
               {__(
                 'Encrypting your wallet will require a password to access your local wallet data when LBRY starts. Please enter a new password for your wallet.'
               )}
+            </p>
             <FormRow padded>
               <FormField
                 stretch
+                autoFocus
                 error={passwordMismatch === true ? 'Passwords do not match' : false}
                 label={__('New Password')}
                 type="password"
@@ -113,10 +118,11 @@ class ModalWalletEncrypt extends React.PureComponent<Props> {
                 onChange={event => this.onChangeNewPasswordConfirm(event)}
               />
             </FormRow>
-          <br />
+            <p>
               {__(
                 'If your password is lost, it cannot be recovered. You will not be able to access your wallet without a password.'
               )}
+            </p>
             <FormRow padded>
               <FormField
                 stretch
@@ -136,6 +142,7 @@ class ModalWalletEncrypt extends React.PureComponent<Props> {
             </div>
             {failMessage && <div className="error-text">{__(failMessage)}</div>}
           </Form>
+        </section>
       </Modal>
     );
   }

src/renderer/modal/modalWalletUnlock/view.jsx

@@ -36,6 +36,7 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
     return (
       <Modal
         isOpen
+        title={__('Unlock Wallet')}
         contentLabel={__('Unlock Wallet')}
         type="confirm"
         shouldCloseOnOverlayClick={false}
@@ -44,13 +45,17 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
         onConfirmed={() => unlockWallet(password)}
         onAborted={quit}
       >
+        <section className="card__content">
           <Form onSubmit={() => unlockWallet(password)}>
+            <p>
               {__(
                 'Your wallet has been encrypted with a local password. Please enter your wallet password to proceed.'
               )}
+            </p>
             <FormRow padded>
               <FormField
                 stretch
+                autoFocus
                 error={walletUnlockSucceded === false ? 'Incorrect Password' : false}
                 label={__('Wallet Password')}
                 type="password"
@@ -66,6 +71,7 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
               />
             </div>
           </Form>
+        </section>
       </Modal>
     );
   }

src/renderer/modal/modalWelcome/view.jsx

@@ -6,9 +6,8 @@ const ModalWelcome = props => {
   const { closeModal } = props;
 
   return (
-    <Modal type="custom" isOpen contentLabel="Welcome to LBRY">
+    <Modal type="custom" isOpen contentLabel="Welcome to LBRY" title={__('Welcome to LBRY')}>
-      <section>
+      <section className="card__content">
-        <h3 className="modal__header">{__('Welcome to LBRY')}</h3>
         <p>
           {__('Using LBRY is like dating a centaur. Totally normal up top, and')}{' '}
           <em>{__('way different')}</em> {__('underneath.')}
@@ -18,7 +17,7 @@ const ModalWelcome = props => {
           {__('Below, LBRY is controlled by users -- you -- via blockchain and decentralization.')}
         </p>
         <div className="modal__buttons">
-          <Button button="primary" onClick={closeModal} label={__("Blockchain Centaurs? I'm In")} />
+          <Button button="primary" onClick={closeModal} label={__("I'm In")} />
         </div>
       </section>
     </Modal>