fix: add image loader to collectibles images

ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml

@@ -72,16 +72,17 @@ Item {
             width: 18
             height: 18
             anchors.right: parent.right
+            property bool hovered: false
 
             MouseArea {
                 cursorShape: Qt.PointingHandCursor
                 anchors.fill: parent
                 hoverEnabled: true
                 onExited: {
-                    qrCodeButton.color = Style.current.white
+                    parent.hovered = false
                 }
                 onEntered: {
-                    qrCodeButton.color = Style.current.grey
+                    parent.hovered = true
                 }
                 onClicked: {
                     showQR = !showQR
@@ -90,9 +91,10 @@ Item {
         }
 
         ColorOverlay {
+            id: qrCodeOverlay
             anchors.fill: qrCodeImage
             source: qrCodeImage
-            color: Style.current.textColor
+            color: qrCodeImage.hovered ? Style.current.buttonForegroundColor : Style.current.textColor
         }
 
         Separator {

ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContent.qml

@@ -80,31 +80,17 @@ ScrollView {
                     height: collectibleImage.height
                     clip: true
 
-                    Image {
+                    RoundedImage {
                         id: collectibleImage
                         width: root.imageSize
                         height: root.imageSize
-                        z: 1
+                        border.width: 1
+                        border.color: Style.current.border
+                        radius: 16
                         source: modelData.image
-                        sourceSize.width: width
-                        sourceSize.height: height
                         fillMode: Image.PreserveAspectCrop
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.horizontalCenter: parent.horizontalCenter
-                    }
-
-                    Rectangle {
-                        radius: 16
-                        z: 2
-                        border.width: 1
-                        border.color: Style.current.border
-                        color: Style.current.transparent
-                        anchors.fill: parent
-                    }
-
-                    MouseArea {
-                        cursorShape: Qt.PointingHandCursor
-                        anchors.fill: parent
                         onClicked: {
                             collectiblesModal.openModal({
                                                        name: modelData.name,

ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesModalContent.qml

@@ -12,14 +12,13 @@ Item {
     id: root
     width: parent.width
 
-    Image {
+    RoundedImage {
         id: collectibleImage
         width: 248
         height: 248
         anchors.horizontalCenter: parent.horizontalCenter
         source: root.collectibleImage
-        sourceSize.width: width
+        radius: 16
-        sourceSize.height: height
         fillMode: Image.PreserveAspectCrop
     }
 

ui/shared/ImageLoader.qml

@@ -4,7 +4,8 @@ import "../imports"
 
 Rectangle {
     id: root
-    property url source
+    property alias source: image.source
+    property alias fillMode: image.fillMode
     signal clicked
     color: Style.current.backgroundHover
     state: "loading"

ui/shared/RoundedImage.qml

@@ -5,6 +5,7 @@ Rectangle {
     id: root
     signal clicked
     property alias source: imgStickerPackThumb.source
+    property alias fillMode: imgStickerPackThumb.fillMode
 
     radius: width / 2