Merge pull request #383 from makerdao/develop

Hotfix , delegates api timeout

Author: rafinskipg

lib/theme.js

@@ -60,6 +60,8 @@ export default {
     tagColorFifteenBg: '#FFFBEF',
     tagColorSixteen: '#FF8237',
     tagColorSixteenBg: '#FFFBEF',
+    tagColorSeventeen: '#AD927D',
+    tagColorSeventeenBg: '#FFF9F4',
     voterYellow: '#FDC134',
     bull: '#1AAB9B',
     bear: '#F77249',
@@ -122,6 +124,8 @@ export default {
         tagColorFifteenBg: '#121212',
         tagColorSixteen: '#FF8237',
         tagColorSixteenBg: '#121212',
+        tagColorSeventeen: '#AD927D',
+        tagColorSeventeenBg: '#121212',
         bull: '#1AAB9B',
         bear: '#F77249'
       }

modules/delegates/api/fetchDelegates.ts

@@ -10,13 +10,13 @@ import {
   DelegateContractInformation,
   DelegateRepoInformation
 } from 'modules/delegates/types';
-import { getExecutiveProposals, getGithubExecutives } from 'modules/executive/api/fetchExecutives';
+import { getGithubExecutives } from 'modules/executive/api/fetchExecutives';
 import { getContracts } from 'modules/web3/helpers/getContracts';
 import { networkNameToChainId } from 'modules/web3/helpers/chain';
 import { ZERO_SLATE_HASH } from 'modules/executive/helpers/zeroSlateHash';
 import { getSlateAddresses } from 'modules/executive/helpers/getSlateAddresses';
 import { CMSProposal } from 'modules/executive/types';
-import { fetchAddressPollVoteHistory } from 'modules/polling/api/fetchAddressPollVoteHistory';
+import { fetchLastPollVote } from 'modules/polling/api/fetchLastPollvote';
 
 function mergeDelegateInfo(
   onChainDelegate: DelegateContractInformation,
@@ -37,15 +37,14 @@ function mergeDelegateInfo(
     picture: githubDelegate?.picture || '',
     id: onChainDelegate.voteDelegateAddress,
     externalUrl: githubDelegate?.externalUrl,
-    lastVote: null,
+    lastVoteDate: null,
     communication: githubDelegate?.communication,
     combinedParticipation: githubDelegate?.combinedParticipation,
     pollParticipation: githubDelegate?.pollParticipation,
     executiveParticipation: githubDelegate?.executiveParticipation,
     mkrDelegated: onChainDelegate.mkrDelegated,
     proposalsSupported: onChainDelegate.proposalsSupported,
-    execSupported: onChainDelegate.execSupported,
-    pollVoteHistory: onChainDelegate.pollVoteHistory
+    execSupported: onChainDelegate.execSupported
   };
 }
 
@@ -100,6 +99,7 @@ export async function fetchDelegates(network?: SupportedNetworks): Promise<Deleg
 
   const contracts = getContracts(networkNameToChainId(currentNetwork));
   const executives = await getGithubExecutives(currentNetwork);
+
   const delegates = await Promise.all(
     delegatesInfo.map(async delegate => {
       const votedSlate = await contracts.chief.votes(delegate.voteDelegateAddress);
@@ -109,12 +109,13 @@ export async function fetchDelegates(network?: SupportedNetworks): Promise<Deleg
       const execSupported: CMSProposal | undefined = executives?.find(proposal =>
         votedProposals?.find(vp => vp.toLowerCase() === proposal?.address?.toLowerCase())
       );
-      const pollVoteHistory = await fetchAddressPollVoteHistory(delegate.voteDelegateAddress, currentNetwork);
+
+      const lastVote = await fetchLastPollVote(delegate.voteDelegateAddress, currentNetwork);
       return {
         ...delegate,
         proposalsSupported,
         execSupported,
-        pollVoteHistory
+        lastVoteDate: lastVote ? lastVote.blockTimestamp : null
       };
     })
   );

modules/delegates/components/DelegateCard.tsx

@@ -38,8 +38,6 @@ export function DelegateCard({ delegate }: PropTypes): React.ReactElement {
 
   const isOwner = delegate.voteDelegateAddress.toLowerCase() === voteDelegateContractAddress?.toLowerCase();
 
-  const lastVote = delegate.pollVoteHistory.sort((a, b) => (a.blockTimestamp > b.blockTimestamp ? -1 : 1))[0];
-
   return (
     <Card
       sx={{
@@ -50,10 +48,11 @@ export function DelegateCard({ delegate }: PropTypes): React.ReactElement {
     >
       <Box px={[3, 4]} pb={[3, 4]} pt={3}>
         <Box mb={2}>
-          {delegate.pollVoteHistory && (
-            <LastVoted expired={delegate.expired} date={lastVote ? lastVote.blockTimestamp : null} left />
-          )}
-          {!delegate.pollVoteHistory && <SkeletonThemed width={'200px'} height={'15px'} />}
+          <LastVoted
+            expired={delegate.expired}
+            date={delegate.lastVoteDate ? delegate.lastVoteDate : ''}
+            left
+          />
         </Box>
         <Flex
           sx={{

modules/delegates/components/DelegatesSort.tsx

@@ -14,7 +14,7 @@ export default function DelegatesSort(): JSX.Element {
       />
       <ListboxPopover sx={{ variant: 'listboxes.default.popover' }}>
         <ListboxList sx={{ variant: 'listboxes.default.list' }}>
-          <ListboxOption value={delegatesSortEnum.random}>Sort order</ListboxOption>
+          <ListboxOption value={delegatesSortEnum.random}>Sort by default</ListboxOption>
           <ListboxOption value={delegatesSortEnum.mkrDelegated}>Sort by MKR delegated</ListboxOption>
           <ListboxOption value={delegatesSortEnum.creationDate}>Sort by creation date</ListboxOption>
         </ListboxList>

modules/delegates/types/delegate.d.ts

@@ -31,7 +31,7 @@ export type Delegate = {
   picture: string;
   status: DelegateStatus;
   expired: boolean;
-  lastVote: Date | null;
+  lastVoteDate: string | null;
   expirationDate: Date;
   externalUrl?: string;
   combinedParticipation?: string;
@@ -41,7 +41,6 @@ export type Delegate = {
   mkrDelegated: string;
   proposalsSupported: number;
   execSupported: CMSProposal | undefined;
-  pollVoteHistory: PollVoteHistory;
 };
 
 export type DelegationHistory = {

modules/executive/api/fetchExecutives.ts

@@ -50,8 +50,23 @@ export async function getGithubExecutives(network: SupportedNetworks): Promise<C
     .filter(x => !!x)
     .filter(x => x?.address !== ZERO_ADDRESS) as CMSProposal[];
 
+  const sortedProposals = filteredProposals
+    .sort((a, b) => new Date(b.date || '').getTime() - new Date(a.date || '').getTime())
+    .sort(a => (a.active ? -1 : 1)) // Sort by active first
+    .slice(0, 100);
+
+  if (config.USE_FS_CACHE) {
+    fsCacheSet(cacheKey, JSON.stringify(sortedProposals), network);
+  }
+
+  return sortedProposals;
+}
+
+async function getGithubExecutivesWithMKR(network: SupportedNetworks): Promise<CMSProposal[]> {
+  const proposals = await getGithubExecutives(network);
+
   const mkrSupports = await Promise.all(
-    filteredProposals.map(async proposal => {
+    proposals.map(async proposal => {
       const mkrSupport = await getExecutiveMKRSupport(proposal.address, network);
       return {
         ...proposal,
@@ -62,16 +77,7 @@ export async function getGithubExecutives(network: SupportedNetworks): Promise<C
     })
   );
 
-  const sortedProposals = mkrSupports
-    .sort((a, b) => new Date(b.date || '').getTime() - new Date(a.date || '').getTime())
-    .sort(a => (a.active ? -1 : 1)) // Sort by active first
-    .slice(0, 100);
-
-  if (config.USE_FS_CACHE) {
-    fsCacheSet(cacheKey, JSON.stringify(sortedProposals), network);
-  }
-
-  return sortedProposals;
+  return mkrSupports;
 }
 
 export async function getExecutiveProposals(
@@ -96,7 +102,7 @@ export async function getExecutiveProposals(
     }
   }
 
-  const proposals = await getGithubExecutives(currentNetwork);
+  const proposals = await getGithubExecutivesWithMKR(currentNetwork);
 
   const sorted = proposals.sort((a, b) => {
     if (sortBy === 'mkr') {
@@ -145,7 +151,7 @@ export async function getExecutiveProposal(
   // Use goerli as a Key for Goerli fork. In order to pick the the current executives
   const currentNetwork = net === SupportedNetworks.GOERLIFORK ? SupportedNetworks.GOERLI : net;
 
-  const proposals = await getGithubExecutives(currentNetwork);
+  const proposals = await getGithubExecutivesWithMKR(currentNetwork);
 
   const proposal = proposals.find(proposal => proposal.key === proposalId || proposal.address === proposalId);
   if (!proposal) return null;

modules/executive/components/DateFilter.tsx

@@ -42,7 +42,7 @@ export default function DateFilter(props): JSX.Element {
   return (
     <FilterButton
       name={() => {
-        if (!startDateDisplay && !endDateDisplay) return 'Date Posted';
+        if (!startDateDisplay && !endDateDisplay) return 'Date Filter';
         if (!startDateDisplay) return `Date Filter: before ${endDateDisplay}`;
         if (!endDateDisplay) return `Date Filter: after ${startDateDisplay}`;
         return `Date Filter: ${startDateDisplay} - ${endDateDisplay}`;

modules/gql/queries/lastPollVote.ts

@@ -0,0 +1,14 @@
+import { gql } from 'graphql-request';
+
+export const lastPollVote = gql`
+  query lastPollVote($argAddress: String!) {
+    allCurrentVotes(argAddress: $argAddress, first: 1) {
+      nodes {
+        pollId
+        optionId
+        optionIdRaw
+        blockTimestamp
+      }
+    }
+  }
+`;

modules/polling/api/fetchLastPollvote.ts

@@ -0,0 +1,28 @@
+import { gqlRequest } from 'modules/gql/gqlRequest';
+import { lastPollVote } from 'modules/gql/queries/lastPollVote';
+import { SupportedNetworks } from 'modules/web3/constants/networks';
+import { networkNameToChainId } from 'modules/web3/helpers/chain';
+import { parseRawOptinIdRankedChoiceOption } from '../helpers/parseRawOptionIdRankedChoiceOption';
+import { PollVote } from '../types';
+
+export async function fetchLastPollVote(
+  address: string,
+  network: SupportedNetworks
+): Promise<PollVote | null> {
+  const data = await gqlRequest({
+    chainId: networkNameToChainId(network),
+    query: lastPollVote,
+    variables: { argAddress: address.toLowerCase() }
+  });
+
+  // Parse the rankedChoice option
+  const res: PollVote[] = data.allCurrentVotes.nodes.map(o => {
+    const rankedChoiceOption = parseRawOptinIdRankedChoiceOption(o.optionIdRaw);
+    return {
+      ...o,
+      rankedChoiceOption
+    };
+  });
+
+  return res.length > 0 ? res[0] : null;
+}

modules/polling/components/PollCategoryTag.tsx

@@ -73,11 +73,15 @@ export function PollCategoryTag({
     Offboard: {
       color: 'tagColorSixteen',
       backgroundColor: 'tagColorSixteenBg'
+    },
+    Uncategorized: {
+      color: 'tagColorSeventeen',
+      backgroundColor: 'tagColorSeventeenBg'
     }
   };
 
-  const color = categories[category] ? categories[category].color : '#AD927D';
-  const backgroundColor = categories[category] ? categories[category].backgroundColor : '#FFF9F4';
+  const color = categories[category] ? categories[category].color : 'tagColorSeventeen';
+  const backgroundColor = categories[category] ? categories[category].backgroundColor : 'tagColorSeventeenBg';
 
   const [categoryFilter, setCategoryFilter] = useUiFiltersStore(
     state => [state.pollFilters.categoryFilter, state.setCategoryFilter],

modules/polling/types/pollVote.d.ts

@@ -3,15 +3,15 @@ type LegacyPollVote = {
   optionId: number;
   optionIdRaw?: string;
   rankedChoiceOption?: number[];
-  blockTimestamp: number;
+  blockTimestamp: string;
 };
 
 type RankedChoicePollVote = {
   pollId: number;
   optionId?: number;
   optionIdRaw?: string;
   rankedChoiceOption: number[];
-  blockTimestamp: number;
+  blockTimestamp: string;
 };
 
 export type PollVote = LegacyPollVote | RankedChoicePollVote;

pages/api/delegates/index.ts

@@ -13,6 +13,6 @@ export default withApiHandler(async (req: NextApiRequest, res: NextApiResponse<D
   invariant(isSupportedNetwork(network), `unsupported network ${network}`);
   const delegates = await fetchDelegates(network);
 
-  res.setHeader('Cache-Control', 's-maxage=15, stale-while-revalidate');
+  res.setHeader('Cache-Control', 's-maxage=3600, stale-while-revalidate');
   res.status(200).json(delegates);
 });

pages/api/delegates/names.ts

@@ -15,6 +15,6 @@ export default withApiHandler(async (req: NextApiRequest, res: NextApiResponse<D
   invariant(isSupportedNetwork(network), `unsupported network ${network}`);
   const delegates = await fetchDelegatesInformation(network);
 
-  res.setHeader('Cache-Control', 's-maxage=15, stale-while-revalidate');
+  res.setHeader('Cache-Control', 's-maxage=3600, stale-while-revalidate');
   return res.status(200).json(delegates);
 });

pages/delegates/index.tsx

@@ -91,20 +91,19 @@ const Delegates = ({ delegates, stats }: Props) => {
           <Heading variant="microHeading" mr={3} sx={{ display: ['none', 'block'] }}>
             Filters
           </Heading>
-          <DelegatesFilter delegates={delegates} />
+          <DelegatesSort />
         </Flex>
 
         <Flex sx={{ ml: [0, 3], mt: [2, 0] }}>
+          <DelegatesFilter delegates={delegates} />
           <Button
             variant={'outline'}
-            sx={{ mr: 3 }}
+            sx={{ ml: 3 }}
             onClick={resetFilters}
             data-testid="delegate-reset-filters"
           >
             Clear filters
           </Button>
-
-          <DelegatesSort />
         </Flex>
       </Flex>
 

pages/executive.tsx

@@ -136,9 +136,9 @@ export const ExecutiveOverview = ({ proposals }: { proposals?: Proposal[] }): JS
   });
 
   const isLoadingInitialData = !paginatedProposals && !error;
+
   const isLoadingMore =
-    isLoadingInitialData ||
-    (size > 0 && paginatedProposals && typeof paginatedProposals[size - 1] === 'undefined' && isValidating);
+    size > 0 && paginatedProposals && typeof paginatedProposals[size - 1] === 'undefined' && isValidating;
 
   const loadMore = () => {
     setSize(size + 1);

pages/polling.tsx

@@ -141,7 +141,6 @@ const PollingOverview = ({ polls, categories }: Props) => {
       />
 
       <Stack gap={3}>
-        {bpi <= 3 && account && <BallotStatus />}
         <Flex sx={{ alignItems: 'center', flexDirection: ['column', 'row'] }}>
           <Flex sx={{ alignItems: 'center' }}>
             <Heading variant="microHeading" mr={3} sx={{ display: ['none', 'block'] }}>
@@ -159,14 +158,12 @@ const PollingOverview = ({ polls, categories }: Props) => {
             {filteredPolls.length > 0 ? (
               <Stack>
                 <div>
-                  <Heading
-                    mb={3}
-                    mt={4}
-                    as="h4"
-                    sx={{ display: sortedEndDatesActive.length > 0 ? undefined : 'none' }}
-                  >
-                    Active Polls
-                  </Heading>
+                  <Flex sx={{ alignItems: 'center', justifyContent: 'space-between', my: 3 }}>
+                    <Heading as="h4" sx={{ display: sortedEndDatesActive.length > 0 ? undefined : 'none' }}>
+                      Active Polls
+                    </Heading>
+                    {bpi <= 3 && account && <BallotStatus />}
+                  </Flex>
                   <Stack>
                     {sortedEndDatesActive.map(date => (
                       <div key={date}>