@rabbitio/ui-kit 1.0.0-beta.9 → 1.0.0-beta.91

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

@@ -0,0 +1,448 @@
+import React, { useEffect, useState } from "react";
+import { BigNumber } from "bignumber.js";
+import { CSSTransition } from "react-transition-group";
+import PropTypes from "prop-types";
+
+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/utils/errorUtils.js";
+
+import { TitleBox } from "../../atoms/TitleBox/TitleBox.jsx";
+import { AmountUtils } from "../../../../common-apis/utils/amountUtils.js";
+import { AssetSelection } from "../../atoms/AssetSelection/AssetSelection.jsx";
+import { Validation } from "../../atoms/Validation/Validation.jsx";
+
+/**
+ * AmountInput component is used for inputting an amount in both cryptocurrency and fiat formats.
+ * It supports converting between the two based on the provided exchange rate.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} props.label - The label displayed above the input.
+ * @param {Function} props.handleCoinAmountChange - Callback function called when the coin amount changes.
+ * @param {Function} props.handleFiatAmountChange - Callback function called when the fiat amount changes.
+ * @param {Function} props.handleChangeAssetClick - Callback function called when the asset change button is clicked.
+ * @param {Function} props.handleBalanceValidationChange - Callback function called when balance validation changes.
+ * @param {boolean} props.disabled - Disables the input fields when true.
+ * @param {boolean} props.locked - Locks the input fields when true.
+ * @param {string} props.alertText - Text to be displayed as an alert below the input.
+ * @param {string} props.predefinedValue - Predefined value to be set in the input.
+ * @param {React.ReactNode} props.children - Any additional elements to be rendered inside the component.
+ * @param {string} props.ticker - The ticker code of the asset.
+ * @param {string} props.tickerPrintable - The printable version of the ticker code.
+ * @param {number} props.assetDecimalPlaces - The number of decimal places allowed for the asset.
+ * @param {Object} props.assetBalance - The balance of the asset in both fiat and crypto formats.
+ * @param {string} props.assetIconSrc - The source URL of the asset icon.
+ * @param {string} props.assetIconProtocolSrc - The source URL of the asset protocol icon.
+ * @param {string} props.fallbackAssetIconSrc - The source URL of the fallback asset icon.
+ * @param {boolean} props.isSendAll - Determines if the "Send All" button is shown.
+ * @param {Function} props.handleSendAllClick - Callback function called when the "Send All" button is clicked.
+ * @param {boolean} props.showBalance - Determines if the balance should be displayed.
+ * @param {boolean} props.showBalanceValidation - Determines if the balance validation should be shown.
+ * @param {boolean} props.showChangeAssetButton - Determines if the change asset button should be displayed.
+ * @param {string} props.changeAssetButtonProtocol - The protocol name to be displayed on the change asset button.
+ * @param {boolean} props.changeAssetButtonDisabled - Disables the change asset button when true.
+ * @param {boolean} props.upperFormPosition - Applies a style for the upper form position.
+ * @param {boolean} props.lowerFormPosition - Applies a style for the lower form position.
+ * @param {boolean} props.errorEncountered - Indicates if an error was encountered.
+ * @param {string} props.updateAssetInputTo - The value to update the asset input to.
+ * @param {boolean} props.estimateAmount - Indicates if the amount is estimated.
+ * @param {boolean} props.isLoading - Indicates if the component is in a loading state.
+ * @param {string} props.cryptoAssetToFiatRate - The conversion rate from crypto asset to fiat.
+ * @param {string} props.fiatCurrencyCode - The fiat currency code.
+ * @param {number} props.fiatCurrencyDecimals - The number of decimal places allowed for the fiat currency.
+ * @param {string} props.linkButtonActiveText - The text for the active state of the link button.
+ * @param {string} props.linkButtonInactiveText - The text for the inactive state of the link button.
+ * @param {string} props.balanceLoaderText - The text to display while the balance is loading.
+ * @param {string} props.fiatInputPlaceholderText - The placeholder text for the fiat input.
+ * @param {React.Ref} buttonForwardRef - A ref passed to the change asset button.
+ */
+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>
+                            <CSSTransition
+                                in={fiatCurrencyCode !== null}
+                                timeout={200}
+                                classNames={{
+                                    enter: s["requested-amount-fiat-enter"],
+                                    enterActive: s["requested-amount-fiat-enter-active"],
+                                    exit: s["requested-amount-fiat-exit"],
+                                    exitActive: s["requested-amount-fiat-exit-active"],
+                                }}
+                                unmountOnExit
+                            >
+                                <div
+                                    className={
+                                        s["requested-amount-fiat"] + (interactedWith ? " " + s["interacted"] : "")
+                                    }
+                                >
+                                    {interactedWith ? (
+                                        <>
+                                            <span className={s["requested-amount-fiat-currency"]}>
+                                                {(estimateAmount ? "~ " : "") + fiatCurrencyCode}
+                                            </span>
+
+                                            {!isLoading && cryptoAssetToFiatRate != null ? (
+                                                <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>
+                            </CSSTransition>
+                        </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}
+            </>
+        );
+    }
+);
+
+AmountInput.propTypes = {
+    label: PropTypes.string,
+    handleCoinAmountChange: PropTypes.func,
+    handleFiatAmountChange: PropTypes.func,
+    handleChangeAssetClick: PropTypes.func,
+    handleBalanceValidationChange: PropTypes.func,
+    disabled: PropTypes.bool,
+    locked: PropTypes.bool,
+    alertText: PropTypes.string,
+    predefinedValue: PropTypes.string,
+    children: PropTypes.node,
+    ticker: PropTypes.string,
+    tickerPrintable: PropTypes.string,
+    assetDecimalPlaces: PropTypes.number,
+    assetBalance: PropTypes.shape({
+        fiatAmount: PropTypes.string,
+        assetAmount: PropTypes.string,
+    }),
+    assetIconSrc: PropTypes.string,
+    assetIconProtocolSrc: PropTypes.string,
+    fallbackAssetIconSrc: PropTypes.string,
+    isSendAll: PropTypes.bool,
+    handleSendAllClick: PropTypes.func,
+    showBalance: PropTypes.bool,
+    showBalanceValidation: PropTypes.bool,
+    showChangeAssetButton: PropTypes.bool,
+    changeAssetButtonProtocol: PropTypes.string,
+    changeAssetButtonDisabled: PropTypes.bool,
+    upperFormPosition: PropTypes.bool,
+    lowerFormPosition: PropTypes.bool,
+    errorEncountered: PropTypes.bool,
+    updateAssetInputTo: PropTypes.string,
+    estimateAmount: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    cryptoAssetToFiatRate: PropTypes.string,
+    fiatCurrencyCode: PropTypes.string,
+    fiatCurrencyDecimals: PropTypes.number,
+    linkButtonActiveText: PropTypes.string,
+    linkButtonInactiveText: PropTypes.string,
+    balanceLoaderText: PropTypes.string,
+    fiatInputPlaceholderText: PropTypes.string,
+    buttonForwardRef: PropTypes.object,
+};
+
+AmountInput.defaultProps = {
+    label: "",
+    handleCoinAmountChange: () => {},
+    handleFiatAmountChange: () => {},
+    handleChangeAssetClick: () => {},
+    handleBalanceValidationChange: () => {},
+    assetBalance: { fiatAmount: null, assetAmount: null },
+    isSendAll: null,
+    handleSendAllClick: () => {},
+    showBalance: false,
+    showBalanceValidation: false,
+    showChangeAssetButton: false,
+    changeAssetButtonDisabled: false,
+    updateAssetInputTo: null,
+    estimateAmount: false,
+    isLoading: false,
+    cryptoAssetToFiatRate: null,
+    fiatCurrencyCode: null,
+    fiatCurrencyDecimals: null,
+    linkButtonActiveText: null,
+    linkButtonInactiveText: null,
+    balanceLoaderText: null,
+    fiatInputPlaceholderText: null,
+};

package/src/ui-kit/components/molecules/AmountInput/amount-input.module.scss

@@ -0,0 +1,233 @@
+@use "../../../assets/styles/index" as *;
+
+.amount-input-container {
+    padding: Padding("5");
+    background: SolidColor("lightsmoke");
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: space-between;
+    transition: 0.2s box-shadow ease;
+    min-height: 86.5px;
+
+    &.upper-form-position {
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+
+    &.lower-form-position {
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+    }
+
+    &.error-encountered {
+        box-shadow: $shadowOutlineError !important;
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            &:not(.focus) {
+                box-shadow: $shadowOutlineHover;
+                transition: 0.02s box-shadow ease;
+            }
+        }
+    }
+
+    &.focus {
+        box-shadow: $shadowOutlineActive;
+    }
+
+    &-input-wrapper {
+        width: 100%;
+
+        &.disabled {
+            opacity: 0.15;
+        }
+
+        &.bottom-margin {
+            @media (max-width: $tablet-width) {
+                margin-bottom: Margin("5");
+            }
+        }
+
+        .asset-balance {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+
+            svg {
+                margin-left: -1px;
+                margin-right: 4px;
+
+                path {
+                    transition: stroke 0.2s ease;
+                }
+            }
+
+            &.red {
+                svg path {
+                    stroke: SolidColor("red");
+                }
+
+                p {
+                    color: SolidColor("red");
+                }
+            }
+
+            p {
+                color: SolidColor("grey");
+                transition: color 0.2s ease;
+
+                span {
+                    opacity: 0.5;
+                }
+            }
+        }
+
+        .requested-amount-coin {
+            font-size: 20px;
+            font-weight: $bold;
+            color: SolidColor("dark");
+            width: 100%;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            position: relative;
+
+            &::after {
+                content: " ";
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                box-shadow: -20px 0px 10px -15px SolidColor(lightsmoke) inset;
+                pointer-events: none;
+                user-select: none;
+            }
+
+            &-currency,
+            &-input {
+                font-size: inherit;
+                font-weight: inherit;
+                font-family: inherit;
+                color: inherit;
+                margin: 0;
+            }
+
+            &-currency {
+                user-select: none;
+                padding-right: 4px;
+                white-space: nowrap;
+            }
+
+            &-input {
+                border: none;
+                background: transparent;
+                padding: 0;
+                width: 100%;
+                flex-grow: 1;
+                margin: 0;
+
+                &::placeholder {
+                    color: rgba(SolidColor("dark"), 0.3);
+                }
+            }
+
+            &-skeleton {
+                height: 24px;
+                width: 40%;
+                display: flex;
+                align-items: center;
+
+                &-content {
+                    @extend %skeleton-big-text;
+                }
+            }
+        }
+
+        .requested-amount-fiat {
+            color: SolidColor("grey");
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            text-align: left;
+
+            &-enter {
+                opacity: 0;
+                margin-top: -19px;
+                transform: translateY(24px);
+            }
+
+            &-enter-active {
+                opacity: 1;
+                transition:
+                    opacity 0.2s $transitionEaseOut,
+                    margin-top 0.2s $transitionEaseOut,
+                    transform 0.2s $transitionEaseOut;
+                margin-top: 0;
+                transform: translateY(0);
+            }
+
+            &-exit {
+                opacity: 1;
+                margin-top: 0;
+                transform: translateY(0);
+            }
+
+            &-exit-active {
+                opacity: 0;
+                transition:
+                    opacity 0.1s $transitionEaseOut,
+                    margin-top 0.2s $transitionEaseOut,
+                    transform 0.2s $transitionEaseOut;
+                margin-top: -19px;
+                transform: translateY(24px);
+            }
+
+            &-currency,
+            &-input,
+            &-placeholder {
+                font-size: inherit;
+                font-weight: inherit;
+                font-family: inherit;
+                color: inherit;
+            }
+
+            &-currency {
+                user-select: none;
+                padding-right: 4px;
+                white-space: nowrap;
+            }
+
+            &-input {
+                background: none;
+                outline: none;
+                border: none;
+                padding: 0;
+                width: 100%;
+                flex-grow: 1;
+                margin: 0;
+
+                &::placeholder {
+                    color: rgba(SolidColor("dark"), 0.3);
+                }
+            }
+
+            &-skeleton {
+                width: 25%;
+                display: flex;
+                align-items: center;
+
+                &-content {
+                    @extend %skeleton-text;
+                }
+            }
+
+            &-placeholder {
+                cursor: pointer;
+            }
+        }
+    }
+}