refactor: resort project cards by spice p/h

bob-collective · Jun 24, 2024 · 0b5ebcc · 0b5ebcc
1 parent 71d3830
commit 0b5ebcc
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 41 deletions.
diff --git a/apps/evm/src/pages/Fusion/Fusion.tsx b/apps/evm/src/pages/Fusion/Fusion.tsx
@@ -48,7 +48,7 @@ const Fusion = () => {
 
   return (
     <Geoblock>
-      <Main hasBackgroundImg maxWidth='4xl'>
+      <Main hasBackgroundImg maxWidth='5xl'>
         <Tabs selectedKey={selectedTabKey} onSelectionChange={handleSelectionChange}>
           <TabsItem key='dashboard' title='Dashboard'>
             <Flex direction='column' gap='2xl'>

diff --git a/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerCard.tsx b/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerCard.tsx
@@ -1,5 +1,24 @@
-import { CardProps, Dd, Dl, DlGroup, Dt, Flex, H3, P } from '@gobob/ui';
+import {
+  Button,
+  CardProps,
+  Dd,
+  Dl,
+  DlGroup,
+  Dt,
+  Flex,
+  H3,
+  P,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  QuestionMarkCircle,
+  Tooltip,
+  useMediaQuery
+} from '@gobob/ui';
 import { ReactNode } from 'react';
+import { t } from 'i18next';
+import { useTheme } from 'styled-components';
 
 import { StyledCategoryTag, StyledLiveTag, StyledPartnerCard } from './PartnerCard.style';
 
@@ -8,9 +27,7 @@ type Props = {
   logoSrc: string | ReactNode;
   name: string;
   url: string;
-  totalSpice?: string;
   distributedSpice?: string;
-  percentageDistributed?: string;
   harvest?: string;
   isLive?: boolean;
 };
@@ -26,13 +43,14 @@ const PartnerCard = ({
   logoSrc,
   name,
   url,
-  totalSpice,
   distributedSpice,
-  percentageDistributed,
   harvest,
   isLive,
   ...props
 }: PartnerCardProps): JSX.Element => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+
   return (
     <StyledPartnerCard
       {...props}
@@ -74,15 +92,31 @@ const PartnerCard = ({
         </StyledCategoryTag>
         <Dl direction='column' gap='s' justifyContent='space-between'>
           <DlGroup alignItems='flex-start' direction='row' justifyContent='space-between'>
-            <Dt size='s'>Total Spice:</Dt>
-            <Dd size='s' weight='bold'>
-              {totalSpice}
-            </Dd>
-          </DlGroup>
-          <DlGroup alignItems='flex-start' direction='row' justifyContent='space-between'>
-            <Dt size='s'>Distributed:</Dt>
+            <Dt size='s'>
+              <Flex alignItems='center' gap='s'>
+                Spice Distributed per Hour:
+                {isMobile ? (
+                  <Popover>
+                    <PopoverTrigger>
+                      <Button isIconOnly size='s' variant='ghost'>
+                        <QuestionMarkCircle color='grey-200' size='s' />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent>
+                      <PopoverBody>
+                        <P size='s'>This is the average amount of spice distributed by the project per hour.</P>
+                      </PopoverBody>
+                    </PopoverContent>
+                  </Popover>
+                ) : (
+                  <Tooltip color='primary' label={<P size='s'>{t('fusion.userStats.revealCodeInfo')}</P>}>
+                    <QuestionMarkCircle color='grey-200' size='s' />
+                  </Tooltip>
+                )}
+              </Flex>
+            </Dt>
             <Dd size='s' weight='bold'>
-              {distributedSpice} ({percentageDistributed})
+              {distributedSpice}
             </Dd>
           </DlGroup>
           <DlGroup alignItems='flex-start' direction='row' justifyContent='space-between'>

diff --git a/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerSection.tsx b/apps/evm/src/pages/Fusion/components/PartnersSection/PartnerSection.tsx
@@ -25,7 +25,9 @@ const PartnersSection = () => {
     queryFn: async () => {
       const partners = await apiClient.getPartners();
 
-      return partners.partners.sort((a, b) => Number(b.total_points) - Number(a.total_points));
+      return partners.partners.sort(
+        (a, b) => Number(b.points_distributed_per_hour) - Number(a.points_distributed_per_hour)
+      );
     },
     refetchOnWindowFocus: false,
     gcTime: INTERVAL.HOUR,
@@ -45,21 +47,6 @@ const PartnersSection = () => {
     [locale, user]
   );
 
-  const getPercentageDistributed = useCallback(
-    (total: string, distributed: string) => {
-      const percentageDistributed = Number(distributed) / Number(total);
-
-      // If a project has 0 total and 0 distributed the result will be NaN
-      return isNaN(percentageDistributed)
-        ? '-'
-        : Intl.NumberFormat(locale, {
-            style: 'percent',
-            maximumFractionDigits: 2
-          }).format(percentageDistributed);
-    },
-    [locale]
-  );
-
   return (
     <Flex direction='column' gap='xl' marginTop='4xl'>
       <H2 id='ecosystem' size='2xl' weight='semibold'>
@@ -87,18 +74,14 @@ const PartnersSection = () => {
               isPressable
               category={item?.category}
               distributedSpice={Intl.NumberFormat(locale, { maximumFractionDigits: 2, notation: 'compact' }).format(
-                Number(item.total_distributed_points)
+                Number(item.points_distributed_per_hour)
               )}
               elementType='a'
               gap='md'
               harvest={getHarvest(item.ref_code)}
               isLive={item.live}
               logoSrc={getImageUrl(item.name)}
               name={item.name}
-              percentageDistributed={getPercentageDistributed(item.total_points, item.total_distributed_points)}
-              totalSpice={Intl.NumberFormat(locale, { maximumFractionDigits: 2, notation: 'compact' }).format(
-                Number(item.total_points)
-              )}
               url={item?.project_url}
             />
           ))}

diff --git a/apps/evm/src/utils/api-client.ts b/apps/evm/src/utils/api-client.ts
@@ -32,16 +32,18 @@ type PartnersResponse = {
 };
 
 type Partner = {
-  name: string;
-  ref_code: string;
   category: string;
+  current_points: string;
+  live: boolean;
+  name: string;
+  points_distributed_per_hour: string;
   project_url: string;
-  total_distributed_points: string;
+  ref_code: string;
   total_deposit_points: string;
-  total_referral_points: string;
+  total_distributed_points: string;
   total_points: string;
-  current_points: string;
-  live: boolean;
+  total_points_distributed_in_time_window: string;
+  total_referral_points: string;
 };
 
 type LeaderboardItem = {