@rabbitio/ui-kit 1.0.0-beta.45 → 1.0.0-beta.47

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rabbitio/ui-kit",
-    "version": "1.0.0-beta.45",
+    "version": "1.0.0-beta.47",
     "description": "Rabbit.io react.js components kit",
     "type": "module",
     "main": "./dist/index.cjs",
@@ -45,6 +45,7 @@
         "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",

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/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/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/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;
+        }
+    }
+}

package/src/components/atoms/Tooltip/Tooltip.jsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { CSSTransition } from "react-transition-group";
+import PropTypes from "prop-types";
+
+import s from "./tooltip.module.scss";
+// import darkRectangle from "../../../assets/image/icons/dark-rectangle.svg";
+
+import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
+
+const DarkRectangle = () => (
+    <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>
+);
+
+export const TOOLTIP_POSITIONS = {
+    TOP: "top",
+    LEFT: "left",
+    RIGHT: "right",
+    BOTTOM: "bottom",
+    TOP_LEFT: "top-left",
+    TOP_RIGHT: "top-right",
+};
+
+/**
+ * Tooltip component for displaying contextual information.
+ *
+ * @component
+ * @param {React.ReactNode} children - The content to display inside the tooltip.
+ * @param {boolean} showTooltip - Controls whether the tooltip is visible.
+ * @param {Function} handleClick - Handler for click events.
+ * @param {boolean} wide - If true, applies a wider style to the tooltip.
+ * @param {string} position - One of the predefined positions for the tooltip.
+ * @param {boolean} ignorePointerEvents - If true, the tooltip will not react to pointer events.
+ */
+export const Tooltip = ({
+    children,
+    showTooltip,
+    handleClick = () => {},
+    wide = false,
+    position = TOOLTIP_POSITIONS.TOP,
+    ignorePointerEvents = false,
+}) => {
+    const handleError = useCallHandlingErrors();
+
+    const onClick = (e) => {
+        e.stopPropagation();
+        handleClick();
+    };
+
+    return (
+        <CSSTransition in={showTooltip} timeout={400} unmountOnExit>
+            <span
+                className={`${s["tooltip"]} ${wide ? s["wide"] : ""} ${
+                    s[position]
+                } ${ignorePointerEvents ? s["ignore-pointer"] : ""}`}
+                onClick={(e) => handleError(onClick, e)}
+                onDoubleClick={(e) =>
+                    handleError((e) => e.stopPropagation(), e)
+                }
+            >
+                <DarkRectangle />
+                {/*<img src={darkRectangle} alt="dark rectangle" />*/}
+                {children}
+            </span>
+        </CSSTransition>
+    );
+};
+
+Tooltip.propTypes = {
+    children: PropTypes.node.isRequired,
+    showTooltip: PropTypes.bool.isRequired,
+    handleClick: PropTypes.func,
+    wide: PropTypes.bool,
+    position: PropTypes.oneOf(Object.values(TOOLTIP_POSITIONS)),
+    ignorePointerEvents: PropTypes.bool,
+};
+
+Tooltip.defaultProps = {
+    handleClick: () => {},
+    wide: false,
+    position: TOOLTIP_POSITIONS.TOP,
+    ignorePointerEvents: false,
+};