From 7770e8eb5b03844bbc55752fab4b16e1d6a4f1f2 Mon Sep 17 00:00:00 2001 From: Connor Prussin Date: Thu, 12 Sep 2024 17:03:13 -0700 Subject: [PATCH] Revert "feat(staking) address some feedback items" --- .../src/components/CopyButton/index.tsx | 77 ------ .../Header/current-stake-account.tsx | 30 --- apps/staking/src/components/Header/index.tsx | 12 +- .../src/components/Header/logomark.svg | 4 - .../OracleIntegrityStaking/index.tsx | 250 +++++++----------- apps/staking/src/components/Root/index.tsx | 3 +- apps/staking/src/config/server.ts | 10 +- apps/staking/src/hooks/use-api.tsx | 17 +- 8 files changed, 117 insertions(+), 286 deletions(-) delete mode 100644 apps/staking/src/components/CopyButton/index.tsx delete mode 100644 apps/staking/src/components/Header/current-stake-account.tsx delete mode 100644 apps/staking/src/components/Header/logomark.svg diff --git a/apps/staking/src/components/CopyButton/index.tsx b/apps/staking/src/components/CopyButton/index.tsx deleted file mode 100644 index 79ae043936..0000000000 --- a/apps/staking/src/components/CopyButton/index.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { ClipboardDocumentIcon, CheckIcon } from "@heroicons/react/24/outline"; -import clsx from "clsx"; -import { type ComponentProps, useCallback, useEffect, useState } from "react"; -import { Button } from "react-aria-components"; - -import { useLogger } from "../../hooks/use-logger"; - -type CopyButtonProps = ComponentProps & { - text: string; -}; - -export const CopyButton = ({ - text, - children, - className, - ...props -}: CopyButtonProps) => { - const [isCopied, setIsCopied] = useState(false); - const logger = useLogger(); - const copy = useCallback(() => { - // eslint-disable-next-line n/no-unsupported-features/node-builtins - navigator.clipboard - .writeText(text) - .then(() => { - setIsCopied(true); - }) - .catch((error: unknown) => { - /* TODO do something here? */ - logger.error(error); - }); - }, [text, logger]); - - useEffect(() => { - setIsCopied(false); - }, [text]); - - useEffect(() => { - if (isCopied) { - const timeout = setTimeout(() => { - setIsCopied(false); - }, 2000); - return () => { - clearTimeout(timeout); - }; - } else { - return; - } - }, [isCopied]); - - return ( - - ); -}; diff --git a/apps/staking/src/components/Header/current-stake-account.tsx b/apps/staking/src/components/Header/current-stake-account.tsx deleted file mode 100644 index 2f6858c523..0000000000 --- a/apps/staking/src/components/Header/current-stake-account.tsx +++ /dev/null @@ -1,30 +0,0 @@ -"use client"; - -import clsx from "clsx"; -import { type HTMLProps } from "react"; - -import { StateType as ApiStateType, useApi } from "../../hooks/use-api"; -import { CopyButton } from "../CopyButton"; -import { TruncatedKey } from "../TruncatedKey"; - -export const CurrentStakeAccount = ({ - className, - ...props -}: HTMLProps) => { - const api = useApi(); - - return api.type === ApiStateType.Loaded ? ( -
-
-
Stake account:
- - {api.account.address} - -
-
- ) : // eslint-disable-next-line unicorn/no-null - null; -}; diff --git a/apps/staking/src/components/Header/index.tsx b/apps/staking/src/components/Header/index.tsx index 2a6c7b53ec..77cc549708 100644 --- a/apps/staking/src/components/Header/index.tsx +++ b/apps/staking/src/components/Header/index.tsx @@ -1,9 +1,7 @@ import clsx from "clsx"; import type { HTMLAttributes } from "react"; -import { CurrentStakeAccount } from "./current-stake-account"; import Logo from "./logo.svg"; -import Logomark from "./logomark.svg"; import { MaxWidth } from "../MaxWidth"; import { WalletButton } from "../WalletButton"; @@ -16,13 +14,9 @@ export const Header = ({ {...props} >
- - - -
- - -
+ + +
diff --git a/apps/staking/src/components/Header/logomark.svg b/apps/staking/src/components/Header/logomark.svg deleted file mode 100644 index 35b01dc7e6..0000000000 --- a/apps/staking/src/components/Header/logomark.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/apps/staking/src/components/OracleIntegrityStaking/index.tsx b/apps/staking/src/components/OracleIntegrityStaking/index.tsx index 66bc201d5c..d73ff30bae 100644 --- a/apps/staking/src/components/OracleIntegrityStaking/index.tsx +++ b/apps/staking/src/components/OracleIntegrityStaking/index.tsx @@ -26,7 +26,6 @@ import { DialogTrigger, TextField, Form, - Switch, } from "react-aria-components"; import { type States, StateType as ApiStateType } from "../../hooks/use-api"; @@ -35,7 +34,6 @@ import { useAsync, } from "../../hooks/use-async"; import { Button } from "../Button"; -import { CopyButton } from "../CopyButton"; import { ModalDialog } from "../ModalDialog"; import { ProgramSection } from "../ProgramSection"; import { SparkChart } from "../SparkChart"; @@ -113,7 +111,7 @@ export const OracleIntegrityStaking = ({

- You - {self} + You ({self})

@@ -428,45 +426,64 @@ const PublisherList = ({ yieldRate, }: PublisherListProps) => { const [search, setSearch] = useState(""); - const [yoursFirst, setYoursFirst] = useState(true); const [sort, setSort] = useState({ field: SortField.PoolUtilization, - descending: true, + descending: false, }); const filter = useFilter({ sensitivity: "base", usage: "search" }); const [currentPage, setPage] = useState(0); - const filteredSortedPublishers = useMemo( - () => - publishers - .filter( - (publisher) => - filter.contains(publisher.publicKey.toBase58(), search) || - (publisher.name !== undefined && - filter.contains(publisher.name, search)), - ) - .sort((a, b) => { - if (yoursFirst) { - const aHasPositions = hasAnyPositions(a); - const bHasPositions = hasAnyPositions(b); - if (aHasPositions && !bHasPositions) { - return -1; - } else if (bHasPositions && !aHasPositions) { - return 1; - } + const filteredSortedPublishers = useMemo(() => { + const sorted = publishers + .filter( + (publisher) => + filter.contains(publisher.publicKey.toBase58(), search) || + (publisher.name !== undefined && + filter.contains(publisher.name, search)), + ) + .sort((a, b) => { + switch (sort.field) { + case SortField.PublisherName: { + return (a.name ?? a.publicKey.toBase58()).localeCompare( + b.name ?? b.publicKey.toBase58(), + ); } - const sortResult = doSort(a, b, yieldRate, sort.field); - return sort.descending ? sortResult * -1 : sortResult; - }), - [ - publishers, - search, - sort.field, - sort.descending, - filter, - yieldRate, - yoursFirst, - ], - ); + case SortField.APY: { + return ( + calculateApy({ + isSelf: false, + selfStake: a.selfStake, + poolCapacity: a.poolCapacity, + poolUtilization: a.poolUtilization, + yieldRate, + }) - + calculateApy({ + isSelf: false, + selfStake: b.selfStake, + poolCapacity: b.poolCapacity, + poolUtilization: b.poolUtilization, + yieldRate, + }) + ); + } + case SortField.NumberOfFeeds: { + return Number(a.numFeeds - b.numFeeds); + } + case SortField.PoolUtilization: { + return Number( + a.poolUtilization * b.poolCapacity - + b.poolUtilization * a.poolCapacity, + ); + } + case SortField.QualityRanking: { + return Number(a.qualityRanking - b.qualityRanking); + } + case SortField.SelfStake: { + return Number(a.selfStake - b.selfStake); + } + } + }); + return sort.descending ? sorted.reverse() : sorted; + }, [publishers, search, sort.field, sort.descending, filter, yieldRate]); const paginatedPublishers = useMemo( () => @@ -495,42 +512,28 @@ const PublisherList = ({ return (
-
-

{title}

+
+

{title}

-
- - -
- -
-
- - - -
- - -
- Show your positions first -
-
-
-
- -
+ + +
+ +
+
+ + + +
+
{filteredSortedPublishers.length > 0 ? ( @@ -541,8 +544,7 @@ const PublisherList = ({ field={SortField.PublisherName} sort={sort} setSort={updateSort} - alignment="left" - className="pl-4 sm:pl-10" + className="pl-4 text-left sm:pl-10" > Publisher @@ -551,7 +553,7 @@ const PublisherList = ({ sort={sort} setSort={updateSort} > - {"Publisher's stake"} + Self stake { - switch (sortField) { - case SortField.PublisherName: { - return (a.name ?? a.publicKey.toBase58()).localeCompare( - b.name ?? b.publicKey.toBase58(), - ); - } - case SortField.APY: { - return ( - calculateApy({ - isSelf: false, - selfStake: a.selfStake, - poolCapacity: a.poolCapacity, - poolUtilization: a.poolUtilization, - yieldRate, - }) - - calculateApy({ - isSelf: false, - selfStake: b.selfStake, - poolCapacity: b.poolCapacity, - poolUtilization: b.poolUtilization, - yieldRate, - }) - ); - } - case SortField.NumberOfFeeds: { - return Number(a.numFeeds - b.numFeeds); - } - case SortField.PoolUtilization: { - const value = Number( - a.poolUtilization * b.poolCapacity - b.poolUtilization * a.poolCapacity, - ); - return value === 0 ? Number(a.poolCapacity - b.poolCapacity) : value; - } - case SortField.QualityRanking: { - return Number(a.qualityRanking - b.qualityRanking); - } - case SortField.SelfStake: { - return Number(a.selfStake - b.selfStake); - } - } -}; - const range = (length: number) => [...Array.from({ length }).keys()]; type SortablePublisherTableHeaderProps = Omit< @@ -694,7 +648,6 @@ type SortablePublisherTableHeaderProps = Omit< field: SortField; sort: { field: SortField; descending: boolean }; setSort: Dispatch>; - alignment?: "left" | "right"; }; const SortablePublisherTableHeader = ({ @@ -703,7 +656,6 @@ const SortablePublisherTableHeader = ({ setSort, children, className, - alignment, ...props }: SortablePublisherTableHeaderProps) => { const updateSort = useCallback(() => { @@ -718,17 +670,20 @@ const SortablePublisherTableHeader = ({ - {children} - + {children} + ); @@ -1090,30 +1045,25 @@ const NewApy = ({ return
{apy}%
; }; -type PublisherNameProps = { - className?: string | undefined; +type PublisherNameProps = Omit, "children"> & { children: PublisherProps["publisher"]; fullKey?: boolean | undefined; }; -const PublisherName = ({ children, fullKey, className }: PublisherNameProps) => - children.name ? ( - {children.name} - ) : ( - - {fullKey === true && ( - - {children.publicKey.toBase58()} - - )} - - {children.publicKey} - - - ); +const PublisherName = ({ children, fullKey, ...props }: PublisherNameProps) => ( + + {children.name ?? ( + <> + {fullKey === true && ( + + {children.publicKey.toBase58()} + + )} + {children.publicKey} + + )} + +); const useTransferActionForPublisher = ( action: ((publisher: PublicKey, amount: bigint) => Promise) | undefined, diff --git a/apps/staking/src/components/Root/index.tsx b/apps/staking/src/components/Root/index.tsx index 63f48fc0e0..6f16a51743 100644 --- a/apps/staking/src/components/Root/index.tsx +++ b/apps/staking/src/components/Root/index.tsx @@ -10,7 +10,6 @@ import { AMPLITUDE_API_KEY, WALLETCONNECT_PROJECT_ID, RPC, - HERMES_URL, IS_MAINNET, } from "../../config/server"; import { ApiProvider } from "../../hooks/use-api"; @@ -49,7 +48,7 @@ export const Root = ({ children }: Props) => ( : WalletAdapterNetwork.Devnet } > - + , "value" > & { - hermesUrl: string; + isMainnet: boolean; }; -export const ApiProvider = ({ hermesUrl, ...props }: ApiProviderProps) => { - const state = useApiContext(hermesUrl); +export const ApiProvider = ({ isMainnet, ...props }: ApiProviderProps) => { + const state = useApiContext(isMainnet); return ; }; -const useApiContext = (hermesUrl: string) => { +const useApiContext = (isMainnet: boolean) => { const loading = useRef(false); const wallet = useWallet(); const { connection } = useConnection(); @@ -192,7 +195,9 @@ const useApiContext = (hermesUrl: string) => { signTransaction: wallet.signTransaction, }, }); - const hermesClient = new HermesClient(hermesUrl); + const hermesClient = new HermesClient( + isMainnet ? MAINNET_HERMES_URL : DEVNET_HERMES_URL, + ); setState(State[StateType.LoadingStakeAccounts](client, hermesClient)); api .getStakeAccounts(client) @@ -243,7 +248,7 @@ const useApiContext = (hermesUrl: string) => { loading.current = false; }); } - }, [connection, setAccount, wallet, mutate, hermesUrl]); + }, [connection, setAccount, wallet, mutate, isMainnet]); useEffect(() => { reset();