From 08ab280315a6ef747c4f55e727532b80c17c7372 Mon Sep 17 00:00:00 2001 From: Steven Vandevelde Date: Mon, 4 Mar 2024 18:30:00 +0100 Subject: [PATCH] chore: improve demo --- examples/demo/index.html | 8 ++++-- examples/demo/src/index.ts | 55 ++++++++++++++++++++++++++++---------- 2 files changed, 47 insertions(+), 16 deletions(-) diff --git a/examples/demo/index.html b/examples/demo/index.html index fd7f4fe..31a09a5 100644 --- a/examples/demo/index.html +++ b/examples/demo/index.html @@ -8,9 +8,13 @@ Demo - +
+ -
+
+ +
+
diff --git a/examples/demo/src/index.ts b/examples/demo/src/index.ts index 038e8bc..502b5a5 100644 --- a/examples/demo/src/index.ts +++ b/examples/demo/src/index.ts @@ -24,8 +24,8 @@ type Payload = Uint8Array export async function provide(): Promise { const provider = new Provider() - console.log('Providing', provider.params) - console.log('Waiting for a consumer') + log('Providing', JSON.stringify(provider.params)) + log('Waiting for a consumer') const url = new URL(location.href) url.searchParams.set('challenge', provider.params.challenge) @@ -36,7 +36,7 @@ export async function provide(): Promise { if (qrCodeNode !== null) { qrCodeNode.innerHTML = `
${url.toString()}
` document.querySelector('#copy-url')?.addEventListener('click', () => { - navigator.clipboard.writeText(url.toString()).catch(console.error) + navigator.clipboard.writeText(url.toString()).catch(logError) }) } @@ -52,12 +52,12 @@ export async function provide(): Promise { > = {} provider.on('new-consumer', async ({ did, answer, send }) => { - console.log('Secure tunnel established with', did) + log('Secure tunnel established with', did) consumers[did] = { did, answer, send } }) provider.on('message', async ({ did, msgId, payload }) => { - console.log( + log( 'Provider got message from', did, ':', @@ -67,7 +67,7 @@ export async function provide(): Promise { if (msgId === '👋') { consumers[did] ?.answer('👋', new TextEncoder().encode('🚀')) - ?.catch(console.error) + ?.catch(logError) } }) @@ -86,8 +86,8 @@ export async function provide(): Promise { * @param params */ export async function consume(params: OutOfBandParameters): Promise { - console.log('Consuming', params) - console.log('Establishing secure tunnel') + log('Consuming', JSON.stringify(params)) + log('Establishing secure tunnel') const consumer = new Consumer(params) const transport = new Transport({ @@ -97,7 +97,7 @@ export async function consume(params: OutOfBandParameters): Promise { }) consumer.on('message', ({ did, payload }) => { - console.log( + log( 'Consumer got message from', did, ':', @@ -111,7 +111,7 @@ export async function consume(params: OutOfBandParameters): Promise { transport, }) - console.log('Secure tunnel established with', consumer.providerId) + log('Secure tunnel established with', consumer.providerId) const response = await send( '👋', @@ -119,9 +119,9 @@ export async function consume(params: OutOfBandParameters): Promise { ) if (response.error === undefined) { - console.log('👋 result:', new TextDecoder().decode(response.result)) + log('👋 result:', new TextDecoder().decode(response.result)) } else { - console.error('👋 error:', response.error) + logError(response.error) } } @@ -143,13 +143,40 @@ function encoder(payload: Payload): Uint8Array { return payload } +/** + * + * @param args + */ +function log(...args: string[]): void { + console.log(...args) + + const logItem = document.createElement('p') + logItem.innerHTML = args.join(' ') + + document.querySelector('#log')?.append(logItem) +} + +/** + * + * @param error + */ +function logError(error: Error): void { + console.error(error) + + const logItem = document.createElement('p') + logItem.style.color = 'red' + logItem.innerHTML = error.message + + document.querySelector('#log')?.append(logItem) +} + // 🚀 document.addEventListener('DOMContentLoaded', () => { const onProvideClick = (event: Event): void => { provide() .then(() => event.target?.removeEventListener('click', onProvideClick)) - .catch(console.error) + .catch(logError) } document.querySelector('#provide')?.addEventListener('click', onProvideClick) @@ -164,6 +191,6 @@ document.addEventListener('DOMContentLoaded', () => { consume({ challenge, publicKey, - }).catch(console.error) + }).catch(logError) } })