cleanup code and add documentation

This commit is contained in:
Anthony 2021-09-07 20:39:35 +02:00
parent 7a81c8b404
commit a07146ffc1
No known key found for this signature in database
GPG key ID: C386D3C93D50E356

View file

@ -66,19 +66,34 @@ function WalletSendTip(props: Props) {
doToast,
isAuthenticated,
} = props;
/** REACT STATE **/
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 [isConfirming, setIsConfirming] = React.useState(false);
// only allow certain creators to receive tips
const [canReceiveFiatTip, setCanReceiveFiatTip] = React.useState(); // dont persist because it needs to be calc'd per creator
// show things conditionally based on if a user has a card already
const [hasCardSaved, setHasSavedCard] = usePersistedState('comment-support:hasCardSaved', false);
// show the tip error on the frontend
const [tipError, setTipError] = React.useState();
// denote which tab to show on the frontend
const [activeTab, setActiveTab] = React.useState(TAB_BOOST);
// alphanumeric claim id
const { claim_id: claimId } = claim;
// channel name used in url
const { channelName } = parseURI(uri);
const activeChannelName = activeChannelClaim && activeChannelClaim.name;
const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
const [canReceiveFiatTip, setCanReceiveFiatTip] = React.useState(); // dont persist because it needs to be calc'd per creator
const [hasCardSaved, setHasSavedCard] = usePersistedState('comment-support:hasCardSaved', false);
// setup variables for tip API
let channelClaimId, tipChannelName;
// if there is a signing channel it's on a file
@ -116,7 +131,7 @@ function WalletSendTip(props: Props) {
}
}, [channelClaimId, isAuthenticated, stripeEnvironment]);
// check if creator has an account saved
// focus tip element if it exists
React.useEffect(() => {
const tipInputElement = document.getElementById('tip-input');
if (tipInputElement) {
@ -124,6 +139,7 @@ function WalletSendTip(props: Props) {
}
}, []);
// check if user can receive tips
React.useEffect(() => {
if (channelClaimId && stripeEnvironment) {
Lbryio.call(
@ -149,11 +165,13 @@ function WalletSendTip(props: Props) {
}
}, [channelClaimId, stripeEnvironment]);
// if user has no balance, used to show conditional frontend
const noBalance = balance === 0;
// the tip amount, based on if a preset or custom tip amount is being used
const tipAmount = useCustomTip ? customTipAmount : presetTipAmount;
const [activeTab, setActiveTab] = React.useState(TAB_BOOST);
// get type of claim (stream/channel/repost/collection) for display on frontend
function getClaimTypeText() {
if (claim.value_type === 'stream') {
return __('Content');
@ -169,6 +187,7 @@ function WalletSendTip(props: Props) {
}
const claimTypeText = getClaimTypeText();
// icon to use or explainer text to show per tab
let iconToUse;
let explainerText = '';
if (activeTab === TAB_BOOST) {
@ -233,7 +252,7 @@ function WalletSendTip(props: Props) {
setTipError(tipError);
}, [tipAmount, balance, setTipError, activeTab]);
//
// make call to the backend to send lbc or fiat
function sendSupportOrConfirm(instantTipMaxAmount = null) {
// send a tip
if (!isConfirming && (!instantTipMaxAmount || !instantTipEnabled || tipAmount > instantTipMaxAmount)) {
@ -273,6 +292,7 @@ function WalletSendTip(props: Props) {
} else if (isConfirming) {
let sendAnonymously = !activeChannelClaim || incognito;
// hit backend to send tip
Lbryio.call(
'customer',
'tip',
@ -389,6 +409,7 @@ function WalletSendTip(props: Props) {
// if it's a valid number display it, otherwise do an empty string
const displayAmount = !isNan(tipAmount) ? amountToShow : '';
// build button text based on tab
if (activeTab === TAB_BOOST) {
return claimIsMine
? __('Boost Your %claimTypeText%', { claimTypeText })
@ -400,12 +421,14 @@ function WalletSendTip(props: Props) {
}
}
// dont allow user to click send button
function shouldDisableAmountSelector(amount) {
return (
(amount > balance && activeTab !== TAB_FIAT) || (activeTab === TAB_FIAT && (!hasCardSaved || !canReceiveFiatTip))
);
}
// showed on confirm page above amount
function setConfirmLabel() {
if (activeTab === TAB_LBC) {
return __('Tipping Credit');