Governor - enhancements (#849)

XLabs · Oct 2, 2024 · 2085473 · 2085473
1 parent e2cce57
commit 2085473
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 68 deletions.
diff --git a/src/components/atoms/Tooltip/styles.scss b/src/components/atoms/Tooltip/styles.scss
@@ -19,8 +19,8 @@
 
     &.info {
       margin: 0 16px;
-      max-width: 100vw;
-      max-width: 100svw;
+      max-width: calc(100vw - 32px);
+      max-width: calc(100svw - 32px);
       padding: 12px 16px;
     }
 

diff --git a/src/pages/Governor/index.tsx b/src/pages/Governor/index.tsx
@@ -5,7 +5,7 @@ import analytics from "src/analytics";
 import { useEnvironment } from "src/context/EnvironmentContext";
 import { BREAKPOINTS, MORE_INFO_GOVERNOR_URL } from "src/consts";
 import { BaseLayout } from "src/layouts/BaseLayout";
-import { BlockchainIcon, NavLink, Select, Tooltip } from "src/components/atoms";
+import { BlockchainIcon, NavLink, Select, ToggleGroup, Tooltip } from "src/components/atoms";
 import { Table } from "src/components/organisms";
 import { getChainName } from "src/utils/wormhole";
 import { formatNumber } from "src/utils/number";
@@ -71,10 +71,10 @@ const Governor = () => {
   const [dataTransactions, setDataTransactions] = useState([]);
   const [openSortBy, setOpenSortBy] = useState(false);
   const [selectedSortBy, setSelectedSortBy] = useState(
-    showTransactions ? SORT_TRANSACTIONS_BY_LIST[4] : SORT_DASHBOARD_BY_LIST[2],
+    showTransactions ? SORT_TRANSACTIONS_BY_LIST[4] : SORT_DASHBOARD_BY_LIST[3],
   );
   const [selectedSortLowHigh, setSelectedSortLowHigh] = useState(
-    showTransactions ? SORT_LOW_HIGH_LIST[0] : SORT_LOW_HIGH_LIST[1],
+    showTransactions ? SORT_LOW_HIGH_LIST[0] : SORT_LOW_HIGH_LIST[0],
   );
   const [sortBy, setSortBy] = useState<{ id: string; desc: boolean }[]>([
     { id: selectedSortBy.value, desc: selectedSortLowHigh.value },
@@ -312,9 +312,9 @@ const Governor = () => {
       setSelectedSortLowHigh(SORT_LOW_HIGH_LIST[0]);
       setSortBy([{ id: SORT_TRANSACTIONS_BY_LIST[4].value, desc: false }]);
     } else {
-      setSelectedSortBy(SORT_DASHBOARD_BY_LIST[2]);
-      setSelectedSortLowHigh(SORT_LOW_HIGH_LIST[1]);
-      setSortBy([{ id: SORT_DASHBOARD_BY_LIST[2].value, desc: true }]);
+      setSelectedSortBy(SORT_DASHBOARD_BY_LIST[3]);
+      setSelectedSortLowHigh(SORT_LOW_HIGH_LIST[0]);
+      setSortBy([{ id: SORT_DASHBOARD_BY_LIST[3].value, desc: false }]);
     }
     setOpenSortBy(false);
   };
@@ -344,32 +344,25 @@ const Governor = () => {
         <div className="governor-container">
           <div className="governor-container-top">
             <div className="governor-container-top-btns">
-              <div>
-                <button
-                  className={!showTransactions ? "active" : ""}
-                  aria-label="Dashboard"
-                  onClick={() => {
-                    setShowTransactions(false);
-                    handleReset(false);
-                  }}
-                >
-                  Dashboard
-                </button>
-
-                <button
-                  className={`transactions ${showTransactions ? "active" : ""}`}
-                  aria-label="Transactions"
-                  onClick={() => {
-                    setShowTransactions(true);
-                    handleReset(true);
-                  }}
-                >
-                  Queued Transactions
-                </button>
-              </div>
+              <ToggleGroup
+                ariaLabel="Select type"
+                items={[
+                  { label: "Dashboard", value: "dashboard", ariaLabel: "Dashboard" },
+                  {
+                    label: "Queued Transactions",
+                    value: "txs",
+                    ariaLabel: "Queued Transactions",
+                  },
+                ]}
+                onValueChange={value => {
+                  setShowTransactions(value === "txs");
+                  handleReset(value === "txs");
+                }}
+                value={showTransactions ? "txs" : "dashboard"}
+              />
 
               <button
-                className="sort-by-btn active"
+                className="sort-by-btn"
                 aria-label="Sort by"
                 onClick={() => setOpenSortBy(!openSortBy)}
               >
@@ -408,7 +401,9 @@ const Governor = () => {
               <ErrorPlaceholder />
             ) : (
               <Table
-                className="governor-container-table-dashboard"
+                className={`governor-container-table-dashboard ${
+                  isDesktop ? "" : "table-mobile-dashboard"
+                }`}
                 columns={columnsDashboard}
                 data={dataDashboard}
                 emptyMessage="There is no data to display."

diff --git a/src/pages/Governor/styles.scss b/src/pages/Governor/styles.scss
@@ -48,37 +48,16 @@
         @include centered-row;
         justify-content: space-between;
 
-        & > div {
-          @include centered-row;
-          gap: 8px;
-        }
-
-        & button {
+        & > .sort-by-btn {
           @include button-secondary;
-          @include centered-row;
-          background-color: transparent;
-          color: var(--color-gray-400);
-
-          &.active {
-            @include button-secondary;
-          }
+          border-radius: 12px;
+          height: 36px;
+          justify-content: center;
+          padding: 0;
+          width: 36px;
 
           @include desktop {
-            & svg {
-              display: none;
-            }
-
-            &.sort-by-btn {
-              display: none;
-            }
-          }
-
-          &.sort-by-btn {
-            border-radius: 12px;
-            height: 36px;
-            justify-content: center;
-            padding: 0;
-            width: 36px;
+            display: none;
           }
         }
       }
@@ -102,7 +81,7 @@
 
         & > div {
           @include centered-row;
-          gap: 8px;
+          gap: 0 8px;
           justify-content: space-between;
           min-height: 24px;
 
@@ -122,7 +101,7 @@
             }
           }
 
-          & > p {
+          & p {
             @include text-heading5;
             color: var(--color-white);
 
@@ -143,6 +122,25 @@
       }
 
       &-dashboard {
+        &.table-mobile-dashboard {
+          & tr {
+            & td:nth-child(1) {
+              order: 1;
+            }
+            & td:nth-child(2) {
+              order: 4;
+              border-bottom: 0;
+            }
+            & td:nth-child(3) {
+              order: 3;
+            }
+            & td:nth-child(4) {
+              order: 2;
+              border-bottom: 1px solid var(--color-gray-900);
+            }
+          }
+        }
+
         & th > .table-head-th-container > svg {
           margin: 0 4px;
         }
@@ -166,6 +164,7 @@
         & .min-remaining {
           @include centered-row;
           justify-content: space-between;
+          flex-wrap: wrap;
 
           @include desktop {
             justify-content: flex-end;
@@ -177,13 +176,16 @@
           }
 
           &-container {
-            position: absolute;
-            right: 16px;
-            top: 16px;
+            @include centered-row;
+            width: 100%;
+            justify-content: flex-end;
+            order: 3;
 
             @include desktop {
+              position: absolute;
               right: 148px;
               top: 0;
+              width: auto;
             }
 
             &-bar {
@@ -370,5 +372,7 @@
 }
 
 .governor-container-table-title-tooltip {
-  max-width: 440px !important;
+  @include tablet {
+    max-width: 440px !important;
+  }
 }
diff --git a/src/pages/Txs/Top/index.tsx b/src/pages/Txs/Top/index.tsx
@@ -52,7 +52,7 @@ const Top = ({ address, addressChainId, liveMode, setLiveMode }: Props) => {
 
       <div className="txs-top-header">
         <h1 className="txs-top-header-title">
-          <SwapVerticalIcon width={24} />
+          <SwapVerticalIcon />
           {t("txs.top.title")}
         </h1>
 

diff --git a/src/pages/Txs/Top/styles.scss b/src/pages/Txs/Top/styles.scss
@@ -75,6 +75,10 @@
       @include centered-row;
       @include text-roboto-subheading-500;
       gap: 8px;
+
+      & > svg {
+        color: var(--color-gray-600);
+      }
     }
 
     &-live-mode {

diff --git a/src/utils/governorUtils.tsx b/src/utils/governorUtils.tsx
@@ -59,6 +59,7 @@ export interface ISelectSortLowHigh {
 export const SingleTxLimitTooltip = () => (
   <Tooltip
     className="governor-container-table-title-tooltip"
+    maxWidth={false}
     tooltip={
       <div>
         Transactions exceeding this single-transaction threshold activate a 24-hour finality delay
@@ -77,6 +78,7 @@ export const SingleTxLimitTooltip = () => (
 export const DailyLimitTooltip = () => (
   <Tooltip
     className="governor-container-table-title-tooltip"
+    maxWidth={false}
     tooltip={
       <div>
         Maximum total value of transactions that can be signed without delay in any 24-hour rolling
@@ -96,6 +98,7 @@ export const DailyLimitTooltip = () => (
 export const RemainingTxLimitTooltip = () => (
   <Tooltip
     className="governor-container-table-title-tooltip"
+    maxWidth={false}
     tooltip={
       <div>
         This shows the remaining value of transaction volume that can be processed without delay