Use variables from API

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["next/babel"]
+}

.sample.env

@@ -1,4 +1,5 @@
-NEXT_PUBLIC_MARKETPLACE_ADDRESS=
-NEXT_PUBLIC_CREATIFY_ADDRESS=
-NEXT_PUBLIC_GRAPHQL_API=
-NEXT_PUBLIC_BASE_URL=
+NEXT_PUBLIC_RPC_PROVIDER="https://rpc-mumbai.maticvigil.com/v1/6b26aad1d887708c0004394c103f8b27c1141540"
+NEXT_PUBLIC_MARKETPLACE_ADDRESS="0x899dEf33857C491Ce61346f6e95b3a5Ee4acd24a"
+NEXT_PUBLIC_CREATIFY_ADDRESS="0xA5024E93fbc9015fa60F0b72F531aD5f0e6d7e16"
+NEXT_PUBLIC_GRAPHQL_API="https://query.graph.lazarus.network/subgraphs/name/MyriadFlow"
+NEXT_PUBLIC_BASE_URL=https://marketplace-engine.lazarus.network/api/v1.0

Dockerfile

@@ -53,4 +53,5 @@ EXPOSE 3000
 
 ENV PORT 3000
 
-CMD ["node", "server.js"]
+CMD ["node", "server.js"]
+RUN npm install -D @swc/cli @swc/core  

app-constants.js

@@ -0,0 +1 @@
+export const BASE_URL ="https://marketplace-engine.lazarus.network/api/v1.0"

pages/landingpage.js

@@ -6,10 +6,22 @@ import Layout from "../Components/Layout";
 import { BsHeart } from "react-icons/bs";
 import BigCard from "../Components/Cards/BigCard";
 import SmallCard from "../Components/Cards/SmallCard"
+import { useEffect, useState } from 'react'
 // import NotifyContainer from "../Components/NotifyContainer";
 import Slider from "react-slick";
-
+import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import { fetchDetails } from "../slices/getDetailsSlice";
 function landingpage() {
+  const {details,loading}=useSelector((state)=>state.details)
+  const dispatch=useDispatch()
+  const [detailsres, setdetailsres] = useState([]);
+  useEffect(() => {
+		// console.log("PROCESS",process.env.NEXT_PUBLIC_BASE_URL)
+    dispatch(fetchDetails())
+    console.log("details",details)
+   setdetailsres([...detailsres,details])
+	}, []);
   const settings = {
     dots: false,
     infinite: true,
@@ -73,12 +85,10 @@ function landingpage() {
           <div className="lg:flex xl:gap-8 lg:w-[1025px] x2:w-[1200px] xxl:w-[1400px] mx-auto lg:mt-12">
             <div className="text-center lg:text-left lg:w-1/2 mt-16 lg:mt-0  p-2 sm:p-4 lg:px-8 lg:pt-0">
               <h2 className=" dark:text-white font-poppins font-bold m48:w-[470px] l32:w-[450px] xxl:w-auto  text-3xl sm:text-4xl lg:text-6xl x2:text-7xl xxl:text-8xl capitalize mb-8 x2:mb-10 mx-auto lg:mx-0">
-                Collect and trade the New Fresh Thing
+               {details.homeTitle}
               </h2>
               <h6 className="text-lg x2:text-2xl text-slate-500 m48:max-w-[487px] mx-auto lg:mx-0 lg:w-[80%] font-opensans mb-8">
-                A NFT marketplace to explore the digital gold mine, that
-                supports the creators. A place where you can Make Collect and
-                Sell digital arts.
+               {details.homeDescription}
               </h6>
               <div className="lg:flex items-center lg:gap-x-4 x2:gap-x-6 xl:gap-x-10 mb-8 lg:mb-0">
                 <button className="py-3 px-6 rounded-lg bg-[#0162ff] text-white font-semibold mb-8 lg:mb-0">

services/constants.js

@@ -0,0 +1,4 @@
+export const BASE_URL ="https://marketplace-engine.lazarus.network/api/v1.0"
+
+
+export const GET_DETAILS="/details"

services/listofAPIs.js

@@ -0,0 +1,12 @@
+import {BASE_URL,GET_DETAILS} from './constants'
+
+export const getDetails = async(headers) => {
+    const Link = `${BASE_URL}${GET_DETAILS}`
+     await  axios.get(Link,{headers}).then((ers)=>{
+
+    console.log("ers",res)
+    return res
+   }).catch((err)=>{
+    console.log(err)
+   })
+}

slices/getDetailsSlice.js

@@ -0,0 +1,50 @@
+import { createSlice,createAsyncThunk} from '@reduxjs/toolkit'
+import * as service from "../services/listofAPIs"
+import axios  from 'axios'
+ const BASE_URL=process.env.NEXT_PUBLIC_BASE_URL
+ import { GET_DETAILS } from '../services/constants'
+ const Link=`${BASE_URL}${GET_DETAILS}`
+export const  fetchDetails = createAsyncThunk('details/fetchdetails', async (args,{rejectWithValue}) => {
+
+    try {
+        const headers = {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+          };
+      const data= await axios.get(Link,headers)
+      console.log("data",data.data.payload)
+      return data.data.payload
+    } catch (error) {
+        rejectWithValue(error.respnse)
+    }
+  })
+const initialState = {
+  details: [],
+  loading: true,
+  error: null
+}
+
+const detailsSlice = createSlice({
+  name: 'details',
+  initialState,
+  extraReducers:{
+
+      [fetchDetails.pending]:(state, {payload}) => {
+        state.loading=true
+      },
+      [fetchDetails.fulfilled]:(state, {payload}) => {
+        state.loading=false,
+        state.details=payload
+        console.log("payload",payload)
+      },
+      [fetchDetails.rejected]:(state, {payload}) => {
+        state.loading=false,
+        state.details=payload
+
+      }
+  }
+})
+
+
+
+export default detailsSlice.reducer

store.js

@@ -2,13 +2,14 @@ import { configureStore } from "@reduxjs/toolkit";
 import userReducer from "./slices/userSlice"
 import balanceReducer from "./slices/balanceSlice"
 import modelReducer from "./slices/modelSlice"
-
+import detailsReducer from "./slices/getDetailsSlice"
 
 export default configureStore({
     reducer:{
         user:userReducer,
         balance:balanceReducer,
         model:modelReducer,
+        details:detailsReducer
     }
 })