NTT page & Txs list improvements (#897)

* txs list and ntt page improvements * unnecessary code removed * fixes * fixes2 * unnecessary line removed * onrowclick * styles * styles2 * table-body-empty * onRowClick desktop * scroll horizontal for mobile fixed * circulatingSupply * tooltips * styless * text removed
XLabs · Nov 20, 2024 · de23abe · de23abe
1 parent a1aa3e9
commit de23abe
Show file tree

Hide file tree

Showing 21 changed files with 473 additions and 596 deletions.
diff --git a/src/components/atoms/Pagination/styles.scss b/src/components/atoms/Pagination/styles.scss
@@ -27,10 +27,10 @@
     border: 1px solid var(--color-gray-900);
     color: var(--color-gray-400);
     cursor: pointer;
-    height: 36px;
     justify-content: center;
+    min-height: 36px;
+    min-width: 36px;
     text-align: center;
-    width: 36px;
 
     &:disabled {
       cursor: not-allowed;

diff --git a/src/components/molecules/WormholeStats/styles.scss b/src/components/molecules/WormholeStats/styles.scss
@@ -23,8 +23,7 @@
 
   &-container {
     display: grid;
-    row-gap: 36px;
-    column-gap: 20px;
+    gap: 36px 0;
     grid-template-columns: repeat(2, 1fr);
     padding-bottom: 40px;
     position: relative;

diff --git a/src/components/organisms/Table/index.tsx b/src/components/organisms/Table/index.tsx
@@ -17,10 +17,11 @@ type Props<T extends object> = {
   className?: string;
   columns: Column<T>[];
   data: T[];
-  emptyMessage?: string;
+  emptyMessage?: string | JSX.Element;
   hasSort?: boolean;
   isLoading?: boolean;
   numberOfColumns?: number;
+  numberOfRows?: number;
   onRowClick?: (row: any) => void;
   sortBy?: { id: string; desc: boolean }[];
   trackTxsSortBy?: boolean;
@@ -38,6 +39,7 @@ const Table = <T extends object>({
   hasSort = false,
   isLoading = false,
   numberOfColumns = 7,
+  numberOfRows = 50,
   onRowClick,
   sortBy = [],
   trackTxsSortBy = false,
@@ -126,7 +128,7 @@ const Table = <T extends object>({
         </thead>
         {isLoading ? (
           <tbody>
-            {[...Array(50)].map((_, index) => (
+            {[...Array(numberOfRows)].map((_, index) => (
               <tr key={index}>
                 <td className="table-row-loading" colSpan={numberOfColumns}>
                   <span className="loading-animation"></span>

diff --git a/src/components/organisms/Table/styles.scss b/src/components/organisms/Table/styles.scss
@@ -78,15 +78,6 @@
         padding: 16px 0;
         margin: 0 16px;
 
-        &:first-child {
-          border: none;
-          padding-bottom: 8px;
-
-          @include desktop {
-            padding-bottom: 0;
-          }
-        }
-
         &:last-child {
           border: none;
           text-align: end;
@@ -232,5 +223,5 @@
   @include text-roboto-body-400;
   color: var(--color-gray-400);
   justify-content: center;
-  margin-top: 12px;
+  margin: 16px 0;
 }
diff --git a/src/pages/Analytics/NTT/NTTToken/Metrics.tsx b/src/pages/Analytics/NTT/NTTToken/Metrics.tsx
@@ -25,42 +25,50 @@ export const Metrics = ({ isError, isLoading, summary }: IMetricsProps) => {
         ) : (
           <>
             <div className="summary-metrics-container-item">
-              <div className="summary-metrics-container-item-label">Total value transferred</div>
+              <div className="summary-metrics-container-item-label">
+                Total value transferred
+                <MetricsTooltip text="Total USD value of all transfers made using this token." />
+              </div>
               <h3 className="summary-metrics-container-item-value">
                 ${isError ? " -" : renderValue(summary?.totalValueTokenTransferred)}
               </h3>
             </div>
 
             <div className="summary-metrics-container-item">
               <div className="summary-metrics-container-item-label">
-                Fully diluted valuation (FDV)
-                <Tooltip tooltip="FDV=Current Price x Total Supply" type="info">
-                  <div className="summary-metrics-container-item-label-icon">
-                    <InfoCircleIcon />
-                  </div>
-                </Tooltip>
+                Fully diluted valuation
+                <MetricsTooltip text="Current price x Total Supply. Theoretical market value if the entire supply was circulating." />
               </div>
               <h3 className="summary-metrics-container-item-value">
                 {isError ? " -" : renderValue(summary?.fullyDilutedValuation)}
               </h3>
             </div>
 
             <div className="summary-metrics-container-item">
-              <div className="summary-metrics-container-item-label">Market Cap</div>
+              <div className="summary-metrics-container-item-label">
+                Market Cap
+                <MetricsTooltip text="Current price x Circulating Supply. The current value of circulating tokens in USD." />
+              </div>
               <h3 className="summary-metrics-container-item-value">
                 ${isError ? " -" : renderValue(summary?.marketCap)}
               </h3>
             </div>
 
             <div className="summary-metrics-container-item">
-              <div className="summary-metrics-container-item-label">Total Supply</div>
+              <div className="summary-metrics-container-item-label">
+                Circulating Supply
+                <MetricsTooltip text="The number of tokens currently circulating in the market and available to the public." />
+              </div>
               <h3 className="summary-metrics-container-item-value">
-                {isError ? " -" : renderValue(summary?.totalSupply)}
+                {isError ? " -" : renderValue(summary?.circulatingSupply)}
               </h3>
             </div>
 
             <div className="summary-metrics-container-item">
-              <div className="summary-metrics-container-item-label">Total token transfers</div>
+              <div className="summary-metrics-container-item-label">
+                Total token transfers
+                <MetricsTooltip text="Total number of transactions involving this token." />
+              </div>
               <h3 className="summary-metrics-container-item-value">
                 {isError ? " -" : renderValue(summary?.totalTokenTransferred)}
               </h3>
@@ -71,3 +79,11 @@ export const Metrics = ({ isError, isLoading, summary }: IMetricsProps) => {
     </div>
   );
 };
+
+const MetricsTooltip = ({ text }: { text: string }) => (
+  <Tooltip tooltip={text} type="info">
+    <div className="summary-metrics-container-item-label-icon">
+      <InfoCircleIcon />
+    </div>
+  </Tooltip>
+);