some other fixes

blockscout · Jan 18, 2024 · 8c0967a · 8c0967a
1 parent 4a81a7f
commit 8c0967a
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/ui/userOp/UserOpDetails.tsx b/ui/userOp/UserOpDetails.tsx
@@ -17,6 +17,7 @@ import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import UserOpsAddress from 'ui/shared/userOps/UserOpsAddress';
 import UserOpSponsorType from 'ui/shared/userOps/UserOpSponsorType';
 import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
@@ -69,8 +70,8 @@ const UserOpDetails = ({ query }: Props) => {
         hint="Unique character string assigned to every User operation"
         isLoading={ isPlaceholderData }
       >
-        <Skeleton isLoaded={ !isPlaceholderData }>
-          { data.hash }
+        <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
+          <HashStringShortenDynamic hash={ data.hash }/>
         </Skeleton>
       </DetailsInfoItem>
       <DetailsInfoItem
@@ -87,11 +88,14 @@ const UserOpDetails = ({ query }: Props) => {
       >
         <UserOpStatus status={ data.status } isLoading={ isPlaceholderData }/>
       </DetailsInfoItem>
+      { /* how to show it? */ }
       { data.revert_reason && (
         <DetailsInfoItem
           title="Revert reason"
           hint="The revert reason of the User operation"
           isLoading={ isPlaceholderData }
+          wordBreak="break-all"
+          whiteSpace="normal"
         >
           <Skeleton isLoaded={ !isPlaceholderData }>
             { data.revert_reason }
@@ -263,14 +267,15 @@ const UserOpDetails = ({ query }: Props) => {
             <DetailsInfoItem
               title="Init code"
               hint="Code used to deploy the account if not yet on-chain"
+              wordBreak="break-all"
+              whiteSpace="normal"
             >
               { data.init_code }
             </DetailsInfoItem>
           ) }
           <DetailsInfoItem
             title="Signature"
             hint="Used to validate a User operation along with the nonce during verification"
-
             wordBreak="break-all"
             whiteSpace="normal"
 
@@ -280,6 +285,8 @@ const UserOpDetails = ({ query }: Props) => {
           <DetailsInfoItem
             title="Nonce"
             hint="Anti-replay protection; also used as the salt for first-time account creation"
+            wordBreak="break-all"
+            whiteSpace="normal"
           >
             { data.nonce }
           </DetailsInfoItem>