interface fixes

multiversx · Mar 15, 2024 · 7b2b1de · 7b2b1de
1 parent 52d3ff1
commit 7b2b1de
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 18 deletions.
diff --git a/src/assets/scss/_shared-styles.scss b/src/assets/scss/_shared-styles.scss
@@ -483,3 +483,11 @@ img.loading {
     );
   background-size: contain;
 }
+
+.text-break {
+  word-wrap: break-word;
+  word-break: break-word;
+  white-space: break-spaces;
+  overflow-wrap: break-word; // inline elements
+  line-break: auto; // characters
+}
diff --git a/src/components/HeroDetailsCard/HeroDetailsCard.tsx b/src/components/HeroDetailsCard/HeroDetailsCard.tsx
@@ -139,7 +139,7 @@ export const HeroDetailsCard = ({
             <div className='hero-details-card-overview d-flex flex-column flex-fill col-9'>
               {title && (
                 <div
-                  className={classNames('hero-details-card-title', {
+                  className={classNames('hero-details-card-title text-break', {
                     'mb-spacer': !Boolean(description || descriptionContent)
                   })}
                 >
@@ -173,9 +173,9 @@ export const HeroDetailsCard = ({
                       })}
                       data-testid={`${testIdPrefix}title`}
                     >
-                      <span>{title}</span>{' '}
+                      <span className='title-container'>{title}</span>
                       {isVerified && (
-                        <>{verifiedComponent ?? <VerifiedBadge />}</>
+                        <> {verifiedComponent ?? <VerifiedBadge />}</>
                       )}
                     </h1>
                   </div>

diff --git a/src/components/HeroDetailsCard/heroDetailsCard.styles.scss b/src/components/HeroDetailsCard/heroDetailsCard.styles.scss
@@ -61,7 +61,7 @@
       @include media-breakpoint-up(xxl) {
         &.has-content {
           display: contents;
-          span {
+          .title-container {
             display: block;
             max-width: 46rem;
             overflow: hidden;
@@ -72,17 +72,19 @@
         }
       }
       .trim {
-        max-width: calc(90vw - 4rem);
+        max-width: calc(90vw - 5rem);
         letter-spacing: normal;
-        span {
+        .left span,
+        .right span,
+        .ellipsis {
           font-size: 1.5rem;
           letter-spacing: normal;
+          @include media-breakpoint-up(md) {
+            font-size: 2.5rem;
+          }
         }
         @include media-breakpoint-up(md) {
           max-width: 32rem;
-          span {
-            font-size: 2.5rem;
-          }
         }
         @include media-breakpoint-up(lg) {
           max-width: 44rem;

diff --git a/src/components/Trim/trim.styles.scss b/src/components/Trim/trim.styles.scss
@@ -74,6 +74,13 @@
       color: var(--primary-200);
     }
   }
+  &.text-neutral-400 {
+    .ellipsis,
+    .left span,
+    .right span {
+      color: var(--neutral-400);
+    }
+  }
 
   /* IE fix */
   @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

diff --git a/...ionDetails/components/TransactionInfo/TransactionErrorDisplay/TransactionErrorDisplay.tsx b/...ionDetails/components/TransactionInfo/TransactionErrorDisplay/TransactionErrorDisplay.tsx
@@ -68,7 +68,9 @@ export const TransactionErrorDisplay = ({
             transform={{ rotate: 45 }}
           />
           <div className='d-flex flex-wrap'>
-            <small className={`${messageColor} transaction-error-message me-1`}>
+            <small
+              className={`${messageColor} transaction-error-message text-break me-1`}
+            >
               {capitalizeFirstLetter(transactionMessage.toString().trim())}
             </small>
             <div className='d-flex align-items-center justify-content-center gap-1'>
@@ -111,7 +113,7 @@ export const TransactionErrorDisplay = ({
             style={{ marginTop: '2px' }}
             transform={{ rotate: 45 }}
           />
-          <small className='transaction-error-message text-danger'>
+          <small className='transaction-error-message text-break text-danger'>
             Block Reverted
           </small>
         </div>

diff --git a/src/pages/TransactionDetails/components/TransactionInfo/transactionInfo.styles.scss b/src/pages/TransactionDetails/components/TransactionInfo/transactionInfo.styles.scss
@@ -5,11 +5,6 @@
 .transaction-info {
   .transaction-error-message {
     font-size: 0.75rem; // use rem instead of em because on long texts Chrome breaks the layout
-    word-wrap: break-word;
-    word-break: break-word;
-    white-space: break-spaces;
-    overflow-wrap: break-word; // inline elements
-    line-break: auto; // characters
   }
 
   .status-success {

diff --git a/src/types/growthWidgets/mostUsed.types.ts b/src/types/growthWidgets/mostUsed.types.ts
@@ -20,6 +20,7 @@ export interface MostUsedApplicationsType extends MostUsedBaseType {
   extraInfo?: {
     assets?: AccountAssetType;
     deployedAt?: number;
+    isVerified?: boolean;
   };
 }
 

diff --git a/src/widgets/MostUsed/MostUsedApplications.tsx b/src/widgets/MostUsed/MostUsedApplications.tsx
@@ -3,10 +3,10 @@ import BigNumber from 'bignumber.js';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 
-import { Loader, ShowcaseCard, Trim, NetworkLink } from 'components';
+import { Loader, Overlay, ShowcaseCard, Trim, NetworkLink } from 'components';
 import { urlBuilder, addressIsBech32 } from 'helpers';
 import { useIsMainnet, useFetchGrowthMostUsed, useScollInView } from 'hooks';
-import { faAngleLeft, faAngleRight } from 'icons/solid';
+import { faAngleLeft, faAngleRight, faBadgeCheck } from 'icons/solid';
 import { growthMostUsedSelector } from 'redux/selectors';
 import { applicationsRoutes } from 'routes';
 import { WithClassnameType } from 'types';
@@ -121,6 +121,18 @@ export const MostUsedApplications = ({
                               {contract.extraInfo?.assets?.name ?? (
                                 <Trim text={contract.key} />
                               )}
+                              {contract.extraInfo?.isVerified && (
+                                <Overlay
+                                  title='Verified'
+                                  className='ms-1 d-inline-flex align-self-center'
+                                >
+                                  <FontAwesomeIcon
+                                    icon={faBadgeCheck}
+                                    size='2xs'
+                                    className='text-primary'
+                                  />
+                                </Overlay>
+                              )}
                             </span>
                           }
                           icon={