224 new homepage

packages/app/package.json

@@ -19,9 +19,9 @@
     "@apollo/client": "^3.10.8",
     "@celo-tools/celo-ethers-wrapper": "^0.4.0",
     "@ethersproject/shims": "^5.7.0",
-    "@gooddollar/good-design": "^0.1.31",
+    "@gooddollar/good-design": "^0.1.57",
     "@gooddollar/goodcollective-sdk": "^1.1.1",
-    "@gooddollar/web3sdk-v2": "^0.2.2",
+    "@gooddollar/web3sdk-v2": "^0.2.34",
     "@nerdwallet/apollo-cache-policies": "^3.2.0",
     "@react-native-aria/interactions": "0.2.3",
     "@react-native-async-storage/async-storage": "^1.18.2",

packages/app/src/components/ActionButton.tsx

@@ -0,0 +1,89 @@
+import { Box, Link, Pressable, Text, useBreakpointValue } from 'native-base';
+import { withTheme } from '@gooddollar/good-design';
+
+import { InterSemiBold } from '../utils/webFonts';
+
+type ActionButtonProps = {
+  href?: string;
+  text: string;
+  bg: string;
+  textColor: string;
+  onPress?: any;
+  buttonStyles?: any;
+};
+
+export const theme = {
+  baseStyle: {
+    buttonStyles: {
+      buttonContainer: {
+        justifyContent: 'space-evenly',
+        marginTop: 2,
+      },
+      button: {
+        width: '100%',
+        height: 47,
+        flex: 1,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingRight: 10,
+        paddingLeft: 10,
+        paddingBottom: 1,
+        fontSize: 'md',
+        fontWeight: 700,
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        borderRadius: 50,
+      },
+      buttonText: {
+        ...InterSemiBold,
+        fontSize: 'md',
+      },
+    },
+  },
+};
+
+const ActionButton = withTheme({ name: 'ActionButton' })(
+  ({ href, text, bg, textColor, onPress, buttonStyles }: ActionButtonProps) => {
+    const responsiveStyles = useBreakpointValue({
+      base: {
+        button: {
+          ...buttonStyles.button,
+          justifyContent: 'center',
+        },
+        buttonText: {
+          ...buttonStyles.buttonText,
+          height: 47,
+          display: 'flex',
+          alignItems: 'center',
+        },
+        buttonContainer: {
+          ...buttonStyles.buttonContainer,
+          width: '100%',
+        },
+      },
+      md: buttonStyles,
+    });
+
+    const { buttonContainer, button, buttonText } = responsiveStyles ?? {};
+
+    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/components/Layout/Layout.tsx

@@ -82,6 +82,7 @@ const styles = StyleSheet.create({
       native: 'scroll',
       default: 'auto',
     }),
+    backgroundColor: 'defaultGrey',
   },
 });
 

packages/app/src/components/theme.ts

@@ -1 +1,2 @@
 export { theme as AboutCard } from './AboutCard';
+export { theme as ActionButton } from './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/ActivityLogPage.tsx

@@ -4,7 +4,6 @@ import { InterSemiBold, InterSmall } from '../utils/webFonts';
 import ActivityLog from '../components/ActivityLog';
 import { Colors } from '../utils/colors';
 import ProfileView from '../components/ProfileView';
-import { ProfileTypes } from '../models/ProfileTypes';
 import { LightningIcon } from '../assets';
 
 function ActivityLogPage() {
@@ -18,7 +17,6 @@ function ActivityLogPage() {
               lastName={'Doe'}
               ensDomain={'John.CELO'}
               userAddress={'q827tbc1386..134c'}
-              profileType={ProfileTypes.domain}
             />
           </View>