renaming

eslint.config.mjs

@@ -283,7 +283,6 @@ export default tseslint.config(
             '/types/',
             [ '/^nextjs/' ],
             [
-              '/^chakra/',
               '/^configs/',
               '/^data/',
               '/^deploy/',
@@ -295,6 +294,7 @@ export default tseslint.config(
               '/^playwright/',
               '/^stubs/',
               '/^theme/',
+              '/^toolkit/',
               '/^ui/',
             ],
             [ 'parent', 'sibling', 'index' ],

lib/contexts/rewards.tsx

@@ -13,7 +13,7 @@ import type {
   RewardsConfigResponse,
 } from 'types/api/rewards';
 
-import { toaster } from 'chakra/components/toaster';
+import { toaster } from 'toolkit/chakra/toaster';
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import useApiFetch from 'lib/api/useApiFetch';

lib/mixpanel/useLogPageView.tsx

@@ -2,8 +2,8 @@ import { usePathname } from 'next/navigation';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { ColorMode } from 'chakra/components/color-mode';
-import { useColorMode } from 'chakra/components/color-mode';
+import type { ColorMode } from 'toolkit/chakra/color-mode';
+import { useColorMode } from 'toolkit/chakra/color-mode';
 import config from 'configs/app';
 import * as cookies from 'lib/cookies';
 import getQueryParamString from 'lib/router/getQueryParamString';

pages/_app.tsx

@@ -7,8 +7,6 @@ import React from 'react';
 
 import type { NextPageWithLayout } from 'nextjs/types';
 
-import { Provider as ChakraProvider } from 'chakra/components/provider';
-import { Toaster } from 'chakra/components/toaster';
 import config from 'configs/app';
 import useQueryClientConfig from 'lib/api/useQueryClientConfig';
 import { AppContextProvider } from 'lib/contexts/app';
@@ -21,6 +19,8 @@ import useLoadFeatures from 'lib/growthbook/useLoadFeatures';
 import useNotifyOnNavigation from 'lib/hooks/useNotifyOnNavigation';
 import { clientConfig as rollbarConfig, Provider as RollbarProvider } from 'lib/rollbar';
 import { SocketProvider } from 'lib/socket/context';
+import { Provider as ChakraProvider } from 'toolkit/chakra/provider';
+import { Toaster } from 'toolkit/chakra/toaster';
 import RewardsLoginModal from 'ui/rewards/login/RewardsLoginModal';
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
 import AppErrorGlobalContainer from 'ui/shared/AppError/AppErrorGlobalContainer';

chakra/components/provider.tsx → toolkit/chakra/provider.tsx

@@ -2,7 +2,7 @@
 
 import { ChakraProvider } from '@chakra-ui/react';
 
-import theme from 'chakra/theme/theme';
+import theme from 'toolkit/theme/theme';
 
 import {
   ColorModeProvider,

ui/pages/Chakra.tsx

 import { Heading, HStack } from '@chakra-ui/react';
 import React from 'react';
 
-import { Button } from 'chakra/components/button';
-import { useColorMode } from 'chakra/components/color-mode';
-import { Switch } from 'chakra/components/switch';
+import { Button } from 'toolkit/chakra/button';
+import { useColorMode } from 'toolkit/chakra/color-mode';
+import { Switch } from 'toolkit/chakra/switch';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
 const ChakraShowcases = () => {

ui/pages/Login.tsx

@@ -3,13 +3,13 @@ import mixpanel from 'mixpanel-browser';
 import type { ChangeEvent } from 'react';
 import React from 'react';
 
-import { Button } from 'chakra/components/button';
-import { toaster } from 'chakra/components/toaster';
 import config from 'configs/app';
 import * as cookies from 'lib/cookies';
 import useFeatureValue from 'lib/growthbook/useFeatureValue';
 import useGradualIncrement from 'lib/hooks/useGradualIncrement';
 import { useRollbar } from 'lib/rollbar';
+import { Button } from 'toolkit/chakra/button';
+import { toaster } from 'toolkit/chakra/toaster';
 import PageTitle from 'ui/shared/Page/PageTitle';
 const Login = () => {
   const rollbar = useRollbar();

ui/shared/AppError/AppErrorGlobalContainer.tsx

 import { Box } from '@chakra-ui/react';
 import React from 'react';
 
-import { useColorModeValue } from 'chakra/components/color-mode';
+import { useColorModeValue } from 'toolkit/chakra/color-mode';
 
 interface Props {
   children: React.ReactNode;

ui/shared/AppError/custom/AppErrorTooManyRequests.tsx

 import { Button, Text } from '@chakra-ui/react';
 import React from 'react';
 
-import { toaster } from 'chakra/components/toaster';
+import { toaster } from 'toolkit/chakra/toaster';
 import config from 'configs/app';
 import buildUrl from 'lib/api/buildUrl';
 import useFetch from 'lib/hooks/useFetch';

ui/shared/HashStringShortenDynamic.tsx

@@ -15,7 +15,7 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import type { FontFace } from 'use-font-face-observer';
 import useFontFaceObserver from 'use-font-face-observer';
 
-import { BODY_TYPEFACE, HEADING_TYPEFACE } from 'chakra/theme/foundations/typography';
+import { BODY_TYPEFACE, HEADING_TYPEFACE } from 'toolkit/theme/foundations/typography';
 
 const TAIL_LENGTH = 4;
 const HEAD_MIN_LENGTH = 4;

ui/shared/NetworkAddToWallet.tsx

 import { Button } from '@chakra-ui/react';
 import React from 'react';
 
-import { toaster } from 'chakra/components/toaster';
+import { toaster } from 'toolkit/chakra/toaster';
 import config from 'configs/app';
 import * as mixpanel from 'lib/mixpanel/index';
 import useAddOrSwitchChain from 'lib/web3/useAddOrSwitchChain';

ui/shared/Page/PageTitle.tsx

@@ -2,7 +2,7 @@ import { Heading, Flex, Link, chakra, Skeleton, useDisclosure } from '@chakra-ui
 import _debounce from 'lodash/debounce';
 import React from 'react';
 
-import { Tooltip } from 'chakra/components/tooltip';
+import { Tooltip } from 'toolkit/chakra/tooltip';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import TextAd from 'ui/shared/ad/TextAd';
 import IconSvg from 'ui/shared/IconSvg';

ui/shared/TruncatedTextTooltip.tsx

@@ -4,7 +4,7 @@ import debounce from 'lodash/debounce';
 import React from 'react';
 import useFontFaceObserver from 'use-font-face-observer';
 
-import { BODY_TYPEFACE } from 'chakra/theme/foundations/typography';
+import { BODY_TYPEFACE } from 'toolkit/theme/foundations/typography';
 
 interface Props {
   children: React.ReactNode;

ui/shared/Web3ModalProvider.tsx

@@ -2,10 +2,10 @@ import { createAppKit, useAppKitTheme } from '@reown/appkit/react';
 import React from 'react';
 import { WagmiProvider } from 'wagmi';
 
-import { useColorMode } from 'chakra/components/color-mode';
-import colors from 'chakra/theme/foundations/colors';
-import { BODY_TYPEFACE } from 'chakra/theme/foundations/typography';
-import zIndex from 'chakra/theme/foundations/zIndex';
+import { useColorMode } from 'toolkit/chakra/color-mode';
+import colors from 'toolkit/theme/foundations/colors';
+import { BODY_TYPEFACE } from 'toolkit/theme/foundations/typography';
+import zIndex from 'toolkit/theme/foundations/zIndex';
 import config from 'configs/app';
 import currentChain from 'lib/web3/currentChain';
 import wagmiConfig from 'lib/web3/wagmiConfig';

ui/shared/gas/GasInfoTooltip.tsx

@@ -15,7 +15,7 @@ import type { HomeStats } from 'types/api/stats';
 
 import { route } from 'nextjs-routes';
 
-import { useColorModeValue } from 'chakra/components/color-mode';
+import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
 import Popover from 'ui/shared/chakra/Popover';

ui/shared/layout/components/Container.tsx

 import { Box, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import { useColorModeValue } from 'chakra/components/color-mode';
+import { useColorModeValue } from 'toolkit/chakra/color-mode';
 
 interface Props {
   children: React.ReactNode;

ui/snippets/auth/screens/AuthModalScreenEmail.tsx

@@ -5,7 +5,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 
 import type { EmailFormFields, Screen } from '../types';
 
-import { toaster } from 'chakra/components/toaster';
+import { toaster } from 'toolkit/chakra/toaster';
 import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/errors/getErrorMessage';
 import getErrorObjPayload from 'lib/errors/getErrorObjPayload';

ui/snippets/auth/screens/AuthModalScreenOtpCode.tsx

@@ -6,7 +6,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import type { OtpCodeFormFields, ScreenSuccess } from '../types';
 import type { UserInfo } from 'types/api/account';
 
-import { toaster } from 'chakra/components/toaster';
+import { toaster } from 'toolkit/chakra/toaster';
 import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/errors/getErrorMessage';
 import getErrorObjPayload from 'lib/errors/getErrorObjPayload';

ui/snippets/auth/useLogout.ts

@@ -4,7 +4,7 @@ import React from 'react';
 
 import type { Route } from 'nextjs-routes';
 
-import { toaster } from 'chakra/components/toaster';
+import { toaster } from 'toolkit/chakra/toaster';
 import config from 'configs/app';
 import useApiFetch from 'lib/api/useApiFetch';
 import { getResourceKey } from 'lib/api/useApiQuery';

ui/snippets/auth/useSignInWithWallet.ts

@@ -3,7 +3,7 @@ import { useSignMessage } from 'wagmi';
 
 import type { UserInfo } from 'types/api/account';
 
-import { toaster } from 'chakra/components/toaster';
+import { toaster } from 'toolkit/chakra/toaster';
 import config from 'configs/app';
 import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/errors/getErrorMessage';

ui/snippets/header/Burger.tsx

 import { Box, Flex, Drawer, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
-import { useColorModeValue } from 'chakra/components/color-mode';
+import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import config from 'configs/app';
 import IconSvg from 'ui/shared/IconSvg';
 import NavigationMobile from 'ui/snippets/navigation/mobile/NavigationMobile';

ui/snippets/navigation/mobile/NavigationMobile.tsx

@@ -2,7 +2,7 @@ import { Box, Flex, Text, VStack } from '@chakra-ui/react';
 // import { animate, motion, useMotionValue } from 'framer-motion';
 import React, { useCallback } from 'react';
 
-import { useColorModeValue } from 'chakra/components/color-mode';
+import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
 import IconSvg from 'ui/shared/IconSvg';
 import useIsAuth from 'ui/snippets/auth/useIsAuth';

ui/snippets/networkMenu/NetworkMenuButton.tsx

 import { Button, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import { useColorModeValue } from 'chakra/components/color-mode';
+import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 import IconSvg from 'ui/shared/IconSvg';
 

ui/snippets/searchBar/SearchBarInput.tsx

@@ -3,7 +3,7 @@ import throttle from 'lodash/throttle';
 import React from 'react';
 import type { ChangeEvent, FormEvent, FocusEvent } from 'react';
 
-import { useColorModeValue } from 'chakra/components/color-mode';
+import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import { useScrollDirection } from 'lib/contexts/scrollDirection';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import ClearButton from 'ui/shared/ClearButton';

ui/snippets/topBar/TopBar.tsx

 import { Flex, Divider, Box } from '@chakra-ui/react';
 import React from 'react';
 
-import { useColorModeValue } from 'chakra/components/color-mode';
+import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import config from 'configs/app';
 import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';