Add operator fee display for optimistic rollups (#3065)

mocks/txs/tx.ts

@@ -283,6 +283,7 @@ export const l2tx: Transaction = {
   l1_fee_scalar: '1.0',
   l1_gas_used: '17060',
   l1_fee: '1584574188135760',
+  operator_fee: '2769347953',
 };
 
 export const stabilityTx: Transaction = {

types/api/transaction.ts

@@ -67,6 +67,7 @@ export type Transaction = {
   is_pending_update?: boolean;
   // optimism fields
   op_withdrawals?: Array<OpWithdrawal>;
+  operator_fee?: string;
   // SUAVE fields
   execution_node?: AddressParam | null;
   allowed_peekers?: Array<string>;

ui/tx/details/TxInfo.tsx

@@ -627,6 +627,24 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus }: Props) => {
 
       <TxDetailsTxFee isLoading={ isLoading } data={ data }/>
 
+      { rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && data.operator_fee && (
+        <>
+          <DetailedInfo.ItemLabel
+            hint="A fee set by the chain operator to cover extra costs of additional services"
+          >
+            Operator fee
+          </DetailedInfo.ItemLabel>
+          <DetailedInfo.ItemValue multiRow>
+            <CurrencyValue
+              value={ data.operator_fee }
+              currency={ currencyUnits.ether }
+              exchangeRate={ data.exchange_rate }
+              flexWrap="wrap"
+            />
+          </DetailedInfo.ItemValue>
+        </>
+      ) }
+
       { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
         <>
           <DetailedInfo.ItemLabel