From 2274dacb062f7b601fb37a07a5e663a2f936d043 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Wed, 22 Nov 2023 00:32:08 +0100
Subject: [PATCH] feat: lending support all thor-supported assets as borrow

---
 src/pages/Lending/AvailablePools.tsx          |  2 +-
 .../Pool/components/Borrow/BorrowInput.tsx    | 17 +++----
 .../Pool/components/Repay/RepayInput.tsx      | 30 +++----------
 src/pages/Lending/YourLoans.tsx               |  2 +-
 .../hooks/useAllLendingPositionsData.tsx      |  2 +-
 .../hooks/useLendingSupportedAssets.ts        | 44 +++++++++++--------
 6 files changed, 44 insertions(+), 53 deletions(-)

diff --git a/src/pages/Lending/AvailablePools.tsx b/src/pages/Lending/AvailablePools.tsx
index 7d09cd38503..d85f3875e39 100644
--- a/src/pages/Lending/AvailablePools.tsx
+++ b/src/pages/Lending/AvailablePools.tsx
@@ -86,7 +86,7 @@ export const AvailablePools = () => {
     [history, path],
   )
   const headerComponent = useMemo(() => <LendingHeader />, [])
-  const { data: lendingSupportedAssets } = useLendingSupportedAssets()
+  const { data: lendingSupportedAssets } = useLendingSupportedAssets({ type: 'collateral' })
 
   const lendingRows = useMemo(() => {
     if (!lendingSupportedAssets) return new Array(2).fill(null).map(() => <Skeleton height={16} />)
diff --git a/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx b/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx
index 1d41549a834..b8f73495085 100644
--- a/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx
+++ b/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx
@@ -69,13 +69,13 @@ export const BorrowInput = ({
   const translate = useTranslate()
   const history = useHistory()
 
-  const { data: lendingSupportedAssets } = useLendingSupportedAssets()
+  const { data: borrowAssets } = useLendingSupportedAssets({ type: 'borrow' })
 
   useEffect(() => {
-    if (!lendingSupportedAssets) return
+    if (!borrowAssets) return
 
-    setBorrowAsset(lendingSupportedAssets[0])
-  }, [lendingSupportedAssets, setBorrowAsset])
+    setBorrowAsset(borrowAssets[0])
+  }, [borrowAssets, setBorrowAsset])
 
   const collateralAsset = useAppSelector(state => selectAssetById(state, collateralAssetId))
 
@@ -86,9 +86,9 @@ export const BorrowInput = ({
     buyAssetSearch.open({
       onClick: setBorrowAsset,
       title: 'lending.borrow',
-      assets: lendingSupportedAssets,
+      assets: borrowAssets,
     })
-  }, [buyAssetSearch, lendingSupportedAssets, setBorrowAsset])
+  }, [borrowAssets, buyAssetSearch, setBorrowAsset])
 
   const handleAssetChange = useCallback((asset: Asset) => {
     return console.info(asset)
@@ -239,10 +239,11 @@ export const BorrowInput = ({
     history.push(BorrowRoutePaths.Sweep)
   }, [history, isSweepNeeded])
 
-  const depositAssetSelectComponent = useMemo(() => {
+  const collateralAssetSelectComponent = useMemo(() => {
     return (
       <TradeAssetSelect
         assetId={collateralAssetId}
+        // no-op
         onAssetClick={handleBorrowAssetClick}
         onAssetChange={handleAssetChange}
         isReadOnly
@@ -327,7 +328,7 @@ export const BorrowInput = ({
           onAccountIdChange={handleCollateralAccountIdChange}
           formControlProps={formControlProps}
           layout='inline'
-          labelPostFix={depositAssetSelectComponent}
+          labelPostFix={collateralAssetSelectComponent}
         />
         <TradeAssetInput
           assetId={borrowAsset?.assetId ?? ''}
diff --git a/src/pages/Lending/Pool/components/Repay/RepayInput.tsx b/src/pages/Lending/Pool/components/Repay/RepayInput.tsx
index eaf91efb7a9..526a51a3d94 100644
--- a/src/pages/Lending/Pool/components/Repay/RepayInput.tsx
+++ b/src/pages/Lending/Pool/components/Repay/RepayInput.tsx
@@ -15,7 +15,7 @@ import {
   Tooltip,
 } from '@chakra-ui/react'
 import type { AccountId, AssetId } from '@shapeshiftoss/caip'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router'
 import { Amount } from 'components/Amount/Amount'
@@ -26,14 +26,12 @@ import { Text } from 'components/Text'
 import { useModal } from 'hooks/useModal/useModal'
 import type { Asset } from 'lib/asset-service'
 import { bn, bnOrZero } from 'lib/bignumber/bignumber'
-import { thorchainSwapper } from 'lib/swapper/swappers/ThorchainSwapper/ThorchainSwapper'
-import { isSome } from 'lib/utils'
 import { useLendingQuoteCloseQuery } from 'pages/Lending/hooks/useLendingCloseQuery'
 import { useLendingPositionData } from 'pages/Lending/hooks/useLendingPositionData'
+import { useLendingSupportedAssets } from 'pages/Lending/hooks/useLendingSupportedAssets'
 import { useQuoteEstimatedFeesQuery } from 'pages/Lending/hooks/useQuoteEstimatedFees'
 import {
   selectAssetById,
-  selectAssets,
   selectMarketDataById,
   selectPortfolioCryptoBalanceBaseUnitByFilter,
   selectUserCurrencyToUsdRate,
@@ -87,21 +85,7 @@ export const RepayInput = ({
 
   const percentOptions = useMemo(() => [0], [])
 
-  const assetsById = useAppSelector(selectAssets)
-
-  const [repaymentSupportedAssets, setRepaymentSupportedAssets] = useState<Asset[]>([])
-
-  useEffect(() => {
-    ;(async () => {
-      if (!repaymentAsset) setRepaymentAsset(assetsById[collateralAssetId] as Asset)
-
-      const assets = Object.values(assetsById) as Asset[]
-      const thorSellAssets = (await thorchainSwapper.filterAssetIdsBySellable(assets))
-        .map(assetId => assetsById[assetId])
-        .filter(isSome)
-      setRepaymentSupportedAssets(thorSellAssets)
-    })()
-  }, [assetsById, collateralAssetId, repaymentAsset, setRepaymentAsset])
+  const { data: lendingSupportedAssets } = useLendingSupportedAssets({ type: 'borrow' })
 
   const useLendingQuoteCloseQueryArgs = useMemo(
     () => ({
@@ -130,14 +114,14 @@ export const RepayInput = ({
 
   const buyAssetSearch = useModal('buyAssetSearch')
   const handleRepaymentAssetClick = useCallback(() => {
-    if (!repaymentSupportedAssets.length) return
+    if (!lendingSupportedAssets?.length) return
 
     buyAssetSearch.open({
       onClick: setRepaymentAsset,
-      title: 'lending.borrow',
-      assets: repaymentSupportedAssets,
+      title: 'lending.repay',
+      assets: lendingSupportedAssets,
     })
-  }, [buyAssetSearch, repaymentSupportedAssets, setRepaymentAsset])
+  }, [buyAssetSearch, lendingSupportedAssets, setRepaymentAsset])
 
   const handleAssetChange = useCallback((asset: Asset) => {
     return console.info(asset)
diff --git a/src/pages/Lending/YourLoans.tsx b/src/pages/Lending/YourLoans.tsx
index 0ff110d5f60..4d30c259983 100644
--- a/src/pages/Lending/YourLoans.tsx
+++ b/src/pages/Lending/YourLoans.tsx
@@ -130,7 +130,7 @@ export const YourLoans = () => {
   const translate = useTranslate()
   const lendingHeader = useMemo(() => <LendingHeader />, [])
 
-  const { data: lendingSupportedAssets } = useLendingSupportedAssets()
+  const { data: lendingSupportedAssets } = useLendingSupportedAssets({ type: 'collateral' })
 
   const history = useHistory()
 
diff --git a/src/pages/Lending/hooks/useAllLendingPositionsData.tsx b/src/pages/Lending/hooks/useAllLendingPositionsData.tsx
index 0dfca6eb12f..da0a5103127 100644
--- a/src/pages/Lending/hooks/useAllLendingPositionsData.tsx
+++ b/src/pages/Lending/hooks/useAllLendingPositionsData.tsx
@@ -15,7 +15,7 @@ type UseAllLendingPositionsDataProps = {
 }
 
 export const useAllLendingPositionsData = ({ assetId }: UseAllLendingPositionsDataProps = {}) => {
-  const { data: lendingSupportedAssets } = useLendingSupportedAssets()
+  const { data: lendingSupportedAssets } = useLendingSupportedAssets({ type: 'collateral' })
 
   const accounts = useMemo(
     () =>
diff --git a/src/pages/Lending/hooks/useLendingSupportedAssets.ts b/src/pages/Lending/hooks/useLendingSupportedAssets.ts
index 2922ef5b759..f26f7a31065 100644
--- a/src/pages/Lending/hooks/useLendingSupportedAssets.ts
+++ b/src/pages/Lending/hooks/useLendingSupportedAssets.ts
@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import { getConfig } from 'config'
+import { useCallback } from 'react'
 import type { ThornodePoolResponse } from 'lib/swapper/swappers/ThorchainSwapper/types'
 import { poolAssetIdToAssetId } from 'lib/swapper/swappers/ThorchainSwapper/utils/poolAssetHelpers/poolAssetHelpers'
 import { thorService } from 'lib/swapper/swappers/ThorchainSwapper/utils/thorService'
@@ -9,29 +10,16 @@ import { store } from 'state/store'
 
 const queryKey = ['lendingSupportedAssets']
 
-export const useLendingSupportedAssets = () => {
-  const lendingPositionData = useQuery({
-    staleTime: Infinity,
-    queryKey,
-    queryFn: async () => {
-      const daemonUrl = getConfig().REACT_APP_THORCHAIN_NODE_URL
-      const poolResponse = await thorService.get<ThornodePoolResponse[]>(
-        `${daemonUrl}/lcd/thorchain/pools`,
-      )
-      if (poolResponse.isOk()) {
-        const allPools = poolResponse.unwrap().data
-
-        return allPools
-      }
-    },
-    select: data => {
+export const useLendingSupportedAssets = ({ type }: { type: 'collateral' | 'borrow' }) => {
+  const selectSupportedAssets = useCallback(
+    (data: ThornodePoolResponse[] | undefined) => {
       if (!data) return []
       const availablePools = data.filter(
         pool =>
           pool.status === 'Available' &&
-          // This is weird, but THORChain API is currently returning a loan_cr of 20000 for pools which don't support lending
-          pool.loan_cr !== '20000' &&
-          pool.loan_cr !== '0',
+          (type === 'borrow' ||
+            // This is weird, but THORChain API is currently returning a loan_cr of 20000 for pools which don't support lending
+            (pool.loan_cr !== '20000' && pool.loan_cr !== '0')),
       )
 
       return availablePools
@@ -42,6 +30,24 @@ export const useLendingSupportedAssets = () => {
         })
         .filter(isSome)
     },
+    [type],
+  )
+
+  const lendingPositionData = useQuery({
+    staleTime: Infinity,
+    queryKey,
+    queryFn: async () => {
+      const daemonUrl = getConfig().REACT_APP_THORCHAIN_NODE_URL
+      const poolResponse = await thorService.get<ThornodePoolResponse[]>(
+        `${daemonUrl}/lcd/thorchain/pools`,
+      )
+      if (poolResponse.isOk()) {
+        const allPools = poolResponse.unwrap().data
+
+        return allPools
+      }
+    },
+    select: selectSupportedAssets,
   })
 
   return lendingPositionData