Merge pull request #704 from clrfund/fix/slow-load

Fix slow loading landing page

vue-app/.env.example

@@ -55,14 +55,12 @@ VITE_RECIPIENT_REGISTRY_TYPE=optimistic
 
 VITE_RECIPIENT_REGISTRY_POLICY=QmeygKjvrpidJeFHv6ywjUrj718nwtFQgCCPPR4r5nL87R
 
-# Comma-separated list of IPFS hashes
-VITE_EXTRA_ROUNDS=
-
 # Operator of clr.fund instance
 VITE_OPERATOR=
 
-# Index of first round to consider
-VITE_FIRST_ROUND=
+# Comma-separated list of cancelled round address that should not display on the app
+# VITE_VOIDED_ROUNDS=0x123,0x456
+VITE_VOIDED_ROUNDS=
 
 # Default Language
 VITE_I18N_LOCALE=

vue-app/src/api/core.ts

@@ -108,3 +108,8 @@ export const recipientJoinDeadlineConfig = deadline?.isValid ? deadline : null
 
 // make sure walletconnect qrcode modal is not blocked by the Wallet Modal
 export const walletConnectZIndex = import.meta.env.VITE_WALLET_CONNECT_Z_INDEX || '1500'
+
+// use this to filter out rounds that should not be displayed on the app
+export const voidedRounds = new Set(
+  (import.meta.env.VITE_VOIDED_ROUNDS || '').split(',').map(round => round.toLowerCase()),
+)

vue-app/src/api/round.ts

@@ -5,7 +5,7 @@ import { PubKey } from '@clrfund/maci-utils'
 import { FundingRound, MACI } from './abi'
 import { provider, factory } from './core'
 import { getTotalContributed } from './contributions'
-import { getRounds } from './rounds'
+import { isVoidedRound } from './rounds'
 import sdk from '@/graphql/sdk'
 
 import { isSameAddress } from '@/utils/accounts'
@@ -59,13 +59,8 @@ export async function getCurrentRound(): Promise<string | null> {
   if (fundingRoundAddress === '0x0000000000000000000000000000000000000000') {
     return null
   }
-  const rounds = await getRounds()
-  const roundIndex = rounds.findIndex(round => isSameAddress(round.address, fundingRoundAddress))
 
-  if (roundIndex >= 0) {
-    return fundingRoundAddress
-  }
-  return null
+  return isVoidedRound(fundingRoundAddress) ? null : fundingRoundAddress
 }
 
 function toRoundInfo(data: any, network: string): RoundInfo {

vue-app/src/api/rounds.ts

@@ -1,6 +1,6 @@
 import sdk from '@/graphql/sdk'
 import extraRounds from '@/rounds/rounds.json'
-import { chain } from './core'
+import { chain, voidedRounds } from './core'
 
 export interface Round {
   index: number
@@ -10,32 +10,39 @@ export interface Round {
   startTime: number
 }
 
+export function isVoidedRound(address: string): boolean {
+  return voidedRounds.has(address.toLowerCase())
+}
+
 function toRoundId({ network, address }: { network: string; address: string }): string {
   return `${network}-${address}`.toLowerCase()
 }
 
 //TODO: update to take factory address as a parameter
 export async function getRounds(): Promise<Round[]> {
   //TODO: updateto pass factory address as a parameter, default to env. variable
-  //NOTE: why not instantiate the sdk here?
-  const data = await sdk.GetRounds()
+
+  let data
+  try {
+    data = await sdk.GetRounds()
+  } catch {
+    return []
+  }
 
   const rounds: Round[] = extraRounds.map(({ address, network, startTime }, index): Round => {
     return { index, address, network, hasLeaderboard: true, startTime }
   })
 
   const leaderboardRounds = new Set(rounds.map(r => toRoundId({ network: r.network || '', address: r.address })))
 
-  const firstRound = Number(import.meta.env.VITE_FIRST_ROUND || 0)
+  for (const fundingRound of data.fundingRounds) {
+    const address = fundingRound.id
 
-  for (let roundIndex = 0; roundIndex < data.fundingRounds.length; roundIndex++) {
-    if (roundIndex < firstRound) {
+    if (isVoidedRound(address)) {
       // filter out cancelled or test rounds
       continue
     }
 
-    const fundingRound = data.fundingRounds[roundIndex]
-    const address = fundingRound.id
     const isLeaderboardRound = leaderboardRounds.has(toRoundId({ network: chain.label, address }))
     if (!isLeaderboardRound) {
       rounds.push({

vue-app/src/views/Landing.vue

@@ -177,6 +177,7 @@ import ImageResponsive from '@/components/ImageResponsive.vue'
 import { useAppStore } from '@/stores'
 import { storeToRefs } from 'pinia'
 import { getAssetsUrl } from '@/utils/url'
+import { isSameAddress } from '@/utils/accounts'
 
 const appStore = useAppStore()
 const {
@@ -200,7 +201,7 @@ const leaderboardRoute = computed(() => {
   }
 
   const roundAddress = currentRoundAddress.value || ''
-  const leaderboard = leaderboardRounds.find(round => round.address === roundAddress)
+  const leaderboard = leaderboardRounds.find(round => isSameAddress(round.address, roundAddress))
   return leaderboard ? { name: 'leaderboard', params: { network: leaderboard.network, address: roundAddress } } : null
 })