v0.0.9

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()}
       />
     );
   }

src/components/functional/wallet-connect/wallet-connect.types.ts

@@ -1,7 +1,3 @@
-export interface IWalletConnectPanelData {
-  wcURI: string;
-}
-
 export enum WalletConnectEventsEnum {
   CLOSE = 'CLOSE',
   DATA_UPDATE = 'DATA_UPDATE',

src/components/visual/side-panel/components/side-panel-swiper/side-panel-swiper.scss

@@ -0,0 +1,93 @@
+:host {
+  @apply mvx:flex;
+
+  @media (min-width: 480px) {
+    @apply mvx:flex-col mvx:h-full;
+  }
+
+  .side-panel-swiper-wrapper {
+    @apply mvx:fixed mvx:left-0 mvx:top-0 mvx:bottom-0 mvx:right-0 mvx:z-50;
+
+    @media (min-width: 480px) {
+      @apply mvx:static mvx:h-full;
+    }
+
+    &:before {
+      @apply mvx:opacity-90 mvx:left-0 mvx:top-0 mvx:right-0 mvx:bottom-0 mvx:transition-all mvx:duration-200;
+      @apply mvx:pointer-events-none mvx:absolute mvx:ease-in-out;
+      background: var(--mvx-neutral-900);
+      content: '';
+
+      @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+        @apply mvx:opacity-50;
+        background: var(--mvx-neutral-900);
+        -webkit-backdrop-filter: blur(0.375rem);
+        backdrop-filter: blur(0.375rem);
+      }
+
+      @media (min-width: 480px) {
+        content: none;
+      }
+    }
+
+    &.visible {
+      @apply mvx:block;
+    }
+
+    &.hidden {
+      @apply mvx:hidden;
+
+      @media (min-width: 480px) {
+        @apply mvx:block;
+      }
+
+      .side-panel-swiper {
+        @apply mvx:translate-y-full;
+      }
+    }
+
+    .side-panel-swiper {
+      @apply mvx:bottom-0 mvx:absolute mvx:left-0 mvx:right-0 mvx:flex mvx:flex-col mvx:justify-end mvx:touch-pan-y;
+      @apply mvx:h-auto mvx:min-h-dvh mvx:rounded-t-3xl mvx:transition-none;
+      backface-visibility: hidden;
+      will-change: transform;
+
+      @media (min-width: 480px) {
+        @apply mvx:h-full mvx:static mvx:rounded-none mvx:transform-none;
+        justify-content: unset;
+        min-height: auto;
+      }
+
+      .side-panel-swiper-handle-wrapper {
+        @apply mvx:top-8 mvx:relative mvx:h-8 mvx:w-full mvx:z-12;
+
+        @media (min-width: 480px) {
+          @apply mvx:hidden;
+        }
+
+        .side-panel-swiper-handle-container {
+          @apply mvx:flex mvx:top-0 mvx:bottom-0 mvx:absolute mvx:right-0 mvx:left-0 mvx:justify-center;
+          @apply mvx:touch-none mvx:select-none mvx:cursor-grab;
+
+          &:active {
+            @apply mvx:cursor-grabbing;
+          }
+
+          .side-panel-swiper-handle {
+            @apply mvx:w-32 mvx:mt-3 mvx:h-1 mvx:rounded;
+            background-color: var(--mvx-text-color-primary);
+          }
+        }
+      }
+
+      .side-panel-swiper-content {
+        @apply mvx:overflow-y-auto;
+        max-height: calc(100dvh - 4rem);
+
+        @media (min-width: 480px) {
+          @apply mvx:max-h-none mvx:h-full;
+        }
+      }
+    }
+  }
+}