feat: Fetch collections (#2102)

.env.development

@@ -16,6 +16,7 @@ REACT_APP_NODE_4 = "https://nodes.pancakeswap.com/"
 REACT_APP_GRAPH_API_PROFILE = "https://api.thegraph.com/subgraphs/name/pancakeswap/profile"
 REACT_APP_GRAPH_API_PREDICTION = "https://api.thegraph.com/subgraphs/name/pancakeswap/prediction-v2"
 REACT_APP_GRAPH_API_LOTTERY = "https://api.thegraph.com/subgraphs/name/pancakeswap/lottery"
+REACT_APP_GRAPH_API_NFT_MARKET = "https://api.thegraph.com/subgraphs/name/chefnyan/nft-markets"
 
 REACT_APP_SNAPSHOT_BASE_URL = "https://testnet.snapshot.org"
 REACT_APP_SNAPSHOT_VOTING_API = "https://xtjyd0liqe.execute-api.ap-northeast-1.amazonaws.com/dev/api"

.env.production

@@ -16,6 +16,7 @@ REACT_APP_NODE_4 = "https://nodes.pancakeswap.com/"
 REACT_APP_GRAPH_API_PROFILE = "https://api.thegraph.com/subgraphs/name/pancakeswap/profile"
 REACT_APP_GRAPH_API_PREDICTION = "https://api.thegraph.com/subgraphs/name/pancakeswap/prediction-v2"
 REACT_APP_GRAPH_API_LOTTERY = "https://api.thegraph.com/subgraphs/name/pancakeswap/lottery"
+REACT_APP_GRAPH_API_NFT_MARKET = ""
 
 REACT_APP_SNAPSHOT_BASE_URL = "https://hub.snapshot.org"
 REACT_APP_SNAPSHOT_VOTING_API = "https://voting-api.pancakeswap.info/api"

src/config/constants/endpoints.ts

@@ -15,3 +15,4 @@ export const GRAPH_API_PREDICTION_V1 = 'https://api.thegraph.com/subgraphs/name/
 
 export const INFO_CLIENT = 'https://bsc.streamingfast.io/subgraphs/name/pancakeswap/exchange-v2'
 export const BLOCKS_CLIENT = 'https://api.thegraph.com/subgraphs/name/pancakeswap/blocks'
+export const GRAPH_API_NFTMARKET = process.env.REACT_APP_GRAPH_API_NFT_MARKET

src/state/index.ts

@@ -20,6 +20,7 @@ import mint from './mint/reducer'
 import lists from './lists/reducer'
 import burn from './burn/reducer'
 import multicall from './multicall/reducer'
+import nftMarketReducer from './nftMarket/reducer'
 
 const PERSISTED_KEYS: string[] = ['user', 'transactions', 'lists', 'profile', 'collectibles']
 
@@ -37,6 +38,7 @@ const store = configureStore({
     voting: votingReducer,
     lottery: lotteryReducer,
     info: infoReducer,
+    nftMarket: nftMarketReducer,
 
     // Exchange
     user,

src/state/nftMarket/helpers.ts

@@ -0,0 +1,29 @@
+import { request, gql } from 'graphql-request'
+import { GRAPH_API_NFTMARKET } from 'config/constants/endpoints'
+
+export const getCollections = async (): Promise<any[]> => {
+  try {
+    const res = await request(
+      GRAPH_API_NFTMARKET,
+      gql`
+        {
+          collections {
+            id
+            name
+            symbol
+            active
+            totalVolumeBNB
+            numberTokensListed
+            tradingFee
+            creatorFee
+          }
+        }
+      `,
+    )
+
+    return res.collections
+  } catch (error) {
+    console.error('Failed to fetch NFT collections', error)
+    return []
+  }
+}

src/state/nftMarket/hooks.ts

@@ -0,0 +1,10 @@
+import { useEffect } from 'react'
+import { useAppDispatch } from 'state'
+import { fetchCollections } from './reducer'
+
+export const useFetchCollections = () => {
+  const dispatch = useAppDispatch()
+  useEffect(() => {
+    dispatch(fetchCollections())
+  }, [dispatch])
+}

src/state/nftMarket/reducer.ts

@@ -0,0 +1,28 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+import { getCollections } from './helpers'
+import { State, Collection } from './types'
+
+const initialState: State = {
+  data: {
+    collections: [],
+    users: [],
+  },
+}
+
+export const fetchCollections = createAsyncThunk<Collection[]>('nft/fetchFarmsPublicDataAsync', async () => {
+  const collections = await getCollections()
+  return collections
+})
+
+export const NftMarket = createSlice({
+  name: 'NftMarket',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(fetchCollections.fulfilled, (state, action) => {
+      state.data.collections = action.payload
+    })
+  },
+})
+
+export default NftMarket.reducer

src/state/nftMarket/types.ts

@@ -4,8 +4,10 @@ import { BigNumberish } from 'ethers'
 // Users -> Nft tokens IDs
 
 export interface State {
-  collections: Collection[]
-  users: User[]
+  data: {
+    collections: Collection[]
+    users: User[]
+  }
 }
 
 export interface Transaction {
@@ -30,18 +32,15 @@ export interface NFT {
 }
 
 export interface Collection {
-  address: string
+  id: string
   name: string
   symbol: string
   active: boolean
-  totalTrades: BigNumberish
   totalVolumeBNB: BigNumberish
   numberTokensListed: BigNumberish
-  nfts: NFT[]
-  creatorAddress: string
   tradingFee: BigNumberish
   creatorFee: BigNumberish
-  whitelistChecker: string
+  nfts: NFT[]
 }
 
 export interface User {

src/views/nft/market/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
+import { useFetchCollections } from 'state/nftMarket/hooks'
 
 const Market = () => {
+  useFetchCollections()
   return <div>Market</div>
 }