Display the optional name for ID providers when present

packages/browser-wallet/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+-   Display the optional name for ID providers when present, otherwise fallback to the chain name.
 -   Remove check for redirectUri when launching identity issuance. This check was causing issues with an upcoming identity provider and seems to provide no value.
 -   Increased padding for QR code background. In dark mode, QR code not blending with background.
 -   Added new option to edit account name. Name saved in local storage. Changed name displayed across all BrowserWallet.

packages/browser-wallet/src/popup/pages/IdentityIssuance/IdentityIssuanceStart.tsx

@@ -101,11 +101,11 @@ function IdentityIssuanceStart({ onStart, onError }: InnerProps) {
                         className="identity-issuance__provider-button flex justify-space-between align-center"
                         width="wide"
                         disabled={buttonDisabled}
-                        key={p.ipInfo.ipIdentity + p.ipInfo.ipDescription.name}
+                        key={p.metadata.issuanceStart}
                         onClick={() => startIssuance(p).catch((e) => onError(e.toString()))}
                     >
                         <IdentityProviderIcon provider={p} />
-                        {p.ipInfo.ipDescription.name}
+                        {p.metadata.display ?? p.ipInfo.ipDescription.name}
                     </Button>
                 ))}
             </div>

packages/browser-wallet/src/shared/storage/types.ts

@@ -113,9 +113,15 @@ export interface IpInfo {
  * but is not contained in IpInfo.
  */
 export interface IdentityProviderMetaData {
+    /** Optional string to use for displaying the ID Provider, when not present fallback to `ipDescription.name` */
+    display?: string;
+    /** URL for initiating identity issuance for this ID provider. */
     issuanceStart: string;
+    /** URL for recovering identities from this ID provider. */
     recoveryStart: string;
+    /** A PNG image to display, encoded in base64. */
     icon: string;
+    /** Support Email address of this ID provider. */
     support: string;
 }