feat: add CollectiblesModal for the collectibles content

ui/app/AppLayouts/Wallet/CollectiblesTab.qml

@@ -28,6 +28,11 @@ Item {
         }
     }
 
+
+    CollectiblesModal {
+        id: collectiblesModalComponent
+    }
+
     Component {
         id: collectiblesListComponent
 
@@ -35,6 +40,11 @@ Item {
             collectibleName: "CryptoKitties"
             collectibleIconSource: "../../img/collectibles/CryptoKitties.png"
             isLoading: root.isLoading
+            collectiblesModal: collectiblesModalComponent
+            buttonText: qsTr("View in Cryptokitties")
+            getLink: function (id) {
+                return `https://www.cryptokitties.co/kitty/${id}`
+            }
         }
     }
 

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

@@ -8,6 +8,9 @@ Item {
     property string collectibleName: "CryptoKitties"
     property bool isLoading: true
     property bool collectiblesOpened: false
+    property var collectiblesModal
+    property string buttonText: "View in Cryptokitties"
+    property var getLink: function () {}
 
     id: root
 
@@ -32,7 +35,11 @@ Item {
     Component {
         id: contentComponent
 
-        CollectiblesContent {}
+        CollectiblesContent {
+            collectiblesModal: root.collectiblesModal
+            buttonText: root.buttonText
+            getLink: root.getLink
+        }
     }
 }
 

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

@@ -8,19 +8,25 @@ ScrollView {
     property var collectibles: [{
             name: "Kitty cat1",
             image: "../../../../img/collectibles/placeholders/kitty.png",
-            collectibleId: "1337"
+            collectibleId: "1337",
+            description: "Avast ye! I'm the dread pirate Furbeard, and I'll most likely sleep"
         },
         {
             name: "Kitty cat2",
             image: "../../../../img/collectibles/placeholders/kitty.png",
-            collectibleId: "1338"
+            collectibleId: "1338",
+            description: "Avast ye! I'm the dread pirate Furbeard, and I'll most likely sleep"
         },
         {
             name: "Kitty cat3",
             image: "../../../../img/collectibles/placeholders/kitty.png",
-            collectibleId: "1339"
+            collectibleId: "1339",
+            description: "Avast ye! I'm the dread pirate Furbeard, and I'll most likely sleep"
         }]
     readonly property int imageSize: 164
+    property var collectiblesModal
+    property string buttonText: "View in Cryptokitties"
+    property var getLink: function () {}
 
     id: root
     height: contentRow.height
@@ -52,6 +58,21 @@ ScrollView {
                     source: modelData.image
                     fillMode: Image.PreserveAspectCrop
                 }
+
+                MouseArea {
+                    cursorShape: Qt.PointingHandCursor
+                    anchors.fill: parent
+                    onClicked: {
+                        collectiblesModal.openModal({
+                                                   name: modelData.name,
+                                                   id: modelData.collectibleId,
+                                                   description: modelData.description,
+                                                   buttonText: root.buttonText,
+                                                   link: root.getLink(modelData.collectibleId),
+                                                   image: modelData.image
+                                               })
+                    }
+                }
             }
         }
     }

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

@@ -0,0 +1,44 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.13
+import "../../../../../imports"
+import "../../../../../shared"
+
+ModalPopup {
+    property string collectibleName: "Furbeard"
+    property string collectibleId: "1423"
+    property url collectibleImage: "../../../../img/collectibles/placeholders/kitty.png"
+    property string collectibleDescription: "Avast ye! I'm the dread pirate Furbeard, and I'll most likely sleep"
+    property string buttonText: "View in Cryptokitties"
+    property string buttonLink: "https://www.cryptokitties.co/"
+    property var openModal: function (options) {
+        popup.collectibleName = options.name
+        popup.collectibleId = options.id
+        popup.collectibleDescription = options.description
+        popup.collectibleImage = options.image
+        popup.buttonText = options.buttonText || qsTr("View")
+        popup.buttonLink = options.link
+        popup.open()
+    }
+
+    id: popup
+    title: collectibleName
+
+    CollectiblesModalContent {
+        collectibleName: popup.collectibleName
+        collectibleId: popup.collectibleId
+        collectibleImage: popup.collectibleImage
+        collectibleDescription: popup.collectibleDescription
+    }
+
+    footer: StyledButton {
+        visible: !!popup.buttonLink
+        anchors.right: parent.right
+        anchors.rightMargin: Style.current.padding
+        label: popup.buttonText
+        anchors.top: parent.top
+        onClicked: {
+            console.log('Go to', popup.buttonLink)
+        }
+    }
+}
+

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

@@ -0,0 +1,49 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.13
+import "../../../../../imports"
+import "../../../../../shared"
+
+Item {
+    property string collectibleName: "Furbeard"
+    property string collectibleId: "1423"
+    property url collectibleImage: "../../../../img/collectibles/placeholders/kitty.png"
+    property string collectibleDescription: "Avast ye! I'm the dread pirate Furbeard, and I'll most likely sleep"
+
+    id: root
+    width: parent.width
+
+    Image {
+        id: collectibleImage
+        width: 248
+        height: 248
+        anchors.horizontalCenter: parent.horizontalCenter
+        source: root.collectibleImage
+        fillMode: Image.PreserveAspectCrop
+    }
+
+    TextWithLabel {
+        id: idText
+        label: qsTr("ID")
+        text: root.collectibleId
+        anchors.top: collectibleImage.bottom
+        anchors.topMargin:0
+    }
+
+
+    TextWithLabel {
+        visible: !!root.collectibleDescription
+        id: descriptionText
+        label: qsTr("Description")
+        text: root.collectibleDescription
+        anchors.top: idText.bottom
+        anchors.topMargin: 0
+        wrap: true
+    }
+}
+
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;formeditorColor:"#ffffff";height:480;width:640}
+}
+##^##*/

ui/nim-status-client.pro

@@ -155,6 +155,8 @@ DISTFILES += \
     app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContainer.qml \
     app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContent.qml \
     app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesHeader.qml \
+    app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesModal.qml \
+    app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesModalContent.qml \
     fonts/InterStatus/InterStatus-Black.otf \
     fonts/InterStatus/InterStatus-BlackItalic.otf \
     fonts/InterStatus/InterStatus-Bold.otf \

ui/shared/TextWithLabel.qml

@@ -9,6 +9,7 @@ Item {
     property string fontFamily: Style.current.fontRegular.name
     property string textToCopy: ""
     property alias value: textItem
+    property bool wrap: false
 
     id: infoText
     height: this.childrenRect.height
@@ -25,20 +26,32 @@ Item {
     StyledTextEdit {
         id: textItem
         text: infoText.text
+        selectByMouse: true
         font.family: fontFamily
         readOnly: true
         anchors.top: inputLabel.bottom
         anchors.topMargin: 7
         font.pixelSize: 15
+        wrapMode: infoText.wrap ? Text.WordWrap : Text.NoWrap
+        anchors.left: parent.left
+        anchors.right: infoText.wrap ? parent.right : undefined
     }
 
-    CopyToClipBoardButton {
-        visible: !!infoText.textToCopy
-        anchors.verticalCenter: textItem.verticalCenter
-        anchors.left: textItem.right
-        anchors.leftMargin: Style.current.smallPadding
-        textToCopy: infoText.textToCopy
+    Loader {
+        active: !!infoText.textToCopy
+        sourceComponent: copyComponent
     }
+
+    Component {
+        id: copyComponent
+        CopyToClipBoardButton {
+            anchors.verticalCenter: textItem.verticalCenter
+            anchors.left: textItem.right
+            anchors.leftMargin: Style.current.smallPadding
+            textToCopy: infoText.textToCopy
+        }
+    }
+
 }
 
 /*##^##