refactored cards and server maps

packages/frontend/src/lib/button.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { ButtonI } from './types';
+	export let button: ButtonI;
+</script>
+
+<a
+	href={button.link}
+	class="btn btn-lg px-4 d-inline-flex align-items-center {button.class
+		? button.class
+		: 'btn-primary'}"
+	type="button"
+>
+	{button.text}
+</a>

packages/frontend/src/lib/card.svelte

@@ -1,31 +1,18 @@
 <script lang="ts">
+	import type { ButtonI } from './types';
+	import Button from './button.svelte';
 	export let title: string;
-	export let content: string;
-	export let buttons: button[];
-
-	interface button {
-		link: string;
-		text: string;
-		class?: string;
-	}
+	export let buttons: ButtonI[] = [];
 </script>
 
 <div class="m-4 px-5 py-4 text-center bg-body-tertiary rounded-2">
 	<h2 class="text-body-emphasis m-3">{title}</h2>
 	<div class="col-lg-8 mx-auto fs-5 text-muted">
-		{@html content}
+		<slot />
 	</div>
 	<div class="d-inline-flex gap-5 my-3">
 		{#each buttons as button}
-			<a
-				href={button.link}
-				class="btn btn-lg px-4 d-inline-flex align-items-center {button.class
-					? button.class
-					: 'btn-primary'}"
-				type="button"
-			>
-				{button.text}
-			</a>
+			<Button {button} />
 		{/each}
 	</div>
 </div>

packages/frontend/src/lib/stores.ts

@@ -5,7 +5,7 @@ import { browser } from '$app/environment';
 export const serverListStore = storable(['http://localhost:3001/api/'], 'servers');
 
 // This is what gets populated after querying the serverListStore, with the server's information, public rooms available, etc.
-export const serverDataStore = storable([], 'serverData');
+export const serverDataStore = storable({}, 'serverData');
 
 // JUST an index to the serverDataStore, so we can keep track of which server we're currently connected to
 export const selectedServer = storable({}, 'selectedServer');
@@ -14,7 +14,7 @@ export const selectedServer = storable({}, 'selectedServer');
 export const messageStore = sessionable({}, 'messages');
 
 // Stores the user's identity // TODO THIS NEEDS TO BE AN ENCRYPTED SEMAPHORE IDENTITY IN THE FUTURE
-export const identityStore = storable([], 'identity');
+export const identityStore = storable({}, 'identity');
 
 export function storable(data: any, storagePath = 'storable') {
 	const store = writable(data);

packages/frontend/src/lib/types.ts

@@ -10,6 +10,12 @@ import type {
 	Server
 } from '../../../protocol-interfaces/src/main';
 
+interface ButtonI {
+	link: string;
+	text: string;
+	class?: string;
+}
+
 export type {
 	RoomI,
 	MessageI,
@@ -19,5 +25,6 @@ export type {
 	SystemMessageI,
 	IdentityCommitmentT,
 	RLNContractI,
-	Server
+	Server,
+	ButtonI
 };

packages/frontend/src/lib/utils.ts

@@ -3,7 +3,7 @@ import { randomBigInt, genId, str2BigInt } from '../../../protocol-interfaces/sr
 import { poseidon1 } from 'poseidon-lite/poseidon1';
 import { Group } from '@semaphore-protocol/group';
 import type { Identity } from '@semaphore-protocol/identity';
-import type { MessageI, RoomI } from './types';
+import type { MessageI, RoomI, ServerI } from './types';
 import { poseidon2 } from 'poseidon-lite/poseidon2';
 
 const wasmPath = '/rln/circuit.wasm';
@@ -48,4 +48,21 @@ async function genProof(room: RoomI, message: string, identity: Identity): Promi
 	});
 }
 
-export { genProof, randomBigInt, genId };
+async function fetchServer(server_url: string): Promise<ServerI | void> {
+	console.debug(`Fetching server ${server_url}`);
+	return fetch(server_url, {
+		method: 'GET',
+		headers: {
+			'Access-Control-Allow-Origin': 'http://localhost:*'
+		}
+	})
+		.then(async (response): Promise<ServerI> => {
+			const serverData: ServerI = await response.json();
+			return serverData;
+		})
+		.catch((err) => {
+			console.error(err);
+		});
+}
+
+export { genProof, randomBigInt, genId, fetchServer };

packages/frontend/src/routes/+layout.svelte

@@ -5,6 +5,8 @@
 	import AppFooter from './AppFooter.svelte';
 	import { identityStore, serverListStore, serverDataStore, selectedServer } from '$lib/stores';
 	import { Identity } from '@semaphore-protocol/identity';
+	import type { ServerI } from '$lib/types';
+	import { fetchServer } from '$lib/utils';
 
 	(BigInt.prototype as any).toJSON = function () {
 		return this.toString();
@@ -16,23 +18,18 @@
 	}
 
 	onMount(async () => {
-		$serverListStore.forEach((server, index) => {
-			console.debug(`Fetching server ${server}`);
-			fetch(server, {
-				method: 'GET',
-				headers: {
-					'Access-Control-Allow-Origin': 'http://localhost:*'
-				}
-			})
-				.then(async (response) => {
-					$serverDataStore[index] = await response.json();
-				})
-				.catch((err) => {
-					console.error(err);
-				});
+		$serverListStore.forEach((server: string) => {
+			console.log('fetching server data');
+			fetchServer(server).then((data) => {
+				console.log('setting server data');
+				console.log(data);
+				console.log(server);
+				$serverDataStore[server] = data as ServerI;
+				console.log($serverDataStore);
+			});
 		});
 		if ($selectedServer.name == undefined) {
-			$selectedServer = 0;
+			$selectedServer = $serverListStore[0];
 		}
 	});
 

packages/frontend/src/routes/AppHeader.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { ServerI } from '$lib/types';
-	import { serverDataStore, selectedServer } from '$lib/stores';
+	import { serverDataStore, selectedServer, serverListStore } from '$lib/stores';
 	export let setSelectedServer: (server: number) => void;
 </script>
 
@@ -35,25 +35,27 @@
 						role="button"
 						data-bs-toggle="dropdown"
 						aria-expanded="false"
+						title={String($serverDataStore[$selectedServer].name + ' (' + $selectedServer + ')')}
 					>
 						{$serverDataStore[$selectedServer].name}
 					</a>
 					<ul class="dropdown-menu">
-						{#each $serverDataStore as server, index}
+						{#each $serverListStore as key}
 							<li>
 								<div
-									aria-label={'select ' + server.name}
+									aria-label={'select ' + $serverDataStore[key].name}
 									class="dropdown-item"
-									on:click={() => setSelectedServer(index)}
+									on:click={() => setSelectedServer(key)}
 									on:keydown={(event) => {
 										if (event.key === 'Enter' || event.key === ' ') {
-											setSelectedServer(index);
+											setSelectedServer(key);
 										}
 									}}
 									role="button"
 									tabindex="0"
+									title={String($serverDataStore[key].name + ' (' + key + ')')}
 								>
-									{server.name}
+									{$serverDataStore[key].name}
 								</div>
 							</li>
 						{/each}

packages/frontend/src/routes/signup/+layout.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import { identityStore } from '$lib/stores';
+
+	// TODO Check if Identity is created
+	// TODO Check if Gates exist
 </script>
 
 <ul class="nav nav-underline d-flex justify-content-evenly mt-3 mb-4">

packages/frontend/src/routes/signup/+page.svelte

@@ -12,7 +12,8 @@
 			class: 'btn-primary'
 		}
 	];
-	let content = `This app is a little different from what you're used to.`;
 </script>
 
-<Card title="Welcome to Discreetly" {content} buttons={links} />
+<Card title="Welcome to Discreetly" buttons={links}>
+	This app is a little different from what you're used to.
+</Card>

packages/frontend/src/routes/signup/backup/+page.svelte

@@ -7,7 +7,6 @@
 			class: 'btn-primary'
 		}
 	];
-	let content = `TODO`;
 </script>
 
-<Card title="Backup Your Identity" {content} buttons={links} />
+<Card title="Backup Your Identity" buttons={links}>TODO</Card>

packages/frontend/src/routes/signup/ceremony/+page.svelte

@@ -12,7 +12,6 @@
 			class: 'btn-primary'
 		}
 	];
-	let content = `TODO`;
 </script>
 
-<Card title="Generate Your Identity" {content} buttons={links} />
+<Card title="Generate Your Identity" buttons={links}>TODO</Card>

packages/frontend/src/routes/signup/gates/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Card from '$lib/card.svelte';
+
 	let links = [
 		{
 			link: '/signup/ceremony',
@@ -7,7 +8,29 @@
 			class: 'btn-primary'
 		}
 	];
-	let content = `TODO`;
+	let code = '';
+
+	function addCode(code: string) {
+		console.log(code);
+	}
 </script>
 
-<Card title="Join Communities" {content} buttons={links} />
+<Card title="Join Communities">
+	Invite Code: <input
+		type="text"
+		placeholder="Invite Code"
+		bind:value={code}
+		on:keydown={(event) => {
+			if (event.key === 'Enter') {
+				event.preventDefault();
+				addCode(code);
+				code = '';
+			} else if (event.key === ' ' || event.key === '-') {
+				event.preventDefault();
+				if (code.length > 0 && code[code.length - 1] !== '-') {
+					code += '-';
+				}
+			}
+		}}
+	/>
+</Card>

packages/protocol-interfaces/src/main.ts

@@ -47,6 +47,7 @@ export interface RoomGroupI {
 }
 
 export interface ServerI {
+  id: bigint;
   name: string;
   version?: string;
   serverInfoEndpoint: string;

packages/server/config/rooms.ts

@@ -80,6 +80,7 @@ export const rooms: RoomGroupI[] = [
 ];
 
 export const serverConfig: ServerI = {
+  id: serverID,
   name: 'Discreetly',
   serverInfoEndpoint: 'localhost:3001',
   messageHandlerSocket: 'http://localhost:3002',