added storybook

src/Components/ClaimProject/Claim_CopySignatureCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Claim_CopySignatureCard from './Claim_CopySignatureCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Claim/Copy Signature Card',
+    component: Claim_CopySignatureCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof Claim_CopySignatureCard>;
+
+const Template: ComponentStory<typeof Claim_CopySignatureCard> = (args) => <Claim_CopySignatureCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/ClaimProject/Claim_FundWithdrawCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Claim_FundWithdrawCard from './Claim_FundWithdrawCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Claim/Fund Withdraw Card',
+    component: Claim_FundWithdrawCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof Claim_FundWithdrawCard>;
+
+const Template: ComponentStory<typeof Claim_FundWithdrawCard> = (args) => <Claim_FundWithdrawCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/ClaimProject/Claim_GenerateSignatureCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Claim_GenerateSignatureCard from './Claim_GenerateSignatureCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Claim/Generate Signature Card',
+    component: Claim_GenerateSignatureCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof Claim_GenerateSignatureCard>;
+
+const Template: ComponentStory<typeof Claim_GenerateSignatureCard> = (args) => <Claim_GenerateSignatureCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/ClaimProject/Claim_SubmittedCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Claim_SubmittedCard from './Claim_SubmittedCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Claim/Submitted Card',
+    component: Claim_SubmittedCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof Claim_SubmittedCard>;
+
+const Template: ComponentStory<typeof Claim_SubmittedCard> = (args) => <Claim_SubmittedCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/ExplorePage/partials/Categories.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Categories from './Categories';
+
+
+export default {
+    title: 'Explore Page/Categories',
+    component: Categories,
+
+} as ComponentMeta<typeof Categories>;
+
+const Template: ComponentStory<typeof Categories> = (args) => <Categories />;
+
+export const Default = Template.bind({});
+

src/Components/ExplorePage/partials/Header.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Header from './Header';
+
+
+export default {
+    title: 'Explore Page/Header',
+    component: Header,
+
+} as ComponentMeta<typeof Header>;
+
+const Template: ComponentStory<typeof Header> = (args) => <Header />;
+
+export const Default = Template.bind({});
+

src/Components/ExplorePage/partials/ProjectCardMini.stories.tsx

@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import mockData from 'src/api/mockData.json'
+
+import ProjectCardMini from './ProjectCardMini';
+
+
+export default {
+    title: 'Explore Page/Project Card Mini',
+    component: ProjectCardMini,
+
+} as ComponentMeta<typeof ProjectCardMini>;
+
+const Template: ComponentStory<typeof ProjectCardMini> = (args) => <ProjectCardMini {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    project: mockData.projectsCards[0]
+}
+
+
+

src/Components/ExplorePage/partials/ProjectsRow.stories.tsx

@@ -0,0 +1,33 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import mockData from 'src/api/mockData.json'
+
+import ProjectsRow from './ProjectsRow';
+import { MdLocalFireDepartment } from 'react-icons/md';
+
+
+export default {
+    title: 'Explore Page/ProjectsRow',
+    component: ProjectsRow,
+
+} as ComponentMeta<typeof ProjectsRow>;
+
+const Template: ComponentStory<typeof ProjectsRow> = (args) => <ProjectsRow {...args} />;
+
+export const Hottest = Template.bind({});
+Hottest.args = {
+    title: <>
+        Hottest
+        <MdLocalFireDepartment
+            className='inline-block text-fire align-bottom scale-125 ml-4 origin-bottom'
+        /></>,
+    categoryId: 'hottest',
+    projects: mockData.projectsCards
+}
+
+export const Defi = Template.bind({});
+Defi.args = {
+    title: 'DeFi',
+    categoryId: 'defi',
+    projects: mockData.projectsCards
+}
+

src/Components/ExplorePage/partials/ProjectsRow.tsx

@@ -1,7 +1,7 @@
 import { ReactElement, useEffect, useRef, useState } from "react";
 import { ProjectCard } from "../../../utils/interfaces";
 import Carousel from 'react-multi-carousel';
-import { MdDoubleArrow, MdLocalFireDepartment } from 'react-icons/md';
+import { MdDoubleArrow, } from 'react-icons/md';
 import { useAppDispatch } from "../../../utils/hooks";
 import { ModalId, openModal } from "../../../redux/features/modals.slice";
 import _throttle from 'lodash.throttle'

src/Components/ExplorePage/partials/ProjectsSection.stories.tsx

@@ -0,0 +1,14 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import ProjectsSection from './ProjectsSection';
+
+
+export default {
+    title: 'Explore Page/Projects Section',
+    component: ProjectsSection,
+
+} as ComponentMeta<typeof ProjectsSection>;
+
+const Template: ComponentStory<typeof ProjectsSection> = (args) => <ProjectsSection />;
+
+export const Default = Template.bind({});

src/Components/Login/Login_ExternalWalletCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Login_ExternalWalletCard from './Login_ExternalWalletCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Login/External Wallet Card',
+    component: Login_ExternalWalletCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof Login_ExternalWalletCard>;
+
+const Template: ComponentStory<typeof Login_ExternalWalletCard> = (args) => <Login_ExternalWalletCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/Login/Login_NativeWalletCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Login_NativeWalletCard from './Login_NativeWalletCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Login/Native Wallet Card',
+    component: Login_NativeWalletCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof Login_NativeWalletCard>;
+
+const Template: ComponentStory<typeof Login_NativeWalletCard> = (args) => <Login_NativeWalletCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/Login/Login_ScanningWalletCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Login_ScanningWalletCard from './Login_ScanningWalletCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Login/Scanning Wallet Card',
+    component: Login_ScanningWalletCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof Login_ScanningWalletCard>;
+
+const Template: ComponentStory<typeof Login_ScanningWalletCard> = (args) => <Login_ScanningWalletCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/Login/Login_SuccessCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Login_SuccessCard from './Login_SuccessCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Login/Success Card',
+    component: Login_SuccessCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof Login_SuccessCard>;
+
+const Template: ComponentStory<typeof Login_SuccessCard> = (args) => <Login_SuccessCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/Login/Login_SuccessCard.tsx

@@ -12,14 +12,14 @@ export default function Login_SuccessCard({ onClose, direction, ...props }: Moda
     const handleNext = useCallback(() => {
         dispatch(closeModal())
         dispatch(openSceduledModal())
-    }, [dispatch, onClose])
+    }, [dispatch])
 
 
     useEffect(() => {
         dispatch(connectWallet());
         const timeout = setTimeout(handleNext, 3000)
         return () => clearTimeout(timeout)
-    }, [handleNext])
+    }, [handleNext, dispatch])
 
     return (
         <motion.div

src/Components/Project/ProjectCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import ProjectCard from './ProjectCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Project/Project Card',
+    component: ProjectCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof ProjectCard>;
+
+const Template: ComponentStory<typeof ProjectCard> = (args) => <ProjectCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/Shared/Navbar/NavMobile.tsx

@@ -5,6 +5,7 @@ import { GrClose } from 'react-icons/gr';
 import { BsSearch } from 'react-icons/bs'
 import { navLinks } from "./Navbar";
 import { AiFillThunderbolt } from 'react-icons/ai';
+import { Link } from "react-router-dom";
 
 const navBtnVariant = {
     menuHide: { rotate: 90, opacity: 0 },
@@ -48,7 +49,7 @@ export default function NavMobile({ onSearch }: Props) {
                 <div className="w-40 h-40 bg-gray-100 rounded-8 mr-16 overflow-hidden">
                     <img className="w-full h-full object-cover" src="https://www.figma.com/file/OFowr5RJk9YZCW35KT7D5K/image/07b85d84145942255afd215b3da26dbbf1dd03bd?fuid=772401335362859303" alt="" />
                 </div>
-                <h2 className="text-h5 font-bold mx-auto">makers.bolt.fun</h2>
+                <Link to='/'><h2 className="text-h5 font-bold mx-auto">makers.bolt.fun</h2></Link>
                 <button className='rounded-full mr-16 text-2xl w-[50px] h-[50px] hover:bg-gray-200' onClick={handleClick}>
 
                     {!open ? (<motion.div key={open ? 1 : 0} variants={navBtnVariant} initial='menuHide' animate='menuShow'><FiMenu /></motion.div>)
@@ -81,7 +82,7 @@ export default function NavMobile({ onSearch }: Props) {
                     </div>
                     <ul className="py-16 gap-64 border-t">
                         {navLinks.map((link, idx) => <li key={idx} className="text-body3 p-16 hover:bg-gray-200">
-                            <a href={link.url}><link.icon className={`text-body2  inline-block mr-12 ${link.color}`} /> {link.text} </a></li>
+                            <Link to={link.url}><link.icon className={`text-body2  inline-block mr-12 ${link.color}`} /> {link.text} </Link></li>
                         )}
                     </ul>
                     <ul className="px-16 py-16 pb-32 flex flex-wrap gap-y-12  border-t mt-auto">

src/Components/Shared/Navbar/Navbar.stories.tsx

@@ -0,0 +1,14 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Navbar from './Navbar';
+
+export default {
+  title: 'Shared/Navbar',
+  component: Navbar,
+
+} as ComponentMeta<typeof Navbar>;
+
+const Template: ComponentStory<typeof Navbar> = (args) => <Navbar />;
+
+export const Default = Template.bind({});
+

src/Components/Shared/Navbar/Navbar.tsx

@@ -9,11 +9,12 @@ import { motion } from "framer-motion";
 import { GrClose } from 'react-icons/gr';
 import { useAppDispatch, useAppSelector } from "../../../utils/hooks";
 import { ModalId, openModal } from "../../../redux/features/modals.slice";
+import { Link } from "react-router-dom";
 
 export const navLinks = [
     { text: "Explore", url: "/", icon: FaHome, color: 'text-primary-600' },
-    { text: "Hottest", url: "/", icon: MdLocalFireDepartment, color: 'text-primary-600' },
-    { text: "Categories", url: "/", icon: IoExtensionPuzzle, color: 'text-primary-600' },
+    { text: "Hottest", url: "/categories/hottest", icon: MdLocalFireDepartment, color: 'text-primary-600' },
+    { text: "Categories", url: "/categories", icon: IoExtensionPuzzle, color: 'text-primary-600' },
 
 ]
 
@@ -63,10 +64,10 @@ export default function Navbar() {
             {/* Desktop Nav */}
 
             <nav className="hidden lg:flex py-36 px-32 items-center">
-                <h2 className="text-h5 font-bold mr-40 lg:mr-64">makers.bolt.fun</h2>
+                <Link to='/'><h2 className="text-h5 font-bold mr-40 lg:mr-64">makers.bolt.fun</h2></Link>
                 <ul className="flex gap-32 xl:gap-64">
                     {navLinks.map((link, idx) => <li key={idx} className="text-body4 hover:text-primary-600">
-                        <a href={link.url}><link.icon className={`text-body2 align-middle inline-block mr-8 ${link.color}`} /> {link.text}</a></li>
+                        <Link to={link.url}><link.icon className={`text-body2 align-middle inline-block mr-8 ${link.color}`} /> {link.text}</Link></li>
                     )}
 
                 </ul>

src/Components/Tip/TipCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import TipCard from './TipCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Tip/Tip Card',
+    component: TipCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof TipCard>;
+
+const Template: ComponentStory<typeof TipCard> = (args) => <TipCard {...args} />;
+
+export const Default = Template.bind({});
+