TW-786 Refactored transaction history for send, receive and delegate

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

@@ -4,8 +4,16 @@ export const useActivityGroupAmountChangeStyles = createUseStyles(({ colors, typ
   container: {
     alignItems: 'flex-end'
   },
-  amountText: {
-    ...typography.numbersRegular17,
+  amountWeight: {
+    fontWeight: '400'
+  },
+  amountText15: {
+    ...typography.numbersRegular15
+  },
+  amountText13: {
+    ...typography.numbersRegular13
+  },
+  destructiveAmountText: {
     color: colors.destructive
   },
   positiveAmountText: {

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

@@ -6,17 +6,30 @@ import { conditionalStyle } from '../../../../utils/conditional-style';
 import { formatAssetAmount } from '../../../../utils/number.util';
 import { useActivityGroupAmountChangeStyles } from './activity-group-amount-change.styles';
 
+export enum TextSize {
+  Small = 'Small',
+  Regular = 'Regular'
+}
 interface Props {
+  textSize?: TextSize;
   nonZeroAmounts: NonZeroAmounts;
 }
 
-export const ActivityGroupAmountChange: FC<Props> = ({ nonZeroAmounts }) => {
+export const ActivityGroupAmountChange: FC<Props> = ({ nonZeroAmounts, textSize = TextSize.Regular }) => {
   const styles = useActivityGroupAmountChangeStyles();
 
   return (
     <View style={styles.container}>
       {nonZeroAmounts.amounts.map(({ parsedAmount, isPositive, symbol }, index) => (
-        <Text key={index} style={[styles.amountText, conditionalStyle(isPositive, styles.positiveAmountText)]}>
+        <Text
+          key={index}
+          style={[
+            styles.amountWeight,
+            conditionalStyle(textSize === TextSize.Small, styles.amountText13),
+            conditionalStyle(textSize === TextSize.Regular, styles.amountText15),
+            conditionalStyle(isPositive, styles.positiveAmountText, styles.destructiveAmountText)
+          ]}
+        >
           {isPositive && '+'}
           {formatAssetAmount(parsedAmount)} {symbol}
         </Text>

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

@@ -12,6 +12,7 @@ export const useActivityGroupDollarAmountChangeStyles = createUseStyles(({ color
     color: colors.destructive
   },
   valueText: {
-    ...typography.numbersRegular11
+    ...typography.numbersRegular11,
+    color: colors.gray1
   }
 }));

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

@@ -2,7 +2,6 @@ import React, { FC } from 'react';
 import { View } from 'react-native';
 
 import { NonZeroAmounts } from '../../../../interfaces/non-zero-amounts.interface';
-import { conditionalStyle } from '../../../../utils/conditional-style';
 import { FormattedAmount } from '../../../formatted-amount';
 import { useActivityGroupDollarAmountChangeStyles } from './activity-group-dollar-amount-change.styles';
 
@@ -16,17 +15,7 @@ export const ActivityGroupDollarAmountChange: FC<Props> = ({ nonZeroAmounts }) =
   return (
     <View style={styles.container}>
       {nonZeroAmounts.dollarSums.map((amount, index) => (
-        <FormattedAmount
-          key={index}
-          amount={amount}
-          isDollarValue={true}
-          showMinusSign={amount.isLessThan(0)}
-          showPlusSign={amount.isGreaterThan(0)}
-          style={[
-            styles.valueText,
-            conditionalStyle(amount.isGreaterThan(0), styles.positiveAmountText, styles.negativeAmountText)
-          ]}
-        />
+        <FormattedAmount key={index} amount={amount} isDollarValue={true} style={styles.valueText} />
       ))}
     </View>
   );

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

@@ -1,31 +1,45 @@
-import { createUseStyles } from '../../../styles/create-use-styles';
-import { formatSize } from '../../../styles/format-size';
+import { createUseStyles } from 'src/styles/create-use-styles';
+import { formatSize } from 'src/styles/format-size';
 
-export const useActivityGroupItemStyles = createUseStyles(({ colors }) => ({
-  container: {
-    borderBottomColor: colors.lines,
-    borderBottomWidth: formatSize(0.5),
+export const useActivityGroupItemStyles = createUseStyles(({ colors, typography }) => ({
+  root: {
+    paddingVertical: formatSize(16),
     paddingRight: formatSize(16)
   },
-  upperContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
+  card: {
+    marginTop: formatSize(12),
+    paddingHorizontal: formatSize(12),
+    borderRadius: formatSize(8),
+    backgroundColor: colors.cardBG
   },
-  exploreContainer: {
-    flexDirection: 'row',
-    alignItems: 'center'
+  oprationTitle: {
+    ...typography.body15Regular,
+    color: colors.black
+  },
+  oprationSubtitle: {
+    ...typography.numbersRegular11,
+    color: colors.gray1
   },
-  lowerContainer: {
+  detailItem: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'flex-end'
+    alignItems: 'center',
+    paddingVertical: formatSize(12)
   },
-  statusContainer: {
-    flexDirection: 'row',
-    alignItems: 'center'
+  detailText: {
+    color: colors.gray1
+  },
+  detailItemBorder: {
+    borderBottomWidth: formatSize(1),
+    borderBottomColor: colors.lines
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  justifyBetween: {
+    justifyContent: 'space-between'
   },
-  accountPkh: {
-    height: formatSize(24)
+  itemsStart: {
+    alignItems: 'flex-start'
   }
 }));

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

@@ -1,19 +1,25 @@
-import React, { FC } from 'react';
-import { View } from 'react-native';
+import { isEmpty } from 'lodash-es';
+import React, { FC, useState } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
 
-import { useNetworkInfo } from '../../../hooks/use-network-info.hook';
-import { useNonZeroAmounts } from '../../../hooks/use-non-zero-amounts.hook';
-import { ActivityGroup, emptyActivity } from '../../../interfaces/activity.interface';
-import { useSelectedRpcUrlSelector } from '../../../store/settings/settings-selectors';
-import { formatSize } from '../../../styles/format-size';
-import { tzktUrl } from '../../../utils/linking.util';
-import { Divider } from '../../divider/divider';
-import { ExternalLinkButton } from '../../icon/external-link-button/external-link-button';
-import { PublicKeyHashText } from '../../public-key-hash-text/public-key-hash-text';
-import { ActivityGroupAmountChange } from './activity-group-amount-change/activity-group-amount-change';
+import { Divider } from 'src/components/divider/divider';
+import { ExternalLinkButton } from 'src/components/icon/external-link-button/external-link-button';
+import { Icon } from 'src/components/icon/icon';
+import { IconNameEnum } from 'src/components/icon/icon-name.enum';
+import { PublicKeyHashText } from 'src/components/public-key-hash-text/public-key-hash-text';
+import { RobotIcon } from 'src/components/robot-icon/robot-icon';
+import { WalletAddress } from 'src/components/wallet-address/wallet-address';
+import { isAndroid } from 'src/config/system';
+import { useNonZeroAmounts } from 'src/hooks/use-non-zero-amounts.hook';
+import { ActivityGroup } from 'src/interfaces/activity.interface';
+import { useSelectedRpcUrlSelector } from 'src/store/settings/settings-selectors';
+import { formatSize } from 'src/styles/format-size';
+import { tzktUrl } from 'src/utils/linking.util';
+
+import { ActivityGroupAmountChange, TextSize } from './activity-group-amount-change/activity-group-amount-change';
 import { ActivityGroupDollarAmountChange } from './activity-group-dollar-amount-change/activity-group-dollar-amount-change';
 import { useActivityGroupItemStyles } from './activity-group-item.styles';
-import { ActivityGroupType } from './activity-group-type/activity-group-type';
+import { useActivityGroupInfo } from './activity-group-type/use-activity-group-info.hook';
 import { ActivityStatusBadge } from './activity-status-badge/activity-status-badge';
 import { ActivityTime } from './activity-time/activity-time';
 import { ActivityGroupItemSelectors } from './selectors';
@@ -25,45 +31,75 @@ interface Props {
 export const ActivityGroupItem: FC<Props> = ({ group }) => {
   const styles = useActivityGroupItemStyles();
 
+  const {
+    transactionType,
+    transactionSubtype,
+    transactionHash,
+    destination: [label, value, address]
+  } = useActivityGroupInfo(group);
   const nonZeroAmounts = useNonZeroAmounts(group);
 
   const selectedRpcUrl = useSelectedRpcUrlSelector();
-  const { isTezosNode } = useNetworkInfo();
 
-  const firstActivity = group[0] ?? emptyActivity;
+  const [areDetailsVisible, setAreDetailsVisible] = useState(false);
 
   return (
-    <View style={styles.container}>
-      <Divider size={formatSize(8)} />
-      <View style={styles.upperContainer}>
-        <ActivityGroupType group={group} />
-
-        <View style={styles.exploreContainer}>
-          <PublicKeyHashText
-            style={styles.accountPkh}
-            publicKeyHash={firstActivity.hash}
-            testID={ActivityGroupItemSelectors.operationHash}
-          />
-          <Divider size={formatSize(4)} />
-          <ExternalLinkButton
-            url={tzktUrl(selectedRpcUrl, firstActivity.hash)}
-            testID={ActivityGroupItemSelectors.externalLink}
-          />
+    <View style={styles.root}>
+      <View style={[styles.row, styles.justifyBetween]}>
+        <View style={[styles.row, styles.itemsStart]}>
+          <RobotIcon size={formatSize(36)} seed={transactionHash} />
+          <Divider size={formatSize(10)} />
+          <View>
+            <Text style={styles.oprationTitle}>{transactionType}</Text>
+            <Text style={styles.oprationSubtitle}>
+              {label} {value}
+            </Text>
+          </View>
+        </View>
+        <View>
+          <ActivityGroupAmountChange nonZeroAmounts={nonZeroAmounts} />
+          <ActivityGroupDollarAmountChange nonZeroAmounts={nonZeroAmounts} />
         </View>
       </View>
-      <Divider size={formatSize(8)} />
-      <ActivityGroupAmountChange nonZeroAmounts={nonZeroAmounts} />
-      <Divider size={formatSize(4)} />
-      <View style={styles.lowerContainer}>
-        <View style={styles.statusContainer}>
-          <ActivityStatusBadge status={firstActivity.status} />
+      <Divider size={formatSize(12)} />
+      <View style={[styles.row, styles.justifyBetween]}>
+        <View style={styles.row}>
+          <ActivityStatusBadge status={group[0].status} />
           <Divider size={formatSize(4)} />
-          <ActivityTime timestamp={firstActivity.timestamp} />
+          <ActivityTime timestamp={1689343447} />
         </View>
-
-        {isTezosNode && <ActivityGroupDollarAmountChange nonZeroAmounts={nonZeroAmounts} />}
+        <TouchableOpacity onPress={() => setAreDetailsVisible(prevState => !prevState)}>
+          <Icon name={areDetailsVisible ? IconNameEnum.DetailsArrowUp : IconNameEnum.DetailsArrowDown} />
+        </TouchableOpacity>
       </View>
-      <Divider size={formatSize(16)} />
+      {areDetailsVisible && (
+        <View style={styles.card}>
+          {!isEmpty(nonZeroAmounts.amounts) && (
+            <View style={[styles.detailItem, styles.detailItemBorder]}>
+              <Text style={styles.detailText}>{transactionSubtype}</Text>
+              <View>
+                <ActivityGroupAmountChange textSize={TextSize.Small} nonZeroAmounts={nonZeroAmounts} />
+                <ActivityGroupDollarAmountChange nonZeroAmounts={nonZeroAmounts} />
+              </View>
+            </View>
+          )}
+          <View style={[styles.detailItem, styles.detailItemBorder]}>
+            <Text style={styles.detailText}>{label}</Text>
+            <WalletAddress isLocalDomainNameShowing publicKeyHash={address} isPublicKeyHashTextDisabled={isAndroid} />
+          </View>
+          <View style={styles.detailItem}>
+            <Text style={styles.detailText}>TxHash:</Text>
+            <View style={styles.row}>
+              <PublicKeyHashText publicKeyHash={transactionHash} testID={ActivityGroupItemSelectors.operationHash} />
+              <Divider size={formatSize(4)} />
+              <ExternalLinkButton
+                url={tzktUrl(selectedRpcUrl, transactionHash)}
+                testID={ActivityGroupItemSelectors.externalLink}
+              />
+            </View>
+          </View>
+        </View>
+      )}
     </View>
   );
 };