Merge pull request #145 from multiversx/development

v0.0.9

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.9](https://github.com/multiversx/mx-sdk-dapp-ui/pull/145)] - 2025-07-03
+
+- [Fixed icons max width / height in toasts.](https://github.com/multiversx/mx-sdk-dapp-ui/pull/143)
+- [Refactor color variable names to avoid Tailwind naming conflicts](https://github.com/multiversx/mx-sdk-dapp-ui/pull/142)
+- [Added dataTestId to unlock panel provider button](https://github.com/multiversx/mx-sdk-dapp-ui/pull/141)
+- [Added swipe functionality for the mobile side panel](https://github.com/multiversx/mx-sdk-dapp-ui/pull/140)
+
 ## [[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)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-ui",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "A library to hold UI components for a dApp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "MIT",
@@ -56,7 +56,6 @@
   "dependencies": {
     "@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",

src/components/common/transaction-asset-icon/transaction-asset-icon.scss

@@ -0,0 +1,5 @@
+:host {
+    .transaction-asset-image {
+        @apply mvx:max-w-full mvx:max-h-full;
+    }
+}

src/components/common/transaction-asset-icon/transaction-asset-icon.tsx

@@ -8,6 +8,7 @@ export enum IconSizeEnumType {
 
 @Component({
   tag: 'mvx-transaction-asset-icon',
+  styleUrl: 'transaction-asset-icon.scss',
   shadow: true,
 })
 export class TransactionAssetIcon {
@@ -24,7 +25,14 @@ export class TransactionAssetIcon {
     }
 
     if (this.transaction.asset.imageUrl) {
-      return <img src={this.transaction.asset.imageUrl} alt="Transaction icon" loading="lazy" />;
+      return (
+        <img
+          src={this.transaction.asset.imageUrl}
+          alt="Transaction icon"
+          loading="lazy"
+          class="transaction-asset-image"
+        />
+      );
     }
 
     if (this.transaction.asset.icon) {

src/components/common/unlock-button/unlock-button.scss

@@ -36,7 +36,7 @@
       @apply mvx:flex mvx:items-center;
 
       svg path {
-        fill: var(--mvx-teal-400);
+        fill: var(--mvx-teal-350);
       }
     }
   }

src/components/common/unlock-button/unlock-button.tsx

@@ -17,7 +17,7 @@ export class UnlockButton {
   @Prop() label: string;
   @Prop() iconUrl: string;
   @Prop() icon?: HTMLElement;
-
+  @Prop() dataTestId?: string;
   @Prop() type?: IProviderBase['type'];
   @Prop() class?: string;
 
@@ -30,7 +30,7 @@ export class UnlockButton {
     const shouldShowOpenLabel = isDetectableProvider && (isExtensionInstalled || isMetaMaskInstalled);
 
     return (
-      <div class={{ 'unlock-button': true, [this.class]: Boolean(this.class) }}>
+      <div data-testid={this.dataTestId} class={{ 'unlock-button': true, [this.class]: Boolean(this.class) }}>
         <div class="unlock-button-label">{this.label}</div>
 
         <div

src/components/controlled/transactions-table/components/transaction-method/transaction-method.scss

@@ -44,19 +44,19 @@ a.badge:focus {
 
 .badge-primary {
   color: var(--mvx-white);
-  background-color: var(--mvx-blue-600);
+  background-color: var(--mvx-blue-650);
 }
 
 a.badge-primary:hover,
 a.badge-primary:focus {
   color: var(--mvx-white);
-  background-color: var(--mvx-blue-700);
+  background-color: var(--mvx-blue-750);
 }
 
 a.badge-primary:focus,
 a.badge-primary.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem var(--mvx-blue-600-50);
+  box-shadow: 0 0 0 0.2rem var(--mvx-blue-650);
 }
 
 .badge-secondary {
@@ -67,7 +67,7 @@ a.badge-primary.focus {
 a.badge-secondary:hover,
 a.badge-secondary:focus {
   color: var(--mvx-white);
-  background-color: var(--mvx-slate-500);
+  background-color: var(--mvx-slate-550);
 }
 
 a.badge-secondary:focus,
@@ -77,7 +77,7 @@ a.badge-secondary.focus {
 
 .badge-success {
   color: var(--mvx-white);
-  background-color: var(--mvx-green-600);
+  background-color: var(--mvx-green-650);
 }
 
 a.badge-success:hover,
@@ -93,13 +93,13 @@ a.badge-success.focus {
 
 .badge-info {
   color: var(--mvx-white);
-  background-color: var(--mvx-cyan-500);
+  background-color: var(--mvx-cyan-550);
 }
 
 a.badge-info:hover,
 a.badge-info:focus {
   color: var(--mvx-white);
-  background-color: var(--mvx-cyan-500);
+  background-color: var(--mvx-cyan-550);
 }
 
 a.badge-info:focus,
@@ -109,14 +109,14 @@ a.badge-info.focus {
 }
 
 .badge-warning {
-  color: var(--mvx-gray-900);
+  color: var(--mvx-gray-925);
   background-color: var(--mvx-yellow-400);
 }
 
 a.badge-warning:hover,
 a.badge-warning:focus {
-  color: var(--mvx-gray-900);
-  background-color: var(--mvx-yellow-600);
+  color: var(--mvx-gray-925);
+  background-color: var(--mvx-yellow-650);
 }
 
 a.badge-warning:focus,
@@ -133,7 +133,7 @@ a.badge-warning.focus {
 a.badge-danger:hover,
 a.badge-danger:focus {
   color: var(--mvx-white);
-  background-color: var(--mvx-red-700);
+  background-color: var(--mvx-red-750);
 }
 
 a.badge-danger:focus,
@@ -143,14 +143,14 @@ a.badge-danger.focus {
 }
 
 .badge-light {
-  color: var(--mvx-gray-900);
-  background-color: var(--mvx-gray-100);
+  color: var(--mvx-gray-925);
+  background-color: var(--mvx-gray-150);
 }
 
 a.badge-light:hover,
 a.badge-light:focus {
-  color: var(--mvx-gray-900);
-  background-color: var(--mvx-gray-300);
+  color: var(--mvx-gray-925);
+  background-color: var(--mvx-gray-250);
 }
 
 a.badge-light:focus,
@@ -161,13 +161,13 @@ a.badge-light.focus {
 
 .badge-dark {
   color: var(--mvx-white);
-  background-color: var(--mvx-gray-800);
+  background-color: var(--mvx-gray-725);
 }
 
 a.badge-dark:hover,
 a.badge-dark:focus {
   color: var(--mvx-white);
-  background-color: var(--mvx-gray-900);
+  background-color: var(--mvx-gray-925);
 }
 
 a.badge-dark:focus,

src/components/controlled/transactions-table/components/transaction-value/transaction-value.scss

@@ -55,7 +55,7 @@
 
 .badge-primary {
   color: var(--mvx-white);
-  background-color: var(--mvx-blue-600);
+  background-color: var(--mvx-blue-650);
 }
 
 .badge-secondary {
@@ -69,8 +69,8 @@
 }
 
 .badge-light {
-  color: var(--mvx-gray-900);
-  background-color: var(--mvx-gray-100);
+  color: var(--mvx-gray-925);
+  background-color: var(--mvx-gray-150);
 }
 
 .text-truncate {

src/components/functional/toasts-list/components/transaction-toast/components/transaction-toast-details/components/transaction-toast-details-body.scss

@@ -20,7 +20,7 @@
     }
 
     .transaction-details-list-item-copy {
-      @apply mvx:visible;
+      @apply mvx:visible!;
     }
   }
 
@@ -48,7 +48,7 @@
 
 .transaction-details-list-item-icon-success {
   background-color: var(--mvx-success-bg-color);
-  
+
   svg,
   .svg-inline--fa {
     color: var(--mvx-success-color) !important;
@@ -85,10 +85,10 @@
 }
 
 .transaction-details-list-item-copy {
-  @apply mvx:flex mvx:invisible;
+  @apply mvx:flex mvx:invisible!;
 
   .transaction-details-list-item-copy-icon {
-    @apply mvx:h-4 mvx:w-4 mvx:flex mvx:flex-col mvx:justify-end mvx:shrink-0 mvx:transition-opacity mvx:duration-200 mvx:ease-in-out ;
+    @apply mvx:h-4 mvx:w-4 mvx:flex mvx:flex-col mvx:justify-end mvx:shrink-0 mvx:transition-opacity mvx:duration-200 mvx:ease-in-out;
     color: var(--mvx-text-color-tertiary);
 
     &:hover {

src/components/functional/unlock-panel/components/unlock-provider-button/unlock-provider-button.tsx

@@ -31,6 +31,7 @@ export class UnlockProviderButton {
         type={this.provider.type}
         class={classNames(this.class, unlockProviderButtonClasses.button)}
         icon={icon}
+        dataTestId={this.provider.type.toString()}
       />
     );
   }