From a3103692d4d0653051419636934f0b5a70850652 Mon Sep 17 00:00:00 2001
From: Sashimi <93623541+sashimi36@users.noreply.github.com>
Date: Sat, 27 Aug 2022 17:18:10 -0700
Subject: [PATCH] Don't include rewards tokens in the token list (#254)

---
 .../liquidity/components/LiquidityRewardsCard.tsx |  4 ++--
 .../liquidity/components/ManageLiquidityCard.tsx  | 10 ++--------
 .../liquidity/components/UnderlyingAssetRow.tsx   | 15 ++++++++-------
 hooks/useRewardsQueries.ts                        |  5 +++--
 hooks/useTokenList.ts                             | 10 +---------
 5 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/features/liquidity/components/LiquidityRewardsCard.tsx b/features/liquidity/components/LiquidityRewardsCard.tsx
index 728c77cc..1b287512 100644
--- a/features/liquidity/components/LiquidityRewardsCard.tsx
+++ b/features/liquidity/components/LiquidityRewardsCard.tsx
@@ -146,8 +146,8 @@ export const LiquidityRewardsCard = ({
             ))}
           {pendingRewardsRenderedInline?.map(({ tokenInfo, tokenAmount }) => (
             <UnderlyingAssetRow
-              key={tokenInfo.symbol}
-              tokenSymbol={tokenInfo.symbol}
+              key={tokenInfo?.symbol}
+              tokenInfo={tokenInfo}
               tokenAmount={tokenAmount}
             />
           ))}
diff --git a/features/liquidity/components/ManageLiquidityCard.tsx b/features/liquidity/components/ManageLiquidityCard.tsx
index 123549f1..ee48861d 100644
--- a/features/liquidity/components/ManageLiquidityCard.tsx
+++ b/features/liquidity/components/ManageLiquidityCard.tsx
@@ -93,14 +93,8 @@ export const ManageLiquidityCard = ({
           Underlying assets
         </Text>
         <Column gap={6} css={{ paddingBottom: '$16' }}>
-          <UnderlyingAssetRow
-            tokenSymbol={tokenA.symbol}
-            tokenAmount={tokenAReserve}
-          />
-          <UnderlyingAssetRow
-            tokenSymbol={tokenB.symbol}
-            tokenAmount={tokenBReserve}
-          />
+          <UnderlyingAssetRow tokenInfo={tokenA} tokenAmount={tokenAReserve} />
+          <UnderlyingAssetRow tokenInfo={tokenB} tokenAmount={tokenBReserve} />
         </Column>
         <Inline css={{ paddingBottom: '$12' }}>
           {didProvideLiquidity && (
diff --git a/features/liquidity/components/UnderlyingAssetRow.tsx b/features/liquidity/components/UnderlyingAssetRow.tsx
index 4bce522d..c02b41f5 100644
--- a/features/liquidity/components/UnderlyingAssetRow.tsx
+++ b/features/liquidity/components/UnderlyingAssetRow.tsx
@@ -1,5 +1,4 @@
 import { useTokenDollarValue } from 'hooks/useTokenDollarValue'
-import { useTokenInfo } from 'hooks/useTokenInfo'
 import {
   Button,
   dollarValueFormatterWithDecimals,
@@ -12,20 +11,22 @@ import {
   Tooltip,
 } from 'junoblocks'
 
+import { TokenInfo } from '../../../queries/usePoolsListQuery'
+
 type UnderlyingAssetRowProps = {
-  tokenSymbol?: string
+  tokenInfo?: TokenInfo
   tokenAmount?: number
   visible?: boolean
 }
 
 export const UnderlyingAssetRow = ({
-  tokenSymbol,
+  tokenInfo,
   tokenAmount,
   visible = true,
 }: UnderlyingAssetRowProps) => {
-  const token = useTokenInfo(visible ? tokenSymbol : undefined)
+  const token = visible ? tokenInfo : undefined
   const [tokenDollarValue] = useTokenDollarValue(
-    visible ? tokenSymbol : undefined
+    visible ? tokenInfo?.symbol : undefined
   )
 
   const tokenAmountDollarValue = dollarValueFormatterWithDecimals(
@@ -46,14 +47,14 @@ export const UnderlyingAssetRow = ({
           logoURI={token?.logoURI}
           alt={token?.symbol}
         />
-        <Text variant="link">{tokenSymbol}</Text>
+        <Text variant="link">{token?.symbol}</Text>
       </Inline>
       <Inline align="center" gap={4}>
         <Inline gap={6}>
           <Text variant="body">
             {formatTokenBalance(tokenAmount, { includeCommaSeparation: true })}
           </Text>
-          <Text variant="secondary">{tokenSymbol}</Text>
+          <Text variant="secondary">{token?.symbol}</Text>
         </Inline>
         <Tooltip label={infoTooltipLabel} aria-label={infoTooltipLabel}>
           <Button
diff --git a/hooks/useRewardsQueries.ts b/hooks/useRewardsQueries.ts
index 0500c397..3a48c15b 100644
--- a/hooks/useRewardsQueries.ts
+++ b/hooks/useRewardsQueries.ts
@@ -32,14 +32,15 @@ export const usePendingRewards = ({ pool }: UsePendingRewardsArgs) => {
     async () => {
       if (shouldQueryRewards) {
         return await Promise.all(
-          pool.rewards_tokens.map(async ({ rewards_address, decimals }) => {
+          pool.rewards_tokens.map(async (rewardsToken) => {
+            const { rewards_address, decimals } = rewardsToken
             const { pending_rewards, denom } = await getPendingRewards(
               address,
               rewards_address,
               client
             )
 
-            const tokenInfo = getTokenInfoByDenom({ denom })
+            const tokenInfo = getTokenInfoByDenom({ denom }) || rewardsToken
             const tokenAmount = convertMicroDenomToDenom(
               Number(pending_rewards),
               decimals ?? tokenInfo.decimals
diff --git a/hooks/useTokenList.ts b/hooks/useTokenList.ts
index d7b1789f..55f1cd54 100644
--- a/hooks/useTokenList.ts
+++ b/hooks/useTokenList.ts
@@ -16,7 +16,7 @@ export const useTokenList = () => {
     '@token-list',
     () => {
       const tokenMapBySymbol = new Map()
-      /* serialize pool assets first */
+      /* serialize pool assets */
       poolsListResponse.pools.forEach(({ pool_assets }) => {
         pool_assets?.forEach((token) => {
           if (!tokenMapBySymbol.has(token.symbol)) {
@@ -24,14 +24,6 @@ export const useTokenList = () => {
           }
         })
       })
-      /* add unique rewards tokens if any */
-      poolsListResponse.pools.forEach(({ rewards_tokens }) => {
-        rewards_tokens?.forEach((token) => {
-          if (!tokenMapBySymbol.has(token.symbol)) {
-            tokenMapBySymbol.set(token.symbol, token)
-          }
-        })
-      })
 
       return {
         base_token: poolsListResponse.base_token,