Minor updates to code style

src/SkBottomNavigation.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 
 import Box from '@mui/material/Box'
@@ -9,7 +9,7 @@ import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined'
 import AccountBalanceWalletOutlinedIcon from '@mui/icons-material/AccountBalanceWalletOutlined'
 
 export default function SkBottomNavigation() {
-  const [value, setValue] = React.useState(0)
+  const [value, setValue] = useState(0)
   const navigate = useNavigate()
   const location = useLocation()
 

src/components/ChainCard.tsx

@@ -37,8 +37,6 @@ import ChainLogo from './ChainLogo'
 import { MAINNET_CHAIN_LOGOS } from '../core/constants'
 
 export default function ChainCard(props: { skaleNetwork: interfaces.SkaleNetwork; schain: any[] }) {
-  // const explorerUrl = getExplorerUrl(BASE_EXPLORER_URLS[props.skaleNetwork], props.schain[0])
-
   function getChainShortAlias(meta: interfaces.ChainsMetadataMap, name: string): string {
     return meta[name] && meta[name].shortAlias !== undefined ? meta[name].shortAlias! : name
   }

src/components/HelpZen.tsx

@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom'
 
-import React, { useEffect, useState, MouseEvent } from 'react'
+import { useEffect, useState, MouseEvent } from 'react'
 import Box from '@mui/material/Box'
 import Tooltip from '@mui/material/Tooltip'
 import IconButton from '@mui/material/IconButton'
@@ -13,7 +13,7 @@ import { cls, styles, cmn } from '@skalenetwork/metaport'
 
 export default function HelpZen() {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-  const [openZen, setOpenZen] = React.useState<boolean>(false)
+  const [openZen, setOpenZen] = useState<boolean>(false)
 
   const open = Boolean(anchorEl)
 
@@ -39,7 +39,7 @@ export default function HelpZen() {
   }, [])
 
   return (
-    <React.Fragment>
+    <div>
       <Box
         className={cmn.mleft5}
         sx={{ display: 'flex', alignItems: 'center', textAlign: 'center' }}
@@ -106,6 +106,6 @@ export default function HelpZen() {
           </MenuItem>
         </Link>
       </Menu>
-    </React.Fragment>
+    </div>
   )
 }

src/components/MonthSelector.tsx

@@ -29,7 +29,7 @@ import { cmn, cls } from '@skalenetwork/metaport'
 
 import { formatTimePeriod } from '../core/timeHelper'
 
-const _MONTH_RECOMMENDATIONS = [1, 2, 3, 6, 12, 18, 24]
+const MONTH_RECOMMENDATIONS = [1, 2, 3, 6, 12, 18, 24]
 
 export default function MonthSelector(props: {
   max: number
@@ -38,7 +38,7 @@ export default function MonthSelector(props: {
   setErrorMsg: (errorMsg: string | undefined) => void
   className?: string
 }) {
-  const [monthRecommendations, setMonthRecommendations] = useState<number[]>(_MONTH_RECOMMENDATIONS)
+  const [monthRecommendations, setMonthRecommendations] = useState<number[]>(MONTH_RECOMMENDATIONS)
   const [openCustom, setOpenCustom] = useState<boolean>(false)
   const [customPeriod, setCustomPeriod] = useState<number | undefined>()
   const [textPeriod, setTextPeriod] = useState<string | undefined>()

src/components/TermsModal.tsx

@@ -21,7 +21,7 @@
  * @copyright SKALE Labs 2022-Present
  */
 
-import React, { type Dispatch, type SetStateAction } from 'react'
+import { useState, type Dispatch, type SetStateAction } from 'react'
 
 import Container from '@mui/material/Container'
 import Button from '@mui/material/Button'
@@ -42,7 +42,7 @@ export default function TermsModal(props: {
   termsAccepted: boolean
   setTermsAccepted: Dispatch<SetStateAction<boolean>>
 }) {
-  const [scrolled, setScrolled] = React.useState<boolean>(false)
+  const [scrolled, setScrolled] = useState<boolean>(false)
 
   const portalUrl = PORTAL_URLS[props.mpc.config.skaleNetwork] ?? PORTAL_URLS.mainnet
 

src/components/Toggle.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react'
+import { useState } from 'react'
 import ToggleButton from '@mui/material/ToggleButton'
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
 
 export default function ToggleButtons() {
-  const [alignment, setAlignment] = React.useState<string | null>('left')
+  const [alignment, setAlignment] = useState<string | null>('left')
 
   const handleAlignment = (_: React.MouseEvent<HTMLElement>, newAlignment: string | null) => {
     setAlignment(newAlignment)