From a9aeed4aecb5e1d5d166e21c3adff8b9363b4012 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 26 Jan 2022 12:41:21 +0000
Subject: [PATCH] define token address & symbol only once

---
 .../Asset/AssetActions/Pool/Actions.tsx       | 15 +++++--------
 .../Asset/AssetActions/Pool/Add/index.tsx     | 22 +++++++++++++------
 .../Asset/AssetActions/Pool/Remove.tsx        | 18 ++++++++-------
 .../Asset/AssetActions/Pool/index.tsx         |  7 +++---
 .../Asset/AssetActions/Trade/FormTrade.tsx    |  6 ++++-
 5 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/components/Asset/AssetActions/Pool/Actions.tsx b/src/components/Asset/AssetActions/Pool/Actions.tsx
index 83791e69c..522c92e0a 100644
--- a/src/components/Asset/AssetActions/Pool/Actions.tsx
+++ b/src/components/Asset/AssetActions/Pool/Actions.tsx
@@ -6,8 +6,6 @@ import ExplorerLink from '@shared/ExplorerLink'
 import SuccessConfetti from '@shared/SuccessConfetti'
 import { useWeb3 } from '@context/Web3'
 import TokenApproval from '@shared/TokenApproval'
-import { getOceanConfig } from '@utils/ocean'
-import { useAsset } from '@context/Asset'
 
 export default function Actions({
   isLoading,
@@ -16,9 +14,10 @@ export default function Actions({
   txId,
   actionName,
   amount,
-  coin,
   action,
-  isDisabled
+  isDisabled,
+  tokenAddress,
+  tokenSymbol
 }: {
   isLoading: boolean
   loaderMessage: string
@@ -26,12 +25,12 @@ export default function Actions({
   txId: string
   actionName: string
   amount?: string
-  coin?: string
   action: () => void
   isDisabled?: boolean
+  tokenAddress: string
+  tokenSymbol: string
 }): ReactElement {
   const { networkId } = useWeb3()
-  const { ddo } = useAsset()
 
   const actionButton = (
     <Button
@@ -44,10 +43,6 @@ export default function Actions({
     </Button>
   )
 
-  const config = getOceanConfig(ddo?.chainId)
-  const tokenAddress = config.oceanTokenAddress
-  const tokenSymbol = config.oceanTokenSymbol
-
   return (
     <>
       <div className={styles.actions}>
diff --git a/src/components/Asset/AssetActions/Pool/Add/index.tsx b/src/components/Asset/AssetActions/Pool/Add/index.tsx
index 6f97b9c32..4c5f3c148 100644
--- a/src/components/Asset/AssetActions/Pool/Add/index.tsx
+++ b/src/components/Asset/AssetActions/Pool/Add/index.tsx
@@ -30,7 +30,8 @@ export default function Add({
   totalBalance,
   swapFee,
   datatokenSymbol,
-  baseTokenSymbol,
+  tokenInSymbol,
+  tokenInAddress,
   fetchAllData
 }: {
   setShowAdd: (show: boolean) => void
@@ -39,7 +40,8 @@ export default function Add({
   totalBalance: PoolBalance
   swapFee: string
   datatokenSymbol: string
-  baseTokenSymbol: string
+  tokenInSymbol: string
+  tokenInAddress: string
   fetchAllData: () => void
 }): ReactElement {
   const { accountId, balance, web3 } = useWeb3()
@@ -51,7 +53,6 @@ export default function Add({
   const [newPoolTokens, setNewPoolTokens] = useState('0')
   const [newPoolShare, setNewPoolShare] = useState('0')
   const [isWarningAccepted, setIsWarningAccepted] = useState(false)
-  const [tokenInAddress, setTokenInAddress] = useState<string>()
 
   // Live validation rules
   // https://github.com/jquense/yup#number
@@ -72,8 +73,6 @@ export default function Add({
     async function getMaximum() {
       try {
         const poolInstance = new Pool(web3, LoggerInstance)
-        const tokenInAddress = await poolInstance.getBaseToken(poolAddress)
-        setTokenInAddress(tokenInAddress)
 
         const amountMaxPool = await poolInstance.getReserve(
           poolAddress,
@@ -90,7 +89,14 @@ export default function Add({
       }
     }
     getMaximum()
-  }, [web3, accountId, isAssetNetwork, poolAddress, balance?.ocean])
+  }, [
+    web3,
+    accountId,
+    isAssetNetwork,
+    poolAddress,
+    tokenInAddress,
+    balance?.ocean
+  ])
 
   // Submit
   async function handleAddLiquidity(amount: number, resetForm: () => void) {
@@ -134,7 +140,7 @@ export default function Add({
               {isWarningAccepted ? (
                 <FormAdd
                   tokenInAddress={tokenInAddress}
-                  tokenInSymbol={baseTokenSymbol}
+                  tokenInSymbol={tokenInSymbol}
                   amountMax={amountMax}
                   setAmount={setAmount}
                   totalPoolTokens={totalPoolTokens}
@@ -182,6 +188,8 @@ export default function Add({
               actionName={content.pool.add.action}
               action={submitForm}
               amount={amount}
+              tokenAddress={tokenInAddress}
+              tokenSymbol={tokenInSymbol}
               txId={txId}
             />
             {debug && <DebugOutput output={values} />}
diff --git a/src/components/Asset/AssetActions/Pool/Remove.tsx b/src/components/Asset/AssetActions/Pool/Remove.tsx
index 58050e207..961d441e0 100644
--- a/src/components/Asset/AssetActions/Pool/Remove.tsx
+++ b/src/components/Asset/AssetActions/Pool/Remove.tsx
@@ -29,16 +29,16 @@ export default function Remove({
   poolAddress,
   poolTokens,
   totalPoolTokens,
-  baseTokenAddress,
-  baseTokenSymbol,
+  tokenOutAddress,
+  tokenOutSymbol,
   fetchAllData
 }: {
   setShowRemove: (show: boolean) => void
   poolAddress: string
   poolTokens: string
   totalPoolTokens: string
-  baseTokenAddress: string
-  baseTokenSymbol: string
+  tokenOutAddress: string
+  tokenOutSymbol: string
   fetchAllData: () => void
 }): ReactElement {
   const { accountId, web3 } = useWeb3()
@@ -64,7 +64,7 @@ export default function Remove({
       const result = await poolInstance.exitswapPoolAmountIn(
         accountId,
         poolAddress,
-        baseTokenAddress,
+        tokenOutAddress,
         amountPoolShares,
         minOceanAmount
       )
@@ -78,7 +78,7 @@ export default function Remove({
     }
   }
 
-  // Get and set max percentage
+  // TODO: Get and set max percentage
   useEffect(() => {
     if (!accountId || !poolTokens) return
 
@@ -93,7 +93,7 @@ export default function Remove({
     debounce(async (newAmountPoolShares) => {
       const newAmountOcean = await poolInstance.calcSingleOutGivenPoolIn(
         poolAddress,
-        baseTokenAddress,
+        tokenOutAddress,
         newAmountPoolShares
       )
       setAmountOcean(newAmountOcean)
@@ -185,7 +185,7 @@ export default function Remove({
         </div>
         <div>
           <p>{content.pool.remove.output.titleOut} minimum</p>
-          <Token symbol={baseTokenSymbol} balance={minOceanAmount} />
+          <Token symbol={tokenOutSymbol} balance={minOceanAmount} />
         </div>
       </div>
       <div className={styles.slippage}>
@@ -210,6 +210,8 @@ export default function Remove({
         successMessage="Successfully removed liquidity."
         isDisabled={!isAssetNetwork}
         txId={txId}
+        tokenAddress={tokenOutAddress}
+        tokenSymbol={tokenOutSymbol}
       />
     </div>
   )
diff --git a/src/components/Asset/AssetActions/Pool/index.tsx b/src/components/Asset/AssetActions/Pool/index.tsx
index ffa86d0e6..4a800922b 100644
--- a/src/components/Asset/AssetActions/Pool/index.tsx
+++ b/src/components/Asset/AssetActions/Pool/index.tsx
@@ -345,7 +345,8 @@ export default function Pool(): ReactElement {
           }}
           swapFee={poolInfo?.poolFee}
           datatokenSymbol={poolInfo?.datatokenSymbol}
-          baseTokenSymbol={poolInfo?.baseTokenSymbol}
+          tokenInAddress={poolInfo?.baseTokenAddress}
+          tokenInSymbol={poolInfo?.baseTokenSymbol}
           fetchAllData={fetchAllData}
         />
       ) : showRemove ? (
@@ -354,8 +355,8 @@ export default function Pool(): ReactElement {
           poolAddress={price?.address}
           poolTokens={poolInfoUser?.poolShares}
           totalPoolTokens={poolInfo?.totalPoolTokens}
-          baseTokenAddress={poolInfo?.baseTokenAddress}
-          baseTokenSymbol={poolInfo?.baseTokenSymbol}
+          tokenOutAddress={poolInfo?.baseTokenAddress}
+          tokenOutSymbol={poolInfo?.baseTokenSymbol}
           fetchAllData={fetchAllData}
         />
       ) : (
diff --git a/src/components/Asset/AssetActions/Trade/FormTrade.tsx b/src/components/Asset/AssetActions/Trade/FormTrade.tsx
index 20135bb4c..1581f74d8 100644
--- a/src/components/Asset/AssetActions/Trade/FormTrade.tsx
+++ b/src/components/Asset/AssetActions/Trade/FormTrade.tsx
@@ -38,6 +38,9 @@ export default function FormTrade({
   const [maximumDt, setMaximumDt] = useState(maxDt)
   const [isWarningAccepted, setIsWarningAccepted] = useState(false)
 
+  const tokenAddress = ''
+  const tokenSymbol = ''
+
   const validationSchema: Yup.SchemaOf<FormTradeData> = Yup.object()
     .shape({
       ocean: Yup.number()
@@ -152,8 +155,9 @@ export default function FormTrade({
                 : undefined
             }
             action={submitForm}
-            coin={coinFrom}
             txId={txId}
+            tokenAddress={tokenAddress}
+            tokenSymbol={tokenSymbol}
           />
 
           {debug && (