chore: centralize identifier shortening across Surface

Author: ccamel

e2e/vue.spec.ts

@@ -48,7 +48,7 @@ test('connects Keplr without discovering identities', async ({ page }) => {
   await connectTrigger.click()
   await expect(page.locator('.wallet-register-head')).toHaveText('WALLET')
   await expect(page.locator('.wallet-provider')).toHaveText('Keplr')
-  await expect(page.locator('.wallet-address')).toHaveText('axone1wall...ddress')
+  await expect(page.locator('.wallet-address')).toHaveText('axone1wall…ddress')
   await expect(page.locator('.wallet-address-copy')).toHaveAttribute(
     'title',
     'axone1walletprivateaddress',

src/App.vue

@@ -5,6 +5,7 @@ import { AnimatePresence, motion, MotionConfig } from 'motion-v'
 
 import SurfaceActStream from './components/SurfaceActStream.vue'
 import SurfaceDropdown from './components/SurfaceDropdown.vue'
+import { shortenWalletAddress } from './lib/shorten'
 import { useSurfaceActs } from './composables/useSurfaceActs'
 import { useWalletConnection } from './composables/useWalletConnection'
 import type { WalletProviderId } from './domain/wallet-connection'
@@ -108,10 +109,6 @@ async function connectWallet(provider: WalletProviderId) {
   }
 }
 
-function compactWalletAddress(address: string): string {
-  return address.length <= 16 ? address : `${address.slice(0, 10)}...${address.slice(-6)}`
-}
-
 function clearWalletAddressCopiedTimer() {
   window.clearTimeout(walletAddressCopiedTimer)
   walletAddressCopiedTimer = undefined
@@ -297,7 +294,7 @@ onBeforeUnmount(() => {
                       target="_blank"
                       rel="noopener noreferrer"
                     >
-                      {{ compactWalletAddress(walletConnection.address) }}
+                      {{ shortenWalletAddress(walletConnection.address) }}
                     </a>
                     <span class="wallet-address-action">
                       <button

src/__tests__/App.spec.ts

@@ -294,7 +294,7 @@ describe('App', () => {
     await wrapper.get('.top-connect').trigger('click')
     expect(wrapper.get('.wallet-menu .surface-dropdown-heading').text()).toBe('WALLET')
     expect(wrapper.get('.wallet-provider').text()).toBe('Keplr')
-    expect(wrapper.get('.wallet-address').text()).toBe('axone1wall...ddress')
+    expect(wrapper.get('.wallet-address').text()).toBe('axone1wall…ddress')
     const walletAddressLink = wrapper.get<HTMLAnchorElement>('.wallet-address')
     expect(walletAddressLink.attributes('href')).toBe(
       `https://explorer.aknodes.com/AXONE-TESTNET/account/${walletAddress}`,

src/components/SurfaceActLine.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
 
+import { shortenHash, shortenIdentifier } from '../lib/shorten'
 import { surfaceActKindCategories, type SurfaceAct } from '../domain/surface-act'
 
 const props = defineProps<{
@@ -21,8 +22,10 @@ const transactionCopyState = ref<'idle' | 'copying' | 'copied'>('idle')
 let copiedTimer: number | undefined
 let isUnmounted = false
 
-const assertionIdentifierPattern = /(did:pkh:…cosmos1[a-z0-9]+…[a-z0-9]{6}|urn:[a-z0-9:-]+)/i
-const technicalIdentifierPattern = /^(did:pkh:…cosmos1[a-z0-9]+…[a-z0-9]{6}|urn:[a-z0-9:-]+)$/i
+const assertionIdentifierPattern =
+  /(did:pkh:…cosmos1[a-z0-9]+…[a-z0-9]{6}|[a-z][a-z\d+.-]*:[^\s.]+(?:\.[^\s.]+)*)/i
+const technicalIdentifierPattern =
+  /^(did:pkh:…cosmos1[a-z0-9]+…[a-z0-9]{6}|[a-z][a-z\d+.-]*:[^\s.]+(?:\.[^\s.]+)*)$/i
 
 const typedAssertionParts = computed(() => {
   let remainingLength = typedLength.value
@@ -41,22 +44,6 @@ const entryParts = computed(() => {
 })
 const transactionExplorerUrl = computed(() => `${props.explorer}/tx/${props.act.txhash}`)
 
-function shortValue(value: string) {
-  if (value.length <= 24) {
-    return value
-  }
-
-  return `${value.slice(0, 12)}...${value.slice(-6)}`
-}
-
-function shortHash(value: string) {
-  if (value.length <= 17) {
-    return value
-  }
-
-  return `${value.slice(0, 8)}…${value.slice(-8)}`
-}
-
 function compactDate(value: string) {
   const normalized = value.match(
     /^(\d{4}-\d{2}-\d{2})[T ](\d{2}):(\d{2})(?::\d{2}(?:\.\d{3})?)?(?:Z| UTC)?$/,
@@ -173,7 +160,7 @@ onBeforeUnmount(() => {
       <div class="surface-act-proof-row surface-act-tx-row">
         <dt>tx</dt>
         <dd class="surface-act-tx">
-          <span class="surface-act-tx-value">{{ shortValue(act.txhash) }}</span>
+          <span class="surface-act-tx-value">{{ shortenHash(act.txhash) }}</span>
           <span class="surface-act-tx-action">
             <button
               v-if="transactionCopyState !== 'copied'"
@@ -213,7 +200,7 @@ onBeforeUnmount(() => {
         <dt>constitution</dt>
         <dd>
           r. {{ act.payload.constitution_revision }} ·
-          {{ shortHash(act.payload.constitution_hash) }}
+          {{ shortenHash(act.payload.constitution_hash) }}
         </dd>
       </div>
       <div
@@ -223,7 +210,7 @@ onBeforeUnmount(() => {
         "
       >
         <dt>credential</dt>
-        <dd>{{ shortValue(act.payload.identifier) }}</dd>
+        <dd>{{ shortenIdentifier(act.payload.identifier) }}</dd>
       </div>
       <div v-if="act.kind === 'governance.decision.recorded' && act.payload.verdict">
         <dt>verdict</dt>

src/components/__tests__/SurfaceActStream.spec.ts

@@ -68,7 +68,7 @@ describe('SurfaceActStream', () => {
 
   it('renders embedded DID and URN identifiers in monospace spans', async () => {
     const assertion =
-      'Credential issued by did:pkh:…cosmos1s7u…texh8c for subject urn:axone:testnet:subject:gh29632273325a1-1.'
+      'Credential issued by did:pkh:…cosmos1s7u…texh8c for subject urn:axone:te…23a1-1.'
     const wrapper = mount(SurfaceActLine, {
       props: {
         act: { ...makeAct('TX-DID', 1, 'axone1issuer'), assertion },
@@ -84,7 +84,7 @@ describe('SurfaceActStream', () => {
     const identifiers = wrapper.findAll('.surface-act-identifier')
     expect(identifiers.map((identifier) => identifier.text())).toEqual([
       'did:pkh:…cosmos1s7u…texh8c',
-      'urn:axone:testnet:subject:gh29632273325a1-1',
+      'urn:axone:te…23a1-1',
     ])
     expect(wrapper.get('.surface-act-inscription').text()).toBe(assertion)
   })
@@ -120,27 +120,23 @@ describe('SurfaceActStream', () => {
             verdict: 'gov:permitted',
           },
         },
-        expected: [
-          'decisionn° 1',
-          'constitution r. 3 · 8C11A47D…B2903E12',
-          'verdictgov:permitted',
-        ],
+        expected: ['decisionn° 1', 'constitution r. 3 · 8C11A47D…B2903E12', 'verdictgov:permitted'],
       },
       {
         act: {
           ...makeAct('TX-CRED-ISS', 1, 'axone1authority'),
           kind: 'credential.issued',
           payload: { identifier: credentialId },
         },
-        expected: ['credentialCRED-1234567...ABCDEF'],
+        expected: ['credentialCRED-1234567…ABCDEF'],
       },
       {
         act: {
           ...makeAct('TX-CRED-REVK', 1, 'axone1authority'),
           kind: 'credential.revoked',
           payload: { identifier: credentialId },
         },
-        expected: ['credentialCRED-1234567...ABCDEF'],
+        expected: ['credentialCRED-1234567…ABCDEF'],
       },
     ]
 
@@ -178,7 +174,7 @@ describe('SurfaceActStream', () => {
     })
 
     const transactionValue = wrapper.get('.surface-act-tx-value')
-    expect(transactionValue.text()).toBe('34BB1E16A405...8A931F')
+    expect(transactionValue.text()).toBe('34BB1E16…EF8A931F')
     expect(transactionValue.element.tagName).toBe('SPAN')
     expect(transactionValue.attributes('href')).toBeUndefined()
     const explorerButton = wrapper.get('.surface-act-explorer')

src/domain/__tests__/abstract-account.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { compactCanonicalDid, toCanonicalDid } from '../abstract-account'
+import { toCanonicalDid } from '../abstract-account'
 
 const axoneAddress = 'axone1lfcc2yt3gmd3xspw5yxsl3r9qyuumuya6hur2gnejgmafyrapmkqhg7gd5'
 
@@ -11,14 +11,6 @@ describe('toCanonicalDid', () => {
     )
   })
 
-  it('formats a canonical DID with a stable compact Cosmos address', () => {
-    expect(
-      compactCanonicalDid(
-        'did:pkh:cosmos:axone-dendrite-2:cosmos1lfcc2yt3gmd3xspw5yxsl3r9qyuumuya6hur2gnejgmafyrapmkqpk2un3',
-      ),
-    ).toBe('did:pkh:…cosmos1lfc…pk2un3')
-  })
-
   it('rejects malformed bech32 addresses', () => {
     expect(() => toCanonicalDid('not-an-address', 'axone-dendrite-2')).toThrow(
       'No separator character for not-an-address',

src/domain/__tests__/surface-act-mapper.spec.ts

@@ -185,15 +185,15 @@ describe('surface-act-mapper', () => {
               module: {
                 issue_credential: {
                   credential: btoa(
-                    `<urn:credential> <https://www.w3.org/2018/credentials#issuer> <${credentialIssuerDid}> .\n<urn:credential> <https://www.w3.org/2018/credentials#credentialSubject> <urn:axone:testnet:subject:gh29632273325a1-1> .`,
+                    `<urn:credential> <https://www.w3.org/2018/credentials#issuer> <${credentialIssuerDid}> .\n<urn:credential> <https://www.w3.org/2018/credentials#credentialSubject> <urn:axone:testnet:subject:gh31175346323a1-1> .`,
                   ),
                 },
               },
             },
           },
         ),
         kind: 'credential.issued',
-        assertion: `Credential issued by ${compactCredentialIssuerDid} for subject urn:axone:testnet:subject:gh29632273325a1-1.`,
+        assertion: `Credential issued by ${compactCredentialIssuerDid} for subject urn:axone:te…23a1-1.`,
       },
       {
         tx: makeExecuteTx('TX-ISS-DID', [

src/domain/abstract-account.ts

@@ -6,9 +6,3 @@ export function toCanonicalDid(address: string, chainId: string): string {
 
   return `did:pkh:cosmos:${chainId}:${cosmosAddress}`
 }
-
-export function compactCanonicalDid(did: string): string {
-  const cosmosAddress = did.slice(did.lastIndexOf(':') + 1)
-
-  return `did:pkh:…${cosmosAddress.slice(0, 10)}…${cosmosAddress.slice(-6)}`
-}

src/domain/surface-act-mapper.ts

@@ -7,15 +7,17 @@ import {
   type CosmosMessage,
   type CosmosTxResponse,
 } from '../infra/axone-event-extractor'
+import { shortenDid, shortenUri } from '../lib/shorten'
 import {
   surfaceActKindDescriptions,
   surfaceActKindLabels,
   type SurfaceAct,
   type SurfaceActKind,
 } from './surface-act'
-import { compactCanonicalDid, toCanonicalDid } from './abstract-account'
+import { toCanonicalDid } from './abstract-account'
 
 const instantiateAction = '/cosmwasm.wasm.v1.MsgInstantiateContract2'
+const uriSchemePattern = /^[a-z][a-z\d+.-]*:/i
 const executeAction = '/cosmwasm.wasm.v1.MsgExecuteContract'
 
 function toNumber(value: string | undefined, fallback = 0) {
@@ -63,14 +65,18 @@ function stringPayload(values: Record<string, string | undefined>): Record<strin
 
 function abstractAccountSubject(address: string, chainId: string) {
   try {
-    return compactCanonicalDid(toCanonicalDid(address, chainId))
+    return shortenDid(toCanonicalDid(address, chainId))
   } catch {
     return undefined
   }
 }
 
-function compactDidIdentifier(identifier: string) {
-  return identifier.startsWith('did:pkh:') ? compactCanonicalDid(identifier) : identifier
+function shortenAssertionIdentifier(identifier: string) {
+  if (identifier.startsWith('did:')) {
+    return shortenDid(identifier)
+  }
+
+  return uriSchemePattern.test(identifier) ? shortenUri(identifier) : identifier
 }
 
 function installedModuleIds(value: string | undefined) {
@@ -366,7 +372,7 @@ function mapWasmAbstractEvent(
         action,
         title: surfaceActKindLabels['credential.issued'],
         description: surfaceActKindDescriptions['credential.issued'],
-        assertion: `Credential issued by ${compactDidIdentifier(issuer)} for subject ${compactDidIdentifier(subject)}.`,
+        assertion: `Credential issued by ${shortenAssertionIdentifier(issuer)} for subject ${shortenAssertionIdentifier(subject)}.`,
         payload: stringPayload({
           identifier: credentialId,
           issuer,
@@ -401,7 +407,7 @@ function mapWasmAbstractEvent(
         action,
         title: surfaceActKindLabels['credential.revoked'],
         description: surfaceActKindDescriptions['credential.revoked'],
-        assertion: `Credential ${compactDidIdentifier(credentialId)} revoked by ${authority}.`,
+        assertion: `Credential ${shortenAssertionIdentifier(credentialId)} revoked by ${authority}.`,
         payload: stringPayload({
           identifier: credentialId,
           issuer: attributes.issuer ?? '',

src/lib/__tests__/shorten.spec.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  shortenDid,
+  shortenHash,
+  shortenIdentifier,
+  shortenUri,
+  shortenWalletAddress,
+} from '../shorten'
+
+describe('identifier shortening', () => {
+  it('shortens identifiers according to their semantic display policies', () => {
+    expect(
+      shortenDid(
+        'did:pkh:cosmos:axone-dendrite-2:cosmos1lfcc2yt3gmd3xspw5yxsl3r9qyuumuya6hur2gnejgmafyrapmkqpk2un3',
+      ),
+    ).toBe('did:pkh:…cosmos1lfc…pk2un3')
+    expect(shortenUri('https://example.org/path/to/resource')).toBe('https://exam…source')
+    expect(shortenUri('urn:axone:testnet:subject:gh29632273325a1-1')).toBe('urn:axone:te…25a1-1')
+    expect(shortenWalletAddress('axone1walletprivateaddress')).toBe('axone1wall…ddress')
+    expect(shortenHash('0123456789ABCDEF'.repeat(4))).toBe('01234567…89ABCDEF')
+    expect(shortenIdentifier('CRED-12345678901234567890-ABCDEF')).toBe('CRED-1234567…ABCDEF')
+  })
+
+  it.each([
+    ['DID', shortenDid],
+    ['URI', shortenUri],
+    ['wallet address', shortenWalletAddress],
+    ['hash', shortenHash],
+    ['identifier', shortenIdentifier],
+  ])('preserves empty %s input', (_kind, shorten) => {
+    expect(shorten('')).toBe('')
+  })
+
+  it.each([
+    ['URI', shortenUri, 12, 6],
+    ['wallet address', shortenWalletAddress, 10, 6],
+    ['hash', shortenHash, 8, 8],
+    ['identifier', shortenIdentifier, 12, 6],
+  ])('preserves and then compacts %s threshold values', (_kind, shorten, leading, trailing) => {
+    const thresholdValue = 'a'.repeat(leading + 1 + trailing)
+    const overThresholdValue = `${thresholdValue}x`
+
+    expect(shorten(thresholdValue)).toBe(thresholdValue)
+    expect(shorten(overThresholdValue)).toBe(`${'a'.repeat(leading)}…${'a'.repeat(trailing - 1)}x`)
+    expect(shorten(overThresholdValue).length).toBeLessThanOrEqual(overThresholdValue.length)
+  })
+
+  it('preserves and then compacts DID final identifier segment thresholds', () => {
+    const prefix = 'did:pkh:cosmos:axone-dendrite-2:'
+    const thresholdDid = `${prefix}${'a'.repeat(17)}`
+    const overThresholdDid = `${thresholdDid}x`
+
+    expect(shortenDid(thresholdDid)).toBe(thresholdDid)
+    expect(shortenDid(overThresholdDid)).toBe('did:pkh:…aaaaaaaaaa…aaaaax')
+    expect(shortenDid(overThresholdDid).length).toBeLessThanOrEqual(overThresholdDid.length)
+  })
+
+  it('delegates malformed DIDs to identifier shortening without throwing', () => {
+    const malformedDid = 'did:missing-separator-with-a-long-identifier'
+
+    expect(() => shortenDid(malformedDid)).not.toThrow()
+    expect(shortenDid(malformedDid)).toBe(shortenIdentifier(malformedDid))
+  })
+})