feat: credential detail page

src/lib/fakeCredentials.js

@@ -19,18 +19,18 @@ function getRandomExpirationDate() {
 }
 
 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' }
-];
+		{ id: '1', name: 'Over 13', description: 'This credential proves that you are over 13 years old' },
+		{ id: '2', name: 'Over 18', description: 'This credential proves that you are over 18 years old' },
+		{ id: '3', name: 'Age range 18-65', description: 'This credential proves that you are in a specific age range (18-65)' },
+		{ id: '4', name: 'Residency proof', description: 'This credential proves your residency status' },
+		{ id: '5', name: 'Address proof', description: 'This credential serves as proof of your address' },
+		{ id: '6', name: 'Email proof', description: 'This credential proves the validity of your email address' },
+		{ id: '7', name: 'Diploma', description: 'This credential proves that you have earned a diploma' },
+		{ id: '8', name: 'Driving license', description: 'This credential serves as proof of your driving license' },
+		{ id: '9', name: 'Vaccination', description: 'This credential proves that you have been vaccinated' },
+		{ id: '10', name: 'Proof of employment', description: 'This credential proves your employment status' },
+		{ id: '11', name: 'Proof of humanity', description: 'This credential proves that you are alive' }
+	];
 
 const fakeCredentials = credentialsInfo.map((credential) => ({
 	...credential,

src/routes/(protected)/[id]/+layout.ts

@@ -1,6 +1,12 @@
+import fakeCredentials from '$lib/fakeCredentials.js';
 import { getService } from '$lib/slangroom/services.js';
 
 export const load = async ({ params }) => {
-	const credential = await getService(params.id);
+	const id = params['id'];
+	if (id.length < 3) {
+		const credential = fakeCredentials.find((c) => c.id === id);
+		return { credential };
+	}
+	const credential = await getService(id);
 	return { credential };
 };

src/routes/(protected)/[id]/detail/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let data: any;
+	const { credential } = data;
+</script>
+
+<ion-header>
+	<ion-toolbar>
+		<ion-title>CREDENTIAL DETAIL</ion-title>
+	</ion-toolbar>
+</ion-header>
+<ion-content fullscreen class="ion-padding">
+	<d-credential-card {...credential} />
+	<div class="bg-tab fixed bottom-0 left-0 w-full">
+		<d-credential-detail {...credential}>
+			<div class="mb-2">
+				{#if credential.id.length < 3}
+					<d-button color="accent" href="/scan">Verify credential</d-button>
+				{:else}
+					<d-button color="accent" href={`/${credential.id}/credential-offer`}
+						>Get this credential</d-button
+					>
+				{/if}
+			</div>
+		</d-credential-detail>
+	</div>
+</ion-content>

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

@@ -11,13 +11,15 @@
 	<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}
-			/>
+			<a href="/{credential.id}/detail">
+				<d-credential-card
+					name={credential.name}
+					issuer={credential.issuer}
+					description={credential.description}
+					expiration-date={credential.expirationDate}
+					verified={credential.verified}
+				/>
+			</a>
 		{/each}
 	</div>
 	<ScanButton />