diff --git a/ui/component/walletSendTip/view.jsx b/ui/component/walletSendTip/view.jsx index 7af9b6046..4f99fbbb4 100644 --- a/ui/component/walletSendTip/view.jsx +++ b/ui/component/walletSendTip/view.jsx @@ -122,7 +122,7 @@ function WalletSendTip(props: Props) { // check if creator has an account saved React.useEffect(() => { - const tipInputElement = document.getElementById('tip-input'); + var tipInputElement = document.getElementById('tip-input'); if (tipInputElement) { tipInputElement.focus() } }, []); @@ -141,8 +141,6 @@ function WalletSendTip(props: Props) { .then((accountCheckResponse) => { if (accountCheckResponse === true && canReceiveFiatTip !== true) { setCanReceiveFiatTip(true); - } else { - setCanReceiveFiatTip(false); } }) .catch(function (error) { @@ -171,8 +169,7 @@ function WalletSendTip(props: Props) { } const claimTypeText = setClaimTypeText(); - let iconToUse; - let explainerText = ''; + let iconToUse, explainerText; if (activeTab === TAB_BOOST) { iconToUse = ICONS.LBC; explainerText = __('This refundable boost will improve the discoverability of this %claimTypeText% while active.', {claimTypeText}); @@ -276,8 +273,8 @@ function WalletSendTip(props: Props) { Lbryio.call( 'customer', 'tip', - { // round to fix issues with floating point numbers - amount: Math.round(100 * tipAmount), // convert from dollars to cents + { + amount: 100 * tipAmount, // convert from dollars to cents creator_channel_name: tipChannelName, // creator_channel_name creator_channel_claim_id: channelClaimId, tipper_channel_name: sendAnonymously ? '' : activeChannelName, @@ -298,7 +295,7 @@ function WalletSendTip(props: Props) { }); }) .catch(function(error) { - let displayError = 'Sorry, there was an error in processing your payment!'; + var displayError = 'Sorry, there was an error in processing your payment!'; if (error.message !== 'payment intent failed to confirm') { displayError = error.message; @@ -316,53 +313,10 @@ function WalletSendTip(props: Props) { } } - const countDecimals = function(value) { - const text = value.toString(); - const index = text.indexOf('.'); - return (text.length - index - 1); - }; - function handleCustomPriceChange(event: SyntheticInputEvent<*>) { - let tipAmountAsString = event.target.value; + const tipAmount = parseFloat(event.target.value); - let tipAmount = parseFloat(tipAmountAsString); - - const howManyDecimals = countDecimals(tipAmountAsString); - - // fiat tip input - if (activeTab === TAB_FIAT) { - if (Number.isNaN(tipAmount)) { - setCustomTipAmount(''); - } - - // allow maximum of two decimal places - if (howManyDecimals > 2) { - tipAmount = Math.floor(tipAmount * 100) / 100; - } - - // remove decimals, and then get number of digits - const howManyDigits = Math.trunc(tipAmount).toString().length; - - if (howManyDigits > 4 && tipAmount !== 1000) { - setTipError('Amount cannot be over 1000 dollars'); - setCustomTipAmount(tipAmount); - } else if (tipAmount > 1000) { - setTipError('Amount cannot be over 1000 dollars'); - setCustomTipAmount(tipAmount); - } else { - setCustomTipAmount(tipAmount); - } - // LBC tip input - } else { - // TODO: this is a bit buggy, needs a touchup - // if (howManyDecimals > 9) { - // // only allows up to 8 decimal places - // tipAmount = Number(tipAmount.toString().match(/^-?\d+(?:\.\d{0,8})?/)[0]); - // - // setTipError('Please only use up to 8 decimals'); - // } - setCustomTipAmount(tipAmount); - } + setCustomTipAmount(tipAmount); } function buildButtonText() { @@ -377,14 +331,8 @@ function WalletSendTip(props: Props) { return false; } - function convertToTwoDecimals(number) { - return (Math.round(number * 100) / 100).toFixed(2); - } - - const amountToShow = activeTab === TAB_FIAT ? convertToTwoDecimals(tipAmount) : tipAmount; - // if it's a valid number display it, otherwise do an empty string - const displayAmount = !isNan(tipAmount) ? amountToShow : ''; + const displayAmount = !isNan(tipAmount) ? tipAmount : ''; if (activeTab === TAB_BOOST) { return (claimIsMine ? __('Boost Your %claimTypeText%', {claimTypeText}) : __('Boost This %claimTypeText%', {claimTypeText})); @@ -414,242 +362,240 @@ function WalletSendTip(props: Props) { return (
{/* if there is no LBC balance, show user frontend to get credits */} - {/* if there is lbc, the main tip/boost gui with the 3 tabs at the top */} - } - subtitle={ - - {!claimIsMine && ( -
- {/* tip LBC tab button */} -
- )} - - {/* short explainer under the button */} -
- {explainerText + ' '} - {/* {activeTab === TAB_FIAT && !hasCardSaved &&
- - } - actions={ - // confirmation modal, allow user to confirm or cancel transaction - isConfirming ? ( - <> -
+ } + /> + ) : ( + // if there is lbc, the main tip/boost gui with the 3 tabs at the top + } + subtitle={ + + {!claimIsMine && (
-
{__('To --[the tip recipient]--')}
-
{channelName || title}
-
{__('From --[the tip sender]--')}
-
- {activeChannelClaim && !incognito ? activeChannelClaim.name : __('Anonymous')} -
-
{setConfirmLabel()}
-
- {activeTab === TAB_FIAT ?

$ {(Math.round(tipAmount * 100) / 100).toFixed(2)}

: } -
+ {/* tip LBC tab button */} +
-
-
-
- - // only show the prompt to earn more if its lbc or boost tab and no balance - // otherwise you can show the full prompt - ) : (!((activeTab === TAB_LBC || activeTab === TAB_BOOST) && noBalance) - ? <> -
- -
- - {activeTab === TAB_FIAT && !hasCardSaved && ( -

-

)} - {/* section to pick tip/boost amount */} -
- {DEFAULT_TIP_AMOUNTS.map((amount) => ( + {/* short explainer under the button */} +
+ {explainerText + ' '} + {/* {activeTab === TAB_FIAT && !hasCardSaved &&
+ + } + actions={ + // confirmation modal, allow user to confirm or cancel transaction + isConfirming ? ( + <> +
+
+
{__('To --[the tip recipient]--')}
+
{channelName || title}
+
{__('From --[the tip sender]--')}
+
+ {activeChannelClaim && !incognito ? activeChannelClaim.name : __('Anonymous')} +
+
{setConfirmLabel()}
+
+ {activeTab === TAB_FIAT ?

$ {tipAmount}

: } +
+
+
+
+
+ + ) : ( + <> +
+ +
+ + {activeTab === TAB_FIAT && !hasCardSaved && ( +

+

+ )} + + {/* section to pick tip/boost amount */} +
+ {DEFAULT_TIP_AMOUNTS.map((amount) => ( +
- - {useCustomTip && ( -
- - {__('Custom support amount')}{' '} - {activeTab !== TAB_FIAT ? ( - }} - > - (%lbc_balance% Credits available) - - ) : ( - 'in USD' - )} - - } - error={tipError} - min="0" - step="any" - type="number" - style={{ - width: activeTab === TAB_FIAT ? '99px' : '160px', - }} - placeholder="1.23" - value={customTipAmount} - onChange={(event) => handleCustomPriceChange(event)} - /> + {DEFAULT_TIP_AMOUNTS.some((val) => val > balance) && activeTab !== TAB_FIAT && ( +
- )} - {/* send tip/boost button */} -
-
- {activeTab !== TAB_FIAT ? ( - - ) : !canReceiveFiatTip ? ( -
{__('Only select creators can receive tips at this time')}
- ) : ( -
{__('The payment will be made from your saved card')}
- )} - - // if it's LBC and there is no balance, you can prompt to purchase LBC - : }}>Supporting content requires %lbc%} - subtitle={ - }}> - With %lbc%, you can send tips to your favorite creators, or help boost their content for more people to - see. - - } - actions={ -
-
- } - /> - ) - } - /> + {useCustomTip && ( +
+ + {__('Custom support amount')}{' '} + {activeTab !== TAB_FIAT ? ( + }} + > + (%lbc_balance% Credits available) + + ) : ( + 'in USD' + )} + + } + className="form-field--price-amount" + error={tipError} + min="0" + step="any" + type="number" + placeholder="1.23" + value={customTipAmount} + onChange={(event) => handleCustomPriceChange(event)} + /> +
+ )} + + {/* send tip/boost button */} +
+
+ {activeTab !== TAB_FIAT ? ( + + ) : !canReceiveFiatTip ? ( +
{__('Only select creators can receive tips at this time')}
+ ) : ( +
{__('The payment will be made from your saved card')}
+ )} + + ) + } + /> + )} ); }