From 13cd974c50ffbca26f2d89efda18078cfd536531 Mon Sep 17 00:00:00 2001
From: sirpy <hadar@gooddollar.org>
Date: Mon, 16 Dec 2024 15:21:55 +0200
Subject: [PATCH] add: consolidate components into one

---
 .../app/src/components/GoodDollarAmount.tsx   |   5 +-
 .../WalletDetails/BothWalletDetails.tsx       | 117 ++++++++++--------
 .../WalletDetails/DonorWalletDetails.tsx      |  71 -----------
 .../WalletDetails/StewardWalletDetails.tsx    |  54 --------
 .../WalletDetails/WalletDetails.tsx           |   8 +-
 5 files changed, 74 insertions(+), 181 deletions(-)
 delete mode 100644 packages/app/src/components/WalletDetails/DonorWalletDetails.tsx
 delete mode 100644 packages/app/src/components/WalletDetails/StewardWalletDetails.tsx

diff --git a/packages/app/src/components/GoodDollarAmount.tsx b/packages/app/src/components/GoodDollarAmount.tsx
index 429e47d9..f348a2ef 100644
--- a/packages/app/src/components/GoodDollarAmount.tsx
+++ b/packages/app/src/components/GoodDollarAmount.tsx
@@ -6,10 +6,11 @@ import { formatGoodDollarAmount } from '../lib/calculateGoodDollarAmounts';
 interface FlowingBalanceProps extends TextProps {
   amount: string;
   lastDigitsProps?: TextProps;
+  decimals?: number;
 }
 
-export const GoodDollarAmount: FC<FlowingBalanceProps> = ({ amount, lastDigitsProps, ...props }) => {
-  const formatted = formatGoodDollarAmount(amount);
+export const GoodDollarAmount: FC<FlowingBalanceProps> = ({ amount, lastDigitsProps, decimals = 4, ...props }) => {
+  const formatted = formatGoodDollarAmount(amount, decimals);
   return (
     <>
       <Text {...props} style={[styles.amount, props.style]}>
diff --git a/packages/app/src/components/WalletDetails/BothWalletDetails.tsx b/packages/app/src/components/WalletDetails/BothWalletDetails.tsx
index 4f21c89e..3a6c0b98 100644
--- a/packages/app/src/components/WalletDetails/BothWalletDetails.tsx
+++ b/packages/app/src/components/WalletDetails/BothWalletDetails.tsx
@@ -9,81 +9,100 @@ import { useCountPeopleSupported } from '../../hooks/useCountPeopleSupported';
 import { GoodDollarAmount } from '../GoodDollarAmount';
 
 interface BothWalletDetailsProps {
-  donor: Donor;
-  steward: Steward;
+  donor?: Donor;
+  steward?: Steward;
   tokenPrice?: number;
+  firstName: string;
 }
 
-function BothWalletDetails({ donor, steward, tokenPrice }: BothWalletDetailsProps) {
+function BothWalletDetails({ donor, steward, tokenPrice, firstName }: BothWalletDetailsProps) {
   const { wei: formattedDonations, usdValue: donationsUsdValue } = useDonorCollectivesFlowingBalances(
-    donor.collectives,
+    donor?.collectives || [],
     tokenPrice
   );
 
   const { formatted: formattedRewards, usdValue: rewardsUsdValue } = calculateGoodDollarAmounts(
-    steward.totalEarned,
-    tokenPrice,
-    2
+    steward?.totalEarned || '0',
+    tokenPrice
   );
 
-  const peopleSupported = useCountPeopleSupported(donor.collectives) ?? 0;
+  const peopleSupported = useCountPeopleSupported(donor?.collectives || []) ?? 0;
 
   const nCollectives = countUniqueValuesInTwoArrays(
-    steward.collectives.map((c) => c.collective),
-    donor.collectives.map((d) => d.collective)
+    steward?.collectives.map((c) => c.collective) || [],
+    donor?.collectives.map((d) => d.collective) || []
   );
 
   return (
     <View style={styles.walletDetailsContainer}>
-      <View style={[styles.row]}>
-        <View style={[styles.impactBar, styles.greenBar]} />
-        <View style={styles.rowContent}>
-          <Text style={styles.rowTitle}>This wallet has donated a total of</Text>
+      {donor && (
+        <>
           <View style={[styles.row]}>
-            <Text style={styles.rowBoldText}>G$ </Text>
-            <GoodDollarAmount
-              style={styles.rowText}
-              lastDigitsProps={{ style: { fontSize: 18, lineHeight: 27, fontWeight: '300' } }}
-              amount={formattedDonations || '0'}
-            />
+            <View style={[styles.impactBar, styles.greenBar]} />
+            <View style={styles.rowContent}>
+              <Text style={styles.rowTitle}>{firstName} has donated a total of</Text>
+              <View style={[styles.row]}>
+                <Text style={styles.rowBoldText}>G$ </Text>
+                <GoodDollarAmount
+                  style={styles.rowText}
+                  lastDigitsProps={{ style: { fontSize: 18, lineHeight: 27, fontWeight: '300' } }}
+                  amount={formattedDonations || '0'}
+                />
+              </View>
+              <Text style={styles.formattedUsd}>= {donationsUsdValue} USD</Text>
+            </View>
           </View>
-          <Text style={styles.formattedUsd}>= {donationsUsdValue} USD</Text>
-        </View>
-      </View>
 
-      <View style={[styles.row]}>
-        <View style={[styles.impactBar, styles.greenBar]} />
-        <View style={styles.rowContent}>
-          <Text style={styles.rowTitle}>Since</Text>
-          <Text style={styles.rowText}>{formatTime(donor.joined)}</Text>
-        </View>
-      </View>
-
-      <View style={[styles.row]}>
-        <View style={[styles.impactBar, styles.greenBar]} />
-        <View style={styles.rowContent}>
-          <Text style={styles.rowTitle}>This wallet's funding supported</Text>
           <View style={[styles.row]}>
-            <Text style={styles.rowBoldText}>{peopleSupported}</Text>
-            <Text style={styles.rowText}> people</Text>
+            <View style={[styles.impactBar, styles.greenBar]} />
+            <View style={styles.rowContent}>
+              <Text style={styles.rowTitle}>Since</Text>
+              <Text style={styles.rowText}>{formatTime(donor.joined)}</Text>
+            </View>
           </View>
-        </View>
-      </View>
 
-      <View style={[styles.row]}>
-        <View style={[styles.impactBar, styles.orangeBar]} />
-        <View style={styles.rowContent}>
-          <Text style={styles.rowTitle}>And received</Text>
           <View style={[styles.row]}>
-            <Text style={styles.rowBoldText}>G$ </Text>
-            <Text style={styles.rowText}>{formattedRewards}</Text>
+            <View style={[styles.impactBar, styles.greenBar]} />
+            <View style={styles.rowContent}>
+              <Text style={styles.rowTitle}>{firstName}'s funding supported</Text>
+              <View style={[styles.row]}>
+                <Text style={styles.rowBoldText}>{peopleSupported}</Text>
+                <Text style={styles.rowText}> people</Text>
+              </View>
+            </View>
+          </View>
+        </>
+      )}
+      {steward && (
+        <>
+          <View style={[styles.row]}>
+            <View style={[styles.impactBar, styles.orangeBar]} />
+            <View style={styles.rowContent}>
+              <Text style={styles.rowTitle}>{firstName} has performed</Text>
+              <View style={[styles.row]}>
+                <Text style={styles.rowBoldText}>{steward?.actions}</Text>
+                <Text style={styles.rowText}> actions</Text>
+              </View>
+            </View>
           </View>
-          <Text>= {rewardsUsdValue} USD</Text>
-        </View>
-      </View>
 
+          <View style={[styles.row]}>
+            <View style={[styles.impactBar, styles.orangeBar]} />
+            <View style={styles.rowContent}>
+              <Text style={styles.rowTitle}>And has received</Text>
+              <View style={[styles.row]}>
+                <Text style={styles.rowBoldText}>G$ </Text>
+                <Text style={styles.rowText}>{formattedRewards}</Text>
+              </View>
+              <Text>= {rewardsUsdValue} USD</Text>
+            </View>
+          </View>
+        </>
+      )}
       <View style={[styles.row]}>
-        <View style={[styles.impactBar, styles.blueBar]} />
+        <View
+          style={[styles.impactBar, steward && donor ? styles.blueBar : steward ? styles.orangeBar : styles.greenBar]}
+        />
         <View style={styles.rowContent}>
           <Text style={styles.rowTitle}>in the following</Text>
           <View style={[styles.row]}>
diff --git a/packages/app/src/components/WalletDetails/DonorWalletDetails.tsx b/packages/app/src/components/WalletDetails/DonorWalletDetails.tsx
deleted file mode 100644
index 01b347f9..00000000
--- a/packages/app/src/components/WalletDetails/DonorWalletDetails.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Text, View } from 'react-native';
-import { Donor } from '../../models/models';
-import { styles } from './styles';
-import { formatTime } from '../../lib/formatTime';
-import { useDonorCollectivesFlowingBalances } from '../../hooks/useFlowingBalance';
-import { useCountPeopleSupported } from '../../hooks/useCountPeopleSupported';
-import { GoodDollarAmount } from '../GoodDollarAmount';
-
-interface DonorWalletDetailsProps {
-  firstName: string;
-  donor: Donor;
-  tokenPrice?: number;
-}
-
-function DonorWalletDetails({ firstName, donor, tokenPrice }: DonorWalletDetailsProps) {
-  const { wei: formattedDonations, usdValue } = useDonorCollectivesFlowingBalances(donor.collectives, tokenPrice);
-
-  const peopleSupported = useCountPeopleSupported(donor.collectives) ?? 0;
-
-  return (
-    <View style={styles.walletDetailsContainer}>
-      <View style={[styles.row]}>
-        <View style={[styles.impactBar, styles.greenBar]} />
-        <View style={[styles.rowContent]}>
-          <Text style={styles.rowTitle}>{firstName} has donated a total of</Text>
-          <View style={[styles.row]}>
-            <Text style={styles.rowBoldText}>G$ </Text>
-            <GoodDollarAmount
-              style={styles.rowText}
-              lastDigitsProps={{ style: { fontSize: 18, lineHeight: 27, fontWeight: '300' } }}
-              amount={formattedDonations || '0'}
-            />
-          </View>
-          <Text style={styles.formattedUsd}>= {usdValue} USD</Text>
-        </View>
-      </View>
-
-      <View style={[styles.row]}>
-        <View style={[styles.impactBar, styles.greenBar]} />
-        <View style={styles.rowContent}>
-          <Text style={styles.rowTitle}>Since</Text>
-          <Text style={styles.rowText}>{formatTime(donor.joined)}</Text>
-        </View>
-      </View>
-
-      <View style={[styles.row]}>
-        <View style={[styles.impactBar, styles.greenBar]} />
-        <View style={styles.rowContent}>
-          <Text style={styles.rowTitle}>{firstName}'s funding supported</Text>
-          <View style={[styles.row]}>
-            <Text style={styles.rowBoldText}>{peopleSupported}</Text>
-            <Text style={styles.rowText}> people</Text>
-          </View>
-        </View>
-      </View>
-
-      <View style={[styles.row]}>
-        <View style={[styles.impactBar, styles.greenBar]} />
-        <View style={styles.rowContent}>
-          <Text style={styles.rowTitle}>in the following</Text>
-          <View style={[styles.row]}>
-            <Text style={styles.rowBoldText}>{donor.collectives.length}</Text>
-            <Text style={styles.rowText}> collectives</Text>
-          </View>
-        </View>
-      </View>
-    </View>
-  );
-}
-
-export default DonorWalletDetails;
diff --git a/packages/app/src/components/WalletDetails/StewardWalletDetails.tsx b/packages/app/src/components/WalletDetails/StewardWalletDetails.tsx
deleted file mode 100644
index 359af860..00000000
--- a/packages/app/src/components/WalletDetails/StewardWalletDetails.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Text, View } from 'react-native';
-import { Steward } from '../../models/models';
-import { styles } from './styles';
-import { calculateGoodDollarAmounts } from '../../lib/calculateGoodDollarAmounts';
-
-interface StewardWalletDetailsProps {
-  firstName: string;
-  steward: Steward;
-  tokenPrice?: number;
-}
-
-function StewardWalletDetails({ firstName, steward, tokenPrice }: StewardWalletDetailsProps) {
-  const { formatted: formattedRewards, usdValue } = calculateGoodDollarAmounts(steward.totalEarned, tokenPrice, 2);
-
-  return (
-    <View style={styles.walletDetailsContainer}>
-      <View style={[styles.row]}>
-        <View style={[styles.impactBar, styles.orangeBar]} />
-        <View style={styles.rowContent}>
-          <Text style={styles.rowTitle}>{firstName} has performed</Text>
-          <View style={[styles.row]}>
-            <Text style={styles.rowBoldText}>{steward?.actions}</Text>
-            <Text style={styles.rowText}> actions</Text>
-          </View>
-        </View>
-      </View>
-
-      <View style={[styles.row]}>
-        <View style={[styles.impactBar, styles.orangeBar]} />
-        <View style={styles.rowContent}>
-          <Text style={styles.rowTitle}>And has received</Text>
-          <View style={[styles.row]}>
-            <Text style={styles.rowBoldText}>G$</Text>
-            <Text style={styles.rowText}> {formattedRewards}</Text>
-          </View>
-          <Text>= {usdValue} USD</Text>
-        </View>
-      </View>
-
-      <View style={[styles.row]}>
-        <View style={[styles.impactBar, styles.orangeBar]} />
-        <View style={styles.rowContent}>
-          <Text style={styles.rowTitle}>from the following</Text>
-          <View style={[styles.row]}>
-            <Text style={styles.rowBoldText}>{steward.collectives.length}</Text>
-            <Text style={styles.rowText}> Collectives</Text>
-          </View>
-        </View>
-      </View>
-    </View>
-  );
-}
-
-export default StewardWalletDetails;
diff --git a/packages/app/src/components/WalletDetails/WalletDetails.tsx b/packages/app/src/components/WalletDetails/WalletDetails.tsx
index 9805157b..08bf8ac8 100644
--- a/packages/app/src/components/WalletDetails/WalletDetails.tsx
+++ b/packages/app/src/components/WalletDetails/WalletDetails.tsx
@@ -1,8 +1,6 @@
 import EmptyProfile from './EmptyProfile';
 import { Donor, Steward } from '../../models/models';
-import StewardWalletDetails from './StewardWalletDetails';
 import BothWalletDetails from './BothWalletDetails';
-import DonorWalletDetails from './DonorWalletDetails';
 
 interface WalletDetailsProps {
   firstName: string;
@@ -12,9 +10,9 @@ interface WalletDetailsProps {
 }
 
 function WalletDetails({ firstName, donor, steward, tokenPrice }: WalletDetailsProps) {
-  if (!!donor && !!steward) return <BothWalletDetails donor={donor} steward={steward} tokenPrice={tokenPrice} />;
-  else if (donor) return <DonorWalletDetails donor={donor} firstName={firstName} tokenPrice={tokenPrice} />;
-  else if (steward) return <StewardWalletDetails steward={steward} firstName={firstName} tokenPrice={tokenPrice} />;
+  if (!!donor || !!steward)
+    return <BothWalletDetails donor={donor} steward={steward} tokenPrice={tokenPrice} firstName={firstName} />;
+
   return <EmptyProfile />;
 }