➖ remove b-image component

[roiLeo]

PR Type

• Refactoring

Context

• Related with Goodbye Buefy #5852

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality

Screenshot 📸

Copilot Summary

🤖 Generated by Copilot at 6f1458f

This pull request refactors several components that use images to improve performance, TypeScript support, and code quality. It replaces the b-image component from Buefy with native img elements, and applies some Vue style guide and Buefy conventions to the code. It also removes an empty line from the graphqlResponseTypes.ts file.

🤖 Generated by Copilot at 6f1458f

Oh we're the crew of the Vue ship, and we sail the web so fast
We don't need no b-image, we use img to make it last
We refactor and we tidy, we follow style and guide
And we heave away together, on the count of one, two, three!

[reviewpad]

Reviewpad Report

⚠️ Warnings

• Please link an issue to the pull request

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	9d38e10
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/646dfd03ca8f6d0008867aff
😎 Deploy Preview	https://deploy-preview-5854--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[reviewpad]

AI-Generated Summary: This pull request includes updates to several Vue components, mainly focusing on replacing <b-image> tags with <img> tags. Additionally, a few syntax updates and minor code rearrangements have been made in components such as TransferCollectionModal.vue, DangerModal.vue, and BasicImage.vue. Lastly, a blank line has been removed from graphqlResponseTypes.ts.

[Jarsen136]

1. I prefer to add neo-image component to replace b-image, because there is some useful code that could be reused, like 'src-fallback'.
   Or if we could reuse this component in libs/ui libs/ui/src/components/MediaItem/type/ImageMedia.vue

2. There is still a b-image usage in the codebase as far as I know.

[roiLeo]

I prefer to add neo-image component to replace b-image, because there is some useful code that could be reused, like 'src-fallback'.
Or if we could reuse this component in libs/ui libs/ui/src/components/MediaItem/type/ImageMedia.vue

meh.. I don't find any advantage to push this code in libs/ui, I'm listening if you have a case where this could be useful

There is still a b-image usage in the codebase as far as I know.

[vikiival]

everything pinted out by @Jarsen136

[Jarsen136]

I prefer to add neo-image component to replace b-image, because there is some useful code that could be reused, like 'src-fallback'.
Or if we could reuse this component in libs/ui libs/ui/src/components/MediaItem/type/ImageMedia.vue

meh.. I don't find any advantage to push this code in libs/ui, I'm listening if you have a case where this could be useful

For example, I would like to add a placeholder image for every image display once the load failed. If we use pure<img /> tag, we have to add an error event listener to every tag. I would like to see a common image component that contains the fallback logic.

<img :src="src" @error="onError" />

const onError = (e: Event) => {
  const target = e.target as HTMLImageElement
  if (target) {
    consola.log('[KODADOT::IMAGE] unable to load', e)
    target.src = props.placeholder
  }
}

b-image has provided these props so that we could easily achieve so.

We do not have to push the code into libs/ui. Creating a new common component <CommonImage /> under @/components/shared could also help us to reuse code.

[roiLeo]

For example, I would like to add a placeholder image for every image display once the load failed. If we use pure<img /> tag, we have to add an error event listener to every tag. I would like to see a common image component that contains the fallback logic.

isn't it already the case? check onImageError method

b-image has provided these props so that we could easily achieve so.

I don't understand your concern, do you want me to introduce new feature? this isn't the scope of this PR, only migration of our current component. IMO current fallback work as excepted.

We do not have to push the code into libs/ui. Creating a new common component <CommonImage /> under @/components/shared could also help us to reuse code.

Well component is named <BasicImage />, naming is ok to me. It is already used to be a common component lmk if you want me to rename it.

[Jarsen136]

For example, I would like to add a placeholder image for every image display once the load failed. If we use pure<img /> tag, we have to add an error event listener to every tag. I would like to see a common image component that contains the fallback logic.

isn't it already the case? check onImageError method

Yes, it's already there on the BasicImage component. I mean we could replace <img /> with <BasicImage /> to enable these functionality.

b-image has provided these props so that we could easily achieve so.

I don't understand your concern, do you want me to introduce new feature? this isn't the scope of this PR, only migration of our current component. IMO current fallback work as excepted.

I'm not about to introduce some new feature. I mention this because we remove b-image in this PR, and it would also remove some useful functionality provided by b-image.

We do not have to push the code into libs/ui. Creating a new common component <CommonImage /> under @/components/shared could also help us to reuse code.

Well component is named <BasicImage />, naming is ok to me. It is already used to be a common component lmk if you want me to rename it.

The BasicImage naming is also ok to me. Could we replace <img /> with <BasicImage /> for most of the image elements?
In this way, we could easily introduce some common logic for images. It could be another issue for sure.

[roiLeo]

Yes, it's already there on the BasicImage component. I mean we could replace <img /> with <BasicImage /> to enable these functionality.

Yes! Done for the one that was using <b-image />

The BasicImage naming is also ok to me. Could we replace <img /> with <BasicImage /> for most of the image elements? In this way, we could easily introduce some common logic for images. It could be another issue for sure.

For now I don't think it's a good idea to replace all <img /> occurence with <BasicImage /> since it could introduce some strange behavior.
Last <img /> tag standing are mainly icons (.svg) that can imported in component.
Let me know if you see a case where we should use BasicImage with skeleton.

[Jarsen136]

The BasicImage naming is also ok to me. Could we replace <img /> with <BasicImage /> for most of the image elements? In this way, we could easily introduce some common logic for images. It could be another issue for sure.

For now I don't think it's a good idea to replace all <img /> occurence with <BasicImage /> since it could introduce some strange behavior. Last <img /> tag standing are mainly icons (.svg) that can imported in component.

Yes, we do not need to replace all img tag.

Let me know if you see a case where we should use BasicImage with skeleton.

Here is the BasicImage on TopCollection

[Jarsen136]

small stuff. otherwise lgtm

[prury]

@roiLeo
it loads now but images are stretched
Beta:

Deploy:

[prury]

gallery looking good but wallet icons are now huge:

[vikiival]

Soo what's the status of this one ? 👀 @roiLeo @prury ?

[roiLeo]

Soo what's the status of this one ?

looks good on my side

[prury]

Soo what's the status of this one ? 👀 @roiLeo @prury ?

will check again and if everything works properly will change the label

[prury]

Found some problems:

Collections still not loading:

2023-05-21.19-41-32.mp4

Collection image not showing under created collections:

[roiLeo]

Found some problems:

Collections still not loading:

Idk what happened but I lost some code from https://github.com/kodadot/nft-gallery/pull/5854/commits

[codeclimate]

Code Climate has analyzed commit 9d38e10 and detected 0 issues on this pull request.

View more on Code Climate.

[roiLeo]

Merge?

[vikiival]

@prury can I ask you for one more check pls?

Also @Jarsen136 && @preschian for review

[yangwao]

I would double check everywhere and slow roll with this update as we are using it a lot places and seen there was various bugs :)

[prury]

@prury can I ask you for one more check pls?

Also @Jarsen136 && @preschian for review

will do on my afternoon today

[prury]

Tested on Firefox/Chrome for Desktop
Firefox/Chrome Mobile
Working fine!

[prury]

Found some problems:
Collections still not loading:

Idk what happened but I lost some code from https://github.com/kodadot/nft-gallery/pull/5854/commits

this problem is still happening tho