LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Minor UX fixes

Browse source 
Includes
-some better error messages when using credits (publish, tip, send)
-claim new user reward after phone verification (requires API change)
-vertical stacking on send screen
-add missing blank slate message for transaction history
This commit is contained in:
Thomas Zarebczan 2018-06-18 02:34:59 -04:00
parent 36dbf4dc44
commit 0e1df68cc2
8 changed files with 52 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/renderer/component/publishForm/view.jsx
View file

@ -155,10 +155,14 @@ class PublishForm extends React.PureComponent<Props> {
const { balance, updatePublishForm } = this.props;
let bidError;
if (balance <= bid) {
bidError = __('Not enough credits');
if (bid === 0) {
bidError = __('Deposit cannot be 0');
} else if (balance === bid) {
bidError = __('Please decrease your deposit to account for transaction fees');
} else if (balance < bid) {
bidError = __('Deposit cannot be higher than your balance');
} else if (bid <= MINIMUM_PUBLISH_BID) {
bidError = __('Your bid must be higher');
bidError = __('Your deposit must be higher');
}
updatePublishForm({ bid, bidError });

17
src/renderer/component/selectChannel/view.jsx
View file

@ -55,11 +55,13 @@ class ChannelSection extends React.PureComponent<Props, State> {
handleChannelChange(event: SyntheticInputEvent<*>) {
const { onChannelChange } = this.props;
const { newChannelBid } = this.state;
const channel = event.target.value;
if (channel === CHANNEL_NEW) {
this.setState({ addingChannel: true });
onChannelChange(channel);
this.handleNewChannelBidChange(newChannelBid);
} else {
this.setState({ addingChannel: false });
onChannelChange(channel);
@ -84,14 +86,15 @@ class ChannelSection extends React.PureComponent<Props, State> {
});
}
handleNewChannelBidChange(event: SyntheticInputEvent<*>) {
handleNewChannelBidChange(newChannelBid: number) {
const { balance } = this.props;
const newChannelBid = parseFloat(event.target.value);
let newChannelBidError;
if (newChannelBid === balance) {
newChannelBidError = __('Please decrease your bid to account for transaction fees');
if (newChannelBid === 0) {
newChannelBidError = __('Your deposit cannot be 0');
} else if (newChannelBid === balance) {
newChannelBidError = __('Please decrease your deposit to account for transaction fees');
} else if (newChannelBid > balance) {
newChannelBidError = __('Not enough credits');
newChannelBidError = __('Deposit cannot be higher than your balance');
}
this.setState({
@ -176,6 +179,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
label={__('Name')}
type="text"
prefix="@"
placeholder={__('myChannelName')}
error={newChannelNameError}
value={newChannelName}
onChange={this.handleNewChannelNameChange}
@ -183,6 +187,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
</FormRow>
<FormRow padded>
<FormField
className="input--price-amount"
label={__('Deposit')}
postfix="LBC"
step="any"
@ -193,7 +198,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
)}
error={newChannelBidError}
value={newChannelBid}
onChange={this.handleNewChannelBidChange}
onChange={event => this.handleNewChannelBidChange(parseFloat(event.target.value))}
/>
</FormRow>
<div className="card__actions">

10
src/renderer/component/walletSend/view.jsx
View file

@ -65,10 +65,13 @@ class WalletSend extends React.PureComponent<Props> {
value={values.amount}
error={
(!!values.amount && touched.amount && errors.amount) ||
(values.amount > balance && __('Not enough'))
(values.amount === balance &&
__('Decrease amount to account for transaction fee')) ||
(values.amount > balance && __('Not enough credits'))
}
/>
</FormRow>
<FormRow padded>
<FormField
type="text"
name="address"
@ -89,7 +92,8 @@ class WalletSend extends React.PureComponent<Props> {
disabled={
!values.address ||
!!Object.keys(errors).length ||
!(parseFloat(values.amount) > 0.0)
!(parseFloat(values.amount) > 0.0) ||
parseFloat(values.amount) === balance
}
/>
</div>

32
src/renderer/component/walletSendTip/view.jsx
View file

@ -9,7 +9,6 @@ type Props = {
uri: string,
title: string,
claim: Claim,
errorMessage: string,
isPending: boolean,
sendSupport: (number, string, string) => void,
onCancel: () => void,
@ -18,7 +17,8 @@ type Props = {
};
type State = {
amount: number,
tipAmount: number,
newTipError: string,
};
class WalletSendTip extends React.PureComponent<Props, State> {
@ -26,7 +26,8 @@ class WalletSendTip extends React.PureComponent<Props, State> {
super(props);
this.state = {
amount: 0,
tipAmount: 0,
newTipError: '',
};
(this: any).handleSendButtonClicked = this.handleSendButtonClicked.bind(this);
@ -35,9 +36,9 @@ class WalletSendTip extends React.PureComponent<Props, State> {
handleSendButtonClicked() {
const { claim, uri, sendSupport, sendTipCallback } = this.props;
const { claim_id: claimId } = claim;
const { amount } = this.state;
const { tipAmount } = this.state;
sendSupport(amount, claimId, uri);
sendSupport(tipAmount, claimId, uri);
// ex: close modal
if (sendTipCallback) {
@ -46,14 +47,24 @@ class WalletSendTip extends React.PureComponent<Props, State> {
}
handleSupportPriceChange(event: SyntheticInputEvent<*>) {
const { balance } = this.props;
const tipAmount = parseFloat(event.target.value);
let newTipError;
if (tipAmount === balance) {
newTipError = __('Please decrease your tip to account for transaction fees');
} else if (tipAmount > balance) {
newTipError = __('Not enough credits');
}
this.setState({
amount: Number(event.target.value),
tipAmount,
newTipError,
});
}
render() {
const { title, errorMessage, isPending, uri, onCancel, balance } = this.props;
const { amount } = this.state;
const { title, isPending, uri, onCancel, balance } = this.props;
const { tipAmount, newTipError } = this.state;
return (
<div>
@ -67,7 +78,8 @@ class WalletSendTip extends React.PureComponent<Props, State> {
label={__('Amount')}
postfix={__('LBC')}
className="input--price-amount"
error={errorMessage}
error={newTipError}
value={tipAmount}
min="0"
step="any"
type="number"
@ -84,7 +96,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
<Button
button="primary"
label={__('Send')}
disabled={isPending || amount <= 0 || amount > balance}
disabled={isPending || tipAmount <= 0 || tipAmount > balance || tipAmount === balance}
onClick={this.handleSendButtonClicked}
/>
<Button

2
src/renderer/modal/modalRouter/view.jsx
View file

@ -94,7 +94,7 @@ class ModalRouter extends React.PureComponent<Props> {
const { balance, page, isCreditIntroAcknowledged } = props;
if (
balance <= 0 &&
balance === 0 &&
!isCreditIntroAcknowledged &&
(['send', 'publish'].includes(page) || this.isPaidShowPage(props))
) {

2
src/renderer/page/transactionHistory/view.jsx
View file

@ -31,7 +31,7 @@ class TransactionHistoryPage extends React.PureComponent {
{transactions && transactions.length ? (
<TransactionList transactions={transactions} />
) : (
''
<div className="card__content">{__("Looks like you don't have any transactions")}</div>
)}
</section>
</Page>

1
src/renderer/redux/actions/user.js
View file

@ -169,6 +169,7 @@ export function doUserPhoneVerify(verificationCode) {
data: { phone_number: phoneNumber },
});
dispatch(doUserFetch());
dispatch(doClaimRewardType(rewards.TYPE_NEW_USER));
})
.catch(error => dispatch(doUserPhoneVerifyFailure(error)));
};

6
src/renderer/redux/reducers/user.js
View file

@ -89,12 +89,10 @@ reducers[ACTIONS.USER_PHONE_VERIFY_STARTED] = state =>
});
reducers[ACTIONS.USER_PHONE_VERIFY_SUCCESS] = (state, action) => {
const user = Object.assign({}, state.user);
user.phone_number = action.data.phone_number;
return Object.assign({}, state, {
Object.assign({}, state, {
phoneToVerify: '',
phoneVerifyIsPending: false,
user,
user: action.data.user,
});
};