Update constants and fix loading state

src/config/constants.js

@@ -131,7 +131,10 @@ export const SNAPSHOT_INTERFACE_URL = {
   mainnet: 'https://snapshot.org'
 }
 
-export const SNAPSHOT_SPACE_ID = 'npmgov.eth'
+export const SNAPSHOT_SPACE_ID = {
+  testnet: process.env.NEXT_PUBLIC_TESTNET_SNAPSHOT_SPACE_ID,
+  mainnet: process.env.NEXT_PUBLIC_MAINNET_SNAPSHOT_SPACE_ID
+}
 
 export const DAYS = 24 * 60 * 60
 

src/context/CoversAndProductsData2.jsx

@@ -50,7 +50,7 @@ export function useCoversAndProducts2 () {
 }
 
 export const CoversAndProductsProvider2 = ({ children }) => {
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(true)
   const [data, setData] = useState([])
   const { networkId } = useNetwork()
   const { account } = useWeb3React()

src/hooks/usePoolsTVL.jsx

@@ -56,6 +56,8 @@ export const usePoolsTVL = (NPMTokenAddress) => {
 
     const networkId = getNetworkId()
 
+    if (!networkId) { return }
+
     fetchPoolsTVL(networkId, getQuery())
       .then(async ({ bondPools, pools }) => {
         const bondsPayload = bondPools.map((bondPool) => {

src/hooks/useSnapshotProposals.jsx

@@ -6,25 +6,25 @@ import {
 
 import { useRouter } from 'next/router'
 
-import { SNAPSHOT_SPACE_ID } from '@/src/config/constants'
 import { useNetwork } from '@/src/context/Network'
 import { formatCurrency } from '@/utils/formatter/currency'
 import {
   getCategoryFromTitle,
   getSnapshotApiURL,
+  getSnapshotSpaceId,
   getTagFromTitle
 } from '@/utils/snapshot'
 import { DEFAULT_ROWS_PER_PAGE } from '@/modules/governance/proposals-table/ProposalsTable'
 
-const getProposalsQuery = (page, rowsPerPage, titleFilter = '') => {
+const getProposalsQuery = (networkId, page, rowsPerPage, titleFilter = '') => {
   const skip = (page - 1) * rowsPerPage
 
   return `
   proposals(
     first: ${rowsPerPage},
     skip: ${skip},
     where: {
-      space_in: ["${SNAPSHOT_SPACE_ID}"],
+      space_in: ["${getSnapshotSpaceId(networkId)}"],
       title_contains: "${titleFilter}"
     },
     orderBy: "created",
@@ -46,10 +46,10 @@ const getProposalsQuery = (page, rowsPerPage, titleFilter = '') => {
   `
 }
 
-const getProposalsCountQuery = () => {
+const getProposalsCountQuery = (networkId) => {
   return `
 space(
-  id: "${SNAPSHOT_SPACE_ID}"
+  id: "${getSnapshotSpaceId(networkId)}"
 ) {
   activeProposals
   proposalsCount
@@ -108,8 +108,8 @@ export const useSnapshotProposals = () => {
         body: JSON.stringify({
           query: `
             query ProposalsWithCount { 
-              ${getProposalsQuery(page, rowsPerPage, titleFilter)} 
-              ${fetchCount ? getProposalsCountQuery() : ''} 
+              ${getProposalsQuery(networkId, page, rowsPerPage, titleFilter)} 
+              ${fetchCount ? getProposalsCountQuery(networkId) : ''} 
             }
           `
         })

src/hooks/useTokenStakingPools.jsx

@@ -39,9 +39,7 @@ const getQuery = (itemsToSkip) => {
 }
 
 export const useTokenStakingPools = () => {
-  const [data, setData] = useState({
-    pools: []
-  })
+  const [data, setData] = useState({ pools: [] })
   const [loading, setLoading] = useState(false)
   const [itemsToSkip, setItemsToSkip] = useState(0)
   const [hasMore, setHasMore] = useState(true)

src/modules/pools/staking/StakingCard.jsx

@@ -80,10 +80,10 @@ export const StakingCard = ({ data, tvl, getPriceByAddress }) => {
   }
 
   const poolKey = data.key
-  const stakedAmount = info.myStake
+  const stakedAmount = info.myStake || '0'
   const rewardAmount = info.rewards
 
-  const hasStaked = isGreater(info.myStake, '0')
+  const hasStaked = isGreater(stakedAmount, '0')
   const approxBlockTime =
     config.networks.getChainConfig(networkId).approximateBlockTime
   const lockupPeriod = toBN(data.lockupPeriodInBlocks).multipliedBy(
@@ -94,11 +94,13 @@ export const StakingCard = ({ data, tvl, getPriceByAddress }) => {
   const sTokenImgSrc = getTokenImgSrc(stakingTokenSymbol)
   const poolName = info.name
 
-  const apr = getApr(networkId, {
-    stakingTokenPrice: getPriceByAddress(info.stakingToken),
-    rewardPerBlock: info.rewardPerBlock,
-    rewardTokenPrice: getPriceByAddress(info.rewardToken)
-  })
+  const apr = info.stakingToken && info.rewardToken
+    ? getApr(networkId, {
+      stakingTokenPrice: getPriceByAddress(info.stakingToken),
+      rewardPerBlock: info.rewardPerBlock,
+      rewardTokenPrice: getPriceByAddress(info.rewardToken)
+    })
+    : '0'
 
   // Used for sorting purpose only
   useEffect(() => {

src/pages/_document.jsx

@@ -46,6 +46,12 @@ class MyDocument extends Document {
           <meta name='twitter:description' content={ogDescription} />
           <meta name='twitter:image' content={ogImageUri} />
 
+          {/* preload */}
+          <link rel='preload' as='image' href='/cover-actions/purchase.png' />
+          <link rel='preload' as='image' href='/cover-actions/add-liquidity.png' />
+          <link rel='preload' as='image' href='/cover-actions/report.png' />
+          <link rel='preload' as='image' href='/cover-actions/claim.png' />
+
         </Head>
         <body
           translate='no'

src/utils/snapshot.js

@@ -43,16 +43,22 @@ const getSnapshotInterfaceBaseURL = (networkId) => {
   return base
 }
 
+export const getSnapshotSpaceId = (networkId) => {
+  const { isMainNet } = getNetworkInfo(networkId)
+
+  return isMainNet ? SNAPSHOT_SPACE_ID.mainnet : SNAPSHOT_SPACE_ID.testnet
+}
+
 export const getProposalLink = (networkId, proposalId) => {
   const base = getSnapshotInterfaceBaseURL(networkId)
 
-  return `${base}/#/${SNAPSHOT_SPACE_ID}/proposal/${proposalId}`
+  return `${base}/#/${getSnapshotSpaceId(networkId)}/proposal/${proposalId}`
 }
 
 export const getSpaceLink = (networkId) => {
   const base = getSnapshotInterfaceBaseURL(networkId)
 
-  return `${base}/#/${SNAPSHOT_SPACE_ID}`
+  return `${base}/#/${getSnapshotSpaceId(networkId)}`
 }
 
 export const snapshotColors = {