Merge pull request #51 from GoodDollar/kris/donation-page

Fix BreadCrumb and CTA on Donation page
GoodDollar · Dec 12, 2023 · 5ee37d5 · 5ee37d5
2 parents b7fb7f6 + 8953763
commit 5ee37d5
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 85 deletions.
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -11,9 +11,6 @@ import * as MobileRoute from './routes/routing.native';
 import * as WebRoute from './routes/routing.web';
 
 import ActivityLogPage from './pages/ActivityLogPage';
-// import WalletProfilePageDonor from './pages/WalletProfilePageDonor';
-// import WalletProfilePageSteward from './pages/WalletProfilePageSteward';
-// import EmptyProfile from './components/EmptyProfile';
 import { NativeBaseProvider } from 'native-base';
 import CollectiveCardPage from './pages/CollectiveCardPage';
 import DonatePage from './pages/DonatePage';

diff --git a/packages/app/src/components/Breadcrumb.tsx b/packages/app/src/components/Breadcrumb.tsx
@@ -4,25 +4,27 @@ import { Colors } from '../utils/colors';
 import { useNavigate } from 'react-router-dom';
 
 interface BreadcrumbProps {
-  currentPage?: string;
+  previousPage?: string;
+  currentPage: string;
 }
 
-function Breadcrumb({ currentPage }: BreadcrumbProps) {
+function Breadcrumb({ currentPage, previousPage }: BreadcrumbProps) {
   const navigate = useNavigate();
   return (
     <TouchableOpacity style={styles.container} onPress={() => navigate(-1)}>
       <Image source={{ uri: ChevronLeftIcon }} style={styles.backIcon} />
-      <Text style={styles.activePage}>GoodCollective Home</Text>
-      <Text style={styles.nextPage}> / {currentPage || 'title'}</Text>
+      <Text style={styles.activePage}>{previousPage ?? 'GoodCollective Home'}</Text>
+      <Text style={styles.nextPage}> / {currentPage}</Text>
     </TouchableOpacity>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
+    height: 24,
     alignItems: 'center',
     flexDirection: 'row',
-    marginBottom: 0,
+    marginBottom: 12,
   },
   activePage: { color: Colors.purple[200] },
   nextPage: { color: Colors.gray[200] },

diff --git a/packages/app/src/components/DonateComponent.tsx b/packages/app/src/components/DonateComponent.tsx
@@ -42,6 +42,12 @@ const frequencyOptions = [
   { value: 'Yearly', label: 'Yearly' },
 ];
 
+const tokenMapping = {
+  CELO: '0x471EcE3750Da237f93B8E339c536989b8978a438',
+  cUSD: '0x765de816845861e75a25fca122bb6898b8b1282a',
+  WBTC: '0xD629eb00dEced2a080B7EC630eF6aC117e614f1b',
+};
+
 function DonateComponent({
   walletConected,
   insufficientLiquidity,
@@ -60,32 +66,19 @@ function DonateComponent({
   const { supportFlowWithSwap, supportFlow } = useContractCalls();
   const { address } = useAccount();
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const tokenMapping = {
-    CELO: '0x471EcE3750Da237f93B8E339c536989b8978a438',
-    cUSD: '0x765de816845861e75a25fca122bb6898b8b1282a',
-    WBTC: '0xD629eb00dEced2a080B7EC630eF6aC117e614f1b',
-    // Add other tokens here if needed
-  };
-
   useEffect(() => {
-    if (currency === 'WBTC') {
-      getPrice('0xD629eb00dEced2a080B7EC630eF6aC117e614f1b').then((res: any) => {
-        setUsdValue(res * amount);
-      });
-    }
-    if (currency === 'cUSD') {
-      getPrice('0x765de816845861e75a25fca122bb6898b8b1282a').then((res: any) => {
-        setUsdValue(res * amount);
-      });
-    }
-    if (currency === 'CELO') {
-      getPrice('0x471EcE3750Da237f93B8E339c536989b8978a438').then((res: any) => {
-        setUsdValue(res * amount);
-      });
-    }
     if (currency === 'G$') {
+      // TODO: is the price of G$ fixed?
       setUsdValue(0.00018672442844237 * amount);
+      return;
+    }
+    for (const [token, tokenAddress] of Object.entries(tokenMapping)) {
+      if (currency === token) {
+        getPrice(tokenAddress).then((res: any) => {
+          setUsdValue(res * amount);
+        });
+        break;
+      }
     }
   }, [amount, currency, getPrice, usdValue, setUsdValue]);
 
@@ -387,6 +380,7 @@ function DonateComponent({
 
         <TouchableOpacity>
           <RoundedButton
+            maxWidth={isDesktopResolution ? 343 : undefined}
             title={getButtonText(insufficientLiquidity, priceImpace, insufficientBalance)}
             backgroundColor={getButtonBGC(insufficientLiquidity, priceImpace, insufficientBalance)}
             color={getButtonTextColor(insufficientLiquidity, priceImpace, insufficientBalance)}
@@ -417,6 +411,7 @@ const styles = StyleSheet.create({
   },
   bodyDesktop: {
     borderRadius: 30,
+    marginTop: 12,
   },
   title: {
     lineHeight: 25,

diff --git a/packages/app/src/components/EmptyProfile.tsx b/packages/app/src/components/EmptyProfile.tsx
@@ -1,13 +1,13 @@
 import { StyleSheet, Text, View, Image } from 'react-native';
-// import oceanUri from '../@constants/SafariImagePlaceholder';
-// import DonateCard from './CollectiveCard';
-// import WalletDetails from './WalletDetails';
 import { EmptyUri } from '../@constants/EmptyProfileImg';
 import { InterSmall } from '../utils/webFonts';
 import RoundedButton from './RoundedButton';
 import { Colors } from '../utils/colors';
+import useCrossNavigate from '../routes/useCrossNavigate';
 
 function EmptyProfile() {
+  const { navigate } = useCrossNavigate();
+
   return (
     <View style={styles.component}>
       <Text style={styles.text}>It looks empty here. {'\n'} Donate to build your impact profile!</Text>
@@ -18,7 +18,7 @@ function EmptyProfile() {
         color={Colors.green[200]}
         fontSize={16}
         seeType={false}
-        buttonLink="/"
+        onPress={() => navigate('/')}
       />
     </View>
   );

diff --git a/packages/app/src/components/Layout.tsx b/packages/app/src/components/Layout.tsx
@@ -55,7 +55,7 @@ const styles = StyleSheet.create({
   },
   desktopScrollView: {
     paddingHorizontal: 64,
-    paddingTop: 40,
+    paddingTop: 12,
     paddingBottom: 90,
     height: '100vh',
     overflowY: 'scroll',

diff --git a/packages/app/src/components/RoundedButton.tsx b/packages/app/src/components/RoundedButton.tsx
@@ -10,18 +10,22 @@ interface RoundedButtonProps {
   color: string;
   fontSize: number;
   seeType: boolean;
-  buttonLink?: string;
   onPress?: any;
+  maxWidth?: number | string;
 }
 
-// const [seeType, setSeeType] = useState<boolean>(false)
-// const ButtonStyles = {};
-
-function RoundedButton({ title, backgroundColor, color, fontSize, seeType, buttonLink, onPress }: RoundedButtonProps) {
-  // const { navigate } = useCrossNavigate();
+function RoundedButton({ title, backgroundColor, color, fontSize, seeType, onPress, maxWidth }: RoundedButtonProps) {
   if (!seeType) {
     return (
-      <TouchableOpacity style={[styles.button, { backgroundColor: backgroundColor }]} onPress={onPress}>
+      <TouchableOpacity
+        style={[
+          styles.button,
+          {
+            backgroundColor: backgroundColor,
+            maxWidth: maxWidth ?? 'auto',
+          },
+        ]}
+        onPress={onPress}>
         <Text
           style={{
             color: color,

diff --git a/packages/app/src/components/ViewCollective.tsx b/packages/app/src/components/ViewCollective.tsx
@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import { StyleSheet, Text, View, Image } from 'react-native';
 import { useState } from 'react';
-// import oceanUri from '../@constants/SafariImagePlaceholder';
 import RowItem from './RowItem';
 import RoundedButton from './RoundedButton';
 import StewardList from './StewardsList';
@@ -16,9 +15,7 @@ import StopDonationModal from './StopDonationModal';
 import ThankYouModal from './ThankYouModal';
 import { Colors } from '../utils/colors';
 import { Link, useMediaQuery } from 'native-base';
-import Breadcrumb from './Breadcrumb';
 import { formatTime } from '../hooks/functions/formatTime';
-import { formatAmount } from '../hooks/functions/formatUsdAmount';
 
 interface ViewCollectiveProps {
   imageUrl?: any;
@@ -86,7 +83,6 @@ function ViewCollective({
     return (
       <>
         <View style={{ gap: 24 }}>
-          <Breadcrumb currentPage={''} />
           <View style={styles.collectiveDesktopBox}>
             <View style={styles.collectiveDetails}>
               <Image source={{ uri: imageUrl }} style={styles.imageMobile} />

diff --git a/packages/app/src/components/WalletProfile.tsx b/packages/app/src/components/WalletProfile.tsx
@@ -94,7 +94,7 @@ function WalletProfile({
   if (isDesktopResolution) {
     return (
       <>
-        <Breadcrumb currentPage={'profile' + address} />
+        <Breadcrumb currentPage={`profile / ${address}`} />
         <View style={styles.profileContentBox}>
           <View style={[styles.container, styles.desktopContainer]}>
             <View style={{ gap: 24 }}>

diff --git a/packages/app/src/pages/DonatePage.tsx b/packages/app/src/pages/DonatePage.tsx
@@ -1,10 +1,13 @@
 import Layout from '../components/Layout';
 import DonateComponent from '../components/DonateComponent';
 import React from 'react';
+import Breadcrumb from '../components/Breadcrumb';
 
 function DonatePage() {
+  const collectiveId = window.location.pathname.slice('/donate/'.length);
   return (
     <Layout>
+      <Breadcrumb previousPage={`collective / ${collectiveId}`} currentPage={`donate`} />
       <DonateComponent
         walletConected={true}
         insufficientLiquidity={false}

diff --git a/packages/app/src/pages/ViewCollectivePage.tsx b/packages/app/src/pages/ViewCollectivePage.tsx
@@ -5,60 +5,65 @@ import { useCollectiveSpecificData } from '../hooks/useSubgraphData';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
 import React from 'react';
+import Breadcrumb from '../components/Breadcrumb';
 
 function ViewCollectivePage() {
   const { request } = useCollectiveSpecificData(window.location.pathname.slice('/collective/'.length));
-  const [subData, setSubData] = useState<any[]>();
+  const [collectiveData, setCollectiveData] = useState<any>(undefined);
   const [isLoading, setIsLoading] = useState(true);
+
   useEffect(() => {
+    console.log('Request: ' + JSON.stringify(request, null, 2));
     if (!request || request.length === 0) {
       setIsLoading(false); // No requests, no loading
       return;
     }
-    const t: any = [];
-    Promise.all(
-      request.map((e: any) => {
-        return axios.get(`https://gateway.pinata.cloud/ipfs/${e.ipfs}`).then(async (res) => {
-          t.push({
-            name: res.data?.name,
-            description: res.data?.description,
-            email: res.data?.email,
-            twitter: res.data?.twitter,
-            id: e.id,
-            time: e.timestamp,
-            contributions: e.contributions,
-          });
-        });
+    axios
+      .get(`https://gateway.pinata.cloud/ipfs/${request[0].ipfs}`)
+      .then((response) => ({
+        name: response.data?.name,
+        description: response.data?.description,
+        email: response.data?.email,
+        twitter: response.data?.twitter,
+        id: request[0].id,
+        time: request[0].timestamp,
+        contributions: request[0]?.contributions,
+      }))
+      .then((data) => {
+        console.log(JSON.stringify(data, null, 2));
+        setCollectiveData(data);
+      })
+      .catch((error) => {
+        console.error(error);
       })
-    ).then(() => {
-      setSubData(t);
-      setIsLoading(false);
-    });
+      .finally(() => {
+        setIsLoading(false);
+      });
   }, [request]);
 
   return (
     <Layout>
+      <Breadcrumb currentPage={`collective / ${collectiveData?.id ?? ''}`} />
       <>
         {isLoading ? (
           <p>Loading...</p>
+        ) : !collectiveData ? (
+          <></>
         ) : (
-          subData?.map((t: any, index: number) => (
-            <ViewCollective
-              key={index}
-              imageUrl={oceanUri}
-              title={t.name}
-              description={t.description}
-              stewardsDesc={t.description}
-              creationDate={t.time}
-              stewardsPaid={28}
-              paymentsMade={374900}
-              donationsReceived={t.contributions}
-              totalPaidOut={299920000}
-              currentPool={381000}
-              isDonating={false}
-              route={t.id}
-            />
-          ))
+          <ViewCollective
+            imageUrl={oceanUri}
+            title={collectiveData.name}
+            description={collectiveData.description}
+            stewardsDesc={collectiveData.description}
+            creationDate={collectiveData.time}
+            stewardsPaid={28}
+            paymentsMade={374900}
+            donationsReceived={collectiveData.contributions}
+            totalPaidOut={299920000}
+            currentPool={381000}
+            isDonating={false}
+            route={collectiveData.id}
+          />
         )}
       </>
     </Layout>

diff --git a/packages/app/src/pages/ViewStewardsPage.tsx b/packages/app/src/pages/ViewStewardsPage.tsx
@@ -15,10 +15,12 @@ function ViewStewardsPage() {
     minWidth: 612,
   });
 
+  const collectiveId = '123';
+
   if (isDesktopResolution) {
     return (
       <Layout>
-        <Breadcrumb />
+        <Breadcrumb currentPage={`collective / ${collectiveId} / stewards`} />
         <View style={styles.desktopContainer}>
           <View style={styles.desktopTopRow}>
             <Image source={{ uri: oceanUri }} style={styles.desktopImage} />