feat: add the different sections of the collectibles

ui/app/AppLayouts/Wallet/CollectiblesTab.qml

@@ -36,14 +36,41 @@ Item {
     Component {
         id: collectiblesListComponent
 
-        CollectiblesContainer {
-            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}`
+        Column {
+            spacing: Style.current.halfPadding
+            anchors.fill: parent
+
+            CollectiblesContainer {
+                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}`
+                }
+            }
+
+            CollectiblesContainer {
+                collectibleName: "Ethermons"
+                collectibleIconSource: "../../img/collectibles/ethermons.png"
+                isLoading: root.isLoading
+                collectiblesModal: collectiblesModalComponent
+                buttonText: qsTr("View in Ethermon")
+                getLink: function (id) {
+                    return `https://www.etheremon.com/#/mons/${id}`
+                }
+            }
+
+            CollectiblesContainer {
+                collectibleName: "Kudos"
+                collectibleIconSource: "../../img/collectibles/kudos.png"
+                isLoading: root.isLoading
+                collectiblesModal: collectiblesModalComponent
+                buttonText: qsTr("View in Gitcoin")
+                getLink: function (id) {
+                    return ""
+                }
             }
         }
     }

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

@@ -13,6 +13,8 @@ Item {
     property var getLink: function () {}
 
     id: root
+    width: parent.width
+    height: childrenRect.height
 
     CollectiblesHeader {
         id: collectiblesHeader

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

@@ -37,7 +37,7 @@ ModalPopup {
         label: popup.buttonText
         anchors.top: parent.top
         onClicked: {
-            console.log('Go to', popup.buttonLink)
+            Qt.openUrlExternally(popup.buttonLink)
         }
     }
 }

ui/shared/TextWithLabel.qml

@@ -40,14 +40,14 @@ Item {
     Loader {
         active: !!infoText.textToCopy
         sourceComponent: copyComponent
+        anchors.verticalCenter: textItem.verticalCenter
+        anchors.left: textItem.right
+        anchors.leftMargin: Style.current.smallPadding
     }
 
     Component {
         id: copyComponent
         CopyToClipBoardButton {
-            anchors.verticalCenter: textItem.verticalCenter
-            anchors.left: textItem.right
-            anchors.leftMargin: Style.current.smallPadding
             textToCopy: infoText.textToCopy
         }
     }