Merge branch 'main' into chore/vue3/composite

.github/workflows/build.yml

@@ -29,3 +29,6 @@ jobs:
 
       - name: Run Build
         run: pnpm generate
+
+      - run: wc -l ./.nuxt/dist/server/client.manifest.mjs
+      - run: stat -c "%s" ./.nuxt/dist/server/client.manifest.mjs

components/Navbar.vue

@@ -35,6 +35,7 @@
             <div
               class="fixed-stack is-flex is-align-items-center is-justify-content-space-between p-2">
               <Search
+                v-if="isMobile"
                 ref="mobilSearchRef"
                 hide-filter
                 class="is-flex-grow-1 mt-3" />
@@ -71,6 +72,7 @@
         <div class="navbar-start">
           <div v-if="showSearchOnNavbar" class="navbar-item is-expanded">
             <Search
+              v-if="!isMobile"
               class="search-navbar is-flex-grow-1 pb-0 is-hidden-touch"
               hide-filter
               search-column-class="is-flex-grow-1" />
@@ -190,8 +192,6 @@
 import { NeoIcon } from '@kodadot1/brick'
 import { BModalConfig } from 'buefy/types/components'
 
-import KodaBeta from '@/assets/Koda_Beta.svg'
-import KodaBetaDark from '@/assets/Koda_Beta_dark.svg'
 import { ConnectWalletModalConfig } from '@/components/common/ConnectWallet/useConnectWallet'
 import ChainSelectDropdown from '@/components/navbar/ChainSelectDropdown.vue'
 import CreateDropdown from '@/components/navbar/CreateDropdown.vue'
@@ -233,7 +233,9 @@ const isCreateVisible = computed(() => createVisible(urlPrefix.value))
 const isExploreVisible = computed(() => explorerVisible(urlPrefix.value))
 const isLandingPage = computed(() => route.name === 'index')
 
-const logoSrc = computed(() => (isDarkMode.value ? KodaBetaDark : KodaBeta))
+const logoSrc = computed(() =>
+  isDarkMode.value ? '/Koda_Beta_dark.svg' : '/Koda_Beta.svg'
+)
 
 const showSearchOnNavbar = computed(
   () => !isLandingPage.value || !showTopNavbar.value || isBurgerMenuOpened.value

components/collection/drop/DropContainer.vue

@@ -146,15 +146,14 @@
           </NeoButton>
         </div>
         <div class="column">
-          <img :src="unloackableBanner" alt="Unlockable" />
+          <img src="/unlockable-introduce.svg" alt="Unlockable" />
         </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import unloackableBanner from '@/assets/unlockable-introduce.svg'
 import CountdownTimer from '@/components/collection/unlockable/CountdownTimer.vue'
 import ImageSlider from '@/components/collection/unlockable/ImageSlider.vue'
 import UnlockableCollectionInfo from '@/components/collection/unlockable/UnlockableCollectionInfo.vue'

components/collection/unlockable/UnlockableCollectionBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="collection-banner"
-    :style="{ backgroundImage: `url(${unloackableBanner})` }">
+    :style="{ backgroundImage: `url('/unlockable-banner.svg')` }">
     <div class="collection-banner-shadow"></div>
 
     <section class="h-full py-8">
@@ -20,7 +20,6 @@
 
 <script setup lang="ts">
 import HeroButtons from '@/components/collection/unlockable/UnlockableHeroButtons.vue'
-import unloackableBanner from '@/assets/unlockable-banner.svg'
 import { unlockableDesc } from '../unlockable/utils'
 import { generateDropImage } from '@/utils/seoImageGenerator'
 

components/collection/unlockable/UnlockableContainer.vue

@@ -25,7 +25,7 @@
               ><span
                 v-if="mintCountAvailable"
                 class="is-flex is-align-items-center">
-                <img :src="unlockablePulse" />
+                <img src="/unlockable-pulse.svg" />
                 Open</span
               >
             </div>
@@ -125,7 +125,7 @@
           </NeoButton>
         </div>
         <div class="column">
-          <img :src="unloackableBanner" alt="Unlockable" />
+          <img src="/unlockable-introduce.svg" alt="Unlockable" />
         </div>
       </div>
     </div>
@@ -139,8 +139,6 @@ import CountdownTimer from '@/components/collection/unlockable/CountdownTimer.vu
 import ImageSlider from '@/components/collection/unlockable/ImageSlider.vue'
 import UnlockableSlider from '@/components/collection/unlockable/UnlockableSlider.vue'
 import UnlockableSchedule from '@/components/collection/unlockable/UnlockableSchedule.vue'
-import unloackableBanner from '@/assets/unlockable-introduce.svg'
-import unlockablePulse from '@/assets/unlockable-pulse.svg'
 import { doWaifu, getLatestWaifuImages } from '@/services/waifu'
 import { DISPLAY_SLIDE_IMAGE_COUNT, collectionId, countDownTime } from './const'
 import {

components/collection/unlockable/UnlockableLoader.vue

@@ -2,7 +2,7 @@
   <NeoLoading :active.sync="isLoading" is-full-page :can-cancel="canCancel">
     <div class="loading-container py-2">
       <NeoIcon class="close-icon" icon="close" @click.native="closeLoading" />
-      <img :src="unloackableLoaderImg" />
+      <img src="/unlockable-loader.svg" />
       <div
         class="is-flex is-flex-direction-column is-align-items-center px-5 has-text-centered is-capitalized">
         <div class="has-text-weight-bold mb-2">{{ $t('mint.success') }}</div>
@@ -42,7 +42,6 @@
 
 <script lang="ts" setup>
 import { NeoButton, NeoIcon, NeoLoading } from '@kodadot1/brick'
-import unloackableLoaderImg from '@/assets/unlockable-loader.svg'
 
 const props = withDefaults(
   defineProps<{

components/common/shoppingCart/ShoppingCartModal.vue

@@ -61,7 +61,11 @@
         class="is-flex is-justify-content-space-between px-6 py-4 is-flex-direction-column h-full">
         <div
           class="is-flex is-align-items-center is-flex-direction-column pt-8">
-          <img :src="emptyCart" alt="empty cart" width="140px" class="mb-5" />
+          <img
+            src="/empty-cart.png"
+            alt="empty cart"
+            width="140px"
+            class="mb-5" />
           <span class="has-text-weight-bold mb-2">{{
             $t('shoppingCart.emptyCart.line1')
           }}</span>
@@ -97,7 +101,6 @@ import ShoppingCartItemRow from './ShoppingCartItemRow.vue'
 import { sum } from '@/utils/math'
 import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
 
-import emptyCart from '@/assets/empty-cart.png'
 import { totalPriceUsd } from './utils'
 
 const prefrencesStore = usePreferencesStore()

components/drops/TimeTag.vue

@@ -2,7 +2,7 @@
   <div
     class="tag-container is-flex border py-1 px-2 is-justify-content-space-between is-align-items-center">
     <div class="image is-24x24 has-text-centered">
-      <img v-if="isMintingLive" :src="unlockablePulse" />
+      <img v-if="isMintingLive" src="/unlockable-pulse.svg" />
       <NeoIcon v-else icon="calendar-day" pack="far" variant="k-grey" />
     </div>
 
@@ -11,7 +11,6 @@
 </template>
 
 <script lang="ts" setup>
-import unlockablePulse from '@/assets/unlockable-pulse.svg'
 import { NeoIcon } from '@kodadot1/brick'
 const { $i18n } = useNuxtApp()
 const props = defineProps<{

composables/useIcon.ts

@@ -1,18 +1,14 @@
-import bsxToken from '@/assets/token/bsx.svg'
-import dotToken from '@/assets/token/dot.svg'
-import ksmToken from '@/assets/token/ksm.svg'
-
 export const useIcon = () => {
   const getTokenIconBySymbol = (token: string) => {
     switch (token.toLowerCase()) {
       case 'bsx':
-        return bsxToken
+        return '/token/bsx.svg'
       case 'dot':
-        return dotToken
+        return '/token/dot.svg'
       case 'ksm':
-        return ksmToken
+        return '/token/ksm.svg'
       default:
-        return ksmToken
+        return '/token/ksm.svg'
     }
   }
 

composables/useShoppingCartIcon.ts

@@ -1,16 +1,16 @@
-import shoppingCarteDark from '@/assets/shopping-cart-outline-sharp_dark.svg'
-import shoppingCart from '@/assets/shopping-cart-outline-sharp.svg'
-import strikedOutShoppingCart from '@/assets/striked-out-cart-shopping.svg'
-import strikedOutShoppingCartDark from '@/assets/striked-out-cart-shopping_dark.svg'
 import { useShoppingCartStore } from '@/stores/shoppingCart'
 
 export const useShoppingCartIcon = (nftId?: string) => {
   const { isDarkMode } = useTheme()
   const shoppingCartIcon = computed(() =>
-    isDarkMode.value ? shoppingCarteDark : shoppingCart
+    isDarkMode.value
+      ? '/shopping-cart-outline-sharp_dark.svg'
+      : '/shopping-cart-outline-sharp.svg'
   )
   const strikedOutShoppingCartIcon = computed(() =>
-    isDarkMode.value ? strikedOutShoppingCartDark : strikedOutShoppingCart
+    isDarkMode.value
+      ? '/striked-out-cart-shopping_dark.svg'
+      : '/striked-out-cart-shopping.svg'
   )
 
   const cartIcon = computed(() => {

composables/useUnlockableIcon.ts

@@ -1,10 +1,7 @@
-import unloackableDark from '@/assets/unlockable-dark.svg'
-import unloackable from '@/assets/unlockable.svg'
-
 export const useUnlockableIcon = () => {
   const { isDarkMode } = useTheme()
   const unlockableIcon = computed(() =>
-    isDarkMode.value ? unloackableDark : unloackable
+    isDarkMode.value ? '/unlockable-dark.svg' : '/unlockable.svg'
   )
 
   return { unlockableIcon }

layouts/error.vue

@@ -8,9 +8,10 @@
       alt="Internal error cat"
       class="mb-5" />
     <p class="subtitle">
-      If you think this should't happen, report it to us by
+      If you think this shouldn't happen, report it to us by
       <a
         target="_blank"
+        class="is-underlined has-text-k-orange"
         rel="nofollow noopener noreferrer"
         href="https://github.com/kodadot/nft-gallery/issues/new?assignees=&labels=bug&template=bug_report.md&title="
         >creating a bug issue with steps and screenshot to reproduce.</a

libs/ui/src/components/NeoNftCard/NeoNftCard.vue

@@ -117,7 +117,7 @@ withDefaults(
     unloackableIcon?: string
     link?: string
     bindKey?: string
-    showActionOnHover: boolean
+    showActionOnHover?: boolean
   }>(),
   {
     collectionPopoverShowDelay: 500,

pages/qrCode.vue

@@ -11,30 +11,25 @@
 </template>
 
 <script lang="ts" setup>
-import Twitter from '@/assets/qrCode/twitter.png'
-import Instagram from '@/assets/qrCode/instagram.png'
-import Discord from '@/assets/qrCode/discord.png'
-import Github from '@/assets/qrCode/github.png'
-
 const qrCodeList = [
   {
     title: 'Discord',
-    img: Discord,
+    img: '/qrCode/discord.png',
     link: 'https://discord.gg/u6ymnbz4PR',
   },
   {
     title: 'Twitter',
-    img: Twitter,
+    img: '/qrCode/twitter.png',
     link: 'https://twitter.com/KodaDot',
   },
   {
     title: 'Github',
-    img: Github,
+    img: '/qrCode/github.png',
     link: 'https://github.com/kodadot/nft-gallery',
   },
   {
     title: 'Instagram',
-    img: Instagram,
+    img: '/qrCode/instagram.png',
     link: 'https://instagram.com/kodadot.xyz',
   },
 ]

styles/abstracts/_fonts.scss

@@ -3,13 +3,13 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url('~assets/fonts/WorkSans-VariableFont_wght.ttf');
+  src: url('/fonts/WorkSans-VariableFont_wght.ttf');
 }
 
 @font-face {
   font-family: 'Work Sans';
   font-style: bold;
   font-weight: 700;
   font-display: swap;
-  src: url('~assets/fonts/WorkSans-VariableFont_wght.ttf');
+  src: url('/fonts/WorkSans-VariableFont_wght.ttf');
 }

utils/config/wallets.ts

@@ -1,14 +1,6 @@
 import { isMobileDevice } from '~/utils/extension'
 
 // wallet logo
-import logoPolkadotjs from '@/assets/partners/logo-polkadot-js.png'
-import logoClover from '@/assets/partners/logo-clover.png'
-import logoLedger from '@/assets/partners/logo-ledger.svg'
-import logoMathWallet from '@/assets/partners/logo-mathwallet.png'
-import logoNova from '@/assets/partners/logo-nova.png'
-import logoSubWallet from '@/assets/partners/logo-subwallet.svg'
-import logoTalisman from '@/assets/partners/logo-talisman.svg'
-import logoEnkrypt from '@/assets/partners/logo-enkrypt.png'
 import { BaseDotsamaWallet } from './wallets/BaseDotsamaWallet'
 
 export interface WalletConfig {
@@ -69,30 +61,30 @@ const buildWalletConfig = (
 export const WalletConfigMap: IWalletConfigMap = {
   [SupportWalletExtension.PolkadotJs]: buildWalletConfig(
     SupportWalletExtension.PolkadotJs,
-    logoPolkadotjs,
+    '/partners/logo-polkadot-js.png',
     'Polkadot.js',
     'https://polkadot.js.org/extension/',
     'https://www.youtube.com/watch?v=r-fAy7Ta_vY',
     true
   ),
   [SupportWalletExtension.Clover]: buildWalletConfig(
     SupportWalletExtension.Clover,
-    logoClover,
+    '/partners/logo-clover.png',
     'CLV Wallet',
     'https://chrome.google.com/webstore/detail/clv-wallet/nhnkbkgjikgcigadomkphalanndcapjk',
     'https://docs.clv.org/use-clv-wallet/clv-extension-wallet',
     true
   ),
   [SupportWalletExtension.Ledger]: buildWalletConfig(
     SupportWalletExtension.Ledger,
-    logoLedger,
+    '/partners/logo-ledger.svg',
     'Ledger',
     'https://www.ledger.com/ledger-live',
     'https://www.ledger.com/ledger-live'
   ),
   [SupportWalletExtension.Math]: buildWalletConfig(
     SupportWalletExtension.Math,
-    logoMathWallet,
+    '/partners/logo-mathwallet.png',
     'Math Wallet',
     'https://mathwallet.org/en-us/',
     'https://blog.mathwallet.org/?p=540',
@@ -101,7 +93,7 @@ export const WalletConfigMap: IWalletConfigMap = {
   ),
   [SupportWalletExtension.Nova]: buildWalletConfig(
     SupportWalletExtension.Nova,
-    logoNova,
+    '/partners/logo-nova.png',
     'Nova',
     'https://novawallet.io/',
     'https://novawallet.io/',
@@ -110,7 +102,7 @@ export const WalletConfigMap: IWalletConfigMap = {
   ),
   [SupportWalletExtension.SubWallet]: buildWalletConfig(
     SupportWalletExtension.SubWallet,
-    logoSubWallet,
+    '/partners/logo-subwallet.svg',
     'SubWallet',
     'https://chrome.google.com/webstore/detail/subwallet/onhogfjeacnfoofkfgppdlbmlmnplgbn?hl=en&authuser=0',
     'https://connect.subwallet.app/#/welcome',
@@ -119,15 +111,15 @@ export const WalletConfigMap: IWalletConfigMap = {
   ),
   [SupportWalletExtension.Talisman]: buildWalletConfig(
     SupportWalletExtension.Talisman,
-    logoTalisman,
+    '/partners/logo-talisman.svg',
     'Talisman',
     'https://app.talisman.xyz/spiritkeys',
     'https://app.talisman.xyz/',
     true
   ),
   [SupportWalletExtension.Enkrypt]: buildWalletConfig(
     SupportWalletExtension.Enkrypt,
-    logoEnkrypt,
+    '/partners/logo-enkrypt.png',
     'Enkrypt',
     'https://www.enkrypt.com/#downloads',
     'https://www.enkrypt.com/',