feat: ui type & launch-app router

apps/extension_app/package.json

@@ -21,7 +21,11 @@
     "typescript": "^5.0.4",
     "viem": "^1.19.11",
     "wagmi": "^1.4.10",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "ajv": "^8.12.0",
+    "ts-loader": "^9.4.2",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.254",
@@ -33,11 +37,5 @@
   "scripts": {
     "build:ext": "webpack --config webpack.config.js",
     "watch": "webpack -w --config webpack.config.js"
-  },
-  "devDependencies": {
-    "ajv": "^8.12.0",
-    "ts-loader": "^9.4.2",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1"
   }
 }

apps/web/package.json

@@ -4,21 +4,24 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --debug hmr",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
     "react-scripts": "^5.0.1"
   },
   "devDependencies": {
+    "@types/node": "^16.18.79",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react": "^2.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.7",
+    "daisyui": "^4.6.1",
     "postcss": "^8.4.14",
     "tailwindcss": "^3.1.6",
     "typescript": "^5.3.3",

apps/web/src/App.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import styles from "./style";
-import { Billing, Business, CardDeal, Clients, CTA, Footer, Navbar, Stats, Testimonials, Hero } from "./components";
+import React from 'react'
+import styles from './style'
+import { Billing, Business, CardDeal, Clients, CTA, Footer, Navbar, Stats, Testimonials, Hero } from './components'
 
 export default function App() {
   return (
-    <div className="bg-primary w-full overflow-hidden">
+    <div className='bg-primary w-full overflow-hidden'>
       <div className={`${styles.paddingX} ${styles.flexCenter}`}>
         <div className={`${styles.boxWidth}`}>
           <Navbar />

apps/web/src/components/Billing.tsx

@@ -1,23 +1,23 @@
 import React from 'react'
-import { apple, bill, google } from "../assets"
-import styles, { layout } from "../style"
+import { apple, bill, google } from '../assets'
+import styles, { layout } from '../style'
 
 
 export default function Billing() {
   return (
-    <section id="product" className={layout.sectionReverse}>
+    <section id='product' className={layout.sectionReverse}>
       <div className={layout.sectionImgReverse}>
-        <img src={bill} alt="billing" className="w-[100%] h-[100%] relative z-[5]" />
+        <img src={bill} alt='billing' className='w-[100%] h-[100%] relative z-[5]' />
 
         {/* gradient start */}
-        <div className="absolute z-[3] -left-1/2 top-0 w-[50%] h-[50%] rounded-full white__gradient" />
-        <div className="absolute z-[0] w-[50%] h-[50%] -left-1/2 bottom-0 rounded-full pink__gradient" />
+        <div className='absolute z-[3] -left-1/2 top-0 w-[50%] h-[50%] rounded-full white__gradient' />
+        <div className='absolute z-[0] w-[50%] h-[50%] -left-1/2 bottom-0 rounded-full pink__gradient' />
         {/* gradient end */}
       </div>
 
       <div className={layout.sectionInfo}>
         <h2 className={styles.heading2}>
-          Easily control your <br className="sm:block hidden" /> billing &
+          Easily control your <br className='sm:block hidden' /> billing &
           invoicing
         </h2>
         <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
@@ -26,9 +26,9 @@ export default function Billing() {
           placerat.
         </p>
 
-        <div className="flex flex-row flex-wrap sm:mt-10 mt-6">
-          <img src={apple} alt="google_play" className="w-[128.86px] h-[42.05px] object-contain mr-5 cursor-pointer" />
-          <img src={google} alt="google_play" className="w-[144.17px] h-[43.08px] object-contain cursor-pointer" />
+        <div className='flex flex-row flex-wrap sm:mt-10 mt-6'>
+          <img src={apple} alt='google_play' className='w-[128.86px] h-[42.05px] object-contain mr-5 cursor-pointer' />
+          <img src={google} alt='google_play' className='w-[144.17px] h-[43.08px] object-contain cursor-pointer' />
         </div>
       </div>
     </section>

apps/web/src/components/Business.tsx

@@ -1,19 +1,20 @@
 import React from 'react'
-import { features } from "../constants"
-import styles, { layout } from "../style"
-import Button from "./Button"
+import {featureTypes} from '../models/type/ui.type'
+import { features } from '../constants'
+import styles, { layout } from '../style'
+import Button from './Button'
 
-export function FeatureCard(props: any) {
+export function FeatureCard(props: featureTypes) {
   return (
-    <div className={`flex flex-row p-6 rounded-[20px] ${props.index !== features.length - 1 ? "mb-6" : "mb-0"} feature-card`}>
+    <div className={`flex flex-row p-6 rounded-[20px] ${props.index !== features.length - 1 ? 'mb-6' : 'mb-0'} feature-card`}>
       <div className={`w-[64px] h-[64px] rounded-full ${styles.flexCenter} bg-dimBlue`}>
-        <img src={props.icon} alt="star" className="w-[50%] h-[50%] object-contain" />
+        <img src={props.icon} alt='star' className='w-[50%] h-[50%] object-contain' />
       </div>
-      <div className="flex-1 flex flex-col ml-3">
-        <h4 className="font-poppins font-semibold text-white text-[18px] leading-[23.4px] mb-1">
+      <div className='flex-1 flex flex-col ml-3'>
+        <h4 className='font-poppins font-semibold text-white text-[18px] leading-[23.4px] mb-1'>
           {props.title}
         </h4>
-        <p className="font-poppins font-normal text-dimWhite text-[16px] leading-[24px]">
+        <p className='font-poppins font-normal text-dimWhite text-[16px] leading-[24px]'>
           {props.content}
         </p>
       </div>
@@ -23,10 +24,10 @@ export function FeatureCard(props: any) {
 
 export default function Business() {
   return (
-    <section id="features" className={layout.section}>
+    <section id='features' className={layout.section}>
       <div className={layout.sectionInfo}>
         <h2 className={styles.heading2}>
-          You do the business, <br className="sm:block hidden" /> we’ll handle
+          You do the business, <br className='sm:block hidden' /> we’ll handle
           the money.
         </h2>
         <p className={`${styles.paragraph} max-w-[470px] mt-5`}>

apps/web/src/components/Button.tsx

@@ -1,8 +1,8 @@
-import React from "react"
+import React from 'react'
 
 export default function Button(styles: any) {
   return (
-    <button type="button" className={`py-4 px-6 font-poppins font-medium text-[18px] text-primary bg-blue-gradient rounded-[10px] outline-none ${styles}`}>
+    <button type='button' className={`py-4 px-6 font-poppins font-medium text-[18px] text-primary bg-blue-gradient rounded-[10px] outline-none ${styles}`}>
       Get Started
     </button>
   )

apps/web/src/components/CTA.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import styles from "../style";
-import Button from "./Button";
+import styles from '../style'
+import Button from './Button'
 
 export default function CTA() {
   return (
     <section className={`${styles.flexCenter} ${styles.marginY} ${styles.padding} sm:flex-row flex-col bg-black-gradient-2 rounded-[20px] box-shadow`}>
-      <div className="flex-1 flex flex-col">
+      <div className='flex-1 flex flex-col'>
         <h2 className={styles.heading2}>Let’s try our service now!</h2>
         <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
           Everything you need to accept card payments and grow your business

apps/web/src/components/CardDeal.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
-import { card } from "../assets"
-import styles, { layout } from "../style"
-import Button from "./Button"
+import { card } from '../assets'
+import styles, { layout } from '../style'
+import Button from './Button'
 
 export default function CardDeal() {
   return (
     <section className={layout.section}>
       <div className={layout.sectionInfo}>
         <h2 className={styles.heading2}>
-          Find a better card deal <br className="sm:block hidden" /> in few easy
+          Find a better card deal <br className='sm:block hidden' /> in few easy
           steps.
         </h2>
         <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
@@ -20,7 +20,7 @@ export default function CardDeal() {
       </div>
 
       <div className={layout.sectionImg}>
-        <img src={card} alt="billing" className="w-[100%] h-[100%]" />
+        <img src={card} alt='billing' className='w-[100%] h-[100%]' />
       </div>
     </section>
   )

apps/web/src/components/Clients.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
-import { clients } from "../constants";
-import styles from "../style";
+import { clients } from '../constants'
+import styles from '../style'
+import { clientsTypes } from 'src/models/type/ui.type'
 
 export default function Clients() {
   return (
     <section className={`${styles.flexCenter} my-4`}>
       <div className={`${styles.flexCenter} flex-wrap w-full`}>
-        {clients.map((client) => (
+        {clients.map((client: clientsTypes) => (
           <div key={client.id} className={`flex-1 ${styles.flexCenter} sm:min-w-[192px] min-w-[120px] m-5`}>
-            <img src={client.logo} alt="client_logo" className="sm:w-[192px] w-[100px] object-contain" />
+            <img src={client.logo} alt='client_logo' className='sm:w-[192px] w-[100px] object-contain' />
           </div>
         ))}
       </div>

apps/web/src/components/FeedbackCard.tsx

@@ -1,22 +1,23 @@
-import React, { FC } from "react";
-import { quotes } from "../assets";
+import React from 'react'
+import { quotes } from '../assets'
+import { feedbackTypes } from 'src/models/type/ui.type'
 
 
-export default function FeedbackCard (props: any) {
+export default function FeedbackCard (props: feedbackTypes) {
   return (
-    <div className="flex justify-between flex-col px-10 py-12 rounded-[20px]  max-w-[370px] md:mr-10 sm:mr-5 mr-0 my-5 feedback-card">
-    <img src={quotes} alt="double_quotes" className="w-[42.6px] h-[27.6px] object-contain" />
-    <p className="font-poppins font-normal text-[18px] leading-[32.4px] text-white my-10">
+    <div className='flex justify-between flex-col px-10 py-12 rounded-[20px]  max-w-[370px] md:mr-10 sm:mr-5 mr-0 my-5 feedback-card'>
+    <img src={quotes} alt='double_quotes' className='w-[42.6px] h-[27.6px] object-contain' />
+    <p className='font-poppins font-normal text-[18px] leading-[32.4px] text-white my-10'>
       {props.content}
     </p>
 
-    <div className="flex flex-row">
-      <img src={props.img} alt={props.name} className="w-[48px] h-[48px] rounded-full" />
-      <div className="flex flex-col ml-4">
-        <h4 className="font-poppins font-semibold text-[20px] leading-[32px] text-white">
+    <div className='flex flex-row'>
+      <img src={props.img} alt={props.name} className='w-[48px] h-[48px] rounded-full' />
+      <div className='flex flex-col ml-4'>
+        <h4 className='font-poppins font-semibold text-[20px] leading-[32px] text-white'>
           {props.name}
         </h4>
-        <p className="font-poppins font-normal text-[16px] leading-[24px] text-dimWhite">
+        <p className='font-poppins font-normal text-[16px] leading-[24px] text-dimWhite'>
           {props.title}
         </p>
       </div>

apps/web/src/components/Footer.tsx

@@ -1,34 +1,35 @@
 import React from 'react'
-import styles from "../style";
-import { logo } from "../assets";
-import { footerLinks, socialMedia } from "../constants";
+import styles from '../style'
+import { logo } from '../assets'
+import { footerLinks, socialMedia } from '../constants'
+import { footerLinksTypes, socialMediaTypes } from 'src/models/type/ui.type'
 
 export default function Footer() {
   return (
     <section className={`${styles.flexCenter} ${styles.paddingY} flex-col`}>
       <div className={`${styles.flexStart} md:flex-row flex-col mb-8 w-full`}>
-        <div className="flex-[1] flex flex-col justify-start mr-10">
+        <div className='flex-[1] flex flex-col justify-start mr-10'>
           <img
             src={logo}
-            alt="hoobank"
-            className="w-[266px] h-[72.14px] object-contain"
+            alt='hoobank'
+            className='w-[266px] h-[72.14px] object-contain'
           />
           <p className={`${styles.paragraph} mt-4 max-w-[312px]`}>
             A new way to make the payments easy, reliable and secure.
           </p>
         </div>
 
-        <div className="flex-[1.5] w-full flex flex-row justify-between flex-wrap md:mt-0 mt-10">
-          {footerLinks.map((footerlink) => (
+        <div className='flex-[1.5] w-full flex flex-row justify-between flex-wrap md:mt-0 mt-10'>
+          {footerLinks.map((footerlink: footerLinksTypes) => (
             <div key={footerlink.title} className={`flex flex-col ss:my-0 my-4 min-w-[150px]`}>
-              <h4 className="font-poppins font-medium text-[18px] leading-[27px] text-white">
+              <h4 className='font-poppins font-medium text-[18px] leading-[27px] text-white'>
                 {footerlink.title}
               </h4>
-              <ul className="list-none mt-4">
+              <ul className='list-none mt-4'>
                 {footerlink.links.map((link, index) => (
                   <li
                     key={link.name}
-                    className={`font-poppins font-normal text-[16px] leading-[24px] text-dimWhite hover:text-secondary cursor-pointer ${index !== footerlink.links.length - 1 ? "mb-4" : "mb-0"
+                    className={`font-poppins font-normal text-[16px] leading-[24px] text-dimWhite hover:text-secondary cursor-pointer ${index !== footerlink.links.length - 1 ? 'mb-4' : 'mb-0'
                       }`}
                   >
                     {link.name}
@@ -40,18 +41,18 @@ export default function Footer() {
         </div>
       </div>
 
-      <div className="w-full flex justify-between items-center md:flex-row flex-col pt-6 border-t-[1px] border-t-[#3F3E45]">
-        <p className="font-poppins font-normal text-center text-[18px] leading-[27px] text-white">
+      <div className='w-full flex justify-between items-center md:flex-row flex-col pt-6 border-t-[1px] border-t-[#3F3E45]'>
+        <p className='font-poppins font-normal text-center text-[18px] leading-[27px] text-white'>
           Copyright Ⓒ 2022 HooBank. All Rights Reserved.
         </p>
 
-        <div className="flex flex-row md:mt-0 mt-6">
-          {socialMedia.map((social, index) => (
+        <div className='flex flex-row md:mt-0 mt-6'>
+          {socialMedia.map((social:socialMediaTypes, index) => (
             <img
               key={social.id}
               src={social.icon}
               alt={social.id}
-              className={`w-[21px] h-[21px] object-contain cursor-pointer ${index !== socialMedia.length - 1 ? "mr-6" : "mr-0"
+              className={`w-[21px] h-[21px] object-contain cursor-pointer ${index !== socialMedia.length - 1 ? 'mr-6' : 'mr-0'
                 }`}
               onClick={() => window.open(social.link)}
             />

apps/web/src/components/GetStarted.tsx

@@ -1,20 +1,20 @@
-import React from "react";
-import styles from "../style";
-import { arrowUp } from "../assets";
+import React from 'react'
+import styles from '../style'
+import { arrowUp } from '../assets'
 
 export default function GetStarted() {
   return (
     <div className={`${styles.flexCenter} w-[140px] h-[140px] rounded-full bg-blue-gradient p-[2px] cursor-pointer`}>
       <div className={`${styles.flexCenter} flex-col bg-primary w-[100%] h-[100%] rounded-full`}>
         <div className={`${styles.flexStart} flex-row`}>
-          <p className="font-poppins font-medium text-[18px] leading-[23.4px]">
-            <span className="text-gradient">Get</span>
+          <p className='font-poppins font-medium text-[18px] leading-[23.4px]'>
+            <span className='text-gradient'>Get</span>
           </p>
-          <img src={arrowUp} alt="arrow-up" className="w-[23px] h-[23px] object-contain" />
+          <img src={arrowUp} alt='arrow-up' className='w-[23px] h-[23px] object-contain' />
         </div>
 
-        <p className="font-poppins font-medium text-[18px] leading-[23.4px]">
-          <span className="text-gradient">Started</span>
+        <p className='font-poppins font-medium text-[18px] leading-[23.4px]'>
+          <span className='text-gradient'>Started</span>
         </p>
       </div>
     </div>