feat: refactor modals and pages

app/components/address.tsx

@@ -1,22 +1,25 @@
 "use client";
 import { useAccount } from "@starknet-react/core";
 import { MoreVertical } from "lucide-react";
-import DisconnectModal from "./disconnect-modal";
 import { useState } from "react";
-import { createPortal } from "react-dom";
 import { shortenAddress } from "../utils/helper";
+import DisconnectModal from "./ui/modals/disconnect-wallet-modal";
 
 export default function Address() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { address } = useAccount();
 
   return (
     <div className="flex items-center gap-2 sm:gap-4 text-[#F3F5FF] leading-6 text-sm font-semibold">
-      {isModalOpen &&
+      {/* {isModalOpen &&
         createPortal(
           <DisconnectModal handleClose={() => setIsModalOpen(false)} />,
           document.body
-        )}
+        )} */}
+      <DisconnectModal
+        open={isModalOpen}
+        onOpenChange={() => setIsModalOpen((prev) => !prev)}
+      />
       <div className="flex bg-[#0D1016] md:bg-opacity-[64%] items-center gap-2 px-[14px] py-3 rounded-lg min-w-[164px] justify-center text-sm">
         <img
           src="/coin-logos/usdt-logo.svg"
@@ -29,7 +32,7 @@ export default function Address() {
       <div className="flex bg-[#0D1016] md:bg-opacity-[64%] items-center gap-2 px-[14px] py-3 rounded-lg text-sm">
         <img src="/user.svg" alt="" className="w-5 h-5" />
         <span>{address ? shortenAddress(address) : ""}</span>
-        <button onClick={() => setIsModalOpen(true)}>
+        <button type="button" onClick={() => setIsModalOpen(true)}>
           <MoreVertical className="w-4 h-4 text-gray-400" />
         </button>
       </div>

app/components/change-autoswap-settings.tsx

@@ -1,14 +1,13 @@
 import React, { useCallback, useEffect, useState } from "react";
-import GenericModal from "./generic-modal";
 import { EditIcon } from "lucide-react";
 import { createSubscription, useContractWriteUtility } from "../utils/helper";
 import { swappr_contract_address } from "../utils/addresses";
 import { STRK_TOKEN, USDT_TOKEN } from "../utils/data";
 import { ERC20_ABI } from "../abis/erc20-abi";
 import { useAccount } from "@starknet-react/core";
 import { useRouter } from "next/navigation";
-import { createPortal } from "react-dom";
-import GrantPermissionModal from "./grant-permission-modal";
+import GrantPermission from "./ui/modals/grant-permission-modal";
+import GenericModal from "./generic-modal";
 
 export default function ChangeAutoswapSettings({
   handleClose,
@@ -62,14 +61,11 @@ export default function ChangeAutoswapSettings({
   }, [writeAsync]);
   return (
     <>
-      {isPermissionModalOpen &&
-        createPortal(
-          <GrantPermissionModal
-            handleClose={() => setIsPermissionModalOpen(false)}
-            handleSubmit={handleSubscribe}
-          />,
-          document.body
-        )}
+      <GrantPermission
+        onOpenChange={() => setIsPermissionModalOpen((prev) => !prev)}
+        open={isPermissionModalOpen}
+        handleSubmit={handleSubscribe}
+      />
 
       <GenericModal handleClose={handleClose} containerClass="md:w-[552px]">
         <h2 className="text-lg text-left font-semibold text-[#F3F5FF] mb-[64px]">

app/components/footer.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import Link from "next/link";
-import { IconType } from "react-icons";
 import { FaTelegramPlane } from "react-icons/fa";
 import { FaXTwitter } from "react-icons/fa6";
 import { FiGithub } from "react-icons/fi";
 
-export const footerIcons: { icons: IconType; path: string }[] = [
+export const footerIcons = [
   {
     icons: FiGithub,
     path: "https://github.com/BlockheaderWeb3-Community/autoswappr-dapp",
@@ -28,9 +27,9 @@ export default function Footer() {
       </p>
 
       <div className="flex flex-row items-center gap-4 md:gap-6">
-        {footerLinks.map((link, index) => (
+        {footerLinks.map((link) => (
           <Link
-            key={index}
+            key={link.name}
             href={link.path}
             className="text-xs md:text-sm hover:opacity-80 cursor-pointer text-[#7E8489]"
           >
@@ -40,9 +39,9 @@ export default function Footer() {
       </div>
 
       <div className="flex items-center gap-7 px-[34px]">
-        {footerIcons.map((icon, index) => (
+        {footerIcons.map((icon) => (
           <Link
-            key={index}
+            key={icon.path}
             href={icon.path}
             className="text-sm md:text-xl hover:opacity-80 cursor-pointer text-white"
           >

app/components/generic-modal.tsx

@@ -3,36 +3,36 @@ import React from "react";
 import LockBodyScroll from "./lock-body-scroll";
 
 interface GenericModalProps {
-  children: React.ReactNode;
-  handleClose: () => void;
-  containerClass?: string;
+	children: React.ReactNode;
+	handleClose: () => void;
+	containerClass?: string;
 }
 
 export default function GenericModal({
-  children,
-  handleClose,
-  containerClass,
+	children,
+	handleClose,
+	containerClass,
 }: GenericModalProps) {
-  return (
-    <>
-      <LockBodyScroll lock={true} />
-      <div
-        className="fixed inset-0 bg-black/60 z-[60] backdrop-blur-sm flex items-center justify-center px-4"
-        onClick={handleClose}
-      >
-        <div
-          className={`w-full md:w-[610px] bg-[#02060D] text-center border border-[#242E38] rounded-lg p-7 relative ${containerClass}`}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <button
-            className="cursor-pointer absolute right-7 top-7 z-[51] text-[#F3F5FF]"
-            onClick={handleClose}
-          >
-            <X />
-          </button>
-          {children}
-        </div>
-      </div>
-    </>
-  );
+	return (
+		<>
+			<LockBodyScroll lock={true} />
+			<div
+				className="fixed inset-0 bg-black/60 z-[60] backdrop-blur-sm flex items-center justify-center px-4"
+				onClick={handleClose}
+			>
+				<div
+					className={`w-full md:w-[610px] bg-[#02060D] text-center border border-[#242E38] rounded-lg p-7 relative ${containerClass}`}
+					onClick={(e) => e.stopPropagation()}
+				>
+					<button
+						className="cursor-pointer absolute right-6 top-6 z-[51] text-[#F3F5FF]"
+						onClick={handleClose}
+					>
+						<X size={20} />
+					</button>
+					{children}
+				</div>
+			</div>
+		</>
+	);
 }