fix wide layout + more

packages/app/src/components/CollectiveHomeCard.tsx

@@ -16,7 +16,7 @@ interface CollectiveHomeCardProps {
 function CollectiveHomeCard({ name, description, headerImage, route }: CollectiveHomeCardProps) {
   const { navigate } = useCrossNavigate();
   const [isDesktopResolution] = useMediaQuery({
-    minWidth: 612,
+    minWidth: 920,
   });
 
   const headerImg = { uri: headerImage } ?? Ocean;

packages/app/src/components/DonateComponent.tsx

@@ -32,7 +32,7 @@ interface DonateComponentProps {
 
 function DonateComponent({ collective }: DonateComponentProps) {
   const [isDesktopResolution] = useMediaQuery({
-    minWidth: 612,
+    minWidth: 920,
   });
   const location = useLocation();
   const collectiveId = location.pathname.slice('/donate/'.length);
@@ -78,7 +78,7 @@ function DonateComponent({ collective }: DonateComponentProps) {
   );
   const approvalNotReady = handleApproveToken === undefined && currency !== 'G$';
 
-  const { supportFlowWithSwap, supportFlow, supportSingleBatch } = useContractCalls(
+  const { supportFlowWithSwap, supportFlow, supportSingleTransferAndCall } = useContractCalls(
     collectiveId,
     currency,
     decimalDonationAmount,
@@ -93,7 +93,7 @@ function DonateComponent({ collective }: DonateComponentProps) {
 
   const handleDonate = useCallback(async () => {
     if (frequency === Frequency.OneTime) {
-      return await supportSingleBatch();
+      return await supportSingleTransferAndCall();
     } else if (currency === 'G$') {
       return await supportFlow();
     }
@@ -117,7 +117,15 @@ function DonateComponent({ collective }: DonateComponentProps) {
     if (txReceipt?.status === 'success') {
       await supportFlowWithSwap();
     }
-  }, [chain?.id, currency, frequency, handleApproveToken, supportFlow, supportFlowWithSwap, supportSingleBatch]);
+  }, [
+    chain?.id,
+    currency,
+    frequency,
+    handleApproveToken,
+    supportFlow,
+    supportFlowWithSwap,
+    supportSingleTransferAndCall,
+  ]);
 
   const currencyDecimals = useToken(currency).decimals;
   const donorCurrencyBalance = useGetTokenBalance(currency, address, chain?.id, true);

packages/app/src/components/DonorsList/DonorsList.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { DonorCollective } from '../../models/models';
 import { DonorsListItem } from './DonorsListItem';
 import { useMemo } from 'react';
@@ -40,7 +40,11 @@ const styles = StyleSheet.create({
   list: {
     width: '100%',
     maxHeight: 400,
-    overflow: 'scroll',
+    // @ts-ignore
+    overflow: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
   },
 });
 

packages/app/src/components/Dropdown.tsx

@@ -1,4 +1,4 @@
-import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useState } from 'react';
 import { Colors } from '../utils/colors';
 import { InterSemiBold, InterSmall } from '../utils/webFonts';
@@ -112,7 +112,11 @@ const styles = StyleSheet.create({
     width: 'auto',
     height: 'auto',
     maxHeight: 400,
-    overflowY: 'scroll',
+    // @ts-ignore
+    overflowY: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
     backgroundColor: Colors.white,
     paddingTop: 10,
     paddingBottom: 10,

packages/app/src/components/FlowingCurrentPoolRowItem.tsx

@@ -25,7 +25,7 @@ function FlowingDonationsRowItem({
   imageUrl,
 }: FlowingDonationsRowItemProps) {
   const [isDesktopResolution] = useMediaQuery({
-    minWidth: 612,
+    minWidth: 920,
   });
 
   const currentBalance = useGetTokenBalance('G$', collective, SupportedNetwork.CELO);

packages/app/src/components/FlowingDonationsRowItem.tsx

@@ -21,7 +21,7 @@ function FlowingDonationsRowItem({
   imageUrl,
 }: FlowingDonationsRowItemProps) {
   const [isDesktopResolution] = useMediaQuery({
-    minWidth: 612,
+    minWidth: 920,
   });
 
   const { formatted: formattedDonations, usdValue: donationsUsdValue } = useDonorCollectivesFlowingBalances(

packages/app/src/components/Header/Header.tsx

@@ -11,7 +11,7 @@ import { BackIcon, HeaderLogo } from '../../assets';
 function Header(): JSX.Element {
   const { address } = useAccount();
   const [isDesktopResolution] = useMediaQuery({
-    minWidth: 612,
+    minWidth: 920,
   });
   const { navigate } = useCrossNavigate();
 

packages/app/src/components/ImpactButton.tsx

@@ -11,7 +11,7 @@ interface ImpactButtonProps {
 
 function ImpactButton({ title, onClick }: ImpactButtonProps) {
   const [isDesktopResolution] = useMediaQuery({
-    minWidth: 612,
+    minWidth: 920,
   });
 
   return (
@@ -37,7 +37,8 @@ const styles = StyleSheet.create({
   desktopButton: {
     position: 'relative',
     borderRadius: 16,
-    width: '50%',
+    width: '49%',
+    marginTop: 32,
   },
   buttonDesktopContent: {
     justifyContent: 'space-between',

packages/app/src/components/Breadcrumb.tsx → packages/app/src/components/Layout/Breadcrumb.tsx

@@ -1,7 +1,7 @@
 import { Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
-import { Colors } from '../utils/colors';
+import { Colors } from '../../utils/colors';
 import { useNavigate } from 'react-router-dom';
-import { chevronRight } from '../assets';
+import { chevronRight } from '../../assets';
 
 export interface BreadcrumbPathEntry {
   text: string;

packages/app/src/components/Layout/DesktopPageContentContainer.tsx

@@ -0,0 +1,26 @@
+import { StyleSheet, View } from 'react-native';
+import { ReactNode } from 'react';
+
+interface DesktopPageContentContainerProps {
+  children: ReactNode;
+}
+
+export const DesktopPageContentContainer = ({ children }: DesktopPageContentContainerProps) => {
+  return (
+    <View style={styles.desktopContentContainer}>
+      <View style={styles.desktopContentBody}>{children}</View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  desktopContentContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  desktopContentBody: {
+    width: '100%',
+    maxWidth: 1280,
+  },
+});

packages/app/src/components/Layout.tsx → packages/app/src/components/Layout/Layout.tsx

@@ -1,23 +1,26 @@
 import { ReactNode } from 'react';
-import Header from './Header/Header';
-import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
-import ImpactButton from './ImpactButton';
+import Header from '../Header/Header';
+import { Platform, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
+import ImpactButton from '../ImpactButton';
 import { useLocation } from 'react-router-native';
-import { Colors } from '../utils/colors';
+import { Colors } from '../../utils/colors';
 import { useAccount } from 'wagmi';
 import { useMediaQuery } from 'native-base';
-import useCrossNavigate from '../routes/useCrossNavigate';
+import useCrossNavigate from '../../routes/useCrossNavigate';
+import Breadcrumb, { BreadcrumbPathEntry } from './Breadcrumb';
+import { DesktopPageContentContainer } from './DesktopPageContentContainer';
 
 interface LayoutProps {
   children: ReactNode;
+  breadcrumbPath?: BreadcrumbPathEntry[];
 }
 
-function Layout({ children }: LayoutProps) {
+function Layout({ children, breadcrumbPath }: LayoutProps) {
   const windowDimensions = useWindowDimensions();
   const scrollViewHeight = windowDimensions.height - 100;
   const { address } = useAccount();
   const [isDesktopResolution] = useMediaQuery({
-    minWidth: 612,
+    minWidth: 920,
   });
 
   const location = useLocation();
@@ -34,10 +37,13 @@ function Layout({ children }: LayoutProps) {
       <Header />
       {isDesktopResolution ? (
         <View style={styles.desktopScrollView}>
-          {children}
-          {location.pathname.includes('collective') && (
-            <ImpactButton title="SEE YOUR IMPACT" onClick={onClickImpactButton} />
-          )}
+          {breadcrumbPath && <Breadcrumb path={breadcrumbPath} />}
+          <DesktopPageContentContainer>
+            {children}
+            {location.pathname.includes('collective') && (
+              <ImpactButton title="SEE YOUR IMPACT" onClick={onClickImpactButton} />
+            )}
+          </DesktopPageContentContainer>
         </View>
       ) : (
         <ScrollView style={[styles.scrollView, { maxHeight: scrollViewHeight }]}>{children}</ScrollView>
@@ -61,7 +67,11 @@ const styles = StyleSheet.create({
     paddingTop: 12,
     paddingBottom: 90,
     height: '100vh',
-    overflowY: 'scroll',
+    // @ts-ignore
+    overflowY: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
   },
 });
 

packages/app/src/components/RowItem.tsx

@@ -14,7 +14,7 @@ interface RowItemProps {
 
 function RowItem({ rowInfo, rowData, balance, currency, imageUrl }: RowItemProps) {
   const [isDesktopResolution] = useMediaQuery({
-    minWidth: 612,
+    minWidth: 920,
   });
 
   const usdBalance = balance ? formatFiatCurrency(balance) : '0.00';

packages/app/src/components/StewardsList/StewardsList.tsx

@@ -1,4 +1,4 @@
-import { Image, Text, View, StyleSheet } from 'react-native';
+import { Image, Text, View, StyleSheet, Platform } from 'react-native';
 import { InterRegular, InterSemiBold } from '../../utils/webFonts';
 import { Colors } from '../../utils/colors';
 import { StewardsListItem } from './StewardsListItem';
@@ -34,7 +34,7 @@ function StewardList({ listType, stewards, titleStyle, listStyle }: StewardListP
         <Image source={titleIcon} style={styles.titleIcon} />
         <Text style={styles.title}>Stewards{stewardsCountText}</Text>
       </View>
-      <View style={[styles.list, { ...(listStyle ?? {}) }]}>
+      <View style={[styles.list, overflowStyle.overflow, { ...(listStyle ?? {}) }]}>
         {stewards.map((steward, index) => (
           <StewardsListItem
             steward={steward}
@@ -103,7 +103,17 @@ const styles = StyleSheet.create({
   },
   list: {
     maxHeight: 400,
-    overflow: 'scroll',
   },
 });
+
+const overflowStyle = StyleSheet.create({
+  overflow: {
+    // @ts-ignore
+    overflow: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
+  },
+});
+
 export default StewardList;

packages/app/src/components/TransactionList/TransactionList.tsx

@@ -1,4 +1,4 @@
-import { Image, Text, View, StyleSheet, TouchableOpacity } from 'react-native';
+import { Image, Text, View, Platform, StyleSheet, TouchableOpacity } from 'react-native';
 import { InterRegular, InterSemiBold } from '../../utils/webFonts';
 import { Colors } from '../../utils/colors';
 import { useMediaQuery } from 'native-base';
@@ -16,7 +16,7 @@ interface TransactionListProps {
 
 function TransactionList({ collective }: TransactionListProps) {
   const [isDesktopResolution] = useMediaQuery({
-    minWidth: 612,
+    minWidth: 920,
   });
   const { navigate } = useCrossNavigate();
 
@@ -27,11 +27,12 @@ function TransactionList({ collective }: TransactionListProps) {
   return (
     <View style={styles.txContainer}>
       <View style={[styles.row, { marginBottom: 24 }]}>
+        {/* @ts-ignore */}
         <Image source={{ uri: TransactionIcon }} style={styles.firstIcon} />
         <Text style={styles.rowText}>Recent Transactions</Text>
       </View>
       {isDesktopResolution && <View style={styles.horizontalDivider} />}
-      <View style={styles.list}>
+      <View style={[styles.list, overflowStyle.overflow]}>
         {transactions
           .slice(0, 5)
           .map((transaction) =>
@@ -119,7 +120,6 @@ const styles = StyleSheet.create({
   },
   list: {
     maxHeight: 389,
-    overflow: 'scroll',
     gap: 16,
   },
   showMoreButton: {
@@ -147,4 +147,14 @@ const styles = StyleSheet.create({
   },
 });
 
+const overflowStyle = StyleSheet.create({
+  overflow: {
+    // @ts-ignore
+    overflow: Platform.select({
+      native: 'scroll',
+      default: 'auto',
+    }),
+  },
+});
+
 export default TransactionList;