review fixes

lib/hooks/useHasAccount.ts

@@ -4,7 +4,12 @@ import * as cookies from 'lib/cookies';
 
 export default function useHasAccount() {
   const appProps = useAppContext();
+
+  if (!appConfig.isAccountSupported) {
+    return false;
+  }
+
   const cookiesString = appProps.cookies;
   const hasAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN, cookiesString));
-  return hasAuth && appConfig.isAccountSupported;
+  return hasAuth;
 }

ui/home/LatestTxsItemSkeleton.tsx

@@ -11,6 +11,7 @@ const LatestTxsItemSkeleton = () => {
   return (
     <Box
       width="100%"
+      minW="700px"
       borderTop="1px solid"
       borderColor="divider"
       py={ 4 }

ui/shared/Tabs/RoutedTabs.tsx

@@ -2,7 +2,7 @@ import type { ChakraProps, ThemingProps } from '@chakra-ui/react';
 import { chakra } from '@chakra-ui/react';
 import _pickBy from 'lodash/pickBy';
 import { useRouter } from 'next/router';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import type { RoutedTab } from './types';
 
@@ -18,7 +18,15 @@ interface Props extends ThemingProps<'Tabs'> {
 
 const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled, className, ...themeProps }: Props) => {
   const router = useRouter();
-  const [ activeTabIndex, setActiveTabIndex ] = useState<number>(tabs.length + 1);
+
+  let tabIndex = 0;
+  const tabFromRoute = router.query.tab;
+  if (tabFromRoute) {
+    tabIndex = tabs.findIndex(({ id, subTabs }) => id === tabFromRoute || subTabs?.some((id) => id === tabFromRoute));
+    if (tabIndex < 0) {
+      tabIndex = 0;
+    }
+  }
 
   const tabsRef = useRef<HTMLDivElement>(null);
 
@@ -50,21 +58,6 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled, className, .
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    if (router.isReady) {
-
-      let tabIndex = 0;
-      const tabFromRoute = router.query.tab;
-      if (tabFromRoute) {
-        tabIndex = tabs.findIndex(({ id, subTabs }) => id === tabFromRoute || subTabs?.some((id) => id === tabFromRoute));
-        if (tabIndex < 0) {
-          tabIndex = 0;
-        }
-      }
-      setActiveTabIndex(tabIndex);
-    }
-  }, [ tabs, router, activeTabIndex ]);
-
   return (
     <TabsWithScroll
       tabs={ tabs }
@@ -72,7 +65,7 @@ const RoutedTabs = ({ tabs, tabListProps, rightSlot, stickyEnabled, className, .
       rightSlot={ rightSlot }
       stickyEnabled={ stickyEnabled }
       onTabChange={ handleTabChange }
-      activeTabIndex={ activeTabIndex }
+      defaultTabIndex={ tabIndex }
       { ...themeProps }
     />
   );

ui/shared/Tabs/RoutedTabsMenu.tsx → ui/shared/Tabs/TabsMenu.tsx

@@ -10,13 +10,13 @@ import { Popover,
 import type { StyleProps } from '@chakra-ui/styled-system';
 import React from 'react';
 
-import type { MenuButton, RoutedTab } from './types';
+import type { MenuButton, TabItem } from './types';
 
 import { menuButton } from './utils';
 
 interface Props {
-  tabs: Array<RoutedTab | MenuButton>;
-  activeTab?: RoutedTab;
+  tabs: Array<TabItem | MenuButton>;
+  activeTab?: TabItem;
   tabsCut: number;
   isActive: boolean;
   styles?: StyleProps;
@@ -25,7 +25,7 @@ interface Props {
   size: ButtonProps['size'];
 }
 
-const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRef, activeTab, size }: Props) => {
+const TabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRef, activeTab, size }: Props) => {
   const { isOpen, onClose, onOpen } = useDisclosure();
 
   const handleItemClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
@@ -69,4 +69,4 @@ const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRe
   );
 };
 
-export default React.memo(RoutedTabsMenu);
+export default React.memo(TabsMenu);

ui/shared/Tabs/TabsWithScroll.tsx

@@ -19,7 +19,7 @@ import { useScrollDirection } from 'lib/contexts/scrollDirection';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useIsSticky from 'lib/hooks/useIsSticky';
 
-import RoutedTabsMenu from './RoutedTabsMenu';
+import TabsMenu from './TabsMenu';
 import useAdaptiveTabs from './useAdaptiveTabs';
 
 const hiddenItemStyles: StyleProps = {
@@ -36,7 +36,7 @@ interface Props extends ThemingProps<'Tabs'> {
   rightSlot?: React.ReactNode;
   stickyEnabled?: boolean;
   onTabChange?: (index: number) => void;
-  activeTabIndex?: number;
+  defaultTabIndex?: number;
   className?: string;
 }
 
@@ -47,12 +47,12 @@ const TabsWithScroll = ({
   rightSlot,
   stickyEnabled,
   onTabChange,
-  activeTabIndex: activeTabIndexProps,
+  defaultTabIndex,
   className,
   ...themeProps
 }: Props) => {
   const scrollDirection = useScrollDirection();
-  const [ activeTabIndex, setActiveTabIndex ] = useState<number>(activeTabIndexProps || 0);
+  const [ activeTabIndex, setActiveTabIndex ] = useState<number>(defaultTabIndex || 0);
   const isMobile = useIsMobile();
   const tabsRef = useRef<HTMLDivElement>(null);
   const { tabsCut, tabsList, tabsRefs, listRef, rightSlotRef } = useAdaptiveTabs(tabs, isMobile);
@@ -64,10 +64,10 @@ const TabsWithScroll = ({
   }, [ onTabChange ]);
 
   useEffect(() => {
-    if (activeTabIndexProps !== undefined) {
-      setActiveTabIndex(activeTabIndexProps);
+    if (defaultTabIndex !== undefined) {
+      setActiveTabIndex(defaultTabIndex);
     }
-  }, [ activeTabIndexProps ]);
+  }, [ defaultTabIndex ]);
 
   useEffect(() => {
     if (activeTabIndex < tabs.length && isMobile) {
@@ -138,7 +138,7 @@ const TabsWithScroll = ({
         { tabsList.map((tab, index) => {
           if (!tab.id) {
             return (
-              <RoutedTabsMenu
+              <TabsMenu
                 key="menu"
                 tabs={ tabs }
                 activeTab={ tabs[activeTabIndex] }

ui/shared/skeletons/SkeletonTabs.tsx

 import { Flex, Skeleton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import type { RoutedTab } from '../RoutedTabs/types';
+import type { RoutedTab } from '../Tabs/types';
 
 interface Props {
   className?: string;