Merge pull request #118 from multiversx/development

Development
multiversx · Aug 23, 2024 · 803d39f · 803d39f
2 parents 096607c + ad76f62
commit 803d39f
Show file tree

Hide file tree

Showing 55 changed files with 1,074 additions and 454 deletions.
diff --git a/src/appConstants/apiFields.ts b/src/appConstants/apiFields.ts
@@ -42,6 +42,7 @@ export const PROVIDERS_FIELDS = [
 export const NODE_STATUS_PREVIEW_FIELDS = [
   'bls',
   'status',
+  'type',
   'auctionQualified',
   'isInDangerZone'
 ];
diff --git a/src/assets/scss/components/_components.scss b/src/assets/scss/components/_components.scss
@@ -4,6 +4,7 @@
 @import '../../../components/Chart/chart.styles.scss';
 @import '../../../components/DataDecode/dataDecode.styles.scss';
 @import '../../../components/DetailItem/detailItem.styles.scss';
+@import '../../../components/ExpandRow/expandRow.styles.scss';
 @import '../../../components/FormatValue/formatValue.styles.scss';
 @import '../../../components/HeroDetailsCard/heroDetailsCard.styles.scss';
 @import '../../../components/LatestItem/latestItem.styles.scss';

diff --git a/src/components/ExpandRow/ExpandRow.tsx b/src/components/ExpandRow/ExpandRow.tsx
@@ -0,0 +1,47 @@
+import BigNumber from 'bignumber.js';
+import classNames from 'classnames';
+import { WithClassnameType } from 'types';
+
+interface ExpandRowUIType extends WithClassnameType {
+  onClick: () => void;
+  count?: number;
+  text?: string;
+  linkText?: string;
+  colSpan?: number;
+}
+
+export const ExpandRow = ({
+  count,
+  text,
+  onClick,
+  colSpan,
+  linkText = 'View All',
+  className
+}: ExpandRowUIType) => {
+  return (
+    <tr className={classNames('expand-row', className)}>
+      <td colSpan={colSpan}>
+        <div className='content-wrapper text-neutral-400 d-flex align-items-start font-headings-regular gap-3'>
+          <span>
+            {count && text && (
+              <>
+                .. {new BigNumber(count).toFormat()} {text}
+              </>
+            )}
+          </span>
+          <button
+            type='button'
+            className='btn btn-link-unstyled text-primary font-weight-600'
+            onClick={onClick}
+          >
+            {linkText}
+          </button>
+        </div>
+        <div className='trapezoid'></div>
+        <div className='trapezoid reverse'></div>
+        <div className='trapezoid'></div>
+        <div className='trapezoid reverse'></div>
+      </td>
+    </tr>
+  );
+};
diff --git a/src/components/ExpandRow/expandRow.styles.scss b/src/components/ExpandRow/expandRow.styles.scss
@@ -0,0 +1,38 @@
+.expand-row {
+  td {
+    position: relative;
+    padding: 0 !important;
+    border-bottom-width: 0;
+  }
+  .trapezoid {
+    background-color: var(--table-bg);
+    transform: perspective(10rem) rotateX(-10deg);
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--table-border-color);
+    height: 1rem;
+    margin-left: 5px;
+    margin-right: 5px;
+    border-top-width: 0;
+    &.reverse {
+      margin-top: -1px;
+      transform: perspective(10rem) rotateX(10deg);
+    }
+  }
+  .content-wrapper {
+    position: absolute;
+    z-index: 1;
+    background-color: var(--neutral-950);
+    padding: 0.25rem 1rem;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: fit-content;
+    height: fit-content;
+    margin: auto;
+    button {
+      line-height: 1.4;
+    }
+  }
+}
diff --git a/src/components/ExpandRow/index.ts b/src/components/ExpandRow/index.ts
@@ -0,0 +1 @@
+export * from './ExpandRow';
diff --git a/src/components/FormatValue/FormatAmount/FormatAmount.tsx b/src/components/FormatValue/FormatAmount/FormatAmount.tsx
@@ -17,6 +17,7 @@ export interface FormatAmountUIType extends SdkDappFormatAmountType {
   showSymbol?: boolean;
   superSuffix?: boolean;
   showUsdValue?: boolean;
+  decimalOpacity?: boolean;
   usd?: string | number;
 }
 

diff --git a/src/components/FormatValue/FormatDisplayValue/FormatDisplayValue.tsx b/src/components/FormatValue/FormatDisplayValue/FormatDisplayValue.tsx
@@ -34,6 +34,7 @@ export const FormatDisplayValue = (props: FormatDisplayValueUIType) => {
     showTooltipSymbol = false,
     showTooltipLabel = false,
     spacedLabel = false,
+    decimalOpacity = true,
     className
   } = props;
 
@@ -61,7 +62,7 @@ export const FormatDisplayValue = (props: FormatDisplayValueUIType) => {
         return (
           <>
             <span className='am'>{valueParts[0]}</span>
-            <span className='dec'>
+            <span className={classNames('dec', { opc: decimalOpacity })}>
               .0<sub>{firstNonZeroIndex - 2}</sub>0{nonZeroDecimals.join('')}
             </span>
           </>
@@ -73,7 +74,9 @@ export const FormatDisplayValue = (props: FormatDisplayValueUIType) => {
       <>
         <span className='am'>{valueParts[0]}</span>
         {valueParts[1] && !areAllDigitsZeroes && (
-          <span className='dec'>.{valueParts[1]}</span>
+          <span className={classNames('dec', { opc: decimalOpacity })}>
+            .{valueParts[1]}
+          </span>
         )}
       </>
     );
@@ -126,9 +129,11 @@ export const FormatDisplayValue = (props: FormatDisplayValueUIType) => {
       {showLabel && displayLabel && (
         <>
           {superSuffix ? (
-            <sup className='suf'>{displayLabel}</sup>
+            <sup className={classNames('suf', { opc: decimalOpacity })}>
+              {displayLabel}
+            </sup>
           ) : (
-            <span className='suf'>
+            <span className={classNames('suf', { opc: decimalOpacity })}>
               {spacedLabel && <>&nbsp;</>}
               {displayLabel}
             </span>

diff --git a/src/components/FormatValue/FormatNumber/FormatNumber.tsx b/src/components/FormatValue/FormatNumber/FormatNumber.tsx
@@ -11,10 +11,12 @@ export interface FormatNumberUIType extends Omit<FormatAmountUIType, 'value'> {
   value: string | number | BigNumber;
   label?: string;
   symbol?: React.ReactNode;
+  maxDigits?: number;
+  hideLessThanOne?: boolean;
 }
 
 export const FormatNumber = (props: FormatNumberUIType) => {
-  const { value, symbol, label, className } = props;
+  const { value, symbol, label, hideLessThanOne, maxDigits, className } = props;
   const bNamount = BigNumber.isBigNumber(value) ? value : new BigNumber(value);
   const completeValue = bNamount.toFormat();
 
@@ -31,9 +33,13 @@ export const FormatNumber = (props: FormatNumberUIType) => {
     );
   }
 
-  const formattedValue = bNamount.isInteger()
+  let formattedValue = bNamount.isInteger()
     ? completeValue
-    : formatBigNumber({ value: bNamount });
+    : formatBigNumber({ value: bNamount, maxDigits });
+
+  if (hideLessThanOne && bNamount.isLessThan(1)) {
+    formattedValue = '< 1';
+  }
 
   return (
     <FormatDisplayValue

diff --git a/src/components/FormatValue/formatValue.styles.scss b/src/components/FormatValue/formatValue.styles.scss
@@ -4,7 +4,9 @@
   text-overflow: ellipsis;
   .suf,
   .dec {
-    opacity: 0.75;
+    &.opc {
+      opacity: 0.75;
+    }
   }
   sup {
     margin-left: 0.125rem;

diff --git a/src/components/MultilayerPercentage/MultilayerPercentageRing/MultilayerPercentageRing.tsx b/src/components/MultilayerPercentage/MultilayerPercentageRing/MultilayerPercentageRing.tsx
@@ -21,6 +21,7 @@ export const prepareChartData = (steps: MultilayerPercentageStepType[]) => {
 export const MultilayerPercentageRing = ({
   steps,
   hasTrim,
+  hasChart = true,
   className,
   legendClassName
 }: MultilayerPercentageUIType) => {
@@ -36,20 +37,22 @@ export const MultilayerPercentageRing = ({
         className
       )}
     >
-      <PieChart width={40} height={40} className='composed-pie-chart'>
-        <Pie
-          data={hasTrim ? prepareChartData(steps) : steps}
-          dataKey='value'
-          nameKey='name'
-          cx='50%'
-          cy='50%'
-          innerRadius={10}
-          outerRadius={20}
-          stroke='none'
-          startAngle={90}
-          endAngle={-270}
-        />
-      </PieChart>
+      {hasChart && (
+        <PieChart width={40} height={40} className='composed-pie-chart'>
+          <Pie
+            data={hasTrim ? prepareChartData(steps) : steps}
+            dataKey='value'
+            nameKey='name'
+            cx='50%'
+            cy='50%'
+            innerRadius={10}
+            outerRadius={20}
+            stroke='none'
+            startAngle={90}
+            endAngle={-270}
+          />
+        </PieChart>
+      )}
 
       <div
         className={classNames(

diff --git a/src/components/MultilayerPercentage/types.ts b/src/components/MultilayerPercentage/types.ts
@@ -3,6 +3,7 @@ import { WithClassnameType } from 'types';
 export interface MultilayerPercentageUIType extends WithClassnameType {
   steps: MultilayerPercentageStepType[];
   hasTrim?: boolean;
+  hasChart?: boolean;
   hasSeparator?: boolean;
   legendClassName?: string;
 }

diff --git a/src/components/Nodes/AuctionListTable/AuctionListExpandRow.tsx b/src/components/Nodes/AuctionListTable/AuctionListExpandRow.tsx
@@ -1,8 +1,7 @@
 import BigNumber from 'bignumber.js';
 import classNames from 'classnames';
 
-import { WithClassnameType } from 'types';
-
+import { ExpandRow } from 'components';
 import { AuctionListBaseRow } from './AuctionListBaseRow';
 import { ExpandRowConfigType, AuctionListBaseRowUIType } from './types';
 
@@ -12,44 +11,6 @@ export interface NodesAuctionListExpandRowUIType
   colSpan?: number;
 }
 
-interface ExpandRowUIType extends WithClassnameType {
-  validatorCount: number;
-  validatorText: string;
-  onClick: () => void;
-  colSpan?: number;
-}
-
-const ExpandRow = ({
-  validatorCount,
-  validatorText,
-  onClick,
-  colSpan,
-  className
-}: ExpandRowUIType) => {
-  return (
-    <tr className={classNames('expand-row', className)}>
-      <td colSpan={colSpan}>
-        <div className='content-wrapper text-neutral-400 d-flex align-items-start font-headings-regular gap-3'>
-          <span>
-            .. {new BigNumber(validatorCount).toFormat()} more {validatorText}
-          </span>
-          <button
-            type='button'
-            className='btn btn-link-unstyled text-primary font-weight-600'
-            onClick={onClick}
-          >
-            View All
-          </button>
-        </div>
-        <div className='trapezoid'></div>
-        <div className='trapezoid reverse'></div>
-        <div className='trapezoid'></div>
-        <div className='trapezoid reverse'></div>
-      </td>
-    </tr>
-  );
-};
-
 export const AuctionListExpandRow = ({
   colSpan = 7,
   index,
@@ -121,8 +82,8 @@ export const AuctionListExpandRow = ({
   ) {
     return (
       <ExpandRow
-        validatorCount={remainingQualifiedValidators}
-        validatorText='Qualified validators'
+        count={remainingQualifiedValidators}
+        text='more Qualified validators'
         onClick={() => {
           setQualifiedExpanded(true);
           return;
@@ -139,8 +100,8 @@ export const AuctionListExpandRow = ({
   ) {
     return (
       <ExpandRow
-        validatorCount={remainingNotQualifiedValidators}
-        validatorText='Not Qualified validators'
+        count={remainingNotQualifiedValidators}
+        text='more Not Qualified validators'
         onClick={() => {
           setNotQualifiedExpanded(true);
           return;

diff --git a/src/components/Nodes/AuctionListTable/auctionListTables.styles.scss b/src/components/Nodes/AuctionListTable/auctionListTables.styles.scss
@@ -35,44 +35,6 @@
         }
       }
     }
-    &.expand-row {
-      td {
-        position: relative;
-        padding: 0;
-        border-bottom-width: 0;
-      }
-      .trapezoid {
-        background-color: var(--table-bg);
-        transform: perspective(10rem) rotateX(-10deg);
-        border-width: 1px;
-        border-style: solid;
-        border-color: inherit;
-        height: 1rem;
-        margin-left: 5px;
-        margin-right: 5px;
-        border-top-width: 0;
-        &.reverse {
-          margin-top: -1px;
-          transform: perspective(10rem) rotateX(10deg);
-        }
-      }
-      .content-wrapper {
-        position: absolute;
-        z-index: 1;
-        background-color: var(--neutral-950);
-        padding: 0.25rem 1rem;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        width: fit-content;
-        height: fit-content;
-        margin: auto;
-        button {
-          line-height: 1.4;
-        }
-      }
-    }
   }
 }