feat: refactor project structure

Refactored the project structure so that each page has its own tree of components and a global "Components" folder for the components that is used by more than one page.
- Added an "assets" directory that exports all static images/icons/fonts/...etc

src/App.tsx

@@ -1,10 +1,10 @@
-import { useCallback, useEffect } from "react";
-import Navbar from "./Components/Shared/Navbar/Navbar";
-import ExplorePage from "./Components/ExplorePage/ExplorePage";
-import ModalsContainer from "./Components/Shared/ModalsContainer/ModalsContainer";
+import {  useEffect } from "react";
+import Navbar from "src/Components/Navbar/Navbar";
+import ExplorePage from "src/pages/ExplorePage";
+import ModalsContainer from "src/Components/Modals/ModalsContainer/ModalsContainer";
 import { useAppDispatch, useAppSelector, useResizeListener } from './utils/hooks';
-import { connectWallet } from './redux/features/wallet.slice';
-import { setIsMobileScreen } from "./redux/features/theme.slice";
+import { connectWallet } from 'src/redux/features/wallet.slice';
+import { setIsMobileScreen } from "src/redux/features/theme.slice";
 
 function App() {
   const { isWalletConnected, webln } = useAppSelector(state => ({

src/Components/Modals/Login/Login_ExternalWalletCard.tsx

@@ -1,9 +1,9 @@
 import { motion } from 'framer-motion'
-import { Direction, ModalId, replaceModal } from '../../redux/features/modals.slice';
-import { useAppDispatch } from '../../utils/hooks';
-import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
+import { Direction, ModalId, replaceModal } from 'src/redux/features/modals.slice';
+import { useAppDispatch } from 'src/utils/hooks';
+import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
 import { AiFillThunderbolt } from 'react-icons/ai';
-import CopyToClipboard from 'src/Components/Shared/CopyToClipboard/CopyToClipboard';
+import CopyToClipboard from 'src/Components/CopyToClipboard/CopyToClipboard';
 import { useCallback, useEffect } from 'react';
 import { IoClose } from 'react-icons/io5';
 

src/Components/Modals/Login/Login_NativeWalletCard.tsx

@@ -1,9 +1,9 @@
 import { motion } from 'framer-motion'
-import { Direction, ModalId, replaceModal } from '../../redux/features/modals.slice';
-import { useAppDispatch } from '../../utils/hooks';
-import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
+import { Direction, ModalId, replaceModal } from 'src/redux/features/modals.slice';
+import { useAppDispatch } from 'src/utils/hooks';
+import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
 import { IoLockClosed, } from 'react-icons/io5'
-import Button from 'src/Components/Shared/Button/Button';
+import Button from 'src/Components/Button/Button';
 
 export default function Login_NativeWalletCard({ onClose, direction, ...props }: ModalCard) {
 

src/Components/Modals/Login/Login_ScanningWalletCard.tsx

@@ -1,7 +1,7 @@
 import { motion } from 'framer-motion'
-import { Direction, ModalId, replaceModal } from '../../redux/features/modals.slice';
-import { useAppDispatch } from '../../utils/hooks';
-import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
+import { Direction, ModalId, replaceModal } from 'src/redux/features/modals.slice';
+import { useAppDispatch } from 'src/utils/hooks';
+import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
 import { AiFillThunderbolt } from 'react-icons/ai';
 import Loader from 'react-loader-spinner';
 import { useCallback, useEffect } from 'react';

src/Components/Modals/Login/Login_SuccessCard.tsx

@@ -1,9 +1,9 @@
 import { motion } from 'framer-motion'
-import { useAppDispatch } from '../../utils/hooks';
-import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
+import { useAppDispatch } from 'src/utils/hooks';
+import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
 import { useCallback, useEffect } from 'react';
-import { closeModal, openSceduledModal } from '../../redux/features/modals.slice';
-import { connectWallet } from '../../redux/features/wallet.slice';
+import { closeModal, openSceduledModal } from 'src/redux/features/modals.slice';
+import { connectWallet } from 'src/redux/features/wallet.slice';
 
 export default function Login_SuccessCard({ onClose, direction, ...props }: ModalCard) {
 

src/Components/Modals/ModalsContainer/ModalsContainer.tsx

@@ -1,19 +1,19 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { useEffect } from "react";
-import { closeModal, Direction, ModalId, removeScheduledModal } from "../../../redux/features/modals.slice";
-import { useAppDispatch, useAppSelector } from "../../../utils/hooks";
-import Claim_CopySignatureCard from "../../ClaimProject/Claim_CopySignatureCard";
-import Claim_GenerateSignatureCard from "../../ClaimProject/Claim_GenerateSignatureCard";
-import Login_ExternalWalletCard from "../../Login/Login_ExternalWalletCard";
-import Login_NativeWalletCard from "../../Login/Login_NativeWalletCard";
-import Login_SuccessCard from "../../Login/Login_SuccessCard";
-import Login_ScanningWalletCard from "../../Login/Login_ScanningWalletCard";
-import ProjectCard from "../../Project/ProjectCard";
-import TipCard from "../../Tip/TipCard";
+import { closeModal, Direction, ModalId, removeScheduledModal } from "src/redux/features/modals.slice";
+import { useAppDispatch, useAppSelector } from "src/utils/hooks";
+import Claim_CopySignatureCard from "src/pages/ProjectPage/ClaimProject/Claim_CopySignatureCard";
+import Claim_GenerateSignatureCard from "src/pages/ProjectPage/ClaimProject/Claim_GenerateSignatureCard";
+import Login_ExternalWalletCard from "src/Components/Modals/Login/Login_ExternalWalletCard";
+import Login_NativeWalletCard from "src/Components/Modals/Login/Login_NativeWalletCard";
+import Login_SuccessCard from "src/Components/Modals/Login/Login_SuccessCard";
+import Login_ScanningWalletCard from "src/Components/Modals/Login/Login_ScanningWalletCard";
+import ProjectCard from "src/pages/ProjectPage/ProjectCard/ProjectCard";
+import TipCard from "src/pages/ProjectPage/Tip/TipCard";
 import Modal from "../Modal/Modal";
-import { Portal } from "../Portal/Portal";
-import Claim_SubmittedCard from "../../ClaimProject/Claim_SubmittedCard";
-import Claim_FundWithdrawCard from "../../ClaimProject/Claim_FundWithdrawCard";
+import { Portal } from "../../Portal/Portal";
+import Claim_SubmittedCard from "src/pages/ProjectPage/ClaimProject/Claim_SubmittedCard";
+import Claim_FundWithdrawCard from "src/pages/ProjectPage/ClaimProject/Claim_FundWithdrawCard";
 
 export interface ModalCard {
     onClose?: () => void;

src/Components/Navbar/Navbar.tsx

@@ -4,16 +4,15 @@ import { MdLocalFireDepartment } from 'react-icons/md';
 import { IoExtensionPuzzle } from 'react-icons/io5';
 import { AiFillThunderbolt } from 'react-icons/ai';
 import { BsSearch } from "react-icons/bs";
-import { FormEvent, useCallback, useEffect, useRef, useState } from "react";
+import { FormEvent, useRef, useState } from "react";
 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 { useAppDispatch, useAppSelector } from "src/utils/hooks";
+import { ModalId, openModal } from "src/redux/features/modals.slice";
 import { Link } from "react-router-dom";
 import Button from "../Button/Button";
 import { setNavHeight } from "src/redux/features/theme.slice";
-import _throttle from 'lodash.throttle'
-import { useResizeListener } from 'src/utils/hooks'
+ import { useResizeListener } from 'src/utils/hooks'
 
 export const navLinks = [
     { text: "Explore", url: "/", icon: FaHome, color: 'text-primary-600' },

src/assets/index.ts

@@ -0,0 +1,4 @@
+import  Assets_Images_ExploreHeader1 from './images/explore_page_header_1.jfif'
+import  Assets_Images_ExploreHeader2 from './images/explore_page_header_2.jfif'
+
+export {Assets_Images_ExploreHeader1,Assets_Images_ExploreHeader2}

src/pages/ExplorePage/Header/Header.tsx

@@ -1,10 +1,11 @@
-import Button from 'src/Components/Shared/Button/Button'
+import { Assets_Images_ExploreHeader1, Assets_Images_ExploreHeader2 } from 'src/assets';
+import Button from 'src/Components/Button/Button'
 
 const headerLinks = [
   {
     title: "A fun directory of Lightning Enabled Applications on the Open Web",
     img:
-      "https://s3-alpha-sig.figma.com/img/07b8/5d84/145942255afd215b3da26dbbf1dd03bd?Expires=1638144000&Signature=Cl1DUQJIUsrrFi48M~qU1r3Z0agGdy-uiNUao5g8-nu34QtoyWTFPXvaH3naSZBYqcPyKFq1jaXF6Mw1uj1hdWwGhXhMPLnKNJFFrGViVXhXu-3YeCPY9p4-IcieFJBZPVA~zDY8zxY5b06loWsINAVx4eMHRAhSWl~~Mca5PjlSXloiYrT00W-6c9m8gevfMMX~PsHQedzwYzg0j2DlnhPX8LbRkli1G2OxtCaFwo3~HGHXIlFGuGU1uXRvi1qBWrdjdsuWgIly1ekcFfJWAKmwYXk06EtCmfWRgGYbD7cBK~lwOkFofbf1LW0yqLv0hr4svwToH~3FiHenrCF-1g__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+      Assets_Images_ExploreHeader1,
     link: {
       content: "Submit App",
       url: "#",
@@ -13,7 +14,8 @@ const headerLinks = [
   {
     title:
       "Join the next wave of the Lightning Network in November’s ‘Shock the Web’ hackathon",
-    img: 'https://s3-alpha-sig.figma.com/img/be1b/cd75/1baa911b3875134c0889d6755c4ba2cb?Expires=1638748800&Signature=DOiLciAA95w8gOvAowjiiR-ZPbmV1oGSRRK8YpE4ALMoe47pL7DifQxZvL1LQn~NRa0aLMoMk61521fbbGJeDAwk~j6fIm~iZAlMzQn7DdWy0wFR0uLQagOgpIiIXO-w8CeC14VoW-hrjIX5mDmOonJzkfoftGqIF1WCOmP2EuswyJpIngFdLb15gCex4Necs3vH2cuD9iSgWG2za97KfdXZP79ROyk2EN9Q3~a7RT4FTBBIlgKDLuFGSVRxReXVNajn~XSxBJh2de9dFVa3tOXkwJXu3jb0G4x-wRCaG-KmBhUOemuGtu5Fumh6goktGh~bIDwoHeUBVKFHAzaYgw__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA', link: {
+    img: Assets_Images_ExploreHeader2,
+    link: {
       content: "Register Now",
       url: "#",
     },

src/pages/ExplorePage/index.ts

@@ -0,0 +1,4 @@
+import ExplorePage from './ExplorePage'
+
+
+export default ExplorePage;

src/pages/ProjectPage/ClaimProject/Claim_CopySignatureCard.tsx

@@ -1,8 +1,8 @@
 import { motion } from 'framer-motion'
-import { Direction, ModalId, replaceModal } from '../../redux/features/modals.slice';
-import { useAppDispatch, useAppSelector } from '../../utils/hooks';
-import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
-import CopyToClipboard from 'src/Components/Shared/CopyToClipboard/CopyToClipboard'
+import { Direction, ModalId, replaceModal } from 'src/redux/features/modals.slice';
+import { useAppDispatch, useAppSelector } from 'src/utils/hooks';
+import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
+import CopyToClipboard from 'src/Components/CopyToClipboard/CopyToClipboard'
 import { useCallback } from 'react';
 import { IoClose } from 'react-icons/io5';
 

src/pages/ProjectPage/ClaimProject/Claim_FundWithdrawCard.tsx

@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion'
 //  import { useAppDispatch } from '../../utils/hooks';
-import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
+import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
 
 export default function Claim_FundWithdrawCard({ onClose, direction, ...props }: ModalCard) {
 

src/pages/ProjectPage/ClaimProject/Claim_GenerateSignatureCard.tsx

@@ -1,7 +1,7 @@
 import { motion } from 'framer-motion'
-import { Direction, ModalId, replaceModal } from '../../redux/features/modals.slice';
-import { useAppDispatch, useAppSelector } from '../../utils/hooks';
-import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
+import { Direction, ModalId, replaceModal } from 'src/redux/features/modals.slice';
+import { useAppDispatch, useAppSelector } from 'src/utils/hooks';
+import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
 import { useCallback, useEffect } from 'react';
 import { IoClose } from 'react-icons/io5';
 

src/pages/ProjectPage/ClaimProject/Claim_SubmittedCard.tsx

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion'
-import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer'
+import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
 import { IoClose } from 'react-icons/io5';
 
 export default function Claim_SubmittedCard({ onClose, direction, ...props }: ModalCard) {

src/pages/ProjectPage/ProjectCard/ProjectCard.tsx

@@ -1,13 +1,13 @@
 import { motion } from 'framer-motion'
 import { BsJoystick } from 'react-icons/bs'
 import { MdClose, MdLocalFireDepartment } from 'react-icons/md';
-import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer';
+import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer';
 import { useQuery } from "@apollo/client";
-import { useAppDispatch, useAppSelector } from '../../utils/hooks';
-import { ModalId, openModal, scheduleModal } from '../../redux/features/modals.slice';
-import { setProject } from '../../redux/features/project.slice';
-import { connectWallet } from '../../redux/features/wallet.slice';
-import Button from 'src/Components/Shared/Button/Button';
+import { useAppDispatch, useAppSelector } from 'src/utils/hooks';
+import { ModalId, openModal, scheduleModal } from 'src/redux/features/modals.slice';
+import { setProject } from 'src/redux/features/project.slice';
+import { connectWallet } from 'src/redux/features/wallet.slice';
+import Button from 'src/Components/Button/Button';
 import { requestProvider } from 'webln';
 import { PROJECT_BY_ID_QUERY, PROJECT_BY_ID_RES, PROJECT_BY_ID_VARS } from './query'
 import { AiFillThunderbolt } from 'react-icons/ai';

src/pages/ProjectPage/Tip/TipCard.tsx

@@ -2,8 +2,8 @@ import { motion } from 'framer-motion'
 import React, { useState } from 'react';
 import { AiFillThunderbolt } from 'react-icons/ai'
 import { IoClose } from 'react-icons/io5'
-import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer';
-import { useAppDispatch, useAppSelector } from '../../utils/hooks';
+import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer';
+import { useAppDispatch, useAppSelector } from 'src/utils/hooks';
 import { gql, useQuery, useMutation } from "@apollo/client";
 import useWindowSize from "react-use/lib/useWindowSize";
 import Confetti from "react-confetti";

src/utils/types/assets.d.ts

@@ -0,0 +1 @@
+declare module '*.jfif';

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "baseUrl": ".",
@@ -17,5 +18,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "include": ["src","./src/utils/types/assets.d.ts"]
 }