reset profile password implemented

cards images
Merge branch 'card-list-page' of WrenchBoard/Users-Wrench into master
2023-07-14 20:28:22 +01:00 · 2023-07-14 13:19:41 -04:00 · 2023-07-14 17:00:38 +00:00 · 2023-07-14 17:54:44 +01:00 · 2023-07-14 13:42:01 +00:00 · 2023-07-14 13:48:25 +01:00
32 changed files with 1238 additions and 969 deletions
@@ -42,8 +42,18 @@ REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
 REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/

-REACT_APP_FACEBOOK_CLIENT_ID=390204307987009
-REACT_APP_FACEBOOK_CLIENT_SECRET=19f778e312f2ab96d147bacb612910c2
+#Real Account
+REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
+REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2
+
+#developenet Account
+REACT_APP_FACEBOOK_CLIENT_ID=677857427521030
+REACT_APP_FACEBOOK_CLIENT_SECRET=4801375f22072d8a75f64483fdd89829
+
+#my Account
+REACT_APP_FACEBOOK_CLIENT_ID3=1598725580610908
+
+
 REACT_APP_FACEBOOK_CLIENT_SCOPE="email,public_profile"
 REACT_APP_FACEBOOK_REDIRECT_URL="http://localhost:9082/login/auth/flogin"

@@ -40,6 +40,11 @@ REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
 REACT_APP_GOOGLE_REDIRECT_URL=https://users.wrenchboard.com/login/auth/

+REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
+REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2
+REACT_APP_FACEBOOK_CLIENT_SCOPE="email,public_profile"
+REACT_APP_FACEBOOK_REDIRECT_URL="https://users.wrenchboard.com/login/auth/flogin"
+
 DISABLE_ESLINT_PLUGIN=true

 REACT_APP_MAX_FILE_SIZE=1000000
@@ -17,6 +17,7 @@
    "flutterwave-react-v3": "^1.3.0",
    "formik": "^2.2.9",
    "react": "^18.2.0",
+    "react-apple-login": "^1.1.6",
    "react-chartjs-2": "^4.1.0",
    "react-countup": "^6.2.0",
    "react-dom": "^18.2.0",
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="naira"><path fill="#fff" d="M24,5A19,19,0,1,0,43,24,19,19,0,0,0,24,5Zm7,20a1,1,0,0,1,0,2H29v3A1.94,1.94,0,0,1,27.45,32a2,2,0,0,1-2.26-1.08L20,17.05l0,14a1,1,0,0,1-2,0V27H16a1,1,0,0,1,0-2h2V22H16a1,1,0,0,1,0-2h2V17a1.94,1.94,0,0,1,1.55-1.92,2,2,0,0,1,2.26,1.08L27,30,27,16a1,1,0,0,1,2,0v4h2a1,1,0,0,1,0,2H29v3Z" class="color3b3c3d svgShape"></path><path fill="#e3e3e3" d="M24,48A24,24,0,1,1,48,24,24,24,0,0,1,24,48ZM24,2A22,22,0,1,0,46,24,22,22,0,0,0,24,2Z" class="color3b3c3d svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933 16.933" id="Coin"><path d="M8.452 281.052a7.487 7.487 0 0 0-7.483 7.482 7.485 7.485 0 0 0 7.483 7.48 7.484 7.484 0 0 0 7.48-7.48 7.486 7.486 0 0 0-7.48-7.482zm0 1.232a6.253 6.253 0 0 1 6.248 6.25 6.25 6.25 0 0 1-6.248 6.248c-3.449 0-6.25-2.8-6.25-6.248a6.254 6.254 0 0 1 6.25-6.25zm0 .53a5.717 5.717 0 0 0-5.721 5.72 5.715 5.715 0 0 0 5.72 5.719 5.713 5.713 0 0 0 5.72-5.719 5.715 5.715 0 0 0-5.72-5.72zm-.004 2.011a.265.265 0 0 1 .267.268v.596H9.74a.265.265 0 1 1 0 .529H8.715v2.05h.17c.856 0 1.551.697 1.551 1.555s-.696 1.555-1.549 1.555h-.172v.596a.265.265 0 1 1-.529 0v-.596H7.161a.265.265 0 1 1 0-.53h1.025v-2.05h-.172a1.552 1.552 0 0 1-1.547-1.555c0-.858.694-1.554 1.547-1.554h.172v-.596a.265.265 0 0 1 .262-.268zm-.434 1.393a1.01 1.01 0 0 0-1.018 1.025 1.01 1.01 0 0 0 1.018 1.026h.172v-2.051zm.701 2.58v2.05h.172c.57 0 1.02-.448 1.02-1.025s-.449-1.025-1.022-1.025z" color="#e3e3e3" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(0 -280.067)" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal" fill="#fff" class="color000000 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" id="Visacard"><g fill="#767fad" class="color303c42 svgShape"><path d="M28 4H2C.897 4 0 4.897 0 6v18c0 1.103.897 2 2 2h26c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm1 20c0 .551-.449 1-1 1H2c-.551 0-1-.449-1-1V6c0-.551.449-1 1-1h26c.551 0 1 .449 1 1v18z" fill="#5218ed" class="color000000 svgShape"></path><path d="M7.677 14.266a.2.2 0 0 0 .228.053.17.17 0 0 0 .106-.194l-.314-1.368a.121.121 0 0 0-.002-.009c-.113-.39-.47-.449-.729-.459H6.96l-1.768-.002c-.091 0-.17.06-.185.143a.172.172 0 0 0 .121.193c1.078.358 1.96.926 2.55 1.643zM23.535 12.303h-1.15c-.46 0-.724.141-.883.473l-2.383 4.981a.162.162 0 0 0 .014.165c.035.05.094.079.158.079h1.35a.189.189 0 0 0 .176-.112c.165-.404.272-.661.307-.744h.974l1.183.002c.039.151.134.552.173.717.019.08.095.137.184.137h1.177c.057 0 .11-.024.146-.065s.05-.095.038-.146l-1.28-5.351a.185.185 0 0 0-.184-.136zm-1.926 3.675.895-2.138.114.492.39 1.646h-1.4z" fill="#5218ed" class="color000000 svgShape"></path><path d="M11.816 12.38a.193.193 0 0 0-.157-.078h-1.37a.188.188 0 0 0-.175.11L8.511 16.19l-.172-.575a.142.142 0 0 0-.009-.023c-.253-.542-.933-1.39-1.881-2.062-.065-.046-.154-.048-.221-.006s-.097.12-.074.192L7.47 17.87a.187.187 0 0 0 .18.124l1.518-.002a.19.19 0 0 0 .173-.104l2.49-5.344a.162.162 0 0 0-.016-.164zM14.088 12.297h-1.303a.184.184 0 0 0-.186.144l-.989 5.355a.165.165 0 0 0 .042.141c.036.04.088.062.144.062h1.302c.092 0 .17-.061.186-.145l.99-5.354a.164.164 0 0 0-.042-.141.195.195 0 0 0-.144-.062zM17.696 13.452h.05c.51 0 .87.107 1.097.187a.202.202 0 0 0 .16-.011.175.175 0 0 0 .093-.122l.152-.826c.016-.085-.039-.168-.128-.194a4.634 4.634 0 0 0-1.3-.182c-1.607 0-2.735.746-2.744 1.814-.01.79.807 1.231 1.422 1.494.632.269.844.441.841.682-.004.369-.506.536-.97.536a3.676 3.676 0 0 1-1.522-.285.202.202 0 0 0-.163.008.175.175 0 0 0-.095.123l-.161.87a.173.173 0 0 0 .123.193c.444.144 1.064.233 1.66.24h.001c1.705-.001 2.815-.739 2.827-1.88.006-.627-.427-1.1-1.36-1.49-.57-.256-.92-.426-.917-.686 0-.234.32-.47.934-.47z" fill="#5218ed" class="color000000 svgShape"></path></g></svg>
@@ -20,10 +20,6 @@ function FbookRedirect() {
        return
      }
      console.log(codeResponse);
-
-      setTimeout(()=>{ // remove LATER
-        navigate('/login', {state: {error: true}})
-      },2000)
      
      /*
      POST /token HTTP/1.1
@@ -1,148 +1,152 @@
-import { useState, useMemo, memo } from "react";
-import { handlePagingFunc, PaginatedList } from "../../Pagination";
-import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import { memo, useMemo, useState } from "react";
 import SuggestTask from "../../FamilyPopup/SuggestTask";
+import { PaginatedList, handlePagingFunc } from "../../Pagination";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";

-const FamilyWaitlist = memo(({ familyData, className, accountDetails, loader }) => {
-  const [popUp, setPopUp] = useState({ show: false, data: {} });
-  const [continueTaskPopup, setContinueTaskPopup] = useState({
-    show: false,
-    data: {},
-  });
-  const filteredFamilyData = useMemo(
-    () =>
-      familyData?.result_list?.filter(
-        (data) => data?.family_uid === accountDetails?.family_uid
-      ),
-    [familyData, accountDetails]
-  );
+const FamilyWaitlist = memo(
+  ({ familyData, className, accountDetails, loader }) => {
+    const [popUp, setPopUp] = useState({ show: false, data: {} });
+    const [continueTaskPopup, setContinueTaskPopup] = useState({
+      show: false,
+      data: {},
+    });
+    const filteredFamilyData = useMemo(
+      () =>
+        familyData?.result_list?.filter(
+          (data) => data?.family_uid === accountDetails?.family_uid
+        ),
+      [familyData, accountDetails]
+    );

-  const [currentPage, setCurrentPage] = useState(0);
-  const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const indexOfFirstItem = currentPage;
-  const indexOfLastItem = currentPage + itemsPerPage;
-  const currentTask = useMemo(
-    () => filteredFamilyData?.slice(indexOfFirstItem, indexOfLastItem),
-    [filteredFamilyData, indexOfFirstItem, indexOfLastItem]
-  );
+    const [currentPage, setCurrentPage] = useState(0);
+    const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const indexOfFirstItem = currentPage;
+    const indexOfLastItem = currentPage + itemsPerPage;
+    const currentTask = useMemo(
+      () => filteredFamilyData?.slice(indexOfFirstItem, indexOfLastItem),
+      [filteredFamilyData, indexOfFirstItem, indexOfLastItem]
+    );

-  const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
+    const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);

-  const openPopUp = (value) => {
-    setPopUp({ show: true, data: { ...value } });
-  };
+    const openPopUp = (value) => {
+      setPopUp({ show: true, data: { ...value } });
+    };

-  const closePopUp = () => {
-    setPopUp({ show: false, data: {} });
-  };
+    const closePopUp = () => {
+      setPopUp({ show: false, data: {} });
+    };

-  const openContinueTaskPopup = (value) => {
-    setContinueTaskPopup({ show: true, data: { ...value } });
-  };
+    const openContinueTaskPopup = (value) => {
+      setContinueTaskPopup({ show: true, data: { ...value } });
+    };

-  const closeContinueTaskPopup = () => {
-    setContinueTaskPopup({ show: false, data: {} });
-  };
+    const closeContinueTaskPopup = () => {
+      setContinueTaskPopup({ show: false, data: {} });
+    };

-  return (
-    <div
-      className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
-        className || ""
-      }`}
-    >
-      {loader ? (
-        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-          <LoadingSpinner size={16} color="sky-blue" />
-        </div>
-      ) : (
-        <>
-          {filteredFamilyData && (
-            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
-              <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-                <tbody>
-                  {currentTask.map((value) => {
-                    const addedDate = value?.added.split(" ")[0];
-                    const selectedImage = require(`../../../assets/images/family/${
-                      value?.banner || "default.jpg"
-                    }`);
-                    return (
-                      <tr
-                        className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
-                        key={value.uid}
-                      >
-                        <td className="py-4">
-                          <div className="w-full flex justify-between items-center">
-                            <div className="account-name flex space-x-4 items-center">
-                              <div className="icon w-14 h-14 flex justify-center items-center">
-                                <img
-                                  src={selectedImage}
-                                  alt="task_img"
-                                  className="w-full object-cover"
-                                />
+    return (
+      <div
+        className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
+          className || ""
+        }`}
+      >
+        {loader ? (
+          <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
+            <LoadingSpinner size={16} color="sky-blue" />
+          </div>
+        ) : (
+          <>
+            {filteredFamilyData && (
+              <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
+                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                  <tbody>
+                    {currentTask.map((value) => {
+                      const addedDate = value?.added.split(" ")[0];
+                      const selectedImage = require(`../../../assets/images/family/${
+                        value?.banner || "default.jpg"
+                      }`);
+                      return (
+                        <tr
+                          className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
+                          key={value.uid}
+                        >
+                          <td className="py-4">
+                            <div className="w-full flex justify-between items-center">
+                              <div className="account-name flex space-x-4 items-center">
+                                <div className="icon w-14 h-14 flex justify-center items-center">
+                                  <img
+                                    src={selectedImage}
+                                    alt="task_img"
+                                    className="w-full object-cover"
+                                  />
+                                </div>
+                                <div className="">
+                                  <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
+                                    {value.title}
+                                  </p>
+                                  <p className="text-sm text-thin-light-gray font-medium">
+                                    {value.description}
+                                  </p>
+                                </div>
                              </div>
-                              <div className="">
-                                <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
-                                  {value.title}
+                              <div className="px-2 flex flex-col items-center justify-center">
+                                <p className="text-sm font-bold text-dark-gray dark:text-white">
+                                  {addedDate}
                                </p>
-                                <p className="text-sm text-thin-light-gray font-medium">
-                                  {value.description}
+                                <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
+                                  {value.status_text}
                                </p>
                              </div>
                            </div>
-                            <div className="px-2 flex flex-col items-center justify-center">
-                              <p className="text-sm font-bold text-dark-gray dark:text-white">
-                                {addedDate}
-                              </p>
-                              <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
-                                {value.status_text}
-                              </p>
-                            </div>
-                          </div>
-                        </td>
-                        <td className="text-right py-4 px-2">
-                          <button
-                            onClick={() => openPopUp(value)}
-                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                          >
-                            View
-                          </button>
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-              <PaginatedList
-                onClick={handlePagination}
-                prev={currentPage === 0}
-                next={currentPage + itemsPerPage >= filteredFamilyData?.length}
-                data={filteredFamilyData}
-                start={indexOfFirstItem}
-                stop={indexOfLastItem}
-              />
-            </div>
-          )}
-        </>
-      )}
-      {popUp.show && (
-        <SuggestTask
-          details={popUp.data}
-          onClose={closePopUp}
-          continuePopupData={openContinueTaskPopup}
-          situation={popUp.show}
-        />
-      )}
+                          </td>
+                          <td className="text-right py-4 px-2">
+                            <button
+                              onClick={() => openPopUp(value)}
+                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                            >
+                              View
+                            </button>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+                <PaginatedList
+                  onClick={handlePagination}
+                  prev={currentPage === 0}
+                  next={
+                    currentPage + itemsPerPage >= filteredFamilyData?.length
+                  }
+                  data={filteredFamilyData}
+                  start={indexOfFirstItem}
+                  stop={indexOfLastItem}
+                />
+              </div>
+            )}
+          </>
+        )}
+        {popUp.show && (
+          <SuggestTask
+            details={popUp.data}
+            onClose={closePopUp}
+            continuePopupData={openContinueTaskPopup}
+            situation={popUp.show}
+          />
+        )}

-      {continueTaskPopup.show && (
-        <AssignTaskPopout
-          details={continueTaskPopup.data}
-          action={closeContinueTaskPopup}
-          situation={continueTaskPopup.show}
-        />
-      )}
-    </div>
-  );
-});
+        {continueTaskPopup.show && (
+          <AssignTaskPopout
+            details={continueTaskPopup.data}
+            action={closeContinueTaskPopup}
+            situation={continueTaskPopup.show}
+          />
+        )}
+      </div>
+    );
+  }
+);

 export default FamilyWaitlist;
@@ -63,7 +63,7 @@ export default function InputCom({
              </span>
            )}
            {/* displays error is any */}
-            {error && <span className="text-[12px] text-red-500">{error}</span>} 
+            {error && <span className="text-[12px] text-red-500 italic">{error}</span>} 
          </label>
        )}
        {forgotPassword && (
@@ -97,7 +97,7 @@ export default function InputCom({
          dir={direction}
        />
        {iconName && (
-          <div className="absolute right-6 bottom-[10px] z-10 flex gap-2">
+          <div className="absolute right-6 bottom-3 z-10 flex gap-2">
            {iconName.split(" ").map((item, index) => (
              <Icons key={index} name={item} />
            ))}
@@ -105,7 +105,7 @@ export default function InputCom({
        )}
        {passIcon && (
          <div
-            className="absolute right-6 bottom-[10px] z-10"
+            className="absolute right-6 bottom-3 z-10"
            onClick={onClick}
          >
            <Icons name={passIcon} />
@@ -1,11 +1,18 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import ModalCom from "../../Helpers/ModalCom";
+import { useMemo, useState } from "react";
 import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
-import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import ModalCom from "../../Helpers/ModalCom";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";

 const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
+  const [textValue, setTextValue] = useState("");
+  const apiCall = useMemo(() => new usersService(), []);
+
+  const handleInputChange = ({ target: { value } }) => {
+    setTextValue(value);
+  };
+
  const MarketCalls = (details) => {
    const [marketMsg, setMarketMsg] = useState({
      loading: false,
@@ -24,8 +31,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {

    const MarketDetail = async () => {
      try {
-        setMarketMsg({ loading: true });
        if (!textValue) return;
+        setMarketMsg({ loading: true });

        reqData.yourmessage = textValue;

@@ -87,22 +94,11 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
      }
    };

-    // useEffect(() => {
-    //   ManageInterest();
-    // }, []);
-
    return { MarketDetail, ManageInterest, manageInt, marketMsg };
  };

-  const [textValue, setTextValue] = useState("");
-
-  const handleInputChange = ({ target: { value } }) => {
-    setTextValue(value);
-  };
-
-  const apiCall = useMemo(() => new usersService(), []);
-
-  let { manageInt, ManageInterest, MarketDetail, marketMsg } = MarketCalls(details);
+  let { manageInt, ManageInterest, MarketDetail, marketMsg } =
+    MarketCalls(details);

  let thePrice = PriceFormatter(
    details?.price * 0.01,
@@ -270,9 +266,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                  Interest: <b className="ml-1">{details.interest_count}</b>
                </p>
                <hr />
-                <p className="my-1">
-                  Expire: {details.expire}
-                </p>
+                <p className="my-1">Expire: {details.expire}</p>
              </div>
            </div>
            <button
@@ -1,48 +1,52 @@
-import React, {useState} from 'react'
-import RecentActivityTable from './WalletComponent/RecentActivityTable'
-import LoadingSpinner from '../Spinners/LoadingSpinner'
-import { useNavigate, useLocation } from 'react-router-dom'
-import InputCom from '../Helpers/Inputs/InputCom'
+import React, { useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import InputCom from "../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import RecentActivityTable from "./WalletComponent/RecentActivityTable";

-import AddFundDollars from './AddFundDollars'
+import AddFundDollars from "./AddFundDollars";

-function AddFund({payment}) {
-   
-    const navigate = useNavigate()
-    const {currency} = useLocation()?.state //GETS THE USER CURRENCY FOR ADD FUND
+function AddFund({ payment }) {
+  const navigate = useNavigate();
+  const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND

-    //STATE FOR CONTROLLED INPUT
-    let [input, setInput] = useState('')
+  //STATE FOR CONTROLLED INPUT
+  let [input, setInput] = useState("");

-    let [inputError, setInputError] = useState('')
+  let [inputError, setInputError] = useState("");

-    // FUNCTION TO HANDLE INPUT CHANGE
-    const handleChange = ({target:{name, value}}) => {
-        setInput(value)
+  // FUNCTION TO HANDLE INPUT CHANGE
+  const handleChange = ({ target: { name, value } }) => {
+    setInput(value);
+  };
+
+  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = () => {
+    setInputError("");
+    if (!input || input == "0") {
+      setInputError("Please Enter Amount");
+      return setTimeout(() => {
+        setInputError("");
+      }, 5000);
    }

-    //FUNCTION TO HANDLE SUBMIT
-    const handleSubmit = () => {
-        setInputError('')
-        if(!input || input == '0'){
-            setInputError('Please Enter Amount')
-            return setTimeout(()=>{setInputError('')}, 5000)
-        }
-
-        if(isNaN(input)){
-            setInputError('Amount must be a Number')
-            return setTimeout(()=>{setInputError('')}, 5000)
-        }
-
-        const stateData = {amount: Number(input), currency: 'naira'}
-        navigate('confirm-add-fund', {state: stateData})
-     
-        setInput('')
+    if (isNaN(input)) {
+      setInputError("Amount must be a Number");
+      return setTimeout(() => {
+        setInputError("");
+      }, 5000);
    }
-    return (
-        <div>
-            {/* heading */}
-            {/* <div className="sm:flex justify-between items-center mb-6">
+
+    const stateData = { amount: Number(input), currency: "naira" };
+    navigate("confirm-add-fund", { state: stateData });
+
+    setInput("");
+  };
+  
+  return (
+    <div>
+      {/* heading */}
+      {/* <div className="sm:flex justify-between items-center mb-6">
                <div className="w-full flex justify-start space-x-3 items-center">
                    <button
                    type="button"
@@ -73,68 +77,78 @@ function AddFund({payment}) {
                </div>
            </div> */}

-            <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-                <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
-                    <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
-                        {/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
-                        {/*<hr />*/}
-                        <form className='md:p-8 p-4 add-fund-info'>
-                            <div className="field w-full mb-6">
-                                <InputCom
-                                    fieldClass="px-6"
-                                    label={currency == 'US Dollars' ? "Amount (USD)" : "Amount (Naira)"}
-                                    type="text"
-                                    name="amount"
-                                    placeholder="0"
-                                    value={input}
-                                    inputHandler={handleChange}
-                                />
-                                {inputError && <p className='text-base text-red-500'>{inputError}</p>}
-                            </div>
-                        </form>
-                        <hr />
+      <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+        <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
+          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
+            {/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
+            {/*<hr />*/}
+            <form className="md:p-8 p-4 add-fund-info">
+              <div className="field w-full mb-6">
+                <InputCom
+                  fieldClass="px-6"
+                  label={
+                    currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"
+                  }
+                  type="text"
+                  name="amount"
+                  placeholder="0"
+                  value={input}
+                  inputHandler={handleChange}
+                />
+                {inputError && (
+                  <p className="text-base text-red-500">{inputError}</p>
+                )}
+              </div>
+            </form>
+            <hr />

-                        {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
-                        {currency == 'US Dollars' &&
-                        <div className='w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow'>
-                            <AddFundDollars setInputError={setInputError} input={input} setInput={setInput} />
-                        </div>
-                        }
+            {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
+            {currency == "US Dollars" && (
+              <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
+                <AddFundDollars
+                  setInputError={setInputError}
+                  input={input}
+                  setInput={setInput}
+                />
+              </div>
+            )}

-                        {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
-                        {currency != 'US Dollars' &&
-                        <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
-                            <button
-                                onClick={handleSubmit}
-                                type="button"
-                                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                            >
-                                <span className="text-white">Continue</span>
-                            </button>
-                        </div>
-                        }
-                    </div>
-                </div>
-            </div>
-
-            {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
-            {currency != 'US Dollars' &&
-            <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-                <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
-                    <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
-                        <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
-                        {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
-                        {payment.loading ?
-                            <LoadingSpinner size='16' color='sky-blue' />
-                            :
-                            <RecentActivityTable  payment={payment}/>
-                        }
-                    </div>
-                </div>
-            </div>
-            }          
+            {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
+            {currency != "US Dollars" && (
+              <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
+                <button
+                  onClick={handleSubmit}
+                  type="button"
+                  className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                >
+                  <span className="text-white">Continue</span>
+                </button>
+              </div>
+            )}
+          </div>
        </div>
-      )
+      </div>
+
+      {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
+      {currency != "US Dollars" && (
+        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+          <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
+            <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
+              <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
+                Recent Activity
+              </h2>
+              {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
+              {payment.loading ? (
+                <LoadingSpinner size="16" color="sky-blue" />
+              ) : (
+                <RecentActivityTable payment={payment} />
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
 }

-export default AddFund
+export default AddFund;
@@ -2,45 +2,46 @@ import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import usersService from "../../services/UsersService";
 import InputCom from "../Helpers/Inputs/InputCom";
-import { handlePagingFunc } from "../Pagination/HandlePagination";
 import LoadingSpinner from "../Spinners/LoadingSpinner";

 import { Form, Formik } from "formik";
+import { useSelector } from "react-redux";
 import * as Yup from "yup";
+import Icons from "../Helpers/Icons";

 const validationSchema = Yup.object().shape({
  name: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(50, "Maximum 50 characters")
-    .required("Name is required"),
+    .min(3, "3 chars min.")
+    .max(50, "50 chars max.")
+    .required("required"),
  cardNum: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
-    .required("Card Number is required"),
+    .min(3, "3 chars min.")
+    .max(25, "25 chars max.")
+    .required("required"),
  code: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
-    .required("Postal Code is required"),
+    .min(3, "3 chars min.")
+    .max(25, "25 chars max.")
+    .required("required"),
  state: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
-    .required("State is required"),
+    .min(3, "3 chars min.")
+    .max(25, "25 chars max.")
+    .required("required"),
  address: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(50, "Maximum 50 characters")
-    .required("Address is required"),
+    .min(3, "3 chars min.")
+    .max(50, "50 chars max.")
+    .required("required"),
  expirationYear: Yup.string()
-    .min(4, "Minimum 4 characters")
-    .max(4, "Maximum 4 characters")
-    .required("Expiration Year is required"),
+    .min(4, "4 chars min.")
+    .max(4, "4 chars max.")
+    .required("required"),
  expirationMonth: Yup.string()
-    .min(1, "Minimum 1 characters")
-    .max(2, "Maximum 2 characters")
-    .required("Expiration Month is required"),
+    .min(1, "1 chars min.")
+    .max(2, "2 chars max.")
+    .required("required"),
  cvv: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(4, "Maximum 4 characters")
-    .required("CVV Year is required"),
+    .min(3, "3 chars min.")
+    .max(4, "4 chars max.")
+    .required("required"),
 });

 const initialValues = {
@@ -56,127 +57,177 @@ const initialValues = {

 function AddFundDollars(props) {
  const navigate = useNavigate();
-  let apiCall = new usersService();
+  const apiCall = new usersService();
+  let countryWallet = props.walletItem.country;
+  const [tab, setTab] = useState("previous");
+  const [loader, setLoader] = useState(false);
+  const { userDetails } = useSelector((state) => state?.userDetails);
+  const { firstname, lastname } = userDetails;
+  const [prevCardDetails, setPrevCardDetails] = useState({});
+  const [payListCards, setPayListCards] = useState({ loading: true, data: [] });

-  let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    setPrevCardDetails((prevState) => ({
+      ...prevState,
+      [name]: value,
+    }));
+  };

-  let [prevCardDetails, setPrevCardDetails] = useState(null); // STATE TO HOLD PREVIOUS CARD SELECTED
-
-  let [payListCard, setPayListCard] = useState({ loading: true, data: [] }); //USER PREVIOUS CARDS
-
-  const [currentPage, setCurrentPage] = useState(0);
-  const indexOfFirstItem = Number(currentPage);
+  const indexOfFirstItem = 0;
  const indexOfLastItem =
-    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentPreviousCards = payListCard?.data?.slice(
+    indexOfFirstItem + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentPreviousCards = payListCards?.data?.slice(
    indexOfFirstItem,
    indexOfLastItem
  );

-  const handlePagination = (e) => {
-    handlePagingFunc(e, setCurrentPage);
-  };
-
-  // FUNCTION TO SUBMIT
-  const handleSubmit = (values, helpers) => {
+  const handleSubmit = async (values, helpers) => {
    props.setInputError("");
-    if (!props.input || props.input == "0") {
+    if (!props.input || props.input === "0") {
      props.setInputError("Please Enter Amount");
-      return setTimeout(() => {
-        props.setInputError("");
-      }, 5000);
+      return;
    }

    if (isNaN(props.input)) {
      props.setInputError("Amount must be a Number");
+      return;
+    }
+
+    if (tab === "previous") {
+      if (!prevCardDetails) {
+        return;
+      }
+      setLoader(true);
+      let stateData = {
+        amount: Number(props.input) * 100,
+        currency: props.walletItem?.code,
+      };
+
+      try {
+        const res = await apiCall.getStartCredit(stateData);
+        if (res.data.internal_return < 0) {
+          setLoader(false);
+          props.setInputError("An Error Occurred");
+          setTimeout(() => props.setInputError(""), 5000);
+          return;
+        }
+
+        const _response = res.data;
+        stateData.amount = Number(props.input);
+        stateData.card = prevCardDetails["payment-card"];
+        stateData.cardType = "prev";
+        stateData = { ...stateData, ..._response };
+
+        setTimeout(() => {
+          setLoader(false);
+          props.setConfirmCredit({
+            show: true,
+            data: stateData,
+          });
+        }, 1500);
+      } catch (error) {
+        console.log(error);
+      }
+
      return setTimeout(() => {
-        props.setInputError("");
-      }, 5000);
+        props.setConfirmCredit({ show: true, data: stateData });
+        setLoader(false);
+      }, 1500);
    }
-    if (tab == "previous") {
-      const stateData = { amount: Number(props.input), currency: "dollars" };
-      navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
-    }
-    if (tab == "new") {
+
+    if (tab === "new") {
      const stateData = {
        amount: Number(props.input),
-        currency: "dollars",
+        currency: props.currency,
        ...values,
      };
-      navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
    }
-    props.setInput("");
  };

  useEffect(() => {
    apiCall
      .payListCard()
      .then((res) => {
-        setPayListCard({ loading: false, data: res.data.result_list });
+        setPayListCards({ loading: false, data: res.data.result_list });
      })
      .catch((err) => {
        console.log("PAYCARDLIST ERROR", err);
-        setPayListCard({ loading: false, data: [] });
+        setPayListCards({ loading: false, data: [] });
      });
  }, []);

+  const handleClose = props.onClose;
+
  return (
    <>
      <div className="w-full">
        {/* switch button */}
-        <div className="my-1 flex items-center gap-2">
-          <label
-            onClick={() => setTab("previous")}
-            htmlFor="previous"
-            className="cursor-pointer flex items-center gap-1"
-          >
-            <input
-              type="radio"
-              id="previous"
-              name="card-option"
-              checked={tab === "previous"}
-              className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
-                tab == "previous" ? "" : ""
-              } tracking-wide transition duration-200`}
-            />
-            Previous Cards
-          </label>
-          <label
-            onClick={() => setTab("new")}
-            htmlFor="new"
-            className="cursor-pointer flex items-center gap-1"
-          >
-            <input
-              id="new"
-              type="radio"
-              name="card-option"
-              checked={tab === "new"}
-              className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
-                tab == "new" ? "" : ""
-              }  tracking-wide transition duration-200`}
-            />
-            Add New Card
-          </label>
+        <div className="flex">
+          <form className="add-fund-info flex items-center gap-3">
+            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+              {countryWallet == "US" && "Payment Method"}
+            </h1>
+            <div className="my-1 flex items-center gap-2">
+              <label
+                onClick={() => setTab("previous")}
+                htmlFor="previous"
+                className="cursor-pointer flex items-center gap-1"
+              >
+                <input
+                  type="radio"
+                  id="previous"
+                  name="card-option"
+                  checked={tab === "previous"}
+                  className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
+                    tab == "previous" ? "" : ""
+                  } tracking-wide transition duration-200`}
+                />
+                Previous Cards
+              </label>
+              <label
+                onClick={() => setTab("new")}
+                htmlFor="new"
+                className="cursor-pointer flex items-center gap-1"
+              >
+                <input
+                  id="new"
+                  type="radio"
+                  name="card-option"
+                  checked={tab === "new"}
+                  className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${
+                    tab == "new" ? "" : ""
+                  }  tracking-wide transition duration-200`}
+                />
+                Add New Card
+              </label>
+            </div>
+          </form>
        </div>
+        <hr />
        {/* END OF switch button */}

        {/* previous tab */}
-        {tab == "previous" ? (
-          <div className="p-4 previous-details w-full min-h-[177px] flex flex-col justify-between items-center">
-            {payListCard.loading ? (
+        {tab === "previous" ? (
+          <div className="p-4 previous-details w-full min-h-[16rem] flex flex-col justify-between items-center">
+            {payListCards.loading ? (
              <LoadingSpinner size="10" color="sky-blue" />
-            ) : payListCard?.data?.length ? (
-              <select className="my-3 w-full rounded-full p-4 outline-none border-none">
+            ) : payListCards?.data?.length ? (
+              <select
+                className="my-3 w-full rounded-full p-2 outline-none text-base text-black dark:text-gray-100 bg-[#FAFAFA] dark:bg-[#11131F] border"
+                value={prevCardDetails["payment-card"]?.card_uid}
+                id="payment-card"
+                name="payment-card"
+                onChange={handleInputChange}
+              >
                <option value="">Select a card</option>
                {currentPreviousCards.map((item, index) => (
-                  <option key={index} className={index != 0 && "border-t-2"}>
+                  <option
+                    key={index}
+                    className={index !== 0 && "border-t-2"}
+                    value={JSON.stringify(item)}
+                  >
                    <div className="my-2 flex items-center gap-5">
-                      {/* <input
-                            type="radio"
-                            className="w-8 h-8"
-                            name="card"
-                            value="value"
-                          /> */}
                      <div className="card-details">
                        <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
                          {item.description} Card
@@ -184,25 +235,8 @@ function AddFundDollars(props) {
                        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
                          Bank **************{item.digits}
                        </p>
-                        {/* <div className="w-full sm:flex items-center gap-5">
-                          <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
-                            {item.added}
-                          </p>
-                          <p className="text-sm font-bold text-green-700 dark:text-white tracking-wide">
-                            Verified
-                          </p>
-                        </div> */}
                      </div>
                    </div>
-                    {/* <td>
-                        <button
-                          // onClick={handleSubmit}
-                          type="button"
-                          className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                        >
-                          <span className="text-white">Manage</span>
-                        </button>
-                      </td> */}
                  </option>
                ))}
              </select>
@@ -220,26 +254,9 @@ function AddFundDollars(props) {
                </button>
              </div>
            )}
-            {/* PAGINATION BUTTON */}
-            {/* <div className="w-full">
-              <PaginatedList
-                onClick={handlePagination}
-                prev={currentPage == 0 ? true : false}
-                next={
-                  currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-                  payListCard?.data?.length
-                    ? true
-                    : false
-                }
-                data={payListCard?.data}
-                start={indexOfFirstItem}
-                stop={indexOfLastItem}
-              />
-            </div> */}
-            {/* END OF PAGINATION BUTTON */}
          </div>
        ) : (
-          <div className="new-details w-full max-h-[19.063rem] overflow-y-scroll">
+          <div className="new-details w-full max-h-[23rem]">
            <div className="w-full flex flex-col justify-between">
              <Formik
                initialValues={initialValues}
@@ -248,142 +265,135 @@ function AddFundDollars(props) {
              >
                {(props) => {
                  return (
-                    <Form>
+                    <Form className="md:pl-8">
                      <div className="flex flex-col-reverse sm:flex-row">
                        <div className="flex-1 sm:mr-10">
                          <div className="fields w-full">
-                            {/* inputs starts here */}
+                            {/* Inputs */}
                            {/* Name */}
-                            <div className="field w-full my-6">
-                              <InputCom
-                                fieldClass="px-6"
-                                spanTag="*"
-                                label="Name on Card"
-                                type="text"
-                                name="name"
-                                placeholder="DUMMY NAME"
-                                value={props.values.name}
-                                inputHandler={props.handleChange}
-                                blurHandler={props.handleBlur}
-                              />
-                              {props.errors.name && props.touched.name && (
-                                <p className="text-sm text-red-500">
-                                  {props.errors.name}
-                                </p>
-                              )}
+                            <div className="flex items-center field w-full my-2 flex-[0.4] gap-3">
+                              <label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
+                                Name:
+                              </label>
+                              <p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
                            </div>

-                            {/* CARD NUMBER */}
-                            <div className="field w-full mb-6">
-                              <InputCom
-                                fieldClass="px-6"
-                                spanTag="*"
-                                iconName="master-card visa-card atm-card"
-                                label="Card Number"
-                                type="text"
-                                name="cardNum"
-                                placeholder="Enter Card Number"
-                                value={props.values.cardNum}
-                                inputHandler={props.handleChange}
-                                blurHandler={props.handleBlur}
-                              />
-                              {props.errors.cardNum &&
-                                props.touched.cardNum && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.cardNum}
-                                  </p>
-                                )}
+                            <div className="flex items-center flex-1 gap-3 my-2">
+                              {/* Card Number */}
+                              <div className="field w-full flex-[0.6]">
+                                <InputCom
+                                  fieldClass="px-6"
+                                  spanTag="*"
+                                  iconName="master-card visa-card atm-card"
+                                  label="Card Number"
+                                  type="text"
+                                  name="cardNum"
+                                  placeholder="Enter Card Number"
+                                  value={props.values.cardNum}
+                                  inputHandler={props.handleChange}
+                                  blurHandler={props.handleBlur}
+                                  error={props.errors.cardNum}
+                                />
+                              </div>
+                              {/* Expire Year, Year */}
+                              <div className="sm:grid gap-5 grid-cols-2 flex-[0.4]">
+                                <div className="field w-full mb-6 xl:mb-0 col-span-1">
+                                  <div className="select-option">
+                                    <div
+                                      className={`flex items-center justify-between mb-2.5`}
+                                    >
+                                      <label
+                                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
+                                        htmlFor="expiration"
+                                      >
+                                        Exp Month{" "}
+                                        <span className="text-red-700 text-sm italic">
+                                          *
+                                        </span>
+                                        <span className="text-[12px] text-red-500 ml-1">
+                                          {props.errors.expirationMonth && "**"}
+                                        </span>
+                                      </label>
+                                    </div>
+                                    <div
+                                      className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
+                                    >
+                                      <select
+                                        className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
+                                        value={props.values.expirationMonth}
+                                        onChange={props.handleChange}
+                                        onBlur={props.handleBlur}
+                                        name="expirationMonth"
+                                      >
+                                        <option
+                                          value=""
+                                          className="text-dark-gray"
+                                        >
+                                          Month
+                                        </option>
+                                        {expireMonth?.length &&
+                                          expireMonth.map((item, index) => (
+                                            <option
+                                              key={index}
+                                              value={item.value}
+                                            >
+                                              {item.name}
+                                            </option>
+                                          ))}
+                                      </select>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div className="field w-full mb-6 xl:mb-0 col-span-1">
+                                  <div className="select-option">
+                                    <div
+                                      className={`flex items-center justify-between mb-2.5`}
+                                    >
+                                      <label
+                                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center line-clamp-3"
+                                        htmlFor="expiration"
+                                      >
+                                        Exp Year{" "}
+                                        <span className="text-red-700 text-sm tracking-wide">
+                                          *
+                                        </span>
+                                        <span className="text-[12px] text-red-500 italic">
+                                          {props.errors.expirationYear && "**"}
+                                        </span>
+                                      </label>
+                                    </div>
+                                    <div
+                                      className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
+                                    >
+                                      <select
+                                        className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none`}
+                                        value={props.values.expirationYear}
+                                        onChange={props.handleChange}
+                                        onBlur={props.handleBlur}
+                                        name="expirationYear"
+                                      >
+                                        <option
+                                          value=""
+                                          className="text-dark-gray"
+                                        >
+                                          Year
+                                        </option>
+                                        {expireYear?.length &&
+                                          expireYear.map((item, index) => (
+                                            <option key={index} value={item}>
+                                              {item}
+                                            </option>
+                                          ))}
+                                      </select>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
                            </div>
-                            {/* EXPIRE YEAR, YEAR AND CVV */}
-                            <div className="sm:grid gap-5 grid-cols-3 mb-6">
-                              <div className="field w-full mb-6 xl:mb-0 col-span-1">
-                                <div className="select-option">
-                                  <div
-                                    className={`flex items-center justify-between mb-2.5`}
-                                  >
-                                    <label
-                                      className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
-                                      htmlFor="expiration"
-                                    >
-                                      Expiration Month{" "}
-                                      <span className="text-red-700 text-sm tracking-wide">
-                                        *
-                                      </span>
-                                    </label>
-                                  </div>
-                                  <div
-                                    className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
-                                  >
-                                    <select
-                                      className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#f5f8fa] focus:ring-0 focus:outline-none`}
-                                      value={props.values.expirationMonth}
-                                      onChange={props.handleChange}
-                                      onBlur={props.handleBlur}
-                                      name="expirationMonth"
-                                    >
-                                      <option value="">Select...</option>
-                                      {expireMonth?.length &&
-                                        expireMonth.map((item, index) => (
-                                          <option
-                                            key={index}
-                                            value={item.value}
-                                          >
-                                            {item.name}
-                                          </option>
-                                        ))}
-                                    </select>
-                                  </div>
-                                </div>
-                                {props.errors.expirationMonth &&
-                                  props.touched.expirationMonth && (
-                                    <p className="text-sm text-red-500">
-                                      {props.errors.expirationMonth}
-                                    </p>
-                                  )}
-                              </div>
-                              <div className="field w-full mb-6 xl:mb-0 col-span-1">
-                                <div className="select-option">
-                                  <div
-                                    className={`flex items-center justify-between mb-2.5`}
-                                  >
-                                    <label
-                                      className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
-                                      htmlFor="expiration"
-                                    >
-                                      Expiration Year{" "}
-                                      <span className="text-red-700 text-sm tracking-wide">
-                                        *
-                                      </span>
-                                    </label>
-                                  </div>
-                                  <div
-                                    className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
-                                  >
-                                    <select
-                                      className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#f5f8fa] focus:ring-0 focus:outline-none`}
-                                      value={props.values.expirationYear}
-                                      onChange={props.handleChange}
-                                      onBlur={props.handleBlur}
-                                      name="expirationYear"
-                                    >
-                                      <option value="">Select...</option>
-                                      {expireYear?.length &&
-                                        expireYear.map((item, index) => (
-                                          <option key={index} value={item}>
-                                            {item}
-                                          </option>
-                                        ))}
-                                    </select>
-                                  </div>
-                                </div>
-                                {props.errors.expirationYear &&
-                                  props.touched.expirationYear && (
-                                    <p className="text-sm text-red-500">
-                                      {props.errors.expirationYear}
-                                    </p>
-                                  )}
-                              </div>
-                              <div className="field w-full col-span-1">
+
+                            <div className="flex items-center flex-1 gap-3 my-2">
+                              {/* Address and CVV */}
+                              <div className="field w-full col-span-1 flex-[0.4]">
                                <InputCom
                                  fieldClass="px-6"
                                  spanTag="*"
@@ -395,36 +405,27 @@ function AddFundDollars(props) {
                                  value={props.values.cvv}
                                  inputHandler={props.handleChange}
                                  blurHandler={props.handleBlur}
+                                  error={props.errors.cvv}
+                                />
+                              </div>
+                              <div className="field w-full flex-[0.6]">
+                                <InputCom
+                                  fieldClass="px-6"
+                                  spanTag="*"
+                                  label="Billing Address"
+                                  type="text"
+                                  name="address"
+                                  placeholder="Billing Address"
+                                  value={props.values.Address}
+                                  inputHandler={props.handleChange}
+                                  blurHandler={props.handleBlur}
+                                  error={props.errors.address}
                                />
-                                {props.errors.cvv && props.touched.cvv && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.cvv}
-                                  </p>
-                                )}
                              </div>
                            </div>
-                            {/* Address */}
-                            <div className="field w-full my-6">
-                              <InputCom
-                                fieldClass="px-6"
-                                spanTag="*"
-                                label="Billing Address"
-                                type="text"
-                                name="address"
-                                placeholder="Billing Address"
-                                value={props.values.Address}
-                                inputHandler={props.handleChange}
-                                blurHandler={props.handleBlur}
-                              />
-                              {props.errors.address &&
-                                props.touched.address && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.address}
-                                  </p>
-                                )}
-                            </div>
-                            {/* postal code and state */}
-                            <div className="sm:grid gap-5 grid-cols-3 mb-6">
+
+                            {/* Postal Code and State */}
+                            <div className="sm:grid gap-5 grid-cols-3 my-2">
                              <div className="field w-full mb-6 xl:mb-0 col-span-1">
                                <InputCom
                                  fieldClass="px-6"
@@ -436,12 +437,8 @@ function AddFundDollars(props) {
                                  value={props.values.code}
                                  inputHandler={props.handleChange}
                                  blurHandler={props.handleBlur}
+                                  error={props.errors.code}
                                />
-                                {props.errors.code && props.touched.code && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.code}
-                                  </p>
-                                )}
                              </div>
                              <div className="field w-full col-span-1">
                                <InputCom
@@ -454,59 +451,33 @@ function AddFundDollars(props) {
                                  value={props.values.state}
                                  inputHandler={props.handleChange}
                                  blurHandler={props.handleBlur}
+                                  error={props.errors.state}
                                />
-                                {props.errors.state && props.touched.state && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.state}
-                                  </p>
-                                )}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

-                      {/* <div className="w-full">
-                                {requestStatus.message != "" && (
-                                <p
-                                    className={`text-center text-base ${
-                                    requestStatus.status ? "text-green-800" : "text-red-600"
-                                    }`}
-                                >
-                                    {requestStatus.message}
-                                </p>
-                                )}
-                                <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                                <div className="flex items-center space-x-4 mr-9">
-                                    <Link
-                                    to="/"
-                                    className="text-18 text-light-red tracking-wide "
-                                    >
-                                    <span className="border-b dark:border-[#5356fb29]  border-light-red">
-                                        {" "}
-                                        Cancel
-                                    </span>
-                                    </Link>
-
-                                    {requestStatus.loading ? (
-                                    <LoadingSpinner size="8" color="sky-blue" />
-                                    ) : (
-                                    <button
-                                        type="submit"
-                                        className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                    >
-                                        Update Profile
-                                    </button>
-                                    )}
-                                </div>
-                                </div>
-                            </div> */}
-                      <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
+                      <div className="md:px-8 md:pt-4 px-4 pt-2 add-fund-btn flex justify-end items-center gap-3">
+                        <button
+                          className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
+                          onClick={handleClose}
+                        >
+                          Cancel
+                        </button>
                        <button
                          type="submit"
-                          className="py-1 px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                          className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
                        >
-                          <span className="text-white">Continue</span>
+                          {loader ? (
+                            <LoadingSpinner size="6" color="sky-blue" />
+                          ) : (
+                            <>
+                              <span className="text-white">Continue</span>{" "}
+                              <Icons name="chevron-right" />
+                            </>
+                          )}
                        </button>
                      </div>
                    </Form>
@@ -518,13 +489,23 @@ function AddFundDollars(props) {
        )}
      </div>
      {tab == "previous" && (
-        <div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center py-4">
+        <div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center gap-4 py-4">
+          <button
+            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
+            onClick={props.onClose}
+          >
+            Cancel
+          </button>
          <button
            onClick={handleSubmit}
            type="button"
-            className="px-4 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
          >
-            <span className="text-white">Continue</span>
+            {loader ? (
+              <LoadingSpinner size="6" color="sky-blue" />
+            ) : (
+              <span className="text-white">Continue</span>
+            )}
          </button>
        </div>
      )}
@@ -1,127 +1,147 @@
 import React, { useState } from "react";
-import RecentActivityTable from "./WalletComponent/RecentActivityTable";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useNavigate } from "react-router-dom";
+import usersService from "../../services/UsersService";
+import Icons from "../Helpers/Icons";
 import InputCom from "../Helpers/Inputs/InputCom";
-
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 import AddFundDollars from "./AddFundDollars";

-function AddFundPop({ _payment }) {
+function AddFundPop({
+  _payment,
+  input,
+  setInput,
+  onClose,
+  setConfirmCredit,
+  walletItem,
+}) {
  const navigate = useNavigate();
-  //   const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
+  const apiCall = new usersService();
+  let countryWallet = walletItem?.country;
+  const { payment, currency } = _payment;

-  let { payment, currency } = _payment;
+  const [inputError, setInputError] = useState("");
+  const [loader, setLoader] = useState(false);

-  //STATE FOR CONTROLLED INPUT
-  let [input, setInput] = useState("");
-
-  let [inputError, setInputError] = useState("");
-
-  // FUNCTION TO HANDLE INPUT CHANGE
  const handleChange = ({ target: { name, value } }) => {
    setInput(value);
  };

-  //FUNCTION TO HANDLE SUBMIT
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
    setInputError("");
-    if (!input || input == "0") {
+    setLoader(true);
+
+    if (!input || input === "0") {
+      setLoader(false);
      setInputError("Please Enter Amount");
-      return setTimeout(() => {
-        setInputError("");
-      }, 5000);
+      setTimeout(() => setInputError(""), 5000);
+      return;
    }

    if (isNaN(input)) {
+      setLoader(false);
      setInputError("Amount must be a Number");
-      return setTimeout(() => {
-        setInputError("");
-      }, 5000);
+      setTimeout(() => setInputError(""), 5000);
+      return;
    }

-    const stateData = { amount: Number(input), currency: "naira" };
-    navigate("confirm-add-fund", { state: stateData });
+    let stateData = {
+      amount: Number(input) * 100,
+      currency: walletItem?.code,
+    };

-    setInput("");
+    try {
+      const res = await apiCall.getStartCredit(stateData);
+      if (res.data.internal_return < 0) {
+        setLoader(false);
+        setInputError("An Error Occurred");
+        setTimeout(() => setInputError(""), 5000);
+        return;
+      }
+
+      const _response = res.data;
+      stateData.amount = Number(input);
+      stateData.currency = currency;
+      stateData = { ...stateData, ..._response };
+
+      setTimeout(() => {
+        setLoader(false);
+        setConfirmCredit({
+          show: true,
+          data: stateData,
+        });
+      }, 1500);
+    } catch (error) {
+      console.log(error);
+    }
  };

-  console.log("walletItem details >>", payment, currency);
-
  return (
-    <div className="h-[36rem] w-full">
+    <div className="h-[33rem] w-full">
      <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
        <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
-            {/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
-            {/*<hr />*/}
-            <form className="md:p-8 p-4 add-fund-info">
-              <div className="field w-full">
+            <form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
+              <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                Amount({currency})
+              </h1>
+              <div className="field w-full max-w-[250px]">
                <InputCom
                  fieldClass="px-6"
-                  label={
-                    currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"
-                  }
                  type="text"
                  name="amount"
                  placeholder="0"
                  value={input}
                  inputHandler={handleChange}
                />
-                {inputError && (
-                  <p className="text-base text-red-500">{inputError}</p>
-                )}
+                <p className="text-base text-red-500 h-5">
+                  {inputError && inputError}
+                </p>
              </div>
            </form>
-            <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
-              {currency == "US Dollars" && "Payment Method"}
-            </h1>
-            <hr />

-            {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
-            {currency == "US Dollars" && (
-              <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl">
+            {countryWallet === "US" && (
+              <div className="w-full md:px-8 md:pt-4 px-4 pt-2 bg-white dark:bg-dark-white rounded-2xl">
                <AddFundDollars
                  setInputError={setInputError}
+                  walletItem={walletItem}
                  input={input}
                  setInput={setInput}
+                  currency={currency}
+                  onClose={onClose}
+                  setConfirmCredit={setConfirmCredit}
                />
              </div>
            )}

-            {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
-            {currency != "US Dollars" && (
-              <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
+            {countryWallet == "NG" && <div className="h-[18rem]"></div>}
+
+            {countryWallet == "NG" && (
+              <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
+                <button
+                  className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  onClick={onClose}
+                >
+                  Cancel
+                </button>
                <button
                  onClick={handleSubmit}
                  type="button"
-                  className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  className="px-4 py-1 h-11 flex justify-center space-x-1 items-center btn-gradient text-base rounded-full text-white max-w-[100px] w-full"
                >
-                  <span className="text-white">Continue</span>
+                  {loader ? (
+                    <LoadingSpinner size="6" color="sky-blue" />
+                  ) : (
+                    <>
+                      <span className="text-white">Continue</span>{" "}
+                      <Icons name="chevron-right" />
+                    </>
+                  )}
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
-
-      {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
-      {currency != "US Dollars" &&
-        // <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-        //   <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
-        //     <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
-        //       <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
-        //         Recent Activity
-        //       </h2>
-        //       {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
-        //       {payment?.loading ? (
-        //         <LoadingSpinner size="16" color="sky-blue" />
-        //       ) : (
-        //         <RecentActivityTable payment={payment} />
-        //       )}
-        //     </div>
-        //   </div>
-        // </div>
-        null}
    </div>
  );
 }
@@ -1,19 +1,21 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useSelector } from "react-redux";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import InputCom from "../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-import RecentActivityTable from "./WalletComponent/RecentActivityTable";

 import usersService from "../../services/UsersService";

 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";

-function ConfirmAddFund({ payment }) {
+function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
+  const __confirmData = confirmCredit?.data;
+  const __confirmCountry = walletItem?.country;
+  const __confirmCardDetails = __confirmData.card
+    ? JSON.parse(__confirmData.card)
+    : "";
  let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS

-  let [pageLoading, setPageLoading] = useState(true);
+  let [confirmLoading, setConfirmLoading] = useState(false);

  let [requestStatus, setRequestStatus] = useState({
    message: "",
@@ -24,12 +26,10 @@ function ConfirmAddFund({ payment }) {
  const apiURL = new usersService();
  const navigate = useNavigate();

-  let { state } = useLocation();
-
  //FUNCTION TO HANDLE SUBMIT
  const onSuccessPayment = () => {
    setRequestStatus({ message: "", loading: true, status: false });
-    let reqData = { amount: state?.account, currency: "NGN" };
+    let reqData = { amount: confirmCredit?.data?.account, currency: "NGN" };
    apiURL
      .startTopUp(reqData)
      .then((res) => {
@@ -47,7 +47,7 @@ function ConfirmAddFund({ payment }) {
          loading: false,
          status: true,
        });
-        toast.success("Account Topup was sucessful");
+        toast.success("Account Topup was successful");
        setTimeout(() => {
          navigate("/my-wallet", { replace: true });
        }, 1000);
@@ -66,7 +66,7 @@ function ConfirmAddFund({ payment }) {
  const config = {
    public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
    tx_ref: Date.now(),
-    amount: state?.amount,
+    amount: confirmCredit?.data?.amount,
    currency: "NGN",
    payment_options: "card,mobilemoney,ussd",
    customer: {
@@ -91,73 +91,143 @@ function ConfirmAddFund({ payment }) {
    onClose: () => {},
  };

-  useEffect(() => {
-    // what happens if not state redirect user
-    if (!state) {
-      navigate("/my-wallet/add-fund", { replace: true });
-    } else {
-      setPageLoading(false);
+  const handlePrevCard = async () => {
+    setConfirmLoading(true);
+    let reqData = {
+      amount: __confirmData.amount * 100,
+      card_uid: __confirmCardDetails.card_uid,
+      credit_reference: __confirmData.credit_reference,
+      currency: __confirmData.currency,
+    };
+
+    try {
+      const res = await apiURL.getPaidPrevCard(reqData);
+      setConfirmLoading(false);
+      console.log(res.data);
+    } catch (error) {
+      setConfirmLoading(false);
+      console.log(error);
    }
-  }, []);
+    console.log("Test me");
+  };
+
+  const ThePaymentText = ({ value }) => (
+    <div className="my-2 flex items-center gap-5">
+      <div className="card-details flex items-center gap-3">
+        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+          {value.description} Card
+        </h1>
+        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
+          Bank **************{value.digits}
+        </p>
+      </div>
+    </div>
+  );
+
+  console.log(confirmCredit);

  return (
-    <div className="content-wrapper w-full">
-      {pageLoading ? (
-        <LoadingSpinner size="8" color="sky-blue" />
-      ) : (
-        <div className="w-full mb-10">
-          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
-            <h2 className="md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-              Confirm Add Fund To Account
-            </h2>
-            <hr />
-            <div className="px-4 md:px-8 py-4 add-fund-info">
-              <div className="field w-full mb-3">
-                <InputCom
-                  fieldClass="px-6"
-                  label={state.currency == 'naira' ? "Amount (Naira):" : "Amount (Dollars):"}
-                  type="text"
-                  name="amount"
-                  value={state.amount || ""}
-                  disable={true}
-                />
-              </div>
-            </div>
+    <div className="content-wrapper w-full h-[32rem]">
+      <div className="w-full mb-10">
+        <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
+          <div className="px-4 md:p-8 py-4 add-fund-info">
+            <div className="field w-full mb-3 min-h-[45px]">
+              {confirmCredit?.show ? (
+                <div className="flex flex-col gap-4">
+                  <div
+                    className={`flex items-center ${
+                      __confirmCountry == "US" ? "gap-14" : "gap-4"
+                    }`}
+                  >
+                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      Amount({__confirmData?.currency})
+                    </h1>
+                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      {`${walletItem?.symbol} ${
+                        Number(__confirmData?.amount).toLocaleString() || ""
+                      }`}
+                    </span>
+                  </div>
+                  {__confirmCountry == "US" && (
+                    <div className="flex items-center gap-8">
+                      <label
+                        htmlFor="payment"
+                        className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
+                      >
+                        {__confirmCountry == "US" && "Payment Method"}
+                      </label>
+                      <span className="text-[#181c32] dark:text-white ">
+                        {__confirmCardDetails ? (
+                          <ThePaymentText value={__confirmCardDetails} />
+                        ) : null}
+                      </span>
+                    </div>
+                  )}

-            <hr />
-            <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
-              {
-                state.currency == 'naira' ?
-                <FlutterWaveButton
-                  {...fwConfig}
-                  className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                />
-              :
-              <button 
-                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                onClick={()=>console.log('WORKING')}
-              >
-                Continue
-              </button>
-              }
+                  <div
+                    className={`${
+                      __confirmCountry == "US" ? "gap-[3.7rem]" : "gap-8"
+                    } flex items-center`}
+                  >
+                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      Reference No
+                    </h1>
+                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      {__confirmData?.credit_reference}
+                    </span>
+                  </div>
+                </div>
+              ) : null}
            </div>
          </div>
+          {/* <hr /> */}
+          <div
+            className={
+              __confirmCountry == "US" ? "min-h-[163px]" : "min-h-[200px]"
+            }
+          ></div>
+          <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
+            <button
+              className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"
+              onClick={onClose}
+            >
+              Cancel
+            </button>
+            {__confirmCountry == "US" && (
+              <button
+                className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full"
+                onClick={
+                  __confirmData?.cardType === "prev"
+                    ? handlePrevCard
+                    : () => console.log("Test me")
+                }
+              >
+                Proceed
+              </button>
+            )}
+            {__confirmCountry == "NG" && (
+              <FlutterWaveButton
+                {...fwConfig}
+                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+              />
+            )}
+          </div>
        </div>
-      )}
+      </div>

-      <div className="w-full mb-10">
-        <div className="wallet w-full  md:p-8 p-4 h-full min-h-[600px] bg-white dark:bg-dark-white rounded-2xl shadow">
+      {/* <div className="w-full mb-10">
+        <div className="wallet w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
          <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
            Recent Activity
          </h2>
-          {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
+          <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
          {payment.loading ? (
            <LoadingSpinner size="16" color="sky-blue" />
          ) : (
            <RecentActivityTable payment={payment} />
          )}
        </div>
-      </div>
+      </div> */}
    </div>
  );
 }
@@ -1,15 +1,11 @@
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
-// import ModalCom from "../Helpers/ModalCom";
-import { Form, Formik } from "formik";
-import InputCom from "../../Helpers/Inputs/InputCom";
 import usersService from "../../../services/UsersService";
-import Icons from "../../Helpers/Icons";
-import AddFund from "../AddFund";
 import ModalCom from "../../Helpers/ModalCom";
 import AddFundPop from "../AddFundPop";
+import ConfirmAddFund from "../ConfirmAddFund";

-const CreditPopup = ({ details, onClose, situation }) => {
+const CreditPopup = ({ details, onClose, situation, walletItem }) => {
  const { pathname, state } = useLocation();
  const [submitTask, setSubmitTask] = useState({
    loading: false,
@@ -17,6 +13,11 @@ const CreditPopup = ({ details, onClose, situation }) => {
    state: "",
  });
  const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task");
+  let [input, setInput] = useState("");
+  const [confirmCredit, setConfirmCredit] = useState({
+    show: false,
+    data: {},
+  });

  const switchNextStep = ({ target: value }) => {
    setSuggestedNextStep(value);
@@ -42,7 +43,7 @@ const CreditPopup = ({ details, onClose, situation }) => {
      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
        <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-            Add Credit
+            {!confirmCredit.show ? "Add Credit" : "Confirm Credit Add"}
          </h1>
          <button
            type="button"
@@ -71,7 +72,23 @@ const CreditPopup = ({ details, onClose, situation }) => {
          </button>
        </div>
        <div className="logout-modal-body w-full flex flex-col items-center">
-          <AddFundPop _payment={details} />
+          {confirmCredit.show ? (
+            <ConfirmAddFund
+              confirmCredit={confirmCredit}
+              walletItem={walletItem}
+              onClose={onClose}
+            />
+          ) : (
+            <AddFundPop
+              _payment={details}
+              walletItem={walletItem}
+              input={input}
+              setInput={setInput}
+              onClose={onClose}
+              confirmCredit={confirmCredit}
+              setConfirmCredit={setConfirmCredit}
+            />
+          )}
        </div>
      </div>
    </ModalCom>
@@ -119,7 +119,7 @@ const WalletRoutes = () => {
          </Suspense>
        }
      >
-        <Route
+        {/* <Route
          path="add-fund"
          element={
            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
@@ -134,7 +134,7 @@ const WalletRoutes = () => {
              <ConfirmAddFund payment={paymentHistory} />
            </Suspense>
          }
-        />
+        /> */}
        <Route
          path="transfer-fund"
          element={
@@ -0,0 +1,49 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+
+function WalletAction({walletItem, payment, openPopUp}) {
+  return (
+    <div className="counters w-full flex justify-between gap-2">
+        <div className='w-1/2 flex justify-center items-center'>
+        <Link
+            to="transfer-fund"
+            className={`${
+            walletItem.code != "NAIRA" && "invisible"
+            } px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
+        >
+            Spend
+        </Link>
+        </div>
+        <div className='w-1/2 flex justify-center items-center'>
+        <button
+            className='px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white'
+            onClick={() => {
+            openPopUp({
+                payment: payment,
+                currency: walletItem?.description,
+            });
+            }}
+        >
+            {/* <span className="">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="38"
+                height="38"
+                viewBox="0 0 42 42"
+                fill="none"
+            >
+                <path
+                d="M21 0C16.8466 0 12.7865 1.23163 9.33303 3.53914C5.8796 5.84665 3.18798 9.1264 1.59854 12.9636C0.00909901 16.8009 -0.406771 21.0233 0.403518 25.0969C1.21381 29.1705 3.21386 32.9123 6.15077 35.8492C9.08767 38.7861 12.8295 40.7862 16.9031 41.5965C20.9767 42.4068 25.1991 41.9909 29.0364 40.4015C32.8736 38.812 36.1534 36.1204 38.4609 32.667C40.7684 29.2135 42 25.1534 42 21C41.994 15.4323 39.7796 10.0944 35.8426 6.15741C31.9056 2.22045 26.5677 0.00602189 21 0ZM28 22.75H22.75V28C22.75 28.4641 22.5656 28.9092 22.2374 29.2374C21.9093 29.5656 21.4641 29.75 21 29.75C20.5359 29.75 20.0908 29.5656 19.7626 29.2374C19.4344 28.9092 19.25 28.4641 19.25 28V22.75H14C13.5359 22.75 13.0908 22.5656 12.7626 22.2374C12.4344 21.9092 12.25 21.4641 12.25 21C12.25 20.5359 12.4344 20.0907 12.7626 19.7626C13.0908 19.4344 13.5359 19.25 14 19.25H19.25V14C19.25 13.5359 19.4344 13.0908 19.7626 12.7626C20.0908 12.4344 20.5359 12.25 21 12.25C21.4641 12.25 21.9093 12.4344 22.2374 12.7626C22.5656 13.0908 22.75 13.5359 22.75 14V19.25H28C28.4641 19.25 28.9093 19.4344 29.2374 19.7626C29.5656 20.0907 29.75 20.5359 29.75 21C29.75 21.4641 29.5656 21.9092 29.2374 22.2374C28.9093 22.5656 28.4641 22.75 28 22.75Z"
+                //   fill="white"
+                className="stroke-black fill-white"
+                ></path>
+            </svg>
+            </span> */}
+            <span className="">Add Credit</span>
+        </button>
+        </div>
+    </div>
+  )
+}
+
+export default WalletAction
@@ -1,7 +1,3 @@
-import CurrencyStaticsSection from "./CurrencyStaticsSection";
-import CurrentBalanceWidget from "./CurrentBalanceWidget";
-import InvestmentSection from "./InvestmentSection";
-import RecentTransactionWidget from "./RecentTransactionWidget";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletItemCard from "./WalletItemCard";

@@ -10,14 +6,14 @@ export default function WalletBox({ wallet, coupon, payment }) {
    <>
      <div className="my-wallet-wrapper w-full mb-10">
        <div className="main-wrapper w-full">
-          <div className="balance-inquery w-full lg:h-[436px] lg:flex lg:space-x-11 mb-11">
+          <div className="balance-inquery w-full lg:grid grid-cols-[repeat(auto-fill,_minmax(325px,_1fr))] gap-5 mb-11 h-[22rem]">
            {wallet.loading ? (
              <div className="w-full h-full flex items-center justify-center">
                <LoadingSpinner size="16" color="sky-blue" />
              </div>
            ) : wallet.data.length ? (
              wallet.data.map((item, index) => (
-                <div className="lg:w-1/2 h-full mb-10 lg:mb-0">
+                <div className="lg:w-full h-full mb-10 lg:mb-0">
                  <WalletItemCard walletItem={item} payment={payment} />
                </div>
              ))
@@ -1,11 +1,12 @@
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import Icons from "../Helpers/Icons";
-import bank1 from "../../assets/images/bank-1.png";
-import bank2 from "../../assets/images/bank-2.png";
-import bank3 from "../../assets/images/bank-3.png";
-import bank4 from "../../assets/images/bank-4.png";
+// import bank1 from "../../assets/images/bank-1.png";
+// import bank2 from "../../assets/images/bank-2.png";
+// import bank3 from "../../assets/images/bank-3.png";
+// import bank4 from "../../assets/images/bank-4.png";
 import Accordion from "../Helpers/Accordion";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
+import localImgLoad from "../../lib/localImgLoad";

 export default function WalletHeader(props) {
  //  debugger;
@@ -41,30 +42,35 @@ export default function WalletHeader(props) {
            <ul>
              {props.myWalletList &&
                props.myWalletList?.result_list?.length > 0 &&
-                props.myWalletList.result_list.map((value, index) => (
-                  <li
-                    key={index}
-                    className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
-                  >
-                    <div className="sm:flex justify-between items-center">
-                      <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
-                        <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
-                          <img src={bank1} alt="" />
+                props.myWalletList.result_list.map((value, index) => 
+                {
+                  let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
+                  return(
+                    <li
+                      key={index}
+                      className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
+                    >
+                      <div className="sm:flex justify-between items-center">
+                        <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
+                          <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
+                            <img src={localImgLoad(`images/currency/${image}`)} className="w-14 h-14" alt="" />
+                          </div>
+                          <div className="name">
+                            <p className="text-base text-dark-gray dark:text-white font-medium">
+                              {value.description}
+                            </p>
+                          </div>
                        </div>
-                        <div className="name">
-                          <p className="text-base text-dark-gray dark:text-white font-medium">
-                            {value.description}
+                        <div>
+                          <p className="eth text-xl font-bold text-purple">
+                            {PriceFormatter(value.amount * 0.01, value.code)}
                          </p>
                        </div>
                      </div>
-                      <div>
-                        <p className="eth text-xl font-bold text-purple">
-                          {PriceFormatter(value.amount * 0.01, value.code)}
-                        </p>
-                      </div>
-                    </div>
-                  </li>
-                ))}
+                    </li>
+                  )
+                }
+                )}

              {/*<li className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple">*/}
              {/*    <div className="sm:flex justify-between items-center">*/}
@@ -1,9 +1,10 @@
 import React, { useState } from "react";
-import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
-import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
+import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
+import localImgLoad from "../../lib/localImgLoad";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 import CreditPopup from "./Popup/CreditPopup";
+import WalletAction from "./WalletAction";

 export default function WalletItemCard({ walletItem, payment }) {
  //   const [eth] = useState(90);
@@ -27,44 +28,41 @@ export default function WalletItemCard({ walletItem, payment }) {
    setCreditPopup({ show: false, data: {} });
  };

-  console.log("walletItem >>", walletItem, payment);
+  let image = walletItem.code
+    ? `${walletItem.code.toLocaleLowerCase()}.svg`
+    : "default.png"; // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON

  return (
    <>
      <div
-        className={`current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col ${
-          accountType ? "justify-start" : "justify-between"
-        } px-8 py-9`}
+        className={`current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 px-8 pt-9 pb-20`}
        style={{
          background: `url(${background}) 0% 0% / cover no-repeat`,
        }}
      >
-        <div className="wallet flex justify-between">
-          <div className="w-[100px] h-[100px] rounded-full bg-[#485199] flex justify-center items-center">
-            <div>
-              <p className="text-26 font-bold text-white tracking-wide text-center">
-                .
-              </p>
-              <p className="text-lg text-white tracking-wide text-center">
-                {walletItem.code}
-              </p>
+        {/* <div className="w-[350px]"> */}
+          <div className="wallet w-full flex justify-between items-start gap-3">
+            <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+              <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
+            </div>
+            <div className="balance w-full mt-2 flex justify-center">
+              <div className="">
+                <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
+                  Current Balance
+                </p>
+                <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
+                  {PriceFormatter(
+                    walletItem.amount * 0.01,
+                    walletItem.code,
+                    undefined,
+                    "text-[2rem]"
+                  )}
+                </p>
+              </div>
            </div>
          </div>
-          <div></div>
-        </div>
-        <div className="balance">
-          <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
-            Current Balance
-          </p>
-          <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
-            {PriceFormatter(
-              walletItem.amount * 0.01,
-              walletItem.code,
-              undefined,
-              "text-[2rem]"
-            )}
-          </p>
-          <p className="text-lg text-white tracking-wide">
+
+          <p className="my-5 text-lg text-white tracking-wide flex justify-center items-center gap-2">
            HOLDINGS :{" "}
            <span className="mt-1">
              {PriceFormatter(
@@ -74,57 +72,22 @@ export default function WalletItemCard({ walletItem, payment }) {
                "text-[2rem]"
              )}
            </span>
-            {/*<span className="text-light-green">(11.5%)</span>*/}
          </p>
-        </div>
-        {!accountType && (
-          <div className="counters flex space-x-16">
-            <div>
-              <Link
-                to="transfer-fund"
-                className={`${
-                  walletItem.action_type != "AC_AD_FD_ONLY" && "invisible"
-                } px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full relative  bg-purple lg:text-xl text-lg font-bold text-white`}
-              >
-                Transfer
-              </Link>
-            </div>
-            <div>
-              <button
-                // state={{ currency: walletItem.description }}
-                className="px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full bg-white lg:text-xl text-lg font-bold text-black group relative transition duration-300 stroke-black fill-white"
-                onClick={() => {
-                  openPopUp({
-                    payment: payment,
-                    currency: walletItem?.description,
-                  });
-                }}
-              >
-                <span className="">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="38"
-                    height="38"
-                    viewBox="0 0 42 42"
-                    fill="none"
-                  >
-                    <path
-                      d="M21 0C16.8466 0 12.7865 1.23163 9.33303 3.53914C5.8796 5.84665 3.18798 9.1264 1.59854 12.9636C0.00909901 16.8009 -0.406771 21.0233 0.403518 25.0969C1.21381 29.1705 3.21386 32.9123 6.15077 35.8492C9.08767 38.7861 12.8295 40.7862 16.9031 41.5965C20.9767 42.4068 25.1991 41.9909 29.0364 40.4015C32.8736 38.812 36.1534 36.1204 38.4609 32.667C40.7684 29.2135 42 25.1534 42 21C41.994 15.4323 39.7796 10.0944 35.8426 6.15741C31.9056 2.22045 26.5677 0.00602189 21 0ZM28 22.75H22.75V28C22.75 28.4641 22.5656 28.9092 22.2374 29.2374C21.9093 29.5656 21.4641 29.75 21 29.75C20.5359 29.75 20.0908 29.5656 19.7626 29.2374C19.4344 28.9092 19.25 28.4641 19.25 28V22.75H14C13.5359 22.75 13.0908 22.5656 12.7626 22.2374C12.4344 21.9092 12.25 21.4641 12.25 21C12.25 20.5359 12.4344 20.0907 12.7626 19.7626C13.0908 19.4344 13.5359 19.25 14 19.25H19.25V14C19.25 13.5359 19.4344 13.0908 19.7626 12.7626C20.0908 12.4344 20.5359 12.25 21 12.25C21.4641 12.25 21.9093 12.4344 22.2374 12.7626C22.5656 13.0908 22.75 13.5359 22.75 14V19.25H28C28.4641 19.25 28.9093 19.4344 29.2374 19.7626C29.5656 20.0907 29.75 20.5359 29.75 21C29.75 21.4641 29.5656 21.9092 29.2374 22.2374C28.9093 22.5656 28.4641 22.75 28 22.75Z"
-                      //   fill="white"
-                      className="stroke-black fill-white"
-                    ></path>
-                  </svg>
-                </span>
-                <span className="">Add Credit</span>
-                <span className="absolute inset-0 w-full h-full transition-all duration-300 ease-out bg-gray-300 group-hover:bg-gray-400 opacity-0"></span>
-              </button>
-            </div>
-          </div>
-        )}
+          {/* for white underline */}
+          <div className="my-2 w-full h-[1px] bg-white"></div> 
+
+          {!accountType ? (
+            <WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
+          )
+          :
+          null
+          }
+        {/* </div> */}
      </div>
      {creditPopup.show && (
        <CreditPopup
          details={creditPopup.data}
+          walletItem={walletItem}
          onClose={closePopUp}
          situation={openPopUp}
        />
@@ -0,0 +1,91 @@
+import React, {useEffect, useState} from 'react'
+import method1 from "../../../assets/images/payment-method-1.png";
+import LoadingSpinner from '../../Spinners/LoadingSpinner';
+import usersService from "../../../services/UsersService";
+import { handlePagingFunc } from '../../Pagination';
+import PaginatedList from '../../Pagination/PaginatedList';
+
+function CardList() {
+    const api = new usersService();
+  const [cardList, setCardList] = useState({loading: true, data: []})
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentCardList = cardList?.data?.slice(indexOfFirstItem, indexOfLastItem);
+
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
+
+  useEffect(()=>{
+    api.payListCard().then(res=>{
+      setCardList({loading: false, data:res.data?.result_list})
+    }).catch(err => {
+      setCardList({loading: false, data:[]})
+      console.log('ERROR', err)
+    })
+  },[])
+  return (
+    <div className='w-full'>
+        <ul className="payment-items w-full min-h-[400px]">
+            {cardList.loading ?
+            <div className='w-full h-[300px] flex justify-center items-center'>
+                <LoadingSpinner size='8' color='sky-blue' />
+            </div>
+            :
+            cardList.data.length ?
+            currentCardList.map(item =>(
+            <li key={item.card_uid} className="sm:flex justify-between items-center w-full py-3 border-b border-light-purple dark:border-[#5356fb29] ">
+                <div className="flex space-x-5 mb-2 sm:mb-0">
+                    <div className="w-[50px] h-[50px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
+                    <img className='rounded-full w-full h-full' src={method1} alt="payment" />
+                    </div>
+                    <div>
+                    <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
+                        Added: {item.added}
+                    </p>
+                    <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
+                        {item.description} **********{item.digits}
+                    </p>
+                    {/* <p className="sm:text-18 text-sm tracking-wide text-light-green">
+                        Verified
+                    </p> */}
+                    </div>
+                </div>
+                <div>
+                    <button
+                    type="button"
+                    className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
+                    >
+                    Delete
+                    </button>
+                </div>
+            </li>
+            ))
+            :
+            <h1 className='font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap'>No Cards Found</h1>
+            }
+        </ul>
+
+        {/* PAGINATION BUTTON */}
+        <PaginatedList
+            onClick={handlePagination}
+            prev={currentPage == 0 ? true : false}
+            next={
+            currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+            cardList?.data?.length
+                ? true
+                : false
+            }
+            data={cardList?.data}
+            start={indexOfFirstItem}
+            stop={indexOfLastItem}
+        />
+      {/* END OF PAGINATION BUTTON */}
+    </div>
+  )
+}
+
+export default CardList
@@ -3,11 +3,39 @@
 import React, { useState } from "react";
 import Icons from "../../Helpers/Icons";
 import PasswordSvg from "../PasswordSvg";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import usersService from "../../../services/UsersService";
+import { useNavigate } from "react-router-dom";

 export default function ChangePasswordTab() {
+  const apiUrl = new usersService()
+  const navigate = useNavigate()
+
  const [oldPass, setOldPass] = useState("hide-password");
  const [newPass, setNewPass] = useState("hide-password");
  const [confirmPass, setConfirmPass] = useState("hide-password");
+
+  const [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''})
+  
+  const [inputEmpty, setInputEmpty] = useState(false)
+  let [inputs, setInputs] = useState({
+    old_pwd: '',
+    new_pwd: '',
+    confirm_new_pwd: ''
+  })
+
+  const handleInputChange = ({target:{name, value}}) => { // FUNCTION TO HANDLE WHEN AN INPUT CHANGES
+    setInputs(prev => ({...prev, [name]:value}))
+  }
+
+  const handleCancel = () => { // FUNCTION TO CLEAR ALL TYPED INPUTS
+    setInputs({
+      old_pwd: '',
+      new_pwd: '',
+      confirm_new_pwd: ''
+    })
+  }
+
  const showPassword = (value) => {
    const password = document.getElementById(`${value}`);
    if (value && value === "old_password") {
@@ -38,16 +66,61 @@ export default function ChangePasswordTab() {
      }
    }
  };
+
+  const handlePwdUpdate = () => {
+    setInputEmpty(false) // SETS THE STATE OF ANY INPUT IS EMPTY TO FALSE
+    if(!inputs.old_pwd || !inputs.new_pwd || !inputs.confirm_new_pwd){ // CHECKS IF ANY INPUT FIELD IS EMPTY AND SETS INPUT EMPTY TO TRUE
+      setInputEmpty(true)
+      return setTimeout(()=>{setInputEmpty(false)},3000)
+    }
+
+    if(inputs.new_pwd != inputs.confirm_new_pwd){ // CHECKS IF PASSWORD MATCHES CONFIRM PASSWORD
+      setRequestStatus({loading: false, status: false, message: 'new password must match confirm password'})
+      return setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},3000)
+    }
+
+    if(/^[a-zA-Z0-9]*$/.test(inputs.new_pwd) == false){ // CHECKS IF PASSWORD IS ALPHANUMERIC
+      setRequestStatus({loading: false, status: false, message: 'password must be alphanumeric'})
+      return setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},3000)
+    }
+
+    if(inputs.new_pwd.length < 6){ // CHECKS IF PASSWORD IS UPTO SIX CHARACTERS
+      setRequestStatus({loading: false, status: false, message: 'password must be upto six characters'})
+      return setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},3000)
+    }
+
+    
+    let reqData = { // REQUEST PAYLOAD
+      current_pass: inputs.old_pwd,
+      new_pass: inputs.new_pwd
+    }
+
+    
+    setRequestStatus({loading: true, status: false, message: ''})
+
+    apiUrl.profilePassChange(reqData).then(res => {
+      if(res.status != 200 || res.data.internal_return < 0){
+        setRequestStatus({loading: false, status: false, message: 'unable to complete request'})
+        return
+      }
+      setRequestStatus({loading: false, status: true, message: 'password update was successful'})
+      setTimeout(()=>{navigate('/settings', {replace: true})}, 5000)
+    }).catch(err => {
+      setRequestStatus({loading: false, status: false, message: 'unable to complete request'})
+    }).finally(()=>{
+      setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},4000)
+    })
+  }
  return (
    <div className="changePasswordTab w-full">
-      <div className="w-full flex xl:flex-row flex-col-reverse space-x-5 xl:items-center">
+      <div className="w-full flex xxl:flex-row flex-col-reverse space-x-5 xxl:items-start">
        <div className="flex-1 mb-10">
          <div className="input-field mb-6">
            <label
              className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
              htmlFor="old_password"
            >
-              Old Password
+              Old Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.old_pwd) && 'required'}</span>
            </label>
            <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  w-full rounded-[50px] h-[58px] overflow-hidden relative ">
              <div className="absolute left-6 bottom-[17px] z-10">
@@ -58,6 +131,10 @@ export default function ChangePasswordTab() {
                className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
                type="password"
                id="old_password"
+                value={inputs.old_pwd}
+                name='old_pwd'
+                onChange={handleInputChange}
+                autoComplete='false'
              />
              <div
                className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
@@ -72,7 +149,7 @@ export default function ChangePasswordTab() {
              className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
              htmlFor="new_password"
            >
-              New Password
+              New Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.new_pwd) && 'required'}</span>
            </label>
            <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  w-full rounded-[50px] h-[58px] overflow-hidden relative ">
              <div className="absolute left-6 bottom-[17px] z-10">
@@ -83,6 +160,10 @@ export default function ChangePasswordTab() {
                className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
                type="password"
                id="new_password"
+                value={inputs.new_pwd}
+                name='new_pwd'
+                onChange={handleInputChange}
+                autoComplete='false'
              />
              <div
                className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
@@ -97,7 +178,7 @@ export default function ChangePasswordTab() {
              className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
              htmlFor="confirm_password"
            >
-              Confirm Password
+              Confirm Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.confirm_new_pwd) && 'required'}</span>
            </label>
            <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  w-full rounded-[50px] h-[58px] overflow-hidden relative ">
              <div className="absolute left-6 bottom-[17px] z-10">
@@ -108,6 +189,10 @@ export default function ChangePasswordTab() {
                className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
                type="password"
                id="confirm_password"
+                value={inputs.confirm_new_pwd}
+                name='confirm_new_pwd'
+                onChange={handleInputChange}
+                autoComplete='false'
              />
              <div
                className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
@@ -120,19 +205,46 @@ export default function ChangePasswordTab() {
          <div className="flex justify-center space-x-4 items-center">
            <button
              type="button"
-              className="text-light-red text-18 tracking-wide border-b dark:border-[#5356fb29]  border-light-red "
+              className="text-light-red text-18 tracking-wide border-b dark:border-[#5356fb29]  border-light-red"
+              disabled={requestStatus.loading}
+              onClick={handleCancel}
            >
              Cancel
            </button>
-            <button
-              type="button"
-              className="btn-gradient tracking-wide rounded-full w-[173px] h-[46px] flex justify-center items-center"
-            >
-              <span className="font-thin text-18 tracking-wide antialiased text-white">
-                Change Password
-              </span>
-            </button>
+            {requestStatus.loading ?
+              <LoadingSpinner size='8' color='sky-blue' />
+              :
+              <button
+                type="button"
+                className="btn-gradient tracking-wide rounded-full w-[173px] h-[46px] flex justify-center items-center"
+                disabled={requestStatus.loading}
+                onClick={handlePwdUpdate}
+              >
+                <span className="font-thin text-18 tracking-wide antialiased text-white">
+                  Change Password
+                </span>
+              </button>
+            }
          </div>
+
+          {/* error or success display */}
+          {requestStatus.message != "" &&
+            (!requestStatus.status ? (
+              <div
+                className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+              >
+                {requestStatus.message}
+              </div>
+            ) : (
+              requestStatus.status && (
+                <div
+                  className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                >
+                  {requestStatus.message}
+                </div>
+              )
+            ))}
+          {/* End of error or success display */}
        </div>
        <div className="w-[440px] sm:flex hidden justify-end">
          <PasswordSvg />
@@ -1,120 +1,17 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import method1 from "../../../assets/images/payment-method-1.png";
 import method2 from "../../../assets/images/payment-method-2.png";
 import method3 from "../../../assets/images/payment-method-3.png";
 import method4 from "../../../assets/images/payment-method-4.png";
+import CardList from "./CardList";
+

 export default function PaymentMathodsTab() {
  return (
    <>
      <div className="payment-method-tab w-full">
        <div className="payment-item-wrapper w-full">
-          <ul className="payment-items">
-            <li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-              <div className="flex space-x-5 mb-3 sm:mb-0">
-                <div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
-                  <img src={method1} alt="payment" />
-                </div>
-                <div>
-                  <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
-                    Datch Bangla Bank Ltd
-                  </p>
-                  <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
-                    Bank **********5535
-                  </p>
-                  <p className="sm:text-18 text-sm tracking-wide text-light-green">
-                    Verified
-                  </p>
-                </div>
-              </div>
-              <div>
-                <button
-                  type="button"
-                  className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
-                >
-                  Manage
-                </button>
-              </div>
-            </li>
-            <li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-              <div className="flex space-x-5 mb-3 sm:mb-0">
-                <div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
-                  <img src={method2} alt="payment" />
-                </div>
-                <div>
-                  <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
-                    Master Card
-                  </p>
-                  <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
-                    Bank **********5535
-                  </p>
-                  <p className="sm:text-18 text-sm tracking-wide text-light-green">
-                    Verified
-                  </p>
-                </div>
-              </div>
-              <div>
-                <button
-                  type="button"
-                  className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
-                >
-                  Manage
-                </button>
-              </div>
-            </li>
-            <li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-              <div className="flex space-x-5 mb-3 sm:mb-0">
-                <div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
-                  <img src={method3} alt="payment" />
-                </div>
-                <div>
-                  <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
-                    Paypal Account
-                  </p>
-                  <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
-                    Bank **********5535
-                  </p>
-                  <p className="sm:text-18 text-sm tracking-wide text-light-green">
-                    Verified
-                  </p>
-                </div>
-              </div>
-              <div>
-                <button
-                  type="button"
-                  className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
-                >
-                  Manage
-                </button>
-              </div>
-            </li>
-            <li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-              <div className="flex space-x-5 mb-3 sm:mb-0">
-                <div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
-                  <img src={method4} alt="payment" />
-                </div>
-                <div>
-                  <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
-                    Visa Card
-                  </p>
-                  <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
-                    Bank **********5535
-                  </p>
-                  <p className="text-18 tracking-wide text-light-red">
-                    Unverified
-                  </p>
-                </div>
-              </div>
-              <div>
-                <button
-                  type="button"
-                  className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
-                >
-                  Manage
-                </button>
-              </div>
-            </li>
-          </ul>
+          <CardList />
          <div className="py-7 flex space-x-4">
            <button
              type="button"
@@ -39,12 +39,12 @@ class usersService {
    localStorage.setItem("session_token", ``);
    return this.postAuxEnd("/authstart", reqData);
  }
-  
+
  authLogin(reqData) {
    localStorage.setItem("session_token", ``);
    return this.postAuxEnd("/authlogin", reqData);
  }
-  
+
  marketJobData(reqData) {
    var postData = {
      uuid: localStorage.getItem("uuid"),
@@ -216,6 +216,28 @@ class usersService {
    return this.postAuxEnd("/sendmoneyfee", postData);
  }

+  getStartCredit(value) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 11053,
+      ...value,
+    };
+    return this.postAuxEnd("/startcredit", postData);
+  }
+
+  getPaidPrevCard(value) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 11056,
+      ...value,
+    };
+    return this.postAuxEnd("/payprevcard", postData);
+  }
+
  getFamilySampleTasks() {
    var postData = {
      uid: localStorage.getItem("uid"),
@@ -899,6 +921,18 @@ class usersService {
    return this.postAuxEnd("/familysuggestlist", postData);
  }

+    // FUNCTION TO CHANGE PROFILE PASSWORD
+    profilePassChange(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 11005,
+        ...reqData,
+      };
+      return this.postAuxEnd("/profilepasschange", postData);
+    }
+
  /*
    - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
    - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)
@@ -20,6 +20,10 @@ module.exports = {
        'sky-blue': '#3a8fc3',
        'alice-blue': '#f0f8ff'
      },
+      screens:{
+        xxs: '400px',
+        xxl:'1900px'
+      }
    },
  },
  plugins: [require("@tailwindcss/line-clamp")],
Author	SHA1	Message	Date
victorAnumudu	1d5875d4e2	reset profile password implemented	2023-07-14 20:28:22 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	e01d0106ad	cards images	2023-07-14 13:19:41 -04:00
ameye	68472f8c66	Merge branch 'card-list-page' of WrenchBoard/Users-Wrench into master	2023-07-14 17:00:38 +00:00
victorAnumudu	8def463d80	card listing added	2023-07-14 17:54:44 +01:00
ameye	0320999f72	Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master	2023-07-14 13:42:01 +00:00
Ebube	78a97d8b0b	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into my_wallet_layout	2023-07-14 13:48:25 +01:00
Ebube	6bf6c5d2d4	Added PaidPrevCard api	2023-07-14 13:48:03 +01:00
ameye	33284600e5	Merge branch 'change-passage-mac' of WrenchBoard/Users-Wrench into master	2023-07-14 12:37:26 +00:00
ameye	68bf995078	Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master	2023-07-14 12:37:18 +00:00
Ebube	fa05f47941	.	2023-07-14 13:30:50 +01:00
victorAnumudu	2391857309	flex display changed to suit mac screen	2023-07-14 12:58:49 +01:00
Ebube	ed38cadcee	Start credit Api for Dollar acc	2023-07-14 12:53:05 +01:00
ameye	ea447a9366	Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master	2023-07-13 23:09:01 +00:00
Ebube	4e2f120ab5	Few changes	2023-07-13 23:12:29 +01:00
Ebube	20ce9bf749	Consumed Start credit Api	2023-07-13 22:34:09 +01:00
ameye	04e1bcc5f1	Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master	2023-07-13 19:38:17 +00:00
Ebube	cbaa8b6f7b	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into my_wallet_layout	2023-07-13 20:14:54 +01:00
ameye	f6bdb1c299	Merge branch 'wallet-card' of WrenchBoard/Users-Wrench into master	2023-07-13 19:11:32 +00:00
Ebube	d4061d72da	.	2023-07-13 18:20:20 +01:00
Ebube	2d9a8b55b5	.	2023-07-13 18:16:52 +01:00
Ebube	920eafed29	.	2023-07-13 18:10:19 +01:00
Ebube	21d926eb5c	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into my_wallet_layout	2023-07-13 18:08:23 +01:00
Ebube	ec9d793d6b	.	2023-07-13 18:07:05 +01:00
victorAnumudu	2fd04dc86d	wallet card adjustment	2023-07-13 16:44:05 +01:00
ameye	d7752cb70b	Merge branch 'wallet-layout-fix' of WrenchBoard/Users-Wrench into master	2023-07-13 13:05:32 +00:00
victorAnumudu	dc592f60db	layout fix	2023-07-13 14:02:27 +01:00
victorAnumudu	675ba2989e	layout fix	2023-07-13 14:00:02 +01:00
ameye	b201224fd6	Merge branch 'wallet-size' of WrenchBoard/Users-Wrench into master	2023-07-13 12:45:17 +00:00
ameye	c24013eefd	Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master	2023-07-13 12:45:12 +00:00
victorAnumudu	234f04ca8f	wallet size changed	2023-07-13 13:41:39 +01:00
Ebube	5f222a2d88	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into my_wallet_layout	2023-07-13 12:37:32 +01:00
Ebube	258434a109	Applied corrections and changes to the wallet	2023-07-13 12:34:39 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	ed148612a7	more banners	2023-07-13 07:21:37 -04:00
ameye	2287fb5ebb	Merge branch 'wallet-cleanup' of WrenchBoard/Users-Wrench into master	2023-07-13 10:16:18 +00:00
victorAnumudu	24545baad5	wallet clean up	2023-07-13 10:27:03 +01:00
ameye	ead7589c92	Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master	2023-07-13 08:21:23 +00:00
Ebube	51bb8fc421	Corrections on AddFundPop	2023-07-13 03:21:52 +01:00
ameye	d2166d9578	Merge branch 'icons-size' of WrenchBoard/Users-Wrench into master	2023-07-12 21:20:53 +00:00
victorAnumudu	c4872f522b	icon color and size changed	2023-07-12 21:31:09 +01:00
ameye	0aef8c5e1e	Merge branch 'wallet-icons' of WrenchBoard/Users-Wrench into master	2023-07-12 19:27:48 +00:00
ameye	767b5c1b32	Merge branch 'wallet-dropdown-icons' of WrenchBoard/Users-Wrench into master	2023-07-12 19:27:43 +00:00
ameye	6fed51443d	Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master	2023-07-12 19:27:33 +00:00
victorAnumudu	017ba7bd2f	wallet icon added and wallet layout changed	2023-07-12 20:00:17 +01:00
victorAnumudu	86d876b013	wallet dropdown icons added	2023-07-12 19:09:04 +01:00
Ebube	fcd8898439	.	2023-07-12 19:05:06 +01:00
Ebube	690f496807	Add New Card Layout	2023-07-12 19:01:27 +01:00
ameye	f804e13b56	Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master	2023-07-12 16:19:58 +00:00
Ebube	5e248bc108	Restored layout and tiny modifications	2023-07-12 17:14:13 +01:00
ameye	26647b088f	Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master	2023-07-12 15:04:53 +00:00
Ebube	ae8ada33f4	Increased font	2023-07-12 15:54:57 +01:00
Ebube	c31dab92e7	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into my_wallet_layout	2023-07-12 15:51:27 +01:00
Ebube	c16764269e	Added name to Add new fund	2023-07-12 15:48:57 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	afe6a1afcb	currencies	2023-07-12 10:32:57 -04:00
Ebube	e98929627f	Compi!	2023-07-12 15:20:39 +01:00
Ebube	3919a2bc4b	Layout Readjusting	2023-07-12 15:12:50 +01:00
ameye	93e89f996c	Merge branch 'my-facebook-ID' of WrenchBoard/Users-Wrench into master	2023-07-12 13:47:25 +00:00
victorAnumudu	7ede9883ba	facebook redirect page	2023-07-12 14:22:51 +01:00
victorAnumudu	7edc7b08e5	added my default facebook client ID	2023-07-12 14:07:07 +01:00
Ebube	7990959e9f	Passed values to confirm add fund	2023-07-12 10:08:26 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	6ead632c79	facebook	2023-07-11 17:31:52 -04:00
ameye	9c575716cd	Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master	2023-07-11 19:13:15 +00:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	cc93d5980d	facebook login added	2023-07-11 14:59:16 -04:00
Ebube	e899e5eb2a	Convert ConfirmAddFund to Popup	2023-07-11 19:47:04 +01:00
ameye	c53ee2833f	Merge branch 'apple-login-init' of WrenchBoard/Users-Wrench into master	2023-07-11 14:23:27 +00:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="naira"><path fill="#fff" d="M24,5A19,19,0,1,0,43,24,19,19,0,0,0,24,5Zm7,20a1,1,0,0,1,0,2H29v3A1.94,1.94,0,0,1,27.45,32a2,2,0,0,1-2.26-1.08L20,17.05l0,14a1,1,0,0,1-2,0V27H16a1,1,0,0,1,0-2h2V22H16a1,1,0,0,1,0-2h2V17a1.94,1.94,0,0,1,1.55-1.92,2,2,0,0,1,2.26,1.08L27,30,27,16a1,1,0,0,1,2,0v4h2a1,1,0,0,1,0,2H29v3Z" class="color3b3c3d svgShape"></path><path fill="#e3e3e3" d="M24,48A24,24,0,1,1,48,24,24,24,0,0,1,24,48ZM24,2A22,22,0,1,0,46,24,22,22,0,0,0,24,2Z" class="color3b3c3d svgShape"></path></svg>