Skip to content

Commit

Permalink
Merge pull request #43 from akanoce/polish-reserves
Browse files Browse the repository at this point in the history 
refactor: polish ui and reserves
  • Loading branch information
@akanoce
akanoce authored Jan 21, 2024
2 parents 70857f0 + c805655 commit 6bb2dd0
Show file tree
Hide file tree
Showing 5 changed files with 182 additions and 228 deletions.
2 changes: 1 addition & 1 deletion apps/web/src/components/BorrowUnderlyingAssetButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export const BorrowUnderlyingAssetButton: React.FC<Props> = ({
<Popover>
<PopoverTrigger>
<Button
colorScheme="green"
colorScheme="orange"
variant="outline"
size="sm"
isDisabled={
Expand Down
183 changes: 139 additions & 44 deletions apps/web/src/components/ReservesIncentives.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,34 @@ import {
Table,
TableCaption,
TableContainer,
Tag,
Tbody,
Td,
Text,
Th,
Thead,
Tr
Tr,
VStack
} from '@chakra-ui/react';
import { useMultipleSupplyWithBorrow } from '@/hooks/useMultipleSupplyWithBorrow';
import { CryptoIconMap, genericCryptoIcon } from '@/const/icons';

import BigNumber from 'bignumber.js';

const formatAPY = (apy?: number | string) => {
return `${(Number(apy ?? 0) * 100).toFixed(2)}%`;
};

const formatBalance = (balance?: number | string) => {
const bn = BigNumber(balance ?? 0);
if (bn.isZero()) return '0';
const isSmall = bn.lt(0.01);

if (isSmall) {
return `< 0.01`;
}
return `${Number(balance ?? 0).toFixed(2)}`;
};

type Props = {
address: string;
};
Expand Down Expand Up @@ -148,10 +165,10 @@ export const ReservesIncentives: React.FC<Props> = ({ address }) => {
<Th>Address</Th>
<Th>Price</Th>
<Th>Balance</Th>
<Th>Balance USDT</Th>
<Th>Available liquidity</Th>
<Th>Total debt</Th>
<Th>SupplyCaP</Th>
<Th>APY</Th>
<Th>Caps</Th>
<Th>Liquidity</Th>
<Th>Debt</Th>
<Th>Actions</Th>
</Tr>
</Thead>
Expand All @@ -169,7 +186,9 @@ export const ReservesIncentives: React.FC<Props> = ({ address }) => {
alt={reserveIncentive.symbol}
boxSize="30px"
/>
<Text>{reserveIncentive.name}</Text>
<Heading size="sm">
{reserveIncentive.name}
</Heading>
</HStack>
</Td>
<Td>
Expand All @@ -181,59 +200,135 @@ export const ReservesIncentives: React.FC<Props> = ({ address }) => {
/>
</Td>
<Td>
{new Intl.NumberFormat('it-IT', {
style: 'currency',
currency: 'USD'
}).format(
Number(reserveIncentive.priceInUSD)
)}
<Heading size="sm">
{new Intl.NumberFormat('it-IT', {
style: 'currency',
currency: 'USD'
}).format(
Number(
reserveIncentive.priceInUSD
)
)}
</Heading>
</Td>
<Td>
<Tag>
<VStack
spacing={0}
justify={'flex-start'}
align={'flex-start'}
>
<HStack spacing={1}>
<Text fontWeight={'semibold'}>
{reserveIncentive.balance}
</Text>
<Text>
<Heading size="sm">
{formatBalance(
reserveIncentive.balance
)}
</Heading>
<Text size="sm" as="sub">
{reserveIncentive.symbol}
</Text>
</HStack>
</Tag>
</Td>
<Td>
<Tag>
<HStack spacing={1}>
<Text fontWeight={'semibold'}>
{
<Heading size="sm">
{formatBalance(
reserveIncentive.underlyingBalanceUSD
}
)}
</Heading>
<Text size="sm" as="sub">
USD
</Text>
<Text>USD</Text>
</HStack>
</Tag>
</VStack>
</Td>
<Td>
<VStack
spacing={0}
justify={'flex-start'}
align={'flex-start'}
>
<Heading size="sm" color="green">
{formatAPY(
reserveIncentive.supplyAPY
)}
</Heading>
<Heading size="sm" color="orange">
{formatAPY(
reserveIncentive.variableBorrowAPY
)}
</Heading>
</VStack>
</Td>
<Td>
{new Intl.NumberFormat('it-IT', {
style: 'currency',
currency: 'USD'
}).format(
Number(
reserveIncentive.availableLiquidityUSD
)
)}
<VStack
spacing={0}
justify={'flex-start'}
align={'flex-start'}
>
<Heading size="sm" color="green">
{reserveIncentive.supplyCap}
</Heading>
<Heading size="sm" color="orange">
{reserveIncentive.borrowCap}
</Heading>
</VStack>
</Td>

<Td>
<VStack
spacing={0}
justify={'flex-start'}
align={'flex-start'}
>
<HStack spacing={1}>
<Heading size="sm">
{formatBalance(
reserveIncentive.availableLiquidity
)}
</Heading>
<Text size="sm" as="sub">
{reserveIncentive.symbol}
</Text>
</HStack>
<HStack spacing={1}>
<Heading size="sm">
{formatBalance(
reserveIncentive.availableLiquidityUSD
)}
</Heading>
<Text size="sm" as="sub">
USD
</Text>
</HStack>
</VStack>
</Td>
<Td>
{new Intl.NumberFormat('it-IT', {
style: 'currency',
currency: 'USD'
}).format(
Number(
reserveIncentive.totalDebtUSD
)
)}
<VStack
spacing={0}
justify={'flex-start'}
align={'flex-start'}
>
<HStack spacing={1}>
<Heading size="sm">
{formatBalance(
reserveIncentive.totalDebt
)}
</Heading>
<Text size="sm" as="sub">
{reserveIncentive.symbol}
</Text>
</HStack>
<HStack spacing={1}>
<Heading size="sm">
{formatBalance(
reserveIncentive.totalDebtUSD
)}
</Heading>
<Text size="sm" as="sub">
USD
</Text>
</HStack>
</VStack>
</Td>

<Td>{reserveIncentive.supplyCapUSD}</Td>
<Td>
<HStack spacing={2}>
<SupplyUnderlyingAssetButton
Expand Down
47 changes: 42 additions & 5 deletions apps/web/src/components/SuppliedAssets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import {
CardHeader,
HStack,
Heading,
Image,
Table,
TableContainer,
Tag,
Tbody,
Td,
Text,
Expand All @@ -18,6 +18,7 @@ import {
} from '@chakra-ui/react';
import { WithdrawAssetButton } from './WithdrawAssetButton';
import BigNumber from 'bignumber.js';
import { CryptoIconMap, genericCryptoIcon } from '@/const/icons';

const formatAPY = (apy?: number | string) => {
return `${(Number(apy ?? 0) * 100).toFixed(2)}%`;
Expand Down Expand Up @@ -72,9 +73,22 @@ export const SuppliedAssets = ({ address }: Props) => {
return (
<Tr key={userReserve.underlyingAsset}>
<Td>
<Tag colorScheme="blue">
{userReserve.reserve.name}
</Tag>
<HStack spacing={2}>
<Image
src={
reserve
? CryptoIconMap[
reserve.symbol.toUpperCase()
]
: genericCryptoIcon
}
alt={reserve?.symbol}
boxSize="30px"
/>
<Heading size="sm">
{reserve?.name}
</Heading>
</HStack>
</Td>
<Td>
<VStack
Expand Down Expand Up @@ -108,7 +122,30 @@ export const SuppliedAssets = ({ address }: Props) => {
</VStack>
</Td>

<Td>{formatAPY(reserve?.supplyAPY)}</Td>
<Td>
<VStack
spacing={0}
justify={'flex-start'}
align={'flex-start'}
>
<Heading
size="sm"
color="green"
>
{formatAPY(
reserve?.supplyAPY
)}
</Heading>
<Heading
size="sm"
color="orange"
>
{formatAPY(
reserve?.variableBorrowAPY
)}
</Heading>
</VStack>
</Td>
<Td>
<WithdrawAssetButton
amount={
Expand Down
Loading

0 comments on commit 6bb2dd0

Please sign in to comment.