refactor(frontend): 💡 format with prettier

frontend/src/app.css

@@ -1,56 +1,78 @@
 /* https://www.joshwcomeau.com/css/custom-css-reset/ */
 
 /* 1. Use a more-intuitive box-sizing model */
-*, *::before, *::after {
-    box-sizing: border-box;
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
 }
 
 /* 2. Remove default margin */
 * {
-    margin: 0;
+	margin: 0;
 }
 
 body {
-    /* 3. Add accessible line-height */
-    line-height: 1.5;
-    /* 4. Improve text rendering */
-    -webkit-font-smoothing: antialiased;
-    font-family: arial, "sans-serif";
+	/* 3. Add accessible line-height */
+	line-height: 1.5;
+	/* 4. Improve text rendering */
+	-webkit-font-smoothing: antialiased;
+	font-family: arial, 'sans-serif';
 }
 
-button, input {
-    border: none;
-    outline: none;
-    box-shadow: none;
+button,
+input {
+	outline: none;
+	box-shadow: none;
+	border: none;
 }
 
 /* 5. Improve media defaults */
-img, picture, video, canvas, svg {
-    display: block;
-    max-width: 100%;
+img,
+picture,
+video,
+canvas,
+svg {
+	display: block;
+	max-width: 100%;
 }
 
 /* 6. Inherit fonts for form controls */
-input, button, textarea, select {
-    font: inherit;
+input,
+button,
+textarea,
+select {
+	font: inherit;
 }
 
 /* 7. Avoid text overflows */
-p, h1, h2, h3, h4, h5, h6 {
-    overflow-wrap: break-word;
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	overflow-wrap: break-word;
 }
 
 /* 8. Improve line wrapping */
 p {
-    text-wrap: pretty;
+	text-wrap: pretty;
 }
-h1, h2, h3, h4, h5, h6 {
-    text-wrap: balance;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	text-wrap: balance;
 }
 
 /*
   9. Create a root stacking context
 */
-#root, #__next {
-    isolation: isolate;
-}
+#root,
+#__next {
+	isolation: isolate;
+}

frontend/src/lib/components/NftTile.svelte

@@ -1,82 +1,88 @@
 <script lang="ts">
-    export let data;
+	export let data
 </script>
 
 <figure class="nft-card">
-    <img src="/0.png" alt="">
-    <button class="claim-button">
-        <span class="index-number">#{data?.serialNumber}</span>
-        <span class="claim-text">Claim</span>
-    </button>
+	<img src="/0.png" alt="" />
+	<button class="claim-button">
+		<span class="index-number">#{data?.serialNumber}</span>
+		<span class="claim-text">Claim</span>
+	</button>
 </figure>
 
 <style>
-    .nft-card {
-        background-color: white;
-        border-radius: 1rem;
-        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-        justify-self: center;
-        padding-bottom: 2rem;
-        position: relative;
-        width: 100%;
-    }
+	.nft-card {
+		position: relative;
+		justify-self: center;
+		box-shadow:
+			0 4px 6px -1px rgb(0 0 0 / 0.1),
+			0 2px 4px -2px rgb(0 0 0 / 0.1);
+		border-radius: 1rem;
+		background-color: white;
+		padding-bottom: 2rem;
+		width: 100%;
+	}
 
-    .nft-card img {
-        border-radius: 1rem;
-        height: fit-content;
-        width: fit-content;
-    }
+	.nft-card img {
+		border-radius: 1rem;
+		width: fit-content;
+		height: fit-content;
+	}
 
-    .claim-button {
-        background-color: rgb(253 242 248); /* pink-50 */
-        border-radius: 0.75rem;
-        bottom: 10px;
-        cursor: pointer;
-        font-size: 0.875rem;
-        height: 40px;
-        overflow: hidden;
-        padding: 0.5rem;
-        position: absolute;
-        right: 10px;
-        text-align: right;
-        text-transform: uppercase;
-        transition: background-color 0.2s ease-in-out;
-        width: 102px;
-    }
+	.claim-button {
+		position: absolute;
+		right: 10px;
+		bottom: 10px;
+		transition: background-color 0.2s ease-in-out;
+		cursor: pointer;
+		border-radius: 0.75rem;
+		background-color: rgb(253 242 248); /* pink-50 */
+		padding: 0.5rem;
+		width: 102px;
+		height: 40px;
+		overflow: hidden;
+		font-size: 0.875rem;
+		text-align: right;
+		text-transform: uppercase;
+	}
 
-    .claim-button:hover {
-        background-color: rgb(239 246 255); /* blue-50 */
-    }
+	.claim-button:hover {
+		background-color: rgb(239 246 255); /* blue-50 */
+	}
 
-    .index-number {
-        padding: 0.5rem;
-        position: absolute;
-        right: 0;
-        top: 0;
-        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-    }
+	.index-number {
+		position: absolute;
+		top: 0;
+		right: 0;
+		transition:
+			transform 0.2s ease-in-out,
+			opacity 0.2s ease-in-out;
+		padding: 0.5rem;
+	}
 
-    .claim-button:hover .index-number {
-        opacity: 0;
-        transform: translateY(-40px);
-    }
+	.claim-button:hover .index-number {
+		transform: translateY(-40px);
+		opacity: 0;
+	}
 
-    .claim-text {
-        align-items: center;
-        display: flex;
-        font-size: 0.75rem;
-        font-weight: bold;
-        height: 100%;
-        opacity: 0;
-        padding: 0.5rem;
-        position: absolute;
-        right: 0;
-        top: 100%;
-        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-    }
+	.claim-text {
+		display: flex;
+		position: absolute;
+		top: 100%;
+		right: 0;
+		align-items: center;
+		opacity: 0;
+		transition:
+			transform 0.2s ease-in-out,
+			opacity 0.2s ease-in-out;
+		padding: 0.5rem;
+		height: 100%;
+		font-weight: bold;
+		font-size: 0.75rem;
+	}
 
-    .claim-button:hover .claim-text {
-        opacity: 1;
-        transform: translateY(-40px);
-    }
+	.claim-button:hover .claim-text {
+		transform: translateY(-40px);
+		opacity: 1;
+	}
 </style>

frontend/src/routes/+layout.svelte

@@ -14,10 +14,10 @@
 
 <style>
 	header {
+		position: fixed;
+		z-index: 9;
 		background: #f8f8f8;
 		padding: 6px 12px;
-		position: fixed;
 		width: 100%;
-		z-index: 9;
 	}
-</style>
+</style>