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

Tip-Modal: Add settings persistence and UX improvements.

Browse source 
--- Issues:
(1) #-4394 add persistence to new support modal.
(2) Should collapse the custom field when presets are selected.
Even though the Send button repeats the amount for Tip, it's still confusing to see both the Preset being active and Custom numeric field visible.
(3) Missing localization tags.
This commit is contained in:
infiinte-persistence 2020-06-17 09:11:57 +02:00 committed by Sean Yesmunt
parent 117ccd87e1
commit 644e76fd81
2 changed files with 28 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
static/app-strings.json
View file

@ -1210,6 +1210,8 @@
"Your browser does not support iframes.": "Your browser does not support iframes.",
"Not a valid LBRY address": "Not a valid LBRY address",
"Confirm Tip": "Confirm Tip",
"Supporting": "Supporting",
"Tipping": "Tipping",
"Tipping: ": "Tipping: ",
"Sending: ": "Sending: ",
"To: ": "To: ",
@ -1244,6 +1246,9 @@
"Thanks for the feedback! You help make the app better for everyone.": "Thanks for the feedback! You help make the app better for everyone.",
"Thanks for the feedback. Mark has been notified and is currently walking over to his computer to work on this.": "Thanks for the feedback. Mark has been notified and is currently walking over to his computer to work on this.",
"Changelog": "Changelog",
"Supporting Content Requires LBC": "Supporting Content Requires LBC",
"With LBC, you can send tips to your favorite creators, or help boost their content for more people to see.": "With LBC, you can send tips to your favorite creators, or help boost their content for more people to see.",
"Boost Your Content": "Boost Your Content",
"Send Revokable Support": "Send Revokable Support",
"Send a %amount% Tip": "Send a %amount% Tip",
"Channel to show support as": "Channel to show support as",
@ -1251,5 +1256,6 @@
"Support This Content": "Support This Content",
"Make this support permanent": "Make this support permanent",
"Custom support amount": "Custom support amount",
"Loading your channels...":"Loading your channels..."
"(%lbc_balance% available)": "(%lbc_balance% available)",
"Loading your channels...": "Loading your channels..."
}

34
ui/component/walletSendTip/view.jsx
View file

@ -50,10 +50,11 @@ function WalletSendTip(props: Props) {
channels,
fetchingChannels,
} = props;
const [tipAmount, setTipAmount] = React.useState(DEFAULT_TIP_AMOUNTS[0]);
const [presetTipAmount, setPresetTipAmount] = usePersistedState('comment-support:presetTip', DEFAULT_TIP_AMOUNTS[0]);
const [customTipAmount, setCustomTipAmount] = usePersistedState('comment-support:customTip', 1.0);
const [useCustomTip, setUseCustomTip] = usePersistedState('comment-support:useCustomTip', false);
const [tipError, setTipError] = React.useState();
const [isSupport, setIsSupport] = React.useState(claimIsMine);
const [showMore, setShowMore] = React.useState(false);
const [sendAsTip, setSendAsTip] = usePersistedState('comment-support:sendAsTip', true);
const [isConfirming, setIsConfirming] = React.useState(false);
const isMobile = useIsMobile();
const [selectedChannel, setSelectedChannel] = usePersistedState('comment-support:channel');
@ -70,6 +71,9 @@ function WalletSendTip(props: Props) {
}
}, [channelStrings]);
const tipAmount = useCustomTip ? customTipAmount : presetTipAmount;
const isSupport = claimIsMine ? true : !sendAsTip;
React.useEffect(() => {
const regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
const validTipInput = regexp.test(String(tipAmount));
@ -134,9 +138,9 @@ function WalletSendTip(props: Props) {
}
}
function handleSupportPriceChange(event: SyntheticInputEvent<*>) {
function handleCustomPriceChange(event: SyntheticInputEvent<*>) {
const tipAmount = parseFloat(event.target.value);
setTipAmount(tipAmount);
setCustomTipAmount(tipAmount);
}
return (
@ -193,7 +197,7 @@ function WalletSendTip(props: Props) {
<>
<div className="section">
<SelectChannel
label="Channel to show support as"
label={__('Channel to show support as')}
channel={selectedChannel}
onChannelChange={newChannel => setSelectedChannel(newChannel)}
/>
@ -210,7 +214,10 @@ function WalletSendTip(props: Props) {
'button-toggle--disabled': amount > balance,
})}
label={`${amount} LBC`}
onClick={() => setTipAmount(amount)}
onClick={() => {
setPresetTipAmount(amount);
setUseCustomTip(false);
}}
/>
))}
<Button
@ -219,18 +226,18 @@ function WalletSendTip(props: Props) {
'button-toggle--active': !DEFAULT_TIP_AMOUNTS.includes(tipAmount),
})}
label={__('Custom')}
onClick={() => setShowMore(true)}
onClick={() => setUseCustomTip(true)}
/>
</div>
{showMore && (
{useCustomTip && (
<div className="section">
<FormField
autoFocus
name="tip-input"
label={
<React.Fragment>
{'Custom support amount'}{' '}
{__('Custom support amount')}{' '}
{isMobile && (
<I18nMessage tokens={{ lbc_balance: <CreditAmount badge={false} amount={balance} /> }}>
(%lbc_balance% available)
@ -244,7 +251,8 @@ function WalletSendTip(props: Props) {
step="any"
type="number"
placeholder="1.23"
onChange={event => handleSupportPriceChange(event)}
value={customTipAmount}
onChange={event => handleCustomPriceChange(event)}
/>
</div>
)}
@ -268,8 +276,8 @@ function WalletSendTip(props: Props) {
name="toggle-is-support"
type="checkbox"
label={__('Make this support permanent')}
checked={!isSupport}
onChange={() => setIsSupport(!isSupport)}
checked={sendAsTip}
onChange={() => setSendAsTip(!sendAsTip)}
/>
)}
</div>