Merge branch 'master' into add_recipient

src/components/Home/Hero.jsx

@@ -43,10 +43,10 @@ export default function Hero({ className }) {
         {/* heading */}
         <div>
           <h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
-            Lock and Lob x Fiesta Spurs
+            Welcome
           </h1>
           <span className="text-[18px] font-thin tracking-wide text-white">
-            ID : 2320382
+            Last Login :  10-10-2026
           </span>
         </div>
         {/* user */}
@@ -64,9 +64,9 @@ export default function Hero({ className }) {
         {/* countdown */}
         <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border border-white-opacity">
           <div className="flex flex-col justify-between">
-            <p className="text-base text-white tracking-wide">Current Bid</p>
+            <p className="text-base text-white tracking-wide">Current Task</p>
             <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-              75,320 ETH
+              ABCDEFGH01
             </p>
             <p className="text-base text-white tracking-wide">773.69 USD</p>
           </div>
@@ -74,7 +74,7 @@ export default function Hero({ className }) {
           <div className="flex flex-col justify-between">
             <p className="text-base text-white tracking-wide">Next due in</p>
             <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-              <CountDown lastDate="2023-03-04 4:00:00" />
+              <CountDown lastDate="2023-04-26 4:00:00" />
             </p>
             <div className="text-base text-white tracking-wide flex gap-[23px]">
               <span>Hrs</span>
@@ -85,19 +85,13 @@ export default function Hero({ className }) {
         </div>
         {/* action */}
         <div className="flex lg:space-x-3 space-x-1 items-center">
-          <Link
-            to="/active-bids"
-            className=" btn-shine  w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
-          >
-            Place a Bid
-          </Link>
           <Link
             to="/market-place"
             className="text-white text-base sm:block hidden"
           >
             <span className=" border-b dark:border-[#5356fb29]  border-white">
               {" "}
-              View Art Work
+              View All Task(s)
             </span>
           </Link>
         </div>

src/components/MyWallet/AddRecipient.jsx

@@ -0,0 +1,166 @@
+import React, {useState} from 'react'
+import { Link } from 'react-router-dom'
+import Icons from '../Helpers/Icons'
+
+function AddRecipient() {
+   
+    //STATE FOR CONTROLLED INPUTS
+    let [inputs, setInputs] = useState({
+        firstname: '',
+        lastname: '',
+        country: '',
+        'bank-name': '',
+        'account-number': '',
+        'repeat-account-number': '',
+        'account-type': '',
+        state: '',
+        city: ''
+    })
+
+    // FUNCTION TO HANDLE INPUT CHANGE
+    const handleChange = ({target:{name, value}}) => {
+        setInputs(prev => ({...prev, [name]:value}))
+    }
+
+    //FUNCTION TO HANDLE SUBMIT
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        //valid inputs before submitting. Just for texting remove later
+    
+        // setInputs((prev)=>{
+        //     for(let input in prev){
+        //         prev[input] = ''
+        //     }
+        // })
+        // RETURN INPUTS TO EMPTY STRING
+        setInputs({
+            firstname: '',
+            lastname: '',
+            country: '',
+            'bank-name': '',
+            'account-number': '',
+            'repeat-account-number': '',
+            'account-type': '',
+            state: '',
+            city: ''
+        })
+    }
+    return (
+        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+            <div className="w-full mb-10 lg:mb-0">
+                <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
+                        <h2 className='my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-semibold'>ADD BANK ACCOUNT</h2>
+                   <form className='add-recipient-info px-1 md:px-[50px] lg:px-[100px]' onSubmit={handleSubmit}>
+                        
+                        {/* inputs starts here */}
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>First Name <span className='text-red-500'>*</span></label>
+                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                value={inputs.firstname} 
+                                name='firstname' 
+                                type="text" 
+                                placeholder='Account Firstname' 
+                                required
+                                onChange={handleChange}
+                                />
+                        </div>
+
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Last Name <span className='text-red-500'>*</span></label>
+                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                value={inputs.lastname} 
+                                name='lastname' 
+                                type="text" 
+                                placeholder='Account Lastname' 
+                                required
+                                onChange={handleChange}
+                                />
+                        </div>
+
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Country <span className='text-red-500'>*</span></label>
+                            <select className='mt-2 w-full md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='country' onChange={handleChange}>
+                                <option className='text-slate-500 text-lg' value="">Select...</option>
+                            </select>
+                        </div>
+
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Bank Name <span className='text-red-500'>*</span></label>
+                            <select className='mt-2 w-full md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='bank-name' onChange={handleChange}>
+                                <option className='text-slate-500 text-lg' value="">Select...</option>
+                            </select>
+                        </div>
+
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Account Number <span className='text-red-500'>*</span></label>
+                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                value={inputs['account-number']} 
+                                name='account-number' 
+                                type="text" 
+                                placeholder='Account No' 
+                                required
+                                onChange={handleChange}
+                                />
+                        </div>
+
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Repeat Account Number <span className='text-red-500'>*</span></label>
+                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                value={inputs['repeat-account-number']} 
+                                name='repeat-account-number' 
+                                type="text" 
+                                placeholder='Repeat Account No' 
+                                required
+                                onChange={handleChange}
+                                />
+                        </div>
+
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Account type <span className='text-red-500'>*</span></label>
+                            <select className='mt-2 w-full md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='account-type' onChange={handleChange}>
+                                <option className='text-slate-500 text-lg' value="">Select...</option>
+                            </select>
+                        </div>
+
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>State/Province <span className='text-red-500'>*</span></label>
+                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                value={inputs.state} 
+                                name='state' 
+                                type="text" 
+                                placeholder='State' 
+                                required
+                                onChange={handleChange}
+                                />
+                        </div>
+
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>City <span className='text-red-500'>*</span></label>
+                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                value={inputs.city} 
+                                name='city' 
+                                type="text" 
+                                placeholder='City' 
+                                required
+                                onChange={handleChange}
+                                />
+                        </div>
+
+                        {/* end of inputs starts here */}
+
+                        <div className='add-recipient-btn flex justify-end items-center py-4'>
+                            <button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md flex items-center space-x-1'>
+                                <span className='pr-2'>ADD RECIPIENT</span>
+                                <Icons name="arrows" />
+                            </button>
+                        </div>
+                   </form>
+                </div>
+            </div>
+
+        </div>
+      )
+}
+
+export default AddRecipient

src/components/MyWallet/TransferFund.jsx

@@ -83,7 +83,7 @@ function TransferFund() {
                                         <span className='text-red-500 mx-2'>*</span> 
                                         <span title='Transfer Recipient' className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}>!</span>
                                     </label>
-                                    <Link to='#' className='mx-1 text-base text-white p-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
+                                    <Link to='add-recipient' className='mx-1 text-base text-white p-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
                                 </div>
                                 <select className='mt-2 w-full p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='recipient' onChange={handleChange}>
                                     <option className='text-slate-500 text-lg' value="">Select...</option>

src/components/MyWallet/Wallet.jsx

@@ -6,6 +6,7 @@ import Layout from '../Partials/Layout'
 import Balance from './Balance'
 import TransferFund from './TransferFund'
 import AddFund from './AddFund'
+import AddRecipient from './AddRecipient'
 
 function Wallet() {
   return (
@@ -27,6 +28,7 @@ const WalletRoutes = () => {
                 <Route path='transfer-fund' element={<TransferFund />} />
                 <Route index element={<Balance />} />
                 <Route path='*' element={<Navigate to='/' />} />
+                <Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
             </Route>
         </Routes>
     )

src/components/Partials/MobileSideBar.jsx

@@ -122,7 +122,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
                   className="nav-item flex items-center justify-start space-x-3.5"
                 >
                   <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
-                    <Icons name="wallet-two" />
+                    <Icons name="notification" />
                   </span>
                   <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
                     Messages

src/components/Partials/Sidebar.jsx

@@ -122,7 +122,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   }`}
                 >
                   <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="active-bids" />
+                    <Icons name="market" />
                   </span>
                   <span
                     className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
@@ -165,7 +165,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   }`}
                 >
                   <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="active-bids" />
+                    <Icons name="notification-setting" />
                   </span>
                   <span
                     className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
@@ -185,7 +185,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   }`}
                 >
                   <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="active-bids" />
+                    <Icons name="wallet-two" />
                   </span>
                   <span
                     className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${