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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rabbitio/ui-kit",
-    "version": "1.0.0-beta.82",
+    "version": "1.0.0-beta.84",
     "description": "Rabbit.io react.js components kit",
     "type": "module",
     "main": "./dist/index.cjs",

package/src/index.js

@@ -27,6 +27,10 @@ export { InformationMessage } from "./ui-kit/components/atoms/InformationMessage
 export { Input } from "./ui-kit/components/atoms/Input/Input.jsx";
 export { COIN_PICKER_MODES, CoinPicker } from "./ui-kit/components/molecules/CoinPicker/CoinPicker.jsx";
 export { CoinPickerDialogStep } from "./ui-kit/components/organisms/CoinPickerDialogStep/CoinPickerDialogStep.jsx";
+export { SearchableCoinsList } from "./ui-kit/components/molecules/SearchableCoinsList/SearchableCoinsList.jsx";
+export { ColoredNotice } from "./ui-kit/components/molecules/ColoredNotice/ColoredNotice.jsx";
+export { WaitlistSubscription } from "./ui-kit/components/organisms/WaitlistSubscription/WaitlistSubscription.jsx";
+export { LogoCarousel } from "./ui-kit/components/molecules/LogoCarousel/LogoCarousel.jsx";
 
 // UI-KIT constants
 export { FALLBACK_ASSET_ICON_URL, DEFAULT_CRYPTO_DECIMAL_COUNT } from "./common-apis/globalConstants.jsx";

package/src/swaps-lib/external-apis/letsExchangeSwapProvider.js

@@ -10,6 +10,7 @@ import { safeStringify } from "../../common-apis/utils/safeStringify.js";
 import { Logger } from "../../common-apis/utils/logging/logger.js";
 import { DEFAULT_CRYPTO_DECIMAL_COUNT, FALLBACK_ASSET_ICON_URL } from "../../common-apis/globalConstants.jsx";
 import { SwapProviderCoinInfo } from "../models/swapProviderCoinInfo.js";
+import { Partner } from "../models/partner.js";
 
 export class LetsExchangeSwapProvider extends SwapProvider {
     constructor(apiKeysProxyUrl, cache, customCoinBuilder = (coin, network) => null, useRestrictedCoinsSet = true) {
@@ -131,10 +132,9 @@ export class LetsExchangeSwapProvider extends SwapProvider {
             }
             const fromCoinDetails = this._supportedCoins.find(i => i.coin?.ticker === fromCoin?.ticker);
             const toCoinDetails = this._supportedCoins.find(i => i.coin?.ticker === toCoin?.ticker);
-            if (!fromCoinDetails || !toCoinDetails) {
-                throw new Error("Failed to find coin details for: " + fromCoin.ticker + " -> " + toCoin.ticker);
-            }
             if (
+                !fromCoinDetails ||
+                !toCoinDetails ||
                 !fromCoinDetails.deposit ||
                 !fromCoinDetails.isAvailable ||
                 !toCoinDetails.withdrawal ||
@@ -473,4 +473,14 @@ export class LetsExchangeSwapProvider extends SwapProvider {
                 throw new Error(`Unknown LetsExchange status: ${status}`);
         }
     }
+
+    async getPartnersList() {
+        return [
+            new Partner(
+                "LetsExchange",
+                "https://letsexchange.io/",
+                "https://letsexchange.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F02e45813-b375-49d8-b2b0-092ce1847fff%2F55ebbc3c-4ee6-4fa7-847b-f673e82594f3%2Flets-logo-basic__on-light.svg?table=block&id=bec5952a-2f9c-47fb-8cc0-86e1391a7f60&spaceId=02e45813-b375-49d8-b2b0-092ce1847fff&userId=&cache=v2"
+            ),
+        ];
+    }
 }

package/src/swaps-lib/external-apis/swapProvider.js

@@ -70,6 +70,7 @@ export class SwapProvider {
         WAITING_FOR_PAYMENT: "waiting_for_payment",
         CONFIRMING: "confirming",
         PAYMENT_RECEIVED: "payment_received",
+        VERIFYING: "verifying",
         EXCHANGING: "exchanging",
         COMPLETED: "completed",
         REFUNDED: "refunded",
@@ -160,11 +161,15 @@ export class SwapProvider {
      * @private
      */
     async _fetchSupportedCurrenciesIfNeeded() {
-        PRE_LISTED_COINS.forEach(preListedCoin => {
-            if (!this._supportedCoins.find(existingCoin => preListedCoin.coin.ticker === existingCoin.coin.ticker)) {
-                this._supportedCoins.push(preListedCoin);
-            }
-        });
+        if (!this.useRestrictedCoinsSet) {
+            PRE_LISTED_COINS.forEach(preListedCoin => {
+                if (
+                    !this._supportedCoins.find(existingCoin => preListedCoin.coin.ticker === existingCoin.coin.ticker)
+                ) {
+                    this._supportedCoins.push(preListedCoin);
+                }
+            });
+        }
     }
 
     /**
@@ -276,7 +281,7 @@ export class SwapProvider {
      * Retrieves coin to USDT rate.
      *
      * @param coin {Coin}
-     * @return {{result: true, rate: string}|{result: false}}
+     * @return {{result: true, rate: string}|null}
      */
     async getCoinToUSDTRate(coin) {
         const loggerSource = "getCoinToUSDTRate";
@@ -284,11 +289,13 @@ export class SwapProvider {
             if (!coin) return null;
 
             await this._fetchSupportedCurrenciesIfNeeded();
+            const isCoinAvailableForThisProvider = !!this.getCoinByTickerIfPresent(coin.ticker);
+            if (!isCoinAvailableForThisProvider) return null;
 
             // Using USDT TRC20 as usually fee in this network is smaller than ERC20 and this network is widely used for USDT
             const usdtTrc20 = this._supportedCoins.find(i => i.coin.ticker === "USDTTRC20")?.coin;
             if (!usdtTrc20) {
-                return { result: false };
+                return null;
             }
             const cached = this._cache.get("swapspace_usdt_rate_" + coin.ticker);
             if (cached != null) {
@@ -301,7 +308,7 @@ export class SwapProvider {
             Logger.log("Loading USDT->coin rate as not found in cache:", coin?.ticker);
             const result = await this.getSwapInfo(usdtTrc20, coin, "5000", false);
             if (!result.result) {
-                return { result: false };
+                return null;
             }
 
             // This calculation is not precise as we cannot recognize the actual fee and network fee. Just approximate.
@@ -523,4 +530,11 @@ export class SwapProvider {
         }
         return coinName;
     }
+
+    /**
+     * @return {Promise<Partner[]>}
+     */
+    async getPartnersList() {
+        return [];
+    }
 }

package/src/swaps-lib/external-apis/swapspaceSwapProvider.js

@@ -11,8 +11,9 @@ import { safeStringify } from "../../common-apis/utils/safeStringify.js";
 import { Logger } from "../../common-apis/utils/logging/logger.js";
 import { FALLBACK_ASSET_ICON_URL } from "../../common-apis/globalConstants.jsx";
 import { SwapProviderCoinInfo } from "../models/swapProviderCoinInfo.js";
+import { Partner } from "../models/partner.js";
 
-export const BANNED_PARTNERS = ["stealthex", "changee", "coincraddle"];
+export const BANNED_PARTNERS = ["stealthex", "changee", "coincraddle", "easybit"];
 
 export class SwapspaceSwapProvider extends SwapProvider {
     constructor(apiKeysProxyUrl, cache, customCoinBuilder = (coin, network) => null, useRestrictedCoinsSet = true) {
@@ -144,12 +145,9 @@ export class SwapspaceSwapProvider extends SwapProvider {
             }
             const fromCoinSwapspaceDetails = this._supportedCoins.find(i => i.coin?.ticker === fromCoin?.ticker);
             const toCoinSwapspaceDetails = this._supportedCoins.find(i => i.coin?.ticker === toCoin?.ticker);
-            if (!fromCoinSwapspaceDetails || !toCoinSwapspaceDetails) {
-                throw new Error(
-                    "Failed to find swapspace coin details for: " + fromCoin.ticker + " -> " + toCoin.ticker
-                );
-            }
             if (
+                !fromCoinSwapspaceDetails ||
+                !toCoinSwapspaceDetails ||
                 !fromCoinSwapspaceDetails.deposit ||
                 !toCoinSwapspaceDetails.withdrawal ||
                 !fromCoinSwapspaceDetails.isAvailable ||
@@ -456,7 +454,7 @@ export class SwapspaceSwapProvider extends SwapProvider {
             case "finished":
                 return SwapProvider.SWAP_STATUSES.COMPLETED;
             case "verifying":
-                return SwapProvider.SWAP_STATUSES.EXCHANGING;
+                return SwapProvider.SWAP_STATUSES.VERIFYING;
             case "refunded":
                 return SwapProvider.SWAP_STATUSES.REFUNDED;
             case "expired":
@@ -553,4 +551,22 @@ export class SwapspaceSwapProvider extends SwapProvider {
             improveAndRethrow(e, loggerSource);
         }
     }
+
+    async getPartnersList() {
+        try {
+            await this._fetchPartnersListIfNeeded();
+            return this._partners
+                .filter(p => !BANNED_PARTNERS.find(banned => banned === p.path))
+                .map(
+                    p =>
+                        new Partner(
+                            p.name,
+                            null, // No data in swapspace
+                            p?.image?.default ? "https://storage.swapspace.co" + p.image.default : null
+                        )
+                );
+        } catch (e) {
+            improveAndRethrow(e, "swapspace.getPartnersList");
+        }
+    }
 }

package/src/swaps-lib/models/partner.js

@@ -0,0 +1,7 @@
+export class Partner {
+    constructor(name, url, logoUrl) {
+        this.name = name;
+        this.url = url;
+        this.logoUrl = logoUrl;
+    }
+}

package/src/swaps-lib/services/publicSwapService.js

@@ -590,13 +590,13 @@ export class PublicSwapService {
 
     /**
      * @param ticker {string}
-     * @param [fixed=false] {boolean}
      * @return {Coin|null}
      */
-    getCoinByTickerIfPresent(ticker, fixed = false) {
-        return !fixed
-            ? this._swapProvider.getCoinByTickerIfPresent(ticker)
-            : this._fixedSwapProvider.getCoinByTickerIfPresent(ticker);
+    getCoinByTickerIfPresent(ticker) {
+        return (
+            this._swapProvider.getCoinByTickerIfPresent(ticker) ??
+            this._fixedSwapProvider.getCoinByTickerIfPresent(ticker)
+        );
     }
 
     /**
@@ -605,15 +605,20 @@ export class PublicSwapService {
      * @return {Promise<string|null>}
      */
     async getAssetToUsdtRate(asset) {
+        let result = null;
+        try {
+            result = await this._swapProvider.getCoinToUSDTRate(asset);
+        } catch (e) {
+            Logger.logError(e, "getAssetToUsdtRate");
+        }
         try {
-            let result = await this._swapProvider.getCoinToUSDTRate(asset);
             if (result?.rate == null) {
                 result = await this._fixedSwapProvider.getCoinToUSDTRate(asset);
             }
-            return result?.rate ?? null;
         } catch (e) {
-            improveAndRethrow(e, "getAssetToUsdtRate");
+            Logger.logError(e, "getAssetToUsdtRate", "Failed via both fixed and floating providers");
         }
+        return result?.rate ?? null;
     }
 
     /**
@@ -667,4 +672,21 @@ export class PublicSwapService {
             improveAndRethrow(e, "getExtraIdNameIfPresentForAsset");
         }
     }
+
+    async getPartnersList() {
+        try {
+            let allPartners = [this._swapProvider, this._fixedSwapProvider].map(provider => provider.getPartnersList());
+            allPartners = await Promise.all(allPartners);
+            allPartners = allPartners.flat().flat();
+            return allPartners.reduce((prev, cur) => {
+                if (!prev.find(partner => partner.name.toLowerCase() === cur.name.toLowerCase())) {
+                    prev.push(cur);
+                }
+                return prev;
+            }, []);
+        } catch (e) {
+            Logger.logError(e, "getPartnersList");
+        }
+        return [];
+    }
 }

package/src/swaps-lib/utils/swapUtils.js

@@ -52,7 +52,7 @@ export class SwapUtils {
             const defaultAmountUsd = BigNumber("300");
             const coinUsdRate = await swapProvider.getCoinToUSDTRate(fromCoin);
             const coinAmountForDefaultUsdAmount = AmountUtils.trim(
-                coinUsdRate.result ? defaultAmountUsd.div(coinUsdRate?.rate) : defaultAmountUsd,
+                coinUsdRate?.result ? defaultAmountUsd.div(coinUsdRate?.rate) : defaultAmountUsd,
                 fromCoin.digits
             );
             Logger.log(`Init: ${coinAmountForDefaultUsdAmount} ${fromCoin.ticker}->${toCoin.ticker}`, loggerSource);

package/src/ui-kit/assets/styles/global.scss

@@ -6,13 +6,10 @@
 // Global classes.
 //
 // Rule for adding new global classes:
-// When adding new classes, make sure that the class name is unique enough, so
-// that it can be easily searched through the code base. Class names in the
-// format of xxxx-xxxx-xxxx with 2+ words are unique enough, but if the class
-// name contains just one word (like "container", for example), you need to
-// add a prefix "gc_", so that we can easily find all its usages throughout the code.
-// For example, if you want to add a class called ".button", you must name it as
-// ".gc_button", so that it can be easily found.
+// All new classes must start with prefix ".global-class--", so that
+// the class name is unique enough for it to be searched globally.
+// For example, if you want to add a class called ".button", you must
+// name it as ".global-class--button", so that it can be easily found.
 
 .container {
     max-width: 1260px;

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/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/components/atoms/RateSelector/RateSelector.jsx

@@ -15,13 +15,13 @@ export const RateSelector = ({
         <div className={s["rate-selector"]}>
             <div
                 className={`${s["rate-selector-item"]} ${!isFixed ? s["selected"] : ""}`}
-                onClick={() => setIsFixed(false)}
+                onClick={() => (isFixed ? setIsFixed(false) : null)}
             >
                 <div className={s["rate-selector-item-text"]}>{translations.floatingRate}</div>
             </div>
             <div
                 className={`${s["rate-selector-item"]} ${isFixed ? s["selected"] : ""}`}
-                onClick={() => setIsFixed(true)}
+                onClick={() => (!isFixed ? setIsFixed(true) : null)}
             >
                 <div className={s["rate-selector-item-text"]}>{translations.fixedRate}</div>
             </div>

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

@@ -16,15 +16,13 @@ import FailedValidationIcon from "../../../assets/wrappedImages/failedValidation
 export const Validation = ({ text = "", isSuccessAlert }) => {
     return (
         <div className={s["validation"]}>
-            <div>
-                {isSuccessAlert ? (
-                    // <img src={successfulValidationIcon} alt="validation icon" />
-                    <SuccessfulValidationIcon />
-                ) : (
-                    // <img src={failedValidationIcon} alt="validation icon" />
-                    <FailedValidationIcon />
-                )}
-            </div>
+            {isSuccessAlert ? (
+                // <img src={successfulValidationIcon} alt="validation icon" />
+                <SuccessfulValidationIcon />
+            ) : (
+                // <img src={failedValidationIcon} alt="validation icon" />
+                <FailedValidationIcon />
+            )}
             <span className={s["validation-text"]}>{text}</span>
         </div>
     );

package/src/ui-kit/components/atoms/Validation/validation.module.scss

@@ -5,6 +5,10 @@
     align-items: center;
     margin-top: Margin("3");
 
+    svg {
+        flex-shrink: 0;
+    }
+
     &-text {
         text-align: left;
         color: SolidColor("sky");

package/src/ui-kit/components/molecules/AmountInput/AmountInput.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { BigNumber } from "bignumber.js";
+import { CSSTransition } from "react-transition-group";
 
 import s from "./amount-input.module.scss";
 import WalletIcon from "../../../assets/wrappedImages/walletIcon.jsx";
@@ -251,55 +252,63 @@ export const AmountInput = React.forwardRef(
                                     </div>
                                 )}
                             </div>
-                            {fiatCurrencyCode !== null ? (
-                                <>
-                                    <div
-                                        className={
-                                            s["requested-amount-fiat"] + (interactedWith ? " " + s["interacted"] : "")
-                                        }
-                                    >
-                                        {interactedWith ? (
-                                            <>
-                                                <span className={s["requested-amount-fiat-currency"]}>
-                                                    {(estimateAmount ? "~ " : "") + fiatCurrencyCode}
-                                                </span>
-
-                                                {!isLoading && cryptoAssetToFiatRate != null ? (
-                                                    <input
-                                                        type="text"
-                                                        inputMode="decimal"
-                                                        className={s["requested-amount-fiat-input"]}
-                                                        value={fiatAmountValue}
-                                                        disabled={disabled || locked}
-                                                        onChange={e => handleChangeAmountFiat(e.target.value)}
-                                                        placeholder={placeholderByDecimalCount(fiatCurrencyDecimals)}
-                                                        autoFocus={fiatAmountAutoFocus}
-                                                        onFocus={e => callHandlingErrors(() => setIsInFocus(true), e)}
-                                                        onBlur={e => callHandlingErrors(() => setIsInFocus(false), e)}
-                                                    />
-                                                ) : (
-                                                    <div className={s["requested-amount-fiat-skeleton"]}>
-                                                        <span
-                                                            className={
-                                                                s["requested-amount-fiat-skeleton-content"] +
-                                                                " " +
-                                                                "skeleton-dark"
-                                                            }
-                                                        ></span>
-                                                    </div>
-                                                )}
-                                            </>
-                                        ) : (
-                                            <span
-                                                className={s["requested-amount-fiat-placeholder"]}
-                                                onClick={e => callHandlingErrors(() => handleFiatInteraction(), e)}
-                                            >
-                                                {fiatInputPlaceholderText}
+                            <CSSTransition
+                                in={fiatCurrencyCode !== null}
+                                timeout={200}
+                                classNames={{
+                                    enter: s["requested-amount-fiat-enter"],
+                                    enterActive: s["requested-amount-fiat-enter-active"],
+                                    exit: s["requested-amount-fiat-exit"],
+                                    exitActive: s["requested-amount-fiat-exit-active"],
+                                }}
+                                unmountOnExit
+                            >
+                                <div
+                                    className={
+                                        s["requested-amount-fiat"] + (interactedWith ? " " + s["interacted"] : "")
+                                    }
+                                >
+                                    {interactedWith ? (
+                                        <>
+                                            <span className={s["requested-amount-fiat-currency"]}>
+                                                {(estimateAmount ? "~ " : "") + fiatCurrencyCode}
                                             </span>
-                                        )}
-                                    </div>
-                                </>
-                            ) : null}
+
+                                            {!isLoading && cryptoAssetToFiatRate != null ? (
+                                                <input
+                                                    type="text"
+                                                    inputMode="decimal"
+                                                    className={s["requested-amount-fiat-input"]}
+                                                    value={fiatAmountValue}
+                                                    disabled={disabled || locked}
+                                                    onChange={e => handleChangeAmountFiat(e.target.value)}
+                                                    placeholder={placeholderByDecimalCount(fiatCurrencyDecimals)}
+                                                    autoFocus={fiatAmountAutoFocus}
+                                                    onFocus={e => callHandlingErrors(() => setIsInFocus(true), e)}
+                                                    onBlur={e => callHandlingErrors(() => setIsInFocus(false), e)}
+                                                />
+                                            ) : (
+                                                <div className={s["requested-amount-fiat-skeleton"]}>
+                                                    <span
+                                                        className={
+                                                            s["requested-amount-fiat-skeleton-content"] +
+                                                            " " +
+                                                            "skeleton-dark"
+                                                        }
+                                                    ></span>
+                                                </div>
+                                            )}
+                                        </>
+                                    ) : (
+                                        <span
+                                            className={s["requested-amount-fiat-placeholder"]}
+                                            onClick={e => callHandlingErrors(() => handleFiatInteraction(), e)}
+                                        >
+                                            {fiatInputPlaceholderText}
+                                        </span>
+                                    )}
+                                </div>
+                            </CSSTransition>
                         </div>
                         {showChangeAssetButton && ticker ? (
                             <div className={s["amount-input-container-button-wrapper"]} ref={buttonForwardRef}>