add: more flow styles #210

GoodDollar · Oct 1, 2024 · 546df03 · 546df03
1 parent d0f9f07
commit 546df03
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 21 deletions.
diff --git a/packages/app/index.html b/packages/app/index.html
@@ -7,7 +7,7 @@
   <title>GoodCollective</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
 
   <!-- Google tag (gtag.js) -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-NNPTP7GK17"></script>

diff --git a/packages/app/src/components/DonorsList/DonorsListItem.tsx b/packages/app/src/components/DonorsList/DonorsListItem.tsx
@@ -6,6 +6,7 @@ import useCrossNavigate from '../../routes/useCrossNavigate';
 import { formatAddress } from '../../lib/formatAddress';
 import { useEnsName } from 'wagmi';
 import { useFlowingBalance } from '../../hooks/useFlowingBalance';
+import { GoodDollarAmount } from '../GoodDollarAmount';
 
 interface DonorsListItemProps {
   donor: DonorCollective;
@@ -16,12 +17,7 @@ interface DonorsListItemProps {
 export const DonorsListItem = ({ donor, rank, userFullName }: DonorsListItemProps) => {
   const { navigate } = useCrossNavigate();
 
-  const { formatted: formattedDonations } = useFlowingBalance(
-    donor.contribution,
-    donor.timestamp,
-    donor.flowRate,
-    undefined
-  );
+  const { wei: formattedDonations } = useFlowingBalance(donor.contribution, donor.timestamp, donor.flowRate, undefined);
 
   const { data: ensName } = useEnsName({ address: donor.donor as `0x${string}`, chainId: 1 });
   const userIdentifier = userFullName ?? ensName ?? formatAddress(donor.donor);
@@ -39,7 +35,8 @@ export const DonorsListItem = ({ donor, rank, userFullName }: DonorsListItemProp
           <Text style={[styles.title, { color: circleTextColor }]}>{userIdentifier}</Text>
         </View>
         <Text style={styles.totalDonated}>
-          <Text style={styles.currency}>G$</Text> {formattedDonations}
+          <Text style={styles.currency}>G$ </Text>
+          <GoodDollarAmount amount={formattedDonations || '0'} />
         </Text>
       </TouchableOpacity>
     );
@@ -52,7 +49,8 @@ export const DonorsListItem = ({ donor, rank, userFullName }: DonorsListItemProp
         <Text style={[styles.title, { color: Colors.black }]}>{userIdentifier}</Text>
       </View>
       <Text style={styles.totalDonated}>
-        <Text style={styles.currency}>G$</Text> {formattedDonations}
+        <Text style={styles.currency}>G$ </Text>
+        <GoodDollarAmount amount={formattedDonations || '0'} />
       </Text>
     </TouchableOpacity>
   );

diff --git a/packages/app/src/components/Dropdown.tsx b/packages/app/src/components/Dropdown.tsx
@@ -35,7 +35,6 @@ function Dropdown({ onSelect, value, options }: DropdownProps) {
         style={[
           styles.button,
           styles.row,
-          // eslint-disable-next-line react-native/no-inline-styles
           {
             flexGrow: 1,
             backgroundColor: getDropdownBGC(open),

diff --git a/packages/app/src/components/GoodDollarAmount.tsx b/packages/app/src/components/GoodDollarAmount.tsx
@@ -12,10 +12,10 @@ export const GoodDollarAmount: FC<FlowingBalanceProps> = ({ amount, lastDigitsPr
   const formatted = formatGoodDollarAmount(amount);
   return (
     <>
-      <Text style={styles.amount} {...props}>
+      <Text {...props} style={[styles.amount, props.style]}>
         {formatted.slice(0, -2)}
       </Text>
-      <Text style={styles.amountLastDigits} {...lastDigitsProps}>
+      <Text {...lastDigitsProps} style={[styles.amountLastDigits, lastDigitsProps?.style]}>
         {formatted.slice(-2)}
       </Text>
     </>

diff --git a/packages/app/src/components/TransactionList/styles.ts b/packages/app/src/components/TransactionList/styles.ts
@@ -53,7 +53,7 @@ export const styles = StyleSheet.create({
     ...InterRegular,
     fontSize: 14,
     color: Colors.gray[200],
-    weight: 400,
+    fontWeight: 400,
     textAlign: 'right',
   },
   hash: {

diff --git a/packages/app/src/components/WalletCards/DonorCollectiveCard.tsx b/packages/app/src/components/WalletCards/DonorCollectiveCard.tsx
@@ -7,6 +7,7 @@ import { DonorGreenIcon, InfoIcon } from '../../assets';
 import { useFlowingBalance } from '../../hooks/useFlowingBalance';
 import { useCountPeopleSupported } from '../../hooks/useCountPeopleSupported';
 import { defaultInfoLabel } from '../../models/constants';
+import { GoodDollarAmount } from '../GoodDollarAmount';
 
 interface DonorCollectiveCardProps {
   donorCollective: DonorCollective;
@@ -29,7 +30,7 @@ function DonorCollectiveCard({
 
   const peopleSupported = useCountPeopleSupported([donorCollective]) ?? 0;
 
-  const { formatted: donationsFormatted, usdValue: donationsUsdValue } = useFlowingBalance(
+  const { wei: donationsFormatted, usdValue: donationsUsdValue } = useFlowingBalance(
     donorCollective.contribution,
     donorCollective.timestamp, // Timestamp in Subgraph's UTC.
     donorCollective.flowRate,
@@ -54,7 +55,11 @@ function DonorCollectiveCard({
             <Text style={styles.info}>{userName} has donated</Text>
             <View style={styles.row}>
               <Text style={styles.bold}>G$ </Text>
-              <Text style={styles.totalReceived}>{donationsFormatted}</Text>
+              <GoodDollarAmount
+                style={styles.totalReceived}
+                lastDigitsProps={{ style: { fontSize: 18, fontWeight: '300' } }}
+                amount={donationsFormatted || '0'}
+              />
             </View>
             <Text style={styles.formattedUsd}>= {donationsUsdValue} USD</Text>
           </View>

diff --git a/packages/app/src/components/WalletDetails/BothWalletDetails.tsx b/packages/app/src/components/WalletDetails/BothWalletDetails.tsx
@@ -6,6 +6,7 @@ import { countUniqueValuesInTwoArrays } from '../../lib/countUniqueValuesInTwoAr
 import { calculateGoodDollarAmounts } from '../../lib/calculateGoodDollarAmounts';
 import { useDonorCollectivesFlowingBalances } from '../../hooks/useFlowingBalance';
 import { useCountPeopleSupported } from '../../hooks/useCountPeopleSupported';
+import { GoodDollarAmount } from '../GoodDollarAmount';
 
 interface BothWalletDetailsProps {
   donor: Donor;
@@ -14,7 +15,7 @@ interface BothWalletDetailsProps {
 }
 
 function BothWalletDetails({ donor, steward, tokenPrice }: BothWalletDetailsProps) {
-  const { formatted: formattedDonations, usdValue: donationsUsdValue } = useDonorCollectivesFlowingBalances(
+  const { wei: formattedDonations, usdValue: donationsUsdValue } = useDonorCollectivesFlowingBalances(
     donor.collectives,
     tokenPrice
   );
@@ -38,8 +39,12 @@ function BothWalletDetails({ donor, steward, tokenPrice }: BothWalletDetailsProp
         <View style={styles.rowContent}>
           <Text style={styles.rowTitle}>This wallet has donated a total of</Text>
           <View style={[styles.row]}>
-            <Text style={styles.rowBoldText}>G$</Text>
-            <Text style={styles.rowText}>{formattedDonations}</Text>
+            <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>

diff --git a/packages/app/src/components/WalletDetails/DonorWalletDetails.tsx b/packages/app/src/components/WalletDetails/DonorWalletDetails.tsx
@@ -4,6 +4,7 @@ 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;
@@ -12,7 +13,7 @@ interface DonorWalletDetailsProps {
 }
 
 function DonorWalletDetails({ firstName, donor, tokenPrice }: DonorWalletDetailsProps) {
-  const { formatted: formattedDonations, usdValue } = useDonorCollectivesFlowingBalances(donor.collectives, tokenPrice);
+  const { wei: formattedDonations, usdValue } = useDonorCollectivesFlowingBalances(donor.collectives, tokenPrice);
 
   const peopleSupported = useCountPeopleSupported(donor.collectives) ?? 0;
 
@@ -23,8 +24,12 @@ function DonorWalletDetails({ firstName, donor, tokenPrice }: DonorWalletDetails
         <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>
-            <Text style={styles.rowText}>{formattedDonations}</Text>
+            <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>