Merge pull request #1875 from cprussin/search-sort-filter-publishers

feat(staking): sort, filter, and paginate publishers

Author: cprussin

apps/staking/src/api.ts

@@ -38,7 +38,7 @@ type Data = {
     cooldown2: bigint;
   };
   integrityStakingPublishers: {
-    name: string;
+    name: string | undefined;
     publicKey: PublicKey;
     isSelf: boolean;
     selfStake: bigint;
@@ -196,7 +196,7 @@ export const loadData = async (
     integrityStakingPublishers: publishers.map(({ pubkey: publisher }) => ({
       apyHistory: [], // TODO
       isSelf: false, // TODO
-      name: publisher.toString(),
+      name: undefined, // TODO
       numFeeds: 0, // TODO
       poolCapacity: 100n, // TODO
       poolUtilization: 0n, // TODO

apps/staking/src/components/Footer/index.tsx

@@ -36,12 +36,12 @@ export const Footer = ({
 }: Omit<HTMLAttributes<HTMLElement>, "children">) => (
   <footer
     className={clsx(
-      "sticky bottom-0 mt-4 px-4 text-xs font-light text-neutral-400",
+      "sticky bottom-0 mt-4 text-xs font-light text-neutral-400 sm:px-4",
       className,
     )}
     {...props}
   >
-    <div className="border-x border-t border-neutral-600/50 bg-pythpurple-800">
+    <div className="border-t border-neutral-600/50 bg-pythpurple-800 sm:border-x">
       <MaxWidth className="flex h-16 items-center justify-between sm:-mx-4">
         <div>© 2024 Pyth Data Association</div>
         <div className="relative -right-3 flex h-full items-center">

apps/staking/src/components/Header/index.tsx

@@ -12,10 +12,10 @@ export const Header = ({
   ...props
 }: Omit<HTMLAttributes<HTMLElement>, "children">) => (
   <header
-    className={clsx("sticky top-0 mb-4 w-full px-4", className)}
+    className={clsx("sticky top-0 mb-4 w-full sm:px-4", className)}
     {...props}
   >
-    <div className="border-x border-b border-neutral-600/50 bg-pythpurple-800">
+    <div className="border-b border-neutral-600/50 bg-pythpurple-800 sm:border-x">
       <MaxWidth className="flex h-16 items-center justify-between gap-8 sm:-mx-4">
         <Logo className="max-h-full py-4 text-pythpurple-100" />
         <WalletButton className="flex-none" />

apps/staking/src/components/MaxWidth/index.tsx

@@ -1,3 +1,6 @@
 import { Styled } from "../Styled";
 
-export const MaxWidth = Styled("div", "w-full px-6 sm:px-12 overflow-hidden");
+export const MaxWidth = Styled(
+  "div",
+  "min-w-full px-6 sm:px-12 overflow-hidden",
+);