feat: explorer display block hash with middle ellipsis

Author: telestrial

.changeset/thin-doors-notice.md

@@ -0,0 +1,5 @@
+---
+'explorer': minor
+---
+
+Block hashes now show both leading and ending characters to improve legibility. Closes https://github.com/SiaFoundation/web/issues/451

apps/explorer/components/Block/index.tsx

@@ -16,7 +16,8 @@ export function Block({ block }: Props) {
     const list: DatumProps[] = [
       {
         label: 'Block hash',
-        value: block.id,
+        entityType: 'blockHash',
+        entityValue: block.id,
       },
       {
         label: 'Miner payout address',
@@ -64,6 +65,7 @@ export function Block({ block }: Props) {
       <EntityList
         title={`Transactions (${block.transactions?.length || 0})`}
         dataset={block.transactions?.map((tx) => ({
+          type: 'transaction',
           hash: tx.id,
           label: 'transaction',
           initials: 'T',

apps/explorer/components/ExplorerDatum.tsx

@@ -13,6 +13,7 @@ import { getHref } from '../lib/utils'
 export type DatumProps = {
   label: string
   value?: React.ReactNode
+  displayValue?: string
   entityType?: EntityType
   entityValue?: string
   sc?: BigNumber
@@ -27,6 +28,7 @@ export function ExplorerDatum({
   entityValue,
   copyable = true,
   value,
+  displayValue,
   sc,
   sf,
   comment,
@@ -47,14 +49,10 @@ export function ExplorerDatum({
           (entityValue ? (
             <ValueCopyable
               scaleSize="18"
-              label={entityType}
               href={getHref(entityType, entityValue)}
               value={entityValue}
-              displayValue={
-                entityType === 'block' && entityValue
-                  ? Number(entityValue).toLocaleString()
-                  : entityValue
-              }
+              type={entityType}
+              displayValue={displayValue}
               // className="relative top-0.5"
             />
           ) : (

apps/explorer/lib/utils.ts

@@ -4,7 +4,9 @@ import { Metadata } from 'next'
 import { siteName } from '../config'
 
 export function getHref(type: EntityType, value: string) {
-  return routes[type].view.replace(':id', value)
+  // block accepts blockhash as a value.
+  const coercedType = type === 'blockHash' ? 'block' : type
+  return routes[coercedType].view.replace(':id', value)
 }
 
 export function buildMetadata({

libs/design-system/src/components/ValueCopyable.tsx

@@ -12,6 +12,8 @@ import {
   getEntityDisplayLength,
   getEntitySiascanUrl,
   getEntityTypeCopyLabel,
+  formatEntityValue,
+  defaultFormatValue,
 } from '../lib/entityTypes'
 import { cx } from 'class-variance-authority'
 import {
@@ -56,11 +58,11 @@ export function ValueCopyable({
   const label = customLabel || getEntityTypeCopyLabel(type)
   const maxLength = customMaxLength || getEntityDisplayLength(type)
   const cleanValue = stripPrefix(value)
-  const renderValue = displayValue || cleanValue
-
-  const text = `${renderValue?.slice(0, maxLength)}${
-    (renderValue?.length || 0) > maxLength ? '...' : ''
-  }`
+  // If we pass a defaultValue, use it. An entityType? Format it.
+  const renderValue =
+    displayValue || (type && formatEntityValue(type, cleanValue, maxLength))
+  // If we don't yet have a renderValue, apply some general formatting.
+  const text = renderValue || defaultFormatValue(cleanValue, maxLength)
 
   return (
     <div className={cx('flex items-center', className)}>

libs/design-system/src/lib/entityTypes.ts

@@ -11,6 +11,7 @@ export type EntityType =
   | 'hostIp'
   | 'hostPublicKey'
   | 'contract'
+  | 'blockHash'
 
 export type TxType =
   | 'siacoin'
@@ -119,6 +120,7 @@ const entityLabels: Record<EntityType, string> = {
   hostIp: 'host',
   hostPublicKey: 'host',
   ip: 'IP',
+  blockHash: 'block hash',
 }
 
 const entityCopyLabels: Record<EntityType, string> = {
@@ -130,6 +132,7 @@ const entityCopyLabels: Record<EntityType, string> = {
   hostIp: 'host address',
   hostPublicKey: 'host public key',
   ip: 'IP',
+  blockHash: 'block hash',
 }
 
 const txTypeMap: Record<TxType, string> = {
@@ -200,3 +203,31 @@ export function getEntitySiascanUrl(
       return ''
   }
 }
+
+export function defaultFormatValue(text: string, maxLength: number) {
+  return `${text?.slice(0, maxLength)}${
+    (text?.length || 0) > maxLength ? '...' : ''
+  }`
+}
+
+export function formatEntityValue(
+  type: EntityType,
+  text: string,
+  maxLength: number
+) {
+  switch (type) {
+    case 'blockHash': {
+      const halfMax = maxLength / 2
+      // Floor and ceil here to handle odd maxLengths.
+      // .slice() will round down on floats.
+      const firstHalf = text.slice(0, Math.floor(halfMax))
+      const lastHalf = text.slice(text.length - Math.ceil(halfMax))
+      return firstHalf + '...' + lastHalf
+    }
+    default: {
+      // We could also return null here, forcing the issue of defining
+      // formats for the missing cases in the switch above.
+      return defaultFormatValue(text, maxLength)
+    }
+  }
+}