v0.0.8 (#138)

* Updated variables for switching the theme. (#134)

* Updated variables for switching the theme.

* Updated changelog.

* Fixed styles

* Revert "Fixed styles"

This reverts commit 7b2c418.

* Added copy button for transaction hash in toasts. (#135)

* Updated variables for switching the theme.

* Up0dated changelog.

* Added copy button in toasts for tx hash.

* Updated changelog.

* Fixed failing test

* Side Panel Mobile Enhancements (#136)

* Updated styles

* Updated styles

* Fixed styles

* Updated CHANGELOG.md

* Fixed CHANGELOG

* Updated QR codes

* Fixed images not displaying in the unlock panel. (#137)

* Fixed images not showing in unlock panel.

* updated changelog

* Updated naming

* Fixes.

* Fixed error on JSX type.

* Updated version (#139)

* 0.0.8

* Updated CHANGELOG.md

---------

Co-authored-by: Iulia Cimpeanu <72752718+iuliacimpeanu@users.noreply.github.com>

Author: MiroMargineanu

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[0.0.8](https://github.com/multiversx/mx-sdk-dapp-ui/pull/138)] - 2025-06-30
+
+- [Fixed images not displaying in the unlock panel.](https://github.com/multiversx/mx-sdk-dapp-ui/pull/137)
+- [Added deep link xPortal connection support on mobile](https://github.com/multiversx/mx-sdk-dapp-ui/pull/136)
+- [Added copy button for transaction hash in toasts.](https://github.com/multiversx/mx-sdk-dapp-ui/pull/135)
+- [Updated variables for switching the theme.](https://github.com/multiversx/mx-sdk-dapp-ui/pull/134)
+
 ## [[0.0.7](https://github.com/multiversx/mx-sdk-dapp-ui/pull/130)] - 2025-06-23
 
 - [Fixed Ledger connect header close button not working](https://github.com/multiversx/mx-sdk-dapp-ui/pull/129)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "A library to hold UI components for a dApp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "MIT",
@@ -57,6 +57,7 @@
     "@fortawesome/fontawesome-svg-core": ">= 6.7.2",
     "@fortawesome/free-solid-svg-icons": ">= 6.7.2",
     "@multiversx/sdk-dapp-utils": ">= 1.0.4",
+    "@rollup/plugin-image": "^3.0.3",
     "@stencil/react-output-target": "0.8.2",
     "classnames": ">= 2.5.1",
     "lodash.inrange": "^3.3.0",

src/assets/icons/back-arrow-icon/back-arrow-icon.scss

@@ -0,0 +1,12 @@
+:host {
+  @apply mvx:flex;
+
+  .back-arrow-icon {
+    @apply mvx:w-5 mvx:h-5;
+    fill: none;
+
+    path {
+      fill: var(--mvx-neutral-400);
+    }
+  }
+}

src/assets/icons/back-arrow-icon/back-arrow-icon.tsx

@@ -1,17 +1,21 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 
 @Component({
   shadow: true,
+  styleUrl: 'back-arrow-icon.scss',
   tag: 'mvx-back-arrow-icon',
 })
 export class BackArrowIcon {
+  @Prop() class?: string;
+
   render() {
     return (
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 22 20">
-        <path
-          fill="#a3a3a3"
-          d="M0.6875 9.48438L8.9375 1.23438C9.21875 0.953125 9.73438 0.953125 10.0156 1.23438C10.2969 1.51562 10.2969 2.03125 10.0156 2.3125L3.03125 9.25H20.75C21.125 9.25 21.5 9.625 21.5 10C21.5 10.4219 21.125 10.75 20.75 10.75H3.03125L10.0156 17.7344C10.2969 18.0156 10.2969 18.5312 10.0156 18.8125C9.73438 19.0938 9.21875 19.0938 8.9375 18.8125L0.6875 10.5625C0.40625 10.2812 0.40625 9.76562 0.6875 9.48438Z"
-        />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 22 20"
+        class={{ 'back-arrow-icon': true, [this.class]: Boolean(this.class) }}
+      >
+        <path d="M0.6875 9.48438L8.9375 1.23438C9.21875 0.953125 9.73438 0.953125 10.0156 1.23438C10.2969 1.51562 10.2969 2.03125 10.0156 2.3125L3.03125 9.25H20.75C21.125 9.25 21.5 9.625 21.5 10C21.5 10.4219 21.125 10.75 20.75 10.75H3.03125L10.0156 17.7344C10.2969 18.0156 10.2969 18.5312 10.0156 18.8125C9.73438 19.0938 9.21875 19.0938 8.9375 18.8125L0.6875 10.5625C0.40625 10.2812 0.40625 9.76562 0.6875 9.48438Z" />
       </svg>
     );
   }

src/assets/icons/wallet-connect-app-gallery-icon/wallet-connect-app-gallery-icon.scss

@@ -0,0 +1,13 @@
+:host {
+  @apply mvx:flex;
+
+  .wallet-connect-app-gallery-icon {
+    @apply mvx:w-48 mvx:h-16 mvx:flex mvx:fill-none;
+
+    rect {
+        &:hover {
+            fill: var(--mvx-neutral-800);
+        }
+    }
+  }
+}

src/assets/icons/wallet-connect-app-gallery-icon/wallet-connect-app-gallery-icon.tsx

@@ -0,0 +1,13 @@
+:host {
+  @apply mvx:flex;
+
+  .wallet-connect-app-store-icon {
+    @apply mvx:w-48 mvx:h-16 mvx:flex mvx:fill-none;
+
+    rect {
+        &:hover {
+            fill: var(--mvx-neutral-800);
+        }
+    }
+  }
+}

src/assets/icons/wallet-connect-app-store-icon/wallet-connect-app-store-icon.scss

@@ -0,0 +1,13 @@
+:host {
+  @apply mvx:flex;
+
+  .wallet-connect-google-play-icon {
+    @apply mvx:w-48 mvx:h-16 mvx:flex mvx:fill-none;
+
+    rect {
+        &:hover {
+            fill: var(--mvx-neutral-800);
+        }
+    }
+  }
+}

src/assets/icons/wallet-connect-app-store-icon/wallet-connect-app-store-icon.tsx

@@ -0,0 +1,46 @@
+import { Component, h, Prop } from '@stencil/core';
+
+@Component({
+  shadow: true,
+  tag: 'mvx-wallet-connect-google-play-icon',
+  styleUrl: 'wallet-connect-google-play-icon.scss',
+})
+export class WalletConnectGooglePlayIcon {
+  @Prop() class?: string;
+
+  render() {
+    return (
+      <svg
+        viewBox="0 0 180 56"
+        xmlns="http://www.w3.org/2000/svg"
+        class={{ 'wallet-connect-google-play-icon': true, [this.class]: Boolean(this.class) }}
+      >
+        <rect width="180" height="56" rx="8" fill="black" />
+        <rect x="0.5" y="0.5" width="179" height="55" rx="7.5" stroke="white" stroke-opacity="0.4" />
+        <path d="M24.6081 28.0007L12 40.6088V15.3926L24.6081 28.0007Z" fill="white" />
+        <path
+          d="M32.173 35.5012L17.1848 43.8867C16.9077 44.0449 16.6105 44.1662 16.3008 44.2475C15.4949 44.4736 14.6352 44.4306 13.8568 44.1253C13.0784 43.82 12.4253 43.2697 12 42.5606L25.7367 29.2607L32.173 35.5012Z"
+          fill="white"
+        />
+        <path
+          d="M32.173 20.5235L25.7403 26.7391L12 13.4409C12.3379 12.8831 12.818 12.421 13.3932 12.0999C13.9684 11.7788 14.619 11.6097 15.281 11.6094C15.9794 11.6106 16.6653 11.792 17.2694 12.1355L32.173 20.5235Z"
+          fill="white"
+        />
+        <path
+          d="M39.1723 31.114L33.5499 34.3034L27.1309 27.9807L33.5123 21.6953L39.1348 24.9315C39.9484 25.3597 40.5602 26.0909 40.8373 26.9663C41.1145 27.8418 41.0348 28.791 40.6154 29.6081C40.2888 30.2431 39.7709 30.7599 39.1348 31.0859"
+          fill="white"
+        />
+        <path
+          d="M94.2078 20.2445C92.919 20.2445 91.8325 19.7917 90.9733 18.9004C90.1212 18.0341 89.6454 16.8397 89.6667 15.6204C89.6667 14.3192 90.107 13.2175 90.9733 12.3441C91.829 11.4528 92.9155 11 94.2043 11C95.4789 11 96.5654 11.4528 97.4388 12.3441C98.3051 13.2461 98.7454 14.3477 98.7454 15.6204C98.7312 16.9253 98.2909 18.0269 97.4388 18.8968C96.5831 19.7953 95.4967 20.2445 94.2078 20.2445ZM55.8587 20.2445C54.5983 20.2445 53.5048 19.7988 52.61 18.9182C51.7224 18.0412 51.2715 16.9324 51.2715 15.624C51.2715 14.3156 51.7224 13.2068 52.61 12.3298C53.487 11.4492 54.5806 11.0036 55.8587 11.0036C56.4836 11.0036 57.0908 11.1283 57.6731 11.3815C58.2447 11.6275 58.7098 11.9626 59.0542 12.3726L59.1394 12.476L58.1772 13.4243L58.0778 13.3067C57.5346 12.6578 56.8067 12.3405 55.8445 12.3405C54.9853 12.3405 54.2362 12.6471 53.6184 13.2532C52.997 13.8628 52.681 14.6614 52.681 15.6276C52.681 16.5937 52.997 17.3923 53.6184 18.002C54.2362 18.6081 54.9853 18.9147 55.8445 18.9147C56.7606 18.9147 57.531 18.6081 58.1311 18.002C58.4861 17.6455 58.7063 17.1463 58.7844 16.5153H55.699V15.1819H60.1087L60.1265 15.3032C60.1584 15.5278 60.1904 15.7595 60.1904 15.9734C60.1904 17.2034 59.8211 18.1981 59.0897 18.9325C58.2589 19.8024 57.1724 20.2445 55.8587 20.2445ZM106.848 20.0555H105.488L101.323 13.3637L101.359 14.5687V20.0519H99.9987V11.1925H101.55L101.593 11.2603L105.509 17.5635L105.474 16.362V11.1925H106.848V20.0555V20.0555ZM83.9895 20.0555H82.6119V12.5259H80.2224V11.1925H86.3754V12.5259H83.9859V20.0555H83.9895ZM79.1004 20.0555H77.7264V11.1925H79.1004V20.0555ZM71.378 20.0555H70.004V12.5259H67.6145V11.1925H73.7675V12.5259H71.378V20.0555ZM66.7446 20.0413H61.4757V11.1925H66.7446V12.5259H62.8533V14.9573H66.3647V16.2764H62.8533V18.7079H66.7446V20.0413ZM91.9817 17.9842C92.5959 18.6009 93.3415 18.9111 94.2078 18.9111C95.099 18.9111 95.8269 18.6081 96.434 17.9842C97.0376 17.3781 97.3429 16.583 97.3429 15.624C97.3429 14.665 97.0376 13.8664 96.4376 13.2639C95.8233 12.6471 95.0742 12.3369 94.2114 12.3369C93.3202 12.3369 92.5924 12.64 91.9888 13.2639C91.3852 13.87 91.0798 14.665 91.0798 15.624C91.0798 16.583 91.3816 17.3816 91.9817 17.9842Z"
+          fill="white"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M88.4672 32.5805C85.2051 32.5805 82.5609 35.0657 82.5609 38.4937C82.5609 41.8905 85.2224 44.4069 88.4672 44.4069C91.7292 44.4069 94.3734 41.9044 94.3734 38.4937C94.3734 35.0657 91.7292 32.5805 88.4672 32.5805ZM88.4672 42.0638C86.6825 42.0638 85.1464 40.5803 85.1464 38.4798C85.1464 36.3482 86.686 34.8959 88.4672 34.8959C90.2518 34.8959 91.7879 36.3482 91.7879 38.4798C91.7914 40.5942 90.2518 42.0638 88.4672 42.0638ZM75.5811 32.5805C72.3191 32.5805 69.6749 35.0657 69.6749 38.4937C69.6749 41.8905 72.3363 44.4069 75.5811 44.4069C78.8432 44.4069 81.4874 41.9044 81.4874 38.4937C81.4874 35.0657 78.8397 32.5805 75.5811 32.5805ZM75.5811 42.0638C73.7965 42.0638 72.2604 40.5803 72.2604 38.4798C72.2604 36.3482 73.7999 34.8959 75.5811 34.8959C77.3658 34.8959 78.9019 36.3482 78.9019 38.4798C78.9019 40.5942 77.3658 42.0638 75.5811 42.0638ZM60.2477 34.3863V36.8889H66.2299C66.0469 38.2927 65.5844 39.3291 64.8767 40.0396C63.9999 40.92 62.6468 41.8767 60.2615 41.8767C56.5852 41.8767 53.7098 38.8958 53.7098 35.2044C53.7098 31.5129 56.5852 28.532 60.2615 28.532C62.2464 28.532 63.6927 29.3189 64.7663 30.324L66.5336 28.5494C65.0424 27.1144 63.0576 26.0156 60.2753 26.0156C55.2321 26.0156 51 30.1403 51 35.1905C51 40.2545 55.2286 44.3653 60.2753 44.3653C62.9989 44.3653 65.0424 43.4711 66.6579 41.7865C68.3045 40.1332 68.8257 37.8005 68.8257 35.9184C68.8257 35.3326 68.7809 34.8057 68.6876 34.3586H60.2442C60.2477 34.3551 60.2477 34.3863 60.2477 34.3863ZM122.966 36.3343C122.472 35.0068 120.981 32.5666 117.922 32.5666C114.892 32.5666 112.372 34.9617 112.372 38.4798C112.372 41.8004 114.864 44.3931 118.216 44.3931C120.908 44.3931 122.475 42.7397 123.121 41.7692L121.122 40.4244C120.46 41.4122 119.538 42.0604 118.23 42.0604C116.908 42.0604 115.982 41.4573 115.368 40.2684L123.242 36.9929C123.242 36.9963 122.966 36.3343 122.966 36.3343ZM114.936 38.31C114.874 36.0258 116.704 34.8647 118.012 34.8647C119.044 34.8647 119.904 35.3742 120.197 36.1159L114.936 38.31ZM108.54 44.0395H111.126V26.6673H108.54V44.0395ZM104.294 33.8942H104.201C103.618 33.1975 102.51 32.5666 101.094 32.5666C98.1567 32.5666 95.4504 35.1628 95.4504 38.4972C95.4504 41.8177 98.1429 44.3827 101.094 44.3827C102.492 44.3827 103.618 43.7484 104.201 43.0378H104.294V43.887C104.294 46.1435 103.093 47.3601 101.156 47.3601C99.572 47.3601 98.5882 46.2163 98.1878 45.2596L95.9406 46.2024C96.5861 47.7622 98.3086 49.6928 101.153 49.6928C104.184 49.6928 106.752 47.9008 106.752 43.53V32.9202H104.308V33.8942C104.311 33.8942 104.294 33.8942 104.294 33.8942ZM101.326 42.0638C99.5409 42.0638 98.0497 40.5665 98.0497 38.4972C98.0497 36.4106 99.5409 34.8993 101.326 34.8993C103.093 34.8993 104.463 36.4279 104.463 38.4972C104.481 40.5665 103.096 42.0638 101.326 42.0638ZM135.072 26.6673H128.889V44.0395H131.475V37.4608H135.075C137.937 37.4608 140.75 35.3777 140.75 32.071C140.75 28.7643 137.947 26.6673 135.072 26.6673ZM135.147 35.0345H131.471V29.0728H135.147C137.084 29.0728 138.178 30.6776 138.178 32.0536C138.178 33.4158 137.07 35.0345 135.147 35.0345ZM151.113 32.5493C149.235 32.5493 147.298 33.3846 146.497 35.2044L148.789 36.161C149.283 35.2044 150.187 34.8785 151.144 34.8785C152.483 34.8785 153.836 35.6827 153.867 37.1177V37.3014C153.405 37.0379 152.39 36.6359 151.175 36.6359C148.7 36.6359 146.19 37.9946 146.19 40.5422C146.19 42.8749 148.22 44.3723 150.481 44.3723C152.217 44.3723 153.173 43.5855 153.771 42.6739H153.864V44.0187H156.356V37.3638C156.356 34.265 154.064 32.5493 151.113 32.5493ZM150.788 42.0638C149.942 42.0638 148.758 41.6479 148.758 40.5803C148.758 39.2355 150.236 38.7259 151.496 38.7259C152.635 38.7259 153.173 38.972 153.85 39.3117C153.664 40.8715 152.352 42.05 150.788 42.0638ZM165.448 32.9202L162.48 40.4555H162.387L159.311 32.9202H156.529L161.144 43.4538L158.514 49.3081H161.206L168.307 32.9202H165.448ZM142.176 44.0395H144.761V26.6673H142.176V44.0395Z"
+          fill="white"
+        />
+      </svg>
+    );
+  }
+}