Merge branch 'main' into fix-deploy-pages

akanoce · Jan 21, 2024 · cffd78c · cffd78c
2 parents 20946cf + 0b0940f
commit cffd78c
Show file tree

Hide file tree

Showing 7 changed files with 363 additions and 69 deletions.
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
@@ -20,8 +20,6 @@ export const App = () => {
  const { data: userReservesIncentives } = useUserReservesIncentives(account);
  const { toggleColorMode } = useColorMode();
 
- console.log({ userReservesIncentives });
-
  return (
  <Box
  w="100vw"

diff --git a/apps/web/src/api/aave/hooks.ts b/apps/web/src/api/aave/hooks.ts
@@ -6,6 +6,10 @@ import {
  getUserReserves,
  getUserReservesIncentives
 } from '.';
+import { CryptoIconMap, genericCryptoIcon } from '@/const/icons';
+import { erc20ABI, useContractReads } from 'wagmi';
+import { formatUnits } from 'viem';
+import { useCallback } from 'react';
 
 /**
  * see {@link getReserves}
@@ -119,3 +123,73 @@ export const useUserReservesIncentives = (user?: string) => {
  enabled
  });
 };
+
+export const useMergedTableData = ({
+ address,
+ showAll = false
+}: {
+ address: string;
+ showAll?: boolean;
+}) => {
+ const { data: userReserves } = useUserReservesIncentives(address);
+
+ const assetsData =
+ userReserves?.formattedUserSummary.userReservesData || [];
+
+ const { data: userBalances } = useContractReads({
+ allowFailure: false,
+ contracts: assetsData?.map((assetData) => ({
+ address: assetData.underlyingAsset as `0x${string}`,
+ abi: erc20ABI,
+ functionName: 'balanceOf',
+ args: [address]
+ }))
+ });
+
+ const getUserBalance = useCallback(
+ (assetIndex: number, decimals: number) => {
+ const balance = userBalances?.[assetIndex] as bigint;
+ if (!balance) return '0';
+
+ const parsedBalance = formatUnits(balance, decimals);
+
+ return parsedBalance;
+ },
+ [userBalances]
+ );
+
+ if (!assetsData) {
+ return [];
+ }
+
+ return assetsData
+ .map((assetData, index) => {
+ const asset = assetData.reserve;
+ return {
+ id: asset.id,
+ symbol: asset.symbol.toUpperCase(),
+ name: asset.name,
+ tokenImage:
+ CryptoIconMap[asset.symbol.toUpperCase()] ??
+ genericCryptoIcon,
+ price: asset.priceInUSD,
+ availableBalance: getUserBalance(index, asset.decimals ?? 18),
+ availableBalanceUSD:
+ Number(asset.priceInUSD) *
+ Number(getUserBalance(index, asset.decimals ?? 18)),
+ supplyAPY: asset.supplyAPY,
+ suppliedBalance: assetData.underlyingBalance,
+ suppliedBalanceUSD: assetData.underlyingBalanceUSD,
+ borrowAPY: asset.variableBorrowAPY,
+ borrowedBalance: assetData.totalBorrows,
+ borrowedBalanceUSD: assetData.totalBorrowsUSD
+ };
+ })
+ .filter(
+ (asset) =>
+ showAll ||
+ asset.availableBalance !== '0' ||
+ asset.suppliedBalance !== '0' ||
+ asset.borrowedBalance !== '0'
+ );
+};
diff --git a/apps/web/src/components/GetGho.tsx b/apps/web/src/components/GetGho.tsx
@@ -0,0 +1,17 @@
+import { Button } from '@chakra-ui/button';
+import { Card, CardBody } from '@chakra-ui/card';
+import { Text, VStack } from '@chakra-ui/layout';
+
+export const GetGho = () => {
+ return (
+ <Card>
+ <CardBody>
+ <VStack>
+ <Text>Get as much go as possible from your balances</Text>
+ <Text>The All-in button!</Text>
+ <Button colorScheme="green">Get Gho</Button>
+ </VStack>
+ </CardBody>
+ </Card>
+ );
+};
diff --git a/apps/web/src/components/MergedTable.tsx b/apps/web/src/components/MergedTable.tsx
@@ -0,0 +1,231 @@
+import { useMergedTableData } from '@/api';
+import React from 'react';
+import {
+ Card,
+ CardBody,
+ CardHeader,
+ HStack,
+ Heading,
+ Image,
+ Spinner,
+ Table,
+ TableCaption,
+ TableContainer,
+ Tbody,
+ Td,
+ Text,
+ Th,
+ Thead,
+ Tr,
+ VStack
+} from '@chakra-ui/react';
+import { CryptoIconMap, genericCryptoIcon } from '@/const/icons';
+import { formatAPY, formatBalance } from '@/util/formatting';
+
+type Props = {
+ address: string;
+};
+
+export const MergedTable: React.FC<Props> = ({ address }) => {
+ const mergedData = useMergedTableData({ address, showAll: false });
+
+ console.log({
+ mergedData
+ });
+
+ if (!mergedData)
+ return (
+ <Card>
+ <CardHeader>
+ <VStack spacing={0} justify={'flex-start'}>
+ <Heading fontSize={'2xl'}>MERGED</Heading>
+ </VStack>
+ </CardHeader>
+ <CardBody>
+ <Spinner />
+ </CardBody>
+ </Card>
+ );
+
+ return (
+ <Card>
+ <CardHeader>
+ <HStack justify={'space-between'} alignItems={'center'}>
+ <VStack
+ spacing={0}
+ justify={'flex-start'}
+ align={'flex-start'}
+ >
+ <Heading fontSize={'2xl'}>MERGED</Heading>
+ </VStack>
+ </HStack>
+ </CardHeader>
+ <CardBody>
+ <TableContainer>
+ <Table variant="simple">
+ <TableCaption>
+ {mergedData.length} reserves incentives
+ </TableCaption>
+ <Thead>
+ <Tr>
+ <Th>Token</Th>
+ <Th>Available</Th>
+ <Th>Supplied</Th>
+ <Th>Borrowed</Th>
+ <Th>Price</Th>
+ <Th>APY</Th>
+ <Th>Actions</Th>
+ </Tr>
+ </Thead>
+ <Tbody>
+ {mergedData.map((asset) => (
+ <Tr key={asset.id}>
+ <Td>
+ <HStack spacing={2}>
+ <Image
+ src={
+ CryptoIconMap[
+ asset.symbol.toUpperCase()
+ ] ?? genericCryptoIcon
+ }
+ alt={asset.symbol}
+ boxSize="30px"
+ />
+ <Heading size="sm">
+ {asset.name}
+ </Heading>
+ </HStack>
+ </Td>
+ <Td>
+ <VStack
+ spacing={0}
+ justify={'flex-start'}
+ align={'flex-start'}
+ >
+ <HStack spacing={1}>
+ <Heading size="sm">
+ {formatBalance(
+ asset.availableBalance
+ )}
+ </Heading>
+ <Text size="sm" as="sub">
+ {asset.symbol}
+ </Text>
+ </HStack>
+ <HStack spacing={1}>
+ <Heading size="sm">
+ {formatBalance(
+ asset.availableBalanceUSD
+ )}
+ </Heading>
+ <Text size="sm" as="sub">
+ USD
+ </Text>
+ </HStack>
+ </VStack>
+ </Td>
+ <Td>
+ <VStack
+ spacing={0}
+ justify={'flex-start'}
+ align={'flex-start'}
+ >
+ <HStack spacing={1}>
+ <Heading size="sm">
+ {formatBalance(
+ asset.suppliedBalance
+ )}
+ </Heading>
+ <Text size="sm" as="sub">
+ {asset.symbol}
+ </Text>
+ </HStack>
+ <HStack spacing={1}>
+ <Heading size="sm">
+ {formatBalance(
+ asset.suppliedBalanceUSD
+ )}
+ </Heading>
+ <Text size="sm" as="sub">
+ USD
+ </Text>
+ </HStack>
+ </VStack>
+ </Td>
+ <Td>
+ <VStack
+ spacing={0}
+ justify={'flex-start'}
+ align={'flex-start'}
+ >
+ <HStack spacing={1}>
+ <Heading size="sm">
+ {formatBalance(
+ asset.borrowedBalance
+ )}
+ </Heading>
+ <Text size="sm" as="sub">
+ {asset.symbol}
+ </Text>
+ </HStack>
+ <HStack spacing={1}>
+ <Heading size="sm">
+ {formatBalance(
+ asset.borrowedBalanceUSD
+ )}
+ </Heading>
+ <Text size="sm" as="sub">
+ USD
+ </Text>
+ </HStack>
+ </VStack>
+ </Td>
+ <Td>
+ <Heading size="sm">
+ {new Intl.NumberFormat('it-IT', {
+ style: 'currency',
+ currency: 'USD'
+ }).format(Number(asset.price))}
+ </Heading>
+ </Td>
+
+ <Td>
+ <VStack
+ spacing={0}
+ justify={'flex-start'}
+ align={'flex-start'}
+ >
+ <Heading size="sm" color="green">
+ S {formatAPY(asset.supplyAPY)}
+ </Heading>
+ <Heading size="sm" color="orange">
+ B {formatAPY(asset.borrowAPY)}
+ </Heading>
+ </VStack>
+ </Td>
+ <Td>
+ <HStack spacing={2}>
+ {/* <SupplyUnderlyingAssetButton
+ reserveAddress={
+ asset.underlyingAsset
+ }
+ maxAmount={asset.balance}
+ /> */}
+
+ {/* <BorrowUnderlyingAssetButton
+ reserve={reserveIncentive}
+ formattedUserSummary={
+ formattedUserSummary
+ }
+ /> */}
+ </HStack>
+ </Td>
+ </Tr>
+ ))}
+ </Tbody>
+ </Table>
+ </TableContainer>
+ </CardBody>
+ </Card>
+ );
+};