feat: group avatars use shapes style

src/lib/adapters/index.ts

@@ -13,6 +13,7 @@ export interface Adapter {
 	startChat(address: string, peerAddress: string): Promise<string>
 	startGroupChat(
 		wallet: BaseWallet,
+		chatId: string,
 		memberAddresses: string[],
 		name: string,
 		avatar?: string,

src/lib/adapters/waku/index.ts

@@ -33,7 +33,6 @@ import { makeWakuObjectAdapter } from '$lib/objects/adapter'
 import { fetchBalances } from '$lib/adapters/balance'
 import { makeWakustore } from './wakustore'
 import type { StorageChat, StorageChatEntry, StorageObjectEntry, StorageProfile } from './types'
-import { genRandomHex } from '$lib/utils'
 import { walletStore } from '$lib/stores/wallet'
 import { SafeWaku } from './safe-waku'
 
@@ -280,6 +279,7 @@ export default class WakuAdapter implements Adapter {
 
 	async startGroupChat(
 		wallet: BaseWallet,
+		chatId: string,
 		memberAddresses: string[],
 		name: string,
 		avatar?: string,
@@ -288,8 +288,6 @@ export default class WakuAdapter implements Adapter {
 			throw 'invalid chat'
 		}
 
-		const chatId = genRandomHex(64)
-
 		const userAddresses = [...memberAddresses, wallet.address]
 		const storageChat = {
 			users: userAddresses,

src/lib/components/avatar.svelte

@@ -5,10 +5,13 @@
 	export let picture: string | undefined
 	export let size = 48
 	export let onClick: (() => unknown) | undefined = undefined
+	export let group = false
 
 	function isCID(s: string) {
 		return s.length === 46 && s.startsWith('Qm')
 	}
+
+	console.debug('avatar', { picture, group })
 </script>
 
 <div
@@ -22,7 +25,8 @@
 		{#if picture && isCID(picture)}
 			<img src={getPicture(picture)} alt="profile" />
 		{:else if picture}
-			<Dicebear name={picture || ''} {size} />
+			{@const style = group ? 'shapes' : 'bottts-neutral'}
+			<Dicebear name={picture || ''} {size} {style} />
 		{/if}
 	</div>
 </div>

src/routes/+page.svelte

@@ -159,7 +159,7 @@
 								<Container grow>
 									<div class="chat">
 										{#if isGroupChatId(chat.chatId)}
-											<Avatar size={70} picture={chat?.avatar || chat.chatId} />
+											<Avatar group size={70} picture={chat?.avatar || chat.chatId} />
 										{:else}
 											<Avatar size={70} picture={otherUser?.avatar || otherUser?.address} />
 										{/if}

src/routes/group/chat/[id]/+page.svelte

@@ -140,7 +140,7 @@
 						<ChevronLeft />
 					</Button>
 					<svelte:fragment slot="chat">
-						<Avatar picture={chat?.avatar ?? chat?.chatId} />
+						<Avatar group picture={chat?.avatar || chat?.chatId} />
 						<span class="truncate">
 							{chat?.name}
 						</span>
@@ -159,7 +159,7 @@
 			</svelte:fragment>
 			{#if !chat.joined}
 				<Container justify="center" alignItems="center" gap={0} padX={24}>
-					<Avatar picture={chat?.avatar ?? chat?.chatId} size={140} />
+					<Avatar group picture={chat?.avatar || chat?.chatId} size={140} />
 					<Spacer />
 					<p class="text-lg text-bold text-center">Join "{chat?.name}"?</p>
 					<Spacer height={12} />

src/routes/group/chat/[id]/edit/+page.svelte

@@ -140,7 +140,7 @@
 				</Header>
 			</svelte:fragment>
 			<Container gap={12}>
-				<Avatar picture={picture || wallet.address} size={140} />
+				<Avatar group {picture} size={140} />
 				<InputFile bind:files={pictureFiles}>
 					<Renew />
 					Change picture

src/routes/group/new/+page.svelte

@@ -3,7 +3,6 @@
 
 	import AddComment from '$lib/components/icons/add-comment.svelte'
 	import ChevronLeft from '$lib/components/icons/chevron-left.svelte'
-	import UserIcon from '$lib/components/icons/user.svelte'
 
 	import Button from '$lib/components/button.svelte'
 	import Header from '$lib/components/header.svelte'
@@ -23,7 +22,8 @@
 	import type { HDNodeWallet } from 'ethers/lib.commonjs'
 	import Layout from '$lib/components/layout.svelte'
 	import Checkbox from '$lib/components/checkbox.svelte'
-	import { getPicture, uploadPicture } from '$lib/adapters/ipfs'
+	import { uploadPicture } from '$lib/adapters/ipfs'
+	import { genRandomHex } from '$lib/utils'
 
 	let groupMembers: string[] = []
 	let screen: 'create' | 'details' = 'create'
@@ -32,6 +32,8 @@
 	let pictureFiles: FileList | undefined = undefined
 	let buttonDisabled = false
 
+	const chatId = genRandomHex(64)
+
 	async function resizePersonaPicture(p?: File) {
 		try {
 			picture = p ? await uploadPicture(await clipAndResize(p, 200, 200)) : picture
@@ -44,7 +46,7 @@
 	async function createGroup(wallet: HDNodeWallet) {
 		buttonDisabled = true
 
-		const chatId = await adapters.startGroupChat(wallet, groupMembers, name, picture)
+		await adapters.startGroupChat(wallet, chatId, groupMembers, name, picture)
 		await adapters.sendInvite(wallet, chatId, groupMembers)
 
 		buttonDisabled = false
@@ -150,19 +152,7 @@
 				</Header>
 			</svelte:fragment>
 			<Container gap={12}>
-				<div class="avatar">
-					{#if picture}
-						<div class="img">
-							<img src={getPicture(picture)} alt="profile" />
-						</div>
-					{:else}
-						<div class="no-img">
-							<div class="profile-default">
-								<UserIcon size={70} />
-							</div>
-						</div>
-					{/if}
-				</div>
+				<Avatar group picture={picture || chatId} size={140} />
 				<InputFile bind:files={pictureFiles}>
 					<Renew />
 					Change picture
@@ -255,40 +245,4 @@
 		gap: var(--spacing-6);
 		align-items: center;
 	}
-
-	.avatar {
-		margin: var(--spacing-12) auto 0;
-		border-radius: 100px;
-	}
-	.no-img,
-	.img {
-		aspect-ratio: 1;
-		height: 140px;
-		border-radius: 100px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background-color: var(--color-step-10, var(--color-dark-step-50));
-		margin-inline: auto;
-		position: relative;
-
-		:global(img) {
-			aspect-ratio: 1;
-			object-fit: cover;
-			border-radius: 100px;
-		}
-	}
-
-	.profile-default {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		:global(svg) {
-			fill: var(--color-step-50, var(--color-dark-step-10));
-		}
-	}
 </style>