+>(({ className, ...props }, ref) => (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+ HTMLTableCaptionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableFooter,
+ TableHead,
+ TableHeader,
+ TableRow,
+};
diff --git a/src/hooks/chart.ts b/src/hooks/chart.ts
index c6a90d5..ba3f4f0 100644
--- a/src/hooks/chart.ts
+++ b/src/hooks/chart.ts
@@ -1,5 +1,4 @@
-import { fetcher } from "@/lib/fetcher";
-import { MainChartData } from "@/types/base";
+import { getMainChartData } from "@/api";
import { useQuery } from "@tanstack/react-query";
import { useMemo } from "react";
@@ -12,9 +11,7 @@ export function useMainChartData() {
return useQuery({
queryKey,
queryFn: async () => {
- const endpoint = "/api/main-chart-data";
- const data = await fetcher(endpoint);
- return data;
+ return await getMainChartData();
},
});
}
diff --git a/src/hooks/height.ts b/src/hooks/height.ts
index 6debe16..c029936 100644
--- a/src/hooks/height.ts
+++ b/src/hooks/height.ts
@@ -14,6 +14,5 @@ export function useLatestHeightQuery() {
queryFn: async () => {
return getLatestHeight();
},
- keepPreviousData: true,
});
}
diff --git a/src/hooks/validator.ts b/src/hooks/validator.ts
index 05e129a..3aba53d 100644
--- a/src/hooks/validator.ts
+++ b/src/hooks/validator.ts
@@ -1,6 +1,7 @@
import { getValidatorStats, getValidators } from "@/api";
import { stringOrUndefined } from "@/lib/string";
import { Validator, ValidatorWithStats } from "@/types/base";
+import { slugifyWithCounter } from "@sindresorhus/slugify";
import { useQuery } from "@tanstack/react-query";
import { useRouter } from "next/router";
import { useMemo } from "react";
@@ -29,7 +30,6 @@ export function useValidatorsQuery(
queryFn: async () => {
return getValidators();
},
- keepPreviousData: true,
select,
});
}
@@ -68,9 +68,12 @@ export function useValidatorsWithStatsQuery(
toHeight: args.toHeight,
});
+ const slugify = slugifyWithCounter();
+
function withStats(validator: Validator): ValidatorWithStats {
return {
...validator,
+ slug: slugify(validator.moniker),
averageMev: parseFloat(stats[validator.pubkey]) || 0.0,
};
}
@@ -80,7 +83,6 @@ export function useValidatorsWithStatsQuery(
return validatorWithStats;
},
enabled: !!toHeight && !!validators,
- keepPreviousData: true,
select,
});
}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..a5ef193
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index a7dd808..bd4c1e0 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,31 +1,22 @@
-import { queryClient } from "@/lib/react-query";
import "@/styles/globals.css";
+import "@fontsource-variable/inconsolata";
+import "@fontsource-variable/inter";
+
+import Layout from "@/components/Layout";
+import { queryClient } from "@/lib/react-query";
import { QueryClientProvider } from "@tanstack/react-query";
-import type { AppProps } from "next/app";
-import { Inconsolata, Inter } from "next/font/google";
-import { Fragment } from "react";
import { Analytics } from "@vercel/analytics/react";
-import Layout from "@/components/Layout";
-
-const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
-
-const inconsolata = Inconsolata({
- subsets: ["latin"],
- variable: "--font-inconsolata",
-});
+import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
return (
-
+ <>
-
+
-
+
);
}
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 4b4d8be..0c8b98c 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,31 +1,13 @@
-import { Html, Head, Main, NextScript } from "next/document";
+import { Head, Html, Main, NextScript } from "next/document";
export default function Document() {
return (
-
+
-
-
-
-
-
-
+
+
-
+
diff --git a/src/pages/api/main-chart-data.ts b/src/pages/api/main-chart-data.ts
deleted file mode 100644
index 7bd1848..0000000
--- a/src/pages/api/main-chart-data.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { getMainChartData } from "@/api";
-import { PageConfig } from "next";
-import { NextRequest } from "next/server";
-
-export const config: PageConfig = {
- runtime: "edge",
-};
-
-export default async function handler(req: NextRequest) {
- const data = await getMainChartData();
-
- return new Response(JSON.stringify(data), {
- headers: {
- "content-type": "application/json",
- "cache-control": "max-age=1, s-maxage=1, stale-while-revalidate=59",
- },
- });
-}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index fc6e1f7..85f620c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,17 +1,17 @@
-/* eslint-disable @next/next/no-img-element */
-import { Fragment } from "react";
import Card from "@/components/Card";
-import Head from "next/head";
-import { SearchInput } from "@/components/pages/home/SearchInput";
+import { DydxIcon } from "@/components/icons/Dydx";
+import { SkipIcon } from "@/components/icons/Skip";
import { InactiveToggle } from "@/components/pages/home/InactiveToggle";
-import { TimeframeSelect } from "@/components/pages/home/TimeframeSelect";
-import { SortBySelect } from "@/components/pages/home/SortBySelect";
-import { SortOrderButton } from "@/components/pages/home/SortOrderButton";
-import { ValidatorsTable } from "@/components/pages/home/ValidatorsTable";
import { MainChart } from "@/components/pages/home/MainChart";
import { MainChartToggles } from "@/components/pages/home/MainChartToggles";
+import { SearchInput } from "@/components/pages/home/SearchInput";
+import { SortBySelect } from "@/components/pages/home/SortBySelect";
+import { SortOrderButton } from "@/components/pages/home/SortOrderButton";
+import { TimeframeSelect } from "@/components/pages/home/TimeframeSelect";
import { ValidatorLoadingIndicator } from "@/components/pages/home/ValidatorLoadingIndicator";
+import { ValidatorsTable } from "@/components/pages/home/ValidatorsTable/legacy";
import clsx from "clsx";
+import Head from "next/head";
export default function Home() {
return (
@@ -24,9 +24,9 @@ export default function Home() {
- 
+
/
- 
+
Orderbook Discrepancy
diff --git a/src/pages/validators/[pubkey].tsx b/src/pages/validators/[pubkey].tsx
index 1290de6..ff717a4 100644
--- a/src/pages/validators/[pubkey].tsx
+++ b/src/pages/validators/[pubkey].tsx
@@ -12,7 +12,6 @@ import Head from "next/head";
import Link from "next/link";
import { useMemo } from "react";
import {
- Legend,
Line,
LineChart,
ResponsiveContainer,
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ce4d810..8d5b5d0 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -5,20 +5,3 @@
:root {
color-scheme: dark;
}
-
-@keyframes fade-right {
- 0% {
- opacity: 0;
- transform: translate(-100%);
- }
-
- to {
- opacity: 1;
- transform: translate(100%)
- }
-}
-
-.animate-fade-right {
- animation: fade-right 2s both;
- animation-iteration-count: infinite;
-}
\ No newline at end of file
diff --git a/src/types/base.ts b/src/types/base.ts
index 7a9d6f7..5734771 100644
--- a/src/types/base.ts
+++ b/src/types/base.ts
@@ -25,6 +25,7 @@ export type Validator = {
};
export type ValidatorWithStats = Validator & {
+ slug: string;
averageMev: number;
};
diff --git a/src/types/utils.ts b/src/types/utils.ts
index e9611cd..e559069 100644
--- a/src/types/utils.ts
+++ b/src/types/utils.ts
@@ -1,12 +1,17 @@
+import slugify from "@sindresorhus/slugify";
import { formatUnits } from "ethers";
import { Validator, ValidatorWithStats } from "./base";
export const ValidatorComparer = {
VALIDATOR_ASC: (a: T, b: T) => {
- return a.moniker.localeCompare(b.moniker);
+ const left = "slug" in a ? a.slug : slugify(a.moniker);
+ const right = "slug" in b ? b.slug : slugify(b.moniker);
+ return left.localeCompare(right);
},
VALIDATOR_DESC: (a: T, b: T) => {
- return b.moniker.localeCompare(a.moniker);
+ const left = "slug" in a ? a.slug : slugify(a.moniker);
+ const right = "slug" in b ? b.slug : slugify(b.moniker);
+ return right.localeCompare(left);
},
AVERAGE_MEV_ASC: (a: T, b: T) => {
const aMev = parseFloat(formatUnits(a.averageMev, 6));
diff --git a/tailwind.config.js b/tailwind.config.js
index 7a52270..80613f8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,28 +1,77 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
+// @ts-check
+
+const { fontFamily } = require("tailwindcss/defaultTheme");
+
+/**
+ * @type {import("tailwindcss").Config}
+ * @see https://tailwindcss.com/docs/theme
+ */
+const tailwindConfig = {
+ darkMode: "class",
content: [
- "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
- "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
- "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+ "./src/app/**/*.{js,ts,jsx,tsx}",
+ "./src/components/**/*.{js,ts,jsx,tsx}",
+ "./src/pages/**/*.{js,ts,jsx,tsx}",
],
- safelist: ["text-left", "text-center", "text-right"],
theme: {
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
extend: {
- fontFamily: {
- sans: ["Inter", "sans-serif"],
- mono: ["Inconsolata", "monospace"],
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ "fade-right": "fade-right 2s both infinite",
},
colors: {
- light: "#F3F6F8",
- "light-3": "#F3F6F808",
- "light-10": "#F3F6F81A",
- "light-40": "#F3F6F866",
- "light-50": "#F3F6F880",
- "light-60": "#F3F6F899",
- "light-70": "#F3F6F8B2",
- "light-95": "#F3F6F8F2",
+ dydx: {
+ alert: "#FF486E",
+ bg: "#151617",
+ },
+ light: {
+ 30: "#F3F6F808",
+ 50: "#F3F6F80D",
+ 100: "#F3F6F81A",
+ 200: "#F3F6F833",
+ 300: "#F3F6F84D",
+ 400: "#F3F6F866",
+ 500: "#F3F6F880",
+ 600: "#F3F6F899",
+ 700: "#F3F6F8B2",
+ 800: "#F3F6F8CC",
+ 900: "#F3F6F8E5",
+ 950: "#F3F6F8F2",
+ DEFAULT: "#F3F6F8",
+ },
+ },
+ fontFamily: {
+ mono: ["Inconsolata Variable", "Inconsolata", ...fontFamily.mono],
+ sans: ["Inter Variable", "Inter", ...fontFamily.sans],
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: "0" },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: "0" },
+ },
+ "fade-right": {
+ from: { opacity: "0", transform: "translate(-100%)" },
+ to: { opacity: "1", transform: "translate(100%)" },
+ },
},
},
},
- plugins: [],
+ plugins: [
+ require("tailwindcss-animate"),
+ //
+ ],
};
+
+module.exports = tailwindConfig;
|