From 4b0f7c00422f1721675724dc978c3045ea2bcbf7 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 8 Oct 2020 14:45:55 +0200
Subject: [PATCH] typing fixes

---
 .../AssetActions/Pool/PoolStatistics.tsx       |  4 ++--
 .../organisms/AssetActions/Pool/Remove.tsx     |  6 +++---
 .../organisms/AssetActions/Pool/index.tsx      | 18 +++++++++---------
 .../organisms/AssetActions/index.tsx           |  6 +-----
 4 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx b/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
index 17931dac3..f69cd5e1c 100644
--- a/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
+++ b/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
@@ -26,8 +26,8 @@ export default function PoolStatistics({
   return (
     <div className={styles.statistics}>
       <h3 className={styles.title}>Pool Statistics</h3>
-      <Token symbol="OCEAN" balance={totalBalance.ocean} />
-      <Token symbol={dtSymbol} balance={totalBalance.datatoken} />
+      <Token symbol="OCEAN" balance={`${totalBalance.ocean}`} />
+      <Token symbol={dtSymbol} balance={`${totalBalance.datatoken}`} />
       {debug === true && <Token symbol="BPT" balance={totalPoolTokens} />}
       <Token symbol="% swap fee" balance={swapFee} />
       <Conversion price={`${totalLiquidityInOcean}`} />
diff --git a/src/components/organisms/AssetActions/Pool/Remove.tsx b/src/components/organisms/AssetActions/Pool/Remove.tsx
index ff38bebe2..245f1e2a1 100644
--- a/src/components/organisms/AssetActions/Pool/Remove.tsx
+++ b/src/components/organisms/AssetActions/Pool/Remove.tsx
@@ -50,7 +50,7 @@ export default function Remove({
   }
 
   function handleMax() {
-    setAmount(userLiquidity.ocean)
+    setAmount(`${userLiquidity.ocean}`)
   }
 
   return (
@@ -63,7 +63,7 @@ export default function Remove({
       <form className={styles.removeInput}>
         <div className={styles.userLiquidity}>
           <span>Your pool liquidity: </span>
-          <PriceUnit price={userLiquidity.ocean} symbol="OCEAN" small />
+          <PriceUnit price={`${userLiquidity.ocean}`} symbol="OCEAN" small />
         </div>
         <InputElement
           value={amount}
@@ -74,7 +74,7 @@ export default function Remove({
           onChange={handleAmountChange}
         />
 
-        {userLiquidity.ocean > amount && (
+        {userLiquidity.ocean > Number(amount) && (
           <Button
             className={styles.buttonMax}
             style="text"
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index a3b5d9392..ee1a7d724 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -16,8 +16,8 @@ import PoolStatistics from './PoolStatistics'
 import Token from './Token'
 
 export interface Balance {
-  ocean: string
-  datatoken: string
+  ocean: number
+  datatoken: number
 }
 
 /* 
@@ -86,8 +86,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
           Number(price.datatoken)
 
         const userLiquidity = {
-          ocean: `${userOceanBalance}`,
-          datatoken: `${userDtBalance}`
+          ocean: userOceanBalance,
+          datatoken: userDtBalance
         }
 
         setUserBalance(userLiquidity)
@@ -130,8 +130,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
         <>
           <div className={styles.dataToken}>
             <PriceUnit price="1" symbol={dtSymbol} /> ={' '}
-            <PriceUnit price={price.value} />
-            <Conversion price={price.value} />
+            <PriceUnit price={`${price.value}`} />
+            <Conversion price={`${price.value}`} />
             <Tooltip content="Explain how this price is determined..." />
             <div className={styles.dataTokenLinks}>
               <EtherscanLink
@@ -152,14 +152,14 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
                 Your Liquidity
                 <Tooltip content="Explain what this represents, advantage of providing liquidity..." />
               </h3>
-              <Token symbol="OCEAN" balance={userLiquidity.ocean} />
-              <Token symbol={dtSymbol} balance={userLiquidity.datatoken} />
+              <Token symbol="OCEAN" balance={`${userLiquidity.ocean}`} />
+              <Token symbol={dtSymbol} balance={`${userLiquidity.datatoken}`} />
               {debug === true && <Token symbol="BPT" balance={poolTokens} />}
               <Token symbol="% of pool" balance={poolShare} />
             </div>
 
             <PoolStatistics
-              price={price.value}
+              price={`${price.value}`}
               totalPoolTokens={totalPoolTokens}
               totalBalance={{ ocean: price.ocean, datatoken: price.datatoken }}
               swapFee={swapFee}
diff --git a/src/components/organisms/AssetActions/index.tsx b/src/components/organisms/AssetActions/index.tsx
index f4f959aaf..a561aca69 100644
--- a/src/components/organisms/AssetActions/index.tsx
+++ b/src/components/organisms/AssetActions/index.tsx
@@ -21,11 +21,7 @@ export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
   useEffect(() => {
     if (!price || !price.value || !balance || !balance.ocean) return
 
-    const isFree = price.value === '0'
-
-    setIsBalanceSufficient(
-      isFree ? true : compareAsBN(balance.ocean, price.value)
-    )
+    setIsBalanceSufficient(compareAsBN(balance.ocean, `${price.value}`))
 
     return () => {
       setIsBalanceSufficient(false)