From 49573a65b9e59ab828b24b9e4eb440d712a7c9a7 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 25 Sep 2018 20:12:07 -0400 Subject: [PATCH 1/3] add logic for reward codes --- .eslintrc.json | 3 +- package.json | 4 +- src/renderer/component/rewardTile/index.js | 11 ++- src/renderer/component/rewardTile/view.jsx | 6 +- src/renderer/modal/modalRewardCode/index.js | 28 +++++++ src/renderer/modal/modalRewardCode/view.jsx | 81 +++++++++++++++++++++ src/renderer/modal/modalRouter/view.jsx | 17 ++++- src/renderer/page/rewards/view.jsx | 9 +++ src/renderer/scss/component/_card.scss | 12 ++- src/renderer/scss/component/_modal.scss | 2 +- webpack.renderer.additions.js | 2 +- yarn.lock | 8 +- 12 files changed, 161 insertions(+), 22 deletions(-) create mode 100644 src/renderer/modal/modalRewardCode/index.js create mode 100644 src/renderer/modal/modalRewardCode/view.jsx diff --git a/.eslintrc.json b/.eslintrc.json index fb260f101..bb482f3f2 100644 --- a/.eslintrc.json +++ b/.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 } } diff --git a/package.json b/package.json index 914d5066c..0a4b70651 100644 --- a/package.json +++ b/package.json @@ -50,8 +50,8 @@ "formik": "^0.10.4", "hast-util-sanitize": "^1.1.2", "keytar": "^4.2.1", - "lbry-redux": "lbryio/lbry-redux#fa141b9175500b874bb77da0258e18d902e069b9", - "lbryinc": "lbryio/lbryinc#c09aa2645ecccb33c83e9a9545ff119232910f6f", + "lbry-redux": "lbryio/lbry-redux#c079b108c3bc4ba2b4fb85fb112b52cfc040c301", + "lbryinc": "lbryio/lbryinc#5050001a63bbde1c461c87dbc2b65f330f5aacc9", "localforage": "^1.7.1", "mammoth": "^1.4.6", "mime": "^2.3.1", diff --git a/src/renderer/component/rewardTile/index.js b/src/renderer/component/rewardTile/index.js index ade2a1db9..5dc6eedd4 100644 --- a/src/renderer/component/rewardTile/index.js +++ b/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); diff --git a/src/renderer/component/rewardTile/view.jsx b/src/renderer/component/rewardTile/view.jsx index 9bfcfc507..0bacd52ac 100644 --- a/src/renderer/component/rewardTile/view.jsx +++ b/src/renderer/component/rewardTile/view.jsx @@ -7,6 +7,7 @@ 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) => {
{reward.reward_title}
{reward.reward_description}
+ {reward.reward_type === rewards.TYPE_GENERATED_CODE && ( +
+ + ); + } +} + +export default ModalRewardCode; diff --git a/src/renderer/modal/modalRouter/view.jsx b/src/renderer/modal/modalRouter/view.jsx index 826f35a9c..d9683f148 100644 --- a/src/renderer/modal/modalRouter/view.jsx +++ b/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'; @@ -27,13 +28,15 @@ 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 { - constructor(props) { + constructor(props: Props) { super(props); this.state = { @@ -51,7 +54,7 @@ class ModalRouter extends React.PureComponent { } showTransitionModals(props) { - const { modal, modalProps, openModal, page } = props; + const { modal, openModal, page } = props; if (modal) { return; @@ -80,6 +83,8 @@ class ModalRouter extends React.PureComponent { if (!isWelcomeAcknowledged && user && !user.is_reward_approved && !user.is_identity_verified) { return MODALS.WELCOME; } + + return undefined; } checkShowEmail(props) { @@ -92,6 +97,8 @@ class ModalRouter extends React.PureComponent { ) { return MODALS.EMAIL_COLLECTION; } + + return undefined; } checkShowCreditIntro(props) { @@ -104,6 +111,8 @@ class ModalRouter extends React.PureComponent { ) { return MODALS.INSUFFICIENT_CREDITS; } + + return undefined; } isPaidShowPage(props) { @@ -177,6 +186,8 @@ class ModalRouter extends React.PureComponent { return ; case MODALS.WALLET_UNLOCK: return ; + case MODALS.REWARD_GENERATED_CODE: + return ; default: return null; } diff --git a/src/renderer/page/rewards/view.jsx b/src/renderer/page/rewards/view.jsx index 7f98b50e8..79f2095c3 100644 --- a/src/renderer/page/rewards/view.jsx +++ b/src/renderer/page/rewards/view.jsx @@ -7,6 +7,7 @@ import Button from 'component/button'; import Page from 'component/page'; import classnames from 'classnames'; import type { Reward } from 'types/reward'; +import { rewards as REWARD_TYPES } from 'lbryinc'; type Props = { doAuth: () => void, @@ -125,6 +126,14 @@ class RewardsPage extends React.PureComponent { 'card--disabled': isNotEligible, })} > + {rewards.map(reward => )} ); diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss index c8fcf54b2..11afc62f8 100644 --- a/src/renderer/scss/component/_card.scss +++ b/src/renderer/scss/component/_card.scss @@ -430,15 +430,13 @@ } .card__list--rewards { + column-count: 2; + column-gap: $spacing-vertical * 1/3; + .card { display: inline-block; - width: calc(50% - 10px); - margin-bottom: 20px; - vertical-align: top; - - &:not(:nth-child(2n + 1)) { - margin-left: 20px; - } + margin: 0 0 $spacing-vertical * 1/3; + width: 100%; } } diff --git a/src/renderer/scss/component/_modal.scss b/src/renderer/scss/component/_modal.scss index 5c8120b42..f84e051ee 100644 --- a/src/renderer/scss/component/_modal.scss +++ b/src/renderer/scss/component/_modal.scss @@ -74,8 +74,8 @@ } .modal__header { + font-size: 2em; margin-bottom: $spacing-vertical * 2/3; - text-align: center; } .modal__buttons { diff --git a/webpack.renderer.additions.js b/webpack.renderer.additions.js index a04ecab0f..cb9523c55 100644 --- a/webpack.renderer.additions.js +++ b/webpack.renderer.additions.js @@ -31,7 +31,7 @@ module.exports = { }, plugins: isDev ? [ new FilewatcherPlugin({ - watchFileRegex: [require.resolve('lbry-redux')], + watchFileRegex: [require.resolve('lbry-redux'), require.resolve('lbryinc')], }), ] : [], }; diff --git a/yarn.lock b/yarn.lock index 2b2961765..45ca35bcb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5662,16 +5662,16 @@ lbry-redux@lbryio/lbry-redux: proxy-polyfill "0.1.6" reselect "^3.0.0" -lbry-redux@lbryio/lbry-redux#fa141b9175500b874bb77da0258e18d902e069b9: +lbry-redux@lbryio/lbry-redux#c079b108c3bc4ba2b4fb85fb112b52cfc040c301: version "0.0.1" - resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/fa141b9175500b874bb77da0258e18d902e069b9" + resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/c079b108c3bc4ba2b4fb85fb112b52cfc040c301" dependencies: proxy-polyfill "0.1.6" reselect "^3.0.0" -lbryinc@lbryio/lbryinc#c09aa2645ecccb33c83e9a9545ff119232910f6f: +lbryinc@lbryio/lbryinc#5050001a63bbde1c461c87dbc2b65f330f5aacc9: version "0.0.1" - resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/c09aa2645ecccb33c83e9a9545ff119232910f6f" + resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/5050001a63bbde1c461c87dbc2b65f330f5aacc9" dependencies: lbry-redux lbryio/lbry-redux reselect "^3.0.0" From caa5abfdfd1f71b7ce68952166c73dcee2575894 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Wed, 26 Sep 2018 13:48:07 -0400 Subject: [PATCH 2/3] ensure modals have consistent styling --- src/renderer/component/socialShare/view.jsx | 74 ++++++------- src/renderer/component/userEmailNew/view.jsx | 5 +- .../component/userEmailVerify/view.jsx | 2 +- src/renderer/component/walletSendTip/view.jsx | 79 ++++++-------- src/renderer/modal/modal.jsx | 3 + .../modal/modalAffirmPurchase/view.jsx | 25 +++-- src/renderer/modal/modalAuthFailure/view.jsx | 21 ++-- .../modal/modalAutoUpdateConfirm/view.jsx | 16 +-- .../modal/modalAutoUpdateDownloaded/view.jsx | 4 +- .../modalConfirmThumbnailUpload/view.jsx | 21 ++-- .../modal/modalConfirmTransaction/view.jsx | 19 ++-- src/renderer/modal/modalCreditIntro/view.jsx | 5 +- src/renderer/modal/modalDownloading/view.jsx | 88 ++++++++------- .../modal/modalEmailCollection/view.jsx | 13 +-- src/renderer/modal/modalError/view.jsx | 34 +++--- src/renderer/modal/modalFileTimeout/view.jsx | 24 ++++- src/renderer/modal/modalFirstReward/view.jsx | 15 +-- .../modal/modalFirstSubscription/view.jsx | 13 ++- .../modal/modalIncompatibleDaemon/view.jsx | 9 +- .../modal/modalOpenExternalLink/view.jsx | 18 ++-- .../modal/modalPhoneCollection/view.jsx | 20 ++-- src/renderer/modal/modalPublish/view.jsx | 17 +-- src/renderer/modal/modalRemoveFile/view.jsx | 38 ++++--- src/renderer/modal/modalRevokeClaim/view.jsx | 99 +++++++++-------- .../modalRewardApprovalRequired/view.jsx | 12 ++- src/renderer/modal/modalRewardCode/view.jsx | 6 +- src/renderer/modal/modalSendTip/view.jsx | 12 ++- src/renderer/modal/modalSocialShare/view.jsx | 2 +- .../modal/modalTransactionFailed/view.jsx | 16 ++- src/renderer/modal/modalUpgrade/view.jsx | 37 ++++--- .../modal/modalWalletDecrypt/view.jsx | 45 ++++---- .../modal/modalWalletEncrypt/view.jsx | 102 +++++++++--------- src/renderer/modal/modalWalletUnlock/view.jsx | 51 +++++---- src/renderer/modal/modalWelcome/view.jsx | 7 +- src/renderer/scss/_gui.scss | 6 +- src/renderer/scss/_vars.scss | 4 + src/renderer/scss/component/_card.scss | 8 ++ src/renderer/scss/component/_modal.scss | 18 ++-- 38 files changed, 555 insertions(+), 433 deletions(-) diff --git a/src/renderer/component/socialShare/view.jsx b/src/renderer/component/socialShare/view.jsx index f340e082a..c23106f48 100644 --- a/src/renderer/component/socialShare/view.jsx +++ b/src/renderer/component/socialShare/view.jsx @@ -37,47 +37,41 @@ class SocialShare extends React.PureComponent { : `${speechPrefix}${claimName}#${claimId}`; return ( -
-
-

{__('Share This Content')}

- -
-
-
-
- -
-
-
+
+
+
+ +
-
+
+
+ ); } } diff --git a/src/renderer/component/userEmailNew/view.jsx b/src/renderer/component/userEmailNew/view.jsx index e6485811f..47553e476 100644 --- a/src/renderer/component/userEmailNew/view.jsx +++ b/src/renderer/component/userEmailNew/view.jsx @@ -47,7 +47,7 @@ class UserEmailNew extends React.PureComponent {

{__("We'll never sell your email, and you can unsubscribe at any time.")}

- + { {cancelButton}
+
+ {`${__('Your email may be used to sync usage data across devices.')} `} +
); diff --git a/src/renderer/component/userEmailVerify/view.jsx b/src/renderer/component/userEmailVerify/view.jsx index 95c9b53e5..07429a2c4 100644 --- a/src/renderer/component/userEmailVerify/view.jsx +++ b/src/renderer/component/userEmailVerify/view.jsx @@ -56,7 +56,7 @@ class UserEmailVerify extends React.PureComponent { return (

Please enter the verification code emailed to {email}.

- + { } render() { - const { title, isPending, uri, onCancel, balance } = this.props; + const { title, isPending, uri, onCancel } = this.props; const { tipAmount, tipError } = this.state; return ( -
-
-

- {__('Send a tip to')} -

-
-
- this.handleSupportPriceChange(event)} - helper={ - - {__(`This will appear as a tip for ${title} located at ${uri}.`)}{' '} -
+
- + ); } } diff --git a/src/renderer/modal/modal.jsx b/src/renderer/modal/modal.jsx index baafe3340..23048b2a7 100644 --- a/src/renderer/modal/modal.jsx +++ b/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 { @@ -51,6 +52,7 @@ export class Modal extends React.PureComponent { fullScreen, className, overlayClassName, + title, ...modalProps } = this.props; return ( @@ -65,6 +67,7 @@ export class Modal extends React.PureComponent { ![null, undefined, ''].includes(overlayClassName) ? overlayClassName : 'modal-overlay' } > +

{title}

{children}
{type === 'custom' ? null : ( // custom modals define their own buttons
diff --git a/src/renderer/modal/modalAffirmPurchase/view.jsx b/src/renderer/modal/modalAffirmPurchase/view.jsx index df3a9301f..cb3e2da23 100644 --- a/src/renderer/modal/modalAffirmPurchase/view.jsx +++ b/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 { constructor() { super(); @@ -25,15 +35,18 @@ class ModalAffirmPurchase extends React.PureComponent { - {__('This will purchase')} {title} {__('for')}{' '} - - - {' '} - {__('credits')}. +
+ {__('This will purchase')} {`"${title}"`} {__('for')}{' '} + + + {' '} + {__('credits')}. +
); } diff --git a/src/renderer/modal/modalAuthFailure/view.jsx b/src/renderer/modal/modalAuthFailure/view.jsx index 83c6b6856..c816fd0d8 100644 --- a/src/renderer/modal/modalAuthFailure/view.jsx +++ b/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 { render() { const { close } = this.props; @@ -9,6 +14,7 @@ class ModalAuthFailure extends React.PureComponent { -

{__('Authentication Failure')}

-

- {__( - 'If reloading does not fix this, or you see this at every start up, please email help@lbry.io.' - )} -

+
+

+ {__( + 'If reloading does not fix this, or you see this at every start up, please email help@lbry.io.' + )} +

+
); } diff --git a/src/renderer/modal/modalAutoUpdateConfirm/view.jsx b/src/renderer/modal/modalAutoUpdateConfirm/view.jsx index 6314cca86..258a725e4 100644 --- a/src/renderer/modal/modalAutoUpdateConfirm/view.jsx +++ b/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 { 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(); }} > -
-

{__('LBRY Update Ready')}

+

{__('Your LBRY update is ready. Restart LBRY now to use it!')}

-

+

{__('Want to know what has changed?')} See the{' '}

+
+ {downloadComplete ? ( +
+ ); } diff --git a/src/renderer/modal/modalEmailCollection/view.jsx b/src/renderer/modal/modalEmailCollection/view.jsx index fc075eade..c8d9037c3 100644 --- a/src/renderer/modal/modalEmailCollection/view.jsx +++ b/src/renderer/modal/modalEmailCollection/view.jsx @@ -16,7 +16,6 @@ class ModalEmailCollection extends React.PureComponent { const { closeModal, email, user } = this.props; const cancelButton =