@rabbitio/ui-kit 1.0.0-beta.64 → 1.0.0-beta.66

package/src/components/molecules/AmountInput/AmountInput.jsx

@@ -17,11 +17,12 @@ export const AmountInput = React.forwardRef(
     (
         {
             label = "",
-            handleCoinAmountChange = (btcAmount) => {},
-            handleFiatAmountChange = (fiatAmount) => {},
+            handleCoinAmountChange = btcAmount => {},
+            handleFiatAmountChange = fiatAmount => {},
             handleChangeAssetClick = () => {},
-            handleBalanceValidationChange = (isValid) => {},
+            handleBalanceValidationChange = isValid => {},
             disabled,
+            locked,
             alertText,
             predefinedValue,
             children,
@@ -72,26 +73,21 @@ export const AmountInput = React.forwardRef(
         };
 
         useEffect(() => {
-            if (updateAssetInputTo !== null)
-                handleChangeAmount(updateAssetInputTo?.toString(), false);
+            if (updateAssetInputTo !== null) handleChangeAmount(updateAssetInputTo?.toString(), false);
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [updateAssetInputTo]);
 
         const handleChangeAmount = (newAmountString, handlerEnabled = true) => {
             (async () => {
                 try {
-                    const correctedAmount =
-                        InputValuesProviders.provideFormatOfFloatValueByInputString(
-                            newAmountString,
-                            assetDecimalPlaces
-                        );
+                    const correctedAmount = InputValuesProviders.provideFormatOfFloatValueByInputString(
+                        newAmountString,
+                        assetDecimalPlaces
+                    );
                     setCoinAmountValue(correctedAmount);
                     if (handlerEnabled) handleCoinAmountChange(correctedAmount);
 
-                    if (
-                        correctedAmount !== "" &&
-                        cryptoAssetToFiatRate != null
-                    ) {
+                    if (correctedAmount !== "" && cryptoAssetToFiatRate != null) {
                         const fiatAmount = BigNumber(correctedAmount)
                             .times(cryptoAssetToFiatRate)
                             .toFixed(fiatCurrencyDecimals);
@@ -108,27 +104,22 @@ export const AmountInput = React.forwardRef(
             setInteractedWith(true);
         };
 
-        const handleChangeAmountFiat = (newAmountString) => {
+        const handleChangeAmountFiat = newAmountString => {
             if (cryptoAssetToFiatRate == null) return;
             (async () => {
                 try {
-                    const correctedFiatAmount =
-                        InputValuesProviders.provideFormatOfFloatValueByInputString(
-                            newAmountString,
-                            fiatCurrencyDecimals
-                        );
+                    const correctedFiatAmount = InputValuesProviders.provideFormatOfFloatValueByInputString(
+                        newAmountString,
+                        fiatCurrencyDecimals
+                    );
                     setFiatAmountValue(correctedFiatAmount);
                     handleFiatAmountChange(correctedFiatAmount);
 
                     const coinAmount =
                         correctedFiatAmount !== ""
-                            ? BigNumber(correctedFiatAmount)
-                                  .div(cryptoAssetToFiatRate)
-                                  .toFixed(assetDecimalPlaces)
+                            ? BigNumber(correctedFiatAmount).div(cryptoAssetToFiatRate).toFixed(assetDecimalPlaces)
                             : "0";
-                    const coinsAmount = BigNumber(coinAmount).isZero()
-                        ? ""
-                        : coinAmount;
+                    const coinsAmount = BigNumber(coinAmount).isZero() ? "" : coinAmount;
                     setCoinAmountValue(coinsAmount);
                     handleCoinAmountChange(coinsAmount);
                 } catch (e) {
@@ -138,11 +129,11 @@ export const AmountInput = React.forwardRef(
             })();
         };
 
-        const placeholderByDecimalCount = (decimalCount) =>
+        const placeholderByDecimalCount = decimalCount =>
             "0" + (decimalCount > 0 ? "." + "0".repeat(decimalCount) : "");
 
         const handleFiatInteraction = () => {
-            if (disabled) return;
+            if (disabled || locked) return;
             setFiatAmountAutoFocus(true);
             setInteractedWith(true);
         };
@@ -154,9 +145,7 @@ export const AmountInput = React.forwardRef(
 
         useEffect(() => {
             try {
-                setCoinAmountPlaceholder(
-                    placeholderByDecimalCount(assetDecimalPlaces)
-                );
+                setCoinAmountPlaceholder(placeholderByDecimalCount(assetDecimalPlaces));
             } catch (e) {
                 logErrorOrOutputToConsole(e);
             }
@@ -166,12 +155,9 @@ export const AmountInput = React.forwardRef(
 
         // Check if input & balance highlights are needed after a change in either the asset amount or the balance
         useEffect(() => {
-            if (!showBalanceValidation || assetBalance?.assetAmount == null)
-                return;
+            if (!showBalanceValidation || assetBalance?.assetAmount == null) return;
 
-            let enableHighlight = BigNumber(coinAmountValue).gt(
-                assetBalance?.assetAmount
-            );
+            let enableHighlight = BigNumber(coinAmountValue).gt(assetBalance?.assetAmount);
 
             handleBalanceValidationChange(enableHighlight);
             setHighlightBalance(enableHighlight);
@@ -181,46 +167,30 @@ export const AmountInput = React.forwardRef(
         }, [coinAmountValue, assetBalance]);
 
         // Clearing the custom focus upon disabling or enabling the form
-        useEffect(() => setIsInFocus(false), [disabled]);
+        useEffect(() => setIsInFocus(false), [disabled, locked]);
 
         return (
             <>
                 <TitleBox
                     title={label}
-                    linkText={
-                        isSendAll !== null
-                            ? isSendAll
-                                ? linkButtonActiveText
-                                : linkButtonInactiveText
-                            : null
-                    }
+                    linkText={isSendAll !== null ? (isSendAll ? linkButtonActiveText : linkButtonInactiveText) : null}
                     linkButtonClick={handleSendAllClick}
                 >
                     <div
                         className={[
                             s["amount-input-container"],
                             isInFocus ? s["focus"] : "",
-                            errorEncountered || highlightInput
-                                ? s["error-encountered"]
-                                : "",
+                            errorEncountered || highlightInput ? s["error-encountered"] : "",
                             upperFormPosition ? s["upper-form-position"] : "",
                             lowerFormPosition ? s["lower-form-position"] : "",
                         ].join(" ")}
                     >
                         <div
-                            className={`${
-                                s["amount-input-container-input-wrapper"]
-                            } ${disabled ? s["disabled"] : ""}
+                            className={`${s["amount-input-container-input-wrapper"]} ${disabled ? s["disabled"] : ""}
                         ${children ? s["bottom-margin"] : ""}`}
                         >
                             {showBalance ? (
-                                <div
-                                    className={
-                                        s["asset-balance"] +
-                                        " " +
-                                        (highlightBalance ? s["red"] : "")
-                                    }
-                                >
+                                <div className={s["asset-balance"] + " " + (highlightBalance ? s["red"] : "")}>
                                     <WalletIcon />
                                     <p>
                                         {assetBalance?.assetAmount != null &&
@@ -235,10 +205,7 @@ export const AmountInput = React.forwardRef(
                                                 )}
                                                 <span>
                                                     {" ~ " +
-                                                        AmountUtils.fiat(
-                                                            assetBalance.fiatAmount,
-                                                            fiatCurrencyCode
-                                                        )}
+                                                        AmountUtils.fiat(assetBalance.fiatAmount, fiatCurrencyCode)}
                                                 </span>
                                             </>
                                         ) : (
@@ -251,55 +218,26 @@ export const AmountInput = React.forwardRef(
                             )}
 
                             <div className={s["requested-amount-coin"]}>
-                                <span
-                                    className={
-                                        s["requested-amount-coin-currency"]
-                                    }
-                                >
-                                    {tickerPrintable
-                                        ? (estimateAmount ? "~ " : "") +
-                                          tickerPrintable
-                                        : ""}
+                                <span className={s["requested-amount-coin-currency"]}>
+                                    {tickerPrintable ? (estimateAmount ? "~ " : "") + tickerPrintable : ""}
                                 </span>
                                 {!isLoading ? (
                                     <input
                                         type="text"
                                         inputMode="decimal"
                                         value={coinAmountValue}
-                                        onChange={(e) =>
-                                            handleChangeAmount(e.target.value)
-                                        }
+                                        onChange={e => handleChangeAmount(e.target.value)}
                                         placeholder={coinAmountPlaceholder}
-                                        className={
-                                            s["requested-amount-coin-input"]
-                                        }
-                                        disabled={disabled}
-                                        onFocus={(e) =>
-                                            callHandlingErrors(
-                                                () => setIsInFocus(true),
-                                                e
-                                            )
-                                        }
-                                        onBlur={(e) =>
-                                            callHandlingErrors(
-                                                () => setIsInFocus(false),
-                                                e
-                                            )
-                                        }
+                                        className={s["requested-amount-coin-input"]}
+                                        disabled={disabled || locked}
+                                        onFocus={e => callHandlingErrors(() => setIsInFocus(true), e)}
+                                        onBlur={e => callHandlingErrors(() => setIsInFocus(false), e)}
                                     />
                                 ) : (
-                                    <div
-                                        className={
-                                            s["requested-amount-coin-skeleton"]
-                                        }
-                                    >
+                                    <div className={s["requested-amount-coin-skeleton"]}>
                                         <span
                                             className={
-                                                s[
-                                                    "requested-amount-coin-skeleton-content"
-                                                ] +
-                                                " " +
-                                                s["skeleton-dark"]
+                                                s["requested-amount-coin-skeleton-content"] + " " + s["skeleton-dark"]
                                             }
                                         ></span>
                                     </div>
@@ -309,81 +247,31 @@ export const AmountInput = React.forwardRef(
                                 <>
                                     <div
                                         className={
-                                            s["requested-amount-fiat"] +
-                                            (interactedWith
-                                                ? " " + s["interacted"]
-                                                : "")
+                                            s["requested-amount-fiat"] + (interactedWith ? " " + s["interacted"] : "")
                                         }
                                     >
                                         {interactedWith ? (
                                             <>
-                                                <span
-                                                    className={
-                                                        s[
-                                                            "requested-amount-fiat-currency"
-                                                        ]
-                                                    }
-                                                >
-                                                    {(estimateAmount
-                                                        ? "~ "
-                                                        : "") +
-                                                        fiatCurrencyCode}
+                                                <span className={s["requested-amount-fiat-currency"]}>
+                                                    {(estimateAmount ? "~ " : "") + fiatCurrencyCode}
                                                 </span>
                                                 <input
                                                     type="text"
                                                     inputMode="decimal"
-                                                    className={
-                                                        s[
-                                                            "requested-amount-fiat-input"
-                                                        ]
-                                                    }
+                                                    className={s["requested-amount-fiat-input"]}
                                                     value={fiatAmountValue}
-                                                    disabled={disabled}
-                                                    onChange={(e) =>
-                                                        handleChangeAmountFiat(
-                                                            e.target.value
-                                                        )
-                                                    }
-                                                    placeholder={placeholderByDecimalCount(
-                                                        fiatCurrencyDecimals
-                                                    )}
-                                                    autoFocus={
-                                                        fiatAmountAutoFocus
-                                                    }
-                                                    onFocus={(e) =>
-                                                        callHandlingErrors(
-                                                            () =>
-                                                                setIsInFocus(
-                                                                    true
-                                                                ),
-                                                            e
-                                                        )
-                                                    }
-                                                    onBlur={(e) =>
-                                                        callHandlingErrors(
-                                                            () =>
-                                                                setIsInFocus(
-                                                                    false
-                                                                ),
-                                                            e
-                                                        )
-                                                    }
+                                                    disabled={disabled || locked}
+                                                    onChange={e => handleChangeAmountFiat(e.target.value)}
+                                                    placeholder={placeholderByDecimalCount(fiatCurrencyDecimals)}
+                                                    autoFocus={fiatAmountAutoFocus}
+                                                    onFocus={e => callHandlingErrors(() => setIsInFocus(true), e)}
+                                                    onBlur={e => callHandlingErrors(() => setIsInFocus(false), e)}
                                                 />
                                             </>
                                         ) : (
                                             <span
-                                                className={
-                                                    s[
-                                                        "requested-amount-fiat-placeholder"
-                                                    ]
-                                                }
-                                                onClick={(e) =>
-                                                    callHandlingErrors(
-                                                        () =>
-                                                            handleFiatInteraction(),
-                                                        e
-                                                    )
-                                                }
+                                                className={s["requested-amount-fiat-placeholder"]}
+                                                onClick={e => callHandlingErrors(() => handleFiatInteraction(), e)}
                                             >
                                                 {fiatInputPlaceholderText}
                                             </span>
@@ -393,12 +281,7 @@ export const AmountInput = React.forwardRef(
                             ) : null}
                         </div>
                         {showChangeAssetButton && ticker ? (
-                            <div
-                                className={
-                                    s["amount-input-container-button-wrapper"]
-                                }
-                                ref={buttonForwardRef}
-                            >
+                            <div className={s["amount-input-container-button-wrapper"]} ref={buttonForwardRef}>
                                 <AssetSelection
                                     assetIconSrc={assetIconSrc}
                                     assetIconProtocolSrc={assetIconProtocolSrc}