no default exports for hooks, type designations, clean up imports usi…

…ng root alias (~)

- adding explicit type designations on imports helps optimize bundling (https://stackoverflow.com/questions/61412000/do-i-need-to-use-the-import-type-feature-of-typescript-3-8-if-all-of-my-import)
- all hooks should not use default exports (open to argument for keeping them, but I don't see it currently)

src/components/ApproveToken.tsx

@@ -7,7 +7,7 @@ import { useAccount } from 'wagmi'
 
 import { useTokenContract, useTransactionAdder, useGeb } from '~/hooks'
 import { useStoreActions, useStoreState } from '~/store'
-import { AuctionEventType, IAuctionBidder } from '~/types'
+import type { AuctionEventType, IAuctionBidder } from '~/types'
 import { timeout } from '~/utils'
 import Button from './Button'
 import Loader from './Loader'

src/components/AuctionBlock.tsx

@@ -8,7 +8,7 @@ import { useAccount, useNetwork } from 'wagmi'
 
 import { COIN_TICKER, formatNumber, getEtherscanLink, returnWalletAddress, ChainId, parseRad } from '~/utils'
 import { useStoreActions, useStoreState } from '~/store'
-import { IAuction, IAuctionBidder } from '~/types'
+import type { IAuction, IAuctionBidder } from '~/types'
 import { ExternalLinkArrow } from '~/styles'
 import AlertLabel from './AlertLabel'
 import Button from './Button'

src/components/AuctionsFAQ.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
-import { AuctionEventType } from '~/types'
-import mine from '../assets/mine.svg'
-import bid from '../assets/bid.svg'
-import claim from '../assets/claim.svg'
-import sellHai from '../assets/sell-hai.svg'
+import type { AuctionEventType } from '~/types'
+import mine from '~/assets/mine.svg'
+import bid from '~/assets/bid.svg'
+import claim from '~/assets/claim.svg'
+import sellHai from '~/assets/sell-hai.svg'
 
 interface Props {
     type: AuctionEventType

src/components/AuctionsOperations/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { useRef } from 'react'
 import { CSSTransition, SwitchTransition } from 'react-transition-group'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -12,7 +12,7 @@ import _ from '~/utils/lodash'
 
 const AuctionsOperations = () => {
     const { t } = useTranslation()
-    const nodeRef = React.useRef(null)
+    const nodeRef = useRef(null)
     const { auctionModel: auctionsActions } = useStoreActions((state) => state)
     const {
         auctionModel: auctionsState,

src/components/Brand.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import Logo from '../assets/hai-logo.png'
+import Logo from '~/assets/hai-logo.png'
 
 interface Props {
     height?: number
@@ -28,10 +28,9 @@ const Container = styled.div`
                 height: 50px;
             }
             ${({ theme }) => theme.mediaWidth.upToSmall`
-        width: 50px;
-        height: 50px;
-      }
-      `}
+                width: 50px;
+                height: 50px;
+            `}
         }
     }
 `

src/components/Button.tsx

@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react'
+import React, { type ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 import classNames from 'classnames'
-import darkArrow from '../assets/dark-arrow.svg'
+import darkArrow from '~/assets/dark-arrow.svg'
 import Arrow from './Icons/Arrow'
 import Loader from './Loader'
 

src/components/Confetti/index.tsx

@@ -1,5 +1,5 @@
 import ReactConfetti from 'react-confetti'
-import useWindowSize from '../../hooks/useWindowSize'
+import { useWindowSize } from '~/hooks'
 
 // eslint-disable-next-line react/prop-types
 export default function Confetti({ start, variant }: { start: boolean; variant?: string }) {

src/components/DecimalInput.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useState } from 'react'
+import { type ChangeEvent, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 

src/components/GridContainer.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import { type ReactNode } from 'react'
 import styled from 'styled-components'
 
 interface Props {
-    children: React.ReactNode
+    children: ReactNode
 }
 
 const GridContainer = ({ children }: Props) => {

src/components/ImagePreloader.tsx

@@ -1,19 +1,19 @@
-import brandWhite from '../assets/brand-white.svg'
-import darkArrow from '../assets/dark-arrow.svg'
-import walletConnectIcon from '../assets/connectors/walletConnectIcon.svg'
-import coinbaseWalletIcon from '../assets/connectors/coinbaseWalletIcon.svg'
-import cookie from '../assets/cookie.svg'
-import caret from '../assets/caret.png'
-import caretUp from '../assets/caret-up.svg'
-import arrowUp from '../assets/arrow-up.svg'
-import logoIcon from '../assets/LogoIcon.png'
-import arrow from '../assets/arrow.svg'
-import uniswapIcon from '../assets/uniswap-icon.svg'
-import logo192 from '../assets/logo192.png'
-import metamask from '../assets/connectors/metamask.png'
-import accountImg from '../assets/account-img.png'
-import walletImg from '../assets/wallet-img.png'
-import safeImg from '../assets/safe-img.png'
+import brandWhite from '~/assets/brand-white.svg'
+import darkArrow from '~/assets/dark-arrow.svg'
+import walletConnectIcon from '~/assets/connectors/walletConnectIcon.svg'
+import coinbaseWalletIcon from '~/assets/connectors/coinbaseWalletIcon.svg'
+import cookie from '~/assets/cookie.svg'
+import caret from '~/assets/caret.png'
+import caretUp from '~/assets/caret-up.svg'
+import arrowUp from '~/assets/arrow-up.svg'
+import logoIcon from '~/assets/LogoIcon.png'
+import arrow from '~/assets/arrow.svg'
+import uniswapIcon from '~/assets/uniswap-icon.svg'
+import logo192 from '~/assets/logo192.png'
+import metamask from '~/assets/connectors/metamask.png'
+import accountImg from '~/assets/account-img.png'
+import walletImg from '~/assets/wallet-img.png'
+import safeImg from '~/assets/safe-img.png'
 
 const INITIAL_STATE = [
     brandWhite,

src/components/LinkButton.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { type ReactNode } from 'react'
 import { ArrowRightCircle } from 'react-feather'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'

src/components/Modals/LiquidateSafeModal.tsx

@@ -6,9 +6,9 @@ import styled from 'styled-components'
 import { handleTransactionError, useGeb } from '~/hooks'
 import { liquidateSafe } from '~/services/blockchain'
 import { useStoreActions, useStoreState } from '~/store'
-import AlertLabel from '../AlertLabel'
-import Button from '../Button'
-import CheckBox from '../CheckBox'
+import AlertLabel from '~/components/AlertLabel'
+import Button from '~/components/Button'
+import CheckBox from '~/components/CheckBox'
 import Modal from './Modal'
 
 const LiquidateSafeModal = () => {

src/components/Modals/LoadingModal.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import styled, { keyframes } from 'styled-components'
-import { useStoreState } from '../../store'
+import { useStoreState } from '~/store'
 import Modal from './Modal'
-import logo from '../../assets/logo192.png'
+import logo from '~/assets/logo192.png'
+
 const LoadingModal = () => {
     const { popupsModel: popupsState } = useStoreState((state) => state)
 

src/components/Modals/Modal.tsx

@@ -1,14 +1,14 @@
-import React, { useEffect, useState } from 'react'
+import { type ReactNode, useEffect, useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { CSSTransition } from 'react-transition-group'
 import styled from 'styled-components'
-import { useStoreActions } from '../../store'
-import Button from '../Button'
-import Confetti from '../Confetti'
+import { useStoreActions } from '~/store'
+import Button from '~/components/Button'
+import Confetti from '~/components/Confetti'
 
 interface Props {
     title?: string
-    children: React.ReactNode
+    children: ReactNode
     submitBtnText?: string
     handleSubmit?: () => void
     maxWidth?: string
@@ -42,7 +42,7 @@ const Modal = ({
     backDropColor,
 }: Props) => {
     const { t } = useTranslation()
-    const nodeRef = React.useRef(null)
+    const nodeRef = useRef(null)
     const { settingsModel: settingsActions } = useStoreActions((state) => state)
 
     const [isOpen, setIsOpen] = useState(false)

src/components/Modals/SafeManagerModal.tsx

@@ -1,8 +1,7 @@
-import React from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
-import { useStoreActions, useStoreState } from '../../store'
-import SafeManager from '../SafeManager'
+import { useStoreActions, useStoreState } from '~/store'
+import SafeManager from '~/components/SafeManager'
 import Modal from './Modal'
 
 const SafeManagerModal = () => {

src/components/Modals/ScreenLoader.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
-import { useStoreState, useStoreActions } from '../../store'
+import { useStoreState, useStoreActions } from '~/store'
 import Loader from '../Loader'
 import Modal from './Modal'
 

src/components/Modals/WaitingModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { AlertTriangle, CheckCircle } from 'react-feather'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'

src/components/NavLinks.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
-import { useHistory } from 'react-router-dom'
-import { NavLink } from 'react-router-dom'
+import { useHistory, NavLink } from 'react-router-dom'
 
-import { useStoreActions } from '../store'
+import { useStoreActions } from '~/store'
 import SafeIcon from './Icons/SafeIcon'
 
 const NavLinks = () => {

src/components/NotificationPopup.tsx

@@ -2,8 +2,8 @@ import { useEffect, useRef, useState } from 'react'
 import Scrollbars from 'react-custom-scrollbars'
 import styled from 'styled-components'
 import BellIcon from './Icons/BellIcon'
-import caretUp from '../assets/caret-up.svg'
-import arrowUp from '../assets/arrow-up.svg'
+import caretUp from '~/assets/caret-up.svg'
+import arrowUp from '~/assets/arrow-up.svg'
 
 const NotificationPopup = () => {
     const wrapperRef = useRef(null)

src/components/Pagination.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
 import ReactPaginate from 'react-paginate'
 import styled from 'styled-components'
 
-import { IPaging } from '../utils/interfaces'
+import { type IPaging } from '~/utils'
 
 interface Props {
     items: Array<any>

src/components/SafeManager.tsx

@@ -6,7 +6,7 @@ import { useAccount } from 'wagmi'
 
 import { useStoreActions, useStoreState } from '~/store'
 import { fetchUserSafesRaw } from '~/services/safes'
-import { timeout, IUserSafeList, isAddress } from '~/utils'
+import { timeout, type IUserSafeList, isAddress } from '~/utils'
 import { useGeb } from '~/hooks'
 import Button from './Button'
 

src/components/SideMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { CSSTransition } from 'react-transition-group'
 import styled from 'styled-components'
 
@@ -7,7 +7,7 @@ import { ConnectButton } from '@rainbow-me/rainbowkit'
 import NavLinks from './NavLinks'
 
 const SideMenu = () => {
-    const nodeRef = React.useRef(null)
+    const nodeRef = useRef(null)
 
     const [isOpen, setIsOpen] = useState(false)
     const { popupsModel: popupsActions } = useStoreActions((state) => state)

src/components/TokenInput.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from 'react'
+import { type ChangeEvent, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Loader } from 'react-feather'
 import styled from 'styled-components'

src/components/TransactionOverview.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 import ReflexerIcon from './Icons/ReflexerIcon'
-import arrow from '../assets/arrow.svg'
-import uniswapIcon from '../assets/uniswap-icon.svg'
+import arrow from '~/assets/arrow.svg'
+import uniswapIcon from '~/assets/uniswap-icon.svg'
 interface Props {
     title: string
     description: string

src/containers/Analytics/DataCard.tsx

@@ -1,3 +1,4 @@
+import { type ReactChild, type ReactChildren } from 'react'
 import { Info } from 'react-feather'
 import styled from 'styled-components'
 
@@ -8,7 +9,7 @@ export interface DataCardProps {
     title: string
     value: string
     description?: string
-    children?: React.ReactChildren | React.ReactChild
+    children?: ReactChildren | ReactChild
 }
 
 const DataCard = ({ title, image, value, description, children }: DataCardProps) => {

src/containers/Analytics/index.tsx

@@ -3,8 +3,8 @@ import ReactTooltip from 'react-tooltip'
 import styled from 'styled-components'
 import { useNetwork } from 'wagmi'
 
-import DataCard, { DataCardProps } from './DataCard'
-import { DataTable, TableProps } from './DataTable'
+import DataCard, { type DataCardProps } from './DataCard'
+import { DataTable, type TableProps } from './DataTable'
 import { ContractsTable } from './ContractsTable'
 import { AddressLink } from '~/components/AddressLink'
 import { fetchAnalyticsData } from '@hai-on-op/sdk'

src/containers/Auctions/AuctionsList.tsx

@@ -8,10 +8,10 @@ import { useAuctions } from '~/hooks'
 import { useStoreActions, useStoreState } from '~/store'
 import AuctionBlock from '~/components/AuctionBlock'
 import Pagination from '~/components/Pagination'
-import { SideLabel } from '../Safes/CreateSafe'
-import { IPaging, TOKEN_LOGOS } from '~/utils'
+import { SideLabel } from '~/containers/Safes/CreateSafe'
+import { type IPaging, TOKEN_LOGOS } from '~/utils'
 import Dropdown from '~/components/Dropdown'
-import { AuctionEventType } from '~/types'
+import { type AuctionEventType } from '~/types'
 import Button from '~/components/Button'
 import Loader from '~/components/Loader'
 

src/containers/Auctions/CollateralAuctions/CollateralAuctionBlock.tsx

@@ -7,7 +7,7 @@ import { useAccount } from 'wagmi'
 
 import BidLine from '~/components/BidLine'
 import { useStoreActions, useStoreState } from '~/store'
-import { ICollateralAuction } from '~/types'
+import type { ICollateralAuction } from '~/types'
 import { COIN_TICKER, formatNumber, parseWad } from '~/utils'
 import AlertLabel from '~/components/AlertLabel'
 import Button from '~/components/Button'

src/containers/Auctions/CollateralAuctions/CollateralAuctionsList.tsx

@@ -7,7 +7,7 @@ import Loader from '~/components/Loader'
 import Pagination from '~/components/Pagination'
 import { SideLabel } from '~/containers/Safes/CreateSafe'
 import { useCollateralAuctions, usePublicGeb } from '~/hooks'
-import { IPaging, TOKEN_LOGOS } from '~/utils'
+import { type IPaging, TOKEN_LOGOS } from '~/utils'
 import CollateralAuctionBlock from './CollateralAuctionBlock'
 
 export type Item = {

src/containers/Auctions/index.tsx

@@ -6,7 +6,7 @@ import { handleTransactionError, useStartAuction, useQuery, useGetAuctions, useP
 import AuctionsFAQ from '~/components/AuctionsFAQ'
 import AlertLabel from '~/components/AlertLabel'
 import Modal from '~/components/Modals/Modal'
-import { AuctionEventType } from '~/types'
+import type { AuctionEventType } from '~/types'
 import { useStoreActions, useStoreState } from '~/store'
 import AuctionsList from './AuctionsList'
 import Button from '~/components/Button'

src/containers/Safes/Accounts.tsx

@@ -1,14 +1,14 @@
 import styled from 'styled-components'
 import Lottie from 'react-lottie-player'
 import { isMobile } from 'react-device-detect'
-import Steps from '../../components/Steps'
-import { useStoreState } from '../../store'
-import LottieWallet from '../../utils/Lotties/wallet.json'
-import LottieRegister from '../../utils/Lotties/register.json'
-import LottieSafe from '../../utils/Lotties/vault.json'
-import accountImg from '../../assets/account-img.png'
-import walletImg from '../../assets/wallet-img.png'
-import safeImg from '../../assets/safe-img.png'
+import Steps from '~/components/Steps'
+import { useStoreState } from '~/store'
+import LottieWallet from '~/utils/Lotties/wallet.json'
+import LottieRegister from '~/utils/Lotties/register.json'
+import LottieSafe from '~/utils/Lotties/vault.json'
+import accountImg from '~/assets/account-img.png'
+import walletImg from '~/assets/wallet-img.png'
+import safeImg from '~/assets/safe-img.png'
 
 const Accounts = () => {
     const { connectWalletModel: connectWalletState } = useStoreState((state) => state)