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

.github/workflows/stale.yml

@@ -28,7 +28,7 @@ jobs:
         # Number of days of inactivity before an issue becomes stale
         daysUntilStale: 60
         # Number of days of inactivity before a stale issue is closed
-        daysUntilClose: 20
+        daysUntilClose: 120
         # Issues with these labels will never be considered stale
         exemptLabels: 🗺 epic
         # Label to use when marking an issue as stale

packages/app/package.json

@@ -108,4 +108,4 @@
   "jest": {
     "preset": "react-native"
   }
-}
+}

packages/app/src/components/FlowingBalance.tsx

@@ -0,0 +1,21 @@
+import { useFlowingBalance } from '../hooks/useFlowingBalance';
+import { Text } from 'react-native';
+
+interface FlowingBalanceProps {
+  balance: string;
+  balanceTimestamp: number; // Timestamp in Subgraph's UTC.
+  flowRate: string;
+  tokenPrice: number | undefined;
+  style?: Record<string, any> | Record<string, any>[];
+}
+
+export function FlowingBalance({
+  balance,
+  balanceTimestamp,
+  flowRate,
+  tokenPrice,
+  style,
+}: FlowingBalanceProps): JSX.Element {
+  const { formatted } = useFlowingBalance(balance, balanceTimestamp, flowRate, tokenPrice);
+  return <Text style={style}>{formatted}</Text>;
+}

packages/app/src/components/TransactionList/ClaimTransactionListItem.tsx

@@ -3,6 +3,10 @@ import { formatAddress } from '../../lib/formatAddress';
 import { useEnsName } from 'wagmi';
 import TransactionListItem from './TransactionListItem';
 import { useFetchFullName } from '../../hooks/useFetchFullName';
+import { formatGoodDollarAmount } from '../../lib/calculateGoodDollarAmounts';
+import { Text } from 'react-native';
+import { useMemo } from 'react';
+import { styles } from './styles';
 
 interface ClaimTransactionListItemProps {
   transaction: ClaimTx;
@@ -25,12 +29,15 @@ export function ClaimTransactionListItem({ transaction }: ClaimTransactionListIt
   const userIdentifier =
     multipleStewardsText ?? userFullName ?? ensName ?? (userAddress ? formatAddress(userAddress) : 'Unknown');
 
+  const amount = useMemo(() => {
+    return <Text style={styles.amount}>{formatGoodDollarAmount(totalRewards)}</Text>;
+  }, [totalRewards]);
+
   return (
     <TransactionListItem
       userIdentifier={userIdentifier}
       isDonation={false}
-      amount={totalRewards}
-      amountIsFormatted={false}
+      amount={amount}
       txHash={hash}
       rawNetworkFee={networkFee}
     />

packages/app/src/components/TransactionList/SupportTransactionListItem.tsx

@@ -3,8 +3,12 @@ import { formatAddress } from '../../lib/formatAddress';
 import { useEnsName } from 'wagmi';
 import Decimal from 'decimal.js';
 import TransactionListItem from './TransactionListItem';
-import { useFlowingBalance } from '../../hooks/useFlowingBalance';
 import { useFetchFullName } from '../../hooks/useFetchFullName';
+import { formatGoodDollarAmount } from '../../lib/calculateGoodDollarAmounts';
+import { Text } from 'react-native';
+import { useMemo } from 'react';
+import { FlowingBalance } from '../FlowingBalance';
+import { styles } from './styles';
 
 interface SupportTransactionListItemProps {
   transaction: SupportTx;
@@ -18,22 +22,35 @@ export function SupportTransactionListItem({ transaction }: SupportTransactionLi
   const userFullName = useFetchFullName(userAddress);
   const userIdentifier = userFullName ?? ensName ?? formatAddress(userAddress);
 
-  const { formatted: formattedAmount } = useFlowingBalance(
+  const flowingAmount = useMemo(() => {
+    return transaction.isFlowUpdate ? (
+      <FlowingBalance
+        balance={transaction.contribution}
+        balanceTimestamp={timestamp}
+        flowRate={transaction.flowRate}
+        tokenPrice={undefined}
+        style={styles.amount}
+      />
+    ) : (
+      <Text style={styles.amount}>
+        {formatGoodDollarAmount(
+          new Decimal(transaction.contribution).minus(transaction.previousContribution).toString()
+        )}
+      </Text>
+    );
+  }, [
+    transaction.isFlowUpdate,
     transaction.contribution,
-    timestamp,
     transaction.flowRate,
-    undefined
-  );
-  const amount = transaction.isFlowUpdate
-    ? formattedAmount
-    : new Decimal(transaction.contribution).minus(transaction.previousContribution).toString();
+    transaction.previousContribution,
+    timestamp,
+  ]);
 
   return (
     <TransactionListItem
       userIdentifier={userIdentifier}
       isDonation={true}
-      amount={amount ?? '0'}
-      amountIsFormatted={transaction.isFlowUpdate}
+      amount={flowingAmount}
       txHash={hash}
       rawNetworkFee={networkFee}
     />

packages/app/src/components/TransactionList/TransactionListItem.tsx

@@ -1,31 +1,20 @@
-import { Image, Text, View, StyleSheet } from 'react-native';
-import { InterRegular, InterSemiBold } from '../../utils/webFonts';
+import { Image, Text, View } from 'react-native';
 import { Colors } from '../../utils/colors';
 import { ReceiveIcon, SendIcon } from '../../assets';
 import Decimal from 'decimal.js';
 import { ethers } from 'ethers';
-import { formatGoodDollarAmount } from '../../lib/calculateGoodDollarAmounts';
 import { Link } from 'native-base';
+import { styles } from './styles';
 
 interface TransactionListItemProps {
   userIdentifier: string;
   isDonation?: boolean;
-  amount: string;
-  amountIsFormatted?: boolean;
+  amount: JSX.Element;
   txHash: string;
   rawNetworkFee: string;
 }
 
-function TransactionListItem({
-  userIdentifier,
-  isDonation,
-  amount,
-  amountIsFormatted,
-  txHash,
-  rawNetworkFee,
-}: TransactionListItemProps) {
-  const formattedAmount: string = amountIsFormatted ? amount : formatGoodDollarAmount(amount);
-
+function TransactionListItem({ userIdentifier, isDonation, amount, txHash, rawNetworkFee }: TransactionListItemProps) {
   const formattedFee: string = new Decimal(ethers.utils.formatEther(rawNetworkFee ?? 0)).toString();
   const formattedHash = txHash.slice(0, 40) + '...';
 
@@ -46,7 +35,7 @@ function TransactionListItem({
           <Text style={styles.userId}>{userIdentifier}</Text>
           <View style={styles.txCurrency}>
             <Text style={styles.currency}>{'G$   '}</Text>
-            <Text style={styles.amount}>{formattedAmount}</Text>
+            {amount}
           </View>
         </View>
         <Link href={`https://explorer.celo.org/mainnet/tx/${txHash}`} isExternal>
@@ -65,76 +54,4 @@ function TransactionListItem({
   );
 }
 
-const styles = StyleSheet.create({
-  firstIcon: {
-    height: 32,
-    width: 32,
-  },
-  rowText: {
-    fontSize: 16,
-    ...InterSemiBold,
-    marginLeft: 16,
-    width: '100%',
-    color: Colors.black,
-  },
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-    gap: 8,
-    backgroundColor: Colors.white,
-    minHeight: 65,
-    maxHeight: 65,
-  },
-  bar: {
-    width: 6,
-    alignSelf: 'stretch',
-  },
-  rowIcon: {
-    height: 28,
-    width: 28,
-  },
-  userId: {
-    ...InterSemiBold,
-    fontSize: 16,
-    lineHeight: 24,
-    color: Colors.black,
-    width: '100%',
-  },
-  currency: {
-    ...InterSemiBold,
-    fontSize: 14,
-    color: Colors.gray[100],
-    textAlign: 'right',
-  },
-  amount: {
-    ...InterRegular,
-    fontSize: 14,
-    color: Colors.gray[100],
-    textAlign: 'right',
-  },
-  hash: {
-    ...InterRegular,
-    fontSize: 10,
-    lineHeight: 15,
-    color: Colors.gray[100],
-    marginBottom: 8,
-  },
-  feeText: {
-    ...InterRegular,
-    fontSize: 12,
-    lineHeight: 18,
-    color: Colors.gray[200],
-    width: '100%',
-  },
-  alignLeft: {
-    textAlign: 'left',
-  },
-  alignRight: {
-    textAlign: 'right',
-  },
-  txDetails: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
-  txCurrency: { flexDirection: 'row', alignItems: 'flex-end' },
-  txTotal: { flexDirection: 'row', alignItems: 'flex-end' },
-});
-
 export default TransactionListItem;

packages/app/src/components/TransactionList/styles.ts

@@ -0,0 +1,75 @@
+import { StyleSheet } from 'react-native';
+import { InterRegular, InterSemiBold } from '../../utils/webFonts';
+import { Colors } from '../../utils/colors';
+
+export const styles = StyleSheet.create({
+  firstIcon: {
+    height: 32,
+    width: 32,
+  },
+  rowText: {
+    fontSize: 16,
+    ...InterSemiBold,
+    marginLeft: 16,
+    width: '100%',
+    color: Colors.black,
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    gap: 8,
+    backgroundColor: Colors.white,
+    minHeight: 65,
+    maxHeight: 65,
+  },
+  bar: {
+    width: 6,
+    alignSelf: 'stretch',
+  },
+  rowIcon: {
+    height: 28,
+    width: 28,
+  },
+  userId: {
+    ...InterSemiBold,
+    fontSize: 16,
+    lineHeight: 24,
+    color: Colors.black,
+    width: '100%',
+  },
+  currency: {
+    ...InterSemiBold,
+    fontSize: 14,
+    color: Colors.gray[100],
+    textAlign: 'right',
+  },
+  amount: {
+    ...InterRegular,
+    fontSize: 14,
+    color: Colors.gray[100],
+    textAlign: 'right',
+  },
+  hash: {
+    ...InterRegular,
+    fontSize: 10,
+    lineHeight: 15,
+    color: Colors.gray[100],
+    marginBottom: 8,
+  },
+  feeText: {
+    ...InterRegular,
+    fontSize: 12,
+    lineHeight: 18,
+    color: Colors.gray[200],
+    width: '100%',
+  },
+  alignLeft: {
+    textAlign: 'left',
+  },
+  alignRight: {
+    textAlign: 'right',
+  },
+  txDetails: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+  txCurrency: { flexDirection: 'row', alignItems: 'flex-end' },
+  txTotal: { flexDirection: 'row', alignItems: 'flex-end' },
+});