add logout

lib/cookies.ts

@@ -28,12 +28,16 @@ export function get(name?: NAMES | undefined | null, serverCookie?: string) {
   }
 }
 
-export function set(name: string, value: string, attributes: Cookies.CookieAttributes = {}) {
+export function set(name: NAMES, value: string, attributes: Cookies.CookieAttributes = {}) {
   attributes.path = '/';
 
   return Cookies.set(name, value, attributes);
 }
 
+export function remove(name: NAMES, attributes: Cookies.CookieAttributes = {}) {
+  return Cookies.remove(name, attributes);
+}
+
 export function getFromCookieString(cookieString: string, name?: NAMES | undefined | null) {
   return cookieString.split(`${ name }=`)[1]?.split(';')[0];
 }

ui/snippets/auth/screens/AuthModalScreenConnectWallet.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import type { Screen } from '../types';
 
-import useSignInWithWallet from './useSignInWithWallet';
+import useSignInWithWallet from '../useSignInWithWallet';
 
 interface Props {
   onSuccess: (screen: Screen) => void;

ui/snippets/auth/useLogout.tsx

+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { Route } from 'nextjs-routes';
+
+import * as cookies from 'lib/cookies';
+
+const PROTECTED_ROUTES: Array<Route['pathname']> = [
+  '/account/api-key',
+  '/account/custom-abi',
+  '/account/tag-address',
+  '/account/verified-addresses',
+  '/account/watchlist',
+  '/auth/profile',
+  '/auth/unverified-email',
+];
+
+export default function useLogout() {
+  const router = useRouter();
+
+  return React.useCallback(async() => {
+    cookies.remove(cookies.NAMES.API_TOKEN);
+
+    if (
+      PROTECTED_ROUTES.includes(router.pathname) ||
+        (router.pathname === '/txs' && router.query.tab === 'watchlist')
+    ) {
+      window.location.assign('/');
+    } else {
+      window.location.reload();
+    }
+  }, [ router ]);
+}

ui/snippets/profile/ProfileButton.tsx

 import type { ButtonProps } from '@chakra-ui/react';
-import { Button, Skeleton, Tooltip, Text, HStack } from '@chakra-ui/react';
+import { Button, Skeleton, Tooltip, Box, HStack } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
@@ -55,7 +55,7 @@ const ProfileButton = ({ profileQuery, size, variant, onClick, isPending }: Prop
       return (
         <HStack gap={ 2 }>
           <ProfileAddressIcon address={ address } isAutoConnectDisabled={ isAutoConnectDisabled }/>
-          <Text display={{ base: 'none', md: 'block' }}>{ text }</Text>
+          <Box display={{ base: 'none', md: 'block' }}>{ text }</Box>
         </HStack>
       );
     }
@@ -64,7 +64,7 @@ const ProfileButton = ({ profileQuery, size, variant, onClick, isPending }: Prop
       return (
         <HStack gap={ 2 }>
           <IconSvg name="profile" boxSize={ 5 }/>
-          <Text display={{ base: 'none', md: 'block' }}>{ getUserHandle(data.email) }</Text>
+          <Box display={{ base: 'none', md: 'block' }}>{ getUserHandle(data.email) }</Box>
         </HStack>
       );
     }

ui/snippets/profile/ProfileDesktop.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
 import Popover from 'ui/shared/chakra/Popover';
 import AuthModal from 'ui/snippets/auth/AuthModal';
-import useSignInWithWallet from 'ui/snippets/auth/screens/useSignInWithWallet';
+import useSignInWithWallet from 'ui/snippets/auth/useSignInWithWallet';
 
 import ProfileButton from './ProfileButton';
 import ProfileMenuContent from './ProfileMenuContent';

ui/snippets/profile/ProfileMenuContent.tsx

@@ -9,6 +9,7 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import { useMarketplaceContext } from 'lib/contexts/marketplace';
 import IconSvg from 'ui/shared/IconSvg';
+import useLogout from 'ui/snippets/auth/useLogout';
 
 import ProfileMenuNavLink from './ProfileMenuNavLink';
 import ProfileMenuWallet from './ProfileMenuWallet';
@@ -50,6 +51,7 @@ interface Props {
 const ProfileMenuContent = ({ data, onClose }: Props) => {
   const { isAutoConnectDisabled } = useMarketplaceContext();
   const alertBgColor = useColorModeValue('orange.100', 'orange.900');
+  const logout = useLogout();
 
   return (
     <Box>
@@ -101,7 +103,7 @@ const ProfileMenuContent = ({ data, onClose }: Props) => {
       <ProfileMenuNavLink
         text="Sign out"
         icon="sign_out"
-        onClick={ onClose }
+        onClick={ logout }
       />
     </Box>
   );

ui/snippets/profile/ProfileMobile.tsx

@@ -4,8 +4,8 @@ import React from 'react';
 
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
 import AuthModal from 'ui/snippets/auth/AuthModal';
+import useSignInWithWallet from 'ui/snippets/auth/useSignInWithWallet';
 
-import useSignInWithWallet from '../auth/screens/useSignInWithWallet';
 import ProfileButton from './ProfileButton';
 import ProfileMenuContent from './ProfileMenuContent';