feat: new transaction detail page, reuse the DetailCard and

`DetailRow` components across the transaction detail and send review,
new send details design

Author: 0xnullifier

package.json

@@ -113,7 +113,7 @@
     "fast-deep-equal": "3.1.3",
     "file-loader": "6.0.0",
     "fontfaceobserver": "2.1.0",
-    "framer-motion": "^12.9.2",
+    "framer-motion": "^12.35.2",
     "fuse.js": "6.4.6",
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",

public/_locales/en/en.json

@@ -600,5 +600,13 @@
   "fungible": "Fungible",
   "network": "Network",
   "recentActivity": "Recent Activity",
-  "type": "Type"
+  "type": "Type",
+  "txIdLabel": "Tx ID",
+  "notesSection": "Notes",
+  "created": "Created",
+  "confirmed": "Confirmed",
+  "date": "Date",
+  "details": "Details",
+  "addANote": "Add a note",
+  "advancedOptions": "Advanced Options"
 }

src/app/ConfirmPage.tsx

@@ -839,7 +839,12 @@ const ConfirmDAppForm: FC = () => {
         <div className="flex-1" />
 
         <div
-          className={classNames('sticky bottom-0 w-full', 'bg-surface-solid shadow-md', 'flex items-stretch', 'px-4 pt-2 pb-6')}
+          className={classNames(
+            'sticky bottom-0 w-full',
+            'bg-surface-solid shadow-md',
+            'flex items-stretch',
+            'px-4 pt-2 pb-6'
+          )}
         >
           <div className="w-1/2 pr-2">
             <Button

src/app/layouts/PageLayout/ChangelogOverlay/ChangelogOverlay.tsx

@@ -35,7 +35,9 @@ export const ChangelogOverlay: FC = () => {
 
   return lastShownVersion !== currentVersion ? (
     <>
-      <div className={'fixed inset-0 bg-pure-white/10 dark:bg-pure-black/50 backdrop-blur-xl backdrop-saturate-150 z-50'}></div>
+      <div
+        className={'fixed inset-0 bg-pure-white/10 dark:bg-pure-black/50 backdrop-blur-xl backdrop-saturate-150 z-50'}
+      ></div>
       <ContentContainer className={classNames('fixed z-50', 'max-h-full', popupClassName)} padding={!popup}>
         <div
           className={classNames(

src/app/pages/Faucet.tsx

@@ -72,7 +72,9 @@ const Faucet: FC = () => {
         </div>
         <div className="flex flex-col gap-y-4">
           <Button onClick={openFaucet}>
-            <span className="text-base font-medium text-pure-white">{copied ? t('copiedAddress') : t('goToFaucet')}</span>
+            <span className="text-base font-medium text-pure-white">
+              {copied ? t('copiedAddress') : t('goToFaucet')}
+            </span>
           </Button>
         </div>
       </div>

src/app/templates/AddressChip.tsx

@@ -7,7 +7,7 @@ import { Icon, IconName } from 'app/icons/v2';
 type AddressChipProps = HTMLAttributes<HTMLButtonElement> &
   ComponentProps<typeof AddressShortView> &
   Pick<ComponentProps<typeof Icon>, 'size' | 'fill' | 'className'> &
-  Pick<CopyButtonProps, 'small' | 'type' | 'bgShade' | 'rounded' | 'textShade'>;
+  Pick<CopyButtonProps, 'small' | 'type' | 'bgShade' | 'rounded' | 'textShade'> & { copyIcon?: boolean };
 
 const AddressChip: FC<AddressChipProps> = ({
   address,
@@ -16,14 +16,15 @@ const AddressChip: FC<AddressChipProps> = ({
   type = 'button',
   size = 'xs',
   className = 'ml-4',
+  copyIcon = true,
   ...rest
 }) => (
   <CopyButton text={address} type={type} {...rest} className="p-0!">
     <span className="flex flex-row items-center">
       <span className="mr-1 break-all text-heading-gray text-xs leading-none font-medium opacity-64">
         <AddressShortView address={address} displayName={displayName} trim={trim} />
       </span>
-      <Icon name={IconName.Copy} size={size} className={className} />
+      {copyIcon && <Icon name={IconName.Copy} size={size} className={className} />}
     </span>
   </CopyButton>
 );

src/app/templates/HashChip.tsx

@@ -7,7 +7,7 @@ import { Icon, IconName } from 'app/icons/v2';
 type HashChipProps = HTMLAttributes<HTMLButtonElement> &
   ComponentProps<typeof HashShortView> &
   Pick<ComponentProps<typeof Icon>, 'size' | 'fill' | 'className'> &
-  Pick<CopyButtonProps, 'small' | 'type' | 'bgShade' | 'rounded' | 'textShade'>;
+  Pick<CopyButtonProps, 'small' | 'type' | 'bgShade' | 'rounded' | 'textShade'> & { copyIcon?: boolean };
 
 const HashChip: FC<HashChipProps> = ({
   hash,
@@ -19,6 +19,7 @@ const HashChip: FC<HashChipProps> = ({
   type = 'button',
   size = 'xs',
   fill = 'black',
+  copyIcon = true,
   ...rest
 }) => (
   <CopyButton text={hash} type={type} {...rest}>
@@ -31,7 +32,7 @@ const HashChip: FC<HashChipProps> = ({
         lastCharsCount={lastCharsCount}
         displayName={displayName}
       />
-      <Icon name={IconName.Copy} size={size} fill={fill} />
+      {copyIcon && <Icon name={IconName.Copy} size={size} fill={fill} />}
     </span>
   </CopyButton>
 );

src/app/templates/history/DetailCard.tsx

@@ -0,0 +1,38 @@
+import React, { FC, memo } from 'react';
+
+import classNames from 'clsx';
+import { useTranslation } from 'react-i18next';
+
+import { Icon, IconName } from 'app/icons/v2';
+
+import { isCompletedTransaction } from './transactionUtils';
+
+export { DetailCard, DetailRow } from 'lib/ui/DetailCard';
+
+export const ExternalLinkValue: FC<{
+  displayValue: React.ReactNode;
+  href: string;
+}> = ({ displayValue, href }) => (
+  <div className="flex items-center gap-1 text-sm text-heading-gray font-medium">
+    {displayValue}
+    <a href={href} target="_blank" rel="noreferrer">
+      <Icon name={IconName.ArrowRightUp} size="xs" fill="#9E9E9E" />
+    </a>
+  </div>
+);
+
+export const StatusPill: FC<{ message: string }> = memo(({ message }) => {
+  const { t } = useTranslation();
+  const isCompleted = isCompletedTransaction(message);
+
+  const dotColor = isCompleted ? 'bg-[#1A9C52]' : 'bg-blue-500';
+  const textColor = isCompleted ? 'text-[#1A9C52]' : 'text-blue-500';
+  const label = isCompleted ? t('confirmed') : t('inProgress');
+
+  return (
+    <div className="flex items-center gap-1 px-4 py-2 rounded-5 bg-white">
+      <div className={classNames('w-2 h-2 rounded-full', dotColor)} />
+      <span className={classNames('text-[10px] font-medium text-heading-gray', textColor)}>{label}</span>
+    </div>
+  );
+});

src/app/templates/history/History.tsx

@@ -137,12 +137,13 @@ async function fetchTransactionsAsHistoryEntries(
       message: updateMessageForFailed,
       type: HistoryEntryType.CompletedTransaction,
       transactionIcon: icon,
-      amount: tx.amount ? formatAmount(tx.amount, tx.type, tokenMetadata?.decimals) : undefined,
+      amount: tx.amount ? formatAmount(tx.amount, tokenMetadata?.decimals) : undefined,
       token: tokenMetadata ? tokenMetadata.symbol : undefined,
       secondaryAddress: tx.secondaryAccountId,
       txId: tx.id,
       noteType: tx.noteType,
-      faucetId: tx.faucetId
+      faucetId: tx.faucetId,
+      txType: tx.type
     } as IHistoryEntry;
 
     return entry;
@@ -166,13 +167,14 @@ async function fetchPendingTransactionsAsHistoryEntries(address: string, tokenId
       secondaryMessage: formatTransactionStatus(tx.status),
       timestamp: tx.initiatedAt,
       message: tx.displayMessage || 'Generating transaction',
-      amount: tx.amount ? formatAmount(tx.amount, tx.type, tokenMetadata?.decimals) : undefined,
+      amount: tx.amount ? formatAmount(tx.amount, tokenMetadata?.decimals) : undefined,
       token: tokenMetadata ? tokenMetadata.symbol : undefined,
       secondaryAddress: tx.secondaryAccountId,
       txId: tx.id,
       type: entryType,
       noteType: tx.noteType,
-      faucetId: tx.faucetId
+      faucetId: tx.faucetId,
+      txType: tx.type
     } as IHistoryEntry;
   });
   const entries = await Promise.all(entryPromises);