feat: install invite flow

logos-innovation-lab · Nov 22, 2023 · 256482f · 256482f
1 parent a39efe1
commit 256482f
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 58 deletions.
diff --git a/src/lib/adapters/waku/index.ts b/src/lib/adapters/waku/index.ts
@@ -231,6 +231,8 @@ async function executeOnInstallMessage(
 	chatId: string,
 	message: WithMeta<InstallMessage>,
 ) {
+	console.debug({ publicKey, message })
+
 	if (message.senderPublicKey === publicKey) {
 		if (message.command === 'accept') {
 			const installedObjects = get(installedObjectStore).objects
@@ -275,22 +277,20 @@ async function executeOnInstallMessage(
 			objectId: message.objectId,
 			name: objectSpec.object.name,
 			description: objectSpec.object.description,
-			// TODO fix relative path to absolute
 			logo: objectSpec.object.files.logo.path,
 			installed: false,
 		}
 
 		installedObjectStore.addInstalledObject(installedObject)
 	} else if (message.command === 'accept') {
-		const installedObjects = get(installedObjectStore).objects
-		if (!installedObjects.has(message.objectId)) {
+		const installedObject = get(installedObjectStore).objects.get(message.objectId)
+		if (!installedObject) {
 			return
 		}
 
-		installedObjectStore.updateInstalledObject(message.objectId, (object) => ({
-			...object,
-			installed: true,
-		}))
+		if (!installedObject.installed) {
+			return
+		}
 
 		// add to chat objects
 		chats.updateChat(chatId, (chat) => {

diff --git a/src/lib/components/chat-message.svelte b/src/lib/components/chat-message.svelte
@@ -77,12 +77,14 @@
 		max-width: 75%;
 		margin-right: auto;
 		margin-left: 0;
+		font-family: (--font-serif);
 
 		&:not(:last-child) {
 			margin-bottom: var(--spacing-12);
 		}
 
 		&.object {
+			font-family: sans-serif;
 			.message-content {
 				width: 100%;
 			}
@@ -93,7 +95,6 @@
 		padding: var(--spacing-12);
 		border-radius: var(--border-radius);
 		display: inline-block;
-		font-family: var(--font-serif);
 		background-color: var(--color-base, var(--color-dark-step-40));
 	}
 
@@ -118,6 +119,10 @@
 			}
 		}
 
+		&.object {
+			font-style: normal;
+		}
+
 		.timestamp {
 			text-align: end;
 		}

diff --git a/src/lib/components/chat-object-invite.svelte b/src/lib/components/chat-object-invite.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import adapters from '$lib/adapters'
+	import routes from '$lib/routes'
 	import type { InstallMessage, WithMeta } from '$lib/stores/chat'
 	import { installedObjectStore } from '$lib/stores/installed-objects'
 	import type { User } from '$lib/types'
@@ -8,7 +9,12 @@
 	import Container from './container.svelte'
 	import CheckmarkFilled from './icons/checkmark-filled.svelte'
 	import Loading from './loading.svelte'
-	import ObjectHeader from './object-header.svelte'
+	import ObjectInstallInfo from './object-install-info.svelte'
+
+	import { goto } from '$app/navigation'
+	import { hashString } from '$lib/adapters/waku/crypto'
+	import Checkmark from './icons/checkmark.svelte'
+	import Pending from './icons/pending.svelte'
 
 	//am I the sender of this message?
 	export let myMessage = false
@@ -22,15 +28,17 @@
 
 	//is the sender of the current message the same as the previous message?
 	export let sameSender = false
+	export let senderName: string | undefined = undefined
 
 	export let timestamp: string | undefined = undefined
 
-	let senderName =
-		users.find((user) => user.publicKey === message.senderPublicKey)?.name ?? '<unknown>'
-	let recipientName = myMessage
-		? 'you'
-		: users.length === 2
-		? users.find((user) => user.publicKey !== message.senderPublicKey)?.name ?? '<unknown>'
+	let senderNameLabel = myMessage
+		? 'You'
+		: users.find((user) => user.publicKey === message.senderPublicKey)?.name ?? '<unknown>'
+	let recipientName = !group
+		? myMessage
+			? users.find((user) => user.publicKey !== message.senderPublicKey)?.name ?? '<unknown>'
+			: 'you'
 		: `chat members`
 
 	$: object = $installedObjectStore.objects.get(message.objectId)
@@ -41,54 +49,69 @@
 	}
 </script>
 
-<ChatMessage bubble={true} {group} {sameSender} {timestamp} {myMessage}>
+<ChatMessage bubble={true} {group} {sameSender} {timestamp} {myMessage} object={true} {senderName}>
 	{#if !object}
 		<Loading />
 	{:else}
 		<div class="wo text-normal">
 			<Container>
 				{#if message.command === 'invite'}
-					{senderName} invited {recipientName} to use "{object.name}" in this chat.
+					{senderNameLabel} invited {recipientName} to use "{object.name}" in this chat.
 				{:else if message.command === 'accept'}
-					{senderName} accepted the invite. You can now use "{object.name}" in this chat.
+					{senderNameLabel} accepted the invite. You can now use "{object.name}" in this chat.
 				{/if}
 			</Container>
 			<Container gap={12}>
-				<ObjectHeader name={object.name} logoImg={object.logo} logoAlt={`${object.name} logo`} />
+				<ObjectInstallInfo
+					onClick={() => object && goto(routes.SETTINGS_OBJECT(hashString(object.objectId)))}
+					name={object.name}
+					logoImg={object.logo}
+					logoAlt={`${object.name} logo`}
+				/>
 			</Container>
 			<Container padY={0}>
 				{#if message.command === 'invite'}
-					{#if myMessage}
+					{#if isInstalledInChat}
+						<p class="install-status">
+							<CheckmarkFilled />Invite accepted
+						</p>
+					{:else if myMessage}
 						<p class="install-status">
-							{#if isInstalledInChat}
-								<CheckmarkFilled />Invite accepted
-							{:else}
-								Invite pending...
-							{/if}
+							<Pending />Invite pending
 						</p>
 					{:else}
-						<Button variant="strong" on:click={() => acceptInstall(message.objectId)}>Accept</Button
+						<Button variant="strong" on:click={() => acceptInstall(message.objectId)}
+							><Checkmark /> Accept</Button
 						>
 					{/if}
 				{:else if message.command === 'accept'}
 					<p class="install-status">
 						{#if isInstalledInChat}
 							<CheckmarkFilled />Invite accepted
 						{:else}
-							Invite pending...
+							<Pending />Invite pending
 						{/if}
 					</p>
 				{/if}
 			</Container>
 		</div>
 	{/if}
+	<svelte:fragment slot="avatar">
+		{#if $$slots.avatar}
+			<slot name="avatar" />
+		{/if}
+	</svelte:fragment>
 </ChatMessage>
 
 <style lang="scss">
 	.install-status {
 		display: flex;
 		flex-direction: row;
+		justify-content: center;
 		align-items: center;
 		gap: var(--spacing-6);
+		background-color: var(--color-step-10, var(--color-dark-step-50));
+		border-radius: var(--spacing-24);
+		padding: var(--spacing-6);
 	}
 </style>
diff --git a/src/lib/components/icons/information.svelte b/src/lib/components/icons/information.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let size = 20
+</script>
+
+<svg id="icon" xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 32 32">
+	<defs>
+		<style>
+			.cls-1 {
+				fill: none;
+			}
+		</style>
+	</defs>
+	<polygon points="17 22 17 14 13 14 13 16 15 16 15 22 12 22 12 24 20 24 20 22 17 22" />
+	<path d="M16,8a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,8Z" />
+	<path d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z" />
+	<rect
+		id="_Transparent_Rectangle_"
+		data-name="&lt;Transparent Rectangle&gt;"
+		class="cls-1"
+		width="32"
+		height="32"
+	/>
+</svg>
diff --git a/src/lib/components/object-install-info.svelte b/src/lib/components/object-install-info.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import Information from './icons/information.svelte'
+
+	export let name: string | undefined = undefined
+	export let logoImg: string | undefined = undefined
+	export let logoAlt: string | undefined = undefined
+	export let onClick: (() => void) | undefined = undefined
+</script>
+
+<div class="wo-header" on:click={onClick} on:keypress={onClick} role="button" tabindex="0">
+	{#if logoImg}
+		<img src={logoImg} alt={logoAlt} />
+	{/if}
+	{#if name}
+		<p class="text-normal grow">{name}</p>
+	{/if}
+	<div class="info">
+		<Information />
+	</div>
+	<slot />
+</div>
+
+<style lang="scss">
+	.wo-header {
+		display: flex;
+		flex-direction: row;
+		gap: var(--spacing-6);
+		align-items: center;
+		font-weight: 500;
+		margin-left: 0;
+		margin-right: 0;
+		margin-top: calc(-1 * var(--spacing-12));
+		border-color: var(--color-step-20, var(--color-step-40));
+		border-width: 1px;
+		border-style: solid;
+		border-radius: var(--spacing-24);
+		cursor: pointer;
+
+		img {
+			width: 36px;
+			height: 36px;
+			aspect-ratio: 1;
+			border-radius: var(--spacing-12);
+			margin: var(--spacing-6);
+		}
+		.grow {
+			flex-grow: 1;
+		}
+
+		.info {
+			justify-self: flex-end;
+			padding-right: var(--spacing-12);
+		}
+	}
+</style>
diff --git a/src/routes/chat/[id]/object/new/+page.svelte b/src/routes/chat/[id]/object/new/+page.svelte
@@ -97,17 +97,6 @@
 
 		console.debug('send invite', { object })
 
-		const wallet = $walletStore.wallet
-		if (!wallet) {
-			errorStore.addEnd({
-				title: 'Wallet Error',
-				message: 'No wallet found',
-				retry: () => sendInstallInvite(object),
-				reload: true,
-			})
-			return
-		}
-
 		try {
 			await adapters.sendInstall($page.params.id, object.objectId, 'invite')
 			showInvite = undefined

diff --git a/src/routes/group/chat/[id]/+page.svelte b/src/routes/group/chat/[id]/+page.svelte
@@ -38,6 +38,7 @@
 	import ChatDateBadge from '$lib/components/chat-date-badge.svelte'
 	import { errorStore } from '$lib/stores/error'
 	import { publicKeyToAddress } from '$lib/adapters/waku/crypto'
+	import ChatObjectInvite from '$lib/components/chat-object-invite.svelte'
 
 	let div: HTMLElement
 	let autoscroll = true
@@ -197,23 +198,21 @@
 					</Container>
 				</Container>
 			{:else}
+				{@const publicKey = wallet.signingKey.compressedPublicKey}
 				<div class="chat-messages" bind:this={div}>
 					<Container grow>
 						<div class="messages">
 							<div class="messages-inner">
 								<!-- Chat bubbles -->
 								{#each messages as message, i}
+									{@const sender = chat.users.find((u) => message.senderPublicKey === u.publicKey)}
 									{#if message.type === 'user' && message.text?.length > 0}
 										{@const sameSender =
 											messages[i].senderPublicKey === messages[i - 1]?.senderPublicKey}
 										{@const lastMessage =
 											i + 1 === messages.length ||
 											messages[i].senderPublicKey !== messages[i + 1]?.senderPublicKey ||
 											messages[i + 1]?.type !== 'user'}
-										{@const sender = chat.users.find(
-											(u) => message.senderPublicKey === u.publicKey,
-										)}
-										{@const publicKey = wallet.signingKey.compressedPublicKey}
 										{#if i === 0 || (i > 0 && areDifferentDays(messages[i].timestamp, messages[i - 1].timestamp))}
 											<ChatDateBadge text={formatTimestampSeparator(message.timestamp)} />
 										{/if}
@@ -238,6 +237,23 @@
 										</ChatMessage>
 									{:else if message.type === 'data'}
 										<WakuObject {message} users={chat.users} />
+									{:else if message.type === 'install'}
+										<ChatObjectInvite
+											{message}
+											group={true}
+											chatId={$page.params.id}
+											myMessage={message.senderPublicKey === publicKey ? true : false}
+											users={chat.users}
+											objects={chat.objects}
+											timestamp={formatTimestampTime(message.timestamp)}
+											senderName={message.senderPublicKey === publicKey ? undefined : sender?.name}
+										>
+											<svelte:fragment slot="avatar">
+												{#if message.senderPublicKey !== publicKey}
+													<Avatar size={40} picture={sender?.avatar} seed={sender?.publicKey} />
+												{/if}
+											</svelte:fragment>
+										</ChatObjectInvite>
 									{/if}
 								{/each}
 							</div>

diff --git a/src/routes/identity/+page.svelte b/src/routes/identity/+page.svelte
@@ -29,13 +29,10 @@
 	import { uploadPicture } from '$lib/adapters/ipfs'
 	import Avatar from '$lib/components/avatar.svelte'
 	import { errorStore } from '$lib/stores/error'
-	import { installedObjectStore } from '$lib/stores/installed-objects'
-	import { getObjectSpec } from '$lib/objects/external/lib'
 	import DataBlob from '$lib/components/icons/data-blob.svelte'
 
 	let avatar = $profile.avatar
 	let name = $profile.name
-	let objectPath = ''
 
 	$: if ($profile.loading === false && !name && !avatar) {
 		name = $profile.name

diff --git a/src/routes/objects/+page.svelte b/src/routes/objects/+page.svelte
@@ -22,7 +22,7 @@
 	let objectPath = ''
 
 	$: loading = $installedObjectStore.loading
-	$: installedObjects = loading ? [] : getInstalledObjectList()
+	$: installedObjects = $installedObjectStore && getInstalledObjectList()
 
 	async function addObject() {
 		const { object } = await getObjectSpec(objectPath, 'chat')
@@ -75,6 +75,7 @@
 				</ButtonBlock>
 			{/each}
 			<Container align="center" gap={12} padX={24} padY={24}>
+				Developer stuff
 				<InputField bind:value={objectPath} label="Object path" />
 				<Button on:click={addObject}>Add object</Button>
 			</Container>