chore: bump chakra ui package versions (#4688)

package.json

@@ -75,9 +75,9 @@
   },
   "dependencies": {
     "@axelar-network/axelarjs-sdk": "^0.6.18",
-    "@chakra-ui/icons": "^2.0.2",
-    "@chakra-ui/react": "^2.2.1",
-    "@chakra-ui/system": "^2.1.3",
+    "@chakra-ui/icons": "^2.0.19",
+    "@chakra-ui/react": "^2.7.0",
+    "@chakra-ui/system": "^2.5.8",
     "@chakra-ui/tag": "^2.0.2",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",

src/App.tsx

@@ -1,8 +1,5 @@
-import { Alert, AlertDescription } from '@chakra-ui/alert'
-import { Button } from '@chakra-ui/button'
-import { CloseButton, Flex } from '@chakra-ui/react'
-import type { ToastId } from '@chakra-ui/toast'
-import { useToast } from '@chakra-ui/toast'
+import type { ToastId } from '@chakra-ui/react'
+import { Alert, AlertDescription, Button, CloseButton, Flex, useToast } from '@chakra-ui/react'
 import { useEffect, useRef } from 'react'
 import { FaSync } from 'react-icons/fa'
 import { useTranslate } from 'react-polyglot'

src/components/AccountCard.tsx

@@ -1,7 +1,6 @@
 import { ChevronRightIcon } from '@chakra-ui/icons'
 import type { ButtonProps } from '@chakra-ui/react'
-import { Button } from '@chakra-ui/react'
-import { SkeletonCircle, SkeletonText } from '@chakra-ui/skeleton'
+import { Button, SkeletonCircle, SkeletonText } from '@chakra-ui/react'
 import { useTranslate } from 'react-polyglot'
 import type { Asset } from 'lib/asset-service'
 

src/components/AssetHeader/AssetMarketData.tsx

@@ -1,7 +1,5 @@
-import type { BoxProps, TextProps } from '@chakra-ui/layout'
-import { SimpleGrid } from '@chakra-ui/layout'
-import { Skeleton } from '@chakra-ui/skeleton'
-import { Stat, StatArrow } from '@chakra-ui/stat'
+import type { BoxProps, TextProps } from '@chakra-ui/react'
+import { SimpleGrid, Skeleton, Stat, StatArrow } from '@chakra-ui/react'
 import type { AssetId } from '@shapeshiftoss/caip'
 import { useTranslate } from 'react-polyglot'
 import { Amount } from 'components/Amount/Amount'

src/components/CarouselDots/CarouselDots.tsx

@@ -1,5 +1,4 @@
-import { Box, Flex } from '@chakra-ui/layout'
-import { Link, useColorModeValue } from '@chakra-ui/react'
+import { Box, Flex, Link, useColorModeValue } from '@chakra-ui/react'
 
 type CarouselDotsProps = {
   length: number

src/components/Graph/TimeControls.tsx

@@ -1,4 +1,4 @@
-import type { ButtonGroupProps } from '@chakra-ui/button'
+import type { ButtonGroupProps } from '@chakra-ui/react'
 import { HistoryTimeframe } from '@shapeshiftoss/types'
 import { Radio } from 'components/Radio/Radio'
 

src/components/Layout/Header/GlobalSearch/ResultButton.tsx

@@ -1,6 +1,5 @@
 import type { ButtonProps } from '@chakra-ui/react'
-import { Button } from '@chakra-ui/react'
-import { forwardRef, useColorModeValue } from '@chakra-ui/system'
+import { Button, forwardRef, useColorModeValue } from '@chakra-ui/react'
 
 export const ResultButton = forwardRef<ButtonProps, 'div'>((props, ref) => (
   <Button

src/components/Layout/Header/NavBar/ChainMenu.tsx

@@ -1,7 +1,18 @@
 import { WarningIcon } from '@chakra-ui/icons'
-import { Menu, MenuButton, MenuGroup, MenuItem, MenuList } from '@chakra-ui/menu'
 import type { BoxProps } from '@chakra-ui/react'
-import { Box, Button, Flex, Text, Tooltip, useColorModeValue } from '@chakra-ui/react'
+import {
+  Box,
+  Button,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuGroup,
+  MenuItem,
+  MenuList,
+  Text,
+  Tooltip,
+  useColorModeValue,
+} from '@chakra-ui/react'
 import type { ChainId } from '@shapeshiftoss/caip'
 import { fromChainId, gnosisChainId } from '@shapeshiftoss/caip'
 import type { EvmBaseAdapter, EvmChainId } from '@shapeshiftoss/chain-adapters'

src/components/Layout/Header/NavBar/ExpandedMenuItem.tsx

@@ -1,9 +1,7 @@
 import { ChevronDownIcon, ChevronRightIcon, ExternalLinkIcon } from '@chakra-ui/icons'
-import { MenuItem } from '@chakra-ui/menu'
-import type { MenuItemProps } from '@chakra-ui/menu/dist/declarations/src/menu'
-import { Link, Tag, useColorModeValue } from '@chakra-ui/react'
+import type { ColorProps, MenuItemProps } from '@chakra-ui/react'
+import { Link, MenuItem, Tag, useColorModeValue } from '@chakra-ui/react'
 import type { ThemeTypings } from '@chakra-ui/styled-system'
-import type { ColorProps } from '@chakra-ui/styled-system/dist/declarations/src/config/color'
 import type { InterpolationOptions } from 'node-polyglot'
 import type { CSSProperties } from 'react'
 import { RawText, Text } from 'components/Text'

src/components/Layout/Header/NavBar/KeepKey/AwaitKeepKey.tsx

@@ -1,5 +1,5 @@
 import { InfoIcon } from '@chakra-ui/icons'
-import type { FlexProps } from '@chakra-ui/layout'
+import type { FlexProps } from '@chakra-ui/react'
 import { Box, Button, Divider, Flex, useColorModeValue } from '@chakra-ui/react'
 import type Polyglot from 'node-polyglot'
 import React from 'react'

src/components/Layout/Header/NavBar/KeepKey/ChangePassphrase.tsx

@@ -10,8 +10,8 @@ import {
   Spinner,
   Stack,
   Switch,
+  useToast,
 } from '@chakra-ui/react'
-import { useToast } from '@chakra-ui/toast'
 import { useTranslate } from 'react-polyglot'
 import { AwaitKeepKey } from 'components/Layout/Header/NavBar/KeepKey/AwaitKeepKey'
 import { LastDeviceInteractionStatus } from 'components/Layout/Header/NavBar/KeepKey/LastDeviceInteractionStatus'

src/components/Layout/Header/NavBar/KeepKey/ChangePin.tsx

@@ -1,5 +1,4 @@
-import { Box, Button, Flex, useColorModeValue } from '@chakra-ui/react'
-import { useToast } from '@chakra-ui/toast'
+import { Box, Button, Flex, useColorModeValue, useToast } from '@chakra-ui/react'
 import { useTranslate } from 'react-polyglot'
 import { CircularProgress } from 'components/CircularProgress/CircularProgress'
 import { AwaitKeepKey } from 'components/Layout/Header/NavBar/KeepKey/AwaitKeepKey'

src/components/Layout/Header/NavBar/KeepKey/ChangeTimeout.tsx

@@ -1,5 +1,4 @@
-import { useColorModeValue } from '@chakra-ui/react'
-import { useToast } from '@chakra-ui/toast'
+import { useColorModeValue, useToast } from '@chakra-ui/react'
 import { useEffect, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { AwaitKeepKey } from 'components/Layout/Header/NavBar/KeepKey/AwaitKeepKey'

src/components/Layout/Header/NavBar/KeepKey/KeepKeyMenu.tsx

@@ -1,6 +1,13 @@
 import { CloseIcon } from '@chakra-ui/icons'
-import { MenuDivider, MenuGroup, MenuItem } from '@chakra-ui/menu'
-import { Box, Collapse, Flex, useDisclosure } from '@chakra-ui/react'
+import {
+  Box,
+  Collapse,
+  Flex,
+  MenuDivider,
+  MenuGroup,
+  MenuItem,
+  useDisclosure,
+} from '@chakra-ui/react'
 import { useEffect } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { ExpandedMenuItem } from 'components/Layout/Header/NavBar/ExpandedMenuItem'

src/components/Layout/Header/NavBar/KeepKey/Modals/Wipe.tsx

@@ -1,14 +1,14 @@
-import { ModalCloseButton } from '@chakra-ui/modal'
 import {
   Button,
   Checkbox,
   Modal,
   ModalBody,
+  ModalCloseButton,
   ModalContent,
   ModalHeader,
   ModalOverlay,
+  useToast,
 } from '@chakra-ui/react'
-import { useToast } from '@chakra-ui/toast'
 import { useRef, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { AwaitKeepKey } from 'components/Layout/Header/NavBar/KeepKey/AwaitKeepKey'

src/components/Layout/Header/NavBar/Native/BackupPassphraseModal/BackupPassphraseInfo.tsx

@@ -1,5 +1,4 @@
 import { ArrowBackIcon } from '@chakra-ui/icons'
-import { ModalCloseButton } from '@chakra-ui/modal'
 import {
   Alert,
   AlertDescription,
@@ -8,6 +7,7 @@ import {
   Code,
   IconButton,
   ModalBody,
+  ModalCloseButton,
   ModalFooter,
   ModalHeader,
   Tag,

src/components/Layout/Header/NavBar/Native/NativeMenu.tsx

@@ -1,6 +1,5 @@
 import { ChevronRightIcon } from '@chakra-ui/icons'
-import { MenuDivider, MenuItem } from '@chakra-ui/menu'
-import { Button } from '@chakra-ui/react'
+import { Button, MenuDivider, MenuItem } from '@chakra-ui/react'
 import { Text } from 'components/Text'
 import { useModal } from 'hooks/useModal/useModal'
 

src/components/Layout/Header/NavBar/SubmenuHeader.tsx

@@ -1,6 +1,5 @@
 import { ArrowBackIcon } from '@chakra-ui/icons'
-import { Center } from '@chakra-ui/layout'
-import { Flex, IconButton, Stack, Text, useColorModeValue } from '@chakra-ui/react'
+import { Center, Flex, IconButton, Stack, Text, useColorModeValue } from '@chakra-ui/react'
 import { upperFirst } from 'lodash'
 import { useMenuRoutes } from 'components/Layout/Header/NavBar/hooks/useMenuRoutes'
 

src/components/Layout/Header/NavBar/UserMenu.tsx

@@ -1,6 +1,16 @@
 import { ChevronDownIcon, WarningTwoIcon } from '@chakra-ui/icons'
-import { Menu, MenuButton, MenuGroup, MenuItem, MenuList } from '@chakra-ui/menu'
-import { Button, ButtonGroup, Flex, HStack, useColorModeValue } from '@chakra-ui/react'
+import {
+  Button,
+  ButtonGroup,
+  Flex,
+  HStack,
+  Menu,
+  MenuButton,
+  MenuGroup,
+  MenuItem,
+  MenuList,
+  useColorModeValue,
+} from '@chakra-ui/react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
 import { FaWallet } from 'react-icons/fa'

src/components/Layout/Header/NavBar/WalletConnectedMenu.tsx

@@ -1,6 +1,5 @@
 import { ChevronRightIcon, CloseIcon, RepeatIcon, WarningTwoIcon } from '@chakra-ui/icons'
-import { MenuDivider, MenuGroup, MenuItem } from '@chakra-ui/menu'
-import { Flex } from '@chakra-ui/react'
+import { Flex, MenuDivider, MenuGroup, MenuItem } from '@chakra-ui/react'
 import { AnimatePresence } from 'framer-motion'
 import { useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'

src/components/Layout/Header/NavBar/hooks/useMenuRoutes.ts

@@ -1,4 +1,4 @@
-import { useToast } from '@chakra-ui/toast'
+import { useToast } from '@chakra-ui/react'
 import { useCallback } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router-dom'

src/components/Layout/Main.tsx

@@ -1,6 +1,5 @@
-import type { ContainerProps } from '@chakra-ui/layout'
-import { Box, Container, HStack, Stack } from '@chakra-ui/layout'
-import { useColorModeValue } from '@chakra-ui/react'
+import type { ContainerProps } from '@chakra-ui/react'
+import { Box, Container, HStack, Stack, useColorModeValue } from '@chakra-ui/react'
 import { useScroll } from 'framer-motion'
 import type { ReactNode } from 'react'
 import { useEffect, useRef, useState } from 'react'

src/components/Modals/FiatRamps/FiatRampsModal.tsx

@@ -1,5 +1,4 @@
-import { Modal, ModalContent, ModalOverlay } from '@chakra-ui/modal'
-import { useMediaQuery } from '@chakra-ui/react'
+import { Modal, ModalContent, ModalOverlay, useMediaQuery } from '@chakra-ui/react'
 import type { AccountId, AssetId } from '@shapeshiftoss/caip'
 import { FiatForm } from 'components/Modals/FiatRamps/views/FiatForm'
 import { useModal } from 'hooks/useModal/useModal'

src/components/NestedMenu/NestedMenu.tsx

@@ -1,6 +1,4 @@
-import { Button } from '@chakra-ui/button'
-import { Box, Container, HStack } from '@chakra-ui/layout'
-import { useColorModeValue } from '@chakra-ui/react'
+import { Box, Button, Container, HStack, useColorModeValue } from '@chakra-ui/react'
 import { useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { generatePath, matchPath, NavLink, useLocation, useParams } from 'react-router-dom'

src/components/Trade/TradeConfirm/TradeConfirm.tsx

@@ -1,6 +1,6 @@
-import { Alert } from '@chakra-ui/alert'
 import { WarningTwoIcon } from '@chakra-ui/icons'
 import {
+  Alert,
   AlertDescription,
   AlertIcon,
   AlertTitle,

src/components/TransactionHistory/TransactionHistoryList.tsx

@@ -1,4 +1,4 @@
-import { Center } from '@chakra-ui/layout'
+import { Center } from '@chakra-ui/react'
 import InfiniteScroll from 'react-infinite-scroller'
 import { Card } from 'components/Card/Card'
 import { CircularProgress } from 'components/CircularProgress/CircularProgress'

src/context/WalletProvider/KeepKey/components/Label.tsx

@@ -1,5 +1,4 @@
-import { Button, Input, ModalBody, ModalHeader } from '@chakra-ui/react'
-import { useToast } from '@chakra-ui/toast'
+import { Button, Input, ModalBody, ModalHeader, useToast } from '@chakra-ui/react'
 import type { ResetDevice } from '@shapeshiftoss/hdwallet-core'
 import { useState } from 'react'
 import { useTranslate } from 'react-polyglot'

src/context/WalletProvider/KeepKey/components/RecoverySentenceEntry.tsx

@@ -1,4 +1,4 @@
-import type { PinInputFieldProps } from '@chakra-ui/pin-input/dist/declarations/src/pin-input'
+import type { PinInputFieldProps } from '@chakra-ui/react'
 import {
   Box,
   Button,

src/context/WalletProvider/KeepKey/components/RecoverySettingUp.tsx

@@ -1,5 +1,4 @@
-import { Flex } from '@chakra-ui/layout'
-import { ModalBody, ModalHeader, Spinner } from '@chakra-ui/react'
+import { Flex, ModalBody, ModalHeader, Spinner } from '@chakra-ui/react'
 import { Text } from 'components/Text'
 
 export const RecoverySettingUp = () => {

src/context/WalletProvider/KeepKey/hooks/useKeepKeyEventHandler.ts

@@ -1,4 +1,4 @@
-import { useToast } from '@chakra-ui/toast'
+import { useToast } from '@chakra-ui/react'
 import type { Event } from '@shapeshiftoss/hdwallet-core'
 import { Events } from '@shapeshiftoss/hdwallet-core'
 import type { Dispatch } from 'react'

src/context/WalletProvider/WalletViewsSwitch.tsx

@@ -6,8 +6,8 @@ import {
   ModalCloseButton,
   ModalContent,
   ModalOverlay,
+  useToast,
 } from '@chakra-ui/react'
-import { useToast } from '@chakra-ui/toast'
 import { AnimatePresence } from 'framer-motion'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'

src/features/defi/components/Approve/Approve.tsx

@@ -1,6 +1,15 @@
-import { Button } from '@chakra-ui/button'
-import { Box, Link, Stack, Text as CText } from '@chakra-ui/layout'
-import { Divider, Icon, Switch, Tooltip, useColorModeValue } from '@chakra-ui/react'
+import {
+  Box,
+  Button,
+  Divider,
+  Icon,
+  Link,
+  Stack,
+  Switch,
+  Text as CText,
+  Tooltip,
+  useColorModeValue,
+} from '@chakra-ui/react'
 import isUndefined from 'lodash/isUndefined'
 import { FaExchangeAlt, FaInfoCircle } from 'react-icons/fa'
 import { useTranslate } from 'react-polyglot'

src/features/defi/components/Confirm/Confirm.tsx

@@ -1,6 +1,5 @@
-import { Button } from '@chakra-ui/button'
-import { Stack } from '@chakra-ui/layout'
 import type { StackProps } from '@chakra-ui/react'
+import { Button, Stack } from '@chakra-ui/react'
 import React from 'react'
 import { useTranslate } from 'react-polyglot'
 import { WalletActions } from 'context/WalletProvider/actions'

src/features/defi/components/DefiModal/DefiModal.tsx

@@ -1,4 +1,4 @@
-import { Modal, ModalContent, ModalOverlay } from '@chakra-ui/modal'
+import { Modal, ModalContent, ModalOverlay } from '@chakra-ui/react'
 import React from 'react'
 import { useBrowserRouter } from 'hooks/useBrowserRouter/useBrowserRouter'
 

src/features/defi/providers/cosmos/components/CosmosManager/LearnMore/CosmosLearnMore.tsx

@@ -1,6 +1,5 @@
 import { ArrowBackIcon } from '@chakra-ui/icons'
-import { Box, Flex } from '@chakra-ui/layout'
-import { Button, IconButton } from '@chakra-ui/react'
+import { Box, Button, Flex, IconButton } from '@chakra-ui/react'
 import { toAssetId } from '@shapeshiftoss/caip'
 import { useSteps } from 'chakra-ui-steps'
 import type {

src/pages/ConnectWallet/ConnectWallet.tsx

@@ -1,6 +1,5 @@
-import { Button } from '@chakra-ui/button'
 import { DarkMode } from '@chakra-ui/color-mode'
-import { Center, Circle, Flex, Link, Stack } from '@chakra-ui/layout'
+import { Button, Center, Circle, Flex, Link, Stack } from '@chakra-ui/react'
 import { useEffect } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { generatePath, matchPath, useHistory } from 'react-router-dom'

src/pages/Flags/Flags.tsx

@@ -1,5 +1,4 @@
-import { Alert } from '@chakra-ui/alert'
-import { AlertIcon, Button, Heading, HStack, Stack, StackDivider } from '@chakra-ui/react'
+import { Alert, AlertIcon, Button, Heading, HStack, Stack, StackDivider } from '@chakra-ui/react'
 import { useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { useHistory } from 'react-router-dom'

src/pages/NotFound/NotFound.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Heading } from '@chakra-ui/layout'
+import { Box, Flex, Heading } from '@chakra-ui/react'
 import { Page } from 'components/Layout/Page'
 import { Text } from 'components/Text/Text'
 

src/pages/SplashScreen/SplashScreen.tsx

@@ -1,5 +1,4 @@
-import { Center } from '@chakra-ui/layout'
-import { Circle, Spinner } from '@chakra-ui/react'
+import { Center, Circle, Spinner } from '@chakra-ui/react'
 import { isFirefox } from 'react-device-detect'
 import Orbs from 'assets/orbs.svg'
 import OrbsStatic from 'assets/orbs-static.png'

src/plugins/cosmos/components/DefiModalHeader/DefiModalHeader.tsx

@@ -1,5 +1,4 @@
-import { Box } from '@chakra-ui/layout'
-import { Image } from '@chakra-ui/react'
+import { Box, Image } from '@chakra-ui/react'
 import { Text } from 'components/Text'
 
 type DefiModalHeaderProps = {

src/plugins/foxPage/components/AssetActions.tsx

@@ -1,10 +1,11 @@
 import { ExternalLinkIcon } from '@chakra-ui/icons'
-import { Box, Stack } from '@chakra-ui/layout'
 import {
+  Box,
   Button,
   Link,
   Skeleton,
   SkeletonText,
+  Stack,
   Tab,
   TabList,
   TabPanel,

src/plugins/foxPage/components/FoxTab.tsx

@@ -1,6 +1,5 @@
-import { Flex } from '@chakra-ui/layout'
 import type { TabProps } from '@chakra-ui/react'
-import { SkeletonText, Tab, useColorModeValue } from '@chakra-ui/react'
+import { Flex, SkeletonText, Tab, useColorModeValue } from '@chakra-ui/react'
 import { Amount } from 'components/Amount/Amount'
 import { AssetIcon } from 'components/AssetIcon'
 import { Card } from 'components/Card/Card'