Merge branch 'main' into sdk/feat/api

Fujicracy · Aug 29, 2023 · d77ffd7 · d77ffd7
2 parents 1b915ec + 18b6b46
commit d77ffd7
Show file tree

Hide file tree

Showing 13 changed files with 139 additions and 59 deletions.
diff --git a/packages/frontend/components/App/Header/SocialMenuWrapper.tsx b/packages/frontend/components/App/Header/SocialMenuWrapper.tsx
@@ -20,6 +20,11 @@ function SocialMenuWrapper() {
       <Chip
         label={isOpen ? <CloseIcon /> : <MoreHorizIcon />}
         onClick={openMenu}
+        sx={{
+          '& .MuiChip-label': {
+            mb: '-3px',
+          },
+        }}
       />
       <Menu
         id="parameters-menu"

diff --git a/packages/frontend/components/Borrow/Overview/Details.tsx b/packages/frontend/components/Borrow/Overview/Details.tsx
@@ -76,15 +76,15 @@ function Details({
                   height={18}
                   width={18}
                 />
-                <Typography variant="small">
+                <Typography variant="small" sx={{ mb: '-3px' }}>
                   {activeProvider?.name} on
                 </Typography>
                 <NetworkIcon
                   network={vault?.chainId || ''}
                   height={18}
                   width={18}
                 />
-                <Typography variant="small">
+                <Typography variant="small" sx={{ mb: '-3px' }}>
                   {chainName(vault?.chainId)}
                 </Typography>
               </Stack>

diff --git a/packages/frontend/components/Borrow/Overview/Overview.tsx b/packages/frontend/components/Borrow/Overview/Overview.tsx
@@ -62,7 +62,7 @@ function Overview({ positionData, isEditing }: OverviewProps) {
           mt: !isMobile ? '1rem' : '0',
         }}
       >
-        <CardContent sx={{ padding: 0, gap: '1rem' }}>
+        <CardContent sx={{ padding: 0, gap: '1rem', width: '100%' }}>
           <Summary
             collateral={collateral}
             collateralInput={collateralInput}

diff --git a/packages/frontend/components/Borrow/Overview/Summary/SummaryCardItem.tsx b/packages/frontend/components/Borrow/Overview/Summary/SummaryCardItem.tsx
@@ -70,7 +70,7 @@ function SummaryCardItem({ info, isMobile }: SummaryCardItemProps) {
   }
   return (
     <Grid item xs={6}>
-      <Card variant="position">
+      <Card variant="position" sx={{ width: '100%' }}>
         <Typography variant="smallDark">{title}</Typography>
         <Stack
           direction="row"

diff --git a/packages/frontend/components/Borrow/Wrapper.tsx b/packages/frontend/components/Borrow/Wrapper.tsx
@@ -51,7 +51,7 @@ function BorrowWrapper({ formType, query }: BorrowWrapperProps) {
     undefined
   );
   const [loading, setLoading] = useState<boolean>(
-    isEditing && (!positions || positions.length === 0)
+    !isEditing || (isEditing && (!positions || positions.length === 0))
   );
 
   useEffect(() => {
@@ -105,6 +105,8 @@ function BorrowWrapper({ formType, query }: BorrowWrapperProps) {
     and change the values in the store.
   */
   useEffect(() => {
+    if (!isEditing) setTimeout(() => setLoading(false), 300);
+
     if (isEditing && loading && positionData) {
       const vault = positionData.position.vault;
       if (vault && vault instanceof BorrowingVault) {
@@ -173,19 +175,37 @@ function BorrowWrapper({ formType, query }: BorrowWrapperProps) {
             justifyContent="center"
             spacing={3}
           >
-            <Grow
-              in={Boolean(positionData)}
-              timeout={{ enter: isEditing ? 0 : ANIMATION_DURATION }}
-            >
-              {positionData ? (
-                <Grid item xs={12} sm={9.5} md={7.75} order={{ xs: 2, md: 1 }}>
-                  {!isEditing && <VaultSelect />}
+            {isEditing ? (
+              <Grid item xs={12} sm={9.5} md={7.75} order={{ xs: 2, md: 1 }}>
+                {positionData && (
                   <Overview isEditing={isEditing} positionData={positionData} />
-                </Grid>
-              ) : (
-                <div />
-              )}
-            </Grow>
+                )}
+              </Grid>
+            ) : (
+              <Grow
+                in={Boolean(positionData)}
+                timeout={{ enter: isEditing ? 0 : ANIMATION_DURATION }}
+              >
+                {positionData ? (
+                  <Grid
+                    item
+                    xs={12}
+                    sm={9.5}
+                    md={7.75}
+                    order={{ xs: 2, md: 1 }}
+                  >
+                    <VaultSelect />
+                    <Overview
+                      isEditing={isEditing}
+                      positionData={positionData}
+                    />
+                  </Grid>
+                ) : (
+                  <div />
+                )}
+              </Grow>
+            )}
+
             <Grid
               item
               xs={12}

diff --git a/packages/frontend/components/Markets/Markets.tsx b/packages/frontend/components/Markets/Markets.tsx
@@ -25,6 +25,13 @@ function Markets() {
   const [currentTab, setCurrentTab] = useState<number>(
     router.query?.tab === 'lend' ? 1 : 0
   );
+  const [isTransitionActive, setIsTransitionActive] = useState<boolean>(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setIsTransitionActive(false);
+    }, 500);
+  }, [currentTab]);
 
   const [filters, setFilters] = useState<MarketFilters>({
     searchQuery: '',
@@ -65,7 +72,10 @@ function Markets() {
         wrap="wrap"
       >
         <BorrowLendingTabNavigation
-          onChange={(tab) => setCurrentTab(tab)}
+          onChange={(tab) => {
+            setIsTransitionActive(true);
+            setCurrentTab(tab);
+          }}
           defaultTab={currentTab}
         />
         <MarketFiltersHeader filters={filters} setFilters={setFilters} />
@@ -76,6 +86,7 @@ function Markets() {
         rows={tableData.rows}
         vaults={tableData.vaults}
         type={tableData.type}
+        isTransitionActive={isTransitionActive}
       />
     </Box>
   );

diff --git a/packages/frontend/components/Markets/MarketsTable.tsx b/packages/frontend/components/Markets/MarketsTable.tsx
@@ -30,9 +30,16 @@ type MarketsTableProps = {
   filters: MarketFilters;
   vaults: AbstractVault[];
   type: VaultType;
+  isTransitionActive: boolean;
 };
 
-function MarketsTable({ filters, rows, vaults, type }: MarketsTableProps) {
+function MarketsTable({
+  filters,
+  rows,
+  vaults,
+  type,
+  isTransitionActive,
+}: MarketsTableProps) {
   const { palette } = useTheme();
   const router = useRouter();
 
@@ -124,19 +131,23 @@ function MarketsTable({ filters, rows, vaults, type }: MarketsTableProps) {
           </TableRow>
         </TableHead>
         <TableBody>
-          {isLoading && vaults.length === 0 ? (
-            <TableRow>
-              {new Array(numberOfColumns).fill('').map((_, index) => (
-                <TableCell
-                  key={`loading${index}`}
-                  sx={{
-                    height: '3.438rem',
-                  }}
-                >
-                  <Skeleton />
-                </TableCell>
+          {(isLoading && vaults.length === 0) || isTransitionActive ? (
+            <>
+              {new Array(rows.length || 1).fill('').map((_, i) => (
+                <TableRow key={i}>
+                  {new Array(numberOfColumns).fill('').map((_, index) => (
+                    <TableCell
+                      key={`loading${index}`}
+                      sx={{
+                        height: '3.438rem',
+                      }}
+                    >
+                      <Skeleton />
+                    </TableCell>
+                  ))}
+                </TableRow>
               ))}
-            </TableRow>
+            </>
           ) : filteredRows.length > 0 ? (
             filteredRows.map((row, i) => {
               return (

diff --git a/packages/frontend/components/Positions/MyPositions.tsx b/packages/frontend/components/Positions/MyPositions.tsx
@@ -1,7 +1,7 @@
 import { Grid, Typography } from '@mui/material';
 import { VaultType } from '@x-fuji/sdk';
 import { useRouter } from 'next/router';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useMarkets } from '../../store/markets.store';
 import { usePositions } from '../../store/positions.store';
@@ -14,12 +14,19 @@ function MyPositions() {
   const [currentTab, setCurrentTab] = useState(
     router.query?.tab === 'lend' ? 1 : 0
   );
+  const [isTransitionActive, setIsTransitionActive] = useState<boolean>(false);
 
   const borrowPositions = usePositions((state) => state.borrowPositions);
   const lendingPositions = usePositions((state) => state.lendingPositions);
   const borrowMarkets = useMarkets((state) => state.borrow.rows);
   const lendMarkets = useMarkets((state) => state.lending.rows);
 
+  useEffect(() => {
+    setTimeout(() => {
+      setIsTransitionActive(false);
+    }, 500);
+  }, [currentTab]);
+
   return (
     <>
       <Typography variant="h4" mb={1}>
@@ -34,7 +41,10 @@ function MyPositions() {
 
       <Grid container mt="2.5rem" mb="1rem">
         <BorrowLendingTabNavigation
-          onChange={(tab) => setCurrentTab(tab)}
+          onChange={(tab) => {
+            setIsTransitionActive(true);
+            setCurrentTab(tab);
+          }}
           defaultTab={currentTab}
         />
       </Grid>
@@ -43,6 +53,7 @@ function MyPositions() {
         positions={currentTab === 0 ? borrowPositions : lendingPositions}
         type={currentTab === 0 ? VaultType.BORROW : VaultType.LEND}
         markets={currentTab === 0 ? borrowMarkets : lendMarkets}
+        isTransitionActive={isTransitionActive}
       />
     </>
   );

diff --git a/packages/frontend/components/Positions/MyPositionsTable.tsx b/packages/frontend/components/Positions/MyPositionsTable.tsx
@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 import { VaultType } from '@x-fuji/sdk';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { AprType, AssetType, recommendedLTV } from '../../helpers/assets';
 import { chainName } from '../../helpers/chains';
@@ -42,9 +42,15 @@ type MyPositionsTableProps = {
   type: VaultType;
   markets: MarketRow[];
   positions: Position[];
+  isTransitionActive: boolean;
 };
 
-function MyPositionsTable({ type, positions, markets }: MyPositionsTableProps) {
+function MyPositionsTable({
+  type,
+  positions,
+  markets,
+  isTransitionActive,
+}: MyPositionsTableProps) {
   const router = useRouter();
 
   const account = useAuth((state) => state.address);
@@ -63,25 +69,41 @@ function MyPositionsTable({ type, positions, markets }: MyPositionsTableProps) {
     })();
   }, [loading, account, positions]);
 
+  const loadingBlock = useMemo(
+    () => (
+      <MyPositionsBorrowTableContainer isLend={isLend}>
+        <>
+          {new Array(rows.length || 1).fill('').map((_, i) => (
+            <TableRow key={i} sx={{ height: '3.375rem' }}>
+              {new Array(numberOfColumns).fill('').map((_, index) => (
+                <TableCell key={index}>
+                  <Skeleton />
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </>
+
+        <ExtraTableSpace
+          colSpan={numberOfColumns}
+          itemLength={rows.length || 1}
+          max={5}
+        />
+      </MyPositionsBorrowTableContainer>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rows]
+  );
+
   if (!account) {
     return (
       <MyPositionsBorrowTableContainer isLend={isLend}>
         <EmptyState reason="no-wallet" columnsCount={numberOfColumns} />
       </MyPositionsBorrowTableContainer>
     );
   }
-  if (loading) {
-    return (
-      <MyPositionsBorrowTableContainer isLend={isLend}>
-        <TableRow sx={{ height: '2.625rem' }}>
-          {new Array(numberOfColumns).fill('').map((_, index) => (
-            <TableCell key={index}>
-              <Skeleton />
-            </TableCell>
-          ))}
-        </TableRow>
-      </MyPositionsBorrowTableContainer>
-    );
+  if (loading || isTransitionActive) {
+    return loadingBlock;
   }
 
   function handleClick(row: PositionRow) {

diff --git a/packages/frontend/components/Shared/AprValue.tsx b/packages/frontend/components/Shared/AprValue.tsx
@@ -41,7 +41,9 @@ function AprValue({
     >
       {reward !== undefined && reward > 0 && (
         <Tooltip
-          title={`${base.toFixed(2)}% (base) - ${reward.toFixed(2)}% (reward)`}
+          title={`${base.toFixed(2)}% (base) ${
+            aprType === AprType.BORROW ? '-' : '+'
+          } ${reward.toFixed(2)}% (reward)`}
           arrow
         >
           <IconButton>

diff --git a/packages/frontend/components/Shared/Operation/VaultSelect/VaultSelect.tsx b/packages/frontend/components/Shared/Operation/VaultSelect/VaultSelect.tsx
@@ -16,9 +16,9 @@ import {
   useMediaQuery,
 } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
-import { AbstractVault, VaultType } from '@x-fuji/sdk';
+import { VaultType } from '@x-fuji/sdk';
 import { useRouter } from 'next/router';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { FetchStatus } from '../../../../helpers/assets';
 import { useBorrow } from '../../../../store/borrow.store';
@@ -43,8 +43,6 @@ function VaultSelect({ type = VaultType.BORROW }: VaultSelectProps) {
   const status = useStore().availableVaultsStatus;
   const changeActiveVault = useStore().changeActiveVault;
 
-  const prevVault = useRef<AbstractVault | undefined>(undefined);
-
   const hasNoAvailableVaults =
     status === FetchStatus.Ready && availableVaults.length === 0;
   const override = useNavigation(

diff --git a/packages/frontend/helpers/cache.ts b/packages/frontend/helpers/cache.ts
@@ -64,13 +64,16 @@ export async function getLlamaCache(): Promise<FinancialsResponse> {
   });
 }
 
-export async function getCacheLastUpdatedDate(): Promise<Date> {
-  return new Promise(async (resolve, reject) => {
+export async function getCacheLastUpdatedDate(): Promise<Date | undefined> {
+  return new Promise(async (resolve) => {
     const db = await init();
     const transaction = db.transaction(['metaData'], 'readonly');
     const request = transaction.objectStore('metaData').get('lastUpdated');
 
-    request.onsuccess = () => resolve(request.result.date);
-    request.onerror = () => reject(request.error);
+    transaction.oncomplete = () => {
+      if (request.result) resolve(request.result.date);
+      resolve(undefined);
+    };
+    transaction.onerror = () => resolve(undefined);
   });
 }