Tw 783 transaction history unknown operation mobile

package.json

@@ -57,7 +57,7 @@
     "@taquito/tzip12": "17.0.0",
     "@taquito/tzip16": "17.0.0",
     "@taquito/utils": "17.0.0",
-    "@temple-wallet/transactions-parser": "^1.0.0",
+    "@temple-wallet/transactions-parser": "^3.0.0",
     "@temple-wallet/wallet-address-validator": "^0.4.3",
     "@tezos-domains/core": "1.26.0",
     "@tezos-domains/taquito-client": "1.26.0",

src/components/activity-groups-list/activity-group-item/activity-group-amount-change/activity-group-amount-change.styles.ts

@@ -2,7 +2,8 @@ import { createUseStyles } from '../../../../styles/create-use-styles';
 
 export const useActivityGroupAmountChangeStyles = createUseStyles(({ colors, typography }) => ({
   container: {
-    alignItems: 'flex-end'
+    alignItems: 'flex-end',
+    flexShrink: 1
   },
   amountWeight: {
     fontWeight: '400'
@@ -18,5 +19,9 @@ export const useActivityGroupAmountChangeStyles = createUseStyles(({ colors, typ
   },
   positiveAmountText: {
     color: colors.adding
+  },
+  valueText: {
+    ...typography.numbersRegular11,
+    color: colors.gray1
   }
 }));

src/components/activity-groups-list/activity-group-item/activity-group-amount-change/activity-group-amount-change.tsx

@@ -1,11 +1,12 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { Text, View } from 'react-native';
 
-import { NonZeroAmounts } from 'src/interfaces/non-zero-amounts.interface';
+import { ActivityAmount } from 'src/interfaces/non-zero-amounts.interface';
+import { isDoubleTokenOperation, isSingleTokenOperation } from 'src/utils/activity.utils';
 import { conditionalStyle } from 'src/utils/conditional-style';
-import { formatAssetAmount } from 'src/utils/number.util';
 import { shortizeSymbol } from 'src/utils/token-metadata.utils';
 
+import { ItemAmountChange } from '../item-amount-change/item-amount-change';
 import { useActivityGroupAmountChangeStyles } from './activity-group-amount-change.styles';
 
 export enum TextSize {
@@ -14,17 +15,51 @@ export enum TextSize {
 }
 interface Props {
   textSize?: TextSize;
-  nonZeroAmounts: NonZeroAmounts;
+  nonZeroAmounts: Array<ActivityAmount>;
 }
 
+const FIRST_AMOUNT_INDEX = 0;
+
 export const ActivityGroupAmountChange: FC<Props> = ({ nonZeroAmounts, textSize = TextSize.Regular }) => {
   const styles = useActivityGroupAmountChangeStyles();
 
-  return (
-    <View style={styles.container}>
-      {nonZeroAmounts.amounts.map(({ parsedAmount, isPositive, symbol }, index) => (
+  const children = useMemo(() => {
+    if (nonZeroAmounts.length === 0) {
+      return (
+        <Text
+          style={[
+            styles.amountWeight,
+            conditionalStyle(textSize === TextSize.Small, styles.amountText13),
+            conditionalStyle(textSize === TextSize.Regular, styles.amountText15)
+          ]}
+        >
+          ---
+        </Text>
+      );
+    }
+
+    const { isPositive, parsedAmount, symbol } = nonZeroAmounts[FIRST_AMOUNT_INDEX];
+
+    if (isSingleTokenOperation(nonZeroAmounts)) {
+      return (
+        <ItemAmountChange
+          amount={parsedAmount}
+          isPositive={isPositive}
+          symbol={symbol}
+          textStyle={[
+            styles.amountWeight,
+            conditionalStyle(textSize === TextSize.Small, styles.amountText13),
+            conditionalStyle(textSize === TextSize.Regular, styles.amountText15)
+          ]}
+        />
+      );
+    }
+
+    if (isDoubleTokenOperation(nonZeroAmounts)) {
+      const symbols = nonZeroAmounts.map(({ symbol }) => symbol).join(',');
+
+      return (
         <Text
-          key={index}
           style={[
             styles.amountWeight,
             conditionalStyle(textSize === TextSize.Small, styles.amountText13),
@@ -33,9 +68,25 @@ export const ActivityGroupAmountChange: FC<Props> = ({ nonZeroAmounts, textSize
           ]}
         >
           {isPositive && '+'}
-          {formatAssetAmount(parsedAmount)} {shortizeSymbol(symbol)}
+          {shortizeSymbol(symbols)}
         </Text>
-      ))}
-    </View>
-  );
+      );
+    }
+
+    return (
+      <Text
+        style={[
+          styles.amountWeight,
+          conditionalStyle(textSize === TextSize.Small, styles.amountText13),
+          conditionalStyle(textSize === TextSize.Regular, styles.amountText15),
+          conditionalStyle(isPositive, styles.positiveAmountText, styles.destructiveAmountText)
+        ]}
+      >
+        {isPositive ? '+' : '-'}
+        {shortizeSymbol(symbol)} and {nonZeroAmounts.length - 1} others
+      </Text>
+    );
+  }, [nonZeroAmounts, textSize]);
+
+  return <View style={styles.container}>{children}</View>;
 };

src/components/activity-groups-list/activity-group-item/activity-group-dollar-amount-change/activity-group-dollar-amount-change.tsx

@@ -1,22 +1,33 @@
-import React, { FC } from 'react';
-import { View } from 'react-native';
+import { BigNumber } from 'bignumber.js';
+import React, { FC, memo } from 'react';
+import { View, Text } from 'react-native';
+
+import { FormattedAmount } from 'src/components/formatted-amount';
+import { ZERO } from 'src/config/swap';
 
-import { NonZeroAmounts } from '../../../../interfaces/non-zero-amounts.interface';
-import { FormattedAmount } from '../../../formatted-amount';
 import { useActivityGroupDollarAmountChangeStyles } from './activity-group-dollar-amount-change.styles';
 
 interface Props {
-  nonZeroAmounts: NonZeroAmounts;
+  dollarValue: BigNumber | undefined;
 }
 
-export const ActivityGroupDollarAmountChange: FC<Props> = ({ nonZeroAmounts }) => {
-  const styles = useActivityGroupDollarAmountChangeStyles();
+export const ActivityGroupDollarAmountChange: FC<Props> = memo(
+  ({ dollarValue }) => {
+    const styles = useActivityGroupDollarAmountChangeStyles();
+
+    if (dollarValue === undefined || dollarValue.isEqualTo(ZERO)) {
+      return (
+        <View style={styles.container}>
+          <Text style={styles.valueText}>---</Text>
+        </View>
+      );
+    }
 
-  return (
-    <View style={styles.container}>
-      {nonZeroAmounts.dollarSums.map((amount, index) => (
-        <FormattedAmount key={index} amount={amount} isDollarValue={true} style={styles.valueText} />
-      ))}
-    </View>
-  );
-};
+    return (
+      <View style={styles.container}>
+        <FormattedAmount isDollarValue amount={dollarValue} style={styles.valueText} />
+      </View>
+    );
+  },
+  (prevProps, nextProps) => prevProps.dollarValue?.toFixed() === nextProps.dollarValue?.toFixed()
+);

src/components/activity-groups-list/activity-group-item/activity-group-item.styles.ts

@@ -9,12 +9,6 @@ export const useActivityGroupItemStyles = createUseStyles(({ colors, typography
   flex: {
     flex: 1
   },
-  card: {
-    marginTop: formatSize(12),
-    paddingHorizontal: formatSize(12),
-    borderRadius: formatSize(8),
-    backgroundColor: colors.cardBG
-  },
   oprationTitle: {
     ...typography.numbersRegular15,
     color: colors.black
@@ -37,16 +31,25 @@ export const useActivityGroupItemStyles = createUseStyles(({ colors, typography
   },
   robotBackground: {
     backgroundColor: colors.navigation
-  }
-}));
-
-export const useActivityDetailsStyles = createUseStyles(({ colors }) => ({
+  },
+  red: {
+    backgroundColor: 'red'
+  },
+  green: {
+    backgroundColor: 'green'
+  },
+  chevron: {
+    padding: formatSize(4)
+  },
   card: {
     marginTop: formatSize(12),
     paddingHorizontal: formatSize(12),
     borderRadius: formatSize(8),
     backgroundColor: colors.cardBG
-  },
+  }
+}));
+
+export const useActivityDetailsStyles = createUseStyles(({ colors }) => ({
   itemWrapper: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -59,11 +62,11 @@ export const useActivityDetailsStyles = createUseStyles(({ colors }) => ({
     borderBottomWidth: formatSize(0.5),
     borderBottomColor: colors.lines
   },
-  chevron: {
-    padding: formatSize(4)
-  },
   hashChip: {
     height: formatSize(24)
+  },
+  mb8: {
+    marginBottom: formatSize(8)
   }
 }));
 

src/components/activity-groups-list/activity-group-item/activity-group-item.tsx

@@ -1,29 +1,25 @@
 import React, { FC, memo } from 'react';
 import { View } from 'react-native';
 
-import { Divider } from 'src/components/divider/divider';
-import { useNonZeroAmounts } from 'src/hooks/use-non-zero-amounts.hook';
-import { ActivityGroup, emptyActivity } from 'src/interfaces/activity.interface';
-import { formatSize } from 'src/styles/format-size';
+import { ActivityGroup } from 'src/interfaces/activity.interface';
 
 import { useActivityGroupItemStyles } from './activity-group-item.styles';
-import { Details } from './details';
-import { Info } from './info/info';
+import { ActivityItem } from './activity-item/activity-item';
 
 interface Props {
   group: ActivityGroup;
 }
 
 export const ActivityGroupItem: FC<Props> = memo(({ group }) => {
   const styles = useActivityGroupItemStyles();
-  const firstActivity = group[0] ?? emptyActivity;
-  const nonZeroAmounts = useNonZeroAmounts(firstActivity.tokensDeltas);
 
   return (
-    <View style={styles.root}>
-      <Info activity={firstActivity} nonZeroAmounts={nonZeroAmounts} />
-      <Divider size={formatSize(12)} />
-      <Details activity={firstActivity} nonZeroAmounts={nonZeroAmounts} />
+    <View>
+      {group.map(activity => (
+        <View style={styles.root} key={`${activity.id}_${activity.hash}`}>
+          <ActivityItem activity={activity} />
+        </View>
+      ))}
     </View>
   );
 });

src/components/activity-groups-list/activity-group-item/activity-item/abstract-item.tsx

@@ -0,0 +1,47 @@
+import { TzktOperationStatus } from '@temple-wallet/transactions-parser';
+import React, { FC, ReactNode, useCallback, useState } from 'react';
+import { View } from 'react-native';
+
+import { Divider } from 'src/components/divider/divider';
+import { Icon } from 'src/components/icon/icon';
+import { IconNameEnum } from 'src/components/icon/icon-name.enum';
+import { TouchableWithAnalytics } from 'src/components/touchable-with-analytics';
+import { formatSize } from 'src/styles/format-size';
+
+import { useActivityCommonStyles, useActivityGroupItemStyles } from '../activity-group-item.styles';
+import { ActivityStatusBadge } from '../activity-status-badge/activity-status-badge';
+import { ActivityTime } from '../activity-time/activity-time';
+import { ActivityGroupItemSelectors } from '../selectors';
+
+export const AbstractItem: FC<{ status: TzktOperationStatus; timestamp: string; face: ReactNode; details: ReactNode }> =
+  ({ status, timestamp, face, details }) => {
+    const styles = useActivityGroupItemStyles();
+    const commonStyles = useActivityCommonStyles();
+
+    const [areDetailsVisible, setAreDetailsVisible] = useState(false);
+    const handleOpenActivityDetailsPress = useCallback(() => setAreDetailsVisible(prevState => !prevState), []);
+
+    return (
+      <View>
+        <View style={[commonStyles.row, commonStyles.itemsCenter]}>{face}</View>
+        <Divider size={formatSize(12)} />
+        <View>
+          <View style={[commonStyles.row, commonStyles.justifyBetween]}>
+            <View style={[commonStyles.row, commonStyles.itemsCenter]}>
+              <ActivityStatusBadge status={status} />
+              <Divider size={formatSize(4)} />
+              <ActivityTime timestamp={timestamp} />
+            </View>
+            <TouchableWithAnalytics
+              style={styles.chevron}
+              testID={ActivityGroupItemSelectors.details}
+              onPress={handleOpenActivityDetailsPress}
+            >
+              <Icon name={areDetailsVisible ? IconNameEnum.DetailsArrowUp : IconNameEnum.DetailsArrowDown} />
+            </TouchableWithAnalytics>
+          </View>
+          {areDetailsVisible && <View style={styles.card}>{details}</View>}
+        </View>
+      </View>
+    );
+  };

src/components/activity-groups-list/activity-group-item/activity-item/activity-item.tsx

@@ -0,0 +1,28 @@
+import { ActivityType } from '@temple-wallet/transactions-parser';
+import React, { FC, memo } from 'react';
+
+import { BakingRewards } from './baking-rewards';
+import { Delegate } from './delegate';
+import { Interaction } from './interaction';
+import { ActivityItemProps } from './item.props';
+import { Receive } from './receive';
+import { Send } from './send';
+import { Unknown } from './unknown';
+
+export const ActivityItem: FC<ActivityItemProps> = memo(({ activity }) => {
+  switch (activity.type) {
+    case ActivityType.Send:
+      return <Send activity={activity} />;
+    case ActivityType.Recieve:
+      return <Receive activity={activity} />;
+    case ActivityType.BakingRewards:
+      return <BakingRewards activity={activity} />;
+    case ActivityType.Delegation:
+      return <Delegate activity={activity} />;
+    case ActivityType.Interaction:
+      return <Interaction activity={activity} />;
+
+    default:
+      return <Unknown activity={activity} />;
+  }
+});