Skip to content

Fix: Borrow tab #375

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DaniiRix wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Fix: Borrow tab #375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8c267f7
fix: null value access
DaniiRix Oct 8, 2025
ca46d94
style: fix token select menu visibility
DaniiRix Oct 8, 2025
2ebf2c7
style: minor ui fixes
DaniiRix Oct 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 15 additions & 7 deletions src/components/Lending/TokenInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ const customSelectStyles = {
}),
option: (provided, state) => ({
...provided,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
backgroundColor: state.isSelected ? '#4A5568' : state.isFocused ? '#3f444e' : '#222429',
color: 'white',
'&:active': {
Expand Down Expand Up @@ -85,8 +88,13 @@ export function LendingInput({
}) {
const router = useRouter();
const { includeRewardApy } = router.query;

// const handlePercentChange = (percent) => {
// onAmountChange(Number(amount * percent).toFixed(2));
// };

return (
<TokenContainer h="144px">
<TokenContainer h="144px" style={{ position: 'relative', zIndex: isBorrow ? 1 : 2 }}>
<TokenLabel>{isBorrow ? 'You Borrow' : 'Collateral'}</TokenLabel>
{!isBorrow ? (
<Flex justifyContent={'flex-end'} pr="8" gap="2" position={'absolute'} right={'0'} fontSize={'12px'}>
Expand All @@ -107,7 +115,7 @@ export function LendingInput({
</Flex>
) : null}
<Flex flexDir={{ md: 'row' }} gap={{ base: '12px', md: '8px' }} position={'relative'}>
<Box pos="relative" display={'flex'} justifyContent={'space-between'}>
<Box pos="relative" display={'flex'} justifyContent={'space-between'} style={{ zIndex: isBorrow ? 1 : 2 }}>
<TokenInput
width="50%"
placeholder="0"
Expand Down Expand Up @@ -142,25 +150,25 @@ export function LendingInput({
</Text>
) : null}
</AmountUsd>
{isBorrow ? (
{/* {isBorrow ? (
<Flex gap="8px" mt="2" justify="flex-end">
<Button onClick={() => onAmountChange('25%')} size="xs">
<Button onClick={() => handlePercentChange(0.25)} size="xs">
<Text fontSize={'14px'} fontWeight={'bold'}>
25%
</Text>
</Button>
<Button onClick={() => onAmountChange('50%')} size={'xs'}>
<Button onClick={() => handlePercentChange(0.5)} size={'xs'}>
<Text fontSize={'14px'} fontWeight={'bold'}>
50%
</Text>
</Button>
<Button onClick={() => onAmountChange('75%')} size={'xs'}>
<Button onClick={() => handlePercentChange(0.75)} size={'xs'}>
<Text fontSize={'14px'} fontWeight={'bold'}>
75%
</Text>
</Button>
</Flex>
) : null}
) : null} */}
</Flex>
</TokenContainer>
);
Expand Down
34 changes: 22 additions & 12 deletions src/components/Lending/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,9 @@ const YieldsRow = ({ data, index, style, amountsProvided }) => {
style={{ position: 'absolute' }}
alt={row.project}
/>
<span style={{ marginLeft: '28px' }}>{name}</span>
<Tooltip label={name} aria-label={name} placement="top">
<span style={{ marginLeft: '28px' }}>{name}</span>
</Tooltip>
</YieldsCell>
<YieldsCell
style={{
Expand All @@ -76,14 +78,8 @@ const YieldsRow = ({ data, index, style, amountsProvided }) => {

const customTokens = [
{
label: 'Stables',
value: 'STABLES',
logoURI: 'https://icons.llamao.fi/icons/pegged/usd_native?h=48&w=48'
},
{
label: 'ETH',
value: 'ETH',
logoURI: 'https://icons.llamao.fi/icons/pegged/ethereum?h=48&w=48'
label: 'All USD Stablecoins',
value: 'STABLES'
}
];
const useGetPrices = (tokens) => {
Expand Down Expand Up @@ -427,9 +423,11 @@ const Lending = ({ data: { yields: initialData, ...props }, isLoading }) => {
}}
amount={amountToLend || ''}
onAmountChange={setAmountToLend}
tokenPlaceholder="Token to Lend"
tokenPlaceholder="Select token"
/>
<SwapInputArrow
bottom="0px"
zIndex={10}
onClick={() => {
router.push(
{
Expand Down Expand Up @@ -462,7 +460,7 @@ const Lending = ({ data: { yields: initialData, ...props }, isLoading }) => {
}}
amount={amountToBorrow || ''}
onAmountChange={setAmountToBorrow}
tokenPlaceholder="Token to Borrow"
tokenPlaceholder="Select token"
isBorrow
/>
</Flex>
Expand Down Expand Up @@ -516,7 +514,19 @@ const Lending = ({ data: { yields: initialData, ...props }, isLoading }) => {
</TabButtonsContainer>
<TabContent>
{filteredPoolPairs.length === 0 ? (
<NotFound text={'Select a lending and borrowing token to see the available pairs.'} size="200px" />
<>
{!selectedLendToken || !selectedBorrowToken ? (
<NotFound
text={'Select a lending and borrowing token to see the available pairs.'}
size="200px"
/>
) : (
<NotFound
text={'No available pairs found. Please try another lending and borrowing token.'}
size="200px"
/>
)}
</>
) : (
<YieldsContainer ref={containerRef} style={{ paddingTop: 0 }}>
<ColumnHeader
Expand Down
13 changes: 7 additions & 6 deletions src/props/getLendingProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export async function getLSDPageData(pools) {

let lsdApy = pools
.filter((p) => lsdProtocolsSlug.includes(p.project) && p.chain === 'Ethereum' && p.symbol.includes('ETH'))
.concat(pools.find((i) => i.project === 'crypto.com-staked-eth'))
.concat(pools.find((i) => i.project === 'crypto.com-staked-eth') || [])
.map((p) => ({
...p,
name: p.project
Expand Down Expand Up @@ -73,7 +73,8 @@ async function getLendBorrowData(pools: Array<IPool> = []) {

const apyBaseBorrow = x.apyBaseBorrow !== null ? -x.apyBaseBorrow : null;
const apyRewardBorrow = x.apyRewardBorrow;
const apyBorrow = apyBaseBorrow === null && apyRewardBorrow === null ? null : apyBaseBorrow + apyRewardBorrow;
const apyBorrow =
apyBaseBorrow === null && apyRewardBorrow === null ? null : (apyBaseBorrow || 0) + (apyRewardBorrow || 0);
const isBorrowable = x.borrowable || x.totalBorrowUsd > 0;
const lsdApy =
lsdData.find((i) => p?.symbol?.toLowerCase().includes(i.symbol?.toLowerCase()) && !p.symbol?.includes('-'))
Expand All @@ -83,12 +84,12 @@ async function getLendBorrowData(pools: Array<IPool> = []) {
const compoundData = compoundPools.find(
(a) => a.underlyingTokens[0].toLowerCase() === x.underlyingTokens[0].toLowerCase()
);
totalAvailableUsd = compoundData?.totalSupplyUsd - compoundData?.totalBorrowUsd;
totalAvailableUsd = compoundData ? compoundData.totalSupplyUsd - compoundData.totalBorrowUsd : null;
} else if (p.project === 'morpho-aave') {
const aaveData = aavev2Pools.find(
(a) => a.underlyingTokens[0].toLowerCase() === x.underlyingTokens[0].toLowerCase()
);
totalAvailableUsd = aaveData?.totalSupplyUsd - aaveData?.totalBorrowUsd;
totalAvailableUsd = aaveData ? aaveData.totalSupplyUsd - aaveData.totalBorrowUsd : null;
} else if (x.totalSupplyUsd === null && x.totalBorrowUsd === null) {
totalAvailableUsd = null;
} else if (cdpPools.includes(x.pool)) {
Expand Down Expand Up @@ -117,11 +118,11 @@ async function getLendBorrowData(pools: Array<IPool> = []) {
borrowFactor: x.borrowFactor,
totalAvailableUsd,
apyBorrow,
rewardTokens: (p.apyReward ?? 0) > 0 || x.apyRewardBorrow > 0 ? x.rewardTokens : p.rewardTokens
rewardTokens: (p.apyReward ?? 0) > 0 || (x.apyRewardBorrow || 0) > 0 ? x.rewardTokens : p.rewardTokens
};
})
.filter(Boolean)
.sort((a, b) => b!.totalSupplyUsd - a!.totalSupplyUsd) as Array<IPool>;
.sort((a, b) => (b?.totalSupplyUsd || 0) - (a?.totalSupplyUsd || 0)) as Array<IPool>;

return {
yields: pools,
Expand Down