Merge pull request #216 from GoodDollar/188-transaction-list-icons

188 transaction list icons

packages/app/src/assets/index.ts

@@ -54,3 +54,8 @@ export { default as empty } from './empty.svg';
 export { default as MetaMaskLogo } from './MetaMask_Fox.svg';
 export { default as WalletConnectLogo } from './WalletConnectLogo.svg';
 export { default as WalletConnectLogoWhite } from './WalletConnectLogoWhite.svg';
+export { default as StreamTX } from './StreamTX.svg';
+export { default as StreamStopTX } from './StreamStopTX.svg';
+export { default as DonationTX } from './DonationTX.svg';
+export { default as ClaimTX } from './ClaimTX.svg';
+export { default as PayoutTX } from './PayoutTX.svg';

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

@@ -7,11 +7,18 @@ import { formatGoodDollarAmount } from '../../lib/calculateGoodDollarAmounts';
 import { Text } from 'react-native';
 import { useMemo } from 'react';
 import { styles } from './styles';
+import { ClaimTX, PayoutTX } from '../../assets';
 
 interface ClaimTransactionListItemProps {
   transaction: ClaimTx;
 }
 
+const getTxIcon = (transaction: ClaimTx) => {
+  if (transaction.type === 'ubi') {
+    return ClaimTX;
+  }
+  return PayoutTX;
+};
 export function ClaimTransactionListItem({ transaction }: ClaimTransactionListItemProps) {
   const { hash, networkFee, stewards, totalRewards } = transaction;
 
@@ -35,6 +42,7 @@ export function ClaimTransactionListItem({ transaction }: ClaimTransactionListIt
 
   return (
     <TransactionListItem
+      icon={getTxIcon(transaction)}
       userIdentifier={userIdentifier}
       isDonation={false}
       amount={amount}

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

@@ -8,13 +8,22 @@ import { formatGoodDollarAmount } from '../../lib/calculateGoodDollarAmounts';
 import { Text } from 'react-native';
 import { useMemo } from 'react';
 import { styles } from './styles';
+import { DonationTX, StreamStopTX, StreamTX } from '../../assets';
 import { totalDurationInSeconds } from '../../lib/totalDurationInSeconds';
 import { Frequency } from '../../models/constants';
+import env from '../../lib/env';
 
 interface SupportTransactionListItemProps {
   transaction: SupportTx;
 }
 
+const getTxIcon = (transaction: SupportTx) => {
+  if (transaction.isFlowUpdate) {
+    if (transaction.flowRate === '0') return StreamStopTX;
+    else return StreamTX;
+  }
+  return DonationTX;
+};
 export function SupportTransactionListItem({ transaction }: SupportTransactionListItemProps) {
   const { hash, networkFee, donor } = transaction;
 
@@ -54,6 +63,12 @@ export function SupportTransactionListItem({ transaction }: SupportTransactionLi
 
   return (
     <TransactionListItem
+      isStream={transaction.isFlowUpdate}
+      explorerLink={
+        // ? `${env.REACT_APP_SUPERFLUID_EXPLORER}/streams/${donor}-${transaction.collective}-${transaction.rewardToken}-0.0`
+        transaction.isFlowUpdate ? `${env.REACT_APP_SUPERFLUID_EXPLORER}/accounts/${donor}?tab=streams` : undefined
+      }
+      icon={getTxIcon(transaction)}
       userIdentifier={userIdentifier}
       isDonation={true}
       amount={flowingAmount}

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

@@ -9,6 +9,7 @@ import { isSupportTx } from '../../models/typeUtil';
 import { ClaimTransactionListItem } from './ClaimTransactionListItem';
 import { SupportTransactionListItem } from './SupportTransactionListItem';
 import { SUBGRAPH_POLL_INTERVAL } from '../../models/constants';
+import env from '../../lib/env';
 
 interface TransactionListProps {
   collective: `0x${string}`;
@@ -41,7 +42,7 @@ function TransactionList({ collective }: TransactionListProps) {
           )}
       </View>
       {isDesktopResolution && transactions.length > 5 && (
-        <Link href={`https://explorer.celo.org/mainnet/address/${collective}`} isExternal style={styles.showMoreButton}>
+        <Link href={`${env.REACT_APP_CELO_EXPLORER}/address/${collective}`} isExternal style={styles.showMoreButton}>
           <Text style={styles.showMoreText}>Show more</Text>
           <Image source={chevronDown} style={styles.showMoreIcon} />
         </Link>

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

@@ -1,19 +1,30 @@
 import { Image, Text, View } from 'react-native';
 import { Colors } from '../../utils/colors';
-import { ReceiveIcon, SendIcon } from '../../assets';
 import { Link } from 'native-base';
 import { styles } from './styles';
 import { formatEther } from 'viem';
+import env from '../../lib/env';
 
 interface TransactionListItemProps {
   userIdentifier: string;
   isDonation?: boolean;
+  isStream?: boolean;
   amount: JSX.Element;
   txHash: string;
+  explorerLink?: string;
   rawNetworkFee: string;
+  icon: any;
 }
 
-function TransactionListItem({ userIdentifier, isDonation, amount, txHash, rawNetworkFee }: TransactionListItemProps) {
+function TransactionListItem({
+  userIdentifier,
+  isDonation,
+  amount,
+  txHash,
+  explorerLink,
+  rawNetworkFee,
+  icon,
+}: TransactionListItemProps) {
   const formattedFee: string = formatEther(BigInt(rawNetworkFee ?? 0)).toString();
   const formattedHash = txHash.slice(0, 40) + '...';
 
@@ -25,9 +36,9 @@ function TransactionListItem({ userIdentifier, isDonation, amount, txHash, rawNe
         <View style={[styles.bar, { backgroundColor: Colors.orange[100] }]} />
       )}
       {isDonation ? (
-        <Image source={{ uri: ReceiveIcon }} style={styles.rowIcon} />
+        <Image source={{ uri: icon }} style={styles.rowIcon} />
       ) : (
-        <Image source={{ uri: SendIcon }} style={styles.rowIcon} />
+        <Image source={{ uri: icon }} style={styles.rowIcon} />
       )}
       <View style={{ flex: 1 }}>
         <View style={styles.txDetails}>
@@ -37,7 +48,7 @@ function TransactionListItem({ userIdentifier, isDonation, amount, txHash, rawNe
             {amount}
           </View>
         </View>
-        <Link href={`https://explorer.celo.org/mainnet/tx/${txHash}`} isExternal>
+        <Link href={explorerLink ?? `${env.REACT_APP_CELO_EXPLORER}/tx/${txHash}`} isExternal>
           <Text style={styles.hash}>{formattedHash}</Text>
         </Link>
         <View>