@rabbitio/ui-kit 1.0.0-beta.8 → 1.0.0-beta.80

package/src/ui-kit/components/atoms/buttons/RadioButtonWithText/RadioButtonWithText.jsx

@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+import s from "./radio-button-with-text.module.scss";
+
+import { useCallHandlingErrors } from "../../../../hooks/useCallHandlingErrors.js";
+
+import { Tooltip } from "../../Tooltip/Tooltip.jsx";
+import { LoadingDots } from "../../LoadingDots/LoadingDots.jsx";
+
+/**
+ * RadioButtonWithText component with a label and optional tooltip.
+ *
+ * @component
+ * @param {string} [text=""] - The text to display next to the radio button.
+ * @param {function} onStateChange - Callback function triggered when the state of the radio button changes.
+ * @param {boolean} [isSwitchedOn=false] - Whether the radio button is switched on.
+ * @param {boolean} [isDisabled=false] - Whether the radio button is disabled.
+ * @param {string} [tooltipText=""] - Text to display in the tooltip when hovering over the component.
+ * @param {string} [id=""] - The id of the radio button.
+ */
+export const RadioButtonWithText = ({
+    text = "",
+    onStateChange,
+    isSwitchedOn = false,
+    isDisabled = false,
+    tooltipText = "",
+    id = "",
+}) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [showTooltipTimeoutId, setShowTooltipTimeoutId] = useState(-1);
+
+    const handleError = useCallHandlingErrors();
+
+    function handleChange() {
+        if (!isLoading && !isDisabled) {
+            setIsLoading(true);
+            handleError(() => onStateChange(() => setIsLoading(false)));
+        }
+    }
+
+    const onMouseEnter = () => {
+        if (tooltipText) {
+            setShowTooltipTimeoutId(setTimeout(() => setShowTooltip(true), 700));
+        }
+    };
+
+    const onMouseLeave = () => {
+        if (tooltipText) {
+            setShowTooltip(false);
+            clearTimeout(showTooltipTimeoutId);
+            setShowTooltipTimeoutId(null);
+        }
+    };
+
+    return (
+        <div className={s["radio-button-with-text-container"]}>
+            <label
+                htmlFor={"radio-button-with-text-" + id}
+                className={[
+                    s["radio-button-with-text"],
+                    isSwitchedOn ? s["selected"] : "",
+                    isLoading ? s["hide"] : "",
+                    isDisabled ? s["disabled"] : "",
+                ].join(" ")}
+                onMouseEnter={e => handleError(onMouseEnter, e)}
+                onMouseLeave={e => handleError(onMouseLeave, e)}
+            >
+                {tooltipText && showTooltip ? (
+                    <div>
+                        {/*TODO: [bug, critical] click is still propagated*/}
+                        <Tooltip showTooltip={showTooltip} handleClick={() => setShowTooltip(false)}>
+                            {tooltipText}
+                        </Tooltip>
+                    </div>
+                ) : null}
+                <div className={s["radio-button-with-text-dots"] + (isLoading ? s["show"] : "")}>
+                    <LoadingDots />
+                </div>
+                <div className={s["radio-button-with-text-content"] + " " + (false ? s["hide"] : "")}>
+                    <input
+                        id={"radio-button-with-text-" + id}
+                        type="checkbox"
+                        value={isSwitchedOn}
+                        onChange={handleChange}
+                    />
+                    <span className={s["radio-button-with-text-wrapper"]}>{text}</span>
+                </div>
+            </label>
+        </div>
+    );
+};
+
+RadioButtonWithText.propTypes = {
+    text: PropTypes.string,
+    onStateChange: PropTypes.func,
+    isSwitchedOn: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    tooltipText: PropTypes.string,
+    id: PropTypes.string,
+};
+
+RadioButtonWithText.defaultProps = {
+    text: "",
+    isSwitchedOn: false,
+    isDisabled: false,
+    tooltipText: "",
+    id: "",
+};

package/src/ui-kit/components/atoms/buttons/RadioButtonWithText/radio-button-with-text.module.scss

@@ -0,0 +1,86 @@
+@use "../../../../assets/styles/index" as *;
+
+.radio-button-with-text-container {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    width: 57px;
+    height: 30px;
+}
+
+.radio-button-with-text {
+    height: 30px;
+    padding: Padding("1") 14px Padding("1") 43px;
+    position: relative;
+    background-color: SolidColor("smoke");
+    border-radius: 100px;
+    transition: 0.2s background-color $transitionEaseOut;
+    cursor: pointer;
+
+    &.selected {
+        background-color: SolidColor("tosca");
+        padding: Padding("1") 43px Padding("1") 14px;
+
+        &:before {
+            transform: translateX(27px);
+        }
+    }
+
+    &.disabled {
+        opacity: 0.6;
+        cursor: default !important;
+    }
+
+    &.hide {
+        &:before {
+            content: none;
+        }
+    }
+
+    &:before {
+        content: "";
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
+        background-color: $white;
+        position: absolute;
+        left: 2px;
+        top: 2px;
+        transform: translateX(0px);
+        transition: 0.2s transform $transitionEaseOut;
+    }
+
+    input {
+        display: none;
+    }
+
+    &-wrapper {
+        color: $white;
+        font-weight: $bold;
+        font-size: 12px;
+        line-height: 22px;
+        white-space: nowrap;
+    }
+
+    &-content {
+        margin-top: -1px;
+
+        &.hide {
+            opacity: 0;
+        }
+    }
+
+    &-dots {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+        z-index: -1;
+
+        &.show {
+            opacity: 1;
+            z-index: 0;
+        }
+    }
+}

package/src/ui-kit/components/molecules/AmountInput/AmountInput.jsx

@@ -0,0 +1,325 @@
+import React, { useEffect, useState } from "react";
+import { BigNumber } from "bignumber.js";
+
+import s from "./amount-input.module.scss";
+import WalletIcon from "../../../assets/wrappedImages/walletIcon.jsx";
+
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+import { InputValuesProviders } from "../../../utils/inputValueProviders.js";
+import { logErrorOrOutputToConsole } from "../../../../common-apis/errorUtils.js";
+
+import { TitleBox } from "../../atoms/TitleBox/TitleBox.jsx";
+import { AmountUtils } from "../../../../common-apis/amountUtils.js";
+import { AssetSelection } from "../../atoms/AssetSelection/AssetSelection.jsx";
+import { Validation } from "../../atoms/Validation/Validation.jsx";
+
+// TODO: [dev] add JSDoc
+export const AmountInput = React.forwardRef(
+    (
+        {
+            label = "",
+            handleCoinAmountChange = btcAmount => {},
+            handleFiatAmountChange = fiatAmount => {},
+            handleChangeAssetClick = () => {},
+            handleBalanceValidationChange = isValid => {},
+            disabled,
+            locked,
+            alertText,
+            predefinedValue,
+            children,
+            ticker,
+            tickerPrintable,
+            assetDecimalPlaces,
+            assetBalance = { fiatAmount: null, assetAmount: null },
+            assetIconSrc,
+            assetIconProtocolSrc,
+            fallbackAssetIconSrc,
+            isSendAll = null,
+            handleSendAllClick = () => {},
+            showBalance = false,
+            showBalanceValidation = false,
+            showChangeAssetButton = false,
+            changeAssetButtonProtocol,
+            changeAssetButtonDisabled = false,
+            upperFormPosition,
+            lowerFormPosition,
+            errorEncountered,
+            updateAssetInputTo = null,
+            estimateAmount = false,
+            isLoading = false,
+            cryptoAssetToFiatRate = null,
+            fiatCurrencyCode = null,
+            fiatCurrencyDecimals = null,
+            linkButtonActiveText = null,
+            linkButtonInactiveText = null,
+            balanceLoaderText = null,
+            fiatInputPlaceholderText = null,
+        },
+        buttonForwardRef
+    ) => {
+        const callHandlingErrors = useCallHandlingErrors();
+
+        const [coinAmountValue, setCoinAmountValue] = useState("");
+        const [coinAmountPlaceholder, setCoinAmountPlaceholder] = useState("0");
+        const [fiatAmountValue, setFiatAmountValue] = useState("");
+        const [interactedWith, setInteractedWith] = useState(false);
+        const [fiatAmountAutoFocus, setFiatAmountAutoFocus] = useState(false);
+        const [isInFocus, setIsInFocus] = useState(false);
+        const [highlightBalance, setHighlightBalance] = useState(false);
+        const [highlightInput, setHighlightInput] = useState(false);
+
+        const resetToDefault = () => {
+            setInteractedWith(false);
+            setFiatAmountAutoFocus(false);
+        };
+
+        useEffect(() => {
+            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
+                    );
+                    setCoinAmountValue(correctedAmount);
+                    if (handlerEnabled) handleCoinAmountChange(correctedAmount);
+
+                    if (correctedAmount !== "" && cryptoAssetToFiatRate != null) {
+                        const fiatAmount = BigNumber(correctedAmount)
+                            .times(cryptoAssetToFiatRate)
+                            .toFixed(fiatCurrencyDecimals);
+                        setFiatAmountValue(fiatAmount);
+                        handleFiatAmountChange(fiatAmount);
+                    } else {
+                        setFiatAmountValue("");
+                    }
+                } catch (e) {
+                    setFiatAmountValue(null);
+                    logErrorOrOutputToConsole(e);
+                }
+            })();
+            setInteractedWith(true);
+        };
+
+        const handleChangeAmountFiat = newAmountString => {
+            if (cryptoAssetToFiatRate == null) return;
+            (async () => {
+                try {
+                    const correctedFiatAmount = InputValuesProviders.provideFormatOfFloatValueByInputString(
+                        newAmountString,
+                        fiatCurrencyDecimals
+                    );
+                    setFiatAmountValue(correctedFiatAmount);
+                    handleFiatAmountChange(correctedFiatAmount);
+
+                    const coinAmount =
+                        correctedFiatAmount !== ""
+                            ? BigNumber(correctedFiatAmount).div(cryptoAssetToFiatRate).toFixed(assetDecimalPlaces)
+                            : "0";
+                    const coinsAmount = BigNumber(coinAmount).isZero() ? "" : coinAmount;
+                    setCoinAmountValue(coinsAmount);
+                    handleCoinAmountChange(coinsAmount);
+                } catch (e) {
+                    setFiatAmountValue(null);
+                    logErrorOrOutputToConsole(e);
+                }
+            })();
+        };
+
+        const placeholderByDecimalCount = decimalCount =>
+            "0" + (decimalCount > 0 ? "." + "0".repeat(decimalCount) : "");
+
+        const handleFiatInteraction = () => {
+            if (disabled || locked) return;
+            setFiatAmountAutoFocus(true);
+            setInteractedWith(true);
+        };
+
+        useEffect(() => {
+            predefinedValue != null && handleChangeAmount(predefinedValue + "");
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [predefinedValue]);
+
+        useEffect(() => {
+            if (!cryptoAssetToFiatRate || typeof cryptoAssetToFiatRate !== "string") return;
+
+            handleChangeAmount(coinAmountValue, false);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [cryptoAssetToFiatRate]);
+
+        useEffect(() => {
+            try {
+                setCoinAmountPlaceholder(placeholderByDecimalCount(assetDecimalPlaces));
+            } catch (e) {
+                logErrorOrOutputToConsole(e);
+            }
+            resetToDefault();
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [ticker]);
+
+        // 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;
+
+            let enableHighlight = BigNumber(coinAmountValue).gt(assetBalance?.assetAmount);
+
+            handleBalanceValidationChange(enableHighlight);
+            setHighlightBalance(enableHighlight);
+            setHighlightInput(enableHighlight);
+
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [coinAmountValue, assetBalance]);
+
+        // Clearing the custom focus upon disabling or enabling the form
+        useEffect(() => setIsInFocus(false), [disabled, locked]);
+
+        return (
+            <>
+                <TitleBox
+                    title={label}
+                    linkText={isSendAll !== null ? (isSendAll ? linkButtonActiveText : linkButtonInactiveText) : null}
+                    linkButtonClick={handleSendAllClick}
+                >
+                    <div
+                        className={[
+                            s["amount-input-container"],
+                            isInFocus ? s["focus"] : "",
+                            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"] : ""}
+                        ${children ? s["bottom-margin"] : ""}`}
+                        >
+                            {showBalance ? (
+                                <div className={s["asset-balance"] + " " + (highlightBalance ? s["red"] : "")}>
+                                    <WalletIcon />
+                                    <p>
+                                        {assetBalance?.assetAmount != null &&
+                                        assetBalance?.fiatAmount != null &&
+                                        ticker &&
+                                        fiatCurrencyCode ? (
+                                            <>
+                                                {AmountUtils.cryptoFull(
+                                                    assetBalance.assetAmount,
+                                                    tickerPrintable,
+                                                    assetDecimalPlaces
+                                                )}
+                                                <span>
+                                                    {" ~ " +
+                                                        AmountUtils.fiat(assetBalance.fiatAmount, fiatCurrencyCode)}
+                                                </span>
+                                            </>
+                                        ) : (
+                                            balanceLoaderText
+                                        )}
+                                    </p>
+                                </div>
+                            ) : (
+                                ""
+                            )}
+
+                            <div className={s["requested-amount-coin"]}>
+                                <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)}
+                                        placeholder={coinAmountPlaceholder}
+                                        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"]}>
+                                        <span
+                                            className={
+                                                s["requested-amount-coin-skeleton-content"] + " " + "skeleton-dark"
+                                            }
+                                        ></span>
+                                    </div>
+                                )}
+                            </div>
+                            {fiatCurrencyCode !== null ? (
+                                <>
+                                    <div
+                                        className={
+                                            s["requested-amount-fiat"] + (interactedWith ? " " + s["interacted"] : "")
+                                        }
+                                    >
+                                        {interactedWith ? (
+                                            <>
+                                                <span className={s["requested-amount-fiat-currency"]}>
+                                                    {(estimateAmount ? "~ " : "") + fiatCurrencyCode}
+                                                </span>
+
+                                                {!isLoading && cryptoAssetToFiatRate ? (
+                                                    <input
+                                                        type="text"
+                                                        inputMode="decimal"
+                                                        className={s["requested-amount-fiat-input"]}
+                                                        value={fiatAmountValue}
+                                                        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)}
+                                                    />
+                                                ) : (
+                                                    <div className={s["requested-amount-fiat-skeleton"]}>
+                                                        <span
+                                                            className={
+                                                                s["requested-amount-fiat-skeleton-content"] +
+                                                                " " +
+                                                                "skeleton-dark"
+                                                            }
+                                                        ></span>
+                                                    </div>
+                                                )}
+                                            </>
+                                        ) : (
+                                            <span
+                                                className={s["requested-amount-fiat-placeholder"]}
+                                                onClick={e => callHandlingErrors(() => handleFiatInteraction(), e)}
+                                            >
+                                                {fiatInputPlaceholderText}
+                                            </span>
+                                        )}
+                                    </div>
+                                </>
+                            ) : null}
+                        </div>
+                        {showChangeAssetButton && ticker ? (
+                            <div className={s["amount-input-container-button-wrapper"]} ref={buttonForwardRef}>
+                                <AssetSelection
+                                    assetIconSrc={assetIconSrc}
+                                    assetIconProtocolSrc={assetIconProtocolSrc}
+                                    fallbackSrc={fallbackAssetIconSrc}
+                                    handleClick={handleChangeAssetClick}
+                                    disabled={changeAssetButtonDisabled}
+                                    protocolName={changeAssetButtonProtocol}
+                                />
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                        {children}
+                    </div>
+                </TitleBox>
+                {alertText ? <Validation text={alertText} /> : null}
+            </>
+        );
+    }
+);