From a541cbcee072081751a59bef3bf9f5acdf7093f8 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 24 Jan 2022 14:35:59 +0000
Subject: [PATCH] refactor to use less hardcoded OCEAN

* ref #468
---
 .../Asset/AssetActions/Pool/Add/Output.tsx    |  6 +--
 .../Asset/AssetActions/Pool/Add/index.tsx     |  6 +--
 .../Asset/AssetActions/Pool/Remove.tsx        |  6 +--
 .../Asset/AssetActions/Pool/TokenList.tsx     | 21 +++++----
 .../Asset/AssetActions/Pool/index.tsx         | 44 +++++++++----------
 5 files changed, 41 insertions(+), 42 deletions(-)

diff --git a/src/components/Asset/AssetActions/Pool/Add/Output.tsx b/src/components/Asset/AssetActions/Pool/Add/Output.tsx
index 36f7b08da..d54d2fc99 100644
--- a/src/components/Asset/AssetActions/Pool/Add/Output.tsx
+++ b/src/components/Asset/AssetActions/Pool/Add/Output.tsx
@@ -11,14 +11,14 @@ export default function Output({
   newPoolTokens,
   newPoolShare,
   swapFee,
-  dtSymbol,
+  datatokenSymbol,
   totalPoolTokens,
   totalBalance
 }: {
   newPoolTokens: string
   newPoolShare: string
   swapFee: string
-  dtSymbol: string
+  datatokenSymbol: string
   totalPoolTokens: string
   totalBalance: PoolBalance
 }): ReactElement {
@@ -63,7 +63,7 @@ export default function Output({
         <div>
           <p>{titleOut}</p>
           <Token symbol="OCEAN" balance={poolOcean} />
-          <Token symbol={dtSymbol} balance={poolDatatoken} />
+          <Token symbol={datatokenSymbol} balance={poolDatatoken} />
         </div>
       </div>
     </>
diff --git a/src/components/Asset/AssetActions/Pool/Add/index.tsx b/src/components/Asset/AssetActions/Pool/Add/index.tsx
index ed3ed495e..3226cb1cf 100644
--- a/src/components/Asset/AssetActions/Pool/Add/index.tsx
+++ b/src/components/Asset/AssetActions/Pool/Add/index.tsx
@@ -30,7 +30,7 @@ export default function Add({
   totalPoolTokens,
   totalBalance,
   swapFee,
-  dtSymbol,
+  datatokenSymbol,
   baseTokenSymbol,
   fetchAllData
 }: {
@@ -39,7 +39,7 @@ export default function Add({
   totalPoolTokens: string
   totalBalance: PoolBalance
   swapFee: string
-  dtSymbol: string
+  datatokenSymbol: string
   baseTokenSymbol: string
   fetchAllData: () => void
 }): ReactElement {
@@ -164,7 +164,7 @@ export default function Add({
               newPoolTokens={newPoolTokens}
               newPoolShare={newPoolShare}
               swapFee={swapFee}
-              dtSymbol={dtSymbol}
+              datatokenSymbol={datatokenSymbol}
               totalPoolTokens={totalPoolTokens}
               totalBalance={totalBalance}
             />
diff --git a/src/components/Asset/AssetActions/Pool/Remove.tsx b/src/components/Asset/AssetActions/Pool/Remove.tsx
index a705e7431..7956a75d3 100644
--- a/src/components/Asset/AssetActions/Pool/Remove.tsx
+++ b/src/components/Asset/AssetActions/Pool/Remove.tsx
@@ -28,14 +28,14 @@ export default function Remove({
   poolAddress,
   poolTokens,
   totalPoolTokens,
-  dtSymbol,
+  datatokenSymbol,
   fetchAllData
 }: {
   setShowRemove: (show: boolean) => void
   poolAddress: string
   poolTokens: string
   totalPoolTokens: string
-  dtSymbol: string
+  datatokenSymbol: string
   fetchAllData: () => void
 }): ReactElement {
   const slippagePresets = ['5', '10', '15', '25', '50']
@@ -245,7 +245,7 @@ export default function Remove({
           {isAdvanced === true ? (
             <>
               <Token symbol="OCEAN" balance={minOceanAmount} />
-              <Token symbol={dtSymbol} balance={minDatatokenAmount} />
+              <Token symbol={datatokenSymbol} balance={minDatatokenAmount} />
             </>
           ) : (
             <Token symbol="OCEAN" balance={minOceanAmount} />
diff --git a/src/components/Asset/AssetActions/Pool/TokenList.tsx b/src/components/Asset/AssetActions/Pool/TokenList.tsx
index 40270fdc9..7834aa376 100644
--- a/src/components/Asset/AssetActions/Pool/TokenList.tsx
+++ b/src/components/Asset/AssetActions/Pool/TokenList.tsx
@@ -7,10 +7,10 @@ import Decimal from 'decimal.js'
 export default function TokenList({
   title,
   children,
-  ocean,
-  oceanSymbol,
-  dt,
-  dtSymbol,
+  baseTokenValue,
+  baseTokenSymbol,
+  datatokenValue,
+  datatokenSymbol,
   poolShares,
   conversion,
   highlight,
@@ -18,10 +18,10 @@ export default function TokenList({
 }: {
   title: string | ReactNode
   children: ReactNode
-  ocean: string
-  oceanSymbol: string
-  dt: string
-  dtSymbol: string
+  baseTokenValue: string
+  baseTokenSymbol: string
+  datatokenValue: string
+  datatokenSymbol: string
   poolShares: string
   conversion: Decimal
   highlight?: boolean
@@ -32,8 +32,8 @@ export default function TokenList({
       <h3 className={styles.title}>{title}</h3>
       <div className={styles.tokens}>
         <div>
-          <Token symbol={oceanSymbol} balance={ocean} />
-          <Token symbol={dtSymbol} balance={dt} />
+          <Token symbol={baseTokenSymbol} balance={baseTokenValue} />
+          <Token symbol={datatokenSymbol} balance={datatokenValue} />
           {conversion.greaterThan(0) && (
             <Conversion
               price={conversion.toString()}
@@ -45,7 +45,6 @@ export default function TokenList({
 
         <div>
           <Token symbol="pool shares" balance={poolShares} noIcon />
-
           {children}
         </div>
       </div>
diff --git a/src/components/Asset/AssetActions/Pool/index.tsx b/src/components/Asset/AssetActions/Pool/index.tsx
index 2c8048aa8..31aec10c7 100644
--- a/src/components/Asset/AssetActions/Pool/index.tsx
+++ b/src/components/Asset/AssetActions/Pool/index.tsx
@@ -29,9 +29,9 @@ function getWeight(weight: string) {
 
 interface PoolInfo {
   poolFee: string
-  weightOcean: string
+  weightBaseToken: string
   weightDt: string
-  dtSymbol: string
+  datatokenSymbol: string
   baseTokenSymbol: string
   totalPoolTokens: string
   totalLiquidityInOcean: Decimal
@@ -158,9 +158,9 @@ export default function Pool(): ReactElement {
 
     const newPoolInfo = {
       poolFee,
-      weightOcean: getWeight(poolData.baseTokenWeight),
+      weightBaseToken: getWeight(poolData.baseTokenWeight),
       weightDt: getWeight(poolData.datatokenWeight),
-      dtSymbol: poolData.datatoken.symbol,
+      datatokenSymbol: poolData.datatoken.symbol,
       baseTokenSymbol: poolData.baseToken.symbol,
       totalPoolTokens: poolData.totalShares,
       totalLiquidityInOcean
@@ -342,7 +342,7 @@ export default function Pool(): ReactElement {
             datatoken: new Decimal(price?.datatoken).toString()
           }}
           swapFee={poolInfo?.poolFee}
-          dtSymbol={poolInfo?.dtSymbol}
+          datatokenSymbol={poolInfo?.datatokenSymbol}
           baseTokenSymbol={poolInfo?.baseTokenSymbol}
           fetchAllData={fetchAllData}
         />
@@ -350,15 +350,15 @@ export default function Pool(): ReactElement {
         <Remove
           setShowRemove={setShowRemove}
           poolAddress={price?.address}
-          poolTokens={poolInfoUser.poolShares}
+          poolTokens={poolInfoUser?.poolShares}
           totalPoolTokens={poolInfo?.totalPoolTokens}
-          dtSymbol={poolInfo?.dtSymbol}
+          datatokenSymbol={poolInfo?.datatokenSymbol}
           fetchAllData={fetchAllData}
         />
       ) : (
         <>
           <div className={styles.dataToken}>
-            <PriceUnit price="1" symbol={poolInfo?.dtSymbol} /> ={' '}
+            <PriceUnit price="1" symbol={poolInfo?.datatokenSymbol} /> ={' '}
             <PriceUnit
               price={`${price?.value}`}
               symbol={poolInfo?.baseTokenSymbol}
@@ -396,10 +396,10 @@ export default function Pool(): ReactElement {
                 />
               </>
             }
-            ocean={`${poolInfoUser?.liquidity?.ocean}`}
-            oceanSymbol={poolInfo?.baseTokenSymbol}
-            dt={`${poolInfoUser?.liquidity?.datatoken}`}
-            dtSymbol={poolInfo?.dtSymbol}
+            baseTokenValue={`${poolInfoUser?.liquidity?.ocean}`}
+            baseTokenSymbol={poolInfo?.baseTokenSymbol}
+            datatokenValue={`${poolInfoUser?.liquidity?.datatoken}`}
+            datatokenSymbol={poolInfo?.datatokenSymbol}
             poolShares={poolInfoUser?.poolShares}
             conversion={poolInfoUser?.totalLiquidityInOcean}
             highlight
@@ -413,10 +413,10 @@ export default function Pool(): ReactElement {
 
           <TokenList
             title="Pool Creator Statistics"
-            ocean={`${poolInfoOwner?.liquidity?.ocean}`}
-            oceanSymbol={poolInfo?.baseTokenSymbol}
-            dt={`${poolInfoOwner?.liquidity?.datatoken}`}
-            dtSymbol={poolInfo?.dtSymbol}
+            baseTokenValue={`${poolInfoOwner?.liquidity?.ocean}`}
+            baseTokenSymbol={poolInfo?.baseTokenSymbol}
+            datatokenValue={`${poolInfoOwner?.liquidity?.datatoken}`}
+            datatokenSymbol={poolInfo?.datatokenSymbol}
             poolShares={poolInfoOwner?.poolShares}
             conversion={poolInfoOwner?.totalLiquidityInOcean}
           >
@@ -434,18 +434,18 @@ export default function Pool(): ReactElement {
                 {poolInfo?.weightDt && (
                   <span
                     className={styles.titleInfo}
-                    title={`Weight of ${poolInfo?.weightOcean}% OCEAN & ${poolInfo?.weightDt}% ${poolInfo?.dtSymbol}`}
+                    title={`Weight of ${poolInfo?.weightBaseToken}% ${poolInfo?.baseTokenSymbol} & ${poolInfo?.weightDt}% ${poolInfo?.datatokenSymbol}`}
                   >
-                    {poolInfo?.weightOcean}/{poolInfo?.weightDt}
+                    {poolInfo?.weightBaseToken}/{poolInfo?.weightDt}
                   </span>
                 )}
                 <Graph />
               </>
             }
-            ocean={`${price?.ocean}`}
-            oceanSymbol={poolInfo?.baseTokenSymbol}
-            dt={`${price?.datatoken}`}
-            dtSymbol={poolInfo?.dtSymbol}
+            baseTokenValue={`${price?.ocean}`}
+            baseTokenSymbol={poolInfo?.baseTokenSymbol}
+            datatokenValue={`${price?.datatoken}`}
+            datatokenSymbol={poolInfo?.datatokenSymbol}
             poolShares={poolInfo?.totalPoolTokens}
             conversion={poolInfo?.totalLiquidityInOcean}
             showTVLLabel