From fdb8ece105cb7e766529a35ce9f26a1f8a38f785 Mon Sep 17 00:00:00 2001
From: piersss <86911296+piersss@users.noreply.github.com>
Date: Fri, 19 Jul 2024 22:35:36 +0200
Subject: [PATCH] 940: Fixed RateField reverse rate bug (#941)

---
 .../subcomponents/RateField/RateField.tsx           | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/@widgets/MakeWidget/subcomponents/RateField/RateField.tsx b/src/components/@widgets/MakeWidget/subcomponents/RateField/RateField.tsx
index c705c2b5..9abe6349 100644
--- a/src/components/@widgets/MakeWidget/subcomponents/RateField/RateField.tsx
+++ b/src/components/@widgets/MakeWidget/subcomponents/RateField/RateField.tsx
@@ -35,13 +35,16 @@ export const RateField: React.FC<RateFieldProps> = ({
     [currentRate]
   );
 
+  const firstDisplayedToken = invertPair ? token2 : token1;
+  const secondDisplayedToken = invertPair ? token1 : token2;
+
   useEffect(() => {
     setCurrentRate(rate);
-  }, [rate]);
+  }, [rate.toString()]);
 
   useEffect(() => {
     setInvertPair(false);
-  }, [token1, token2, rate]);
+  }, [token1, token2, rate.toString()]);
 
   function handleClick() {
     const newInvertState = !invertPair;
@@ -56,10 +59,10 @@ export const RateField: React.FC<RateFieldProps> = ({
       isButton={isButton}
       className={className}
     >
-      1<Text>{invertPair ? token2 : token1}</Text>
+      1<Text title={firstDisplayedToken}>{firstDisplayedToken}</Text>
       <Equals>=</Equals>
-      <RateBox>{displayRate}</RateBox>
-      <Text>{invertPair ? token1 : token2}</Text>
+      <RateBox title={displayRate}>{displayRate}</RateBox>
+      <Text title={secondDisplayedToken}>{secondDisplayedToken}</Text>
       {isButton ? (
         <Icon name="swap-horizontal" iconSize={0.75} />
       ) : (