Skip to content

Commit 12bb925

Browse files
mike-parkhillmaycon-mello
mike-parkhill
and
maycon-mello
authored
UI tweaks to the web example to make it a bit more user and demo friendly (#469)
* update title and favicon * added a "card view" for web example * switch to icons for non-core functionality * added Truvera logo and changed background black colour * improve nested credential object display in the web example cards * added auto fetching of messages option in web example * filter credential list during verification in web example * improve verification sending UX in web example * improve credential import UX in web example * allow user to switch wallets in web wallet example * add delete credential functionality to web example * allow switching wallet from dropdown * extract components in web example * extract hooks in web example * pull wallet and credential management out into hooks * switch to services rather than large hooks * Fix e2e tests to match updated web wallet UI --------- Co-authored-by: Maycon Mello <maycon.mellos@gmail.com>
1 parent 509c69b commit 12bb925

22 files changed

Lines changed: 2081 additions & 426 deletions

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ test.describe('Credential Management', () => {
1212

1313
// Create new wallet
1414
await page.getByTestId('create-wallet-button').click();
15-
await page.waitForSelector('.App-header:has-text("Truvera Wallet React Example")', { timeout: 30000 });
15+
await page.waitForSelector('.App-header:has-text("Truvera Demo Web Wallet")', { timeout: 30000 });
1616

1717
// Wait for default DID to be created automatically
18-
await page.waitForSelector('text=Default DID:', { timeout: 30000 });
18+
await page.waitForSelector('.did-value', { timeout: 30000 });
1919
});
2020

2121
test('should open import credential modal', async ({ page }) => {
@@ -126,7 +126,7 @@ test.describe('Credential Management', () => {
126126
await page.getByTestId('fetch-messages-button').click();
127127

128128
// Should not show any errors
129-
await expect(page.locator('text=Default DID:')).toBeVisible();
129+
await expect(page.locator('.did-value')).toBeVisible();
130130

131131
// The button should remain clickable
132132
await expect(page.getByTestId('fetch-messages-button')).toBeEnabled();
@@ -136,11 +136,8 @@ test.describe('Credential Management', () => {
136136
// Grant clipboard permissions
137137
await context.grantPermissions(['clipboard-read', 'clipboard-write']);
138138

139-
// Get the DID text - it's between "Default DID:" and the buttons
140-
const didContainer = await page.locator('text=Default DID:').locator('..');
141-
const didText = await didContainer.textContent();
142-
// Extract just the DID (remove "Default DID:", "Copy", and "Fetch Messages")
143-
const did = didText.replace('Default DID:', '').replace('Copy', '').replace('Fetch Messages', '').trim();
139+
// Get the DID text from the did-value element
140+
const did = await page.locator('.did-value').textContent();
144141

145142
// Click copy button
146143
await page.getByTestId('copy-did-button').click();

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

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ test.describe('Wallet Creation', () => {
1313
await page.getByRole('button', { name: 'Create New Wallet' }).click();
1414

1515
// Wait for wallet creation to complete - check for header
16-
await page.waitForSelector('.App-header:has-text("Truvera Wallet React Example")', { timeout: 30000 });
16+
await page.waitForSelector('.App-header:has-text("Truvera Demo Web Wallet")', { timeout: 30000 });
1717

1818
// Should show the main app interface
1919
await expect(page.getByText('Credentials (')).toBeVisible();
@@ -22,10 +22,10 @@ test.describe('Wallet Creation', () => {
2222
await expect(page.getByTestId('import-credential-button')).toBeVisible();
2323
await expect(page.getByTestId('verify-credential-button')).toBeVisible();
2424
await expect(page.getByTestId('refresh-button')).toBeVisible();
25-
await expect(page.getByRole('button', { name: 'Clear Wallet' })).toBeVisible();
25+
await expect(page.getByRole('button', { name: 'Settings' })).toBeVisible();
2626

2727
// Should automatically create and display default DID
28-
await expect(page.getByText('Default DID:')).toBeVisible({ timeout: 10000 });
28+
await expect(page.locator('.did-value')).toBeVisible({ timeout: 10000 });
2929
await expect(page.getByTestId('copy-did-button')).toBeVisible();
3030
await expect(page.getByTestId('fetch-messages-button')).toBeVisible();
3131

@@ -40,13 +40,13 @@ test.describe('Wallet Creation', () => {
4040
test('should display default DID after wallet creation', async ({ page }) => {
4141
// Create new wallet first
4242
await page.getByRole('button', { name: 'Create New Wallet' }).click();
43-
await page.waitForSelector('.App-header:has-text("Truvera Wallet React Example")', { timeout: 30000 });
43+
await page.waitForSelector('.App-header:has-text("Truvera Demo Web Wallet")', { timeout: 30000 });
4444

4545
// Wait for DID to be displayed (it's created automatically)
46-
await page.waitForSelector('text=Default DID:', { timeout: 30000 });
46+
await page.waitForSelector('.did-value', { timeout: 30000 });
4747

4848
// Should show the DID
49-
await expect(page.getByText('Default DID:')).toBeVisible();
49+
await expect(page.locator('.did-value')).toBeVisible();
5050

5151
// Should show Copy button
5252
await expect(page.getByTestId('copy-did-button')).toBeVisible();
@@ -55,29 +55,30 @@ test.describe('Wallet Creation', () => {
5555
await expect(page.getByTestId('fetch-messages-button')).toBeVisible();
5656

5757
// The DID should start with 'did:'
58-
const didElement = await page.locator('text=Default DID:').locator('..').textContent();
59-
expect(didElement).toContain('did:');
58+
const didText = await page.locator('.did-value').textContent();
59+
expect(didText).toContain('did:');
6060
});
6161

6262
test('should clear wallet data but preserve keys', async ({ page }) => {
6363
// Create new wallet first
6464
await page.getByRole('button', { name: 'Create New Wallet' }).click();
65-
await page.waitForSelector('.App-header:has-text("Truvera Wallet React Example")', { timeout: 30000 });
65+
await page.waitForSelector('.App-header:has-text("Truvera Demo Web Wallet")', { timeout: 30000 });
6666

6767
// Wait for DID to be created
68-
await page.waitForSelector('text=Default DID:', { timeout: 30000 });
68+
await page.waitForSelector('.did-value', { timeout: 30000 });
6969

7070
// Get the wallet keys before clearing
7171
const keysBefore = await page.evaluate(() => {
7272
const keys = localStorage.getItem('keys');
7373
return keys ? JSON.parse(keys) : null;
7474
});
7575

76-
// Click Clear Wallet button
77-
await page.getByRole('button', { name: 'Clear Wallet' }).click();
76+
// Open settings menu and click Clear Wallet
77+
await page.getByRole('button', { name: 'Settings' }).click();
78+
await page.getByRole('menuitem', { name: 'Clear Wallet' }).click();
7879

7980
// Page should reload and still show the wallet interface (keys are preserved)
80-
await page.waitForSelector('.App-header:has-text("Truvera Wallet React Example")', { timeout: 10000 });
81+
await page.waitForSelector('.App-header:has-text("Truvera Demo Web Wallet")', { timeout: 10000 });
8182

8283
// Verify keys are still present and have same values
8384
const keysAfter = await page.evaluate(() => {
@@ -95,7 +96,7 @@ test.describe('Wallet Creation', () => {
9596
test('should persist wallet after page reload', async ({ page }) => {
9697
// Create new wallet
9798
await page.getByRole('button', { name: 'Create New Wallet' }).click();
98-
await page.waitForSelector('.App-header:has-text("Truvera Wallet React Example")', { timeout: 30000 });
99+
await page.waitForSelector('.App-header:has-text("Truvera Demo Web Wallet")', { timeout: 30000 });
99100

100101
// Reload the page
101102
await page.reload();

‎examples/web-example/public/docklogo.png‎

1.45 KB
Loading

‎examples/web-example/public/favicon.ico‎

-3.78 KB
Binary file not shown.

‎examples/web-example/public/favicon.png‎

817 Bytes
Loading

‎examples/web-example/public/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
88
<meta
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>Truvera Demo Web Wallet</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎examples/web-example/public/truveralogoblack.png‎

3.67 KB
Loading

‎examples/web-example/public/truveralogoround.png‎

2.26 KB
Loading

0 commit comments

Comments
 (0)