.

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -1,8 +1,10 @@
 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 import React, { useState } from "react";
+import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
+import { tableReload } from "../../../store/TableReloads";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 function ThePaymentText({ value, type }) {
@@ -98,6 +100,7 @@ function ConfirmAddFund({
 
   const apiURL = new usersService();
   const navigate = useNavigate();
+  const dispatch = useDispatch();
 
   const [requestStatus, setRequestStatus] = useState({
     message: "",
@@ -251,8 +254,9 @@ function ConfirmAddFund({
         }));
         return;
       }
-
+      
       setTimeout(() => {
+        dispatch(tableReload({ type: "WALLETTABLE" }));
         setConfirmCredit((prev) => ({
           ...prev,
           show: {
@@ -274,7 +278,7 @@ function ConfirmAddFund({
     }
   };
 
-  console.log(confirmCredit?.data);
+  // console.log(confirmCredit?.data);
 
   return (
     <div className="content-wrapper w-full h-[32rem]">

src/components/MyWallet/Wallet.jsx

@@ -1,13 +1,25 @@
-import React, { Suspense, lazy, useCallback, useEffect, useState } from "react";
+import React, {
+  Suspense,
+  lazy,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { useSelector } from "react-redux";
 import usersService from "../../services/UsersService";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 const WalletBox = lazy(() => import("./WalletBox"));
 
 const WalletRoutes = () => {
-  const apiCall = new usersService();
-
-  const [walletList, setWalletList] = useState({ loading: true, data: [] });
+  const apiCall = useMemo(() => new usersService(), []);
+  const { walletTable } = useSelector((state) => state.tableReload);
+  const [walletList, setWalletList] = useState({
+    loading: true,
+    data: [],
+    reload: false,
+  });
   const [paymentHistory, setPaymentHistory] = useState({
     loading: true,
     data: [],
@@ -44,26 +56,14 @@ const WalletRoutes = () => {
   }, [apiCall]);
 
   useEffect(() => {
-    let isMounted = true;
-
     const fetchData = async () => {
-      try {
-        await Promise.all([getWalletList(), getPaymentHistory()]);
-      } catch (error) {
-        console.error(error);
-      } finally {
-        if (isMounted) {
-          return (isMounted = false);
-        }
-      }
+      await Promise.all([getWalletList(), getPaymentHistory()]);
     };
 
     fetchData();
+  }, [walletTable, walletList.data]);
 
-    return () => {
-      isMounted = false;
-    };
-  }, [getWalletList, getPaymentHistory]);
+  console.log(walletTable);
   return (
     <Layout>
       <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>