v3.2.6

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[v3.2.6](https://github.com/multiversx/mx-sdk-dapp/pull/1382)] - 2025-03-11
+
+- [Fixed sign screen layout and move decoder styles inside the package](https://github.com/multiversx/mx-sdk-dapp/pull/1381)
+
 ## [[v3.2.5](https://github.com/multiversx/mx-sdk-dapp/pull/1379)] - 2025-03-11
 
 - [Fixed websocket connection and falback mechanism](https://github.com/multiversx/mx-sdk-dapp/pull/1378)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp",
-  "version": "3.2.5",
+  "version": "3.2.6",
   "description": "A library to hold the main logic for a dapp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",

src/UI/SignTransactionsModals/SignWithDeviceModal/signWithDeviceModalStyles.scss

@@ -57,7 +57,7 @@
   }
 
   &.spaced {
-    padding: 16px 16px 32px;
+    padding: 16px;
 
     @media (min-width: 768px) {
       padding: 40px;
@@ -109,45 +109,59 @@
 
   .sign-buttons {
     display: flex;
-    flex-direction: column;
-    padding-top: 16px;
     margin-top: auto;
+    gap: 12px;
+
+    .sign-button-cancel {
+      background: transparent;
+      transition: all 200ms ease-out;
+      border: none;
+      font-size: 16px;
+      font-weight: 500;
+      margin-top: 24px;
+      text-align: center;
+      padding: 0;
+      border-radius: 8px;
+      background: #262626;
+      color: #e5e5e5 !important;
+      min-width: 96px;
+
+      @media (min-width: 768px) {
+        margin-top: 32px;
+      }
+
+      @media (min-width: 992px) {
+        padding: 16px 24px;
+      }
+
+      &:hover {
+        background-color: #23f7dd;
+        color: #171717 !important;
+      }
+    }
 
     .sign-button-submit {
       transition: all 200ms ease-out;
-      margin: 32px auto 0;
       align-self: center;
       line-height: 1;
       font-family: 'Inter';
       font-size: 16px;
       font-weight: 600;
-      padding: 16px 24px;
       border-radius: 8px;
       cursor: pointer;
       display: inline-flex;
       justify-content: center;
       align-items: center;
       width: auto;
-      order: -1;
+      margin: 24px 0 0;
+      flex: 1;
 
       @media (min-width: 768px) {
-        margin-top: 40px;
+        margin-top: 32px;
       }
-    }
 
-    .sign-button-cancel {
-      background: transparent;
-      transition: all 200ms ease-out;
-      border: none;
-      color: #23f7dd;
-      font-size: 16px;
-      font-weight: 500;
-      margin-top: 24px;
-      text-align: center;
-      padding: 0;
-
-      @media (min-width: 768px) {
-        margin-top: 32px;
+      @media (min-width: 992px) {
+        padding: 16px 24px;
       }
     }
   }

src/UI/TransactionData/TransactionData.tsx

@@ -222,7 +222,7 @@ const TransactionDataComponent = ({
 };
 
 export const TransactionData = withStyles(TransactionDataComponent, {
-  ssrStyles: () => import('UI/TransactionData/TransactionDataStyles.scss'),
+  ssrStyles: () => import('UI/TransactionData/transactionDataStyles.scss'),
   clientStyles: () =>
-    require('UI/TransactionData/TransactionDataStyles.scss').default
+    require('UI/TransactionData/transactionDataStyles.scss').default
 });

src/UI/TransactionData/components/TransactionDataDecode.tsx → src/UI/TransactionData/components/TransactionDataDecode/TransactionDataDecode.tsx

@@ -3,27 +3,22 @@ import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import capitalize from 'lodash/capitalize';
+
 import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
+import { withStyles } from 'hocs/withStyles';
 import { DecodeMethodEnum } from 'types';
 import { decodeForDisplay } from 'utils/transactions/transactionInfoHelpers/decodeForDisplay';
-import { WithClassnameType } from '../../types';
-
-interface SelectOptionType {
-  label: string;
-  value: string;
-}
-
-interface TransactionDataDecodePropsType extends WithClassnameType {
-  data: string;
-  onDecode: (decodedData: string) => void;
-  onDecodeError: (errors: string[]) => void;
-}
+import {
+  SelectOptionType,
+  TransactionDataDecodePropsType
+} from './transactionDataDecode.types';
 
-export const TransactionDataDecode = ({
+const TransactionDataDecodeComponent = ({
   className,
   data,
   onDecodeError,
-  onDecode
+  onDecode,
+  styles
 }: TransactionDataDecodePropsType) => {
   const rawMethodStr = capitalize(DecodeMethodEnum.raw.toString());
   const [method, setMethod] = useState<SelectOptionType>({
@@ -64,9 +59,9 @@ export const TransactionDataDecode = ({
   }, [method, data]);
 
   return (
-    <div className={classNames('transaction-data-decode', className)}>
+    <div className={classNames(styles?.transactionDataDecode, className)}>
       <select
-        className='transaction-data-decode-select'
+        className={styles?.transactionDataDecodeSelect}
         data-testid={DataTestIdsEnum.transactionDataDecode}
         value={method.value}
         onChange={handleSelect}
@@ -77,10 +72,24 @@ export const TransactionDataDecode = ({
           </option>
         ))}
       </select>
+
       <FontAwesomeIcon
         icon={faChevronDown}
-        className='transaction-data-decode-select-icon'
+        className={styles?.transactionDataDecodeSelectIcon}
       />
     </div>
   );
 };
+
+export const TransactionDataDecode = withStyles(
+  TransactionDataDecodeComponent,
+  {
+    ssrStyles: () =>
+      import(
+        'UI/TransactionData/components/TransactionDataDecode/transactionDataDecodeStyles.scss'
+      ),
+    clientStyles: () =>
+      require('UI/TransactionData/components/TransactionDataDecode/transactionDataDecodeStyles.scss')
+        .default
+  }
+);

src/UI/TransactionData/components/TransactionDataDecode/transactionDataDecode.types.ts

@@ -0,0 +1,15 @@
+import { WithStylesImportType } from 'hocs/useStyles';
+import { WithClassnameType } from 'UI/types';
+
+export interface SelectOptionType {
+  label: string;
+  value: string;
+}
+
+export interface TransactionDataDecodePropsType
+  extends WithClassnameType,
+    WithStylesImportType {
+  data: string;
+  onDecode: (decodedData: string) => void;
+  onDecodeError: (errors: string[]) => void;
+}

src/UI/TransactionData/components/TransactionDataDecode/transactionDataDecodeStyles.scss

@@ -0,0 +1,45 @@
+.transaction-data-decode {
+  position: absolute;
+  margin-bottom: 16px;
+  right: 0;
+  width: 120px;
+
+  .transaction-data-decode-select {
+    appearance: none;
+    background-color: var(--action-bg);
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    font-size: 12px;
+    line-height: 1;
+    min-height: 32px;
+    padding: 0 24px 0 0;
+    text-align: center;
+    transition: var(--transition);
+    width: 100%;
+
+    &:hover,
+    &:focus {
+      background-color: var(--action-bg-light);
+
+      & + .transaction-data-decode-select-icon {
+        color: var(--primary) !important;
+      }
+    }
+  }
+
+  .transaction-data-decode-select-icon {
+    color: var(--muted);
+    font-size: 12px;
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    transform-origin: center;
+    transition: var(--transition);
+  }
+
+  .transaction-data-decode-select:focus + .transaction-data-decode-select-icon {
+    transform: translateY(-50%) rotate(180deg);
+  }
+}

src/UI/TransactionData/components/index.ts

@@ -0,0 +1 @@
+export * from './TransactionDataDecode';