modal tweaking

Author: aggre

src/ui/components/Checkout/ModalCheckout.vue

@@ -12,7 +12,6 @@ const props = defineProps<{
 	modalClose?: () => void
 	name: string | undefined
 	description: string | undefined
-	image: HTMLImageElement | undefined
 	imageSrc: string | undefined
 	videoSrc: string | undefined
 }>()
@@ -141,13 +140,13 @@ onMounted(async () => {
 			</h3>
 			<!-- image -->
 			<img
-				v-if="!image && imageSrc"
+				v-if="imageSrc"
 				:src="imageSrc"
 				class="z-10 max-h-60 min-h-full max-w-60 object-contain @xl/clb_result_modal:max-h-none @xl/clb_result_modal:max-w-xl"
 			/>
 			<!-- video -->
 			<video
-				v-if="!image && !imageSrc && videoSrc"
+				v-if="!imageSrc && videoSrc"
 				class="max-w-60 rounded"
 				autoplay
 				muted
@@ -198,6 +197,7 @@ onMounted(async () => {
 					{{ i18n('Home') }}
 				</a>
 				<button
+					v-if="false /* HIDDEN FOR NOW */"
 					@click="modalClose"
 					class="hs-button is-filled rounded-lg border px-12 py-4 text-base @4xl/clb_result_modal:py-6"
 				>

src/ui/components/Checkout/Result.vue

@@ -1,10 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, ref, type ComputedRef, computed } from 'vue'
-import {
-	type UndefinedOr,
-	whenDefined,
-	whenDefinedAll,
-} from '@devprotocol/util-ts'
+import { type UndefinedOr, whenDefinedAll } from '@devprotocol/util-ts'
 import { JsonRpcProvider } from 'ethers'
 import Skeleton from '../Skeleton/Skeleton.vue'
 import { clientsSTokens } from '@devprotocol/dev-kit'
@@ -52,7 +48,6 @@ const tokenURI = ref<
 		]
 	}>
 >()
-const image = ref<HTMLImageElement>()
 const htmlDescription: ComputedRef<UndefinedOr<string>> = computed(() => {
 	return (
 		tokenURI.value?.description && markdownToHtml(tokenURI.value.description)
@@ -82,13 +77,6 @@ onMounted(async () => {
 		client.tokenURI(Number(id))
 	)
 	tokenURI.value = metadata
-	whenDefined(metadata?.image, (src) => {
-		const img = new Image()
-		img.onload = () => {
-			image.value = img
-		}
-		img.src = src
-	})
 	console.log({ metadata })
 
 	// Modal Open
@@ -104,10 +92,6 @@ onMounted(async () => {
 				class="-mx-8 grid gap-8 bg-dp-white-300 p-6 md:mx-auto md:w-full md:rounded-md"
 			>
 				<div class="flex flex-col gap-6">
-					<p class="font-mono font-bold">
-						{{ i18n('Minted') }} <span class="text-black/50">#{{ id }}</span>
-					</p>
-
 					<!-- me -->
 					<Modal
 						:eoa="eoa"
@@ -117,7 +101,6 @@ onMounted(async () => {
 						:attrs="{
 							name: tokenURI?.name,
 							description: htmlDescription,
-							image: image,
 							imageSrc,
 							videoSrc,
 						}"
@@ -129,31 +112,20 @@ onMounted(async () => {
 
 					<div class="rounded-lg border border-black/20 bg-black/10 p-4">
 						<img
-							v-if="!image && imageSrc"
+							v-if="imageSrc"
 							:src="imageSrc"
 							class="h-auto w-full rounded object-cover object-center sm:h-full sm:w-full"
 						/>
-						<img
-							v-if="image"
-							:src="image.src"
-							:width="image.width"
-							:height="image.height"
-							class="h-auto w-full rounded object-cover object-center sm:h-full sm:w-full"
-						/>
 						<!-- video -->
 						<video
-							v-if="!image && !imageSrc && videoSrc"
+							v-if="!imageSrc && videoSrc"
 							class="w-full rounded"
 							autoplay
 							muted
 						>
 							<source :src="videoSrc" type="video/mp4" />
 							Your browser does not support the video tag.
 						</video>
-						<Skeleton
-							v-if="image === undefined"
-							class="mx-auto aspect-square h-full w-full"
-						/>
 					</div>
 					<span>
 						<h3 class="break-all text-sm text-black/50">

src/ui/components/Checkout/i18n/index.ts

@@ -49,10 +49,6 @@ export const Strings = {
 		en: ([currency]) => `Pay with ${currency}`,
 		ja: ([currency]) => `次の貨幣で支払う：${currency}`,
 	},
-	Minted: {
-		en: 'Minted',
-		ja: '発行されました',
-	},
 	AutomaticStaking: {
 		en: ([amount]) => `${amount} DEV will be staked automatically.`,
 		ja: ([amount]) => `${amount} DEVは自動的にステーキングされます。`,

src/ui/components/Modal.vue

@@ -43,27 +43,25 @@ html:has(dialog[open]) {
 </style>
 
 <template>
-	<div>
-		<dialog
-			ref="dialog"
-			class="fixed inset-0 flex items-center justify-center overflow-y-auto backdrop:bg-black/60"
-			:class="{ hidden: !isVisible }"
-		>
-			<Transition>
-				<div class="relative m-auto w-full py-4">
-					<component
-						:eoa="eoa"
-						:modalClose="modalClose"
-						v-show="isVisible"
-						:is="modalContent"
-						v-bind="attrs"
-					>
-						<template #after:description>
-							<slot name="after:description" />
-						</template>
-					</component>
-				</div>
-			</Transition>
-		</dialog>
-	</div>
+	<dialog
+		ref="dialog"
+		class="fixed inset-0 flex items-center justify-center overflow-y-auto backdrop:bg-black/60"
+		:class="{ hidden: !isVisible }"
+	>
+		<Transition>
+			<div class="relative m-auto w-full py-4">
+				<component
+					:eoa="eoa"
+					:modalClose="modalClose"
+					v-show="isVisible"
+					:is="modalContent"
+					v-bind="attrs"
+				>
+					<template #after:description>
+						<slot name="after:description" />
+					</template>
+				</component>
+			</div>
+		</Transition>
+	</dialog>
 </template>