From a214204a25d22bb3cb741c733a9e73b2d09366e3 Mon Sep 17 00:00:00 2001 From: Davide Carpini Date: Sun, 21 Jan 2024 11:15:40 +0100 Subject: [PATCH] fix: add getgho button --- apps/web/src/App.tsx | 2 - apps/web/src/api/aave/hooks.ts | 74 ++++++ apps/web/src/components/GetGho.tsx | 17 ++ apps/web/src/components/MergedTable.tsx | 231 ++++++++++++++++++ .../web/src/components/ReservesIncentives.tsx | 59 ++--- .../SupplyUnderlyingAssetButton.tsx | 2 - apps/web/src/pages/Home.tsx | 47 ++-- apps/web/src/util/formatting.ts | 1 + yarn.lock | 5 - 9 files changed, 364 insertions(+), 74 deletions(-) create mode 100644 apps/web/src/components/GetGho.tsx create mode 100644 apps/web/src/components/MergedTable.tsx diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx index c97c771..6b7e8d7 100644 --- 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 ( { 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 new file mode 100644 index 0000000..5f874d3 --- /dev/null +++ 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 ( + + + + Get as much go as possible from your balances + The All-in button! + + + + + ); +}; diff --git a/apps/web/src/components/MergedTable.tsx b/apps/web/src/components/MergedTable.tsx new file mode 100644 index 0000000..79c80c8 --- /dev/null +++ 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 = ({ address }) => { + const mergedData = useMergedTableData({ address, showAll: false }); + + console.log({ + mergedData + }); + + if (!mergedData) + return ( + + + + MERGED + + + + + + + ); + + return ( + + + + + MERGED + + + + + + + + {mergedData.length} reserves incentives + + + + + + + + + + + + + + {mergedData.map((asset) => ( + + + + + + + + + + + ))} + +
TokenAvailableSuppliedBorrowedPriceAPYActions
+ + {asset.symbol} + + {asset.name} + + + + + + + {formatBalance( + asset.availableBalance + )} + + + {asset.symbol} + + + + + {formatBalance( + asset.availableBalanceUSD + )} + + + USD + + + + + + + + {formatBalance( + asset.suppliedBalance + )} + + + {asset.symbol} + + + + + {formatBalance( + asset.suppliedBalanceUSD + )} + + + USD + + + + + + + + {formatBalance( + asset.borrowedBalance + )} + + + {asset.symbol} + + + + + {formatBalance( + asset.borrowedBalanceUSD + )} + + + USD + + + + + + {new Intl.NumberFormat('it-IT', { + style: 'currency', + currency: 'USD' + }).format(Number(asset.price))} + + + + + S {formatAPY(asset.supplyAPY)} + + + B {formatAPY(asset.borrowAPY)} + + + + + {/* */} + + {/* */} + +
+ + + + ); +}; diff --git a/apps/web/src/components/ReservesIncentives.tsx b/apps/web/src/components/ReservesIncentives.tsx index b02c6f4..8b36e35 100644 --- a/apps/web/src/components/ReservesIncentives.tsx +++ b/apps/web/src/components/ReservesIncentives.tsx @@ -2,9 +2,7 @@ import { useReservesIncentives, useUserReservesIncentives } from '@/api'; import { erc20ABI, useContractReads } from 'wagmi'; import React, { useCallback, useMemo } from 'react'; import { formatUnits } from 'viem'; -import { AddressButton } from '.'; import { SupplyUnderlyingAssetButton } from './SupplyUnderlyingAssetButton'; -import { BorrowUnderlyingAssetButton } from './BorrowUnderlyingAssetButton'; import { Button, Card, @@ -68,15 +66,15 @@ export const ReservesIncentives: React.FC = ({ address }) => { const reservesWithBalance = useMemo( () => - reservesIncentives?.formattedReservesIncentives.map( - (reserve, index) => ({ + reservesIncentives?.formattedReservesIncentives + .map((reserve, index) => ({ ...reserve, balance: getUserBalance(index, reserve.decimals ?? 18), underlyingBalanceUSD: Number(reserve.priceInUSD) * Number(getUserBalance(index, reserve.decimals ?? 18)) - }) - ) ?? [], + })) + .filter((reserve) => reserve.balance !== '0') ?? [], [reservesIncentives, getUserBalance] ); @@ -162,7 +160,7 @@ export const ReservesIncentives: React.FC = ({ address }) => { isLoading={isSupplyTxLoading} onClick={() => multipleSupplyAndBorrow()} > - Supply all & Borrow + Supply all & Borrow Gho @@ -175,13 +173,9 @@ export const ReservesIncentives: React.FC = ({ address }) => { Token - Address - Price Balance + Price APY - Caps - Liquidity - Debt Actions @@ -204,26 +198,6 @@ export const ReservesIncentives: React.FC = ({ address }) => { - - - - - - {new Intl.NumberFormat('it-IT', { - style: 'currency', - currency: 'USD' - }).format( - Number( - reserveIncentive.priceInUSD - ) - )} - - = ({ address }) => { + + + {new Intl.NumberFormat('it-IT', { + style: 'currency', + currency: 'USD' + }).format( + Number( + reserveIncentive.priceInUSD + ) + )} + + + = ({ address }) => { - + {/* = ({ address }) => { - + */} = ({ address }) => { } /> - + /> */} diff --git a/apps/web/src/components/SupplyUnderlyingAssetButton.tsx b/apps/web/src/components/SupplyUnderlyingAssetButton.tsx index efa417e..42961b3 100644 --- a/apps/web/src/components/SupplyUnderlyingAssetButton.tsx +++ b/apps/web/src/components/SupplyUnderlyingAssetButton.tsx @@ -29,8 +29,6 @@ export const SupplyUnderlyingAssetButton: React.FC = ({ amount }); - console.log({ maxAmount }); - const isLoading = isSupplyTxLoading; const isDisabled = diff --git a/apps/web/src/pages/Home.tsx b/apps/web/src/pages/Home.tsx index e9961d8..1eaf9b7 100644 --- a/apps/web/src/pages/Home.tsx +++ b/apps/web/src/pages/Home.tsx @@ -1,52 +1,38 @@ import { Address } from 'viem'; -import { - Button, - FormControl, - FormLabel, - HStack, - Heading, - Image, - Switch, - VStack -} from '@chakra-ui/react'; +import { Box, Button, HStack, Heading, Image, VStack } from '@chakra-ui/react'; import { SuppliedAssets } from '@/components/SuppliedAssets'; -import { useSponsoredTxFlag } from '@repo/lfgho-sdk'; -import { ChangeEvent, useCallback } from 'react'; +// import { useSponsoredTxFlag } from '@repo/lfgho-sdk'; +// import { ChangeEvent, useCallback } from 'react'; import { useAccountAdapter } from '@/hooks/useAccountAdapter'; import { ReservesIncentives } from '@/components/ReservesIncentives'; import { AddressButton } from '@/components'; import { BorrowedAssets } from '@/components/BorrowedAssets'; import { useBalance } from 'wagmi'; import { CryptoIconMap } from '@/const/icons'; +import { MergedTable } from '@/components/MergedTable'; +import { GetGho } from '@/components/GetGho'; type Props = { wallet: Address; }; export const Home = ({ wallet }: Props) => { - const { setIsSPonsored } = useSponsoredTxFlag(); + // const { setIsSPonsored } = useSponsoredTxFlag(); const { logout } = useAccountAdapter(); - const handleOnChange = useCallback( - (event: ChangeEvent) => { - setIsSPonsored(event.target.checked); - }, - [setIsSPonsored] - ); + // const handleOnChange = useCallback( + // (event: ChangeEvent) => { + // setIsSPonsored(event.target.checked); + // }, + // [setIsSPonsored] + // ); const { data: balance } = useBalance({ address: wallet }); return ( - - + + {/* Enable ERC20 Sponsored Transactions @@ -55,7 +41,8 @@ export const Home = ({ wallet }: Props) => { size="lg" onChange={handleOnChange} /> - + */} + @@ -79,6 +66,8 @@ export const Home = ({ wallet }: Props) => { + + diff --git a/apps/web/src/util/formatting.ts b/apps/web/src/util/formatting.ts index 9626ac1..c082562 100644 --- a/apps/web/src/util/formatting.ts +++ b/apps/web/src/util/formatting.ts @@ -6,6 +6,7 @@ export const formatAPY = (apy?: number | string) => { export const formatBalance = (balance?: number | string, currency?: string) => { const bn = BigNumber(balance ?? 0); + if (bn.isZero()) return '0'; const isSmall = bn.lt(0.01); if (isSmall) { return `< 0.01`; diff --git a/yarn.lock b/yarn.lock index 8e687ea..f096069 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7115,11 +7115,6 @@ react-clientside-effect@^1.2.6: dependencies: "@babel/runtime" "^7.12.13" -react-crypto-icons@^1.0.5: - version "1.0.5" - resolved "https://registry.yarnpkg.com/react-crypto-icons/-/react-crypto-icons-1.0.5.tgz#015912c20d6c3177861afeaab3f37e4200556ca9" - integrity sha512-kh8O55ze+ib2dJOAORcmhCB9a1SuBdj3f1Q6GGzVez/yL8NXklRKz32hKAVAJPCDuR8iXRuG51DrxVGouNdIEw== - react-dom@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"