add: totalStats subgraph hook

packages/app/src/components/ActionButton.tsx

@@ -0,0 +1,34 @@
+import { Box, Link, Pressable, Text } from 'native-base';
+
+type ActionButtonProps = {
+  href?: string;
+  text: string;
+  bg: string;
+  textColor: string;
+  onPress?: any;
+  buttonStyles?: any;
+};
+
+const ActionButton = ({ href, text, bg, textColor, onPress, buttonStyles }: ActionButtonProps) => {
+  const { buttonContainer, button, buttonText } = buttonStyles ?? {};
+
+  const content = (
+    <Pressable {...button} onPress={onPress} backgroundColor={bg}>
+      <Text {...buttonText} color={textColor}>
+        {text}
+      </Text>
+    </Pressable>
+  );
+
+  if (href) {
+    return (
+      <Link {...buttonContainer} href={href} isExternal={true}>
+        {content}
+      </Link>
+    );
+  }
+
+  return <Box {...buttonContainer}>{content}</Box>;
+};
+
+export default ActionButton;

packages/app/src/hooks/index.ts

@@ -6,3 +6,4 @@ export * from './useContractCalls';
 export * from './useGetTokenPrice';
 export * from './useIsStewardVerified';
 export * from './useEthers';
+export * from './useTotalStats';

packages/app/src/hooks/useTotalStats.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+
+import { useSubgraphTotalStats } from '../subgraph';
+import { formatGoodDollarAmount } from '../lib/calculateGoodDollarAmounts';
+
+type StatsFormatted = {
+  amount: string;
+  copy: string;
+};
+type TotalStats = {
+  totalDonations: StatsFormatted;
+  totalPools: StatsFormatted;
+  totalMembers: StatsFormatted;
+};
+
+export const useTotalStats = (): TotalStats | undefined => {
+  const stats = useSubgraphTotalStats();
+
+  return useMemo(() => {
+    const totalDonations = stats?.collectives?.reduce((acc, collective) => acc + Number(collective.totalDonations), 0);
+    const donationsFormatted = formatGoodDollarAmount(totalDonations?.toString() ?? '0');
+
+    return {
+      totalPools: {
+        amount: stats?.activeCollectives?.length.toString() ?? '0',
+        copy: 'GoodCollective pools',
+      },
+      totalDonations: {
+        amount: 'G$ ' + donationsFormatted,
+        copy: 'Total Donations',
+      },
+      totalMembers: {
+        amount: stats?.stewards?.length.toString() ?? '0',
+        copy: 'GoodCollective Members Paid',
+      },
+    };
+  }, [stats]);
+};

packages/app/src/pages/HomePage.tsx

@@ -1,8 +1,10 @@
 import { useRef } from 'react';
 import { withTheme } from '@gooddollar/good-design';
+import { Box, HStack, Text, useMediaQuery, VStack, ScrollView, Spinner } from 'native-base';
 
-import { Box, HStack, Link, Text, Pressable, useMediaQuery, VStack, ScrollView } from 'native-base';
+import { useTotalStats } from '../hooks';
 
+import ActionButton from '../components/ActionButton';
 import CollectiveHomeCard from '../components/CollectiveHomeCard';
 import Layout from '../components/Layout/Layout';
 import { InterSemiBold } from '../utils/webFonts';
@@ -80,24 +82,10 @@ export const theme = {
   },
 };
 
-const placeHolderTotalStats = {
-  pools: {
-    amount: 'G$ 230',
-    copy: 'GoodCollective pools',
-  },
-  totalDonations: {
-    amount: 'G$ 2,300.000',
-    copy: 'Total donations',
-  },
-  totalMembers: {
-    amount: 'G$ 230',
-    copy: 'Total members',
-  },
-};
-
 const HomePage = withTheme({ name: 'HomePage' })(({ containerStyles, buttonStyles }: HomePageProps) => {
   const collectives = useCollectivesMetadata();
-  const { buttonContainer, button, buttonText } = buttonStyles ?? {};
+  const totalStats = useTotalStats();
+
   const { body, sectionContainer, sectionContainerDesktop } = containerStyles ?? {};
 
   const [isDesktopResolution] = useMediaQuery({
@@ -112,6 +100,8 @@ const HomePage = withTheme({ name: 'HomePage' })(({ containerStyles, buttonStyle
     }
   };
 
+  if (!totalStats) return <Spinner variant="page-loader" size="lg" />;
+
   return (
     <Layout>
       <ScrollView>
@@ -129,8 +119,8 @@ individuals and communities by providing direct digital payments to those who ne
                 Impact to Date
               </Text>
               <HStack space={0} justifyContent="space-evenly">
-                {Object.values(placeHolderTotalStats).map(({ amount, copy }) => (
-                  <VStack key={copy} space={0} textAlign="center">
+                {Object.values(totalStats).map(({ amount, copy }) => (
+                  <VStack key={copy} space={0} textAlign="center" minWidth="220">
                     <Text variant="3xl-grey" color="goodPurple.400" fontWeight="700" fontFamily="heading">
                       {amount}
                     </Text>
@@ -141,29 +131,29 @@ individuals and communities by providing direct digital payments to those who ne
             </VStack>
             <VStack space={0}>
               <HStack space={2} justifyContent="center">
-                <Link href="https://gooddollar.typeform.com/creategood" isExternal {...buttonContainer} marginTop="0">
-                  <Pressable {...button} backgroundColor="goodPurple.400">
-                    <Text {...buttonText} color="white">
-                      How it works
-                    </Text>
-                  </Pressable>
-                </Link>
+                <ActionButton
+                  href="https://gooddollar.org/goodcollective-how-it-works"
+                  text="How it works"
+                  bg="goodPurple.400"
+                  textColor="white"
+                  buttonStyles={buttonStyles}
+                />
               </HStack>
               <HStack space={2} justifyContent="center">
-                <Box {...buttonContainer}>
-                  <Pressable onPress={scrollToCollectives} {...button} backgroundColor={'goodGreen.200'}>
-                    <Text {...buttonText} color={'goodGreen.400'}>
-                      Donate to a GoodCollective
-                    </Text>
-                  </Pressable>
-                </Box>
-                <Link href={'https://gooddollar.typeform.com/creategood'} {...buttonContainer}>
-                  <Pressable onPress={scrollToCollectives} {...button} backgroundColor={'goodPurple.100'}>
-                    <Text {...buttonText} color={'goodPurple.400'}>
-                      Create a GoodCollective
-                    </Text>
-                  </Pressable>
-                </Link>
+                <ActionButton
+                  text="Donate to a GoodCollective"
+                  bg="goodGreen.200"
+                  textColor="goodGreen.400"
+                  onPress={scrollToCollectives}
+                  buttonStyles={buttonStyles}
+                />
+                <ActionButton
+                  href="https://gooddollar.typeform.com/creategood"
+                  text="Create a GoodCollective"
+                  bg="goodPurple.100"
+                  textColor="goodPurple.400"
+                  buttonStyles={buttonStyles}
+                />
               </HStack>
             </VStack>
           </VStack>

packages/app/src/subgraph/index.ts

@@ -6,3 +6,4 @@ export * from './useSubgraphCollective';
 export * from './useSubgraphIpfsCollective';
 export * from './useSubgraphClaim';
 export * from './useSubgraphSupportEvent';
+export * from './useSubgraphTotalStats';

packages/app/src/subgraph/useSubgraphData.ts

@@ -17,6 +17,11 @@ export type StewardsSubgraphResponse = { stewards?: SubgraphSteward[] };
 export type DonorCollectiveSubgraphResponse = { donorCollectives?: SubgraphDonorCollective[] };
 export type ClaimsSubgraphResponse = { claims?: SubgraphClaim[] };
 export type SupportEventsSubgraphResponse = { supportEvents?: SubgraphSupportEvent[] };
+export type TotalStatsCollectivesResponse = {
+  activeCollectives: { id: string }[];
+  collectives: { totalDonations: string }[];
+  stewards: { id: string }[];
+};
 
 export function useSubgraphData<T>(
   query: DocumentNode | TypedDocumentNode<any, OperationVariables>,

packages/app/src/subgraph/useSubgraphTotalStats.ts

@@ -0,0 +1,22 @@
+import { gql } from '@apollo/client';
+import { TotalStatsCollectivesResponse, useSubgraphData } from './useSubgraphData';
+
+const collectivesTotalStats = gql`
+  query COLLECTIVES_TOTAL_STATS {
+    stewards(where: { or: [{ totalEarned_gt: 0 }, { totalUBIEarned_gt: 0 }] }) {
+      id
+    }
+    collectives(where: { totalDonations_gt: 0 }) {
+      totalDonations
+    }
+    activeCollectives: collectives {
+      id
+    }
+  }
+`;
+
+export function useSubgraphTotalStats(): TotalStatsCollectivesResponse | undefined {
+  const response = useSubgraphData(collectivesTotalStats);
+
+  return response as TotalStatsCollectivesResponse;
+}

packages/app/src/theme/theme.ts

@@ -8,7 +8,7 @@ export const nbTheme = extendTheme({
   fontConfig: getPlatformFamilies(fontConfig),
   colors: {
     /* g$ design system */
-    primary: '#00AFFF',
+    gdPrimary: '#00AFFF',
     primaryHoverDark: '#0075AC',
     white: '#FFFFFF',
     black: '#000000',
@@ -81,6 +81,15 @@ export const nbTheme = extendTheme({
   components: {
     ...components,
     ...pages,
+    Spinner: {
+      variants: {
+        'page-loader': () => ({
+          borderWidth: '0',
+          color: 'gdPrimary',
+          paddingBottom: 4,
+        }),
+      },
+    },
     Text: {
       baseStyle: {
         color: 'goodGrey.600',