diff --git a/packages/frontend/components/App/Header/SocialMenuWrapper.tsx b/packages/frontend/components/App/Header/SocialMenuWrapper.tsx
index eef875f6a..55f727d07 100644
--- a/packages/frontend/components/App/Header/SocialMenuWrapper.tsx
+++ b/packages/frontend/components/App/Header/SocialMenuWrapper.tsx
@@ -20,6 +20,11 @@ function SocialMenuWrapper() {
: }
onClick={openMenu}
+ sx={{
+ '& .MuiChip-label': {
+ mb: '-3px',
+ },
+ }}
/>
-
+
{activeProvider?.name} on
-
+
{chainName(vault?.chainId)}
diff --git a/packages/frontend/components/Borrow/Overview/Overview.tsx b/packages/frontend/components/Borrow/Overview/Overview.tsx
index 0eb461c3b..5e4d03be2 100644
--- 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',
}}
>
-
+
-
+
{title}
(
- 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}
>
-
- {positionData ? (
-
- {!isEditing && }
+ {isEditing ? (
+
+ {positionData && (
-
- ) : (
-
- )}
-
+ )}
+
+ ) : (
+
+ {positionData ? (
+
+
+
+
+ ) : (
+
+ )}
+
+ )}
+
(
router.query?.tab === 'lend' ? 1 : 0
);
+ const [isTransitionActive, setIsTransitionActive] = useState(false);
+
+ useEffect(() => {
+ setTimeout(() => {
+ setIsTransitionActive(false);
+ }, 500);
+ }, [currentTab]);
const [filters, setFilters] = useState({
searchQuery: '',
@@ -65,7 +72,10 @@ function Markets() {
wrap="wrap"
>
setCurrentTab(tab)}
+ onChange={(tab) => {
+ setIsTransitionActive(true);
+ setCurrentTab(tab);
+ }}
defaultTab={currentTab}
/>
@@ -76,6 +86,7 @@ function Markets() {
rows={tableData.rows}
vaults={tableData.vaults}
type={tableData.type}
+ isTransitionActive={isTransitionActive}
/>
);
diff --git a/packages/frontend/components/Markets/MarketsTable.tsx b/packages/frontend/components/Markets/MarketsTable.tsx
index 19d919230..1bf5d470c 100644
--- 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) {
- {isLoading && vaults.length === 0 ? (
-
- {new Array(numberOfColumns).fill('').map((_, index) => (
-
-
-
+ {(isLoading && vaults.length === 0) || isTransitionActive ? (
+ <>
+ {new Array(rows.length || 1).fill('').map((_, i) => (
+
+ {new Array(numberOfColumns).fill('').map((_, index) => (
+
+
+
+ ))}
+
))}
-
+
) : filteredRows.length > 0 ? (
filteredRows.map((row, i) => {
return (
diff --git a/packages/frontend/components/Positions/MyPositions.tsx b/packages/frontend/components/Positions/MyPositions.tsx
index ad34c7871..d5e0c86f0 100644
--- 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(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 (
<>
@@ -34,7 +41,10 @@ function MyPositions() {
setCurrentTab(tab)}
+ onChange={(tab) => {
+ setIsTransitionActive(true);
+ setCurrentTab(tab);
+ }}
defaultTab={currentTab}
/>
@@ -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
index 127180a9d..7e0d7f0b0 100644
--- 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,6 +69,32 @@ function MyPositionsTable({ type, positions, markets }: MyPositionsTableProps) {
})();
}, [loading, account, positions]);
+ const loadingBlock = useMemo(
+ () => (
+
+ <>
+ {new Array(rows.length || 1).fill('').map((_, i) => (
+
+ {new Array(numberOfColumns).fill('').map((_, index) => (
+
+
+
+ ))}
+
+ ))}
+
+
+
+
+ ),
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [rows]
+ );
+
if (!account) {
return (
@@ -70,18 +102,8 @@ function MyPositionsTable({ type, positions, markets }: MyPositionsTableProps) {
);
}
- if (loading) {
- return (
-
-
- {new Array(numberOfColumns).fill('').map((_, index) => (
-
-
-
- ))}
-
-
- );
+ 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
index d033a6ae3..406fc8299 100644
--- a/packages/frontend/components/Shared/AprValue.tsx
+++ b/packages/frontend/components/Shared/AprValue.tsx
@@ -41,7 +41,9 @@ function AprValue({
>
{reward !== undefined && reward > 0 && (
diff --git a/packages/frontend/components/Shared/Operation/VaultSelect/VaultSelect.tsx b/packages/frontend/components/Shared/Operation/VaultSelect/VaultSelect.tsx
index b7ffd9bff..e6fadf125 100644
--- 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(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
index 9c93d363a..74bd29763 100644
--- a/packages/frontend/helpers/cache.ts
+++ b/packages/frontend/helpers/cache.ts
@@ -64,13 +64,16 @@ export async function getLlamaCache(): Promise {
});
}
-export async function getCacheLastUpdatedDate(): Promise {
- return new Promise(async (resolve, reject) => {
+export async function getCacheLastUpdatedDate(): Promise {
+ 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);
});
}
diff --git a/packages/frontend/helpers/errors.ts b/packages/frontend/helpers/errors.ts
index f0ba7ece8..fc8eb3537 100644
--- a/packages/frontend/helpers/errors.ts
+++ b/packages/frontend/helpers/errors.ts
@@ -1,5 +1,4 @@
import * as Sentry from '@sentry/react';
-import { BrowserTracing } from '@sentry/tracing';
import { HELPER_URL, NOTIFICATION_MESSAGES, SENTRY_DSN } from '../constants';
import {
@@ -20,8 +19,6 @@ export const initErrorReporting = () => {
}
Sentry.init({
dsn: SENTRY_DSN,
- integrations: [new BrowserTracing()],
- tracesSampleRate: 1.0,
});
};