diff --git a/apps/explorer/src/app/components/blocks/blocks-refetch.tsx b/apps/explorer/src/app/components/blocks/blocks-refetch.tsx
index f0f9581e2..705caa2cf 100644
--- a/apps/explorer/src/app/components/blocks/blocks-refetch.tsx
+++ b/apps/explorer/src/app/components/blocks/blocks-refetch.tsx
@@ -1,13 +1,5 @@
import { t } from '@vegaprotocol/i18n';
-import { Icon } from '@vegaprotocol/ui-toolkit';
-
-// These are cribbed from dropdown-menu.tsx, so that the classes match
-// the filter button this sits next to on the TXs list page
-const defaultClasses = [
- 'text-sm py-1 px-2 rounded bg-transparent border whitespace-nowrap',
- 'border-vega-light-200 dark:border-vega-dark-200',
- 'hover:border-vega-light-300 dark:hover:border-vega-dark-300',
-].join(' ');
+import { Button, Icon } from '@vegaprotocol/ui-toolkit';
interface BlocksRefetchProps {
refetch: () => void;
@@ -19,15 +11,9 @@ export const BlocksRefetch = ({ refetch }: BlocksRefetchProps) => {
};
return (
-
-
-
+
);
};
diff --git a/apps/explorer/src/app/components/txs/tx-filter-label.tsx b/apps/explorer/src/app/components/txs/tx-filter-label.tsx
new file mode 100644
index 000000000..dd759d0a8
--- /dev/null
+++ b/apps/explorer/src/app/components/txs/tx-filter-label.tsx
@@ -0,0 +1,24 @@
+import { t } from '@vegaprotocol/i18n';
+
+export interface FilterLabelProps {
+ filters: Set;
+}
+
+/**
+ * Renders the list (currently limited to 1) of filters set by the
+ * Transaction Filter
+ */
+export function FilterLabel({ filters }: FilterLabelProps) {
+ if (!filters || filters.size !== 1) {
+ return {t('Filter')};
+ }
+
+ return (
+
+ {t('Filters')}:
+
+ {Array.from(filters)[0]}
+
+
+ );
+}
diff --git a/apps/explorer/src/app/components/txs/tx-filter.tsx b/apps/explorer/src/app/components/txs/tx-filter.tsx
index f9c12d932..b2b4ead30 100644
--- a/apps/explorer/src/app/components/txs/tx-filter.tsx
+++ b/apps/explorer/src/app/components/txs/tx-filter.tsx
@@ -8,11 +8,12 @@ import {
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
- Icon,
DropdownMenuSubContent,
+ Icon,
+ Button,
} from '@vegaprotocol/ui-toolkit';
-import classNames from 'classnames';
import type { Dispatch, SetStateAction } from 'react';
+import { FilterLabel } from './tx-filter-label';
// All possible transaction types. Should be generated.
export type FilterOption =
@@ -80,28 +81,6 @@ export const AllFilterOptions: FilterOption[] = [
...SecondaryFilterOptions,
];
-export function getFilterLabel(filters: Set) {
- if (!filters || filters.size !== 1) {
- return {t('Filter')};
- }
-
- return (
-
- {t('Filters')}: {Array.from(filters)[0]}
-
- );
-}
-
-// Effectively a copy & paste of the Vega DropdownMenuItem styles
-const itemClass = classNames(
- 'relative flex gap-2 items-center rounded-sm p-2 text-sm',
- 'cursor-default',
- 'hover:bg-white dark:hover:bg-vega-dark-200',
- 'focus:bg-white dark:focus:bg-vega-dark-200',
- 'select-none',
- 'whitespace-nowrap'
-);
-
export interface TxFilterProps {
filters: Set;
setFilters: Dispatch>>;
@@ -121,7 +100,11 @@ export const TxsFilter = ({ filters, setFilters }: TxFilterProps) => {
{getFilterLabel(filters)}
+
+
+
}
>
@@ -152,7 +135,7 @@ export const TxsFilter = ({ filters, setFilters }: TxFilterProps) => {
))}
-
+
{t('More Types')}
diff --git a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
index eab8fdf7b..8dcfa217b 100644
--- a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
@@ -189,8 +189,12 @@ export const DropdownMenuSubContent = forwardRef<
export const DropdownMenuSubTrigger = forwardRef<
React.ElementRef,
React.ComponentProps
->(({ ...subTriggerProps }, forwardedRef) => (
-
+>(({ className, ...subTriggerProps }, forwardedRef) => (
+
));
/**