feat: correct typography. Sort data in home. Show credentials. (#101)

package.json

@@ -65,7 +65,7 @@
 		"@capacitor/preferences": "^5.0.6",
 		"@capacitor/status-bar": "5.0.6",
 		"@efstajas/svelte-stepper": "^0.1.5",
-		"@fontsource/poppins": "^5.0.8",
+		"@fontsource-variable/gantari": "^5.0.9",
 		"@ionic/core": "^7.4.3",
 		"@slangroom/core": "^1.6.0",
 		"@slangroom/http": "^1.6.0",

src/lib/fakeCredentials.js

@@ -1,19 +1,42 @@
-const fakeCredentials = [
-		{
-			"title": "Over 18",
-			"issuedBy": "ItGov",
-			"link": "0"
-		},
-		{
-			"title": "Degree in Biology",
-			"issuedBy": "Venice University",
-			"link": "1"
-		},
-		{
-			"title": "Driving license b",
-			"issuedBy": "motorization",
-			"link": "2"
-		}
-	]
+function getRandomIssuer() {
+	const issuers = ['Didroom', 'Forkbomb BV', 'Italian Government', 'Random Authority A', 'Random Authority B'];
+	return issuers[Math.floor(Math.random() * issuers.length)];
+}
 
-export default fakeCredentials
+function getRandomExpirationDate() {
+	const currentDate = new Date();
+	const futureDate = new Date(
+		currentDate.getFullYear() + Math.floor(Math.random() * 5),
+		Math.floor(Math.random() * 12),
+		Math.floor(Math.random() * 28) + 1
+	);
+
+	const year = futureDate.getFullYear();
+	const month = (futureDate.getMonth() + 1).toString().padStart(2, '0');
+	const day = futureDate.getDate().toString().padStart(2, '0');
+
+	return `${year}-${day}-${month}`;
+}
+
+const credentialsInfo = [
+	{ name: 'Over 13', description: 'This credential proves that you are over 13 years old' },
+	{ name: 'Over 18', description: 'This credential proves that you are over 18 years old' },
+	{ name: 'Age range 18-65', description: 'This credential proves that you are in a specific age range (18-65)' },
+	{ name: 'Residency proof', description: 'This credential proves your residency status' },
+	{ name: 'Address proof', description: 'This credential serves as proof of your address' },
+	{ name: 'Email proof', description: 'This credential proves the validity of your email address' },
+	{ name: 'Diploma', description: 'This credential proves that you have earned a diploma' },
+	{ name: 'Driving license', description: 'This credential serves as proof of your driving license' },
+	{ name: 'Vaccination', description: 'This credential proves that you have been vaccinated' },
+	{ name: 'Proof of employment', description: 'This credential proves your employment status' },
+	{ name: 'Proof of humanity', description: 'This credential proves that you are alive' }
+];
+
+const fakeCredentials = credentialsInfo.map((credential) => ({
+	...credential,
+	issuer: getRandomIssuer(),
+	expirationDate: getRandomExpirationDate(),
+	verified: Boolean(Math.random() < 0.6) // 80% chance of being verified
+}));
+
+export default fakeCredentials;

src/lib/slangroom/index.ts

@@ -77,11 +77,7 @@ const apiById = async (
 };
 
 // WARNING: not safe against injection
-const api = async (
-	url: string,
-	token?: string,
-	rest?: FormData | Record<string, string>
-): Promise<PBResponse> => {
+const api = async (url: string, token?: string, rest?: FormData | Record<string, string>): Promise<PBResponse> => {
 	const data: SlangroomApiData = {
 		pb: PB,
 		...rest
@@ -152,7 +148,7 @@ export const updateProfile = async (req: SlangroomRequest<FormData | Record<stri
 		}
 	});
 	// TODO: check errors
-	return res.result;
+	return { status: res.status, result: res.result };
 };
 
 export const getTemplates = (req?: Partial<SlangroomRequest>): SlangroomResponse<PBResponse> => {

src/lib/slangroom/services.ts

@@ -38,7 +38,9 @@ Given I have a 'string dictionary' named 'http_result'
 Then print data
 `,
 			{
-				data: { path: `${PUBLIC_BACKEND_URL}/api/collections/services/records?expand=issuer` }
+				data: {
+					path: `${PUBLIC_BACKEND_URL}/api/collections/services/records?expand=issuer&sort=-updated&filter=(organization='6snnqkixx6eszue')`
+				}
 			}
 		);
 		return res.result.http_result;

src/lib/tabs/TabPage.svelte

@@ -2,21 +2,19 @@
 	import type { Tab } from '.';
 
 	export let tab: Tab;
-	export let title: string | undefined = undefined;
+	export let title: string;
 </script>
 
 <ion-tab {tab}>
-	{#if title}
-		<ion-header>
-			<ion-toolbar>
-				<ion-title>
-					{title}
-				</ion-title>
-			</ion-toolbar>
-		</ion-header>
-	{/if}
+	<ion-header>
+		<ion-toolbar>
+			<ion-title>{title}</ion-title>
+		</ion-toolbar>
+	</ion-header>
 
 	<ion-content fullscreen>
-		<slot />
+		<div class="p-4">
+			<slot />
+		</div>
 	</ion-content>
 </ion-tab>

src/routes/(auth)/unlock/+page.svelte

@@ -41,7 +41,7 @@
 
 	async function testUnlock() {
 		await unlockApp();
-		await goto('/wallet');
+		await goto('/home');
 	}
 </script>
 

src/routes/(protected)/home/+page.svelte

@@ -9,7 +9,12 @@
 		<ion-spinner />
 	{:then res}
 		{@const services = res.result.items}
-		<div class="flex flex-col gap-2 px-4">
+		<d-heading>
+			<h1>Claim credential</h1>
+		</d-heading>
+		<d-text size="l"> <p class="pb-4">Scan QR code to claim credential or request one below</p></d-text>
+
+		<div class="flex flex-col gap-2">
 			{#each services as service}
 				<d-credential-service name={service.name} issuer={service.issuer} href={`/request/${service.id}`} />
 			{/each}

src/routes/(protected)/wallet/+page.svelte

@@ -1,15 +1,24 @@
 <script lang="ts">
 	import TabPage from '$lib/tabs/TabPage.svelte';
 	import ScanButton from '$lib/components/molecules/ScanButton.svelte';
-	import Card from '$lib/components/molecules/Card.svelte';
 	import fakeCredentials from '$lib/fakeCredentials';
 </script>
 
 <TabPage tab="wallet" title="WALLET">
-	{#each fakeCredentials as credential}
-		<Card title={credential.title} content={credential.issuedBy}>
-			<ion-button href="/scan">Verify</ion-button>
-		</Card>
-	{/each}
+	<d-heading>
+		<h1>My issued credentials</h1>
+	</d-heading>
+	<d-text size="l"> <p class="pb-4">Explore and manage your verified credentials</p></d-text>
+	<div class="flex flex-col gap-2">
+		{#each fakeCredentials as credential}
+			<d-credential-card
+				name={credential.name}
+				issuer={credential.issuer}
+				description={credential.description}
+				expiration-date={credential.expirationDate}
+				verified={credential.verified}
+			/>
+		{/each}
+	</div>
 	<ScanButton />
 </TabPage>

src/routes/+layout.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { setupIonicBase } from 'ionic-svelte';
+	import '@fontsource-variable/gantari';
 
 	setupIonicBase();
 
-	import '@fontsource/poppins';
 	import 'ionic-svelte/components/all';
 	import '../theme/variables.css';
 	import '../theme/custom.css';
@@ -13,7 +13,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/@didroom/components@latest/dist/didroom-components/didroom-components.esm.js"
+		src="https://cdn.jsdelivr.net/npm/@didroom/components/dist/didroom-components/didroom-components.esm.js"
 	></script>
 	<link
 		rel="stylesheet"

src/routes/+page.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export const load = async () => {
-	throw redirect(301, '/wallet');
+	throw redirect(301, '/home');
 };

src/theme/custom.css

@@ -1,12 +1,13 @@
-ion-content::part(background) {
-	background-color: var(--surface);
-}
-
-ion-text {
-	color: var(--on-primary);
-}
-
-ion-button::part(native) {
-	background-color: var(--inverted-primary);
-    color: var(--inverted-on-primary)
+.material-symbols-rounded {
+	font-family: 'Material Symbols Rounded';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 24px; /* Preferred icon size */
+	display: inline-block;
+	line-height: 1;
+	text-transform: none;
+	letter-spacing: normal;
+	word-wrap: normal;
+	white-space: nowrap;
+	direction: ltr;
 }