Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Governor - enhancements #849

Merged
merged 2 commits into from
Oct 2, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/atoms/Tooltip/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
57 changes: 26 additions & 31 deletions src/pages/Governor/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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 },
Expand Down Expand Up @@ -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);
};
Expand Down Expand Up @@ -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)}
>
Expand Down Expand Up @@ -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."
Expand Down
72 changes: 38 additions & 34 deletions src/pages/Governor/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
Expand All @@ -102,7 +81,7 @@

& > div {
@include centered-row;
gap: 8px;
gap: 0 8px;
justify-content: space-between;
min-height: 24px;

Expand All @@ -122,7 +101,7 @@
}
}

& > p {
& p {
@include text-heading5;
color: var(--color-white);

Expand All @@ -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;
}
Expand All @@ -166,6 +164,7 @@
& .min-remaining {
@include centered-row;
justify-content: space-between;
flex-wrap: wrap;

@include desktop {
justify-content: flex-end;
Expand All @@ -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 {
Expand Down Expand Up @@ -370,5 +372,7 @@
}

.governor-container-table-title-tooltip {
max-width: 440px !important;
@include tablet {
max-width: 440px !important;
}
}
2 changes: 1 addition & 1 deletion src/pages/Txs/Top/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
4 changes: 4 additions & 0 deletions src/pages/Txs/Top/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,10 @@
@include centered-row;
@include text-roboto-subheading-500;
gap: 8px;

& > svg {
color: var(--color-gray-600);
}
}

&-live-mode {
Expand Down
3 changes: 3 additions & 0 deletions src/utils/governorUtils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down