I hate gas math. Javascript ints suck

web/src/App.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { BsFuelPump } from 'react-icons/bs';
 import useSWR from 'swr';
 
 import { getTransactions } from './etherscan/getTransactions';
@@ -8,7 +9,9 @@ import {
     AllMultiReturnTypes,
     decodeTransaction,
 } from './utils/decodeTransaction';
+import { useEthUsd } from './utils/ethUsd';
 import { formatThousands } from './utils/formatThousands';
+import { gasPriceMagic } from './utils/gasMagic';
 
 const contractAddress = '0xFC0a4A934410F34A9bb8b4F28bEd6b960C943a7E';
 
@@ -35,6 +38,12 @@ export const App = () => {
         return aggregateTotals(decodedTransactions) as Aggregates;
     }, [decodedTransactions]);
 
+    const { data: currentUSDCPrice } = useEthUsd();
+
+    console.log({ currentUSDCPrice });
+
+    const gasPrice = 30n;
+
     return (
         <div className="w-full h-full min-h-screen bg-light-background-secondary dark:bg-dark-background-secondary px-4">
             <div className="mx-auto w-full max-w-3xl space-y-4 py-8">
@@ -63,8 +72,27 @@ export const App = () => {
                     <div className="card w-full px-4 py-2">
                         <div>Commit Fee</div>
                         {totals?.commitAverage ? (
-                            <div className="text-right font-bold text-lg">
-                                {formatThousands(totals.commitAverage)}
+                            <div>
+                                <div className="text-right font-bold text-lg">
+                                    {formatThousands(totals.commitAverage)}
+                                </div>
+                                {currentUSDCPrice ? (
+                                    <div className="text-light-text-secondary flex justify-between gap-2 items-center">
+                                        <div className="flex items-center gap-1">
+                                            <BsFuelPump />
+                                            {gasPrice.toString()}
+                                        </div>
+                                        <div className="text-right flex items-center justify-end">
+                                            ~{' '}
+                                            {gasPriceMagic(
+                                                totals.commitAverage,
+                                                gasPrice,
+                                                currentUSDCPrice
+                                            )}{' '}
+                                            USD
+                                        </div>
+                                    </div>
+                                ) : undefined}
                             </div>
                         ) : (
                             <div>Loading...</div>
@@ -73,8 +101,27 @@ export const App = () => {
                     <div className="card w-full px-4 py-2">
                         <div>Registration Fee</div>
                         {totals?.registerAverage ? (
-                            <div className="text-right font-bold text-lg">
-                                {formatThousands(totals.registerAverage)}
+                            <div>
+                                <div className="text-right font-bold text-lg">
+                                    {formatThousands(totals.registerAverage)}
+                                </div>
+                                {currentUSDCPrice ? (
+                                    <div className="text-light-text-secondary flex justify-between gap-2 items-center">
+                                        <div className="flex items-center gap-1">
+                                            <BsFuelPump />
+                                            {gasPrice.toString()}
+                                        </div>
+                                        <div className="text-right flex items-center justify-end">
+                                            ~{' '}
+                                            {gasPriceMagic(
+                                                totals.registerAverage,
+                                                gasPrice,
+                                                currentUSDCPrice
+                                            )}{' '}
+                                            USD
+                                        </div>
+                                    </div>
+                                ) : undefined}
                             </div>
                         ) : (
                             <div>Loading...</div>
@@ -83,8 +130,27 @@ export const App = () => {
                     <div className="card w-full px-4 py-2">
                         <div>Renewal Fee</div>
                         {totals?.renewAverage ? (
-                            <div className="text-right font-bold text-lg">
-                                {formatThousands(totals.renewAverage)}
+                            <div>
+                                <div className="text-right font-bold text-lg">
+                                    {formatThousands(totals.renewAverage)}
+                                </div>
+                                {currentUSDCPrice ? (
+                                    <div className="text-light-text-secondary flex justify-between gap-2 items-center">
+                                        <div className="flex items-center gap-1">
+                                            <BsFuelPump />
+                                            {gasPrice.toString()}
+                                        </div>
+                                        <div className="text-right flex items-center justify-end">
+                                            ~{' '}
+                                            {gasPriceMagic(
+                                                totals.renewAverage,
+                                                gasPrice,
+                                                currentUSDCPrice
+                                            )}{' '}
+                                            USD
+                                        </div>
+                                    </div>
+                                ) : undefined}
                             </div>
                         ) : (
                             <div>Loading...</div>

web/src/main.tsx

@@ -2,6 +2,7 @@ import './globals.css';
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { SWRConfig } from 'swr';
 
 import { App } from './App';
 
@@ -10,8 +11,29 @@ BigInt.prototype.toJSON = function () {
     return this.toString();
 };
 
+function localStorageProvider() {
+    // When initializing, we restore the data from `localStorage` into a map.
+    const map = new Map(JSON.parse(localStorage.getItem('app-cache') || '[]'));
+
+    // Before unloading the app, we write back all the data into `localStorage`.
+    window.addEventListener('beforeunload', () => {
+        const appCache = JSON.stringify(Array.from(map.entries()));
+
+        localStorage.setItem('app-cache', appCache);
+    });
+
+    // We still use the map for write & read for performance.
+    return map;
+}
+
 ReactDOM.createRoot(document.querySelector('#root') as HTMLElement).render(
     <React.StrictMode>
-        <App />
+        <SWRConfig
+            value={{
+                provider: localStorageProvider as any,
+            }}
+        >
+            <App />
+        </SWRConfig>
     </React.StrictMode>
 );

web/src/txHistory/TransactionEntry.tsx

@@ -11,7 +11,6 @@ import {
 } from '../utils/decodeTransaction';
 import { useEthUsd } from '../utils/ethUsd';
 import { formatThousands } from '../utils/formatThousands';
-import { gasToEth } from '../utils/gas';
 
 export const TransactionEntry: FC<{ tx: AllMultiReturnTypes }> = ({ tx }) => {
     const actionLabel = deriveLabelFromFunctionName(tx.functionName, tx.tx.to);
@@ -65,18 +64,22 @@ export const TransactionEntry: FC<{ tx: AllMultiReturnTypes }> = ({ tx }) => {
                         <BsFuelPump />
                         <div>{formatThousands(BigInt(tx.tx.gasUsed))}</div>
                     </div>
-                    {ethUsd.data && (
+                    {ethUsd.data ? (
                         <div className="text-sm opacity-70">
-                            {(
-                                ethUsd.data *
-                                gasToEth(
-                                    BigInt(tx.tx.gasUsed),
-                                    BigInt(tx.tx.gasPrice)
+                            {Number(
+                                Number(
+                                    (ethUsd.data *
+                                        Number(
+                                            (BigInt(tx.tx.gasUsed) *
+                                                BigInt(tx.tx.gasPrice)) /
+                                                1_000_000_000_000_000n
+                                        )) /
+                                        1_000_000
                                 )
                             ).toFixed(2)}{' '}
                             USD
                         </div>
-                    )}
+                    ) : undefined}
                 </div>
                 <div className="flex justify-center items-center gap-1">
                     <LuFlame />

web/src/utils/ethUsd.ts

@@ -1,7 +1,7 @@
 import useSWR from 'swr';
 
-export const useEthUsd = (timestamp: number) => {
-    const date = new Date(timestamp);
+export const useEthUsd = (timestamp?: number) => {
+    const date = timestamp ? new Date(timestamp) : new Date(Date.now());
     const year = date.getUTCFullYear();
     const month = date.getUTCMonth() + 1;
     const day = date.getUTCDate();
@@ -10,12 +10,21 @@ export const useEthUsd = (timestamp: number) => {
     const dateString = `${day}-${month}-${year}`;
 
     return useSWR(['ethUsd', dateString], async () => {
+        const x = localStorage.getItem('usdc-eth-' + dateString);
+
+        if (x) return Number(x);
+
         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;
+        // USDC per 1000 ETH
+        const value = Number(data.market_data.current_price.usd) * 1000;
+
+        localStorage.setItem('usdc-eth-' + dateString, value.toString());
+
+        return Number(value);
     });
 };

web/src/utils/gasMagic.ts

@@ -0,0 +1,12 @@
+export const gasPriceMagic = (
+    gas: bigint,
+    gasPrice: bigint,
+    ethUSDC: number
+) => {
+    return (
+        Number(
+            BigInt(Math.round(Number(gas * gasPrice * 1000n) * ethUSDC)) /
+                1_000_000n
+        ) / 1_000_000_000
+    ).toPrecision(3);
+};