refactor: display useful info in tables card, centralize formatting s…

…cripts
akanoce · Jan 21, 2024 · 94d6d12 · 94d6d12
1 parent 4c4fbf2
commit 94d6d12
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 49 deletions.
diff --git a/apps/web/src/components/BorrowedAssets.tsx b/apps/web/src/components/BorrowedAssets.tsx
@@ -1,5 +1,6 @@
 import { useReserves, useUserReservesIncentives } from '@/api';
 import {
+ Box,
  Card,
  CardBody,
  CardHeader,
@@ -16,22 +17,9 @@ import {
  Tr,
  VStack
 } from '@chakra-ui/react';
-import BigNumber from 'bignumber.js';
 import { CryptoIconMap, genericCryptoIcon } from '@/const/icons';
 import { RepayAssetButton } from './RepayAssetButton';
-
-const formatAPY = (apy?: number | string) => {
- return `${(Number(apy ?? 0) * 100).toFixed(2)}%`;
-};
-
-const formatBalance = (balance?: number | string) => {
- const bn = BigNumber(balance ?? 0);
- const isSmall = bn.lt(0.01);
- if (isSmall) {
- return `< 0.01`;
- }
- return `${Number(balance ?? 0).toFixed(2)}`;
-};
+import { formatAPY, formatBalance } from '@/util/formatting';
 
 type Props = {
  address: string;
@@ -48,7 +36,21 @@ export const BorrowedAssets = ({ address }: Props) => {
  return (
  <Card>
  <CardHeader>
- <Heading fontSize={'2xl'}>Borrowed Assets</Heading>
+ <HStack w="full" justify="space-between">
+ <Heading fontSize={'2xl'}>Borrowed Assets</Heading>
+ <Box>
+ <Heading size="xs" color="orange">
+ Total borrowed
+ </Heading>
+ <Heading size="sm">
+ {formatBalance(
+ userReserves?.formattedUserSummary
+ .totalBorrowsUSD,
+ 'USD'
+ )}
+ </Heading>
+ </Box>
+ </HStack>
  </CardHeader>
  <CardBody>
  <TableContainer>

diff --git a/apps/web/src/components/ReservesIncentives.tsx b/apps/web/src/components/ReservesIncentives.tsx
@@ -27,23 +27,7 @@ import {
 } 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)}`;
-};
+import { formatAPY, formatBalance } from '@/util/formatting';
 
 type Props = {
  address: string;
@@ -130,7 +114,18 @@ export const ReservesIncentives: React.FC<Props> = ({ address }) => {
  return (
  <Card>
  <CardHeader>
- <Heading fontSize={'2xl'}>Reserves Incentives</Heading>
+ <VStack spacing={0} justify={'flex-start'}>
+ <Heading fontSize={'2xl'}>Reserves Incentives</Heading>
+ <HStack spacing={2}>
+ <Heading size="sm">Available to borrow</Heading>
+ <Heading size="sm">
+ {formatBalance(
+ formattedUserSummary?.availableBorrowsUSD ??
+ 0
+ )}
+ </Heading>
+ </HStack>
+ </VStack>
  </CardHeader>
  <CardBody>
  <Spinner />
@@ -142,7 +137,25 @@ export const ReservesIncentives: React.FC<Props> = ({ address }) => {
  <Card>
  <CardHeader>
  <HStack justify={'space-between'} alignItems={'center'}>
- <Heading fontSize={'2xl'}>Reserves Incentives</Heading>
+ <VStack
+ spacing={0}
+ justify={'flex-start'}
+ align={'flex-start'}
+ >
+ <Heading fontSize={'2xl'}>Reserves Incentives</Heading>
+ <HStack spacing={2}>
+ <Heading size="sm" color="orange">
+ Available to borrow
+ </Heading>
+ <Heading size="sm">
+ {formatBalance(
+ formattedUserSummary?.availableBorrowsUSD ??
+ 0,
+ 'USD'
+ )}
+ </Heading>
+ </HStack>
+ </VStack>
  <Button
  size={'sm'}
  colorScheme={'purple'}

diff --git a/apps/web/src/components/SuppliedAssets.tsx b/apps/web/src/components/SuppliedAssets.tsx
@@ -1,5 +1,6 @@
 import { useReserves, useUserReservesIncentives } from '@/api';
 import {
+ Box,
  Card,
  CardBody,
  CardHeader,
@@ -17,21 +18,8 @@ import {
  VStack
 } 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)}%`;
-};
-
-const formatBalance = (balance?: number | string) => {
- const bn = BigNumber(balance ?? 0);
- const isSmall = bn.lt(0.01);
- if (isSmall) {
- return `< 0.01`;
- }
- return `${Number(balance ?? 0).toFixed(2)}`;
-};
+import { formatAPY, formatBalance } from '@/util/formatting';
 
 type Props = {
  address: string;
@@ -48,7 +36,21 @@ export const SuppliedAssets = ({ address }: Props) => {
  return (
  <Card>
  <CardHeader>
- <Heading fontSize={'2xl'}>Supplied Assets</Heading>
+ <HStack w="full" justify="space-between">
+ <Heading fontSize={'2xl'}>Supplied Assets</Heading>
+ <Box>
+ <Heading size="xs" color="green">
+ Total collateral
+ </Heading>
+ <Heading size="sm">
+ {formatBalance(
+ userReserves?.formattedUserSummary
+ .totalCollateralUSD,
+ 'USD'
+ )}
+ </Heading>
+ </Box>
+ </HStack>
  </CardHeader>
  <CardBody>
  <TableContainer>

diff --git a/apps/web/src/util/formatting.ts b/apps/web/src/util/formatting.ts
@@ -0,0 +1,22 @@
+import BigNumber from 'bignumber.js';
+
+export const formatAPY = (apy?: number | string) => {
+ return `${(Number(apy ?? 0) * 100).toFixed(2)}%`;
+};
+
+export const formatBalance = (balance?: number | string, currency?: string) => {
+ const bn = BigNumber(balance ?? 0);
+ const isSmall = bn.lt(0.01);
+ if (isSmall) {
+ return `< 0.01`;
+ }
+ const fixedDecimals = `${Number(balance ?? 0).toFixed(2)}`;
+
+ if (currency)
+ return new Intl.NumberFormat('it-IT', {
+ style: 'currency',
+ currency: currency
+ }).format(Number(fixedDecimals));
+
+ return fixedDecimals;
+};