Merge pull request #184 from ameerul-deriv/FEQ-2444-implement-real-time-exchange-rate

Ameerul / FEQ-2444 Implement real-time exchange rate

Author: farrah-deriv

src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect, useState } from 'react';
+import { ChangeEvent, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { TCurrency } from 'types';
 import { LightDivider } from '@/components';
@@ -10,52 +10,56 @@ import './BuySellAmount.scss';
 
 type TBuySellAmountProps = {
     accountCurrency: string;
-    amount: string;
+    buySellAmount: string;
     calculatedRate: string;
     control: ReturnType<typeof useForm>['control'];
+    inputValue: string;
     isBuy: boolean;
     isDisabled: boolean;
     localCurrency: TCurrency;
     maxLimit: string;
     minLimit: string;
     paymentMethodNames?: string[];
+    setBuySellAmount: (value: string) => void;
+    setInputValue: (value: string) => void;
     setValue: ReturnType<typeof useForm>['setValue'];
     trigger: ReturnType<typeof useForm>['trigger'];
 };
 const BuySellAmount = ({
     accountCurrency,
-    amount,
+    buySellAmount,
     calculatedRate,
     control,
+    inputValue,
     isBuy,
     isDisabled,
     localCurrency,
     maxLimit,
     minLimit,
     paymentMethodNames,
+    setBuySellAmount,
+    setInputValue,
     setValue,
     trigger,
 }: TBuySellAmountProps) => {
     const { isMobile } = useDevice();
     const labelSize = isMobile ? 'sm' : 'xs';
-    const [inputValue, setInputValue] = useState(minLimit);
-    const [buySellAmount, setBuySellAmount] = useState(amount);
 
     useEffect(() => {
         setBuySellAmount(
             FormatUtils.formatMoney(Number(inputValue) * Number(calculatedRate), {
                 currency: localCurrency,
             })
         );
-    }, [calculatedRate, inputValue, localCurrency]);
+    }, [calculatedRate, inputValue, localCurrency, setBuySellAmount]);
 
     // This is needed as minLimit can be passed as the default 0 on first time render
     // causing the amount to be 0
     useEffect(() => {
         setInputValue(minLimit);
         setValue('amount', minLimit);
         trigger('amount');
-    }, [minLimit, setValue, trigger]);
+    }, [minLimit, setInputValue, setValue, trigger]);
 
     return (
         <div className='flex flex-col gap-[2rem] py-[1.6rem]'>

src/components/BuySellForm/BuySellData/BuySellData.scss

@@ -7,5 +7,13 @@
             flex-direction: column;
             gap: 1.6rem;
         }
+
+        &__floating-badge {
+            color: #1789e1;
+            padding: 0.2rem 0.4rem;
+            background-color: rgba(44, 154, 255, 0.08);
+            border-radius: 0.4rem;
+            cursor: pointer;
+        }
     }
 }

src/components/BuySellForm/BuySellData/BuySellData.tsx

@@ -1,9 +1,11 @@
 import { forwardRef } from 'react';
+import clsx from 'clsx';
 import { THooks } from 'types';
 import { PaymentMethodWithIcon } from '@/components';
+import { RATE_TYPE } from '@/constants';
 import { formatTime } from '@/utils';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { Text, useDevice } from '@deriv-com/ui';
+import { Text, Tooltip, useDevice } from '@deriv-com/ui';
 import './BuySellData.scss';
 
 type TBuySellDataProps = {
@@ -16,6 +18,7 @@ type TBuySellDataProps = {
     paymentMethodNames?: string[];
     paymentMethods: THooks.PaymentMethods.Get;
     rate: string;
+    rateType?: string;
 };
 
 type TType = THooks.AdvertiserPaymentMethods.Get[number]['type'];
@@ -31,6 +34,7 @@ const BuySellData = forwardRef<HTMLDivElement, TBuySellDataProps>(
             paymentMethodNames,
             paymentMethods,
             rate,
+            rateType,
         },
         ref
     ) => {
@@ -44,6 +48,7 @@ const BuySellData = forwardRef<HTMLDivElement, TBuySellDataProps>(
             }
             return acc;
         }, {});
+        const isFloating = rateType === RATE_TYPE.FLOAT;
 
         return (
             <div className='p-[1.6rem] lg:px-[2.4rem]' ref={ref}>
@@ -55,7 +60,33 @@ const BuySellData = forwardRef<HTMLDivElement, TBuySellDataProps>(
                         <Text size={valueSize}>{name}</Text>
                     </div>
                     <div className='flex flex-col w-full'>
-                        <Text color='less-prominent' size={labelSize}>{`Rate (1 ${accountCurrency})`}</Text>
+                        <div className={clsx({ 'lg:hover:mb-[2.2rem]': isFloating })}>
+                            <div
+                                className={clsx('flex items-center gap-2', {
+                                    'lg:hover:absolute': isFloating,
+                                })}
+                            >
+                                <Text color='less-prominent' size={labelSize}>{`Rate (1 ${accountCurrency})`}</Text>
+                                {isFloating && (
+                                    <Tooltip
+                                        className='w-72 mb-[-0.8rem] text-center'
+                                        message={
+                                            <Text size={labelSize}>
+                                                <Localize i18n_default_text='Floating exchange rate shifts with market fluctuations.' />
+                                            </Text>
+                                        }
+                                    >
+                                        <Text
+                                            as='div'
+                                            className='buy-sell-data__details__floating-badge'
+                                            size={labelSize}
+                                        >
+                                            <Localize i18n_default_text='Floating' />
+                                        </Text>
+                                    </Tooltip>
+                                )}
+                            </div>
+                        </div>
                         <Text size={valueSize}>
                             {rate} {localCurrency}
                         </Text>