diff --git a/src/Redux/slice/statsSlice.js b/src/Redux/slice/statsSlice.js
new file mode 100644
index 0000000..fd87c23
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/Redux/store/store.js b/src/Redux/store/store.js
index 3a9dfa1..6567bc4 100644
--- a/src/Redux/store/store.js
+++ b/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;
diff --git a/src/components/HomePage/Stats.jsx b/src/components/HomePage/Stats.jsx
index 40cfc5f..67e33d5 100644
--- a/src/components/HomePage/Stats.jsx
+++ b/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 (
+ // <>
+ //
+ // >
+ // );
+ // }
+ // if (statIsLoading) {
+ // return (
+ // <>
+ //
+ // >
+ // );
+ // }
+
return (
{
{inView && (
{
{inView && (
{
{inView && (
{
{inView && (
{
{inView && (