fix frontend bug

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 iconToUse, explainerText;
-  let 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);
-    }
   }
 
   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,7 +362,30 @@ function WalletSendTip(props: Props) {
   return (
     <Form onSubmit={handleSubmit}>
       {/* 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 */}
+      {noBalance ? (
+        <Card
+          title={<I18nMessage tokens={{ lbc: <LbcSymbol size={22} /> }}>Supporting content requires %lbc%</I18nMessage>}
+          subtitle={
+            <I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
+              With %lbc%, you can send tips to your favorite creators, or help boost their content for more people to
+              see.
+            </I18nMessage>
+          }
+          actions={
+            <div className="section__actions">
+              <Button
+                icon={ICONS.REWARDS}
+                button="primary"
+                label={__('Earn Rewards')}
+                navigate={`/$/${PAGES.REWARDS}`}
+              />
+              <Button icon={ICONS.BUY} button="secondary" label={__('Buy/Swap Credits')} navigate={`/$/${PAGES.BUY}`} />
+              <Button button="link" label={__('Nevermind')} onClick={closeModal} />
+            </div>
+          }
+        />
+      ) : (
+        // if there is lbc, the main tip/boost gui with the 3 tabs at the top
         <Card
           title={<LbcSymbol postfix={claimIsMine ? __('Boost Your %claimTypeText%', {claimTypeText}) : __('Support This %claimTypeText%', {claimTypeText})} size={22} />}
           subtitle={
@@ -428,7 +399,7 @@ function WalletSendTip(props: Props) {
                     label={__('Tip')}
                     button="alt"
                     onClick={() => {
-                    const tipInputElement = document.getElementById('tip-input');
+                      var tipInputElement = document.getElementById('tip-input');
                       if (tipInputElement) { tipInputElement.focus() }
                       if (!isConfirming) {
                         setActiveTab(TAB_LBC);
@@ -444,7 +415,7 @@ function WalletSendTip(props: Props) {
                     label={__('Tip')}
                     button="alt"
                     onClick={() => {
-                    const tipInputElement = document.getElementById('tip-input');
+                      var tipInputElement = document.getElementById('tip-input');
                       if (tipInputElement) { tipInputElement.focus() }
                       if (!isConfirming) {
                         setActiveTab(TAB_FIAT);
@@ -460,7 +431,7 @@ function WalletSendTip(props: Props) {
                     label={__('Boost')}
                     button="alt"
                     onClick={() => {
-                    const tipInputElement = document.getElementById('tip-input');
+                      var tipInputElement = document.getElementById('tip-input');
                       if (tipInputElement) { tipInputElement.focus() }
                       if (!isConfirming) {
                         setActiveTab(TAB_BOOST);
@@ -493,7 +464,7 @@ function WalletSendTip(props: Props) {
                     </div>
                     <div className="confirm__label">{setConfirmLabel()}</div>
                     <div className="confirm__value">
-                    {activeTab === TAB_FIAT ? <p>$ {(Math.round(tipAmount * 100) / 100).toFixed(2)}</p> : <LbcSymbol postfix={tipAmount} size={22} />}
+                      {activeTab === TAB_FIAT ? <p>$ {tipAmount}</p> : <LbcSymbol postfix={tipAmount} size={22} />}
                     </div>
                   </div>
                 </div>
@@ -508,10 +479,8 @@ function WalletSendTip(props: Props) {
                   <Button button="link" label={__('Cancel')} onClick={() => setIsConfirming(false)} />
                 </div>
               </>
-            // 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)
-            ? <>
                 <div className="section">
                   <ChannelSelector />
                 </div>
@@ -585,13 +554,11 @@ function WalletSendTip(props: Props) {
                           )}
                         </React.Fragment>
                       }
+                      className="form-field--price-amount"
                       error={tipError}
                       min="0"
                       step="any"
                       type="number"
-                    style={{
-                      width: activeTab === TAB_FIAT ? '99px' : '160px',
-                    }}
                       placeholder="1.23"
                       value={customTipAmount}
                       onChange={(event) => handleCustomPriceChange(event)}
@@ -625,31 +592,10 @@ function WalletSendTip(props: Props) {
                   <div className="help">{__('The payment will be made from your saved card')}</div>
                 )}
               </>
-              // if it's LBC and there is no balance, you can prompt to purchase LBC
-               : <Card
-                 title={<I18nMessage tokens={{ lbc: <LbcSymbol size={22} /> }}>Supporting content requires %lbc%</I18nMessage>}
-                 subtitle={
-                    <I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
-                      With %lbc%, you can send tips to your favorite creators, or help boost their content for more people to
-                      see.
-                    </I18nMessage>
-                  }
-                 actions={
-                    <div className="section__actions">
-                      <Button
-                        icon={ICONS.REWARDS}
-                        button="primary"
-                        label={__('Earn Rewards')}
-                        navigate={`/$/${PAGES.REWARDS}`}
-                      />
-                      <Button icon={ICONS.BUY} button="secondary" label={__('Buy/Swap Credits')} navigate={`/$/${PAGES.BUY}`} />
-                      <Button button="link" label={__('Nevermind')} onClick={closeModal} />
-                    </div>
-                  }
-              />
             )
           }
         />
+      )}
     </Form>
   );
 }