Merge pull request #1078 from galacticcouncil/86bxn6nej

Add positions amount
galacticcouncil · Mar 7, 2024 · 8f1c6ac · 8f1c6ac
2 parents cf01dca + d9fbce0
commit 8f1c6ac
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 90 deletions.
diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json
@@ -7,6 +7,8 @@
   "price": "Price",
   "tvl": "Total value locked",
   "fee": "Fee",
+  "details": "Details",
+  "manage": "Manage",
   "24Volume": "24h volume",
   "duration.left": "{{duration}} left",
   "duration.ago": "{{duration}} ago",
@@ -213,6 +215,8 @@
   "liquidity.asset.actions.joinFarms": "Join Farms",
   "liquidity.asset.actions.header": "{{tokens}} actions",
   "liquidity.asset.actions.myPositions": "My positions",
+  "liquidity.asset.actions.myPositions.amount_one": "{{count}} Position",
+  "liquidity.asset.actions.myPositions.amount_other": "{{count}} Positions",
   "liquidity.asset.actions.farmDetails_one": "Farm Details",
   "liquidity.asset.actions.farmDetails_other": "Farms Details",
   "liquidity.asset.claim.button": "Claim all",

diff --git a/src/sections/pools/PoolsPage.utils.ts b/src/sections/pools/PoolsPage.utils.ts
@@ -227,10 +227,14 @@ export const usePools = () => {
                 ?.projected_apr_perc ?? BN_NAN,
             )
 
+      const filteredOmnipoolPositions = omnipoolPositions.data.filter(
+        (omnipoolPosition) => omnipoolPosition.assetId === assetId,
+      )
+
+      const filteredMiningPositions = miningPositions.data?.[assetId] ?? []
+
       const isPositions =
-        omnipoolPositions.data.some(
-          (omnipoolPosition) => omnipoolPosition.assetId === assetId,
-        ) || !!miningPositions.data?.[assetId]?.length
+        !!filteredOmnipoolPositions.length || !!filteredMiningPositions?.length
 
       return {
         id: assetId,
@@ -244,6 +248,8 @@ export const usePools = () => {
         isVolumeLoading: volumes.isLoading,
         fee,
         isFeeLoading: fees.isLoading,
+        omnipoolPositions: filteredOmnipoolPositions,
+        miningPositions: filteredMiningPositions,
         isPositions,
       }
     })

diff --git a/src/sections/pools/table/PoolsTable.tsx b/src/sections/pools/table/PoolsTable.tsx
@@ -12,6 +12,17 @@ import { usePoolTable } from "./PoolsTable.utils"
 import { TPool, TXYKPool } from "sections/pools/PoolsPage.utils"
 import { useNavigate, useSearch } from "@tanstack/react-location"
 import { assetsTableStyles } from "sections/wallet/assets/table/WalletAssetsTable.styled"
+import { theme } from "theme"
+import { css } from "@emotion/react"
+
+const styles = css`
+  @media ${theme.viewport.gte.sm} {
+    &:last-of-type {
+      padding-right: 30px;
+      padding-left: 0px;
+    }
+  }
+`
 
 export const PoolsTable = ({
   data,
@@ -65,15 +76,7 @@ export const PoolsTable = ({
                 css={{ cursor: "pointer" }}
               >
                 {row.getVisibleCells().map((cell) => (
-                  <TableData
-                    key={cell.id}
-                    css={{
-                      "&:last-of-type": {
-                        paddingLeft: 0,
-                      },
-                    }}
-                    sx={{ px: [10, 26] }}
-                  >
+                  <TableData key={cell.id} css={styles} sx={{ px: [10, 26] }}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableData>
                 ))}

diff --git a/src/sections/pools/table/PoolsTable.utils.tsx b/src/sections/pools/table/PoolsTable.utils.tsx
@@ -16,28 +16,14 @@ import { theme } from "theme"
 import { useRpcProvider } from "providers/rpcProvider"
 import { MultipleIcons } from "components/MultipleIcons/MultipleIcons"
 import { AssetLogo } from "components/AssetIcon/AssetIcon"
-import {
-  TPool,
-  TXYKPool,
-  derivePoolAccount,
-  isXYKPoolType,
-} from "sections/pools/PoolsPage.utils"
+import { TPool, TXYKPool, isXYKPoolType } from "sections/pools/PoolsPage.utils"
 import { Farm, useFarmAprs, useFarms } from "api/farms"
 import { GlobalFarmRowMulti } from "sections/pools/farms/components/globalFarm/GlobalFarmRowMulti"
 import { Button, ButtonTransparent } from "components/Button/Button"
 import ChevronRightIcon from "assets/icons/ChevronRight.svg?react"
-import PlusIcon from "assets/icons/PlusIcon.svg?react"
 import ManageIcon from "assets/icons/IconEdit.svg?react"
-import { BN_0, BN_1, BN_MILL } from "utils/constants"
+import { BN_0, BN_1 } from "utils/constants"
 import Skeleton from "react-loading-skeleton"
-import {
-  Page,
-  TransferModal,
-} from "sections/pools/stablepool/transfer/TransferModal"
-import { AddLiquidity } from "sections/pools/modals/AddLiquidity/AddLiquidity"
-import { useAccountBalances } from "api/accountBalances"
-import { useStableswapPool } from "api/stableswap"
-import { normalizeBigNumber } from "utils/balance"
 import { useAccount } from "sections/web3-connect/Web3Connect.utils"
 import BN from "bignumber.js"
 import { CellSkeleton } from "components/Skeleton/CellSkeleton"
@@ -147,23 +133,11 @@ const AddLiqduidityButton = ({
   const { t } = useTranslation()
   const { assets } = useRpcProvider()
 
-  const [addLiquidityPool, setAddLiquidityPool] = useState<
-    TPool | TXYKPool | undefined
-  >(undefined)
-
-  const [addLiquidityStablepool, setLiquidityStablepool] = useState<Page>()
-
   const isXykPool = isXYKPoolType(pool)
 
   const assetMeta = assets.getAsset(pool.id)
   const isStablePool = assets.isStableSwap(assetMeta)
 
-  const poolAccountAddress = derivePoolAccount(assetMeta.id)
-
-  const stablePoolBalance = useAccountBalances(
-    isStablePool ? poolAccountAddress : undefined,
-  )
-
   const userStablePoolBalance = useTokenBalance(
     isStablePool ? pool.id : undefined,
     account?.address,
@@ -172,40 +146,28 @@ const AddLiqduidityButton = ({
   const isPosition =
     userStablePoolBalance.data?.freeBalance.gt(0) ||
     (isXykPool ? pool.shareTokenIssuance?.myPoolShare?.gt(0) : pool.isPositions)
-  const stablepool = useStableswapPool(isStablePool ? assetMeta.id : undefined)
-
-  const reserves = isStablePool
-    ? (stablePoolBalance.data?.balances ?? []).map((balance) => {
-        const id = balance.id.toString()
-        const meta = assets.getAsset(id)
-
-        return {
-          asset_id: Number(id),
-          decimals: meta.decimals,
-          amount: balance.freeBalance.toString(),
-        }
-      })
-    : []
-
-  const onClick = () => {
-    if (isPosition) {
-      onRowSelect(pool.id)
-    } else {
-      isStablePool
-        ? setLiquidityStablepool(Page.OPTIONS)
-        : setAddLiquidityPool(pool)
-    }
-  }
+
+  const positionsAmount = isPosition
+    ? !isXykPool
+      ? BN(pool.omnipoolPositions.length)
+          .plus(pool.miningPositions.length)
+          .plus(userStablePoolBalance.data?.freeBalance.gt(0) ? 1 : 0)
+      : pool.shareTokenIssuance?.myPoolShare?.gt(0)
+      ? BN_1
+      : undefined
+    : undefined
+
+  const onClick = () => onRowSelect(pool.id)
 
   return (
     <div
       onClick={(e) => {
         e.stopPropagation()
       }}
+      css={{ position: "relative" }}
     >
       <Button
         size="small"
-        disabled={!pool.canAddLiquidity || account?.isExternalWalletConnected}
         css={{
           borderColor: `rgba(${theme.rgbColors.brightBlue300}, 0.4)`,
           height: 26,
@@ -219,30 +181,25 @@ const AddLiqduidityButton = ({
         }}
         onClick={onClick}
       >
-        <Icon icon={isPosition ? <ManageIcon /> : <PlusIcon />} size={12} />
-        {isPosition ? "Manage" : t("add")}
+        {isPosition ? <Icon icon={<ManageIcon />} size={12} /> : null}
+        {isPosition ? t("manage") : t("details")}
       </Button>
-      {addLiquidityPool && (
-        <AddLiquidity
-          isOpen
-          onClose={() => setAddLiquidityPool(undefined)}
-          pool={addLiquidityPool}
-        />
-      )}
-      {addLiquidityStablepool !== undefined && !isXykPool && (
-        <TransferModal
-          pool={{
-            ...pool,
-            isStablePool,
-            reserves,
-            stablepoolFee: stablepool.data?.fee
-              ? normalizeBigNumber(stablepool.data.fee).div(BN_MILL)
-              : undefined,
+      {positionsAmount?.gt(0) && (
+        <Text
+          fs={9}
+          css={{
+            position: "absolute",
+            bottom: "-14px",
+            whiteSpace: "nowrap",
+            width: "100%",
+            textAlign: "center",
           }}
-          isOpen
-          defaultPage={addLiquidityStablepool}
-          onClose={() => setLiquidityStablepool(undefined)}
-        />
+          color="whiteish500"
+        >
+          {t("liquidity.asset.actions.myPositions.amount", {
+            count: positionsAmount.toNumber(),
+          })}
+        </Text>
       )}
     </div>
   )
@@ -474,9 +431,6 @@ export const usePoolTable = (
               pool={row.original}
               onRowSelect={onRowSelect}
             />
-            <ButtonTransparent>
-              <Icon sx={{ color: "darkBlue300" }} icon={<ChevronRightIcon />} />
-            </ButtonTransparent>
           </div>
         ),
       }),