import React from 'react';
import Typography from '../../ui/Typography';
import { cn } from '../../../lib/utils';
import { TransactionTransfer } from './types';
import { getTransactionIcon } from './utils';
export const TransactionSection: React.FC<{
title: string;
children: React.ReactNode;
}> = ({ title, children }) => (
);
const formatCryptographicKey = (
key: string
): { formatted: string; isKey: boolean } => {
const keyMatch = key.match(/^([A-Z0-9_]+):\s*([a-fA-F0-9]{32,})$/);
if (keyMatch) {
const [, algorithm, hexKey] = keyMatch;
return {
formatted: `${algorithm}: ${hexKey.substring(0, 8)}...${hexKey.substring(-8)}`,
isKey: true,
};
}
return { formatted: key, isKey: false };
};
export const FieldRow: React.FC<{
label: string;
value: string | number | undefined;
isLast?: boolean;
isMono?: boolean;
}> = ({ label, value, isLast = false, isMono = false }) => {
if (value === undefined || value === null || value === '') return null;
const stringValue =
typeof value === 'number' ? value.toLocaleString() : String(value);
const { formatted, isKey } = isMono
? formatCryptographicKey(stringValue)
: { formatted: stringValue, isKey: false };
return (
{label}
{formatted}
);
};
export const TransactionSummary: React.FC<{
type: string;
humanReadableType: string;
transfers: TransactionTransfer[];
hideHeader?: boolean;
}> = ({ type, humanReadableType, transfers, hideHeader }) => {
if (hideHeader) return null;
const { icon: IconComponent, color } = getTransactionIcon(type);
if (type === 'CRYPTOTRANSFER' && transfers.length > 0) {
const positiveTransfers = transfers.filter((t) => t.amount > 0);
const negativeTransfers = transfers.filter((t) => t.amount < 0);
const sendersText = negativeTransfers
.map((t) => `${t.accountId} (${Math.abs(t.amount)} ℏ)`)
.join(', ');
const receiversText = positiveTransfers
.map((t) => `${t.accountId} (${t.amount} ℏ)`)
.join(', ');
return (
Transfer of HBAR from {sendersText} to {receiversText}
);
}
return (
);
};