From 8f94bbab3de928cccaea029c83a6aaf10084c6f4 Mon Sep 17 00:00:00 2001
From: roiLeo <medina.leo42@gmail.com>
Date: Mon, 29 May 2023 14:24:33 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9E=96=20remove=20b-image=20component=20(#58?=
 =?UTF-8?q?54)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Co-authored-by: Viki Val <viktorko99@gmail.com>
---
 components/collection/CollectionCard.vue      | 25 ++++---
 .../common/ConnectWallet/WalletMenuItem.vue   |  7 +-
 components/generative/CongratsView.vue        | 18 ++---
 components/series/SeriesTable.vue             |  9 +--
 components/shared/view/BasicImage.vue         | 67 +++++++++++++------
 components/shared/view/SelectableImage.vue    |  8 +--
 .../unique/Collection/Item/CollectionItem.vue |  8 +--
 .../Item/TransferCollectionModal.vue          |  6 +-
 .../unique/Gallery/Item/DangerModal.vue       |  8 +--
 components/unique/graphqlResponseTypes.ts     |  1 -
 10 files changed, 85 insertions(+), 72 deletions(-)

diff --git a/components/collection/CollectionCard.vue b/components/collection/CollectionCard.vue
index 2d0137d131..773b646bce 100644
--- a/components/collection/CollectionCard.vue
+++ b/components/collection/CollectionCard.vue
@@ -3,20 +3,22 @@
     <nuxt-link
       v-if="!isLoading && collection"
       :to="`/${urlPrefix}/collection/${collection.id}`">
-      <BasicImage
-        :src="image"
-        :alt="collection.name"
-        custom-class="collection-card__image-wrapper" />
-
-      <CollectionDetail
-        :nfts="collection.nfts || []"
-        :name="collection.name || ''"
-        :image="image" />
+      <template v-if="!isLoadingMeta">
+        <BasicImage
+          :src="image"
+          :alt="collection.name"
+          custom-class="collection-card__image-wrapper" />
+
+        <CollectionDetail
+          :nfts="collection.nfts || []"
+          :name="collection.name || ''"
+          :image="image" />
+      </template>
     </nuxt-link>
 
     <template v-else>
       <NeoSkeleton no-margin :rounded="false" height="112px" />
-      <CollectionDetail :is-loading="true" :nfts="[]" name="" />
+      <CollectionDetail is-loading :nfts="[]" name="" />
     </template>
   </div>
 </template>
@@ -32,6 +34,7 @@ import CollectionDetail from './CollectionDetail.vue'
 import type { Metadata } from '@/components/rmrk/service/scheme'
 
 const { urlPrefix } = usePrefix()
+const isLoadingMeta = ref(false)
 
 interface Props {
   isLoading?: boolean
@@ -46,11 +49,13 @@ onMounted(async () => {
     return
   }
 
+  isLoadingMeta.value = true
   const metadata = (await processSingleMetadata(
     props.collection.metadata
   )) as Metadata
   image.value = sanitizeIpfsUrl(
     metadata.image || metadata.thumbnailUri || metadata.mediaUri || ''
   )
+  isLoadingMeta.value = false
 })
 </script>
diff --git a/components/common/ConnectWallet/WalletMenuItem.vue b/components/common/ConnectWallet/WalletMenuItem.vue
index bf34d120d1..b09f6499e6 100644
--- a/components/common/ConnectWallet/WalletMenuItem.vue
+++ b/components/common/ConnectWallet/WalletMenuItem.vue
@@ -8,10 +8,11 @@
       <div
         class="is-flex is-justify-content-space-between is-align-items-center">
         <span>
-          <b-image
+          <img
             :src="wallet.img"
-            class="is-32x32 is-inline-block"
-            style="vertical-align: middle"></b-image>
+            :alt="wallet.extensionName"
+            width="32"
+            style="vertical-align: middle" />
           <span class="is-size-6 ml-2 is-capitalized">{{ wallet.name }}</span>
         </span>
 
diff --git a/components/generative/CongratsView.vue b/components/generative/CongratsView.vue
index 0e0bcb3201..21759420d9 100644
--- a/components/generative/CongratsView.vue
+++ b/components/generative/CongratsView.vue
@@ -1,15 +1,14 @@
 <template>
   <section>
-    <br />
     <p class="title is-size-3">Waii you made it! ✨</p>
     <p class="title is-size-4">Your NFT should be ready in 1 minute</p>
     <nuxt-link class="is-size-4 link" :to="`/bsx/collection/${collectionId}`">
       In the meanwhile, click here to check the collection ♥️🍷
     </nuxt-link>
-    <b-image
+    <BasicImage
       src="https://imagedelivery.net/jk5b6spi_m_-9qC4VTnjpg/bafybeifp6l3kqvimdnzymgitv4q67ryodvymx6keihdmudx6vv3syqz2ku/aaa" />
-    <br />
     <SubmitButton
+      class="py-2"
       icon="sync"
       type="is-success"
       label="Start over"
@@ -20,17 +19,10 @@
 
 <script setup lang="ts">
 import { COLLECTION_ID } from './promptBuilder'
+import BasicImage from '@/components/shared/view/BasicImage.vue'
+import SubmitButton from '@/components/base/SubmitButton.vue'
 
-const SubmitButton = defineAsyncComponent(
-  () => import('@/components/base/SubmitButton.vue')
-)
-
-const { urlPrefix } = usePrefix()
 const collectionId = COLLECTION_ID
-
 const emit = defineEmits(['select'])
-
-const submit = () => {
-  emit('select')
-}
+const submit = () => emit('select')
 </script>
diff --git a/components/series/SeriesTable.vue b/components/series/SeriesTable.vue
index 871cbfa367..5227508662 100644
--- a/components/series/SeriesTable.vue
+++ b/components/series/SeriesTable.vue
@@ -36,13 +36,7 @@
         header-class="front-stack-layer"
         cell-class="is-vcentered">
         <div class="image is-48x48 mb-2">
-          <b-image
-            v-if="!isLoading"
-            :src="props.row.image"
-            :alt="props.row.name"
-            ratio="1by1"
-            rounded />
-          <NeoSkeleton :active="isLoading" circle width="48px" height="48px" />
+          <BasicImage :src="props.row.image" :alt="props.row.name" rounded />
         </div>
       </b-table-column>
 
@@ -330,6 +324,7 @@ const components = {
   Identity: () => import('@/components/identity/IdentityIndex.vue'),
   Money: () => import('@/components/shared/format/Money.vue'),
   Loader: () => import('@/components/shared/Loader.vue'),
+  BasicImage: () => import('@/components/shared/view/BasicImage.vue'),
 }
 
 @Component({ components })
diff --git a/components/shared/view/BasicImage.vue b/components/shared/view/BasicImage.vue
index 26adc0d864..c81ed43b23 100644
--- a/components/shared/view/BasicImage.vue
+++ b/components/shared/view/BasicImage.vue
@@ -1,17 +1,19 @@
 <template>
-  <b-image
-    :src="src || placeholder"
-    :src-fallback="placeholder"
-    :alt="alt"
-    ratio="1by1"
-    :class="customClass"
-    :rounded="rounded"
-    data-cy="type-image"
-    @error="onImageError">
-    <template #placeholder>
-      <NeoSkeleton full-size no-margin :circle="rounded" />
-    </template>
-  </b-image>
+  <figure class="image-wrapper image is-1by1" :class="customClass">
+    <transition name="fade">
+      <img
+        :src="imageSrc || placeholder"
+        :alt="alt"
+        :class="['has-ratio', { 'is-rounded': rounded }]"
+        @load="onImageLoad"
+        @error="onImageError" />
+    </transition>
+    <transition name="fade">
+      <slot v-if="!loaded" name="placeholder">
+        <NeoSkeleton full-size no-margin :circle="rounded" />
+      </slot>
+    </transition>
+  </figure>
 </template>
 
 <script lang="ts" setup>
@@ -19,14 +21,37 @@ import { NeoSkeleton } from '@kodadot1/brick'
 
 const { $consola } = useNuxtApp()
 const { placeholder } = useTheme()
-defineProps({
-  src: { type: String, default: '' },
-  alt: { type: String, default: 'KodaDot NFT minted multimedia' },
-  customClass: { type: String, default: '' },
-  rounded: Boolean,
-})
+const props = withDefaults(
+  defineProps<{
+    src: string
+    alt?: string
+    customClass?: string
+    rounded?: boolean
+  }>(),
+  {
+    src: '',
+    alt: '',
+    customClass: '',
+  }
+)
 
-function onImageError(ev: Event, src: string) {
-  $consola.error('[BasicImage] to load:', src, ev)
+const imageSrc = ref(props.src)
+const loaded = ref(false)
+
+const onImageLoad = () => {
+  loaded.value = true
+}
+const onImageError = (ev: Event) => {
+  $consola.error('[BasicImage] to load:', props.src, ev)
+  imageSrc.value = placeholder.value
 }
 </script>
+
+<style lang="scss" scoped>
+.image-wrapper {
+  padding-top: 100%;
+  img {
+    object-fit: cover;
+  }
+}
+</style>
diff --git a/components/shared/view/SelectableImage.vue b/components/shared/view/SelectableImage.vue
index ccaa1ed859..a3ddb951d9 100644
--- a/components/shared/view/SelectableImage.vue
+++ b/components/shared/view/SelectableImage.vue
@@ -1,17 +1,17 @@
 <template>
-  <b-image
-    ratio="1by1"
-    class="image"
+  <BasicImage
     :class="[
       disabled ? 'selectable-image-disabled' : 'selectable-image',
       { 'is-selected': selected },
     ]"
     :src="src"
     alt="Some Image"
-    @click.native="handleClick"></b-image>
+    @click.native="handleClick" />
 </template>
 
 <script setup lang="ts">
+import BasicImage from '@/components/shared/view/BasicImage.vue'
+
 const props = defineProps<{
   src: string
   index: number
diff --git a/components/unique/Collection/Item/CollectionItem.vue b/components/unique/Collection/Item/CollectionItem.vue
index e1de81a0f0..ea3dc248c6 100644
--- a/components/unique/Collection/Item/CollectionItem.vue
+++ b/components/unique/Collection/Item/CollectionItem.vue
@@ -3,12 +3,7 @@
     <div class="columns is-centered">
       <div class="column is-half has-text-centered">
         <div class="container image is-128x128 mb-2">
-          <b-image
-            v-if="!isLoading"
-            :src="image"
-            :alt="name"
-            ratio="1by1"
-            rounded></b-image>
+          <BasicImage v-if="!isLoading" :src="image" :alt="name" rounded />
         </div>
         <h1 class="title is-2">
           {{ name }}
@@ -101,6 +96,7 @@ import UseApiMixin from '@/utils/mixins/useApiMixin'
 import { tokenIdToRoute } from '../../utils'
 
 const components = {
+  BasicImage: () => import('@/components/shared/view/BasicImage.vue'),
   GalleryCardList: () =>
     import('@/components/rmrk/Gallery/GalleryCardList.vue'),
   Sharing: () => import('@/components/shared/Sharing.vue'),
diff --git a/components/unique/Collection/Item/TransferCollectionModal.vue b/components/unique/Collection/Item/TransferCollectionModal.vue
index 5b643b45c6..ed11ecce28 100644
--- a/components/unique/Collection/Item/TransferCollectionModal.vue
+++ b/components/unique/Collection/Item/TransferCollectionModal.vue
@@ -1,6 +1,6 @@
 <template>
-  <ModalWrapper icon="paper-plane" title="Transfer collection" isRight>
-    <template v-slot:default>
+  <ModalWrapper icon="paper-plane" title="Transfer collection" is-right>
+    <template #default>
       <Loader v-model="isLoading" :status="status" />
       <b-field>
         <Auth />
@@ -27,7 +27,7 @@
 <script lang="ts">
 import MetaTransactionMixin from '@/utils/mixins/metaMixin'
 import { isAddress } from '@polkadot/util-crypto'
-import { Component, mixins, Prop } from 'nuxt-property-decorator'
+import { Component, Prop, mixins } from 'nuxt-property-decorator'
 import { showNotification } from '@/utils/notification'
 
 const components = {
diff --git a/components/unique/Gallery/Item/DangerModal.vue b/components/unique/Gallery/Item/DangerModal.vue
index fad40d54b3..543e2d8041 100644
--- a/components/unique/Gallery/Item/DangerModal.vue
+++ b/components/unique/Gallery/Item/DangerModal.vue
@@ -1,6 +1,6 @@
 <template>
-  <ModalWrapper icon="trash" :title="title" isRight>
-    <template v-slot:default>
+  <ModalWrapper icon="trash" :title="title" is-right>
+    <template #default>
       <Loader v-model="isLoading" :status="status" />
       <div class="buttons">
         <b-button type="is-danger" expanded outlined @click="clearMeta"
@@ -10,8 +10,8 @@
           type="is-danger"
           expanded
           outlined
-          @click="clearAttrs"
           :disabled="!hasAttributes"
+          @click="clearAttrs"
           >Remove ALL attributes</b-button
         >
       </div>
@@ -22,7 +22,7 @@
 <script lang="ts">
 import { emptyArray } from '@/utils/empty'
 import MetaTransactionMixin from '@/utils/mixins/metaMixin'
-import { Component, mixins, Prop, Watch } from 'nuxt-property-decorator'
+import { Component, Prop, Watch, mixins } from 'nuxt-property-decorator'
 import { showNotification } from '~/utils/notification'
 import { Attribute } from '../../types'
 
diff --git a/components/unique/graphqlResponseTypes.ts b/components/unique/graphqlResponseTypes.ts
index 003ec4c252..572cd10ab1 100644
--- a/components/unique/graphqlResponseTypes.ts
+++ b/components/unique/graphqlResponseTypes.ts
@@ -35,4 +35,3 @@ export type NFTEntitiesWithCount<T> = {
 export type WithData<T> = {
   data: T
 }
-