From c55d58e9a8c1822b4c32d1dd76998d18c2396171 Mon Sep 17 00:00:00 2001
From: GeorginaShall <georgina.shall@creoshift.com>
Date: Fri, 27 Dec 2024 13:08:37 +0200
Subject: [PATCH] APT-1617-conversion-fix

---
 src/components/stakingCalculator.tsx   | 21 ++++++++++++---------
 src/components/unstakingCalculator.tsx | 11 ++++++-----
 src/misc/formatting.ts                 |  2 +-
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/stakingCalculator.tsx b/src/components/stakingCalculator.tsx
index 71924cf..6bab09c 100644
--- a/src/components/stakingCalculator.tsx
+++ b/src/components/stakingCalculator.tsx
@@ -32,7 +32,7 @@ const StakingCalculator: React.FC = () => {
   const [zilToStake, setZilToStake] = useState<string>(formatUnits(stakingPoolForView?.stakingPool.definition.minimumStake || 0n, 18));
 
   useEffect(() => {
-    setZilToStake("0.00");
+    setZilToStake("1");
   }, [stakingPoolForView]);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -48,7 +48,7 @@ const StakingCalculator: React.FC = () => {
   };
 
   const handleFocus = () => {
-     if (zilToStake === '0.00') setZilToStake('');
+     if (zilToStake === '') setZilToStake('1');
   };
 
   const handleBlur = () => {
@@ -62,7 +62,7 @@ const StakingCalculator: React.FC = () => {
     }
     setZilToStake(valueTemp.replace(/0*(\d+)/, '$1'));
 
-    if (zilToStake === '') setZilToStake('0.00');
+    if (zilToStake === '') setZilToStake('1');
   };
 
   const zilToStakeNumber = parseFloat(zilToStake);
@@ -102,11 +102,14 @@ const StakingCalculator: React.FC = () => {
                   <>
                     <span className="body1">
                       ~
-                      {convertZilValueInToken(
-                        zilToStakeNumber,
-                        stakingPoolForView.stakingPool.data
-                          .zilToTokenRate
-                      )}{' '}
+                      {
+                        !isNaN(zilToStakeNumber) && !isNaN(stakingPoolForView.stakingPool.data
+                          .zilToTokenRate)
+                          ? convertZilValueInToken(zilToStakeNumber, stakingPoolForView.stakingPool.data
+                            .zilToTokenRate)
+                          : ""
+                      }                      
+                      {' '}
                       {
                         stakingPoolForView.stakingPool.definition
                           .tokenSymbol
@@ -164,7 +167,7 @@ const StakingCalculator: React.FC = () => {
               <div className="base flex flex-col xl:flex-row xl:gap-5">
                 <div>Rate</div>
                    {stakingPoolForView!.stakingPool.data && (
-                <div>{`1 ZIL = ~${convertZilValueInToken(zilToStakeNumber, stakingPoolForView.stakingPool.data.zilToTokenRate)} ${stakingPoolForView.stakingPool.definition.tokenSymbol}`}</div>
+                <div>{`1 ZIL = ~${ stakingPoolForView.stakingPool.data.zilToTokenRate} ${stakingPoolForView.stakingPool.definition.tokenSymbol}`}</div>
                   )}
               </div>
               <div className=" regular-base text-aqua1 flex flex-row xl:gap-5">
diff --git a/src/components/unstakingCalculator.tsx b/src/components/unstakingCalculator.tsx
index 660ffa7..e12d8cd 100644
--- a/src/components/unstakingCalculator.tsx
+++ b/src/components/unstakingCalculator.tsx
@@ -32,7 +32,7 @@ const UnstakingCalculator: React.FC = () => {
   };
 
   const handleFocus = () => {
-    if (zilToUnstake === '0.00') setZilToUnstake('');
+    if (zilToUnstake === '') setZilToUnstake('1');
   };
 
   const handleBlur = () => {
@@ -44,11 +44,11 @@ const UnstakingCalculator: React.FC = () => {
       valueTemp = zilToUnstake.slice(0, -1);
     }
     setZilToUnstake(valueTemp.replace(/0*(\d+)/, '$1'));
-    if (zilToUnstake === '') setZilToUnstake('0.00');
+    if (zilToUnstake === '') setZilToUnstake('1');
   };
 
   useEffect(() => {
-    setZilToUnstake('0.00');
+    setZilToUnstake('1');
   }, [stakingPoolForView]);
 
   const stakedTokenAvailable =
@@ -172,13 +172,14 @@ const UnstakingCalculator: React.FC = () => {
                       = ~
                       {formatUnitsToHumanReadable(
                         convertTokenToZil(
-                          zilInWei,
+                          parseEther('1'),
                           stakingPoolForView.stakingPool.data
                             .zilToTokenRate
                         ),
                         18
                       )}
-                    </>
+
+                     </>
                   ) : (
                     <div className="animated-gradient mr-1 h-[1.5em] w-[3em]"></div>
                   )}
diff --git a/src/misc/formatting.ts b/src/misc/formatting.ts
index 283ea3c..e44681f 100644
--- a/src/misc/formatting.ts
+++ b/src/misc/formatting.ts
@@ -38,7 +38,7 @@ export function convertTokenToZil(tokenAmount: bigint, zilToTokenRate: number):
 }
 
 export function convertZilValueInToken(zilAmount: number, zilToTokenRate: number) {
-  return `${(zilAmount * zilToTokenRate).toFixed(2)}`
+   return `${(zilAmount * zilToTokenRate).toFixed(2)}`
 }
 
 export function formatUnitsToHumanReadable(value: bigint, decimals: number): string {