From 55da8b1121c02c80903958f8317046c0f03bef0a Mon Sep 17 00:00:00 2001
From: danilo-89 <danilo89abcd@gmail.com>
Date: Sat, 20 Apr 2024 14:29:27 +0200
Subject: [PATCH] code cleanup

---
 app/page.tsx                                  | 64 ++++---------------
 components/NFTGallery/Modal/Modal.tsx         | 10 ++-
 components/NFTGallery/NFTGallery.tsx          |  8 +--
 components/NftCard/NftCard.tsx                | 10 +--
 components/common/Button/Button.tsx           |  2 +-
 components/common/Footer/Footer.tsx           |  5 +-
 .../common/LoaderSquare/LoaderSquare.tsx      |  2 +-
 components/common/Modal/Modal.tsx             |  2 +-
 components/common/Nav/Nav.tsx                 |  2 +-
 components/common/Title/Title.tsx             |  2 +-
 components/index.ts                           | 27 ++++++++
 .../sections/SectionHero/SectionHero.tsx      |  7 +-
 .../SectionMint/ClaimedNFT/ClaimedNFT.tsx     |  5 +-
 .../sections/SectionMint/Faucet/Faucet.tsx    |  7 +-
 .../SectionMint/InfoMessage/InfoMessage.tsx   |  4 +-
 .../InfoMessageWrapper/InfoMessageWrapper.tsx |  2 +-
 .../SectionMint/InputNft/InputNft.tsx         |  9 +--
 .../sections/SectionMint/SectionMint.tsx      | 42 ++++++------
 .../SectionMintBottom/SectionMintBottom.tsx   |  2 +-
 .../StatusMessage/StatusMessage.tsx           |  2 +-
 .../WrongNetworkNotice/WrongNetworkNotice.tsx | 17 +++--
 .../SectionRoadmap/SectionRoadmap.tsx         |  4 +-
 .../AngledContentStripe.tsx                   |  2 +-
 .../shared/ButtonAccount/ButtonAccount.tsx    | 13 ++--
 .../shared/ButtonConnect/ButtonConnect.tsx    |  4 +-
 context/ContractContext.tsx                   |  4 +-
 context/UserContext.tsx                       |  6 +-
 context/index.ts                              |  2 +
 contract/index.ts                             |  2 +
 hooks/index.ts                                |  4 ++
 hooks/useIsWrongNetwork.tsx                   |  4 +-
 hooks/useMint.tsx                             | 12 ++--
 ...ndindicator.tsx => useScrollIndicator.tsx} |  0
 requests/index.ts                             |  2 +-
 stories/Button.stories.tsx                    |  2 +-
 stories/InfoMessageWrapper.stories.tsx        |  2 +-
 stories/LoaderDots.stories.tsx                |  2 +-
 stories/LoaderSquare.stories.tsx              |  2 +-
 stories/NFTCard.stories.tsx                   |  3 +-
 stories/Title.stories.tsx                     |  2 +-
 types/index.ts                                |  7 ++
 utils/errorHandling.ts                        |  1 +
 42 files changed, 156 insertions(+), 155 deletions(-)
 create mode 100644 components/index.ts
 create mode 100644 context/index.ts
 create mode 100644 contract/index.ts
 create mode 100644 hooks/index.ts
 rename hooks/{useScrollIndindicator.tsx => useScrollIndicator.tsx} (100%)
 create mode 100644 types/index.ts

diff --git a/app/page.tsx b/app/page.tsx
index 12a47b7..38ae74b 100644
--- a/app/page.tsx
+++ b/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">
diff --git a/components/NFTGallery/Modal/Modal.tsx b/components/NFTGallery/Modal/Modal.tsx
index 0239def..cebe829 100644
--- a/components/NFTGallery/Modal/Modal.tsx
+++ b/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={() => {
diff --git a/components/NFTGallery/NFTGallery.tsx b/components/NFTGallery/NFTGallery.tsx
index 26d0fb7..57e3df7 100644
--- a/components/NFTGallery/NFTGallery.tsx
+++ b/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)
diff --git a/components/NftCard/NftCard.tsx b/components/NftCard/NftCard.tsx
index 86169d0..4db94af 100644
--- a/components/NftCard/NftCard.tsx
+++ b/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>
diff --git a/components/common/Button/Button.tsx b/components/common/Button/Button.tsx
index 887e463..d4592ec 100644
--- a/components/common/Button/Button.tsx
+++ b/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
diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx
index ef54893..07a6091 100644
--- a/components/common/Footer/Footer.tsx
+++ b/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()
diff --git a/components/common/LoaderSquare/LoaderSquare.tsx b/components/common/LoaderSquare/LoaderSquare.tsx
index 772471a..063a99a 100644
--- a/components/common/LoaderSquare/LoaderSquare.tsx
+++ b/components/common/LoaderSquare/LoaderSquare.tsx
@@ -1,4 +1,4 @@
-import { SVGProps } from 'react'
+import { type SVGProps } from 'react'
 
 const LoaderSquare = (props: SVGProps<SVGSVGElement>) => (
     <svg
diff --git a/components/common/Modal/Modal.tsx b/components/common/Modal/Modal.tsx
index d0cfd31..5d03705 100644
--- a/components/common/Modal/Modal.tsx
+++ b/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 {
diff --git a/components/common/Nav/Nav.tsx b/components/common/Nav/Nav.tsx
index 6c8040f..4410169 100644
--- a/components/common/Nav/Nav.tsx
+++ b/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
diff --git a/components/common/Title/Title.tsx b/components/common/Title/Title.tsx
index c59120a..8d70bfd 100644
--- a/components/common/Title/Title.tsx
+++ b/components/common/Title/Title.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 interface IProps {
     title: string
diff --git a/components/index.ts b/components/index.ts
new file mode 100644
index 0000000..75c1f7c
--- /dev/null
+++ b/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'
diff --git a/components/sections/SectionHero/SectionHero.tsx b/components/sections/SectionHero/SectionHero.tsx
index 72364b5..ad62391 100644
--- a/components/sections/SectionHero/SectionHero.tsx
+++ b/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">
diff --git a/components/sections/SectionMint/ClaimedNFT/ClaimedNFT.tsx b/components/sections/SectionMint/ClaimedNFT/ClaimedNFT.tsx
index 48537aa..94c3766 100644
--- a/components/sections/SectionMint/ClaimedNFT/ClaimedNFT.tsx
+++ b/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)
diff --git a/components/sections/SectionMint/Faucet/Faucet.tsx b/components/sections/SectionMint/Faucet/Faucet.tsx
index b5d3a7e..a2a0992 100644
--- a/components/sections/SectionMint/Faucet/Faucet.tsx
+++ b/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(',')
 
diff --git a/components/sections/SectionMint/InfoMessage/InfoMessage.tsx b/components/sections/SectionMint/InfoMessage/InfoMessage.tsx
index 4df6365..2d89867 100644
--- a/components/sections/SectionMint/InfoMessage/InfoMessage.tsx
+++ b/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
diff --git a/components/sections/SectionMint/InfoMessageWrapper/InfoMessageWrapper.tsx b/components/sections/SectionMint/InfoMessageWrapper/InfoMessageWrapper.tsx
index 20fbb63..725c321 100644
--- a/components/sections/SectionMint/InfoMessageWrapper/InfoMessageWrapper.tsx
+++ b/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 {
diff --git a/components/sections/SectionMint/InputNft/InputNft.tsx b/components/sections/SectionMint/InputNft/InputNft.tsx
index bb1977c..dc4b3d2 100644
--- a/components/sections/SectionMint/InputNft/InputNft.tsx
+++ b/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
diff --git a/components/sections/SectionMint/SectionMint.tsx b/components/sections/SectionMint/SectionMint.tsx
index 1162f95..153c8cf 100644
--- a/components/sections/SectionMint/SectionMint.tsx
+++ b/components/sections/SectionMint/SectionMint.tsx
@@ -12,31 +12,31 @@ import { ipfsToHttps } from '@/utils'
 import { getNFTMetadata } from '@/requests'
 
 // Contexts
-import { useContractContext } from '@/context/ContractContext'
-import { useUserContext } from '@/context/UserContext'
+import { useContractContext, useUserContext } from '@/context'
 
 // Hooks
-import useIsWrongNetwork from '@/hooks/useIsWrongNetwork'
-import useMint from '@/hooks/useMint'
+import { useIsWrongNetwork, useMint } from '@/hooks'
 
 // Components
-import Button from '@/components/common/Button/Button'
-import Faucet from '@/components/sections/SectionMint/Faucet/Faucet'
-import InputNft from '@/components/sections/SectionMint/InputNft'
-import LoaderDots from '@/components/common/LoaderDots/LoaderDots'
-import Modal from '@/components/common/Modal/Modal'
-import NFTGalleryModal from '@/components/NFTGallery/Modal'
-import Title from '@/components/common/Title/Title'
-import ClaimedNFT from './ClaimedNFT'
-import InfoMessage from './InfoMessage'
-import InfoMessageWrapper from './InfoMessageWrapper'
-import NotConnectedNotice from './NotConnectedNotice'
-import SectionMintBottom from './SectionMintBottom/SectionMintBottom'
-import StatusMessage from './StatusMessage'
-import WrongNetworkNotice from './WrongNetworkNotice'
+import {
+    Button,
+    ClaimedNFT,
+    Faucet,
+    InfoMessage,
+    InfoMessageWrapper,
+    InputNft,
+    LoaderDots,
+    Modal,
+    NFTGalleryModal,
+    NotConnectedNotice,
+    SectionMintBottom,
+    StatusMessage,
+    Title,
+    WrongNetworkNotice,
+} from '@/components'
 
 // Types
-import { GetNfts, IMintedMetadata } from '@/types/getNftsAPI'
+import { GetNfts, IMintedMetadata } from '@/types'
 
 const pricePerNFT = +process.env.NEXT_PUBLIC_NFT_PRICE! as unknown as number
 
@@ -66,7 +66,6 @@ const SectionMint = () => {
     const [showNFTGalleryModal, setShowNFTGalleryModal] = useState(false)
     const [inputValue, setInputValue] = useState('1')
     const [quantity, setQuantity] = useState(inputValue)
-    const [hash, setHash] = useState<`0x${string}` | undefined>(undefined)
     const [mintedNFTId, setMintedNFTId] = useState<number | undefined>(
         undefined
     )
@@ -99,7 +98,6 @@ const SectionMint = () => {
         error: claimedMetadataError,
         isSuccess: isClaimedMetadataSuccess,
         // remove,
-
     } = useQuery({
         enabled: false,
         queryKey: ['nftURILink', mintedNFTId],
@@ -198,7 +196,7 @@ const SectionMint = () => {
         setInputValue('1')
         setMintedNFTId(undefined)
         setMintedMetadata(null)
-       queryClient.removeQueries({queryKey:['nftURILink'], exact:false})
+        queryClient.removeQueries({ queryKey: ['nftURILink'], exact: false })
         dispatch(undefined)
     }, [address, dispatch])
 
diff --git a/components/sections/SectionMint/SectionMintBottom/SectionMintBottom.tsx b/components/sections/SectionMint/SectionMintBottom/SectionMintBottom.tsx
index 8c74b61..eaaa21b 100644
--- a/components/sections/SectionMint/SectionMintBottom/SectionMintBottom.tsx
+++ b/components/sections/SectionMint/SectionMintBottom/SectionMintBottom.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image'
 
 // Components
-import AngledContentStripe from '@/components/shared/AngledContentStripe'
+import { AngledContentStripe } from '@/components'
 
 const SectionMintBottom = () => {
     return (
diff --git a/components/sections/SectionMint/StatusMessage/StatusMessage.tsx b/components/sections/SectionMint/StatusMessage/StatusMessage.tsx
index d75b277..8a7915c 100644
--- a/components/sections/SectionMint/StatusMessage/StatusMessage.tsx
+++ b/components/sections/SectionMint/StatusMessage/StatusMessage.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 
 // Hooks
-import useIsWrongNetwork from '@/hooks/useIsWrongNetwork'
+import { useIsWrongNetwork } from '@/hooks'
 
 interface IProps {
     userPhaseNftBalance: number | undefined
diff --git a/components/sections/SectionMint/WrongNetworkNotice/WrongNetworkNotice.tsx b/components/sections/SectionMint/WrongNetworkNotice/WrongNetworkNotice.tsx
index afb0646..fc6b264 100644
--- a/components/sections/SectionMint/WrongNetworkNotice/WrongNetworkNotice.tsx
+++ b/components/sections/SectionMint/WrongNetworkNotice/WrongNetworkNotice.tsx
@@ -1,10 +1,13 @@
-import Button from '@/components/common/Button'
-import useIsWrongNetwork from '@/hooks/useIsWrongNetwork'
 import { useSwitchChain } from 'wagmi'
 
+// Components
+import { Button } from '@/components'
+
+// Hooks
+import { useIsWrongNetwork } from '@/hooks'
+
 const WrongNetworkNotice = () => {
-    const { switchChain } =
-    useSwitchChain()
+    const { switchChain } = useSwitchChain()
     const { preferredNetwork } = useIsWrongNetwork()
 
     return (
@@ -22,9 +25,9 @@ const WrongNetworkNotice = () => {
                 <Button
                     type="button"
                     onClick={() =>
-                        switchChain?.(
-                            {chainId:Number(process.env.NEXT_PUBLIC_CHAIN_ID)}
-                        )
+                        switchChain?.({
+                            chainId: Number(process.env.NEXT_PUBLIC_CHAIN_ID),
+                        })
                     }
                 >
                     Switch Network
diff --git a/components/sections/SectionRoadmap/SectionRoadmap.tsx b/components/sections/SectionRoadmap/SectionRoadmap.tsx
index fc5b9c3..3dcf635 100644
--- a/components/sections/SectionRoadmap/SectionRoadmap.tsx
+++ b/components/sections/SectionRoadmap/SectionRoadmap.tsx
@@ -2,13 +2,13 @@ import Image from 'next/image'
 import clsx from 'clsx'
 
 // Data
-import { roadmapPhasesConfig } from './data'
+import { roadmapPhasesConfig } from '@/components'
 
 // Assets
 import arrowExternalIcon from '@/assets/arrow-external.svg'
 
 // Components
-import Title from '@/components/common/Title'
+import { Title } from '@/components'
 
 const SectionRoadmap = () => {
     return (
diff --git a/components/shared/AngledContentStripe/AngledContentStripe.tsx b/components/shared/AngledContentStripe/AngledContentStripe.tsx
index 4f125de..8f12cec 100644
--- a/components/shared/AngledContentStripe/AngledContentStripe.tsx
+++ b/components/shared/AngledContentStripe/AngledContentStripe.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import clsx from 'clsx'
 
 // TS
diff --git a/components/shared/ButtonAccount/ButtonAccount.tsx b/components/shared/ButtonAccount/ButtonAccount.tsx
index 5df32f7..421f972 100644
--- a/components/shared/ButtonAccount/ButtonAccount.tsx
+++ b/components/shared/ButtonAccount/ButtonAccount.tsx
@@ -9,12 +9,13 @@ import catIcon from '@/assets/cat-icon.svg'
 import { shortenHexString } from '@/utils'
 
 // Context
-import { useUserContext } from '@/context/UserContext'
+import { useUserContext } from '@/context'
+
+// Hooks
+import { useIsWrongNetwork } from '@/hooks'
 
 // Components
-import LoaderDots from '@/components/common/LoaderDots/LoaderDots'
-import useIsWrongNetwork from '@/hooks/useIsWrongNetwork'
-import Button from '@/components/common/Button/Button'
+import { Button, LoaderDots } from '@/components'
 
 interface IProps {
     handleClick: Dispatch<SetStateAction<boolean>>
@@ -35,7 +36,9 @@ const ButtonAccount = ({ handleClick }: IProps) => {
             className="ml-auto flex min-w-[12rem] items-center justify-center py-0"
             onClick={() => {
                 if (isWrongNetwork) {
-                    switchChain?.({chainId:Number(process.env.NEXT_PUBLIC_CHAIN_ID)})
+                    switchChain?.({
+                        chainId: Number(process.env.NEXT_PUBLIC_CHAIN_ID),
+                    })
                 } else {
                     handleClick(true)
                 }
diff --git a/components/shared/ButtonConnect/ButtonConnect.tsx b/components/shared/ButtonConnect/ButtonConnect.tsx
index ec7ab08..b98a2ed 100644
--- a/components/shared/ButtonConnect/ButtonConnect.tsx
+++ b/components/shared/ButtonConnect/ButtonConnect.tsx
@@ -1,8 +1,8 @@
 import { useConnect } from 'wagmi'
+import { useConnectModal } from '@rainbow-me/rainbowkit'
 
 // Components
-import Button from '@/components/common/Button'
-import { useConnectModal } from '@rainbow-me/rainbowkit'
+import { Button } from '@/components'
 
 const ButtonConnect = () => {
     const { openConnectModal } = useConnectModal()
diff --git a/context/ContractContext.tsx b/context/ContractContext.tsx
index f4be652..02ddb02 100644
--- a/context/ContractContext.tsx
+++ b/context/ContractContext.tsx
@@ -1,10 +1,10 @@
 'use client'
-import { createContext, ReactNode, useContext } from 'react'
+import { createContext, type ReactNode, useContext } from 'react'
 import { formatUnits } from 'viem'
 import { useReadContract } from 'wagmi'
 
 // Contract
-import { contractConfig } from '@/contract/config'
+import { contractConfig } from '@/contract'
 
 interface IProps {
     totalMinted: number | undefined
diff --git a/context/UserContext.tsx b/context/UserContext.tsx
index f0dadb1..6f3ff05 100644
--- a/context/UserContext.tsx
+++ b/context/UserContext.tsx
@@ -1,12 +1,12 @@
-import { createContext, ReactNode, useContext } from 'react'
+import { createContext, type ReactNode, useContext } from 'react'
 import { formatUnits } from 'viem'
 import { useAccount, useBalance, useReadContract } from 'wagmi'
 
 // Contexts
-import { useContractContext } from './ContractContext'
+import { useContractContext } from '@/context'
 
 // Contract
-import { contractConfig } from '@/contract/config'
+import { contractConfig } from '@/contract'
 
 interface IProps {
     userTotalNftBalance: undefined | number
diff --git a/context/index.ts b/context/index.ts
new file mode 100644
index 0000000..44ce5f7
--- /dev/null
+++ b/context/index.ts
@@ -0,0 +1,2 @@
+export { ContractProvider, useContractContext } from '@/context/ContractContext'
+export { UserProvider, useUserContext } from '@/context/UserContext'
diff --git a/contract/index.ts b/contract/index.ts
new file mode 100644
index 0000000..d076223
--- /dev/null
+++ b/contract/index.ts
@@ -0,0 +1,2 @@
+export { contractConfig } from '@/contract/config'
+export { contractABI } from '@/contract/contractABI'
diff --git a/hooks/index.ts b/hooks/index.ts
new file mode 100644
index 0000000..65a40f1
--- /dev/null
+++ b/hooks/index.ts
@@ -0,0 +1,4 @@
+export { default as useIsMounted } from '@/hooks/useIsMounted'
+export { default as useIsWrongNetwork } from '@/hooks/useIsWrongNetwork'
+export { default as useMint } from '@/hooks/useMint'
+export { default as useScrollIndicator } from '@/hooks/useScrollIndicator'
diff --git a/hooks/useIsWrongNetwork.tsx b/hooks/useIsWrongNetwork.tsx
index 51fa06d..26246f3 100644
--- a/hooks/useIsWrongNetwork.tsx
+++ b/hooks/useIsWrongNetwork.tsx
@@ -1,8 +1,8 @@
-import { useAccount, useConfig,  } from 'wagmi'
+import { useAccount, useConfig } from 'wagmi'
 
 const useIsWrongNetwork = () => {
     const { chain, address } = useAccount()
-    const { chains } = useConfig() 
+    const { chains } = useConfig()
 
     const isWrongNetwork =
         address && chain?.id !== Number(process.env.NEXT_PUBLIC_CHAIN_ID)
diff --git a/hooks/useMint.tsx b/hooks/useMint.tsx
index 3e8993f..f34a44a 100644
--- a/hooks/useMint.tsx
+++ b/hooks/useMint.tsx
@@ -1,5 +1,6 @@
 import { useReducer } from 'react'
-import { BaseError, TransactionReceipt, parseEther, parseUnits } from 'viem'
+import { BaseError, parseEther, parseUnits } from 'viem'
+import { useConfig } from 'wagmi'
 import {
     simulateContract,
     writeContract,
@@ -7,14 +8,13 @@ import {
 } from '@wagmi/core'
 
 // Contract
-import { contractConfig } from '@/contract/config'
+import { contractConfig } from '@/contract'
 
 // Reducers
 import { useMintReducer } from '@/reducers'
 
 // Utilities
 import { toErrorWithMessage } from '@/utils'
-import { useConfig } from 'wagmi'
 
 const pricePerNFT = +process.env.NEXT_PUBLIC_NFT_PRICE! as unknown as number
 
@@ -80,7 +80,7 @@ const useMint = () => {
                 isWriteLoading: true,
             })
 
-            const writeResult = await writeContract(config,result.request)
+            const writeResult = await writeContract(config, result.request)
 
             writeLoading = false
             receiptLoading = true
@@ -90,7 +90,9 @@ const useMint = () => {
                 isReceiptLoading: true,
             })
 
-            const data = await waitForTransactionReceipt(config, {hash:writeResult})
+            const data = await waitForTransactionReceipt(config, {
+                hash: writeResult,
+            })
 
             receiptLoading = false
 
diff --git a/hooks/useScrollIndindicator.tsx b/hooks/useScrollIndicator.tsx
similarity index 100%
rename from hooks/useScrollIndindicator.tsx
rename to hooks/useScrollIndicator.tsx
diff --git a/requests/index.ts b/requests/index.ts
index 8029823..aa69227 100644
--- a/requests/index.ts
+++ b/requests/index.ts
@@ -1 +1 @@
-export * from './requests'
+export { getNFTs, getNFTMetadata } from '@/requests/requests'
diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx
index 8fc3ce8..0247238 100644
--- a/stories/Button.stories.tsx
+++ b/stories/Button.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import Button from '../components/common/Button'
+import { Button } from '@/components'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
diff --git a/stories/InfoMessageWrapper.stories.tsx b/stories/InfoMessageWrapper.stories.tsx
index 3185709..ae83bcd 100644
--- a/stories/InfoMessageWrapper.stories.tsx
+++ b/stories/InfoMessageWrapper.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 // Components
-import InfoMessageWrapper from '@/components/sections/SectionMint/InfoMessageWrapper'
+import { InfoMessageWrapper } from '@/components'
 
 const meta = {
     title: 'InfoMessageWrapper',
diff --git a/stories/LoaderDots.stories.tsx b/stories/LoaderDots.stories.tsx
index 7fc9a9c..4f9fd9c 100644
--- a/stories/LoaderDots.stories.tsx
+++ b/stories/LoaderDots.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 // Components
-import LoaderDots from '../components/common/LoaderDots'
+import { LoaderDots } from '@/components'
 
 const meta = {
     title: 'Loaders/LoaderDots',
diff --git a/stories/LoaderSquare.stories.tsx b/stories/LoaderSquare.stories.tsx
index 40ea5bc..168d122 100644
--- a/stories/LoaderSquare.stories.tsx
+++ b/stories/LoaderSquare.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 // Components
-import LoaderSquare from '../components/common/LoaderSquare'
+import { LoaderSquare } from '@/components'
 
 const meta = {
     title: 'Loaders/LoaderSquare',
diff --git a/stories/NFTCard.stories.tsx b/stories/NFTCard.stories.tsx
index 65a3839..b3ced19 100644
--- a/stories/NFTCard.stories.tsx
+++ b/stories/NFTCard.stories.tsx
@@ -2,8 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { useArgs } from '@storybook/preview-api'
 
 // Components
-import NftCard from '@/components/NftCard'
-import Button from '@/components/common/Button'
+import { Button, NftCard } from '@/components'
 
 // Sample data
 import { nftCardData } from './sampleData'
diff --git a/stories/Title.stories.tsx b/stories/Title.stories.tsx
index 8858d61..b419a13 100644
--- a/stories/Title.stories.tsx
+++ b/stories/Title.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 // Components
-import Title from '../components/common/Title'
+import { Title } from '@/components'
 
 const meta = {
     title: 'Title',
diff --git a/types/index.ts b/types/index.ts
new file mode 100644
index 0000000..59f530c
--- /dev/null
+++ b/types/index.ts
@@ -0,0 +1,7 @@
+export type {
+    INFT,
+    INFTData,
+    IMintedMetadata,
+    INFTDataWithId,
+    GetNfts,
+} from '@/types/getNftsAPI'
diff --git a/utils/errorHandling.ts b/utils/errorHandling.ts
index f48f91f..6b83ac3 100644
--- a/utils/errorHandling.ts
+++ b/utils/errorHandling.ts
@@ -1,3 +1,4 @@
+// source: https://kentcdodds.com/blog/get-a-catch-block-error-message-with-typescript
 type ErrorWithMessage = {
     message: string
 }