Skip to content

Commit

Permalink
feat(frontend): 🎸 rework nft detail page layout
Browse files Browse the repository at this point in the history
uses type of work for the main heading & subsections with headings
  • Loading branch information
apttx committed Jan 7, 2025
1 parent 54abffc commit 08830ed
Showing 1 changed file with 77 additions and 13 deletions.
90 changes: 77 additions & 13 deletions frontend/src/routes/certificates/[serialNumber]/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,16 +1,77 @@
<script lang="ts">
import containerStyles from '$lib/css/container.module.css'
import navigationLinkStyles from '$lib/css/navigationLink.module.css'
import { contractId, nftTokenId } from '$lib/deployment.js'
import HashConnectLoader from '$lib/hashconnect/HashConnectLoader.svelte'
import { associateWithToken } from '$lib/hedera/collection/associate'
import { claimNftWithExecutor } from '$lib/hedera/collection/claim.js'
import { getDecimalLatitudeLongitude } from '$lib/swissGrid.js'
import Claim from 'lucide-svelte/icons/file-down'
import Associate from 'lucide-svelte/icons/handshake'
let { data } = $props()
const decimalLatitudeLongitude = $derived(
getDecimalLatitudeLongitude({
E: data.nft.certificate.swissGridE,
N: data.nft.certificate.swissGridN,
}),
)
const mapSearchParams = $derived.by(() => {
const urlSearchParams = new URLSearchParams()
const bbox = `${
decimalLatitudeLongitude.longitude - 0.01
},${decimalLatitudeLongitude.latitude - 0.01},${
decimalLatitudeLongitude.longitude + 0.01
},${decimalLatitudeLongitude.latitude + 0.01}`
urlSearchParams.set('bbox', bbox)
const marker = `${decimalLatitudeLongitude.latitude},${decimalLatitudeLongitude.longitude}`
urlSearchParams.set('marker', marker)
return urlSearchParams
})
</script>

<main class={containerStyles.container}>
<h1>{data.nft.name} #{data.nft.serialNumber}</h1>
<h1>{data.nft.certificate.typeOfNaturalObject}</h1>

<time datetime={data.nft.certificate.dateOfWork}>
{new Date(data.nft.certificate.dateOfWork).toLocaleDateString()}
</time>
<p>{data.nft.certificate.typeOfWork}</p>

<p>Operations manager: {data.nft.certificate.operationsManager}</p>

<h2>Effect on biodiversity</h2>
<p>{data.nft.certificate.effectOnBiodiversity}</p>

<h2>Location</h2>

<p>
Coordinates

{data.nft.certificate.swissGridE?.toLocaleString()} / {data.nft.certificate.swissGridN?.toLocaleString()}
</p>

<figure>
<iframe
title="{data.nft.certificate.typeOfWork} on the map"
width="100%"
height="auto"
src="https://www.openstreetmap.org/export/embed.html?{mapSearchParams.toString()}"
class="map"
></iframe>
<small>
<a
href="https://www.openstreetmap.org/#map=8/{decimalLatitudeLongitude.latitude}/{decimalLatitudeLongitude.longitude}"
>
View on OpenStreetMap
</a>
</small>
</figure>

<h2>NFT</h2>
<HashConnectLoader>
{#snippet withAccountInformation({ hashConnect })}
{#if hashConnect.accountInformation.hasAssociatedWithToken}
Expand All @@ -23,8 +84,11 @@
executeTransaction: hashConnect.session.executeTransaction,
})
}}
class="{navigationLinkStyles.navigationLink} {navigationLinkStyles.withIconRight}"
>
Claim
Claim this NFT

<Claim aria-hidden="true" />
</button>
{:else}
<button
Expand All @@ -38,29 +102,29 @@
hashConnect.accountInformation.hasAssociatedWithToken =
associateWithTokenResult.hasAssociatedWithToken
}}
class="{navigationLinkStyles.navigationLink} {navigationLinkStyles.withIconRight}"
>
Associate with BIDI

<Associate aria-hidden="true" />
</button>
{/if}
{/snippet}
</HashConnectLoader>

<img src={data.nft.imageUrl} alt="Image of certificate #{data.nft.serialNumber}" />

<p>{new Date(data.nft.certificate.dateOfWork).toLocaleDateString()}</p>
<p>{data.nft.certificate.swissGridE} / {data.nft.certificate.swissGridN}</p>
<p>{data.nft.certificate.operationsManager}</p>
<p>{data.nft.certificate.typeOfNaturalObject}</p>
<p>{data.nft.certificate.typeOfWork}</p>
<p>{data.nft.certificate.effectOnBiodiversity}</p>
</main>

<style>
h1 {
padding-top: 3rem;
}
img {
margin-top: 1rem;
}
h2 {
margin-top: 2rem;
}
.map {
aspect-ratio: 1;
}
</style>

0 comments on commit 08830ed

Please sign in to comment.