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

package/src/components/organisms/SwapForm/swap-form.module.scss

@@ -0,0 +1,120 @@
+@import "../../../../styles/index";
+
+// TODO: [dev] rename to .swap-dialog
+.swap-dialog-form {
+    width: 100%;
+
+    &-inputs {
+        position: relative;
+        z-index: 2;
+
+        &-separator {
+            height: 4px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            user-select: none;
+
+            img {
+                margin: -13px 0;
+            }
+
+            &:not(.disabled) {
+                @extend %hover-state;
+            }
+
+            &.disabled {
+                opacity: 0.7;
+            }
+        }
+    }
+
+    &-information-field {
+        z-index: 1;
+        background-color: SolidColor("lightsmoke");
+        margin-top: 4px;
+        border-radius: 0 0 8px 8px;
+        padding: 10px 20px;
+        position: relative;
+        text-align: left;
+
+        .semi-transparent {
+            opacity: 0.5;
+        }
+
+        p {
+            color: SolidColor("grey");
+
+            .interactable {
+                text-decoration: underline;
+                cursor: pointer;
+                transition: 0.3s;
+
+                @media (hover: hover) {
+                    &:hover {
+                        opacity: 0.7;
+                        transition: 0s;
+                    }
+                }
+
+                &:active {
+                    text-decoration: none;
+                }
+            }
+
+            .red {
+                color: SolidColor("red");
+            }
+        }
+
+        &::before {
+            z-index: 0;
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: calc(100% + 4px);
+
+            width: 100%;
+            height: 20px;
+            border-radius: 8px;
+            background-color: transparent;
+            box-shadow: 0px 0px 0px 4px $white, 0px 10px 0px 0px SolidColor("lightsmoke");
+        }
+    }
+
+    &-validation-text {
+        margin-top: Margin("5");
+    }
+
+    &-button-container {
+        &-consent-text {
+            text-align: end;
+            color: SolidColor("grey");
+            font-size: 13px;
+            font-style: italic;
+
+            @media (max-width: $phone-width) {
+                text-align: center;
+            }
+
+            &-link {
+                color: SolidColor("grey");
+                text-decoration: underline;
+
+                &:active {
+                    text-decoration: none;
+                }
+            }
+        }
+
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        margin-top: Margin("10");
+        gap: Margin("3");
+
+        @media (max-width: $phone-width) {
+            flex-direction: column-reverse;
+        }
+    }
+}

package/src/components/utils/textUtils.js

@@ -0,0 +1,18 @@
+import copy from "clipboard-copy";
+
+import { improveAndRethrow } from "../../common/errorUtils.js";
+
+/**
+ * Copies given text to clipboard inside browser.
+ *
+ * @param text - text to be copied
+ */
+export function copyBrowserTextToClipboard(text) {
+    try {
+        if (!copy(text)) {
+            throw new Error("Failed to execute copy command.");
+        }
+    } catch (e) {
+        improveAndRethrow(e, "saveTextToFile");
+    }
+}

package/src/index.js

@@ -13,11 +13,21 @@ export {
 export { Validation } from "./components/atoms/Validation/Validation.jsx";
 export { Dialog } from "./components/organisms/Dialog/Dialog.jsx";
 export { DialogStep } from "./components/organisms/Dialog/DialogStep/DialogStep.jsx";
+export { AssetSelection } from "./components/atoms/AssetSelection/AssetSelection.jsx";
+export {
+    Tooltip,
+    TOOLTIP_POSITIONS,
+} from "./components/atoms/Tooltip/Tooltip.jsx";
+export { NoticeIcon } from "./components/atoms/NoticeIcon/NoticeIcon.jsx";
+export { TitleBox } from "./components/atoms/TitleBox/TitleBox.jsx";
+export { AmountInput } from "./components/molecules/AmountInput/AmountInput.jsx";
+export { SwapForm } from "./components/organisms/SwapForm/SwapForm.jsx";
 
 export { useCallHandlingErrors } from "./components/hooks/useCallHandlingErrors.js";
 export { useReferredState } from "./components/hooks/useReferredState.js";
 export { handleClickOutside } from "./components/utils/uiUtils.js";
 export { InputValuesProviders } from "./components/utils/inputValueProviders.js";
+export { copyBrowserTextToClipboard } from "./components/utils/textUtils.js";
 
 export { saveQueryParameterAndValues } from "./components/utils/urlQueryUtils.js";
 export { removeQueryParameterAndValues } from "./components/utils/urlQueryUtils.js";
@@ -44,7 +54,7 @@ export { AxiosAdapter } from "./common/adapters/axiosAdapter.js";
 export { EmailsApi } from "./common/utils/emailAPI.js";
 export { IpAddressProvider } from "./common/external-apis/ipAddressProviders.js";
 
-// Robust data retriever service and related APIs
+// Robust data retriever service and related APIs (to be extracted later to dedicated lib)
 export { CacheAndConcurrentRequestsResolver } from "./robustExteranlApiCallerService/cacheAndConcurrentRequestsResolver.js";
 export { CachedRobustExternalApiCallerService } from "./robustExteranlApiCallerService/cachedRobustExternalApiCallerService.js";
 export { CancelProcessing } from "./robustExteranlApiCallerService/cancelProcessing.js";

package/styles/index.scss

@@ -3,32 +3,33 @@
 @import "placeholder";
 @import "_mixins";
 
+// TODO: [feature, high] Uncomment fonts after adding a new packaging tool. task_id=7375fa84ccab4d66b9e3a177a41f7e26
 @font-face {
-    src: url("fonts/NunitoSans-ExtraBold.ttf");
-    font-family: "NunitoSans";
+    //src: url("fonts/NunitoSans-ExtraBold.ttf");
+    //font-family: "NunitoSans";
     font-weight: $extra-bold;
 }
 
 @font-face {
-    src: url("fonts/NunitoSans-Bold.ttf");
-    font-family: "NunitoSans";
+    //src: url("fonts/NunitoSans-Bold.ttf");
+    //font-family: "NunitoSans";
     font-weight: $bold;
 }
 
 @font-face {
-    src: url("fonts/NunitoSans-SemiBold.ttf");
-    font-family: "NunitoSans";
+    //src: url("fonts/NunitoSans-SemiBold.ttf");
+    //font-family: "NunitoSans";
     font-weight: $semi-bold;
 }
 
 @font-face {
-    src: url("fonts/NunitoSans-Regular.ttf");
-    font-family: "NunitoSans";
+    //src: url("fonts/NunitoSans-Regular.ttf");
+    //font-family: "NunitoSans";
     font-weight: $medium;
 }
 
 @font-face {
-    src: url("fonts/NunitoSans-Light.ttf");
-    font-family: "NunitoSans";
+    //src: url("fonts/NunitoSans-Light.ttf");
+    //font-family: "NunitoSans";
     font-weight: $regular;
 }