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

package/src/components/molecules/CoinPicker/coin-picker.module.scss

@@ -0,0 +1,207 @@
+@import "../../../../styles/index";
+
+.coin-picker {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+
+    @media (max-width: $phone-width) {
+        max-width: none;
+    }
+
+    &-search {
+        width: 100%;
+        margin-bottom: Margin("2");
+    }
+
+    &-wrapper {
+        width: 100%;
+        position: relative;
+        border-radius: 8px;
+        overflow: hidden;
+
+        &.fixed-height {
+            @media (min-width: $tablet-width) {
+                height: 370px;
+
+                &::after,
+                &::before {
+                    content: "";
+                    position: absolute;
+                    width: 100%;
+                    height: 20px;
+                    background: linear-gradient(rgba(SolidColor("dark"), 0.05), rgba(255, 255, 255, 0));
+                    left: 0;
+                    z-index: 1;
+                    transition: 0.2s opacity ease;
+                    pointer-events: none;
+                }
+
+                &.reached-top::after,
+                &.reached-bottom::before {
+                    opacity: 0;
+                    transition: 0.2s opacity ease;
+                }
+
+                &::after {
+                    top: 0;
+                }
+
+                &::before {
+                    bottom: 0;
+                    transform: rotate(180deg);
+                }
+            }
+        }
+
+        &-content {
+            &.fixed-height {
+                @media (min-width: $tablet-width) {
+                    overflow: auto;
+                    height: 100%;
+                }
+            }
+
+            &-bottom-message {
+                margin: Margin("5") 0;
+                &-link {
+                    color: SolidColor("tosca");
+                }
+            }
+
+            &-assets {
+                display: grid;
+                // TODO: Fix the limitation of 300px width on mobile devices below
+                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+                gap: Margin("2");
+                &:has(*) {
+                    margin-bottom: Margin("5");
+                }
+
+                .item {
+                    position: relative;
+                    display: flex;
+                    align-items: stretch;
+                    cursor: pointer;
+                    width: 100%;
+
+                    .link {
+                        background: SolidColor("lightsmoke");
+                        display: flex;
+                        align-items: center;
+                        text-decoration: none;
+                        width: 100%;
+                        padding: Padding("4") Padding("5");
+                        border-radius: 8px;
+
+                        transition: 0.2s all ease;
+                        box-shadow: $shadowOutlineStatic;
+
+                        &.outline {
+                            box-shadow: $shadowOutlineActive;
+                        }
+
+                        @media (hover: hover) {
+                            &:hover {
+                                &:not(.outline):not(.disabled):not(.loading) {
+                                    box-shadow: $shadowOutlineHover;
+                                    transition: 0.02s all ease;
+                                }
+                            }
+                        }
+
+                        .icon {
+                            height: 34px;
+                        }
+                        .toggle-container {
+                            margin-left: auto;
+                            padding-left: Padding("2");
+                        }
+                        .content {
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            align-items: flex-start;
+                            margin-left: Margin("4");
+                            color: SolidColor("dark");
+                            min-width: 0;
+                            line-height: 20px;
+
+                            .name,
+                            .amount {
+                                color: inherit;
+                                line-height: inherit;
+                                user-select: none;
+                                text-align: left;
+                            }
+
+                            .name {
+                                font-weight: $bold;
+                            }
+
+                            .amount {
+                                font-weight: $semi-bold;
+                                opacity: 0.5;
+                            }
+                        }
+
+                        .arrow {
+                            height: 20px;
+                            transform: rotate(-90deg);
+                            margin-left: auto;
+                        }
+                    }
+                }
+            }
+
+            &-load-more-button {
+                width: 100%;
+                display: flex;
+                justify-content: center;
+            }
+
+            &-asset-not-found {
+                height: 72px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background: SolidColor("lightsmoke");
+                border-radius: 8px;
+
+                h6 {
+                    color: SolidColor("grey");
+                    font-weight: $semi-bold;
+                }
+            }
+        }
+    }
+}
+
+.coin-picker.loading {
+    .item {
+        .link {
+            &:hover {
+                opacity: 1;
+                cursor: default;
+            }
+            .icon {
+                @extend %skeleton-icon;
+                height: 34px;
+                width: 34px;
+            }
+            .content {
+                .name {
+                    @extend %skeleton-text;
+                    width: 65px;
+                    margin-bottom: Margin("2");
+                }
+                .amount {
+                    @extend %skeleton-text;
+                    width: 110px;
+                }
+            }
+        }
+    }
+}

package/src/components/molecules/LineWithIconLink/LineWithIconLink.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./line-with-icon-link.module.scss";
+
+/**
+ * Renders a line with text and an accompanying icon that serves as a link.
+ *
+ * @param {Object} props - Component props.
+ * @param {string} props.text - Text to be displayed.
+ * @param {string} props.icon - URL of the icon image.
+ * @param {string} props.url - Target URL that the icon link points to.
+ */
+export const LineWithIconLink = ({ text, icon, url }) => {
+    return (
+        <div className={s["line-with-icon-link"]}>
+            <h5 className={s["line-with-icon-link-text"]}>{text}</h5>
+            <a href={url} target="_blank" rel="noopener noreferrer" className={"line-with-icon-link-icon"}>
+                <img src={icon} alt="Link Icon" />
+            </a>
+        </div>
+    );
+};
+
+LineWithIconLink.propTypes = {
+    text: PropTypes.string.isRequired,
+    icon: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+};
+
+LineWithIconLink.defaultProps = {
+    text: "",
+    icon: "",
+    url: "",
+};

package/src/components/molecules/LineWithIconLink/line-with-icon-link.module.scss

@@ -0,0 +1,25 @@
+@import "../../../../styles/index";
+
+.line-with-icon-link {
+    display: flex;
+    align-items: center;
+    // font-family: NunitoSans;
+
+    &-text {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        font-weight: $bold;
+        margin-right: Margin("4");
+    }
+
+    &-icon {
+        @extend %hover-state;
+        display: flex;
+        align-items: center;
+
+        img {
+            width: 24px;
+        }
+    }
+}

package/src/components/molecules/TitledLineWithIconLink/TitledLineWithIconLink.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { TitleBox } from "../../atoms/TitleBox/TitleBox";
+import { LineWithIconLink } from "../LineWithIconLink/LineWithIconLink";
+
+/**
+ * TitledLineWithIconLink component renders a title box with a text line that includes an icon with a clickable link.
+ *
+ * @param {string} title - The title to display in the TitleBox.
+ * @param {string} text - The text to display in the LineWithIconLink.
+ * @param {string} icon - The icon to display next to the text in the LineWithIconLink.
+ * @param {string} url - The URL for the LineWithIconLink.
+ */
+export const TitledLineWithIconLink = ({ title, text, icon, url }) => {
+    return (
+        <TitleBox title={title}>
+            <LineWithIconLink text={text} icon={icon} url={url} />
+        </TitleBox>
+    );
+};
+
+TitledLineWithIconLink.propTypes = {
+    title: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+    icon: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+};
+
+TitledLineWithIconLink.defaultProps = {};

package/src/components/organisms/CoinPickerDialogStep/CoinPickerDialogStep.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+import { CoinPicker } from "../../molecules/CoinPicker/CoinPicker.jsx";
+import { DialogStep } from "../Dialog/DialogStep/DialogStep.jsx";
+import { DIALOG_SIZES } from "../../../constants/organisms/dialog/dialog.js";
+
+export const CoinPickerDialogStep = ({
+    stepName,
+    controls,
+    title,
+    subtitle,
+    handleCoinSelection = () => {},
+    cornerBackButtonTitle,
+    cornerBackButtonClick = null,
+    confirmButtonText,
+    confirmButtonClick,
+    showCornerBackButton,
+    mode,
+    allCoins,
+    initiallyEnabledCoinsList,
+    triggerToReloadData,
+    search,
+    searchAdaptive,
+    loadCoinsAndContent,
+    showRequestMissingCoinsInfoMessage,
+    coinToIconPaths = coin => ({
+        assetIconSrc: undefined,
+        assetIconProtocolSrc: undefined,
+    }),
+    supportUrl,
+    texts,
+}) => {
+    return (
+        <DialogStep
+            controls={controls}
+            stepName={stepName}
+            title={title}
+            subtitle={subtitle}
+            cornerBackButtonTitle={cornerBackButtonTitle}
+            cornerBackButtonClick={cornerBackButtonClick}
+            confirmButtonText={confirmButtonText}
+            confirmButtonClick={confirmButtonClick}
+            showCornerBackButton={showCornerBackButton}
+            headerTitleLeft={true}
+            subtitleSmallMargin={true}
+            width={controls ? DIALOG_SIZES.largePlus.width : null}
+        >
+            <CoinPicker
+                mode={mode}
+                allCoins={allCoins}
+                initiallyEnabledCoinsList={initiallyEnabledCoinsList}
+                handleClick={ticker => handleCoinSelection(ticker)}
+                triggerToReloadData={triggerToReloadData}
+                search={search}
+                searchAdaptive={searchAdaptive}
+                loadCoinsAndContent={loadCoinsAndContent}
+                showRequestMissingCoinsInfoMessage={showRequestMissingCoinsInfoMessage}
+                coinToIconPaths={coinToIconPaths}
+                supportUrl={supportUrl}
+                texts={texts}
+            />
+        </DialogStep>
+    );
+};