Add datetime parser & gas => usd

web/src/txHistory/TransactionEntry.tsx

@@ -7,7 +7,10 @@ import { decodeFunctionData } from 'viem';
 
 import { ultraBulkAbi } from '../abi';
 import { EtherscanTx } from '../etherscan/getTransactions';
+import { formatFullAndRelativeDate } from '../utils/date';
+import { useEthUsd } from '../utils/ethUsd';
 import { formatThousands } from '../utils/formatThousands';
+import { gasToEth } from '../utils/gas';
 
 type DecodedFunction<K, V> = { functionName: K; args: V };
 type MultiRegisterType = DecodedFunction<
@@ -93,9 +96,14 @@ export const TransactionEntry: FC<{ txHash: EtherscanTx }> = ({ txHash }) => {
         txHash.to
     );
     const inputData = decodeFunctionInput(txHash.input, txHash.to);
+    const ethUsd = useEthUsd(Number(txHash.timeStamp) * 1000);
 
     const namesLength = getNameLength(inputData);
 
+    const { full, relative } = formatFullAndRelativeDate(
+        new Date(Number(txHash.timeStamp) * 1000)
+    );
+
     return (
         <div className="p-4 card w-full space-y-3">
             <div className="flex justify-between items-center gap-4 flex-wrap">
@@ -107,11 +115,14 @@ export const TransactionEntry: FC<{ txHash: EtherscanTx }> = ({ txHash }) => {
                         {txHash.hash.slice(0, 8)}...
                     </a>
                 </div>
-                <div className="flex justify-center items-center gap-1">
+                <div
+                    className="flex justify-center items-center gap-1"
+                    title="Blocknumber"
+                >
                     <FiBox />
                     {txHash.blockNumber}
                 </div>
-                <div>{/* txHash.timestamp */}5 seconds ago</div>
+                <div title={full}>{relative}</div>
                 <div>
                     <span className="label label-blue">{actionLabel}</span>
                 </div>
@@ -132,9 +143,23 @@ export const TransactionEntry: FC<{ txHash: EtherscanTx }> = ({ txHash }) => {
                         <div className="text-xs">Per Name</div>
                     </div>
                 )}
-                <div className="flex justify-center items-center gap-1">
-                    <BsFuelPump />
-                    <div>{formatThousands(BigInt(txHash.gasUsed))}</div>
+                <div className="flex flex-col justify-center items-center gap-1">
+                    <div className="flex justify-center items-center gap-1">
+                        <BsFuelPump />
+                        <div>{formatThousands(BigInt(txHash.gasUsed))}</div>
+                    </div>
+                    {ethUsd.data && (
+                        <div className="text-sm opacity-70">
+                            {(
+                                ethUsd.data *
+                                gasToEth(
+                                    BigInt(txHash.gasUsed),
+                                    BigInt(txHash.gasPrice)
+                                )
+                            ).toFixed(2)}{' '}
+                            USD
+                        </div>
+                    )}
                 </div>
                 <div className="flex justify-center items-center gap-1">
                     <LuFlame />

web/src/utils/date.ts

@@ -0,0 +1,61 @@
+// Formatter for "Today" and "Yesterday" etc
+const relative = new Intl.RelativeTimeFormat('en-GB', { numeric: 'auto' });
+// Formatter for dates, e.g. "Mon, 31 May 2021"
+const long = new Intl.DateTimeFormat('en-GB', {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+});
+
+export const getRelativeUnit = (
+    diff: number
+): [Intl.RelativeTimeFormatUnit, number] => {
+    const absDiff = Math.abs(diff);
+
+    switch (true) {
+        case absDiff < 60_000:
+            return ['second', diff / 1000];
+        case absDiff < 3_600_000:
+            return ['minute', diff / 60_000];
+        case absDiff < 86_400_000:
+            return ['hour', diff / 3_600_000];
+        case absDiff < 604_800_000:
+            return ['day', diff / 86_400_000];
+        case absDiff < 2_592_000_000:
+            return ['week', diff / 604_800_000];
+        case absDiff < 31_536_000_000:
+            return ['month', diff / 2_592_000_000];
+        default:
+            return ['year', diff / 31_536_000_000];
+    }
+};
+
+/**
+ * Returns a string representation of the given date, formatted as a relative date.
+ * Automatically adjusts between the most appropriate unit depending on the difference between the given date and the current date.
+ * Like seconds, minutes, hours, days, weeks, months, years, etc.
+ * @param date Date to format to
+ */
+export const formatRelativeDate = (date: Date) => {
+    const diff = date.getTime() - Date.now();
+
+    // To make it adjust to the most appropriate unit, we need to manually decide which unit to use
+    // and then calculate the value for that unit. We can't use the built-in `Intl.RelativeTimeFormat` for this.
+    // We need to do it with an absolute value, so we can't use the `diff` variable directly.
+    const [unit, unitedDiff] = getRelativeUnit(diff);
+
+    // Now we can use the `Intl.RelativeTimeFormat` to format the date
+    return relative.format(Math.round(unitedDiff), unit);
+};
+
+/**
+ * Returns both a full date and a relative date, formatted as a string in an object
+ * @param date Date to format to
+ */
+export const formatFullAndRelativeDate = (date: Date) => {
+    return {
+        full: long.format(date),
+        relative: formatRelativeDate(date),
+    };
+};

web/src/utils/ethUsd.ts

@@ -0,0 +1,21 @@
+import useSWR from 'swr';
+
+export const useEthUsd = (timestamp: number) => {
+    const date = new Date(timestamp);
+    const year = date.getUTCFullYear();
+    const month = date.getUTCMonth() + 1;
+    const day = date.getUTCDate();
+
+    // dd-mm-yyyy
+    const dateString = `${day}-${month}-${year}`;
+
+    return useSWR(['ethUsd', dateString], async () => {
+        const response = await fetch(
+            `https://api.coingecko.com/api/v3/coins/ethereum/history?date=${dateString}`
+        );
+
+        const data = await response.json();
+
+        return data.market_data.current_price.usd as number;
+    });
+};

web/src/utils/gas.ts

@@ -0,0 +1,10 @@
+export const gasToEth = (gas: bigint, gasPrice: bigint) => {
+    console.log(
+        gas,
+        gasPrice,
+        gas * gasPrice,
+        Number(gas * gasPrice) / 1_000_000_000_000_000_000
+    );
+
+    return Number(gas * gasPrice) / 1_000_000_000_000_000_000;
+};