224 new homepage (#228)

* add: new homepage

* add: totalStats subgraph hook

* chore: mobile/responsive styles fixes

* 224 homepage with factory (#229)

* wip: use factory instead of withTheme

* remove withTheme hook usage, add: centralize breakpoint handling

* style fixes

* fix: handle copy in ui

* add typing

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.2",
-    "@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/AboutCard.tsx

@@ -1,63 +1,61 @@
 import { Text, View } from 'native-base';
-import { withTheme } from '@gooddollar/good-design';
 
-export const theme = {
-  baseStyle: {
-    fontStyles: {
-      title: {
-        fontWeight: 700,
-        color: 'black',
-        fontFamily: 'heading',
-        fontSize: 'md',
-      },
-      subTitle: {
-        color: 'goodGrey.500',
-        fontWeight: 700,
-        lineHeight: 24,
-        fontFamily: 'heading',
-        fontSize: 'sm',
-      },
-      paragraph: {
-        color: 'goodGrey.500',
-        width: '100%',
-        lineHeight: 24,
-        fontWeight: 400,
-        fontSize: 'sm',
-      },
+export const aboutCardStyles = {
+  font: {
+    title: {
+      fontWeight: 700,
+      color: 'black',
+      fontFamily: 'heading',
+      fontSize: 'md',
     },
-    styles: {
-      aboutContainer: {
-        padding: 15,
-        marginBottom: 10,
-      },
-      mainContainer: {
-        width: '100%',
-        backgroundColor: 'white',
-        paddingVertical: 16,
-        paddingHorizontal: 12,
-        borderRadius: 20,
-        gap: 24,
-      },
-      elevation: {
-        shadowColor: 'black',
-        shadowOffset: {
-          width: 0,
-          height: 12,
-        },
-        shadowOpacity: 0.15,
-        shadowRadius: 15,
-        elevation: 24,
+    subTitle: {
+      color: 'goodGrey.500',
+      fontWeight: 700,
+      lineHeight: 24,
+      fontFamily: 'heading',
+      fontSize: 'sm',
+    },
+    paragraph: {
+      color: 'goodGrey.500',
+      width: '100%',
+      lineHeight: 24,
+      fontWeight: 400,
+      fontSize: 'sm',
+    },
+  },
+  container: {
+    aboutContainer: {
+      padding: 15,
+      marginBottom: 10,
+    },
+    mainContainer: {
+      width: '100%',
+      backgroundColor: 'white',
+      paddingVertical: 16,
+      paddingHorizontal: 12,
+      borderRadius: 20,
+      gap: 24,
+    },
+    elevation: {
+      shadowColor: 'black',
+      shadowOffset: {
+        width: 0,
+        height: 12,
       },
+      shadowOpacity: 0.15,
+      shadowRadius: 15,
+      elevation: 24,
     },
   },
 };
 
-const AboutCard = withTheme({ name: 'AboutCard' })(({ styles, fontStyles, ...props }: any) => {
-  const { title, subTitle, paragraph } = fontStyles;
+const AboutCard = () => {
+  const { font, container } = aboutCardStyles;
+  const { title, subTitle, paragraph } = font;
 
   return (
-    <View style={styles.aboutContainer}>
-      <View style={[styles.mainContainer, styles.elevation]}>
+    <View style={container.aboutContainer}>
+      <View style={[container.mainContainer, container.elevation]}>
         <Text {...title}>About Collective</Text>
         <Text {...paragraph}>
           GoodCollective makes visible the climate stewardship activities of individuals, and provides a direct channel
@@ -103,6 +101,6 @@ const AboutCard = withTheme({ name: 'AboutCard' })(({ styles, fontStyles, ...pro
       </View>
     </View>
   );
-});
+};
 
 export default AboutCard;

packages/app/src/components/ActionButton.tsx

@@ -0,0 +1,81 @@
+import { Box, Link, Pressable, Text, useBreakpointValue } from 'native-base';
+
+import { InterSemiBold } from '../utils/webFonts';
+
+type ActionButtonProps = {
+  href?: string;
+  text: string;
+  bg: string;
+  textColor: string;
+  onPress?: any;
+};
+
+export const 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 = ({ href, text, bg, textColor, onPress }: ActionButtonProps) => {
+  const responsiveStyles = useBreakpointValue({
+    base: {
+      button: {
+        ...buttonStyles.button,
+        justifyContent: 'center',
+      },
+      buttonText: {
+        ...buttonStyles.buttonText,
+        height: 47,
+        display: 'flex',
+        alignItems: 'center',
+      },
+      buttonContainer: {
+        ...buttonStyles.buttonContainer,
+        width: '100%',
+      },
+    },
+    lg: 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/CollectiveHomeCard.tsx

@@ -1,10 +1,11 @@
-import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Image, StyleSheet, Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
+
 import { InterSemiBold, InterSmall } from '../utils/webFonts';
 import useCrossNavigate from '../routes/useCrossNavigate';
 import { Colors } from '../utils/colors';
-import { useMediaQuery } from 'native-base';
 import { useState } from 'react';
 import { Ocean } from '../assets';
+import { useScreenSize } from '../theme/hooks';
 
 interface CollectiveHomeCardProps {
   name: string;
@@ -15,11 +16,9 @@ interface CollectiveHomeCardProps {
 
 function CollectiveHomeCard({ name, description, headerImage, route }: CollectiveHomeCardProps) {
   const { navigate } = useCrossNavigate();
-  const [isDesktopResolution] = useMediaQuery({
-    minWidth: 920,
-  });
+  const { isDesktopView, isTabletView } = useScreenSize();
 
-  const headerImg = { uri: headerImage } ?? Ocean;
+  const headerImg = headerImage ? { uri: headerImage } : Ocean;
 
   const [isParagraphExpanded, setIsParagraphExpanded] = useState(false);
 
@@ -28,8 +27,9 @@ function CollectiveHomeCard({ name, description, headerImage, route }: Collectiv
       style={[
         styles.cardContainer,
         styles.elevation,
-        isDesktopResolution ? styles.cardContainerDesktop : {},
+        isDesktopView ? styles.cardContainerDesktop : {},
         isParagraphExpanded ? { height: 'auto' } : {},
+        isTabletView ? { marginBottom: 20 } : {},
       ]}
       onPress={() => navigate(`/collective/${route}`)}>
       <Image source={headerImg} style={styles.sectionImage} />

packages/app/src/components/DonateComponent.tsx

@@ -1,27 +1,30 @@
 import { useCallback, useMemo, useState } from 'react';
 import { Image, StyleSheet, Text, TextInput, View } from 'react-native';
+import { Link } from 'native-base';
+import { useAccount, useNetwork } from 'wagmi';
+import { useParams } from 'react-router-native';
+import Decimal from 'decimal.js';
+import { waitForTransaction } from '@wagmi/core';
+import { TransactionReceipt } from 'viem';
+
 import { InterRegular, InterSemiBold, InterSmall } from '../utils/webFonts';
 import RoundedButton from './RoundedButton';
 import CompleteDonationModal from './modals/CompleteDonationModal';
 import { Colors } from '../utils/colors';
-import { Link, useMediaQuery } from 'native-base';
+import { useScreenSize } from '../theme/hooks';
+
 import Dropdown from './Dropdown';
 import { getDonateStyles, getFrequencyPlural } from '../utils';
 import { useContractCalls, useGetTokenPrice } from '../hooks';
-import { useAccount, useNetwork } from 'wagmi';
 import { Collective } from '../models/models';
 import { useGetTokenBalance } from '../hooks/useGetTokenBalance';
 import { acceptablePriceImpact, Frequency, frequencyOptions, GDEnvTokens, SupportedNetwork } from '../models/constants';
 import { InfoIconOrange } from '../assets';
-import { useParams } from 'react-router-native';
-import Decimal from 'decimal.js';
 import { formatFiatCurrency } from '../lib/formatFiatCurrency';
 import ErrorModal from './modals/ErrorModal';
 import { SwapRouteState, useSwapRoute } from '../hooks/useSwapRoute';
 import { useApproveSwapTokenCallback } from '../hooks/useApproveSwapTokenCallback';
 import ApproveSwapModal from './modals/ApproveSwapModal';
-import { waitForTransaction } from '@wagmi/core';
-import { TransactionReceipt } from 'viem';
 import { useToken, useTokenList } from '../hooks/useTokenList';
 import { formatDecimalStringInput } from '../lib/formatDecimalStringInput';
 import ThankYouModal from './modals/ThankYouModal';
@@ -32,9 +35,7 @@ interface DonateComponentProps {
 }
 
 function DonateComponent({ collective }: DonateComponentProps) {
-  const [isDesktopResolution] = useMediaQuery({
-    minWidth: 920,
-  });
+  const { isDesktopView } = useScreenSize();
   const { id: collectiveId = '0x' } = useParams();
 
   const { address, isConnected } = useAccount();
@@ -212,12 +213,12 @@ function DonateComponent({ collective }: DonateComponentProps) {
   const onCloseErrorModal = () => setErrorMessage(undefined);
 
   return (
-    <View style={[styles.body, isDesktopResolution && styles.bodyDesktop]}>
+    <View style={[styles.body, isDesktopView && styles.bodyDesktop]}>
       <View>
         <Text style={styles.title}>Donate</Text>
         <Text style={styles.description}>
           Support {collective.ipfs.name}{' '}
-          {isDesktopResolution && (
+          {isDesktopView && (
             <>
               <br />
             </>
@@ -227,7 +228,7 @@ function DonateComponent({ collective }: DonateComponentProps) {
       </View>
       <View style={styles.divider} />
 
-      {!isDesktopResolution && (
+      {!isDesktopView && (
         <>
           <View>
             <Text style={styles.title}>Donation Currency:</Text>
@@ -256,7 +257,7 @@ function DonateComponent({ collective }: DonateComponentProps) {
         </>
       )}
 
-      {isDesktopResolution && (
+      {isDesktopView && (
         <View style={styles.donationCurrencyHeader}>
           <View style={styles.donationAction}>
             <View style={styles.actionBox}>
@@ -289,7 +290,7 @@ function DonateComponent({ collective }: DonateComponentProps) {
             <View style={styles.actionBox}>
               <Text style={styles.title}>Donation Frequency</Text>
               <Text style={styles.description}>
-                How often do you want to donate this {!isDesktopResolution && <br />} amount?
+                How often do you want to donate this {!isDesktopView && <br />} amount?
               </Text>
             </View>
             <Dropdown value={frequency} onSelect={onChangeFrequency} options={frequencyOptions} />
@@ -319,7 +320,7 @@ function DonateComponent({ collective }: DonateComponentProps) {
 
       <View style={styles.frequencyWrapper}>
         <>
-          {!isDesktopResolution && (
+          {!isDesktopView && (
             <>
               <Dropdown value={frequency} onSelect={onChangeFrequency} options={frequencyOptions} />
               {frequency !== 'One-Time' && (
@@ -495,7 +496,7 @@ function DonateComponent({ collective }: DonateComponentProps) {
         )}
 
         <RoundedButton
-          maxWidth={isDesktopResolution ? 343 : undefined}
+          maxWidth={isDesktopView ? 343 : undefined}
           title={buttonCopy}
           backgroundColor={buttonBgColor}
           color={buttonTextColor}