tx l2 fields

types/api/transaction.ts

@@ -50,6 +50,10 @@ export type Transaction = (
   tx_types: Array<TransactionType>;
   tx_tag: string | null;
   actions: Array<TxAction>;
+  l1_fee?: string;
+  l1_fee_scalar?: string;
+  l1_gas_price?: string;
+  l1_gas_used?: string;
 }
 
 export type TransactionsResponse = TransactionsResponseValidated | TransactionsResponsePending;

ui/tx/TxDetails.tsx

@@ -318,6 +318,48 @@ const TxDetails = () => {
           />
         </DetailsInfoItem>
       ) }
+      { appConfig.L2.isL2Network && (
+        <>
+          { data.l1_gas_used && (
+            <DetailsInfoItem
+              title="L1 gas used by txn"
+              hint="L1 gas used by transaction"
+            >
+              <Text>{ BigNumber(data.l1_gas_used).toFormat() }</Text>
+            </DetailsInfoItem>
+          ) }
+          { data.l1_gas_price && (
+            <DetailsInfoItem
+              title="L1 gas price"
+              hint="L1 gas price"
+            >
+              <Text mr={ 1 }>{ BigNumber(data.l1_gas_price).dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }</Text>
+              <Text variant="secondary">({ BigNumber(data.l1_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } Gwei)</Text>
+            </DetailsInfoItem>
+          ) }
+          { data.l1_fee && (
+            <DetailsInfoItem
+              title="L1 fee"
+              hint="L1 fee"
+            >
+              <CurrencyValue
+                value={ data.l1_fee }
+                currency={ appConfig.network.currency.symbol }
+                exchangeRate={ data.exchange_rate }
+                flexWrap="wrap"
+              />
+            </DetailsInfoItem>
+          ) }
+          { data.l1_fee_scalar && (
+            <DetailsInfoItem
+              title="L1 fee scalar"
+              hint="L1 fee scalar"
+            >
+              <Text>{ data.l1_fee_scalar }</Text>
+            </DetailsInfoItem>
+          ) }
+        </>
+      ) }
       <GridItem colSpan={{ base: undefined, lg: 2 }}>
         <Element name="TxDetails__cutLink">
           <Link