feat(staking): expose publisher names for pubs who wish to be public

pyth-network · Oct 9, 2024 · 85ef2c0 · 85ef2c0
1 parent 8cd4792
commit 85ef2c0
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 38 deletions.
diff --git a/apps/staking/public/publisher-icons/blocksize.png b/apps/staking/public/publisher-icons/blocksize.png
diff --git a/apps/staking/src/api.ts b/apps/staking/src/api.ts
@@ -12,6 +12,8 @@ import {
 import { PublicKey } from "@solana/web3.js";
 import { z } from "zod";
 
+import { KNOWN_PUBLISHERS } from "./known-publishers";
+
 const publishersRankingSchema = z
  .object({
  publisher: z.string(),
@@ -47,7 +49,12 @@ type Data = {
  m: bigint;
  z: bigint;
  integrityStakingPublishers: {
- name: string | undefined;
+ identity:
+ | {
+ name: string;
+ icon: string;
+ }
+ | undefined;
  publicKey: PublicKey;
  stakeAccount: PublicKey | undefined;
  selfStake: bigint;
@@ -263,7 +270,9 @@ const loadPublisherData = async (
 
  return {
  apyHistory,
- name: undefined, // TODO
+ identity: (
+ KNOWN_PUBLISHERS as Record<string, { name: string; icon: string }>
+ )[publisher.pubkey.toBase58()],
  numFeeds: numberOfSymbols ?? 0,
  poolCapacity: getPublisherCap(publisherCaps, publisher.pubkey),
  poolUtilization: publisher.totalDelegation,

diff --git a/apps/staking/src/components/CopyButton/index.tsx b/apps/staking/src/components/CopyButton/index.tsx
@@ -52,21 +52,21 @@ export const CopyButton = ({
  onPress={copy}
  isDisabled={isCopied}
  className={clsx(
- "group -mx-2 -mt-0.5 rounded-md px-2 py-0.5 align-middle transition hover:bg-white/10 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400",
+ "group mx-[-0.25em] -mt-0.5 inline-block rounded-md px-[0.25em] py-0.5 transition hover:bg-white/10 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400",
  className,
  )}
  {...(isCopied && { "data-is-copied": true })}
  {...props}
  >
  {(...args) => (
  <>
- <span className="align-middle">
+ <span>
  {typeof children === "function" ? children(...args) : children}
  </span>
- <span className="relative ml-[0.25em] inline-block align-middle">
+ <span className="relative top-[0.125em] ml-[0.25em] inline-block">
  <span className="opacity-50 transition-opacity duration-100 group-data-[is-copied]:opacity-0">
  <ClipboardDocumentIcon className="size-[1em]" />
- <div className="sr-only">Copy code to clipboaord</div>
+ <div className="sr-only">Copy to clipboard</div>
  </span>
  <CheckIcon className="absolute inset-0 text-green-600 opacity-0 transition-opacity duration-100 group-data-[is-copied]:opacity-100" />
  </span>

diff --git a/apps/staking/src/components/Header/current-stake-account.tsx b/apps/staking/src/components/Header/current-stake-account.tsx
@@ -28,7 +28,7 @@ export const CurrentStakeAccount = ({
  <div className="font-semibold">Stake account:</div>
  <CopyButton
  text={api.account.toBase58()}
- className="-mr-2 text-pythpurple-400 md:ml-2 md:mr-0"
+ className="text-pythpurple-400 xl:ml-2 xl:mr-0"
  >
  <TruncatedKey>{api.account}</TruncatedKey>
  </CopyButton>

diff --git a/apps/staking/src/components/OracleIntegrityStaking/index.tsx b/apps/staking/src/components/OracleIntegrityStaking/index.tsx
@@ -10,6 +10,7 @@ import {
 import { calculateApy } from "@pythnetwork/staking-sdk";
 import { PublicKey } from "@solana/web3.js";
 import clsx from "clsx";
+import Image from "next/image";
 import {
  useMemo,
  useCallback,
@@ -353,7 +354,7 @@ const ReassignStakeAccount = ({
  closeDisabled={closeDisabled}
  description={
  <>
- <span className="mr-3 align-middle">
+ <span className="mr-[0.5em]">
  Designate a different stake account as the self-staking account for
  </span>
  <PublisherName className="font-semibold">{self}</PublisherName>
@@ -613,8 +614,8 @@ const PublisherList = ({
  .filter(
  (publisher) =>
  filter.contains(publisher.publicKey.toBase58(), search) ||
- (publisher.name !== undefined &&
- filter.contains(publisher.name, search)),
+ (publisher.identity !== undefined &&
+ filter.contains(publisher.identity.name, search)),
  )
  .sort((a, b) => {
  if (yoursFirst) {
@@ -1027,8 +1028,8 @@ const compareName = (
 ) =>
  (reverse ? -1 : 1) *
  collator.compare(
- a.name ?? a.publicKey.toBase58(),
- b.name ?? b.publicKey.toBase58(),
+ a.identity?.name ?? a.publicKey.toBase58(),
+ b.identity?.name ?? b.publicKey.toBase58(),
  );
 
 const compareApy = (
@@ -1166,7 +1167,12 @@ type PublisherProps = {
  totalStaked: bigint;
  isSelf?: boolean | undefined;
  publisher: {
- name: string | undefined;
+ identity:
+ | {
+ name: string;
+ icon: string;
+ }
+ | undefined;
  publicKey: PublicKey;
  stakeAccount: PublicKey | undefined;
  selfStake: bigint;
@@ -1247,6 +1253,7 @@ const Publisher = ({
  publisher.poolCapacity,
  publisher.poolUtilization,
  publisher.poolUtilizationDelta,
+ publisher.delegationFee,
  yieldRate,
  ],
  );
@@ -1259,6 +1266,7 @@ const Publisher = ({
  className="font-semibold"
  truncatedClassName="md:hidden"
  fullClassName="hidden md:inline"
+ withNameClassName="flex flex-col items-start"
  >
  {publisher}
  </PublisherName>
@@ -1359,6 +1367,7 @@ const Publisher = ({
  <PublisherName
  truncatedClassName="3xl:hidden"
  fullClassName="hidden 3xl:inline"
+ withNameClassName="flex flex-col items-start"
  >
  {publisher}
  </PublisherName>
@@ -1526,7 +1535,7 @@ const YourPositionsTable = ({
  className="w-28"
  actionDescription={
  <>
- <span className="mr-3 align-middle">
+ <span className="mr-[0.5em]">
  Cancel tokens that are in warmup for staking to
  </span>
  <PublisherName className="font-semibold">
@@ -1563,9 +1572,7 @@ const YourPositionsTable = ({
  className="md:w-28"
  actionDescription={
  <>
- <span className="mr-3 align-middle">
- Unstake tokens from
- </span>
+ <span className="mr-[0.5em]">Unstake tokens from</span>
  <PublisherName className="font-semibold">
  {publisher}
  </PublisherName>
@@ -1615,7 +1622,7 @@ const StakeToPublisherButton = ({
  size="small"
  actionDescription={
  <>
- <span className="mr-3 align-middle">Stake to</span>
+ <span className="mr-[0.5em]">Stake to</span>
  <PublisherName className="font-semibold">{publisher}</PublisherName>
  </>
  }
@@ -1690,41 +1697,66 @@ const NewApy = ({
  publisher.selfStakeDelta,
  publisher.poolUtilization,
  publisher.poolUtilizationDelta,
+ publisher.delegationFee,
  children,
  ],
  );
 
  return <div {...props}>{apy}%</div>;
 };
 
-type PublisherNameProps = {
+type PublisherNameProps = PublisherKeyProps & {
+ withNameClassName?: string | undefined;
+};
+
+const PublisherName = ({
+ className,
+ withNameClassName,
+ ...props
+}: PublisherNameProps) =>
+ props.children.identity ? (
+ <span className={clsx(className, withNameClassName)}>
+ <span>
+ <Image
+ alt={`${props.children.identity.name} icon`}
+ src={props.children.identity.icon}
+ className="mr-2 inline-block size-[20px] align-sub"
+ width={20}
+ height={20}
+ />
+ <span className="mr-[0.5em]">{props.children.identity.name}</span>
+ </span>
+ <PublisherKey className="text-sm opacity-50" {...props} />
+ </span>
+ ) : (
+ <PublisherKey className={className} {...props} />
+ );
+
+type PublisherKeyProps = {
  className?: string | undefined;
  children: PublisherProps["publisher"];
  fullClassName?: string;
  truncatedClassName?: string;
 };
 
-const PublisherName = ({
+const PublisherKey = ({
  children,
  fullClassName,
  truncatedClassName,
  className,
-}: PublisherNameProps) =>
- children.name ? (
- <span className={className}>{children.name}</span>
- ) : (
- <CopyButton
- text={children.publicKey.toBase58()}
- {...(className && { className })}
- >
- {fullClassName && (
- <code className={fullClassName}>{children.publicKey.toBase58()}</code>
- )}
- <TruncatedKey className={truncatedClassName}>
- {children.publicKey}
- </TruncatedKey>
- </CopyButton>
- );
+}: PublisherKeyProps) => (
+ <CopyButton
+ text={children.publicKey.toBase58()}
+ {...(className && { className })}
+ >
+ {fullClassName && (
+ <code className={fullClassName}>{children.publicKey.toBase58()}</code>
+ )}
+ <TruncatedKey className={truncatedClassName}>
+ {children.publicKey}
+ </TruncatedKey>
+ </CopyButton>
+);
 
 const useTransferActionForPublisher = (
  action: ((publisher: PublicKey, amount: bigint) => Promise<void>) | undefined,

diff --git a/apps/staking/src/components/Tooltip/index.tsx b/apps/staking/src/components/Tooltip/index.tsx
@@ -9,14 +9,19 @@ type Props = Omit<ComponentProps<typeof TooltipImpl>, "children"> & {
 export const Tooltip = ({ children, className, offset, ...props }: Props) => (
  <TooltipImpl
  className={clsx(
- "border border-neutral-900 bg-neutral-200 px-2 py-1 text-sm text-neutral-900 shadow shadow-white/50 transition data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out data-[entering]:slide-in-from-bottom",
+ "group border border-neutral-900 bg-neutral-200 px-2 py-1 text-sm text-neutral-900 shadow shadow-white/50 transition data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out data-[entering]:slide-in-from-bottom",
  className,
  )}
  offset={offset ?? 10}
  {...props}
  >
  <OverlayArrow>
- <svg width={8} height={8} viewBox="0 0 8 8" className="fill-neutral-200">
+ <svg
+ width={8}
+ height={8}
+ viewBox="0 0 8 8"
+ className="fill-neutral-200 group-data-[placement=bottom]:rotate-180"
+ >
  <path d="M0 0 L4 4 L8 0" />
  </svg>
  </OverlayArrow>

diff --git a/apps/staking/src/known-publishers.ts b/apps/staking/src/known-publishers.ts
@@ -0,0 +1,6 @@
+export const KNOWN_PUBLISHERS = {
+ CfVkYofcLC1iVBcYFzgdYPeiX25SVRmWvBQVHorP1A3y: {
+ name: "BLOCKSIZE",
+ icon: "/publisher-icons/blocksize.png",
+ },
+};