From c48e939b34f3f58cb756a1fdcf3e5b443ec92206 Mon Sep 17 00:00:00 2001
From: RabbitDoge <72658581+RabbitDoge@users.noreply.github.com>
Date: Tue, 7 Sep 2021 15:16:24 +0900
Subject: [PATCH] feat: Fetch collections (#2102)

---
 .env.development                  |  1 +
 .env.production                   |  1 +
 src/config/constants/endpoints.ts |  1 +
 src/state/index.ts                |  2 ++
 src/state/nftMarket/helpers.ts    | 29 +++++++++++++++++++++++++++++
 src/state/nftMarket/hooks.ts      | 10 ++++++++++
 src/state/nftMarket/index.ts      | 15 ---------------
 src/state/nftMarket/reducer.ts    | 28 ++++++++++++++++++++++++++++
 src/state/nftMarket/types.ts      | 13 ++++++-------
 src/views/nft/market/index.tsx    |  2 ++
 10 files changed, 80 insertions(+), 22 deletions(-)
 create mode 100644 src/state/nftMarket/helpers.ts
 create mode 100644 src/state/nftMarket/hooks.ts
 delete mode 100644 src/state/nftMarket/index.ts
 create mode 100644 src/state/nftMarket/reducer.ts

diff --git a/.env.development b/.env.development
index 0165c7498a42e..a0442dca521c6 100644
--- a/.env.development
+++ b/.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"
diff --git a/.env.production b/.env.production
index 149cd7eb1c710..c6d723d6e4c66 100644
--- a/.env.production
+++ b/.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"
diff --git a/src/config/constants/endpoints.ts b/src/config/constants/endpoints.ts
index 96971c3ed7961..9e9bb444f5448 100644
--- a/src/config/constants/endpoints.ts
+++ b/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
diff --git a/src/state/index.ts b/src/state/index.ts
index 1f23f6ecb7415..eb8438c4ce64b 100644
--- a/src/state/index.ts
+++ b/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,
diff --git a/src/state/nftMarket/helpers.ts b/src/state/nftMarket/helpers.ts
new file mode 100644
index 0000000000000..c9ec5571e832b
--- /dev/null
+++ b/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 []
+  }
+}
diff --git a/src/state/nftMarket/hooks.ts b/src/state/nftMarket/hooks.ts
new file mode 100644
index 0000000000000..84274901905c2
--- /dev/null
+++ b/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])
+}
diff --git a/src/state/nftMarket/index.ts b/src/state/nftMarket/index.ts
deleted file mode 100644
index ebffddb8a9afe..0000000000000
--- a/src/state/nftMarket/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit'
-import { State } from './types'
-
-const initialState: State = {
-  collections: [],
-  users: [],
-}
-
-export const NftMarket = createSlice({
-  name: 'NftMarket',
-  initialState,
-  reducers: {},
-})
-
-export default NftMarket.reducer
diff --git a/src/state/nftMarket/reducer.ts b/src/state/nftMarket/reducer.ts
new file mode 100644
index 0000000000000..f06fd834c747a
--- /dev/null
+++ b/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
diff --git a/src/state/nftMarket/types.ts b/src/state/nftMarket/types.ts
index 263d5ac2ddaba..72b114ec9d843 100644
--- a/src/state/nftMarket/types.ts
+++ b/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 {
diff --git a/src/views/nft/market/index.tsx b/src/views/nft/market/index.tsx
index 914c8f86f5bfb..ff3d406b6c907 100644
--- a/src/views/nft/market/index.tsx
+++ b/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>
 }