@rabbitio/ui-kit 1.0.0-beta.43 → 1.0.0-beta.46

package/src/components/atoms/buttons/LinkButton/LinkButton.jsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors";
+
+import s from "./link-button.module.scss";
+import { LoadingDots } from "../../LoadingDots/LoadingDots";
+
+export const iconRotateOptions = {
+    rotate0: "0deg",
+    rotate90: "90deg",
+    rotate180: "180deg",
+    rotate270: "270deg",
+};
+
+/**
+ * LinkButton renders a clickable button which can optionally display an icon and loading animation.
+ * It can also be styled to be colored or disabled. This button supports rotating the icon according to specified degrees.
+ *
+ * @component
+ * @param {Object} props - Properties passed down to the component.
+ * @param {Function} props.onClick - Callback function triggered on button click. It should handle any post-click logic like resetting loading state.
+ * @param {boolean} props.isDisabled - If true, the button will be disabled and non-interactable.
+ * @param {boolean} props.isLoadable - If true, the button will display a loading indicator upon being clicked.
+ * @param {string} props.content - Text content displayed on the button.
+ * @param {boolean} props.isColored - If true, applies additional styling to the button.
+ * @param {string} props.icon - URL of an icon image to be displayed on the button.
+ * @param {string} props.iconRotate - Rotation angle for the icon. Valid values are defined in `iconRotateOptions`.
+ * @param {Object} props.IconComponent - Icon component, if SVG is imported directly.
+ *
+ * @returns {JSX.Element} A React component that renders a clickable and optionally loadable and icon-displaying button.
+ */
+export const LinkButton = ({
+    onClick = (resetButtonLoader) => {},
+    isDisabled = false,
+    isLoadable = false,
+    content = "",
+    isColored = true,
+    icon,
+    iconRotate,
+    IconComponent,
+}) => {
+    const callHandlingErrors = useCallHandlingErrors();
+
+    const [isLoading, setIsLoading] = useState(false);
+    const [processedIconRotation, setProcessedIconRotation] = useState(null);
+
+    const handleClick = () => {
+        callHandlingErrors(() => {
+            if (!isDisabled) {
+                if (isLoadable) {
+                    setIsLoading(true);
+                }
+                // TODO: [bug, moderate] Click can be called when there isLoading=true task_id=a15979a4ca2042b29dfd1d128a16c281
+                onClick(() => setIsLoading(false));
+            }
+        });
+    };
+
+    useEffect(() => {
+        if (
+            iconRotate &&
+            Object.keys(iconRotateOptions).find(
+                (key) => iconRotateOptions[key] === iconRotate
+            )
+        )
+            setProcessedIconRotation(iconRotate);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [iconRotate]);
+
+    return isLoading ? (
+        <LoadingDots isColored={true} />
+    ) : (
+        <div
+            className={
+                s["link-button"] +
+                ` ${
+                    processedIconRotation &&
+                    processedIconRotation !== iconRotateOptions.rotate0
+                        ? " " + s["icon-rotate-" + processedIconRotation]
+                        : ""
+                } ${isDisabled ? " " + s["disabled"] : ""}`
+            }
+            onClick={handleClick}
+        >
+            {icon ? <img src={icon} alt="link button alt" /> : null}
+            {IconComponent ? <IconComponent /> : null}
+            <p
+                className={
+                    s["link-button-text"] +
+                    ` ${isColored ? s["colored"] : ""} ${
+                        isDisabled ? s["disabled"] : ""
+                    }`
+                }
+            >
+                {content}
+            </p>
+        </div>
+    );
+};
+
+LinkButton.propTypes = {
+    onClick: PropTypes.func,
+    isDisabled: PropTypes.bool,
+    isLoadable: PropTypes.bool,
+    content: PropTypes.string,
+    icon: PropTypes.string,
+    isColored: PropTypes.bool,
+    iconRotate: PropTypes.oneOf(Object.values(iconRotateOptions)),
+    IconComponent: PropTypes.elementType,
+};
+
+LinkButton.defaultProps = {
+    onClick: (resetButtonLoader) => {},
+    isDisabled: false,
+    isLoadable: false,
+    content: "",
+    icon: undefined,
+    isColored: true,
+    iconRotate: iconRotateOptions.rotate0,
+};

package/src/components/atoms/buttons/LinkButton/link-button.module.scss

@@ -0,0 +1,45 @@
+@import "../../../../../styles/index";
+
+.link-button {
+    display: flex;
+    align-items: center;
+
+    &:not(.disabled) {
+        @extend %hover-state;
+    }
+
+    &.icon-rotate-90deg img {
+        transform: rotate(90deg);
+    }
+    &.icon-rotate-180deg img {
+        transform: rotate(180deg);
+    }
+    &.icon-rotate-270deg img {
+        transform: rotate(270deg);
+    }
+
+    img {
+        margin-left: -3px;
+        margin-right: Margin("1");
+    }
+
+    &-text {
+        @extend %text-bold;
+        font-size: 14px;
+        color: $white;
+        text-decoration: none;
+        text-align: center;
+        line-height: 14px;
+        // padding-bottom: 1px;
+        margin: 0;
+
+        &.colored {
+            color: SolidColor("tosca");
+        }
+
+        &.disabled {
+            color: SolidColor("grey");
+            cursor: default;
+        }
+    }
+}

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

@@ -0,0 +1,475 @@
+import React, { useEffect, useState } from "react";
+import { BigNumber } from "bignumber.js";
+
+import s from "./amount-input.module.scss";
+// import { ReactComponent as WalletIcon } from "../../../assets/image/icons/wallet-gray-small.svg";
+
+import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
+import { InputValuesProviders } from "../../utils/inputValueProviders.js";
+import { logErrorOrOutputToConsole } from "../../../common/errorUtils.js";
+
+import { TitleBox } from "../../atoms/TitleBox/TitleBox.jsx";
+import { AmountUtils } from "../../../common/amountUtils.js";
+import { LoadingDots } from "../../atoms/LoadingDots/LoadingDots.jsx";
+import { AssetSelection } from "../../atoms/AssetSelection/AssetSelection.jsx";
+import { Validation } from "../../atoms/Validation/Validation.jsx";
+
+const WalletIcon = () => (
+    <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M12.6265 10.4119V12.2379C12.6265 12.7338 12.193 13.1356 11.6583 13.1356H3.26825C2.73352 13.1356 2.29999 12.7338 2.29999 12.2379V3.79771C2.29999 3.30178 2.73352 2.89999 3.26825 2.89999H11.6583C12.193 2.89999 12.6265 3.30178 12.6265 3.79771V5.84996"
+            stroke="#8F95A2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M13.0952 10.1922H10.2664C9.0847 10.1922 8.12704 9.23439 8.12704 8.05246C8.12704 6.87052 9.0847 5.91269 10.2664 5.91269H13.0952C13.4072 5.91269 13.66 6.16552 13.66 6.47758V9.62689C13.66 9.93939 13.4072 10.1922 13.0952 10.1922Z"
+            stroke="#8F95A2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <path
+            d="M2.29999 4.73721H4.99884"
+            stroke="#8F95A2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <path
+            d="M2.29999 11.3122H4.99884"
+            stroke="#8F95A2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+    </svg>
+);
+
+export const AmountInput = React.forwardRef(
+    (
+        {
+            label = "",
+            handleCoinAmountChange = (btcAmount) => {},
+            handleFiatAmountChange = (fiatAmount) => {},
+            handleChangeAssetClick = () => {},
+            handleBalanceValidationChange = (isValid) => {},
+            disabled,
+            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 { t } = useTranslation();
+        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) return;
+            setFiatAmountAutoFocus(true);
+            setInteractedWith(true);
+        };
+
+        useEffect(() => {
+            predefinedValue != null && handleChangeAmount(predefinedValue + "");
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [predefinedValue]);
+
+        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]);
+
+        return (
+            <>
+                <TitleBox
+                    title={label}
+                    linkText={
+                        isSendAll !== null
+                            ? isSendAll
+                                ? linkButtonActiveText
+                                : linkButtonInactiveText
+                            : // ? t("molecules.AmountInput.send-all-enabled")
+                              // : t("molecules.AmountInput.send-all-disabled")
+                              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}
+                                        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"
+                                                ] +
+                                                " " +
+                                                s["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>
+                                                <input
+                                                    type="text"
+                                                    inputMode="decimal"
+                                                    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
+                                                        )
+                                                    }
+                                                />
+                                            </>
+                                        ) : (
+                                            <span
+                                                className={
+                                                    s[
+                                                        "requested-amount-fiat-placeholder"
+                                                    ]
+                                                }
+                                                onClick={(e) =>
+                                                    callHandlingErrors(
+                                                        () =>
+                                                            handleFiatInteraction(),
+                                                        e
+                                                    )
+                                                }
+                                            >
+                                                {fiatInputPlaceholderText}
+                                                {/*{t(*/}
+                                                {/*    "molecules.AmountInput.fiat-placeholder-text",*/}
+                                                {/*    {*/}
+                                                {/*        currencyCode:*/}
+                                                {/*            fiatCurrencyCode,*/}
+                                                {/*    }*/}
+                                                {/*)}*/}
+                                            </span>
+                                        )}
+                                    </div>
+                                </>
+                            ) : (
+                                <LoadingDots
+                                    isColored={true}
+                                    noMargins={false}
+                                    align="left"
+                                />
+                            )}
+                        </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}
+            </>
+        );
+    }
+);