txs: detail sheet updates

.prettierignore

@@ -10,4 +10,4 @@ rainbow-scripts
 .vscode
 __generated__
 coverage
-InjectedJSBundle.js
+InjectedJSBundle.js

src/languages/en_US.json

@@ -2008,6 +2008,7 @@
       "to": "To",
       "value": "Value",
       "hash": "Tx Hash",
+      "you": "You",
       "network_fee": "Network Fee",
       "hash_copied": "\uDBC0\uDC63 Transaction hash copied",
       "address_copied": "\uDBC0\uDC63 Address copied",

src/screens/transaction-details/components/TransactionDetailsFromToSection.tsx

@@ -1,74 +1,20 @@
-import React, { useMemo } from 'react';
-import { Box, Stack } from '@/design-system';
-import * as i18n from '@/languages';
-import { TransactionDetailsAddressRow } from '@/screens/transaction-details/components/TransactionDetailsAddressRow';
-import { useContacts, useUserAccounts } from '@/hooks';
-import { isLowerCaseMatch } from '@/utils';
+import React from 'react';
+import { Box } from '@/design-system';
 import { TransactionDetailsDivider } from '@/screens/transaction-details/components/TransactionDetailsDivider';
 import { RainbowTransaction } from '@/entities';
+import TransactionMasthead from './TransactionMasthead';
 
 type Props = {
   transaction: RainbowTransaction;
   presentToast?: () => void;
 };
 
 export const TransactionDetailsFromToSection: React.FC<Props> = ({ transaction, presentToast }) => {
-  const from = transaction.from ?? undefined;
-  const to = transaction.to ?? undefined;
-  const { contacts } = useContacts();
-  const fromContact = from ? contacts[from] : undefined;
-  const toContact = to ? contacts[to] : undefined;
-
-  const { userAccounts, watchedAccounts } = useUserAccounts();
-
-  const fromAccount = useMemo(() => {
-    if (!from) {
-      return undefined;
-    } else {
-      return (
-        userAccounts.find(account => isLowerCaseMatch(account.address, from)) ??
-        watchedAccounts.find(account => isLowerCaseMatch(account.address, from))
-      );
-    }
-  }, [from]);
-  const toAccount = useMemo(() => {
-    if (!to) {
-      return undefined;
-    } else {
-      return (
-        userAccounts.find(account => isLowerCaseMatch(account.address, to)) ??
-        watchedAccounts.find(account => isLowerCaseMatch(account.address, to))
-      );
-    }
-  }, [to]);
-
-  if (!from && !to) {
-    return null;
-  }
   return (
     <>
       <TransactionDetailsDivider />
       <Box paddingVertical="10px">
-        <Stack>
-          {from && (
-            <TransactionDetailsAddressRow
-              onAddressCopied={presentToast}
-              address={from}
-              title={i18n.t(i18n.l.transaction_details.from)}
-              contact={fromContact}
-              account={fromAccount}
-            />
-          )}
-          {to && (
-            <TransactionDetailsAddressRow
-              onAddressCopied={presentToast}
-              address={to}
-              title={i18n.t(i18n.l.transaction_details.to)}
-              contact={toContact}
-              account={toAccount}
-            />
-          )}
-        </Stack>
+        <TransactionMasthead transaction={transaction} />
       </Box>
     </>
   );

src/screens/transaction-details/components/TransactionDetailsStatusActionsAndTimestampSection.tsx

@@ -24,7 +24,7 @@ type Props = {
 };
 
 export const TransactionDetailsStatusActionsAndTimestampSection: React.FC<Props> = ({ transaction, hideIcon }) => {
-  const { minedAt, status, from } = transaction;
+  const { minedAt, status, type, from } = transaction;
   const dispatch = useDispatch();
   const { navigate, goBack } = useNavigation();
   const accountAddress = useSelector((state: AppState) => state.settings.accountAddress);
@@ -112,7 +112,7 @@ export const TransactionDetailsStatusActionsAndTimestampSection: React.FC<Props>
       </Box>
       <Box paddingBottom="24px">
         <Stack alignHorizontal="center" space="16px">
-          {status && !hideIcon && (
+          {type && !hideIcon && (
             <Box borderRadius={30} style={{ overflow: 'hidden' }}>
               <RadialGradient
                 style={{
@@ -131,10 +131,12 @@ export const TransactionDetailsStatusActionsAndTimestampSection: React.FC<Props>
               </RadialGradient>
             </Box>
           )}
+
           <Stack alignHorizontal="center" space="24px">
-            {status && (
+            {type && (
               <Text size="22pt" weight="heavy" color={color}>
-                {capitalize(status)}
+                {/* @ts-ignore */}
+                {i18n.t(i18n.l.transactions.type[transaction?.title])}
               </Text>
             )}
             {date && (

src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx

@@ -32,12 +32,10 @@ export const TransactionDetailsValueAndFeeSection: React.FC<Props> = ({ transact
   const change = transaction?.changes?.[0];
 
   const value = change?.value || transaction.balance?.display;
-  const valueDisplay = convertRawAmountToBalance(value || '', assetData!).display || '';
-  const nativeCurrencyValue = convertAmountAndPriceToNativeDisplay(
-    change?.asset?.balance?.amount || '',
-    change?.asset?.price?.value || '',
-    nativeCurrency
-  ).display;
+  const valueDisplay = value ? convertRawAmountToBalance(value || '', assetData!).display : '';
+  const nativeCurrencyValue = change?.asset?.price?.value
+    ? convertAmountAndPriceToNativeDisplay(change?.asset?.balance?.amount || '', change?.asset?.price?.value || '', nativeCurrency).display
+    : '';
   const feeValue = fee?.value.display ?? '';
   const feeNativeCurrencyValue = fee?.native?.display ?? '';