Merge pull request #45 from akanoce/polish-user-summary

refactor(ui): display info in tables, add eth balance in nav
akanoce · Jan 21, 2024 · f2c0fa1 · f2c0fa1
2 parents d096339 + 94d6d12
commit f2c0fa1
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 53 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/pages/Home.tsx b/apps/web/src/pages/Home.tsx
@@ -4,6 +4,8 @@ import {
  FormControl,
  FormLabel,
  HStack,
+ Heading,
+ Image,
  Switch,
  VStack
 } from '@chakra-ui/react';
@@ -12,9 +14,10 @@ import { useSponsoredTxFlag } from '@repo/lfgho-sdk';
 import { ChangeEvent, useCallback } from 'react';
 import { useAccountAdapter } from '@/hooks/useAccountAdapter';
 import { ReservesIncentives } from '@/components/ReservesIncentives';
-import { UserSummary } from '@/components/UserSummary';
 import { AddressButton } from '@/components';
 import { BorrowedAssets } from '@/components/BorrowedAssets';
+import { useBalance } from 'wagmi';
+import { CryptoIconMap } from '@/const/icons';
 
 type Props = {
  wallet: Address;
@@ -31,6 +34,8 @@ export const Home = ({ wallet }: Props) => {
  [setIsSPonsored]
  );
 
+ const { data: balance } = useBalance({ address: wallet });
+
  return (
  <VStack spacing={4} alignItems={'stretch'} w="full">
  <HStack
@@ -51,8 +56,19 @@ export const Home = ({ wallet }: Props) => {
  onChange={handleOnChange}
  />
  </FormControl>
- <HStack spacing={4}>
- <AddressButton address={wallet} withCopy={true} />
+ <HStack spacing={8}>
+ <HStack spacing={2}>
+ <AddressButton address={wallet} withCopy={true} />
+ <HStack spacing={2}>
+ <Image
+ src={CryptoIconMap['WETH']}
+ boxSize="1.5rem"
+ />
+ <Heading size="xs">
+ {Number(balance?.formatted ?? 0).toFixed(4)}
+ </Heading>
+ </HStack>
+ </HStack>
  <Button
  variant={'solid'}
  colorScheme="purple"
@@ -66,7 +82,6 @@ export const Home = ({ wallet }: Props) => {
  <SuppliedAssets address={wallet} />
  <BorrowedAssets address={wallet} />
  <ReservesIncentives address={wallet} />
- <UserSummary address={wallet} />
  </VStack>
  );
 };
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;
+};