code formatting

2026-01-08 04:23:56 -05:00 · 2023-11-08 19:08:39 +03:00
parent feb40a247b
commit 7966ae8e38
50 changed files with 987 additions and 413 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -5,5 +5,14 @@
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte"],
 	"pluginSearchDirs": ["."],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	],
+	"singleAttributePerLine": true,
+	"svelteBracketNewLine": false
 }
--- a/src/app.html
+++ b/src/app.html
@@ -1,13 +1,33 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html
+	lang="en"
+	class="dark"
+>
 	<head>
 		<meta charset="utf-8" />
-		<meta name="msapplication-TileColor" content="#202626" />
-		<meta name="theme-color" content="#FA5F5F" />
-		<meta name="viewport" content="width=device-width" />
+		<meta
+			name="msapplication-TileColor"
+			content="#202626"
+		/>
+		<meta
+			name="theme-color"
+			content="#FA5F5F"
+		/>
+		<meta
+			name="viewport"
+			content="width=device-width"
+		/>
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" data-theme="discreetly-theme">
-		<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
+	<body
+		data-sveltekit-preload-data="hover"
+		data-theme="discreetly-theme"
+	>
+		<div
+			style="display: contents"
+			class="h-screen overflow-hidden"
+		>
+			%sveltekit.body%
+		</div>
 	</body>
 </html>
--- a/src/lib/components/ActionPoints/AP.svelte
+++ b/src/lib/components/ActionPoints/AP.svelte
@@ -10,13 +10,28 @@
 </script>

 {#if $configStore.actionRepresentation == ActionRepresentationE.AP}
-	<AP {health} {maxHealth} />
+	<AP
+		{health}
+		{maxHealth}
+	/>
 {:else if $configStore.actionRepresentation == ActionRepresentationE.Hearts}
-	<Hearts {health} {maxHealth} />
+	<Hearts
+		{health}
+		{maxHealth}
+	/>
 {:else if $configStore.actionRepresentation == ActionRepresentationE.Shields}
-	<Shields {health} {maxHealth} />
+	<Shields
+		{health}
+		{maxHealth}
+	/>
 {:else if $configStore.actionRepresentation == ActionRepresentationE.Battery}
-	<Battery {health} {maxHealth} />
+	<Battery
+		{health}
+		{maxHealth}
+	/>
 {:else}
-	<AP {health} {maxHealth} />
+	<AP
+		{health}
+		{maxHealth}
+	/>
 {/if}
--- a/src/lib/components/ActionPoints/ActionPoints.svelte
+++ b/src/lib/components/ActionPoints/ActionPoints.svelte
@@ -10,7 +10,11 @@
 	$: emptycircles = maxHealth - health;
 </script>

-<Ratings value={health} max={maxHealth} spacing="space-x-0">
+<Ratings
+	value={health}
+	max={maxHealth}
+	spacing="space-x-0"
+>
 	<svelte:fragment slot="empty">
 		<CircleEmpty class="w-4 h-4 text-surface-600-300-token" />
 	</svelte:fragment>
--- a/src/lib/components/Explainers/RLN.svelte
+++ b/src/lib/components/Explainers/RLN.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import Group from 'svelte-material-icons/AccountGroup.svelte';
+	import MemberSecret from 'svelte-material-icons/AccountKey.svelte';
+	import FingerPrint from 'svelte-material-icons/Fingerprint.svelte';
+	import OneToMany from 'svelte-material-icons/RelationOneToMany.svelte';
+	import Card from '../Utils/Card.svelte';
+</script>
+
+<Card>
+	<svelte:fragment slot="header">RLN Simplified</svelte:fragment>
+	<div
+		id="explainer"
+		class="flex flex-col gap-3"
+	>
+		<div class="flex flex-col">
+			<figure class="flex flex-row"><OneToMany /></figure>
+			<p>I can prove to you that</p>
+		</div>
+		<div class="flex flex-col">
+			<figure class="flex flex-row">
+				<FingerPrint />
+				<div class="flex flex-row gap-1">(<MemberSecret />)</div>
+			</figure>
+			<p>I know some secret whose fingerprint</p>
+		</div>
+
+		<div class="flex flex-col">
+			<figure class="flex flex-row">∈</figure>
+			<p>is in</p>
+		</div>
+
+		<div class="flex flex-col">
+			<figure class="flex flex-row"><Group /></figure>
+			<p>Some Group of fingerprints</p>
+		</div>
+
+		<div class="flex flex-col">
+			<p>and</p>
+		</div>
+	</div>
+	<svelte:fragment slot="footer">
+		<p>
+			RLN (Rate-Limiting Nullifier) is a zk-gadget/protocol that enables spam prevention mechanism
+			for anonymous environments
+		</p>
+		<p class="my-3">
+			Read more about <a
+				class="anchor"
+				href="https://rate-limiting-nullifier.github.io/rln-docs/">RLN</a
+			>.
+		</p>
+	</svelte:fragment>
+</Card>
+
+<style>
+	div {
+		@apply place-items-center;
+	}
+
+	#explainer figure {
+		@apply place-items-center;
+		@apply text-2xl;
+	}
+	#explainer p {
+		@apply text-center;
+		@apply italic;
+		@apply uppercase;
+	}
+</style>
--- a/src/lib/components/Explainers/Semaphore.svelte
+++ b/src/lib/components/Explainers/Semaphore.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import Group from 'svelte-material-icons/AccountGroup.svelte';
+	import MemberSecret from 'svelte-material-icons/AccountKey.svelte';
+	import FingerPrint from 'svelte-material-icons/Fingerprint.svelte';
+	import OneToMany from 'svelte-material-icons/RelationOneToMany.svelte';
+	import Card from '../Utils/Card.svelte';
+</script>
+
+<Card>
+	<svelte:fragment slot="header">Semaphore Simplified</svelte:fragment>
+	<div
+		id="explainer"
+		class="flex flex-col gap-3"
+	>
+		<div class="flex flex-col">
+			<figure class="flex flex-row"><OneToMany /></figure>
+			<p>I can prove to you that</p>
+		</div>
+		<div class="flex flex-col">
+			<figure class="flex flex-row">
+				<FingerPrint />
+				<div class="flex flex-row gap-1">(<MemberSecret />)</div>
+			</figure>
+			<p>I know some secret whose fingerprint</p>
+		</div>
+
+		<div class="flex flex-col">
+			<figure class="flex flex-row">∈</figure>
+			<p>is in</p>
+		</div>
+
+		<div class="flex flex-col">
+			<figure class="flex flex-row"><Group /></figure>
+			<p>Some Group of fingerprints</p>
+		</div>
+	</div>
+	<svelte:fragment slot="footer">
+		<p>
+			Semaphore is a zero-knowledge protocol that allows you to cast a signal (for example, a vote
+			or endorsement) as a provable group member without revealing your identity. Additionally, it
+			provides a simple mechanism to prevent double-signaling. Use cases include private voting,
+			whistleblowing, anonymous DAOs and mixers.
+		</p>
+		<p class="my-3">
+			Read more about <a
+				class="anchor"
+				href="https://semaphore.pse.dev/docs/introduction">Semaphore</a
+			>.
+		</p>
+	</svelte:fragment>
+</Card>
+
+<style>
+	div {
+		@apply place-items-center;
+	}
+
+	#explainer figure {
+		@apply place-items-center;
+		@apply text-2xl;
+	}
+	#explainer p {
+		@apply text-center;
+		@apply italic;
+		@apply uppercase;
+	}
+</style>
--- a/src/lib/components/Gateways/EthereumGroup.svelte
+++ b/src/lib/components/Gateways/EthereumGroup.svelte
@@ -82,7 +82,10 @@
 <div class="flex flex-col gap-3 justify-between">
 	<div>
 		<h3 class="h4 mb-2"><span class="text-success-500">Step 1:</span> Connect your wallet</h3>
-		<button bind:this={btnEl} class="btn variant-outline-tertiary">Connect</button>
+		<button
+			bind:this={btnEl}
+			class="btn variant-outline-tertiary">Connect</button
+		>
 	</div>
 	{#if isConnected}
 		<div>
@@ -100,7 +103,11 @@
 					<span class="text-success-500">Step 2:</span> Sign your Identity Commitment to prove ownership
 					of this address
 				</h3>
-				<button on:click={proveOwnership} id="btn" class="btn variant-outline-success">Sign</button>
+				<button
+					on:click={proveOwnership}
+					id="btn"
+					class="btn variant-outline-success">Sign</button
+				>
 			</div>
 		{:else if loadingRooms}
 			<p>Loading rooms...</p>
--- a/src/lib/components/Gateways/InviteCode.svelte
+++ b/src/lib/components/Gateways/InviteCode.svelte
@@ -88,7 +88,10 @@
 </script>

 {#if !hideInput}
-	<label class="label" for="inviteCode">
+	<label
+		class="label"
+		for="inviteCode"
+	>
 		<span class="h5">Enter Invite Code:</span>
 		<input
 			class="input"
--- a/src/lib/components/Gateways/Jubmojis.svelte
+++ b/src/lib/components/Gateways/Jubmojis.svelte
@@ -40,7 +40,10 @@
 {#if proof}
 	<h3 class="h4 mb-2">Proof Found!</h3>
 	{#if !loading}
-		<div class="btn variant-filled-success" on:click={() => proof && validateProof(proof)}>
+		<div
+			class="btn variant-filled-success"
+			on:click={() => proof && validateProof(proof)}
+		>
 			<Creation class="mr-2" />Prove Your Power<MagicStaff />
 		</div>
 	{:else}
@@ -48,7 +51,9 @@
 		<Loading />
 	{/if}
 {:else}
-	<a class="btn variant-ghost-secondary" href="https://www.jubmoji.quest/powers"
+	<a
+		class="btn variant-ghost-secondary"
+		href="https://www.jubmoji.quest/powers"
 		><Creation class="mr-2" />Harness Your Power<MagicStaff /></a
 	>
 {/if}
--- a/src/lib/components/Identity/BackupIdentity.svelte
+++ b/src/lib/components/Identity/BackupIdentity.svelte
@@ -36,10 +36,25 @@
 			>Download Identity Backup as JSON</a
 		>
 		{#if !revealIdentity}
-			<div class="btn variant-ghost-success" on:click={reveal}>Show Identity</div>
+			<div
+				class="btn variant-ghost-success"
+				on:click={reveal}
+			>
+				Show Identity
+			</div>
 		{:else}
-			<div class="btn variant-ghost-success" on:click={reveal}>Hide Identity</div>
-			<textarea id="reveleadIdentity" class="textarea text-sm" rows="9" value={id} />
+			<div
+				class="btn variant-ghost-success"
+				on:click={reveal}
+			>
+				Hide Identity
+			</div>
+			<textarea
+				id="reveleadIdentity"
+				class="textarea text-sm"
+				rows="9"
+				value={id}
+			/>
 		{/if}
 	{:else if $identityExists == 'encrypted'}
 		<p class="h5 text-primary-500">
--- a/src/lib/components/Identity/DeleteIdentity.svelte
+++ b/src/lib/components/Identity/DeleteIdentity.svelte
@@ -47,7 +47,11 @@
 		<h3 class="h4">Delete Your Identity & Reset Application</h3>
 	</header>
 	<section class="px-4 pt-4">
-		<input type="checkbox" id="checkbox" class="mx-2 p-1" />
+		<input
+			type="checkbox"
+			id="checkbox"
+			class="mx-2 p-1"
+		/>
 		<span class="ms-2"
 			>I promise I backed up my identity, or I really want to destroy it forever.</span
 		>
--- a/src/lib/components/Identity/RestoreIdentity.svelte
+++ b/src/lib/components/Identity/RestoreIdentity.svelte
@@ -122,6 +122,9 @@
 				placeholder="Paste your Identity Here"
 			/></label
 		>
-		<a class="btn btn-sm variant-ringed-success mb-5" on:click={recoverFromJSON}>Recover</a>
+		<a
+			class="btn btn-sm variant-ringed-success mb-5"
+			on:click={recoverFromJSON}>Recover</a
+		>
 	</section>
 </div>
--- a/src/lib/components/Onboarding/Demo.svelte
+++ b/src/lib/components/Onboarding/Demo.svelte
@@ -1,11 +0,0 @@
-<script lang="ts">
-	import Group from 'svelte-material-icons/AccountGroup.svelte';
-	import MemberSecret from 'svelte-material-icons/AccountKey.svelte';
-	import FingerPrint from 'svelte-material-icons/Fingerprint.svelte';
-</script>
-
-<div class="flex flex-row gap-3 place-items-center text-xl">
-	<FingerPrint />(<MemberSecret />)
-	<div>∈</div>
-	<Group />
-</div>
--- a/src/lib/components/Onboarding/Gateways.svelte
+++ b/src/lib/components/Onboarding/Gateways.svelte
@@ -15,7 +15,10 @@
 		<SelectServer />
 	</div>
 {/if}
-<div id="gateway-cards" class="grid">
+<div
+	id="gateway-cards"
+	class="grid"
+>
 	<Card>
 		<svelte:fragment slot="header">Join via invite code</svelte:fragment>
 		<svelte:fragment slot="description">If you were given an invite code, you can</svelte:fragment>
@@ -64,8 +67,10 @@
 			><span class="flex gap-3">The Word <BullHorn /></span></svelte:fragment
 		>
 		<svelte:fragment slot="description"
-			>Do you know <a class="link" target="_blank" href="https://github.com/Mach-34/the-word/"
-				>the word</a
+			>Do you know <a
+				class="link"
+				target="_blank"
+				href="https://github.com/Mach-34/the-word/">the word</a
 			>? Prove it.
 		</svelte:fragment>
 		<TheWord />
--- a/src/lib/components/Onboarding/Introduction.svelte
+++ b/src/lib/components/Onboarding/Introduction.svelte
@@ -10,25 +10,44 @@
 	{/if}

 	<p>
-		<b>True Anonymity</b> <span role="img" aria-label="Shield">🛡️</span> Chat without revealing your
-		identity, thanks to
-		<a class="link" href="semaphore.pse.dev">Semaphore</a>.
+		<b>True Anonymity</b>
+		<span
+			role="img"
+			aria-label="Shield">🛡️</span
+		>
+		Chat without revealing your identity, thanks to
+		<a
+			class="link"
+			href="semaphore.pse.dev">Semaphore</a
+		>.
 	</p>
 	<p>
-		<b>Zero-Knowledge Spam Prevention</b> <span role="img" aria-label="Detective">🕵️</span> Powered
-		by
-		<a class="link" href="https://rate-limiting-nullifier.github.io/rln-docs/"
-			>Rate Limiting Nullifier</a
+		<b>Zero-Knowledge Spam Prevention</b>
+		<span
+			role="img"
+			aria-label="Detective">🕵️</span
+		>
+		Powered by
+		<a
+			class="link"
+			href="https://rate-limiting-nullifier.github.io/rln-docs/">Rate Limiting Nullifier</a
 		>, an anti-spam technology that ensures everyone can participate fairly.
 	</p>
 	<p>
-		<b>Own Your Identity</b> <span role="img" aria-label="Lock">🔐</span> Be in full control of your
-		anonymity. Remember to
+		<b>Own Your Identity</b>
+		<span
+			role="img"
+			aria-label="Lock">🔐</span
+		>
+		Be in full control of your anonymity. Remember to
 		<i class="text-primary-500">backup your credentials</i>—once lost, they're irretrievable.
 	</p>
 	<p>
-		<b>Gated Communities</b> <span role="img" aria-label="Lock">🔏</span> Most communities can only be
-		joined once, use it wisely.
+		<b>Gated Communities</b>
+		<span
+			role="img"
+			aria-label="Lock">🔏</span
+		> Most communities can only be joined once, use it wisely.
 	</p>
 </Card>

--- a/src/lib/components/Security/SetPasswordContainer.svelte
+++ b/src/lib/components/Security/SetPasswordContainer.svelte
@@ -10,8 +10,10 @@
 	</p>
 	<p class="my-3">
 		This password is only used locally, there is no username and password for your account, so don't
-		forget to <a class="link" href="/settings/identity/backup" title="Backup Identity"
-			>backup your identity</a
+		forget to <a
+			class="link"
+			href="/settings/identity/backup"
+			title="Backup Identity">backup your identity</a
 		>.
 	</p>
 	<SetPasswordInput />
--- a/src/lib/components/Security/SetPasswordInput.svelte
+++ b/src/lib/components/Security/SetPasswordInput.svelte
@@ -11,8 +11,14 @@
 	}
 </script>

-<form on:submit|preventDefault={() => onSubmit()} class="flex flex-col w-full">
-	<label for="setPasswordInput" class="label" />
+<form
+	on:submit|preventDefault={() => onSubmit()}
+	class="flex flex-col w-full"
+>
+	<label
+		for="setPasswordInput"
+		class="label"
+	/>
 	<input
 		id="setPasswordInput"
 		type="password"
--- a/src/lib/components/Server/SelectServer.svelte
+++ b/src/lib/components/Server/SelectServer.svelte
@@ -27,9 +27,17 @@
 </script>

 <div class="input-group input-group-divider grid-cols-[1fr_auto]">
-	<select class="select" bind:value={$selectedServer} title="Choose a server" id="selectServer">
+	<select
+		class="select"
+		bind:value={$selectedServer}
+		title="Choose a server"
+		id="selectServer"
+	>
 		{#each Object.entries($serverStore) as [key, s]}
-			<option value={key} title={key}>{s.name}</option>
+			<option
+				value={key}
+				title={key}>{s.name}</option
+			>
 		{/each}
 	</select>
 	<button
--- a/src/lib/components/Utils/Button.svelte
+++ b/src/lib/components/Utils/Button.svelte
@@ -4,6 +4,10 @@
 	export let text: string | undefined = '';
 </script>

-<a href={link} class="btn px-4 d-inline-flex align-items-center {cls}" type="button">
+<a
+	href={link}
+	class="btn px-4 d-inline-flex align-items-center {cls}"
+	type="button"
+>
 	<slot>{text}</slot>
 </a>
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -7,5 +7,9 @@
 	<h1 class="h3 my-3 sm:my-5">Error {$page.status}: {$page.error?.message}</h1>
 	<p class="p mb-5">error: {error}</p>
 	<p class="p">page store: {JSON.stringify($page)}</p>
-	<a href="/" class="btn variant-filled-success mt-5" title="homepage">Take Me Home</a>
+	<a
+		href="/"
+		class="btn variant-filled-success mt-5"
+		title="homepage">Take Me Home</a
+	>
 </div>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -89,8 +89,15 @@
 </script>

 <Modal />
-<Toast position="t" background="variant-filled-primary" />
-<Drawer position="top" padding="p-4" rounded="rounded-token">
+<Toast
+	position="t"
+	background="variant-filled-primary"
+/>
+<Drawer
+	position="top"
+	padding="p-4"
+	rounded="rounded-token"
+>
 	{#if $drawerStore.id === 'roomselect'}
 		{#if $numberServers > 1}
 			<h3 class="h5 p-2">Change Server:<SelectServer /></h3>
@@ -101,7 +108,10 @@
 	{/if}
 </Drawer>

-<div class="w-full h-screen" id="pagewrapper">
+<div
+	class="w-full h-screen"
+	id="pagewrapper"
+>
 	<div id="headerwrapper"><AppHeader /></div>
 	<main>
 		<slot class="flex flex-col justify-center">
@@ -111,7 +121,12 @@
 	<div id="footer">
 		<AppFooter {loaded} />
 	</div>
-	<div id="sidebar" class="hidden lg:block"><Sidebar {loaded} /></div>
+	<div
+		id="sidebar"
+		class="hidden lg:block"
+	>
+		<Sidebar {loaded} />
+	</div>
 </div>

 <style>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -23,7 +23,10 @@
 					<span><Help /></span>
 					<span>Join Our Discord</span></Button
 				>
-				<Button link="/signup" cls="variant-ghost-primary btn-lg m-2 sm:m-3 px-8 min-w-[12rem]">
+				<Button
+					link="/signup"
+					cls="variant-ghost-primary btn-lg m-2 sm:m-3 px-8 min-w-[12rem]"
+				>
 					<span><Mask /></span>
 					<span>Sign Up</span>
 				</Button>
@@ -35,7 +38,10 @@
 					<span><Help /></span>
 					<span>Join Our Discord</span></Button
 				>
-				<Button link="/chat" cls="variant-ghost-success  btn-lg m-2 sm:m-3 px-8 min-w-[12rem]">
+				<Button
+					link="/chat"
+					cls="variant-ghost-success  btn-lg m-2 sm:m-3 px-8 min-w-[12rem]"
+				>
 					<span><Mask /></span>
 					<span>Go Chat</span>
 				</Button>
--- a/src/routes/AppHeader.svelte
+++ b/src/routes/AppHeader.svelte
@@ -20,18 +20,29 @@
 	slotTrail="place-content-end"
 	background="bg-surface-50-900-token"
 	padding="p-2 md:p-4"
-	class="border-b border-surface-500/30"
->
+	class="border-b border-surface-500/30">
 	<svelte:fragment slot="lead">
 		<h1 class="h4 text-primary-500">
 			{#if $identityExists}
-				<a href="/chat" role="button" tabindex="0"
-					><img class="max-h-7" src="/logo-text.png" alt="discreetly" /></a
-				>
+				<a
+					href="/chat"
+					role="button"
+					tabindex="0">
+					<img
+						class="max-h-7"
+						src="/logo-text.png"
+						alt="discreetly" />
+				</a>
 			{:else}
-				<a href="/" role="button" tabindex="0"
-					><img class="max-h-7" src="/logo-text.png" alt="discreetly" /></a
-				>
+				<a
+					href="/"
+					role="button"
+					tabindex="0">
+					<img
+						class="max-h-7"
+						src="/logo-text.png"
+						alt="discreetly" />
+				</a>
 			{/if}
 		</h1>
 	</svelte:fragment>
@@ -41,8 +52,7 @@
 			href="/chat"
 			role="button"
 			tabindex="0"
-			class="hidden btn btn-sm variant-ringed-secondary md:inline">Chat</a
-		>
+			class="hidden btn btn-sm variant-ringed-secondary md:inline">Chat</a>
 		<!-- svelte-ignore a11y-missing-attribute -->
 		<a
 			class="btn btn-sm variant-ringed-secondary font-medium text-sm inline md:hidden"
@@ -51,14 +61,17 @@
 				drawerOpen();
 			}}
 			role="button"
-			tabindex="0"
-		>
+			tabindex="0">
 			{roomName}
 		</a>
 	{:else}
-		<a class="btn btn-sm variant-ringed-secondary" href="/signup" role="button" tabindex="0"
-			>Sign Up</a
-		>
+		<a
+			class="btn btn-sm variant-ringed-secondary"
+			href="/signup"
+			role="button"
+			tabindex="0">
+			Sign Up
+		</a>
 	{/if}
 	<svelte:fragment slot="trail">
 		<div class="hidden sm:inline text-primary-500">Alpha V2!</div>
--- a/src/routes/Footer.svelte
+++ b/src/routes/Footer.svelte
@@ -68,8 +68,10 @@
 	});
 </script>

-<!--
-<div class="card p-4 w-72 shadow-xl" data-popup="popupMenu">
+<div
+	class="card p-4 w-72 shadow-xl"
+	data-popup="popupMenu"
+>
 	<nav class="list-nav">
 		<ul>
 			<li id="will-close">
@@ -104,7 +106,7 @@
 		</ul>
 	</nav>
 	<div class="arrow bg-surface-100-800-token" />
-</div> -->
+</div>
 <TabGroup
 	justify="justify-center"
 	active="variant-filled-primary"
@@ -112,13 +114,20 @@
 	flex="flex-1 lg:flex-none"
 	class="bg-surface-100-800-token w-full"
 	>{#if $identityExists}
-		<TabAnchor href="/chat" selected={$page.url.pathname === '/chat'} title="Chat">
-			<svelte:fragment slot="lead"><Chat class="rail-icon" /></svelte:fragment>
-			<span>Chat</span>
-		</TabAnchor>
-
-		{#if $page.url.pathname === '/chat'}
-			<TabAnchor on:click={drawerOpen} title="Select Room">
+		{#if $page.url.pathname !== '/chat'}
+			<TabAnchor
+				href="/chat"
+				selected={$page.url.pathname === '/chat'}
+				title="Chat"
+			>
+				<svelte:fragment slot="lead"><Chat class="rail-icon" /></svelte:fragment>
+				<span>Chat</span>
+			</TabAnchor>
+		{:else}
+			<TabAnchor
+				on:click={drawerOpen}
+				title="Select Room"
+			>
 				<svelte:fragment slot="lead"><Door class="rail-icon" /></svelte:fragment>
 				<span>Select Room</span>
 			</TabAnchor>
@@ -126,14 +135,20 @@
 		{#if loaded}
 			{#if $passwordSet}
 				{#if $keyStore instanceof CryptoKey}
-					<TabAnchor on:click={lock} title="Unlocked, click to lock">
+					<TabAnchor
+						on:click={lock}
+						title="Unlocked, click to lock"
+					>
 						<svelte:fragment slot="lead">
 							<LockOpen class="rail-icon text-warning-300-600-token" />
 						</svelte:fragment>
 						<span>Lock</span>
 					</TabAnchor>
 				{:else}
-					<TabAnchor on:click={unlock} title="Locked">
+					<TabAnchor
+						on:click={unlock}
+						title="Locked"
+					>
 						<svelte:fragment slot="lead">
 							<Lock class="rail-icon text-success-500" />
 						</svelte:fragment>
@@ -143,15 +158,19 @@
 			{/if}
 		{/if}
 	{:else}
-		<TabAnchor href="/signup" selected={$page.url.pathname === '/signup'} title="SignUp">
+		<TabAnchor
+			href="/signup"
+			selected={$page.url.pathname === '/signup'}
+			title="SignUp"
+		>
 			<svelte:fragment slot="lead"><Mask class="rail-icon" /></svelte:fragment>
 			<span>SignUp</span>
 		</TabAnchor>
 	{/if}
 	<a
-		href="/menu"
 		class="tab-anchor text-center cursor-pointer transition-colors duration-100 flex-1 lg:flex-none px-4 py-2 rounded-tl-container-token rounded-tr-container-token hover:variant-soft-primary"
 		title="Menu"
+		use:popup={popupMenu}
 	>
 		<Menu class="rail-icon" />
 		<span>Menu</span>
--- a/src/routes/Sidebar.svelte
+++ b/src/routes/Sidebar.svelte
@@ -43,36 +43,60 @@
 </script>

 <AppRail height="h-full">
-	<AppRailAnchor href="/about" selected={$page.url.pathname === '/about'} title="About">
+	<AppRailAnchor
+		href="/about"
+		selected={$page.url.pathname === '/about'}
+		title="About"
+	>
 		<svelte:fragment slot="lead"><Information class="rail-icon" /></svelte:fragment>
 		<span>About</span>
 	</AppRailAnchor>

 	{#if $identityExists}
-		<AppRailAnchor href="/chat" selected={$page.url.pathname === '/chat'} title="Chat">
+		<AppRailAnchor
+			href="/chat"
+			selected={$page.url.pathname === '/chat'}
+			title="Chat"
+		>
 			<svelte:fragment slot="lead"><Chat class="rail-icon" /></svelte:fragment>
 			<span>Chat</span>
 		</AppRailAnchor>

-		<AppRailAnchor href="/gateways" selected={$page.url.pathname === '/gateways'} title="About">
+		<AppRailAnchor
+			href="/gateways"
+			selected={$page.url.pathname === '/gateways'}
+			title="About"
+		>
 			<svelte:fragment slot="lead"><Plus class="rail-icon" /></svelte:fragment>
 			<span>Join More</span>
 		</AppRailAnchor>

 		{#if $configStore.beta}
-			<AppRailAnchor href="/console" selected={$page.url.pathname === '/console'} title="About">
+			<AppRailAnchor
+				href="/console"
+				selected={$page.url.pathname === '/console'}
+				title="About"
+			>
 				<svelte:fragment slot="lead"><Console class="rail-icon" /></svelte:fragment>
 				<span>Console</span>
 			</AppRailAnchor>
 		{/if}
 		{#if $configStore.apiUsername && $configStore.apiPassword}
-			<AppRailAnchor href="/admin" selected={$page.url.pathname === '/admin'} title="About">
+			<AppRailAnchor
+				href="/admin"
+				selected={$page.url.pathname === '/admin'}
+				title="About"
+			>
 				<svelte:fragment slot="lead"><ShieldCrown class="rail-icon" /></svelte:fragment>
 				<span>Admin</span>
 			</AppRailAnchor>
 		{/if}
 	{:else}
-		<AppRailAnchor href="/signup" selected={$page.url.pathname === '/signup'} title="Sign Up">
+		<AppRailAnchor
+			href="/signup"
+			selected={$page.url.pathname === '/signup'}
+			title="Sign Up"
+		>
 			<svelte:fragment slot="lead"><Mask class="rail-icon" /></svelte:fragment>
 			<span>Sign Up</span>
 		</AppRailAnchor>
@@ -83,14 +107,20 @@
 			<!---PadLock-->
 			{#if $passwordSet}
 				{#if $keyStore instanceof CryptoKey}
-					<AppRailAnchor on:click={lock} title="Unlocked, click to lock">
+					<AppRailAnchor
+						on:click={lock}
+						title="Unlocked, click to lock"
+					>
 						<svelte:fragment slot="lead">
 							<LockOpen class="rail-icon text-warning-300-600-token" />
 						</svelte:fragment>
 						<span>Lock</span>
 					</AppRailAnchor>
 				{:else}
-					<AppRailAnchor on:click={unlock} title="Locked">
+					<AppRailAnchor
+						on:click={unlock}
+						title="Locked"
+					>
 						<svelte:fragment slot="lead">
 							<Lock class="rail-icon text-success-500" />
 						</svelte:fragment>
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,53 +1,57 @@
 <script>
-	import Demo from '$lib/components/Onboarding/Demo.svelte';
+	import Semaphore from '$lib/components/Explainers/Semaphore.svelte';
 	import Introduction from '$lib/components/Onboarding/Introduction.svelte';
 </script>

-<div class="mx-auto mt-10 max-w-[80ch]">
-	<img src="/logo-text.png" alt="discreetly" class="max-h-20 mb-5" />
+<div class="mx-auto px-4 mt-10 max-w-[80ch]">
+	<img
+		src="/logo-text.png"
+		alt="discreetly"
+		class="max-h-20 mb-5"
+	/>
 	<h5 class="italic mb-4 mt-1">A new take on group chats.</h5>

 	<Introduction />
-	<p class="text-justify my-3">
-		This feels like a mostly familiar chat application, except there aren't user names. Under the
-		hood, there is no "login", the server doesn't know who you are, you are anonymous. You're
-		completely anonymous. <i class="italic">Unless you break the rules.</i>
-	</p>
+	<div class="m-3">
+		<p class="my-3">
+			This feels like a mostly familiar chat application, except there aren't user names. Under the
+			hood, there is no "login", the server doesn't know who you are, you are anonymous. You're
+			completely anonymous. <i class="italic">Unless you break the rules.</i>
+		</p>

-	<p class="text-justify my-3">
-		The beauty of this system is that it fosters trust among group members, knowing that everyone in
-		the chat is a verified member. At the same time, it provides the freedom to express oneself
-		anonymously.
-	</p>
+		<p class="my-3">
+			The beauty of this system is that it fosters trust among group members, knowing that everyone
+			in the chat is a verified member. At the same time, it provides the freedom to express oneself
+			anonymously.
+		</p>

-	<p class="text-justify my-3">
-		When you want to send a message in a room, you need to verify your membership in that room, but
-		without giving away your identity. This is accomplished using a zero-knowledge proof, a clever
-		piece of cryptography that lets you prove you know something, without having to reveal what that
-		something is.
-	</p>
+		<p class="my-3">
+			When you want to send a message in a room, you need to verify your membership in that room,
+			but without giving away your identity. This is accomplished using a zero-knowledge proof, a
+			clever piece of cryptography that lets you prove you know something, without having to reveal
+			what that something is.
+		</p>

-	<p class="text-justify my-3">
-		However, there's a small catch. To prevent spam, each time you send a message, you "share" a
-		tiny piece of your identity that is only useful for that epoch (time period). If you send too
-		many messages during an epoch, someone can reassemble your identity, all of your messages can be
-		linked together, and you will be removed from the chat for spamming. This is done automatically
-		and permanently, there is no unban.
-	</p>
-
-	<p class="text-justify my-3">
-		Read more about <a class="anchor" href="https://rate-limiting-nullifier.github.io/rln-docs/"
-			>RLN</a
-		>.
-	</p>
-	<div class="flex gap-3 justify-between my-6">
-		<a href="https://discord.gg/brJQ36KVxk" class="btn variant-ghost-secondary">Join our Discord</a>
+		<p class="my-3">
+			However, there's a small catch. To prevent spam, each time you send a message, you "share" a
+			tiny piece of your identity that is only useful for that epoch (time period). If you send too
+			many messages during an epoch, someone can reassemble your identity, all of your messages can
+			be linked together, and you will be removed from the chat for spamming. This is done
+			automatically and permanently, there is no unban.
+		</p>
+		<a
+			href="/about/explainers"
+			class="btn btn-sm uppercase variant-ghost-success">Learn More About How this all works</a
+		>
+	</div>
+	<div class="flex gap-3 justify-between my-6 mx-3">
+		<a
+			href="https://discord.gg/brJQ36KVxk"
+			class="btn variant-ghost-secondary">Join our Discord</a
+		>
 		<a
 			href="https://discord.com/api/oauth2/authorize?client_id=1142162852132700200&permissions=2147483648&scope=bot"
 			class="btn variant-ghost-primary">Add our Discord Bot to Your Server Today!</a
 		>
 	</div>
-	<div>
-		<Demo />
-	</div>
 </div>
--- a/src/routes/about/explainers/+page.svelte
+++ b/src/routes/about/explainers/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import Semaphore from '$lib/components/Explainers/Semaphore.svelte';
+	import RLN from '$lib/components/Explainers/RLN.svelte';
+</script>
+
+<div class="flex flex-col gap-3 my-5 px-5 mx-auto max-w-[80ch]">
+	<Semaphore />
+	<RLN />
+</div>
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@@ -6,15 +6,32 @@
 <Card>
 	<label class="label">
 		<span>Username</span>
-		<input type="text" class="input" bind:value={$configStore.apiUsername} />
+		<input
+			type="text"
+			class="input"
+			bind:value={$configStore.apiUsername}
+		/>
 	</label>
 	<label class="label">
 		<span>Password</span>
-		<input type="password" class="input" bind:value={$configStore.apiPassword} />
+		<input
+			type="password"
+			class="input"
+			bind:value={$configStore.apiPassword}
+		/>
 	</label>
 </Card>
 <div class="flex gap-1 justify-around">
-	<a class="btn variant-filled-primary" href="/admin/newroom">Create Room</a>
-	<a class="btn variant-filled-primary" href="/admin/join">Join Room</a>
-	<a class="btn variant-filled-primary" href="/admin/invite">Create Invites</a>
+	<a
+		class="btn variant-filled-primary"
+		href="/admin/newroom">Create Room</a
+	>
+	<a
+		class="btn variant-filled-primary"
+		href="/admin/join">Join Room</a
+	>
+	<a
+		class="btn variant-filled-primary"
+		href="/admin/invite">Create Invites</a
+	>
 </div>
--- a/src/routes/admin/invite/+page.svelte
+++ b/src/routes/admin/invite/+page.svelte
@@ -66,9 +66,16 @@
 </script>

 <div class="flex flex-col place-content-center max-w-sm m-auto pt-5">
-	<div id="qr" class="flex flex-col gap-12 place-content-center">
+	<div
+		id="qr"
+		class="flex flex-col gap-12 place-content-center"
+	>
 		<div>
-			<canvas class="variant-soft-secondary" width="250" height="250" />
+			<canvas
+				class="variant-soft-secondary"
+				width="250"
+				height="250"
+			/>
 			<p>no code generated yet</p>
 		</div>
 	</div>
@@ -98,7 +105,12 @@
 			<svelte:fragment slot="content"
 				><label class="label">
 					<span># Codes: {numCodes}</span>
-					<input type="range" min="1" max="5" bind:value={numCodes} />
+					<input
+						type="range"
+						min="1"
+						max="5"
+						bind:value={numCodes}
+					/>
 				</label></svelte:fragment
 			>
 		</AccordionItem>
@@ -107,7 +119,12 @@
 			<svelte:fragment slot="content"
 				><label class="label">
 					<span># Uses: {usesLeft ? usesLeft : 'Unlimited'}</span>
-					<input type="range" min="0" max="50" bind:value={usesLeft} />
+					<input
+						type="range"
+						min="0"
+						max="50"
+						bind:value={usesLeft}
+					/>
 				</label></svelte:fragment
 			>
 		</AccordionItem>
@@ -116,7 +133,12 @@
 			<svelte:fragment slot="content"
 				><label class="label">
 					<span>Expiration: {daysFromNow} day(s) ({formatRelative(expiresAt, new Date())})</span>
-					<input type="range" min="1" max="14" bind:value={daysFromNow} />
+					<input
+						type="range"
+						min="1"
+						max="14"
+						bind:value={daysFromNow}
+					/>
 				</label></svelte:fragment
 			>
 		</AccordionItem>
@@ -143,11 +165,19 @@
 			<svelte:fragment slot="content"
 				><label class="label">
 					<span>Api Username</span>
-					<input type="text" class="input" bind:value={$configStore.apiUsername} />
+					<input
+						type="text"
+						class="input"
+						bind:value={$configStore.apiUsername}
+					/>
 				</label>
 				<label class="label">
 					<span>Api Password</span>
-					<input type="password" class="input" bind:value={$configStore.apiPassword} />
+					<input
+						type="password"
+						class="input"
+						bind:value={$configStore.apiPassword}
+					/>
 				</label></svelte:fragment
 			>
 		</AccordionItem>
--- a/src/routes/admin/join/+page.svelte
+++ b/src/routes/admin/join/+page.svelte
@@ -46,7 +46,10 @@

 <div class="flex flex-col place-content-center max-w-sm m-auto pt-5">
 	<div class="border-b border-spacing-3 pb-5 mb-5">
-		<button on:click={getRooms} class="btn variant-outline-primary">Get Rooms</button>
+		<button
+			on:click={getRooms}
+			class="btn variant-outline-primary">Get Rooms</button
+		>
 		<button
 			on:click={joinRooms}
 			class="btn variant-outline-primary"
@@ -72,11 +75,19 @@
 			<svelte:fragment slot="content"
 				><label class="label">
 					<span>Api Username</span>
-					<input type="text" class="input" bind:value={$configStore.apiUsername} />
+					<input
+						type="text"
+						class="input"
+						bind:value={$configStore.apiUsername}
+					/>
 				</label>
 				<label class="label">
 					<span>Api Password</span>
-					<input type="password" class="input" bind:value={$configStore.apiPassword} />
+					<input
+						type="password"
+						class="input"
+						bind:value={$configStore.apiPassword}
+					/>
 				</label></svelte:fragment
 			>
 		</AccordionItem>
--- a/src/routes/admin/newroom/1_RoomName.svelte
+++ b/src/routes/admin/newroom/1_RoomName.svelte
@@ -1,19 +1,26 @@
-<script lang=ts>
+<script lang="ts">
 	import type { RoomFormData } from '$lib/types';
-  import { Step } from '@skeletonlabs/skeleton'
-  export let formData: RoomFormData;
+	import { Step } from '@skeletonlabs/skeleton';
+	export let formData: RoomFormData;
 </script>

-<Step locked={formData.roomName === ''
-|| formData.roomName.startsWith(' ')
-|| formData.roomName.length < 2
-}>
-  <svelte:fragment slot="header">
-    <div class="h3 text-center">Room Name</div>
-    </svelte:fragment>
-    <div class="flex flex-col justify-center w-full">
-      <i class="text-center">Room Name must be between 3 and 32 characters</i>
-      <br>
-      <input name="roomName" maxlength="32" class="text-black w-full" type="text" bind:value={formData.roomName}/>
-    </div>
+<Step
+	locked={formData.roomName === '' ||
+		formData.roomName.startsWith(' ') ||
+		formData.roomName.length < 2}
+>
+	<svelte:fragment slot="header">
+		<div class="h3 text-center">Room Name</div>
+	</svelte:fragment>
+	<div class="flex flex-col justify-center w-full">
+		<i class="text-center">Room Name must be between 3 and 32 characters</i>
+		<br />
+		<input
+			name="roomName"
+			maxlength="32"
+			class="text-black w-full"
+			type="text"
+			bind:value={formData.roomName}
+		/>
+	</div>
 </Step>
--- a/src/routes/admin/newroom/2_MembershipType.svelte
+++ b/src/routes/admin/newroom/2_MembershipType.svelte
@@ -1,57 +1,82 @@
-<script lang=ts>
+<script lang="ts">
 	import type { RoomFormData } from '$lib/types';
-  import { Step } from '@skeletonlabs/skeleton'
+	import { Step } from '@skeletonlabs/skeleton';

-   export let formData: RoomFormData
+	export let formData: RoomFormData;

-  let bandadaFields = false;
+	let bandadaFields = false;

-  function toggleBandadaFields (e: any): void {
-    if (e.target.value === 'BANDADA_GROUP') {
-      bandadaFields = true;
-    } else {
-      bandadaFields = false;
-      formData.bandadaAddress = undefined;
-      formData.bandadaGroupId = undefined;
-      formData.bandadaApiKey = undefined;
-    }
-  }
+	function toggleBandadaFields(e: any): void {
+		if (e.target.value === 'BANDADA_GROUP') {
+			bandadaFields = true;
+		} else {
+			bandadaFields = false;
+			formData.bandadaAddress = undefined;
+			formData.bandadaGroupId = undefined;
+			formData.bandadaApiKey = undefined;
+		}
+	}
 </script>

-<Step locked={
-  bandadaFields === true && (
-    formData.bandadaAddress === undefined ||
-    formData.bandadaGroupId === undefined ||
-    formData.bandadaApiKey === undefined
-  )
-}>
-  <svelte:fragment slot="header">
-    <div class="h3 text-center">Membership Type</div>
-    </svelte:fragment>
-    <div class="flex justify-center">
-      <select name="membershipType" class="text-black" bind:value={formData.membershipType} on:change={toggleBandadaFields}>
-     <option value="IDENTITY_LIST" class="text-black">
-       Identity List
-     </option>
-     <option value="BANDADA_GROUP" class="text-black">
-       Bandada Group
-     </option>
-   </select>
-   </div>
-   {#if bandadaFields === true}
-   <div class="flex flex-col gap-5 content-center justify-items-center">
-     <label for="bandadaAddress">
-           Bandada Address:
-           <input name="bandadaAddress" type="text" class="text-black" bind:value={formData.bandadaAddress}/>
-     </label>
-         <label for="bandadaGroup">
-           Bandada Group Id:
-           <input name="bandadaGroup" type="text" class="text-black"bind:value={formData.bandadaGroupId}/>
-         </label>
-         <label for='bandadaApiKey'>
-           Bandada Api Key:
-           <input name="bandadaApiKey" type="text" class="text-black" bind:value={formData.bandadaApiKey}/>
-         </label>
-        </div>
-      {/if}
+<Step
+	locked={bandadaFields === true &&
+		(formData.bandadaAddress === undefined ||
+			formData.bandadaGroupId === undefined ||
+			formData.bandadaApiKey === undefined)}
+>
+	<svelte:fragment slot="header">
+		<div class="h3 text-center">Membership Type</div>
+	</svelte:fragment>
+	<div class="flex justify-center">
+		<select
+			name="membershipType"
+			class="text-black"
+			bind:value={formData.membershipType}
+			on:change={toggleBandadaFields}
+		>
+			<option
+				value="IDENTITY_LIST"
+				class="text-black"
+			>
+				Identity List
+			</option>
+			<option
+				value="BANDADA_GROUP"
+				class="text-black"
+			>
+				Bandada Group
+			</option>
+		</select>
+	</div>
+	{#if bandadaFields === true}
+		<div class="flex flex-col gap-5 content-center justify-items-center">
+			<label for="bandadaAddress">
+				Bandada Address:
+				<input
+					name="bandadaAddress"
+					type="text"
+					class="text-black"
+					bind:value={formData.bandadaAddress}
+				/>
+			</label>
+			<label for="bandadaGroup">
+				Bandada Group Id:
+				<input
+					name="bandadaGroup"
+					type="text"
+					class="text-black"
+					bind:value={formData.bandadaGroupId}
+				/>
+			</label>
+			<label for="bandadaApiKey">
+				Bandada Api Key:
+				<input
+					name="bandadaApiKey"
+					type="text"
+					class="text-black"
+					bind:value={formData.bandadaApiKey}
+				/>
+			</label>
+		</div>
+	{/if}
 </Step>
--- a/src/routes/admin/newroom/3_RateLimit.svelte
+++ b/src/routes/admin/newroom/3_RateLimit.svelte
@@ -1,18 +1,22 @@
-<script lang=ts>
+<script lang="ts">
 	import type { RoomFormData } from '$lib/types';
-  import { Step } from '@skeletonlabs/skeleton'
-
-  export let formData: RoomFormData;
+	import { Step } from '@skeletonlabs/skeleton';

+	export let formData: RoomFormData;
 </script>

 <Step locked={formData.rateLimit <= 1}>
-  <svelte:fragment slot="header">
-    <div class="h3 text-center">Rate Limit</div>
-  </svelte:fragment>
-  <div class="flex flex-col justify-center w-full">
-    <i>How long the epochs of the room are in seconds</i>
-    <br>
-    <input name="rateLimit" class="text-black" type="number" bind:value={formData.rateLimit}/>
-  </div>
+	<svelte:fragment slot="header">
+		<div class="h3 text-center">Rate Limit</div>
+	</svelte:fragment>
+	<div class="flex flex-col justify-center w-full">
+		<i>How long the epochs of the room are in seconds</i>
+		<br />
+		<input
+			name="rateLimit"
+			class="text-black"
+			type="number"
+			bind:value={formData.rateLimit}
+		/>
+	</div>
 </Step>
--- a/src/routes/admin/newroom/4_MessageLimit.svelte
+++ b/src/routes/admin/newroom/4_MessageLimit.svelte
@@ -1,18 +1,24 @@
-<script lang=ts>
+<script lang="ts">
 	import type { RoomFormData } from '$lib/types';
-  import { Step } from '@skeletonlabs/skeleton'
-
-  export let formData: RoomFormData;
-  </script>
+	import { Step } from '@skeletonlabs/skeleton';

+	export let formData: RoomFormData;
+</script>

 <Step locked={formData.messageLimit <= 1}>
-  <svelte:fragment slot="header">
-    <div class="h3 text-center">User Message Limit</div>
-  </svelte:fragment>
-  <div class="flex flex-col justify-center w-full">
-    <i class="text-center">Number of messages a user can send in an epoch before being rate limited</i>
-    <br>
-    <input name="messageLimit" class="text-black" type="number" bind:value={formData.messageLimit}/>
-  </div>
+	<svelte:fragment slot="header">
+		<div class="h3 text-center">User Message Limit</div>
+	</svelte:fragment>
+	<div class="flex flex-col justify-center w-full">
+		<i class="text-center"
+			>Number of messages a user can send in an epoch before being rate limited</i
+		>
+		<br />
+		<input
+			name="messageLimit"
+			class="text-black"
+			type="number"
+			bind:value={formData.messageLimit}
+		/>
+	</div>
 </Step>
--- a/src/routes/admin/newroom/5_ClaimCodes.svelte
+++ b/src/routes/admin/newroom/5_ClaimCodes.svelte
@@ -1,17 +1,22 @@
-<script lang=ts>
+<script lang="ts">
 	import type { RoomFormData } from '$lib/types';
-  import { Step } from '@skeletonlabs/skeleton'
+	import { Step } from '@skeletonlabs/skeleton';

-  export let formData: RoomFormData;
-  </script>
+	export let formData: RoomFormData;
+</script>

 <Step locked={formData.claimCodes < 0}>
-  <svelte:fragment slot="header">
-    <div class="h3 text-center">Number of Claim Codes for {formData.roomName}</div>
-  </svelte:fragment>
-  <div class="flex flex-col justify-center w-full">
-    <i class="text-center">Number of claim codes to create for {formData.roomName}</i>
-    <br>
-    <input name="claimCodes"class="text-black" type="number" bind:value={formData.claimCodes}/>
-  </div>
+	<svelte:fragment slot="header">
+		<div class="h3 text-center">Number of Claim Codes for {formData.roomName}</div>
+	</svelte:fragment>
+	<div class="flex flex-col justify-center w-full">
+		<i class="text-center">Number of claim codes to create for {formData.roomName}</i>
+		<br />
+		<input
+			name="claimCodes"
+			class="text-black"
+			type="number"
+			bind:value={formData.claimCodes}
+		/>
+	</div>
 </Step>
--- a/src/routes/admin/newroom/6_RoomType.svelte
+++ b/src/routes/admin/newroom/6_RoomType.svelte
@@ -1,19 +1,29 @@
-<script lang=ts>
+<script lang="ts">
 	import type { RoomFormData } from '$lib/types';
-  import { Step } from '@skeletonlabs/skeleton'
-
-  export let formData: RoomFormData;
-  </script>
+	import { Step } from '@skeletonlabs/skeleton';

+	export let formData: RoomFormData;
+</script>

 <Step>
-  <svelte:fragment slot="header">
-    <div class="h3 text-center">Public or Private</div>
-  </svelte:fragment>
-  <div class="flex flex-col justify-center w-full">
-    <select name="roomType" class="text-black" bind:value={formData.roomType}>
-      <option value="PUBLIC" selected class="text-black">Public</option>
-      <option value="PRIVATE" class="text-black">Private</option>
-    </select>
-  </div>
+	<svelte:fragment slot="header">
+		<div class="h3 text-center">Public or Private</div>
+	</svelte:fragment>
+	<div class="flex flex-col justify-center w-full">
+		<select
+			name="roomType"
+			class="text-black"
+			bind:value={formData.roomType}
+		>
+			<option
+				value="PUBLIC"
+				selected
+				class="text-black">Public</option
+			>
+			<option
+				value="PRIVATE"
+				class="text-black">Private</option
+			>
+		</select>
+	</div>
 </Step>
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -3,7 +3,10 @@
 	import Sidebar from './Sidebar.svelte';
 </script>

-<section id="chat-wrapper" class="bg-surface-50-900-token">
+<section
+	id="chat-wrapper"
+	class="bg-surface-50-900-token"
+>
 	<Sidebar />
 	<ChatRoom />
 </section>
--- a/src/routes/chat/ChatRoom.svelte
+++ b/src/routes/chat/ChatRoom.svelte
@@ -142,7 +142,10 @@
 </script>

 {#if $currentSelectedRoom}
-	<div id="chat" class="grid grid-rows-[auto,1fr,auto]">
+	<div
+		id="chat"
+		class="grid grid-rows-[auto,1fr,auto]"
+	>
 		<ChatRoomHeader
 			{connected}
 			{currentEpoch}
@@ -153,16 +156,34 @@
 		/>
 		{#if $configStore.experience == Experiences.Chat}
 			{#key $currentSelectedRoom.roomId}
-				<Conversation bind:scrollChatBottom={scrollChatToBottom} {roomRateLimit} />
+				<Conversation
+					bind:scrollChatBottom={scrollChatToBottom}
+					{roomRateLimit}
+				/>
 			{/key}
-			<InputPrompt {socket} {connected} {currentEpoch} {userMessageLimit} {roomId} />
+			<InputPrompt
+				{socket}
+				{connected}
+				{currentEpoch}
+				{userMessageLimit}
+				{roomId}
+			/>
 		{:else if $configStore.experience == Experiences.Draw}
 			<Draw />
 		{:else}
 			{#key $currentSelectedRoom.roomId}
-				<Conversation bind:scrollChatBottom={scrollChatToBottom} {roomRateLimit} />
+				<Conversation
+					bind:scrollChatBottom={scrollChatToBottom}
+					{roomRateLimit}
+				/>
 			{/key}
-			<InputPrompt {socket} {connected} {currentEpoch} {userMessageLimit} {roomId} />
+			<InputPrompt
+				{socket}
+				{connected}
+				{currentEpoch}
+				{userMessageLimit}
+				{roomId}
+			/>
 		{/if}
 		<!-- Conversation -->

@@ -171,8 +192,9 @@
 {:else}
 	<div class="grid place-content-center">
 		<h6 class="h2 text-center mb-10">You aren't in any rooms...yet</h6>
-		<a href="https://discord.gg/brJQ36KVxk" class="h2 btn btn-sm variant-ringed-secondary"
-			>Join our Discord for help</a
+		<a
+			href="https://discord.gg/brJQ36KVxk"
+			class="h2 btn btn-sm variant-ringed-secondary">Join our Discord for help</a
 		>
 	</div>
 {/if}
--- a/src/routes/chat/ChatRoomHeader.svelte
+++ b/src/routes/chat/ChatRoomHeader.svelte
@@ -29,12 +29,21 @@
 		<div class="flex flex-row">
 			<span class="place-self-center mr-2">
 				{#if connected}
-					<FullCircle class="w-4 h-4 text-green-500" title="Connected to Server" />
+					<FullCircle
+						class="w-4 h-4 text-green-500"
+						title="Connected to Server"
+					/>
 				{:else}
-					<FullCircle class="w-4 h-4 text-error-500" title="Not Connected to Server" />
+					<FullCircle
+						class="w-4 h-4 text-error-500"
+						title="Not Connected to Server"
+					/>
 				{/if}
 			</span>
-			<h2 class="h5 text-secondary-800-100-token" title={roomId}>
+			<h2
+				class="h5 text-secondary-800-100-token"
+				title={roomId}
+			>
 				{#if encrypted}
 					<span title="Room is encrypted">🔒</span>
 				{/if}
@@ -68,14 +77,23 @@
 			)}/${epochLengthSeconds}s]`}
 		>
 			{#if $configStore.beta === true}<ExperienceMenu />{/if}
-			<AP health={userMessageLimit - $messagesSent} maxHealth={userMessageLimit} />
+			<AP
+				health={userMessageLimit - $messagesSent}
+				maxHealth={userMessageLimit}
+			/>
 			{#if $configStore.anxietyBar === false}
-				<Clock time={timeToNextEpoch} maxTime={epochLengthSeconds} />
+				<Clock
+					time={timeToNextEpoch}
+					maxTime={epochLengthSeconds}
+				/>
 			{/if}
 		</div>
 	</div>
 	{#if $configStore.anxietyBar === true}
-		<ProgressBar value={timeToNextEpoch} max={epochLengthSeconds} />
+		<ProgressBar
+			value={timeToNextEpoch}
+			max={epochLengthSeconds}
+		/>
 	{/if}
 </header>

--- a/src/routes/chat/Conversation.svelte
+++ b/src/routes/chat/Conversation.svelte
@@ -64,13 +64,13 @@
 					<footer class="flex justify-between items-center text-xs md:text-sm pb-1">
 						<small class="opacity-50 text-surface-600-300-token mr-2 md:mr-4">{getTime(msg)}</small>
 						{#if msg.epoch}
-							<small class="hidden md:block opacity-50 text-surface-500-400-token"
-								>epoch: {msg.epoch}</small
-							>
+							<small class="hidden md:block opacity-50 text-surface-500-400-token">
+								epoch: {msg.epoch}
+							</small>
 						{:else}
-							<small class="hidden md:block opacity-70 text-error-500-400-token"
-								>SYSTEM MESSAGE</small
-							>
+							<small class="hidden md:block opacity-70 text-error-500-400-token">
+								SYSTEM MESSAGE
+							</small>
 						{/if}
 					</footer>
 				</div>
--- a/src/routes/chat/ExperienceMenu.svelte
+++ b/src/routes/chat/ExperienceMenu.svelte
@@ -16,7 +16,10 @@
 	}
 </script>

-<span on:click={nextExperience} class="flex flex-row ms-2 place-items-center">
+<span
+	on:click={nextExperience}
+	class="flex flex-row ms-2 place-items-center"
+>
 	{#if experience == Experiences.Chat}
 		<Palette class="w-5 h-5" />
 	{:else if experience == Experiences.Draw}
--- a/src/routes/chat/Sidebar.svelte
+++ b/src/routes/chat/Sidebar.svelte
@@ -4,7 +4,10 @@
 	import { numberServers } from '$lib/stores';
 </script>

-<div id="sidebar" class="hidden sm:grid grid-rows-[auto_1fr_auto] border-r border-surface-500/30">
+<div
+	id="sidebar"
+	class="hidden sm:grid grid-rows-[auto_1fr_auto] border-r border-surface-500/30"
+>
 	<!-- Header -->
 	{#if $numberServers > 1}
 		<header class="border-b border-surface-500/30 p-1">
--- a/src/routes/console/Console.svelte
+++ b/src/routes/console/Console.svelte
@@ -28,7 +28,10 @@
 			<TrashCan />
 		</button>
 	</header>
-	<section class="p-4 overflow-y-scroll overflow-x-hidden" bind:this={elemChat}>
+	<section
+		class="p-4 overflow-y-scroll overflow-x-hidden"
+		bind:this={elemChat}
+	>
 		{#each $consoleStore.messages as line, idx}
 			<p class={line.type}>{line.message}</p>
 		{/each}
--- a/src/routes/menu/+page.svelte
+++ b/src/routes/menu/+page.svelte
@@ -15,13 +15,13 @@
 				<li id="will-close">
 					<a href="/about">
 						<Information />
-						<span class="flex-auto">About</span>
+						<span class="flex-auto"> About </span>
 					</a>
 				</li>
 				{#if $identityExists}
 					<li id="will-close">
-						<a href="/gateways"
-							><Plus />
+						<a href="/gateways">
+							<Plus />
 							<span class="flex-auto">Join More</span>
 						</a>
 					</li>
--- a/src/routes/settings/debug/+page.svelte
+++ b/src/routes/settings/debug/+page.svelte
@@ -47,7 +47,10 @@
 </script>

 <div class="p-4">
-	<div id="status" class="flex flex-col gap-5">
+	<div
+		id="status"
+		class="flex flex-col gap-5"
+	>
 		<div>
 			<h2 class="h3">configStore</h2>
 			<div>Completed Signup: {JSON.stringify($configStore.signUpStatus.completedSignup)}</div>
@@ -103,8 +106,16 @@
 	</div>

 	<div class="border-t py-2 my-5">
-		<button class="btn variant-outline-primary m-4" on:click={triggerAlert}>Test Alert</button>
-		<select class="select" name="alertType" id="alertType" bind:value={t}>
+		<button
+			class="btn variant-outline-primary m-4"
+			on:click={triggerAlert}>Test Alert</button
+		>
+		<select
+			class="select"
+			name="alertType"
+			id="alertType"
+			bind:value={t}
+		>
 			{#each c as choice}
 				<option value={choice}>{choice}</option>
 			{/each}
--- a/src/routes/settings/ui/ActionRepresentation.svelte
+++ b/src/routes/settings/ui/ActionRepresentation.svelte
@@ -33,15 +33,30 @@
 			<div class="border-t mt-3 pt-2 mb-2 sm:mb-4 flex flex-col place-items-center">
 				<div class="my-2">
 					<h6 class="h6 text-center mb-2">Demo</h6>
-					<AP {health} {maxHealth} />
+					<AP
+						{health}
+						{maxHealth}
+					/>
 				</div>
-				<RangeSlider name="range-slider" bind:value={health} max={maxHealth} step={1} ticked>
+				<RangeSlider
+					name="range-slider"
+					bind:value={health}
+					max={maxHealth}
+					step={1}
+					ticked
+				>
 					<div class="flex justify-between items-center">
 						<div class="font-bold">Health</div>
 						<div class="text-xs">{health} / {maxHealth}</div>
 					</div>
 				</RangeSlider>
-				<RangeSlider name="range-slider" bind:value={maxHealth} max={10} step={1} ticked>
+				<RangeSlider
+					name="range-slider"
+					bind:value={maxHealth}
+					max={10}
+					step={1}
+					ticked
+				>
 					<div class="flex justify-between items-center">
 						<div class="font-bold">Max Health</div>
 						<div class="text-xs">{maxHealth} / {10}</div>
--- a/src/routes/settings/ui/AnxietyBar.svelte
+++ b/src/routes/settings/ui/AnxietyBar.svelte
@@ -31,7 +31,12 @@
 				epoch. This was hidden because it gives some users anxiety, but we wanted to leave it as an
 				option for those that think its fun.
 			</p>
-			<select id="anxiety-bar" class="select py-4" size="2" bind:value={$configStore.anxietyBar}>
+			<select
+				id="anxiety-bar"
+				class="select py-4"
+				size="2"
+				bind:value={$configStore.anxietyBar}
+			>
 				<option value={true}>Anxiety On</option>
 				<option value={false}>Anxiety Off (Default)</option>
 			</select>
@@ -45,7 +50,12 @@
 					<span class="place-self-center mr-2">
 						<FullCircle class="w-4 h-4 text-green-500" />
 					</span>
-					<h2 class="h5 text-secondary-800-100-token" title="Example Room">Example Room</h2>
+					<h2
+						class="h5 text-secondary-800-100-token"
+						title="Example Room"
+					>
+						Example Room
+					</h2>
 					<div class="hidden sm:block ms-2 text-xs font-mono self-center">
 						[{timeToNextEpoch.toFixed(1)}/{epochLengthSeconds}s]
 					</div>
@@ -63,14 +73,23 @@
 					class="flex flex-row place-content-center"
 					title={`These are action points, you get 4 messages every 20 seconds`}
 				>
-					<AP health={4} maxHealth={6} />
+					<AP
+						health={4}
+						maxHealth={6}
+					/>
 					{#if $configStore.anxietyBar === false}
-						<Clock time={timeToNextEpoch} maxTime={epochLengthSeconds} />
+						<Clock
+							time={timeToNextEpoch}
+							maxTime={epochLengthSeconds}
+						/>
 					{/if}
 				</div>
 			</div>
 			{#if $configStore.anxietyBar === true}
-				<ProgressBar value={timeToNextEpoch} max={epochLengthSeconds} />
+				<ProgressBar
+					value={timeToNextEpoch}
+					max={epochLengthSeconds}
+				/>
 			{/if}
 		</header>
 	</section>
--- a/src/routes/signup/+page.svelte
+++ b/src/routes/signup/+page.svelte
@@ -4,7 +4,7 @@

 	import { goto } from '$app/navigation';
 	import { Stepper, Step, getModalStore, type ModalSettings } from '@skeletonlabs/skeleton';
-	import { createIdentity, addConsoleMessage, unlockPadlock } from '$lib/utils';
+	import { createIdentity, addConsoleMessage, unlockPadlock, getIdentityBackup } from '$lib/utils';
 	import Lock from 'svelte-material-icons/Lock.svelte';
 	import Introduction from '$lib/components/Onboarding/Introduction.svelte';
 	import SetPassword from '$lib/components/Security/SetPasswordInput.svelte';
@@ -18,6 +18,20 @@
 	const modalStore = getModalStore();
 	let restoreIdentity = false;

+	function createAndBackupIdentity() {
+		createIdentity();
+		$configStore.signUpStatus.identityBackedUp = true;
+		const id = getIdentityBackup();
+		const a = document.createElement('a');
+		const url = 'data:text/json;charset=utf-8,' + encodeURIComponent(id!);
+		a.href = url;
+		a.download = 'Discreetly_Identity.json';
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(url);
+	}
+
 	function unlock() {
 		const modal: ModalSettings = {
 			type: 'prompt',
@@ -95,7 +109,7 @@
 		{#if $identityExists == null}
 			<div class="flex flex-col gap-3">
 				<button
-					on:click={() => createIdentity()}
+					on:click={() => createAndBackupIdentity()}
 					class="btn btn-lg variant-ghost-success"
 					type="button"
 				>
@@ -108,7 +122,7 @@
 					class="btn variant-ghost-primary"
 					type="button"
 				>
-					<span><BackupRestore /></span>
+					<span id="backup"><BackupRestore /></span>
 					<span>Restore Identity</span>
 				</button>
 			</div>
@@ -121,8 +135,12 @@
 				<Lock class="h3 m-auto" />
 			</div>
 		{:else}
-			<p class="h4 text-center mt-5">
-				Backup your identity and then press next to continue, last step
+			<p class="text-xl text-center">
+				We have <span class="text-primary-500">downloaded your identity</span> for you
+				<span class="text-primary-500">save it somewhere safe</span>
+			</p>
+			<p class="text-xl text-center">
+				and then <span class="text-success-500">press next</span> to continue, last step
 			</p>
 			<Backup />
 		{/if}
--- a/static/idcNullifier/verification_key.json
+++ b/static/idcNullifier/verification_key.json
@@ -1,104 +1,95 @@
 {
- "protocol": "groth16",
- "curve": "bn128",
- "nPublic": 3,
- "vk_alpha_1": [
-  "20491192805390485299153009773594534940189261866228447918068658471970481763042",
-  "9383485363053290200918347156157836566562967994039712273449902621266178545958",
-  "1"
- ],
- "vk_beta_2": [
-  [
-   "6375614351688725206403948262868962793625744043794305715222011528459656738731",
-   "4252822878758300859123897981450591353533073413197771768651442665752259397132"
-  ],
-  [
-   "10505242626370262277552901082094356697409835680220590971873171140371331206856",
-   "21847035105528745403288232691147584728191162732299865338377159692350059136679"
-  ],
-  [
-   "1",
-   "0"
-  ]
- ],
- "vk_gamma_2": [
-  [
-   "10857046999023057135944570762232829481370756359578518086990519993285655852781",
-   "11559732032986387107991004021392285783925812861821192530917403151452391805634"
-  ],
-  [
-   "8495653923123431417604973247489272438418190587263600148770280649306958101930",
-   "4082367875863433681332203403145435568316851327593401208105741076214120093531"
-  ],
-  [
-   "1",
-   "0"
-  ]
- ],
- "vk_delta_2": [
-  [
-   "17133313670231667487736004097020484843226717741134543071681595192213542404569",
-   "18673817425770621231905673683883346893405144776326422608131560048409738195792"
-  ],
-  [
-   "11821370524809748218863201748748705728394144148925669901234409589641087093424",
-   "18513628196399124885663344181867643312766015533146283344455531540544551221665"
-  ],
-  [
-   "1",
-   "0"
-  ]
- ],
- "vk_alphabeta_12": [
-  [
-   [
-    "2029413683389138792403550203267699914886160938906632433982220835551125967885",
-    "21072700047562757817161031222997517981543347628379360635925549008442030252106"
-   ],
-   [
-    "5940354580057074848093997050200682056184807770593307860589430076672439820312",
-    "12156638873931618554171829126792193045421052652279363021382169897324752428276"
-   ],
-   [
-    "7898200236362823042373859371574133993780991612861777490112507062703164551277",
-    "7074218545237549455313236346927434013100842096812539264420499035217050630853"
-   ]
-  ],
-  [
-   [
-    "7077479683546002997211712695946002074877511277312570035766170199895071832130",
-    "10093483419865920389913245021038182291233451549023025229112148274109565435465"
-   ],
-   [
-    "4595479056700221319381530156280926371456704509942304414423590385166031118820",
-    "19831328484489333784475432780421641293929726139240675179672856274388269393268"
-   ],
-   [
-    "11934129596455521040620786944827826205713621633706285934057045369193958244500",
-    "8037395052364110730298837004334506829870972346962140206007064471173334027475"
-   ]
-  ]
- ],
- "IC": [
-  [
-   "10540353245037691655240058832465935071147222378795512774896416883563614389198",
-   "20042286059857913285646233979306226083538103143380748863555356103197961213823",
-   "1"
-  ],
-  [
-   "5831260214145524146501320942030802135386415386731869532840770699430145685903",
-   "10936406497477698856797103676487112559914492317404578945377836522823774186039",
-   "1"
-  ],
-  [
-   "1295407852409244811850984901965423450287105807829809873962419792828349329577",
-   "11301654800484264796111478656697951131719015244071014736702281514571505462297",
-   "1"
-  ],
-  [
-   "6823739927950557742246913693052072220213742766782370219666937126411380340633",
-   "19878777316727584245579797737044924949420447706770682437221414501064053790692",
-   "1"
-  ]
- ]
-}
+	"protocol": "groth16",
+	"curve": "bn128",
+	"nPublic": 3,
+	"vk_alpha_1": [
+		"20491192805390485299153009773594534940189261866228447918068658471970481763042",
+		"9383485363053290200918347156157836566562967994039712273449902621266178545958",
+		"1"
+	],
+	"vk_beta_2": [
+		[
+			"6375614351688725206403948262868962793625744043794305715222011528459656738731",
+			"4252822878758300859123897981450591353533073413197771768651442665752259397132"
+		],
+		[
+			"10505242626370262277552901082094356697409835680220590971873171140371331206856",
+			"21847035105528745403288232691147584728191162732299865338377159692350059136679"
+		],
+		["1", "0"]
+	],
+	"vk_gamma_2": [
+		[
+			"10857046999023057135944570762232829481370756359578518086990519993285655852781",
+			"11559732032986387107991004021392285783925812861821192530917403151452391805634"
+		],
+		[
+			"8495653923123431417604973247489272438418190587263600148770280649306958101930",
+			"4082367875863433681332203403145435568316851327593401208105741076214120093531"
+		],
+		["1", "0"]
+	],
+	"vk_delta_2": [
+		[
+			"17133313670231667487736004097020484843226717741134543071681595192213542404569",
+			"18673817425770621231905673683883346893405144776326422608131560048409738195792"
+		],
+		[
+			"11821370524809748218863201748748705728394144148925669901234409589641087093424",
+			"18513628196399124885663344181867643312766015533146283344455531540544551221665"
+		],
+		["1", "0"]
+	],
+	"vk_alphabeta_12": [
+		[
+			[
+				"2029413683389138792403550203267699914886160938906632433982220835551125967885",
+				"21072700047562757817161031222997517981543347628379360635925549008442030252106"
+			],
+			[
+				"5940354580057074848093997050200682056184807770593307860589430076672439820312",
+				"12156638873931618554171829126792193045421052652279363021382169897324752428276"
+			],
+			[
+				"7898200236362823042373859371574133993780991612861777490112507062703164551277",
+				"7074218545237549455313236346927434013100842096812539264420499035217050630853"
+			]
+		],
+		[
+			[
+				"7077479683546002997211712695946002074877511277312570035766170199895071832130",
+				"10093483419865920389913245021038182291233451549023025229112148274109565435465"
+			],
+			[
+				"4595479056700221319381530156280926371456704509942304414423590385166031118820",
+				"19831328484489333784475432780421641293929726139240675179672856274388269393268"
+			],
+			[
+				"11934129596455521040620786944827826205713621633706285934057045369193958244500",
+				"8037395052364110730298837004334506829870972346962140206007064471173334027475"
+			]
+		]
+	],
+	"IC": [
+		[
+			"10540353245037691655240058832465935071147222378795512774896416883563614389198",
+			"20042286059857913285646233979306226083538103143380748863555356103197961213823",
+			"1"
+		],
+		[
+			"5831260214145524146501320942030802135386415386731869532840770699430145685903",
+			"10936406497477698856797103676487112559914492317404578945377836522823774186039",
+			"1"
+		],
+		[
+			"1295407852409244811850984901965423450287105807829809873962419792828349329577",
+			"11301654800484264796111478656697951131719015244071014736702281514571505462297",
+			"1"
+		],
+		[
+			"6823739927950557742246913693052072220213742766782370219666937126411380340633",
+			"19878777316727584245579797737044924949420447706770682437221414501064053790692",
+			"1"
+		]
+	]
+}
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -4,7 +4,6 @@ import { vitePreprocess } from '@sveltejs/kit/vite';

 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-
 	preprocess: [vitePreprocess({})],
 	kit: {
 		adapter: adapter({