From 145172fb6a56c76b8a8612d47b0ff27b9dec7ba5 Mon Sep 17 00:00:00 2001 From: "Ryan P. Brewster" Date: Thu, 30 Dec 2021 18:24:26 -0500 Subject: [PATCH] More WhatsApp-ish UI --- frontend/src/Chip.svelte | 32 -------- frontend/src/Mailbox.svelte | 8 -- frontend/src/SignedIn.svelte | 155 ++++++++++++++--------------------- 3 files changed, 61 insertions(+), 134 deletions(-) delete mode 100644 frontend/src/Chip.svelte delete mode 100644 frontend/src/Mailbox.svelte diff --git a/frontend/src/Chip.svelte b/frontend/src/Chip.svelte deleted file mode 100644 index 42863d4..0000000 --- a/frontend/src/Chip.svelte +++ /dev/null @@ -1,32 +0,0 @@ - - -
- - {#if onDelete} - - {/if} -
- - diff --git a/frontend/src/Mailbox.svelte b/frontend/src/Mailbox.svelte deleted file mode 100644 index dd4898e..0000000 --- a/frontend/src/Mailbox.svelte +++ /dev/null @@ -1,8 +0,0 @@ - - -
- {name ? `${name} <${address}>` : address} -
diff --git a/frontend/src/SignedIn.svelte b/frontend/src/SignedIn.svelte index 7cc46ef..29b9ff9 100644 --- a/frontend/src/SignedIn.svelte +++ b/frontend/src/SignedIn.svelte @@ -3,7 +3,7 @@ export let token: string; function sleep(millis: number): Promise { - return new Promise((r) => setTimeout(r, millis)) + return new Promise((r) => setTimeout(r, millis)); } type UnixMillis = number; @@ -49,7 +49,7 @@ ? { group, messages: [...cur.messages, msg].sort( - (a, b) => b.sentAt - a.sentAt + (a, b) => a.sentAt - b.sentAt ), timestamp: Math.max(cur.timestamp, msg.sentAt), } @@ -61,8 +61,6 @@ } import { ethers } from "ethers"; - import Mailbox from "./Mailbox.svelte"; - import Chip from "./Chip.svelte"; const provider = new ethers.providers.Web3Provider((window as any).ethereum); let author: Mailbox = { address }; @@ -74,7 +72,7 @@ const ws = new WebSocket("ws://localhost:8080/ws"); let messages: readonly Message[] = []; $: groupedMessages = groupMessages(messages); - let selectedGroup: string | null = null; + let selectedGroup: Group | null = null; ws.onopen = (evt) => { console.log("[OPEN]", evt); ws.send(token); @@ -94,112 +92,81 @@ const ADDRESS_REGEX = /^0x[a-fA-F0-9]{40}$/; const ENS_REGEX = /^([a-z]+\.)+eth$/; - let recipients: readonly Mailbox[] = []; - function deleteRecipient(i: number) { - recipients = [...recipients.slice(0, i), ...recipients.slice(i + 1)]; - } - let partialRecipient: string = ""; - async function toHandler(evt: KeyboardEvent) { - if (evt.key !== "Enter") return; - let recipient: Mailbox | null = null; - if (ENS_REGEX.test(partialRecipient)) { - const address: string | null = await Promise.race([ - provider.resolveName(partialRecipient), - sleep(1_000).then(() => null), - ]); - recipient = address ? { address, name: partialRecipient } : null; - } else if (ADDRESS_REGEX.test(partialRecipient)) { - const name: string | null = await Promise.race([ - provider.lookupAddress(partialRecipient), - sleep(1_000).then(() => null), - ]); - recipient = { address: partialRecipient, name }; - } - if (recipient) { - recipients = [...recipients, recipient]; - partialRecipient = ""; + async function startConversation(rawRecipients: string) { + const tokens = rawRecipients.split(/[\s,]+/).filter((t) => t.length > 0); + console.log("parsing recipients from:", tokens); + const recipients: Mailbox[] = []; + for (const token of tokens) { + if (ENS_REGEX.test(token)) { + console.log("trying to resolve ENS domain:", token); + const address: string | null = await Promise.race([ + provider.resolveName(token), + sleep(1_000).then(() => null), + ]); + if (!address) throw new Error(`could not resolve ${token}`); + recipients.push({ address, name: token }); + } else if (ADDRESS_REGEX.test(token)) { + const name: string | null = await Promise.race([ + provider.lookupAddress(token), + sleep(1_000).then(() => null), + ]); + recipients.push({ address: token, name }); + } else { + throw new Error(`invalid recipient: ${token}`); + } } + ws.send( + JSON.stringify({ + from: address, + to: recipients.map((r) => r.address), + content: "Let's chat!", + }) + ); } let content = ""; function contentHandler(evt: KeyboardEvent) { if (evt.key !== "Enter") return; if (!evt.ctrlKey) return; - tryFlush(); - } - async function tryFlush() { - if (recipients.length > 0 && content) { - // TODO: update protocol to support multiple recipients - ws.send( - JSON.stringify({ - from: address, - to: recipients.map((m) => m.address), - content, - }) - ); - content = ""; - } + if (!content) return; + // TODO: update protocol to support multiple recipients + ws.send( + JSON.stringify({ + from: address, + to: selectedGroup.members, + content, + }) + ); + content = ""; }
+ {#each groupedMessages as grouped} -
(selectedGroup = groupKey(grouped.group))} - > +
(selectedGroup = grouped.group)}> {grouped.group.members.join("\n")}
{/each}
-
- {#each groupedMessages.find((grouped) => groupKey(grouped.group) === selectedGroup)?.messages ?? [] as m} -

{m.from}: {m.content}

- {/each} -
-
-
- - - - - -
From: -
To: -
- {#each recipients as recipient, i} - deleteRecipient(i)} - > - {/each} - -
-
- -