fix(explorer): fix truncated values display (#863)

* fix(explorer): fix truncated values display

* fix(explorer): tighten truncated value layout

Author: bpierre

apps/explorer/package.json

@@ -52,6 +52,7 @@
 		"cva": "catalog:",
 		"hono": "catalog:",
 		"idxs": "catalog:",
+		"midcut": "catalog:",
 		"ox": "catalog:",
 		"react": "catalog:",
 		"react-dom": "catalog:",

apps/explorer/src/comps/Address.tsx

@@ -1,7 +1,7 @@
 import { Link } from '@tanstack/react-router'
 import type { Address as AddressType } from 'ox'
 import { useAddressHighlight } from '#comps/AddressHighlight'
-import { Midcut } from '#comps/Midcut'
+import { Midcut } from 'midcut'
 import { cx } from '#lib/css'
 
 export function Address(props: Address.Props) {

apps/explorer/src/comps/AddressCell.tsx

@@ -1,7 +1,7 @@
 import { Link } from '@tanstack/react-router'
 import type { Address } from 'ox'
 import { useAddressHighlight } from '#comps/AddressHighlight'
-import { Midcut } from '#comps/Midcut'
+import { Midcut } from 'midcut'
 import { cx } from '#lib/css'
 
 export function AddressCell(props: {

apps/explorer/src/comps/BlockCard.tsx

@@ -2,7 +2,7 @@ import { Link } from '@tanstack/react-router'
 import type { Hex } from 'ox'
 import * as React from 'react'
 import { InfoCard } from '#comps/InfoCard'
-import { Midcut } from '#comps/Midcut'
+import { Midcut } from 'midcut'
 import { ValidatorTag } from '#comps/ValidatorTag'
 import { useAnimatedBlockNumber } from '#lib/block-number'
 import { cx } from '#lib/css'

apps/explorer/src/comps/DataGrid.tsx

@@ -69,7 +69,7 @@ export function DataGrid(props: DataGrid.Props) {
 			if (typeof col.width === 'string')
 				return col.minWidth
 					? `minmax(${col.minWidth}px, ${col.width})`
-					: col.width
+					: `minmax(0, ${col.width})`
 			if (col.minWidth) return `minmax(${col.minWidth}px, auto)`
 			return mode === 'tabs' ? 'minmax(0, auto)' : 'auto'
 		})

apps/explorer/src/comps/ExploreInput.tsx

@@ -2,7 +2,7 @@ import { keepPreviousData, queryOptions, useQuery } from '@tanstack/react-query'
 import * as Address from 'ox/Address'
 import * as Hex from 'ox/Hex'
 import * as React from 'react'
-import { Midcut } from '#comps/Midcut'
+import { Midcut } from 'midcut'
 import { useMountAnim } from '#lib/animation'
 import { ProgressLine } from '#comps/ProgressLine'
 import { RelativeTime } from '#comps/RelativeTime'

apps/explorer/src/comps/Midcut.tsx

@@ -3,7 +3,7 @@ import type { Address, Hex } from 'ox'
 import * as Value from 'ox/Value'
 import { useState } from 'react'
 import { Amount } from '#comps/Amount'
-import { Midcut } from '#comps/Midcut'
+import { Midcut } from 'midcut'
 import { ReceiptMark } from '#comps/ReceiptMark'
 import { useTokenListMembership } from '#comps/TokenListMembership'
 import { TxEventDescription } from '#comps/TxEventDescription'
@@ -76,7 +76,7 @@ export function Receipt(props: Receipt.Props) {
 								params={{ address: sender }}
 								className="text-accent text-right press-down min-w-0 flex-1 flex justify-end"
 							>
-								<Midcut value={sender} prefix="0x" align="end" />
+								<Midcut value={sender} prefix="0x" align="end" min={4} />
 							</Link>
 						</div>
 						<div className="flex justify-between items-start gap-4">
@@ -102,7 +102,7 @@ export function Receipt(props: Receipt.Props) {
 									onClick={() => setHashExpanded(true)}
 									className="text-right cursor-pointer press-down min-w-0 flex-1 flex justify-end"
 								>
-									<Midcut value={hash} prefix="0x" align="end" />
+									<Midcut value={hash} prefix="0x" align="end" min={4} />
 								</button>
 							)}
 						</div>
@@ -293,7 +293,11 @@ export function Receipt(props: Receipt.Props) {
 																params={{ address: item.payer }}
 																className="text-accent press-down"
 															>
-																<Midcut value={item.payer} prefix="0x" />
+																<Midcut
+																	value={item.payer}
+																	prefix="0x"
+																	min={4}
+																/>
 															</Link>
 															<span className="text-tertiary">paid</span>
 														</>

apps/explorer/src/comps/Receipt.tsx

@@ -1,6 +1,6 @@
 import { Link } from '@tanstack/react-router'
 import type { Hex } from 'ox'
-import { Midcut } from '#comps/Midcut'
+import { Midcut } from 'midcut'
 
 export function TransactionCell(props: { hash: Hex.Hex }) {
 	const { hash } = props

apps/explorer/src/comps/TransactionCell.tsx

@@ -8,7 +8,7 @@ import * as React from 'react'
 import { decodeFunctionData, isAddressEqual } from 'viem'
 import { Address } from '#comps/Address'
 import { Amount } from '#comps/Amount'
-import { Midcut } from '#comps/Midcut'
+import { Midcut } from 'midcut'
 import { TokenIcon } from '#comps/TokenIcon'
 import { cx } from '#lib/css'
 import { extractContractAbi, getContractAbi } from '#lib/domain/contracts.ts'
@@ -84,12 +84,15 @@ function ContractCallPart(props: {
 		<>
 			<span className="text-accent items-end whitespace-nowrap">{fnName}</span>
 			<span className="text-secondary">on</span>
-			<Address
-				address={address}
-				search={{ tab: 'contract' }}
-				title={address}
-				className="whitespace-nowrap"
-			/>
+			<span className="min-w-[11ch] basis-[11ch] max-w-full flex-1 overflow-hidden">
+				<Address
+					address={address}
+					chars={4}
+					search={{ tab: 'contract' }}
+					title={address}
+					className="whitespace-nowrap w-full max-w-full"
+				/>
+			</span>
 		</>
 	)
 }
@@ -130,11 +133,14 @@ export namespace TxEventDescription {
 				if (!OxAddress.validate(part.value))
 					return <span className="text-tertiary">{String(part.value)}</span>
 				return (
-					<Address
-						address={part.value}
-						className="text-accent items-end press-down whitespace-nowrap"
-						self={seenAs ? isAddressEqual(part.value, seenAs) : false}
-					/>
+					<span className="min-w-[11ch] basis-[11ch] max-w-full flex-1 overflow-hidden">
+						<Address
+							address={part.value}
+							chars={4}
+							className="text-accent items-end press-down whitespace-nowrap w-full max-w-full"
+							self={seenAs ? isAddressEqual(part.value, seenAs) : false}
+						/>
+					</span>
 				)
 			}
 			case 'action': {