Merge branch 'master' of github.com:GoodDollar/GoodCollective into kr…

…is/reduce-polling
GoodDollar · Feb 7, 2024 · 651ec0f · 651ec0f
2 parents 9502186 + c381182
commit 651ec0f
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 78 deletions.
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -104,7 +104,7 @@ function App(): JSX.Element {
 const styles = StyleSheet.create({
   body: {
     backgroundColor: Colors.gray[400],
-    minHeight: '100vh',
+    height: 'auto',
   },
 });
 

diff --git a/packages/app/src/components/Layout/Layout.tsx b/packages/app/src/components/Layout/Layout.tsx
@@ -27,11 +27,19 @@ function Layout({ children, breadcrumbPath }: LayoutProps) {
   const { navigate } = useCrossNavigate();
   const onClickImpactButton = () => navigate('/profile/' + (address ?? ''));
 
+  const isCollectivePage = location.pathname.includes('collective');
+
   const bodyStyles = {
     ...styles.body,
     backgroundColor: isDesktopResolution ? Colors.brown[200] : Colors.gray[400],
   };
 
+  const scrollViewStyles = [
+    styles.scrollView,
+    { maxHeight: scrollViewHeight },
+    { paddingBottom: isCollectivePage ? 61 : 0 },
+  ];
+
   return (
     <View style={bodyStyles}>
       <Header />
@@ -46,9 +54,9 @@ function Layout({ children, breadcrumbPath }: LayoutProps) {
           </DesktopPageContentContainer>
         </View>
       ) : (
-        <ScrollView style={[styles.scrollView, { maxHeight: scrollViewHeight }]}>{children}</ScrollView>
+        <ScrollView style={scrollViewStyles}>{children}</ScrollView>
       )}
-      {location.pathname.includes('collective') && !isDesktopResolution && (
+      {isCollectivePage && !isDesktopResolution && (
         <ImpactButton title="SEE YOUR IMPACT" onClick={onClickImpactButton} />
       )}
     </View>

diff --git a/packages/app/src/components/RoundedButton.tsx b/packages/app/src/components/RoundedButton.tsx
@@ -1,7 +1,6 @@
 import { Image, Text, TouchableOpacity, View, StyleSheet } from 'react-native';
 import { InterSemiBold } from '../utils/webFonts';
-
-const ForwardIconUri = `data:image/svg+xml;utf8,<svg width="8" height="15" viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.292893 0.792893C0.683417 0.402369 1.31658 0.402369 1.70711 0.792893L7.70711 6.79289C8.09763 7.18342 8.09763 7.81658 7.70711 8.20711L1.70711 14.2071C1.31658 14.5976 0.683417 14.5976 0.292893 14.2071C-0.0976311 13.8166 -0.0976311 13.1834 0.292893 12.7929L5.58579 7.5L0.292893 2.20711C-0.0976311 1.81658 -0.0976311 1.18342 0.292893 0.792893Z" fill="#5B7AC6"/> </svg> `;
+import { ForwardIcon } from '../assets';
 
 interface RoundedButtonProps {
   title: string;
@@ -24,64 +23,26 @@ function RoundedButton({
   maxWidth,
   disabled,
 }: RoundedButtonProps) {
+  const dynamicTextStyle = {
+    color: color,
+    fontSize: fontSize,
+  };
+
   if (!seeType) {
     return (
       <TouchableOpacity
         disabled={disabled}
-        style={[
-          styles.button,
-          {
-            backgroundColor: backgroundColor,
-            maxWidth: maxWidth ?? 'auto',
-          },
-        ]}
+        style={[styles.button, { backgroundColor, maxWidth: maxWidth ?? 'auto' }]}
         onPress={onPress}>
-        <Text
-          style={{
-            color: color,
-            fontSize: fontSize,
-            ...InterSemiBold,
-            textAlign: 'center',
-            width: '100%',
-          }}>
-          {title}
-        </Text>
+        <Text style={[styles.nonSeeTypeText, dynamicTextStyle]}>{title}</Text>
       </TouchableOpacity>
     );
   }
   return (
-    <TouchableOpacity
-      disabled={disabled}
-      style={[styles.button, { backgroundColor: backgroundColor }]}
-      onPress={onPress}>
-      <View
-        style={{
-          flexDirection: 'row',
-          flex: 1,
-          justifyContent: 'space-between',
-        }}>
-        <Text
-          style={{
-            color: color,
-            fontSize: fontSize,
-            ...InterSemiBold,
-            textAlign: 'right',
-            marginTop: 0,
-            marginBottom: 0,
-          }}>
-          {title}
-        </Text>
-        <Image
-          source={{
-            uri: ForwardIconUri,
-          }}
-          style={{
-            width: 8,
-            height: 14,
-            marginTop: 6,
-            marginLeft: '35%',
-          }}
-        />
+    <TouchableOpacity disabled={disabled} style={[styles.button, { backgroundColor }]} onPress={onPress}>
+      <View style={styles.seeTypeRow}>
+        <Text style={[styles.seeTypeText, dynamicTextStyle]}>{title}</Text>
+        <Image source={ForwardIcon} style={styles.image} />
       </View>
     </TouchableOpacity>
   );
@@ -98,5 +59,27 @@ const styles = StyleSheet.create({
     alignContent: 'center',
     borderWidth: 0,
   },
+  image: {
+    width: 8,
+    height: 14,
+    marginTop: 6,
+    marginLeft: '35%',
+  },
+  seeTypeText: {
+    ...InterSemiBold,
+    textAlign: 'right',
+    marginTop: 0,
+    marginBottom: 0,
+  },
+  nonSeeTypeText: {
+    ...InterSemiBold,
+    textAlign: 'center',
+    width: '100%',
+  },
+  seeTypeRow: {
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'space-between',
+  },
 });
 export default RoundedButton;
diff --git a/packages/app/src/components/RowItem.tsx b/packages/app/src/components/RowItem.tsx
@@ -25,14 +25,15 @@ function RowItem({ rowInfo, rowData, balance, currency, imageUrl }: RowItemProps
         <Image source={{ uri: imageUrl }} style={styles.rowIcon} />
         <Text style={styles.rowInfo}>{rowInfo}</Text>
       </View>
-      <View style={styles.rowData}>
-        <Text style={{ gap: 2 }}>
-          <Text>
+      <View style={{ gap: 2 }}>
+        {!currency && <Text style={styles.rowData}>{rowData}</Text>}
+        {currency && (
+          <Text style={styles.rowData}>
             <Text>{currency}</Text> <Text style={{ ...InterRegular }}>{rowData}</Text>
-            {isDesktopResolution && currency && <Text style={styles.rowBalance}> = {usdBalance} USD</Text>}
+            {isDesktopResolution && <Text style={styles.rowBalance}> = {usdBalance} USD</Text>}
           </Text>
-          {!isDesktopResolution && currency && <Text style={styles.rowBalance}>= {usdBalance} USD</Text>}
-        </Text>
+        )}
+        {!isDesktopResolution && currency && <Text style={styles.rowBalance}>= {usdBalance} USD</Text>}
       </View>
     </View>
   );
@@ -61,6 +62,7 @@ const styles = StyleSheet.create({
     maxWidth: '60%',
     fontWeight: '700',
     fontSize: 16,
+    lineHeight: 24,
     color: Colors.black,
     ...InterSemiBold,
   },
@@ -72,13 +74,14 @@ const styles = StyleSheet.create({
     color: Colors.gray[100],
     textAlign: 'right',
     fontSize: 16,
+    lineHeight: 24,
     ...InterSemiBold,
-    gap: 2,
   },
   rowBalance: {
     fontSize: 12,
     textAlign: 'right',
     color: Colors.gray[200],
+    lineHeight: 18,
     ...InterRegular,
   },
 });

diff --git a/packages/app/src/components/TransactionList/TransactionList.tsx b/packages/app/src/components/TransactionList/TransactionList.tsx
@@ -1,10 +1,9 @@
-import { Image, Text, View, Platform, StyleSheet, TouchableOpacity } from 'react-native';
+import { Image, Text, View, Platform, StyleSheet } from 'react-native';
 import { InterRegular, InterSemiBold } from '../../utils/webFonts';
 import { Colors } from '../../utils/colors';
-import { useMediaQuery } from 'native-base';
+import { Link, useMediaQuery } from 'native-base';
 import { chevronDown, TransactionIcon } from '../../assets';
 import { ClaimTx, Transaction } from '../../models/models';
-import useCrossNavigate from '../../routes/useCrossNavigate';
 import { useRecentTransactions } from '../../hooks/useRecentTransactions';
 import { isSupportTx } from '../../models/typeUtil';
 import { ClaimTransactionListItem } from './ClaimTransactionListItem';
@@ -19,12 +18,9 @@ function TransactionList({ collective }: TransactionListProps) {
   const [isDesktopResolution] = useMediaQuery({
     minWidth: 920,
   });
-  const { navigate } = useCrossNavigate();
 
   const transactions: Transaction[] = useRecentTransactions(collective, 6, SUBGRAPH_POLL_INTERVAL);
 
-  const onClickShowMore = () => navigate(`https://explorer.celo.org/mainnet/address/${collective}`);
-
   return (
     <View style={styles.txContainer}>
       <View style={[styles.row, { marginBottom: 24 }]}>
@@ -45,10 +41,10 @@ function TransactionList({ collective }: TransactionListProps) {
           )}
       </View>
       {isDesktopResolution && transactions.length > 5 && (
-        <TouchableOpacity onPress={onClickShowMore} style={styles.showMoreButton}>
+        <Link href={`https://explorer.celo.org/mainnet/address/${collective}`} isExternal style={styles.showMoreButton}>
           <Text style={styles.showMoreText}>Show more</Text>
           <Image source={chevronDown} style={styles.showMoreIcon} />
-        </TouchableOpacity>
+        </Link>
       )}
     </View>
   );

diff --git a/packages/app/src/components/ViewCollective.tsx b/packages/app/src/components/ViewCollective.tsx
@@ -374,14 +374,15 @@ function ViewCollective({ collective }: ViewCollectiveProps) {
         </View>
         <View style={styles.container}>
           <TransactionList collective={collective.address as `0x${string}`} />
-          <RoundedButton
-            title="See all Transactions"
-            backgroundColor={Colors.purple[100]}
-            color={Colors.purple[200]}
-            fontSize={18}
-            seeType={true}
-            onPress={() => navigate('/profile/abc123/activity')}
-          />
+          <Link href={`https://explorer.celo.org/mainnet/address/${collective.address}`} isExternal>
+            <RoundedButton
+              title="See all transactions"
+              backgroundColor={Colors.purple[100]}
+              color={Colors.purple[200]}
+              fontSize={18}
+              seeType={true}
+            />
+          </Link>
         </View>
         <ErrorModal
           openModal={!!errorMessage}

diff --git a/packages/app/src/lib/formatTime.ts b/packages/app/src/lib/formatTime.ts
@@ -1,5 +1,5 @@
 import moment from 'moment';
 
 export const formatTime = (timestamp: number): string => {
-  return moment.unix(timestamp).format('MMM D, h:mma');
+  return moment.unix(timestamp).format('MMMM D, YYYY');
 };