Merge pull request #53 from davidecarpini/main

feat: improve UI and responsivness, bugfixes
akanoce · Jan 27, 2024 · d3fef47 · d3fef47
2 parents 969fac8 + 4b7a869
commit d3fef47
Show file tree

Hide file tree

Showing 33 changed files with 1,590 additions and 798 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -19,6 +19,7 @@
         "@fontsource/roboto": "^5.0.8",
         "@repo/config": "*",
         "@repo/lfgho-sdk": "*",
+        "@repo/utils": "*",
         "@svgr/plugin-svgo": "^8.1.0",
         "@svgr/webpack": "^8.1.0",
         "@tanstack/react-query": "^5.17.9",

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
@@ -1,23 +1,13 @@
 import { Home } from './pages/Home';
 import { Onboarding } from './pages/Onboarding';
 
-import {
-    Box,
-    Container,
-    IconButton,
-    VStack,
-    useColorMode,
-    useColorModeValue
-} from '@chakra-ui/react';
-import { FaMoon, FaSun } from 'react-icons/fa6';
-import { GhostBusters } from './components/GhostBusters';
+import { Box, Container, VStack, useColorModeValue } from '@chakra-ui/react';
 import { useAccountAdapter } from './hooks/useAccountAdapter';
+import { Navbar } from './components/Navbar';
 
 export const App = () => {
     const { account } = useAccountAdapter();
 
-    const { toggleColorMode } = useColorMode();
-
     return (
         <Box
             w="100vw"
@@ -30,18 +20,8 @@ export const App = () => {
         ),
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%239C92AC' fill-opacity='0.25' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`}
         >
-            <IconButton
-                position={'absolute'}
-                top={4}
-                right={4}
-                variant={'empty'}
-                aria-label="Mode Change"
-                size="lg"
-                icon={useColorModeValue(<FaMoon />, <FaSun />)}
-                onClick={toggleColorMode}
-            />
-            <GhostBusters />
-            <Container maxW={'8xl'} py={[2, 4, 8]} px={[4, 8, 16]}>
+            <Navbar />
+            <Container maxW={'6xl'} py={[16]} px={[4, 8, 16]}>
                 <VStack
                     minH="100vh"
                     alignItems={'center'}

diff --git a/apps/web/src/api/aave/hooks.ts b/apps/web/src/api/aave/hooks.ts
@@ -124,6 +124,23 @@ export const useUserReservesIncentives = (user?: string) => {
     });
 };
 
+export type MergedAsset = {
+    id: string;
+    symbol: string;
+    name: string;
+    tokenImage: string;
+    price: string;
+    availableBalance: string;
+    availableBalanceUSD: number;
+    supplyAPY: string;
+    suppliedBalance: string;
+    suppliedBalanceUSD: string;
+    borrowAPY: string;
+    borrowedBalance: string;
+    borrowedBalanceUSD: string;
+    isIsolated: boolean;
+    ltv: string;
+};
 export const useMergedTableData = ({
     address,
     showAll = false,
@@ -135,7 +152,8 @@ export const useMergedTableData = ({
     showIsolated?: boolean;
     showGho?: boolean;
 }) => {
-    const { data: userReserves } = useUserReservesIncentives(address);
+    const { data: userReserves, ...otherResultProps } =
+        useUserReservesIncentives(address);
 
     const assetsData =
         userReserves?.formattedUserSummary.userReservesData || [];
@@ -162,11 +180,7 @@ export const useMergedTableData = ({
         [userBalances]
     );
 
-    if (!assetsData) {
-        return [];
-    }
-
-    return assetsData
+    const mergedAssets: MergedAsset[] = assetsData
         .map((assetData, index) => {
             const asset = assetData.reserve;
             return {
@@ -187,7 +201,8 @@ export const useMergedTableData = ({
                 borrowAPY: asset.variableBorrowAPY,
                 borrowedBalance: assetData.totalBorrows,
                 borrowedBalanceUSD: assetData.totalBorrowsUSD,
-                isIsolated: asset.isIsolated
+                isIsolated: asset.isIsolated,
+                ltv: asset.formattedBaseLTVasCollateral
             };
         })
         .filter(
@@ -199,13 +214,15 @@ export const useMergedTableData = ({
         )
         .filter((asset) => showIsolated || !asset.isIsolated)
         .filter((asset) => showGho || !asset.symbol.includes('GHO'));
+
+    return { data: mergedAssets, ...otherResultProps };
 };
 
 export const useGhoData = (address: string) => {
-    const mergeData = useMergedTableData({
+    const { data } = useMergedTableData({
         address,
         showAll: true,
         showGho: true
     });
-    return mergeData.find((asset) => asset.symbol === 'GHO');
+    return data.find((asset) => asset.symbol === 'GHO');
 };
diff --git a/apps/web/src/api/hooks.ts b/apps/web/src/api/hooks.ts
@@ -6,10 +6,6 @@ import {
     useLfghoClients
 } from '@repo/lfgho-sdk';
 import { Address } from 'viem';
-import { useToast } from '@chakra-ui/toast';
-import { useQueryClient } from '@tanstack/react-query';
-import { useRef } from 'react';
-import { usePublicClient } from 'wagmi';
 
 /**
  * Get the balance of an address from a provider
@@ -60,94 +56,3 @@ export const useERC20Balance = (tokenAddress?: Address) => {
         enabled: !!sender
     });
 };
-
-export const useActionWithToastAndRefresh = () => {
-    const toast = useToast();
-    const queryClient = useQueryClient();
-    const toastLoading1Ref = useRef<string | number>();
-    const toastLoading2Ref = useRef<string | number>();
-    const publicClient = usePublicClient();
-    const actionWithToastAndRefresh = async (
-        callback: () => Promise<`0x${string}` | undefined>,
-        toasts: {
-            success: {
-                title: string | ((s: string) => string);
-                description: string | ((s: string) => string);
-            };
-            error: {
-                title: string;
-                description: string;
-            };
-            loadingTransactionCreation: {
-                title: string;
-                description: string;
-            };
-            loadingReciptConfirmation: {
-                title: string | ((s: string) => string);
-                description: string | ((s: string) => string);
-            };
-        }
-    ) => {
-        try {
-            toastLoading1Ref.current = toast({
-                position: 'bottom-left',
-                title: toasts.loadingTransactionCreation.title,
-                description: toasts.loadingTransactionCreation.description,
-                status: 'warning',
-                duration: null
-            });
-            const transaction = await callback();
-            toast.close(toastLoading1Ref.current);
-            toastLoading2Ref.current = toast({
-                position: 'bottom-left',
-                title:
-                    typeof toasts.loadingReciptConfirmation.title === 'function'
-                        ? toasts.loadingReciptConfirmation.title(transaction!)
-                        : toasts.loadingReciptConfirmation.title,
-                description:
-                    typeof toasts.loadingReciptConfirmation.description ===
-                    'function'
-                        ? toasts.loadingReciptConfirmation.description(
-                              transaction!
-                          )
-                        : toasts.loadingReciptConfirmation.description,
-                status: 'warning',
-                duration: null
-            });
-            if (transaction) {
-                await publicClient.waitForTransactionReceipt({
-                    hash: transaction
-                });
-            }
-            toast.close(toastLoading2Ref.current);
-            toast({
-                position: 'bottom-left',
-                title:
-                    typeof toasts.success.title === 'function'
-                        ? toasts.success.title(transaction!)
-                        : toasts.success.title,
-                description:
-                    typeof toasts.success.description === 'function'
-                        ? toasts.success.description(transaction!)
-                        : toasts.success.description,
-                status: 'success',
-                duration: 3000,
-                isClosable: true
-            });
-        } catch (e) {
-            toastLoading1Ref.current && toast.close(toastLoading1Ref.current);
-            toastLoading2Ref.current && toast.close(toastLoading2Ref.current);
-            toast({
-                position: 'bottom-left',
-                title: toasts.error.title,
-                description: toasts.error.description,
-                status: 'error',
-                duration: 3000,
-                isClosable: true
-            });
-        }
-
-        queryClient.refetchQueries();
-    };
-    return actionWithToastAndRefresh;
-};
diff --git a/apps/web/src/components/AddressButton.tsx b/apps/web/src/components/AddressButton.tsx
@@ -1,5 +1,5 @@
 import { useCopyToClipboard } from '@/hooks/useCopyToClipboard';
-import { Button } from '@chakra-ui/react';
+import { Button, Icon } from '@chakra-ui/react';
 import { useMemo } from 'react';
 import { FaCheck, FaCopy } from 'react-icons/fa6';
 
@@ -19,13 +19,20 @@ export const AddressButton = ({ address, onClick, withCopy = true }: Props) => {
     const handleOnClick = () => (withCopy ? copy(address) : onClick?.());
 
     const icon = useMemo(() => {
-        if (!isCopied) return <FaCopy />;
-        return <FaCheck />;
+        if (!isCopied) return <Icon as={FaCheck} />;
+        return <Icon as={FaCopy} />;
     }, [isCopied]);
+
     return (
-        <Button onClick={handleOnClick} size="sm" display={'flex'} gap={2}>
+        <Button
+            onClick={handleOnClick}
+            size="sm"
+            display={'flex'}
+            gap={2}
+            colorScheme="purple"
+        >
             {humanizeAddress(address)}
-            {icon}
+            {withCopy && icon}
         </Button>
     );
 };