fix

lib/cookies.ts

@@ -9,9 +9,9 @@ export enum NAMES {
   TXS_SORT='txs_sort',
 }
 
-export function get(name?: string | undefined | null) {
+export function get(name?: NAMES | undefined | null, serverCookie?: string) {
   if (!isBrowser()) {
-    return undefined;
+    return serverCookie ? getFromCookieString(serverCookie, name) : undefined;
   }
   return Cookies.get(name);
 }
@@ -22,6 +22,6 @@ export function set(name: string, value: string, attributes: Types.CookieAttribu
   return Cookies.set(name, value, attributes);
 }
 
-export function getFromCookieString(cookieString: string, name: NAMES) {
+export function getFromCookieString(cookieString: string, name?: NAMES | undefined | null) {
   return cookieString.split(`${ name }=`)[1]?.split(';')[0];
 }

pages/_app.tsx

@@ -3,10 +3,10 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import type { AppProps } from 'next/app';
 import React, { useState } from 'react';
 
+import { AppWrapper } from 'lib/appContext';
 import { Chakra } from 'lib/Chakra';
 import useConfigSentry from 'lib/hooks/useConfigSentry';
 import type { ErrorType } from 'lib/hooks/useFetch';
-import { AppWrapper } from 'lib/next/AppWrapper';
 import theme from 'theme';
 
 function MyApp({ Component, pageProps }: AppProps) {

ui/shared/UserAvatar.tsx

-import { useColorModeValue, chakra, Box, Image } from '@chakra-ui/react';
+import { useColorModeValue, chakra, SkeletonCircle, Image } from '@chakra-ui/react';
 import React from 'react';
 import Identicon from 'react-identicons';
 
 import type { UserInfo } from 'types/api/account';
 
+import { useAppContext } from 'lib/appContext';
 import * as cookies from 'lib/cookies';
-import { useAppContext } from 'lib/next/AppWrapper';
 
 const ProfileIcon = chakra(Identicon);
 
@@ -17,17 +17,13 @@ interface Props {
 
 const UserAvatar = ({ size, data, isFetched }: Props) => {
   const appProps = useAppContext();
-  const hasAuth = Boolean(cookies.getFromCookieString(appProps.cookies, cookies.NAMES.API_TOKEN));
+  const hasAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN, appProps.cookies));
 
   const sizeString = `${ size }px`;
   const bgColor = useColorModeValue('blackAlpha.100', 'white');
 
-  // if (hasAuth && !isFetched) {
-
-  // }
-
   if (hasAuth && !isFetched) {
-    return <Box w={ sizeString } h={ sizeString }></Box>;
+    return <SkeletonCircle h={ sizeString } w={ sizeString }/>;
   }
 
   if (data?.avatar) {

ui/snippets/navigation/NavigationDesktop.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 
 import appConfig from 'configs/app/config';
 import chevronIcon from 'icons/arrows/east-mini.svg';
+import { useAppContext } from 'lib/appContext';
 import * as cookies from 'lib/cookies';
 import useNavItems from 'lib/hooks/useNavItems';
-import { useAppContext } from 'lib/next/AppWrapper';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import NetworkMenu from 'ui/snippets/networkMenu/NetworkMenu';
@@ -17,8 +17,16 @@ const NavigationDesktop = () => {
   const appProps = useAppContext();
   const cookiesString = appProps.cookies;
 
-  const isNavBarCollapsed = cookies.getFromCookieString(cookiesString, cookies.NAMES.NAV_BAR_COLLAPSED) === 'true';
-  const hasAuth = Boolean(cookies.getFromCookieString(cookiesString, cookies.NAMES.API_TOKEN));
+  const isNavBarCollapsedCookie = cookies.get(cookies.NAMES.NAV_BAR_COLLAPSED, cookiesString);
+  let isNavBarCollapsed;
+  if (isNavBarCollapsedCookie === 'true') {
+    isNavBarCollapsed = true;
+  }
+  if (isNavBarCollapsedCookie === 'false') {
+    isNavBarCollapsed = false;
+  }
+
+  const hasAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN, cookiesString));
 
   const { mainNavItems, accountNavItems } = useNavItems();