raw data sort

types/api/userOps.ts

@@ -49,7 +49,19 @@ export type UserOp = {
   user_logs_start_index: number;
   user_logs_count: number;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  raw: Record<string, any>;
+  raw: {
+    call_data: string;
+    call_gas_limit: string;
+    init_code: string;
+    max_fee_per_gas: string;
+    max_priority_fee_per_gas: string;
+    nonce: string;
+    paymaster_and_data: string;
+    pre_verification_gas: string;
+    sender: string;
+    signature: string;
+    verification_gas_limit: string;
+  };
   gas_price: string;
   gas_used: string;
 }

ui/userOp/UserOpRaw.tsx

 import { Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
+import type { UserOp } from 'types/api/userOps';
+
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
 
+// eslint-disable-next-line max-len
+const KEYS_ORDER: Array<keyof UserOp['raw']> = [ 'sender', 'nonce', 'init_code', 'call_data', 'call_gas_limit', 'verification_gas_limit', 'pre_verification_gas', 'max_fee_per_gas', 'max_priority_fee_per_gas', 'paymaster_and_data', 'signature' ];
+
 interface Props {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   rawData?: Record<string, any>;
@@ -14,7 +19,10 @@ const UserOpRaw = ({ rawData, isLoading }: Props) => {
     return null;
   }
 
-  const text = JSON.stringify(rawData, undefined, 4);
+  const text = JSON.stringify(KEYS_ORDER.reduce((res: UserOp['raw'], key: keyof UserOp['raw']) => {
+    res[key] = rawData[key];
+    return res;
+  }, {} as UserOp['raw']), undefined, 4);
 
   return <Skeleton isLoaded={ !isLoading }><RawDataSnippet data={ text }/></Skeleton>;
 };