An easy-to-host PDS on the ATProtocol, iPhone and MacOS. Maintain control of your keys and data, always.
feat: add DIDAvatar component with deterministic DID-derived hue
+48
+48
apps/identity-wallet/src/lib/components/home/DIDAvatar.svelte
+48
apps/identity-wallet/src/lib/components/home/DIDAvatar.svelte
···
1
+
<script lang="ts">
2
+
let {
3
+
did,
4
+
handle,
5
+
}: {
6
+
did: string;
7
+
handle: string;
8
+
} = $props();
9
+
10
+
// Derive a stable hue (0-359) from the DID string using a simple polynomial hash.
11
+
// The same DID always produces the same hue across re-renders and app sessions.
12
+
let hue = $derived.by(() => {
13
+
let h = 0;
14
+
for (let i = 0; i < did.length; i++) {
15
+
h = (h * 31 + did.charCodeAt(i)) & 0xffffff;
16
+
}
17
+
return h % 360;
18
+
});
19
+
20
+
// Show '?' for the ATProto sentinel value that means "no handle registered".
21
+
let initial = $derived(
22
+
handle === 'handle.invalid' ? '?' : handle.charAt(0).toUpperCase()
23
+
);
24
+
</script>
25
+
26
+
<div
27
+
class="avatar"
28
+
style="background: hsl({hue}, 65%, 45%)"
29
+
aria-label="Avatar for {handle}"
30
+
>
31
+
{initial}
32
+
</div>
33
+
34
+
<style>
35
+
.avatar {
36
+
width: 64px;
37
+
height: 64px;
38
+
border-radius: 50%;
39
+
display: flex;
40
+
align-items: center;
41
+
justify-content: center;
42
+
color: #fff;
43
+
font-size: 1.75rem;
44
+
font-weight: 700;
45
+
flex-shrink: 0;
46
+
user-select: none;
47
+
}
48
+
</style>