fix: layout, icons, final cleanup

aave · Oct 27, 2024 · 889a018 · 889a018
1 parent 3215666
commit 889a018
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 45 deletions.
diff --git a/src/components/transactions/Emode/EmodeModalContent.tsx b/src/components/transactions/Emode/EmodeModalContent.tsx
@@ -421,7 +421,7 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) =>
                     >
                       <TableCell align="center" sx={{ py: 1 }}>
                         <Stack direction="row" gap={1} alignItems="center">
-                          <TokenIcon symbol={asset.symbol} sx={{ fontSize: '16px' }} />
+                          <TokenIcon symbol={asset.iconSymbol} sx={{ fontSize: '16px' }} />
                           <Typography variant="secondary12">{asset.symbol}</Typography>
                         </Stack>
                       </TableCell>

diff --git a/src/helpers/types.ts b/src/helpers/types.ts
@@ -22,6 +22,7 @@ export type EmodeCategory = {
   assets: Array<{
     underlyingAsset: string;
     symbol: string;
+    iconSymbol: string;
     collateral: boolean;
     borrowable: boolean;
   }>;

diff --git a/src/hooks/app-data-provider/useAppDataProvider.tsx b/src/hooks/app-data-provider/useAppDataProvider.tsx
@@ -154,13 +154,7 @@ export const AppDataProvider: React.FC = ({ children }) => {
         reserves: formattedPoolReserves || [],
         eModes,
         user,
-        userReserves:
-          userReserves?.map((r) => ({
-            ...r,
-            stableBorrowRate: '0',
-            principalStableDebt: '0',
-            stableBorrowLastUpdateTimestamp: 0,
-          })) || [],
+        userReserves: userReserves || [],
         marketReferencePriceInUsd: baseCurrencyData?.marketReferenceCurrencyPriceInUsd || '0',
         marketReferenceCurrencyDecimals: baseCurrencyData?.marketReferenceCurrencyDecimals || 0,
         // TODO: we should consider removing this from the context and use zustand instead. If we had a selector that would return the formatted gho data, I think that

diff --git a/src/modules/dashboard/lists/BorrowedPositionsList/GhoBorrowedPositionsListItem.tsx b/src/modules/dashboard/lists/BorrowedPositionsList/GhoBorrowedPositionsListItem.tsx
@@ -1,6 +1,6 @@
 import { InformationCircleIcon } from '@heroicons/react/outline';
 import { Trans } from '@lingui/macro';
-import { Box, Button, SvgIcon, useMediaQuery, useTheme } from '@mui/material';
+import { Box, Button, Stack, SvgIcon, useMediaQuery, useTheme } from '@mui/material';
 import { ContentWithTooltip } from 'src/components/ContentWithTooltip';
 import { GhoIncentivesCard } from 'src/components/incentives/GhoIncentivesCard';
 import { FixedAPYTooltipText } from 'src/components/infoTooltips/FixedAPYTooltip';
@@ -148,30 +148,30 @@ const GhoBorrowedPositionsListItemDesktop = ({
         subValue={userGhoBorrowBalance}
       />
       <ListColumn>
-        <GhoIncentivesCard
-          withTokenIcon={hasDiscount}
-          value={ghoLoadingData || !ghoUserDataFetched ? -1 : borrowRateAfterDiscount}
-          data-cy={`apyType`}
-          stkAaveBalance={userDiscountTokenBalance}
-          ghoRoute={ROUTES.reserveOverview(underlyingAsset, currentMarket) + '/#discount'}
-          userQualifiesForDiscount={hasDiscount}
-        />
-      </ListColumn>
-      <ListColumn>
-        <ContentWithTooltip tooltipContent={FixedAPYTooltipText} offset={[0, -4]} withoutHover>
-          <Button
-            variant="outlined"
-            size="small"
-            color="primary"
-            disabled
-            data-cy={`apyButton_fixed`}
-          >
-            GHO RATE
-            <SvgIcon sx={{ marginLeft: '2px', fontSize: '14px' }}>
-              <InformationCircleIcon />
-            </SvgIcon>
-          </Button>
-        </ContentWithTooltip>
+        <Stack direction="row" gap={1}>
+          <GhoIncentivesCard
+            withTokenIcon={hasDiscount}
+            value={ghoLoadingData || !ghoUserDataFetched ? -1 : borrowRateAfterDiscount}
+            data-cy={`apyType`}
+            stkAaveBalance={userDiscountTokenBalance}
+            ghoRoute={ROUTES.reserveOverview(underlyingAsset, currentMarket) + '/#discount'}
+            userQualifiesForDiscount={hasDiscount}
+          />
+          <ContentWithTooltip tooltipContent={FixedAPYTooltipText} offset={[0, -4]} withoutHover>
+            <Button
+              variant="outlined"
+              size="small"
+              color="primary"
+              disabled
+              data-cy={`apyButton_fixed`}
+            >
+              GHO RATE
+              {/* <SvgIcon sx={{ marginLeft: '2px', fontSize: '12px' }}>
+                <InformationCircleIcon />
+              </SvgIcon> */}
+            </Button>
+          </ContentWithTooltip>
+        </Stack>
       </ListColumn>
       <ListButtonsColumn>
         {showSwitchButton ? (

diff --git a/src/modules/dashboard/lists/ListItemLoader.tsx b/src/modules/dashboard/lists/ListItemLoader.tsx
@@ -4,7 +4,7 @@ import { ListColumn } from '../../../components/lists/ListColumn';
 import { ListItem } from '../../../components/lists/ListItem';
 import { ListButtonsColumn } from './ListButtonsColumn';
 
-export const ListItemLoader = () => {
+export const ListItemLoader = ({ columns }: { columns: number }) => {
   return (
     <ListItem>
       <ListColumn maxWidth={160} isRow>
@@ -14,13 +14,11 @@ export const ListItemLoader = () => {
         </Box>
       </ListColumn>
 
-      <ListColumn>
-        <Skeleton width={70} height={20} />
-      </ListColumn>
-
-      <ListColumn>
-        <Skeleton width={70} height={20} />
-      </ListColumn>
+      {Array.from({ length: columns - 1 }).map((_, index) => (
+        <ListColumn key={index}>
+          <Skeleton width={70} height={20} />
+        </ListColumn>
+      ))}
 
       <ListButtonsColumn>
         <Skeleton height={38} width={74} />

diff --git a/src/modules/dashboard/lists/ListLoader.tsx b/src/modules/dashboard/lists/ListLoader.tsx
@@ -29,8 +29,8 @@ export const ListLoader = ({ title, withTopMargin, head }: ListLoaderProps) => {
         {!downToXSM && <ListHeader head={head} />}
         {!downToXSM ? (
           <>
-            <ListItemLoader />
-            <ListItemLoader />
+            <ListItemLoader columns={head.length} />
+            <ListItemLoader columns={head.length} />
           </>
         ) : (
           <MobileListItemLoader />

diff --git a/src/store/poolSelectors.ts b/src/store/poolSelectors.ts
@@ -3,6 +3,7 @@ import { FormattedReservesAndIncentives } from 'src/hooks/pool/usePoolFormattedR
 import { CustomMarket, marketsData, NetworkConfig } from 'src/utils/marketsAndNetworksConfig';
 
 import { PoolReserve } from './poolSlice';
+import { fetchIconSymbolAndName } from 'src/ui-config/reservePatches';
 
 export const selectCurrentChainIdMarkets = (
   chainId: number,
@@ -54,6 +55,10 @@ export const formatEmodes = (reserves: FormattedReservesAndIncentives[]) => {
   const eModes: Record<number, EmodeCategory> = {};
 
   reserves.forEach((r) => {
+    const { symbol, iconSymbol } = fetchIconSymbolAndName({
+      underlyingAsset: r.underlyingAsset,
+      symbol: r.symbol,
+    });
     r.eModes.forEach((e) => {
       if (!eModes[e.id]) {
         eModes[e.id] = {
@@ -65,7 +70,8 @@ export const formatEmodes = (reserves: FormattedReservesAndIncentives[]) => {
           assets: [
             {
               underlyingAsset: r.underlyingAsset,
-              symbol: r.symbol,
+              symbol,
+              iconSymbol,
               collateral: e.collateralEnabled && r.baseLTVasCollateral !== '0',
               borrowable: e.borrowingEnabled,
             },
@@ -74,7 +80,8 @@ export const formatEmodes = (reserves: FormattedReservesAndIncentives[]) => {
       } else {
         eModes[e.id].assets.push({
           underlyingAsset: r.underlyingAsset,
-          symbol: r.symbol,
+          symbol,
+          iconSymbol,
           collateral: e.collateralEnabled && r.baseLTVasCollateral !== '0',
           borrowable: e.borrowingEnabled,
         });