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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rabbitio/ui-kit",
-    "version": "1.0.0-beta.43",
+    "version": "1.0.0-beta.46",
     "description": "Rabbit.io react.js components kit",
     "type": "module",
     "main": "./dist/index.cjs",
@@ -41,12 +41,18 @@
         "react-dom": ">=18.2.0"
     },
     "dependencies": {
+        "animated-scroll-to": "2.3.0",
         "axios": "1.6.7",
         "bignumber.js": "9.1.2",
+        "body-scroll-lock": "3.1.5",
+        "clipboard-copy": "4.0.1",
         "eventbusjs": "0.2.0",
         "jshashes": "1.0.8",
         "react": ">=18.2.0",
+        "react-animate-height": "3.2.3",
         "react-dom": ">=18.2.0",
+        "react-transition-group": "4.4.5",
+        "resize-observer-polyfill": "1.5.1",
         "uuid": "9.0.0"
     },
     "devDependencies": {

package/src/assets/image/icons/arrow-darker.svg

@@ -0,0 +1,14 @@
+<svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+            d="M12.2431 6L8.00045 10.2426L3.75781 6"
+            stroke="#232d42" stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+    />
+</svg>

package/src/assets/image/icons/arrow-tosca.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2431 6L8.00045 10.2426L3.75781 6" stroke="#16CDD6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/image/icons/arrow-white.svg

@@ -0,0 +1,14 @@
+<svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+            d="M12.2431 6L8.00045 10.2426L3.75781 6"
+            stroke="#fff" stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+    />
+</svg>

package/src/assets/image/icons/dark-rectangle.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="13" viewBox="0 0 25 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 13L25 0H0L12.5 13Z" fill="#232D42"/>
+</svg>

package/src/assets/image/icons/failed-validation-icon.svg

@@ -0,0 +1,15 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.8" x="1.5" y="1.5" width="24" height="24" rx="12" fill="#DAF1FE"/>
+<path d="M12.3259 10.5855C12.2575 9.8896 12.8063 9.28745 13.5055 9.29121C14.2008 9.29495 14.7418 9.8964 14.6722 10.5881L14.1937 15.3431C14.1575 15.7026 13.855 15.9762 13.4937 15.9762C13.1319 15.9762 12.829 15.7017 12.7936 15.3415L12.3259 10.5855Z" fill="url(#paint0_linear)"/>
+<path d="M13.514 17.1182C14.1325 17.1182 14.634 17.6196 14.634 18.2382C14.634 18.8567 14.1325 19.3582 13.514 19.3582H13.486C12.8674 19.3582 12.366 18.8567 12.366 18.2382C12.366 17.6196 12.8674 17.1182 13.486 17.1182H13.514Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="17.3456" y1="14.0483" x2="11.6522" y2="12.8896" gradientUnits="userSpaceOnUse">
+<stop stop-color="#55E7D9"/>
+<stop offset="1" stop-color="#54B4FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="17.3456" y1="14.2383" x2="11.6522" y2="13.0796" gradientUnits="userSpaceOnUse">
+<stop stop-color="#55E7D9"/>
+<stop offset="1" stop-color="#54B4FF"/>
+</linearGradient>
+</defs>
+</svg>

package/src/assets/image/icons/successful-validation-icon.svg

@@ -0,0 +1,10 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.8" x="1.5" y="1.5" width="24" height="24" rx="12" fill="#DAF1FE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8703 15.7837L9.64348 13.5569C9.30357 13.217 8.75246 13.217 8.41255 13.5569C8.07264 13.8968 8.07264 14.4479 8.41255 14.7878L11.2351 17.6104C11.5672 17.9425 12.103 17.9512 12.4457 17.6301L18.4492 12.0049C18.8 11.6762 18.8179 11.1254 18.4892 10.7746C18.1605 10.4238 17.6097 10.4059 17.2589 10.7346L11.8703 15.7837Z" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="19.8333" y1="18.9098" x2="15.586" y2="7.2736" gradientUnits="userSpaceOnUse">
+<stop stop-color="#55E7D9"/>
+<stop offset="1" stop-color="#54B4FF"/>
+</linearGradient>
+</defs>
+</svg>

package/src/assets/image/icons/wallet-gray-small.svg

@@ -0,0 +1,6 @@
+<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>

package/src/components/atoms/AssetSelection/AssetSelection.jsx

@@ -0,0 +1,93 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./asset-selection.module.scss";
+
+// import arrowIcon from "../../../assets/image/icons/arrow-darker.svg";
+import { AssetIcon } from "../AssetIcon/AssetIcon.jsx";
+
+import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
+
+const ArrowIcon = () => (
+    <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M12.2431 6L8.00045 10.2426L3.75781 6"
+            stroke="#232d42"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+    </svg>
+);
+
+/**
+ * Component-button for triggering selecting an asset.
+ *
+ * @component
+ * @param {Function} handleClick - The function to call when the component is clicked
+ * @param {boolean} disabled - If true, disables click functionality
+ * @param {string} assetIconSrc - The source URL for the asset icon
+ * @param {string} [protocolName] - The name of the protocol, if any
+ * @param {string} [assetIconProtocolSrc] - The source URL for the asset protocol icon
+ * @param {string} [fallbackSrc] - The fallback source URL if the main asset icon fails to load
+ */
+export const AssetSelection = ({
+    handleClick = () => {},
+    disabled = false,
+    assetIconSrc,
+    protocolName,
+    assetIconProtocolSrc = null,
+    fallbackSrc,
+}) => {
+    const handleError = useCallHandlingErrors();
+
+    return (
+        <div
+            className={
+                s["asset-selection"] + " " + (disabled ? s["disabled"] : "")
+            }
+            onClick={disabled ? () => {} : (e) => handleError(handleClick, e)}
+        >
+            <div className={s["asset-selection-icon-wrapper"]}>
+                <AssetIcon
+                    small
+                    assetIconSrc={assetIconSrc}
+                    assetIconProtocolSrc={assetIconProtocolSrc}
+                    fallbackSrc={fallbackSrc}
+                />
+            </div>
+            {protocolName ? (
+                <div className={s["asset-selection-protocol-wrapper"]}>
+                    {protocolName}
+                </div>
+            ) : (
+                ""
+            )}
+            <div className={s["arrow"]}>
+                <ArrowIcon />
+            </div>
+            {/*<img src={arrowIcon} className="arrow" alt=""></img>*/}
+        </div>
+    );
+};
+
+AssetSelection.propTypes = {
+    handleClick: PropTypes.func,
+    disabled: PropTypes.bool,
+    assetIconSrc: PropTypes.string.isRequired,
+    protocolName: PropTypes.string,
+    assetIconProtocolSrc: PropTypes.string,
+    fallbackSrc: PropTypes.string,
+};
+
+AssetSelection.defaultProps = {
+    handleClick: () => {},
+    disabled: false,
+    assetIconProtocolSrc: null,
+};

package/src/components/atoms/AssetSelection/asset-selection.module.scss

@@ -0,0 +1,55 @@
+@import "../../../../styles/index";
+
+.asset-selection {
+    display: flex;
+    align-items: center;
+    background-color: $white;
+    border-radius: 100px;
+    user-select: none;
+    box-shadow: $shadowOutlineStatic;
+    transition: all 0.2s ease;
+    cursor: pointer;
+
+    @media (hover: hover) {
+        &:hover:not(.disabled) {
+            box-shadow: $shadowOutlineHover;
+        }
+    }
+
+    &.disabled {
+        opacity: 0.5;
+    }
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        box-shadow: $shadowOutlineActive;
+        transition: all 0.03s ease;
+    }
+
+    &-protocol-wrapper {
+        background-color: LightColor("tosca-20");
+        color: SolidColor("tosca");
+        padding: 2px 5px;
+        font-size: 8px;
+        border-radius: 50px;
+        font-weight: $bold;
+        margin-right: 3px;
+    }
+
+    &-icon-wrapper {
+        padding: 10px 5px 10px 10px;
+    }
+
+    h6 {
+        color: SolidColor("dark");
+        font-weight: $semi-bold;
+
+        margin: 1px 7px 0 2px;
+    }
+
+    .arrow {
+        margin: 10px 10px 10px 0;
+        transform: rotate(-90deg);
+        height: 14px;
+    }
+}

package/src/components/atoms/BackgroundTitle/BackgroundTitle.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./background-title.module.scss";
+
+/**
+ * Component for displaying a title with a fancy background text, which
+ * is semi-visible. This component is designed to work with forms that
+ * have a white background, and it allows for a configuration of margins.
+ *
+ * @param {Object} props - Component props
+ * @param {string} props.text - Text to be displayed as the title
+ * @param {boolean} [props.smallMargins=false] - Whether to use smaller margins around the title
+ */
+export const BackgroundTitle = ({ text, smallMargins = false }) => {
+    return (
+        <div className={s["background-title"]}>
+            <div
+                className={
+                    s["background-title-wrapper"] +
+                    (smallMargins ? " " + s["small-margins"] : "")
+                }
+            >
+                <div
+                    className={
+                        s["background-title-wrapper-text"] +
+                        (smallMargins ? " " + s["small-margins"] : "")
+                    }
+                >
+                    {text}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+BackgroundTitle.propTypes = {
+    text: PropTypes.string.isRequired,
+    smallMargins: PropTypes.bool,
+};
+
+BackgroundTitle.defaultProps = {
+    smallMargins: false,
+};

package/src/components/atoms/BackgroundTitle/background-title.module.scss

@@ -0,0 +1,52 @@
+@import "../../../../styles/index";
+
+.background-title {
+    pointer-events: none;
+    user-select: none;
+    position: relative;
+    width: 200%;
+    font-family: NunitoSans;
+
+    &-wrapper {
+        position: absolute;
+        overflow-x: hidden;
+        width: 200%;
+        height: 90px;
+        top: 0;
+        left: 0;
+
+        @media (max-width: $phone-width) {
+            font-size: 30px;
+            line-height: 50px;
+            letter-spacing: 0.76875px;
+        }
+
+        &.small-margins {
+            top: 15px;
+            left: 19px;
+        }
+
+        &-text {
+            position: absolute;
+            top: 0;
+            left: 0;
+            font-size: 50px;
+            line-height: 50px;
+            font-weight: $extra-bold;
+            letter-spacing: 1.23px;
+            color: rgba(#12316b, 0.05);
+
+            &.small-margins {
+                font-size: 30px;
+                line-height: 50px;
+                letter-spacing: 0.76875px;
+            }
+
+            @media (max-width: $phone-width) {
+                font-size: 30px;
+                line-height: 40px;
+                letter-spacing: 0.76875px;
+            }
+        }
+    }
+}

package/src/components/atoms/NoticeIcon/NoticeIcon.jsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+
+import s from "./notice-icon.module.scss";
+// import exclamationIcon from "../../../assets/image/icons/failed-validation-icon.svg";
+
+import { handleClickOutside } from "../../utils/uiUtils.js";
+import { Tooltip, TOOLTIP_POSITIONS } from "../Tooltip/Tooltip.jsx";
+import { FailedValidationIcon } from "../Validation/Validation.jsx";
+
+/**
+ * A component that displays a notice icon with optional tooltip.
+ *
+ * @component
+ * @param {string} noticeText - The text to display inside the tooltip.
+ * @param {string} [titleNoticeIcon] - The source URL for the icon displayed on the notice.
+ * @param {string} tooltipPosition - Position for the tooltip relative to the icon.
+ */
+export const NoticeIcon = ({
+    noticeText,
+    titleNoticeIcon = "",
+    tooltipPosition = TOOLTIP_POSITIONS.TOP,
+}) => {
+    const [showTooltip, setShowTooltip] = useState(false);
+
+    const noticeRef = useRef();
+
+    useEffect(
+        () => handleClickOutside([noticeRef], () => setShowTooltip(false)),
+        []
+    );
+
+    return (
+        <div ref={noticeRef} className={s["notice-icon"]}>
+            {titleNoticeIcon ? (
+                <img
+                    // src={titleNoticeIcon ? titleNoticeIcon : exclamationIcon}
+                    src={titleNoticeIcon}
+                    alt="title icon"
+                    onClick={() => setShowTooltip((prev) => !prev)}
+                    className={s["notice-icon-image"]}
+                />
+            ) : (
+                <div className={s["notice-icon-image"]}>
+                    <FailedValidationIcon />
+                </div>
+            )}
+            <div className={s["notice-icon-tooltip"]}>
+                <Tooltip
+                    showTooltip={showTooltip}
+                    handleClick={() => setShowTooltip(false)}
+                    wide={true}
+                    position={tooltipPosition}
+                >
+                    {noticeText}
+                </Tooltip>
+            </div>
+        </div>
+    );
+};
+
+NoticeIcon.propTypes = {
+    noticeText: PropTypes.string.isRequired,
+    titleNoticeIcon: PropTypes.string,
+    tooltipPosition: PropTypes.oneOf(Object.values(TOOLTIP_POSITIONS)),
+};
+
+NoticeIcon.defaultProps = {
+    titleNoticeIcon: "",
+    tooltipPosition: TOOLTIP_POSITIONS.TOP,
+};

package/src/components/atoms/NoticeIcon/notice-icon.module.scss

@@ -0,0 +1,14 @@
+@import "../../../../styles/index";
+
+.notice-icon {
+    position: relative;
+    display: flex;
+
+    &-image {
+        @extend %hover-state;
+    }
+
+    &-tooltip {
+        left: 50%;
+    }
+}

package/src/components/atoms/TitleBox/TitleBox.jsx

@@ -0,0 +1,163 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+import s from "./title-box.module.scss";
+
+import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
+import { copyBrowserTextToClipboard } from "../../utils/textUtils.js";
+
+import { NoticeIcon } from "../NoticeIcon/NoticeIcon.jsx";
+import { LinkButton } from "../buttons/LinkButton/LinkButton.jsx";
+import { Tooltip, TOOLTIP_POSITIONS } from "../Tooltip/Tooltip.jsx";
+
+/**
+ * A box component for displaying a title with optional controls like buttons or icons and any children inside.
+ *
+ * @component
+ * @param {string} title - The main title text.
+ * @param {string} linkText - The text for the link button, if any.
+ * @param {Function} linkButtonClick - The function to execute when the link button is clicked.
+ * @param {boolean} isLinkButtonDisabled - Determines if the link button is disabled.
+ * @param {React.ReactNode} children - Child components to be rendered.
+ * @param {boolean} linkButtonLoader - Displays a loader animation on the link button if true.
+ * @param {boolean} fullWidth - If true, the title box will take full width of its container.
+ * @param {string} titleNoticeText - The text for a notice icon tooltip.
+ * @param {string} titleNoticeIcon - The icon for the notice tooltip.
+ * @param {string} titleNoticePosition - Tooltip position for the notice icon.
+ * @param {boolean} bigTitle - If true, uses a larger font size for the title.
+ * @param {boolean} transparentTitle - If true, the title has a transparent background.
+ * @param {string} copyButtonText - The text for the copy button.
+ * @param {string} copyButtonContent - The content to be copied to the clipboard.
+ * @param {string} copyButtonTooltipContent - Tooltip content displayed after copying.
+ */
+export const TitleBox = ({
+    title = "",
+    linkText = "",
+    linkButtonClick = (resetButtonLoader) => {},
+    isLinkButtonDisabled = false,
+    children,
+    linkButtonLoader = false,
+    fullWidth = true,
+    titleNoticeText = "",
+    titleNoticeIcon,
+    titleNoticePosition,
+    bigTitle = false,
+    transparentTitle = false,
+    copyButtonText,
+    copyButtonContent,
+    copyButtonTooltipContent,
+}) => {
+    const handleError = useCallHandlingErrors();
+
+    const transparentTitleClass = transparentTitle
+        ? s["transparent-title"]
+        : "";
+
+    const [showCopyNotice, setShowCopyNotice] = useState(false);
+
+    const handleCopyButton = (e) => {
+        handleError(() => {
+            setShowCopyNotice(true);
+            copyBrowserTextToClipboard(copyButtonContent);
+            setTimeout(() => {
+                setShowCopyNotice(false);
+            }, 1500);
+        }, e);
+    };
+
+    return (
+        <div
+            className={`${s["title-box"]} ${fullWidth ? s["full-width"] : ""}`}
+        >
+            {title || titleNoticeText || linkText ? (
+                <div className={s["title-box-wrapper"]}>
+                    {bigTitle ? (
+                        <h5
+                            className={
+                                s["title-box-wrapper-title"] +
+                                " " +
+                                transparentTitleClass
+                            }
+                        >
+                            {title}
+                        </h5>
+                    ) : (
+                        <h6
+                            className={
+                                s["title-box-wrapper-title"] +
+                                " " +
+                                transparentTitleClass
+                            }
+                        >
+                            {title}
+                        </h6>
+                    )}
+                    {titleNoticeText ? (
+                        <NoticeIcon
+                            noticeText={titleNoticeText}
+                            titleNoticeIcon={titleNoticeIcon}
+                            tooltipPosition={titleNoticePosition}
+                        />
+                    ) : null}
+                    {copyButtonContent && copyButtonText ? (
+                        <div className={s["title-box-wrapper-link-button"]}>
+                            <LinkButton
+                                content={copyButtonText}
+                                onClick={handleCopyButton}
+                                isLoadable={false}
+                                isDisabled={false}
+                            />
+                            <Tooltip
+                                position={TOOLTIP_POSITIONS.TOP_LEFT}
+                                showTooltip={showCopyNotice}
+                            >
+                                {copyButtonTooltipContent}
+                            </Tooltip>
+                        </div>
+                    ) : linkText ? (
+                        <div className={s["title-box-wrapper-link-button"]}>
+                            <LinkButton
+                                content={linkText}
+                                onClick={linkButtonClick}
+                                isLoadable={linkButtonLoader}
+                                isDisabled={isLinkButtonDisabled}
+                            />
+                        </div>
+                    ) : null}
+                </div>
+            ) : null}
+            {children}
+        </div>
+    );
+};
+
+TitleBox.propTypes = {
+    title: PropTypes.string,
+    linkText: PropTypes.string,
+    linkButtonClick: PropTypes.func,
+    isLinkButtonDisabled: PropTypes.bool,
+    children: PropTypes.node,
+    linkButtonLoader: PropTypes.bool,
+    fullWidth: PropTypes.bool,
+    titleNoticeText: PropTypes.string,
+    titleNoticeIcon: PropTypes.string,
+    titleNoticePosition: PropTypes.string,
+    bigTitle: PropTypes.bool,
+    transparentTitle: PropTypes.bool,
+    copyButtonText: PropTypes.string,
+    copyButtonContent: PropTypes.string,
+    copyButtonTooltipContent: PropTypes.string,
+};
+
+TitleBox.defaultProps = {
+    title: "",
+    linkText: "",
+    linkButtonClick: () => {},
+    isLinkButtonDisabled: false,
+    linkButtonLoader: false,
+    fullWidth: true,
+    titleNoticeText: "",
+    titleNoticePosition: TOOLTIP_POSITIONS.TOP,
+    bigTitle: false,
+    transparentTitle: false,
+};

package/src/components/atoms/TitleBox/title-box.module.scss

@@ -0,0 +1,30 @@
+@import "../../../../styles/index";
+
+.title-box {
+    &.full-width {
+        width: 100%;
+    }
+
+    &-wrapper {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-grow: 1;
+        margin-bottom: Margin("1");
+        gap: Margin("2");
+        min-height: 26px;
+
+        &-title {
+            color: SolidColor("grey");
+            font-weight: $semi-bold;
+            &.transparent-title {
+                color: rgba($white, 0.2);
+            }
+        }
+
+        &-link-button {
+            position: relative;
+        }
+    }
+}