add: consolidate components into one

GoodDollar · Dec 16, 2024 · 13cd974 · 13cd974
1 parent 8813f36
commit 13cd974
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 181 deletions.
diff --git 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
@@ -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
diff --git a/packages/app/src/components/WalletDetails/StewardWalletDetails.tsx b/packages/app/src/components/WalletDetails/StewardWalletDetails.tsx
diff --git 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 />;
 }