Updated Api for Stats on Home page

src/Redux/slice/statsSlice.js

@@ -0,0 +1,16 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+export const statsApi = createApi({
+    reducerPath: 'statsApi',
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix-explorer-api.azurewebsites.net/api/' }),
+    endpoints: (builder) => ({
+        getStatsApi: builder.query({
+            query: () => 'Explorer/totalsupply',
+        }),
+        getStatApi: builder.query({
+            query: () => 'Explorer/Cards',
+        }),
+    }),
+});
+
+export const { useGetStatsApiQuery, useGetStatApiQuery } = statsApi;

src/Redux/store/store.js

@@ -1,12 +1,14 @@
 import { configureStore } from '@reduxjs/toolkit';
 import { api } from '../slice/communitySlice';
+import { statsApi } from '../slice/statsSlice';
 
 const store = configureStore({
     reducer: {
         [api.reducerPath]: api.reducer,
+        [statsApi.reducerPath]: statsApi.reducer,
     },
     middleware: (getDefaultMiddleware) =>
-        getDefaultMiddleware().concat(api.middleware),
+        getDefaultMiddleware().concat(api.middleware, statsApi.middleware),
 });
 
 export default store;

src/components/HomePage/Stats.jsx

@@ -1,19 +1,57 @@
-import { Box, Container, Text } from "@chakra-ui/react";
+/* eslint-disable no-unused-vars */
+import { Box, Container, Spinner, Text } from "@chakra-ui/react";
 import { useInView } from "react-intersection-observer";
 import CountUp from "react-countup";
 import banner from "../../assets/images/Statsbanner.png";
 import { useMediaQuery } from "@chakra-ui/react";
+import {
+  useGetStatApiQuery,
+  useGetStatsApiQuery,
+} from "../../Redux/slice/statsSlice";
 
 const StatsContent = {
   heading: `Key Statistics`,
 };
 
 const Stats = () => {
+  // Call useGetStatsApiQuery
+  const {
+    data: statsData,
+    error: statsError,
+    isLoading: statsIsLoading,
+  } = useGetStatsApiQuery();
+
+  // Call useGetStatApiQuery
+  const {
+    data: statData,
+    error: statError,
+    isLoading: statIsLoading,
+  } = useGetStatApiQuery();
+
+  // console.log(statsData);
+  // console.log(statData);
+
   const [isSmallScreen] = useMediaQuery("(max-width: 435px)");
   const { ref, inView } = useInView({
     threshold: 0.5,
     triggerOnce: true,
   });
+
+  // if (statsIsLoading) {
+  //   return (
+  //     <>
+  //       <Spinner color="#DE858E" />
+  //     </>
+  //   );
+  // }
+  // if (statIsLoading) {
+  //   return (
+  //     <>
+  //       <Spinner color="#DE858E" />
+  //     </>
+  //   );
+  // }
+
   return (
     <Box
       height={"auto"}
@@ -105,7 +143,7 @@ const Stats = () => {
             {inView && (
               <CountUp
                 start={50000000}
-                end={51400000}
+                end={statsData?.totalcoins}
                 delay={0}
                 style={{
                   fontSize: `${isSmallScreen ? "23px" : "38px"}`,
@@ -152,7 +190,7 @@ const Stats = () => {
             {inView && (
               <CountUp
                 start={10000000}
-                end={10247786}
+                end={statData?.tokensCount}
                 delay={0}
                 style={{
                   fontSize: `${isSmallScreen ? "23px" : "38px"}`,
@@ -178,7 +216,7 @@ const Stats = () => {
             {inView && (
               <CountUp
                 start={100000}
-                end={201413}
+                end={statData?.rubixUsersCount}
                 delay={0}
                 style={{
                   fontSize: `${isSmallScreen ? "23px" : "38px"}`,
@@ -245,7 +283,7 @@ const Stats = () => {
             {inView && (
               <CountUp
                 start={50000000}
-                end={10247786}
+                end={statData?.curculatingSupplyCount}
                 delay={0}
                 style={{
                   fontSize: `${isSmallScreen ? "23px" : "38px"}`,
@@ -271,7 +309,7 @@ const Stats = () => {
             {inView && (
               <CountUp
                 start={10000000}
-                end={13572940}
+                end={statData?.transactionsCount}
                 delay={0}
                 style={{
                   fontSize: `${isSmallScreen ? "23px" : "38px"}`,