@rabbitio/ui-kit 1.0.0-beta.6 → 1.0.0-beta.61

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

@@ -0,0 +1,421 @@
+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/errorUtils.js";
+
+import { TitleBox } from "../../atoms/TitleBox/TitleBox.jsx";
+import { AmountUtils } from "../../../common/amountUtils.js";
+import { AssetSelection } from "../../atoms/AssetSelection/AssetSelection.jsx";
+import { Validation } from "../../atoms/Validation/Validation.jsx";
+
+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 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
+                            : 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}
+                                            </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}
+            </>
+        );
+    }
+);

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

@@ -0,0 +1,189 @@
+@import "../../../../styles/index";
+
+.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;
+
+    &.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;
+
+            &-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);
+                }
+            }
+
+            &-placeholder {
+                cursor: pointer;
+            }
+        }
+    }
+}