@rabbitio/ui-kit 1.0.0-beta.7 → 1.0.0-beta.70

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

@@ -0,0 +1,304 @@
+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,
+            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(() => {
+            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"] + " " + 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 || locked}
+                                                    onChange={e => handleChangeAmountFiat(e.target.value)}
+                                                    placeholder={placeholderByDecimalCount(fiatCurrencyDecimals)}
+                                                    autoFocus={fiatAmountAutoFocus}
+                                                    onFocus={e => callHandlingErrors(() => setIsInFocus(true), e)}
+                                                    onBlur={e => callHandlingErrors(() => setIsInFocus(false), e)}
+                                                />
+                                            </>
+                                        ) : (
+                                            <span
+                                                className={s["requested-amount-fiat-placeholder"]}
+                                                onClick={e => callHandlingErrors(() => handleFiatInteraction(), e)}
+                                            >
+                                                {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;
+            }
+        }
+    }
+}