fix(dapp): format dids and addresses (#602)

.changeset/fast-cats-scream.md

@@ -0,0 +1,5 @@
+---
+"@blockchain-lab-um/dapp": patch
+---
+
+Format addresses and DIDs uniformly.

packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/CredentialPanel.tsx

@@ -14,7 +14,7 @@ import { Fragment, useMemo, useState } from 'react';
 
 import { DIDDisplay } from '@/components/DIDDisplay';
 import JsonModal from '@/components/JsonModal';
-import { getFirstWord } from '@/utils/format';
+import { formatAddress, getFirstWord } from '@/utils/format';
 import { convertTypes, copyToClipboard } from '@/utils/string';
 import { ImageLink } from '@/components/ImageLink';
 
@@ -40,7 +40,7 @@ const AddressDisplay = ({ address }: { address: string }) => {
             rel="noopener noreferrer"
             className="text-md animated-transition dark:text-navy-blue-300 cursor-pointer font-normal text-gray-700 underline underline-offset-2"
           >
-            {`${address.slice(0, 8)}...${address.slice(-8)}`}
+            {formatAddress(address)}
           </a>
         </Tooltip>
         <button

packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/FormattedView.tsx

@@ -15,6 +15,7 @@ import { useMemo, useState } from 'react';
 import { VerificationInfoModal } from '@/components/VerificationInfoModal';
 import { copyToClipboard } from '@/utils/string';
 import CredentialPanel from './CredentialPanel';
+import { formatDid } from '@/utils/format';
 
 export const FormattedView = ({
   credential,
@@ -72,15 +73,7 @@ export const FormattedView = ({
                         rel="noreferrer"
                         className="font-ubuntu dark:text-orange-accent-dark text-left text-lg font-medium text-pink-500 underline sm:text-xl md:text-2xl lg:truncate"
                       >
-                        {`${holder.substring(
-                          0,
-                          holder.lastIndexOf(':')
-                        )}:${holder
-                          .split(':')
-                          [holder.split(':').length - 1].slice(
-                            0,
-                            6
-                          )}...${holder.slice(-4)}`}
+                        {formatDid(holder)}
                       </a>
                     </Tooltip>
                     <button

packages/dapp/src/components/AddressPopover/index.tsx

@@ -12,6 +12,7 @@ import { useAccount, useEnsAvatar, useEnsName } from 'wagmi';
 
 import { copyToClipboard } from '@/utils/string';
 import { TextSkeleton } from '../Skeletons/TextSkeleton';
+import { formatAddress, formatDid } from '@/utils/format';
 
 interface AddressPopoverProps {
   did: string;
@@ -51,7 +52,7 @@ const AddressPopover = ({ did, disconnect }: AddressPopoverProps) => {
                   className="mr-2 inline-block rounded-full"
                 />
               )}
-              {ensName ?? `${address?.slice(0, 5)}...${address?.slice(-4)}`}
+              {ensName ?? formatAddress(address as string)}
               <ChevronDownIcon
                 className={`animated-transition -mr-1 ml-2 h-3 w-3 md:h-4 md:w-4 lg:h-5 lg:w-5 ${
                   open ? 'rotate-180' : ''
@@ -81,12 +82,9 @@ const AddressPopover = ({ did, disconnect }: AddressPopoverProps) => {
                           target="_blank"
                           rel="noreferrer"
                           className="animated-transition cursor-pointer text-2xl text-gray-800 underline hover:text-gray-700 dark:text-white dark:hover:text-gray-100"
-                        >{`${did.substring(0, did.lastIndexOf(':'))}:${did
-                          .split(':')
-                          [did.split(':').length - 1].slice(
-                            0,
-                            5
-                          )}...${did.slice(-4)}`}</a>
+                        >
+                          {formatDid(did)}
+                        </a>
                       ) : (
                         <TextSkeleton className="h-6 w-52" />
                       )}
@@ -108,10 +106,9 @@ const AddressPopover = ({ did, disconnect }: AddressPopoverProps) => {
                       <div className="mr-1 mt-0.5">
                         <div className="h-2.5 w-2.5 rounded-full bg-green-500" />
                       </div>
-                      <div className="text-lg text-gray-800 dark:text-white">{`${address?.slice(
-                        0,
-                        5
-                      )}...${address?.slice(-4)}`}</div>
+                      <div className="text-lg text-gray-800 dark:text-white">
+                        {formatAddress(address as string)}
+                      </div>
                       <button
                         type="button"
                         onClick={() => {

packages/dapp/src/components/CredentialDisplay/FormattedPanel.tsx

@@ -15,7 +15,7 @@ import { Fragment, useMemo, useState } from 'react';
 
 import { DIDDisplay } from '@/components/DIDDisplay';
 import JsonModal from '@/components/JsonModal';
-import { getFirstWord } from '@/utils/format';
+import { formatAddress, getFirstWord } from '@/utils/format';
 import {
   camelToTitleCase,
   convertTypes,
@@ -42,7 +42,7 @@ const AddressDisplay = ({ address }: { address: string }) => {
             rel="noopener noreferrer"
             className="text-md animated-transition dark:text-navy-blue-300 cursor-pointer font-normal text-gray-700 underline underline-offset-2"
           >
-            {`${address.slice(0, 8)}...${address.slice(-8)}`}
+            {formatAddress(address)}
           </a>
         </Tooltip>
         <button

packages/dapp/src/components/DIDDisplay/index.tsx

@@ -3,6 +3,7 @@ import { Tooltip } from '@nextui-org/react';
 import { useTranslations } from 'next-intl';
 
 import { copyToClipboard } from '@/utils/string';
+import { formatDid } from '@/utils/format';
 
 export const DIDDisplay = ({ did }: { did: string }) => {
   const t = useTranslations('DIDDisplay');
@@ -23,7 +24,7 @@ export const DIDDisplay = ({ did }: { did: string }) => {
             rel="noopener noreferrer"
             className="text-md animated-transition dark:text-navy-blue-300 cursor-pointer font-normal text-gray-700 underline underline-offset-2"
           >
-            {did.length <= 32 ? did : `${did.slice(0, 16)}...${did.slice(-4)}`}
+            {formatDid(did)}
           </a>
         </Tooltip>
         <button

packages/dapp/src/components/DashboardDisplay/CredentialCards/CredentialCard/index.tsx

@@ -8,6 +8,7 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
 import { convertTypes } from '@/utils/string';
+import { formatDid } from '@/utils/format';
 
 interface CredentialCardProps {
   vc: QueryCredentialsRequestResult;
@@ -47,7 +48,9 @@ const CredentialCard = ({ vc, selected }: CredentialCardProps) => {
         target="_blank"
         rel="noreferrer"
         className="underline"
-      >{`${issuer.slice(0, 8)}....${issuer.slice(-4)}`}</a>
+      >
+        {formatDid(issuer)}
+      </a>
     </Tooltip>
   );
 

packages/dapp/src/components/DashboardDisplay/CredentialTable/index.tsx

@@ -26,7 +26,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import DeleteModal from '@/components/DeleteModal';
 import StoreIcon from '@/components/StoreIcon';
 import { useTableStore, useAuthStore, useShareModalStore } from '@/stores';
-import { removeCredentialSubjectFilterString } from '@/utils/format';
+import { formatDid, removeCredentialSubjectFilterString } from '@/utils/format';
 import { convertTypes } from '@/utils/string';
 import { LastFetched } from '../LastFetched';
 import { sortCredentialList } from '../utils';
@@ -56,7 +56,9 @@ const IssuerCell = ({ vc }: { vc: QueryCredentialsRequestResult }) => {
         target="_blank"
         rel="noreferrer"
         className="dark:text-orange-accent-dark dark:hover:text-orange-accent-dark/80 flex items-center justify-start text-pink-400 underline hover:text-pink-500"
-      >{`${issuer.slice(0, 8)}....${issuer.slice(-4)}`}</a>
+      >
+        {formatDid(issuer)}
+      </a>
     </Tooltip>
   );
 };
@@ -164,7 +166,9 @@ const CredentialTable = ({ vcs }: CredentialTableProps) => {
                 target="_blank"
                 rel="noreferrer"
                 className="dark:text-orange-accent-dark dark:hover:text-orange-accent-dark/80 flex items-center justify-start text-pink-400 underline hover:text-pink-500"
-              >{`${subject.slice(0, 8)}....${subject.slice(-4)}`}</a>
+              >
+                {formatDid(subject)}
+              </a>
             </Tooltip>
           );
         }

packages/dapp/src/components/ImageLink/index.tsx

@@ -17,7 +17,7 @@ export const ImageLink = ({ value }: { value: string }) => {
           rel="noopener noreferrer"
           className="text-md animated-transition dark:text-navy-blue-300 cursor-pointer font-normal text-gray-700 underline underline-offset-2"
         >
-          {value.length > 32 ? value.slice('ipfs://'.length, 32) : value}
+          {value.length >= 32 ? value.slice('ipfs://'.length, 32) : value}
         </a>
       </div>
     </div>

packages/dapp/src/components/SelectedVCsTableRow/SelectedVCsTableRow.tsx

@@ -11,6 +11,7 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
 import { isPolygonVC } from '@/utils/credential';
+import { formatDid } from '@/utils/format';
 
 interface SelectedVCsTableRowProps {
   vc: QueryCredentialsRequestResult;
@@ -71,9 +72,7 @@ const SelectedVCsTableRow = ({
               rel="noreferrer"
               className="dark:text-orange-accent-dark dark:hover:text-orange-accent text-pink-500 underline hover:text-pink-400"
             >
-              {issuer.length > 20
-                ? `${issuer.slice(0, 8)}...${issuer.slice(-4)}`
-                : issuer}
+              {formatDid(issuer)}
             </a>
           </Tooltip>
         }

packages/dapp/src/utils/format.ts

@@ -46,3 +46,22 @@ export const removeCredentialSubjectFilterString = (
 
   return modifiedQueryCredentialsRequestResult;
 };
+
+export const formatDid = (issuer: string) => {
+  if (issuer.startsWith('did:ens')) {
+    return issuer.split(':').slice(-1);
+  }
+  const parts = issuer.split(':');
+  const didMethod = parts.slice(0, -1).join(':');
+  const identifier = parts.slice(-1)[0];
+  const formattedIdentifier = identifier.startsWith('0x')
+    ? formatAddress(identifier)
+    : identifier.length <= 8
+      ? identifier
+      : `${identifier.slice(0, 4)}...${identifier.slice(-4)}`;
+  return `${didMethod}:${formattedIdentifier}`;
+};
+
+export const formatAddress = (address: string) => {
+  return `${address.slice(0, 5)}...${address.slice(-4)}`;
+};