currency added to amount

src/components/AuthPages/VerifyLink/index2.jsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import debounce from "../../../hooks/debounce";
@@ -7,12 +6,8 @@ import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout2";
 import LoadingSpinner from '../../../components/Spinners/LoadingSpinner'
-import { updateUserDetails } from "../../../store/UserDetails";
 
 export default function VerifyLink() {
-
-  const dispatch = useDispatch();
-
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [msgError, setMsgError] = useState("");
@@ -55,14 +50,12 @@ export default function VerifyLink() {
           ) {
             localStorage.setItem("email", `${data?.email}`);
             localStorage.setItem("member_id", `${data?.member_id}`);
-            localStorage.setItem("uid", `${data?.uid}`);
             localStorage.setItem("session_token", `${data?.session}`);
-            localStorage.setItem("wallet_available_status", `${data?.wallet_available_status}`);
+            localStorage.setItem("session", `${data?.session}`);
-            dispatch(updateUserDetails({ ...data }));
+            localStorage.setItem("uid", data?.uid);
-            setTimeout(() => {
+
-              navigate("/", { replace: true });
+            navigate("/", { replace: true });
-              setLinkLoader(false);
+            setLinkLoader(false);
-            }, 2000);
           } else {
             setLinkLoader(false);
             setMsgError("Invalid Link or Password Combination");

src/components/History/JobsCompleted.jsx

@@ -55,20 +55,20 @@ function JobsCompleted() {
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
     : familyRewardHistory.data.length ?
     <table className="wallet-activity w-full table-auto border-collapse text-left">
-        <thead className='w-full'>
+        <thead className='border-b-2'>
-            <tr className='text-slate-600 dark:text-white'>
+            <tr className='text-slate-600'>
-            <th className="p-4"></th>
+            <th className="p-2"></th>
-            <th className="p-4">Amount</th>
+            <th className="p-2">Amount</th>
-            <th className="p-4">Date</th>
+            <th className="p-2">Date</th>
-            <th className="p-4">Confirmation</th>
+            <th className="p-2">Confirmation</th>
             </tr>
         </thead>
         <tbody>
             {currentReward.map((item, index) => {
                 let date = new Date(item.added).toLocaleDateString()
                 return (
-                    <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
+                    <tr key={index} className='text-slate-500'>
-                        <td className="p-4">
+                        <td className="p-2">
                             <div className='flex items-center gap-2'>
                                 <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
                                 <div className='flex flex-col'>
@@ -77,9 +77,9 @@ function JobsCompleted() {
                                 </div>
                             </div>
                         </td>
-                        <td className="p-4">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
+                        <td className="p-2">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
-                        <td className="p-4">{date}</td>
+                        <td className="p-2">{date}</td>
-                        <td className="p-4">{item.confirmation}</td>
+                        <td className="p-2">{item.confirmation}</td>
                     </tr>
                 )
             }
@@ -97,7 +97,7 @@ function JobsCompleted() {
     }
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
     </div>
   )

src/components/History/RewardsTable.jsx

@@ -52,20 +52,20 @@ export const RewardsTable = memo(() => {
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
     : familyRewardHistory.data.length ?
     <table className="wallet-activity w-full table-auto border-collapse text-left">
-        <thead className='w-full'>
+        <thead className='border-b-2'>
-            <tr className='text-slate-600 dark:text-white'>
+            <tr className='text-slate-600'>
-            <th className="p-4"></th>
+            <th className="p-2"></th>
-            <th className="p-4">Amount</th>
+            <th className="p-2">Amount</th>
-            <th className="p-4">Date</th>
+            <th className="p-2">Date</th>
-            <th className="p-4">Confirmation</th>
+            <th className="p-2">Confirmation</th>
             </tr>
         </thead>
         <tbody>
             {currentReward.map((item, index) => {
                 let date = new Date(item.added).toLocaleDateString()
                 return (
-                    <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
+                    <tr key={index} className='text-slate-500'>
-                        <td className="p-4">
+                        <td className="p-2">
                             <div className='flex items-center gap-2'>
                                 <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
                                 <div className='flex flex-col'>
@@ -74,9 +74,9 @@ export const RewardsTable = memo(() => {
                                 </div>
                             </div>
                         </td>
-                        <td className="p-4">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
+                        <td className="p-2">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
-                        <td className="p-4">{date}</td>
+                        <td className="p-2">{date}</td>
-                        <td className="p-4">{item.confirmation}</td>
+                        <td className="p-2">{item.confirmation}</td>
                     </tr>
                 )
             }
@@ -94,7 +94,7 @@ export const RewardsTable = memo(() => {
     }
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
     </div>
   )

src/components/History/index.jsx

@@ -276,7 +276,7 @@ export default function History() {
                     </button>
                 </div> */}
                 {/* END OF switch button */}
-                <div className="history-tables w-full bg-red-50 dark:bg-dark-white overflow-x-auto">
+                <div className="history-tables w-full bg-red-50 overflow-x-auto">
                     {/* PURCHASE SECTION */}
                     {selectedTab == 'purchases' &&
                         <div className="wallet w-full">

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -51,7 +51,7 @@ function AmountSection({ currency, amount, country }) {
     <div className={`flex items-center gap-8`}>
       {/* text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1 */}
       <h1 className="min-w-[150px] job-label">
-        Amount({currency})
+        Amount ({currency})
       </h1>
       <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedAmount}
@@ -91,7 +91,7 @@ function TotalSection({ currency, amount, fee, country }) {
   return (
     <div className={`flex items-center gap-8`}>
       <h1 className="min-w-[150px] job-label">
-        Total
+        Total ({currency})
       </h1>
       <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedTotal}

src/components/MyWallet/WalletComponent/PurchasesTable.jsx

@@ -18,21 +18,21 @@ function PurchasesTable({purchase}) {
     <div className='flex flex-col justify-between min-h-[500px]'>
         {purchase.data.length ?
         <table className="wallet-activity w-full table-auto border-collapse text-left">
-            <thead className='w-full'>
+            <thead className='border-b-2'>
-                <tr className='text-slate-600 dark:text-white'>
+                <tr className='text-slate-600'>
-                <th className="p-4">Trx.</th>
+                <th className="p-2">Trx.</th>
-                <th className="p-4">Amount</th>
+                <th className="p-2">Amount</th>
-                <th className="p-4">Fee</th>
+                <th className="p-2">Fee</th>
                 </tr>
             </thead>
             <tbody>
                 {currentPurchase.map((item, index) => (
-                <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
+                <tr key={index} className='text-slate-500'>
-                    <td className="p-4">{item.added_date}<br />
+                    <td className="p-2">{item.added_date}<br />
                     <b>{item.confirmation} </b>
                     </td>
-                    <td className="p-4">{item.amount}</td>
+                    <td className="p-2">{item.amount}</td>
-                    <td className="p-4">{item.fee}</td>
+                    <td className="p-2">{item.fee}</td>
                 </tr>
                 ))}
             </tbody>
@@ -48,7 +48,7 @@ function PurchasesTable({purchase}) {
         }
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
     </div>
   )

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -21,28 +21,28 @@ function RecentActivityTable({ payment }) {
     <div className="flex flex-col justify-between min-h-[500px]">
       {payment?.data?.length > 0 ? 
         <table className="wallet-activity w-full table-auto border-collapse text-left">
-          <thead className="w-full">
+          <thead className="border-b-2">
-            <tr className="text-slate-600 dark:text-white">
+            <tr className="text-slate-600">
-              <th className="p-4">Date</th>
+              <th className="p-2">Date</th>
-              <th className="p-4">Trx.</th>
+              <th className="p-2">Trx.</th>
-              <th className="p-4">Amnt./Fee</th>
+              <th className="p-2">Amnt./Fee</th>
-              <th className="p-4">Status</th>
+              <th className="p-2">Status</th>
             </tr>
           </thead>
           <tbody>
             {currentActivity.map((item, index) => (
-              <tr key={index} className="dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300">
+              <tr key={index} className="text-slate-500">
-                <td className="p-4">{item.trx_date}</td>
+                <td className="p-2">{item.trx_date}</td>
                 <td
                   className="p-4"
                   dangerouslySetInnerHTML={{ __html: item.recipient }}
                 ></td>
-                <td className="p-4">
+                <td className="p-2">
                   {item.amount}
                   <br />
                   {item.fee}
                 </td>
-                <td className="p-4">{item.status}</td>
+                <td className="p-2">{item.status}</td>
               </tr>
             ))}
           </tbody>
@@ -70,7 +70,6 @@ function RecentActivityTable({ payment }) {
         data={payment?.data}
         start={indexOfFirstItem}
         stop={indexOfLastItem}
-        borderTop={false}
       />
       {/* END OF PAGINATION BUTTON */}
     </div>

src/components/Pagination/PaginatedList.jsx

@@ -1,7 +1,7 @@
-const PaginatedList = ({ onClick, prev, next, data, start, stop, borderTop=true }) => {
+const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
   if (data?.length > process.env.REACT_APP_ITEM_PER_PAGE) {
     return (
-      <div className={`p-3 flex justify-center items-center min-h-[70px] space-x-2 w-full ${borderTop ? 'border-t-2' : 'border-t-0'}`}>
+      <div className="p-3 flex justify-center items-center min-h-[70px] space-x-2 border-t-2 w-full">
         {/* Render pagination buttons */}
         {!prev && (
           <button

src/components/Partials/Layout.jsx

@@ -53,12 +53,12 @@ export default function Layout({ children }) {
               <Header sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
             </div>
             {/* container */}
-            <div className="nft-container h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col items-start justify-center 2xl:flex-row 2xl:justify-between gap-10">
+            <div className="nft-container 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col items-start justify-center xl:flex-row xl:justify-between gap-4">
-              <div className="w-full 2xl:w-[calc(100%-250px)]">
+              <div className="flex-[80%] 2xl:flex-[85%] w-full">
                 {children && children}
               </div>
 
-              <div className="nft-right-side-content w-full 2xl:w-[200px] 2xl:flex justify-center 2xl:justify-end relative">
+              <div className="nft-right-side-content flex-[20%] 2xl:flex-[15%] w-full h-full 2xl:flex justify-center 2xl:justify-end relative">
                 <RightSideBar myJobList={userJobList} />
               </div>
             </div>