@rabbitio/ui-kit 1.0.0-beta.9 → 1.0.0-beta.91

package/src/ui-kit/assets/wrappedImages/determinedError.jsx

@@ -0,0 +1,118 @@
+import React from "react";
+
+// Originally: determined-error.svg
+export default () => (
+    <svg
+        id="Group_5"
+        data-name="Group 5"
+        xmlns="http://www.w3.org/2000/svg"
+        width="173"
+        height="173"
+        viewBox="0 0 173 173"
+    >
+        <defs>
+            <clipPath id="clip-path">
+                <circle id="Oval" cx="86.5" cy="86.5" r="86.5" fill="#ffa799" />
+            </clipPath>
+        </defs>
+        <g id="Group_2" data-name="Group 2">
+            <circle id="Oval-2" data-name="Oval" cx="86.5" cy="86.5" r="86.5" fill="#ffa799" />
+            <g id="Group_2-2" data-name="Group 2" clip-path="url(#clip-path)">
+                <g id="Group_232" data-name="Group 232" transform="translate(-5 -4)">
+                    <rect
+                        id="Rectangle"
+                        width="30"
+                        height="172"
+                        transform="translate(122.205 0.582) rotate(45)"
+                        fill="#fff"
+                        opacity="0.3"
+                    />
+                    <rect
+                        id="Rectangle-2"
+                        data-name="Rectangle"
+                        width="30"
+                        height="172"
+                        transform="translate(161.205 36.582) rotate(45)"
+                        fill="#fff"
+                        opacity="0.3"
+                    />
+                    <path
+                        id="Rectangle-3"
+                        data-name="Rectangle"
+                        d="M12,0H146a0,0,0,0,1,0,0V128a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V12A12,12,0,0,1,12,0Z"
+                        transform="translate(34 53)"
+                        fill="#f18573"
+                    />
+                    <path
+                        id="Rectangle-4"
+                        data-name="Rectangle"
+                        d="M4,0H97a4,4,0,0,1,4,4V92a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V4A4,4,0,0,1,4,0Z"
+                        transform="translate(43 91)"
+                        fill="#e95d44"
+                        opacity="0.5"
+                    />
+                    <path
+                        id="Rectangle-5"
+                        data-name="Rectangle"
+                        d="M12,0H146a0,0,0,0,1,0,0V28a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V12A12,12,0,0,1,12,0Z"
+                        transform="translate(34 53)"
+                        fill="#eb5e49"
+                    />
+                    <circle
+                        id="Oval-3"
+                        data-name="Oval"
+                        cx="4"
+                        cy="4"
+                        r="4"
+                        transform="translate(44 63)"
+                        fill="#ffa191"
+                    />
+                    <circle
+                        id="Oval-4"
+                        data-name="Oval"
+                        cx="4"
+                        cy="4"
+                        r="4"
+                        transform="translate(57 63)"
+                        fill="#ffa191"
+                    />
+                    <circle
+                        id="Oval-5"
+                        data-name="Oval"
+                        cx="4"
+                        cy="4"
+                        r="4"
+                        transform="translate(70 63)"
+                        fill="#ffa191"
+                    />
+                </g>
+            </g>
+        </g>
+        <g id="Group_3" data-name="Group 3" transform="translate(63 105)">
+            <g id="Group_4" data-name="Group 4">
+                <path
+                    id="Path"
+                    d="M24.75,0A24.745,24.745,0,1,0,39.078,4.567"
+                    fill="none"
+                    stroke="#fff"
+                    stroke-linecap="round"
+                    stroke-miterlimit="10"
+                    stroke-width="3.6"
+                />
+                <text
+                    id="_"
+                    data-name="!"
+                    transform="translate(25.2 38.8)"
+                    fill="#fff"
+                    font-size="34.2"
+                    font-family="SegoeUI, Segoe UI"
+                    letter-spacing="0.023em"
+                >
+                    <tspan x="-4.859" y="0">
+                        !
+                    </tspan>
+                </text>
+            </g>
+        </g>
+    </svg>
+);

package/src/ui-kit/assets/wrappedImages/failedValidationIcon.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+export default () => (
+    <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/ui-kit/assets/wrappedImages/infoIcon.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export default () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+            fill="#8C9CBF"
+        />
+        <path
+            d="M11.6001 9.65598H13.6001V17.48H11.6001V9.65598ZM13.6961 6.02398V7.99198H11.4881V6.02398H13.6961Z"
+            fill="white"
+        />
+    </svg>
+);

package/src/ui-kit/assets/wrappedImages/messageIcon.jsx

@@ -0,0 +1,87 @@
+import React from "react";
+
+export default () => (
+    <svg width="130" height="130" viewBox="0 0 130 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M65 130C100.899 130 130 100.899 130 65C130 29.1015 100.899 0 65 0C29.1015 0 0 29.1015 0 65C0 100.899 29.1015 130 65 130Z"
+            fill="#2294F0"
+        />
+        <mask id="mask0" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="130" height="130">
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M65 130C100.899 130 130 100.899 130 65C130 29.1015 100.899 0 65 0C29.1015 0 0 29.1015 0 65C0 100.899 29.1015 130 65 130Z"
+                fill="white"
+            />
+        </mask>
+        <g mask="url(#mask0)">
+            <rect
+                opacity="0.3"
+                x="3.25"
+                y="150.776"
+                width="227.136"
+                height="25.2373"
+                transform="rotate(-45 3.25 150.776)"
+                fill="white"
+            />
+            <rect
+                opacity="0.3"
+                x="-48.4546"
+                y="126.52"
+                width="227.136"
+                height="25.2373"
+                transform="rotate(-45 -48.4546 126.52)"
+                fill="white"
+            />
+            <rect x="27.75" y="29.5" width="74.5" height="81.5" rx="12" fill="white" />
+            <path
+                d="M27.75 41.5C27.75 34.8726 33.1226 29.5 39.75 29.5H90.25C96.8774 29.5 102.25 34.8726 102.25 41.5V118C102.25 124.627 96.8774 130 90.25 130H39.75C33.1226 130 27.75 124.627 27.75 118V41.5Z"
+                fill="white"
+            />
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M51.5 63.5C58.1274 63.5 63.5 58.1274 63.5 51.5C63.5 44.8726 58.1274 39.5 51.5 39.5C44.8726 39.5 39.5 44.8726 39.5 51.5C39.5 58.1274 44.8726 63.5 51.5 63.5Z"
+                fill="#2294F0"
+            />
+            <path
+                d="M50.072 49.088H52.03V54.5H50.072V49.088ZM52.074 46.382V48.153H50.028V46.382H52.074Z"
+                fill="white"
+            />
+            <path
+                opacity="0.2"
+                d="M41 74.5H63"
+                stroke="#2294F0"
+                stroke-width="4"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+            <path
+                opacity="0.2"
+                d="M41 84.6157H84.1426"
+                stroke="#2294F0"
+                stroke-width="4"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+            <path
+                opacity="0.2"
+                d="M41 94.7314H84.1426"
+                stroke="#2294F0"
+                stroke-width="4"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+            <path
+                opacity="0.2"
+                d="M41 104.731H84.1426"
+                stroke="#2294F0"
+                stroke-width="4"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+        </g>
+    </svg>
+);

package/src/ui-kit/assets/wrappedImages/noticeQuestionIcon.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+export default () => (
+    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="0.5" y="0.25" width="16" height="16" rx="8" fill="#DAF1FE" />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M8.44968 9.62287C8.0213 9.62287 7.67264 9.24008 7.815 8.83604C7.84547 8.74956 7.87999 8.67275 7.91856 8.61686C8.10216 8.35084 8.37005 8.06047 8.72224 7.74574C8.99201 7.50594 9.19246 7.298 9.3236 7.1219C9.45474 6.9458 9.52031 6.74535 9.52031 6.52054C9.52031 6.20581 9.39292 5.95103 9.13814 5.7562C8.88335 5.56137 8.5424 5.46395 8.11527 5.46395C7.62404 5.46395 7.05412 5.78283 6.68203 6.03347C6.43716 6.19842 6.11362 6.21939 5.86602 6.05857C5.51562 5.83099 5.45796 5.34121 5.77515 5.06925C5.99176 4.88352 6.23474 4.69937 6.44046 4.60407C6.95003 4.36802 7.5495 4.25 8.23891 4.25C9.07819 4.25 9.74698 4.43172 10.2453 4.79516C10.7436 5.15859 10.9928 5.65878 10.9928 6.29574C10.9928 6.60297 10.9422 6.87274 10.841 7.10504C10.7399 7.33734 10.6181 7.53404 10.4757 7.69516C10.3334 7.85627 10.146 8.04173 9.91372 8.25155C9.62896 8.50633 9.41727 8.73114 9.27864 8.92597C9.25936 8.95306 9.24143 8.98609 9.22483 9.02289C9.0785 9.34733 8.8056 9.62287 8.44968 9.62287Z"
+            fill="url(#paint1_linear)"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M8.3626 12.3094C8.10033 12.3094 7.88489 12.2251 7.71629 12.0565C7.54768 11.8879 7.46338 11.6799 7.46338 11.4326C7.46338 11.1854 7.54768 10.9793 7.71629 10.8144C7.88489 10.6496 8.10033 10.5671 8.3626 10.5671C8.61739 10.5671 8.82908 10.6496 8.99768 10.8144C9.16629 10.9793 9.25059 11.1854 9.25059 11.4326C9.25059 11.6799 9.16629 11.8879 8.99768 12.0565C8.82908 12.2251 8.61739 12.3094 8.3626 12.3094Z"
+            fill="url(#paint2_linear)"
+        />
+        <defs>
+            <linearGradient
+                id="paint0_linear"
+                x1="25.862"
+                y1="18.5044"
+                x2="12.7031"
+                y2="-2.23444"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stop-color="#FCE2F0" />
+                <stop offset="1" stop-color="#F7EAFD" />
+            </linearGradient>
+            <linearGradient
+                id="paint1_linear"
+                x1="14.2067"
+                y1="10.3799"
+                x2="9.83017"
+                y2="3.3283"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stop-color="#55E7D9" />
+                <stop offset="1" stop-color="#54B4FF" />
+            </linearGradient>
+            <linearGradient
+                id="paint2_linear"
+                x1="10.2963"
+                y1="12.5549"
+                x2="8.87929"
+                y2="10.2639"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stop-color="#55E7D9" />
+                <stop offset="1" stop-color="#54B4FF" />
+            </linearGradient>
+        </defs>
+    </svg>
+);

package/src/ui-kit/assets/wrappedImages/successfulValidationIcon.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+export default () => (
+    <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/ui-kit/assets/wrappedImages/supportDialogImage.jsx

@@ -0,0 +1,61 @@
+import React from "react";
+
+export default () => (
+    <svg width="130" height="130" viewBox="0 0 130 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M65 130C100.899 130 130 100.899 130 65C130 29.1015 100.899 0 65 0C29.1015 0 0 29.1015 0 65C0 100.899 29.1015 130 65 130Z"
+            fill="#AFEBC3"
+        />
+        <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="130" height="130">
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M65 130C100.899 130 130 100.899 130 65C130 29.1015 100.899 0 65 0C29.1015 0 0 29.1015 0 65C0 100.899 29.1015 130 65 130Z"
+                fill="white"
+            />
+        </mask>
+        <g mask="url(#mask0)">
+            <rect
+                opacity="0.3"
+                x="3.25"
+                y="150.776"
+                width="227.136"
+                height="25.2373"
+                transform="rotate(-45 3.25 150.776)"
+                fill="white"
+            />
+            <rect
+                opacity="0.3"
+                x="-48.4545"
+                y="126.52"
+                width="227.136"
+                height="25.2373"
+                transform="rotate(-45 -48.4545 126.52)"
+                fill="white"
+            />
+            <path
+                d="M9.69092 69.153C9.69092 66.0864 11.2523 63.2309 13.8339 61.576L55.8257 34.6583C61.4168 31.0742 68.5832 31.0742 74.1743 34.6583L116.166 61.576C118.748 63.2309 120.309 66.0864 120.309 69.153V126.495C120.309 131.466 116.28 135.495 111.309 135.495H18.6909C13.7204 135.495 9.69092 131.466 9.69092 126.495V69.153Z"
+                fill="#14A957"
+            />
+            <path d="M30.9045 51.8818H97.9136V117.118H30.9045V51.8818Z" fill="white" />
+            <path
+                opacity="0.1"
+                d="M63.8182 107.167C76.8722 107.167 87.4545 96.5849 87.4545 83.5308C87.4545 70.4768 76.8722 59.8945 63.8182 59.8945C50.7642 59.8945 40.1818 70.4768 40.1818 83.5308C40.1818 96.5849 50.7642 107.167 63.8182 107.167Z"
+                fill="#24BE6A"
+            />
+            <path
+                d="M58.2093 83.4849L63.0246 88.3002L71.3036 79.047"
+                stroke="#24BE6A"
+                stroke-width="3.76358"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+            <path
+                d="M9.69092 70.2531C9.69092 68.672 11.4391 67.7161 12.7703 68.5694L65 102.05L117.23 68.5694C118.561 67.7161 120.309 68.672 120.309 70.2531V128.859C120.309 133.83 116.28 137.859 111.309 137.859H18.6909C13.7204 137.859 9.69092 133.83 9.69092 128.859V70.2531Z"
+                fill="#24BE6A"
+            />
+        </g>
+    </svg>
+);

package/src/ui-kit/assets/wrappedImages/walletIcon.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+export default () => (
+    <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/ui-kit/components/atoms/AssetIcon/AssetIcon.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./asset-icon.module.scss";
+
+/**
+ * AssetIcon component to display an icon for an asset.
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} props.assetIconSrc - The source URL for the asset icon.
+ * @param {string} [props.assetIconProtocolSrc=null] - The source URL for the asset icon that is base for this asset (e.g. ETH for USDT ERC20).
+ * @param {string} [props.fallbackSrc=null] - The fallback source URL in case the main source fails to load.
+ * @param {boolean} [props.small=false] - Whether to display a smaller version of the icon.
+ */
+export const AssetIcon = ({ assetIconSrc, assetIconProtocolSrc = null, fallbackSrc = null, small = false }) => {
+    const handleFailedLoad = e => {
+        e.target.onerror = null;
+        e.target.src = fallbackSrc;
+    };
+
+    return (
+        <div className={s["asset-icon"] + (small ? " " + s["small"] : "")}>
+            <img
+                src={assetIconSrc}
+                className={s["asset-icon-primary"] + (small ? " " + s["small"] : "")}
+                alt={" "}
+                onError={handleFailedLoad}
+                loading="lazy"
+            />
+            {assetIconProtocolSrc ? (
+                <img
+                    src={assetIconProtocolSrc}
+                    className={s["asset-icon-secondary"] + (small ? " " + s["small"] : "")}
+                    alt={" "}
+                    onError={handleFailedLoad}
+                    loading="lazy"
+                />
+            ) : (
+                ""
+            )}
+        </div>
+    );
+};
+
+AssetIcon.propTypes = {
+    assetIconSrc: PropTypes.string.isRequired,
+    assetIconProtocolSrc: PropTypes.string,
+    fallbackSrc: PropTypes.string,
+    small: PropTypes.bool,
+};
+
+AssetIcon.defaultProps = {
+    assetIconProtocolSrc: null,
+    fallbackSrc: null,
+    small: false,
+};

package/src/{components → ui-kit/components}/atoms/AssetIcon/asset-icon.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@use "../../../assets/styles/index" as *;
 
 .asset-icon {
     width: 34px;

package/src/ui-kit/components/atoms/AssetSelection/AssetSelection.jsx

@@ -0,0 +1,68 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./asset-selection.module.scss";
+import ArrowIcon from "../../../assets/wrappedImages/arrowIcon.jsx";
+
+import { AssetIcon } from "../AssetIcon/AssetIcon.jsx";
+
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+
+/**
+ * Component-button for triggering selecting an asset.
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {Function} props.handleClick - The function to call when the component is clicked.
+ * @param {boolean} props.disabled - If true, disables click functionality.
+ * @param {string} props.assetIconSrc - The source URL for the asset icon.
+ * @param {string} [props.protocolName] - The name of the protocol, if any.
+ * @param {string} [props.assetIconProtocolSrc] - The source URL for the asset protocol icon.
+ * @param {string} [props.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/ui-kit/components/atoms/AssetSelection/asset-selection.module.scss

@@ -0,0 +1,56 @@
+@use "../../../assets/styles/index" as *;
+
+.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;
+        text-wrap: nowrap;
+    }
+
+    &-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/ui-kit/components/atoms/BackgroundTitle/BackgroundTitle.jsx

@@ -0,0 +1,34 @@
+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,
+};