UI tweaks to the web example to make it a bit more user and demo friendly

examples/web-example/e2e/credential-management.spec.ts

@@ -12,10 +12,10 @@ test.describe('Credential Management', () => {
 
     // Create new wallet
     await page.getByTestId('create-wallet-button').click();
-    await page.waitForSelector('.App-header:has-text("Truvera Wallet React Example")', { timeout: 30000 });
+    await page.waitForSelector('.App-header:has-text("Truvera Demo Web Wallet")', { timeout: 30000 });
 
     // Wait for default DID to be created automatically
-    await page.waitForSelector('text=Default DID:', { timeout: 30000 });
+    await page.waitForSelector('.did-value', { timeout: 30000 });
   });
 
   test('should open import credential modal', async ({ page }) => {
@@ -126,7 +126,7 @@ test.describe('Credential Management', () => {
     await page.getByTestId('fetch-messages-button').click();
 
     // Should not show any errors
-    await expect(page.locator('text=Default DID:')).toBeVisible();
+    await expect(page.locator('.did-value')).toBeVisible();
 
     // The button should remain clickable
     await expect(page.getByTestId('fetch-messages-button')).toBeEnabled();
@@ -136,11 +136,8 @@ test.describe('Credential Management', () => {
     // Grant clipboard permissions
     await context.grantPermissions(['clipboard-read', 'clipboard-write']);
 
-    // Get the DID text - it's between "Default DID:" and the buttons
-    const didContainer = await page.locator('text=Default DID:').locator('..');
-    const didText = await didContainer.textContent();
-    // Extract just the DID (remove "Default DID:", "Copy", and "Fetch Messages")
-    const did = didText.replace('Default DID:', '').replace('Copy', '').replace('Fetch Messages', '').trim();
+    // Get the DID text from the did-value element
+    const did = await page.locator('.did-value').textContent();
 
     // Click copy button
     await page.getByTestId('copy-did-button').click();

examples/web-example/e2e/wallet-creation.spec.ts

@@ -13,7 +13,7 @@ test.describe('Wallet Creation', () => {
     await page.getByRole('button', { name: 'Create New Wallet' }).click();
 
     // Wait for wallet creation to complete - check for header
-    await page.waitForSelector('.App-header:has-text("Truvera Wallet React Example")', { timeout: 30000 });
+    await page.waitForSelector('.App-header:has-text("Truvera Demo Web Wallet")', { timeout: 30000 });
 
     // Should show the main app interface
     await expect(page.getByText('Credentials (')).toBeVisible();
@@ -22,10 +22,10 @@ test.describe('Wallet Creation', () => {
     await expect(page.getByTestId('import-credential-button')).toBeVisible();
     await expect(page.getByTestId('verify-credential-button')).toBeVisible();
     await expect(page.getByTestId('refresh-button')).toBeVisible();
-    await expect(page.getByRole('button', { name: 'Clear Wallet' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Settings' })).toBeVisible();
 
     // Should automatically create and display default DID
-    await expect(page.getByText('Default DID:')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('.did-value')).toBeVisible({ timeout: 10000 });
     await expect(page.getByTestId('copy-did-button')).toBeVisible();
     await expect(page.getByTestId('fetch-messages-button')).toBeVisible();
 
@@ -40,13 +40,13 @@ test.describe('Wallet Creation', () => {
   test('should display default DID after wallet creation', async ({ page }) => {
     // Create new wallet first
     await page.getByRole('button', { name: 'Create New Wallet' }).click();
-    await page.waitForSelector('.App-header:has-text("Truvera Wallet React Example")', { timeout: 30000 });
+    await page.waitForSelector('.App-header:has-text("Truvera Demo Web Wallet")', { timeout: 30000 });
 
     // Wait for DID to be displayed (it's created automatically)
-    await page.waitForSelector('text=Default DID:', { timeout: 30000 });
+    await page.waitForSelector('.did-value', { timeout: 30000 });
 
     // Should show the DID
-    await expect(page.getByText('Default DID:')).toBeVisible();
+    await expect(page.locator('.did-value')).toBeVisible();
 
     // Should show Copy button
     await expect(page.getByTestId('copy-did-button')).toBeVisible();
@@ -55,29 +55,30 @@ test.describe('Wallet Creation', () => {
     await expect(page.getByTestId('fetch-messages-button')).toBeVisible();
 
     // The DID should start with 'did:'
-    const didElement = await page.locator('text=Default DID:').locator('..').textContent();
-    expect(didElement).toContain('did:');
+    const didText = await page.locator('.did-value').textContent();
+    expect(didText).toContain('did:');
   });
 
   test('should clear wallet data but preserve keys', async ({ page }) => {
     // Create new wallet first
     await page.getByRole('button', { name: 'Create New Wallet' }).click();
-    await page.waitForSelector('.App-header:has-text("Truvera Wallet React Example")', { timeout: 30000 });
+    await page.waitForSelector('.App-header:has-text("Truvera Demo Web Wallet")', { timeout: 30000 });
 
     // Wait for DID to be created
-    await page.waitForSelector('text=Default DID:', { timeout: 30000 });
+    await page.waitForSelector('.did-value', { timeout: 30000 });
 
     // Get the wallet keys before clearing
     const keysBefore = await page.evaluate(() => {
       const keys = localStorage.getItem('keys');
       return keys ? JSON.parse(keys) : null;
     });
 
-    // Click Clear Wallet button
-    await page.getByRole('button', { name: 'Clear Wallet' }).click();
+    // Open settings menu and click Clear Wallet
+    await page.getByRole('button', { name: 'Settings' }).click();
+    await page.getByRole('menuitem', { name: 'Clear Wallet' }).click();
 
     // Page should reload and still show the wallet interface (keys are preserved)
-    await page.waitForSelector('.App-header:has-text("Truvera Wallet React Example")', { timeout: 10000 });
+    await page.waitForSelector('.App-header:has-text("Truvera Demo Web Wallet")', { timeout: 10000 });
 
     // Verify keys are still present and have same values
     const keysAfter = await page.evaluate(() => {
@@ -95,7 +96,7 @@ test.describe('Wallet Creation', () => {
   test('should persist wallet after page reload', async ({ page }) => {
     // Create new wallet
     await page.getByRole('button', { name: 'Create New Wallet' }).click();
-    await page.waitForSelector('.App-header:has-text("Truvera Wallet React Example")', { timeout: 30000 });
+    await page.waitForSelector('.App-header:has-text("Truvera Demo Web Wallet")', { timeout: 30000 });
 
     // Reload the page
     await page.reload();

examples/web-example/public/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Truvera Demo Web Wallet</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>