feat: dicebear icons (#422)

Co-authored-by: Vojtech Simetka <[email protected]>

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

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { getPicture } from '$lib/adapters/ipfs'
-	import User from '$lib/components/icons/user.svelte'
+	import Dicebear from './dicebear.svelte'
 
-	export let picture: string | undefined = undefined
+	export let picture: string | undefined
+	export let seed: string | undefined
 	export let size = 48
 	export let onClick: (() => unknown) | undefined = undefined
-	export let avatarSize = size / 2
+	export let group = false
 </script>
 
 <div
@@ -18,8 +19,9 @@
 	<div class="img" style={`height: ${size}px;`}>
 		{#if picture}
 			<img src={getPicture(picture)} alt="profile" />
-		{:else}
-			<User size={avatarSize} />
+		{:else if seed}
+			{@const style = group ? 'shapes' : 'bottts-neutral'}
+			<Dicebear {seed} {size} {style} />
 		{/if}
 	</div>
 </div>

src/lib/components/dicebear.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import User from './icons/user.svelte'
+
+	export let seed: string
+	export let size = 48
+	export let style = 'bottts-neutral'
+	export let scale = 75
+	export let radius = 50
+
+	const avatarSize = size / 2
+</script>
+
+{#if style === 'user'}
+	<User size={avatarSize} />
+{:else}
+	<img
+		alt="avatar"
+		src="https://api.dicebear.com/6.x/{style}/svg?seed={seed}&size={size}&radius={radius}&scale={scale}"
+	/>
+{/if}

src/lib/objects/payggy/views/select-user.svelte

@@ -51,7 +51,7 @@
 			<li on:click={() => setUser(user)}>
 				<Container grow>
 					<div class="chat">
-						<Avatar size={48} picture={user.avatar} />
+						<Avatar size={48} picture={user.avatar} seed={user.address} />
 						<div class="content">
 							<div class="user-info">
 								<span class="username text-lg">

src/lib/objects/split/views/accounting.svelte

@@ -72,7 +72,7 @@
 				<li>
 					<Container grow>
 						<div class="chat">
-							<Avatar size={48} picture={user?.avatar} />
+							<Avatar size={48} picture={user?.avatar} seed={user?.address} />
 							<Container direction="column">
 								<p>
 									{(isYou ? 'You' : user?.name) ?? 'unknown'}

src/routes/+page.svelte

@@ -94,7 +94,7 @@
 						<svelte:fragment slot="right">
 							<Button align="right" variant="account" on:click={() => goto(ROUTES.IDENTITY)}>
 								<svelte:fragment slot="avatar">
-									<Avatar size={48} picture={$profile.avatar} />
+									<Avatar size={48} picture={$profile.avatar} seed={wallet.address} />
 								</svelte:fragment>
 								{$profile.name}
 							</Button>
@@ -127,7 +127,7 @@
 						<svelte:fragment slot="right">
 							<Button align="right" variant="account" on:click={() => goto(ROUTES.IDENTITY)}>
 								<svelte:fragment slot="avatar">
-									<Avatar size={48} picture={$profile.avatar} />
+									<Avatar size={48} picture={$profile.avatar} seed={wallet.address} />
 								</svelte:fragment>
 								{$profile.name}
 							</Button>
@@ -159,9 +159,9 @@
 								<Container grow>
 									<div class="chat">
 										{#if isGroupChatId(chat.chatId)}
-											<Avatar size={70} picture={chat?.avatar} />
+											<Avatar group size={70} picture={chat?.avatar} seed={chat.chatId} />
 										{:else}
-											<Avatar size={70} picture={otherUser?.avatar} />
+											<Avatar size={70} picture={otherUser?.avatar} seed={otherUser?.address} />
 										{/if}
 										<div class="content">
 											<div class="chat-info">

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

@@ -94,7 +94,7 @@
 						<ChevronLeft />
 					</Button>
 					<svelte:fragment slot="chat">
-						<Avatar picture={otherUser?.avatar ?? ''} />
+						<Avatar picture={otherUser?.avatar} seed={otherUser?.address} />
 						{otherUser?.name}
 					</svelte:fragment>
 				</Header>
@@ -110,7 +110,7 @@
 					.map((chat) => `"${chat.name}"`)
 					.slice(0, 1)}
 				<Container justify="center" alignItems="center" gap={0} padX={24}>
-					<Avatar picture={inviter?.avatar ?? ''} size={140} />
+					<Avatar picture={inviter?.avatar} seed={inviter?.address} size={140} />
 					<Spacer />
 					<p class="text-lg text-bold text-center">Chat with "{chat?.name}"?</p>
 					<Spacer height={12} />

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

@@ -140,7 +140,7 @@
 						<ChevronLeft />
 					</Button>
 					<svelte:fragment slot="chat">
-						<Avatar picture={chat?.avatar ?? ''} />
+						<Avatar group picture={chat?.avatar} seed={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 ?? ''} size={140} />
+					<Avatar group picture={chat?.avatar} seed={chat?.chatId} size={140} />
 					<Spacer />
 					<p class="text-lg text-bold text-center">Join "{chat?.name}"?</p>
 					<Spacer height={12} />
@@ -204,7 +204,7 @@
 											{@html replaceAddressesWithNames(textToHTML(htmlize(message.text)))}
 											<svelte:fragment slot="avatar">
 												{#if message.fromAddress !== wallet.address && lastMessage}
-													<Avatar size={40} picture={sender?.avatar} />
+													<Avatar size={40} picture={sender?.avatar} seed={sender?.address} />
 												{/if}
 											</svelte:fragment>
 										</ChatMessage>

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

@@ -24,7 +24,7 @@
 	import type { HDNodeWallet } from 'ethers'
 	import routes from '$lib/routes'
 	import { goto } from '$app/navigation'
-	import { getPicture, uploadPicture } from '$lib/adapters/ipfs'
+	import { uploadPicture } from '$lib/adapters/ipfs'
 	import { onDestroy } from 'svelte'
 	import Logout from '$lib/components/icons/logout.svelte'
 	import { walletStore } from '$lib/stores/wallet'
@@ -140,19 +140,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} seed={chatId} size={140} />
 				<InputFile bind:files={pictureFiles}>
 					<Renew />
 					Change picture
@@ -180,7 +168,7 @@
 							<Container grow>
 								<div class="chat">
 									<div class="chat-avatar">
-										<Avatar size={48} picture={user.avatar} />
+										<Avatar size={48} picture={user.avatar} seed={user.address} />
 									</div>
 									<div class="content">
 										<div class="user-info">
@@ -231,7 +219,7 @@
 							<div class="chat-button" role="listitem">
 								<Container grow>
 									<div class="chat">
-										<Avatar size={48} picture={chat.users[0].avatar} />
+										<Avatar size={48} picture={chat.users[0].avatar} seed={chat.users[0].address} />
 										<div class="content">
 											<div class="user-info">
 												<span class="username">

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
@@ -108,7 +110,11 @@
 								<div class="chat-button" role="listitem">
 									<Container grow>
 										<div class="chat">
-											<Avatar size={48} picture={chat.users[0].avatar} />
+											<Avatar
+												size={48}
+												picture={chat.users[0].avatar}
+												seed={chat.users[0].address}
+											/>
 											<div class="content">
 												<div class="user-info">
 													<span class="username">
@@ -150,19 +156,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} seed={chatId} size={140} />
 				<InputFile bind:files={pictureFiles}>
 					<Renew />
 					Change picture
@@ -255,40 +249,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>