code cleanup

app/page.tsx

@@ -2,34 +2,25 @@
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { WagmiProvider, http } from 'wagmi'
-// import { publicProvider } from 'wagmi/providers/public'
 import { defineChain } from 'viem'
-import { polygonAmoy } from 'viem/chains'
-// import { alchemyProvider } from 'wagmi/providers/alchemy'
-import {
-    Locale,
-    RainbowKitProvider,
-    connectorsForWallets,
-    getDefaultConfig,
-    getDefaultWallets,
-} from '@rainbow-me/rainbowkit'
-
+import { RainbowKitProvider, getDefaultConfig } from '@rainbow-me/rainbowkit'
 import { metaMaskWallet, injectedWallet } from '@rainbow-me/rainbowkit/wallets'
 import '@rainbow-me/rainbowkit/styles.css'
+
 // Contexts
-import { UserProvider } from '@/context/UserContext'
-import { ContractProvider } from '@/context/ContractContext'
+import { UserProvider, ContractProvider } from '@/context'
 
 // Hooks
-import useIsMounted from '@/hooks/useIsMounted'
+import { useIsMounted } from '@/hooks'
 
 // Components
-import Nav from '@/components/common/Nav'
-import SectionHero from '@/components/sections/SectionHero'
-import SectionMint from '@/components/sections/SectionMint'
-import SectionRoadmap from '@/components/sections/SectionRoadmap/SectionRoadmap'
-import Footer from '@/components/common/Footer/Footer'
-import { useRouter } from 'next/navigation'
+import {
+    Nav,
+    SectionHero,
+    SectionMint,
+    SectionRoadmap,
+    Footer,
+} from '@/components'
 
 const RPC_PUBLIC = process.env.NEXT_PUBLIC_RPC_PUBLIC as string
 const CHAIN_ID = process.env.NEXT_PUBLIC_CHAIN_ID as string
@@ -75,14 +66,6 @@ const preferredChain = defineChain({
     testnet: true,
 })
 
-// const { chains, publicClient, webSocketPublicClient } = configureChains(
-//     [preferredChain],
-//     [
-//         publicProvider(),
-//         alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_ALCHEMY || '' }),
-//     ]
-// )
-
 const config = getDefaultConfig({
     appName: 'SittingCatsNFT',
     projectId: WALLET_CONNECT_PROJECT_ID,
@@ -101,26 +84,6 @@ const config = getDefaultConfig({
     ssr: true,
 })
 
-// const connectors = connectorsForWallets(
-//     [
-//         {
-//             groupName: 'Recommended',
-//             wallets: [injectedWallet, metaMaskWallet],
-//         },
-//     ],
-//     {
-//         appName: 'My RainbowKit App',
-//         projectId: 'YOUR_PROJECT_ID',
-//     }
-// )
-
-// const config = createConfig({
-//     autoConnect: true,
-//     publicClient,
-//     webSocketPublicClient,
-//     connectors,
-// })
-
 const queryClient = new QueryClient()
 
 export default function Home() {
@@ -129,10 +92,7 @@ export default function Home() {
     return (
         <WagmiProvider config={config}>
             <QueryClientProvider client={queryClient}>
-                <RainbowKitProvider
-                    modalSize="compact"
-                    // chains={chains}
-                >
+                <RainbowKitProvider modalSize="compact">
                     <ContractProvider>
                         <UserProvider>
                             <main className="max-w-full overflow-x-hidden">

components/NFTGallery/Modal/Modal.tsx

@@ -1,13 +1,11 @@
-import { Dispatch, SetStateAction } from 'react'
+import type { Dispatch, SetStateAction } from 'react'
 import { useAccount, useDisconnect } from 'wagmi'
 
 // Hooks
-import useIsWrongNetwork from '@/hooks/useIsWrongNetwork'
+import { useIsWrongNetwork } from '@/hooks'
 
 // Components
-import Button from '@/components/common/Button'
-import Modal from '@/components/common/Modal'
-import NFTGalery from '../NFTGallery'
+import { Button, Modal, NFTGallery } from '@/components'
 
 interface IProps {
     isOpen: boolean
@@ -22,7 +20,7 @@ const NFTGalleryModal = ({ isOpen, setIsOpen }: IProps) => {
     if (isOpen && isConnected && !isWrongNetwork) {
         return (
             <Modal setIsOpen={setIsOpen}>
-                <NFTGalery setIsOpen={setIsOpen} />
+                <NFTGallery setIsOpen={setIsOpen} />
                 <div className="flex justify-end bg-white p-6">
                     <Button
                         onClick={() => {

components/NFTGallery/NFTGallery.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react'
 import Image from 'next/image'
 import { useQuery } from '@tanstack/react-query'
 import { useAccount } from 'wagmi'
@@ -11,12 +11,10 @@ import { getIdFromHash, ipfsToHttps } from '@/utils'
 import { getNFTs } from '@/requests'
 
 // Components
-import NftCard from '@/components/NftCard/NftCard'
-import Button from '@/components/common/Button'
-import LoaderSquare from '@/components/common/LoaderSquare'
+import { Button, LoaderSquare, NftCard } from '@/components'
 
 // Types
-import { INFT } from '@/types/getNftsAPI'
+import { INFT } from '@/types'
 
 interface IProps {
     setIsOpen: Dispatch<SetStateAction<boolean>> | (() => void)

components/NftCard/NftCard.tsx

@@ -1,13 +1,12 @@
 import { useEffect, useState } from 'react'
 import Image from 'next/image'
-import { fromHex, isHex } from 'viem'
 import clsx from 'clsx'
 
 // Utilities
 import { getIdFromHash, ipfsToHttps } from '@/utils'
 
 // Types
-import { INFT, INFTDataWithId } from '@/types/getNftsAPI'
+import { INFT, INFTDataWithId } from '@/types'
 
 interface IProps {
     data: Partial<INFT> | null | undefined
@@ -61,7 +60,7 @@ const NftCard = ({ data }: IProps) => {
                     <div className="absolute inset-0 flex flex-col overflow-hidden rounded-md bg-linen shadow-md [backface-visibility:hidden]">
                         <div className="flex items-center justify-between bg-wenge bg-[url('/paws-pattern-brown.png')] bg-[size:180px] bg-right-top bg-repeat px-2 py-1.5">
                             <Image
-                                className="w-[3.75rem] h-auto"
+                                className="h-auto w-[3.75rem]"
                                 width={60}
                                 height={40}
                                 src="/logo.png"
@@ -117,7 +116,10 @@ const NftCard = ({ data }: IProps) => {
                                             currentData?.metadata?.image || ''
                                         )}
                                         alt={`${currentData?.metadata?.name} NFT cat`}
-                                        style={{ width: '5.9rem', height: 'auto' }}
+                                        style={{
+                                            width: '5.9rem',
+                                            height: 'auto',
+                                        }}
                                     />
                                 ) : null}
                             </figure>

components/common/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, ReactNode } from 'react'
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
 import clsx from 'clsx'
 
 // TS

components/common/Footer/Footer.tsx

@@ -4,11 +4,10 @@ import Image from 'next/image'
 import arrowExternalIcon from '@/assets/arrow-external.svg'
 
 // Hooks
-import useIsMounted from '@/hooks/useIsMounted'
-import useIsWrongNetwork from '@/hooks/useIsWrongNetwork'
+import { useIsMounted, useIsWrongNetwork } from '@/hooks'
 
 // Data
-import { contractInfoLabelsData } from './data'
+import { contractInfoLabelsData } from '@/components'
 
 const Footer = () => {
     const isMounted = useIsMounted()

components/common/LoaderSquare/LoaderSquare.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from 'react'
+import { type SVGProps } from 'react'
 
 const LoaderSquare = (props: SVGProps<SVGSVGElement>) => (
     <svg

components/common/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, ReactNode, SetStateAction } from 'react'
+import { type Dispatch, type ReactNode, type SetStateAction } from 'react'
 import * as Dialog from '@radix-ui/react-dialog'
 
 interface IProps {

components/common/Nav/Nav.tsx

@@ -3,7 +3,7 @@ import { useAccount } from 'wagmi'
 import clsx from 'clsx'
 
 // Hooks
-import useScrollIndicator from '@/hooks/useScrollIndindicator'
+import useScrollIndicator from '@/hooks/useScrollIndicator'
 import useIsMounted from '@/hooks/useIsMounted'
 
 // Components

components/common/Title/Title.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 interface IProps {
     title: string

components/index.ts

@@ -0,0 +1,27 @@
+export { default as Button } from '@/components/common/Button/Button'
+export { contractInfoLabelsData } from '@/components/common/Footer/data'
+export { default as Footer } from '@/components/common/Footer/Footer'
+export { default as LoaderDots } from '@/components/common/LoaderDots/LoaderDots'
+export { default as LoaderSquare } from '@/components/common/LoaderSquare/LoaderSquare'
+export { default as Modal } from '@/components/common/Modal/Modal'
+export { default as Nav } from '@/components/common/Nav/Nav'
+export { default as Title } from '@/components/common/Title/Title'
+export { default as NftCard } from '@/components/NftCard/NftCard'
+export { default as NFTGalleryModal } from '@/components/NFTGallery/Modal/Modal'
+export { default as NFTGallery } from '@/components/NFTGallery/NFTGallery'
+export { default as SectionHero } from '@/components/sections/SectionHero/SectionHero'
+export { default as ClaimedNFT } from '@/components/sections/SectionMint/ClaimedNFT/ClaimedNFT'
+export { default as Faucet } from '@/components/sections/SectionMint/Faucet/Faucet'
+export { default as InfoMessage } from '@/components/sections/SectionMint/InfoMessage/InfoMessage'
+export { default as InfoMessageWrapper } from '@/components/sections/SectionMint/InfoMessageWrapper/InfoMessageWrapper'
+export { default as InputNft } from '@/components/sections/SectionMint/InputNft/InputNft'
+export { default as NotConnectedNotice } from '@/components/sections/SectionMint/NotConnectedNotice/NotConnectedNotice'
+export { default as SectionMint } from '@/components/sections/SectionMint/SectionMint'
+export { default as SectionMintBottom } from '@/components/sections/SectionMint/SectionMintBottom/SectionMintBottom'
+export { default as StatusMessage } from '@/components/sections/SectionMint/StatusMessage/StatusMessage'
+export { default as WrongNetworkNotice } from '@/components/sections/SectionMint/WrongNetworkNotice/WrongNetworkNotice'
+export { roadmapPhasesConfig } from '@/components/sections/SectionRoadmap/data'
+export { default as SectionRoadmap } from '@/components/sections/SectionRoadmap/SectionRoadmap'
+export { default as AngledContentStripe } from '@/components/shared/AngledContentStripe/AngledContentStripe'
+export { default as ButtonAccount } from '@/components/shared/ButtonAccount/ButtonAccount'
+export { default as ButtonConnect } from '@/components/shared/ButtonConnect/ButtonConnect'

components/sections/SectionHero/SectionHero.tsx

@@ -1,8 +1,11 @@
 import Image from 'next/image'
-import React from 'react'
-import AngledContentStripe from '../../shared/AngledContentStripe/AngledContentStripe'
+
+// Assets
 import arrowExternalIcon from '@/assets/arrow-external.svg'
 
+// Components
+import { AngledContentStripe } from '@/components'
+
 const SectionHero = () => {
     return (
         <div className="z-1 relative m-auto">

components/sections/SectionMint/ClaimedNFT/ClaimedNFT.tsx

@@ -1,11 +1,10 @@
 import { Dispatch, SetStateAction } from 'react'
 
 // Components
-import NftCard from '@/components/NftCard'
-import Button from '@/components/common/Button'
+import { Button, NftCard } from '@/components'
 
 // Types
-import { INFT } from '@/types/getNftsAPI'
+import { INFT } from '@/types'
 
 interface IProps {
     setShowModal: Dispatch<SetStateAction<boolean>> | (() => void)

components/sections/SectionMint/Faucet/Faucet.tsx

@@ -7,14 +7,13 @@ import arrowExternalIcon from '@/assets/arrow-external.svg'
 import { limitDecimals } from '@/utils'
 
 // Contexts
-import { useUserContext } from '@/context/UserContext'
+import { useUserContext } from '@/context'
 
 // Hooks
-import useIsWrongNetwork from '@/hooks/useIsWrongNetwork'
+import { useIsWrongNetwork } from '@/hooks'
 
 // Components
-import Button from '@/components/common/Button/Button'
-import LoaderDots from '@/components/common/LoaderDots/LoaderDots'
+import { Button, LoaderDots } from '@/components'
 
 const faucets = process.env.NEXT_PUBLIC_FAUCET?.split(',')
 

components/sections/SectionMint/InfoMessage/InfoMessage.tsx

@@ -1,8 +1,8 @@
 // Components
-import LoaderDots from '@/components/common/LoaderDots/LoaderDots'
+import { LoaderDots } from '@/components'
 
 // Types
-import { IMintedMetadata } from '@/types/getNftsAPI'
+import { IMintedMetadata } from '@/types'
 
 interface IProps {
     isUserPhaseNftBalanceFetching: boolean

components/sections/SectionMint/InfoMessageWrapper/InfoMessageWrapper.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { type ReactNode } from 'react'
 import clsx from 'clsx'
 
 interface IProps {

components/sections/SectionMint/InputNft/InputNft.tsx

@@ -1,10 +1,7 @@
-import { Dispatch, SetStateAction } from 'react'
-
-// Contexts
-import { useContractContext } from '@/context/ContractContext'
+import type { Dispatch, SetStateAction } from 'react'
 
 // Components
-import Button from '@/components/common/Button'
+import { Button } from '@/components'
 
 interface IProps {
     value: string
@@ -19,8 +16,6 @@ const InputNft = ({
     mintableQuantity,
     isDisabled,
 }: IProps) => {
-    const { limitPerWallet } = useContractContext()
-
     return (
         <div className="mx-auto mb-4 flex max-w-[16rem] border-2 border-x-wenge bg-white p-2">
             <Button