@rabbitio/ui-kit 1.0.0-beta.83 → 1.0.0-beta.84

package/src/ui-kit/components/organisms/Dialog/DialogStep/DialogStep.jsx

@@ -33,9 +33,11 @@ export const DIALOG_STEP_CLASS = "dialog-step";
  * @param {string} props.subtitle - Step subtitle.
  * @param {string} props.backButtonText - Secondary button title.
  * @param {function} props.backButtonClick - Secondary button click handler.
+ * @param {boolean} props.backButtonEnabled - Determines whether the secondary button is enabled.
  * @param {string} props.backButtonTo - Secondary button link.
  * @param {string} props.confirmButtonText - Primary button title.
  * @param {function} props.confirmButtonClick - Primary button click handler.
+ * @param {boolean} props.confirmButtonEnabled - Determines whether the primary button is enabled.
  * @param {string} props.confirmButtonLink - Primary button link.
  * @param {boolean} props.primaryButtonLoader - Enable loader for the primary button.
  * @param {boolean} props.fixedButtons - Enable fixed buttons in the bottom for mobile devices.
@@ -72,9 +74,11 @@ export const DialogStep = ({
     subtitle = "",
     backButtonText = "",
     backButtonClick = () => {},
+    backButtonEnabled = true,
     backButtonTo = "",
     confirmButtonText = "",
     confirmButtonClick = () => {},
+    confirmButtonEnabled = true,
     confirmButtonLink = "",
     primaryButtonLoader = false,
     fixedButtons = false,
@@ -206,11 +210,13 @@ export const DialogStep = ({
                     {
                         primaryButtonTitle: confirmButtonText,
                         primaryButtonOnClick: resetButtonLoader => confirmButtonClick(resetButtonLoader),
+                        primaryButtonEnabled: confirmButtonEnabled,
                         primaryButtonLoader: primaryButtonLoader,
                         primaryButtonTo: confirmButtonLink,
                         primaryButtonSetClickTrigger: setClickTrigger,
                         secondaryButtonTitle: backButtonText,
                         secondaryButtonOnClick: backButtonClick,
+                        secondaryButtonEnabled: backButtonEnabled,
                         secondaryButtonTo: backButtonTo,
                         fixedButtonsEnabled: fixedButtons,
                     },
@@ -243,11 +249,13 @@ export const DialogStep = ({
                 {
                     primaryButtonTitle: confirmButtonText,
                     primaryButtonOnClick: resetButtonLoader => confirmButtonClick(resetButtonLoader),
+                    primaryButtonEnabled: confirmButtonEnabled,
                     primaryButtonLoader: primaryButtonLoader,
                     primaryButtonTo: confirmButtonLink,
                     primaryButtonSetClickTrigger: setClickTrigger,
                     secondaryButtonTitle: backButtonText,
                     secondaryButtonOnClick: backButtonClick,
+                    secondaryButtonEnabled: backButtonEnabled,
                     secondaryButtonTo: backButtonTo,
                     fixedButtonsEnabled: fixedButtons,
                 },
@@ -258,11 +266,13 @@ export const DialogStep = ({
     }, [
         confirmButtonText,
         confirmButtonClick,
+        confirmButtonEnabled,
         primaryButtonLoader,
         confirmButtonLink,
         setClickTrigger,
         backButtonText,
         backButtonClick,
+        backButtonEnabled,
         backButtonTo,
         currentStep,
     ]);
@@ -441,11 +451,13 @@ export const DialogStep = ({
                                 <DialogButtons
                                     primaryButtonTitle={confirmButtonText}
                                     primaryButtonOnClick={resetButtonLoader => confirmButtonClick(resetButtonLoader)}
+                                    primaryButtonEnabled={confirmButtonEnabled}
                                     primaryButtonLoader={primaryButtonLoader}
                                     primaryButtonTo={confirmButtonLink}
                                     primaryButtonSetClickTrigger={setClickTrigger}
                                     secondaryButtonTitle={backButtonText}
                                     secondaryButtonOnClick={backButtonClick}
+                                    secondaryButtonEnabled={backButtonEnabled}
                                     secondaryButtonTo={backButtonTo}
                                     secondaryButtonBig={isSecondaryButtonBig}
                                     withBackgroundImage={!!backgroundImage || !!backgroundImageMobile}
@@ -475,9 +487,11 @@ DialogStep.propTypes = {
     subtitle: PropTypes.string,
     backButtonText: PropTypes.string,
     backButtonClick: PropTypes.func,
+    backButtonEnabled: PropTypes.bool,
     backButtonTo: PropTypes.string,
     confirmButtonText: PropTypes.string,
     confirmButtonClick: PropTypes.func,
+    confirmButtonEnabled: PropTypes.bool,
     confirmButtonLink: PropTypes.string,
     primaryButtonLoader: PropTypes.bool,
     fixedButtons: PropTypes.bool,
@@ -512,9 +526,11 @@ DialogStep.defaultProps = {
     subtitle: "",
     backButtonText: "",
     backButtonClick: () => {},
+    backButtonEnabled: true,
     backButtonTo: "",
     confirmButtonText: "",
     confirmButtonClick: () => {},
+    confirmButtonEnabled: true,
     confirmButtonLink: "",
     primaryButtonLoader: false,
     fixedButtons: false,

package/src/ui-kit/components/organisms/SwapForm/SwapForm.jsx

@@ -480,7 +480,7 @@ export const SwapForm = ({
         );
     };
 
-    const requestDataRefresh = (amount, immediately = false, isSwapAll = false) => {
+    const requestDataRefresh = (amount, immediately = false, isSwapAll = false, ignoreEmptyAmount = false) => {
         try {
             clearTimeout(dataUpdateTimeoutId.current);
 
@@ -489,11 +489,11 @@ export const SwapForm = ({
                 return;
             }
 
-            if (!amount) {
+            if (!amount && !ignoreEmptyAmount) {
                 return;
             }
 
-            if (BigNumber(amount).eq("0")) {
+            if (BigNumber(amount).eq("0") || amount == null || amount === "") {
                 if (immediately) {
                     loadMinimalAmountAndSwapRate(true);
                 } else {
@@ -663,7 +663,12 @@ export const SwapForm = ({
 
                 const swapData = await retrieveInitialSwapData(sendingAssetTicker, receivingAssetTicker);
 
-                if (sendAssetAmount.current != null && !isCalledForClearedInput) {
+                if (
+                    (isFixedRate.current && isLastEditedReceiving.current
+                        ? receiveAssetAmount.current != null
+                        : sendAssetAmount.current != null) &&
+                    !isCalledForClearedInput
+                ) {
                     // Means user already entered amount after starting the form initialization
                     return;
                 }
@@ -720,7 +725,12 @@ export const SwapForm = ({
 
     const handleRateModeChanged = isFixed => {
         setIsFixedRate(isFixed);
-        requestDataRefresh(isLastEditedReceiving.current ? receiveAssetAmount.current : sendAssetAmount.current, true);
+        requestDataRefresh(
+            isLastEditedReceiving.current ? receiveAssetAmount.current : sendAssetAmount.current,
+            true,
+            null,
+            true
+        );
     };
 
     useEffect(() => {
@@ -741,9 +751,11 @@ export const SwapForm = ({
     useEffect(() => {
         if (!sendingAssetTicker || !receivingAssetTicker) return;
 
-        const isCurrentAmountNotZero = sendAssetAmount.current && !BigNumber("0").eq(sendAssetAmount.current);
+        const currentAmount = isLastEditedReceiving.current ? receiveAssetAmount.current : sendAssetAmount.current;
+
+        const isCurrentAmountNotZero = currentAmount && !BigNumber("0").eq(currentAmount);
         if (isCurrentAmountNotZero) {
-            loadFullEstimation(isLastEditedReceiving.current ? receiveAssetAmount.current : sendAssetAmount.current);
+            loadFullEstimation(currentAmount);
         } else {
             loadMinimalAmountAndSwapRate(true);
         }
@@ -868,7 +880,10 @@ export const SwapForm = ({
     }, [updateSendInputTo, updateReceiveInputTo]);
 
     useEffect(() => {
-        if (swapRate != null && sendAssetAmount.current != null) {
+        if (
+            swapRate != null &&
+            (isLastEditedReceiving.current ? receiveAssetAmount.current : sendAssetAmount.current) != null
+        ) {
             if (isLastEditedReceiving.current) {
                 setUpdateSendInputTo(
                     AmountUtils.trim(BigNumber(receiveAssetAmount.current).div(swapRate), sendingAssetDecimalCount)
@@ -969,7 +984,11 @@ export const SwapForm = ({
                         ref={fromAssetSelectionButtonRef}
                         isLoading={isLastEditedReceiving.current ? isLoading.current : false}
                         cryptoAssetToFiatRate={sendingAssetToFiatRate}
-                        fiatCurrencyCode={formHasFiat ? fiatCurrencyCode : null}
+                        fiatCurrencyCode={
+                            formHasFiat && (isLoading.current || sendingAssetToFiatRate != null)
+                                ? fiatCurrencyCode
+                                : null
+                        }
                         fiatCurrencyDecimals={fiatCurrencyDecimals}
                         balanceLoaderText={translations.input.balanceLoaderText}
                         fiatInputPlaceholderText={translations.input.fiatPlaceholder}
@@ -1000,7 +1019,7 @@ export const SwapForm = ({
                         assetIconProtocolSrc={receivingAssetProtocolIconSrc}
                         fallbackAssetIconSrc={fallBackAssetIconSrc}
                         disabled={isSwapAll.current || sendingAssetTicker === null || receivingAssetTicker === null}
-                        locked={!formHasBalance && !isFixedRate.current}
+                        locked={!formHasBalance}
                         handleCoinAmountChange={handleReceiveAssetAmountChange}
                         handleChangeAssetClick={handleChangeReceivingAssetClick}
                         updateAssetInputTo={updateReceiveInputTo}
@@ -1013,7 +1032,11 @@ export const SwapForm = ({
                         ref={toAssetSelectionButtonRef}
                         isLoading={isLastEditedReceiving.current ? false : isLoading.current}
                         cryptoAssetToFiatRate={receivingAssetToFiatRate}
-                        fiatCurrencyCode={formHasFiat ? fiatCurrencyCode : null}
+                        fiatCurrencyCode={
+                            formHasFiat && (isLoading.current || receivingAssetToFiatRate != null)
+                                ? fiatCurrencyCode
+                                : null
+                        }
                         fiatCurrencyDecimals={fiatCurrencyDecimals}
                         balanceLoaderText={translations.input.balanceLoaderText}
                         fiatInputPlaceholderText={translations.input.fiatPlaceholder}
@@ -1108,7 +1131,7 @@ export const SwapForm = ({
                                 </>
                             )
                         ) : isLoading.current ? (
-                            sendAssetAmount.current || isSwapAll.current ? (
+                            sendAssetAmount.current || receiveAssetAmount.current || isSwapAll.current ? (
                                 translations.informationBlock[
                                     formHasBalance ? "calculatingNetworkFee" : "calculatingSwapRates"
                                 ]

package/src/ui-kit/components/organisms/WaitlistSubscription/WaitlistSubscription.jsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+import { logErrorOrOutputToConsole } from "../../../../common-apis/errorUtils";
+import { Coin } from "../../../../common-apis/models/coin";
+
+import { ColoredNotice } from "../../molecules/ColoredNotice/ColoredNotice";
+import { Dialog } from "../Dialog/Dialog";
+import { DialogStep } from "../Dialog/DialogStep/DialogStep";
+import { Input } from "../../atoms/Input/Input";
+import { TitleBox } from "../../atoms/TitleBox/TitleBox";
+import { Validation } from "../../atoms/Validation/Validation";
+
+import messageIcon from "../../../assets/wrappedImages/messageIcon";
+import supportDialogImage from "../../../assets/wrappedImages/supportDialogImage";
+
+/**
+ * Saves a user's subscription to receive notifications about a specific coin.
+ * This function sends an email to subscribe the user to notifications for the specified coin.
+ *
+ * @function
+ * @name saveSubscription
+ * @param {Coin} coin - The coin object containing information about the coin, including its ticker symbol.
+ * @param {string} address - The email address of the user who wishes to subscribe.
+ * @returns {Promise<boolean>} A promise that resolves to `true` if the subscription email was sent successfully, or `false` if an error occurred during the process.
+ */
+
+/**
+ * WaitlistSubscription component handles user subscription to a waitlist for coin notifications.
+ * It displays a notice with a button to open a dialog where the user can enter their email to subscribe.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {Coin} props.coin - The coin object containing information about the coin.
+ * @param {Object} props.translations - The text translations for the component.
+ * @param {saveSubscription} props.saveSubscription - Function to handle/save the subscription.
+ * @returns {JSX.Element} The WaitlistSubscription component.
+ */
+export const WaitlistSubscription = ({ coin, translations, saveSubscription }) => {
+    const [controls, initControls] = useState();
+    const [showDialog, setShowDialog] = useState(false);
+    const [inputValue, setInputValue] = useState("");
+    const [isEmailValid, setIsEmailValid] = useState(false);
+    const [errorEncountered, setErrorEncountered] = useState(false);
+
+    const defaultTranslations = {
+        coloredNotice: {
+            text: "This is a pre-listed coin, meaning that the swap is not yet available. As soon as this coin allows exchanges, it will be automatically enabled. If you want to get a notification as soon as this coin becomes available for swap - sign up for the waitlist below!",
+            buttonTitle: "Subscribe for updates",
+        },
+        signUpStep: {
+            title: coin.latinName + " (" + coin.ticker + ") listing notification",
+            subtitle:
+                "To be notified as soon as " +
+                coin.latinName +
+                " becomes available for swaps, please provide your email address. We’ll send you a single notification when it’s listed.",
+            actionButtonTitle: "Subscribe",
+            inputTitle: "Your email address:",
+            error: "Something went wrong. Please try again later.",
+        },
+        successStep: {
+            title: "Subscribed successfully!",
+            subtitle:
+                "We’ll notify you as soon as " +
+                coin.latinName +
+                " becomes available for swaps. Keep an eye on your inbox for the update.",
+            actionButtonTitle: "Close",
+        },
+    };
+
+    const t = translations ?? defaultTranslations;
+
+    const STEPS = {
+        signUp: "signUp",
+        success: "success",
+    };
+
+    const subscribe = async resetButtonLoader => {
+        try {
+            setErrorEncountered(false);
+            const result = await saveSubscription(coin, inputValue);
+            if (result) {
+                controls?.goToStep(STEPS.success);
+            } else {
+                setErrorEncountered(true);
+            }
+            resetButtonLoader();
+        } catch (e) {
+            resetButtonLoader();
+            logErrorOrOutputToConsole(e);
+            setShowDialog(false);
+        }
+    };
+
+    const openDialog = () => {
+        setErrorEncountered(false);
+        setInputValue("");
+        setIsEmailValid(false);
+        controls?.toFirstStep(false);
+        setShowDialog(true);
+    };
+
+    useEffect(() => {
+        setIsEmailValid(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(inputValue));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputValue]);
+
+    return (
+        <>
+            <Dialog
+                initControls={controls => initControls(controls)}
+                showDialog={showDialog}
+                onClose={() => setShowDialog(false)}
+            >
+                <DialogStep
+                    stepName={STEPS.signUp}
+                    controls={controls}
+                    title={t.signUpStep.title}
+                    subtitle={t.signUpStep.subtitle}
+                    confirmButtonClick={subscribe}
+                    confirmButtonEnabled={isEmailValid}
+                    confirmButtonText={t.signUpStep.actionButtonTitle}
+                    primaryButtonLoader={true}
+                    subtitleSmallMargin
+                    showBackgroundTitle={false}
+                    ImageRaw={messageIcon}
+                >
+                    <TitleBox title={t.signUpStep.inputTitle}>
+                        <Input type="text" onChange={e => setInputValue(e.target.value)} value={inputValue} />
+                        {errorEncountered ? <Validation text={t.signUpStep.error} /> : null}
+                    </TitleBox>
+                </DialogStep>
+                <DialogStep
+                    stepName={STEPS.success}
+                    controls={controls}
+                    title={t.successStep.title}
+                    subtitle={t.successStep.subtitle}
+                    confirmButtonClick={() => setShowDialog(false)}
+                    confirmButtonText={t.successStep.actionButtonTitle}
+                    showBackgroundTitle={false}
+                    ImageRaw={supportDialogImage}
+                    showCornerBackButton={false}
+                    subtitleSmallMargin
+                />
+            </Dialog>
+            <ColoredNotice
+                text={t.coloredNotice.text}
+                buttonTitle={t.coloredNotice.buttonTitle}
+                onButtonClick={openDialog}
+            />
+        </>
+    );
+};
+
+WaitlistSubscription.propTypes = {
+    coin: PropTypes.object.isRequired,
+    translations: PropTypes.object,
+};