Bug fixes

.yarn/versions/a125cec7.yml

@@ -0,0 +1,5 @@
+undecided:
+  - "@gooddollar/goodcollective"
+  - "@gooddollar/goodcollective-app"
+  - "@gooddollar/goodcollective-contracts"
+  - "@scaffold-eth/subgraph"

packages/app/package.json

@@ -20,7 +20,7 @@
     "@celo-tools/celo-ethers-wrapper": "^0.4.0",
     "@ethersproject/shims": "^5.7.0",
     "@gooddollar/good-design": "^0.1.31",
-    "@gooddollar/goodcollective-sdk": "^1.0.6",
+    "@gooddollar/goodcollective-sdk": "^1.0.15",
     "@gooddollar/web3sdk-v2": "^0.2.2",
     "@react-native-aria/interactions": "0.2.3",
     "@react-native-async-storage/async-storage": "^1.18.2",

packages/app/src/components/ApproveSwapModal.tsx

@@ -16,11 +16,7 @@ const ApproveSwapModal = ({ openModal, setOpenModal }: AproveSwapModalProps) =>
         <View style={styles.centeredView}>
           <View style={styles.modalView}>
             <View style={modalStyles.modalCloseIconWrapper}>
-              <TouchableOpacity
-                style={modalStyles.modalCloseIcon}
-                onPress={() => {
-                  setOpenModal(false);
-                }}>
+              <TouchableOpacity style={modalStyles.modalCloseIcon} onPress={() => setOpenModal(false)}>
                 <Image source={CloseIcon} style={styles.closeIcon} />
               </TouchableOpacity>
             </View>
@@ -45,6 +41,9 @@ const styles = StyleSheet.create({
     marginTop: 22,
   },
   modalView: {
+    maxWidth: '90%',
+    maxHeight: '90%',
+    overflowY: 'scroll',
     margin: 20,
     backgroundColor: Colors.blue[100],
     borderRadius: 20,

packages/app/src/components/Breadcrumb.tsx

@@ -3,18 +3,36 @@ import { Colors } from '../utils/colors';
 import { useNavigate } from 'react-router-dom';
 import { chevronRight } from '../assets';
 
+export interface BreadcrumbPathEntry {
+  text: string;
+  route: string;
+}
+
 interface BreadcrumbProps {
-  previousPage?: string;
-  currentPage: string;
+  path: BreadcrumbPathEntry[];
 }
 
-function Breadcrumb({ currentPage, previousPage }: BreadcrumbProps) {
+function Breadcrumb({ path }: BreadcrumbProps) {
   const navigate = useNavigate();
+  const onClickBack = () => navigate(-1);
+  const onClickHome = () => navigate('/');
+
   return (
-    <TouchableOpacity style={styles.container} onPress={() => navigate(-1)}>
-      <Image source={chevronRight} style={styles.backIcon} />
-      <Text style={styles.activePage}>{previousPage ?? 'GoodCollective Home'}</Text>
-      <Text style={styles.nextPage}> / {currentPage}</Text>
+    <TouchableOpacity style={styles.container}>
+      <TouchableOpacity onPress={onClickBack}>
+        <Image source={chevronRight} style={styles.backIcon} />
+      </TouchableOpacity>
+      <Text style={path.length === 0 ? styles.activePage : styles.previousPage} onPress={onClickHome}>
+        GoodCollective Home
+      </Text>
+      {path.map((entry, index) => (
+        <Text
+          key={index}
+          style={index === path.length - 1 ? styles.activePage : styles.previousPage}
+          onPress={() => navigate(entry.route)}>
+          {` / ${entry.text}`}
+        </Text>
+      ))}
     </TouchableOpacity>
   );
 }
@@ -26,8 +44,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     marginBottom: 12,
   },
-  activePage: { color: Colors.purple[200] },
-  nextPage: { color: Colors.gray[200] },
+  previousPage: { color: Colors.purple[200] },
+  activePage: { color: Colors.gray[200] },
   backIcon: {
     width: 20,
     height: 20,

packages/app/src/components/CollectiveHomeCard.tsx

@@ -55,7 +55,7 @@ const styles = StyleSheet.create({
   cardContainerDesktop: {
     width: 360,
     height: 330,
-    margin: 32,
+    marginBottom: 0,
   },
   cardTitle: {
     fontSize: 20,

packages/app/src/components/CompleteDonationModal.tsx

@@ -11,25 +11,22 @@ interface CompleteDonationModalProps {
 }
 
 const CompleteDonationModal = ({ openModal, setOpenModal }: CompleteDonationModalProps) => {
-  // const { navigate } = useCrossNavigate();
+  const onClickClose = () => setOpenModal(false);
+
   return (
     <View style={styles.centeredView}>
       <Modal animationType="slide" transparent={true} visible={openModal}>
         <View style={styles.centeredView}>
           <View style={styles.modalView}>
             <View style={modalStyles.modalCloseIconWrapper}>
-              <TouchableOpacity
-                style={modalStyles.modalCloseIcon}
-                onPress={() => {
-                  setOpenModal(false);
-                }}>
+              <TouchableOpacity style={modalStyles.modalCloseIcon} onPress={onClickClose}>
                 <Image source={CloseIcon} style={styles.closeIcon} />
               </TouchableOpacity>
             </View>
             <Text style={styles.title}>COMPLETE YOUR DONATION</Text>
             <Text style={styles.paragraph}>To complete your donation, sign with your wallet.</Text>
             <Image source={PhoneImg} alt="woman" style={styles.image} />
-            <TouchableOpacity style={styles.button} onPress={() => setOpenModal(false)}>
+            <TouchableOpacity style={styles.button} onPress={onClickClose}>
               <Text style={styles.buttonText}>OK</Text>
             </TouchableOpacity>
           </View>
@@ -47,6 +44,9 @@ const styles = StyleSheet.create({
     marginTop: 22,
   },
   modalView: {
+    maxWidth: '90%',
+    maxHeight: '90%',
+    overflowY: 'scroll',
     margin: 20,
     backgroundColor: Colors.blue[100],
     borderRadius: 20,