From 61c87f34d7d07cc82314b9c24849207e45924a6f Mon Sep 17 00:00:00 2001 From: gomes <17035424+gomesalexandre@users.noreply.github.com> Date: Wed, 22 Nov 2023 19:00:11 +0100 Subject: [PATCH] feat: lending support all thor-supported assets as borrow (#5675) --- src/pages/Lending/AvailablePools.tsx | 2 +- .../Pool/components/Borrow/BorrowInput.tsx | 21 ++++----- .../Pool/components/Repay/RepayInput.tsx | 28 ++++-------- src/pages/Lending/YourLoans.tsx | 2 +- .../hooks/useAllLendingPositionsData.tsx | 2 +- .../hooks/useLendingSupportedAssets.ts | 45 ++++++++++--------- 6 files changed, 48 insertions(+), 52 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(() => , []) - const { data: lendingSupportedAssets } = useLendingSupportedAssets() + const { data: lendingSupportedAssets } = useLendingSupportedAssets({ type: 'collateral' }) const lendingRows = useMemo(() => { if (!lendingSupportedAssets) return new Array(2).fill(null).map(() => ) diff --git a/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx b/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx index 25876c63229..e96fa6e2f7d 100644 --- a/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx +++ b/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx @@ -1,5 +1,6 @@ import { Button, CardFooter, Collapse, Skeleton, Stack } from '@chakra-ui/react' import { type AccountId, type AssetId } from '@shapeshiftoss/caip' +import noop from 'lodash/noop' import { useCallback, useEffect, useMemo, useState } from 'react' import { useTranslate } from 'react-polyglot' import { useHistory } from 'react-router' @@ -69,13 +70,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 +87,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,16 +240,16 @@ export const BorrowInput = ({ history.push(BorrowRoutePaths.Sweep) }, [history, isSweepNeeded]) - const depositAssetSelectComponent = useMemo(() => { + const collateralAssetSelectComponent = useMemo(() => { return ( ) - }, [collateralAssetId, handleAssetChange, handleBorrowAssetClick]) + }, [collateralAssetId, handleAssetChange]) const borrowAssetSelectComponent = useMemo(() => { return ( @@ -327,7 +328,7 @@ export const BorrowInput = ({ onAccountIdChange={handleCollateralAccountIdChange} formControlProps={formControlProps} layout='inline' - labelPostFix={depositAssetSelectComponent} + labelPostFix={collateralAssetSelectComponent} /> [0], []) - const assetsById = useAppSelector(selectAssets) - - const [repaymentSupportedAssets, setRepaymentSupportedAssets] = useState([]) + const { data: lendingSupportedAssets } = useLendingSupportedAssets({ type: 'borrow' }) useEffect(() => { - ;(async () => { - if (!repaymentAsset) setRepaymentAsset(assetsById[collateralAssetId] as Asset) + if (!lendingSupportedAssets) return - 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]) + setRepaymentAsset(lendingSupportedAssets[0]) + }, [lendingSupportedAssets, setRepaymentAsset]) const useLendingQuoteCloseQueryArgs = useMemo( () => ({ @@ -130,14 +120,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(() => , []) - 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 13181903565..44454c4adfe 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..2e4970f9652 100644 --- a/src/pages/Lending/hooks/useLendingSupportedAssets.ts +++ b/src/pages/Lending/hooks/useLendingSupportedAssets.ts @@ -1,5 +1,7 @@ import { useQuery } from '@tanstack/react-query' import { getConfig } from 'config' +import { useCallback } from 'react' +import { bnOrZero } from 'lib/bignumber/bignumber' 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 +11,14 @@ 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( - `${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' || bnOrZero(pool.loan_collateral).gt(0)), ) return availablePools @@ -42,7 +29,25 @@ export const useLendingSupportedAssets = () => { }) .filter(isSome) }, + [type], + ) + + const lendingSupportedAssetsQuery = useQuery({ + staleTime: Infinity, + queryKey, + queryFn: async () => { + const daemonUrl = getConfig().REACT_APP_THORCHAIN_NODE_URL + const poolResponse = await thorService.get( + `${daemonUrl}/lcd/thorchain/pools`, + ) + if (poolResponse.isOk()) { + const allPools = poolResponse.unwrap().data + + return allPools + } + }, + select: selectSupportedAssets, }) - return lendingPositionData + return lendingSupportedAssetsQuery }