✨ Add file upload UI to page

.env

@@ -23,5 +23,6 @@ APP_LIKE_CO_URL=https://app.rinkeby.like.co
 NFT_MARKETPLACE_URL=https://likecoin-nft-marketplace-testnet.netlify.app
 ISCN_TOOLS_URL=https://likecoin-iscn-nft-tools-testnet.netlify.app
 ARWEAVE_ENDPOINT=https://gateway.irys.xyz
+IRYS_NODE_URL=https://devnet.irys.xyz
 
 NUXT_PUBLIC_SCRIPTS_CRISP_ID=4e80ff4a-e151-4393-a09b-14e6342ad11d

.env.production

@@ -23,5 +23,6 @@ APP_LIKE_CO_URL=https://app.like.co
 NFT_MARKETPLACE_URL=https://likecoin.github.io/likecoin-nft-marketplace
 ISCN_TOOLS_URL=https://likecoin.github.io/iscn-nft-tools
 ARWEAVE_ENDPOINT=https://arweave.net
+IRYS_NODE_URL=https://node1.irys.xyzz
 
 NUXT_PUBLIC_SCRIPTS_CRISP_ID=5c009125-5863-4059-ba65-43f177ca33f7

app.vue

@@ -41,15 +41,19 @@ import { storeToRefs } from 'pinia'
 import { useBookStoreApiStore } from '~/stores/book-store-api'
 import { useCollectionStore } from '~/stores/collection'
 import { useUIStore } from '~/stores/ui'
+import { useWalletStore } from '~/stores/wallet'
 
+const walletStore = useWalletStore()
 const { SITE_URL } = useRuntimeConfig().public
 const bookStoreApiStore = useBookStoreApiStore()
 const collectionStore = useCollectionStore()
 
-const { restoreAuthSession, fetchBookListing } = bookStoreApiStore
+const { restoreAuthSession, fetchBookListing, clearSession } = bookStoreApiStore
 const { listNFTBookCollections } = collectionStore
+const { disconnect } = walletStore
 const { isRestoringSession, isAuthenticated } = storeToRefs(bookStoreApiStore)
 const uiStore = useUIStore()
+const toast = useToast()
 
 const isMobileMenuOpen = computed({
   get: () => uiStore.isSiteMenuOpen,
@@ -95,7 +99,23 @@ useSeoMeta({
 })
 
 onMounted(async () => {
-  await restoreAuthSession()
+  try {
+    await restoreAuthSession()
+  } catch (error) {
+    console.error(error)
+    toast.add({
+      icon: 'i-heroicons-exclamation-circle',
+      title: `${(error as Error).toString()}, please re-login`,
+      timeout: 0,
+      color: 'red',
+      ui: {
+        title: 'text-red-400 dark:text-red-400'
+      }
+    })
+    disconnect()
+    clearSession()
+  }
+
   if (isAuthenticated.value) {
     await Promise.all([
       fetchBookListing(),

components/ImgPreviewer.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    :class="[
+      'flex',
+      'justify-center',
+      { 'w-[138px]': props.size === 'large' },
+      { 'w-[80px]': props.size === 'small' },
+      'mr-[16px]',
+      'overflow-hidden',
+    ]"
+  >
+    <img
+      v-if="computedFileType === 'image'"
+      :class="['w-full', 'h-auto', 'object-contain', 'rounded-[8px]']"
+      :src="props.fileData"
+    >
+    <UIcon
+      v-else-if="computedFileType === 'epub'"
+      name="i-heroicons-book-open"
+      class="text-dark-gray w-[40px] h-[40px]"
+    />
+    <UIcon
+      v-else
+      name="i-heroicons-document"
+      class="text-dark-gray w-[40px] h-[40px]"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFileUpload } from '~/composables/useFileUpload'
+
+type FileTypes = 'image' | 'pdf' | 'epub' | 'other'
+
+const { getFileType } = useFileUpload()
+
+const props = defineProps({
+  fileType: {
+    type: String as PropType<FileTypes>,
+    default: undefined
+  },
+  fileData: { type: String, default: undefined },
+  size: { type: String, default: 'large' }
+})
+
+const computedFileType = computed(() => {
+  // If formatted fileType is provided as a prop, use it directly
+  if (props.fileType) { return props.fileType }
+
+  // Extract MIME type from data URL
+  const dataUrl = props.fileData || ''
+  const mimeType = dataUrl.split(';')[0].split(':')[1] || ''
+
+  // Use getFileType function to determine the file type based on MIME type
+  return getFileType(mimeType)
+})
+</script>

components/SiteMenu.vue

@@ -66,6 +66,11 @@ const items = computed(() => [
   {
     label: 'Publish NFT Book',
     links: [
+      // {
+      //   label: '我要出版',
+      //   icon: 'i-heroicons-sparkles',
+      //   to: { name: 'publish-nft-book' }
+      // },
       {
         label: 'Print New Books',
         icon: 'i-heroicons-sparkles',